/* Activity views (plan §6.1; mockups 03 Neuer Laut, 00 Hör genau / Lies und finde, 06 Laut-Rutsche). */

/* ---- A1 Neuer Laut: picture left, letter right ---- */
.a1 { display: grid; grid-template-columns: 1fr 1.35fr; gap: calc(5 * var(--u)); align-items: center; width: 100%;
  max-width: 1100px; }
.a1 .card { width: 100%; aspect-ratio: 1; --card-size: min(34 * var(--u), 340px); max-width: 340px; justify-self: end;
  cursor: default; }
.letter-label { border: 0; cursor: pointer; font-family: var(--font-read); font-weight: 700; color: var(--ink);
  font-size: min(24 * var(--u), 230px); line-height: 1; justify-self: start; padding: .1em .35em .15em; }
.letter-label .lo { margin-left: .12em; }
.letter-label .wave { display: block; height: 18px; margin: 6px 12% 0; border-radius: 9px;
  background: linear-gradient(90deg, transparent, var(--lake), transparent); opacity: .5; transform: scaleX(.6);
  transition: transform 300ms, opacity 300ms; }
.letter-label.sounding .wave { transform: scaleX(1); opacity: .9; }

/* ---- A2 / A5 choice ---- */
.choice { display: grid; justify-items: center; gap: calc(4.5 * var(--u)); width: 100%; }
.choice .ask { display: flex; align-items: center; gap: 24px; min-height: calc(18 * var(--u)); }
.choice .ask .big-speaker { width: calc(14 * var(--u)); min-width: var(--tap); aspect-ratio: 1; border: 0;
  border-radius: 50%; background: var(--lake); display: grid; place-items: center; box-shadow: var(--shadow-lift);
  cursor: pointer; }
.choice .ask .big-speaker img { width: 46%; }
.choice .ask .word { font-size: min(13 * var(--u), 132px); }
.choice .options { display: flex; gap: calc(4 * var(--u)); justify-content: center; }
.choice .card { width: min(28 * var(--u), 280px); aspect-ratio: 1; --card-size: min(28 * var(--u), 280px); }
.choice.two .card { width: min(32 * var(--u), 320px); --card-size: min(32 * var(--u), 320px); }

/* ---- A4 Laut-Rutsche: a fixed 1180 × 820 scene scaled to fit ---- */
.slide-stage { position: relative; width: min(100%, calc((100vh - 15 * var(--u)) * 1180 / 820)); aspect-ratio: 1180 / 820; }
.slide-stage .bg-art { object-fit: contain; border-radius: 28px; }
.block, .cushion { position: absolute; width: 13.6%; aspect-ratio: 1; display: grid; place-items: center;
  font: 700 calc(min(9 * var(--u), 96px)) var(--font-read); color: var(--ink); transform: translate(-50%, -50%); }
.block { border: 0; cursor: pointer; z-index: 6; background: var(--path); border-radius: 20px;
  box-shadow: 0 6px 0 var(--bark), var(--shadow-lift); left: 17.6%; top: 26.1%; }
.cushion { left: 88%; top: 16%; padding: 0; border: 0; background: var(--sun-light); border-radius: 40px; z-index: 5;
  box-shadow: 0 6px 0 var(--sun-deep); cursor: pointer;
  transition: left .45s var(--ease-pop), top .45s var(--ease-pop), transform .45s var(--ease-pop), opacity .3s; }
/* the vowels wait beside the sandpit, a little smaller and apart; the chosen one hops onto it (F44) */
.cushion:not(.landed) { transform: translate(-50%, -50%) scale(.86); } /* ≥ 88 px even in portrait */
.cushion.slot-0 { top: 17%; } .cushion.slot-1 { top: 41%; } .cushion.slot-2 { top: 65%; }
.cushion.landed { left: 71.4%; top: 71.8%; cursor: default; }
.cushion.aside { opacity: .25; }
.cushion[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.cushion.glow { box-shadow: 0 0 0 10px var(--glow), 0 6px 0 var(--sun-deep); animation: cushion-glow 1.6s ease-in-out infinite; }
@keyframes cushion-glow { 50% { box-shadow: 0 0 0 18px var(--glow), 0 6px 0 var(--sun-deep); } } /* no transform: it places the cushion */
.block.sliding { animation: slide-down var(--slide-ms, 1600ms) cubic-bezier(.5, 0, .7, 1) forwards; pointer-events: none; }
.block.arrived { left: 58.1%; top: 71.3%; }
@keyframes slide-down {
  0% { left: 17.6%; top: 26.1%; transform: translate(-50%, -50%) rotate(0); }
  30% { left: 41.4%; top: 38.7%; transform: translate(-50%, -50%) rotate(48deg); }
  62% { left: 49.6%; top: 54.8%; transform: translate(-50%, -50%) rotate(56deg); }
  100% { left: 58.1%; top: 71.3%; transform: translate(-50%, -50%) rotate(0); }
}
.syllable-label { position: absolute; right: 6%; top: 10%; border: 0; cursor: pointer; z-index: 7;
  font-size: min(15 * var(--u), 150px); animation: pop-in 520ms var(--ease-pop) both; }
.syllable-label .syl { color: var(--syl-blue); }
.cushion.joined, .block.joined { box-shadow: 0 0 0 10px var(--glow), 0 6px 0 var(--sun-deep); }

@media (orientation: portrait) {
  .a1 { grid-template-columns: 1fr; justify-items: center; gap: calc(4 * var(--u)); }
  .a1 .card { justify-self: center; width: min(40vw, 300px); }
  .letter-label { justify-self: center; font-size: min(26vw, 230px); }
  .choice .options { flex-wrap: wrap; }
  .choice .card, .choice.two .card { width: min(38vw, 300px); }
}

/* ---- A2 "Wo hörst du es?" (decisions F34): the word's picture, then a little train of three wagons, no text ---- */
.choice.where .where-scene { display: grid; justify-items: center; gap: calc(3 * var(--u)); }
.choice.where .where-pic { width: min(24 * var(--u), 240px); aspect-ratio: 1; --card-size: min(24 * var(--u), 240px); cursor: default; }
.train { display: flex; align-items: flex-end; gap: 14px; padding-bottom: 18px; border-bottom: 6px solid var(--bark); }
.wagon { position: relative; width: min(22 * var(--u), 220px); height: min(13 * var(--u), 130px); border: 0; cursor: pointer;
  border-radius: 18px 18px 10px 10px; background: var(--sun-light); box-shadow: inset 0 -10px 0 var(--sun), var(--shadow-lift); }
.wagon.engine { background: var(--fox-light); box-shadow: inset 0 -10px 0 var(--fox), var(--shadow-lift); }
.wagon.engine::before { content: ""; position: absolute; left: 18%; top: -34%; width: 16%; height: 36%; border-radius: 6px 6px 0 0;
  background: var(--fox-deep); }
.wagon .wheel { position: absolute; bottom: -20px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink);
  box-shadow: inset 0 0 0 9px var(--ink-soft); }
.wagon .wheel:first-child { left: 16%; } .wagon .wheel:last-child { right: 16%; }
.wagon.wobble { animation: wobble .6s ease-in-out; }
.wagon.correct { box-shadow: 0 0 0 10px var(--glow), inset 0 -10px 0 var(--sun); }
.wagon.disabled { opacity: .35; cursor: default; }
.wagon.glow { animation: glow 1.4s ease-in-out infinite; }

/* ---- A1 tracing (decisions F31): the dotted small letter on the same label, mockup 03's place and size ---- */
.trace-pad { position: relative; justify-self: start; height: min(34 * var(--u), 340px); aspect-ratio: calc(var(--w) + 16) / 108;
  max-width: 100%; padding: 0; touch-action: none; }
.trace-pad svg { width: 100%; height: 100%; overflow: visible; touch-action: none; }
.trace-pad path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-pad .guide { stroke: var(--ink-soft); stroke-width: 7; stroke-dasharray: .1 10; opacity: .55; }
.trace-pad .ink { stroke: var(--lake); stroke-width: 9; stroke-dasharray: 0 100; }
.trace-pad .ink.written { stroke: var(--ink); }
.trace-pad .ink.demo-ink { opacity: .55; }
.trace-pad .finger { stroke: var(--lake); stroke-width: 9; transition: opacity .35s; }
.trace-pad .finger.written { stroke: var(--ink); }
.trace-pad .finger.stray { opacity: .45; }
.trace-pad .finger.fade { opacity: 0; }
.trace-pad.free .guide, .trace-pad.free .start { visibility: hidden; } /* the free writings: from memory (F43) */
.trace-pad .start { fill: var(--leaf); stroke: var(--white); stroke-width: 2; animation: breathe 1.6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center; }
.trace-hand { position: absolute; z-index: 4; width: min(12 * var(--u), 120px); display: none; pointer-events: none;
  transform: translate(-30%, -8%); opacity: .75; }
.trace-hand.on { display: block; }
.trace-hand img { width: 100%; }
@media (orientation: portrait) { .trace-pad { justify-self: center; height: min(40vw, 320px); } }