:root{
  --navy:#13307a;--navy-2:#1a3a86;--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;
  --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 6px 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 38%,#8fe0ff 70%,#d3f6ff 100%);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--sun);padding:8px 14px;border-radius:99px;color:var(--navy)}
.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.7em;height:1.7em;padding:0 .4em;border-radius:.5em;background:#fff;color:var(--navy);border:2px solid var(--navy);border-bottom-width:4px;font:800 .72rem/1 var(--round);letter-spacing:0;text-transform:none;vertical-align:middle}

/* ---------- layout ---------- */
.app{height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,26vw,370px);grid-template-rows:58px minmax(0,1fr) 164px;gap:12px;padding:12px}
.top{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.stage{grid-column:1;grid-row:2;position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#1b84ea 0%,#43bff7 45%,#9ee6ff 100%);border:4px solid var(--navy);box-shadow:var(--panel-shadow);outline:none}
.side{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:12px;min-height:0}
.deck{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,1.35fr) 86px minmax(0,1fr) 238px;grid-template-rows:40px minmax(0,1fr);gap:8px 16px;padding:10px 16px 12px;background:var(--cream);border:4px solid var(--navy);border-radius:26px;box-shadow:var(--panel-shadow)}

/* ---------- top bar ---------- */
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;text-shadow:var(--outline-s);font-size:.82rem;line-height:1;letter-spacing:.02em}
.brand b{font-size:1.25rem;letter-spacing:.03em}
.brand-sun{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fffbe0 0 18%,var(--sun-2) 40%,var(--orange) 100%);border:3px solid var(--navy);box-shadow:0 0 0 4px #ffe34d88,0 3px 0 var(--navy)}
.acts{display:flex;align-items:center;gap:6px;margin-inline:auto;background:rgba(255,255,255,.28);padding:5px 8px;border-radius:99px;border:3px solid rgba(19,48,122,.55)}
.acts button{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 5px;border-radius:99px;border:3px solid var(--navy);background:#fff;cursor:pointer;font-size:.8rem;box-shadow:0 3px 0 var(--navy);transition:transform .15s}
.acts button .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cyan);font-size:.75rem;border:2px solid var(--navy)}
.acts button[aria-current="step"]{background:var(--sun);transform:translateY(-1px)}
.acts button[aria-current="step"] .n{background:#fff}
.acts button.done .n{background:var(--orange);color:#fff;border-color:var(--navy)}
.acts button:disabled{background:#d8ecf6;color:#4a6390;cursor:not-allowed;box-shadow:0 3px 0 #4a6390;border-color:#4a6390}
.acts button:disabled .n{background:#eef6fa;border-color:#4a6390}
.acts button:not(:disabled):hover{transform:translateY(-2px)}

.suns{display:flex;align-items:center;gap:4px;padding:4px 12px 4px 6px;border-radius:99px;background:rgba(19,48,122,.35)}
.sun-slot{width:30px;height:30px;border-radius:50%;border:3px dashed rgba(255,255,255,.8);position:relative;transition:transform .3s}
.sun-slot.on{border:3px solid var(--navy);background:radial-gradient(circle at 40% 38%,#fffbe0 0 16%,var(--sun-2) 42%,var(--orange) 100%);box-shadow:0 0 12px #ffe34d,0 3px 0 var(--navy);animation:sunpop .5s cubic-bezier(.3,1.6,.5,1)}
.sun-slot.on::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:repeating-conic-gradient(#ffd21f 0 12deg,transparent 12deg 30deg);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%);z-index:-1;animation:spin 14s linear infinite}
.sun-count{display:flex;align-items:baseline;margin-left:6px;color:#fff;text-shadow:var(--outline-s);font-size:1.5rem}
.sun-count .x{font-size:.95rem;margin-right:2px}
.help-btn{background:none;border:0;cursor:pointer;padding:4px}
.help-btn kbd.k{width:38px;height:38px;font-size:1.05rem;border-radius:50%}

/* ---------- stage ---------- */
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.svg-label{font:800 9px var(--round);fill:#fff;letter-spacing:1.5px}
.svg-sign{font:800 15px var(--round);fill:#fff;paint-order:stroke;stroke:#13307a;stroke-width:5px;stroke-linejoin:round;letter-spacing:.5px}
.svg-tick{font:800 12px var(--round);fill:#fff8e4}
.svg-note{font:800 13px var(--round);fill:#fff;paint-order:stroke;stroke:#13307a;stroke-width:4px;stroke-linejoin:round}
.title-card{position:absolute;left:18px;top:14px;z-index:2;max-width:min(52%,560px);pointer-events:none}
.kicker{display:inline-block;margin:0 0 4px;padding:4px 12px;border-radius:99px;background:var(--red);color:#fff;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:3px solid var(--navy);box-shadow:0 3px 0 var(--navy);transform:rotate(-2deg)}
.title-card h1{margin:0;color:#fff;font-size:clamp(1.25rem,2.5vw,2.25rem);line-height:1.08;text-shadow:var(--outline);letter-spacing:.01em;transform:rotate(-1.5deg);transform-origin:left}
.edge-note{position:absolute;left:18px;bottom:12px;margin:0;color:#fff;text-shadow:var(--outline-s);font-size:.82rem;z-index:2;min-height:1em}
.noticeboard{position:absolute;right:14px;top:14px;z-index:2;width:clamp(230px,30%,330px);background:rgba(255,253,244,.94);border:4px solid var(--navy);border-radius:20px;box-shadow:0 4px 0 var(--navy);padding:6px 10px 4px}
.noticeboard header{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:1400px){.noticeboard header>span:first-child{display:none}.noticeboard header{justify-content:flex-end}}
.legend{display:flex;gap:4px;align-items:center;text-transform:none;letter-spacing:0;font-size:.66rem;color:#304a86}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-left:4px}
.lg-run{background:var(--red)}.lg-prev{background:repeating-linear-gradient(90deg,#1e8ce8 0 4px,transparent 4px 7px)}.lg-ghost{background:#8a9bc4}
#chart{display:block;width:100%;height:auto}
.toast{position:absolute;left:50%;top:40%;z-index:5;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;display:flex;align-items:center;gap:14px;padding:14px 22px 14px 14px;border-radius:26px;background:var(--paper);border:4px solid var(--navy);box-shadow:var(--panel-shadow);max-width:80%}
.toast.show{animation:toast 2.6s cubic-bezier(.3,1.4,.5,1) forwards}
.toast .medal{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;color:var(--navy);background:radial-gradient(circle at 40% 38%,#fffbe0 0 16%,var(--sun-2) 42%,var(--orange) 100%);border:4px solid var(--navy);box-shadow:0 0 22px #ffd21f}
.toast small{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.toast b{display:block;font-size:1.3rem}
.toast span.t{display:block;font-size:.85rem;color:#2b447f}

/* scene animation */
.rays{animation:spin 40s linear infinite;transform-origin:0 0}
.cloud{animation:drift 26s ease-in-out infinite alternate}
.c2{animation-duration:34s}.c3{animation-duration:20s}
.w1{animation:wave 4s linear infinite}.w2{animation:wave 6s linear infinite reverse}
.sp{animation:twinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.s2{animation-delay:.8s}.s3{animation-delay:1.6s}
.beam{animation:beam 5s ease-in-out infinite alternate;transform-origin:0 14px;transform-box:view-box}
.fronds{animation:sway 5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
.rp{animation:ripple 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.r2{animation-delay:.7s}
.dock-band{animation:glow 1.8s ease-in-out infinite alternate}

/* ---------- side ---------- */
.balloon{flex:none;display:flex;gap:10px;align-items:flex-start}
.portrait{flex:none;width:52px;height:52px;filter:drop-shadow(0 3px 0 var(--navy))}
.bubble{position:relative;flex:1;min-width:0;background:var(--paper);border:4px solid var(--navy);border-radius:24px;padding:10px 14px 10px;box-shadow:var(--panel-shadow)}
.bubble::before{content:"";position:absolute;left:-15px;top:18px;border:10px solid transparent;border-right:14px solid var(--navy)}
.bubble::after{content:"";position:absolute;left:-7px;top:22px;border:6px solid transparent;border-right:9px solid var(--paper)}
.who{margin:0;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#a33a13}
.line{margin:4px 0 0;font-size:.9rem;line-height:1.3;min-height:5.2em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.reply{margin:8px 0 0;height:calc(3.75em + 12px);overflow:hidden;font-size:.78rem;line-height:1.25;padding:6px 10px;border-radius:14px;background:#e8f6ff;color:#1c3b7e;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.reply:empty{background:repeating-linear-gradient(90deg,#d6ecf8 0 8px,transparent 8px 14px) bottom/100% 2px no-repeat}
.reply.good{background:#fff1b8;color:#6a3a00}
.reply.try{background:#ffe1d6;color:#8a2a0e}
.reply.pop{animation:splash .45s cubic-bezier(.3,1.6,.5,1)}

.task{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;background:var(--paper);border:4px solid var(--navy);border-radius:24px;padding:12px 14px;box-shadow:var(--panel-shadow);overflow:hidden}
.task .tk{margin:0;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#a33a13}
.task h2{margin:0;font-size:1.05rem;line-height:1.2}
.task p.sub{margin:0;font-size:.8rem;line-height:1.3;color:#2b447f}
.opts{display:grid;gap:6px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;min-height:34px;padding:4px 12px 4px 5px;border-radius:99px;border:3px solid var(--navy);background:#fff;cursor:pointer;font-size:.86rem;box-shadow:0 3px 0 var(--navy);transition:transform .12s,background .2s}
.opt:hover{transform:translateY(-1px);background:#eaf8ff}
.opt kbd.k{flex:none;border-radius:50%;width:1.9em;height:1.9em;background:var(--cyan)}
.opt.sel{background:#dff3ff}
.opt.sel.right{background:var(--sun)}
.opt.sel.wrong{background:#ffd3c4}
.hintrow{margin-top:auto;display:flex;align-items:center;gap:8px;min-height:44px}
.hint-btn{flex:none;display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-size:.8rem;color:#1c3b7e;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;padding:2px}
.hint-text{margin:0;font-size:.78rem;line-height:1.25;color:#1c3b7e;background:#e8f6ff;border-radius:12px;padding:5px 9px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;animation:splash .45s cubic-bezier(.3,1.6,.5,1)}
.formula{margin:4px 0 0;padding:8px 12px;border-radius:16px;background:#fff1b8;border:3px solid var(--navy);font-size:.84rem;line-height:1.3;box-shadow:0 3px 0 var(--navy)}
.formula span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.limits{display:flex;flex-wrap:wrap;gap:6px}
.limits span{font-size:.72rem;padding:3px 9px;border-radius:99px;background:#e8f6ff;border:2px solid #9cc7ea}
.limits span.ok{background:#fff1b8;border-color:#e0a21f}
.limits span.bad{background:#ffe1d6;border-color:#e0896a}
.keepline{font-size:.72rem!important}
.reflect-lbl{white-space:nowrap;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#a33a13;display:flex;justify-content:space-between;align-items:center}
textarea{flex:1;min-height:60px;resize:none;font:inherit;font-size:.86rem;line-height:1.35;color:var(--navy);background:#fff;border:3px solid var(--navy);border-radius:16px;padding:8px 12px}
textarea::placeholder{color:#58709f}
.ctrl-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border-radius:99px;border:3px solid var(--navy);background:var(--cyan);cursor:pointer;font-size:.85rem;box-shadow:0 3px 0 var(--navy)}
.ctrl-btn.on{background:#fff}

/* ---------- deck ---------- */
.timeline{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.run-btn{display:flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 6px;border-radius:99px;border:3px solid var(--navy);background:#1463b8;color:#fff;cursor:pointer;font-size:.92rem;box-shadow:0 4px 0 var(--navy);text-shadow:0 2px 0 var(--navy);white-space:nowrap}
.run-btn kbd.k{text-shadow:none}
.run-btn.playing{background:#b8440c}
.scrub{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.scrub .lbl{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:16px;border-radius:99px;background:linear-gradient(90deg,var(--teal) var(--p,0%),#cfe9f7 var(--p,0%));border:3px solid var(--navy);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fffbe0 0 18%,var(--sun-2) 45%,var(--orange) 100%);border:3px solid var(--navy);box-shadow:0 2px 0 var(--navy)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--sun);border:3px solid var(--navy)}
.time{min-width:4.2em;text-align:right;font-size:1.25rem;color:var(--navy);text-shadow:0 2px 0 #9fe3ff}
.keys{display:flex;gap:3px}

.dials{display:flex;flex-wrap:wrap;align-content:center;gap:4px 10px;min-width:0}
.dials .dial{flex:1 1 180px;min-width:0}
.dial{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 22px;gap:2px 10px;align-items:center;padding:5px 12px;border-radius:18px;border:3px solid transparent;cursor:pointer;outline:none;transition:background .2s,border-color .2s}
.dial .dl{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.dial .dv{grid-column:3;font-size:1.2rem;color:var(--navy);text-shadow:0 2px 0 #ffd21f;white-space:nowrap}
.dial .dk{grid-column:2;grid-row:1;justify-self:end;display:flex;gap:3px;opacity:0;transition:opacity .2s}
.dial .track{grid-column:1/-1;position:relative;height:14px;border-radius:99px;background:#cfe9f7;border:3px solid var(--navy);overflow:visible}
.dial .fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#43dcd8,#1e8ce8)}
.dial .thumb{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff 0 18%,#dff3ff 60%,#9cc7ea 100%);border:3px solid var(--navy);box-shadow:0 2px 0 var(--navy);transition:left .12s}
.dial.active{background:#fff;border-color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.dial.active .dk{opacity:1}
.dial.active .thumb{background:radial-gradient(circle at 40% 38%,#fffbe0 0 18%,var(--sun-2) 45%,var(--orange) 100%)}
.dial:focus-visible{outline:4px solid var(--azure);outline-offset:2px;box-shadow:none}
.dials .setup{margin:0;font-size:.86rem;line-height:1.35;padding:8px 12px;border-radius:16px;background:#e8f6ff;border:3px dashed #9cc7ea}
.dials .setup b{font-size:1rem}
.dials .updown{flex-basis:100%;margin:0;font-size:.68rem;color:#2b447f;display:flex;gap:4px;align-items:center;padding-left:12px}
.dials .updown kbd.k{font-size:.6rem}

.tank{display:grid;grid-template-rows:1fr auto auto;justify-items:center;gap:1px;min-height:0}
.tank-glass{position:relative;width:48px;height:100%;min-height:50px;border-radius:24px 24px 18px 18px;border:4px solid var(--navy);background:#e6f6ff;overflow:hidden;box-shadow:0 3px 0 var(--navy)}
.tank-glass::before{content:"";position:absolute;left:50%;top:-4px;width:20px;height:8px;margin-left:-10px;border-radius:0 0 6px 6px;background:var(--navy)}
.water{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg,#5fe6f0,#1e8ce8);transition:height .08s linear}
.water.brake{background:linear-gradient(180deg,#ffc36b,#ff6a2a)}
.wave{position:absolute;left:-50%;top:-7px;width:200%;height:12px;background:radial-gradient(circle at 10px -2px,transparent 9px,#5fe6f0 10px) 0 0/20px 12px repeat-x;animation:slosh 1.1s linear infinite}
.water.brake .wave{background-image:radial-gradient(circle at 10px -2px,transparent 9px,#ffc36b 10px)}
.shine{position:absolute;left:7px;top:10px;width:6px;height:60%;border-radius:4px;background:rgba(255,255,255,.7)}
.tank-lbl{margin:0;font-size:.62rem;letter-spacing:.1em}
.tank-val{margin:0;font-size:.82rem;white-space:nowrap}

.readouts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-content:center;min-width:0}
.ro{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap}
.ro span{font-size:.62rem;letter-spacing:.06em;min-width:3.8em;flex:none;color:#2b447f}
.ro b{font-size:1.3rem;color:var(--navy);text-shadow:0 2px 0 #9fe3ff;font-weight:800}
.ro i{font-style:normal;font-size:.72rem}
.ro.result b{text-shadow:0 2px 0 #ffd21f}
.ro.result.good b{color:#17602a;text-shadow:0 2px 0 #b8f0a0}
.ro.result.bad b{color:#a3280c;text-shadow:0 2px 0 #ffd0bf}
.ro.result.empty b{color:#4f6796;text-shadow:none}

.go{display:flex;flex-direction:column;justify-content:center;gap:6px}
.primary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:6px 10px 6px 20px;border-radius:26px;border:4px solid var(--navy);background:linear-gradient(180deg,#ffe34d,#ffb321);cursor:pointer;font-size:1.08rem;line-height:1.1;text-align:left;box-shadow:0 6px 0 var(--navy),0 10px 18px rgba(8,40,110,.25);transition:transform .12s}
.primary:hover{transform:translateY(-2px)}
.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.primary kbd.k{width:40px;height:40px;font-size:1.2rem;border-radius:14px}
.primary.ready{animation:pulse 1.3s ease-in-out infinite}
.primary.idle{background:linear-gradient(180deg,#eaf6ff,#cfe9f7)}
.go-hint{margin:0;font-size:.7rem;text-align:center;color:#2b447f}

/* ---------- iris ---------- */
.iris{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle at 50% 50%,#ffe34d 0 8%,#ffb321 14%,#ff8a1f 22%,#1e8ce8 23% 26%,#43dcd8 27% 30%,#13307a 31%);clip-path:circle(0% at var(--ix,50%) var(--iy,60%));visibility:hidden}
.iris.closing{visibility:visible;animation:irisIn .3s cubic-bezier(.6,0,.9,.4) forwards}
.iris.opening{visibility:visible;animation:irisOut .32s cubic-bezier(.1,.6,.4,1) forwards}
.iris-sun{position:absolute;left:var(--ix,50%);top:var(--iy,60%);width:120px;height:120px;margin:-60px;border-radius:50%;background:repeating-conic-gradient(#fff6b0 0 10deg,transparent 10deg 30deg);animation:spin 2s linear infinite;opacity:.7}

/* ---------- help ---------- */
.help{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(10,40,110,.45)}
.help[hidden]{display:none}
.help-card{width:min(520px,92vw);max-height:90vh;overflow:auto;background:var(--paper);border:4px solid var(--navy);border-radius:28px;box-shadow:var(--panel-shadow);padding:18px 22px;animation:splash .35s cubic-bezier(.3,1.5,.5,1)}
.help-card h2{margin:0 0 10px;font-size:1.5rem;color:var(--navy);text-shadow:0 3px 0 #ffd21f}
#keymap{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.88rem;align-items:center}
#keymap dt{display:flex;gap:3px;justify-content:flex-end}
#keymap dd{margin:0}
.help-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.small-btn{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:99px;border:3px solid var(--navy);background:#fff;cursor:pointer;font-size:.82rem;box-shadow:0 3px 0 var(--navy)}
.small-btn.warm{background:var(--sun)}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(60px)}}
@keyframes wave{to{transform:translateX(80px)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@keyframes beam{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes ripple{from{transform:scale(.4);opacity:.9}to{transform:scale(1.6);opacity:0}}
@keyframes glow{from{opacity:.55}to{opacity:1}}
@keyframes slosh{to{transform:translateX(20px)}}
@keyframes splash{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes sunpop{0%{transform:scale(.2) rotate(-90deg)}100%{transform:scale(1) rotate(0)}}
@keyframes pulse{0%,100%{transform:translateY(0);box-shadow:0 6px 0 var(--navy),0 0 0 0 #ffd21f99}50%{transform:translateY(-2px);box-shadow:0 8px 0 var(--navy),0 0 0 10px #ffd21f00}}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(1deg)}22%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(120%,-260%) scale(.25)}}
@keyframes irisIn{from{clip-path:circle(0% at var(--ix,50%) var(--iy,60%))}to{clip-path:circle(150% at var(--ix,50%) var(--iy,60%))}}
@keyframes irisOut{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}

/* ---------- smaller heights / widths ---------- */
@media (max-height:780px){
  .app{grid-template-rows:52px minmax(0,1fr) 150px;gap:10px;padding:10px}
  .line{font-size:.88rem}
  .task{padding:10px 12px;gap:6px}
  .task h2{font-size:.98rem}
  .opt{min-height:30px;font-size:.82rem}
  .primary{min-height:54px}
  .noticeboard{width:clamp(220px,28%,300px)}
  .line{min-height:0;font-size:.84rem}
  .reply{margin-top:6px}
  .limits span{font-size:.64rem;padding:2px 7px}
  .limits{gap:4px}
  .opts{gap:4px}
  .opt{min-height:28px;padding-block:2px}
  .hintrow{min-height:34px}
  .formula{padding:6px 10px;font-size:.78rem}
  .task p.sub{font-size:.76rem}
}
@media (max-width:1100px){
  .deck{grid-template-columns:minmax(0,1.3fr) 76px minmax(0,1fr) 200px;gap:8px 12px}
  .acts button .l{display:none}
  .acts button{padding:0 5px}
  .ro b{font-size:1.1rem}
}
@media (max-width:767px){
  body{overflow:auto}
  html,body{height:auto}
  .app{height:auto;grid-template-columns:1fr;grid-template-rows:auto 56vw auto auto}
  .top{flex-wrap:wrap}
  .acts{order:3;width:100%;justify-content:center}
  .stage{grid-column:1;grid-row:2;min-height:240px}
  .side{grid-column:1;grid-row:3}
  .deck{grid-column:1;grid-row:4;grid-template-columns:1fr 76px;grid-template-rows:auto auto auto}
  .timeline{flex-wrap:wrap}
  .dials{grid-column:1/-1}
  .readouts{grid-column:1}
  .tank{grid-column:2;grid-row:3;height:110px}
  .go{grid-column:1/-1}
  .noticeboard{display:none}
  .title-card h1{font-size:1.1rem}
  .task{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* engine live region is absolutely positioned without an offset; pin it so it never adds scroll height */
body>div[role=status]{top:0;left:0}