/* Base styles: page, screens, shared components (plan §11; mockups 00 board). Child screens use the Bilderbuch
   paper; the parent register lives in parent.css. Motion is transform/opacity only. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: var(--font-ui); overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the stage: one screen at a time, full viewport, safe areas respected ---- */
#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
  padding: max(env(safe-area-inset-top), 0px) max(env(safe-area-inset-right), 0px)
    max(env(safe-area-inset-bottom), 0px) max(env(safe-area-inset-left), 0px);
  animation: screen-in var(--t-motion) var(--ease-soft) both; }
.screen.paper { background: var(--paper); }
.screen.paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain);
  background-size: 260px; opacity: .55; mix-blend-mode: multiply; }
.bg-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- round chips (home, speaker, map, album, arrow) ---- */
.chip { position: absolute; z-index: 20; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-blob);
  display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow-lift); cursor: pointer;
  transition: transform 160ms var(--ease-pop); }
.chip img { width: 48%; height: 48%; }
.chip:active { transform: scale(.94); }
.chip:focus-visible, .card:focus-visible, .big-play:focus-visible, .letter-label:focus-visible, .station:focus-visible,
.block:focus-visible, .syllable-label:focus-visible { outline: 5px solid var(--petrol); outline-offset: 5px; }
.chip.speaker { background: var(--lake); }
.chip.tl { left: calc(2.4 * var(--u)); top: calc(2.4 * var(--u)); }
.chip.tr { right: calc(2.4 * var(--u)); top: calc(2.4 * var(--u)); }
.chip.tl2 { left: calc(2.4 * var(--u) + var(--tap) + 16px); top: calc(2.4 * var(--u)); }
.chip.arrow { right: calc(3 * var(--u)); bottom: calc(3 * var(--u)); width: 132px; height: 132px; background: var(--sun);
  animation: pop-in 600ms var(--ease-pop) both, breathe 2.6s ease-in-out 600ms infinite; }
.chip.arrow img { width: 46%; height: 46%; }

/* ---- the big play button (home) ---- */
.big-play { position: relative; width: min(34 * var(--u), 300px); aspect-ratio: 1; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--sun-light), var(--sun) 55%, var(--sun-deep)); cursor: pointer;
  box-shadow: 0 0 0 14px rgba(255, 253, 247, .65), var(--shadow-float); display: grid; place-items: center;
  animation: breathe 2.6s ease-in-out infinite; }
.big-play img { width: 42%; height: 42%; margin-left: 8%; }
.big-play:active { transform: scale(.95); }

/* ---- Milo ---- */
.milo { position: absolute; z-index: 6; pointer-events: none; transform-origin: 50% 100%;
  animation: milo-breathe 3.2s ease-in-out infinite; }
.milo.talking { animation: milo-talk 420ms ease-in-out infinite; }
.bubble { position: absolute; z-index: 7; display: flex; gap: 6px; align-items: center; padding: 14px 18px;
  background: var(--white); border-radius: var(--r-chip); box-shadow: var(--shadow-lift); opacity: 0;
  transition: opacity 200ms; }
.bubble.on { opacity: 1; }
.bubble i { width: 8px; height: 22px; border-radius: 4px; background: var(--petrol); animation: bar 700ms ease-in-out infinite; }
.bubble i:nth-child(2) { animation-delay: 120ms; } .bubble i:nth-child(3) { animation-delay: 240ms; }
@keyframes milo-breathe { 50% { transform: scale(1.015, .985); } }
@keyframes milo-talk { 50% { transform: translateY(-4px) rotate(-1.2deg); } }
@keyframes bar { 50% { transform: scaleY(.4); } }
@keyframes breathe { 50% { transform: scale(1.045); } }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }

/* ---- picture cards (A2, A5, memory) ---- */
.card { position: relative; border: 0; padding: 0; cursor: pointer; background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--shadow-lift); display: grid; place-items: center; overflow: visible;
  transition: transform 240ms var(--ease-pop), opacity 300ms, box-shadow 240ms; }
.card .pic { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.card .emoji { font-size: calc(var(--card-size, 220px) * .5); line-height: 1; pointer-events: none;
  font-family: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", sans-serif; }
.card:active { transform: scale(.96); }
.card.correct { transform: translateY(-14px) scale(1.06); box-shadow: 0 0 0 8px var(--glow), var(--shadow-float); }
.card.correct::after { content: ""; position: absolute; right: -14px; top: -14px; width: 64px; height: 64px;
  border-radius: 50%; background: var(--leaf) url("../img/art/i-check-white.svg") center / 62% no-repeat;
  box-shadow: var(--shadow-lift); animation: pop-in 420ms var(--ease-pop) both; }
.card.wobble { animation: wobble 520ms ease-in-out; box-shadow: 0 0 0 6px var(--amber), var(--shadow-lift); }
/* the found picture comes alive — a happy hop with squash and stretch; a wrong one shakes its head, gently (F44) */
.card.correct .pic, .card.correct .emoji, .build-pic.correct .pic { animation: alive 1.1s var(--ease-soft) both;
  transform-origin: 50% 92%; }
.card.wobble .pic, .card.wobble .emoji { animation: shake-no 600ms ease-in-out; }
@keyframes alive {
  12% { transform: scale(1.1, .86); } 32% { transform: translateY(-16%) scale(.94, 1.08) rotate(-4deg); }
  50% { transform: scale(1.08, .9); } 64% { transform: translateY(-7%) rotate(3deg); } 80% { transform: scale(1.03, .97); }
}
@keyframes shake-no { 25% { transform: translateX(-5%) rotate(-3deg); } 50% { transform: translateX(4%) rotate(2deg); }
  75% { transform: translateX(-2%); } }
.card.disabled { opacity: .28; transform: scale(.92); pointer-events: none; }
.card.glow { animation: glow 1.4s ease-in-out infinite; }
@keyframes wobble { 20% { transform: rotate(-3deg); } 45% { transform: rotate(3deg); } 70% { transform: rotate(-2deg); } }
@keyframes glow { 50% { box-shadow: 0 0 0 14px var(--glow), var(--shadow-float); transform: scale(1.04); } }

/* ---- the written word: Andika, syllable colours, Silbenbögen (plan §11) ---- */
.word { font-family: var(--font-read); font-weight: 700; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.syl { position: relative; display: inline-block; padding-bottom: .18em; }
.syl::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: .16em;
  border: .055em solid currentColor; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; opacity: .55; }
.colours .syl:nth-child(odd) { color: var(--syl-blue); }
.colours .syl:nth-child(even) { color: var(--syl-red); }
.label { position: relative; background: var(--white); border-radius: 10px 14px 12px 16px; box-shadow: var(--shadow-lift);
  padding: .2em .55em .1em; transform: rotate(-1.2deg); }
.label::before, .label::after { content: ""; position: absolute; top: -14px; width: 92px; height: 30px;
  background: rgba(244, 195, 77, .55); }
.label::before { left: -18px; transform: rotate(-18deg); } .label::after { right: -18px; transform: rotate(16deg); }

/* ---- leaves: rounds left in this little game (never a number) ---- */
.leaves { position: absolute; z-index: 20; top: calc(3.4 * var(--u)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; }
.leaves i { width: 22px; height: 30px; border-radius: 0 100% 0 100%; background: var(--meadow-light); transform: rotate(45deg); }
.leaves i.done { background: var(--meadow-deep); }

/* ---- reduced motion: instant states, no decoration loops (plan §3, DESIGN.md) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; }
}

/* ---- boot fallback (boot.js) ---- */
.boot-fail { position: fixed; inset: auto 16px 16px; z-index: 100; padding: 16px 20px; border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow-float); font: 17px var(--font-parent); color: var(--ink); }