/* Hala-Kids learning game feel (2026-11-05): a Najdi cheer and a clay pop on
   a solved round, a seal on finished rounds, a soft nudge (never red) on a
   miss. Brand tokens only; everything decorative stops under reduced motion. */
/* Clay chips fly past the card edge; clip sideways so a 320px page never
   gains a horizontal scrollbar (verify-game-feel.mjs guards this). */
.live-site #game{overflow-x:clip}
.live-site .round-cheer{position:relative;isolation:isolate;margin:var(--space-4) 0 var(--space-2);text-align:center}
.live-site .round-cheer>span{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.4;color:var(--terracotta-deep);animation:hk-pop .5s cubic-bezier(.2,1.6,.4,1) both}

/* Finished rounds become little pressed seals on the path. */
.live-site .step{transition:background-color .3s ease,transform .3s ease}
.live-site .step.past{background:var(--olive-deep);border-radius:var(--radius-pill)}
.live-site .step.current{background:var(--terracotta);transform:scaleY(1.4)}

/* A miss is a gentle head-shake, not an error. */
.live-site .feedback.nudge{animation:hk-nudge .45s ease both}

/* Six of six: a seal pressed onto the world scene. */
.live-site .completion{position:relative;isolation:isolate}
.live-site .celebration-scene{position:relative}
.live-site .done-seal{position:absolute;inset-block-end:-.6rem;inset-inline-start:50%;translate:50% 0;display:grid;place-items:center;inline-size:3.5rem;block-size:3.5rem;border-radius:50%;background:var(--straw);color:var(--straw-ink);font-size:1.6rem;box-shadow:var(--shadow-press);animation:hk-seal .6s .15s cubic-bezier(.2,1.6,.4,1) both}
.live-site .completion h2{font-family:var(--font-display);font-weight:600;color:var(--terracotta-deep)}

.clay-burst{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:-1}
.clay-burst i{position:absolute;top:30%;left:50%;width:10px;height:7px;border-radius:3px 5px 2px 4px;background:var(--terracotta);opacity:0;animation:hk-chip 1.1s ease-out forwards}
.clay-burst i:nth-child(3n){background:var(--olive)}
.clay-burst i:nth-child(3n+1){background:var(--straw)}
.clay-burst i:nth-child(4n){width:7px;height:7px;border-radius:50%}
.clay-burst i:nth-child(1){--x:-150px;--y:-50px;--r:-40deg}
.clay-burst i:nth-child(2){--x:140px;--y:-60px;--r:50deg;animation-delay:.04s}
.clay-burst i:nth-child(3){--x:-110px;--y:-100px;--r:80deg;animation-delay:.08s}
.clay-burst i:nth-child(4){--x:100px;--y:-110px;--r:-70deg;animation-delay:.02s}
.clay-burst i:nth-child(5){--x:-190px;--y:10px;--r:120deg;animation-delay:.1s}
.clay-burst i:nth-child(6){--x:185px;--y:0;--r:-110deg;animation-delay:.06s}
.clay-burst i:nth-child(7){--x:-60px;--y:-130px;--r:30deg;animation-delay:.12s}
.clay-burst i:nth-child(8){--x:55px;--y:-140px;--r:-25deg;animation-delay:.05s}
.clay-burst i:nth-child(9){--x:-170px;--y:-90px;--r:200deg;animation-delay:.14s}
.clay-burst i:nth-child(10){--x:165px;--y:-95px;--r:-190deg;animation-delay:.09s}
.clay-burst i:nth-child(11){--x:-20px;--y:-150px;--r:90deg;animation-delay:.16s}
.clay-burst i:nth-child(12){--x:25px;--y:-100px;--r:-95deg;animation-delay:.03s}
.clay-burst i:nth-child(13){--x:-130px;--y:40px;--r:160deg;animation-delay:.11s}
.clay-burst i:nth-child(14){--x:125px;--y:45px;--r:-150deg;animation-delay:.07s}
@keyframes hk-chip{0%{opacity:0;transform:translate(-50%,0) scale(.4) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(var(--y) + 60px)) scale(1) rotate(var(--r))}}
@keyframes hk-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes hk-seal{0%{transform:scale(1.8) rotate(-15deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes hk-nudge{0%,100%{transform:none}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

@media(prefers-reduced-motion:reduce){
 .clay-burst{display:none}
 .live-site .round-cheer>span,.live-site .done-seal,.live-site .feedback.nudge{animation:none}
 .live-site .step{transition:none}
}

/* Today's learning game: same pick for the whole house, a new world tomorrow. */
.live-site .daily-pick{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);align-items:center;inline-size:fit-content;max-inline-size:100%;margin-block:var(--space-3) var(--space-4);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--surface-raised);border:1px solid var(--surface-sunken);border-radius:var(--radius-pill);box-shadow:var(--shadow-edge);color:var(--ink);text-decoration:none;min-block-size:var(--touch-kid)}
.live-site .daily-pick:hover{border-color:var(--olive-deep)}
.live-site .daily-pick:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.live-site .daily-pick .daily-label{grid-row:span 2;align-self:stretch;display:grid;place-items:center;padding-inline:var(--space-3);border-radius:var(--radius-pill);background:var(--straw);color:var(--straw-ink);font-weight:700;font-size:.8rem}
.live-site .daily-pick strong{font-family:var(--font-display);font-weight:600;font-size:1.1rem;line-height:1.4;overflow-wrap:anywhere}
.live-site .daily-pick small{color:var(--ink-muted);font-size:.8rem}