/* Elemenop Kids — games */

.game { display: flex; flex-direction: column; gap: 12px; }
.game-intro { margin: 0 4px; color: var(--ink-soft); }
.game-levels { margin-bottom: -4px; }
.game-status { min-height: 1.5em; margin: 0 4px; font-weight: 600; color: var(--purple-d); text-align: center; font-size: 1.05rem; }
.game-body { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.game-body > * { max-width: 100%; }

.progress-dots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.progress-dots i { width: 16px; height: 16px; border-radius: 50%; background: #e4ddf7; transition: background 0.3s, transform 0.3s; }
.progress-dots i.now { background: #c9b8ff; transform: scale(1.25); }
.progress-dots i.done { background: var(--green); }
.progress-dots i.half { background: var(--yellow); }

.quiz-prompt { font-size: 1.6rem; font-weight: 600; text-align: center; display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 2.2em; }
.quiz-prompt b { font-weight: 700; }
.quiz-emoji { font: 3rem/1 var(--emoji); }
.big-letter { font-size: 2.6rem; color: var(--purple-d); background: #fff; border-radius: 16px; padding: 0 16px; box-shadow: var(--shadow); }

.choices { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 14px; width: min(520px, 100%); }
.choices.letters, .choices.numbers { grid-template-columns: repeat(4, minmax(64px, 1fr)); width: min(640px, 100%); }
.choices.times { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
.choice {
  min-height: 92px; border: 0; border-radius: 24px; background: var(--c, #fff); color: #fff;
  font: 700 2.4rem/1 var(--font); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 0 rgba(43, 45, 66, 0.15); transition: transform 0.08s;
}
.choices.numbers .choice, .choices.times .choice { background: #fff; color: var(--ink); text-shadow: none; }
.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(43, 45, 66, 0.15); }
.choice.right { background: var(--green) !important; color: #fff !important; }
.choice[disabled] { opacity: 0.35; }
@media (max-width: 480px) { .choices.letters, .choices.numbers { grid-template-columns: repeat(2, 1fr); } .choice { min-height: 80px; font-size: 2.1rem; } }

.shake { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pulse { animation: pulseIn 0.5s; }
@keyframes pulseIn { 40% { transform: scale(1.08); } }
.streak { min-height: 1.4em; font-weight: 600; color: #d86a00; text-align: center; }

/* ABC */
.abc-learn { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.2fr); gap: 18px; width: 100%; align-items: start; }
.abc-card { --c: var(--purple); background: #fff; border-radius: 30px; padding: 22px; text-align: center; box-shadow: 0 8px 0 var(--c), var(--shadow); border: 6px solid var(--c); }
.abc-card.pop { animation: popIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
.abc-letters { font: 700 7rem/1 var(--font); color: var(--c); display: flex; justify-content: center; gap: 16px; }
.abc-letters .lower { opacity: 0.75; }
.abc-pic { font: 5.5rem/1.1 var(--emoji); margin: 6px 0; }
.abc-word { font-size: 1.5rem; }
.abc-word b { color: var(--c); }
.abc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.abc-key { aspect-ratio: 1; border: 0; border-radius: 18px; background: var(--c); color: #fff; font: 700 1.8rem/1 var(--font); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.abc-key:active, .abc-key.on { transform: translateY(3px) scale(1.06); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
@media (max-width: 760px) { .abc-learn { grid-template-columns: 1fr; } .abc-letters { font-size: 5rem; } .abc-pic { font-size: 4rem; } }
.trace-label { display: flex; gap: 10px; align-items: center; font-size: 1.3rem; font-weight: 600; }
.trace-board { position: relative; width: min(460px, 92vw, 58vh); aspect-ratio: 1; background: #fff; border-radius: 28px; box-shadow: var(--shadow); touch-action: none; }
.trace-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-ink { cursor: crosshair; }

/* Word builder */
.word-pic { border: 0; background: #fff; border-radius: 32px; width: 170px; height: 170px; font: 6rem/1 var(--emoji); box-shadow: var(--shadow); }
.word-slots { display: flex; gap: 10px; justify-content: center; }
.slot { width: 66px; height: 78px; border-radius: 18px; border: 4px dashed #cbbcf5; display: grid; place-items: center; font: 700 2.4rem/1 var(--font); color: var(--purple-d); background: rgba(255, 255, 255, 0.6); }
.slot.filled { border-style: solid; border-color: var(--green); background: #fff; animation: popIn 0.25s; }
.word-tiles { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 560px; }
.tile-letter { width: 70px; height: 70px; border: 0; border-radius: 20px; background: var(--orange); color: #fff; font: 700 2.2rem/1 var(--font); box-shadow: 0 5px 0 var(--orange-d); }
.tile-letter:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--orange-d); }
.tile-letter.used { visibility: hidden; }
.tile-letter.hint { animation: hintGlow 1.2s 2; }
@keyframes hintGlow { 50% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(255, 198, 26, 0.6); } }
@media (max-width: 480px) { .slot { width: 52px; height: 64px; font-size: 2rem; } .tile-letter { width: 58px; height: 58px; font-size: 1.8rem; } .word-pic { width: 140px; height: 140px; font-size: 5rem; } }

/* Math */
.math-card { background: #fff; border-radius: 30px; padding: 20px 24px; box-shadow: var(--shadow); text-align: center; width: min(640px, 100%); }
.math-q { font: 700 3rem/1.2 var(--font); color: var(--ink); }
.math-pics { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font: 2.4rem/1 var(--emoji); margin-bottom: 10px; }
.math-pics.groups { align-items: center; gap: 14px; }
.math-pics .group { display: flex; flex-wrap: wrap; gap: 4px; max-width: 46%; justify-content: center; padding: 8px; border-radius: 18px; background: #f6f2ff; }
.math-pics .op { font: 700 2.4rem/1 var(--font); color: var(--purple-d); }
.math-pics .gone { opacity: 0.25; position: relative; }
.math-pics .gone::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font: 700 2rem/1 var(--font); }

/* Shapes */
.shape-grid { display: grid; grid-template-columns: repeat(3, minmax(90px, 160px)); gap: 14px; justify-content: center; }
.shape-btn { aspect-ratio: 1; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 5px 0 rgba(43, 45, 66, 0.1); padding: 14px; }
.shape-btn svg { width: 100%; height: 100%; display: block; }
.shape-btn.right { background: #dff5ea; box-shadow: 0 0 0 5px var(--green); }
.shape-btn[disabled] { opacity: 0.3; }

/* Clock */
.clock-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clock { width: min(320px, 76vw, 44vh); aspect-ratio: 1; }
.clock svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(80, 60, 160, 0.18)); }
.clock-nums { font: 700 17px var(--font); fill: var(--ink); }
.clock-digital { font: 700 2.6rem/1 var(--font); background: #2b2d42; color: #7dffb0; border-radius: 16px; padding: 8px 20px; letter-spacing: 2px; }
.choices.times .choice { font-size: 2rem; }

/* Memory */
.memory-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; width: min(640px, 100%); }
.memory-grid[data-count='6'] { --cols: 3; width: min(460px, 100%); }
.memory-grid[data-count='12'] { --cols: 4; }
.memory-grid[data-count='16'] { --cols: 4; }
.memory-grid[data-count='20'] { --cols: 5; }
.mem-card { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; perspective: 700px; }
.mem-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.4s; transform-style: preserve-3d; }
.mem-card.open .mem-inner, .mem-card.matched .mem-inner { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 0 rgba(43, 45, 66, 0.15); }
.mem-back { background: linear-gradient(135deg, var(--purple), var(--pink)); color: rgba(255, 255, 255, 0.85); font: 700 2.2rem/1 var(--font); }
.mem-front { background: #fff; transform: rotateY(180deg); font: clamp(2rem, 8vw, 3.2rem)/1 var(--emoji); }
.mem-card.matched .mem-front { background: #dff5ea; box-shadow: 0 0 0 4px var(--green); }

/* Simon */
.simon { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(440px, 88vw, 56vh); aspect-ratio: 1; }
.simon-pad { border: 0; background: var(--c); filter: saturate(0.7) brightness(0.9); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18); transition: filter 0.1s, transform 0.1s; display: grid; place-items: center; }
.simon-pad:nth-child(1) { border-radius: 100% 18px 18px 18px; }
.simon-pad:nth-child(2) { border-radius: 18px 100% 18px 18px; }
.simon-pad:nth-child(3) { border-radius: 18px 18px 18px 100%; }
.simon-pad:nth-child(4) { border-radius: 18px 18px 100% 18px; }
.simon-pad .e { font: 3.2rem/1 var(--emoji); opacity: 0.85; }
.simon-pad.lit { filter: saturate(1.3) brightness(1.25); transform: scale(1.04); box-shadow: 0 0 40px var(--c); }
.simon-pad[disabled] { cursor: default; }
.simon-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.simon-count { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 2.6rem/1 var(--font); box-shadow: var(--shadow); }

/* Music */
.xylo { display: flex; gap: 8px; align-items: center; justify-content: center; width: min(760px, 100%); height: min(360px, 48vh); padding: 18px 10px; background: linear-gradient(#a0522d, #8b4513); border-radius: 26px; box-shadow: var(--shadow); touch-action: none; }
.xylo-bar { flex: 1; height: var(--h); border: 0; border-radius: 14px; background: var(--c); color: rgba(255, 255, 255, 0.95); font: 700 1.4rem/1 var(--font); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15), 0 4px 0 rgba(0, 0, 0, 0.25); position: relative; }
.xylo-bar::before, .xylo-bar::after { content: ''; position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.xylo-bar::before { top: 12px; }
.xylo-bar::after { top: 45%; display: none; }
.xylo-bar.hit { animation: barHit 0.25s; }
.xylo-bar.next { box-shadow: 0 0 0 6px #fff, 0 0 30px 6px var(--c); animation: nextGlow 1s infinite; }
@keyframes barHit { 40% { transform: scale(0.94); filter: brightness(1.3); } }
@keyframes nextGlow { 50% { filter: brightness(1.25); } }
.drum-grid { display: grid; grid-template-columns: repeat(4, minmax(70px, 150px)); gap: 12px; justify-content: center; touch-action: none; }
.drum-pad { aspect-ratio: 1; border: 0; border-radius: 26px; background: var(--c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 600; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2); }
.drum-pad .e { font: 2.6rem/1 var(--emoji); }
.drum-pad.hit { animation: barHit 0.2s; }
@media (max-width: 520px) { .drum-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); width: 100%; } }
.song-notes { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding: 6px 4px; scrollbar-width: none; }
.song-notes span { flex: 0 0 auto; min-width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-weight: 700; color: var(--ink-faint); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); }
.song-notes span.done { background: #dff5ea; color: var(--green-d); }
.song-notes span.now { background: var(--purple); color: #fff; transform: scale(1.12); }

/* Maze */
.maze-wrap { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.maze-board { position: relative; width: min(560px, 92vw, 62vh); aspect-ratio: 1; background: #fff; border-radius: 22px; box-shadow: var(--shadow); touch-action: none; container-type: inline-size; }
.maze-inner { position: absolute; inset: 4%; }
.maze-inner svg { width: 100%; height: 100%; display: block; overflow: visible; }
.maze-sprite { position: absolute; width: 1.25em; height: 1.25em; display: grid; place-items: center; transform: translate(-50%, -50%); font: 1.6rem/1 var(--emoji); pointer-events: none; transition: left 0.12s, top 0.12s; white-space: nowrap; }
.maze-sprite.goal { animation: wiggle 1.4s ease-in-out infinite; }
.dpad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 6px; }
.dpad button { border: 0; border-radius: 18px; background: #fff; font: 1.8rem/1 var(--emoji); box-shadow: 0 4px 0 rgba(43, 45, 66, 0.12); }
.dpad button:active { transform: translateY(3px); }
.dpad-n { grid-column: 2; grid-row: 1; }
.dpad-w { grid-column: 1; grid-row: 2; }
.dpad-e { grid-column: 3; grid-row: 2; }
.dpad-s { grid-column: 2; grid-row: 3; }

/* Dot to dot */
.dots-picker { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; scrollbar-width: none; }
.dots-pick { flex: 0 0 auto; border: 3px solid transparent; border-radius: 18px; background: #fff; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; color: var(--ink-soft); box-shadow: 0 3px 0 rgba(43, 45, 66, 0.08); }
.dots-pick .e { font: 2rem/1 var(--emoji); }
.dots-pick.on { border-color: var(--purple); }
.dots-board { position: relative; width: min(560px, 92vw, 62vh); aspect-ratio: 1; background: #fff; border-radius: 26px; box-shadow: var(--shadow); touch-action: none; }
.dots-board svg { width: 100%; height: 100%; display: block; }
.dots-line { fill: none; stroke: var(--purple); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.dots-fill { fill: #ffe9a8; stroke: none; animation: fadeIn 0.6s; }
.dot .dot-hit { fill: transparent; }
.dot .dot-pt { fill: #2b2d42; }
.dot text { font: 600 34px var(--font); fill: var(--ink-soft); }
.dot.hit .dot-pt { fill: var(--purple); }
.dot.hit text { fill: #c3b7ea; }
.dot.next .dot-pt { fill: var(--pink); animation: dotPulse 1s infinite; transform-box: fill-box; transform-origin: center; }
.dot.next text { fill: var(--pink-d); font-weight: 700; }
@keyframes dotPulse { 50% { transform: scale(1.6); } }
.dots-reveal { position: absolute; inset: 0; display: grid; place-items: center; font: 8rem/1 var(--emoji); pointer-events: none; animation: popIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); opacity: 0.9; }

/* Jigsaw */
.puzzle-pics { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; scrollbar-width: none; }
.puzzle-pic { flex: 0 0 auto; width: 76px; height: 76px; padding: 0; border: 3px solid transparent; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 3px 0 rgba(43, 45, 66, 0.08); }
.puzzle-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puzzle-pic.on { border-color: var(--purple); }
.puzzle-pic.mine { border-style: dashed; border-color: #cbbcf5; }
.puzzle-pic.mine.on { border-style: solid; border-color: var(--purple); }
.puzzle-wrap { position: relative; width: min(520px, 92vw, 58vh); aspect-ratio: 1; }
.puzzle-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; width: 100%; height: 100%; padding: 4px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.piece { border: 0; padding: 0; border-radius: 8px; background-repeat: no-repeat; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); transition: transform 0.12s; }
.piece.ok { box-shadow: inset 0 0 0 3px rgba(34, 181, 115, 0.85); }
.piece.sel { transform: scale(0.92); box-shadow: 0 0 0 5px var(--yellow); position: relative; z-index: 1; }
.puzzle-board.solved .piece { border-radius: 0; box-shadow: none; }
.puzzle-board.solved { gap: 0; }
.puzzle-peek { position: absolute; inset: 0; border-radius: 22px; background-size: cover; box-shadow: var(--shadow); z-index: 2; }

/* Balloons */
.balloon-goal { font-size: 1.6rem; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.balloon-goal b { font-size: 2.4rem; color: var(--purple-d); background: #fff; padding: 2px 18px; border-radius: 16px; box-shadow: var(--shadow); }
.balloon-sky { position: relative; width: min(900px, 100%); height: min(62vh, 560px); overflow: hidden; border-radius: 26px; background: linear-gradient(#bfe6ff, #eaf7ff 70%, #c8f2c2 100%); box-shadow: var(--shadow); touch-action: manipulation; }
.game-body .progress { width: min(900px, 100%); }
.balloon {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7) 0 9%, transparent 10%), var(--c);
  color: #fff; font: 700 2rem/1 var(--font); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.12);
  display: grid; place-items: center; will-change: transform;
}
.balloon::after { content: ''; position: absolute; left: 50%; bottom: -36px; width: 2px; height: 36px; background: rgba(43, 45, 66, 0.35); }
.balloon::before { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom-color: var(--c); transform: rotate(180deg); }
.balloon.popped { animation: pop 0.25s forwards; pointer-events: none; }
.balloon.wiggle span { display: inline-block; animation: shake 0.4s; }
@keyframes pop { to { transform: scale(1.6); opacity: 0; } }

/* Tic-tac-toe */
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(380px, 86vw, 50vh); aspect-ratio: 1; }
.ttt-cell { border: 0; border-radius: 22px; background: #fff; font: clamp(2.6rem, 12vw, 4.2rem)/1 var(--emoji); box-shadow: 0 5px 0 rgba(43, 45, 66, 0.1); }
.ttt-cell.placed { animation: popIn 0.25s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ttt-cell.win { background: #fff3c4; box-shadow: 0 0 0 5px var(--yellow); }
.ttt-score { display: flex; gap: 22px; font-size: 1.4rem; font-weight: 600; background: #fff; padding: 8px 20px; border-radius: 18px; box-shadow: var(--shadow); }

/* Jokes */
.joke-card { width: min(620px, 100%); background: #fff; border-radius: 32px; padding: 28px 22px; text-align: center; box-shadow: var(--shadow); min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.joke-emoji { font: 5rem/1 var(--emoji); }
.joke-q { margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.3; }
.joke-a { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--pink-d); }
.joke-a.pop { animation: popIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }