/* Draw the Flag — mobile-first. Most traffic to game sites arrives on a phone,
   so the playable area is sized to fit above the fold on a small screen first
   and only then allowed to grow. */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --ink: #16203a;
  --ink-soft: #5b667f;
  --line: #e2e7f2;
  --brand: #2f6df6;
  --brand-ink: #1b4fd0;
  --good: #1a9d5a;
  --warn: #e0912f;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(22, 32, 58, .06), 0 8px 24px rgba(22, 32, 58, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1420;
    --surface: #171e2e;
    --ink: #e8edf8;
    --ink-soft: #9aa6bf;
    --line: #26304a;
    --brand: #5b8cff;
    --brand-ink: #7ba3ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); }
a:hover { color: var(--brand-ink); }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

/* --- header --------------------------------------------------------------- */

header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

.logo {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Wrapping to two lines pushes the game below the fold on a narrow phone. */
  white-space: nowrap;
}

@media (max-width: 400px) {
  .logo { font-size: 15px; gap: 6px; }
  nav.top a { padding: 7px 7px; font-size: 13px; }
}

.logo svg { display: block; }

/* The nav must never wrap: a second header line pushes the game below the
   fold on a phone. Labels stay on one line, the nav itself shrinks and, on a
   screen too narrow for the longest translations, scrolls sideways instead. */
nav.top { margin-left: auto; display: flex; gap: 4px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
nav.top::-webkit-scrollbar { display: none; }

nav.top a {
  white-space: nowrap;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 7px 10px;
  border-radius: 8px;
}

nav.top a:hover { background: var(--bg); color: var(--ink); }
nav.top a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Header language menu: a <details> so it needs no script. The list is
   absolutely positioned so opening it never changes the header height. */
details.lang { position: relative; flex-shrink: 0; }
details.lang summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: 7px 8px;
  border-radius: 8px;
  user-select: none;
}
details.lang summary::-webkit-details-marker { display: none; }
details.lang summary::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}
details.lang summary:hover, details.lang[open] summary { background: var(--bg); color: var(--ink); }
details.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 30;
}
details.lang li a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-soft);
}
details.lang li a:hover { background: var(--bg); color: var(--ink); }
details.lang li a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (max-width: 480px) {
  /* Icon-only logo: the wordmark is the one thing that can go without losing
     a link, and it buys the room the three nav labels plus the menu need. */
  .logo span { display: none; }
  header.site .wrap { gap: 6px; }
  nav.top a { padding: 7px 6px; font-size: 13px; }
}
@media (max-width: 400px) {
  nav.top a { padding: 7px 5px; font-size: 12px; }
  details.lang summary { padding: 7px 5px; font-size: 12px; }
}

/* --- game ----------------------------------------------------------------- */

.game { padding: 18px 0 8px; }

.prompt {
  text-align: center;
  margin-bottom: 12px;
}

.prompt .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.prompt h1, .prompt .country {
  margin: 0;
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.prompt .prompt-alt {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.prompt .prompt-alt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.board-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-inline: auto;
}

/* Hint sits on the empty canvas and disappears on the first stroke — new players
   otherwise stare at a white rectangle wondering whether it is interactive. */
.canvas-holder::after {
  content: attr(data-hint);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 15px;
  pointer-events: none;
  opacity: .75;
  transition: opacity .25s;
}

.canvas-holder.touched::after { opacity: 0; }

/* The canvas is capped by viewport height, not just width: the submit button has
   to stay above the fold or players scroll to find out they can score. Sizing by
   width (derived from the height budget) keeps the aspect ratio intact — setting
   max-height alongside aspect-ratio would let width win and distort it. */
.canvas-holder {
  position: relative;
  width: min(100%, calc(46vh * 3 / 2));
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

#board, #reference {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  display: block;
}

/* --- tools ---------------------------------------------------------------- */

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease;
}

.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.14); }

.tool-group { display: flex; gap: 6px; margin-left: auto; }

.tool {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 9px;
  cursor: pointer;
}

.tool:hover { color: var(--ink); border-color: var(--ink-soft); }
.tool[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tool svg { display: block; pointer-events: none; }

.size-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; }
.size-row input { flex: 1; accent-color: var(--brand); }
.size-row label { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  font-family: inherit;
}

.btn:hover { background: var(--brand-ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-soft); background: var(--bg); }
.btn.block { width: 100%; }

.actions { display: flex; gap: 8px; margin-top: 12px; }
.actions .btn { flex: 1; }

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

.result { display: none; }
.result.show { display: block; }

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.compare figure { margin: 0; }
.compare figcaption { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 5px; }

.compare .canvas-holder { aspect-ratio: 3 / 2; width: 100%; }
.compare canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.score-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 2px;
}

.score-line .pct { font-size: 42px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.score-line .grade {
  font-size: 15px; font-weight: 700;
  background: var(--brand); color: #fff;
  border-radius: 999px; padding: 3px 12px;
}

.score-note { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 6px 0 0; }

.streak-row {
  display: flex; justify-content: center; gap: 22px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}

.streak-row div { text-align: center; }
.streak-row b { display: block; font-size: 20px; }
.streak-row span { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }

/* --- ad slot -------------------------------------------------------------- */

.ad-slot {
  margin: 18px 0;
  min-height: 90px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 12px;
  background: var(--surface);
}

/* --- content -------------------------------------------------------------- */

.content { padding: 8px 0 40px; }
.content h2 { font-size: 22px; letter-spacing: -.015em; margin: 30px 0 10px; }
.content h3 { font-size: 17px; margin: 22px 0 6px; }
.content p, .content li { color: var(--ink); }
.content ul, .content ol { padding-left: 20px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.card-grid a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}

.card-grid a:hover { border-color: var(--brand); }
.card-grid small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--brand); font-weight: 700; }
.faq details[open] summary::before { content: "− "; }
.faq p { margin: 8px 0 0; color: var(--ink-soft); }

.lang-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 12px 0; }
.lang-list a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; font-size: 14px; color: var(--ink);
}
.lang-list a:hover { border-color: var(--brand); }

footer.site {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

footer.site a { color: var(--ink-soft); }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 20px 34px; }
footer.site .disclaimer { margin-top: 16px; font-size: 12.5px; line-height: 1.5; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 720px) {
  .game { padding: 26px 0 10px; }
  .canvas-holder { aspect-ratio: 5 / 3; width: min(100%, calc(44vh * 5 / 3)); }
  /* Keep the toolbar the same width as the canvas it controls. */
  .game > .board-shell { max-width: calc(44vh * 5 / 3 + 26px); }
  .compare .canvas-holder { aspect-ratio: 5 / 3; width: 100%; }
}