/* ============================================================================
   MULTI-FALL — Fall-Auswahl, Cyberpunk-Skin (Fall 2), neue Rätsel, ICE-Duell.
   Wird NACH styles.css geladen und überschreibt gezielt (Theme via body[data-theme]).
   ============================================================================ */

/* ── Fall-Auswahl (Landing) ── */
.caseselect{padding-bottom:28px}
.casegrid{display:flex;flex-direction:column;gap:14px;width:100%;max-width:520px;margin-top:20px}
.casecard{position:relative;display:grid;grid-template-columns:104px 1fr;text-align:left;cursor:pointer;
  border:1px solid var(--gold-dim);border-radius:15px;overflow:hidden;background:linear-gradient(180deg,#1b2027 0%,#11151a 100%);
  color:var(--ink);padding:0;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .16s ease,box-shadow .24s ease,border-color .24s ease;
  animation:wcRise .5s cubic-bezier(.2,.7,.2,1) backwards}
.casecard:nth-child(2){animation-delay:.09s}
.casecard:nth-child(3){animation-delay:.18s}
.casecard:hover,.casecard:focus-visible{outline:none;transform:translateY(-3px);border-color:var(--gold-soft);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.casecard:active{transform:translateY(-1px) scale(.995)}
.cc-cover{position:relative;overflow:hidden;background:#0a0c0e}
.cc-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) contrast(1.05);transition:filter .3s ease}
.casecard:hover .cc-cover img{filter:grayscale(0) contrast(1.1)}
.cc-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(17,21,26,.95) 100%)}
.cc-body{display:flex;flex-direction:column;padding:14px 16px 13px 12px;min-width:0}
.cc-era{font-family:var(--display);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cc-title{font-family:var(--display);font-size:1.15rem;letter-spacing:.06em;color:var(--gold-soft);margin:3px 0 1px;line-height:1.2}
.cc-sub{font-size:.86rem;color:var(--ink);opacity:.85}
.cc-tag{font-size:.82rem;color:var(--muted);margin-top:7px;font-style:italic;line-height:1.4}
.cc-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cc-players{font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.cc-go{margin-left:auto;font-family:var(--display);font-size:.74rem;letter-spacing:.1em;color:var(--gold-soft)}
.cc-badge{margin-left:auto;font-family:var(--display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:#1a1407;background:linear-gradient(180deg,var(--gold-soft),var(--gold));padding:3px 9px;border-radius:999px}
.casecard.active{border-color:var(--gold-soft);box-shadow:0 0 0 1px rgba(227,200,121,.35),0 14px 36px rgba(0,0,0,.55)}
.casecard[data-theme=cyber]{border-color:rgba(34,211,238,.45)}
.casecard[data-theme=cyber] .cc-title,.casecard[data-theme=cyber] .cc-go{color:#5eead4}
.casecard[data-theme=cyber]:hover{border-color:#22d3ee;box-shadow:0 16px 42px rgba(34,211,238,.18)}

/* ── Cyberpunk-Skin (Fall 2) ── */
body[data-theme=cyber]{
  --bg:#070a0f; --bg2:#0a1018; --panel:#0e1620; --panel2:#132030;
  --gold:#22d3ee; --gold-soft:#5eead4; --gold-dim:#1b6b7a;
  --elli:#f472b6; --ink:#dbeafe; --muted:#8aa0b8; --line:#1b2836;
  --red:#fb3b6e; --green:#34d399;
}
body[data-theme=cyber] .title,body[data-theme=cyber] h1,body[data-theme=cyber] h2,body[data-theme=cyber] h3{
  text-shadow:0 0 18px rgba(34,211,238,.28)}
body[data-theme=cyber] .btn-primary{background:linear-gradient(180deg,#5eead4,#22d3ee);color:#04121a;border-color:#5eead4;
  box-shadow:0 6px 22px rgba(34,211,238,.3)}
body[data-theme=cyber] .wcard{background:linear-gradient(180deg,#101c28 0%,#0a121a 100%);border-color:rgba(34,211,238,.3)}
body[data-theme=cyber] .wcard::before{border-color:rgba(34,211,238,.16)}
body[data-theme=cyber] .panel{background:rgba(14,22,32,.86);border-color:rgba(34,211,238,.22)}
body[data-theme=cyber] .bg::after{background:linear-gradient(180deg,rgba(7,10,15,.72),rgba(7,10,15,.93))}
/* Dezente Scanlines über dem Hintergrund */
body[data-theme=cyber] .bg::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(34,211,238,.045) 0 1px,transparent 1px 3px)}
body[data-theme=cyber] .emblem{filter:drop-shadow(0 0 12px rgba(34,211,238,.45))}
body[data-theme=cyber] .wcard-ask{border-color:rgba(244,114,182,.45);background:linear-gradient(180deg,#1c1220 0%,#120a16 100%)}
body[data-theme=cyber] .wcard-ask .wc-ord,body[data-theme=cyber] .wcard-ask .wc-eyebrow{color:var(--elli)}

/* Fall-2-Hintergründe. Die JPGs bleiben als Poster: bei „Bewegung reduzieren", vor dem ersten
   Abspielen und wenn der Autoplay-Schutz das Video blockiert, ist immer noch das Bild da. */
body[data-theme=cyber] .bg-crime{background-image:url('/assets/ice/backgrounds/nest.jpg')}
body[data-theme=cyber] .bg-foyer{background-image:url('/assets/ice/backgrounds/skyline.jpg')}
body[data-theme=cyber] .bg-duel{background-image:url('/assets/ice/backgrounds/duel.jpg')}
/* Läuft ein Video, liegt es ÜBER .bg — die Scanlines von .bg::before wären verdeckt.
   Also wandern sie für die Dauer des Videos auf den Verdunkelungs-Layer. */
body[data-theme=cyber] .bgscrim::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(34,211,238,.045) 0 1px,transparent 1px 3px)}

/* ── Rätsel: Latenz-Abgleich ── */
.lat{padding:4px 2px}
.lat-svg{width:100%;height:78px;display:block;background:linear-gradient(180deg,rgba(34,211,238,.06),transparent);
  border:1px solid var(--line);border-radius:10px}
.lat-svg path{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke}
.lat-a{stroke:var(--muted);opacity:.8}
.lat-b{stroke:var(--gold-soft);filter:drop-shadow(0 0 4px var(--gold))}
.lat-legend{display:flex;gap:14px;justify-content:center;margin-top:7px;flex-wrap:wrap}
.lat-k{font-size:.72rem;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.lat-k::before{content:'';width:14px;height:2px;border-radius:2px;background:currentColor}
.lat-kb{color:var(--gold-soft)}
.lat-read{text-align:center;font-family:var(--display);letter-spacing:.08em;margin:10px 0 2px;color:var(--ink)}
.lat-read b{color:var(--gold-soft);font-size:1.25rem}

/* ── Rätsel: Prüfsummen-Audit ── */
.cks{display:flex;flex-direction:column;gap:7px}
.cks-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;text-align:left;
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);
  cursor:pointer;font-family:var(--serif);min-height:44px;transition:border-color .18s,background .18s}
.cks-row:hover:not(:disabled){border-color:var(--gold-dim)}
.cks-t{font-variant-numeric:tabular-nums;color:var(--gold-soft);font-size:.9rem}
.cks-l{font-size:.86rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cks-d{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:var(--muted);letter-spacing:.06em}
.cks-s{font-family:var(--display);font-size:.82rem;color:var(--ink);opacity:.9}
.cks-row.ok{border-color:var(--green);background:rgba(52,211,153,.16)}
.cks-row.bad{border-color:var(--red);background:rgba(251,59,110,.14);animation:rdShake .32s}
.cks-flag{font-weight:700;color:var(--green)}
.cks-flag.bad{color:var(--red)}

/* ── Rätsel: Signal-Triangulation ── */
.tri{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;max-width:340px;margin:2px auto 0}
.tri-c{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.03);
  color:var(--ink);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;min-height:0}
.tri-c.r1{background:rgba(34,211,238,.10)}
.tri-c.r2{background:rgba(34,211,238,.22);border-color:rgba(34,211,238,.35)}
.tri-c.r3{background:rgba(94,234,212,.4);border-color:var(--gold-soft);box-shadow:0 0 12px -2px var(--gold)}
.tri-c.tower{background:rgba(255,255,255,.08);border-color:var(--gold-dim);cursor:default}
.tri-c.ok{background:rgba(52,211,153,.5);border-color:var(--green);color:#fff;font-weight:700}
.tri-c.bad{background:rgba(251,59,110,.35);border-color:var(--red);animation:rdShake .32s}
.tri-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.tri-k{font-size:.72rem;color:var(--muted)}

/* ── ICE-Duell (Finale Fall 2) ── */
.iceduell{padding-bottom:20px}
.ice-board{width:100%;max-width:400px;margin:12px auto 10px;border:1px solid var(--line);border-radius:12px;
  background:rgba(10,16,24,.75);padding:8px;max-height:34vh;overflow:auto}
.ice-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:5px 4px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.ice-row:last-child{border-bottom:none}
.ice-no{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;color:var(--muted)}
.ice-gl{display:flex;gap:5px}
.ice-g{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:rgba(34,211,238,.12);border:1px solid var(--gold-dim);font-size:.95rem;color:var(--gold-soft)}
.ice-g.big{width:38px;height:38px;font-size:1.3rem}
.ice-fb{display:flex;gap:3px;align-items:center}
.pin{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.pin.exact{background:var(--gold-soft);border-color:var(--gold-soft);box-shadow:0 0 7px -1px var(--gold)}
.pin.part{background:transparent;border-color:var(--gold-soft)}
.ice-draft{display:flex;gap:9px;justify-content:center;margin:6px 0 10px}
.ice-slot{width:52px;height:52px;border-radius:11px;border:1px dashed var(--gold-dim);background:rgba(34,211,238,.06);
  color:var(--muted);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ice-slot.filled{border-style:solid;border-color:var(--gold-soft);color:var(--gold-soft);background:rgba(34,211,238,.16)}
.ice-pal{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ice-key{width:48px;height:48px;border-radius:11px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-size:1.35rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ice-key:hover:not(:disabled){border-color:var(--gold-soft);color:var(--gold-soft)}
.ice-key:active{transform:scale(.94)}
.ice-code{margin:10px 0;display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .casecard{animation:none;transition:none}
  .cks-row.bad,.tri-c.bad{animation:none}
}

/* Zurück-Pfeil neben „Weiter" (dezent; erscheint erst ab der zweiten Zeile) */
.advrow{display:flex;gap:8px;align-items:stretch}
.advrow .btn-primary{flex:1}
.advback{flex:0 0 auto;width:52px;min-height:44px;padding:0;font-size:1.4rem;line-height:1;
  color:var(--muted);border-color:var(--line);opacity:.75}
.advback:hover{color:var(--gold-soft);border-color:var(--gold-dim);opacity:1}
/* Wer gerade nicht weiterklicken darf, aber zurückblättern schon: der Platz des „Weiter"-Knopfes
   traegt dann den Wartehinweis, damit der Zurueck-Pfeil nicht allein und verloren dasteht. */
.advwait{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px}
/* Im Regie-Rad sitzt der Pfeil in der Kopfzeile — dort gibt es keine Knopfleiste. */
.whead .whback{width:38px;min-height:38px;font-size:1.2rem;margin-right:8px}

/* ── Verdunkelung über den Video-Hintergründen, je Fall eingefärbt ──────────
   Läuft ein Loop, liegt er ÜBER .bg — das themengefärbte .bg::after ist dann verdeckt, und die
   Verdunkelung muss vom .bgscrim kommen. Ohne diese Regeln bekämen Venedig und Nachtzug einen
   neutralgrauen Schleier statt ihres eigenen Blau bzw. Braun. */
body[data-theme=venezia] .bgscrim{background:linear-gradient(180deg,rgba(10,13,24,.72),rgba(10,13,24,.94)),
  radial-gradient(120% 90% at 50% 34%,transparent 40%,rgba(6,9,18,.5) 100%)}
body[data-theme=nacht] .bgscrim{background:linear-gradient(180deg,rgba(11,16,22,.74),rgba(11,16,22,.95)),
  radial-gradient(120% 90% at 50% 34%,transparent 40%,rgba(7,11,16,.5) 100%)}
body[data-theme=cyber] .bgscrim{background:linear-gradient(180deg,rgba(7,10,15,.72),rgba(7,10,15,.93)),
  radial-gradient(120% 90% at 50% 34%,transparent 40%,rgba(4,7,11,.5) 100%)}

/* ── HUD: ein Knopf oben rechts statt vier Buttons über dem Spieltext ── */
.hudwrap{position:fixed;top:max(8px,env(safe-area-inset-top));right:8px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hud-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(12,16,20,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;opacity:.8;transition:opacity .2s,border-color .2s}
.hud-toggle:hover,.hud.open + .hud-toggle{opacity:1;border-color:var(--gold-dim)}
.hud{display:none;flex-direction:column;align-items:stretch;gap:7px;padding:9px;min-width:186px;
  border-radius:14px;border:1px solid var(--line);background:rgba(10,13,16,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 38px rgba(0,0,0,.6);
  animation:hudIn .16s ease-out}
.hud.open{display:flex}
@keyframes hudIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Die Optionen im Menü: einheitliche, beschriftete Zeilen (vorher lose Icons am Bildrand) */
.hud .hud-item{position:static;top:auto;right:auto;left:auto;width:100%;height:auto;min-height:42px;
  border-radius:10px;padding:9px 12px;font-size:.86rem;font-family:var(--serif);letter-spacing:.01em;
  display:flex;align-items:center;justify-content:flex-start;gap:.5em;white-space:nowrap;opacity:1;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer}
.hud .hud-item:hover{border-color:var(--gold-dim);color:var(--gold-soft)}
.hud .speaker-btn.on{color:#1a1407;border-color:var(--gold-soft);
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));font-weight:700}
body[data-theme=cyber] .hud .speaker-btn.on{color:#04121a}
body.admin-open .hudwrap{display:none}
/* Platz für den HUD-Knopf reservieren, damit er nie auf dem Text liegt */
.screen{padding-top:max(54px,calc(env(safe-area-inset-top) + 46px))}

/* ── Rätsel: Tatort rekonstruieren (Schalter statt Bilderwahl) ── */
.rc-illus{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:12px;max-height:32vh}
.rc-illus img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25) contrast(1.05)}
.rc{display:flex;flex-direction:column;gap:11px}
.rc-row{display:flex;flex-direction:column;gap:6px}
.rc-lbl{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rc-opts{display:flex;gap:7px;flex-wrap:wrap}
.rc-opt{flex:1 1 auto;min-width:96px;min-height:44px;padding:9px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:var(--serif);font-size:.88rem;
  transition:border-color .18s,background .18s,color .18s}
.rc-opt:hover:not(:disabled){border-color:var(--gold-dim)}
.rc-opt.on{border-color:var(--gold-soft);color:var(--gold-soft);background:rgba(34,211,238,.14);font-weight:600}
.rc-opt.ok{border-color:var(--green);color:#fff;background:rgba(52,211,153,.35)}

/* ============================================================================
   FALL 3 — DIE STUNDE DER TOTEN (Venedig 1783)
   Skin „venezia": Gold/Karmin auf Nachtblau + Damast. Eigene Rätsel, Demaskierung.
   ============================================================================ */
.casecard[data-theme=venezia]{border-color:rgba(201,79,99,.5)}
.casecard[data-theme=venezia] .cc-title,.casecard[data-theme=venezia] .cc-go{color:#e78fa0}
.casecard[data-theme=venezia]:hover{border-color:#c94f63;box-shadow:0 16px 42px rgba(201,79,99,.2)}

body[data-theme=venezia]{
  --bg:#0a0d18; --bg2:#101528; --panel:#141a2e; --panel2:#1b2340;
  /* Akzent = KARMIN (Siegelwachs, Masken) — das Antikgold gehoerte auf der Startseite drei Faellen
     gleichzeitig. Die alte Zweifarbigkeit Gold+Karmin bleibt, nur vertauscht: Gold ist jetzt der
     Nebenton der Inquisitorin (--elli) und der Verhoer-Karte. */
  --gold:#c94f63; --gold-soft:#e78fa0; --gold-dim:#6e2a37;
  --ink:#f0e6d6; --muted:#9d94a8; --elli:#d9b36a;
}
body[data-theme=venezia] .title,body[data-theme=venezia] h1,body[data-theme=venezia] h2,body[data-theme=venezia] h3{
  text-shadow:0 0 22px rgba(201,79,99,.26)}
body[data-theme=venezia] .btn-primary{background:linear-gradient(180deg,#e78fa0,#a53a4e);color:#1c0b10;border-color:#e78fa0;
  box-shadow:0 6px 22px rgba(201,79,99,.3)}
body[data-theme=venezia] .wcard{background:linear-gradient(180deg,#1a2138 0%,#111629 100%);border-color:rgba(201,79,99,.3)}
body[data-theme=venezia] .wcard::before{border-color:rgba(201,79,99,.16)}
body[data-theme=venezia] .panel{background:rgba(20,26,46,.88);border-color:rgba(201,79,99,.24)}
body[data-theme=venezia] .bg::after{background:linear-gradient(180deg,rgba(10,13,24,.7),rgba(10,13,24,.94))}
/* Damast-Textur statt Neon-Scanlines */
body[data-theme=venezia] .bg::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 25% 25%,rgba(201,79,99,.06) 0 8px,transparent 9px),
                   radial-gradient(circle at 75% 75%,rgba(201,79,99,.06) 0 8px,transparent 9px);
  background-size:64px 64px}
body[data-theme=venezia] .emblem{filter:drop-shadow(0 0 14px rgba(201,79,99,.45))}
body[data-theme=venezia] .wcard-ask{border-color:rgba(217,179,106,.5);background:linear-gradient(180deg,#231325 0%,#170d18 100%)}
body[data-theme=venezia] .wcard-ask .wc-ord,body[data-theme=venezia] .wcard-ask .wc-eyebrow{color:#d9b36a}
body[data-theme=venezia] .bg-crime{background-image:url('/assets/venedig/backgrounds/bibliothek.jpg')}
body[data-theme=venezia] .bg-foyer{background-image:url('/assets/venedig/backgrounds/palazzo.jpg')}
body[data-theme=venezia] .bg-duel{background-image:url('/assets/venedig/backgrounds/piazza.jpg')}

/* ── Rätsel: Die Kerzen (candle) ── */
.cnd{border:1px solid var(--gold-dim);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.24)}
.cnd-lit{padding:8px 12px;font-family:var(--display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-soft);background:rgba(212,162,76,.1);border-bottom:1px solid var(--gold-dim)}
.cnd-head,.cnd-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:9px 12px;align-items:center}
.cnd-head{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.07)}
.cnd-row+.cnd-row{border-top:1px solid rgba(255,255,255,.06)}
.cnd-l{font-size:.88rem}
.cnd-r{font-size:.78rem;color:var(--muted);white-space:nowrap}
.cnd-b{font-family:var(--display);font-size:.95rem;color:var(--gold-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.cnd-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.cnd-opt{padding:13px 10px;border-radius:11px;border:1px solid var(--gold-dim);background:var(--panel);color:var(--ink);
  font-family:var(--display);font-size:.95rem;letter-spacing:.05em;cursor:pointer;min-height:48px;transition:.16s}
.cnd-opt:not(:disabled):hover{border-color:var(--gold-soft);transform:translateY(-1px)}
.cnd-opt.ok{border-color:#4ade80;background:rgba(74,222,128,.16);color:#bbf7d0}
.cnd-opt.bad{border-color:#f87171;background:rgba(248,113,113,.14);color:#fecaca}

/* ── Rätsel: Die Glocken (bells) ── */
.bel{margin:6px 0 2px}
.bel-strip{position:relative;height:76px;border:1px solid var(--gold-dim);border-radius:12px;
  background:linear-gradient(180deg,rgba(212,162,76,.07),rgba(0,0,0,.3))}
.bel-s{position:absolute;bottom:14px;width:3px;height:44px;margin-left:-1.5px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));box-shadow:0 0 8px rgba(212,162,76,.5)}
.bel-axis{display:flex;justify-content:space-between;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:5px;padding:0 2px}
.bel-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.bel-opt{min-width:56px;min-height:52px;padding:12px 8px;border-radius:11px;border:1px solid var(--gold-dim);
  background:var(--panel);color:var(--ink);font-family:var(--display);font-size:1.25rem;cursor:pointer;transition:.16s}
.bel-opt:not(:disabled):hover{border-color:var(--gold-soft);transform:translateY(-1px)}
.bel-opt.ok{border-color:#4ade80;background:rgba(74,222,128,.16);color:#bbf7d0}
.bel-opt.bad{border-color:#f87171;background:rgba(248,113,113,.14);color:#fecaca}

/* ── Rätsel: Das Maskenregister (maskgrid) ── */
.mg{display:flex;flex-direction:column;gap:4px;overflow-x:auto}
.mg-row{display:grid;grid-template-columns:minmax(76px,1fr) repeat(var(--cols),minmax(46px,54px));gap:4px;align-items:stretch}
.mg-head .mg-cl{font-size:.6rem;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:flex-end;justify-content:center;text-align:center;padding-bottom:3px;hyphens:auto}
.mg-rl{display:flex;align-items:center;font-size:.82rem;color:var(--ink);padding-right:4px}
.mg-c{min-height:46px;border-radius:9px;border:1px solid var(--gold-dim);background:rgba(0,0,0,.28);
  color:var(--ink);font-size:1.1rem;cursor:pointer;transition:.14s}
.mg-c:not(:disabled):hover{border-color:var(--gold-soft)}
.mg-c.yes{border-color:#4ade80;background:rgba(74,222,128,.2);color:#bbf7d0}
.mg-c.no{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.1);color:#fca5a5}
.mg-hints{margin:14px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.mg-hints li{font-size:.84rem;color:var(--ink);opacity:.9;line-height:1.45}

/* ── Finale: Die Demaskierung (unmask) ── */
.unmaskscene{gap:2px}
.um-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:440px;margin:14px 0 4px}
.um-fig{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 5px 9px;border-radius:12px;
  border:1px solid var(--gold-dim);background:linear-gradient(180deg,#1a2138,#111629);color:var(--ink);
  cursor:pointer;transition:.18s;min-height:104px}
.um-fig:not(:disabled):hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.um-mask{font-size:1.7rem;line-height:1}
.um-name{font-size:.66rem;letter-spacing:.05em;color:var(--muted);text-align:center}
.um-badges{display:flex;gap:3px;min-height:16px;margin-top:2px}
.um-b{font-size:.66rem;opacity:.95;filter:grayscale(1)}
.um-b.y{filter:none;text-shadow:0 0 7px rgba(74,222,128,.85)}
.um-b.n{opacity:.22}
.um-fig.out{opacity:.36;border-color:rgba(255,255,255,.09)}
.um-fig.out .um-mask{filter:grayscale(1)}
.um-fig.miss{border-color:#f87171;background:rgba(248,113,113,.1)}
.um-fig.got{border-color:#4ade80;background:rgba(74,222,128,.18);box-shadow:0 0 0 1px rgba(74,222,128,.4),0 12px 30px rgba(74,222,128,.2)}
.um-x{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.um-tests{display:flex;flex-direction:column;gap:7px;width:100%;max-width:440px;margin-top:12px}
.um-test{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:2px 9px;text-align:left;
  padding:11px 13px;border-radius:12px;border:1px solid var(--gold-dim);background:var(--panel);color:var(--ink);
  cursor:pointer;transition:.16s;min-height:56px}
.um-test:not(:disabled):hover{border-color:var(--gold-soft);transform:translateY(-1px)}
.um-ti{grid-row:1/3;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.um-tl{font-family:var(--display);font-size:.9rem;letter-spacing:.05em;color:var(--gold-soft)}
.um-tq{font-size:.78rem;color:var(--muted);line-height:1.4}
.um-test.done{opacity:.62;border-color:rgba(74,222,128,.4)}
.um-td{grid-column:2;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#4ade80;margin-top:3px}
@media(max-width:380px){.um-figs{grid-template-columns:repeat(2,1fr)}}

/* ============================================================================
   FALL 4 — DREI PAAR HÄNDE (Nachtzug 1963)
   Skin „nacht": Stahlblau/Messing, Abteillicht. Weg-, Bürgschafts- und Aufteilungs-Rätsel,
   Dreier-Verhör. Erster Fall mit MEHREREN Schuldigen — daher die Rollen-Anklage.
   ============================================================================ */
.casecard[data-theme=nacht]{border-color:rgba(79,158,111,.45)}
.casecard[data-theme=nacht] .cc-title,.casecard[data-theme=nacht] .cc-go{color:#8fd0a8}
.casecard[data-theme=nacht]:hover{border-color:#4f9e6f;box-shadow:0 16px 42px rgba(79,158,111,.18)}

body[data-theme=nacht]{
  --bg:#0b1016; --bg2:#111823; --panel:#151d28; --panel2:#1d2734;
  /* Akzent = FLASCHENGRUEN — die Farbe der Lok im Artwork. Das Eisblau der Ermittlerin bleibt
     als kalter Kontrast; die warmen Abteilfenster im Hintergrundmuster bleiben Szenerie. */
  --gold:#4f9e6f; --gold-soft:#8fd0a8; --gold-dim:#28563d;
  --ink:#e8e6e1; --muted:#8b93a0; --elli:#7fa8c9;
}
body[data-theme=nacht] .title,body[data-theme=nacht] h1,body[data-theme=nacht] h2,body[data-theme=nacht] h3{
  text-shadow:0 0 20px rgba(79,158,111,.22)}
body[data-theme=nacht] .btn-primary{background:linear-gradient(180deg,#8fd0a8,#3c7d56);color:#0b1710;border-color:#8fd0a8;
  box-shadow:0 6px 22px rgba(79,158,111,.28)}
body[data-theme=nacht] .wcard{background:linear-gradient(180deg,#18212e 0%,#101722 100%);border-color:rgba(79,158,111,.3)}
body[data-theme=nacht] .wcard::before{border-color:rgba(79,158,111,.15)}
body[data-theme=nacht] .panel{background:rgba(21,29,40,.9);border-color:rgba(79,158,111,.22)}
body[data-theme=nacht] .bg::after{background:linear-gradient(180deg,rgba(11,16,22,.72),rgba(11,16,22,.95))}
/* Vorbeiziehende Abteilfenster statt Damast/Scanlines */
body[data-theme=nacht] .bg::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(90deg,transparent 0 62px,rgba(230,192,123,.05) 62px 66px,transparent 66px 128px)}
body[data-theme=nacht] .emblem{filter:drop-shadow(0 0 12px rgba(79,158,111,.4))}
body[data-theme=nacht] .wcard-ask{border-color:rgba(127,168,201,.42);background:linear-gradient(180deg,#132029 0%,#0d161d 100%)}
body[data-theme=nacht] .wcard-ask .wc-ord,body[data-theme=nacht] .wcard-ask .wc-eyebrow{color:#9cc4de}
body[data-theme=nacht] .bg-crime{background-image:url('/assets/nachtzug/backgrounds/abteil.jpg')}
body[data-theme=nacht] .bg-foyer{background-image:url('/assets/nachtzug/backgrounds/zug.jpg')}
body[data-theme=nacht] .bg-duel{background-image:url('/assets/nachtzug/backgrounds/gang.jpg')}

/* Geheime Rollen-Notiz (Fall 4: drei verschiedene Aufträge) */
.secretbox{border-color:var(--gold-dim);text-align:left}

/* ── Rätsel: Der Gang durch den Zug (route) ── */
.rt{display:flex;flex-direction:column;gap:7px}
.rt-n{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;text-align:left;
  padding:12px 14px;border-radius:12px;border:1px solid var(--gold-dim);background:var(--panel);color:var(--ink);
  cursor:pointer;transition:.16s;min-height:54px}
.rt-n:not(:disabled):hover{border-color:var(--gold-soft);transform:translateX(2px)}
.rt-l{font-size:.95rem}
.rt-s{grid-column:1;font-size:.72rem;color:var(--muted)}
.rt-eye{grid-column:2;grid-row:1/3;font-size:1.1rem;opacity:.85}
.rt-n.watched{border-style:dashed;border-color:rgba(248,113,113,.45)}
.rt-n.on{border-color:var(--gold-soft);background:linear-gradient(90deg,rgba(200,150,62,.18),var(--panel))}
.rt-ord{position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:.8rem;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#12100a}
.rt-legend{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.rt-legend li{font-size:.8rem;color:var(--muted)}

/* ── Rätsel: Wer bürgt für wen (vouch) ── */
.vo{display:flex;flex-direction:column;gap:5px}
.vo-head,.vo-r{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:6px}
.vo-head{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 12px 4px}
.vo-r{padding:11px 12px;border-radius:11px;border:1px solid var(--gold-dim);background:var(--panel);
  color:var(--ink);cursor:pointer;transition:.15s;min-height:46px;text-align:left}
.vo-r:not(:disabled):hover{border-color:var(--gold-soft)}
.vo-a{font-size:.9rem}
.vo-b{font-size:.9rem;color:var(--muted);text-align:right}
.vo-arrow{text-align:center;color:var(--gold-dim)}
.vo-r.on{border-color:var(--gold-soft);background:linear-gradient(90deg,rgba(200,150,62,.16),var(--panel))}
.vo-r.on .vo-b{color:var(--ink)}
.vo-r.ring{border-color:#4ade80;background:rgba(74,222,128,.14)}

/* ── Rätsel: Die geteilte Tat (split) ── */
.sp{display:flex;flex-direction:column;gap:7px}
.sp-i{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:13px 14px;border-radius:12px;
  border:1px solid var(--gold-dim);background:var(--panel);color:var(--ink);cursor:pointer;transition:.16s;
  font-size:.9rem;line-height:1.35;min-height:52px}
.sp-i:not(:disabled):hover{border-color:var(--gold-soft)}
.sp-i.sel{border-color:var(--gold-soft);box-shadow:0 0 0 1px rgba(230,192,123,.4)}
.sp-tag{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.75rem;color:#12100a}
.sp-i.paired{border-style:solid}
.sp-i.p0{border-color:#e6c07b} .sp-i.p0 .sp-tag{background:#e6c07b}
.sp-i.p1{border-color:#7fa8c9} .sp-i.p1 .sp-tag{background:#7fa8c9}
.sp-i.p2{border-color:#a3c98f} .sp-i.p2 .sp-tag{background:#a3c98f}

/* ── Finale: Das Dreier-Verhör (trial) ── */
.trialscene{gap:2px}
.tr-roles{display:flex;flex-direction:column;gap:7px;width:100%;max-width:440px;margin:14px 0 4px}
.tr-role{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:1px 10px;text-align:left;
  padding:11px 13px;border-radius:12px;border:1px solid var(--gold-dim);background:var(--panel);color:var(--ink);
  cursor:pointer;transition:.16s;min-height:56px}
.tr-role:not(:disabled):hover{border-color:var(--gold-soft)}
.tr-role.sel{border-color:var(--gold-soft);box-shadow:0 0 0 1px rgba(230,192,123,.45);background:var(--panel2)}
.tr-role.done{opacity:.7;border-color:rgba(74,222,128,.45)}
.tr-ri{grid-row:1/3;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.tr-rl{font-family:var(--display);font-size:.92rem;letter-spacing:.05em;color:var(--gold-soft)}
.tr-rq{font-size:.78rem;color:var(--muted)}
.tr-defs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:440px;margin-top:8px}
.tr-def{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 5px 10px;border-radius:12px;
  border:1px solid var(--gold-dim);background:linear-gradient(180deg,#18212e,#101722);color:var(--ink);
  cursor:pointer;transition:.18s;min-height:104px}
.tr-def:not(:disabled):hover{border-color:var(--gold-soft);transform:translateY(-2px)}
.tr-face{font-size:1.7rem;line-height:1}
.tr-dl{font-family:var(--display);font-size:.84rem;letter-spacing:.04em}
.tr-ds{font-size:.6rem;color:var(--muted);text-align:center;line-height:1.2}
.tr-def.got{border-color:#4ade80;background:rgba(74,222,128,.15)}
.tr-badge{margin-top:3px;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:#4ade80}
.tr-log{display:flex;flex-direction:column;gap:7px;width:100%;max-width:440px;margin-top:12px}
.tr-say{padding:10px 13px;border-radius:11px;border-left:3px solid var(--gold-dim);background:rgba(0,0,0,.26);text-align:left}
.tr-say.ok{border-left-color:#4ade80}
.tr-say.no{border-left-color:#f87171}
.tr-who{display:block;font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:4px}
.tr-say.no .tr-who{color:#fca5a5}
.tr-say p{margin:0;font-size:.86rem;line-height:1.45}
@media(max-width:340px){.tr-defs{grid-template-columns:repeat(2,1fr)}}

/* Bürge von ausserhalb der Neun — dort endet die Kette, also optisch abgesetzt */
.vo-b.ext{font-style:italic;opacity:.72}

/* Raumcode im Spiel — die Gastgeberin muss nicht zur Startseite zurueck, um ihn weiterzugeben */
.roomchip{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:9px 15px;min-height:44px;
  border:1px solid var(--gold-dim);border-radius:999px;background:rgba(0,0,0,.28);cursor:pointer;
  transition:.16s;-webkit-tap-highlight-color:transparent}
.roomchip:hover,.roomchip:focus-visible{border-color:var(--gold-soft);outline:none}
.rc-k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rc-c{font-family:var(--display);font-size:1.06rem;letter-spacing:.24em;color:var(--gold-soft)}
.rc-hint{font-size:.62rem;color:var(--muted);opacity:.75}
@media(max-width:360px){.rc-hint{display:none}}