/* Bricolage Grotesque (SIL OFL 1.1, see /assets/fonts/OFL.txt), self-hosted so no visitor data goes to a font CDN */
@font-face{font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:75% 100%; font-display:swap; src:url(/assets/fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:75% 100%; font-display:swap; src:url(/assets/fonts/bricolage-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --sea:#DCEBE7; --card:#F5FAF8; --ink:#10282F; --ink2:#4B6A6E; --line:#A7C5C1;
  --land:#F2B134; --good:#1E8A5A; --bad:#CC3A55; --near:#D9891A; --focus:#1C6FD6;
  --other:#C3D8D3; --water:#B9D8E6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sea:#0B1D24; --card:#112A33; --ink:#E3F1ED; --ink2:#8FB1B2; --line:#27484F;
    --good:#3CC98A; --bad:#FF6F86; --near:#F2A93B; --focus:#6EB1FF; --other:#1D3A43; --water:#0F3445;
  }
}
:root[data-theme="dark"]{
  --sea:#0B1D24; --card:#112A33; --ink:#E3F1ED; --ink2:#8FB1B2; --line:#27484F;
  --good:#3CC98A; --bad:#FF6F86; --near:#F2A93B; --focus:#6EB1FF; --other:#1D3A43; --water:#0F3445;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--sea); color:var(--ink); min-height:100vh;
  font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:17px; line-height:1.45;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
a{color:inherit}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
[hidden]{display:none!important} /* .btn and friends set display, which would beat the hidden attribute */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

main{width:min(100%,680px); margin:0 auto; padding:16px 18px 48px}
#top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:800; font-size:1.15rem}
.brand svg{width:28px; height:28px}
.meta{display:flex; flex-direction:column; align-items:flex-end; font-size:.85rem; color:var(--ink2); line-height:1.3}
.meta b{color:var(--ink)}
h1{margin:0; font-size:clamp(2.2rem,8vw,3.2rem); line-height:1.05; font-weight:800; font-stretch:92%}
.lede{margin:8px 0 18px; color:var(--ink2); max-width:52ch}

.board{position:relative; background:var(--card); border:2px solid var(--ink); border-radius:8px; overflow:hidden}
.board svg,.board canvas{display:block; width:100%; height:auto}
.steps{display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin:10px 0 6px}
.steps i{height:6px; border-radius:3px; background:var(--line)}
.steps i.on{background:var(--ink)}
.steps i.bad{background:var(--bad)}
.steps i.ok{background:var(--good)}
.hint{margin:4px 0 14px; color:var(--ink2); font-size:.92rem; min-height:1.3em}

.play{display:flex; gap:8px; position:relative}
.field{position:relative; flex:1}
.field input{width:100%; padding:12px 14px; border:2px solid var(--ink); border-radius:10px; background:var(--card)}
.go{padding:0 20px; border:2px solid var(--ink); border-radius:10px; background:var(--ink); color:var(--sea); font-weight:800}
.sug{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; margin:0; padding:4px; list-style:none;
  background:var(--card); border:2px solid var(--ink); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.18)}
.sug li{padding:8px 10px; border-radius:6px; cursor:pointer}
.sug li[aria-selected="true"],.sug li:hover{background:var(--sea)}
.msg{min-height:1.4em; margin:6px 0; font-size:.9rem; color:var(--bad); font-weight:600}

.guesses{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px}
.guesses li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  background:var(--card); border:2px solid var(--line); font-weight:700; animation:pop .25s ease-out}
.guesses li.ok{border-color:var(--good); background:color-mix(in srgb,var(--good) 18%,var(--card))}
.guesses li.bad{border-color:var(--bad)}
.guesses li.near{border-color:var(--near)}
.guesses li small{font-weight:600; color:var(--ink2); white-space:nowrap}
@keyframes pop{from{transform:scale(.96); opacity:.3}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:800;
  background:var(--ink); color:var(--sea); padding:12px 18px; border-radius:10px; border:2px solid var(--ink)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.small{padding:7px 12px; font-size:.9rem}

#result{margin-top:18px; padding:20px; background:var(--card); border:2px solid var(--ink); border-radius:12px}
#result h2{margin:0; font-size:1.7rem}
#result .ans{margin:4px 0 12px; color:var(--ink2)}
#result .ans b{color:var(--ink)}
#result .score{display:flex; align-items:baseline; gap:4px; margin-bottom:10px}
#result .score b{font-size:2.6rem; line-height:1}
#result .score span{color:var(--ink2); font-weight:700}
#result .share{margin:0 0 14px; padding:10px 12px; background:var(--sea); border-radius:8px; font:inherit; font-size:1.1rem; white-space:pre-wrap; letter-spacing:.05em}
#result .row{display:flex; flex-wrap:wrap; gap:8px}
#result .next{margin:14px 0 0; color:var(--ink2); font-size:.92rem}
#result .next b{color:var(--ink); font-variant-numeric:tabular-nums}

footer{margin-top:32px; font-size:.82rem; color:var(--ink2)}
.loading{padding:60px 0; text-align:center; color:var(--ink2)}
@media (prefers-reduced-motion: reduce){ .guesses li{animation:none} }

/* header tools */
.tools{display:flex; align-items:center; gap:8px}
.ib{width:38px; height:38px; border-radius:10px; border:2px solid var(--line); background:var(--card); font-weight:800; font-size:1.1rem; display:grid; place-items:center; padding:0; color:var(--ink)}
.ib:hover{border-color:var(--ink)}
.ib svg{width:20px; height:20px}
@media (max-width:420px){ .meta span{display:none} .meta b{font-size:.74rem; white-space:nowrap} }

/* dialogs */
dialog#tdlg{width:min(92vw,460px); border:2px solid var(--ink); border-radius:16px; background:var(--card); color:var(--ink); padding:24px 22px 22px; box-shadow:10px 10px 0 -2px var(--land)}
dialog#tdlg::backdrop{background:rgba(6,20,26,.55)}
dialog#tdlg h2{margin:0 0 12px; font-size:1.5rem; line-height:1.15; padding-right:28px}
dialog#tdlg .x{position:absolute; top:10px; right:12px; border:0; background:none; font-size:1.8rem; line-height:1; color:var(--ink2); padding:4px}
.how{margin:0 0 14px; padding-left:20px; display:grid; gap:8px}
.small{color:var(--ink2); font-size:.88rem; margin:0 0 16px}
dialog#tdlg .btn{width:100%}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0 6px; text-align:center}
.stats b{display:block; font-size:1.6rem; line-height:1.1; font-variant-numeric:tabular-nums}
.stats span{font-size:.72rem; color:var(--ink2); font-weight:700; line-height:1.2; display:block}
.dh{margin:16px 0 8px; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink2)}
.dist{display:grid; gap:4px}
.dist div{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.85rem}
.dist span{width:1.2em; text-align:right; color:var(--ink2)}
.dist i{font-style:normal; background:var(--ink2); color:var(--sea); padding:1px 8px; border-radius:4px; text-align:right; min-width:24px}
.dist i.now{background:var(--good); color:#fff}
.avg{color:var(--ink2); margin:8px 0 0}
.avg b{color:var(--ink)}
#result .btn{flex:1 1 auto}

/* numbered guess markers (Population & Area): same colour + number on the chart and in the list */
.gb{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#10282F; font-size:.75rem; font-weight:800; margin-right:8px; vertical-align:1px; border:2px solid var(--ink)}

/* colour-blind friendly: blue for right, orange for close, vermilion for wrong */
:root[data-cb="1"]{--good:#0072B2; --near:#E69F00; --bad:#D55E00}
@media (prefers-color-scheme: dark){ :root[data-cb="1"]:not([data-theme="light"]){--good:#56B4E9; --near:#E69F00; --bad:#E8743B} }
:root[data-cb="1"][data-theme="dark"]{--good:#56B4E9; --near:#E69F00; --bad:#E8743B}

/* settings */
.set{display:grid; gap:14px; margin-bottom:16px}
.set label{display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:700}
.set label small{display:block; font-weight:500; color:var(--ink2); font-size:.82rem}
.seg{display:flex; border:2px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{border:0; background:var(--card); padding:7px 11px; font-weight:700; font-size:.85rem}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--sea)}
.sw{appearance:none; width:46px; height:26px; border-radius:13px; background:var(--line); position:relative; cursor:pointer; flex:none}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--card); transition:left .15s}
.sw:checked{background:var(--good)} .sw:checked::after{left:23px}

/* text pages: privacy, terms, credits, contact, study */
main.doc{width:min(100%,760px)}
.doc h2{font-size:1.35rem; margin:28px 0 8px; line-height:1.2}
.doc h3{font-size:1.05rem; margin:18px 0 6px}
.doc p,.doc li{color:var(--ink); max-width:68ch}
.doc p.muted,.doc .muted{color:var(--ink2)}
.doc ul{padding-left:20px; display:grid; gap:6px}
.doc table{border-collapse:collapse; width:100%; font-size:.92rem; margin:8px 0}
.doc th,.doc td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{color:var(--ink2); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
.doc .box{background:var(--card); border:2px solid var(--line); border-radius:12px; padding:14px 16px; margin:12px 0}
.legal{margin-top:6px}