/* ==========================================================================
   The quiz screen: setup, question, answers, feedback, results.
   ========================================================================== */

.game-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0 40px;
}

.game-screen[hidden] { display: none !important; }

/* --- Setup / difficulty ------------------------------------------------- */
.setup { text-align: center; }

.setup .game-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 12px;
}

.setup h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 8px; }
.setup > p { margin: 0 auto 28px; color: var(--text-secondary); }

.difficulty-list {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
  text-align: left;
}

.difficulty {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  min-height: 76px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  /* Buttons carry text-align:center from the UA sheet, which beats the
     inherited left alignment on .difficulty-list. */
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, background-color .15s ease;
}

.difficulty:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.difficulty[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Difficulty swatches: one dot glyph, coloured per level, instead of four
   different emoji that render inconsistently across platforms. */
.difficulty-dot { display: flex; flex-shrink: 0; }
.difficulty-dot .icon { width: 18px; height: 18px; }
.difficulty-dot[data-level="easy"]   { color: var(--success); }
.difficulty-dot[data-level="medium"] { color: var(--warning); }
.difficulty-dot[data-level="hard"]   { color: var(--error); }
.difficulty-dot[data-level="expert"] { color: var(--purple); }
.difficulty strong { display: block; font-size: 1.0625rem; }
.difficulty small { color: var(--text-secondary); }

.difficulty[aria-pressed="true"] small { color: var(--text); }

.review-count {
  margin: 0 auto 24px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
}

.link-button {
  background: none;
  border: 0;
  padding: 8px 4px;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  font-size: .9375rem;
}

.link-button:hover { color: var(--text); }

.setup-best {
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: .9375rem;
}

/* --- Play header -------------------------------------------------------- */
.game-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.game-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
}

.game-counter {
  font-size: .875rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  /* Sticks below the header so the score never scrolls out of sight while
     you are reading the answers. */
  position: sticky;
  top: calc(var(--header-height) + 8px);
  z-index: 5;
}

.scoreboard div { text-align: center; }

.scoreboard .value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.scoreboard .label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
}

.scoreboard .streak-value { color: var(--warning); }

/* --- Progress ----------------------------------------------------------- */
.progress-track {
  height: 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 999px;
  transition: width .35s ease;
}

.progress-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.progress-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-secondary);
  border: 1px solid var(--border);
}

.progress-dots span[data-state="correct"] { background: var(--success); border-color: var(--success); }
.progress-dots span[data-state="wrong"]   { background: var(--error); border-color: var(--error); }

/* --- Question ----------------------------------------------------------- */
.question-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.question-visual .flag-big {
  font-size: clamp(4.5rem, 20vw, 7rem);
  line-height: 1.1;
}

.question-visual .subject {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.question-visual .subject-icon { font-size: 3.5rem; line-height: 1.2; }

/* The visual is a flex container, so a grid child is sized shrink-to-fit —
   and `repeat(auto-fit, minmax(…, 1fr))` collapses to a single column when the
   width is indefinite. Giving it a definite width lets the clues sit side by
   side instead of stacking into a tall column. */
.question-visual .fact-grid {
  width: 100%;
  margin: 0;
  gap: 12px;
}

.question-visual .fact {
  border-left: 3px solid var(--primary);
  text-align: left;
}
.question-visual .subject-sub { color: var(--text-secondary); font-size: .9375rem; margin-top: 6px; }

/* --- Map and shape questions -------------------------------------------- */

.question-visual.is-map,
.question-visual.is-shape {
  padding: 10px;
  min-height: 0;
  display: block;
}

/* Country silhouette (shape quiz) */
.shape-svg {
  width: 100%;
  height: 210px;
}

.shape-svg path {
  fill: var(--primary);
  stroke: none;
}

/* Interactive world map (map quiz) */
.world-map {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  /* Left unbounded, a full-width map is ~650px tall and pushes the prompt and
     feedback below the fold. The viewBox is built from the element's measured
     aspect (js/worldmap.js), so clamping the height just makes the window
     wider and shorter — it never letterboxes or distorts. */
  max-height: min(40vh, 380px);
  display: block;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  background: var(--map-sea);
  touch-action: manipulation;
}

.world-map path {
  fill: var(--map-land);
  stroke: var(--map-line);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill .12s ease;
}

/* Territories and dependencies: context only, never an answer. */
.world-map path.is-inert {
  fill: var(--map-inert);
  pointer-events: none;
}

.world-map path.is-target {
  cursor: pointer;
  pointer-events: all;
}

.world-map path.is-target:hover {
  fill: var(--primary-soft);
}

.world-map.is-answered path.is-target {
  cursor: default;
  pointer-events: none;
}

.world-map path[data-result="correct"] {
  fill: var(--success);
  stroke: var(--success);
}

.world-map path[data-result="wrong"] {
  fill: var(--error);
  stroke: var(--error);
}

/* Name the Countries: lights up green the instant it is typed. */
.world-map path.is-found {
  fill: var(--success);
}

/* Click-to-zoom, drag-to-pan (js/worldmap.js:makeZoomable). */
.world-map.is-zoomable { cursor: zoom-in; }
.world-map.is-zoomable.is-zoomed { cursor: grab; touch-action: none; }
.world-map.is-zoomable.is-dragging { cursor: grabbing; }

/* Name the Countries: "show countries" hint dots, cleared as each is found. */
.hint-dot {
  fill: var(--primary);
  stroke: var(--surface);
  stroke-width: 1;
  pointer-events: none;
}

.map-frame {
  position: relative;
}

.map-hint-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}

.map-hint-toggle:hover { border-color: var(--primary); }
.map-hint-toggle[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); }

.map-hint {
  text-align: center;
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.question-text {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 auto 20px;
  max-width: 34ch;
}

/* --- Answers ------------------------------------------------------------ */
.answers {
  display: grid;
  gap: 12px;
}

/* Flag answers are a single glyph, which is unreadable at body size. Two
   columns keep four large flags on screen without scrolling. */
.answers[data-option-style="flag"] {
  grid-template-columns: 1fr 1fr;
}

.answers[data-option-style="flag"] .answer {
  justify-content: center;
  min-height: 92px;
}

.answers[data-option-style="flag"] .answer > span:first-child {
  font-size: 2.75rem;
  line-height: 1.1;
}

.answers[data-option-style="flag"] .answer .marker {
  margin-left: 0;
  position: absolute;
  top: 8px;
  right: 10px;
}

.answers[data-option-style="flag"] .answer { position: relative; }

.answer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 14px 20px;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.answer:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.answer:disabled { cursor: default; }

.answer .marker {
  margin-left: auto;
  display: flex;
}

.answer .marker .icon { width: 20px; height: 20px; }
.answer[data-result="correct"] .marker { color: var(--success); }
.answer[data-result="wrong"] .marker { color: var(--error); }

.answer[data-result="correct"] {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--text);
}

.answer[data-result="wrong"] {
  border-color: var(--error);
  background: var(--error-soft);
  color: var(--text);
}

.answer[data-result="muted"] { opacity: .55; }

/* --- Feedback ----------------------------------------------------------- */
/* A fixed-height slot that is always in the flow. It used to be `hidden` and
   appear on answer, which grew the column — and in the split layout the
   stretched visual opposite resized with it, so the whole screen jumped on
   every answer. Reserving the space and fading the contents in costs a little
   room and removes all of the movement. */
.feedback {
  margin-top: 16px;
  padding: 12px 18px;
  height: 88px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease,
              background-color .18s ease, border-color .18s ease;
}

.feedback[data-kind] {
  opacity: 1;
  transform: none;
}

.feedback-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.feedback-head strong { font-size: 1.0625rem; }
.feedback-head .icon { width: 22px; height: 22px; }

.feedback[data-kind="correct"] .feedback-head { color: var(--success); }
.feedback[data-kind="wrong"] .feedback-head { color: var(--error); }

.feedback .points {
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.feedback .answer-was { font-weight: 800; color: var(--text); }

/* Clamped so a long fact can never change the strip's height. */
.feedback .note {
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.35;
  margin: 0 auto;
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feedback[data-kind="correct"] { border-color: var(--success); background: var(--success-soft); }
.feedback[data-kind="wrong"] { border-color: var(--error); background: var(--error-soft); }

.streak-flash {
  color: var(--warning);
  font-weight: 700;
  font-size: .875rem;
}

/* --- Results ------------------------------------------------------------ */
.results { text-align: center; }

.results-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: 24px;
}

.results-title .icon { width: 1em; height: 1em; stroke-width: 1.8; }
.results-title [data-result-icon] { display: flex; color: var(--primary); }

.results-score {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.results-score-label {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.results-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--warning);
}

.results-stars .icon { width: 30px; height: 30px; }

.results-summary {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 auto 4px;
}

.results-best {
  color: var(--text-secondary);
  font-size: .9375rem;
  margin: 0 auto 24px;
}

.results-new-best {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-weight: 700;
  font-size: .875rem;
}

.results .btn-row { flex-direction: column; }

.review {
  margin-top: 32px;
  text-align: left;
}

.review h2 { font-size: 1.125rem; margin-bottom: 12px; }

.review li {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 8px;
  font-size: .9375rem;
}

.review li .mark { flex-shrink: 0; display: flex; padding-top: 2px; }
.review li .mark .icon { width: 18px; height: 18px; }
.review li .mark[data-ok="true"] { color: var(--success); }
.review li .mark[data-ok="false"] { color: var(--error); }
.review li .q { color: var(--text-secondary); }

/* Top Spoken Languages: the full ranked answer key, found vs missed. */
.review li .rank {
  flex-shrink: 0;
  width: 28px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.review li[data-found="true"] .mark { color: var(--success); }
.review li[data-found="false"] .mark { color: var(--error); }
.review li .meta { display: block; color: var(--text-secondary); font-size: .8125rem; margin-top: 2px; }

/* --- Related games ------------------------------------------------------ */
.related {
  margin-top: 40px;
}

.related h2 { font-size: 1.25rem; margin-bottom: 16px; text-align: center; }

.related-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.related-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
}

.related-links a:hover { border-color: var(--primary); text-decoration: none; }

/* --- Loading / error ---------------------------------------------------- */
.game-status {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

/* --- Landlocked Countries (click-based sudden death) --------------------- */
.landlocked-warning {
  text-align: center;
  font-weight: 700;
  margin-bottom: 16px;
}

.landlocked-warning strong { color: var(--error); }

.landlocked-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.landlocked-option {
  padding: 14px 12px;
  min-height: 48px;
  background: var(--surface-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9375rem;
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease, background-color .15s ease;
}

.landlocked-option:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.landlocked-option:disabled { cursor: default; }

.landlocked-option[data-result="correct"] {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
  font-weight: 700;
}

.landlocked-option[data-result="wrong"] {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error);
  font-weight: 700;
}

/* Landlocked countries the player never got to before the mistake — shown
   for a beat so the round ends with an answer, not just a dead end. */
.landlocked-option[data-result="missed"] {
  border-color: var(--warning);
  color: var(--warning);
}

/* --- Name the Countries (free recall) ------------------------------------ */
.recall-rules {
  font-size: .875rem;
  color: var(--text-secondary);
  margin-top: -12px;
}

.recall-timer {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.recall-timer.is-low {
  color: var(--error);
  animation: pop-in .2s ease;
}

.recall-count {
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}

.recall-form {
  display: flex;
  gap: 10px;
  margin: 20px 0 12px;
}

.recall-form input {
  flex: 1;
  height: 52px;
  padding: 0 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.0625rem;
}

.recall-form input:focus { border-color: var(--primary); }
.recall-form input::placeholder { color: var(--text-secondary); }

.recall-form .btn {
  min-width: 88px;
}

.recall-feedback {
  text-align: center;
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: 12px;
  min-height: 1.2em;
}

.recall-feedback[data-kind="correct"] { color: var(--success); }
.recall-feedback[data-kind="wrong"] { color: var(--error); }
.recall-feedback[data-kind="duplicate"] { color: var(--warning); }

.recall-found {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  max-height: 260px;
  overflow-y: auto;
}

.recall-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  animation: pop-in .2s ease both;
}

/* --- Animations --------------------------------------------------------- */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.animate-in { animation: pop-in .25s ease both; }


/* --- Wide-screen play layout --------------------------------------------
   Stacking the visual above the answers wastes a wide screen and pushes the
   options below the fold. Side by side, the round needs the height of the
   taller column rather than the sum of both, so everything fits without
   scrolling. Grid areas are used so no extra wrapper markup is needed.
   ------------------------------------------------------------------------ */
@media (min-width: 960px) {
  .game-shell { max-width: 1000px; }

  [data-layout="split"] [data-screen="play"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    grid-template-areas:
      "top    top"
      "score  score"
      "bar    bar"
      "visual prompt"
      "visual answers"
      "visual feedback"
      "dots   dots";
  }

  [data-layout="split"] .game-top       { grid-area: top; }
  [data-layout="split"] .scoreboard     { grid-area: score; }
  [data-layout="split"] .progress-track { grid-area: bar; }
  /* Deliberately NOT align-self: stretch. Matching the opposite column made
     the visual resize whenever the answers wrapped differently or the
     feedback appeared. A stable min-height keeps it still. */
  [data-layout="split"] .question-visual {
    grid-area: visual;
    align-self: start;
    min-height: 340px;
    margin-bottom: 0;
  }
  [data-layout="split"] .question-text {
    grid-area: prompt;
    text-align: left;
    max-width: none;
    margin: 0 0 16px;
  }
  /* One clue per row in the narrower column: two columns leave an orphan
     card, and full-width rows balance the stack of answers opposite. */
  [data-layout="split"] .question-visual .fact-grid { grid-template-columns: 1fr; }

  [data-layout="split"] .answers        { grid-area: answers; }
  [data-layout="split"] .feedback       { grid-area: feedback; }
  [data-layout="split"] .progress-dots  { grid-area: dots; }
}


/* --- Map-quiz layout -----------------------------------------------------
   The map answers on itself, so there is no second column to fill. What it
   does need is the instruction above the map rather than below it: the map is
   tall, and a prompt underneath is the first thing to scroll out of view.
   ------------------------------------------------------------------------ */
[data-layout="wide"] [data-screen="play"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "score"
    "bar"
    "prompt"
    "visual"
    "feedback"
    "dots";
}

[data-layout="wide"] .game-top        { grid-area: top; }
[data-layout="wide"] .scoreboard      { grid-area: score; }
[data-layout="wide"] .progress-track  { grid-area: bar; }
[data-layout="wide"] .question-text   { grid-area: prompt; margin-bottom: 14px; }
[data-layout="wide"] .question-visual { grid-area: visual; }
[data-layout="wide"] .feedback        { grid-area: feedback; }
[data-layout="wide"] .progress-dots   { grid-area: dots; }