/* Tag 13 – Der vergessene Bauplan: 4x4-Rohrpuzzle mit gemalten Rohrkacheln (KB-ADV-010). Nur Regeln unter .day-13. */

.day-13 .quest-panel { min-height:0; padding:0; background:none; }
.day-13 .world-label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.day-13.chapter-later .quest-playfield { min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible; display:grid; place-items:center; }
.day-13.chapter-later .quest-playfield::before { content:none; }
.day-13 .letter-text strong:empty { display:none; }
.day-13 .feedback-space { min-height:20px; }

/* Frage zwischen zwei feinen Linien, wie in der Referenz */
.mission-paper.day-13 form>h2 { display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 8px; text-align:center; font:700 clamp(22px,6vw,32px)/1.1 'Roboto Condensed',sans-serif; color:#14110c; }
.mission-paper.day-13 form>h2::before,.mission-paper.day-13 form>h2::after { content:''; flex:0 1 110px; height:2px; background:#8a6c42; opacity:.8; }

/* Buehne 836x340: zwei Module links, Raster in der Mitte (4 Kacheln + je ein Anschlussstueck), zwei Module rechts. Alles in Prozent, damit es mit der Papierbreite skaliert. */
.day-13 .bp-stage { position:relative; width:min(100%,836px); aspect-ratio:836/340; margin:0 auto; container-type:inline-size; }
.day-13 .bp-mod,.day-13 .bp-grid,.day-13 .gp-bar { position:absolute; }
.day-13 .bp-mod { margin:0; width:24%; container-type:inline-size; border-radius:14px; filter:drop-shadow(0 3px 3px #3a24108c); transition:filter .2s; }
.day-13 .bp-mod img { display:block; width:100%; height:auto; -webkit-user-drag:none; }
.day-13 .bp-mod-egg { left:0; top:0; }
.day-13 .bp-mod-light { left:0; bottom:0; }
.day-13 .bp-mod-power { right:0; top:0; }
.day-13 .bp-mod-heat { right:0; bottom:0; }
.day-13 .bp-label { position:absolute; display:grid; place-items:center; color:#16110a; font:italic 700 max(11px,8cqw)/1 'Roboto Condensed',sans-serif; white-space:nowrap; pointer-events:none; }
.day-13 .bp-mod-egg .bp-label { left:.8%; top:75.7%; width:51.4%; height:23.1%; }
.day-13 .bp-mod-light .bp-label { left:.8%; top:73%; width:54.8%; height:26%; }
.day-13 .bp-mod-power .bp-label { left:36.4%; top:76.2%; width:62.8%; height:22.6%; }
.day-13 .bp-mod-heat .bp-label { left:46.9%; top:76%; width:52.3%; height:22.8%; }
.day-13 .bp-mod.is-lit { filter:drop-shadow(0 0 3px #fff3b0) drop-shadow(0 0 10px #ffc933); }
.day-13 .gp-tag { position:absolute; right:6%; top:-9px; padding:2px 10px 3px; border-radius:10px; background:#ffc933; color:#2a1c06; font:800 clamp(12px,5cqw,15px)/1.2 'Roboto Condensed',sans-serif; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 1px 2px #0006; }

/* Raster: 6 Spalten (Anschluss, 4 Kacheln, Anschluss) x 4 Reihen. Jede Kachel ist ein gemaltes Bild, die Drehung liegt am Bild (rotate), nicht am Knopf. */
.day-13 .bp-grid { left:25.05%; top:0; width:49.9%; aspect-ratio:4.909/4; display:grid; grid-template-columns:.4545fr repeat(4,1fr) .4545fr; grid-template-rows:repeat(4,1fr); filter:drop-shadow(0 3px 3px #3a24108c); }
.day-13 .gp-stub { display:block; position:relative; overflow:hidden; min-width:0; min-height:0; }
.day-13 .gp-stub .pt-art { position:absolute; left:50%; top:50%; width:220%; height:auto; translate:-50% -50%; }
.day-13 .gt { position:relative; z-index:1; min-width:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:#59636f; cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.day-13 .gt:nth-of-type(1) { border-top-left-radius:10px; } .day-13 .gt:nth-of-type(4) { border-top-right-radius:10px; }
.day-13 .gt:nth-of-type(13) { border-bottom-left-radius:10px; } .day-13 .gt:nth-of-type(16) { border-bottom-right-radius:10px; }
.day-13 .pt-art { display:block; width:100%; height:100%; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.day-13 .gt .pt-art,.day-13 .gt .pt-caps { position:absolute; inset:0; }
.day-13 .pt-caps { width:100%; height:100%; pointer-events:none; }
.day-13 .gt::after { content:''; position:absolute; inset:0; pointer-events:none; }
.day-13 .gt:hover .pt-art { filter:brightness(1.1); }
.day-13 .gt:focus-visible { outline:none; z-index:3; }
.day-13 .gt:focus-visible::after { box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 8px #123f67; }
.day-13 .gt.hint-target::after { box-shadow:inset 0 0 0 4px #ffcc33, inset 0 0 0 6px #17394c; animation:gt-pulse 1.4s ease-in-out 3; }
@keyframes gt-pulse { 50% { box-shadow:inset 0 0 0 6px #ffcc33, inset 0 0 0 9px #17394c; } }
.day-13 .pt-open { fill:#e5392e; stroke:#fff; stroke-width:2; }

/* Zaehler und Zuruecksetzen in der Luecke zwischen Eikammer und Lichtmodul */
.day-13 .gp-bar { left:0; top:39%; width:24%; height:22%; display:grid; align-content:center; justify-items:center; gap:6px; margin:0; font:600 16px/1.2 'Roboto Condensed',sans-serif; color:#3b2a14; }
.day-13 .gp-bar .tool-button { min-height:44px; padding-block:0; padding-inline:10px; width:100%; justify-content:center; font-size:15px; }

@media (prefers-reduced-motion:no-preference) {
  .day-13 .pt-art { transition:filter .15s; }
}
@media (prefers-reduced-motion:reduce) {
  .day-13 .gt.hint-target::after { animation:none; box-shadow:inset 0 0 0 6px #ffcc33, inset 0 0 0 9px #17394c; }
  .day-13 .bp-mod { transition:none; }
}

/* Schmale Flaeche: Eikammer und Strom oben, Raster in der Mitte, Licht und Heizung unten */
@media (max-width:1250px) {
  .mission-paper.day-13 form>h2 { margin-bottom:22px; }
  .day-13 .bp-stage { aspect-ratio:auto; width:min(100%,520px); display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding-top:8px; }
  .day-13 .bp-grid { position:relative; left:auto; top:auto; grid-column:1/-1; grid-row:2; width:100%; margin:6px 0; }
  .day-13 .bp-mod { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; }
  .day-13 .bp-mod-egg { grid-row:1; grid-column:1; } .day-13 .bp-mod-power { grid-row:1; grid-column:2; }
  .day-13 .bp-mod-light { grid-row:3; grid-column:1; } .day-13 .bp-mod-heat { grid-row:3; grid-column:2; }
  .day-13 .gp-tag { top:-8px; right:4%; }
  .day-13 .gp-bar { position:relative; left:auto; top:auto; width:100%; height:auto; grid-column:1/-1; grid-row:4; display:flex; justify-content:center; gap:18px; }
  .day-13 .gp-bar .tool-button { width:auto; padding-inline:16px; }
}