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

/* Briefing: Forschungsnotiz mit Bild aus der Referenz */
.day-10 .world-label { display:none; }
.day-10 form>h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.day-10 .letter-text strong { display:inline; font-weight:400; }
.day-10 .lab-photo.polaroid { padding:10px; }
.day-10 .lab-photo.polaroid::before { left:13%; top:-22px; width:46px; height:48px; }
.day-10 .lab-photo figcaption { display:none; }

/* Spielflaeche: Holzrahmen mit Spurplatten und Beobachtungskarten */
.day-10 .quest-panel { min-height:0; padding:0; background:none; }
.day-10 .later-playfield,.day-10.chapter-later .quest-playfield { min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible; }
.day-10.chapter-later .quest-playfield::before { content:none; }
.day-10 form { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.day-10 .chapter-tools { justify-content:flex-start; gap:12px; margin:0; }
.day-10 .chapter-tools .tool-button { min-width:0; min-height:48px; padding-inline:16px; font-size:20px; }
.day-10 .feedback-space { min-height:0; }
.day-10 .check-answer { justify-self:center; width:min(480px,100%); }

/* Spielbrett: Holzbrett mit sechs Spurplatten oben und acht Beobachtungskarten unten (CSS, Bilder: Tierfotos und Kartenrahmen aus den Assets) */
.day-10 .trace-wrap { width:min(100%,980px); margin-inline:auto; --sand:#d4b684; }
.trace-board { position:relative; padding:30px 16px 14px; border:3px solid #2a1a0c; border-radius:16px; background:linear-gradient(#5b3b20,#3d2615); box-shadow:inset 0 0 0 2px #8f6335,0 5px 12px #0007; }
.trace-tag { margin:0; padding:3px 26px 5px; border-radius:4px 14px 4px 14px; background:linear-gradient(#f6e4bd,#e9cf9c); color:#2a1a0c; font:italic 700 clamp(16px,1.6vw,21px)/1.2 Georgia,serif; box-shadow:0 2px 5px #0007,inset 0 0 0 1px #b88f55; text-align:center; white-space:nowrap; }
.trace-tag-top { position:absolute; left:50%; top:-16px; translate:-50% 0; z-index:2; }
.trace-plates { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.trace-plate { position:relative; display:grid; place-items:center; aspect-ratio:640/440; min-height:70px; padding:0; border:0; cursor:pointer; background:none; border-radius:14px; box-shadow:none; }
.trace-print { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 4px 4px #000a); }
.trace-no { position:absolute; left:6%; bottom:8%; z-index:2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#ffcc55; color:#1d1409; border:2px solid #5a3a12; font-size:19px; font-weight:800; box-shadow:0 2px 4px #0008; }
.print-lo { fill:#7a5830; color:#7a5830; }
.print-hi { fill:#f6e5c0; color:#f6e5c0; }
.print-mask * { fill:var(--sand); stroke:var(--sand); stroke-width:7px; stroke-linejoin:round; }
.trace-plate[aria-pressed="true"] .trace-print { filter:drop-shadow(0 0 3px #ffcc55) drop-shadow(0 0 3px #ffcc55) drop-shadow(0 0 12px #ffcc55aa); }
.trace-plate.is-paired .trace-print { filter:drop-shadow(0 0 2px var(--pair)) drop-shadow(0 0 2px var(--pair)) drop-shadow(0 4px 4px #000a); }
.trace-plate.is-paired .trace-no { background:var(--pair); color:#fff; border-color:#fff; }
.trace-plate:focus-visible,.trace-card:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #123f67; }
.trace-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.trace-links .thread { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:none; }
.trace-links .thread-shade { fill:none; stroke:#000; stroke-opacity:.55; stroke-width:7.5; stroke-linecap:round; }
.trace-links circle { stroke:#fff; stroke-width:2; }

.trace-cards { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin-top:clamp(34px,5vw,60px); }
.trace-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; overflow:visible; justify-items:center; gap:2px; min-height:150px; padding:22px 10px 26px; border:1px solid transparent; border-image:url(../../assets/daily/day-10/karte-leer.webp) 90 fill / 20px stretch; background:none; color:#2a1a0c; cursor:pointer; filter:drop-shadow(0 4px 4px #0008); }
.trace-name { grid-row:1; font:700 clamp(17px,1.35vw,22px)/1 'Dancing Script',cursive; white-space:nowrap; max-width:100%; }
.trace-animal { grid-row:2; width:100%; height:auto; aspect-ratio:180/108; object-fit:cover; border:1px solid #8a6c42; border-radius:3px; box-shadow:0 1px 3px #0005; }
.trace-nophoto { display:block; background:linear-gradient(#e6d0a2,#d6bb87); }
.trace-badge { position:absolute; right:50%; translate:50% 0; bottom:8px; padding:1px 9px; border-radius:12px; background:var(--pair); color:#fff; border:2px solid #fff; font-size:15px; font-weight:700; }
.trace-card.is-paired { filter:drop-shadow(0 0 0 transparent) drop-shadow(0 4px 4px #0008); outline:3px solid var(--pair); outline-offset:1px; border-radius:8px; }
.trace-card:not(:disabled):hover { filter:brightness(1.05) drop-shadow(0 4px 4px #0008); }
.trace-help { margin:6px 0 0; color:#3a2410; font:italic 17px/1.2 Georgia,serif; text-align:center; }

/* Prüfergebnis: richtige Fäden grün, falsche rot gestrichelt; Karten und Nummern passend */
.trace-links .thread-bad { stroke-dasharray:3 9; }
.trace-plate.v-ok .trace-print { filter:drop-shadow(0 0 2px #2fa85a) drop-shadow(0 0 3px #2fa85a) drop-shadow(0 4px 4px #000a); }
.trace-plate.v-bad .trace-print { filter:drop-shadow(0 0 2px #e0392e) drop-shadow(0 0 3px #e0392e) drop-shadow(0 4px 4px #000a); }
.trace-plate.v-ok .trace-no { background:#2fa85a; } .trace-plate.v-bad .trace-no { background:#e0392e; }
.trace-card.v-ok { outline-color:#2fa85a; } .trace-card.v-bad { outline-color:#e0392e; outline-style:dashed; }
.trace-card.v-ok .trace-badge { background:#2fa85a; } .trace-card.v-bad .trace-badge { background:#e0392e; }
/* Zusatzfrage: gemalte Sammelplatte mit sich ueberdeckenden Abdruecken (Codex) und die Tierkarten als Antworten, gleiche Karten wie in Runde 1 */
.trace-last .trace-board { padding:34px 16px 16px; }
.trace-last-grid { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-items:center; gap:14px; }
.trace-slab { position:relative; width:min(100%,480px); aspect-ratio:3/2; }
.trace-slab img { display:block; user-select:none; pointer-events:none; }
.trace-slab-bg { width:100%; height:100%; filter:drop-shadow(0 6px 8px #0008); }
.trace-print-layer { position:absolute; left:var(--x); top:var(--y); width:38%; height:auto; translate:-50% -50%; rotate:var(--r); filter:drop-shadow(0 1px 1px #3a1f0a66); }
.trace-picks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; }
.trace-pick { min-height:150px; }
.trace-last .trace-help { margin-top:8px; }

@media (prefers-reduced-motion:no-preference) {
  .trace-plate,.trace-card { transition:translate 150ms var(--ease-out),box-shadow 150ms var(--ease-out); }
  .trace-plate:hover,.trace-card:hover { translate:0 -2px; }
}

@media (min-width:1251px) {
  .trace-last-grid { grid-template-columns:minmax(0,440px) minmax(0,320px); justify-content:center; gap:34px; }
  .trace-slab { width:100%; }
  .trace-picks { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(0,150px); }
  .mission-paper.chapter-later.day-10 { height:770px; grid-template-rows:220px minmax(0,1fr); }
  .day-10 .compact-briefing { height:220px; }
  .day-10 .compact-briefing .lab-photo.polaroid { height:216px; }
  .day-10 .compact-briefing .letter-text { font-size:21px; line-height:1.22; }
  .day-10 .compact-briefing .salutation { font-size:34px; margin-bottom:0; }
  .day-10 .compact-briefing .signature { font-size:30px; margin-block:0; }
  .mission-paper.chapter-later.day-10 form { grid-template-columns:minmax(0,1fr) 500px; grid-template-rows:minmax(0,1fr) auto auto; align-content:start; gap:8px 20px; }
  .day-10 .quest-playfield { grid-column:1 / -1; grid-row:1; padding-top:10px; }
  .day-10 .chapter-tools { grid-column:1; grid-row:2; align-self:center; }
  .day-10 .check-answer { grid-column:2; grid-row:2; width:100%; margin:0; }
  .day-10 .feedback-space { grid-column:1 / -1; grid-row:3; }
}

@media (max-width:1250px) {
  /* Spuren links, Tierkarten rechts: Faden von Platte zu Karte liegt waagerecht im Zwischenraum */
  .day-10 .trace-wrap:not(.trace-last) .trace-board { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); column-gap:clamp(40px,12vw,150px); padding:30px 14px 14px; }
  .trace-wrap:not(.trace-last) .trace-plates { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(6,minmax(0,1fr)); gap:8px; height:clamp(540px,60vh,640px); }
  .trace-wrap:not(.trace-last) .trace-plate { justify-self:end; width:auto; height:100%; max-width:100%; aspect-ratio:640/440; min-height:0; }
  .trace-wrap:not(.trace-last) .trace-cards { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(8,minmax(0,1fr)); gap:6px; height:clamp(540px,60vh,640px); margin-top:0; }
  .trace-wrap:not(.trace-last) .trace-card { grid-template-columns:minmax(0,46%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; justify-items:start; gap:10px; min-height:0; padding:8px 14px 8px 16px; border-image-width:14px; }
  .trace-wrap:not(.trace-last) .trace-animal { grid-row:1; grid-column:1; height:100%; max-height:100%; }
  .trace-wrap:not(.trace-last) .trace-name { grid-row:1; grid-column:2; font-size:clamp(20px,3vw,28px); }
  .trace-wrap:not(.trace-last) .trace-badge { right:10px; top:6px; bottom:auto; translate:none; padding:0 7px; font-size:13px; }
}
@media (max-width:700px) {
  .trace-picks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .day-10 .trace-wrap { margin-top:14px; }
  .trace-board { padding:28px 10px 12px; }
  .day-10 .trace-wrap:not(.trace-last) .trace-board { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:44px; }
  .trace-wrap:not(.trace-last) .trace-plates,.trace-wrap:not(.trace-last) .trace-cards { height:560px; }
  .trace-tag { font-size:15px; padding-inline:16px; }
  .trace-wrap:not(.trace-last) .trace-card { padding:6px 8px 6px 12px; gap:6px; }
  .trace-wrap:not(.trace-last) .trace-name { font-size:16px; }
  .trace-wrap:not(.trace-last) .trace-badge { font-size:11px; padding:0 5px; border-width:1px; }
  .day-10 .chapter-tools .tool-button { flex:1 1 140px; }
}