/* ── Design tokens ──────────────────────────────────────────────────────
   Same token names/structure as every other game's own theme.css (each
   game ships its own self-contained copy rather than a shared stylesheet).
   Bounce only ever runs one (dark) palette — a neon arcade/pinball feel,
   so --accent is a bright amber rather than any other game's color, kept
   distinct from the peg colors themselves (see game.js's PEG_COLORS). */
:root {
  --bg:            #0D1020;
  --surface-1:     #151A33;
  --surface-2:     #11162B;

  --border:        #2A3260;
  --border-strong: #3A4478;

  --text:          #F2F4FF;
  --text-mid:      #CBD1EA;
  --text-muted:    #9AA3C6;

  --accent:        #ffb020;
  --accent-hover:  #ffc457;
  --on-accent:     #241300;

  --danger:        #ff6b6b;
  --danger-deep:   #4a1f22;

  --font-display: 'Fredoka', sans-serif;
  --font-body:    'Nunito', sans-serif;
}

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

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% -8%, #201a2e 0%, var(--bg) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  touch-action: none;
  user-select: none;
  height: 100%;
}

#game-canvas {
  display: none;
  width: 100vw;
  height: 100vh;
  background: #0a0e18;
}


/* ============================================================
   LOBBY / WAITING / MATCH OVER
============================================================ */

.auth-page {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.5rem 1rem 2rem;
  gap: 1.25rem;
  overflow-y: auto;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.game-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 4px;
  margin: 0 0 0.5rem;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255, 176, 32, 0.35);
}
.room-code-heading {
  text-align: center;
  font-family: var(--font-display);
  margin: 0 0 1.25rem;
}
#room-code-display { letter-spacing: 6px; color: var(--accent); }

#matchover-title {
  text-align: center;
  font-family: var(--font-display);
  margin: 0 0 1.25rem;
}

.tagline {
  margin: 0 0 1.75rem;
  color: var(--text-mid);
  font-size: 0.85rem;
  text-align: center;
}

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

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-field label, .picker-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mid);
}

input[type="text"] {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  text-align: left;
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.2);
}
#join-code { text-transform: uppercase; letter-spacing: 4px; }

.stats-hint {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

button {
  margin-top: 0;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 999px;
  padding: 0.8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
button:hover  { filter: brightness(1.1); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.4; cursor: default; transform: none; filter: none; }


.hint { color: var(--text-mid); font-size: 13px; text-align: center; margin: 0; }
.hint.small { font-size: 12px; color: var(--text-muted); }
/* Notes under the join form (bots hint, guest footnote) — same block the
   card games' join screen ends with. */
.join-notes { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.25rem; }
/* The quiet guest footnote ("Sign in to record stats"): link in the same
   muted colour with just an underline, so it reads as a note, not a button. */
.signin-note { line-height: 1.4; }
.signin-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.error-msg { color: var(--danger); font-size: 13px; min-height: 16px; margin: 0; text-align: center; }
/* An empty error line is dropped from the form flow entirely so it never
   leaves a blank gap above the notes under the buttons. */
.error-msg:empty { display: none; }


/* ---- Mode picker (host) — same segmented-control look every other
   game's mode-toggle uses. ---- */
.seg {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.seg-btn {
  background: var(--surface-2);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 0;
  margin: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: rgba(255, 176, 32, 0.16); color: var(--accent); }
.seg-count { padding: 0 14px; display: inline-flex; align-items: center; font-weight: 700; color: var(--text); background: var(--surface-2); }

.seg-modes { flex-wrap: wrap; justify-content: center; width: 100%; }
.seg-modes .seg-btn { flex: 1 1 auto; }

.icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  margin: 0;
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn:active { transform: scale(0.92); }

/* ---- Player list ---- */
#player-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}
#player-list .p-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#player-list .p-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#player-list .p-tag { font-size: 11px; color: var(--text-muted); }

#host-setup { align-items: center; }
.setup-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.setup-label { font-size: 13px; color: var(--text-mid); }

/* ---- Match over ---- */
#matchover-standings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.standing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}
.standing-row.winner { outline: 2px solid var(--accent); }
.standing-place { font-weight: 800; width: 22px; text-align: center; color: var(--text-mid); }
.standing-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing-score { font-weight: 700; color: var(--text); }
.standing-lives { color: #ff6b8a; font-size: 12px; letter-spacing: 1px; min-width: 34px; text-align: right; }
.standing-row.out .standing-name { color: var(--text-muted); }
#matchover-sub { margin: -0.5rem 0 1rem; }
#matchover-sub:empty { display: none; }

/* ============================================================
   IN-GAME CHROME
============================================================ */


/* ---- HUD — score/balls readout top-center, turn banner underneath
   (retired — see feedMessage), opponents' scores along the right for Battle/Showdown
   spectating. Sits in DOM over the canvas so text stays crisp on
   high-DPI screens, same reasoning as every other game's #hud. ---- */
#hud {
  position: fixed;
  top: 14px;
  /* Full width, no transform: the score/turn pills centre themselves via
     align-items, and — the real reason — a transformed element becomes the
     containing block for its fixed-position children, which pinned the
     "right-hand" scores column to the HUD's own narrow box instead of the
     viewport's right edge (so it sat just under the score pills, in the
     middle of a phone screen). */
  left: 0;
  right: 0;
  transform: none;
  z-index: 15;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
#hud-top {
  display: flex;
  gap: 10px;
}
.hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 6px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hud-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.hud-stat span:last-child { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent); }
#hud-turn {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-mid);
  display: none;
}
#hud-turn.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
/* The right-hand column: opponents' scores, then the message feed right
   under them (see feedMessage() in game.js). The column is the fixed
   element; both children just stack inside it. */
#hud-side {
  position: fixed;
  /* Placed by resizeCanvas() in game.js: a column beside the board when the
     viewport is wide enough, otherwise a full-width strip below it — never
     over it. */
  top: var(--side-top, 62px);
  left: var(--side-left, auto);
  right: var(--side-right, 14px);
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: var(--side-max-w, 150px);
  max-height: var(--side-max-h, none);
  overflow: hidden;
}
/* Below the board (phones upright): players on the left, messages on the
   right, sharing one strip. */
/* One centred strip, same as Snake: players as a wrapping row of pills with
   full names, the message feed under it at full width (messages wrap rather
   than being cut off). */
#hud.side-below #hud-side { flex-direction: column; align-items: center; gap: 6px; }
#hud.side-below #hud-opponents { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
#hud.side-below .opp-row .opp-name { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
#hud.side-below .opp-row { flex-wrap: nowrap; }
#hud.side-below .opp-row .opp-sub { flex: 0 0 auto; padding-left: 0; }
#hud.side-below #hud-feed { align-items: center; margin-top: 0; width: 100%; }
#hud.side-below .feed-row { white-space: normal; text-align: center; max-width: 100%; }
#hud-opponents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}
#hud-feed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-top: 4px;
  max-width: 100%;
}
.feed-row {
  padding: 4px 8px;
  background: rgba(19, 27, 44, 0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-mid);
  text-align: right;
  max-width: 100%;
  animation: feed-in-out 3.2s ease forwards;
}
.feed-row--strong { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.feed-row--again { animation: feed-again 0.35s ease; }
@keyframes feed-in-out {
  0%   { opacity: 0; transform: translateX(8px); }
  8%   { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes feed-again { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
.opp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(19, 27, 44, 0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
}
.opp-row .opp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.opp-row .opp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.opp-row.finished { opacity: 0.55; }
.opp-row.active { border-color: var(--accent); color: var(--accent); }
/* Each player's own-board status under their name. */
.opp-row { flex-wrap: wrap; }
.opp-row .opp-sub { flex: 0 0 100%; font-size: 10px; color: var(--text-muted); padding-left: 14px; line-height: 1.2; }
/* Showdown: hearts beside each score; a player who's lost them all greys out. */
.opp-row .opp-lives { color: #ff6b8a; font-size: 10px; letter-spacing: 1px; flex-shrink: 0; }
.opp-row.out { opacity: 0.4; }
.opp-row .opp-timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-mid); flex-shrink: 0; }
.opp-row.round-row { justify-content: center; color: var(--accent); border-color: var(--accent); font-weight: 700; }
.opp-row.round-row.out-note { color: var(--text-mid); border-color: var(--border); font-weight: 600; opacity: 1; }
#hud-lives { color: #ff6b8a; letter-spacing: 2px; }

/* ---- Showdown: the card between rounds. Sits over the board, takes no
   clicks (the pause gear and Settings stay reachable), and is hidden by the
   `hidden` attribute — the explicit [hidden] rule is needed because the
   display:flex below would otherwise win over the attribute. ---- */
#round-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 14, 0.55);
  pointer-events: none;
}
#round-overlay[hidden] { display: none; }
.ro-card {
  width: 100%;
  max-width: 320px;
  padding: 16px 14px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: ro-in 0.25s ease-out;
}
@keyframes ro-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.ro-card h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); }
#ro-rows { display: flex; flex-direction: column; gap: 5px; }
.ro-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.ro-row.me { border-color: var(--accent); }
.ro-row.lost { border-color: #ff6b8a; }
.ro-row.out .ro-name { color: var(--text-muted); text-decoration: line-through; }
.ro-place { font-weight: 800; width: 22px; color: var(--text-mid); }
.ro-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-lives { color: #ff6b8a; font-size: 12px; letter-spacing: 1px; }
.ro-score { font-weight: 700; min-width: 38px; text-align: right; }
#ro-note { margin: 10px 0 0; font-size: 13px; color: var(--text); }
#ro-next { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

/* ---- Dialogs (pause menu, confirm/alert) ---- */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 14, 0.72);
}
.dialog-overlay.open { display: flex; }

.dialog-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  width: 88%;
  max-width: 340px;
  text-align: center;
}
.dialog-message { margin: 0 0 16px; color: var(--text); font-size: 15px; line-height: 1.4; }
.dialog-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
}
.dialog-actions { display: flex; gap: 10px; justify-content: center; }
.dialog-btn { padding: 10px 20px; margin: 0; }
.dialog-btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }


/* ---- Toasts ---- */
#toast-layer {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.toast {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  animation: toast-in-out 2.6s ease forwards;
  white-space: nowrap;
}
@keyframes toast-in-out {
  0%   { opacity: 0; transform: translateY(-8px); }
  12%  { opacity: 1; transform: translateY(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 480px) {
  .auth-card { padding: 1.75rem 1.25rem; }
  .game-title { font-size: 1.6rem; letter-spacing: 3px; }
  #hud-top { gap: 6px; }
  .hud-stat { min-width: 0; padding: 6px 10px; }
}

/* The back/leave pills, icon buttons, in-match gear and the lobby share row
   are shared with the other action games: /shared/arcade-chrome.css. */

/* Settings sheet: the bulb colour guide. */
.bulb-guide { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bulb-guide-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; line-height: 1.35; }
.bulb-guide-text strong { font-weight: 700; }
.bulb-swatch {
  flex: 0 0 auto;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.85) 0 12%, var(--bulb) 48%, rgba(8,12,22,0.55) 120%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bulb-guide-note { margin: 12px 0 0; font-size: 0.78rem; opacity: 0.75; line-height: 1.4; }
/* ---- Room code in the Settings sheet (same look as Snake's) ---- */
.settings-room { text-align: center; }
.settings-room-code { font-family: var(--font-display); font-size: 2rem; letter-spacing: 8px; color: var(--accent); margin: 4px 0 10px; user-select: text; -webkit-user-select: text; }
.settings-room-actions { display: flex; gap: 8px; }
.settings-room-actions .tbl-settings-btn { flex: 1 1 0; margin: 0; }
/* The friends card inside the join / waiting card: full width, no outer margin. */
#friends-online-card.friends-panel-card { max-width: none; margin: 1rem 0 0; }