:root {
  --red: #e63946;
  --red-dark: #b71c1c;
  --green: #2a9d8f;
  --green-bright: #00e676;
  --black: #0a0a0a;
  --dark: #121212;
  --white: #f1faee;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; background:var(--black); font-family:'Rajdhani',sans-serif; color:var(--white); }
#app { min-height:100%; min-height:100dvh; display:flex; justify-content:center; align-items:stretch; }
.screen { width:100%; min-height:100%; min-height:100dvh; display:flex; justify-content:center; align-items:flex-start; padding:16px; padding-bottom:24px; overflow-y:auto; }
.screen.hidden { display:none !important; }
.lobby-card {
  width:100%; max-width:440px; margin:auto;
  background:linear-gradient(160deg,#1a1a1a,#0d0d0d);
  border:2px solid var(--red); border-radius:16px; padding:22px 18px;
  box-shadow:0 0 18px rgba(230,57,70,.35); text-align:center;
}
.logo-mark { width:48px; height:48px; margin-bottom:8px; }
.logo h1 { font-family:'Orbitron',sans-serif; font-size:clamp(22px,6vw,32px); font-weight:900; line-height:1.1; letter-spacing:1px; }
.logo h1 span { color:var(--red); }
.tagline { font-size:13px; color:var(--green); margin:6px 0 16px; }
.stats-bar { display:flex; gap:8px; margin-bottom:14px; }
.stat { flex:1; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:10px; padding:8px 4px; }
.stat-num { display:block; font-family:'Orbitron',sans-serif; font-size:16px; color:var(--green-bright); }
.stat-label { font-size:10px; color:#888; }
.form-group { text-align:left; margin-bottom:12px; }
.form-group label { display:block; font-size:12px; letter-spacing:1px; color:var(--green); margin-bottom:5px; font-weight:600; }
input[type="text"] {
  width:100%; padding:11px 12px; background:#0a0a0a; border:1px solid #333; border-radius:8px;
  color:var(--white); font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600; outline:none;
}
input[type="text"]:focus { border-color:var(--red); }
.options-box { text-align:left; background:#101010; border:1px solid #2a2a2a; border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.check-label { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#ccc; cursor:pointer; margin:6px 0; }
.check-label input { margin-top:3px; }
.btn-group { display:flex; gap:8px; margin-top:6px; }
.btn {
  font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; letter-spacing:1px;
  padding:12px 14px; border:none; border-radius:8px; cursor:pointer; text-transform:uppercase; flex:1;
}
.btn.primary { background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; }
.btn.primary:disabled { opacity:.4; cursor:not-allowed; }
.btn.secondary { background:transparent; color:var(--green); border:1px solid var(--green); }
.divider { display:flex; align-items:center; margin:16px 0 10px; color:#666; font-size:12px; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:#333; }
.divider span { padding:0 10px; }
.credit { margin-top:16px; font-size:12px; color:#666; }
.credit strong { color:var(--green); }
.rooms-list { text-align:left; max-height:220px; overflow-y:auto; }
.room-item { display:flex; justify-content:space-between; align-items:center; background:#151515; border-radius:8px; padding:10px; margin-bottom:6px; gap:8px; }
.room-item .host-name { font-weight:700; font-size:14px; }
.room-item .lock { font-size:11px; color:#888; }
.room-item .btn { flex:0 0 auto; padding:8px 12px; font-size:11px; }
.muted { color:#777; font-size:13px; }
.api-warn { background:#2a1515; border:1px solid var(--red); color:#ffb4b4; padding:8px; border-radius:8px; font-size:12px; margin-bottom:8px; }
.join-row { display:flex; gap:8px; }
.join-row input { flex:1; text-transform:uppercase; }
.copy-row { display:flex; gap:8px; margin-bottom:12px; }
.copy-row input { flex:1; text-align:center; letter-spacing:2px; font-family:'Orbitron',sans-serif; font-weight:700; }
.copied { background:var(--green) !important; }
.hidden { display:none !important; }
.room-card h2 { font-family:'Orbitron',sans-serif; font-size:20px; color:var(--red); }
.hint { font-size:13px; color:#888; margin:4px 0 12px; }
.players-list { background:#0a0a0a; border-radius:10px; padding:10px; margin-bottom:12px; min-height:70px; text-align:left; }
.player-row { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:8px; margin-bottom:5px; background:#151515; }
.player-row .badge { font-size:10px; padding:3px 7px; border-radius:12px; background:var(--red); }
.player-row.host .badge { background:var(--green); }
.room-status { font-size:14px; color:var(--green); margin-bottom:12px; }

#game-screen { padding:0; align-items:stretch; overflow:hidden; }
#game-container {
  position:relative; width:100%; max-width:520px; height:100dvh; margin:0 auto;
  background:var(--dark); display:flex; flex-direction:column; overflow:hidden;
}
#hud {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 10px; background:#111; border-bottom:2px solid var(--red); flex-shrink:0;
  gap:8px;
}
.hud-item { display:flex; flex-direction:column; min-width:56px; }
.hud-item.center { flex:1; text-align:center; align-items:center; min-width:0; }
.hud-item.right { text-align:right; align-items:flex-end; }
.label { font-size:10px; letter-spacing:1px; color:var(--green); }
#score,#lives {
  font-family:'Rajdhani',sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:.4px;
  font-variant-numeric: tabular-nums;
  line-height:1.1;
}
#vs-info { font-size:12px; font-weight:700; }
#live-scores { font-family:'Rajdhani',sans-serif; font-size:13px; color:var(--green-bright); line-height:1.3; max-width:100%; }
#gameCanvas { display:block; width:100%; flex:1; background:#0c0c0c; touch-action:none; cursor:pointer; }
.mobile-only { display:none; text-align:center; font-size:12px; color:#888; padding:4px; flex-shrink:0; }
.overlay { position:absolute; inset:0; background:rgba(0,0,0,.9); display:flex; justify-content:center; align-items:center; z-index:20; }
#pause-overlay { z-index:30; }
#game-over { z-index:40; }
.overlay-content { text-align:center; padding:24px 18px; max-width:90%; border:2px solid var(--red); border-radius:12px; background:#111; }
.overlay-content h2 { font-family:'Orbitron',sans-serif; color:var(--red); margin-bottom:10px; }
#final-results { margin-bottom:16px; }
#final-results .winner { color:var(--green-bright); font-weight:700; font-size:18px; margin-bottom:8px; }

@media (max-width: 900px) {
  .mobile-only { display:block; }
  .lobby-card { border-radius:12px; }
  #score,#lives { font-size:20px; }
}
@media (min-width: 900px) {
  #game-container { max-height:100dvh; border-left:2px solid var(--red); border-right:2px solid var(--red); }
}

.link-btn {
  margin-top: 6px;
  background: none;
  border: none;
  color: #888;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.link-btn:hover { color: var(--green); }

.quit-btn {
  margin-top: 4px;
  background: transparent;
  border: 1px solid #555;
  color: #ccc;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: Orbitron, sans-serif;
  text-transform: uppercase;
}
.quit-btn:hover { border-color: var(--red); color: #fff; }
.overlay-content .btn.secondary { margin-top: 8px; }

.mode-pick { margin-top: 8px; padding-top: 8px; border-top: 1px solid #2a2a2a; }
.mode-label { display:block; font-size:12px; color: var(--green); margin-bottom: 4px; font-weight: 700; }
.options-title { font-size:12px; letter-spacing:1px; color:var(--green); font-weight:700; margin-bottom:2px; }
.options-sub, .solo-hint, .mode-help { font-size:12px; color:#888; line-height:1.35; margin:4px 0 8px; text-align:left; }
.solo-hint { text-align:center; margin:8px 0 10px; }
.mode-help { margin:6px 0 0; color:#b8f2e6; }
.mode-chip, .mode-badge {
  display:inline-block;
  font-size:11px;
  color:#b8f2e6;
  border:1px solid #2a9d8f;
  border-radius:999px;
  padding:2px 8px;
  margin:4px 0 8px;
}
.mode-badge { margin:2px 0 0; }
#live-scores { max-width:100%; }
.celebration { font-size: 42px; animation: pop 0.6s ease; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.podium { margin: 8px 0 12px; }
.podium-row { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; margin: 5px 0; border-radius: 8px; background:#151515; }
.podium-row.gold { border:1px solid #ffd700; background:#2a2308; }
.podium-row.silver { border:1px solid #c0c0c0; }
.podium-row.bronze { border:1px solid #cd7f32; }
.rank { font-family: Orbitron, sans-serif; color: var(--green-bright); margin-right: 8px; }
.wait-lives { color:#e63946; font-size: 12px; }

.splash-soft {
  background: rgba(0,0,0,.45);
  pointer-events: none;
}
.splash-soft .splash-card {
  pointer-events: none;
  background: rgba(12,12,12,.82);
  border: 2px solid var(--red);
  max-width: 92%;
}
.splash-hint { color:#888; font-size:12px; margin-top:8px; }
.glow-name { color: #fff; text-shadow: 0 0 8px #00e676, 0 0 14px #e63946; }
#game-over.final-shot .overlay-content {
  background: linear-gradient(160deg,#1a1208,#0a0a0a 55%,#10201c);
  border-color: #ffd700;
  box-shadow: 0 0 24px rgba(255,215,0,.25);
}

.turn-banner {
  margin-top: 4px;
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: #b8f2e6;
  text-shadow: 0 0 8px rgba(42,157,143,.8);
}
.turn-banner.mine { color: #fff; text-shadow: 0 0 10px #e63946, 0 0 16px #2a9d8f; }
.splash-soft {
  align-items: flex-start;
  padding-top: 64px;
  background: transparent;
}
.splash-soft .splash-card {
  max-width: min(420px, 92%);
  padding: 12px 14px;
  background: rgba(12,12,12,.78);
}
#level-up.overlay, #game-over.overlay.waiting {
  background: rgba(0,0,0,.35);
}

.conn-status{font-size:12px;color:#888;margin:6px 0 0;text-align:center;}