:root{
  --page:#f6f5f1; --panel:#fffefb; --ink:#242b31; --ink-soft:#5c666e; --hair:#d8d5cb;
  --land:#e9e3d1; --land-edge:#cdc4a9; --water:#b7cad4; --water-edge:#8fa8b5;
  --mark:#25333c; --mark-text:#fbf9f3; --accent:#2f6d6a; --accent-soft:#e2ecea;
  --slot:#efece2; --ok:#2c6e49; --ok-bg:#e3efe6; --bad:#a3392b; --bad-bg:#f6e5e1;
}
@media (prefers-color-scheme:dark){
  :root{ --page:#14181c; --panel:#1b2126; --ink:#e6e3da; --ink-soft:#9aa5ad; --hair:#2f373d;
    --land:#2b2f28; --land-edge:#3d4438; --water:#1d2c34; --water-edge:#2f4552;
    --mark:#e9e4d6; --mark-text:#161c20; --accent:#7cc0ba; --accent-soft:#23312f;
    --slot:#232a30; --ok:#8fd0a5; --ok-bg:#1e2f24; --bad:#e79b8c; --bad-bg:#33211e; }
}
:root[data-theme="dark"]{ --page:#14181c; --panel:#1b2126; --ink:#e6e3da; --ink-soft:#9aa5ad; --hair:#2f373d;
  --land:#2b2f28; --land-edge:#3d4438; --water:#1d2c34; --water-edge:#2f4552;
  --mark:#e9e4d6; --mark-text:#161c20; --accent:#7cc0ba; --accent-soft:#23312f;
  --slot:#232a30; --ok:#8fd0a5; --ok-bg:#1e2f24; --bad:#e79b8c; --bad-bg:#33211e; }
:root[data-theme="light"]{ --page:#f6f5f1; --panel:#fffefb; --ink:#242b31; --ink-soft:#5c666e; --hair:#d8d5cb;
  --land:#e9e3d1; --land-edge:#cdc4a9; --water:#b7cad4; --water-edge:#8fa8b5;
  --mark:#25333c; --mark-text:#fbf9f3; --accent:#2f6d6a; --accent-soft:#e2ecea;
  --slot:#efece2; --ok:#2c6e49; --ok-bg:#e3efe6; --bad:#a3392b; --bad-bg:#f6e5e1; }

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  line-height:1.5;padding:20px 20px 48px}
.wrap{max-width:1800px;margin:0 auto;display:flex;flex-direction:column;gap:34px}
@media (max-width:700px){body{padding:12px 12px 32px}section{padding:14px}}
header{display:flex;flex-direction:column;gap:6px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.eyebrow{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:600}
h1{font-size:clamp(1.55rem,3.4vw,2.2rem);margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--ink-soft);font-size:1rem;max-width:70ch;margin:0}
.divpick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:.85rem}
.divpick label{color:var(--ink-soft);font-weight:600}
.divpick select{font:inherit;font-size:.85rem;padding:5px 8px;border:1px solid var(--hair);
  border-radius:3px;background:var(--panel);color:var(--ink);cursor:pointer}
.divpick select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.divcount{color:var(--ink-soft);font-size:.8rem}
.summerlink{margin-top:4px;padding-top:10px;border-top:1px solid var(--hair)}
.divhide{display:none!important}
section{background:var(--panel);border:1px solid var(--hair);border-radius:3px;padding:20px}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:4px}
h2{font-size:1.26rem;margin:0;font-weight:600}
.src{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.74rem;color:var(--ink-soft);
  letter-spacing:.03em;background:var(--accent-soft);padding:2px 8px;border-radius:2px}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:26px;align-items:start;margin-top:14px}
.split.narrowmap{grid-template-columns:minmax(0,.62fr) minmax(300px,1fr)}
/* portrait maps would run absurdly tall in a wide column - cap them */
.split.narrowmap .mapcol{max-width:620px}
@media (max-width:860px){.split,.split.narrowmap{grid-template-columns:1fr}
  .split.narrowmap .mapcol{max-width:none}}
figure{margin:0}
.mapcol{display:flex;flex-direction:column;gap:0;min-width:0}
.trayblock{position:sticky;bottom:8px;background:var(--panel);padding-top:4px}
svg{width:100%;height:auto;display:block;background:var(--water);
  border:1px solid var(--land-edge);border-radius:2px}
.land{fill:var(--land)}
.water{fill:var(--water);stroke:var(--water-edge);stroke-width:.8}
.river{fill:none;stroke:var(--water-edge);stroke-width:2.2;stroke-linecap:round}
.mk{fill:var(--mark);stroke:var(--panel);stroke-width:1.6}
.mklet{fill:var(--mark-text);font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;
  text-anchor:middle;letter-spacing:.02em}
.leader{stroke:var(--mark);stroke-width:1;opacity:.55}
.truept{fill:var(--mark);opacity:.75}
.orient{fill:var(--ink-soft);font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;
  font-style:italic;text-anchor:middle;opacity:.85}
.compass circle{fill:none;stroke:var(--ink-soft);stroke-width:1;opacity:.4}
.compass line{stroke:var(--ink-soft);stroke-width:1;opacity:.55}
.compass .needle{fill:var(--ink-soft);opacity:.75;stroke:none}
.compass text{fill:var(--ink-soft);font-family:ui-sans-serif,system-ui,sans-serif;
  font-weight:700;opacity:.9}
.mklabel{display:none;fill:var(--accent);font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:9px;font-weight:700;paint-order:stroke;stroke:var(--panel);stroke-width:3px;
  stroke-linejoin:round}
section.revealed .mklabel{display:block}
/* label size is in user units, so it must shrink on the zoomed-in portrait maps
   to render at the same on-screen size as the wide maps */
section[data-quiz="2"] .mklabel{font-size:6px;stroke-width:2px}
section[data-quiz="4"] .mklabel{font-size:6.5px;stroke-width:2.2px}
section[data-quiz="2"] .orient{font-size:7px}
section[data-quiz="4"] .orient{font-size:7.5px}
section.revealed .mk{opacity:.55}

.quiz{font-family:ui-sans-serif,system-ui,sans-serif}
.quiz h3{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  margin:0 0 8px;font-weight:600}
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:600;padding:0 8px 6px 0;border-bottom:1px solid var(--hair)}
td{padding:4px 8px 4px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
td.nm{font-weight:600;white-space:nowrap}
td.note{color:var(--ink-soft);font-size:.83rem}
.slot{width:46px;padding:4px 6px 4px 0}
.dropzone{width:38px;height:31px;border:1.5px dashed var(--land-edge);border-radius:4px;
  background:var(--slot);display:flex;align-items:center;justify-content:center;transition:border-color .12s,background .12s}
.dropzone.over{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}
.dropzone.filled{border-style:solid;border-color:transparent;background:transparent}
tr.right .dropzone{box-shadow:0 0 0 2px var(--ok)}
tr.wrong .dropzone{box-shadow:0 0 0 2px var(--bad)}
tr.right td.nm{color:var(--ok)}
tr.wrong td.nm{color:var(--bad)}

.tile{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.86rem;
  min-width:34px;height:29px;padding:0 7px;border:none;border-radius:4px;cursor:grab;
  background:var(--mark);color:var(--mark-text);letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;touch-action:none}
.tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tile.sel{outline:3px solid var(--accent);outline-offset:2px}
.tile.dragging{opacity:.45}

.trayhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:16px 0 6px}
.trayhead h3{margin:0}
.hint{font-size:.76rem;color:var(--ink-soft)}
.tray{display:flex;flex-wrap:wrap;gap:6px;min-height:41px;padding:6px;border:1.5px dashed var(--land-edge);
  border-radius:4px;background:var(--slot)}
.tray.over{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
button.act{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.82rem;font-weight:600;
  padding:7px 13px;border-radius:3px;cursor:pointer;border:1px solid var(--ink);
  background:var(--ink);color:var(--panel)}
button.act.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
button.act:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lock{display:flex;align-items:center;gap:8px}
.lock[hidden]{display:none}
.pwlab{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft);
  font-family:ui-sans-serif,system-ui,sans-serif}
.pw{font:inherit;font-size:.82rem;padding:5px 7px;border:1px solid var(--hair);border-radius:3px;
  background:var(--panel);color:var(--ink)}
.pw:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.score{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.85rem;font-weight:600;
  padding:6px 10px;border-radius:3px;background:var(--accent-soft);color:var(--ink)}
.score[data-state="bad"]{background:var(--bad-bg);color:var(--bad)}
.score[data-state="good"]{background:var(--ok-bg);color:var(--ok)}
.key{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.76rem;color:var(--ink-soft)}
.key span{display:flex;align-items:center;gap:6px}
.chip{width:15px;height:13px;background:var(--mark);display:inline-block}
.chip.round{border-radius:50%;width:13px}
.chip.reg{border-radius:3px}
.chip.tri{width:15px;height:13px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.leaderchip{display:inline-block;width:17px;height:1px;background:var(--ink-soft);vertical-align:middle}
footer{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.79rem;color:var(--ink-soft);
  border-top:1px solid var(--hair);padding-top:14px;display:flex;flex-direction:column;gap:6px}
@media print{
  body{background:#fff;padding:0}
  section{break-inside:avoid;border-color:#bbb}
  .controls,.trayhead,.tray{display:none}
  .dropzone{border-style:solid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}