/* ===========================================================
   Diagnostik Odyssey — „Living Comic"
   Stil: Limited-Palette Graphic Novel (uebernommen aus dem
   bestehenden Prototyp), mobil-first, vertikaler Webtoon-Scroll.
   Palette: cremefarbenes Papier, Tusche-Schwarz, Signal-Rot, Teal.
   =========================================================== */

:root{
  --paper:   #efe6d0;
  --paper-2: #e3d7ba;
  --ink:     #1b1714;
  --ink-soft:#3a332c;
  --red:     #c4382b;
  --red-dk:  #8f2419;
  --teal:    #1f6f6a;
  --teal-dk: #134b47;
  --gold:    #c8932b;
  --line: 3px solid var(--ink);
  --bubble-bg: #ffffff;
}

/* ---- Hausschrift „Jarble" (lokal, Comic-/Tusche-Handschrift) ---- */
@font-face{
  font-family:'Jarble';
  src:url("assets/fonts/jarble_reg-webfont.woff2") format("woff2"),
      url("assets/fonts/jarble_reg-webfont.woff")  format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jarble';
  src:url("assets/fonts/jarble_ital-webfont.woff2") format("woff2"),
      url("assets/fonts/jarble_ital-webfont.woff")  format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Jarble';
  src:url("assets/fonts/jarble_boldital-webfont.woff2") format("woff2"),
      url("assets/fonts/jarble_boldital-webfont.woff")  format("woff");
  font-weight:700; font-style:italic; font-display:swap;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; margin:0; }
body{
  background:#b72727;                 /* Spiel-Hintergrund hinter den Panels */
  color:var(--ink);
  font-family:'Jarble', 'Spectral', Georgia, serif;
  overflow:hidden;
  position:relative;
}

/* ---- Papier-/Halbton-Overlays (Print-/Comic-Feel) ---- */
.paper-grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode:multiply;
}
.halftone{
  position:fixed; inset:0; pointer-events:none; z-index:59; opacity:.08;
  background-image:radial-gradient(var(--ink) 22%, transparent 23%);
  background-size:6px 6px;
}

/* ===================== APP-RAHMEN ===================== */
#app{
  height:100%; max-width:520px; margin:0 auto;
  display:flex; flex-direction:column;
  border-left:var(--line); border-right:var(--line);
  background:var(--paper);
  position:relative; z-index:1;
}

/* ===================== HUD ===================== */
#hud{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; gap:8px;
  background:var(--ink); color:var(--paper);
  border-bottom:var(--line);
  flex:0 0 auto;
}
.hud-left{ display:flex; flex-direction:column; line-height:1; }
.logo{ font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1.5px; }
.tag{ font-size:10px; opacity:.7; font-style:italic; margin-top:2px;}
.hud-stats{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end;}
.stat{ font-size:13px; background:var(--paper); color:var(--ink); padding:2px 7px; border-radius:2px; border:2px solid var(--ink); }
.stat b{ font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:.5px;}
.stat.schroeter{ background:var(--red); color:var(--paper); border-color:var(--ink); }
#pauseBtn{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:14px;
  background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  padding:3px 9px; cursor:pointer; border-radius:2px;
}
#pauseBtn:active{ transform:translateY(1px); }

/* ===================== TIMER-BALKEN ===================== */
/* Dezent, Klinik-Aesthetik (kein Videospiel-HUD). Unter dem HUD. */
.timer-bar{
  flex:0 0 auto; height:6px; background:var(--paper-2);
  border-bottom:2px solid var(--ink); position:relative; overflow:hidden;
}
.timer-bar.hidden{ display:none; }
.timer-bar #timerFill,
.timer-bar > span{
  display:block; height:100%; width:100%;
  background:var(--teal); transition:width .1s linear;
}
.timer-bar.urgent > span{ background:var(--red); }

/* ===================== KAMERA-VIEWPORT ===================== */
/* Der Feed ist jetzt ein fester Viewport. Die Panels liegen auf einer
   "Schiene" (#world), die per transform bewegt wird. Eine vertikale
   Wisch-/Scroll-Geste schiebt die Kamera entlang der Schiene — egal ob
   das aktuelle Segment nach UNTEN oder zur SEITE laeuft (siehe comic-scroll.js). */
#feed{
  flex:1 1 auto;
  position:relative;
  overflow:hidden;
  touch-action:none;            /* Gesten steuern wir selbst */
  background:#b72727;           /* Spiel-Hintergrund hinter den Panels */
}
#world{
  position:absolute; top:0; left:0;
  transform:translate3d(0,0,0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#world.dragging{ transition:none; }   /* waehrend Drag/Resize: kein Easing */

/* „Vorhang" beim Rückkehr aus 3D: deckt das alte Panel mit Papierweiß ab,
   bis das nächste Panel generiert + gemountet ist. Liegt über der Schiene,
   aber unter Weiter-Hinweis/Denk-Spinner, damit der Spinner sichtbar bleibt. */
#comicCurtain{
  position:absolute; inset:0; z-index:30;
  background:var(--paper);
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
#comicCurtain.show{ opacity:1; pointer-events:auto; }

/* „Weiter wischen"-Hinweis: erscheint, wenn die Story auf eine Geste wartet. */
#advanceHint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:40; pointer-events:none;
  font-size:22px; line-height:1; color:var(--ink);
  width:38px; height:38px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
#advanceHint.show{ opacity:.92; animation:hintNudge 1.1s ease-in-out infinite; }
@keyframes hintNudge{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(5px); }
}

/* „Figur denkt nach"-Spinner — gleiche Position wie der Weiter-Hinweis. */
#thinkingHint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:41; pointer-events:none;
  min-width:54px; height:38px; padding:0 12px; border-radius:19px;
  background:var(--paper); border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  display:flex; align-items:center; justify-content:center; gap:5px;
  opacity:0; transition:opacity .2s;
}
#thinkingHint.show{ opacity:.96; }
#thinkingHint .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ink);
  animation:thinkBlink 1s ease-in-out infinite;
}
#thinkingHint .dot:nth-child(2){ animation-delay:.16s; }
#thinkingHint .dot:nth-child(3){ animation-delay:.32s; }
@keyframes thinkBlink{
  0%,80%,100%{ transform:translateY(0); opacity:.35; }
  40%        { transform:translateY(-4px); opacity:1; }
}

/* ---- Zelle (wird per JS absolut auf der Schiene platziert) ----
   Stapelt vertikal: [Blasen-Slot] · Bildbox · [Blasen-Slot]. */
.panel-cell{
  position:absolute;
  display:flex; flex-direction:column; align-items:stretch;
}

/* ---- Bildbox: klippt NUR das Bild (nicht die ueberlappende Blase) ---- */
.panel{
  position:relative; width:100%;
  background:var(--bubble-bg);
  border:var(--line);
  box-shadow:5px 5px 0 var(--ink);
  border-radius:2px;
  overflow:hidden;
  animation:panelIn .35s ease;
}

/* ---- Blasen-Slot ueber/unter dem Panel (nur der Zipfel ueberlappt) ---- */
.bubble-slot{ display:flex; padding:0 6px; }
.slot-top{    margin-bottom:-3px; }   /* Blase sitzt knapp ueber dem Panel */
.slot-bottom{ margin-top:-3px; }       /* Blase sitzt knapp unter dem Panel */
.slot-left{   justify-content:flex-start; }
.slot-center{ justify-content:center; }
.slot-right{  justify-content:flex-end; }
@keyframes panelIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* Aspect-Ratios — jedes Panel passt in einen Phone-Screen. */
.aspect-1-1 { aspect-ratio:1 / 1; }
.aspect-4-5 { aspect-ratio:4 / 5; }
.aspect-3-4 { aspect-ratio:3 / 4; }
.aspect-16-9{ aspect-ratio:16 / 9; }

/* Fallback fuer Browser ohne aspect-ratio (alt): mind. Hoehe vorgeben */
@supports not (aspect-ratio: 1 / 1){
  .aspect-1-1, .aspect-4-5, .aspect-3-4 { min-height:300px; }
  .aspect-16-9 { min-height:180px; }
}

.panel-media{ position:absolute; inset:0; display:flex; }
.panel-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Platzhalter (PNG fehlt noch) ---- */
.panel-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:18px; text-align:center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(27,23,20,.05) 14px 28px),
    var(--paper-2);
  border:2px dashed var(--ink-soft);
  color:var(--ink-soft);
}
.panel-placeholder .ph-icon{ font-size:46px; line-height:1; opacity:.5; }
.panel-placeholder .ph-id{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.5px; font-size:14px;
  color:var(--ink); word-break:break-all; line-height:1.2;
  background:var(--paper); padding:3px 8px; border:2px solid var(--ink);
}
.panel-placeholder .ph-meta{ font-size:11px; font-style:italic; opacity:.8; }
.panel-placeholder .ph-note{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:12px;
  color:var(--paper); background:var(--ink); padding:2px 8px; border-radius:2px;
}

/* ---- Overlay-Ebene (Blasen + Captions liegen ueber dem Bild) ---- */
.panel-overlay{ position:absolute; inset:0; pointer-events:none; }
.panel-overlay > *{ pointer-events:auto; }

/* ===================== CAPTION-BOX ===================== */
/* Auktorialer Erzaehltext — rechteckig, oben oder unten (§6.7). */
.caption{
  position:absolute; left:8px; right:8px;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:2px;
  padding:7px 10px; font-size:13.5px; line-height:1.35; font-style:italic;
  box-shadow:3px 3px 0 rgba(27,23,20,.35);
  max-width:calc(100% - 16px);
}
.caption-top{ top:8px; }
.caption-bottom{ bottom:8px; }

/* ===================== SPRECHBLASEN ===================== */
/* Anker (left/top) kommt per Inline-Style aus bubbles.js (rel. 0..1).
   Wir verschieben die Blase so, dass sie vom Anker ausgeht. */
.bubble{
  position:relative;                /* im Slot im Fluss, ueber dem Panel (z-index) */
  max-width:88%;
  z-index:3;                        /* Zipfel ueberlappt das Panel sichtbar */
}
.bubble-who{
  display:block;
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:11px;
  color:var(--red-dk); margin:0 0 3px; text-transform:uppercase; line-height:1;
}
.bubble-line{ display:block; }
.bubble-text{
  position:relative;
  background:var(--bubble-bg); color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:16px;
  padding:8px 12px; font-size:14px; line-height:1.32;
  box-shadow:3px 3px 0 rgba(27,23,20,.30);
}

/* ---- Tail / Zipfel ---- */
/* Realisiert als kleines gedrehtes Quadrat mit derselben Border. */
.bubble-tail{
  position:absolute; width:14px; height:14px;
  background:var(--bubble-bg);
  border:2.5px solid var(--ink);
  /* Standard: nach unten */
  bottom:-9px; left:50%; transform:translateX(-50%) rotate(45deg);
  border-top:none; border-left:none;
}
.tail-down       .bubble-tail{ bottom:-9px; left:50%; transform:translateX(-50%) rotate(45deg); border-top:none; border-left:none; }
.tail-up         .bubble-tail{ top:-9px; left:50%; transform:translateX(-50%) rotate(45deg); border-bottom:none; border-right:none; }
.tail-down-left  .bubble-tail{ bottom:-9px; left:24%; transform:rotate(45deg); border-top:none; border-left:none; }
.tail-down-right .bubble-tail{ bottom:-9px; left:auto; right:24%; transform:rotate(45deg); border-top:none; border-left:none; }
.tail-up-left    .bubble-tail{ top:-9px; left:24%; transform:rotate(45deg); border-bottom:none; border-right:none; }
.tail-up-right   .bubble-tail{ top:-9px; left:auto; right:24%; transform:rotate(45deg); border-bottom:none; border-right:none; }

/* Pager / Off-Stimme: leicht abgesetzter, „technischer" Look */
/* (durch zackige Border-Optik liesse sich das verfeinern — hier dezent) */

/* ---- Dialog-Stapel: Figur-Blase + Spieler-Antwort in EINER Zelle ---- */
/* Die AI-Blase rueckt nach oben; ihr Zipfel wird zur verlaengerten Leitung
   (.conv-leader), die weiterhin zur Figur im Panel zeigt. Darunter sitzt die
   Spieler-Antwort (.bubble-pc), seitlich versetzt, damit die Leitung frei laeuft. */
.conv-stack{
  display:flex; flex-direction:column; width:100%;
}
.conv-stack.side-left  { align-items:flex-start; }
.conv-stack.side-right { align-items:flex-end; }

.bubble.has-leader{ margin-bottom:0; }
.bubble.has-leader .bubble-tail{ display:none; }   /* Zipfel weicht der Leitung */

.conv-bridge{
  position:relative; align-self:stretch;
  padding:9px 0 8px;                 /* vertikaler Lauf der Leitung */
  display:flex;
}
.conv-bridge.side-left  { justify-content:flex-end;   padding-left:34px; }
.conv-bridge.side-right { justify-content:flex-start; padding-right:34px; }

/* Leitung: ein „Hals"-Kasten in der Breite des Dreiecks (weiss gefuellt,
   nur links/rechts Tuschekante) von der AI-Blase bis zum Zipfel — dort
   sitzt das Dreieck (= ehemaliger Zipfel) buendig an und zeigt ins Panel. */
.conv-leader{
  position:absolute; top:-2px; bottom:-5px; width:18px;
  background:var(--bubble-bg);
  border-left:2.5px solid var(--ink);
  border-right:2.5px solid var(--ink);
  z-index:4;
}
.conv-bridge.side-left  .conv-leader{ left:14px; }
.conv-bridge.side-right .conv-leader{ right:14px; }
.conv-leader::after{
  content:''; position:absolute; bottom:-3px; left:50%;
  width:13px; height:13px; background:var(--bubble-bg);
  border:2.5px solid var(--ink); border-top:none; border-left:none;
  transform:translateX(-50%) rotate(45deg);
}

/* Spieler-Antwort: leicht abgesetzt, kein Zipfel. */
.bubble.bubble-pc{ max-width:80%; }
.bubble.no-tail .bubble-tail{ display:none; }
.bubble.bubble-in{ animation:bubbleIn .42s cubic-bezier(.22,1,.36,1); }
@keyframes bubbleIn{ from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;} }

/* ---- Gedankenwolke ---- */
.bubble-thought .bubble-text{
  border-radius:50% / 38%;
  border-style:solid;
}
.bubble-thought .bubble-tail{
  /* Wolken-Zipfel = kleine Punkte statt Dreieck */
  width:9px; height:9px; border-radius:50%;
  background:var(--bubble-bg); border:2.5px solid var(--ink);
  bottom:-6px; left:50%; transform:translateX(-50%);
}
.bubble-thought .bubble-dots{
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%;
  background:var(--bubble-bg); border:2px solid var(--ink);
}

/* ===================== DECISION (Gedanken-Optionen) ===================== */
.decision-cloud{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:2px 4px 4px;
  /* Kraeftiger Auftritt mit Ueberschwingen, damit die Gedankenblasen sofort
     ins Auge fallen. */
  animation:cloudPop .42s cubic-bezier(.18,.89,.32,1.28) both;
}
.decision-option{
  text-align:left; font-family:'Jarble','Spectral',serif; font-size:15.5px; line-height:1.35;
  /* Vor der Auswahl: invertiert (dunkel/teal mit heller Schrift). */
  color:var(--paper); background:var(--teal);
  border:2.5px solid var(--ink);
  padding:13px 16px; cursor:pointer; position:relative;
  /* Wolkige, handgezeichnet wirkende Blasenkontur (unregelmaessige Rundung). */
  border-radius:42px 38px 46px 40px / 30px 34px 28px 32px;
  margin-bottom:22px;   /* Platz fuer die Mini-Wolken-Spur darunter */
  transition:transform .08s, background .25s, color .25s, opacity .4s ease;
  /* Gestaffeltes Auftauchen + kurze Aufmerksamkeits-Pulse danach. */
  animation:
    optionPop .4s cubic-bezier(.18,.89,.32,1.28) both,
    optionPulse 1.1s ease .55s 2;
}
.decision-option:nth-child(1){ animation-delay:.06s, .55s; }
.decision-option:nth-child(2){ animation-delay:.16s, .65s; }
.decision-option:nth-child(3){ animation-delay:.26s, .75s; }
.decision-option:nth-child(4){ animation-delay:.36s, .85s; }
@keyframes cloudPop{
  0%   { opacity:0; transform:translateY(16px) scale(.84); }
  60%  { opacity:1; transform:translateY(-5px) scale(1.04); }
  100% { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes optionPop{
  0%   { opacity:0; transform:translateY(12px) scale(.9); }
  70%  { opacity:1; transform:translateY(-3px) scale(1.035); }
  100% { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes optionPulse{
  0%,100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
  50%     { box-shadow:0 5px 18px rgba(0,0,0,.30); }
}
/* Gedanken-Spur: zwei kleiner werdende Woelkchen UNTER der Blase
   (statt eines Sprechblasen-Zeigers) — klassische Comic-Denkblase. */
.decision-option::before,
.decision-option::after{
  content:''; position:absolute; left:20px;
  background:var(--teal); border:2.5px solid var(--ink);
  border-radius:60% 50% 55% 45% / 60% 55% 50% 45%;
  transition:background .25s, opacity .4s ease;
}
.decision-option::before{ width:16px; height:13px; bottom:-11px; }
.decision-option::after{ width:9px;  height:8px;  bottom:-22px; left:12px; }
.decision-option:hover{ filter:brightness(1.12); }
.decision-option:active{ transform:translate(1px,1px); }
/* Nach der Auswahl: die gewaehlte Blase wird HELL mit dunkler Schrift. */
.decision-option.chosen{ background:var(--bubble-bg); color:var(--ink); border-color:var(--ink); }
.decision-option.chosen::before,
.decision-option.chosen::after{ background:var(--bubble-bg); }
/* Animationen (mit fill-mode both) nach der Auswahl loesen, damit die
   Opacity-Transition (Fade-out) nicht vom Pop-Endwert ueberschrieben wird. */
.decision-option:disabled{ cursor:default; animation:none; }
/* Nicht gewaehlte Optionen blenden nach der Auswahl aus. */
.decision-option:disabled:not(.chosen){ opacity:0; transform:scale(.96); pointer-events:none; }
.decision-option:disabled:not(.chosen)::before,
.decision-option:disabled:not(.chosen)::after{ opacity:0; }
.decision-option.chosen:disabled{ opacity:1; }

/* ===================== EINGABELEISTE ===================== */
#inputBar{
  flex:0 0 auto;
  border-top:var(--line);
  background:var(--paper-2);
  padding:8px 10px;
}
#inputBar.hidden{ display:none; }
/* Bounce-Einblendung: federt nach 3 s von unten ins Bild (Aufmerksamkeit). */
#inputBar.bounce-in{ animation:inputBounceIn .6s cubic-bezier(.18,.89,.32,1.28) both; will-change:transform; }
@keyframes inputBounceIn{
  0%   { transform:translateY(115%); }
  55%  { transform:translateY(-10%); }
  78%  { transform:translateY(4%); }
  100% { transform:translateY(0); }
}
/* Anstupser: wackelt auf und ab, wenn der Spieler weiterwischen will,
   obwohl zuerst eine Eingabe/ein Prompt erwartet wird. */
#inputBar.nudge{ animation:inputNudge .55s ease both; will-change:transform; }
@keyframes inputNudge{
  0%   { transform:translateY(0); }
  18%  { transform:translateY(-14px); }
  38%  { transform:translateY(0); }
  56%  { transform:translateY(-8px); }
  76%  { transform:translateY(0); }
  90%  { transform:translateY(-3px); }
  100% { transform:translateY(0); }
}

.suggestions{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.suggestions:empty{ display:none; }
.suggestion{
  font-family:'Jarble','Spectral',serif; font-size:13px; line-height:1.2;
  background:var(--bubble-bg); color:var(--ink);
  border:2px solid var(--ink); border-radius:14px;
  padding:5px 11px; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
}
.suggestion:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }

#inputForm{ display:flex; gap:8px; }
#playerInput{
  flex:1; font-family:'Jarble','Spectral',serif; font-size:16px;   /* >=16px: kein iOS-Zoom */
  color:var(--ink); background:var(--paper);
  border:2.5px solid var(--ink); border-radius:18px;
  padding:9px 14px; outline:none;
}
#playerInput:focus{ box-shadow:0 0 0 2px var(--teal) inset; }
#sendBtn{
  flex:0 0 auto; width:46px;
  font-size:18px; color:var(--paper); background:var(--red);
  border:2.5px solid var(--ink); border-radius:50%;
  cursor:pointer; box-shadow:3px 3px 0 var(--ink);
}
#sendBtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* ===================== END-CARD ===================== */
.end-card{
  position:absolute;
  padding:26px 18px; text-align:center;
  background:var(--ink); color:var(--paper);
  border:var(--line); border-radius:3px;
  box-shadow:6px 6px 0 var(--red);
  animation:panelIn .4s ease;
}
.end-card .end-kicker{
  font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:13px;
  color:var(--gold); margin-bottom:6px;
}
.end-card h2{ font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:30px; margin:0 0 10px; }
.end-card p{ font-size:15px; line-height:1.5; margin:4px 0; }
.end-card .end-sub{ font-style:italic; opacity:.8; font-size:13px; }
.end-card code{ background:rgba(255,255,255,.12); padding:1px 5px; border-radius:3px; font-size:12px; }
.end-flags{
  margin-top:16px; padding-top:12px; border-top:2px solid rgba(255,255,255,.25);
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:13px; color:var(--gold);
}

/* ===================== STARTSCREEN / MISSIONSAUSWAHL ===================== */
.start-screen{
  position:fixed; inset:0; z-index:90;
  background:var(--paper);
  display:flex; align-items:stretch; justify-content:center;
  overflow:auto;
}
.start-screen.hidden{ display:none; }
.start-inner{
  width:100%; max-width:520px; min-height:100%;
  display:flex; flex-direction:column;
  border-left:var(--line); border-right:var(--line);
  background:var(--paper);
  padding:16px 16px 20px;
}
.start-title{
  font-family:'Bebas Neue',sans-serif; letter-spacing:2px;
  font-size:34px; line-height:1; text-align:center;
  margin:8px 0 16px; color:var(--ink);
}
.start-cards{
  flex:1; display:flex; flex-direction:column; gap:16px;
}
.mode-card{
  position:relative; display:block; flex:1 1 0; min-height:118px;
  padding:0; cursor:pointer; overflow:hidden; appearance:none;
  background:#fff; border:var(--line); border-radius:3px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease;
}
.mode-card img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
}
.mode-title{
  position:absolute; left:0; bottom:0;
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px;
  font-size:21px; line-height:1.05;
  color:var(--paper); background:var(--ink);
  padding:7px 14px; max-width:92%;
  border-top-right-radius:4px;
}
.mode-card:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
@media (hover:hover){
  .mode-card:hover{ box-shadow:8px 8px 0 var(--red); }
}
@media (max-width:360px){
  .start-title{ font-size:28px; }
  .mode-title{ font-size:18px; }
}

/* ===================== PAUSE-OVERLAY ===================== */
.overlay{ position:fixed; inset:0; z-index:80; background:rgba(27,23,20,.78); display:flex; align-items:center; justify-content:center; }
.overlay.hidden{ display:none; }
.overlay-card{ background:var(--paper); border:var(--line); box-shadow:8px 8px 0 var(--red); padding:26px; max-width:340px; text-align:center; border-radius:3px;}
.overlay-card h2{ font-family:'Bebas Neue',sans-serif; letter-spacing:2px; margin:0 0 10px; font-size:30px;}
.overlay-card p{ font-size:15px; line-height:1.5; margin:0 0 18px; }
.btn{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1.5px; font-size:18px;
  border:var(--line); border-radius:2px; padding:11px 16px; cursor:pointer;
  background:var(--paper-2); color:var(--ink); box-shadow:4px 4px 0 var(--ink);
}
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn.primary{ background:var(--red); color:var(--paper); }

/* ===================== RESPONSIVE FEINSCHLIFF ===================== */
@media (max-width:360px){
  .logo{ font-size:17px; }
  .bubble-text{ font-size:13px; }
  .caption{ font-size:12.5px; }
}

/* ============================================================
   WALK3D — 3D-Isometrie-Mini-Game Overlay
   Sitzt über #app (z-index 50, passt unter paper-grain/halftone
   die bei z-index 59/60 liegen).
   ============================================================ */

/* Vollbild-Overlay, papier-farbiger Hintergrund */
#walk3d-layer{
  position:fixed; inset:0; z-index:50;
  background:var(--paper);
  display:flex; align-items:stretch; justify-content:stretch;
  overflow:hidden;
  /* Eigene Touch-Gesten — Comic-Scroll darunter wird blockiert */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}

/* Three.js-Canvas füllt den ganzen Layer */
.walk3d-canvas{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  display:block;
}

/* Joystick-Canvas: transparent, obendrüber, Pointer-Events nur links-unten */
.walk3d-joy{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  pointer-events:none;   /* Gesten laufen über den Layer selbst */
  z-index:2;
}

/* Ziel-/Hinweiszeile (oben, Klinik-Aesthetik) */
.walk-hint{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:5;
  background:var(--ink); color:var(--paper);
  font-family:'Jarble','Spectral',serif; font-size:14px; line-height:1.3;
  padding:6px 16px; border-radius:2px;
  border:2px solid var(--paper);
  box-shadow:3px 3px 0 rgba(27,23,20,.35);
  max-width:90vw; text-align:center;
  pointer-events:none;
}

/* Prompt-Banner (NPC in Reichweite) */
.walk-prompt{
  position:absolute; bottom:140px; left:50%; transform:translateX(-50%);
  z-index:6;
  background:var(--paper); color:var(--ink);
  font-family:'Jarble','Spectral',serif; font-size:15px; line-height:1.35;
  padding:8px 18px; border-radius:16px;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 rgba(27,23,20,.30);
  max-width:88vw; text-align:center;
  animation:walk3dFadeIn .25s ease;
  pointer-events:none;
}

/* Action-Button (groß, rund, rechts unten — Touch-freundlich ≥44px) */
.walk-action-btn{
  position:absolute; right:20px; bottom:80px; z-index:7;
  width:74px; height:74px; border-radius:50%;
  background:var(--teal); color:var(--paper);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(27,23,20,.5);
  font-family:'Jarble','Spectral',serif; font-weight:bold; font-size:13px;
  cursor:pointer; touch-action:manipulation;
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.15; padding:0 6px;
  animation:walk3dFadeIn .2s ease;
  /* Mindestgröße 44px Touch-Target per Spec */
  min-width:44px; min-height:44px;
}
.walk-action-btn:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 rgba(27,23,20,.5);
}

/* Lade-Anzeige */
.walk-loader{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  font-family:'Jarble','Spectral',serif; font-size:16px; letter-spacing:1px;
  color:var(--ink-soft);
}

/* Schwebende Hail-Textzeile (NPC ruft den Spieler an) */
.walk-hail-line{
  position:absolute; top:70px; left:50%; transform:translateX(-50%);
  z-index:6;
  background:var(--bubble-bg); color:var(--ink);
  font-family:'Jarble','Spectral',serif; font-style:italic; font-size:14px;
  line-height:1.3; padding:7px 16px;
  border:2px solid var(--ink); border-radius:14px;
  box-shadow:3px 3px 0 rgba(27,23,20,.25);
  max-width:88vw; text-align:center;
  pointer-events:none;
  animation:walk3dFadeIn .3s ease, walk3dFadeOut .5s ease 4s forwards;
}

@keyframes walk3dFadeIn{
  from{ opacity:0; transform:translateX(-50%) translateY(-8px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes walk3dFadeOut{
  from{ opacity:1; }
  to  { opacity:0; pointer-events:none; }
}

/* ===========================================================
   ER-MINIGAME (ergame.js) — 3D-Raum + Entscheidungs-Modals
   =========================================================== */
#ergame-layer{
  position:fixed; inset:0; z-index:50;
  background:var(--paper);
  overflow:hidden;
  touch-action:none;
}
.ergame-canvas{
  position:absolute; inset:0;
  width:100% !important; height:100% !important; display:block;
}
.ergame-joy{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  pointer-events:none; z-index:2;
}

/* ---- Vitals-HUD (oben rechts) ---- */
.er-vitals{
  position:absolute; top:12px; right:12px; z-index:6;
  background:var(--paper); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:3px;
  box-shadow:3px 3px 0 rgba(27,23,20,.4);
  padding:6px 10px; min-width:128px;
  font-family:'Bebas Neue',sans-serif; letter-spacing:.5px;
}
.er-vitals-title{
  font-family:'Jarble','Spectral',serif; font-size:12px; letter-spacing:0;
  border-bottom:1.5px solid var(--ink); padding-bottom:3px; margin-bottom:4px;
}
.er-vrow{ display:flex; justify-content:space-between; gap:14px; font-size:14px; line-height:1.5; }
.er-vrow span{ opacity:.7; }
.er-vrow b{ font-size:16px; }
.er-vrow.er-v-warn b{ color:var(--gold); }
.er-vrow.er-v-crit b{ color:var(--red); }
.er-vrow.er-v-crit{ animation:erPulse 1s ease-in-out infinite; }
@keyframes erPulse{ 50%{ opacity:.5; } }

/* ---- Objective-Banner (oben Mitte) ---- */
.er-objective{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  z-index:5; max-width:64vw; text-align:center;
  background:var(--ink); color:var(--paper);
  font-family:'Jarble','Spectral',serif; font-size:13px; line-height:1.3;
  padding:6px 16px; border-radius:2px; border:2px solid var(--paper);
}

/* ---- Toast ---- */
.er-toast{
  position:absolute; bottom:150px; left:50%; transform:translateX(-50%);
  z-index:7; max-width:84vw; text-align:center;
  background:var(--paper); color:var(--ink);
  font-family:'Jarble','Spectral',serif; font-size:14px; line-height:1.35;
  padding:8px 16px; border-radius:14px; border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 rgba(27,23,20,.3);
  animation:walk3dFadeIn .25s ease;
}

/* ---- Aktions-Button ---- */
.er-action-btn{
  position:absolute; right:20px; bottom:80px; z-index:7;
  width:88px; height:88px; border-radius:50%;
  background:var(--teal); color:var(--paper);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(27,23,20,.5);
  font-family:'Jarble','Spectral',serif; font-weight:bold; font-size:13px;
  line-height:1.15; padding:6px; cursor:pointer;
}
.er-action-btn[data-idle="1"]{ background:var(--paper-2); color:var(--ink-soft); }
.er-action-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(27,23,20,.5); }

/* ---- Modal ---- */
.er-modal-wrap{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(27,23,20,.35);
  padding:0 12px env(safe-area-inset-bottom,12px);
}
.er-modal{
  position:relative;
  width:100%; max-width:560px; margin-bottom:14px;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); border-radius:6px;
  box-shadow:6px 6px 0 rgba(27,23,20,.5);
  padding:14px 16px 16px;
  max-height:82vh; overflow-y:auto;
  animation:erModalUp .14s ease-out;
}
.er-modal-close{
  position:absolute; top:8px; right:8px; z-index:2;
  width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:20px; line-height:1;
  color:var(--ink); background:var(--paper);
  border:2.5px solid var(--ink); border-radius:4px;
  box-shadow:2px 2px 0 rgba(27,23,20,.4);
  cursor:pointer;
}
.er-modal-close:active{ transform:translate(2px,2px); box-shadow:none; }
@keyframes erModalUp{ from{ transform:translateY(24px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }
.er-modal-head{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:20px;
  color:var(--paper); background:var(--ink);
  padding:5px 12px; border-radius:2px; margin:-4px -4px 10px; display:inline-block;
}
.er-modal-sit{
  font-family:'Jarble','Spectral',serif; font-size:15.5px; line-height:1.4;
  margin:0 0 12px;
}
.er-choices{ display:flex; flex-direction:column; gap:9px; }
.er-choice{
  text-align:left; font-family:'Jarble','Spectral',serif; font-size:15px; line-height:1.32;
  min-height:48px; padding:10px 14px; cursor:pointer;
  color:var(--paper); background:var(--teal);
  border:2.5px solid var(--ink); border-radius:4px;
  box-shadow:3px 3px 0 rgba(27,23,20,.4);
  position:relative;
}
.er-choice:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(27,23,20,.4); }
.er-choice.er-used{ filter:saturate(.5) brightness(.92); }
.er-choice.er-locked{ opacity:.45; box-shadow:none; cursor:default; }
.er-choice[disabled]{ pointer-events:none; }

/* Tags farblich erst NACH Auswahl sichtbar (kein Spoiler vorab) */
.er-choice.er-used.er-tag-green{ background:var(--teal); border-color:var(--ink); }
.er-choice.er-used.er-tag-yellow{ background:var(--gold); color:var(--ink); }
.er-choice.er-used.er-tag-red{ background:var(--red); }

.er-feedback{
  margin-top:12px; padding:10px 12px;
  font-family:'Jarble','Spectral',serif; font-size:14.5px; line-height:1.4;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--paper-2);
}
.er-feedback.er-fb-green{ border-left:6px solid var(--teal); }
.er-feedback.er-fb-yellow{ border-left:6px solid var(--gold); }
.er-feedback.er-fb-red{ border-left:6px solid var(--red); }

.er-modal-foot{ margin-top:12px; display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.er-retry-hint{ font-family:'Jarble','Spectral',serif; font-size:13.5px; color:var(--ink-soft); }
.er-cont-btn{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:16px;
  color:var(--paper); background:var(--ink);
  border:2.5px solid var(--ink); border-radius:3px;
  padding:8px 22px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(27,23,20,.35);
}
.er-cont-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(27,23,20,.35); }

/* ---- Debrief / Lernkarte ---- */
.er-learncard{
  margin-top:14px; padding:12px;
  background:var(--paper-2); border:2.5px dashed var(--ink); border-radius:4px;
}
.er-learncard-title{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.8px; font-size:16px; margin-bottom:5px;
}
.er-learncard-text{ font-family:'Jarble','Spectral',serif; font-size:14.5px; line-height:1.45; }
.er-debrief-good .er-modal-head{ background:var(--teal); }
.er-debrief-bad  .er-modal-head{ background:var(--red); }

/* ---- Loader ---- */
.er-loader{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  font-family:'Jarble','Spectral',serif; font-size:16px; letter-spacing:1px;
  color:var(--ink-soft);
}

/* ---- „Patient befragen"-Button im Bett-Modal ---- */
.er-interview-open{
  display:block; width:100%; margin:0 0 12px;
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:16px;
  color:var(--ink); background:var(--paper-2);
  border:2.5px dashed var(--ink); border-radius:4px;
  padding:10px 14px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(27,23,20,.3);
}
.er-interview-open:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(27,23,20,.3); }

/* ---- Patienten-Interview (Comic-Dialog ueber der 3D-Szene) ---- */
.er-interview{
  position:absolute; inset:0; z-index:25;
  display:flex; flex-direction:column;
  background:var(--paper);
  background-image:radial-gradient(rgba(27,23,20,.10) 22%, transparent 23%);
  background-size:13px 13px;
  padding:10px 12px env(safe-area-inset-bottom,12px);
}
.er-iv-top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.er-iv-back{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:15px;
  color:var(--paper); background:var(--ink);
  border:2.5px solid var(--ink); border-radius:3px;
  padding:7px 14px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(27,23,20,.35);
}
.er-iv-back:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(27,23,20,.35); }
.er-iv-name{
  font-family:'Jarble','Spectral',serif; font-size:14px; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:2px; padding:3px 10px;
}
.er-iv-stage{
  flex:0 0 auto; display:flex; align-items:flex-start; gap:12px; margin-bottom:8px;
}
.er-iv-face{
  flex:0 0 auto; width:104px; height:104px;
  background:var(--paper); border:3px solid var(--ink); border-radius:8px;
  box-shadow:4px 4px 0 rgba(27,23,20,.4);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.er-face-svg{ width:100%; height:100%; display:block; }
.er-iv-faceimg{ width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
.er-iv-bubble{
  flex:1 1 auto; align-self:center;
  font-family:'Jarble','Spectral',serif; font-size:16px; line-height:1.4;
  color:var(--ink); background:var(--paper);
  border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:4px 4px 0 rgba(27,23,20,.35);
  padding:12px 14px; min-height:48px;
}
.er-iv-log{
  flex:1 1 auto; overflow-y:auto; margin-bottom:8px; padding:2px;
  display:flex; flex-direction:column; gap:6px;
}
.er-iv-line{
  font-family:'Jarble','Spectral',serif; font-size:14px; line-height:1.35;
  padding:7px 11px; border:2px solid var(--ink); border-radius:10px; max-width:88%;
}
.er-iv-q{ align-self:flex-end; background:var(--ink); color:var(--paper); }
.er-iv-a{ align-self:flex-start; background:var(--paper); color:var(--ink); }
.er-iv-sug{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px;
}
.er-iv-chip{
  font-family:'Jarble','Spectral',serif; font-size:13.5px; line-height:1.25;
  color:var(--ink); background:var(--paper-2);
  border:2px solid var(--ink); border-radius:14px;
  padding:6px 11px; cursor:pointer; text-align:left;
}
.er-iv-chip:active{ transform:translate(1px,1px); }
.er-iv-inputrow{
  flex:0 0 auto; display:flex; gap:8px; align-items:stretch;
}
.er-iv-field{
  flex:1 1 auto; min-width:0;
  font-family:'Jarble','Spectral',serif; font-size:16px; color:var(--ink);
  background:var(--paper); border:2.5px solid var(--ink); border-radius:4px;
  padding:10px 12px;
}
.er-iv-field:focus{ outline:none; box-shadow:0 0 0 2px var(--teal) inset; }
.er-iv-send{
  flex:0 0 auto;
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:16px;
  color:var(--paper); background:var(--teal);
  border:2.5px solid var(--ink); border-radius:4px;
  padding:10px 18px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(27,23,20,.4);
}
.er-iv-send:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(27,23,20,.4); }
.er-iv-send:disabled{ filter:saturate(.4) brightness(.95); cursor:default; }