@font-face { font-family: 'B612'; src: url('../../assets/fonts/b612-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'B612'; src: url('../../assets/fonts/b612-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'B612 Mono'; src: url('../../assets/fonts/b612-mono-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'La Belle Aurore'; src: url('../../assets/fonts/la-belle-aurore-latin-400-normal.woff2') format('woff2'); font-display: swap; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-size: var(--size-m); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; background: #05060a; display: block; z-index: var(--z-view); }

/* Randglühen: vier Ränder, Stärke 0..1 kommt aus main.js (--el/--er/--eu/--ed). Rot, weicher Verlauf von außen nach innen. */
#edge { position: fixed; inset: 0; z-index: var(--z-fx); pointer-events: none; --el: 0; --er: 0; --eu: 0; --ed: 0; }
#edge i { position: absolute; display: block; }
#edge .l { inset: 0 auto 0 0; width: 28vmin; opacity: var(--el); background: linear-gradient(90deg, var(--color-glow), transparent); }
#edge .r { inset: 0 0 0 auto; width: 28vmin; opacity: var(--er); background: linear-gradient(270deg, var(--color-glow), transparent); }
#edge .u { inset: 0 0 auto 0; height: 28vmin; opacity: var(--eu); background: linear-gradient(180deg, var(--color-glow), transparent); }
#edge .d { inset: auto 0 0 0; height: 28vmin; opacity: var(--ed); background: linear-gradient(0deg, var(--color-glow), transparent); }
/* Brocken von hinten: schmaler roter Saum rundum, schwächer als die gerichtete Warnung */
#edge-rear { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 12vmin 2vmin var(--color-glow-rear); }

#blackout { position: fixed; inset: 0; z-index: var(--z-fx); background: #000; opacity: 0; pointer-events: none; transition: opacity 0.12s linear; }
#blackout.on { opacity: 1; }
#danger { position: fixed; inset: 0; z-index: var(--z-fx); pointer-events: none; --dz: 0; box-shadow: inset 0 0 18vmin 3vmin var(--color-glow); opacity: var(--dz); }
#danger[data-level='1'] { box-shadow: inset 0 0 18vmin 3vmin color-mix(in srgb, #ffa23a 80%, transparent); }

#hud { position: fixed; inset: 0; z-index: var(--z-hud); pointer-events: none; padding: var(--space-m); display: flex; flex-direction: column; align-items: center; }
#hud[hidden] { display: none; }

.subtitle { margin: 0 0 auto; padding-top: var(--space-xs); min-height: 2.6em; max-width: min(640px, 92vw); text-align: center; font-size: var(--size-l); font-weight: 700; color: var(--color-text); text-shadow: 0 2px 0 var(--base-ink), 0 0 6px var(--base-ink); padding-bottom: var(--space-s); }

.screen { position: fixed; inset: 0; z-index: var(--z-screen); display: grid; place-items: center; padding: var(--space-l); background: var(--color-screen); text-align: center; overflow: auto; }
.screen[hidden] { display: none; }
#cutscene { position: fixed; inset: 0; z-index: var(--z-fx); background: var(--base-ink); }
#cutscene[hidden] { display: none; }
/* Karte über einem Standbild: unten, Bild bleibt sichtbar */
.screen.over { background: linear-gradient(to bottom, transparent 45%, rgba(8, 6, 16, 0.88)); place-items: end center; pointer-events: none; }
.screen.over .card { pointer-events: auto; }
.card { max-width: 48rem; display: grid; gap: var(--space-m); justify-items: center; }
.kicker { font-family: var(--font-hand); font-size: var(--size-l); color: var(--color-accent); margin: 0; }
h1 { margin: 0; text-wrap: balance; font-size: var(--size-xl); line-height: 1; text-transform: uppercase; color: var(--color-accent); text-shadow: 0 4px 0 var(--base-ink); }
p { margin: 0; line-height: 1.5; }
.nowplaying { position: fixed; left: var(--space-s); top: var(--space-s); max-width: 60vw; font-size: var(--size-s); color: var(--color-text-dim); text-shadow: 0 1px 0 var(--base-ink), 0 0 5px var(--base-ink); pointer-events: none; transition: opacity 1s; }
.nowplaying:empty { opacity: 0; }
.dim { color: var(--color-text-dim); font-size: var(--size-s); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; }
button, .btn { font: inherit; font-weight: 700; cursor: pointer; border: 3px solid var(--base-ink); border-radius: var(--radius-m); padding: var(--space-s) var(--space-l); background: var(--color-text); color: var(--color-on-accent); touch-action: manipulation; }
button.primary { background: var(--color-accent); font-size: var(--size-l); box-shadow: 0 5px 0 var(--base-ink); }
button[aria-pressed='true'] { background: var(--color-good); }
button:focus-visible, a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
button:disabled { opacity: 0.5; cursor: default; }
/* Ton-Schalter: Zustand an Symbol und Beschriftung sichtbar (grün mit Wellen = an, grau mit Kreuz = aus) */
button.toggle { display: inline-flex; align-items: center; gap: var(--space-s); }
button.toggle svg { width: 1.4em; height: 1.4em; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
button.toggle svg .wave, button.toggle svg .off { fill: none; }
button.toggle[data-state='on'] .off { display: none; }
button.toggle[data-state='off'] { background: var(--color-off); color: var(--color-text); }
button.toggle[data-state='off'] .wave { display: none; }
.exit-link { position: fixed; top: var(--space-s); left: var(--space-s); z-index: var(--z-lead); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-hud-surface); color: var(--color-text); border: 2px solid var(--color-hud-line); }
.exit-link[hidden] { display: none; }
.exit-link svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }
/* Werkzeuge oben rechts: Pause und Ton */
.tools { position: fixed; top: var(--space-s); right: var(--space-s); z-index: var(--z-lead); display: flex; gap: var(--space-s); }
.tools[hidden] { display: none; }
button.icon { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--color-hud-surface); color: var(--color-text); border: 2px solid var(--color-hud-line); box-shadow: none; }
button.icon svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
button.icon svg .pz, button.icon svg .wave, button.icon svg .off { fill: none; }
button.icon svg .pl { display: none; }
button.icon#btn-pause[aria-pressed='true'] svg .pz { display: none; }
button.icon#btn-pause[aria-pressed='true'] svg .pl { display: block; }
button.icon[aria-pressed='true'] { background: var(--color-hud-surface); }
button.icon.toggle[data-state='on'] .off { display: none; }
button.icon.toggle[data-state='off'] { background: var(--color-off); }
button.icon.toggle[data-state='off'] .wave { display: none; }
#rotate { position: fixed; inset: auto 0 var(--space-m) 0; z-index: var(--z-lead); text-align: center; font-weight: 700; display: none; }
@media (pointer: coarse) { #rotate { display: block; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ladebalken unter dem Hinweis "Cockpits werden geladen": Breite aus --p (main.js) */
#load-note { position: relative; padding-bottom: 0.6em; }
#load-note::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--color-accent, currentColor); transition: width 0.3s; }
@media (prefers-reduced-motion: reduce) { #load-note::after { transition: none; } }