/* Jugami World Geography — "explorer's chart" theme. Static CSS, no frameworks. */
:root{
  --ocean:#0b2e4f;      /* deep ocean: header, footer, strong text on light */
  --sea:#1b6a8c;        /* links, grid lines */
  --shallow:#cfe7ef;    /* shallow water panels */
  --foam:#eef7fa;
  --parchment:#f7f0de;  /* page background */
  --vellum:#fffaf0;     /* cards */
  --ink:#1b2733;        /* body text */
  --muted:#4b5966;
  --rust:#a8481f;       /* compass north, accents (darkened v2 for 4.5:1 text contrast) */
  --brass:#c4952f;      /* rules, highlights */
  --land:#dcc796;
  --land-edge:#8a7442;
  --ok:#1f7a4d; --bad:#a3361c;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:14px;
  --shadow:0 2px 0 rgba(11,46,79,.08),0 8px 24px rgba(11,46,79,.08);
  --measure:68ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--parchment);color:var(--ink);font:18px/1.65 var(--sans);
  background-image:linear-gradient(rgba(27,106,140,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(27,106,140,.05) 1px,transparent 1px);
  background-size:48px 48px}
a{color:var(--sea);text-underline-offset:.15em}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
img,svg{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);color:var(--ocean);line-height:1.2;margin:1.6em 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.3rem);margin-top:.2em;letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,3.6vw,2.1rem);padding-bottom:.25em;border-bottom:2px solid var(--brass)}
h3{font-size:1.25rem}
p,li{max-width:var(--measure)}
dfn{font-style:normal;font-weight:700;color:var(--ocean);background:linear-gradient(transparent 62%,rgba(196,149,47,.3) 0)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--ocean);padding:.6em 1em;z-index:10;font-weight:700}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-head{background:var(--ocean);color:#fff}
.site-head .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:.7rem 20px}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:700 1.2rem/1.1 var(--serif)}
.brand img{width:38px;height:38px}
.brand small{display:block;font:600 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9fd0e0}
.head-nav{display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.head-nav a{color:#e9f4f8;text-decoration:none;font-size:.95rem;padding:.25rem 0;border-bottom:2px solid transparent}
.head-nav a:hover,.head-nav a[aria-current]{color:#fff;border-bottom-color:var(--brass)}
.graticule-rule{height:14px;background:
  repeating-linear-gradient(90deg,var(--brass) 0 2px,transparent 2px 24px),
  linear-gradient(var(--sea),var(--sea));opacity:.9}

.crumbs{font-size:.9rem;color:var(--muted);margin:1rem 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.crumbs li+li::before{content:"›";margin-right:.3rem;color:var(--brass)}

/* Hero */
.hero{display:grid;gap:1.5rem;align-items:center;margin:1rem 0 1.5rem}
@media (min-width:820px){.hero{grid-template-columns:1.15fr .85fr}}
.kicker{font:700 .8rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin:0}
.tagline{font:italic 1.3rem/1.4 var(--serif);color:var(--sea);margin:.2rem 0 1rem}
.hero-art{margin:0;background:var(--vellum);border:1px solid rgba(138,116,66,.35);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}
.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.btn{display:inline-block;font:700 1rem/1.2 var(--sans);background:var(--ocean);color:#fff;border:2px solid var(--ocean);border-radius:999px;padding:.7rem 1.2rem;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{background:var(--sea);border-color:var(--sea);color:#fff}
.btn.alt{background:transparent;color:var(--ocean)}
.btn.alt:hover{background:var(--shallow);color:var(--ocean)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* TOC */
.toc{background:var(--vellum);border:1px dashed var(--land-edge);border-radius:var(--radius);padding:1rem 1.25rem;margin:1.5rem 0}
.toc strong{font-family:var(--serif);color:var(--ocean)}
.toc ol{margin:.4rem 0 0;padding-left:1.3rem;columns:2 16rem;column-gap:2rem}
.toc li{break-inside:avoid}

/* Cards */
.cards{list-style:none;padding:0;margin:1rem 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--vellum);border:1px solid rgba(138,116,66,.35);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card h3{margin:.6rem 0 .3rem}
.card p{margin:.2rem 0 .8rem;font-size:.98rem}
.card svg{border-radius:10px;display:block;width:100%}
.card .go{margin-top:auto;font-weight:700}
.card.is-soon{background:#f3ecdb;border-style:dashed}
.card.is-soon svg{filter:saturate(.55)}
.soon{margin-top:auto;align-self:flex-start;font:700 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--muted);border-radius:999px;padding:.35rem .7rem}
.badge-live{align-self:flex-start;font:700 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ok);border-radius:999px;padding:.3rem .6rem}

/* Five themes */
.themes{list-style:none;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.themes li{background:var(--foam);border-left:5px solid var(--sea);border-radius:10px;padding:.8rem 1rem;font-size:.97rem}
.themes b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ocean)}
.themes em{display:block;color:var(--muted);font-size:.92rem;margin-top:.3rem}

/* Callouts */
.dyk-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:1rem 0}
.dyk{background:var(--vellum);border:2px solid var(--brass);border-radius:var(--radius);padding:1rem 1.1rem;position:relative}
.dyk h3{margin:0 0 .3rem;font-size:1.08rem}
.dyk h3::before{content:"✦ ";color:var(--rust)}
.dyk p{margin:.2rem 0;font-size:.97rem}
.dyk .src{font-size:.82rem;color:var(--muted)}
.how{background:var(--ocean);color:#eef6fa;border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.5rem 0}
.how h2,.how h3{color:#fff;border-color:var(--brass)}
.how h2{margin-top:.2em}
.how a{color:#ffd98a}
.how dfn{color:#fff;background:linear-gradient(transparent 62%,rgba(196,149,47,.55) 0)}
.note{font-size:.92rem;color:var(--muted)}
figure{margin:1.2rem 0}
figcaption{font-size:.92rem;color:var(--muted);margin-top:.4rem;max-width:var(--measure)}
.figure-box{background:var(--vellum);border:1px solid rgba(138,116,66,.35);border-radius:var(--radius);padding:12px}
.two-col{display:grid;gap:1.2rem}
@media (min-width:820px){.two-col{grid-template-columns:1fr 1fr;align-items:start}}
.terms{display:grid;gap:.4rem 1rem;grid-template-columns:max-content 1fr;margin:1rem 0}
.terms dt{font-weight:700;color:var(--ocean)}
.terms dd{margin:0}
@media (max-width:520px){.terms{grid-template-columns:1fr}.terms dd{margin-bottom:.5rem}}
.coord{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em;background:var(--foam);padding:.05em .35em;border-radius:5px;white-space:nowrap}

/* Game */
.game{background:var(--vellum);border:2px solid var(--sea);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.game-help{font-size:.95rem;background:var(--foam);border-radius:10px;padding:.6rem .8rem;margin:0 0 .8rem}
.game-top{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;justify-content:space-between;margin-bottom:.6rem}
.target{font:700 1.25rem/1.3 var(--serif);color:var(--ocean)}
.stats{font-size:.95rem;color:var(--muted)}
.stats b{color:var(--ocean)}
.map-wrap{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--sea);touch-action:manipulation}
.map-wrap svg{display:block;width:100%;cursor:crosshair}
.map-wrap svg:focus-visible{outline:4px solid var(--brass);outline-offset:-4px}
.readout{margin:.6rem 0;font-size:1rem}
.feedback{min-height:3.2em;font-weight:600;margin:.4rem 0}
.feedback.good{color:var(--ok)} .feedback.miss{color:var(--bad)}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.6rem 0}
.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px);gap:4px}
.dpad button{font-size:1.1rem;border:2px solid var(--sea);background:var(--foam);color:var(--ocean);border-radius:10px;cursor:pointer;min-width:44px;min-height:44px}
.dpad .up{grid-column:2}
.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}
.scoring{font-size:.92rem;margin-top:.8rem}
.scoring summary{cursor:pointer;font-weight:700;color:var(--ocean)}

/* Quiz */
.quiz fieldset{border:1px solid rgba(138,116,66,.45);border-radius:var(--radius);background:var(--vellum);margin:0 0 1rem;padding:.8rem 1rem 1rem}
.quiz legend{font:700 1.05rem/1.4 var(--serif);color:var(--ocean);padding:0 .3rem;max-width:100%}
.quiz label{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem .55rem;border-radius:8px;cursor:pointer;max-width:var(--measure)}
.quiz label:hover{background:var(--foam)}
.quiz input{margin-top:.35rem;accent-color:var(--sea);width:18px;height:18px;flex:none}
.quiz .right{background:#e3f3e9;outline:2px solid var(--ok)}
.quiz .wrong{background:#f8e3dc;outline:2px solid var(--bad)}
.explain{font-size:.95rem;margin:.5rem .3rem 0;color:var(--ink)}
.score{font:700 1.2rem/1.4 var(--serif);color:var(--ocean)}
.talk li{margin-bottom:.7rem}

/* Sources, pager, footer */
.sources{font-size:.95rem}
.sources li{margin-bottom:.5rem}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;margin:2.5rem 0 1rem;padding:1rem;border-top:2px solid var(--brass);border-bottom:2px solid var(--brass);font-weight:600}
.pager .soon-text{color:var(--muted);font-weight:400}
.site-foot{background:var(--ocean);color:#d8e9f0;margin-top:3rem;padding:1.5rem 0 2rem;font-size:.95rem}
.site-foot a{color:#ffd98a}
.site-foot p{max-width:none}
.jugami-more{margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:baseline}
.jugami-more span{font-weight:700;color:#fff}
noscript p,.noscript{background:#fff3cd;border:1px solid var(--brass);border-radius:10px;padding:.7rem 1rem}

/* v1 additions */
svg{max-width:100%;height:auto}
.prose{max-width:var(--measure)}
.unit-intro{max-width:var(--measure);margin:1rem 0 .5rem}
.game-btns{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;background:#fff;border:1px solid #9aa9b5;border-bottom-width:2px;border-radius:4px;padding:0 .3em}
.figure-box figcaption{font-size:.95rem;margin-top:.5rem;color:var(--muted)}
.hero-art svg{width:100%}
.figure-box > svg{display:block;width:100%;max-width:680px;margin:0 auto}

/* v2: Mandy round 1 */
/* Tap targets at least 44px tall */
.brand{min-height:44px}
.head-nav{gap:0 .9rem}
.head-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs{margin-top:.4rem}
.crumbs ol{align-items:center}
.toc a{display:inline-flex;align-items:center;min-height:44px}
.card h3 a{display:inline-flex;align-items:center;min-height:44px}
.card .go,.pager a,.top-link{display:inline-flex;align-items:center;min-height:44px}
.card .go{align-self:flex-start}
.jugami-more{align-items:center}
.jugami-more a{display:inline-flex;align-items:center;min-height:44px}
.scoring summary{display:flex;align-items:center;min-height:44px;list-style:none}
.scoring summary::-webkit-details-marker{display:none}
.scoring summary::before{content:"▸";display:inline-block;width:1.1em;transition:transform .15s}
.scoring[open] summary::before{transform:rotate(90deg)}
/* Game */
.game-hint{font-size:.95rem;font-weight:600;color:var(--ocean);margin:-.3rem 0 .8rem}
.feedback.close{color:#7a4f00}
.feedback.good::before{content:"✓ "}
.feedback.close::before{content:"≈ "}
.feedback.miss::before{content:"✗ "}
@media (max-width:760px){#cg-map .ticks{font-size:16px}#cg-map .axis-lab{font-size:18px}}
@media (max-width:760px){#cg-answer-label{font-size:20px}}
@media (max-width:480px){#cg-map .ticks{display:none}#cg-map .axis-lab{font-size:27px}#cg-map .axis-lab.pm{text-anchor:end;transform:translate(-12px,6px)}#cg-answer-label{font-size:27px}}
/* Quiz: results are marked with text, not color alone */
.quiz label{flex-wrap:wrap}
.quiz .opt{flex:1 1 12rem}
.opt-letter{color:var(--ocean);margin-right:.2em}
.mark{flex:0 0 auto;align-self:center;font:700 .85rem/1.2 var(--sans);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.mark-ok{background:var(--ok);color:#fff}
.mark-bad{background:var(--bad);color:#fff}
.verdict{font-weight:700;margin:.6rem .3rem 0}
.verdict.is-right{color:var(--ok)}
.verdict.is-wrong{color:var(--bad)}
.verdict.is-skip{color:var(--ink)}
/* Lesson figures: pairs of SVGs stack on phones so labels stay readable */
.svg-pair{display:grid;gap:12px;grid-template-columns:1fr;justify-items:center}
@media (min-width:600px){.svg-pair{grid-template-columns:1fr 1fr}}
.svg-pair svg{display:block;width:100%;max-width:340px}
.only-narrow{display:none}
@media (max-width:600px){.only-wide{display:none}.only-narrow{display:block}}
.only-wide svg,.only-narrow svg{display:block;width:100%;max-width:680px;margin:0 auto}
.only-narrow svg{max-width:420px}