:root {
    --gap: clamp(0.75rem, 2vw, 2rem);
    --btn-height: clamp(120px, 28vh, 240px);
    --radius: 18px;
    --transition: 0.5s cubic-bezier(.16,.8,.24,1);
    --hero-min-h: min(72vh, 900px);
    --overlay: linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));
    color-scheme: light dark;
    --shadow: 0 8px 28px -8px rgba(0,0,0,.35),0 4px 12px -4px rgba(0,0,0,.25);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: "Segoe UI","PingFang SC","Helvetica Neue",Arial,sans-serif;
    background: #000; /* 底色备用 */
    color: #fff;
    min-height: 100dvh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-x: hidden;
    animation: page-fade-in .8s ease;
}

/* 禁止滚动状态 */
body.video-open {
    overflow: hidden;
}

/* 全屏背景层 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #000 center/cover no-repeat;
    background-image: none;
    opacity: 0;
    transition: opacity .6s ease;
    will-change: opacity;
}
/* JS 设置类 */
/* 用绝对路径，防止被解析成 /styles/img/... */
body.bg-landscape::before { background-image: url("/fl-homepage/public/img/BK1.png"); }
body.bg-portrait::before  { background-image: url("/fl-homepage/public/img/BK2.png"); }
/* 无 JS 备用 (宽高比媒体查询) */
@media (min-aspect-ratio: 6/5) {
    body:not(.bg-landscape):not(.bg-portrait)::before { background-image: url("/fl-homepage/public/img/BK1.png"); }
}
@media (max-aspect-ratio: 6/5) {
    body:not(.bg-landscape):not(.bg-portrait)::before { background-image: url("/fl-homepage/public/img/BK2.png"); }
}

body.bg-ready::before {
    opacity: 1;
}

body.bg-landscape { /* 需要可扩展可写一些色彩调节 */ }
body.bg-portrait  { /* 同上 */ }

.responsive-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

/* 移除 hero 样式及占位 (已删除 DOM，可注释或直接留空) */
.hero, .hero-overlay, .hero-title { display: none !important; }

.button-group {
    display: grid;
    gap: var(--gap);
    padding: var(--gap);
    margin: 0 auto clamp(1rem,4vh,3rem);
    width: min(100%, 1600px);
}

.image-buttons {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
}

.image-button {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: var(--btn-height);
    padding: 1.1rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    background: #222 center/cover no-repeat;
    cursor: pointer;
    color: #fff;
    font: 600 clamp(1rem,2.2vw,1.5rem)/1.2 "PingFang SC",sans-serif;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .65s cubic-bezier(.16,.8,.3,1), box-shadow .45s ease, filter .6s ease;
}

.image-button::before,
.image-button::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

.image-button::before {
    background: radial-gradient(circle at 60% 40%,rgba(255,255,255,.18),transparent 70%);
    mix-blend-mode: overlay;
    opacity: .35;
}

.image-button::after {
    background: linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55) 75%);
    opacity: .85;
}

.image-button .btn-label {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
    letter-spacing: .06em;
}

.image-button:focus-visible {
    outline: 3px solid #53a3ff;
    outline-offset: 3px;
}

@media (hover:hover) {
    .image-button:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 14px 40px -10px rgba(0,0,0,.55),0 6px 18px -6px rgba(0,0,0,.4);
    }
    .image-button:hover::before { opacity: .6; }
    .image-button:hover::after { opacity: .95; }
}

.image-button:active {
    transform: translateY(0) scale(.97);
    transition: transform .18s ease;
}

.image-button.image-loading {
    background: repeating-linear-gradient(135deg,#2a2f35 0 14px,#323940 14px 28px);
    position: relative;
}
.image-button.image-loading::after {
    content: "加载中...";
    position: absolute;
    inset: auto auto 8px 12px;
    font-size: .8rem;
    letter-spacing: .08em;
    opacity: .7;
}

.image-button.image-load-error {
    background: repeating-linear-gradient(45deg,#4a1d1d 0 10px,#672424 10px 20px);
}
.image-button.image-load-error::after {
    content: "加载失败";
    position: absolute;
    inset: auto auto 8px 12px;
    font-size: .78rem;
    color: #ffd1d1;
    text-shadow: 0 0 4px rgba(0,0,0,.6);
    letter-spacing: .1em;
}

.no-js-tip {
    margin: 1rem auto;
    padding: .75rem 1rem;
    background: #ffebcc;
    color: #222;
    border-radius: 6px;
    width: fit-content;
    font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* 可视区域淡入 */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s .1s ease, transform 1s .1s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 视频遮罩层 */
.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
}
.video-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(4px) saturate(1.2);
}

.video-shell {
    position: relative;
    width: min(92vw, 1280px);
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px -10px rgba(0,0,0,.6);
    border-radius: 14px;
    overflow: hidden;
    animation: video-pop .45s cubic-bezier(.16,.8,.3,1);
}

@keyframes video-pop {
    0% { transform: scale(.86) translateY(30px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

#fl-video {
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

.close-video {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .3s;
}
.close-video:hover {
    background: rgba(0,0,0,.75);
}
.close-video:active {
    transform: scale(.9);
}

/* 竖屏手机优化：占高比更大 */
@media (max-width: 780px) {
    .video-shell {
        width: 100vw;
        height: 100dvh;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }
    #fl-video {
        object-fit: contain;
    }
    .close-video {
        top: 14px;
        right: 14px;
        background: rgba(0,0,0,.6);
    }
}

/* 手机横屏时尽可能全屏利用宽度 */
@media (orientation: landscape) and (max-height: 560px) {
    .video-shell {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
    #fl-video {
        object-fit: cover;
    }
}

/* 动画关键帧 */
@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes float-in {
    0% { opacity: 0; transform: translateY(34px) scale(.95); }
    60% { opacity: 1; transform: translateY(-6px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}

/* 可删除 hero-load-error 相关 (已无 hero) */
.hero.hero-load-error,
.hero.hero-load-error::after {
    display: none;
}

/* 移除原视频遮罩相关样式块 (.video-overlay 等) 并添加 video 页面禁用背景 */
body.video-page::before { content: none !important; }