/* Fallback tokens only — overwritten on :root by lobby.js the instant the
   client config loads, so there's no flash of the wrong client's colors. */
:root{
  --bg:#0e0b12; --bg-elevated:#1b1620; --bg-panel:#221c29;
  --ink:#f5f1ec; --ink-dim:#b9afc2; --ink-faint:#786f87; --line:#332b3d;
  --accent:#ff4d6d; --gold:#ffc53d; --lime:#c6ff3d; --teal:#0fa3a3; --magenta:#ff2e9a; --orange:#ff8a3d;
  --seg0:#ff4d6d; --seg1:#ffc53d; --seg2:#c6ff3d; --seg3:#0fa3a3; --seg4:#ff2e9a; --seg5:#ff8a3d;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--bg-elevated) 70%, var(--accent) 8%) 0%, var(--bg) 55%);
  color:var(--ink); font-family:'Manrope',system-ui,-apple-system,sans-serif;
  min-height:100vh; overflow-x:hidden;
}
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.lobby-shell{ display:flex; flex-direction:column; min-height:100vh; }

/* ---------- header (client brand) ---------- */
.lobby-header{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:38px; height:38px; border-radius:10px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--accent), var(--gold));
  font-family:'Bungee'; font-size:16px; color:#0e0b12;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-name{ font-family:'Bungee'; font-size:15px; letter-spacing:.3px; color:var(--ink); flex:1; }

.mute-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-panel); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.mute-toggle[aria-pressed="true"]{ color:var(--ink-faint); }

/* ---------- main / tile grid ---------- */
main{ flex:1; padding:20px 18px 40px; max-width:640px; margin:0 auto; width:100%; }

.lobby-eyebrow{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.6px; color:var(--ink-faint); text-transform:uppercase; margin:4px 0 14px; }

.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.tile-grid[hidden]{ display:none; }
.game-tile{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:18px;
  padding:18px 16px; text-align:left; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; gap:8px; min-height:132px;
  transition:transform .12s ease, border-color .12s ease;
}
.game-tile:hover, .game-tile:focus-visible{ border-color:var(--accent); transform:translateY(-2px); }
.game-tile:active{ transform:translateY(0) scale(.98); }
.game-tile .tile-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--accent), var(--magenta)); color:#0e0b12; font-family:'Bungee'; font-size:17px;
}
.game-tile .tile-name{ font-family:'Bungee'; font-size:13.5px; letter-spacing:.2px; }
.game-tile .tile-tagline{ font-size:12px; color:var(--ink-dim); line-height:1.4; }

.empty-state{ color:var(--ink-faint); font-size:13px; padding:24px 0; }

/* ---------- game view ---------- */
.game-view{ display:flex; flex-direction:column; align-items:center; }
.game-view[hidden]{ display:none; }
.back-btn{
  align-self:flex-start; background:none; border:1px solid var(--line); color:var(--ink-dim);
  font-family:'Manrope'; font-weight:700; font-size:12.5px; border-radius:999px; padding:8px 16px;
  cursor:pointer; margin-bottom:14px;
}
.back-btn:hover{ border-color:var(--accent); color:var(--ink); }
.game-container{ width:100%; display:flex; flex-direction:column; align-items:center; }

footer.lobby-foot{
  text-align:center; font-family:'Space Mono',monospace; font-size:10px; color:var(--ink-faint);
  letter-spacing:.4px; opacity:.6; padding:10px 0 26px;
}

/* ---------- name gate (shared across every game) ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; background:rgba(10,8,13,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.overlay[hidden]{ display:none; }
.gate-card{
  width:min(340px,100%); background:var(--bg-elevated); border:1px solid var(--line); border-radius:22px;
  padding:28px 24px; text-align:center; box-shadow:0 24px 60px -16px rgba(0,0,0,.7);
}
.gate-card h2{ font-family:'Bungee'; font-weight:400; font-size:19px; margin:0 0 8px; text-wrap:balance; }
.gate-card p{ color:var(--ink-dim); font-size:13.5px; margin:0 0 18px; }
.gate-card input{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg-panel); color:var(--ink); font-size:16px; font-family:'Manrope'; margin-bottom:14px;
}
.gate-card input::placeholder{ color:var(--ink-faint); }
.gate-card button{
  width:100%; padding:14px; border-radius:12px; border:none; cursor:pointer; font-family:'Bungee';
  font-size:13.5px; letter-spacing:.4px; color:#0e0b12;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent));
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent); min-height:48px;
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }