/* ShadowPulse — HUD & game-screen styling.
   Menus/lobby are styled with Tailwind utilities in index.html; this file
   covers the canvas overlay HUD which is easier to express in plain CSS. */

:root {
  --neon: #39f6c8;
  --danger: #ff4d6d;
  --warn: #ffc857;
  --accent: #7c8cff;
  --ink: #05060c;
  --panel: #0c1020;
  --edge: #1b2440;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

.glow-text { text-shadow: 0 0 18px rgba(57, 246, 200, 0.55); }

/* Class picker cards (menu + lobby) */
.class-card {
  cursor: pointer;
  border: 1px solid var(--edge);
  border-radius: 0.6rem;
  padding: 0.6rem 0.4rem;
  text-align: center;
  background: rgba(5, 6, 12, 0.6);
  transition: all 0.15s ease;
}
.class-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.class-card.selected { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 18px rgba(57, 246, 200, 0.25); }
.class-card .cc-icon { width: 26px; height: 26px; margin: 0 auto 0.25rem; color: var(--neon); }
.class-card .cc-name { font-weight: 700; font-size: 0.8rem; }
.class-card .cc-blurb { font-size: 0.6rem; color: #8b93b0; margin-top: 0.15rem; line-height: 1.2; }

/* Lobby player row */
.player-row { display: flex; align-items: center; gap: 0.6rem; background: rgba(5,6,12,0.5); border: 1px solid var(--edge); border-radius: 0.6rem; padding: 0.55rem 0.8rem; }
.player-row .pr-dot { width: 9px; height: 9px; border-radius: 50%; background: #44506f; }
.player-row.ready .pr-dot { background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.player-row .pr-name { font-weight: 600; }
.player-row .pr-tag { font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; background: var(--edge); color: #aeb6d6; }
.chat-line { line-height: 1.35; }
.chat-line .cl-from { color: var(--accent); font-weight: 600; }
.chat-line.system { color: #6b7494; font-style: italic; }

/* ---------------- Game canvas + HUD ---------------- */
#game-canvas { display: block; width: 100vw; height: 100vh; background: #05060c; cursor: crosshair; }
#screen-game { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

#hud { position: absolute; inset: 0; pointer-events: none; font-family: 'Inter', system-ui, sans-serif; }

.hud-top { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; }
.hud-pill { background: rgba(12,16,32,0.78); border: 1px solid var(--edge); border-radius: 999px; padding: 8px 18px; display: flex; flex-direction: column; align-items: center; min-width: 92px; backdrop-filter: blur(6px); }
.hud-label { font-size: 0.55rem; letter-spacing: 0.15em; color: #7b84a6; }
.hud-value { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.1rem; }
.hud-banner { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.12em; padding: 6px 16px; border-radius: 8px; font-size: 0.85rem; min-width: 120px; text-align: center; }
.hud-banner.seeker { color: var(--danger); border: 1px solid rgba(255,77,109,0.4); background: rgba(255,77,109,0.08); }
.hud-banner.hider { color: var(--neon); border: 1px solid rgba(57,246,200,0.4); background: rgba(57,246,200,0.08); }

.hud-alert { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); background: rgba(255,77,109,0.15); border: 1px solid var(--danger); color: #ffd0d8; padding: 8px 20px; border-radius: 10px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; animation: alertPop 0.3s ease; box-shadow: 0 0 24px rgba(255,77,109,0.35); }
@keyframes alertPop { from { transform: translate(-50%, -8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.hud-abilities { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; }
.ability { position: relative; width: 66px; height: 66px; background: rgba(12,16,32,0.82); border: 1px solid var(--edge); border-radius: 14px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.ability.ready { border-color: var(--neon); box-shadow: 0 0 16px rgba(57,246,200,0.3); }
.ability.charging { border-color: var(--warn); }
.ability-key { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; background: var(--edge); border-radius: 6px; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ability.ready .ability-key { background: var(--neon); color: var(--ink); }
.ability-icon { width: 34px; height: 34px; color: #cdd4f0; }
.ability.ready .ability-icon { color: var(--neon); }
.ability-cd { position: absolute; inset: 0; border-radius: 14px; background: rgba(5,6,12,0.72); display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.1rem; transform-origin: bottom; }
.ability-name { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 0.6rem; color: #8b93b0; letter-spacing: 0.05em; }

.hud-hint { position: absolute; bottom: 12px; right: 16px; font-size: 0.65rem; color: #5a6488; }

.scoreboard { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(8,11,24,0.94); border: 1px solid var(--edge); border-radius: 14px; padding: 18px 22px; min-width: 360px; }
.scoreboard h4 { margin: 0 0 10px; font-family: 'Orbitron'; letter-spacing: 0.1em; font-size: 0.8rem; color: #8b93b0; }
.sb-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 5px 8px; border-radius: 6px; align-items: center; }
.sb-row.you { background: rgba(124,140,255,0.12); }
.sb-row .sb-role { font-size: 0.6rem; padding: 1px 6px; border-radius: 4px; }
.sb-role.seeker { background: rgba(255,77,109,0.18); color: var(--danger); }
.sb-role.hider { background: rgba(57,246,200,0.18); color: var(--neon); }
.sb-row.dead { opacity: 0.45; }

.countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(5,6,12,0.55); }
.countdown .cd-role { font-family: 'Orbitron'; font-size: 2rem; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 8px; }
.countdown .cd-num { font-family: 'Orbitron'; font-size: 6rem; font-weight: 900; line-height: 1; }
.countdown .cd-sub { color: #8b93b0; margin-top: 10px; }

.go-row { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 6px; background: rgba(5,6,12,0.5); }
.go-row .go-rank { color: #6b7494; width: 1.5rem; }