/* Tag 9: Nebel-Labyrinth (KB-ADV-010). Nur Regeln unter .day-9.
   Aufbau nach docs/entwuerfe/tage-02-24/tag-09-der-weg-zur-fundhoehle.v2.png: Dschungel | Tafel | Skelett | Papierzettel rechts.
   Die Tafel zeigt jetzt 9x9 Felder im Nebel, der Zettel traegt Aufgabe, Schluesselstand und Steuerkreuz.
   Alle Masse der breiten Ansicht sind Referenzpixel mal --u (1 u = 1 Pixel der 1536er-Referenz). */

.day-9 .quest-panel { min-height:0; padding:0; background:none; }
.day-9 .world-label,.day-9 form>h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.day-9.chapter-later .quest-playfield { min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible; }
.day-9.chapter-later .quest-playfield::before { content:none; }
.day-9 #later-clear { display:none; }
.day-9 .feedback-space { min-height:22px; }
.day-9 .answer-feedback { margin:0; font-size:18px; }

.day-9 .mz-stage { container-type:inline-size; width:100%; max-width:1084px; margin:0 auto; }
.day-9 .mz-scene { --u:min(calc(100cqw / 1044),1px); position:relative; width:calc(var(--u) * 1044); height:calc(var(--u) * 386); margin:0 auto; }
.day-9 .mz-scene>img { position:absolute; display:block; max-width:none; -webkit-user-drag:none; user-select:none; pointer-events:none; }
.day-9 .mz-jungle { left:0; top:0; width:calc(var(--u) * 274); height:calc(var(--u) * 386); object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 calc(var(--u) * 18)),linear-gradient(to bottom,transparent,#000 calc(var(--u) * 22),#000 calc(var(--u) * 364),transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 calc(var(--u) * 18)),linear-gradient(to bottom,transparent,#000 calc(var(--u) * 22),#000 calc(var(--u) * 364),transparent); mask-composite:intersect; }
.day-9 .mz-skeleton { left:calc(var(--u) * 694); top:calc(var(--u) * 0); width:calc(var(--u) * 142); height:calc(var(--u) * 390);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--u) * 26),#000 calc(var(--u) * 380),transparent); mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--u) * 26),#000 calc(var(--u) * 380),transparent); }

/* Tafel: 9x9 Felder als gemalte Hoehlenkacheln. Unbekanntes bleibt dunkler Fels im weichen Nebel, Gesehenes ist gedimmt, der Laternenradius leuchtet warm. */
@property --fx { syntax:'<percentage>'; inherits:true; initial-value:0%; }
@property --fy { syntax:'<percentage>'; inherits:true; initial-value:0%; }
.day-9 .mz-board { position:absolute; left:calc(var(--u) * 278); top:calc(var(--u) * 6); width:calc(var(--u) * 408); height:calc(var(--u) * 374); box-sizing:border-box; --pad:calc(var(--u) * 9);
  padding:var(--pad); display:grid; grid-template:repeat(9,1fr) / repeat(9,1fr); gap:0; touch-action:none; user-select:none; -webkit-user-select:none; isolation:isolate;
  background:linear-gradient(#0c0a09bf,#0c0a09bf),url(../../assets/daily/day-09/fels-2.webp) center / 120px; border:calc(var(--u) * 5) solid #5d5446; border-image:url(../../assets/daily/day-09/fels-1.webp) 60 / calc(var(--u) * 9) stretch; border-radius:calc(var(--u) * 6); box-shadow:inset 0 0 calc(var(--u) * 18) #000d,0 calc(var(--u) * 6) calc(var(--u) * 12) #0008; }
.day-9 .mz-board:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #123f67; }
.day-9 .mz-cell { position:relative; display:grid; place-items:center; min-width:0; min-height:0; font-style:normal; background-size:100% 100%; transition:filter .25s; }
.day-9 .mz-cell>* { grid-area:1/1; pointer-events:none; }
.day-9 .mz-cell.is-fog { background:none; }
.day-9 .mz-cell.is-free,.day-9 .mz-cell.is-gate { background-image:url(../../assets/daily/day-09/boden-1.webp); }
.day-9 .mz-cell.is-free.v2 { background-image:url(../../assets/daily/day-09/boden-2.webp); }
.day-9 .mz-cell.is-wall { background-image:url(../../assets/daily/day-09/fels-1.webp); }
.day-9 .mz-cell.is-wall.v2 { background-image:url(../../assets/daily/day-09/fels-2.webp); }
.day-9 .mz-cell:not(.is-lit):not(.is-fog) { filter:brightness(.72) saturate(.8); }
.day-9 .mz-cell.is-gate { filter:none; z-index:4; }
.day-9 .mz-obj { width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 2px 2px #000a); }
.day-9 .mz-cell:not(.is-gate) .mz-obj { filter:drop-shadow(0 0 5px #ffe28a) drop-shadow(0 2px 2px #000a); }
/* Pip ist genau ein Feld gross: dieselbe Breite und Hoehe wie die Kachel, keine Ueberlappung mit Nachbarfeldern */
.day-9 .mz-pipimg { position:absolute; inset:0; width:100%; height:100%; margin:0; max-width:none; object-fit:contain; z-index:2; filter:drop-shadow(0 2px 2px #000b); }
.day-9 .mz-cell.is-pip { z-index:5; filter:none; }
/* Nebel: weicher Verlauf um Pip statt Quadrate; Laternenschein warm darueber */
.day-9 .mz-fog { position:absolute; inset:var(--pad); z-index:3; pointer-events:none; transition:--fx .22s ease-out,--fy .22s ease-out;
  background:radial-gradient(circle at var(--fx) var(--fy),#ffd98a38 0,#ffd98a18 calc(var(--u) * 40),transparent calc(var(--u) * 64),#0a0d1330 calc(var(--u) * 92),#080a0f70 calc(var(--u) * 150),#06080cb0 calc(var(--u) * 230)); }
@media (prefers-reduced-motion:no-preference) {
  .day-9 .mz-cell.is-new { animation:mz-reveal .22s ease-out both; }
  @keyframes mz-reveal { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:none; } }
}

/* Zettel rechts: Aufgabe, Schluesselstand, Steuerkreuz, Neustart */
.day-9 .mz-legend { position:absolute; left:calc(var(--u) * 832); top:calc(var(--u) * 6); width:calc(var(--u) * 212); height:calc(var(--u) * 374); box-sizing:border-box; padding:calc(var(--u) * 24) calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 22);
  display:grid; align-content:start; justify-items:start; gap:calc(var(--u) * 10); background:linear-gradient(160deg,#f6e8c5,#ecd7a6); color:#1b2837; filter:drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 6) #2a180a66);
  clip-path:polygon(0 3%,3% 0,22% 1%,45% 0,70% 1%,100% 0,99% 22%,100% 48%,98.5% 76%,100% 100%,74% 98.5%,48% 100%,24% 98.5%,0 100%,1.5% 70%,0 40%,1.5% 20%); }
.day-9 .mz-task { margin:0; font:700 clamp(15px,calc(var(--u) * 22),22px)/1.18 Roboto,'Roboto Condensed',Arial,sans-serif; }
.day-9 .mz-keystate { display:flex; align-items:center; gap:8px; margin:0; font:400 clamp(13px,calc(var(--u) * 17),17px)/1.1 Roboto,'Roboto Condensed',Arial,sans-serif; }
.day-9 .mz-keyicon { display:grid; flex:none; width:28px; height:28px; color:#8c8374; }
.day-9 .mz-keyicon .mz-obj { width:100%; height:100%; filter:grayscale(1) opacity(.55); }
.day-9 .mz-keystate.has-key .mz-keyicon .mz-obj { filter:drop-shadow(0 0 3px #ffd66a); }
.day-9 .mz-keystate.has-key { font-weight:700; }
.day-9 .mz-pad { display:grid; grid-template:repeat(2,max(44px,calc(var(--u) * 50))) / repeat(3,max(44px,calc(var(--u) * 50))); gap:4px; }
.day-9 .mz-dir { display:grid; place-items:center; margin:0; padding:0; border:2px solid #a9784a; border-radius:12px; background:linear-gradient(#fff6e0,#efd8a6); box-shadow:0 2px 0 #8a5d34; color:#14263a; font-size:20px; line-height:1; cursor:pointer; }
.day-9 .mz-dir-U { grid-area:1/2; } .day-9 .mz-dir-L { grid-area:2/1; } .day-9 .mz-dir-D { grid-area:2/2; } .day-9 .mz-dir-R { grid-area:2/3; }
.day-9 .mz-dir:active { background:#f6e2b5; }
.day-9 .mz-dir.hint-target { box-shadow:0 0 0 4px #fff,0 0 12px 4px #ffcc55; }
.day-9 .mz-dir:focus-visible,.day-9 .mz-restart:focus-visible { outline:4px solid #123f67; outline-offset:3px; box-shadow:0 0 0 7px #fff; }
.day-9 .mz-restart { min-height:44px; padding:0 14px; border:2px solid #a9784a; border-radius:12px; background:transparent; color:#14263a; font:700 16px/1 'Roboto Condensed',sans-serif; cursor:pointer; }
.day-9 .mz-restart:hover,.day-9 .mz-dir:hover { background:#fff3d0; }

.day-9 .mz-sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media (min-width:1251px) {
  .day-9.chapter-later .quest-playfield { align-self:start; }
}

/* Tafel und Zettel nebeneinander ohne Dschungel, solange der Platz fuer die breite Ansicht fehlt */
@container (max-width:899px) {
  .day-9 .mz-scene { --u:1px; display:grid; grid-template-columns:minmax(0,420px) minmax(176px,230px); justify-content:center; gap:16px; width:100%; height:auto; }
  .day-9 .mz-scene>img { display:none; }
  .day-9 .mz-board,.day-9 .mz-legend { position:relative; left:auto; top:auto; width:auto; }
  .day-9 .mz-board { aspect-ratio:408/374; height:auto; }
  .day-9 .mz-legend { height:auto; padding:18px 18px 16px; clip-path:none; border-radius:10px; }
}
/* schmal: untereinander */
@container (max-width:640px) {
  .day-9 .mz-scene { grid-template-columns:minmax(0,1fr); justify-items:center; gap:10px; }
  .day-9 .mz-board { width:100%; max-width:420px; }
  .day-9 .mz-legend { width:100%; max-width:420px; grid-template-columns:auto auto; align-items:center; justify-content:space-between; }
  .day-9 .mz-task { grid-column:1/-1; }
  .day-9 .mz-pad { grid-column:1; grid-row:3; }
  .day-9 .mz-keystate { grid-column:1/-1; }
  .day-9 .mz-restart { grid-column:2; grid-row:3; justify-self:end; }
}