/* ── Light theme (default) ── */
:root {
  --bg:            #f5f5f0; /* outermost page background (body) */

  /* Surfaces layer on top of --bg. Three levels of depth:
     surface   = cards, panels, modals, dropdowns — floating above the page
     surface-2 = subtle tint within surface elements; also used as table-row hover
     surface-3 = inset/recessed elements — text inputs, chip tags, collapsed sections
     surface-hover = hover state for interactive non-table elements (chip bars, action rows) */
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --surface-3:     #f0f0f0;
  --surface-hover: #e8e8e8;

  --border:        #e0e0e0;

  /* Text hierarchy from most to least prominent:
     text   = headings, primary body copy, active/focused labels
     text-2 = supporting labels — player names, clue body text, sidebar content
     text-3 = muted metadata — puzzle author, timestamps, captions, icon buttons
     text-4 = very faint — input placeholders, room codes, empty-state notices, dashed dividers */
  --text:          #1a1a1a;
  --text-2:        #444444;
  --text-3:        #888888;
  --text-4:        #bbbbbb;

  --accent:        #3498db; /* interactive highlights — links, selected clue, focused input border */
  --accent-2:      #2980b9; /* accent hover/pressed state */
  --accent-subtle: rgba(52,152,219,0.12); /* accent tint background — active picker option */

  --correct:       #27ae60; /* correct-answer highlight */
  --error:         #e74c3c; /* wrong-answer highlight */
  --warning:       #e67e22; /* warning state (e.g. connection issues) */
  --pencil:        #7f8c8d; /* pencil-mode letter colour */

  /* Grid colours are intentionally fixed (not theme-aware) so the puzzle
     always looks like a classic black-and-white printed crossword. */
  --grid-line:     #000000; /* cell borders and outer box */
  --grid-bg:       #ffffff; /* white (letter) cell fill */
  --grid-black:    #000000; /* black (blocked) cell fill */
  --grid-letter:   #000000; /* letter text inside cells */
  --grid-number:   #333333; /* small clue-number in cell corner */

  --shadow:        rgba(0,0,0,0.1);
}

/* ── Dark theme ── */
html[data-theme="dark"] {
  --bg:            #111111;
  --surface:       #1e1e1e;
  --surface-2:     #252525;
  --surface-3:     #2e2e2e;
  --surface-hover: #393939;
  --border:        #404040;
  --text:          #ddded5;
  --text-2:        #ddded5;
  --text-3:        #777777;
  --text-4:        #555555; /* note: in dark mode text-4 reads darker than light (faint on dark bg) */
  --accent:        #3d9fd4;
  --accent-2:      #5dade2; /* accent-2 is lighter than accent in dark (reversed from light) for legibility */
  --accent-subtle: rgba(61,159,212,0.18);
  --correct:       #2ecc71;
  --error:         #e74c3c;
  --warning:       #e67e22;
  --pencil:        #95a5a6;
  --grid-line:     #434544; /* softened slightly so the grid border isn't jarring on a dark page */
  --grid-bg:       #ddded5; /* grid interior stays white — crossword is always printed-paper style */
  --grid-black:    #000000;
  --grid-letter:   #000000;
  --grid-number:   #333333;
  --shadow:        rgba(0,0,0,0.35);
}

/* ── Neon theme ── */
html[data-theme="neon"] {
  --bg:            #0a0010;
  --surface:       #120018;
  --surface-2:     #1a0024;
  --surface-3:     #220030;
  --surface-hover: #2c0040;
  --border:        #550055;
  --text:          #ff2d78;
  --text-2:        #dd2266;
  --text-3:        #883355;
  --text-4:        #552233;
  --accent:        #3d9fd4; /* same blue as dark theme */
  --accent-2:      #5dade2;
  --accent-subtle: rgba(61,159,212,0.2);
  --correct:       #00ff88;
  --error:         #ff3355;
  --warning:       #ff8800;
  --pencil:        #cc4488;
  --grid-line:     #cc0066;
  --grid-bg:       #ffffff;
  --grid-black:    #1a0024;
  --grid-letter:   #000000;
  --grid-number:   #660033;
  --shadow:        rgba(255,45,120,0.2);
}

/* ── Bottom-left corner bar (theme toggle + GitHub link) ── */
.corner-bar {
  position: fixed;
  bottom: 1.1rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.theme-picker {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  box-shadow: 0 4px 12px var(--shadow);
}
.theme-picker[hidden] { display: none; }

.theme-picker-btn.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}

.github-link {
  color: var(--text-3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  transition: color 0.15s;
}
.github-link:hover { color: var(--text); }

/* ── Theme toggle button (shared across pages) ── */
.theme-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.theme-btn:hover { background: var(--surface-3); color: var(--text); }
.theme-btn svg { width: 16px; height: 16px; }