/* 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;
}

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

#game, #game canvas { position: fixed; inset: 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; }
#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); }

#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: 34px; }
#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; }

#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);
}

#controlshint {
  position: absolute; bottom: 10px; right: 14px;
  font-size: 11px; color: rgba(190, 175, 140, 0.5); letter-spacing: 0.04em;
}

#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;
}

#upgpanel {
  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);
  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; }
.upgopt {
  display: flex; flex-direction: column; gap: 4px; min-width: 170px;
  background: rgba(34, 28, 18, 0.9); color: var(--text);
  border: 1px solid var(--iron-edge); border-radius: 6px;
  padding: 12px 14px; cursor: pointer; text-align: left;
}
.upgopt:hover { border-color: var(--brass); background: rgba(46, 38, 24, 0.95); }
.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%;
}
#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);
}

/* ============================ 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; }
#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-panel {
  position: relative; width: min(700px, 94vw); margin: 24px 0;
  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);
}
/* 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 {
  font-family: var(--stencil);
  font-size: 58px; font-weight: 400; letter-spacing: 0.16em; line-height: 1;
  color: var(--cream); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 8px 30px rgba(201, 151, 59, 0.3);
}
.logo span { color: var(--brass); }
.tagline {
  color: #9d9078; font-size: 12px; letter-spacing: 0.22em; margin: 8px 0 20px;
  text-transform: uppercase;
}

/* ---- 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; }

.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); }

#customColor {
  width: 200px; height: 24px; padding: 0; border: 1px solid var(--iron-edge);
  border-radius: 5px; background: linear-gradient(90deg,
    hsl(0,65%,55%), hsl(60,65%,55%), hsl(120,65%,55%), hsl(180,65%,55%),
    hsl(240,65%,55%), hsl(300,65%,55%), hsl(360,65%,55%));
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
#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);
}

.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;
}

#lobbyList {
  max-height: 190px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 10px; min-height: 60px;
}
#lobbyList .empty { color: #857a60; font-size: 13px; padding: 14px 4px; }
.lobbyrow {
  display: flex; align-items: center; gap: 10px;
  background: rgba(34, 28, 18, 0.75); border: 1px solid var(--iron-edge);
  border-radius: 6px; padding: 8px 12px; font-size: 14px;
}
.lobbyrow .lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobbyrow .lcode { color: var(--brass); font-family: monospace; letter-spacing: 0.2em; }
.lobbyrow .lsides { font-size: 11px; white-space: nowrap; }
.lobbyrow .lsides .al { color: var(--allies); font-weight: 700; }
.lobbyrow .lsides .ax { color: var(--axis); font-weight: 700; }
.lobbyrow button {
  background: rgba(201, 151, 59, 0.14); color: var(--brass);
  border: 1px solid rgba(201, 151, 59, 0.45); border-radius: 5px;
  padding: 4px 12px; cursor: pointer; font-size: 12px; font-weight: 700;
  font-family: var(--stencil); letter-spacing: 0.1em;
}
.lobbyrow button:hover:not(:disabled) { background: rgba(201, 151, 59, 0.28); }
.lobbyrow button:disabled { opacity: 0.4; cursor: default; }

.joinrow { display: flex; gap: 8px; }
#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; }

/* ---- menu tabs ------------------------------------------------------------ */
#menuTabs {
  display: flex; gap: 8px; margin-bottom: 18px;
  border-bottom: 1px solid var(--iron-edge); padding-bottom: 0;
}
.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: 15px; letter-spacing: 0.14em;
  padding: 8px 16px 7px;
}
.mtab:hover { color: var(--cream); }
.mtab.sel {
  color: var(--brass); background: rgba(40, 33, 20, 0.9);
  border-color: var(--iron-edge);
}
.mtab .lockmark { font-size: 11px; opacity: 0.8; }
.tab-locked { color: #9d9078; padding: 26px 8px; text-align: center; font-size: 14px; }

/* ---- account box ----------------------------------------------------------- */
#accountBox {
  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;
}
.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: var(--stencil); 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; }

/* ---- 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 {
  position: relative; width: 160px; height: 600px; margin: 0 auto;
  background: rgba(12, 10, 7, 0.8); border: 1px dashed rgba(120, 96, 52, 0.5);
  border-radius: 6px; display: grid; place-items: center;
}
.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; } }

/* ---- 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-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); }

#menuError { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 14px; }
#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;
}