@font-face { font-family: 'C64ish'; src: url('../vendor/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('../vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'JetBrains Mono'; src: url('../vendor/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); font-weight: 700; }

:root {
  --bg: #15161a; --panel: #1d1f25; --ink: #e9e4d8; --muted: #9a9486; --accent: #ffcc66; --line: #2c2f37;
  --hl: rgba(255, 204, 102, 0.16); --hl-word: #ffcc66;
  --c64-bg: #40318d; --c64-border: #7869c4; --c64-fg: #a59cf0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; overflow: hidden; }

/* ---- Kopfzeile ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #111216; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand strong { font-size: 17px; letter-spacing: .5px; color: var(--accent); }
.brand #story-title { color: var(--muted); font-size: 14px; }
.badge { background: #5b2a2a; color: #ffd0c0; border: 1px solid #a5524c; font-size: 11px; padding: 2px 8px; border-radius: 99px; letter-spacing: 1px; }
.controls { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.controls button { background: #262931; color: var(--ink); border: 1px solid #3a3e48; border-radius: 8px; padding: 6px 12px; font-size: 15px; cursor: pointer; }
.controls button.primary { background: var(--accent); color: #1a1a1a; border-color: var(--accent); min-width: 48px; }
.controls select, .controls input[type=range] { background: #262931; color: var(--ink); border: 1px solid #3a3e48; border-radius: 6px; padding: 4px 6px; }
.controls label { display: flex; align-items: center; gap: 6px; }
.controls output { min-width: 40px; }

/* ---- Hauptbereich ---- */
.app { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; min-height: 0; }
.text-pane { overflow-y: auto; padding: 28px 36px 45vh; border-right: 1px solid var(--line); font-family: Georgia, 'Iowan Old Style', 'DejaVu Serif', serif; font-size: 19px; line-height: 1.7; scroll-behavior: smooth; }
.text-pane h2.scene { font-family: system-ui, sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin: 34px 0 10px; font-weight: 600; }
.text-pane h2.scene:first-of-type { margin-top: 6px; }
.text-pane p { margin: 0 0 18px; }
.placeholder-note { font-family: system-ui, sans-serif; font-size: 12px; color: #ffb4a0; border: 1px dashed #a5524c; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
.sent { cursor: pointer; border-radius: 4px; transition: background .25s, color .25s; color: #b9b3a5; padding: 1px 0; }
.sent:hover { background: rgba(255,255,255,.04); }
.sent.done { color: #8d887c; }
.sent.active { background: var(--hl); color: var(--ink); box-shadow: 0 0 0 3px var(--hl); }
.sent.active .w.word { color: #111; background: var(--hl-word); border-radius: 3px; box-shadow: 0 0 0 2px var(--hl-word); }
.cue-mark { display: none; font-size: 12px; vertical-align: super; margin: 0 1px; opacity: .8; font-family: system-ui; }
.show-cues .cue-mark { display: inline; }

/* ---- Bühne (rechts) ---- */
.stage { display: grid; grid-template-rows: 1fr 6px 1fr; min-height: 0; transition: grid-template-rows .5s ease; background: #0e0f12; }
.divider { background: var(--line); }
.slot { position: relative; min-height: 0; overflow: hidden; }
.slot.enter > .panel { animation: slotIn .55s ease; }
@keyframes slotIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel { position: absolute; inset: 0; }
.map { position: absolute; inset: 0; background: #ddd; }
.map .leaflet-tile-pane { filter: var(--tile-filter, none); }

/* Karten-Pins */
.char-icon { background: none; border: 0; }
.pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--c); transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.45); display: grid; place-items: center; }
.pin span { transform: rotate(45deg); color: #fff; font: 700 15px system-ui; }
.pin-name.left { left: auto; right: 38px; }
.pin-name { position: absolute; left: 38px; top: 4px; background: var(--c); color: #fff; font: 600 12px system-ui; padding: 2px 7px; border-radius: 99px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-tooltip.place-label { background: rgba(255,255,255,.85); border: 0; box-shadow: none; font: 600 11px system-ui; color: #333; padding: 1px 5px; }
.leaflet-tooltip.place-label::before { display: none; }

/* Bild-Panel */
.image-panel { background: #0b0b0d; }
.img-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; margin: 0; }
.img-layer.instant { transition: none; }
.img-layer.visible { opacity: 1; }
.img-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-layer.kb img { animation: kenburns 30s ease-out forwards; }
.img-layer.instant img { animation: none; }
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.08) translate(-1%, -1%); } }
.img-layer figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 15px; }
.img-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #555; font-size: 14px; }
.image-panel.has-image .img-empty { display: none; }

/* Terminal-Stapel: modern oben, C64 unten */
.term-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; background: #0e0f12; }
.term-stack > .panel { position: relative; inset: auto; min-height: 0; }

/* Modernes Terminal (2026) */
.term-modern { display: flex; flex-direction: column; background: radial-gradient(1200px 400px at 70% -20%, #1b2a44 0%, #0b0e14 60%); color: #d7e3f4; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; }
.tm-bar { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #8ea2bf; }
.tm-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; display: inline-block; }
.tm-bar i:nth-child(2) { background: #febc2e; } .tm-bar i:nth-child(3) { background: #28c840; margin-right: 8px; }
.tm-status { margin-left: auto; font-weight: 400; color: #6ee7b7; font-size: 11px; border: 1px solid rgba(110,231,183,.35); border-radius: 99px; padding: 1px 8px; }
.tm-body { flex: 1; overflow-y: auto; padding: 14px 18px; scroll-behavior: smooth; }
.tm-hint { color: #5f7391; font-size: 12px; }
.tm-user { margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid #7aa2ff; background: rgba(122,162,255,.08); color: #b9cdfc; white-space: pre-wrap; border-radius: 0 8px 8px 0; }
.tm-user::before { content: 'C64 › '; color: #7aa2ff; font-weight: 700; }
.tm-ai { margin: 0 0 14px; white-space: pre-wrap; line-height: 1.55; }
.tm-ai::before { content: '◆ '; color: #a78bfa; }
.tm-caret { display: inline-block; width: 8px; height: 1.05em; background: #a78bfa; vertical-align: text-bottom; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.tm-dots i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #a78bfa; animation: dot 1s infinite; }
.tm-dots i:nth-child(2) { animation-delay: .15s; } .tm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* C64 */
.term-c64 { background: var(--c64-border); padding: clamp(14px, 5%, 40px) clamp(18px, 7%, 60px); container-type: size; }
.c64-screen { width: 100%; height: 100%; background: var(--c64-bg); overflow: hidden; }
.c64-text { margin: 0; padding: 0.6em 0.5em; font-family: 'C64ish', monospace; color: var(--c64-fg); font-size: clamp(8px, 2.15cqw, 22px); line-height: 1.25; white-space: pre; text-shadow: 0 0 6px rgba(165,156,240,.35); }
.c64-cursor { background: var(--c64-fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Statuszeile */
.statusbar { display: flex; gap: 18px; padding: 6px 18px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); background: #111216; white-space: nowrap; overflow: hidden; }
#status[data-kind=warn] { color: #ffb86b; } #status[data-kind=error] { color: #ff6b6b; }
.cue-log { margin-left: auto; overflow: hidden; text-overflow: ellipsis; max-width: 55%; font-family: 'JetBrains Mono', monospace; }
.cue-log.flash { animation: flash 1.2s ease; }
@keyframes flash { from { color: var(--accent); } to { color: var(--muted); } }

@media (max-width: 900px) { .app { grid-template-columns: 1fr; grid-template-rows: 45% 55%; } .text-pane { border-right: 0; border-bottom: 1px solid var(--line); } }