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

nav.top { margin-left: auto; display: flex; gap: 4px; align-items: center; }

nav.top a {
  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; }

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

.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%; }
}