:root{
  --navy:#13307a;--azure:#1e8ce8;--cyan:#5fd3ff;--teal:#18b3d4;
  --sand:#ffe7a8;--cream:#fff7e0;--paper:#fffdf4;--terra:#d9582b;
  --sun:#ffd21f;--sun-2:#ffe34d;--orange:#ff8a1f;--red:#d8361b;--green:#1f8a3f;
  --science:#e0650f;--reading:#1669c9;--keep:#1d7d3a;
  --round:"Arial Rounded MT Bold","SF Pro Rounded",ui-rounded,"Varela Round","Nunito","Trebuchet MS",system-ui,sans-serif;
  --outline:0 3px 0 var(--navy),3px 0 0 var(--navy),-3px 0 0 var(--navy),0 -3px 0 var(--navy),2px 2px 0 var(--navy),-2px 2px 0 var(--navy),2px -2px 0 var(--navy),-2px -2px 0 var(--navy),0 7px 0 rgba(10,30,80,.35);
  --outline-s:0 2px 0 var(--navy),2px 0 0 var(--navy),-2px 0 0 var(--navy),0 -2px 0 var(--navy),1.5px 1.5px 0 var(--navy),-1.5px 1.5px 0 var(--navy),1.5px -1.5px 0 var(--navy),-1.5px -1.5px 0 var(--navy),0 4px 0 rgba(10,30,80,.3);
  --panel-shadow:0 5px 0 var(--navy),0 12px 22px rgba(8,40,110,.25);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--round);color:var(--navy);background:linear-gradient(180deg,#1678e0 0%,#3cb2f4 45%,#9ee6ff 100%);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--sun);padding:8px 14px;border-radius:99px;color:var(--navy);font-weight:800}
.skip:focus{left:12px}
:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 8px var(--navy)}
kbd.k{display:inline-grid;place-items:center;min-width:1.75em;height:1.75em;padding:0 .4em;border-radius:.5em;background:#fff;color:var(--navy);border:2px solid var(--navy);border-bottom-width:4px;font:800 .74rem/1 var(--round);vertical-align:middle}
kbd.k.big{font-size:1rem;min-width:2em;height:2em}

/* ---------- layout ---------- */
.app{height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,25vw,360px);grid-template-rows:auto minmax(0,1fr) 30px;gap:12px;padding:12px 14px 8px}
.top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0}
.brand{display:flex;align-items:center;gap:14px;min-width:0;padding-left:10px}
.brand-sun{flex:none;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff6a8,var(--sun) 45%,var(--orange));border:4px solid var(--navy);box-shadow:0 0 0 6px #ffd21f55,0 5px 0 var(--navy);position:relative;animation:spin 18s linear infinite}
.brand-sun::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffd21f 0 10deg,transparent 10deg 30deg);-webkit-mask:radial-gradient(circle,transparent 34px,#000 35px);mask:radial-gradient(circle,transparent 34px,#000 35px);z-index:-1}
.title{margin:0;font:900 clamp(30px,4.2vh,44px)/1 var(--round);color:#fff;letter-spacing:.01em;text-shadow:var(--outline)}
.thesis{margin:6px 0 0;font:700 clamp(12px,1.7vh,15px)/1.3 var(--round);color:#fff;text-shadow:0 1px 0 var(--navy),0 2px 3px #0a2a6aaa;max-width:62ch}
.hud{display:flex;align-items:center;gap:12px;flex:none}
.suns{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:6px 14px 6px 8px;border-radius:99px;box-shadow:0 4px 0 #0a1d4e}
.suns-row{display:flex;gap:3px}
.suns-row i{width:18px;height:18px;border-radius:50%;border:2px dashed #7fa4e8;display:block}
.suns-row i.on{border:2px solid #fff;background:radial-gradient(circle at 38% 35%,#fff6a8,var(--sun) 50%,var(--orange));box-shadow:0 0 8px #ffd21f}
.suns b{font:900 20px/1 var(--round);text-shadow:0 2px 0 #0a1d4e;min-width:3.2em;text-align:right}
.round-btn{background:#fff;border:3px solid var(--navy);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;box-shadow:0 4px 0 var(--navy)}
.round-btn kbd{border:none;font-size:1rem;background:none}

.stage{grid-column:1;grid-row:2;position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#2aa6f0,#1fc3d7 30%,#14b0c9);border:4px solid var(--navy);box-shadow:var(--panel-shadow);outline:none;min-height:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-hint{position:absolute;left:14px;top:12px;background:#fffdf4ee;border:3px solid var(--navy);border-radius:99px;padding:5px 12px;font:800 12px/1 var(--round);display:flex;gap:4px;align-items:center;box-shadow:0 3px 0 var(--navy)}

.side{grid-column:2;grid-row:2;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:12px;min-height:0}
.card{background:var(--paper);border:4px solid var(--navy);border-radius:24px;box-shadow:var(--panel-shadow);padding:14px 16px;min-height:0}
.detail{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;gap:6px;overflow:hidden;position:relative}
.detail::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#ffe34d66,transparent 70%);pointer-events:none}
.detail-head{display:flex;justify-content:space-between;align-items:center}
.route-pill{font:900 11px/1 var(--round);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--science);padding:6px 11px;border-radius:99px;border:2px solid var(--navy)}
.route-pill.reading{background:var(--reading)}.route-pill.keep{background:var(--keep)}
.digit{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:900 20px/1 var(--round);background:radial-gradient(circle at 38% 35%,#fff6a8,var(--sun) 50%,var(--orange));border:3px solid var(--navy);box-shadow:0 3px 0 var(--navy)}
.kicker{margin:4px 0 0;font:800 11px/1.3 var(--round);letter-spacing:.1em;text-transform:uppercase;color:#8a3c12}
.d-title{margin:0;font:900 clamp(22px,3vh,28px)/1.1 var(--round);color:var(--navy);text-shadow:0 3px 0 var(--sun),0 5px 0 #ffb81f55;min-height:2.2em;display:flex;align-items:flex-end}
.blurb{margin:4px 0 0;font:700 14px/1.45 var(--round);color:#23407e;overflow:hidden;min-height:4.35em}
.postcard{margin:4px 0 6px;min-height:64px;position:relative;background:#fff;border:3px solid var(--navy);border-radius:14px;padding:6px 6px 0;transform:rotate(-1.2deg);box-shadow:0 4px 0 var(--navy);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.postcard svg{width:100%;height:100%;min-height:0;display:block;border-radius:9px;background:#8fe0ff;overflow:hidden}
.postcard figcaption{display:flex;justify-content:space-between;align-items:center;padding:5px 4px 6px;font:800 12px/1.2 var(--round);color:#8a3c12;font-style:italic}
.stamp{display:grid;place-items:center;width:28px;height:28px;border:2px dashed #d8361b;border-radius:6px;color:#d8361b;font-style:normal;font-size:15px;transform:rotate(6deg)}
.detail.pop .postcard{animation:card .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes card{0%{transform:rotate(-6deg) translateY(10px) scale(.94);opacity:.4}100%{transform:rotate(-1.2deg);opacity:1}}
.progress{display:grid;gap:5px;font:800 12px/1.2 var(--round);color:#23407e}
.bar{height:14px;border-radius:99px;background:#d6ecff;border:2px solid var(--navy);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sun),var(--orange));transition:width .35s cubic-bezier(.2,.8,.2,1)}
.go{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px 12px 18px;border-radius:18px;background:linear-gradient(180deg,var(--sun-2),var(--sun) 60%,#ffb81f);border:4px solid var(--navy);box-shadow:0 5px 0 var(--navy);font:900 17px/1.1 var(--round);color:var(--navy);text-align:left}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.go.small{font-size:15px;width:auto;margin:14px auto 0}
.detail.pop .d-title,.detail.pop .blurb,.detail.pop .kicker{animation:pop .32s cubic-bezier(.2,1.6,.4,1)}
.continue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 12px}
.cont{display:flex;align-items:center;gap:10px;background:#e8f6ff;border:3px solid var(--navy);border-radius:14px;padding:8px 10px;font:800 13px/1.2 var(--round);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont span{overflow:hidden;text-overflow:ellipsis}
.cont:disabled{opacity:.55;cursor:default}
.routes{padding:10px 14px}
.routes ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.routes li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px 10px;align-items:center;font:700 12px/1.3 var(--round);color:#23407e;opacity:.72;transition:opacity .2s}
.routes li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.routes li b{font-weight:900;color:var(--navy)}
.routes li i{width:14px;height:14px;border-radius:4px;border:2px solid var(--navy)}
.routes li.on{opacity:1}
.routes li.on b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}

.foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 12px/1.2 var(--round);color:#fff;text-shadow:0 1px 2px #0a2a6a}
.others{display:flex;gap:10px}
.others a{color:#fff;text-decoration-thickness:2px;text-underline-offset:2px}
.others a[aria-current]{text-decoration:none;background:var(--navy);padding:3px 8px;border-radius:99px}

/* ---------- scene ---------- */
.place{cursor:pointer;outline:none}
.place .art{transform-box:fill-box;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.place:hover .art,.place.selected .art{transform:scale(1.07)}
.place .plate rect{fill:#fffdf4;stroke:var(--navy);stroke-width:3}
.place .plate text{font:900 13px var(--round);fill:var(--navy)}
.place .plate .num{fill:#fff}
.place .plate .numbg{fill:var(--navy)}
.place.selected .plate rect{fill:var(--sun)}
.place.selected .plate .numbg{fill:var(--red)}
.place.visited .plate .tick{opacity:1}
.place .plate .tick{opacity:0}
.place:focus-visible .plate rect{stroke:#fff;stroke-width:5}
.place:focus-visible .plate{filter:drop-shadow(0 0 0 var(--navy)) drop-shadow(0 0 3px var(--navy))}
.glow{opacity:0;transition:opacity .25s}
.place.selected .glow{opacity:1}
.path-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route-dash{stroke-dasharray:2 14;animation:march 1.4s linear infinite}
.route-g{transition:opacity .25s}
.route-g.dim{opacity:.55}
.wave{animation:drift 7s ease-in-out infinite alternate}
.wave.b{animation-duration:9s;animation-delay:-3s}
.sparkle{animation:twinkle 2.6s ease-in-out infinite}
.bob{animation:bob 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.beam{animation:beam 4s ease-in-out infinite;transform-origin:0 0}
.sway{animation:sway 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.spray{animation:spray 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
#cursor .medal{animation:hover 1.2s ease-in-out infinite}
#cursor .rays{animation:spin 6s linear infinite;transform-box:fill-box;transform-origin:center}
#cursor.land .medal{animation:land .3s cubic-bezier(.2,1.6,.4,1)}
#cursor.bump{animation:none}

/* ---------- iris + help ---------- */
.iris{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;--r:150vmax;--x:50%;--y:50%;background:radial-gradient(circle at var(--x) var(--y),transparent calc(var(--r) - 1px),#ffc21a var(--r),#ff9a1f calc(var(--r) + 40px),var(--navy) calc(var(--r) + 42px))}
.iris.on{opacity:1}
.help{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#0b2a6acc}
.help[hidden]{display:none}
.help-card{background:var(--paper);border:5px solid var(--navy);border-radius:28px;box-shadow:0 8px 0 var(--navy);padding:22px 28px;width:min(460px,92vw);animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
.help-card h2{margin:0 0 12px;font:900 26px/1 var(--round);color:#fff;text-shadow:var(--outline-s)}
.help dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font:700 14px/1.3 var(--round);align-items:center}
.help dt{text-align:right;white-space:nowrap}
.help dd{margin:0}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes march{to{stroke-dashoffset:-32}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes beam{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes spray{0%,100%{transform:scaleY(.85)}50%{transform:scaleY(1.1)}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes land{0%{transform:scale(1.25,.75)}100%{transform:scale(1)}}
@keyframes pop{0%{transform:scale(.92);opacity:.3}100%{transform:scale(1);opacity:1}}
@keyframes nudge{0%,100%{transform:translate(0,0)}40%{transform:translate(var(--nx),var(--ny))}}

@media (max-width:1100px){.thesis{max-width:44ch}}
@media (max-height:800px){.postcard{display:none}.blurb{font-size:13px;min-height:0}.detail{gap:4px}.d-title{min-height:0}.kicker{font-size:10px}.go{padding:9px 12px 9px 16px;font-size:16px}.card{padding:12px 14px}}
@media (max-width:767px){
  html,body{height:auto;overflow:auto}
  .app{height:auto;grid-template-columns:1fr;grid-template-rows:auto;padding:10px}
  .top{flex-wrap:wrap}
  .stage,.side{grid-column:1;grid-row:auto}
  .stage{aspect-ratio:1000/700}
  .postcard{height:150px}
  .continue{grid-template-columns:1fr}
  .routes li span{white-space:normal}
  .map-hint{display:none}
  .foot{grid-column:1;flex-direction:column;align-items:flex-start}
  .others{flex-wrap:wrap}
  .suns-row{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}