/* Tag 3: Merkspiel (KB-ADV-010). Nur Regeln unter .day-3. */

.day-3 .quest-panel { background:none; }
.day-3.chapter-one .quest-playfield { padding:0; overflow:visible; background:none; border:0; box-shadow:none; display:grid; align-items:center; justify-items:center; min-height:0; }
.day-3.chapter-one .quest-playfield::before { content:none; }
.day-3 form>h2 { display:flex; align-items:center; justify-content:center; gap:22px; text-align:center; }
.day-3 form>h2::before,.day-3 form>h2::after { content:''; flex:1 1 40px; max-width:210px; height:2px; background:#5b4224; opacity:.75; }

.day-3 .lab-wrap { display:grid; grid-template-rows:auto minmax(0,1fr); justify-items:center; gap:4px; width:100%; height:100%; min-height:0; }
.day-3 .task-lead { margin:0; text-align:center; font:700 19px/1.2 'Roboto Condensed',sans-serif; color:#33220f; }

/* Zeile ueber dem Bild: Countdown-Balken in der Merkphase, danach Zaehler und Fehlklicks (liegt im freien oberen Bilddrittel) */
.day-3 .lab-hud { position:absolute; z-index:7; left:50%; top:8px; translate:-50% 0; display:flex; align-items:center; justify-content:center; gap:12px; padding:5px 14px; border-radius:999px; background:#0e2238e6; border:2px solid #ffd54a; color:#fff3d2; font:700 17px/1 'Roboto Condensed',sans-serif; white-space:nowrap; pointer-events:none; }
.day-3 .lab-bar { width:min(300px,34vw); height:12px; border-radius:6px; background:#ffffff26; overflow:hidden; }
.day-3 .lab-bar i { display:block; height:100%; background:#ffd54a; transform-origin:left center; animation:lab-count 15s linear forwards; }
/* wartet, bis das Bild im Sichtfeld ist */
.day-3 .lab-bar.is-wait i { animation-play-state:paused; }
@keyframes lab-count { to { transform:scaleX(0); } }
.day-3 .lab-secs { min-width:58px; font-variant-numeric:tabular-nums; }
.day-3 .lab-lives { display:inline-flex; align-items:center; gap:8px; }
.day-3 .lab-dots { display:inline-flex; gap:6px; }
.day-3 .lab-dots i { width:13px; height:13px; border-radius:50%; border:2px solid #fff3d2; }
.day-3 .lab-dots i.is-used { background:#e0584b; border-color:#e0584b; }

/* Bild: obere 28 % sind abgeschnitten (Seitenverhaeltnis 1536:737), Gegenstaende und Zonen liegen in Prozent darauf */
.day-3 .lab-scroll { width:100%; min-height:0; display:flex; justify-content:flex-start; align-items:flex-start; overflow-x:auto; overflow-y:hidden; padding:4px 6px 8px; }
@media (min-width:1251px) { .day-3 .lab-scroll { overflow:visible; padding:0; } .day-3 .lab-board { --lab-h:318px; } }
.day-3 .lab-board { position:relative; flex:none; box-sizing:border-box; margin-inline:auto; width:min(100%,calc(var(--lab-h,380px)*2.084)); aspect-ratio:1536/737; overflow:hidden; border:6px solid #fbf1dc; border-radius:4px; background:#10202e; box-shadow:0 0 0 1px #8a6a3f,0 5px 12px #3c261066; }
.day-3 .lab-board:focus { outline:0; }
.day-3 .lab-board>img { position:absolute; left:0; bottom:0; width:100%; height:auto; display:block; user-select:none; }

.day-3 .lab-item { position:absolute; width:8%; aspect-ratio:1; translate:-50% -50%; rotate:var(--r,0deg); pointer-events:none; filter:drop-shadow(0 1px 1px #000a); }
.day-3 .lab-item img { position:relative; display:block; width:100%; height:100%; object-fit:contain; filter:brightness(.9) saturate(1.06) contrast(1.04); }
/* Kontaktschatten unter dem Ding (auf Tisch oder Boden) und warmes Lampenlicht von links oben, kuehles Streulicht rechts unten */
.day-3 .lab-item::before { content:''; position:absolute; left:8%; right:-6%; bottom:10%; height:26%; border-radius:50%; background:radial-gradient(closest-side,#0a0804cc,#0a080466 60%,transparent); filter:blur(1.5px); rotate:calc(var(--r,0deg) * -1); }
.day-3 .lab-item::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#ffc06a66,transparent 50%,#0a2a5a55); mask:var(--img) center/contain no-repeat; -webkit-mask:var(--img) center/contain no-repeat; }
.day-3 .lab-item[data-ding="etikett"] { --img:url(../../assets/daily/day-03/ding-etikett.webp); }
.day-3 .lab-item[data-ding="lupe"] { --img:url(../../assets/daily/day-03/ding-lupe.webp); }
.day-3 .lab-item[data-ding="schraube"] { --img:url(../../assets/daily/day-03/ding-schraube.webp); }
.day-3 .lab-item[data-ding="zahnrad"] { --img:url(../../assets/daily/day-03/ding-zahnrad.webp); }
.day-3 .lab-item[data-ding="reagenzglas"] { --img:url(../../assets/daily/day-03/ding-reagenzglas.webp); }
.day-3 .lab-item[data-ding="schluessel"] { --img:url(../../assets/daily/day-03/ding-schluessel.webp); }
.day-3 .lab-item[data-ding="thermometer"] { --img:url(../../assets/daily/day-03/ding-thermometer.webp); }
.day-3 .lab-item[data-ding="pipette"] { --img:url(../../assets/daily/day-03/ding-pipette.webp); }
.day-3 .lab-item[data-ding="pinsel"] { --img:url(../../assets/daily/day-03/ding-pinsel.webp); }
.day-3 .lab-item[data-ding="batterie"] { --img:url(../../assets/daily/day-03/ding-batterie.webp); }

.day-3 .lab-item.is-found { filter:drop-shadow(0 0 7px #ffd54a); }
.day-3 .lab-item.is-reveal { filter:drop-shadow(0 0 8px #3de6d8); }

/* Merkphase: warmer Lichtschein, der die zehn Dinge nacheinander kurz hervorhebt (nur Deckkraft, bleibt auch bei reduzierter Bewegung) */
.day-3 .lab-glint { position:absolute; z-index:2; width:13%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side,#fff3b8dd,#ffd15f66 55%,transparent); opacity:0; pointer-events:none; animation:lab-glint 1.4s ease-in-out both; }
.day-3 .lab-wrap.is-wait .lab-glint { animation-play-state:paused; }
@keyframes lab-glint { 0% { opacity:0; } 35%,55% { opacity:1; } 100% { opacity:0; } }

/* Ein Cursor ueber dem ganzen Bild und keine Hover-Effekte: nichts verraet die Trefferstellen */
.day-3 .lab-board, .day-3 .lab-board * { cursor:default; }

/* Trefferzonen: gleiche Groesse an allen zehn Stellen, unsichtbar, bis sie gewaehlt sind */
.day-3 .lab-zone { position:absolute; z-index:3; width:max(44px,8.4%); aspect-ratio:1; min-width:44px; min-height:44px; translate:-50% -50%; padding:0; border:3px solid transparent; border-radius:50%; background:transparent; }
.day-3 .lab-zone span { position:absolute; right:-4px; top:-4px; display:grid; place-items:center; min-width:24px; height:24px; border-radius:12px; font:800 16px/1 'Roboto Condensed',sans-serif; }
.day-3 .lab-zone.is-found { border-color:#ffd54a; background:#ffd54a33; }
.day-3 .lab-zone.is-found span { background:#ffd54a; border:2px solid #1b2a3a; color:#10213a; }
.day-3 .lab-zone.is-miss { border-color:#e0584b; background:#e0584b2b; }
.day-3 .lab-zone.is-miss span { background:#e0584b; border:2px solid #4a1510; color:#fff; }
.day-3 .lab-zone:focus-visible { outline:4px solid #fff; outline-offset:2px; box-shadow:0 0 0 7px #123f67; z-index:4; }

/* Vorhang: zwei Haelften schliessen sich ueber dem Bild, oeffnen sich wieder */
.day-3 .lab-curtain { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.day-3 .lab-curtain i { position:absolute; top:0; bottom:0; width:50.5%; background:linear-gradient(90deg,#4c1019,#8f2434 14%,#561222 28%,#8f2434 44%,#4c1019 58%,#8f2434 74%,#561222 88%,#7c1d2d); box-shadow:inset 0 -26px 40px #0006; }
.day-3 .lab-curtain i:first-child { left:0; border-right:3px solid #d9a441; }
.day-3 .lab-curtain i:last-child { right:0; border-left:3px solid #d9a441; }
.day-3 .lab-curtain.is-closing i:first-child { animation:lab-in-l .6s cubic-bezier(.16,1,.3,1) both; }
.day-3 .lab-curtain.is-closing i:last-child { animation:lab-in-r .6s cubic-bezier(.16,1,.3,1) both; }
.day-3 .lab-curtain.is-opening i:first-child { animation:lab-out-l .65s cubic-bezier(.7,0,.84,0) both; }
.day-3 .lab-curtain.is-opening i:last-child { animation:lab-out-r .65s cubic-bezier(.7,0,.84,0) both; }
@keyframes lab-in-l { from { transform:translateX(-101%); } }
@keyframes lab-in-r { from { transform:translateX(101%); } }
@keyframes lab-out-l { to { transform:translateX(-101%); } }
@keyframes lab-out-r { to { transform:translateX(101%); } }

@media (prefers-reduced-motion:reduce) {
  .day-3 .lab-curtain.is-closing i, .day-3 .lab-curtain.is-opening i { animation-name:lab-fade-in; animation-duration:.25s; }
  .day-3 .lab-curtain.is-opening i { animation-name:lab-fade-out; }
}
@keyframes lab-fade-in { from { opacity:0; } }
@keyframes lab-fade-out { to { opacity:0; } }

@media (max-width:700px) {
  .day-3 .task-lead { font-size:17px; }
  .day-3 form>h2 { gap:10px; }
  .day-3 .lab-scroll { padding:4px 0 6px; overflow:visible; }
  .day-3 .lab-board { width:100%; border-width:4px; } /* Handy: ganzes Bild ohne Wischen, Gegenstaende groesser, Zonen bleiben 44 px */
  .day-3 .lab-item { width:11%; }
  .day-3 .lab-hud { top:5px; gap:8px; padding:4px 10px; font-size:14px; }
  .day-3 .lab-bar { width:110px; }
  .day-3 .lab-secs { min-width:48px; }
}
@media (min-width:1251px) { .mission-paper.chapter-one.day-3 form>h2 { font-size:38px; line-height:1.05; margin:0 0 4px; } }