:root {
    --neon-green: #00ff00;
    --border-color: #334155;  /* 统一的高级暗边框 */
    --bg-dark1: #2f363e;
    --bg-dark2: #2e3339;
    --bg-dark3: #272e36;
    --bg-dark4: #24292d;
    --bg-dark5: #1c2125;
    --bg-dark6: #14191d;
    --grad1: linear-gradient(145deg,
        var(--bg-dark1) 0%,
        var(--bg-dark3) 18%,
        var(--bg-dark4) 48%,
        var(--bg-dark5) 74%,
        var(--bg-dark6) 100%);

    /* 2. 上亮下沉：像顶面受光 */
    --grad2: linear-gradient(180deg,
        var(--bg-dark1) 0%,
        var(--bg-dark2) 16%,
        var(--bg-dark4) 46%,
        var(--bg-dark5) 72%,
        var(--bg-dark6) 100%);

    /* 3. 左亮右暗：适合横向按钮/面板 */
    --grad3: linear-gradient(90deg,
        var(--bg-dark1) 0%,
        var(--bg-dark2) 20%,
        var(--bg-dark4) 52%,
        var(--bg-dark5) 76%,
        var(--bg-dark6) 100%);

    /* 4. 中央凸起：像按钮中间微微鼓起 */
    --grad4: radial-gradient(circle at 50% 35%,
        var(--bg-dark1) 0%,
        var(--bg-dark2) 24%,
        var(--bg-dark4) 52%,
        var(--bg-dark5) 74%,
        var(--bg-dark6) 100%);

    /* 5. 左上亮点强、右下深压：戏剧感最强 */
    --grad5: radial-gradient(circle at 22% 18%,
        var(--bg-dark1) 0%,
        var(--bg-dark2) 18%,
        var(--bg-dark3) 34%,
        var(--bg-dark5) 66%,
        var(--bg-dark6) 100%);

    /* 6. 中间横带亮：很像真正按钮面 */
    --grad6: linear-gradient(180deg,
        var(--bg-dark5) 0%,
        var(--bg-dark2) 18%,
        var(--bg-dark1) 34%,
        var(--bg-dark3) 52%,
        var(--bg-dark5) 72%,
        var(--bg-dark6) 100%);

    /* 7. 深槽型：边缘亮一点，中间压深 */
    --grad7: linear-gradient(180deg,
        var(--bg-dark2) 0%,
        var(--bg-dark4) 18%,
        var(--bg-dark6) 50%,
        var(--bg-dark4) 82%,
        var(--bg-dark2) 100%);

    /* 8. 侧切面：像一块切削过的金属 */
    --grad8: linear-gradient(135deg,
        var(--bg-dark1) 0%,
        var(--bg-dark1) 12%,
        var(--bg-dark3) 28%,
        var(--bg-dark6) 62%,
        #101418 100%);

    /* 9. 雾面平滑：反差低，适合大面积 */
    --grad9: linear-gradient(160deg,
        var(--bg-dark3) 0%,
        var(--bg-dark4) 35%,
        var(--bg-dark5) 68%,
        var(--bg-dark6) 100%);

    /* 10. 反向切光：右上亮、左下沉 */
    --grad10: radial-gradient(circle at 78% 20%,
        var(--bg-dark1) 0%,
        var(--bg-dark2) 18%,
        var(--bg-dark4) 42%,
        var(--bg-dark5) 70%,
        var(--bg-dark6) 100%);
}
body {
    background: var(--grad2);
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
.panel-convex {
    background: linear-gradient(145deg, var(--bg-dark2) 0%, var(--bg-dark4) 100%);
    border: 1px solid var(--bg-dark3);
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* 顶部边缘高光 */
    box-shadow: 
        8px 8px 20px rgba(0, 0, 0, 0.4), 
        -2px -2px 10px rgba(255, 255, 255, 0.02); /* 左上角微弱的漫反射 */
    border-radius: 16px;
}

/* 🌟 2. 机械质感凸起按钮 (适合：Watch Now 按钮、主页/联赛导航按钮) */
/* 效果：极具点击欲望，悬浮时会更亮，点击时会塌陷 */
.btn-mechanical {
    background: linear-gradient(180deg, var(--bg-dark1) 0%, var(--bg-dark3) 100%);
    border: 1px solid var(--bg-dark4);
    border-top: 1px solid var(--bg-dark1);
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 内发光，增加立体感 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-mechanical:hover {
    background: linear-gradient(180deg, #363d46 0%, var(--bg-dark2) 100%); /* 悬浮变亮 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-mechanical:active {
    background: var(--bg-dark3);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4); /* 点击时物理塌陷 */
    transform: translateY(2px);
}

/* 🌟 3. 深邃凹陷槽 (适合：比分牌底框、搜索框、输入框) */
/* 效果：像在面板上挖了一个洞，内部四周带有深深的阴影 */
.slot-concave {
    background: linear-gradient(145deg, var(--bg-dark6) 0%, var(--bg-dark4) 100%);
    border: 1px solid var(--bg-dark5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 底部反光，证明它凹进去了 */
    box-shadow: 
        inset 4px 4px 10px rgba(0, 0, 0, 0.6), /* 左上角的深内阴影 */
        inset -2px -2px 6px rgba(255, 255, 255, 0.02); /* 右下角的微弱内反光 */
    border-radius: 8px;
}

/* 🌟 4. 赛博发光态 (适合：当前选中的联赛按钮、当前选中的球队) */
/* 效果：在凹陷的基础上，底部透出极具攻击性的荧光绿底光 */
.active-neon-slot {
    background: var(--bg-dark5);
    border: 1px solid var(--bg-dark4);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 2px 15px rgba(0, 255, 0, 0.15); /* 荧光绿外发光 */
    border-bottom: 2px solid var(--brand-neon); /* 荧光绿硬底边 */
    color: var(--brand-neon);
}

/* ==================== 💥 赛博能量 Loading 画面 (Clean CSS) ==================== */

/* 1. 全屏遮罩层 (💥 贴在 style.css 底部) */
.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f172a; /* 使用我们的 Slate-950 高级底色 */
    z-index: 10000; /* 确保在最上层 */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px); /* 💥 增加毛玻璃特效，若有背景透出更显高级 */
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* 用于 JS 控制淡出 */
}

/* 2. 内容容器 */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

/* 3. 几何足球旋转体 (💥 核心视觉) */
.soccer-ball-outline {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #334155; /* 脏灰边框 */
    border-top-color: #00ff00; /* 荧光绿旋转边框 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.2); /* 弱绿底光 */
    
    /* 💥 绑定动画 1：旋转 */
    animation: spin-loader 1s linear infinite; 
}

.soccer-ball-outline .material-symbols-rounded {
    font-size: 56px;
    color: #00ff00; /* 荧光绿图标 */
    /* 💥 绑定动画 2：呼吸灯闪烁 */
    animation: pulse-glow 1s ease-in-out infinite alternate;
}

/* 4. 呼吸灯文本 */
.loading-text {
    font-size: 16px;
    font-weight: bold;
    color: #f8fafc; /* 主标题白 */
    letter-spacing: 2px;
    text-transform: uppercase;
    
    /* 💥 绑定动画 3：文字呼吸灯 */
    animation: text-pulse 1s ease-in-out infinite alternate;
}

.loading-subtext {
    font-size: 10px;
    color: #94a3b8; /* 副标题灰 */
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 900;
}


/* ================== 💥 动画定义 (Keyframes) ================== */

/* 动画 1：加载圈旋转 */
@keyframes spin-loader {
    to { transform: rotate(360deg); }
}

/* 动画 2：足球图标呼吸灯闪烁 */
@keyframes pulse-glow {
    0% {
        opacity: 0.5;
        text-shadow: 0 0 5px rgba(0, 255, 0, 0.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.4);
    }
}

/* 动画 3：文字呼吸灯效果 */
@keyframes text-pulse {
    0% {
        opacity: 0.6;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--grad2);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* 向下投射阴影，切分身体 */
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    /* box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 20px rgba(0,0,0,0.26); */
}
.header-logo { display: flex; align-items: center; gap: 8px; }
.logo {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width: auto;
    max-width: 240px;
}
.logo .logoPic {
    max-width: 48px; /* 固定图标大小 */
    margin-right: 4px;
};
.logo .logoName {display: flex;align-items: flex-start;justify-content: space-between;flex-direction: column;}
.logo .logoName h1 {font-size: 20px; /* 稍微缩小一点标题，更精致 */font-weight: 900;}

.hero-wrapper {position: relative;w-full;height: 65vh;overflow: hidden;background: #000;margin-top: 18%;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);}
.carousel-slide {
    position: absolute; top: 0px; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 1s ease-in-out; cursor: pointer;
}
.carousel-slide.active { opacity: 1; }
.carousel-bg { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; }
.carousel-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(15,23,42,1) 0%, rgba(15,23,42,0.6) 40%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 32px;
}
nav.app-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: var(--grad2);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); /* 向上投射阴影，托住身体 */
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
}
nav button.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 1;
    transition: all 0.3s;
    width: calc(100%/6);
    height: 100%;
    background: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 10px 24px rgba(0,0,0,0.28);
}
nav button.nav-btn img {width: 36px;height: 36px;margin-bottom: 2px;opacity: 0.8;}
nav button.nav-btn span { font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
/* 激活状态 */
nav button.nav-btn.active {color: var(--neon-green);opacity: 1;}
nav button.nav-btn.active img { filter: grayscale(0%) drop-shadow(0 0 8px rgba(0, 255, 0, 0.6)); opacity: 1; }

.font-cn { font-family: "ZCOOL QingKe HuangYou", sans-serif; font-weight: 400 }
.font-sports { font-family: 'Oswald', sans-serif; }
.font-score { font-family: 'Teko', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.rotate {transform: rotate(180deg);}
/* 增加平平无奇克星：极具空间感的全息渐隐网格背景 */
.nav-top-btn { position: relative; transition: all 0.3s ease; }
.nav-top-btn.tab-active { color: var(--brand-neon); }
.nav-top-btn.tab-active::after {
    content: '';
    position: absolute; bottom: -20px; /* 精准贴合Header底边 */
    left: 50%; transform: translateX(-50%);
    width: 100%; height: 3px;
    background: var(--brand-neon);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 255, 0, 0.4);
}
@media (min-width: 1024px) {
    .modal-content { width: 85%; max-width: 1200px; height: auto; border-radius: 24px; box-shadow: 0 0 100px rgba(0, 255, 0, 0.1); overflow: hidden; }
    .close-btn { top: -20px; right: -60px; background: none; border: none; color: #fff; }
    .close-btn:hover { background: none; border: none; color: var(--brand-neon); }
}
/* 自定义底部导航图标高亮 */
.bottom-nav-active { color: var(--brand-neon) !important; opacity: 1 !important; }
.bottom-nav-active img { filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.6)); }

.cn {
  font-family: "ZCOOL QingKe HuangYou", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
}

.font-arial-black {
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900; /* 确保极度粗体 */
    font-style: italic;
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  src: url('./fonts/MaterialSymbolsRounded.woff2') format('woff2');
  font-display: block; 
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.tab-active { color: #3b82f6; border-bottom: 2px solid #3b82f6; }
.thumb-overlay { background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); }
.video-placeholder { cursor: pointer; }
.teamLogo {
    width: 10%;
    padding: 2px;
}
.vHeader {
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 4px 12px;
    font-size: 14px;
    margin: auto;
}
.vHeader .league {
    display:flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    background:white;
    color:black;
    font-weight: 800;
    border-radius: 8px;
    margin: 4px;
}

.league .leagueLogo {
    max-width: 20%;
    margin-right:4px;
}
.vHeader .date {
    width: 40%;
    text-align: left;
    letter-spacing: -.5px;
    padding-left: 8px;
}
.vHeader .time {
    width: 40%;
    text-align: right;
    letter-spacing: -.8px;
    padding-right: 8px;
}
.video.SA,
.video .SA {
    background: #0374ff;
}
.video.CL,
.video .CL {
    background: #30316e
}
.video.PL,
.video .PL {
    background: #37003c;
}
.video.PD,
.video .PD {
    background: #009949;
}
.video.BL1,
.video .BL1 {
    background: #d10214
}
.info {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 4px;
    font-size: 14px;
    font-weight: 900;
    color:black;
    margin: auto;
    background: linear-gradient(135deg, rgba(200,200,200,0.8) 0%, rgba(255,255,255,0.8) 50%, rgba(200,200,200,0.8) 100%);
}

.info .score {
    font-family: Arial Black;
    font-weight: 900;
    text-align: center;
    border-radius: 8px;
    color:#FFF;
    font-size: 24px;
    width: 10%;
    letter-spacing:-2px;
    padding: 0 8px;
}
.info .team {
    width: 27%;
    font-size: 16px;
    letter-spacing: -.5px;
    font-weight: 800;
}

/* ==================== 终极版 Modal 样式 ==================== */
/* 1. 全屏黑底背景 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999; /* 强制最高层级，盖住一切 */
    display: flex;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.active {
    opacity: 1; pointer-events: auto;
}
.modal-overlay.active .modal-content { transform: scale(1); }

.close-btn { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    background: rgba(0, 0, 0, 0.5); /* 给关闭按钮加个半透明黑底，防止被白色视频画面融为一体看不见 */
    border-radius: 50%;
    border: none; 
    color: #a1a1aa; 
    cursor: pointer; 
    padding: 8px; 
    z-index: 10000; /* 比所有东西都高一层！ */
}
.close-btn:hover { color: white; }
.close-btn svg { width: 32px; height: 32px; }

/* 修改后的全屏响应式布局 */
.modal-content { 
    position: relative; 
    /* 强行设为全屏宽度和高度 */
    width: 100%; 
    height: 100%; 
    max-width: none; /* 移除之前的限制 */
    background: #000; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* 关键：视频在全屏模式下垂直居中 */
    border-radius: 0; /* 手机全屏不需要圆角 */
    box-shadow: none; /* 手机全屏不需要阴影 */
}

/* 视频容器：不管外框多大，视频必须保持 16:9 比例 */
#modal-video-container {
    width: 100%;
    aspect-ratio: 16/9; /* 强行 16:9 比例 */
    border-radius: 0; /* 手机全屏不需要圆角 */
}

#modal-video-container iframe {
    width: 100%; height: 100%; border: none;
}

#modal-video-container { width: 100%; aspect-ratio: 16/9; }

/* 当屏幕宽度大于 1024px 时，恢复成你之前漂亮的悬浮窗效果 */
@media (min-width: 1024px) {
.modal-content {
    width: 90%;
    height: auto;
    max-width: 1000px;
    aspect-ratio: 16/9;
    border-radius: 12px;
    display: block; /* 取消 flex 居中 */
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#modal-video-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 12px;
}
.close-btn {
    top: -45px;
    right: -10px;
    background: none; /* 电脑端不需要半透明底色 */
}
}

/* ==================== 轮播图专属高级动画 ==================== */
/* 1. 缓慢放大背景 (呼吸感) */
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* 2. 依次向上滑入 */
@keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. 比分震撼弹出 */
@keyframes heroPopIn {
    from { opacity: 0; transform: scale(0.8); filter: blur(5px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* 💥 只有当轮播图处于显示状态 (opacity-100) 时，内部元素才开始播放动画！ */
.carousel-slide.opacity-100 .bg-zoom {
    animation: slowZoom 15s linear forwards;
}
.carousel-slide.opacity-100 .anim-slide-up {
    animation: heroSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; /* 动画开始前保持隐藏 */
}
.carousel-slide.opacity-100 .anim-pop-in {
    animation: heroPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; 
}

/* 控制出场顺序的延迟时间 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* --- 6. 筛选栏 (Filter Bar) --- */
.filter-bar {
    /* position: sticky; */
    top: 72px;
    z-index: 40;
    background: none;
    border-bottom: 1px solid var(--border-color);
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
    padding: 0 8px;
    display: none; /* 默认隐藏，JS控制 */
    /* margin-bottom: 16px; */
}
#venue-filter,
#opponent-filter,
.filter-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--grad2);
    color: white;
    border: 1px solid var(--neon-green);
    padding: 10px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.filter-dropdown-menu {
    width: 100%;
    background-color: #0f172a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.9);
    padding: 4px;
    overflow-y: auto;
    transition: all 0.3s ease-in-out;
    transform-origin: top;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}
#opponent-dropdown-grid,
#venue-list-panel {
    width: 100%;
    padding:8px;
    background-color: var(--bg-dark6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.9);
    overflow-y: auto;
    transition: all 0.3s ease-in-out;
    transform-origin: top;
    gap: 4px;
    display: flex;
    flex-direction: column;
}
#venue-list-panel>button {
    width:100%
}
#opponent-dropdown-grid .filter-item {
    width:100%;
    padding: 12px;
}
.filter-dropdown-menu.open {
    max-height: 74vh;
    opacity: 1;
    visibility:
    visible;
    height: auto
}
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-main);
    font-size: 16px;
    font-weight: bold;
    background: var(--grad6);
}
.filter-item:hover { background-color: var(--border-color); }
.filter-advanced {display: flex;/* gap: 12px; *//* margin-top: 12px; */}
.filter-select {
    flex: 1;
    background: var(--grad2);
    background-color: var(--grad2);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
}
.advanced-filters {
    display: flex;
    flex-direction: column;
}

#active-team-name{
    font-weight:800
}

label {
    padding: 4px;
    font-size: 14px;
}
#advanced-filters{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.main-container {padding: 16px;max-width: 1280px;margin: 0 auto;position: relative;z-index: 10;padding-top: 36px;}

#hero-carousel-wrapper .slideTeam {
    font-size: 36px;
    font-weight: 700;
}

#hero-carousel-wrapper .slideHome,
#hero-carousel-wrapper .slideAway {
    gap: 8px;
}

#hero-carousel-wrapper .awaybg,
#hero-carousel-wrapper .homebg {
    height:150%;
    position:absolute;
    background:rgba(0,0,0,0.6);
    z-index:1;
    width: 150%;
}
#hero-carousel-wrapper .awaybg {
    left: 0;
    bottom: -15%;
}
#hero-carousel-wrapper .homebg {
    right: 0%;
    top:-15%;
}
.slideHome {
    opacity: 0;
    transform: translateX(-100px); /* 初始藏在左边 100px 处 */
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); /* 顶级顺滑的贝塞尔曲线 */
}

.slideAway {
    opacity: 0;
    transform: translateX(100px); /* 初始藏在右边 100px 处 */
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.slideScore {
    opacity: 0;
    transform: scale(0.5); /* 初始缩小到 50% */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* 带有物理回弹的果冻弹出效果 */
}


/* --- 2. 激活状态 (依靠外层的 opacity-100 自动触发) --- */

/* 第一步：底图本来就在淡入 (0ms 开始) */

/* 第二步：左右球队滑入 (延迟 400ms，等底图差不多出来了再滑) */
.opacity-100 .slideHome,
.opacity-100 .slideAway {
    opacity: 1;
    transform: translateX(0); /* 回到原位 */
    transition-delay: 0.4s; 
}

/* 第三步：比分从中间“砰”地弹出 (延迟 900ms，等球队滑到位了再弹) */
.opacity-100 .slideScore {
    opacity: 1;
    transform: scale(1); /* 恢复正常大小 */
    transition-delay: 0.9s;
}


/* --- 3. 退出状态重置 --- */
/* 当图片被切走时 (变成 opacity-0)，立刻取消延迟，让它们瞬间回到初始状态，准备下一次登场 */
.opacity-0 .slideHome,
.opacity-0 .slideAway,
.opacity-0 .slideScore {
    transition-delay: 0s;
    transition-duration: 0.3s; /* 加快退场速度，防止拖泥带水 */
}

/* =========================================================
   🖥️ 终极平板与桌面端全自动适配 (Responsive Design)
========================================================= */

/* --- 1. 全局安全锁：限制最大宽度并居中 --- */
.app-header,
.filter-bar,
.main-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.app-header {
    left: 50%;
    transform: translateX(-50%);
}

/* --- 2. 宽屏适配 (屏幕宽度 >= 768px) --- */
@media (min-width: 768px) {
    .hero-wrapper {
        height: 500px !important;
        max-width: 1280px;
        margin: 80px auto 24px; /* 加大顶部间距，防止被 header 挡住 */
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    }

    #app {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
    }
    
    .filter-dropdown-menu, #venue-list-panel, #opponent-dropdown-grid {
        position: absolute;
        width: 100%;
        min-width: 250px;
        z-index: 100;
    }
    
    /* 桌面端隐藏底部丑陋的导航条，因为你头部已经有了 */
    nav.app-navbar {
        display: none !important; 
    }
}

/* --- 3. 真正霸气的桌面端适配 (屏幕宽度 >= 1024px) --- */
@media (min-width: 1024px) {
    /* 1. 隐藏顶部毫无特色的文字导航 */
    .app-header nav.md\:flex {
        display: none !important;
    }

    /* 2. 把底部的导航条变成悬浮的“灵动岛”中控舱！ */
    nav.app-navbar {
        display: flex !important;
        width: 680px; /* 控制胶囊的宽度 */
        height: 80px; /* 稍微加高，显得大气 */
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px; /* 悬浮在距离底部 30px 的空中 */
        border-radius: 40px; /* 完美的圆润胶囊形状 */
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* 顶部微弱高光 */
        background: var(--grad2); /* 使用你顶级深海蓝渐变 */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.1); /* 霸气的悬浮阴影 + 微弱绿光 */
        padding: 0 16px;
    }

    /* 3. 岛内的按钮精细化打磨 */
    nav button.nav-btn {
        border-radius: 24px; /* 按钮也变圆润 */
        margin: 8px 6px;
        height: calc(100% - 16px);
        background: transparent; /* 默认透明，悬浮时亮起 */
        box-shadow: none;
    }

    /* 4. 让当前选中的按钮像发光的宝石 */
    nav button.nav-btn.active {
        /* box-shadow: inset 0 2px 4px rgba(255,255,255,0.1), 0 8px 16px rgba(0,0,0,0.4); */
    }
}