/* ═══════════════════════════════════════════════════════════════
   NEON TANK TITANS 3D — ARMORED WARFARE
   Cyberpunk tactical UI · Orbitron / Rajdhani
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cyan: #00f0ff;
  --cyan-dim: #0a6e78;
  --magenta: #ff2d78;
  --gold: #ffc233;
  --crimson: #ff3838;
  --green: #38ff9c;
  --bg0: #04060c;
  --bg1: #0a0f1e;
  --panel: rgba(8, 14, 28, 0.82);
  --panel-border: rgba(0, 240, 255, 0.28);
  --glow-cyan: 0 0 12px rgba(0, 240, 255, 0.55);
  --font-h: 'Orbitron', sans-serif;
  --font-b: 'Rajdhani', sans-serif;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg0);
  color: #d7f4ff;
  font-family: var(--font-b);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* 🛡 DEFENSIVE HIDDEN — hidden overlays must NEVER block clicks or aim */
.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

input[type="text"], textarea {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

canvas#game-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
}

/* ═══════════ TOP BAR (44px) ═══════════ */
#top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(4, 8, 16, 0.95) 0%, rgba(4, 8, 16, 0.55) 80%, transparent 100%);
  z-index: 50;
  pointer-events: none;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.logo {
  font-family: var(--font-h); font-weight: 900; font-size: 14px;
  letter-spacing: 2px; color: #eaffff; text-shadow: var(--glow-cyan);
}
.logo b { color: var(--cyan); }
.tb-divider { width: 1px; height: 18px; background: rgba(0, 240, 255, 0.3); }
.conn-on { color: var(--green); }
.conn-off { color: #667; }
.conn-battle { color: var(--gold); }
#ping-display { font-size: 12px; font-weight: 700; color: var(--cyan); letter-spacing: 1px; }
.tb-btn {
  font-family: var(--font-h); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #bfefff; background: rgba(0, 30, 40, 0.65);
  border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 3px;
  padding: 5px 10px; cursor: pointer; transition: all 0.15s;
}
.tb-btn:hover { background: rgba(0, 240, 255, 0.18); box-shadow: var(--glow-cyan); }
.tb-btn.active { background: rgba(0, 240, 255, 0.28); color: #fff; box-shadow: var(--glow-cyan); }
.tb-btn-danger { border-color: rgba(255, 45, 120, 0.5); color: #ffb3cd; }
.tb-btn-danger:hover { background: rgba(255, 45, 120, 0.2); box-shadow: 0 0 12px rgba(255, 45, 120, 0.5); }

/* ═══════════ COMBAT HUD ═══════════ */
#hud {
  position: fixed; top: 56px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 14px;
  z-index: 20; pointer-events: none;
}
.hud-panel {
  min-width: 240px; max-width: 300px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 8px 12px 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(0, 240, 255, 0.04);
}
.hud-right { text-align: right; }
.hud-tankname {
  font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--cyan); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.hud-right .hud-tankname { justify-content: flex-end; }
#hud-p-tag, #hud-e-tag {
  font-size: 9px; padding: 1px 6px; border-radius: 2px;
  background: rgba(0, 240, 255, 0.15); border: 1px solid rgba(0, 240, 255, 0.4);
}
#hud-e-tag { background: rgba(255, 45, 120, 0.15); border-color: rgba(255, 45, 120, 0.5); color: #ffd7e5; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.bar-row label { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #6fa8b8; width: 32px; }
.bar { position: relative; flex: 1; height: 9px; background: rgba(10, 20, 32, 0.9); border: 1px solid rgba(120, 200, 220, 0.25); overflow: hidden; }
.bar-fill { height: 100%; width: 100%; transition: width 0.18s ease-out; }
.hp-fill { background: linear-gradient(90deg, #00f0ff, #38ff9c); box-shadow: 0 0 8px rgba(56, 255, 156, 0.7); }
.hp-fill-foe { background: linear-gradient(90deg, #ff2d78, #ff3838); box-shadow: 0 0 8px rgba(255, 56, 56, 0.7); }
.sh-fill { background: linear-gradient(90deg, #7a5cff, #00f0ff); }
.rl-fill { background: linear-gradient(90deg, var(--gold), #ffaa00); }
.bar-row span { font-size: 10px; font-weight: 700; color: #bfefff; width: 34px; text-align: right; }

.hud-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#match-timer {
  font-family: var(--font-h); font-size: 26px; font-weight: 900; letter-spacing: 3px;
  color: #eaffff; text-shadow: var(--glow-cyan);
}
#match-timer.low { color: var(--crimson); text-shadow: 0 0 14px rgba(255, 56, 56, 0.8); }
.round-pips { display: flex; align-items: center; gap: 6px; }
.pip { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 240, 255, 0.4); background: rgba(0, 20, 30, 0.6); }
.pip-center { font-size: 8px; letter-spacing: 2px; color: #6fa8b8; margin: 0 4px; font-weight: 700; }
.pip.pip-p.won { background: var(--cyan); box-shadow: var(--glow-cyan); border-color: var(--cyan); }
.pip.pip-e.won { background: var(--crimson); box-shadow: 0 0 10px rgba(255, 56, 56, 0.8); border-color: var(--crimson); }
#score-line { font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: 2px; }

/* ═══════════ RETICLE ═══════════ */
#reticle {
  position: fixed; left: 50%; top: 50%;
  width: 0; height: 0; z-index: 15; pointer-events: none;
}
.ret-lines { position: relative; }
.ret-l {
  position: absolute; background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.9);
}
.ret-t, .ret-b { width: 2px; height: 14px; left: -1px; }
.ret-lf, .ret-rt { width: 14px; height: 2px; top: -1px; }
.ret-t { bottom: var(--spread, 12px); }
.ret-b { top: var(--spread, 12px); }
.ret-lf { right: var(--spread, 12px); }
.ret-rt { left: var(--spread, 12px); }
.ret-dot { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px var(--cyan); }
.ret-info {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: var(--green); white-space: nowrap; text-shadow: 0 0 8px rgba(56, 255, 156, 0.6);
}
.ret-lead {
  position: absolute; width: 18px; height: 18px; left: -9px; top: -9px;
  border: 2px dashed var(--gold); border-radius: 50%;
  transform: translate(var(--lx, 0), var(--ly, 0));
  box-shadow: 0 0 10px rgba(255, 194, 51, 0.6);
}

#hitmarker {
  position: fixed; left: 50%; top: 50%; z-index: 16; pointer-events: none;
}
#hitmarker span {
  position: absolute; width: 12px; height: 2px; background: #fff;
  box-shadow: 0 0 8px #fff;
}
#hitmarker span:nth-child(1) { transform: translate(-16px, -10px) rotate(45deg); }
#hitmarker span:nth-child(2) { transform: translate(4px, -10px) rotate(-45deg); }
#hitmarker span:nth-child(3) { transform: translate(-16px, 8px) rotate(-45deg); }
#hitmarker span:nth-child(4) { transform: translate(4px, 8px) rotate(45deg); }
#hitmarker.crit span { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
#hitmarker.bounce span { background: #9fb; box-shadow: 0 0 8px #9fb; }

#bounce-flash {
  position: fixed; left: 50%; top: 58%; transform: translateX(-50%);
  font-family: var(--font-h); font-weight: 900; font-size: 18px; letter-spacing: 4px;
  color: #cfs; text-shadow: 0 0 12px #9f9; z-index: 16; pointer-events: none;
  animation: flashOut 0.9s ease-out forwards;
}
@keyframes flashOut { 0% { opacity: 1; } 100% { opacity: 0; } }

#damage-vignette {
  position: fixed; inset: 0; z-index: 14; pointer-events: none;
  box-shadow: inset 0 0 140px rgba(255, 30, 30, 0);
  transition: box-shadow 0.25s ease-out;
}
#damage-vignette.hurt { box-shadow: inset 0 0 160px rgba(255, 30, 30, 0.55); }

#death-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0.25), rgba(0, 0, 0, 0.75));
  pointer-events: none;
}
.death-text {
  font-family: var(--font-h); font-size: 42px; font-weight: 900; letter-spacing: 8px;
  color: var(--crimson); text-shadow: 0 0 30px rgba(255, 56, 56, 0.9);
  animation: deathPulse 1.4s ease-in-out infinite;
}
@keyframes deathPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.4; } }

/* Event feed */
#event-feed {
  position: fixed; right: 14px; top: 170px; z-index: 18;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  pointer-events: none; max-width: 320px;
}
.feed-item {
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  background: rgba(6, 12, 22, 0.8); border-left: 3px solid var(--cyan);
  padding: 5px 10px; border-radius: 2px;
  animation: feedIn 0.25s ease-out;
}
.feed-item.bad { border-left-color: var(--crimson); color: #ffc9c9; }
.feed-item.good { border-left-color: var(--green); color: #c9ffe4; }
.feed-item.gold { border-left-color: var(--gold); color: #ffe9b8; }
@keyframes feedIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Tactical readout */
#tactical-readout {
  position: fixed; left: 14px; bottom: 14px; z-index: 18;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: #7fd8e8; text-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
  pointer-events: none;
}

/* Ability HUD */
#ability-hud {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 18; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 4px;
  padding: 6px 14px; pointer-events: none;
}
#ability-icon { font-size: 20px; filter: drop-shadow(0 0 6px var(--cyan)); }
#ability-cd { font-family: var(--font-h); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #9fdcec; }
#ability-cd.ability-ready { color: var(--green); text-shadow: 0 0 8px rgba(56, 255, 156, 0.7); }

/* ═══════════ SNIPER SCOPE ═══════════ */
#sniper-overlay {
  position: fixed; inset: 0; z-index: 13; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.88) 74%);
}
.scope-ring {
  position: absolute; left: 50%; top: 50%; width: 62vh; height: 62vh;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(0, 240, 255, 0.5); border-radius: 50%;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.25), inset 0 0 40px rgba(0, 240, 255, 0.08);
}
.scope-cross-h, .scope-cross-v { position: absolute; left: 50%; top: 50%; background: rgba(0, 240, 255, 0.75); }
.scope-cross-h { width: 58vh; height: 1px; transform: translate(-50%, -50%); }
.scope-cross-v { width: 1px; height: 58vh; transform: translate(-50%, -50%); }
.scope-ticks {
  position: absolute; left: 50%; top: 50%; width: 1px; height: 56vh; transform: translate(-50%, -50%);
  background: repeating-linear-gradient(180deg, rgba(0, 240, 255, 0.7) 0 2px, transparent 2px 8%);
  opacity: 0.5;
}
.scope-readout {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  display: flex; gap: 22px;
  font-family: var(--font-h); font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--green);
  text-shadow: 0 0 10px rgba(56, 255, 156, 0.6);
}

/* ═══════════ TOUCH CONTROLS ═══════════ */
#touch-controls { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#tc-move { position: absolute; left: 4%; bottom: 6%; width: 150px; height: 150px; pointer-events: auto; }
#tc-stick {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(0, 240, 255, 0.4); background: rgba(6, 14, 26, 0.45);
}
#tc-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(0, 240, 255, 0.25); border: 2px solid var(--cyan);
  box-shadow: var(--glow-cyan);
}
#tc-actions {
  position: absolute; right: 4%; bottom: 6%;
  display: grid; grid-template-columns: 70px 70px; gap: 12px;
  pointer-events: auto;
}
.tc-btn {
  width: 70px; height: 70px; border-radius: 50%;
  font-family: var(--font-h); font-size: 12px; font-weight: 700; color: #dffaff;
  background: rgba(6, 14, 26, 0.6); border: 2px solid rgba(0, 240, 255, 0.5);
  pointer-events: auto;
}
.tc-fire { border-color: var(--crimson); color: #ffdada; box-shadow: 0 0 14px rgba(255, 56, 56, 0.4); }
.tc-ability { border-color: var(--gold); color: #fff0cf; }

/* ═══════════ SCREENS ═══════════ */
.screen {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0, 90, 120, 0.25), transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(120, 0, 70, 0.22), transparent 50%),
    rgba(3, 5, 10, 0.92);
  overflow-y: auto;
  backdrop-filter: blur(4px);
}

.landing-inner { width: min(1060px, 94vw); padding: 40px 0 30px; }
.landing-head { text-align: center; margin-bottom: 26px; }
.game-title {
  font-family: var(--font-h); font-weight: 900; font-size: clamp(26px, 5vw, 44px);
  letter-spacing: 6px; color: #eaffff; text-shadow: 0 0 24px rgba(0, 240, 255, 0.7);
}
.game-title span { color: var(--cyan); }
.game-sub { margin-top: 6px; font-size: 12px; letter-spacing: 4px; color: #5fb8cc; font-weight: 600; }

.landing-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 26px; align-items: start; }
@media (max-width: 880px) { .landing-grid { grid-template-columns: 1fr; } }

.field-label {
  display: block; font-family: var(--font-h); font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; color: #58a8ba; margin: 14px 0 7px;
}
#player-name {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-h); font-size: 15px; font-weight: 700; letter-spacing: 2px;
  color: #eaffff; background: rgba(6, 14, 26, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.35); border-radius: 3px; outline: none;
}
#player-name:focus { border-color: var(--cyan); box-shadow: var(--glow-cyan); }

.arena-select { display: flex; flex-direction: column; gap: 8px; }
.arena-card {
  text-align: left; padding: 10px 14px; cursor: pointer;
  background: rgba(8, 16, 30, 0.75); color: #bfefff;
  border: 1px solid rgba(0, 240, 255, 0.22); border-radius: 4px; transition: all 0.15s;
  font-family: var(--font-b);
}
.arena-card b { display: block; font-family: var(--font-h); font-size: 12px; letter-spacing: 1.5px; }
.arena-card i { font-style: normal; font-size: 12px; color: #6fa8b8; }
.arena-card.selected { border-color: var(--cyan); background: rgba(0, 240, 255, 0.1); box-shadow: var(--glow-cyan); }

.landing-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.btn-primary, .btn-secondary, .btn-ghost {
  font-family: var(--font-h); font-weight: 700; letter-spacing: 2px;
  padding: 14px 18px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
  border: none; font-size: 13px;
}
.btn-primary {
  color: #031015; background: linear-gradient(90deg, #00f0ff, #38ff9c);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.45);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(56, 255, 156, 0.6); }
.btn-secondary {
  color: #bfefff; background: rgba(0, 30, 40, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.4);
}
.btn-secondary:hover { background: rgba(0, 240, 255, 0.15); }
.btn-ghost {
  color: #ff9db8; background: rgba(60, 8, 24, 0.5);
  border: 1px solid rgba(255, 45, 120, 0.45);
}
#landing-net-note { margin-top: 12px; font-size: 12px; color: #58a8ba; letter-spacing: 1px; }

.class-cards { display: flex; flex-direction: column; gap: 10px; }
.class-card {
  text-align: left; padding: 12px 16px; cursor: pointer;
  background: rgba(8, 16, 30, 0.78); color: #cfeeff;
  border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 5px; transition: all 0.15s;
}
.class-card:hover { border-color: rgba(0, 240, 255, 0.55); }
.class-card.selected {
  border-color: var(--cyan);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(122, 92, 255, 0.1));
  box-shadow: var(--glow-cyan);
}
.cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.cc-head b { font-family: var(--font-h); font-size: 13px; letter-spacing: 1.5px; color: #eaffff; }
.cc-icon { font-size: 18px; filter: drop-shadow(0 0 6px var(--cyan)); }
.cc-role { font-size: 11px; letter-spacing: 1.5px; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.class-card ul { list-style: none; }
.class-card li { font-size: 13px; color: #9fdcec; padding: 1px 0; }
.class-card li i { font-style: normal; color: #6fa8b8; }
.cc-stats { display: flex; gap: 14px; margin-top: 8px; }
.stat label { font-size: 9px; letter-spacing: 1px; color: #58a8ba; font-weight: 700; }
.stat-bar { width: 72px; height: 6px; background: rgba(10, 20, 32, 0.9); border: 1px solid rgba(120, 200, 220, 0.25); margin-top: 2px; }
.stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: 0 0 6px rgba(0, 240, 255, 0.6); }

.landing-footer {
  margin-top: 26px; text-align: center; font-size: 12px; color: #4d8899; letter-spacing: 0.5px; line-height: 1.7;
}
.landing-footer b { color: #7fd8e8; }

/* ═══════════ LOBBY ═══════════ */
.lobby-inner { width: min(640px, 94vw); padding: 40px 0; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lobby-head h2 { font-family: var(--font-h); font-size: 20px; letter-spacing: 3px; color: #eaffff; text-shadow: var(--glow-cyan); }
.lobby-count { font-family: var(--font-h); font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: 2px; }
.lobby-roster {
  min-height: 200px; max-height: 46vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 5px;
  padding: 8px;
}
.roster-empty { text-align: center; color: #4d8899; padding: 50px 0; font-size: 14px; letter-spacing: 1px; }
.roster-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid rgba(0, 240, 255, 0.08);
}
.roster-row:last-child { border-bottom: none; }
.rr-info { display: flex; flex-direction: column; gap: 2px; }
.rr-name { font-family: var(--font-h); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #eaffff; }
.rr-meta { font-size: 11px; color: #6fa8b8; display: flex; gap: 10px; }
.rr-cls { color: var(--gold); }
.rr-status-battle { color: var(--magenta); font-weight: 700; }
.challenge-btn {
  font-family: var(--font-h); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 8px 12px; border-radius: 3px; cursor: pointer;
  color: #031015; background: linear-gradient(90deg, var(--magenta), #ff5aa0);
  box-shadow: 0 0 14px rgba(255, 45, 120, 0.4); border: none; transition: all 0.15s;
}
.challenge-btn:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(255, 45, 120, 0.6); }
.challenge-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.lobby-actions { display: flex; gap: 10px; margin-top: 14px; }
.lobby-status-line { margin-top: 12px; min-height: 18px; font-size: 13px; color: var(--gold); letter-spacing: 1px; }

/* ═══════════ CHALLENGE MODAL ═══════════ */
#challenge-modal { z-index: 60; background: rgba(3, 5, 10, 0.7); }
.challenge-box {
  width: min(480px, 92vw);
  background: linear-gradient(160deg, rgba(30, 4, 16, 0.95), rgba(8, 12, 26, 0.95));
  border: 2px solid var(--magenta); border-radius: 6px;
  box-shadow: 0 0 50px rgba(255, 45, 120, 0.45);
  padding: 26px; text-align: center;
  animation: challengeShake 0.4s ease-out;
}
@keyframes challengeShake {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
.challenge-siren {
  font-family: var(--font-h); font-size: 16px; font-weight: 900; letter-spacing: 3px;
  color: var(--magenta); text-shadow: 0 0 18px rgba(255, 45, 120, 0.9);
  animation: sirenBlink 0.8s ease-in-out infinite; margin-bottom: 14px;
}
@keyframes sirenBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.challenge-text { font-size: 15px; line-height: 1.6; color: #ffd7e5; margin-bottom: 20px; }
.challenge-text b { color: #fff; font-family: var(--font-h); letter-spacing: 1px; }
.challenge-actions { display: flex; gap: 12px; justify-content: center; }
.challenge-timer { height: 4px; background: rgba(255, 45, 120, 0.15); border-radius: 2px; margin-top: 18px; overflow: hidden; }
#challenge-timer-fill { height: 100%; width: 100%; background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

/* ═══════════ ROUND OVERLAY ═══════════ */
#round-overlay { z-index: 55; background: rgba(3, 5, 10, 0.78); }
.round-inner { text-align: center; padding: 30px; }
.round-title {
  font-family: var(--font-h); font-size: clamp(30px, 6vw, 52px); font-weight: 900; letter-spacing: 6px;
  text-shadow: 0 0 30px currentColor;
}
.round-title.win { color: var(--green); }
.round-title.lose { color: var(--crimson); }
.round-title.draw { color: var(--gold); }
.round-score { font-family: var(--font-h); font-size: 30px; font-weight: 900; color: #eaffff; margin: 12px 0 4px; letter-spacing: 4px; }
.round-sub { color: #6fa8b8; font-size: 14px; margin-bottom: 24px; letter-spacing: 1px; }
.round-actions { display: flex; gap: 12px; justify-content: center; }
.rematch-wait { margin-top: 16px; color: var(--gold); font-size: 13px; letter-spacing: 2px; animation: sirenBlink 1s infinite; }

/* ═══════════ PAUSE ═══════════ */
#pause-overlay { z-index: 54; background: rgba(3, 5, 10, 0.72); }
.pause-box { text-align: center; padding: 30px; }
.pause-title { font-family: var(--font-h); font-size: 26px; font-weight: 900; letter-spacing: 4px; color: var(--cyan); text-shadow: var(--glow-cyan); }
.pause-note { color: #6fa8b8; margin: 12px 0 22px; font-size: 14px; }

/* ═══════════ TOASTS ═══════════ */
#toast-container {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  font-family: var(--font-h); font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  background: rgba(6, 14, 26, 0.92); color: #bfefff;
  border: 1px solid var(--panel-border); border-radius: 3px;
  padding: 9px 18px; box-shadow: var(--glow-cyan);
  animation: toastIn 0.25s ease-out;
}
.toast.bad { border-color: rgba(255, 45, 120, 0.6); color: #ffd7e5; box-shadow: 0 0 14px rgba(255, 45, 120, 0.4); }
.toast.good { border-color: rgba(56, 255, 156, 0.5); color: #c9ffe4; }
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═══════════ BOOT ═══════════ */
#boot-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg0);
  transition: opacity 0.5s ease-out;
}
#boot-overlay.done { opacity: 0; pointer-events: none !important; }
.boot-box { text-align: center; }
.boot-logo { font-family: var(--font-h); font-size: 22px; font-weight: 900; letter-spacing: 5px; color: var(--cyan); text-shadow: var(--glow-cyan); }
#boot-status { margin: 14px 0 10px; font-size: 12px; letter-spacing: 2px; color: #58a8ba; }
.boot-bar { width: 260px; height: 4px; background: rgba(0, 240, 255, 0.12); border-radius: 2px; overflow: hidden; margin: 0 auto; }
#boot-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: var(--glow-cyan); transition: width 0.3s; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(6, 12, 22, 0.5); }
::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.3); border-radius: 4px; }

@media (max-width: 768px) {
  .hud-panel { min-width: 150px; padding: 6px 8px 8px; }
  #match-timer { font-size: 18px; }
  .bar-row label { width: 24px; font-size: 8px; }
  .pip-center { display: none; }
  #tactical-readout { bottom: 180px; }
  #event-feed { top: 150px; max-width: 220px; }
  .tb-left .logo { font-size: 11px; }
}