/* WarWing Reborn - TEAM WAR UI.
   Dieselpunk: soot, riveted iron, brass gauges, stencilled paint. */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --iron: rgba(26, 22, 16, 0.86);          /* smoked panel metal */
  --iron-edge: rgba(120, 96, 52, 0.45);    /* worn brass edging */
  --brass: #c9973b;
  --brass-dim: #8a6b2f;
  --cream: #e8ddc4;                        /* stencil paint */
  --danger: #d4442c;
  --allies: #4f8fe8;
  --axis: #e05038;
  --text: #e2d8c0;
  --stencil: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui-scale: 1;
}

html, body { height: 100%; overflow: hidden; background: #0e0c09; color: var(--text); }

/* ============================ NOTHING HERE IS A DOCUMENT =====================
   A cockpit is not prose. Dragging the mouse across the HUD - which happens
   constantly, because the mouse is also how you fly - painted half the panel
   in the browser's selection blue, and it stayed that way until you clicked
   somewhere else. Double-clicking a button did the same to its label. On a
   phone, a held finger raised the selection magnifier and the copy/paste
   callout over the controls.

   The exceptions are the things you are meant to TAKE AWAY with you: the room
   code you send a friend, the password the account panel shows exactly once,
   and anything you type into. Those stay selectable, and .selectable is there
   for whatever joins them. */
html, body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;              /* no long-press callout on iOS */
  -webkit-tap-highlight-color: transparent; /* and no blue flash on tap */
}
#roomcodeVal, #regPass, input, textarea, .selectable {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

#game, #game canvas { position: fixed; inset: 0; z-index: 0; }
#game canvas { display: block; cursor: none; }

.hidden { display: none !important; }

/* stamped metal card used across the HUD */
.plate {
  background:
    linear-gradient(180deg, rgba(255, 232, 180, 0.05), rgba(0, 0, 0, 0.18)),
    var(--iron);
  border: 1px solid var(--iron-edge);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.08), 0 3px 12px rgba(0, 0, 0, 0.5);
}

/* ============================ HUD ============================ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; zoom: var(--ui-scale); }
#hud button { pointer-events: auto; }

#vignette {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(200, 20, 10, 0.55) 100%);
  transition: opacity 90ms linear;
}

#gblur {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(8, 8, 12, 0.95) 95%);
  transition: opacity 200ms linear;
}

#topbar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: center;
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 7px 16px; font-size: 13px;
  backdrop-filter: blur(6px);
}
#lobbyinfo { color: var(--brass); font-weight: 600; letter-spacing: 0.06em; }
#lobbyinfo.clickable { pointer-events: auto; cursor: pointer; }
#ping { color: #9d9078; min-width: 48px; text-align: right; }
#playercount { color: #b0a488; }
#leaveBtn {
  background: transparent; color: var(--danger); border: 1px solid rgba(212, 68, 44, 0.45);
  border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px;
  font-family: var(--stencil); letter-spacing: 0.1em;
}
#leaveBtn:hover { background: rgba(212, 68, 44, 0.15); }

/* ---- war objectives strip -------------------------------------------- */
#objbar {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 5px 14px; font-size: 10px;
}
#objbar .carr { display: flex; align-items: center; gap: 7px; }
#objbar .clabel {
  font-family: var(--stencil); letter-spacing: 0.12em; font-size: 10px;
  color: #9d9078;
}
#objbar .carr.allies .clabel { color: var(--allies); }
#objbar .carr.axis .clabel { color: var(--axis); }
#objbar .ctrack {
  width: 86px; height: 7px; border-radius: 3px; overflow: hidden;
  background: rgba(8, 6, 4, 0.85); border: 1px solid rgba(120, 96, 52, 0.3);
}
#objbar .cfill { height: 100%; width: 100%; transition: width 300ms; }
#objbar .allies .cfill { background: var(--allies); }
#objbar .axis .cfill { background: var(--axis); }
#fieldpips { display: flex; gap: 8px; }
.fieldpip {
  width: 15px; height: 15px; border-radius: 3px; position: relative;
  background: #3a352a; transform: rotate(45deg);
  border: 1.5px solid #6a6052;
}
.fieldpip .fill { position: absolute; inset: 2px; border-radius: 1px; opacity: 0; }
.fieldpip.allies { border-color: var(--allies); }
.fieldpip .fill.allies { background: var(--allies); }
.fieldpip.axis { border-color: var(--axis); }
.fieldpip .fill.axis { background: var(--axis); }
.fieldpip .pip-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; transform: rotate(-45deg);
  pointer-events: none;
}

#radar {
  position: absolute; top: 14px; left: 14px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(180, 150, 60, 0.18), inset 0 0 18px rgba(0, 0, 0, 0.5);
}

#lowerleft { position: absolute; left: 16px; bottom: 14px; text-align: center; }
#damage { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)); }
#speed { font-size: 15px; color: var(--brass); font-weight: 600; letter-spacing: 0.1em; font-family: var(--stencil); }
#scorebox { font-size: 13px; color: #ffd868; margin-top: 2px; }

#gbarBox { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#gbarBox .glabel { font-size: 12px; font-weight: 800; color: #9d9078; }
#gbarTrack {
  flex: 1; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(8, 6, 4, 0.85); border: 1px solid var(--iron-edge);
}
#gbarFill { height: 100%; width: 100%; background: #5ee8c0; transition: width 90ms linear; }

#abilities {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.slot {
  position: relative; width: 58px; height: 58px; overflow: hidden;
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 8px; display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.07);
}
.slot .key {
  position: absolute; top: 3px; left: 5px;
  font-size: 11px; font-weight: 700; color: #b0a488;
  border: 1px solid rgba(200, 180, 130, 0.35); border-radius: 3px;
  padding: 0 4px; line-height: 1.3; min-width: 12px; text-align: center;
}
.slot .ic { line-height: 1; margin-top: 6px; }
.slot .ic .pix { width: 24px; height: 24px; }
/* pixel-art icons: hard edges, no smoothing, sit on the text baseline */
.pix { image-rendering: pixelated; vertical-align: -2px; }
.slot .ammo {
  position: absolute; top: 3px; right: 6px;
  font-size: 11px; font-weight: 700; color: #ffd868;
}
.slot.ready { border-color: rgba(201, 151, 59, 0.7); box-shadow: 0 0 10px rgba(201, 151, 59, 0.2); }
.slot.empty { border-color: rgba(212, 68, 44, 0.55); opacity: 0.65; }
.slot.empty .ammo { color: var(--danger); }

#buffbar {
  position: absolute; bottom: 82px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
}
#bmeterBox { width: 120px; }
#bmeterTrack {
  height: 10px; border-radius: 5px; overflow: hidden;
  background: rgba(8, 6, 4, 0.85); border: 1px solid var(--iron-edge);
}
#bmeterFill {
  height: 100%; width: 0%; transition: width 200ms;
  background: linear-gradient(90deg, #8a5cd8, #d85cc0);
}
#storedbuff {
  border: 1px solid var(--iron-edge); color: #8d8168;
  background: var(--iron); border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  backdrop-filter: blur(6px); white-space: nowrap;
}
#storedbuff .key {
  border: 1px solid rgba(200, 180, 130, 0.4); border-radius: 3px;
  padding: 0 5px; margin-right: 4px;
}
#storedbuff.ready {
  color: var(--c, var(--brass)); border-color: var(--c, var(--brass));
  box-shadow: 0 0 12px rgba(201, 151, 59, 0.3);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { filter: brightness(1.35); } }
#tokenchip { color: #ffd868; font-size: 13px; font-weight: 700; }

#minilb {
  position: absolute; top: 14px; right: 16px;
  display: flex; flex-direction: column; gap: 3px; min-width: 160px;
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 8px 10px; font-size: 12px;
  backdrop-filter: blur(6px);
}
#minilb .mrow { display: flex; gap: 7px; align-items: baseline; }
#minilb .mrow.me { text-shadow: 0 0 8px rgba(201, 151, 59, 0.7); }
#minilb .mrank { color: #ffd24a; font-weight: 800; width: 14px; }
#minilb .mteam {
  font-size: 9px; font-family: var(--stencil); letter-spacing: 0.08em;
  width: 40px; flex: none; overflow: hidden;
}
#minilb .mteam.allies { color: var(--allies); }
#minilb .mteam.axis { color: var(--axis); }
#minilb .mname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#minilb .msc { color: #b0a488; }

#buffs {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.buff {
  border: 1px solid var(--c); color: var(--c);
  background: var(--iron); border-radius: 6px; padding: 4px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
}
.buff .tl { color: var(--text); font-weight: 400; }

#killfeed {
  position: absolute; top: 130px; right: 16px; list-style: none;
  display: flex; flex-direction: column; gap: 5px; text-align: right;
  font-size: 13px; max-width: 340px;
}
#killfeed li {
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 4px 10px; transition: opacity 0.7s;
}
#killfeed li.good { border-color: rgba(94, 232, 192, 0.5); }
#killfeed li.warn { border-color: rgba(255, 210, 100, 0.55); }
#killfeed li.fade { opacity: 0; }

/* prominent kill / assist toast */
#killtoast {
  position: absolute; top: 30%; left: 50%; transform: translate(-50%, 0);
  font-family: var(--stencil); font-size: 24px; letter-spacing: 0.07em;
  color: #ffe08a; opacity: 0; pointer-events: none; white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
#killtoast.assist {
  color: #9ad2ff; font-size: 18px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
#killtoast.show { animation: killpop 1.4s ease-out forwards; }
@keyframes killpop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.82); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  74% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(1); }
}

/* persistent "TAB - scoreboard" hint, just under the mini scoreboard */
#scorehint {
  position: absolute; top: 92px; right: 16px; text-align: right;
  font-family: var(--stencil); font-size: 11px; letter-spacing: 0.1em;
  color: #9d9078; pointer-events: none;
}
#scorehint .sk {
  display: inline-block; color: var(--cream);
  border: 1px solid rgba(200, 180, 130, 0.4); border-radius: 3px;
  padding: 0 5px; margin-right: 5px;
}

/* persistent "T - send comms" hint, just under the scoreboard hint */
#commhint {
  position: absolute; top: 110px; right: 16px; text-align: right;
  font-family: var(--stencil); font-size: 11px; letter-spacing: 0.1em;
  color: #9d9078; pointer-events: none;
}
#commhint .sk {
  display: inline-block; color: var(--cream);
  border: 1px solid rgba(200, 180, 130, 0.4); border-radius: 3px;
  padding: 0 5px; margin-right: 5px;
}

#warning {
  position: absolute; top: 27%; left: 50%; transform: translateX(-50%);
  color: var(--danger); font-size: 22px; font-weight: 800; letter-spacing: 0.12em;
  text-shadow: 0 0 14px rgba(255, 60, 40, 0.7); white-space: nowrap;
  font-family: var(--stencil);
}
#warning.active { animation: blink 0.7s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

#locked {
  position: absolute; top: 21%; left: 50%; transform: translateX(-50%);
  color: #ff3b30; font-size: 19px; font-weight: 900; letter-spacing: 0.1em;
  text-shadow: 0 0 16px rgba(255, 40, 20, 0.9); white-space: nowrap;
  display: none; font-family: var(--stencil);
}
#locked.active { display: block; animation: blink 0.35s steps(2) infinite; }

#bomberalert {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  color: #ffd24a; font-size: 21px; font-weight: 900; letter-spacing: 0.1em;
  text-shadow: 0 0 18px rgba(255, 180, 40, 0.9); white-space: nowrap;
  display: none; font-family: var(--stencil);
}
#bomberalert.active { display: block; animation: blink 0.5s steps(2) infinite; }

#fireind {
  position: absolute; top: 38%; left: 50%; transform: translateX(-50%);
  color: #ff9a3d; font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(255, 120, 20, 0.8); white-space: nowrap;
  display: none;
}
#fireind.active { display: block; animation: blink 0.8s steps(2) infinite; }

#status {
  position: absolute; top: 33%; left: 50%; transform: translateX(-50%);
  color: #d8cba8; font-size: 14px; letter-spacing: 0.14em; opacity: 0.9;
  white-space: nowrap;
}

/* airfield capture progress */
#capbar {
  position: absolute; top: 43%; left: 50%; transform: translateX(-50%);
  width: 300px; text-align: center;
}
#capText {
  font-family: var(--stencil); font-size: 15px; letter-spacing: 0.14em;
  color: var(--cream); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
#capTrack {
  margin-top: 5px; height: 9px; border-radius: 4px; overflow: hidden;
  background: rgba(8, 6, 4, 0.8); border: 1px solid var(--iron-edge);
}
#capFill { height: 100%; width: 0%; background: var(--brass); transition: width 150ms linear; }

#prompt {
  position: absolute; bottom: 132px; left: 50%; transform: translateX(-50%);
  color: var(--brass); font-size: 16px; font-weight: 600; letter-spacing: 0.05em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

#leaderboard {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(20, 17, 12, 0.92); border: 1px solid var(--iron-edge);
  border-radius: 8px; padding: 18px 26px; min-width: 460px;
  backdrop-filter: blur(8px);
}
#leaderboard table { width: 100%; border-collapse: collapse; font-size: 14px; }
#leaderboard th {
  text-align: left; color: var(--brass); text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.14em; padding: 4px 10px;
  border-bottom: 1px solid var(--iron-edge);
}
#leaderboard td { padding: 6px 10px; }
#leaderboard tr.me td { background: rgba(201, 151, 59, 0.1); }
#leaderboard tr.teamhdr td {
  font-family: var(--stencil); letter-spacing: 0.16em; font-size: 13px;
  padding-top: 12px; border-bottom: 1px solid rgba(120, 96, 52, 0.3);
}
#leaderboard tr.teamhdr.allies td { color: var(--allies); }
#leaderboard tr.teamhdr.axis td { color: var(--axis); }
#leaderboard .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline;
}

/* victory / defeat splash */
#victory {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(10, 8, 5, 0.55), rgba(6, 5, 3, 0.9));
  text-align: center; z-index: 30;
}
#victory h1 {
  font-family: var(--stencil); font-size: 74px; letter-spacing: 0.18em;
  color: var(--cream); text-shadow: 0 6px 40px rgba(0, 0, 0, 0.9);
}
#victory.win h1 { color: #ffd868; }
#victory.lose h1 { color: var(--danger); }
#victory p {
  font-size: 17px; letter-spacing: 0.1em; color: #b0a488; margin-top: 14px;
}

/* The deck stack: the airframe picker and the upgrade chooser, one above the
   other, anchored to the bottom of the screen. Both used to be placed by hand
   with their own `bottom:` and they overlapped - see index.html. */
#deckStack {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  z-index: 26; max-width: 94vw;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
#deckStack > * { pointer-events: auto; }

#upgpanel {
  background: rgba(24, 20, 14, 0.94); border: 1px solid rgba(201, 151, 59, 0.5);
  border-radius: 8px; padding: 14px 18px; text-align: center;
  backdrop-filter: blur(8px); pointer-events: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
#upgpanel h3 {
  color: var(--brass); font-size: 13px; letter-spacing: 0.16em; margin-bottom: 10px;
  font-family: var(--stencil);
}
#upgopts { display: flex; gap: 12px; }
/* The choice is made mid-sortie, so it has to read as a SHAPE first. Sprite
   down the left, everything else beside it. */
.upgopt {
  display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px;
  align-items: center; min-width: 190px;
  background: rgba(34, 28, 18, 0.9); color: var(--text);
  border: 1px solid var(--iron-edge); border-radius: 6px;
  padding: 11px 14px; cursor: pointer; text-align: left;
}
.upgopt:hover { border-color: var(--brass); background: rgba(46, 38, 24, 0.95); }
.upgopt .upic {
  grid-row: 1 / span 4; width: 30px; height: 30px;
  image-rendering: pixelated;
}
.upgopt .ut { font-size: 15px; font-weight: 700; color: #ffd868; }
.upgopt .ud { font-size: 12px; color: #b0a488; }

#crosshair {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; pointer-events: none;
  border: 1.5px solid rgba(240, 230, 200, 0.9); border-radius: 50%;
}
#crosshair::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  background: rgba(240, 230, 200, 0.95); border-radius: 50%;
}
/* aiming into the turret's rear blind cone: reticle goes red, bigger and
   pulsing so it is visible at speed - a thin dashed ring was easy to lose */
#crosshair.blocked {
  border-color: rgba(255, 80, 60, 1); border-style: dashed;
  border-width: 2.5px; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  animation: aimblocked 0.4s infinite;
}
#crosshair.blocked::after { background: rgba(255, 80, 60, 1); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
@keyframes aimblocked {
  0%, 100% { border-color: rgba(255, 80, 60, 1); box-shadow: 0 0 8px rgba(255, 80, 60, 0.6); }
  50%      { border-color: rgba(255, 40, 20, 1); box-shadow: 0 0 14px rgba(255, 60, 40, 0.9); }
}

/* THE BARREL IS COOKING. The reticle warns before it quits - a slow pulse
   toward the heat colour - and goes flat grey once the gun is dead, so the
   trigger never stops working without the sight having said why. */
#crosshair.hot { border-color: rgba(255, 150, 60, 0.95); animation: gunhot 0.5s infinite; }
#crosshair.hot::after { background: rgba(255, 150, 60, 0.95); }
#crosshair.cooked {
  border-color: rgba(180, 180, 180, 0.95); border-style: dotted;
  border-width: 2.5px; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  animation: none;
}
#crosshair.cooked::after { background: rgba(180, 180, 180, 0.95); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
@keyframes gunhot {
  0%, 100% { border-color: rgba(255, 150, 60, 0.95); }
  50%      { border-color: rgba(255, 70, 40, 1); }
}

/* missile lock reticle - sits on the enemy your next missile would lock */
#locktarget {
  position: fixed; top: 0; left: 0; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; pointer-events: none; z-index: -1;
  border: 1.5px solid #5aff8c; border-radius: 0;
  animation: lockblink 1.1s ease-in-out infinite;
}
#locktarget::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 2px; margin: -1px 0 0 -1px; background: #5aff8c;
}
#locktarget::after {
  content: 'MSL'; position: absolute; left: 50%; bottom: 100%;
  margin-bottom: 3px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--stencil); font-size: 8px; letter-spacing: 0.08em;
  color: #5aff8c; text-shadow: 0 0 4px rgba(90, 255, 140, 0.6);
}
/* glowing pulse from green to red at 0.7 opacity */
@keyframes lockblink {
  0%, 100% { opacity: 0.7; border-color: #5aff8c; box-shadow: 0 0 8px rgba(90, 255, 140, 0.6); }
  50% { opacity: 0.7; border-color: #ff4a4a; box-shadow: 0 0 8px rgba(255, 74, 74, 0.6); }
}
#hitmarker {
  position: fixed; top: 0; left: 0; margin: -34px 0 0 6px;
  color: #ffd868; font-size: 17px; font-weight: 900; opacity: 0;
  pointer-events: none; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

/* in-game room code, bottom-right: small but readable, click to copy/invite */
#roomcode {
  position: fixed; right: 12px; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  background: rgba(10, 16, 20, 0.55); border: 1px solid rgba(201, 151, 59, 0.4);
  font-family: var(--stencil); pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#roomcode:hover { background: rgba(20, 28, 34, 0.8); border-color: rgba(201, 151, 59, 0.8); }
#roomcode .rc-label { font-size: 10px; letter-spacing: 0.14em; color: #9d9078; }
#roomcode .rc-code {
  font-size: 16px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--brass); font-family: monospace;
}
#roomcode .rc-hint { font-size: 10px; color: rgba(220, 230, 240, 0.5); letter-spacing: 0.04em; }
@media (max-width: 760px) { #roomcode .rc-hint { display: none; } }

/* ============================ BOOT LOADER ============================ */
#bootLoader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 42%, rgba(10, 8, 5, 0.25) 20%, rgba(8, 6, 4, 0.65) 100%);
  transition: opacity 600ms ease;
}
#bootLoader.hidden { opacity: 0; pointer-events: none; }
#bootLoader::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: repeating-linear-gradient(-45deg, #c9973b 0 16px, #17130d 16px 32px);
  opacity: 0.5;
}
.boot-logo { text-align: center; }
.boot-logo img { width: 320px; max-width: 70vw; opacity: 0.9; filter: drop-shadow(0 4px 24px rgba(201, 151, 59, 0.2)); }
.boot-spinner {
  margin: 28px auto 0; width: 42px; height: 42px;
  border: 3px solid rgba(201, 151, 59, 0.2);
  border-top-color: #c9973b;
  border-radius: 50%;
  animation: bootSpin 0.9s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
.boot-text {
  margin-top: 18px; color: #857a60; font-size: 13px;
  letter-spacing: 0.18em; font-family: var(--stencil, monospace);
  text-transform: uppercase;
  background: rgba(10, 8, 5, 0.75); border: 1px solid rgba(120, 96, 52, 0.3);
  border-radius: 5px; padding: 6px 16px;
}

/* ============================ MENU / HANGAR ============================ */
#menu { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow-y: auto; }
/* the live 3D backdrop: your plane cruising the map behind the panel */
#menubg3d { position: fixed; inset: 0; z-index: 10; }
#menubg3d canvas { display: block; width: 100%; height: 100%; }
.menu-bg {
  position: fixed; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 42%, rgba(10, 8, 5, 0.10) 20%, rgba(8, 6, 4, 0.55) 100%);
  transition: opacity 700ms ease, background 700ms ease;
}
.menu-bg::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: repeating-linear-gradient(-45deg, #c9973b 0 16px, #17130d 16px 32px);
  opacity: 0.5;
  transition: opacity 700ms ease;
}
/* death → hangar: fade the painted backdrop to a thin vignette so the
   battle you just died in shows through behind the panel */
#menu.hangar .menu-bg {
  background: radial-gradient(ellipse at 50% 40%, transparent 15%, rgba(8, 6, 4, 0.62) 100%);
}
#menu.hangar .menu-bg::after { opacity: 0; }
#menu.hangar { scrollbar-width: none; -ms-overflow-style: none; }
#menu.hangar::-webkit-scrollbar { display: none; }

.menu-panel {
  position: relative; width: min(700px, 94vw); margin: 24px 0;
  zoom: var(--ui-scale);
  background:
    linear-gradient(180deg, rgba(255, 232, 180, 0.04), rgba(0, 0, 0, 0.18)),
    rgba(28, 23, 16, 0.8);
  border: 1px solid var(--iron-edge);
  border-radius: 10px; padding: 34px 42px 26px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 240, 200, 0.07);
  /* smooth entrance: fades/slides in once .show is added a frame after
     the menu becomes visible (see main.js showMenu()) */
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 520ms cubic-bezier(.22, .68, .32, 1),
    transform 520ms cubic-bezier(.22, .68, .32, 1),
    background 600ms ease, backdrop-filter 600ms ease;
}
#menu.show .menu-panel { opacity: 1; transform: translateY(0) scale(1); }
/* the hangar panel itself dims down too, letting the live battle read
   through around and beyond its edges */
#menu.hangar .menu-panel {
  background: rgba(20, 16, 10, 0.6);
  backdrop-filter: blur(5px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 200, 0.05);
}
/* hide BOOTCAMP tab in hangar (death) mode - can't open tutorial mid-war */
#menu.hangar #tutorialBtn { display: none; }
/* MAIN MENU tab only shows in hangar (death) mode - leaves the current war */
#hangarMenuBtn { display: none; }
#menu.hangar #hangarMenuBtn { display: inline-block; }
/* rivet rows stamped along the panel edges */
.riveted::before, .riveted::after {
  content: ''; position: absolute; left: 14px; right: 14px; height: 8px;
  background-image: radial-gradient(circle 2.6px at 4px 4px,
    #6b5b39 0 2px, rgba(0, 0, 0, 0.55) 2px 2.7px, transparent 2.8px);
  background-size: 26px 8px; background-repeat: repeat-x;
  pointer-events: none; opacity: 0.9;
}
.riveted::before { top: 7px; }
.riveted::after { bottom: 7px; }

.logo {
  display: block;
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 0 auto 12px;
}

/* ---- war tally --------------------------------------------------------- */
#warscore {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: rgba(12, 10, 7, 0.75); border: 1px solid var(--iron-edge);
  border-radius: 8px; padding: 10px 18px; margin-bottom: 22px;
}
.ws-side { display: flex; align-items: center; gap: 10px; }
.ws-name { font-family: var(--stencil); font-size: 19px; letter-spacing: 0.14em; }
.ws-side.allies .ws-name { color: var(--allies); }
.ws-side.axis .ws-name { color: var(--axis); }
.ws-count {
  font-family: var(--stencil); font-size: 30px; color: var(--cream);
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 1px 12px; min-width: 46px; text-align: center;
}
.ws-vs {
  font-family: var(--stencil); font-size: 11px; letter-spacing: 0.2em;
  color: #8a6b2f; text-align: center; line-height: 1.25;
}

/* team insignia, painted in CSS: Allied roundel & Axis cross */
.ws-mark { width: 24px; height: 24px; display: inline-block; flex: none; }
.ws-mark.roundel {
  border-radius: 50%;
  background: radial-gradient(circle,
    #d8442e 0 24%, #ece4d2 24% 47%, #3d6fd8 47% 78%, #ece4d2 78% 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.ws-mark.cross {
  background:
    linear-gradient(0deg, transparent 0 34%, #1c1c1c 34% 66%, transparent 66%),
    linear-gradient(90deg, transparent 0 34%, #1c1c1c 34% 66%, transparent 66%),
    #ece4d2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* ---- redeploy (dead-in-lobby) bar --------------------------------------- */
#redeployBar {
  border: 1px solid rgba(212, 68, 44, 0.5); border-radius: 8px;
  background: rgba(60, 20, 12, 0.35);
  padding: 14px 18px; margin-bottom: 20px; text-align: center;
}
#redeployText {
  font-family: var(--stencil); font-size: 17px; letter-spacing: 0.1em;
  color: var(--cream);
}
.rd-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
#redeployBtn {
  background: linear-gradient(180deg, #d9a844, #a5741f); color: #201607;
  border: 1px solid #6b5320; border-radius: 6px; cursor: pointer;
  font-family: var(--stencil); font-size: 17px; letter-spacing: 0.12em;
  padding: 9px 26px;
}
#redeployBtn:hover:not(:disabled) { filter: brightness(1.15); }
#redeployBtn:disabled { opacity: 0.45; cursor: default; }
#hangarLeaveBtn {
  background: transparent; color: var(--danger);
  border: 1px solid rgba(212, 68, 44, 0.5); border-radius: 6px; cursor: pointer;
  font-family: var(--stencil); font-size: 14px; letter-spacing: 0.1em;
  padding: 9px 18px;
}
#hangarLeaveBtn:hover { background: rgba(212, 68, 44, 0.14); }
#redeployBar .hint { margin-top: 10px; }

/* ---- sortie recap: what the life that just ended earned -------------------- */
#sortieCard {
  border-top: 1px solid rgba(201, 151, 59, 0.25); margin-top: 12px; padding-top: 10px;
}
#sortieCard.hidden { display: none; }
.sortie-head { display: flex; align-items: center; gap: 13px; text-align: left; }
.sortie-headtext { flex: 1; min-width: 0; }
#sortieMedal {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: rgba(14, 12, 9, 0.85);
  background: radial-gradient(circle at 35% 30%,
    var(--medal-hi, #b8bec8), var(--medal-lo, #6f7680) 70%);
  border: 2px solid rgba(14, 12, 9, 0.55);
  box-shadow: 0 0 0 2px var(--medal-lo, #6f7680), 0 2px 8px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
#sortieMedal.hidden { display: none; }
#sortieGain {
  font-family: var(--stencil); font-size: 22px; letter-spacing: 0.12em;
  color: #ffd868; text-shadow: 0 0 14px rgba(255, 216, 104, 0.35);
  margin-bottom: 4px; animation: rankPop 0.45s ease-out;
}
#sortieLines { color: #cbbf9f; font-size: 12.5px; line-height: 1.6; }
#sortieLines div:first-child { color: var(--brass); }
#sortieProgress { margin-top: 9px; }
#sortieProgress.hidden { display: none; }
#sortieFill {
  height: 100%; width: 0%; border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#sortieRank { color: #9d9078; font-size: 11px; margin-top: 5px; letter-spacing: 0.08em; }
#sortieRankup, #dbRankup {
  display: inline-block; color: #ffd868; font-family: var(--stencil);
  font-size: 12px; letter-spacing: 0.18em; margin-bottom: 5px;
  animation: rankPop 0.5s ease-out;
}
#sortieRankup.hidden, #dbRankup.hidden { display: none; }
@keyframes rankPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- post-war debrief ------------------------------------------------------ */
#debrief {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 5, 3, 0.78); backdrop-filter: blur(3px);
}
#debrief.hidden { display: none; }
.db-box {
  width: 430px; max-width: 92vw; max-height: 90vh; overflow-y: auto;
  background: rgba(20, 16, 10, 0.98); border: 1px solid var(--brass-dim);
  border-radius: 10px; padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
#dbTitle {
  color: var(--brass); font-family: var(--stencil); font-size: 17px;
  letter-spacing: 0.2em; margin: 0 0 16px; text-align: center;
}
.db-rank { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#dbMedal {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; color: rgba(14, 12, 9, 0.85);
  background: radial-gradient(circle at 35% 30%,
    var(--medal-hi, #b8bec8), var(--medal-lo, #6f7680) 70%);
  border: 2px solid rgba(14, 12, 9, 0.55);
  box-shadow: 0 0 0 2px var(--medal-lo, #6f7680), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.db-rankinfo { flex: 1; min-width: 0; }
#dbTier {
  font-family: var(--stencil); font-size: 18px; letter-spacing: 0.14em;
  color: var(--cream); margin-bottom: 6px;
}
#dbTier .merit { font-size: 11.5px; color: #9d9078; letter-spacing: 0.05em; }
#dbFill {
  height: 100%; width: 0%; border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
#dbNext { color: #857a60; font-size: 11px; margin-top: 5px; }
#dbLines { list-style: none; margin: 0 0 12px; padding: 0; }
#dbLines li {
  color: #cbbf9f; font-size: 13px; padding: 5px 0;
  border-bottom: 1px solid rgba(120, 96, 52, 0.16);
}
#dbLines li.daily { color: #ffd868; }
#dbLines li.total {
  color: #ffd868; font-family: var(--stencil); font-size: 16px;
  letter-spacing: 0.12em; padding-top: 9px;
  border-top: 1px solid rgba(201, 151, 59, 0.4); border-bottom: none;
}
#dbLines li.lifetime {
  color: #9d9078; font-size: 11.5px; letter-spacing: 0.1em;
  padding-top: 2px; border-bottom: none; text-transform: uppercase;
}
#dbHook { color: var(--brass); font-size: 12.5px; line-height: 1.6; margin-bottom: 16px; }
.db-buttons { text-align: center; }
.db-buttons button { min-width: 150px; }

.menu-row { margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.menu-row label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: #9d9078; min-width: 74px; font-weight: 700;
}

input[type="text"], input:not([type]), #pilotName, #lobbyName, #joinCode {
  background: rgba(10, 8, 5, 0.85); color: var(--text);
  border: 1px solid var(--iron-edge); border-radius: 5px;
  padding: 9px 12px; font-size: 15px; outline: none; min-width: 0;
}
input:focus { border-color: var(--brass); }

/* THE SLIDER ONLY OFFERS YOUR SIDE'S ARC. It used to run the whole colour
   wheel, so a red Allied aeroplane and a green Axis one were both pickable and
   paint told you nothing about who you were looking at. These two gradients
   are the arcs in server/config.py TEAM_HUE; main.js puts `.axis` on the
   element when the Axis is selected. */
#customColor {
  width: 200px; height: 24px; padding: 0; border: 1px solid var(--iron-edge);
  border-radius: 5px; background: linear-gradient(90deg,
    hsl(60,65%,55%), hsl(105,65%,55%), hsl(150,65%,55%), hsl(195,65%,55%),
    hsl(240,65%,55%));
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
#customColor.axis {
  background: linear-gradient(90deg,
    hsl(285,65%,55%), hsl(310,65%,55%), hsl(335,65%,55%), hsl(0,65%,55%),
    hsl(30,65%,55%));
}
#customColor::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 24px;
  background: #fff; border: 2px solid #000; border-radius: 3px; cursor: pointer;
}
#customColor::-moz-range-thumb {
  width: 12px; height: 24px; background: #fff; border: 2px solid #000;
  border-radius: 3px; cursor: pointer;
}
.colorhex { font-family: monospace; font-size: 14px; letter-spacing: 0.08em; }

/* ---- side selection ------------------------------------------------------ */
#sidePick { display: flex; gap: 10px; flex: 1; }
.side-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: rgba(10, 8, 5, 0.75); color: #9d9078;
  border: 1px solid var(--iron-edge); border-radius: 6px; cursor: pointer;
  font-family: var(--stencil); font-size: 16px; letter-spacing: 0.12em;
  padding: 10px 8px;
}
.side-btn .ws-mark { width: 19px; height: 19px; opacity: 0.55; }
.side-btn:hover { border-color: #8a6b2f; color: var(--cream); }
.side-btn.sel { color: var(--cream); background: rgba(40, 33, 20, 0.9); }
.side-btn.sel .ws-mark { opacity: 1; }
.side-btn.allies.sel { border-color: var(--allies); box-shadow: 0 0 12px rgba(79, 143, 232, 0.3); }
.side-btn.axis.sel { border-color: var(--axis); box-shadow: 0 0 12px rgba(224, 80, 56, 0.3); }
.side-btn.auto.sel { border-color: var(--brass); box-shadow: 0 0 12px rgba(201, 151, 59, 0.3); }

#playNowBtn {
  width: 100%; margin: 6px 0 20px;
  background: linear-gradient(180deg, #d9a844, #a5741f);
  color: #201607; border: 1px solid #6b5320; border-radius: 8px; cursor: pointer;
  font-family: var(--stencil); font-size: 24px; letter-spacing: 0.2em; padding: 13px;
  box-shadow: 0 8px 30px rgba(201, 151, 59, 0.22), inset 0 1px 0 rgba(255, 240, 200, 0.35);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}
#playNowBtn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
/* a join in flight kills every button that could start another one */
#playNowBtn:disabled, #createLobbyBtn:disabled, #joinBtn:disabled {
  opacity: 0.45; cursor: default; filter: saturate(0.4);
}
/* RANKED: no door out of the war off the death screen. This is not the five
   second respawn lockout waiting to expire, so it must not look like it -
   struck through, and it stays that way for the whole match. */
#playNowBtn.ranked-locked {
  opacity: 0.3; text-decoration: line-through; cursor: not-allowed;
}

.menu-columns { display: flex; gap: 26px; margin-top: 4px; }
.menu-col { flex: 1; min-width: 0; }
.menu-col h3 {
  font-family: var(--stencil); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--brass); margin-bottom: 10px;
}

.joinrow { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
#joinCode { width: 92px; text-transform: uppercase; font-family: monospace; letter-spacing: 0.25em; text-align: center; }
#joinBtn, #createLobbyBtn {
  border: none; border-radius: 6px; cursor: pointer; font-weight: 700;
  letter-spacing: 0.08em; padding: 9px 16px; font-size: 14px;
}
#joinBtn {
  background: rgba(79, 143, 232, 0.16); color: var(--allies);
  border: 1px solid rgba(79, 143, 232, 0.45);
}
#joinBtn:hover:not(:disabled) { background: rgba(79, 143, 232, 0.3); }
#lobbyName { width: 100%; margin-bottom: 10px; }
#createLobbyBtn {
  width: 100%; background: linear-gradient(180deg, #b0512f, #7e3018);
  color: #f5e6d0; font-family: var(--stencil); font-size: 17px;
  letter-spacing: 0.16em; padding: 12px; border: 1px solid #5c2812;
}
#createLobbyBtn:hover:not(:disabled) { filter: brightness(1.14); }
.menu-col .hint, #redeployBar .hint { color: #857a60; font-size: 11px; margin-top: 8px; line-height: 1.45; }

/* ---- menu tabs ------------------------------------------------------------ */
/* single row, always: tabs shrink (padding/letter-spacing give first) instead
   of wrapping onto a second line when another tab is added */
#menuTabs {
  display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 18px;
  border-bottom: 1px solid var(--iron-edge); padding-bottom: 0;
  overflow-x: auto; scrollbar-width: none;
}
#menuTabs::-webkit-scrollbar { display: none; }
.mtab {
  background: transparent; color: #9d9078; border: 1px solid transparent;
  border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer;
  font-family: var(--stencil); font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.08em; padding: 8px 10px 7px;
  flex: 0 1 auto; min-width: 0; white-space: nowrap;
}
.mtab:hover { color: var(--cream); }
.mtab.sel {
  color: var(--brass); background: rgba(40, 33, 20, 0.9);
  border-color: var(--iron-edge);
}
/* every tab is open to everyone; only the wingmen roster needs a session */
.tab-note { color: #9d9078; font-size: 12.5px; margin: 4px 0 12px; }
.tab-note.hidden { display: none; }

/* ---- account box ----------------------------------------------------------- */
#accountBox,
#cgAccountBox {
  border: 1px solid var(--iron-edge); border-radius: 8px;
  background: rgba(12, 10, 7, 0.6); padding: 10px 14px; margin-bottom: 16px;
  font-size: 12.5px;
}
#cgLoggedIn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#cgLoggedIn.hidden { display: none; }
#cgWho { flex: 1; color: var(--cream); min-width: 200px; }
#cgWho b { color: var(--brass); }
.acc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-hint { flex: 1; color: #9d9078; min-width: 200px; }
.acc-btn {
  background: rgba(201, 151, 59, 0.14); color: var(--brass);
  border: 1px solid rgba(201, 151, 59, 0.45); border-radius: 5px;
  padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 700;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif; letter-spacing: 0.1em;
}
.acc-btn:hover:not(:disabled) { background: rgba(201, 151, 59, 0.28); }
.acc-btn.gold {
  background: linear-gradient(180deg, #d9a844, #a5741f); color: #201607;
  border-color: #6b5320;
}
.acc-btn.gold:hover:not(:disabled) { filter: brightness(1.12); }
.accform { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.accform input[type="checkbox"] { margin-right: 6px; }
.optin { color: #b0a488; font-size: 12px; line-height: 1.5; cursor: pointer; }
#regResult {
  border: 1px solid rgba(94, 232, 192, 0.4); border-radius: 6px;
  background: rgba(20, 50, 40, 0.3); padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#regResult code {
  color: #5ee8c0; font-size: 16px; letter-spacing: 0.14em;
  background: rgba(0, 0, 0, 0.5); border-radius: 4px; padding: 2px 8px;
}
#accError { color: var(--danger); font-size: 12px; min-height: 0; margin-top: 6px; }
#accLoggedIn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#accLoggedIn.hidden { display: none; }
#accWho { color: var(--cream); }
#accWho b { color: var(--brass); }
#accWho .vic { color: #ffd868; }

/* ---- skins & decals -------------------------------------------------------- */
.sk-h {
  font-family: var(--stencil); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--brass); margin: 14px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.sk-sub {
  font-family: "Segoe UI", system-ui, sans-serif; text-transform: none;
  letter-spacing: 0.02em; color: #857a60; font-size: 11.5px; font-weight: 400;
}
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skinopt {
  position: relative; text-align: left; cursor: pointer;
  background: rgba(34, 28, 18, 0.75); color: var(--text);
  border: 1px solid var(--iron-edge); border-radius: 6px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: flex-start;
}
.skinopt:hover:not(.locked) { border-color: var(--brass); }
.skinopt.sel { border-color: var(--brass); box-shadow: 0 0 10px rgba(201, 151, 59, 0.3); }
.skinopt.locked { opacity: 0.45; cursor: default; }
.skinopt .sk-thumb {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 4px;
  border: 1px solid var(--iron-edge); overflow: hidden;
  background: rgba(10, 8, 5, 0.6); image-rendering: pixelated;
}
.skinopt .sk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.skinopt .sk-info { flex: 1; min-width: 0; }
.skinopt .sk-name { display: block; font-weight: 700; font-size: 13px; color: #ffd868; }
.skinopt.locked .sk-name { color: #b0a488; }
.skinopt .sk-desc { display: block; font-size: 11px; color: #b0a488; margin-top: 3px; line-height: 1.35; }
.skinopt .sk-req { display: block; font-size: 10.5px; margin-top: 5px; color: #857a60; letter-spacing: 0.05em; }
.skinopt .sk-req.allies { color: var(--allies); }
.skinopt .sk-req.axis { color: var(--axis); }

/* ---- lore ------------------------------------------------------------------ */
.lore-empty { color: #b0a488; font-size: 13.5px; line-height: 1.6; padding: 4px 6px 10px; }
.lore-stamp {
  display: inline-block; font-family: var(--stencil); font-size: 26px;
  letter-spacing: 0.3em; color: var(--danger);
  border: 3px solid var(--danger); border-radius: 4px; padding: 2px 14px;
  transform: rotate(-4deg); opacity: 0.75; margin-bottom: 14px;
}

/* ---- settings ---------------------------------------------------------------- */
input[type="range"] {
  flex: 1; accent-color: var(--brass); cursor: pointer; min-width: 120px;
}
.volval { color: var(--brass); font-size: 13px; min-width: 42px; text-align: right; }
#bindsGrid, #padGrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-size: 13px;
}
.bindrow { display: flex; align-items: center; gap: 8px; }
.bindrow .bl { flex: 1; color: #b0a488; }
.bindkey {
  min-width: 74px; text-align: center; cursor: pointer;
  background: rgba(10, 8, 5, 0.85); color: var(--cream);
  border: 1px solid var(--iron-edge); border-radius: 5px;
  padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
}
.bindkey:hover { border-color: var(--brass); }
.bindkey.listening {
  border-color: var(--brass); color: var(--brass);
  animation: pulse 0.9s ease-in-out infinite;
}
.padrow { display: flex; gap: 8px; color: #b0a488; }
.padrow .pk {
  min-width: 96px; color: var(--cream); font-weight: 700; font-size: 12px;
}
#bindsReset { margin-left: auto; }

/* keyboard layout picker (QWERTY / AZERTY / auto) */
#layoutPick { display: flex; gap: 6px; }
.layout-btn {
  background: rgba(10, 8, 5, 0.85); color: #b0a488;
  border: 1px solid var(--iron-edge); border-radius: 5px;
  padding: 4px 12px; cursor: pointer; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; font-family: var(--stencil);
}
.layout-btn:hover { border-color: #8a6b2f; color: var(--cream); }
.layout-btn.sel { color: var(--cream); background: rgba(40, 33, 20, 0.9); border-color: var(--brass); }
.layout-note { font-size: 11px; color: #857a60; margin-left: 8px; }

/* ---- language picker (settings tab) ---------------------------------------- */
#langPick { position: relative; display: inline-block; }
.lang-dd-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(40, 33, 20, 0.9); color: var(--cream);
  border: 1px solid var(--brass); border-radius: 5px;
  padding: 4px 10px; cursor: pointer; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; min-width: 160px; justify-content: space-between;
}
.lang-dd-trigger:hover { border-color: #8a6b2f; }
.lang-dd-arrow { margin-left: 6px; opacity: 0.7; font-size: 10px; }
.lang-dd-panel {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(10, 8, 5, 0.97); border: 1px solid var(--brass); border-radius: 5px;
  padding: 4px; z-index: 50; min-width: 100%; max-height: 280px; overflow-y: auto;
}
.lang-dd-panel.hidden { display: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(10, 8, 5, 0.85); color: #b0a488;
  border: 1px solid var(--iron-edge); border-radius: 5px;
  padding: 4px 10px; cursor: pointer; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; width: 100%; box-sizing: border-box;
}
.lang-btn:hover { border-color: #8a6b2f; color: var(--cream); }
.lang-btn.sel { color: var(--cream); background: rgba(40, 33, 20, 0.9); border-color: var(--brass); }
.lang-btn .flag {
  display: block; border-radius: 2px;
  outline: 1px solid rgba(0, 0, 0, 0.45);           /* white flags stay visible */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---- ad rails (menu only) -------------------------------------------------- */
.adrail {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 22;
  width: 170px;
}
.adrail.left { left: 10px; }
.adrail.right { right: 10px; }
.ad-slot {
  margin: 0 auto;
}
.ad-tag {
  position: absolute; top: 6px; left: 8px; font-size: 9px; letter-spacing: 0.2em;
  color: #857a60; border: 1px solid rgba(120, 96, 52, 0.4);
  border-radius: 3px; padding: 0 4px;
}
.ad-body { color: #6a604c; font-size: 13px; text-align: center; letter-spacing: 0.06em; }
@media (max-width: 1180px) { .adrail { display: none; } }
/* on CrazyGames the platform serves its own ads: hide our house rails */
body.on-crazygames .adrail { display: none !important; }


/* ---- in-game pop-up (volume + quit) --------------------------------------- */
#gamePopup {
  position: fixed; inset: 0; z-index: 45;
  display: grid; place-items: center;
  background: rgba(4, 6, 8, 0.35);
  backdrop-filter: blur(2px);
}
.popup-panel {
  width: min(340px, 90vw);
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 10px; padding: 20px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  zoom: var(--ui-scale);
}
.popup-section {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.popup-section label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: #9d9078; min-width: 56px; font-weight: 700;
}
.popup-section input[type="range"] {
  flex: 1; accent-color: var(--brass); cursor: pointer; min-width: 80px;
}
.popup-buttons {
  display: flex; gap: 10px; justify-content: center; margin-top: 16px;
}
.popup-buttons button {
  background: rgba(10, 8, 5, 0.85); color: var(--cream);
  border: 1px solid var(--iron-edge); border-radius: 6px;
  padding: 9px 20px; cursor: pointer; font-family: var(--stencil);
  font-size: 14px; letter-spacing: 0.1em; font-weight: 700;
  transition: all 0.15s ease;
}
.popup-buttons button:hover { border-color: var(--brass); color: var(--brass); }
.popup-buttons button.danger {
  color: var(--danger); border-color: rgba(212, 68, 44, 0.45);
}
.popup-buttons button.danger:hover {
  background: rgba(212, 68, 44, 0.15); border-color: var(--danger);
}
#popupConfirm { margin-top: 14px; text-align: center; }
#popupConfirm p {
  font-size: 14px; color: var(--cream); margin-bottom: 10px;
  font-family: var(--stencil); letter-spacing: 0.06em;
}

/* ---- tutorial overlay ----------------------------------------------------- */
#tutorial { position: fixed; inset: 0; z-index: 40; overflow: hidden; cursor: none; }
#tutView { position: absolute; inset: 0; }
#tutView canvas { display: block; width: 100%; height: 100%; }
#tutObjective { display: none; }
#capBox {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 12px; align-items: flex-start;
  max-width: min(560px, 82vw); z-index: 15;
  zoom: var(--ui-scale);
}
#capPortrait {
  width: 112px; height: auto; aspect-ratio: 384 / 519; image-rendering: pixelated;
  background: rgba(8, 14, 18, 0.85); border: 2px solid var(--brass);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); flex: none;
}
.cap-speech {
  position: relative; background: rgba(8, 14, 18, 0.9);
  border: 1px solid rgba(201, 151, 59, 0.5); border-radius: 8px;
  padding: 10px 16px; min-height: 60px; min-width: 240px;
}
#capName {
  color: var(--brass); font-family: var(--stencil); font-weight: 800;
  font-size: 12px; letter-spacing: 0.14em; margin-bottom: 4px;
}
#tutCapText { color: #eef3f6; font-size: 15px; line-height: 1.4; min-height: 42px; }
#tutSkip {
  position: absolute; right: 22px; bottom: 22px; z-index: 16;
  zoom: var(--ui-scale);
  background: rgba(10, 8, 5, 0.85); color: var(--cream);
  border: 2px solid rgba(201, 151, 59, 0.6); border-radius: 8px;
  padding: 14px 32px; cursor: pointer; font-family: var(--stencil);
  font-weight: 800; letter-spacing: 0.12em; font-size: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.15s ease;
}
#tutSkip:hover {
  border-color: var(--brass); color: var(--brass);
  background: rgba(20, 16, 10, 0.9); transform: scale(1.05);
}
#tutCross {
  display: none;
}
/* During dialogue the game is frozen: fade HUD so it never overlaps capBox */
#hud.dialogue-mode {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* After dialogue, move capBox to a compact top-center toast so it
   never overlaps the radar (top-left) or damage/speed panel (bottom-left) */
#tutorial.dialogue-done #capBox {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(480px, 92vw);
  gap: 8px;
}
#tutorial.dialogue-done #capPortrait { display: none; }
#tutorial.dialogue-done .cap-speech {
  min-width: 0; min-height: 0; padding: 6px 14px;
}
#tutorial.dialogue-done #tutCapText { font-size: 13px; min-height: 0; }
/* Hide capBox entirely when there's no text to show */
#tutorial.dialogue-done #capBox:has(#tutCapText:empty) {
  opacity: 0; pointer-events: none;
}

@media (max-width: 620px) {
  #capBox { left: 8px; top: 50%; transform: translateY(-50%); gap: 6px; }
  #capPortrait { width: 80px; height: auto; }
  .cap-speech { min-width: 0; padding: 8px 12px; }
  #tutCapText { font-size: 13px; }
}
@media (max-height: 420px) {
  #capBox { top: 8px; transform: none; gap: 6px; }
  #capPortrait { width: 72px; height: auto; }
  .cap-speech { min-width: 0; padding: 6px 12px; min-height: 0; }
  #tutCapText { font-size: 12px; min-height: 0; }
}

/* ---- tutorial click hint -------------------------------------------------- */
#tutClickHint {
  margin-top: 6px; font-size: 12px; color: rgba(201, 151, 59, 0.7);
  font-family: var(--stencil); letter-spacing: 0.08em; text-align: right;
  animation: tutPulse 1.4s ease-in-out infinite;
}
#tutClickHint.hidden { display: none; }
@keyframes tutPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* darken the 3D scene when captain is talking */
#tutDimmer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(4, 8, 12, 0.55);
  transition: opacity 0.25s ease;
}
#tutDimmer.hidden { opacity: 0; }

/* glowing action hint shown after captain finishes talking */
#tutAction {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  z-index: 12; pointer-events: none;
  zoom: var(--ui-scale);
  color: #ffd868; font-size: 22px; font-weight: 800; letter-spacing: 0.08em;
  font-family: var(--stencil); white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 180, 40, 0.9), 0 0 28px rgba(255, 120, 20, 0.5);
  animation: tutActionPulse 1.2s ease-in-out infinite;
  display: none;
}
#tutAction.show { display: block; }
@keyframes tutActionPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

/* ---- GDPR consent bar -------------------------------------------------------- */
#cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: rgba(16, 13, 9, 0.97); border-top: 2px solid var(--brass-dim);
  padding: 14px 22px; font-size: 12.5px; color: #b0a488; line-height: 1.5;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}
#cookiebar .cb-text { flex: 1; min-width: 260px; }
#cookiebar .cb-text b { color: var(--cream); }
#cookiebar .cb-text a { color: var(--brass); text-decoration: none; }
#cookiebar .cb-text a:hover { color: var(--cream); text-decoration: underline; }
#cookiebar .cb-buttons { display: flex; gap: 10px; }
#cookiebar button {
  border-radius: 6px; cursor: pointer; font-family: var(--stencil);
  letter-spacing: 0.1em; font-size: 13px; padding: 9px 16px;
}
#cbEssential {
  background: transparent; color: #b0a488; border: 1px solid var(--iron-edge);
}
#cbEssential:hover { color: var(--cream); }
#cbAll {
  background: linear-gradient(180deg, #d9a844, #a5741f); color: #201607;
  border: 1px solid #6b5320;
}
#cbAll:hover { filter: brightness(1.12); }
#cbManage {
  background: transparent; color: #b0a488; border: 1px solid var(--iron-edge);
  font-size: 12px; padding: 9px 12px;
}
#cbManage:hover { color: var(--cream); }

/* ---- consent preferences panel ------------------------------------------- */
#consentPanel {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 5, 3, 0.8); backdrop-filter: blur(3px);
}
#consentPanel.hidden { display: none; }
.cp-box {
  width: 440px; max-width: 92vw; max-height: 90vh; overflow-y: auto;
  background: rgba(20, 16, 10, 0.98); border: 1px solid var(--brass-dim);
  border-radius: 10px; padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.cp-box h3 {
  color: var(--cream); font-family: var(--stencil); font-size: 18px;
  letter-spacing: 0.1em; margin: 0 0 8px;
}
.cp-desc { color: #b0a488; font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.cp-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-top: 1px solid rgba(120, 96, 52, 0.2);
}
.cp-label { flex: 1; color: #b0a488; font-size: 13px; line-height: 1.5; }
.cp-label b { color: var(--cream); }
.cp-label small { color: #8a7e68; }
.cp-row input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: #d9a844; margin-top: 2px; cursor: pointer;
}
.cp-buttons { margin-top: 18px; text-align: right; }
#cpSave {
  background: linear-gradient(180deg, #d9a844, #a5741f); color: #201607;
  border: 1px solid #6b5320; border-radius: 6px; cursor: pointer;
  font-family: var(--stencil); letter-spacing: 0.1em; font-size: 13px; padding: 9px 16px;
}
#cpSave:hover { filter: brightness(1.12); }
.cp-footer { margin: 14px 0 0; font-size: 12px; }
.cp-footer a { color: var(--brass); text-decoration: none; }
.cp-footer a:hover { color: var(--cream); text-decoration: underline; }

/* ---- in-game privacy policy modal ----------------------------------------- */
#privacyPolicyPanel {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 5, 3, 0.8); backdrop-filter: blur(3px);
}
#privacyPolicyPanel.hidden { display: none; }
.pp-box {
  width: 520px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
  background: rgba(20, 16, 10, 0.98); border: 1px solid var(--brass-dim);
  border-radius: 10px; padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.pp-box h3 {
  color: var(--cream); font-family: var(--stencil); font-size: 18px;
  letter-spacing: 0.1em; margin: 0 0 8px;
}
.pp-desc { color: #b0a488; font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.pp-desc a { color: var(--brass); text-decoration: none; }
.pp-desc a:hover { color: var(--cream); text-decoration: underline; }
.pp-section { padding: 12px 0; border-top: 1px solid rgba(120, 96, 52, 0.2); }
.pp-section h4 {
  color: var(--cream); font-family: var(--stencil); font-size: 14px;
  letter-spacing: 0.08em; margin: 0 0 6px;
}
.pp-section p { color: #b0a488; font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
.pp-section ul { margin: 0 0 8px 1.2em; padding: 0; }
.pp-section li { color: #b0a488; font-size: 13px; line-height: 1.6; margin-bottom: 4px; }
.pp-section b { color: var(--cream); }
.pp-section code { color: #d9a844; font-size: 12px; }
.pp-section a { color: var(--brass); text-decoration: none; }
.pp-section a:hover { color: var(--cream); text-decoration: underline; }
.pp-buttons { margin-top: 18px; text-align: right; }
#ppClose {
  background: linear-gradient(180deg, #d9a844, #a5741f); color: #201607;
  border: 1px solid #6b5320; border-radius: 6px; cursor: pointer;
  font-family: var(--stencil); letter-spacing: 0.1em; font-size: 13px; padding: 9px 16px;
}
#ppClose:hover { filter: brightness(1.12); }

/* ---- rotate-to-landscape gate (touch-primary devices, portrait only) --------
   pure CSS: no JS decides when to nag, the media query does */
#rotatenote { display: none; }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #rotatenote {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(10, 8, 5, 0.96);
  }
}
#rotatenote .dn-panel {
  max-width: 420px; text-align: center;
  background: var(--iron); border: 2px solid var(--brass-dim); border-radius: 10px;
  padding: 28px 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
#rotatenote .dn-logo { width: 180px; max-width: 70%; margin-bottom: 8px; }
#rotatenote h2 {
  font-family: var(--stencil); letter-spacing: 0.12em; color: var(--brass);
  font-size: 24px; margin: 6px 0 14px;
}
#rotatenote p { color: var(--text); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }

#menuError { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 10px; }
#menuError.result { color: #ffd868; font-family: var(--stencil); font-size: 16px; letter-spacing: 0.1em; }

.menu-footer {
  margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(120, 96, 52, 0.25);
  color: #7d7258; font-size: 11.5px; letter-spacing: 0.03em; line-height: 1.5;
}

/* ---- quick-comms popup menu (press T) ---- */
#commsMenu {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  background: rgba(24, 20, 14, 0.95); border: 1px solid rgba(201, 151, 59, 0.5);
  border-radius: 8px; padding: 12px 14px; pointer-events: auto;
  backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 12; min-width: 220px;
}
#commsMenu .cm-title {
  font-family: var(--stencil); font-size: 13px; letter-spacing: 0.16em;
  color: var(--brass); margin-bottom: 4px; text-align: center;
}
#commsMenu .cm-hint {
  font-size: 11px; color: #9d9078; text-align: center; margin-bottom: 8px;
  letter-spacing: 0.03em;
}
#commsMenu.cooling .cm-hint { color: var(--danger); }
#commsMenu .cm-list { display: flex; flex-direction: column; gap: 2px; }
#commsMenu .cm-item {
  display: flex; gap: 8px; align-items: baseline; padding: 4px 8px;
  border-radius: 4px; cursor: pointer; transition: background 0.1s;
}
#commsMenu .cm-item.sel {
  background: rgba(201, 151, 59, 0.22); box-shadow: inset 0 0 0 1px rgba(201, 151, 59, 0.35);
}
#commsMenu .cm-item:hover { background: rgba(201, 151, 59, 0.15); }
#commsMenu .cm-num {
  font-family: var(--stencil); font-size: 14px; color: var(--brass);
  width: 16px; text-align: center; flex-shrink: 0;
}
#commsMenu .cm-label { font-size: 13px; color: var(--text); }

/* ---- quick-comms chat panel (right side, below killfeed) ---- */
#chatpanel {
  position: absolute; top: 330px; right: 16px;
  display: flex; flex-direction: column; gap: 4px;
  max-width: 320px; pointer-events: none; z-index: 10;
}
#chatpanel .cp-msg {
  background: var(--iron); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 5px 10px; font-size: 12.5px;
  text-align: right; transition: opacity 0.7s;
  animation: cp-in 0.3s ease-out;
}
#chatpanel .cp-msg .cp-name { font-weight: 700; }
#chatpanel .cp-msg .cp-text { color: var(--text); }
#chatpanel .cp-msg.fade { opacity: 0; }
@keyframes cp-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- squadron staging -------------------------------------------------------- */
#squadRow.hidden { display: none; }
#squadForm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
#squadForm.hidden { display: none; }
#squadNewBtn { flex: 1; font-size: 15px; padding: 8px 14px; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 700; }
#squadForm input { flex: 1; min-width: 80px; text-transform: uppercase; letter-spacing: 0.18em; }
#squadJoinBtn { flex: 0 0 auto; }
.sq-or { color: #857a60; font-size: 12px; }

/* while staging, the panel folds away and the formation owns the screen */
#menu.squadron .menu-panel, #menu.squadron .menu-bg { display: none; }

#squadBar {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 40; min-width: 340px; max-width: 92vw;
  border: 1px solid var(--iron-edge); border-radius: 10px;
  background: rgba(12, 10, 7, 0.78); padding: 14px 18px;
  text-align: center; color: var(--cream);
}
#squadBar.hidden { display: none; }
.sq-head {
  font-family: var(--stencil); letter-spacing: 0.2em; color: var(--brass);
  font-size: 14px; margin-bottom: 8px;
}
#squadCodeVal {
  color: #ffd868; cursor: pointer; margin-left: 8px;
  letter-spacing: 0.3em; font-size: 16px;
}
#squadCodeVal:hover { text-decoration: underline; }
#squadMembers {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 12px;
}
.sq-member {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--iron-edge); border-radius: 20px;
  padding: 4px 12px; font-size: 12.5px; background: rgba(0, 0, 0, 0.35);
}
.sq-member .dot { width: 10px; height: 10px; border-radius: 50%; }
.sq-member.me { border-color: rgba(201, 151, 59, 0.6); }
.sq-member.empty { color: #6d6350; border-style: dashed; }
.sq-actions { display: flex; justify-content: center; gap: 10px; }
#squadHint { color: #9d9078; font-size: 12px; margin: 10px 0 0; min-height: 14px; }

/* ---- SOCIAL tab: rank card, service record, wingmen ------------------------ */
#rankCard {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--iron-edge); border-radius: 8px;
  background: rgba(12, 10, 7, 0.6); padding: 14px 16px; margin-bottom: 16px;
}
#rankMedal {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: rgba(14, 12, 9, 0.85);
  background: radial-gradient(circle at 35% 30%,
    var(--medal-hi, #b8bec8), var(--medal-lo, #6f7680) 70%);
  border: 2px solid rgba(14, 12, 9, 0.55);
  box-shadow: 0 0 0 2px var(--medal-lo, #6f7680), 0 2px 8px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.rank-info { flex: 1; min-width: 0; }
#rankTier {
  font-family: var(--stencil); font-size: 20px; letter-spacing: 0.16em;
  color: var(--cream);
}
#rankTier .merit { font-size: 12px; color: #9d9078; letter-spacing: 0.05em; }
#rankGlobal { color: var(--brass); font-size: 12.5px; margin: 2px 0 7px; }
.rank-track {
  height: 9px; border-radius: 5px; overflow: hidden;
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--iron-edge);
}
#rankFill {
  height: 100%; width: 0%; border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
  transition: width 0.5s ease;
}
#rankNext { color: #857a60; font-size: 11px; margin-top: 5px; }

#statsGrid {
  /* six chips as a centered 2x3 block (auto-fit made ragged 4+2 rows) */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 0 auto 16px; max-width: 440px;
}
.stat-chip {
  border: 1px solid var(--iron-edge); border-radius: 6px; text-align: center;
  background: rgba(12, 10, 7, 0.55); padding: 8px 4px;
}
.stat-chip .sv { font-family: var(--stencil); font-size: 19px; color: var(--cream); }
.stat-chip .sl { font-size: 10px; color: #9d9078; letter-spacing: 0.1em; text-transform: uppercase; }

.friendpaste { display: flex; gap: 8px; }
.friendpaste input { flex: 1; min-width: 0; }
#friendLinkNote { min-height: 14px; }
#friendList { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.friend-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--iron-edge); border-radius: 6px;
  background: rgba(12, 10, 7, 0.5); padding: 7px 10px; font-size: 13px;
}
.friend-row .f-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #5a5244; box-shadow: none;
}
.friend-row.on .f-dot { background: #3fae6a; box-shadow: 0 0 6px #3fae6a; }
.friend-row .f-medal {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%,
    var(--medal-hi, #b8bec8), var(--medal-lo, #6f7680) 70%);
  border: 1px solid rgba(14, 12, 9, 0.55);
}
.friend-row .f-name { color: var(--cream); font-weight: 600; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row .f-tier { color: #9d9078; font-size: 10.5px; letter-spacing: 0.12em; flex: 1; }
.friend-row .f-status { color: #857a60; font-size: 11px; }
.friend-row.on .f-status { color: #3fae6a; }
.friend-row .f-remove {
  background: transparent; border: none; color: #6d6350; cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 4px;
}
.friend-row .f-remove:hover { color: var(--danger); background: rgba(212, 68, 44, 0.12); }
.friend-empty { color: #857a60; font-size: 12px; padding: 8px 2px; }

/* ---- wingman request modal -------------------------------------------------- */
#friendModal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.72);
}
.fm-box {
  position: relative; max-width: 420px; width: calc(100% - 48px);
  border: 1px solid var(--iron-edge); border-radius: 10px;
  background: var(--iron); padding: 22px 26px; text-align: center;
}
.fm-box h3 {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.14em; color: var(--brass);
  margin: 0 0 10px; font-size: 17px; font-weight: 700;
}
.fm-box p { color: var(--text); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.fm-box b { color: var(--cream); }
.fm-buttons { display: flex; justify-content: center; gap: 10px; }

/* in-staging wingman invite: a small brass + on each signed-in member chip */
.sq-wing {
  margin-left: 7px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(201, 151, 59, 0.55); background: rgba(201, 151, 59, 0.14);
  color: var(--brass); font-size: 13px; line-height: 1; cursor: pointer;
  padding: 0; vertical-align: middle;
}
.sq-wing:hover { background: rgba(201, 151, 59, 0.32); }

/* scoreboard merit medal: tiny chip before the pilot name; hover = tier + rank */
.lb-medal {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin: 0 5px 0 1px; vertical-align: -1px;
  border: 1px solid rgba(14, 12, 9, 0.6);
}


/* ---- touch controls (phones/tablets, see js/touch.js) -----------------------
   #touchui lives OUTSIDE the zoomed #hud so control sizes stay finger-sized
   on any screen. touch.js reparents HUD pieces in here during play:
   #abilities slots ring the right (turret) stick, #storedbuff joins #tcomms
   and #tland in a mirrored 3-button arc around the left stick, and #gbarBox
   pairs with the buff meter center-bottom. Everything is semi-transparent:
   the sky stays visible. */
body.touch { overscroll-behavior: none; }
body.touch #game canvas, body.touch #hud { touch-action: none; }
/* keyboard hints mean nothing to a thumb */
body.touch #scorehint, body.touch #commhint,
body.touch .slot .key, body.touch #storedbuff .key { display: none; }

/* the radar eats less of a phone screen */
body.touch #radar { transform: scale(0.75); transform-origin: top left; }
/* damage diagram + speed: a compact status readout on the top row, in the
   gap between the radar and the war name (the right side belongs to the
   objectives strip's AXIS label and the leaderboard) */
body.touch #lowerleft {
  left: auto; right: calc(50% + 250px); top: 12px; bottom: auto;
  transform: scale(0.5); transform-origin: top right;
}
/* clear the fullscreen button pinned to the real top-right corner; tappable:
   the mini board opens the full scoreboard (desktop Tab), tapping the full
   board closes it again */
body.touch #minilb { right: 84px; }
body.touch #minilb, body.touch #leaderboard { pointer-events: auto; }
/* short phone screens: clip the killfeed before it reaches the ability ring */
body.touch #killfeed { max-height: 165px; overflow: hidden; }

/* G bar + buff meter: same size, stacked center-bottom (G bar on top) */
body.touch #buffbar { bottom: 30px; flex-direction: column; gap: 5px; }
body.touch #gbarBox { order: -1; width: 200px; margin-top: 0; }
body.touch #bmeterBox { width: 200px; }
body.touch #gbarTrack { height: 10px; border-radius: 5px; }
body.touch #tokenchip { order: 2; font-size: 11px; }
/* the stored buff's name, small beside the meter (its button is icon-only) */
#bufflabel { display: none; }
body.touch #bufflabel {
  display: block; order: 1;
  font-family: var(--stencil); letter-spacing: 0.1em;
  font-size: 10px; color: #8d8168;
}

#touchui {
  position: fixed; inset: 0; z-index: 30;
  pointer-events: none; touch-action: none;
  font-family: var(--stencil);
}
#touchui .tj-zone { position: absolute; pointer-events: none; }
#touchui .tj-left { left: 24px; bottom: 24px; left: max(24px, env(safe-area-inset-left)); }
#touchui .tj-right { right: 24px; bottom: 24px; right: max(24px, env(safe-area-inset-right)); }

#touchui .tj-base {
  position: relative; width: 104px; height: 104px; border-radius: 50%;
  pointer-events: auto; touch-action: none;
  background: rgba(18, 15, 10, 0.30);
  border: 2px solid rgba(201, 151, 59, 0.35);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}
#touchui .tj-base.grab { border-color: rgba(201, 151, 59, 0.7); }

/* THE LEFT STICK IS SQUARE, like the drones'. Its two axes are independent -
   X is turn rate, Y is throttle - so the corners have to be reachable, and a
   round gate is exactly what stops you holding full turn AND full power. The
   throttle also STAYS where you leave it, so the gate is marked: a notch at
   cruise and a line up the middle to set it against. */
#touchui .tj-left .tj-base {
  border-radius: 12px;
  background:
    /* the cruise notch */
    linear-gradient(to right, transparent 44%,
      rgba(201, 151, 59, 0.30) 44%, rgba(201, 151, 59, 0.30) 56%,
      transparent 56%) 0 50% / 100% 2px no-repeat,
    /* the centreline */
    linear-gradient(to bottom, transparent 0, rgba(201, 151, 59, 0.14) 0) 50% 0
      / 2px 100% no-repeat,
    rgba(18, 15, 10, 0.30);
}
/* …and its knob squares off to match, so the instrument reads as a lever in a
   gate rather than as a ball in a cup */
#touchui .tj-left .tj-knob { border-radius: 10px; }
#touchui .tj-knob {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(201, 151, 59, 0.30);
  border: 2px solid rgba(233, 196, 106, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* round tap targets: identical geometry both sides. The right stick wears
   the 5 ability slots; the left wears comms, land/take-off and the stored
   buff at the mirrored radius. */
#touchui .tbtn, #touchui .slot {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  color: var(--cream);
  background: rgba(24, 20, 14, 0.35); border: 2px solid rgba(201, 151, 59, 0.5);
  backdrop-filter: blur(2px);
}
#touchui .tbtn.ready {
  border-color: rgba(233, 196, 106, 0.85);
  box-shadow: 0 0 16px rgba(201, 151, 59, 0.4);
}
#touchui .tbtn.empty { border-color: rgba(212, 68, 44, 0.55); opacity: 0.65; }

/* right arc: 5 ability slots (R=96 around the stick center) */
#touchui .slot { overflow: visible; }
#touchui .slot .ic { margin-top: 0; }
#touchui .slot .ic .pix { width: 20px; height: 20px; }
#touchui .slot .ammo { top: -3px; right: 0; font-size: 9px; }
/* The torpedo shares the missile's place on the ring. No airframe carries
   both - the Heavy Bomber has torpedoes and no missiles, the other two have
   missiles and no torpedoes - and the slot an aeroplane lacks is hidden
   outright. Without this the torpedo had NO ring position at all and fell back
   to the corner of #touchui, which is why it appeared at the top left. */
#touchui .slot[data-k="missile"],
#touchui .slot[data-k="torpedo"] { right: 146px; bottom: 23px; }
#touchui .slot[data-k="bomb"]    { right: 151px; bottom: 73px; }
#touchui .slot[data-k="flare"]   { right: 130px; bottom: 118px; }
#touchui .slot[data-k="roll"]    { right: 89px;  bottom: 146px; }
#touchui .slot[data-k="loop"]    { right: 39px;  bottom: 151px; }

/* left arc: same radius, mirrored */
#touchui #tcomms { left: 146px; bottom: 23px; }
#touchui #tland  { left: 139px; bottom: 104px; }
#touchui #storedbuff {
  position: absolute; left: 73px; bottom: 151px;
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  pointer-events: auto; touch-action: none;
  background-color: rgba(24, 20, 14, 0.35);
  background-image: url('../assets/icons/star.png');
  background-size: 20px 20px; background-position: center;
  background-repeat: no-repeat; image-rendering: pixelated;
  border: 2px solid rgba(201, 151, 59, 0.4);
  font-size: 0;               /* the buff name lives in #bufflabel instead */
  backdrop-filter: blur(2px);
}
#touchui #storedbuff.ready {
  border-color: var(--c, var(--brass));
  box-shadow: 0 0 16px rgba(201, 151, 59, 0.4);
  animation: pulse 1.2s ease-in-out infinite;
}
/* the reparented container must not trap its absolutely-positioned slots:
   static + no transform makes #touchui the positioning context */
#touchui #abilities { position: static; transform: none; }

/* tap feedback */
@keyframes tpress { from { transform: scale(0.86); filter: brightness(1.5); } }
#touchui .tpress { animation: tpress 180ms ease-out; }

/* quick comms on touch: the right column belongs to the ability ring, so the
   menu takes center stage instead (scaled up: it lives in the zoomed #hud) */
body.touch #commsMenu {
  right: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1.4);
}
/* comm/chat messages join the free left column under the radar, where the
   ability ring can't bury them */
body.touch #chatpanel {
  right: auto; left: 16px; top: 210px; max-width: 260px;
}

/* fullscreen toggle (created by touchBoot in main.js), real top-right corner */
#fsbtn {
  position: fixed; top: 10px; right: 10px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  background: rgba(18, 15, 10, 0.4); border: 2px solid rgba(201, 151, 59, 0.5);
  backdrop-filter: blur(2px);
}
/* on CrazyGames the platform frame has its own fullscreen control: hide ours */
body.on-crazygames #fsbtn { display: none !important; }
/* ready/empty states re-stated at #touchui specificity (the shared round
   base rule above would otherwise flatten the desktop .slot state colors) */
#touchui .slot.ready {
  border-color: rgba(201, 151, 59, 0.85);
  box-shadow: 0 0 12px rgba(201, 151, 59, 0.3);
}
#touchui .slot.empty { border-color: rgba(212, 68, 44, 0.55); opacity: 0.65; }

/* ---- airframe picker (hangar) --------------------------------------------
   Three cards, built from the server's class table. Each one has to say what
   the aeroplane IS at a glance - its gun, its arc, what it carries - because
   picking blind and finding out in the air is the worst version of this. */
#classPick { margin: 10px 0 4px; }
#classPick .cp-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .6; margin-bottom: 6px;
}

/* ---- what you fly, and what you fly into, at the SCRAMBLE button ---------
   Both used to be elsewhere: the airframe only on the death screen, the mode
   buried inside DECLARE WAR. They belong on the way out of the door, and they
   sit as INLINE .menu-row lines exactly like Pilot / Paint / Side, rather
   than as a stacked block of their own. */
#modePick { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; margin: 0; }
.class-cards.inline { flex: 1; }
/* an inline card is a chip: planform beside the name, on one line */
.class-cards.inline .class-card {
  flex: 1; flex-direction: row; align-items: center; justify-content: center;
  gap: 9px; padding: 7px 10px; min-width: 0; text-align: left;
}
.class-cards.inline .cc-pic { height: 34px; margin: 0; }
.class-cards.inline .planform { max-height: 34px; }
.class-cards.inline .cc-stats { display: none; }

/* the cards themselves, shared by the menu and the death screen */
.class-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.class-card {
  flex: 1 1 140px; min-width: 140px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 11px; border-radius: 7px;
  background: rgba(22, 18, 12, .72);
  border: 1px solid var(--iron-edge);
  color: inherit; font: inherit; transition: border-color .12s, background .12s;
}
.class-card:hover { border-color: rgba(201, 151, 59, .6); background: rgba(38, 30, 18, .8); }
.class-card.on {
  border-color: var(--brass); background: rgba(58, 42, 18, .9);
  box-shadow: 0 0 0 1px rgba(201, 151, 59, .35) inset;
}
.class-card .cc-name { font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.class-card .cc-stats { font-size: 10px; opacity: .55; letter-spacing: .02em; }
/* the aeroplane's own planform, generated from the airframe table that builds
   the 3D model - so it cannot drift out of step with what you actually fly */
.class-card .cc-pic {
  display: block; height: 62px; display: grid; place-items: center;
  color: #b9a880; margin-bottom: 2px;
}
.class-card.on .cc-pic { color: var(--brass); }
.class-card .planform { max-height: 62px; width: auto; }
/* ---- ranked: three of each airframe, and then no more ----------------------
   The tally sits under the card. A type you have run out of stays ON the
   board, struck through and unclickable, because running the bomber dry is
   something that happened in your match and a card that simply vanished
   would read as the game having lost it. */
.class-card .cc-stock {
  font-size: 10px; letter-spacing: .06em; font-weight: 700;
  color: var(--brass); opacity: .85;
}
.class-card .cc-stock.out { color: #d4442c; opacity: 1; }
.class-card.spent {
  opacity: .42; cursor: not-allowed; filter: saturate(.25);
}
.class-card.spent:hover {
  border-color: var(--iron-edge); background: rgba(22, 18, 12, .72);
}
.class-card.spent .cc-name { text-decoration: line-through; }
#redeployBtn.grounded {
  opacity: .5; cursor: not-allowed; letter-spacing: .08em; font-size: 15px;
}
/* an airframe without a given slot simply has no slot, not a dead icon */
#abilities .slot.hidden { display: none; }

/* ---- counter-attack meters ------------------------------------------------
   A thin bar under each carrier's health. It fills from everything that side
   destroys, and when it tops out that navy launches a massive attack - so it
   has to be readable at a glance, and unmistakable when it is nearly full. */
.carr .cbars { display: flex; flex-direction: column; gap: 2px; }
.mtrack {
  height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .10);
}
.mfill {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, #a8661a, #ffcc55);
  transition: width .25s ease-out;
}
.carr.axis .mfill { background: linear-gradient(90deg, #8f2f22, #ff7a52); }
.mfill.brim { animation: mvbrim .7s ease-in-out infinite; }
@keyframes mvbrim {
  0%, 100% { filter: brightness(1); box-shadow: none; }
  50% { filter: brightness(1.7); box-shadow: 0 0 6px currentColor; }
}

/* ---- upgrade cards: price and depth, not just a name ---------------------- */
.upgopt .upips { display: flex; gap: 3px; margin-top: 5px; }
.upgopt .uplv {
  width: 12px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .18);
  transition: background .15s ease, box-shadow .15s ease;
}
.upgopt .uplv.on { background: var(--brass); }
/* On hover, the pips you'll GAIN glow — showing the level the card buys,
   not just the one you have. Only the NEXT pip (not already lit) glows.
   It is a GLOW, not an appearance: `will` marks the pip the card would buy,
   and that pip is still an ordinary empty slot when nothing is hovered.
   Forcing it to opacity 0 punched a hole in the middle of the row - its
   unlit neighbours sat there in grey and this one was simply missing, so
   leaving the card read as the pip vanishing rather than going back to
   grey. Only the glow belongs behind the hover. */
.upgopt:hover:not(.poor) .uplv.will:not(.on) {
  background: var(--brass);
  box-shadow: 0 0 5px var(--brass);
  animation: uplvglow .6s ease-in-out infinite alternate;
}
@keyframes uplvglow {
  from { box-shadow: 0 0 3px var(--brass); }
  to   { box-shadow: 0 0 7px var(--brass); }
}
.upgopt .ucost {
  margin-top: 4px; font-size: 11px; opacity: .8;
  display: flex; align-items: center; gap: 4px;
}
.upgopt .ucost.free { color: #9dbd52; font-weight: 700; }
.upgopt.poor { opacity: .45; cursor: not-allowed; }
.upgopt.poor .ucost { color: #e08a72; opacity: 1; }
/* Heavy work waiting on a runway. The card is still on offer - the pair no
   longer changes when the wheels touch - so it is dimmed rather than dropped,
   and reads brass instead of red: this is a thing to go and do, not a thing
   you cannot have. */
.upgopt.grounded { opacity: .62; cursor: not-allowed; }
.upgopt.grounded .ucost.deck {
  color: var(--brass); font-weight: 700; opacity: 1; letter-spacing: .04em;
}

/* ---- Destroy Fast: clock and wreckage score -------------------------------
   It sits in the objectives strip's slot, not on top of #topbar. At top:8px
   it landed exactly on the lobby/ping bar at top:10px and the two rendered
   through each other. The war shows #objbar here; Destroy Fast shows this. */
#matchbar {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; z-index: 6;
  padding: 5px 14px; border-radius: 8px;
  background: var(--iron);
  border: 1px solid var(--iron-edge);
  font-variant-numeric: tabular-nums;
}
#matchClock { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
#matchClock.urgent { color: #ff6a4a; animation: mclock 1s steps(2) infinite; }
@keyframes mclock { 50% { opacity: .45; } }
#matchbar .mb-side { font-size: 16px; font-weight: 700; min-width: 26px; text-align: center; }
#matchbar .mb-side.allies { color: var(--allies); }
#matchbar .mb-side.axis { color: var(--axis); }

/* ---- mode picker (new war) ------------------------------------------------ */
#modePick { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.mode-card {
  flex: 1 1 auto; padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: inherit;
  background: rgba(22, 18, 12, .72);
  border: 1px solid var(--iron-edge);
  transition: border-color .12s, background .12s;
}
.mode-card:hover { border-color: rgba(201, 151, 59, .6); }
.mode-card.on {
  border-color: var(--brass); background: rgba(58, 42, 18, .9);
  box-shadow: 0 0 0 1px rgba(201, 151, 59, .35) inset;
}

/* ---- the hangar: 3D bay on the left, tech tree on the right ---------------
   The bay behind the canvas is lit tungsten, so the panel around it is soot
   and brass like the rest of the game. It was teal-on-navy, which is why the
   whole tab read as a different product from the war it sits inside. */
/* The bay ON TOP, full width, and the tree under it. Side by side, the 3D
   view was a letterbox next to a wall of text - and the aeroplane is the
   whole reason the tab exists. */
#hangarWrap { display: flex; flex-direction: column; gap: 12px; }
#hangarView {
  width: 100%; height: 42vh; min-height: 260px; max-height: 460px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 42%, #2a2018 0%, #100c08 74%);
  border: 1px solid var(--iron-edge); overflow: hidden; cursor: grab;
}
/* The bay takes the whole gesture, both axes: sideways walks round the
   aeroplane, up and down changes your height on it. Without this a vertical
   drag on a phone scrolls the tab instead of tilting, which is the one thing
   the tilt exists for - getting a work lamp out of the middle of the frame.
   The tech tree below is still where you scroll from. */
#hangarView canvas { display: block; touch-action: none; }
#hangarView:active { cursor: grabbing; }
#hangarSide { display: flex; flex-direction: column; }

/* ---- airframe stat bars: always on screen, never on hover --------------- */
#hangarStats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px;
  margin: 10px 0 4px;
}
.hg-stat { display: flex; flex-direction: column; gap: 3px; }
.hg-stat .hs-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--stencil); letter-spacing: .1em; font-size: 10px;
  text-transform: uppercase; color: #a2967c;
}
.hg-stat .hs-val { font-family: inherit; letter-spacing: 0; color: var(--cream); }
/* a stamped gauge, not a progress bar: notched track, brass needle */
.hg-stat .hs-track {
  position: relative; height: 9px; border-radius: 2px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 1px, transparent 1px 9px),
    rgba(10, 8, 5, .72);
  border: 1px solid rgba(120, 96, 52, .38);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.hg-stat .hs-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(180deg, #e0ac47, #8a6b2f);
  box-shadow: 0 0 6px rgba(201, 151, 59, .45);
  transition: width .18s ease-out;
}
/* what the fitted parts moved it BY, laid over the base value */
.hg-stat .hs-delta {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg,
    rgba(157, 189, 82, .85) 0 3px, rgba(157, 189, 82, .45) 3px 6px);
}
.hg-stat .hs-delta.down {
  background: repeating-linear-gradient(45deg,
    rgba(207, 122, 82, .85) 0 3px, rgba(207, 122, 82, .45) 3px 6px);
}
#hangarHead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#hangarClasses { display: flex; gap: 6px; flex-wrap: wrap; }
.hg-cls {
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: inherit;
  background: rgba(22, 18, 12, .72); border: 1px solid var(--iron-edge);
}
.hg-cls.on { border-color: var(--brass); background: rgba(58, 42, 18, .9); }
#hangarScrap { font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
#hangarNote { margin: 6px 0 10px; }
#hangarTree { padding-right: 2px; }
/* the slot header carries its own badge, so the row is scannable by shape */
.hg-slot h4 {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 5px; font-family: var(--stencil); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: #a2967c;
  font-weight: 400;
}
.hg-slot h4::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--iron-edge), transparent);
}
.hg-row { display: flex; gap: 7px; flex-wrap: wrap; }
/* A part is a SPRITE, a name and the trade. The prose description is gone:
   the card said the same thing three times and nobody read any of it. */
.hg-part {
  flex: 1 1 150px; min-width: 150px; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px;
  align-items: center; padding: 7px 9px;
  border-radius: 7px; color: inherit; font: inherit;
  background: rgba(22, 18, 12, .72); border: 1px solid var(--iron-edge);
  transition: border-color .12s, background .12s;
}
.hg-part:hover:not(:disabled) { border-color: rgba(201, 151, 59, .6); }
.hg-part.on { border-color: var(--brass); background: rgba(58, 42, 18, .92); }
.hg-part.locked { opacity: .72; }
.hg-part:disabled { opacity: .38; cursor: not-allowed; }
.hg-part .hp-pic {
  grid-row: 1 / span 2; width: 26px; height: 26px;
  image-rendering: pixelated; opacity: .92;
}
.hg-part.on .hp-pic { opacity: 1; filter: drop-shadow(0 0 4px rgba(201,151,59,.6)); }
.hg-part .hp-name { font-weight: 700; font-size: 12px; line-height: 1.2; }
.hg-part .hp-trade { font-size: 10.5px; display: flex; gap: 6px; flex-wrap: wrap; }
/* shared by the part cards and the stat gauges above them */
.hg-up, .hg-dn { font-style: normal; }
.hg-up { color: #9dbd52; }
.hg-dn { color: #cf7a52; }
.hg-part .hp-act {
  grid-column: 2; font-size: 10px; font-family: var(--stencil);
  letter-spacing: .1em; opacity: .8;
}
@media (max-width: 760px) {
  /* the layout is already stacked; on a phone just give the bay less of the
     screen and let the gauges wrap to two rows */
  #hangarView { height: 34vh; min-height: 200px; }
  #hangarStats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- ranked muster: the waiting room -------------------------------------
   Same overlay as squadron staging, because it is the same situation: you are
   standing about with a way out. The count is the only thing that moves. */
#musterBar {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 40; min-width: 340px; max-width: 92vw;
  border: 1px solid var(--iron-edge); border-radius: 10px;
  background: rgba(12, 10, 7, 0.78); padding: 14px 18px;
  text-align: center; color: var(--cream);
}
#musterBar.hidden { display: none; }
#musterCount {
  font-family: var(--stencil); font-size: 30px; color: #ffd868;
  letter-spacing: 0.08em;
}
#musterSides {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin: 8px 0 12px; font-size: 12.5px; color: var(--cream);
}
#musterSides span { opacity: 0.85; }
#musterHint { font-size: 12px; opacity: 0.7; margin-top: 8px; }

/* ---- on the deck: swap airframe ------------------------------------------
   Sits above the ability bar while you are landed, and only then. Same cards
   as the menu so the aeroplane you are choosing looks like the one you get. */
#landedPick {
  /* placed by #deckStack, which keeps it clear of the upgrade chooser, of the
     lower-left stack (damage diagram, score, cargo line) and of the ability
     bar - the swap panel must never cover the "land to fit" reminder */
  max-width: 100%;
  border: 1px solid var(--iron-edge); border-radius: 10px;
  background: rgba(12, 10, 7, 0.76); padding: 8px 12px 10px;
  text-align: center; pointer-events: auto;
}
#landedPick.hidden { display: none; }
.lp-label {
  font-family: var(--stencil); letter-spacing: 0.18em; color: var(--brass);
  font-size: 11px; margin-bottom: 6px;
}
#landedCards { display: flex; gap: 8px; justify-content: center; }
#landedCards .class-card { position: relative; }
.cc-lvl, .cc-gold {
  position: absolute; top: 4px; right: 4px;
  font-family: var(--stencil); font-size: 10px; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.55); color: var(--cream);
}
.cc-gold { top: auto; bottom: 4px; right: 4px; color: #ffd868; }

/* ---- daily muster --------------------------------------------------------- */
#dailyModal {
  position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center;
  background: rgba(6, 5, 3, 0.72);
}
#dailyModal.hidden { display: none; }
.dm-box {
  min-width: 320px; max-width: 92vw; padding: 22px 26px; text-align: center;
  border: 1px solid var(--iron-edge); border-radius: 12px;
  background: rgba(16, 13, 9, 0.97); color: var(--cream);
}
.dm-head {
  font-family: var(--stencil); letter-spacing: 0.22em; color: var(--brass);
  font-size: 15px; margin-bottom: 10px;
}
#dailyDay { font-family: var(--stencil); font-size: 30px; color: #ffd868; }
#dailyAward { font-size: 15px; margin: 6px 0 14px; }
#dailyTrack {
  display: flex; gap: 5px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.dm-pip {
  width: 20px; height: 20px; border-radius: 50%; font-size: 10px;
  line-height: 20px; border: 1px solid var(--iron-edge);
  background: rgba(0, 0, 0, 0.4); color: #7d7364;
}
.dm-pip.on { background: #c9973b; color: #1b160e; border-color: #e8c07a; }
.dm-pip.prize { border-color: #ffd868; color: #ffd868; }
.dm-pip.prize.on { background: #ffd868; color: #1b160e; }
#dailyNext { font-size: 12px; opacity: 0.75; margin: 0 0 14px; }

/* the standing cargo line: salvage aboard, and a heavy upgrade wanting a
   runway. Lives under the score, stays put, never animates. */
#cargobox {
  margin-top: 4px; font-size: 12px; line-height: 1.5;
  color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
#cargobox b { color: #ffd868; font-weight: 600; }
#cargobox:empty { display: none; }