/* base.css - 全局基础样式、CSS变量、排版 */
:root {
    --color-bg: #0a0e17;
    --color-bg-light: #131a2b;
    --color-surface: #1a2235;
    --color-surface-light: #243049;
    --color-gold: #f0c040;
    --color-gold-dark: #c89c20;
    --color-text: #e8eaf0;
    --color-text-dim: #8892a4;
    --color-accent: #4ea8de;
    --color-accent-dim: rgba(78,168,222,0.12);
    --color-success: #2ecc71;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --font-main: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
    --glow-accent: 0 0 12px rgba(78,168,222,0.3);
    --glow-gold: 0 0 12px rgba(240,192,64,0.25);
    --glass: rgba(26,34,53,0.75);
    --glass-border: rgba(78,168,222,0.15);
}

*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

html, body {
    width: 100%; height: 100%;
    /* 使用 dvh (动态视口高度) 解决移动端地址栏收缩时的布局抖动 */
    height: 100dvh;
    overflow: hidden;
    font-family: var(--font-main);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    /* 不在 body 上加 safe-area padding——会导致部分浏览器顶部留出大块空白。
       游戏的 HUD/顶部元素各自处理安全区即可。 */
}

.game-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
}

.scene {
    width: 100%; height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface-light) transparent;
}

.scene::-webkit-scrollbar { width: 4px; }
.scene::-webkit-scrollbar-thumb { background: var(--color-surface-light); border-radius: 4px; }

/* 全局 focus-visible：仅键盘导航时显示聚焦轮廓 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; }
p { line-height: 1.6; color: var(--color-text-dim); }
ul { list-style: none; padding-left: 0; }
ul li { padding: 4px 0; }
strong { color: var(--color-text); }

.scene-fade-out { opacity: 0; transition: opacity 0.3s ease; }
.scene-fade-in { animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 雷达图样式 */
.stat-radar { display: flex; justify-content: center; margin: 12px 0; }
.stat-radar svg { overflow: visible; }
.radar-grid { fill: none; stroke: var(--color-surface-light); stroke-width: 0.5; }
.radar-fill { fill: rgba(78, 168, 222, 0.25); stroke: var(--color-accent); stroke-width: 1.5; }
.radar-label { fill: var(--color-text-dim); font-size: 9px; text-anchor: middle; dominant-baseline: middle; }

/* Toast */
.toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--color-surface); color: var(--color-text); padding: 10px 24px; border-radius: var(--radius); box-shadow: var(--shadow); transform: translateY(-10px); opacity: 0; transition: all 0.3s ease; font-size: 14px; border: 1px solid var(--color-surface-light); }
.toast--show { transform: translateY(0); opacity: 1; }

/* ImageManager 图片包装（v2 反向加载策略）
   语义：fallback 是"永远可见的底图"，真图通过 onload 覆盖上去
   —— 因此 .img-fallback 默认不再隐藏 */
.img-wrapper { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; overflow: hidden; }
.img-wrapper img { display: block; }
.img-fallback { line-height: 0; }
.img-fallback svg { display: block; }

/* ── 毛玻璃面板 ── */
.glass-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ── 装饰顶部发光线 ── */
.glow-top {
    position: relative;
}
.glow-top::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.5;
}

/* ── 节标题装饰线 ── */
.section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: var(--color-text);
    margin-bottom: 12px;
}
.section-title::before {
    content: ''; width: 3px; height: 16px;
    background: var(--color-accent); border-radius: 2px; flex-shrink: 0;
}

/* ── 通用页面头部 (createPageHeader) ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(240, 192, 64, 0.15);
    flex-shrink: 0;
}
.page-header__title {
    font-size: clamp(17px, 3.5vw, 22px);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-gold), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    flex: 1;
}
.page-header__right {
    min-width: 80px;
    text-align: right;
}
.page-header__back {
    flex-shrink: 0;
}

/* ── 标签页通用样式 ── */
.tab-bar {
    display: flex; gap: 2px; padding: 3px;
    background: var(--color-bg-light); border-radius: var(--radius);
}
.tab-bar__item {
    flex: 1; padding: 8px 4px; text-align: center;
    font-size: 13px; font-weight: 600; color: var(--color-text-dim);
    border: none; background: transparent; border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.2s ease; font-family: var(--font-main);
}
.tab-bar__item:hover { color: var(--color-text); }
.tab-bar__item--active {
    background: var(--color-surface); color: var(--color-accent);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}