.answer {
  font-size: clamp(16px, 4vw, 26px);
  overflow-wrap: anywhere;
}

.answer:disabled,
.memory-card:disabled,
.number-tile:disabled,
.tap-tile:disabled {
  cursor: default;
}

.number-board,
.tap-board,
.letter-board,
.catch-board,
.color-board,
.sequence-board,
.fraction-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.number-tile,
.tap-tile,
.letter-tile,
.catch-tile,
.color-tile {
  min-height: 78px;
  border: 2px solid #e8e1f5;
  border-radius: 18px;
  background: #fff;
  color: #49337d;
  font-size: 31px;
  font-weight: 900;
  box-shadow: 0 5px 0 #ded4ef;
  transition: transform .15s, opacity .2s, background .2s;
}

.sequence-tile,
.pizza-slice {
  min-height: 78px;
  border: 2px solid #e8e1f5;
  border-radius: 18px;
  background: #fff;
  font-size: 31px;
  box-shadow: 0 5px 0 #ded4ef;
}

.number-tile:active,
.tap-tile:active,
.letter-tile:active,
.catch-tile:active,
.color-tile:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #ded4ef;
}

.number-tile.popped {
  opacity: .25;
  transform: scale(.75);
  background: #dff8ea;
}

.number-tile.wrong,
.tap-tile.wrong {
  background: #ffe3e5;
  animation: game-shake .25s;
}

.tap-tile.found {
  background: #fff3b8;
  border-color: #ffd65c;
  transform: scale(1.08);
}

.word-slots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 24px;
}

.word-slots span {
  width: 55px;
  padding: 8px;
  border-bottom: 5px solid #7457e8;
  color: #49337d;
  font-size: 34px;
  font-weight: 900;
}

.letter-tile.used,
.catch-tile.caught,
.color-tile.found {
  opacity: .3;
  transform: scale(.75);
  background: #dff8ea;
}

.letter-tile.wrong,
.catch-tile.wrong,
.color-tile.wrong,
.sequence-tile.wrong {
  background: #ffe3e5;
  animation: game-shake .25s;
}

.math-problem {
  margin: 8px 0 24px;
  color: #49337d;
  font: 700 clamp(42px, 10vw, 68px) Fredoka;
}

.sequence-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 24px;
}

.sequence-display span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: #f2edff;
  font-size: 29px;
}

.unscramble-word {
  min-height: 58px;
  margin: 5px 0 22px;
  color: #49337d;
  font: 700 clamp(28px, 7vw, 42px) Fredoka;
  letter-spacing: .12em;
}

.pizza-slice {
  transition: transform .15s, background .15s, opacity .15s;
}

.pizza-slice.selected {
  background: #fff0b9;
  border-color: #ffca52;
  transform: translateY(-5px) rotate(-4deg);
}

.fraction-check { margin-top: 20px; }

.odd-board,
.coin-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.odd-tile,
.coin-tile,
.maze-controls button {
  min-height: 70px;
  border: 2px solid #e8e1f5;
  border-radius: 17px;
  background: #fff;
  color: #49337d;
  font-size: 29px;
  font-weight: 900;
  box-shadow: 0 5px 0 #ded4ef;
}

.odd-tile.wrong { background: #ffe3e5; animation: game-shake .25s; }
.odd-tile.found { background: #fff3b8; border-color: #ffd65c; transform: scale(1.08); }
.coin-tile.selected { background: #fff0b9; border-color: #ffca52; transform: translateY(-4px); }
.coin-check { margin-top: 20px; }

.maze-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: min(330px, 100%);
  margin: 0 auto 18px;
  padding: 8px;
  border-radius: 18px;
  background: #e9e0ff;
}

.maze-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fff;
  font-size: 28px;
}

.maze-cell.wall { background: #6850bb; box-shadow: inset 0 0 0 3px #5139ae; }
.maze-cell.player { background: #fff3b8; }
.maze-cell.goal { background: #dff8ea; }

.maze-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.comic-game { background: #fffdf5; }
.comic-panel {
  position: relative;
  overflow: hidden;
  border: 4px solid #33264f;
  border-radius: 5px;
  background: linear-gradient(135deg,#fff2a8,#ffcfdf);
  box-shadow: 6px 6px 0 #33264f;
}

.hero-scene { padding: 22px 16px; margin-bottom: 20px; }
.hero-scene > div { font-size: 52px; }
.hero-scene p { margin: 12px 0 0; color: #49337d; font-weight: 900; }
.comic-burst {
  position: absolute;
  right: 8px;
  top: 7px;
  padding: 7px;
  background: #ffec3d;
  color: #d62d54;
  font: 900 14px Fredoka;
  transform: rotate(8deg);
}

.hero-choices { display: grid; gap: 10px; }
.hero-choices button {
  border: 2px solid #ded3ef;
  border-radius: 14px;
  background: #fff;
  padding: 13px;
  color: #49337d;
  font-weight: 900;
}
.hero-choices button.correct { background: #dff8ea; border-color: #51c991; }
.hero-choices button.wrong { background: #ffe3e5; border-color: #f4777e; }

.comic-strip,
.finished-comic {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  margin-bottom: 22px;
}
.comic-mini {
  display: grid;
  place-items: center;
  min-height: 85px;
  border: 3px solid #33264f;
  background: #f3edff;
  font-size: 29px;
  opacity: .55;
}
.comic-mini.active { background: #fff0a9; opacity: 1; transform: rotate(-2deg); }
.comic-mini small { display: block; font-size: 9px; color: #625476; }
.creator-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.creator-options button { border: 3px solid #33264f; background: #fff; padding: 14px 6px; box-shadow: 4px 4px 0 #33264f; }
.creator-options span,.creator-options b { display: block; }
.creator-options span { font-size: 38px; }
.creator-options b { margin-top: 5px; color: #49337d; font-size: 11px; }
.finished-comic .comic-panel { min-height: 145px; padding: 17px 8px; display: grid; place-items: center; }
.finished-comic .comic-panel:nth-child(2) { background: linear-gradient(135deg,#dff8ea,#c8e8ff); }
.finished-comic .comic-panel:nth-child(3) { background: linear-gradient(135deg,#e9e0ff,#fff0b9); }
.finished-comic span { font-size: 40px; }
.finished-comic p { margin: 0; color: #33264f; font-size: 11px; font-weight: 900; }
.comic-finale { margin: 25px 0 18px; color: #e93662; font: 900 22px Fredoka; transform: rotate(-2deg); }

.picture-puzzle {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  width: min(330px,100%);
  margin: 0 auto;
}
.puzzle-piece {
  aspect-ratio: 1.25;
  border: 4px solid #624bbf;
  border-radius: 16px;
  background: linear-gradient(135deg,#fff0b9,#e9e0ff);
  font-size: 55px;
  box-shadow: 0 6px 0 #49369d;
  transform: rotate(var(--angle));
  transition: transform .25s;
}

.race-road {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  overflow: hidden;
  min-height: 270px;
  margin-bottom: 18px;
  border: 6px solid #5e5966;
  border-radius: 16px;
  background: #69646f;
}
.race-lane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4px;
  border-right: 3px dashed #f7f0b0;
  font-size: 38px;
}
.race-lane:last-child { border-right: 0; }
.race-lane.car-lane { background: rgba(255,230,91,.1); }
.race-obstacle,.race-car { min-height: 50px; }
.race-controls { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; }
.race-controls button {
  min-height: 58px;
  border: 2px solid #ded3ef;
  border-radius: 15px;
  background: #fff;
  color: #49337d;
  font-weight: 900;
}
#driveCar { background: #7457e8; color: #fff; border-color: #5139ae; box-shadow: 0 5px 0 #5139ae; }

.age-filter {
  margin-left: auto;
  border: 1px solid #e5ddf3;
  border-radius: 24px;
  background: #fff;
  color: #675b7a;
  padding: 9px 35px 9px 15px;
  font-weight: 800;
}

.activity-empty {
  grid-column: 1 / -1;
  padding: 38px 20px;
  border: 2px dashed #dcd2ee;
  border-radius: 22px;
  background: rgba(255,255,255,.65);
  text-align: center;
}

.activity-empty span,
.activity-empty strong,
.activity-empty small {
  display: block;
}

.activity-empty span { font-size: 48px; }
.activity-empty strong { margin: 8px 0 3px; font: 700 21px Fredoka; color: #49337d; }
.activity-empty small { color: #817990; }

.global-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 850px;
  margin: 0 auto 30px;
}

.global-score-grid > div {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg,#fff,#f5f1ff);
  box-shadow: 0 8px 25px rgba(67,48,110,.1);
}

.global-score-grid span { grid-row: 1 / 3; font-size: 34px; }
.global-score-grid b { color: #49337d; font: 700 30px Fredoka; }
.global-score-grid small { color: #817990; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.winners-title { max-width: 850px; margin: 0 auto 14px; color: #49337d; font: 700 23px Fredoka; }

.leaderboard-card {
  overflow: hidden;
  max-width: 850px;
  margin: 0 auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(67,48,110,.12);
}

.leaderboard-head,
.leaderboard-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px 120px;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
}

.leaderboard-head {
  background: #5f48c5;
  color: #e9e3ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.leaderboard-row {
  min-height: 72px;
  border-bottom: 1px solid #f0ebf7;
  color: #706780;
}

.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row:nth-child(1) { background: #fffaf0; }
.leader-rank { font-size: 27px; text-align: center; }
.leader-name { color: #49337d; font: 700 19px Fredoka; }
.leaderboard-row b { color: #7355d8; text-align: right; }
.leaderboard-loading { padding: 42px 20px; text-align: center; color: #817990; }
.leaderboard-note { margin: 18px auto; text-align: center; color: #817990; font-size: 13px; }

.activity-card[hidden] {
  display: none;
}

@keyframes game-shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.egg-game { padding-top: 20px; }
.egg-help { color: #665c78; font-size: 12px; font-weight: 800; margin: -8px 0 10px; }
.egg-yard {
  position: relative; height: 330px; overflow: hidden; touch-action: none; user-select: none;
  border: 4px solid #8dd0ec; border-radius: 22px;
  background: linear-gradient(#82d9ff 0 67%, #8bd46c 67% 100%);
  box-shadow: inset 0 -8px 0 rgba(47,128,62,.12);
}
.egg-yard:focus-visible { outline: 4px solid #ffd85c; outline-offset: 3px; }
.egg-chickens { position: absolute; z-index: 3; top: 12px; left: 8%; right: 8%; display: flex; justify-content: space-between; font-size: 42px; }
.egg-cloud { position: absolute; color: white; opacity: .8; font-size: 40px; }
.egg-cloud.cloud-one { left: 23%; top: 42px; }
.egg-cloud.cloud-two { right: 18%; top: 78px; transform: scale(.75); }
.egg-grass { position: absolute; inset: auto 0 0; height: 23%; background: repeating-linear-gradient(80deg,#69ba55 0 8px,#78c960 8px 16px); }
.egg-basket { position: absolute; z-index: 5; bottom: 13px; left: 50%; width: 70px; margin-left: -35px; font-size: 56px; line-height: 1; transition: left .06s linear; filter: drop-shadow(0 5px 3px rgba(43,79,34,.25)); }
.falling-item { position: absolute; z-index: 4; width: 34px; height: 34px; margin-left: -17px; display: grid; place-items: center; font-size: 29px; filter: drop-shadow(0 3px 2px rgba(53,45,68,.2)); }
.falling-item.gold { animation: egg-sparkle .45s alternate infinite; }
.falling-item.bad { font-size: 27px; }
.egg-controls { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.egg-controls button { min-width: 120px; border: 0; border-radius: 14px; padding: 11px 18px; background: #7157d8; color: white; font-weight: 900; box-shadow: 0 4px 0 #4f37aa; }
@keyframes egg-sparkle { to { transform: scale(1.25) rotate(12deg); filter: drop-shadow(0 0 8px #ffe05b); } }

.activity-card .blob { animation: card-character 3s ease-in-out infinite; }
.activity-card:nth-child(3n+2) .blob { animation-delay: -.8s; }
.activity-card:nth-child(3n) .blob { animation-delay: -1.6s; }
.activity-card .card-art i { animation: card-spark 1.6s ease-in-out infinite alternate; }
@keyframes card-character { 0%,100% { transform: translateY(0) rotate(-5deg) scale(1); } 50% { transform: translateY(-9px) rotate(4deg) scale(1.06); } }
@keyframes card-spark { to { transform: rotate(20deg) scale(1.25); filter: drop-shadow(0 0 6px white); } }

.pair-board { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pair-tile { min-height:72px; border:3px solid #ebe4f7; border-radius:17px; background:white; font-size:31px; font-weight:900; transition:.18s; }
.pair-tile.selected { border-color:#775bd8; transform:scale(1.06); background:#f1ecff; }
.pair-tile.matched { border-color:#4bc48a; background:#dcf8e9; animation:pair-pop .35s; }
.pair-tile.wrong { background:#ffe0e4; animation:game-shake .25s; }
.line-pairs .side-0 { border-left:7px solid #8d72e5; }.line-pairs .side-1 { border-right:7px solid #55c995; }
.line-pairs .line-connected { box-shadow:0 0 0 4px #91e2b8; }
@keyframes pair-pop { 50% { transform:scale(1.14) rotate(3deg); } }

.color-block-board { display:grid; grid-template-columns:repeat(2,110px); justify-content:center; gap:14px; }
.color-block-board button { height:100px; border:0; border-radius:22px; font-size:55px; opacity:.72; box-shadow:inset 0 -8px rgba(0,0,0,.12); transition:.15s; }
.color-block-board button.flash { opacity:1; transform:scale(1.12); filter:brightness(1.25) drop-shadow(0 0 12px #ffe66d); }
.color-palette { display:flex; justify-content:center; gap:8px; margin-bottom:14px; }
.color-palette button,.drawing-tools [data-ink] { width:42px; height:42px; border:4px solid white; border-radius:50%; box-shadow:0 0 0 2px #ddd3ee; }
.color-palette button.selected { transform:scale(1.2); box-shadow:0 0 0 4px #5e47bc; }
.color-picture { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.color-picture button { min-height:95px; border:2px dashed #beb4ce; border-radius:18px; background:#f7f4fa; font-size:48px; transition:.2s; }

.brick-arena { position:relative; height:270px; overflow:hidden; border-radius:20px; background:linear-gradient(#151f4d,#36477f); }
.brick-wall { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:13px; }
.brick-wall button { height:34px; border:0; border-radius:7px; background:hsl(calc(var(--brick)*55 + 5) 85% 62%); box-shadow:inset 0 -5px rgba(0,0,0,.15); transition:.2s; }
.brick-wall button.broken { transform:scale(0) rotate(30deg); opacity:0; }
.bounce-ball { position:absolute; left:45%; top:58%; animation:ball-bounce 1.4s linear infinite alternate; }
.brick-paddle { position:absolute; bottom:15px; left:50%; width:90px; height:14px; margin-left:-45px; border-radius:8px; background:#ffe066; transition:left .15s; }
@keyframes ball-bounce { to { left:62%; top:82%; transform:rotate(360deg); } }

.ant-yard { position:relative; height:310px; overflow:hidden; border-radius:22px; background:radial-gradient(circle at 30% 25%,#f4d9a2 0 4%,transparent 5%),linear-gradient(135deg,#d6b578,#f5deb0); }
.running-ant { position:absolute; border:0; background:transparent; font-size:42px; animation:ant-wiggle .25s infinite alternate; }
@keyframes ant-wiggle { to { transform:translateX(8px) rotate(10deg); } }
.big-arrow { font-size:110px; animation:arrow-pulse .7s ease-in-out infinite alternate; }
.arrow-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.arrow-controls button { min-height:70px; border:2px solid #ddd4ef; border-radius:16px; background:white; font-size:34px; }
@keyframes arrow-pulse { to { transform:scale(1.15); filter:drop-shadow(0 7px 5px #c7b8f2); } }

.balance-track { height:90px; position:relative; margin:35px 15px 15px; border-bottom:12px solid #64547e; transform:rotate(-2deg); }
.balance-track i { position:absolute; left:42%; width:16%; height:18px; bottom:-14px; border-radius:9px; background:#69cf8d; }
#balanceBall { position:absolute; left:15%; bottom:5px; margin-left:-18px; font-size:36px; transition:left .1s; }
.balance-slider { width:90%; accent-color:#7055d4; }
.calm-sky { height:230px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; border-radius:25px; padding:20px; font-size:46px; background:linear-gradient(#d8f4ff,#e7f8d8); overflow:hidden; }
#breathBubble { font-size:60px; transition:transform 1.8s ease-in-out; }
#breathBubble.breathe-in { transform:scale(2.4) translateY(20px); } #breathBubble.breathe-out { transform:scale(.7) translateY(-10px); }
.brain-riddle { min-height:105px; display:grid; place-items:center; margin-bottom:15px; border-radius:18px; padding:18px; background:#fff8d7; color:#4b3c67; font:700 21px Fredoka; }

.drawing-tools { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; }
.drawing-tools button:last-child { border:0; border-radius:12px; padding:9px 13px; font-weight:900; }
.drawing-wrap { position:relative; height:300px; border:3px dashed #c9bbe5; border-radius:20px; overflow:hidden; background:white; margin-bottom:12px; touch-action:none; }
#drawingCanvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
#traceLetter { position:absolute; inset:0; display:grid; place-items:center; color:transparent; -webkit-text-stroke:4px #d9d2e4; font:700 245px Fredoka; opacity:.75; }

@media (max-width:600px) {
  .pair-board { grid-template-columns:repeat(2,1fr); }
  .color-block-board { grid-template-columns:repeat(2,minmax(80px,105px)); }
  .drawing-wrap { height:250px; }
  .arrow-controls button { min-height:58px; }
}

@media (max-width: 560px) {
  .game-body { padding: 22px 16px; }
  .number-board, .tap-board, .letter-board, .catch-board, .color-board, .sequence-board, .fraction-board { gap: 8px; }
  .number-tile, .tap-tile, .letter-tile, .catch-tile, .color-tile { min-height: 62px; font-size: 25px; }
  .sequence-tile, .pizza-slice { min-height: 62px; font-size: 25px; }
  .odd-board, .coin-board { gap: 8px; }
  .odd-tile, .coin-tile, .maze-controls button { min-height: 58px; font-size: 24px; }
  .finished-comic { grid-template-columns: 1fr; }
  .creator-options span { font-size: 30px; }
  .race-road { min-height: 230px; }
  .race-controls button { font-size: 12px; }
  .age-filter { margin-left: 0; }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 52px 1fr 52px 80px; gap: 6px; padding: 13px 10px; }
  .leader-name { font-size: 16px; }
  .leaderboard-row b { font-size: 13px; }
  .global-score-grid { grid-template-columns: 1fr; gap: 10px; }
  .global-score-grid > div { padding: 14px 18px; }
}