/* ═══════════════════════════════════════════════════
   ANAGRAM MAGIC — Complete Game Stylesheet
   Theme: Miniclip Anagram Magic — warm red / crimson
   ═══════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─────────────────────── */
:root {
  /* Core palette — Miniclip dark blue outer, red game board */
  --bg-deep: #0d1b2a;
  --bg-mid: #1b2838;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-solid: #ffffff;
  --board-bg: #8B1A1A;
  --board-bg-deep: #6B0F0F;

  /* Accent colors */
  --gold: #DAA520;
  --gold-dim: #B8860B;
  --gold-glow: rgba(218, 165, 32, 0.4);
  --purple-accent: #C0392B;
  --purple-glow: rgba(192, 57, 43, 0.4);
  --magenta: #E74C3C;
  --magenta-glow: rgba(231, 76, 60, 0.35);
  --blue-accent: #3498db;

  /* Tile colors */
  --tile-bg: #FAFAFA;
  --tile-text: #1a1a1a;
  --tile-border: #cccccc;
  --tile-shadow: rgba(0, 0, 0, 0.25);
  --tile-selected: #fff8dc;

  /* UI colors */
  --text-primary: #ffffff;
  --text-secondary: #f5d6d6;
  --text-muted: #d4a0a0;
  --btn-primary-bg: linear-gradient(135deg, #C0392B, #E74C3C);
  --btn-primary-hover: linear-gradient(135deg, #A93226, #C0392B);
  --btn-success-bg: linear-gradient(135deg, #E67E22, #F39C12);
  --btn-success-hover: linear-gradient(135deg, #D35400, #E67E22);
  --btn-danger: #C0392B;

  /* Vowel / Consonant */
  --vowel-bg: linear-gradient(135deg, #2980b9, #3498db);
  --vowel-hover: linear-gradient(135deg, #1a6fa0, #2980b9);
  --consonant-bg: linear-gradient(135deg, #c0392b, #e74c3c);
  --consonant-hover: linear-gradient(135deg, #96281b, #c0392b);

  /* Timer */
  --timer-green: #27ae60;
  --timer-yellow: #f1c40f;
  --timer-red: #e74c3c;

  /* Sizing */
  --max-width: 1100px;
  --tile-size: 56px;
  --tile-size-sm: 44px;
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-lg: 14px;

  /* Fonts */
  --font-heading: 'Fredoka One', cursive;
  --font-body: 'Nunito', sans-serif;

  /* Z-index layers */
  --z-base: 1;
  --z-card: 10;
  --z-overlay: 100;
  --z-toast: 200;
}

/* ─── Reset & Base ──────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 50%, #0a1628 100%);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ─── Utility Classes ───────────────────────────── */
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.centered { text-align: center; }

/* Focus indicators for accessibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.96); }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover { box-shadow: none; }

.btn-primary {
  background: var(--btn-primary-bg);
  box-shadow: 0 4px 15px var(--purple-glow);
}
.btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-hover);
  box-shadow: 0 6px 25px var(--purple-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 12px;
  font-size: 0.85rem;
}
.btn-ghost:hover { color: var(--gold); }

.btn-lg {
  padding: 16px 40px;
  font-size: 1.15rem;
  border-radius: var(--border-radius-lg);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: var(--border-radius-sm);
}

.btn-submit {
  background: var(--btn-success-bg);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
  font-size: 1.1rem;
  padding: 14px 44px;
  border-radius: var(--border-radius-lg);
}
.btn-submit:hover:not(:disabled) {
  background: var(--btn-success-hover);
  box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
}

.btn-vowel {
  background: var(--vowel-bg);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
  flex-direction: column;
  padding: 16px 32px;
  min-width: 140px;
  border-radius: var(--border-radius-lg);
}
.btn-vowel:hover:not(:disabled) {
  background: var(--vowel-hover);
  box-shadow: 0 6px 25px rgba(37, 99, 235, 0.5);
  transform: translateY(-2px);
}
.btn-consonant {
  background: var(--consonant-bg);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35);
  flex-direction: column;
  padding: 16px 32px;
  min-width: 140px;
  border-radius: var(--border-radius-lg);
}
.btn-consonant:hover:not(:disabled) {
  background: var(--consonant-hover);
  box-shadow: 0 6px 25px rgba(220, 38, 38, 0.5);
  transform: translateY(-2px);
}

.btn-label { font-size: 1.15rem; }
.btn-hint { font-size: 0.75rem; opacity: 0.7; font-weight: 400; }

.btn-icon { font-size: 1.2em; }

.btn-conundrum-submit {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}
.btn-conundrum-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #b45309, #d97706);
  box-shadow: 0 6px 30px rgba(245, 158, 11, 0.55);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   INPUT FIELDS
   ═══════════════════════════════════════════════════ */
.input-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(192, 57, 43, 0.3);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.input-group:focus-within {
  border-color: var(--purple-accent);
  box-shadow: 0 0 15px var(--purple-glow);
}

.input-icon {
  padding: 0 12px;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.text-input {
  flex: 1;
  padding: 12px 16px 12px 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
}
.text-input::placeholder { color: var(--text-muted); }
.text-input:focus { outline: none; }

/* ═══════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════ */
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(192, 57, 43, 0.2);
  border-top-color: var(--purple-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
.spinner-sm {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(192, 57, 43, 0.2);
  border-top-color: var(--purple-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════
   LOBBY PAGE
   ═══════════════════════════════════════════════════ */
.lobby {
  width: 100%;
  max-width: var(--max-width);
  padding: 24px 16px 48px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(160deg, var(--board-bg) 0%, var(--board-bg-deep) 100%);
  border-radius: var(--border-radius-lg);
  margin-top: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Floating Sparkles ─────────────────────────── */
.sparkles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sparkle {
  position: absolute;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0;
  animation: sparkle-float 6s ease-in-out infinite;
}
.s1 { top: 10%; left: 8%;  animation-delay: 0s; }
.s2 { top: 25%; left: 85%; animation-delay: 0.8s; }
.s3 { top: 50%; left: 12%; animation-delay: 1.6s; }
.s4 { top: 65%; left: 90%; animation-delay: 2.4s; }
.s5 { top: 80%; left: 20%; animation-delay: 3.2s; }
.s6 { top: 15%; left: 70%; animation-delay: 4s; }
.s7 { top: 40%; left: 95%; animation-delay: 4.8s; }
.s8 { top: 75%; left: 5%;  animation-delay: 5.6s; }

@keyframes sparkle-float {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-15px) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translateY(-30px) scale(0.8) rotate(45deg);
  }
  80% {
    opacity: 0.6;
    transform: translateY(-10px) scale(1.1) rotate(90deg);
  }
}

/* ─── Lobby Header & Title ──────────────────────── */
.lobby-header {
  text-align: center;
  padding: 40px 0 28px;
  position: relative;
  z-index: var(--z-base);
}

/* Lobby proper (STEP 2) reveal animation */
.lobby-main {
  animation: fade-in 0.4s ease both;
}

.game-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  color: var(--gold);
  text-shadow:
    0 0 20px var(--gold-glow),
    0 0 40px var(--gold-glow),
    0 2px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
}

.title-letter {
  display: inline-block;
  animation: title-bounce 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

.title-spacer {
  width: 16px;
}

@keyframes title-bounce {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-8px); }
  30% { transform: translateY(0); }
}

.subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: 12px;
  font-weight: 600;
}

/* ─── Lobby Cards ───────────────────────────────── */
.lobby-card {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  margin-bottom: 18px;
  position: relative;
  z-index: var(--z-base);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lobby-card .input-label,
.lobby-card .section-title {
  color: var(--text-primary);
}
.lobby-card .rooms-empty p {
  color: var(--text-muted);
}

.name-section {
  text-align: center;
}

.create-section {
  text-align: center;
  padding: 22px;
}
.create-section .btn {
  width: 100%;
  max-width: 360px;
}

/* ─── STEP 1: Gate card (identify before entering) ── */
.gate-card {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 28px 28px 30px;
  border: 1px solid rgba(218, 165, 32, 0.22);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(218, 165, 32, 0.12), transparent 60%),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.gate-intro {
  margin-bottom: 22px;
}
.gate-sigil {
  display: inline-block;
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 8px;
  animation: pulse-glow 2.4s ease-in-out infinite;
}
.gate-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--gold);
  text-shadow: 0 0 18px var(--gold-glow);
  margin-bottom: 4px;
}
.gate-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.gate-card .input-label {
  text-align: left;
}
.gate-error {
  min-height: 1.1em;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fca5a5;
  text-align: left;
}
.gate-error:empty {
  min-height: 0;
  margin-top: 0;
}
.avatar-optional-hint {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 8px;
}
.gate-continue {
  margin-top: 22px;
  width: 100%;
  max-width: 360px;
}

/* ─── Profile chip (editable identity on STEP 2) ──── */
.profile-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(218, 165, 32, 0.25);
  border-radius: 999px;
  padding: 8px 8px 8px 8px;
  margin-bottom: 18px;
  position: relative;
  z-index: var(--z-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.profile-chip-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(218, 165, 32, 0.35);
}
.profile-chip-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }
.profile-chip-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.profile-chip-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}
.profile-chip-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-chip-edit {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.profile-chip-edit:hover { color: var(--gold); border-color: rgba(218, 165, 32, 0.4); }

/* ─── Rejoin section (recovery path — stands out) ─── */
.rejoin-section {
  border: 1px solid rgba(218, 165, 32, 0.45);
  background:
    linear-gradient(135deg, rgba(218, 165, 32, 0.12), rgba(192, 57, 43, 0.1)),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    0 0 0 1px rgba(218, 165, 32, 0.15),
    0 8px 26px rgba(0, 0, 0, 0.4);
  animation: fade-in 0.35s ease both;
}
.rejoin-section .section-title { color: var(--gold); }
.rejoin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rejoin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: var(--border-radius);
  padding: 14px 16px;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.rejoin-item:hover {
  border-color: rgba(218, 165, 32, 0.55);
  transform: translateY(-1px);
}
.rejoin-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rejoin-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rejoin-code {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold);
}
.rejoin-status {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
}
.rejoin-status-playing {
  color: #86efac;
  background: rgba(39, 174, 96, 0.18);
  border: 1px solid rgba(39, 174, 96, 0.4);
}
.rejoin-status-waiting {
  color: #f5d6d6;
  background: rgba(192, 57, 43, 0.2);
  border: 1px solid rgba(192, 57, 43, 0.4);
}
.rejoin-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.rejoin-offline {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fca5a5;
  background: rgba(192, 57, 43, 0.2);
  border: 1px solid rgba(192, 57, 43, 0.4);
  padding: 1px 7px;
  border-radius: 6px;
}
.rejoin-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rejoin-btn {
  flex-shrink: 0;
  padding: 10px 20px;
}

/* ─── Rooms List ────────────────────────────────── */
.section-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-icon { font-size: 1.4rem; }

.rooms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rooms-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

.rooms-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(192, 57, 43, 0.15);
  border-radius: var(--border-radius);
  padding: 14px 18px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.room-item:hover {
  border-color: rgba(192, 57, 43, 0.4);
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.room-item .btn { flex-shrink: 0; }

.room-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-code {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold);
}

.room-host {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ─── Lobby Footer ──────────────────────────────── */
.lobby-footer {
  margin-top: 12px;
  position: relative;
  z-index: var(--z-base);
}

.network-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.network-icon { font-size: 1.2rem; }

.share-url {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 14px;
  border-radius: var(--border-radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #ffd700;
  word-break: break-all;
}

/* ─── Lobby responsive (mobile ~360px → desktop) ──── */
@media (max-width: 600px) {
  .lobby-header {
    padding: 28px 0 20px;
  }
  .gate-card {
    padding: 22px 18px 24px;
  }
  .gate-sigil { font-size: 2.2rem; }
  .gate-title { font-size: 1.35rem; }
  .gate-continue,
  .create-section .btn { max-width: none; }

  .profile-chip {
    gap: 10px;
    padding: 7px;
  }
  .profile-chip-avatar { width: 38px; height: 38px; }
  .profile-chip-name { font-size: 0.95rem; }
  .profile-chip-edit { padding: 6px 10px; font-size: 0.78rem; }

  /* Keep the rejoin row COMPACT on mobile: info + button on ONE row (not a
     tall stacked column) so the "Rejoin Your Game" card doesn't balloon the
     lobby height when an active room is found. */
  .rejoin-section { padding: 14px 12px; margin-bottom: 12px; }
  .rejoin-section .section-title { font-size: 1.05rem; margin-bottom: 8px; }
  .rejoin-item {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .rejoin-btn { width: auto; flex-shrink: 0; padding: 8px 14px; }
  .rejoin-code { font-size: 1rem; }
  .rejoin-meta { font-size: 0.76rem; }

  .room-item {
    padding: 12px 14px;
  }
}

@media (max-width: 380px) {
  .gate-title { font-size: 1.2rem; }
  .rejoin-top { gap: 6px; }
  .room-code { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════
   GAME PAGE — Common Elements
   ═══════════════════════════════════════════════════ */
.game-container {
  width: 95%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 32px;
  min-height: calc(100vh - 40px);
  position: relative;
  background: linear-gradient(160deg, var(--board-bg) 0%, var(--board-bg-deep) 100%);
  border-radius: var(--border-radius-lg);
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mobile: reclaim horizontal + vertical space. Placed AFTER the base
   .game-container rule (above) so it wins the cascade at equal specificity.
   Smaller side gutter widens the 9-tile rows; trimmed vertical padding/margins
   let the playfield use the screen height instead of leaving big voids. */
@media (max-width: 600px) {
  .game-container {
    width: 100%;
    padding: 10px 11px;
    margin-top: 8px;
    margin-bottom: 8px;
    min-height: calc(100vh - 16px);
  }
}

/* Game states: only .active is visible */
.game-state {
  display: none;
  width: 100%;
}
.game-state.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: state-enter 0.35s ease;
}

/* Round exit / enter transitions */
#state-round.active {
  animation: state-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#state-round-result.active {
  animation: state-enter 0.3s ease;
}
#state-picking.active {
  animation: state-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes state-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.state-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 48px 32px;
  margin-top: 10vh;
  width: 100%;
  max-width: 460px;
  color: var(--text-primary);
}
.state-card h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.state-card .muted {
  margin-bottom: 20px;
  color: var(--text-muted);
}

.room-code-inline {
  color: var(--gold);
  font-family: var(--font-heading);
}

.name-prompt {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Waiting State ─────────────────────────────── */
.waiting-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.3); }
}

.room-code-display {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--gold);
  letter-spacing: 8px;
  text-shadow: 0 0 20px var(--gold-glow), 0 0 40px var(--gold-glow);
  margin: 12px 0 24px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
  border: 2px solid rgba(255, 215, 0, 0.2);
}
/* Compact room code inside the contained waiting card */
.waiting-room .room-code-display {
  font-size: 2rem;
  letter-spacing: 7px;
  margin: 0;
  padding: 8px 16px;
}

.waiting-text {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.dots-anim::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%  { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.share-info {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.share-info p { margin-bottom: 8px; }
.share-info .share-url { display: block; margin: 8px 0; }

/* Compact single-line share row in the waiting room */
.waiting-room .share-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
.waiting-room .share-info .share-url {
  display: block;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-secondary);
}
.waiting-room .share-info .btn-sm { flex-shrink: 0; white-space: nowrap; }

/* ═══════════════════════════════════════════════════
   GAME BOARD — Shared Layout
   ═══════════════════════════════════════════════════ */
.game-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
}

/* ─── Players Bar ───────────────────────────────── */
.players-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
  padding: 10px 18px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  color: var(--text-primary);
}
.player-card.active-turn {
  border-color: var(--gold);
  box-shadow: 0 0 20px var(--gold-glow), 0 0 40px rgba(255, 215, 0, 0.15);
  animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 15px var(--gold-glow); }
  50% { box-shadow: 0 0 30px var(--gold-glow), 0 0 50px rgba(255, 215, 0, 0.2); }
}

.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

.player-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-badge {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─── Turn Indicator ────────────────────────────── */
.turn-indicator {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  padding: 10px 24px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  font-size: 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ─── Pick Buttons ──────────────────────────────── */
.pick-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.picks-remaining {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ─── Picked Letters Display ────────────────────── */
.picked-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 68px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--border-radius);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  width: 100%;
  max-width: 540px;
}

/* ═══════════════════════════════════════════════════
   LETTER TILES
   ═══════════════════════════════════════════════════ */
.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--tile-text);
  background: var(--tile-bg);
  border: 2px solid var(--tile-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:
    0 3px 0 #c4b48a,
    0 5px 10px var(--tile-shadow);
  text-transform: uppercase;
}
.tile:hover:not(.tile-used):not(.tile-empty) {
  transform: translateY(-3px);
  box-shadow:
    0 5px 0 #c4b48a,
    0 8px 15px var(--tile-shadow);
}
.tile:active:not(.tile-used):not(.tile-empty) {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 #c4b48a,
    0 2px 5px var(--tile-shadow);
}

.tile-used {
  opacity: 0.15;
  cursor: default;
  transform: scale(0.85);
  pointer-events: none;
}

.tile-empty {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(192, 57, 43, 0.15);
  box-shadow: none;
  cursor: default;
}

/* Tile pop-in animation */
.tile-enter {
  animation: tile-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes tile-pop {
  0% { transform: scale(0) rotateY(90deg); opacity: 0; }
  60% { transform: scale(1.1) rotateY(-5deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0); opacity: 1; }
}

/* Tile selection animation */
.tile-select {
  animation: tile-bounce-down 0.3s ease forwards;
}
@keyframes tile-bounce-down {
  0% { transform: translateY(0); }
  40% { transform: translateY(-10px) scale(1.1); }
  70% { transform: translateY(5px) scale(0.95); }
  100% { transform: translateY(0) scale(1); }
}

/* Tile return animation */
.tile-return {
  animation: tile-bounce-up 0.25s ease forwards;
}
@keyframes tile-bounce-up {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* ─── Multiplier Badges ─────────────────────────── */
.tile-multiplier {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.6rem;
  font-family: var(--font-heading);
  padding: 2px 6px;
  border-radius: 10px;
  color: #fff;
  z-index: 2;
  pointer-events: none;
}

.mult-2 {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.mult-3 {
  background: linear-gradient(135deg, #9333ea, #c084fc);
  box-shadow: 0 0 8px var(--magenta-glow);
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════
   ROUND STATE
   ═══════════════════════════════════════════════════ */
.round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  padding: 8px 16px;
  min-width: 90px;
  border: 1px solid rgba(192, 57, 43, 0.15);
}

.score-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-value {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-glow);
}

.round-badge {
  background: var(--bg-card);
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 24px;
  padding: 6px 20px;
  text-align: center;
}
.round-badge span {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold);
}

/* ─── Timer Bar ─────────────────────────────────── */
.timer-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.timer-bar {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background: var(--timer-green);
  transition: width 1s linear, background-color 0.5s ease;
  transform-origin: left;
}
.timer-fill.warning { background: var(--timer-yellow); }
.timer-fill.danger  {
  background: var(--timer-red);
  animation: timer-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.timer-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════
   MINICLIP-STYLE ROUND LAYOUT
   ═══════════════════════════════════════════════════ */

/* Top bar: players on sides, round+timer center */
.round-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  padding-top: 44px;  /* room for "I'm done" bubble above cards */
  padding-bottom: 28px; /* room for progress squares below cards */
}

/* Game card container — wraps the entire round board */
.round-board {
  padding: 8px 0;
}

/* Player panels (white cards — Miniclip style) */
.player-panel {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 14px 20px 16px;
  text-align: center;
  width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #1a1a1a;
  position: relative;
  /* Fixed height so cards match regardless of avatar */
  min-height: 200px;
}

.panel-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.panel-avatar {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  background: #e8e8e8;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: #fff;
  overflow: hidden;
  border: 2px solid #ddd;
}

.panel-score {
  font-size: 1rem;
  color: #555;
  font-weight: 700;
}

/* Word progress squares — absolutely below the card */
.panel-word-progress {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 3px;
  justify-content: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  background: rgba(80, 10, 10, 0.6);
  padding: 3px 6px;
  border-radius: 4px;
}
.panel-word-progress:not(:empty) {
  display: flex;
}

.progress-square {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-square.filled {
  background: #fff;
  border-color: #ddd;
}

/* Avatars are press-and-hold targets (diagnostics gesture) — never let a long
   press select text or pop the iOS callout/magnifier. */
.panel-avatar,
.player-avatar,
.result-panel-avatar,
.pick-avatar,
.gameover-avatar,
.profile-chip-avatar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* "I'm done" speech bubble — absolutely above the card */
.panel-done-bubble {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 14px;
  display: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.panel-done-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

.panel-done-bubble.visible {
  display: block;
  animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bubble-pop {
  0% { transform: translateX(-50%) scale(0); }
  60% { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) scale(1); }
}
.panel-score strong {
  color: #1a1a1a;
  font-size: 1.1rem;
}

/* Center: Round badge + Timer circle */
.round-center {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.round-badge-circle {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e8e8e8 0%, #c8c8c8 30%, #ddd 50%, #b0b0b0 70%, #ccc 100%);
  border: 3px solid #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.1);
}

.round-badge-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #555;
  line-height: 1;
}

.round-badge-num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: #222;
  line-height: 1;
}

/* Timer circle (stopwatch style) */
.timer-circle {
  width: 95px;
  height: 95px;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(145deg, #e8e8e8 0%, #c8c8c8 30%, #ddd 50%, #b0b0b0 70%, #ccc 100%);
  border: 3px solid #999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer-svg {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  transform: rotate(-90deg);
}

.timer-track {
  fill: none;
  stroke: #ccc;
  stroke-width: 8;
}

.timer-progress {
  fill: none;
  stroke: var(--timer-green);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.5s ease;
}

.timer-progress.warning {
  stroke: var(--timer-yellow);
}

.timer-progress.danger {
  stroke: var(--timer-red);
}

.timer-text-inner {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #333;
  z-index: 2;
  position: relative;
}

/* Instruction text */
.round-instruction {
  text-align: center;
  padding: 8px 0;
}

.instruction-main {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.instruction-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Word row: word slots + backspace */
.word-row,
.rack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.word-row .word-area {
  flex: 1;
}

/* Dark maroon word slots */
.word-tiles {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: 62px;
  padding: 8px;
  background: rgba(60, 5, 5, 0.5);
  border-radius: var(--border-radius-sm);
  border: none;
}

/* Empty slot placeholders inside word area */
.word-tiles:empty::before {
  content: '□ □ □ □ □ □ □ □ □';
  color: rgba(100, 20, 20, 0.5);
  font-size: 1.4rem;
  letter-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Letter rack row */
.rack-row .letter-rack {
  flex: 1;
}

/* Tool buttons (Backspace, Shuffle) — metallic dark gray */
.btn-tool {
  background: linear-gradient(145deg, #555, #333);
  color: #ddd;
  border: 1px solid #666;
  border-radius: var(--border-radius-sm);
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  white-space: nowrap;
  min-width: 100px;
}

.btn-tool:hover:not(:disabled) {
  background: linear-gradient(145deg, #666, #444);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.btn-tool:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Icon-only tool buttons (backspace / shuffle): a compact square that shows a
   single glyph and steals minimal horizontal space from the tile rows. */
.btn-tool-icon {
  min-width: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

/* "I'm done" submit button — big orange */
.btn-done {
  background: linear-gradient(135deg, #E67E22, #F39C12);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  padding: 16px 60px;
  border-radius: 30px;
  border: 3px solid #D35400;
  box-shadow: 0 5px 15px rgba(230, 126, 34, 0.5);
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
  letter-spacing: 0.02em;
}

.btn-done:hover:not(:disabled) {
  background: linear-gradient(135deg, #D35400, #E67E22);
  box-shadow: 0 6px 20px rgba(230, 126, 34, 0.6);
  transform: translateY(-2px);
}

.btn-done:disabled {
  background: linear-gradient(135deg, #999, #888);
  border-color: #777;
  box-shadow: none;
}

/* Silver multiplier tile (x2) — shiny metallic */
.tile.mult-tile-2 {
  background: linear-gradient(145deg, #f0f0f0 0%, #d8d8d8 30%, #e8e8e8 50%, #c0c0c0 70%, #d0d0d0 100%) !important;
  border-color: #aaa !important;
  box-shadow: 0 3px 0 #999, 0 5px 10px rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.8) !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

/* Gold multiplier tile (x3) — shiny metallic */
.tile.mult-tile-3 {
  background: linear-gradient(145deg, #FFE44D 0%, #FFD700 25%, #FFEC80 45%, #DAA520 65%, #FFD700 85%, #FFC800 100%) !important;
  border-color: #B8860B !important;
  color: #5a3e00 !important;
  box-shadow: 0 3px 0 #B8860B, 0 5px 10px rgba(0,0,0,0.25), inset 0 1px 3px rgba(255,255,255,0.6) !important;
  text-shadow: 0 1px 1px rgba(255, 215, 0, 0.5);
}

/* Responsive for round layout */
@media (max-width: 600px) {
  .round-top {
    gap: 8px;
  }

  .player-panel {
    min-width: 80px;
    max-width: 100px;
    width: auto;
    min-height: auto;
    padding: 6px 8px 8px;
  }

  .panel-avatar {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .panel-name {
    font-size: 0.7rem;
    max-width: 80px;
    margin-bottom: 4px;
  }

  .panel-score {
    font-size: 0.75rem;
  }
  .panel-score strong {
    font-size: 0.85rem;
  }

  .round-top {
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .panel-done-bubble {
    top: -30px;
    font-size: 0.65rem;
    padding: 4px 10px;
  }

  .panel-word-progress {
    bottom: -18px;
    gap: 2px;
    padding: 2px 4px;
  }
  /* Non-wrapping single row of up to 9 squares; small enough to sit under the
     card (which is nudged inward below so this never spills off-screen). */
  .progress-square {
    width: 8px;
    height: 8px;
  }

  .round-badge-circle,
  .timer-circle {
    width: 60px;
    height: 60px;
  }

  .round-badge-num {
    font-size: 1rem;
  }

  .round-badge-label {
    font-size: 0.55rem;
  }

  .timer-text-inner {
    font-size: 0.75rem;
  }

  .btn-tool:not(.btn-tool-icon) {
    padding: 8px 10px;
    font-size: 0.7rem;
    min-width: 75px;
  }

  .btn-done {
    font-size: 1.1rem;
    padding: 14px 40px;
  }

  .word-row,
  .rack-row {
    flex-direction: column;
    gap: 8px;
  }

  .word-row .word-area,
  .rack-row .letter-rack {
    width: 100%;
  }

  .btn-tool:not(.btn-tool-icon) {
    width: 100%;
    min-width: unset;
  }

  /* Icon tool buttons stay a compact square matching the tile height (~40px)
     so the word/rack rows keep them inline and get maximum width. */
  .btn-tool-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.2rem;
  }

  .instruction-main {
    font-size: 1.05rem;
  }

  /* ── Mobile word-row: keep the SELECTED-WORD tiles on a single ROW that
     ALWAYS fits the available width ── no horizontal scroll, no wrap to a 2nd
     line. The tiles SHRINK uniformly to fit when there are many of them (up to
     9), and stay as large as possible (capped ~40px) when there are few. This
     keeps the rack + submit button on-screen on a 360px phone. */
  /* Higher specificity (.word-area .word-tiles) so these win over the general
     `.word-tiles { min-height:68px; flex-wrap:wrap }` defined later in the
     sheet. Applies to both the round (#word-tiles) and conundrum
     (#conundrum-word-tiles) since both live inside .word-area. */
  /* Harmonized pair: the entered-word slot and the rack share the SAME height
     (min-height 48px), vertical padding (5px) and centering so they read as a
     consistent matched pair. Tiles inside stay equal squares. */
  .word-area .word-tiles {
    flex-wrap: nowrap;
    gap: 3px;
    min-height: 48px;
    height: 48px;
    padding: 5px;
    /* hidden (not auto): nothing scrolls or spills past the contained row */
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }
  .word-area .word-tiles:empty {
    justify-content: center;
    min-height: 48px;
  }
  /* Square tiles that divide the row width EQUALLY and fill it. Width is the
     full equal share (flex:1 1 0, min-width:0) capped at 40px; height follows
     width via aspect-ratio. The container has no fixed height, so height never
     fights the flex-computed width — this keeps the tiles as WIDE as possible
     (not thin) while staying square. Font scales with the tile via clamp(). */
  .word-area .word-tiles .tile {
    flex: 1 1 0;
    width: auto;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    font-size: clamp(0.8rem, 4.4vw, 1.2rem);
    flex-shrink: 1;
  }
  /* Shrink the multiplier badge so it still reads cleanly on a narrow tile. */
  .word-area .word-tiles .tile .tile-multiplier {
    transform: scale(0.72);
    top: -6px;
    right: -6px;
    transform-origin: top right;
  }

  /* Letter rack: a single NON-WRAPPING row whose 9 tiles shrink-to-fit the
     available width (mirrors the entered-word row) — no wrap to 2nd/3rd line,
     no scroll. This keeps the rack compact so the submit button stays on
     screen, and makes rack tiles as wide as the word tiles. */
  .letter-rack {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 5px;
    min-height: 48px;
    height: 48px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }
  /* Flexible square rack tiles: equal share of the row, capped at 40px, square
     via aspect-ratio, font scales down with the tile. Applies to the round
     (#letter-rack) and conundrum (#conundrum-rack) racks alike. */
  .letter-rack .tile {
    flex: 1 1 0;
    width: auto;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    font-size: clamp(0.8rem, 4.4vw, 1.4rem);
    flex-shrink: 1;
  }
  .letter-rack .tile .tile-multiplier {
    transform: scale(0.72);
    top: -6px;
    right: -6px;
    transform-origin: top right;
  }

  /* Tighten the 2-player round/conundrum vertical rhythm (mirrors the compact
     many-player spacing) so a full 9-letter word still leaves rack + submit on
     screen at 360×640 / 390×667. Scoped to the round + conundrum boards so the
     picking / result / waiting screens keep their original spacing. */
  #state-round .game-board,
  #state-conundrum .game-board {
    gap: 10px;
    padding: 8px 0;
  }
  #state-round .round-top,
  #state-conundrum .round-top {
    padding-top: 26px;
    padding-bottom: 16px;
  }
  #state-round .instruction-sub,
  #state-conundrum .instruction-sub { display: none; }
  #state-round .round-instruction,
  #state-conundrum .round-instruction { padding: 4px 0; }
  #state-round .word-meta { margin-top: 4px; min-height: 16px; }
  #state-round .opponent-status,
  #state-conundrum .opponent-status { padding: 6px 14px; font-size: 0.8rem; }

  /* ── 2-player round/conundrum: mirror the many-player mobile rhythm so the
     player cards sit at the TOP and the playing controls distribute through the
     remaining viewport height (no big top/bottom void), and keep the
     backspace/shuffle buttons INLINE beside the tile rows instead of stacked on
     their own centred rows. The 2-player player CARDS themselves (the two side
     panels + centre round/timer) are intentionally left unchanged. */
  .players-2:has(#state-round.game-state.active),
  .players-2:has(#state-conundrum.game-state.active) {
    justify-content: flex-start;
  }
  .players-2 #state-round.active,
  .players-2 #state-conundrum.active {
    flex: 1 1 auto;
    min-height: 0;
  }
  .players-2 #state-round .game-board,
  .players-2 #state-conundrum .game-board {
    flex: 1 1 auto;
    width: 100%;
    justify-content: space-between;
  }
  .players-2 #state-round .round-top,
  .players-2 #state-conundrum .round-top {
    padding-top: 22px;
    padding-bottom: 8px;
    /* Nudge the two player cards inward from the screen edges so the live
       letter-count squares centred under each card never spill off-screen. */
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Keep the tool buttons inline (row) beside the tile rows — no tall stacked
     column — so the playfield reclaims that vertical space and the tiles take
     the full remaining width (adaptive, capped at 40px). */
  .players-2 .word-row,
  .players-2 .rack-row {
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }
  .players-2 .word-row .word-area,
  .players-2 .rack-row .letter-rack {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  /* Scramble parity (mobile, 2-player): a letter you've picked LEAVES the
     scramble row entirely (instead of staying dimmed in place), so the
     remaining scramble tiles grow to the SAME comfortable size as the selected
     (word) tiles. Single row, no wrap, no scroll. Covers the normal
     rack (#letter-rack) and the conundrum rack (#conundrum-rack). Desktop keeps
     the dimmed-in-place look (this rule is inside the mobile media query). */
  .players-2 #letter-rack .tile.tile-used,
  .players-2 #conundrum-rack .tile.tile-used {
    display: none;
  }
  /* Match the scramble row's gap/padding/tile-sizing EXACTLY to the selected
     (word) row. The rack otherwise used gap:6/padding:10, and that extra
     padding inside the fixed 48px-tall row squeezed each tile down to ~28px
     while the word tiles (padding:5) were ~38px — so 9-in-scramble looked
     smaller than 9-in-selected. Same gap+padding => identical tile size. */
  .players-2 .rack-row .letter-rack {
    gap: 3px;
    padding: 5px;
  }
  .players-2 .rack-row .letter-rack .tile {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: clamp(0.8rem, 4.4vw, 1.2rem);
  }
}

/* ─── Letter Rack ───────────────────────────────── */
.letter-rack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  border: 2px solid rgba(192, 57, 43, 0.15);
  min-height: 80px;
  width: 100%;
}

/* ─── Word Area ─────────────────────────────────── */
.word-area {
  width: 100%;
  text-align: center;
}

.word-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.word-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 68px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--border-radius);
  border: 2px dashed rgba(16, 185, 129, 0.25);
  transition: border-color 0.2s ease;
}
.word-tiles:not(:empty) {
  border-color: rgba(16, 185, 129, 0.4);
}

.word-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  min-height: 24px;
}

.word-preview {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.word-score-preview {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 1rem;
}

/* ─── Opponent Status ───────────────────────────── */
.opponent-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════
   ROUND RESULT
   ═══════════════════════════════════════════════════ */
.result-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 32px 24px;
  width: 100%;
  text-align: center;
  animation: result-slide-in 0.4s ease;
}

@keyframes result-slide-in {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.result-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 24px;
}

.result-comparison {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* Result player columns — card-based layout */
.result-player-column {
  flex: 1;
  min-width: 180px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* Slide-in animations: self from left, opp from right */
.result-col-self {
  animation: slide-in-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.result-col-opp {
  animation: slide-in-right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Mini player panel inside results */
.result-panel {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  /* Reserve the winner's 3px border on EVERY card (transparent here) so the
     winner highlight only changes the COLOUR — it never makes the winning
     column taller, which was shifting that side's word/points down. */
  border: 3px solid transparent;
  padding: 10px 16px 12px;
  text-align: center;
  width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #1a1a1a;
}

.result-panel-avatar {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: #e8e8e8;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: #fff;
  overflow: hidden;
  border: 2px solid #ddd;
}
.result-panel-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-panel-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: #333;
}

/* Word bubble below the card */
.result-word-bubble {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius-sm);
  padding: 12px 16px;
  text-align: center;
  width: 100%;
  animation: word-reveal 0.6s ease 0.3s both;
  /* FIXED height + centered content so the two player columns stay symmetric on
     desktop too — a side with bonus chips never shifts its points down relative
     to a side showing only a one-line word/quip. */
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
}

@keyframes word-reveal {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

.result-word {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.result-breakdown {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 4px;
  /* Reserve a consistent line of height + center the bonus chips so BOTH player
     columns stay the same height — a player with a bonus chip never shifts that
     side down relative to the other. */
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.result-breakdown .mult-letter {
  color: var(--gold);
  font-weight: 700;
}

/* Game-like score breakdown: only the bonus letters show, as little gem chips
   (silver ×2 / gold ×3) — no "L=1 + L=1 …" math. */
.bonus-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-body);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.bonus-chip .bc-letter {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.bonus-chip .bc-mult {
  font-size: 0.72rem;
  font-weight: 900;
  opacity: 0.85;
}
.bonus-chip.mult-2 {
  background: linear-gradient(135deg, #f4f4f4, #cfcfcf);
  border: 1px solid #e6e6e6;
  color: #1f2937;
}
.bonus-chip.mult-3 {
  background: linear-gradient(135deg, #ffd95e, #caa12e);
  border: 1px solid #ffe487;
  color: #3a2a00;
}

/* "No word" playful line — render as a small note, not a giant uppercase word. */
.result-word.is-quip {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-muted);
  word-break: normal;
}
.result-row-word .rr-quip,
.rr-quip {
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.result-points {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-glow);
  animation: score-pop 0.4s ease 0.5s both;
  /* Pin the score to the BOTTOM of the (equal-height) column so the two sides'
     points always line up, regardless of any card/word/chip height difference. */
  margin-top: auto;
}

@keyframes score-pop {
  from { opacity: 0; transform: scale(0.3); }
  60%  { transform: scale(1.15); }
  to   { opacity: 1; transform: scale(1); }
}

/* Winner highlight */
.result-player-column.winner .result-panel {
  border-color: var(--gold);
  box-shadow: 0 0 20px var(--gold-glow), 0 4px 12px rgba(0,0,0,0.3);
}
.result-player-column.winner::before {
  content: '👑';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  animation: crown-bounce 1s ease-in-out infinite;
  z-index: 2;
}

@keyframes crown-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.result-vs {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.result-totals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  margin-bottom: 16px;
}
.result-totals span {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold);
}
.result-total-label {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.result-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ready-timer-text {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════
   CONUNDRUM
   ═══════════════════════════════════════════════════ */
.conundrum-board {
  position: relative;
}

.conundrum-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conundrum-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--gold);
  text-shadow:
    0 0 20px var(--gold-glow),
    0 0 40px var(--gold-glow);
  text-align: center;
}

.conundrum-star {
  font-size: 1.8rem;
  animation: spin 3s linear infinite;
}

.conundrum-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  text-align: center;
  font-weight: 600;
}

.conundrum-rack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--border-radius);
  border: 2px solid rgba(255, 215, 0, 0.15);
  width: 100%;
}

.conundrum-rack .tile {
  width: 60px;
  height: 60px;
  font-size: 1.7rem;
}

.conundrum-word-tiles .tile {
  width: 60px;
  height: 60px;
  font-size: 1.7rem;
}

/* ─── Conundrum Result ──────────────────────────── */
.conundrum-result-card {
  text-align: center;
}

.conundrum-answer-reveal {
  margin: 20px 0;
}
.reveal-label {
  color: var(--text-muted);
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.reveal-word {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 15px var(--gold-glow);
}

.conundrum-solvers {
  margin-bottom: 20px;
}
.solver-line {
  font-size: 1.05rem;
  padding: 8px 0;
  color: var(--text-primary);
  font-weight: 700;
}
.solver-line.solved { color: var(--timer-green); }
.solver-line.not-solved { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════
   GAME OVER
   ═══════════════════════════════════════════════════ */
.gameover-card {
  width: 100%;
  text-align: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}

.gameover-trophy {
  font-size: 4rem;
  margin-bottom: 12px;
  animation: trophy-bounce 1s ease-in-out infinite;
}

@keyframes trophy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.1); }
}

.gameover-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: var(--gold);
  text-shadow: 0 0 30px var(--gold-glow), 0 0 60px rgba(255, 215, 0, 0.2);
  margin-bottom: 8px;
}

.gameover-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 32px;
}

.gameover-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.gameover-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.gameover-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #fff;
}

.gameover-name {
  font-weight: 700;
  font-size: 1rem;
}

.gameover-score {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--gold);
  text-shadow: 0 0 15px var(--gold-glow);
}

.gameover-player.gameover-winner .gameover-score {
  font-size: 2.8rem;
  animation: score-glow 1.5s ease-in-out infinite;
}

@keyframes score-glow {
  0%, 100% { text-shadow: 0 0 15px var(--gold-glow); }
  50% { text-shadow: 0 0 30px var(--gold-glow), 0 0 60px rgba(255, 215, 0, 0.3); }
}

.gameover-divider {
  width: 2px;
  height: 80px;
  background: rgba(192, 57, 43, 0.3);
}

.gameover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ─── Confetti ──────────────────────────────────── */
.confetti-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}
.confetti-piece.circle { border-radius: 50%; }
.confetti-piece.square { border-radius: 2px; transform: rotate(45deg); }

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 40px)) rotate(720deg);
  }
}

/* ═══════════════════════════════════════════════════
   OVERLAY (Disconnect etc.)
   ═══════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  /* backdrop-filter removed for performance */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: 16px;
}
.overlay.hidden { display: none; }

.overlay-card {
  background: var(--board-bg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-lg);
  padding: 40px 32px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  animation: overlay-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.overlay-card h2 {
  font-family: var(--font-heading);
  margin-bottom: 8px;
  color: var(--text-primary);
}
.overlay-card p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

@keyframes overlay-pop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.overlay-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════
   AVATAR SYSTEM
   ═══════════════════════════════════════════════════ */
.avatar-upload {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.avatar-upload-label {
  cursor: pointer;
  display: inline-block;
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e8e0e0;
  border: 3px dashed #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.avatar-preview:hover {
  border-color: #C0392B;
  transform: scale(1.05);
}

.avatar-placeholder {
  font-size: 1.5rem;
  line-height: 1;
}

.avatar-hint {
  font-size: 0.65rem;
  color: #888;
  font-weight: 600;
  margin-top: 2px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Avatar in player panels */
.panel-avatar .avatar-img,
.player-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-avatar {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: #2a1515;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
  padding: 12px 20px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.3s ease, toast-out 0.3s ease 3.7s forwards;
  pointer-events: auto;
  max-width: 320px;
}
.toast.error {
  border-color: var(--btn-danger);
  color: #fca5a5;
}
.toast.success {
  border-color: var(--timer-green);
  color: #86efac;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ═══════════════════════════════════════════════════
   ANIMATIONS — Shake (wrong word)
   ═══════════════════════════════════════════════════ */
.shake {
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Tablet & Phone
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root {
    --tile-size: 46px;
  }

  .lobby {
    padding: 16px 12px 32px;
  }

  .lobby-card {
    padding: 18px 14px;
  }

  .state-card {
    margin-top: 10vh;
    padding: 32px 20px;
  }

  .game-title {
    gap: 1px;
  }
  .title-spacer { width: 10px; }

  .players-bar {
    gap: 10px;
    flex-wrap: wrap;
  }

  .player-card {
    padding: 8px 12px;
  }
  .player-name {
    max-width: 70px;
    font-size: 0.85rem;
  }

  .pick-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .btn-vowel, .btn-consonant {
    width: 100%;
    min-width: unset;
  }

  .round-header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .score-display {
    min-width: 75px;
    padding: 6px 10px;
  }
  .score-value { font-size: 1.3rem; }

  .letter-rack {
    gap: 6px;
    padding: 10px;
  }

  .conundrum-rack .tile,
  .conundrum-word-tiles .tile {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }

  /* 2-player result: keep both players SIDE BY SIDE and compact so the whole
     between-rounds screen (cards, words, points, totals, ready button) fits a
     360x740 viewport with no scrolling. */
  .result-card {
    padding: 14px 12px;
  }
  .result-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  .result-comparison {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
  }
  .result-vs { display: none; }
  .result-player-column {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    gap: 8px;
  }
  .result-panel {
    width: 100%;
    padding: 8px 6px 10px;
  }
  .result-panel-avatar {
    width: 58px;
    height: 58px;
    font-size: 1.45rem;
    margin: 0 auto 6px;
  }
  .result-panel-name { font-size: 0.76rem; }
  /* FIXED bubble height + centered content so BOTH columns are identical
     whether one shows bonus chips and the other a one-line quip — the points
     below never shift down on one side. */
  .result-word-bubble {
    padding: 7px 6px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .result-word { font-size: 1rem; letter-spacing: 0.03em; }
  .result-breakdown { font-size: 0.6rem; line-height: 1.35; margin-top: 0; min-height: 0; }
  .result-points { font-size: 1.3rem; }
  .result-player-column.winner::before { top: -16px; font-size: 1.4rem; }
  .result-totals {
    gap: 16px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .result-totals span { font-size: 1.1rem; }
  .result-next { gap: 6px; }
  .result-col-self { animation-name: slide-in-left; }
  .result-col-opp { animation-name: slide-in-right; }

  .room-code-display {
    font-size: 1.8rem;
    letter-spacing: 4px;
  }

  .gameover-scores {
    gap: 12px;
    flex-wrap: nowrap;
  }
  .gameover-player {
    min-width: 0;
    flex: 1;
  }
  .gameover-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
  .gameover-name {
    font-size: 0.85rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gameover-score {
    font-size: 1.8rem;
  }
  .gameover-player.gameover-winner .gameover-score {
    font-size: 2.2rem;
  }
  .gameover-divider {
    width: 2px;
    height: 70px;
    flex-shrink: 0;
  }
  .gameover-actions {
    flex-direction: column;
    width: 100%;
  }
  .gameover-actions .btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  :root {
    --tile-size: 40px;
  }

  .game-title {
    font-size: 1.8rem;
  }

  .conundrum-rack .tile,
  .conundrum-word-tiles .tile {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  /* Narrowest phones: keep the selected-word row a single bounded line and
     trim the word area height a touch further. Tiles stay flexible (shrink to
     fit) — cap a touch smaller than the wider-phone rule so 9 tiles + the
     backspace button comfortably share a 360px row with no scroll/wrap. */
  .word-area .word-tiles { height: 48px; padding: 4px; }
  .word-area .word-tiles .tile {
    flex: 1 1 0;
    width: auto;
    max-width: 38px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    font-size: clamp(0.78rem, 4.4vw, 1.1rem);
    flex-shrink: 1;
  }
  /* Same single-row flexible treatment for the rack on the narrowest phones. */
  .letter-rack { padding: 4px; gap: 3px; }
  .letter-rack .tile {
    flex: 1 1 0;
    width: auto;
    max-width: 38px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    font-size: clamp(0.78rem, 4.4vw, 1.4rem);
    flex-shrink: 1;
  }
}

/* ═══════════════════════════════════════════════════
   BUG FIX #1 — Conundrum rack tile removal
   The conundrum rack is <div class="letter-rack" id="conundrum-rack">,
   so the legacy ".conundrum-rack .tile" rules never applied. Re-assert the
   sizing here AND make a used tile clearly "disappear" (matching the round
   rack), while keeping its slot so shuffle math stays correct.
   ═══════════════════════════════════════════════════ */
#conundrum-rack .tile {
  width: 60px;
  height: 60px;
  font-size: 1.7rem;
}
#conundrum-word-tiles .tile {
  width: 60px;
  height: 60px;
  font-size: 1.7rem;
}
/* A selected/used tile in the conundrum rack is visually removed (matching
   how the round rack reads once a tile is placed). Round rack keeps its
   established dim look (global .tile-used) so 2-player visuals are unchanged.
   visibility:hidden preserves the slot so index-based shuffle stays correct. */
#conundrum-rack .tile.tile-used {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  pointer-events: none;
}

/* Mobile: the conundrum answer row + rack use the SAME flexible single-row
   sizing as the round view — 9 tiles shrink-to-fit one no-wrap row (no scroll,
   no wrap), square via aspect-ratio, capped so short layouts look right. The
   ID selectors (#conundrum-rack / #conundrum-word-tiles) are needed to beat the
   fixed 60px rules above. */
@media (max-width: 600px) {
  #conundrum-rack .tile,
  #conundrum-word-tiles .tile {
    flex: 1 1 0;
    width: auto;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    font-size: clamp(0.8rem, 4.4vw, 1.4rem);
    flex-shrink: 1;
  }
}
@media (max-width: 380px) {
  #conundrum-rack .tile,
  #conundrum-word-tiles .tile {
    max-width: 38px;
    font-size: clamp(0.78rem, 4.4vw, 1.2rem);
  }
}

/* BUG FIX #2 — explicit invalid word styling that we live-clear on edit. */
.word-tiles.word-error {
  border-color: var(--btn-danger) !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.4);
}

/* ═══════════════════════════════════════════════════
   WAITING ROOM (host-controlled start) + roster
   ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   WAITING ROOM — a FULL-HEIGHT game-lobby screen. The container → state →
   card → players region form a flex chain so the roster grows to fill all the
   space between the anchored top (room code) and bottom (footer actions),
   leaving NO dead band top or bottom — and still no page/inner scroll.
   Flex chain: .game-container (flex col) ▸ #state-waiting.active (flex:1) ▸
   .waiting-room (flex:1 col) ▸ .waiting-players (flex:1 1 auto; min-height:0).
   ═══════════════════════════════════════════════════ */
/* When the waiting screen is active, stop the container centring its child and
   let the state section grow to the full available height. */
.game-container:has(#state-waiting.active) { justify-content: flex-start; }
#state-waiting.active {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.waiting-room {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  /* Fill the active state's height so top/middle/bottom can anchor. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Middle region: grows to absorb leftover height; roster top-aligned within it
   (centred vertically when few players via the spacer below). NO scroll. */
.waiting-players {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

/* Footer: anchored action area (Start CTA + hint, debug, share). */
.waiting-footer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}

/* Header row: title left, host settings gear right */
.waiting-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.waiting-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text-primary);
}
.waiting-sparkle {
  font-size: 1.35rem;
  animation: pulse-glow 2.4s ease-in-out infinite;
}
.settings-gear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(218, 165, 32, 0.35);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.settings-gear.hidden { display: none; }
.settings-gear:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(218, 165, 32, 0.12);
}
.settings-gear-icon { font-size: 1rem; }

/* Room code block — presented prominently like a game room code */
.room-code-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.room-code-cap {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* At-a-glance current game-time settings (everyone sees these) */
.settings-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 2px;
}
.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
}
.settings-chip strong {
  color: var(--gold);
  font-weight: 800;
}

.waiting-roster-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.waiting-roster-title {
  font-family: var(--font-heading);
  color: var(--text-secondary);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.waiting-count {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.9rem;
}

/* Roster: a tidy wrapping grid of compact chips that condense as count grows.
   No scroll — chips shrink (name ellipsis) so 7–10 fit the contained card. */
.waiting-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  align-content: flex-start;
}
.roster-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 11px 4px 4px;
  max-width: 100%;
  animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.roster-chip.is-you {
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}
.roster-chip.is-offline { opacity: 0.5; }
.roster-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.roster-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }
.roster-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-primary);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-host-badge {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--gold);
  background: rgba(218, 165, 32, 0.15);
  border: 1px solid rgba(218, 165, 32, 0.4);
  padding: 2px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Density modes: condense chips as the roster fills so 7–10 players still fit
   the card with NO scroll. JS toggles .is-dense (≥6) and .is-packed (≥9). */
.waiting-roster.is-dense { gap: 6px; }
.waiting-roster.is-dense .roster-chip { padding: 3px 9px 3px 3px; gap: 5px; }
.waiting-roster.is-dense .roster-avatar { width: 24px; height: 24px; font-size: 0.68rem; }
.waiting-roster.is-dense .roster-name { font-size: 0.8rem; max-width: 88px; }
.waiting-roster.is-dense .roster-host-badge { font-size: 0.55rem; padding: 1px 4px; }

.waiting-roster.is-packed { gap: 5px; }
.waiting-roster.is-packed .roster-chip { padding: 2px 8px 2px 2px; gap: 4px; }
.waiting-roster.is-packed .roster-avatar { width: 22px; height: 22px; font-size: 0.62rem; }
.waiting-roster.is-packed .roster-name { font-size: 0.76rem; max-width: 76px; }
.waiting-roster.is-packed .roster-bot-badge { display: none; }
.waiting-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.waiting-controls .btn-done { width: 100%; max-width: 320px; }
.waiting-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   GAME SETTINGS MODAL — round + conundrum time steppers (host-only)
   ═══════════════════════════════════════════════════ */
.settings-card {
  max-width: 360px;
  text-align: center;
  position: relative;
  padding: 28px 24px 24px;
}
.settings-card-icon {
  font-size: 2.2rem;
  margin-bottom: 4px;
  animation: pulse-glow 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px var(--gold-glow));
}
.settings-card h2 { color: var(--gold); margin-bottom: 2px; }
.settings-card-sub {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 18px;
}
.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* Each setting = a panel CARD: label/desc on top, stepper control below. The
   vertical stack guarantees the title + hint get their own clean lines (no
   side-by-side cramping / mid-word wrapping). */
.setting-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 12px 14px;
  text-align: left;
}
.setting-row-label {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  min-width: 0;
}
.setting-row-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(218, 165, 32, 0.12);
  border: 1px solid rgba(218, 165, 32, 0.28);
  border-radius: 50%;
}
.setting-row-text { min-width: 0; }
.setting-row-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.15;
}
.setting-row-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 1px;
}

/* Stepper: [−]  ⟨60 s⟩  [+] — one cohesive control, full row width.
   The number + unit live together in a bordered "value box"; the unit is glued
   directly to the right of the digits so it reads as "60s". */
.stepper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.stepper-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, #5a5a5a, #343434);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.1s ease, background 0.2s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.stepper-btn:hover { background: linear-gradient(145deg, #6d6d6d, #404040); }
.stepper-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Value box: holds the number input + the "s" suffix, glued together. */
.stepper-value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  height: 44px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(218, 165, 32, 0.4);
  border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
  padding: 0 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stepper-value:focus-within {
  border-color: var(--gold);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), 0 0 12px var(--gold-glow);
}
.stepper-input {
  width: auto;
  min-width: 0;
  max-width: 3ch;
  background: transparent;
  border: none;
  outline: none;
  text-align: right;
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  align-self: center;
  -moz-appearance: textfield;
  appearance: textfield;
  text-shadow: 0 0 10px var(--gold-glow);
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper-unit {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
  align-self: center;
  flex-shrink: 0;
}
.settings-done-btn { width: 100%; margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   GENERALIZED MANY-PLAYER UI (3+ players)
   Reuses palette, fonts, tiles, panels — just reorganized.
   ═══════════════════════════════════════════════════ */

/* Picking bar for many players: wrap chips into a row */
.players-bar-many {
  flex-wrap: wrap;
  gap: 10px;
}
.players-bar-many .player-card.is-you {
  border-color: var(--gold);
}

/* In many mode the self panel stays centered & prominent, paired with the
   round/timer center; the opponent roster banner sits just below it. */
.players-many #state-round .round-top,
.players-many #state-conundrum .round-top {
  justify-content: center;
  gap: 28px;
  padding-bottom: 18px;
}
.players-many #state-round .opponents-strip,
.players-many #state-conundrum .opponents-strip {
  margin-top: -4px;
}

/* ═══════════════════════════════════════════════════
   OPPONENT PODS (3+ players) — a party-game roster banner.
   A centered, wrapping CLUSTER of small FIXED-SIZE pods: ringed avatar token
   with a gold score badge, name beneath, and a fixed 9-segment word-length
   meter pinned to the avatar's bottom edge. The meter + done-check are absolute
   overlays so a pod NEVER changes size as the word grows or the state changes.
   ═══════════════════════════════════════════════════ */
.opponents-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 4px 4px;
}

/* A single pod — FIXED width/height; its box never reflows on state changes. */
.opp-pod {
  position: relative;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* The avatar "disc": ringed circular token, anchor for all absolute overlays */
.opp-pod-disc {
  --pod-ring: var(--gold);
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* colored ring derived from the player's avatar color */
  padding: 3px;
  background:
    linear-gradient(var(--bg-card-solid), var(--bg-card-solid)) padding-box,
    linear-gradient(145deg, var(--pod-ring), rgba(0,0,0,0.25)) border-box;
  border: 3px solid transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.opp-pod-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #fff;
  overflow: hidden;
}
.opp-pod-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }

.opp-pod-name {
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1.1;
  color: var(--text-primary);
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Score badge — gold chip pinned top-right of the disc (absolute, no reflow) */
.opp-pod-score {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #FFE44D, #DAA520);
  border: 2px solid #B8860B;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: #5a3e00;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  z-index: 4;
}
.opp-pod-score strong { color: #5a3e00; font-weight: 400; }

/* Fixed 9-segment word-length meter — absolute, pinned to disc bottom edge.
   Always 9 pips in a single non-wrapping row; only `.filled` toggles. */
.opp-pod-meter {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5px;
  padding: 2px 3px;
  border-radius: 999px;
  background: rgba(40, 5, 5, 0.85);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}
.opp-pod-meter.active { opacity: 1; }
.opp-pod-meter .progress-square {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  transition: background 0.12s ease;
}
.opp-pod-meter .progress-square.filled {
  background: var(--gold);
  box-shadow: 0 0 4px var(--gold-glow);
}

/* Active "thinking" glow — the ring softly pulses while a pod is in play */
.players-many #state-round .opp-pod:not(.is-done):not(.is-reconnecting):not(.is-left) .opp-pod-disc,
.players-many #state-conundrum .opp-pod:not(.is-done):not(.is-reconnecting):not(.is-left) .opp-pod-disc {
  animation: pod-think 2s ease-in-out infinite;
}
@keyframes pod-think {
  0%, 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 14px var(--gold-glow); }
}

/* "Done!" — green ring + integrated check disc, satisfying pop */
.opp-pod-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(39, 174, 96, 0.92);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  z-index: 5;
}
.opp-pod.is-done .opp-pod-disc {
  --pod-ring: var(--timer-green);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 16px rgba(39, 174, 96, 0.55);
}
.opp-pod.is-done .opp-pod-check {
  opacity: 1;
  transform: scale(1);
  animation: bubble-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Once done, hide the in-progress meter so the green check reads clean */
.opp-pod.is-done .opp-pod-meter { opacity: 0; }

/* Presence overlay (reconnecting spinner / left) — over the disc only */
.opp-pod-presence {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
}
.opp-pod.is-reconnecting { opacity: 0.6; }
.opp-pod.is-reconnecting .opp-pod-presence {
  background: rgba(255, 255, 255, 0.4);
}
.opp-pod.is-reconnecting .opp-pod-check { opacity: 0; }
.opp-pod.is-left { opacity: 0.4; filter: grayscale(1); }
.opp-pod.is-left .opp-pod-check,
.opp-pod.is-left .opp-pod-meter { opacity: 0; }
.opp-pod-presence .presence-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #6B0F0F;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 6px;
  border-radius: 8px;
}

/* 2-player opponent panel presence (dim) */
.player-panel.is-reconnecting { opacity: 0.55; }
.player-panel.is-left { opacity: 0.4; filter: grayscale(1); }

/* Departed players in results grid + leaderboard (C-2): grey out and tag so a
   left 0-score player is distinguishable from an active one. */
.result-row.is-left,
.leader-row.is-left { opacity: 0.45; filter: grayscale(1); }
.left-tag {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6B0F0F;
  background: rgba(0, 0, 0, 0.12);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Many-player round results list ────────────── */
.result-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 20px;
}
.result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius);
  padding: 8px 12px;
  text-align: left;
  animation: fade-in 0.35s ease both;
}
.result-row.is-you { border-color: rgba(218, 165, 32, 0.5); }
.result-row.winner {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
  background: rgba(218, 165, 32, 0.08);
}
.result-row-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #ddd;
}
.result-row-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }
.result-row-mid { flex: 1; min-width: 0; }
.result-row-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.row-crown { font-size: 0.9rem; }
.result-row-word {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.result-row-breakdown {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.result-row-breakdown .mult-letter { color: var(--gold); font-weight: 700; }
.result-row-points {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.result-row-points .rr-round {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--gold);
}
.result-row-points .rr-total {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ─── Many-player game-over leaderboard ─────────── */
.gameover-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 36px;
}
.leader-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius);
  padding: 8px 14px;
  animation: fade-in 0.4s ease both;
}
.leader-row.first {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--gold-glow);
  background: rgba(218, 165, 32, 0.1);
}
.leader-row.is-you { outline: 2px solid rgba(218, 165, 32, 0.3); }
.leader-place {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.leader-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.leader-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }
.leader-name {
  flex: 1;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader-score {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--gold);
  text-shadow: 0 0 12px var(--gold-glow);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   REMATCH BUBBLES (on game-over cards) + reconnect banner
   ═══════════════════════════════════════════════════ */
.gameover-player { position: relative; }
.gameover-rematch-bubble {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 14px;
  display: none;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  z-index: 6;
}
.gameover-rematch-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
.gameover-rematch-bubble.visible {
  display: block;
  animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gameover-rematch-bubble.go {
  background: linear-gradient(135deg, #E67E22, #F39C12);
  color: #fff;
}
.gameover-rematch-bubble.go::after { border-top-color: #F39C12; }
/* Leaderboard variant sits to the right of a row */
.leader-bubble {
  top: 50%;
  left: auto;
  right: 8px;
  transform: translateY(-50%);
}
.leader-bubble::after { display: none; }
.leader-bubble.visible {
  animation: bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Non-blocking reconnecting indicator */
.reconnect-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 10, 10, 0.92);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: var(--z-toast);
  animation: fade-in 0.3s ease;
}
.reconnect-banner .spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Many-player (tablet & phone)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .opp-pod { width: 68px; }
  .opp-pod-disc { width: 54px; height: 54px; }
  .opp-pod-avatar { font-size: 1.05rem; }
}

@media (max-width: 600px) {
  /* Compaction goal: the whole 3+ round/conundrum screen fits a phone viewport
     (~640–740px tall) with the word area, rack, tool buttons, and submit all
     visible. The pod cluster stays a SHORT capped band — it wraps but never
     scrolls and never dominates. */
  .opponents-strip {
    gap: 8px 9px;
    padding: 2px 2px 2px;
    max-width: 100%;
    /* Cap the roster band so it can't dominate, but allow the two short rows of
       the larger pods (up to 7 opponents) to show fully without clipping. */
    max-height: 156px;
    overflow: hidden;
  }
  /* Bigger opponent pods now that the reflow freed vertical space — larger disc
     + avatar + name, while still fitting up to 7 across the strip at 360px
     (≈5 per row, wraps to 2 short rows, no overflow/scroll). */
  .opp-pod { width: 60px; gap: 3px; }
  .opp-pod-disc { width: 52px; height: 52px; }
  .opp-pod-avatar { font-size: 1rem; }
  .opp-pod-name { font-size: 0.68rem; }
  .opp-pod-score {
    min-width: 18px;
    height: 18px;
    font-size: 0.64rem;
    top: -5px;
    right: -6px;
  }
  .opp-pod-meter { gap: 1px; padding: 1.5px 2.5px; bottom: -6px; }
  .opp-pod-meter .progress-square { width: 4px; height: 4px; }
  .opp-pod-check { font-size: 1.3rem; }

  /* Trim the many-player round band so controls stay above the fold */
  .players-many #state-round .round-top,
  .players-many #state-conundrum .round-top {
    padding-top: 8px;
    padding-bottom: 4px;
    gap: 10px;
  }
  .players-many .opponents-strip { margin-top: 2px; }
  /* Drop the secondary instruction line on phones to reclaim vertical space */
  .players-many .instruction-sub { display: none; }
  .players-many .round-instruction { padding: 2px 0; }
  .players-many .word-meta { margin-top: 2px; min-height: 16px; }

  /* ── Fill the viewport: pull the self/timer/opponents cluster to the TOP and
     distribute the remaining height so word area / rack / submit sit below with
     minimal dead space (no big top/bottom voids). The shared container
     vertically-centres its child; for the many-player round we top-align it and
     let the active board GROW to fill the height, then distribute its sections
     so the gaps are even rather than collected as one big void. */
  .players-many:has(#state-round.game-state.active),
  .players-many:has(#state-conundrum.game-state.active) {
    justify-content: flex-start;
  }
  .players-many #state-round.active,
  .players-many #state-conundrum.active { display: flex; flex: 1 1 auto; min-height: 0; }
  .players-many #state-round .game-board,
  .players-many #state-conundrum .game-board {
    gap: 6px;
    padding: 2px 0 6px;
    flex: 1 1 auto;
    width: 100%;
    /* Even vertical rhythm: the top cluster (self/timer + opponents) sits at the
       top, and the playing controls distribute through the remaining height. */
    justify-content: space-between;
  }

  /* Compact the self panel into a short horizontal card (avatar left, name +
     score stacked right) so the round-top band stays low. */
  .players-many #state-round .panel-self,
  .players-many #state-conundrum .panel-self {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: auto;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 10px;
    text-align: left;
  }
  .players-many #state-round .panel-self .panel-avatar,
  .players-many #state-conundrum .panel-self .panel-avatar {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
    margin: 0;
  }
  .players-many #state-round .panel-self .panel-name,
  .players-many #state-conundrum .panel-self .panel-name {
    margin: 0;
    align-self: end;
  }
  .players-many #state-round .panel-self .panel-score,
  .players-many #state-conundrum .panel-self .panel-score {
    align-self: start;
    font-size: 0.78rem;
  }
  .players-many #state-round .round-badge-circle,
  .players-many #state-round .timer-circle,
  .players-many #state-conundrum .round-badge-circle,
  .players-many #state-conundrum .timer-circle {
    width: 58px;
    height: 58px;
  }
  .players-many #state-round .round-top,
  .players-many #state-conundrum .round-top {
    padding-top: 22px;
    padding-bottom: 6px;
    align-items: center;
  }
  /* Keep the word slots / rack compact but tiles stay tappable, and give BOTH
     the SAME height + padding so they render as a consistent matched pair. */
  .players-many .word-tiles { min-height: 48px; height: 48px; padding: 5px; }
  .players-many .letter-rack { min-height: 48px; height: 48px; padding: 5px; gap: 3px; }
  /* Don't let the tool buttons stack into a tall column on the many screen */
  .players-many .word-row,
  .players-many .rack-row { flex-direction: row; gap: 6px; align-items: center; }
  /* flex:1 + min-width:0 constrains the word-area so the nowrap word-tiles
     scroll INSIDE it (overflow-x:auto) instead of overflowing the page. */
  .players-many .word-row .word-area { flex: 1; min-width: 0; width: auto; }
  .players-many .rack-row .letter-rack { flex: 1; min-width: 0; width: auto; }
  /* Icon tool buttons: a compact ~40px square, NOT a wide pill — frees room so
     the 9 entered/rack tiles can be wider (closer to the 40px cap). */
  .players-many .btn-tool-icon { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 1.2rem; flex: 0 0 auto; }
  .players-many .btn-tool:not(.btn-tool-icon) { width: auto; min-width: 64px; padding: 8px; font-size: 0.62rem; }
  .players-many .btn-done { font-size: 1rem; padding: 11px 32px; }
  .players-many .opponent-status { padding: 5px 14px; font-size: 0.78rem; }

  /* Many-player picking chips: compact, wrap into a tidy cluster (no scroll) */
  .players-bar-many {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .players-bar-many .player-card { flex: 0 0 auto; padding: 6px 10px; }

  .result-row-avatar { width: 38px; height: 38px; }
  .result-row-points .rr-round { font-size: 1.1rem; }
  .leader-place { font-size: 1.1rem; width: 26px; }
  .leader-avatar { width: 38px; height: 38px; }
  .leader-score { font-size: 1.3rem; }
  .leader-bubble {
    position: static;
    transform: none;
    margin-left: auto;
    padding: 4px 10px;
    font-size: 0.7rem;
  }
}

@media (max-width: 380px) {
  /* Slightly smaller than the 600px bump so 5 bigger pods still fit a 360px row
     without overflow, but keep them noticeably larger than before. */
  .opp-pod { width: 58px; }
  .opp-pod-disc { width: 50px; height: 50px; }
  .opp-pod-avatar { font-size: 0.95rem; }
  .opponents-strip { gap: 8px 8px; }
}

/* ═══════════════════════════════════════════════════
   HOST: PERSISTENT MANAGE-PLAYERS CONTROL + MODAL
   Fixed to the top-right INSIDE .game-container so it never overlaps the
   round timer/scoreboard (which sit in the centered .round-top with generous
   top padding) on desktop or mobile. Host-only; toggled per phase in JS.
   ═══════════════════════════════════════════════════ */
.host-manage-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: var(--z-card);
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(218, 165, 32, 0.5);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.host-manage-btn:hover {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 16px var(--gold-glow);
  transform: translateY(-1px);
}
.host-manage-btn:active { transform: scale(0.94); }
.host-manage-icon {
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Modal card (extends the shared .overlay / .overlay-card look) */
.host-manage-card {
  max-width: 460px;
  text-align: left;
  position: relative;
}
.host-manage-card h2 { text-align: center; color: var(--gold); }
.host-manage-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.host-manage-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.host-manage-close:hover {
  color: var(--gold);
  border-color: rgba(218, 165, 32, 0.4);
  transform: rotate(90deg);
}

.host-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.host-manage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 10px 12px;
}
.host-manage-row.is-you { border-color: rgba(218, 165, 32, 0.45); }
.host-manage-row.is-offline { opacity: 0.7; }
.host-manage-row.is-left { opacity: 0.5; filter: grayscale(1); }

.host-manage-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.host-manage-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }

.host-manage-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.host-manage-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.host-manage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.host-manage-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.host-manage-badge.badge-you {
  color: var(--gold);
  background: rgba(218, 165, 32, 0.15);
  border-color: rgba(218, 165, 32, 0.4);
}
.host-manage-badge.badge-host {
  color: var(--gold);
  background: rgba(218, 165, 32, 0.12);
  border-color: rgba(218, 165, 32, 0.35);
}
.host-manage-badge.badge-offline {
  color: #fca5a5;
  background: rgba(192, 57, 43, 0.18);
  border-color: rgba(192, 57, 43, 0.4);
}
.host-manage-badge.badge-left {
  color: #d4a0a0;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.host-kick-btn {
  flex-shrink: 0;
  background: rgba(192, 57, 43, 0.22);
  border: 1px solid rgba(192, 57, 43, 0.5);
  color: #fca5a5;
  font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.host-kick-btn:hover:not(:disabled) {
  background: rgba(192, 57, 43, 0.4);
  color: #fff;
  border-color: var(--btn-danger);
}
.host-kick-btn.confirming {
  background: var(--btn-danger);
  border-color: var(--btn-danger);
  color: #fff;
  animation: timer-pulse 0.8s ease-in-out infinite;
}

/* Host control + modal responsiveness */
@media (max-width: 768px) {
  .host-manage-btn { top: 10px; right: 10px; width: 40px; height: 40px; }
  .host-manage-icon { font-size: 1.1rem; }
}
@media (max-width: 380px) {
  .host-manage-btn { width: 36px; height: 36px; }
  .host-manage-icon { font-size: 1rem; }
  .host-manage-row { padding: 8px 10px; gap: 10px; }
  .host-manage-avatar { width: 34px; height: 34px; }
  .host-manage-name { font-size: 0.88rem; }
}

/* ═══════════════════════════════════════════════════
   DIAGNOSTICS PANEL (self-avatar driven)
   No visible control — a 5s hold on the self-avatar toggles the panel
   trigger; once active, a short tap opens the modal below.
   ═══════════════════════════════════════════════════ */

/* Subtle active indicator toggled on the self-avatar element: a faint gold
   ring + a tiny dot. */
.diag-armed {
  position: relative;
  box-shadow: 0 0 0 1px rgba(218, 165, 32, 0.35), 0 0 6px rgba(218, 165, 32, 0.18);
}
.diag-armed::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}

/* Modal card (extends the shared .overlay / .overlay-card look) */
.diag-card {
  max-width: 460px;
  text-align: left;
  position: relative;
}
.diag-card h2 { text-align: center; color: var(--gold); }
.diag-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.diag-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.diag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 10px 14px;
}
.diag-row .diag-word {
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diag-row .diag-score {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.diag-row.diag-best {
  border-color: rgba(218, 165, 32, 0.55);
  background: rgba(218, 165, 32, 0.12);
  box-shadow: 0 0 12px var(--gold-glow);
}
.diag-row.diag-best .diag-word,
.diag-row.diag-best .diag-score { color: var(--gold); }
.diag-row.diag-conundrum {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(167, 139, 250, 0.12);
}
.diag-row.diag-conundrum .diag-word { color: #c4b5fd; }
.diag-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 8px;
}
.diag-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 18px 8px;
}

/* ─── Reduced motion preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── High contrast / forced colors ─────────────── */
@media (forced-colors: active) {
  .tile {
    border: 2px solid ButtonText;
  }
  .btn {
    border: 2px solid ButtonText;
  }
}

/* ═══════════════════════════════════════════════════
   DEBUG CONTROLS
   Developer-only affordances. Every element here ships
   with the `.hidden` class and is revealed by JS ONLY
   when `window.DEBUG === true`. Magenta/amber accents
   make it obvious this is a dev tool, never shipped UX.
   ═══════════════════════════════════════════════════ */

:root {
  --debug-accent: #ff2d95;   /* magenta */
  --debug-accent-2: #ffb020; /* amber  */
  --debug-panel: rgba(20, 10, 24, 0.92);
}

/* Shared dev-tool button look */
.debug-btn {
  appearance: none;
  cursor: pointer;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--debug-accent), #c01f74);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 5px 9px;
  line-height: 1.1;
  white-space: nowrap;
  transition: filter 0.12s ease, transform 0.06s ease;
}
.debug-btn:hover { filter: brightness(1.12); }
.debug-btn:active { transform: translateY(1px); }
.debug-btn:focus-visible {
  outline: 2px solid var(--debug-accent-2);
  outline-offset: 2px;
}

.debug-tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--debug-accent-2);
  border: 1px dashed var(--debug-accent-2);
  border-radius: 4px;
  padding: 2px 5px;
  text-transform: uppercase;
}

/* ─── Lobby waiting-room: "Add Fake Player" block ── */
.debug-lobby-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--debug-accent);
  border-radius: 8px;
  background: rgba(255, 45, 149, 0.07);
}

/* ─── Floating in-game debug toolbar ────────────── */
.debug-toolbar {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: var(--debug-panel);
  border: 1px solid var(--debug-accent);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  user-select: none;
}

.debug-toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 45, 149, 0.4);
  cursor: default;
}

.debug-toolbar-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--debug-accent-2);
}

.debug-toolbar-toggle {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--debug-accent-2);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 2px;
}
.debug-toolbar-toggle:focus-visible {
  outline: 2px solid var(--debug-accent-2);
  outline-offset: 1px;
}

.debug-toolbar-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  max-width: 240px;
}

/* Collapsed: hide the buttons, keep the tiny header chip */
.debug-toolbar.collapsed .debug-toolbar-body {
  display: none;
}

/* ─── Bot / fake-player roster tagging ──────────── */
.roster-chip.is-bot {
  border-color: var(--debug-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.35);
}
.roster-bot-badge {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--debug-accent);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}

/* ─── Keep it out of the way on small screens ───── */
@media (max-width: 560px) {
  .debug-toolbar {
    left: 8px;
    bottom: 8px;
  }
  .debug-toolbar-body {
    max-width: 180px;
    gap: 5px;
    padding: 6px;
  }
  .debug-btn {
    font-size: 0.66rem;
    padding: 4px 7px;
  }
}

/* ═══════════════════════════════════════════════════
   IN-GAME CHAT
   Floating toggle + bottom-sheet (mobile) / docked
   panel (desktop) modal. Built on the shared design
   tokens; the message feed is the ONLY internal
   scroller so the dock stays above-the-fold on phones.
   ═══════════════════════════════════════════════════ */

/* ─── Floating chat toggle ──────────────────────── */
.chat-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(145deg, var(--magenta), var(--purple-accent));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  animation: chat-toggle-breathe 3.2s ease-in-out infinite;
}
.chat-toggle:hover {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--gold-glow);
}
.chat-toggle:active { transform: scale(0.92); }
.chat-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.chat-toggle svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
@keyframes chat-toggle-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(218, 165, 32, 0); }
  50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px 2px rgba(218, 165, 32, 0.35); }
}

.chat-toggle .unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #f4c430);
  color: #3a2400;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--board-bg-deep);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.chat-toggle .unread-badge.show {
  display: flex;
  animation: chat-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chat-badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ─── Overlay: centered, padded modal on mobile ─── */
.chat-overlay {
  /* Centered on BOTH axes (matches desktop + the app's overlay convention)
     instead of a full-bleed bottom-sheet. */
  align-items: center;
  justify-content: center;
  /* ~16px gutter on every side so backdrop is visible all around. Safe-area
     insets are folded in so the card never runs under a notch / home bar. */
  padding:
    calc(16px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
  /* The shared .overlay is `height: 100vh` (LARGE viewport). On mobile
     browsers 100vh extends behind the bottom toolbar / home indicator, so
     constrain the chat overlay to the DYNAMIC viewport. 100vh remains as the
     cascaded fallback for browsers without dvh support. */
  height: 100dvh;
}
.chat-overlay.closing { animation: chat-overlay-fade-out 0.22s ease forwards; }
@keyframes chat-overlay-fade-out { to { opacity: 0; } }

/* ─── Chat card (header / feed / dock stack) ────── */
.chat-card {
  background: linear-gradient(160deg, var(--board-bg) 0%, var(--board-bg-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* Full radius on ALL corners now that it's a free-floating centered card
     (no longer a flat-bottom bottom-sheet). */
  border-radius: var(--border-radius-lg);
  width: 100%;
  max-width: 460px;              /* side gutters show on phones */
  box-sizing: border-box;        /* keep border/padding INSIDE the height cap */
  /* A comfortable centered card — smaller than full-screen. Bound to the
     DYNAMIC viewport so the inner feed is the ONLY scroller and the dock can
     never exceed the visible bottom. max-height clamps it to the padded
     overlay area so the 16px gutters are always honoured. */
  height: 78dvh;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  animation: chat-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chat-card-pop {
  from { transform: scale(0.8) translateY(40px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.chat-overlay.closing .chat-card { animation: chat-card-out 0.22s ease forwards; }
@keyframes chat-card-out { to { transform: translateY(30px) scale(0.96); opacity: 0; } }

/* ─── Header (fixed height, never shrinks) ──────── */
.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(218, 165, 32, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent);
}
.chat-title-wrap { flex: 1; min-width: 0; }
.chat-header h2 {
  font-family: var(--font-heading);
  color: var(--gold);
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.1;
  text-shadow: 0 0 14px var(--gold-glow);
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 3px;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--timer-green);
  box-shadow: 0 0 8px var(--timer-green);
  animation: chat-online-pulse 2s infinite;
}
@keyframes chat-online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* The close button reuses .host-manage-close; restore the rotate-on-hover
   feel from the mockup without the absolute positioning of the host modal. */
.chat-close {
  position: static;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
}

/* ─── Message feed (THE ONLY SCROLLER) ──────────── */
.chat-feed {
  flex: 1 1 auto;
  min-height: 0;                 /* critical: lets the flex child scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 165, 32, 0.5) transparent;
}
.chat-feed::-webkit-scrollbar { width: 7px; }
.chat-feed::-webkit-scrollbar-thumb { background: rgba(218, 165, 32, 0.45); border-radius: 10px; }
.chat-feed::-webkit-scrollbar-track { background: transparent; }

/* System / join-leave pill */
.chat-sys-msg {
  align-self: center;
  max-width: 85%;
  text-align: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 5px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  animation: chat-msg-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Message rows */
.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 82%;
  animation: chat-msg-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chat-msg-in {
  from { transform: translateY(10px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.chat-msg.other { align-self: flex-start; }
.chat-msg.own { align-self: flex-end; flex-direction: row-reverse; }

.chat-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.18);
  align-self: flex-end;
}
.chat-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }

.chat-bubble-wrap { display: flex; flex-direction: column; min-width: 0; }
.chat-msg.own .chat-bubble-wrap { align-items: flex-end; }

.chat-sender {
  font-size: 0.72rem;
  font-weight: 800;
  margin: 0 4px 3px;
  letter-spacing: 0.2px;
}
.chat-bubble {
  position: relative;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.chat-msg.other .chat-bubble {
  background: linear-gradient(160deg, #fbfbfb, #ececec);
  color: var(--tile-text);
  border-bottom-left-radius: 5px;
}
.chat-msg.own .chat-bubble {
  background: linear-gradient(135deg, #f6c453, var(--gold));
  color: #3a2400;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 10px rgba(218, 165, 32, 0.35);
}
.chat-bubble.emoji-only {
  font-size: 2rem;
  padding: 4px 10px;
  background: transparent !important;
  box-shadow: none;
}
.chat-time {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin: 3px 6px 0;
  font-weight: 700;
}
.chat-msg.own .chat-time { text-align: right; }

/* ─── Typing indicator ──────────────────────────── */
.typing-row {
  flex: 0 0 auto;
  height: 0;
  overflow: hidden;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  transition: height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}
.typing-row.show { height: 30px; padding: 4px 16px 8px; opacity: 1; }
.typing-bubble {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  padding: 7px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.typing-bubble .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: chat-typing-bounce 1.2s infinite;
}
.typing-bubble .dot:nth-child(2) { animation-delay: 0.18s; }
.typing-bubble .dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ─── Dock: emoji row + input (never scrolls away) ─ */
.chat-dock {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
  /* The centered overlay already folds env(safe-area-inset-bottom) into its
     own bottom padding, so the dock must NOT add the inset again (L2). */
  padding: 8px 12px 8px;
}
.emoji-row {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.emoji-btn {
  flex: 1 1 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--border-radius);
  padding: 7px 0;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;
}
.emoji-btn:hover {
  background: rgba(218, 165, 32, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.emoji-btn:active { transform: scale(1.4); }
.emoji-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.emoji-btn.pop { animation: chat-emoji-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes chat-emoji-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5) rotate(-8deg); }
  100% { transform: scale(1); }
}

.input-row { display: flex; gap: 8px; align-items: center; }
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chat-input::placeholder { color: var(--text-muted); }
.chat-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.send-btn {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0 18px;
  height: 46px;
  border-radius: var(--border-radius);
  background: var(--btn-success-bg);
  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.send-btn:hover {
  background: var(--btn-success-hover);
  transform: translateY(-2px);
  box-shadow: 0 7px 22px rgba(243, 156, 18, 0.55);
}
.send-btn:active { transform: translateY(1px) scale(0.95); }
.send-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.send-btn svg { width: 18px; height: 18px; }

/* ─── Desktop: centered docked panel, not full-bleed ─ */
@media (min-width: 560px) {
  .chat-overlay { align-items: center; padding: 20px; }
  .chat-card {
    max-width: 440px;
    height: min(680px, 86dvh);
    border-radius: var(--border-radius-lg);
  }
  /* Anchor the toggle to the bottom-right CORNER OF THE GAME CONTAINER
     instead of the viewport corner. #chat-toggle is a direct child of
     .game-container (position: relative), so switching to absolute makes it
     track the centered max-width content column on wide screens — matching
     the sibling .host-manage-btn pattern. Mobile keeps `position: fixed`
     (base rule), so its placement is unchanged. */
  .chat-toggle {
    position: absolute;
    right: 18px;
    bottom: 18px;
  }
}

/* ─── Keep the toggle clear of the debug toolbar ── */
@media (max-width: 380px) {
  .chat-toggle { width: 54px; height: 54px; right: 12px; bottom: 12px; }
  .chat-toggle svg { width: 26px; height: 26px; }
}

/* ═══════════════════════════════════════════════════
   CHAT — WIDE-DESKTOP SIDE PANEL (≥1400px)
   On very wide screens there is enough empty gutter to
   the RIGHT of the centered 1100px-max .game-container
   to host a permanent chat panel. The modal/toggle UX
   is fully replaced here: no toggle, no close button,
   no dark backdrop, no inert, no pop animation — the
   panel is always shown once the player has joined.
   JS reveals it by removing `.hidden` WITHOUT setting
   chat.open, so focus-based keyboard routing still
   drives the game when the input isn't focused.
   Everything below 1400px is untouched.
   ═══════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  /* Scope ALL layout shift to .game-container (GAME page only). No global
     #app rule — the lobby (.lobby) and login pages stay perfectly centered.
     Group-center [container | gap | panel]: reserve gap+panel on the
     container's RIGHT margin so #app's align-items:center centers the whole
     margin-box. The container keeps its size; it sits left-of-center and the
     absolutely-positioned panel fills the reserved right margin. */
  .game-container {
    /* Panel width: 340px min at the breakpoint, growing to 500px on wider
       screens (fluid in the 1400px → ~1870px band, then capped at 500). */
    --chat-panel-w: clamp(340px, calc(340px + (100vw - 1400px) * 0.34), 500px);
    --chat-gap: 20px;

    /* margin-top/bottom (20px) inherited from the base .game-container rule. */
    margin-left: 0;
    margin-right: calc(var(--chat-gap) + var(--chat-panel-w));

    /* Overflow guard for the tight 1400–1500 band: never let the centered
       group exceed the viewport. At ~1508px+ the container is full 1100. */
    max-width: min(var(--max-width), calc(100vw - var(--chat-gap) - var(--chat-panel-w) - 48px));
  }

  /* Panel docked just right of the container, matching its height.
     .game-container is position:relative, so left:100% anchors the panel
     just past the container's right edge; margin-left adds the gap. */
  .chat-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    right: auto;
    margin-left: var(--chat-gap);
    width: var(--chat-panel-w);
    height: auto;
    max-width: none;
    background: transparent;
    padding: 0;
    display: block;
    align-items: initial;
    justify-content: initial;
    z-index: 80;            /* above game content, below #toast-container */
  }
  /* No modal fade-out in panel mode (the panel is static). */
  .chat-overlay.closing { animation: none; }

  /* Card fills the panel rectangle; keep its existing visual treatment
     and flex column so #chat-feed remains the only internal scroller and
     the header/dock stay pinned. No pop animation. */
  .chat-card {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    animation: none;
  }

  /* No toggle / no close button in side-panel mode. */
  #chat-toggle { display: none !important; }
  #chat-close { display: none; }
}