/* --- style.css: RFC Manager 完整样式表 --- */

/* --- 1. 字体内置 (Local Fonts) --- */

/* 标题字体: Russo One */
@font-face {
    font-family: 'Russo One';
    src: url('assets/fonts/RussoOne.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 加载时先显示默认字体，加载完再替换 */
}

/* 数据/英文正文: Rajdhani */
@font-face {
    font-family: 'Rajdhani';
    src: url('assets/fonts/Rajdhani.ttf') format('truetype');
    font-weight: 700; /* 建议使用加粗版，看起来更像赛车仪表盘 */
    font-style: normal;
    font-display: swap;
}

/* 中文兜底: Noto Sans SC */
@font-face {
    font-family: 'Noto Sans SC';
    src: url('assets/fonts/NotoSansSC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. 全局变量 */
:root { 
    --primary: #e10600; 
    --primary-hover: #ff3333;
    --dark: #121214; 
    --panel: #1e1e24; 
    --card-bg: #25252a;
    --text: #f0f0f0; 
    --text-muted: #888;
    --border: #444;
    --sidebar-width: 250px; 
    --topbar-height: 75px;
}

/* 3. 基础重置 */
body { 
    /* 🔴 修改：将背景色从 #000 改为与游戏容器一致的深灰，消除边界感 */
    background-color: #121214; 
    color: var(--text); 
    font-family: 'Rajdhani', 'Noto Sans SC', sans-serif; 
    margin: 0; 
    overflow: hidden; 
    font-size: 30px;
    font-weight: 500;
    
    /* Flex 居中布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 🔴 修改：使用 100svh (Small Viewport Height) 解决 iOS 地址栏遮挡问题 */
    /* 如果浏览器不支持 svh，回退到 100vh */
    height: 100vh;
    height: 100svh; 
}

/* 通用隐藏类 (修复弹窗无法关闭的问题) */
.hidden { display: none !important; }

/* 4. 核心布局网格 */
#app-container {
    /* 移除之前的 100vw/100vh */
    /* width: 100vw; height: 100vh; <-- 删除 */
    
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    
    /* 新增：设定基准设计分辨率 (Base Resolution) */
    /* 1280px 是比较适合这类管理游戏的基准宽度 */
    width: 1280px; 
    /* 高度由 JS 动态计算，初始设一个默认值 */
    height: 900px; 
    
    background-color: var(--dark);
    box-shadow: 0 0 50px rgba(0,0,0,0.5); /* 给游戏容器加个阴影，区分黑边 */
    
    /* 关键：设置变换原点为中心，方便缩放 */
    transform-origin: center center;
    flex-shrink: 0; /* 防止被 Flex 挤压 */
}

/* --- 5. 排版与字体风格 --- */

/* 形式1：大标题风格 (无描边杂边，使用阴影模拟立体感) */
h1, h2, .logo-area, .btn, #season-status, .nav-item, .warning-title, .lobby-title {
    font-family: 'Russo One', 'Noto Sans SC', sans-serif;
    text-transform: uppercase;
    -webkit-text-stroke: 0; /* 禁用默认描边防止中文粘连 */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         3px  3px 0 rgba(0,0,0,0.6); /* 立体投影 */
    letter-spacing: 1px;
    color: #fff;
}

/* 形式2：阅读文本 (清晰无特效) */
p, span, .info-row, table, .skill-name, .user-info, .stat-value, .stat-label {
    text-shadow: none;
    -webkit-text-stroke: 0;
    letter-spacing: 0.5px;
}
#wait-title {
    font-size: 100px;
}
/* --- 6. 顶部导航 (Top Bar) --- */
#top-bar {
    grid-column: 2 / 3; grid-row: 1 / 2;
    background: #000; border-bottom: 4px solid var(--primary);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.8); z-index: 20;
}
.top-logo { display: none; }
.user-info { 
    font-size: 18px; 
    display: flex; 
    gap: 25px; 
    align-items: center; 
    font-weight: 700; 
    color: #fff;
    min-width: 200px;
    justify-content: flex-end; 
}
.icon-btn { 
    background: none; border: none; color: #888; cursor: pointer; 
    font-size: 35px; transition: 0.2s; padding: 5px; text-shadow: none;
    width: 60px; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.icon-btn:hover { color: #fff; transform: scale(1.1); text-shadow: 0 0 10px #fff; }

/* --- 7. 侧边栏 (Sidebar) --- */
#sidebar {
    grid-column: 1 / 2; grid-row: 1 / 3;
    background: #0a0a0c; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; z-index: 30;
    box-shadow: 5px 0 20px rgba(0,0,0,0.6);
}
.nav-disabled { pointer-events: none; opacity: 0.3; filter: grayscale(1); cursor: not-allowed; }

.logo-area { 
    height: var(--topbar-height); display: flex; align-items: center; justify-content: center; 
    background: var(--primary); color: white; font-size: 28px; font-style: italic;
    border-bottom: 4px solid #b30000;
}
.nav-menu { flex: 1; padding: 10px 0; }
.nav-item {
    display: flex; align-items: center; padding: 20px 13px; 
    color: #666; cursor: pointer; transition: all 0.2s;
    font-size: 30px; border-left: 5px solid transparent;
    text-shadow: none; /* 未选中不发光 */
    height: 80px; 
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); padding-left: 35px; }
.nav-item.active { 
    color: #fff; background: linear-gradient(90deg, rgba(225, 6, 0, 0.2), transparent); 
    border-left-color: var(--primary); 
    text-shadow: -1px -1px 0 #000, 1px 1px 0 #000, 2px 2px 0 #000; /* 选中加描边效果 */
}

/* --- 8. 主内容区 (Main Content) --- */
#main-content {
    grid-column: 2 / 3; grid-row: 2 / 3;
    position: relative; overflow: hidden; background: var(--dark);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.view-section {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow-y: auto; padding: 40px; box-sizing: border-box;
    opacity: 0; pointer-events: none; transition: opacity 0.3s; 
}
.view-section.active-view { opacity: 1; pointer-events: auto; z-index: 5; }

/* --- 9. 卡片与布局组件 --- */
h1 { margin-top: 0; border-bottom: 2px solid var(--border); padding-bottom: 0px; font-size: 36px; color: #fff; font-style: italic; }
h2 { font-size: 38px; color: var(--primary); margin: 0 0 10px 0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; margin-top: 30px; }
.card { 
    background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px solid #333; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.4); transition: transform 0.2s; position: relative;
    overflow: hidden; /* 防止大图溢出 */
}
.card:hover { border-color: #666; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }

/* 卡片顶部通栏大图 */
.card-banner {
    margin: -20px -20px 10px -20px; /* 抵消 padding */
    height: 160px;
    background: #111;
    display: flex; align-items: center; justify-content: center;
    font-size: 80px;
    border-bottom: 4px solid var(--primary);
    overflow: hidden; position: relative;
}

/* 车辆出战状态 */
.card.car-active { border: 2px solid #4caf50; background: #1a221a; box-shadow: 0 0 15px rgba(76, 175, 80, 0.2); }
.deployed-badge {
    position: absolute; top: 10px; right: 10px;
    background: #4caf50; color: #fff; padding: 3px 8px; font-weight: bold;
    border-radius: 4px; font-size: 12px; z-index: 5; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    text-shadow: none;
}

/* 信息行 */
.info-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; color: #ccc; border-bottom: 1px dashed #444; padding-bottom: 4px; }
.info-row span:last-child { color: #fff; font-weight: 700; font-family: 'Rajdhani', sans-serif; font-size: 16px; }

/* 属性条 (Skill Bar) */
.skill-row { display: flex; align-items: center; margin-bottom: -3px; font-size: 18px; color: #ccc; font-weight: 600; }
.skill-name { width: 83px; text-align: left; }
.skill-track { flex: 1; height: 8px; background: #111; border-radius: 4px; overflow: hidden; margin-left: -10px; border: 1px solid #333; }
.skill-fill { height: 100%; border-radius: 0; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); }
.val-high { background: linear-gradient(90deg, #00b300, #4dff4d); } 
.val-mid { background: linear-gradient(90deg, #b3b300, #ffff4d); } 
.val-low { background: linear-gradient(90deg, #b30000, #ff4d4d); }

/* 车辆属性网格 */
.car-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0px 20px; margin-bottom: 22px; }

/* 标签 Badge */
.tag-badge {
    display: inline-block; font-size: 18px; background: #444; color: #fff;
    padding: 2px 8px; border-radius: 4px; vertical-align: middle; margin-left: 3px;
    border: 1px solid #666; text-shadow: none; font-weight: normal; font-family: 'Segoe UI', sans-serif;
}
.tag-badge.highlight { background: var(--primary); border-color: #ff5555; }

/* --- 10. 按钮样式 --- */
.btn { 
    padding: 12px 10px; background: var(--primary); color: white; border: none; 
    border-radius: 2px; cursor: pointer; font-size: 25px; 
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border-bottom: 3px solid #b30000;
    display: inline-flex; /* 改为 inline-flex */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 文字居中 */
}
.btn:hover { background: var(--primary-hover); transform: scale(1.02); }
.btn:active { transform: scale(0.98); border-bottom: 0; margin-top: 3px; }

.btn-outline { background: rgba(0,0,0,0.3); border: 1px solid #666; color: #ddd; font-size: 13px; padding: 8px 15px; border-radius: 4px; text-shadow: none; }
.btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }

.btn-part { width: 100%; padding: 12px; background: #333; color: #ccc; border: 1px solid #555; margin-top: 5px; cursor: pointer; font-family: 'Rajdhani'; font-weight: bold; font-size: 16px; text-shadow: none; }
.btn-part:hover { background: #444; border-color: #fff; color: #fff; }
.btn-part.selected { border-color: var(--primary); background: #2a2a2a; color: var(--primary); box-shadow: inset 0 0 10px rgba(225,6,0,0.2); }

/* --- 11. 选秀页面特殊布局 (Draft) --- */
/* 固定头部 */
.draft-header { flex-shrink: 0; padding: 10px 30px; background: #15151e; border-bottom: 2px solid #333; z-index: 10; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.draft-scroll-area { flex: 1; overflow-y: auto; padding: 30px; }
#btn-confirm-draft {
    padding: 10px 40px;
    margin: 0;
    font-size: 35px;
    flex-shrink: 0; /* 防止被挤压 */
}

/* 确保父容器在横版下是左右撑开 */
.draft-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ... 保持原有背景和边框 ... */
}
/* 选秀分段标题 */
.draft-section-title { 
    color: var(--primary); 
    border-bottom: 2px solid #444; /* 加粗下划线 */
    padding-bottom: 10px; 
    margin: 30px 0 20px 0; 
    display: flex; 
    justify-content: space-between;
    
    /* 🔴 新增：加粗字体 */
    font-weight: 900; 
    font-size: 30px; 
    font-family: 'Russo One';
    text-transform: uppercase;
    transition: all 0.3s;
}

/* 🔴 新增：选满后的完成状态 (绿色) */
.draft-section-title.completed {
    color: #4caf50 !important;
    border-bottom-color: #4caf50 !important;
}

/* 选秀卡片交互 */
.card.draft-selectable { cursor: pointer; border: 2px solid #444; transition: 0.2s; position: relative; }
.card.draft-selectable:hover { border-color: #888; transform: scale(1.02); }
.card.draft-selectable.selected { border-color: #4caf50; background: #1a2a1a; box-shadow: 0 0 20px rgba(76, 175, 80, 0.3); }
/* 🔴 修复：content 改为读取 data-selected-text 属性，实现汉化 */
.card.draft-selectable.selected::after { 
    content: attr(data-selected-text); 
    position: absolute; top: 10px; right: 10px; 
    background: #4caf50; color: #fff; padding: 2px 8px; 
    font-size: 20px; font-weight: bold; border-radius: 4px; 
    text-shadow: none; 
}
.draft-selectable .card-banner { height: 160px; margin: -22px -22px 5px -22px; } /* 选秀时图片稍矮 */

/* 自定义警告弹窗 */
.warning-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.warning-box { background: #1a1a1a; border: 2px solid #ff4444; padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 0 50px rgba(255, 68, 68, 0.2); min-width: 300px; }
.warning-title { color: #ff4444; font-size: 36px; margin-bottom: 10px; font-weight: bold; }
.warning-text { color: #ddd; margin-bottom: 25px; font-size: 22px; line-height: 1.5; text-shadow: none; }

/* --- 12. 赛季大厅 (Lobby) 布局 --- */
.lobby-full-card { grid-column: 1 / -1; border: 1px solid var(--primary); background: linear-gradient(180deg, #1e1e24 0%, #151515 100%); }
.lobby-header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 20px; margin-bottom: 20px; }
.lobby-subtitle { 
    color: var(--primary); 
    font-family: 'Russo One', sans-serif; /* 使用标题字体 */
    font-size: 36px; /* 放大 */
    font-weight: 900; 
    font-style: italic; /* 斜体 */
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000; /* 增加阴影增强识别度 */
    margin-bottom: 10px;
    text-transform: uppercase;
}
.lobby-title { font-size: 48px; color: #fff; margin: 5px 0; text-shadow: 4px 4px 0 #000; }
.track-detail-container { display: flex; gap: 40px; align-items: stretch; }
.track-map-box { flex: 1; min-height: 350px; background: #000; border: 1px solid #333; display: flex; align-items: center; justify-content: center; border-radius: 8px; position: relative; overflow: hidden; }
.track-map-box::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; }
.track-stats-box { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; align-content: start; }
.stat-item { background: #25252a; padding: 10px 15px; border-left: 3px solid #444; border-radius: 0 4px 4px 0; }
.stat-item span { display: block; }
.stat-label { font-size: 12px; color: #888; margin-bottom: 3px; }
.stat-value { font-size: 16px; color: #fff; font-weight: bold; }

/* --- 13. 比赛与弹窗 --- */
#race-canvas { width: 100%; height: 100%; display: block; }
.race-overlay { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
/* 1. 排行榜容器 (布局重构) */
.leaderboard-box { 
    /* 🔴 核心修改：移除 absolute，改为标准流 */
    position: relative; 
    /* 移除 top/left/bottom */
    
    width: 320px;    
    background: #151515; /* 略微改深一点，区分视觉区 */
    padding: 0; 
    
    border-right: 2px solid var(--primary); /* 改为右边框分割 */
    border-left: none; /* 移除左边框 */
    box-shadow: 5px 0 10px rgba(0,0,0,0.5); 
    
    display: flex; 
    flex-direction: column;
    overflow: hidden; 
    z-index: 30;
    pointer-events: auto; 
    flex-shrink: 0; /* 防止被挤压 */
}

/* 2. 表头栏 (冻结) */
.lb-header-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 2px solid #555;
    background: #1a1a1a;
    color: #888;
    font-size: 20px; /* 表头字号 */
    font-weight: bold;
    flex-shrink: 0; /* 防止表头被压扁 */
}
/* 3. 滚动区域 (弹性 + 自定义滚动条) */
.lb-scroll-area { 
    flex: 1;           
    overflow-y: auto;  
    overflow-x: hidden;
    padding-bottom: 5px;
    
    /* 🔴 关键：强制开启交互，防止被父级 none 继承 */
    pointer-events: auto; 
    
    /* 移动端惯性滚动 */
    -webkit-overflow-scrolling: touch;
}
/* 1. 修复实时榜单内容容器：使其填满剩余空间并管理内部布局 */
#race-leaderboard-content {
    flex: 1; /* 占满父容器高度 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 自身不滚动，让内部子元素滚动 */
    position: relative; /* 确保层级 */
    pointer-events: auto; /* 允许鼠标交互 */
}
/* 2. F1 风格极细滚动条 - 全局应用 (去掉 .lb-scroll-area 前缀) */
/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 4px; /* 极细 */
    height: 4px; /* 横向滚动条也很细 */
}

/* 滚动条轨道 (透明或深色) */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3); 
}

/* 滚动条滑块 (F1 红色) */
::-webkit-scrollbar-thumb {
    background: var(--primary); 
    border-radius: 4px; /* 圆角 */
}

/* 滑块悬停 (变亮) */
::-webkit-scrollbar-thumb:hover {
    background: #ff4444; 
}

/* 4. 数据行 */
.lb-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 2px 0;
    height: 28px; /* 固定行高 */
}
/* 5. 列宽定义 (新增 col-pos) */
.col-pos {
    width: 36px;  /* 稍微缩窄 */
    text-align: center;
    font-size: 20px;
    font-family: inherit;
    font-weight: bold;
    color: inherit;
    flex-shrink: 0;
}

/* 天气栏 */
.weather-bar {
    display: flex; justify-content: space-between; padding: 6px 10px; 
    background: #222; font-size: 12px; color: #ccc; border-bottom: 1px solid #444;
    font-weight: 600; flex-shrink: 0;
}

/* 榜单头部 */
.lb-header {
    /* 🔴 修改：改为 Flex 布局，左右两端对齐 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 15px; /* 增加左右内边距 */
    
    border-bottom: 2px solid #555;
    flex-shrink: 0; 
    background: #1a1a1a;
    white-space: nowrap; 
}

.lb-header span:first-child { 
    /* 🔴 修改：移除 display:block，调整字体使其更像标题 */
    font-size: 25px; 
    color: var(--primary); /* 使用主题红 */
    font-weight: 800; 
    letter-spacing: 1px; 
    font-family: 'Rajdhani';
}

.lb-header span:last-child { 
    font-size: 24px; 
    color: #fff; 
    font-family: 'Russo One'; 
    line-height: 1; 
}

.lb-sub { 
    color: #888; 
    font-size: 16px; 
    font-family: 'Rajdhani'; 
    font-weight: normal;
}

table { width: 100%; border-collapse: collapse; font-family: 'Rajdhani'; table-layout: fixed; }

tr { height: 22px; }
td { 
    padding: 0 5px; 
    font-weight: 600; font-size: 20px; color: #fff; 
    border-bottom: 1px solid #333; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
tr:last-child td { border-bottom: none; }

/* 列样式 (修改：颜色改为 inherit 以支持行高亮) */
.col-driver { 
    width: 60px; 
    text-align: left; 
    font-size: 20px;
    font-weight: 700; 
    color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-shrink: 0;
}
.col-team { 
    width: 79px;  /* 从90px缩窄，为新列腾空间 */
    text-align: left; 
    font-size: 18px; /* 字号微调 */
    color: inherit; 
    text-transform: uppercase; 
    opacity: 0.8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-shrink: 0;
}
.col-gap { 
    flex: 1; /* 占据剩余宽度 */
    text-align: right; 
    font-size: 19px; 
    font-family: inherit; 
    color: inherit; 
    padding-right: 5px;
}
/* 🔴 新增：进站次数列 */
.col-stops {
    width: 40px;
    text-align: center;
    font-size: 19px;
    font-family: 'Rajdhani';
    font-weight: bold;
    color: inherit; /* 跟随行颜色，方便变绿 */
    flex-shrink: 0;
    border-left: 1px solid #333; /* 增加分割线 */
}

.status-leader { color: #0f0; }
.status-dnf { color: #f00; }   
.status-lap { color: #4fc3f7; }
.status-ready { color: #fff; font-weight: normal; } /* 新增 Ready 样式 */

#modal-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); z-index: 100; display: none; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.modal-box {
    background: #1a1a1a;
    border: 2px solid var(--primary);
    padding: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 100px rgba(0,0,0,0.8);
    transform-origin: center center;
    overflow: visible; 
}

/* --- 【横版】各弹窗独立尺寸控制 (在这里调横版) --- */

/* 1. 换人/换车选择器 */
#modal-selector .modal-box { width: 850px; height: 800px; }

/* 2. 规则/结果/成绩 (共用容器) */
#modal-layer .modal-box { width: 900px; height: 800px; }

/* 3. 部件配置 */
#modal-parts .modal-box { width: 600px; height: 850px; }

/* 4. 换车确认 (小窗) */
#modal-swap-confirm .modal-box { width: 600px; height: 400px; text-align: center; }

/* 5. 选秀/报名警告 */
#modal-warning .modal-box { width: 700px; height: 450px; }
/* 1. 规则和部件弹窗继续保持 Flex 布局（解决空白问题） */
#modal-body, #parts-options {
    display: flex;          
    flex-direction: column; 
    flex: 1;                
    width: 100%;
    overflow: hidden;       
}

/* 内部真正的滚动区域 */
.rule-text, .selector-grid, #parts-options {
    flex: 1;                /* 🔴 核心：它会占据所有剩余空间，把按钮推到底部 */
    overflow-y: auto;       /* 允许内容滚动 */
    width: 100%;
    margin-top: 10px;
}

/* 针对弹窗内的说明文字区域 */
#swap-msg {
    text-align: center;
    width: 100%;
}

/* 针对“队友互换(免费)”字号放大 */
#swap-msg span {
    font-size: 30px !important; /* 🔴 放大字号 */
    display: block;             /* 确保独占一行以便居中 */
    margin-top: 10px;
}

.close-btn { position: absolute; top: -10px; right: 20px; cursor: pointer; font-size: 80px; color: #666; text-shadow: none; }
.close-btn:hover { color: #fff; }
.rule-text { white-space: pre-wrap; line-height: 1.5; color: #ccc; font-size: 22px; font-family: 'Noto Sans SC', sans-serif; font-weight: 400; text-shadow: none; }

/* 部件弹窗样式 */
#modal-parts { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 100; display: none; justify-content: center; align-items: center; }
.part-row { margin-bottom: 25px; border-bottom: 1px dashed #444; padding-bottom: 15px; }
.part-title { font-weight: bold; margin-bottom: 10px; color: #e10600; font-size: 16px; }
.btn-opt { flex: 1; padding: 15px; background: #222; border: 2px solid #444; color: #888; margin: 0 5px; border-radius: 6px; text-align: left; text-shadow: none; }
.btn-opt:hover { border-color: #666; }
.btn-opt.selected { background: #333; color: white; border-color: var(--primary); box-shadow: 0 0 10px rgba(225, 6, 0, 0.2); }
.btn-opt span { display: block; font-size: 11px; color: #aaa; margin-top: 5px; }

/* 红色事件通知 */
.event-toast { 
    position: absolute; top: 15%; left: 50%; transform: translateX(-50%); 
    background: linear-gradient(90deg, rgba(200,0,0,0) 0%, rgba(200,0,0,0.9) 20%, rgba(200,0,0,0.9) 80%, rgba(200,0,0,0) 100%);
    color: white; padding: 15px 50px; border-top: 2px solid #ff4444; border-bottom: 2px solid #ff4444; 
    font-weight: 900; font-size: 24px; font-style: italic; opacity: 0; transition: 0.3s; 
    text-shadow: 2px 2px 0 #000;
}
.event-toast.show { opacity: 1; }

/* --- 修复：报名页居中布局 --- */
.draft-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

/* --- 积分榜页面专用样式 --- */

/* 顶部标题栏：包含大标题和筛选器 */
.standings-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.filter-group { 
    display: flex; 
    gap: 15px; 
    align-items: center; /* 🔴 确保下拉框在同一水平线上 */
}

/* --- 自定义下拉菜单：100% 跟随页面缩放 --- */
.custom-select-container {
    position: relative;
    width: 260px; /* 固定宽度，防止切换时抖动 */
    font-family: 'Rajdhani', sans-serif;
    font-size: 25px;
    z-index: 100;
}

.select-selected {
    background-color: #000;
    border: 1px solid var(--primary);
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-radius: 4px;
}

.select-selected:hover { background: #1a1a1a; }

.select-items {
    position: absolute;
    background-color: #1a1a1a;
    top: 100%; left: 0; right: 0;
    border: 1px solid #444;
    border-top: none;
    z-index: 99;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.select-items div {
    color: #ccc;
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #333;
}

.select-items div:hover {
    background-color: var(--primary);
    color: #fff;
}

.select-arrow {
    font-size: 14px;
    color: var(--primary);
    transition: transform 0.2s;
}

.custom-select-container.open .select-arrow { transform: rotate(180deg); }

/* 双栏全屏布局 */
.standings-full-layout {
    display: flex;
    gap: 20px;
    width: 100%;
    height: calc(100% - 80px); /* 减去顶部标题栏高度 */
}

/* 左右两个框 */
.standings-col {
    flex: 1; /* 各占50% */
    background: rgba(30, 30, 36, 0.95);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 0; /* 内部无padding，让标题贴边 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 子标题美化 (车手排名/车队排名) */
.sub-header {
    background: #111;
    border-bottom: 4px solid var(--primary);
    padding: 15px;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.sub-title-text {
    font-family: 'Russo One', sans-serif;
    font-size: 35px;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    margin: 0;
    -webkit-text-stroke: 0;
}

/* 表格容器滚动 */
.table-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* 表格美化 */
.st-table { width: 100%; border-collapse: collapse; font-family: 'Rajdhani', sans-serif; }
.st-table th {
    text-align: center;
    color: #888;
    text-transform: uppercase;
    font-size: 25px;
    padding: 8px;
    border-bottom: 2px solid #444;
    background: #1a1a1a;
    position: sticky; top: 0; /* 表头固定 */
}
.st-table td {
    padding: 12px 5px;
    border-bottom: 1px solid #333;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    color: #ddd;
}
/* 名称列左对齐 */
.st-table td.align-left { text-align: left; padding-left: 15px; }
/* 排名列高亮 */
#view-standings .st-table tr:nth-child(2) td { color: #ffd700; } 
#view-standings .st-table tr:nth-child(3) td { color: #c0c0c0; }
#view-standings .st-table tr:nth-child(4) td { color: #cd7f32; }

/* --- 新增：积分榜高亮样式 --- */
.highlight-row {
    background: rgba(225, 6, 0, 0.15) !important; /* 淡淡的红色背景 */
    border: 1px solid var(--primary);
}
.highlight-row td {
    color: #fff !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(225, 6, 0, 0.5);
}

/* --- 新增：起跑信号灯 --- */
#start-lights {
    position: absolute;
    top: 80px; /* 位于顶部栏下方 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    background: rgba(0,0,0,0.8);
    padding: 15px 25px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #333;
    border-top: none;
    z-index: 50;
    transition: opacity 0.5s;
}
.light-unit {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #333; /* 熄灭状态 */
    border: 2px solid #000;
    box-shadow: inset 0 0 10px #000;
    transition: background 0.1s;
}
/* 修复：红灯亮起时的样式 */
.light-unit.on {
    background-color: #ff0000 !important; /* 强制亮红 */
    background-image: radial-gradient(circle at 30% 30%, #ff4d4d, #ff0000); /* 增加一点立体高光 */
    box-shadow: 
        0 0 15px #ff0000,   /* 外发光 */
        inset 0 0 10px #8b0000; /* 内阴影增加层次 */
    border-color: #ff0000; /* 边框也变红 */
}

/* --- 新增：车辆仓库-出战状态 --- */
.card.car-active {
    border: 2px solid #4caf50; /* 绿色边框表示正在使用 */
    background: #1a221a;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
}
.deployed-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: #4caf50; color: #fff;
    padding: 3px 8px; font-weight: bold;
    border-radius: 4px; font-size: 12px;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    text-shadow: none;
}

/* 选秀卡片内部调整 (防止大图在大厅里太挤) */
.draft-selectable .card-banner {
    height: 160px; /* 选秀时稍微矮一点，方便一屏看更多 */
    margin: -22px -22px 5px -22px; /* 修正边距匹配 padding */
}

.part-slot { background: #1a1a1a; border: 1px solid #444; padding: 10px; margin-bottom: 5px; cursor: pointer; transition: 0.2s; }
.part-slot:hover { background: #252525; border-color: #666; }
.slot-header { display: flex; justify-content: space-between; font-size: 14px; color: #ccc; margin-bottom: 4px; }
.slot-desc { font-size: 11px; color: #888; }
.part-card { background: #333; border: 1px solid #555; padding: 10px; margin-bottom: 10px; cursor: pointer; border-radius: 4px; }
.part-card:hover { border-color: #e10600; background: #222; }
.part-slot-mini { background:#222; padding:4px 8px; border-radius:2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.part-slot-mini:hover { background:#333; color:#fff; }

/* --- 整备界面新样式 (Sprint 2.5) --- */
.setup-group { display: flex; gap: 15px; margin-bottom: 15px; }

/* 迷你信息卡 (车手/车辆) */
.mini-card { 
    flex: 1; background: #2a2a2a; border: 1px solid #444; border-radius: 6px; padding: 10px; 
    display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; position: relative;
}
.mini-card:hover { border-color: #aaa; background: #333; }
.mini-avatar { font-size: 32px; width: 50px; text-align: center; }
.mini-info { flex: 1; }
.mini-title { font-size: 16px; font-weight: bold; color: #e10600; margin-bottom: 4px; }
.mini-sub { font-size: 12px; color: #888; }
.mini-stat-row { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #ccc; margin-top: 4px; }
.mini-bar-bg { width: 50px; height: 4px; background: #111; border-radius: 2px; }
.mini-bar-fill { height: 100%; background: #4caf50; border-radius: 2px; }
.change-btn { 
    position: absolute; right: 5px; top: 5px; 
    background: #444; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; 
}

/* 大号部件槽 */
.big-part-slot { 
    background: #1e1e24; border: 1px solid #444; border-left: 3px solid #666;
    padding: 12px; margin-bottom: 8px; cursor: pointer; transition: 0.2s;
    display: flex; justify-content: space-between; align-items: center;
}
.big-part-slot:hover { background: #25252a; border-color: #888; }
.part-main { font-size: 15px; font-weight: bold; color: #ddd; }
.part-sub { font-size: 13px; color: #888; margin-top: 2px; }
.part-val { font-family: 'Rajdhani', sans-serif; font-weight: bold; font-size: 16px; color: #4caf50; }
.part-val.neg { color: #ff4444; font-size: 12px; margin-left: 5px; }

/* 模态框列表样式 */
.selector-item {
    display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #333; cursor: pointer;
}
.selector-item:hover { background: #222; }
.selector-item.disabled { opacity: 0.5; cursor: not-allowed; }
/* 增强侧边栏选中状态 (更亮) */
.nav-item.active {
    background: linear-gradient(90deg, #e10600 0%, rgba(225,6,0,0) 100%);
    color: #fff;
    border-left: 4px solid #fff; /* 增加白色左边框 */
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    padding-left: 40px; /* 稍微缩进更多 */
}

/* 新增：整备页面顶部信息条 */
.setup-header-bar {
    grid-column: 1 / -1; /* 横跨两列 */
    background: #1a1a1a;
    border: 1px solid #444;
    border-left: 5px solid #e10600;
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sh-title { font-size: 24px; font-family: 'Russo One'; color: #fff; text-transform: uppercase; }
.sh-sub { font-size: 14px; color: #888; margin-left: 10px; }
.sh-timer { font-size: 50px; font-family: 'Russo One'; color: #fff; font-weight: bold; }
.sh-timer.urgent { color: #ff4444; animation: pulse 1s infinite; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* --- Sprint 2.5 UI 升级 --- */

/* 1. 标题升级 (红色大字) */
.sh-title { 
    font-size: 38px; font-family: 'Russo One'; color: #e10600; 
    font-style: italic; text-shadow: 2px 2px 0 #000; 
    text-transform: uppercase; line-height: 1;
}

/* 2. 豪华卡片 (复用 Team/Garage 风格) */
.rich-card { 
    background: #25252a; border: 1px solid #444; border-radius: 6px; 
    padding: 10px; cursor: pointer; transition: 0.2s; position: relative;
    display: flex; flex-direction: column; gap: 5px;
}
.rich-card:hover { background: #333; border-color: #ccc; transform: translateY(-2px); }
.rich-header { display: flex; justify-content: space-between; align-items: center; }
.rich-avatar { font-size: 40px; line-height: 1; }
.rich-name { font-size: 18px; font-weight: bold; color: #fff; font-family: 'Russo One'; }
.rich-sub { font-size: 12px; color: #888; }
.rich-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-top: 5px; }

/* 3. 部件栏位 (5个一排，竖向布局) */
.parts-list-row { 
    display: grid; 
    /* 🔴 修复：使用 minmax(0, 1fr) 强制 5 列等宽，防止被长文字撑开 */
    grid-template-columns: repeat(5, minmax(0, 1fr)); 
    gap: 8px; 
    margin-top: 15px; 
    width: 100%; 
}
.part-slot-vertical { 
    background: #1e1e24; border: 1px solid #444; border-top: 3px solid #666;
    padding: 15px 5px !important; cursor: pointer; transition: 0.2s;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    height: 90px; justify-content: center; /* 🔴 改为居中对齐 */
    
    /* 🔴 核心修复：防止列宽被内部内容撑大 */
    width: 100%;
    min-width: 0; 
    overflow: hidden; 
    box-sizing: border-box;
}
.part-slot-vertical:hover { background: #25252a; border-color: #e10600; }
.part-v-label { 
    font-size: 23px; 
    color: #fff; 
    font-weight: bold;
    letter-spacing: 1px;
}
.part-v-name { 
    font-size: 16px; color: #4caf50; font-weight: bold; line-height: 1.2;
    width: 100%; 
    display: block;
    margin-bottom: 5px;

    /* 🔴 优化换行逻辑 */
    white-space: normal; 
    word-break: normal;        /* 优先寻找空格换行，不拆散单词 */
    overflow-wrap: break-word; /* 只有单词长过格子时才强制折断 */
}
.part-v-empty { font-size: 20px; color: #555; font-style: italic; }

/* 4. 弹窗选择列表 (加大版) */
#selector-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* 🔴 核心修复：强制行高由内容撑开，禁止压缩行高 */
    grid-auto-rows: max-content !important; 
    gap: 15px !important;
    padding: 10px;
    align-content: start;       /* 内容顶部对齐 */
    align-items: start;         /* 单元格顶部对齐 */
    width: 100%;
    box-sizing: border-box;
}
/* --- 插入：自适应选中外壳 --- */
.selector-item-wrap {
    display: flex;          /* 使用 Flex 确保内部元素填充 */
    flex-direction: column; /* 垂直排列 */
    border: 2px solid transparent; 
    border-radius: 12px;
    padding: 0;
    transition: all 0.2s;
    height: auto;           /* 🔴 核心：高度自动，由内部撑开 */
    width: 100%;            /* 占满 Grid 格子宽度 */
    overflow: hidden;       /* 裁剪圆角 */
    position: relative;     /* 建立定位基准 */
}

/* 选中态：应用绿色边框 */
.selector-item-wrap.selected {
    border: 4px solid #4caf50 !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

/* 确保内部卡片填满外壳 */
.selector-item-wrap .card, 
.selector-item-wrap .rich-card {
    margin: 0 !important;
    width: 100%;
}

/* --- Sprint 2.6 UI 美化 --- */

/* 1. 标题升级 */
.sh-sub { 
    font-size: 36px !important; /* 强制加大 */
    color: #fff !important; 
    font-family: 'Russo One'; 
    letter-spacing: 1px;
    margin-left: 0 !important;
    display: block;
    margin-top: -4px;
}

/* 2. 部件栏位加大与文字优化 */
.part-slot-vertical { 
    height: 140px !important; /* 稍微再增高一点，给大字体留空间 */
    padding: 5px 5px !important;
    justify-content: center; /* 内容居中 */
    background: linear-gradient(180deg, #1e1e24 0%, #151515 100%); /* 加一点质感 */
}
.part-v-name { 
    font-size: 18px !important; /* 字体加大 */
    margin-bottom: 5px;
}
/* 部件效果描述：放大、更清晰 */
.part-v-desc {
    font-size: 18px !important; /* 🔴 稍微缩小一点点，两行显示更精致 */
    color: #ccc;
    font-weight: 500;
    line-height: 1.2; /* 🔴 压缩行高，使两行看起来像一个整体 */
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* 3. 车手全属性网格 (8个属性) */
.driver-full-card {
    display: flex; gap: 15px; align-items: center;
    background: #25252a; border: 1px solid #444; padding: 15px; border-radius: 6px;
    cursor: pointer; transition: 0.2s;
}
.driver-full-card:hover { background: #333; border-color: #aaa; }
.driver-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    gap: 5px 15px;
    flex: 1;
}
.stat-pair { display: flex; justify-content: space-between; font-size: 12px; color: #ccc; background: rgba(0,0,0,0.3); padding: 2px 5px; border-radius: 3px; }
.stat-pair b { color: #fff; }

.selector-grid.vertical { 
    grid-template-columns: 1fr !important; /* 强制单列 */
    gap: 10px;
}
/* --- 修复：报名页副标题样式 (覆盖内联样式) --- */
#view-signup [data-lang="subtitle_signup"] {
    font-family: 'Russo One', sans-serif !important;
    font-size: 32px !important;     /* 加大 */
    color: #fff !important;         /* 变白 */
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #000;    /* 增加立体投影 */
    margin-bottom: 50px !important;
    letter-spacing: 1px;
    opacity: 1 !important;          /* 移除灰色透明度 */
}
/* --- 赛事大厅视觉优化 --- */

/* 1. 压扁的赛道地图容器 */
.track-map-box-setup {
    flex: none;
    height: 350px; /* 从 280px 增加到 350px，防止横屏太扁 */
    background: #000;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}
.track-map-box-setup::before { 
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%; 
    background-image: linear-gradient(#1a1a1a 1px, transparent 1px), linear-gradient(90deg, #1a1a1a 1px, transparent 1px); 
    background-size: 30px 30px; opacity: 0.5; 
}

/* 2. 赛道数据全属性网格 */
.track-stats-full-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 双列 */
    gap: 0px 20px; /* 行间距加大，列间距加大 */
    padding: 1px 5px;
    flex: 1;
    overflow-y: auto; /* 防止内容过多溢出 */
}

/* 3. 数据项样式 (放大字体) */
.track-stat-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px dashed #333;
    padding-bottom: 2px;
}
.ts-label {
    font-size: 26px; /* 放大 */
    color: #888;
    margin-bottom: -5px;
}
.ts-val {
    font-size: 23px; /* 显著放大 */
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
}

/* 4. 底部通栏特性 */
.track-stat-item.full-width {
    grid-column: 1 / -1; /* 跨两列 */
    border-bottom: none;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 4px;
    margin-top: 5px;
}
.ts-val.highlight {
    color: #ffffff; /* 金色高亮 */
    font-size: 30px;
    line-height: 2;
    white-space: normal; /* 允许换行 */
}
/* --- 底部指挥台 (HUD) --- */
#race-bottom-hud {
    position: relative !important; 
    bottom: auto; left: auto;
    width: 100%; height: 220px; 
    background: rgba(0,0,0,0.95);
    border-top: 4px solid var(--primary);
    display: flex;
    justify-content: space-between;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.8);
    z-index: 40; /* 提高层级 */
    flex-shrink: 0;
}

#view-race {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}
#race-split-container {
    flex: 1 !important;        /* 自动填满剩余高度 */
    height: auto !important;   /* 取消可能存在的固定高度 */
    width: 100%;
    display: flex;
    overflow: hidden;
}

.hud-panel {
    /* flex: 1; 移除这个默认值，由具体类控制 */
    border-right: 1px solid #333;
    padding: 15px;
    position: relative;
    overflow: hidden;
}
/* 🔴 新增：控制 HUD 比例，车手卡变宽，图片变窄 */
/* 车手数据卡片 (中间两个) */
.hud-driver-data {
    flex: 2 !important; /* 权重为 2 */
}
/* 侧边图片盒子 (两边两个) */
.hud-anim-box {
    flex: 1.5 !important; /* 权重为 0.8 */
    min-width: 120px; /* 保证图片最小宽度 */
}
.hud-panel:last-child { border-right: none; }

/* 动画占位符 */
.anim-placeholder {
    width: 100%; height: 100%;
    background: #1a1a1a;
    border: 1px dashed #444;
    display: flex; align-items: center; justify-content: center;
    color: #666; font-weight: bold;
    font-family: 'Russo One'; font-size: 20px;
}

/* 车手数据面板 */
.driver-hud-header {
    display: flex; gap: 0px; align-items: center; border-bottom: 2px solid #444; padding-bottom: 0px; margin-bottom: 5px;
}
.hud-avatar { font-size: 40px; line-height: 1; }
.hud-name { font-size: 24px; color: #fff; font-family: 'Russo One'; }
.hud-status-badge { 
    background: #333; padding: 2px 8px; border-radius: 4px; 
    font-size: 20px; color: #aaa; font-weight: bold; margin-left: auto;
}

.hud-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px;
}
.hud-row { display: flex; justify-content: space-between; font-size: 18px; color: #ccc; border-bottom: 1px dashed #222; }
.hud-val { font-family: 'Rajdhani'; font-weight: bold; color: #fff; font-size: 20px; }
.hud-val-gap { font-size: 17px; }

/* 进度条 */
.hud-bar-container { margin-top: 5px; }
.hud-bar-label { font-size: 15px; color: #888; display: flex; justify-content: space-between; }
.hud-track { height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.hud-fill { height: 100%; background: #4caf50; transition: none; }
.hud-fill.warn { background: #ffeb3b; }
.hud-fill.crit { background: #ff4444; }

/* 修改动画占位符样式，加入背景图 */
.anim-placeholder {
    width: 100%; height: 100%;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    border: 1px dashed #444;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.8); 
    font-weight: bold;
    font-family: 'Russo One'; font-size: 20px;
    text-shadow: 0 2px 4px black;
}

/* 这是一个具体的占位图修正 */
.hud-anim-box:first-child .anim-placeholder {
    /* 指挥台图片 */
    background-image: url('https://images.unsplash.com/photo-1535138382755-e7da922eb964?q=80&w=400&auto=format&fit=crop');
}

.hud-anim-box:last-child .anim-placeholder {
    /* 维修区图片 */
    background-image: url('https://images.unsplash.com/photo-1533561916327-0240d4239274?q=80&w=400&auto=format&fit=crop');
}

/* --- 比赛场景布局 (Layout Fix) --- */

/* 1. 环境容器：占满 Canvas 区域 */
#env-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 移除原本的 calc 高度，因为它现在在 visual-area 内部 */
    overflow: hidden; z-index: 0;
}

/* 天空层 */
#env-sky {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    /* 默认白天，JS会动态切换 */
    background-image: url('assets/environment/sky-day.png'); 
}
#env-sky.night { background-image: url('assets/environment/sky-night.png'); }
#env-sky.night.rain, #env-sky.night.cloudy { background-image: url('assets/environment/sky-night-rain.png'); }
#env-sky.rain { background-image: url('assets/environment/sky-rain.png'); }
#env-sky.cloudy { background-image: url('assets/environment/sky-rain.png'); }

/* 云朵层 (动画) */
#env-clouds {
    position: absolute; top: 0; left: 0; width: 100%; height: 60%;
    /* 使用多重背景加载3张云 */
    background-image: url('assets/environment/cloud-1.png'), url('assets/environment/cloud-2.png'), url('assets/environment/cloud-3.png');
    background-repeat: no-repeat;
    background-position: 10% 20%, 80% 10%, 50% 40%; /* 初始位置 */
    opacity: 0.8;
    animation: floatClouds 120s linear infinite;
}
@keyframes floatClouds {
    0% { background-position: 10% 20%, 80% 10%, 50% 40%; }
    50% { background-position: 15% 20%, 75% 10%, 55% 40%; } /* 轻微移动 */
    100% { background-position: 10% 20%, 80% 10%, 50% 40%; }
}

/* 中景层 (山/城市) - 沉底 */
#env-mid {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/environment/mid-scenery.png');
    background-size: cover; /* 宽者生存 */
    background-position: center bottom; /* 沉底居中 */
    z-index: 1;
}

/* 2. 画布层：透明背景，位于环境之上 */
#race-canvas { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100% !important;
    z-index: 2; display: block; 
}

/* 3. 覆盖层 (灯光/通知)：填满 visual-area */
.race-overlay { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: 10; pointer-events: none; 
}

/* --- 修复 2：车手头像大小 (Avatar) --- */
.avatar-wrapper {
    width: 80px;
    height: 80px;
    
    /* 🔴 关键修复：强制最小尺寸，防止被 Flex 布局挤扁 */
    min-width: 80px; 
    min-height: 80px;
    
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0; 
    margin-right: 15px;
    background: transparent; 
    border: none;
    /* 🔴 新增：利用负边距把头像往左上角拉 */
    /* 卡片默认 padding 是 20px，我们往回拉 10px 试试 */
    margin-top: -18px; 
    margin-left: -8px;
}

.img-avatar {
    width: 100%;
    height: 100%;
    /* 🔴 关键修复：改为 cover，让图片撑满格子，消除视觉大小差异 */
    object-fit: cover; 
    object-position: top center;
}

/* 针对 Draft 页面 */
.draft-selectable .avatar-wrapper {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
}

/* 图片自适应容器 */
.img-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满容器 */
    object-position: top center; /* 重点显示头部 */
}

/* --- 修复 3 & 4：天空与云朵 (Sky & Clouds) --- */
/* 天空层：必须绝对定位，否则会被云朵层挤下去导致看不见 */
#env-sky {
    position: absolute; /* 🔴 关键修复 */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover; 
    background-position: center;
    background-image: url('assets/environment/sky-day.png'); 
    z-index: 0;
}

/* 云朵层：缩小并限制在顶部 */
#env-clouds {
    position: absolute; top: 0; left: 0; 
    width: 100%; 
    height: 35%; /* 🔴 修复：只占据天空顶部 1/3 */
    
    /* 🔴 修复：大幅减小云朵尺寸 (原来是 auto，太大) */
    background-size: 500px auto, 350px auto, 250px auto; 
    
    background-image: url('assets/environment/cloud-1.png'), url('assets/environment/cloud-2.png'), url('assets/environment/cloud-3.png');
    background-repeat: no-repeat;
    background-position: 10% 20%, 80% 10%, 50% 40%;
    opacity: 0.9;
    z-index: 1; /* 在天空之上 */
    animation: floatClouds 120s linear infinite;
}

/* --- 修复 5：P房图片显示 (HUD Images) --- */
/* 确保图片容器撑满父级 */
.anim-img {
    width: 100%; 
    height: 100%;
    background-size: cover; 
    background-position: center;
    border: 1px solid #444;
    display: block; /* 🔴 确保它是块级元素 */
    background-color: #000; /* 加载失败时的底色 */
}

/* 4. 底部 HUD (固定高度) */
#race-bottom-hud {
    position: absolute; bottom: 0; left: 0; 
    width: 100%; height: 220px; 
    /* ...原有样式保持不变... */
    z-index: 20;
}

/* 图片容器通用样式 */
.anim-img {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    border: 1px solid #333;
}

/* 头像与赛车图片通用样式 */
.img-avatar { width: 100%; height: 100%; object-fit: contain; }
.img-car-banner { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 维修区默认图 (JS 会动态修改这个，但这里作为兜底) */
#hud-pit-img {
    background-image: url('assets/ui/hud-pitlane-idle.png');
}

/* 确保图片容器有尺寸 */
.anim-img {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    position: relative; /* 🔴 关键：让内部的 Canvas 绝对定位相对于图片本身 */
    overflow: hidden;   /* 🔴 关键：防止雨滴溢出圆角或边界 */
}

/* --- 大厅/整备页面的环境背景 --- */

.track-map-box-setup {
    position: relative; /* 确保子元素绝对定位相对于此容器 */
    background: #000;   /* 兜底色 */
    overflow: hidden;
    /* 原有尺寸样式保持不变，这里主要是去掉了之前的背景色或渐变 */
}

/* 大厅天空层 */
.lobby-sky {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    background-image: url('assets/environment/sky-day.png'); 
    z-index: 0;
}
.lobby-sky.night { background-image: url('assets/environment/sky-night.png'); }
.lobby-sky.night.rain, .lobby-sky.night.cloudy { background-image: url('assets/environment/sky-night-rain.png'); }
.lobby-sky.rain  { background-image: url('assets/environment/sky-rain.png'); }
.lobby-sky.cloudy { background-image: url('assets/environment/sky-rain.png'); }

/* 大厅中景层 */
.lobby-mid {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    /* background-image: url('assets/environment/mid-scenery.png'); 暂无图片先注释 */
    background: linear-gradient(to top, #1a1a1a 0%, transparent 100%); /* 使用渐变代替 */
    background-size: cover; background-position: center bottom;
    z-index: 1;
    opacity: 0.8;
}

/* 确保 Canvas 在最上层 */
#lobby-track-map {
    position: relative;
    z-index: 2;
}

/* --- 单独修正：赛事大厅(整备页)的头像位置 --- */
#view-setup .avatar-wrapper {
    /* 🔴 加上 !important 强制覆盖之前的负边距 */
    margin-top: -10px !important;   /* 改成正数，往下推一点 */
    margin-left: -10px !important;  /* 左边距归零 */
    
}

/* 确保按钮不被遮挡 */
#modal-swap-confirm .btn {
    min-width: 120px;     /* 保证最小宽度 */
    padding: 10px 0; /* 减少左右 padding，完全靠 justify-content 居中 */
    text-indent: 0;
    margin: 0 10px;       /* 增加间距 */
    z-index: 201;         /* 确保在最上层 */
}
/* 1. 减少面板内边距 */
.hud-panel {
    /* 顺序是：上  右  下  左 */
    /* 把第一个数字改大，内容就会整体下移 */
    padding: 20px 15px 0px 15px !important; 
    
    /* 解释：
       25px: 顶部留白变多，内容就下去了 (你可以试 20px, 30px)
       15px: 左右留白保持不变
       0px:  底部留白减少 (防止把体力条挤出屏幕外)
    */
}

/* 2. 压缩头部下边距 */
.driver-hud-header {
    margin-bottom: 2px !important; /* 原来是 5px */
    padding-bottom: 0px !important;
}

/* 3. 压缩数据行间距 */
.hud-grid {
    gap: 3px 5px !important; /* 原来是 5px 20px */
    margin-bottom: 0px;
}

/* 4. 微调数据行高度 */
.hud-row {
    line-height: 1.1; /* 紧凑行高 */
    border-bottom: 1px dashed #333; /* 保持分割线 */
}

/* 5. 压缩进度条顶部间距 */
.hud-bar-container {
    margin-top: 0px !important; /* 原来是 5px */
}

/* 6. 进度条文字紧凑 */
.hud-bar-label {
    margin-bottom: 1px;
}
/* --- HUD 区域独立布局调整 --- */

/* 1. 基础重置：通用面板不设边距，防止互相干扰 */
.hud-panel {
    padding: 0 !important; 
    /* 保持 Flex 布局让内部元素能撑开 */
    display: flex;
    flex-direction: column;
}

/* 2. 车手卡片专用：整体下移 */
/* 这里的 padding-top 控制下移距离 */
.hud-driver-data {
    display: block !important; /* 恢复块级布局以便 padding 生效 */
    padding: 13px 8px 0 8px !important; /* 上(下移量)  右  下  左 */
}

/* 3. 图片区域专用：垂直居中 */
.hud-anim-box {
    /* 使用 Flexbox 实现绝对居中 */
    display: flex !important;
    align-items: center;     /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 0px !important; /* 图片四周留一点空隙，不贴边 */
    background: #111; /* 图片区背景深一点，好看 */
}

/* 4. 图片本身：保持比例填满容器 */
.anim-img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    /* 确保图片撑满分配给它的区域 */
    flex: 1; 
}
/* --- 历史榜单专用样式 --- */

/* 1. 强制表格列宽布局 (解决间隙过大) */
.history-table {
    table-layout: fixed; /* 固定列宽 */
    width: 100%;
}

/* 2. 增加行高和内边距 (解决空隙太大但字太小的问题) */
.hist-row td {
    padding: 12px 5px !important; /* 上下撑开 */
    vertical-align: middle;
}

/* 3. 修正历史榜单中的头像位置 */
.history-table .avatar-wrapper {
    /* 覆盖全局样式，让头像在小格子里居中 */
    margin: 0 auto !important; 
    border-radius: 50%; /* 圆形头像更适合榜单 */
    border: 1px solid #444;
}

/* 4. 优化表头字体 */
.history-table th {
    font-size: 14px !important;
    padding: 12px 5px !important;
    font-weight: bold;
}
/* --- 修复问题 2: 实时榜单天气栏优化 --- */

/* 1. 去掉标题的下边距 */
.leaderboard-box h3 {
    margin-bottom: 0 !important;
    padding-bottom: 0px !important;
    border-bottom: none !important; /* 去掉分割线，让天气栏紧贴 */
}

/* 2. 天气栏紧贴标题，并加大字体 */
.weather-bar {
    margin-top: 0 !important;
    border-top: 1px solid #333; /* 在天气栏上方加分割线 */
    padding: 0px 15px !important; /* 增加高度 */
    font-size: 20px !important;    /* 🔴 加大字体 */
}

/* 3. 天气图标加大 */
.weather-bar span:first-child {
    font-size: 20px !important; /* 图标更大 */
    display: flex;
    align-items: center;
    gap: 8px;
}


/* --- 修复问题 3: 历史战绩字体加大 & 间距缩小 --- */

/* 1. 历史榜单每一行的高度和字体 */
.hist-row td {
    padding: 15px 5px !important; /* 垂直撑开一点 */
    font-size: 30px !important;   /* 🔴 数字基础字号加大 */
    vertical-align: middle;
}

/* 2. 车手名字特大 */
.hist-row td:nth-child(3) {
    font-size: 25px !important;   /* 🔴 车手名加大 */
}

/* 3. 车队和时间字体 */
.hist-row td:nth-child(4),
.hist-row td:nth-child(5) {
    font-size: 25px !important;
    color: #ccc;
}

/* 4. 减少卡片内边距，让表格贴边 */
#view-history .card {
    padding: 0 !important; /* 去掉卡片内边距 */
    border: 1px solid #444;
}

/* 5. 调整表头字体 */
.history-table th {
    font-size: 25px !important;
    padding: 10px 5px !important;
    background: #222;
}

/* --- 历史战绩：列宽控制 (横版/默认) --- */
.history-table .h-col-pos    { width: 10%; }
.history-table .h-col-avatar { width: 8%;  }
.history-table .h-col-name   { width: 30%; }
.history-table .h-col-team   { width: 25%; }
.history-table .h-col-time   { width: 18%; }
.history-table .h-col-pts    { width: 9%;  }

/* 确保表格内单元格也遵循这个宽度，不换行 */
.history-table td, .history-table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 雨天视觉特效 --- */
.weather-rain-effect {
    /* 降低亮度，增加一点对比度，模拟湿滑阴沉的感觉 */
    filter: brightness(0.7) contrast(1.1) sepia(0.2) !important;
}

/* --- Canvas 雨滴 (统一视觉效果) --- */
.hud-rain-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* --- 新增：实时榜单 UI 微调 --- */

/* 1. 独立设置“实时榜单”标题字号 */
.leaderboard-box h3 {
    font-size: 20px !important; /* 强制设为 18号 */
    
    /* 微调一下间距，让它看起来更精致 */
    padding-bottom: 0px !important; 
    margin-bottom: 0px !important;
}

/* 2. 修复表头“排序/Pos”文字偏低的问题 */
/* 原因：Russo One 字体基线偏低，导致视觉下沉 */
.lb-header-row .col-pos {
    margin-top: -3px; /* 向上提 3px，实现视觉对齐 */
}
/* 地图名字切换按钮 */
.map-overlay-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #666;
    color: #ccc;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-shadow: none;
    z-index: 60; /* 确保在最上层 */
    pointer-events: auto; /* 关键：因为父级 overlay 是 none，这里必须开启 */
    transition: 0.2s;
}

.map-overlay-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #fff;
    color: #fff;
}
/* =========================================
   竖屏模式 (Portrait Mode) 专属样式
   触发条件: 屏幕高度 > 宽度
   ========================================= */
@media (max-aspect-ratio: 1/1) {

    /* --- 一、全局框架重构 --- */
    #app-container {
        /* 改为 上(Top)-中(Main)-下(Nav) 布局 */
        grid-template-columns: 1fr;
        grid-template-rows: 75px 1fr 100px; /* 顶部75, 底部导航100 */
    }

    /* 竖屏下的榜单列宽微调 */
    .col-pos { width: 8% !important; }
    .col-driver { width: 20% !important; }
    .col-team { width: 27% !important; }
    .col-gap { width: 30% !important; }
    .col-stops { width: 12% !important; border-left: none; }

    /* 1. 顶部状态栏: 紧凑化 */
    #top-bar {
        grid-column: 1 / -1; 
        grid-row: 1 / 2;
        padding: 0 5px; /* 减少内边距 */
    }
    #top-bar .user-info {
        gap: 10px; /* 缩小按钮间距 */
        min-width: auto;
    }
    #season-status {
        font-size: 25px; /* 稍微调小字号防止溢出 */
    }

    /* 2. 侧边导航 -> 底部导航栏 */
    #sidebar {
        grid-column: 1 / -1;
        grid-row: 3 / 4;
        display: flex !important;
        flex-direction: row !important;
        border-right: none;
        border-top: 2px solid var(--primary); /* 顶部红线 */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
        background: #0a0a0c;
        z-index: 100;
        padding: 0;
        overflow: hidden;
    }

    /* 🔴 2. 彻底隐藏原本在侧边栏里的 Logo 区域 */
    #sidebar .logo-area {
        display: none !important;
    }

    /* 3. 导航菜单区域：直接铺满整个底栏 */
    #sidebar .nav-menu {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    /* 4. 隐藏底部栏多余的页脚文字 */
    #sidebar div[data-lang="footer_text"] {
        display: none !important;
    }

    /* --- 5. 导航项：保持图标化逻辑 --- */
    #sidebar .nav-item {
        flex: 1 0 20% !important; /* 🔴 锁定宽度为精确的 20%，防止选中时抖动 */
        height: 100%;
        font-size: 0; 
        border-left: none;
        border-top: 4px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box; /* 确保边框不撑开宽度 */
    }
    
    /* 图标定义 (维持之前的 Emoji 方案) */
    #sidebar .nav-item::before {
        display: block;
        font-size: 45px; /* 默认基础字号 */
        transition: transform 0.2s ease, text-shadow 0.2s;
        /* 🔴 核心魔法：应用 基础偏移 + 选中提升 */
        transform: translateY(calc(var(--offset-y, 0px) + var(--active-lift, 0px)));
    }
    #sidebar .nav-item[data-target="team"] { order: 1; }
    #sidebar .nav-item[data-target="team"]::before { 
        content: "👥"; 
        font-size: 50px;
        --offset-y: -5px; /* 如果觉得没放正，调这个数，正数向下，负数向上 */
    }
    #sidebar .nav-item[data-target="garage"] { order: 2; }
    #sidebar .nav-item[data-target="garage"]::before { 
        content: "🏎️"; 
        font-size: 70px; /* 大图标 */
        --offset-y: -20px; /* 🔴 基础位置设为0，它现在会正常提升了 */
    }
    #sidebar .nav-item[data-target="lobby"] { order: 3; }
    #sidebar .nav-item[data-target="lobby"]::before { 
        content: "🏁"; 
        font-size: 55px; 
        --offset-y: 0px;
    }
    #sidebar .nav-item[data-target="standings"] { order: 4; }
    #sidebar .nav-item[data-target="standings"]::before { 
        content: "🏆"; 
        font-size: 45px;
        --offset-y: 0px;
    }
    #sidebar .nav-item[data-target="history"] { order: 5; }
    #sidebar .nav-item[data-target="history"]::before { 
        content: "⏱️"; 
        font-size: 45px;
        --offset-y: 0px;
    }

    #sidebar .nav-item:hover {
        padding-left: 0 !important; /* 彻底禁用横屏的右移 */
        background: rgba(255,255,255,0.05);
    }

    #sidebar .nav-item.active {
        background: linear-gradient(180deg, rgba(225,6,0,0.3), transparent);
        border-top-color: var(--primary);
        --active-lift: -15px; /* 🔴 选中时向上提 15px */
    }

    /* 选中时图标单独上移 10px */
    #sidebar .nav-item.active::before {
        text-shadow: 0 0 15px var(--primary);
    }

    /* 3. 主舞台区域 */
    #main-content {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
    }

    /* --- 二、其他页面适配 --- */
    
    /* 1. 卡片网格: 强制双列 */
    .card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* 2. 积分榜: 竖向排列 */
    .standings-full-layout {
        flex-direction: column;
        height: auto; /* 让它自然撑开，内容区本身可滚动 */
        overflow-y: auto; /* 允许整个区域滚动 */
    }
    .standings-col {
        min-height: 500px; /* 给每个榜单一个最小高度 */
        margin-bottom: 20px;
    }
    /* 修正积分榜筛选栏布局 */
    .standings-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* --- 3. 历史战绩：竖版重排 (在这里调竖版) --- */
    
    /* 🔴 修正：恢复头像显示 */
    .history-table .avatar-wrapper { 
        display: block !important; 
        margin: 0 auto !important;
        width: 40px !important; 
        height: 40px !important;
        min-width: 40px !important;
    }
    .history-table col:nth-child(2) { width: auto !important; } /* 恢复列宽 */

    /* 🔴 竖版专用列宽配比 (你可以根据手机效果微调这些数) */
    .history-table .h-col-pos    { width: 12% !important; }
    .history-table .h-col-avatar { width: 12% !important; }
    .history-table .h-col-name   { width: 25% !important; }
    .history-table .h-col-team   { width: 22% !important; }
    .history-table .h-col-time   { width: 22% !important; }
    .history-table .h-col-pts    { width: 10% !important; }

    /* 竖版文字稍微缩小一点点防止挤爆 */
    .hist-row td {
        font-size: 24px !important;
        padding: 10px 2px !important;
    }
   
    /* 🔴 竖版报名页大标题字号 */
    #wait-title {
        font-size: 60px !important; /* 你可以实时调节这个数 */
    }

    /* --- 三、赛前整备页 --- */
    #view-setup > div {
        /* 原本是 grid-template-columns: 1fr 1.3fr */
        display: flex !important;
        flex-direction: column;
    }
    .setup-left, .setup-right {
        width: 100%;
    }
    /* 赛道情报板宽度基准 */
    .track-map-box-setup {
        height: 325px; /* 地图大一点 */
    }

    /* --- 四、比赛现场页 (核心重构 - 混合比例版) --- */
    
    /* 1. 父容器 Grid 化 */
    #view-race {
        display: grid !important;
        /* 
           列定义技巧 (混合 50:50 和 42:58):
           Col 1: 42% (榜单区)
           Col 2: 8%  (补位区，42+8=50)
           Col 3: 50% (右半区，8+50=58)
        */
        grid-template-columns: 43% 6.5% 51.5%;
        
        /* 
           行定义:
           Row 1: 视觉区 (自动填满剩余)
           Row 2: 图片区 (140px 固定)
           Row 3: 数据区上 (17.5%) \ 总计 35%
           Row 4: 数据区下 (17.5%) /
        */
        grid-template-rows: 1fr 175px 21.5% 21.5%;
        
        grid-template-areas: 
            "visual   visual   visual"
            "img_wall img_wall img_pit"
            "board    d1       d1"
            "board    d2       d2";
        
        gap: 2px;
        background: #000;
        height: 100% !important; /* 强制填满 */
    }

    /* 2. 拆解中间层 (unwrap) */
    #race-split-container, #race-bottom-hud {
        display: contents !important;
    }

    /* 3. 区域归位 */
    
    /* [上] 比赛画面 */
    #race-visual-area {
        grid-area: visual;
        width: 100%; height: 100%; min-height: 0;
    }
    
    /* [中] 图片区 (50% : 50%) */
    /* 指挥台图片: 跨越 Col 1+2 (42+8=50%) */
    .hud-anim-box:first-child { 
        grid-area: img_wall; 
        border-right: 2px solid var(--primary);
        border-bottom: 2px solid var(--primary);
    }
    /* 维修区图片: 占 Col 3 (50%) */
    .hud-anim-box:last-child { 
        grid-area: img_pit;
        border-bottom: 2px solid var(--primary);
    }
    .hud-anim-box {
        width: 100%; height: 100%; padding: 0 !important;
        background: #111;
    }

    /* [下-左] 实时榜单 (42%) */
    /* 占 Col 1 (42%) */
    .leaderboard-box {
        grid-area: board;
        width: 100% !important; height: 100% !important;
        border-right: 2px solid var(--primary);
        background: #151515;
    }

    /* [下-右] 车手数据面板 (58%) */
    /* 跨越 Col 2+3 (8+50=58%) */
    #hud-d1 { grid-area: d1; border-bottom: 1px solid #333; }
    #hud-d2 { grid-area: d2; }
    
    .hud-driver-data {
        width: 94.5% !important; height: 100% !important;
        padding: 11px 5px !important; /* 紧凑内边距 */
        background: rgba(0,0,0,0.95);
    }
    
    /* 针对竖屏的数据面板微调 (字号适配) */
    .driver-hud-header { margin-bottom: 2px !important; }
    .hud-avatar { 
        width: 50px !important;   /* 宽度适中 */
        height: 60px !important;  /* 高度拉长，显示更多头部 */
        min-width: 50px !important; 
        object-fit: cover; 
        object-position: top center; /* 确保从头顶开始显示 */
    }
    .hud-name { font-size: 25px !important; }
    .hud-row { font-size: 20px !important; line-height: 1; }
    .hud-val { font-size: 20px !important; }
    .hud-status-badge { font-size: 25px !important; padding: 1px 11px; }
    
    /* 注意：必须带上 ID 前缀，才能成功覆盖横版的数值 */

    #modal-selector .modal-box { width: 635px; height: 820px; }

    #modal-layer .modal-box { width: 550px; height: 905px; }

    #modal-parts .modal-box { width: 550px; height: 800px; }

    #modal-swap-confirm .modal-box { width: 450px; height: 400px; text-align: center; }

    #modal-warning .modal-box { width: 800px; height: 600px; }

    /* 🔴 精准复刻横版侧边栏 Logo 样式 */
    #top-bar {
        justify-content: flex-start !important;
    }

    /* 2. Logo 保持原样 */
    .top-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary);
        color: white;
        
        font-family: 'Russo One', 'Noto Sans SC', sans-serif;
        font-size: 20px; 
        font-style: italic;
        
        /* --- 核心修改点 --- */
        width: 175px;       /* 🔴 锁定宽度，与横版侧边栏一致 */
        padding: 0;         /* 移除之前的左右 padding */
        text-align: center; /* 文字居中 */
        /* ------------------ */

        height: 100%; 
        margin-left: -5px;
        border-bottom: 4px solid #b30000;
        text-transform: uppercase;
        flex-shrink: 0;

        text-shadow: 
            -1px -1px 0 #000,  
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000,
             3px  3px 0 rgba(0,0,0,0.6); 
    }

    /* 3. 状态文字：稍微给点左边距，别粘太死 */
    #season-status {
        margin-left: 5px; /* 这里控制文字离红色 Logo 区域的距离 */
        margin-right: 0;
    }

    /* 4. 重点：把按钮组推向最右边 */
    #top-bar .user-info {
        margin-left: auto; /* 🔴 魔法：这行代码会吃掉左边所有剩余空间，把按钮顶到最右侧 */
    }
    /* 1. 调整父容器：改为上下排列，给按钮腾地方 */
    .draft-status-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
        padding: 0px !important;
    }

    /* 2. 按钮样式：在这里调竖版的大小和位置 */
    #btn-confirm-draft {
        width: 23% !important;   /* 🔴 竖版通常用通栏大按钮，好点 */
        height: 50px !important;  /* 增加高度 */
        font-size: 25px !important; /* 字体加大 */
        margin-top: -68px;
        margin-left: auto !important; 
        
        /* 额外提醒：如果想微调它离右边缘的距离，用 margin-right */
        margin-right: -18px;
        
        /* 如果你想让它浮动在屏幕底部，也可以在这里改定位 */
        /* position: static; */
    }
    /* --- 竖版部件 UI 字体独立控制 --- */

    /* A. 整备页面：5个垂直槽位里的字体 */
    
    .part-v-label { 
        font-size: 20px !important;   /* 槽位标题：如“前翼”、“尾翼” */
        margin-bottom: 0px;
    }
    .part-v-name { 
        font-size: 16px !important;   /* 已装配的部件名称 */
        color: #4caf50; 
    }
    .part-v-desc { 
        font-size: 18px !important;   /* 部件的具体数值描述 */
        line-height: 1.2;
    }
    .part-v-empty { 
        font-size: 18px !important;   /* “未安装”文字字号 */
    }

    /* B. 部件选择弹窗：列表里的字体 */

    #setup-car-name { 
        font-size: 30px !important;   /* 弹窗顶部标题：车手名 - 部件类型 */
        border-bottom: 1px solid var(--primary);
        padding-bottom: 10px;
    }

    /* 每一个部件选项卡 */
    .part-card div:first-child { 
        font-size: 26px !important;   /* 备选部件的名称 */
        margin-bottom: 8px;
    }
    .part-card div:last-child { 
        font-size: 22px !important;   /* 备选部件的性能描述 */
    }

    /* 弹窗底部的“关闭”按钮 */
    #modal-parts .btn {
        font-size: 28px !important;
        height: 60px;
    }
    /* --- 竖版整备页头部：重新对齐 (文字左，倒计时右) --- */
    
    .setup-header-bar {
        /* 🔴 恢复标准顺序：第一个子元素在左，第二个在右 */
        flex-direction: row !important; 
        justify-content: space-between !important;
        padding: 6px 8px !important;
        align-items: center !important;
        height: auto !important;
        min-height: 120px;
    }

    /* 左侧文字容器 */
    .setup-header-bar > div:first-child {
        display: flex;
        flex-direction: column;
        /* 🔴 核心修改 1：文字向左对齐 */
        align-items: flex-start !important;
        text-align: left !important;
        flex: 1;
    }
    
    /* 赛道名 (如：上海国际赛车场) */
    .sh-title {
        font-family: 'Russo One', sans-serif !important;
        font-size: 36px !important;  /* 保持与您提到的升级版字号一致 */
        color: #e10600 !important;    /* 变回红色 */
        font-style: italic !important; /* 开启斜体 */
        text-shadow: 2px 2px 0 #000 !important; /* 恢复黑色立体阴影 */
        text-transform: uppercase !important;
        line-height: 1 !important;
        margin-top: 5px !important;
    }

    /* 场次信息 (如：第 1 轮 / 18) */
    .sh-sub {
        font-size: 35px !important; 
        display: block !important;
    }

    /* 右侧倒计时数字 */
    #setup-timer-display {
        /* 🔴 核心修改 2：数字向右对齐 */
        text-align: right !important;
        font-size: 38px !important; 
        color: var(--primary) !important;
        min-width: 0px;
        margin-left: 0px; /* 给左边文字留点间距 */
        font-family: 'Russo One', sans-serif;
    }
    .hud-val-gap {
        /* 🔴 就在这里改竖版的字号 */
        font-size: 18px !important; 
        
        /* 如果想让括号里的名字颜色淡一点也可以在这里加 */
        /* opacity: 0.9; */
    }
    #selector-list {
        display: grid !important; /* 🔴 补上这一行 */
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important; /* 🔴 将 0px 改为 15px，否则卡片会粘在一起 */
        padding: 15px;
    }
}