/* ===========================================================
   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 */

/* „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: duenne Tuschelinie von der AI-Blase bis an die Panel-Oberkante,
   mit kleinem Dreieck (= ehemaliger Zipfel) ganz unten, das ins Panel zeigt. */
.conv-leader{
  position:absolute; top:-2px; bottom:-9px; width:2.5px;
  background:var(--ink); z-index:4;
}
.conv-bridge.side-left  .conv-leader{ left:22px; }
.conv-bridge.side-right .conv-leader{ right:22px; }
.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:absolute;
  display:flex; flex-direction:column; gap:10px;
  padding:2px 4px 4px;
  animation:panelIn .3s ease;
}
.decision-option{
  text-align:left; font-family:'Jarble','Spectral',serif; font-size:15.5px; line-height:1.35;
  color:var(--ink); background:var(--bubble-bg);
  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 .12s;
}
/* 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(--bubble-bg); border:2.5px solid var(--ink);
  border-radius:60% 50% 55% 45% / 60% 55% 50% 45%;
}
.decision-option::before{ width:16px; height:13px; bottom:-11px; }
.decision-option::after{ width:9px;  height:8px;  bottom:-22px; left:12px; }
.decision-option:hover{ background:var(--paper); }
.decision-option:active{ transform:translate(1px,1px); }
.decision-option.chosen{ background:var(--teal); color:var(--paper); border-color:var(--ink); }
.decision-option.chosen::before,
.decision-option.chosen::after{ background:var(--teal); }
.decision-option:disabled{ cursor:default; opacity:.6; }
.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); }
}

.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);
}

/* ===================== 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; }
}