/* ===========================================================================
   Real Battle — rb.css
   Vibrant cartoon UI: chunky rounded buttons, thick bars, soft shadows.
   =========================================================================== */

:root {
  --bg: #0b0f1a;
  --panel: #141a2b;
  --panel2: #1b2338;
  --ink: #eef3ff;
  --ink-dim: #93a0bd;
  --primary: #ffd166;
  --primary-ink: #221b06;
  --hp: #7ed957;
  --armor: #4fa3ff;
  --fuel: #7ee8fa;
  --danger: #ff5c5c;
  --radius: 16px;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  overflow: hidden;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
     -webkit-touch-callout: none;
}

#game {
  position: fixed; inset: 0;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ------------------------------------------------------------ overlays --- */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(255, 30, 30, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.12s linear;
  z-index: 30;
}

#float-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 40;
}
.kill-float {
  position: absolute;
  left: 50%; top: 38%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 26px;
  color: var(--primary);
  text-shadow: 0 2px 0 #1b1f2b, 0 4px 14px rgba(0,0,0,.5);
  animation: floatUp 1.05s ease-out forwards;
}
.kill-float.big { font-size: 38px; color: #ff9d3c; letter-spacing: 1px; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 14px) scale(.6); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  30%  { transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56px) scale(.95); }
}

#fps {
  position: fixed;
  left: calc(8px + var(--sal)); bottom: calc(8px + var(--sab));
  z-index: 60;
  font: 700 12px/1 Inter, monospace;
  color: #8ef2a2;
  background: rgba(10, 14, 24, .7);
  padding: 5px 8px;
  border-radius: 8px;
  display: none;
  pointer-events: none;
}
#streak-label { display: none; }

/* ----------------------------------------------------------------- HUD --- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; display: none; }

#hud-left {
  position: absolute;
  top: calc(12px + var(--sat));
  left: calc(14px + var(--sal));
  display: flex; flex-direction: column; gap: 7px;
}
.bar {
  position: relative;
  width: 190px; height: 18px;
  background: rgba(9, 12, 22, .72);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.07);
  overflow: hidden;
}
.bar .fill {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  transition: width .18s ease-out;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18);
}
#bar-hp .fill    { background: linear-gradient(#a5ec83, var(--hp)); }
#bar-armor .fill { background: linear-gradient(#8cc6ff, var(--armor)); }
#bar-fuel .fill  { background: linear-gradient(#b8f4fd, var(--fuel)); }
#bar-fuel { height: 12px; width: 160px; }
.bar-ico {
  position: absolute; left: 7px; top: 50%;
  transform: translateY(-52%);
  font-size: 11px;
  color: rgba(10, 14, 24, .8);
  font-weight: 900;
}

#hud-top {
  position: absolute;
  top: calc(10px + var(--sat));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#score-line {
  font-weight: 900; font-size: 22px;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
#score-line small { font-size: 13px; color: var(--ink-dim); font-weight: 700; }
#timer {
  font-weight: 800; font-size: 15px;
  color: var(--ink-dim);
  background: rgba(9,12,22,.6);
  border-radius: 9px;
  padding: 2px 12px;
  margin-top: 3px;
  display: inline-block;
}
#timer.low { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

#killfeed {
  position: absolute;
  top: calc(12px + var(--sat));
  right: calc(14px + var(--sar));
  display: flex; flex-direction: column; gap: 5px;
  align-items: flex-end;
  max-width: 44vw;
}
.kf-row {
  background: rgba(9, 12, 22, .72);
  border-radius: 10px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  animation: kfIn .22s ease-out;
  transition: opacity .4s, transform .4s;
  white-space: nowrap;
}
.kf-row.out { opacity: 0; transform: translateX(24px); }
.kf-x { color: var(--ink-dim); margin: 0 3px; }
.kf-tag {
  color: var(--primary);
  font-weight: 900;
  margin-left: 6px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
}
@keyframes kfIn { from { opacity: 0; transform: translateX(30px); } }

#hud-ammo {
  position: absolute;
  /* top-right corner, stacked under the killfeed so it's always visible
     without covering the health/armor/fuel bars on the opposite side */
  right: calc(16px + var(--sar));
  top: calc(78px + var(--sat));
  text-align: right;
  pointer-events: none;
}
#wpn-name {
  font-weight: 800; font-size: 13px; color: var(--ink-dim); letter-spacing: .4px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
/* shown only while the player is carrying a second weapon (slots[1] filled)
   so it's obvious a swap is available -- a distinct color from the AUTO
   badge so the two never get confused for one another */
#dual-badge {
  font-size: 9px; font-weight: 900; letter-spacing: .5px;
  color: #0d1220;
  background: #7fd8ff;
  border-radius: 5px;
  padding: 2px 5px;
  box-shadow: 0 0 8px rgba(127,216,255,.6);
  display: none;
}
#dual-badge.on { display: inline-block; }
#autofire-badge {
  font-size: 9px; font-weight: 900; letter-spacing: .5px;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  border-radius: 5px;
  padding: 2px 5px;
  transition: color .15s, background .15s;
}
#autofire-badge.on {
  color: #0d1220;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(255,209,102,.6);
}
#ammo-line {
  font-weight: 900; font-size: 34px;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  line-height: 1.05;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.ammo-sep { color: var(--ink-dim); font-size: 22px; }
#ammo-reserve { font-size: 20px; color: var(--ink-dim); }
#reload-ring {
  width: 17px; height: 17px;
  border: 3px solid rgba(255, 209, 102, .25);
  border-top-color: var(--primary);
  border-radius: 50%;
  display: none;
  animation: spin .7s linear infinite;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
#nade-pips { margin-top: 3px; }
#nade-pips span {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  margin-left: 5px;
  transition: background .15s, transform .15s;
}
#nade-pips span.on { background: #9ccc65; box-shadow: 0 0 6px rgba(156,204,101,.7); transform: scale(1.1); }

#respawn-msg {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  font-weight: 900; font-size: 26px;
  text-shadow: 0 3px 0 rgba(0,0,0,.5);
  background: rgba(9,12,22,.65);
  padding: 14px 30px;
  border-radius: 18px;
  display: none;
}

#hint-card {
  position: absolute;
  left: 50%; bottom: calc(18px + var(--sab));
  transform: translateX(-50%);
  background: rgba(13, 18, 32, .92);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 44px 12px 16px;
  max-width: 560px;
  pointer-events: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
#hint-card h3 { margin: 0 0 6px; font-size: 14px; color: var(--primary); }
#hint-card p { margin: 3px 0; font-size: 12px; color: var(--ink-dim); }
#hint-card b { color: var(--ink); }
#hint-close {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 9px;
}

/* --------------------------------------------------------------- menus --- */
#menus { position: fixed; inset: 0; z-index: 50; pointer-events: auto; }
#menus.dimmed { background: rgba(6, 9, 17, .52); }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  text-align: center;
}
.screen.on { display: flex; }
.screen.overlay { background: rgba(6, 9, 17, .66); backdrop-filter: blur(3px); }
#scr-settings { z-index: 6; } /* must beat pause/results overlays */

.screen h2 {
  margin: 0;
  font-size: 30px; font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
}

/* logo */
.logo {
  display: flex; flex-direction: column;
  line-height: .88;
  font-weight: 900;
  letter-spacing: 3px;
  animation: logoIn .6s cubic-bezier(.2, 1.6, .4, 1);
}
.logo-real {
  font-size: clamp(38px, 7vw, 64px);
  color: var(--ink);
  text-shadow: 0 3px 0 #2b3346, 0 7px 0 rgba(0,0,0,.35);
}
.logo-battle {
  font-size: clamp(58px, 11vw, 104px);
  color: var(--primary);
  text-shadow: 0 4px 0 #b2731c, 0 9px 0 rgba(0,0,0,.4), 0 14px 34px rgba(255,209,102,.25);
}
  .logo-icon { display: block; font-size: clamp(24px, 4.5vw, 40px); line-height: 1; text-align: center; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
  .logo-icon:first-child { margin-bottom: 2px; }
  .logo-icon:last-child { margin-top: 2px; }
@keyframes logoIn { from { transform: scale(.7) translateY(-30px); opacity: 0; } }
.tagline { color: var(--ink-dim); font-weight: 600; margin-top: -6px; }
.footer-note { color: rgba(147,160,189,.55); font-size: 12px; font-weight: 600; position: absolute; bottom: calc(14px + var(--sab)); }

/* buttons */
.btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  background: var(--panel2);
  border: none;
  border-radius: var(--radius);
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.3);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.btn:hover { transform: translateY(-2px) scale(1.03); background: #232d48; }
.btn:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn-big { font-size: 18px; padding: 15px 42px; min-width: 240px; }
.btn-small { padding: 7px 14px; font-size: 14px; min-width: 0; }
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 4px 0 #b2731c, 0 10px 26px rgba(255,209,102,.28);
}
.btn-primary:hover { background: #ffdb85; }
.menu-col { display: flex; flex-direction: column; gap: 13px; align-items: center; }
.menu-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* cards */
.card-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.card {
  background: var(--panel);
  border: 2px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 20px 18px;
  width: 200px;
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.card:hover {
  transform: translateY(-5px) scale(1.04);
  border-color: var(--primary);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.card:active { transform: translateY(0) scale(.98); }
.card-emoji { font-size: 34px; margin-bottom: 8px; }
.card-title { font-weight: 900; font-size: 17px; }
.card-sub { color: var(--ink-dim); font-size: 12.5px; margin-top: 5px; font-weight: 600; }
.map-swatch {
  height: 74px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.sw-jungle   { background: linear-gradient(160deg, #2e6b52, #173a3f 60%, #5da95a); }
.sw-volcano  { background: linear-gradient(160deg, #54221a, #1a0f14 55%, #ff6b35); }
.sw-sky      { background: linear-gradient(160deg, #9fd4ef, #3d7bd6 65%, #ffffff); }
.sw-desert   { background: linear-gradient(160deg, #e8b86b, #7a4a1e 60%, #f0d090); }
.sw-mountain { background: linear-gradient(160deg, #3a5f7d, #0d1b2a 55%, #eaf3f8); }

/* config */
.cfg-row {
  display: flex; align-items: center; gap: 18px;
  background: var(--panel);
  border-radius: 16px;
  padding: 12px 20px;
  min-width: min(520px, 90vw);
  justify-content: space-between;
}
.cfg-row > label { font-weight: 800; color: var(--ink-dim); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper span { font-weight: 900; font-size: 17px; min-width: 84px; }
.seg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.seg {
  font-family: inherit; font-weight: 800; font-size: 13px;
  background: var(--panel2); color: var(--ink-dim);
  border: 2px solid transparent;
  border-radius: 11px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all .12s;
}
.seg:hover { color: var(--ink); transform: scale(1.05); }
.seg.sel { background: var(--primary); color: var(--primary-ink); }
#cfg-colors { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  position: relative;
}
.swatch::after {
  content: ""; position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--acc, #fff);
  border: 2px solid #0b0f1a;
}
.swatch:hover { transform: scale(1.18); }
.swatch.sel { border-color: #fff; transform: scale(1.14); box-shadow: 0 0 12px rgba(255,255,255,.4); }

    .swatch-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .swatch-btn {
             font-family: inherit; font-weight: 800; font-size: 12px;
             background: var(--panel2); color: var(--ink-dim);
             border: 2px solid transparent; border-radius: 10px;
             padding: 7px 12px; cursor: pointer; transition: all .12s;
    }
    .swatch-btn:hover { color: var(--ink); transform: scale(1.05); }
    .swatch-btn.sel { background: var(--primary); color: var(--primary-ink); border-color: #fff; }

/* settings panel */
.panel {
  background: var(--panel);
  border-radius: 22px;
  padding: 26px 30px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 15px;
  align-items: center;
  border: 2px solid rgba(255,255,255,.07);
  max-width: min(92vw, 560px);
     max-height: calc(100vh - 24px - var(--sat) - var(--sab));
     overflow-y: auto;
}
.panel h2 { font-size: 24px; }
.panel-wide { min-width: min(92vw, 640px); }
.set-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; gap: 24px;
}
.set-row label { font-weight: 700; color: var(--ink-dim); }
input[type="range"] {
  accent-color: var(--primary);
  width: 170px; height: 26px;
  cursor: pointer;
}
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--primary); cursor: pointer; }

/* profile screen: callsign + look + this game's stats */
#profile-name { width: 170px; }
#profile-colors, #profile-haircolor { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#profile-stats-box { width: 100%; }
#profile-stats-box h3 {
  margin: 4px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-dim); text-align: left;
}
.profile-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 100%;
}
.profile-stat {
  background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.profile-stat-val { font-size: 20px; font-weight: 900; color: var(--primary); }
.profile-stat-label { font-size: 10.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; text-align: center; }
.profile-stat-empty { font-size: 13px; color: var(--ink-dim); text-align: center; padding: 6px 0; }
.profile-note { font-size: 12.5px; color: var(--ink-dim); text-align: center; line-height: 1.5; }
.profile-note a, #profile-account-note a { color: var(--primary); font-weight: 700; text-decoration: none; }
.profile-note a:hover, #profile-account-note a:hover { text-decoration: underline; }

/* customize on-screen controls: the screen itself must NOT block clicks/
   touches over the canvas below (that's how the buttons get dragged), only
   its small instruction panel should be interactive. */
#scr-customize {
  /* must outrank #scr-pause / #scr-results (both still ".on" underneath when
     Customize is opened via Pause -> Settings -> Customize) — otherwise their
     backdrop paints on top and swallows every click meant for the Done/Reset
     buttons below, trapping the player with no way back. Also above settings'
     z-index:6 since it can be opened from inside Settings on any path. */
  z-index: 8;
  pointer-events: none;
  background: transparent;
  justify-content: flex-start;
  padding-top: calc(18px + var(--sat));
}
.cust-panel {
     pointer-events: auto;
     background: rgba(20, 26, 43, 0.6);
     backdrop-filter: blur(1.5px);
     -webkit-backdrop-filter: blur(1.5px);
     border-radius: 18px;
     padding: 16px 22px;
     max-width: min(92vw, 460px);
     max-height: calc(100vh - 24px - var(--sat) - var(--sab));
     overflow-y: auto;
     text-align: center;
     box-shadow: 0 12px 34px rgba(0,0,0,.35);
     border: 2px solid rgba(255,255,255,.16);
}
.cust-panel h2 { font-size: 19px; margin: 0 0 4px; }
.cust-panel p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-dim); }
.cust-panel .menu-row { justify-content: center; }
.cust-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.cust-panel-head h2 { margin: 0; }
.cust-close { pointer-events: auto; flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: var(--ink); font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer; }
.cust-close:hover { background: rgba(255,255,255,.2); }
.cust-collapse-toggle { pointer-events: auto; width: 100%; margin: 2px 0 12px; background: rgba(255,209,102,.14); border: 2px solid rgba(255,209,102,.4); color: var(--primary); font-weight: 800; }
.cust-collapse-toggle:hover { background: rgba(255,209,102,.22); }
.cust-panel.collapsed .cust-list, .cust-panel.collapsed > p { display: none; }
.cust-panel.collapsed { padding-bottom: 14px; }

/* per-button resize / hide list inside the Customize Controls panel */
.cust-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 38vh; overflow-y: auto;
  margin-bottom: 12px; padding-right: 2px;
}
.cust-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 6px 10px;
}
.cust-row-label { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cust-row-ctrls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.cust-row-ctrls .btn-small { padding: 5px 10px; font-size: 13px; }
.cust-row-ctrls .cust-hide.is-hidden { background: var(--danger); color: #2a0d0d; }
/* 4-way nudge arrows — a precise, tap-friendly alternative to dragging a
   button around, so "move this button" is discoverable even on a phone
   where a drag can be mistaken for a tap. */
.cust-row-move { display: flex; gap: 3px; padding-left: 4px; border-left: 1px solid rgba(255,255,255,.12); }
.cust-move { padding: 5px 8px !important; font-size: 12px !important; line-height: 1; min-width: 26px; }

/* results */
#res-banner {
  font-size: 34px; font-weight: 900;
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
  animation: logoIn .5s cubic-bezier(.2,1.6,.4,1);
}
#res-banner.win { color: var(--primary); }
.team-final { font-size: 30px; font-weight: 900; margin-bottom: 6px; }
#res-table { width: 100%; max-height: 44vh; overflow-y: auto; }
#res-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
#res-table th {
  color: var(--ink-dim); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .6px; padding: 6px 10px; text-align: left;
}
#res-table td { padding: 7px 10px; text-align: left; font-weight: 700; }
#res-table tr:nth-child(even) { background: rgba(255,255,255,.035); }
#res-table tr.me { background: rgba(255,209,102,.12); color: var(--primary); }
#res-table .dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 7px;
}

/* -------------------------------------------------------------- online --- */
.btn-online { background: #274a7a; }
.btn-online:hover { background: #315d99; }

.online-name-row input[type="text"],
#join-code {
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  background: var(--panel2);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 14px;
  outline: none;
  width: 200px;
  transition: border-color .12s;
}
.online-name-row input:focus, #join-code:focus { border-color: var(--primary); }
.join-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
#join-code {
  width: 130px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 18px;
}
#online-status {
  min-height: 20px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-dim);
}
#online-status.err { color: var(--danger); }

/* lobby */
#lobby-code {
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel);
  border: 2px dashed rgba(255,209,102,.5);
  border-radius: 18px;
  padding: 12px 34px;
  cursor: pointer;
  color: var(--ink);
  transition: transform .12s, border-color .12s;
}
#lobby-code:hover { transform: scale(1.04); border-color: var(--primary); }
#lobby-code span {
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 8px;
  color: var(--primary);
  text-shadow: 0 3px 0 rgba(0,0,0,.4);
}
#lobby-code small { color: var(--ink-dim); font-weight: 700; font-size: 11px; }
#lobby-code.copied { border-color: var(--hp); }
#lobby-code.copied small { color: var(--hp); }

#lobby-players {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  max-width: min(92vw, 620px);
}
.lobby-player {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 7px 16px 7px 10px;
  font-weight: 800;
  font-size: 14px;
  animation: kfIn .22s ease-out;
}
.lobby-player .pdot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  flex: none;
}
.lobby-player .crown { font-size: 13px; }
.lobby-player.me { border-color: var(--primary); }

#lobby-host-controls {
  display: none;
  flex-direction: column; gap: 10px; align-items: center;
}
#lobby-host-controls.on { display: flex; }
#lobby-wait {
  display: none;
  font-weight: 800; color: var(--ink-dim);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px 26px;
  animation: pulse 1.6s infinite;
}
#lobby-wait.on { display: block; }

/* ping badge */
#ping-badge {
  display: none;
  font-weight: 800; font-size: 12px;
  color: var(--ink-dim);
  background: rgba(9,12,22,.6);
  border-radius: 8px;
  padding: 2px 9px;
  margin-top: 3px;
}
#ping-badge.ok { color: var(--hp); }
#ping-badge.warn { color: var(--primary); }
#ping-badge.bad { color: var(--danger); }

/* in-match chat */
#chat-log {
  position: absolute;
  left: calc(14px + var(--sal));
  bottom: calc(96px + var(--sab));
  display: flex; flex-direction: column-reverse; gap: 4px;
  max-width: min(46vw, 380px);
  pointer-events: none;
}
.chat-row {
  background: rgba(9,12,22,.68);
  border-radius: 10px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  animation: kfIn .2s ease-out;
  transition: opacity .8s;
  overflow-wrap: anywhere;
}
.chat-row.out { opacity: 0; }
.chat-row b { color: var(--primary); margin-right: 5px; }
#chat-input {
  position: absolute;
  left: calc(14px + var(--sal));
  bottom: calc(56px + var(--sab));
  width: min(46vw, 340px);
  display: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  background: rgba(13,18,32,.94);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 9px 13px;
  outline: none;
  pointer-events: auto;
  z-index: 25;
}
#chat-btn {
  position: absolute;
  left: calc(14px + var(--sal));
  bottom: calc(14px + var(--sab));
  display: none;
  font-size: 17px;
  background: rgba(13,18,32,.8);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 50%;
  width: 44px; height: 44px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 25;
}

/* toast */
#toast {
  position: fixed;
  left: 50%; top: calc(18px + var(--sat));
  transform: translate(-50%, -80px);
  background: var(--panel);
  border: 2px solid var(--danger);
  color: var(--ink);
  font-weight: 800; font-size: 14px;
  border-radius: 14px;
  padding: 12px 24px;
  z-index: 120;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,1.4,.4,1);
  pointer-events: none;
}
#toast.on { transform: translate(-50%, 0); }

/* always-visible in-game pause/menu button — top-right, works regardless of
   device (desktop players who don't know about Esc, or touch devices where
   the canvas pause icon wasn't obvious) */
#btn-hud-pause {
  position: absolute;
  top: calc(10px + var(--sat));
  right: calc(10px + var(--sar));
  width: 38px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(13,18,32,.55);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 22;
}
#btn-hud-pause:hover, #btn-hud-pause:active { background: rgba(13,18,32,.8); }

/* persistent fullscreen toggle — always available bottom-right, low-visibility
   so it doesn't distract, fixes the browser nav bar creeping back into view. */
#btn-fullscreen {
  position: fixed;
  right: calc(10px + var(--sar));
  bottom: calc(10px + var(--sab));
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(13,18,32,.35);
  color: rgba(255,255,255,.5);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: .55;
  transition: opacity .15s, background .15s;
}
#btn-fullscreen:hover, #btn-fullscreen:active { opacity: 1; background: rgba(13,18,32,.65); }

/* ------------------------------------------------- rotate to landscape --- */
#rotate-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  background: var(--bg);
  display: none;
  align-items: center; justify-content: center;
  text-align: center;
}
.rotate-icon { font-size: 52px; animation: wiggle 1.6s ease-in-out infinite; }
.rotate-inner p { font-weight: 800; color: var(--ink-dim); }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 820px) {
  #rotate-overlay { display: flex; }
}

/* small screens: compact HUD */
@media (max-height: 420px) {
  .bar { width: 140px; height: 15px; }
  #ammo-line { font-size: 26px; }
  #hint-card { display: none !important; }
  .screen h2 { font-size: 22px; }
  .card { padding: 12px; width: 165px; }
  .map-swatch { height: 52px; }
  .btn-big { padding: 11px 30px; font-size: 16px; min-width: 190px; }
  .logo-battle { font-size: clamp(44px, 12vh, 72px); }
  .logo-real { font-size: clamp(26px, 8vh, 44px); }
  .cfg-row { padding: 8px 16px; }
}

/* ------------------------------------------- friends invite panel --- */
#lobby-friends {
     width: 100%;
     max-width: min(92vw, 420px);
     background: var(--panel);
     border-radius: var(--radius);
     padding: 14px 18px;
}
#lobby-friends h3 {
     margin: 0 0 10px;
     font-size: 13px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: .4px;
     color: var(--ink-dim);
     text-align: left;
}
#lobby-friends-empty {
     font-size: 12.5px;
     color: var(--ink-dim);
     text-align: center;
     padding: 6px 0;
}
.lobby-friends-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
     max-height: 160px;
     overflow-y: auto;
}
.lobby-friend-row {
     display: flex;
     align-items: center;
     gap: 10px;
     background: var(--panel2);
     border-radius: 12px;
     padding: 8px 10px;
}
.lobby-friend-dot {
     width: 10px; height: 10px;
     border-radius: 50%;
     background: rgba(255,255,255,.2);
     flex: none;
}
.lobby-friend-dot.online { background: var(--hp); box-shadow: 0 0 8px rgba(126,217,87,.6); }
.lobby-friend-name {
     flex: 1;
     text-align: left;
     font-weight: 700;
     font-size: 13.5px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

/* team-invite button injected into each roster chip in the lobby */
.lobby-player .btn-team {
     margin-left: 2px;
     padding: 5px 12px;
     font-size: 12px;
}

/* -------------------------------------- invite / team-invite banners --- */
.rb-banner {
     position: fixed;
     left: 50%; top: calc(18px + var(--sat));
     transform: translate(-50%, -140px);
     display: flex; align-items: center; gap: 10px;
     background: var(--panel);
     border: 2px solid var(--primary);
     border-radius: 14px;
     padding: 10px 14px;
     box-shadow: 0 10px 30px rgba(0,0,0,.5);
     transition: transform .3s cubic-bezier(.2,1.4,.4,1);
     z-index: 60;
     max-width: min(92vw, 420px);
     pointer-events: none;
}
.rb-banner.on { transform: translate(-50%, 0); pointer-events: auto; }
#rb-team-banner { top: calc(78px + var(--sat)); }
.rb-banner span {
     font-weight: 700;
     font-size: 13.5px;
     text-align: left;
     flex: 1;
}
.rb-banner .btn { flex: none; }