/* NACHHALL – Basis, Variablen, Bildschirme, filmische Ebenen */
:root {
  --bg: #06070b;
  --panel: rgba(12, 14, 20, 0.92);
  --panel-2: rgba(22, 26, 36, 0.9);
  --line: rgba(220, 230, 255, 0.12);
  --text: #e9e5dc;
  --text-dim: #a8a59c;
  --text-faint: #6f6d68;
  --accent: #7fd8e6;      /* Erinnerung / Echo */
  --accent-2: #f0b364;    /* warmes Licht */
  --danger: #e2564a;
  --good: #8fd6a0;
  --font-ui: "Bahnschrift", "DIN Alternate", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-story: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --ui-scale: 1;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}
#app { position: fixed; inset: 0; overflow: hidden; }
#view { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: auto; }
button { font-family: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Kino-Balken ---------- */
#cinebars .bar {
  position: absolute; left: 0; right: 0; height: 12vh; background: #000; z-index: 40;
  transition: transform 0.6s cubic-bezier(.6,0,.2,1); pointer-events: none;
}
#cinebars .top { top: 0; transform: translateY(-101%); }
#cinebars .bot { bottom: 0; transform: translateY(101%); }
#cinebars.on .top, #cinebars.on .bot { transform: translateY(0); }
@media (orientation: landscape) and (max-height: 500px) { #cinebars .bar { height: 9vh; } }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 90; transition: opacity 1s ease; }

/* ---------- Vollbildtext ---------- */
.cine-text {
  position: absolute; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9em; padding: 8vh 10vw; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  font-family: var(--font-story); font-size: clamp(16px, 2.3vw, 28px); line-height: 1.5; color: #ddd8cc;
  text-shadow: 0 0 20px rgba(0,0,0,0.9);
}
.cine-text.show { opacity: 1; pointer-events: auto; }
.cine-text.black { background: #000; }
.cine-text .ln { max-width: 900px; min-height: 1.5em; }
.cine-text .ln.small { font-size: 0.62em; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-ui); }
.cine-text .ln.time { font-family: var(--font-ui); letter-spacing: 0.4em; font-size: 0.8em; color: var(--accent); }
.cine-text .ln.big { font-size: 1.6em; letter-spacing: 0.25em; font-family: var(--font-ui); font-weight: 300; }
.cine-text .ln.voice { font-style: italic; color: #c9d7e0; }
.cine-text .ln.phone { font-style: italic; color: #9fd8e8; font-family: var(--font-story); filter: blur(0.3px); }
.cine-text .ln.red { color: #e88a7a; }
.cine-text .ln.dim { color: var(--text-faint); }

#press-hint {
  position: absolute; bottom: calc(6vh + var(--safe-b)); left: 0; right: 0; text-align: center; z-index: 96;
  font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-dim);
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
#press-hint.show { opacity: 1; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---------- Titelkarte ---------- */
#title-card {
  position: absolute; inset: 0; z-index: 93; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), rgba(0,0,0,0.85));
}
#title-card.show { opacity: 1; }
#title-card .tc-main {
  font-size: clamp(36px, 8vw, 110px); letter-spacing: 0.35em; font-weight: 300; text-indent: 0.35em;
  color: #f2eee6; text-shadow: 0 0 40px rgba(127, 216, 230, 0.35);
  animation: flicker 5s linear infinite;
}
#title-card .tc-line { width: 0; height: 1px; background: var(--accent); margin: 18px 0; transition: width 2s ease 0.4s; opacity: 0.7; }
#title-card.show .tc-line { width: min(420px, 60vw); }
#title-card .tc-sub { font-size: clamp(12px, 1.6vw, 18px); letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-dim); text-indent: 0.5em; }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.4; } 94% { opacity: 1; } 96% { opacity: 0.7; } 97% { opacity: 1; } }

/* ---------- Erinnerungsblitz ---------- */
#memory {
  position: absolute; inset: 0; z-index: 92; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em;
  pointer-events: none; opacity: 0; transition: opacity 0.6s ease; padding: 10vw;
  background: radial-gradient(ellipse at center, rgba(180, 240, 255, 0.12), rgba(0, 10, 20, 0.55));
}
#memory.show { opacity: 1; }
#memory .mem-line {
  font-family: var(--font-story); font-style: italic; font-size: clamp(16px, 2.4vw, 30px); color: #dff8ff; text-align: center;
  text-shadow: 0 0 12px rgba(127, 216, 230, 0.9), 2px 0 0 rgba(255, 80, 80, 0.35), -2px 0 0 rgba(80, 200, 255, 0.35);
  animation: memIn 1.6s ease forwards; opacity: 0;
}
@keyframes memIn { 0% { opacity: 0; filter: blur(8px); letter-spacing: 0.3em; } 40% { opacity: 1; filter: blur(0); letter-spacing: 0.02em; } 100% { opacity: 0.85; } }

/* ---------- Bildschirme ---------- */
.screen {
  position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
}
.screen.show { display: flex; animation: screenIn 0.35s ease; }
.screen.overlay { background: rgba(3, 4, 8, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 70; }
.screen.overlay.dark { background: rgba(0, 0, 0, 0.82); }
.screen.modal { z-index: 88; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  max-height: 100%; display: flex; flex-direction: column; overflow: hidden; width: 100%;
}
.panel.narrow { max-width: 420px; padding: 22px; }
.panel.wide { max-width: 860px; }
.panel h2 { margin: 0; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; font-size: 15px; color: var(--text); }
.panel.narrow h2 { text-align: center; margin-bottom: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.panel-body { padding: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.xbtn {
  background: none; border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; color: var(--text-dim); font-size: 15px;
  flex-shrink: 0; transition: all 0.2s;
}
.xbtn:hover, .xbtn:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }
.xbtn.dark { color: #333; border-color: rgba(0,0,0,0.25); }
.linkbtn { background: none; border: none; color: var(--text-dim); letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; padding: 8px; }
.linkbtn:hover { color: var(--text); }
.prose { font-family: var(--font-story); line-height: 1.65; color: #d6d1c6; font-size: 15px; }
.prose h3 { font-family: var(--font-ui); font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; font-size: 12px; color: var(--accent); margin: 1.6em 0 0.6em; }
.prose p { margin: 0 0 1em; }
.prose em { color: #f0e6cf; }

/* Menüknöpfe */
.menu-list { display: flex; flex-direction: column; gap: 6px; }
.menu-list.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.mbtn {
  position: relative; background: transparent; border: none; text-align: left; padding: 11px 18px 11px 22px;
  font-size: clamp(14px, 1.5vw, 17px); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-dim);
  transition: color 0.2s, padding 0.25s, background 0.25s; border-left: 1px solid transparent; min-height: 44px;
  display: flex; align-items: baseline; gap: 12px;
}
.mbtn::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent); transition: width 0.25s; }
.mbtn:hover, .mbtn:focus-visible, .mbtn.focus { color: #fff; padding-left: 30px; outline: none; background: linear-gradient(90deg, rgba(127,216,230,0.08), transparent); }
.mbtn:hover::before, .mbtn:focus-visible::before, .mbtn.focus::before { width: 18px; }
.mbtn:disabled { opacity: 0.3; pointer-events: none; }
.mbtn small { font-size: 10px; letter-spacing: 0.12em; color: var(--text-faint); text-transform: none; }
.menu-list.row .mbtn { justify-content: center; border: 1px solid var(--line); border-radius: 3px; padding: 10px 26px; }
.menu-list.row .mbtn::before { display: none; }

/* Hochformat-Hinweis */
#rotate-hint {
  position: absolute; left: 12px; right: 12px; top: calc(12px + var(--safe-t)); z-index: 99; display: none; align-items: center; gap: 12px;
  background: rgba(10, 12, 18, 0.92); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--text-dim);
}
#rotate-hint .rot-icon { width: 26px; height: 26px; border: 2px solid var(--accent); border-radius: 4px; animation: rot 2.4s ease-in-out infinite; flex-shrink: 0; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
body.portrait-hint #rotate-hint { display: flex; }

#error-box { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 200; background: #300; color: #fcc; padding: 10px; font: 12px monospace; white-space: pre-wrap; border-radius: 4px; max-height: 40vh; overflow: auto; }

/* Ladebildschirm */
#screen-loading { background: #000; z-index: 100; }
.load-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.load-bar { width: min(320px, 70vw); height: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.load-bar .fill { height: 100%; width: 0; background: var(--accent); transition: width 0.2s; box-shadow: 0 0 10px var(--accent); }
.load-text { font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-faint); }

/* Logo */
.logo {
  position: relative; font-size: clamp(44px, 9vw, 120px); font-weight: 200; letter-spacing: 0.32em; text-indent: 0.32em; color: #f3efe7;
  text-shadow: 0 0 30px rgba(127, 216, 230, 0.25);
}
.logo.small { font-size: 22px; }
.logo[data-text]::before, .logo[data-text]::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.logo[data-text]::before { color: rgba(127, 216, 230, 0.7); animation: echo1 6s infinite; }
.logo[data-text]::after { color: rgba(255, 120, 100, 0.45); animation: echo2 6s infinite; }
@keyframes echo1 { 0%, 88%, 100% { opacity: 0; transform: translate(0); } 89% { opacity: 1; transform: translate(-6px, 1px); } 91% { opacity: 0.6; transform: translate(4px, -1px); } 93% { opacity: 0; } }
@keyframes echo2 { 0%, 89%, 100% { opacity: 0; transform: translate(0); } 90% { opacity: 1; transform: translate(5px, 0); } 92% { opacity: 0; } }

body.booting #hud, body.booting #touch { display: none; }