:root {
  --bg: #f4f2ee; --panel: #ffffff; --ink: #1d232b; --muted: #6a7380; --line: #dcd8d0;
  --accent: #2f5bd3; --accent-ink: #fff; --accent-soft: #c9d6fb;
  --county: #f7f5f0; --county-stroke: #9f988c; --voiv-stroke: #3b3f46;
  --hover: #c9d6fb; --ok: #2e9e5b; --ok-soft: #d4f0de; --ok-ink: #17603a;
  --bad: #d1443b; --bad-soft: #f8dcd9; --bad-ink: #8e231c;
  --m0: #e9e6df; --m1: #f0a79f; --m2: #f3d58a; --m3: #3fa564;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; }
button { font: inherit; cursor: pointer; }

.screen { max-width: 1400px; margin: 0 auto; padding: 16px; min-height: 100%; display: flex; flex-direction: column; }
.frame { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.06); flex: 1; display: flex; flex-direction: column; }

.brand { font-weight: 700; }
.brand span { color: var(--accent); }
.spacer { flex: 1; }
.small { font-size: 13px; color: var(--muted); }
.h { font-size: 14px; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.chip { background: var(--bg); border-radius: 999px; padding: 3px 10px; color: var(--muted); white-space: nowrap; }
.chip b { color: var(--ink); }
.filter-chip { background: var(--accent-soft); color: var(--ink); }
.progress { width: 140px; height: 8px; background: var(--m0); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--m3); transition: width .3s; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--bg); filter: none; }
.btn.danger { background: var(--bad); }
.btn.sm { padding: 6px 10px; font-size: 14px; }
.btn kbd { font: 11px ui-monospace, Menlo, monospace; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 0 5px; }

/* drill / progress layout */
.app { display: grid; grid-template-columns: 1fr 340px; flex: 1; min-height: 0; }
/* touch-action: none on the whole map area (also its buttons and hint), so a finger that lands
   there never starts the browser's own page zoom or scroll in the middle of a pinch. */
.mapwrap { position: relative; background: linear-gradient(#fbfaf7, #f3f1ec); min-height: 420px; overflow: hidden; touch-action: none; }
.mapwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.mapwrap svg.dragging { cursor: grabbing; }
.side { border-left: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }
.zoom { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 17px; color: var(--ink); }
.zoom button:hover { background: var(--bg); }
.maphint { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: var(--muted); pointer-events: none; }
.maphint.legend { background: rgba(255,255,255,.88); padding: 6px 8px; border-radius: 8px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 5px 8px; border-radius: 6px; max-width: 240px; z-index: 3; }
.tip b { display: block; font-size: 13px; }

/* map */
.county { fill: var(--county); stroke: var(--county-stroke); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s; }
.interactive .county:hover { fill: var(--hover); }
.county.out { fill: #ece9e3; cursor: default; }
.county.ok { fill: var(--ok); }
.county.bad { fill: var(--bad); }
.interactive .county.ok:hover { fill: var(--ok); }
.interactive .county.bad:hover { fill: var(--bad); }
.county.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { fill: var(--ok-soft); } }
.voiv { fill: none; stroke: var(--voiv-stroke); stroke-width: 1.3; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
.maplabel { fill: var(--ink); text-anchor: middle; dominant-baseline: middle; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: .3em; stroke-linejoin: round; }
.vlabel { fill: var(--muted); text-anchor: middle; pointer-events: none; font-weight: 600; letter-spacing: .03em; paint-order: stroke; stroke: rgba(255,255,255,.85); }
.ring { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.ring.ok { stroke: var(--ok); animation: ring 1.1s ease-in-out infinite; }
.ring.bad { stroke: var(--bad); }
@keyframes ring { 50% { stroke-opacity: .25; } }

/* sea colour on country maps */
.world .mapwrap, .world .start .right { background: linear-gradient(#dcebf6, #cfe2f1); }
.inset { fill: #d4e5f2; stroke: #8fa6b8; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.bg { fill: #e6e3dc; stroke: #cdc8be; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
.county.marker { stroke: #6f6a61; stroke-width: 1; }
.tip-alt { display: block; opacity: .75; font-size: 11px; margin-bottom: 2px; }

/* game picker */
.games { display: flex; flex-wrap: wrap; gap: 6px; }
.game-tab { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 13px; }
.game-tab:hover { background: var(--bg); }
.game-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* side panel pieces */
.steps { display: flex; gap: 6px; font-size: 13px; }
.steps span { flex: 1; text-align: center; padding: 5px 4px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.steps span.on { background: var(--accent); color: var(--accent-ink); }
.steps span.ok { background: var(--ok-soft); color: var(--ok); }
.steps span.bad { background: var(--bad-soft); color: var(--bad); }
.steps span.skip { opacity: .5; }
.task { background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.task .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.task .name { font-size: 22px; font-weight: 700; margin: 2px 0; line-height: 1.2; }
.task .voiv { color: var(--muted); }
.task .alt { color: var(--muted); font-size: 13px; margin: -2px 0 4px; }
.task .flag { margin-right: 8px; }
.hidden-voiv { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--line); color: var(--muted); font-size: 12px; }
.check kbd { font: 11px ui-monospace, Menlo, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: var(--m0); color: var(--muted); margin-top: 6px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.opt kbd { font: 12px ui-monospace, Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.opt:not(:disabled):hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--hover); }
.opt:disabled { cursor: default; }
.opt.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-ink); font-weight: 600; }
.opt.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-ink); text-decoration: line-through; }
.msg { border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.msg.ok { background: var(--ok-soft); color: var(--ok-ink); }
.msg.bad { background: var(--bad-soft); color: var(--bad-ink); }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat { background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.stat b { display: block; font-size: 18px; }
.stat span { font-size: 12px; color: var(--muted); }

/* countdown bar on the Next button after a correct answer */
.next-btn { position: relative; overflow: hidden; }
.next-btn.auto::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.75); transform-origin: left; animation: countdown var(--auto-ms) linear forwards; }
@keyframes countdown { to { transform: scaleX(0); } }

/* progress */
.vlist { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.vrow { display: grid; grid-template-columns: 1fr 90px 48px; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; background: none; text-align: left; color: var(--ink); font-size: 13px; }
.vrow:hover { background: var(--bg); }
.vrow.active { border-color: var(--accent); background: #eef2fd; font-weight: 600; }
.bar { height: 8px; border-radius: 9px; background: var(--m0); display: flex; overflow: hidden; }
.bar i { display: block; height: 100%; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }

/* start */
.start { display: grid; grid-template-columns: 1fr 1fr; }
.start .left { padding: 40px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.start h1 { font-size: 30px; margin: 0; line-height: 1.15; }
.players { display: flex; flex-direction: column; gap: 8px; }
.player { cursor: pointer; display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.player:hover { background: #fafbff; }
.player.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--hover); }
.start-caption { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); text-align: center; }
.start-caption b { color: var(--ink); }
.start-caption .legend { font-size: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; }
.player .mini { height: 6px; background: var(--m0); border-radius: 9px; overflow: hidden; margin-top: 4px; }
.player .mini i { display: block; height: 100%; background: var(--m3); }
.player .del { border: 0; background: none; color: var(--muted); font-size: 18px; padding: 4px 6px; border-radius: 6px; }
.player .del:hover { background: var(--bad-soft); color: var(--bad); }
.newp { display: flex; gap: 8px; }
.newp input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font: inherit; background: var(--panel); color: var(--ink); }
.start .right { background: linear-gradient(135deg, #e8eefc, #f6f3ec); display: grid; place-items: center; padding: 24px; position: relative; min-height: 420px; }
.start .right svg { width: 100%; height: 100%; max-height: 560px; }
.start .right .county { cursor: default; }

.account { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.account p { margin: 0; flex: 1 1 220px; }
.account b { color: var(--ink); }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.langs { display: flex; gap: 4px; }
.lang { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.lang.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.credits { margin: 0; font-size: 11px; color: var(--muted); }
.credits a { color: inherit; }
.privacy-strip { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); box-sizing: border-box; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 9; }
.privacy-strip p { margin: 0; flex: 1 1 320px; font-size: 13px; }
.modal.privacy { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.modal.privacy p { margin: 0 0 10px; }
.modal.privacy b { color: var(--ink); }
.modal.privacy a, .credits a[data-open-privacy] { color: var(--accent); }
.login-cookie { margin: 12px 0 0; }
.login label { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.login input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-weight: 400; background: var(--panel); color: var(--ink); }
.login-error { margin: 12px 0 0; font-size: 13px; color: var(--bad); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 20; }
.toast.error { background: var(--bad); }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(20,24,30,.35); display: grid; place-items: center; z-index: 10; }
.modal { background: var(--panel); border-radius: 14px; padding: 22px; width: min(380px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h2 { margin: 0 0 6px; font-size: 18px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 860px) {
  .screen { padding: 8px; }
  .app, .start { grid-template-columns: 1fr; }
  .mapwrap { min-height: 60vh; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
  .start .right { display: none; }
  .start .left { padding: 24px 16px; }
}

/* Phones: the game screen fits the visible screen (dvh leaves out the browser's own bars), the
   question sits above the map with its buttons, and the map takes the rest. Stats and helper
   lines are left out to make room; the map's own hint still says how to zoom. */
@media (max-width: 600px) {
  #screen-drill { height: 100vh; height: 100dvh; min-height: 0; padding: 0; }
  #screen-drill .frame { border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
  #screen-drill .topbar { gap: 6px; padding: 6px 10px; font-size: 12px; }
  #screen-drill .topbar .chip { padding: 2px 8px; }
  #screen-drill .topbar .btn.sm { padding: 4px 8px; font-size: 12px; }
  #screen-drill .progress { width: 70px; }
  #screen-drill .app { display: flex; flex-direction: column; }
  /* The panel wraps as a row: the question card on its own line, then "hide region" and
     "I don't know" side by side; after an answer the checkbox goes, and the message and the
     Next button take full lines. */
  #screen-drill .side { order: -1; flex: none; overflow: visible; padding: 6px 10px 8px; gap: 6px 10px;
    flex-direction: row; flex-wrap: wrap; align-items: center; border-top: 0; border-bottom: 1px solid var(--line); }
  #screen-drill .side > * { flex: 1 1 100%; }
  #screen-drill .side > .check { flex: 1 1 auto; margin: 0; }
  #screen-drill .side > #dont-know { flex: 0 0 auto; }
  #screen-drill .side:has(.msg) > .check { display: none; }
  #screen-drill .side .stats, #screen-drill .side .spacer, #screen-drill .side p.small, #screen-drill .side kbd { display: none; }
  /* The question card: the name on one line, the details on one smaller line below it. */
  #screen-drill .task { padding: 6px 10px; }
  #screen-drill .task .lbl { display: none; }
  #screen-drill .task .name { font-size: 17px; margin: 0; }
  #screen-drill .task .alt, #screen-drill .task .voiv { display: inline; font-size: 13px; margin: 0; }
  #screen-drill .task .voiv + .voiv::before, #screen-drill .task .alt + .voiv::before { content: ' · '; }
  #screen-drill .task .badge { margin: 0 0 0 6px; vertical-align: 1px; font-size: 10px; }
  #screen-drill .msg { padding: 6px 10px; font-size: 13px; }
  #screen-drill .side .btn { padding: 7px 14px; }
  #screen-drill .mapwrap { flex: 1; min-height: 0; }
}