/* ========================================================================
   王者荣耀 H5 · 界面样式
   深蓝金配色、切角面板、手机横屏 HUD；纯 CSS，无外部字体/图片。
   ======================================================================== */
:root {
  --bg: #050b14;
  --bg2: #081523;
  --panel: rgba(7, 18, 31, 0.92);
  --panel2: rgba(10, 26, 43, 0.88);
  --line: rgba(232, 196, 106, 0.28);
  --line2: rgba(126, 180, 220, 0.18);
  --gold: #e8c46a;
  --gold2: #ffdf9a;
  --golddeep: #a77b2e;
  --cyan: #58c8ff;
  --cyan2: #a8e8ff;
  --red: #ff6253;
  --green: #69e0a0;
  --ink: #eef4fb;
  --muted: #9fb0c4;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "KaiTi", "SimSun", serif;
  --sans: "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); }
body { user-select: none; -webkit-user-select: none; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--cyan); text-decoration: none; }
.hidden { display: none !important; }
.layer { position: fixed; inset: 0; }
#app { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #102840 0%, #050b14 70%); }
#world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.screen-layer { z-index: 10; pointer-events: none; }
.hud-layer { z-index: 20; pointer-events: none; }
.overlay-layer { z-index: 40; pointer-events: none; }
.toast-layer { z-index: 60; pointer-events: none; }
.screen-layer > *, .overlay-layer > * { pointer-events: auto; }

/* 通用 */
.gold-text { background: linear-gradient(180deg, #fff4cf 0%, #f1d488 38%, #c99a45 70%, #8a5d1e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.serif { font-family: var(--serif); letter-spacing: .08em; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,44,68,.95), rgba(9,22,38,.95)); color: var(--ink); border-radius: 4px; font-weight: 600; letter-spacing: .04em; transition: .18s; position: relative; }
.btn:hover { border-color: var(--gold); color: var(--gold2); box-shadow: 0 0 18px rgba(232,196,106,.15); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: linear-gradient(180deg, #ffe6a4 0%, #e8c46a 35%, #b8893a 100%); color: #23180a; border: 1px solid #ffe9b0; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: 0 6px 22px rgba(232,196,106,.25), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-gold:hover { color: #1a1004; filter: brightness(1.08); box-shadow: 0 8px 30px rgba(232,196,106,.4); }
.btn-blue { background: linear-gradient(180deg, #4fc3ff, #1c6fb0); border-color: #8fe0ff; color: #fff; }
.btn-danger { background: linear-gradient(180deg, #ff8a7a, #a33026); border-color: #ffb3a6; }
.btn-ghost { background: rgba(8,20,34,.6); border-color: var(--line2); }
.btn-lg { min-height: 54px; padding: 0 32px; font-size: 18px; border-radius: 5px; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(7,18,31,.76); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gold2); transition: .18s; }
.icon-btn:hover { border-color: var(--gold); background: rgba(30,54,78,.9); transform: rotate(8deg); }
.panel { background: linear-gradient(180deg, rgba(9,24,41,.95), rgba(5,13,24,.96)); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--gold); opacity: .7; pointer-events: none; }
.panel::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.panel::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line2); border-radius: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.tag.gold { color: var(--gold); border-color: var(--line); }
.kbd { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 5px; border: 1px solid rgba(255,255,255,.22); border-bottom-width: 2px; border-radius: 3px; background: rgba(255,255,255,.06); font-size: 11px; color: #dbe8f6; }

/* 启动 */
.boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 42%, #123553 0%, #071321 48%, #03070d 100%); overflow: hidden; }
.boot::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(232,196,106,.12) 82%, transparent 86% 100%); animation: spin 26s linear infinite; }
.boot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(0,0,0,.55) 78%); }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-card { position: relative; z-index: 2; text-align: center; width: min(680px, 90vw); }
.boot-mark { width: 92px; height: 92px; margin: 0 auto 14px; border: 1px solid rgba(232,196,106,.45); transform: rotate(45deg); display: grid; place-items: center; box-shadow: 0 0 50px rgba(232,196,106,.14), inset 0 0 30px rgba(232,196,106,.08); }
.boot-mark span { transform: rotate(-45deg); font-family: var(--serif); font-size: 44px; color: var(--gold); text-shadow: 0 0 24px rgba(232,196,106,.55); }
.boot h1 { margin: 0; font-family: var(--serif); font-size: clamp(42px, 8vw, 82px); letter-spacing: .18em; font-weight: 700; }
.boot .sub { margin: 4px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .5em; text-transform: uppercase; }
.boot .ver { margin-top: 22px; color: #6f849b; font-size: 12px; letter-spacing: .18em; }
.boot-bar { width: min(460px, 80vw); height: 3px; margin: 26px auto 10px; background: rgba(255,255,255,.08); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5d1e, #ffe6a4, #8a5d1e); box-shadow: 0 0 12px rgba(232,196,106,.7); transition: width .4s; }
.boot-note { color: var(--muted); font-size: 12px; letter-spacing: .12em; }
.boot-skip { position: absolute; right: 24px; bottom: 22px; z-index: 3; }
.boot-grain { position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px); background-size: 4px 4px; }

/* 大厅 */
.lobby { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, rgba(3,9,16,.18), rgba(3,9,16,.55) 55%, rgba(3,9,16,.92)); }
.lobby::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,9,16,.9) 0%, rgba(3,9,16,.42) 38%, transparent 62%, rgba(3,9,16,.55) 100%); pointer-events: none; }
.lobby-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 74px; display: flex; align-items: center; padding: calc(10px + var(--safe-top)) 26px 0 calc(22px + var(--safe-left)); gap: 26px; background: linear-gradient(180deg, rgba(3,9,16,.82), transparent); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.brand-mark { width: 38px; height: 38px; border: 1px solid rgba(232,196,106,.6); transform: rotate(45deg); display: grid; place-items: center; background: rgba(232,196,106,.06); }
.brand-mark i { transform: rotate(-45deg); color: var(--gold); font-style: normal; font-family: var(--serif); font-size: 20px; }
.brand-name { font-family: var(--serif); font-size: 24px; letter-spacing: .16em; font-weight: 700; line-height: 1; }
.brand-sub { margin-top: 3px; font-size: 9px; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; }
.lobby-nav { display: flex; gap: 4px; height: 46px; align-items: stretch; }
.lobby-nav a { display: flex; align-items: center; padding: 0 16px; color: #c2d2e2; font-size: 13px; letter-spacing: .12em; border-bottom: 2px solid transparent; transition: .18s; }
.lobby-nav a:hover, .lobby-nav a.on { color: var(--gold2); border-bottom-color: var(--gold); background: linear-gradient(180deg, transparent, rgba(232,196,106,.06)); }
.lobby-top .grow { flex: 1; }
.player-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--line2); background: rgba(5,14,25,.7); border-radius: 2px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle at 35% 30%, #3d6f9d, #0c1c2e); display: grid; place-items: center; font-family: var(--serif); color: var(--gold2); font-size: 16px; }
.player-chip .nm { font-size: 13px; font-weight: 600; }
.player-chip .lv { font-size: 10px; color: var(--gold); letter-spacing: .08em; }
.currency { display: flex; align-items: center; gap: 5px; color: var(--gold2); font-size: 12px; }
.lobby-rail { position: absolute; z-index: 3; left: calc(16px + var(--safe-left)); top: 112px; bottom: 90px; width: 68px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.rail-item { width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #90a4b9; border: 1px solid transparent; transition: .18s; font-size: 10px; }
.rail-item b { font-size: 20px; font-weight: 400; line-height: 1; filter: grayscale(.3); }
.rail-item:hover, .rail-item.on { color: var(--gold2); border-color: var(--line); background: linear-gradient(180deg, rgba(232,196,106,.1), rgba(0,0,0,0)); }
.lobby-main { position: absolute; z-index: 4; left: max(96px, 9vw); top: 112px; bottom: 92px; width: min(560px, 44vw); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.lobby-head .eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .35em; }
.lobby-head h2 { margin: 6px 0 4px; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); letter-spacing: .12em; line-height: 1.1; }
.lobby-head p { margin: 0; color: #a9bacb; font-size: 12px; letter-spacing: .18em; }
.mode-card { position: relative; padding: 18px 20px; background: linear-gradient(100deg, rgba(15,42,68,.92), rgba(7,18,31,.8)); border: 1px solid var(--line2); display: flex; gap: 18px; align-items: center; overflow: hidden; cursor: pointer; transition: .2s; }
.mode-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(232,196,106,.12), transparent 40%); opacity: 0; transition: .2s; }
.mode-card:hover, .mode-card.on { border-color: var(--line); transform: translateX(4px); }
.mode-card:hover::before, .mode-card.on::before { opacity: 1; }
.mode-icon { width: 68px; height: 68px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 30px; color: var(--gold); background: radial-gradient(circle, rgba(232,196,106,.15), transparent 70%); flex: none; }
.mode-body { flex: 1; min-width: 0; }
.mode-body h3 { margin: 0 0 3px; font-family: var(--serif); font-size: 20px; letter-spacing: .12em; }
.mode-body p { margin: 0; color: #93a8bd; font-size: 11px; line-height: 1.6; }
.mode-meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mode-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mode-cta small { color: var(--muted); font-size: 10px; }
.lobby-actions { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.start-btn { position: relative; flex: 1; height: 62px; font-family: var(--serif); font-size: 24px; letter-spacing: .32em; padding-left: .32em; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.start-btn::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(35,24,10,.28); clip-path: inherit; pointer-events: none; }
.lobby-note { color: #6f849b; font-size: 10px; line-height: 1.6; letter-spacing: .03em; max-width: 520px; }
.lobby-showcase { position: absolute; z-index: 2; right: 3vw; bottom: 92px; width: min(420px, 32vw); pointer-events: none; }
.showcase-name { text-align: right; }
.showcase-name .role { color: var(--gold); font-size: 11px; letter-spacing: .28em; }
.showcase-name h3 { margin: 4px 0 2px; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 46px); letter-spacing: .14em; }
.showcase-name p { margin: 0; color: #a9bacb; font-size: 11px; letter-spacing: .1em; }
.showcase-quote { margin-top: 12px; color: #d5e2ef; font-family: var(--serif); font-size: 12px; letter-spacing: .08em; text-align: right; opacity: .85; }
.lobby-bottom { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 calc(24px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(24px + var(--safe-left)); background: linear-gradient(0deg, rgba(3,9,16,.92), transparent); color: #71869b; font-size: 10px; letter-spacing: .08em; }
.lobby-bottom .ticker { flex: 1; border-left: 2px solid var(--golddeep); padding-left: 10px; color: #b6c7d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-bottom .ticker b { color: var(--gold); margin-right: 8px; }
.lobby-bottom .ver { font-variant-numeric: tabular-nums; }

/* 英雄选择 */
.select { position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 35%, rgba(10,30,50,.2), rgba(3,8,14,.88) 70%), linear-gradient(90deg, rgba(3,8,14,.9), transparent 40%, rgba(3,8,14,.86)); }
.select-top { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 74px; display: flex; align-items: center; gap: 18px; padding: calc(12px + var(--safe-top)) 24px 0; background: linear-gradient(180deg, rgba(3,8,14,.85), transparent); }
.select-title { font-family: var(--serif); font-size: 18px; letter-spacing: .18em; color: var(--gold2); }
.select-timer { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.timer-ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; color: var(--gold2); font-variant-numeric: tabular-nums; background: conic-gradient(var(--gold) var(--p, 0%), rgba(255,255,255,.08) 0); position: relative; }
.timer-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #07131f; }
.timer-ring span { position: relative; z-index: 1; }
.select-teams { position: absolute; z-index: 4; top: 88px; left: 24px; right: 24px; bottom: 236px; display: grid; grid-template-columns: 240px 1fr 240px; gap: 18px; pointer-events: none; }
.team-panel { pointer-events: auto; align-self: start; }
.team-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.team-head b { font-family: var(--serif); font-size: 15px; letter-spacing: .06em; }
.team-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.team-head.red .dot { background: var(--red); box-shadow: 0 0 12px var(--red); }
.team-slots { display: flex; flex-direction: column; gap: 7px; }
.team-slot { display: flex; align-items: center; gap: 9px; height: 52px; padding: 6px 8px; border: 1px solid rgba(126,180,220,.14); background: linear-gradient(90deg, rgba(9,24,41,.82), rgba(9,24,41,.28)); transition: .18s; }
.team-slot.filled { border-color: var(--line2); }
.team-slot.me { border-color: var(--gold); background: linear-gradient(90deg, rgba(232,196,106,.14), rgba(9,24,41,.3)); }
.slot-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: radial-gradient(circle at 35% 30%, #2a4d6b, #0a1824); display: grid; place-items: center; font-family: var(--serif); color: var(--gold2); flex: none; }
.slot-info { min-width: 0; }
.slot-info .nm { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-info .st { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.slot-role { margin-left: auto; color: var(--gold); font-size: 9px; writing-mode: vertical-rl; letter-spacing: .1em; }
.select-center { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px; }
.select-hero-name { text-align: center; margin-bottom: 12px; }
.select-hero-name .role { color: var(--gold); font-size: 11px; letter-spacing: .3em; }
.select-hero-name h2 { margin: 4px 0; font-family: var(--serif); font-size: clamp(34px, 4.4vw, 58px); letter-spacing: .16em; }
.select-hero-name .quote { color: #c4d4e4; font-family: var(--serif); font-size: 12px; letter-spacing: .1em; opacity: .8; }
.hero-detail { pointer-events: auto; width: min(360px, 100%); background: linear-gradient(180deg, rgba(8,22,38,.88), rgba(4,10,18,.92)); border: 1px solid var(--line2); padding: 12px 14px; }
.hero-detail h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 13px; letter-spacing: .16em; color: var(--gold2); }
.skill-row { display: flex; gap: 9px; margin-bottom: 8px; align-items: flex-start; }
.skill-glyph { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--serif); color: var(--gold2); font-size: 16px; background: radial-gradient(circle at 35% 30%, rgba(232,196,106,.3), rgba(7,18,31,.9)); }
.skill-info .t { font-size: 11px; color: #e8f1fb; }
.skill-info .d { color: var(--muted); font-size: 10px; line-height: 1.5; }
.passive-row { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; margin-top: 4px; }
.select-bottom { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 228px; padding: 10px calc(20px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(20px + var(--safe-left)); background: linear-gradient(0deg, rgba(3,8,14,.98), rgba(3,8,14,.86) 70%, transparent); display: flex; flex-direction: column; gap: 9px; }
.select-toolbar { display: flex; align-items: center; gap: 8px; }
.filter-btn { padding: 5px 12px; border: 1px solid transparent; color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.filter-btn.on { color: var(--gold2); border-color: var(--line); background: rgba(232,196,106,.08); }
.filter-btn:hover { color: var(--gold2); }
.hero-grid { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; overflow-y: auto; padding-right: 2px; }
.hero-card { position: relative; min-height: 92px; border: 1px solid rgba(126,180,220,.16); background: linear-gradient(160deg, var(--c1, #17334d), var(--c2, #07131f)); overflow: hidden; cursor: pointer; transition: .18s; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 55%); }
.hero-card .glyph { position: absolute; right: -4px; bottom: -12px; font-family: var(--serif); font-size: 62px; color: rgba(255,255,255,.14); line-height: 1; }
.hero-card .cname { position: absolute; left: 8px; bottom: 7px; z-index: 2; font-family: var(--serif); font-size: 13px; letter-spacing: .08em; }
.hero-card .crole { position: absolute; left: 8px; top: 7px; z-index: 2; font-size: 9px; color: rgba(255,255,255,.72); }
.hero-card:hover { transform: translateY(-3px); border-color: var(--line); }
.hero-card.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 26px rgba(232,196,106,.2); transform: translateY(-3px); }
.hero-card.on::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.4); z-index: 1; }
.select-actions { display: flex; gap: 10px; align-items: center; }
.summoner-pick { display: flex; gap: 6px; }
.summoner-btn { width: 42px; height: 42px; border: 1px solid var(--line2); border-radius: 50%; background: rgba(7,18,31,.8); color: var(--muted); font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.summoner-btn b { font-size: 16px; color: var(--gold2); font-weight: 400; }
.summoner-btn.on { border-color: var(--gold); color: var(--gold2); box-shadow: 0 0 14px rgba(232,196,106,.2); }

/* 加载 */
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #102c48, #040a12 70%); }
.loading-vs { display: flex; align-items: center; gap: clamp(20px, 6vw, 90px); width: min(1000px, 90vw); }
.loading-team { flex: 1; }
.loading-team.red { text-align: right; }
.loading-team h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 24px; letter-spacing: .18em; color: var(--cyan2); }
.loading-team.red h3 { color: #ffb3a6; }
.loading-heroes { display: flex; gap: 6px; justify-content: flex-start; }
.loading-team.red .loading-heroes { justify-content: flex-end; }
.loading-hero { width: 54px; height: 64px; border: 1px solid var(--line2); background: linear-gradient(160deg, #1a3b58, #07131f); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-family: var(--serif); font-size: 11px; color: #dce8f4; }
.vs-badge { font-family: var(--serif); font-size: clamp(42px, 6vw, 74px); color: var(--gold); text-shadow: 0 0 30px rgba(232,196,106,.4); letter-spacing: .1em; }
.loading h2 { margin: 28px 0 6px; font-family: var(--serif); font-size: 30px; letter-spacing: .3em; }
.loading p { color: var(--muted); font-size: 12px; letter-spacing: .12em; margin: 0 0 18px; }
.loading-bar { width: min(520px, 70vw); height: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.loading-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5d1e, #ffe6a4, #8a5d1e); transition: width .2s; }
.loading-tip { margin-top: 16px; color: #8196aa; font-size: 11px; letter-spacing: .08em; max-width: 70vw; text-align: center; }

/* 对局 HUD */
.hud { position: absolute; inset: 0; font-size: 12px; pointer-events: none; }
.hud * { pointer-events: none; }
.hud button, .hud .interactive, .hud canvas, .hud .skill-btn, .hud .joy-base { pointer-events: auto; }
.hud-top { position: absolute; top: calc(10px + var(--safe-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; height: 54px; background: linear-gradient(180deg, rgba(4,12,20,.92), rgba(4,12,20,.55)); border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.35); }
.score-team { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-width: 116px; height: 100%; }
.score-team.red { flex-direction: row-reverse; }
.score-team .k { font-size: 26px; font-weight: 800; color: var(--cyan2); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(88,200,255,.35); }
.score-team.red .k { color: #ffd0c8; text-shadow: 0 0 16px rgba(255,98,83,.35); }
.score-team .n { font-size: 10px; color: var(--muted); letter-spacing: .12em; writing-mode: vertical-rl; }
.score-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 0 18px; border-left: 1px solid var(--line2); border-right: 1px solid var(--line2); background: rgba(232,196,106,.04); min-width: 112px; }
.score-mid .t { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--gold2); letter-spacing: .08em; }
.score-mid .s { font-size: 9px; color: var(--muted); letter-spacing: .2em; }
.top-actions { position: absolute; top: calc(10px + var(--safe-top)); right: calc(14px + var(--safe-right)); display: flex; gap: 7px; }
.minimap-wrap { position: absolute; top: calc(76px + var(--safe-top)); left: calc(14px + var(--safe-left)); width: 172px; height: 172px; padding: 4px; background: rgba(4,12,20,.86); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.minimap-wrap::before { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
#minimap { width: 162px; height: 162px; display: block; cursor: crosshair; }
.minimap-meta { position: absolute; left: 8px; bottom: 6px; right: 8px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .06em; text-shadow: 0 1px 2px #000; }
.killfeed { position: absolute; top: calc(76px + var(--safe-top)); right: calc(14px + var(--safe-right)); width: 286px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.kill-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: linear-gradient(90deg, transparent, rgba(4,12,20,.8)); border-right: 2px solid var(--line); font-size: 10px; animation: feedIn .25s ease-out; }
.kill-item .kb { color: var(--cyan2); }
.kill-item .kr { color: #ffb3a6; }
.kill-item .vs { color: var(--muted); font-size: 9px; }
@keyframes feedIn { from { opacity: 0; transform: translateX(14px); } }
.announce { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; min-width: 300px; opacity: 0; transition: opacity .3s, transform .3s; }
.announce.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.announce .a1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 46px); letter-spacing: .2em; color: var(--gold2); text-shadow: 0 2px 20px rgba(232,196,106,.45), 0 2px 0 #3a2508; }
.announce .a2 { color: #c7d8e8; font-size: 12px; letter-spacing: .12em; margin-top: 2px; }
.announce.red .a1 { color: #ffcfc8; text-shadow: 0 2px 20px rgba(255,98,83,.5); }
.announce.blue .a1 { color: #bfeaff; text-shadow: 0 2px 20px rgba(88,200,255,.5); }
.objective-bar { position: absolute; top: calc(72px + var(--safe-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 14px; padding: 4px 14px; background: rgba(4,12,20,.65); border: 1px solid rgba(126,180,220,.14); color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.objective-bar b { color: var(--gold); font-weight: 600; }
.player-panel { position: absolute; left: calc(18px + var(--safe-left)); bottom: calc(18px + var(--safe-bottom)); width: 318px; height: 92px; display: flex; gap: 10px; padding: 8px; background: linear-gradient(90deg, rgba(4,12,20,.92), rgba(4,12,20,.45)); border: 1px solid var(--line2); }
.hero-portrait { width: 74px; height: 74px; flex: none; border: 1px solid var(--line); background: radial-gradient(circle at 40% 30%, #2b5a7f, #07131f); position: relative; overflow: hidden; }
.hero-portrait .hp-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 30px; color: rgba(255,255,255,.35); }
.hero-portrait .hlevel { position: absolute; right: 2px; bottom: 2px; min-width: 20px; height: 18px; padding: 0 4px; background: var(--gold); color: #221607; font-weight: 800; font-size: 11px; display: grid; place-items: center; border-radius: 2px; }
.pp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pp-name { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pp-name .kda { margin-left: auto; color: var(--muted); font-size: 10px; }
.pp-name .kda b { color: var(--gold2); font-weight: 600; }
.bar { position: relative; height: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(0,0,0,.4); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; transition: width .15s linear; }
.bar.hp i { background: linear-gradient(90deg, #2bb673, #7ff0b0); }
.bar.mp i { background: linear-gradient(90deg, #2d6bd6, #7fc8ff); }
.bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; font-size: 8px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px #000; }
.skillbar { position: absolute; right: calc(22px + var(--safe-right)); bottom: calc(20px + var(--safe-bottom)); width: 300px; height: 210px; }
.skill-btn { position: absolute; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(232,196,106,.45); background: radial-gradient(circle at 35% 30%, rgba(28,62,92,.98), rgba(5,14,24,.98)); color: var(--gold2); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 18px rgba(88,200,255,.08); transition: transform .1s; touch-action: none; }
.skill-btn:active { transform: scale(.94); }
.skill-btn .sg { font-family: var(--serif); font-size: 23px; line-height: 1; filter: drop-shadow(0 0 8px rgba(232,196,106,.35)); }
.skill-btn .sk { font-size: 8px; color: var(--muted); letter-spacing: .08em; margin-top: 3px; }
.skill-btn .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.7); pointer-events: none; }
.skill-btn .cdtxt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.skill-btn.ult { border-color: rgba(255,211,110,.7); box-shadow: 0 0 24px rgba(255,211,110,.16), inset 0 0 22px rgba(255,211,110,.1); }
.skill-btn.locked { filter: grayscale(.8); opacity: .55; }
.skill-btn.no-mana { border-color: rgba(90,150,255,.35); }
.skill-btn.q { right: 96px; bottom: 34px; }
.skill-btn.w { right: 162px; bottom: 86px; }
.skill-btn.e { right: 96px; bottom: 112px; width: 70px; height: 70px; }
.skill-btn.e .sg { font-size: 27px; }
.attack-btn { position: absolute; right: 18px; bottom: 16px; width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(255,211,110,.55); background: radial-gradient(circle at 35% 30%, rgba(201,154,69,.95), rgba(86,55,16,.98)); color: #fff4d4; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 28px rgba(232,196,106,.22), inset 0 0 22px rgba(255,255,255,.14); }
.attack-btn b { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.attack-btn span { font-size: 9px; letter-spacing: .1em; }
.summoner-skill { position: absolute; right: 186px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(5,14,24,.9); color: var(--cyan2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8px; overflow: hidden; }
.summoner-skill b { font-size: 16px; font-weight: 400; }
.summoner-skill .cd { position: absolute; inset: 0; background: rgba(0,0,0,.7); height: 0; bottom: 0; top: auto; }
.utility-btns { position: absolute; right: 20px; bottom: 112px; display: flex; flex-direction: column; gap: 6px; }
.util-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(5,14,24,.82); color: var(--gold2); font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 8px; }
.util-btn b { font-size: 15px; font-weight: 400; }
.recall-bar { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); width: 240px; height: 34px; background: rgba(4,12,20,.86); border: 1px solid var(--line); display: none; align-items: center; padding: 0 10px; gap: 8px; }
.recall-bar.show { display: flex; }
.recall-bar .rb { flex: 1; height: 6px; background: rgba(255,255,255,.1); }
.recall-bar .rb i { display: block; height: 100%; width: 0; background: var(--cyan); }
.joystick { position: absolute; left: calc(28px + var(--safe-left)); bottom: calc(128px + var(--safe-bottom)); width: 118px; height: 118px; display: none; }
.joy-base { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(126,180,220,.25); background: radial-gradient(circle, rgba(10,26,43,.55), rgba(4,12,20,.2)); }
.joy-stick { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 1px solid rgba(232,196,106,.5); background: radial-gradient(circle at 35% 30%, rgba(60,110,150,.9), rgba(7,18,31,.95)); }
.aim-indicator { position: fixed; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 1px solid rgba(255,211,110,.8); border-radius: 50%; box-shadow: 0 0 22px rgba(255,211,110,.25), inset 0 0 18px rgba(255,211,110,.1); display: none; z-index: 30; pointer-events: none; }
.aim-indicator::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--gold); }
.aim-indicator.show { display: block; }
.aim-line { position: fixed; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,211,110,.7), transparent); z-index: 29; display: none; pointer-events: none; }
.aim-line.show { display: block; }
.fps { position: absolute; left: 14px; bottom: 10px; color: rgba(255,255,255,.3); font-size: 9px; letter-spacing: .06em; }
.surrender-tip { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); color: #8fa5b9; font-size: 10px; letter-spacing: .08em; }

/* 商店 / 记分板 / 设置 */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,7,13,.7); backdrop-filter: blur(4px); animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(1060px, 94vw); max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line2); background: linear-gradient(90deg, rgba(232,196,106,.08), transparent); }
.modal-head h3 { margin: 0; font-family: var(--serif); font-size: 20px; letter-spacing: .16em; }
.modal-head .grow { flex: 1; }
.modal-body { padding: 14px 18px; overflow-y: auto; }
.modal-foot { padding: 10px 18px; border-top: 1px solid var(--line2); display: flex; align-items: center; gap: 10px; }
.gold-badge { color: var(--gold2); font-variant-numeric: tabular-nums; }
.shop-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.shop-tab { padding: 6px 14px; border: 1px solid transparent; color: var(--muted); font-size: 12px; }
.shop-tab.on { border-color: var(--line); color: var(--gold2); background: rgba(232,196,106,.08); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 9px; }
.item-card { border: 1px solid rgba(126,180,220,.15); background: linear-gradient(160deg, rgba(13,34,54,.9), rgba(4,12,20,.96)); padding: 9px; display: flex; flex-direction: column; gap: 5px; transition: .15s; cursor: pointer; }
.item-card:hover { border-color: var(--line); transform: translateY(-2px); }
.item-card.cant { opacity: .55; filter: grayscale(.35); }
.item-top { display: flex; align-items: center; gap: 8px; }
.item-icon { width: 38px; height: 38px; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--serif); color: var(--gold2); background: radial-gradient(circle at 35% 30%, rgba(232,196,106,.2), rgba(7,18,31,.9)); flex: none; }
.item-name { font-size: 12px; }
.item-cost { margin-left: auto; color: var(--gold); font-size: 11px; }
.item-stats { color: #a9c0d6; font-size: 10px; line-height: 1.5; min-height: 30px; }
.item-desc { color: var(--muted); font-size: 9px; line-height: 1.45; }
.item-actions { display: flex; gap: 5px; margin-top: 2px; }
.item-actions .btn { min-height: 26px; padding: 0 8px; font-size: 10px; flex: 1; }
.inventory { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.inv-slot { width: 52px; height: 52px; border: 1px solid var(--line2); background: rgba(4,12,20,.8); display: grid; place-items: center; font-family: var(--serif); color: var(--gold2); position: relative; }
.inv-slot.empty { color: rgba(255,255,255,.12); font-size: 20px; }
.inv-slot .x { position: absolute; right: 1px; top: 1px; width: 14px; height: 14px; display: grid; place-items: center; background: #7a2a22; color: #fff; font-size: 9px; opacity: 0; transition: .15s; }
.inv-slot:hover .x { opacity: 1; }
.score-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.score-table th { color: var(--muted); font-weight: 500; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line2); font-size: 10px; letter-spacing: .08em; }
.score-table td { padding: 7px 8px; border-bottom: 1px solid rgba(126,180,220,.08); }
.score-table tr.me td { background: rgba(232,196,106,.08); }
.score-table .team-blue { color: var(--cyan2); }
.score-table .team-red { color: #ffb3a6; }
.score-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.score-cols h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 13px; letter-spacing: .12em; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.setting { padding: 12px; border: 1px solid var(--line2); background: rgba(4,12,20,.4); }
.setting label { display: block; color: var(--muted); font-size: 10px; letter-spacing: .1em; margin-bottom: 6px; }
.seg { display: flex; gap: 4px; }
.seg button { flex: 1; min-height: 30px; border: 1px solid var(--line2); color: var(--muted); font-size: 11px; }
.seg button.on { border-color: var(--gold); color: var(--gold2); background: rgba(232,196,106,.08); }
.control-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; font-size: 11px; color: var(--muted); }
.control-list div { display: flex; align-items: center; gap: 8px; }
.control-list b { color: var(--ink); font-weight: 500; }
.help-note { color: var(--muted); font-size: 10px; line-height: 1.7; }

/* 结算 */
.results { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, rgba(22,55,84,.45), rgba(3,8,14,.96) 70%); }
.result-word { font-family: var(--serif); font-size: clamp(56px, 10vw, 120px); letter-spacing: .2em; line-height: 1; margin-bottom: 4px; }
.result-word.win { background: linear-gradient(180deg, #fff7d6, #f0cf7a 45%, #9a6a22); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px rgba(232,196,106,.35)); }
.result-word.lose { color: #8fa5b9; filter: drop-shadow(0 0 30px rgba(120,150,180,.2)); }
.result-sub { color: var(--muted); font-size: 12px; letter-spacing: .3em; margin-bottom: 18px; }
.result-card { width: min(820px, 92vw); padding: 18px; }
.result-score { display: flex; align-items: center; justify-content: center; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line2); margin-bottom: 12px; }
.result-score .big { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }
.result-score .big.blue { color: var(--cyan2); }
.result-score .big.red { color: #ffb3a6; }
.result-score .mid { color: var(--muted); font-size: 11px; text-align: center; letter-spacing: .12em; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.result-stat { padding: 9px; border: 1px solid var(--line2); text-align: center; background: rgba(4,12,20,.4); }
.result-stat b { display: block; font-size: 20px; color: var(--gold2); font-variant-numeric: tabular-nums; }
.result-stat span { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.result-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* toast */
.toast-stack { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { padding: 7px 16px; background: rgba(4,12,20,.9); border: 1px solid var(--line2); color: #dce8f4; font-size: 12px; letter-spacing: .06em; animation: toastIn .2s ease-out; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.toast.gold { border-color: var(--line); color: var(--gold2); }
.toast.red { border-color: rgba(255,98,83,.4); color: #ffd0c8; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* 新手引导 */
.tutorial { position: absolute; inset: 0; background: rgba(2,7,13,.72); display: flex; align-items: center; justify-content: center; z-index: 35; }
.tutorial-card { width: min(520px, 90vw); padding: 22px; text-align: left; }
.tutorial-card h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; letter-spacing: .12em; color: var(--gold2); }
.tutorial-card p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.tutorial-card ul { color: #c4d4e4; font-size: 12px; line-height: 1.9; padding-left: 18px; }

/* 移动端 */
@media (max-width: 900px) {
  .lobby-main { left: 76px; width: min(520px, 58vw); top: 92px; }
  .lobby-showcase { display: none; }
  .lobby-nav { display: none; }
  .brand-name { font-size: 20px; }
  .hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .select-teams { grid-template-columns: 170px 1fr 170px; left: 12px; right: 12px; }
  .select-bottom { height: 250px; }
  .select-hero-name h2 { font-size: 30px; }
  .minimap-wrap { width: 132px; height: 132px; }
  #minimap { width: 122px; height: 122px; }
  .player-panel { width: 270px; height: 78px; }
  .hero-portrait { width: 60px; height: 60px; }
  .skillbar { transform: scale(.86); transform-origin: bottom right; }
  .fps { display: none; }
  .score-cols { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lobby-main { left: 12px; right: 12px; width: auto; top: 86px; bottom: 70px; }
  .lobby-rail { display: none; }
  .lobby-top { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .player-chip .nm, .currency { display: none; }
  .lobby-head h2 { font-size: 26px; }
  .lobby-actions { flex-direction: column; align-items: stretch; }
  .start-btn { height: 54px; font-size: 20px; }
  .mode-card { padding: 12px; }
  .mode-icon { width: 52px; height: 52px; font-size: 22px; }
  .select-teams { grid-template-columns: 1fr; top: 70px; bottom: auto; }
  .team-panel.right { display: none; }
  .select-center { position: absolute; left: 50%; bottom: 250px; transform: translateX(-50%); width: 90%; }
  .hero-detail { display: none; }
  .select-bottom { height: 246px; }
  .hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-card { min-height: 74px; }
  .hero-card .glyph { font-size: 44px; }
  .select-timer { margin-left: 0; }
  .select-title { display: none; }
  .joystick { display: block; }
  .skillbar { right: 10px; bottom: 6px; transform: scale(.78); }
  .player-panel { left: 10px; bottom: 10px; width: 230px; height: 66px; }
  .hero-portrait { width: 50px; height: 50px; }
  .pp-name .kda { display: none; }
  .minimap-wrap { top: calc(66px + var(--safe-top)); left: 10px; width: 112px; height: 112px; }
  #minimap { width: 102px; height: 102px; }
  .killfeed { width: 190px; top: calc(66px + var(--safe-top)); right: 8px; }
  .hud-top { top: calc(8px + var(--safe-top)); transform: translateX(-50%) scale(.92); }
  .top-actions { top: calc(8px + var(--safe-top)); }
  .objective-bar { display: none; }
  .result-card { padding: 12px; }
  .modal { width: 96vw; max-height: 92vh; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: portrait) and (max-width: 720px) {
  .portrait-hint { display: flex; }
}
.portrait-hint { display: none; position: absolute; inset: 0; z-index: 80; background: rgba(2,7,13,.88); align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .1em; }
.portrait-hint b { display: block; color: var(--gold2); font-family: var(--serif); font-size: 24px; margin-bottom: 8px; }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(232,196,106,.25); border-radius: 3px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }

/* 无障碍 / 错误 */
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: #050b14; color: #fff; z-index: 999; }
.fatal { position: fixed; inset: 0; z-index: 999; background: rgba(3,8,14,.96); display: flex; align-items: center; justify-content: center; padding: 30px; }
.fatal-card { max-width: 720px; border: 1px solid #ff8a7a; padding: 24px; background: #120b0b; color: #ffd0c8; font-family: monospace; white-space: pre-wrap; line-height: 1.6; }