.hero-image {
  background-color: #c8f5ee;
  background-image: url("assets/little-learners-welcome-malta.png?v=1");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.spoken-prompt { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.spoken-prompt .instruction { margin:0; }
.repeat-prompt { border:0; border-radius:999px; padding:12px 16px; background:#fff0a8; box-shadow:0 4px 0 #e7bf4f; font-size:15px; }

/* Animated activity worlds */
#game-area .play-card { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,#fff 0 64%,#eefbdc 64%); }
#game-area .play-card > *:not(.activity-scene) { position:relative; z-index:2; }
.activity-scene { height:118px; margin:-20px -20px 20px; position:relative; overflow:hidden; border-radius:24px 24px 45% 45%; background:linear-gradient(#bdeeff 0 62%,#9ddd74 63%); z-index:1; }
.activity-scene span { position:absolute; display:block; filter:drop-shadow(0 4px 2px #2442); user-select:none; }
.activity-scene span:nth-child(1) { font-size:48px; top:10px; left:9%; animation:cloudFloat 7s ease-in-out infinite; }
.activity-scene span:nth-child(2) { font-size:68px; bottom:5px; left:43%; animation:mascotBounce 2.2s ease-in-out infinite; }
.activity-scene span:nth-child(3) { font-size:64px; bottom:-7px; right:8%; animation:sway 3.5s ease-in-out infinite; transform-origin:bottom; }
.activity-scene span:nth-child(4) { font-size:38px; bottom:8px; left:18%; animation:tinyFly 5s ease-in-out infinite; }
#game-area[data-game="more"] .activity-scene { background:linear-gradient(#c6f2ff 0 45%,#4fc5e8 46% 70%,#168fc7 71%); }
#game-area[data-game="pattern"] .activity-scene { background:linear-gradient(#c7efff 0 62%,#8ac66c 63%); }
#game-area[data-game="sound"] .activity-scene,#game-area[data-game="hunt"] .activity-scene { background:linear-gradient(#d2f5ff 0 55%,#77cf7a 56%); }
#game-area[data-game="shapes"] .activity-scene { background:radial-gradient(circle at 70% 20%,#7557bd,#27295f 70%); }
#game-area[data-game="colors"] .activity-scene { background:linear-gradient(#bdeeff 0 63%,#92dc72 64%); }
.objects { padding:12px; border-radius:28px; background:#fff8; text-shadow:0 5px 0 #fff; }
.objects:nth-child(even) { animation:softBob 2.4s ease-in-out infinite; }
.choice { position:relative; overflow:hidden; transition:transform .18s,filter .18s; background:linear-gradient(145deg,#fff,#e7f2ff); }
.choice:hover { transform:translateY(-5px) rotate(-1deg); filter:saturate(1.15); }
.choice::after { content:""; position:absolute; width:45px; height:140%; top:-20%; left:-70px; background:#fff8; transform:rotate(20deg); transition:left .5s; }
.choice:hover::after { left:120%; }
.color-dot { box-shadow:inset 7px 7px 10px #fff8,inset -6px -6px 10px #0002,0 7px 0 #2332; animation:colorPulse 2s ease-in-out infinite; }
.shape { filter:drop-shadow(0 7px 0 #7d274855); animation:shapeDance 3s ease-in-out infinite; }
.letter-big { display:inline-grid; place-items:center; min-width:150px; min-height:150px; padding:12px; border-radius:34px; background:linear-gradient(145deg,#f5e9ff,#d7b9ff); box-shadow:0 9px 0 #9b70cc,0 15px 30px #75539b33; animation:letterBreathe 2.4s ease-in-out infinite; }
.picture-word span { display:inline-block; animation:mascotBounce 2.2s ease-in-out infinite; filter:drop-shadow(0 8px 5px #2443); }
.sequence span { animation:trainRock 2.5s ease-in-out infinite; box-shadow:0 7px 0 #dcae39; }
.sequence span:nth-child(2) { animation-delay:.15s }.sequence span:nth-child(3) { animation-delay:.3s }.sequence span:nth-child(4) { animation-delay:.45s }
@keyframes cloudFloat { 50% { transform:translateX(22px) translateY(4px) } }
@keyframes mascotBounce { 0%,100% { transform:translateY(0) rotate(-2deg) } 50% { transform:translateY(-9px) rotate(2deg) } }
@keyframes sway { 0%,100% { transform:rotate(-3deg) } 50% { transform:rotate(4deg) } }
@keyframes tinyFly { 0%,100% { transform:translate(0,0) } 35% { transform:translate(25px,-22px) rotate(8deg) } 70% { transform:translate(47px,3px) rotate(-6deg) } }
@keyframes softBob { 50% { transform:translateY(-5px) } }
@keyframes colorPulse { 50% { transform:scale(1.1) } }
@keyframes shapeDance { 0%,100% { transform:rotate(-4deg) scale(1) } 50% { transform:rotate(5deg) scale(1.08) } }
@keyframes letterBreathe { 50% { transform:scale(1.05) rotate(1deg) } }
@keyframes trainRock { 0%,100% { transform:rotate(-2deg) } 50% { transform:translateY(-4px) rotate(2deg) } }
@media (max-width:760px) { .activity-scene { height:94px; margin:-10px -10px 15px }.activity-scene span:nth-child(2){font-size:54px}.activity-scene span:nth-child(3){font-size:50px} }
@media (prefers-reduced-motion:reduce) { .activity-scene span,.objects,.color-dot,.shape,.letter-big,.picture-word span,.sequence span { animation:none!important }.choice{transition:none} }

/* Count & Tap is intentionally tactile rather than another numeral quiz. */
.tap-objects { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; max-width:760px; margin:28px auto 18px; }
.tap-object { width:112px; height:112px; border:0; border-radius:50%; background:linear-gradient(145deg,#fff,#e6f8ff); box-shadow:0 8px 0 #75c9d8,0 13px 24px #2c74842b; position:relative; font-size:58px; transition:transform .18s,opacity .18s,filter .18s; animation:tapFloat 2.4s ease-in-out infinite; }
.tap-object:nth-child(2n) { animation-delay:.25s }.tap-object:nth-child(3n) { animation-delay:.5s }
.tap-object:not(:disabled):hover { transform:translateY(-7px) scale(1.05); }
.tap-object i { display:none; position:absolute; right:-2px; top:-4px; width:38px; height:38px; place-items:center; border-radius:50%; background:#42ba78; color:#fff; font-size:23px; font-style:normal; box-shadow:0 3px 0 #258a52; }
.tap-object.counted { animation:none; transform:scale(.86); filter:saturate(.55); opacity:.68; box-shadow:0 4px 0 #9ec7ce; }
.tap-object.counted i { display:grid; }
.count-progress { display:flex; justify-content:center; align-items:center; gap:10px; color:#557087; font-size:19px; }
.count-progress strong { display:grid; place-items:center; min-width:58px; height:58px; border-radius:18px; background:#fff0a8; color:#2457a6; font-size:32px; box-shadow:0 5px 0 #e0ba48; }
@keyframes tapFloat { 0%,100% { transform:translateY(0) rotate(-2deg) } 50% { transform:translateY(-8px) rotate(2deg) } }
@media(max-width:560px) { .tap-objects{gap:12px}.tap-object{width:86px;height:86px;font-size:45px}.tap-object i{width:31px;height:31px;font-size:18px} }
@media(prefers-reduced-motion:reduce) { .tap-object{animation:none!important} }

/* Big, playful activity menu */
#menu .heading { margin-bottom:28px; }
#menu .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1080px; margin-inline:auto; }
#menu .game-card { min-height:238px; padding:0; display:grid; grid-template-columns:46% 54%; align-items:stretch; overflow:hidden; border:4px solid #fff; border-radius:32px; box-shadow:0 9px 0 #38607a26,0 15px 32px #31536b20; position:relative; transition:transform .2s,box-shadow .2s; }
#menu .game-card:hover { transform:translateY(-5px); box-shadow:0 13px 0 #38607a26,0 20px 38px #31536b26; }
#menu .toy-button,#menu .activity-launch { border:0; background:transparent; box-shadow:none; margin:0; min-width:0; }
#menu .toy-button { position:relative; display:grid; place-items:center; padding:14px 4px 12px 14px; overflow:hidden; border-radius:28px 0 0 28px; }
#menu .toy-button::before { content:""; position:absolute; width:170px; height:170px; border-radius:50%; background:#fff8; box-shadow:inset 0 -18px 35px #8db6c523; }
#menu .toy-visual { width:100%; min-height:145px; position:relative; display:block; filter:drop-shadow(0 10px 6px #2443); }
#menu .toy-visual>span { position:absolute; font-size:clamp(62px,7vw,94px); line-height:1; animation:menuBob 2.7s ease-in-out infinite; }
#menu .toy-visual>span:nth-child(1) { left:2%; bottom:18px; transform:rotate(-7deg); }
#menu .toy-visual>span:nth-child(2) { left:34%; bottom:44px; animation-delay:.22s; z-index:2; }
#menu .toy-visual>span:nth-child(3) { right:0; bottom:15px; animation-delay:.44s; transform:rotate(7deg); }
#menu .toy-button[data-toy="first"] .toy-visual>span:nth-child(1) { left:0; bottom:18px; font-size:78px; }
#menu .toy-button[data-toy="first"] .toy-visual>span:nth-child(2) { left:36%; bottom:54px; z-index:1; font-size:66px; }
#menu .toy-button[data-toy="first"] .toy-visual>span:nth-child(3) { right:-2%; bottom:12px; z-index:2; font-size:76px; }
#menu .toy-button[data-toy="order"] .toy-visual>span:nth-child(1) { left:0; bottom:22px; font-size:76px; }
#menu .toy-button[data-toy="order"] .toy-visual>span:nth-child(2) { left:40%; bottom:52px; font-size:76px; }
#menu .toy-button[data-toy="order"] .toy-visual>span:nth-child(3) { right:-4%; bottom:12px; font-size:54px; }
#menu .toy-visual>span:first-child .dinosaur-art { display:block; width:112px; height:112px; object-fit:contain; }
#menu .tap-hint { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); background:#fff; color:#e2634d; padding:6px 11px; border-radius:99px; font-size:11px; letter-spacing:.06em; box-shadow:0 3px 0 #0001; opacity:.92; }
#menu .activity-launch { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; padding:28px 70px 28px 18px; border-left:2px solid #fff8; border-radius:0 28px 28px 0; }
#menu .activity-launch strong { font-size:clamp(24px,2.3vw,31px); line-height:1.05; color:#183b70; }
#menu .activity-launch small { font-size:17px; line-height:1.25; margin-top:10px; color:#335675; font-weight:800; }
#menu .activity-launch i { position:absolute; right:18px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#fff; color:#2d6db4; font-style:normal; font-size:21px; box-shadow:0 6px 0 #0002; }
#menu .activity-launch:active i { transform:translateY(calc(-50% + 5px)); box-shadow:0 1px 0 #0002; }
.toy-delight .toy-visual>span:nth-child(1),.toy-delight.scene-toy { animation:toySurprise .7s cubic-bezier(.2,.8,.25,1)!important; }
.toy-delight .toy-visual>span:nth-child(2) { animation:toySurprise .7s .06s cubic-bezier(.2,.8,.25,1)!important; }
.toy-delight .toy-visual>span:nth-child(3) { animation:toySurprise .7s .12s cubic-bezier(.2,.8,.25,1)!important; }
@keyframes menuBob { 0%,100% { margin-top:0 } 50% { margin-top:-8px } }
@keyframes toySurprise { 0%{transform:scale(1) rotate(0)}35%{transform:scale(1.24) rotate(-9deg)}65%{transform:scale(.92) rotate(8deg)}100%{transform:scale(1) rotate(0)} }

/* Every decorative scene object can be discovered by touch. */
.activity-scene .scene-toy { position:absolute; display:block; border:0; background:transparent; box-shadow:none; padding:0; margin:0; min-width:52px; min-height:52px; filter:drop-shadow(0 4px 2px #2442); user-select:none; border-radius:50%; }
.activity-scene .scene-toy:nth-child(1) { font-size:48px; top:10px; left:9%; animation:cloudFloat 7s ease-in-out infinite; }
.activity-scene .scene-toy:nth-child(2) { font-size:68px; bottom:5px; left:43%; animation:mascotBounce 2.2s ease-in-out infinite; }
.activity-scene .scene-toy:nth-child(3) { font-size:64px; bottom:-7px; right:8%; animation:sway 3.5s ease-in-out infinite; transform-origin:bottom; }
.activity-scene .scene-toy:nth-child(4) { font-size:38px; bottom:8px; left:18%; animation:tinyFly 5s ease-in-out infinite; }
.activity-scene .scene-toy:nth-child(2) .dinosaur-art { display:block; width:104px; height:104px; object-fit:contain; pointer-events:none; }
.activity-scene .scene-toy:focus-visible,.toy-button:focus-visible,.activity-launch:focus-visible { outline:5px solid #ffb13b; outline-offset:-5px; }
@media(max-width:820px) { #menu .grid{grid-template-columns:1fr;max-width:620px}#menu .game-card{min-height:220px}#menu .toy-visual>span{font-size:82px} }
@media(max-width:480px) { #menu .game-card{grid-template-columns:45% 55%;min-height:190px;border-radius:26px}#menu .toy-visual{min-height:125px}#menu .toy-visual>span{font-size:58px}#menu .toy-visual>span:first-child .dinosaur-art{width:84px;height:84px}#menu .activity-launch{padding:20px 54px 20px 10px}#menu .activity-launch strong{font-size:21px}#menu .activity-launch small{font-size:14px}#menu .activity-launch i{right:10px;width:42px;height:42px}.tap-hint{display:none} }
@media(prefers-reduced-motion:reduce) { #menu .toy-visual>span,.activity-scene .scene-toy{animation:none!important} }

/* Forgiving touch-first drag and drop games */
.drag-play-card { background:linear-gradient(#fff 0 60%,#f0f9dd 60%)!important; }
.drag-board { max-width:900px; margin:18px auto 0; }
.drop-row { display:flex; align-items:flex-end; justify-content:center; gap:clamp(24px,8vw,90px); min-height:235px; }
.drop-target { border:5px dashed #ffd35a; background:#fff9ce; box-shadow:0 8px 0 #e2ae31,0 14px 26px #805f1730; border-radius:34px; min-width:220px; min-height:205px; padding:12px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:transform .2s,filter .2s; }
.drop-target:active,.drop-target:focus-visible { transform:scale(1.03); }
.drop-target.drag-over { transform:scale(1.07); filter:saturate(1.3); box-shadow:0 0 0 10px #fff8,0 10px 0 #e2ae31; }
.basket-icon { font-size:118px; line-height:1; filter:drop-shadow(0 8px 4px #2443); }
.target-ball { position:absolute; font-size:56px; top:77px; }
.basket-small { min-width:175px; min-height:165px; }
.basket-small .basket-icon { font-size:88px }.basket-small .target-ball{font-size:34px;top:66px}
.drop-contents { position:absolute; inset:auto 8px 18px; display:flex; justify-content:center; align-items:flex-end; gap:2px; z-index:3; }
.drag-tray { min-height:145px; margin-top:28px; padding:16px 22px; border-radius:34px; background:#ffffffc7; display:flex; justify-content:space-evenly; align-items:center; gap:18px; box-shadow:inset 0 0 0 3px #fff; }
.drag-item { border:0; background:transparent; box-shadow:none; padding:8px; margin:0; touch-action:none; user-select:none; cursor:grab; position:relative; z-index:8; transition:transform .18s,filter .18s,opacity .18s; filter:drop-shadow(0 9px 5px #2444); }
.drag-item:active,.drag-item.dragging { cursor:grabbing; z-index:20; }
.drag-item.selected { background:#fff3a2; border-radius:50%; outline:6px solid #ffbe3d; animation:selectedPulse .8s ease-in-out infinite alternate; }
.ball-item { font-size:78px; }.ball-big { font-size:104px; }.ball-small { font-size:60px; }
.drag-item.placed { font-size:46px!important; filter:drop-shadow(0 4px 2px #2443); animation:dropPop .55s ease-out; }
.happy-drop { animation:happyBasket .65s ease-in-out; filter:saturate(1.2); }
.drag-nope { animation:dragNope .4s ease-in-out; }
.animal-row { gap:clamp(12px,5vw,55px); }
.animal-target { min-width:190px; min-height:220px; background:linear-gradient(#d8f5ff,#fff9ce); border-color:#fff; }
.animal { font-size:112px; line-height:1; filter:drop-shadow(0 8px 4px #2443); animation:mascotBounce 2.3s ease-in-out infinite; }
.food-halo { display:grid; place-items:center; width:76px; height:52px; margin-top:8px; border:4px dashed #ffce45; border-radius:24px; color:#f0a92d; font-size:30px; background:#fff9; }
.food-item { font-size:90px; }
.animal-target .drop-contents { bottom:17px; }.animal-target .drag-item.placed{font-size:48px!important}
@keyframes selectedPulse { to{transform:scale(1.08)} }
@keyframes dropPop { 0%{transform:scale(.5)}65%{transform:scale(1.25)}100%{transform:scale(1)} }
@keyframes happyBasket { 30%{transform:translateY(-10px) rotate(-2deg)}65%{transform:translateY(2px) rotate(2deg)} }
@keyframes dragNope { 25%{transform:translateX(-10px)}75%{transform:translateX(10px)} }
@media(max-width:700px){.drop-row{gap:12px;min-height:180px}.drop-target{min-width:145px;min-height:150px}.basket-icon{font-size:82px}.target-ball{font-size:40px;top:58px}.basket-small{min-width:125px;min-height:130px}.basket-small .basket-icon{font-size:68px}.basket-small .target-ball{top:50px}.drag-tray{margin-top:18px;min-height:115px;padding:10px;gap:6px}.ball-big{font-size:73px}.ball-small{font-size:50px}.animal-target{min-width:100px;min-height:155px;padding:6px}.animal{font-size:72px}.food-halo{width:56px;height:40px}.food-item{font-size:62px}}
@media(max-width:390px){.animal-row{gap:5px}.animal-target{min-width:88px}.drop-target{min-width:125px}.drag-play-card{padding-inline:12px!important}}
@media(prefers-reduced-motion:reduce){.drag-item.selected,.animal,.happy-drop,.drag-nope{animation:none!important}}

/* Generated 3D production art for the drag-and-drop games */
#game-area[data-game="bigsmall"] .activity-scene,
#game-area[data-game="feedfriends"] .activity-scene { display:none; }
#game-area[data-game="bigsmall"] .drag-play-card,
#game-area[data-game="feedfriends"] .drag-play-card { background:#fff!important; overflow:hidden; }
#game-area[data-game="bigsmall"] .drag-board,
#game-area[data-game="feedfriends"] .drag-board { max-width:960px; min-height:590px; padding:34px 40px 28px; border-radius:38px; background-position:center; background-size:cover; box-shadow:inset 0 0 0 5px #fff9,0 18px 38px #315a7130; position:relative; }
#game-area[data-game="bigsmall"] .drag-board { background-image:url("assets/game-art/big-small-room-v1.png"); }
#game-area[data-game="feedfriends"] .drag-board { background-image:url("assets/game-art/feed-friends-garden-v1.png"); }
.game-sprite { display:block; background-repeat:no-repeat; background-position:center; pointer-events:none; }
.size-sprite { background-image:url("assets/game-art/big-small-sprites-v1.png"); background-size:300% 200%; }
.friend-sprite { background-image:url("assets/game-art/feed-friends-sprites-v1.png"); background-size:300% 200%; }
.sprite-basket-big { background-image:url("assets/game-art/basket-big-v1.png"); background-size:contain; background-position:center; }
.sprite-basket-small { background-image:url("assets/game-art/basket-small-v1.png"); background-size:contain; background-position:center; }
.sprite-big-blue { background-position:100% 0; }
.sprite-big-orange { background-position:0 100%; }
.sprite-small-green { background-position:50% 100%; }
.sprite-small-purple { background-image:url("assets/game-art/purple-ball-v1.png"); background-size:contain; background-position:center; }
.sprite-apple-big-red { background-image:url("assets/game-art/apple-sprites-v1.png"); background-size:200% 200%; background-position:0 0; }
.sprite-apple-big-green { background-image:url("assets/game-art/apple-sprites-v1.png"); background-size:200% 200%; background-position:100% 0; }
.sprite-apple-small-yellow { background-image:url("assets/game-art/apple-sprites-v1.png"); background-size:200% 200%; background-position:0 100%; }
.sprite-apple-small-red { background-image:url("assets/game-art/apple-sprites-v1.png"); background-size:200% 200%; background-position:100% 100%; }
.sprite-duck-big-yellow { background-image:url("assets/game-art/duck-sprites-v1.png"); background-size:200% 200%; background-position:0 0; }
.sprite-duck-big-blue { background-image:url("assets/game-art/duck-sprites-v1.png"); background-size:200% 200%; background-position:100% 0; }
.sprite-duck-small-yellow { background-image:url("assets/game-art/duck-sprites-v1.png"); background-size:200% 210%; background-position:0 100%; }
.sprite-duck-small-blue { background-image:url("assets/game-art/duck-sprites-v1.png"); background-size:200% 210%; background-position:100% 100%; }
.sprite-rabbit,.sprite-monkey,.sprite-dog { background-size:300% 180%; }
.sprite-rabbit { background-position:0 0; }
.sprite-monkey { background-position:50% 0; }
.sprite-dog { background-position:100% 0; }
.sprite-carrot { background-image:url("assets/game-art/food-sprites-v1.png"); background-position:0 50%; background-size:400% 200%; }
.sprite-banana { background-image:url("assets/game-art/food-sprites-v1.png"); background-position:50% 50%; background-size:400% 200%; }
.sprite-bone { background-image:url("assets/game-art/food-sprites-v1.png"); background-position:93% 50%; background-size:400% 200%; }
.sprite-kitten,.sprite-mouse,.sprite-squirrel { background-image:url("assets/game-art/pet-friends-animals-v2.png"); background-size:360% 240%; }
.sprite-kitten { background-position:10% 50%; }
.sprite-mouse { background-position:50% 50%; }
.sprite-squirrel { background-position:90% 50%; }
.sprite-fish,.sprite-cheese,.sprite-acorn { background-image:url("assets/game-art/pet-friends-food-v1.png"); background-size:300% 200%; }
.sprite-fish { background-position:0 50%; }
.sprite-cheese { background-position:50% 50%; }
.sprite-acorn { background-position:100% 45%; }
.sprite-pony,.sprite-chicken,.sprite-cow { background-image:url("assets/game-art/farm-friends-animals-v2.png"); background-size:300% 200%; }
.sprite-pony { background-position:0 50%; }
.sprite-chicken { background-position:50% 50%; }
.sprite-cow { background-position:100% 50%; }
.sprite-apple-food,.sprite-corn,.sprite-grass { background-image:url("assets/game-art/farm-friends-food-v1.png"); background-size:300% 200%; }
.sprite-apple-food { background-position:0 50%; }
.sprite-corn { background-position:50% 25%; }
.sprite-grass { background-position:100% 50%; }
#game-area[data-game="bigsmall"] .drop-row { min-height:300px; gap:54px; }
#game-area[data-game="bigsmall"] .basket-target { border:0; background:transparent; box-shadow:none; padding:0; min-height:0; }
#game-area[data-game="bigsmall"] .basket-big { width:310px; min-width:310px; height:270px; }
#game-area[data-game="bigsmall"] .basket-small { width:235px; min-width:235px; height:220px; }
.basket-target>.game-sprite { width:100%; height:100%; filter:drop-shadow(0 13px 10px #342b2345); transition:transform .2s,filter .2s; }
.basket-target.drag-over>.game-sprite { transform:scale(1.08); filter:drop-shadow(0 0 12px #fff) drop-shadow(0 13px 10px #342b2345); }
#game-area[data-game="bigsmall"] .basket-target .drop-contents { inset:28px 25px auto; height:92px; align-items:center; }
#game-area[data-game="bigsmall"] .basket-small .drop-contents { inset:35px 18px auto; height:66px; }
#game-area[data-game="bigsmall"] .drag-tray,
#game-area[data-game="feedfriends"] .drag-tray { margin-top:12px; background:#fffde6d9; border:4px solid #fff; box-shadow:0 12px 26px #315a7130,inset 0 0 0 2px #ffd45c; backdrop-filter:blur(3px); }
.ball-item { width:112px; height:112px; padding:0; }
.ball-item.ball-big { width:140px; height:140px; }
.ball-item.ball-small { width:92px; height:92px; }
.ball-item>.game-sprite,.food-item>.game-sprite { width:100%; height:100%; }
.basket-target .drag-item.placed { width:80px!important; height:80px!important; padding:0; }
.basket-small .drag-item.placed { width:56px!important; height:56px!important; }
#game-area[data-game="feedfriends"] .animal-row { min-height:335px; gap:8px; align-items:flex-end; }
#game-area[data-game="feedfriends"] .animal-target { width:260px; min-width:260px; min-height:320px; padding:0; border:0; background:transparent; box-shadow:none; justify-content:flex-start; }
.animal-target>.game-sprite { width:245px; height:245px; filter:drop-shadow(0 12px 8px #2445); animation:mascotBounce 2.4s ease-in-out infinite; }
.food-halo { margin-top:-3px; width:110px; height:62px; border:5px dashed #fff; background:#ffe36ae8; box-shadow:0 6px 15px #754f2540; }
.food-item { width:132px; height:132px; padding:0; }
.animal-target .drop-contents { inset:auto 0 9px; height:70px; align-items:center; }
.animal-target .drag-item.placed { width:66px!important; height:66px!important; padding:0; }
#game-area[data-game="bigsmall"] .drag-item,
#game-area[data-game="feedfriends"] .drag-item { font-size:0; }
#menu .toy-button[data-toy="bigsmall"] .toy-visual>span,
#menu .toy-button[data-toy="feedfriends"] .toy-visual>span { width:31%; height:82%; font-size:0; background-repeat:no-repeat; filter:drop-shadow(0 8px 6px #1235); }
#menu .toy-button[data-toy="bigsmall"] .toy-visual>span { background-image:url("assets/game-art/big-small-sprites-v1.png"); background-size:300% 200%; }
#menu .toy-button[data-toy="bigsmall"] .toy-visual>span { height:auto; aspect-ratio:1 / 1; }
#menu .toy-button[data-toy="bigsmall"] .toy-visual>span:nth-child(1){background-position:100% 0}
#menu .toy-button[data-toy="bigsmall"] .toy-visual>span:nth-child(2){background-image:url("assets/game-art/basket-big-v1.png");background-size:contain;background-position:center}
#menu .toy-button[data-toy="bigsmall"] .toy-visual>span:nth-child(3){background-position:50% 100%}
#menu .toy-button[data-toy="feedfriends"] .toy-visual>span { background-image:url("assets/game-art/feed-friends-sprites-v1.png"); background-size:300% 200%; }
#menu .toy-button[data-toy="feedfriends"] .toy-visual>span:nth-child(1){background-position:0 0;background-size:300% 180%}
#menu .toy-button[data-toy="feedfriends"] .toy-visual>span:nth-child(2){background-image:url("assets/game-art/food-sprites-v1.png");background-position:0 50%;background-size:400% 200%}
#menu .toy-button[data-toy="feedfriends"] .toy-visual>span:nth-child(3){background-position:100% 0;background-size:300% 180%}
@media(max-width:700px){
 #game-area[data-game="bigsmall"] .drag-board,#game-area[data-game="feedfriends"] .drag-board{min-height:520px;padding:20px 10px 18px;border-radius:28px;background-position:center}
 #game-area[data-game="bigsmall"] .drop-row{min-height:260px;gap:5px}
 #game-area[data-game="bigsmall"] .basket-big{width:205px;min-width:205px;height:205px}
 #game-area[data-game="bigsmall"] .basket-small{width:155px;min-width:155px;height:155px}
 #game-area[data-game="bigsmall"] .basket-target .drop-contents{inset:29px 12px auto;height:55px}
 .ball-item.ball-big{width:100px;height:100px}.ball-item.ball-small{width:72px;height:72px}
 #game-area[data-game="feedfriends"] .animal-row{min-height:270px;gap:0}
 #game-area[data-game="feedfriends"] .animal-target{width:32%;min-width:0;min-height:250px}
 .animal-target>.game-sprite{width:150px;max-width:100%;height:175px}
 .food-item{width:94px;height:94px}.food-halo{width:78px;height:52px}
}
@media(max-width:420px){
 #game-area[data-game="bigsmall"] .drag-board,#game-area[data-game="feedfriends"] .drag-board{margin-inline:-4px;padding-inline:5px;min-height:480px}
 #game-area[data-game="bigsmall"] .basket-big{width:175px;min-width:175px;height:175px}
 #game-area[data-game="bigsmall"] .basket-small{width:135px;min-width:135px;height:135px}
 #game-area[data-game="bigsmall"] .drag-tray,#game-area[data-game="feedfriends"] .drag-tray{gap:0;padding-inline:3px}
 .ball-item.ball-big{width:82px;height:82px}.ball-item.ball-small{width:60px;height:60px}
 .animal-target>.game-sprite{height:158px}.food-item{width:82px;height:82px}
}
.phonic-picture-pop {
  position: fixed;
  z-index: 1000;
  inset: 50% auto auto 50%;
  display: grid;
  width: clamp(9rem, 30vw, 15rem);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border: clamp(6px, 1.2vw, 12px) solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe8 0 32%, #ffe37a 68%, #ffbd59 100%);
  box-shadow: 0 1.4rem 3.5rem rgba(69, 50, 108, .34), 0 0 0 999vmax rgba(52, 39, 79, .22);
  pointer-events: none;
  animation: phonic-picture-arrive .42s cubic-bezier(.2, 1.55, .45, 1) both;
}

.phonic-picture-pop span {
  display: block;
  font-size: clamp(5rem, 18vw, 10rem);
  filter: drop-shadow(0 .4rem .35rem rgba(80, 54, 32, .18));
  animation: phonic-picture-bob 1s ease-in-out infinite alternate;
}

.phonic-picture-pop.leaving {
  animation: phonic-picture-leave .25s ease-in both;
}

@keyframes phonic-picture-arrive {
  from { opacity: 0; transform: translate(-50%, -42%) scale(.35) rotate(-12deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes phonic-picture-bob {
  to { transform: translateY(-.35rem) scale(1.04); }
}

@keyframes phonic-picture-leave {
  to { opacity: 0; transform: translate(-50%, -58%) scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .phonic-picture-pop,
  .phonic-picture-pop span {
    animation: none;
  }
}