/* Tag 12: Lichtcode knacken. Gehoert dem zustaendigen web-bauer (KB-ADV-010). Nur Klassen lc-* und Regeln unter .day-12. */

/* Spielfeld: kein Kasten, Lampentafel steht frei auf dem Papier */
.mission-paper.chapter-later.day-12 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-12 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; }
.mission-paper.chapter-later.day-12 .quest-playfield::before { display:none; }
.day-12 .world-label { display:none; }

/* Aufgabenzeile mit Zierlinien links und rechts */
.day-12 form > h2 { display:flex; align-items:center; gap:18px; margin:0 0 8px; color:#1b1710; font-size:26px; font-weight:800; line-height:1.1; text-align:center; }
.day-12 form > h2::before, .day-12 form > h2::after { content:''; flex:1 1 0; min-width:20px; height:2px; background:linear-gradient(90deg,transparent,#6b5232 30%,#6b5232); opacity:.75; }
.day-12 form > h2::after { transform:scaleX(-1); }

.lc-board { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:10px 28px; align-items:center; width:min(100%,860px); margin:0 auto; }
.lc-left { display:grid; gap:4px; padding:8px 12px; border:3px solid #6b5232; border-radius:14px; background:#2a3550; background:linear-gradient(#26324d,#1d2740); color:#f6ead0; box-shadow:inset 0 0 0 2px #0004,0 3px 6px #3b270f55; }
.lc-rows { display:grid; gap:3px; margin:0; padding:0; list-style:none; }

/* Kopf: dieselben Symbole wie in den Zeilen, mit Kurzwort */
.lc-head,.lc-row { display:grid; grid-template-columns:24px 216px minmax(0,1fr); align-items:center; gap:10px; }
.lc-head { padding-bottom:3px; border-bottom:1px solid #f6ead044; font-size:14px; font-weight:700; line-height:1.1; }
.lc-h-lamps { grid-column:1 / 3; }
.lc-head .lc-chip { gap:4px; }
.lc-row { min-height:34px; }
.lc-head svg,.lc-chip svg { flex:none; width:22px; height:22px; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.lc-exact svg,.lc-h-exact svg { stroke:#7fe0a0; }
.lc-near svg,.lc-h-near svg { stroke:#ffc65a; }
.lc-num { font:italic 700 17px/1 Georgia,serif; text-align:center; opacity:.8; }
.lc-lamps { display:flex; flex-wrap:nowrap; gap:8px; }
.lc-score { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lc-chip { display:flex; align-items:center; gap:6px; }
.lc-chip b { font-size:20px; }
.lc-now { display:block; font-size:15px; font-style:italic; opacity:.85; }

/* Lampe: dunkle Scheibe, Symbol in der Lampenfarbe */
.lc-lamp { --c:#e0453a; position:relative; flex:none; display:grid; place-items:center; width:32px; height:32px; margin:0; padding:0; border:2px solid #fff3; border-radius:50%; background:#0e1424; box-shadow:0 0 8px -1px var(--c); color:#fff; }
.lc-lamp svg { width:80%; height:80%; fill:var(--c); stroke:#fff; stroke-width:2.2; stroke-linejoin:round; }
.lc-lamp.is-empty { box-shadow:none; border:2px dashed #f6ead055; background:#0003; }
.lc-future .lc-lamp,.lc-row.is-future { opacity:.45; }
.lc-c0 { --c:#e0453a; } .lc-c1 { --c:#f5c030; } .lc-c2 { --c:#34b35e; } .lc-c3 { --c:#4a8be8; } .lc-c4 { --c:#a86af0; }

/* aktive Zeile: grosse, antippbare Plaetze */
.lc-row.is-active { min-height:56px; padding:3px 0; border-radius:10px; background:#ffffff14; }
.lc-row.is-active .lc-lamp { width:48px; height:48px; cursor:pointer; }
.lc-slot i { font:italic 700 18px/1 Georgia,serif; opacity:.7; }
.lc-slot.is-current { border-color:#ffd25a; box-shadow:0 0 0 4px #ffd25a99,0 0 12px 2px #ffd25a; }
.lc-slot.hint-target { border-color:#fff; box-shadow:0 0 0 4px #fff,0 0 16px 4px #ffd25a; }

/* Farbwahl */
.lc-right { display:grid; gap:10px; align-content:center; }
.lc-task { margin:0; font-size:18px; font-weight:600; line-height:1.25; text-align:center; text-wrap:balance; }
.lc-task b { display:block; font-size:22px; }
.lc-picks { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.lc-pick { position:relative; display:grid; justify-items:center; gap:2px; min-width:44px; min-height:72px; padding:6px 2px 4px; border:2px solid #6b5232; border-radius:12px; background:#fff3cf; color:#2a1a08; font:700 14px/1.1 inherit; cursor:pointer; box-shadow:0 2px 0 #6b523266; }
.lc-pick svg { width:40px; height:40px; padding:4px; border-radius:50%; background:#0e1424; fill:var(--c); stroke:#fff; stroke-width:2.2; stroke-linejoin:round; }
.lc-pick kbd { position:absolute; left:4px; top:3px; font:700 12px/1 inherit; opacity:.6; }
.lc-pick.is-used { background:#e9dcb6; }
.lc-pick:hover { background:#fff8e2; }

.lc-slot:focus-visible,.lc-pick:focus-visible { outline:4px solid #7fd0ff; outline-offset:3px; }
.lc-pick:focus-visible { outline-color:#123f67; }

@media (prefers-reduced-motion:no-preference) {
  .lc-slot { transition:box-shadow 120ms ease; }
  .lc-slot.hint-target { animation:lc-pulse 1.4s ease-in-out 3; }
  @keyframes lc-pulse { 50% { box-shadow:0 0 0 7px #fff,0 0 22px 6px #ffd25a; } }
}

@media (max-width:900px) {
  .day-12 form > h2 { font-size:22px; gap:10px; }
  .lc-board { grid-template-columns:minmax(0,1fr); gap:10px; }
  .lc-left { padding:6px 8px; }
  .lc-head,.lc-row { gap:6px; }
  .lc-head { font-size:12px; }
  .lc-head svg,.lc-chip svg { width:18px; height:18px; }
  .lc-lamps { gap:5px; }
  .lc-lamp { width:30px; height:30px; }
  .lc-lamps { gap:5px; }
  .lc-head,.lc-row { grid-template-columns:22px 199px minmax(0,1fr); }
  .lc-row.is-active .lc-lamp { width:46px; height:46px; }
  .lc-picks { gap:5px; }
}
@media (max-width:520px) {
  .day-12 form > h2 { font-size:19px; }
  .lc-head,.lc-row { grid-template-columns:18px 191px minmax(0,1fr); gap:4px; }
  .lc-row.is-active .lc-lamp { width:44px; height:44px; }
  .lc-now { display:none; }
  .lc-head { font-size:11px; }
  .lc-head .lc-chip { align-items:flex-start; }
  .lc-head svg,.lc-chip svg { width:16px; height:16px; }
  .lc-chip b { font-size:17px; }
  .lc-lamp { width:28px; height:28px; }
}


/* ===== Tag 12, Runde 3 (KB-ADV-010): gemalte Kristalle und Sandsteintafel. Alle Reihen und die Farbwahl im selben Massstab (Kristall 38 px). ===== */
.day-12 .cr-board { display:grid; grid-template-columns:auto 300px; gap:10px 34px; align-items:center; justify-content:center; width:100%; margin:0 auto; }
.day-12 .cr-tafel { box-sizing:border-box; width:500px; padding:28px 35px; color:#2a1a08; background:url('../../assets/daily/day-12/tafel.webp') center/103.2% 107.3% no-repeat; filter:drop-shadow(0 3px 4px #3b270f66); }
.day-12 .cr-row { display:grid; grid-template-columns:22px 182px minmax(0,1fr); align-items:center; gap:10px; }
.day-12 .cr-rows { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.day-12 .cr-row { height:38px; }
.day-12 .cr-num { font:italic 700 17px/1 Georgia,serif; text-align:center; opacity:.75; }
.day-12 .cr-lamps { display:flex; gap:10px; }
.day-12 .cr-score { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.day-12 .cr-chip { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.day-12 .cr-chip b { font:800 19px/1 'Roboto Condensed',sans-serif; }
.day-12 .cr-chip svg { flex:none; width:20px; height:20px; fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.day-12 .cr-exact svg { stroke:#1f7a45; } .day-12 .cr-near svg { stroke:#b36a10; }
.day-12 .cr-now { display:block; font:italic 700 14px/1.1 Georgia,serif; opacity:.7; }
.day-12 .cr-row.is-active { border-radius:10px; background:#fff6;box-shadow:0 0 0 2px #fff6; }
.day-12 .cr-row.is-future { opacity:.55; }

/* Lampe: 38 px Bild; die aktiven Plaetze sind Knoepfe mit 44 px Trefferflaeche und aendern die Zeilenhoehe nicht */
.day-12 .cr-lamp { position:relative; flex:none; display:block; width:38px; height:38px; margin:0; padding:0; border:0; background:none; }
.day-12 .cr-lamp img,.day-12 .cr-pick img { display:block; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 2px 1.5px #2a1a0877); }
.day-12 .cr-slot { width:44px; height:44px; margin:-3px; padding:3px; cursor:pointer; border-radius:50%; color:#f2e3c0; }
.day-12 .cr-slot i { position:absolute; inset:0; display:grid; place-items:center; font:italic 700 17px/1 Georgia,serif; text-shadow:0 1px 2px #000b; }
.day-12 .cr-slot.is-current { box-shadow:0 0 0 3px #ffd25a,0 0 12px 2px #ffd25a; }
.day-12 .cr-slot.hint-target { box-shadow:0 0 0 4px #fff,0 0 16px 4px #ffd25a; }
.day-12 .cr-slot:hover { filter:brightness(1.12); }

/* Farbwahl: derselbe Kristall im selben Massstab, Name darunter */
.day-12 .cr-side { display:grid; gap:12px; align-content:center; justify-items:center; }
.day-12 .cr-task { margin:0; font:600 16px/1.3 inherit; text-align:center; text-wrap:balance; }
.day-12 .cr-task b { font-size:18px; }
.day-12 .cr-picks { box-sizing:border-box; display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:2px; width:100%; padding:10px 8px 8px; background:url('../../assets/daily/day-12/steinplatte.webp') center/100% 100% no-repeat; filter:drop-shadow(0 2px 3px #3b270f55); }
.day-12 .cr-pick { position:relative; display:grid; justify-items:center; gap:3px; min-width:44px; min-height:64px; padding:2px 0 3px; border:0; border-radius:10px; background:none; color:#2a1a08; font:700 14px/1.1 'Roboto Condensed',sans-serif; cursor:pointer; }
.day-12 .cr-pick img { width:38px; height:38px; }
.day-12 .cr-pick kbd { position:absolute; left:2px; top:0; font:700 11px/1 inherit; opacity:.55; }
.day-12 .cr-pick.is-used { opacity:.85; }
.day-12 .cr-pick:hover { background:#fff5; }
.day-12 .cr-legend { display:grid; gap:4px; margin:0; padding:0; list-style:none; font:700 14px/1.2 'Roboto Condensed',sans-serif; color:#2a1a08; }
.day-12 .cr-legend li { display:flex; align-items:center; gap:6px; }
.day-12 .cr-legend svg { flex:none; width:20px; height:20px; fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.mission-paper.chapter-later.day-12 .feedback-space { min-height:28px; }
.day-12 .cr-slot:focus-visible,.day-12 .cr-pick:focus-visible { outline:4px solid #123f67; outline-offset:2px; }

@media (prefers-reduced-motion:no-preference) {
  .day-12 .cr-slot,.day-12 .cr-pick { transition:box-shadow 120ms ease,background 120ms ease; }
  .day-12 .cr-pick:not(.is-used):hover img { translate:0 -2px; }
}

@media (max-width:900px) {
  .day-12 .cr-board { grid-template-columns:minmax(0,1fr); justify-items:center; }
  .day-12 .cr-side { width:min(100%,500px); }
}
@media (max-width:900px) { .mission-paper.chapter-later.day-12 .feedback-space { min-height:48px; } }
@media (max-width:520px) {
  .mission-paper.chapter-later.day-12 .feedback-space { min-height:68px; }
  .day-12 .cr-tafel { width:100%; padding:26px 14px; }
  .day-12 .cr-row { grid-template-columns:16px 170px minmax(0,1fr); gap:6px; }
  .day-12 .cr-lamps { gap:6px; }
  .day-12 .cr-chip svg { width:15px; height:15px; }
  .day-12 .cr-now { display:none; }
}