:root{--paper:#FAF3E3;--card:#FFFBF2;--paper-deep:#F2E6CC;--ink:#432E33;--ink-muted:#6E5A5F;--leaf:#4F7059;--leaf-shadow:#3A5442;--leaf-soft:#DCE6D3;--sun:#D4AE48;--sun-soft:#F4E3B0;--tint:#E8E6F1;--tint-deep:#D3D0E4;--pink:#d98a8a;--teal:#4F7059;--sky:#8fb3c9;--green:#4F7059;--bg1:#FAF3E3;--bg2:#DCE6D3;
--hand:'Pangolin','Comic Sans MS',cursive;--ui:'Rubik',ui-rounded,system-ui,sans-serif;--sk:255px 14px 225px 14px/14px 225px 14px 255px;--sk2:18px 30px 16px 28px/28px 16px 30px 18px;
--shadow:0 5px 0 rgba(67,46,51,.2)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--ui);color:var(--ink);background:var(--paper);touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
svg{display:block}
#app{position:fixed;inset:0}
#top{position:absolute;top:0;left:0;right:0;height:112px;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;z-index:20;gap:12px}
#main{position:absolute;top:112px;bottom:0;left:0;right:0;overflow:hidden}
.btn{min-width:96px;min-height:96px;border-radius:var(--sk2);background:var(--card);border:2.5px solid var(--ink);box-shadow:var(--shadow);font-size:50px;line-height:1;display:grid;place-items:center;transition:transform .12s}
.btn:active{transform:scale(.93) translateY(3px)}
.btn.big{min-width:112px;min-height:112px;font-size:58px}
.btn.next{background:var(--leaf);color:var(--card);position:absolute;right:22px;bottom:22px;z-index:15;animation:pulse 1.4s infinite}
.btn.small{min-width:96px;min-height:96px}
.mode-big .btn{min-width:84px;min-height:84px;font-size:44px}
.mode-big .btn.big{min-width:96px;min-height:96px}
.steps{display:flex;gap:10px;background:var(--card);border:2.5px solid var(--ink);border-radius:var(--sk2);padding:8px 14px}
.steps span{font-size:30px;opacity:.35;filter:grayscale(.6);transition:.3s}
.steps span.done{opacity:.8;filter:none}
.steps span.on{opacity:1;filter:none;transform:scale(1.35)}
.chips{display:flex;gap:8px}
.chip{width:64px;height:64px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink);font-size:34px;box-shadow:0 4px 0 rgba(67,46,51,.2)}
.chip.on{outline:5px solid var(--sun)}
.spacer{flex:1}
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(67,46,51,.5);backdrop-filter:blur(6px)}
.overlay.bye{background:var(--leaf-soft)}
.bye-in{display:flex;flex-direction:column;align-items:center;gap:24px}
.mascot-big{width:min(52vw,320px);animation:float 3s ease-in-out infinite}
.bye-btns{display:flex;gap:28px}
.overlay .card{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--sk2);padding:28px;position:relative;text-align:center;box-shadow:var(--shadow)}
.gate-q{font-family:var(--hand);font-size:48px;font-weight:700;margin-bottom:18px}
.gate-a{display:flex;gap:14px}.gate-a button{width:96px;height:96px;border-radius:24px;background:var(--sun-soft);border:2.5px solid var(--ink);font-size:40px;font-weight:800;color:var(--ink)}
.gate-x{position:absolute;top:-14px;right:-14px;width:48px;height:48px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink);box-shadow:var(--shadow)}
.spark{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-50%);animation:spark 1s ease-out forwards}
.mascot{position:absolute;left:14px;bottom:10px;width:112px;z-index:12}
.mascot.hint{animation:wave .7s ease-in-out 3}
.nameword{position:absolute;top:12px;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:14;background:var(--sun-soft);border:2.5px solid var(--ink);border-radius:var(--sk2);padding:6px 34px;font-family:var(--hand);font-size:50px;font-weight:700;box-shadow:var(--shadow);pointer-events:none;animation:popin .4s}
.hintglow{animation:hintpulse 1s ease-in-out infinite}
.wiggle{animation:wiggle .6s}
.popin{animation:popin .45s}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
@keyframes popin{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spark{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));opacity:0}}
@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg) translateY(-8px)}70%{transform:rotate(10deg) translateY(-8px)}}
@keyframes hintpulse{0%,100%{filter:drop-shadow(0 0 0 #ffc93c)}50%{filter:drop-shadow(0 0 14px #ffb300)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}

/* hand-drawn feel for SVG art */
.buddy-svg,.stagebox>svg,.card-d svg,.shelf svg,.tile svg,.bone svg{filter:url(#rough)}
.buddy-svg .o{stroke:#432E33;stroke-width:3.5;stroke-linejoin:round}
.tape{display:inline-block;background:var(--sun-soft);padding:4px 14px;font-family:var(--hand);transform:rotate(-2deg);box-shadow:0 2px 0 rgba(67,46,51,.15)}
/* narrow phones: progress becomes dots so the two 96px buttons always fit */
@media (max-width:480px){
  #top{padding:8px 10px;gap:8px}
  .steps{gap:8px;padding:10px 12px}
  .steps span{font-size:0;width:14px;height:14px;border-radius:50%;background:var(--ink);opacity:.25;filter:none}
  .steps span.done{opacity:.6}
  .steps span.on{opacity:1;transform:scale(1.4);background:var(--leaf)}
  .chips .chip{width:52px;height:52px;font-size:28px}
}
.overlay .card{max-width:calc(100vw - 32px)}
@media (max-width:480px){.overlay.gate .card{padding:18px}.gate-a{gap:8px}.gate-x{top:-12px;right:-8px}.gate-q{font-size:40px}}