/* ═══════════════════════════════════════════════════════════════════════════════
   Design Tokens & Consolidated Styles — takethestone.xyz
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Colors — backgrounds */
  --color-bg:              #0e1e3a;
  --color-bg-raised:       #1e3354;
  --color-bg-input:        #0e1e3a;  /* same as bg, used for semantic clarity */

  /* Colors — text */
  --color-text-primary:    #ffffff;
  --color-text-body:       #ccd8f0;
  --color-text-muted:      #8ca8c8;
  --color-text-subtle:     #6888a8;
  --color-text-dim:        #5a7898;

  /* Colors — accent */
  --color-accent-gold:     #f0d080;
  --color-accent-gold-dim: #c8a84a;
  --color-accent-red:      #e06c6c;
  --color-accent-red-muted:#6a8aaa;

  /* Colors — stone (CSS dots only) */
  --color-stone-black:     #111111;
  --color-stone-black-hi:  #555555;
  --color-stone-white:     #ffffff;
  --color-stone-white-lo:  #cccccc;
  --color-stone-bd-black:  #333333;
  --color-stone-bd-white:  #aaaaaa;

  /* Colors — shadows */
  --color-shadow-dark:     #070f1f;
  --color-shadow-light:    #1a2e52;
  --color-shadow-board:    #04090f;

  /* Colors — borders, separators, state */
  --color-border-panel:    #2a4570;
  --color-border-faint:    #1a2e52;
  --color-border-accent:   #253a55;
  --color-inset-line:      #f0d080;

  /* Typography — font-size tiers */
  --text-xl:    1.5rem;   /* status bar             */
  --text-lg:    1.1rem;   /* popup, input numbers   */
  --text-base:  1rem;     /* scroll-fade, icons     */
  --text-sm:    0.9rem;   /* brand, loader, headings */
  --text-xs:    0.82rem;  /* body, buttons, panels  */
  --text-2xs:   0.78rem;  /* log stats, notices     */
  --text-3xs:   0.72rem;  /* fine print, labels     */
  --text-4xs:   0.648rem; /* mobile labels only      */

  /* Typography — spacing */
  --letter-spacing-brand:  0.18em;
  --letter-spacing-label:  0.07em;
  --letter-spacing-menu:   0.04em;

  /* Spacing — general */
  --space-xs:   0.25rem;
  --space-sm:   0.4rem;
  --space-md:   0.75rem;
  --space-lg:   1.25rem;
  --space-xl:   2rem;

  /* Spacing — gaps */
  --gap-xs:    0.2rem;
  --gap-sm:    0.4rem;
  --gap-md:    0.5rem;
  --gap-lg:    0.85rem;
  --gap-xl:    1rem;
  --gap-2xl:   1.25rem;
  --gap-3xl:   1.5rem;
  --gap-4xl:   2rem;

  /* Padding — components */
  --pad-btn-v:    0.4rem;
  --pad-btn-h:    1.1rem;
  --pad-panel-v:  1.25rem;
  --pad-panel-h:  1.25rem;
  --pad-panel-b:  1.5rem;
  --pad-input-v:  0.35rem;
  --pad-input-h:  0.4rem;
  --pad-label-v:  0.6rem;
  --pad-label-h:  0.85rem;
  --pad-nav-v:    0;
  --pad-nav-h:    0.85rem;
  --pad-toast-v:  0.5rem;
  --pad-toast-h:  0.5rem;
  --pad-section-h: 1rem;
  --pad-sm-v:     0.35rem;
  --pad-sm-h:     0.5rem;

  /* Radii */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;

  /* Shadows — raised (neomorphic light/dark pairs) */
  --shadow-raised-sm:   4px 4px 10px var(--color-shadow-dark),
                         -4px -4px 10px var(--color-shadow-light);
  --shadow-raised-md:   5px 5px 12px var(--color-shadow-dark),
                         -5px -5px 12px var(--color-shadow-light);
  --shadow-raised-lg:   7px 7px 16px var(--color-shadow-dark),
                         -7px -7px 16px var(--color-shadow-light);

  /* Shadows — inset */
  --shadow-inset-sm:   inset 2px 2px 6px var(--color-shadow-dark),
                        inset -2px -2px 6px var(--color-shadow-light);
  --shadow-inset-lg:   inset 4px 4px 10px var(--color-shadow-dark),
                        inset -4px -4px 10px var(--color-shadow-light);

  /* Shadows — other */
  --shadow-dropdown:    0 16px 32px var(--color-shadow-dark),
                         6px 0 16px var(--color-shadow-dark),
                        -6px 0 16px var(--color-shadow-dark);
  --shadow-toast:        0 8px 24px var(--color-shadow-dark);
  --shadow-popup:        0 16px 40px var(--color-shadow-dark);
  --shadow-board:        0 0 32px var(--color-shadow-board),
                         0 0 16px rgb(4 9 15 / 0.8);
  --shadow-card:         var(--shadow-raised-lg),
                         0 20px 60px rgb(0 0 0 / 0.6);
  --shadow-topbar:       0 4px 16px var(--color-shadow-dark);

  /* Transitions */
  --transition-fast:     0.15s;
  --transition-normal:   0.2s;

  /* Z-index layers */
  --z-topbar:    100;
  --z-dropdown:  200;
  --z-toast:     300;
  --z-backdrop:  400;
  --z-popup:     401;
  --z-overlay:   500;

  /* Layout */
  --bar-h:       3.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Reset & Base
   ═══════════════════════════════════════════════════════════════════════════════ */

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

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2xl);
  background: var(--color-bg);
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--color-text-primary);
  padding: calc(var(--bar-h) + var(--gap-3xl)) var(--pad-section-h) var(--gap-3xl);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Top Bar
   ═══════════════════════════════════════════════════════════════════════════════ */

.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--color-bg);
  box-shadow: var(--shadow-topbar);
  z-index: var(--z-topbar);
}

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 0 var(--pad-section-h);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-brand);
  text-transform: uppercase;
  color: var(--color-accent-gold);
  flex-shrink: 0;
}

.top-bar-nav {
  display: flex;
  align-items: stretch;
}

/* ── Brand responsiveness ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .brand-text { display: none; }
  .top-bar-brand { padding: 0 0.6rem; }
  .top-panel-label { font-size: var(--text-4xs); }
  .top-panel-toggle { padding: 0 var(--gap-md); }
}

@media (max-width: 380px) {
  .top-panel-label { display: none; }
}

/* ── Top-bar toggle buttons ────────────────────────────────────────────────── */

.top-panel-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  height: 100%;
  padding: var(--pad-nav-v) var(--pad-nav-h);
  color: var(--color-text-subtle);
  cursor: pointer;
  user-select: none;
  list-style: none;
  box-shadow: -1px 0 0 var(--color-border-faint);
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.top-panel-toggle svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

.top-panel-label {
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}

.top-panel-toggle::-webkit-details-marker { display: none; }
.top-panel-toggle:hover {
  color: #b8cce8;
  background: rgb(255 255 255 / 0.03);
}

.top-panel[open] > .top-panel-toggle {
  color: #d0e0f8;
  background: rgb(255 255 255 / 0.04);
  box-shadow: -1px 0 0 var(--color-border-faint),
              inset 0 -3px 0 var(--color-inset-line);
}

/* ── Dropdown panels ───────────────────────────────────────────────────────── */

.top-panel-body {
  position: fixed;
  top: var(--bar-h);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  max-width: calc(100vw - var(--pad-section-h));
  max-height: var(--panel-max-h, calc(100dvh - var(--bar-h) - var(--space-lg)));
  background: var(--color-bg);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-dropdown);
  z-index: var(--z-dropdown);
  overflow-y: auto;
}

.top-panel-body .panel-body { border-top: none; }

/* ── Scroll-more fade indicator ────────────────────────────────────────────── */

.scroll-fade {
  position: sticky;
  bottom: 0;
  margin-top: -3.5rem;
  height: 3.5rem;
  background: linear-gradient(transparent, var(--color-bg) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--gap-md);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.scroll-fade span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  box-shadow: var(--shadow-raised-sm);
  color: #7898b8;
  font-size: var(--text-base);
  letter-spacing: 0.3em;
  padding: 0.45em 1.1em 0.45em calc(1.1em + 0.3em);
  border-radius: 1em;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

.scroll-fade.fade-hidden { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Log Panel
   ═══════════════════════════════════════════════════════════════════════════════ */

#log-panel .top-panel-body {
  display: flex;
  flex-direction: column;
  max-height: var(--log-panel-max-h, calc(100dvh - var(--bar-h) - var(--space-lg)));
  overflow: hidden;
}

.top-panel-body .log-entries {
  border-top: none;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* ── Log entries ───────────────────────────────────────────────────────────── */

.log-replay-controls,
.log-toolbar {
  display: flex;
  padding: var(--pad-sm-v) var(--pad-sm-h);
}

.log-replay-controls {
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
}

.log-toolbar {
  justify-content: flex-end;
}

.log-entries {
  max-height: 10rem;
  overflow-y: auto;
  background: var(--color-bg);
  padding: var(--pad-sm-v) var(--pad-sm-h);
}

.log-entry {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0.1rem 0;
  font-size: var(--text-xs);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.log-num        { color: var(--color-text-subtle);  min-width: 1.8rem; text-align: right; }
.log-move       { color: #e0eaff;                    flex: 1; }
.log-captures   { color: var(--color-accent-gold);   font-size: var(--text-3xs); }

.log-entry-active {
  box-shadow: var(--shadow-inset-sm);
  border-radius: var(--radius-sm);
  margin: 0 -0.25rem;
  padding: 0.1rem var(--pad-sm-h);
}

#log-stats {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-2xs);
  margin-right: auto;
  padding-left: 1.3rem;
}

.log-stats-count  { color: #e0eaff; min-width: 1rem; }
.log-stats-draws  { color: var(--color-text-subtle); margin-left: 0.1rem; }
.log-empty        { color: var(--color-text-subtle); font-style: italic; font-size: var(--text-xs); text-align: center; padding: var(--gap-sm) 0; }
.log-action-btn   { font-size: var(--text-3xs); padding: 0.15rem 0.6rem; }

.replay-counter {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 4rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Panel Body (shared by all dropdowns)
   ═══════════════════════════════════════════════════════════════════════════════ */

.panel-body {
  padding: var(--pad-panel-v) var(--pad-panel-h) var(--pad-panel-b);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--gap-3xl);
  align-items: flex-start;
}

.panel-body p, .panel-body li {
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.55;
}

.panel-body ul {
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.panel-body .prose-section {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.prose-heading {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: #8ea8d0;
}

/* ── Cost table ────────────────────────────────────────────────────────────── */

.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  color: var(--color-text-body);
}

.cost-table td {
  padding: 0.18rem 0;
}

.cost-table td:nth-child(2) {
  color: var(--color-text-subtle);
  padding: 0 var(--gap-md);
}

.cost-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cost-total td {
  padding-top: 0.35rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  color: #e0eaff;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Settings Section
   ═══════════════════════════════════════════════════════════════════════════════ */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.settings-hint {
  font-size: var(--text-3xs);
  color: #7898b8;
  font-style: italic;
}

/* ── Mode section ──────────────────────────────────────────────────────────── */

#mode-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-lg);
  width: 100%;
}

#mode-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  width: 100%;
}

#mode-error .donate-btn {
  align-self: center;
  padding: 0.55rem var(--space-xl);
}

.mode-toggle {
  display: flex;
  align-self: center;
  background: var(--color-bg);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  box-shadow: var(--shadow-inset-sm);
}

.mode-btn {
  color: var(--color-text-muted);
}

.mode-btn:hover {
  color: #d0e0f8;
}

.mode-btn.active {
  box-shadow: var(--shadow-inset-sm);
  color: var(--color-text-primary);
}

#local-options, #online-options, #practice-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-lg);
  width: 100%;
}

.color-picker {
  display: flex;
  gap: var(--gap-md);
  align-self: center;
}

.diff-picker {
  display: flex;
  align-self: center;
  background: var(--color-bg);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  box-shadow: var(--shadow-inset-sm);
}

.diff-btn {
  color: var(--color-text-muted);
}

.diff-btn:hover {
  color: #d0e0f8;
}

.diff-btn.active {
  box-shadow: var(--shadow-inset-sm);
  color: var(--color-text-primary);
}

.practice-notice {
  font-size: var(--text-2xs);
  color: var(--color-accent-red-muted);
  line-height: 1.5;
  border-left: 2px solid var(--color-border-accent);
  padding-left: 0.6rem;
  text-align: left;
  width: 100%;
}

/* ── Invite row ────────────────────────────────────────────────────────────── */

.invite-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  width: 100%;
}

.invite-row input {
  width: 100%;
  background: var(--color-bg);
  color: #7898b8;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.3rem var(--pad-sm-h);
  font-size: var(--text-3xs);
  font-family: monospace;
  cursor: default;
  text-align: left;
  direction: ltr;
  box-shadow: var(--shadow-inset-sm);
}

/* ── Board size pills ──────────────────────────────────────────────────────── */

.size-pills, .invite-btns {
  display: flex;
  gap: var(--gap-sm);
  width: 100%;
}

.invite-btns {
  justify-content: center;
}

.size-pill {
  flex: 1;
  padding: var(--pad-btn-v) 0;
}

/* ── Target inputs ─────────────────────────────────────────────────────────── */

.target-inputs {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  width: 100%;
}

.target-inputs label {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex: 1;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--pad-label-v) var(--pad-label-h);
  box-shadow: var(--shadow-raised-sm);
  font-size: var(--text-xs);
  color: #d0e0f8;
}

.target-inputs input[type="number"] {
  width: 3.5rem;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--pad-input-v) var(--pad-input-h);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-inset-lg);
  appearance: textfield;
  -moz-appearance: textfield;
}

.target-inputs input[type="number"]::-webkit-inner-spin-button,
.target-inputs input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

button, .donate-btn {
  background: var(--color-bg);
  padding: var(--pad-btn-v) var(--pad-btn-h);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  letter-spacing: var(--letter-spacing-menu);
  border: none;
  box-shadow: var(--shadow-raised-sm);
  transition: box-shadow var(--transition-fast),
              color var(--transition-fast);
}

button {
  color: #e0eaff;
}

button:hover {
  color: var(--color-text-primary);
  box-shadow: var(--shadow-raised-md);
}

button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.donate-btn {
  display: inline-block;
  align-self: flex-start;
  color: #e0eaff;
  text-decoration: none;
}

.donate-btn:hover {
  color: var(--color-text-primary);
  box-shadow: var(--shadow-raised-md);
}

/* Active/selected state */
.size-pill.active,
.color-choice-btn.active,
.lang-btn.active {
  box-shadow: var(--shadow-inset-sm);
  color: var(--color-text-primary);
}

button.btn-pending {
  color: #e0eeff;
}

button.btn-pending:hover {
  color: var(--color-text-primary);
}

.lang-btn {
  width: 100%;
  text-align: center;
  padding: var(--pad-sm-v) 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Board Area
   ═══════════════════════════════════════════════════════════════════════════════ */

#board-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xl);
}

/* ── Status bar ────────────────────────────────────────────────────────────── */

.status-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--space-xl);
}

.status {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  font-size: var(--text-xl);
  white-space: nowrap;
}

.winner-msg {
  font-weight: 600;
  color: var(--color-accent-gold);
}

.error-msg {
  font-size: var(--text-xs);
  color: var(--color-accent-red);
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
}

/* ── Game indicator ────────────────────────────────────────────────────────── */

#game-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-height: 1.2em;
}

#game-indicator em { font-style: italic; }
.ind-sep  { color: #4a6880; }
.ind-hint { color: var(--color-text-dim); font-style: italic; font-size: 0.77rem; }

/* ── Scoreboard ────────────────────────────────────────────────────────────── */

.scoreboard {
  display: flex;
  gap: var(--gap-3xl);
}

.score-entry, .color-choice-btn {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.score-entry {
  font-size: var(--text-sm);
}

.score-label {
  color: #d0e0f8;
}

.score-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Canvas board ──────────────────────────────────────────────────────────── */

.board {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-board);
  display: block;
  cursor: pointer;
}

/* ── Board flash animations ────────────────────────────────────────────────── */

@keyframes board-flash {
  0%   { box-shadow: 0 0 0 4px rgb(224 108 108 / 0.9), var(--shadow-board); }
  100% { box-shadow: var(--shadow-board); }
}

@keyframes board-win-flash {
  0%   { box-shadow: 0 0 0 4px rgb(240 208 128 / 0.9), var(--shadow-board); }
  100% { box-shadow: var(--shadow-board); }
}

.board-error { animation: board-flash     1.5s ease-out forwards; }
.board-win   { animation: board-win-flash 1.5s ease-out forwards; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Stone Dots (used in scoreboard, log entries, color pickers)
   ═══════════════════════════════════════════════════════════════════════════════ */

.stone-dot {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stone-dot.black {
  background: radial-gradient(circle at 38% 32%, var(--color-stone-black-hi), var(--color-stone-black));
  border: 1px solid var(--color-stone-bd-black);
}

.stone-dot.white {
  background: radial-gradient(circle at 38% 32%, var(--color-stone-white), var(--color-stone-white-lo));
  border: 1px solid var(--color-stone-bd-white);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Controls
   ═══════════════════════════════════════════════════════════════════════════════ */

.controls, .tutorial-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
}

.tutorial-step-counter {
  font-size: var(--text-3xs);
  color: #7898b8;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UI Panels
   ═══════════════════════════════════════════════════════════════════════════════ */

#ui-panels {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Invite Toast
   ═══════════════════════════════════════════════════════════════════════════════ */

#invite-toast {
  position: fixed;
  top: calc(var(--bar-h) + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(-0.4rem);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-panel);
  border-radius: 10px;
  padding: var(--pad-toast-v) var(--pad-toast-h) var(--pad-toast-v) 0.85rem;
  box-shadow: var(--shadow-toast);
  opacity: 0;
  transition: opacity var(--transition-normal),
              transform var(--transition-normal);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  max-width: min(95vw, 48rem);
  width: max-content;
}

#invite-toast.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#invite-toast-copy-btn {
  flex-shrink: 0;
  min-width: 5rem;
}

#invite-toast-url {
  color: #c0d8f8;
  font-size: var(--text-3xs);
  font-family: monospace;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  user-select: all;
  cursor: text;
}

#main-invite-btn {
  display: none;
  align-items: center;
  gap: var(--gap-sm);
  align-self: center;
}

#main-invite-btn.invite-ready { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Coming Soon Popup
   ═══════════════════════════════════════════════════════════════════════════════ */

#coming-soon-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
  z-index: var(--z-backdrop);
}

#coming-soon-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  border-radius: 14px;
  padding: var(--space-xl) 3rem;
  box-shadow: var(--shadow-popup);
  font-size: var(--text-lg);
  color: var(--color-accent-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: var(--z-popup);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tutorial Overlay
   ═══════════════════════════════════════════════════════════════════════════════ */

#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.72);
}

.tutorial-card {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-2xl);
  padding: var(--pad-panel-v) var(--pad-panel-h) var(--gap-xl);
  width: 260px;
  max-width: calc(100vw - var(--space-xl));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-lg);
  box-shadow: var(--shadow-card);
}

.tutorial-board svg {
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
}

.tutorial-text {
  font-size: var(--text-xs);
  color: var(--color-text-body);
  line-height: 1.6;
  text-align: center;
  height: 10rem;
  overflow-y: auto;
}

.tutorial-text strong {
  color: var(--color-accent-gold-dim);
}

.tutorial-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  width: 100%;
}

.tutorial-start-btn { align-self: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Loader
   ═══════════════════════════════════════════════════════════════════════════════ */

#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xl);
  color: #7898b8;
  font-size: var(--text-sm);
  padding: var(--space-xl) 0;
  letter-spacing: 0.05em;
  width: 100%;
}

#loader img {
  width: 64px; height: 64px;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   No-JS
   ═══════════════════════════════════════════════════════════════════════════════ */

#no-js {
  color: var(--color-accent-red);
  font-size: var(--text-sm);
  padding: var(--space-xl) 0;
  text-align: center;
  letter-spacing: var(--letter-spacing-menu);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════════════ */

footer {
  font-size: var(--text-3xs);
  color: var(--color-text-dim);
  margin-top: var(--gap-md);
}

footer a {
  color: var(--color-text-subtle);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-text-muted);
}