/* ============================================================
   ARCADE CHROME — the controls every real-time action game (Snake,
   Bounce, Brickbreaker) shares with the card games, kept in ONE file so
   the three can't drift apart again:

     .back-home-link     the join screen's "← Back to Games" pill
     .tbl-header-back    the in-room "‹ Leave" pill with the chevron
     .tbl-icon-btn       the round 36px icon button (share, settings)
     .lobby-hint-row     "Share this code…" + the settings and share icons,
                         exactly the row the card-game lobby shows
     .settings-gear      the in-match settings button, pinned top-right
     .arcade-pause-banner "Paused" strip shown while a match is paused and
                         the Settings sheet is closed

   These used to be copied into each game's styles.css against that
   game's own tokens; this file reads the same token names (--surface-1,
   --accent, --text-mid …), which every game defines, so it works in each
   game's own palette. The Settings sheet itself, How to Play and toasts
   come from /shared/table-theme.css + table-theme.js — the same code the
   card games run — which is what makes the sheet identical everywhere.
   Load order on a game page: table-theme.css, then this file.
============================================================ */

/* ── Sheet colours: this game's own palette ──────────────────────────
   table-theme.css paints the sheet, rules and toast with its --tbl-* tokens,
   which the card games lock to the felt skin (near-black, yellow accent).
   Here they follow the page's own tokens instead, so the sheet matches the
   game's dialogs and its accent (Snake green, Bounce orange, Brickbreaker
   cyan). :root[data-table-theme] outranks table-theme.css's own
   [data-table-theme="…"] rules whatever skin it set. */
:root, :root[data-table-theme] {
  --tbl-page-bg:      var(--bg);
  --tbl-panel-bg:     var(--surface-1);
  --tbl-panel-border: var(--border-strong, var(--border));
  --tbl-text:         var(--text);
  --tbl-text-mid:     var(--text-mid);
  --tbl-text-muted:   var(--text-muted);
  --tbl-accent:       var(--accent);
  --tbl-on-accent:    var(--on-accent);
  --tbl-log-bg:       var(--surface-1);
  --tbl-log-border:   var(--border);
  --tbl-log-text:     var(--text-mid);
}

/* ── Back / Leave pills ─────────────────────────────────────────────── */
.back-home-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-mid);
  animation: arcadeTextPulse 2s ease-in-out infinite;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.back-home-link:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.back-home-link.profile-link { left: auto; right: 1rem; }
@keyframes arcadeTextPulse {
  0%, 100% { color: var(--text-mid); }
  50% { color: var(--text); }
}

.tbl-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-mid);
  border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  animation: none;
}
.tbl-header-back:hover { border-color: var(--accent); color: var(--text); background: var(--surface-2); }
.tbl-header-back .tbl-icon { width: 16px; height: 16px; }
/* Fixed top-left, on screens with no header bar (the kit's table.css). */
.persistent-back-btn { position: fixed; top: 1rem; left: 1rem; z-index: 20; }

/* ── Icon buttons ───────────────────────────────────────────────────── */
.tbl-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-mid);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tbl-icon-btn:hover, .tbl-icon-btn:active { border-color: var(--accent); color: var(--accent); background: var(--surface-2); filter: none; transform: none; }
.tbl-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* Settings icon — animated hex-nut/bolt glyph, same as the card games. */
.settings-nut { transform-origin: 12px 12px; animation: nutTighten 2.2s ease-in-out infinite; }
.settings-nut-tip { transform-origin: 12px 12px; animation: nutTipPulse 2.2s ease-in-out infinite; }
@keyframes nutTighten { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes nutTipPulse { 0%, 100% { r: 2px; opacity: 0.4; } 50% { r: 1.3px; opacity: 0.75; } }

/* ── Lobby: the share/settings row under "Room Code" ───────────────── */
/* Same shape as the kit's (_kit/client/table.css .lobby-hint-row): the
   hint text, then the settings gear, then the share icon. */
.lobby-hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 4px;
}
.lobby-hint-row .hint,
.lobby-hint-row #lobby-hint { margin: 0; }

/* ── In-match settings button, pinned top-right ─────────────────────── */
/* (The class name is kept so shared/safe-area.css keeps nudging it clear
   of a notch.) */
.settings-gear { position: fixed; top: 1rem; right: 1rem; z-index: 20; }

/* ── Paused strip (match paused, Settings sheet closed) ─────────────── */
.arcade-pause-banner {
  position: fixed;
  top: 4.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong, var(--border));
  color: var(--text);
  font: 700 0.85rem var(--font-body, inherit);
  cursor: pointer;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.arcade-pause-banner.show { display: inline-flex; }
.arcade-pause-banner .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  animation: arcadePauseDot 1.2s ease-in-out infinite;
}
@keyframes arcadePauseDot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── Settings sheet: the match-status section at the top ────────────── */
.arcade-status { display: flex; flex-direction: column; gap: 0.6rem; }
.arcade-status-text { margin: 0; color: var(--text-mid); font-size: 0.9rem; text-align: center; }
.arcade-status-text strong { color: var(--text); }
/* Resume is the one primary action in the sheet, so it gets the accent
   fill (the sheet's other buttons are outlined, like the card games'). */
.tbl-settings-btn.arcade-resume {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.tbl-settings-btn.arcade-resume:hover { background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent)); color: var(--on-accent); }

/* ── Join screen: the "How to Play" link under the tagline ──────────── */
/* Opens the same rules sheet the card games use (table-theme.js's
   openTableRules), so the text reads identically on the join screen and
   inside Settings. Same look as the kit's .tbl-howto-link. */
.howto-row { text-align: center; margin: 0.35rem 0 0.9rem; }
.howto-link {
  background: none; border: 0; padding: 0.25rem 0.1rem;
  font: inherit; font-size: 0.92rem;
  color: var(--text-mid); text-decoration: underline; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.howto-link:hover, .howto-link:focus-visible { color: var(--text); }