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

/* tap in order (Sequence the Story, Alphabet Order) */
.order-row { display: flex; gap: var(--gap); justify-content: center; align-items: center; flex-wrap: wrap; flex: 1; }
.order-card { position: relative; width: clamp(110px, 20vh, 190px); aspect-ratio: 1; border-radius: 26px; background: #fff; padding: 12px; box-shadow: 0 8px 0 #cfe3f7, 0 14px 24px rgba(15,43,92,.16); transition: transform .15s; display: grid; place-items: center; }
.order-card .big-letter { font: 800 clamp(3rem, 10vh, 6rem) 'Baloo 2', sans-serif; color: var(--navy); }
.order-card.placed { background: #dcfce7; box-shadow: 0 8px 0 #86efac; transform: translateY(-6px); }
.order-card .n { position: absolute; top: -12px; left: -10px; width: 40px; height: 40px; border-radius: 50%; background: #fbbf24; color: #fff; display: grid; place-items: center; font: 800 1.3rem 'Baloo 2', sans-serif; border: 3px solid #fff; }
.item-card.labelled { display: flex; flex-direction: column; align-items: center; gap: 4px; width: auto; min-width: clamp(150px, 26vh, 240px); padding: 14px 18px; }
.item-card.labelled .art { height: clamp(70px, 14vh, 130px); width: auto; }
.item-card.labelled .label { font: 800 1.15rem 'Baloo 2', sans-serif; color: var(--navy); text-align: center; }

/* Same or Different */
.pair-box { display: flex; align-items: center; gap: 18px; }
.pair-box .art { height: clamp(100px, 22vh, 200px); width: auto; background: #fff; border-radius: 26px; padding: 10px; box-shadow: var(--shadow); }
.pair-box .vs { font: 800 clamp(2rem, 6vh, 3.6rem) 'Baloo 2', sans-serif; color: #db2777; }

/* Picture Sudoku */
.sudoku-wrap { flex: 1; display: flex; gap: var(--gap); align-items: center; justify-content: center; flex-wrap: wrap; }
.sudoku { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(56vh, 88vw, 420px); aspect-ratio: 1; background: #fff; padding: 10px; border-radius: 24px; box-shadow: var(--shadow); }
.sudoku .cell { border-radius: 14px; background: #f1f5f9; padding: 10%; }
.sudoku .cell.hole { background: #fff7ed; border: 4px dashed #fdba74; }
.sudoku .cell.done { background: #dcfce7; border-color: #86efac; animation: pop .35s; }
.sudoku-wrap .tray { display: flex; flex-direction: column; gap: 10px; }
.sudoku-wrap .pick { width: clamp(70px, 12vh, 104px); aspect-ratio: 1; border-radius: 20px; background: #fff; padding: 10px; box-shadow: 0 7px 0 #cbd5e1, var(--shadow); transition: transform .15s; }
.sudoku-wrap .pick.on { transform: translateY(-4px); box-shadow: 0 0 0 5px #38bdf8, 0 7px 0 #cbd5e1; }

/* Complete the Picture */
.piece-frame { position: relative; width: clamp(140px, 30vh, 260px); aspect-ratio: 1; background: #fff; border-radius: 24px; padding: 6%; box-shadow: var(--shadow); }
.piece-frame .whole { position: absolute; inset: 6%; }
.piece-frame .whole.miss-tl { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); }
.piece-frame .whole.miss-tr { clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%); }
.piece-frame .whole.miss-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%); }
.piece-frame .whole.miss-br { clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%); }
.piece-frame .gap { position: absolute; width: 44%; height: 44%; display: grid; place-items: center; font: 800 2.4rem 'Baloo 2', sans-serif; color: #93c5fd; border: 4px dashed #93c5fd; border-radius: 12px; }
.piece-frame .gap.tl { left: 6%; top: 6%; } .piece-frame .gap.tr { right: 6%; top: 6%; } .piece-frame .gap.bl { left: 6%; bottom: 6%; } .piece-frame .gap.br { right: 6%; bottom: 6%; }
.piece-only { display: block; width: clamp(60px, 13vh, 140px); aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f8fafc; }
.piece-only .art { width: 200%; height: 200%; }
.piece-only.tl .art { transform: translate(0, 0); } .piece-only.tr .art { transform: translate(-50%, 0); } .piece-only.bl .art { transform: translate(0, -50%); } .piece-only.br .art { transform: translate(-50%, -50%); }

/* Hide & Seek */
.seek { flex: 1; position: relative; min-height: 300px; border-radius: 26px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); }
.seek .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.seek .hider { position: absolute; width: calc(clamp(52px, 10vh, 90px) * var(--s, 1)); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .55; filter: saturate(.6); transition: opacity .3s, transform .3s; }
.seek .hider.found { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1.25); animation: pop .4s; }
.seek .hider.hint-glow { opacity: 1; }

/* Ten Frame, dice, number line, missing number */
.tenframe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(70vw, 52vh, 460px); background: #fff; padding: 10px; border-radius: 20px; box-shadow: var(--shadow); }
.tenframe span { aspect-ratio: 1; border-radius: 12px; border: 3px solid #cbd5e1; }
.tenframe span.full { background: radial-gradient(circle at 40% 35%, #fca5a5, #ef4444 70%); border-color: #b91c1c; }
.dice { display: flex; align-items: center; gap: clamp(10px, 3vw, 30px); }
.die { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; width: clamp(90px, 20vh, 170px); aspect-ratio: 1; padding: 10%; background: #fff; border-radius: 22%; border: 4px solid #23304d; box-shadow: 0 8px 0 #cbd5e1, var(--shadow); }
.die i { border-radius: 50%; } .die i.on { background: #23304d; }
.numline { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; position: relative; padding-top: clamp(70px, 14vh, 120px); }
.numline .frog { position: absolute; top: 0; left: calc(4.5% + var(--at) * 9.1%); width: clamp(60px, 12vh, 110px); aspect-ratio: 1; transform: translateX(-50%); transition: left .4s cubic-bezier(.34,1.3,.64,1); filter: drop-shadow(0 8px 8px rgba(15,43,92,.3)); }
.numline .frog.hop { animation: frogHop .4s ease-in-out; }
.numline .line { display: flex; justify-content: space-between; border-top: 8px solid #23304d; border-radius: 6px; margin: 0 2%; }
.numline .tick { display: flex; flex-direction: column; align-items: center; width: 9.1%; padding-top: 0; }
.numline .tick i { width: 6px; height: 20px; background: #23304d; border-radius: 0 0 4px 4px; }
.numline .tick b { font: 800 clamp(1.3rem, 3.6vh, 2.2rem) 'Baloo 2', sans-serif; color: var(--navy); background: #fff; border-radius: 14px; padding: 2px 10px; margin-top: 6px; box-shadow: 0 4px 0 #cbd5e1; }
.numline .tick:active b { transform: translateY(3px); }
.numseq { display: flex; gap: 12px; align-items: center; }
.numseq .num { font: 800 clamp(2.4rem, 7vh, 4.4rem) 'Baloo 2', sans-serif; color: var(--navy); background: #fff; border-radius: 22px; padding: 4px 24px; box-shadow: 0 8px 0 #cfe3f7; }

/* Share the Cookies */
.share { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 10px; }
.share .pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 520px; min-height: 60px; background: rgba(255,255,255,.7); border-radius: 22px; padding: 8px 14px; }
.share .pile span { width: clamp(40px, 7vh, 60px); aspect-ratio: 1; display: block; }
.share .plates { display: flex; gap: var(--gap); }
.share .plate { position: relative; width: clamp(120px, 22vh, 200px); border-radius: 26px; background: #fff; padding: 10px; box-shadow: 0 8px 0 #cfe3f7, var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.share .plate .who { width: 44%; }
.share .plate .dish { width: 100%; min-height: clamp(36px, 7vh, 60px); background: #eef4fb; border-radius: 999px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; }
.share .plate .dish .art { width: clamp(24px, 4.5vh, 40px); height: auto; }
.share .plate .pc { position: absolute; top: -10px; right: -8px; width: 36px; height: 36px; border-radius: 50%; background: #db2777; color: #fff; display: grid; place-items: center; font: 800 1.2rem 'Baloo 2', sans-serif; border: 3px solid #fff; }

/* words */
.gapword { font: 800 clamp(2rem, 6vh, 3.6rem) 'Baloo 2', sans-serif; letter-spacing: .12em; }
.gapword i { font-style: normal; color: #db2777; }
.claps { display: flex; gap: 6px; justify-content: center; min-height: clamp(50px, 9vh, 80px); flex-wrap: wrap; }
.claps span { width: clamp(44px, 8vh, 70px); aspect-ratio: 1; animation: pop .3s; }

/* feelings */
.jar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.jar { position: relative; width: clamp(140px, 30vh, 260px); aspect-ratio: .7; }
.jar .glass { position: absolute; inset: 12% 0 0; border-radius: 18% 18% 30% 30% / 8% 8% 14% 14%; background: rgba(224,242,254,.75); border: 5px solid #fff; box-shadow: inset 0 0 30px rgba(56,189,248,.35), var(--shadow); overflow: hidden; }
.jar .lid { position: absolute; left: 12%; right: 12%; top: 3%; height: 12%; background: #9b6bff; border-radius: 12px; border: 4px solid #23304d; }
.jar .glass i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .9; transition: top var(--d) cubic-bezier(.3,.7,.4,1), left var(--d) ease; }
.jar.shaking { animation: jarShake .2s linear 6; }
.jar.shaking .glass i { top: calc(var(--y) * .5); }
.jar.settle .glass i { top: calc(90% + var(--y) * .08); }
@keyframes jarShake { 25% { transform: rotate(-6deg) translateX(-6px); } 75% { transform: rotate(6deg) translateX(6px); } }
.pairs { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(8px, 1.6vh, 16px); width: min(100%, 720px); margin: 0 auto; align-content: center; }
.pcard { aspect-ratio: .9; perspective: 800px; }
.pcard .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.34,1.3,.64,1); }
.pcard.up .in, .pcard.got .in { transform: rotateY(180deg); }
.pcard .back, .pcard .front { position: absolute; inset: 0; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: grid; place-items: center; padding: 12%; }
.pcard .back { background: linear-gradient(160deg, #a78bfa, #7c3aed); box-shadow: 0 6px 0 #5b21b6; }
.pcard .front { background: #fff; transform: rotateY(180deg); box-shadow: 0 6px 0 #cfe3f7; }
.pcard.got .front { background: #dcfce7; box-shadow: 0 6px 0 #86efac; }
.fdie { width: clamp(120px, 26vh, 220px); aspect-ratio: 1; background: #fff; border-radius: 22%; border: 5px solid #23304d; padding: 8%; box-shadow: 0 10px 0 #cbd5e1, var(--shadow); }
.fdie.rolling { animation: roll 1.1s ease-in-out; }
@keyframes roll { 0% { transform: rotate(0) scale(.6); } 60% { transform: rotate(540deg) scale(1.1); } 100% { transform: rotate(720deg) scale(1); } }
.choices.hidden { display: none; }

/* action */
.whack { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2vh, 20px); width: min(100%, 62vh, 560px); margin: 0 auto; align-content: center; }
.whack .hole { position: relative; aspect-ratio: 1.2; overflow: hidden; border-radius: 30% 30% 45% 45%; background: radial-gradient(ellipse at 50% 80%, #1e293b, #334155 70%); box-shadow: inset 0 8px 14px rgba(0,0,0,.4), 0 4px 0 #475569; }
.whack .popper { position: absolute; left: 20%; right: 20%; bottom: 0; height: 90%; transform: translateY(110%); transition: transform .18s cubic-bezier(.34,1.5,.64,1); }
.whack .hole.up .popper { transform: none; }
.throw { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 280px; }
.throw .lane { position: relative; width: min(100%, 720px); height: clamp(110px, 24vh, 200px); border-radius: 26px; background: rgba(255,255,255,.35); border: 4px solid #fff; overflow: hidden; }
.throw .zone { position: absolute; left: 37%; right: 37%; top: 0; bottom: 0; background: rgba(34,197,94,.18); border-left: 4px dashed #22c55e; border-right: 4px dashed #22c55e; }
.throw .target { position: absolute; top: 6%; left: 0; height: 88%; aspect-ratio: 1; animation: slide 3.2s ease-in-out infinite alternate; }
.throw .target.hit { animation-play-state: paused; filter: brightness(1.3) drop-shadow(0 0 16px #fff); }
@keyframes slide { from { left: 0; } to { left: calc(100% - clamp(96px, 21vh, 176px)); } }
.throw .ball { width: clamp(60px, 12vh, 100px); aspect-ratio: 1; margin-top: 10px; transition: transform .45s ease-in; }
.throw .ball.fly { transform: translateY(calc(-1 * clamp(140px, 30vh, 260px))) scale(.5); }
.tank2 { flex: 1; position: relative; min-height: 300px; overflow: hidden; border-radius: 26px; background: rgba(56,189,248,.18); border: 4px solid rgba(255,255,255,.7); }
.tank2 .swim { position: absolute; left: -20%; width: clamp(80px, 15vh, 140px); aspect-ratio: 1; animation: swimR linear infinite; touch-action: manipulation; }
.tank2 .swim.left { animation-name: swimL; } .tank2 .swim.left .art { transform: scaleX(-1); }
.tank2 .swim.fed { animation-play-state: paused; filter: drop-shadow(0 0 14px #fde047); }
.tank2 .swim .yum { position: absolute; left: 50%; top: -20%; width: 40%; animation: pop .4s; }
.race { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-right: clamp(60px, 12vh, 110px); }
.race .track { position: relative; height: clamp(70px, 14vh, 120px); border-radius: 999px; background: rgba(255,255,255,.55); border: 4px solid #fff; }
.race .runner { position: absolute; top: 4%; left: calc(var(--p) * .92%); height: 92%; aspect-ratio: 1; transition: left .1s linear; }
.race .runner.turtle { transition: left .08s linear; }
.race .runner.bounce { animation: frogHop .25s; }
.race .flag { position: absolute; right: 0; top: 50%; width: clamp(60px, 12vh, 110px); transform: translateY(-50%); }
.bath { flex: 1; display: grid; place-items: center; min-height: 0; }
.bath .tub { position: relative; width: min(60vh, 90vw, 520px); aspect-ratio: 1; background: rgba(255,255,255,.7); border-radius: 40px; padding: 8%; border: 5px solid #fff; box-shadow: var(--shadow); touch-action: none; }
.bath .tub > .art { position: relative; z-index: 0; }
.bath .mud { position: absolute; width: 14%; height: 11%; border-radius: 50% 40% 55% 45%; background: #7a4b2a; box-shadow: inset -4px -4px 0 #5b3418; transform: rotate(var(--r)); z-index: 2; pointer-events: none; }
.bath .bub { position: absolute; width: 60px; height: 60px; animation: bubUp 1.2s ease-out forwards; pointer-events: none; z-index: 3; }
@keyframes bubUp { to { transform: translateY(-60px) scale(1.4); opacity: 0; } }
.bath .tub.clean { animation: pop .5s; box-shadow: 0 0 0 6px #bae6fd, var(--shadow); }

/* music & art */
.piano { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 320px; width: min(100%, 60vh, 560px); margin: 0 auto; }
.piano .cols { flex: 1; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow: hidden; border-radius: 22px 22px 0 0; background: rgba(255,255,255,.4); border: 4px solid #fff; border-bottom: 0; }
.piano .col { position: relative; }
.piano .col:nth-child(1) .tile { background: #f25c54; } .piano .col:nth-child(2) .tile { background: #ffd23f; } .piano .col:nth-child(3) .tile { background: #5cc96b; } .piano .col:nth-child(4) .tile { background: #3d8bfd; }
.piano .tile { position: absolute; left: 4%; width: 92%; height: 22%; border-radius: 16px; border: 3px solid #23304d; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); animation: fall linear forwards; top: -24%; }
@keyframes fall { to { top: 100%; } }
.piano .tile.hit { filter: brightness(1.4); transform: scale(1.06); }
.piano .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: clamp(56px, 10vh, 80px); }
.piano .key { border-radius: 0 0 18px 18px; background: var(--c); border: 3px solid #23304d; box-shadow: inset 0 -8px 0 rgba(0,0,0,.15); }
.piano .key:active { transform: translateY(3px); }
.drums { flex: 1; display: flex; gap: var(--gap); justify-content: center; align-items: center; }
.drumpad { width: clamp(110px, 24vh, 200px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 6px solid var(--c); padding: clamp(14px, 3vh, 26px); box-shadow: 0 10px 0 var(--c), var(--shadow); transition: transform .1s, box-shadow .1s; }
.drumpad.lit, .drumpad:active { transform: translateY(6px) scale(1.04); box-shadow: 0 4px 0 var(--c), 0 0 30px var(--c); }
.drumpad .art { width: 100%; height: auto; }
.cbn { flex: 1; display: flex; gap: var(--gap); align-items: center; justify-content: center; min-height: 0; }
.cbn svg { width: min(58vh, 60vw, 480px); aspect-ratio: 1; background: #fff; border-radius: 30px; box-shadow: var(--shadow); }
.cbn .region { cursor: pointer; transition: fill .2s; }
.cbn .region.hint-glow { stroke: #fbbf24; stroke-width: 8; }
.cbn .legend { display: flex; flex-direction: column; gap: 10px; }
.swatch2 { width: clamp(56px, 10vh, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 5px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.swatch2 b { font: 800 1.4rem 'Baloo 2', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.swatch2.on { outline: 5px solid var(--navy); }
.stick { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.stick .canvas { position: relative; border-radius: 26px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); min-height: 280px; touch-action: none; }
.stick .canvas .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.stick .placed { position: absolute; width: calc(clamp(50px, 10vh, 90px) * var(--s, 1)); aspect-ratio: 1; transform: translate(-50%, -50%); animation: pop .3s; filter: drop-shadow(0 6px 6px rgba(15,43,92,.25)); pointer-events: none; }
.stick .tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
.stk { width: clamp(56px, 10vh, 84px); aspect-ratio: 1; border-radius: 18px; background: #fff; padding: 8px; box-shadow: 0 5px 0 #cbd5e1, var(--shadow); }
.stk.on { box-shadow: 0 0 0 4px #38bdf8, 0 5px 0 #cbd5e1; transform: translateY(-3px); }
.stk.undo { color: var(--navy); display: grid; place-items: center; grid-column: 1 / -1; width: 100%; aspect-ratio: auto; height: 48px; }
.sym { flex: 1; position: relative; min-height: 260px; }
.sym canvas { width: 100%; height: 100%; background: #fff; border-radius: 30px; box-shadow: var(--shadow); touch-action: none; display: block; }
.sym .mirror-line { position: absolute; left: 50%; top: 4%; bottom: 4%; border-left: 3px dashed #94a3b8; pointer-events: none; }
.sym-palette .swatch { width: 46px; height: 46px; }

@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    .sudoku { width: min(84vw, 44vh); } .sudoku-wrap .tray { flex-direction: row; }
    .stick { grid-template-columns: 1fr; } .stick .tray { grid-template-columns: repeat(5, 1fr); } .stk.undo { grid-column: auto; height: auto; aspect-ratio: 1; }
    .cbn { flex-direction: column; } .cbn .legend { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .share .plates { flex-wrap: wrap; justify-content: center; } .share .plate { width: clamp(100px, 28vw, 160px); }
    .race { padding-right: 60px; }
}