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

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

/* links: der grosse Feldscanner mit den drei Buchsen */
.day-8 .scanner-unit { position:relative; align-self:center; justify-self:center; width:min(100%,480px); }
.day-8 .scanner-unit>img { display:block; width:100%; height:auto; aspect-ratio:462/378; -webkit-user-drag:none; }
.day-8 .socket-hit { position:absolute; width:20.8%; aspect-ratio:96/88; margin:-9.53% 0 0 -10.4%; padding:0; border:0; border-radius:22%; background:none; cursor:pointer; display:grid; place-items:center; }
.day-8 .socket-hit::before { content:''; position:absolute; inset:-3px; border:3px dashed transparent; border-radius:24%; }
.day-8 .socket-hit:hover::before,.day-8 .socket-hit:focus-visible::before { border-color:#ffd54a; }
.day-8 .socket-hit:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #123f67; }
.day-8 .scanner-unit:has(.mod[aria-pressed="true"]) .socket-hit::before,.day-8 .socket-hit.hint-target::before { border-color:#ffd54a; }
.day-8 .plug { width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 2px 3px #000a); }
.day-8 .plug-strom { clip-path:circle(47%); }
.day-8 .plug-steuerung { clip-path:inset(8% 4% round 8%); }
.day-8 .plug-sensor { clip-path:polygon(50% 4%,98% 92%,2% 92%); }

/* rechts: Module und Reihenfolge */
.day-8 .scanner-build { display:grid; align-content:start; gap:8px; min-width:0; }
.day-8 .scanner-build h3 { margin:0; text-align:center; font:800 32px/1.1 'Roboto Condensed',sans-serif; color:#1a1208; }
.day-8 .scanner-build>p { margin:0 auto; max-width:30em; text-align:center; font:18px/1.25 Georgia,serif; color:#2a1a0c; }
.day-8 .scanner-mods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:4px; }
.day-8 .mod { position:relative; container-type:inline-size; width:100%; max-width:176px; justify-self:center; padding:0; border:0; background:none; cursor:pointer; border-radius:18px; }
.day-8 .mod img { display:block; width:100%; height:auto; aspect-ratio:180/178; transition:opacity 150ms; -webkit-user-drag:none; }
.day-8 .mod-name { position:absolute; left:50.5%; top:49%; translate:-50% -50%; color:#1d1d1d; font:800 12.4cqw/1 'Roboto Condensed',sans-serif; white-space:nowrap; pointer-events:none; }
.day-8 .mod-done { position:absolute; right:4%; top:2%; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#146c68; color:#fff; font-style:normal; font-weight:800; font-size:16px; box-shadow:0 0 0 2px #d9f0e8; }
.day-8 .mod:has(.mod-done) img { opacity:.62; }
.day-8 .mod[aria-pressed="true"] { filter:drop-shadow(0 0 9px #ffcc33) drop-shadow(0 0 3px #ffcc33); }
.day-8 .mod[aria-pressed="true"]::after { content:''; position:absolute; inset:0; border:4px solid #ffcc33; border-radius:20px; box-shadow:0 0 0 3px #17394c; }
.day-8 .mod:focus-visible,.day-8 .order-field:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #123f67; }
.day-8 .mod.hint-target { animation:none; box-shadow:0 0 0 4px #ffd54a; }

.day-8 .order-title { display:flex; align-items:center; gap:14px; margin:6px 0 0; font:800 25px/1 'Roboto Condensed',sans-serif; color:#14263a; }
.day-8 .order-title::before,.day-8 .order-title::after { content:''; flex:1; height:2px; background:#8a6c42; }
.day-8 .order-row { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); align-items:center; gap:6px; }
.day-8 .order-arrow { justify-self:center; width:24px; height:22px; background:#5a3a1a; clip-path:polygon(0 33%,52% 33%,52% 4%,100% 50%,52% 96%,52% 67%,0 67%); }
.day-8 .order-field { display:flex; align-items:center; justify-content:center; gap:6px; min-height:64px; padding:3px 6px; border:2px solid #a9784a; border-radius:12px; background:linear-gradient(#fbefd2,#f1dcae); box-shadow:inset 0 2px 5px #8a5d3433; cursor:pointer; color:#14263a; }
.day-8 .order-field img { width:50px; height:auto; flex:none; }
.day-8 .order-field b { font:800 17px/1 'Roboto Condensed',sans-serif; }
.day-8 .order-num { font:800 26px/1 'Roboto Condensed',sans-serif; color:#a9784a88; }

@media (prefers-reduced-motion:no-preference) {
  .day-8 .mod,.day-8 .order-field { transition:transform 150ms var(--ease-out,ease-out),box-shadow 150ms; }
  .day-8 .mod:hover,.day-8 .order-field:hover { translate:0 -2px; }
}

@media (min-width:1251px) {
  .mission-paper.chapter-later.day-8 form { grid-template-columns:minmax(0,.9fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; column-gap:20px; row-gap:4px; }
  .day-8.chapter-later .quest-playfield { display:contents; }
  .day-8 .scanner-unit { grid-column:1; grid-row:1; }
  .day-8 .scanner-build { grid-column:2; grid-row:1; align-self:center; padding-left:6px; border-left:2px solid #8a6c4244; }
  .day-8 .chapter-tools { display:flex; grid-column:1; grid-row:2; justify-content:center; margin:0; }
  .day-8.chapter-later .check-answer { grid-column:2; grid-row:2; width:min(440px,100%); margin:0 auto; }
  /* Selektor muss die globale form>*-Regel (styles.css, Werkzeugzeile) schlagen */
  .mission-paper.chapter-later.day-8 form > .feedback-space { grid-column:2; grid-row:3; min-height:20px; margin:8px 0 0; }
  .day-8 .mod { max-width:152px; }
  .mission-paper.chapter-later.day-8 .check-answer { margin-top:10px; }
  .mission-paper.chapter-later.day-8 form > .clear-link { position:static; grid-column:1; grid-row:3; justify-self:center; align-self:center; }
}

@media (max-width:700px) {
  .day-8 .scanner-build h3 { font-size:26px; }
  .day-8 .scanner-build>p { font-size:16px; }
  .day-8 .order-title { font-size:20px; }
  .day-8 .order-field { flex-direction:column; gap:0; min-height:72px; }
  .day-8 .order-field img { width:40px; }
  .day-8 .order-field b { font-size:14px; }
  .day-8 .order-row { grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); gap:3px; }
  .day-8 .order-arrow { width:16px; }
}