:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --ink: #1c2333;
  --muted: #6b7280;
  --accent: #4f46e5;
  --accent-soft: #eef0ff;
  --good: #16a34a;
  --bad: #dc2626;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(28, 35, 51, 0.08);
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect the OS "reduce motion" setting: the wrong-answer shake and the screen fades
   are exactly the kind of movement that triggers vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* One consistent focus ring. Browsers only show :focus-visible for keyboard users, so
   this never fires on a mouse click. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overscroll-behavior-y: none;
}
/* The Daily request is asynchronous. Keep provisional markup out of the first paint until
   initialization has restored progress and selected the correct screen. */
body.booting .layout,
body.booting .site-credits {
  visibility: hidden;
}

.site-credits {
  max-width: 900px;
  margin: 8px auto 28px;
  padding: 0 20px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.disclaimer-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.disclaimer-button:hover { color: var(--accent); }

.welcome-dialog {
  width: min(440px, calc(100% - 32px));
  margin: auto;
  padding: 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.welcome-dialog::backdrop { background: rgba(28, 35, 51, 0.55); }
.welcome-dialog h2 { margin-bottom: 10px; }
.welcome-dialog p { color: var(--muted); line-height: 1.55; }
.welcome-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 20px;
}
.welcome-actions a { color: var(--accent); font-weight: 600; }
.disclaimer-dialog {
  width: min(520px, calc(100% - 32px));
  margin: auto;
  padding: 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.disclaimer-dialog::backdrop { background: rgba(28, 35, 51, 0.55); }
.disclaimer-dialog h2 { margin-bottom: 12px; }
.disclaimer-dialog p { color: var(--muted); line-height: 1.6; }
.disclaimer-dialog p + p { margin-top: 10px; }
.disclaimer-dialog a { color: var(--accent); }
.disclaimer-dialog .btn { display: block; margin: 20px 0 0 auto; }

.topbar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 10px 16px;
  padding: 10px 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand-controls {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar h1 { font-size: 1.25rem; letter-spacing: 0.02em; white-space: nowrap; }
.audience-switch,
.play-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
}
.audience-switch { gap: 2px; padding: 3px; }
.play-tabs { justify-self: center; gap: 4px; padding: 4px; }
.audience-option {
  width: 70px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 6px;
  cursor: pointer;
}
.audience-option.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(28,35,51,0.12);
}
body.audience-kids {
  --bg: #f2faf7;
  --accent: #0f766e;
  --accent-soft: #ccfbf1;
}

.archive-picker {
  max-width: 460px;
  margin: 48px auto;
  padding: 24px;
  text-align: center;
}

.archive-month-nav {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-bottom: 8px;
}
.archive-month-label {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}
.archive-month-nav button {
  width: 32px;
  height: 30px;
  border: 1px solid #d8dce5;
  border-radius: 7px;
  background: var(--card);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.archive-month-nav button:disabled { opacity: 0.35; cursor: default; }
.archive-weekdays,
.archive-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.archive-days { min-height: 205px; }
/* Kids begins with a short launch month; do not reserve six empty calendar rows. */
body.audience-kids .archive-days { min-height: 0; }

.archive-weekdays {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.archive-day {
  position: relative;
  min-height: 30px;
  padding: 4px 2px;
  border: 1px solid #d8dce5;
  border-radius: 7px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.archive-day:hover { border-color: var(--accent); color: var(--ink); }
.archive-day.completed {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}
.archive-day.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  color: var(--accent);
}
.archive-picker-status {
  min-height: 1.4em;
  margin-top: 12px;
  color: var(--bad);
  font-size: 0.9rem;
}
.archive-picker-status:empty { display: none; }

.play-tab {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.play-tab:hover { color: var(--ink); }
.play-tab.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 4px rgba(28,35,51,0.12); }

.mode-daily .layout,
.mode-archive .layout,
.mode-stats .layout { max-width: 910px; }


.layout {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 18px auto;
  padding: 0 16px;
  align-items: flex-start;
}

main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 760px) {
  html { overflow-y: auto; scrollbar-gutter: auto; }
  html.keyboard-open { overflow-y: hidden; }
  .site-credits { margin-bottom: 8px; }
  .compare-prompt { right: 8px; bottom: 8px; }
  .layout { flex-direction: column; margin-top: 6px; }

  /* Keep the controls in fixed grid areas so section changes cannot reflow the menu.
     Every pixel here is one the guess field gains: the keyboard leaves roughly 400px of
     visible page on a phone, so chrome above the field is what decides whether it is
     reachable. Trimmed rather than removed, so the header stays legible. */
  .topbar {
    grid-template-columns: minmax(78px, 1fr) 88px minmax(174px, 1fr);
    padding: 4px 7px;
    gap: 3px;
  }
  .brand-controls { display: contents; }
  .topbar h1 { font-size: 0.76rem; line-height: 1.1; white-space: nowrap; }
  .audience-switch { width: 88px; padding: 2px; gap: 0; }
  .audience-option { width: 42px; padding: 4px 1px; font-size: 0.62rem; }
  .play-tabs { padding: 2px; gap: 0; }
  .play-tab { width: 43px; padding: 5px 1px; font-size: 0.68rem; }
  .archive-picker {
    width: 100%;
    margin: 20px auto;
    padding: 18px 18px 12px;
  }
  .archive-picker-controls { align-items: stretch; }
  .archive-picker .btn { padding-inline: 14px; }

  main { width: 100%; }
  .card { padding: 16px; }
  .intro { padding: 32px 20px; }

  /* Keep the action beside the field to conserve vertical space above the keyboard. */
  #guess-form { flex-wrap: nowrap; }
  #guess-form input { flex: 1 1 auto; min-width: 0; }
  #guess-form .btn { flex: 0 0 auto; }

  .summary-row img { width: 64px; }
}

/* Short phones: the on-screen keyboard can leave only ~400px of visible page, and focusing
   the guess field deliberately locks scrolling so the movie cannot drift. That combination
   makes an unreachable field unrecoverable, so where height is genuinely scarce the movie
   yields a little rather than the input falling under the keyboard. Taller phones keep the
   full-size image: this only engages below 820px of viewport height. */
@media (max-width: 760px) and (max-height: 820px) {
  /* Constrain the frame's width, not its height. The still is object-fit: cover, so capping
     height would crop the picture and hide part of the clue; capping width keeps the 16:9
     box intact and simply renders the whole frame smaller. */
  html.short-phone .image-frame {
    width: min(100%, calc(24svh * 16 / 9));
    margin-inline: auto;
  }
  html.short-phone .layout { margin-top: 4px; }
  html.short-phone .question-meta { margin-bottom: 3px; }
  html.short-phone .topbar { padding: 3px 10px; }
}

.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.35s ease; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.intro { text-align: center; padding: 56px 32px; }
.intro h2 { margin-bottom: 28px; }
.intro p { color: var(--muted); max-width: 480px; margin: 0 auto 28px; line-height: 1.6; }
.intro p:empty { display: none; }

.image-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #e5e7eb;
  aspect-ratio: 16 / 9;
}

.image-frame.compare-enabled { cursor: pointer; }
.image-frame.compare-enabled:hover { box-shadow: 0 0 0 3px var(--accent-soft); }

.compare-prompt {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(28, 35, 51, 0.88);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transition: max-width 0.2s, padding 0.2s;
}

.compare-icon { font-size: 1rem; }
.image-frame.compare-used .compare-prompt { max-width: 32px; padding-inline: 8px; }
.image-frame.compare-used #compare-label { display: none; }

.still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.still.original {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.still.original.revealed { opacity: 1; }
.still.original.instant { transition: none; }
/* While a new movie is loading, show the frame's own background rather than the previous
   movie, which would otherwise stay painted until the new image decodes. */
.image-frame.image-loading .still { visibility: hidden; }

.image-frame.load-error::after {
  content: "This image could not be loaded.";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #eef0f4;
  color: var(--muted);
  text-align: center;
}

/* Guess and reveal occupy the same fixed row. A minimum is insufficient here: the taller
   guess form expands an auto track, then the shorter reveal lets it collapse again. */
#screen-question .card {
  display: grid;
  grid-template-rows: auto 240px auto;
}

#guess-area {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 12px;
}

/* Guessing stays in the fixed interaction row so hints cannot move the movie or field.
   Once answered there is no keyboard to clear: switch to ordinary vertical flow and let the
   card use as much height as the answer, hints, and links actually need. */
#screen-question .card:has(#guess-area.answered) { grid-template-rows: auto auto auto; }
#guess-area.answered {
  display: flex;
  min-height: 228px;
  flex-direction: column;
  overflow: visible;
}
#guess-area.answered .question-meta,
#guess-area.answered #guess-form,
#guess-area.answered .feedback { display: none; }
#guess-area.answered #reveal-area {
  order: 1;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#guess-area.answered .hints {
  order: 2;
  height: auto;
  min-height: 86px;
  flex: none;
  overflow: visible;
  margin-top: 2px;
}
#guess-area.answered .reveal-links {
  order: 3;
  margin-top: 12px;
}

.question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.points-pill {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
}

.hints {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 86px;
  margin-bottom: 8px;
  overflow: hidden;
}
.hints:empty { visibility: hidden; }

.hint-chip {
  flex: 0 0 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  animation: fadeIn 0.3s ease;
}

.hint-chip b { color: #78350f; }

#guess-form { display: flex; gap: 10px; }

#guess-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s;
}

/* the input suppresses the default outline, so its focus state must be unmistakable */
#guess-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#guess-input.shake {
  animation: shake 0.4s ease;
  border-color: var(--bad);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn {
  padding: 12px 22px;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.1s, background 0.2s;
}

.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: #4338ca; }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }
.btn.ghost:hover { background: #e0e3ff; }

.feedback { margin-top: 6px; min-height: 1.4em; font-size: 0.95rem; color: var(--bad); }

#reveal-area { text-align: center; }
.reveal-text { font-size: 1.15rem; line-height: 1.35; }
.reveal-text b { color: var(--accent); }
.reveal-mark {
  display: inline-block;
  font-size: 0.82em;
  line-height: 1;
  vertical-align: -0.06em;
}

.reveal-links {
  display: flex;
  align-self: start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.reveal-links a {
  font-size: 0.78rem;
  color: var(--muted);
  word-break: break-all;
  text-decoration: underline dotted;
}

.reveal-links a:hover { color: var(--accent); }

.final-score { font-size: 1.4rem; }

.result-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.result-actions .btn { width: 150px; }
#btn-share.copied,
.stats-copy.copied { color: var(--good); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 10px;
  margin: 10px 0 28px;
}
.stat-tile { padding: 16px 10px; border-radius: 12px; background: var(--accent-soft); text-align: center; }
.stat-tile b { display: block; color: var(--accent); font-size: 1.55rem; }
.stat-tile span { color: var(--muted); font-size: 0.78rem; }
.stats-card h3 { margin-bottom: 10px; }
.stats-history-row {
  display: grid;
  grid-template-areas: "date grid score copy";
  grid-template-columns: minmax(110px, 1fr) minmax(110px, auto) 76px 72px;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #eef0f4;
  align-items: center;
}
.stats-history-row:last-child { border-bottom: 0; }
.stats-history-date { grid-area: date; font-weight: 600; }
.stats-game-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: underline dotted;
  cursor: pointer;
}
.stats-game-link:hover { color: var(--accent); }
.stats-history-grid { grid-area: grid; min-width: 0; letter-spacing: 0.08em; }
.stats-history-score { grid-area: score; color: var(--accent); font-weight: 700; text-align: right; }
.stats-copy { grid-area: copy; width: 72px; }
.stats-empty { color: var(--muted); padding: 20px 0; text-align: center; }

@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .stat-tile { padding: 12px 4px; }
  .stat-tile b { font-size: 1.3rem; }
  .stat-tile span { font-size: 0.7rem; line-height: 1.15; }
  .stats-history-row {
    grid-template-areas: "date score" "grid copy";
    grid-template-columns: minmax(0, 1fr) 82px;
    row-gap: 8px;
  }
  .stats-history-score { text-align: right; }
  .stats-copy { justify-self: end; }
}

.btn.small { padding: 8px 14px; font-size: 0.85rem; }
.btn.small:disabled { opacity: 0.4; cursor: not-allowed; }

.qnav {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 38px;
}

.qnav .btn {
  width: 112px;
  white-space: nowrap;
}

#btn-prev { justify-self: start; }
#btn-next { justify-self: end; }

@media (max-width: 760px) {
  #screen-question .card {
    grid-template-rows: auto 270px auto;
    padding: 8px;
  }

  /* Reserve the hint block above the guess row. New hints fill that fixed block without
     moving the movie or controls, and remain in the same place during answer reveal. */
  #guess-area { display: flex; flex-direction: column; margin-top: 4px; }
  #guess-area.answered { min-height: 266px; }
  #guess-area.answered .hints { min-height: 84px; margin-top: 8px; }
  .question-meta { order: 1; margin-bottom: 4px; }
  .points-pill { padding: 3px 9px; }
  .hints {
    order: 2;
    height: 84px;
    gap: 4px;
    margin: 0 0 3px;
  }
  #guess-form { order: 3; gap: 6px; }
  #guess-input { padding: 8px 10px; }
  #guess-form .btn { padding: 8px 14px; }
  .feedback { order: 4; margin-top: 4px; min-height: 1.2em; }
  .hint-chip { padding: 4px 8px; }
  #reveal-area:not(.hidden) .reveal-mark { font-size: 0.72em; }
}

.round-summary {
  max-width: 520px;
  margin: 0 auto 24px;
  text-align: left;
}

.summary-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid #eef0f4;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.summary-row:last-child { border-bottom: none; }
.summary-row:hover { background: var(--accent-soft); }

.summary-row img {
  width: 84px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.summary-title { flex: 1; font-weight: 600; }
.summary-pts { font-weight: 700; color: var(--good); }
.summary-pts.missed { color: var(--bad); }
.hidden { display: none !important; }

/* Help reads as prose, so it is the one screen that is plain flow rather than a fixed grid. */
.help-card { text-align: left; }
.help-card h2 { margin-bottom: 14px; }
.help-card h3 {
  margin: 20px 0 6px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.help-card p { line-height: 1.6; color: var(--ink); }
.help-card p + p { margin-top: 8px; }
.help-list { margin: 6px 0 0 20px; line-height: 1.7; }
.mode-help .sidebar { display: none; }
.mode-help .layout { max-width: 910px; }

@media (max-width: 760px) {
  .help-card h3 { margin-top: 16px; }
}