:root{--bg:#fff7ec;--ink:#1f2a44;--sea:#bfe3f7;--card:#fff;--orange:#ff7a1a;--green:#2fb36b;--red:#e5484d;--line:#fff;--muted:#6b7590}
@media (prefers-color-scheme:dark){:root{--bg:#141a2b;--ink:#eef1fb;--sea:#1d3b57;--card:#1f2740;--muted:#9aa4c4;--line:#141a2b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.4 "Nunito","Trebuchet MS",system-ui,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
h1{margin:0;font-size:24px}h2{margin:.6em 0 .4em}
main{max-width:1100px;margin:0 auto;padding:0 16px 40px}
.card{background:var(--card);border-radius:20px;padding:24px;max-width:640px;margin:20px auto;box-shadow:0 6px 24px #0001}
input{font:inherit;padding:10px 14px;border-radius:12px;border:2px solid #0002;background:transparent;color:inherit;width:100%}
button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:12px 18px;background:var(--orange);color:#fff;font-weight:700;transition:transform .1s}
button:hover{transform:translateY(-2px)}
button.ghost{background:transparent;color:var(--muted);border:2px solid #0002}
.modes{display:grid;gap:12px}
.modes button{text-align:left;background:var(--bg);color:var(--ink);border:2px solid #0002;display:flex;flex-direction:column;font-size:19px}
.modes button small{font-weight:400;color:var(--muted);font-size:15px}
.modes button:hover{border-color:var(--orange)}
.hint{color:var(--muted);font-size:14px}
.bar{display:flex;gap:14px;align-items:center;margin:8px 0}
#progress{flex:1;height:14px;background:#0001;border-radius:9px;overflow:hidden}
#progress i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}
#score{font-weight:800}
#question{font-size:28px;font-weight:800;margin:10px 0 14px;min-height:42px}
.stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:20px;align-items:start}
@media (max-width:760px){.stage{grid-template-columns:1fr}}
#mapwrap{background:var(--sea);border-radius:20px;padding:6px;box-shadow:0 6px 24px #0001}
svg{width:100%;height:auto;max-height:78vh;display:block}
.prov{stroke:var(--line);stroke-width:1.6;stroke-linejoin:round;transition:fill .2s,opacity .2s}
.click .prov{cursor:pointer}.click .prov:hover{filter:brightness(1.12)}
.prov.dim{opacity:.35}
.prov.hl{stroke:var(--orange);stroke-width:5}
.prov.good{fill:var(--green)!important}.prov.bad{fill:var(--red)!important}
.dot{fill:#1f2a44;stroke:#fff;stroke-width:3}.dot.good{fill:var(--green)}.dot.bad{fill:var(--red)}.dot.hl{fill:var(--orange);r:13}
.hit{fill:transparent;cursor:pointer}
.click .hit:hover+.dot{fill:var(--orange)}
.lbl{font-weight:800;font-size:28px;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;fill:#1f2a44;pointer-events:none}
#choices{display:grid;gap:10px}
#choices button{background:var(--card);color:var(--ink);border:3px solid #0002;font-size:20px;text-align:left}
#choices button:hover{border-color:var(--orange)}
#choices button.good{background:var(--green);color:#fff;border-color:var(--green)}
#choices button.bad{background:var(--red);color:#fff;border-color:var(--red)}
#feedback{margin:14px 0;font-size:20px;font-weight:700;min-height:56px}
#feedback.good{color:var(--green)}#feedback.bad{color:var(--red)}
#next{width:100%;background:var(--green);font-size:20px}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#end-stars{font-size:48px;letter-spacing:6px}
#end-weak li{margin:2px 0}
.row{display:flex;gap:12px;margin-top:16px}

#progress-btn{margin-top:6px}.card.wide{max-width:820px}
.ptopic{margin:14px 0 4px;font-weight:800}
.prow{display:grid;grid-template-columns:170px 1fr 70px;gap:10px;align-items:center;margin:3px 0;font-size:15px}
.pbar{height:12px;border-radius:7px;background:#0001;overflow:hidden}.pbar i{display:block;height:100%}
.shp .vis.area{fill:rgba(128,128,128,.001);stroke:none}
.shp .vis.line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.shp .hit{fill:none;stroke:transparent;stroke-linecap:round;stroke-width:26}
.shp.rivier .vis.line,.shp.kanaal .vis.line{stroke:#2f80c9;stroke-width:5}
.shp.kanaal .vis.line{stroke-dasharray:14 6}
.shp.under .vis.line{stroke:var(--sea)}
.shp.rline .vis.line{stroke:var(--ink);stroke-width:6}
.shp .vis.dot{fill:var(--ink);stroke:#fff;stroke-width:3}
.shp.hl .vis.area{fill:var(--orange);stroke:var(--orange);stroke-width:3}
.shp.hl,.shp.good,.shp.bad{opacity:.7}
.shp.hl .vis.line{stroke:var(--orange)!important;stroke-width:10!important;stroke-dasharray:none}
.shp.hl .vis.dot{fill:var(--orange);r:15}
.shp.good .vis.area{fill:var(--green);stroke:var(--green);stroke-width:3}
.shp.good .vis.line{stroke:var(--green)!important;stroke-width:10!important;stroke-dasharray:none}
.shp.good .vis.dot{fill:var(--green);r:15}
.shp.bad .vis.area{fill:var(--red);stroke:var(--red);stroke-width:3}
.shp.bad .vis.line{stroke:var(--red)!important;stroke-width:10!important}
.shp.bad .vis.dot{fill:var(--red);r:15}
.click .shp:hover .vis.area{fill:rgba(255,122,26,.35);stroke:rgba(255,122,26,.5);stroke-width:3}
.click .shp:hover .vis.line{stroke:var(--orange)}
.click .shp:hover .vis.dot{fill:var(--orange)}
.click .shp{cursor:pointer}

.ping{pointer-events:none}
.ping circle{fill:none;stroke:var(--orange);stroke-width:6}
.ping .c{fill:var(--orange);stroke:#fff;stroke-width:3}
.ping .r1,.ping .r2{transform-box:fill-box;transform-origin:center;animation:ping 1.6s ease-out infinite}
.ping .r2{animation-delay:.8s}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}

.pill{background:var(--card);color:var(--ink);border:2px solid #0002;padding:6px 14px;font-size:17px}
.pill:hover{border-color:var(--orange)}
.seg{display:flex;gap:6px;margin:8px 0 14px}.seg button{flex:1;background:transparent;color:var(--muted);border:2px solid #0002;font-size:16px}
.seg button.on{background:var(--orange);color:#fff;border-color:var(--orange)}
#screen-auth label{display:block;margin:10px 0;font-weight:700}#screen-auth label input{margin-top:4px;font-weight:400}
#auth-pin{letter-spacing:.5em;font-size:22px;text-align:center}
.lab{display:block;font-weight:700;margin:10px 0 4px}
#avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
#avatars button{background:var(--bg);border:3px solid transparent;font-size:28px;padding:6px}
#avatars button.on{border-color:var(--orange);background:var(--card)}
#auth-err{color:var(--red);font-weight:700;min-height:1.4em;margin:6px 0}
.wide-btn{width:100%;font-size:19px}
.profile-head{display:flex;gap:14px;align-items:center}.profile-head h2{margin:0}#p-avatar{font-size:52px}
.row .ghost{margin-left:auto}

.nav{display:flex;gap:8px}
.brow{display:grid;grid-template-columns:44px 1fr 100px;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;font-size:17px}
.brow.head{font-size:13px;color:var(--muted);padding-top:0;padding-bottom:2px}
.brow:nth-child(even){background:#0000000d}
.brow.me{background:rgba(255,122,26,.18);font-weight:800;outline:2px solid var(--orange)}
.brow .rk{font-size:22px;text-align:center}.brow .pts{font-weight:800;text-align:right}
.brow .g{color:var(--green);text-align:right}.brow .w{color:var(--red);text-align:right}
.brow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gap{text-align:center;color:var(--muted);line-height:.8}
@media (max-width:520px){.brow{grid-template-columns:34px 1fr 80px;font-size:15px;padding:6px}}

#home-link{cursor:pointer}#home-link:hover{color:var(--orange)}

.pill.out{color:var(--muted)}.pill.out:hover{color:var(--red);border-color:var(--red)}
@media (max-width:620px){#home-link{font-size:18px}.pill{padding:6px 10px;font-size:15px}}

/* click margin for small regions (islands, Haarlemmermeer, Biesbosch...) so kids don't have to hit them pixel-perfectly */
.shp[data-t="regions"] .vis.area{stroke:transparent;stroke-width:16px;stroke-linejoin:round}
.shp[data-sh="randstad"] .vis.area,.shp[data-sh="veluwe"] .vis.area,.shp[data-sh="twente"] .vis.area{stroke:none}
.shp.hl[data-t="regions"] .vis.area,.shp.good[data-t="regions"] .vis.area,.shp.bad[data-t="regions"] .vis.area{stroke-width:3px}

.lbl.wrong{fill:var(--red)}