/* Math game scenes: painted backdrop + ambient layer + glass UI and motion on top of games.css. */

[data-game="math-snake"], [data-tool="math-snake"] { --scene: url("/img/games/math/snake.jpg"); }
[data-game="math-match"], [data-tool="math-match"] { --scene: url("/img/games/math/match.jpg"); }
[data-game="math-ladder"], [data-tool="math-ladder"] { --scene: url("/img/games/math/ladder.jpg"); }
[data-game="math-fruit"], [data-tool="math-fruit"] { --scene: url("/img/games/math/fruit.jpg"); }
[data-game="math-goose"], [data-tool="math-goose"] { --scene: url("/img/games/math/goose.jpg"); }
[data-game="math-police"], [data-tool="math-police"] { --scene: url("/img/games/math/police.jpg"); }
[data-game="math-racing"], [data-tool="math-racing"] { --scene: url("/img/games/math/racing.jpg"); }
[data-game="math-cards"], [data-tool="math-cards"] { --scene: url("/img/games/math/cards.jpg"); }
[data-game="math-contest"], [data-tool="math-contest"] { --scene: url("/img/games/math/contest.jpg"); }
[data-game="math-space"], [data-tool="math-space"] { --scene: url("/img/games/math/space.jpg"); }

/* ---- scene layers ------------------------------------------------------------------ */
[data-game^="math-"] > .g-shell { isolation: isolate; background: #cfe6ff; }
[data-game^="math-"] > .g-shell::before {
  content: ''; position: absolute; inset: -4%; z-index: -2; pointer-events: none;
  background: var(--scene) center / cover no-repeat;
  animation: ms-drift 40s ease-in-out infinite alternate;
}
[data-game^="math-"] > .g-shell::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 150px 46px at 8% 12%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 110px 34px at 31% 22%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(ellipse 170px 50px at 63% 9%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(ellipse 90px 28px at 86% 26%, rgba(255, 255, 255, .4), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x;
  animation: ms-pan 70s linear infinite;
}
/* indoor and night scenes twinkle instead of drifting clouds */
:is([data-game="math-match"], [data-game="math-cards"], [data-game="math-space"], [data-game="math-police"]) > .g-shell::after {
  width: 100%;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .95) 0 2px, transparent 4px),
    radial-gradient(circle at 27% 64%, rgba(255, 246, 200, .9) 0 1.5px, transparent 3.5px),
    radial-gradient(circle at 44% 12%, rgba(255, 255, 255, .9) 0 2.5px, transparent 5px),
    radial-gradient(circle at 61% 40%, rgba(200, 230, 255, .9) 0 1.5px, transparent 3.5px),
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, .95) 0 2px, transparent 4px),
    radial-gradient(circle at 90% 58%, rgba(255, 236, 180, .9) 0 2px, transparent 4px),
    radial-gradient(circle at 6% 82%, rgba(255, 255, 255, .8) 0 1.5px, transparent 3.5px),
    radial-gradient(circle at 52% 86%, rgba(255, 255, 255, .7) 0 1.5px, transparent 3.5px);
  background-size: auto; background-repeat: no-repeat;
  animation: ms-twinkle 3.2s ease-in-out infinite alternate;
}
[data-game="math-contest"] > .g-shell::after {
  width: 100%;
  background-image:
    linear-gradient(35deg, transparent 46%, #ff6fa8 46% 54%, transparent 54%),
    linear-gradient(-20deg, transparent 45%, #ffd04a 45% 55%, transparent 55%),
    linear-gradient(70deg, transparent 45%, #57c7ff 45% 55%, transparent 55%),
    linear-gradient(10deg, transparent 45%, #8be36b 45% 55%, transparent 55%);
  background-size: 14px 14px, 12px 12px, 13px 13px, 12px 12px;
  background-position: 12% 0, 38% 0, 66% 0, 88% 0;
  background-repeat: repeat-y;
  opacity: .55;
  -webkit-mask-image: repeating-linear-gradient(transparent 0 110px, #000 110px 124px, transparent 124px 260px);
  mask-image: repeating-linear-gradient(transparent 0 110px, #000 110px 124px, transparent 124px 260px);
  animation: ms-confetti 9s linear infinite;
}

/* ---- glass chrome --------------------------------------------------------------------- */
[data-game^="math-"] .g-bar { background: rgba(255, 255, 255, .76); border-bottom-color: rgba(255, 255, 255, .7); backdrop-filter: blur(16px) saturate(1.35); box-shadow: 0 6px 24px rgba(30, 50, 100, .12); }
[data-game^="math-"] .g-chip { background: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .9); box-shadow: 0 4px 0 rgba(30, 50, 100, .1); }
[data-game^="math-"] .g-bar-actions button { background: rgba(255, 255, 255, .86); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s; }
[data-game^="math-"] .g-bar-actions button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--g-accent-soft); }
[data-game^="math-"] .g-bar-actions button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--g-accent-soft); }
[data-game^="math-"] .g-overlay { background: rgba(24, 36, 72, .32); backdrop-filter: blur(6px); }
[data-game^="math-"] .g-panel { background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px); animation: ms-spring-in .45s cubic-bezier(.2, 1.4, .4, 1); }
[data-game^="math-"] .g-panel-emoji { animation: ms-bob 2.4s ease-in-out infinite; }

/* ---- question and answers ---------------------------------------------------------------- */
[data-game^="math-"] .g-quiz-prompt,
[data-game^="math-"] .g-fruit-prompt {
  background: rgba(255, 255, 255, .84); backdrop-filter: blur(12px);
  border: 4px solid rgba(255, 255, 255, .95); border-radius: 26px;
  box-shadow: 0 10px 0 rgba(232, 150, 42, .22), 0 18px 36px rgba(30, 50, 100, .18);
  animation: ms-drop .45s cubic-bezier(.2, 1.4, .4, 1);
}
[data-game^="math-"] .g-fruit-prompt { width: fit-content; margin: 0 auto; padding: 10px 28px; }
[data-game^="math-"] .g-quiz-label { width: fit-content; margin: 0 auto; padding: 4px 16px; border-radius: 99px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 12px rgba(30, 50, 100, .15); }
[data-game^="math-"] .g-duel-side { background: transparent; }
[data-game^="math-"] .g-opt {
  background: linear-gradient(#fff, #f6f9ff); border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 7px 0 #d6e0f0, 0 12px 22px rgba(30, 50, 100, .14);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
[data-game^="math-"] .g-opt:hover { transform: translateY(-4px); box-shadow: 0 11px 0 #d6e0f0, 0 18px 28px rgba(30, 50, 100, .18); }
[data-game^="math-"] .g-opt:active { transform: translateY(4px); box-shadow: 0 3px 0 #d6e0f0, 0 6px 12px rgba(30, 50, 100, .12); }
[data-game^="math-"] .g-opt.is-right { background: linear-gradient(#5fe08d, #2fb563); box-shadow: 0 6px 0 #23964b; animation: ms-right .45s cubic-bezier(.2, 1.4, .4, 1); }
[data-game^="math-"] .g-opt.is-wrong { background: linear-gradient(#ff7a70, #e5534b); box-shadow: 0 6px 0 #b3362f; animation: g-shake .4s; }
[data-game^="math-"] .g-btn-primary { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s; }
[data-game^="math-"] .g-btn-primary:hover { transform: translateY(-3px); }
[data-game^="math-"] .g-btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--g-accent) 70%, #000); }
[data-game^="math-"] .g-message { background: rgba(255, 255, 255, .94); color: #26304a; font-weight: 800; box-shadow: 0 10px 30px rgba(30, 50, 100, .25); }

/* ---- snake ---------------------------------------------------------------------------------- */
[data-game="math-snake"] .g-snake {
  background: rgba(70, 150, 50, .24); backdrop-filter: blur(1.5px);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6), 0 16px 34px rgba(30, 80, 20, .28);
}
[data-game="math-snake"] .g-snake { grid-template-rows: repeat(var(--h), minmax(0, 1fr)); }
[data-game="math-snake"] .g-snake-cell { background: rgba(255, 255, 255, .1); min-height: 0; }
[data-game="math-snake"] .g-snake-cell:nth-child(2n) { background: rgba(255, 255, 255, .2); }
[data-game="math-snake"] :is(.g-snake-cell.body, .g-snake-cell.head, .g-snake-cell.food) {
  background: center / contain no-repeat; box-shadow: none; border-radius: 0;
  filter: drop-shadow(0 4px 3px rgba(20, 70, 10, .35));
}
[data-game="math-snake"] .g-snake-cell.body { background-image: url("/img/games/math/sprites/snake-body.png"); scale: 1.18; }
[data-game="math-snake"] .g-snake-cell.head { background-image: url("/img/games/math/sprites/snake-head.png"); scale: 1.45; z-index: 2; }
[data-game="math-snake"] .g-snake-cell.head::after { content: none; }
[data-game="math-snake"] .g-snake-cell.head.dir-left { scale: -1.45 1.45; }
[data-game="math-snake"] .g-snake-cell.head.dir-up { rotate: -90deg; }
[data-game="math-snake"] .g-snake-cell.head.dir-down { rotate: 90deg; }
[data-game="math-snake"] .g-snake-cell.food {
  background-image: url("/img/games/math/sprites/apple.png"); scale: 1.15;
  padding-top: 14%; color: #fff; font-size: clamp(15px, 2.2vw, 26px);
  text-shadow: 0 0 3px #8a0d0d, 0 2px 0 #8a0d0d;
  animation: ms-bob 1.6s ease-in-out infinite;
}
[data-game="math-snake"] .g-snake-cell.food:nth-child(3n) { animation-delay: -.5s; }
[data-game="math-snake"] .g-snake-cell.food:nth-child(3n+1) { animation-delay: -1s; }
[data-game="math-snake"] .g-dpad button { background: rgba(255, 255, 255, .9); transition: transform .15s; }
[data-game="math-snake"] .g-dpad button:active { transform: translateY(3px) scale(.95); }

/* ---- pairs: match and memory cards ---------------------------------------------------------- */
:is([data-game="math-match"], [data-game="math-cards"]) .g-card {
  background: linear-gradient(#fff, #f3f6ff); border: 3px solid rgba(255, 255, 255, .95);
  box-shadow: 0 7px 0 rgba(120, 100, 190, .25), 0 14px 26px rgba(40, 30, 90, .18);
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .3s, box-shadow .22s;
}
:is([data-game="math-match"], [data-game="math-cards"]) .g-card.side-b { background: linear-gradient(#fffaf0, #fff0d6); }
:is([data-game="math-match"], [data-game="math-cards"]) .g-card:hover { transform: translateY(-4px) rotate(-1deg); }
:is([data-game="math-match"], [data-game="math-cards"]) .g-card.is-selected { outline: 0; transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 4px var(--g-accent), 0 14px 30px rgba(232, 150, 42, .4); }
:is([data-game="math-match"], [data-game="math-cards"]) .g-card.is-open { animation: ms-flip .38s ease-out; }
:is([data-game="math-match"], [data-game="math-cards"]) .g-card.is-wrong { animation: g-shake .4s; }
:is([data-game="math-match"], [data-game="math-cards"]) .g-card-back {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .3) 0 6%, transparent 7%),
    linear-gradient(140deg, #8b7cf6, #5aa7ff);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6);
}
[data-game="math-cards"] .g-card-back { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35) 0 8%, transparent 9%), linear-gradient(140deg, #3b4fa8, #6c5bd6 55%, #f2a65a); }
:is([data-game="math-match"], [data-game="math-cards"]) .g-card.is-matched { background: linear-gradient(#5fe08d, #2fb563); }

/* ---- ladder ---------------------------------------------------------------------------------- */
[data-game="math-ladder"] .g-ladder { border-left: 8px solid #b27a3e; border-right: 8px solid #b27a3e; border-radius: 6px; box-shadow: 0 10px 24px rgba(30, 40, 80, .2); }
[data-game="math-ladder"] .g-ladder.red { background: rgba(255, 120, 90, .18); }
[data-game="math-ladder"] .g-ladder.blue { background: rgba(80, 160, 255, .18); }
[data-game="math-ladder"] .g-rung { height: 8px; border-radius: 4px; background: linear-gradient(#f0c88c, #c28a4c); box-shadow: 0 2px 0 rgba(90, 50, 20, .3); }
[data-game="math-ladder"] .g-climber { transition: bottom .5s cubic-bezier(.3, 1.5, .5, 1); filter: drop-shadow(0 6px 0 rgba(30, 40, 80, .25)); animation: ms-bob 1.8s ease-in-out infinite; }
[data-game="math-ladder"] .g-peak { animation: ms-wave 1.6s ease-in-out infinite; transform-origin: 30% 100%; }

/* ---- fruit ------------------------------------------------------------------------------------ */
[data-game="math-fruit"] .g-fruit-arena { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55); }
[data-game="math-fruit"] .g-fruit-emoji { animation: ms-spin-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 12px 8px rgba(30, 60, 20, .25)); }
[data-game="math-fruit"] .g-fruit-item:nth-child(2n) .g-fruit-emoji { animation-delay: -.9s; }
[data-game="math-fruit"] .g-fruit-item:nth-child(3n) .g-fruit-emoji { animation-delay: -1.7s; }
[data-game="math-fruit"] .g-fruit-label { background: rgba(255, 255, 255, .94); box-shadow: 0 5px 0 rgba(40, 70, 30, .2); }
[data-game="math-fruit"] .g-fruit-item.is-sliced .g-fruit-emoji { animation: ms-slice .5s forwards; }

/* ---- goose ------------------------------------------------------------------------------------ */
[data-game="math-goose"] .g-pond { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55); }
[data-game="math-goose"] .g-goose-body { font-size: 76px; animation: ms-waddle .42s ease-in-out infinite alternate; filter: drop-shadow(0 8px 4px rgba(30, 70, 20, .28)); }
[data-game="math-goose"] .g-goose:nth-child(2n) .g-goose-body { animation-delay: -.2s; }
[data-game="math-goose"] .g-goose b { background: rgba(255, 255, 255, .95); box-shadow: 0 4px 0 rgba(30, 70, 20, .2); }
[data-game="math-goose"] .g-basket { background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); }

/* ---- police chase ----------------------------------------------------------------------------- */
[data-game="math-police"] .g-track { height: 130px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 14px 30px rgba(60, 30, 80, .25); }
[data-game="math-police"] .g-track-road { top: 50px; background: linear-gradient(#6d6a86, #565370); border-color: rgba(255, 255, 255, .85); }
[data-game="math-police"] .g-track-road::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #ffe27a 0 26px, transparent 26px 52px); animation: ms-road 1.2s linear infinite; }
[data-game="math-police"] .g-runner { top: 34px; transition: left .55s cubic-bezier(.3, 1.4, .5, 1); animation: ms-run .32s ease-in-out infinite alternate; filter: drop-shadow(0 6px 3px rgba(0, 0, 0, .3)); }
[data-game="math-police"] .g-track-goal { animation: ms-bob 2s ease-in-out infinite; }

/* ---- racing ----------------------------------------------------------------------------------- */
[data-game="math-racing"] .g-lane {
  height: 100px;
  background: linear-gradient(transparent 46%, rgba(255, 255, 255, .9) 46% 54%, transparent 54%) 0 0 / 64px 100% repeat-x, linear-gradient(#3f66d8, #2e4fb8);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55), 0 10px 24px rgba(20, 40, 110, .25);
  animation: ms-lane .5s linear infinite;
}
[data-game="math-racing"] .g-lane.red { box-shadow: inset 0 0 0 4px #ff7a6e, 0 10px 24px rgba(20, 40, 110, .25); }
[data-game="math-racing"] .g-lane.blue { box-shadow: inset 0 0 0 4px #7fb6ff, 0 10px 24px rgba(20, 40, 110, .25); }
[data-game="math-racing"] .g-car-icon { top: 22px; transition: left .5s cubic-bezier(.3, 1.3, .5, 1); animation: ms-run .22s ease-in-out infinite alternate; filter: drop-shadow(0 6px 3px rgba(0, 0, 0, .35)); }
[data-game="math-racing"] .g-flame.is-on { animation: ms-flicker .12s linear infinite alternate; }
[data-game="math-racing"] .g-finish { animation: ms-wave 1.4s ease-in-out infinite; }

/* ---- contest ---------------------------------------------------------------------------------- */
[data-game="math-contest"] .g-contest-q { padding: 10px 34px; border-radius: 28px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); box-shadow: 0 10px 0 rgba(150, 90, 220, .25), 0 20px 40px rgba(60, 30, 110, .2); animation: ms-drop .45s cubic-bezier(.2, 1.4, .4, 1); }
[data-game="math-contest"] .g-key { background: linear-gradient(#fff, #f6efff); box-shadow: 0 6px 0 #d9c8f2; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
[data-game="math-contest"] .g-key:hover { transform: translateY(-3px); }
[data-game="math-contest"] .g-key:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9c8f2; }
[data-game="math-contest"] .g-key.ok { background: linear-gradient(#5fe08d, #2fb563); color: #fff; box-shadow: 0 6px 0 #23964b; }
[data-game="math-contest"] .g-key.ok:active { box-shadow: 0 2px 0 #23964b; }
[data-game="math-contest"] .g-key.del { background: linear-gradient(#fff0ee, #ffd9d5); color: #c8302a; box-shadow: 0 6px 0 #f0b5ae; }
[data-game="math-contest"] .g-key.del:active { box-shadow: 0 2px 0 #f0b5ae; }

/* ---- space ------------------------------------------------------------------------------------ */
[data-game="math-space"] .g-space { background: rgba(8, 12, 50, .2); box-shadow: inset 0 0 0 3px rgba(150, 190, 255, .35), inset 0 0 80px rgba(120, 160, 255, .2); }
[data-game="math-space"] .g-space-lane { border-right-color: rgba(190, 210, 255, .14); }
[data-game="math-space"] .g-rock {
  background: radial-gradient(circle at 32% 28%, #f0e3ff 0 8%, #b49aff 34%, #7458d0 70%, #4a3896);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 0 26px rgba(170, 140, 255, .55);
  text-shadow: 0 2px 0 rgba(40, 20, 90, .6);
  animation: ms-glow 1.8s ease-in-out infinite alternate;
}
[data-game="math-space"] .g-ship { filter: drop-shadow(0 0 14px rgba(120, 230, 255, .8)); animation: ms-bob 1.4s ease-in-out infinite; }
[data-game="math-space"] .g-space-q { background: rgba(14, 20, 70, .72); backdrop-filter: blur(10px); border-top: 2px solid rgba(150, 190, 255, .4); }
[data-game="math-space"] .g-laser { width: 8px; margin-left: -4px; background: linear-gradient(transparent, #9ff7ff 60%, #fff); box-shadow: 0 0 16px #7cf6ff; }

/* ---- sprite art: emoji glyphs are hidden and replaced by clay-style images ------------------- */
[data-game^="math-"] :is(.g-goose-body, .g-climber, .g-peak, .g-runner, .g-track-goal, .g-car-icon, .g-finish, .g-ship, .g-fruit-emoji) {
  font-size: 0; color: transparent; background: center / contain no-repeat;
}

[data-game="math-goose"] .g-goose-body { width: 110px; height: 110px; background-image: url("/img/games/math/sprites/goose.png"); }
[data-game="math-goose"] .g-goose b { margin-top: -18px; position: relative; }
[data-game="math-goose"] .g-goose.is-wrong .g-goose-body { filter: drop-shadow(0 0 10px rgba(229, 83, 75, .9)); }
[data-game="math-goose"] .g-basket {
  display: flex; align-items: center; gap: 4px; padding: 4px 14px 4px 66px; font-size: 0;
  background: rgba(255, 255, 255, .85) url("/img/games/math/sprites/basket.png") 8px 50% / 52px no-repeat;
}
[data-game="math-goose"] .g-basket b { font-size: 30px; color: #8a5a1c; }

[data-game="math-ladder"] .g-climber { width: 84px; height: 84px; }
[data-game="math-ladder"] .g-ladder.red .g-climber { background-image: url("/img/games/math/sprites/climber-red.png"); }
[data-game="math-ladder"] .g-ladder.blue .g-climber { background-image: url("/img/games/math/sprites/climber-blue.png"); }
[data-game="math-ladder"] .g-peak { top: -34px; width: 96px; height: 96px; background-image: url("/img/games/math/sprites/peak.png"); z-index: 1; }

[data-game="math-police"] .g-runner { top: 8px; width: 92px; height: 92px; transform: none; }
[data-game="math-police"] .g-runner.police { background-image: url("/img/games/math/sprites/police.png"); }
[data-game="math-police"] .g-runner.thief { background-image: url("/img/games/math/sprites/thief.png"); }
[data-game="math-police"] .g-track-goal { top: 4px; width: 110px; height: 118px; background-position: top center; background-size: 96px; background-image: url("/img/games/math/sprites/hideout.png"); justify-content: flex-end; }
[data-game="math-police"] .g-track-goal small { font-size: 12px; color: #4a3a6a; box-shadow: 0 3px 0 rgba(60, 30, 80, .25); }

[data-game="math-racing"] .g-car-icon { top: 14px; width: 104px; height: 72px; margin-left: -10px; transform: none; }
[data-game="math-racing"] .g-lane.red .g-car-icon { background-image: url("/img/games/math/sprites/car-red.png"); }
[data-game="math-racing"] .g-lane.blue .g-car-icon { background-image: url("/img/games/math/sprites/car-blue.png"); }
[data-game="math-racing"] .g-flame { top: 34px; margin-left: -34px; }
[data-game="math-racing"] .g-finish { top: 12px; width: 70px; height: 70px; background-image: url("/img/games/math/sprites/finish.png"); }

[data-game="math-space"] .g-ship { width: 100px; height: 100px; bottom: 50px; background-image: url("/img/games/math/sprites/rocket.png"); }
[data-game="math-space"] .g-rock {
  width: 104px; height: 104px; border-radius: 0; box-shadow: none;
  background: url("/img/games/math/sprites/meteor.png") center / contain no-repeat;
  font-size: 32px; text-shadow: 0 0 4px #5a2a08, 0 2px 0 #5a2a08;
  animation: ms-glow-sprite 1.8s ease-in-out infinite alternate;
}
[data-game="math-space"] .g-rock.is-hit { animation: g-boom .4s forwards; }

[data-game="math-fruit"] .g-fruit-emoji { width: 96px; height: 96px; background-image: url("/img/games/math/sprites/apple.png"); }
[data-game="math-fruit"] .g-fruit-item:nth-child(6n+2) .g-fruit-emoji { background-image: url("/img/games/math/sprites/watermelon.png"); }
[data-game="math-fruit"] .g-fruit-item:nth-child(6n+3) .g-fruit-emoji { background-image: url("/img/games/math/sprites/orange.png"); }
[data-game="math-fruit"] .g-fruit-item:nth-child(6n+4) .g-fruit-emoji { background-image: url("/img/games/math/sprites/peach.png"); }
[data-game="math-fruit"] .g-fruit-item:nth-child(6n+5) .g-fruit-emoji { background-image: url("/img/games/math/sprites/pineapple.png"); }
[data-game="math-fruit"] .g-fruit-item:nth-child(6n) .g-fruit-emoji { background-image: url("/img/games/math/sprites/grapes.png"); }

[data-game="math-cards"] .g-card { min-height: clamp(86px, 14vh, 130px); }
[data-game="math-cards"] .g-card-back { font-size: 0; background: #2b3f9e url("/img/games/math/sprites/card-back.jpg") center / cover no-repeat; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5); }

:is([data-game="math-match"], [data-game="math-contest"]) .g-body::after {
  content: ''; position: absolute; right: 2%; bottom: 2%; width: clamp(90px, 13vw, 170px); aspect-ratio: 1;
  background: center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 10px 8px rgba(40, 30, 90, .3)); animation: ms-bob 2.4s ease-in-out infinite;
}
[data-game="math-match"] .g-body::after { background-image: url("/img/games/math/sprites/mascot-owl.png"); }
[data-game="math-contest"] .g-body::after { background-image: url("/img/games/math/sprites/mascot-clock.png"); }

/* ---- game list covers ----------------------------------------------------------------------- */
.gl-card[data-tool^="math-"] { overflow: hidden; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .22s; }
.gl-card[data-tool^="math-"]:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(40, 60, 110, .16); }
.gl-card[data-tool^="math-"] .gl-emoji {
  width: auto; height: 118px; margin: -18px -18px 4px; border-radius: 0;
  place-items: end start; padding: 10px 12px; box-sizing: border-box;
  background: var(--scene) center / cover no-repeat; box-shadow: none;
  font-size: 30px; text-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  transition: background-size .4s;
}

/* ---- keyframes ----------------------------------------------------------------------------- */
@keyframes ms-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, -1%); } }
@keyframes ms-pan { to { transform: translateX(-50%); } }
@keyframes ms-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes ms-confetti { from { background-position-y: 0, 0, 0, 0; -webkit-mask-position: 0 0; mask-position: 0 0; } to { background-position-y: 260px, 260px, 260px, 260px; -webkit-mask-position: 0 260px; mask-position: 0 260px; } }
@keyframes ms-spring-in { from { transform: translateY(24px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-drop { from { transform: translateY(-26px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-right { 0% { scale: 1; } 45% { scale: 1.08; box-shadow: 0 0 0 10px rgba(53, 196, 106, .35), 0 4px 0 #23964b; } 100% { scale: 1; } }
@keyframes ms-bob { 50% { translate: 0 -6px; } }
@keyframes ms-spin-bob { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -10px; rotate: 6deg; } }
@keyframes ms-slice { 40% { scale: 1.4; rotate: 25deg; filter: brightness(1.3); } 100% { scale: 1.7; rotate: 60deg; opacity: 0; } }
@keyframes ms-waddle { from { rotate: -7deg; translate: 0 0; } to { rotate: 7deg; translate: 0 -3px; } }
@keyframes ms-run { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes ms-road { to { background-position-x: -52px; } }
@keyframes ms-lane { to { background-position-x: -64px, 0; } }
@keyframes ms-flicker { from { scale: .9; opacity: .8; } to { scale: 1.15; opacity: 1; } }
@keyframes ms-wave { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes ms-glow { from { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 0 18px rgba(170, 140, 255, .4); } to { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 0 34px rgba(190, 160, 255, .8); } }
@keyframes ms-glow-sprite { from { filter: drop-shadow(0 0 6px rgba(255, 170, 80, .45)); } to { filter: drop-shadow(0 0 18px rgba(255, 190, 110, .9)); } }
@keyframes ms-flip { from { rotate: y 90deg; } to { rotate: y 0deg; } }

@media (prefers-reduced-motion: reduce) {
  [data-game^="math-"] > .g-shell::before,
  [data-game^="math-"] > .g-shell::after,
  [data-game^="math-"] *,
  .gl-card[data-tool^="math-"] { animation: none !important; transition-duration: .01s !important; }
}