/* Mobile-first. The original viral site skewed 78% desktop because mouse-only
   drawing pushed phone users away; here the canvas is the largest element on a
   phone screen and the controls sit inside thumb reach. */

:root {
  --bg: #F8F9FB;
  --ink: #0b1220;
  --muted: #5b6672;
  --line: #e2e6ea;
  --accent: #157575;
  --accent-dark: #146e6e;
  --danger: #dc2626;
  --inside: #2563eb;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Monospace everywhere hurt prose readability. Mono is now reserved for the
     things it is actually good at -- scores, timers, ranks, the wordmark --
     while body copy uses the system UI stack. */
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gold: #b8860b;
  --silver: #6b7684;
  --bronze: #a1662f;
  --ok: #0f766e;
  --panel: #ffffff;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow-md: 0 4px 16px rgba(11, 18, 32, .07);
  --r: 12px;
  /* One layout width for main, .panel and .foot so all sections share a left edge. */
  --wrap: 760px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Every animation in this file is opt-out. Users who ask their OS for reduced
   motion get the layout with no movement at all, not a slower version. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

html { scroll-behavior: smooth; }

/* Numbers that need to line up, plus the wordmark, stay monospaced. */
.brand, #timer, #progress, .rank, .pts, #score-val, #dev-val,
.big-avg strong, .summary .s, #comment-count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.bar {
  /* The bottom border must span the viewport, but the wordmark and nav have to
     sit on the same left/right rails as the page content (--wrap), otherwise the
     header floats ~260px outside every other element on the page. Hence a
     full-bleed bar with a centred inner row. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 18px;
}

/* Full-bleed shell: the rule and background reach the viewport edges while .bar
   inside it stays on the content rails. */
.barwrap {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.4px;
  text-decoration: none;
  color: var(--ink);
}
.brand span { color: var(--accent); }

.bar nav { display: flex; gap: 16px; }
.bar nav a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  /* 'How scoring works' wrapped to two lines at 375px, inflating the header. */
  white-space: nowrap;
}
/* Shorten the label on phones. The full text stays in the DOM for screen
   readers and crawlers; only the visual rendering swaps to the short form.
   The default must come BEFORE the media query -- same specificity, so source
   order decides, and putting it after hid the abbreviation on phones too. */
.bar nav a .abbr { display: none; }
@media (max-width: 420px) {
  .bar nav { gap: 14px; }
  .bar nav a { font-size: 12.5px; }
  .bar nav a .full { display: none; }
  .bar nav a .abbr { display: inline; }
}
.bar nav a:hover { color: var(--accent); }

main {
  flex: 1;
  width: 100%;
  /* main, .panel and .foot must share --wrap. When main was 720 and the others
     were 760, the page had two left edges 20px apart — every section looked
     subtly misaligned against the one above it. */
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 18px 40px;
}

h1 { font-size: 26px; line-height: 1.25; letter-spacing: -0.6px; margin: 8px 0 12px; }
h2 { font-size: 22px; letter-spacing: -0.4px; margin: 4px 0 14px; }
/* Widening main would have stretched body copy past a comfortable measure, so
   reading blocks keep their own cap independent of the layout width. */
.lede, .prose p, .prose li { max-width: 62ch; }
.lede { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }

.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 22px 0 0;
}
.facts li {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
}

button {
  font-family: var(--mono);
  font-size: 15px;
  border-radius: 10px;
  padding: 13px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  /* 44px min target: anything smaller is a miss on a phone. */
  min-height: 46px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* Disabled state uses explicit colours, NOT opacity. Fading a button with
   opacity pulls the label AND its background toward the page colour at the
   same rate, so contrast collapses: white-on-#157575 is 5.48:1 at full
   opacity but only 2.36:1 at .55. Measured replacements below hold >=4.6:1
   while still reading clearly as unavailable. */
button:disabled { cursor: not-allowed; }

.primary { background: var(--accent); color: #fff; font-weight: 700; }
.primary:hover:not(:disabled) { background: var(--accent-dark); }
/* Disabled primary is OUTLINED, not filled. A filled dark-on-grey button was
   legible but read as the primary call to action, so an empty canvas invited a
   dead click on Done. The filled treatment is now reserved for the enabled
   state; disabled keeps label contrast but drops all of the visual weight. */
/* Solid border, not dashed: a dashed outline is the established vocabulary for
   a drop target or an "add new" placeholder, so it read as "put something here"
   rather than "unavailable". The disabled cues are now the flat neutral fill,
   the dropped font weight and the muted label. */
.primary:disabled {
  background: #e6eaee;
  color: #5b6672;            /* 4.66:1 on #e6eaee */
  border-color: #d3d9df;
  font-weight: 400;          /* enabled Done is 700 */
}
.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ghost:disabled { background: #f1f3f5; color: var(--muted); border-color: var(--line); }

/* Turns the disabled Done button from a dead click into an understood state. */
.hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);   /* 5.85:1 on the page background */
  text-align: right;
}
.hint[hidden] { display: none; }

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- play screen --- */
.playhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.prompt-wrap strong {
  font-size: 27px;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.meta { display: flex; align-items: baseline; gap: 14px; font-size: 13px; color: var(--muted); }
.timer {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.timer.urgent { color: var(--danger); }

.canvas-wrap {
  position: relative;
  /* A square that only tracks container width will grow past the fold on short
     or wide viewports — at 760px wide on a 633px-tall window the canvas ran to
     1187px and players had to scroll to reach their own drawing. Capping the
     width by available height keeps the whole square, the prompt and the timer
     on one screen. The subtrahend covers the header, playhead and tool row. */
  width: min(100%, calc(100svh - 230px));
  /* Never shrink below a usable drawing area; scrolling beats a stamp-sized box. */
  min-width: min(100%, 300px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
#canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Without this a finger drag scrolls the page instead of drawing. */
  touch-action: none;
  cursor: crosshair;
}

.tools {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.tools .primary { margin-left: auto; }

.result { margin-top: 18px; }
.scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.scores strong { font-size: 24px; display: block; margin-top: 2px; }

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.sw.ref { background: #9aa4ad; }
.sw.you { background: #111; }
.sw.out { background: var(--danger); }
.sw.in { background: var(--inside); }

/* --- summary --- */
.big-avg { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; }
.big-avg strong { font-size: 52px; letter-spacing: -2px; }
.big-avg span { color: var(--muted); font-size: 16px; }
.big-avg em { margin-left: auto; color: var(--accent); font-style: normal; font-weight: 700; }

.summary { list-style: none; padding: 0; margin: 0 0 22px; }
.summary li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.summary b { font-size: 17px; }
.summary i { color: var(--muted); font-style: normal; font-size: 12px; min-width: 44px; text-align: right; }

.share img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* --- content pages --- */
.prose { max-width: var(--wrap); }
.prose h2 { font-size: 19px; margin: 34px 0 10px; }
.prose h3 { font-size: 15px; margin: 22px 0 6px; }
.prose p { line-height: 1.65; font-size: 15px; color: #26313c; margin: 0 0 12px; }
.prose a { color: var(--accent); }

.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }

/* .prose a is (0,1,1) and would beat a bare .btn (0,1,0), painting the button
   label teal-on-teal. Match the same specificity so the white label wins. */
.prose a.btn,
a.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 10px;
}
.prose a.btn:hover,
a.btn:hover { background: var(--accent-dark); color: #fff; }
.cta { margin: 26px 0 8px; }

.country-hero {
  display: grid;
  gap: 18px;
  margin: 18px 0 8px;
}
.outline {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.outline svg { max-width: 100%; max-height: 340px; width: auto; height: auto; }
.outline figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }

.specs {
  margin: 0;
  display: grid;
  /* Fixed label column: 'WIDTH : HEIGHT' is the longest label and was crowding
     its value when the column was auto-sized. */
  grid-template-columns: 132px 1fr;
  gap: 10px 20px;
  font-size: 14px;
  align-content: start;
}
.specs dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.specs dd { margin: 0; font-weight: 700; }
.specs dd small { font-weight: 400; color: var(--muted); font-size: 11.5px; display: block; }

.grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}
.grid a:hover { border-color: var(--accent); }
/* Thumbnails are now aspect-cropped SVGs, so constrain them to a square box and
   let the shape letterbox inside it -- otherwise a 5:1 Chile blows the row height. */
.mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.mini svg { max-width: 56px; max-height: 56px; width: auto; height: auto; }
.cname { font-size: 12.5px; text-align: center; line-height: 1.3; }

.tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef1f4;
  color: var(--muted);
}
.tag.easy { background: #e6f4ea; color: #1a7f4b; }
.tag.medium { background: #fdf3e0; color: #a06a12; }
.tag.hard { background: #fdeaea; color: #b3261e; }

.prose h2 small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
}

.cols {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  font-size: 14px;
  line-height: 1.9;
}

.tips {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: #26313c;
}
.tips li { margin-bottom: 10px; }

.tablewrap { margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
tbody tr:nth-child(odd) { background: #fff; }

/* On a phone the 4-column table overflowed the viewport (measured 478px wide in
   a 375px window). Rather than a min-width + sideways scroll, restack each row
   as a labelled card -- no horizontal scroll, nothing clipped. */
@media (max-width: 599px) {
  .tablewrap thead { display: none; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td { display: block; width: 100%; }
  .tablewrap tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .tablewrap td {
    border: 0;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .tablewrap td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    flex: 0 0 auto;
  }
  .tablewrap td:first-child {
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .tablewrap td:first-child::before { content: none; }
}

.foot {
  /* The rule was on the padding box, so it ran 18px wider than the content on
     each side while every other divider on the page respects the rail. An inset
     pseudo-element keeps it flush with the footer text. */
  position: relative;
  padding: 20px 18px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
}
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  border-top: 1px solid var(--line);
}
.foot a { color: var(--muted); }
.foot span { margin-left: auto; }

@media (min-width: 680px) {
  main { padding: 34px 18px 30px; }
  h1 { font-size: 34px; }
  .prompt-wrap strong { font-size: 32px; }
  .country-hero { grid-template-columns: 340px 1fr; align-items: start; }
  /* Tall countries (Chile, Norway) get a narrow card instead of a wide one
     they can only fill 15% of. */
  .country-hero.tall { grid-template-columns: 200px 1fr; }
  .cols { columns: 3; }
}

/* ======================================================== panels: board + comments */

.panel {
  max-width: var(--wrap);
  margin: 0 auto;
  /* main already contributes 40px of bottom padding above the first panel, so a
     28px top pad here stacked into a ~96px void under the hero. */
  padding: 14px 18px 8px;
  width: 100%;
}
.panel h2 {
  font-size: 20px;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.panel .sub {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.board { list-style: none; margin: 0; padding: 0; }
.board-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.board-row {
  display: grid;
  grid-template-columns: 34px 1fr auto 58px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  box-shadow: var(--shadow-sm);
  /* Rows stagger in as the board loads. */
  animation: rowIn .32s var(--ease) backwards;
}
.board-row:nth-child(1) { animation-delay: .02s }
.board-row:nth-child(2) { animation-delay: .04s }
.board-row:nth-child(3) { animation-delay: .06s }
.board-row:nth-child(4) { animation-delay: .08s }
.board-row:nth-child(5) { animation-delay: .10s }
.board-row:nth-child(n+6) { animation-delay: .12s }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.board-row .rank {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}
.board-row.top1 .rank { color: var(--gold); }
.board-row.top2 .rank { color: var(--silver); }
.board-row.top3 .rank { color: var(--bronze); }
.board-row.top1 { border-color: #e8d5a3; }

.board-row .who {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-row .pts {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.board-row .when {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

/* ------------------------------------------------------------ submit + comments form */

.submit-box {
  margin: 22px auto 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  max-width: 460px;
}
.submit-box label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.submit-box.done { opacity: .75; }

.row { display: flex; gap: 8px; align-items: center; }
.row.end { justify-content: space-between; margin-top: 8px; }

input[type="text"], textarea {
  flex: 1;
  min-width: 0;
  font: inherit;
  /* Must be >=16px: iOS Safari zooms the whole page when focusing a smaller
     field, which on this layout shoves the canvas off screen. */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(21, 117, 117, .14);
}
input::placeholder, textarea::placeholder { color: #9aa4b0; }

.hint.left { text-align: left; }
#comment-count.near { color: var(--danger); }

.status {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  animation: rowIn .24s var(--ease);
}
.status.err { color: var(--danger); }
.status.ok  { color: var(--ok); }

/* ------------------------------------------------------------------------ comments */

.comments { list-style: none; margin: 18px 0 0; padding: 0; }
.cmt {
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  animation: rowIn .3s var(--ease);
}
.cmt-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.cmt-head strong { font-size: 14px; }
.cmt-head .when { font-size: 12px; color: var(--muted); }
.cmt p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #26313f;
  overflow-wrap: anywhere;
}

#comment-more { display: block; margin: 4px auto 0; }

@media (min-width: 680px) {
  /* Section breaks must read as a clearly bigger step than the ~30px spacing
     inside a section, or the whole page collapses into one flat stack. 40px
     here plus main's 30px bottom pad gives the hero boundary ~70px while
     intra-panel rhythm stays put. */
  .panel { padding: 40px 18px 8px; }
  /* A border-top on the panel would start at its padding box, 18px outside the
     content rail. An inset rule lines up with the headings instead. */
  #comments { position: relative; }
  #comments::before {
    content: "";
    position: absolute;
    top: 0; left: 18px; right: 18px;
    border-top: 1px solid var(--line);
  }
}

/* ============================================================ motion / feedback */

/* Screens fade+lift in so switching between play, result and summary reads as a
   transition rather than a jump cut. */
.screen:not([hidden]) { animation: screenIn .34s var(--ease); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* The result panel is the payoff moment -- give it a distinct entrance. */
.result:not([hidden]) { animation: popIn .38s var(--ease); }
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.97) translateY(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Score counts visually rather than snapping into place. */
#score-val, .big-avg strong { animation: scoreIn .42s var(--ease); }
@keyframes scoreIn {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* Timer urgency: the last ten seconds pulse. .urgent is toggled in game.js. */
#timer.urgent {
  color: var(--danger);
  animation: tick 1s steps(1, end) infinite;
}
@keyframes tick {
  0%, 49%  { opacity: 1; }
  50%, 99% { opacity: .45; }
}

/* Tactile press feedback -- cheap, and makes the UI feel responsive on touch. */
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
button { transition: background .12s var(--ease), border-color .12s var(--ease),
                     color .12s var(--ease), transform .08s var(--ease); }

/* Prompt country name slides in each round so the change is impossible to miss. */
#prompt { display: inline-block; }
#prompt.anim { animation: promptIn .3s var(--ease); }
@keyframes promptIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Summary rows cascade. */
.summary li { animation: rowIn .3s var(--ease) backwards; }
.summary li:nth-child(1) { animation-delay: .04s }
.summary li:nth-child(2) { animation-delay: .10s }
.summary li:nth-child(3) { animation-delay: .16s }
.summary li:nth-child(4) { animation-delay: .22s }
.summary li:nth-child(5) { animation-delay: .28s }

/* Hover lift on interactive cards, pointer devices only (no sticky :hover on
   touch, where it leaves a card stuck in the hovered state after a tap). */
@media (hover: hover) {
  .board-row { transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
  .board-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  /* The countries index renders each country as `.grid a`, not a .card class. */
  .grid a { transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
  .grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* ======================================================== hero illustration */

.hero-fig {
  margin: 30px 0 0;
  padding: 18px 18px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  /* The art is 346x168; letting the card grow past that would leave the SVG
     floating in dead space rather than filling its frame. */
  max-width: 420px;
}
.hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-fig figcaption {
  margin: 12px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 11px;
}

/* Section headings sat at 22-24px against 14px support text, so the jump read as
   a size accident rather than a hierarchy. Adding weight and an accent rule
   makes the level obvious without going bigger. */
.panel h2 {
  font-size: 20px;
  font-weight: 700;
  padding-left: 11px;
  border-left: 3px solid var(--accent);
  line-height: 1.2;
}
.panel .sub {
  font-size: 13.5px;
  max-width: 58ch;
}

/* On desktop the copy only filled the left half and the illustration sat under
   it, leaving a dead column on the right and three ragged right edges. A real
   two-column hero fills the width and puts the payoff next to the promise.
   Below 860px it collapses back to a single stack, which is the majority case
   on mobile. */
@media (min-width: 860px) {
  /* :not([hidden]) is load-bearing. A bare display:grid here outranks the UA's
     [hidden]{display:none}, so the start screen kept its 305px of layout after
     the game began and pushed the canvas below the fold. */
  .screen[data-screen="start"]:not([hidden]) {
    display: grid;
    /* 1fr for the art column would have squeezed the h1 to ~264px and wrapped it
       onto three lines. The copy column needs the larger share; the art shrinks
       from its 420px ideal instead. */
    grid-template-columns: minmax(0, 1fr) 300px;
    /* facts spans both columns as a bottom rail. Confined to the left column it
       wrapped 2 + 1 with 360px of empty space beside it, which read as a bug,
       and it made the left column overshoot the card by ~100px. */
    grid-template-areas:
      "head art"
      "lede art"
      "cta  art"
      "fact fact";
    column-gap: 40px;
    align-items: start;
  }
  .screen[data-screen="start"] h1      { grid-area: head; }
  /* The 62ch cap from the single-column rules is wider than this grid track, so
     the track governs. Fixing the orphaned last line was a copy-length problem,
     not a width problem — narrowing the measure just moved the break. */
  .screen[data-screen="start"] .lede   { grid-area: lede; max-width: none; }
  .screen[data-screen="start"] #start-btn { grid-area: cta; justify-self: start; }
  .screen[data-screen="start"] .facts  { grid-area: fact; margin-top: 26px; }
  .screen[data-screen="start"] .hero-fig {
    grid-area: art;
    max-width: none;   /* the grid track already caps it */
    /* Optically aligns the card with the h1's cap height rather than its box. */
    margin-top: 6px;
  }
}