/* Play activities (plan §6.1): A3 Buchstaben-Jagd (mockup 05) and A6 Memory (mockup 08). Each is a fixed 1180 × 820
   scene scaled to fit, sized in container units (1cqw = 11.8 mockup px) so bubbles and cards keep the mockup's
   proportions on every iPad. Motion is slow and calm; reduced motion stops it (base.css). */
.hunt-stage, .memory-stage { position: relative; width: min(100%, calc((100vh - 15 * var(--u)) * 1180 / 820));
  aspect-ratio: 1180 / 820; container-type: inline-size; }
.hunt-stage .bg-art, .memory-stage .bg-art { object-fit: contain; border-radius: 28px; }

/* ---- A3: the sign (target in both cases, all round) and the bubbles (≈ 204 px, letters at 60 %) ---- */
.hunt-sign { position: absolute; left: 12.7cqw; top: 2.5cqw; z-index: 6; padding: .5cqw 1.9cqw; border-radius: 22px;
  background: var(--paper); box-shadow: var(--shadow-lift); font: 700 5.4cqw/1.1 var(--font-read); color: var(--ink); }
.bub { position: absolute; z-index: 8; width: 17.3cqw; aspect-ratio: 1; margin: -8.65cqw 0 0 -8.65cqw; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  animation: float var(--t, 11s) ease-in-out infinite alternate; }
.bub .in { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; padding-bottom: .9cqw;
  font: 700 10.4cqw/1 var(--font-read); color: var(--ink);
  background:
    radial-gradient(circle at 29% 25%, color-mix(in srgb, var(--white) 96%, transparent) 0 5%, transparent 9%),
    radial-gradient(circle, color-mix(in srgb, var(--white) 76%, transparent) 0 55%, color-mix(in srgb, var(--sky-light) 72%, transparent) 73%,
      color-mix(in srgb, var(--lavender) 62%, transparent) 85%, color-mix(in srgb, var(--rose) 45%, transparent) 93%,
      color-mix(in srgb, var(--white) 85%, transparent) 98.5%, transparent 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--white) 80%, transparent),
    inset -12px -14px 26px color-mix(in srgb, var(--sky) 40%, transparent), 0 20px 30px -22px rgba(var(--shade-rgb), .5);
  transition: box-shadow .2s; }
.bub .in::after { content: ""; position: absolute; right: 15%; bottom: 11%; width: 32%; height: 32%; border-radius: 50%;
  border: 5px solid transparent; border-bottom-color: color-mix(in srgb, var(--white) 85%, transparent);
  border-right-color: color-mix(in srgb, var(--white) 85%, transparent); opacity: .75; }
.bub.popped { pointer-events: none; }
.bub.popped .in { animation: pop .42s ease-out forwards; }
.bub.gone { pointer-events: none; transition: opacity 1.2s, translate 1.2s; opacity: 0; translate: 0 -12cqw; }
.bub.nope .in { animation: nudge .6s ease-in-out;
  box-shadow: 0 0 0 6px var(--amber), inset -12px -14px 26px color-mix(in srgb, var(--sky) 40%, transparent); }
.bub.shimmer .in { animation: shimmer 1.6s ease-in-out infinite; }
.bub.glow { animation-duration: calc(var(--t, 11s) * 3); }
.bub.glow .in { box-shadow: 0 0 0 10px var(--glow), 0 0 40px 12px color-mix(in srgb, var(--sun) 50%, transparent); }
.burst { position: absolute; z-index: 9; width: 18.6cqw; margin: -9.3cqw 0 0 -9.3cqw; pointer-events: none;
  animation: pop-in .25s ease-out both; }
@keyframes float { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
@keyframes pop { 40% { transform: scale(1.16); opacity: 1; } 100% { transform: scale(1.34); opacity: 0; } }
@keyframes nudge { 20% { transform: translateX(-9px) rotate(-5deg); } 45% { transform: translateX(8px) rotate(4deg); }
  70% { transform: translateX(-4px) rotate(-2deg); } 100% { transform: none; } }
@keyframes shimmer { 50% { box-shadow: 0 0 0 8px var(--glow), inset -12px -14px 26px color-mix(in srgb, var(--sky) 40%, transparent); } }

/* ---- A6: blanket, basket and the cards (172 × 178 px, letters 124 px at four columns) ---- */
.memory-stage .blanket { position: absolute; left: 11.5cqw; top: 9.3cqw; width: 77cqw; height: 58.5cqw; z-index: 2;
  transform: rotate(-1.2deg); border-radius: 34px 44px 30px 46px / 44px 32px 46px 30px; box-shadow: var(--shadow-float);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--sun) 34%, transparent) 0 3.9cqw, transparent 3.9cqw 7.8cqw),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--sun) 34%, transparent) 0 3.9cqw, transparent 3.9cqw 7.8cqw),
    var(--white); }
.memory-stage .blanket::before { content: ""; position: absolute; inset: 16px; border-radius: inherit;
  border: 3px dashed color-mix(in srgb, var(--sun-deep) 55%, transparent); }
.memory-stage .basket { position: absolute; left: 88.6cqw; top: 54.2cqw; width: 10.5cqw; z-index: 3; }
.memory-grid { position: absolute; left: 50%; top: 38.6cqw; z-index: 6; transform: translate(-50%, -50%); display: grid;
  grid-template-columns: repeat(var(--cols), 14.6cqw); grid-auto-rows: 15.1cqw; gap: 2.2cqw 2.4cqw; }
.mc { position: relative; width: 14.6cqw; height: 15.1cqw; padding: 0; border: 0; cursor: pointer; display: grid;
  place-items: center; border-radius: 26px 20px 28px 22px / 22px 28px 20px 26px; box-shadow: var(--shadow-lift);
  transform: rotate(var(--r, 0deg)); transition: transform .3s, box-shadow .3s; }
.mc::before { content: ""; position: absolute; inset: 9px; border-radius: inherit; pointer-events: none; }
.mc .f { font: 700 10.5cqw/1 var(--font-read); color: var(--ink); padding-bottom: .8cqw; }
.mc .paw { width: 58%; height: 58%; }
.mc .tick { position: absolute; top: -1.4cqw; right: -1.2cqw; width: 4.6cqw; height: 4.6cqw; border-radius: var(--r-blob);
  display: none; place-items: center; box-shadow: var(--shadow-lift);
  background: radial-gradient(circle at 34% 28%, var(--meadow-light), var(--meadow) 45%, var(--meadow-deep)); }
.mc .tick img { width: 60%; }
.mc.back { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--white) 22%, transparent), transparent 58%),
  repeating-linear-gradient(135deg, transparent 0 15px, color-mix(in srgb, var(--sun) 16%, transparent) 15px 21px), var(--petrol); }
.mc.back::before { border: 3px solid color-mix(in srgb, var(--sun-light) 70%, transparent); }
.mc.back .f { display: none; }
.mc.face { background: linear-gradient(170deg, var(--white), var(--card) 60%, var(--paper)); }
.mc.face::before { border: 2px solid rgba(var(--shade-rgb), .07); }
.mc.face .paw { display: none; }
.mc.open { transform: translateY(-10px) rotate(1.8deg) scale(1.04); box-shadow: var(--shadow-float); }
/* a found pair wears its own colour, so the two forms of one Laut stay linked while they lie open (second play session) */
.mc { --pair: var(--sun); }
.mc[data-pair="1"] { --pair: var(--meadow); } .mc[data-pair="2"] { --pair: var(--sky); } .mc[data-pair="3"] { --pair: var(--lavender); }
.mc[data-pair="4"] { --pair: var(--rose); } .mc[data-pair="5"] { --pair: var(--petrol); }
.mc.match { background: linear-gradient(170deg, var(--white), color-mix(in srgb, var(--pair) 34%, var(--white)) 72%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--pair) 75%, var(--white)),
  0 0 46px 10px color-mix(in srgb, var(--pair) 40%, transparent), var(--shadow-lift); cursor: default; }
.mc.match .tick { display: grid; }
.mc.flip { animation: flip .36s ease-in-out; }
.mc.wiggle { animation: wobble .9s ease-in-out; }
@keyframes flip { 50% { transform: scaleX(0) rotate(var(--r, 0deg)); } }

/* letter groups (ei, au, sch …) shrink to fit the same bubble or card */
.bub[data-len="2"] .in { font-size: 7.6cqw; } .bub[data-len="3"] .in { font-size: 5.8cqw; }
.mc[data-len="2"] .f { font-size: 7.4cqw; } .mc[data-len="3"] .f { font-size: 5.6cqw; }