/* Tag 4: gehoert dem zustaendigen web-bauer (KB-ADV-005). Nur Regeln unter .day-4. */

/* Referenz: links drei, rechts drei Fotostuecke, in der Mitte das 3x2-Raster auf Papier. */
.day-4 .quest-panel { background:none; }
.day-4.chapter-one .quest-playfield { padding:0; overflow:visible; background:none; border:0; box-shadow:none; display:grid; align-items:center; }
.day-4.chapter-one .quest-playfield::before { content:none; }
.day-4 form>h2 { display:flex; align-items:center; justify-content:center; gap:22px; text-align:center; }
.day-4 form>h2::before,.day-4 form>h2::after { content:''; flex:1 1 40px; max-width:150px; height:2px; background:#5b4224; opacity:.75; }

.day-4 .photo-puzzle { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3.3fr) minmax(0,1fr); gap:22px; width:100%; margin:0; align-items:stretch; }

/* Bank: Hoehe folgt dem Raster (contain:size), drei Stuecke gleichmaessig verteilt */
.day-4 .piece-bank { display:grid; grid-template-columns:none; grid-template-rows:repeat(3,minmax(0,1fr)); gap:8px; contain:size; justify-items:center; }
.day-4 .photo-piece { aspect-ratio:512/432; height:100%; width:auto; max-width:100%; padding:5px; border:0; border-radius:2px; background:#fffdf6; box-shadow:0 3px 6px #2a1a0a73; cursor:pointer; font-size:0; rotate:-2.5deg; }
.day-4 .piece-bank .photo-piece:nth-child(2) { rotate:2deg; }
.day-4 .piece-bank .photo-piece:nth-child(3) { rotate:-1.5deg; }
.day-4 .photo-piece img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.day-4 .photo-piece.selected { outline:4px solid #ffd54a; outline-offset:2px; box-shadow:0 0 0 7px #123f67, 0 6px 12px #2a1a0a80; rotate:0deg; z-index:2; }
.day-4 .photo-piece:disabled { visibility:hidden; }
.day-4 .photo-piece:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #123f67; z-index:2; }

/* Raster: sechs leere Felder auf Papier; belegt bilden sie das Gesamtbild ohne Rand */
.day-4 .puzzle-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:7px; border-radius:8px; background:#d9c299; box-shadow:inset 0 0 0 2px #b79b69, inset 0 2px 8px #6b4c2455; }
.day-4 .puzzle-slot { aspect-ratio:512/432; min-width:44px; min-height:44px; padding:0; border:2px solid #cdb27f; border-radius:4px; background:#efdfbd; box-shadow:inset 0 2px 5px #7b5a2c44; cursor:pointer; overflow:hidden; }
.day-4 .puzzle-slot.is-filled { border-color:#fffdf6; background:none; box-shadow:0 2px 4px #2a1a0a55; }
.day-4 .puzzle-slot img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.day-4 .puzzle-slot:focus-visible { outline:4px solid #fff; outline-offset:2px; box-shadow:0 0 0 7px #123f67; position:relative; z-index:2; }
.day-4 .has-selected .puzzle-slot:not(.is-filled) { border-style:dashed; border-color:#8a6a3f; }

@media (max-width:700px) {
  .day-4 .photo-puzzle { grid-template-columns:1fr 1fr; gap:10px 8px; }
  .day-4 .puzzle-slots { grid-column:1 / -1; grid-row:1; gap:5px; padding:5px; }
  .day-4 .piece-bank { contain:none; grid-template-rows:none; grid-template-columns:none; grid-auto-rows:auto; gap:8px; }
  .day-4 .photo-piece { height:auto; width:100%; max-width:130px; }
  .day-4 form>h2 { gap:10px; }
}
@media (prefers-reduced-motion:no-preference) {
  .day-4 .photo-piece { transition:rotate 160ms ease-out,box-shadow 160ms ease-out; }
}
@media (min-width:1251px) {
  .mission-paper.chapter-one.day-4 form>h2 { font-size:34px; line-height:1.05; margin:0 0 6px; }
  .day-4 .puzzle-slots { width:100%; max-width:616px; justify-self:center; } /* Papier hat hier feste Hoehe: Das Raster muss in die 358 px hohe Spielzeile passen, sonst liegt die Rueckmeldung darauf. */}