/* ── Design tokens ──────────────────────────────────────────────────────
   Same token names/structure as every card game's own theme.css (each
   game ships its own self-contained copy rather than a shared stylesheet
   — see that file's header comment for why). Brickbreaker only ever runs
   one (dark) palette, so there's no [data-theme="dark"] override block
   here the way the card games have — these values just *are* the dark
   palette, and --accent keeps the teal that was already here rather than
   switching to the card games' yellow. */
:root {
  --bg:            #0D1020;
  --surface-1:     #151A33;
  --surface-2:     #11162B;

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

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

  --accent:        #33e6c9;
  --accent-hover:  #5ff2da;
  --on-accent:     #06231d;

  --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%, #16233a 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;
}

#hud { display: none; }


/* ============================================================
   LOBBY / WAITING / MATCH OVER — same auth-page/auth-card shape
   every card game's join screen uses. Fixed top padding (rather than
   centering) so the gap under the back pill is identical regardless of
   how tall any given card's content is — see kingscorner's theme.css
   for the original writeup of why centering made that gap random.
============================================================ */

.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(51, 230, 201, 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(51, 230, 201, 0.2);
}
#join-code { text-transform: uppercase; letter-spacing: 4px; }

/* Primary action — same accent pill everywhere on the site. Join and
   Create intentionally share this exact look (no quieter outline
   treatment for either) for the same reason the card games do: visual
   consistency between the two main actions on the card. */
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 as the card
   games' mode-toggle (see e.g. kingscorner's "Play to" picker), kept
   under brickbreaker's existing .seg/.seg-btn class names since game.js
   selects/toggles those directly. ---- */
.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(51, 230, 201, 0.14); color: var(--accent); }
.seg-count { padding: 0 14px; display: inline-flex; align-items: center; font-weight: 700; color: var(--text); background: var(--surface-2); }

/* Three mode buttons just fit a phone-width row; the five ball buttons
   don't — let both segmented controls wrap instead of overflowing or
   squeezing text. */
.seg-modes, .seg-balls { flex-wrap: wrap; justify-content: center; width: 100%; }
.seg-modes .seg-btn, .seg-balls .seg-btn { flex: 1 1 auto; }

/* Small circular stepper buttons (bot count +/-) — same .icon-btn the
   card games use for their own chip/color steppers. */
.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); }

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


/* ---- Dialogs (pause menu, confirm/alert) — same card look as
   auth-card, just smaller, matching every card game's own alert-box. ---- */
.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); }


/* ---- Attack targeting panel (Versus) ----
   Sits under the settings gear on the right edge; only shown once a board
   has a pending attack charge (see pendingAttacks handling in game.js). */
.attack-panel {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 20;
  width: 136px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.attack-panel-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mid);
  text-align: center;
}
.attack-target-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 6px;
}
.attack-target-btn:last-child { margin-bottom: 0; }
.attack-target-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.attack-target-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.attack-panel-count { margin: 8px 0 0; font-size: 11px; font-weight: 700; color: var(--accent); text-align: center; }

/* ---- 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; }
}

/* 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. */

/* ---- 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; }