/* ── Game Styles — Mobile-First Responsive ─────────────────────────────────── */

/* ── Touch baseline: remove 300ms tap delay, prevent callout ─────────────────── */
button, .key, .ws-cell, .conn-tile, .cw-cell, .hangman-key, .trivia-opt {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Game header bar ──────────────────────────────────────────────────────────── */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.game-title  { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.game-date   { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.game-actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Toast notification ───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}
.toast.show { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   WORDLE
   ════════════════════════════════════════════════════════════════════ */
.wordle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 16px;
}

/* Board — fluid tile sizing, never overflows viewport */
.wordle-board {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wordle-row { display: flex; gap: 5px; }

.wordle-tile {
  --tile: clamp(42px, 13vw, 62px);
  width: var(--tile);
  height: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: 4px;
  text-transform: uppercase;
  transition: border-color 0.1s;
  user-select: none;
}
.wordle-tile.filled  { border-color: var(--muted); }
.wordle-tile.correct { background: #538d4e; border-color: #538d4e; color: #fff; }
.wordle-tile.present { background: #b59f3b; border-color: #b59f3b; color: #fff; }
.wordle-tile.absent  { background: #3a3a3c; border-color: #3a3a3c; color: #fff; }
.wordle-tile.pop     { animation: tile-pop   0.1s ease; }
.wordle-tile.shake   { animation: tile-shake 0.4s ease; }
.wordle-tile.bounce  { animation: tile-bounce 0.6s ease; }

@keyframes tile-pop   { 0%,100%{transform:scale(1)}  50%{transform:scale(1.12)} }
@keyframes tile-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes tile-bounce{ 0%,100%{transform:translateY(0)} 40%{transform:translateY(-20px)} 60%{transform:translateY(-10px)} }

/* Keyboard — fluid key sizing, always fits one row on screen */
.wordle-keyboard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: 0 4px;
}
.keyboard-row { display: flex; gap: 5px; justify-content: center; width: 100%; }

.key {
  /* Row 1 has 10 keys + 9 gaps of 5px. Total gap = 45px. Available = 100vw - 8px padding - 10px outer.
     Each key = (100vw - 63px) / 10, but capped at 43px */
  width: clamp(28px, calc((100vw - 63px) / 10), 43px);
  height: clamp(46px, 12vw, 58px);
  background: var(--bg3);
  border: none;
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 0;
}
.key.wide {
  width: clamp(40px, calc((100vw - 63px) / 10 * 1.5), 65px);
  font-size: clamp(9px, 2.4vw, 12px);
}
.key:active          { background: #5a5a5c; }
.key:focus-visible   { outline: 2px solid var(--accent); }
.key.correct         { background: #538d4e; color: #fff; }
.key.present         { background: #b59f3b; color: #fff; }
.key.absent          { background: #1a1a1c; color: #555; }

/* ════════════════════════════════════════════════════════════════════
   HANGMAN
   ════════════════════════════════════════════════════════════════════ */
.hangman-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.hangman-figure {
  width: clamp(120px, 40vw, 160px);
  height: clamp(150px, 50vw, 200px);
}

.hangman-word {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 8px;
}
.hangman-letter {
  width: clamp(28px, 8vw, 38px);
  height: clamp(36px, 10vw, 44px);
  border-bottom: 3px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
}
.hangman-letter.revealed { color: var(--accent); border-color: var(--accent); }

.hangman-hint     { font-size: 14px; color: var(--muted); font-style: italic; text-align: center; padding: 0 16px; }
.hangman-mistakes { font-family: var(--font-mono); font-size: 13px; color: var(--red); }

.hangman-used-letters {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  max-width: 400px;
}
.used-letter {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bg3);
  text-transform: uppercase;
  min-width: 32px;
  text-align: center;
}
.used-letter.miss { background: #3a3a3c; color: #555; }
.used-letter.hit  { background: #538d4e; color: #fff; }

/* Hangman keyboard — same fluid sizing as Wordle keyboard */
.hangman-keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 500px;
  padding: 0 8px;
}
.hangman-key {
  /* Minimum 44px tap target (ADA) */
  min-width: 44px;
  min-height: 44px;
  background: var(--bg3);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  padding: 0 10px;
}
.hangman-key:active        { background: #5a5a5c; }
.hangman-key:disabled      { cursor: default; }
.hangman-key.miss          { background: #3a3a3c; color: #444; }
.hangman-key.hit           { background: #538d4e; color: #fff; }
.hangman-key:focus-visible { outline: 2px solid var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   CONNECTIONS
   ════════════════════════════════════════════════════════════════════ */
.connections-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.connections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 560px;
}

.conn-tile {
  aspect-ratio: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  padding: 6px 4px;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
  min-height: 48px;
}
.conn-tile.selected { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.conn-tile.correct  { border: none; border-radius: 8px; color: #fff; }
.conn-tile[data-color="yellow"] { background: #b5a642; }
.conn-tile[data-color="green"]  { background: #538d4e; }
.conn-tile[data-color="blue"]   { background: #3b82f6; }
.conn-tile[data-color="purple"] { background: #8b5cf6; }

.conn-category {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}
.conn-category[data-color="yellow"] { background: #b5a642; }
.conn-category[data-color="green"]  { background: #538d4e; }
.conn-category[data-color="blue"]   { background: #3b82f6; }
.conn-category[data-color="purple"] { background: #8b5cf6; }

.conn-actions  { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-mistakes { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.conn-mistake-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); margin: 0 2px; }
.conn-mistake-dot.used { background: var(--red); }

/* ════════════════════════════════════════════════════════════════════
   WORD SEARCH — fluid grid, always fits in viewport
   ════════════════════════════════════════════════════════════════════ */
.word-search-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.ws-grid {
  display: grid;
  /* 12 cols + 11 gaps of 2px = 22px. Available width = min(100vw-32px, 420px).
     Cell = (available - 22) / 12  */
  --ws-size: clamp(22px, calc((min(100vw, 420px) - 32px - 22px) / 12), 36px);
  grid-template-columns: repeat(12, var(--ws-size));
  gap: 2px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.ws-cell {
  width: var(--ws-size, 28px);
  height: var(--ws-size, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(10px, calc(var(--ws-size, 28px) * 0.45), 15px);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  background: var(--bg3);
  transition: background 0.08s;
}
.ws-cell.selecting { background: var(--accent); color: var(--bg); }
.ws-cell.found     { background: #538d4e; color: #fff; }

#ws-timer { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

.ws-word-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; }
.ws-word {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 12px;
  background: var(--bg3);
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ws-word.found { background: #538d4e; color: #fff; text-decoration: line-through; }

/* ════════════════════════════════════════════════════════════════════
   CROSSWORD — fluid 7x7 grid
   ════════════════════════════════════════════════════════════════════ */
.crossword-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* On mobile, stack grid above clues */
.crossword-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}

#cw-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--cw-size));
  grid-template-rows:    repeat(7, var(--cw-size));
  gap: 2px;
  /* Cell = (min(100vw, 480px) - 32px - 12px) / 7 */
  --cw-size: clamp(36px, calc((min(100vw, 480px) - 44px) / 7), 56px);
}

.cw-cell {
  width: var(--cw-size);
  height: var(--cw-size);
  background: var(--bg3);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.1s;
}
.cw-cell.black  { background: var(--bg); border-color: var(--bg); cursor: default; }
.cw-cell.active { background: var(--accent) !important; }
.cw-cell.highlight { background: rgba(245,200,66,0.18); }
.cw-cell.correct   { background: rgba(83,141,78,0.25); }
.cw-cell.revealed  { background: rgba(248,113,113,0.2); }

.cw-num {
  position: absolute;
  top: 2px; left: 2px;
  font-size: clamp(7px, 1.5vw, 10px);
  font-family: var(--font-mono);
  color: var(--muted);
  line-height: 1;
  pointer-events: none;
}

.cw-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(14px, calc(var(--cw-size) * 0.45), 22px);
  color: var(--text);
  text-transform: uppercase;
  cursor: pointer;
  caret-color: transparent;
  /* Prevent iOS zoom — must be 16px+ or use fontSize trick */
  font-size: 16px;
  padding-top: clamp(6px, calc(var(--cw-size) * 0.15), 12px);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.cw-input:focus { outline: none; }

.cw-clues {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.cw-clue-col { flex: 1; min-width: 120px; }
.cw-clue-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; font-family: var(--font-mono); }

.cw-clue {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  transition: background 0.12s;
  line-height: 1.4;
}
.cw-clue:hover, .cw-clue.active { background: var(--bg3); }
.cw-clue-num { font-family: var(--font-mono); color: var(--accent); font-weight: 700; min-width: 20px; }

/* ════════════════════════════════════════════════════════════════════
   TRIVIA
   ════════════════════════════════════════════════════════════════════ */
.trivia-wrap { display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto; }

.trivia-progress { display: flex; gap: 4px; }
.trivia-pip { flex: 1; height: 4px; border-radius: 2px; background: var(--bg3); transition: background 0.3s; }
.trivia-pip.done    { background: var(--green); }
.trivia-pip.current { background: var(--accent); }
.trivia-pip.wrong   { background: var(--red); }

.trivia-q { font-size: clamp(16px, 4.5vw, 20px); font-weight: 700; line-height: 1.4; }

.trivia-options { display: flex; flex-direction: column; gap: 10px; }
.trivia-opt {
  padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 20px);
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: clamp(14px, 3.5vw, 15px);
  transition: all 0.15s;
  text-align: left;
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 52px;           /* comfortable tap target */
  display: flex;
  align-items: center;
}
.trivia-opt:active:not(:disabled)  { border-color: var(--accent); background: rgba(245,200,66,0.08); }
.trivia-opt:focus-visible { outline: 2px solid var(--accent); }
.trivia-opt.correct  { background: rgba(74,222,128,0.15); border-color: var(--green); }
.trivia-opt.wrong    { background: rgba(248,113,113,0.15); border-color: var(--red); }
.trivia-opt:disabled { cursor: default; }

.trivia-meta  { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.trivia-score { font-family: var(--font-mono); text-align: center; }

/* ════════════════════════════════════════════════════════════════════
   RESULT MODAL
   ════════════════════════════════════════════════════════════════════ */
.result-emoji { font-size: 48px; text-align: center; margin-bottom: 12px; }
.result-title { font-size: clamp(20px, 5vw, 24px); font-weight: 800; text-align: center; margin-bottom: 8px; }
.result-word  { font-family: var(--font-mono); font-size: 18px; color: var(--accent); text-align: center; margin-bottom: 16px; }
.result-time  { font-family: var(--font-mono); font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 16px; }

.share-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  touch-action: manipulation;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   STREAK BAR
   ════════════════════════════════════════════════════════════════════ */
.streak-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.streak-bar strong { color: var(--accent); font-size: 16px; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Crossword: stack grid on top, clues below */
  .crossword-layout {
    grid-template-columns: 1fr;
  }
  .cw-clues { gap: 16px; }
}

@media (max-width: 400px) {
  /* Very small phones (SE, Moto G) */
  .connections-grid { gap: 5px; }
  .conn-tile { font-size: 10px; min-height: 44px; }
  .game-header { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 640px) {
  /* Tablet+ restore fixed sizes */
  .wordle-tile { --tile: 58px; }
  .key { width: 43px; height: 58px; font-size: 13px; }
  .key.wide { width: 65px; }
}