/* =============================================
   toddler-games.css — the toddler mini-games (js/toddler-games.js)
   Split out of toddler.css (2026-11-09) so /sample can load the games
   without toddler mode's page styles. toddler.html loads both.
   The custom properties are scoped to the overlay, so this file works on a
   page that does not define them (the sample game's navy theme).
   ============================================= */
.tg-overlay, .tg-fly {
  --navy: #15254d;
  --gold: #f5b301;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.tg-overlay * { box-sizing: border-box; }
.tg-overlay button { font: inherit; cursor: pointer; }

/* ── toddler mini-games (toddler-games.js) ── */
.tg-overlay {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: linear-gradient(180deg, #bfe3ff, #fff3d1);
  padding: calc(14px + var(--safe-t)) 14px calc(84px + var(--safe-b));
  display: flex; flex-direction: column;
}
.tg-title { text-align: center; font-size: clamp(24px, 6vw, 38px); font-weight: 900; color: var(--navy); }
.tg-stage { position: relative; flex: 1; }
.tg-exit {
  position: fixed; z-index: 120; left: calc(14px + var(--safe-l)); bottom: calc(14px + var(--safe-b));
  border: 0; border-radius: 999px; padding: 12px 20px; font-size: 18px; font-weight: 800;
  background: #fff; color: var(--navy); box-shadow: 0 4px 14px rgba(21, 37, 77, .22);
}
.tg-counter { position: fixed; z-index: 120; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + var(--safe-b)); background: var(--gold); color: var(--navy); font-weight: 900; font-size: 24px; border-radius: 999px; padding: 8px 18px; }
.tg-finish { position: absolute; inset: 0; z-index: 110; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgba(255, 255, 255, .7); }
.tg-finish-big { font-size: 90px; font-weight: 900; color: var(--navy); }

.tg-balloon {
  position: absolute; bottom: -180px; width: 110px; height: 140px; border: 0; padding: 0;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75), transparent 22%), var(--c);
  box-shadow: inset -10px -14px 0 rgba(0, 0, 0, .12);
  animation: tgRise linear forwards; display: grid; place-items: center;
}
.tg-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 60px; background: rgba(21, 37, 77, .4); }
.tg-balloon img { width: 64px; height: 64px; pointer-events: none; }
.tg-balloon.popped { animation: tgPop .25s ease forwards; }
@keyframes tgRise { to { translate: 0 calc(-100vh - 260px); } }

/* Balloon Pop's goal: the three pictures to find, each with its count. */
.tg-goal { display: flex; justify-content: center; gap: 10px; margin-top: 8px; position: relative; z-index: 105; pointer-events: none; }
.tg-goal-item {
  display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px;
  padding: 4px 14px 4px 6px; box-shadow: 0 3px 10px rgba(21, 37, 77, .15);
  font-size: 22px; font-weight: 900; color: var(--navy);
}
.tg-goal-item img { width: 46px; height: 46px; object-fit: contain; }
.tg-goal-item.done { background: #dcfce7; color: #15803d; }
.tg-goal-item.done b::after { content: ' ✓'; }
.tg-goal-item.bump { animation: tgBump .35s ease; }
@keyframes tgBump { 50% { scale: 1.18; } }
.tg-clock.low { background: #ef4444; color: #fff; }
.tg-balloon .tg-letter { font-size: 56px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, .25); pointer-events: none; }
/* A wrong balloon's mini fireworks (missBurst in toddler-games.js). Every
   piece is centred on the pop and flies out along its own angle --a. */
.tg-fx { position: absolute; z-index: 106; width: 0; height: 0; pointer-events: none; }
.tg-fx i, .tg-fx b { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.tg-fx-flash {
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(253, 224, 71, .6) 35%, transparent 70%);
  animation: tgFxFlash .45s ease-out forwards;
}
.tg-fx-ring {
  width: 40px; height: 40px; border-radius: 50%; border: 5px solid #fbbf24;
  animation: tgFxRing .6s ease-out forwards;
}
.tg-fx-spark {
  width: 22px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--c) 40%, #fff);
  box-shadow: 0 0 10px var(--c);
  animation: tgFxSpark .9s cubic-bezier(.15, .7, .3, 1) forwards;
}
.tg-fx-star {
  font-style: normal; font-size: 28px; color: #fde047; text-shadow: 0 0 6px #f59e0b;
  opacity: 0; animation: tgFxStar .6s ease-out forwards;
}
/* The X is drawn, not typed: a ✖ character comes out as an emoji on some
   phones and ignores the colour. Two fat red bars, white edged, glowing. */
.tg-fx-x { width: 92px; height: 92px; animation: tgFxX 1.1s ease forwards; }
.tg-fx-x::before, .tg-fx-x::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 92px; height: 22px; border-radius: 999px;
  background: linear-gradient(180deg, #f87171, #dc2626 55%, #b91c1c);
  border: 4px solid #fff; box-shadow: 0 0 16px rgba(239, 68, 68, .9), 0 4px 0 rgba(127, 29, 29, .5);
  translate: -50% -50%;
}
.tg-fx-x::before { rotate: 45deg; }
.tg-fx-x::after { rotate: -45deg; }
@keyframes tgFxFlash { 0% { scale: .2; opacity: 1; } 100% { scale: 1.3; opacity: 0; } }
@keyframes tgFxRing { 0% { scale: .3; opacity: 1; } 100% { scale: 4.2; opacity: 0; border-width: 1px; } }
@keyframes tgFxSpark {
  0% { transform: rotate(var(--a)) translateX(0) scale(1.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) translateY(18px) scale(.3); opacity: 0; }
}
@keyframes tgFxStar {
  0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(1.2) rotate(180deg); opacity: 0; }
}
@keyframes tgFxX {
  0% { scale: 0; rotate: -30deg; opacity: 1; }
  25% { scale: 1.35; rotate: 10deg; }
  40% { scale: .95; rotate: -6deg; }
  55% { scale: 1.05; rotate: 0deg; }
  80% { scale: 1; opacity: 1; }
  100% { scale: .8; opacity: 0; }
}
/* Under Done, small and orange: there to be noticed, not to sting. */
.tg-finish-oops { font-size: clamp(15px, 3.6vw, 18px); font-weight: 800; color: #ea580c; margin-top: -8px; }
.tg-finish-oops.clean { color: #15803d; }

/* A right balloon (hitBurst): gold and green stars, a gold ring, a big tick. */
.tg-fx-ring.good { border-color: #22c55e; }
.tg-fx-star.good { color: var(--c); font-size: 30px; text-shadow: 0 0 8px rgba(250, 204, 21, .9); }
.tg-fx-tick { width: 80px; height: 80px; animation: tgFxX 1.05s ease forwards; }
.tg-fx-tick::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 26px; height: 50px;
  border: solid #16a34a; border-width: 0 14px 14px 0; border-radius: 4px;
  translate: -50% -50%; rotate: 45deg;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(34, 197, 94, .9));
}
/* The picture flying from the pop into its goal chip. */
.tg-fly { position: fixed; left: 0; top: 0; z-index: 130; width: 64px; height: 64px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.tg-finish-emoji { font-size: 90px; line-height: 1; }
.tg-finish-title { font-size: clamp(40px, 10vw, 64px); font-weight: 900; color: var(--navy); }
.tg-finish-sub { font-size: clamp(20px, 5vw, 28px); font-weight: 800; color: var(--navy); text-align: center; padding: 0 16px; }
@media (max-width: 420px) { .tg-goal-item { font-size: 18px; padding-right: 10px; } .tg-goal-item img { width: 36px; height: 36px; } }
@keyframes tgPop { to { scale: 1.6; opacity: 0; } }

/* 12 cards, 4 x 3. Three rows of 3:4 cards are as tall as the grid is wide,
   so the width is capped by the height too — it fits a phone held either way. */
.tg-pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(100%, 600px, calc(100dvh - 190px)); margin: 14px auto 0; }
/* A phone on its side: 6 x 2 instead, or the cards come out thumbnail-small. */
@media (orientation: landscape) and (max-height: 520px) {
  .tg-pairs { grid-template-columns: repeat(6, 1fr); width: min(100%, 640px, calc((100dvh - 170px) * 2.25)); }
}
.tg-card { position: relative; aspect-ratio: 3 / 4; border: 0; border-radius: 18px; background: var(--navy); box-shadow: 0 5px 0 #0b1633; padding: 8px; }
.tg-card .tg-back { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px, 8vw, 54px); color: var(--gold); }
.tg-card img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.tg-card.up { background: #fff; box-shadow: 0 6px 0 #c9d3e6; }
.tg-card.up .tg-back { display: none; }
.tg-card.up img { opacity: 1; }
.tg-card.match { outline: 5px solid var(--good); animation: tdBounce .6s ease; }

.tg-menorah { display: block; width: min(92vw, 620px); margin: 4vh auto 0; }
.tg-candle { cursor: pointer; }
.tg-flame { opacity: 0; transition: opacity .25s; }
.tg-candle.lit .tg-flame { opacity: 1; animation: tgFlicker .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tgFlicker { to { scale: 1.08 .94; } }

/* Match It: drag the picture onto the same picture */
.tg-match { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3vh 0 1vh; }
.tg-spots { display: flex; justify-content: center; gap: clamp(10px, 4vw, 34px); flex-wrap: wrap; }
.tg-spot { width: clamp(96px, 26vw, 170px); aspect-ratio: 1; border: 5px dashed #7c93c3; border-radius: 26px; background: rgba(255, 255, 255, .6); display: grid; place-items: center; padding: 10px; }
.tg-spot img { width: 100%; height: 100%; object-fit: contain; opacity: .45; pointer-events: none; }
.tg-spot.hot { border-color: var(--gold); background: #fff8dc; }
.tg-spot.done { border-style: solid; border-color: var(--good); background: #fff; animation: tdBounce .6s ease; }
.tg-spot.done img { opacity: 1; }
.tg-piece { width: clamp(110px, 30vw, 180px); aspect-ratio: 1; border-radius: 26px; background: #fff; box-shadow: 0 8px 22px rgba(21, 37, 77, .28); padding: 12px; touch-action: none; cursor: grab; animation: tdPulse 1.4s ease-in-out infinite; }
.tg-piece img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tg-piece.drag { animation: none; cursor: grabbing; box-shadow: 0 16px 34px rgba(21, 37, 77, .35); z-index: 5; position: relative; }
.tg-piece.back { transition: translate .3s ease; }

@media (min-width: 700px) {
  .td-cats { gap: 18px; }
}

/* ── the six tap games (2026-10-11) ── */
.tg-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; }
.tg-say { min-height: 1.3em; font-size: clamp(28px, 7vw, 52px); font-weight: 900; color: var(--navy); }

/* Blow the Shofar */
.tg-bigtap { border: 0; background: #fff; border-radius: 40px; padding: 24px; box-shadow: 0 10px 0 #c9d3e6, 0 14px 30px rgba(21, 37, 77, .2); cursor: pointer; }
.tg-shofar { width: min(60vw, 46vh, 380px); aspect-ratio: 1; animation: tdPulse 1.4s ease-in-out infinite; }
.tg-shofar img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tg-shofar.blowing { animation: tgBlow .18s ease-in-out infinite alternate; }
@keyframes tgBlow { from { rotate: -3deg; scale: 1.04; } to { rotate: 3deg; scale: 1.08; } }

/* Tzedakah Box */
.tg-coins { position: absolute; inset: 0 0 38% 0; }
.tg-coin { position: absolute; width: clamp(64px, 16vw, 110px); aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; transition: translate .45s ease-in, scale .45s ease-in, opacity .45s ease-in; }
.tg-coin img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.tg-coin.gone { scale: .35; opacity: 0; pointer-events: none; }
.tg-pushka { position: absolute; left: 50%; bottom: 2vh; translate: -50% 0; width: clamp(150px, 36vw, 240px); height: clamp(130px, 30vh, 220px); border-radius: 24px 24px 18px 18px; background: linear-gradient(180deg, #2563eb, #1e40af); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .18); display: grid; place-items: center; }
.tg-pushka::before { content: ''; position: absolute; top: 14px; left: 50%; translate: -50% 0; width: 46%; height: 12px; border-radius: 6px; background: #0b1633; }
.tg-pushka span { font-size: clamp(28px, 7vw, 44px); font-weight: 900; color: var(--gold); }
.tg-pushka.clink { animation: tdBounce .4s ease; }

/* Where Is It? */
.tg-cups { display: flex; gap: clamp(14px, 5vw, 46px); }
.tg-cupspot { position: relative; width: clamp(100px, 25vw, 180px); aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; }
.tg-cupspot > img { position: absolute; inset: 24% 18% 10%; width: 64%; height: 66%; object-fit: contain; pointer-events: none; }
.tg-cup { position: absolute; inset: 0; border-radius: 50% 50% 14px 14px / 60% 60% 14px 14px; background: linear-gradient(180deg, #f59e0b, #b45309); box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .15), 0 8px 14px rgba(21, 37, 77, .25); transition: translate .35s ease; pointer-events: none; }
.tg-cup::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px, 8vw, 54px); color: #fff8dc; }
.tg-cup.up { translate: 0 -78%; }
.tg-cupspot.yes > img { animation: tdBounce .6s ease; }

/* Find the Shadow */
.tg-piece.still { animation: none; touch-action: auto; cursor: default; }
.tg-shade { cursor: pointer; }
.tg-shade img { opacity: .9; filter: brightness(0); transition: filter .3s; }
.tg-shade.done img { filter: none; opacity: 1; }
.tg-shade.nope { animation: tdShake .4s ease; }

/* Count With Me */
.tg-bignum { font-size: clamp(90px, 22vw, 170px); font-weight: 900; line-height: 1; color: var(--navy); }
.tg-bignum.bump { animation: tdBounce .4s ease; }
.tg-countrow { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.5vw, 22px); max-width: 960px; }
.tg-countme { width: clamp(80px, 17vw, 150px); aspect-ratio: 1; border: 0; border-radius: 24px; background: rgba(255, 255, 255, .55); padding: 10px; cursor: pointer; }
.tg-countme img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: .35; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.tg-countme.on { background: #fff; outline: 5px solid var(--good); animation: tdBounce .4s ease; }
.tg-countme.on img { opacity: 1; filter: none; }

/* Bake a Challah */
.tg-bowl { position: relative; width: clamp(200px, 48vw, 340px); height: clamp(120px, 26vh, 200px); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #e0e7ff, #a5b4fc); box-shadow: inset 0 12px 0 rgba(255, 255, 255, .6), 0 10px 20px rgba(21, 37, 77, .2); display: flex; align-items: flex-end; justify-content: center; }
.tg-bowl-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding-bottom: 14%; font-size: clamp(30px, 7vw, 50px); }
.tg-drop { animation: tgDrop .5s ease-in; }
@keyframes tgDrop { from { translate: 0 -40vh; } }
.tg-bowl.mixing { animation: tgBlow .2s ease-in-out infinite alternate; }
.tg-baked { width: 120%; margin-bottom: 10%; animation: tdBounce .8s ease; }
.tg-step { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; border-radius: 30px; background: var(--gold); color: var(--navy); padding: 16px 40px; font-weight: 900; box-shadow: 0 8px 0 #a17c0c; cursor: pointer; animation: tdPulse 1.4s ease-in-out infinite; }
.tg-step-icon { font-size: clamp(54px, 12vw, 84px); line-height: 1; }
.tg-step-say { font-size: clamp(24px, 5vw, 34px); }
.tg-step[hidden] { display: none; }