/* Tag 5: Huetchenspiel (KB-ADV-010). Nur Regeln unter .day-5. */

.mission-paper.chapter-one.day-5 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; }
.mission-paper.chapter-one.day-5 .quest-playfield::before { display:none; }
.day-5 .chapter-playfield { display:grid; min-height:0; align-content:center; }

.mission-paper.chapter-one.day-5 form > h2 { display:flex; align-items:center; justify-content:center; gap:22px; margin:0 0 6px; font-size:clamp(28px,3vw,46px); color:#1b2433; }
.mission-paper.chapter-one.day-5 form > h2::before,
.mission-paper.chapter-one.day-5 form > h2::after { content:''; flex:0 1 200px; height:1px; background:#7a5a30; }

.day-5 .hat-wrap { display:grid; justify-items:center; gap:4px; width:100%; min-height:0; }
.day-5 .task-lead { margin:0; text-align:center; font:700 19px/1.2 'Roboto Condensed',sans-serif; color:#33220f; }
.day-5 .hat-rounds { display:flex; gap:8px; margin:0; padding:0; list-style:none; font:700 15px/1 'Roboto Condensed',sans-serif; color:#5b4224; }
.day-5 .hat-rounds li { padding:4px 14px 5px; border-radius:999px; border:2px solid #8a6a3f; background:#fbf1dc99; }
.day-5 .hat-rounds .is-current { background:#ffd54a; border-color:#5b4224; color:#10213a; }
.day-5 .hat-rounds .is-done { background:#5b4224; color:#fff3d2; }

/* Drei gleiche Kisten (leerer Anhaenger): Identitaet gibt es nur ueber den Platz, nicht ueber Aufdruck.
   Zwei gemalte, freigestellte Zustaende im selben Raster (560x708): zu (kiste-zu) und Deckel auf (kiste-auf). Das Ei steckt zwischen
   Rueckwand/Deckel (.crate-open) und einer zweiten Kopie nur der Vorderwand (.crate-front, ab der Kante der Vorderwand). */
.day-5 .crate-stage { display:grid; grid-template-columns:repeat(3,minmax(0,220px)); justify-content:center; gap:clamp(10px,4vw,70px); width:100%; padding-top:4px; }
.day-5 .shipping-crate { position:relative; display:block; min-height:44px; box-shadow:none; filter:none; width:100%; aspect-ratio:560/708; padding:0; border:0; border-radius:14px; background:none; color:#14213d; transition:none; }
.day-5 .shipping-crate[aria-checked="true"]:not(:focus-visible) { outline:0; }
.day-5 .shipping-crate img { display:block; pointer-events:none; }
.day-5 .shipping-crate > img { position:absolute; left:0; top:0; width:100%; height:100%; transition:opacity .25s ease; }
.day-5 .crate-closed { z-index:1; }
.day-5 .crate-open { z-index:1; opacity:0; }
.day-5 .crate-front { z-index:3; opacity:0; clip-path:inset(42.7% 0 0 0); }
.day-5 .shipping-crate.is-open .crate-open, .day-5 .shipping-crate.is-open .crate-front { opacity:1; }
.day-5 .shipping-crate.is-open .crate-closed { opacity:0; }
.day-5 .shipping-crate::after { content:none; } /* globale Zierleiste aus, kein Rahmen um die Kiste */
.day-5 .shipping-crate:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #123f67; }
.day-5 .shipping-crate[aria-disabled="true"] { cursor:default; }
.day-5 .hat-wrap[data-phase="pick"] .shipping-crate { cursor:pointer; translate:0 0; transition:translate .16s var(--ease-out); }
.day-5 .hat-wrap[data-phase="pick"] .shipping-crate:hover { translate:0 -4px; }
.day-5 .shipping-crate.is-wrong { animation:hat-shake .38s ease-out; }
@keyframes hat-shake { 20% { translate:-7px 0; } 45% { translate:6px 0; } 70% { translate:-3px 0; } }

/* Das Sternenei (eigenes Asset): sitzt im Stroh hinter der Vorderwand (.crate-front verdeckt den unteren Teil); beim Versenken sinkt es dahinter */
.day-5 .hat-egg { position:absolute; left:50%; bottom:46%; z-index:2; width:38%; aspect-ratio:1; translate:-50% 0; pointer-events:none; }
.day-5 .hat-egg img { display:block; width:100%; height:100%; filter:drop-shadow(0 2px 4px #0006); transition:translate .7s cubic-bezier(.45,0,.3,1), opacity .3s .5s; }
.day-5 .hat-egg.is-in img { translate:0 115%; opacity:0; }
.day-5 .hat-egg.is-rising img { animation:hat-rise .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes hat-rise { from { translate:0 115%; opacity:0; } }
/* weicher Bodenschatten, wandert beim Tauschen mit der Kiste */
.day-5 .shipping-crate::before { content:''; display:block; position:absolute; z-index:0; left:6%; right:6%; top:auto; bottom:-1%; width:auto; height:6%; border-radius:50%; background:radial-gradient(closest-side,#1a0f0670,transparent); }

/* Rueckmeldung ohne Rahmen: sanfter Schein hinter dem Ei, Haken bzw. "Leer!" im Bild; nach einem Fehlgriff oeffnet sich die richtige Kiste erst danach */
.day-5 .crate-glow { position:absolute; left:50%; top:38%; z-index:4; width:92%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(closest-side,#fff2a8cc,#ffd45a55 45%,#ffd45a00); animation:hat-glow 1s ease-out both; }
.day-5 .shipping-crate.is-picked .crate-glow { background:radial-gradient(closest-side,#d6ffc0cc,#6fdc8a55 45%,#6fdc8a00); }
.day-5 .shipping-crate.is-reveal .crate-glow { animation-delay:1.1s; }
.day-5 .shipping-crate.is-reveal .hat-egg img.is-rising, .day-5 .shipping-crate.is-reveal .hat-egg.is-rising img { animation-delay:1.1s; }
.day-5 .shipping-crate.is-reveal .crate-closed { animation:hat-fade-out .3s 1s both; }
.day-5 .shipping-crate.is-reveal .crate-open, .day-5 .shipping-crate.is-reveal .crate-front { animation:hat-fade-in .3s 1s both; }
@keyframes hat-glow { from { opacity:0; scale:.6; } to { opacity:1; scale:1; } }
@keyframes hat-fade-out { from { opacity:1; } to { opacity:0; } }
@keyframes hat-fade-in { from { opacity:0; } to { opacity:1; } }
.day-5 .shipping-crate > .crate-mark { position:absolute; z-index:5; left:50%; top:36%; translate:-50% -50%; display:grid; place-items:center; min-width:44px; min-height:44px; padding:0 14px; border-radius:999px; pointer-events:none; animation:hat-pop .35s cubic-bezier(.16,1,.3,1) both; }
.day-5 .shipping-crate > .crate-mark.is-yes { top:72%; width:48px; height:48px; padding:0; background:#2f9e57; color:#fff; box-shadow:0 0 18px 4px #7be39a99, 0 2px 4px #0005; }
.day-5 .shipping-crate > .crate-mark.is-no { background:#2d1c0ee6; color:#fff0cf; font:700 22px/1 'Roboto Condensed',sans-serif; box-shadow:0 2px 8px #0008; }
@keyframes hat-pop { from { opacity:0; scale:.7; } }

@media (max-width:700px) {
  .day-5 .task-lead { font-size:17px; }
  .day-5 .crate-stage { gap:6px; padding-top:4px; }
  .day-5 .hat-rounds { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .day-5 .hat-egg img { transition:opacity .3s; }
  .day-5 .hat-egg.is-rising img, .day-5 .shipping-crate.is-wrong, .day-5 .crate-glow, .day-5 .crate-mark, .day-5 .shipping-crate.is-reveal > img { animation:none; }
  .day-5 .shipping-crate.is-reveal .crate-closed { opacity:0; }
  .day-5 .shipping-crate > img { transition:none; }
  .day-5 .hat-wrap[data-phase="pick"] .shipping-crate { transition:none; }
  .day-5 .hat-wrap[data-phase="pick"] .shipping-crate:hover { translate:0 0; }
}