:root {
  --color-bg: #faf3e8;
  --color-surface: #ffffff;
  --color-text: #3a2e26;
  --color-primary: #c65d3b;
  --color-primary-dark: #a8492c;
  --color-secondary: #3d5a80;
  --color-accent: #81b29a;
  --color-board: #eaddc7;
  --color-cell: #f6efe1;
  --color-cell-text: #b0a48d;
  --color-tile-bg: #f2cc8f;
  --color-tile-text: #3a2e26;
  --color-bonus-tw: #c65d3b;
  --color-bonus-dw: #e0a458;
  --color-bonus-tl: #3d5a80;
  --color-bonus-dl: #81b29a;
  --color-border: #e4d7c3;
  --color-muted: #a89882;
  --radius: 10px;
  --shadow: 0 2px 6px rgba(58, 46, 38, 0.15);
  --shadow-glow-primary: 0 2px 8px rgba(198, 93, 59, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c140f;
    --color-surface: #2a2019;
    --color-text: #f2e6d8;
    --color-primary: #e8825a;
    --color-primary-dark: #f2a77e;
    --color-secondary: #8fb3d9;
    --color-accent: #a8d1ba;
    --color-board: #3a2c20;
    --color-cell: #2a2019;
    --color-cell-text: #8a7c68;
    --color-tile-bg: #eab766;
    --color-tile-text: #2a1c10;
    --color-bonus-tw: #d9764f;
    --color-bonus-dw: #e6b164;
    --color-bonus-tl: #6a93bf;
    --color-bonus-dl: #93c7a6;
    --color-border: #4a3b2c;
    --color-muted: #a08b6f;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-glow-primary: 0 2px 10px rgba(232, 130, 90, 0.4);
  }
}

/* Named theme palettes, picked from the settings drawer. The attribute
   selector on :root outranks both the plain :root above and the
   prefers-color-scheme block above it, so a chosen theme always wins
   over the system light/dark default regardless of source order. */
:root[data-theme="candy"] {
  --color-bg: #fff0f5;
  --color-surface: #ffffff;
  --color-text: #6b3a4a;
  --color-primary: #ff6fa5;
  --color-primary-dark: #e0568c;
  --color-secondary: #2f9fb8;
  --color-accent: #4fae7a;
  --color-board: #ffe3ef;
  --color-cell: #fff8fb;
  --color-cell-text: #d9a7bc;
  --color-tile-bg: #ffd166;
  --color-tile-text: #6b3a4a;
  --color-bonus-tw: #ff6fa5;
  --color-bonus-dw: #f2994a;
  --color-bonus-tl: #2f9fb8;
  --color-bonus-dl: #4fae7a;
  --color-border: #ffd0e1;
  --color-muted: #c98aa3;
}

:root[data-theme="space"] {
  --color-bg: #0b0f2b;
  --color-surface: #161b3d;
  --color-text: #e8ecff;
  --color-primary: #7c5cff;
  --color-primary-dark: #b3a1ff;
  --color-secondary: #35d0ff;
  --color-accent: #ff5da2;
  --color-board: #1d2450;
  --color-cell: #12163a;
  --color-cell-text: #5a6291;
  --color-tile-bg: #ffd166;
  --color-tile-text: #201033;
  --color-bonus-tw: #7c5cff;
  --color-bonus-dw: #ff5da2;
  --color-bonus-tl: #35d0ff;
  --color-bonus-dl: #4fe0a0;
  --color-border: #2a3166;
  --color-muted: #6b74a8;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

:root[data-theme="kpop"] {
  --color-bg: #fdf1ff;
  --color-surface: #ffffff;
  --color-text: #34204a;
  --color-primary: #ff2d78;
  --color-primary-dark: #d61463;
  --color-secondary: #7b2ff7;
  --color-accent: #0891a8;
  --color-board: #f3e3ff;
  --color-cell: #fbf4ff;
  --color-cell-text: #c9a8e0;
  --color-tile-bg: #ffe94d;
  --color-tile-text: #34204a;
  --color-bonus-tw: #ff2d78;
  --color-bonus-dw: #7b2ff7;
  --color-bonus-tl: #0891a8;
  --color-bonus-dl: #ff8fc4;
  --color-border: #ecd2ff;
  --color-muted: #b48fce;
}

:root[data-theme="unicorn"] {
  --color-bg: #f6f1ff;
  --color-surface: #ffffff;
  --color-text: #4a3b66;
  --color-primary: #b355f0;
  --color-primary-dark: #9333ea;
  --color-secondary: #0d9488;
  --color-accent: #ec4899;
  --color-board: #eee6ff;
  --color-cell: #f9f5ff;
  --color-cell-text: #cdb9e8;
  --color-tile-bg: #ffe066;
  --color-tile-text: #4a3b66;
  --color-bonus-tw: #b355f0;
  --color-bonus-dw: #ec4899;
  --color-bonus-tl: #0d9488;
  --color-bonus-dl: #6ee7c9;
  --color-border: #e3d4ff;
  --color-muted: #a897c4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(230, 164, 88, 0.18), transparent 55%),
    radial-gradient(circle at 100% 10%, rgba(129, 178, 154, 0.12), transparent 45%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(circle at 15% -10%, rgba(217, 122, 84, 0.14), transparent 55%),
      radial-gradient(circle at 100% 10%, rgba(147, 199, 166, 0.08), transparent 45%),
      var(--color-bg);
    background-attachment: fixed;
  }
}

:root[data-theme="candy"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(255, 111, 165, 0.18), transparent 55%),
    radial-gradient(circle at 100% 10%, rgba(79, 174, 122, 0.12), transparent 45%),
    var(--color-bg);
  background-attachment: fixed;
}

:root[data-theme="space"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(124, 92, 255, 0.25), transparent 55%),
    radial-gradient(circle at 100% 10%, rgba(53, 208, 255, 0.15), transparent 45%),
    var(--color-bg);
  background-attachment: fixed;
}

:root[data-theme="kpop"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(255, 45, 120, 0.18), transparent 55%),
    radial-gradient(circle at 100% 10%, rgba(123, 47, 247, 0.12), transparent 45%),
    var(--color-bg);
  background-attachment: fixed;
}

:root[data-theme="unicorn"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(179, 85, 240, 0.16), transparent 55%),
    radial-gradient(circle at 100% 10%, rgba(236, 72, 153, 0.12), transparent 45%),
    var(--color-bg);
  background-attachment: fixed;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}

.hidden { display: none !important; }

#screen-start,
#screen-lobby,
#screen-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 32px);
}

#screen-start {
  position: relative;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.5rem;
  text-align: center;
  color: var(--color-primary-dark);
  margin: 8px 0 20px;
}

.title-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.settings-btn {
  margin-top: 16px;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.card-spaced {
  margin-top: 16px;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.field-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.field-icon-heading {
  width: 26px;
  height: 26px;
  color: var(--color-secondary);
}

input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.18);
}

.player-count-picker {
  display: grid;
  grid-template-columns: repeat(2, 40px);
  justify-content: center;
  align-content: center;
  gap: 10px;
}

.player-count-picker .count-swatch:nth-child(3) {
  grid-column: 1 / span 2;
  justify-self: center;
}

.count-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.count-swatch.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.25);
  transform: scale(1.1);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease;
}

.btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.mode-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.mode-tab-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mode-tab.active {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: white;
}

.mode-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 210px;
}

.btn-icon-only {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  align-self: center;
}

.btn-start {
  margin-top: auto;
  margin-bottom: 6px;
}

.btn-icon-only .btn-icon {
  width: 26px;
  height: 26px;
}

.btn-icon-only-small {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.btn-icon-only-small .btn-icon {
  width: 20px;
  height: 20px;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

.btn-primary { background: var(--color-primary); color: white; }
.btn-secondary { background: var(--color-secondary); color: white; }
.btn-hint { background: var(--color-accent); color: var(--color-text); }

.error-text {
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  min-height: 1em;
}

.player-list {
  width: 100%;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-chip {
  background: var(--color-surface);
  border-left: 6px solid;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}

.room-row {
  border-left: 6px solid var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.room-row .btn:not(.btn-icon-only-small) {
  padding: 8px 14px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

#game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#game-header .btn-icon-only-small {
  width: 28px;
  height: 28px;
}

#game-header .btn-icon-only-small .btn-icon {
  width: 16px;
  height: 16px;
}

#turn-indicator {
  font-weight: 700;
  color: var(--color-primary-dark);
}

#bag-count {
  font-size: 0.8rem;
  color: var(--color-secondary);
}

#room-code-display {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

#scoreboard {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.score-chip {
  border: 2px solid;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  display: flex;
  gap: 6px;
  background: var(--color-surface);
  transition: transform 0.15s ease, background 0.15s ease;
}

.score-name { font-weight: 600; }
.score-value { display: inline-block; font-weight: 700; }

.score-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-glow-primary);
  transform: scale(1.05);
  animation: activeTurnPulse 1.6s ease-in-out infinite;
}

@keyframes activeTurnPulse {
  0%, 100% { box-shadow: var(--shadow-glow-primary); }
  50% { box-shadow: 0 0 0 6px rgba(198, 93, 59, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .score-chip.active {
    animation: none;
  }
}

@keyframes scoreBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); color: var(--color-primary); }
  100% { transform: scale(1); }
}

@keyframes scoreBumpOnPrimary {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); color: #fff3c4; }
  100% { transform: scale(1); }
}

.score-chip:not(.active) .score-value.score-bump {
  animation: scoreBump 0.5s ease;
}

.score-chip.active .score-value.score-bump {
  animation: scoreBumpOnPrimary 0.5s ease;
}

#board {
  display: grid;
  grid-template-columns: repeat(var(--board-size), 1fr);
  gap: 2px;
  background: var(--color-board);
  border-radius: var(--radius);
  padding: 4px;
  aspect-ratio: 1 / 1;
}

.cell {
  background: var(--color-cell);
  border: none;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: clamp(8px, 2.6vw, 15px);
  font-weight: 700;
  color: var(--color-cell-text);
  padding: 0;
  aspect-ratio: 1 / 1;
}

.cell.bonus-tw { background: var(--color-bonus-tw); color: white; }
.cell.bonus-dw { background: var(--color-bonus-dw); color: white; }
.cell.bonus-tl { background: var(--color-bonus-tl); color: white; }
.cell.bonus-dl { background: var(--color-bonus-dl); color: white; }

.bonus-type {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.bonus-mult {
  font-size: 1em;
  font-weight: 800;
}

/* Below ~480px the .bonus-type label (0.5em of an already-small clamped
   cell font) renders at roughly 5px tall and is unreadable. Hide the text
   label on narrow screens; the bonus square's background color (see
   .bonus-tw/dw/tl/dl) and the larger .bonus-mult number still convey the
   bonus, and the legend above the board spells out what each color means. */
@media (max-width: 480px) {
  .bonus-type {
    display: none;
  }
}

.cell.filled {
  background: var(--color-tile-bg);
  color: var(--color-tile-text);
  font-size: clamp(12px, 3.6vw, 18px);
}

.cell.staged {
  background: #fff3c4;
  color: var(--color-tile-text);
  font-size: clamp(12px, 3.6vw, 18px);
  box-shadow: inset 0 0 0 2px var(--color-primary);
  animation: pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Plays once on each newly-scored tile right after a word is confirmed —
   a bigger celebratory bounce than the plain staging .pop, with a warm
   gold flash so a correct word visibly "lands". Duration must match
   CONFIRM_ANIM_MS in app.js, which clears the triggering class after the
   animation finishes. */
.cell.cell-confirm-pop {
  animation: confirmPop 1.05s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes confirmPop {
  0% { transform: scale(0.85) rotate(0deg); box-shadow: none; }
  30% {
    transform: scale(1.3) rotate(-4deg);
    box-shadow: 0 0 0 4px #ffd166, 0 4px 14px rgba(255, 209, 102, 0.7);
  }
  55% { transform: scale(0.95) rotate(3deg); box-shadow: 0 0 0 2px #ffd166; }
  80% { transform: scale(1.08) rotate(0deg); box-shadow: none; }
  100% { transform: scale(1); box-shadow: none; }
}

/* Another player's in-progress (not yet submitted) tile placement, relayed
   live so everyone can watch a word take shape instead of a static board. */
.cell.ghost {
  background: transparent;
  color: var(--color-primary);
  font-size: clamp(12px, 3.6vw, 18px);
  box-shadow: inset 0 0 0 2px var(--color-primary);
  opacity: 0.45;
  cursor: default;
}

.board-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  font-size: 0.7rem;
  color: var(--color-secondary);
  margin: 0 0 8px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.legend-swatch.bonus-tw { background: var(--color-bonus-tw); }
.legend-swatch.bonus-dw { background: var(--color-bonus-dw); }
.legend-swatch.bonus-tl { background: var(--color-bonus-tl); }
.legend-swatch.bonus-dl { background: var(--color-bonus-dl); }

#rack {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
  flex-wrap: wrap;
}

.tile {
  width: 40px;
  height: 40px;
  background: var(--color-tile-bg);
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-tile-text);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tile:hover { transform: translateY(-2px); }

.tile.selected {
  box-shadow: 0 0 0 3px var(--color-primary);
  transform: translateY(-4px);
}

#action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.game-message {
  min-height: 1.2em;
  text-align: center;
  font-weight: 600;
  color: var(--color-secondary);
  margin-top: 10px;
}

.game-message.error {
  color: var(--color-primary-dark);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 20px 20px;
  text-align: center;
  z-index: 21;
}

.modal.hidden {
  display: none;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.hint-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0 0 12px;
}

.hint-intro .field-icon {
  width: 18px;
  height: 18px;
}

.hint-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.hint-word {
  background: var(--color-tile-bg);
  color: var(--color-tile-text);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.exchange-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 20px;
}

#btn-confirm-exchange {
  width: 100%;
}

#btn-confirm-exchange:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hint-empty {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
}

#end-title {
  text-align: center;
}

#end-title.win-pulse {
  animation: winPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes winPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.confetti-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.2; }
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  z-index: 21;
  padding: 20px;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.drawer.hidden {
  display: block;
  transform: translateX(100%);
  pointer-events: none;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.drawer-header h2 {
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin: 0;
}

.drawer-section h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 12px;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-swatch.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.2);
}

.theme-swatch-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-swatch-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.theme-swatch-preview {
  width: 100%;
  height: 32px;
  border-radius: 6px;
}