/* Tag 19: Farben verbinden (KB-ADV-010). Nur Regeln unter .day-19.
   Metallplatte (CSS) mit Raster n x n, Leitungen und Antennen als SVG ueber den Feldknoepfen. Farben zusaetzlich ueber Symbole. */

.mission-paper.chapter-later.day-19 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-19 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; container-type:inline-size; }
.mission-paper.chapter-later.day-19 .quest-playfield::before { display:none; }
.day-19 .later-playfield { padding:0; border:0; }
.day-19 form > h2 { height:0; margin:0; padding:0; overflow:hidden; }

.day-19 .cf-scene { --bs:min(300px, calc(100cqw - 150px)); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 34px; color:#17202c; }
.day-19 .cf-info { width:200px; display:grid; gap:8px; }
.day-19 .cf-info p { margin:0; }
.day-19 .cf-level { font:800 20px/1.1 Roboto,'Roboto Condensed',Arial,sans-serif; }
.day-19 .cf-chips { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.day-19 .cf-chip { display:grid; grid-template-columns:32px 1fr 18px; align-items:center; gap:8px; font:700 16px/1.2 Roboto,Arial,sans-serif; }
.day-19 .cf-chip img { width:32px; height:32px; display:block; }
.day-19 .cf-chip b { color:#1d7a43; font-size:18px; }
.day-19 .cf-chip.is-done span:not(.sr-only) { text-decoration:underline; text-decoration-color:var(--c); text-decoration-thickness:3px; }
.day-19 .cf-free { font:600 16px/1.2 Roboto,Arial,sans-serif; }
.day-19 .cf-free b { font-size:22px; }

/* Platte: gemaltes Bildobjekt (assets/daily/day-19/platte.png), Raster und Kabel liegen darueber */
.day-19 .cf-boardbox { position:relative; padding:calc(var(--bs) * .133); background:url('../../assets/daily/day-19/platte.webp') center / 100% 100% no-repeat; filter:drop-shadow(0 8px 10px #0009); }
.day-19 .cf-board { position:relative; display:grid; grid-template-columns:repeat(var(--n),1fr); grid-template-rows:repeat(var(--n),1fr); gap:0; width:var(--bs); aspect-ratio:1; touch-action:none; user-select:none; }
.day-19 .cf-cell { position:relative; margin:0; padding:0; min-width:0; min-height:0; border:0; border-radius:6px; background:none; box-shadow:inset 0 0 0 1px #0007, inset 1px 1px 0 1px #ffffff14; cursor:pointer; }
.day-19 .cf-cell:focus-visible { z-index:3; background:#ffffff1f; outline:4px solid #fff; outline-offset:-4px; box-shadow:0 0 0 2px #10223c; }
.day-19 .cf-cell.hint-cell { animation:cf-glow 1.3s ease-in-out 3; }
@keyframes cf-glow { 50% { background:#ffd45a55; box-shadow:inset 0 0 0 3px #ffd45a; } }
.day-19 .cf-svg { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
/* Leuchtkabel: Hof, Kern in Farbe, heller Glanzstreifen */
.day-19 .cf-cable polyline { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.day-19 .cf-glow { stroke:var(--c); stroke-width:.62; opacity:.28; filter:blur(.05px); }
.day-19 .cf-core { stroke:var(--c); stroke-width:.34; filter:drop-shadow(0 .03px .03px #000c); }
.day-19 .cf-shine { stroke:#fff; stroke-width:.08; opacity:.5; transform:translate(-.05px,-.05px); }
.day-19 .cf-cable.is-done .cf-glow { opacity:.5; }
.day-19 .cf-end { filter:drop-shadow(0 .04px .05px #000b); }
.day-19 .cf-end.hint-target .cf-ring { animation:cf-ring 1.2s ease-in-out 3; }
@keyframes cf-ring { 50% { stroke-width:.14; } }

.day-19 .cf-controls { width:200px; display:grid; gap:10px; }
.day-19 .cf-tip { margin:0; font:600 16px/1.3 Roboto,Arial,sans-serif; }
.day-19 .cf-controls .tool-button { min-height:44px; justify-content:center; }
.day-19 .cf-controls .tool-button:disabled { opacity:.45; }

@media (prefers-reduced-motion:reduce) {
  .day-19 .cf-cell.hint-cell { animation:none; background:#ffd45a55; box-shadow:inset 0 0 0 3px #ffd45a; }
  .day-19 .cf-end.hint-target .cf-ring { animation:none; stroke-width:.14; }
}

@media (max-width:700px) {
  .day-19 .cf-scene { gap:12px; }
  .day-19 .cf-info,.day-19 .cf-controls { width:min(100%,344px); }
  .day-19 .cf-chips { grid-template-columns:1fr 1fr; gap:4px 12px; }
  .day-19 .cf-scene { --bs:min(300px, calc(100cqw - 70px)); }
}

/* Testphase: Knopf „Lösung zeigen“ (bis 30.11.2026 oder ?test=1) */
.day-19 .cf-solve { border-style:dashed; }
.day-19 .cf-test { margin:-4px 0 0; font:600 13px/1.2 Roboto,Arial,sans-serif; opacity:.7; text-align:center; }