/* Ahaboo diagram-style games (prototype 2026-10-07). Paper + ink + 4 flat inks that MEAN something. */
:root{
  --paper:#fbf9f4; --card:#fff; --ink:#1f2a52; --ink2:#5b6585; --line:#1f2a5222; --grid:#1f2a5210;
  --warm:#e5624a; --warm-t:#fbe3dc; --cold:#3f8fd8; --cold-t:#e1eefa; --ok:#2f9e5b; --ok-t:#def3e6; --sun:#f2c230; --sun-t:#fdf3cf; --late:#c9433a;
  --display:"Fredoka",ui-rounded,system-ui,sans-serif; --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
.g-top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1.5px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.logo{font:700 1.5rem/1 var(--display);text-decoration:none;color:var(--ink)}
.logo b{color:var(--warm);font-weight:700}.logo i{font-style:normal;color:var(--cold)}
.g-title{flex:1;min-width:0}
.g-title h1{font:600 1.15rem/1.1 var(--display);margin:0}
.g-sub{font-size:.85rem;color:var(--ink2)}
.ages{display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.ages button{border:0;background:none;padding:5px 11px;font:600 .85rem var(--display)}
.ages button[aria-checked=true]{background:var(--ink);color:#fff}
.g-main{max-width:1200px;margin:0 auto;padding:14px 18px 40px}
.levels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.levels button{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:7px 12px;font:600 .9rem var(--display)}
.levels button .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:.75rem}
.levels button[aria-current=true]{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.levels button[disabled]{opacity:.45;cursor:not-allowed}
.levels .st{font-size:.8rem;letter-spacing:1px;color:var(--sun)}
.levels .st .off{color:#d8d4c8}
.g-play{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.g-stage{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:16px;overflow:hidden;touch-action:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.g-stage svg,.g-stage canvas{display:block;width:100%;height:auto}
.g-side{display:flex;flex-direction:column;gap:12px}
.g-task,.g-read,.g-best,.g-ctl:not(:empty){background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.g-task h2{font:600 1.05rem/1.2 var(--display);margin:0 0 4px}
.g-task p{margin:0;font-size:.95rem;color:var(--ink2)}
.g-ctl{display:flex;flex-direction:column;gap:8px}
.btn{border:0;border-radius:12px;padding:11px 16px;font:600 1.05rem var(--display);background:var(--ink);color:#fff;box-shadow:0 3px 0 #0e1530}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #0e1530}
.btn.alt{background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row .btn{flex:1}
.g-read{font-size:.95rem}
.g-read .big{font:700 2rem/1 var(--display)}
.g-read .lbl{font-size:.8rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.meter{height:10px;border-radius:6px;background:#eee9dc;overflow:hidden;margin:6px 0 2px}
.meter i{display:block;height:100%;background:var(--ok);width:0;transition:width .25s}
.g-best{font-size:.85rem;color:var(--ink2)}
.g-best b{color:var(--ink)}
.g-why{margin-top:14px;background:var(--sun-t);border-radius:14px;padding:12px 16px}
.g-why h3{font:600 1rem var(--display);margin:0 0 4px}
.g-why p{margin:0}
.g-note{font-size:.82rem;color:var(--ink2);margin:14px 2px 0;max-width:820px}
.g-proto{font-size:.8rem;color:var(--ink2);margin:6px 2px}
.g-proto a{color:var(--cold)}
.g-result .card{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:14px 16px;box-shadow:0 4px 0 var(--ink);text-align:center;animation:pop .35s cubic-bezier(.2,1.4,.5,1)}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.g-result .stars{font-size:2.2rem;letter-spacing:6px;color:var(--sun);line-height:1}
.g-result .stars .off{color:#e3dfd3}
.g-result h2{font:700 1.3rem var(--display);margin:8px 0 2px}
.g-result .sc{font:600 1.05rem var(--display);color:var(--ink2)}
.g-result .why{text-align:left;background:var(--sun-t);border-radius:12px;padding:10px 12px;margin:10px 0;font-size:.92rem}
.g-result .nb{color:var(--ok);font:700 .9rem var(--display)}
.tag{display:inline-block;font:600 .75rem var(--display);padding:2px 8px;border-radius:999px;background:var(--ok-t);color:var(--ok)}
@media (max-width:820px){
  .g-play{grid-template-columns:1fr}
  .g-top{padding:8px 12px;gap:10px}.g-main{padding:10px 12px 30px}
  .g-title h1{font-size:1rem}.g-sub{display:none}
  .ages button{padding:4px 8px;font-size:.8rem}
}
[hidden]{display:none!important}
/* dials (tornado) */
.dials{display:flex;flex-direction:column;gap:10px}
.dial .dn{font:600 .88rem var(--display);margin-bottom:4px}
.dial .dv{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.dial .dv button{border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:5px 2px 4px;font-size:.74rem;line-height:1.15;display:flex;flex-direction:column;align-items:center;gap:3px}
.dial .dv button i{display:block;height:6px;width:calc(25% + var(--n)*25%);border-radius:3px;background:var(--warm);opacity:calc(.3 + var(--n)*.23)}
.dial .dv button[aria-pressed=true]{border-color:var(--ink);background:var(--sun-t);box-shadow:0 2px 0 var(--ink)}
.dial.ro .dv button{cursor:default}
.dial.ro .dv button:not([aria-pressed=true]){opacity:.35}
.chef-t{background:var(--sun-t);border-radius:10px;padding:8px 10px}
.chef-t b{display:block;font:600 1.05rem var(--display)}
.lbl{font-size:.75rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;display:block}
.chef-msg{font-size:.9rem}
.chef-msg:empty{display:none}
.balloon{display:flex;flex-direction:column;gap:8px}
.picks .pk{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.picks .btn{font-size:.85rem;padding:8px 6px}
.off{color:#d8d4c8!important}
.sky-steps{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;border-top:1.5px solid var(--line);background:var(--card)}
.sky-steps .s{font:600 .8rem var(--display);padding:3px 10px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink2);background:var(--paper);transition:background .25s,color .25s}
.sky-steps .s.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sky-steps .s.no{opacity:.4;text-decoration:line-through}
.sky-cap{padding:6px 14px 12px;font-size:.95rem;min-height:2.9em;background:var(--card)}
.g-stage{transition:background .6s}
.g-stage.night{background:#26325c}
/* three.js views (2026-10-07) */
.g3{overflow:hidden;background:#fbf9f4}
.g3 canvas{cursor:grab}
.g3-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.g3-lab{position:absolute;left:0;top:0;white-space:nowrap;font:600 calc(15px*var(--fs,1))/1.1 var(--display);color:var(--ink);
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff,0 0 8px #fff;will-change:transform}
.g3-lab>span{display:inline-block;transform:translate(-50%,-50%);background:rgba(255,255,255,.82);border-radius:8px;padding:1px 7px;text-shadow:none}
.g3-lab.l>span{transform:translate(0,-50%)}.g3-lab.r>span{transform:translate(-100%,-50%)}
.g3-lab.warm{color:var(--warm)}.g3-lab.cold{color:var(--cold)}.g3-lab.dim{color:var(--ink2);font-size:calc(13px*var(--fs,1))}
.g3-lab.big{font-size:calc(19px*var(--fs,1))}
.g3-lab.chip>span{background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:2px 9px;text-shadow:none}
.g3-lab.night{color:#fff;text-shadow:0 0 4px #1d2547,0 0 6px #1d2547}
.g3-hint{position:absolute;right:10px;bottom:8px;font:600 .78rem var(--display);color:var(--ink2);background:#ffffffcc;border-radius:999px;padding:3px 10px;pointer-events:none;transition:opacity .6s}
.sort-keys{display:flex;gap:6px;flex-wrap:wrap}.sort-keys .btn{flex:1;min-width:64px;padding:10px 8px;font-size:.95rem}
/* ---- polish round 1 (2026-10-08): result overlay, state-aware panels, readout under the stage, phone layout ---- */
.g-left{min-width:0;display:flex;flex-direction:column;gap:10px}
.g-stagewrap{position:relative}
.g-readbar{display:flex;gap:12px;align-items:stretch}
.g-readbar .g-read{flex:1}
.g-readbar .g-best:empty{display:none}
.g-readbar .g-best{display:flex;align-items:center;white-space:nowrap}
.g-result{position:static}
.g-result .card{padding:12px 14px}
.g-result .why{font-size:.9rem}
.g-result .stars{font-size:2rem}
.g-result .stars span,.g-result .stars{display:inline-block}
body[data-state=result] .g-task,body[data-state=result] .g-ctl{display:none}
.g-result .recap{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:8px 0 0}
.g-result .recap span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:.95rem;border:1.5px solid var(--line)}
.g-result .recap span.y{background:var(--ok-t);border-color:var(--ok)}.g-result .recap span.n{background:var(--warm-t);border-color:var(--warm)}
body[data-state=run] .g-ctl{pointer-events:none}
body[data-state=run] .g-ctl .dial,body[data-state=run] .g-ctl .btn{opacity:.55}
.meter{position:relative;overflow:visible}
.meter i{border-radius:6px}
.meter.has-tk{margin-bottom:16px}
.meter b.tk{position:absolute;top:-3px;height:16px;width:2px;background:var(--ink);opacity:.5;transform:translateX(-1px);font:600 .62rem/1 var(--display);color:transparent;overflow:visible}
.meter b.tk::after{content:attr(data-s);position:absolute;top:17px;left:50%;transform:translateX(-50%);color:#c99a00;white-space:nowrap;letter-spacing:-1px}
.map-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--ink);color:#fff;font:600 .95rem var(--display);padding:7px 14px;border-radius:999px;box-shadow:0 3px 0 #0e1530;pointer-events:none;white-space:nowrap;z-index:2;animation:hintb 1.6s ease-in-out infinite}
.map-hint.ok{background:var(--ok);box-shadow:0 3px 0 #1d6b3c;animation:none}
@keyframes hintb{50%{transform:translate(-50%,3px)}}
.map-legend{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.88);border:1.5px solid var(--line);border-radius:10px;padding:6px 9px;font:600 .74rem var(--display);color:var(--ink);pointer-events:none;z-index:2}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}
.night-chip{position:absolute;right:10px;top:10px;background:var(--ink);color:#fff;font:600 .85rem var(--display);padding:5px 12px;border-radius:999px;z-index:2;pointer-events:none}
.g-stage svg{cursor:crosshair}
.verdict{border-radius:10px;padding:8px 10px;font-size:.92rem}
.verdict.ok{background:var(--ok-t);border:1.5px solid var(--ok)}
.verdict.no{background:var(--warm-t);border:1.5px solid var(--warm)}
.verdict b.h{display:block;font:700 1rem var(--display)}
.verdict .btn{margin-top:8px;width:100%}
.picks .btn.pick-ok{background:var(--ok);color:#fff;border-color:var(--ok);box-shadow:0 3px 0 #1d6b3c;opacity:1!important}
.picks .btn.pick-no{background:var(--warm-t);border-color:var(--warm);color:var(--late);box-shadow:0 3px 0 var(--warm);opacity:1!important}
.picks .btn[disabled]:not(.pick-ok):not(.pick-no){opacity:.35}
/* read-only balloon report = gauges, not buttons */
.dial.ro .dv button{border:0;background:none;box-shadow:none;padding:3px 1px;color:var(--ink);opacity:.5}
.dial.ro .dv button[aria-pressed=true]{opacity:1;background:var(--sun-t);border-radius:8px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--ink)}
.dial .dv button{font-size:.8rem;color:var(--ink)}
.dial .dv button:not([aria-pressed=true]){color:#46507a}
/* goal chain (kids) */
.chain{display:flex;align-items:center;gap:4px;margin-top:4px;font:600 .85rem var(--display)}
.chain span{padding:3px 8px;border-radius:999px;border:1.5px solid var(--line);background:#fff;opacity:.6}
.chain span.cur{border-color:var(--ink);opacity:1;box-shadow:0 2px 0 var(--ink)}
.chain span.done{background:var(--ok-t);border-color:var(--ok);opacity:1}
.chain em{font-style:normal;color:var(--ink2)}
/* stage stepper (tornado) */
.sky-steps{gap:0;align-items:center;padding:10px 12px 2px}
.sky-steps .s{border:0;background:none;padding:2px 4px 2px 18px;position:relative;color:var(--ink2);font-size:.78rem;border-radius:0}
.sky-steps .s::before{content:'';position:absolute;left:3px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:2px solid #b9bfd2;background:#fff;box-sizing:border-box}
.sky-steps .s+.s{margin-left:14px}
.sky-steps .s+.s::after{content:'';position:absolute;left:-14px;top:50%;width:15px;height:2px;background:#d6dae6}
.sky-steps .s.on{background:none;color:var(--ink)}
.sky-steps .s.on::before{background:var(--warm);border-color:var(--warm)}
.sky-steps .s.no{opacity:.55;text-decoration:none}
.sky-steps .s.no::before{border-style:dashed}
.sort-hint{font-size:.85rem;color:var(--ink2)}
@media (pointer:coarse){.sort-keys{display:none}}
@media (max-width:820px){
  .levels{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -12px 8px;padding:2px 12px 6px;scrollbar-width:none}
  .levels::-webkit-scrollbar{display:none}
  .levels button{flex:0 0 auto;padding:6px 10px;font-size:.85rem}
  .levels button:not([aria-current=true]) .nm{display:none}
  .g-stagewrap{position:sticky;top:50px;z-index:3;background:var(--paper);padding-bottom:4px}
  .g-side{gap:10px}
  .g-side .g-ctl{order:-1}
  .g-result{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;background:rgba(31,42,82,.35);padding:0 8px 8px}
  .g-result .card{width:100%;max-height:78vh;overflow:auto;border-radius:18px;box-shadow:0 -6px 30px rgba(31,42,82,.25),0 4px 0 var(--ink)}
  .g-stagewrap{position:static}
  .g-readbar{flex-direction:row}
  .g-read{padding:8px 12px}.g-read .big{font-size:1.6rem}
  .g-note,.g-proto{font-size:.76rem}
}
@media (max-width:820px){.map-legend{font-size:.62rem;padding:4px 6px;gap:1px;left:6px;bottom:6px}.map-legend i{width:8px;height:8px}.map-hint{font-size:.8rem;padding:5px 10px;top:6px}.night-chip{font-size:.72rem;top:6px;right:6px}}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.3)}100%{transform:none}}
.g-result .stars b{display:inline-block;animation:starpop .45s cubic-bezier(.2,1.5,.5,1) both;font-weight:400}
.g-result .stars b:nth-child(2){animation-delay:.15s}.g-result .stars b:nth-child(3){animation-delay:.3s}
.g-result .card{position:relative}
.g-result .x{position:absolute;right:8px;top:6px;border:0;background:none;font:600 1.5rem/1 var(--display);color:var(--ink2);padding:4px 8px}
@media (max-width:820px){
  .g-play{display:flex;flex-direction:column}
  .g-left{display:contents}
  .g-stagewrap{order:1}.g-side{order:2}.g-readbar{order:3}
  .g-side .g-task{order:2}
}
/* embedded in an explainer page (iframe, auto height) */
body.embed{background:transparent}
body.embed .g-main{padding-top:6px}
@media (max-width:820px){
  body.embed .g-stagewrap{position:static}
  body.embed .g-result{position:static;inset:auto;background:none;padding:0;display:block}
  body.embed .g-result .card{max-height:none;box-shadow:0 4px 0 var(--ink)}
}
@media (max-width:820px){ body.embed .g-stagewrap,body.embed .g-readbar,body.embed .g-side{width:100%} body.embed .g-stage svg,body.embed .g-stage canvas{width:100%!important} }