/* CC-CTD-2026-11: Connect the Dots – Online-Spiel. Stil wie das CBN-Spiel (Orange #c2410c / #ea580c, Creme #fff7ed), helle Buehne. */
.ctd-spiel{
  --ctd-grund:#fff; --ctd-rahmen:#e9e4dc; --ctd-text:#1f2937; --ctd-leise:#6b7280;
  --ctd-punkt:#20242c; --ctd-zahl:#20242c; --ctd-halo:#fff;
  --ctd-linie:#1f4fb8; --ctd-fertig:#1f4fb8; --ctd-stern:#c2410c; --ctd-akzent:#ea580c; --ctd-akzent-dunkel:#9a3412; --ctd-creme:#fff7ed; --ctd-creme-rand:#f3d3b8;
  background:var(--ctd-grund);border:1px solid var(--ctd-rahmen);border-radius:14px;padding:12px;display:grid;gap:10px;margin:10px auto 0;max-width:640px;
  font-family:Inter,system-ui,sans-serif;color:var(--ctd-text);box-sizing:border-box}
.ctd-spiel *{box-sizing:border-box}
.ctd-kopf{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.ctd-titel{font:700 1.05rem/1.25 Inter,system-ui,sans-serif;color:var(--ctd-text);flex:1 1 180px;min-width:0}
.ctd-stand{font:.9rem Inter,system-ui,sans-serif;color:var(--ctd-leise);font-variant-numeric:tabular-nums}
.ctd-werkzeuge{display:flex;gap:6px;flex-wrap:wrap}
.ctd-knopf{font:600 .85rem/1.1 Inter,system-ui,sans-serif;border:1px solid var(--ctd-creme-rand);background:var(--ctd-creme);color:var(--ctd-akzent-dunkel);border-radius:8px;
  padding:0 12px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.ctd-knopf:hover{border-color:var(--ctd-akzent)}
.ctd-knopf.ctd-haupt{background:var(--ctd-akzent);border-color:var(--ctd-akzent);color:#fff}
.ctd-knopf[aria-pressed="true"]{background:#ffedd5;border-color:var(--ctd-akzent)}
.ctd-knopf:focus-visible,.ctd-play:focus-visible,.ctd-svg:focus-visible{outline:2px solid var(--ctd-akzent);outline-offset:2px}
.ctd-balken{height:6px;background:#f1ede6;border-radius:99px;overflow:hidden}
.ctd-balken-in{height:100%;width:0;background:#16a34a;transition:width .3s}
.ctd-frage{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--ctd-creme);border:1px solid var(--ctd-creme-rand);border-radius:10px;padding:8px 10px}
.ctd-frage-text{font:600 .9rem Inter,system-ui,sans-serif;color:var(--ctd-akzent-dunkel);flex:1 1 200px}
.ctd-frage[hidden],.ctd-fertig[hidden],.ctd-hinweis[hidden]{display:none!important}

/* Buehne: ein SVG im Raum 1200 x 1600; Seitenverhaeltnis = Sichtfeld (--ctd-a), hoechstens 74 % der Fensterhoehe */
.ctd-fenster{position:relative;border-radius:8px;background:#fff;border:1px solid #f1ede6;overflow:hidden}
.ctd-buehne{position:relative;width:min(100%,calc(74vh * var(--ctd-a,.75)));aspect-ratio:var(--ctd-a,.75);margin:0 auto;background:#fff;overflow:hidden}
.ctd-svg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.ctd-loesung{opacity:0;transition:opacity .9s ease}
.ctd-loesung.an{opacity:1}
.ctd-linien{fill:none;stroke:var(--ctd-linie);stroke-linecap:round;stroke-linejoin:round}
.ctd-gummi{stroke:var(--ctd-linie);stroke-opacity:.45;stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;pointer-events:none}
.ctd-punkt{fill:var(--ctd-punkt);stroke:var(--ctd-punkt);stroke-width:2px;vector-effect:non-scaling-stroke}
.ctd-eins{fill:var(--ctd-akzent);stroke:var(--ctd-akzent)}
.ctd-punkt.fertig{stroke:var(--ctd-fertig)}
.ctd-stern{fill:var(--ctd-stern);stroke:#fff;stroke-width:.6;stroke-linejoin:round}
.ctd-punkt.fertig,.ctd-stern.fertig{fill:var(--ctd-fertig)}
.ctd-zahlen{pointer-events:none}
.ctd-zahl{fill:var(--ctd-zahl);stroke:var(--ctd-halo);paint-order:stroke;stroke-linejoin:round;font-family:Sniglet,'Comic Sans MS',sans-serif;pointer-events:none;
  transition:opacity .4s}
.ctd-zahl.fertig{opacity:.4}
.ist-fertig .ctd-zahl,.ist-fertig .ctd-punkt,.ist-fertig .ctd-stern{opacity:.3}
.ctd-letzt{fill:none;stroke:var(--ctd-fertig);stroke-width:1.8;vector-effect:non-scaling-stroke;pointer-events:none;opacity:.8}
.ctd-tippring{fill:rgba(234,88,12,.12);stroke:var(--ctd-akzent);stroke-width:3;vector-effect:non-scaling-stroke;pointer-events:none;transform-box:fill-box;transform-origin:center}
.ctd-tippring.puls{animation:ctd-puls .5s ease-in-out 4}
@keyframes ctd-puls{0%,100%{transform:scale(.7);opacity:1}50%{transform:scale(1.35);opacity:.6}}
@keyframes ctd-wackeln{0%,100%{transform:none}25%{transform:translateX(calc(-1 * var(--w,6px)))}75%{transform:translateX(var(--w,6px))}}
.ctd-punkt.wackeln,.ctd-stern.wackeln{animation:ctd-wackeln .25s 2}

/* Uebersichtskarte (Folge-Ansicht) */
.ctd-mini{position:absolute;pointer-events:none;background:#fff;border:1px solid #cfc7bb;border-radius:6px;box-shadow:0 1px 6px rgba(60,40,20,.2);opacity:.92;z-index:2}
.ctd-mini.ecke-ol{left:8px;top:8px}.ctd-mini.ecke-or{right:8px;top:8px}.ctd-mini.ecke-ul{left:8px;bottom:8px}.ctd-mini.ecke-ur{right:8px;bottom:8px}
.ctd-mini-grund{fill:#fff}
.ctd-mini-punkte{fill:none;stroke:#9a9288;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ctd-mini-linie{fill:none;stroke:var(--ctd-linie);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ctd-mini-fenster{fill:rgba(234,88,12,.08);stroke:var(--ctd-akzent);stroke-width:1.6;vector-effect:non-scaling-stroke}

.ctd-konfetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.ctd-hinweis{pointer-events:none;position:absolute;left:50%;top:10px;transform:translateX(-50%);width:max-content;max-width:90%;background:#1f2937;color:#fff;font:.9rem/1.3 Inter,system-ui,sans-serif;padding:8px 12px;border-radius:8px;z-index:4;text-align:center}
.ctd-fertig{display:grid;gap:8px;justify-items:start;background:var(--ctd-creme);border-radius:10px;padding:12px}
.ctd-fertig-text{font:700 1.15rem Inter,system-ui,sans-serif;color:var(--ctd-akzent-dunkel)}
.ctd-fertig-sub{font:.9rem Inter,system-ui,sans-serif;color:#555}

@media (max-width:480px){
  .ctd-spiel{padding:8px;gap:8px;border-radius:12px}
  .ctd-werkzeuge{width:100%}
  .ctd-werkzeuge .ctd-knopf{flex:1 1 0;padding:0 8px;font-size:.82rem}
  .ctd-kopf{gap:4px 10px}
  .ctd-titel{flex:1 1 60%}
}
@media (prefers-reduced-motion:reduce){
  .ctd-punkt.wackeln,.ctd-stern.wackeln{animation:none}.ctd-tippring.puls{animation:none}
  .ctd-balken-in,.ctd-loesung,.ctd-zahl{transition:none}
}
@media print{.ctd-spiel{display:none!important}}

/* Spiel-Seite (play.html) */
.ctd-spielseite .container{max-width:760px}
.ctd-spiel-links{margin:12px 0 0;font:14px/1.5 Inter,system-ui,sans-serif;text-align:center}
.ctd-spiel-links a{color:#c2410c;font-weight:600;text-decoration:none}
.ctd-weitere{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:16px 0 0}
.ctd-weitere .ctd-play{border:1px solid #e9e4dc;border-radius:10px;background:#fff;padding:6px;cursor:pointer;display:grid;gap:4px;font:12px/1.3 Inter,system-ui,sans-serif;color:#1f2937;text-align:left}
.ctd-weitere .ctd-play:hover{border-color:#ea580c}
.ctd-weitere img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}