:root{--color-canvas:#fff8ec;--color-surface:#fff;--color-text:#253237;--color-focus:#1d4ed8;--color-shadow:#17252a2e;--color-menu-colors:#ffd166;--color-menu-animals:#9bf6a6;--color-menu-foods:#ffadad;--color-menu-numbers:#a0c4ff;--space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--radius-control:1rem;--radius-card:1.5rem;--touch-target:3rem;--content-width:60rem;--focus-ring:0 0 0 4px var(--color-focus)}*{box-sizing:border-box}html{color:var(--color-text);background:var(--color-canvas);font-synthesis:none;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-width:320px;min-height:100vh;margin:0}button{color:inherit;font:inherit}button:focus-visible,a:focus-visible{box-shadow:var(--focus-ring);outline:0}.skip-link{z-index:10;top:var(--space-1);left:var(--space-1);padding:var(--space-2);border-radius:var(--radius-control);background:var(--color-surface);position:fixed;transform:translateY(-150%)}.skip-link:focus{transform:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{width:min(var(--content-width), 100%);min-height:100vh;padding:max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));text-align:center;flex-direction:column;justify-content:center;margin:0 auto;display:flex}.view-heading h1,.board-view h1{margin:0;font-size:clamp(2rem,8vw,4rem);line-height:1.05}.view-heading p,.board-view p{margin:var(--space-1) 0 var(--space-4);font-size:clamp(1rem,3.5vw,1.4rem)}.menu-grid{gap:clamp(var(--space-2), 3vw, var(--space-4));grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.touch-card{min-width:var(--touch-target);min-height:var(--touch-target);border-radius:var(--radius-card);cursor:pointer;touch-action:manipulation;box-shadow:0 .3rem 0 var(--color-shadow);border:0}.touch-card:active{box-shadow:0 .1rem 0 var(--color-shadow);transform:translateY(.2rem)}.category-card{place-content:center;gap:var(--space-1);min-height:clamp(8rem,34vw,15rem);display:grid}.category-card__icon{font-size:clamp(3rem,12vw,6rem);line-height:1}.category-card strong{font-size:clamp(1.1rem,4vw,1.8rem)}.category-card--colors{background:var(--color-menu-colors)}.category-card--animals{background:var(--color-menu-animals)}.category-card--foods{background:var(--color-menu-foods)}.category-card--numbers{background:var(--color-menu-numbers)}.board-view{justify-content:flex-start;gap:var(--space-3);position:relative}.board-heading{padding-inline:min(4rem,18vw)}.home-button{z-index:2;top:max(var(--space-4), env(safe-area-inset-top));left:max(var(--space-4), env(safe-area-inset-left));border-radius:var(--radius-control);background:var(--color-surface);width:3.5rem;height:3.5rem;box-shadow:0 .2rem 0 var(--color-shadow);cursor:pointer;touch-action:manipulation;border:0;font-size:2rem;position:absolute}.color-grid{align-content:center;gap:clamp(var(--space-2), 2.5vw, var(--space-4));flex:1;grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.color-card{min-height:clamp(8rem,22vw,13rem);padding:var(--space-3);align-content:center;place-items:center;gap:var(--space-2);background:var(--color-surface);display:grid}.color-card__circle{aspect-ratio:1;background:var(--item-color);border:3px solid #17252a40;border-radius:50%;width:clamp(4.5rem,13vw,8rem)}.color-card strong{font-size:clamp(1rem,3vw,1.4rem)}.content-grid{align-content:start;gap:clamp(var(--space-2), 2.5vw, var(--space-4));flex:none;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;display:grid}.content-card{min-height:8rem;padding:var(--space-3);align-content:center;place-items:center;gap:var(--space-2);background:var(--color-surface);grid-template-rows:auto auto;display:grid}.content-card__visual{aspect-ratio:1;place-items:center;width:min(100%,10rem);min-height:0;display:grid}.content-card img{object-fit:contain;pointer-events:none;width:100%;height:100%}.asset-fallback{border-radius:var(--radius-card);background:#e2e8f0;place-items:center;width:100%;height:100%;font-size:clamp(2rem,8vw,5rem);display:grid}.asset-fallback[hidden]{display:none}.content-card strong{overflow-wrap:anywhere;max-width:100%;font-size:clamp(1.1rem,3vw,1.5rem)}.pagination{width:min(100%,22rem);min-height:var(--touch-target);grid-template-columns:var(--touch-target) minmax(0, 1fr) var(--touch-target);justify-content:center;align-items:center;gap:var(--space-3);margin-inline:auto;display:grid}.pagination__button{width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-control);background:var(--color-surface);box-shadow:0 .2rem 0 var(--color-shadow);cursor:pointer;touch-action:manipulation;border:0;font-size:2.5rem;line-height:1}.pagination__button:disabled{cursor:default;opacity:.35;box-shadow:none}.pagination__status{font-size:clamp(1rem,3vw,1.25rem);font-weight:700}.content-board .pagination__status{overflow-wrap:anywhere}.number-grid{gap:clamp(var(--space-2), 2vw, var(--space-4));grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.number-card{min-height:clamp(7rem,18vw,11rem);padding:var(--space-2);place-content:center;gap:var(--space-1);background:var(--color-surface);display:grid}.number-card__value{color:#5b21b6;font-size:clamp(3.5rem,10vw,6rem);line-height:.9}.number-card span{font-size:clamp(1rem,2.5vw,1.3rem);font-weight:700}.count-display{flex:1;place-items:center;min-height:9rem;display:grid}.count-display>p{margin:0}.count-result{align-items:center;gap:var(--space-4);grid-template-columns:auto minmax(0,1fr);width:min(100%,34rem);display:grid}.count-result__number{color:#5b21b6;font-size:clamp(4rem,16vw,8rem);line-height:1}.count-result__objects{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.count-result__objects span{aspect-ratio:1;background:hsl(calc(35deg + var(--object-index) * 55deg) 85% 65%);border:3px solid #17252a40;border-radius:50%;width:clamp(2rem,7vw,4rem)}.board-placeholder{justify-content:center;align-items:center}.placeholder-icon{font-size:clamp(5rem,25vw,10rem)}@media (width<=640px){.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-card{min-height:clamp(6.5rem,30vw,9rem)}.number-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.number-card{min-height:6.5rem}}@media (width<=380px),(height<=500px) and (orientation:landscape){.app-shell{padding:var(--space-3);justify-content:flex-start}.category-card{min-height:6.5rem}.color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.color-card{min-height:5.5rem;padding:var(--space-1)}.color-card__circle{width:clamp(2.75rem,12vh,4rem)}.content-card{padding:var(--space-1)}.pagination{gap:var(--space-1)}.number-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.number-card{min-height:5rem;padding:var(--space-1)}.number-card__value{font-size:clamp(2.5rem,12vh,4rem)}.count-display{min-height:5rem}}@media (width<=380px){.content-board .home-button{flex-shrink:0;align-self:flex-start;position:static}.content-board .board-heading{overflow-wrap:anywhere;padding-inline:0}.content-board .pagination{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}.content-board .pagination__status{grid-area:1/1/auto/-1}}@media (height<=500px) and (orientation:landscape){.content-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.content-card__visual{width:min(100%,5rem)}}@media (prefers-reduced-motion:no-preference){.touch-card{transition:transform .1s,box-shadow .1s}.color-card.is-playing .color-card__circle{animation:.28s ease-out color-pop}.content-board--animals .content-card.is-playing .content-card__visual{animation:.28s ease-out animal-pop}.content-board--foods .content-card.is-playing .content-card__visual{animation:.32s ease-in-out food-wiggle}.number-card.is-playing .number-card__value{animation:.28s ease-out number-pop}.count-result__objects span{animation:.24s ease-out both count-appear;animation-delay:calc(var(--object-index) * 45ms)}}@media (forced-colors:active){.touch-card,.home-button,.pagination__button,.count-result__objects span{border:2px solid buttontext}}@keyframes color-pop{50%{transform:scale(1.12)}}@keyframes animal-pop{50%{transform:scale(1.08)}}@keyframes food-wiggle{33%{transform:rotate(-5deg)}66%{transform:rotate(5deg)}}@keyframes number-pop{50%{transform:scale(1.12)}}@keyframes count-appear{0%{opacity:0;transform:scale(.8)}}