/* The newer games (games2.js). Each is played over its scene (world.css,
   .played), so boards here are see-through and the pieces carry their own
   white cards and shadows. */

/* drag and drop */
.dnd-ghost { opacity: .92; filter: drop-shadow(0 18px 18px rgba(15,43,92,.3)); transition: none !important; }
.dnd-lifted { opacity: .3; }
.dnd-picked { outline: 6px solid #38bdf8; outline-offset: 3px; transform: translateY(-6px) scale(1.04); }
.dnd-over { outline: 6px dashed #38bdf8; outline-offset: 2px; }

/* ---------- Fruit Catch ---------- */
.catch-field { flex: 1; position: relative; min-height: 300px; overflow: hidden; touch-action: none; border-radius: 26px; }
.catch-field .basket { position: absolute; bottom: 3%; width: clamp(96px, 17vh, 160px); aspect-ratio: 1; transform: translateX(-50%); filter: drop-shadow(0 10px 10px rgba(15,43,92,.25)); transition: left .08s linear; z-index: 2; }
.catch-field .basket.bump { animation: basketBump .3s; }
@keyframes basketBump { 50% { transform: translateX(-50%) scale(1.12, .9); } }
.faller { position: absolute; top: 0; width: clamp(56px, 9.5vh, 86px); aspect-ratio: 1; filter: drop-shadow(0 8px 6px rgba(15,43,92,.2)); will-change: transform; }
.faller.caught { opacity: 0; transition: opacity .25s; }

/* ---------- Picture Puzzle ---------- */
.puzzle { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap); align-items: center; justify-items: center; min-height: 0; }
.pz-board { width: min(56vh, 52vw, 480px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 4px;
    background: #fff; padding: 6px; border-radius: 22px; box-shadow: var(--shadow); }
.pz-board.whole { gap: 0; transition: gap .4s; }
.pz-slot { position: relative; border-radius: 8px; overflow: hidden; background: #eef4fb; }
.pz-slot .ghost-art { position: absolute; inset: 0; opacity: .22; filter: grayscale(.4); }
.pz-slot.done { animation: pop .35s; }
.pz-slot svg.pz, .pz-piece svg.pz { width: 100%; height: 100%; display: block; }
.pz-tray { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-content: center; max-width: 100%; }
.pz-piece { width: clamp(84px, 14vh, 140px); aspect-ratio: var(--pa); border-radius: 12px; overflow: hidden; background: #fff; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(15,43,92,.22); transition: transform .15s; touch-action: none; }
.pz-piece.placed { visibility: hidden; }
@media (max-aspect-ratio: 1/1), (max-width: 760px) { .puzzle { grid-template-columns: 1fr; } .pz-board { width: min(88vw, 46vh); } }

/* ---------- Star Dots ---------- */
.dots-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
.dots-svg { width: min(62vh, 90%, 560px); aspect-ratio: 1; overflow: visible; }
.dots-svg .filled { fill: #fff8c9; opacity: 0; stroke: none; transition: opacity .6s; }
.dots-svg .reveal { opacity: 0; transform-origin: 50px 50px; transform: scale(.7); transition: opacity .6s .3s, transform .7s .3s cubic-bezier(.34,1.56,.64,1); }
.dots-svg .line { fill: none; stroke: #ffe066; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255,224,102,.8)); }
.dots-svg .dot { cursor: pointer; }
.dots-svg .dot .hit { fill: transparent; }
.dots-svg .dot .st { fill: #fff; stroke: none; filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); transform-box: fill-box; transform-origin: center; }
.dots-svg .dot text { font: 800 7px 'Baloo 2', ui-rounded, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #1a2a5c; stroke-width: 1.6px; }
.dots-svg .dot.next .st { fill: #ffe066; animation: twinkle 1s ease-in-out infinite; }
.dots-svg .dot.done .st { fill: #ffe066; }
.dots-svg .dot.hint-glow .st { fill: #ff7eb6; }
@keyframes twinkle { 50% { transform: scale(1.6) rotate(45deg); } }
.dots-svg.complete .filled { opacity: .95; }
.dots-svg.complete .reveal { opacity: 1; transform: none; }
.dots-svg.complete .dot { opacity: 0; transition: opacity .4s; }
.dots-svg.complete .line { opacity: 0; transition: opacity .6s .4s; }
.played.dark .dots-svg .dot.hint-glow { animation: none !important; }

/* ---------- Mole Pop ---------- */
.mole-yard { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(4px, 1vh, 12px) clamp(10px, 3vw, 40px); width: min(100%, 78vh, 720px); margin: 0 auto; align-content: center; }
.hole { position: relative; aspect-ratio: 1.3; margin-top: clamp(20px, 5vh, 50px); }
.hole::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 8%; height: 30%; border-radius: 50%; background: #5a3a24; box-shadow: inset 0 8px 0 #3b2616; }
.mole-box { position: absolute; left: 6%; right: 6%; bottom: 24%; top: -44%; overflow: hidden; border-radius: 0 0 40% 40%; }
.mole { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: translateY(105%); transition: transform .22s cubic-bezier(.34,1.56,.64,1); touch-action: manipulation; }
.mole .art { height: 100%; width: auto; margin: 0 auto; position: absolute; bottom: -22%; left: 50%; transform: translateX(-50%); }
.mole .sign { position: absolute; top: 4%; z-index: 1; left: 50%; transform: translateX(-50%); min-width: 40%; height: 26%; padding: 0 8px; border-radius: 12px; background: #fff; border: 3px solid #23304d;
    display: grid; place-items: center; font: 800 clamp(1.2rem, 3.4vh, 2rem) 'Baloo 2', sans-serif; color: var(--navy); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.hole.up .mole { transform: none; }
.hole.bonked .mole { transform: translateY(105%) scale(1.1, .6); transition: transform .3s ease-in; }
.hole .lip { position: absolute; left: 4%; right: 4%; bottom: 8%; height: 17%; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #8a5a36; box-shadow: 0 6px 0 #6e4526; }

/* ---------- Number Fishing ---------- */
.fishing { flex: 1; position: relative; min-height: 300px; overflow: hidden; border-radius: 26px; }
.fishing .bucket { position: absolute; top: 4px; right: 8px; width: clamp(70px, 11vh, 100px); z-index: 3; filter: drop-shadow(0 6px 8px rgba(15,43,92,.25)); }
.fishing .bucket .n { position: absolute; right: -8px; top: -6px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 1.4rem 'Baloo 2', sans-serif; color: var(--navy); box-shadow: var(--shadow); }
.hook-line { position: absolute; top: 0; width: 3px; margin-left: -1.5px; height: 0; background: #23304d; opacity: 0; transition: height .4s ease-out, opacity .2s; z-index: 2; }
.hook-line::after { content: ''; position: absolute; bottom: -10px; left: -6px; width: 12px; height: 12px; border: 3px solid #23304d; border-top: 0; border-radius: 0 0 10px 10px; }
.swimmer { position: absolute; left: -20%; width: clamp(96px, 16vh, 150px); aspect-ratio: 1.2; animation: swimR linear infinite; touch-action: manipulation; }
.swimmer.left { animation-name: swimL; }
.swimmer .fishbody { width: 100%; height: 100%; animation: wiggle 1.2s ease-in-out infinite; }
.swimmer.right .fishbody .art { transform: scaleX(-1); }
.swimmer .num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(40px, 6.4vh, 58px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid #23304d;
    display: grid; place-items: center; font: 800 clamp(1.3rem, 3.6vh, 2rem) 'Baloo 2', sans-serif; color: var(--navy); }
.swimmer.caught { transition: top .6s ease-in, opacity .6s .2s; opacity: 0; }
@keyframes swimR { from { left: -22%; } to { left: 104%; } }
@keyframes swimL { from { left: 104%; } to { left: -22%; } }
@keyframes wiggle { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* ---------- Make a Face ---------- */
.face-maker { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap); align-items: center; min-height: 0; }
.face-big { width: min(42vh, 36vw, 360px); aspect-ratio: 1; background: rgba(255,255,255,.85); border-radius: 50%; padding: 4%; box-shadow: var(--shadow); }
.face-big.boing { animation: pop .35s; } .face-big.made { animation: faceMade 1s; }
@keyframes faceMade { 25% { transform: rotate(-6deg) scale(1.08); } 60% { transform: rotate(5deg) scale(1.04); } }
.part-rows { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); }
.part-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.9); border-radius: 24px; padding: 8px 12px; box-shadow: 0 6px 16px rgba(15,43,92,.1); }
.part-row.wrong { box-shadow: 0 0 0 4px #fca5a5, 0 6px 16px rgba(15,43,92,.1); }
.part-row .k { font: 800 1.1rem 'Baloo 2', sans-serif; color: var(--navy); width: 5.2em; flex: none; }
.part-row .opts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (min-aspect-ratio: 1/1) and (min-width: 761px) { .part-row .opts { flex-wrap: nowrap; } }
.part { width: clamp(58px, 8vh, 86px); height: clamp(42px, 6vh, 60px); border-radius: 16px; overflow: hidden; background: #ffd2ad; border: 3px solid #fff; box-shadow: 0 5px 0 #f3b88c; transition: transform .12s; }
.part .art { width: 100%; height: 100%; }
.part.on { box-shadow: 0 0 0 4px #38bdf8, 0 5px 0 #f3b88c; transform: translateY(-3px); }
@media (max-aspect-ratio: 1/1), (max-width: 760px) { .face-maker { grid-template-columns: 1fr; justify-items: center; } .face-big { width: min(52vw, 30vh); } }

/* ---------- Tell the Time ---------- */
.clockface { display: block; }
.visual > .clockface { height: clamp(150px, 34vh, 320px); width: auto; aspect-ratio: 1; filter: drop-shadow(0 10px 12px rgba(15,43,92,.2)); }
.choice .clockface.small { height: clamp(80px, 15vh, 150px); width: auto; aspect-ratio: 1; }
.clockface .rim { fill: #3d8bfd; stroke: #23304d; stroke-width: 5; }
.clockface .dial { fill: #fffdf4; }
.clockface text { font: 800 20px 'Baloo 2', ui-rounded, sans-serif; fill: #23304d; text-anchor: middle; }
.clockface text.q { fill: #db2777; font-size: 23px; }
.clockface .t { stroke: #cbd5e1; stroke-width: 2; } .clockface .T { stroke: #64748b; stroke-width: 3.4; stroke-linecap: round; }
.clockface .hand { transform-box: view-box; transform-origin: 100px 100px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.clockface .hour path { stroke: #23304d; stroke-width: 10; stroke-linecap: round; }
.clockface .min path { stroke: #f25c54; stroke-width: 6; stroke-linecap: round; }
.clockface .pin { fill: #23304d; }
.choice .digital { font: 800 clamp(2rem, 5.6vh, 3.2rem) 'Baloo 2', sans-serif; color: var(--navy); line-height: 1; }
.set-clock { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 40px); }
.set-clock .clockface.big { height: min(46vh, 60vw, 400px); width: auto; aspect-ratio: 1; filter: drop-shadow(0 12px 14px rgba(15,43,92,.22)); }
.set-clock .round-btn { width: 76px; height: 76px; } .set-clock .round-btn .icon { width: 36px; height: 36px; }

/* ---------- Shape Sorter ---------- */
.sorter { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 12px; min-height: 0; }
.piece-spot { height: clamp(96px, 18vh, 170px); aspect-ratio: 1; }
.piece { width: 100%; height: 100%; animation: bob 2.4s ease-in-out infinite; transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s; touch-action: none; }
.piece.placed { animation: none; }
.piece.drop { opacity: 0; }
.piece .shape, .slot-hole .shape { width: 100%; height: 100%; display: block; overflow: visible; }
.sorter-box { width: min(92%, 560px, 64vh); perspective: 900px; }
.sorter-box .lid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vh, 18px); padding: clamp(14px, 2.4vh, 24px) clamp(18px, 3vw, 34px); background: #e7b574;
    border: 4px solid #23304d; border-radius: 26px 26px 10px 10px; transform: rotateX(28deg); transform-origin: bottom; box-shadow: inset 0 -8px 0 #d39d57; }
.slot-hole { position: relative; min-width: 0; aspect-ratio: 1.6; border-radius: 16px; background: rgba(255,255,255,.18); }
.slot-hole .shape { position: absolute; left: 8%; top: 8%; height: 84%; width: 84%; }
.slot-hole .shape g:first-child { display: none; }
.slot-hole .shape g:nth-child(2) { stroke: #5a3a24; }
.slot-hole .shape g:last-child { display: none; }
.slot-hole.gulp { animation: pop .35s; }
.sorter-box .front { height: clamp(60px, 11vh, 110px); background: #d9964f; border: 4px solid #23304d; border-top: 0; border-radius: 0 0 22px 22px; display: grid; place-items: center; margin-top: -2px;
    background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 3px, transparent 3px 40px); }
.sorter-box .front span { font: 800 clamp(1.4rem, 3.6vh, 2.2rem) 'Baloo 2', sans-serif; color: #fff; letter-spacing: .2em; text-shadow: 0 3px 0 #9a5f24; }

/* ---------- Spot the Difference ---------- */
.spot-pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 20px); align-content: center; min-height: 0; }
.spot-panel { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); max-height: 62vh; }
.spot-panel .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot-item { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.spot-item .art { filter: drop-shadow(0 4px 4px rgba(15,43,92,.2)); }
.spot-item.found::after { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 5px solid #ef4444; box-shadow: 0 0 0 3px #fff; animation: ringIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes ringIn { from { transform: scale(1.8); opacity: 0; } }
@media (max-aspect-ratio: 1/1), (max-width: 760px) { .spot-pair { grid-template-columns: 1fr; } .spot-panel { max-height: 34vh; justify-self: center; width: min(100%, 45vh); } }

/* ---------- Where's the Ball? ---------- */
.cups { flex: 1; position: relative; min-height: 260px; width: min(100%, 760px); margin: 0 auto; }
.cups .table { position: absolute; left: 0; right: 0; bottom: 8%; height: 14%; border-radius: 50%; background: rgba(255,255,255,.18); }
.cup-slot { position: absolute; bottom: 14%; width: calc(80% / var(--n)); max-width: 170px; transform: translateX(-50%); transition: left var(--ms) cubic-bezier(.5,0,.5,1); z-index: 1; }
.cup-slot .cup { display: block; width: 100%; aspect-ratio: 100 / 110; position: relative; z-index: 2; transition: transform .35s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 12px 10px rgba(0,0,0,.3)); }
.cup-slot .cup svg { width: 100%; height: 100%; display: block; }
.cup-slot .ball { position: absolute; left: 22%; right: 22%; bottom: 0; aspect-ratio: 1; z-index: 1; }
.cup-slot.up .cup { transform: translateY(-62%) rotate(-6deg); }
.cup-slot.hop-a .cup { animation: hopA var(--ms) ease-in-out; } .cup-slot.hop-b { z-index: 3; } .cup-slot.hop-b .cup { animation: hopB var(--ms) ease-in-out; }
@keyframes hopA { 50% { transform: translateY(-14%) scale(.94); } }
@keyframes hopB { 50% { transform: translateY(6%) scale(1.06); } }

/* ---------- How Would I Feel? ---------- */
.visual.story .art { height: clamp(90px, 20vh, 190px); }
.visual .art.fell { transform: rotate(150deg) translateY(-10%); }

/* ---------- Letter Trace ---------- */
.trace-wrap { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap); align-items: center; justify-items: center; min-height: 0; }
.trace { width: min(58vh, 56vw, 520px); aspect-ratio: 1; background: rgba(255,255,255,.92); border-radius: 30px; box-shadow: var(--shadow); touch-action: none; overflow: visible; }
.trace .guide { fill: none; stroke: #e2e8f0; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.trace .dash { fill: none; stroke: #94a3b8; stroke-width: 1.4; stroke-dasharray: 2 3.4; stroke-linecap: round; }
.trace .seg { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; opacity: 0; transition: opacity .15s; }
.trace .seg.on { opacity: 1; }
.trace .ink { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.trace .start circle { fill: #22c55e; stroke: #fff; stroke-width: 1.4; }
.trace .start text { font: 800 6px 'Baloo 2', sans-serif; fill: #fff; text-anchor: middle; }
.trace .start path { fill: #22c55e; }
.trace .start.done { opacity: .35; }
.trace .finger { fill: #f59e0b; stroke: #fff; stroke-width: 1.4; }
.trace.complete .seg { filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); }
.trace.complete { animation: pop .5s; }
.trace-side { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,.9); border-radius: 30px; padding: 18px 26px; box-shadow: var(--shadow); text-align: center; }
.trace-side .big-letter { font: 800 clamp(3.6rem, 12vh, 7rem) 'Baloo 2', sans-serif; color: var(--navy); line-height: 1; }
.trace-side .big-letter small { font-size: .6em; color: #3b82f6; margin-left: 6px; }
.trace-side .pic { width: clamp(80px, 16vh, 150px); aspect-ratio: 1; }
.trace-side p { margin: 0; font: 800 1.3rem 'Baloo 2', sans-serif; color: var(--ink-soft); } .trace-side p b { color: #db2777; }
@media (max-aspect-ratio: 1/1), (max-width: 760px) { .trace-wrap { grid-template-columns: 1fr; } .trace { width: min(86vw, 44vh); } .trace-side { flex-direction: row; padding: 10px 18px; } .trace-side .pic { width: 64px; } }

/* ---------- First, Next, Last ---------- */
.order-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); width: min(100%, 860px); margin: 0 auto; }
.order-slot { position: relative; aspect-ratio: 1; border-radius: 28px; border: 5px dashed rgba(255,255,255,.95); background: rgba(255,255,255,.4); display: grid; place-items: center; padding: 10%; }
.order-slot .tag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font: 800 1.05rem 'Baloo 2', sans-serif; padding: 3px 14px; border-radius: 999px; white-space: nowrap; z-index: 2; }
.order-cards { display: flex; gap: var(--gap); justify-content: center; min-height: clamp(96px, 16vh, 160px); }
.order-card { width: clamp(104px, 19vh, 180px); aspect-ratio: 1; border-radius: 26px; background: #fff; padding: 12px; box-shadow: 0 8px 0 #cfe3f7, 0 14px 24px rgba(15,43,92,.16); }
.order-slot .order-card { width: 100%; height: 100%; box-shadow: none; background: transparent; padding: 0; }
.order-card.placed { pointer-events: none; }

/* ---------- Frog Hop ---------- */
.lilies { flex: 1; position: relative; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: clamp(2px, .6vw, 8px); align-items: end; min-height: 220px; padding-bottom: 6%; }
.lily { aspect-ratio: 1; border-radius: 50%; background: #5cc96b; border: 3px solid #23304d; box-shadow: inset -6px -6px 0 #3fa653, 0 6px 0 rgba(15,43,92,.2); position: relative;
    display: grid; place-items: center; font: 800 clamp(1.1rem, 2.6vw, 2rem) 'Baloo 2', sans-serif; color: #fff; text-shadow: 0 2px 0 #2f7d3d; }
.lily::before { content: ''; position: absolute; top: 46%; right: -3px; width: 30%; height: 9%; background: #7cc8f0; transform: rotate(-20deg); transform-origin: right; }
.lily span { position: relative; }
.lily:nth-child(odd) { margin-bottom: 34px; }
.lilies .frog { position: absolute; width: clamp(56px, 8.5vw, 100px); aspect-ratio: 1; transform: translate(-50%, -62%); z-index: 3; transition: left .38s ease-in-out, top .38s ease-in-out; pointer-events: none; filter: drop-shadow(0 10px 8px rgba(15,43,92,.3)); }
.lilies .frog.hop { animation: frogHop .4s ease-in-out; }
.lilies .frog.fly { transition: left .5s, top .5s; }
@keyframes frogHop { 50% { transform: translate(-50%, -140%) scale(1.05, .95); } }

/* ---------- Color Mixer ---------- */
.mixer { flex: 1; display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: 1fr auto; gap: var(--gap); align-items: center; justify-items: center; min-height: 0; }
.to-paint { position: relative; }
.to-paint .pic { width: clamp(120px, 26vh, 240px); aspect-ratio: 1; transition: filter 1s; filter: drop-shadow(0 10px 10px rgba(15,43,92,.2)); }
.to-paint .pic.grey { filter: grayscale(1) brightness(1.15) opacity(.8); }
.swatch-goal { position: absolute; right: -8px; top: -8px; width: 48px; height: 48px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px #23304d, var(--shadow); }
.bowl { position: relative; width: min(100%, 360px); }
.bowl svg { width: 100%; display: block; overflow: visible; }
.bowl .paint, .bowl .paint-top { transition: fill .6s; }
.bowl.stir svg { animation: stir .5s ease-in-out 2; }
@keyframes stir { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.drip { position: absolute; left: 50%; top: -90px; width: 16px; margin-left: -8px; height: 0; border-radius: 8px; opacity: 0; }
.drip.go { animation: drip .6s ease-in; }
@keyframes drip { 0% { height: 0; top: -90px; opacity: 1; } 55% { height: 110px; top: -90px; opacity: 1; } 100% { height: 0; top: 30px; opacity: 1; } }
.pots { grid-column: 1 / -1; display: flex; gap: clamp(10px, 2vw, 22px); justify-content: center; }
.pot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(76px, 12vh, 112px); background: rgba(255,255,255,.9); border-radius: 22px; padding: 8px 6px; box-shadow: 0 7px 0 #cbd5e1, var(--shadow); transition: transform .3s; }
.pot svg { width: 80%; }
.pot span { font: 800 1rem 'Baloo 2', sans-serif; color: var(--navy); text-transform: capitalize; }
.pot.pour { transform: translateY(-16px) rotate(-24deg); }
.pot.used { opacity: .6; }

/* ---------- Tower Stack ---------- */
.tower-field { flex: 1; position: relative; min-height: 320px; overflow: hidden; border-radius: 26px; touch-action: manipulation; }
.tower-world { position: absolute; inset: 0; transition: transform .45s ease-out; }
.tower-world .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: #7b8698; border-top: 4px solid #5b6475; }
.tower-field .lives { position: absolute; top: 8px; left: 10px; display: flex; gap: 4px; z-index: 3; background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 8px; }
.tower-field .lives .art { width: 30px; height: 30px; transition: filter .3s, transform .3s; }
.tower-field .lives .art.lost { filter: grayscale(1) opacity(.35); transform: scale(.8); }
.tblock { position: absolute; border: 3.4px solid #23304d; border-radius: 12px; display: grid; place-items: center; color: #fff; transition: bottom .26s ease-in;
    box-shadow: inset 0 -8px 0 rgba(0,0,0,.14), inset 0 8px 0 rgba(255,255,255,.28); }
.tblock span { display: grid; place-items: center; height: 100%; width: 100%; }
.tblock .icon { width: auto; height: 62%; aspect-ratio: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.tblock.moving { transition: none; }
.tblock.land { animation: land .3s; }
@keyframes land { 40% { transform: scaleY(.86); } }
.tblock.topple { transition: bottom .9s ease-in, transform .9s ease-in; bottom: -200px !important; }
.tblock.topple.left { transform: rotate(-80deg) translateX(-40px); } .tblock.topple.right { transform: rotate(80deg) translateX(40px); }

/* ---------- Rocket Countdown ---------- */
.launch { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.sky-stars { position: relative; min-height: 240px; }
.cstar { position: absolute; width: clamp(64px, 11vh, 104px); aspect-ratio: 1; transform: translate(-50%, -50%); transition: transform .6s cubic-bezier(.5,0,.5,1), opacity .6s; animation: twinkleStar 2.4s ease-in-out infinite; }
.cstar:nth-child(3n) { animation-delay: -.8s; } .cstar:nth-child(3n+1) { animation-delay: -1.6s; }
.cstar .art { filter: drop-shadow(0 0 10px rgba(255,224,102,.8)); }
.cstar span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 8%; font: 800 clamp(1.3rem, 3.4vh, 2rem) 'Baloo 2', sans-serif; color: #7a4b00; }
.cstar.used { opacity: 0; pointer-events: none; animation: none; }
@keyframes twinkleStar { 50% { scale: 1.08; } }
.pad-area { position: relative; width: clamp(110px, 16vw, 180px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.fuel { position: absolute; left: -6px; bottom: 30px; width: 18px; height: 70%; border-radius: 10px; background: rgba(255,255,255,.2); border: 3px solid #fff; overflow: hidden; display: flex; align-items: flex-end; }
.fuel i { display: block; width: 100%; height: 0; background: linear-gradient(0deg, #f97316, #fde047); transition: height .4s; }
.rocket-ship { position: relative; width: 100%; aspect-ratio: 1; z-index: 2; transition: transform 1.4s cubic-bezier(.6,0,.9,.4); }
.rocket-ship .flame { position: absolute; left: 50%; top: 78%; width: 26%; height: 36%; margin-left: -13%; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: #ffb627; box-shadow: 0 0 22px 8px rgba(255,182,39,.7); opacity: 0; transform-origin: top; }
.rocket-ship.launch { transform: translateY(-160vh); }
.rocket-ship.launch .flame { opacity: 1; animation: flame .15s infinite alternate; }
@keyframes flame { to { transform: scaleY(1.4); } }
.launch-pad { width: 110%; height: 22px; background: #5b6475; border: 3px solid #fff; border-radius: 10px; }
@media (max-aspect-ratio: 1/1), (max-width: 760px) { .launch { grid-template-columns: 1fr; } .pad-area { width: clamp(100px, 22vw, 150px); margin: 0 auto; } }

/* ---------- Tic-Tac-Toe ---------- */
.mark-inline { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; }
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vh, 14px); width: min(56vh, 88vw, 480px); aspect-ratio: 1; margin: 0 auto; }
.ttt .cell { border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: 0 8px 0 #cfe3f7, 0 12px 22px rgba(15,43,92,.14); padding: 14%; }
.ttt .cell.set { animation: pop .35s; }
.ttt .cell.win { background: #fef3c7; box-shadow: 0 8px 0 #fcd34d, 0 0 0 5px #fbbf24; }
.lead.score { font-family: 'Baloo 2', sans-serif; }

/* ---------- Pizza Chef ---------- */
.pizzeria { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--gap); align-items: center; min-height: 0; }
.ticket { background: #fff; border-radius: 18px; padding: 12px 16px 16px; box-shadow: var(--shadow); width: clamp(150px, 20vw, 220px); position: relative; transform: rotate(-2deg);
    background-image: repeating-linear-gradient(0deg, transparent 0 30px, #e0f2fe 30px 32px); }
.ticket .cust { width: 70px; height: 70px; margin: -46px auto 0; }
.ticket .cust.yum { animation: yum .6s 2; }
@keyframes yum { 50% { transform: scale(1.2) rotate(-8deg); } }
.ticket h3 { text-align: center; color: var(--navy); font-size: 1.15rem; margin: 2px 0 6px; }
.ticket .line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.ticket .line b { font: 800 1.6rem 'Baloo 2', sans-serif; color: #db2777; width: 1.2em; }
.ticket .line .art { width: 38px; height: 38px; }
.pizza-spot { display: grid; place-items: center; }
.pizza { width: min(46vh, 42vw, 400px); aspect-ratio: 1; filter: drop-shadow(0 12px 14px rgba(15,43,92,.25)); }
.pizza.baking { animation: bake .9s ease-in-out; }
@keyframes bake { 40% { transform: scale(.94) rotate(-8deg); filter: brightness(1.2) drop-shadow(0 0 30px rgba(255,160,40,.8)); } }
.pizza .top-drop { animation: topDrop .35s cubic-bezier(.34,1.56,.64,1); transform-box: fill-box; transform-origin: center; cursor: pointer; }
@keyframes topDrop { from { transform: scale(1.8); opacity: 0; } }
.bins-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.topping { width: clamp(80px, 11vh, 108px); border-radius: 20px; background: rgba(255,255,255,.94); padding: 8px; box-shadow: 0 6px 0 #cbd5e1, var(--shadow); display: flex; flex-direction: column; align-items: center; }
.topping .art { width: 70%; height: auto; }
.topping span { font: 800 .95rem 'Baloo 2', sans-serif; color: var(--navy); text-transform: capitalize; }
.topping:active { transform: translateY(4px); }
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    .pizzeria { grid-template-columns: 1fr 1fr; } .pizza-spot { grid-column: 1 / -1; grid-row: 1; } .pizza { width: min(64vw, 34vh); }
    .ticket { width: auto; } .bins-top { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sink or Float? ---------- */
.sf { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--gap); align-items: center; justify-items: center; min-height: 0; }
.sf-item { width: clamp(100px, 20vh, 190px); aspect-ratio: 1; filter: drop-shadow(0 10px 10px rgba(15,43,92,.25)); }
.sf-item.in { animation: visualIn .5s cubic-bezier(.34,1.56,.64,1); }
.sf-buttons { display: flex; gap: 14px; flex-direction: column; }
.tank { grid-column: 1 / -1; position: relative; width: min(100%, 720px); height: clamp(170px, 30vh, 280px); border: 6px solid #fff; border-top: 0; border-radius: 0 0 30px 30px; background: rgba(240,249,255,.7); box-shadow: var(--shadow), inset 0 0 0 3px rgba(35,48,77,.15); overflow: hidden; }
.tank::before { content: ''; position: absolute; top: 0; bottom: 10px; left: 14px; width: 10px; border-radius: 6px; background: rgba(255,255,255,.7); z-index: 3; }
.tank .water { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; background: rgba(61,139,253,.5); border-top: 5px solid rgba(143,211,255,.95); }
.tank .water i { display: none; }
.tank-item { position: absolute; width: clamp(56px, 9vh, 84px); aspect-ratio: 1; transform: translateX(-50%); z-index: 2; }
.tank-item.floating { animation: dropIn .6s ease-in forwards, bobble 2s 1s ease-in-out infinite; top: calc(26% - 40px); }
.tank-item.sunk { animation: sinkDown 1s ease-in forwards; bottom: 6px; }
@keyframes dropIn { from { transform: translate(-50%, -260px); } 70% { transform: translate(-50%, 18px); } to { transform: translate(-50%, 0); } }
@keyframes bobble { 50% { transform: translate(-50%, 6px) rotate(4deg); } }
@keyframes sinkDown { from { transform: translate(-50%, -300px); } 40% { transform: translate(-50%, -140px); } to { transform: translate(-50%, 0); } }
@media (max-aspect-ratio: 1/1), (max-width: 760px) { .sf-buttons { flex-direction: row; } }

.paint-dot { display: inline-block; width: .85em; height: .85em; border-radius: 50%; border: 3px solid #23304d; vertical-align: -.08em; margin: 0 .2em 0 .1em; }

/* ---------- narrow screens: phones and portrait ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    .lilies { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; align-content: center; padding-bottom: 0; }
    .lily:nth-child(odd) { margin-bottom: 20px; }
    .mixer { grid-template-columns: 1fr 1fr; }
    .pots { gap: 8px; } .pot { width: clamp(64px, 20vw, 104px); }
    .sf { grid-template-columns: 1fr; } .sf-buttons { flex-direction: row; }
}
@media (max-width: 760px) {
    .part-row { flex-wrap: wrap; padding: 6px 8px; gap: 4px; } .part-row .k { width: 100%; font-size: .95rem; }
    .part { width: 54px; height: 40px; }
    .face-big { width: min(46vw, 24vh); }
    .bowl { width: 100%; } .to-paint .pic { width: clamp(90px, 26vw, 140px); }
    .sf-buttons .btn { min-height: 54px; padding: 0 20px; font-size: 1.15rem; }
    .pizza { width: min(70vw, 30vh); } .topping { width: 72px; } .ticket { padding: 10px 12px; }
}