/* assets/games/crossword.css — v1.3
 * ============================================================================
 * Reusable crossword framework styles. Themed via CSS variables (set per
 * state in assets/games/state-themes.css through a body.state-{slug} class).
 *
 * Zero coupling to sim chrome / sim-shared.css. Lives on the standalone
 * /games/{state}-crossword pages. Mobile-first; works at 375px.
 *
 * Author: Earn-Points framework v1 (PR feat/earn-points-crossword-v1).
 * ==========================================================================*/

:root {
  --xword-primary: #1f2937;
  --xword-accent: #2563eb;
  --xword-bg-tint: #f9fafb;
  --xword-border: #e5e7eb;
  --xword-text: #111827;
  --xword-cell-correct: #16a34a;
  --xword-cell-wrong: #dc2626;
  --xword-cell-revealed: #d97706;
  --xword-cell-active: #fde68a;
  --xword-cell-in-word: #fff7e0;
}

body.xword-page {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--xword-bg-tint);
  color: var(--xword-text);
  min-height: 100vh;
}

.xword-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
}

.xword-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--xword-border);
}

.xword-topbar h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--xword-primary);
}

.xword-topbar .xword-back {
  font-size: 0.9rem;
  color: var(--xword-primary);
  text-decoration: none;
  font-weight: 600;
}
.xword-topbar .xword-back:hover { text-decoration: underline; }

.xword-statbar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.xword-stat {
  background: #fff;
  border: 1px solid var(--xword-border);
  padding: 6px 12px;
  border-radius: 9999px;
  font-weight: 600;
  color: var(--xword-text);
}
.xword-stat .xword-stat-label {
  color: #6b7280;
  font-size: 0.78rem;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xword-stat-score { border-color: var(--xword-primary); }
.xword-stat-streak.active {
  background: var(--xword-primary);
  color: #fff;
  border-color: var(--xword-primary);
}

.xword-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 900px) {
  .xword-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.xword-board-wrap {
  background: #fff;
  border: 2px solid var(--xword-border);
  border-radius: 8px;
  padding: 8px;
  overflow-x: auto;
}

.xword-active-clue {
  display: none;
  background: var(--xword-primary);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.92rem;
  line-height: 1.35;
}
.xword-active-clue.visible { display: block; }
.xword-active-clue .which {
  display: inline-block;
  background: var(--xword-accent);
  color: #fff;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-right: 6px;
}

table.xword-grid {
  border-collapse: collapse;
  margin: 0 auto;
  table-layout: fixed;
}
table.xword-grid td {
  width: 30px;
  height: 30px;
  border: 1px solid #cbd5e1;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  font-size: 1.05rem;
  position: relative;
  background: #fff;
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  color: var(--xword-text);
}
@media (max-width: 500px) {
  table.xword-grid td {
    width: 22px;
    height: 22px;
    font-size: 0.78rem;
  }
}
table.xword-grid td.block {
  background: #1f2937;
  border-color: #1f2937;
  cursor: default;
}
table.xword-grid td.in-word {
  background: var(--xword-cell-in-word);
}
table.xword-grid td.active {
  background: var(--xword-cell-active);
  outline: 2px solid var(--xword-primary);
  outline-offset: -2px;
}
table.xword-grid td.correct {
  background: var(--xword-cell-correct);
  color: #fff;
}
table.xword-grid td.wrong {
  background: var(--xword-cell-wrong);
  color: #fff;
}
table.xword-grid td.revealed {
  color: var(--xword-cell-revealed);
}
table.xword-grid td .xword-num {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 0.55rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1;
}
table.xword-grid td.correct .xword-num,
table.xword-grid td.wrong .xword-num {
  color: rgba(255, 255, 255, 0.8);
}
table.xword-grid td .xword-letter {
  display: inline-block;
  line-height: 1;
}

/* Hidden input — collects mobile keyboard. */
.xword-key-capture {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.xword-clues {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .xword-clues { grid-template-columns: 1fr 1fr; }
}
.xword-clue-section {
  background: #fff;
  border: 1px solid var(--xword-border);
  border-radius: 6px;
  padding: 10px 12px;
}
.xword-clue-section h2 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--xword-primary);
  border-bottom: 1px solid var(--xword-border);
  padding-bottom: 4px;
}
.xword-clue-section ol {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Mobile (single-column layout): no cap — clue list grows naturally and
     the page scrolls. */
  max-height: none;
  overflow-y: visible;
  font-size: 0.86rem;
}
@media (min-width: 900px) {
  /* Desktop (2-column layout, grid + clues side-by-side): fill viewport
     less the topbar + statbar + active-clue + padding chrome (~220px).
     Was capped at 260px which only showed ~4 entries — Matthew flagged
     2026-06-09. */
  .xword-clue-section ol {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
  }
}
.xword-clue-section li {
  padding: 4px 6px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px;
  cursor: pointer;
  line-height: 1.35;
}
.xword-clue-section li:hover,
.xword-clue-section li:focus {
  background: var(--xword-cell-in-word);
}
.xword-clue-section li.active {
  background: var(--xword-cell-active);
  font-weight: 600;
}
.xword-clue-section li.solved {
  text-decoration: line-through;
  color: #9ca3af;
}
.xword-clue-section li .xword-clue-num {
  font-weight: 700;
  color: var(--xword-primary);
}

.xword-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.xword-toolbar button {
  background: #fff;
  border: 1.5px solid var(--xword-primary);
  color: var(--xword-primary);
  padding: 6px 14px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.xword-toolbar button:hover,
.xword-toolbar button:focus {
  background: var(--xword-primary);
  color: #fff;
  outline: 2px solid var(--xword-accent);
  outline-offset: 2px;
}
.xword-toolbar button.xword-btn-danger {
  border-color: #b91c1c;
  color: #b91c1c;
}
.xword-toolbar button.xword-btn-danger:hover,
.xword-toolbar button.xword-btn-danger:focus {
  background: #b91c1c;
  color: #fff;
}

/* Completion overlay */
.xword-done-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.xword-done-overlay.visible { display: flex; }
.xword-done-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border-top: 6px solid var(--xword-primary);
}
.xword-done-card h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: var(--xword-primary);
}
.xword-done-card .xword-done-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.xword-done-stat {
  background: var(--xword-bg-tint);
  border: 1px solid var(--xword-border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 90px;
}
.xword-done-stat .xword-done-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--xword-primary);
}
.xword-done-stat .xword-done-lbl {
  font-size: 0.72rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Daily-rotation comeback nudge — Matthew 2026-06-09 */
.xword-done-comeback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--xword-bg-tint, #f9fafb);
  border: 1px dashed var(--xword-border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px 0 14px;
  font-size: 0.88rem;
  color: var(--xword-text, #111827);
}
.xword-done-comeback-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.xword-done-comeback-text { font-weight: 600; }
.xword-done-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.xword-done-actions button {
  background: var(--xword-primary);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.xword-done-actions button:hover,
.xword-done-actions button:focus {
  outline: 2px solid var(--xword-accent);
  outline-offset: 2px;
}
.xword-done-actions button.xword-secondary {
  background: #fff;
  color: var(--xword-primary);
  border: 1.5px solid var(--xword-primary);
}

/* Streak burst */
.xword-streak-flash {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--xword-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9999px;
  font-weight: 700;
  z-index: 9100;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.xword-streak-flash.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Score-change pulse */
.xword-score-pulse .xword-stat-score {
  animation: xword-pulse 0.45s ease-out;
}
@keyframes xword-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Print — rewrote 2026-06-09 (Matthew): grid was clipping + clue list
   truncated mid-print. Force a stable 1-column flow, set predictable grid
   size at 4.5in, mark page-break-avoid on the grid + clue sections, and
   force monochrome cell rendering so print-to-PDF keeps the structure. */
@media print {
  /* Hide interactive chrome that has no print value */
  .xword-topbar .xword-back,
  .xword-toolbar,
  .xword-active-clue,
  .xword-done-overlay,
  .xword-streak-flash,
  .xword-statbar,
  #earn-points-trigger,
  #req-popup-trigger { display: none !important; }

  /* Page setup */
  @page { margin: 0.5in; }
  body.xword-page { background: #fff; color: #000; }
  body.xword-page * { color: #000 !important; box-shadow: none !important; }

  /* Force single-column flow so the grid + Across + Down all land cleanly */
  .xword-layout {
    display: block !important;
    grid-template-columns: none !important;
  }
  .xword-board-wrap {
    overflow: visible !important;
    border-color: #000 !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 16px;
  }

  /* Predictable grid size — 4.5in (~108mm) fits 17x17 at ~7mm/cell on US Letter
     with 0.5in margins. Browsers were scaling the grid to viewport before. */
  table.xword-grid {
    width: 4.5in !important;
    max-width: 4.5in !important;
    margin: 0 auto;
    table-layout: fixed;
  }
  table.xword-grid td {
    border-color: #000 !important;
    background: #fff !important;
    width: auto !important;
    height: auto !important;
  }
  table.xword-grid td.block {
    background: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  table.xword-grid td .xword-num { color: #000 !important; }
  table.xword-grid td .xword-letter { display: none !important; } /* blank grid for paper-solve */

  /* Clue panel — force 2-column flow that breaks per-clue, not mid-clue */
  .xword-clues {
    display: block !important;
    grid-template-columns: none !important;
    column-count: 2;
    column-gap: 24px;
  }
  .xword-clue-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }
  .xword-clue-section h2 {
    font-size: 11pt !important;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
    margin: 4px 0 6px;
    break-after: avoid;
  }
  .xword-clue-section ol { padding-left: 1.6em; }
  .xword-clue-section li {
    break-inside: avoid;
    page-break-inside: avoid;
    font-size: 9.5pt;
    line-height: 1.35;
    margin-bottom: 4px;
  }
  /* Strip any solved/highlight states that confuse a print-out */
  .xword-clue-section li.active,
  .xword-clue-section li.solved {
    background: transparent !important;
    text-decoration: none !important;
  }
}

/* GC Prep brand watermark (Matthew 2026-06-10): small fixed corner tag so
 * screenshots and printouts of the board carry attribution. Fixed to the
 * viewport corner — outside the grid and every interactive control — with
 * pointer-events:none so it can never intercept input or break the widget.
 * In print it repeats bottom-right of each page (position:fixed), which is
 * intentional branding; the print color-force rule turns it black and the
 * low opacity keeps it unobtrusive either way. */
body.xword-page::after {
  content: "GC PREP · gcprep.app";
  position: fixed;
  right: 10px;
  bottom: 8px;
  font: 700 10px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.14em;
  color: var(--xword-primary);
  opacity: 0.35;
  pointer-events: none;
  z-index: 8000; /* below overlays (9000+) so it never covers dialogs */
}

/* WCAG 2.1 §2.3.3 — Animation from Interactions. Respect the user's
   OS-level prefers-reduced-motion setting (Windows: Reduce motion;
   macOS: Reduce motion; Android: Remove animations). Disables the
   xword-pulse cell-solve animation and any opacity/transform tweens.
   Crossword gameplay remains fully functional — only the visual
   choreography is suppressed. Authored 2026-06-16 alongside the
   matching-game animation review; closes the same gap on this game. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}