* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; background:#0b0e14; color:#e8e4d8; font-family:'Segoe UI',system-ui,sans-serif; overflow:hidden; user-select:none; }
button { font-family:inherit; cursor:pointer; }

#app { width:100vw; height:100vh; position:relative; }
.screen { position:absolute; inset:0; display:none; }
.screen.active { display:block; }
.hidden { display:none !important; }

/* ============ MENU ============ */
#screen-menu { background:radial-gradient(ellipse at 50% 120%, #3a2417 0%, #1a1210 45%, #0b0e14 100%); }
.menu-bg { position:absolute; inset:0; background:
  repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,160,80,.02) 60px 61px); }
.menu-inner { position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.game-title { font-size:min(9vw,96px); letter-spacing:.18em; font-weight:900; color:#e8e4d8;
  text-shadow:0 0 40px rgba(255,140,60,.45), 0 4px 0 #6b3a1a; animation:titleGlow 4s ease-in-out infinite; }
@keyframes titleGlow {
  0%,100% { text-shadow:0 0 40px rgba(255,140,60,.4), 0 4px 0 #6b3a1a; }
  50%     { text-shadow:0 0 64px rgba(255,140,60,.65), 0 0 24px rgba(255,200,120,.3), 0 4px 0 #6b3a1a; }
}
.game-title span { color:#ff9d4d; }
.game-subtitle { color:#a89880; letter-spacing:.28em; text-transform:uppercase; font-size:13px; margin-top:-10px; }
.menu-profile { background:rgba(255,255,255,.05); border:1px solid rgba(255,157,77,.25); border-radius:10px;
  padding:10px 22px; font-size:14px; color:#d8c8a8; display:flex; gap:22px; align-items:center; }
.menu-profile .lvl { color:#ff9d4d; font-weight:800; font-size:18px; }
.menu-profile .mini-xp { width:120px; height:6px; background:#2a2118; border-radius:3px; overflow:hidden; }
.menu-profile .mini-xp div { height:100%; background:linear-gradient(90deg,#ff9d4d,#ffd27a); }
.menu-buttons { display:flex; flex-direction:column; gap:12px; width:min(820px,94vw); margin-top:8px; }
.menu-duo { display:flex; gap:12px; }
.menu-duo .btn { flex:1; }
.btn { background:linear-gradient(180deg,#262b37,#1b1f28); color:#e8e4d8; border:1px solid #3a4152; border-radius:10px; padding:10px 22px;
  font-size:15px; font-weight:600; transition:all .12s; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.35); }
.btn:hover { border-color:#ff9d4d; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 18px rgba(255,157,77,.18); }
.btn:active { transform:translateY(0); box-shadow:inset 0 2px 6px rgba(0,0,0,.4); }
.btn:disabled { opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-big { padding:15px 22px; font-size:18px; }
.btn-primary { background:linear-gradient(180deg,#c15c1e,#8a3d10); border-color:#ff9d4d; }
.btn-primary:hover { background:linear-gradient(180deg,#d96a24,#a04a14); }
.cheat-btn { border-color:#ffd27a; color:#ffd27a; background:#252012; }
.cheat-btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }
.boss-picker { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:stretch; gap:10px; }
.boss-arrow { border:1px solid #3a4152; background:#181c24; color:#ffd27a; border-radius:8px; font-size:38px; font-weight:700; }
.boss-arrow:hover { border-color:#ff9d4d; background:#241d18; }
.boss-arrow:disabled { opacity:.28; color:#5a5648; cursor:not-allowed; border-color:#2a3040; background:#11151d; }
.boss-arrow:disabled:hover { border-color:#2a3040; background:#11151d; }
.boss-card { min-height:226px; border:2px solid #ff9d4d; border-radius:8px; background:linear-gradient(160deg,rgba(28,32,42,.96),rgba(13,16,23,.96));
  color:#e8e4d8; display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:center; padding:14px 18px; text-align:left;
  box-shadow:0 0 28px rgba(255,157,77,.16); }
.boss-card:hover { transform:none; box-shadow:0 0 36px rgba(255,157,77,.24); }
.boss-card.locked { border-color:#343b4b; box-shadow:none; filter:grayscale(.35); }
.boss-art { width:310px; height:190px; display:block; justify-self:center; position:relative; overflow:hidden; border-radius:8px;
  background:#11151d; border:1px solid rgba(255,210,122,.28); box-shadow:inset 0 0 30px rgba(0,0,0,.35); }
.boss-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 58%; transform:scale(1.04); }
.boss-card.locked .boss-art img { opacity:.58; }
.boss-kicker { font-size:11px; color:#ff9d4d; letter-spacing:.22em; font-weight:900; }
.boss-card.locked .boss-kicker { color:#7a8498; }
.boss-name { font-size:34px; line-height:1; font-weight:900; color:#ffd27a; margin-top:4px; }
.boss-real-name { font-size:12px; color:#a8b0c0; letter-spacing:.18em; font-weight:800; margin-top:4px; }
.boss-tagline { font-size:13px; color:#d8c8a8; line-height:1.35; margin-top:9px; }
.boss-skills { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.boss-skills span { border:1px solid rgba(255,210,122,.35); background:rgba(255,210,122,.07); color:#ffd27a; border-radius:7px; padding:3px 8px; font-size:11px; font-weight:800; }
.boss-signature { margin-top:10px; display:grid; gap:2px; }
.boss-signature b { color:#ff5cd6; font-size:13px; }
.boss-signature small { color:#a89880; line-height:1.3; font-size:12px; }
.boss-status { margin-top:9px; color:#7ec96a; font-size:12px; font-weight:800; }
.boss-card.locked .boss-status { color:#8a94a8; }
.reset-btn { align-self:center; width:min(240px,100%); padding:8px 14px; font-size:13px; color:#ffb09a; border-color:#6a2f2f; background:#241819; }
.menu-small-row { align-self:center; display:flex; gap:10px; justify-content:center; width:min(420px,100%); }
.menu-small-row .reset-btn { width:auto; flex:1; }
#btn-sound-menu { color:#d8c8a8; border-color:#3a4152; background:#20242e; }
#btn-sound-menu.muted { color:#8a94a8; }
.menu-footer { position:absolute; bottom:18px; color:#5a5648; font-size:12px; }

@media (max-width:760px), (max-height:680px) {
  .menu-inner { gap:10px; }
  .game-title { font-size:min(12vw,64px); }
  .game-subtitle { font-size:10px; letter-spacing:.16em; }
  .menu-profile { padding:7px 10px; gap:10px; flex-wrap:wrap; justify-content:center; }
  .boss-picker { grid-template-columns:38px minmax(0,1fr) 38px; gap:6px; }
  .boss-arrow { font-size:28px; }
  .boss-card { min-height:0; grid-template-columns:1fr; gap:6px; padding:10px 12px; text-align:center; }
  .boss-art { width:190px; height:112px; justify-self:center; }
  .boss-name { font-size:25px; }
  .boss-skills { justify-content:center; }
  .boss-signature small { display:none; }
  .btn-big { padding:11px 16px; font-size:16px; }
  .menu-footer { display:none; }
}

/* ============ RULES MODAL ============ */
#rules-modal { position:absolute; inset:0; z-index:50; background:rgba(6,8,12,.78); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; }
.rules-box { width:min(480px,92vw); background:linear-gradient(170deg,#1e2230,#12151d); border:2px solid #ff9d4d;
  border-radius:16px; padding:24px 26px; box-shadow:0 0 60px rgba(255,157,77,.25); }
.rules-box h3 { text-align:center; letter-spacing:.25em; font-size:20px; margin-bottom:16px; color:#ffd27a; }
.rule-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,.06); }
.rule-info b { display:block; font-size:15px; }
.rule-info span { font-size:12px; color:#a89880; line-height:1.3; display:block; margin-top:2px; }
.rule-toggle { width:52px; height:26px; border-radius:13px; border:1px solid #3a4152; background:#181c24; position:relative; flex-shrink:0; transition:background .15s; }
.rule-toggle::after { content:''; position:absolute; top:2px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#5a6272; transition:all .15s; }
.rule-toggle.on { background:#2a3a22; border-color:#7ec96a; }
.rule-toggle.on::after { left:27px; background:#7ec96a; }
.cheat-rule { background:rgba(255,210,122,.04); border-bottom-color:rgba(255,210,122,.16); }
.cheat-rule .rule-info b { color:#ffd27a; }
.rules-buttons { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
#btn-rules-start { flex:1; }

/* ============ GARAGE ============ */
#garage-modal { position:absolute; inset:0; z-index:50; background:rgba(6,8,12,.78); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; }
#garage-modal.hidden { display:none; }
.garage-box { width:min(720px,94vw); max-height:88vh; overflow-y:auto; }
.garage-sub { text-align:center; color:#a89880; font-size:12.5px; margin:-6px 0 14px; }
#garage-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
.paint-cell { position:relative; background:rgba(14,16,24,.9); border:2px solid #2c3242; border-radius:12px;
  padding:10px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; color:#d8d4c8; transition:all .12s; }
.paint-cell:hover { border-color:#ff9d4d; transform:translateY(-2px); }
.paint-cell.selected { border-color:#ffd27a; box-shadow:0 0 16px rgba(255,210,122,.35); background:rgba(50,38,20,.5); }
.paint-cell.selected::after { content:'✓ EQUIPPED'; position:absolute; top:6px; right:8px; font-size:9px; font-weight:900;
  letter-spacing:.12em; color:#ffd27a; }
.paint-cell.locked { filter:grayscale(.9) brightness(.6); }
.paint-cell.locked:hover { border-color:#2c3242; transform:none; }
.paint-cell canvas { width:84px; height:58px; }
.paint-name { font-size:12px; font-weight:800; }
.paint-lock { font-size:10px; color:#8a94a8; }
.paint-trophy { font-size:10px; color:#ff5cd6; font-weight:700; }

/* ============ GAME ============ */
#screen-game { background:#0b0e14; }
#game-canvas { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:100vw; max-height:100vh; aspect-ratio:16/9; width:100%; }
#hud { position:absolute; inset:0; pointer-events:none; }
#hud > * { pointer-events:auto; }

#hud-top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:10px 14px; }
.hud-tank { width:270px; background:rgba(10,12,18,.86); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:6px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3); transition:border-color .2s, box-shadow .2s; }
.hud-tank.active-turn { border-color:#ff9d4d; box-shadow:0 0 16px rgba(255,157,77,.35); }
.hud-tank.right { text-align:right; }
.hud-name { font-weight:800; font-size:13px; letter-spacing:.05em; margin-bottom:4px; }
.hpbar { position:relative; height:15px; background:#241418; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.hpfill { position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#e84545,#ff8a5c); transition:width .4s; border-radius:8px; }
.armorfill { position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#7a90b8,#9fb4d4); transition:width .4s; border-radius:8px; }
.hud-tank.right .hpfill, .hud-tank.right .armorfill { left:auto; right:0; }
.hptext { position:absolute; inset:0; text-align:center; font-size:10.5px; font-weight:700; line-height:15px; text-shadow:0 1px 2px #000; z-index:2; }
.chips { display:flex; gap:5px; margin-top:4px; min-height:16px; flex-wrap:wrap; }
.hud-tank.right .chips { justify-content:flex-end; }
.chip { font-size:10px; font-weight:700; border-radius:8px; padding:1px 7px; border:1px solid; letter-spacing:.03em; }
.chip.good { background:rgba(110,231,135,.08); box-shadow:0 0 8px rgba(110,231,135,.12) inset; }
.chip.bad { background:rgba(255,90,60,.08); box-shadow:0 0 8px rgba(255,90,60,.12) inset; }

#hud-center { text-align:center; background:rgba(10,12,18,.86); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:4px 16px; min-width:200px; max-width:34vw;
  box-shadow:0 4px 14px rgba(0,0,0,.3); }
#turn-indicator { font-weight:800; font-size:15px; letter-spacing:.06em; }
#wind-indicator { font-size:15px; margin-top:2px; color:#8fd4ff; font-weight:700; letter-spacing:2px; min-height:20px; }
#wind-arrows { display:inline-block; animation:windPulse 1.2s infinite ease-in-out; }
@keyframes windPulse { 0%,100%{ transform:translateX(0); opacity:.85; } 50%{ transform:translateX(4px); opacity:1; } }
#wind-val { color:#a8b0c0; font-size:12px; margin-left:6px; font-weight:400; }
#turn-count { font-size:11px; color:#7a7668; margin-top:2px; }
#weather-indicator { font-size:11.5px; font-weight:800; letter-spacing:.06em; margin-top:3px; }
#bounty-indicator { font-size:10.5px; font-weight:700; color:#ffd27a; margin-top:2px; opacity:.85; }
#bounty-indicator.done { color:#7ec96a; }

#hud-bottom { position:absolute; bottom:0; left:0; right:0; padding:8px 12px 16px; display:flex; align-items:flex-end; gap:10px; }
#hud-bottom.locked #aim-pod, #hud-bottom.locked #right-pod, #hud-bottom.locked #deck-wrap { opacity:.35; pointer-events:none; }
.pod { background:rgba(10,12,18,.88); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px 12px;
  display:flex; gap:14px; align-items:center; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.pod-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.pod-label { font-size:9.5px; letter-spacing:.18em; color:#a89880; font-weight:700; }
.pod-row { display:flex; gap:5px; align-items:center; }
.pod-num { font-size:22px; font-weight:900; color:#ffd27a; min-width:84px; text-align:center; font-variant-numeric:tabular-nums; }
.tick-btn { width:26px; height:26px; border-radius:7px; background:#2a2f3a; border:1px solid #3a4152; color:#e8e4d8; font-size:15px; }
.tick-btn:active { background:#ff9d4d; color:#000; }
.fuelbar { width:86px; height:6px; background:#182018; border-radius:3px; overflow:hidden; }
#fuel-fill { height:100%; width:100%; background:#7ec96a; transition:width .2s; }
.move-row { margin-top:2px; }
.move-btn { width:38px; height:24px; border-radius:7px; background:#233026; border:1px solid #3a5242; color:#a8e0a0; font-size:13px; }
.move-btn:active { background:#7ec96a; color:#000; }
#btn-fire { background:linear-gradient(180deg,#e84545,#8a1a1a); border:1px solid #ff7a5c; color:#fff;
  font-size:19px; font-weight:900; letter-spacing:.14em; border-radius:12px; padding:14px 26px;
  box-shadow:0 0 14px rgba(255,90,60,.25), inset 0 1px 0 rgba(255,255,255,.18); }
#btn-fire:hover { box-shadow:0 0 22px rgba(255,90,60,.5); }
#btn-fire:active { transform:scale(.96); }

#deck-wrap { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
#weapon-info { max-width:min(720px,94%); background:rgba(10,12,18,.92); border:1px solid var(--wic,rgba(255,255,255,.12)); border-radius:9px;
  padding:4px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; line-height:1.2;
  max-height:64px; overflow:hidden; }
#wi-name { font-size:13px; font-weight:900; letter-spacing:.03em; color:var(--wic,#ffd27a); white-space:nowrap; }
#wi-tags { display:inline-flex; gap:5px; flex-wrap:wrap; justify-content:center; }
.wtag { font-size:10px; font-weight:700; color:#d8d4c8; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:1px 7px; white-space:nowrap; display:inline-block; }
.wtag.hot { color:#ffd27a; border-color:rgba(255,210,122,.45); background:rgba(255,210,122,.08); }
#armory-detail .d-tags { display:flex; gap:5px; flex-wrap:wrap; margin:4px 0 7px; }
#wi-desc { font-size:11px; color:#a89880; flex-basis:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#deck-count { font-size:10px; letter-spacing:.22em; color:#a89880; font-weight:700; }
#deck-count b { color:#ffd27a; }
#deck-bar { display:flex; gap:7px; overflow-x:auto; padding:6px 4px 2px; max-width:100%; scrollbar-width:thin; scrollbar-color:#3a4152 transparent; }
#deck-bar::-webkit-scrollbar { height:7px; }
#deck-bar::-webkit-scrollbar-thumb { background:#3a4152; border-radius:4px; }
#deck-bar::-webkit-scrollbar-thumb:hover { background:#ff9d4d; }
.wcard { flex:0 0 auto; width:92px; background:linear-gradient(180deg,rgba(20,23,33,.92),rgba(11,13,19,.94)); border:2px solid var(--rc,#555); border-radius:10px;
  padding:5px 5px 4px; text-align:center; transition:transform .1s, box-shadow .12s; position:relative; overflow:hidden; }
.wcard::before { content:''; position:absolute; top:0; left:0; right:0; height:2.5px; background:var(--rc); opacity:.75; }
.wcard:hover { transform:translateY(-4px); box-shadow:0 6px 14px rgba(0,0,0,.45), 0 0 10px var(--rc); }
.wcard.selected { background:rgba(50,38,20,.95); box-shadow:0 0 14px var(--rc); transform:translateY(-6px); }
.wcard canvas { width:38px; height:38px; }
.wcard .wname { font-size:10px; font-weight:700; line-height:1.12; color:var(--rc); min-height:22px; display:flex; align-items:center; justify-content:center; }
.wcard.rar-m { animation:mythicPulse 1.6s infinite; }
@keyframes mythicPulse { 0%,100%{ box-shadow:0 0 6px #fff8; } 50%{ box-shadow:0 0 18px #fff; } }
@keyframes dealIn { from { transform:translateY(26px) rotate(4deg); opacity:0; } to { transform:none; opacity:1; } }
.wcard.dealt { animation:dealIn .3s backwards; }

#game-banner { position:absolute; top:38%; left:50%; transform:translateX(-50%); background:rgba(10,12,18,.92);
  border:2px solid #ff9d4d; border-radius:14px; padding:22px 46px; font-size:26px; font-weight:900; letter-spacing:.1em;
  text-align:center; box-shadow:0 0 40px rgba(255,157,77,.35); z-index:5; }
#game-banner .sub { font-size:14px; font-weight:400; color:#a89880; margin-top:6px; letter-spacing:.04em; }
/* match controls: one tidy pill under the center panel instead of floating squares */
#match-controls { position:absolute; top:12px; right:50%; transform:translateX(50%) translateY(112px);
  display:none; gap:0; background:rgba(10,12,18,.78); border:1px solid #3a4152; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.3); }
#screen-game.active #match-controls { display:flex; }
#match-controls button { width:34px; height:28px; background:transparent; color:#7a7668; border:none;
  border-right:1px solid rgba(58,65,82,.6); font-size:13px; line-height:1; opacity:.85; transition:all .12s; }
#match-controls button:last-child { border-right:none; }
#match-controls button:hover { background:rgba(255,157,77,.12); color:#ffd27a; opacity:1; }
#btn-ffwd { font-weight:900; font-size:14px; }
#btn-ffwd.on { color:#ffd27a; background:rgba(255,157,77,.18); opacity:1; box-shadow:inset 0 0 10px rgba(255,157,77,.25); }
#btn-mute-match.muted { color:#ff6a5c; }
#btn-quit-match:hover { background:rgba(255,90,60,.18) !important; color:#ff8a7a !important; }
#hint-bar { position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:10px; color:#56524a; pointer-events:none; }

/* ============ RESULTS ============ */
#screen-results { background:radial-gradient(ellipse at 50% 0%, #232a3a 0%, #0b0e14 70%); overflow-y:auto; }
.results-inner { max-width:760px; margin:0 auto; padding:38px 20px 60px; text-align:center; display:flex; flex-direction:column; gap:16px; }
#results-title { font-size:44px; font-weight:900; letter-spacing:.1em; }
#results-title.win { color:#ffd27a; text-shadow:0 0 30px rgba(255,157,77,.6); }
#results-title.lose { color:#8a94a8; }
#results-stats { display:flex; justify-content:center; gap:26px; color:#a8b0c0; font-size:14px; flex-wrap:wrap; }
#results-stats b { color:#e8e4d8; }
#xp-gained { font-size:20px; font-weight:800; color:#8fd4ff; }
.xpbar-wrap { max-width:440px; margin:6px auto 0; }
.xpbar { height:18px; background:#1a2030; border-radius:9px; overflow:hidden; border:1px solid #2a3550; }
.xpfill { height:100%; width:0%; background:linear-gradient(90deg,#4d9dff,#8fd4ff); transition:width .5s; border-radius:9px; }
#xp-level-label { font-size:13px; color:#a8b0c0; margin-top:5px; }
#levelup-banner { font-size:24px; font-weight:900; color:#ffd27a; animation:popIn .4s; text-shadow:0 0 24px rgba(255,200,80,.7); }
@keyframes popIn { from { transform:scale(.3); opacity:0; } to { transform:scale(1); opacity:1; } }
#drops-title { font-size:14px; letter-spacing:.3em; color:#a89880; margin-top:8px; }
#drops-row { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; min-height:150px; }
.crate { width:120px; height:148px; perspective:700px; cursor:pointer; }
.crate-inner { position:relative; width:100%; height:100%; transition:transform .55s; transform-style:preserve-3d; }
.crate.revealed .crate-inner { transform:rotateY(180deg); }
.crate-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.crate-front { background:linear-gradient(160deg,#3a3226,#241f16); border:2px solid var(--rc,#666); box-shadow:0 0 18px var(--rc); font-size:42px; }
.crate-front .qm { font-size:38px; color:var(--rc); font-weight:900; text-shadow:0 0 12px var(--rc); animation:crateBob 1.2s infinite ease-in-out; }
@keyframes crateBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.crate-front .rlabel { font-size:10px; letter-spacing:.2em; color:var(--rc); text-transform:uppercase; }
.crate-back { background:linear-gradient(160deg,#1c2028,#10131a); border:2px solid var(--rc,#666); transform:rotateY(180deg); box-shadow:0 0 22px var(--rc); padding:8px; }
.crate-back canvas { width:52px; height:52px; }
.crate-back .dname { font-size:12px; font-weight:800; color:var(--rc); line-height:1.15; }
.crate-back .dsub { font-size:10px; color:#a89880; }
.crate-back .dnew { font-size:10px; font-weight:900; color:#7ec96a; letter-spacing:.15em; }
#mythic-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:20; }
#mythic-flash.go { animation:mythicFlash 1.4s ease-out; }
@keyframes mythicFlash { 0%{opacity:1} 100%{opacity:0} }
.results-buttons { display:flex; justify-content:center; gap:12px; margin-top:10px; }

/* ============ ARMORY ============ */
#screen-armory { background:radial-gradient(ellipse at 50% 0%, #1e2430 0%, #0b0e14 70%); overflow-y:auto; }
.armory-inner { max-width:1060px; margin:0 auto; padding:26px 18px 60px; }
.armory-header { display:flex; align-items:center; gap:22px; margin-bottom:14px; flex-wrap:wrap; }
.armory-header h2 { font-size:30px; letter-spacing:.15em; }
#armory-summary { color:#a89880; font-size:13px; flex:1; }
#armory-summary b { color:#ffd27a; }
.fam-section { margin-bottom:20px; }
.fam-title { font-size:13px; letter-spacing:.2em; color:#a89880; text-transform:uppercase; margin-bottom:8px;
  display:flex; align-items:center; gap:12px; }
.fam-title .mastery { font-size:11px; color:#8fd4ff; }
.fam-cards { display:flex; gap:10px; flex-wrap:wrap; }
.acard { width:150px; background:rgba(16,19,26,.9); border:2px solid var(--rc,#444); border-radius:12px; padding:10px 8px;
  text-align:center; cursor:pointer; transition:transform .1s; position:relative; }
.acard:hover { transform:translateY(-3px); box-shadow:0 4px 16px rgba(0,0,0,.5), 0 0 12px var(--rc); }
.acard canvas { width:52px; height:52px; }
.acard .aname { font-size:12px; font-weight:800; color:var(--rc); min-height:28px; display:flex; align-items:center; justify-content:center; line-height:1.15; }
.acard .atier { font-size:10px; color:#7a7668; letter-spacing:.1em; }
.acard.locked { filter:grayscale(1) brightness(.55); }
.acard.locked .aname { color:#666; }
.acard .lockicon { position:absolute; top:6px; right:8px; font-size:12px; }
.acard.rar-m:not(.locked) { animation:mythicPulse 1.6s infinite; }
.acard .prestige-cta { margin-top:4px; font-size:10px; font-weight:800; color:#ffd27a; }
#armory-detail { background:rgba(20,24,32,.95); border:2px solid var(--rc,#556); border-radius:14px; padding:16px 20px;
  margin-bottom:18px; display:flex; gap:18px; align-items:center; }
#armory-detail canvas { width:72px; height:72px; flex-shrink:0; }
#armory-detail .d-body { flex:1; text-align:left; }
#armory-detail .d-name { font-size:20px; font-weight:900; color:var(--rc); }
#armory-detail .d-meta { font-size:12px; color:#a89880; margin:2px 0 6px; }
#armory-detail .d-desc { font-size:13.5px; color:#d8d4c8; line-height:1.4; }
#armory-detail .d-stats { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
#armory-detail .d-stat { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px;
  padding:4px 10px; display:flex; flex-direction:column; align-items:center; min-width:64px; }
#armory-detail .d-stat span { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#a89880; }
#armory-detail .d-stat b { font-size:16px; color:var(--rc,#ffd27a); font-variant-numeric:tabular-nums; }
#armory-detail .d-unlock { font-size:12px; color:#8fd4ff; margin-top:6px; }
#armory-detail .btn { flex-shrink:0; }
.forge-btn { background:linear-gradient(180deg,#c1841e,#8a5a10) !important; border-color:#ffd27a !important; }

/* compact HUD extras + narrow screens */
#weather-indicator { font-size:10.5px; margin-top:2px; line-height:1.2; }
#bounty-indicator { font-size:10px; margin-top:1px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media (max-width:900px) {
  .hud-tank { width:190px; padding:5px 8px; }
  #hud-center { min-width:0; max-width:44vw; padding:3px 10px; }
  #turn-indicator { font-size:13px; }
  .chip { font-size:9px; padding:1px 5px; }
}

/* brutal gauntlet rule row */
.brutal-rule { background:rgba(255,92,92,.05); border-bottom-color:rgba(255,92,92,.18); }
.brutal-rule .rule-info b { color:#ff5c5c; }
.brutal-rule .rule-toggle.on { background:#3a2222; border-color:#ff5c5c; }
.brutal-rule .rule-toggle.on::after { background:#ff5c5c; }

/* ============ SLICK PASS — motion & juice ============ */

/* screens glide in instead of snapping */
.screen.active { animation:screenIn .38s ease-out; }
@keyframes screenIn { from { opacity:0; transform:scale(1.012); } to { opacity:1; transform:none; } }

/* modals pop with a little overshoot */
.rules-box { animation:modalIn .28s cubic-bezier(.2,1.35,.4,1); }
@keyframes modalIn { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }

/* menu items cascade on arrival */
.menu-buttons > * { animation:menuItemIn .45s backwards; }
.menu-buttons > *:nth-child(1) { animation-delay:.05s; }
.menu-buttons > *:nth-child(2) { animation-delay:.12s; }
.menu-buttons > *:nth-child(3) { animation-delay:.19s; }
.menu-buttons > *:nth-child(4) { animation-delay:.26s; }
.menu-buttons > *:nth-child(5) { animation-delay:.33s; }
.menu-buttons > *:nth-child(6) { animation-delay:.40s; }
@keyframes menuItemIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* boss card content slides when cycling rivals */
.boss-card.swap .boss-art, .boss-card.swap .boss-body { animation:bossSwap .3s ease-out; }
@keyframes bossSwap { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
.boss-art img { transition:transform .4s ease-out; }
.boss-card:not(.locked):hover .boss-art img { transform:scale(1.1); }

/* banner punches in; mini variant for per-turn nudges */
#game-banner { animation:bannerPop .3s cubic-bezier(.2,1.5,.4,1); }
@keyframes bannerPop { from { opacity:0; transform:translateX(-50%) scale(.7); } to { opacity:1; transform:translateX(-50%) scale(1); } }
#game-banner.mini { padding:10px 30px; font-size:16px; border-width:1.5px; border-radius:10px;
  border-color:rgba(255,210,122,.6); box-shadow:0 0 22px rgba(255,157,77,.2); letter-spacing:.22em; opacity:.92; }

/* FIRE breathes when it's your shot */
#hud-bottom:not(.locked) #btn-fire { animation:firePulse 1.5s infinite ease-in-out; }
@keyframes firePulse {
  0%,100% { box-shadow:0 0 14px rgba(255,90,60,.25), inset 0 1px 0 rgba(255,255,255,.18); }
  50%     { box-shadow:0 0 30px rgba(255,90,60,.65), inset 0 1px 0 rgba(255,255,255,.22); }
}

/* active HUD panel gently pulses */
.hud-tank.active-turn { animation:turnPulse 1.9s infinite ease-in-out; }
@keyframes turnPulse {
  0%,100% { box-shadow:0 0 12px rgba(255,157,77,.22); }
  50%     { box-shadow:0 0 22px rgba(255,157,77,.45); }
}

/* selected weapon card gets a marker and a rarity-tinted bed */
.wcard.selected { background:linear-gradient(180deg,rgba(60,46,24,.96),rgba(22,17,10,.96)); }
.wcard.selected::after { content:'▲'; position:absolute; top:1px; left:50%; transform:translateX(-50%);
  font-size:8px; color:var(--rc); text-shadow:0 0 6px var(--rc); }
.wcard { transition:transform .12s ease-out, box-shadow .14s ease-out, border-color .12s; }

/* armory cards cascade in */
.acard { animation:acardIn .3s backwards; transition:transform .12s ease-out, box-shadow .14s; }
@keyframes acardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* results title drops in; crates lift on hover */
#results-title { animation:titleDrop .5s cubic-bezier(.2,1.35,.4,1); }
@keyframes titleDrop { from { opacity:0; transform:translateY(-22px) scale(.92); } to { opacity:1; transform:none; } }
.crate { transition:transform .15s ease-out; }
.crate:hover { transform:translateY(-5px); }

/* scrollbars that match the wastes */
.garage-box::-webkit-scrollbar, #screen-armory::-webkit-scrollbar, #screen-results::-webkit-scrollbar { width:9px; }
.garage-box::-webkit-scrollbar-thumb, #screen-armory::-webkit-scrollbar-thumb, #screen-results::-webkit-scrollbar-thumb {
  background:#3a4152; border-radius:5px; border:2px solid #12151d; }
.garage-box::-webkit-scrollbar-thumb:hover, #screen-armory::-webkit-scrollbar-thumb:hover, #screen-results::-webkit-scrollbar-thumb:hover {
  background:#ff9d4d; }

/* hud bottom pods ease their lock state */
#hud-bottom #aim-pod, #hud-bottom #right-pod, #hud-bottom #deck-wrap { transition:opacity .25s; }

/* ============ VS SPLASH ============ */
#vs-splash { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; gap:5vw;
  background:radial-gradient(ellipse at 50% 60%, rgba(58,36,23,.94) 0%, rgba(11,14,20,.97) 70%);
  cursor:pointer; overflow:hidden; }
#vs-splash.out { animation:vsOut .38s ease-in forwards; }
@keyframes vsOut { to { opacity:0; } }
.vs-side { display:flex; flex-direction:column; align-items:center; gap:10px; width:min(360px,38vw); }
.vs-left  { animation:vsInL .5s cubic-bezier(.2,1.3,.4,1); }
.vs-right { animation:vsInR .5s cubic-bezier(.2,1.3,.4,1); }
@keyframes vsInL { from { opacity:0; transform:translateX(-90px); } to { opacity:1; transform:none; } }
@keyframes vsInR { from { opacity:0; transform:translateX(90px); } to { opacity:1; transform:none; } }
.vs-art { width:min(330px,34vw); aspect-ratio:3/2; border-radius:14px; overflow:hidden; position:relative;
  border:2px solid rgba(255,210,122,.4); box-shadow:0 0 44px rgba(255,157,77,.22), inset 0 0 30px rgba(0,0,0,.4);
  background:#11151d; display:flex; align-items:center; justify-content:center; }
.vs-art img { width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.vs-art canvas { width:100%; height:100%; }
.vs-name { font-size:30px; font-weight:900; letter-spacing:.08em; color:#ffd27a; text-shadow:0 0 24px rgba(255,157,77,.5); text-align:center; }
.vs-sub { font-size:12px; color:#a89880; letter-spacing:.14em; text-transform:uppercase; text-align:center; max-width:34vw; }
.vs-mark { font-size:min(10vw,84px); font-weight:900; color:#ff9d4d; text-shadow:0 0 40px rgba(255,140,60,.7), 0 4px 0 #6b3a1a;
  animation:vsSlam .45s .18s cubic-bezier(.2,1.8,.4,1) backwards; }
@keyframes vsSlam { from { opacity:0; transform:scale(2.6) rotate(-8deg); } to { opacity:1; transform:none; } }

/* ============ MEDALS ============ */
#medals-title { font-size:13px; letter-spacing:.3em; color:#a89880; margin-top:4px; }
#medals-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.medal { width:86px; padding:8px 4px 7px; border-radius:10px; text-align:center;
  background:rgba(14,16,24,.85); border:1px solid #2a2f3a; filter:grayscale(1) brightness(.62); transition:all .15s; }
.medal .m-icon { font-size:22px; line-height:1.2; }
.medal .m-name { font-size:9px; font-weight:800; letter-spacing:.04em; color:#8a94a8; margin-top:3px; }
.medal.owned { filter:none; border-color:rgba(255,210,122,.5); box-shadow:0 0 10px rgba(255,210,122,.12); }
.medal.owned .m-name { color:#ffd27a; }
.medal.owned:hover { transform:translateY(-3px); box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(255,210,122,.25); }
.medal.fresh { animation:medalPop .6s cubic-bezier(.2,1.6,.4,1) backwards; border-color:#ffd27a;
  box-shadow:0 0 18px rgba(255,210,122,.5); }
@keyframes medalPop { from { opacity:0; transform:scale(.4) rotate(-8deg); } to { opacity:1; transform:none; } }

/* ============ HUD REFINEMENT ============ */
/* tank panels carry their tank's color as an accent spine */
.hud-tank { border-left:3px solid var(--tc, transparent); }
.hud-tank.right { border-left:1px solid rgba(255,255,255,.1); border-right:3px solid var(--tc, transparent); }
.hud-tank.active-turn { border-color:rgba(255,157,77,.55); }
.hud-tank.active-turn { border-left-color:var(--tc, rgba(255,157,77,.55)); }
.hud-tank.right.active-turn { border-right-color:var(--tc, rgba(255,157,77,.55)); }

/* hp bar gets a glass shine and a cleaner read */
.hpbar { height:16px; }
.hpbar::after { content:''; position:absolute; inset:0 0 55% 0; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.14), transparent); pointer-events:none; z-index:1; }
.hptext { line-height:16px; }

/* bottom pods: equal heights, shared accent, calmer layout */
#hud-bottom { align-items:stretch; }
.pod { border-top:2px solid rgba(255,157,77,.4); justify-content:center; }
#aim-pod { min-width:300px; }
#right-pod { min-width:250px; gap:16px; }
#right-pod .pod-stat { justify-content:center; }
#btn-fire { padding:16px 30px; font-size:20px; border-top:2px solid rgba(255,200,150,.5); }
.fuelbar { width:104px; }

/* deck column stays centered and tidy against the pods */
#deck-wrap { justify-content:flex-end; padding-bottom:2px; }
#deck-bar { padding-top:4px; }

/* the hint bar yields the stage after a few seconds */
#hint-bar { transition:opacity 1.2s; }
#hint-bar.faded { opacity:.28; }

/* ============ BOON DRAFT ============ */
#boon-draft { position:absolute; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; background:rgba(8,10,15,.72); backdrop-filter:blur(2px); animation:screenIn .3s ease-out; }
#boon-title { font-size:26px; font-weight:900; letter-spacing:.18em; color:#7ec96a; text-shadow:0 0 24px rgba(126,201,106,.5);
  animation:titleDrop .45s cubic-bezier(.2,1.35,.4,1); }
#boon-row { display:flex; gap:18px; }
.boon-card { width:180px; padding:20px 16px 16px; border-radius:14px; text-align:center; cursor:pointer;
  background:linear-gradient(180deg, rgba(28,34,26,.96), rgba(14,17,12,.96));
  border:1.5px solid rgba(126,201,106,.4); box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .14s ease-out, box-shadow .14s, border-color .14s;
  animation:acardIn .35s backwards; }
.boon-card:nth-child(2) { animation-delay:.08s; }
.boon-card:nth-child(3) { animation-delay:.16s; }
.boon-card:hover { transform:translateY(-6px); border-color:#7ec96a; box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 22px rgba(126,201,106,.3); }
.boon-card .b-icon { font-size:34px; }
.boon-card .b-name { font-size:14px; font-weight:900; color:#c8e8b8; margin-top:8px; letter-spacing:.05em; }
.boon-card .b-desc { font-size:11px; color:#8a9a80; margin-top:6px; line-height:1.45; }

/* ============ ATMOSPHERE, RESPONSIVE HUD & PLAYTEST LAB ============ */
.menu-bg {
  overflow:hidden;
  background:
    radial-gradient(ellipse at 72% 32%, rgba(255,151,72,.12), transparent 24%),
    radial-gradient(ellipse at 25% 75%, rgba(96,54,38,.20), transparent 34%),
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,160,80,.022) 60px 61px);
}
.menu-bg::before,
.menu-bg::after { content:''; position:absolute; inset:-12%; pointer-events:none; }
.menu-bg::before {
  background:
    radial-gradient(ellipse at 15% 62%, rgba(255,142,66,.10) 0 3%, transparent 18%),
    radial-gradient(ellipse at 68% 78%, rgba(220,104,52,.08) 0 4%, transparent 22%),
    radial-gradient(ellipse at 88% 44%, rgba(255,190,100,.055) 0 2%, transparent 17%);
  filter:blur(20px);
  animation:menuDust 18s ease-in-out infinite alternate;
}
.menu-bg::after {
  opacity:.32;
  background-image:
    radial-gradient(circle at 10% 20%, #ffd7a0 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 70%, #ff9d4d 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 35%, #e8e4d8 0 1px, transparent 1.4px);
  background-size:170px 150px, 230px 210px, 310px 250px;
  animation:menuGrain 26s linear infinite;
}
@keyframes menuDust { to { transform:translate3d(4%, -2%, 0) scale(1.08); opacity:.72; } }
@keyframes menuGrain { to { transform:translate3d(-80px, 45px, 0); } }

#playtest-modal { position:absolute; inset:0; z-index:70; background:rgba(5,7,11,.84); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.playtest-box { width:min(820px,94vw); max-height:90vh; overflow:auto; border-color:#8fd4ff; box-shadow:0 0 70px rgba(77,157,255,.18); }
.playtest-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.playtest-head h3 { text-align:left; margin:2px 0 0; color:#d8f3ff; }
.playtest-kicker { color:#8fd4ff; font-size:10px; font-weight:900; letter-spacing:.24em; }
.playtest-copy { color:#a8b0c0; font-size:13px; line-height:1.5; margin:10px 0 14px; }
.playtest-actions { display:flex; gap:8px; flex-wrap:wrap; }
.playtest-actions .btn { padding:8px 12px; font-size:12px; }
.danger-soft { color:#ff9a8a; border-color:#6a2f2f; background:#241819; }
#playtest-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin:14px 0; }
.pt-stat { padding:10px; background:rgba(143,212,255,.055); border:1px solid rgba(143,212,255,.16); border-radius:9px; }
.pt-stat span { display:block; color:#7f8ca2; font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.pt-stat b { display:block; color:#e5f6ff; font-size:20px; margin-top:3px; font-variant-numeric:tabular-nums; }
#playtest-events { max-height:230px; overflow:auto; white-space:pre-wrap; user-select:text; background:#080b10; border:1px solid #283346; border-radius:10px; padding:12px; color:#9fb4d4; font:11px/1.5 Consolas,monospace; }
#btn-playtest.active { color:#8fd4ff; border-color:#4d9dff; box-shadow:0 0 12px rgba(77,157,255,.22); }

#hud-bottom {
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(260px,1.6fr) minmax(205px,.72fr);
  align-items:stretch;
}
#aim-pod, #right-pod { min-width:0; }
#right-pod { gap:10px; }
.pod { padding:8px 10px; gap:9px; }
.pod-num { min-width:66px; }
#weapon-info { width:100%; min-width:0; max-width:100%; }
#wi-name { white-space:normal; text-align:center; overflow-wrap:anywhere; }
#wi-desc { min-width:0; }
#deck-bar { width:100%; scroll-padding-inline:42%; }
.wcard { scroll-margin-inline:42%; }
#deck-toolbar { width:100%; display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:1px; }
#deck-toolbar label { display:flex; align-items:center; gap:5px; font-size:8px; letter-spacing:.16em; color:#7f8998; font-weight:800; }
#deck-toolbar select, #deck-toolbar input,
#armory-tools select, #armory-tools input { background:#111722; color:#dbe5f4; border:1px solid #344057; border-radius:7px; outline:none; }
#deck-toolbar select { height:22px; padding:0 22px 0 7px; font-size:10px; }
#deck-toolbar input { height:22px; width:min(140px,34vw); padding:0 8px; font-size:10px; }
#deck-toolbar select:focus, #deck-toolbar input:focus,
#armory-tools select:focus, #armory-tools input:focus { border-color:#8fd4ff; box-shadow:0 0 0 2px rgba(143,212,255,.12); }

#armory-tools { position:sticky; top:0; z-index:8; display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:9px; align-items:center;
  margin:0 -8px 16px; padding:10px 8px; background:linear-gradient(180deg,rgba(13,17,24,.98),rgba(13,17,24,.90)); backdrop-filter:blur(8px); border-bottom:1px solid rgba(143,212,255,.12); }
#armory-search { height:38px; padding:0 12px; font-size:13px; }
#armory-filter { height:38px; padding:0 32px 0 10px; }
#armory-family-nav { grid-column:1/-1; display:flex; gap:6px; overflow-x:auto; padding:2px 0 3px; scrollbar-width:thin; }
.family-jump { flex:0 0 auto; border:1px solid #30394a; border-radius:999px; background:#171c26; color:#929db0; padding:5px 10px; font-size:10px; font-weight:800; }
.family-jump:hover { color:#ffd27a; border-color:#80643c; }
.family-jump.empty { display:none; }
.fam-section { scroll-margin-top:112px; }
.fam-section[hidden], .acard[hidden] { display:none !important; }
.armory-empty { padding:42px 18px; text-align:center; color:#7f8998; border:1px dashed #344057; border-radius:12px; }

@media (max-width:980px) {
  #hud-bottom { grid-template-columns:190px minmax(220px,1fr) 180px; gap:7px; padding-inline:7px; }
  #aim-pod { min-width:0; }
  #right-pod { min-width:0; }
  .pod-num { min-width:48px; font-size:18px; }
  .tick-btn { width:24px; height:24px; }
  #aim-pod { padding:5px; gap:4px; }
  #aim-pod .pod-row { gap:2px; }
  #aim-pod .pod-num { min-width:32px; font-size:17px; }
  #aim-pod .tick-btn { width:20px; height:23px; padding:0; font-size:13px; }
  #btn-fire { padding:12px 15px; font-size:16px; }
  .fuelbar { width:72px; }
  .wcard { width:82px; }
  #weapon-info { padding:4px 7px; gap:5px; }
  #wi-name { font-size:11px; }
  #wi-desc { display:none; }
}

@media (max-height:760px) {
  #screen-menu { overflow-y:auto; }
  .menu-inner { height:auto; min-height:100%; justify-content:flex-start; padding:14px 0 28px; gap:8px; }
  .game-title { font-size:min(7vw,62px); line-height:.95; }
  .game-subtitle { margin-top:-2px; font-size:10px; }
  .menu-profile { padding:7px 14px; }
  .menu-buttons { margin-top:2px; gap:7px; }
  .boss-card { min-height:176px; }
  .boss-art { width:250px; height:150px; }
  .boss-name { font-size:29px; }
  .boss-tagline { margin-top:5px; }
  .boss-skills, .boss-signature { margin-top:6px; }
  .btn-big { padding:9px 16px; }
  .menu-footer { position:static; margin-top:2px; }
}

@media (max-width:720px), (max-height:560px) {
  #hud-top { padding:5px; gap:5px; }
  .hud-tank { width:31vw; min-width:0; }
  #hud-center { max-width:34vw; padding-inline:5px; }
  #hud-bottom { grid-template-columns:1fr 1.3fr 1fr; bottom:0; padding:5px 5px 10px; }
  .pod { padding:5px; gap:4px; }
  .pod-label, #wi-tags, #deck-toolbar input { display:none; }
  #deck-toolbar { gap:4px; }
  #deck-toolbar select { max-width:130px; }
  .wcard { width:68px; padding:3px; }
  .wcard canvas { width:30px; height:30px; }
  .wcard .wname { font-size:8px; min-height:18px; }
  #right-pod { flex-direction:column; }
  #btn-fire { width:100%; padding:8px; font-size:13px; }
  .move-row, .fuelbar { display:none; }
  #hint-bar { display:none; }
  #match-controls { transform:translateX(50%) translateY(82px); }
  #armory-tools { grid-template-columns:1fr; }
  #armory-filter, #armory-search { width:100%; }
  #armory-family-nav { grid-column:1; }
}

@media (prefers-reduced-motion:reduce) {
  .menu-bg::before, .menu-bg::after, #hud-bottom:not(.locked) #btn-fire, .hud-tank.active-turn { animation:none !important; }
  * { scroll-behavior:auto !important; }
}