/* Tag 24: Ein Licht für Pip. Nur Regeln unter .day-24 (KB-ADV-005, bauer-10; KB-ADV-010: Dame gegen Takt, danach schlüpft das Dino-Junge, kein Lichtsignal mehr).
   Referenz: docs/entwuerfe/tage-02-24/tag-24-ein-licht-fuer-pip.v2.png (Rahmen); das Spielfeld darf abweichen. */

/* Kein Kasten: Spielfeld liegt direkt im Raster des Formulars (Playfield = display:contents) */
.mission-paper.chapter-later.day-24 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-24 .quest-playfield { display:contents; }
.mission-paper.chapter-later.day-24 .quest-playfield::before { display:none; }
.day-24 form > h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mission-paper.chapter-later.day-24 .chapter-tools { grid-area:tools; justify-self:start; margin:0; }
.mission-paper.chapter-later.day-24 .feedback-space { grid-area:fb; min-height:20px; text-align:center; }
.mission-paper.chapter-later.day-24 .check-answer { grid-area:check; justify-self:center; width:min(505px,100%); min-height:64px; margin:0; font-size:36px; }
@media (min-width:1251px) { .mission-paper.chapter-later.day-24 .check-answer { min-height:68px; font-size:40px; } }
@media (max-width:700px) { .mission-paper.chapter-later.day-24 .check-answer { min-height:58px; font-size:28px; } }

/* Abschnittstitel mit Zierlinien (Dame-Seitentitel) */
.day-24 .fin-title { display:flex; align-items:center; gap:14px; margin:0 0 14px; color:#1b1710; font:700 30px/1.1 'Roboto Condensed',sans-serif; text-align:center; }
.day-24 .fin-title::before, .day-24 .fin-title::after { content:''; flex:1 1 0; min-width:12px; height:2px; background:#5b4630; opacity:.7; }
@media (max-width:700px) { .day-24 .fin-title { font-size:24px; gap:8px; } }

/* Phase 1: Dame gegen Takt (KB-ADV-010, Runde 3). Gemaltes Brett (Stahl und Eis), gemalte Steine; alle Groessen fest, nichts springt bei Zuegen oder Takt-Antwort. */
.mission-paper.chapter-later.day-24 form:has(.dm-play) { display:grid; row-gap:14px; grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:'dame' 'tools' 'fb' 'check'; align-content:start; }
.mission-paper.chapter-later.day-24 form:has(.dm-play) .feedback-space { height:40px; min-height:40px; overflow:hidden; }
.mission-paper.chapter-later.day-24 form:has(.dm-play) .answer-feedback, .mission-paper.chapter-later.day-24 form:has(.dm-play) .answer-feedback:empty { display:block; width:100%; text-align:center; margin:0; height:40px; line-height:1.25; overflow:hidden; }
.mission-paper.chapter-later.day-24 .dm-play { grid-area:dame; display:grid; justify-content:center; justify-items:center; gap:14px 28px; }
.day-24 .dm-board { position:relative; width:var(--bs,336px); aspect-ratio:1; flex:none; }
.day-24 .dm-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.day-24 .dm-grid { position:absolute; inset:6%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(6,minmax(0,1fr)); }
.day-24 .dm-sq { position:relative; display:grid; place-items:center; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:#cfe4f2 url('../../assets/daily/day-24/dame-feld-hell.webp') center / cover; }
.day-24 .dm-sq.is-dark { background-image:url('../../assets/daily/day-24/dame-feld-dunkel.webp'); cursor:pointer; }
.day-24 .dm-sq.is-dark:hover { filter:brightness(1.2); }
.day-24 .dm-sq.is-sel::before { content:''; position:absolute; inset:2px; border:4px solid #ffd45a; box-shadow:0 0 10px #ffd45a; pointer-events:none; }
.day-24 .dm-sq.is-target::after { content:''; position:absolute; left:34%; top:34%; width:32%; aspect-ratio:1; border-radius:50%; background:#ffd45a; box-shadow:0 0 0 4px #ffd45a55, 0 0 10px #ffd45a; pointer-events:none; }
.day-24 .dm-sq.hint-to { outline:4px dashed #ffd45a; outline-offset:-4px; }
.day-24 .dm-sq:focus-visible { outline:4px solid #fff; outline-offset:-4px; box-shadow:inset 0 0 0 7px #10213f; z-index:1; }
.day-24 .dm-sq .dm-pc { position:relative; width:88%; height:88%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 3px #02101f99); }
.day-24 .dm-sq .dm-pc.is-new { animation:dm-pop .3s cubic-bezier(.2,.9,.3,1.25); }
.day-24 .dm-sq.hint-target .dm-pc { animation:dm-hint 1.1s ease-in-out 3; }
@keyframes dm-pop { from { transform:scale(.55); opacity:.4; } }
@keyframes dm-hint { 50% { transform:scale(1.12); } }
.day-24 .dm-side { display:grid; grid-template-rows:auto 80px auto auto; align-content:start; gap:10px; width:min(100%,360px); }
.day-24 .dm-side .fin-title { margin:0; font-size:26px; }
.day-24 .dm-who { display:flex; align-items:center; gap:12px; height:80px; }
.day-24 .dm-takt { flex:0 0 auto; width:64px; height:auto; filter:drop-shadow(0 4px 4px #3a240c55); }
.day-24 .dm-status { display:grid; align-content:center; gap:2px; height:70px; margin:0; overflow:hidden; color:#1b1710; }
.day-24 .dm-status b { font:700 24px/1.1 'Roboto Condensed',sans-serif; white-space:nowrap; }
.day-24 .dm-status span { font-size:16px; line-height:1.25; }
.day-24 .dm-count { display:flex; gap:20px; height:30px; margin:0; font:700 19px/1 'Roboto Condensed',sans-serif; color:#1b1710; }
.day-24 .dm-count span { display:flex; align-items:center; gap:6px; min-width:84px; }
.day-24 .dm-count .dm-mini { width:30px; height:30px; object-fit:contain; }
.day-24 .dm-rule { box-sizing:border-box; min-height:66px; margin:0; padding:8px 12px; border:1px dashed #80643e; border-radius:10px; background:#fff6e7aa; color:#10253a; font-size:16px; line-height:1.3; }

@media (min-width:1251px) {
  .mission-paper.chapter-later.day-24 form:has(.dm-play) { grid-template-columns:minmax(0,1fr) 190px; grid-template-areas:'dame tools' 'fb fb' 'check check'; grid-template-rows:356px 40px auto; align-content:start; row-gap:10px; padding-top:6px; }
  .mission-paper.chapter-later.day-24 .dm-play { grid-template-columns:auto 360px; align-items:center; height:356px; }
  .mission-paper.chapter-later.day-24 form:has(.dm-play) .chapter-tools { flex-direction:column; align-self:center; justify-self:start; margin:0; gap:14px; }
  .day-24 .dm-board { --bs:350px; }
  .day-24 .dm-side { width:360px; }
}
@media (max-width:700px) {
  .day-24 .dm-board { --bs:min(100%,360px); }
  .day-24 .dm-status b { font-size:21px; }
  .day-24 .dm-side { grid-template-rows:auto 80px auto auto; }
  .mission-paper.chapter-later.day-24 form:has(.dm-play) .check-answer { font-size:26px; }
}
@media (prefers-reduced-motion:reduce) { .day-24 .dm-sq .dm-pc.is-new, .day-24 .dm-sq.hint-target .dm-pc { animation:none; } }

/* Phase 2: Das Ei schlüpft. Gleiche Grundfläche wie das Dame-Brett (nichts springt). Bühne = gemalter Kontrollraum; Ei, Junges und Pip sind gemalte Bilder, in % der Bühne positioniert.
   Ohne Animation = Standbild "Junges im aufgebrochenen Ei, Pip hebt die Laterne". */
.day-24 .hatch-stage .hatch-scene { position:absolute; inset:6%; overflow:hidden; background:#0b1a30 url('../../assets/daily/day-24/buehne.webp') center/cover; }
.day-24 .hatch-glow { position:absolute; left:45%; top:56%; width:70%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(#ffd878aa,#ffd87833 42%,#ffd87800 70%); opacity:.8; }
.day-24 .hatch-egg { position:absolute; left:27%; bottom:17%; width:36%; max-width:none; height:auto; filter:drop-shadow(0 6px 8px #02101f99); transform-origin:50% 100%; }
.day-24 .hatch-egg.is-cracked { opacity:0; }
.day-24 .hatch-pip { position:absolute; left:63%; bottom:9%; width:27%; max-width:none; height:auto; filter:drop-shadow(0 6px 6px #02101fbb); transform-origin:50% 100%; }
.day-24 .hatch-sparks { position:absolute; left:45%; top:52%; width:0; height:0; }
.day-24 .hatch-sparks i { position:absolute; width:9px; height:9px; margin:-4px; border-radius:50%; background:#ffe9a0; box-shadow:0 0 8px 2px #ffd45a; opacity:0; }
.day-24 .hatch-side { display:grid; align-content:center; gap:12px; width:min(100%,360px); }
.day-24 .hatch-title { margin:0; color:#1b1710; font:700 34px/1.1 'Roboto Condensed',sans-serif; }
.day-24 .hatch-text { margin:0; padding:12px 14px; border:1px dashed #80643e; border-radius:10px; background:#fff6e7aa; color:#10253a; font-size:18px; line-height:1.35; }
@media (min-width:1251px) { .day-24 .hatch-side { width:360px; } }
@media (prefers-reduced-motion:no-preference) {
  .day-24 .hatch-egg.is-cracked { animation:hatch-cracked 3.6s linear both; }
  .day-24 .hatch-egg.is-open { animation:hatch-open 3.6s linear both; opacity:0; }
  .day-24 .hatch-glow { animation:hatch-glow 3.6s ease-in-out both; }
  .day-24 .hatch-pip { animation:hatch-pip 3.6s ease-in-out both; }
  .day-24 .hatch-sparks i { animation:hatch-spark 1.5s ease-out 1.5s both; }
  @keyframes hatch-cracked { 0% { opacity:1; rotate:0deg; } 10% { rotate:-2deg; } 20% { rotate:2deg; } 30% { rotate:-2.5deg; } 40% { rotate:2.5deg; opacity:1; } 44% { opacity:0; rotate:0deg; } 100% { opacity:0; } }
  @keyframes hatch-open { 0%,40% { opacity:0; scale:.97; } 46% { opacity:1; scale:1.03; } 60%,100% { opacity:1; scale:1; } }
  @keyframes hatch-glow { 0% { opacity:.3; } 40% { opacity:.55; } 48% { opacity:.95; } 100% { opacity:.8; } }
  @keyframes hatch-pip { 0%,50% { rotate:0deg; } 62% { rotate:-3deg; translate:0 -1.5%; } 80%,100% { rotate:0deg; translate:0 0; } }
  @keyframes hatch-spark { 0% { opacity:0; transform:rotate(var(--a)) translateX(0); } 20% { opacity:1; } 100% { opacity:0; transform:rotate(var(--a)) translateX(calc(var(--d) * 4)); } }
}
@media (prefers-reduced-motion:reduce) {
  .day-24 .hatch-egg.is-open { opacity:1; }
  .day-24 .hatch-egg.is-cracked { display:none; }
}

/* Abschlussszene: kurze Zeilen mit Sprecher, ohne Aufzählungspunkte */
.day-24 .hatch-lines { display:grid; gap:2px; list-style:none; padding:10px 14px; font-size:17px; line-height:1.3; }
.day-24 .hatch-lines b { color:#146c68; }