/* =========================================
   1. GLOBALE VARIABLEN & THEMES (Z-DEPTH UPGRADE)
   ========================================= */
:root {
    /* C64 Default Theme */
    --bg-color: #352879;      
    --fg-color: #201a60;      /* Tiefes Chassis-Blau */
    --chassis-light: #4a3d99; /* Highlight-Kante */
    --chassis-dark: #141040;  /* Schatten-Kante */
    
    --text-color: #6c5eb5;
    --panel-text: #6c5eb5;    
    --highlight-color: #ffffff;
    
    --screen-bg: #1c1544;     /* Dunkler CRT-Hintergrund */
    
    --font-main: 'Press Start 2P', monospace;
    /* GFX UPGRADE: Fluid Typography wächst dynamisch mit der Bildschirmbreite mit */
    --font-size-base: clamp(9px, 0.8vw, 12px);
}

body.theme-amiga {
    --bg-color: #000000;      
    --fg-color: #111111;      /* Dunkles Graphit-Gehäuse */
    --chassis-light: #2a2a2a; 
    --chassis-dark: #050505;  
    
    --text-color: #ffffff;
    --panel-text: #ff8800;    
    --highlight-color: #ffffff; 
    
    --screen-bg: #0a0500;     /* Tiefer Bernstein-Glow Background */
    
    --font-main: 'VT323', monospace;
    --font-size-base: clamp(18px, 1.3vw, 22px);
}

body.theme-atari {
    --bg-color: #000000;      
    --fg-color: #141414;      /* Schwarzes Plastik-Chassis */
    --chassis-light: #222222; 
    --chassis-dark: #000000;  
    
    --text-color: #55ff55;    
    --panel-text: #55ff55;    
    --highlight-color: #ffffff;
    
    --screen-bg: #001100;     /* Phosphor-Grün Background */
    
    --font-main: 'VT323', monospace;
    --font-size-base: 20px;
}

/* =========================================
   2. RESET & BASIS
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================================
   GFX RETRO-BLITTER UPGRADE (Nearest-Neighbor Enforcement)
   Zwingt die GPU des Browsers, beim Strecken oder Maximieren
   des Canvas jegliche bilineare Filterung hart zu blockieren!
   Garantiert 100% aliaster, knallharter Pixel-Art-Look auf 4K,
   Retina-Displays und im Vollbild!
   ========================================================= */
canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body, html {
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow: hidden; 
    transition: background-color 0.5s, color 0.5s;
}

.hidden { display: none !important; }

.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* =========================================
   3. BOOT SCREEN (C64 Startup Simulation)
   ========================================= */
#boot-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #6c5eb5;
    cursor: pointer;
}

.boot-box {
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 70vh;
    background-color: #352879;
    padding: 8vh 4vw;
    color: #6c5eb5;
    font-family: 'Press Start 2P', monospace;
    text-transform: uppercase;
    -webkit-font-smoothing: none;
    font-smooth: never;
    image-rendering: pixelated;
    font-size: 16px; 
}

.boot-header, .boot-subheader {
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
}
.boot-subheader { margin-bottom: 48px; }

.boot-logs {
    text-align: left;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
    line-height: 1.6;
}
.boot-logs p { margin: 16px 0; }

.boot-cursor {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #6c5eb5;
    animation: c64-blink 1s steps(2, start) infinite;
    vertical-align: text-bottom;
    margin-left: 8px;
}

@keyframes c64-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (min-width: 800px) {
    .boot-box { font-size: 24px; padding: 60px 40px; }
    .boot-cursor { width: 24px; height: 24px; }
}

/* =========================================
   4. HAUPT-LAYOUT (ZONEN & HARDWARE CHASSIS)
   ========================================= */
#demo-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

#visual-zone {
    /* GFX UPGRADE: Der Analyzer skaliert auf großen Monitoren jetzt wuchtig mit! */
    height: clamp(200px, 35vh, 450px);
    position: relative;
    background-color: #000;
    border-bottom: 4px solid var(--chassis-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    z-index: 10;
}
#demo-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 5;
}

/* --- DAS HARDWARE CHASSIS --- */
#ui-zone {
    height: 47vh;
    display: flex;
    background-color: var(--fg-color);
    padding: 20px;
    gap: 20px;
    /* GFX FIX: Inset-Schatten gelöscht, um doppelte Kanten zu verhindern */
}

#scroller-zone {
    position: relative;
    height: 12vh; /* Von 10vh auf 12vh vergrößert für mehr Prominenz */
    background-color: #020202; /* Minimal aufgehellt, damit der Schatten greift */
    border-top: 4px solid var(--chassis-dark);
}

/* GFX UPGRADE: Der Hardware-Bezel (Versenktes LED-Matrix-Modul) */
#scroller-zone::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Massiver Schlagschatten nach innen, der wie ein Acrylglas-Abstandshalter wirkt */
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 1.0), inset 0 -6px 15px rgba(0, 0, 0, 0.9);
    pointer-events: none; /* Lässt Event-Klicks (falls später nötig) durchs Glas aufs Canvas fallen */
    z-index: 10;
}

#scroller-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#scroller-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================
   5. PLAYER PANEL (LINKS)
   ========================================= */
#player-panel {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    color: var(--panel-text); 
    padding: 10px; 
}

/* =========================================
   SKEUOMORPHIC RETRO SYSTEM TABS (Hardware Buttons)
========================================= */
.system-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px; 
}

.tab-btn {
    flex: 1;
    position: relative;
    background: var(--fg-color);
    color: var(--panel-text);
    padding: 12px 0;
    font-family: inherit;
    font-size: var(--font-size-base);
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Hardware 3D Bevel (Angehobener Button) */
    border: none;
    border-top: 2px solid var(--chassis-light);
    border-left: 2px solid var(--chassis-light);
    border-bottom: 4px solid var(--chassis-dark);
    border-right: 4px solid var(--chassis-dark);
    box-shadow: 2px 4px 6px rgba(0,0,0,0.4);
    
    transition: all 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-btn:hover {
    color: var(--highlight-color);
}

/* Gepresster Button (Active State) */
.tab-btn.active {
    background: var(--bg-color); /* Vertieft = Schattenfarbe */
    color: var(--highlight-color);
    transform: translateY(2px) translateX(2px); /* Physikalisch nach unten/rechts gedrückt */
    
    /* Invertierter Bevel (Versunken in das Chassis) */
    border-top: 4px solid var(--chassis-dark);
    border-left: 4px solid var(--chassis-dark);
    border-bottom: 2px solid var(--chassis-light);
    border-right: 2px solid var(--chassis-light);
    box-shadow: inset 2px 4px 8px rgba(0,0,0,0.6);
}

/* System-spezifische Active-Indikatoren (LED Stripes am oberen Rand) */
body.theme-c64 .tab-btn.active {
    border-top: 4px solid #6c5eb5; 
}
body.theme-atari .tab-btn.active {
    border-top: 4px solid #55ff55;
    text-shadow: 0 0 8px #55ff55;
}
body.theme-amiga .tab-btn.active {
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #ff0000 20%, #ff7700 40%, #ffff00 60%, #00cc00 80%, #0033ff 100%) 1;
}

/* --- EMU CORE SELECTOR CONTAINER --- */
.core-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px; /* Von 25px auf 12px verringert für kompakten Sitz */
    font-size: calc(var(--font-size-base) * 0.8);
    color: var(--panel-text);
}

.core-control select {
    flex-grow: 1;
    min-width: 0; 
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    
    /* Recessed LCD Screen Look */
    background-color: var(--screen-bg); 
    border: 2px solid var(--chassis-dark);
    border-bottom: 1px solid var(--chassis-light);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.9);
    
    color: var(--highlight-color);     
    padding: 10px 12px;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    cursor: pointer;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}

.core-control select option {
    background-color: var(--bg-color); 
    color: var(--highlight-color); 
    padding: 8px 5px;
}

/* =========================================
   TRACKLIST (Recessed CRT Terminal)
========================================= */
#tracklist {
    list-style: none;
    flex-grow: 1;
    overflow-y: auto;
    font-size: var(--font-size-base); 
    line-height: 1.6;
    
    /* GFX UPGRADE: Echter, versenkter CRT-Screen-Ausschnitt */
    background: var(--screen-bg); 
    border-top: 3px solid var(--chassis-dark);
    border-left: 3px solid var(--chassis-dark);
    border-bottom: 2px solid var(--chassis-light);
    border-right: 2px solid var(--chassis-light);
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9);
    padding: 10px;
}

#tracklist li {
    color: var(--text-color); 
    /* GFX UPGRADE: Weniger Padding & Line-Height für Laptops */
    padding: 6px 8px; 
    line-height: 1.3;
    cursor: pointer;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* GFX UPGRADE: Native Accordion Pfeile überschreiben (Retro Style) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "[+] "; color: var(--panel-text); }
details[open] > summary::before { content: "[-] "; }

#tracklist li:last-child { border-bottom: none; }
#tracklist li::before { content: "> "; opacity: 0; font-weight: bold; }

#tracklist li:hover {
    background: rgba(255, 255, 255, 0.1); 
    color: var(--highlight-color);      
}
#tracklist li:hover::before { opacity: 0.5; }

.active-track {
    background: var(--text-color) !important;
    color: var(--screen-bg) !important; 
    font-weight: bold;
    border-bottom-color: transparent !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.active-track::before {
    opacity: 1 !important;
    animation: c64-blink 1s steps(2, start) infinite; 
}

/* --- PLAYBACK BAR (Die neue Steuerzentrale) --- */
#playback-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--fg-color);
    padding: 15px 20px;
    gap: 25px;
    /* GFX FIX: Einzelne, perfekt austarierte 3D-Fuge statt unschöner doppelter Ränder */
    border-bottom: 1px solid var(--chassis-dark); 
    box-shadow: 0 1px 0 var(--chassis-light); /* Wirft das Licht-Highlight sauber nach unten */
    flex-shrink: 0; /* Verhindert unkontrolliertes Strecken/Stauchen durch den parent Flexbox-Container */
}

/* Erweitert den Platz für die hardware-nahen Tasten */
.controls { 
    display: flex; 
    gap: 8px; 
    flex: 0 0 440px; /* Von 410px auf 440px vergrößert für ausfallsicheren Textfluss */
    align-items: center; /* Verhindert, dass die Tasten bei vertikaler Ausdehnung der Bar ausbrechen */
}

/* Kompakteres Letter-Spacing für sauberen Textitz im Button-Gehäuse */
.controls button {
    flex: 1;
    background: var(--bg-color); 
    color: var(--panel-text);
    padding: 12px 4px; /* Etwas weniger horizontaler Padding-Verbrauch */
    font-size: calc(var(--font-size-base) * 1.05); /* Schriftgröße minimal optimiert für den Textfluss */
    letter-spacing: -0.5px; /* Verhindert das Auseinanderziehen von langen Begriffen */
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap; /* VERHINDERT HÄSSLICHE ZEILENUMBRÜCHE AUF DESKTOP KOMPLETT */
    
    border: none;
    border-top: 2px solid var(--chassis-light);
    border-left: 2px solid var(--chassis-light);
    border-bottom: 3px solid var(--chassis-dark);
    border-right: 3px solid var(--chassis-dark);
    box-shadow: 1px 3px 5px rgba(0,0,0,0.4);
    
    transition: all 0.05s;
}

/* GFX FIX: Spezifischer Scaler für die extrem breiten C64-Schriftzeichen */
body.theme-c64 .controls button {
    font-size: clamp(10.5px, 0.85vw, 12px) !important; /* Stabiles, scharfes C64-Schriftbild auf allen Monitoren */
}

/* Verhindert zuverlässig den Zeilenumbruch durch überproportionale Flex-Gewichtung */
#btn-play {
    flex: 2.1 !important; 
}

#btn-eco {
    flex: 1.3 !important; /* Gibt dem 8-Zeichen "HALT GFX" Button proportional mehr Raum auf Desktop */
}

.controls button:hover {
    background: var(--panel-text);
    color: var(--bg-color);
}

.controls button:active {
    transform: translateY(2px) translateX(1px); 
    border-top: 3px solid var(--chassis-dark);
    border-left: 3px solid var(--chassis-dark);
    border-bottom: 1px solid var(--chassis-light);
    border-right: 1px solid var(--chassis-light);
    box-shadow: inset 1px 3px 5px rgba(0,0,0,0.6);
}

.timeline-control, .volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    color: var(--panel-text); 
    font-size: calc(var(--font-size-base) * 0.9);
}

/* =========================================
   HARDWARE SLIDERS (Real Mixing Desk Faders)
========================================= */
input[type="range"] {
    flex-grow: 1;
    -webkit-appearance: none;
    
    /* Tiefe Hardware-Rille */
    background: var(--screen-bg); 
    border-top: 2px solid var(--chassis-dark);
    border-left: 1px solid var(--chassis-dark);
    border-bottom: 1px solid var(--chassis-light);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9); 
    height: 8px;
    outline: none;
    cursor: pointer;
}

/* Der Schieberegler (Fader Cap) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 30px; 
    
    /* GFX FIX: Neutraler 3D-Schattierungs-Verlauf verhindert optisches Durchbrechen auf schwarzem Grund */
    background: linear-gradient(
        to bottom,
        var(--panel-text) 0%,
        var(--panel-text) 45%,
        rgba(0, 0, 0, 0.45) 45%,      /* Tiefe, dunkle Fuge */
        rgba(255, 255, 255, 0.15) 50%, /* Reflektierende Lichtkante am Fugen-Boden */
        rgba(0, 0, 0, 0.45) 55%,      /* Tiefe, dunkle Fuge */
        var(--panel-text) 55%,
        var(--panel-text) 100%
    );
    border: 1px solid var(--chassis-dark);
    border-top: 2px solid #fff; /* Starkes Highlight oben */
    border-radius: 2px;
    cursor: pointer;
    
    /* Schwerer Drop-Shadow, der über die Rille geworfen wird */
    box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.6);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 30px;
    background: linear-gradient(
        to bottom,
        var(--panel-text) 0%,
        var(--panel-text) 45%,
        rgba(0, 0, 0, 0.45) 45%,      /* Tiefe, dunkle Fuge */
        rgba(255, 255, 255, 0.15) 50%, /* Reflektierende Lichtkante am Fugen-Boden */
        rgba(0, 0, 0, 0.45) 55%,      /* Tiefe, dunkle Fuge */
        var(--panel-text) 55%,
        var(--panel-text) 100%
    );
    border: 1px solid var(--chassis-dark);
    border-top: 2px solid #fff;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.6);
}

/* =========================================
   6. MUSEUM PANEL (RECHTS - CARD BASED TERMINAL)
   ========================================= */
#museum-panel {
    flex: 1;
    background-color: transparent; 
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.museum-header h2 {
    font-size: calc(var(--font-size-base) * 1.1);
    margin-bottom: 15px;
    color: var(--highlight-color);
    text-shadow: 2px 2px 0 var(--chassis-dark);
}

.museum-content {
    flex-grow: 1;
    font-size: var(--font-size-base);
    line-height: 1.6;
    overflow-y: auto;
    
    /* GFX UPGRADE: Ebenfalls als Terminal-Screen versenkt */
    background: var(--screen-bg);
    border-top: 3px solid var(--chassis-dark);
    border-left: 3px solid var(--chassis-dark);
    border-bottom: 2px solid var(--chassis-light);
    border-right: 2px solid var(--chassis-light);
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9);
    padding: 15px;
}

.museum-content p { margin-bottom: 12px; }

/* =========================================
   BRANDING LOGO
========================================= */
#brand-logo {
    position: absolute;
    top: 25px;  /* Von 15px auf 25px erhöht für mehr Abstand zum Gehäuserand */
    left: 30px; /* Von 20px on 30px erhöht für einen edlen Weißraum */
    z-index: 10;
    pointer-events: auto; 
    cursor: pointer;      
    display: flex;
    flex-direction: column;
    animation: float-logo 3.5s ease-in-out infinite alternate;
}

.brand-main {
    font-family: 'Press Start 2P', monospace;
    font-size: 28px;
    letter-spacing: 2px;
    background: linear-gradient(to bottom, #ffffff 0%, var(--text-color) 45%, var(--bg-color) 50%, #ffffff 53%, var(--text-color) 100%);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(1px 1px 0px var(--bg-color)) drop-shadow(2px 2px 0px var(--bg-color)) drop-shadow(4px 4px 0px #000000);
    margin-bottom: 2px;
    animation: chrome-cycle 3s ease-in-out infinite alternate;
}

.brand-sub {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px; /* Minimal kompakter für schärferen Textitz */
    color: var(--highlight-color);
    letter-spacing: 12px; /* Breites, edles Kerning */
    text-align: right; 
    padding-right: 2px;
    margin-top: 8px; /* Verschiebt "FANTASY" nach unten, weg von der Chrom-Kante */
    
    /* GFX FIX: Kein weichgezeichneter Glow mehr, sondern ein messerscharfer Hardware-Schatten */
    text-shadow: 1px 1px 0px #000000;
}

/* =========================================
   BRANDING LOGO DEMO MODE ACTIVE GLOW
   ========================================= */
#brand-logo.demo-mode-active::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    /* Schimmert und rotiert organisch auf der GPU */
    animation: pulse-glow 3.5s ease-in-out infinite alternate;
    transition: background 0.5s ease;
}

/* System-spezifische, dreidimensionale Neon-Glows */
body.theme-c64 #brand-logo.demo-mode-active::before {
    background: radial-gradient(circle, rgba(108, 94, 181, 0.45) 0%, rgba(53, 40, 121, 0.15) 50%, transparent 70%);
}

body.theme-amiga #brand-logo.demo-mode-active::before {
    background: radial-gradient(circle, rgba(255, 136, 0, 0.4) 0%, rgba(255, 51, 0, 0.15) 55%, transparent 75%);
}

body.theme-atari #brand-logo.demo-mode-active::before {
    background: radial-gradient(circle, rgba(85, 255, 85, 0.35) 0%, rgba(0, 51, 0, 0.15) 60%, transparent 75%);
}

/* Nobel und edel pulsierender Back-Glow über CSS-Filter statt unruhigem Text-Schatten */
#brand-logo.demo-mode-active .brand-main {
    transition: filter 0.5s ease;
}

body.theme-c64 #brand-logo.demo-mode-active .brand-main {
    filter: drop-shadow(1px 1px 0px var(--bg-color)) 
            drop-shadow(2px 2px 0px var(--bg-color)) 
            drop-shadow(4px 4px 0px #000000)
            /* Der weiche, noble Back-Glow sitzt sauber hinter der 3D-Kante */
            drop-shadow(0 0 10px rgba(108, 94, 181, 0.55));
}

body.theme-amiga #brand-logo.demo-mode-active .brand-main {
    filter: drop-shadow(1px 1px 0px var(--bg-color)) 
            drop-shadow(2px 2px 0px var(--bg-color)) 
            drop-shadow(4px 4px 0px #000000)
            drop-shadow(0 0 10px rgba(255, 136, 0, 0.5));
}

body.theme-atari #brand-logo.demo-mode-active .brand-main {
    filter: drop-shadow(1px 1px 0px var(--bg-color)) 
            drop-shadow(2px 2px 0px var(--bg-color)) 
            drop-shadow(4px 4px 0px #000000)
            drop-shadow(0 0 10px rgba(85, 255, 85, 0.45));
}

@keyframes pulse-glow {
    0% {
        transform: scale(0.85) rotate(0deg);
        opacity: 0.5;
        filter: blur(25px);
    }
    50% {
        opacity: 0.85;
        filter: blur(18px);
    }
    100% {
        /* Weiche 15-Grad-Rotation erzeugt lebendigen Licht-Schimmer */
        transform: scale(1.12) rotate(15deg);
        opacity: 0.65;
        filter: blur(32px);
    }
}

body.eco-mode #brand-logo, body.eco-mode .brand-main { animation-play-state: paused !important; }

/* =========================================
   7. CHIP HUD (DSP MATRIX & ANALYZER)
   ========================================= */
#chip-hud {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 540px; 
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid var(--chassis-dark);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.1);
    box-shadow: 4px 6px 15px rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    padding: 15px; 
    color: var(--highlight-color);
    pointer-events: auto; 
    z-index: 15; 
    transition: opacity 0.4s ease, width 0.3s ease; 
}

#chip-hud.collapsed {
    width: auto; 
    padding: 8px 10px; 
}

.hud-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-bottom: 2px groove var(--chassis-dark);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

#chip-hud.collapsed .hud-header { 
    border-bottom: none; 
    margin-bottom: 0; 
    padding-bottom: 0; 
}

/* Vertikaler Button-Stack */
.hud-controls-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.hud-btn-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

#btn-hud-info, #btn-hud-crossfeed, #btn-hud-toggle {
    background: var(--chassis-dark);
    border: 1px solid var(--chassis-light);
    color: var(--highlight-color);
    padding: 4px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: calc(var(--font-size-base) * 0.8);
    white-space: nowrap;
    transition: all 0.1s;
    text-align: center;
}

#btn-hud-info:active, #btn-hud-crossfeed:active, #btn-hud-toggle:active {
    transform: translateY(1px);
}

.atari-analyzer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

.hud-channel {
    margin-bottom: 12px;
    background: rgba(255,255,255,0.02); /* Leichte Hinterlegung pro Block */
    border: 1px solid rgba(255,255,255,0.05);
    padding: 8px;
}

.hud-channel h4 {
    color: var(--highlight-color);
    font-size: calc(var(--font-size-base) * 0.8);
    margin-bottom: 8px;
    text-shadow: 0 0 2px var(--text-color); 
    letter-spacing: 1px;
    border-bottom: 1px dotted rgba(255,255,255,0.2);
    padding-bottom: 4px;
}

.hud-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: calc(var(--font-size-base) * 0.75);
}

.hud-row label {
    flex-shrink: 0;
    width: 60px; 
    color: var(--text-color);
    opacity: 0.8;
}

.hud-sparkline {
    flex-grow: 1;
    height: 18px;
    background: #000; /* CRT Screen Look für Oszilloskop */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
    margin-right: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    display: block; 
}

.hud-bar {
    flex-grow: 1;
    height: 8px;
    background: #000;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    margin-right: 8px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}
.hud-bar-fill {
    height: 100%;
    background: var(--text-color);
    width: 0%; 
    transition: width 0.05s linear; 
    box-shadow: 0 0 5px var(--text-color); /* LED Leuchten */
}

.hud-val {
    flex-shrink: 0;
    width: 75px; 
    text-align: right;
    font-family: 'Press Start 2P', monospace; 
    font-size: 8px;
    color: var(--highlight-color);
}

/* Physikalische LEDs */
.hud-led {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #000;
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.2), 0 1px 1px rgba(255,255,255,0.1);
    margin-right: 4px;
}
.hud-led.on {
    background: var(--text-color);
    border-color: var(--text-color);
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), 0 0 10px var(--text-color), 0 0 20px var(--text-color);
}
.hud-text-sel { color: var(--highlight-color); font-weight: bold; }

#hud-legend {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--text-color);
    font-size: calc(var(--font-size-base) * 0.7); line-height: 1.4; color: var(--text-color);
}

/* --- PURE AUDIO / ECO MODE OVERLAY --- */
#eco-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px);
    z-index: 20; display: flex; justify-content: center; align-items: center;
}

.eco-box {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 2px solid var(--chassis-dark);
    border-top: 1px solid var(--chassis-light);
    background: var(--fg-color);
    padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); gap: 12px;
}

.eco-box h2 { color: var(--highlight-color); margin-bottom: 15px; }
.eco-box p { color: var(--text-color); font-size: calc(var(--font-size-base) * 0.8); margin-bottom: 5px; opacity: 0.9; }

#btn-eco-off {
    display: block; margin: 20px auto 0 auto;
    background: var(--bg-color); color: var(--highlight-color);
    border: 2px solid var(--highlight-color); padding: 12px 24px;
    font-family: inherit; font-size: var(--font-size-base);
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 0 var(--chassis-dark);
}

#btn-eco-off:active { transform: translateY(4px); box-shadow: 0 0 0 var(--chassis-dark); }

/* =========================================
   FULLSCREEN UI BAR (Unobtrusive)
========================================= */
#fs-ui-bar {
    position: absolute; bottom: 15px; right: 15px; z-index: 12; 
    display: flex; align-items: center; gap: 15px; opacity: 0.3; transition: opacity 0.4s ease;
}

#fs-ui-bar:hover { opacity: 1.0; }
/* Fadet das komplette Panel stufenlos aus, wenn der User inaktiv ist (Sohwohl im Fenster als auch im Vollbild!) */
#visual-zone.user-inactive #fs-ui-bar {
    opacity: 0;
    pointer-events: none;
}
#fs-playback-controls { display: none; align-items: center; gap: 15px; }
#visual-zone:fullscreen #fs-playback-controls { display: flex; }
#visual-zone:-webkit-full-screen #fs-playback-controls { display: flex; }
#visual-zone.pseudo-fullscreen #fs-playback-controls { display: flex; }

.fs-track-info {
    font-family: var(--font-main); font-size: calc(var(--font-size-base) * 0.8);
    color: var(--highlight-color); text-shadow: 1px 1px 0px #000; 
    max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; letter-spacing: 1px;
}

.fs-controls { display: flex; gap: 5px; }
.fs-controls button, #btn-fullscreen {
    background: rgba(0, 0, 0, 0.8); border: 1px solid var(--text-color); color: var(--highlight-color);
    padding: 8px 14px; font-family: var(--font-main); font-size: 10px; cursor: pointer; transition: all 0.1s; outline: none;
}
.fs-controls button:hover, #btn-fullscreen:hover { background: var(--text-color); color: #000; border-color: var(--highlight-color); }

#visual-zone:fullscreen { width: 100% !important; height: 100% !important; }
#visual-zone:-webkit-full-screen { width: 100% !important; height: 100% !important; }

#visual-zone.pseudo-fullscreen {
    position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important; z-index: 999999 !important; margin: 0 !important; border-radius: 0 !important;
}

/* =========================================
   SUBSONG DISPLAY TIMELINE OVERLAY
========================================= */
#subsong-display {
    font-family: inherit; font-size: calc(var(--font-size-base) * 0.9);
    color: var(--highlight-color); margin-right: 15px; text-shadow: 0 0 4px var(--text-color); letter-spacing: 1px;
}

/* =========================================
   8. MOBILE RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 800px) {
    body, html { overflow: visible !important; height: auto; min-height: 100dvh; }

    #hud-body { max-height: 35vh; overflow-y: auto; overflow-x: hidden; }
    #demo-container { height: auto; min-height: 100vh; }
    #visual-zone { height: 45vh; }
    
    /* NEU: Maximale Touch-Größe & Treffsicherheit für die Playlist-Buttons */
    body.theme-amiga #tracklist li,
    body.theme-atari #tracklist li {
        font-size: clamp(24px, 6.5vw, 30px) !important;
        padding: 12px 14px !important;
    }

    /* NEU: Weit größere Transport-Button-Schrift für Amiga & Atari im Mobile-Modus
       Da VT323 extrem schmal ist, können wir hier massiv hochskalieren! */
    body.theme-amiga #playback-bar .controls button,
    body.theme-atari #playback-bar .controls button {
        font-size: clamp(14px, 4.4vw, 22px) !important; /* Von max 13px auf bis zu 22px angehoben! */
        letter-spacing: 0px !important; /* Kein negatives Spacing nötig bei der schmalen Schrift */
    }

    #hud-body { max-height: 35vh; overflow-y: auto; overflow-x: hidden; }
    
    /* Das Scroller-Zone Upgrade für den sicheren iOS-Rand */
    #scroller-zone { height: auto; min-height: 10vh; padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }

    #ui-zone { flex-direction: column; height: auto; padding: 10px; }
    #player-panel, #museum-panel { flex: none; width: 100%; }
    .museum-content { overflow-y: visible !important; }

#playback-bar {
        position: -webkit-sticky; 
        position: sticky; 
        top: 0; 
        z-index: 100; 
        display: flex !important;
        flex-direction: column !important; /* Schaltet auf vertikale Spalte um, um Zeilen-Wrapping zu umgehen */
        align-items: stretch !important;    /* Zwingt alle Kind-Reihen auf exakt 100% Breite */
        padding: 12px 10px !important;     /* Taktiler, kompakter Rahmenabstand */
        box-shadow: 0 5px 15px rgba(0,0,0,0.8); 
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #playback-bar {
        position: -webkit-sticky; 
        position: sticky; 
        top: 0; 
        z-index: 100; 
        display: flex !important;
        flex-direction: column !important; /* Stack rows vertically */
        justify-content: flex-start !important; /* Vernichtet den space-between Verteilungs-Bug! */
        align-items: stretch !important;    /* Force full width on all rows */
        gap: 12px !important;              /* Hardware-nahes, enges Spacing zwischen den Steuerelementen */
        padding: 12px 10px !important;     /* Äußerst kompakter Gehäuserahmen */
        box-shadow: 0 5px 15px rgba(0,0,0,0.8); 
        width: 100% !important;
        height: auto !important;           /* Zwingt das Gehäuse, sich flach an den Inhalt anzuschmiegen */
        flex: none !important;             /* Blockiert jegliches unkontrolliertes Aufblähen durch den parent Flexbox-Sog */
        box-sizing: border-box !important;
    }
    
/* =========================================================
       MOBILE PLAYBACK BAR FIX
       Erzwingt volle Breite und killt den Höhen-Blowout
    ========================================================= */
    #playback-bar .controls {
        flex: none !important;     /* <--- KILLT DIE VERTIKALE AUSDEHNUNG */
        width: 100% !important;    
        display: flex !important;
        gap: 8px !important;
        margin-bottom: 10px !important; 
        box-sizing: border-box !important;
    }

    #playback-bar .controls button { 
        padding: 8px 0 !important; 
        font-size: clamp(8px, 2.2vw, 10px) !important; 
        white-space: nowrap;
        letter-spacing: -0.5px;
        min-width: 0 !important; 
        overflow: hidden; 
        text-overflow: clip; 
    }

    body.theme-amiga #playback-bar .controls button,
    body.theme-atari #playback-bar .controls button {
        font-size: clamp(12px, 3.5vw, 15px) !important; 
        letter-spacing: 0px !important;
        padding: 8px 0 !important; 
    }

    #playback-bar #btn-prev, 
    #playback-bar #btn-next, 
    #playback-bar #btn-eco { 
        flex: 1 1 0% !important; 
    }
    
    #playback-bar #btn-play { 
        flex: 1.6 1 0% !important; 
    }

    #playback-bar .timeline-control { 
        flex: none !important;     /* <--- KILLT DIE VERTIKALE AUSDEHNUNG */
        width: 100% !important; 
        margin-bottom: 8px !important; 
        box-sizing: border-box !important;
    }
    
    #playback-bar .volume-control { 
        flex: none !important;     /* <--- KILLT DIE VERTIKALE AUSDEHNUNG */
        width: 100% !important; 
        justify-content: flex-start !important; 
        margin-bottom: 4px !important; 
        box-sizing: border-box !important;
    }
    
    /* =========================================
    GFX UPGRADE: Fullscreen Play-Controls auf Mobile drosseln
    ========================================= */
    body.theme-c64 #fs-playback-controls .fs-controls button {
        font-size: 10px !important; /* Exakter Match zum Vollbild-Button für ein symmetrisches Raster */
        padding: 8px 14px !important; /* Großzügiges, treffsicheres Touch-Target */
        white-space: nowrap;
    }

    body.theme-amiga #fs-playback-controls .fs-controls button,
    body.theme-atari #fs-playback-controls .fs-controls button {
        font-size: clamp(13px, 3.5vw, 16px) !important; /* Die schmale VT323 profitiert von etwas mehr Höhe */
        padding: 8px 12px !important; /* Optimierte Touch-Präzision */
        white-space: nowrap;
    }
       
    #tracklist {
        max-height: 250px; 
    }
    
    #tracklist li {
        padding: 10px 12px;
        margin-bottom: 2px;
    }
    
    /* Logo auf Handys weiter verkleinern und aus der extremen Ecke rücken */
    #brand-logo {
        top: 18px;  /* Von 10px auf 18px erhöht */
        left: 18px; /* Von 10px auf 18px erhöht */
    }
    .brand-main { 
        font-size: 14px; 
        margin-bottom: 6px;
    }
    
    /* "FANTASY" auch auf Handys sauber abrücken und scharfstellen */
    .brand-sub { 
        font-size: 7px; 
        letter-spacing: 5px; 
        margin-top: 4px; /* Auch auf Handys etwas mehr Luft nach oben */
        text-shadow: 1px 1px 0px #000000; /* Scharfer Kontrast-Schatten */
    }

    #chip-hud { width: 94%; top: 10px; right: 3%; padding: 8px; z-index: 110; }
    #chip-hud.collapsed { width: auto; right: 10px; }

    .atari-analyzer-grid { grid-template-columns: 1fr; gap: 5px; }
    .hud-row label { width: 55px; }
    .hud-channel { margin-bottom: 5px; padding-bottom: 5px; }

    /* NEU: Kompakte Gehäusehöhe für Mobilgeräte */
    .silicon-chassis {
        height: 180px; 
    }
}

.fs-track-info { display: none; }
#visual-zone.pseudo-fullscreen #fs-ui-bar {
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    right: calc(15px + env(safe-area-inset-right)) !important;
}

#visual-zone.no-cursor, #visual-zone.no-cursor * { cursor: none !important; }

#amiga-led-pwr {
    width: 16px !important; height: 16px !important; border-width: 2px !important; cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#amiga-led-pwr:hover { transform: scale(1.18); }
#amiga-led-pwr:active { transform: scale(0.85); }

/* =========================================
   FULLSCREEN HUD AUTO-FADE LOGIC
   ========================================= */
/* Blendet das eingeklappte (collapsed) HUD bei Inaktivität komplett aus.
   Sobald geklickt oder die Maus bewegt wird, fadet es sofort wieder ein! */
#visual-zone.user-inactive #chip-hud.collapsed {
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   9. LIVING SILICON STYLING (HARDWARE LABORATORY)
========================================= */
/* =========================================
   9. LIVING SILICON STYLING (HARDWARE LABORATORY)
   ========================================= */
#living-silicon-container { flex-shrink: 0; width: 100%; display: block; }

.silicon-chassis {
    /* Wächst auf Widescreens nun mächtig an */
    height: clamp(180px, 28vh, 320px); 
    background: var(--screen-bg);
    border-top: 3px solid var(--chassis-dark); border-left: 3px solid var(--chassis-dark);
    border-bottom: 2px solid var(--chassis-light); border-right: 2px solid var(--chassis-light);
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.9);
    padding: 15px; box-sizing: border-box;
    
    /* GFX UPGRADE: Das 3-Spalten Logic-Analyzer Layout */
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    gap: 15px;
    align-items: center;
}

.silicon-die-wrapper { 
    width: 100%; 
    height: 100%; 
    
    /* FIX: Zwingt CSS-Grid, das SVG einzusperren anstatt es ausbrechen zu lassen */
    min-width: 0; 
    min-height: 0; 
    
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.silicon-die-wrapper svg { 
    width: 100%; 
    height: 100%; 
    max-height: 100%; 
    display: block; 
}

/* Flanken-Diagnostik */
.silicon-diagnostics {
    display: flex; flex-direction: column; justify-content: space-around;
    height: 60%; text-align: center;
}
.diag-block { display: flex; flex-direction: column; gap: 6px; }
.d-lbl { font-size: 8px; color: var(--panel-text); font-family: 'Press Start 2P', monospace; opacity: 0.8; }
.d-val { font-size: 10px; color: var(--highlight-color); font-family: 'Press Start 2P', monospace; text-shadow: 0 0 5px var(--highlight-color); }

/* RESPONSIVE DOWN-SCALING */
@media (max-width: 1400px) {
    .silicon-chassis {
        grid-template-columns: 1fr; /* Auf Laptops verschwinden die Flanken, der Chip bekommt 100% Platz */
        padding: 10px; 
        height: clamp(160px, 22vh, 220px);
    }
    .silicon-diagnostics { display: none; }
}

.silicon-chip-body {
    fill: #1c1c1c;
    stroke: var(--chassis-dark);
    stroke-width: 2px;
}

.silicon-pin {
    fill: var(--panel-text);
    stroke: var(--chassis-dark);
    stroke-width: 1px;
    transition: fill 0.05s ease, filter 0.05s ease;
}

.silicon-chip-label {
    font-size: 10px !important;
    letter-spacing: 0.5px;
}

.silicon-die-bus {
    transition: stroke 0.05s ease, opacity 0.05s ease;
}

/* =========================================
   10. SILICON DIE SIGNAL-FLOW KEYFRAMES
   ========================================= */
@keyframes signal-pulse-right {
    to {
        stroke-dashoffset: -20;
    }
}

.signal-bus {
    stroke-dasharray: 6, 6;
    animation: signal-pulse-right 1s linear infinite;
    stroke-linecap: round;
    transition: opacity 0.1s ease, stroke 0.1s ease, filter 0.1s ease;
}

/* =========================================
   11. TERMINAL CARDS & HEX GRIDS (MUSEUM)
   ========================================= */
.terminal-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--chassis-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 15px;
    padding: 12px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.terminal-card-header {
    color: var(--highlight-color);
    border-bottom: 1px dashed var(--panel-text);
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: calc(var(--font-size-base) * 0.9);
    font-weight: bold;
    letter-spacing: 1px;
}

.terminal-grid {
    display: grid;
    /* 4 Spalten: Label -> Wert -> Label -> Wert */
    grid-template-columns: auto 1fr auto 1fr;
    gap: 6px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px; /* Sehr kleine, dichte Nerd-Schrift */
    color: var(--text-color);
    line-height: 1.4;
}

.terminal-grid .lbl {
    color: var(--panel-text);
}

.terminal-grid .val {
    color: var(--highlight-color);
    text-align: left;
}

/* =========================================
   12. THE ACTIVE TRACK GLOW
   ========================================= */
.active-track {
    background: linear-gradient(rgba(255, 255, 255, 0.15) 50%, transparent 50%), var(--text-color) !important;
    background-size: 100% 4px !important;
    color: var(--screen-bg) !important; 
    font-weight: bold;
    border-bottom-color: transparent !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 2px 2px 5px rgba(0,0,0,0.5);
}

/* Globaler Standard: Wieder zu 100% im fehlerfreien Originalzustand (Amiga & Atari gerettet!) */
.active-track::before {
    opacity: 1 !important;
    content: "█ " !important; /* Block-Cursor statt einfachem '>' */
    animation: c64-blink 0.8s steps(2, start) infinite; 
}

/* GFX FIX: Spezifischer Höhen- und Abstands-Ausgleich NUR für das C64-Theme */
body.theme-c64 .active-track::before {
    content: "█" !important; /* Entfernt das kollabierende Leerzeichen aus dem String */
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-0.08em); /* Schiebt das Zeichen präzise auf die vertikale Mittelachse */
    margin-right: 8px; /* Stabiler, hardware-getreuer Abstand zum Track-Text */
    line-height: 1;
}

/* =========================================
   14. CINEMATIC BOOT & STATE TRANSITIONS
   ========================================= */
body.system-transitioning #ui-zone,
body.system-transitioning #living-silicon-container,
body.system-transitioning #chip-hud,
body.system-transitioning #playback-bar {
    animation: power-flicker 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none; /* Blockiert Klicks während des Schaltvorgangs */
}

@keyframes power-flicker {
    0%   { filter: brightness(1) contrast(1); }
    15%  { filter: brightness(0.2) contrast(1.5); opacity: 0.8; }
    30%  { filter: brightness(0.8) contrast(1.2); opacity: 0.95; }
    50%  { filter: brightness(0.1) contrast(2.0); opacity: 0.6; } /* Blackout Peak */
    70%  { filter: brightness(0.6) contrast(1.4); opacity: 0.9; }
    85%  { filter: brightness(0.3) contrast(1.8); opacity: 0.7; }
    100% { filter: brightness(1) contrast(1); opacity: 1; }
}

/* =========================================
   15. PURE AUDIO / ECO MODE STANDBY (TIEFSCHLAF)
   ========================================= */
/* Versetzt das gesamte Silizium-Die in ein kaltes, stromloses Standby-Grau */
body.eco-mode .silicon-chassis {
    filter: brightness(0.12) grayscale(0.95) !important;
    border-top-color: var(--chassis-dark) !important;
    border-left-color: var(--chassis-dark) !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,1) !important;
    transition: filter 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Friert die Elektronenströme auf den Datenbussen sofort ein */
body.eco-mode .signal-bus {
    animation-play-state: paused !important;
    stroke: var(--chassis-dark) !important;
    opacity: 0.1 !important;
    filter: none !important;
}

/* Dimmt das Scroller-Display unten im Standby ebenfalls tief ab */
body.eco-mode #scroller-zone {
    filter: brightness(0.08) !important;
    transition: filter 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   16. MUSEUM TOOLBAR & ARCHIVE TOGGLE
   ========================================= */
.museum-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 6px;
    /* Gefräste Fuge als Trenner zum Silizium */
    border-bottom: 2px groove var(--chassis-dark); 
}

.museum-toolbar-title {
    color: var(--highlight-color);
    font-size: calc(var(--font-size-base) * 0.9);
    font-weight: bold;
    letter-spacing: 1px;
}

#btn-toggle-archive {
    background: var(--chassis-dark);
    border: 1px solid var(--chassis-light);
    color: var(--highlight-color);
    padding: 4px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: calc(var(--font-size-base) * 0.8);
    transition: all 0.1s;
    outline: none;
}

#btn-toggle-archive:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* =========================================
   ARCHIVE EXPANSION LOGIC
   ========================================= */
/* Blendet den Chip aus, wodurch das flex-grow Terminal den Platz übernimmt */
body.archive-expanded #living-silicon-container {
    display: none !important;
}