@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700;800;900&family=Manrope:wght@500;650;750;800&display=swap');/* ============================================================
   TANK WARS · DESIGN TOKENS
   "Command Deck" — graphite + ember-orange + ice-blue
   ============================================================ */
:root {
  /* — Surface palette — */
  --tw-bg-0:        #07090c;
  --tw-bg-1:        #0b0f15;
  --tw-bg-2:        #11161d;
  --tw-bg-3:        #161d26;
  --tw-bg-elev:     #1b232e;

  /* — Strokes — */
  --tw-line:        rgba(255,255,255,.06);
  --tw-line-strong: rgba(255,255,255,.12);
  --tw-line-ember:  rgba(255,107,26,.45);
  --tw-line-ice:    rgba(90,200,255,.40);

  /* — Brand accents — */
  --tw-ember:       #ff6b1a;
  --tw-ember-hot:   #ffae5c;
  --tw-ember-deep:  #c43d05;
  --tw-ember-soft:  rgba(255,107,26,.18);
  --tw-ember-glow:  rgba(255,107,26,.55);

  --tw-ice:         #5ac8ff;
  --tw-ice-soft:    rgba(90,200,255,.16);

  /* — Semantic — */
  --tw-success:     #6ee79a;
  --tw-warning:     #ffd166;
  --tw-danger:      #ff4d5e;

  /* — Text — */
  --tw-text:        #f4f6f8;
  --tw-text-mute:   #9aa6b2;
  --tw-text-dim:    #5e6b78;
  --tw-text-on-acc: #0b0a08;

  /* — Spacing scale (4px base) — */
  --tw-sp-1: 4px;
  --tw-sp-2: 8px;
  --tw-sp-3: 12px;
  --tw-sp-4: 16px;
  --tw-sp-5: 20px;
  --tw-sp-6: 28px;
  --tw-sp-7: 40px;
  --tw-sp-8: 56px;

  /* — Radii — */
  --tw-r-sm: 4px;
  --tw-r-md: 8px;
  --tw-r-lg: 12px;
  --tw-r-xl: 18px;

  /* — Shadows / glow (single layer rule) — */
  --tw-shadow-1: 0 8px 24px -10px rgba(0,0,0,.65);
  --tw-shadow-2: 0 24px 60px -22px rgba(0,0,0,.85);
  --tw-shadow-ember: 0 0 0 1px rgba(255,107,26,.35),
                     0 16px 36px -14px rgba(255,107,26,.55),
                     0 0 38px -8px rgba(255,107,26,.45);
  --tw-inset-hi:  inset 0 1px 0 rgba(255,255,255,.06);

  /* — Typography — */
  --tw-font-display: "Orbitron", "Exo 2", system-ui, sans-serif;
  --tw-font-ui:      "Rajdhani", "Inter", system-ui, sans-serif;
  --tw-font-body:    "Manrope", "Inter", system-ui, sans-serif;
  --tw-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* — Type scale — */
  --tw-fs-display: clamp(28px, 2.4vw, 40px);
  --tw-fs-h1:      clamp(22px, 1.8vw, 28px);
  --tw-fs-h2:      18px;
  --tw-fs-h3:      15px;
  --tw-fs-body:    14px;
  --tw-fs-small:   12px;
  --tw-fs-label:   11px;

  /* — Tracking — */
  --tw-track-label: 0.14em;
  --tw-track-cta:   0.18em;

  /* — Motion — */
  --tw-ease:       cubic-bezier(.2,.8,.2,1);
  --tw-ease-out:   cubic-bezier(.16,1,.3,1);
  --tw-dur-fast:   140ms;
  --tw-dur-base:   220ms;
  --tw-dur-slow:   380ms;

  /* — Layout — */
  --tw-head-h:     64px;
  --tw-z-overlay:  20;
  --tw-z-head:     30;
  --tw-z-modal:    40;

  /* — Clip-path corner cut (HUD-style) — */
  --tw-cut: 14px;
}
/* ============================================================
   TANK WARS · BASE / RESET
   ============================================================ */

/* ——— Reset (focused, not aggressive) ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; }
body {
  background: var(--tw-bg-0);
  color: var(--tw-text);
  font-family: var(--tw-font-body);
  font-size: var(--tw-fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

/* ——— Custom scrollbar (subtle, ember on hover) ——— */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--tw-ember-soft);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ——— Selection ——— */
::selection {
  background: var(--tw-ember-soft);
  color: var(--tw-text);
}

/* ——— Focus ring ——— */
:focus-visible {
  outline: 2px solid var(--tw-ember);
  outline-offset: 2px;
  border-radius: var(--tw-r-sm);
}

/* ——— Utility: no-select for game UI ——— */
.tw-noselect { user-select: none; -webkit-user-select: none; }

/* ——— Animated gradient background reused as full-screen layer ——— */
@keyframes tw-glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.04); }
}

@keyframes tw-shine-sweep {
  0%   { transform: translateX(-120%) skewX(-22deg); }
  100% { transform: translateX(220%)  skewX(-22deg); }
}

@keyframes tw-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   TANK WARS · COMMAND DECK V2
   Single-screen WoT-style boevoy mostik
   ============================================================ */

/* ── Root container: top-bar / main / dock ─────────────────── */
.deck {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 56px 1fr 112px;
  grid-template-columns: 240px 1fr 320px;
  grid-template-areas:
    "topbar topbar topbar"
    "rail   stage  spec"
    "dock   dock   dock";
  background:
    radial-gradient(1100px 600px at 50% 35%, rgba(255,107,26,.06), transparent 70%),
    radial-gradient(900px 480px at 80% 90%, rgba(90,200,255,.05), transparent 70%),
    linear-gradient(180deg, #05070a 0%, #07090c 60%, #05070a 100%);
  color: var(--tw-text);
  font-family: var(--tw-font-body);
  z-index: var(--tw-z-overlay);
  overflow: hidden;
}

/* faint HUD grid */
.deck::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%);
  z-index: 0;
}
.deck > * { position: relative; z-index: 1; }

/* ── TOP BAR ───────────────────────────────────────────────── */
.deck-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--tw-sp-4);
  padding: 0 var(--tw-sp-5);
  background: linear-gradient(180deg, rgba(11,15,21,.92), rgba(7,9,12,.78));
  border-bottom: 1px solid var(--tw-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.deck-brand {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-3);
  font-family: var(--tw-font-display);
  letter-spacing: .04em;
}
.deck-brand-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg, var(--tw-ember) 0%, var(--tw-ember-deep) 100%);
  color: var(--tw-text-on-acc);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  box-shadow: 0 0 16px -4px var(--tw-ember-glow);
}
.deck-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.deck-brand-text b {
  font: 700 14px/1.1 var(--tw-font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.deck-brand-text small {
  font: 600 10px/1.2 var(--tw-font-ui);
  color: var(--tw-text-mute);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
}
.deck-topbar-spacer { flex: 1; }

.deck-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px;
  padding: 0 12px;
  font: 700 12px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text);
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-line-strong);
  border-radius: var(--tw-r-md);
  white-space: nowrap;
}
.deck-chip i { color: var(--tw-text-mute); font-style: normal; font-size: 11px; }
.deck-chip b { color: var(--tw-ember-hot); font-weight: 800; }
.deck-chip.ice b { color: var(--tw-ice); }

.deck-icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--tw-bg-2);
  color: var(--tw-text);
  border: 1px solid var(--tw-line-strong);
  border-radius: var(--tw-r-md);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease);
}
.deck-icon-btn:hover { background: var(--tw-bg-3); color: var(--tw-ember-hot); border-color: var(--tw-line-ember); }
.deck-icon-btn.link { text-decoration: none; }

/* ── TANK RAIL (left) ──────────────────────────────────────── */
.deck-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(11,15,21,.55) 0%, rgba(7,9,12,.4) 100%);
  border-right: 1px solid var(--tw-line);
  overflow: hidden;
}
.deck-rail-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--tw-line);
}
.deck-rail-head strong {
  display: block;
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-mute);
}
.deck-rail-head small {
  display: block;
  margin-top: 6px;
  font: 600 13px/1.2 var(--tw-font-display);
  color: var(--tw-text);
  letter-spacing: .04em;
}
.deck-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deck-rail-list::-webkit-scrollbar { width: 6px; }
.deck-rail-list::-webkit-scrollbar-thumb { background: var(--tw-line-strong); border-radius: 3px; }

.deck-tank-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  background: linear-gradient(180deg, var(--tw-bg-2), var(--tw-bg-1));
  border: 1px solid var(--tw-line);
  border-left: 2px solid transparent;
  border-radius: var(--tw-r-md);
  color: var(--tw-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--tw-dur-fast) var(--tw-ease), background var(--tw-dur-fast) var(--tw-ease), transform var(--tw-dur-fast) var(--tw-ease);
}
.deck-tank-card:hover:not(:disabled) { border-color: var(--tw-line-strong); transform: translateX(2px); }
.deck-tank-card.active {
  border-left-color: var(--tw-ember);
  background: linear-gradient(180deg, rgba(255,107,26,.08), var(--tw-bg-1));
  border-color: var(--tw-line-ember);
}
.deck-tank-card:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
.deck-tank-art {
  width: 56px; height: 38px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.35);
  border-radius: var(--tw-r-sm);
  color: var(--tw-text-mute);
}
.deck-tank-card.active .deck-tank-art { color: var(--tw-ember-hot); }
.deck-tank-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deck-tank-info strong {
  font: 700 13px/1.15 var(--tw-font-display);
  letter-spacing: .04em;
  color: var(--tw-text);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-tank-info small {
  font: 500 11px/1.2 var(--tw-font-ui);
  color: var(--tw-text-mute);
  text-transform: uppercase;
  letter-spacing: var(--tw-track-label);
}
.deck-tank-info span {
  font: 600 11px/1.2 var(--tw-font-mono);
  color: var(--tw-text-mute);
}
.deck-tank-card.active .deck-tank-info span { color: var(--tw-ember-hot); }
.deck-tank-card.locked .deck-tank-info::after {
  content: "🔒 закрыт";
  font: 600 10px/1 var(--tw-font-ui);
  color: var(--tw-warning);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
}
.deck-rail-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--tw-line);
}
.deck-rail-foot button {
  width: 100%;
  height: 36px;
  background: transparent;
  color: var(--tw-text-mute);
  border: 1px dashed var(--tw-line-strong);
  border-radius: var(--tw-r-md);
  font: 600 11px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease);
}
.deck-rail-foot button:hover { color: var(--tw-ice); border-color: var(--tw-line-ice); }

/* ── 3D STAGE (center) ─────────────────────────────────────── */
.deck-stage {
  grid-area: stage;
  position: relative;
  overflow: hidden;
  /* Hangar backdrop image + warm/cool radial accents */
  background:
    radial-gradient(60% 40% at 50% 78%, rgba(255,107,26,.12) 0%, rgba(255,107,26,0) 70%),
    radial-gradient(80% 60% at 50% 20%, rgba(90,200,255,.06) 0%, rgba(90,200,255,0) 70%),
    linear-gradient(180deg, rgba(7,9,12,.55) 0%, rgba(7,9,12,.15) 35%, rgba(7,9,12,.55) 100%),
    url('/tank-wars/assets/ui/tank-hangar-menu.webp') center 38%/cover no-repeat,
    #07090c;
}
.deck-stage .tw-hangar-viewport,
.deck-stage > div:first-child {
  position: absolute;
  inset: 0;
}
.deck-stage .tw-drag-hint { display: none !important; }
/* outer vignette to focus on tank */
.deck-stage > .tw-hangar-viewport.cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 55%, transparent 55%, rgba(7,9,12,.55) 100%);
}

/* HUD corner crosshair on stage */
.deck-stage::before, .deck-stage::after {
  content: "";
  position: absolute;
  width: 56px; height: 56px;
  border: 1px solid var(--tw-line-ember);
  pointer-events: none;
  opacity: .5;
}
.deck-stage::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.deck-stage::after  { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

.deck-stage-floating {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
}
.deck-stage-floating.top { top: 16px; left: 50%; transform: translateX(-50%); }
.deck-stage-floating.bottom {
  bottom: 12px; left: 50%; transform: translateX(-50%);
  font: 600 10px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-dim);
  background: rgba(7,9,12,.6);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--tw-line);
  pointer-events: none;
}
.deck-stage-map-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: rgba(7,9,12,.7);
  border: 1px solid var(--tw-line-strong);
  border-radius: 999px;
  color: var(--tw-text);
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.deck-stage-map-chip:hover { border-color: var(--tw-line-ember); color: var(--tw-ember-hot); }
.deck-stage-map-chip span.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tw-ember); box-shadow: 0 0 8px var(--tw-ember-glow); }

/* ── SPEC PANEL (right) ────────────────────────────────────── */
.deck-spec {
  grid-area: spec;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, rgba(11,15,21,.6) 0%, rgba(7,9,12,.5) 100%);
  border-left: 1px solid var(--tw-line);
  padding: 18px 18px 16px;
  overflow-y: auto;
}
.deck-spec-kicker {
  font: 700 10px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-ember);
}
.deck-spec h2 {
  margin: 8px 0 4px;
  font: 800 22px/1.1 var(--tw-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.deck-spec-role {
  font: 500 12px/1.4 var(--tw-font-ui);
  color: var(--tw-text-mute);
  text-transform: uppercase;
  letter-spacing: var(--tw-track-label);
  margin: 0 0 14px;
}
.deck-spec-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.deck-spec-stats > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px;
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
}
.deck-spec-stats small {
  font: 600 10px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-mute);
}
.deck-spec-stats b {
  font: 700 16px/1.1 var(--tw-font-display);
  color: var(--tw-text);
}

.deck-spec-bar {
  margin-top: 8px;
}
.deck-spec-bar small {
  display: flex; justify-content: space-between;
  font: 600 10px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-mute);
  margin-bottom: 6px;
}
.deck-spec-bar i {
  display: block;
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.deck-spec-bar i::after {
  content: "";
  position: absolute; inset: 0;
  width: var(--v, 50%);
  background: linear-gradient(90deg, var(--tw-ember-deep), var(--tw-ember-hot));
  border-radius: 2px;
}

.deck-spec-actions {
  margin-top: auto;
  padding-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.deck-spec-actions button {
  height: 40px;
  background: var(--tw-bg-2);
  color: var(--tw-text);
  border: 1px solid var(--tw-line-strong);
  border-radius: var(--tw-r-md);
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease);
}
.deck-spec-actions button:hover { background: var(--tw-bg-3); color: var(--tw-ember-hot); border-color: var(--tw-line-ember); }

/* ── BATTLE DOCK (bottom) ──────────────────────────────────── */
.deck-dock {
  grid-area: dock;
  display: grid;
  grid-template-rows: 44px 1fr;
  background: linear-gradient(0deg, rgba(7,9,12,.95) 0%, rgba(11,15,21,.85) 100%);
  border-top: 1px solid var(--tw-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
.deck-dock::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--tw-ember) 50%, transparent 100%);
  opacity: .4;
}
.deck-mode-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--tw-line);
}
.deck-mode-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tw-text-mute);
  cursor: pointer;
  padding: 6px 8px;
  transition: color var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease), background var(--tw-dur-fast) var(--tw-ease);
}
.deck-mode-tab:hover { color: var(--tw-text); background: rgba(255,255,255,.02); }
.deck-mode-tab strong {
  font: 700 12px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
}
.deck-mode-tab small {
  font: 500 9px/1 var(--tw-font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-text-dim);
}
.deck-mode-tab.active {
  color: var(--tw-ember-hot);
  border-bottom-color: var(--tw-ember);
  background: linear-gradient(180deg, transparent 0%, rgba(255,107,26,.08) 100%);
}
.deck-mode-tab.active small { color: var(--tw-text-mute); }

.deck-dock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--tw-sp-4);
  padding: 0 16px;
}
.deck-dock-config {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.deck-dock-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--tw-bg-2);
  color: var(--tw-text);
  border: 1px solid var(--tw-line-strong);
  border-radius: var(--tw-r-md);
  font: 600 12px/1 var(--tw-font-ui);
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color var(--tw-dur-fast) var(--tw-ease), background var(--tw-dur-fast) var(--tw-ease), color var(--tw-dur-fast) var(--tw-ease);
  white-space: nowrap;
}
.deck-dock-chip:hover { border-color: var(--tw-line-ember); color: var(--tw-ember-hot); }
.deck-dock-chip i { color: var(--tw-text-mute); font-style: normal; font-size: 14px; }
.deck-dock-chip small {
  display: block;
  font: 600 9px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-dim);
  margin-bottom: 2px;
}
.deck-dock-chip strong {
  font: 700 13px/1 var(--tw-font-display);
  color: var(--tw-text);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.deck-dock-chip:hover strong { color: var(--tw-ember-hot); }

/* Big launch button */
.deck-launch-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.deck-launch {
  position: relative;
  height: 64px;
  min-width: 260px;
  padding: 0 36px;
  background: linear-gradient(135deg, var(--tw-ember) 0%, var(--tw-ember-deep) 100%);
  color: var(--tw-text-on-acc);
  border: 0;
  font: 800 18px/1 var(--tw-font-display);
  letter-spacing: var(--tw-track-cta);
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  box-shadow: var(--tw-shadow-ember);
  overflow: hidden;
  transition: transform var(--tw-dur-fast) var(--tw-ease), filter var(--tw-dur-fast) var(--tw-ease);
}
.deck-launch:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.05); }
.deck-launch:active { transform: translateY(0); filter: brightness(.96); }
.deck-launch::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: deck-shine 3.6s ease-in-out infinite;
}
@keyframes deck-shine {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(120%); }
}
.deck-launch-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse at center, var(--tw-ember-glow), transparent 65%);
  z-index: -1;
  filter: blur(14px);
  animation: deck-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes deck-pulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
.deck-launch-sub {
  font: 600 10px/1.2 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-mute);
  text-align: right;
  max-width: 360px;
}
.deck-launch-sub b { color: var(--tw-ember-hot); font-weight: 700; }

/* ── DRAWER ────────────────────────────────────────────────── */
.deck-drawer-root {
  position: fixed;
  inset: 0;
  z-index: var(--tw-z-modal);
  pointer-events: none;
}
.deck-drawer-root.open { pointer-events: auto; }
.deck-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,7,10,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--tw-dur-base) var(--tw-ease);
}
.deck-drawer-root.open .deck-drawer-backdrop { opacity: 1; }
.deck-drawer {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(180deg, var(--tw-bg-1) 0%, var(--tw-bg-0) 100%);
  border-left: 1px solid var(--tw-line-strong);
  display: flex; flex-direction: column;
  box-shadow: var(--tw-shadow-2);
  transition: transform var(--tw-dur-base) var(--tw-ease-out);
}
.deck-drawer-root.side-right .deck-drawer { right: 0; transform: translateX(100%); }
.deck-drawer-root.side-left .deck-drawer  { left: 0;  transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--tw-line-strong); }
.deck-drawer-root.open .deck-drawer { transform: translateX(0); }
.deck-drawer-head {
  display: flex; align-items: center; gap: var(--tw-sp-4);
  padding: 16px 20px;
  border-bottom: 1px solid var(--tw-line);
}
.deck-drawer-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.deck-drawer-head strong {
  font: 800 18px/1.1 var(--tw-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.deck-drawer-head small {
  font: 600 11px/1 var(--tw-font-ui);
  color: var(--tw-text-mute);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
}
.deck-drawer-close {
  width: 36px; height: 36px;
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-line-strong);
  color: var(--tw-text);
  border-radius: var(--tw-r-md);
  font-size: 14px; cursor: pointer;
}
.deck-drawer-close:hover { color: var(--tw-danger); border-color: var(--tw-danger); }
.deck-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

/* ── POPOVER ───────────────────────────────────────────────── */
.deck-popover {
  position: absolute;
  bottom: calc(112px + 8px);
  left: 16px;
  z-index: calc(var(--tw-z-modal) - 1);
  background: linear-gradient(180deg, var(--tw-bg-2) 0%, var(--tw-bg-1) 100%);
  border: 1px solid var(--tw-line-strong);
  border-radius: var(--tw-r-lg);
  box-shadow: var(--tw-shadow-2);
  padding: 14px;
  min-width: 320px;
  max-width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  animation: deck-pop-in 180ms var(--tw-ease-out);
}
@keyframes deck-pop-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.deck-popover-title {
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-ember);
  margin-bottom: 10px;
}
.deck-popover.align-end { left: auto; right: 16px; }
.deck-popover.align-center { left: 50%; transform: translateX(-50%); }

/* popover content helpers */
.deck-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px;
}
.deck-pop-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-line);
  border-left: 2px solid transparent;
  border-radius: var(--tw-r-md);
  color: var(--tw-text);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--tw-dur-fast) var(--tw-ease), background var(--tw-dur-fast) var(--tw-ease);
}
.deck-pop-card:hover { background: var(--tw-bg-3); border-color: var(--tw-line-strong); }
.deck-pop-card.active { border-left-color: var(--tw-ember); background: linear-gradient(180deg, rgba(255,107,26,.08), var(--tw-bg-1)); border-color: var(--tw-line-ember); }
.deck-pop-card strong { font: 700 13px/1.1 var(--tw-font-display); letter-spacing: .04em; text-transform: uppercase; }
.deck-pop-card small { font: 500 11px/1.2 var(--tw-font-ui); color: var(--tw-text-mute); text-transform: lowercase; letter-spacing: .04em; }

.deck-pop-stack { display: flex; flex-direction: column; gap: 6px; }
.deck-pop-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-line);
  border-left: 2px solid transparent;
  border-radius: var(--tw-r-md);
  color: var(--tw-text);
  text-align: left;
  cursor: pointer;
}
.deck-pop-row:hover:not(:disabled) { background: var(--tw-bg-3); }
.deck-pop-row.active { border-left-color: var(--tw-ember); background: linear-gradient(180deg, rgba(255,107,26,.08), var(--tw-bg-1)); }
.deck-pop-row:disabled { opacity: .45; cursor: not-allowed; }
.deck-pop-row strong { font: 700 13px/1.1 var(--tw-font-display); letter-spacing: .04em; text-transform: uppercase; }
.deck-pop-row small { font: 500 11px/1.2 var(--tw-font-ui); color: var(--tw-text-mute); }

.deck-pop-section { margin-bottom: 14px; }
.deck-pop-section:last-child { margin-bottom: 0; }
.deck-pop-section > small {
  display: block;
  font: 700 10px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-mute);
  margin-bottom: 6px;
}
.deck-pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-pop-chips button {
  height: 32px;
  padding: 0 12px;
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
  color: var(--tw-text);
  font: 700 12px/1 var(--tw-font-ui);
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color var(--tw-dur-fast) var(--tw-ease), background var(--tw-dur-fast) var(--tw-ease);
}
.deck-pop-chips button:hover { background: var(--tw-bg-3); }
.deck-pop-chips button.active {
  background: linear-gradient(135deg, var(--tw-ember) 0%, var(--tw-ember-deep) 100%);
  color: var(--tw-text-on-acc);
  border-color: var(--tw-ember);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
/* kbd hint badges */
.deck-stage-floating kbd,
.deck-launch-kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--tw-line);
  border-radius: 4px;
  font: 600 10px/1.4 var(--tw-font-ui);
  letter-spacing: .04em;
  color: var(--tw-text);
}
.deck-launch-kbd {
  position: absolute;
  top: 6px; right: 8px;
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.18);
  font-size: 9px;
  padding: 1px 5px;
  pointer-events: none;
  opacity: .85;
}
.deck-launch { position: relative; }

/* mode tab number badge */
.deck-mode-num {
  position: absolute;
  top: 4px; left: 8px;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--tw-line);
  border-radius: 4px;
  font: 700 9px/1 var(--tw-font-ui);
  color: var(--tw-text-mute);
  letter-spacing: 0;
}
.deck-mode-tab { position: relative; }
.deck-mode-tab.active .deck-mode-num {
  background: rgba(255,107,26,.18);
  border-color: var(--tw-line-ember);
  color: var(--tw-ember);
}

@media (max-width: 1380px) {
  .deck { grid-template-columns: 220px 1fr 280px; }
  .deck-spec h2 { font-size: 22px; }
}
@media (max-width: 1180px) {
  .deck {
    grid-template-columns: 72px 1fr 280px;
  }
  .deck-rail-head small,
  .deck-tank-info small,
  .deck-tank-info span,
  .deck-tank-info strong { display: none; }
  .deck-tank-card { grid-template-columns: 1fr; padding: 8px; }
  .deck-tank-art { width: 100%; height: 36px; }
  .deck-rail-foot button { font-size: 10px; padding: 0; }
}
@media (max-width: 880px) {
  .deck {
    grid-template-rows: 56px 1fr 200px;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "topbar topbar"
      "rail   stage"
      "dock   dock";
  }
  .deck-spec { display: none; }
  .deck-mode-tab small { display: none; }
  .deck-launch { min-width: 180px; height: 56px; font-size: 14px; padding: 0 24px; }
  .deck-dock-row { grid-template-columns: 1fr; padding: 8px 12px; gap: 8px; }
  .deck-launch-wrap { align-items: stretch; }
}

/* ── GARAGE DRAWER ───────────────────────────────────────── */
.garage-drawer { display: flex; flex-direction: column; gap: 14px; }
.garage-drawer-stage {
  position: relative;
  height: 240px;
  border-radius: var(--tw-r-md);
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 70%, rgba(255,107,26,.18) 0%, rgba(255,107,26,0) 70%),
    linear-gradient(180deg, #0c1117 0%, #07090c 100%);
  border: 1px solid var(--tw-line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.garage-drawer-stage .tw-hangar-viewport {
  position: absolute; inset: 0;
}
.garage-drawer-stage .tw-drag-hint { display: none !important; }
.garage-drawer-stats {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px;
  background: rgba(7,9,12,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-sm);
  pointer-events: none;
}
.garage-drawer-stats span { display: flex; flex-direction: column; gap: 2px; }
.garage-drawer-stats small {
  font: 700 9px/1 var(--tw-font-ui);
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text-mute);
}
.garage-drawer-stats b {
  font: 700 12px/1.1 var(--tw-font-display);
  color: var(--tw-text);
  letter-spacing: .04em;
}

/* ── LAUNCH TRANSITION (Phase Q) ─────────────────────── */
@keyframes deck-shake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(2px, -3px); }
  60%  { transform: translate(-2px, 3px); }
  80%  { transform: translate(3px, -2px); }
  100% { transform: translate(0,0); }
}
@keyframes deck-veil-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}
@keyframes deck-veil-text {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.94); letter-spacing: 0; }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: .26em; }
}
.deck.launching .deck-stage { animation: deck-shake .42s ease-in-out 1; }
.deck-launch-veil {
  position: absolute; inset: 0;
  z-index: 200;
  background: radial-gradient(60% 50% at 50% 55%, rgba(255,107,26,.3) 0%, rgba(0,0,0,.0) 70%), rgba(7,9,12,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: deck-veil-in .32s ease-out both;
  pointer-events: all;
  overflow: hidden;
}
.deck-launch-veil-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,107,26,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,26,.16) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 50% at 50% 55%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(60% 50% at 50% 55%, #000 0%, transparent 80%);
  opacity: .8;
}
.deck-launch-veil-text {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  animation: deck-veil-text .42s cubic-bezier(.2,.8,.2,1) both;
}
.deck-launch-veil-text small {
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: .42em;
  color: var(--tw-ember);
  text-transform: uppercase;
}
.deck-launch-veil-text strong {
  font: 700 clamp(28px, 4vw, 48px)/1 var(--tw-font-display);
  color: var(--tw-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(255,107,26,.4);
}
.deck-launch-veil-text span {
  font: 600 13px/1 var(--tw-font-ui);
  letter-spacing: .22em;
  color: var(--tw-text-mute);
  text-transform: uppercase;
}

/* ── PHASE T — animated mode-tab underline + glow ────── */
.deck-mode-tab { overflow: hidden; }
.deck-mode-tab::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--tw-ember) 30%, var(--tw-ember-hot) 50%, var(--tw-ember) 70%, transparent 100%);
  filter: drop-shadow(0 0 8px var(--tw-ember));
  transform: translateX(-50%);
  transition: width .32s cubic-bezier(.2,.8,.2,1), opacity .2s linear;
  opacity: 0;
}
.deck-mode-tab.active::after { width: 92%; opacity: 1; }
.deck-mode-tab.active {
  border-bottom-color: transparent;
  animation: deck-tab-pop .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes deck-tab-pop {
  0%   { transform: scale(.97); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ── PHASE S — map preview thumbs ────────────────────── */
.deck-pop-grid.map-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.deck-pop-card.map-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px; gap: 6px;
}
.deck-map-thumb {
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}
.deck-pop-card.map-card strong { margin-top: 2px; }

/* ── PHASE R — settings mute toggle ──────────────────── */
.tw-mute-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.tw-mute-row strong { display: block; font: 700 14px/1.2 var(--tw-font-display); letter-spacing: .04em; }
.tw-mute-row small { display: block; margin-top: 4px; color: var(--tw-text-mute); font: 500 11px/1.3 var(--tw-font-ui); }
.tw-mute-toggle {
  position: relative;
  display: inline-flex; align-items: center;
  width: 64px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--tw-line);
  background: rgba(0,0,0,.4);
  cursor: pointer;
  transition: background var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease);
  padding: 0 6px;
}
.tw-mute-toggle.on { background: rgba(255,107,26,.18); border-color: var(--tw-ember); }
.tw-mute-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #cdd2d8 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: left .22s cubic-bezier(.2,.8,.2,1), background .2s linear;
}
.tw-mute-toggle.on .tw-mute-knob { left: 35px; background: linear-gradient(180deg, #ffd9a8 0%, var(--tw-ember-hot) 100%); }
.tw-mute-toggle i {
  margin-left: auto;
  font-style: normal;
  font-size: 14px;
  filter: grayscale(.4);
}
.tw-mute-toggle.on i { filter: none; }

/* ── PHASE U — pause overlay ─────────────────────────── */
.tw-pause-overlay {
  position: fixed; inset: 0;
  z-index: var(--tw-z-overlay, 100);
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(255,107,26,.16), transparent 70%),
    rgba(5,7,10,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: deck-veil-in .26s ease-out both;
  padding: 24px;
}
.tw-pause-card {
  position: relative;
  width: min(560px, 100%);
  background: linear-gradient(180deg, rgba(15,20,28,.92) 0%, rgba(8,11,16,.96) 100%);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.tw-pause-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tw-ember) 40%, var(--tw-ember-hot) 60%, transparent);
  border-radius: var(--tw-r-md) var(--tw-r-md) 0 0;
}
.tw-pause-head { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.tw-pause-kicker {
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: .42em;
  color: var(--tw-ember);
  text-transform: uppercase;
}
.tw-pause-head h1 {
  margin: 0;
  font: 700 clamp(22px, 3vw, 32px)/1.1 var(--tw-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tw-text);
}
.tw-pause-head small { color: var(--tw-text-mute); font: 600 12px/1.2 var(--tw-font-ui); letter-spacing: .14em; text-transform: uppercase; }

.tw-pause-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--tw-line);
}
.tw-pause-tabs button {
  flex: 1; background: none; border: 0;
  padding: 10px 0;
  color: var(--tw-text-mute);
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.tw-pause-tabs button.active { color: var(--tw-ember-hot); }
.tw-pause-tabs button.active::after {
  content: '';
  position: absolute; left: 12%; right: 12%; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tw-ember) 30%, var(--tw-ember-hot) 50%, var(--tw-ember) 70%, transparent);
  filter: drop-shadow(0 0 6px var(--tw-ember));
}

.tw-pause-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.tw-pause-stats span {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-sm);
  text-align: center;
}
.tw-pause-stats small { font: 700 9px/1 var(--tw-font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--tw-text-mute); }
.tw-pause-stats b { font: 700 18px/1 var(--tw-font-display); color: var(--tw-text); }

.tw-pause-actions { display: flex; flex-direction: column; gap: 8px; }
.tw-pause-actions button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-sm);
  background: rgba(255,255,255,.02);
  color: var(--tw-text);
  font: 700 13px/1 var(--tw-font-ui);
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tw-dur-fast) var(--tw-ease), border-color var(--tw-dur-fast) var(--tw-ease), transform var(--tw-dur-fast) var(--tw-ease);
}
.tw-pause-actions button:hover { background: rgba(255,107,26,.06); border-color: rgba(255,107,26,.4); }
.tw-pause-actions button:active { transform: translateY(1px); }
.tw-pause-actions button.tw-primary {
  background: linear-gradient(180deg, var(--tw-ember) 0%, var(--tw-ember-hot) 100%);
  border-color: var(--tw-ember-hot);
  color: #0a0d12;
  box-shadow: 0 6px 20px rgba(255,107,26,.35);
}
.tw-pause-actions button.tw-primary:hover { filter: brightness(1.08); }
.tw-pause-actions button.danger {
  border-color: rgba(255, 90, 90, .35);
  color: #ff8a8a;
}
.tw-pause-actions button.danger:hover { background: rgba(255, 90, 90, .08); border-color: rgba(255, 90, 90, .6); }
.tw-pause-actions button i { font-style: normal; font-size: 14px; }
.tw-pause-actions button span { flex: 1; text-align: left; }
.tw-pause-actions button kbd {
  font: 700 10px/1 var(--tw-font-ui);
  padding: 4px 6px;
  border: 1px solid var(--tw-line);
  border-radius: 4px;
  background: rgba(0,0,0,.4);
  color: var(--tw-text-mute);
}

.tw-pause-hints {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  justify-content: center;
  padding-top: 6px;
  font: 600 11px/1.2 var(--tw-font-ui);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tw-text-dim);
}
.tw-pause-hints kbd {
  font-size: 10px;
  padding: 3px 5px; margin: 0 2px;
  border: 1px solid var(--tw-line);
  border-radius: 3px;
  background: rgba(0,0,0,.4);
  color: var(--tw-text-mute);
}

.tw-pause-settings { display: flex; flex-direction: column; gap: 12px; }
.tw-pause-settings label { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tw-pause-settings label > span { font: 700 12px/1 var(--tw-font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tw-text-mute); }
.tw-pause-settings select { background: rgba(0,0,0,.4); color: var(--tw-text); border: 1px solid var(--tw-line); border-radius: var(--tw-r-sm); padding: 8px 10px; min-width: 160px; }
.tw-pause-back {
  margin-top: 4px;
  align-self: flex-start;
  background: none; border: 0;
  color: var(--tw-text-mute);
  cursor: pointer;
  font: 700 11px/1 var(--tw-font-ui);
  letter-spacing: .22em; text-transform: uppercase;
}
.tw-pause-back:hover { color: var(--tw-ember-hot); }
.hud{position:fixed;inset:0;pointer-events:none;z-index:2;font-family:system-ui,"Segoe UI",Roboto,sans-serif}
.hud-top{position:absolute;top:18px;left:18px;display:flex;gap:10px;flex-wrap:wrap}
.hud-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(10,14,22,.65);border:1px solid rgba(255,180,80,.22);backdrop-filter:blur(12px);font-size:12px;letter-spacing:.1em}
.hud-pill .pill-label{color:#8a94a4;text-transform:uppercase}
.hud-pill .pill-val{color:#ffd89b;font-weight:600}

.hud-bottom-left{position:absolute;left:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;min-width:320px}
.bar{display:grid;grid-template-columns:70px 1fr 90px;align-items:center;gap:10px;padding:6px 10px;background:rgba(10,14,22,.6);border:1px solid rgba(255,255,255,.07);border-radius:10px;backdrop-filter:blur(8px)}
.bar-label{font-size:11px;letter-spacing:.16em;color:#8a94a4;text-transform:uppercase}
.bar-track{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:5px;transition:width .18s ease-out}
.bar-fill.hp{background:linear-gradient(90deg,#63d47a,#b5d463)}
.bar-fill.reload{background:linear-gradient(90deg,#ffb347,#ff8347)}
.bar-fill.ready{background:linear-gradient(90deg,#6bd1ff,#9eeeff)}
.bar-val{font-size:11px;letter-spacing:.1em;color:#cfd6e0;text-align:right;font-variant-numeric:tabular-nums}
.ammo-strip{display:flex;gap:5px;padding:6px 10px;background:rgba(10,14,22,.6);border:1px solid rgba(255,255,255,.07);border-radius:10px}
.shell{width:14px;height:22px;border-radius:3px 3px 2px 2px;background:linear-gradient(180deg,#d4a255,#8a6830);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.shell.spent{background:rgba(255,255,255,.08);box-shadow:none}
.ammo-type{margin-left:auto;align-self:center;padding:3px 8px;border-radius:4px;background:rgba(255,216,155,.12);border:1px solid rgba(255,216,155,.25);color:#ffd89b;font:800 11px/1 ui-monospace,monospace}
.objective-chip{position:absolute;top:58px;left:18px;max-width:min(520px,calc(100vw - 36px));padding:7px 12px;border-radius:6px;background:rgba(10,14,22,.62);border:1px solid rgba(255,216,155,.16);color:#dce5ef;font:700 12px/1.2 system-ui;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}

.hud-bottom-right{position:absolute;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.minimap-wrap{position:relative;padding:6px;background:rgba(10,14,22,.6);border:1px solid rgba(255,255,255,.08);border-radius:12px;backdrop-filter:blur(8px)}
.minimap{display:block;border-radius:8px;width:180px;height:180px}
.minimap-label{position:absolute;top:10px;left:14px;font-size:10px;letter-spacing:.18em;color:rgba(255,216,155,.75);text-transform:uppercase;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.keybinds{display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:rgba(10,14,22,.6);border:1px solid rgba(255,255,255,.07);border-radius:10px;backdrop-filter:blur(8px);font-size:12px;color:#b5c0d0;letter-spacing:.05em}
.keybinds kbd{display:inline-block;min-width:18px;padding:2px 6px;margin-right:3px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:4px;color:#ffd89b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}

/* Fixed center crosshair. Camera pitch and aim ray are now the same signal,
   so the reticle never rides a separate screen-space offset. */
.crosshair{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.95))}
.ch-dispersion{position:absolute;inset:10px;border:1px solid rgba(188,255,130,.72);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 10px rgba(113,255,90,.16) inset}
.ch-dispersion::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:repeating-conic-gradient(from 5deg,rgba(188,255,130,.92) 0 7deg,transparent 7deg 18deg);mask:radial-gradient(circle,transparent 62%,#000 64%,#000 67%,transparent 69%)}
.ch-reload{position:absolute;inset:2px;border-radius:50%;background:conic-gradient(rgba(255,202,82,.95) var(--reload,100%),rgba(255,202,82,.1) 0);mask:radial-gradient(circle,transparent 72%,#000 73%,#000 76%,transparent 77%)}
.crosshair.ready .ch-reload{background:conic-gradient(rgba(164,255,118,.95) var(--reload,100%),rgba(164,255,118,.08) 0)}
.ch-dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#f5ffe8;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 8px rgba(166,255,110,.9)}
.ch-tick{position:absolute;background:#d7ff9d;box-shadow:0 0 0 1px rgba(0,0,0,.45);opacity:.95}
.ch-tick.ch-n,.ch-tick.ch-s{left:50%;width:2px;height:16px;margin-left:-1px}
.ch-tick.ch-n{top:6px}
.ch-tick.ch-s{bottom:6px}
.ch-tick.ch-e,.ch-tick.ch-w{top:50%;height:2px;width:16px;margin-top:-1px}
.ch-tick.ch-e{right:6px}
.ch-tick.ch-w{left:6px}
.ch-bracket{position:absolute;width:13px;height:13px;border:2px solid rgba(215,255,157,.9);opacity:.9}
.ch-bracket.ch-tl{left:18px;top:18px;border-right:none;border-bottom:none}
.ch-bracket.ch-tr{right:18px;top:18px;border-left:none;border-bottom:none}
.ch-bracket.ch-bl{left:18px;bottom:18px;border-right:none;border-top:none}
.ch-bracket.ch-br{right:18px;bottom:18px;border-left:none;border-top:none}

/* Sniper scope overlay */
.sniper-scope{position:fixed;inset:0;pointer-events:none;z-index:50}
.scope-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, transparent 38vh, rgba(0,0,0,.6) 40vh, #000 50vh)}
.scope-ring{position:absolute;left:50%;top:50%;width:78vh;height:78vh;margin-left:-39vh;margin-top:-39vh;border:2px solid rgba(255,200,60,.5);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.8) inset,0 0 24px rgba(0,0,0,.6) inset}
.scope-cross-h{position:absolute;left:50%;top:50%;width:80vh;height:1px;margin-left:-40vh;background:rgba(255,200,60,.55)}
.scope-cross-v{position:absolute;left:50%;top:50%;width:1px;height:80vh;margin-top:-40vh;background:rgba(255,200,60,.55)}
.scope-ticks .tick-h{position:absolute;top:calc(50% - 6px);width:1px;height:12px;background:rgba(255,200,60,.8)}
.scope-ticks .tick-v{position:absolute;left:calc(50% - 6px);height:1px;width:12px;background:rgba(255,200,60,.8)}
.scope-label{position:absolute;left:50%;top:calc(50% + 32vh);transform:translateX(-50%);font:600 12px/1 ui-monospace,monospace;letter-spacing:.25em;color:rgba(255,200,60,.85);text-shadow:0 0 6px rgba(0,0,0,.7)}

.click-to-play{position:absolute;left:50%;top:calc(50% + 60px);transform:translateX(-50%);padding:6px 12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);border-radius:6px;color:#d7dde6;font:500 12px/1 ui-monospace,monospace;letter-spacing:.08em;pointer-events:none}

/* World-space combat labels */
.world-markers{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.world-marker{position:absolute;min-width:112px;max-width:156px;transform:translate(-50%,-100%);padding:3px 5px 4px;background:linear-gradient(180deg,rgba(8,12,16,.62),rgba(8,12,16,.34));border-top:2px solid var(--marker-color,#ff6558);filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.world-marker.enemy{--fallback:#ff6558}
.world-marker.ally{border-top-color:var(--marker-color,#6fb7ff)}
.world-marker.target{border-top-color:var(--marker-color,#ffd15c)}
.world-marker.offscreen{min-width:96px;max-width:124px;opacity:.72;transform:translate(-50%,-50%) scale(.88)}
.world-marker.offscreen::before{content:"";position:absolute;left:50%;top:-7px;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid var(--marker-color,#ff6558);filter:drop-shadow(0 1px 2px #000)}
.wm-name{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#f0f5f8;font:800 10px/1.1 ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.95);white-space:nowrap;overflow:hidden}
.wm-name span{overflow:hidden;text-overflow:ellipsis}
.wm-name b{flex:0 0 auto;color:#d8e0e8;font-size:9px;font-weight:800}
.wm-hp{height:5px;margin-top:4px;background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.14);overflow:hidden}
.wm-hp span{display:block;height:100%;background:linear-gradient(90deg,var(--marker-color,#ff6558),#ffd15c);box-shadow:0 0 8px var(--marker-color,#ff6558)}
.wm-value{margin-top:2px;color:#dce5ec;font:800 9px/1 ui-monospace,monospace;text-align:right;text-shadow:0 1px 2px #000}
.damage-floater{position:absolute;z-index:9;pointer-events:none;color:#f8f6e8;font:900 20px/1 ui-monospace,monospace;letter-spacing:.03em;text-shadow:0 2px 0 #000,0 0 10px rgba(255,230,130,.75);will-change:transform,opacity}
.damage-floater.critical{color:#ff784a;font-size:24px;text-shadow:0 2px 0 #000,0 0 14px rgba(255,70,30,.95)}
.damage-floater.ricochet{color:#8fd9ff;font-size:15px;text-shadow:0 2px 0 #000,0 0 10px rgba(90,180,255,.7)}
.damage-floater.blocked{color:#ffd08a;font-size:15px;text-shadow:0 2px 0 #000,0 0 10px rgba(255,180,80,.75)}

/* Directional damage indicator */
.damage-indicator{position:absolute;left:50%;top:50%;width:280px;height:280px;pointer-events:none;opacity:0;transition:opacity .2s ease-out;transform:translate(-50%,-50%)}
.damage-wedge{position:absolute;left:50%;top:-6px;width:0;height:0;margin-left:-18px;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:26px solid rgba(255,72,60,.85);filter:drop-shadow(0 0 6px rgba(255,40,30,.6))}

/* Streak pill */
.hud-pill.streak{border-color:rgba(255,90,60,.55);background:rgba(55,20,15,.7);animation:streakPulse 1.6s ease-in-out infinite}
.hud-pill.streak .pill-val{color:#ffc06a}
@keyframes streakPulse{0%,100%{box-shadow:0 0 0 rgba(255,90,60,0)}50%{box-shadow:0 0 14px rgba(255,90,60,.45)}}

/* Kill feed (upper-center) */
.kill-feed{position:absolute;top:68px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.kill-feed-item{padding:5px 14px;border-radius:4px;font:600 12px/1.3 ui-monospace,monospace;letter-spacing:.08em;background:rgba(10,14,22,.75);border:1px solid rgba(255,255,255,.12);color:#e5ecf5;transition:opacity .4s ease-out;max-width:460px}
.kill-feed-item.kill{border-left:3px solid #7ce082;color:#c8f5cf}
.kill-feed-item.death{border-left:3px solid #ff5a4a;color:#ffd1cd}

/* HP regen flash */
.bar-fill.hp.regen{box-shadow:0 0 10px rgba(120,230,140,.65) inset, 0 0 8px rgba(120,230,140,.35);filter:brightness(1.2) hue-rotate(-10deg)}

/* Reticle spotting lock ring (3rd person only) */
.reticle-lock{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border:2px solid #ff4a3a;border-radius:50%;opacity:.88;box-shadow:0 0 12px rgba(255,60,50,.6),inset 0 0 0 1px rgba(0,0,0,.55);pointer-events:none;animation:lockPulse .7s ease-in-out infinite}
@keyframes lockPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.reticle-dist{position:absolute;left:calc(50% + 32px);top:calc(50% - 8px);font:600 12px/1 ui-monospace,monospace;color:#ff9a88;text-shadow:0 0 3px rgba(0,0,0,.8);pointer-events:none;letter-spacing:.06em}
.reticle-dist.sniper{left:calc(50% + 30px);top:calc(50% + 6px);color:#ffd08a}

/* Hit marker — four diverging ticks */
.hit-marker{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:none}
.hit-marker span{position:absolute;width:10px;height:2px;background:#fff;box-shadow:0 0 6px rgba(255,80,80,.9);left:50%;top:50%}
.hit-marker span:nth-child(1){transform:translate(-22px,-1px) rotate(0deg)}
.hit-marker span:nth-child(2){transform:translate(12px,-1px) rotate(0deg)}
.hit-marker span:nth-child(3){transform:translate(-1px,-22px) rotate(90deg)}
.hit-marker span:nth-child(4){transform:translate(-1px,12px) rotate(90deg)}

/* Auto-aim hard lock: thicker brighter ring */
.reticle-lock.hard{border-color:#ffb23a;box-shadow:0 0 14px rgba(255,170,40,.8),inset 0 0 8px rgba(255,170,40,.45);animation-duration:.45s}
.autoaim-label{position:absolute;left:calc(50% - 22px);top:calc(50% + 40px);font:700 10px/1 ui-monospace,monospace;letter-spacing:.16em;color:#ffb23a;text-shadow:0 0 4px rgba(0,0,0,.9);pointer-events:none}

/* Shot outcome banner */
.shot-banner{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;padding:6px 14px;border-radius:6px;background:rgba(12,14,18,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.shot-banner .shot-title{font:800 18px/1 ui-monospace,monospace;letter-spacing:.12em}
.shot-banner .shot-sub{font:600 11px/1.2 ui-monospace,monospace;margin-top:4px;letter-spacing:.08em;opacity:.85}
.shot-banner.outcome-ricochet .shot-title{color:#7ec8ff;text-shadow:0 0 6px rgba(120,200,255,.55)}
.shot-banner.outcome-partial .shot-title{color:#ffd08a;text-shadow:0 0 6px rgba(255,200,120,.55)}
.shot-banner.outcome-penetration .shot-title{color:#7ce082;text-shadow:0 0 6px rgba(120,240,130,.55)}
.shot-banner.outcome-critical .shot-title{color:#ff7a4a;text-shadow:0 0 10px rgba(255,120,70,.8)}

/* Multi-kill announcer */
.announcer{position:absolute;left:50%;top:38%;font:900 42px/1 ui-monospace,monospace;letter-spacing:.22em;pointer-events:none;text-shadow:0 0 16px rgba(0,0,0,.9),0 0 32px currentColor;transform-origin:center}
.announcer.rank-2{color:#ffd08a}
.announcer.rank-3{color:#ff8a4a}
.announcer.rank-4{color:#ff4a7a}
.announcer.rank-5{color:#ff3a3a;font-size:52px;animation:rampageShake .18s ease-in-out infinite alternate}
@keyframes rampageShake{from{transform:translate(-50%,-50%) rotate(-1.2deg)}to{transform:translate(-50%,-50%) rotate(1.2deg)}}


.tw-overlay{
  position:fixed;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(12px,1.6vw,24px);
  box-sizing:border-box;
  color:#eef4f1;
  font-family:Manrope,Inter,system-ui,"Segoe UI",Roboto,sans-serif;
  overflow:auto;
  pointer-events:auto;
  background:
    linear-gradient(90deg,rgba(5,8,12,.96) 0%,rgba(5,8,12,.88) 34%,rgba(5,8,12,.54) 70%,rgba(5,8,12,.78) 100%),
    linear-gradient(180deg,rgba(5,8,12,.18),rgba(5,8,12,.94) 78%),
    url('/tank-wars/assets/ui/tank-hangar-menu.webp') center/cover no-repeat;
}

.tw-overlay::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.026) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(240,184,90,.15) 0 1px,transparent 1px 80px);
  opacity:.34;
  animation:tw-scan 16s linear infinite;
}

.tw-overlay.minimal{
  align-items:center;
  justify-content:center;
  background:rgba(3,5,7,.78);
  backdrop-filter:blur(10px);
}

@keyframes tw-scan{
  from{background-position:0 0,0 0}
  to{background-position:0 48px,160px 0}
}

.tw-head{
  width:min(100%,1320px);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px;
  box-sizing:border-box;
  background:rgba(7,12,16,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 18px 54px rgba(0,0,0,.32);
  backdrop-filter:blur(18px);
}

.tw-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
  border:0;
  background:transparent;
  color:#eef4f1;
  text-align:left;
  cursor:pointer;
  padding:0;
  font:inherit;
}

.tw-brand>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(240,184,90,.42);
  background:linear-gradient(145deg,rgba(240,184,90,.2),rgba(120,217,200,.08));
  color:#f0c26b;
  font-weight:950;
  letter-spacing:-.04em;
}

.tw-brand b{display:block;font-family:"Exo 2",Manrope,system-ui,sans-serif;font-size:17px;line-height:1.05}

.tw-brand small{display:block;margin-top:3px;color:#94a4a0;font-size:12px;font-weight:800}

.tw-head nav{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.tw-head button:not(.tw-brand),.tw-head a,.tw-panel button,.tw-pause button,.tw-primary,.tw-secondary,.tw-mode-card,.tw-menu-card,.tw-tank-switcher button,.tw-back,.tw-hangar-actions button,.tw-rotate-controls button,.tw-tank-carousel button,.tw-hangar-small-actions button,.tw-setting-cards button,.tw-map-card,.tw-mission-card,.tw-choice-row button,.tw-showcase-rotate button,.tw-mode-tabs button,.tw-class-picks button{
  border:1px solid rgba(255,255,255,.13);
  background:rgba(12,18,23,.74);
  color:#eef4f1;
  border-radius:8px;
  padding:10px 13px;
  font:850 13px/1.1 "Exo 2",Manrope,system-ui,"Segoe UI",sans-serif;
  cursor:pointer;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease,color .16s ease;
}

.tw-head button:hover,.tw-head a:hover,.tw-panel button:hover,.tw-pause button:hover,.tw-secondary:hover,.tw-mode-card:hover,.tw-menu-card:hover,.tw-tank-switcher button:hover,.tw-back:hover,.tw-hangar-actions button:hover,.tw-rotate-controls button:hover,.tw-tank-carousel button:hover,.tw-hangar-small-actions button:hover,.tw-setting-cards button:hover,.tw-map-card:hover,.tw-mission-card:hover,.tw-choice-row button:hover,.tw-showcase-rotate button:hover,.tw-mode-tabs button:hover{
  background:rgba(28,38,46,.88);
  transform:translateY(-1px);
}

.tw-head button.tw-battle-cta{
  position:relative;
  min-width:104px;
  border-color:#ffd889;
  background:linear-gradient(180deg,#ffe08f,#d8922f 52%,#8f5a1d);
  color:#13100a;
  box-shadow:0 0 0 1px rgba(255,216,137,.38) inset,0 0 28px rgba(240,184,90,.34),0 12px 28px rgba(0,0,0,.32);
  overflow:hidden;
  animation:tw-battle-pulse 1.7s ease-in-out infinite;
}

.tw-head button.tw-battle-cta::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -55%;
  width:46%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:tw-battle-shine 2.2s ease-in-out infinite;
}

.tw-head button.tw-battle-cta:hover{
  background:linear-gradient(180deg,#fff0b3,#eda744 52%,#9d6422);
  color:#110d07;
}

@keyframes tw-battle-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,216,137,.35) inset,0 0 22px rgba(240,184,90,.28),0 12px 28px rgba(0,0,0,.32)}
  50%{box-shadow:0 0 0 1px rgba(255,244,188,.62) inset,0 0 38px rgba(240,184,90,.5),0 16px 34px rgba(0,0,0,.38)}
}

@keyframes tw-battle-shine{
  0%,42%{left:-58%}
  72%,100%{left:116%}
}

.tw-head button.active,.tw-mode-card.active,.tw-class-card.active,.tw-tank-switcher button.active,.tw-tank-carousel button.active,.tw-setting-cards button.active,.tw-map-card.active,.tw-mission-card.active,.tw-choice-row button.active,.tw-mode-tabs button.active,.tw-class-picks button.active{
  border-color:#f0b85a;
  background:linear-gradient(180deg,rgba(240,184,90,.2),rgba(240,184,90,.08));
  box-shadow:0 0 0 1px rgba(240,184,90,.12) inset,0 12px 28px rgba(0,0,0,.24);
}

.tw-kicker,.tw-mini-label,.tw-panel-title>span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#f0b85a;
  font-weight:950;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
}

.tw-panel-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.tw-panel-title small{
  max-width:260px;
  color:#91a09c;
  font-size:12px;
  line-height:1.35;
  text-align:right;
}

.tw-home,.tw-submenu,.tw-garage,.tw-layout{
  width:min(100%,1320px);
  margin:0 auto;
}

.tw-hangar{
  width:min(100%,1320px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

.tw-hangar-stage{
  min-height:calc(100vh - 154px);
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) 286px;
  grid-template-rows:minmax(470px,1fr) auto;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:
    radial-gradient(ellipse at 50% 68%,rgba(240,184,90,.14),transparent 34%),
    linear-gradient(90deg,rgba(6,10,14,.84),rgba(6,10,14,.08) 42%,rgba(6,10,14,.72)),
    linear-gradient(180deg,rgba(6,10,14,.04),rgba(6,10,14,.88)),
    url('/tank-wars/assets/ui/tank-hangar-menu.webp') center/cover no-repeat;
  box-shadow:0 32px 100px rgba(0,0,0,.42);
  overflow:hidden;
}

.tw-hangar-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 72%,rgba(120,217,200,.1),transparent 34%),
    linear-gradient(180deg,transparent 0 52%,rgba(0,0,0,.18) 52% 100%),
    repeating-linear-gradient(90deg,transparent 0 92px,rgba(255,255,255,.035) 92px 93px);
  opacity:.82;
}

.tw-hangar-stage::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:122px;
  z-index:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,184,90,.4),transparent);
  box-shadow:0 -20px 0 rgba(120,217,200,.08),0 22px 0 rgba(255,255,255,.04);
  opacity:.7;
}

.tw-hangar-brief,.tw-hangar-specs{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(8,13,17,.68),rgba(8,13,17,.28)),
    linear-gradient(90deg,rgba(240,184,90,.06),transparent 56%);
  box-shadow:0 18px 44px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
  position:relative;
  z-index:2;
}

.tw-hangar-flow{
  display:grid;
  gap:8px;
  margin-top:18px;
}

.tw-hangar-flow span{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:#c9d2cf;
  font-size:12px;
  font-weight:750;
}

.tw-hangar-flow b{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(240,184,90,.18);
  color:#ffd889;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
}

.tw-hangar-brief{
  grid-column:1;
  grid-row:1;
  width:clamp(220px,21vw,294px);
  min-height:0;
  align-self:end;
  justify-self:start;
  justify-content:center;
  margin:0 0 12px 12px;
}

.tw-hangar-brief h2{
  margin:8px 0 0;
  font-size:clamp(30px,3.4vw,54px);
  line-height:.96;
  letter-spacing:0;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
}

.tw-hangar-brief p{
  margin:12px 0 0;
  color:#c9d2cf;
  line-height:1.55;
}

.tw-hangar-quick-specs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}

.tw-hangar-quick-specs span{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.tw-hangar-quick-specs small{
  display:block;
  margin-bottom:5px;
  color:#91a09c;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tw-hangar-quick-specs b{
  color:#f0c26b;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:22px;
}

.tw-hangar-actions{
  display:grid;
  gap:9px;
  margin-top:22px;
}

.tw-hangar-center{
  grid-column:1 / -1;
  grid-row:1;
  position:relative;
  z-index:1;
  min-height:clamp(470px,62vh,640px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

.tw-hangar-viewport{
  position:absolute;
  inset:0;
  cursor:grab;
  touch-action:none;
}

.tw-hangar-viewport:active{
  cursor:grabbing;
}

.tw-hangar-viewport canvas{
  filter:drop-shadow(0 34px 30px rgba(0,0,0,.48));
}

.tw-hangar-viewport.compact{
  background:
    radial-gradient(circle at 50% 72%,rgba(120,217,200,.1),transparent 36%),
    linear-gradient(180deg,rgba(9,15,18,.08),rgba(5,8,10,.76)),
    url('/tank-wars/assets/ui/tank-hangar-menu.webp') center/cover no-repeat;
}

.tw-hangar-viewport.compact .tw-drag-hint{
  display:none;
}

.tw-drag-hint{
  position:absolute;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(5,8,12,.62);
  color:#aebbb8;
  font-size:11px;
  font-weight:850;
  pointer-events:none;
  white-space:nowrap;
}

.tw-rotate-controls{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  padding:0 12px 16px;
}

.tw-rotate-controls button{
  background:rgba(6,10,13,.72);
  backdrop-filter:blur(10px);
}

.tw-spec-list{
  display:grid;
  gap:8px;
  margin-top:4px;
}

.tw-spec-list.compact{
  grid-template-columns:1fr;
}

.tw-hangar-specs{
  grid-column:2;
  grid-row:1;
  width:260px;
  min-height:0;
  align-self:center;
  justify-self:end;
  margin-right:2px;
  gap:12px;
  justify-content:center;
}

.tw-action-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 2px;
}

.tw-action-title span{
  color:#f0b85a;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:13px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.tw-action-title small{
  color:#91a09c;
  font-size:12px;
  text-align:right;
}

.tw-spec-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  padding:12px;
  background:rgba(12,18,23,.74);
  color:#eef4f1;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.tw-spec-toggle:hover{
  border-color:rgba(240,184,90,.42);
  background:rgba(28,38,46,.88);
  transform:translateY(-1px);
}

.tw-spec-toggle span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}

.tw-spec-toggle b{
  color:#f0c26b;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:16px;
}

.tw-spec-toggle small{
  color:#aebbb8;
  font-size:12px;
}

.tw-spec-toggle em{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(240,184,90,.16);
  color:#ffd889;
  font-style:normal;
  font-size:20px;
  line-height:1;
}

.tw-spec-list span{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(6,10,13,.48);
}

.tw-spec-list small{
  color:#91a09c;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.tw-spec-list b{
  max-width:150px;
  color:#eef4f1;
  font-size:15px;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tw-hangar-small-actions{
  display:grid;
  gap:8px;
  margin-top:0;
  padding-top:16px;
}

.tw-tank-rail{
  grid-column:1 / -1;
  grid-row:2;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(7,12,16,.78);
  box-shadow:0 18px 54px rgba(0,0,0,.3);
  backdrop-filter:blur(16px);
}

.tw-rail-head{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:0 8px;
}

.tw-rail-head span{
  color:#f0b85a;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.tw-rail-head small{
  color:#91a09c;
  line-height:1.35;
}

.tw-tank-carousel{
  display:grid;
  grid-template-columns:repeat(4,minmax(190px,1fr));
  gap:10px;
}

.tw-tank-carousel button{
  position:relative;
  min-height:94px;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-areas:"sil title" "sil role" "sil stats";
  align-items:flex-start;
  justify-content:center;
  gap:3px 12px;
  overflow:hidden;
  text-align:left;
  background:
    linear-gradient(180deg,rgba(15,22,28,.86),rgba(7,11,15,.76)),
    radial-gradient(circle at 14% 50%,rgba(120,217,200,.08),transparent 38%);
}

.tw-tank-carousel button em{
  position:relative;
  grid-area:sil;
  align-self:center;
  width:72px;
  height:38px;
  display:block;
  border-radius:5px 13px 7px 7px;
  background:linear-gradient(180deg,#6f7d63,#263423);
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.24),0 12px 26px rgba(0,0,0,.28);
}

.tw-tank-carousel button em::before{
  content:"";
  position:absolute;
  width:28px;
  height:15px;
  margin:7px 0 0 25px;
  border-radius:10px 12px 4px 4px;
  background:#35442f;
}

.tw-tank-carousel button em::after{
  content:"";
  position:absolute;
  width:42px;
  height:4px;
  margin:12px 0 0 50px;
  border-radius:999px;
  background:#a5adb0;
  box-shadow:0 0 10px rgba(255,255,255,.28);
}

.tw-tank-carousel button.scout em{
  width:62px;
  height:31px;
}

.tw-tank-carousel button.scout em::before{width:22px;height:12px;margin:5px 0 0 22px}

.tw-tank-carousel button.scout em::after{width:33px;margin:10px 0 0 44px}

.tw-tank-carousel button.breakthrough em{
  width:80px;
  height:43px;
  background:linear-gradient(180deg,#697061,#252a24);
}

.tw-tank-carousel button.breakthrough em::before{width:36px;height:18px;margin:7px 0 0 24px}

.tw-tank-carousel button.assault-gun em{
  width:78px;
  height:34px;
  border-radius:5px 7px 7px 7px;
  background:linear-gradient(180deg,#79694e,#30271c);
}

.tw-tank-carousel button.assault-gun em::before{width:34px;height:17px;margin:5px 0 0 18px;border-radius:4px}

.tw-tank-carousel button.assault-gun em::after{width:54px;margin:12px 0 0 45px}

.tw-tank-carousel button:disabled{
  opacity:.48;
  cursor:not-allowed;
}

.tw-tank-carousel button.active::after{
  content:"В ангаре";
  position:absolute;
  top:9px;
  right:9px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(240,184,90,.18);
  color:#ffd889;
  font-size:8px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tw-tank-carousel strong{
  grid-area:title;
  font-size:17px;
  padding-right:0;
}

.tw-tank-carousel button.active strong{
  padding-right:68px;
}

.tw-tank-carousel small{
  grid-area:role;
  color:#aebbb8;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-width:100%;
}

.tw-tank-carousel span{
  grid-area:stats;
  color:#f0c26b;
  font-size:11px;
  font-weight:850;
}

.tw-home{
  display:grid;
  grid-template-columns:minmax(360px,.98fr) minmax(420px,1.02fr);
  gap:16px;
  align-items:stretch;
}

.tw-home-hero,.tw-panel,.tw-showcase,.tw-menu-card,.tw-setup-card,.tw-pause,.tw-results{
  background:linear-gradient(180deg,rgba(15,22,28,.88),rgba(8,13,17,.82));
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 22px 70px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
}

.tw-home-hero{
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(20px,2.6vw,34px);
  overflow:hidden;
  position:relative;
}

.tw-home-hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -28% 30%;
  height:58%;
  background:radial-gradient(circle,rgba(240,184,90,.22),transparent 66%);
  pointer-events:none;
}

.tw-home-copy{
  position:relative;
  z-index:1;
}

.tw-home-copy h2{
  margin:10px 0 0;
  max-width:640px;
  font-size:clamp(54px,7vw,96px);
  line-height:.88;
  letter-spacing:-.07em;
  font-weight:950;
}

.tw-home-copy p{
  max-width:600px;
  margin:20px 0 0;
  color:#c9d2cf;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.55;
}

.tw-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.tw-home-status{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.tw-home-status span,.tw-summary-grid span,.tw-stats span,.tw-result-grid span,.tw-quests div,.tw-tank-stats span{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(6,10,13,.48);
}

.tw-home-status b,.tw-summary-grid b,.tw-stats b,.tw-result-grid b,.tw-tank-stats b{
  color:#eef4f1;
  font-size:20px;
  line-height:1.05;
}

.tw-home-status small,.tw-summary-grid small,.tw-tank-stats small{
  color:#91a09c;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.tw-menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.tw-menu-card{
  position:relative;
  min-height:160px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:8px;
  padding:20px;
  text-align:left;
  overflow:hidden;
}

.tw-menu-card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(120,217,200,.12);
  transition:transform .22s ease,background .22s ease;
}

.tw-menu-card:hover::before{transform:scale(1.18);background:rgba(240,184,90,.16)}

.tw-menu-card.primary{
  border-color:rgba(240,184,90,.42);
  background:linear-gradient(150deg,rgba(240,184,90,.18),rgba(15,22,28,.9) 46%,rgba(8,13,17,.86));
}

.tw-menu-card.slim{grid-column:1/-1;min-height:116px}

.tw-menu-card span{
  color:#f0c26b;
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
}

.tw-menu-card strong{
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.tw-menu-card small{
  max-width:360px;
  color:#aebbb8;
  font-size:13px;
  line-height:1.42;
}

.tw-primary{
  min-height:46px;
  background:linear-gradient(180deg,#f0c26b,#b9802f);
  border-color:#ffd889;
  color:#14100a;
  box-shadow:0 14px 30px rgba(185,128,47,.22);
}

.tw-primary:hover{background:linear-gradient(180deg,#ffd889,#c88d37);transform:translateY(-1px)}

.tw-secondary{
  min-height:46px;
  background:rgba(120,217,200,.12);
  border-color:rgba(120,217,200,.36);
  color:#dffcf6;
}

.tw-primary:disabled,.tw-panel button:disabled,.tw-tank-switcher button:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
}

.tw-battle-screen{
  width:min(100%,1320px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tw-battle-command{
  display:grid;
  grid-template-columns:160px minmax(250px,1fr) minmax(420px,1.35fr);
  gap:14px;
  align-items:stretch;
}

.tw-battle-command .tw-back{
  margin:0;
  align-self:center;
}

.tw-battle-command h2{
  margin:4px 0 6px;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:clamp(30px,3vw,46px);
  line-height:1;
}

.tw-battle-command p{
  margin:0;
  color:#b8c4c0;
  line-height:1.45;
}

.tw-mode-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.tw-mode-tabs button{
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  text-align:left;
}

.tw-mode-tabs span{
  color:#78d9c8;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tw-mode-tabs strong{
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:16px;
}

.tw-battle-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:14px;
  align-items:start;
}

.tw-battle-main{
  min-width:0;
}

.tw-battle-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.tw-battle-heading h2{
  margin:6px 0 6px;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:clamp(34px,4vw,62px);
  line-height:.96;
}

.tw-battle-heading p{
  max-width:560px;
  margin:0;
  color:#c4ceca;
}

.tw-battle-sidebar{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tw-battle-sidebar h3{
  margin:7px 0 6px;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:30px;
  line-height:1;
}

.tw-battle-sidebar p{
  margin:0;
  color:#aebbb8;
}

.tw-battle-map-focus{
  display:grid;
  gap:9px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(6,10,13,.58),rgba(6,10,13,.32));
}

.tw-battle-map-focus>div{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.tw-battle-map-focus strong{
  color:#eef4f1;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:18px;
  line-height:1.05;
}

.tw-battle-map-meta{
  color:#aebbb8;
  font-size:11px;
  font-weight:850;
  letter-spacing:.05em;
  text-align:right;
  text-transform:uppercase;
}

.tw-battle-summary{
  display:grid;
  gap:8px;
}

.tw-battle-summary span{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(6,10,13,.45);
}

.tw-battle-summary small{
  color:#91a09c;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.tw-battle-summary b{
  min-width:0;
  max-width:165px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
}

.tw-battle-sidebar .tw-primary{
  width:100%;
  min-height:54px;
  margin-top:auto;
}

.tw-submenu{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.tw-mode-menu{
  position:sticky;
  top:96px;
}

.tw-back{
  width:100%;
  margin-bottom:14px;
  text-align:left;
}

.tw-mode-list,.tw-class-row,.tw-research,.tw-quests{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.tw-mode-card,.tw-class-card{
  position:relative;
  min-height:86px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
}

.tw-mode-card.active::before,.tw-class-card.active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:3px;
  background:#f0b85a;
}

.tw-mode-card span{
  color:#78d9c8;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:950;
}

.tw-mode-card strong,.tw-class-card strong,.tw-room-row strong{
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:16px;
}

.tw-mode-card small,.tw-class-card span,.tw-class-card small,.tw-briefing span,.tw-panel p,.tw-room-live span,.tw-room-row span,.tw-chat-log p,.tw-error{
  color:#aebbb8;
  font-size:13px;
  line-height:1.45;
}

.tw-setup-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tw-setup-card{
  padding:clamp(18px,2.2vw,26px);
}

.tw-setup-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.tw-setup-head h2,.tw-garage-head h2{
  margin:6px 0 0;
  font-size:clamp(32px,4vw,58px);
  line-height:.95;
  letter-spacing:0;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  text-wrap:balance;
}

.tw-setup-head p,.tw-garage-head p{
  max-width:700px;
  margin:12px 0 0;
  color:#c4ceca;
  line-height:1.5;
}

.tw-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}

.tw-summary-grid b{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
}

.tw-settings-stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.tw-settings-stack section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tw-settings-stack h3{
  margin:0;
  color:#f0b85a;
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.tw-dual-settings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.tw-setting-cards,.tw-choice-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.tw-setting-cards.compact{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.tw-setting-cards button,.tw-choice-row button{
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  text-align:left;
}

.tw-choice-row button{
  align-items:center;
  min-height:46px;
  text-align:center;
}

.tw-setting-cards strong{
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:14px;
}

.tw-setting-cards small{
  color:#aebbb8;
  font-size:12px;
}

.tw-map-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.tw-map-card{
  min-height:202px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  overflow:hidden;
  text-align:left;
}

.tw-map-preview{
  position:relative;
  height:126px;
  border-radius:7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#1a2329;
  box-shadow:0 16px 28px rgba(0,0,0,.3) inset,0 12px 26px rgba(0,0,0,.18);
}

.tw-map-preview.large{
  height:164px;
  border-radius:8px;
}

.tw-map-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(160deg,rgba(255,255,255,.2),transparent 24%),
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 54%),
    radial-gradient(circle at 50% 72%,transparent 0 33%,rgba(0,0,0,.28) 72%);
  pointer-events:none;
}

.tw-map-preview span{
  position:absolute;
  display:block;
}

.tw-map-sky{inset:0 0 42%;background:linear-gradient(180deg,#a9703c,#3d362f)}

.tw-map-ground{
  left:-8%;
  right:-8%;
  bottom:-12%;
  height:58%;
  transform:perspective(120px) rotateX(56deg);
  transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 16px),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.22));
  opacity:.78;
}

.tw-map-horizon{
  left:-6%;
  right:-6%;
  bottom:34%;
  height:30%;
  clip-path:polygon(0 68%,14% 42%,25% 58%,38% 28%,52% 52%,64% 36%,78% 62%,100% 38%,100% 100%,0 100%);
  background:#3e3329;
  opacity:.88;
}

.tw-map-road{
  left:38%;
  bottom:-18%;
  width:24%;
  height:62%;
  transform:perspective(80px) rotateX(58deg) skewX(-8deg);
  border-radius:40% 40% 8px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(20,18,16,.46));
  opacity:.68;
}

.tw-map-road.flank{
  left:15%;
  width:16%;
  height:48%;
  bottom:-11%;
  transform:perspective(80px) rotateX(58deg) skewX(18deg);
  opacity:.38;
}

.tw-map-road.cross{
  left:22%;
  right:16%;
  bottom:23%;
  width:auto;
  height:12%;
  transform:perspective(80px) rotateX(58deg) skewX(-16deg);
  border-radius:999px;
  opacity:.3;
}

.tw-map-cover{
  bottom:18%;
  width:28%;
  height:18%;
  border-radius:4px 4px 10px 10px;
  background:rgba(7,10,12,.52);
  box-shadow:0 8px 16px rgba(0,0,0,.28);
}

.tw-map-cover.a{left:12%}

.tw-map-cover.b{right:10%;bottom:23%;width:20%;height:24%}

.tw-map-cover.c{left:47%;bottom:31%;width:16%;height:16%;opacity:.78}

.tw-map-objective{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,216,137,.72);
  background:rgba(240,184,90,.12);
  box-shadow:0 0 18px rgba(240,184,90,.26);
}

.tw-map-objective::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  background:#f0b85a;
}

.tw-map-objective.alpha{left:18%;bottom:34%}

.tw-map-objective.bravo{right:18%;bottom:34%}

.tw-map-objective.center{left:50%;bottom:47%;transform:translateX(-50%)}

.tw-map-tank-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 0 14px currentColor;
}

.tw-map-tank-dot.player{left:32%;bottom:24%;color:#78d9c8;background:#78d9c8}

.tw-map-tank-dot.enemy{right:28%;bottom:44%;color:#f06f5a;background:#f06f5a}

.tw-map-atmosphere{
  inset:0;
  background:radial-gradient(circle at 52% 40%,rgba(255,255,255,.12),transparent 22%);
  mix-blend-mode:screen;
  opacity:.58;
}

.tw-map-preview.desert .tw-map-sky{background:linear-gradient(180deg,#d39b5f,#7d5535)}

.tw-map-preview.desert{background:linear-gradient(180deg,#d39b5f 0 42%,#9a6b3f 42% 65%,#3a271a)}

.tw-map-preview.desert .tw-map-horizon{background:#6b472b}

.tw-map-preview.desert .tw-map-cover{background:linear-gradient(180deg,#6f4a2a,#2f2118)}

.tw-map-preview.city .tw-map-sky{background:linear-gradient(180deg,#657485,#2d3847)}

.tw-map-preview.city{background:linear-gradient(180deg,#657485 0 42%,#303946 42% 64%,#11181f)}

.tw-map-preview.city .tw-map-horizon{clip-path:polygon(0 72%,8% 72%,8% 38%,18% 38%,18% 62%,28% 62%,28% 24%,42% 24%,42% 55%,55% 55%,55% 34%,68% 34%,68% 66%,80% 66%,80% 42%,92% 42%,92% 72%,100% 72%,100% 100%,0 100%);background:#202832}

.tw-map-preview.city .tw-map-cover{border-radius:3px;background:linear-gradient(180deg,#343f49,#11171d)}

.tw-map-preview.winter .tw-map-sky{background:linear-gradient(180deg,#d9eaf5,#879eb4)}

.tw-map-preview.winter{background:linear-gradient(180deg,#d9eaf5 0 42%,#8fa6ba 42% 64%,#26333d)}

.tw-map-preview.winter .tw-map-horizon{background:#d2e0e8;opacity:.72}

.tw-map-preview.winter .tw-map-ground{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 20px),linear-gradient(180deg,rgba(255,255,255,.24),rgba(60,76,90,.34))}

.tw-map-preview.night .tw-map-sky{background:radial-gradient(circle at 72% 20%,rgba(215,229,255,.85),transparent 9%),linear-gradient(180deg,#17213d,#07101f)}

.tw-map-preview.night{background:linear-gradient(180deg,#17213d 0 42%,#0b1020 42% 65%,#03050a)}

.tw-map-preview.night .tw-map-horizon{background:#0b1425}

.tw-map-preview.night .tw-map-atmosphere{background:radial-gradient(circle at 70% 22%,rgba(180,210,255,.55),transparent 18%),radial-gradient(circle at 38% 64%,rgba(120,217,200,.2),transparent 22%);opacity:.86}

.tw-map-preview.ruins .tw-map-sky{background:linear-gradient(180deg,#8c7a68,#3e3b35)}

.tw-map-preview.ruins{background:linear-gradient(180deg,#8c7a68 0 42%,#4a443c 42% 65%,#151413)}

.tw-map-preview.ruins .tw-map-horizon{clip-path:polygon(0 70%,10% 70%,10% 46%,18% 46%,18% 72%,28% 72%,28% 32%,40% 32%,40% 62%,48% 62%,48% 44%,58% 44%,58% 78%,68% 78%,68% 36%,82% 36%,82% 66%,100% 48%,100% 100%,0 100%);background:#2f2b27}

.tw-map-preview.ruins .tw-map-cover{border-radius:2px 2px 8px 8px;background:linear-gradient(180deg,#4a443c,#171412)}

.tw-map-preview.canyon .tw-map-sky{background:linear-gradient(180deg,#c67645,#6d3428)}

.tw-map-preview.canyon{background:linear-gradient(180deg,#c67645 0 42%,#7e3e2d 42% 65%,#241412)}

.tw-map-preview.canyon .tw-map-horizon{clip-path:polygon(0 48%,12% 32%,24% 64%,36% 26%,48% 70%,58% 22%,72% 64%,88% 34%,100% 56%,100% 100%,0 100%);background:#53271f}

.tw-map-preview.canyon .tw-map-road.main{left:32%;width:34%;transform:perspective(80px) rotateX(58deg) skewX(10deg)}

.tw-map-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.tw-map-copy strong{
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:16px;
  line-height:1.05;
}

.tw-map-copy small{
  color:#aebbb8;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.tw-mission-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.tw-mission-card{
  min-height:106px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  text-align:left;
}

.tw-mission-card:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.tw-mission-card span{
  color:#f0c26b;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}

.tw-mission-card strong{
  font-size:16px;
}

.tw-mission-card small{
  color:#aebbb8;
}

.tw-mission-card em{
  color:#f0c26b;
  font-size:12px;
  font-style:normal;
  font-weight:850;
}

.tw-setup-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:14px;
}

.tw-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.tw-grid.single{grid-template-columns:1fr}

.tw-loadout .tw-grid{grid-template-columns:1fr}

.tw-loadout.compact .tw-grid{grid-template-columns:1fr 1fr}

.tw-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#aebbb8;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.tw-grid input,.tw-grid select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.13);
  background:#081014;
  color:#eef4f1;
  border-radius:8px;
  padding:11px;
  font:750 14px/1 system-ui;
}

.tw-grid input[type=color]{height:41px;padding:3px}

.tw-loadout-sections{
  display:grid;
  gap:12px;
}

.tw-loadout-section{
  display:grid;
  gap:10px;
  padding:13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}

.tw-loadout-section h3{
  margin:0;
  color:#f0b85a;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.tw-callsign-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 86px;
  gap:8px;
}

.tw-callsign-row label{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:6px;
  color:#aebbb8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tw-callsign-row input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.13);
  background:#081014;
  color:#eef4f1;
  border-radius:8px;
  padding:11px;
  font:750 14px/1 system-ui;
}

.tw-callsign-row input[type=color]{
  height:41px;
  padding:3px;
}

.tw-color-strip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
}

.tw-color-strip button{
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(6,10,13,.7);
  padding:4px;
  cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.tw-color-strip button:hover{
  transform:translateY(-1px);
  border-color:rgba(240,184,90,.38);
}

.tw-color-strip button.active{
  border-color:#f0b85a;
  box-shadow:0 0 0 1px rgba(240,184,90,.22) inset,0 10px 24px rgba(0,0,0,.22);
}

.tw-color-strip span{
  width:100%;
  height:100%;
  border-radius:6px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 38%),
    var(--swatch);
}

.tw-camo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.tw-camo-grid button{
  min-height:72px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-areas:"swatch name" "swatch state";
  align-items:center;
  gap:2px 10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(12,18,23,.78),rgba(6,10,13,.68));
  color:#eef4f1;
  padding:9px;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}

.tw-camo-grid button:hover{
  transform:translateY(-1px);
  border-color:rgba(240,184,90,.38);
}

.tw-camo-grid button.active{
  border-color:#f0b85a;
  background:linear-gradient(180deg,rgba(240,184,90,.18),rgba(12,18,23,.78));
  box-shadow:0 0 0 1px rgba(240,184,90,.12) inset;
}

.tw-camo-grid button:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none;
}

.tw-camo-grid span{
  grid-area:swatch;
  width:42px;
  height:42px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg,var(--camo-a) 0 44%,var(--camo-b) 44% 62%,var(--camo-a) 62%),
    var(--camo-a);
  box-shadow:inset 0 -10px 16px rgba(0,0,0,.28);
}

.tw-camo-grid strong{
  grid-area:name;
  min-width:0;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:13px;
  line-height:1.05;
}

.tw-camo-grid small{
  grid-area:state;
  color:#f0c26b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tw-ammo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.tw-ammo-grid button{
  min-height:72px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"mark name" "mark stats";
  align-items:center;
  gap:2px 10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(12,18,23,.78),rgba(6,10,13,.68));
  color:#eef4f1;
  padding:10px;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}

.tw-ammo-grid button:hover{
  transform:translateY(-1px);
  border-color:rgba(120,217,200,.36);
}

.tw-ammo-grid button.active{
  border-color:#f0b85a;
  background:linear-gradient(180deg,rgba(240,184,90,.18),rgba(12,18,23,.8));
  box-shadow:0 0 0 1px rgba(240,184,90,.12) inset;
}

.tw-ammo-grid span{
  grid-area:mark;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(240,184,90,.38);
  background:rgba(240,184,90,.12);
  color:#ffd889;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:15px;
  font-weight:950;
}

.tw-ammo-grid strong{
  grid-area:name;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:15px;
}

.tw-ammo-grid small{
  grid-area:stats;
  color:#aebbb8;
  font-size:12px;
  line-height:1.3;
}

.tw-class-picks{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.tw-class-picks button{
  min-height:74px;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  justify-items:start;
  gap:4px;
  text-align:left;
}

.tw-class-picks strong{
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:17px;
  line-height:1;
}

.tw-class-picks span,.tw-class-picks small{
  max-width:100%;
  color:#aebbb8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tw-class-picks small{
  font-size:12px;
}

.tw-briefing{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:13px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
}

.tw-briefing small{
  color:#f0c26b;
  font-size:11px;
  font-weight:850;
}

.tw-showcase{
  display:grid;
  grid-template-rows:minmax(260px,1fr) auto;
  min-width:0;
  overflow:hidden;
}

.tw-showcase.dense{
  grid-template-rows:minmax(210px,1fr) auto;
}

.tw-showcase-art{
  position:relative;
  min-height:250px;
  overflow:hidden;
  background:#071014;
}

.tw-showcase.dense .tw-showcase-art{min-height:210px}

.tw-art-vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,8,10,.06),rgba(4,8,10,.62)),
    radial-gradient(circle at 76% 58%,transparent 0 18%,rgba(0,0,0,.28) 58%);
}

.tw-art-chip{
  position:absolute;
  right:12px;
  top:12px;
  z-index:2;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(5,10,12,.7);
  border:1px solid rgba(255,255,255,.15);
  color:#dffcf6;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.tw-showcase-rotate{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:6px;
}

.tw-showcase-rotate button{
  min-width:38px;
  padding:8px 9px;
  background:rgba(6,10,13,.68);
  backdrop-filter:blur(10px);
}

.tw-showcase-body{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:16px;
  background:linear-gradient(180deg,rgba(8,14,17,.94),rgba(4,8,10,.96));
}

.tw-showcase-body h3{
  margin:4px 0 2px;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:30px;
  line-height:1;
  font-weight:950;
}

.tw-showcase-body p{margin:0;color:#aebbb8;font-size:13px}

.tw-tank-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.tw-tank-stats b{color:#f0c26b}

.tw-tank-switcher{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.tw-tank-switcher button{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
}

.tw-tank-switcher small{
  max-width:100%;
  color:#aebbb8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tw-garage{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tw-garage-workbench{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,410px);
  gap:14px;
  min-height:calc(100vh - 132px);
}

.tw-garage-preview,.tw-garage-controls{
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg,rgba(12,18,23,.78),rgba(5,9,12,.9)),
    rgba(5,8,12,.86);
  box-shadow:0 26px 70px rgba(0,0,0,.35);
  overflow:hidden;
}

.tw-garage-preview{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(420px,1fr) auto;
  border-radius:12px;
}

.tw-garage-preview::before{
  content:"";
  position:absolute;
  inset:auto 8% 84px 8%;
  height:24%;
  background:radial-gradient(closest-side,rgba(240,184,90,.16),transparent 72%);
  pointer-events:none;
}

.tw-garage-topline{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:18px 18px 0;
}

.tw-garage-topline .tw-back{
  width:auto;
  margin:0;
  flex:0 0 auto;
}

.tw-garage-topline h2{
  margin:5px 0 0;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:clamp(36px,5vw,70px);
  line-height:.88;
}

.tw-garage-topline p{
  max-width:620px;
  margin:10px 0 0;
  color:#c4ceca;
  line-height:1.45;
}

.tw-garage-stage{
  position:relative;
  min-height:420px;
}

.tw-garage-stage .tw-hangar-viewport{
  height:100%;
  min-height:420px;
}

.tw-garage-rotate{
  position:absolute;
  left:0;
  right:0;
  bottom:22px;
  padding:0 12px;
}

.tw-garage-readout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:0 18px 18px;
}

.tw-garage-readout span{
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(0,0,0,.24);
}

.tw-garage-readout small{
  display:block;
  margin-bottom:5px;
  color:#8f9e9a;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tw-garage-readout b{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  color:#eef4f1;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tw-garage-readout i{
  width:13px;
  height:13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  flex:0 0 auto;
}

.tw-garage-controls{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border-radius:12px;
  align-self:stretch;
}

.tw-garage-note{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  border-left:3px solid #f0b85a;
  background:rgba(240,184,90,.08);
  color:#c4ceca;
  font-size:13px;
  line-height:1.45;
}

.tw-garage-note strong{
  color:#f0c26b;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.tw-lobby{
  width:min(100%,1320px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tw-lobby-command{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  gap:18px;
  align-items:end;
  padding:clamp(18px,2.2vw,26px);
}

.tw-lobby-command h2{
  margin:6px 0 0;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:clamp(36px,4.8vw,68px);
  line-height:.9;
}

.tw-lobby-command p{
  max-width:720px;
  margin:12px 0 0;
  color:#c4ceca;
  line-height:1.45;
}

.tw-lobby-status{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.tw-lobby-status span,.tw-empty-room{
  min-width:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(0,0,0,.2);
}

.tw-lobby-status small{
  display:block;
  margin-bottom:6px;
  color:#8f9e9a;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tw-lobby-status b{
  display:block;
  color:#eef4f1;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tw-lobby-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:14px;
  align-items:start;
}

.tw-lobby-card{
  min-height:360px;
}

.tw-lobby-card .tw-primary{
  width:max-content;
  max-width:100%;
}

.tw-lobby-live{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,520px);
  gap:14px;
  align-items:center;
  border-color:rgba(142,255,162,.24);
  background:linear-gradient(180deg,rgba(70,130,85,.15),rgba(12,18,23,.74));
}

.tw-lobby-live h3{
  margin:5px 0 4px;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:28px;
  line-height:1;
}

.tw-lobby-live p{
  margin:0;
  color:#c4ceca;
}

.tw-empty-room{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
  color:#aebbb8;
  line-height:1.45;
}

.tw-empty-room strong{
  color:#eef4f1;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:16px;
}

.tw-lobby-chat{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:14px;
  align-items:start;
}

.tw-lobby-chat .tw-panel-title{
  grid-column:1/-1;
}

.tw-lobby-chat.muted{
  opacity:.82;
}

.tw-lobby-chat-empty{
  min-height:82px;
  display:flex;
  align-items:center;
  padding:14px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#aebbb8;
  line-height:1.45;
}

.tw-profile{
  width:min(100%,1320px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tw-profile-hero{
  position:relative;
  display:grid;
  grid-template-columns:170px minmax(0,1fr) minmax(360px,520px);
  gap:20px;
  align-items:stretch;
  min-height:280px;
  padding:clamp(20px,2.8vw,34px);
  background:
    linear-gradient(110deg,rgba(8,13,17,.92),rgba(8,13,17,.68) 56%,rgba(240,184,90,.12)),
    radial-gradient(circle at 82% 28%,rgba(120,217,200,.12),transparent 34%),
    rgba(12,18,23,.74);
  overflow:hidden;
}

.tw-profile-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:42%;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(240,184,90,.18),transparent),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 72px);
  opacity:.54;
}

.tw-rank-badge{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:1fr auto auto;
  align-items:center;
  justify-items:center;
  min-height:210px;
  border:1px solid rgba(240,184,90,.24);
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 28%,rgba(240,184,90,.24),transparent 44%),
    linear-gradient(180deg,rgba(240,184,90,.12),rgba(6,10,13,.56));
  box-shadow:0 20px 54px rgba(0,0,0,.26);
}

.tw-rank-badge span{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  align-self:end;
  border:1px solid rgba(255,216,137,.52);
  border-radius:999px;
  background:linear-gradient(180deg,#f0c26b,#8f5a1d);
  color:#120d07;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:54px;
  font-weight:950;
  box-shadow:0 0 0 8px rgba(240,184,90,.1),0 18px 32px rgba(0,0,0,.28);
}

.tw-rank-badge strong{
  margin-top:14px;
  color:#eef4f1;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:15px;
  line-height:1.05;
  text-align:center;
}

.tw-rank-badge small{
  margin:6px 0 16px;
  color:#f0c26b;
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.tw-profile-rank,.tw-profile-stats{
  position:relative;
  z-index:1;
}

.tw-profile-rank h2{
  margin:6px 0 0;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:clamp(44px,6.6vw,90px);
  line-height:.84;
}

.tw-profile-rank p{
  margin:14px 0 18px;
  color:#c4ceca;
  font-size:16px;
}

.tw-xp-track{
  height:16px;
  max-width:720px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.32);
  box-shadow:0 16px 34px rgba(0,0,0,.24) inset;
}

.tw-xp-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f0b85a,#ffd889 52%,#78d9c8);
  box-shadow:0 0 22px rgba(240,184,90,.34);
}

.tw-profile-wallet,.tw-profile-stats{
  display:grid;
  gap:8px;
}

.tw-profile-wallet{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:720px;
  margin-top:12px;
}

.tw-profile-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:end;
}

.tw-profile-wallet span,.tw-profile-stats span{
  min-width:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(0,0,0,.22);
}

.tw-profile-wallet small,.tw-profile-stats small{
  display:block;
  margin-bottom:5px;
  color:#8f9e9a;
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tw-profile-wallet b,.tw-profile-stats b{
  color:#eef4f1;
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:24px;
  line-height:1;
}

.tw-profile-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:14px;
  align-items:start;
}

.tw-tech-tree{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.tw-tech-tree::before{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  top:74px;
  height:2px;
  background:linear-gradient(90deg,rgba(120,217,200,.35),rgba(240,184,90,.34),rgba(255,255,255,.08));
  opacity:.62;
}

.tw-tech-tree button{
  position:relative;
  min-height:220px;
  display:grid;
  grid-template-rows:86px auto auto auto;
  align-items:flex-start;
  justify-content:flex-end;
  gap:5px;
  overflow:hidden;
  text-align:left;
}

.tw-tech-tree button::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.34)),
    radial-gradient(circle at 78% 18%,rgba(120,217,200,.13),transparent 30%);
  pointer-events:none;
}

.tw-tech-tree button.unlocked{
  border-color:rgba(120,217,200,.34);
}

.tw-tech-tree button.ready{
  border-color:#f0b85a;
  box-shadow:0 0 0 1px rgba(240,184,90,.18) inset,0 16px 34px rgba(240,184,90,.1);
}

.tw-tech-tree button.selected{
  border-color:#f0b85a;
  background:linear-gradient(180deg,rgba(240,184,90,.18),rgba(12,18,23,.82));
}

.tw-tech-tree em{
  position:absolute;
  top:10px;
  left:10px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#f0c26b;
  background:rgba(0,0,0,.24);
  font-style:normal;
  font-weight:950;
}

.tw-tech-tree i{
  position:relative;
  z-index:1;
  width:100%;
  height:64px;
  align-self:end;
  display:block;
  border-radius:7px 16px 8px 8px;
  background:
    linear-gradient(180deg,rgba(143,158,118,.92),rgba(36,49,34,.9));
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.24),0 16px 24px rgba(0,0,0,.24);
}

.tw-tech-tree i::before{
  content:"";
  position:absolute;
  left:38%;
  top:14px;
  width:34%;
  height:22px;
  border-radius:12px 16px 5px 5px;
  background:#35442f;
}

.tw-tech-tree i::after{
  content:"";
  position:absolute;
  left:66%;
  top:25px;
  width:48%;
  height:6px;
  border-radius:999px;
  background:#a5adb0;
  box-shadow:0 0 10px rgba(255,255,255,.26);
}

.tw-tech-tree button.scout i{
  height:52px;
}

.tw-tech-tree button.scout i::before{width:28%;height:18px;top:12px}

.tw-tech-tree button.scout i::after{left:62%;width:38%;top:22px}

.tw-tech-tree button.breakthrough i{
  height:70px;
  background:linear-gradient(180deg,#697061,#252a24);
}

.tw-tech-tree button.breakthrough i::before{width:40%;height:25px;top:15px}

.tw-tech-tree button.assault-gun i{
  height:56px;
  border-radius:6px 9px 8px 8px;
  background:linear-gradient(180deg,#79694e,#30271c);
}

.tw-tech-tree button.assault-gun i::before{left:26%;width:38%;height:23px;border-radius:4px;top:12px}

.tw-tech-tree button.assault-gun i::after{left:56%;width:58%;top:24px}

.tw-tech-tree strong,.tw-tech-tree span,.tw-tech-tree small,.tw-tech-tree b{
  position:relative;
  z-index:1;
}

.tw-tech-tree strong{
  font-family:"Exo 2",Manrope,system-ui,sans-serif;
  font-size:22px;
  line-height:1;
}

.tw-tech-tree span,.tw-tech-tree small{
  color:#aebbb8;
  line-height:1.35;
}

.tw-tech-tree small{
  font-size:12px;
}

.tw-tech-tree b{
  margin-top:3px;
  color:#f0c26b;
  font-size:11px;
  line-height:1.2;
}

.tw-quest-stack{
  display:grid;
  gap:10px;
}

.tw-quest-card{
  position:relative;
  display:grid;
  gap:10px;
  padding:13px 13px 13px 16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(240,184,90,.09),transparent 48%),
    rgba(255,255,255,.045);
}

.tw-quest-card::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:#f0b85a;
}

.tw-quest-card.done{
  border-color:rgba(126,224,130,.4);
  background:rgba(70,130,85,.12);
}

.tw-quest-card em{
  width:max-content;
  max-width:100%;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(120,217,200,.11);
  color:#78d9c8;
  font-style:normal;
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.tw-quest-card div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tw-quest-card strong{
  color:#eef4f1;
  font-size:15px;
  line-height:1.25;
}

.tw-quest-card b{
  color:#f0c26b;
  white-space:nowrap;
}

.tw-quest-card>span{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(0,0,0,.32);
}

.tw-quest-card i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f0b85a,#78d9c8);
}

.tw-layout{
  display:grid;
  grid-template-columns:300px minmax(360px,1fr) 360px;
  gap:14px;
  align-items:start;
}

.tw-layout.compact{
  grid-template-columns:minmax(320px,680px);
  justify-content:start;
}

.tw-layout.lobby{
  grid-template-columns:minmax(360px,1.1fr) minmax(320px,.95fr) minmax(300px,.82fr);
}

.tw-panel{
  padding:16px;
}

.tw-level{
  font-size:40px;
  font-weight:950;
}

.tw-xp{
  height:10px;
  background:#101820;
  border-radius:999px;
  overflow:hidden;
  margin:8px 0;
}

.tw-xp span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#f0c26b,#78d9c8);
}

.tw-stats,.tw-result-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.tw-stats span,.tw-result-grid span,.tw-quests div{
  color:#aebbb8;
  flex-direction:row;
  justify-content:space-between;
  gap:10px;
}

.tw-quests div.done{
  border-color:rgba(126,224,130,.45);
  color:#dfffe4;
}

.tw-asset-link{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  color:#f0c26b;
  font-weight:850;
  font-size:13px;
  text-decoration:none;
  border-bottom:1px solid rgba(240,194,107,.45);
}

.tw-asset-link:hover{color:#ffd889;border-color:#ffd889}

.tw-results,.tw-pause{
  width:min(520px,92vw);
  margin:auto;
  padding:24px;
  text-align:center;
}

.tw-results h1,.tw-pause h1{
  margin:0 0 8px;
  font-size:40px;
}

.tw-stars{
  font-size:32px;
  color:#f0c26b;
  margin:10px;
}

.tw-levelup{
  margin-top:10px;
  color:#8fffb2;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.danger{
  border-color:rgba(255,78,66,.45)!important;
  color:#ffb4ad!important;
}

.tw-room-live{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(142,255,162,.22);
  background:rgba(70,130,85,.12);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tw-room-actions{
  display:grid;
  grid-template-columns:1fr 1fr 82px;
  gap:8px;
  align-items:center;
}

.tw-room-actions .tw-primary{margin:0}

.tw-room-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px 0;
}

.tw-room-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  background:rgba(255,255,255,.06);
  border-radius:8px;
}

.tw-room-row div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.tw-room-row strong,.tw-room-row span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tw-chat-log{
  height:260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  background:rgba(255,255,255,.05);
  border-radius:8px;
}

.tw-chat-log div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px;
  border-radius:8px;
  background:rgba(0,0,0,.18);
}

.tw-chat-log div.self{background:rgba(240,184,90,.13)}

.tw-chat-log span{
  color:#dce6e1;
  font-size:13px;
  line-height:1.35;
  word-break:break-word;
}

.tw-chat-send{
  display:grid;
  grid-template-columns:1fr 104px;
  gap:8px;
  margin-top:10px;
}

.tw-chat-send input{
  border:1px solid rgba(255,255,255,.13);
  background:#081014;
  color:#eef4f1;
  border-radius:8px;
  padding:10px;
  font:750 14px/1 system-ui;
}

.tw-error{
  margin-top:10px;
  color:#ffb4ad;
}

@media (max-width:1180px){
  .tw-home,.tw-submenu,.tw-garage-workbench{
    grid-template-columns:1fr;
  }
  .tw-garage-workbench{
    min-height:0;
  }
  .tw-hangar-stage{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:0;
  }
  .tw-hangar-center{
    grid-column:1;
    grid-row:auto;
    min-height:520px;
    order:1;
  }
  .tw-tank-rail{
    grid-column:1;
    grid-row:auto;
    order:2;
  }
  .tw-hangar-specs{
    grid-column:1;
    grid-row:auto;
    width:auto;
    justify-self:stretch;
    align-self:stretch;
    margin:0;
    order:3;
  }
  .tw-hangar-brief{
    grid-column:1;
    grid-row:auto;
    width:auto;
    justify-self:stretch;
    align-self:stretch;
    margin:0;
    order:4;
  }
  .tw-hangar-brief,.tw-hangar-specs{
    min-height:auto;
  }
  .tw-tank-rail{
    grid-template-columns:1fr;
  }
  .tw-tank-carousel{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-home-hero{
    min-height:420px;
  }
  .tw-mode-menu{
    position:static;
  }
  .tw-mode-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-setup-grid,.tw-layout,.tw-layout.lobby{
    grid-template-columns:1fr 1fr;
  }
  .tw-battle-command,.tw-battle-grid{
    grid-template-columns:1fr;
  }
  .tw-lobby-command,.tw-lobby-grid,.tw-lobby-live,.tw-lobby-chat{
    grid-template-columns:1fr;
  }
  .tw-profile-hero,.tw-profile-grid{
    grid-template-columns:1fr;
  }
  .tw-tech-tree{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-battle-sidebar{
    position:static;
  }
  .tw-layout>.tw-panel:last-child,.tw-layout.lobby>.tw-panel:last-child{
    grid-column:1/-1;
  }
  .tw-head{
    align-items:flex-start;
  }
}

@media (max-width:860px){
  .tw-overlay{
    background:
      linear-gradient(180deg,rgba(5,8,12,.82) 0%,rgba(5,8,12,.92) 36%,rgba(5,8,12,.98) 100%),
      url('/tank-wars/assets/ui/tank-hangar-menu.webp') center top/auto 58vh no-repeat,
      #05080c;
  }
  .tw-head{
    flex-direction:column;
    align-items:stretch;
  }
  .tw-brand{
    min-width:0;
  }
  .tw-head nav{
    justify-content:flex-start;
  }
  .tw-home-copy h2{
    font-size:clamp(44px,16vw,72px);
  }
  .tw-menu-grid,.tw-setup-grid,.tw-layout,.tw-layout.lobby,.tw-layout.compact{
    grid-template-columns:1fr;
  }
  .tw-summary-grid,.tw-home-status,.tw-map-grid,.tw-setting-cards,.tw-setting-cards.compact,.tw-mission-grid,.tw-dual-settings{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-mode-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-lobby-status{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-profile-wallet,.tw-profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tw-battle-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .tw-setup-head,.tw-garage-topline{
    align-items:flex-start;
    flex-direction:column;
  }
  .tw-setup-head .tw-primary,.tw-garage-topline .tw-back{
    width:100%;
  }
  .tw-loadout.compact .tw-grid,.tw-grid{
    grid-template-columns:1fr;
  }
  .tw-callsign-row,.tw-camo-grid{
    grid-template-columns:1fr;
  }
  .tw-garage-readout{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .tw-overlay{
    padding:10px;
    gap:10px;
  }
  .tw-head{
    gap:9px;
    padding:10px;
  }
  .tw-brand span{
    width:38px;
    height:38px;
  }
  .tw-head nav{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    gap:6px;
    padding-bottom:2px;
  }
  .tw-head nav button,.tw-head nav a{
    flex:0 0 auto;
    min-width:max-content;
    padding:8px 6px;
    font-size:11px;
  }
  .tw-head nav .tw-battle-cta{
    min-width:112px;
  }
  .tw-head nav a{
    justify-content:center;
  }
  .tw-home-hero{
    min-height:520px;
    justify-content:flex-end;
  }
  .tw-hangar-stage{
    padding:10px;
  }
  .tw-hangar-center{
    min-height:360px;
  }
  .tw-garage-preview{
    grid-template-rows:auto minmax(360px,1fr) auto;
  }
  .tw-garage-stage,.tw-garage-stage .tw-hangar-viewport{
    min-height:360px;
  }
  .tw-garage-topline,.tw-garage-controls{
    padding:14px;
  }
  .tw-garage-readout{
    grid-template-columns:1fr;
    padding:0 14px 14px;
  }
  .tw-lobby-status{
    grid-template-columns:1fr;
  }
  .tw-profile-wallet,.tw-profile-stats,.tw-tech-tree{
    grid-template-columns:1fr;
  }
  .tw-profile-hero{
    min-height:0;
    padding:18px;
  }
  .tw-rank-badge{
    min-height:150px;
  }
  .tw-rank-badge span{
    width:74px;
    height:74px;
    font-size:42px;
  }
  .tw-tech-tree::before{
    display:none;
  }
  .tw-tech-tree button{
    min-height:210px;
  }
  .tw-lobby-card{
    min-height:0;
  }
  .tw-hangar-brief,.tw-hangar-specs{
    padding:14px;
  }
  .tw-hangar-quick-specs{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tw-drag-hint{
    bottom:78px;
    max-width:calc(100% - 32px);
    white-space:normal;
    text-align:center;
  }
  .tw-rotate-controls{
    padding-bottom:12px;
  }
  .tw-tank-carousel{
    grid-template-columns:1fr;
  }
  .tw-tank-carousel button{
    grid-template-columns:82px minmax(0,1fr);
  }
  .tw-home-actions,.tw-room-actions,.tw-chat-send{
    display:grid;
    grid-template-columns:1fr;
  }
  .tw-home-status,.tw-summary-grid,.tw-mode-list,.tw-stats,.tw-result-grid,.tw-tank-stats,.tw-tank-switcher,.tw-map-grid,.tw-setting-cards,.tw-setting-cards.compact,.tw-choice-row,.tw-mission-grid,.tw-dual-settings{
    grid-template-columns:1fr;
  }
  .tw-mode-tabs{
    grid-template-columns:1fr;
  }
  .tw-battle-command h2,.tw-battle-heading h2{
    font-size:34px;
  }
  .tw-menu-card{
    min-height:138px;
  }
  .tw-showcase-art,.tw-showcase.dense .tw-showcase-art{
    min-height:190px;
  }
  .tw-panel-title{
    flex-direction:column;
    gap:4px;
  }
  .tw-panel-title small{
    text-align:left;
  }
  .tw-results h1,.tw-pause h1{
    font-size:32px;
  }
}

/* ================================================================
   ▰▰▰  COMMAND DECK REDESIGN — overrides & new primitives  ▰▰▰
   Loaded last → wins the cascade. All structural class names from
   the original Shell.tsx are reused so React markup stays intact.
   ================================================================ */

/* ---------- 1. Global overlay & background ---------- */

.tw-overlay,
.tw-overlay.minimal {
  position: fixed;
  inset: 0;
  z-index: var(--tw-z-overlay);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  color: var(--tw-text);
  font-family: var(--tw-font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,107,26,.10) 0%, rgba(255,107,26,0) 55%),
    radial-gradient(90% 70% at 50% 110%, rgba(90,200,255,.06) 0%, rgba(90,200,255,0) 60%),
    linear-gradient(180deg, rgba(7,9,12,.92) 0%, rgba(7,9,12,.78) 40%, rgba(7,9,12,.92) 100%);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

.tw-overlay::before {
  /* tame the legacy scanline animation: kill it entirely */
  content: none !important;
  display: none !important;
}

.tw-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 55%, transparent 100%);
  z-index: 0;
}

.tw-overlay > * { position: relative; z-index: 1; }

/* ---------- 2. HEADER (top bar) ---------- */

.tw-head {
  display: flex;
  align-items: center;
  gap: var(--tw-sp-4);
  height: var(--tw-head-h);
  min-height: var(--tw-head-h);
  padding: 0 var(--tw-sp-6);
  background:
    linear-gradient(180deg, rgba(11,15,21,.92) 0%, rgba(11,15,21,.78) 100%);
  border-bottom: 1px solid var(--tw-line);
  box-shadow: 0 1px 0 rgba(255,107,26,.18), var(--tw-shadow-1);
  position: sticky; top: 0;
  z-index: var(--tw-z-head);
  backdrop-filter: blur(10px);
}

.tw-head .tw-brand {
  display: flex; align-items: center; gap: 12px;
  background: transparent !important;
  border: none !important;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: var(--tw-r-md);
  transition: background var(--tw-dur-fast) var(--tw-ease);
}

.tw-head .tw-brand:hover { background: rgba(255,255,255,.04) !important; }

.tw-head .tw-brand > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  font-family: var(--tw-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--tw-text-on-acc);
  background: linear-gradient(140deg, var(--tw-ember-hot) 0%, var(--tw-ember) 60%, var(--tw-ember-deep) 100%);
  border-radius: 8px;
  box-shadow: 0 6px 18px -8px var(--tw-ember-glow), inset 0 1px 0 rgba(255,255,255,.35);
}

.tw-head .tw-brand > div { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }

.tw-head .tw-brand b {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tw-text);
}

.tw-head .tw-brand small {
  font-family: var(--tw-font-ui);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-ember);
  margin-top: 2px;
}

.tw-head nav {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
  flex-wrap: nowrap;
}

.tw-head nav button,
.tw-head nav a {
  font-family: var(--tw-font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--tw-text-mute);
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 9px 14px;
  border-radius: var(--tw-r-md);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color var(--tw-dur-fast) var(--tw-ease),
              background var(--tw-dur-fast) var(--tw-ease),
              border-color var(--tw-dur-fast) var(--tw-ease);
}

.tw-head nav button:hover,
.tw-head nav a:hover {
  color: var(--tw-text);
  background: rgba(255,255,255,.04) !important;
}

.tw-head nav button.active {
  color: var(--tw-text) !important;
  background: rgba(255,107,26,.08) !important;
  border-color: var(--tw-line-ember) !important;
}

.tw-head nav button.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tw-ember), transparent);
  border-radius: 2px;
}

/* The big "В БОЙ" button in header — DEMOTED to look like other nav
   items because the real CTA now lives in the Hangar centre. */

.tw-head .tw-battle-cta {
  font-family: var(--tw-font-display) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: var(--tw-track-cta) !important;
  text-transform: uppercase;
  color: var(--tw-text-on-acc) !important;
  background: linear-gradient(135deg, var(--tw-ember-hot) 0%, var(--tw-ember) 55%, var(--tw-ember-deep) 100%) !important;
  border: 1px solid rgba(255,107,26,.6) !important;
  padding: 9px 18px !important;
  border-radius: var(--tw-r-md) !important;
  box-shadow: 0 6px 18px -8px var(--tw-ember-glow), inset 0 1px 0 rgba(255,255,255,.3);
  margin-right: 8px;
  position: relative;
  overflow: hidden;
}

.tw-head .tw-battle-cta::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -50%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-22deg);
  animation: tw-shine-sweep 3.6s var(--tw-ease) infinite;
}

.tw-head .tw-battle-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ---------- 3. PANEL primitive (replaces every .tw-panel surface) ---------- */

.tw-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(22,29,38,.92) 0%, rgba(17,22,29,.92) 100%);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  padding: var(--tw-sp-5) var(--tw-sp-5);
  color: var(--tw-text);
  box-shadow: var(--tw-shadow-1), var(--tw-inset-hi);
  isolation: isolate;
  /* HUD-style cut corner — top-right */
  clip-path: polygon(
    0 0,
    calc(100% - var(--tw-cut)) 0,
    100% var(--tw-cut),
    100% 100%,
    0 100%
  );
}

.tw-panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,107,26,.10) 0%, transparent 32%);
  pointer-events: none;
  z-index: 0;
}

.tw-panel > * { position: relative; z-index: 1; }

.tw-panel-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--tw-sp-3);
  margin-bottom: var(--tw-sp-4);
  padding-bottom: var(--tw-sp-3);
  border-bottom: 1px solid var(--tw-line);
}

.tw-panel-title > span {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-text);
}

.tw-panel-title > small {
  font-family: var(--tw-font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tw-ember);
}

/* ---------- 4. KICKER / MINI-LABEL / TYPOGRAPHY ---------- */

.tw-kicker, .tw-mini-label {
  display: inline-block;
  font-family: var(--tw-font-ui) !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tw-track-label);
  text-transform: uppercase;
  color: var(--tw-ember) !important;
  margin: 0 0 8px;
  padding: 3px 8px;
  border: 1px solid var(--tw-line-ember);
  border-radius: 4px;
  background: var(--tw-ember-soft);
}

h1, h2, h3 { font-family: var(--tw-font-display); font-weight: 800; letter-spacing: .04em; color: var(--tw-text); }

.tw-overlay h1 { font-size: var(--tw-fs-display); margin: 0 0 8px; }

.tw-overlay h2 { font-size: var(--tw-fs-h1); margin: 0 0 8px; }

.tw-overlay h3 { font-size: var(--tw-fs-h2); margin: 0 0 var(--tw-sp-3); text-transform: uppercase; letter-spacing: .12em; color: var(--tw-text); }

.tw-overlay p  { color: var(--tw-text-mute); margin: 0 0 var(--tw-sp-3); font-size: 13.5px; }

.tw-overlay small { color: var(--tw-text-dim); font-size: 12px; }

/* ---------- 5. UNIVERSAL BUTTON treatment ---------- */

.tw-overlay button,
.tw-overlay select,
.tw-overlay input[type="text"],
.tw-overlay input:not([type="color"]):not([type="range"]) {
  font-family: var(--tw-font-ui);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tw-text);
  background: linear-gradient(180deg, rgba(27,35,46,.95) 0%, rgba(17,22,29,.95) 100%);
  border: 1px solid var(--tw-line-strong);
  border-radius: var(--tw-r-md);
  padding: 10px 14px;
  cursor: pointer;
  transition: all var(--tw-dur-fast) var(--tw-ease);
}

.tw-overlay button:hover {
  border-color: var(--tw-line-ember);
  background: linear-gradient(180deg, rgba(35,44,57,.95) 0%, rgba(22,29,38,.95) 100%);
  color: var(--tw-text);
}

.tw-overlay button:active { transform: translateY(1px); }

.tw-overlay button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.4);
}

.tw-overlay button.active {
  border-color: var(--tw-ember) !important;
  background: linear-gradient(180deg, rgba(255,107,26,.18) 0%, rgba(255,107,26,.08) 100%) !important;
  color: var(--tw-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255,107,26,.3);
}

/* Primary CTA */

.tw-overlay .tw-primary,
.tw-overlay button.tw-primary {
  font-family: var(--tw-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: var(--tw-track-cta) !important;
  text-transform: uppercase;
  color: var(--tw-text-on-acc) !important;
  background: linear-gradient(135deg, var(--tw-ember-hot) 0%, var(--tw-ember) 55%, var(--tw-ember-deep) 100%) !important;
  border: 1px solid rgba(255,107,26,.7) !important;
  padding: 14px 20px !important;
  box-shadow: 0 10px 28px -10px var(--tw-ember-glow), inset 0 1px 0 rgba(255,255,255,.3);
  position: relative; overflow: hidden;
}

.tw-overlay .tw-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }

.tw-overlay .tw-primary:disabled {
  background: linear-gradient(180deg, rgba(60,65,72,.7), rgba(40,45,52,.7)) !important;
  color: var(--tw-text-dim) !important;
  border-color: var(--tw-line) !important;
  box-shadow: none;
}

/* Danger */

.tw-overlay button.danger {
  border-color: rgba(255,77,94,.5) !important;
  color: #ffd0d4 !important;
  background: linear-gradient(180deg, rgba(80,20,28,.6), rgba(50,12,18,.7)) !important;
}

.tw-overlay button.danger:hover {
  border-color: var(--tw-danger) !important;
  background: linear-gradient(180deg, rgba(120,28,40,.85), rgba(80,18,28,.9)) !important;
}

/* Back button */

.tw-overlay .tw-back {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent !important;
  border: 1px solid var(--tw-line) !important;
  padding: 7px 12px !important;
  color: var(--tw-text-mute) !important;
}

.tw-overlay .tw-back:hover {
  color: var(--tw-text) !important;
  border-color: var(--tw-line-ember) !important;
}

/* Inputs */

.tw-overlay input:focus,
.tw-overlay select:focus {
  border-color: var(--tw-ember) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--tw-ember-soft);
}

/* ---------- 6. HANGAR — main menu redesign ---------- */

.tw-hangar {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--tw-sp-5) var(--tw-sp-6) var(--tw-sp-6);
  overflow: auto;
  animation: tw-fade-up var(--tw-dur-slow) var(--tw-ease-out);
}

.tw-hangar-stage {
  width: 100%;
  max-width: 1500px;
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "brief center specs"
    "rail  rail   rail";
  gap: var(--tw-sp-4);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tw-hangar-stage::before, .tw-hangar-stage::after { content: none !important; display: none !important; }

.tw-hangar-brief {
  grid-area: brief;
  background: linear-gradient(180deg, rgba(22,29,38,.92), rgba(17,22,29,.92));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  padding: var(--tw-sp-5);
  box-shadow: var(--tw-shadow-1), var(--tw-inset-hi);
  display: flex; flex-direction: column; gap: var(--tw-sp-3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tw-cut)), calc(100% - var(--tw-cut)) 100%, 0 100%);
}

.tw-hangar-brief h2 {
  font-family: var(--tw-font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tw-hangar-brief p { color: var(--tw-text-mute); font-size: 13px; margin: 0; }

.tw-hangar-quick-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: auto;
}

.tw-hangar-quick-specs > span {
  display: flex; flex-direction: column-reverse; gap: 2px;
  padding: 10px 8px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
  text-align: center;
}

.tw-hangar-quick-specs small {
  font-family: var(--tw-font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-text-dim);
}

.tw-hangar-quick-specs b {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--tw-text);
  font-variant-numeric: tabular-nums;
}

.tw-hangar-center {
  grid-area: center;
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255,107,26,.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(11,15,21,.85) 0%, rgba(7,9,12,.92) 100%);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  overflow: hidden;
  box-shadow: var(--tw-shadow-2), var(--tw-inset-hi);
  min-height: 480px;
}

.tw-hangar-center::before {
  /* HUD corner crosshairs */
  content: "";
  position: absolute; inset: 12px;
  background:
    linear-gradient(var(--tw-ember), var(--tw-ember)) top left / 18px 1px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) top left / 1px 18px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) top right / 18px 1px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) top right / 1px 18px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--tw-ember), var(--tw-ember)) bottom right / 1px 18px no-repeat;
  opacity: .55;
  pointer-events: none;
  z-index: 2;
}

/* Rotation controls — compact pill bar */

.tw-rotate-controls {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(7,9,12,.78);
  border: 1px solid var(--tw-line);
  border-radius: 999px;
  z-index: 3;
  backdrop-filter: blur(8px);
}

.tw-rotate-controls button {
  font-size: 11px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--tw-text-mute) !important;
  letter-spacing: .08em;
}

.tw-rotate-controls button:hover {
  color: var(--tw-text) !important;
  background: rgba(255,107,26,.12) !important;
}

.tw-hangar-specs {
  grid-area: specs;
  display: flex; flex-direction: column; gap: var(--tw-sp-3);
  background: linear-gradient(180deg, rgba(22,29,38,.92), rgba(17,22,29,.92));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  padding: var(--tw-sp-5);
  box-shadow: var(--tw-shadow-1), var(--tw-inset-hi);
  clip-path: polygon(var(--tw-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--tw-cut));
}

.tw-action-title {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: var(--tw-sp-3);
  border-bottom: 1px solid var(--tw-line);
  margin-bottom: var(--tw-sp-2);
}

.tw-action-title span {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tw-action-title small {
  font-family: var(--tw-font-ui);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tw-ice);
}

.tw-spec-list, .tw-spec-list.compact {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}

.tw-spec-list > span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-left: 2px solid var(--tw-ember);
  border-radius: var(--tw-r-md);
}

.tw-spec-list small {
  font-family: var(--tw-font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-text-dim);
}

.tw-spec-list b {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--tw-text);
  font-variant-numeric: tabular-nums;
}

.tw-hangar-small-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: auto;
}

.tw-hangar-small-actions button {
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  padding: 11px 8px !important;
}

/* Tank carousel rail (bottom) */

.tw-tank-rail {
  grid-area: rail;
  background: linear-gradient(180deg, rgba(22,29,38,.92), rgba(17,22,29,.92));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  padding: var(--tw-sp-4) var(--tw-sp-5);
  box-shadow: var(--tw-shadow-1), var(--tw-inset-hi);
}

.tw-rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--tw-sp-3);
  gap: var(--tw-sp-3);
}

.tw-rail-head > span {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tw-rail-head > small {
  font-family: var(--tw-font-ui);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--tw-ember);
}

.tw-tank-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--tw-sp-3);
}

.tw-tank-carousel button {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 12px !important;
  background: linear-gradient(180deg, var(--tw-bg-2), var(--tw-bg-1)) !important;
  border: 1px solid var(--tw-line) !important;
  border-radius: var(--tw-r-md) !important;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  transition: all var(--tw-dur-fast) var(--tw-ease);
}

.tw-tank-carousel button em {
  /* silhouette area */
  display: block;
  height: 44px;
  margin: -4px -4px 4px;
  background:
    linear-gradient(180deg, transparent 65%, rgba(255,107,26,.08)),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.06), transparent 60%);
  border-bottom: 1px solid var(--tw-line);
  position: relative;
}

.tw-tank-carousel button em::before {
  content: "▰▰▰"; /* placeholder silhouette glyph */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 22px; letter-spacing: .15em;
  color: rgba(255,255,255,.18);
  font-family: var(--tw-font-mono);
}

.tw-tank-carousel button strong {
  font-family: var(--tw-font-display);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--tw-text);
  text-transform: uppercase;
}

.tw-tank-carousel button small {
  font-family: var(--tw-font-ui);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--tw-text-mute);
  font-weight: 500;
  text-transform: none;
}

.tw-tank-carousel button > span {
  font-family: var(--tw-font-mono);
  font-size: 11px;
  color: var(--tw-text-dim);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--tw-line);
}

.tw-tank-carousel button:hover { transform: translateY(-2px); border-color: var(--tw-line-strong) !important; }

.tw-tank-carousel button.active {
  border-color: var(--tw-ember) !important;
  background: linear-gradient(180deg, rgba(255,107,26,.16), rgba(255,107,26,.04)) !important;
  box-shadow: 0 0 0 1px var(--tw-ember), 0 12px 28px -16px var(--tw-ember-glow);
}

.tw-tank-carousel button.active::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--tw-ember-hot), var(--tw-ember-deep));
}

/* ---------- 7. BATTLE CTA injected via .tw-battle-launcher ---------- */

.tw-battle-launcher {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
}

.tw-battle-launcher > * { pointer-events: auto; }

.tw-battle-launcher .tw-battle-big {
  position: relative;
  font-family: var(--tw-font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: var(--tw-track-cta);
  text-transform: uppercase;
  color: var(--tw-text-on-acc);
  padding: 22px 56px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--tw-ember-hot) 0%, var(--tw-ember) 50%, var(--tw-ember-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(255,107,26,.55),
    0 24px 60px -18px var(--tw-ember-glow),
    0 0 50px -10px rgba(255,107,26,.7),
    inset 0 1px 0 rgba(255,255,255,.4);
  clip-path: polygon(
    18px 0, calc(100% - 18px) 0,
    100% 50%,
    calc(100% - 18px) 100%, 18px 100%,
    0 50%
  );
  transition: transform var(--tw-dur-base) var(--tw-ease), filter var(--tw-dur-base) var(--tw-ease);
  overflow: hidden;
}

.tw-battle-launcher .tw-battle-big::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 50% 0%, rgba(255,255,255,.4), transparent 60%);
  pointer-events: none;
}

.tw-battle-launcher .tw-battle-big::after {
  content: "";
  position: absolute; inset: -2px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%) skewX(-22deg);
  animation: tw-shine-sweep 2.8s var(--tw-ease) infinite;
  pointer-events: none;
}

.tw-battle-launcher .tw-battle-big:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.tw-battle-launcher .tw-battle-big:active { transform: scale(0.98); }

/* Pulsating glow ring behind CTA */

.tw-battle-launcher .tw-battle-big-glow {
  position: absolute;
  inset: -28px -36px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,107,26,.45), transparent 70%);
  animation: tw-glow-pulse 2.4s var(--tw-ease) infinite;
  pointer-events: none;
  z-index: -1;
}

.tw-battle-launcher .tw-battle-sub {
  font-family: var(--tw-font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tw-text);
  background: rgba(7,9,12,.82);
  border: 1px solid var(--tw-line-ember);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.tw-battle-launcher .tw-battle-modes {
  display: flex; gap: 6px;
  padding: 6px;
  background: rgba(7,9,12,.82);
  border: 1px solid var(--tw-line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.tw-battle-launcher .tw-battle-modes button {
  font-family: var(--tw-font-ui) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: var(--tw-text-mute) !important;
}

.tw-battle-launcher .tw-battle-modes button:hover {
  color: var(--tw-text) !important;
  background: rgba(255,255,255,.04) !important;
}

/* ---------- 8. SINGLE PLAYER screen ---------- */

.tw-battle-screen {
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--tw-sp-4);
  padding: var(--tw-sp-5) var(--tw-sp-6);
  overflow: auto;
  animation: tw-fade-up var(--tw-dur-slow) var(--tw-ease-out);
}

.tw-battle-command {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--tw-sp-5);
}

.tw-battle-command h2 { margin: 4px 0 6px; }

.tw-mode-tabs {
  display: flex; gap: 6px;
  padding: 6px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
}

.tw-mode-tabs button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--tw-r-md) !important;
  min-width: 130px;
}

.tw-mode-tabs button span {
  font-family: var(--tw-font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-ember);
}

.tw-mode-tabs button strong {
  font-family: var(--tw-font-display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tw-text);
}

.tw-mode-tabs button.active {
  background: rgba(255,107,26,.12) !important;
  border-color: var(--tw-ember) !important;
}

.tw-battle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--tw-sp-4);
  flex: 1;
}

.tw-battle-main { display: flex; flex-direction: column; gap: var(--tw-sp-4); }

.tw-battle-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--tw-sp-4); flex-wrap: wrap; }

.tw-settings-stack { display: flex; flex-direction: column; gap: var(--tw-sp-5); }

.tw-settings-stack section h3 { margin: 0 0 var(--tw-sp-3); }

.tw-dual-settings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tw-sp-4); }

.tw-setting-cards, .tw-setting-cards.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.tw-setting-cards button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px !important;
  text-align: left;
}

.tw-setting-cards button strong {
  font-family: var(--tw-font-display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tw-setting-cards button small {
  font-family: var(--tw-font-ui);
  font-size: 11px;
  color: var(--tw-text-dim);
}

.tw-choice-row { display: flex; flex-wrap: wrap; gap: 6px; }

.tw-choice-row button {
  min-width: 56px;
  font-family: var(--tw-font-display) !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
}

.tw-battle-sidebar {
  display: flex; flex-direction: column; gap: var(--tw-sp-3);
  position: sticky; top: calc(var(--tw-head-h) + var(--tw-sp-4));
  align-self: flex-start;
}

.tw-battle-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: var(--tw-sp-2);
}

.tw-battle-summary > span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-left: 2px solid var(--tw-ice);
  border-radius: var(--tw-r-md);
}

.tw-battle-summary small {
  font-family: var(--tw-font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-text-dim);
}

.tw-battle-summary b {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--tw-text);
}

.tw-briefing {
  padding: 14px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line-ice);
  border-radius: var(--tw-r-md);
  display: flex; flex-direction: column; gap: 6px;
}

.tw-briefing strong { font-family: var(--tw-font-display); color: var(--tw-ice); text-transform: uppercase; letter-spacing: .08em; }

.tw-briefing span { color: var(--tw-text-mute); font-size: 13px; }

.tw-briefing small { color: var(--tw-text-dim); font-size: 11px; }

.tw-battle-map-focus { display: flex; gap: 12px; align-items: center; }

.tw-battle-map-focus strong { font-family: var(--tw-font-display); display: block; text-transform: uppercase; letter-spacing: .06em; }

.tw-battle-map-meta { font-family: var(--tw-font-ui); font-size: 11px; color: var(--tw-text-dim); letter-spacing: .08em; text-transform: uppercase; }

.tw-map-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}

/* ---------- 9. GARAGE ---------- */

.tw-garage {
  flex: 1;
  display: flex;
  padding: var(--tw-sp-5) var(--tw-sp-6);
  overflow: auto;
  animation: tw-fade-up var(--tw-dur-slow) var(--tw-ease-out);
}

.tw-garage-workbench {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--tw-sp-4);
}

.tw-garage-preview {
  display: flex; flex-direction: column; gap: var(--tw-sp-3);
  background: linear-gradient(180deg, rgba(22,29,38,.92), rgba(11,15,21,.92));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  padding: var(--tw-sp-5);
  box-shadow: var(--tw-shadow-1), var(--tw-inset-hi);
}

.tw-garage-topline { display: flex; gap: var(--tw-sp-4); align-items: flex-start; }

.tw-garage-stage {
  position: relative;
  flex: 1;
  min-height: 360px;
  background: var(--tw-bg-0);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
  overflow: hidden;
}

.tw-garage-readout {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}

.tw-garage-readout > span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
}

.tw-garage-readout small { font-family: var(--tw-font-ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tw-text-dim); }

.tw-garage-readout b { font-family: var(--tw-font-display); font-weight: 800; font-size: 13px; color: var(--tw-text); display: flex; align-items: center; gap: 6px; }

.tw-garage-readout b i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--tw-line-strong); }

.tw-garage-controls {
  display: flex; flex-direction: column; gap: var(--tw-sp-3);
  background: linear-gradient(180deg, rgba(22,29,38,.92), rgba(17,22,29,.92));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-lg);
  padding: var(--tw-sp-5);
  box-shadow: var(--tw-shadow-1), var(--tw-inset-hi);
}

.tw-garage-note {
  padding: 12px;
  background: var(--tw-ember-soft);
  border: 1px solid var(--tw-line-ember);
  border-radius: var(--tw-r-md);
  display: flex; flex-direction: column; gap: 4px;
}

.tw-garage-note strong { font-family: var(--tw-font-display); color: var(--tw-ember-hot); text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }

.tw-garage-note span { color: var(--tw-text-mute); font-size: 12px; }

.tw-loadout-sections { display: flex; flex-direction: column; gap: var(--tw-sp-4); }

.tw-loadout-section h3 { margin: 0 0 var(--tw-sp-3); }

.tw-callsign-row { display: grid; grid-template-columns: 1fr auto; gap: var(--tw-sp-3); margin-bottom: var(--tw-sp-3); }

.tw-callsign-row label { display: flex; flex-direction: column; gap: 4px; font-family: var(--tw-font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tw-text-dim); }

.tw-callsign-row input { background: var(--tw-bg-1) !important; border: 1px solid var(--tw-line) !important; padding: 8px 10px !important; }

.tw-callsign-row input[type="color"] {
  width: 56px; height: 36px; padding: 2px !important;
  cursor: pointer;
  background: var(--tw-bg-1) !important;
}

.tw-color-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--tw-sp-3); }

.tw-color-strip button {
  width: 32px; height: 32px; padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--tw-line-strong) !important;
  position: relative;
}

.tw-color-strip button > span {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--swatch);
}

.tw-color-strip button.active { border-color: var(--tw-ember) !important; box-shadow: 0 0 0 2px var(--tw-ember-soft); }

.tw-camo-grid, .tw-ammo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}

.tw-camo-grid button, .tw-ammo-grid button {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px !important;
  text-align: left;
}

.tw-camo-grid button > span {
  display: block; height: 28px; border-radius: 4px;
  background: linear-gradient(45deg, var(--camo-a) 0%, var(--camo-a) 50%, var(--camo-b) 50%, var(--camo-b) 100%);
}

.tw-camo-grid button strong, .tw-ammo-grid button strong { font-family: var(--tw-font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

.tw-camo-grid button small, .tw-ammo-grid button small { font-family: var(--tw-font-ui); font-size: 10px; color: var(--tw-text-dim); letter-spacing: .04em; }

.tw-ammo-grid button > span:first-child {
  display: inline-flex; align-self: flex-start;
  padding: 2px 8px;
  background: var(--tw-ember-soft);
  color: var(--tw-ember-hot);
  font-family: var(--tw-font-display);
  font-size: 11px;
  letter-spacing: .12em;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ---------- 10. PROFILE ---------- */

.tw-profile {
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--tw-sp-4);
  padding: var(--tw-sp-5) var(--tw-sp-6);
  overflow: auto;
  animation: tw-fade-up var(--tw-dur-slow) var(--tw-ease-out);
}

.tw-profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--tw-sp-5);
  align-items: center;
}

.tw-rank-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 130px; height: 130px;
  background:
    radial-gradient(circle at 50% 30%, var(--tw-ember) 0%, var(--tw-ember-deep) 70%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  color: var(--tw-text-on-acc);
  box-shadow: 0 12px 36px -12px var(--tw-ember-glow);
}

.tw-rank-badge > span {
  font-family: var(--tw-font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
}

.tw-rank-badge strong { font-family: var(--tw-font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 0 8px; }

.tw-rank-badge small { font-family: var(--tw-font-ui); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }

.tw-profile-rank h2 { margin: 8px 0; }

.tw-xp-track {
  display: block;
  height: 8px;
  background: var(--tw-bg-1);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--tw-sp-3) 0;
  border: 1px solid var(--tw-line);
}

.tw-xp-track > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--tw-ember-deep), var(--tw-ember-hot));
  box-shadow: 0 0 12px var(--tw-ember-glow);
  transition: width var(--tw-dur-slow) var(--tw-ease);
}

.tw-profile-wallet, .tw-profile-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

.tw-profile-stats { grid-template-columns: repeat(6, 1fr); }

.tw-profile-wallet > span, .tw-profile-stats > span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
}

.tw-profile-wallet small, .tw-profile-stats small {
  font-family: var(--tw-font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-text-dim);
}

.tw-profile-wallet b, .tw-profile-stats b {
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--tw-text);
  font-variant-numeric: tabular-nums;
}

.tw-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--tw-sp-4);
}

.tw-tech-tree {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}

.tw-tech-tree button {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px !important;
  text-align: left;
  position: relative;
}

.tw-tech-tree button em {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--tw-font-display);
  font-size: 11px;
  color: var(--tw-text-dim);
  font-style: normal;
}

.tw-tech-tree button i {
  display: block; height: 32px; margin-bottom: 4px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.04));
  border-bottom: 1px solid var(--tw-line);
}

.tw-tech-tree button strong { font-family: var(--tw-font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }

.tw-tech-tree button span { font-size: 11px; color: var(--tw-text-mute); }

.tw-tech-tree button small { font-family: var(--tw-font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tw-text-dim); }

.tw-tech-tree button b { font-family: var(--tw-font-mono); font-size: 11px; color: var(--tw-ice); margin-top: auto; padding-top: 6px; border-top: 1px solid var(--tw-line); }

.tw-tech-tree button.ready { border-color: var(--tw-ice) !important; }

.tw-tech-tree button.selected {
  border-color: var(--tw-ember) !important;
  background: linear-gradient(180deg, rgba(255,107,26,.16), rgba(255,107,26,.04)) !important;
}

.tw-quest-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--tw-sp-3); }

.tw-quest-card {
  padding: 12px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-md);
  display: flex; flex-direction: column; gap: 6px;
}

.tw-quest-card em {
  font-family: var(--tw-font-ui);
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tw-ember);
  font-style: normal;
}

.tw-quest-card > div { display: flex; justify-content: space-between; gap: 8px; }

.tw-quest-card strong { font-family: var(--tw-font-ui); font-weight: 600; color: var(--tw-text); }

.tw-quest-card b { font-family: var(--tw-font-mono); color: var(--tw-text); }

.tw-quest-card > span {
  display: block; height: 6px;
  background: var(--tw-bg-0);
  border-radius: 999px; overflow: hidden;
}

.tw-quest-card > span i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--tw-ember), var(--tw-ember-hot));
  transition: width var(--tw-dur-slow) var(--tw-ease);
}

.tw-quest-card.done { border-color: var(--tw-success); }

.tw-quest-card.done > span i { background: var(--tw-success); }

/* ---------- 11. SETTINGS ---------- */

.tw-layout {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--tw-sp-4);
  padding: var(--tw-sp-5) var(--tw-sp-6);
  align-content: start;
  overflow: auto;
}

.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tw-sp-3); }

.tw-grid label { display: flex; flex-direction: column; gap: 6px; font-family: var(--tw-font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tw-text-dim); }

.tw-asset-link {
  display: inline-block; margin-top: var(--tw-sp-2);
  padding: 9px 14px;
  background: var(--tw-ember-soft);
  border: 1px solid var(--tw-line-ember);
  border-radius: var(--tw-r-md);
  color: var(--tw-ember-hot);
  font-family: var(--tw-font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

.tw-asset-link:hover { background: rgba(255,107,26,.22); }

/* ---------- 12. PAUSE / RESULTS ---------- */

.tw-pause {
  margin: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 36px 48px;
  background: linear-gradient(180deg, rgba(17,22,29,.96), rgba(11,15,21,.96));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-xl);
  box-shadow: var(--tw-shadow-2);
  min-width: 320px;
}

.tw-pause h1 { font-size: clamp(28px, 3vw, 40px); text-align: center; margin: 0 0 12px; letter-spacing: .12em; text-transform: uppercase; }

.tw-results {
  margin: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 36px 48px;
  background: linear-gradient(180deg, rgba(17,22,29,.96), rgba(11,15,21,.96));
  border: 1px solid var(--tw-line);
  border-radius: var(--tw-r-xl);
  box-shadow: var(--tw-shadow-2);
  text-align: center;
  min-width: 480px;
  max-width: 640px;
}

.tw-results h1 { font-size: clamp(28px, 3vw, 42px); margin: 0; letter-spacing: .1em; text-transform: uppercase; }

.tw-stars { font-size: 28px; color: var(--tw-ember-hot); letter-spacing: .12em; }

.tw-result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px;
  margin: 8px 0 14px;
}

.tw-result-grid > span {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  background: var(--tw-bg-1);
  border: 1px solid var(--tw-line);
  border-left: 2px solid var(--tw-ember);
  border-radius: var(--tw-r-md);
  text-align: left;
  font-family: var(--tw-font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tw-text-dim);
}

.tw-result-grid > span b { font-family: var(--tw-font-display); font-size: 18px; color: var(--tw-text); letter-spacing: 0; text-transform: none; }

.tw-levelup { font-family: var(--tw-font-display); color: var(--tw-ember-hot); text-transform: uppercase; letter-spacing: .2em; padding: 8px; border: 1px dashed var(--tw-line-ember); border-radius: 8px; }

/* ---------- 13. LOBBY (basic polish, keep functional layout) ---------- */

.tw-lobby h2 { margin-bottom: var(--tw-sp-3); }

/* ---------- 14. RESPONSIVE collapse ---------- */

@media (max-width: 1180px) {
  .tw-hangar-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "center" "brief" "specs" "rail";
  }
  .tw-battle-grid { grid-template-columns: 1fr; }
  .tw-battle-sidebar { position: static; }
  .tw-garage-workbench { grid-template-columns: 1fr; }
  .tw-profile-grid { grid-template-columns: 1fr; }
  .tw-profile-hero { grid-template-columns: 1fr; }
  .tw-profile-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .tw-head { padding: 0 var(--tw-sp-3); flex-wrap: wrap; height: auto; min-height: var(--tw-head-h); padding-top: 8px; padding-bottom: 8px; }
  .tw-head nav { width: 100%; overflow-x: auto; }
  .tw-profile-stats { grid-template-columns: repeat(2, 1fr); }
  .tw-garage-readout { grid-template-columns: repeat(2, 1fr); }
}