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

:root{
    --bg:#0a0a0a;
    --fg:#e0d5a8;
    --accent:#33ff00;
    --dim:#6a6040;
    --glow:rgba(212,200,154,.12);
    --crt-curvature:2px;
    --scan-opacity:.06;
    --header-h:36px;
    --footer-h:40px;
}

html,body{
    width:100%;height:100%;overflow:hidden;
    background:var(--bg);color:var(--fg);
    font-family:'Courier New',Courier,monospace;
    font-size:13px;
    -webkit-font-smoothing:none;
}

/* ── CRT OVERLAY ────────────────────────────── */
#crt-overlay{
    position:fixed;inset:0;pointer-events:none;z-index:1000;
    background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45) 100%);
}

/* ── SCANLINES ──────────────────────────────── */
#scanlines{
    position:fixed;inset:0;pointer-events:none;z-index:999;
    background:repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,var(--scan-opacity)) 2px,
        rgba(0,0,0,var(--scan-opacity)) 4px
    );
    animation:scanFlicker 8s infinite linear;
}

@keyframes scanFlicker{
    0%,100%{opacity:1}
    50%{opacity:.92}
    73%{opacity:1}
    87%{opacity:.88}
}

/* ── VIGNETTE ───────────────────────────────── */
#vignette{
    position:fixed;inset:0;pointer-events:none;z-index:998;
    box-shadow:inset 0 0 120px 40px rgba(0,0,0,.7);
}

/* ── HEADER ─────────────────────────────────── */
#header{
    position:fixed;top:0;left:0;right:0;
    height:var(--header-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 8px;
    background:linear-gradient(to bottom,#201c14,#141208);
    border-bottom:1px solid var(--dim);
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease-in-out;
}

#header.hf-visible{
    opacity:1;
    pointer-events:auto;
}

.film-counter{
    display:flex;align-items:center;gap:4px;
    font-size:11px;letter-spacing:1px;color:var(--fg);
    opacity:.85;
}

.counter-num{
    font-variant-numeric:tabular-nums;
    min-width:3.2ch;
    color:var(--fg);
}

.title-bar{
    font-size:12px;letter-spacing:3px;
    text-transform:uppercase;color:var(--fg);
    opacity:.85;
}

.mode-indicator{
    font-size:10px;letter-spacing:2px;
    padding:2px 6px;
    border:1px solid var(--fg);
    color:var(--fg);
    opacity:.85;
}

/* ── VIEWPORT ───────────────────────────────── */
#viewport{
    position:fixed;
    top:var(--header-h);
    left:0;right:0;
    bottom:var(--footer-h);
    overflow:hidden;
    background:#171310;
    transition:top .5s ease-in-out, bottom .5s ease-in-out;
}

/* ── STATUS OVERLAY ─────────────────────────── */
.status-overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    z-index:20;
    pointer-events:none;
    transition:opacity .5s;
}
.status-overlay.hidden{opacity:0;pointer-events:none}

.status-text{
    font-size:14px;letter-spacing:2px;
    color:var(--accent);
    text-align:center;
    padding:8px 16px;
    border:1px solid var(--accent);
    background:rgba(10,10,10,.9);
}

/* ── WINDOW LAYER ───────────────────────────── */
.window-layer{
    position:absolute;inset:0;
    background:#171310;
    filter:hue-rotate(var(--crot,0deg)) saturate(var(--csat,1));
    transition:filter 800ms ease-out;
}

.anim-window{
    position:absolute;
    overflow:hidden;
    background:#171310;
    opacity:0;
    transition:opacity .3s;
    will-change:opacity;
    contain:layout style;
}

.anim-window.active{opacity:1}

.anim-window img{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    filter:contrast(1.1) saturate(.85);
    -webkit-user-drag:none;
    user-drag:none;
    pointer-events:none;
    -webkit-touch-callout:none;
}

/* ── VOID SIGNAL (Blank-Screen: pulsierender Kreis) ── */
.void-signal{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:0;height:0;
    border-radius:50%;
    border:2px solid #0f0;
    box-shadow:0 0 40px 6px #0f0;
    opacity:0;
    pointer-events:none;
    z-index:5;
    background:rgba(0,0,0,0.35);
}
.signals-pulse{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:8px;height:8px;
    border-radius:50%;
    background:#0f0;
    box-shadow:0 0 28px 8px #0f0;
    opacity:0;
    z-index:6;
}
.void-symbol{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-size:clamp(16px, 5vmin, 44px);
    letter-spacing:3px;
    white-space:nowrap;
    color:#0f0;
    text-shadow:0 0 12px #0f0, 0 0 24px #0f0, 0 0 48px #0f0;
    text-align:center;
    z-index:6;
    pointer-events:none;
    mix-blend-mode:difference;
}

/* ── STELLA DRIFT (Sternentreiber) ───────────── */
#stellaLayer{
    position:absolute;
    inset:0;
    z-index:5;
    overflow:hidden;
    pointer-events:none;
}
.stella-mote{
    position:absolute;
    left:0;top:0;
    border-radius:50%;
    opacity:0;
    will-change:transform,opacity;
}
.stella-comet{
    position:absolute;
    left:0;top:0;
    width:180px;height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,235,190,.95));
    box-shadow:0 0 12px 2px rgba(255,235,190,.55);
    opacity:0;
    pointer-events:none;
    will-change:opacity,left;
}
.stella-void{
    position:absolute;
    left:0;top:0;
    opacity:0;
    pointer-events:none;
    will-change:opacity,transform;
}
.stella-void-ring{
    position:absolute;
    left:50%;top:50%;
    width:12px;height:12px;
    margin-left:-6px;margin-top:-6px;
    border:1px solid rgba(46,255,150,.5);
    border-radius:50%;
    box-shadow:0 0 10px 2px rgba(46,255,150,.28);
}
.stella-void-sym{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    font-family:'Courier New',Courier,monospace;
    letter-spacing:2px;
    color:rgba(46,255,150,.55);
    text-shadow:0 0 8px rgba(46,255,150,.35);
}

/* ── SINGLE WINDOW MODE ─────────────────────── */
.mode-single .anim-window{
    inset:0;
}

/* ── 2-WINDOW MODE (Crime Split) ───────────── */
.mode-2win .anim-window:nth-child(1){
    top:0;left:0;right:50%;bottom:0;
}
.mode-2win .anim-window:nth-child(2){
    top:0;left:50%;right:0;bottom:0;
}
.mode-2win .anim-window:nth-child(3),
.mode-2win .anim-window:nth-child(4){
    display:none;
}

/* ── 4-WINDOW MODE ──────────────────────────── */
.mode-4win .anim-window:nth-child(1){
    top:0;left:0;right:50%;bottom:50%;
}
.mode-4win .anim-window:nth-child(2){
    top:0;left:50%;right:0;bottom:50%;
}
.mode-4win .anim-window:nth-child(3){
    top:50%;left:0;right:50%;bottom:0;
}
.mode-4win .anim-window:nth-child(4){
    top:50%;left:50%;right:0;bottom:0;
}

/* ── OVERLAP MODE (Image overlay) ─────────── */
.mode-overlap .anim-window{
    inset:0;
}
.mode-overlap .anim-window:nth-child(1){z-index:1}
.mode-overlap .anim-window:nth-child(2){z-index:2;opacity:.6;mix-blend-mode:screen}
.mode-overlap .anim-window:nth-child(3),
.mode-overlap .anim-window:nth-child(4){display:none}

/* ── STACK MODE (chaotischer Stapel) ───────── */
.mode-stack .anim-window{
    inset:0;
}
.mode-stack .anim-window:nth-child(1){z-index:1;opacity:.7;mix-blend-mode:multiply}
.mode-stack .anim-window:nth-child(2){z-index:2;opacity:.85;mix-blend-mode:normal}
.mode-stack .anim-window:nth-child(3),
.mode-stack .anim-window:nth-child(4){display:none}

/* ── BLITZ MODE (Strobe/Flicker-Rand) ──────── */
.mode-blitz .anim-window{
    inset:0;
}
.mode-blitz .anim-window:nth-child(1){z-index:4}
.mode-blitz .anim-window:nth-child(2){z-index:3;opacity:.7}
.mode-blitz .anim-window:nth-child(3){z-index:2;opacity:.5}
.mode-blitz .anim-window:nth-child(4){z-index:1;opacity:.35}
.mode-blitz #windowLayer{
    animation: blitzflicker 0.9s steps(2, end) infinite;
}
@keyframes blitzflicker{
    0%,100%{opacity:1;filter:none}
    30%{opacity:.35;filter:contrast(1.4) saturate(1.4)}
    55%{opacity:.85}
    75%{opacity:.45;filter:invert(.2)}
}

/* ── JUMP (Fenster springt kurz weg) ───────── */
.anim-window.jump { animation: jump .95s ease-in-out; }
@keyframes jump{
    0%,100%{transform:translate(0,0)}
    20%{transform:translate(-8%,-6%) scale(1.12)}
    50%{transform:translate(7%,8%) scale(.9)}
    75%{transform:translate(-4%,3%) scale(1.05)}
}

/* ── DISTORTION LAYER ───────────────────────── */
.distortion-layer{
    position:absolute;inset:0;pointer-events:none;z-index:10;
}

.distortion-layer .glitch-bar{
    position:absolute;left:0;right:0;
    mix-blend-mode:screen;
}

/* ── VHS TAPE NOISE (Videoabbau) ──────────── */
.vhs-overlay{
    position:absolute;inset:0;pointer-events:none;z-index:11;
    background:
        linear-gradient(rgba(255,0,255,.1),
        repeating-linear-gradient(0deg,
            rgba(0,0,0,.8) 0px,
            rgba(0,255,255,.1) 1px,
            rgba(0,0,0,.8) 2px));
    mix-blend-mode:overlay;
    animation:vhsFlicker var(--dur) steps(5,end) forwards;
}

@keyframes vhsFlicker{
    0%{opacity:0}
    12%{opacity:.85}
    25%{opacity:.35}
    40%{opacity:.7}
    55%{opacity:.2}
    70%{opacity:.6}
    85%{opacity:.4}
    100%{opacity:0}
}

/* ── CHROMA TEAR (Band-Displacement + RGB-Split) ── */
.window-layer.chroma-tear{
    filter:url(#tapeTear);
    will-change:filter;
}

/* ── TAPE PAUSE (Standbild + Tracking-Band) ──── */
@keyframes tapeTracking{
    0%{top:-25%}
    100%{top:125%}
}

.window-layer.tape-pause{
    filter:saturate(.6) contrast(1.08) brightness(.92);
}
.window-layer.tape-pause::before{
    content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
    background-image:repeating-conic-gradient(rgba(255,255,255,.07) 0% 25%, transparent 0% 50%);
    background-size:3px 3px;
    opacity:.55;
    animation:grainShift .3s steps(3) infinite;
}
.window-layer.tape-pause::after{
    content:'';position:absolute;left:0;right:0;height:22%;
    top:-25%;z-index:6;pointer-events:none;
    background:repeating-linear-gradient(0deg,
            rgba(255,255,255,.85) 0px,
            rgba(0,0,0,.6) 1px,
            rgba(255,255,255,.85) 2px,
            rgba(0,0,0,.35) 3px,
            transparent 4px 7px),
        repeating-linear-gradient(0deg,
            transparent 0 9px,
            rgba(0,0,255,.15) 9px 10px,
            rgba(255,0,255,.12) 10px 11px);
    mix-blend-mode:overlay;
    box-shadow:0 0 30px rgba(255,255,255,.45);
    animation:tapeTracking var(--dur,1s) linear forwards;
}

/* ── CRT ROLL (Bild laeuft weg, Hold-Regler) ── */
@keyframes crtRollV{
    0%{transform:translateY(0) scaleY(1)}
    30%{transform:translateY(calc(var(--roll-dir,-100%) * 0.18)) scaleY(1.04)}
    100%{transform:translateY(var(--roll-dir,-100%)) scaleY(1)}
}
@keyframes crtRollH{
    0%{transform:translateX(0) scaleX(1)}
    30%{transform:translateX(calc(var(--roll-xdir,-100%) * 0.18)) scaleX(1.04)}
    100%{transform:translateX(var(--roll-xdir,-100%)) scaleX(1)}
}
.window-layer.roll-v{
    animation:crtRollV var(--dur,3s) cubic-bezier(.33,0,.2,1) forwards;
    will-change:transform;
}
.window-layer.roll-h{
    animation:crtRollH var(--dur,3s) cubic-bezier(.33,0,.2,1) forwards;
    will-change:transform;
}

/* ── CRT BITS (abgeschwaechte Stoer-Bits) ──── */
@keyframes crtBitsFade{
    0%{opacity:0}
    18%{opacity:var(--bits-opacity,.08)}
    80%{opacity:var(--bits-opacity,.08)}
    100%{opacity:0}
}
.crt-bits-grid{
    position:absolute;inset:0;pointer-events:none;z-index:12;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 100%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 100%);
    background-size:3px 3px;
    mix-blend-mode:overlay;
    animation:crtBitsFade var(--dur,2.4s) ease-in-out forwards;
}
.crt-bits-bars{
    position:absolute;inset:0;pointer-events:none;z-index:12;
    background:repeating-linear-gradient(45deg,#f008,#0f08 10%,#00f8 20%);
    mix-blend-mode:overlay;
    animation:crtBitsFade var(--dur,2.4s) ease-in-out forwards;
}

@keyframes crtJitter{
    0%,100%{transform:translate(0,0)}
    20%{transform:translate(1px,-1px)}
    40%{transform:translate(-1px,1px)}
    60%{transform:translate(1px,1px)}
    80%{transform:translate(-1px,-1px)}
}
#viewport.crt-jitter{
    animation:crtJitter .5s steps(3,end) forwards;
}

@keyframes crtTilt{
    0%{transform:rotate(0deg)}
    25%{transform:rotate(var(--tilt,1deg))}
    50%{transform:rotate(calc(var(--tilt,1deg) * -0.6))}
    75%{transform:rotate(var(--tilt,1deg))}
    100%{transform:rotate(0deg)}
}
#viewport.crt-tilt{
    animation:crtTilt var(--dur,3s) ease-in-out forwards;
}

/* ── FILM GRAIN (CSS-only, no SVG) ────────── */
@keyframes grainShift{
    0%{transform:translate(0,0)}
    25%{transform:translate(-2%,3%)}
    50%{transform:translate(1%,-2%)}
    75%{transform:translate(-1%,1%)}
    100%{transform:translate(0,0)}
}

#viewport::after{
    content:'';position:absolute;inset:-20%;
    background-image:
        repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%, transparent 0% 50%);
    background-size:4px 4px;
    opacity:.5;
    animation:grainShift 1s steps(4) infinite;
    pointer-events:none;z-index:5;
}

/* ── FOOTER ─────────────────────────────────── */
#footer{
    position:fixed;bottom:0;left:0;right:0;
    height:var(--footer-h);
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(to top,#201c14,#141208);
    border-top:1px solid var(--dim);
    z-index:100;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease-in-out;
}

#footer.hf-visible{
    opacity:1;
    pointer-events:auto;
}

.control-strip{
    display:flex;gap:6px;
}

.ctrl-btn{
    background:none;border:1px solid var(--fg);
    color:var(--fg);font-family:inherit;font-size:10px;
    letter-spacing:1px;
    padding:4px 10px;cursor:pointer;
    transition:all .15s;
}
.ctrl-btn:hover,.ctrl-btn.active{
    border-color:var(--accent);color:var(--accent);
}
.ctrl-btn:hover{
    background:var(--accent);color:#0a0a0a;
}

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════ */

/* ── BREAKPOINT 1: Small Phone (≤320px / ~4") ─ */
@media(max-width:320px){
    :root{
        --header-h:28px;
        --footer-h:32px;
        --scan-opacity:.03;
    }
    .title-bar{display:none}
    .film-counter{font-size:9px}
    .mode-indicator{font-size:8px;padding:1px 4px}
    .ctrl-btn{font-size:8px;padding:3px 6px}
    .status-text{font-size:10px}

    .mode-2win .anim-window:nth-child(1),
    .mode-2win .anim-window:nth-child(2){
        right:auto;bottom:auto;
    }
    .mode-2win .anim-window:nth-child(1){
        width:100%;height:50%;
    }
    .mode-2win .anim-window:nth-child(2){
        top:50%;width:100%;height:50%;left:0;
    }

    .mode-4win .anim-window{
        width:50%;height:50%;
    }
    .mode-4win .anim-window:nth-child(1){top:0;left:0}
    .mode-4win .anim-window:nth-child(2){top:0;left:50%}
    .mode-4win .anim-window:nth-child(3){top:50%;left:0}
    .mode-4win .anim-window:nth-child(4){top:50%;left:50%}
}

/* ── BREAKPOINT 2: Tablet/Small (≤768px / ~7") ─ */
@media(min-width:321px) and (max-width:768px){
    :root{
        --header-h:32px;
        --footer-h:36px;
    }
    .title-bar{font-size:10px;letter-spacing:2px}
}

/* ── BREAKPOINT 3: Desktop (>768px) ──────────── */
@media(min-width:769px){
    :root{
        --header-h:40px;
        --footer-h:44px;
        --scan-opacity:.05;
    }
    .title-bar{font-size:14px;letter-spacing:4px}

    #crt-overlay{
        background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%);
    }
}

/* ── BREAKPOINT 4: Wide (>1200px) ────────────── */
@media(min-width:1200px){
    :root{
        --header-h:44px;
        --footer-h:48px;
    }
    .title-bar{font-size:16px;letter-spacing:5px}
}

/* ── CRT FLICKER ANIMATION ──────────────────── */
@keyframes crtFlicker{
    0%{opacity:1}
    5%{opacity:.97}
    10%{opacity:1}
    15%{opacity:.98}
    20%{opacity:1}
    50%{opacity:1}
    52%{opacity:.96}
    54%{opacity:1}
    100%{opacity:1}
}

body{
    animation:crtFlicker 4s infinite;
}

/* ── HORIZONTAL TEAR (Image distortion) ───── */
@keyframes hTear{
    0%{clip-path:inset(0 0 100% 0)}
    100%{clip-path:inset(0 0 0 0)}
}

.anim-window.tear-in{
    animation:hTear .15s steps(4) forwards;
}

/* ── WINDOW EDGE SLIP (defekte Bildroehre) ── */
@keyframes crtSlipX{
    0%{transform:none;filter:none}
    15%{transform:translateX(var(--slip-x,20px));filter:brightness(1.2)}
    40%{transform:translateX(calc(var(--slip-x,20px) * -0.35));filter:brightness(1.35)}
    60%{transform:translateX(calc(var(--slip-x,20px) * 0.55)) skewX(.8deg);filter:brightness(1.25)}
    80%{transform:translateX(calc(var(--slip-x,20px) * 0.55)) skewX(1.5deg);filter:brightness(1.35)}
    100%{transform:none;filter:none}
}
@keyframes crtSlipY{
    0%{transform:none;filter:none}
    15%{transform:translateY(var(--slip-y,16px));filter:brightness(1.2)}
    40%{transform:translateY(calc(var(--slip-y,16px) * -0.4));filter:brightness(1.3)}
    60%{transform:translateY(calc(var(--slip-y,16px) * 0.5)) skewY(.8deg);filter:brightness(1.2)}
    85%{transform:translateY(calc(var(--slip-y,16px) * 0.5)) skewY(-1.2deg);filter:brightness(1.3)}
    100%{transform:none;filter:none}
}
@keyframes crtSlipXY{
    0%{transform:none;filter:none}
    15%{transform:translate(var(--slip-x,20px),var(--slip-y,16px));filter:brightness(1.2)}
    40%{transform:translate(calc(var(--slip-x,20px) * -0.4),calc(var(--slip-y,16px) * -0.5));filter:brightness(1.35)}
    60%{transform:translate(calc(var(--slip-x,20px) * .55),calc(var(--slip-y,16px) * .5)) skew(1deg,.8deg);filter:brightness(1.25)}
    85%{transform:translate(calc(var(--slip-x,20px) * .55),calc(var(--slip-y,16px) * .5)) skew(-1.5deg,.6deg);filter:brightness(1.35)}
    100%{transform:none;filter:none}
}
.anim-window.slip-x{animation:crtSlipX .5s steps(6,end) both}
.anim-window.slip-y{animation:crtSlipY .5s steps(6,end) both}
.anim-window.slip-xy{animation:crtSlipXY .55s steps(7,end) both}
.anim-window.slip-x,
.anim-window.slip-y,
.anim-window.slip-xy{
    z-index:5;
}
/* helle Rechteck-Uebersteuerungskante am Bildrand */
.anim-window.slip-x::after,
.anim-window.slip-y::after,
.anim-window.slip-xy::after{
    content:'';position:absolute;pointer-events:none;
    mix-blend-mode:screen;
}
.anim-window.slip-x::after{
    top:0;bottom:0;right:0;width:3px;
    background:linear-gradient(90deg,rgba(255,250,240,0),rgba(255,250,240,.95));
}
.anim-window.slip-y::after{
    left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(0deg,rgba(255,250,240,0),rgba(255,250,240,.95));
}
.anim-window.slip-xy::after{
    top:0;bottom:0;right:0;width:3px;
    background:linear-gradient(90deg,rgba(255,250,240,0),rgba(255,250,240,.8));
    box-shadow:0 -2px 0 rgba(255,250,240,.8);
}
/* RGB-Stoerung am Fensterrand */
.anim-window.slip-rgb{
    box-shadow:-3px 0 rgba(255,0,255,.55), 3px 0 rgba(0,255,255,.55), 0 -3px rgba(255,255,0,.35), 0 3px rgba(255,0,255,.35);
}
.anim-window.slip-rgb::after{
    background:linear-gradient(90deg, rgba(255,0,255,.95), rgba(0,255,255,.95));
    box-shadow:none;
}

/* ── GLITCH TEXT ─────────────────────────────── */
@keyframes textGlitch{
    0%,100%{transform:translate(0)}
    20%{transform:translate(-2px,1px)}
    40%{transform:translate(2px,-1px)}
    60%{transform:translate(-1px,-1px)}
    80%{transform:translate(1px,2px)}
}

.mode-indicator.glitch{
    animation:textGlitch .1s steps(3) 3;
}

/* ══════════════════════════════════════════════
   SPLASH SCREEN (TV Power On)
   ══════════════════════════════════════════════ */

#splash{
    position:fixed;inset:0;z-index:2000;
    background:#0a0a0a url('/pix/00/dp-poster.webp') center center no-repeat;
    background-size:cover;
    cursor:default;
    transition:opacity .4s ease-out;
    opacity:1;
}

/* Login-Attraktion: statisches Poster im Hintergrund + leichtes WebM-Video obenauf.
   Video ist HW-dekodiert und wird beim Power-ON pausiert (0 Last danach). */
#splashVideo{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;
    z-index:1;
}

#splash.hidden{
    opacity:0;pointer-events:none;
    visibility:hidden;
    transition:opacity .4s ease-out, visibility 0s .4s;
}

.splash-power{
    position:absolute;bottom:24px;right:24px;
    background:none;
    border:1px solid var(--fg);color:var(--fg);
    font-family:inherit;font-size:10px;
    letter-spacing:1px;
    padding:4px 10px;cursor:pointer;
    transition:all .15s;
    z-index:2001;
}

.splash-power:hover{
    background:var(--accent);color:#0a0a0a;
}

/* ── CRT SHUTDOWN (Power Off) ─────────────── */
@keyframes crtShutdown{
    0%   { transform:scaleY(1) scaleX(1); opacity:1; filter:brightness(1); }
    30%  { transform:scaleY(0.012) scaleX(1); opacity:1; filter:brightness(1.5); }
    55%  { transform:scaleY(0.012) scaleX(0.4); opacity:1; filter:brightness(2); }
    80%  { transform:scaleY(0.008) scaleX(0.08); opacity:0.9; filter:brightness(3); }
    95%  { transform:scaleY(0.004) scaleX(0.02); opacity:0.6; filter:brightness(4); }
    100% { transform:scaleY(0) scaleX(0); opacity:0; filter:brightness(5); }
}

#viewport.crt-off{
    animation:crtShutdown .65s ease-in forwards;
    transform-origin:center center;
}

/* ── CRT WARMUP (Power On) ────────────────── */
@keyframes crtWarmup{
    0%   { transform:scaleY(0) scaleX(0); opacity:0; filter:brightness(5); }
    15%  { transform:scaleY(0.004) scaleX(0.02); opacity:0.6; filter:brightness(4); }
    30%  { transform:scaleY(0.008) scaleX(0.08); opacity:0.9; filter:brightness(3); }
    50%  { transform:scaleY(0.012) scaleX(0.4); opacity:1; filter:brightness(2); }
    70%  { transform:scaleY(0.012) scaleX(1); opacity:1; filter:brightness(1.5); }
    100% { transform:scaleY(1) scaleX(1); opacity:1; filter:brightness(1); }
}

#viewport.crt-on{
    animation:crtWarmup .5s ease-out forwards;
    transform-origin:center center;
}

/* ── POWER BUTTON ────────────────────────────── */
.btn-power{
    border-color:var(--accent);
    color:var(--accent);
}

.btn-power:hover{
    background:var(--accent);
    color:#0a0a0a;
}

/* ── CONNECTION INDICATOR ────────────────────── */
.conn-indicator{
    position:fixed;bottom:0;right:0;
    width:12px;height:12px;
    border:1px solid rgba(255,255,255,.2);
    box-sizing:border-box;
    background:#555;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease,background-color .25s ease;
    z-index:150;
}
.conn-indicator.visible{opacity:.8}
.conn-indicator.state-ok{background:#2ecc40}
.conn-indicator.state-warn{background:#ffcc00}
.conn-indicator.state-fail{background:#ff3b30}
.conn-indicator.state-off{background:transparent;border-color:transparent}

/* ── REACTIVE INDICATOR ───────────────────────── */
.react-indicator{
    position:fixed;bottom:0;right:22px;
    font-family:'Courier New',Courier,monospace;
    font-size:9px;letter-spacing:2px;line-height:1;
    color:var(--dim);
    padding:3px 6px 4px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.65);
    mix-blend-mode:difference;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease,color .25s ease,border-color .25s ease;
    z-index:150;
}
.react-indicator.visible{opacity:.85}
.react-indicator.on{color:#2ecc40;border-color:rgba(46,204,64,.4);animation:vhsFlicker 2s steps(2) infinite}
.react-indicator.off{color:#ff3b30;border-color:rgba(255,59,48,.4)}
body.dream-off .react-indicator{opacity:0}

/* ── AUDIO-KICK (Takt-Reaktion auf Layer) ─────── */
#windowLayer.audio-kick{
    animation:audioKick .3s ease-out;
}
@keyframes audioKick{
    0%{filter:brightness(var(--kick, 1.3)) saturate(1.15)}
    100%{filter:brightness(1) saturate(1)}
}

/* ── AUDIO BUTTON ─────────────────────────────── */
.btn-audio{
    border-color:var(--accent);
    color:var(--accent);
}

.btn-audio:hover{
    background:var(--accent);
    color:#0a0a0a;
}

.btn-audio.active{
    background:var(--accent);
    color:#0a0a0a;
    animation:audioPulse 2s ease-in-out infinite;
}

@keyframes audioPulse{
    0%,100%{opacity:1}
    50%{opacity:.6}
}

/* ══════════════════════════════════════════════
   DREAM EFFECTS — Traum-Kosmos
   ══════════════════════════════════════════════ */

/* ── 1. TEXT INSERTS (Traumfragmente) ─────────── */
.dream-text{
    position:absolute;
    pointer-events:none;
    z-index:50;
    color:var(--fg);
    font-family:'Courier New',Courier,monospace;
    white-space:nowrap;
    text-shadow:0 0 8px var(--accent);
    opacity:0;
}
.dream-text.flash{animation:dreamTextFlash var(--dur) ease-in-out forwards}
.dream-text.morse{animation:dreamTextMorse var(--dur) steps(1,end) forwards}
.dream-text.drift{animation:dreamTextDrift var(--dur) ease-in-out forwards}
.dream-text.hold{animation:dreamTextHold var(--dur) ease-out forwards}
.dream-text.glitch{animation:dreamTextGlitch var(--dur) ease-in-out forwards}
.dream-text.chroma{animation:dreamTextChroma var(--dur) ease-in-out forwards}
.dream-text.ticker{
    overflow:hidden;
    animation:dreamTextTicker var(--dur) steps(var(--ticker-ch,30),end) forwards;
}
.dream-text.ticker::after{
    content:'' ;
    display:inline-block;
    width:2px;
    height:1em;
    margin-left:2px;
    background:var(--fg);
    vertical-align:-2px;
    animation:tickerCaret .55s steps(1,end) infinite;
}
.dream-text.rgb{
    color:#fff;
    animation:dreamRgbText var(--dur) steps(7,end) forwards;
}

@keyframes dreamTextFlash{
    0%{opacity:0;transform:translateY(6px) scale(var(--scale,1));filter:blur(1px)}
    12%{opacity:.9;filter:blur(0)}
    50%{opacity:.95;transform:translateY(0) scale(calc(var(--scale,1) * 1.05))}
    88%{opacity:.9}
    100%{opacity:0;transform:translateY(-6px) scale(var(--scale,1));filter:blur(1px)}
}

@keyframes dreamTextMorse{
    0%{opacity:0;transform:translateX(var(--shake,0))}
    8%{opacity:.9;transform:translateX(var(--shake,0))}
    15%{opacity:0}
    22%{opacity:.9}
    28%{opacity:0}
    42%{opacity:.95}
    55%{opacity:0}
    64%{opacity:.9}
    78%{opacity:0}
    88%{opacity:.4}
    100%{opacity:0}
}

@keyframes dreamTextDrift{
    0%{opacity:0;transform:translate(-7vw,0) scale(var(--scale,1));filter:blur(2px)}
    15%{opacity:.85;filter:blur(0)}
    60%{opacity:.9;transform:translate(3vw,-2vh) scale(calc(var(--scale,1) * 1.12))}
    85%{opacity:.4;transform:translate(8vw,3vh) scale(var(--scale,1));filter:blur(1px)}
    100%{opacity:0}
}

@keyframes dreamTextHold{
    0%{opacity:0;transform:scale(1.7)}
    10%{opacity:.95;transform:scale(1)}
    72%{opacity:.95;transform:scale(1)}
    80%{opacity:0}
    84%{opacity:.6}
    90%{opacity:0}
    100%{opacity:0}
}

@keyframes dreamTextGlitch{
    0%{opacity:0;transform:translate(0)}
    10%{opacity:.9;transform:translate(-3px,1px)}
    20%{opacity:.7;transform:translate(3px,-1px)}
    30%{opacity:.9;transform:translate(-1px,2px)}
    45%{opacity:0}
    55%{opacity:.9;transform:translate(2px,-2px)}
    80%{opacity:.9;transform:translate(1px,-1px)}
    100%{opacity:0;transform:translate(0)}
}

@keyframes dreamTextChroma{
    0%{opacity:0}
    12%{opacity:.9;transform:translate(0)}
    22%{transform:translate(2px,0)}
    32%{transform:translate(-2px,0)}
    48%{transform:translate(1px,0)}
    60%{opacity:.9;transform:translate(-1px,0)}
    100%{opacity:0;transform:translate(0)}
}

@keyframes dreamTextTicker{
    0%{opacity:1;width:0}
    82%{opacity:1;width:calc(var(--ticker-ch,30) * 1ch)}
    86%{opacity:1}
    100%{opacity:0;width:calc(var(--ticker-ch,30) * 1ch)}
}

@keyframes tickerCaret{
    0%,100%{opacity:1}
    50%{opacity:0}
}

@keyframes dreamRgbText{
    0%{opacity:0;text-shadow:0 0 0 transparent;transform:translate(0)}
    15%{opacity:.95;text-shadow:-3px 0 rgba(255,0,255,.9),3px 0 rgba(0,255,255,.9);transform:translate(-1px,0)}
    30%{opacity:.75;text-shadow:2px 0 rgba(255,0,255,.8),-2px 0 rgba(0,255,255,.8);transform:translate(1px,1px)}
    45%{opacity:.95;text-shadow:-4px 1px rgba(255,0,255,.9),4px -1px rgba(0,255,255,.9);transform:translate(-2px,0)}
    70%{opacity:.9;text-shadow:2px 0 rgba(255,0,255,.85),-2px 0 rgba(0,255,255,.85);transform:translate(1px,-1px)}
    100%{opacity:0;text-shadow:0 0 0 transparent;transform:translate(0)}
}

/* Farb-/Stil-Varianten */
.dream-text.white{color:#fff8e7;text-shadow:0 0 10px rgba(255,248,231,.8)}
.dream-text.split{color:#fff;text-shadow:-2px 0 rgba(255,60,60,.85),2px 0 rgba(0,220,255,.85)}
.dream-text.ghostym{color:var(--dim);text-shadow:none;letter-spacing:4px}

/* ── 2. INVERT MODE ──────────────────────────── */
#viewport.invert{
    filter:invert(1) hue-rotate(180deg);
    transition:filter .3s ease-in;
}

/* ── 3. ZOOM CRASH ──────────────────────────── */
.anim-window.zoom-crash{
    animation:zoomCrash var(--dur) ease-out forwards;
    z-index:30;
}

@keyframes zoomCrash{
    0%{transform:scale(1);filter:brightness(1)}
    30%{transform:scale(4);filter:brightness(1.8)}
    60%{transform:scale(2.5);filter:brightness(1.3)}
    100%{transform:scale(1);filter:brightness(1)}
}

/* ── 4. SEPIA / B&W (Zeitliche Verzerrung) ─── */
#viewport.sepia{
    filter:sepia(.9) saturate(.4);
    transition:filter .5s ease-in;
}

#viewport.grayscale{
    filter:grayscale(1) contrast(1.2);
    transition:filter .5s ease-in;
}

/* ── 5. GHOST IMAGES ─────────────────────────── */
.anim-window .ghost-img{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    opacity:0;
    mix-blend-mode:screen;
    pointer-events:none;
    animation:ghostRise var(--dur) ease-in-out forwards;
}

@keyframes ghostRise{
    0%{opacity:0;filter:blur(8px) brightness(1.5)}
    40%{opacity:.08;filter:blur(4px) brightness(1.2)}
    70%{opacity:.06;filter:blur(6px) brightness(1.1)}
    100%{opacity:0;filter:blur(10px) brightness(1.5)}
}

/* ── 6. BLACK FLASH ──────────────────────────── */
#viewport.blackflash{
    background:#000;
    transition:none;
}

#viewport.blackflash-active{
    animation:blackBlink var(--dur) steps(1) forwards;
}

@keyframes blackBlink{
    0%{background:#000}
    100%{background:var(--bg)}
}

/* ── 7. HELLIGKEIT (iPhone/faire dunkle Displays) ── */
@media (prefers-color-scheme: dark){
    .anim-window img{
        filter:contrast(1.2) saturate(.9) brightness(1.15);
    }
    #scanlines, #vignette{
        opacity:.35;
    }
}

@media (max-width: 480px){
    .anim-window img{
        filter:contrast(1.15) saturate(.9) brightness(1.1);
    }
    #scanlines, #vignette{
        opacity:.3;
    }
}

/* ── 8. SYSTEMLAST RUUNTERFAHREN (Power-Off / Startbildschirm) ──
   body.dream-off wird gesetzt, sobald man den Off-Button drueckt.
   Pausiert alle zyklischen CSS-Animationen (Grain, Scanlines,
   CRT-Flicker, AudioPulse), damit im Startbildschirm keine
   unnötige CPU-Last mehr anfaellt. */
body.dream-off,
body.dream-off #viewport::after,
body.dream-off #scanlines,
body.dream-off #crt-overlay,
body.dream-off .conn-indicator,
body.dream-off .react-indicator,
body.dream-off .btn-audio.active,
body.dream-off .mode-indicator{
    animation:none;
}
/* Login/Startbildschirm: die Fullscreen-Overlays komplett aus dem
   Compositing nehmen, damit vor dem Power-ON keinerlei GPU-Last anfaellt. */
body.dream-off #scanlines,
body.dream-off #vignette,
body.dream-off #crt-overlay{
    display:none;
}
body.dream-off #windowLayer{
    filter:none !important;
    transition:none !important;
}
body.dream-off #viewport::after{
    opacity:0;
}