@font-face {
  font-family: FieldSans;
  src: local("Pretendard"), local("Noto Sans KR"), local("Malgun Gothic");
  font-display: swap;
}
:root {
  --ink: #ffffff;
  --outline: #10122a;
  --yellow: #ffe23a;
  --yellow-dark: #e0a800;
  --blue: #2e9bff;
  --blue-dark: #1663d6;
  --red: #ff3b45;
  --red-dark: #c4152a;
  --green: #46d85a;
  --meta-top: #3d63ff;
  --meta-bottom: #6a32e8;
  --panel: #2b2bb8;
  --panel-dark: #1a1a6e;
  --tab-h: 84px;
  --mono: "Cascadia Code", Consolas, monospace;
  --display: "Arial Black", "Segoe UI Black", "Segoe UI", FieldSans, sans-serif;
  font-family: FieldSans, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #0c0d24;
  font-synthesis: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 50% 30%, #23266b, #0c0d24 70%); overflow: hidden; }
[hidden] { display: none !important; }
button, input, a, label { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; transition: filter .15s, transform .12s; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(2px); }
button:focus-visible, a:focus-visible, input:focus-visible + i, input[type=range]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.outlined, .game-title, .screen-title, .result-title, .game-button, .stage-chip, .tab span, .currency strong, .level-hex, .xp-track b, .stat-row strong, .stat-row span, .combatant-name strong, .health-track b, .shop-card strong, .ammo-card b, .card-modal h2, .hangar-head h2 {
  font-family: var(--display); font-weight: 900; color: #fff; -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; letter-spacing: .2px;
}

/* ---------- App frame: portrait like the original, centred on desktop ---------- */
.app { position: relative; width: min(100vw, calc(100dvh * .5625)); height: 100dvh; margin: 0 auto; overflow: hidden; isolation: isolate; background: #38aee8; box-shadow: 0 0 60px #0008; }
@media (min-aspect-ratio: 9/16) { .app { border-left: 1px solid #ffffff14; border-right: 1px solid #ffffff14; } }

/* ---------- Shared game buttons ---------- */
.game-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 22px; border: 3px solid var(--outline); border-radius: 14px; font-size: 20px; box-shadow: inset 0 -6px 0 #0003, inset 0 3px 0 #fff6, 0 4px 0 var(--outline); }
.game-button svg { width: 26px; height: 26px; stroke: var(--outline); stroke-width: 2.6; }
.game-button svg[viewBox] use { stroke: none; }
.game-button.yellow { background: linear-gradient(#fff36a, var(--yellow) 45%, #ffcc00); }
.game-button.blue { background: linear-gradient(#5cc0ff, var(--blue) 45%, var(--blue-dark)); }
.game-button.red { background: linear-gradient(#ff7480, var(--red) 45%, var(--red-dark)); }
.game-button.green { background: linear-gradient(#8bf27a, var(--green) 45%, #22a63a); }
.game-button.wide { width: 100%; }
.game-button.square { width: 64px; height: 64px; padding: 0; background: linear-gradient(#5b5ff0, #3b3ccf); border-color: #9ea2ff; box-shadow: inset 0 0 0 3px var(--outline), 0 4px 0 var(--outline); }
.game-button.square svg { stroke: #fff; width: 34px; height: 34px; stroke-width: 3.4; filter: drop-shadow(0 2px 0 var(--outline)); }
.game-button.square.active { background: linear-gradient(#59e46d, #23a83b); }
.game-button.price span { font-size: 26px; }
.game-button.price svg { width: 32px; height: 32px; }
/* Unaffordable: still tappable so it can explain itself, but never looks ready. */
.game-button.short { background: linear-gradient(#9aa0b8, #6f7591); filter: saturate(.6); }
.game-button.short span { color: #ffb4b4; }
.need { display: block; min-height: 14px; margin-top: 6px; font: 800 11px var(--mono); color: #ffd2d2; text-align: center; text-shadow: 0 1px 2px #000; }
.shake { animation: shake .38s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.round-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--outline); background: #ffffffe6; color: var(--outline); box-shadow: 0 3px 0 var(--outline); }
.round-button svg { width: 24px; height: 24px; stroke-width: 2.6; }

/* ---------- Arena / battle canvas ---------- */
.arena { position: absolute; inset: 0; overflow: hidden; }
.arena canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.arena.aiming canvas { cursor: grabbing; }
.arena-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px #0a223621; }
.arena::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; box-shadow: inset 0 0 0 #fff0; transition: box-shadow .16s ease-out; }
.arena.impact-feedback::after { box-shadow: inset 0 0 85px #ffe5a02b; }
.arena.impact-feedback[data-hit-side="player"]::after { box-shadow: inset 0 0 95px #fa582947; }

.app:not([data-screen="battle"]) .battle-ui { display: none; }
.app:not([data-screen="lobby"]) .lobby-ui { display: none; }
.app[data-screen="battle"] :is(.meta-top, .tabbar) { display: none; }
.meta-screen { display: none; }
.app[data-screen="shop"] #screen-shop, .app[data-screen="ammo"] #screen-ammo, .app[data-screen="hangar"] #screen-hangar { display: block; }

/* Battle HUD */
.arena-top { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.combatant { width: 47%; position: relative; }
.combatant::before { content: ""; position: absolute; inset: 0 0 26px; background: #0b0d14; z-index: -1; border-radius: 0 0 24px 0; }
.combatant.enemy::before { border-radius: 0 0 0 24px; }
.health-track { position: relative; height: 26px; margin: 10px 10px 0; overflow: hidden; background: #22314a; border-radius: 7px; border: 2px solid #3a4f6a; }
.health-track > span { display: block; width: 100%; height: 100%; border: 2px solid #8fe0ff; background: linear-gradient(#3cb6ff, #1e7ff0); border-radius: 4px; transition: width .35s cubic-bezier(.2,.6,.3,1); }
.enemy .health-track > span { margin-left: auto; border-color: #ff8a93; background: linear-gradient(#ff4a5f, #e01530); }
.health-track b { position: absolute; top: 0; left: 8px; line-height: 22px; font-size: 18px; -webkit-text-stroke-width: 3.5px; }
.enemy .health-track b { left: auto; right: 8px; }
.health-track small { font-size: 13px; }
.combatant-name { display: flex; align-items: center; gap: 6px; height: 34px; padding: 6px 12px 0; }
.enemy .combatant-name { justify-content: flex-end; }
.combatant-name strong { font-size: 16px; -webkit-text-stroke-width: 3.5px; }
.combatant-name span { font: 800 9px var(--mono); padding: 2px 5px; border-radius: 4px; background: #0b0d14b0; color: #dfe8ef; }
.turn-status { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 20px; background: #0b0d14b8; font-size: 11px; font-weight: 800; z-index: 3; white-space: nowrap; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9df07a; box-shadow: 0 0 8px #9df07a80; }
.enemy-turn .live-dot { background: #ff725c; box-shadow: 0 0 8px #ff725c80; }
.enemy-turn #turn-label { color: #ffc3ad; }
.turn-number { font: 9px var(--mono); border-left: 1px solid #ffffff40; padding-left: 7px; color: #b9c8d4; }
.turn-banner { position: absolute; top: 34%; left: 0; right: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; animation: banner 1.25s ease-out forwards; }
.turn-banner span { padding: 8px 28px; white-space: nowrap; font: 900 clamp(20px, 7.2vw, 34px) var(--display); color: #fff; -webkit-text-stroke: 5px var(--outline); paint-order: stroke fill; background: linear-gradient(90deg, #0000, #2e9bffcc 20%, #2e9bffcc 80%, #0000); }
.turn-banner.enemy span { background: linear-gradient(90deg, #0000, #ff3b45cc 20%, #ff3b45cc 80%, #0000); }
@keyframes banner { 0% { opacity: 0; transform: scale(1.3); } 15%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

.yaw-hud, .pitch-hud, .drive-hud { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 4; }
.hud-caption { font: 800 8px var(--mono); letter-spacing: 1.2px; color: #fff; text-shadow: 0 2px 3px #132c3b; }
.yaw-hud { top: 104px; left: 50%; transform: translateX(-50%); gap: 5px; }
.yaw-hud .hud-caption { display: none; }
.yaw-ruler, .pitch-ruler { position: relative; }
.yaw-ruler { width: 170px; padding: 8px 13px; background: #183f55a6; border: 1px solid #c6eaff2e; border-radius: 12px; }
input[type="range"] { appearance: none; -webkit-appearance: none; margin: 0; border-radius: 2px; background: transparent; }
.yaw-ruler input { display: block; width: 100%; height: 17px; cursor: ew-resize; background: repeating-linear-gradient(90deg,transparent 0,transparent 11px,#fff 11px,#fff 14px,transparent 14px,transparent 16px); }
.yaw-ruler input::-webkit-slider-thumb { appearance: none; width: 15px; height: 24px; background: #18d5f7; border: 3px solid #071720; border-radius: 5px; }
.yaw-ruler input::-moz-range-thumb { width: 11px; height: 20px; background: #18d5f7; border: 3px solid #071720; border-radius: 5px; }
/* Previous-shot marker: the analysed game's best aiming aid. */
.ghost-mark { position: absolute; pointer-events: none; width: 0; height: 0; border: 7px solid transparent; }
.yaw-ruler .ghost-mark { top: -9px; left: calc(13px + (100% - 26px) * var(--at, .5)); transform: translateX(-50%); border-top-color: #33f0ff; filter: drop-shadow(0 1px 0 #071720); }
.pitch-ruler .ghost-mark { left: -10px; bottom: calc(10px + (100% - 20px) * var(--at, 0)); transform: translateY(50%); border-left-color: #33f0ff; filter: drop-shadow(1px 0 0 #071720); }
.yaw-hud output, .pitch-hud output { background: repeating-linear-gradient(135deg,#ffe728 0,#ffe728 8px,#fff268 8px,#fff268 13px); border: 3px solid #10160d; border-radius: 9px; padding: 2px 7px; min-width: 46px; text-align: center; font: 900 20px var(--display); color: #10150e; box-shadow: inset 0 0 0 2px #f6be0b, 0 3px 0 #11233244; letter-spacing: -1px; }
.yaw-hud output span, .pitch-hud output span { font-size: 13px; }
.pitch-hud { left: 10px; top: 30%; gap: 7px; }
.pitch-ruler { width: 28px; height: 190px; padding: 10px 4px; border-radius: 12px; background: #1335489c; border: 1px solid #e5fbff35; }
.pitch-ruler input { writing-mode: vertical-lr; direction: rtl; width: 18px; height: 100%; display: block; cursor: ns-resize; background: repeating-linear-gradient(0deg,transparent 0,transparent 12px,#fff 12px,#fff 15px,transparent 15px,transparent 18px); }
.pitch-ruler input::-webkit-slider-thumb { appearance: none; width: 25px; height: 15px; border: 3px solid #071720; background: #18d5f7; border-radius: 5px; }
.pitch-ruler input::-moz-range-thumb { width: 21px; height: 11px; border: 3px solid #071720; background: #18d5f7; border-radius: 5px; }
.drive-hud { right: 10px; top: 34%; gap: 6px; }
.combat-fuel { width: 20px; height: 90px; border: 3px solid #121a12; background: #353d29; border-radius: 12px; position: relative; overflow: hidden; }
.combat-fuel > span { position: absolute; inset: auto 0 0; height: 100%; background: linear-gradient(90deg,#ffdd00,#ffb900); border: 2px solid #ffee53; border-radius: 8px; transition: height .1s; }
#combat-fuel-value { font: 800 10px var(--mono); color: #fff7c9; text-shadow: 0 2px 2px #162213; }
.drive-button { width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 3px solid #111b14; border-radius: 15px; background: linear-gradient(135deg,#a7b08a,#7d8965); box-shadow: inset 0 0 0 3px #bec6a733,inset 0 -5px 0 #263b284d,0 4px 0 #1220195c; touch-action: none; user-select: none; }
.drive-button > span { font-size: 24px; line-height: 24px; color: #f6ffff; -webkit-text-stroke: 3px #1c292a; paint-order: stroke fill; }
.drive-button kbd { font: 7px var(--mono); color: #263d2b; }
.edge-warning { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); z-index: 6; padding: 9px 14px; border: 3px solid var(--outline); border-radius: 10px; background: #ffcf2e; color: #2a1a00; font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 0 var(--outline); animation: pulse .8s infinite alternate; pointer-events: none; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.05); } }
.control-deck { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 64px; gap: 6px 7px; width: min(360px, calc(100% - 20px)); padding: 6px; border-radius: 13px; background: #1129387d; border: 1px solid #bdd7e649; backdrop-filter: blur(9px); z-index: 5; }
.weapon-list { display: flex; gap: 6px; min-width: 0; }
.weapon { position: relative; flex: 1; min-width: 0; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 3px 5px; border: 2px solid #74b7d7; border-radius: 9px; background: repeating-linear-gradient(135deg,#126d9c 0,#126d9c 12px,#0c608d 12px,#0c608d 25px); box-shadow: inset 0 1px 0 #baf1ff7a,inset 0 -4px 0 #002a6470,0 3px 0 #061e30b3; color: #fff; }
.weapon[data-weapon="crater"] { border-color: #c8a15c; background: repeating-linear-gradient(135deg,#9d6128 0,#9d6128 12px,#925322 12px,#925322 25px); }
.weapon[data-weapon="volley"] { border-color: #b29bce; background: repeating-linear-gradient(135deg,#73549a 0,#73549a 12px,#66488c 12px,#66488c 25px); }
.weapon.selected { border-color: #fffbd4; box-shadow: 0 0 0 2px #ffec61,inset 0 0 15px #76e0ff36,0 4px 0 #173b55; }
.weapon-art { width: 40px; height: 46px; filter: drop-shadow(0 2px 2px #092c4d70); }
.weapon-text strong { font-size: 10px; text-shadow: 0 1px 2px #0009; white-space: nowrap; }
.weapon-key { position: absolute; left: 4px; top: 2px; font: 8px var(--mono); opacity: .6; }
.weapon-count { position: absolute; right: 4px; top: 2px; font: 900 12px "Segoe UI",sans-serif; text-shadow: 0 2px #173249; }
.fire-button { height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 3px solid #172317; border-radius: 11px; background: linear-gradient(145deg,#ffe870,#e9b631); color: #233322; box-shadow: inset 0 0 0 2px #fff29a,inset 0 -5px 0 #bc922c; }
.fire-button svg { width: 26px; height: 26px; stroke-width: 2.3; }
.fire-button strong { font-size: 12px; }
.ammo-description { grid-column: 1 / -1; text-align: center; font-size: 10px; color: #dff2ff; text-shadow: 0 1px 2px #000; }
.arena-message { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: 86%; width: max-content; padding: 7px 11px; border-radius: 7px; background: #102c3ab0; color: #f0fcff; border: 1px solid #c6e9f52a; font-size: 11px; text-align: center; pointer-events: none; transition: opacity .15s; z-index: 4; }
.message-cross { color: #bdf57e; font: bold 15px var(--mono); }
.arena.aiming .arena-message { opacity: 0; }
.aim-ready { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #ffe9988a; border-radius: 9px; background: #1c3b35de; color: #fff4bc; font-size: 12px; font-weight: 700; pointer-events: none; z-index: 5; }
.aim-ready svg { width: 20px; height: 20px; }
.ready-progress { position: absolute; bottom: 0; left: 7px; right: 7px; height: 3px; overflow: hidden; }
.ready-progress i { display: block; width: 0; height: 100%; background: var(--yellow); }
.yaw-hud, .pitch-hud, .drive-hud, .control-deck { transition: opacity .15s; }
.arena:not([data-phase="aim"]) :is(.yaw-hud,.pitch-hud,.drive-hud,.control-deck,.arena-message,.aim-ready,.edge-warning) { visibility: hidden; opacity: 0; pointer-events: none; }
.tank-tag { position: absolute; transform: translate(-50%,-100%); pointer-events: none; z-index: 2; }
.player-tag { display: none; }
.enemy-tag { font-size: 0; width: 24px; height: 25px; transform: translate(-50%,-100%) scale(.85); }
.enemy-tag::before { content: ""; position: absolute; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 26px solid #171d20; }
.enemy-tag::after { content: ""; position: absolute; left: 4px; top: 3px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 18px solid #ff3d55; }
.app:not([data-screen="battle"]) .tank-tag { display: none; }
#floating-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.damage-label { position: absolute; top: 0; left: 0; color: #fffce5; font: 900 30px var(--display); letter-spacing: -1px; -webkit-text-stroke: 4px #202724; paint-order: stroke fill; text-shadow: 0 4px 0 #192820aa; white-space: nowrap; }
.damage-label.miss { font-size: 22px; color: #e8f6ff; }
.damage-label.short { color: #9fe6ff; }
.damage-label.long { color: #ffd59a; }
.direct-hit-label { color: #fff09c; }
.battle-corner { position: absolute; top: 72px; left: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.battle-corner .round-button { width: 40px; height: 40px; }
.camera-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d0e7ea6b; background: #183747c0; color: #fff; backdrop-filter: blur(7px); }
.camera-button svg { width: 18px; height: 18px; }
.camera-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.camera-button[aria-pressed="true"] { background: #2e9bff; }
.loading, .pause-layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; z-index: 10; text-align: center; }
.loading { background: #0b2335de; backdrop-filter: blur(12px); font-size: 17px; }
.loading span { color: #b5cfdd; font: 9px var(--mono); letter-spacing: 2px; }
.pause-layer { padding: 0 40px; background: #1a1a6ee6; backdrop-filter: blur(6px); }
.pause-layer .game-title { margin: 0 0 18px; }
.pause-note { margin: 4px 0 0; font-size: 11px; color: #c8ccff; line-height: 1.6; }

/* ---------- Lobby ---------- */
.lobby-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lobby-ui > * { pointer-events: auto; }
.gear { position: absolute; top: 72px; left: 14px; }
.lobby-cta { position: absolute; left: 0; right: 0; bottom: calc(var(--tab-h) + 70px); display: flex; flex-direction: column; align-items: center; gap: 0; }
.stage-chip { position: relative; z-index: 1; margin-bottom: -6px; padding: 3px 16px; border: 3px solid var(--outline); border-radius: 10px 10px 0 0; background: #121530; font-size: 15px; color: #8bf27a; -webkit-text-stroke-width: 0; }
.battle-start { min-width: 190px; min-height: 66px; font-size: 30px; border-radius: 16px; }
.lobby-tip { margin-top: 12px; padding: 4px 10px; border-radius: 12px; background: #0b0d14a8; font-size: 11px; color: #e8f1ff; }

/* ---------- Meta header ---------- */
.meta-top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 0; pointer-events: none; }
.meta-top > * { pointer-events: auto; }
.player-badge { display: flex; align-items: center; }
.level-hex { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 46px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--outline); font-size: 20px; -webkit-text-stroke-width: 3px; }
.level-hex::before { content: ""; position: absolute; inset: 3px; z-index: -1; clip-path: inherit; background: linear-gradient(#ffe766, #ffb300); }
.level-hex.big { width: 96px; height: 100px; font-size: 44px; -webkit-text-stroke-width: 6px; }
.level-hex.big::before { inset: 5px; }
.player-xp { display: flex; flex-direction: column; margin-left: -6px; }
.player-xp small { margin-left: 12px; font-size: 10px; font-weight: 900; text-shadow: 0 1px 2px #000; }
.xp-track { position: relative; display: block; width: 92px; height: 18px; border: 2px solid var(--outline); border-radius: 0 9px 9px 0; background: #1d2240; overflow: hidden; }
.xp-track > span { display: block; height: 100%; width: 0; background: linear-gradient(#ffe766, #ffb300); transition: width .5s; }
.xp-track b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; -webkit-text-stroke-width: 2.5px; }
.xp-track.wide { width: 240px; height: 26px; border-radius: 13px; }
.xp-track.wide b { font-size: 14px; -webkit-text-stroke-width: 3px; }
.currency-bar { display: flex; gap: 5px; }
.currency { position: relative; display: flex; align-items: center; height: 28px; padding: 0 28px 0 18px; margin-left: 8px; border-radius: 9px; background: #0b0d18d0; }
.currency strong { font-size: 13px; -webkit-text-stroke-width: 0; font-family: var(--display); }
.currency > svg { position: absolute; left: -12px; width: 28px; height: 28px; stroke: none; filter: drop-shadow(0 2px 0 #0007); }
.currency .plus { position: absolute; right: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #46d85a; color: #fff; font: 900 16px/1 var(--display); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; box-shadow: inset 0 0 0 2px var(--outline); }
.currency.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ---------- Bottom tab bar ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--tab-h); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding-bottom: env(safe-area-inset-bottom); background: #232744; border-top: 3px solid var(--outline); }
.tab { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-left: 2px solid #ffffff10; }
.tab > svg { width: 40px; height: 40px; stroke: none; transition: transform .15s; filter: drop-shadow(0 3px 0 #0006); }
.tab span { font-size: 12px; -webkit-text-stroke-width: 3px; }
.tab.selected { margin-top: -16px; height: calc(100% + 16px); background: linear-gradient(#3fb5ff, #1d6fe6); border: 3px solid var(--outline); border-bottom: 0; border-radius: 16px 16px 0 0; }
.tab.selected > svg { transform: scale(1.25) translateY(-4px); }
.tab.locked > svg { width: 30px; height: 30px; stroke: #b8bdd8; stroke-width: 2.4; }
.tab.locked span { color: #b8bdd8; }
.badge { position: absolute; top: 8px; right: calc(50% - 30px); width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: var(--red); font: 900 11px/16px var(--display); font-style: normal; text-align: center; }

/* ---------- Meta screens ---------- */
.meta-screen { position: absolute; inset: 0 0 var(--tab-h); z-index: 10; overflow-y: auto; padding: 66px 14px 24px; background: linear-gradient(170deg, var(--meta-top), var(--meta-bottom)); scrollbar-width: thin; }
.screen-title { margin: 6px 0 14px; padding: 8px 16px; border-radius: 12px; background: #0b0d18; font-size: 26px; -webkit-text-stroke-width: 0; }
.shop-section { margin-bottom: 16px; padding: 10px 10px 12px; border-radius: 16px; background: #00000026; scroll-margin-top: 70px; }
.shop-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px; border-radius: 10px; background: #0b0d18; font: 900 18px var(--display); }
.shop-section h3 svg { width: 26px; height: 26px; stroke: #fff; }
.shop-section h3 svg:has(use[href^="#g-"]) { stroke: none; }
.shop-section.highlight { animation: glow 1.2s; }
@keyframes glow { 30% { box-shadow: 0 0 0 4px var(--yellow); } }
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shop-card { display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 0; border: 3px solid var(--outline); border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--outline); color: var(--outline); }
.shop-card .art { display: grid; place-items: center; align-self: stretch; height: 86px; background: radial-gradient(circle at 50% 55%, #fff6, #0000 60%), linear-gradient(#ffd93a, #ffb800); }
.shop-card.purple .art { background: radial-gradient(circle at 50% 55%, #fff4, #0000 60%), linear-gradient(#9c4dff, #6b1fe0); }
.shop-card.blue .art { background: radial-gradient(circle at 50% 55%, #fff5, #0000 60%), linear-gradient(#5bc4ff, #2a7ff0); }
.shop-card.green .art { background: radial-gradient(circle at 50% 55%, #fff5, #0000 60%), linear-gradient(#7cf08a, #22b04a); }
.shop-card .art svg { width: 46px; height: 46px; stroke: none; filter: drop-shadow(0 3px 0 #0005); }
.shop-card .art strong { font-size: 20px; margin-top: -6px; }
.shop-card .cost { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 7px 0; font: 900 15px var(--display); }
.shop-card .cost svg { width: 20px; height: 20px; stroke: none; }
.shop-card.short .cost { color: #c2384a; }
.shop-card:disabled .cost { color: #6c7290; }
.shop-card.free .cost { background: var(--green); color: #fff; -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.shop-note { margin: 4px 4px 0; font-size: 11px; line-height: 1.6; color: #e4e6ff; }
.segmented { display: flex; gap: 4px; width: max-content; margin: 0 auto 14px; padding: 4px; border: 3px solid var(--outline); border-radius: 14px; background: #0b0d18; }
.segmented button { padding: 6px 16px; border-radius: 9px; font: 900 13px var(--display); color: #c8ccef; }
.segmented button.selected { background: var(--yellow); color: var(--outline); }
.ammo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ammo-card { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid #39d0ff; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #6bd5ff, #1c63c9 70%); box-shadow: inset 0 0 0 2px var(--outline), 0 4px 0 var(--outline); }
.ammo-card[data-ammo="crater"] { border-color: #ffb63a; background: radial-gradient(circle at 50% 45%, #ffcf6b, #d4561d 70%); }
.ammo-card[data-ammo="volley"] { border-color: #c69bff; background: radial-gradient(circle at 50% 45%, #c89dff, #6630c7 70%); }
.ammo-card svg { width: 64%; height: 64%; filter: drop-shadow(0 3px 0 #0006); }
.ammo-card .lv { position: absolute; top: 5px; left: 7px; font: 900 13px var(--display); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.ammo-card b { position: absolute; right: 7px; bottom: 4px; font-size: 16px; -webkit-text-stroke-width: 3px; }
.ammo-card .up { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--outline); border-radius: 50%; background: var(--green); font: 900 15px/1 var(--display); }

/* Hangar */
.hangar { text-align: center; }
.hangar-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.hangar-head h2 { margin: 0; font-size: 30px; -webkit-text-stroke-width: 5px; }
.tier { display: grid; place-items: center; width: 30px; height: 34px; clip-path: polygon(50% 0, 100% 20%, 100% 70%, 50% 100%, 0 70%, 0 20%); background: #1d6fe6; font: 900 14px var(--display); box-shadow: inset 0 0 0 3px var(--outline); }
.power-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 14px; border-radius: 14px; background: #0b0d18b0; font: 900 18px var(--display); }
.power-chip svg { width: 18px; height: 18px; fill: var(--yellow); stroke: var(--outline); stroke-width: 1.6; }
.hangar-stage { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px -6px 0; }
.nav-arrow { display: grid; place-items: center; width: 40px; height: 52px; color: #fff; }
.nav-arrow svg { width: 34px; height: 34px; stroke-width: 4; filter: drop-shadow(0 0 0 var(--outline)) drop-shadow(0 3px 0 var(--outline)); }
.tank-art { position: relative; flex: 1; height: 150px; display: grid; place-items: center; }
.tank-art::after { content: ""; position: absolute; bottom: 12px; left: 15%; right: 15%; height: 18px; border-radius: 50%; background: #0003; z-index: -1; }
.tank-art > svg { width: 100%; height: 100%; color: #8d8868; stroke: none; filter: drop-shadow(0 6px 0 #0002); transition: transform .25s; }
.tank-art.locked > svg { filter: brightness(.35) saturate(.3); }
.tank-lock { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; color: var(--outline); border: 3px solid var(--outline); }
.tank-lock svg { width: 32px; height: 32px; stroke-width: 2.6; }
.tank-dots { display: flex; justify-content: center; gap: 6px; margin: -4px 0 8px; }
.tank-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff55; }
.tank-dots i.current { background: #fff; }
.tank-dots i.equipped { box-shadow: 0 0 0 2px var(--green); }
.stat-panel { padding: 10px; border: 3px solid var(--outline); border-radius: 16px; background: #2741d0; text-align: left; }
.upgrade-track { position: relative; height: 22px; margin-bottom: 8px; border: 3px solid var(--outline); border-radius: 11px; background: #12163b; overflow: hidden; }
.upgrade-track > span { display: block; height: 100%; width: 0; background: linear-gradient(#8bf27a, #2bb84a); transition: width .4s; }
.upgrade-track b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 12px var(--display); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.stat-row { display: grid; grid-template-columns: 28px 1fr auto 52px; align-items: center; gap: 8px; height: 34px; margin-top: 5px; padding: 0 8px; border-radius: 8px; background: #0b0d18; }
.stat-row > svg { width: 22px; height: 22px; color: #6fd4ff; }
.stat-row span { font-size: 14px; -webkit-text-stroke-width: 0; }
.stat-row strong { font-size: 17px; -webkit-text-stroke-width: 0; }
.stat-row em { font: 900 13px var(--display); font-style: normal; text-align: right; color: var(--green); }
.stat-row em.down { color: #ff7d86; }
.hangar-actions { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin-top: 14px; }
.action-box { display: flex; flex-direction: column; align-items: center; padding: 4px 8px 6px; border-radius: 14px; background: #0b0d18b0; }
.action-box > small, .card-modal-foot > small:first-child { font: 900 12px var(--display); margin-bottom: 4px; }
.action-box .game-button { min-width: 170px; }

/* ---------- Dialogs ---------- */
dialog { color: var(--ink); }
dialog::backdrop { background: #08092099; backdrop-filter: blur(3px); }
.toast { position: fixed; inset: auto auto calc(var(--tab-h) + 18px) 50%; margin: 0; overflow: visible; width: max-content; transform: translate(-50%,20px); max-width: min(420px, calc(100% - 30px)); padding: 11px 16px; border: 3px solid var(--outline); border-radius: 12px; background: #fff; color: var(--outline); box-shadow: 0 4px 0 var(--outline); opacity: 0; pointer-events: none; z-index: 60; transition: opacity .2s,transform .2s; font-size: 13px; font-weight: 800; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast.warn { background: #ffe2e2; }
.sheet { width: min(100vw, calc(100dvh * .5625)); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 80px 40px 30px; border: 0; background: linear-gradient(170deg, var(--meta-top), var(--meta-bottom)); display: none; }
.sheet[open] { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.game-title { margin: 0 0 40px; text-align: center; font-size: 40px; -webkit-text-stroke-width: 7px; }
.toggle-row { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 12px; background: #0b0d18; font: 900 17px var(--display); cursor: pointer; }
.toggle-row svg { width: 22px; height: 22px; }
.toggle-row span { flex: 1; }
.toggle-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-row i { position: relative; width: 52px; height: 28px; border-radius: 14px; background: #535877; transition: background .15s; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 6px; background: #e8ecff; transition: transform .15s; }
.toggle-row input:checked + i { background: var(--green); }
.toggle-row input:checked + i::after { transform: translateX(24px); }
.settings .game-button.blue { margin-top: 18px; }
.version { margin: auto 0 0; text-align: center; font: 900 13px var(--display); }
.version b { margin-left: 6px; padding: 3px 10px; border-radius: 10px; background: #0b0d18; }
.save-note { margin: 0; text-align: center; font-size: 11px; color: #dfe2ff; }
.game-button.back { align-self: center; width: 150px; margin-top: 6px; }
.game-button.back svg { stroke: #fff; width: 30px; height: 30px; stroke-width: 3.4; filter: drop-shadow(0 2px 0 var(--outline)); }
.card-modal { width: min(390px, calc(100vw - 24px)); padding: 0; border: 3px solid var(--outline); border-radius: 18px; background: #2f6dff; box-shadow: 0 6px 0 var(--outline); overflow: visible; }
.card-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; background: #0b0d18; border-radius: 14px 14px 0 0; }
.card-modal h2 { margin: 0; font-size: 24px; -webkit-text-stroke-width: 0; }
.close-x { display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--outline); border-radius: 10px; background: linear-gradient(#ff7480, var(--red)); box-shadow: inset 0 0 0 2px #fff; }
.close-x svg { stroke: #fff; stroke-width: 4; width: 22px; height: 22px; }
.card-modal-body { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 16px; }
.card-modal-body p { margin: 0 0 10px; font-size: 13px; font-weight: 800; line-height: 1.45; }
.ammo-detail-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 3px solid #39d0ff; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #6bd5ff, #1c63c9 70%); box-shadow: inset 0 0 0 2px var(--outline); }
.ammo-detail-art svg { width: 72%; height: 72%; }
.ammo-detail-art .lv { position: absolute; top: 5px; left: 7px; font: 900 13px var(--display); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.damage-box { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 5px 10px; border-radius: 10px; background: #0b0d18; }
.damage-box svg { grid-row: span 2; width: 26px; height: 26px; color: #ff6b6b; }
.damage-box small { font: 900 10px var(--display); color: #c9d2ff; }
.damage-box strong { font: 900 22px var(--display); }
.damage-box em { grid-row: span 2; grid-column: 3; font: 900 16px var(--display); font-style: normal; color: var(--green); }
.ammo-meta { font-size: 11px !important; color: #e7ecff; }
.card-modal-foot { display: flex; flex-direction: column; align-items: center; padding: 12px 16px 16px; background: #00000022; border-radius: 0 0 15px 15px; }
.card-modal-foot .game-button { min-width: 160px; }
.help .help-steps { display: grid; gap: 14px; padding: 16px; }
.help-steps > div { display: flex; gap: 12px; }
.help-steps b { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--outline); font: 900 14px var(--display); }
.help-steps strong { display: block; font-size: 14px; margin-bottom: 4px; }
.help-steps small { display: block; font-size: 12px; line-height: 1.55; color: #e6ecff; }
.help-keyboard { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 16px 12px; font-size: 11px; color: #e6ecff; }
.help-keyboard kbd { background: #0b0d18; padding: 2px 6px; border-radius: 5px; font-family: var(--mono); }
.help > .game-button { display: flex; width: calc(100% - 32px); margin: 0 16px 16px; }
.result { width: min(100vw, calc(100dvh * .5625)); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 60px 24px 40px; border: 0; background: radial-gradient(circle at 50% 38%, #3b3a1c99, #090a14e6 70%); display: none; text-align: center; }
.result[open] { display: flex; flex-direction: column; align-items: center; }
.result::backdrop { background: #0006; backdrop-filter: none; }
.result-title { margin: 0; white-space: nowrap; font-size: 46px; -webkit-text-stroke-width: 7px; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.result.defeat .result-title { color: #ff2f3f; font-size: clamp(26px, 8.4vw, 38px); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.result-reason { min-height: 20px; margin: 10px 0 22px; padding: 5px 12px; border-radius: 10px; background: #0008; font-size: 13px; font-weight: 800; color: #ffe9a8; }
.result-level { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.result-level .level-hex.big { filter: drop-shadow(0 0 24px #ffc80088); }
.xp-gain { font: 900 20px var(--display); color: var(--yellow); -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; }
.rewards-label { margin: 28px 0 10px; font: 900 18px var(--display); -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; }
.reward-cards { display: flex; gap: 12px; }
.reward-cards > div { position: relative; width: 78px; height: 78px; padding-top: 36px; border: 3px solid #5bb0ff; border-radius: 14px; background: linear-gradient(#2f6dff, #1d48d0); }
.reward-cards svg { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; stroke: none; filter: drop-shadow(0 3px 0 #0007); }
.reward-cards strong { font: 900 22px var(--display); -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; }
.result-shots { margin: 14px 0 0; font: 11px var(--mono); color: #c9cde8; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 360px; margin-top: auto; }
.result-actions .game-button { min-height: 60px; }

@media (max-height: 700px) {
  .meta-screen { padding-top: 60px; }
  .tank-art { height: 120px; }
  .result { padding-top: 30px; }
  .rewards-label { margin-top: 16px; }
}
@media (max-width: 360px) {
  .currency { padding: 0 24px 0 16px; }
  .currency strong { font-size: 11px; }
  .xp-track { width: 70px; }
  .yaw-ruler { width: 140px; }
  .weapon-text strong { font-size: 8px; }
}
.shop-card.wide-card { grid-column: 1 / -1; }
.shop-card.wide-card .art { height: 74px; }
.daily-items { display: flex; align-items: center; gap: 4px; }
.daily-items svg { width: 34px !important; height: 34px !important; }
.daily-items strong { margin: 0 10px 0 0 !important; font-size: 20px; }
.shop-note.empty { grid-column: 1 / -1; text-align: center; padding: 20px 0; }

/* ---------- Content pass: loading, tutorials, hit zones, medals, loadout, revive, level up ---------- */
.loading { background: repeating-conic-gradient(from 45deg, #3d4fd8 0 25%, #4558e4 0 50%) 0 0 / 64px 64px; gap: 10px; }
.loading .logo { display: flex; flex-direction: column; align-items: center; line-height: .9; transform: rotate(-4deg); margin-bottom: 40px; }
.loading .logo b { font: 900 54px var(--display); color: #fff; -webkit-text-stroke: 8px var(--outline); paint-order: stroke fill; letter-spacing: -1px; }
.loading .logo b + b { color: var(--yellow); font-size: 46px; }
.loading small { font: 900 12px var(--display); letter-spacing: 1px; }
.load-bar { width: 150px; height: 14px; border: 3px solid var(--outline); border-radius: 8px; background: #1d2240; overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(#5cc0ff, var(--blue-dark)); animation: load 1.1s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.loading em { margin-top: 30px; font: 800 11px var(--mono); font-style: normal; color: #dfe4ff; }
.map-chip { margin-top: 6px; padding: 2px 10px; border-radius: 8px; background: #0b0d14b8; font-size: 12px; font-weight: 800; order: 3; }
.lobby-cta { display: flex; }
.lobby-cta .battle-start { order: 2; }
.lobby-cta .stage-chip { order: 1; }
.lobby-cta .map-chip { order: 3; }
.lobby-cta .lobby-tip { order: 4; }
.tab.pulse { animation: tabPulse 1.1s ease-in-out infinite; }
.tab.pulse::after { content: "👆"; position: absolute; top: -26px; font-size: 26px; animation: point .9s ease-in-out infinite alternate; }
@keyframes tabPulse { 50% { background: #3b56c9; } }
@keyframes point { to { transform: translateY(8px); } }
.game-button.pulse { animation: btnPulse 1s ease-in-out infinite; }
@keyframes btnPulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 6px #ffe23a66, 0 4px 0 var(--outline); } }

.arena[data-movement="locked"] .drive-hud { display: none; }
.hit-badge { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; animation: badge 1.3s ease-out forwards; }
.hit-badge svg { width: 46px; height: 50px; padding: 9px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #3e5f86; color: #fff; stroke-width: 2.4; box-shadow: inset 0 0 0 3px #a9c8ea; }
.hit-badge span { font: 900 15px var(--display); color: #fff; -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; }
.hit-badge.critical svg { background: #c4152a; box-shadow: inset 0 0 0 3px #ffb0b8; }
.hit-badge.critical span { color: #ffd84a; }
@keyframes badge { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 15%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
.medal-toast { position: absolute; top: 160px; right: 10px; z-index: 8; display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border: 3px solid var(--outline); border-radius: 12px; background: linear-gradient(#fff36a, #ffc800); color: var(--outline); font: 900 13px var(--display); box-shadow: 0 4px 0 var(--outline); pointer-events: none; animation: medal 1.5s ease-out forwards; }
.medal-toast svg { width: 20px; height: 20px; fill: #fff; stroke: var(--outline); }
.medal-toast.bad { background: linear-gradient(#d6dbe8, #9aa3bb); }
@keyframes medal { 0% { opacity: 0; transform: translateX(40px); } 12%, 80% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
.flight-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 8px 14px; border: 3px solid var(--outline); border-radius: 12px; background: #fff; color: var(--outline); font-size: 13px; font-weight: 900; pointer-events: none; animation: pulse .7s infinite alternate; }
.damage-label.burn { color: #ffb15a; font-size: 24px; }

.tutorial { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.tutorial p { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; margin: 0; padding: 8px 14px; border: 3px solid var(--outline); border-radius: 12px; background: #fff; color: var(--outline); font-size: 14px; font-weight: 900; text-align: center; box-shadow: 0 4px 0 var(--outline); }
.tutorial[data-kind="aim"] p { top: 30%; }
.arena:not([data-phase="aim"]) .tutorial { display: none; }
.tutorial[data-kind="move"] p { top: 24%; }
.tutorial-hand { position: absolute; }
.tutorial-hand .hand { position: absolute; font-size: 44px; filter: drop-shadow(0 3px 0 #0006); }
.tutorial[data-kind="aim"] .tutorial-hand { left: 54%; top: 62%; }
.tutorial[data-kind="aim"] .hand { animation: dragUp 1.6s ease-in-out infinite; }
.tutorial[data-kind="aim"] .drag-trail { position: absolute; left: 14px; top: -150px; width: 6px; height: 160px; border-radius: 3px; background: repeating-linear-gradient(#7dff6a 0 10px, transparent 10px 18px); opacity: .85; }
@keyframes dragUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(-140px); opacity: 1; } 100% { transform: translateY(-140px); opacity: 0; } }
.tutorial[data-kind="move"] .tutorial-hand { right: 58px; top: calc(34% + 150px); }
.tutorial[data-kind="move"] .hand { transform: rotate(-90deg); animation: tapRight .8s ease-in-out infinite alternate; }
.tutorial[data-kind="move"] .drag-trail { display: none; }
@keyframes tapRight { to { transform: rotate(-90deg) translateY(-10px); } }

.stars { display: flex; justify-content: center; gap: 3px; margin-top: 6px; }
.stars svg { width: 18px; height: 18px; fill: #1d2a73; stroke: var(--outline); stroke-width: 1.6; }
.stars svg.on { fill: var(--yellow); }
.loadout { position: relative; margin: 0 0 10px; padding: 18px 8px 8px; border: 3px solid var(--outline); border-radius: 14px; background: #2741d0; }
.loadout-label { position: absolute; top: -12px; left: 12px; padding: 2px 10px; border-radius: 8px 8px 0 0; background: #0b0d18; font: 900 11px var(--display); }
.loadout-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid #39d0ff; border-radius: 10px; background: radial-gradient(circle at 50% 45%, #6bd5ff, #1c63c9 70%); box-shadow: inset 0 0 0 2px var(--outline); }
.slot svg { width: 70%; height: 70%; }
.slot b { position: absolute; right: 4px; bottom: 2px; font: 900 12px var(--display); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.slot.empty { border-color: #5a6bdc; background: #1f2f9e; font: 900 24px var(--display); color: #8f9bff; box-shadow: inset 0 0 0 2px var(--outline); }
.loadout-count { margin: -6px 0 10px; text-align: center; font: 900 12px var(--display); color: #e4e6ff; }
.ammo-card.locked svg:not(.gem) { filter: grayscale(1) brightness(.55); }
.ammo-card.locked { border-color: #6a74a8; background: radial-gradient(circle at 50% 45%, #6a74a8, #2a2f63 70%); }
.ammo-card.equipped { box-shadow: inset 0 0 0 2px var(--outline), 0 0 0 3px var(--green), 0 4px 0 var(--outline); }
.lock-chip { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 7px; background: #0b0d18e0; font: 900 11px var(--display); }
.lock-chip svg { width: 13px !important; height: 13px !important; filter: none !important; stroke: #fff; }
.lock-chip svg.gem { stroke: none; }
.ammo-card .eq { position: absolute; bottom: 4px; left: 6px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--outline); border-radius: 50%; background: var(--green); font: 900 12px/1 var(--display); }
.ammo-card .lv { z-index: 1; }
.foot-row { display: flex; align-items: flex-end; gap: 10px; }
.foot-col { display: flex; flex-direction: column; align-items: center; }
.foot-col > small { font: 900 12px var(--display); margin-bottom: 4px; }
.game-button.equip { min-width: 110px; min-height: 52px; font-size: 16px; }

.result-wallet { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.result-wallet span { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 4px; border-radius: 9px; background: #0b0d18d0; }
.result-wallet svg { width: 22px; height: 22px; stroke: none; }
.result-wallet b { font: 900 13px var(--display); }
.result.collect .reward-cards > div { animation: collect .6s ease-in .1s; }
@keyframes collect { 40% { transform: translateY(-10px) scale(1.06); } 100% { transform: none; } }
.result.collect .result-wallet span { animation: bump .45s .55s; }
.medal-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; margin-top: 14px; }
.medal-list span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border: 2px solid var(--outline); border-radius: 10px; background: linear-gradient(#fff36a, #ffc800); color: var(--outline); font: 900 11px var(--display); }
.medal-list span.bad { background: linear-gradient(#d6dbe8, #9aa3bb); }
.medal-list svg { width: 14px; height: 14px; fill: #fff; stroke: var(--outline); }
.revive .card-modal-head { justify-content: center; }
.revive-body { display: flex; align-items: center; gap: 16px; padding: 18px; }
.revive-body p { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.5; }
.revive-body small { color: #dbe4ff; font-weight: 700; }
.countdown { flex: 0 0 80px; height: 80px; display: grid; place-items: center; border: 4px solid var(--outline); border-radius: 50%; background: radial-gradient(#fff, #ffe23a); color: var(--outline); font: 900 40px var(--display); box-shadow: 0 4px 0 var(--outline); }
.text-button { margin-top: 10px; padding: 6px 12px; font-size: 14px; font-weight: 800; color: #e6ebff; text-decoration: underline; }
.unlock-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; margin-top: 22px; }
.unlock-list small { flex-basis: 100%; font: 900 14px var(--display); color: #8bf27a; -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; }
.unlock-list span { padding: 5px 12px; border: 2px solid var(--outline); border-radius: 10px; background: #2f6dff; font-size: 13px; font-weight: 900; }
.result-actions.single { grid-template-columns: 1fr; max-width: 240px; }
.segmented button { padding: 6px 12px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .arena::after { display: none; }
}