/* Hala-Kids game feel (2026-11-05): play-first game page and the Najdi
   end-of-round moment. Loaded last so it can tighten the inherited layers
   without editing them. Brand tokens only; reduced motion respected. */

/* 1. Play first: inside a game the catalog's four-button nav is noise. The
   breadcrumb already leads home, worlds and the library. */
.shell[data-view=game] .site-nav{display:none}
.shell[data-view=game] .game-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.shell[data-view=game] .game-topbar .breadcrumbs,.shell[data-view=game] .game-topbar .game-return{margin:0}
.shell[data-view=game] .game-topbar .breadcrumbs button,.shell[data-view=game] .game-topbar .game-return button{min-height:var(--touch-min);padding-block:4px}
.shell[data-view=game] .game-heading{margin-block:var(--space-2) var(--space-3);align-items:center}
.shell[data-view=game] .game-heading h1{font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.35;margin:0}
.shell[data-view=game] .game-heading .eyebrow{margin:0}
.shell[data-view=game] .game-heading>div>p:not(.eyebrow){margin:2px 0 0;font-size:.88rem;color:var(--ink-muted)}
.shell[data-view=game] .game-heading .tools button{min-height:var(--touch-min)}
.shell[data-view=game] .pro-brief{padding-block:8px;margin-bottom:0}
.shell[data-view=game] .pro-brief p{margin:0}
.shell[data-view=game] .hud{padding-block:6px}
.stage{scroll-margin-top:var(--space-3)}

@media(max-width:700px){
 .shell[data-view=game] .game-topbar{gap:6px}
 .shell[data-view=game] .game-topbar .breadcrumbs>span[aria-current]{display:none}
 .shell[data-view=game] .game-heading>div>p:not(.eyebrow){display:none}
 .shell[data-view=game] .game-heading .tools button{min-height:var(--touch-min);padding:4px 12px}
 .shell[data-view=game] .pro-brief{padding:6px 10px}
 .shell[data-view=game] .pro-brief strong{font-size:.75rem}
 .shell[data-view=game] .pro-brief p{font-size:.85rem}
 .shell[data-view=game] .pro-mark{display:none}
}

/* 2. The Najdi end-of-round moment: the chosen companion says it. */
.overlay-card .cheer-by{margin:0;font-size:.82rem;font-weight:700;color:var(--olive-deep)}
.overlay-card.celebration h2{font-family:var(--font-display);font-weight:600;color:var(--terracotta-deep)}
.overlay-card.retry h2{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.overlay-card{position:relative;isolation:isolate}
.overlay-card.celebration .overlay-seal{animation:hk-seal-press .55s cubic-bezier(.2,1.6,.4,1) both}

/* Clay confetti: little kiln-fired chips, not glitter. Decorative only. */
.clay-burst{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:-1}
.clay-burst i{position:absolute;top:22%;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:-70px;--r:-40deg}
.clay-burst i:nth-child(2){--x:140px;--y:-80px;--r:50deg;animation-delay:.04s}
.clay-burst i:nth-child(3){--x:-110px;--y:-130px;--r:80deg;animation-delay:.08s}
.clay-burst i:nth-child(4){--x:100px;--y:-140px;--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:-160px;--r:30deg;animation-delay:.12s}
.clay-burst i:nth-child(8){--x:55px;--y:-170px;--r:-25deg;animation-delay:.05s}
.clay-burst i:nth-child(9){--x:-170px;--y:-110px;--r:200deg;animation-delay:.14s}
.clay-burst i:nth-child(10){--x:165px;--y:-115px;--r:-190deg;animation-delay:.09s}
.clay-burst i:nth-child(11){--x:-20px;--y:-190px;--r:90deg;animation-delay:.16s}
.clay-burst i:nth-child(12){--x:25px;--y:-120px;--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-seal-press{0%{transform:scale(1.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}

@media(prefers-reduced-motion:reduce){
 .clay-burst{display:none}
 .overlay-card.celebration .overlay-seal{animation:none}
}

/* 3. Skip-link and route focus land on <main>; a ring around the whole page
   reads as a broken frame. Controls inside keep their own focus rings. */
#main:focus{outline:none}
@media(max-width:700px){.shell[data-view=game] .game-topbar .breadcrumbs>span[aria-hidden]:nth-of-type(2){display:none}}

/* 4. Today's game: one featured pick per local day, same for the whole house. */
.daily-pick{display:inline-grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);align-items:center;margin:var(--space-3) 0 var(--space-4);padding-block:var(--space-2);padding-inline: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);max-width:100%}
.daily-pick .daily-label{grid-row:span 2;align-self:stretch;display:grid;place-items:center;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--straw);color:var(--straw-ink);font-weight:700;font-size:.8rem}
.daily-pick strong{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.daily-pick small{color:var(--ink-muted);font-size:.8rem}