/* Comic-Schicht (Ravenswatch-artig): dicke Tuschekonturen, harte Schatten, Rasterpunkte,
   Sprechblasen und gelbe Erzählkästchen. Liegt über style.css / phone.css / create.css und book.css. */
:root {
  --ink-line: #120a06;
  --caption: #f6d860;
  --comic-font: "Grenze Gotisch", Georgia, serif;
}

/* Überschriften und Namen: gebrochene Schrift mit Tuschekante */
h1, h2, h3, legend, .who, .pk-name, header strong, #hdr-name, .bm-q, .town h3 {
  font-family: var(--comic-font); letter-spacing: .6px;
}
h1, h2 { text-shadow: 2px 2px 0 var(--ink-line), -1px -1px 0 rgba(255,255,255,.25); }

/* Knöpfe: dicke schwarze Kontur, harter Schatten, beim Drücken „eingedrückt“ */
button, .avatar-btn, .slot {
  border: 3px solid var(--ink-line) !important; border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink-line), inset 0 2px 0 rgba(255,255,255,.35);
  transition: transform .08s, box-shadow .08s;
}
button:hover:not(:disabled) { transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 4px 4px 0 var(--ink-line), inset 0 2px 0 rgba(255,255,255,.35); }
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-line); }
nav button, button.ghost, .hud-menu button { border: 0 !important; box-shadow: none; }
nav button:hover, button.ghost:hover { transform: none; box-shadow: none; }

/* Panels und Karten: Tuschekontur + Rasterpunkte im Schatten */
.panel, .modal-card, .hud-menu, .town, .feed-item, .turnbar .bar, .turnbar .hud-btn, .pk-box, .card.doll-card .doll-mid {
  outline: 3px solid var(--ink-line); outline-offset: 0;
}
.panel.book, .modal-card { box-shadow: 10px 12px 0 var(--ink-line) !important; }
.panel.book::after, .modal-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background: radial-gradient(circle, rgba(90,50,20,.22) 1px, transparent 1.5px) 0 0 / 6px 6px;
  -webkit-mask: linear-gradient(135deg, transparent 55%, #000); mask: linear-gradient(135deg, transparent 55%, #000);
}
.modal-card { position: relative; }

/* Sprechblasen: weiß, dicke Kontur, leicht schief, mit Schwänzchen */
.pk-box {
  background: #fffdf4 !important; color: #1a120c !important; border: 4px solid var(--ink-line) !important; border-radius: 18px 22px 18px 24px !important;
  box-shadow: 5px 5px 0 var(--ink-line) !important; outline: 0;
}
.say.pk-box { position: relative; transform: rotate(-.5deg); }
.say.pk-box::after { content: ''; position: absolute; left: 34px; bottom: -16px; width: 22px; height: 18px; background: #fffdf4;
  border-right: 4px solid var(--ink-line); border-bottom: 4px solid var(--ink-line); transform: skewX(35deg) rotate(8deg); }
.say img, .pk-box.dm img { border: 3px solid var(--ink-line) !important; border-radius: 50% !important; background: radial-gradient(circle, #fff6dc, #d8c4a0) !important; }
.who, .pk-name { color: #9a2a16 !important; font-size: 16px !important; }
.choice { border: 3px solid var(--ink-line) !important; border-radius: 10px !important; box-shadow: 3px 3px 0 var(--ink-line) !important; background: #fffdf4 !important; }
.choice:hover { background: var(--caption) !important; }

/* Erzählkästchen (Feed, Toasts): gelb wie Comic-Captions */
.feed-item, .ptoast, .toast { background: var(--caption) !important; color: #1a120c !important; border: 3px solid var(--ink-line) !important;
  box-shadow: 4px 4px 0 var(--ink-line) !important; font-weight: bold; }
.feed-item small { color: #5a3a1a !important; }

/* Kampf: Comic-Panel mit dickem Rahmen und Aktionslinien */
.battle, .pbattle { outline: 6px solid var(--ink-line); outline-offset: -6px; }
.bt-field { isolation: isolate; }
.bt-field::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 75% 30%, #000 0 1.5deg, transparent 1.5deg 9deg); }
.bt-unit img { filter: drop-shadow(3px 0 0 var(--ink-line)) drop-shadow(-3px 0 0 var(--ink-line)) drop-shadow(0 3px 0 var(--ink-line)) drop-shadow(0 -3px 0 var(--ink-line)); }
.bt-menu button, .pb-menu button { border: 3px solid var(--ink-line) !important; box-shadow: 3px 3px 0 var(--ink-line) !important; border-radius: 8px !important; }
.bt-menu button:hover:not(:disabled), .pb-menu button:hover:not(:disabled) { background: var(--caption) !important; }
.hpbar { border: 2px solid var(--ink-line); }

/* Leiste und Chips */
.turnbar .chip { border-width: 3px !important; box-shadow: 2px 2px 0 var(--ink-line); }
.gslot { border-color: var(--ink-line) !important; }
img.doll-img, .avatar { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }

/* Animierte NPC-Porträts (5-Bild-Streifen: normal, blinzeln, reden, winken ×2) – auch in Dialogen */
.say .portrait, .dialog .portrait { width: 72px; height: 72px; flex: none; background-size: 500% 100%; background-repeat: no-repeat;
  image-rendering: pixelated; border: 3px solid var(--ink-line); border-radius: 50%; background-color: #d8c4a0; }
.dialog .portrait { width: 96px; height: 96px; }
.portrait.talk { animation: pf-talk 1.6s step-end infinite; }
@keyframes pf-talk { 0% { background-position: 50% 0; } 20% { background-position: 0 0; } 35% { background-position: 50% 0; } 55% { background-position: 0 0; }
  70% { background-position: 50% 0; } 85% { background-position: 25% 0; } 92% { background-position: 0 0; } }

/* Initiative-Leiste im Kampf (Tisch + Handy) */
.init-bar { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 4px; }
.init-bar .ini { position: relative; width: 38px; height: 38px; border: 3px solid var(--ink-line); background: #c3c8a6; box-shadow: 0 0 0 2px var(--c) inset; }
.init-bar .ini img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.init-bar .ini b { position: absolute; right: -4px; bottom: -6px; font-size: 10px; background: var(--ink-line); color: #e2e4cc; padding: 0 2px; }
.init-bar .ini.foe { background: #6a5048; }
.init-bar .ini.now { transform: translateY(-4px) scale(1.15); border-color: #e2e4cc; z-index: 1; }
.init-bar .ini.down { filter: grayscale(1) brightness(.5); }