/* SchoolDay v229: the maths games.

   Everything here is CSS keyframes on spans the game creates and removes. No
   canvas, no library, and nothing left animating after the overlay closes --
   the game removes the overlay, and every effect goes with it. */

.maths-game-overlay-v229 {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf6ff 0%, #fdfbe9 100%);
}
body.maths-game-open-v229 { overflow: hidden; }

.maths-game-panel-v229 {
  position: relative;
  width: min(46rem, 96vw);
  max-height: 94vh;
  overflow-y: auto;
  padding: 1.4rem 1.2rem 1.6rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1.2rem 2.4rem rgba(23, 63, 104, .18);
  text-align: center;
}
.maths-game-close-v229 {
  position: absolute;
  top: .5rem;
  right: .6rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e7eef5;
  color: #173f68;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.maths-game-progress-v229 { margin: .2rem 0 .6rem; color: #5b7185; font-size: .9rem; }
.maths-game-prompt-v229 { margin: 0; font-size: clamp(1.3rem, 3.4vw, 1.9rem); color: #173f68; }
.maths-game-number-v229 {
  display: inline-block;
  min-width: 2.4ch;
  padding: 0 .3rem;
  font-size: clamp(3.4rem, 13vw, 6rem);
  font-weight: 800;
  line-height: 1.05;
  color: #0f3d6b;
}
.maths-game-word-v229 { margin: 0 0 .5rem; font-size: 1.15rem; color: #446079; text-transform: lowercase; }
.maths-game-repeat-v229 { margin-bottom: 1rem; }
.maths-game-score-v229 { margin: 1rem 0 0; color: #5b7185; }

.maths-game-choices-v229 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.maths-game-choice-v229 {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7rem, 26vw, 10rem);
  height: clamp(7rem, 26vw, 10rem);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s ease;
}
.maths-game-choice-v229:active { transform: scale(.96); }
/* BOTH of these are positioned with an explicit z-index, and that is not
   decoration. clip-path creates a stacking context, so a clipped shape paints
   in the positioned layer while a plain sibling span paints below it -- the
   triangle and the hexagon covered their own numbers, while the circle, which
   uses border-radius and makes no stacking context, did not. A child cannot
   play a game whose numbers are hidden behind the shapes. */
.maths-game-choice-shape-v229 {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #7cc6f5;
  box-shadow: 0 .35rem .8rem rgba(23, 63, 104, .22);
}
.maths-game-choice-label-v229 {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  font-weight: 800;
  color: #0b2d4d;
  /* The number sits on top of a coloured shape, so it needs an outline to stay
     readable whichever colour the shape is. */
  text-shadow: 0 0 .35rem #fff, 0 0 .7rem #fff;
  pointer-events: none;
}

/* The shapes. clip-path rather than images, so they scale to any size and add
   nothing to download. */
.maths-shape-circle   { border-radius: 50%; background: #7cc6f5; }
.maths-shape-square   { border-radius: 1rem; background: #9be59b; }
.maths-shape-triangle { clip-path: polygon(50% 4%, 96% 96%, 4% 96%); background: #ffd166; }
.maths-shape-hexagon  { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: #f7a4c8; }
.maths-shape-star     { clip-path: polygon(50% 2%, 61% 36%, 98% 36%, 68% 58%, 79% 94%, 50% 72%, 21% 94%, 32% 58%, 2% 36%, 39% 36%); background: #c4b5fd; }
.maths-shape-heart    { clip-path: polygon(50% 96%, 6% 47%, 6% 24%, 27% 8%, 50% 26%, 73% 8%, 94% 24%, 94% 47%); background: #fca5a5; }

.maths-game-choice-v229.is-correct-v229 .maths-game-choice-shape-v229 {
  animation: maths-correct-v229 .7s ease-out;
}
.maths-game-choice-v229.is-wrong-v229 .maths-game-choice-shape-v229 {
  animation: maths-wrong-v229 .5s ease-in-out;
}
@keyframes maths-correct-v229 {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); filter: brightness(1.25); }
  100% { transform: scale(1); }
}
@keyframes maths-wrong-v229 {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  50% { transform: translateX(9px); }
  80% { transform: translateX(-5px); }
}

.maths-game-finish-v229 h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); color: #0f3d6b; }
.maths-game-actions-v229 { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* --- The effects ------------------------------------------------------- */

.maths-balloon-v229,
.maths-confetti-v229,
.maths-float-v229,
.maths-flyby-v229 { position: absolute; pointer-events: none; }

.maths-balloon-v229 {
  bottom: -14vh;
  width: 3.2rem;
  height: 4rem;
  border-radius: 50% 50% 46% 46%;
  background: var(--balloon-colour, #ef4444);
  z-index: 5;
  animation: maths-balloon-v229 3.2s ease-in forwards;
}
/* The string. A pseudo-element rather than a second span, because seven
   balloons should not be fourteen nodes. */
.maths-balloon-v229::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 2.2rem;
  background: rgba(30, 41, 59, .35);
}
@keyframes maths-balloon-v229 {
  0% { transform: translate(0, 0) rotate(-4deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--balloon-drift, 0), -118vh) rotate(6deg); opacity: 0; }
}

.maths-confetti-v229 {
  top: -4vh;
  width: .55rem;
  height: .9rem;
  border-radius: .1rem;
  z-index: 6;
  animation: maths-confetti-v229 2.4s cubic-bezier(.3, .6, .5, 1) forwards;
}
@keyframes maths-confetti-v229 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate(var(--confetti-drift, 0), 108vh) rotate(var(--confetti-spin, 360deg)); opacity: .9; }
}

.maths-float-v229 {
  z-index: 7;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: maths-float-v229 .9s ease-out forwards;
}
@keyframes maths-float-v229 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--float-x, 0)), calc(-50% + var(--float-y, -60px))) scale(1.1); }
}

.maths-flyby-v229 {
  left: -12vw;
  z-index: 4;
  font-size: clamp(2rem, 6vw, 3.4rem);
  animation: maths-flyby-v229 3s linear forwards;
}
.maths-flyby-v229.from-right {
  left: auto;
  right: -12vw;
  animation-name: maths-flyby-right-v229;
}
@keyframes maths-flyby-v229 {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(56vw) translateY(-2.2rem); }
  100% { transform: translateX(124vw) translateY(0); }
}
@keyframes maths-flyby-right-v229 {
  0% { transform: translateX(0) translateY(0) scaleX(-1); }
  50% { transform: translateX(-56vw) translateY(-2.2rem) scaleX(-1); }
  100% { transform: translateX(-124vw) translateY(0) scaleX(-1); }
}

/* A child who is sensitive to motion should still be able to play. The game
   itself is unchanged; only the decoration stops moving. */
@media (prefers-reduced-motion: reduce) {
  .maths-balloon-v229,
  .maths-confetti-v229,
  .maths-float-v229,
  .maths-flyby-v229 { display: none; }
  .maths-game-choice-v229.is-correct-v229 .maths-game-choice-shape-v229,
  .maths-game-choice-v229.is-wrong-v229 .maths-game-choice-shape-v229 { animation: none; }
  .maths-game-choice-v229.is-correct-v229 .maths-game-choice-shape-v229 { filter: brightness(1.25); }
}

/* --- The launch buttons on the public maths homework card --------------- */
.public-maths-games-v229 { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.public-maths-games-v229 > p { flex: 1 1 100%; margin: 0 0 .2rem; }

/* The panel and the effects are siblings, not parent and child: the game
   rewrites the panel on every question, and a celebration appended inside it
   would be deleted by the next render -- which is exactly what the finish
   screen's balloons did before this existed. */
.maths-game-host-v229 { position: relative; z-index: 2; display: contents; }
.maths-game-effect-layer-v229 {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}