/* =============================================================================
   A-Math Game — Stylesheet
   Default theme: "Clean & Modern"
   Theme switching planned for Phase 8 — colors are CSS variables for easy swap.
   ============================================================================= */

/* =============================================================================
   THEME VARIABLES (default: Clean & Modern)
   To add a theme later, just override these in a `.theme-xxx` class on body.
   ============================================================================= */

:root {
  /* Page */
  --bg-page: #f8f9fb;
  --bg-card: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;

  /* Board cells */
  --cell-plain: #f3f4f6;
  --cell-3E: #dc2626;
  --cell-2E: #f59e0b;
  --cell-3T: #2563eb;
  --cell-2T: #f97316;
  --cell-3E-text: #ffffff;
  --cell-2E-text: #ffffff;
  --cell-3T-text: #ffffff;
  --cell-2T-text: #ffffff;
  --cell-border: #e5e7eb;

  /* Center star */
  --center-star: #fbbf24;

  /* Tiles */
  --tile-bg: #fef3c7;
  --tile-border: #f59e0b;
  --tile-text: #1f2937;
  --tile-points: #6b7280;

  /* Tile-back */
  --tile-back-bg: #4338ca;
  --tile-back-pattern: #6366f1;

  /* Buttons */
  --btn-primary-bg: #2563eb;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #1d4ed8;
  --btn-secondary-bg: #e5e7eb;
  --btn-secondary-text: #1f2937;
  --btn-secondary-hover: #d1d5db;
  --btn-disabled-bg: #f3f4f6;
  --btn-disabled-text: #9ca3af;

  /* Score */
  --score-bg: #ffffff;
  --score-border: #d1d5db;

  /* Timer */
  --timer-normal: #1f2937;
  --timer-negative: #dc2626;

  /* Sizes (override on mobile) */
  --cell-size: 40px;
  --tile-size: 38px;
  --board-gap: 1px;
  --rack-tile-size: 50px;
}

/* =============================================================================
   PAGE BASICS
   ============================================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Sarabun', Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
}

#app {
  max-width: 700px;
  margin: 0 auto;
}

/* Tablet / iPad: maximize board to screen edges */
@media (min-width: 700px) and (max-width: 1299px) {
  #app {
    max-width: 95vw;
    padding: 0 8px;
  }
  :root {
    /* iPad: no side panels. Board can use most of screen width.
       Use simpler calc — just divide available width by 15 cells */
    --cell-size: min(calc((95vw - 52px) / 15), calc((100vh - 280px) / 15), 52px);
    --tile-size: calc(var(--cell-size) - 2px);
    --rack-tile-size: 44px;
  }
}

/* =============================================================================
   DESKTOP 3-COLUMN LAYOUT
   Hides side panels by default (mobile-first). Activates on wide viewports.
   ============================================================================= */

#desktop-grid {
  display: block; /* default: single column, just game container */
}

.desktop-side-panel {
  display: none; /* hidden on mobile/narrow screens */
}

@media (min-width: 1300px) {
  /* Use most of the screen width on desktop */
  #app {
    max-width: 1600px;
    padding: 0 16px;
  }

  /* Constrain page to viewport height; allow vertical scroll as a safety
     net in case the height computation underestimates the chrome (e.g.
     after we added the active-turn glow padding to the rack rows, the
     status card, the tile tracker side panel header, etc.). Without
     `overflow: auto`, any underestimate clips the player rack out of view. */
  html, body {
    height: 100%;
  }
  body {
    overflow: auto;
    padding: 6px 12px;
  }

  h1 {
    font-size: 16px;
    margin: 0 0 4px;
  }

  #status {
    font-size: 13px;
    padding: 4px 10px;
    margin: 2px 0;
  }

  #desktop-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
  }

  /* Dynamic cell sizing: pick the SMALLER of width-budget and height-budget.
   * Width budget: (viewport_w - 642px) / 15
   *   642 = 2 × 280 (side panels) + 16 × 2 (gaps) + 16 × 2 (page padding) + slack
   * Height budget: (viewport_h - 260px) / 15
   *   Reserved chrome (in vertical order):
   *     ~30px H1
   *     ~36px status bar
   *     ~70px opponent row (score + rack + active-turn glow border/padding)
   *     ~70px player row (same)
   *     ~32px timer row (when chess clock active)
   *     ~10px margins between rows
   *     ~12px body padding
   *   Total ≈ 260px reserve.
   * Min 28px, max 40px.
   */
  :root {
    --cell-size: clamp(28px,
      min(
        calc((100vw - 642px) / 15),
        calc((100vh - 260px) / 15)
      ),
      40px);
    --tile-size: clamp(26px,
      min(
        calc((100vw - 642px) / 15 - 2px),
        calc((100vh - 260px) / 15 - 2px)
      ),
      38px);
    --rack-tile-size: 38px;
  }

  .tile-face {
    font-size: clamp(15px, calc(var(--cell-size) * 0.45), 20px);
  }

  .amath-cell .premium-label {
    font-size: clamp(8px, calc(var(--cell-size) * 0.22), 11px);
  }

  .amath-cell.center-cell .center-star {
    font-size: clamp(18px, calc(var(--cell-size) * 0.6), 26px);
  }

  .tile-points {
    font-size: clamp(8px, calc(var(--cell-size) * 0.2), 10px);
  }

  /* Score boxes + timers — compact */
  .score-box,
  .timer-box {
    min-width: 60px;
    padding: 4px 10px;
  }

  .score-value {
    font-size: 18px;
  }

  .timer-value {
    font-size: 13px;
  }

  /* Compact buttons */
  .btn {
    padding: 5px 10px;
    font-size: 13px;
  }

  .button-bar {
    margin-top: 6px;
    gap: 6px;
  }

  /* Tighter amath-app spacing */
  .amath-app {
    gap: 6px;
  }

  .opponent-area, .player-area {
    gap: 6px;
    /* Tighter active-turn padding on desktop — height budget is tight here. */
    padding: 2px;
  }

  /* Side panel constrained to viewport */
  .desktop-side-panel {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 8px 12px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    position: sticky;
    top: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }

  body.theme-dark .desktop-side-panel {
    background: var(--bg-card);
    border-color: var(--border-medium);
  }

  .side-panel-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 0.3px;
  }

  /* When a second section header follows a body, add space above it
     so stacked sections (e.g., Tile Tracker + Score Sheet) read clearly. */
  .side-panel-body + .side-panel-header {
    margin-top: 16px;
  }

  .side-panel-body {
    font-size: 13px;
  }

  /* ─── Status card (left panel, replaces top status bar on desktop) ─── */
  .status-card {
    background: linear-gradient(135deg, rgba(252, 232, 178, 0.4) 0%, rgba(255, 248, 220, 0.6) 100%);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    transition: box-shadow 0.3s ease;
  }

  .status-card.pulse {
    animation: statusPulse 0.6s ease;
  }

  @keyframes statusPulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  }

  /* ─── Thinking progress bar (CSS-animated, runs even when JS is busy) ─── */
  .status-card.thinking {
    border-color: #d97706;
  }

  .thinking-bar {
    margin-top: 8px;
    height: 4px;
    background: rgba(217, 119, 6, 0.15);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .thinking-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
    border-radius: 2px;
    transform-origin: left center;
    animation-name: thinkingProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  @keyframes thinkingProgress {
    from { width: 0%; }
    to { width: 100%; }
  }

  /* Indeterminate shimmer overlay — moves continuously even when JS is busy */
  .thinking-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    animation: thinkingShimmer 1.5s linear infinite;
    pointer-events: none;
  }

  @keyframes thinkingShimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }

  body.theme-dark .status-card {
    background: linear-gradient(135deg, rgba(60, 50, 30, 0.5) 0%, rgba(50, 45, 30, 0.6) 100%);
    border-color: var(--border-medium);
  }

  .status-card-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  .status-card-body {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    min-height: 18px;
    word-wrap: break-word;
  }

  /* Hide the top status bar — its content lives in the status card */
  #status {
    display: none !important;
  }

  /* ─── Actions card (button bar in left panel) ─── */
  #desktop-actions-slot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
  }

  #desktop-actions-slot::before {
    content: '⚡ Actions';
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }

  /* When buttons are inside the side panel, lay them out in a 2-column grid */
  .button-bar.button-bar-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 0;
    justify-content: stretch;
  }
  /* The row-layout line-break is meaningless in the desktop 2-col grid — drop it. */
  .button-bar.button-bar-side .button-bar-break { display: none; }

  .button-bar.button-bar-side .btn {
    padding: 6px 8px;
    font-size: 12px;
    width: 100%;
  }

  /* Primary action (Submit) spans full width */
  .button-bar.button-bar-side #btn-submit {
    grid-column: 1 / -1;
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Reset and Pass on same row */
  .button-bar.button-bar-side #btn-reset,
  .button-bar.button-bar-side #btn-pass {
    /* default grid placement is fine */
  }

  /* Icon buttons grouped at the bottom, smaller, in a row */
  .button-bar.button-bar-side .btn-icon {
    grid-column: span 1;
    padding: 5px;
    font-size: 14px;
  }

  /* Tertiary (Auto, New Game) — full row */
  .button-bar.button-bar-side .btn-tertiary {
    grid-column: 1 / -1;
    font-size: 12px;
  }

  /* Live score sheet — compact 3-column table */
  .live-score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .live-score-table th {
    text-align: center;
    padding: 4px 2px;
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--bg-elevated, rgba(0,0,0,0.02));
    border-bottom: 1px solid var(--border-light);
  }

  .live-score-table td {
    padding: 4px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
  }

  .live-score-table .col-turn {
    color: var(--text-secondary);
    font-weight: 600;
    width: 26px;
  }

  .live-score-table .row-bingo {
    font-weight: 700;
    color: #059669;
  }

  .live-score-empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 8px 0;
  }

  .live-score-totals {
    display: flex;
    justify-content: space-between;
    padding: 6px 4px;
    margin-bottom: 6px;
    background: var(--bg-elevated, rgba(0,0,0,0.03));
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
  }

  .live-score-totals span:last-child {
    color: var(--text-primary);
  }

  /* Tile tracker compact mode for side panel */
  .side-panel-body .tile-tracker {
    padding: 0;
    margin: 0;
  }
  .side-panel-body .tracker-title {
    display: none; /* header already shows it */
  }
  .side-panel-body .tracker-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .side-panel-body .tracker-item {
    padding: 4px 6px;
    font-size: 12px;
  }
  .side-panel-body .tracker-info {
    margin-top: 8px;
    font-size: 11px;
    text-align: center;
    color: var(--text-secondary);
  }

  /* Hint to the user: side panels live-update */
  .side-panel-hint {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 6px;
    font-style: italic;
  }

  /* Hide debug controls on desktop — saves vertical space */
  #debug-toggle, #debug-output {
    display: none !important;
  }
}

/* =============================================================================
   ULTRA-WIDE SCREENS (1600px+)
   Wider side panels for high-res monitors.
   ============================================================================= */

@media (min-width: 1600px) {
  #app {
    max-width: 1800px;
  }

  #desktop-grid {
    grid-template-columns: 320px minmax(0, 1fr) 320px;
    gap: 20px;
  }

  /* Recalculate center column for wider panels:
   * = viewport - 32 padding - 640 panels - 40 gaps = viewport - 712
   * Height reserve 260px (same rationale as the 1300px breakpoint above). */
  :root {
    --cell-size: clamp(28px,
      min(
        calc((100vw - 712px) / 15),
        calc((100vh - 260px) / 15)
      ),
      42px);
    --tile-size: clamp(26px,
      min(
        calc((100vw - 712px) / 15 - 2px),
        calc((100vh - 260px) / 15 - 2px)
      ),
      40px);
  }

  .tile-face {
    font-size: clamp(13px, calc(var(--cell-size) * 0.45), 20px);
  }

  .amath-cell .premium-label {
    font-size: clamp(8px, calc(var(--cell-size) * 0.22), 11px);
  }

  .amath-cell.center-cell .center-star {
    font-size: clamp(16px, calc(var(--cell-size) * 0.6), 25px);
  }

  .tile-points {
    font-size: clamp(7px, calc(var(--cell-size) * 0.2), 10px);
  }
}

/* =============================================================================
   FULL HD AND BIGGER (1900px+)
   ============================================================================= */

@media (min-width: 1900px) {
  #app {
    max-width: 2100px;
  }

  /* Max cell size cap — kept reasonable so board doesn't dominate.
   * Height reserve 260px (consistent with smaller breakpoints). */
  :root {
    --cell-size: clamp(28px,
      min(
        calc((100vw - 712px) / 15),
        calc((100vh - 260px) / 15)
      ),
      44px);
    --tile-size: clamp(26px,
      min(
        calc((100vw - 712px) / 15 - 2px),
        calc((100vh - 260px) / 15 - 2px)
      ),
      42px);
  }

  .tile-face {
    font-size: clamp(15px, calc(var(--cell-size) * 0.45), 24px);
  }

  .amath-cell.center-cell .center-star {
    font-size: clamp(18px, calc(var(--cell-size) * 0.6), 30px);
  }
}

/* =============================================================================
   APP LAYOUT
   ============================================================================= */

.amath-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.opponent-area,
.player-area {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
  /* Subtle transitions so the active-turn highlight fades in/out smoothly
     instead of snapping on. */
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

/* ──────────────────────────────────────────────────────────────────
   ACTIVE-TURN HIGHLIGHT
   When it's a player's turn, the row containing that player's score +
   rack gets a colored border and glow so the user can see at a glance
   whose turn it is. The two rows alternate as turns change.
   ──────────────────────────────────────────────────────────────────  */

/* Player's turn — green glow on their row */
.player-area.is-active-turn {
  border-color: #22c55e;                                /* green-500 */
  background-color: rgba(34, 197, 94, 0.08);            /* faint green tint */
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25),
              0 0 18px rgba(34, 197, 94, 0.35);
}

/* AI's turn — blue glow on AI row, with a slow pulse to reinforce
   the "thinking" state. The pulse is GPU-cheap (box-shadow only). */
.opponent-area.is-active-turn {
  border-color: #3b82f6;                                /* blue-500 */
  background-color: rgba(59, 130, 246, 0.08);           /* faint blue tint */
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25),
              0 0 18px rgba(59, 130, 246, 0.35);
  animation: ai-thinking-pulse 1.8s ease-in-out infinite;
}

@keyframes ai-thinking-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25),
                0 0 18px rgba(59, 130, 246, 0.35);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4),
                0 0 26px rgba(59, 130, 246, 0.6);
  }
}

/* Dark theme: brighten the glow so it's visible against the dark
   background. Standard colors look weak on dark blue. */
body.theme-dark .player-area.is-active-turn {
  background-color: rgba(34, 197, 94, 0.12);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.45),
              0 0 24px rgba(34, 197, 94, 0.55);
}
body.theme-dark .opponent-area.is-active-turn {
  background-color: rgba(59, 130, 246, 0.12);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45),
              0 0 24px rgba(59, 130, 246, 0.55);
}
body.theme-dark .opponent-area.is-active-turn {
  animation: ai-thinking-pulse-dark 1.8s ease-in-out infinite;
}
@keyframes ai-thinking-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45),
                0 0 24px rgba(59, 130, 246, 0.55);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6),
                0 0 32px rgba(59, 130, 246, 0.8);
  }
}

/* Users who prefer reduced motion (system setting) get the static
   highlight without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .opponent-area.is-active-turn,
  body.theme-dark .opponent-area.is-active-turn {
    animation: none;
  }
}

.board-area {
  display: flex;
  justify-content: center;
}

/* =============================================================================
   SCORE BOXES
   ============================================================================= */

.score-box {
  background: var(--score-bg);
  border: 1px solid var(--score-border);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 80px;
  text-align: center;
}

.score-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.score-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Feature M: Paused-timer indicator on score box */
.score-box.timer-paused {
  background: #fef3c7;
  border-color: #f59e0b;
  position: relative;
}

.score-box.timer-paused::after {
  content: "⏸";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  color: #b45309;
}

body.theme-dark .score-box.timer-paused {
  background: #422006;
  border-color: #b45309;
}

body.theme-dark .score-box.timer-paused::after {
  color: #fbbf24;
}

/* =============================================================================
   TIMER BOXES
   ============================================================================= */

.timer-box {
  background: var(--score-bg);
  border: 1px solid var(--score-border);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 70px;
  text-align: center;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.timer-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.timer-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--timer-normal);
}

.timer-negative {
  color: var(--timer-negative);
}

/* =============================================================================
   BOARD
   ============================================================================= */

.amath-board {
  display: grid;
  grid-template-columns: repeat(15, var(--cell-size));
  grid-template-rows: repeat(15, var(--cell-size));
  gap: var(--board-gap);
  background: var(--border-medium);
  padding: 2px;
  border-radius: 6px;
}

.amath-cell {
  background: var(--cell-plain);
  border: 1px solid var(--cell-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

.amath-cell .premium-label {
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

/* Premium squares */
.amath-cell.premium-3E {
  background: var(--cell-3E);
  color: var(--cell-3E-text);
  border-color: var(--cell-3E);
}

.amath-cell.premium-2E {
  background: var(--cell-2E);
  color: var(--cell-2E-text);
  border-color: var(--cell-2E);
}

.amath-cell.premium-3T {
  background: var(--cell-3T);
  color: var(--cell-3T-text);
  border-color: var(--cell-3T);
}

.amath-cell.premium-2T {
  background: var(--cell-2T);
  color: var(--cell-2T-text);
  border-color: var(--cell-2T);
}

/* Center star */
.amath-cell.center-cell .center-star {
  position: absolute;
  font-size: 20px;
  color: var(--center-star);
  pointer-events: none;
  z-index: 1;
}

.amath-cell.center-cell .premium-label {
  display: none;
}

/* When a tile is placed, hide the premium label and star so tile uses full cell */
.amath-cell:has(.amath-tile) .premium-label,
.amath-cell:has(.amath-tile) .center-star {
  display: none;
}

.amath-cell .amath-tile {
  width: calc(var(--cell-size) - 4px);
  height: calc(var(--cell-size) - 4px);
}

/* =============================================================================
   TILES (on board)
   ============================================================================= */

.amath-tile {
  width: var(--tile-size);
  height: var(--tile-size);
  background: var(--tile-bg);
  border: 1.5px solid var(--tile-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 700;
  color: var(--tile-text);
  user-select: none;
  z-index: 2;
}

.tile-face {
  font-size: 16px;
  line-height: 1;
}

.tile-points {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--tile-points);
}

.amath-tile.tile-op .tile-face,
.amath-tile.tile-equals .tile-face,
.amath-tile.tile-choice .tile-face {
  font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────────
   CHOICE TILES — ×/÷  and  +/-
   Rendered as two stacked glyphs separated by a thin horizontal
   rule, mimicking the printed physical A-Math tile. Both glyphs
   sit inside .tile-face (the same container we already position),
   so existing point-subscript positioning is unaffected.
   ────────────────────────────────────────────────────────────── */
.tile-face.tile-face-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Take the full inner height of the tile so the divider line is
     visually centered between the two glyphs. The padding keeps the
     symbols away from the tile's border. */
  padding: 1px 0;
  line-height: 1;
}

.tile-face.tile-face-stacked .tile-face-top,
.tile-face.tile-face-stacked .tile-face-bot {
  display: block;
  line-height: 1;
  /* The two glyphs share the parent font-size but are scaled down
     a touch so they fit comfortably with the divider between them. */
  font-size: 0.78em;
}

/* Thin horizontal rule between the two glyphs. Uses a border on
   the bottom symbol so it scales with the font and stays crisp on
   high-DPI displays. */
.tile-face.tile-face-stacked .tile-face-bot {
  border-top: 1px solid currentColor;
  margin-top: 1px;
  padding-top: 1px;
  /* Keep the rule short — slightly wider than the widest glyph so
     it reads as a fraction bar, not as a full-tile line. */
  min-width: 0.9em;
  text-align: center;
}
/* End choice-tile stacked rendering */

.amath-tile.tile-blank-unassigned {
  background: #f3f4f6;
  border-style: dashed;
}

.amath-tile.tile-blank-unassigned .tile-face {
  color: var(--text-secondary);
}

/* ──────────────────────────────────────────────────────────────────
   BLANK TILE ON BOARD (assigned)
   Light background + dashed orange border. Face unchanged — full
   opacity, no italic. The pale fill is the "scream". ─────────── */
.amath-tile.tile-blank-on-board {
  background: #fff7ed;              /* orange-50 — very light warm white */
  border-style: dashed;
  border-color: #f97316;            /* orange-500 */
  border-width: 2.5px;
}

body.theme-dark .amath-tile.tile-blank-on-board {
  background: #fef3c7;              /* amber-100 — pale on dark bg */
  border-color: #fb923c;            /* orange-400 */
}

/* =============================================================================
   PHASE 5: SELECTION + TENTATIVE TILES
   ============================================================================= */

.amath-tile.tile-selected {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.amath-tile.tile-tentative {
  background: #dbeafe;
  border-color: #3b82f6;
  border-style: dashed;
  border-width: 2px;
}

.amath-tile.tile-swap-selected {
  outline: 3px solid #dc2626;
  outline-offset: 2px;
  background: #fee2e2;
  border-color: #dc2626;
}

/* ──────────────────────────────────────────────────────────────────
   AI LAST-PLAY HIGHLIGHT
   Persistent colored border around every tile the AI placed on its
   most recent turn. Stays visible for the entire duration of the
   player's turn (cleared when the player submits/passes/swaps).
   Lets the player see at a glance what the AI just played, without
   needing to keep the brief cell-pulse animation onscreen.
   Uses a warm amber color so it's distinct from the blue selection
   border, the dashed-blue tentative border, and the red swap-selection
   border. ────────────────────────────────────────────────────────── */
.amath-tile.tile-ai-last-play {
  outline: 3px solid #f59e0b;       /* amber-500 — warm, attention-grabbing */
  outline-offset: -1px;             /* sit just inside the cell edge */
  box-shadow: 0 0 0 1px #f59e0b,
              0 0 10px rgba(245, 158, 11, 0.55);
  position: relative;
  z-index: 2;                       /* float above neighbouring tile borders */
}

/* Dark theme: brighter glow against dark background */
body.theme-dark .amath-tile.tile-ai-last-play {
  outline-color: #fbbf24;           /* amber-400 — punchier on dark */
  box-shadow: 0 0 0 1px #fbbf24,
              0 0 14px rgba(251, 191, 36, 0.7);
}

.btn-tertiary {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.btn-tertiary:hover:not(:disabled) {
  background: #fde68a;
}

/* Challenge button has a distinctive style */
#btn-challenge {
  background: #fbbf24;
  color: #78350f;
  border: 2px solid #f59e0b;
  font-weight: 700;
  animation: pulse 1s ease-in-out infinite;
}

#btn-challenge:hover:not(:disabled) {
  background: #f59e0b;
  color: #ffffff;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* Active toggle button (e.g., AI Takeover ON) */
.btn.btn-active {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.btn.btn-active:hover:not(:disabled) {
  background: #15803d;
}

/* =============================================================================
   AI vs AI MODE CONTROLS
   ============================================================================= */

.aivai-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  flex-wrap: wrap;
}

.aivai-speed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.aivai-speed input[type="range"] {
  width: 120px;
}

#aivai-speed-value {
  min-width: 24px;
  font-weight: 700;
  color: var(--btn-primary-bg);
}

/* =============================================================================
   MOBILE TWEAKS for Phase 8
   ============================================================================= */

@media (max-width: 600px) {
  .button-bar {
    gap: 6px;
  }
  .button-bar .btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .button-bar .btn-icon {
    width: 36px;
    padding: 6px 0;
  }
  .aivai-speed input[type="range"] {
    width: 80px;
  }
  .aivai-bar {
    padding: 6px;
    gap: 6px;
  }
}

/* =============================================================================
   GAME END POPUP
   ============================================================================= */

.game-end-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.game-end-dialog {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.game-end-winner {
  font-size: 36px;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 24px;
  letter-spacing: 1px;
}

.game-end-scores {
  background: var(--bg-elevated, var(--bg-card));
  color: var(--text-primary);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border-medium, #e5e7eb);
}

.game-end-scores .score-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.game-end-reason {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-style: italic;
}

.game-end-penalty {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.game-end-dialog .btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
}

/* =============================================================================
   SETTINGS POPUP
   ============================================================================= */

.btn-icon {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  width: 42px;
  padding: 8px 0;
  font-size: 18px;
  cursor: pointer;
}

.btn-icon:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
}

.settings-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
}

.settings-dialog {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  max-width: 460px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.settings-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-row {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
}

.settings-row:last-of-type {
  border-bottom: none;
}

/* Section header — visually separates groups of settings (Game Setup, Display,
   AI Behavior, Audio & Banter). The header itself isn't a setting row so
   it doesn't get the border-bottom treatment. */
.settings-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-page);
  border-left: 3px solid #f59e0b;  /* amber accent */
  border-radius: 0 4px 4px 0;
}

/* First section header sits right under the title — no top margin */
.settings-title + .settings-section-header {
  margin-top: 8px;
}

.settings-section-icon {
  font-size: 16px;
}

.settings-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

/* Label that sits as a block above its associated <select>. Used in the
   minimal settings layout (no badges, no hint text). */
.settings-label-block {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.settings-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.settings-hint {
  margin: 4px 0 0 28px;
  font-size: 12px;
  color: var(--text-secondary);
}

.settings-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* =============================================================================
   TILE TRACKER
   ============================================================================= */

.tile-tracker {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  width: 100%;
  max-width: 600px;
}

.tracker-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-align: center;
}

.tracker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 5px;
}

.tracker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cell-plain);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
}

.tracker-item-empty {
  opacity: 0.35;
  background: #f3f4f6;
}

.tracker-face {
  font-weight: 700;
  color: var(--text-primary);
}

.tracker-count {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.tracker-item-empty .tracker-count {
  background: var(--border-medium);
  color: var(--text-secondary);
}

.tracker-info {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 600px) {
  .tracker-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 3px;
  }
  .tracker-item {
    padding: 3px 4px;
    font-size: 11px;
  }
  .tracker-count {
    padding: 1px 5px;
    font-size: 10px;
  }
}

/* =============================================================================
   ANIMATIONS & VISUAL POLISH
   ============================================================================= */

/* Tile placement: pop in with bounce — applied ONLY to tentatively placed
   tiles (this turn's new placements) and the AI's freshly-placed tiles.
   Previously this rule applied to EVERY tile on the board, causing all
   board tiles to "blink" on every re-render (e.g., when the player clicks
   a rack tile). Now established board tiles are static. */
@keyframes tile-pop-in {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.amath-cell .amath-tile.tile-tentative,
.amath-cell .amath-tile.tile-fresh {
  animation: tile-pop-in 0.3s ease-out;
}

/* Hover lift for rack tiles */
.amath-rack-slot .amath-tile {
  transition: transform 0.15s, box-shadow 0.15s;
}

.amath-rack-slot .amath-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Cell pulse highlight (newly placed) */
@keyframes cell-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.4); }
}

.amath-cell.cell-pulse {
  animation: cell-pulse-anim 0.8s ease-out;
  z-index: 5;
}

@keyframes equation-flash-anim {
  0%   { box-shadow: 0 0 0 0      rgba(16, 185, 129, 0); }
  25%  { box-shadow: 0 0 12px 8px rgba(16, 185, 129, 0.95); }
  65%  { box-shadow: 0 0  7px 4px rgba(16, 185, 129, 0.55); }
  100% { box-shadow: 0 0 0 0      rgba(16, 185, 129, 0); }
}
.amath-cell.cell-equation-flash {
  animation: equation-flash-anim 0.65s ease-out forwards;
  z-index: 5;
}

/* Confetti */
.confetti-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 5000;
  overflow: hidden;
}

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

.confetti-piece {
  position: absolute;
  top: 0;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}

/* BINGO banner */
@keyframes bingo-pop-in {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.bingo-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #ffffff;
  font-size: 64px;
  font-weight: 900;
  padding: 20px 50px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  z-index: 4000;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 4px;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.bingo-banner.show {
  animation: bingo-pop-in 0.5s ease-out forwards;
}

@media (max-width: 600px) {
  .bingo-banner {
    font-size: 40px;
    padding: 14px 30px;
    letter-spacing: 2px;
  }
}

/* Game-end popup fade-in with scale */
@keyframes popup-fade-in {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

.game-end-dialog,
.settings-dialog,
.score-sheet-dialog,
.picker-dialog {
  animation: popup-fade-in 0.25s ease-out;
}

/* Score value transition (subtle scale when it changes) */
.score-value {
  transition: color 0.2s;
}

/* Toast smooth transitions already in place */

/* =============================================================================
   THEMES
   ============================================================================= */

/* Physical Board theme — matches the actual A-Math board look */
body.theme-physical {
  --bg-page: #cbd5e1;
  --cell-plain: #e0f2fe;
  --cell-3E: #dc2626;
  --cell-2E: #fde047;
  --cell-2E-text: #1f2937;
  --cell-3T: #1d4ed8;
  --cell-2T: #fb923c;
  --tile-bg: #fbbf24;
  --tile-border: #d97706;
}

/* Dark theme */
body.theme-dark {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-light: #334155;
  --border-medium: #475569;
  --cell-plain: #1e293b;
  --cell-border: #334155;
  --tile-bg: #fbbf24;
  --tile-border: #f59e0b;
  --tile-text: #1f2937;
  --tile-points: #6b7280;
  --score-bg: #1e293b;
  --score-border: #334155;
  --timer-normal: #f1f5f9;
  --btn-secondary-bg: #334155;
  --btn-secondary-text: #f1f5f9;
  --btn-secondary-hover: #475569;
  --btn-disabled-bg: #1e293b;
  --btn-disabled-text: #475569;
}

/* Playful theme */
body.theme-playful {
  --bg-page: #fef3c7;
  --bg-card: #fffbeb;
  --text-primary: #7c2d12;
  --cell-plain: #fef9c3;
  --cell-3E: #ec4899;
  --cell-2E: #a78bfa;
  --cell-3T: #06b6d4;
  --cell-2T: #f97316;
  --tile-bg: #fef3c7;
  --tile-border: #f59e0b;
  --btn-primary-bg: #ec4899;
  --btn-primary-hover: #db2777;
}

/* =============================================================================
   RULER (row/column numbers around the board)
   Hidden by default. Visible only in capture theme — turns the board into a
   labeled grid that's unambiguous in screenshots.
   ============================================================================= */

.amath-board-with-ruler {
  display: contents; /* in non-capture themes, behaves like nothing wraps the grid */
}

.amath-board-middle {
  display: contents; /* same — invisible wrapper in non-capture mode */
}

.amath-ruler {
  display: none;
}

/* =============================================================================
   COORDINATE LABELS — hidden by default, shown in capture theme only.
   ============================================================================= */

.amath-cell .coord-label {
  display: none;
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: clamp(7px, calc(var(--cell-size) * 0.20), 10px);
  font-weight: 700;
  color: #475569;            /* slate-600 — readable on white & pastels */
  pointer-events: none;
  user-select: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1;
  z-index: 1;
}

/* Capture theme — clean, labeled, unambiguous look for screenshots */
body.theme-capture {
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-light: #e5e7eb;
  --border-medium: #cbd5e1;
  --cell-plain: #ffffff;
  --cell-border: #cbd5e1;
  /* Tile colors: high-contrast for crisp screenshots */
  --tile-bg: #fef3c7;        /* amber-100 */
  --tile-border: #92400e;
  --tile-text: #111827;
  --tile-points: #6b7280;
}

/* Capture theme: switch the board wrapper to a real grid layout so ruler
   labels can sit alongside the board. */
body.theme-capture .amath-board-with-ruler {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 2px;
  background: #ffffff;
  padding: 4px;
}

body.theme-capture .amath-ruler {
  display: grid;
  background: #f8fafc;       /* slate-50 */
}

body.theme-capture .amath-ruler-top {
  grid-column: 1 / 3;
  grid-template-columns:
    var(--cell-size)
    repeat(15, var(--cell-size));
}

body.theme-capture .amath-board-middle {
  display: contents;
}

body.theme-capture .amath-ruler-left {
  grid-template-rows: repeat(15, var(--cell-size));
  grid-template-columns: var(--cell-size);
}

body.theme-capture .amath-ruler-cell,
body.theme-capture .amath-ruler-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(10px, calc(var(--cell-size) * 0.32), 14px);
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}

body.theme-capture .amath-ruler-cell.ruler-major {
  background: #fde68a;       /* amber-200 — highlight ×9 lines */
  color: #92400e;
}

/* Capture theme: replace pastel premium colors with WHITE backgrounds and a
   small marker glyph. This keeps tile content high-contrast in screenshots
   while still letting me identify which cells are 3E/2E/3T/2T by their marker. */
body.theme-capture .amath-cell {
  background: #ffffff;
  border: 1px solid #cbd5e1;
}
body.theme-capture .amath-cell.premium-3E {
  background: #ffffff;
  border: 2px solid #db2777; /* pink-600 */
}
body.theme-capture .amath-cell.premium-2E {
  background: #ffffff;
  border: 2px dashed #7c3aed; /* violet-600 */
}
body.theme-capture .amath-cell.premium-3T {
  background: #ffffff;
  border: 2px solid #0284c7; /* sky-600 */
}
body.theme-capture .amath-cell.premium-2T {
  background: #ffffff;
  border: 2px dashed #ea580c; /* orange-600 */
}

/* Highlight cells on rows 0/7/14 and cols 0/7/14 (the ×9 lines).
   Subtle background tint so the line "rivers" stand out at a glance. */
body.theme-capture .amath-cell.on-x9-line {
  background: #fffbeb;       /* amber-50 — very faint */
}
/* Where ×9-line cells are also premium, keep the premium border but still
   show the line tint as background. */
body.theme-capture .amath-cell.on-x9-line.premium-3E,
body.theme-capture .amath-cell.on-x9-line.premium-2E,
body.theme-capture .amath-cell.on-x9-line.premium-3T,
body.theme-capture .amath-cell.on-x9-line.premium-2T {
  background: #fffbeb;
}

/* In capture theme: hide the in-cell "3X"/"2X" text labels and center star.
   The premium info is conveyed by border style instead. */
body.theme-capture .amath-cell .premium-label {
  display: none;
}
body.theme-capture .amath-cell.center-cell .center-star {
  display: none;
}
body.theme-capture .amath-cell .coord-label {
  display: block;
}
/* When a tile is placed, keep the coord label visible but smaller and in a
   different corner so it doesn't clash with the tile. */
body.theme-capture .amath-cell:has(.amath-tile) .coord-label {
  display: block;
  font-size: clamp(6px, calc(var(--cell-size) * 0.16), 8px);
  color: #94a3b8;            /* lighter so it doesn't compete with the tile */
  top: 1px;
  left: 2px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 1px;
  border-radius: 2px;
  z-index: 3;                /* above the tile */
}
/* In capture theme: hide the tiny point-value subscript ONLY for tiles on
   the BOARD. Rack tiles keep their point-value subscripts. */
body.theme-capture .amath-board .amath-tile .tile-points {
  display: none;
}

.settings-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Small inline badges next to settings labels to tell users whether changing
   a setting takes effect right away or requires starting a new game. */
.settings-badge-live,
.settings-badge-restart {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;     /* keep badge text on one line */
}
.settings-badge-live {
  background: #dcfce7;   /* green-100 */
  color: #166534;        /* green-800 */
}
.settings-badge-restart {
  background: #fef3c7;   /* amber-100 */
  color: #92400e;        /* amber-800 */
}

/* =============================================================================
   TRASH-TALK TOAST
   ============================================================================= */

.trash-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(17, 24, 39, 0.95);
  color: #fef3c7;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 3000;
  max-width: 90%;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  text-align: center;
}

.trash-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =============================================================================
   SCORE SHEET
   ============================================================================= */

.score-sheet-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above the game-end overlay (z-index 2000) so the score sheet can be
     viewed from the end-of-game flow without being hidden behind it. */
  z-index: 2100;
  padding: 20px;
}

.score-sheet-dialog {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}

.score-sheet-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.score-sheet-totals {
  display: flex;
  justify-content: space-around;
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

/* totals background now uses var(--bg-page) — adapts to all themes */

.score-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.score-sheet-table th {
  text-align: left;
  padding: 8px;
  background: var(--bg-page);
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--border-medium);
}

/* th background now uses var(--bg-page) — adapts to all themes */

.score-sheet-table td {
  padding: 8px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

/* Feature O: 3-column score sheet (AI | # | Player) */
.score-sheet-3col th,
.score-sheet-3col td {
  text-align: center;
}

.score-sheet-3col .col-turn {
  width: 50px;
  color: var(--text-secondary);
  font-weight: 600;
  background: var(--bg-elevated, rgba(0,0,0,0.03));
}

.score-sheet-3col .col-ai,
.score-sheet-3col .col-player {
  width: calc((100% - 50px) / 2);
}

.amath-tile[draggable="true"] {
  cursor: grab;
}

.amath-tile[draggable="true"]:active {
  cursor: grabbing;
}

.amath-tile.tile-dragging {
  opacity: 0.4;
}

.amath-rack-slot.drop-target {
  background: #dbeafe;
  border-color: #3b82f6;
  border-style: solid;
}

.amath-rack-slot .amath-tile {
  cursor: pointer;
}

.amath-cell {
  cursor: pointer;
}

.amath-cell:hover {
  filter: brightness(0.95);
}

/* =============================================================================
   PHASE 5: PICKER POPUP
   ============================================================================= */

.picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.picker-dialog {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.picker-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
  color: var(--text-primary);
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.picker-option {
  padding: 14px 8px;
  background: var(--tile-bg);
  border: 1.5px solid var(--tile-border);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--tile-text);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s;
}

.picker-option:hover {
  transform: scale(1.05);
  border-color: var(--btn-primary-bg);
}

.picker-option:active {
  transform: scale(0.95);
}

.picker-cancel {
  width: 100%;
  padding: 10px;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.picker-cancel:hover {
  background: var(--btn-secondary-hover);
}

/* =============================================================================
   TILE BACK (opponent rack — face-down)
   ============================================================================= */

.amath-tile.tile-back {
  background: var(--tile-back-bg);
  border-color: var(--tile-back-bg);
  background-image: repeating-linear-gradient(
    45deg,
    var(--tile-back-bg),
    var(--tile-back-bg) 4px,
    var(--tile-back-pattern) 4px,
    var(--tile-back-pattern) 8px
  );
}

/* =============================================================================
   RACK
   ============================================================================= */

.amath-rack {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  flex-grow: 1;
  justify-content: center;
  min-height: calc(var(--rack-tile-size) + 12px);
}

.amath-rack-slot {
  width: var(--rack-tile-size);
  height: var(--rack-tile-size);
  background: #fafafa;
  border: 1px dashed var(--border-medium);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amath-rack-slot .amath-tile {
  width: calc(var(--rack-tile-size) - 4px);
  height: calc(var(--rack-tile-size) - 4px);
}

.amath-rack-slot .amath-tile .tile-face {
  font-size: 20px;
}

.amath-rack-slot .amath-tile .tile-points {
  font-size: 10px;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.button-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* Full-width zero-height flex item: forces the buttons after it (Bot, New Game,
   icons) onto a new row, so the Bot button stays first on the second row
   regardless of whether the Verify button is present on the first row. */
.button-bar-break { flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; }

.btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-hover);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--btn-secondary-hover);
}

.btn:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
}

/* =============================================================================
   STATUS / DEBUG (from Phase 1-3)
   ============================================================================= */

#status {
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #f5f5f5;
  margin-bottom: 12px;
  text-align: center;
}

#debug-output {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 14px;
  margin-top: 16px;
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 12px;
  display: none;
}

#debug-output.show {
  display: block;
}

#debug-toggle {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 1px solid var(--border-light);
  padding: 4px 8px;
  border-radius: 4px;
}

/* =============================================================================
   RESPONSIVE — TABLET
   ============================================================================= */

@media (max-width: 699px) {
  :root {
    --cell-size: 32px;
    --tile-size: 30px;
    --rack-tile-size: 44px;
  }

  .tile-face {
    font-size: 14px;
  }

  .amath-rack-slot .amath-tile .tile-face {
    font-size: 18px;
  }
}

/* The mobile bottom timer bar is hidden on desktop (mobile media query
   re-shows it). Declared BEFORE the @media block so it's overridable. */
.timer-bar {
  display: none;
}

/* Show timer bar on tablet (no desktop side panel) */
@media (min-width: 700px) and (max-width: 1299px) {
  .timer-bar {
    display: flex;
  }
}
/* In PORTRAIT tablet the bottom timer-bar mirror is shown, so hide the inline
   timers next to each rack — otherwise BOTH render and the timers look
   duplicated (once in the rack rows, once in the bottom bar). Must be
   portrait-only: the landscape tablet layout (further below) HIDES the bar and
   relies on these inline timers riding inside each player's column, so hiding
   them there would leave no timer at all. Previously inline timers were only
   hidden ≤600px, so the whole 700–1299px portrait range showed duplicates. */
@media (min-width: 700px) and (max-width: 1299px) and (orientation: portrait) {
  .opponent-area .opponent-timer,
  .player-area .player-timer {
    display: none;
  }
}

/* Inline tile tracker panel (visible on mobile under the action buttons).
   Hidden on desktop because the right side panel already shows the tracker
   live — having both would be duplicative. The mobile media query later
   re-shows it via `display: block`. */
#tile-tracker-panel {
  display: none;
}

/* Show tile tracker on tablet (no side panel) */
@media (min-width: 700px) and (max-width: 1299px) {
  #tile-tracker-panel {
    display: block;
    margin-top: 8px;
    padding-bottom: 80px;
  }
}

/* =============================================================================
   RESPONSIVE — MOBILE PORTRAIT
   Use viewport-relative units so board fills available screen width.
   Formula: 15 cells + 14 gaps + 4px padding should equal viewport width minus body padding.
   With body padding 6px each side (12px total) and 1px gap × 14 = 14px:
   cell-size = (100vw - 12px body - 4px padding - 14px gaps) / 15
   ≈ (100vw - 30px) / 15
   ============================================================================= */

@media (max-width: 600px) {
  body {
    padding: 0;
    overflow-x: hidden;        /* rack's negative margins may push past edge — clip, don't scroll */
  }

  /* Tighter app container on mobile — squeeze every pixel for board */
  #app {
    padding: 0;
    margin: 0;
  }

  h1 {
    font-size: 20px;
    margin: 0 0 6px;
  }

  :root {
    /* Cell sizing budget (15 cells fit in viewport width):
     *   100vw  (no body padding)
     *   - 4px board outer padding (2px × 2)
     *   - 14px gaps (1px × 14 between 15 cells)
     *   = (100vw - 18px) / 15 per cell
     */
    --cell-size: calc((100vw - 18px) / 15);
    --tile-size: calc((100vw - 18px) / 15 - 2px);
    --rack-tile-size: 36px;
  }

  /* Capture theme adds a 16th column (left ruler) + top ruler row + wrapper
     padding. To keep the board flush with screen edges, shrink cell-size to
     fit those extras: 16 cells, 15 gaps, plus ~8px wrapper padding+border. */
  body.theme-capture {
    --cell-size: calc((100vw - 24px) / 16);
    --tile-size: calc((100vw - 24px) / 16 - 2px);
  }

  .tile-face { font-size: calc((100vw - 18px) / 15 * 0.5); }
  .amath-cell .premium-label { font-size: calc((100vw - 18px) / 15 * 0.32); }
  .amath-cell.center-cell .center-star { font-size: calc((100vw - 18px) / 15 * 0.65); }
  .tile-points { font-size: calc((100vw - 18px) / 15 * 0.32); }

  .amath-rack-slot .amath-tile .tile-face {
    font-size: 14px;
  }

  .score-box,
  .timer-box {
    min-width: 60px;
    padding: 4px 8px;
  }
  .score-value { font-size: 16px; }
  .timer-value { font-size: 13px; }
  .btn { padding: 8px 14px; font-size: 13px; }

  /* Override main-area max-width so board can fill */
  .main-area, .board-area, .amath-board-wrapper {
    max-width: 100%;
  }
  #status { margin: 4px 0; }
  .amath-app { gap: 6px; }

  /* ── MOBILE LAYOUT REWORK ──
     Hide the inline timer-boxes that sit next to the racks. They steal
     horizontal space the board needs. The same timers are mirrored at
     the bottom in the .timer-bar element (which JS keeps in sync). */
  .opponent-area .opponent-timer,
  .player-area .player-timer {
    display: none;
  }
  .opponent-area,
  .player-area {
    gap: 6px;
    overflow: visible;         /* let rack tiles visually extend past the border */
    padding-left: 0;
    padding-right: 0;
  }

  /* Rack extends past the player/opponent border box.
     Negative margins pull it outward; the overflow:visible above
     lets the tiles render past the green/blue highlight border. */
  .opponent-area .amath-rack,
  .player-area .amath-rack {
    margin-left: -6px;
    margin-right: -6px;
  }

  /* The bottom timer bar is visible only on mobile */
  .timer-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: space-around;
  }
  .timer-bar .timer-bar-slot {
    flex: 1 1 50%;
    text-align: center;
  }

  /* Show the inline tile tracker on mobile (it's hidden on desktop where the
     side panel already displays it). Keep it compact. */
  #tile-tracker-panel {
    display: block;
    margin-top: 8px;
    padding-bottom: 80px; /* prevent fixed bottom buttons (Copy Log, Copy State) from overlapping last row */
  }
}

/* =============================================================================
   VERY SMALL PHONES — keep dynamic sizing but with even less padding
   ============================================================================= */

@media (max-width: 380px) {
  :root {
    /* Even tighter: 0px body + 4px board padding + 14px gaps = 18px — same as
       the 600px breakpoint since body padding is already 0 there. Shrink
       rack tiles to fit more comfortably. */
    --cell-size: calc((100vw - 18px) / 15);
    --tile-size: calc((100vw - 18px) / 15 - 2px);
    --rack-tile-size: 32px;
  }

  .tile-face {
    font-size: calc((100vw - 18px) / 15 * 0.5);
  }

  .amath-rack-slot .amath-tile .tile-face {
    font-size: 13px;
  }
}

/* =============================================================================
   🌊 OCEAN THEME — cool blues, sea-foam greens
   ============================================================================= */
body.theme-ocean {
  --bg-page: #0c4a6e;
  --bg-card: #164e63;
  --text-primary: #e0f2fe;
  --text-secondary: #7dd3fc;
  --border-light: #155e75;
  --border-medium: #0e7490;
  --cell-plain: #0e4d5c;
  --cell-border: #155e75;
  --cell-3E: #be123c;
  --cell-2E: #7dd3fc;
  --cell-2E-text: #0c4a6e;
  --cell-3T: #0284c7;
  --cell-2T: #06b6d4;
  --tile-bg: #ecfdf5;
  --tile-border: #059669;
  --tile-text: #064e3b;
  --tile-points: #6b7280;
  --score-bg: #164e63;
  --score-border: #0e7490;
  --timer-normal: #e0f2fe;
  --btn-primary-bg: #0891b2;
  --btn-primary-hover: #06b6d4;
  --btn-secondary-bg: #155e75;
  --btn-secondary-text: #e0f2fe;
  --btn-secondary-hover: #0e7490;
  --btn-disabled-bg: #0c4a6e;
  --btn-disabled-text: #0e7490;
}

/* =============================================================================
   🌲 FOREST THEME — deep greens, earthy browns, warm accents
   ============================================================================= */
body.theme-forest {
  --bg-page: #14532d;
  --bg-card: #1a3a2a;
  --text-primary: #ecfdf5;
  --text-secondary: #86efac;
  --border-light: #166534;
  --border-medium: #15803d;
  --cell-plain: #1a3a2a;
  --cell-border: #166534;
  --cell-3E: #dc2626;
  --cell-2E: #86efac;
  --cell-2E-text: #14532d;
  --cell-3T: #15803d;
  --cell-2T: #a16207;
  --tile-bg: #fef3c7;
  --tile-border: #92400e;
  --tile-text: #1c1917;
  --tile-points: #78716c;
  --score-bg: #1a3a2a;
  --score-border: #15803d;
  --timer-normal: #ecfdf5;
  --btn-primary-bg: #16a34a;
  --btn-primary-hover: #22c55e;
  --btn-secondary-bg: #166534;
  --btn-secondary-text: #ecfdf5;
  --btn-secondary-hover: #15803d;
  --btn-disabled-bg: #14532d;
  --btn-disabled-text: #166534;
}

/* =============================================================================
   🌅 SUNSET THEME — warm oranges, pinks, golden glow
   ============================================================================= */
body.theme-sunset {
  --bg-page: #fef2e8;
  --bg-card: #fffbf5;
  --text-primary: #7c2d12;
  --text-secondary: #c2410c;
  --border-light: #fed7aa;
  --border-medium: #fdba74;
  --cell-plain: #fff7ed;
  --cell-border: #fdba74;
  --cell-3E: #be123c;
  --cell-2E: #f472b6;
  --cell-2E-text: #831843;
  --cell-3T: #c2410c;
  --cell-2T: #ea580c;
  --tile-bg: #fffbeb;
  --tile-border: #d97706;
  --tile-text: #7c2d12;
  --tile-points: #9a3412;
  --btn-primary-bg: #ea580c;
  --btn-primary-hover: #f97316;
}

/* =============================================================================
   💜 NEON THEME — dark background, vibrant neon accents
   ============================================================================= */
body.theme-neon {
  --bg-page: #0a0a1a;
  --bg-card: #111133;
  --text-primary: #e0e7ff;
  --text-secondary: #a5b4fc;
  --border-light: #1e1b4b;
  --border-medium: #3730a3;
  --cell-plain: #0f0f2e;
  --cell-border: #2e1065;
  --cell-3E: #f43f5e;
  --cell-2E: #c084fc;
  --cell-2E-text: #0a0a1a;
  --cell-3T: #6366f1;
  --cell-2T: #f59e0b;
  --tile-bg: #1e1b4b;
  --tile-border: #7c3aed;
  --tile-text: #e0e7ff;
  --tile-points: #a78bfa;
  --score-bg: #111133;
  --score-border: #3730a3;
  --timer-normal: #e0e7ff;
  --btn-primary-bg: #7c3aed;
  --btn-primary-hover: #8b5cf6;
  --btn-secondary-bg: #1e1b4b;
  --btn-secondary-text: #e0e7ff;
  --btn-secondary-hover: #2e1065;
  --btn-disabled-bg: #0a0a1a;
  --btn-disabled-text: #1e1b4b;
}

/* Dark-like overrides for ocean, forest, neon (dark background themes) */
body.theme-ocean .desktop-side-panel,
body.theme-forest .desktop-side-panel,
body.theme-neon .desktop-side-panel,
body.theme-volcano .desktop-side-panel {
  background: var(--bg-card);
  border-color: var(--border-medium);
}
body.theme-ocean .status-card,
body.theme-forest .status-card,
body.theme-neon .status-card,
body.theme-volcano .status-card {
  background: var(--bg-card);
  border-color: var(--border-medium);
}
body.theme-ocean .amath-tile.tile-ai-last-play,
body.theme-forest .amath-tile.tile-ai-last-play,
body.theme-neon .amath-tile.tile-ai-last-play {
  box-shadow: 0 0 8px 3px rgba(251, 191, 36, 0.7);
}
body.theme-ocean .score-box.timer-paused,
body.theme-forest .score-box.timer-paused,
body.theme-neon .score-box.timer-paused {
  border-color: #dc2626;
}

/* Blank tiles on board: force dark text on ALL dark themes */
body.theme-dark .amath-tile.tile-blank-on-board .tile-face,
body.theme-dark .amath-tile.tile-blank-on-board .tile-points,
body.theme-ocean .amath-tile.tile-blank-on-board .tile-face,
body.theme-ocean .amath-tile.tile-blank-on-board .tile-points,
body.theme-forest .amath-tile.tile-blank-on-board .tile-face,
body.theme-forest .amath-tile.tile-blank-on-board .tile-points,
body.theme-neon .amath-tile.tile-blank-on-board .tile-face,
body.theme-neon .amath-tile.tile-blank-on-board .tile-points,
body.theme-volcano .amath-tile.tile-blank-on-board .tile-face,
body.theme-volcano .amath-tile.tile-blank-on-board .tile-points,
body.theme-minimal .amath-tile.tile-blank-on-board .tile-face,
body.theme-minimal .amath-tile.tile-blank-on-board .tile-points,
body.theme-minimaldark .amath-tile.tile-blank-on-board .tile-face,
body.theme-minimaldark .amath-tile.tile-blank-on-board .tile-points {
  color: #1e293b !important;
}
body.theme-ocean .amath-tile.tile-blank-on-board,
body.theme-forest .amath-tile.tile-blank-on-board,
body.theme-neon .amath-tile.tile-blank-on-board,
body.theme-volcano .amath-tile.tile-blank-on-board {
  background: #fef3c7;
  border-color: #f97316;
}

/* Tentative (pre-submit) tiles: force dark text on ALL dark themes */
body.theme-dark .amath-tile.tile-tentative .tile-face,
body.theme-dark .amath-tile.tile-tentative .tile-points,
body.theme-ocean .amath-tile.tile-tentative .tile-face,
body.theme-ocean .amath-tile.tile-tentative .tile-points,
body.theme-forest .amath-tile.tile-tentative .tile-face,
body.theme-forest .amath-tile.tile-tentative .tile-points,
body.theme-neon .amath-tile.tile-tentative .tile-face,
body.theme-neon .amath-tile.tile-tentative .tile-points,
body.theme-volcano .amath-tile.tile-tentative .tile-face,
body.theme-volcano .amath-tile.tile-tentative .tile-points {
  color: #1e293b !important;
}

/* Auto (takeover) button active state */
.btn.btn-active {
  background: #dc2626 !important;
  color: white !important;
  border-color: #b91c1c !important;
}

/* =============================================================================
   🌸 CHERRY BLOSSOM THEME — soft pinks, Japanese aesthetic
   ============================================================================= */
body.theme-sakura {
  --bg-page: #fdf2f8;
  --bg-card: #fff1f2;
  --text-primary: #831843;
  --text-secondary: #be185d;
  --border-light: #fce7f3;
  --border-medium: #f9a8d4;
  --cell-plain: #fff1f2;
  --cell-border: #fda4af;
  --cell-3E: #e11d48;
  --cell-2E: #f9a8d4;
  --cell-2E-text: #831843;
  --cell-3T: #be185d;
  --cell-2T: #f472b6;
  --tile-bg: #ffe4e6;
  --tile-border: #fb7185;
  --tile-text: #881337;
  --tile-points: #9f1239;
  --btn-primary-bg: #e11d48;
  --btn-primary-hover: #f43f5e;
}

/* =============================================================================
   🔥 VOLCANO THEME — dark ember, molten lava accents
   ============================================================================= */
body.theme-volcano {
  --bg-page: #1a0a0a;
  --bg-card: #2d1010;
  --text-primary: #fef2f2;
  --text-secondary: #fca5a5;
  --border-light: #450a0a;
  --border-medium: #7f1d1d;
  --cell-plain: #1c0f0f;
  --cell-border: #450a0a;
  --cell-3E: #ef4444;
  --cell-2E: #f97316;
  --cell-2E-text: #1a0a0a;
  --cell-3T: #b91c1c;
  --cell-2T: #ea580c;
  --tile-bg: #fef3c7;
  --tile-border: #d97706;
  --tile-text: #1c1917;
  --tile-points: #78716c;
  --score-bg: #2d1010;
  --score-border: #7f1d1d;
  --timer-normal: #fef2f2;
  --btn-primary-bg: #dc2626;
  --btn-primary-hover: #ef4444;
  --btn-secondary-bg: #450a0a;
  --btn-secondary-text: #fef2f2;
  --btn-secondary-hover: #7f1d1d;
  --btn-disabled-bg: #1a0a0a;
  --btn-disabled-text: #450a0a;
}

/* =============================================================================
   ❄️ ARCTIC THEME — clean ice blue, crisp whites
   ============================================================================= */
body.theme-arctic {
  --bg-page: #f0f9ff;
  --bg-card: #f8fafc;
  --text-primary: #0c4a6e;
  --text-secondary: #0369a1;
  --border-light: #bae6fd;
  --border-medium: #7dd3fc;
  --cell-plain: #f0f9ff;
  --cell-border: #bae6fd;
  --cell-3E: #dc2626;
  --cell-2E: #38bdf8;
  --cell-2E-text: #0c4a6e;
  --cell-3T: #0284c7;
  --cell-2T: #0ea5e9;
  --tile-bg: #e0f2fe;
  --tile-border: #0284c7;
  --tile-text: #0c4a6e;
  --tile-points: #0369a1;
  --btn-primary-bg: #0284c7;
  --btn-primary-hover: #0ea5e9;
}

/* Minimal Light — clean white canvas, dark tiles, clear premium squares. */
body.theme-minimal {
  --bg-page: #fafafa;
  --bg-card: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --cell-plain: #ffffff;
  --cell-border: #e5e7eb;
  /* lighter pastel premium squares (still distinct, much softer) */
  --cell-3E: #fecaca;
  --cell-3E-text: #b91c1c;
  --cell-2E: #fde68a;
  --cell-2E-text: #92400e;
  --cell-3T: #bfdbfe;
  --cell-3T-text: #1d4ed8;
  --cell-2T: #fed7aa;
  --cell-2T-text: #9a3412;
  --tile-bg: #1f2937;
  --tile-border: #111827;
  --tile-text: #ffffff;
  --tile-points: #9ca3af;
  --btn-primary-bg: #1f2937;
  --btn-primary-hover: #374151;
}

/* Minimal Dark — dark canvas, light tiles, clear premium squares. */
body.theme-minimaldark {
  --bg-page: #0b0f17;
  --bg-card: #141a24;
  --text-primary: #e5e7eb;
  --text-secondary: #94a3b8;
  --border-light: #1f2937;
  --border-medium: #2a3645;
  --score-bg: #1e293b;
  --score-border: #334155;
  --timer-normal: #e5e7eb;
  --timer-negative: #f87171;
  --btn-secondary-bg: #2a3645;
  --btn-secondary-text: #e5e7eb;
  --btn-secondary-hover: #334155;
  --btn-disabled-bg: #1a2230;
  --btn-disabled-text: #4b5563;
  --center-star: #fbbf24;
  --tile-back-bg: #2a3645;
  --tile-back-pattern: #334155;
  --cell-plain: #141a24;
  --cell-border: #232c3a;
  /* lighter, soft premium squares that read clearly on the dark canvas */
  --cell-3E: #c97b82;
  --cell-3E-text: #2a0e10;
  --cell-2E: #d4b483;
  --cell-2E-text: #2e2208;
  --cell-3T: #93b1d6;
  --cell-3T-text: #0c1a2e;
  --cell-2T: #d4a07a;
  --cell-2T-text: #2e1808;
  --tile-bg: #e5e7eb;
  --tile-border: #cbd5e1;
  --tile-text: #0b0f17;
  --tile-points: #64748b;
  --btn-primary-bg: #334155;
  --btn-primary-hover: #475569;
}

/* Slate — cool gray neutral, modern look. */
body.theme-slate {
  --bg-page: #1a1d23;
  --bg-card: #24282f;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --border-light: #2d323b;
  --border-medium: #3a414c;
  --cell-plain: #24282f;
  --cell-border: #2d323b;
  --cell-3E: #f43f5e;
  --cell-3E-text: #ffffff;
  --cell-2E: #eab308;
  --cell-3T: #6366f1;
  --cell-2T: #f59e0b;
  --tile-bg: #475569;
  --tile-border: #334155;
  --tile-text: #f8fafc;
  --tile-points: #cbd5e1;
  --btn-primary-bg: #6366f1;
  --btn-primary-hover: #818cf8;
}

/* =============================================================================
   LANDSCAPE — iPad / small notebook (700–1299px, wide-but-short)
   ---------------------------------------------------------------------------
   In this range the default single-column stack squeezes the board: its size
   is driven by the HEIGHT budget ((100vh-280)/15) while the wide screen sits
   half-empty. Here we flip .amath-app into a 2-column grid — board on the
   LEFT taking the full height, all controls stacked in a narrow RIGHT column —
   and recompute the cell size so the board fills the available height.
   Portrait iPad keeps the default stacked layout (this only matches landscape).
   ============================================================================= */
@media (min-width: 700px) and (max-width: 1299px) and (orientation: landscape) {
  :root {
    /* Board now owns the full height; width is rarely the limiter. Take the
       smaller of the height budget and the (1fr) width budget. ~400px reserved
       for the right control column + gap + page padding. */
    --cell-size: min( calc((100vh - 100px) / 15), calc((100vw - 400px) / 15), 50px );
    --tile-size: calc(var(--cell-size) - 2px);
    --rack-tile-size: 38px;
  }
  /* Capture theme draws a 16th ruler column + top ruler row → divide by 16. */
  body.theme-capture {
    --cell-size: min( calc((100vh - 112px) / 16), calc((100vw - 400px) / 16), 48px );
    --tile-size: calc(var(--cell-size) - 2px);
  }

  #app { max-width: 100vw; padding: 0 8px; }

  .amath-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(352px, 34vw, 420px);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "board opp"
      "board player"
      "board buttons"
      "board tracker"
      "board aivai";
    gap: 6px 14px;
    align-items: start;
  }

  .board-area          { grid-area: board; align-self: center; justify-self: center; }
  .opponent-area       { grid-area: opp; }
  .player-area         { grid-area: player; }
  .button-bar          { grid-area: buttons; }
  #tile-tracker-panel  { grid-area: tracker; display: block; margin: 4px 0 0; max-height: 30vh; overflow-y: auto; }
  .aivai-bar           { grid-area: aivai; }

  /* Narrow right column: stack score/timer ABOVE the rack instead of one
     wide row (a wide score+rack+timer row won't fit ~360px). */
  .opponent-area,
  .player-area {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }

  /* The mobile bottom timer bar is redundant here — inline timers ride along
     inside each player's column. */
  .timer-bar { display: none; }

  /* Action buttons wrap to fit the narrow column. */
  .button-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}