/* 所有界面都由这里的组件拼成。禁止圆角、模糊、渐变、柔和阴影。 */
@import './tokens.css';
@import './killfeed.css';

.stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--ink);
  color: var(--bone); font-family: var(--font-body); font-size: var(--fs-body); user-select: none; }
.stage * { box-sizing: border-box; }
.stage .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.scrim { position: absolute; inset: 0; background: var(--scrim); }

/* ---------- 基础 ---------- */
.num { font-family: var(--font-num); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.title { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; color: var(--white); margin: 0; }
.label-en { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-small); letter-spacing: .14em; color: var(--dust); text-transform: uppercase; }
.key { display: inline-block; min-width: 34px; padding: 0 8px; font-family: var(--font-num); font-weight: 700; font-size: var(--fs-small);
  line-height: 32px; text-align: center; color: var(--ink); background: var(--bone); }

.panel { position: relative; background: var(--panel); border-top: var(--line) solid var(--ash); padding: 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.panel.accent-gold { border-top-color: var(--gold); }
.panel.accent-soul { border-top-color: var(--soul); }
.panel.accent-hex { border-top-color: var(--hex); }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }

.btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 28px;
  font-family: var(--font-display); font-size: var(--fs-h3); color: var(--bone); background: var(--panel);
  border-left: 6px solid var(--iron); }
.btn.is-focus { color: var(--ink); background: var(--gold); border-left-color: var(--white); transform: translateX(12px); }
.btn.is-disabled { color: var(--ash); }

.bar { position: relative; height: 16px; background: var(--ink); border: var(--line) solid var(--iron); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bone); }
.bar.hp > i { background: var(--red); }
.bar.soul > i { background: var(--soul); }
.bar.gold > i { background: var(--gold); }
.bar.ember > i { background: var(--ember); }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; }
.hud-xp { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--ink); }
.hud-xp > i { display: block; height: 100%; background: var(--soul); }
.hud-top { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-timer { font-family: var(--font-num); font-weight: 900; font-size: 72px; line-height: 1; color: var(--white); text-shadow: 3px 3px 0 var(--ink); }
.hud-compass { position: relative; width: 640px; height: 40px; background: var(--panel); overflow: hidden; }
.hud-compass .t { position: absolute; bottom: 0; width: 2px; height: 10px; background: var(--ash); }
.hud-compass .t.major { height: 18px; background: var(--bone); }
.hud-compass .c { position: absolute; top: 3px; transform: translateX(-50%); font-family: var(--font-num); font-weight: 700; font-size: var(--fs-small); color: var(--bone); line-height: 1; }
.hud-compass .m { position: absolute; top: 4px; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); }
.hud-compass .m.gate { background: var(--soul); }
.hud-compass .m.boss { background: var(--hex); }

.hud-tl { position: absolute; left: var(--safe); top: 36px; }
.hud-lv { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.hud-lv b { font-family: var(--font-num); font-weight: 900; font-size: 64px; line-height: 1; color: var(--soul); text-shadow: 3px 3px 0 var(--ink); }
.slots { display: flex; gap: 6px; margin-bottom: 6px; }
.slot { position: relative; width: 60px; height: 60px; display: grid; place-items: center; background: var(--panel); border: var(--line) solid var(--iron);
  font-family: var(--font-display); font-size: 32px; color: var(--gold); }
.slot.small { width: 44px; height: 44px; font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--bone); }
.slot .lv { position: absolute; right: 3px; bottom: 0; font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--white); }
.slot.empty { background: transparent; border-style: dashed; border-color: var(--iron); }
.slot.cd::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: rgba(11,10,16,.7); }

.hud-tr { position: absolute; right: var(--safe); top: 36px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.stat { display: flex; align-items: baseline; gap: 12px; }
.stat b { font-family: var(--font-num); font-weight: 900; font-size: 44px; line-height: 1; color: var(--white); text-shadow: 3px 3px 0 var(--ink); }
.stat.value b { color: var(--gold); }

.hud-bl { position: absolute; left: var(--safe); bottom: 44px; width: 420px; }
.hud-hp-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hud-hp-row b { font-family: var(--font-num); font-weight: 900; font-size: 64px; line-height: 1; color: var(--white); text-shadow: 3px 3px 0 var(--ink); }
.hud-bl .bar { height: 20px; }
.hud-dash { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.pip { width: 54px; height: 10px; background: var(--ink); border: var(--line) solid var(--iron); }
.pip.on { background: var(--gold); border-color: var(--gold); }

.hud-br { position: absolute; right: var(--safe); bottom: 44px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mini-bag { display: grid; grid-template-columns: repeat(6, 22px); grid-auto-rows: 22px; gap: 2px; padding: 6px; background: var(--panel); }
.mini-bag i { background: var(--soot); }
.mini-bag i.common { background: var(--dust); }
.mini-bag i.rare { background: var(--soul); }
.mini-bag i.legend { background: var(--gold); }
.mini-bag-note { display: flex; align-items: center; gap: 10px; }

.crosshair { position: absolute; left: 960px; top: 540px; width: 0; height: 0; }
.crosshair svg { position: absolute; left: -60px; top: -60px; }

.toast { position: absolute; top: 208px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 28px;
  background: var(--panel); border-left: 6px solid var(--soul); font-family: var(--font-display); font-size: var(--fs-h3); color: var(--white); white-space: nowrap; }
.prompt { position: absolute; left: 50%; top: 640px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel); white-space: nowrap; }
.threat { position: absolute; width: 36px; height: 220px; background: var(--hex); clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%); }

.dmg { position: absolute; font-family: var(--font-num); font-weight: 900; color: var(--white); text-shadow: 2px 2px 0 var(--ink); line-height: 1; }
.dmg.crit { color: var(--gold); }

.boss-bar { position: absolute; top: 176px; left: 50%; transform: translateX(-50%); width: 980px; }
.boss-bar .bar { height: 22px; }
.boss-bar .bar > i { background: var(--hex); }

.world-tag { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.world-tag .d { width: 22px; height: 22px; transform: rotate(45deg); background: var(--soul); }
.extract { position: absolute; top: 700px; left: 50%; transform: translateX(-50%); width: 560px; text-align: center; }

/* ---------- 背包格 ---------- */
.grid { position: relative; background: var(--ink); display: grid; gap: 0; border: var(--line) solid var(--iron); }
.grid .cell { width: var(--cell); height: var(--cell); border-right: 1px solid var(--soot); border-bottom: 1px solid var(--soot); }
.item { position: absolute; left: 0; top: 0; pointer-events: none; }
.item .c { position: absolute; width: var(--cell); height: var(--cell); }
/* 相邻格多铺 1px，防止缩放时出现接缝，把多格道具切开 */
.item .c:not(.r) { width: calc(var(--cell) + 1px); }
.item .c:not(.b) { height: calc(var(--cell) + 1px); }
.item.r-common .c { background: var(--soot); --edge: var(--dust); --ink-g: var(--bone); }
.item.r-rare .c { background: var(--soul-deep); --edge: var(--soul); --ink-g: var(--white); }
.item.r-legend .c { background: var(--oxblood); --edge: var(--gold); --ink-g: var(--gold); }
.item .c.t { border-top: 3px solid var(--edge); }
.item .c.b { border-bottom: 3px solid var(--edge); }
.item .c.l { border-left: 3px solid var(--edge); }
.item .c.r { border-right: 3px solid var(--edge); }
.item .g { position: absolute; width: var(--cell); height: var(--cell); display: grid; place-items: center; font-family: var(--font-display); font-size: calc(var(--cell) * .56); color: var(--ink-g, var(--bone)); }
.item.r-common .g { color: var(--bone); } .item.r-rare .g { color: var(--white); } .item.r-legend .g { color: var(--gold); }
.item.is-selected .c { background: var(--bone); } .item.is-selected .g { color: var(--ink); }
.ghost { position: absolute; width: var(--cell); height: var(--cell); }
.ghost.ok { background: var(--soul); opacity: .55; }
.ghost.bad { background: var(--hex); opacity: .55; }

.bag-layout { position: absolute; left: var(--safe); right: var(--safe); top: 44px; bottom: 44px; display: grid; grid-template-columns: 340px 1fr 520px; grid-template-rows: auto 1fr auto; gap: 24px 36px; }
.bag-main { display: flex; justify-content: center; align-items: flex-start; }
.safe-grid { --cell: 72px; width: max-content; }
.bag-head { grid-column: 1 / -1; height: 72px; display: flex; align-items: baseline; justify-content: space-between; }
.bag-left, .bag-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bag-foot { grid-column: 1 / -1; display: flex; gap: 36px; color: var(--dust); font-size: var(--fs-small); align-items: center; }
.bag-foot span { display: inline-flex; gap: 10px; align-items: center; }
.ground { display: flex; flex-direction: column; gap: 10px; }
.ground-row { display: flex; gap: 12px; align-items: center; padding: 6px; background: var(--ink); border: 1px solid var(--iron); min-height: 72px; }
.ground-row .item { position: relative; --cell: 28px; flex: none; }
.ground-row .g { display: none; }
.stat-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--fs-small); border-bottom: 1px solid var(--soot); }
.stat-line b { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-body); color: var(--white); }
.chip { display: inline-block; padding: 0 10px; font-size: var(--fs-micro); line-height: 26px; color: var(--ink); background: var(--bone); margin-right: 6px; font-weight: 700; }
.chip.r-common { background: var(--dust); } .chip.r-rare { background: var(--soul); } .chip.r-legend { background: var(--gold); }
.chip.tag { background: var(--iron); color: var(--white); }

/* ---------- 升级卡 ---------- */
.lvl-layout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; }
.cards { display: flex; gap: 36px; }
.card { position: relative; width: 420px; height: 560px; padding: 32px; background: var(--ink); border-top: 8px solid var(--dust); display: flex; flex-direction: column; gap: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.card.rare { border-top-color: var(--soul); } .card.epic { border-top-color: var(--ember); } .card.legend { border-top-color: var(--gold); } .card.evo { border-top-color: var(--red); background: var(--oxblood); }
.card.is-focus { transform: translateY(-16px); outline: 4px solid var(--white); outline-offset: -4px; }
.card .glyph { width: 128px; height: 128px; display: grid; place-items: center; font-family: var(--font-display); font-size: 88px; color: var(--gold); background: var(--soot); }
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); color: var(--white); margin: 0; }
.card p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--bone); flex: 1; }
.card .pips { display: flex; gap: 6px; } .card .pips i { width: 48px; height: 10px; background: var(--iron); } .card .pips i.on { background: var(--gold); }
.card .kbd { position: absolute; right: 24px; top: 24px; }
.hl { color: var(--gold); font-weight: 700; }

/* ---------- 菜单 / 结算 / 军械库 ---------- */
.menu-title { position: absolute; left: 96px; top: 150px; }
.logo-cn { font-family: var(--font-display); font-size: 220px; line-height: 1; color: var(--white); text-shadow: 8px 8px 0 var(--blood); }
.logo-en { font-family: var(--font-num); font-weight: 900; font-size: 60px; letter-spacing: .5em; color: var(--ember); margin-top: 4px; }
.menu-list { position: absolute; left: 96px; top: 560px; width: 460px; display: flex; flex-direction: column; gap: 10px; }
.menu-foot { position: absolute; right: var(--safe); bottom: 40px; text-align: right; }

.result { position: absolute; left: 96px; right: 96px; top: 84px; bottom: 72px; display: grid; grid-template-columns: 1fr 640px; grid-template-rows: auto 1fr auto; gap: 24px 48px; }
.result-head { grid-column: 1 / -1; }
.result-head .title { font-size: 128px; line-height: 1; margin-bottom: 8px; }
.result-rows { display: flex; flex-direction: column; }
.result-row { display: flex; align-items: center; gap: 16px; padding: 7px 12px; border-bottom: 1px solid var(--soot); font-size: var(--fs-body); }
.result-row .v { margin-left: auto; font-family: var(--font-num); font-weight: 700; font-size: 32px; color: var(--soul); }
.result-row.lost { color: var(--ash); text-decoration: line-through; }
.result-row.lost .v { color: var(--ash); }
.result-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.result-total b { font-family: var(--font-num); font-weight: 900; font-size: 96px; line-height: 1; color: var(--soul); }
.result-foot { grid-column: 1 / -1; display: flex; gap: 12px; }
.result-foot .btn { width: 320px; }

.armory { position: absolute; left: var(--safe); right: var(--safe); top: 44px; bottom: 44px; display: grid; grid-template-columns: 420px 1fr 460px; grid-template-rows: auto 1fr auto; gap: 24px 36px; }
.armory-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.armory-center { position: relative; display: grid; place-items: center; }
.armory-center canvas { width: 100%; max-width: 900px; aspect-ratio: 16/9; image-rendering: pixelated; }
.tabs { display: flex; gap: 6px; }
.tab { padding: 6px 24px; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--dust); background: var(--panel); }
.tab.is-on { color: var(--ink); background: var(--gold); }
.mod-slot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--panel); border-left: 6px solid var(--iron); margin-bottom: 8px; font-size: var(--fs-small); }
.mod-slot.is-on { border-left-color: var(--gold); color: var(--white); }
.mod-slot b { font-weight: 700; font-size: var(--fs-body); color: var(--white); }
.mod-slot small { margin-left: auto; font-family: var(--font-num); font-size: var(--fs-small); color: var(--dust); }
.delta { font-family: var(--font-num); font-weight: 700; } .delta.up { color: var(--soul); } .delta.down { color: var(--hex); }
.skin-row { display: flex; gap: 10px; flex-wrap: wrap; }
.skin { width: 76px; height: 76px; border: var(--line) solid var(--iron); display: grid; grid-template-columns: 1fr 1fr; }
.skin.is-on { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- 技能卡补充 ---------- */
.card .tagline { font-family: var(--font-num); font-weight: 700; font-size: var(--fs-small); letter-spacing: .1em; color: var(--dust); }
.card.upgrade .glyph { outline: 3px solid var(--gold); outline-offset: -3px; }
.capped { color: var(--dust); font-size: var(--fs-micro); margin-left: 8px; }

/* ---------- 仓库 ---------- */
.stash { position: absolute; left: var(--safe); right: var(--safe); top: 44px; bottom: 44px; display: grid; grid-template-columns: 1fr 520px; grid-template-rows: auto 1fr auto; gap: 24px 36px; }
.stash-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.stash-list { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 12px; align-content: start; }
.stash-item { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px; background: var(--panel); border-top: 3px solid var(--iron); }
.stash-item .item { position: absolute; margin: 12px; --cell: 24px; }
.stash .btn.is-focus { transform: none; }
.stash-item .item .g { display: none; }
.stash-item.is-on { background: var(--soot); border-top-color: var(--gold); }
.stash-item b { font-size: var(--fs-small); color: var(--white); }
.stash-item .v { font-family: var(--font-num); font-weight: 700; font-size: 28px; color: var(--gold); }
.shop-row { display: flex; align-items: center; gap: 16px; padding: 10px 14px; margin-bottom: 8px; background: var(--panel); border-left: 6px solid var(--iron); font-size: var(--fs-small); }
.shop-row b { font-size: var(--fs-body); color: var(--white); }
.shop-row .size { font-family: var(--font-num); font-weight: 700; color: var(--bone); }
.shop-row small { margin-left: auto; font-family: var(--font-num); font-size: var(--fs-body); color: var(--gold); }
.shop-row.is-on { border-left-color: var(--gold); }
.shop-row.is-owned small { color: var(--dust); font-size: var(--fs-small); }

/* ---------- 运行界面（复用上面的基准组件） ---------- */
.game-stage .game-hud, .game-stage .game-screen { position: absolute; inset: 0; }
.game-stage .game-hud { pointer-events: none; }
.game-stage [hidden] { display: none !important; }
.game-screen { pointer-events: auto; }
.game-stage button.btn { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; }
.game-stage .btn:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.game-stage .menu-scrim { background: var(--ink); opacity: .45; }
.game-stage .menu-gold { font-size: 72px; color: var(--gold); line-height: 1; }
.game-controls { position: absolute; left: 96px; right: 400px; bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; color: var(--dust); font-size: var(--fs-small); }
.game-controls > span { display: inline-flex; gap: 10px; align-items: center; }
.game-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 660px; padding: 36px; border-top-color: var(--gold); }
.game-dialog h1 { font-size: var(--fs-h1); }
.dialog-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.settings-dialog { width: 720px; }
.setting-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin: 24px 0; }
.setting-row output { color: var(--gold); }
.setting-row input { grid-column: 1 / -1; width: 100%; margin: 0; height: 28px; appearance: none; -webkit-appearance: none; background: var(--soot); border: 2px solid var(--iron); border-radius: 0; accent-color: var(--gold); cursor: pointer; }
.setting-row input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 32px; border: 2px solid var(--white); border-radius: 0; background: var(--gold); }
.setting-row input::-moz-range-thumb { width: 12px; height: 28px; border: 2px solid var(--white); border-radius: 0; background: var(--gold); }
.setting-row input:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.game-hud .hud-tl { max-width: 440px; }
.game-hud .slots { flex-wrap: wrap; }
.game-hud .hud-max-hp { color: var(--dust); }
.game-hud .low-health { color: var(--red); }
.game-hud .blink-off { visibility: hidden; }
.game-hud .hook-label { margin-left: 12px; }
.game-hud .cooldown { min-width: 32px; color: var(--dust); font-size: var(--fs-micro); white-space: nowrap; }
.game-hud .ability-pip { display: block; position: relative; overflow: hidden; }
.game-hud .ability-pip b { display: block; height: 100%; background: var(--gold); }
.game-hud .compass-ticks { position: absolute; left: 0; bottom: 0; height: 18px; width: 720px; }
.game-hud .compass-center { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--white); }
.game-hud .crosshair-dot { fill: var(--white); }
.game-hud .crosshair-outline { stroke: var(--ink); stroke-width: 5px; }
.game-hud .crosshair-lines { stroke: var(--white); stroke-width: 2px; }
.game-hud .crosshair-hit { stroke: var(--white); stroke-width: 2px; display: none; }
.game-hud .crosshair.is-hit .crosshair-hit { display: block; }
.game-hud .crosshair.is-crit .crosshair-hit { stroke: var(--gold); stroke-width: 3px; }
.game-hud .crosshair.is-pickup .crosshair-dot, .game-hud .crosshair.is-pickup .crosshair-lines { fill: var(--soul); stroke: var(--soul); }
.game-hud .hurt-frame { position: absolute; inset: 0; border: 12px solid var(--red); pointer-events: none; }
.game-hud .hurt-tint { position: absolute; inset: 0; background: var(--red); opacity: .15; pointer-events: none; }   /* 整屏硬边平涂，不渐变不模糊 */
.game-hud .level-toast .label-en { color: var(--soul); }
.game-result { align-items: start; grid-template-rows: auto 1fr auto; }
.game-result .result-head .result-dead { color: var(--red); }
.game-result .result-head .result-success { color: var(--soul); }
.game-result h2 { font-size: var(--fs-h2); }
.game-stage .game-result .result-foot .btn { width: 320px; }
.pause-message { margin: 12px 0; font-size: var(--fs-small); color: var(--gold); line-height: 1.5; }
.game-screen[data-screen="RUN.PAUSE"] .game-controls { bottom: 168px; }
/* 小信息单独铺 INK 硬底，近身怪物的浅色骨面不会吞掉文字。 */
.game-hud .label-en, .game-hud .hud-max-hp, .game-hud .cooldown { background: var(--ink); padding: 0 4px; }
/* 普通模式显示波次及休整倒计时；保留硬边与现有配色。 */
.game-hud .hud-wave { background: var(--ink); border-left: 4px solid var(--soul); padding: 4px 14px;
  color: var(--bone); font-family: var(--font-body); font-size: 22px; line-height: 1.3; }

/* ---------- M2 升级：原生按钮沿用基准硬边卡片 ---------- */
.game-levelup { gap: 36px; }
.game-levelup .levelup-heading { text-align: center; }
.game-levelup .levelup-heading .title { font-size: var(--fs-h1); }
.game-levelup .levelup-heading p { margin: 12px 0 0; color: var(--soul); font-size: var(--fs-small); }
.game-levelup button.card { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; appearance: none;
  font: inherit; text-align: left; color: var(--bone); cursor: pointer; flex: 0 0 420px; }
.game-levelup .four-choices .card { width: 360px; flex-basis: 360px; }
.game-levelup .card:focus-visible { transform: translateY(-16px); outline: 4px solid var(--white); outline-offset: -4px; }
.game-levelup .card-name { display: block; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.2; font-weight: 400; color: var(--white); }
.game-levelup .card-description { display: block; font-size: var(--fs-body); line-height: 1.5; flex: 1; }
.game-levelup .glyph, .game-levelup .pips { flex-shrink: 0; }
.game-levelup .card.rare .glyph { color: var(--soul); }
.game-levelup .card.epic .glyph { color: var(--ember); }
.game-levelup .card.evo .glyph { color: var(--red); }
.game-levelup .levelup-actions { display: flex; gap: 36px; }
.game-levelup .levelup-actions .btn { width: 300px; }
.game-levelup .btn:disabled { cursor: not-allowed; color: var(--ash); background: var(--ink); border-left-color: var(--iron); transform: none; }
.game-levelup .btn:disabled .key { background: var(--ash); }
.game-levelup .levelup-help, .game-levelup .levelup-empty { margin: 0; font-size: var(--fs-small); color: var(--dust); }
.game-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ======================================================================
   美漫风（2026-11-03）：粗黑描边、纯色硬投影、倾斜纸片面板、Bangers 数字。
   覆盖上面的基准组件；仍然不用圆角、模糊、柔和阴影。
   ====================================================================== */
.stroke { -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; }
.label-en { font-family: var(--font-num); font-weight: 400; letter-spacing: .1em; }
.title { -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; text-shadow: var(--drop) var(--drop) 0 var(--ink); }
.key { font-family: var(--font-num); font-weight: 400; color: var(--ink); background: var(--bone); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); line-height: 28px; }

.panel { background: var(--void); border: var(--stroke) solid var(--ink); border-top: 10px solid var(--ash); box-shadow: 10px 10px 0 var(--ink); clip-path: none; }
.panel.accent-gold { border-top-color: var(--gold); }
.panel.accent-soul { border-top-color: var(--soul); }
.panel.accent-hex { border-top-color: var(--hex); }

.btn { font-family: var(--font-display); color: var(--bone); background: var(--void); border: var(--stroke) solid var(--ink); border-left: 12px solid var(--iron);
  box-shadow: var(--drop) var(--drop) 0 var(--ink); }
.btn.is-focus, .game-stage button.btn:hover, .game-stage button.btn:focus-visible { color: var(--ink); background: var(--gold); border-left-color: var(--red);
  transform: translateX(12px) rotate(-1deg); box-shadow: 10px 10px 0 var(--ink); }
.game-stage button.btn { border-top: var(--stroke) solid var(--ink); border-right: var(--stroke) solid var(--ink); border-bottom: var(--stroke) solid var(--ink); }

.bar { border: 3px solid var(--ink); background: var(--soot); }
.bar.hp > i { background-color: var(--red); background-image: radial-gradient(circle, rgba(255, 251, 240, .45) 28%, transparent 31%); background-size: 8px 8px; }

/* HUD */
.hud-xp { height: 14px; border-bottom: 3px solid var(--ink); background: var(--soot); }
.hud-xp > i { background-color: var(--soul); background-image: radial-gradient(circle, rgba(255, 251, 240, .5) 28%, transparent 31%); background-size: 8px 8px; }
.hud-timer { font-family: var(--font-num); font-weight: 400; font-size: 84px; letter-spacing: .04em;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: var(--drop) var(--drop) 0 var(--ink); }
.hud-compass { background: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.hud-compass .c { font-family: var(--font-num); font-weight: 400; font-size: 22px; color: var(--gold); }
.game-hud .hud-wave { background: var(--bone); color: var(--ink); border: 3px solid var(--ink); border-left: 10px solid var(--soul);
  box-shadow: 5px 5px 0 var(--ink); font-weight: 700; transform: rotate(-1deg); }
.hud-lv b, .stat b, .hud-hp-row b { font-family: var(--font-num); font-weight: 400; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink); letter-spacing: .03em; }
.hud-lv b { font-size: 72px; }
.stat b { font-size: 54px; }
.stat.value b { color: var(--gold); }
.hud-tr .stat:first-child b { color: var(--red); }
.slot { background: var(--void); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.slot .lv { font-family: var(--font-num); font-weight: 400; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.hud-bl { padding: 14px 20px 18px; background: var(--bone); border: var(--stroke) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1.5deg); }
.hud-bl .label-en { color: var(--ink); }
.hud-hp-row b { font-size: 72px; }
.game-hud .hud-max-hp { color: var(--ink); background: transparent; font-family: var(--font-num); font-size: 30px; }
.game-hud .hud-bl .cooldown { color: var(--ink); background: transparent; }
.game-hud .hud-bl .label-en { background: transparent; }
.pip { border: 3px solid var(--ink); background: var(--soot); }
.game-hud .ability-pip b { background: var(--gold); }
.mini-bag { background: var(--void); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.game-hud .label-en, .game-hud .cooldown { padding: 0 6px; }
.toast { background: var(--gold); color: var(--ink); border: var(--stroke) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: translateX(-50%) rotate(-2deg); }
.game-hud .level-toast .label-en { color: var(--ink); background: transparent; font-size: 28px; }
.game-hud .hurt-frame { border: 0; box-shadow: inset 0 0 0 18px var(--red), inset 0 0 0 24px var(--ink); }
.game-hud .crosshair-outline { stroke-width: 6px; }

/* 升级卡：纸片 + 粗描边 + 硬投影 */
.card { background: var(--bone); color: var(--ink); border: 5px solid var(--ink); border-top: 16px solid var(--dust); box-shadow: 12px 12px 0 var(--ink); clip-path: none; }
.card:nth-child(2) { transform: rotate(.8deg); } .card:nth-child(3) { transform: rotate(-.6deg); }
.card.is-focus, .game-levelup .card:focus-visible, .game-levelup button.card:hover { transform: translateY(-16px) rotate(-1.5deg); outline: 0; background: var(--white); box-shadow: 16px 16px 0 var(--ink); }
.card.evo { background: var(--oxblood); color: var(--bone); }
.card .glyph { background: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--soot); }
.card h3, .game-levelup .card-name { color: var(--ink); }
.card p, .game-levelup button.card { color: var(--ink); }
.card.evo h3, .card.evo .card-name, .game-levelup button.card.evo { color: var(--bone); }
.card .tagline { font-family: var(--font-num); font-weight: 400; color: var(--iron); }
.card .pips i { background: var(--dust); border: 2px solid var(--ink); } .card .pips i.on { background: var(--red); }
.hl { color: var(--blood); }
.card.evo .hl { color: var(--gold); }
.game-levelup .levelup-heading p { font-weight: 700; }

/* 菜单 / 结算 */
.logo-cn { color: var(--gold); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 14px 14px 0 var(--blood); transform: rotate(-3deg); transform-origin: left; }
.logo-en { font-family: var(--font-num); font-weight: 400; color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.game-stage .menu-gold { font-family: var(--font-num); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.result-row .v, .result-total b { font-family: var(--font-num); font-weight: 400; }
.game-controls { color: var(--bone); }
.game-controls > span { background: var(--panel); padding: 2px 10px; }

/* 击杀反馈的样式在 killfeed.css（靶场也用）。 */

/* ---------- 武器（美漫）：右下枪械面板、换弹条、狙击镜、开镜隐藏准星 ---------- */
.hud-gun { position: relative; width: 470px; min-height: 128px; padding: 12px 20px 14px; background: var(--gold); color: var(--ink);
  border: var(--stroke) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: rotate(1.2deg); margin-top: 6px; }
.hud-gun .gun-name { font: 400 34px/1.1 var(--font-display); }
.hud-gun .gun-en { font: 400 20px/1 var(--font-num); letter-spacing: .08em; opacity: .75; }
.hud-gun .gun-ammo { position: absolute; right: 18px; bottom: 6px; font: 400 80px/1 var(--font-num); color: var(--white);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.hud-gun .gun-ammo small { font-size: 34px; color: var(--ink); -webkit-text-stroke: 0; }
.hud-gun .gun-ammo.empty { color: var(--red); }
.hud-gun .gun-slots { display: flex; gap: 8px; margin-top: 10px; }
.hud-gun .gun-slot { font: 400 18px/1 var(--font-num); letter-spacing: .06em; padding: 5px 9px; border: 3px solid var(--ink); background: var(--bone); }
.hud-gun .gun-slot.is-on { background: var(--ink); color: var(--gold); }
.game-hud .hud-br { gap: 10px; }
.game-hud .mini-bag-note .label-en { background: var(--ink); }
.hud-reload { position: absolute; left: 960px; top: 452px; transform: translateX(-50%) rotate(-2deg); padding: 5px 14px 7px; background: var(--gold);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: 400 24px/1 var(--font-num); letter-spacing: .08em; color: var(--ink); }
.hud-reload i { display: block; height: 6px; margin-top: 5px; background: var(--bone); }
.hud-reload b { display: block; height: 100%; background: var(--ink); }
.game-hud .crosshair.is-ads { display: none; }
.game-hud .crosshair.is-melee .crosshair-outline, .game-hud .crosshair.is-melee .crosshair-lines { display: none; }
.hud-scope { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 324px, var(--ink) 325px); }
.hud-scope::before { content: ''; position: absolute; left: 50%; top: 50%; width: 648px; height: 648px; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: inset 0 0 0 10px var(--ink), inset 0 0 0 16px var(--gold), inset 0 0 0 20px var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) center/3px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center/100% 3px no-repeat; }
.hud-scope::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); background: var(--red); border: 2px solid var(--ink); border-radius: 50%; }

/* ---------- 军械库（局外选枪） ---------- */
.armory-scrim { background: var(--void); opacity: .82; }
.armory-screen { position: absolute; left: 96px; right: 96px; top: 40px; bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.arm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.arm-head .title { font-size: 84px; line-height: 1; color: var(--gold); transform: rotate(-2deg); }
.arm-head .label-en { color: var(--white); font-size: 26px; margin-top: 6px; }
.arm-note { max-width: 760px; margin: 0; padding: 12px 18px; background: var(--bone); color: var(--ink); border: var(--stroke) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink); font-size: 20px; line-height: 1.55; transform: rotate(1deg); }
.arm-row h2 { display: inline-block; margin: 0 0 12px; padding: 4px 16px 6px; background: var(--red); color: var(--white); border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); font: 400 34px/1 var(--font-display); transform: rotate(-1.5deg); }
.arm-row h2 small { font: 400 22px/1 var(--font-num); letter-spacing: .1em; margin-left: 8px; }
.wcards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.wcard { appearance: none; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1fr; row-gap: 1px;
  align-content: start; padding: 10px 12px 12px; background: var(--bone); color: var(--ink); border: 5px solid var(--ink); border-radius: 0; box-shadow: 9px 9px 0 var(--ink); }
.wcard:nth-child(3n+2) { transform: rotate(.8deg); } .wcard:nth-child(3n) { transform: rotate(-.6deg); }
.wcard:hover, .wcard:focus-visible { transform: translateY(-6px) rotate(-1deg); outline: 0; }
.wcard.is-on { background: var(--gold); transform: translateY(-8px) rotate(-1.5deg); box-shadow: 12px 12px 0 var(--ink); position: relative; }
.wcard.is-on::after { content: '已装备'; position: absolute; right: -14px; top: -16px; padding: 5px 11px; background: var(--red); color: var(--white);
  border: 3px solid var(--ink); font: 400 20px/1 var(--font-display); transform: rotate(8deg); }
.wcard .pic { height: 80px; margin-bottom: 6px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--ink); min-height: 0;
  background-color: var(--white); background-image: radial-gradient(circle, rgba(217, 38, 63, .18) 28%, transparent 31%); background-size: 11px 11px; }
.wcard .pic img { width: 100%; height: 100%; object-fit: contain; }
.wcard .wname { font: 400 27px/1.1 var(--font-display); }
.wcard .wen { font: 400 16px/1 var(--font-num); letter-spacing: .1em; opacity: .7; }
.wcard .wdesc { font: 500 15px/1.35 var(--font-body); margin: 3px 0 4px; min-height: 2.7em; }
.wcard .wstat { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; font: 700 14px/1.4 var(--font-body); }
.wcard .sb { height: 11px; border: 3px solid var(--ink); background: var(--white); }
.wcard .sb i { display: block; height: 100%; background: var(--ink); }
.wcard.is-on .sb i { background: var(--red); }
.arm-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.arm-foot .btn { width: 300px; }
.game-stage .arm-foot .btn.go { width: 380px; height: 92px; font-size: 44px; background: var(--red); color: var(--white); border-left-color: var(--gold);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.game-stage .arm-foot .btn.go.is-focus, .game-stage .arm-foot .btn.go:hover { background: var(--red); color: var(--gold); transform: rotate(-2deg) scale(1.04); }

/* ---------- 界面图标（2026-11-04）：道具插画、技能徽记、武器图。图标在 assets/icons/，路径见 src/ui/icons.js ---------- */
/* 道具插画盖在多格底形上，跟随旋转；字符只在图片加载失败时显示 */
.item .art { position: absolute; left: 50%; top: 50%; object-fit: contain; filter: drop-shadow(3px 3px 0 var(--ink)); }
.item.has-art .g { display: none; }
.item .c { background-image: radial-gradient(circle, rgba(21, 16, 30, .35) 26%, transparent 29%); background-size: 9px 9px; }
.item.has-art .c.t, .item.has-art .c.b, .item.has-art .c.l, .item.has-art .c.r { border-width: 4px; }
.item.has-art { filter: drop-shadow(5px 5px 0 var(--ink)); }
.stash-item .item .art, .ground-row .item .art { display: none; }

/* HUD 技能槽 */
.slot img { width: 86%; height: 86%; object-fit: contain; }
.slot.has-img { background: var(--ink); }
/* HUD 枪械面板：武器图斜贴在面板上沿 */
.hud-gun .gun-pic { position: absolute; left: 6px; top: -66px; width: 240px; height: 86px; object-fit: contain; object-position: left bottom; transform: rotate(-4deg);
  filter: drop-shadow(3px 3px 0 var(--ink)); }

/* 升级卡徽记，替代原来的汉字方块；图片缺失时退回字符 */
.card .emblem { width: 100%; height: 230px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--soot);
  background-color: var(--ink); background-image: radial-gradient(circle, rgba(255, 201, 60, .16) 28%, transparent 31%); background-size: 11px 11px; }
.card.rare .emblem { background-color: var(--soul-deep); } .card.epic .emblem { background-color: var(--oxblood); } .card.legend .emblem { background-color: var(--soot); }
.card .emblem img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(5px 5px 0 var(--ink)); }
.card .emblem:empty::after { content: attr(data-glyph); font: 400 120px/1 var(--font-display); color: var(--gold); }
.card .kbd { z-index: 1; }
.card.evo .tagline { color: var(--dust); }
.game-levelup .four-choices .card .emblem { height: 200px; }

/* 军械库武器图 */
.wcard .pic { display: flex; align-items: center; justify-content: center; }
.wcard .pic img { width: 94%; height: 94%; filter: drop-shadow(4px 4px 0 var(--ink)); }

/* 拾取提示（04 §3）：圣物匣按住打开的进度条，GOLD 平填充 */
.prompt .prompt-bar { width: 160px; height: 14px; }
.prompt .chip { margin-right: 0; }

/* ---------- 局内背包（RUN.BAG，T3.2）：布局沿用上面的 .bag-layout / .ground / .safe-grid，这里补交互和细节 ---------- */
.bag-scrim { background: var(--panel); }
.game-stage:has(> .game-screen[data-screen="RUN.BAG"]) .game-hud { visibility: hidden; }
.bag-head .title { font-size: var(--fs-h2); }
.bag-head .label-en { color: var(--white); }
.bag-head .num { font-size: 44px; color: var(--white); }
.bag-left .panel-title .title, .bag-right .panel-title .title { font-size: var(--fs-panel); }
.bag-left .bag-ground { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.bag-left .bag-safe { flex: none; }
.bag-ground .ground { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--iron) var(--ink); }
.ground-row { cursor: pointer; flex: none; }
.ground-row .nm { font-size: var(--fs-small); }
.bag-layout:not(.is-holding) .ground-row:hover { border-color: var(--white); background: var(--soot); }
.bag-layout.is-holding .ground-row { cursor: default; }
.bag-main .grid, .safe-grid .grid { cursor: pointer; }
/* 背包里的道具默认只显示插画，不画品质底色和外框（须放在上面 .item 规则之后）。只有这几种情况才亮出半透明品质底 + 品质色外轮廓：
   悬停（.is-hover，地面行用 :hover）、放不下时被手上的道具压到（.is-hit）、手上拿着的（.bag-held，便于看形状）。品质靠右栏 chip 和边框颜色区分。
   范围仅限 .bag-layout / .bag-held：仓库、HUD、结算里的道具缩略图不受影响 */
:is(.bag-layout, .bag-held) .item .c { background: none; border-color: transparent; }
:is(.bag-layout, .bag-held) .item.has-art { filter: none; }
:is(.bag-layout, .bag-held) .item.r-common .c { --q: var(--soot); }
:is(.bag-layout, .bag-held) .item.r-rare .c { --q: var(--soul-deep); }
:is(.bag-layout, .bag-held) .item.r-legend .c { --q: var(--oxblood); }
:is(.bag-layout .item.is-hover, .bag-layout .item.is-hit, .bag-held .item, .bag-layout:not(.is-holding) .ground-row:hover .item) .c { background: color-mix(in srgb, var(--q) 62%, transparent); border-color: var(--edge); }
/* 地面行里的道具很小，也直接显示插画；插画失败时退回单字 */
.bag-layout .ground-row .item .art { display: block; filter: drop-shadow(1px 1px 0 var(--ink)); }
.bag-layout .ground-row .item:not(.has-art) .g { display: grid; text-shadow: 2px 2px 0 var(--ink); }
.bag-right .bag-item-name { font-size: var(--fs-h3); }
.bag-right .panel { flex: none; }
.bag-right .bag-stats { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--iron) var(--ink); }
.bag-right .bag-total { margin-top: auto; }
.bag-item-desc { margin: 12px 0 10px; color: var(--white); }
.bag-note { color: var(--dust); font-size: var(--fs-small); padding: 6px 0; }
.v-gold { color: var(--gold); }
.bag-right .capped { color: var(--gold); }
.stat-sub { padding: 2px 0 6px; font-size: var(--fs-micro); color: var(--dust); border-bottom: 1px solid var(--soot); }
/* 手上的道具：跟随鼠标，不挡点击；放不下时抖一下（120ms，无缓动） */
.bag-held { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
.bag-held .item { position: absolute; }
.bag-held.shake .item { animation: bag-shake 120ms steps(4) 1; }
@keyframes bag-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }

/* ---------- 撤离与结算（T3.4）：.extract / .world-tag 的结构见 reference/ui.html，这里补皮肤；结算列表逐行弹出 ---------- */
.game-hud .world-tag .num { color: var(--soul); background: var(--panel); padding: 2px 12px; font-size: var(--fs-body); white-space: nowrap; }
.game-hud .world-tag .d { border: 3px solid var(--ink); }
.game-hud .extract .panel-title .title { font-size: var(--fs-h3); }
.game-hud .extract .panel-title .num { color: var(--soul); font-size: var(--fs-panel); }
.game-hud .extract .bar { height: 22px; }
.game-hud .extract.is-lost .panel-title .title { color: var(--red); }
.game-result .result-rows { align-self: start; max-height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--iron) var(--ink); }
.game-result .result-rows.dense { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-template-columns: 1fr 1fr; column-gap: 48px; }
.game-result .result-rows.dense .result-row { padding: 3px 12px; font-size: var(--fs-small); }
.game-result .result-row { animation: result-pop 80ms steps(2) both; animation-delay: calc(var(--i, 0) * 80ms); }
.game-result .result-row .chip { margin-right: 0; flex: none; }
.game-result .result-row .v { color: var(--gold); }
.game-result .result-row.lost .v { color: var(--ash); }
.game-result .result-row .src { color: var(--dust); font-size: var(--fs-micro); text-decoration: none; display: inline-block; }
.game-result .result-rows.dense .result-row .v { font-size: 26px; }
.game-result .result-empty { padding: 12px; color: var(--dust); font-size: var(--fs-body); }
.game-result .result-side { align-self: start; }
.game-result .stat-line b.lost { color: var(--ash); }
.game-result .result-total .title { font-size: var(--fs-h3); }
.game-result .result-total b { color: var(--gold); }
@keyframes result-pop { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }

/* ---------- 圣物匣头顶提示「长按 F 开启」：世界标记的横排变体，由 hud.js 按距离设 --s 缩放 ---------- */
.game-hud .chest-tag { flex-direction: row; gap: 8px; padding: 4px 12px; background: var(--panel); border-bottom: 4px solid var(--gold); color: var(--white);
  font-size: var(--fs-small); white-space: nowrap; transform: translate(-50%, -50%) scale(var(--s, 1)); }
.game-hud .chest-tag .key { min-width: 28px; padding: 0 6px; line-height: 22px; font-size: var(--fs-small); text-align: center; }

/* ---------- 排行榜 + 结算上榜区（线上，docs/13） ---------- */
.name-input { appearance: none; -webkit-appearance: none; height: 64px; padding: 0 16px; font: 500 var(--fs-body)/1 var(--font-body); color: var(--white); background: var(--ink);
  border: var(--stroke) solid var(--iron); border-radius: 0; outline: 0; user-select: text; -webkit-user-select: text; }
.name-input::placeholder { color: var(--ash); }
.name-input:focus { border-color: var(--gold); }
.name-msg { margin: 0; min-height: 28px; font-size: var(--fs-small); color: var(--dust); }
.game-stage .name-input + .btn, .game-stage .rank-retry { width: 180px; height: 64px; padding: 0 24px; font-size: var(--fs-panel); }

.result-rank { margin-top: 24px; padding-top: 12px; border-top: 2px solid var(--soot); }
.result-rank:empty { display: none; }
.rank-title { font: 400 var(--fs-h3)/1.2 var(--font-display); color: var(--white); margin-bottom: 12px; }
.rank-form { display: flex; gap: 12px; }
.rank-form .name-input { flex: 1; min-width: 0; }
.rank-line { margin: 0 0 6px; font: 400 var(--fs-panel)/1.3 var(--font-display); color: var(--white); }
.rank-line b { font-family: var(--font-num); font-weight: 400; font-size: 40px; color: var(--gold); }
.rank-note { margin: 0 0 6px; font-size: var(--fs-small); color: var(--dust); }
.rank-err { color: var(--red); }
.rank-retry { margin-top: 8px; }

.lb-screen { position: absolute; left: 96px; right: 96px; top: 40px; bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.lb-head .title { font-size: 84px; line-height: 1; color: var(--gold); transform: rotate(-2deg); }
.lb-head .label-en { color: var(--white); font-size: 26px; margin-top: 6px; }
.lb-tabs { display: flex; gap: 24px; }
.game-stage .lb-tabs .btn { width: 360px; justify-content: center; }
.game-stage .lb-tabs .btn[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-left-color: var(--red); }
.lb-body { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.lb-table { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-content: start; padding: 12px 24px 12px; }
.lb-col { display: flex; flex-direction: column; }
.lb-row { display: grid; grid-template-columns: 76px 1fr 128px 172px; align-items: center; gap: 12px; height: 52px; padding: 0 8px; border-bottom: 2px solid var(--soot); font-size: var(--fs-body); }
.lb-row .rk { color: var(--dust); font-size: 30px; }
.lb-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); }
.lb-row .v { text-align: right; font-family: var(--font-num); font-weight: 400; font-size: 32px; }
.lb-row .v.value { color: var(--gold); }
.lb-row .v.kills { color: var(--soul); }
.lb-row .sub { color: var(--dust); font-size: var(--fs-small); text-align: right; white-space: nowrap; }
.lb-col:first-child .lb-row:nth-child(-n+4):not(.lb-th) .rk { color: var(--white); }
.lb-th { height: 40px; color: var(--ash); font-size: var(--fs-small); }
.lb-th .rk, .lb-th .nm, .lb-th .v, .lb-th .sub { color: var(--ash); font: 500 var(--fs-small)/1 var(--font-body); }
.lb-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 480px; font: 400 var(--fs-h3)/1.4 var(--font-display); color: var(--bone); text-align: center; }
.lb-state small { font: 500 var(--fs-small)/1.4 var(--font-body); color: var(--dust); }
.game-stage .lb-state .btn { width: 240px; justify-content: center; }
.lb-me { display: flex; align-items: center; gap: 24px; padding: 8px 24px 8px; }
.lb-me .title { font-size: var(--fs-h3); flex: none; }
.lb-me .lb-row { flex: 1; border-bottom: 0; grid-template-columns: 148px 1fr 128px 172px; }
.lb-me .lb-none { flex: 1; color: var(--dust); }
.lb-me .label-en { flex: none; }
.lb-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.lb-foot > .btn { width: 300px; }
.lb-name { display: flex; align-items: center; gap: 12px; }
.lb-name label { font: 400 var(--fs-panel)/1 var(--font-display); color: var(--white); }
.lb-name .name-input { width: 320px; }
.lb-name .name-msg { width: 300px; min-height: 0; }
.lb-name label { flex: none; white-space: nowrap; }