/* Motion is transform/opacity based; procedural scenery runs off the UI thread. */
body{scrollbar-color:#59628c #0e1330}button,a{-webkit-tap-highlight-color:transparent}button{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}button:hover:not(:disabled){transform:translateY(-2px)}button:active:not(:disabled){transform:translateY(1px) scale(.96)}.topics button{animation:chip-in .35s both}.topics button:nth-child(3n+2){animation-delay:45ms}.topics button:nth-child(3n){animation-delay:90ms}.topics button[aria-pressed=true]{box-shadow:0 0 0 1px #ffe9a0,inset 0 -3px #df9f27}.segments button[aria-pressed=true]{animation:pick .2s ease}.nav-button,.back-link{transition:color .16s,transform .16s}.back-link:hover{transform:translateX(3px);color:#ffeaa4}.wordmark{animation:title-arrive .65s cubic-bezier(.2,1.35,.3,1) both}.setup{animation:panel-arrive .5s .12s both}.brand{animation:chip-in .4s both}.climber{will-change:transform;animation:idle-float 3.2s ease-in-out infinite}.climber svg{transform-origin:50% 100%;animation:balloon-sway 2.7s ease-in-out infinite}.climber img{transform-origin:50% 20%;animation:creature-float 2.4s ease-in-out infinite}.climber svg path:nth-child(3){animation:balloon-light 3s ease-in-out infinite}.climber svg path:nth-child(4){animation:balloon-light 3s 1s ease-in-out infinite}body[data-phase=rising] .climber{animation:lift-float .5s ease-in-out infinite}body[data-phase=rising] .climber svg{animation:balloon-sway .65s ease-in-out infinite}body[data-phase=rising] .climber img{animation:creature-lift .45s ease-in-out infinite}.climber.celebrate img{animation:happy-hop .7s cubic-bezier(.2,.8,.3,1) 2}.climber.slump img{animation:sad-slump .65s ease-out both}
#common-play{height:var(--play-height,100dvh)}.question,.reveal{scrollbar-width:thin;scrollbar-color:#64709c #131a3f}.panel-enter{animation:panel-arrive .38s cubic-bezier(.2,.9,.3,1) both}.dock-enter{animation:dock-arrive .4s .08s both}.result-enter{animation:result-arrive .45s cubic-bezier(.18,1.2,.4,1) both}.hud-score,.hud-progress,.hud-actions{animation:hud-in .35s ease both}body[data-phase=rising] .dock{opacity:0;transform:translateY(16px);pointer-events:none}.dock{transition:opacity .25s,transform .25s}.hud-score{font-variant-numeric:tabular-nums;min-width:76px}.hud-score strong{font-size:28px}body[data-phase=reveal] .hud-score{animation:score-bump .4s ease}.hud-progress #squares i{transition:background .2s,transform .2s}.hud-progress #squares i.current{animation:square-pop .3s ease}#clock{position:relative;border:0;outline:0;background:#0e1330;font-variant-numeric:tabular-nums}#clock:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(#f5f7ff var(--remaining,100%),#3d4a8c 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}#clock.hot{animation:timer-pulse .8s ease-in-out infinite}#clock.hot:before{background:conic-gradient(#ff7a59 var(--remaining,100%),#3d4a8c 0)}
#rise-banner{position:absolute;top:58%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;width:max-content;max-width:calc(100% - 60px);padding:14px 22px 18px;background:#0e1330ed;border:2px solid var(--band,#ffc83d);box-shadow:0 4px #0005;border-radius:4px;overflow:hidden;text-align:center;font-family:Pixelify;font-size:24px}#rise-banner span{overflow-wrap:anywhere}#rise-banner strong{color:var(--band);font-size:32px;white-space:nowrap}#rise-progress{position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--band);transform-origin:left;transform:scaleX(0)}#rise-banner.panel-enter{animation:rise-label .3s ease-out both}#celebration{position:absolute;top:46%;left:50%;pointer-events:none;z-index:5}#celebration i{position:absolute;width:6px;height:6px;background:var(--color);animation:spark-out .85s var(--delay) ease-out both;box-shadow:0 0 0 1px #fff5}
.reveal{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:8px;height:310px;max-height:calc(100% - 70px);padding:12px 14px;overflow:hidden}.reveal h2{grid-column:1/-1;font-size:32px;margin:0;line-height:1.05}.band-row{grid-column:1/-1;margin:0}.answer-summary{grid-column:1/-1;font-size:15px}.alternatives-label{display:none}#alternatives{grid-column:1/-1;padding-left:22px;margin:0;min-height:0;font-size:15px;line-height:1.45;overflow:auto}#alternatives li{padding-left:0}#next{grid-column:2;grid-row:5;min-height:44px;align-self:end;padding:7px 20px}.result-enter #bands i{transform-origin:left;animation:band-grow .35s both}.result-enter #bands i:nth-child(2){animation-delay:60ms}.result-enter #bands i:nth-child(3){animation-delay:120ms}.result-enter #bands i:nth-child(4){animation-delay:180ms}.result-enter #bands i:nth-child(5){animation-delay:240ms}.result-enter #earned{animation:score-bump .45s .25s both}.result-enter #alternatives li{animation:list-arrive .3s both}.result-enter #alternatives li:nth-child(2){animation-delay:50ms}.result-enter #alternatives li:nth-child(3){animation-delay:100ms}.result-enter #alternatives li:nth-child(4){animation-delay:150ms}.result-enter #alternatives li:nth-child(5){animation-delay:200ms}.result-enter #next{animation:chip-in .25s .3s both}.end-card .result-line{animation:list-arrive .35s both}.field{transition:border-color .15s,box-shadow .15s}.field:focus-within{box-shadow:0 0 0 3px #ffc83d24}#feedback:not([hidden]){animation:panel-arrive .2s ease}
@keyframes idle-float{0%,100%{transform:translate(-50%,0) rotate(-2deg)}50%{transform:translate(-50%,-7px) rotate(2deg)}}@keyframes balloon-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}@keyframes creature-float{0%,100%{transform:rotate(3deg) scaleY(1)}50%{transform:rotate(-3deg) scaleY(.96)}}@keyframes balloon-light{50%{opacity:.82}}@keyframes lift-float{0%,100%{transform:translate(-50%,-8px) rotate(var(--lean,-6deg))}50%{transform:translate(-50%,-12px) rotate(var(--lean,-6deg))}}@keyframes creature-lift{50%{transform:rotate(-8deg) scaleY(.95)}}@keyframes happy-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-12px) rotate(-12deg)}65%{transform:translateY(-5px) rotate(10deg)}}@keyframes sad-slump{50%{transform:translateY(8px) rotate(12deg)}100%{transform:translateY(5px) rotate(8deg)}}@keyframes chip-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes pick{50%{transform:scale(.92)}}@keyframes title-arrive{from{opacity:0;transform:translateY(-18px) scale(.94)}to{opacity:1;transform:none}}@keyframes panel-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes dock-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes result-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes hud-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}@keyframes score-bump{0%{transform:scale(.92)}45%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes square-pop{50%{transform:scale(1.25)}}@keyframes timer-pulse{50%{transform:scale(1.06)}}@keyframes rise-label{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes spark-out{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(140deg) scale(.4)}}@keyframes band-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes list-arrive{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media(max-width:519px){.reveal{height:310px;margin-right:36px;width:calc(100% - 36px);gap:8px}.reveal h2{font-size:27px}.answer-summary{font-size:13px}#alternatives{font-size:14px}.hud-score strong{font-size:24px}#rise-banner{font-size:20px;padding:12px 16px 16px;gap:12px}#rise-banner strong{font-size:27px}.setup h2{font-size:29px}}
@media(max-height:550px){.reveal{height:220px;gap:5px;padding:8px 12px}.reveal h2{font-size:26px}#alternatives{display:block;font-size:12px}.reveal .band-row strong{font-size:20px}#next{min-height:34px;padding:4px 16px}#rise-banner{top:43%}.hud-progress{top:12px}}
/* Card motion is owned by WAAPI so interrupted entrances can exit from their
   current position, without a forced layout to restart a CSS animation. */
.panel-enter,.dock-enter,.result-enter,#rise-banner.panel-enter{animation:none}
.question,.reveal,.end-card{transform-origin:50% 30%}
body:not([data-phase=answer]) .dock{opacity:0;transform:translateY(12px);pointer-events:none}
#rules{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;border:0;margin:0;padding:0;transition:grid-template-rows .36s cubic-bezier(.16,1,.3,1),opacity .22s ease,visibility 0s .36s}
#rules[aria-hidden=false]{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .36s cubic-bezier(.16,1,.3,1),opacity .28s .04s ease,visibility 0s}
.rules-content{min-height:0;overflow:hidden}.rules-copy{border-top:1px solid #3d4a8c40;margin-top:16px;padding-top:8px}
#rules-toggle{transition:transform .2s ease,background .2s ease}#rules-toggle[aria-expanded=true]{background:#ffc83d;color:#14183a}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.climber{transform:translateX(-50%)}#rise-banner{transform:translateX(-50%)}}