/* Tag 6: Piep-Peilung (KB-ADV-010, Runde 3). Nur Regeln unter .day-6. Kisten, Lager und Peilgerät sind gemalte Bilder, Zahlen und Text sind HTML. */

.day-6 .quest-panel { min-height:0; padding:0; background:none; }
.day-6 form>h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.day-6.chapter-one .quest-playfield { min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible; display:grid; gap:8px; }
.day-6.chapter-one .quest-playfield::before { content:none; }
.day-6 .chapter-tools { justify-content:flex-start; }
.day-6 .feedback-space { min-height:44px; }

/* Bühne: Lagerhalle als Hintergrund, Kisten links, Peilgerät rechts */
.day-6 .pl-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"round round" "floor device" "floor side"; gap:6px 14px; padding:10px 14px 12px; border:3px solid #5a3b1d; border-radius:16px; box-shadow:inset 0 0 0 2px #f0c46a55,0 4px 12px #0006; background:linear-gradient(#1a120a66,#1a120a33),url('../../assets/daily/day-06/lager.webp') center 82%/cover; overflow:hidden; }
.day-6 .pl-round { grid-area:round; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; color:#fff3d0; font:600 15px/1.1 'Roboto Condensed',sans-serif; text-shadow:0 1px 3px #000; }
.day-6 .pl-sound { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border:2px solid #5a3b1d; border-radius:12px; background:#fff3d0; color:#3a2810; font:700 15px/1 'Roboto Condensed',sans-serif; cursor:pointer; }
.day-6 .pl-sound[aria-pressed="false"] { background:#d9c9a4; color:#6a5638; }
.day-6 .pl-sound:focus-visible { outline:4px solid #fff; outline-offset:2px; box-shadow:0 0 0 7px #123f67; }
.day-6 .pl-round b { font-weight:800; }
/* Kistenraster: quadratische Zellen aus demselben Raster (cols x rows); Marke und Ring hängen am Kistenquadrat, nicht am Feld */
.day-6 .pl-floorwrap { grid-area:floor; display:grid; place-items:center; min-height:0; }
.day-6 .pl-floor { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); grid-template-rows:repeat(var(--rows),minmax(0,1fr)); gap:0; width:min(100%,calc(var(--cols)*124px)); aspect-ratio:var(--cols)/var(--rows); }
.day-6 .pl-crate { position:relative; display:block; min-width:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:14px; background:none; cursor:pointer; color:#fff; }
.day-6 .pl-crate img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; rotate:var(--r); filter:drop-shadow(0 3px 3px #0008); user-select:none; -webkit-user-drag:none; pointer-events:none; transition:translate 140ms ease-out; }
.day-6 .pl-crate b { position:absolute; left:50%; top:63%; translate:-50% -50%; min-width:1.6em; padding:1px 5px; border-radius:999px; background:#2a1a0ccc; color:#fff3d0; font:800 clamp(12px,1.1vw + 6px,16px)/1.25 'Roboto Condensed',sans-serif; text-align:center; pointer-events:none; }
.day-6 .pl-crate:hover img { translate:0 -3px; }
.day-6 .pl-crate:focus-visible { outline:4px solid #fff; outline-offset:-2px; box-shadow:0 0 0 7px #123f67; }
.day-6 .pl-crate::after { content:''; position:absolute; inset:13% 13% 12%; border:4px solid transparent; border-radius:14px; pointer-events:none; }
.day-6 .pl-crate.is-peiled::after { border-color:var(--lvl); box-shadow:0 0 14px var(--lvl); }
.day-6 .pl-crate.is-peiled { opacity:.92; }
.day-6 .pl-crate.is-chosen::after { border-color:#fff; border-style:dashed; box-shadow:0 0 14px #fff; }
.day-6 .pl-crate.hint-target::before { content:''; position:absolute; inset:13% 13% 12%; border-radius:14px; box-shadow:0 0 0 4px #ffd54a,0 0 18px 4px #ffb300; pointer-events:none; }
.day-6 .lvl-heiss { --lvl:#ff4a2e; }
.day-6 .lvl-warm { --lvl:#ffa21f; }
.day-6 .lvl-kalt { --lvl:#4fb4ff; }

/* Peilgerät: gemaltes Bild, Zeiger und Lampen darüber (nur Anzeige) */
.day-6 .pl-device { grid-area:device; position:relative; align-self:end; }
.day-6 .pl-device img { display:block; width:100%; height:auto; filter:drop-shadow(0 6px 6px #000a); user-select:none; -webkit-user-drag:none; }
.day-6 .pl-dial { position:absolute; left:18%; top:41%; width:25%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:conic-gradient(from -90deg at 50% 100%,#2c7bd0 0 60deg,#e69a1b 60deg 120deg,#e0432a 120deg 180deg,#0000 0) 50% 0/100% 50% no-repeat,radial-gradient(#0c1e45,#06122c); box-shadow:inset 0 0 8px #000; clip-path:circle(50%); }
.day-6 .pl-dial::after { content:''; position:absolute; left:50%; top:50%; width:12%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:#f6e8c5; }
.day-6 .pl-needle { position:absolute; left:50%; top:50%; width:3px; height:40%; margin-left:-1.5px; margin-top:-40%; transform-origin:50% 100%; rotate:0deg; transform:rotate(var(--a)); background:#fff6d8; border-radius:2px; box-shadow:0 0 5px #fff; }
.day-6 .pl-lamp { position:absolute; top:60.5%; width:5%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:#0a0a12; box-shadow:inset 0 0 3px #000; }
.day-6 .pl-lamp.on { background:var(--lvl); box-shadow:0 0 10px 2px var(--lvl),inset 0 0 4px #fff9; }
.day-6 .pl-read { position:absolute; left:50%; bottom:-2px; translate:-50% 0; padding:3px 12px; border:2px solid #5a3b1d; border-radius:10px; background:#fff3d0; color:var(--lvl,#4a3a22); font:800 17px/1.15 'Roboto Condensed',sans-serif; white-space:nowrap; }
.day-6 .pl-read:not([class*="lvl-"]) { color:#4a3a22; font-weight:600; font-size:15px; }

.day-6 .pl-side { grid-area:side; display:grid; gap:6px; justify-items:start; margin-top:14px; }
.day-6 .pl-status { margin:0; padding:3px 9px; border-radius:8px; background:#2a1a0ccc; color:#fff3d0; font:600 15px/1.2 'Roboto Condensed',sans-serif; }
.day-6 .pl-log { display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; }
.day-6 .pl-log li { display:flex; align-items:center; gap:5px; min-width:28px; height:26px; padding:0 9px 0 4px; border:2px solid var(--lvl); border-radius:999px; background:#2a1a0ccc; color:#fff3d0; font:700 14px/1 'Roboto Condensed',sans-serif; }
.day-6 .pl-log li b { display:grid; place-items:center; min-width:1.5em; height:1.5em; border-radius:50%; background:var(--lvl); color:#1a120a; }
.day-6 .pl-log li.is-free { width:28px; padding:0; border:2px dashed #f0c46a88; background:none; }
.day-6 .pl-side .tool-button { min-height:44px; }

@media (prefers-reduced-motion:no-preference) {
  .day-6 .pl-lamp.on { animation:pl-glow 1.6s ease-in-out infinite; }
  @keyframes pl-glow { 50% { box-shadow:0 0 5px 1px var(--lvl),inset 0 0 4px #fff9; } }
}
@media (prefers-reduced-motion:reduce) { .day-6 .pl-crate img { transition:none; } }

@media (min-width:1251px) {
  .day-6.chapter-one form { grid-template-columns:172px minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:14px; row-gap:6px; }
  .day-6.chapter-one .quest-playfield { display:contents; }
  .day-6 .pl-stage { grid-column:1/-1; grid-row:1; height:340px; }
  .day-6 .pl-round { position:absolute; inset:6px 12px auto 14px; pointer-events:none; }
  .day-6 .pl-sound { pointer-events:auto; }
  .day-6 .pl-floorwrap { container-type:size; }
  .day-6 .pl-floor { width:min(100cqw,calc(100cqh*var(--cols)/var(--rows)),calc(var(--cols)*124px)); }
  .day-6 .chapter-tools { display:flex; grid-column:1; grid-row:2/4; flex-direction:column; align-items:stretch; justify-content:center; gap:10px; margin:0; }
  .day-6 .chapter-tools .tool-button { min-width:0; width:100%; min-height:48px; }
  .mission-paper.day-6.chapter-one form .check-answer { grid-column:2; grid-row:2; justify-self:center; width:min(500px,100%); margin:2px 0 0; }
  .day-6 .feedback-space { grid-column:2; grid-row:3; min-height:44px; }
}

@media (max-width:1250px) {
  .day-6 .pl-stage { grid-template-columns:minmax(0,1fr); grid-template-areas:"round" "floor" "device" "side"; }
  .day-6 .pl-device { width:min(300px,80%); justify-self:center; margin-bottom:18px; }
}
@media (max-width:700px) {
  .day-6 .pl-stage { padding:8px 8px 10px; }
  .day-6 .pl-crate b { font-size:13px; }
}

/* Szene nach dem Sieg (Nikolaus-Special): kurze Zeilen, links ausgerichtet; Erfolgsseite enger, damit beide Knöpfe bei 1536 x 1024 im Papier bleiben */
.day-6 .day-success { padding-top:4px; padding-bottom:14px; }
.day-6 .day-success h2 { font-size:clamp(34px, 3.2vw, 46px); }
.day-6 .day-success>p:not(.salutation) { margin:6px auto 10px; font-size:20px; }
.day-6 .scene-lines { display:grid; gap:2px; max-width:760px; margin:0 auto 14px; padding:0; list-style:none; text-align:left; font:18px/1.3 Georgia,serif; }
.day-6 .scene-lines b { margin-right:.4em; color:var(--teal); font:700 18px/1.3 'Roboto Condensed',sans-serif; }