/* Self-hosted typefaces — served from /static/fonts/ so the CSP doesn't
   need to whitelist Google's CDN and the page works without the public
   internet (LAN deploys, offline dev). Both fonts ship under the SIL
   Open Font License (OFL); the woff2 files in frontend/fonts/ are the
   exact subsets Google delivers for Latin + Latin-ext. */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/press-start-2p-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/press-start-2p-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/vt323-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/vt323-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

/* Make `[hidden]` win against any later display rules — without this, a
   class like `.user-widget { display: flex }` would override the browser's
   default `[hidden] { display: none }` and leak through every scene change. */
[hidden] { display: none !important; }

/* Scene system: only the .active section is shown. */
.scene { display: none; }
.scene.active { display: block; }
.scene--login.active { display: flex; justify-content: center; margin-top: 2rem; }
.scene--lobby.active { display: block; }
.scene--game.active  { display: grid; grid-template-columns: 240px 1fr 240px;
                        gap: 1rem; align-items: start; }
.scene--game .game-toolbar { grid-column: 1 / -1; padding-top: 0.4rem; }
.scene--maintenance.active { display: flex; justify-content: center; margin-top: 2rem; }

.maintenance-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(60, 30, 30, 0.85), rgba(40, 20, 20, 0.90));
  border: 1px solid #c97a4a;
  border-radius: 16px;
  padding: 1.8rem 1.6rem 1.6rem;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 180, 120, 0.10), 0 0 30px rgba(255, 120, 60, 0.18);
}
.maintenance-card h1 {
  margin: 0.4rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.10em;
  color: #ffd5a8;
}
.maintenance-card p  { margin: 0 0 1rem; line-height: 1.5; color: #f0d9c0; }

:root {
  /* Palette pulled from Logo.png — deep navy base with electric-blue accents. */
  --bg-0: #07142b;
  --bg-1: #0d1f3f;
  --bg-2: #142a55;
  --bg-3: #1e3a72;
  --line: #2a4a8c;
  --text: #eef3ff;
  --text-dim: #93a4c8;
  --text-faint: #5b7099;
  --accent: #3b9eff;
  --accent-2: #6dc6ff;
  --hp: #ff6b6b;
  --mana: #5cb6ff;
  --cd: #ffc84d;
  --good: #59d99c;
  --warn: #ff9d4a;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px rgba(59, 158, 255, 0.18);
  --radius: 0.75rem;
  /* BizaGames typography (famarcade.fun-inspired):
     - Display = Press Start 2P (8-bit pixel) for titles, brand, big buttons.
     - Body    = VT323 (CRT terminal) for paragraphs, lists, hints.
     Palette is preserved untouched — only the type system is new. */
  --font-display: "Press Start 2P", "Courier New", ui-monospace, monospace;
  --font-body:    "VT323", "Courier New", ui-monospace, monospace;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% -10%, rgba(59, 158, 255, 0.18), transparent 55%),
    radial-gradient(circle at 90% 110%, rgba(109, 198, 255, 0.10), transparent 55%),
    radial-gradient(circle at 50% 60%, rgba(20, 42, 85, 0.45), transparent 60%),
    var(--bg-0);
  color: var(--text);
  /* VT323 is much taller per em than Inter, so 1.25rem keeps prior body sizing. */
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.35;
  min-height: 100vh;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* No global text-stroke: pixel-bitmap fonts (Press Start 2P) get blurry
     edge artifacts when any stroke is applied to their cells. The visual
     "weight" we want comes from font-weight 400 + the bitmap design
     itself, not a synthesized outline. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

/* Headings + brand use the pixel display font; smaller numbers because
   Press Start 2P is significantly heavier than Inter at the same px size. */
h1, h2, h3, h4, h5, h6,
.brand-text,
.auth-tabs .tab,
.primary,
.lang-current,
button,
kbd,
#conn-status {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Inputs and chat use VT323 for legibility — the pixel font would chew up
   typed text. Keep them slightly larger than body so iOS doesn't auto-zoom. */
.field input,
.chat-form input,
.chat-msg .body,
#event-log,
.player-card .stat span:last-child {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}

/* Animated diamond-grid background. Sits behind the body's radial-gradient
   atmosphere and all UI; pointer-events: none so it never intercepts clicks. */
#bg-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 3rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  background: linear-gradient(90deg, #ffffff 0%, #b6d2ff 55%, #3b9eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 { color: var(--text); font-size: 0.95rem; letter-spacing: 0.10em; }
h3 { color: var(--text); font-size: 0.85rem; letter-spacing: 0.08em; }

/* Press Start 2P benefits from a small font-size relative to layout —
   inputs, hints and chat keep VT323's larger comfortable size. */
.field > span { font-family: var(--font-display); font-size: 0.65rem; letter-spacing: 0.10em; }
.muted, .hint { letter-spacing: 0.08em; }

/* ---------- Branding ----------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  line-height: 1;
  color: var(--text);
}
.brand-logo {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(59, 158, 255, 0.30));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.brand:hover .brand-logo {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 6px 20px rgba(59, 158, 255, 0.45));
}
.brand-text {
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #ffffff 0%, #b6d2ff 55%, #3b9eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(59, 158, 255, 0.25);
}

.auth-title {
  font-family: var(--font-display);
  text-align: center;
  margin: 0.4rem 0 0.1rem;
  font-size: 1.45rem;
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, #ffffff 0%, #b6d2ff 55%, #3b9eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(59, 158, 255, 0.30);
}
.auth-subtitle {
  text-align: center;
  margin: 0 0 1rem;
  color: var(--text-dim);
  font-size: 1rem;
  letter-spacing: 0.18em;
}

.auth-hero {
  display: block;
  /* Bigger central logo. ``min(...)`` caps it on phones so the image
     never overflows narrow viewports while still scaling up nicely on
     wide cards. */
  width: min(340px, 70vw);
  height: auto;
  margin: -0.6rem auto 0.5rem;
  /* Layered glows give an additive "bloom" halo around the logo. */
  filter:
    drop-shadow(0 0 6px rgba(108, 198, 255, 0.55))
    drop-shadow(0 0 22px rgba(59, 158, 255, 0.50))
    drop-shadow(0 0 48px rgba(59, 158, 255, 0.30));
  /* Two intersecting linear gradients feather all four sides equally — a
     pure radial mask fades the corners but leaves the top/bottom/left/right
     edges visibly hard. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;     /* WebKit/Blink */
          mask-composite: intersect;     /* Standard */
}

.muted { color: var(--text-dim); font-size: 0.8rem; }

/* ---------- Auth (login / register) -------------------------------------- */

.user-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

#auth {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background:
    linear-gradient(180deg, rgba(20, 42, 85, 0.88), rgba(13, 31, 63, 0.94));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem 1.5rem;
  box-shadow:
    var(--shadow),
    var(--shadow-glow),
    inset 0 1px 0 rgba(108, 198, 255, 0.10);
  backdrop-filter: blur(6px);
}

.auth-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
  padding: 0.25rem;
  background: rgba(7, 20, 43, 0.55);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
}
.auth-tabs .tab {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  /* Bigger, more legible tab labels — the previous 0.78rem made
     "INICIAR SESIÓN" / "CREAR CUENTA" feel cramped against the auth
     card width. Padding bumped to keep the tab proportional to the
     larger text. */
  padding: 0.7rem 0.5rem;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.06em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.auth-tabs .tab:hover { color: var(--text); background: rgba(59, 158, 255, 0.06); }
.auth-tabs .tab.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(59, 158, 255, 0.22), rgba(59, 158, 255, 0.10));
  border-color: rgba(108, 198, 255, 0.45);
  box-shadow: 0 0 12px rgba(59, 158, 255, 0.18) inset;
}

.auth-form { display: flex; flex-direction: column; gap: 0.95rem; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field > span {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-family: var(--font-display);
}
.field input[type="text"],
.field input[type="password"] {
  background: rgba(7, 20, 43, 0.70);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 0.45rem;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 1.05rem;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.field input::placeholder { color: var(--text-faint); }
.field input:hover { border-color: rgba(108, 198, 255, 0.40); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(7, 20, 43, 0.85);
  box-shadow: 0 0 0 2px rgba(108, 140, 255, 0.20);
}

.pw-row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  /* The row is a ``<span>`` (the auth markup wraps the field+row in a
     ``<label>``); flex containers nested inside flex columns inherit
     ``min-width: auto`` which lets their children push the row past
     its parent. ``min-width: 0`` allows the row to actually obey the
     card's width constraint and forces flex children to shrink. */
  min-width: 0;
  width: 100%;
}
.pw-row input {
  /* ``flex: 1`` only really shrinks an input when its ``min-width``
     can drop below the input's intrinsic content size. Without
     ``min-width: 0`` the ``size=20`` default keeps the input ~240 px
     wide and shoves the SHOW button outside the auth card on
     narrower viewports. */
  flex: 1;
  min-width: 0;
}
.pw-toggle {
  background: rgba(7, 20, 43, 0.70);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  padding: 0 0.85rem;
  min-width: 92px;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.pw-toggle:hover {
  color: var(--text);
  border-color: rgba(108, 198, 255, 0.45);
  background: rgba(20, 42, 85, 0.80);
}

.auth-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.auth-options label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.04em;
}
.auth-options input[type="checkbox"] {
  /* Use the page accent for native checkbox tick — supported on all
     modern browsers. Falls back to the system colour on older ones. */
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
}

.auth-error {
  background: rgba(249, 115, 115, 0.1);
  border: 1px solid rgba(249, 115, 115, 0.4);
  color: #ffb6b6;
  border-radius: 0.45rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.84rem;
  margin: 0;
}

.primary {
  background: linear-gradient(180deg, #5cb6ff, #3b9eff 55%, #1f6fcf);
  color: white;
  border: 1px solid rgba(108, 198, 255, 0.6);
  border-radius: 0.5rem;
  padding: 0.85rem 0.7rem;
  font: inherit;
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.10em;
  cursor: pointer;
  margin-top: 0.4rem;
  box-shadow:
    0 4px 18px rgba(59, 158, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.05s, filter 0.15s, box-shadow 0.2s;
}
.primary:hover {
  filter: brightness(1.08);
  box-shadow:
    0 6px 22px rgba(59, 158, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.3); }

.google-row { margin-top: 1rem; }
.divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-faint);
  font-size: 0.75rem;
  margin: 0.8rem 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth-card .hint { color: var(--text-faint); font-size: 0.78rem; margin: 0.8rem 0 0; line-height: 1.45; display: block; }

/* ---------- Avatars ------------------------------------------------------ */

.avatar {
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 72px; height: 72px; }

.avatar-row { display: flex; align-items: center; gap: 0.85rem; }
.avatar-controls { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.avatar-controls .muted { font-size: 0.75rem; }

#conn-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
#conn-status::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 8px currentColor;
}
#conn-status[data-state="connected"]    { color: var(--good); }
#conn-status[data-state="connected"]::before    { background: var(--good); }
#conn-status[data-state="creating"]     { color: var(--warn); }
#conn-status[data-state="creating"]::before     { background: var(--warn); }
#conn-status[data-state="disconnected"] { color: var(--hp); }
#conn-status[data-state="disconnected"]::before { background: var(--hp); }

/* Lobby ------------------------------------------------------------------- */
#lobby {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.85rem 1.1rem;
  align-items: end;
  box-shadow: var(--shadow);
}
#lobby h2 {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#lobby label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

select, button {
  font: inherit;
  padding: 0.6rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.05s, filter 0.15s;
}
select { appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
select:hover, select:focus { border-color: var(--accent); outline: none; }

button {
  cursor: pointer;
  background: linear-gradient(180deg, #5cb6ff, #3b9eff 55%, #1f6fcf);
  border: 1px solid #5cb6ff;
  font-weight: 400;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(59, 158, 255, 0.35);
  padding: 0.62rem 1.1rem;
}
button:hover  { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: default; filter: grayscale(0.3); }

.hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
}
kbd {
  background: var(--bg-3);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text);
}

/* Play layout ------------------------------------------------------------- */
main#play {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 1rem;
  align-items: start;
}

#hud {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: var(--shadow);
}

.player-card {
  position: relative;
  padding: 0.55rem 0.75rem 0.6rem;
  margin-bottom: 0.65rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.025);
  border-left: 3px solid var(--player-color, var(--accent));
}
.player-card:last-of-type { margin-bottom: 0.4rem; }
.player-card.dead { opacity: 0.55; filter: grayscale(0.55); }
.player-card.you::after {
  content: "you";
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.06rem 0.4rem;
  border-radius: 0.25rem;
}
.player-card .name {
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  margin-bottom: 0.25rem;
}
.player-card .stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.player-card .stat span:last-child {
  color: var(--text);
  font-family: ui-monospace, monospace;
  text-transform: none;
  letter-spacing: 0;
}
.player-card .perks {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}
.player-card .perks span {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.08rem 0.45rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.bar {
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.4rem;
  overflow: hidden;
  margin: 0.18rem 0 0;
}
.bar > .fill {
  height: 100%;
  transition: width 0.12s linear;
  border-radius: inherit;
}
.bar.hp .fill   { background: linear-gradient(90deg, #ff5757, #f97373); }
.bar.mana .fill { background: linear-gradient(90deg, #5470d8, #6c8cff); }
.bar.cd .fill   { background: linear-gradient(90deg, #b88500, #d6a200); }

.tick-line {
  margin-top: 0.6rem;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

/* Game canvas ------------------------------------------------------------- */
/* The buffer is GRID_W * CELL by GRID_H * CELL (13*40 by 11*40 = 520x440,
   ratio 13:11). ``aspect-ratio`` pins the display ratio so cells stay square
   regardless of how wide the 1fr column gets — relying on ``height: auto`` +
   intrinsic ratio is brittle when the canvas buffer is resized by JS after
   layout. ``max-width`` keeps the canvas from blowing up on wide monitors so
   it sits comfortably alongside the HUD / event log columns. */
#game {
  display: block;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 13 / 11;
  height: auto;
  margin: 0 auto;
  background: #0c0d11;
  border-radius: var(--radius);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Event log --------------------------------------------------------------- */
#event-log {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  line-height: 1.55;
  max-height: 460px;
  overflow-y: auto;
  color: var(--text-dim);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#event-log::-webkit-scrollbar { width: 6px; }
#event-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

#event-log .evt {
  margin-bottom: 0.2rem;
  animation: evtIn 0.18s ease;
}
@keyframes evtIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
#event-log .evt .ts { color: var(--text-faint); margin-right: 0.35rem; }
#event-log .evt.kill    { color: var(--hp); }
#event-log .evt.power   { color: var(--mana); }
#event-log .evt.ability { color: #cf8eff; }
#event-log .evt.end     { color: var(--good); font-weight: 400; }

/* ---------- User widget (top-right, fixed) ------------------------------- */

.user-widget {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: linear-gradient(180deg, rgba(30, 58, 114, 0.90), rgba(13, 31, 63, 0.94));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  box-shadow: var(--shadow), var(--shadow-glow);
  min-width: 240px;
  backdrop-filter: blur(6px);
}
.avatar-md { width: 40px; height: 40px; }
.avatar-placeholder { display: inline-block; }
.uw-text { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.uw-line { display: flex; align-items: center; gap: 0.5rem; }
.uw-name { font-weight: 400; color: var(--text); }
.uw-stats { font-size: 0.78rem; color: var(--text-dim); }
.uw-level { color: var(--accent); font-weight: 400; }
.uw-xp-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
}
.uw-xp-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6c8cff, #b6c2ff, #6c8cff);
  background-size: 200% 100%;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: xp-bar-shimmer 2s linear infinite;
  box-shadow: 0 0 8px rgba(108, 140, 255, 0.6);
}
@keyframes xp-bar-shimmer {
  to { background-position: 200% 0; }
}
.uw-xp-text { font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
.uw-net { font-size: 0.72rem; color: var(--text-faint); }
.uw-ping {
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(89, 217, 156, 0.10);
  color: #8de2bb;
  border: 1px solid rgba(89, 217, 156, 0.25);
}
.uw-ping.warn { background: rgba(255, 200, 77, 0.10); color: #ffd584; border-color: rgba(255, 200, 77, 0.30); }
.uw-ping.bad  { background: rgba(255, 107, 107, 0.10); color: #ff9494; border-color: rgba(255, 107, 107, 0.30); }
.uw-ping.dim  { color: var(--text-faint); background: transparent; border-color: var(--line); }

/* ---------- Lobby scene -------------------------------------------------- */

.lobby-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.1rem;
  margin-top: 0.5rem;
}
.lobby-card {
  background: linear-gradient(180deg, rgba(20, 42, 85, 0.85), rgba(13, 31, 63, 0.90));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow), var(--shadow-glow);
  backdrop-filter: blur(4px);
}
.lobby-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lobby-card h2 { margin: 0; font-size: 0.95rem; letter-spacing: 0.12em; }

.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 460px;
  overflow-y: auto;
}
.rank-row {
  display: grid;
  /* pos | avatar | username | level | total points | per-game points */
  grid-template-columns: 36px 28px 1fr auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  background: var(--bg-2);
  border: 1px solid transparent;
  font-size: 0.88rem;
  opacity: 0;
  transform: translateY(8px);
  animation: rank-row-in 0.25s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: calc(var(--index, 0) * 0.03s);
}
@keyframes rank-row-in {
  to { opacity: 1; transform: translateY(0); }
}
.rank-row.is-me {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(108, 140, 255, 0.10), var(--bg-2));
}
.rank-pos { color: var(--text-faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.rank-name { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-lv { color: var(--accent); font-weight: 400; font-size: 0.82rem; }
.rank-pts { font-weight: 400; font-variant-numeric: tabular-nums; }
.rank-pts-game { font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Survival score HUD — top-center, sits above the canvas. */
.score-hud {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  user-select: none;
}
.score-hud-points {
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s ease-out;
}
.score-hud-points.bump {
  animation: score-bump 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes score-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); color: var(--accent, #6CC6FF); text-shadow: 0 0 12px rgba(108, 198, 255, 0.6); }
  100% { transform: scale(1); }
}
.score-hud-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-hud-tier {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 4px 10px;
  border-radius: 0.45rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  /* bg/fg are set inline by ScoreHud.update() from the tier color table. */
  background: #6B7280;
  color: #FFFFFF;
}
.score-hud-tier-num  { font-variant-numeric: tabular-nums; opacity: 0.85; }
.score-hud-tier-name { text-transform: uppercase; }
.score-hud-tier-frac { opacity: 0.75; font-size: 0.72rem; }
.score-hud-wave {
  padding: 4px 10px;
  border-radius: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #ff7a45, #ff5722);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 90, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  animation: wave-pulse 1.5s infinite alternate;
}
@keyframes wave-pulse {
  from { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 90, 0, 0.45); }
  to { transform: scale(1.06); box-shadow: 0 2px 14px rgba(255, 90, 0, 0.7); }
}

/* Per-match seed badge — sits to the LEFT of the language selector
   in the bottom-right corner. ``right`` is calibrated to clear the
   language pill (≈ 90 px wide for ES/EN; the menu pops *upward* so it
   never collides). Vertical center matches the pill's baseline.
   Cross-game: any cabinet whose snapshot includes ``seed`` will surface
   it here through ``SeedHud.update``. */
.seed-hud {
  position: fixed;
  /* Align with the lang selector (right: 16px) plus its rendered width
     plus a small gap. Slightly over-allocated so a longer pill (e.g.,
     "PT" with a 3-letter code variant) still has room. */
  right: 110px;
  bottom: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.72);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seed-hud-value {
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

/* Options gear button — bottom-right, above the language selector
   (which sits at bottom:16px). The panel pops upward with the same
   styling family as the language menu. */
.options-btn {
  position: fixed;
  right: 16px;
  /* lang selector is ~50 px tall; 16 + 50 + 8 spacer = 74 */
  bottom: 74px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 58, 114, 0.92), rgba(13, 31, 63, 0.95));
  border: 1px solid var(--line);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow), 0 0 0 1px rgba(108, 198, 255, 0.05);
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.options-btn:hover  { border-color: var(--accent); }
.options-btn:active { transform: translateY(1px); }
.options-btn.open   { border-color: var(--accent); }
.options-btn[hidden]{ display: none; }

.options-panel {
  position: fixed;
  right: 16px;
  bottom: calc(74px + 50px);
  z-index: 60;
  min-width: 280px;
  background: linear-gradient(180deg, rgba(20, 42, 85, 0.96), rgba(13, 31, 63, 0.97));
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.85rem 0.95rem 0.7rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(108, 198, 255, 0.08);
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  user-select: none;
}
.options-panel[hidden] { display: none; }
.options-panel-title {
  font-family: var(--font-display, system-ui), sans-serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.6rem;
  color: var(--accent, #6CC6FF);
}
.options-section { margin-bottom: 0.7rem; }
.options-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim, rgba(255, 255, 255, 0.6));
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(108, 198, 255, 0.12);
  padding-bottom: 0.2rem;
}
.options-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.options-row-label {
  flex: 1;
  font-size: 0.85rem;
}
.options-row-sub {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--text-dim, rgba(255, 255, 255, 0.6));
  min-width: 100px;
}
.options-row input[type="range"] {
  flex: 1;
  cursor: pointer;
  accent-color: var(--accent, #6CC6FF);
}
.options-row input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent, #6CC6FF);
  width: 16px;
  height: 16px;
}
.options-row-value {
  flex: 0 0 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.options-reset {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.1em;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.options-reset:hover {
  background: rgba(192, 70, 70, 0.08);
  border-color: rgba(229, 99, 99, 0.55);
}

/* Pause overlay — fullscreen scrim shown when the server reports the
   simulation is paused. Tap-anywhere or P to resume. Pointer events
   ARE captured (unlike the score/seed HUDs) so the player can't
   accidentally interact with the canvas underneath while paused. */
.pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 16, 32, 0.72);
  backdrop-filter: blur(6px);
  cursor: pointer;
  user-select: none;
  animation: pause-overlay-fade 0.2s ease-out;
}
@keyframes pause-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pause-overlay-card {
  background: linear-gradient(180deg, rgba(20, 42, 85, 0.95), rgba(13, 31, 63, 0.95));
  border: 1px solid var(--accent, #6CC6FF);
  border-radius: 0.75rem;
  padding: 1.5rem 2.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(108, 198, 255, 0.18), 0 0 24px rgba(108, 198, 255, 0.1);
  animation: pause-card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pause-card-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pause-overlay-title {
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
.pause-overlay-hint {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-dim, rgba(255, 255, 255, 0.65));
  text-transform: uppercase;
}

.big-btn { padding: 1rem 1.2rem; font-size: 1.05rem; width: 100%; margin: 0.5rem 0; }

.auth-banner {
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.45);
  color: #b2ecb6;
  border-radius: 0.45rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  margin: 0 0 0.85rem;
}

/* ---------- Lobby hero + game catalog (BizaGames portal) ---------------- */

.lobby-hero {
  text-align: center;
  margin: 0 auto 1.2rem;
  padding: 0.4rem 0 0.2rem;
}
.lobby-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin: 0 0 0.55rem;
  letter-spacing: 0.16em;
  background: linear-gradient(90deg, #ffffff 0%, #b6d2ff 55%, #3b9eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(59, 158, 255, 0.28);
}
/* Logo variant of the lobby title — image instead of gradient text.
   Strips the text-only properties (no background-clip, no shadow on
   the H1 itself) so the <img> renders cleanly. The drop-shadow filter
   replaces the text-shadow glow. */
.lobby-title--logo {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
  text-shadow: none;
  margin: 0 0 0.4rem;
  line-height: 0;
}
.lobby-logo {
  display: inline-block;
  max-width: min(420px, 70vw);
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 32px rgba(59, 158, 255, 0.35));
}
@media (max-width: 700px) {
  .lobby-logo { max-width: min(320px, 80vw); }
}
.lobby-tagline {
  margin: 0;
  color: var(--text-dim);
  letter-spacing: 0.22em;
  font-size: 1.05rem;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.4rem 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.section-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.14em;
}
.section-header .muted { letter-spacing: 0.18em; }

.game-catalog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(180deg, rgba(20, 42, 85, 0.85), rgba(13, 31, 63, 0.90));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 0.95rem 1rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease,
              box-shadow 0.18s ease, filter 0.15s ease;
}
.game-card:focus { outline: none; }
.game-card.is-available:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px rgba(108, 198, 255, 0.30),
              0 12px 36px rgba(59, 158, 255, 0.35);
}
.game-card.is-selected {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 2px rgba(108, 198, 255, 0.40),
              0 0 28px rgba(59, 158, 255, 0.25);
  background: linear-gradient(180deg, rgba(30, 58, 114, 0.92), rgba(13, 31, 63, 0.95));
}
.game-card.is-soon {
  cursor: not-allowed;
  filter: grayscale(0.55) brightness(0.78);
  opacity: 0.85;
}
.game-card.is-soon:hover { filter: grayscale(0.40) brightness(0.85); }

.game-thumb {
  height: 110px;
  border-radius: 0.55rem;
  background: var(--bg-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.game-thumb img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(59, 158, 255, 0.30));
}
.game-thumb.thumb-placeholder {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  background:
    repeating-linear-gradient(45deg,
      rgba(59, 158, 255, 0.05) 0 8px,
      transparent 8px 16px),
    var(--bg-1);
}

.game-name {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.10em;
  color: var(--text);
}
.game-desc {
  margin: 0;
  color: var(--text-dim);
  font-size: 1rem;
  letter-spacing: 0.04em;
  min-height: 2.6em;
}

.game-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  margin-right: 0.35rem;
}
.tag-pve {
  background: rgba(108, 198, 255, 0.12);
  color: var(--accent-2);
  border: 1px solid rgba(108, 198, 255, 0.30);
}
.tag-ready {
  background: rgba(89, 217, 156, 0.12);
  color: var(--good);
  border: 1px solid rgba(89, 217, 156, 0.30);
}
.tag-soon {
  background: rgba(255, 200, 77, 0.10);
  color: var(--cd);
  border: 1px solid rgba(255, 200, 77, 0.28);
}

.selected-game-line {
  margin: 0.2rem 0 0.6rem;
  font-size: 1.05rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
.selected-game-line strong {
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  margin-left: 0.4rem;
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 880px) {
  #app { padding: 1rem; }
  .scene--game.active { grid-template-columns: 1fr; }
  .lobby-grid { grid-template-columns: 1fr; }
  #hud, #event-log { max-height: none; }
  .user-widget { position: static; margin-bottom: 1rem; }
}

/* ----- Global lobby chat ---------------------------------------------- */
.chat-panel {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 340px;
  height: 280px;
  background: rgba(12, 20, 36, 0.85);
  border: 1px solid #2a3a5a;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: opacity .35s ease;
  backdrop-filter: blur(4px);
}
.chat-panel.idle      { opacity: 0.30; }
.chat-panel.active    { opacity: 1.0; }
.chat-panel:hover     { opacity: 1.0; }
.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  scroll-behavior: smooth;
  font-size: 0.86rem;
  line-height: 1.35;
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log::-webkit-scrollbar-thumb {
  background: rgba(108, 140, 255, 0.35);
  border-radius: 4px;
}
.chat-msg { margin: 0 0 4px 0; word-wrap: break-word; }
.chat-msg .tag-user  { color: #ffffff; font-weight: 400; }
.chat-msg .tag-admin { color: #ff6b6b; font-weight: 400; }
.chat-msg .body { color: #cfd6e2; }
.chat-msg.system .body { color: #ffb88a; font-style: italic; }
.chat-form { border-top: 1px solid #1d2a45; padding: 8px; }
.chat-form input {
  width: 100%;
  background: #0c1426;
  border: 1px solid #2a3a5a;
  border-radius: 8px;
  padding: 8px 10px;
  color: #e6edf7;
  outline: none;
  font: inherit;
}
.chat-form input:focus { border-color: #6c8cff; }

/* ----- Pre-game scene ------------------------------------------------- */
.scene--pregame { display: none; place-items: center; padding: 2rem; }
.scene--pregame.active { display: grid; }
.pregame-card {
  background: linear-gradient(180deg, #18233b, #0e1729);
  border: 1px solid #2a3a5a;
  border-radius: 14px;
  padding: 28px;
  width: min(720px, 95vw);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.pregame-card header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: 18px;
}
.pregame-card h2 { margin: 0; }
.pregame-classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.pregame-class {
  background: #1d2a45;
  border: 2px solid #2a3a5a;
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pregame-class:hover { transform: translateY(-2px); }
.pregame-class::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(8, 16, 32, 0.95);
  border: 1px solid var(--class-color, var(--accent, #6CC6FF));
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 100;
  font-family: inherit;
}
.pregame-class:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pregame-class .name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
}
.pregame-class .desc { font-size: 0.95rem; opacity: 0.75; margin-top: 6px; }
.pregame-class.picked {
  border-color: var(--class-color, #6c8cff);
  background: linear-gradient(180deg, rgba(108,140,255,0.18), rgba(108,140,255,0.05));
  box-shadow: 0 0 15px var(--class-color), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: pregame-pulse 2s infinite alternate;
}
@keyframes pregame-pulse {
  from { box-shadow: 0 0 8px var(--class-color); }
  to { box-shadow: 0 0 18px var(--class-color); }
}
.pregame-vs {
  display: flex; justify-content: space-around; align-items: center;
  background: #0c1426; border-radius: 10px; padding: 14px;
  margin-bottom: 18px;
}
.pregame-side { text-align: center; min-width: 140px; }
.pregame-side .who { font-weight: 400; }
.pregame-side .pclass { color: var(--class-color, #6c8cff); margin-top: 2px; }
.pregame-side .ready-tag {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 400;
}
.pregame-side .ready-tag.ready { background: #1f5d2a; color: #b9f4c2; }
.pregame-side .ready-tag.waiting { background: #3b2a1d; color: #f4c5a0; }
.pregame-vs .vs { opacity: 0.6; font-weight: 400; font-size: 1.1rem; }
.pregame-actions { display: flex; align-items: center; gap: 16px; }
.pregame-actions .big-btn { flex: 1 1 auto; }
.pregame-actions .big-btn:disabled { opacity: 0.55; cursor: default; }

/* ----- Post-game scene ----------------------------------------------- */
.scene--postgame { display: none; place-items: center; padding: 2rem; }
.scene--postgame.active { display: grid; }
.postgame-card {
  text-align: center;
  background: linear-gradient(180deg, #18233b, #0e1729);
  border: 1px solid #2a3a5a;
  border-radius: 14px;
  padding: 36px 48px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  animation: postgameIn .25s ease-out;
}
.postgame-card h1 {
  margin: 0 0 14px 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.10em;
}
.postgame-card.won h1   { color: #6cff8e; text-shadow: 0 0 24px rgba(108,255,142,.45); }
.postgame-card.lost h1  { color: #ff7373; text-shadow: 0 0 24px rgba(255,115,115,.40); }
.postgame-card.draw h1  { color: #d6c178; text-shadow: 0 0 24px rgba(214,193,120,.40); }
.postgame-line { margin: 0 0 14px 0; font-size: 1.05rem; }
@keyframes postgameIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Lobby penalty banner — surfaced on returning to the lobby after a forfeit. */
.lobby-notice {
  background: linear-gradient(180deg, #3a1f1f, #2a1414);
  border: 1px solid #ff6b6b;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  color: #ffd9d9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(255, 80, 80, 0.18);
}
.lobby-notice p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.95rem;
  line-height: 1.4;
}
.lobby-notice strong { color: #ff8585; }
.lobby-notice button {
  flex: 0 0 auto;
  padding: 8px 18px;
}

/* ========================================================================
   Language selector — fixed pill in the bottom-right corner. The menu pops
   upward when expanded so it never overflows the viewport bottom.
   ======================================================================== */

#lang-selector {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  /* Flags are inline SVG (see ``i18n.js`` FLAG_SVG) so we no longer need
     the regional-indicator emoji font fallback that Windows ignored. */
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, rgba(30, 58, 114, 0.92), rgba(13, 31, 63, 0.95));
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 0.45rem 0.75rem 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow), 0 0 0 1px rgba(108, 198, 255, 0.05);
  backdrop-filter: blur(6px);
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lang-current:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px rgba(108, 198, 255, 0.20);
}
.lang-current:active { transform: translateY(1px); }
/* ``.lang-flag`` is now an inline-block wrapper around the flag SVG.
   The SVG itself takes the size; the wrapper just supplies the inline
   layout slot so the flexbox in .lang-current/.lang-item handles
   spacing identically to the previous emoji glyph. */
.lang-flag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.lang-flag-svg {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lang-code { font-weight: 400; letter-spacing: 0.04em; font-size: 0.78rem; color: var(--text-dim); }
.lang-caret {
  font-size: 0.7rem;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
#lang-selector.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 180px;
  background: linear-gradient(180deg, rgba(20, 42, 85, 0.95), rgba(13, 31, 63, 0.97));
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.3rem;
  box-shadow: var(--shadow), 0 0 24px rgba(59, 158, 255, 0.10);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: langMenuIn 0.12s ease-out;
}
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 0.4rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lang-item:hover { background: rgba(108, 140, 255, 0.10); }
.lang-item.active {
  background: rgba(59, 158, 255, 0.14);
  border-color: rgba(108, 198, 255, 0.30);
}
.lang-item .lang-name { flex: 1; }
.lang-item .lang-code-mini {
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 400;
}

/* ========================================================================
   Touch / on-screen controls overlay — joystick (left) + action buttons
   (right). Hidden by default; mobile.js toggles `hidden` per scene.
   ======================================================================== */

#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;        /* zones below opt back into pointer events */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(env(safe-area-inset-left, 0px), 1rem)
           max(env(safe-area-inset-bottom, 0px), 1.2rem)
           max(env(safe-area-inset-right, 0px), 1rem);
}
#touch-controls[hidden] { display: none; }

.tc-zone {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
}
.tc-left  { justify-content: flex-start; }
.tc-right { justify-content: flex-end; }

.joystick-base {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(20, 42, 85, 0.55) 0%,
              rgba(20, 42, 85, 0.35) 60%,
              rgba(13, 31, 63, 0.50) 100%);
  border: 1.5px solid rgba(108, 198, 255, 0.30);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.joystick-base.active {
  border-color: rgba(108, 198, 255, 0.55);
  box-shadow:
    0 6px 26px rgba(59, 158, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, #5cb6ff, #3b9eff 55%, #1f6fcf);
  border: 1px solid rgba(108, 198, 255, 0.6);
  box-shadow:
    0 4px 14px rgba(59, 158, 255, 0.45),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  transition: transform 0.05s linear;
  pointer-events: none;        /* base captures the pointer */
}
.joystick-base.active .joystick-knob { transition: none; }

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1.5px solid rgba(108, 198, 255, 0.30);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.06s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.action-btn .action-glyph {
  font-size: 1.95rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.40));
  pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif;
}
.action-bomb {
  background: radial-gradient(circle at 30% 30%,
              rgba(255, 107, 107, 0.30),
              rgba(60, 20, 20, 0.55) 70%);
}
.action-ability {
  background: radial-gradient(circle at 30% 30%,
              rgba(207, 142, 255, 0.30),
              rgba(40, 20, 60, 0.55) 70%);
  width: 64px; height: 64px;   /* slightly smaller than the bomb */
}
.action-ability .action-glyph { color: #cf8eff; font-size: 1.6rem; }
.action-btn:hover { border-color: rgba(108, 198, 255, 0.50); }
.action-btn.pressed {
  transform: translateY(1px) scale(0.96);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-color: var(--accent);
}

/* Mobile pause button — top-right corner, separate from the bomb /
   ability cluster so a player frantically tapping the bomb button
   can't accidentally pause the match. ``pointer-events:auto`` is
   inherited from #touch-controls; the button is part of the same
   touch overlay so it auto-hides when controls are hidden (lobby /
   pre-game). */
.tc-pause-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 58, 114, 0.92), rgba(13, 31, 63, 0.95));
  border: 1px solid var(--line, rgba(108, 198, 255, 0.30));
  color: var(--text, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tc-pause-btn.pressed {
  transform: scale(0.94);
  border-color: var(--accent, #6CC6FF);
}

/* ========================================================================
   Mobile layout overrides. Two triggers:
   - body.is-mobile  — JS-detected (UA, touch, narrow viewport)
   - viewport ≤ 700px — pure CSS; covers narrow desktop windows too
   ======================================================================== */

@media (max-width: 700px) {
  #app { padding: 0.85rem 0.85rem 8rem; }
  .lobby-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .auth-card { padding: 1.2rem 1.1rem 1.1rem; max-width: 100%; }
  #hud, #event-log { max-height: none; }

  .user-widget {
    position: static;
    margin: 0 0 1rem;
    width: 100%;
    min-width: 0;
  }

  /* ----- Lobby cards ------------------------------------------------- */
  /* Stack title + meta vertically so a long status line ("Auto-matched
     by your level.") doesn't fight the h2 for horizontal space. */
  .lobby-card { padding: 0.95rem 1rem; }
  .lobby-card header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.55rem;
  }
  .lobby-card h2 { font-size: 1rem; }
  .ranking-list { max-height: 240px; }

  /* Lobby chat panel — full-width, shorter, and sits above the lang
     selector. Push #app's bottom padding to clear the chat. */
  .chat-panel {
    width: calc(100vw - 24px);
    max-width: none;
    left: 12px;
    height: 200px;
    bottom: 80px;
  }
  body.scene-lobby #app { padding-bottom: 18rem; }

  #lang-selector {
    right: 12px;
    bottom: 12px;
  }
  .lang-menu { min-width: 160px; }

  /* ----- Pre-game card ---------------------------------------------- */
  /* Compact everything so the Ready button is visible without
     scrolling on a typical 360x800 phone viewport. */
  .scene--pregame { padding: 0.6rem 0; }
  .pregame-card { padding: 14px 12px; width: 100%; }
  .pregame-card header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 12px;
  }
  .pregame-card h2 { font-size: 1.35rem; }
  .pregame-classes {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .pregame-class { padding: 9px 6px; }
  .pregame-class .name { font-size: 0.92rem; }
  .pregame-class .desc { font-size: 0.7rem; line-height: 1.3; }
  .pregame-vs {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 10px;
    margin-bottom: 12px;
  }
  .pregame-side { min-width: 0; flex: 1 1 40%; }
  .pregame-actions {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .pregame-actions .big-btn { padding: 0.85rem 1rem; font-size: 1rem; margin: 0; }
  .pregame-actions .link-btn { text-align: center; padding: 0.4rem 0; }
  #pregame-hint { font-size: 0.78rem; line-height: 1.4; margin-top: 6px; }

  /* ----- Game scene -------------------------------------------------- */
  /* Reorder so the canvas sits at the top of the scroll, with a tightly
     compacted HUD beneath. The fixed touch controls overlay the bottom
     of the viewport — bottom-padding ensures the event log can scroll
     above them rather than disappearing under the joystick. */
  .scene--game.active {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .scene--game.active #game       { order: 1; }
  .scene--game.active #hud        { order: 2; }
  .scene--game.active #event-log  { order: 3; }
  .scene--game.active .game-toolbar { order: 4; }

  #hud {
    padding: 0.55rem 0.7rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.3;
  }
  .player-card {
    margin-bottom: 0.4rem;
    padding: 0.4rem 0.6rem 0.45rem;
  }
  .player-card .name      { font-size: 0.82rem; margin-bottom: 0.15rem; }
  .player-card .stat      { font-size: 0.64rem; margin-top: 0.18rem; }
  .player-card .bar       { height: 0.32rem; margin-top: 0.1rem; }
  .player-card .perks     { margin-top: 0.32rem; gap: 0.25rem; }
  .player-card .perks span { font-size: 0.64rem; padding: 0.04rem 0.35rem; }
  .player-card.you::after { font-size: 0.55rem; top: 0.3rem; right: 0.4rem; padding: 0.04rem 0.32rem; }
  .tick-line { margin-top: 0.35rem; font-size: 0.64rem; }

  #event-log {
    font-size: 0.72rem;
    padding: 0.55rem 0.65rem;
    max-height: 110px;
    line-height: 1.4;
  }

  /* Reserve room at the bottom of the page for the touch overlay so
     the joystick / action buttons never hover over the game canvas. */
  body.is-touch.scene-game #app { padding-bottom: 200px; }

  /* Avoid iOS auto-zoom on focus (anything < 16px triggers it) */
  .field input[type="text"],
  .field input[type="password"],
  .chat-form input { font-size: 16px; }
}

/* JS-flagged mobile: stricter than the media query — used to hide stuff
   that competes with on-screen controls during gameplay. */
body.is-mobile .auth-hero { width: min(260px, 70vw); margin-top: 0; }

/* While the touch overlay is active during a match, hide the chat panel
   and language selector so the joystick has room. They reappear once back
   in the lobby. */
body.is-touch .scene--game.active ~ .chat-panel,
body.is-touch:has(.scene--game.active) #chat-panel,
body.is-touch:has(.scene--game.active) #lang-selector {
  display: none;
}

/* Keep the user-widget out of the joystick's way when in-game on touch. */
body.is-touch:has(.scene--game.active) .user-widget {
  display: none;
}

/* Disable text selection on touch surfaces — preserves accidental long-press
   behavior on the action buttons and joystick. */
body.is-touch #touch-controls,
body.is-touch #touch-controls * {
  -webkit-touch-callout: none;
}