/* Layered on top of style.css, which supplies the palette and the base
   .map-wrap svg rules. Only quiz-specific behaviour lives here. */

:root {
  --correct:      #4ea862;
  --correct-edge: #7fd894;
  --wrong:        #d4573f;
  --chip-bg:      #16456b;
}

/* ---------- Layout ---------- */

.quiz-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
}

.quiz-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* Chip and Skip on one line, the help text wrapping onto its own. */
.quiz-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.quiz-prompt .chip-help { flex: 1 1 100%; }

/* The same trap as .chip-tag further down: quiz.js sets `hidden` on the prompt
   row and the chip when the last country is placed, and any author `display`
   beats the UA rule for [hidden]. Without these the finished map keeps a stale
   chip — and on a phone the row is fixed, so it sits over the result panel. */
.quiz-prompt[hidden],
.chip[hidden] { display: none; }

/* ---------- The prompt chip ---------- */

.chip {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;

  /* Stops the browser panning the page when a drag starts on the chip. */
  touch-action: none;
}

.chip:active { cursor: grabbing; }
.chip.is-dragging { opacity: 0.35; }

.chip.is-wrong {
  border-color: var(--wrong);
  animation: shake 0.32s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .chip.is-wrong { animation: none; }
}

/* Marks the five island states. Their shape on the map is a dot in open sea,
   not an outline, so without this cue the name is close to unguessable. */
.chip-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.45rem;
  background: rgba(127, 216, 148, 0.16);
  border: 1px solid var(--correct-edge);
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--correct-edge);
  vertical-align: middle;
}

/* The UA rule for [hidden] is display:none, and any author `display` beats it.
   Without this the badge above never hides and every prompt reads "island". */
.chip-tag[hidden] { display: none; }

.chip-help {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* The element that follows the pointer during a drag. pointer-events:none is
   load-bearing: without it elementFromPoint returns the ghost, not the map. */
.chip-ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: 0.55rem 1.1rem;
  background: var(--chip-bg);
  border: 1px solid var(--correct-edge);
  border-radius: 5px;
  font: 600 1.05rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -150%);
  white-space: nowrap;
}

/* ---------- Stats ---------- */

.quiz-stats {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.quiz-stats b { color: var(--ink); font-size: 1rem; }

.btn {
  padding: 0.45rem 0.9rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.btn:hover { border-color: var(--correct-edge); }
.btn-primary { background: var(--chip-bg); }

.btn[aria-pressed="true"] {
  background: var(--chip-bg);
  border-color: var(--correct-edge);
}

/* ---------- Full screen ---------- */

/* A square icon button sharing the nav row with the back link. */
.nav-icon {
  padding: 0.45rem 0.6rem;
  line-height: 1;
  font-size: 1.05rem;
  cursor: pointer;
  background: transparent;
}
.nav-icon[aria-pressed="true"] { background: var(--chip-bg); border-color: var(--correct-edge); }

/* Fullscreen is requested on the document element, so the whole page goes with
   it. The UA paints its own black behind a fullscreen element, which the body
   gradient would otherwise sit on top of as a visible band. */
:root:fullscreen { background: var(--page-bg); overflow-y: auto; }
:root:-webkit-full-screen { background: var(--page-bg); overflow-y: auto; }

/* ---------- Map in quiz mode ---------- */

/* Every shape starts blank. Correct answers are the only thing that colours in,
   so hover and the data-has-data rules from style.css must not apply here.

   `fill` is deliberately not transitioned, for the same reason style.css gives:
   the zoom glide rewrites --zoom/--marker on the <svg> every frame, and that
   churn strands an in-flight fill transition at its starting colour — a placed
   country would stay grey. */
.quiz-map svg path,
.quiz-map svg .island-dot {
  fill: var(--land-empty);
  stroke: var(--stroke);
}

.quiz-map svg path:hover,
.quiz-map svg path.is-selected { fill: var(--land-empty); }

/* Only unplaced, quizzable shapes react to the pointer. */
.quiz-map svg [data-quiz]:not([data-done]) { cursor: pointer; }
.quiz-map svg [data-quiz]:not([data-done]):hover { fill: var(--land-hover); }
.quiz-map svg .island[data-quiz]:not([data-done]):hover .island-dot {
  fill: var(--land-hover);
}

/* Placed */
.quiz-map svg path[data-done],
.quiz-map svg .island[data-done] .island-dot {
  fill: var(--correct);
  stroke: var(--correct-edge);
}

/* Wrong-answer flash */
.quiz-map svg path.flash-wrong,
.quiz-map svg .island.flash-wrong .island-dot { fill: var(--wrong); }

/* Islands are a 12-unit target on the main map, which is fiddly mid-drag.
   Widened here only; index.php is untouched. Divided by --marker like every
   other marker radius, or the target would stop tracking the dot once zoomed. */
.quiz-map svg .island-hit { r: calc(20px / var(--marker, 1)); }

/* ---------- Giving nothing away ---------- */

/* style.css prints island and territory names beside their markers, which on
   the quiz would be five free answers. Hidden until placed, then shown — so
   the map fills in with names as you go. Easy mode shows them from the start.
   The hover tooltips come from <title> elements and cannot be hidden in CSS;
   quiz.js detaches those. */
.quiz-map svg .island-label { visibility: hidden; }

.quiz-map svg .island[data-done] .island-label,
.quiz-map.is-easy svg .island-label { visibility: visible; }

.quiz-map svg .island[data-done] .island-label { fill: var(--correct-edge); }

/* Territories are never asked about, so their names are scenery, not answers. */
.quiz-map svg .territory .island-label { visibility: visible; }

.quiz-map svg { max-height: 74vh; }

/* ---------- Result ---------- */

.result {
  margin-top: 1.25rem;
  padding: 1.5rem;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.result h2 { margin: 0 0 1rem; }
.result dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.4rem 1.5rem;
  justify-content: center;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  text-align: left;
}
.result dt { color: var(--muted); }
.result dd { margin: 0; font-weight: 600; }
.result a { color: var(--muted); font-size: 0.85rem; }

/* ---------- Mobile ---------- */

/* Three rows of chrome and then the map, in as little height as they will go:
   title + back + fullscreen, then a thin stats strip with the easy toggle,
   then the country chip with Skip opposite it.

   The page is a viewport-height column so the map region takes whatever is
   left rather than sitting above dead space. Note it can only take so much:
   the drawing is 796x760 user units — near enough square — inside a portrait
   screen, so it is width-bound, and no amount of height makes it larger. What
   the column does buy is that the leftover is shared around the map instead of
   pooling underneath it.

   The height clause catches landscape phones, which are wider than 820 and so
   miss every width-keyed rule in style.css while having less room than any
   portrait one. It also catches a short desktop window, where the same
   compression is the right answer. */
@media (max-width: 820px), (max-height: 560px) {
  .quiz-page {
    min-height: 100vh;
    min-height: 100dvh;   /* excludes the mobile browser bars; vh does not */
    display: flex;
    flex-direction: column;

    /* Stops a drag that starts near the top edge turning into pull-to-refresh. */
    overscroll-behavior-y: contain;
  }

  .quiz-layout {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;

    /* .quiz-page is a column flex container here, so .quiz-layout is a flex
       item — and the `margin: 0 auto` it inherits from the wide-layout rule
       is a pair of auto margins on the cross axis. Those suppress
       align-items: stretch: instead of filling the width the item shrinks to
       its content and the margins centre it, leaving dead space either side
       of the bar and the map. The header and the fixed prompt row are not
       inside this element, which is why only the middle of the page is
       narrow. Reset both to get the full-bleed layout the rules below
       already assume. */
    width: 100%;
    margin: 0;
  }

  /* ---- Row 1: title, back, fullscreen ---- */

  /* nowrap keeps the nav on the title's line; style.css gives it a full row of
     its own on small screens, which is a row the map wants back. */
  .quiz-page .site-head {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
  }
  .quiz-page .site-head h1 { font-size: 1.05rem; }
  .quiz-page .site-head p  { display: none; }   /* chip-help carries this for AT */
  .quiz-page .site-head-text { min-width: 0; }

  .quiz-page .site-nav { width: auto; flex: 0 0 auto; gap: 0.4rem; }
  .quiz-page .nav-link { flex: 0 0 auto; padding: 0.35rem 0.55rem; font-size: 0.78rem; }

  /* ---- Rows 2 and 3 ---- */

  /* Full-bleed strip: no side border or radius, since it meets the screen edge. */
  .quiz-bar {
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0;
    padding: 0.4rem 0.6rem;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .quiz-prompt,
  .quiz-stats { flex: 1 1 100%; flex-wrap: nowrap; }

  /* Stats first, as one thin line: counters spread out, easy toggle on the end. */
  .quiz-stats {
    order: -1;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }
  .quiz-stats b { font-size: 0.9rem; }
  .quiz-stats .btn { padding: 0.3rem 0.55rem; font-size: 0.78rem; }

  /* Chip hard left, Skip hard right — pinned to the foot of the screen.
     The map is square and the screen is not, so ~40% of a portrait phone is
     empty whatever we do; anchoring the prompt to the bottom edge puts content
     at both ends of the screen, leaving one gap in the middle rather than a
     dead tail under everything. It also lands the two controls you actually
     press in thumb reach. */
  .quiz-prompt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    /* Clears the iPhone home indicator. */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--panel-bg);
    border-top: 1px solid var(--line);
  }

  /* Reserves the fixed row's height, so the map never sits under it — and
     gives it back at the end of a run, when the row is gone. */
  .quiz-layout { padding-bottom: 4.25rem; }
  .quiz-layout:has(.quiz-prompt[hidden]) { padding-bottom: 0; }

  /* min-width:0 lets a long name wrap inside the chip rather than shoving Skip
     off the row. Wrapping, not ellipsis — the whole name is the question. */
  .chip {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 1.05rem;
    padding: 0.5rem 0.85rem;
  }
  .btn { flex: 0 0 auto; }

  /* The name follows the finger, so it must fit the screen it is dragged over. */
  .chip-ghost { max-width: 88vw; white-space: normal; text-align: center; }

  /* Visually hidden rather than display:none, so the chip's aria-describedby
     still resolves now that the header subtitle is gone. */
  .chip-help {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---- The map takes the rest ---- */

  /* The map takes every pixel left over. */
  .quiz-map {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }

  /* Sized by the box, not by the viewBox. With `height: auto` the element's
     height comes from the drawing's own aspect, so it would take only as much
     room as a square needs and leave the rest as dead space below. Stretched
     to the box instead, the drawing centres inside it at the largest size that
     fits whole — nothing is cropped, the leftover just sits either side of it.
     Absolute rather than height:100% so it does not depend on a percentage
     resolving against a flexed parent. */
  .quiz-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
  }

  /* Borders read as a hairline at this scale — the stroke is non-scaling, so
     0.5 is 0.5 device-independent px however small the map is drawn. */
  .quiz-map svg path { stroke-width: 1.1; }
  .quiz-map svg .island-dot,
  .quiz-map svg .island-hit { stroke-width: 1.1; }

  /* style.css scales the map's own text and the zoom buttons up below 820px
     wide. A landscape phone is wider than that and just as small, so repeat
     both here, scoped to the quiz map. */
  .quiz-map svg { --grat-size: 20px; --island-size: 20px; --territory-size: 17px; }
  .quiz-map .map-zoom button { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; }

  /* ---- The result ---- */

  /* The column has no slack, so a five-row panel dropped into it would be cut
     off at the fold. Cap the map instead and let the page scroll: the finished
     map is worth keeping on screen, just not at full height. */
  .result { flex: 0 0 auto; margin: 0.5rem; }

  .quiz-layout:has(.result:not([hidden])) { overflow-y: auto; }
  .quiz-layout:has(.result:not([hidden])) .quiz-map { flex: 0 0 55dvh; }
}

/* Landscape phones: the same layout, wound in tighter. Every row of chrome
   here costs a far larger share of the screen than it does in portrait. */
@media (max-height: 560px) and (orientation: landscape) {
  .quiz-page .site-head { padding: 0.3rem 0.6rem; }
  .quiz-page .site-head h1 { font-size: 0.95rem; }

  .quiz-bar { padding: 0.3rem 0.6rem; }

  .quiz-prompt {
    padding: 0.35rem 0.6rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }
  .chip { font-size: 1rem; padding: 0.4rem 0.75rem; }

  .quiz-layout { padding-bottom: 3.4rem; }
  .quiz-layout:has(.quiz-prompt[hidden]) { padding-bottom: 0; }

  .quiz-layout:has(.result:not([hidden])) .quiz-map { flex: 0 0 70dvh; }
}