/* 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;
  --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 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  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%;
  max-width: 720px;
  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; }
.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;
  width: 100%;
  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: 760px; }
.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 {
  border-top: 1px solid var(--line);
  padding: 20px 18px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.foot a { color: var(--muted); }
.foot span { margin-left: auto; }

@media (min-width: 680px) {
  main { padding: 34px 18px 56px; }
  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: 760px;
  margin: 0 auto;
  padding: 28px 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) {
  .panel { padding: 40px 18px 8px; }
  .panel h2 { font-size: 24px; }
}

/* ============================================================ 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); }
}