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

/* Briefbild: Fabrik aus der Referenz statt Szenenbild; Messing-Klammer wie in der Vorlage links */
.day-17 .lab-photo figcaption { display:none; }
.day-17 .lab-photo.polaroid { padding:10px 10px 16px; }
.day-17 .lab-photo.polaroid::before { left:9%; }
.day-17 .letter-text { max-width:23em; }
.day-17 .letter-text strong { font-weight:400; }

/* Spielfeld: kein Kasten, die Bildobjekte stehen frei auf dem Papier */
.mission-paper.chapter-later.day-17 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-17 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; }
.mission-paper.chapter-later.day-17 .quest-playfield::before { display:none; }
.day-17 .world-label { display:none; }
.day-17 form > h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.day-17 .c4-arena { display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); grid-template-areas:'takt side' 'board board'; gap:6px 14px; align-items:center; }
.day-17 .c4-takt { grid-area:takt; width:100%; max-width:120px; height:auto; justify-self:center; filter:drop-shadow(0 6px 5px #3a240c55); }
.day-17 .c4-side { grid-area:side; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.day-17 .c4-round { display:grid; gap:1px; margin:0; padding:6px 12px; border:1px dashed #80643e; border-radius:10px; background:#fff6e7aa; color:#10253a; font-size:15px; line-height:1.2; }
.day-17 .c4-round b { font-size:17px; }.day-17 .read-aloud, .day-17 .chapter-tools .tool-button { min-width:150px; min-height:52px; }

/* Brett: Rahmen (Bild mit transparenten Loechern), dahinter die CSS-Steine, davor die Spaltenflaechen */
.day-17 .c4-board { grid-area:board; position:relative; width:min(100%,573px); aspect-ratio:610 / 420; margin:0 auto; }
.day-17 .c4-discs, .day-17 .c4-frame { position:absolute; inset:0; width:100%; height:100%; }
.day-17 .c4-discs { overflow:hidden; } /* fallender Stein bleibt im Brett, liegt nicht ueber Foto oder Status (Befund Siegwege 10.11.) */
.day-17 .c4-frame { z-index:2; pointer-events:none; user-select:none; filter:drop-shadow(0 8px 6px #1b2a4a66); }
.day-17 .c4-disc { position:absolute; width:13.8%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); }
.day-17 .c4-disc.is-x { background:radial-gradient(circle at 50% 30%,#fbd34c 0,#eaa817 55%,#b36f0a 100%); box-shadow:inset 0 -4px 7px #6b3d0780, inset 0 3px 4px #fff6; }
.day-17 .c4-disc.is-x::before, .day-17 .c4-disc.is-x::after { content:''; position:absolute; left:19%; top:41%; width:62%; height:18%; border-radius:4px; background:linear-gradient(#ffe880,#f5bd1c); box-shadow:0 1px 2px #5a330680; transform:rotate(45deg); }
.day-17 .c4-disc.is-x::after { transform:rotate(-45deg); }
.day-17 .c4-disc.is-o { background:radial-gradient(circle at 50% 28%,#ff6a5c 0,#d9151d 58%,#8c0a11 100%); box-shadow:inset 0 -5px 8px #5a060b80, inset 0 3px 4px #ffb0a666; }
.day-17 .c4-disc.is-o::before { content:''; position:absolute; inset:25%; border-radius:50%; background:radial-gradient(circle at 50% 70%,#a30d14,#e2282b); box-shadow:inset 0 4px 6px #3d0407a0, 0 0 0 3px #ff7a6e66, 0 1px 1px #ffb3aa; }
.day-17 .c4-disc.is-ghost { opacity:.5; }
.day-17 .c4-disc.is-win { box-shadow:inset 0 0 0 5px #fff, inset 0 0 18px 8px #fff9c4; }
.day-17:has(.c4-disc.is-x.is-win) .answer-feedback { color:#1d5e34; font-weight:700; }
.day-17 .c4-disc.is-new { animation:c4-drop .55s cubic-bezier(.4,0,.8,.6); }
@keyframes c4-drop { from { transform:translate(-50%,-420%); } }

.day-17 .c4-columns { position:absolute; z-index:3; left:11.65%; right:11.65%; top:1%; bottom:10%; display:grid; grid-template-columns:repeat(5,1fr); }
.day-17 .c4-columns button { min-width:44px; border:0; border-radius:14px; background:none; cursor:pointer; }
.day-17 .c4-columns button:hover:not(:disabled) { background:#ffffff1f; }
.day-17 .c4-columns button[aria-pressed="true"] { background:#ffffff26; box-shadow:inset 0 0 0 3px #ffd54a; }
.day-17 .c4-columns button:focus-visible { outline:4px solid #fff; outline-offset:-4px; box-shadow:inset 0 0 0 7px #123f67; }
.day-17 .c4-columns button:disabled { cursor:default; }

@media (min-width:760px) and (max-width:1250px) {
  .day-17 .c4-arena { grid-template-columns:minmax(0,230px) minmax(0,573px); grid-template-areas:'takt board' 'side board'; justify-content:center; align-items:end; gap:10px 0; }
  .day-17 .c4-takt { max-width:230px; }
  .day-17 .c4-side { align-items:stretch; align-self:start; }
}

@media (prefers-reduced-motion:reduce) { .day-17 .c4-disc.is-new { animation:none; } }

/* Desktop 1:1 zur Referenz: Takt links, Brett Mitte, Vorlesen/Hinweis rechts, Aktion darunter */
@media (min-width:1251px) {
  .mission-paper.chapter-later.day-17 {
    height:770px;
    grid-template-columns:320px 573px minmax(0,1fr);
    grid-template-rows:220px minmax(0,1fr) 24px 66px;
    padding-top:22px;
  }
  .day-17 .compact-briefing { grid-column:1 / -1; }
  /* geloest: quest-panel ist display:contents, die Erfolgsmeldung braucht die volle Breite unter dem Brief */
  .mission-paper.chapter-later.day-17 .day-success { grid-column:1 / -1; grid-row:2 / -1; align-self:center; }
  .mission-paper.chapter-later.day-17:has(.day-success) { height:770px; }
  .mission-paper.chapter-later.day-.as(.day-success) { height:770px; }
  .mission-paper.chapter-later.day-17 .quest-panel,
  .mission-paper.chapter-later.day-17 form,
  .mission-paper.chapter-later.day-17 .quest-playfield,
  .day-17 .c4-arena,
  .day-17 .c4-side { display:contents; }
  .day-17 .c4-takt { grid-area:auto; grid-column:1; grid-row:2; width:320px; max-width:none; align-self:end; justify-self:start; margin:0 0 -14px -4px; }
  .day-17 .c4-board { grid-area:auto; grid-column:2; grid-row:2; align-self:center; width:573px; margin:0; }
  .mission-paper.chapter-later.day-17 .quest-panel:has(.day-success) { display:grid; grid-column:1 / -1; grid-row:2 / -1; align-content:center; }
  .day-17 .c4-round { min-width:210px; grid-column:3; grid-row:2; align-self:center; justify-self:center; transform:translateY(-120px); text-align:center; }
  .day-17 .read-aloud { grid-column:3; grid-row:2; align-self:center; justify-self:center; position:relative; top:-38px; /* kein transform: die globale :active-Regel wuerde ihn ueberschreiben und den Knopf beim Druecken wegspringen lassen */ min-width:170px; }
  .day-17 .chapter-tools { grid-column:3; grid-row:2; align-self:center; justify-self:center; display:flex; justify-content:center; margin:0; width:170px; transform:translateY(42px); }
  .day-17 .chapter-tools .tool-button { min-width:170px; }
  .day-17 .feedback-space { grid-column:1 / -1; grid-row:3; min-height:0; }
  .day-17 .answer-feedback { margin:0; font-size:18px; }
  .day-17 .check-answer { grid-column:1 / -1; grid-row:4; justify-self:center; width:450px; min-height:60px; margin:0; font-size:36px; }
}