/*###############################
###
###     styles.css
###     DEAD//AIR — North Coast Broadcasting System
###     BASED ON: HTML5, CSS3, Vanilla JavaScript
###     AUTHOR: Benjamin Bennewitz
###
###
###       ██████╗  ▀█
###       ██╔══██╗ █▄
###       ██████╦╝
###       ██╔══██╗
###       ██████╦╝
###       ╚═════╝
###
#################################*/

/* ===========================================================================
   INHALTSVERZEICHNIS

   01   Fonts und Design Tokens
   02   Reset, Fokus und Typografie
   03   Seitenrahmen und Masthead
   04   Receiver, Frequenzregler und Kameras
   05   Analoger Bildschirm, Lichtquellen und Szene
   06   Wiedergabe und Telemetrie
   07   Story-Artefakte, Dialoge und Quellenhinweise
   08   Zustandswechsel und Animationen
   09   Responsive Verhalten
   10   Reduced Motion
   11   Ermittlungswerkzeuge und lokaler Kamerafeed
   12   Ronnies Übergang und Abschluss
   13   Ungelesene Notizen und Display-Toast
   14   Gemeinsame Audioeinstellungen
   ========================================================================== */

/* 01   Fonts und Design Tokens */

@font-face {
  font-family: 'B2 Condensed';
  src: url('/assets/fonts/studies/BarlowCondensed-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --gate-light: 0;
  --gate-spill: 0;
  --black: #070c0d;
  --background: #10191a;
  --surface: #172224;
  --surface-raised: #213033;
  --edge: #405357;
  --edge-soft: #2b393c;
  --chalk: #e4e7dc;
  --muted: #93aaa7;
  --secondary: #b4c7bd;
  --signal: #d76854;
  --signal-light: #f4a28b;
  --noise-opacity: 0.058;
  --flicker-opacity: 0.083;
  --font-mono: 'Courier New', Courier, monospace;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--background);
  color: var(--chalk);
  font-synthesis: none;
}

/* 02   Reset, Fokus und Typografie */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  min-width: 320px;
  margin: 0;
  background: radial-gradient(ellipse at 67% 0%, #203337 0%, transparent 54%), var(--background);
}

button,
a,
input {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  color: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

:focus-visible {
  outline: 2px solid #ffad86;
  outline-offset: 4px;
}

button,
a {
  touch-action: manipulation;
}

a {
  color: inherit;
}

button {
  border-radius: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

h1,
h2,
p,
figure {
  margin: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: var(--chalk);
  color: var(--black);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow,
.topbar,
.panel-bar,
.receiver__display,
.tuning-control,
.source-switch,
.monitor-area__header,
.scene__osd,
.television__badge,
.television__footer,
.monitor-extras,
.info-dialog {
  font-family: var(--font-mono);
}

.eyebrow {
  color: var(--secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.105em;
  line-height: 1.55;
}

/* 03   Seitenrahmen und Masthead */

.broadcast-shell {
  display: flex;
  flex-direction: column;
  width: min(100%, 1920px);
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.3vw, 46px);
  overflow: hidden;
}

.topbar {
  display: flex;
  flex: 0 0 72px;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--edge);
}

.station-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--chalk);
  text-decoration: none;
}

.station-brand__mark {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.station-brand__copy {
  display: grid;
  gap: 3px;
}

.station-brand__copy strong {
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: 22px;
  letter-spacing: 0.095em;
}

.mark-accent,
.monitor-area__header h2 span {
  color: var(--signal);
}

.station-brand__copy small {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.topbar__ident {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.07em;
}

.topbar__dash {
  display: inline-block;
  width: 25px;
  height: 1px;
  margin: 0 10px 3px;
  background: var(--signal);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.topbar__actions button,
.topbar__actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--chalk);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}

.topbar__actions a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.topbar__actions a:hover,
.topbar__actions button:hover {
  border-color: var(--secondary);
  background: var(--surface-raised);
}

.workstation {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.85fr);
  grid-template-areas: "receiver monitor";
  align-items: stretch;
  gap: clamp(20px, 3.1vw, 62px);
  padding: clamp(12px, 2vh, 24px) 0;
  overflow: hidden;
}

.control-panel,
.monitor-area {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.control-panel {
  grid-area: receiver;
}

.monitor-area {
  grid-area: monitor;
  display: flex;
  flex-direction: column;
}

.control-panel__heading {
  padding-bottom: 12px;
}

/* Der große Seitentitel steht bereits im Masthead; die H1 bleibt semantisch erhalten. */
.control-panel h1.visually-hidden {
  margin: -1px;
}

.indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #a2c4b7;
}

.indicator--red {
  background: var(--signal);
  box-shadow: 0 0 13px #d7685470;
}

.control-panel h1 {
  margin: 7px 0 4px;
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(54px, 6vw, 112px);
  font-weight: 900;
  letter-spacing: -0.008em;
  line-height: 0.88;
  white-space: nowrap;
}

.control-panel h1 span {
  color: var(--signal);
}

.lead {
  max-width: 41ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* 04   Receiver, Frequenzregler, Kameras und Wiedergabe */

.receiver {
  overflow: hidden;
  border: 1px solid #62716f;
  background: linear-gradient(132deg, #273537, #151f21 39%, #121a1d);
  box-shadow: 9px 9px 0 #04080955, inset 0 1px #81908b33;
}

.panel-bar {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--edge);
  color: var(--secondary);
}

.panel-bar h2,
.panel-bar span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.receiver__display {
  margin: 15px 15px 18px;
  padding: 19px 17px 12px;
  border: 1px solid #0d1517;
  background: #071517;
  box-shadow: inset 0 2px 12px #000a, 0 1px #6f918544;
}

.receiver__freq {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #b2d8c2;
  font-size: clamp(45px, 5.2vw, 76px);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  text-shadow: 0 0 16px #6ca69a55;
}

.receiver__freq span {
  font-size: 12px;
  letter-spacing: 0;
}

.receiver__status {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 10px;
  color: #93aaa1;
  font-size: 10px;
  letter-spacing: 0.08em;
}

#status-output {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receiver__status-led {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a7bcae;
}

[data-story='frequency-scan'] .receiver__freq {
  color: #f0c98d;
  text-shadow: 0 0 17px rgba(237, 164, 95, .54);
}

[data-story='frequency-scan'] .receiver__status-led,
[data-story='transmission-ready'] .receiver__status-led {
  background: var(--signal-light);
  box-shadow: 0 0 11px rgba(231, 130, 102, .82);
}

[data-story='frequency-scan'] #frequency-tuning {
  opacity: 1;
  cursor: not-allowed;
}

.receiver__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 11px;
  border-top: 1px dashed #2e5752;
  color: #72938b;
  font-size: 9px;
}

/* Nativer FM-Regler: Funkträger werden erst nach einem aktiven Ping sichtbar. */
.tuning-control {
  margin: 0 15px 15px;
  padding-top: 13px;
  border-top: 1px solid var(--edge);
}

.tuning-control label,
.tuning-control__scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.tuning-control input {
  width: 100%;
  height: 6px;
  margin: 17px 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: linear-gradient(90deg, var(--signal) var(--range-progress, .5%), #435558 var(--range-progress, .5%));
  cursor: pointer;
  touch-action: pan-y;
}

.tuning-control input::-webkit-slider-thumb {
  width: 13px;
  height: 22px;
  border: 2px solid #e3e6d9;
  border-radius: 1px;
  appearance: none;
  background: var(--black);
}

.tuning-control input::-moz-range-thumb {
  width: 11px;
  height: 20px;
  border: 2px solid #e3e6d9;
  border-radius: 1px;
  background: var(--black);
}

.tuning-control__scale {
  color: #829b98;
  font-size: 9px;
  font-weight: 400;
}

/* Kamera und Pause teilen sich eine kompakte Bedienzeile direkt unter dem Tuner. */
.receiver-actions {
  display: flex;
  min-width: 0;
  gap: 7px;
  margin: 0 15px 15px;
}

.source-switch {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--edge);
}

.source-switch button {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 43px;
  padding: 0 4px;
  border: 0;
  background: #162224;
  color: #a9c0b9;
  font-family: var(--font-mono);
  font-size: clamp(8px, .65vw, 10px);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.source-switch button + button {
  border-left: 1px solid var(--edge);
}

.source-switch button.is-active {
  background: var(--chalk);
  color: #152022;
}

.source-switch button:hover:not(.is-active),
.pause-toggle:hover {
  background: #304246;
  color: white;
}

.pause-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 69px;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border: 1px solid var(--edge);
  background: #162224;
  color: #a9c0b9;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.pause-toggle span:first-child {
  font-size: 12px;
}

/* Gleichberechtigter, platzsparender Tonschalter ohne zusätzliche Panelhöhe. */
.sound-toggle {
  display: inline-flex;
  flex: 0 0 36px;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--edge);
  background: #162224;
  color: #a9c0b9;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.sound-toggle[aria-pressed='false'] { color: #6f8480; }
.sound-toggle:hover { background: #304246; color: #fff; }
.sound-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Sämtliche aktiven Steuer- und Archivaktionen bleiben unter dem FM-Regler. */
.receiver__archive {
  display: grid;
  gap: 6px;
  margin: 0 15px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--edge);
}

.receiver__archive-label {
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.receiver__archive-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.receiver__archive-actions .monitor-area__evidence {
  min-height: 30px;
  padding: 6px 8px;
  text-align: center;
}

.receiver__sync:not(:disabled) {
  border-color: #759e8d;
}

.receiver__archive-actions button:focus-visible {
  outline: 2px solid #ffcfab;
  outline-offset: 2px;
}

/* 05   Analoger Bildschirm, fotografische Lichtmasken und Szene */

.monitor-area__header {
  display: flex;
  min-height: 33px;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  color: var(--secondary);
  font-size: 10px;
  letter-spacing: 0.07em;
}

.monitor-area__header h2 {
  font-size: inherit;
  font-weight: 700;
}

.monitor-area__header > div {
  white-space: nowrap;
}

/* Gesicherte Fundstücke bleiben abrufbar, ohne das Motiv erneut zu bevölkern. */
.monitor-area__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-area__evidence {
  padding: 3px 7px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.monitor-area__evidence:hover {
  border-color: var(--signal-light);
  color: var(--signal-light);
}

.monitor-area__transmission {
  border-color: #bc785c;
  background: #442c28;
  color: #ffe0bc;
  box-shadow: 0 0 16px rgba(210, 103, 68, .16);
  animation: transmission-found-pulse 2.5s ease-in-out 3;
}

.monitor-area__transmission:focus-visible {
  outline-offset: 2px;
}

[data-paused='true'] .monitor-area__transmission {
  animation-play-state: paused;
}

.monitor-area__evidence[hidden] {
  display: none;
}

.television {
  flex: 0 1 auto;
  align-self: center;
  width: min(100%, max(240px, calc((100dvh - 265px) * 1.6)));
  overflow: hidden;
  padding: clamp(10px, 1.55vw, 23px) clamp(10px, 1.5vw, 22px) 0;
  border: 1px solid #889392;
  border-radius: 16px 16px 20px 20px / 13px 13px 16px 16px;
  background: linear-gradient(115deg, #303739, #131b1c 22%, #232c2d 57%, #0b1113 91%);
  box-shadow: 0 16px 44px #0009, inset 0 2px #a4aeaa55, inset 2px 0 #80949222;
}

.television__badge,
.television__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8b9f9c;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.television__badge {
  margin-bottom: 11px;
}

.television__badge > span:first-child {
  color: var(--chalk);
  font-size: 11px;
  font-weight: 700;
}

.television__screen {
  overflow: hidden;
  padding: clamp(5px, .6vw, 9px);
  border: 1px solid #0a1113;
  border-radius: 12px / 9px;
  background: #040607;
  box-shadow: inset 0 0 0 2px #445557, inset 0 0 24px #000;
}

.scene {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  border-radius: 7px / 5px;
  background: #1e353a;
}

.scene__artwork,
.scene__video,
.scene__fog,
.scene__scanlines,
.scene__vignette,
.scene__signal-bleed,
.scene__anomaly,
.scene__window-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__artwork,
.scene__video {
  object-fit: cover;
  transition: none;
}

/* Nur die jeweils aktive Bildquelle wird gerendert – kein Alpha-Crossfade. */
.scene__video,
[data-source='video'] .scene__artwork {
  display: none;
}

[data-source='video'] .scene__video {
  display: block;
}

/* Der verschwundene Turm ist ein eigenes, deckungsgleiches Szenenbild.
   Der Wechsel erfolgt ohne Opacity-Animation, damit keine Bildreste entstehen. */
.scene__artwork--vacant { display: none; }

[data-lighthouse='missing'][data-source='artwork'] .scene__artwork:not(.scene__artwork--vacant) {
  display: none;
}

[data-lighthouse='missing'][data-source='artwork'] .scene__artwork--vacant {
  display: block;
}

/* Erst das Licht, danach die reale Struktur: kein optisches Zerbröseln. */
[data-finale='lighthouse'][data-lighthouse='dark'] .scene__beam--lighthouse,
[data-finale='lighthouse'][data-lighthouse='dark'] .scene__mast-led,
[data-finale='lighthouse'][data-lighthouse='missing'] .scene__beam--lighthouse,
[data-finale='lighthouse'][data-lighthouse='missing'] .scene__mast-led {
  opacity: 0;
  animation: none;
}

[data-finale='lighthouse'] .scene__window-light {
  opacity: 1;
  animation: none;
}

/* Drei Tiefenwirkungen aus einer dichten, weich auslaufenden Wolkentextur:
   atmosphärischer Dunst im Tal und zwei unabhängig driftende Nebelbänke. */
.scene__fog {
  z-index: 2;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 70% 34% at 25% 56%, rgba(167, 190, 195, .25), transparent 100%),
    radial-gradient(ellipse 64% 36% at 66% 79%, rgba(164, 182, 185, .13), transparent 100%);
  transition: none;
}

.scene__fog::before,
.scene__fog::after {
  content: '';
  position: absolute;
  left: -29%;
  width: 158%;
  background: url('assets/coastal-fog.webp') center / 100% 100% no-repeat;
  pointer-events: none;
  will-change: transform;
}

/* Weitflächiger Seenebel, der sich quer über Horizont und Klippen legt. */
.scene__fog::before {
  top: 22%;
  height: 60%;
  opacity: .96;
  animation: fog-bank-distant 46s ease-in-out -15s infinite alternate;
}

/* Tiefer, dichter Nebel in der Brandungszone, mit leicht gegenläufiger Drift. */
.scene__fog::after {
  top: 52%;
  height: 55%;
  opacity: .76;
  animation: fog-bank-near 33s ease-in-out -11s infinite alternate;
}

/* Transparente Fotoausschnitte dämpfen nur die echten Fensterscheiben.
   Die Ebene liegt bewusst hinter dem Nebel, damit atmosphärische Tiefe erhalten bleibt.
   Die farbigen Lampen stammen unverändert aus der Basisfotografie. */
.scene__window-lights {
  z-index: 1;
  pointer-events: none;
}

.scene__window-light {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 1;
  animation: none;
}

.scene__window-light--a {
  top: 35.97%;
  left: 62.5%;
  width: 2.421875%;
  animation-delay: -1.8s;
}

.scene__window-light--b {
  top: 35%;
  left: 64.765625%;
  width: 2.890625%;
  animation-delay: -4s;
}

.scene__window-light--c {
  top: 34.72%;
  left: 75.0%;
  width: 2.96875%;
  animation-delay: -6.3s;
}

/* Horizontaler CSS-Beam des Leuchtturms. Der Strahl ist als lokaler Layer direkt an der
   Laterne verankert und sweeped sichtbar nach links über die Küste. */
.scene__beam {
  position: absolute;
  pointer-events: none;
}

.scene__beam--lighthouse {
  z-index: 1;
  top: 2.083333%;
  left: 9.921875%;
  width: 51.8%;
  height: 24.4%;
  mix-blend-mode: screen;
  opacity: .46;
  transform-origin: 98.6% 50%;
  animation: none;
}

.scene__beam--lighthouse::before,
.scene__beam--lighthouse::after {
  content: '';
  position: absolute;
  inset: 0;
}

.scene__beam--lighthouse::before {
  clip-path: polygon(0 4%, 100% 44%, 100% 56%, 0 96%);
  background:
    radial-gradient(ellipse 138% 56% at 100% 50%,
      rgba(255, 236, 150, .94) 0%,
      rgba(255, 229, 126, .74) 8%,
      rgba(255, 221, 120, .50) 18%,
      rgba(255, 216, 120, .30) 30%,
      rgba(255, 214, 124, .14) 44%,
      rgba(255, 214, 124, 0) 64%),
    linear-gradient(90deg,
      rgba(255, 224, 130, 0) 0%,
      rgba(255, 226, 132, .02) 14%,
      rgba(255, 229, 138, .07) 30%,
      rgba(255, 233, 146, .16) 48%,
      rgba(255, 237, 156, .28) 66%,
      rgba(255, 242, 170, .42) 82%,
      rgba(255, 247, 186, .58) 100%),
    linear-gradient(180deg,
      rgba(255, 233, 150, 0) 0%,
      rgba(255, 235, 154, .04) 12%,
      rgba(255, 238, 162, .10) 28%,
      rgba(255, 242, 172, .18) 42%,
      rgba(255, 245, 180, .24) 50%,
      rgba(255, 242, 172, .18) 58%,
      rgba(255, 238, 162, .10) 72%,
      rgba(255, 235, 154, .04) 88%,
      rgba(255, 233, 150, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.48) 28%, rgba(0,0,0,.78) 46%, rgba(0,0,0,.76) 62%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.14) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.48) 28%, rgba(0,0,0,.78) 46%, rgba(0,0,0,.76) 62%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.14) 92%, transparent 100%);
  filter: blur(clamp(28px, 2.8vw, 42px));
}

.scene__beam--lighthouse::after {
  inset: 20% auto auto 80.8%;
  width: 21%;
  height: 40%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 247, 190, .9) 0%, rgba(255, 239, 166, .66) 20%, rgba(255, 231, 142, .36) 42%, rgba(255, 223, 128, .16) 64%, rgba(255, 220, 126, 0) 100%);
  filter: blur(18px);
}

/* Das rote Hindernislicht wird als CSS-Licht an der Mastspitze erzeugt. */
.scene__mast-led {
  position: absolute;
  z-index: 5;
  top: 8.055556%;
  left: 77.2525%;
  width: .625%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff6158;
  box-shadow:
    0 0 0 1px rgba(255, 195, 188, 0.26),
    0 0 8px 2px rgba(255, 101, 92, 0.62),
    0 0 18px 4px rgba(255, 82, 72, 0.28);
  opacity: 1;
  animation: none;
}

.scene__anomaly {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 24% 59%, #cf554a88 0%, #c8614429 5%, transparent 18%);
  transition: opacity 650ms ease;
}

.scene__signal-bleed {
  z-index: 5;
  opacity: var(--flicker-opacity);
  background: linear-gradient(0deg, transparent 0% 38%, #b8c5bc5c 39% 40%, transparent 42% 70%, #bd8f8066 72%, transparent 74%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: signal-drift 8s steps(2, end) infinite;
}

.scene__scanlines {
  z-index: 6;
  opacity: calc(.28 + var(--noise-opacity));
  background: repeating-linear-gradient(0deg, #0308098c 0 1px, transparent 2px 4px);
  pointer-events: none;
}

.scene__vignette {
  z-index: 7;
  background: radial-gradient(ellipse at center, transparent 44%, #020708b0 100%);
  box-shadow: inset 0 0 25px 8px #0009;
  pointer-events: none;
}

.scene__osd {
  position: absolute;
  z-index: 8;
  right: 3.3%;
  left: 3.3%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #e4e7e0;
  font-size: clamp(8px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .1em;
  text-shadow: 0 1px 4px #071011, 0 0 8px #071011;
}

.scene__osd--top {
  top: 5.1%;
}

.scene__osd--bottom {
  bottom: 5.2%;
}

.scene__record {
  color: #fff0e2;
}

.scene__record i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: #e56255;
  box-shadow: 0 0 8px #e56255a0;
}

.scene__signal-line {
  position: absolute;
  z-index: 9;
  top: 36%;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: var(--noise-opacity);
  background: #d7dfd5;
  pointer-events: none;
  animation: signal-line 6s linear infinite;
}

/* Interaktives Fundstück in CAM 02. Die Flaschenpost bleibt zunächst unsichtbar,
   materialisiert mit Glitch-Artefakten und liegt danach als klickbares Objekt
   im Felsvorsprung der Küstenkamera. */
.scene__artifact[hidden] {
  display: none;
}

.scene__artifact {
  position: absolute;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.scene__artifact--bottle {
  top: 66.15%;
  left: 80.55%;
  width: clamp(48px, 7.1vw, 92px);
  aspect-ratio: 1.33;
  transform: translate(-50%, -50%) rotate(-8deg) scale(.86);
  transform-origin: center;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .55));
  transition: none;
}

.scene__artifact--bottle:hover,
.scene__artifact--bottle:focus-visible {
  transform: translate(-50%, -50%) rotate(-6deg) scale(.95);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 8px rgba(212, 231, 231, .16));
}

.scene__artifact-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.scene__artifact-image--base {
  opacity: .96;
}

.scene__artifact-image--glitch {
  opacity: 0;
  transform: scale(1.07);
  filter: saturate(1.1) brightness(1.06);
  mix-blend-mode: screen;
}

/* Harte Signalausblendung bei blockiertem Kamerawechsel während des Morsecodes.
   Es wird keine neue Bildquelle aktiviert: CAM 01 bleibt technisch und visuell aktiv. */
.scene__camera-blackout {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: none;
  background: #000;
  pointer-events: none;
}

.scene__camera-blackout.is-active {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Der letzte Rettungsimpuls bleibt eine ausdrückliche Spieleraktion.
   Bei gefundenem Warnsignal erst nach der unumkehrbaren Entscheidung zugänglich. */
.receiver__uplink[hidden] { display: none; }

.receiver__uplink {
  display: grid;
  gap: 8px;
  margin: 8px 10px 12px;
  padding: 11px 13px;
  border: 1px solid #a9895a;
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(125, 82, 38, .19), rgba(8, 22, 24, .8));
  box-shadow: inset 0 0 24px rgba(210, 129, 69, .045);
}

.receiver__uplink-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #d8ba92;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
}

.receiver__uplink-led {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e5b675;
  box-shadow: 0 0 9px rgba(234, 163, 78, .5);
}

.receiver__uplink p {
  margin: 0;
  color: #bccbc5;
  font-size: 11px;
  line-height: 1.4;
}

.receiver__uplink-button,
.intro-dialog__start {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #dea96a;
  border-radius: 3px;
  background: #c38b53;
  color: #121b1b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .095em;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease;
}

.receiver__uplink-button:hover:not(:disabled),
.receiver__uplink-button:focus-visible,
.intro-dialog__start:hover,
.intro-dialog__start:focus-visible {
  background: #f2c18a;
  border-color: #ffe2aa;
}

.receiver__uplink-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.receiver__uplink small {
  color: #c5aa87;
  font-size: 9px;
  letter-spacing: .05em;
}

/* Eigene Finalebenen bleiben getrennt vom Video. Die Küste wird beim
   Öffnungsbeginn im letzten Frame angehalten; nur der Canvas bewegt sich weiter. */
.scene__finale-tint,
.scene__gate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene__finale-tint {
  z-index: 4;
  opacity: calc(var(--gate-light) * .68);
  background:
    radial-gradient(ellipse 70% 68% at 46% 49%, rgba(255, 110, 28, .42), rgba(154, 30, 10, .2) 60%, transparent 94%),
    linear-gradient(176deg, rgba(225, 57, 14, .32), rgba(85, 8, 3, .46));
  mix-blend-mode: screen;
  transition: opacity 240ms linear;
}

.scene__gate-canvas {
  z-index: 5;
  display: block;
  image-rendering: auto;
}

.scene__gate-canvas[hidden],
.scene__final-caption[hidden] { display: none; }

[data-finale='isolating'][data-source='video'] .scene__video { filter: grayscale(.45) brightness(.78); }
[data-finale='sealed'][data-source='video'] .scene__video { filter: grayscale(1) brightness(.08) contrast(1.25); }

[data-finale='isolating'] .scene__finale-tint,
[data-finale='sealed'] .scene__finale-tint { opacity: 0; }

[data-finale='lock'] .scene__relay-beacon,
[data-finale='triangulation'] .scene__relay-beacon,
[data-finale='opening'] .scene__relay-beacon,
[data-finale='open'] .scene__relay-beacon,
[data-finale='isolating'] .scene__relay-beacon,
[data-finale='sealed'] .scene__relay-beacon { display: none; }

[data-finale='triangulation'] .scene__signal-bleed,
[data-finale='opening'] .scene__signal-bleed,
[data-finale='open'] .scene__signal-bleed {
  opacity: .53;
  animation-duration: 2.2s;
}

[data-finale='opening'] .scene__scanlines,
[data-finale='open'] .scene__scanlines { opacity: .78; }

[data-finale='opening'] .scene__signal-line,
[data-finale='open'] .scene__signal-line { opacity: .55; }

[data-anomaly='overload'] .readout-bars i {
  background: #f17533;
  transition: none;
  box-shadow: 0 0 5px rgba(255, 98, 36, .68);
}

[data-finale='opening'] .monitor-extras__readout,
[data-finale='open'] .monitor-extras__readout { color: #f49a65; }

.scene__final-caption {
  position: absolute;
  z-index: 11;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 84%;
  padding: 6px 13px;
  border: 1px solid rgba(233, 121, 63, .52);
  background: rgba(11, 8, 8, .72);
  color: #ffbd8d;
  font-size: clamp(9px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: .23em;
  text-align: center;
  text-shadow: 0 0 9px rgba(255, 126, 53, .4);
  pointer-events: none;
}

[data-finale='sealed'] .scene__record i {
  opacity: 0;
}

[data-finale='sealed'] .scene__final-caption {
  border-color: #778785;
  color: #c3d0ca;
  text-shadow: none;
}

/* Bei reduzierter Bewegung bleibt die Zustandsänderung lesbar,
   aber ohne Kamera-Crossfade oder hektische Flächenblitze. */
@media (prefers-reduced-motion: reduce) {
  .scene__finale-tint { transition: none; }
}

/* 07   Story-Artefakte, Dialoge und Quellenhinweise */

.artifact-dialog,
.info-dialog {
  position: fixed;
  border: 1px solid #78908b;
  border-radius: 2px;
  color: var(--chalk);
  box-shadow: 12px 12px 0 #03080988, 0 30px 80px #0009;
}

.artifact-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(680px, calc(100svh - 32px));
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(132deg, #243336, #111a1c 65%);
}

.artifact-dialog::backdrop,
.info-dialog::backdrop {
  background: #030709bb;
  backdrop-filter: blur(5px);
}

.artifact-dialog__header,
.info-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge);
}

.artifact-dialog__close,
.info-dialog__close {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--chalk);
  font-size: 25px;
  line-height: 1;
}

.artifact-dialog__close:hover,
.info-dialog__close:hover {
  border-color: var(--secondary);
  background: var(--surface-raised);
}

.artifact-dialog__layout {
  display: grid;
  grid-template-columns: minmax(180px, 228px) minmax(0, 1fr);
  gap: 26px;
  margin-top: 22px;
  align-items: start;
}

.artifact-dialog__preview {
  position: relative;
  padding: 16px;
  border: 1px solid var(--edge-soft);
  background: linear-gradient(180deg, rgba(18, 29, 31, .92), rgba(10, 16, 17, .96));
}

.artifact-dialog__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 34%, rgba(0, 0, 0, .34) 100%);
  pointer-events: none;
}

.artifact-dialog__preview img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}

.artifact-note {
  position: relative;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(146, 130, 102, .46);
  background:
    linear-gradient(180deg, rgba(232, 223, 199, .96), rgba(202, 187, 158, .95)),
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .18), transparent 32%);
  color: #2a271f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 28px rgba(0, 0, 0, .18);
}

.artifact-note::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(90, 77, 58, .022) 0 2px, transparent 2px 6px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.artifact-note__eyebrow {
  margin: 0 0 12px;
  color: #564b38;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.artifact-note h2 {
  margin: 0;
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(42px, 5vw, 62px);
  line-height: .92;
  letter-spacing: -.04em;
}

.artifact-note__body {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.artifact-note__body p,
.artifact-note__footer {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #3a352a;
  font-size: 14px;
  line-height: 1.62;
}

.artifact-note__footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(90, 77, 58, .22);
  color: #5b5140;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.info-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: min(680px, calc(100svh - 32px));
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(132deg, #253438, #111b1d 65%);
}

.intro-dialog h2 {
  margin-top: 20px;
  font-size: clamp(36px, 10vw, 52px);
}

.intro-dialog__start {
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
}

.info-dialog__logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 20px 0 8px;
}

.info-dialog h2 {
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(48px, 10vw, 66px);
  letter-spacing: -.035em;
  line-height: 1;
}

.info-dialog p {
  max-width: 35ch;
  margin-top: 12px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.55;
}

.info-dialog__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 25px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.info-dialog__links {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.info-dialog__links a {
  padding: 14px 0;
  border-bottom: 1px solid var(--edge-soft);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
}

.info-dialog__links a:hover {
  color: var(--signal-light);
}

.television__footer {
  min-height: 47px;
}

.television__power {
  display: flex;
  align-items: center;
  gap: 7px;
}

.television__power i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b4cb9e;
  box-shadow: 0 0 9px #b4cb9e;
}

.television__vents {
  width: 68px;
  height: 11px;
  background: repeating-linear-gradient(90deg, #070c0d 0 2px, transparent 2px 5px);
}

/* 06   Wiedergabe und Telemetrie */

.monitor-extras {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--edge);
  font-size: 10px;
}

.monitor-extras__caption {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.monitor-extras__caption strong {
  color: var(--chalk);
  font-weight: 700;
}

.monitor-extras__message {
  color: var(--secondary);
  font-size: 11px;
  line-height: 1.55;
}

.monitor-extras__readout {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  white-space: nowrap;
}

.readout-bars {
  display: flex;
  height: 22px;
  align-items: end;
  gap: 3px;
}

/* Die Balken zeigen ausschließlich die momentane Präsenz in der aktiven Kamera.
   Nach einem Ereignis oder Kameraschnitt kehren sie in den Ruhezustand zurück. */
.readout-bars i {
  width: 3px;
  height: 8%;
  flex-shrink: 0;
  background: #89aea3;
  transition: height 320ms ease-out, background-color 480ms ease;
}

[data-anomaly='active'] .readout-bars i:nth-child(4n) {
  background: #b5b88e;
}

[data-anomaly='high'] .readout-bars i:nth-child(3n) {
  background: var(--signal);
}

[data-paused='true'] .readout-bars i,
[data-story='routine'][data-source='artwork'] .readout-bars i {
  transition: none;
}

/* Empfangsarchiv mit echter Funkaufnahme, Player und DE/EN-Mitschrift. */
.transmission-dialog {
  width: min(540px, calc(100% - 32px));
  padding: 22px;
  background: linear-gradient(145deg, #233437, #111b1d 70%);
}

.transmission-dialog__display {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  margin: 20px 0;
  padding: 12px 16px;
  border: 1px solid #395350;
  background: #091618;
  color: #b9dbcc;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}

.transmission-dialog__led {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px #d7685488;
}

.transmission-dialog__wave {
  width: 60px;
  height: 22px;
  margin-left: auto;
  background: repeating-linear-gradient(90deg,
    transparent 0 4px, #7daca0 4px 6px, transparent 6px 9px);
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 47%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 47%, transparent 98%);
  opacity: .6;
}

/* Nativer Player: echte Funkaufnahme mit direkter Wiederholung aus der Akte. */
.transmission-dialog__audio {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 0 0 20px;
  border: 1px solid #395350;
  border-radius: 4px;
  background: #121c1e;
  color-scheme: dark;
}

.transmission-dialog__content h2 {
  max-width: 14ch;
  margin: 12px 0 20px;
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(38px, 8vw, 58px);
  line-height: .97;
}

.transmission-dialog__content p {
  margin: 0 0 14px;
  color: var(--chalk);
  font-size: 14px;
  line-height: 1.65;
}

.transmission-dialog__content .transmission-dialog__footer {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .07em;
}

/* Aktiver Entfernungsping: vollständig vom statischen Frequenzstatus getrennt. */
.tuning-control__probe {
  display: flex;
  min-height: 35px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

.tuning-control__probe[hidden] { display: none; }

.tuning-control__probe-status {
  flex: 1 1 auto;
  min-width: 0;
  color: #9db3ac;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receiver__relay-link {
  flex: 0 0 auto;
  min-height: 32px;
  margin-left: auto;
  margin-right: 0;
  padding: 6px 11px;
  border: 1px solid #c78b69;
  background: #443026;
  color: #ffe4cd;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.receiver__relay-link:hover:not(:disabled) {
  border-color: #f8b58c;
  background: #70412f;
}

.receiver__relay-link[hidden] {
  display: none;
}


/* Unaufdringliche Positionslichter statt großer, offensichtlich anklickbarer Marker.
   Die visuelle Fläche bleibt winzig; die interaktive Trefferfläche ist großzügig. */
.scene__relay-beacon {
  position: absolute;
  z-index: 10;
  display: grid;
  width: clamp(32px, 4.3vw, 46px);
  height: clamp(32px, 4.3vw, 46px);
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  cursor: crosshair;
}

.scene__relay-beacon[hidden],
[data-source='artwork'] .scene__relay-beacon {
  display: none;
}

.scene__relay-beacon--a { left: 23%; top: 41%; }
.scene__relay-beacon--b { left: 69%; top: 36%; }
.scene__relay-beacon--c { left: 47%; top: 61%; }

.scene__relay-beacon span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c1a895;
  box-shadow: 0 0 7px #e1bd96cc, 0 0 13px #9ec3b35c;
  opacity: .45;
}

.scene__relay-beacon:hover span,
.scene__relay-beacon:focus-visible span,
.scene__relay-beacon[data-detected='true'] span {
  background: #ffe1b0;
  box-shadow: 0 0 8px 2px #e9ba89aa, 0 0 20px 6px #e9ba8952;
  opacity: 1;
}

.scene__relay-beacon[data-linked='true'] span {
  background: #9abdb0;
  box-shadow: 0 0 5px #86baab9c;
  opacity: .7;
}

.scene__relay-beacon[data-detected='true']:not([data-linked='true']) span {
  animation: relay-beacon-pulse 1.7s ease-in-out infinite;
}

/* Relaisprotokoll im selben analogen Stil wie Funk- und Funddialogs. */
.relay-dialog {
  width: min(570px, calc(100% - 32px));
  padding: 20px;
  background: linear-gradient(145deg, #223235, #101a1b 70%);
}

.relay-dialog__content h2 {
  margin: 20px 0 12px;
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1;
}

.relay-dialog__content > p:not(.relay-dialog__progress) {
  margin-bottom: 24px;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.65;
}

.relay-dialog__heading,
.relay-dialog__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.relay-dialog__heading {
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
}

.relay-dialog__row {
  min-height: 50px;
  border-bottom: 1px solid var(--edge-soft);
  background: #0b1718;
  color: #d0d9d2;
}

.relay-dialog__row:focus {
  outline: 2px solid #ffad86;
  outline-offset: -2px;
}

.relay-dialog__status {
  justify-self: end;
  color: #c99b8b;
  font-size: 10px;
  font-weight: 700;
}

.relay-dialog__row[data-linked='true'] .relay-dialog__status {
  color: #9fd4ad;
}

.relay-dialog__progress {
  margin-top: 20px;
  padding: 12px;
  border: 1px solid var(--edge);
  background: #081415;
  color: #c7d4c9;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* Oszilloskop-Kalibrierung als nativer und responsiver Modal-Dialog. */
.sync-dialog {
  width: min(610px, calc(100% - 24px));
  max-height: min(92dvh, 780px);
  overflow-y: auto;
  padding: clamp(14px, 2vw, 24px);
  background: linear-gradient(145deg, #223235, #101a1b 70%);
}

.sync-dialog__content h2 {
  margin: 17px 0 8px;
  font-family: 'B2 Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: .045em;
}

.sync-dialog__content > p {
  max-width: 58ch;
  margin-bottom: 18px;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.6;
}

.sync-dialog__scope {
  position: relative;
  overflow: hidden;
  border: 1px solid #405f5b;
  background: #061518;
  box-shadow: inset 0 0 16px #020908;
}

.sync-dialog__scope svg {
  display: block;
  width: 100%;
  height: clamp(140px, 23dvh, 210px);
}

.sync-dialog__wave {
  fill: none;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.sync-dialog__wave--a { stroke: #91e0cd; }
.sync-dialog__wave--b { stroke: #ffc58e; }
.sync-dialog__wave--c { stroke: #c6b2f2; }

.sync-dialog__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-top: 1px solid #334e4b;
  color: #bbd1c5;
  font-family: var(--font-mono);
  font-size: 10px;
}

.sync-dialog__legend span:nth-child(1) { color: #91e0cd; }
.sync-dialog__legend span:nth-child(2) { color: #ffc58e; }
.sync-dialog__legend span:nth-child(3) { color: #c6b2f2; }

.sync-dialog__control { margin-top: 18px; }

.sync-dialog__control-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #c1d1c7;
  font-family: var(--font-mono);
  font-size: 11px;
}

.sync-dialog__control-label output { color: #f7d1a6; font-variant-numeric: tabular-nums; }

.sync-dialog__control input {
  width: 100%;
  margin: 14px 0 4px;
  accent-color: #f3ad7f;
  cursor: pointer;
}

.sync-dialog__control input:disabled { cursor: default; opacity: .55; }

.sync-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}

.sync-dialog__foot p {
  color: #d5c7a2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.sync-dialog__foot button {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #deb08c;
  background: #e6bc96;
  color: #16201e;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.sync-dialog__foot button:disabled {
  border-color: #596765;
  background: #354341;
  color: #9daea7;
  cursor: not-allowed;
}

.sync-dialog button:focus-visible,
.sync-dialog input:focus-visible {
  outline: 2px solid #f5c5a2;
  outline-offset: 3px;
}

@keyframes relay-beacon-pulse {
  0%, 100% { opacity: .46; box-shadow: 0 0 5px #e9ba895e; }
  50% { opacity: 1; box-shadow: 0 0 11px 3px #e9ba89cc, 0 0 22px 8px #e9ba8940; }
}

/* 08   Zustandswechsel und Animationen */

[data-state='interference'] .scene__fog::before,
[data-state='unknown'] .scene__fog::before {
  opacity: 1;
}

[data-state='interference'] .scene__fog::after {
  opacity: .89;
}

[data-state='unknown'] .scene__fog::after {
  opacity: 1;
}

[data-state='unknown'] .scene__anomaly {
  opacity: 1;
}

[data-state='interference'] .scene__artwork,
[data-state='interference'] .scene__video,
[data-state='interference'] .scene__window-lights {
  filter: saturate(.67) contrast(1.1) brightness(.83);
}

[data-state='unknown'] .scene__artwork,
[data-state='unknown'] .scene__video,
[data-state='unknown'] .scene__window-lights {
  filter: saturate(.63) sepia(.15) hue-rotate(313deg) contrast(1.17) brightness(.49);
}

[data-state='offair'] .scene__artwork,
[data-state='offair'] .scene__video,
[data-state='offair'] .scene__window-lights {
  filter: saturate(.45) contrast(1.2) brightness(.63);
}

[data-state='offair'] .scene__fog {
  opacity: .9;
}

[data-state='interference'] .scene__window-light {
  animation-duration: 4.5s;
}

[data-state='interference'] .scene__beam--lighthouse {
  opacity: .34;
  filter: saturate(1.02) brightness(.97);
}

[data-state='unknown'] .scene__window-light {
  animation-duration: 2.7s;
}

[data-state='unknown'] .scene__beam--lighthouse {
  opacity: .28;
  filter: saturate(.96) brightness(.92);
}

[data-state='interference'] .scene__mast-led {
  animation: mast-led-fault 4s steps(1, end) infinite;
}

[data-state='unknown'] .scene__mast-led {
  animation: mast-led-unknown 5.3s steps(1, end) infinite;
}

[data-state='offair'] .scene__beam--lighthouse,
[data-state='offair'] .scene__mast-led {
  opacity: 0;
  animation: none;
}

[data-state='offair'] .receiver__status-led,
[data-state='interference'] .receiver__status-led,
[data-state='unknown'] .receiver__status-led {
  background: var(--signal);
  box-shadow: 0 0 10px #d7685488;
}


/* Die Geschichte kontrolliert die Lichtquellen – Frequenzen allein lösen noch keine Ereignisse aus. */
[data-story='routine'] .scene__window-light,
[data-story='message-found'] .scene__window-light,
[data-story='morse-active'] .scene__window-light,
[data-story='transmission-ready'] .scene__window-light {
  opacity: 1;
  animation: none;
}

[data-story='routine'] .scene__mast-led,
[data-story='message-found'] .scene__mast-led {
  opacity: 1;
  animation: none;
}

/* Das Morsezeichen ist ausschließlich bei 91.3 MHz auf CAM 01 aktiv.
   Bei anderen Frequenzen bleibt das Signal wieder konstant statt weiterzufunken. */
[data-story='morse-active'] .scene__mast-led {
  opacity: 1;
  animation: none;
}

[data-story='morse-active'][data-state='interference'][data-source='artwork'] .scene__mast-led {
  animation: none;
}

[data-story='windows-event'] .scene__window-light,
[data-story='frequency-scan'] .scene__window-light {
  animation-name: window-dim;
  animation-duration: 8s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

[data-story='windows-event'] .scene__mast-led,
[data-story='frequency-scan'] .scene__mast-led {
  animation: mast-led-fault 4s steps(1, end) infinite;
}

/* Nach vollständigem Phasenabgleich reagiert die Station gegenläufig:
   Der Leuchtkegel erlischt, die Fenster bleiben schwarz. Der Mast sendet ein
   zweites Morsemuster (1024), das eine neue Empfangsfrequenz verschlüsselt. */
[data-story='synchronized'] .scene__window-light {
  opacity: 1;
  animation: none;
}

[data-story='synchronized'] .scene__beam--lighthouse {
  opacity: 0;
  animation: none;
}

/* Nach Entdeckung ist das Warnsignal verstummt; die Station reagiert nicht mehr. */
[data-story='warning-received'] .scene__beam--lighthouse,
[data-story='rescue-standby'] .scene__beam--lighthouse,
[data-story='signal-isolated'] .scene__beam--lighthouse {
  opacity: 0;
  animation: none;
}

[data-story='warning-received'] .scene__mast-led,
[data-story='rescue-standby'] .scene__mast-led {
  opacity: .28;
  animation: none;
}

[data-story='signal-isolated'] .scene__mast-led {
  opacity: 0;
  animation: none;
}

[data-story='warning-received'] .scene__window-light,
[data-story='rescue-standby'] .scene__window-light,
[data-story='signal-isolated'] .scene__window-light {
  opacity: 1;
  animation: none;
}

/* Der Entscheidungspunkt fügt sich in den bestehenden terminalartigen Archiv-Stil ein. */
.receiver__decision-result {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--accent, #e77d64);
  background: rgba(115, 134, 136, .10);
  font: inherit;
  font-size: .68rem;
  line-height: 1.45;
  letter-spacing: .07em;
}

.receiver__decision-result[hidden] {
  display: none;
}

.decision-dialog__content {
  padding: clamp(20px, 4vw, 38px);
}

.decision-dialog__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: .68rem;
  letter-spacing: .16em;
  opacity: .7;
}

.decision-dialog__content h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: .07em;
}

.decision-dialog__content > p:not(.decision-dialog__note) {
  margin: 0 0 25px;
  max-width: 58ch;
  line-height: 1.6;
}

.decision-dialog__routes {
  display: grid;
  gap: 12px;
}

.decision-dialog__route {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear;
}

.decision-dialog__route:hover,
.decision-dialog__route:focus-visible {
  background: rgba(139, 164, 166, .13);
  border-color: #e29575;
}

.decision-dialog__route:focus-visible {
  outline: 2px solid #e29575;
  outline-offset: 3px;
}

.decision-dialog__route[aria-pressed='true'] {
  border-color: #e29575;
  box-shadow: inset 3px 0 #e29575;
}

.decision-dialog__route span {
  font-weight: 700;
  font-size: clamp(.8rem, 2vw, 1rem);
  letter-spacing: .065em;
}

.decision-dialog__route small {
  font-size: .77rem;
  line-height: 1.5;
  opacity: .75;
}

.decision-dialog__note {
  margin: 20px 0 0;
  opacity: .65;
  font-size: .69rem;
  letter-spacing: .025em;
  line-height: 1.55;
}



/* Die gewählte Kamera hat Vorrang vor den frequenzabhängigen Lichtzuständen. */
[data-source='video'] .scene__window-lights,
[data-source='video'] .scene__fog,
[data-source='video'] .scene__anomaly {
  display: none;
}

/* Beim Kameracut verschwindet die Flasche im selben Frame wie CAM 02.
   display:none verhindert Restbilder trotz Reveal-Keyframes. */
[data-source='artwork'] .scene__artifact--bottle {
  display: none;
}

[data-bottle='hidden'] .scene__artifact--bottle,
[data-bottle='waiting'] .scene__artifact--bottle,
[data-bottle='collected'] .scene__artifact--bottle {
  display: none;
  opacity: 0;
  pointer-events: none;
}

[data-source='video'][data-bottle='visible'] .scene__artifact--bottle,
[data-source='video'][data-bottle='opened'] .scene__artifact--bottle,
[data-source='video'][data-bottle='materializing'] .scene__artifact--bottle {
  opacity: .94;
  pointer-events: auto;
}

[data-bottle='opened'] .scene__artifact--bottle {
  transform: translate(-50%, -50%) rotate(-8deg) scale(.92);
}

[data-bottle='materializing'] .scene__artifact--bottle {
  animation: artifact-bottle-arrive 2s ease-out both;
}

[data-bottle='materializing'] .scene__artifact-image--base {
  animation: artifact-bottle-core 2s ease-out both;
}

[data-bottle='materializing'] .scene__artifact-image--glitch {
  animation: artifact-bottle-glitch 2s steps(1, end) both;
}

/* Die Flasche liegt nach dem Reveal stabil auf dem Felsen. */
[data-bottle='visible'] .scene__artifact--bottle,
[data-bottle='opened'] .scene__artifact--bottle {
  transform: translate(-50%, -50%) rotate(-8deg) scale(.92);
  animation: none;
}

[data-paused='true'] .scene *,
[data-paused='true'] .scene__fog::before,
[data-paused='true'] .scene__fog::after,
[data-paused='true'] .readout-bars i {
  animation-play-state: paused;
}

@keyframes artifact-bottle-arrive {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.9); }
  16% { opacity: .28; transform: translate(-50%, -50%) rotate(-8deg) scale(.92); }
  38% { opacity: .62; transform: translate(-50%, -50%) rotate(-8deg) scale(.92); }
  55% { opacity: .52; transform: translate(-50%, -50%) rotate(-8deg) scale(.92); }
  80%, 100% { opacity: .94; transform: translate(-50%, -50%) rotate(-8deg) scale(.92); }
}

@keyframes artifact-bottle-core {
  0% { opacity: 0; filter: blur(4px); }
  35% { opacity: .76; filter: blur(1.5px); }
  72%, 100% { opacity: .96; filter: blur(0); }
}

@keyframes artifact-bottle-glitch {
  0%, 14% { opacity: 0; transform: translate3d(0,0,0) scale(1.01); }
  15%, 20% { opacity: .68; transform: translate3d(-2px,1px,0) scale(1.03); }
  21%, 39% { opacity: 0; }
  40%, 45% { opacity: .48; transform: translate3d(2px,-1px,0) scale(1.02); }
  46%, 63% { opacity: 0; }
  64%, 68% { opacity: .22; transform: translate3d(-1px,0,0) scale(1.01); }
  69%, 100% { opacity: 0; transform: translate3d(0,0,0) scale(1); }
}

@keyframes transmission-found-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(210, 103, 68, 0); }
  50% { box-shadow: 0 0 14px rgba(210, 103, 68, .5); }
}

@keyframes fog-bank-distant {
  from { transform: translate3d(-8%, -1%, 0) scale(1); }
  to { transform: translate3d(8%, 1.5%, 0) scale(1.045); }
}

@keyframes fog-bank-near {
  from { transform: translate3d(7%, 1.5%, 0) scale(1.065); }
  to { transform: translate3d(-7%, -1%, 0) scale(1); }
}

@keyframes window-dim {
  0%, 20%, 25%, 48%, 54%, 74%, 78%, 100% { opacity: 0; }
  21%, 24% { opacity: .92; }
  49%, 53% { opacity: .68; }
  75%, 77% { opacity: .97; }
}



@keyframes mast-led-normal {
  0%, 19%, 100% { opacity: 0; }
  20%, 54% { opacity: 1; }
}

@keyframes mast-led-fault {
  0%, 8%, 44%, 66%, 100% { opacity: 0; }
  9%, 19%, 48%, 59% { opacity: 1; }
}

@keyframes mast-led-unknown {
  0%, 14%, 54%, 61%, 93%, 100% { opacity: 1; }
  15%, 53%, 62%, 92% { opacity: 0; }
}

@keyframes lighthouse-beam-horizontal {
  0%, 10%, 100% { opacity: 0; transform: scaleX(.28) scaleY(.78); }
  18% { opacity: .18; transform: scaleX(.52) scaleY(.84); }
  30% { opacity: .42; transform: scaleX(.78) scaleY(.92); }
  40% { opacity: .62; transform: scaleX(1) scaleY(1); }
  52% { opacity: .38; transform: scaleX(1.12) scaleY(1.03); }
  64% { opacity: .14; transform: scaleX(1.2) scaleY(1.05); }
  74%, 92% { opacity: 0; transform: scaleX(1.26) scaleY(1.08); }
}

@keyframes lighthouse-beam-fault {
  0%, 12%, 34%, 58%, 100% { opacity: 0; transform: scaleX(.24) scaleY(.78); }
  13%, 19% { opacity: .22; transform: scaleX(.48) scaleY(.84); }
  20%, 27% { opacity: .58; transform: scaleX(.88) scaleY(.96); }
  28%, 33% { opacity: .07; transform: scaleX(1.02) scaleY(1); }
  35%, 44% { opacity: .34; transform: scaleX(1.12) scaleY(1.04); }
  45%, 57% { opacity: 0; transform: scaleX(1.24) scaleY(1.08); }
  58%, 67% { opacity: .18; transform: scaleX(.72) scaleY(.9); }
  68%, 99% { opacity: 0; transform: scaleX(1.28) scaleY(1.08); }
}

@keyframes lighthouse-beam-unknown {
  0%, 14%, 38%, 56%, 100% { opacity: 0; transform: scaleX(.2) scaleY(.76); }
  15%, 21% { opacity: .18; transform: scaleX(.44) scaleY(.82); }
  22%, 31% { opacity: .48; transform: scaleX(.84) scaleY(.94); }
  32%, 37% { opacity: .08; transform: scaleX(1.02) scaleY(1.02); }
  39%, 53% { opacity: .3; transform: scaleX(1.18) scaleY(1.06); }
  54%, 71% { opacity: 0; transform: scaleX(1.3) scaleY(1.1); }
  72%, 81% { opacity: .14; transform: scaleX(.68) scaleY(.88); }
  82%, 99% { opacity: 0; transform: scaleX(1.28) scaleY(1.1); }
}

@keyframes signal-drift {
  0%, 45%, 100% { transform: translateY(0); }
  46%, 47% { transform: translateY(4%); }
  49%, 50% { transform: translateY(-3%); }
}

@keyframes signal-line {
  0% { top: 20%; }
  100% { top: 95%; }
}

@media (max-width: 720px) {
  .artifact-dialog {
    padding: 18px;
  }

  .artifact-dialog__layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .artifact-dialog__preview {
    max-width: 240px;
  }

  .artifact-note h2 {
    font-size: clamp(34px, 10vw, 48px);
  }
}

/* 09   Responsive Verhalten */

@media (max-width: 1330px) {
  .topbar__ident {
    display: none;
  }

  .workstation {
    grid-template-columns: minmax(280px, .83fr) minmax(0, 1.7fr);
    gap: 24px;
  }

  .control-panel h1 {
    font-size: clamp(48px, 5.4vw, 88px);
  }

  .monitor-extras {
    grid-template-columns: minmax(110px, .85fr) minmax(130px, 1.2fr) auto;
    gap: 9px;
  }

  .readout-bars {
    gap: 2px;
  }
}

@media (max-width: 1050px) and (min-width: 751px) {
  .workstation {
    grid-template-columns: minmax(260px, .82fr) minmax(0, 1.62fr);
    gap: 18px;
  }

  .control-panel h1 {
    font-size: clamp(49px, 5.1vw, 74px);
  }

  .monitor-extras__message {
    font-size: 10px;
  }

  .monitor-extras__readout .readout-bars {
    display: none;
  }

  .source-switch button {
    padding-inline: 2px;
    font-size: 8px;
  }
}

/* Die vollständige Notrufbedienung muss auch auf 720-/768-px-Displays sichtbar bleiben.
   :has() reduziert nur bei eingeblendetem Rückkanal die dekorativen Abstände. */
@media (min-width: 751px) {
  .control-panel:has(.receiver__uplink:not([hidden])) .control-panel__heading {
    padding-bottom: 6px;
  }

  .control-panel:has(.receiver__uplink:not([hidden])) .control-panel__heading .lead {
    display: none;
  }

  .control-panel:has(.receiver__uplink:not([hidden])) .receiver__display {
    margin-top: 9px;
    margin-bottom: 9px;
    padding-top: 10px;
    padding-bottom: 7px;
  }

  .control-panel:has(.receiver__uplink:not([hidden])) .receiver__scale {
    margin-top: 8px;
    padding-top: 6px;
  }
}

@media (max-height: 850px) and (min-width: 751px) {
  .workstation {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .control-panel__heading {
    padding-bottom: 12px;
  }

  .control-panel h1 {
    font-size: clamp(62px, 7vw, 100px);
  }

  .lead {
    font-size: 12px;
    line-height: 1.4;
  }

  .receiver__display {
    margin: 10px 12px;
    padding: 11px 13px 8px;
  }

  .receiver__freq {
    font-size: clamp(39px, 4vw, 59px);
  }

  .receiver__scale {
    margin-top: 9px;
    padding-top: 7px;
  }

  .tuning-control {
    margin: 0 12px 10px;
    padding-top: 9px;
  }

  .tuning-control input {
    margin: 11px 0 10px;
  }

  .receiver-actions {
    margin: 0 12px 10px;
  }

  .source-switch button,
  .pause-toggle {
    min-height: 36px;
  }

  .monitor-extras {
    margin-top: 9px;
    padding-top: 9px;
  }
}

/* Schmale Desktopfenster mit wenig Höhe: der letzte Sendebefehl bleibt im Viewport. */
@media (min-width: 751px) and (max-width: 900px) and (max-height: 650px) {
  .receiver__uplink {
    gap: 6px;
    margin: 6px 8px 8px;
    padding: 9px 10px;
  }

  .source-switch button {
    font-size: 7px;
  }
}

@media (max-height: 680px) and (min-width: 751px) {
  .topbar {
    flex-basis: 56px;
  }

  .control-panel__heading {
    padding-bottom: 8px;
  }

  .control-panel h1 {
    margin-block: 3px;
    font-size: clamp(55px, 6vw, 78px);
  }

  .lead {
    display: none;
  }

  .panel-bar {
    min-height: 30px;
  }

  .receiver__display {
    margin: 7px 10px;
    padding: 7px 10px;
  }

  .receiver__status {
    margin-top: 5px;
  }

  .receiver__scale {
    margin-top: 7px;
    padding-top: 5px;
  }

  .tuning-control {
    padding-top: 6px;
  }

  .tuning-control input {
    margin-block: 8px;
  }

  .television__footer {
    min-height: 33px;
  }

  .source-switch button,
  .pause-toggle {
    min-height: 36px;
  }
}

@media (max-width: 750px), (max-height: 680px), (max-width: 1050px) and (max-height: 750px) {
  html {
    height: auto;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
  }

  body {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .broadcast-shell {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    padding-inline: 12px;
    overflow: visible;
  }

  .topbar {
    flex-basis: 58px;
    gap: 8px;
  }

  .topbar__actions {
    gap: 5px;
  }

  .topbar__actions button,
  .topbar__actions a {
    min-height: 35px;
    padding: 7px 9px;
  }

  .station-brand {
    gap: 6px;
  }

  .station-brand__mark {
    width: 34px;
    height: 34px;
  }

  .station-brand__copy strong {
    font-size: 18px;
  }

  .station-brand__copy small {
    max-width: 90px;
    font-size: 7px;
    line-height: 1.2;
  }

  .topbar__info span,
  .topbar__back .back-label {
    display: none;
  }

  .topbar__back {
    min-width: 34px;
  }

  .workstation {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "monitor" "receiver";
    gap: 18px;
    padding: 10px 0 20px;
    overflow: visible;
  }

  .monitor-area {
    height: auto;
    justify-content: flex-start;
  }

  .monitor-area__header {
    flex: 0 0 auto;
    min-height: 25px;
    font-size: 9px;
  }

  .monitor-area__header > div {
    display: none;
  }

  /* Gesicherte Hinweise bleiben auch bei der kompakten Kameraansicht erreichbar. */
  .monitor-area__header {
    align-items: center;
  }

  .monitor-area__header h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .monitor-area__header > .monitor-area__actions {
    display: flex;
    flex-shrink: 0;
    gap: 5px;
  }

  .monitor-area__actions > .indicator,
  .monitor-area__actions > [data-copy='transmitting'] {
    display: none;
  }

  .monitor-area__evidence {
    padding: 3px 5px;
    font-size: 8px;
  }

  .television {
    flex: 0 1 auto;
    width: 100%;
  }

  .television__footer {
    min-height: 30px;
  }

  .television__footer > span:nth-child(2) {
    display: none;
  }

  .source-switch button,
  .pause-toggle,
  .sound-toggle {
    min-height: 44px;
    font-size: 9px;
  }

  .pause-toggle {
    min-width: 64px;
  }

  .monitor-extras {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    margin-top: 10px;
    padding-top: 9px;
  }

  .monitor-extras__caption {
    gap: 3px;
    font-size: 9px;
  }

  .monitor-extras__message {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 10px;
    line-height: 1.3;
  }

  .monitor-extras__readout {
    grid-column: 2;
    grid-row: 1;
    gap: 5px;
    font-size: 9px;
  }

  .readout-bars {
    height: 16px;
    gap: 2px;
  }

  .readout-bars i {
    width: 2px;
  }

  .control-panel {
    display: block;
    width: 100%;
    overflow: visible;
  }

  .control-panel__heading {
    flex: 0 0 auto;
    padding-bottom: 12px;
  }

  .control-panel h1 {
    margin: 5px 0 3px;
    font-size: clamp(52px, 13.5vw, 94px);
  }

  .lead {
    display: none;
  }

  .receiver {
    flex: 0 0 auto;
    min-height: 0;
  }

  .panel-bar {
    min-height: 30px;
  }

  .receiver__display {
    margin: 9px 11px;
    padding: 9px 11px 6px;
  }

  .receiver__freq {
    font-size: clamp(40px, 11vw, 58px);
  }

  .receiver__status {
    margin-top: 5px;
  }

  .receiver__scale {
    margin-top: 8px;
    padding-top: 6px;
  }

  .tuning-control {
    margin: 0 11px 10px;
    padding-top: 9px;
  }

  .tuning-control input {
    margin-block: 10px 8px;
  }

  .receiver-actions {
    margin: 0 11px 10px;
  }

  .receiver__archive {
    margin: 0 11px 10px;
    padding-top: 8px;
  }

  .source-switch button,
  .pause-toggle,
  .sound-toggle {
    min-height: 44px;
  }
}

@media (max-height: 620px) and (max-width: 750px) {
  .control-panel {
    padding-block: 7px;
  }

  .control-panel__heading {
    padding-bottom: 6px;
  }

  .control-panel h1 {
    font-size: 55px;
  }

  .control-panel__heading .eyebrow {
    display: none;
  }

  .receiver__display {
    margin-block: 5px;
    padding-block: 5px;
  }

  .receiver__scale {
    margin-top: 5px;
    padding-top: 3px;
  }

  .tuning-control {
    margin-bottom: 6px;
    padding-top: 6px;
  }

  .tuning-control input {
    margin-block: 6px;
  }

  .receiver-actions {
    margin-bottom: 6px;
  }

  .source-switch button,
  .pause-toggle,
  .sound-toggle {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .station-brand__mark {
    width: 28px;
    height: 28px;
  }

  .station-brand__copy strong {
    font-size: 15px;
  }

  .station-brand__copy small {
    display: none;
  }

  .topbar__actions button,
  .topbar__actions a {
    padding-inline: 7px;
  }

  .monitor-extras__readout .readout-bars {
    display: none;
  }

  .source-switch button {
    padding-inline: 2px;
    font-size: 8px;
  }
}

@media (max-height: 430px) and (min-width: 501px) {
  .control-panel h1 {
    font-size: clamp(42px, 7.5vw, 76px);
  }

  .receiver__freq {
    font-size: 31px;
  }

  .receiver__display {
    margin: 5px 8px;
    padding: 5px 8px;
  }

  .receiver__scale {
    display: none;
  }

  .receiver__status {
    margin-top: 2px;
    font-size: 9px;
  }

  .panel-bar {
    min-height: 24px;
  }

  .tuning-control {
    margin: 0 8px 5px;
    padding-top: 4px;
  }

  .tuning-control input {
    margin: 4px 0 5px;
  }

  .receiver-actions {
    margin: 0 8px 5px;
  }

  .source-switch button,
  .pause-toggle,
  .sound-toggle {
    min-height: 44px;
    font-size: 9px;
  }
}

/* 09a   Dimensionales Streulicht im gesamten Empfänger statt nur im Videobild.
   Der Effekt beeinflusst keine Pointer-Ereignisse und lässt Textkontraste erhalten. */
/* Finale-Farben bleiben von Frequenzfiltern unabhängig und wachsen kontinuierlich. */
:root[data-story='final-breach'] {
  --edge: color-mix(in srgb, #405357, #59433e calc(var(--gate-light) * 100%));
  --edge-soft: color-mix(in srgb, #2b393c, #45332f calc(var(--gate-light) * 100%));
  --signal: color-mix(in srgb, #d76854, #e37b54 calc(var(--gate-light) * 100%));
  --signal-light: color-mix(in srgb, #f4a28b, #ffc098 calc(var(--gate-light) * 100%));
}

:root[data-story='final-breach'][data-source='video'] .scene__video {
  filter: sepia(calc(var(--gate-light) * .48))
    saturate(calc(1 + var(--gate-light) * .55))
    hue-rotate(calc(var(--gate-light) * -20deg))
    contrast(calc(1 + var(--gate-light) * .16))
    brightness(calc(1 - var(--gate-light) * .34));
  transition: filter 240ms linear;
}

/* Das Glas fängt das Licht innen auf; der äußere Schein trifft die Bildschirmfassung. */
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  box-shadow: inset 0 0 16px rgba(255, 148, 78, .48),
    inset 0 0 45px rgba(211, 65, 23, .23);
  opacity: var(--gate-spill);
  transition: opacity 240ms linear;
  pointer-events: none;
}

.television__screen {
  box-shadow: inset 0 0 0 2px #445557, inset 0 0 24px #000,
    0 0 12px rgba(245, 112, 47, calc(var(--gate-spill) * .32)),
    0 0 28px rgba(209, 65, 23, calc(var(--gate-spill) * .19));
  transition: box-shadow 240ms linear;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: calc(var(--gate-light) * .70);
  background:
    radial-gradient(ellipse 88% 82% at 68% 50%,
      rgba(231, 73, 24, .21), rgba(124, 42, 16, .1) 46%, transparent 81%),
    linear-gradient(90deg, rgba(0,0,0,0), rgba(255, 107, 51, .035));
  mix-blend-mode: screen;
  transition: opacity 240ms linear;
}

/* Kompakte Entwicklersteuerung, nur mit ?debug=1 sichtbar. */
.dev-console[hidden] { display: none; }
.dev-console {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 80;
  width: min(350px, calc(100vw - 20px));
  padding: 9px;
  border: 1px solid #986143;
  background: rgba(8, 14, 16, .96);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .65);
  font-family: var(--font-mono);
}
.dev-console__label {
  display: block;
  margin-bottom: 7px;
  color: #e59c74;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}
.dev-console__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-console__actions button {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 5px 3px;
  border: 1px solid #a36b4e;
  background: #231a17;
  color: #f3d2bd;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.dev-console__actions button:hover { background: #533123; }
.dev-console__actions button:focus-visible { outline: 2px solid #f9bd92; outline-offset: 2px; }

/* 10   Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* 11   Ermittlungswerkzeuge, gemeinsame Morseuhr und lokaler Kamerafeed */
.tuning-control__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tuning-control__tools button,
.signature-controls button,
.investigation-dialog__traces button {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
}

.tuning-control__tools button:hover,
.signature-controls button:hover:not(:disabled),
.investigation-dialog__traces button:hover {
  border-color: var(--signal-light);
  background: var(--surface-raised);
  color: var(--chalk);
}

.investigation-dialog__content {
  padding-top: 20px;
}

.investigation-dialog h2 {
  margin: 0 0 12px;
  font-family: 'B2 Condensed', Impact, sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  overflow-wrap: anywhere;
}

.investigation-dialog p,
.investigation-dialog li {
  color: var(--secondary);
  font-size: 14px;
  line-height: 1.65;
}

.investigation-dialog ol {
  display: grid;
  gap: 15px;
  padding-left: 24px;
}

.investigation-dialog__traces,
.signature-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.signature-controls button {
  flex: 1 1 120px;
  min-width: 0;
}

.signature-status {
  min-height: 1.5em;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.5;
}

.morse-digits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 20px;
  font-family: var(--font-mono);
}

.morse-digits > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-bottom: 1px solid var(--edge);
}

.morse-digits code {
  white-space: nowrap;
  letter-spacing: 2px;
  color: var(--signal-light);
}

[data-morse-pulse='on'] .scene__mast-led,
[data-morse-pulse='off'] .scene__mast-led {
  animation: none;
  transition: none;
}

[data-morse-pulse='on'] .scene__mast-led { opacity: 1; }
[data-morse-pulse='off'] .scene__mast-led { opacity: .045; }

[data-relay-flash='true'][data-source='artwork'] .scene__window-light {
  animation: relay-window-reply 2s steps(1, end) 3;
}

@keyframes relay-window-reply {
  0%, 20%, 50%, 80%, 100% { opacity: 1; }
  10%, 35%, 65% { opacity: .05; }
}

.scene__sound-caption {
  grid-column: 1 / -1;
  margin: 0;
  padding: 7px 10px;
  border-left: 2px solid var(--signal);
  background: #142124;
  color: var(--chalk);
  font-size: 12px;
  line-height: 1.5;
}

.scene__local {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  background: #070c0d;
}

.scene__local img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene__local-yard { filter: saturate(.45) contrast(1.1) brightness(.85); }
.scene__local-swing {
  transform-origin: 50% 4%;
  animation: local-swing 5.8s ease-in-out infinite;
  filter: saturate(.45) contrast(1.1) brightness(.85);
}

@keyframes local-swing {
  0%, 100% { transform: perspective(900px) rotateX(-3deg) scale(.985); }
  50% { transform: perspective(900px) rotateX(4deg) scale(1.018); }
}

.scene__offline {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  background: #030708;
  color: #9badaa;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.5vw, 18px);
  letter-spacing: .12em;
}

.scene__local[hidden],
.scene__offline[hidden],
.scene__sound-caption[hidden],
#local-camera[hidden] { display: none; }

[data-source='local'] .scene__artwork,
[data-source='local'] .scene__video,
[data-source='local'] .scene__window-lights,
[data-source='local'] .scene__fog,
[data-source='local'] .scene__anomaly,
[data-source='local'] .scene__relay-beacon,
[data-source='local'] .scene__finale-tint,
[data-source='local'] .scene__final-caption,
[data-source='local'] .scene__gate-canvas { display: none; }

[data-finale='isolating'] .scene__scanlines,
[data-finale='sealed'] .scene__scanlines,
[data-finale='local-ready'] .scene__scanlines { opacity: .12; }

[data-source='local'] .scene__scanlines { opacity: .22; }

#local-camera {
  min-height: 44px;
  padding: 8px;
  color: var(--signal-light);
  border-color: var(--signal);
}

[data-finale='local-ready'] .receiver-actions,
[data-finale='local-view'] .receiver-actions { flex-wrap: wrap; }

[data-finale='local-ready'] #local-camera,
[data-finale='local-view'] #local-camera { flex: 1 0 100%; }

[data-paused='true'] .scene__local-swing,
html:has(dialog[open]) .scene__local-swing { animation-play-state: paused; }

@media (max-width: 750px), (max-height: 680px), (max-width: 1050px) and (max-height: 750px) {
  .tuning-control__tools button,
  .signature-controls button,
  .investigation-dialog__traces button { min-height: 44px; }
}

@media (max-width: 380px) {
  .morse-digits { gap: 6px; }
  .morse-digits > div { padding-inline: 3px; gap: 5px; }
  .morse-digits code { letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__local-swing { animation: none; }
  [data-relay-flash='true'][data-source='artwork'] .scene__window-light { animation: none; }
}

.trace-comparison {
  margin-top: 18px;
}

.trace-comparison button {
  min-height: 44px;
  margin: 6px 6px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 12px;
}

.trace-comparison button:hover {
  border-color: var(--signal-light);
  background: var(--surface-raised);
}



.signature-controls button { white-space: pre-wrap; }



/* 12   Ronnies Übergang aus dem Gerät und abschließende Empfangsstörung */
.television__owner {
  padding: 4px 7px;
  border: 1px solid #a99a76;
  background: #c6b895;
  color: #24302d;
  font-weight: 700;
  letter-spacing: .04em;
  transform: rotate(-1deg);
}

html[data-epilogue],
html[data-epilogue] body { overflow: hidden; }

.ending {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #e4e7dc;
  font-family: var(--font-mono);
  --ending-flash: 0;
  --ending-world: 0;
  --ending-black: 0;
}

.ending::backdrop { background: transparent; }
.ending:not([open]) { display: none; }

.ending__world,
.ending__dimension,
.ending__courtyard,
.ending__courtyard img,
.ending__rig,
.ending__fog,
.ending__flash,
.ending__black {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ending__world {
  overflow: hidden;
  background: #130c0a;
  opacity: var(--ending-world);
  touch-action: none;
}

.ending__dimension {
  object-fit: cover;
  filter: brightness(.72) sepia(.15) saturate(.8);
  transform-origin: 50% 50%;
  will-change: transform;
}

.ending__courtyard img { object-fit: cover; }
.ending__courtyard { filter: sepia(.25) saturate(.6) brightness(.83); }
.ending__rig { transform-origin: 50% 4%; }
#ending-ronnie { opacity: 0; }
[data-ronnie='true'] #ending-empty { opacity: 0; }
[data-ronnie='true'] #ending-ronnie { opacity: 1; }
.ending[data-mode='dimension'] .ending__courtyard,
.ending[data-mode='swing'] .ending__dimension { display: none; }
.ending__fog { pointer-events: none; }
.ending__flash {
  z-index: 5;
  background: #ffdfb2;
  opacity: var(--ending-flash);
  pointer-events: none;
}
.ending__black {
  z-index: 4;
  background: #030607;
  opacity: var(--ending-black);
  pointer-events: none;
}

.ending__tools {
  position: absolute;
  z-index: 7;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  left: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ending button,
.ending__actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid #8a9a8f;
  background: #10191bed;
  color: #e4e7dc;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}
.ending button:hover,
.ending__actions a:hover {
  border-color: #f1b983;
  background: #33413b;
}
.ending button:focus-visible,
.ending a:focus-visible { outline: 2px solid #ffad86; outline-offset: 4px; }

.ending__description {
  position: absolute;
  z-index: 6;
  right: 24px;
  bottom: 120px;
  left: 24px;
  width: fit-content;
  max-width: calc(100% - 48px);
  margin: auto;
  padding: 8px 12px;
  background: #0b1114d9;
  color: #e4e7dc;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.6;
  text-align: center;
}

.ending__movement {
  position: absolute;
  z-index: 6;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ending__movement p {
  margin: 0;
  padding: 6px 9px;
  background: #0b1114d9;
  font-size: 12px;
  line-height: 1.5;
}

.ending__card {
  position: absolute;
  z-index: 6;
  left: clamp(16px, 7vw, 140px);
  bottom: max(32px, env(safe-area-inset-bottom));
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 160px);
  overflow-y: auto;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid #8a806f;
  background: #0c1415eb;
  box-shadow: 0 15px 80px #0009;
}
.ending__kicker {
  margin: 0 0 18px;
  color: #e8b887;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.5;
}
.ending__card h2 {
  margin: 0 0 22px;
  font-family: 'B2 Condensed', Impact, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .95;
  overflow-wrap: anywhere;
}
.ending__card dl { margin: 0 0 24px; }
.ending__card dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #40504b;
  font-size: 12px;
}
.ending__card dt { color: #b6c8bd; }
.ending__card dd { margin: 0; font-weight: 700; }
.ending__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ending__actions button { border-color: #e3b07b; color: #f1c799; }
.ending[data-phase='status'] .ending__description { display: none; }
.ending [hidden] { display: none; }

@media (max-width: 600px) {
  .ending__tools { left: 12px; right: 12px; gap: 5px; }
  .ending__tools button { padding-inline: 10px; }
  .ending__movement { left: 16px; right: 16px; }
  .ending__description { left: 16px; right: 16px; bottom: 160px; max-width: calc(100% - 32px); }
  .ending__actions > * { flex: 1 1 180px; }
}

.ending__description:not([data-key='close']) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 13   Ungelesene Ermittlungsnotizen und kurz sichtbarer Empfangshinweis */
#notes-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#notes-toggle.has-unread {
  border-color: #efb47d;
  background: #493126;
  color: #ffe3ba;
}

.notes-unread {
  display: inline-block;
  padding: 2px 4px;
  background: #f1bf86;
  color: #17201d;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.notes-notice {
  position: relative;
  margin-block: 7px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 0;
  background: #102422;
  color: #d8efca;
  box-shadow: inset 0 0 18px #80cba011;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  animation: notes-notice-in 180ms ease-out;
}

.notes-notice::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f1bf86;
  box-shadow: 0 0 9px #efb47d80;
}

.notes-notice:hover { background: #19352e; }
.notes-notice:focus-visible { outline: 2px solid #efb47d; outline-offset: -3px; }
.notes-notice[hidden],
.notes-unread[hidden] { display: none; }

#notes-list .is-new {
  padding-left: 10px;
  border-left: 2px solid #efb47d;
  color: var(--chalk);
}

.notes-entry-label {
  display: inline-block;
  margin-right: 7px;
  color: #f1bf86;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

@keyframes notes-notice-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .notes-notice { animation: none; }
}

/* 14   Gemeinsame Audioeinstellungen für Empfänger und Abschluss */
.audio-controls {
  display: grid;
  grid-template-columns: auto auto minmax(40px, 1fr) 40px;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 8px;
  border: 1px solid var(--edge);
  background: #0b1b1c;
  color: #d1dfd2;
  font-family: var(--font-mono);
  font-size: 9px;
}
.audio-controls .sound-toggle { min-width: 66px; min-height: 44px; padding-inline: 8px; }
.audio-controls label { font-size: 8px; letter-spacing: .04em; }
.audio-controls input { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: #efb47d; cursor: pointer; }
.audio-controls input:focus-visible { outline: 2px solid #efb47d; outline-offset: 2px; }
.audio-controls output { text-align: right; font-variant-numeric: tabular-nums; }
.audio-controls--ending { grid-template-columns: auto minmax(65px, 1fr) 40px; width: min(260px, 100%); margin: 0; padding: 0 10px; }
@media (max-width: 359px) {
  .audio-controls { gap: 5px; margin-inline: 8px; padding-inline: 6px; }
}