/* ═══════════════════════════════════════════════════════════════
   篮球人生 · 选秀之路 — 电影感主题（暗色 / 亮色双主题）
   ART-SLOT：所有美术预留位都标有 "ART-SLOT" 注释，方便搜索替换
   ═══════════════════════════════════════════════════════════════ */

/* ── 暗色主题（默认） ── */
:root {
  --bg: #07090d;
  --panel: rgba(16, 19, 26, .82);
  --panel-solid: rgba(10, 12, 17, .96);
  --panel-line: rgba(217, 179, 108, .22);
  --card-end: rgba(16, 19, 26, .92);
  --gold: #d9b36c;
  --gold-bright: #f2d492;
  --text: #ece7da;
  --text-dim: #9a958a;
  --input-bg: rgba(255, 255, 255, .05);
  --bar-bg: rgba(236, 231, 218, .09);
  --line-soft: rgba(236, 231, 218, .12);
  --vignette: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.62) 100%);
  --grain-opacity: .055;
  /* 稀有度五色（词条/选项档次通用，两主题共用） */
  --r-red: #ff4d42;
  --r-gold: #f5c542;
  --r-purple: #b45cff;
  --r-blue: #4aa8ff;
  --r-gray: #8b9199;
  --serif: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "思源宋体", "SimSun", sans-serif;
  --serif-title: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans SC", sans-serif;
}

/* ── 亮色主题 ── */
body.light {
  --bg: #f2efe7;
  --panel: rgba(255, 255, 255, .8);
  --panel-solid: rgba(250, 248, 243, .97);
  --panel-line: rgba(150, 116, 48, .35);
  --card-end: rgba(255, 255, 255, .94);
  --gold: #9a7b2d;
  --gold-bright: #7c611f;
  --text: #28241c;
  --text-dim: #6f695c;
  --input-bg: rgba(0, 0, 0, .04);
  --bar-bg: rgba(40, 36, 28, .12);
  --line-soft: rgba(40, 36, 28, .14);
  --vignette: radial-gradient(ellipse at center, transparent 55%, rgba(120,100,60,.18) 100%);
  --grain-opacity: .03;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  overflow: hidden;
  letter-spacing: .04em;
  transition: background .6s ease, color .6s ease;
}

/* ── ART-SLOT：主背景层（替换 assets/bg-main.jpg，1920×1080） ── */
.bg-layer {
  position: fixed; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(7,9,13,.55) 0%, rgba(7,9,13,.82) 70%, var(--bg) 100%),
    url("../assets/bg-main.jpg") center / cover no-repeat,
    radial-gradient(1200px 700px at 50% 18%, #1a2233 0%, #0b0f18 55%, #07090d 100%);
  transition: opacity .8s ease;
}
/* ── ART-SLOT：LOGO 水印背景（assets/logo.jpg 全屏铺满、10% 透明度）
   cover = 等比铺满全屏、绝不拉伸变形（边缘按比例裁切而非挤压） */
.logo-bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
  background-image: url("../assets/logo.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: .1;
  pointer-events: none;
}
.bg-layer.phase-traits {
  background:
    linear-gradient(180deg, rgba(7,9,13,.5) 0%, rgba(7,9,13,.85) 75%, #07090d 100%),
    url("../assets/bg-traits.jpg") center / cover no-repeat,
    radial-gradient(1000px 640px at 50% 30%, #241a33 0%, #100b18 55%, #07090d 100%);
}
/* 亮色主题背景 */
body.light .bg-layer,
body.light .bg-layer.phase-traits {
  background:
    linear-gradient(180deg, rgba(242,239,231,.4) 0%, rgba(242,239,231,.78) 70%, var(--bg) 100%),
    url("../assets/bg-main.jpg") center / cover no-repeat,
    radial-gradient(1200px 700px at 50% 15%, #fdfbf5 0%, #efe9da 55%, #e7e0cd 100%);
}

/* 胶片噪点（有 assets/texture-grain.png 时可替换此 CSS 噪点） */
.film-grain {
  position: fixed; inset: -100px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  animation: grain 900ms steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-30px, 20px); }
  50% { transform: translate(20px, -25px); } 75% { transform: translate(-15px, -10px); }
  100% { transform: translate(0, 0); }
}

.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--vignette); }

/* ══════════ 顶栏控制按钮 ══════════ */
#topControls {
  position: fixed; top: 16px; right: 18px; z-index: 60;
  display: flex; gap: 10px;
}
.ctrl-btn {
  width: 42px; height: 42px; cursor: pointer;
  background: var(--panel); color: var(--gold);
  border: 1px solid var(--panel-line); border-radius: 50%;
  font-size: 17px; display: flex; align-items: center; justify-content: center;
  transition: all .3s ease; backdrop-filter: blur(8px);
}
.ctrl-btn:hover { border-color: var(--gold); transform: translateY(-2px); }
.ctrl-btn.off { opacity: .4; filter: grayscale(1); }

/* ══════════ BGM 音乐面板 ══════════ */
#musicPanel {
  position: fixed; top: 68px; right: 18px; z-index: 59;
  width: min(250px, 82vw);
  background: var(--panel-solid); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 16px 18px 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
  animation: mp-in .3s cubic-bezier(.22,1,.36,1);
}
@keyframes mp-in { from { opacity: 0; transform: translateY(-10px); } }
.mp-title { font-size: 12px; color: var(--gold); letter-spacing: .35em; margin-bottom: 12px; }
.mp-row { display: flex; align-items: center; gap: 10px; }
.mp-icon { font-size: 12px; opacity: .75; }
#musicVol { flex: 1; height: 22px; background: transparent; accent-color: var(--gold); cursor: pointer; }
.mp-toggle {
  margin-top: 12px; width: 100%; padding: 9px 0; cursor: pointer;
  font-family: var(--serif); font-size: 13px; letter-spacing: .2em; text-indent: .2em;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line-soft); border-radius: 8px;
  transition: all .3s;
}
.mp-toggle:hover { border-color: var(--gold); color: var(--gold); }
.mp-tip { margin-top: 10px; font-size: 11px; line-height: 1.8; color: var(--text-dim); opacity: .6; text-align: center; }

/* 字号缩放面板（与 musicPanel 同风格，偏移到左侧） */
#fontScalePanel {
  position: fixed; top: 68px; right: 18px; z-index: 59;
  width: min(250px, 82vw);
  background: var(--panel-solid); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 16px 18px 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
  animation: mp-in .3s cubic-bezier(.22,1,.36,1);
}
.font-scale-row { justify-content: center; gap: 12px; }
.fs-btn {
  font-family: var(--serif); font-size: 14px; letter-spacing: .05em;
  padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 8px;
  transition: all .25s;
  min-width: 42px;
}
.fs-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(217,179,108,.08); }
.fs-btn:active { transform: scale(.95); }
.fs-btn.fs-reset { font-size: 12px; padding: 6px 10px; }
.fs-display {
  font-size: 14px; color: var(--gold); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  min-width: 52px; text-align: center;
}

/* ══════════ 屏幕切换 ══════════ */
/* dvh 修复 iOS 地址栏导致的 100vh 抖动；不支持 dvh 的旧浏览器自动回退 100vh */
#app { position: relative; z-index: 2; height: 100vh; height: 100dvh; }

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(26px);
  pointer-events: none;
  transition: opacity .7s ease, transform .7s ease;
  overflow-y: auto; padding: 40px 24px;
}
.screen.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hidden { display: none !important; }

/* ══════════ 打字机光标 ══════════ */
.cursor {
  display: inline-block; width: .55em; height: 1.05em;
  background: var(--gold); margin-left: 2px; vertical-align: -0.15em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.skip-tip {
  margin-top: 10px; font-size: 11px; color: var(--text-dim);
  opacity: .55; letter-spacing: .2em;
}

/* ══════════ 按钮 ══════════ */
.btn-gold, .btn-ghost {
  font-family: var(--serif); cursor: pointer;
  letter-spacing: .28em; text-indent: .28em;
  padding: 15px 36px; font-size: 16px;
  background: transparent; color: var(--gold);
  border: 1px solid var(--gold);
  transition: all .35s ease;
}
.btn-gold:hover {
  background: var(--gold); color: var(--bg);
  box-shadow: 0 0 34px rgba(217,179,108,.35);
}
.btn-ghost {
  border-color: var(--line-soft); color: var(--text-dim);
  letter-spacing: .18em; font-size: 14px; padding: 11px 24px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold:disabled, .btn-ghost:disabled { opacity: .35; cursor: not-allowed; }

/* ══════════ 开始界面 ══════════ */
.start-inner { text-align: center; max-width: 760px; padding: 20px; }

.cover-logo {
  display: block; margin: 0 auto 18px; max-width: 220px; width: 40vw;
  height: 110px; background-size: contain; background-position: center;
  background-repeat: no-repeat;
  /* 暗色主题默认显示 night 版 */
  background-image: url("../assets/2K26LOGO-night.png");
}
body.light .cover-logo { background-image: url("../assets/2K26LOGO-light.png"); }
.game-title {
  font-size: clamp(46px, 8vw, 80px); font-weight: 700;
  letter-spacing: .22em; text-indent: .22em; color: var(--text);
  text-shadow: 0 0 60px rgba(217,179,108,.25);
}
.game-subtitle {
  margin-top: 10px; color: var(--gold); font-size: 16px;
  letter-spacing: .5em; text-indent: .5em;
}
.cover-credit {
  position: fixed; right: 22px; bottom: 18px; z-index: 30;
  font-size: 12px; letter-spacing: .1em; color: var(--text-dim);
  opacity: .55; pointer-events: none; user-select: none;
}
.intro-text {
  margin: 34px auto 0; max-width: 600px; min-height: 78px;
  color: var(--text-dim); font-size: 16px; line-height: 2.1;
}
.name-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
#playerName {
  font-family: var(--serif); font-size: 17px; letter-spacing: .12em;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line-soft); padding: 14px 22px; width: 250px;
  outline: none; transition: border-color .3s;
}
#playerName:focus { border-color: var(--gold); }
#btnArchive { margin-top: 22px; }

/* ══════════ 章节布局：内容靠左，填充左侧空间 ══════════ */
.phase-inner { width: min(920px, 100%); margin: 0 auto; }

.phase-head { margin-bottom: 26px; }
.phase-label { color: var(--gold); font-size: 15px; letter-spacing: .4em; }
.phase-count { float: right; color: var(--text-dim); font-size: 15px; margin-top: -20px; }
.progress { margin-top: 12px; height: 2px; background: var(--line-soft); }
.progress-fill {
  height: 100%; width: 0%; background: var(--gold);
  box-shadow: 0 0 12px rgba(217,179,108,.7);
  transition: width .8s cubic-bezier(.22,1,.36,1);
}

.narrative { cursor: pointer; }
.q-title { font-size: 17px; color: var(--text-dim); letter-spacing: .3em; }
.q-text {
  margin-top: 10px; font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.85; min-height: 130px; color: var(--text);
}

/* ══════════ 选项卡片 ══════════ */
.options { margin-top: 26px; display: flex; flex-direction: column; gap: 15px; }

.opt-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line-soft);
  padding: 19px 24px; color: var(--text);
  font-family: var(--serif);
  opacity: 0; transform: translateX(-24px);
  animation: slide-in .55s cubic-bezier(.22,1,.36,1) forwards;
  transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
  backdrop-filter: blur(6px);
}
@keyframes slide-in { to { opacity: 1; transform: translateX(0); } }
.opt-card:hover {
  border-color: var(--gold); border-left-color: var(--gold);
  transform: translateX(8px); box-shadow: 0 6px 30px rgba(0,0,0,.35);
}
.opt-card .opt-name { font-size: 22px; letter-spacing: .1em; }
.opt-card .opt-desc { margin-top: 7px; font-size: 16px; color: var(--text-dim); line-height: 1.8; }
.opt-card.picked { border-color: var(--gold); background: rgba(217,179,108,.1); }
.opt-card.dimmed { opacity: .35; pointer-events: none; filter: saturate(.4); }

/* 档次标签（v5：已隐藏，不在网页端向玩家展示 S~F 评级；内部 tier 仍用于选项抽样/自动测试） */
.tier-chip {
  display: none;
  position: absolute; top: 15px; right: 17px;
  font-size: 13px; letter-spacing: .2em; padding: 3px 10px;
  border: 1px solid; opacity: 0; transform: scale(.6);
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
  background: var(--panel);
}
.tier-chip.show { opacity: 1; transform: scale(1); }
.t-S { color: var(--r-red) !important; border-color: var(--r-red); box-shadow: 0 0 16px rgba(255,77,66,.4); }
.t-A { color: var(--r-gold) !important; border-color: var(--r-gold); }
.t-B { color: var(--r-purple) !important; border-color: var(--r-purple); }
.t-C { color: var(--r-blue) !important; border-color: var(--r-blue); }
.t-D, .t-E, .t-F { color: var(--r-gray) !important; border-color: var(--r-gray); }

/* ══════════ 加点浮动 chips ══════════ */
.gain-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 30px; }
.chip {
  font-size: 14px; letter-spacing: .08em; padding: 5px 13px;
  border: 1px solid var(--gold); color: var(--gold-bright);
  background: rgba(217,179,108,.1);
  opacity: 0; transform: translateY(12px);
  animation: chip-in .45s ease forwards;
}
.chip.badge-chip { border-color: currentColor; background: transparent; }
@keyframes chip-in { to { opacity: 1; transform: translateY(0); } }

.continue-row { margin-top: 24px; text-align: right; }

/* ══════════ 词条抽卡 ══════════ */
.trait-candidates {
  margin-top: 26px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.trait-card {
  position: relative; cursor: pointer; overflow: hidden;
  background: var(--panel); border: 1px solid; padding: 22px 20px 18px;
  opacity: 0; transform: rotateY(70deg) translateY(20px);
  animation: flip-in .6s cubic-bezier(.22,1,.36,1) forwards;
  transition: transform .3s, box-shadow .3s;
  backdrop-filter: blur(6px);
}
@keyframes flip-in { to { opacity: 1; transform: rotateY(0) translateY(0); } }
.trait-card:hover { transform: translateY(-8px) scale(1.02); }
.trait-card.picked { transform: scale(1.05); }
.trait-card.dimmed { opacity: .3; pointer-events: none; }

.trait-card .rarity-label { font-size: 12px; letter-spacing: .35em; margin-bottom: 10px; }
.trait-card .trait-name { font-size: 22px; letter-spacing: .08em; line-height: 1.5; color: inherit; }
.trait-card .trait-attrs { margin-top: 12px; font-size: 14px; color: var(--text-dim); line-height: 2; position: relative; z-index: 1; }
.trait-card .trait-badge { margin-top: 10px; font-size: 14px; letter-spacing: .1em; position: relative; z-index: 1; }

/* 稀有度五色 —— 显眼区分 */
.r-red {
  border-color: var(--r-red); color: var(--r-red);
  box-shadow: 0 0 34px rgba(255,77,66,.28), inset 0 0 26px rgba(255,77,66,.07);
  background: linear-gradient(160deg, rgba(255,77,66,.14), var(--card-end) 55%);
}
.r-red::after {  /* 传说红专属：流动光泽 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,220,200,.16) 48%, transparent 62%);
  transform: translateX(-100%); animation: sheen 2.8s ease infinite;
}
@keyframes sheen { 55%, 100% { transform: translateX(100%); } }
.r-gold {
  border-color: var(--r-gold); color: var(--r-gold);
  box-shadow: 0 0 26px rgba(245,197,66,.22), inset 0 0 22px rgba(245,197,66,.06);
  background: linear-gradient(160deg, rgba(245,197,66,.12), var(--card-end) 55%);
}
.r-purple {
  border-color: var(--r-purple); color: var(--r-purple);
  box-shadow: 0 0 20px rgba(180,92,255,.2), inset 0 0 18px rgba(180,92,255,.05);
  background: linear-gradient(160deg, rgba(180,92,255,.11), var(--card-end) 55%);
}
.r-blue {
  border-color: var(--r-blue); color: var(--r-blue);
  box-shadow: 0 0 14px rgba(74,168,255,.14);
  background: linear-gradient(160deg, rgba(74,168,255,.09), var(--card-end) 55%);
}
.r-gray {
  border-color: var(--r-gray); color: var(--r-gray);
  background: linear-gradient(160deg, rgba(139,145,153,.08), var(--card-end) 55%);
}
.trait-card .rarity-label { color: inherit; }

.trait-actions { margin-top: 20px; text-align: center; }

.trait-collection { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.mini-trait {
  font-size: 12px; letter-spacing: .08em; padding: 4px 11px;
  border: 1px solid; opacity: 0; animation: chip-in .4s ease forwards;
}
.mini-trait.r-red, .mini-trait.r-gold, .mini-trait.r-purple,
.mini-trait.r-blue, .mini-trait.r-gray { background: transparent; box-shadow: none; }

/* ══════════ 属性面板 ══════════ */
#panelToggle {
  position: fixed; top: 50%; left: 0; z-index: 20;
  transform: translateY(-50%);
  writing-mode: vertical-rl; letter-spacing: .4em;
  background: var(--panel); color: var(--gold);
  border: 1px solid var(--panel-line); border-left: none;
  padding: 18px 8px; cursor: pointer; font-family: var(--serif); font-size: 13px;
  transition: background .3s;
}
#panelToggle:hover { background: rgba(217,179,108,.15); }
#panelToggle.flash { animation: panel-flash .8s ease; }
@keyframes panel-flash { 0%, 100% { background: var(--panel); } 50% { background: rgba(217,179,108,.4); } }

#attrPanel {
  position: fixed; top: 0; left: 0; z-index: 19;
  width: 340px; height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--panel-solid); backdrop-filter: blur(14px);
  border-right: 1px solid var(--panel-line);
  transform: translateX(-100%); transition: transform .5s cubic-bezier(.22,1,.36,1);
  padding: 24px 22px 40px;
}
#attrPanel.open { transform: translateX(0); }

/* 桌面端：面板为可拖动卡片，竖直居中、紧贴中央对话左侧（不贴合居左通栏） */
@media (min-width: 1100px) {
  #attrPanel {
    top: 50%; transform: translateY(-50%);
    /* 紧贴居中对话(920)的左侧：对话左缘=50vw-460 → 面板右缘=50vw-480 → 面板左=50vw-940 */
    left: calc(50vw - 940px);
    width: 460px; height: auto; max-height: calc(100dvh - 96px);
    border: 1px solid var(--panel-line);
    border-radius: 14px;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .35);
    padding: 22px 20px 30px;
  }
  #panelToggle { display: none; }
  .phase-inner { margin: 0 auto; }
  /* 拖动手柄：悬停在头部显示可拖动 */
  #attrPanel .panel-head { cursor: grab; user-select: none; }
  #attrPanel.dragging .panel-head { cursor: grabbing; }
  #attrPanel.dragging { transition: none; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); }
  /* 缩放手柄：面板右下角固定 */
  #attrPanel .panel-resize {
    position: absolute; right: 2px; bottom: 2px; z-index: 5;
    width: 16px; height: 16px; cursor: nwse-resize;
    opacity: .55; transition: opacity .2s; touch-action: none;
  }
  #attrPanel .panel-resize::before {
    content: ""; position: absolute; right: 3px; bottom: 3px;
    width: 9px; height: 9px; border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
  }
  #attrPanel .panel-resize:hover { opacity: 1; }
}

.panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.panel-overall span { font-size: 54px; color: var(--gold-bright); line-height: 1; }
.panel-overall em { font-style: normal; font-size: 13px; color: var(--text-dim); margin-left: 5px; }
.panel-name { font-size: 19px; letter-spacing: .12em; }
.panel-phys { margin-top: 5px; font-size: 13px; color: var(--gold); letter-spacing: .06em; line-height: 1.6; }

.panel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 4px; }
.panel-badge { font-size: 11px; padding: 3px 9px; border: 1px solid; letter-spacing: .05em; }
.panel-badge.b-紫名人堂 { color: var(--r-purple); border-color: var(--r-purple); }
.panel-badge.b-金 { color: var(--r-gold); border-color: var(--r-gold); }
.panel-badge.b-银 { color: #aab4c8; border-color: #aab4c8; }
body.light .panel-badge.b-银 { color: #5d6677; }
.panel-badge.b-铜 { color: #d08a4e; border-color: #d08a4e; }

.cat-title {
  margin: 18px 0 9px; font-size: 14px; color: var(--gold);
  letter-spacing: .35em; border-bottom: 1px solid var(--panel-line); padding-bottom: 6px;
}
/* 属性面板双栏：左栏=进攻，右栏=防守/运动/精神 */
.panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 2px; }
.panel-col { min-width: 0; }
.panel-col:last-child .cat-title { margin-top: 4px; }
.panel-attrs { border-top: 1px solid var(--panel-line); padding-top: 4px; }
.attr-row { display: grid; grid-template-columns: 64px 26px 1fr; align-items: center; gap: 7px; margin: 8px 0; }
.attr-row .a-name { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attr-row .a-val { font-size: 13px; text-align: right; transition: color .3s; }
.attr-row .a-bar { height: 6px; background: var(--bar-bg); overflow: hidden; }
.attr-row .a-fill {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, #8a6d3b, var(--gold));
  transition: width .8s cubic-bezier(.22,1,.36,1);
}
.attr-row.pulse .a-name, .attr-row.pulse .a-val { color: var(--gold-bright); }
.attr-row.pulse .a-fill { box-shadow: 0 0 10px rgba(242,212,146,.9); }

/* ══════════ 结算球员卡 ══════════ */
.result-inner { width: min(1060px, 96vw); margin: 0 auto; }

.result-reveal {
  text-align: center; font-size: clamp(21px, 3.2vw, 30px);
  letter-spacing: .2em; color: var(--text); min-height: 64px; line-height: 2;
}

.player-card {
  position: relative; margin-top: 20px;
  background: var(--panel); border: 1px solid var(--panel-line);
  padding: 36px 40px 30px; backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  animation: card-rise .9s cubic-bezier(.22,1,.36,1);
}
@keyframes card-rise { from { opacity: 0; transform: translateY(50px); } }

/* ART-SLOT：球员卡框（assets/card-frame.png 900×1350） */
.card-frame-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; z-index: 3;
}

.card-head { text-align: center; margin-bottom: 26px; }
.card-name { font-size: 32px; letter-spacing: .3em; text-indent: .3em; }
.card-phys {
  margin-top: 10px; font-size: 15px; color: var(--gold);
  letter-spacing: .18em;
}
.card-overall { margin-top: 8px; }
.card-overall span {
  font-size: 88px; line-height: 1; color: var(--gold-bright);
  text-shadow: 0 0 50px rgba(242,212,146,.4);
}
.card-overall em { font-style: normal; font-size: 15px; color: var(--text-dim); margin-left: 8px; letter-spacing: .2em; }
.card-tier { margin-top: 12px; font-size: 20px; color: var(--gold); letter-spacing: .35em; text-indent: .35em; }
.card-tier-desc { margin-top: 6px; font-size: 14px; color: var(--text-dim); letter-spacing: .15em; }
.floor-note { margin-top: 10px; font-size: 12px; color: var(--r-blue); letter-spacing: .1em; }

.card-body { display: grid; grid-template-columns: 1.25fr 1.2fr; gap: 38px; text-align: left; }
@media (max-width: 900px) { .card-body { grid-template-columns: 1fr; } }

.card-col h3 {
  font-size: 14px; color: var(--gold); letter-spacing: .3em;
  border-bottom: 1px solid var(--panel-line); padding-bottom: 7px; margin: 15px 0 11px;
}
.card-col h3:first-child { margin-top: 0; }

/* 左栏叙事面板 */
.card-narrative { display: flex; flex-direction: column; gap: 22px; }
.story-panel {
  flex: 1; border: 1px solid var(--gold-dim, rgba(217,179,108,.35));
  border-radius: 12px; padding: 22px 24px;
  background: linear-gradient(160deg, rgba(217,179,108,.08), transparent);
}
.story-panel h3 {
  font-size: 16px; color: var(--gold); letter-spacing: .35em;
  border-bottom: none; padding-bottom: 6px; margin: 0 0 14px;
}
.story-text {
  font-size: 17px; line-height: 1.75; color: var(--text);
  margin: 0; white-space: normal;
  letter-spacing: .02em;
}

/* 右栏徽章墙：分四类 */
.badge-cats { display: flex; flex-direction: column; gap: 9px; }
.badge-cat-title {
  font-size: 12px; color: var(--gold); letter-spacing: .12em;
  margin-bottom: 5px;
}
.badge-cat-chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* 属性明细双栏 */
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.detail-col h4 {
  font-size: 13px; color: var(--gold); letter-spacing: .15em;
  border-bottom: 1px solid var(--panel-line); padding-bottom: 5px; margin: 8px 0 8px;
}
.detail-row {
  display: grid; grid-template-columns: 76px 1fr 30px;
  align-items: center; gap: 8px; margin: 6px 0;
  font-size: 12.5px;
}
.detail-row .d-name { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-row .d-val { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.d-bar { height: 6px; background: var(--bar-bg); overflow: hidden; border-radius: 3px; }
.d-bar i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim, #8a6a2f), var(--gold, #d9b36c)); }

.radar-box { margin-top: 26px; display: flex; align-items: center; justify-content: center; }
#radar { width: 100%; max-width: 430px; height: auto; }

.wall-badge { font-size: 12px; padding: 5px 11px; border: 1px solid; letter-spacing: .06em; }
.wall-badge.b-紫名人堂 { color: var(--r-purple); border-color: var(--r-purple); box-shadow: 0 0 12px rgba(180,92,255,.3); }
.wall-badge.b-金 { color: var(--r-gold); border-color: var(--r-gold); box-shadow: 0 0 12px rgba(245,197,66,.25); }
.wall-badge.b-银 { color: #aab4c8; border-color: #aab4c8; }
body.light .wall-badge.b-银 { color: #5d6677; }
.wall-badge.b-铜 { color: #d08a4e; border-color: #d08a4e; }
.badge-empty { font-size: 13px; color: var(--text-dim); }

.card-actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sync-status { margin-top: 14px; text-align: center; font-size: 13px; color: var(--text-dim); letter-spacing: .1em; min-height: 18px; }

/* ══════════ 弹窗 ══════════ */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  width: min(580px, 92vw); max-height: 76vh; overflow: hidden;
  background: var(--panel-solid); border: 1px solid var(--panel-line);
  display: flex; flex-direction: column;
}
.modal-head {
  padding: 16px 20px; color: var(--gold); letter-spacing: .3em; font-size: 15px;
  border-bottom: 1px solid var(--panel-line); display: flex; justify-content: space-between;
}
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 24px; cursor: pointer; }
.modal-close:hover { color: var(--gold); }
.modal-body { overflow-y: auto; padding: 14px 20px; }
.archive-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 42px 14px 10px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background .25s;
}
.archive-item:hover { background: rgba(217,179,108,.08); }
.archive-item .ai-name { letter-spacing: .12em; font-size: 15px; }
.archive-item .ai-ovr { color: var(--gold-bright); font-size: 22px; }
.archive-item .ai-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.archive-empty { text-align: center; color: var(--text-dim); padding: 40px 0; font-size: 14px; letter-spacing: .2em; }

/* ══════════ 响应式（仅 ≤768px 生效，桌面端不受影响） ══════════ */
@media (max-width: 768px) {
  .screen { padding: 24px 14px; align-items: flex-start; }
  /* 滚动修复：内容不高时由 margin:auto 垂直居中；内容超高时自动收缩、可从顶部完整滚动 */
  .screen > * { margin: auto; }
  .btn-gold, .btn-ghost { letter-spacing: .18em; }
  #attrPanel { width: 100vw; padding-top: calc(24px + env(safe-area-inset-top)); }
  .opt-card .opt-desc { font-size: 14px; }
  /* 人生选择题小屏紧凑化：压叙事区与选项卡间距，5 个选项尽量一屏显示、少下拉 */
  .phase-head { margin-bottom: 12px; }
  .narrative .q-title { font-size: 15px; }
  .narrative .q-text { margin-top: 6px; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.7; min-height: 0; }
  .gain-chips { margin-top: 10px; min-height: 22px; }
  .options { margin-top: 12px; gap: 9px; }
  .opt-card { padding: 13px 16px; }
  .opt-card .opt-name { font-size: 18px; }
  .opt-card .opt-desc { margin-top: 4px; font-size: 13px; line-height: 1.6; }
  .continue-row { margin-top: 12px; }
  #topControls { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
  #musicPanel { top: calc(62px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }

  /* 触摸目标放大（≥44px 指尖友好） */
  .btn-gold, .btn-ghost { min-height: 48px; }
  .trait-card { padding: 24px 18px 20px; }
  .name-row { flex-direction: column; align-items: stretch; }
  #playerName { width: 100%; text-align: center; }

  /* 结算球员卡小屏重排 */
  .player-card { padding: 24px 16px 20px; }
  .card-name { font-size: 24px; letter-spacing: .18em; text-indent: .18em; }
  .card-phys { font-size: 13px; }
  .card-overall span { font-size: 64px; }
  .card-tier { font-size: 17px; }
  #radar { max-width: 330px; }
  .card-actions { flex-direction: column; }
  .card-actions .btn-gold, .card-actions .btn-ghost { width: 100%; }

  /* 性能：手机端停掉胶片噪点无限动画（省电防卡顿），静态颗粒保留 */
  .film-grain { animation: none; }

  /* 自定义生涯弹窗：footer 常显，属性/徽章列表弹性滚动（修复手机无法点到「完成创建」） */
  .custom-box { max-height: 86vh; }
  .custom-body { flex: 1; min-height: 0; overflow-y: auto; }
  .custom-cols { max-height: none; overflow-y: visible; }

  #panelToggle { padding: 22px 10px; }
}

/* 触屏设备：悬停位移无效，改为点按反馈（不影响桌面鼠标体验） */
@media (hover: none) {
  .opt-card:hover { transform: none; box-shadow: none; }
  .opt-card:active { border-color: var(--gold); border-left-color: var(--gold); background: rgba(217,179,108,.08); }
  .trait-card:hover { transform: none; }
  .trait-card:active { transform: scale(.97); }
  .ctrl-btn:hover { transform: none; }
  .btn-gold:hover { box-shadow: none; }
  button, .opt-card, .trait-card { -webkit-tap-highlight-color: transparent; }
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-line); }

/* 存档档案：删除按钮 + 底部操作区 */
.archive-item { position: relative; }
.archive-del {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(.62);
  color: var(--text-dim, #9aa0ac); font-size: 14px; line-height: 1;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
}
.archive-del:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .1); }
.modal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--panel-line); padding: 12px 16px;
}
.archive-hint { font-size: 12px; opacity: .55; }
.modal-btn {
  background: transparent; color: var(--gold, #d9b36c);
  border: 1px solid var(--panel-line); border-radius: 8px; padding: 6px 12px;
  font-size: 13px; cursor: pointer;
}
.modal-btn:hover { background: rgba(255, 107, 107, .12); color: #ff6b6b; border-color: rgba(255, 107, 107, .4); }

/* ═══ 开始界面：模式选择卡片（创建角色 → 自定义生涯/我的篮球人生） ═══ */
.mode-row {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin: 26px 0 10px; animation: fadeUp .5s ease both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mode-card {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: 240px; padding: 22px 18px; cursor: pointer;
  border: 1px solid var(--panel-line); border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  transition: transform .25s, border-color .25s, background .25s;
}
.mode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 179, 108, .55);
  background: rgba(217, 179, 108, .07);
}
.mode-card .mc-title { font-size: 17px; letter-spacing: .18em; color: var(--gold, #d9b36c); }
.mode-card .mc-desc {
  font-size: 14px; line-height: 1.85; text-align: center;
  color: var(--text); opacity: .82;
}
/* 首页一级入口卡片（创建球员 / 继续生涯）：更宽、标题更醒目 */
.entry-row {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  margin: 30px 0 6px; animation: fadeUp .5s ease both;
}
.mode-card.entry { width: 300px; padding: 30px 22px; }
.mode-card.entry .mc-entry { font-size: 21px; letter-spacing: .14em; }

/* ═══ 自定义生涯 / 选队 modal ═══ */
.custom-box { max-width: 960px; }
.custom-body { display: flex; flex-direction: column; }
.custom-base {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 18px 8px; border-bottom: 1px solid var(--panel-line);
}
.custom-base label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; opacity: .85; }
.custom-base select, .custom-base input {
  padding: 6px 10px; border-radius: 6px; min-width: 120px;
  border: 1px solid var(--panel-line); background: rgba(0, 0, 0, .25); color: inherit;
}
.custom-hint { padding: 8px 18px; font-size: 11px; opacity: .5; }
.custom-cols {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 20px;
  max-height: 52vh; overflow-y: auto; padding: 6px 18px 14px;
}
.c-attr {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px dashed var(--line-soft, rgba(255,255,255,.06));
}
.c-attr .ca-name { flex: 1; font-size: 13px; }
.c-attr .c-num {
  width: 72px; padding: 4px 8px; border-radius: 6px; text-align: center;
  border: 1px solid var(--panel-line); background: rgba(0, 0, 0, .25); color: inherit;
}
.c-attr .c-sel { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--panel-line); background: rgba(0, 0, 0, .25); color: inherit; }

.team-box { max-width: 560px; }
.team-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 8px; }
.team-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; opacity: .9; }
.team-label select, .team-label input {
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--panel-line); background: rgba(0, 0, 0, .25); color: inherit;
}
.team-tip { font-size: 11px; opacity: .5; line-height: 1.7; }
.career-team { font-size: 13px; color: var(--gold, #d9b36c); opacity: .9; letter-spacing: .04em; }
@media (max-width: 860px) { .custom-cols { grid-template-columns: 1fr; } }
.career-box { max-width: 1020px; }
.career-top {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--panel-line);
}
.career-points strong { color: var(--gold-bright, #f0d09a); font-size: 20px; margin-left: 4px; }
.career-spend { font-size: 13px; opacity: .8; }
.career-spend strong { color: var(--gold, #d9b36c); }
.career-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px;
  max-height: 58vh; overflow-y: auto; padding: 10px 18px;
}
.career-attrs { min-width: 0; }
.career-badges { min-width: 0; }
.career-attr {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--line-soft, rgba(255,255,255,.06));
}
.career-attr .ca-name { flex: 0 0 88px; font-size: 13px; letter-spacing: .04em; }
.career-attr .ca-btn {
  width: 26px; height: 26px; line-height: 1; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--panel-line); background: transparent; color: var(--gold, #d9b36c); font-size: 15px;
}
.career-attr .ca-btn:hover:not(:disabled) { background: rgba(217, 179, 108, .12); }
.career-attr .ca-btn:disabled { opacity: .25; cursor: not-allowed; }
.career-attr .ca-val { min-width: 64px; text-align: center; font-size: 15px; }
.career-attr .ca-val.hot { color: var(--gold-bright, #f0d09a); }
.career-attr.draft .ca-val { color: #7ec97e; }
.career-attr .ca-cost { margin-left: auto; font-size: 11px; opacity: .55; }

/* 徽章升级卡片 */
.career-badges .cat-title { margin-top: 2px; }
.cb-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; margin: 0 0 10px;
  border: 1px solid var(--panel-line); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.cb-card.drafted { border-color: rgba(126, 201, 126, .45); }
.cb-card.maxed { opacity: .55; }
.cb-card.blocked { opacity: .42; filter: grayscale(.55); }
.cb-head { display: flex; align-items: center; justify-content: space-between; }
.cb-head .cb-name { font-size: 14px; letter-spacing: .06em; }
.cb-head .cb-tier { font-size: 12px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--panel-line); }
.cb-head .cb-tier.b-传奇 { color: #d47ffe; border-color: rgba(212, 127, 254, .5); }
.cb-head .cb-tier.b-紫名人堂 { color: #c9a2ff; border-color: rgba(201, 162, 255, .4); }
.cb-head .cb-tier.b-金 { color: #f0d09a; border-color: rgba(240, 208, 154, .4); }
.cb-head .cb-tier.b-银 { color: #c8cdd6; border-color: rgba(200, 205, 214, .35); }
.cb-head .cb-tier.b-铜 { color: #d99a6c; border-color: rgba(217, 154, 108, .4); }
.cb-head .cb-tier.b-无 { opacity: .45; }
.cb-info { display: flex; align-items: center; gap: 10px; min-height: 20px; flex-wrap: wrap; }
.cb-info .cb-cost { font-size: 12px; color: var(--gold, #d9b36c); opacity: .9; }
.cb-info .cb-cost.cb-height { color: #ff7a6c; }
.cb-info .cb-req-text {
  font-size: 11px; opacity: .68; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 4px; background: rgba(255, 255, 255, .05);
}
.cb-info .cb-req-text.ok { color: #7ec97e; background: rgba(126, 201, 126, .1); }
.cb-up {
  align-self: stretch; padding: 7px 0; border-radius: 8px; cursor: pointer; font-size: 13px;
  letter-spacing: .15em;
  border: 1px solid var(--panel-line); background: transparent; color: var(--gold, #d9b36c);
  transition: background .2s, border-color .2s;
}
.cb-up.ok:hover:not(:disabled) { background: rgba(217, 179, 108, .16); border-color: rgba(217, 179, 108, .5); }
.cb-up:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 860px) {
  .career-cols { grid-template-columns: 1fr; }
  .career-box { max-width: 92vw; }
}

/* ══════════ 全站交互反馈与动效一致性打磨（v8） ══════════ */
/* 可点元素统一按下反馈：轻缩 + 微下沉，区分“可点”层次 */
.btn-gold:not(:disabled):active,
.btn-ghost:not(:disabled):active,
.mode-card:active,
.opt-card:active,
.cb-up:not(:disabled):active,
.ca-btn:not(:disabled):active,
.caret:active { transform: translateY(2px) scale(.985); }
.mode-card, .cb-card { will-change: transform; }

/* 统一聚焦环：键盘导航可辨识（无障碍 + 层级） */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold, #d9b36c);
  outline-offset: 3px; border-radius: 2px;
}
select:focus-visible, input:focus-visible { outline-offset: 1px; }

/* 弹窗入场：淡入 + 轻微上浮，关闭/遮罩点击仍即时消失 */
.modal { animation: modal-fade .25s ease both; }
.modal-box { animation: modal-pop .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
}

/* 生涯/自定义 modal 内部更新行变化时给出轻微反馈（可点层级更清楚） */
.career-attr.draft, .cb-card.drafted { animation: draft-flash .4s ease; }
@keyframes draft-flash { from { background: rgba(126,201,126,.14); } }

/* 按钮层级：主行动金 / 次行动淡——统一为“聚焦经常用到的用金、辅助用 ghost” */
.archive-item { transition: background .25s, transform .15s; }
.archive-item:active { transform: scale(.992); }

/* 尊重系统“减弱动效”：关闭高频位移动效，保保基本的透明度过渡 */
@media (prefers-reduced-motion: reduce) {
  .screen, .modal, .modal-box, .mode-card, .opt-card,
  .chip, .tier-chip, .cb-card, .career-attr.draft {
    animation: none !important; transition: none !important;
  }
}

/* ══════════ 生涯主界面 Hub（v7 阶段2A） ══════════ */
.hub-inner {
  width: min(880px, 94vw); margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  padding-top: max(56px, 8vh); animation: fadeUp .5s ease both;
}
.hub-head { display: flex; align-items: center; gap: 16px; }
.hub-back {
  background: transparent; border: 1px solid var(--panel-line); border-radius: 8px;
  color: var(--text-dim); font-size: 13px; padding: 7px 14px; cursor: pointer;
  letter-spacing: .1em; transition: color .2s, border-color .2s;
}
.hub-back:hover { color: var(--gold); border-color: var(--panel-line); }
.hub-team { font-size: 18px; letter-spacing: .14em; color: var(--gold-bright, #f2d492); }
.hub-season { margin-left: auto; font-size: 13px; opacity: .65; letter-spacing: .08em; }

/* 球员信息条 + 生涯点数 */
.hub-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid var(--panel-line); border-radius: 14px;
  background: var(--panel); padding: 18px 24px; flex-wrap: wrap;
}
.hub-player { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hub-ovr { text-align: center; flex: 0 0 auto; }
.hub-ovr strong {
  display: block; font-size: 52px; line-height: 1; font-weight: 700;
  color: var(--gold-bright, #f2d492);
  text-shadow: 0 0 24px rgba(217, 179, 108, .35);
}
.hub-ovr em { font-style: normal; font-size: 11px; letter-spacing: .3em; opacity: .55; }
.hub-name { font-size: 22px; letter-spacing: .14em; }
.hub-phys { font-size: 13px; opacity: .7; margin-top: 5px; letter-spacing: .05em; }
.hub-badgeline { font-size: 12px; color: var(--gold, #d9b36c); opacity: .85; margin-top: 4px; letter-spacing: .05em; }
.hub-points { text-align: center; flex: 0 0 auto; }
.hp-label { font-size: 12px; letter-spacing: .3em; opacity: .6; }
.hp-num {
  font-size: 40px; font-weight: 700; line-height: 1.15; margin-top: 2px;
  color: var(--gold-bright, #f2d492); font-variant-numeric: tabular-nums;
}

/* 生涯统计格 */
.hub-stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.hs-cell {
  border: 1px solid var(--panel-line); border-radius: 10px; text-align: center;
  padding: 12px 4px 10px; background: rgba(255, 255, 255, .025);
}
.hs-num { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-label { font-size: 11px; opacity: .55; margin-top: 4px; letter-spacing: .12em; }

/* 菜单 */
.hub-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hub-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 20px 12px 16px; cursor: pointer;
  border: 1px solid var(--panel-line); border-radius: 12px;
  background: rgba(255, 255, 255, .03); color: var(--text);
  font-family: inherit; letter-spacing: .04em;
  transition: transform .22s, border-color .22s, background .22s;
}
.hub-btn:hover:not(.locked) {
  transform: translateY(-4px); border-color: var(--gold, #d9b36c);
  background: rgba(217, 179, 108, .07);
}
.hub-btn:active:not(.locked) { transform: translateY(0); }
.hub-btn.locked { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }
.hb-icon { font-size: 26px; line-height: 1; }
.hb-title { font-size: 16px; letter-spacing: .22em; text-indent: .22em; color: var(--gold-bright, #f2d492); }
.hb-desc { font-size: 11px; opacity: .55; letter-spacing: .03em; }
/* 任务可领取红点（v7 阶段2B） */
.hub-dot {
  display: inline-block; vertical-align: 4px; margin-left: 4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 12px;
  background: #e05d4f; color: #fff; font-size: 12px; font-style: normal;
  font-weight: 700; letter-spacing: 0; text-indent: 0;
  line-height: 20px; text-align: center;
  transform: scale(0); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.hub-dot.show { transform: scale(1); }

/* 主角日志（v7 阶段2E） */
.hub-log {
  border: 1px solid var(--panel-line); border-radius: 12px;
  background: rgba(0, 0, 0, .16); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
}
.hub-log-item {
  padding: 8px 0; border-bottom: 1px dashed var(--line-soft);
}
.hub-log-item:last-child { border-bottom: none; }
.hub-log-date {
  font-size: 11px; color: var(--gold, #d9b36c); opacity: .7;
  letter-spacing: .05em; margin-bottom: 4px;
}
.hub-log-txt {
  font-size: 13px; line-height: 1.6; color: #fff;
  letter-spacing: .02em; opacity: .85;
}
.hub-log-empty { text-align: center; font-size: 13px; opacity: .4; padding: 16px 0; letter-spacing: .1em; }

/* 轻提示 toast（结算到账等） */
.hub-toast {
  position: fixed; left: 50%; bottom: 42px; transform: translate(-50%, 20px);
  z-index: 300; padding: 12px 26px; border-radius: 10px;
  background: var(--panel-solid); border: 1px solid var(--gold, #d9b36c);
  color: var(--gold-bright, #f2d492); font-size: 14px; letter-spacing: .08em;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  max-width: 86vw; text-align: center;
}
.hub-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ══════════ 单场结算 / 赛季总结弹窗（v7 阶段2A） ══════════ */
.stat-box { max-width: 620px; }
.stat-body { padding: 16px 22px 6px; display: flex; flex-direction: column; gap: 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; opacity: .9; letter-spacing: .08em;
}
.stat-field input {
  padding: 10px 12px; border-radius: 8px; font-size: 17px; text-align: center;
  border: 1px solid var(--panel-line); background: rgba(0, 0, 0, .25); color: inherit;
  font-variant-numeric: tabular-nums; font-family: inherit;
}
.stat-field input:focus { border-color: var(--gold, #d9b36c); outline: none; }
.season-games { max-width: 200px; }
.season-tip { font-size: 12px; opacity: .55; line-height: 1.8; letter-spacing: .02em; }

.diff-row { display: flex; gap: 10px; flex-wrap: wrap; }
.diff-chip {
  border: 1px solid var(--panel-line); border-radius: 20px; background: transparent;
  color: var(--text-dim); font-size: 13px; padding: 7px 16px; cursor: pointer;
  font-family: inherit; letter-spacing: .05em; transition: all .2s;
}
.diff-chip:hover { color: var(--gold, #d9b36c); border-color: var(--panel-line); }
.diff-chip.on {
  color: var(--gold-bright, #f2d492); border-color: var(--gold, #d9b36c);
  background: rgba(217, 179, 108, .12); font-weight: 700;
}

.stat-preview {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  border: 1px dashed var(--panel-line); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 8px;
}
.sp-base { font-size: 13px; opacity: .6; font-variant-numeric: tabular-nums; }
.sp-arrow { opacity: .4; }
.sp-final { font-size: 15px; letter-spacing: .06em; }
.sp-final strong {
  font-size: 24px; color: var(--gold-bright, #f2d492); margin: 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ══════════ 任务成就弹窗（v7 阶段2B） ══════════ */
.task-box { max-width: 680px; }
.task-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 22px 0;
}
.task-tab {
  border: 1px solid var(--panel-line); border-radius: 20px; background: transparent;
  color: var(--text-dim); font-size: 13px; padding: 6px 18px; cursor: pointer;
  font-family: inherit; letter-spacing: .08em; transition: all .2s;
}
.task-tab:hover { color: var(--gold, #d9b36c); }
.task-tab.on {
  color: var(--gold-bright, #f2d492); border-color: var(--gold, #d9b36c);
  background: rgba(217, 179, 108, .12); font-weight: 700;
}
.task-note { font-size: 11px; opacity: .45; letter-spacing: .02em; }
.task-list {
  padding: 14px 22px 6px; display: flex; flex-direction: column; gap: 10px;
  max-height: min(56vh, 520px); overflow-y: auto;
}
.task-row {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--panel-line); border-radius: 10px;
  background: rgba(255, 255, 255, .02); padding: 12px 16px;
  transition: border-color .25s;
}
.task-row.done { border-color: rgba(126, 201, 126, .35); }
.task-row.got { opacity: .48; }
/* 勾选框 */
.task-check {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--panel-line); display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: transparent; line-height: 1;
}
.task-check.checked {
  color: #7ec97e; border-color: rgba(126, 201, 126, .55);
  background: rgba(126, 201, 126, .12);
}
/* 名称 / 描述 */
.task-mid { flex: 1; min-width: 150px; }
.task-name { font-size: 14px; letter-spacing: .06em; }
.task-row.done .task-name { color: var(--gold-bright, #f2d492); }
.task-desc { font-size: 11px; opacity: .55; margin-top: 3px; letter-spacing: .02em; }
/* 进度条 */
.task-prog { flex: 1.2; min-width: 140px; display: flex; flex-direction: column; gap: 5px; }
.task-bar { height: 6px; border-radius: 3px; background: var(--bar-bg); overflow: hidden; }
.task-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d9b36c, #f0d09a); transition: width .4s ease; }
.task-row.done .task-fill { background: linear-gradient(90deg, #6fbf73, #8fdc92); }
.task-num { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* 奖励 + 领取 */
.task-right { flex: none; display: flex; align-items: center; gap: 10px; }
.task-reward { font-size: 12px; color: var(--gold, #d9b36c); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.task-claim {
  border: 1px solid var(--panel-line); border-radius: 8px; background: transparent;
  color: var(--text-dim); font-size: 12px; padding: 7px 14px; cursor: pointer;
  font-family: inherit; letter-spacing: .1em; transition: all .2s;
}
.task-claim.ok {
  color: #7ec97e; border-color: rgba(126, 201, 126, .5);
  background: rgba(126, 201, 126, .08); font-weight: 700;
}
.task-claim.ok:hover:not(:disabled) { background: rgba(126, 201, 126, .16); }
.task-claim:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 640px) {
  .task-row { flex-wrap: wrap; }
  .task-prog { order: 3; flex-basis: 100%; }
  .task-right { margin-left: auto; }
}

@media (max-width: 768px) {
  .hub-inner { padding-top: 64px; gap: 14px; }
  .hub-hero { flex-direction: column; align-items: stretch; text-align: center; }
  .hub-player { justify-content: center; }
  .hub-stats { grid-template-columns: repeat(4, 1fr); }
  .hub-menu { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-num { font-size: 32px; }
  .hub-ovr strong { font-size: 44px; }
}

/* ══════════ 生涯场均（v7 阶段2C） ══════════ */
.hub-avg {
  font-size: 14px; letter-spacing: .06em; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 11px 16px; text-align: center;
}
@media (max-width: 480px) { .hub-avg { font-size: 12px; } }

/* ══════════ 赛季结算：两个等宽按钮（v7 阶段2D） ══════════ */
.season-actions { display: flex; gap: 12px; align-items: stretch; }
.season-btn { flex: 1; letter-spacing: .18em; text-indent: 0; padding: 15px 20px; font-size: 14px; text-align: center; }
@media (max-width: 540px) { .season-actions { flex-direction: column; } .season-btn { width: 100%; } }

/* ══════════ 常规赛荣誉弹窗（v7 阶段2D） ══════════ */
.honors-box { width: min(620px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.honors-reflect {
  font-size: 18px; line-height: 2; color: #fff;
  padding: 16px 20px; margin-bottom: 16px;
  background: rgba(217,179,108,.08); border-left: 4px solid var(--gold);
  border-radius: 8px; white-space: pre-line; font-weight: 600;
  text-shadow: 0 0 20px rgba(255,255,255,.3);
}
.honors-groups { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.honor-group { margin-bottom: 18px; }
.hg-title {
  font-size: 13px; color: var(--gold); letter-spacing: .15em;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.hg-items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.hg-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 12px; border: 1px solid var(--line-soft); border-radius: 6px;
  font-size: 13px; transition: all .2s;
}
.hg-item:hover { border-color: var(--gold); background: rgba(217,179,108,.06); }
.hg-item input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer;
}
.hg-item:has(input:checked) {
  border-color: var(--gold); background: rgba(217,179,108,.12);
  box-shadow: 0 0 12px rgba(217,179,108,.18);
}
.hi-name { color: var(--text); letter-spacing: .03em; }
.hi-rwd { color: var(--gold-bright); font-variant-numeric: tabular-nums; font-size: 12px; }

/* ══════════ 季后赛 · 赛季收官（v7 阶段2C） ══════════ */
.playoffs-box { width: min(560px, 94vw); }
.playoffs-tip {
  font-size: 14px; color: var(--text-dim); line-height: 1.8;
  padding: 2px 4px 8px; letter-spacing: .04em;
}
.playoffs-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.po-option { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.po-option input[type="radio"] {
  width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gold); cursor: pointer;
}
.po-box {
  flex: 1; display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 13px 16px; background: rgba(255,255,255,.03);
  transition: border-color .25s, background .25s;
}
.po-option:has(input:checked) .po-box {
  border-color: var(--gold); background: rgba(217,179,108,.1);
  box-shadow: 0 0 16px rgba(217,179,108,.15);
}
.po-name { font-size: 17px; font-weight: 600; color: var(--gold); letter-spacing: .08em; white-space: nowrap; }
.po-desc { font-size: 13px; color: var(--text-dim); }
.po-reward { margin-left: auto; font-size: 13px; color: var(--gold-bright); white-space: nowrap; letter-spacing: .03em; }
@media (max-width: 480px) { .po-box { flex-wrap: wrap; } .po-reward { margin-left: 0; } }

/* ══════════ 季后赛结局黑屏（v7 阶段2C） ══════════ */
.blackout {
  position: fixed; inset: 0; z-index: 200;
  background: #000; display: flex; align-items: center; justify-content: center;
  animation: bo-fade .8s ease;
}
@keyframes bo-fade { from { opacity: 0; } }
.blackout-box {
  max-width: 640px; width: 82vw; text-align: center; color: #ece7da;
  padding: 20px;
}
.bo-title {
  font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: .2em; text-indent: .2em;
  color: var(--gold-bright); margin-bottom: 26px;
  text-shadow: 0 0 40px rgba(217,179,108,.4);
}
.bo-line { font-size: clamp(18px, 2.4vw, 23px); line-height: 2; letter-spacing: .05em; }
.bo-reward { margin-top: 22px; font-size: 15px; color: var(--gold); letter-spacing: .15em; }
.bo-next {
  margin-top: 34px; cursor: pointer; font-family: var(--serif);
  font-size: 15px; letter-spacing: .28em; text-indent: .28em;
  background: transparent; color: #ece7da; border: 1px solid rgba(233,230,222,.35);
  padding: 13px 30px; border-radius: 8px; transition: all .3s;
}
.bo-next:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 24px rgba(217,179,108,.25); }

/* ══════════ 球员足迹弹窗（v7 阶段2E） ══════════ */
.logs-box { max-width: 680px; max-height: 82vh; }
.logs-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--panel-line);
  margin-bottom: 12px;
}
.logs-stat { font-size: 14px; color: var(--gold); letter-spacing: .1em; }
.logs-stat strong { font-size: 18px; color: var(--gold-bright); }
.logs-total-type { font-size: 12px; color: var(--text-dim); }
.logs-list {
  max-height: 52vh; overflow-y: auto; padding: 0 18px;
}
.log-entry {
  padding: 12px 0; border-bottom: 1px dashed var(--line-soft);
}
.log-entry:last-child { border-bottom: none; }
.log-entry-date {
  font-size: 12px; color: var(--gold); opacity: .7;
  letter-spacing: .05em; margin-bottom: 6px;
}
.log-entry-txt {
  font-size: 14px; line-height: 1.7; color: #fff;
  letter-spacing: .02em;
}
.logs-pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 18px; border-top: 1px solid var(--panel-line);
  margin-top: 12px;
}
.pager-btn {
  padding: 8px 18px; border-radius: 6px;
  background: rgba(217,179,108,.1); border: 1px solid var(--panel-line);
  color: var(--text); font-size: 13px; letter-spacing: .05em;
  cursor: pointer; transition: all .2s;
}
.pager-btn:hover:not(:disabled) {
  background: rgba(217,179,108,.2); border-color: var(--gold);
}
.pager-btn:disabled { opacity: .35; cursor: not-allowed; }
.pager-info { font-size: 13px; color: var(--gold); letter-spacing: .1em; min-width: 80px; text-align: center; }
.pager-export {
  margin-left: auto; padding: 8px 20px;
}

/* ══════════ 交易转会（2B） ══════════ */
.trade-box { max-width: 640px; max-height: 86vh; }
.trade-body { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.trade-current {
  font-size: 15px; letter-spacing: .05em; padding: 10px 14px;
  background: rgba(217,179,108,.08); border-left: 4px solid var(--gold);
  border-radius: 8px; color: var(--text);
}
.trade-note { font-size: 13px; opacity: .75; line-height: 1.7; padding: 0 2px; }
.trade-list {
  max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding-right: 4px;
}
.trade-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--panel-line); border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.trade-info { min-width: 118px; flex: 0 0 auto; }
.trade-name { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.trade-tag {
  font-size: 11px; color: var(--gold); border: 1px solid rgba(217,179,108,.35);
  padding: 0 6px; border-radius: 20px; margin-top: 2px; display: inline-block;
}
.trade-tier { flex: 1; height: 8px; border-radius: 20px; background: var(--bar-bg); overflow: hidden; }
.trade-fill { height: 100%; background: linear-gradient(90deg, #8a6a2f, var(--gold-bright)); border-radius: 20px; }
.trade-go { flex: 0 0 auto; padding: 6px 14px; font-size: 13px; }
.trade-go.dis:disabled { opacity: .35; cursor: not-allowed; }

/* ══════════ 光荣退役 · 名人堂（2B） ══════════ */
.retire-box { max-width: 560px; max-height: 88vh; overflow: hidden; }
.retire-preview { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.retire-q { font-size: 17px; font-weight: 600; line-height: 1.8; color: var(--text); }
.retire-hint { font-size: 13px; opacity: .72; line-height: 1.7; }
.hof-wrap { padding: 6px 16px 8px; overflow-y: auto; max-height: 60vh; text-align: center; }
.hof { text-align: center; }
.hof-cup { font-size: 56px; margin: 4px 0 6px; filter: drop-shadow(0 0 22px rgba(242,212,146,.5)); }
.hof-title {
  font-size: 26px; font-weight: 700; letter-spacing: .12em; color: var(--gold-bright);
  text-shadow: 0 0 30px rgba(242,212,146,.35);
}
.hof-line { margin-top: 6px; font-size: 14px; opacity: .78; }
.hof-grid {
  margin: 20px auto 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 480px;
}
.hof-cell {
  padding: 10px 6px; border: 1px solid var(--panel-line); border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.hof-num { font-size: 19px; font-weight: 700; color: var(--gold-bright); }
.hof-label { font-size: 12px; opacity: .7; margin-top: 2px; }
.hof-teams, .hof-ach { margin-top: 12px; font-size: 14px; opacity: .82; line-height: 1.8; }
.hof-ach { color: var(--gold); }
@media (max-width: 520px) { .hof-grid { grid-template-columns: repeat(3, 1fr); } }

/* ══════════ 成就解锁特效（2B） ══════════ */
.ach-flash {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 215, 130, .18), transparent 58%);
  opacity: 0;
}
.ach-flash.show { animation: ach-flash .9s ease forwards; }
@keyframes ach-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.ach-flash-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 44px; border-radius: 18px;
  border: 1px solid rgba(242,212,146,.5);
  background: linear-gradient(160deg, rgba(20,20,12,.92), rgba(36,28,12,.96));
  box-shadow: 0 0 60px rgba(242,212,146,.35), inset 0 0 40px rgba(255,220,150,.12);
}
body.light .ach-flash-card {
  background: linear-gradient(160deg, #fffaf0, #f6ead0);
}
.ach-fx-cup { font-size: 52px; animation: ach-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.ach-fx-name { font-size: 24px; font-weight: 700; letter-spacing: .1em; color: var(--gold-bright); }
.ach-fx-sub { font-size: 13px; opacity: .8; letter-spacing: .3em; }
@keyframes ach-pop {
  0% { transform: scale(.3) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ══════════ 荣誉殿堂（2B） ══════════ */
.honor-box { max-width: 620px; max-height: 86vh; overflow: hidden; }
.honor-total {
  padding: 4px 18px 2px; font-size: 15px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold-bright); text-shadow: 0 0 18px rgba(242,212,146,.3);
}
.honor-body {
  padding: 8px 18px 4px; overflow-y: auto; max-height: 62vh;
  display: flex; flex-direction: column; gap: 14px;
}
.honor-wall-group { border-top: 1px dashed var(--panel-line); padding-top: 12px; }
.honor-wall-group:first-child { border-top: none; padding-top: 4px; }
.howg-title {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; opacity: .85;
  color: var(--gold); margin-bottom: 8px;
}
.howg-items { display: flex; flex-direction: column; gap: 6px; }
.how-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--panel-line); border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.how-item:hover { border-color: rgba(242,212,146,.45); background: rgba(255,255,255,.04); }
.how-name { font-size: 14px; font-weight: 600; }
.how-x {
  font-size: 13px; font-weight: 800; color: var(--gold-bright);
  background: rgba(242,212,146,.12); border-radius: 20px; padding: 1px 9px; flex: 0 0 auto;
}
.how-yrs { flex: 1; font-size: 12px; opacity: .7; text-align: right; letter-spacing: .05em; }
.howg-empty { font-size: 12px; opacity: .4; padding: 2px 4px; }
.honor-wall-empty {
  padding: 26px 0; text-align: center; font-size: 14px; opacity: .65; letter-spacing: .1em;
}

/* ══════════ 手机竖屏紧凑化（≤480 / ≤400，桌面端不受影响） ══════════ */
@media (max-width: 480px) {
  .game-title { font-size: 30px; }
  .game-subtitle { font-size: 13px; }
  .intro-text { font-size: 14px; line-height: 1.8; }
  .mode-card.entry { width: 100%; max-width: 340px; padding: 24px 16px; }
  .card-overall span { font-size: 56px; }
  .hub-ovr strong { font-size: 44px; }
  .hp-num { font-size: 34px; }
  .hub-name { font-size: 19px; }
  .attr-row { grid-template-columns: 58px 24px 1fr; }
  .modal-box { max-width: 96vw; max-height: 86vh; }
}
@media (max-width: 400px) {
  .hub-stats { grid-template-columns: repeat(3, 1fr); }
  .card-overall span { font-size: 50px; }
  .hs-num { font-size: 15px; }
  .how-item { flex-wrap: wrap; }
  .how-yrs { flex-basis: 100%; text-align: left; padding-top: 2px; }
}