/* ---------------------------------------------------------------- the games (js/games.js): 🎈 balloons, 🃏 memory, 🏁 race
   The balloon and memory look comes from the ABC game (style.css: .balloons, .balloon-area, .memory, .mcard …). */

/* a question picture in a box of fixed size – js shrinks it (never enlarges it) until it fits */
.g-fit { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.g-fit-in {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform-origin: 50% 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px;
}
.g-fit-in.g-natural { width: max-content; }
.g-qmark { font-size: min(12vmin, 90px); font-weight: 700; color: #d97706; }
/* the ؟ of a short form turns into the answer (.m-n: not the memory answer cards, which are .g-ans too) */
.m-n.g-ans {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.05em; padding: 0 .14em; border-radius: .26em;
  background: #dcfce7; color: #15803d; box-shadow: inset 0 0 0 .06em #86efac; animation: bounceIn .45s ease-out;
}
/* a solved question gets a green tick */
.g-fit.g-solved::after {
  content: '✓'; position: absolute; top: 10px; inset-inline-end: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font-size: 25px; font-weight: 700; box-shadow: 0 4px 0 #15803d;
  animation: bounceIn .45s ease-out;
}

/* ---------------------------------------------------------------- 🎈 balloons */
.g-balloons { gap: 8px; min-height: 0; }
.g-head { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
.g-bq {
  flex: 0 1 940px; height: min(36vh, 300px);
  background: rgba(255, 255, 255, .86); border-radius: 30px; box-shadow: var(--shadow); animation: popIn .35s ease-out;
}
.g-bq.g-short { height: min(19vh, 150px); --m-eq: min(12vmin, 96px); }
.g-dots { flex: none; }
.g-dots .round-dots { margin-top: 0; }
.g-area { flex: 1; min-height: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .4)); }

.g-balloon {
  position: absolute; top: 100%; left: 0;
  width: min(19vmin, 150px); aspect-ratio: .82; padding: 0;
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--cc, var(--c0)) 35%, #fff), var(--cc, var(--c0)) 65%);
  box-shadow: inset -10px -14px 0 rgba(0, 0, 0, .08);
  display: grid; place-items: center; color: #fff; font-size: min(9vmin, 70px); line-height: 1.1;
  animation: g-rise var(--dur, 9s) linear var(--delay, 0s) infinite, g-sway var(--sway, 2.8s) ease-in-out var(--sdelay, 0s) infinite alternate;
  touch-action: none; transition: opacity .35s, scale .35s, filter .25s;
}
/* the string and the knot */
.g-balloon::after { content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: 70px; background: rgba(43, 35, 80, .35); pointer-events: none; }
.g-balloon::before { content: ''; position: absolute; top: calc(100% - 4px); left: calc(50% - 8px); border: 8px solid transparent; border-bottom-color: var(--cc, var(--c0)); pointer-events: none; }
.g-bl { display: block; max-width: 84%; text-align: center; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); overflow-wrap: anywhere; }
.g-balloon.long { font-size: min(5vmin, 40px); }
.g-balloon.g-wide { width: min(27vmin, 210px); aspect-ratio: .95; }
.g-balloon .ku { font-family: 'Naskh', serif; font-weight: 700; line-height: 1.4; }
.g-balloon .m-eq { font-size: .62em; color: #fff; }
.g-balloon .m-op, .g-balloon .m-frac { color: #fff; }
/* a picture choice sits on a white disc */
.g-balloon.g-pic .g-bl {
  width: 84%; aspect-ratio: 1; display: grid; place-items: center; padding: 11%;
  border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); text-shadow: none;
}
.g-balloon.g-pic svg { width: 100%; height: auto; max-width: 100%; max-height: 100%; }
.g-balloon.g-pic .solid-pick > svg { width: 100%; max-height: none; }
.g-balloon.g-pic .solid-pick .ku { font-size: min(2.4vmin, 15px); line-height: 1.3; }
/* wrong: it stops, shakes and flies off – right: it pops where it is – the others float away */
.g-balloon.g-wob { animation-play-state: paused; filter: brightness(.9); }
.g-balloon.g-wob .g-bl { animation: shake .4s; }
.g-balloon.g-out { animation-play-state: paused; opacity: 0; scale: .25; filter: grayscale(1); pointer-events: none; transition: opacity .5s .1s, scale .6s, filter .2s; }
.g-balloon.g-pop { animation-play-state: paused; opacity: 0; scale: 1.6; pointer-events: none; transition: opacity .25s, scale .25s ease-out; }
.g-balloon.g-away { opacity: 0; pointer-events: none; transition: opacity .6s; }
/* --rise = the height of the balloon area (set by js): a balloon and its string leave at the top */
@keyframes g-rise { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--rise, 100vh) - 100% - 90px)); } }
@keyframes g-sway { from { rotate: -4deg; } to { rotate: 4deg; } }

/* ---------------------------------------------------------------- 🃏 memory */
.g-memory { min-height: 0; }
.g-memory > .g-top { flex: none; min-height: 0; gap: 18px; }
.g-pairs { display: flex; gap: 6px; font-size: min(6vmin, 42px); line-height: 1; }
.g-pairs span { color: #fff; opacity: .75; text-shadow: 0 3px 0 rgba(43, 35, 80, .15); }
.g-pairs span.on { color: #fbbf24; opacity: 1; text-shadow: 0 4px 0 #d97706; animation: starPop .5s ease-out; }
.g-board { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
/* js sets --cols, --cw, --ch (card width / height) and --gap from the room there is */
.g-memory .memory-grid { grid-template-columns: repeat(var(--cols, 4), var(--cw, 150px)); grid-auto-rows: var(--ch, 115px); gap: var(--gap, 14px); }
.g-memory .mcard {
  width: var(--cw, 150px); height: var(--ch, 115px); aspect-ratio: auto; padding: 0;
  animation: popIn .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.g-memory .mcard.matched { animation: g-match .5s ease-out; }
.g-memory .mcard-back { font-size: calc(var(--ch, 115px) * .36); }
/* question cards: purple with ؟ – answer cards: orange with ⭐ */
.g-memory .g-ask .mcard-back { font-family: 'Naskh', serif; font-weight: 700; text-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.g-memory .g-ans .mcard-back { background: linear-gradient(135deg, var(--orange), var(--yellow)); box-shadow: 0 7px 0 #c2410c; font-size: calc(var(--ch, 115px) * .3); }
.g-memory .mcard-front { padding: 0; font-size: calc(var(--ch, 115px) * .3); color: var(--ink); }
.g-memory .g-ans .mcard-front { background: #fffbeb; box-shadow: 0 7px 0 #fde68a; }
.g-memory .mcard.matched .mcard-front { background: #dcfce7; box-shadow: 0 7px 0 #86efac; }
.g-memory .g-face { position: absolute; inset: 7px; }
.g-memory .g-fit-in { padding: 4px 6px; gap: 6px; }
/* a picture fills its card */
.g-memory .g-svg { display: grid; place-items: center; inset: 9%; }
.g-memory .g-svg > svg { width: 100%; height: 100%; max-width: none; max-height: none; }
/* sums and answers written big */
.g-memory .g-face .m-eq { font-size: calc(var(--ch, 115px) * .27); }
.g-memory .g-big { font-size: calc(var(--ch, 115px) * .44); font-weight: 700; line-height: 1.1; color: var(--purple); }
.g-memory .g-face .sym { font-size: calc(var(--ch, 115px) * .44); color: var(--purple); }
.g-memory .g-face .emo { font-size: calc(var(--ch, 115px) * .46); }
.g-memory .g-face .m-frac { font-size: calc(var(--ch, 115px) * .32); }
.g-memory .g-face:not(.g-full) .ku { font-size: calc(var(--ch, 115px) * .19); line-height: 1.45; text-align: center; }
.g-memory .g-face:not(.g-full) .q-text { font-size: calc(var(--ch, 115px) * .17); background: none; padding: 0; color: var(--ink); }
.g-memory .g-face .solid-pick > svg { width: calc(var(--ch, 115px) * .6); max-height: none; }
.g-memory .g-face .q-pic.small { font-size: calc(var(--ch, 115px) * .34); }
.g-memory .g-face .frac-set.small .fs-item { font-size: calc(var(--ch, 115px) * .24); }
@keyframes g-match { 40% { scale: 1.08; } }

/* ---------------------------------------------------------------- 🏁 race */
.g-race { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
/* the road: grass, asphalt with a dashed line, the finish on the left (the start is on the right) */
.g-road {
  --fw: max(46px, 6%);
  position: relative; flex: none; height: min(19vh, 150px); direction: ltr; overflow: hidden;
  border-radius: 28px; box-shadow: var(--shadow);
  background: linear-gradient(180deg, #4ade80 0 8%, #94a3b8 8% 9.5%, #64748b 9.5% 90.5%, #94a3b8 90.5% 92%, #4ade80 92%);
}
.g-road::before {
  content: ''; position: absolute; left: var(--fw); right: 0; top: calc(50% - 3px); height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 30px, transparent 30px 56px);
}
.g-finish { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fw); display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); }
.g-finish::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 14px; background: repeating-conic-gradient(#2b2350 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.g-finish span { position: relative; z-index: 1; margin-right: 12px; font-size: min(6.5vmin, 46px); line-height: 1; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.g-road.g-done .g-finish span { animation: wiggle .5s ease-in-out 4; }
.g-track { --w: min(10vmin, 78px); position: absolute; top: 0; bottom: 0; left: var(--fw); right: 10px; }
.g-lane { position: absolute; left: 0; right: 0; }
.g-up { top: 9%; height: 41%; }
.g-down { bottom: 9%; height: 41%; }
/* --p: how far it is (0 = start on the right, 1 = at the finish line) */
.g-runner {
  position: absolute; top: 0; bottom: 0; width: var(--w); right: calc(var(--p, 0) * (100% - var(--w)));
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.g-emo { display: inline-block; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.g-car { z-index: 2; font-size: min(8.5vmin, 64px); transition: right .9s cubic-bezier(.34, 1.25, .5, 1); }
.g-turtle { font-size: min(6.5vmin, 48px); transition: right 1.6s ease-in-out; }
.g-turtle.g-nap::after { content: '💤'; position: absolute; top: -12%; left: 58%; font-size: .5em; animation: float 1.8s ease-in-out infinite; }
.g-car.g-go .g-emo { animation: g-bob .22s ease-in-out 4 alternate; }
.g-car.g-go::after { content: '💨'; position: absolute; left: 80%; top: 28%; font-size: .5em; pointer-events: none; animation: g-puff .8s ease-out forwards; }
.g-car.g-won { right: calc(100% - var(--w) * .55); transition: right .7s ease-in; }
.g-car.g-won .g-emo { animation: jump .6s ease-out 3; }
.g-mark {
  position: absolute; bottom: 4%; width: 10px; height: 10px; margin-right: -5px; border-radius: 50%;
  right: calc(var(--p, 0) * (100% - var(--w)) + var(--w) / 2); background: rgba(255, 255, 255, .5); transition: background .3s, box-shadow .3s;
}
.g-mark.on { background: var(--yellow); box-shadow: 0 0 0 3px rgba(250, 204, 21, .35); }
/* ٣ ٢ ١ before the start */
.g-count {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  font-size: min(12vmin, 96px); font-weight: 700; line-height: 1; color: #fff;
  text-shadow: 0 5px 0 rgba(0, 0, 0, .3), 0 0 18px rgba(0, 0, 0, .25);
}
.g-count:empty { display: none; }
@keyframes g-bob { to { transform: translateY(-9%) rotate(-3deg); } }
@keyframes g-puff { from { opacity: .95; transform: translateX(0) scale(.5); } to { opacity: 0; transform: translateX(70%) scale(1.15); } }

/* the question and its choices under the road */
.g-race-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.g-qrow { flex: 1 1 0; min-height: 80px; max-height: min(38vh, 300px); width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; }
.g-qrow.g-slim { max-height: min(22vh, 170px); }
.g-rq {
  flex: 0 1 940px; align-self: stretch;
  background: rgba(255, 255, 255, .86); border-radius: 30px; box-shadow: var(--shadow); animation: popIn .35s ease-out;
}
.g-rq.g-short { --m-eq: min(12vmin, 96px); }
.g-choices { flex: none; }
.g-race .choices { gap: 3vw; }
.g-race .choice { animation-delay: calc(var(--i, 0) * .2s); }
.g-race .choice:disabled { opacity: 1; }
.g-race .choice.wrong { opacity: .35; filter: grayscale(1); animation: shake .45s ease-in-out; }
.g-race .choice.g-dim { opacity: .4; animation: none; }
.g-race .choice.right { animation: bounceIn .5s ease-out; background: radial-gradient(circle at 30% 25%, #bbf7d0, #22c55e 60%); color: #fff; box-shadow: 0 9px 0 #15803d, 0 0 0 6px #fff; }
.g-race .choice.pic.right, .g-race .choice.wide.pic.right { background: #dcfce7; color: var(--ink); }
/* sums and fractions on a coloured button are written in white */
.g-race .choice:not(.pic) :is(.m-eq, .m-op, .m-frac) { color: inherit; }

/* ---------------------------------------------------------------- phones held upright */
@media (max-width: 600px) {
  .g-head { gap: 10px; }
  .g-bq { height: min(31vh, 250px); border-radius: 24px; }
  .g-bq.g-short { height: min(17vh, 140px); --m-eq: 12.5vw; }
  .g-balloon { width: min(23vw, 100px); font-size: min(11vw, 48px); }
  .g-balloon.long { font-size: min(6vw, 26px); }
  .g-balloon.g-wide { width: min(31vw, 132px); }
  .g-balloon.g-pic .solid-pick .ku { font-size: 11px; }
  .g-fit.g-solved::after { top: 6px; inset-inline-end: 8px; width: 30px; height: 30px; font-size: 19px; }

  .g-pairs { font-size: 28px; }
  .g-memory .mcard-back, .g-memory .mcard-front { border-radius: 18px; }

  .g-road { height: min(14vh, 112px); border-radius: 22px; }
  .g-road::before { height: 4px; top: calc(50% - 2px); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 20px, transparent 20px 38px); }
  .g-finish::after { width: 10px; background-size: 10px 10px; }
  .g-finish span { margin-right: 8px; font-size: 28px; }
  .g-track { --w: min(12vw, 52px); right: 6px; }
  .g-car { font-size: min(10.5vw, 44px); }
  .g-turtle { font-size: min(8vw, 34px); }
  .g-mark { width: 8px; height: 8px; margin-right: -4px; }
  .g-race-body { gap: 10px; }
  .g-qrow { max-height: min(36vh, 290px); gap: 8px; }
  .g-qrow.g-slim { max-height: min(19vh, 150px); }
  .g-rq { border-radius: 24px; }
  .g-rq.g-short { --m-eq: 12.5vw; }
  .g-race .choices { gap: 12px; }
}
/* low landscape windows */
@media (max-height: 560px) {
  .g-bq { height: min(34vh, 190px); }
  .g-bq.g-short { height: min(20vh, 110px); }
  .g-road { height: min(18vh, 96px); }
  .g-qrow { max-height: min(34vh, 200px); }
  .g-qrow.g-slim { max-height: min(20vh, 110px); }
}

/* less motion: the balloons still rise (slower, without swaying) – the game needs it */
@media (prefers-reduced-motion: reduce) {
  .g-balloon { animation: g-rise calc(var(--dur, 9s) * 1.3) linear calc(var(--delay, 0s) * 1.3) infinite !important; }
}