/* Boot screen: Mac OS 8 Copland arrow cursor */
#bootScreen, #bootScreen * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon points='2,2 2,24 9,17 14,27 17,26 12,16 19,16' fill='%23f0f0f0' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto !important;
}

/* ========== GLOBAL CUSTOM CURSOR ========== */
:root {
    --cursor-default: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22sl%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%222%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%221%22%20fill%3D%22rgba%280%2C255%2C80%2C0.13%29%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%3CclipPath%20id%3D%22ac%22%3E%0A%20%20%20%20%20%20%3Cpolygon%20points%3D%222%2C2%202%2C24%208%2C18%2013%2C28%2016%2C27%2011%2C17%2018%2C17%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpolygon%20points%3D%222%2C2%202%2C24%208%2C18%2013%2C28%2016%2C27%2011%2C17%2018%2C17%22%0A%20%20%20%20fill%3D%22%23000%22%20stroke%3D%22%2300ff66%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%2232%22%0A%20%20%20%20fill%3D%22url%28%23sl%29%22%20clip-path%3D%22url%28%23ac%29%22%20opacity%3D%221%22%2F%3E%0A%20%20%3Cpolygon%20points%3D%222%2C2%202%2C24%208%2C18%2013%2C28%2016%2C27%2011%2C17%2018%2C17%22%0A%20%20%20%20fill%3D%22none%22%20stroke%3D%22%2300ff66%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.22%22%2F%3E%0A%3C%2Fsvg%3E") 0 0, auto;
    --cursor-move: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22slm%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%222%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%221%22%20fill%3D%22rgba%280%2C255%2C80%2C0.13%29%22%2F%3E%3C%2Fpattern%3E%3CclipPath%20id%3D%22mc%22%3E%3Cpolygon%20points%3D%2216%2C2%2019%2C8%2017%2C8%2017%2C15%2024%2C15%2024%2C13%2030%2C16%2024%2C19%2024%2C17%2017%2C17%2017%2C24%2019%2C24%2016%2C30%2013%2C24%2015%2C24%2015%2C17%208%2C17%208%2C19%202%2C16%208%2C13%208%2C15%2015%2C15%2015%2C8%2013%2C8%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2216%2C2%2019%2C8%2017%2C8%2017%2C15%2024%2C15%2024%2C13%2030%2C16%2024%2C19%2024%2C17%2017%2C17%2017%2C24%2019%2C24%2016%2C30%2013%2C24%2015%2C24%2015%2C17%208%2C17%208%2C19%202%2C16%208%2C13%208%2C15%2015%2C15%2015%2C8%2013%2C8%22%20fill%3D%22%23000%22%20stroke%3D%22%2300ff66%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22url%28%23slm%29%22%20clip-path%3D%22url%28%23mc%29%22%20opacity%3D%221%22%2F%3E%3Cpolygon%20points%3D%2216%2C2%2019%2C8%2017%2C8%2017%2C15%2024%2C15%2024%2C13%2030%2C16%2024%2C19%2024%2C17%2017%2C17%2017%2C24%2019%2C24%2016%2C30%2013%2C24%2015%2C24%2015%2C17%208%2C17%208%2C19%202%2C16%208%2C13%208%2C15%2015%2C15%2015%2C8%2013%2C8%22%20fill%3D%22none%22%20stroke%3D%22%2300ff66%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E") 16 16, move;
}

*, *::before, *::after {
    cursor: var(--cursor-active, var(--cursor-default)) !important;
}

/* ── Custom text selection — green glow instead of blue ── */
::selection {
    background: rgba(0, 255, 100, 0.18);
    color: #00ff99;
    text-shadow:
        0 0 8px rgba(0, 255, 100, 0.9),
        0 0 16px rgba(0, 255, 100, 0.5);
}
::-moz-selection {
    background: rgba(0, 255, 100, 0.18);
    color: #00ff99;
    text-shadow:
        0 0 8px rgba(0, 255, 100, 0.9),
        0 0 16px rgba(0, 255, 100, 0.5);
}

/* Boot screen selection — same green glow */
#bootScreen ::selection {
    background: rgba(0, 255, 100, 0.18);
    color: #00ff99;
    text-shadow:
        0 0 8px rgba(0, 255, 100, 0.9),
        0 0 16px rgba(0, 255, 100, 0.5);
}
#bootScreen ::-moz-selection {
    background: rgba(0, 255, 100, 0.18);
    color: #00ff99;
    text-shadow:
        0 0 8px rgba(0, 255, 100, 0.9),
        0 0 16px rgba(0, 255, 100, 0.5);
}

html {
    min-height: 100%;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
}

/* Draggable window headers — 4-directional move cursor on hover */
.window-header:hover,
.window-header:hover *,
.cmd-title:hover,
.cmd-title:hover *,
.monitor-title:hover,
.monitor-title:hover *,
.music-player-header:hover,
.music-player-header:hover *,
#knightsTankCanvas.tank-draggable:hover {
    cursor: var(--cursor-move) !important;
}
/* =========================================== */

/* ================= MAIN ================= */

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

body {
    background: #000;
    color: #00ff66;
    font-family: "Courier New", monospace;
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Animated grid background - SMALLER */
body {
    background-image: 
        linear-gradient(rgba(0,255,120,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,120,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 0 0;
    animation: gridScroll 20s linear infinite;
}

@keyframes gridScroll {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 20px 20px, 20px 20px; }
}

body.hide-grid {
    background-image: none;
    animation: none;
}

/* ================= CRT FILTER BUTTON ================= */

.crt-filter-btn {
    margin-left: 0;
    background: transparent;
    border: 1px solid rgba(0,255,120,0.5);
    color: #00ff88;
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 2px 7px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 2px;
    animation: filterBtnPulse 2.4s ease-in-out infinite;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
/* ON state — steady green */
.crt-filter-btn.state-on {
    animation: filterBtnPulse 2.4s ease-in-out infinite;
    color: #00ff88;
    border-color: rgba(0,255,120,0.5);
}
/* OFF state — steady red */
.crt-filter-btn.state-off {
    animation: filterBtnPulseRed 2.4s ease-in-out infinite;
    color: #ff4444;
    border-color: rgba(255,60,60,0.5);
}
.crt-filter-btn:hover {
    animation: none;
}
.crt-filter-btn.state-on:hover {
    box-shadow: 0 0 8px rgba(0,255,120,0.9), 0 0 16px rgba(0,255,120,0.4);
    border-color: rgba(0,255,120,0.9);
    color: #aaffcc;
}
.crt-filter-btn.state-off:hover {
    box-shadow: 0 0 8px rgba(255,60,60,0.9), 0 0 16px rgba(255,60,60,0.4);
    border-color: rgba(255,60,60,0.9);
    color: #ffaaaa;
}
/* Click flash — yellow */
.crt-filter-btn.flash-click {
    color: #ffee44 !important;
    border-color: rgba(255,230,40,0.9) !important;
    box-shadow: 0 0 8px rgba(255,230,40,0.9), 0 0 16px rgba(255,230,40,0.4) !important;
    animation: none !important;
}
.header-btn-group {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

@keyframes filterBtnPulse {
    0%, 100% { box-shadow: 0 0 3px rgba(0,255,120,0.2); border-color: rgba(0,255,120,0.35); }
    50%       { box-shadow: 0 0 8px rgba(0,255,120,0.6), 0 0 14px rgba(0,255,120,0.2); border-color: rgba(0,255,120,0.7); }
}
@keyframes filterBtnPulseRed {
    0%, 100% { box-shadow: 0 0 3px rgba(255,60,60,0.2); border-color: rgba(255,60,60,0.35); }
    50%       { box-shadow: 0 0 8px rgba(255,60,60,0.6), 0 0 14px rgba(255,60,60,0.2); border-color: rgba(255,60,60,0.7); }
}

/* CRT overlay — dense scanline layer toggled by filter button */
#crtOverlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.22) 2px,
        rgba(0,0,0,0.22) 4px
    );
    animation: crtOverlayFlicker 0.12s steps(1) infinite;
    opacity: 1;
    transition: opacity 0.35s ease;
}
#crtOverlay.crt-hidden {
    opacity: 0;
    animation: none;
}
@keyframes crtOverlayFlicker {
    0%   { opacity: 1;    }
    40%  { opacity: 0.88; }
    70%  { opacity: 1;    }
    90%  { opacity: 0.94; }
    100% { opacity: 1;    }
}

/* body::before base needs transition so crt-off suppression animates */
body::before {
    transition: opacity 0.35s ease;
}
/* When CRT is OFF, suppress the body::before scanline layer */
body.crt-off::before {
    opacity: 0 !important;
}
/* Also hide boot screen CRT overlays when filter is off */
body.crt-off #bootScreen .crt-roll-band,
body.crt-off #bootScreen .crt-tear,
body.crt-off #bootScreen .crt-rgb-dots,
body.crt-off #bootScreen .crt-flicker {
    display: none;
}

/* CRT Screen Effect - STRONGER */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    
    /* Stronger scanlines */
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 100, 0.05) 0px,
        rgba(0, 255, 100, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    
    /* Stronger vignette */
    box-shadow: inset 0 0 150px rgba(0,0,0,0.95);
    
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 0.95; }
    50% { opacity: 1; }
    100% { opacity: 0.97; }
}

/* Screen curvature simulation - STRONGER */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0,0,0,0.5) 100%
    );
}

#container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 35px 20px 20px 20px;
    overflow-x: visible;
}

#layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* SIDE PANELS - WINDOW STYLE */
aside {
    width: 280px;
    border: 1px solid rgba(0,255,100,0.12);
    border-top: 1px solid rgba(0,255,100,0.32);
    border-left: 2px solid rgba(0,255,100,0.22);
    background: #000;
    box-shadow: 0 0 15px rgba(0,255,120,0.08);
    transition: 
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

aside:first-of-type {
    z-index: 5;
}

aside.right-panel {
    width: 240px;
    z-index: 5;
}

.cmd-title,
.monitor-title {
    background:
        repeating-linear-gradient(
            0deg, transparent, transparent 2px,
            rgba(0,255,80,0.03) 2px, rgba(0,255,80,0.03) 3px
        ),
        linear-gradient(180deg, #0d1410 0%, #060a07 100%);
    border-bottom: 1px solid rgba(0,255,100,0.22);
    padding: 8px 15px;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.85;
    text-transform: uppercase;
    cursor: grab;
    user-select: none;
    margin: 0;
    
    display: flex;
    align-items: center;
    gap: 10px;
}

.cmd-title::before,
.monitor-title::before {
    content: "";
    width: 18px;
    height: 12px;
    background: 
        linear-gradient(to bottom, 
            transparent 0px,
            transparent 2px,
            rgba(0,255,120,0.4) 2px,
            rgba(0,255,120,0.4) 3px,
            transparent 3px,
            transparent 6px,
            rgba(0,255,120,0.4) 6px,
            rgba(0,255,120,0.4) 7px,
            transparent 7px,
            transparent 10px,
            rgba(0,255,120,0.4) 10px,
            rgba(0,255,120,0.4) 11px,
            transparent 11px
        );
    flex-shrink: 0;
}

.cmd-title:active,
.monitor-title:active {
    cursor: grabbing;
}

.log-module,
.monitor-window {
    padding: 15px;
    border: none;
    background: transparent;
}

.cmd-window,
.monitor-data {
    margin-top: 0;
}

main {
    flex: 1;
    min-width: 600px;
}

/* Boot screen animations */

@keyframes bootPulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1;   }
}

@keyframes bdBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ================= BOOT SCREEN ================= */

@keyframes coplandShimmer {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 0.7;  }
}
@keyframes crtBootFlicker {
    0%{opacity:1}3%{opacity:0.88}6%{opacity:1}47%{opacity:1}50%{opacity:0.93}53%{opacity:1}72%{opacity:1}73%{opacity:0.82}74%{opacity:1}100%{opacity:1}
}
@keyframes crtScanRoll {
    0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}
}
@keyframes crtTear {
    0%,89%,100%{clip-path:none;transform:none}
    90%{clip-path:inset(18% 0 74% 0);transform:translateX(-4px)}
    91%{clip-path:inset(18% 0 74% 0);transform:translateX(3px)}
    92%{clip-path:none;transform:none}
    95%{clip-path:inset(55% 0 30% 0);transform:translateX(2px)}
    96%{clip-path:none;transform:none}
}
#bootScreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Courier New", monospace;
    color: #00ff66;
    overflow: hidden;
    background: url('/desktopBG.png') center center / cover no-repeat #b8b4ac;
}
#bootScreen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background: repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,0.38) 2px,rgba(0,0,0,0.38) 3px);
    mix-blend-mode: multiply;
}
#bootScreen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 201;
    background: radial-gradient(ellipse 80% 70% at 50% 50%,rgba(220,218,210,0.06) 0%,rgba(180,176,165,0.12) 55%,rgba(60,55,45,0.70) 88%,rgba(0,0,0,0.92) 100%);
    box-shadow: inset 0 0 120px rgba(0,0,0,0.55);
}
#bootScreen .crt-roll-band {
    position:absolute;left:0;right:0;height:80px;pointer-events:none;z-index:202;
    background:linear-gradient(to bottom,transparent 0%,rgba(255,255,240,0.09) 50%,transparent 100%);
    animation:crtScanRoll 6s linear infinite;
    will-change:transform;
}
#bootScreen .crt-tear {
    position:absolute;inset:0;pointer-events:none;z-index:203;
    animation:crtTear 11s step-end infinite;
    will-change:transform;
}
#bootScreen .crt-rgb-dots {
    position:absolute;inset:0;pointer-events:none;z-index:199;
    background-image:
        repeating-linear-gradient(90deg,rgba(255,80,80,0.022) 0px,rgba(255,80,80,0.022) 1px,transparent 1px,transparent 3px),
        repeating-linear-gradient(90deg,transparent 1px,rgba(80,255,80,0.022) 1px,rgba(80,255,80,0.022) 2px,transparent 2px,transparent 3px),
        repeating-linear-gradient(90deg,transparent 2px,rgba(80,80,255,0.022) 2px,rgba(80,80,255,0.022) 3px,transparent 3px);
    background-size:3px 3px;mix-blend-mode:screen;
}
#bootScreen .crt-flicker {
    position:absolute;inset:0;pointer-events:none;z-index:204;
    animation:crtBootFlicker 8s step-end infinite;mix-blend-mode:overlay;
}

/* Copland platinum menubar — matches Mac OS 8 reference */
#bootDesktopBar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 25px;
    background: linear-gradient(to bottom, #f4f0e8 0%, #dedad2 50%, #cac6be 100%);
    border-bottom: 1px solid #8a8880;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 18px;
    z-index: 210;
    font-family: "Chicago", "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    user-select: none;
    pointer-events: auto;
}

#bootDesktopBar .rainbow-apple {
    display: inline-flex;
    align-items: center;
    width: 18px; height: 20px;
    margin-right: 5px; flex-shrink: 0;
}

/* ── Boot desktop dropdown menus ── */
.boot-menu-wrap {
    position: relative;
    display: inline-block;
}
.boot-menu-wrap:hover .boot-dropdown {
    display: block;
}
.boot-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: linear-gradient(to bottom, #f4f0e8 0%, #e8e4dc 100%);
    border: 1px solid #888880;
    border-top: none;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
    z-index: 10000;
    pointer-events: auto;
    padding: 2px 0;
    font-family: "Chicago", "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    color: #000;
}
.boot-dropdown-item {
    padding: 3px 18px 3px 22px;
    white-space: nowrap;
    cursor: default;
    position: relative;
    user-select: none;
}
.boot-dropdown-item:hover {
    background: #0a0a8a;
    color: #fff;
}
.boot-dropdown-item.has-sub::after {
    content: "▶";
    position: absolute;
    right: 8px;
    font-size: 9px;
    opacity: 0.7;
}
.boot-dropdown-sep {
    height: 1px;
    background: #aaa8a0;
    margin: 3px 4px;
}
.boot-dropdown-item.disabled {
    color: #aaa;
    pointer-events: none;
}
.boot-dropdown-item.checked::before {
    content: "✓";
    position: absolute;
    left: 6px;
    font-size: 11px;
}
#bootDesktopBar .bar-item { font-weight: bold; color: #000; font-size: 15px; }
#bootDesktopBar .bar-right { margin-left:auto; display:flex; gap:15px; font-size:14px; color:#333; font-weight:normal; }

/* Desktop icons (faint, behind blur) */
#bootDesktopIcons {
    position: absolute;
    top: 40px; right: 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    z-index: 206;
    pointer-events: none;
    opacity: 0.5;
    filter: none;
}

.boot-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 60px;
}

.boot-icon-img {
    width: 32px; height: 32px;
    border: 1px solid rgba(100,160,220,0.4);
    background: linear-gradient(135deg, rgba(20,60,100,0.8), rgba(10,30,60,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(150,200,255,0.7);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.boot-icon-label {
    font-family: "Chicago", "Geneva", Arial, sans-serif;
    font-size: 10px;
    color: rgba(180,220,255,0.7);
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    white-space: nowrap;
}

/* Blur + fisheye layer behind dialogs */
#bootDesktopBlur {
    position: absolute;
    inset: 0;
    z-index: 207;
    backdrop-filter: blur(1px) brightness(0.88);
    -webkit-backdrop-filter: blur(1px) brightness(0.88);
    /* Fisheye: blur stronger at edges */
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%,
        transparent 0%, transparent 35%,
        rgba(0,0,0,0.6) 60%, rgba(0,0,0,1) 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%,
        transparent 0%, transparent 35%,
        rgba(0,0,0,0.6) 60%, rgba(0,0,0,1) 100%);
    pointer-events: none;
}

#preBootOverlay { position: relative; z-index: 208; }

.boot-content {
    text-align: left;
    max-width: 95%;
    position: relative;
    z-index: 215;
}

#bootText {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 0 0 5px rgba(0,255,120,0.5);
}

.boot-art {
    font-size: 9px;
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0 8px rgba(0,255,120,0.6);
    transition: opacity 0.5s;
}

/* Retro OS Boot Dialog — Copland Platinum */
#bootDialog {
    position: relative;
    z-index: 209;
    width: min(600px, 92vw);
    border: 2px solid;
    border-color: #d4d0c8 #888880 #888880 #d4d0c8;
    box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #9a9590 inset,
        0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
    background: #c8c4bc;
    overflow: visible;
}
.bd-scanlines {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(to bottom,
        transparent 0px, transparent 2px, rgba(0,0,0,0.018) 2px, rgba(0,0,0,0.018) 3px);
}
.bd-titlebar {
    display: flex; align-items: center; gap: 0;
    background: #c8c4bc;
    background-image: repeating-linear-gradient(to bottom,transparent 0px,transparent 1px,rgba(255,255,255,0.55) 1px,rgba(255,255,255,0.55) 2px,transparent 2px,transparent 3px,rgba(0,0,0,0.10) 3px,rgba(0,0,0,0.10) 4px);
    border-bottom: 1px solid #888880;
    border-top: 1px solid #ffffff;
    padding: 3px 4px; position: relative; z-index: 1; overflow: hidden;
    min-height: 20px;
}
.bd-titlebar::before { display: none; }
.bd-titlebar-icons { display: flex; gap: 0; flex-shrink: 0; margin: 0 6px 0 2px; }
.bd-dot {
    display: inline-block; width: 13px; height: 13px; border-radius: 0;
    background: linear-gradient(135deg, #e8e4dc 0%, #d0ccc4 50%, #b8b4ac 100%);
    border: 1px solid; border-color: #ffffff #888880 #888880 #ffffff;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(0,0,0,0.2);
}
.bd-dot-r { display: inline-block; }
.bd-dot-y { display: none; }
.bd-dot-g { display: none; }
.bd-titlebar-text {
    font-family: "Chicago", "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px; font-weight: bold; letter-spacing: 0.3px;
    color: #000000; text-shadow: none;
    flex: 1; text-align: center;
}
.bd-body {
    padding: 16px 16px 14px; position: relative; z-index: 1; background: #c8c4bc;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.9), inset -2px -2px 0 rgba(0,0,0,0.12);
}
.bd-icon-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.bd-icon-glyph {
    font-size: 34px; color: #000000; line-height: 1; flex-shrink: 0;
    filter: none;
    animation: bootPulse 2.2s ease-in-out infinite;
}
.bd-text-col { flex: 1; }
.bd-msg-title {
    font-family: "Chicago", "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px; letter-spacing: 0.3px; color: #000000;
    font-weight: bold; text-shadow: none; margin-bottom: 7px;
}
.bd-msg-body {
    font-family: "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px; line-height: 1.7; color: #000000; letter-spacing: 0.2px;
}
.bd-green { color: #007700; font-weight: bold; }
.bd-divider {
    border: none;
    border-top: 1px solid #a8a4a0;
    border-bottom: 1px solid #e8e4e0;
    margin: 10px 0 12px 0;
}
.bd-footer {
    font-family: "Chicago", "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px; letter-spacing: 0.5px; color: #000000;
    text-align: center; text-shadow: none;
}
.bd-blink { animation: bdBlink 1s step-end infinite; margin-left: 2px; }

@keyframes dialogOpen {
    0%   { opacity: 0; transform: scale(0.88) translateY(10px); }
    65%  { opacity: 1; transform: scale(1.015) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dialogClose {
    0%   { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.9) translateY(-8px); }
}
.bd-dialog-open  { animation: dialogOpen  0.34s cubic-bezier(0.34,1.4,0.64,1) forwards; }
.bd-dialog-close { animation: dialogClose 0.22s ease-in forwards; pointer-events: none; }
#bootDialogArt {
    font-size: 7px;
    line-height: 1.08;
    color: #00ff88;
    text-shadow: 0 0 4px rgba(0,255,120,0.5);
    white-space: pre;
    margin: 10px 12px 0 12px;
    pointer-events: none;
    letter-spacing: 0;
    display: block;
    padding: 10px 10px 8px 10px;
    overflow: hidden;
    text-align: center;
    background: #090e09;
    border: 1px solid;
    border-color: #888880 #d4d0c8 #d4d0c8 #888880;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.55);
}

/* Post-click loading dialog — Copland Platinum */
#bootLoadDialog {
    position: relative;
    z-index: 209;
    width: min(660px, 94vw);
    max-width: 94vw;
    border: 2px solid;
    border-color: #d4d0c8 #888880 #888880 #d4d0c8;
    box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #9a9590 inset,
        0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
    background: #c8c4bc;
    overflow: hidden;
}

#bootLoadBody {
    padding: 14px 14px 14px;
    position: relative;
    z-index: 1;
    background: #c8c4bc;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.9), inset -2px -2px 0 rgba(0,0,0,0.12);
}

#skipHint {
    font-family: "Geneva", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px; letter-spacing: 0.5px; color: #4a4a5a;
    text-align: center; margin-bottom: 10px; opacity: 0.5;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    display: block;
    animation: skipHintPulse 2s ease-in-out infinite;
    transform-origin: center;
}
@keyframes skipHintPulse {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%       { transform: scale(1.07); opacity: 0.7; }
}

.bd-bestviewed {
    font-weight: bold;
    text-decoration: underline;
    animation: bdBestViewedGlow 2s ease-in-out infinite;
}
@keyframes bdBestViewedGlow {
    0%, 100% { color: #cc6600; text-shadow: 0 0 3px rgba(255,140,0,0.4); }
    50%       { color: #ff9900; text-shadow: 0 0 8px rgba(255,153,0,0.9), 0 0 16px rgba(255,140,0,0.5); }
}

#bootLoadBody #bootText {
    font-family: "Courier New", monospace;
    font-size: 11px;
    line-height: 1.65;
    color: #00ee66;
    text-shadow: 0 0 3px rgba(0,220,100,0.4);
    white-space: pre-wrap;
    margin: 0 0 6px 0;
    background: #070d07;
    padding: 8px 12px;
    border: 1px solid;
    border-color: #888880 #d4d0c8 #d4d0c8 #888880;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.55);
    display: block;
    text-align: center;
}

#bootLoadBody #bootArt {
    font-size: 8px;
    line-height: 1.08;
    color: #00ff88;
    text-shadow: 0 0 4px rgba(0,255,120,0.4);
    text-align: center;
    display: block;
    margin: 0 auto;
    white-space: pre;
    background: #070d07;
    padding: 10px;
    border: 1px solid;
    border-color: #888880 #d4d0c8 #d4d0c8 #888880;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.55);
}

#bootScreen.fade-out { animation: fadeOut 1s forwards; }
@keyframes fadeOut { to { opacity: 0; } }

/* ================= TOP BAR ================= */

#topBar {
    text-align: center;
    padding: 15px 0 28px 0;
    border-bottom: none;
    background-image: linear-gradient(90deg, transparent 0%, rgba(0,255,100,0.35) 25%, rgba(0,255,100,0.35) 75%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom;
    margin-bottom: 20px;
    overflow: visible;
    position: relative;
}

#topBar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,255,100,0.95) 50%, transparent 100%);
    transform-origin: center;
    animation: sonarPing 5s ease-out infinite;
    pointer-events: none;
}

@keyframes sonarPing {
    0%   { transform: scaleX(0.04); opacity: 1; }
    55%  { transform: scaleX(1);    opacity: 0.5; }
    75%  { transform: scaleX(1);    opacity: 0; }
    100% { transform: scaleX(1);    opacity: 0; }
}

#powerPoleCanvas {
    display: none;
}

/* Zero-height, no z-index of its own — margin-top cancels topBar's
   margin-bottom so this sits right on topBar's bottom edge without
   inheriting topBar's elevated stacking context. */
#topBarDivider {
    position: relative;
    height: 0;
    margin-top: -20px;
    overflow: visible;
}

/* Ivy vines laying on the topBar's bottom divider line — one each side,
   gap in the center. Mirrored via JS so both point inward toward the gap.
   z-index kept below every window (main stack: 1-4, sidebars: 6) so they
   stay layered under everything by default. */
.ivy-vine-canvas {
    position: absolute;
    bottom: -66px;
    width: 630px;
    height: 138px;
    pointer-events: none;
    z-index: 0;
}
.ivy-vine-left  { left: calc(4% - 225px); }
.ivy-vine-right { right: calc(4% - 225px); }

.top-pre {
    font-size: 22px;
    letter-spacing: 2px;
    opacity: 0.9;
    margin-bottom: 8px;
    /* CRT phosphor glow */
    text-shadow:
        0 0 4px rgba(0,255,120,0.9),
        0 0 10px rgba(0,255,120,0.6),
        0 0 20px rgba(0,255,120,0.3),
        0 0 40px rgba(0,255,120,0.12);
    /* Subtle scanline shimmer via filter */
    filter: brightness(1) contrast(1.05);
    /* CRT horizontal bleed */
    position: relative;
}

/* Each letter in .top-pre gets a quarter-circle orbit shimmy via nth-child on .top-pre-letter spans */
.top-pre-letter {
    display: inline-block;
    animation: cyrLetterOrbit var(--dur, 3.2s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

@keyframes cyrLetterOrbit {
    0%   { transform: translateX(0px)   translateY(0px); }
    25%  { transform: translateX(var(--ox, 2px)) translateY(var(--oy, -2px)); }
    50%  { transform: translateX(0px)   translateY(0px); }
    75%  { transform: translateX(calc(var(--ox, 2px) * -1)) translateY(var(--oy, -2px)); }
    100% { transform: translateX(0px)   translateY(0px); }
}

/* CRT scanline shimmer overlay on top-pre */
.top-pre::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0px,
        rgba(0,0,0,0.08) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    animation: crtShimmerPre 6s linear infinite;
}

@keyframes crtShimmerPre {
    0%   { opacity: 0.7; }
    45%  { opacity: 0.9; }
    50%  { opacity: 0.4; }
    55%  { opacity: 0.9; }
    100% { opacity: 0.7; }
}

.top-main {
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: #00ff88;
    margin: 8px 0;
    text-shadow:
        0 0 8px rgba(0,255,136,0.8),
        0 0 16px rgba(0,255,136,0.5),
        0 0 24px rgba(0,255,136,0.3);
    /* CRT chromatic horizontal ghost */
    filter: drop-shadow(1px 0 0 rgba(0,255,80,0.18)) drop-shadow(-1px 0 0 rgba(0,200,255,0.10));
    position: relative;
    animation: heartbeat 2s ease-in-out infinite;
}

/* CRT pixel-tear on top-main */
.top-main::before {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 0;
    color: #00ff88;
    letter-spacing: 2px;
    clip-path: inset(0 0 60% 0);
    transform: translateX(-1.5px);
    opacity: 0.15;
    pointer-events: none;
    animation: topMainTear 4.5s steps(1) infinite;
}

@keyframes topMainTear {
    0%,88%,100% { opacity:0; transform:translateX(0); }
    89%  { opacity:0.22; transform:translateX(-2px); clip-path:inset(20% 0 55% 0); }
    90%  { opacity:0.10; transform:translateX(2px);  clip-path:inset(10% 0 70% 0); }
    91%  { opacity:0; }
}

/* Arrow animations — left arrow: retract then snap right; right arrow: telegraph then lunge */
.arrow-left {
    display: inline-block;
    animation: arrowLeft 3.2s ease-in-out infinite;
}
.arrow-right {
    display: inline-block;
    animation: arrowRight 3.2s ease-in-out infinite;
    animation-delay: 0.22s;
}

@keyframes arrowLeft {
    0%,100% { transform: translateX(0)    scaleX(1);    opacity: 1;   text-shadow: none; }
    8%      { transform: translateX(5px)  scaleX(0.6);  opacity: 0.4; text-shadow: none; }
    16%     { transform: translateX(-8px) scaleX(1.5);  opacity: 1;   text-shadow: 0 0 8px rgba(0,255,136,0.9), 0 0 18px rgba(0,255,136,0.5); }
    22%     { transform: translateX(0)    scaleX(1);    opacity: 1;   text-shadow: 0 0 4px rgba(0,255,136,0.4); }
    50%     { transform: translateX(0)    scaleX(1);    opacity: 0.7; text-shadow: none; }
    58%     { transform: translateX(3px)  scaleX(0.8);  opacity: 0.5; text-shadow: none; }
    66%     { transform: translateX(-5px) scaleX(1.2);  opacity: 1;   text-shadow: 0 0 6px rgba(0,255,136,0.6); }
    72%     { transform: translateX(0)    scaleX(1);    opacity: 1;   text-shadow: none; }
}

@keyframes arrowRight {
    0%,100% { transform: translateX(0)    scaleX(1);    opacity: 1;   text-shadow: none; }
    8%      { transform: translateX(-5px) scaleX(0.6);  opacity: 0.4; text-shadow: none; }
    16%     { transform: translateX(8px)  scaleX(1.5);  opacity: 1;   text-shadow: 0 0 8px rgba(0,255,136,0.9), 0 0 18px rgba(0,255,136,0.5); }
    22%     { transform: translateX(0)    scaleX(1);    opacity: 1;   text-shadow: 0 0 4px rgba(0,255,136,0.4); }
    50%     { transform: translateX(0)    scaleX(1);    opacity: 0.7; text-shadow: none; }
    58%     { transform: translateX(-3px) scaleX(0.8);  opacity: 0.5; text-shadow: none; }
    66%     { transform: translateX(5px)  scaleX(1.2);  opacity: 1;   text-shadow: 0 0 6px rgba(0,255,136,0.6); }
    72%     { transform: translateX(0)    scaleX(1);    opacity: 1;   text-shadow: none; }
}

@keyframes heartbeat {
    0%, 100% {
        text-shadow:
            0 0 8px rgba(0,255,136,0.8),
            0 0 16px rgba(0,255,136,0.5),
            0 0 24px rgba(0,255,136,0.3);
    }
    10% {
        text-shadow:
            0 0 12px rgba(0,255,136,1),
            0 0 24px rgba(0,255,136,0.8),
            0 0 36px rgba(0,255,136,0.5);
    }
    20% {
        text-shadow:
            0 0 8px rgba(0,255,136,0.8),
            0 0 16px rgba(0,255,136,0.5),
            0 0 24px rgba(0,255,136,0.3);
    }
    30% {
        text-shadow:
            0 0 14px rgba(0,255,136,1),
            0 0 28px rgba(0,255,136,0.9),
            0 0 42px rgba(0,255,136,0.6);
    }
    40%, 90% {
        text-shadow:
            0 0 8px rgba(0,255,136,0.8),
            0 0 16px rgba(0,255,136,0.5),
            0 0 24px rgba(0,255,136,0.3);
    }
}

.top-sub {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: visible;
}

/* Rainbow text animation */
.rainbow-text {
    background: linear-gradient(90deg, 
        #ff0000, #ff7f00, #ffff00, #00ff00, 
        #0000ff, #4b0082, #9400d3);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowShift 3s linear infinite;
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Header personal-buttons carousel — rotates through the "pers0nal butt0ns"
   from about.txt's [BUTTONS] tab, glitch-transitioning every 15s.
   This outer element is intentionally NOT the one that scales — it stays
   static so its own padding + overflow:hidden can absorb the inner pulse's
   scale-driven visual bleed. Without that, the bleed paints past this
   element (its ancestors are all overflow:visible) and, right at the top
   of the page, is occasionally just enough to flip the document's
   auto vertical scrollbar on/off in sync with the 2.6s pulse. The negative
   margin cancels the padding out of the flow, so surrounding elements
   don't shift — this is a containment fix only, nothing here is visible. */
.header-btn-carousel {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    padding: 3px 6px;
    margin: -3px -6px;
}
.header-btn-pulse-wrap {
    display: inline-flex;
    transform-origin: center;
    animation: headerBtnPulse 2.6s ease-in-out infinite;
}
@keyframes headerBtnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.header-btn-img {
    display: block;
    height: 36px;
    width: auto;
    image-rendering: pixelated;
}
.header-btn-img.header-btn-glitch {
    animation: headerBtnGlitch 0.32s steps(2, end);
}
@keyframes headerBtnGlitch {
    0%   { filter: none; transform: translate(0,0); clip-path: inset(0 0 0 0); }
    20%  { filter: brightness(1.5) hue-rotate(45deg) saturate(2.2) contrast(1.3); transform: translate(-2px,0); clip-path: inset(15% 0 45% 0); }
    40%  { filter: brightness(0.6) hue-rotate(-35deg) saturate(1.6); transform: translate(2px,1px); clip-path: inset(55% 0 5% 0); }
    60%  { filter: brightness(1.15) hue-rotate(20deg) contrast(1.2); transform: translate(-1px,-1px); clip-path: inset(0 0 30% 0); }
    80%  { filter: brightness(0.9); transform: translate(1px,0); clip-path: inset(0 0 0 0); }
    100% { filter: none; transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

/* Uplink status with glow */
.uplink-status {
    text-shadow: 0 0 8px rgba(0,255,120,0.6);
    font-weight: bold;
}

/* Reset button */
.reset-btn {
    background: rgba(0,255,120,0.1);
    border: 1px solid #00ff77;
    color: #00ff99;
    padding: 3px 10px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.reset-btn:hover {
    background: rgba(0,255,120,0.2);
    box-shadow: 0 0 10px rgba(0,255,120,0.4);
    text-shadow: 0 0 5px rgba(0,255,120,0.8);
}

.reset-btn:active {
    transform: scale(0.95);
}

.divider {
    margin: 0 10px;
    opacity: 0.3;
}

.signal-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #00ff99;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    box-shadow: 0 0 5px #00ff99;
    animation: dotPulseGreen 1.4s ease-in-out infinite;
}
.signal-dot.offline {
    background: #ff3333;
    box-shadow: 0 0 5px #ff3333;
    animation: dotPulseRed 1.4s ease-in-out infinite;
}
@keyframes dotPulseGreen {
    0%,100% { opacity:1; box-shadow:0 0 4px #00ff99; transform:scale(1); }
    50%      { opacity:0.5; box-shadow:0 0 12px #00ff99,0 0 20px rgba(0,255,153,0.4); transform:scale(1.35); }
}
@keyframes dotPulseRed {
    0%,100% { opacity:1; box-shadow:0 0 4px #ff3333; transform:scale(1); }
    50%      { opacity:0.5; box-shadow:0 0 12px #ff3333,0 0 20px rgba(255,50,50,0.4); transform:scale(1.35); }
}

/* Dancing Lain GIF */
.lain-gif {
    width: 45px;
    height: auto;
    margin-right: 10px;
    pointer-events: none;
    opacity: 0.8;
    
    /* Green terminal filter */
    filter: 
        grayscale(100%) 
        brightness(0.8) 
        sepia(100%) 
        hue-rotate(50deg) 
        saturate(300%)
        contrast(1.2);
    
    image-rendering: pixelated;
    mix-blend-mode: screen;
    vertical-align: middle;
}

.lain-gif.glitch {
    animation: lainGlitch 0.3s ease;
}

@keyframes lainGlitch {
    0%, 100% { 
        filter: 
            grayscale(100%) 
            brightness(0.8) 
            sepia(100%) 
            hue-rotate(50deg) 
            saturate(300%)
            contrast(1.2);
        transform: translate(0, 0);
    }
    20% { 
        filter: 
            grayscale(100%) 
            brightness(1.2) 
            sepia(100%) 
            hue-rotate(80deg) 
            saturate(400%)
            contrast(1.5);
        transform: translate(-2px, 0);
    }
    40% { 
        filter: 
            grayscale(100%) 
            brightness(0.6) 
            sepia(100%) 
            hue-rotate(30deg) 
            saturate(200%)
            contrast(0.9);
        transform: translate(2px, 1px);
    }
    60% { 
        filter: 
            grayscale(100%) 
            brightness(1.0) 
            sepia(100%) 
            hue-rotate(60deg) 
            saturate(350%)
            contrast(1.3);
        transform: translate(-1px, -1px);
    }
}

/* Kuromi — absolutely positioned inside .top-sub so she has zero effect
   on bar height or page scroll. Tune 'right' and 'bottom' to place her. */
.kuromi-header {
    width: 135px;
    height: auto;
    pointer-events: none;
    opacity: 0.80;
    image-rendering: pixelated;
    position: absolute;
    /* was bottom:0 relative to .top-sub (its old parent); now anchored to
       #topBarDivider, which sits 28px lower (topBar's own bottom padding) —
       adding that back so it lands in the same visual spot as before. */
    bottom: 28px;
    right: 160px;
    /* below the ivy-vine-canvas z-index:0, so the vines layer in front */
    z-index: -1;
}

.sovie-logo-header {
    width: 203px;
    height: auto;
    pointer-events: none;
    opacity: 0.80;
    position: absolute;
    bottom: 33px; /* was 5px relative to .top-sub — see .kuromi-header note */
    left: 150px;
    z-index: -1;
    transform-style: preserve-3d;
}

/* ================= SYSTEM LOG ================= */

.cmd-title {
    font-size: 12px;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 8px;
}

.cmd-window {
    background: #000;
    border: 1px solid #003322;
    height: 200px;
    padding: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

.cmd-window::-webkit-scrollbar { width: 6px; }
.cmd-window::-webkit-scrollbar-track { background: #001a0a; }
.cmd-window::-webkit-scrollbar-thumb { background: #00ff66; border-radius: 0; }
.cmd-window::-webkit-scrollbar-thumb:hover { background: #00ffaa; }

#systemLog {
    font-size: 11px;
    line-height: 1.6;
    color: #00ff99;
    opacity: 0.8;
}

.log-line {
    opacity: 0;
    animation: fadeInLog 1s ease forwards;
}

@keyframes fadeInLog {
    from { opacity: 0; }
    to { opacity: 0.8; }
}

/* ================= OVERLAPPING WINDOWS ================= */

.window-stack {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.stacked-window {
    position: absolute;
    background: #000;
    border: 1px solid rgba(0,255,100,0.12);
    border-top: 1px solid rgba(0,255,100,0.32);
    border-left: 2px solid rgba(0,255,100,0.22);
    box-shadow: 0 0 15px rgba(0,255,120,0.08);
    
    width: 550px;
    min-height: 320px;
    
    transition: 
        box-shadow 0.3s ease,
        top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    cursor: pointer;
}

/* Starting positions (stacked together in CENTER) */
.stacked-window[data-window="1"] {
    top: 0px;
    left: 50%;
    margin-left: -330px;
    z-index: 4;
    width: 660px;
    min-height: 384px;
    animation: mainNodeGlow 3s ease-in-out infinite;
}

@keyframes mainNodeGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(0,255,100,0.08), 0 0 16px rgba(0,255,100,0.03); }
    50%       { box-shadow: 0 0 14px rgba(0,255,100,0.22), 0 0 28px rgba(0,255,100,0.09); }
}
.stacked-window[data-window="2"] { 
    top: 0px; 
    left: 50%;
    margin-left: -275px;
    z-index: 3; 
}
.stacked-window[data-window="3"] { 
    top: 0px; 
    left: 50%;
    margin-left: -275px;
    z-index: 2; 
}
.stacked-window[data-window="4"] { 
    top: 0px; 
    left: 50%;
    margin-left: -275px;
    z-index: 1; 
}

/* Final positions (after animation) */
.stacked-window.separated[data-window="1"] { 
    top: 80px;
    left: 50%;
    margin-left: -380px;
}
.stacked-window.separated[data-window="2"] { 
    top: 210px;
    left: 50%;
    margin-left: -200px;
}
.stacked-window.separated[data-window="3"] { 
    top: 340px;
    left: 50%;
    margin-left: -180px; /* Shifted left from -50px */
}
.stacked-window.separated[data-window="4"] { 
    top: 470px;
    left: 50%;
    margin-left: -275px;
}

/* Active window */
.stacked-window.active {
    box-shadow: 0 0 25px rgba(0,255,120,0.15);
}

.stacked-window:hover {
    box-shadow: 0 0 20px rgba(0,255,120,0.12);
}

/* Window header */
.window-header {
    background:
        repeating-linear-gradient(
            0deg, transparent, transparent 2px,
            rgba(0,255,80,0.03) 2px, rgba(0,255,80,0.03) 3px
        ),
        linear-gradient(180deg, #0d1410 0%, #060a07 100%);
    border-bottom: 1px solid rgba(0,255,100,0.22);
    padding: 8px 15px;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.85;
    text-transform: uppercase;
    cursor: grab;
    user-select: none;

    display: flex;
    align-items: center;
    gap: 10px;
}

.window-header:active {
    cursor: grabbing;
}

.ds-credit-link {
    margin-left: auto;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: 0.5px;
    font-size: 9px;
    color: rgba(0,255,150,0.55);
    text-decoration: none;
    transition: color 0.15s ease;
}
.ds-credit-link:hover {
    color: rgba(0,255,150,0.9);
}

.window-header::before {
    content: "";
    width: 18px;
    height: 12px;
    background: 
        linear-gradient(to bottom, 
            transparent 0px,
            transparent 2px,
            rgba(0,255,120,0.4) 2px,
            rgba(0,255,120,0.4) 3px,
            transparent 3px,
            transparent 6px,
            rgba(0,255,120,0.4) 6px,
            rgba(0,255,120,0.4) 7px,
            transparent 7px,
            transparent 10px,
            rgba(0,255,120,0.4) 10px,
            rgba(0,255,120,0.4) 11px,
            transparent 11px
        );
    flex-shrink: 0;
}

.window-content {
    padding: 25px;
    min-height: 270px;
}

/* Ambient blob-tracking HUD reticle — occasionally locks onto an open window */
.blob-reticle {
    position: fixed;
    z-index: 100; /* actual value is set per-instance in JS, just above its target window */
    pointer-events: none;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.blob-reticle.blob-reticle-in {
    opacity: 1;
    transform: scale(1);
}
.blob-reticle-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #00ff66;
    filter: drop-shadow(0 0 3px rgba(0,255,102,0.8));
}
.blob-reticle-tl { top: 0;    left: 0;    border-right: none;  border-bottom: none; }
.blob-reticle-tr { top: 0;    right: 0;   border-left: none;   border-bottom: none; }
.blob-reticle-bl { bottom: 0; left: 0;    border-right: none;  border-top: none; }
.blob-reticle-br { bottom: 0; right: 0;   border-left: none;   border-top: none; }
.blob-reticle-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    white-space: nowrap;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #00ff66;
    -webkit-text-stroke: 2px rgba(0,0,0,0.85);
    paint-order: stroke fill;
    text-shadow:
        1px 0 1px #000, -1px 0 1px #000, 0 1px 1px #000, 0 -1px 1px #000,
        0 0 4px rgba(0,255,102,0.9), 0 0 8px rgba(0,255,102,0.5);
}
.blob-reticle-label.blob-reticle-label-top {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 6px;
}

/* Thin line from a tracked window's reticle to the header divider bar */
.blob-line {
    position: fixed;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, rgba(0,255,102,0.85), rgba(0,255,102,0.15));
    transform-origin: 0 0;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 2px rgba(0,255,102,0.6));
    transition: opacity 0.25s ease;
}
.blob-line.blob-line-in {
    opacity: 0.75;
}

.stacked-window[data-window="1"] .window-content {
    padding: 30px;
    min-height: 324px;
}


.core-title {
    font-size: 29px;
    letter-spacing: 3.6px;
    margin-bottom: 24px;
    color: #00ffaa;
    opacity: 0.85;
}

.core-clock {
    margin-bottom: 24px;
}

.core-clock p:first-child {
    font-size: 14px;
    opacity: 0.6;
    margin-bottom: 6px;
}

.clock-text {
    font-size: 19px;
    letter-spacing: 2.4px;
    color: #00ff99;
}

.core-status {
    margin-top: 28px;
}

.core-status p {
    font-size: 17px;
    opacity: 0.85;
    margin-bottom: 10px;
}

.scramble-text {
    font-family: monospace;
    font-size: 11px;
    line-height: 1.8;
    color: #00ff99;
    opacity: 0.75;
    white-space: pre-wrap;
    margin: 0;
}

/* ================= MONITOR ================= */

.monitor-window {
    background: #000;
    border: 1px solid #003322;
    padding: 20px;
}

.monitor-title {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 12px;
    text-align: center;
}

.monitor-data p {
    font-size: 11px;
    opacity: 0.75;
    margin-bottom: 8px;
}

.monitor-data span {
    color: #00ffaa;
}

/* ================= SENSOR PANELS ================= */

.sensor-panel {
    margin-top: 20px;
}

.sensor-window {
    background: #000;
    border: 1px solid #003322;
    padding: 15px;
    margin-top: 8px;
}

.sensor-item {
    margin-bottom: 15px;
}

.sensor-label {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 5px;
}

.sensor-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(0,255,120,0.1);
    border: 1px solid #003322;
    position: relative;
    overflow: hidden;
}

.sensor-bar {
    height: 100%;
    background: linear-gradient(90deg, #00dd77, #00ff88);
    width: 0%;
    transition: width 0.8s linear;
    box-shadow: 0 0 8px rgba(0,255,120,0.4);
    position: relative;
    overflow: hidden;
}

.sensor-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0px,
        rgba(0,0,0,0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
}

.sensor-bar.glitch-bar {
    animation: barGlitch 2s infinite;
}

@keyframes barGlitch {
    0%, 90% { filter: hue-rotate(0deg); }
    92% { filter: hue-rotate(180deg); }
    94% { filter: hue-rotate(0deg); }
    96% { filter: hue-rotate(90deg); }
    100% { filter: hue-rotate(0deg); }
}

.sensor-value {
    font-size: 11px;
    margin-top: 5px;
    color: #00ffaa;
    font-weight: bold;
}

/* ================= WIRED STATUS GRID ================= */

.wired-status {
    padding: 15px;
    text-align: center;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.status-cell {
    font-size: 24px;
    color: #00ffaa;
    text-shadow: 0 0 10px rgba(0,255,120,0.5);
    animation: cellPulse 3s infinite;
}

.status-cell:nth-child(1) { animation-delay: 0s; }
.status-cell:nth-child(2) { animation-delay: 0.5s; }
.status-cell:nth-child(3) { animation-delay: 1s; }
.status-cell:nth-child(4) { animation-delay: 1.5s; }
.status-cell:nth-child(5) { animation-delay: 2s; }
.status-cell:nth-child(6) { animation-delay: 2.5s; }

@keyframes cellPulse {
    0%, 90% { opacity: 0.4; }
    95% { opacity: 1; }
    100% { opacity: 0.4; }
}

.status-text {
    font-size: 12px;
    letter-spacing: 3px;
    color: #00ffaa;
}

/* ================= CYRILLIC GLITCH EFFECT ================= */

.glitch-text {
    animation: textGlitch 3s infinite;
}

@keyframes textGlitch {
    0%, 92%, 100% { 
        filter: none;
        transform: translate(0);
    }
    93% { 
        filter: hue-rotate(90deg);
        transform: translate(-1px, 0);
    }
    95% {
        filter: hue-rotate(180deg);
        transform: translate(1px, 0);
    }
    97% {
        filter: hue-rotate(270deg);
        transform: translate(0, -1px);
    }
}

/* ================= SIDEBAR WINDOWS ================= */

.sidebar-window-left {
    width: 300px !important;
    min-height: 560px !important;
    height: auto !important;
    position: absolute;
    top: 20px;
    left: -120px;
    z-index: 6;
    margin: 0 !important;
}

.sidebar-window-left .window-content {
    padding: 15px;
}

.sidebar-window-left-2 {
    width: 300px !important;
    min-height: 220px !important;
    height: auto !important;
    position: absolute;
    top: 770px;
    left: -120px;
    z-index: 6;
    margin: 0 !important;
}

/* data.stream: pin to a fixed box so slideshow media (varying aspect ratios,
   incl. video) letterboxes via object-fit instead of stretching the window to fit. */
.sidebar-window-left-2[data-window="left2"] {
    height: 300px !important;
    max-height: 300px !important;
}
.sidebar-window-left-2[data-window="left2"] .window-content {
    height: 268px !important;
    max-height: 268px !important;
    min-height: 0 !important;
}

.sidebar-window-right {
    width: 280px !important;
    min-height: 200px !important;
    height: auto !important;
    position: absolute;
    top: 20px;
    right: -120px;
    left: auto;
    z-index: 6;
    margin: 0 !important;
    border: 1px solid rgba(0,255,100,0.12) !important;
    border-top: 1px solid rgba(0,255,100,0.32) !important;
    border-right: 2px solid rgba(0,255,100,0.22) !important;
}

.sidebar-window-right .window-content {
    padding: 15px;
}

.monitor-data-small {
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,255,120,0.2);
}

.monitor-data-small p {
    font-size: 11px;
    opacity: 0.9;
    margin-bottom: 10px;
    font-weight: bold;
}

.monitor-data-small span {
    color: #00ffaa;
    text-shadow: 0 0 5px rgba(0,255,170,0.6);
    font-size: 12px;
}

.wired-status-small {
    margin-top: 15px;
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0,255,120,0.2);
}

.sidebar-window-right-2 {
    width: 280px !important;
    min-height: 0 !important;
    height: auto !important;
    position: absolute;
    top: 480px;
    right: -120px;
    left: auto;
    z-index: 6;
    margin: 0 !important;
    border: 1px solid rgba(0,255,100,0.12) !important;
    border-top: 1px solid rgba(0,255,100,0.32) !important;
    border-right: 2px solid rgba(0,255,100,0.22) !important;
}

.cmd-window-small {
    background: rgba(0,20,10,0.3);
    border: 1px solid #003322;
    height: 120px;
    padding: 8px;
    overflow-y: hidden;
    overflow-x: hidden;
    font-size: 10px;
    margin-bottom: 15px;
}

.sensor-panel-small {
    margin-top: 10px;
    position: relative;
}

.sensor-label-header {
    font-size: 10px;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.monitor-data-small {
    margin-bottom: 20px;
}

.monitor-data-small p {
    font-size: 10px;
    opacity: 0.75;
    margin-bottom: 6px;
}

.wired-status-small {
    margin-top: 15px;
    text-align: center;
}

.wired-status-small .status-grid {
    margin: 10px 0;
}

.data-stream {
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    color: #00ff99;
    opacity: 0.85;
    height: 180px;
    overflow: hidden;
    white-space: pre;
    margin: 0;
}

#protocolCanvas {
    width: 100%;
    height: 180px;
    image-rendering: pixelated;
    display: block;
    margin-bottom: 8px;
}

.divider-line {
    width: 100%;
    height: 1px;
    background: rgba(0,255,120,0.2);
    margin: 8px 0;
}

.hdd-panel {
    margin-top: 8px;
}

.hdd-item {
    margin-bottom: 8px;
}

.hdd-label {
    font-size: 9px;
    opacity: 0.7;
    margin-bottom: 3px;
}

.hdd-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(0,255,120,0.1);
    border: 1px solid #003322;
    position: relative;
    overflow: hidden;
}

.hdd-bar {
    height: 100%;
    background: linear-gradient(90deg, #00dd77, #00ff88);
    width: 0%;
    transition: width 0.8s linear, background 0.3s;
    box-shadow: 0 0 8px rgba(0,255,120,0.4);
}

.hdd-bar.error {
    background: linear-gradient(90deg, #ff0000, #cc0000) !important;
    box-shadow: 0 0 12px rgba(255,0,0,0.6) !important;
    animation: errorPulse 0.5s ease-in-out;
}

@keyframes errorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.retro-monitor {
    background: #001100;
    border: 2px solid #003322;
    height: 70px;
    padding: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,255,100,0.1);
}

.scan-effect {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,255,100,0.03) 0px,
        rgba(0,255,100,0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.monitor-text {
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #00ff66;
    line-height: 1.4;
    text-shadow: 0 0 3px rgba(0,255,100,0.5);
    position: relative;
    z-index: 1;
}

/* systemLog retro override */
.cmd-window-small.retro-monitor {
    height: 120px;
    padding: 8px;
    overflow-y: hidden;
    border: 1px solid #003322;
}

/* group935Log retro override */
.g935-log-monitor {
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    padding: 8px;
    overflow: hidden;
    background: #001100;
    border: 2px solid #003322;
    box-shadow: inset 0 0 10px rgba(0,255,100,0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Arrow animations defined in .top-main block above */

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

#mainNodeCursor {
    color: #00ff99;
    font-weight: normal;
}

/* ADD THIS TO YOUR EXISTING style.css FILE - POPUP WINDOW & MENU STYLES */

/* ================= NODE MENU (DROPDOWN) ================= */

.node-menu {
    position: relative;
    margin: 20px 0;
    z-index: 10;
}

/* ── conic sweep border wrapper ── */
@property --sweep-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.menu-btn-border {
    position: relative;
    width: 100%;
    padding: 2px;
    background: transparent;
    border-radius: 1px;
    overflow: hidden;
}

.menu-btn-border::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from var(--sweep-angle),
        rgba(0,255,120,0.12) 0deg,
        rgba(0,255,120,0.12) 280deg,
        rgba(0,255,200,0.75) 320deg,
        rgba(0,255,220,0.97) 345deg,
        #fff 355deg,
        rgba(0,255,220,0.97) 358deg,
        rgba(0,255,120,0.12) 360deg
    );
    animation: conicSweep 3s linear infinite;
    border-radius: 1px;
    opacity: 1;
    transition: opacity 0.18s ease;
    pointer-events: none;
    z-index: 0;
}

.menu-btn-border.sweep-hidden::before {
    opacity: 0;
    animation-play-state: paused;
}

@keyframes conicSweep {
    to { --sweep-angle: 360deg; }
}

.node-menu-btn {
    background: rgba(0,6,3,0.88);
    border: none;
    color: #00ff99;
    padding: 12px 18px;
    font-family: "Courier New", monospace;
    font-size: 16.25px;
    letter-spacing: 2.5px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, text-shadow 0.2s;
    width: 100%;
    min-height: 57.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    position: relative;
    overflow: visible;
}

.node-menu-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0,255,120,0.03) 3px,
        rgba(0,255,120,0.03) 4px
    );
    pointer-events: none;
    z-index: 0;
}


.node-menu-btn span {
    position: relative;
    z-index: 4;
}

/* idle — slow breathing outline */
@keyframes btnGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(0,255,120,0.15),
            0 0 10px rgba(0,255,120,0.08),
            inset 0 0 4px rgba(0,255,120,0.03);
    }
    50% {
        box-shadow:
            0 0 8px rgba(0,255,120,0.3),
            0 0 18px rgba(0,255,120,0.12),
            inset 0 0 6px rgba(0,255,120,0.05);
    }
}

.node-menu-btn {
    animation: btnGlowPulse 3s ease-in-out infinite;
}

/* hover — bright solid bloom, overrides idle anim */
.node-menu-btn:hover {
    background: rgba(0,20,10,0.95);
    box-shadow:
        0 0 10px rgba(0,255,120,0.55),
        0 0 24px rgba(0,255,120,0.25),
        0 0 40px rgba(0,255,120,0.1),
        inset 0 0 10px rgba(0,255,120,0.07);
    animation: none;
}

/* active/clicked — sharp white-green flash */
.node-menu-btn:active {
    background: rgba(0,30,15,0.98);
    box-shadow:
        0 0 6px rgba(180,255,220,0.9),
        0 0 18px rgba(0,255,150,0.6),
        0 0 36px rgba(0,255,120,0.3),
        inset 0 0 12px rgba(0,255,120,0.12);
    animation: none;
}

.menu-icon {
    display: inline-block;
    font-size: 13.75px;
    flex-shrink: 0;
    width: 17.5px;
    height: 17.5px;
    line-height: 17.5px;
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#menuBtnText {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    line-height: 1;
    overflow: visible;
    transition: gap 0.08s ease;
    text-transform: uppercase;
}

/* individual floating chars inside menuBtnText */
.menu-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    will-change: transform;
}

.node-menu-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #000;
    border: 1px solid rgba(0,255,120,0.5);
    box-shadow: 0 6px 28px rgba(0,255,120,0.2), inset 0 0 30px rgba(0,255,120,0.02);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 1000;
    overflow: hidden;
}

.node-menu-dropdown.menu-open {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: all;
}

.node-menu-dropdown.menu-open .menu-item:nth-child(1) { animation: menuItemIn 0.18s ease both; animation-delay: 0.04s; }
.node-menu-dropdown.menu-open .menu-item:nth-child(2) { animation: menuItemIn 0.18s ease both; animation-delay: 0.09s; }
.node-menu-dropdown.menu-open .menu-item:nth-child(3) { animation: menuItemIn 0.18s ease both; animation-delay: 0.14s; }
.node-menu-dropdown.menu-open .menu-item:nth-child(4) { animation: menuItemIn 0.18s ease both; animation-delay: 0.19s; }

@keyframes menuItemIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.menu-item {
    padding: 11px 18px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #00cc77;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-bottom: 1px solid rgba(0,255,120,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.menu-item .menu-glow-letter {
    display: inline-block;
    animation:
        cyrLetterOrbit var(--dur, 3.2s) ease-in-out var(--delay, 0s) infinite,
        menuLetterYellowPulse 2.8s ease-in-out var(--delay, 0s) infinite;
}

@keyframes menuLetterYellowPulse {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(255,220,80,0.5),
            0 0 10px rgba(255,200,40,0.3),
            0 0 20px rgba(255,180,0,0.15);
    }
    50% {
        text-shadow:
            0 0 6px rgba(255,230,100,0.9),
            0 0 14px rgba(255,210,60,0.6),
            0 0 28px rgba(255,190,20,0.3);
    }
}

.menu-item::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0; bottom: 0;
    width: 100%;
    background: linear-gradient(to right, transparent, rgba(0,255,120,0.07), transparent);
    transition: left 0.3s ease;
    pointer-events: none;
}

.menu-item:hover::after {
    left: 100%;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background: rgba(0,255,120,0.1);
    color: #ffe87a;
}

.menu-item:hover .menu-glow-letter {
    animation:
        cyrLetterOrbit var(--dur, 3.2s) ease-in-out var(--delay, 0s) infinite,
        menuLetterYellowPulseHover 1.2s ease-in-out var(--delay, 0s) infinite;
}

@keyframes menuLetterYellowPulseHover {
    0%, 100% {
        text-shadow:
            0 0 6px rgba(255,230,80,0.9),
            0 0 14px rgba(255,210,40,0.6),
            0 0 28px rgba(255,190,0,0.3);
    }
    50% {
        text-shadow:
            0 0 10px rgba(255,240,120,1),
            0 0 22px rgba(255,220,80,0.8),
            0 0 40px rgba(255,200,20,0.4);
    }
}

.menu-arrow {
    display: none;
}

.menu-item:hover .menu-arrow {
    display: none;
}

/* ================= POPUP WINDOW ================= */

.popup-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 560px;
    max-width: 92%;
    max-height: 92vh;
    background: #000;
    border: 2px solid #00ff77;
    box-shadow: 
        0 0 30px rgba(0,255,120,0.4),
        inset 0 0 20px rgba(0,255,120,0.05);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.popup-window.popup-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.popup-header {
    background: rgba(0,255,120,0.1);
    border-bottom: 1px solid #00ff77;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
}

.popup-title {
    font-family: "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: #00ff99;
    text-transform: lowercase;
}

.popup-close {
    background: transparent;
    border: 1px solid #00ff77;
    color: #00ff99;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Courier New", monospace;
}

.popup-close:hover {
    background: rgba(255,0,0,0.2);
    border-color: #ff0000;
    color: #ff3333;
    box-shadow: 0 0 10px rgba(255,0,0,0.5);
    transform: rotate(90deg);
}

.popup-scrolltop-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1);
}

.popup-scrolltop-wrap.popup-scrolltop-visible {
    max-height: 34px;
}

.popup-scrolltop-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,255,120,0.08);
    border: none;
    border-bottom: 1px solid rgba(0,255,120,0.35);
    color: #00ff99;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 9px 0;
    cursor: pointer;
    transition: background 0.18s ease;
}

.popup-scrolltop-btn:hover {
    background: rgba(0,255,120,0.18);
}

.popup-content {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.popup-text {
    font-family: "Courier New", monospace;
    font-size: 11px;
    line-height: 1.8;
    color: #00ff99;
    opacity: 0.9;
    white-space: pre-wrap;
    margin: 0;
    text-shadow: 0 0 3px rgba(0,255,120,0.3);
}

/* Custom scrollbar for popup — matches cmd window */
.popup-content {
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

.popup-content::-webkit-scrollbar {
    width: 6px;
}

.popup-content::-webkit-scrollbar-track {
    background: #001a0a;
}

.popup-content::-webkit-scrollbar-thumb {
    background: #00ff66;
    border-radius: 0;
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background: #00ffaa;
}

/* ATHF IRC scrollable window */
#athfWindow {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

#athfWindow::-webkit-scrollbar {
    width: 4px;
}

#athfWindow::-webkit-scrollbar-track {
    background: #001a0a;
}

#athfWindow::-webkit-scrollbar-thumb {
    background: #00ff66;
    border-radius: 0;
}

#athfWindow::-webkit-scrollbar-thumb:hover {
    background: #00ffaa;
}

/* ── ATHF fake IRC input bar ── */
.athf-input-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid #1a3a1a;
}

.athf-input-prefix {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #2a5a2a;
    flex-shrink: 0;
}

.athf-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1a3a1a;
    color: #2a5a2a;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-style: italic;
    letter-spacing: 1px;
    padding: 2px 4px;
    outline: none;
    cursor: not-allowed;
}

.athf-input::placeholder {
    color: #2a4a2a;
    opacity: 0.8;
}

.athf-send-btn {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: #2a5a2a;
    background: transparent;
    border: 1px solid #1a3a1a;
    padding: 2px 7px;
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    flex-shrink: 0;
}

.athf-send-btn:hover {
    color: #3a7a3a;
    border-color: #2a5a2a;
}

.athf-send-btn.athf-send-error {
    color: #ff3333 !important;
    border-color: #ff3333 !important;
    background: rgba(255,0,0,0.08) !important;
}

/* Glitch effect for popup on appear */
@keyframes popupGlitch {
    0%, 100% { 
        filter: none;
        transform: translate(-50%, -50%) scale(1);
    }
    10% { 
        filter: hue-rotate(90deg);
        transform: translate(-51%, -50%) scale(1.02);
    }
    20% {
        filter: hue-rotate(180deg);
        transform: translate(-49%, -51%) scale(0.98);
    }
    30% {
        filter: hue-rotate(270deg);
        transform: translate(-50%, -49%) scale(1.01);
    }
}

.popup-window.popup-visible {
    animation: popupGlitch 0.3s ease;
}

/* ── Quick-nav bar ─────────────────────────────────────────── */
.popup-quicknav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px 9px;
    border-bottom: 1px solid rgba(0, 255, 100, 0.10);
    background: rgba(0, 0, 0, 0.28);
}

.popup-quicknav-btn {
    background: transparent;
    border: 1px solid rgba(0, 255, 100, 0.22);
    color: rgba(0, 255, 100, 0.55);
    font-family: 'Courier New', monospace;
    font-size: 10.9px;
    letter-spacing: 1.5px;
    padding: 4px 11px;
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.popup-quicknav-btn:hover {
    color: #00ff88;
    border-color: rgba(0, 255, 100, 0.55);
    background: rgba(0, 255, 100, 0.07);
    box-shadow: 0 0 8px rgba(0, 255, 100, 0.20);
}

.popup-quicknav-btn:active {
    background: rgba(0, 255, 100, 0.13);
    box-shadow: 0 0 12px rgba(0, 255, 100, 0.30);
}

.popup-quicknav-active {
    color: #00ff88 !important;
    border-color: rgba(0, 255, 100, 0.70) !important;
    background: rgba(0, 255, 100, 0.10) !important;
    box-shadow: 0 0 10px rgba(0, 255, 100, 0.35), inset 0 0 6px rgba(0, 255, 100, 0.08) !important;
    cursor: default;
}

/* Backdrop overlay */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(2px);
    z-index: 9999;
}

.popup-window {
    z-index: 10000;
}

/* Scanline effect on popup */
.popup-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,255,100,0.03) 0px,
        rgba(0,255,100,0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
}

/* ================= ATHF IRC WINDOW OVERRIDE ================= */

.sidebar-window-left-2[data-window="athf"] {
    top: 20px;
    left: -450px;
    min-height: 200px !important;
    width: 300px !important;
}

/* ================= WEATHER WINDOW ================= */

@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes radarBlip {
    0%, 100% { opacity: 0; }
    50%       { opacity: 1; }
}

.sidebar-window-left-2[data-window="weather"] {
    top: 440px;
    left: -450px;
    min-height: 320px;
    transition: min-height 0.4s ease;
}

#weatherDisplay {
    font-family: "Courier New", monospace;
    font-size: 12px;
    line-height: 2;
    color: #00ff99;
}

#weatherDisplay .w-city {
    font-size: 14px;
    letter-spacing: 2px;
    color: #00ffaa;
    margin-bottom: 6px;
    text-transform: uppercase;
    font-weight: bold;
}

#weatherDisplay .w-big {
    font-size: 14px;
    letter-spacing: 1px;
}

#weatherDisplay .w-city.signal-lost {
    color: #ff3333 !important;
    text-shadow: 0 0 8px rgba(255,50,50,0.8);
    animation: redFlicker 0.1s steps(1) infinite;
}

@keyframes redFlicker {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
}

#weatherDisplay .w-label {
    color: rgba(0,255,120,0.45);
    letter-spacing: 1px;
}

#weatherDisplay .w-val {
    color: #00ffcc;
    font-weight: bold;
}

/* per-field colors */
#weatherDisplay .w-cond   { color: #aaffee; letter-spacing: 1.5px; }
#weatherDisplay .w-temp   { color: #ff9944; text-shadow: 0 0 8px rgba(255,140,40,0.4); }
#weatherDisplay .w-feels  { color: #ffcc55; }
#weatherDisplay .w-range  { color: #88ddff; }
#weatherDisplay .w-arrow  { color: rgba(136,221,255,0.5); }
#weatherDisplay .w-humid  { color: #55ccff; }
#weatherDisplay .w-wind   { color: #aaffbb; letter-spacing: 1px; }
#weatherDisplay .w-uv     { color: #ffee44; text-shadow: 0 0 6px rgba(255,220,40,0.35); }
#weatherDisplay .w-precip { color: #66aaff; }
#weatherDisplay .w-vis    { color: #99eeff; opacity: 0.85; }
#weatherDisplay .w-local  { color: rgba(0,255,180,0.55); font-style: italic; }

#weatherDisplay .w-bar {
    color: #00ff66;
    letter-spacing: 0;
}

#weatherDisplay .w-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 4px;
    display: block;
}

#weatherDisplay .w-scanning {
    color: #ffaa00;
    opacity: 0.7;
    letter-spacing: 2px;
    font-size: 9px;
}

#weatherDisplay .w-sync {
    opacity: 0.3;
    font-size: 9px;
    margin-top: 6px;
    letter-spacing: 1px;
    color: #00ff99;
}

#weatherDisplay .w-divider {
    border: none;
    border-top: 1px solid rgba(0,255,120,0.15);
    margin: 6px 0;
}

/* ================= CASCADED WINDOW POSITIONS ================= */

.stacked-window.separated[data-window="1"] {
    top: 20px !important;
    left: 50%;
    margin-left: -330px;
}
.stacked-window.separated[data-window="2"] {
    top: 670px !important;
    left: 50%;
    margin-left: -275px;
}
.stacked-window.separated[data-window="3"] {
    top: 450px !important;
    left: 50%;
    margin-left: -180px;
}
.stacked-window.separated[data-window="4"] {
    top: 260px !important;
    left: 50%;
    margin-left: -200px;
}

/* ================= CLIPPY ================= */

#clippyContainer {
    position: fixed;
    right: 480px;
    top: 60px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

#clippyGif {
    width: 80px;
    height: auto;
    display: block;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    image-rendering: pixelated;
}

#clippyGif.visible {
    transform: translateY(0);
    opacity: 1;
    animation: clippyPulseGlow 2s ease-in-out infinite;
}

@keyframes clippyPulseGlow {
    0%   { filter: drop-shadow(0 0 4px #00ff66) drop-shadow(0 0 8px #00cc44); }
    50%  { filter: drop-shadow(0 0 12px #00ff99) drop-shadow(0 0 22px #00ff66) drop-shadow(0 0 35px #00aa33); }
    100% { filter: drop-shadow(0 0 4px #00ff66) drop-shadow(0 0 8px #00cc44); }
}

#clippyChatBubble {
    position: relative;
    background: #001a0a;
    border: 1px solid #00ff66;
    box-shadow: 0 0 10px rgba(0,255,100,0.25), inset 0 0 8px rgba(0,255,100,0.04);
    padding: 10px 14px;
    margin-bottom: 8px;
    max-width: 200px;
    transform: translateY(20px) scale(0.85);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
    transform-origin: bottom right;
}

#clippyChatBubble.visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

#clippyText {
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #00ff99;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

#clippyTail {
    position: absolute;
    bottom: -8px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #00ff66;
}

#clippyContainer.hiding #clippyChatBubble {
    transform: translateY(20px) scale(0.85);
    opacity: 0;
}

#clippyContainer.hiding #clippyGif {
    transform: translateY(40px);
    opacity: 0;
}

/* ================= CMD WINDOW (NAVi_OS) ================= */

.stacked-window[data-window="4"] {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
}

.stacked-window[data-window="4"] .window-content {
    padding: 0 !important;
    min-height: 0 !important;
    height: 288px !important;
    max-height: 288px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    overflow: hidden !important;
}

#cmdOutput {
    flex: 1;
    padding: 12px 14px 6px 14px;
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #00ff99;
    line-height: 1.7;
    overflow-y: scroll;
    height: 262px !important;
    max-height: 262px !important;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

.cmd-window-content {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    box-sizing: border-box;
}

#cmdOutput::-webkit-scrollbar {
    width: 6px;
}

#cmdOutput::-webkit-scrollbar-track {
    background: #001a0a;
}

#cmdOutput::-webkit-scrollbar-thumb {
    background: #00ff66;
    border-radius: 0;
}

#cmdOutput::-webkit-scrollbar-thumb:hover {
    background: #00ffaa;
}

#cmdOutput .cmd-idle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 13px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    animation: idleFlash 2s step-end infinite;
}

#cmdOutput.msg-active .cmd-idle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
@keyframes idleFlash {
    0%,49%  { color: #550000; text-shadow: none; }
    50%,100% { color: #ff2222; text-shadow: 0 0 8px rgba(255,30,30,0.9), 0 0 20px rgba(255,0,0,0.5), 0 0 32px rgba(255,0,0,0.3); }
}
#cmdCaret {
    display: inline-block; width: 7px; height: 13px;
    background: #00ff99; vertical-align: middle; margin-left: 1px; flex-shrink: 0;
    animation: cmdCaretBlink 0.6s step-end infinite;
}
@keyframes cmdCaretBlink {
    0%,100% { opacity:1; } 50% { opacity:0; }
}

#cmdOutput .cmd-line {
    margin: 0;
    padding: 0;
}

#cmdOutput .cmd-line.input-echo {
    color: #00ffcc;
}

#cmdOutput .cmd-line.response {
    color: #00ff99;
    opacity: 0.85;
}

#cmdOutput .cmd-line.error {
    color: #ff4444;
    opacity: 0.85;
}

#cmdOutput .cmd-line.success {
    color: #00ffcc;
    font-weight: bold;
}

#cmdOutput .cmd-line.info {
    color: #00ff66;
    opacity: 0.65;
}

/* /call readout — hardware/system stats */
#cmdOutput .cmd-line.hw {
    color: #e0a83e;
    font-weight: bold;
}

/* /call readout — geo/location stats */
#cmdOutput .cmd-line.geo {
    color: #bb88ff;
    font-weight: bold;
}

#cmdInputBar {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0,255,100,0.2);
    padding: 4px 14px;
    background: rgba(0,255,100,0.03);
    flex-shrink: 0;
    height: 26px;
    box-sizing: border-box;
    overflow: hidden;
}

#cmdPromptSymbol {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #00ff99;
    flex-shrink: 0;
}

#cmdInput {
    background: transparent;
    border: none;
    outline: none;
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #00ff99;
    caret-color: transparent;
    letter-spacing: 0.5px;
    padding: 0;
    margin: 0;
    width: 1px;
    min-width: 1px;
    flex-shrink: 0;
}

/* Input mirror — scrolls left so the newest chars stay visible near the caret */
#cmdInputMirror {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #00ff99;
    letter-spacing: 0.5px;
    white-space: pre;
    pointer-events: none;
    flex-shrink: 1;
    overflow: hidden;
    min-width: 0;
    /* mask the left edge so text fades out rather than hard-clips */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%);
}

/* ================= RAIN Z-INDEX FIX ================= */

#topBar {
    position: relative;
    z-index: 10;
}

/* ================= CLIPPY SPIN (glitch) ================= */

@keyframes clippySpin {
    from { transform: translateY(0) rotate(0deg); }
    to   { transform: translateY(0) rotate(1080deg); }
}

#clippyGif.clippy-spin {
    animation: clippyPulseGlow 2s ease-in-out infinite, clippySpin 1.1s linear forwards !important;
    transform-origin: center center;
}

#clippyGif.clippy-spin-reset {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform: translateY(0) rotate(0deg) !important;
}

.cmd-blyat {
    font-size: 22px !important;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(0,255,204,0.8);
    margin: 4px 0 !important;
}

/* ============================================ */
/* GROUP 935 LOG + ROUND COUNTER                */
/* ============================================ */

.group935-panel {
    margin-top: 4px;
    padding-top: 4px;
}

.mystery-box-wrap {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.mystery-box-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 160px;
    width: auto;
    height: auto;
    border-radius: 4px;
    opacity: 0.75;
    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.6),
        0 0 28px rgba(212, 175, 55, 0.3),
        0 0 50px rgba(212, 175, 55, 0.1);
    animation: goldPulse 2.5s ease-in-out infinite;
}

@keyframes goldPulse {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(212, 175, 55, 0.5),
            0 0 25px rgba(212, 175, 55, 0.25),
            0 0 45px rgba(212, 175, 55, 0.1);
    }
    50% {
        box-shadow:
            0 0 18px rgba(255, 210, 60, 0.8),
            0 0 40px rgba(212, 175, 55, 0.45),
            0 0 70px rgba(212, 175, 55, 0.2);
    }
}

.round-box {
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(20, 15, 0, 0.4);
    border-radius: 3px;
    padding: 8px 10px;
    margin-bottom: 10px;
    text-align: center;
}

.round-label {
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #00ff66;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 4px;
    opacity: 0.8;
}

.round-value {
    font-family: "Courier New", monospace;
    font-size: 22px;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 50, 50, 0.8);
    font-weight: bold;
    display: block;
    letter-spacing: 4px;
}

.g935-line {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #00cc44;
    opacity: 0.75;
    line-height: 1.7;
    letter-spacing: 0.5px;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}

.g935-line:last-child {
    opacity: 1;
    color: #00ff88;
}

.g935-divider {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: #1a4a1a;
    text-align: center;
    letter-spacing: 4px;
    margin: 3px 0;
    opacity: 0.6;
}

/* Boot screen mystery box */
.boot-mystery-box {
    position: absolute;
    bottom: 40px;
    right: 60px;
    opacity: 0.7;
    animation: goldPulse 2.5s ease-in-out infinite;
    border-radius: 4px;
    pointer-events: none;
}

/* ============================================ */
/* DER RIESE TELEPORTER NODE MAP                */
/* ============================================ */

.teleporter-map {
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: #00ff66;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
    white-space: pre;
    text-shadow: 0 0 4px rgba(0, 255, 100, 0.3);
    width: 100%;
    overflow: hidden;
}
@keyframes sphereTilt {
    0%   { transform: rotateX(20deg) rotateY(0deg); }
    25%  { transform: rotateX(15deg) rotateY(8deg); }
    50%  { transform: rotateX(25deg) rotateY(0deg); }
    75%  { transform: rotateX(18deg) rotateY(-8deg); }
    100% { transform: rotateX(20deg) rotateY(0deg); }
}

@keyframes _bangPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.4); }
}


.bd-status-line {
    display: flex; align-items: center; gap: 8px;
    margin: 3px 0;
    font-family: "Geneva","Helvetica Neue",Arial,sans-serif;
    font-size: 11px; color: #0a1832;
}

.fan-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    margin: 4px 0 2px 0;
}

.fan-canvas {
    display: block;
    opacity: 0.75;
    image-rendering: pixelated;
}

/* ── Ventilation Ports ─────────────────────── */
.vent-port {
    margin: 6px 0;
    position: relative;
}
.vent-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(0,255,100,0.35);
    margin-bottom: 3px;
    text-transform: uppercase;
}
.vent-grille {
    position: relative;
    height: 32px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(0,255,100,0.18);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8), 0 0 6px rgba(0,255,100,0.06);
    display: flex;
    align-items: stretch;
}
.vent-fan {
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    display: block;
    opacity: 0.85;
    image-rendering: pixelated;
    background: rgba(0,0,0,0.5);
    border-left: 1px solid rgba(0,255,100,0.12);
    border-right: 1px solid rgba(0,255,100,0.12);
    z-index: 3;
    position: relative;
}
.vent-canvas {
    flex: 1;
    display: block;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* not absolute — lives in flex flow between the two fans */
}
.vent-slats {
    position: absolute;
    top: 0; left: 32px; right: 32px; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    pointer-events: none;
    z-index: 2;
    pointer-events: none;
}
.vent-slats span {
    display: block;
    height: 1px;
    background: rgba(0,255,100,0.10);
    box-shadow: 0 0 2px rgba(0,255,100,0.06);
}
.bd-skey { opacity: 0.7; min-width: 150px; }
.bd-sdot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #007700; box-shadow: 0 0 5px #00cc00;
    flex-shrink: 0;
    animation: statusDotPulse 1.2s ease-in-out infinite;
}
.bd-sval { font-weight: bold; color: #005500; letter-spacing: 0.5px; }
@keyframes statusDotPulse {
    0%,100% { transform:scale(1); opacity:1; }
    50% { transform:scale(1.5); opacity:0.6; box-shadow:0 0 10px #00ff44; }
}
/* ── BOOST Switch ────────────────────────────── */
.boost-switch {
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 0;
    border-radius: 2px;
    border: none;
    background: transparent;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    user-select: none;
    pointer-events: auto !important;
    transition: color 0.3s, box-shadow 0.3s;
    transform-origin: center center;
}
.boost-off {
    color: #ff2200;
    text-shadow: 0 0 6px rgba(255,34,0,0.8), 0 0 14px rgba(255,34,0,0.4);
    animation: boostPulseOff 1.6s ease-in-out infinite;
}
.boost-on {
    color: #00ff66;
    text-shadow: 0 0 6px rgba(0,255,100,0.9), 0 0 16px rgba(0,255,100,0.5);
    animation: boostPulseOn 1.1s ease-in-out infinite;
}
@keyframes boostPulseOff {
    0%,100% { text-shadow: 0 0 5px rgba(255,34,0,0.7),  0 0 12px rgba(255,34,0,0.30); }
    50%     { text-shadow: 0 0 10px rgba(255,34,0,1.0),  0 0 24px rgba(255,34,0,0.60); }
}
@keyframes boostPulseOn {
    0%,100% { text-shadow: 0 0 6px rgba(0,255,100,0.7),  0 0 14px rgba(0,255,100,0.35); }
    50%     { text-shadow: 0 0 14px rgba(0,255,100,1.0),  0 0 30px rgba(0,255,100,0.65); }
}
/* ── NIXIE TUBE WINDOW ───────────────────────────────────── */
.stacked-window[data-window="nixie"] {
    width: 280px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    border-color: rgba(255, 80, 10, 0.35) !important;
    /* Clip pointer events to the pill shape */
    clip-path: inset(0 0 0 0 round 999px);
    /* 3D depth — top-left light source, deep bottom-right shadow */
    box-shadow:
        /* outer glow */
        0 0 18px rgba(255, 70, 0, 0.22),
        0 0 40px rgba(255, 50, 0, 0.10),
        /* hard cast shadow for depth */
        4px 8px 18px rgba(0, 0, 0, 0.85),
        6px 12px 32px rgba(0, 0, 0, 0.55),
        /* inner top highlight — light catching curved glass */
        inset 0 2px 6px rgba(255, 140, 60, 0.18),
        /* inner bottom shadow — far side of the tube */
        inset 0 -4px 12px rgba(0, 0, 0, 0.75) !important;
    transform: perspective(420px) rotateX(4deg);
    transform-origin: center top;
}

/* CRT screen effect on nixie content */
.stacked-window[data-window="nixie"] .window-content {
    overflow: visible !important;
    background: rgba(8, 4, 0, 0.97);
    border-top: 1px solid rgba(255, 80, 10, 0.18);
    padding: 10px 18px 12px !important;
    min-height: 0 !important;
    position: relative;
}

/* CRT scanlines */
.stacked-window[data-window="nixie"] .window-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0) 0px,
        rgba(0, 0, 0, 0.0) 2px,
        rgba(0, 0, 0, 0.38) 2px,
        rgba(0, 0, 0, 0.38) 4px
    );
    animation: nixieScanroll 8s linear infinite;
}

@keyframes nixieScanroll {
    0%   { background-position: 0 0; }
    100% { background-position: 0 40px; }
}

/* CRT vignette + phosphor bloom */
.stacked-window[data-window="nixie"] .window-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 11;
    background:
        radial-gradient(ellipse at center,
            rgba(255, 80, 10, 0.07) 0%,
            transparent 55%,
            rgba(0, 0, 0, 0.75) 100%
        );
    box-shadow:
        inset 0 0 22px rgba(0, 0, 0, 0.85),
        inset 0 0 6px rgba(255, 60, 0, 0.12);
}

.stacked-window[data-window="nixie"] .window-header {
    border-bottom-color: rgba(255, 80, 10, 0.3);
    color: rgba(255, 110, 20, 0.85);
    text-shadow: 0 0 8px rgba(255, 90, 10, 0.5);
    padding-left: 22px !important;
    padding-right: 22px !important;
    justify-content: center;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
}

/* Hide default rectangle — replaced by spinning ˣᴗˣ in JS */
.stacked-window[data-window="nixie"] .window-header::before {
    display: none;
}

/* Spinning ˣᴗˣ icon */
.nixie-header-icon {
    display: inline-block;
    font-size: 11px;
    color: rgba(255, 110, 20, 0.9);
    text-shadow: 0 0 6px rgba(255, 90, 10, 0.7);
    animation: nixieIconSpin 2.4s linear infinite;
    transform-origin: center center;
    flex-shrink: 0;
}

@keyframes nixieIconSpin {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}

#nixieTubeRow canvas {
    border-radius: 4px;
}

/* ── AETHER.TELEPORT tight fit ───────────────────────────── */
.stacked-window[data-window="right2"] {
    min-height: 0 !important;
    height: auto !important;
}
.stacked-window[data-window="right2"] .window-content {
    min-height: 0 !important;
    padding-bottom: 10px !important;
}

/* nixie header is non-draggable — keep custom cursor */
.stacked-window[data-window="nixie"] .window-header {
    cursor: var(--cursor-active, var(--cursor-default)) !important;
}

/* ── RADIO.NODE WINDOW ───────────────────────────────────── */
.stacked-window[data-window="radio"] {
    min-height: 0 !important;
    height: auto !important;
}

.radio-node-content {
    min-height: 0 !important;
    padding: 14px 16px 14px !important;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(0, 255, 150, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(0, 200, 255, 0.03) 0%, transparent 55%);
}

.radio-node-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.radio-cd-wrap {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    position: relative;
}

.radio-cd-canvas {
    display: block;
    width: 84px;
    height: 84px;
}

.radio-node-info {
    flex: 1;
    min-width: 0;
}

.radio-node-np-label {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: rgba(0, 255, 150, 0.45);
    margin-bottom: 4px;
}

.radio-node-station {
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #aaffcc;
    text-shadow: 0 0 4px rgba(0, 255, 150, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.radio-node-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.radio-node-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 255, 120, 0.25);
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}

.radio-node-dot.radio-node-live {
    background: #00ff88;
    box-shadow: 0 0 6px rgba(0, 255, 120, 0.9);
    animation: radioNodeDotPulse 1.2s ease-in-out infinite;
}

@keyframes radioNodeDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.radio-node-status-label {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(0, 255, 150, 0.55);
}

.radio-node-osc-wrap {
    margin: 12px 0 10px;
    border: 1px solid rgba(0,255,150,0.2);
    background: rgba(0,255,150,0.03);
    padding: 3px 5px;
    box-sizing: border-box;
    transition: box-shadow 0.05s linear, border-color 0.05s linear;
}

.radio-node-osc {
    display: block;
    width: 100%;
    height: 26px;
}

.radio-node-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.radio-node-play,
.radio-node-preset {
    font-family: "Courier New", monospace;
    background: rgba(0, 255, 120, 0.05);
    border: 1px solid rgba(0, 255, 120, 0.25);
    color: #7fffb0;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    border-radius: 2px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.radio-node-preset {
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 5px 9px;
}

.radio-node-play {
    font-size: 12px;
    padding: 6px 14px;
}

.radio-node-play:hover,
.radio-node-preset:hover {
    background: rgba(0, 255, 120, 0.14);
    border-color: rgba(0, 255, 120, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 120, 0.25);
}

.radio-node-preset.radio-node-preset-active {
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 255, 120, 0.9), 0 0 16px rgba(0, 255, 120, 0.5);
    border-color: rgba(0, 255, 120, 0.8);
    background: rgba(0, 255, 120, 0.14);
    transform: scale(1.08);
    animation: radioPresetGlow 1.4s ease-in-out infinite;
}

@keyframes radioPresetGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(0, 255, 120, 0.5); }
    50%      { box-shadow: 0 0 12px rgba(0, 255, 120, 0.9), 0 0 20px rgba(0, 255, 120, 0.4); }
}

.radio-node-eq-toggle {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    background: rgba(0, 255, 120, 0.05);
    border: 1px solid rgba(0, 255, 120, 0.25);
    color: #7fffb0;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    border-radius: 2px;
    padding: 5px 8px;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    outline: 1px solid rgba(255, 220, 0, 0.7);
    outline-offset: 2px;
    animation: radioEQTogglePulse 1.6s ease-in-out infinite;
}

@keyframes radioEQTogglePulse {
    0%, 100% { outline-color: rgba(255, 220, 0, 0.35); outline-offset: 1px; }
    50%      { outline-color: rgba(255, 220, 0, 0.9);  outline-offset: 3px; }
}

.radio-node-eq-toggle:hover {
    background: rgba(0, 255, 120, 0.14);
    border-color: rgba(0, 255, 120, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 120, 0.25);
}

.radio-node-eq-toggle.radio-eq-toggle-active {
    background: rgba(0, 255, 120, 0.18);
    border-color: rgba(0, 255, 120, 0.65);
    box-shadow: 0 0 10px rgba(0, 255, 120, 0.35);
    color: #aaffcc;
    outline: none;
    animation: none;
}

.radio-node-vol-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.radio-node-vol-label {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(0, 255, 150, 0.5);
    flex-shrink: 0;
}

.radio-node-vol-track {
    flex: 1;
    height: 12px;
    background: rgba(0, 255, 120, 0.1);
    border: 1px solid rgba(0, 255, 120, 0.15);
    border-radius: 2px;
    position: relative;
}

.radio-node-vol-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 10%;
    background: #00ff88;
    box-shadow: 0 0 6px rgba(0, 255, 120, 0.5);
    border-radius: 2px;
    pointer-events: none;
}

.radio-node-vol-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
}

.radio-node-vol-val {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: rgba(0, 255, 150, 0.6);
    width: 28px;
    flex-shrink: 0;
    text-align: right;
}

.radio-node-freq {
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(0, 255, 150, 0.3);
    text-align: center;
}

/* ================= RADIO EQ + SEARCH POPUP ================= */

.radio-eq-popup {
    width: 300px !important;
    border-color: rgba(0, 255, 120, 0.4) !important;
    box-shadow:
        0 0 24px rgba(0, 255, 120, 0.2),
        inset 0 0 12px rgba(0, 255, 120, 0.03) !important;
}

.radio-eq-popup-header,
.radio-eq-popup-header * {
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    user-select: none;
}

.radio-eq-popup-body {
    background: #000;
    padding: 0;
}

.radio-eq-row-h {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 10px 8px 6px;
    gap: 4px;
}

.radio-eq-row-h + .radio-eq-row-h {
    padding-top: 6px;
    padding-bottom: 10px;
}

.radio-eq-knob-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.radio-eq-knob-canvas {
    cursor: ns-resize;
    display: block;
}

.radio-eq-knob-canvas:hover {
    filter: brightness(1.2);
}

.radio-eq-knob-label {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(0, 255, 150, 0.6);
    text-transform: uppercase;
}

.radio-eq-knob-val {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: #00ff99;
    letter-spacing: 1px;
    min-width: 26px;
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 255, 120, 0.6);
}

.radio-eq-reset-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 4px 10px 10px;
}

.radio-eq-reset-btn {
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(0, 255, 120, 0.5);
    background: transparent;
    border: 1px solid rgba(0, 255, 120, 0.2);
    padding: 3px 10px;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    transition: color 0.15s, border-color 0.15s;
}

.radio-eq-reset-btn:hover {
    color: #00ff99;
    border-color: rgba(0, 255, 120, 0.5);
}

.radio-eq-preset-btn {
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(180, 120, 255, 0.6);
    background: transparent;
    border: 1px solid rgba(180, 120, 255, 0.25);
    padding: 3px 10px;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    transform: scale(1);
    transition: color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    animation: eqPresetPulse 2.2s ease-in-out infinite;
}

@keyframes eqPresetPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(180, 120, 255, 0.2), 0 0 10px rgba(180, 120, 255, 0.08); border-color: rgba(180, 120, 255, 0.25); }
    50%       { box-shadow: 0 0 10px rgba(180, 120, 255, 0.7), 0 0 22px rgba(180, 120, 255, 0.3); border-color: rgba(180, 120, 255, 0.7); }
}

.radio-eq-preset-btn:hover {
    color: #ffffff;
    border-color: rgba(200, 150, 255, 0.9);
    box-shadow: 0 0 12px rgba(180, 120, 255, 0.85), 0 0 28px rgba(180, 120, 255, 0.4);
    transform: scale(1.12);
    animation: none;
}

/* Thin divider between EQ section and search section */
.radio-eq-search-divider {
    height: 1px;
    background: rgba(0, 255, 120, 0.15);
    margin: 0;
}

.radio-eq-search-section {
    padding: 10px 10px 12px;
}

.radio-eq-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0, 255, 120, 0.03);
    border: 1px solid rgba(0, 255, 120, 0.18);
    margin-bottom: 8px;
}

.radio-eq-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.radio-eq-search-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 1px;
    pointer-events: none;
    animation: radioSearchPulse 2s step-end infinite;
}

@keyframes radioSearchPulse {
    0%, 49%  { color: #003322; text-shadow: none; }
    50%, 100% { color: #00ff99; text-shadow: 0 0 8px rgba(0,255,120,0.9), 0 0 20px rgba(0,255,80,0.5); }
}

.radio-eq-search-prefix {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: rgba(0, 255, 120, 0.45);
    flex-shrink: 0;
}

.radio-eq-search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #aaffcc;
    letter-spacing: 1px;
    caret-color: #00ff99;
    position: relative;
    z-index: 1;
}

.radio-eq-search-btn {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: rgba(0, 255, 120, 0.6);
    background: transparent;
    border: 1px solid rgba(0, 255, 120, 0.28);
    padding: 3px 8px;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.radio-eq-search-btn:hover {
    color: #00ff99;
    border-color: rgba(0, 255, 120, 0.55);
    background: rgba(0, 255, 120, 0.07);
}

.radio-eq-station-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(0, 255, 120, 0.15);
    background: rgba(0,0,0,0.4);
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

.radio-eq-station-list::-webkit-scrollbar { width: 4px; }
.radio-eq-station-list::-webkit-scrollbar-track { background: #001a0a; }
.radio-eq-station-list::-webkit-scrollbar-thumb { background: #00ff66; border-radius: 0; }
.radio-eq-station-list::-webkit-scrollbar-thumb:hover { background: #00ffaa; }

.radio-eq-list-loading {
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: rgba(0, 255, 120, 0.35);
    letter-spacing: 1px;
    padding: 14px;
    text-align: center;
}

.radio-eq-station-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    cursor: var(--cursor-active, var(--cursor-default)) !important;
    border-bottom: 1px solid rgba(0, 255, 120, 0.06);
    transition: background 0.12s;
}

.radio-eq-station-row:hover {
    background: rgba(0, 255, 120, 0.07);
}

.radio-eq-station-row.radio-eq-station-active {
    background: rgba(0, 255, 120, 0.1);
    border-left: 2px solid rgba(0, 255, 120, 0.6);
}

.radio-eq-station-play-ind {
    font-size: 9px;
    color: rgba(0, 255, 120, 0.5);
    flex-shrink: 0;
    width: 10px;
}

.radio-eq-station-active .radio-eq-station-play-ind {
    color: #00ff99;
    text-shadow: 0 0 6px rgba(0, 255, 120, 0.8);
}

.radio-eq-station-name {
    font-family: "Courier New", monospace;
    font-size: 10px;
    color: rgba(0, 255, 150, 0.75);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.radio-eq-station-active .radio-eq-station-name {
    color: #aaffcc;
}

.radio-eq-station-tags {
    font-family: "Courier New", monospace;
    font-size: 8px;
    color: rgba(0, 255, 120, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    letter-spacing: 0.5px;
}

.radio-eq-station-country {
    font-family: "Courier New", monospace;
    font-size: 8px;
    color: rgba(0, 255, 120, 0.28);
    flex-shrink: 0;
    letter-spacing: 1px;
}

/* ================= MUSIC.RAR LIBRARY ================= */

/* Window is 50% larger overall (560px -> 840px) — content below scaled to match */
.popup-window:has(.music-library-content) {
    width: 840px;
    max-width: 95vw;
}

.music-library-content {
    padding: 21px 24px;
    max-height: 630px;
    overflow-y: auto;
}

.music-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,255,120,0.2);
}

.music-lib-label {
    font-family: "Courier New", monospace;
    font-size: 16.5px;
    color: rgba(0,255,120,0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.music-track-count {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: rgba(0,255,120,0.4);
    letter-spacing: 1px;
}

.music-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 15px;
}

/* When a genre/section ends with 1-2 leftover cards short of a full row,
   group them into their own centered row instead of leaving them stuck
   against the left edge */
.music-track-row-center {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 15px; /* matches .music-library-grid's gap */
}

.music-track-row-center .music-track-card {
    width: calc((100% - 30px) / 3); /* matches a normal column's width at the current 3-col layout */
    max-width: 100%;
    flex: 0 0 auto;
}

.music-track-card {
    background: rgba(0,255,120,0.03);
    border: 1px solid rgba(0,255,120,0.15);
    padding: 9px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    cursor: pointer;
}

.music-track-card:hover {
    border-color: rgba(0,255,120,0.55);
    background: rgba(0,255,120,0.07);
    box-shadow: 0 0 12px rgba(0,255,120,0.2);
}

.music-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.music-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.75) saturate(0.6);
    transition: filter 0.2s;
}

.music-track-card:hover .music-thumb {
    filter: brightness(0.9) saturate(0.85);
}

.music-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.2s;
}

.music-track-card:hover .music-thumb-overlay {
    opacity: 1;
}

.music-play-icon {
    font-size: 33px;
    color: #00ff99;
    text-shadow: 0 0 12px rgba(0,255,120,0.9), 0 0 24px rgba(0,255,120,0.5);
    line-height: 1;
}

.music-track-name {
    font-family: "Courier New", monospace;
    font-size: 16.5px;
    color: rgba(0,255,120,0.75);
    margin-top: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.5px;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.music-track-name-inner {
    display: inline-block;
}

/* Only titles too long to fit get this class (added via JS after measuring overflow).
   Hover is bound to the whole card, not just the name text, so it's easier to trigger. */
.music-track-card:hover .music-track-name-marquee .music-track-name-inner {
    animation: musicTrackMarquee var(--marquee-dur, 4s) ease-in-out infinite alternate;
}

@keyframes musicTrackMarquee {
    0%, 10%  { transform: translateX(0); }
    90%, 100% { transform: translateX(calc(-1 * var(--marquee-dist, 0px))); }
}

/* ================= MUSIC PLAYER POPUP ================= */

.music-player-popup {
    position: fixed;
    z-index: 10001;
    width: 440px;
    background: #000;
    border: 1px solid rgba(0,255,120,0.45);
    box-shadow:
        0 0 28px rgba(0,255,120,0.25),
        inset 0 0 14px rgba(0,255,120,0.03);
    opacity: 0;
    transform: scale(0.88) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}

.music-player-popup.music-player-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

.music-player-header {
    background: rgba(0,255,120,0.08);
    border-bottom: 1px solid rgba(0,255,120,0.2);
    padding: 7px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
}

.music-player-title {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: #00ff99;
    letter-spacing: 1.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.music-player-body {
    background: #000;
}

.music-player-body iframe {
    width: 100%;
    height: 290px;
}

.music-player-info {
    padding: 6px 10px 8px;
    border-top: 1px solid rgba(0,255,120,0.1);
}

.music-player-track-label {
    font-family: "Courier New", monospace;
    font-size: 9px;
    color: rgba(0,255,120,0.45);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ================= MUSIC CATEGORY TABS ================= */

.music-tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* thin vertical rule between "all" and the genre tabs */
.music-tab-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(0,255,120,0.25);
    margin: 0 3px;
    flex-shrink: 0;
}

/* horizontal divider line below the entire tab row */
.music-tab-divider {
    width: 100%;
    height: 1px;
    background: rgba(0,255,120,0.18);
    margin: 10px 0 12px;
}

.music-tab {
    font-family: "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(0,255,120,0.45);
    background: transparent;
    border: 1px solid rgba(0,255,120,0.18);
    padding: 3px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-transform: lowercase;
}

.music-tab:hover {
    color: rgba(0,255,120,0.85);
    border-color: rgba(0,255,120,0.4);
    background: rgba(0,255,120,0.05);
}

.music-tab.music-tab-active {
    color: #00ff99;
    border-color: rgba(0,255,120,0.6);
    background: rgba(0,255,120,0.08);
    box-shadow: 0 0 8px rgba(0,255,120,0.18);
}

/* track card meta row (name + tag badge) */
.music-track-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 6px;
}

.music-track-tag {
    font-family: "Courier New", monospace;
    font-size: 13.5px;
    color: rgba(0,255,120,0.4);
    border: 1px solid rgba(0,255,120,0.2);
    padding: 1.5px 6px;
    letter-spacing: 0.8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* empty state */
.music-empty {
    font-family: "Courier New", monospace;
    font-size: 18px;
    color: rgba(0,255,120,0.3);
    letter-spacing: 1px;
    padding: 27px 0;
    text-align: center;
    width: 100%;
}
/* ── data.stream slideshow ── */
.stacked-window[data-window="left2"] .window-content {
    position: relative;
    overflow: hidden;
}
.stacked-window[data-window="left2"] .window-content img,
.stacked-window[data-window="left2"] .window-content video,
.stacked-window[data-window="left2"] .window-content .ds-slide {
    opacity: 0.75;
}

/* ── Favs empty state — matches NAVi cmd-idle style, spinning sad face ── */
.music-library-grid {
    position: relative;
    min-height: 390px;
}

/* When grid contains only the favs empty state, center it */
.music-library-grid:has(.music-favs-empty) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.music-favs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0 18px;
    width: 100%;
    text-align: center;
}

.music-favs-empty-text {
    font-family: "Courier New", monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    animation: idleFlash 2s step-end infinite;
}

.music-favs-empty-face {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: 20px;
    color: #ff2222;
    text-shadow: 0 0 8px rgba(255,30,30,0.9), 0 0 20px rgba(255,0,0,0.5);
    animation: spinSadFace 1.8s linear infinite;
    line-height: 1;
}

@keyframes spinSadFace {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.music-c0ding-divider {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 21px;
    letter-spacing: 2px;
    color: rgba(255,220,80,0.92);
    padding: 12px 0 6px;
    position: relative;
    text-shadow:
        0 0 4px rgba(255,200,50,0.9),
        0 0 10px rgba(255,200,50,0.55),
        0 0 22px rgba(255,200,50,0.25);
}

.games-placeholder-cell {
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: #0a0a0a;
}

.games-placeholder-o7 {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: 22px;
    font-weight: bold;
    color: #ff80c0;
    text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 22px rgba(255,255,255,0.5);
    animation: spinSadFace 2.2s linear infinite;
    line-height: 1;
}

.games-placeholder-text {
    font-family: "Courier New", monospace;
    font-size: 13.75px;
    letter-spacing: 1.5px;
    color: #ff80c0;
    text-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 18px rgba(255,255,255,0.4);
    animation: gamesPlaceholderPulse 2s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes gamesPlaceholderPulse {
    0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 18px rgba(255,255,255,0.4); }
    50%       { text-shadow: 0 0 12px rgba(255,255,255,1),  0 0 32px rgba(255,255,255,0.7); }
}

@keyframes musicClippyGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(0,255,120,0.55)) drop-shadow(0 0 12px rgba(0,255,120,0.25)); }
    50%       { filter: drop-shadow(0 0 14px rgba(0,255,120,0.9)) drop-shadow(0 0 28px rgba(0,255,120,0.55)); }
}

#bootOptimClippy .bo-word {
    display: inline-block;
    font-weight: bold;
    animation: bootOptimClippyPulse 1.3s ease-in-out infinite;
}

@keyframes bootOptimClippyPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}

/* ── Force site cursor on ALL scrollbar parts — inlined so var() resolves in pseudo-elements ── */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22sl%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%222%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%221%22%20fill%3D%22rgba%280%2C255%2C80%2C0.13%29%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%3CclipPath%20id%3D%22ac%22%3E%0A%20%20%20%20%20%20%3Cpolygon%20points%3D%222%2C2%202%2C24%208%2C18%2013%2C28%2016%2C27%2011%2C17%2018%2C17%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpolygon%20points%3D%222%2C2%202%2C24%208%2C18%2013%2C28%2016%2C27%2011%2C17%2018%2C17%22%0A%20%20%20%20fill%3D%22%23000%22%20stroke%3D%22%2300ff66%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2232%22%20height%3D%2232%22%0A%20%20%20%20fill%3D%22url%28%23sl%29%22%20clip-path%3D%22url%28%23ac%29%22%20opacity%3D%221%22%2F%3E%0A%20%20%3Cpolygon%20points%3D%222%2C2%202%2C24%208%2C18%2013%2C28%2016%2C27%2011%2C17%2018%2C17%22%0A%20%20%20%20fill%3D%22none%22%20stroke%3D%22%2300ff66%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.22%22%2F%3E%0A%3C%2Fsvg%3E") 0 0, auto !important;
}
/* ── projects.sys popup ─────────────────────────────────────── */

/* Make the projects popup wider to accommodate the split layout */
.popup-window:has(.projects-popup-content) {
    width: 860px;
    max-width: 95vw;
    transition: width 0.32s cubic-bezier(0.22,1,0.36,1);
}

@keyframes projGlitchExpand {
    0%   { clip-path: inset(0 0 0 0); transform: translate(-50%,-50%) scale(1); }
    15%  { clip-path: inset(2px 3px 1px 0); transform: translate(-50%,-50%) translateX(3px) scale(1); }
    30%  { clip-path: inset(0 0 3px 2px); transform: translate(-50%,-50%) translateX(-2px) scale(1); }
    50%  { clip-path: inset(1px 0 0 0); transform: translate(-50%,-50%) scale(1); }
    100% { clip-path: inset(0 0 0 0); transform: translate(-50%,-50%) scale(1); }
}
@keyframes projGlitchContract {
    0%   { clip-path: inset(0 0 0 0); transform: translate(-50%,-50%) scale(1); }
    20%  { clip-path: inset(1px 2px 0 3px); transform: translate(-50%,-50%) translateX(-3px) scale(1); }
    40%  { clip-path: inset(3px 0 2px 0); transform: translate(-50%,-50%) translateX(2px) scale(1); }
    60%  { clip-path: inset(0 1px 0 0); transform: translate(-50%,-50%) scale(1); }
    100% { clip-path: inset(0 0 0 0); transform: translate(-50%,-50%) scale(1); }
}

.projects-popup-content {
    display: flex;
    flex-direction: row;
    padding: 0;
    max-height: 660px;
    height: 660px;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.22,1,0.36,1), max-height 0.32s cubic-bezier(0.22,1,0.36,1);
}

/* Left column — project list */
.proj-list {
    width: 220px;
    min-width: 220px;
    border-right: 1px solid rgba(0,255,120,0.25);
    overflow-y: auto;
    padding: 10px 0;
    background: rgba(0,255,40,0.02);
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

.proj-list::-webkit-scrollbar { width: 4px; }
.proj-list::-webkit-scrollbar-track { background: #001a0a; }
.proj-list::-webkit-scrollbar-thumb { background: #00ff66; }

.proj-item {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,255,120,0.1);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.proj-item:last-child {
    border-bottom: none;
}

.proj-item:hover {
    background: rgba(0,255,120,0.07);
}

.proj-item.proj-item-active {
    background: rgba(0,255,120,0.12);
    border-left: 2px solid #00ff77;
}

/* ── featured item (n0de_forge) — same shape, yellow glow ── */
.proj-item.proj-item-featured {
    border-bottom: none;
    position: relative;
    animation: projFeaturedPulse 3.4s ease-in-out infinite;
}
.proj-item.proj-item-featured:hover {
    background: rgba(255,220,0,0.08);
}
.proj-item.proj-item-featured.proj-item-active {
    background: rgba(255,220,0,0.1);
    border-left: 2px solid #ffee00;
}
.proj-item.proj-item-featured .proj-item-label {
    color: #ffee00;
    text-shadow: 0 0 6px rgba(255,220,0,0.5);
}
.proj-item.proj-item-featured .proj-item-sublabel {
    color: rgba(255,220,0,0.5);
}
.proj-item.proj-item-featured .proj-item-desc {
    color: rgba(255,220,0,0.6);
}
@keyframes projFeaturedPulse {
    0%, 100% { box-shadow: inset 0 0 10px rgba(255,220,0,0.04); }
    50%       { box-shadow: inset 0 0 16px rgba(255,220,0,0.1); }
}

.proj-featured-divider {
    height: 1px;
    margin: 0 14px 0;
    background: linear-gradient(to right, transparent, rgba(255,220,0,0.35) 18%, rgba(255,220,0,0.35) 82%, transparent);
}

.proj-item-label {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    color: #00ff99;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
}

.proj-item-sublabel {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: rgba(0,255,120,0.45);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.proj-item-desc {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: rgba(0,255,120,0.6);
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* Right column — viewer */
.proj-viewer {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: 0; /* allow flex child to shrink and scroll */
}

.proj-viewer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.proj-placeholder-text {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: rgba(0,255,120,0.35);
    letter-spacing: 2px;
    animation: proj-cursor-blink 1.1s step-end infinite;
}

@keyframes proj-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ── proj card — API data display ── */
.proj-card {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

.proj-card::-webkit-scrollbar { width: 4px; }
.proj-card::-webkit-scrollbar-track { background: #001a0a; }
.proj-card::-webkit-scrollbar-thumb { background: #00ff66; }

/* Loading state */
.proj-card-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.proj-loading-text {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(0,255,120,0.5);
    letter-spacing: 2px;
    animation: proj-cursor-blink 0.8s step-end infinite;
}

/* Error state */
.proj-card-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    font-family: 'Courier New', monospace;
    text-align: center;
}

.proj-card-err-line {
    color: rgba(255,80,80,0.85) !important;
}

.proj-card-err-sub {
    color: rgba(0,255,120,0.4) !important;
    font-size: 9.5px !important;
    margin-bottom: 8px;
}

/* Card inner */
.proj-card-inner {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.proj-card-title {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #00ff99;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 0 0 8px rgba(0,255,120,0.4);
}

.proj-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(0,255,120,0.2);
    margin: 10px 0;
}

.proj-card-row {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    line-height: 2;
    display: flex;
    align-items: baseline;
}

.proj-card-key {
    color: rgba(0,255,120,0.45);
    letter-spacing: 1px;
    white-space: pre;
}

.proj-card-val {
    color: #00ff99;
    letter-spacing: 0.8px;
}

.proj-card-desc {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(0,255,120,0.6);
    line-height: 1.7;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Open button — shared between card and error state */
.proj-open-btn {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00ff99;
    letter-spacing: 1.5px;
    border: 1px solid rgba(0,255,120,0.5);
    padding: 7px 18px;
    text-decoration: none;
    margin-top: 18px;
    align-self: flex-start;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}

.proj-open-btn:hover {
    background: rgba(0,255,120,0.1);
    box-shadow: 0 0 12px rgba(0,255,120,0.35);
    color: #fff;
}

/* Preview media — gif / AMO screenshot */
.proj-card-media {
    width: 100%;
    max-width: 100%;
    display: block;
    border: 1px solid rgba(0,255,120,0.2);
    box-shadow: 0 0 12px rgba(0,255,120,0.1);
    image-rendering: auto;
    margin-bottom: 4px;
}

/* ── proj paste code block ─────────────────────────────────── */
.proj-paste-wrap {
    width: 100%;
    border: 1px solid rgba(0,255,120,0.2);
    background: rgba(0,255,40,0.02);
    margin: 4px 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* fake terminal titlebar */
.proj-paste-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(0,255,120,0.07);
    border-bottom: 1px solid rgba(0,255,120,0.15);
}

.proj-paste-bar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,255,120,0.35);
    display: inline-block;
    flex-shrink: 0;
}

.proj-paste-bar-label {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: rgba(0,255,120,0.4);
    letter-spacing: 1.5px;
    margin-left: 4px;
}

.proj-paste-code {
    margin: 0;
    padding: 12px 14px;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    line-height: 1.7;
    color: #00ff99;
    white-space: pre;
    overflow-x: auto;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
    text-shadow: 0 0 4px rgba(0,255,120,0.25);
    /* text-shadow blur is expensive to repaint during scrollbar drag —
       promote to its own compositor layer so scrolling doesn't repaint it */
    will-change: transform;
    transform: translateZ(0);
    contain: paint;
}

.proj-paste-code::-webkit-scrollbar { width: 4px; height: 4px; }
.proj-paste-code::-webkit-scrollbar-track { background: #001a0a; }
.proj-paste-code::-webkit-scrollbar-thumb { background: #00ff66; }

.proj-paste-code code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
}
/* ── art gallery popup — 55% oversize on both axes ───────────────────── */
.popup-window.art-gallery-popup {
    width: 1085px;       /* 560 * 1.55 * 1.25 */
    max-width: 97vw;
}
.popup-window.art-gallery-popup .about-section-content {
    height: calc(55vh);  /* 55% of viewport height for the content area */
    max-height: calc(55vh);
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* art gallery arena — fills the content area, overflow hidden (clips floaters) */
.art-gallery-arena {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* individual floating art image wrapper */
.art-float-item {
    position: absolute;
    cursor: pointer;
    will-change: transform;
    transition: opacity 0.35s ease;
}

/* the actual img inside each floater */
.art-float-item img {
    display: block;
    width: 90px;
    height: 68px;
    object-fit: cover;
    border: 1px solid rgba(0,255,120,0.3);
    box-shadow: 0 0 8px rgba(0,255,120,0.15);
    filter: brightness(0.82) saturate(0.9);
    transition:
        width 0.38s cubic-bezier(0.34,1.4,0.64,1),
        height 0.38s cubic-bezier(0.34,1.4,0.64,1),
        box-shadow 0.25s ease,
        filter 0.25s ease,
        border-color 0.25s ease;
}

.art-float-item:hover img {
    border-color: rgba(0,255,120,0.75);
    box-shadow: 0 0 16px rgba(0,255,120,0.4);
    filter: brightness(1) saturate(1.1);
}

/* dimmed state — when another item is magnified */
.art-float-item.art-dimmed {
    opacity: 0.18;
    pointer-events: none;
}

/* magnified state */
.art-float-item.art-magnified {
    z-index: 50;
    opacity: 1;
    pointer-events: auto;
}

.art-float-item.art-magnified img {
    border-color: rgba(0,255,120,0.9);
    box-shadow:
        0 0 28px rgba(0,255,120,0.55),
        0 0 60px rgba(0,255,120,0.2);
    filter: brightness(1.05) saturate(1.15);
}

/* scan-line overlay on the arena for atmosphere */
.art-gallery-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,255,100,0.025) 0px,
        rgba(0,255,100,0.025) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* Divider between the two category halves */
.art-gallery-arena::after {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 1px;
    background: rgba(0,255,120,0.15);
    box-shadow: 0 0 6px rgba(0,255,120,0.2);
    pointer-events: none;
    z-index: 5;
}

/* ── guestbook.log popup ──────────────────────────────────────────────── */

.popup-window:has(.gb-popup-content) {
    width: 600px;
    max-width: 95vw;
}

/* ── about.txt popup — 15% taller, full scroll ───────────────────────────── */
.popup-window:has(.about-popup-content) {
    width: 620px;
    max-width: 95vw;
}

/* ── Interests: Win95 CRT popup ────────────────────────────────────────── */
.popup-window.interests-popup {
    width: 780px;
    max-width: 97vw;
}
.popup-window.interests-popup .about-section-content {
    height: 520px;
    max-height: 520px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background: #0d0d0d;
}

#aboutInterestsTree {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* CRT shell wrapper */
.w95-crt-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 8px 8px 0;
    box-sizing: border-box;
}

/* Monitor bezel — warm dark plastic */
.w95-crt-bezel {
    background: linear-gradient(160deg, #3c3836 0%, #2a2523 50%, #1e1b19 100%);
    border-radius: 12px 12px 6px 6px;
    padding: 10px 12px 8px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -2px 6px rgba(0,0,0,0.6),
        0 10px 40px rgba(0,0,0,0.95),
        0 0 80px rgba(0,120,80,0.06);
    position: relative;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.w95-brand-label {
    font-family: 'Arial Narrow', 'Arial', sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: #555;
    text-align: right;
    margin-bottom: 6px;
    user-select: none;
}

/* Screen wrapper — slight inner shadow gives depth */
.w95-screen-wrap {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #000;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.7),
        0 0 0 3px #111,
        0 0 0 4px #444,
        0 0 24px rgba(0,200,100,0.1);
}

.w95-screen-inner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* CRT scanlines overlay */
.w95-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.13) 2px,
        rgba(0,0,0,0.13) 3px
    );
    pointer-events: none;
    z-index: 90;
    border-radius: 6px;
}

/* CRT vignette — edges darken like a real tube */
.w95-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 89;
    border-radius: 6px;
}

/* The actual desktop surface */
.w95-desktop {
    background: #008080;
    width: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 11px;
    cursor: default;
    user-select: none;
}

/* Bezel bottom strip — holds power LED */
.w95-bezel-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 6px 0;
}
.w95-power-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff55;
    box-shadow: 0 0 5px #00ff55, 0 0 14px #00ff5599;
}

/* Monitor neck + base */
.w95-crt-neck {
    width: 80px;
    height: 10px;
    background: linear-gradient(to bottom, #2a2523, #1e1b19);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    flex-shrink: 0;
}
.w95-crt-base {
    width: 160px;
    height: 6px;
    background: #1e1b19;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.8);
    flex-shrink: 0;
}

/* ── Desktop icons ──────────────────────────────────────────────────────── */
.w95-desk-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 68px;
    cursor: pointer;
    padding: 3px 2px;
    border: 1px dotted transparent;
    border-radius: 1px;
}
.w95-desk-icon:hover { border-color: rgba(255,255,255,0.3); background: rgba(0,0,128,0.3); }
.w95-desk-icon.w95-selected { border-color: rgba(255,255,255,0.5); background: rgba(0,0,128,0.55); }
.w95-desk-label {
    color: #fff;
    font-size: 10px;
    text-align: center;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    line-height: 1.2;
    word-break: break-word;
    max-width: 64px;
}

/* ── Win95 Window ───────────────────────────────────────────────────────── */
.w95-window {
    position: absolute;
    background: #c0c0c0;
    border-top: 2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
    border-bottom: 2px solid #888;
    border-right: 2px solid #888;
    box-shadow: 2px 2px 0 #000;
    min-width: 200px;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/* Title bar */
.w95-win-titlebar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 3px 2px 4px;
    cursor: move;
    user-select: none;
    min-height: 20px;
}
.w95-win-ticon { flex-shrink: 0; display: flex; align-items: center; }
.w95-win-title {
    flex: 1;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.w95-win-btns { display: flex; gap: 2px; flex-shrink: 0; }
.w95-win-btn {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    line-height: 1;
    user-select: none;
}
.w95-win-btn:active {
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

/* Menu bar inside windows */
.w95-menubar {
    background: #c0c0c0;
    border-bottom: 1px solid #888;
    padding: 1px 4px;
    font-size: 11px;
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.w95-menubar span {
    padding: 1px 6px;
    cursor: default;
}
.w95-menubar span:hover { background: #000080; color: #fff; }

/* Explorer file grid */
.w95-explorer-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    min-height: 90px;
    background: #fff;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    margin: 2px;
    overflow-y: auto;
}
.w95-exp-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 70px;
    padding: 4px 2px;
    cursor: pointer;
    border: 1px dotted transparent;
    font-size: 10px;
    text-align: center;
    color: #000;
    line-height: 1.2;
    word-break: break-word;
}
.w95-exp-icon:hover { background: rgba(0,0,128,0.12); border-color: #000080; }
.w95-exp-icon.w95-selected { background: rgba(0,0,128,0.2); border-color: #000080; }

/* Notepad text area */
.w95-notepad-area {
    background: #fff;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    margin: 5px;
    padding: 10px 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.75;
    color: #111;
    white-space: pre-wrap;
    overflow-y: auto;
    min-height: 100px;
    max-height: 260px;
    -webkit-text-stroke: 0.3px #111;
    text-shadow: 0.4px 0.4px 0 #33333344;
}

/* Picture viewer — double-clicked image files inside a w95 folder */
.w95-pic-area {
    background: #fff;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    margin: 5px;
    padding: 10px;
    text-align: center;
}
.w95-pic-viewport {
    width: 100%;
    height: 280px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #888;
    background: #ddd;
}
.w95-pic-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transform-origin: center center;
    transition: transform 0.06s linear;
    touch-action: none;
    cursor: grab;
}
.w95-pic-img.w95-pic-dragging { cursor: grabbing; }
.w95-pic-caption {
    margin-top: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-style: italic;
    color: #444;
}

/* Cars list toggle */
.w95-cars-toggle {
    display: inline-block;
    font-weight: bold;
    color: #000080 !important;
    cursor: pointer;
    letter-spacing: 0.5px;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 0 6px #0055ff88, 0 0 14px #0055ff33 !important;
    border-bottom: 1px dashed #000080;
}
.w95-cars-toggle:hover { text-shadow: 0 0 10px #0055ffcc !important; }
.w95-cars-list {
    margin-top: 6px;
    color: #111 !important;
    -webkit-text-stroke: 0.3px #111 !important;
    text-shadow: none !important;
    line-height: 1.9;
}

/* Clickable LIST link inside notepad */
.w95-list-link {
    font-weight: bold;
    color: #000080 !important;
    text-decoration: underline;
    cursor: pointer;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 0 6px #0055ff99, 0 0 14px #0055ff44 !important;
}
.w95-list-link:hover {
    color: #0033cc !important;
    text-shadow: 0 0 8px #0055ffcc, 0 0 18px #0055ff66 !important;
}

/* ── Power button ───────────────────────────────────────────────────────── */
.w95-bezel-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 6px 0;
}
.w95-power-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #555, #2a2a2a);
    border: 1px solid #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #888;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.7), 0 1px 2px rgba(255,255,255,0.08);
    user-select: none;
    transition: color 0.2s, border-color 0.2s;
}
.w95-power-btn:hover { color: #00ff55; border-color: #00ff5566; }
.w95-power-btn.w95-pwrbtn-off { color: #333; border-color: #333; }
.w95-power-led.w95-led-off {
    background: #1a2a1a !important;
    box-shadow: none !important;
}

/* ── CRT shutdown animation ─────────────────────────────────────────────── */
@keyframes crtShutdown {
    0%   { transform: scaleY(1);    filter: brightness(1);   }
    10%  { transform: scaleY(1);    filter: brightness(2.5); }
    50%  { transform: scaleY(0.05); filter: brightness(5);   }
    80%  { transform: scaleY(0.02); filter: brightness(1);   }
    100% { transform: scaleY(0);    filter: brightness(0);   }
}
.w95-screen-inner.crt-shutting-down {
    animation: crtShutdown 0.52s ease-in forwards;
    transform-origin: center;
}
.w95-screen-inner.crt-off {
    transform: scaleY(0);
    filter: brightness(0);
}

/* ── Boot overlay ───────────────────────────────────────────────────────── */
.w95-boot-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 95;
    padding: 16px 20px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00ff44;
    text-shadow: 0 0 5px #00ff44, 0 0 10px #00ff4466;
    display: none;
    flex-direction: column;
    gap: 3px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.w95-boot-line {
    opacity: 0;
    animation: w95BootIn 0.08s ease forwards;
}
@keyframes w95BootIn { to { opacity: 1; } }

/* ── Error dialog ───────────────────────────────────────────────────────── */
.w95-error-dialog { width: 300px; }
.w95-error-body {
    padding: 12px 14px 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #c0c0c0;
}
.w95-error-icon { font-size: 30px; flex-shrink: 0; line-height: 1; }
.w95-error-msg {
    font-size: 11px;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    color: #000 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    line-height: 1.5;
}
.w95-error-footer {
    padding: 4px 10px 10px;
    display: flex;
    justify-content: center;
    background: #c0c0c0;
}
.w95-error-ok {
    background: #c0c0c0;
    border-top: 2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    padding: 3px 0;
    font-size: 11px;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    cursor: pointer;
    width: 80px;
    color: #000 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}
.w95-error-ok:active {
    border-top: 2px solid #666; border-left: 2px solid #666;
    border-bottom: 2px solid #dfdfdf; border-right: 2px solid #dfdfdf;
}

/* ── Floppy copy window ─────────────────────────────────────────────────── */
.w95-floppy-anim {
    font-size: 20px;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 4px;
}
.w95-floppy-label {
    font-size: 11px;
    font-family: 'MS Sans Serif', Arial, sans-serif;
    color: #000 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    margin-bottom: 6px;
    text-align: center;
}
.w95-floppy-track {
    width: 100%;
    height: 14px;
    background: #fff;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    overflow: hidden;
}
.w95-floppy-fill {
    height: 100%;
    background: #000080;
    width: 0%;
    transition: width 0.62s linear;
}

/* Background cycle button */
.w95-bg-btn {
    position: absolute;
    bottom: 36px;
    right: 8px;
    background: #c0c0c0;
    border-top: 2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #000 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0.3px #000 !important;
    padding: 3px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    z-index: 5;
    user-select: none;
}
.w95-bg-btn:active {
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    border-bottom: 2px solid #dfdfdf;
    border-right: 2px solid #dfdfdf;
}

.w95-bg-glow {
    animation: w95BgPulseGlow 2.6s ease-in-out infinite;
}

@keyframes w95BgPulseGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)) drop-shadow(0 0 14px rgba(255,0,180,0.25)); }
    50%      { filter: drop-shadow(0 0 20px rgba(255,255,255,0.85)) drop-shadow(0 0 40px rgba(255,0,180,0.6)); }
}

.w95-bg-glow-red {
    animation: w95BgPulseGlowRed 2.6s ease-in-out infinite;
}

@keyframes w95BgPulseGlowRed {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,40,40,0.35)) drop-shadow(0 0 14px rgba(200,0,0,0.25)); }
    50%      { filter: drop-shadow(0 0 20px rgba(255,60,60,0.9)) drop-shadow(0 0 40px rgba(220,0,0,0.65)); }
}

.w95-bg-glow-gold {
    animation: w95BgPulseGlowGold 2.6s ease-in-out infinite;
}

@keyframes w95BgPulseGlowGold {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,200,80,0.35)) drop-shadow(0 0 14px rgba(255,140,0,0.25)); }
    50%      { filter: drop-shadow(0 0 20px rgba(255,215,120,0.9)) drop-shadow(0 0 40px rgba(255,140,0,0.65)); }
}

/* ── Force all taskbar/chrome text black — overrides site global green ── */
.w95-taskbar, .w95-taskbar *,
.w95-start-btn, .w95-start-btn *,
.w95-tb-btn, .w95-tb-clock,
.w95-menubar, .w95-menubar *,
.w95-explorer-body, .w95-explorer-body *,
.w95-exp-icon, .w95-exp-label {
    color: #000 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0.4px #000 !important;
}
.w95-win-title {
    color: #fff !important;
    -webkit-text-stroke: 0.4px #000 !important;
    text-shadow: 1px 1px 0 #000 !important;
}
.w95-desk-label {
    color: #fff !important;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
    -webkit-text-stroke: 0 !important;
}

/* ── Taskbar ────────────────────────────────────────────────────────────── */
.w95-taskbar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: #c0c0c0;
    border-top: 2px solid #dfdfdf;
    display: flex;
    align-items: center;
    padding: 0 3px;
    gap: 3px;
    z-index: 80;
}
.w95-start-btn {
    background: #c0c0c0;
    border-top: 2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    padding: 1px 8px 1px 6px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}
.w95-start-btn:active {
    border-top: 2px solid #666; border-left: 2px solid #666;
    border-bottom: 2px solid #dfdfdf; border-right: 2px solid #dfdfdf;
}
.w95-tb-sep {
    width: 1px; height: 18px;
    border-left: 1px solid #888; border-right: 1px solid #dfdfdf;
    flex-shrink: 0;
}
.w95-tb-tasks {
    flex: 1;
    display: flex;
    gap: 2px;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}
.w95-tb-btn {
    background: #c0c0c0;
    border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf;
    border-bottom: 1px solid #666; border-right: 1px solid #666;
    padding: 2px 8px;
    font-size: 10px;
    cursor: pointer;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 18px;
    display: flex;
    align-items: center;
    user-select: none;
}
.w95-tb-btn-active {
    border-top: 1px solid #666; border-left: 1px solid #666;
    border-bottom: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf;
    background: #b8b8b8;
}
.w95-tb-clock {
    background: #c0c0c0;
    border-top: 1px solid #888; border-left: 1px solid #888;
    border-bottom: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf;
    padding: 2px 6px;
    font-size: 10px;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

/* Games sub-section — larger popup */
.popup-window.games-popup {
    width: 860px;
    max-width: 96vw;
}

/* Buttons sub-section */
.popup-window.buttons-popup {
    width: 640px;
    max-width: 96vw;
}
.popup-window.buttons-popup .about-section-content {
    max-height: 520px;
    padding: 14px 18px;
}

.buttons-section-header {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 3px;
    margin: 14px 0 10px;
}

.buttons-sub-label {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.35);
    margin: 6px 0 8px;
    text-transform: uppercase;
}

.buttons-gif-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    overflow: visible;
}

.buttons-gif-row img {
    display: block;
    image-rendering: pixelated;
}

.buttons-yellow-divider {
    height: 1px;
    margin: 16px 12px;
    background: #ffdd00;
    animation: btnDividerPulse 1.8s ease-in-out infinite;
}

@keyframes btnDividerPulse {
    0%, 100% { opacity: 0.25; box-shadow: none; }
    50%       { opacity: 1;    box-shadow: 0 0 8px #ffdd00, 0 0 18px #ffdd0055; }
}

.buttons-copy-hint {
    display: block;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    padding: 5px 0;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #ff0080, #ff8800, #ffff00, #00ff88, #00ffff, #8800ff, #ff0080);
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: btnCopyHintGrad 3s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255, 80, 180, 0.55));
    cursor: default;
    user-select: none;
}

.buttons-copy-hint--copied {
    animation: none;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #00ff88;
    background-clip: unset;
    filter: drop-shadow(0 0 8px #00ff88);
}

@keyframes btnCopyHintGrad {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.btn-copy-toast {
    position: fixed;
    transform: translateX(-50%) translateY(0);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 2.5px;
    color: #00ff88;
    background: rgba(0, 8, 0, 0.92);
    border: 1px solid rgba(0, 255, 136, 0.28);
    padding: 6px 18px;
    text-shadow: 0 0 8px #00ff88;
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.14);
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.28s ease, transform 0.35s ease;
}

.btn-copy-toast--up {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(-100% - 12px));
}
.popup-window.games-popup .about-section-content {
    max-height: 620px;
    padding: 14px;
}

/* Hub view — fixed height, no scroll, canvas + nodes layer */
.about-popup-content {
    padding: 0;
    overflow: hidden;
}

.about-hub-content {
    position: relative;
    height: 420px;
    overflow: visible;
}

/* Sub-section view */
.about-section-content {
    max-height: 460px;
    overflow-y: auto;
    padding: 18px 22px;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}

/* lore section needs a fixed height so its absolutely-positioned children are visible */
.about-section-content.lore-section-content {
    height: 460px;
    max-height: 460px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.about-section-content::-webkit-scrollbar { width: 4px; }
.about-section-content::-webkit-scrollbar-track { background: #001a0a; }
.about-section-content::-webkit-scrollbar-thumb { background: #00ff66; }

.about-section-body {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00ff99;
    line-height: 1.9;
    letter-spacing: 0.5px;
}

/* Back button reuses quicknav style */
.about-back-btn {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 2px;
    color: rgba(0,255,120,0.85);
    background: rgba(0,255,120,0.04);
    border: 1px solid rgba(0,255,120,0.45);
    padding: 7px 18px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 6px;
    animation: backBtnPulse 2.4s ease-in-out infinite;
}
.about-back-btn:hover {
    color: #00ff99;
    border-color: rgba(0,255,120,0.8);
    background: rgba(0,255,120,0.10);
    box-shadow: 0 0 18px rgba(0,255,120,0.35);
    animation: none;
}
@keyframes backBtnPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0,255,120,0.15); border-color: rgba(0,255,120,0.35); }
    50%       { box-shadow: 0 0 16px rgba(0,255,120,0.45); border-color: rgba(0,255,120,0.70); }
}
@keyframes backArrow {
    0%        { transform: translateX(0px);   opacity: 1;    }
    40%       { transform: translateX(-6px);  opacity: 0.55; }
    60%       { transform: translateX(-6px);  opacity: 0.55; }
    100%      { transform: translateX(0px);   opacity: 1;    }
}
.back-arrow {
    display: inline-block;
    animation: backArrow 1.8s ease-in-out infinite;
    margin-right: 4px;
}

.gb-popup-content {
    display: flex;
    flex-direction: column;
    height: 580px;
    overflow: hidden;
    padding: 0;
}

/* feed */
.gb-feed {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}
.gb-feed::-webkit-scrollbar { width: 4px; }
.gb-feed::-webkit-scrollbar-track { background: #001a0a; }
.gb-feed::-webkit-scrollbar-thumb { background: #00ff66; }

/* empty state */
.gb-empty {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: #003a1a;
    text-shadow: 0 0 8px rgba(0,255,100,0.6), 0 0 16px rgba(0,255,100,0.3);
    animation: gbEmptyPulse 2.4s ease-in-out infinite;
    margin: 8px 0;
}
@keyframes gbEmptyPulse {
    0%,100% { opacity:0.5; text-shadow:0 0 6px rgba(0,255,100,0.5); }
    50%      { opacity:0.9; text-shadow:0 0 12px rgba(0,255,100,0.9), 0 0 24px rgba(0,255,100,0.4); }
}

/* comment */
.gb-comment {
    margin-bottom: 4px;
}
.gb-comment-header {
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    line-height: 1.8;
    margin-bottom: 1px;
}
.gb-id    { opacity: 0.3; font-size: 10px; }
.gb-date  { color: rgba(0,255,120,0.55); }
.gb-name  { color: #00ff99; }
.gb-sep   { opacity: 0.45; }
.gb-na    { opacity: 0.4; color: #00ff99; font-family: 'Courier New', monospace; font-size: 10.5px; }
.gb-site-link {
    color: #00ffff;
    text-decoration: none;
    opacity: 0.75;
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
}
.gb-site-link:hover { opacity: 1; text-decoration: underline; }

.gb-comment-body {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #aaffcc;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin-left: 2px;
}
.gb-divider {
    width: 100%;
    height: 1px;
    background: rgba(0,255,120,0.12);
    margin: 6px 0 8px;
}

.gb-reply-tag {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #ffcc33;
    background: rgba(255,204,51,0.1);
    border: 1px solid rgba(255,204,51,0.4);
    padding: 1px 6px;
    margin-right: 4px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255,204,51,0.5);
}
.gb-reply-tag::before {
    content: "\21B3 ";
    opacity: 0.8;
}

/* reactions */
.gb-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 2px 2px;
}
.gb-reaction-btn {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1;
    background: #000;
    border: 1px solid rgba(0,255,100,0.18);
    color: rgba(0,255,120,0.55);
    padding: 3px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.gb-reaction-btn:hover {
    border-color: rgba(0,255,100,0.5);
    background: #001a0a;
    transform: translateY(-1px);
}
.gb-reaction-btn:active { transform: translateY(0); }
.gb-reaction-btn.gb-reaction-active {
    border-color: #00ff66;
    background: #001f0f;
    color: #00ff99;
    box-shadow: 0 0 6px rgba(0,255,100,0.25);
}
.gb-reaction-btn.gb-reaction-busy {
    pointer-events: none;
    opacity: 0.6;
}
.gb-reaction-count {
    font-size: 9.5px;
    opacity: 0.85;
    min-width: 6px;
    text-align: left;
}

/* form */
.gb-form {
    border-top: 1px solid rgba(0,255,120,0.2);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,255,40,0.02);
}
.gb-form-row {
    display: flex;
    gap: 14px;
}
.gb-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gb-label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(0,255,120,0.6);
}
.gb-input, .gb-textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,255,120,0.3);
    color: #00ff99;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 3px 2px;
    outline: none;
    width: 100%;
    font-style: italic;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s;
    resize: none;
}
.gb-input::placeholder, .gb-textarea::placeholder {
    font-style: italic;
    opacity: 0.6;
    color: #00ff99;
}
.gb-textarea {
    border: 1px solid rgba(0,255,120,0.3);
    padding: 6px 8px;
    min-height: 56px;
}
.gb-hint {
    font-family: 'Courier New', monospace;
    font-size: 9px;
    color: rgba(255,220,80,0.7);
    letter-spacing: 1px;
    animation: gbHintPulse 2.8s ease-in-out infinite;
}

@keyframes gbHintPulse {
    0%, 100% { text-shadow: 0 0 4px rgba(255,210,40,0.4), 0 0 10px rgba(255,190,0,0.2); }
    50%       { text-shadow: 0 0 7px rgba(255,230,80,0.8), 0 0 16px rgba(255,200,20,0.4); }
}
.gb-submit {
    align-self: flex-start;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00ff99;
    letter-spacing: 1.5px;
    border: 1px solid rgba(0,255,120,0.5);
    background: transparent;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.gb-submit:hover {
    background: rgba(0,255,120,0.1);
    box-shadow: 0 0 10px rgba(0,255,120,0.3);
}
/* ── Viewport scaling for smaller resolutions ─────────────────────────── */
@media screen and (max-height: 1100px) {
    body {
        zoom: 0.82;
        overflow-x: hidden;
    }
}

@media screen and (max-height: 900px) {
    body {
        zoom: 0.74;
    }
}

/* ── yt-dlp tutorial card ─────────────────────────────────── */
.tut-card-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    user-select: none;
}

.tut-note {
    font-size: 10px;
    color: rgba(0,255,120,0.4);
    letter-spacing: 1.5px;
    margin: 4px 0 10px;
}

.tut-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tut-script-cat {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tut-script-cat + .tut-script-cat {
    margin-top: 22px;
}

.tut-script-cat-label {
    font-size: 11px;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px dashed rgba(0,255,120,0.3);
    padding-bottom: 4px;
    margin-bottom: -2px;
    text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 12px rgba(0,255,120,1), 0 0 24px rgba(0,255,120,0.8), 0 0 36px rgba(0,255,120,0.5);
}

.tut-script-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 2px 0 10px;
}

.tut-script-nav-item {
    background: rgba(0,255,120,0.05);
    border: 1px solid rgba(0,255,120,0.3);
    color: #00ff99;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.tut-script-nav-item:hover,
.tut-script-nav-item:hover .tut-script-nav-letter {
    background: rgba(0,255,120,0.14);
    border-color: rgba(0,255,120,0.7);
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 12px rgba(0,255,120,1), 0 0 24px rgba(0,255,120,0.8), 0 0 36px rgba(0,255,120,0.5);
}

.tut-script-nav-letter {
    display: inline-block;
    animation: tutNavShimmy var(--dur, 3.2s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

@keyframes tutNavShimmy {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(var(--ox,2px), var(--oy,-2px)); }
    50%  { transform: translate(0,0); }
    75%  { transform: translate(calc(var(--ox,2px) * -1), var(--oy,-2px)); }
    100% { transform: translate(0,0); }
}

.tut-step {
    border-left: 2px solid rgba(0,255,120,0.35);
    padding: 8px 10px 8px 12px;
    background: rgba(0,255,120,0.03);
    transition: border-color 0.2s, background 0.2s;
}
.tut-step:hover {
    border-left-color: rgba(0,255,120,0.7);
    background: rgba(0,255,120,0.055);
}

.tut-step-label {
    font-size: 12px;
    color: #00ff99;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0,255,120,0.4);
}

.tut-step-text {
    font-size: 12px;
    color: rgba(0,255,120,0.82);
    line-height: 1.7;
}

/* PATH warning — must not be missed */
.tut-path-warning {
    margin-top: 8px;
    font-size: 12px;
    font-weight: bold;
    color: #ffee00;
    background: rgba(255,220,0,0.07);
    border: 1px solid rgba(255,220,0,0.45);
    border-left: 3px solid #ffee00;
    padding: 6px 10px;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-shadow: 0 0 8px rgba(255,220,0,0.5);
    animation: tutWarnPulse 2.8s ease-in-out infinite;
}
@keyframes tutWarnPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255,220,0,0.15); }
    50%       { box-shadow: 0 0 12px rgba(255,220,0,0.38); }
}

.tut-link {
    display: inline-block;
    margin-top: 7px;
    font-size: 11px;
    color: #00ff99;
    text-decoration: none;
    border: 1px solid rgba(0,255,120,0.3);
    padding: 3px 9px;
    letter-spacing: 1px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tut-link:hover {
    background: rgba(0,255,120,0.12);
    color: #fff;
    border-color: rgba(0,255,120,0.7);
}

.tut-cmd {
    margin-top: 7px;
    font-size: 11px;
    color: #00ff66;
    background: rgba(0,255,100,0.06);
    border: 1px solid rgba(0,255,120,0.2);
    padding: 5px 10px;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    user-select: all;
    flex: 1;
}

.tut-cmd-wrap {
    display: flex;
    align-items: stretch;
    margin-top: 7px;
    gap: 0;
}
.tut-cmd-wrap .tut-cmd {
    margin-top: 0;
}

.tut-cmd-copy-btn {
    background: none;
    border: 1px solid rgba(0,255,120,0.2);
    border-left: none;
    color: rgba(0,255,120,0.6);
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 0 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tut-cmd-copy-btn:hover {
    background: rgba(0,255,120,0.1);
    color: #00ff99;
    border-color: rgba(0,255,120,0.55);
}

.tut-step-note {
    margin-top: 5px;
    font-size: 10px;
    color: rgba(0,255,120,0.45);
    letter-spacing: 1px;
}

.tut-download-btn {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: #00ff99;
    text-decoration: none;
    border: 1px solid rgba(0,255,120,0.5);
    padding: 5px 14px;
    letter-spacing: 1.5px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tut-download-btn:hover {
    background: rgba(0,255,120,0.1);
    color: #fff;
    border-color: #00ff99;
    box-shadow: 0 0 10px rgba(0,255,120,0.3);
}

/* "THIS" clickable word in step 04 */
.tut-this {
    font-weight: bold;
    color: #00ff99;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), text-shadow 0.15s;
    text-shadow: 0 0 6px rgba(0,255,120,0.4);
}
.tut-this:hover {
    transform: scale(1.18);
    text-shadow: 0 0 12px rgba(0,255,120,0.85), 0 0 24px rgba(0,255,120,0.4);
}
.tut-this:active {
    transform: scale(1.06);
}

/* spoiler toggle */
.tut-spoiler {
    margin-top: 10px;
}

.tut-spoiler-btn {
    background: none;
    border: 1px solid rgba(0,255,120,0.28);
    color: #00ff99;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tut-spoiler-btn:hover {
    background: rgba(0,255,120,0.07);
    border-color: rgba(0,255,120,0.55);
}

.tut-spoiler-arrow {
    font-size: 9px;
    flex-shrink: 0;
}

.tut-spoiler-hint {
    font-size: 9px;
    color: rgba(0,255,120,0.38);
    margin-left: auto;
    letter-spacing: 1px;
}

/* scoped to scripts.js entries only — leaves the yt-dlp_guide hint untouched */
.tut-script-cat .tut-spoiler-hint {
    color: rgba(255,170,40,0.75);
}

.tut-script-cat .tut-spoiler-bracket {
    color: #ffffff;
}

.tut-spoiler-body {
    border: 1px solid rgba(0,255,120,0.14);
    border-top: none;
    padding: 0;
}

/* code block — selectable, contained */
.tut-selectable {
    user-select: text !important;
}
.tut-selectable * {
    user-select: text !important;
}

/* copy button inside paste bar */
.tut-copy-btn {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.85);
    font-family: 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 1px 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.tut-copy-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.85);
}
.tut-copy-icon {
    color: rgba(0,255,120,0.85);
}
.tut-copy-btn-success {
    color: #00ff99 !important;
    border-color: rgba(0,255,120,0.7) !important;
    background: rgba(0,255,120,0.08) !important;
}

/* ── tutorial gif block ───────────────────────────────────── */
.tut-gif-wrap {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tut-gif-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(0,255,120,0.65);
    text-shadow:
        0 0 6px rgba(0,255,120,0.5),
        0 0 14px rgba(0,255,120,0.25);
    text-align: center;
    user-select: none;
}

.tut-gif-img {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,255,120,0.35);
    box-shadow: 0 0 10px rgba(0,255,120,0.12);
}

/* ── project readme block ─────────────────────────────────── */
.proj-readme {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(0,255,120,0.72);
    line-height: 1.75;
    white-space: pre-wrap;
    padding: 8px 0;
}

.proj-readme-bold {
    font-weight: bold;
    color: #00ff99;
    font-size: 12px;
}

.proj-readme-italic {
    color: rgba(0,255,120,0.55);
    font-style: italic;
}

.proj-readme-code {
    display: block;
    margin: 8px 0;
    padding: 8px 12px;
    background: rgba(0,255,100,0.04);
    border: 1px solid rgba(0,255,120,0.18);
    border-left: 2px solid rgba(0,255,120,0.45);
    font-family: 'Courier New', monospace;
    font-size: 10.5px;
    color: rgba(0,255,120,0.8);
    white-space: pre;
    line-height: 1.65;
}

/* ── project card video preview ───────────────────────────── */
.proj-card-video {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,255,120,0.35);
    box-shadow: 0 0 10px rgba(0,255,120,0.12);
    margin-top: 4px;
}
/* ════════════════════════════════════════════════════════════
   n0de_forge — layout generator wizard
   ════════════════════════════════════════════════════════════ */

.forge-card-inner {
    user-select: none;
}

/* progress dots */
.forge-progress {
    display: flex;
    align-items: center;
    margin: 6px 0 4px;
}
.forge-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.forge-dot-mark {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,120,0.35);
    background: transparent;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.forge-dot-label {
    font-family: 'Courier New', monospace;
    font-size: 8.5px;
    letter-spacing: 1px;
    color: rgba(0,255,120,0.35);
    text-transform: uppercase;
    transition: color 0.25s;
}
.forge-dot-active .forge-dot-mark {
    background: #ffee00;
    border-color: #ffee00;
    box-shadow: 0 0 8px rgba(255,220,0,0.6);
}
.forge-dot-active .forge-dot-label {
    color: #ffee00;
}
.forge-dot-done .forge-dot-mark {
    background: #00ff66;
    border-color: #00ff66;
}
.forge-dot-done .forge-dot-label {
    color: rgba(0,255,120,0.65);
}
.forge-dot-line {
    flex: 1;
    height: 1px;
    background: rgba(0,255,120,0.18);
    margin: 0 6px 16px;
}

/* stage container + fade transition */
.forge-stage-wrap {
    min-height: 260px;
}
.forge-stage-fade-in {
    animation: forgeFadeIn 0.32s ease both;
}
@keyframes forgeFadeIn {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* nav buttons */
.forge-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,255,120,0.15);
}
.forge-nav-btn {
    background: none;
    border: 1px solid rgba(0,255,120,0.35);
    color: #00ff99;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.forge-nav-btn:hover {
    background: rgba(0,255,120,0.1);
    border-color: #00ff99;
    box-shadow: 0 0 10px rgba(0,255,120,0.25);
}
.forge-nav-back {
    color: rgba(0,255,120,0.6);
    border-color: rgba(0,255,120,0.2);
}
.forge-nav-next {
    margin-left: auto;
}

/* generic field/label */
.forge-label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(0,255,120,0.55);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.forge-label-sub {
    text-transform: none;
    letter-spacing: 0.5px;
    color: rgba(0,255,120,0.3);
}

/* section dividers — yellow pulse-glow bar, used to segregate effect groups */
.forge-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.forge-section-bar {
    width: 3px;
    align-self: stretch;
    min-height: 14px;
    background: #ffee00;
    box-shadow: 0 0 6px rgba(255,220,0,0.6);
    flex-shrink: 0;
    animation: forgeSectionPulse 2.6s ease-in-out infinite;
}
@keyframes forgeSectionPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255,220,0,0.35); opacity: 0.75; }
    50%       { box-shadow: 0 0 10px rgba(255,220,0,0.85), 0 0 18px rgba(255,220,0,0.3); opacity: 1; }
}
.forge-section-title {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #ffee00;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255,220,0,0.3);
}
.forge-section-title .forge-label-sub {
    color: rgba(255,220,0,0.45);
}

.forge-field {
    margin-bottom: 4px;
}
.forge-text-input {
    width: 100%;
    background: rgba(0,255,120,0.04);
    border: 1px solid rgba(0,255,120,0.3);
    color: #00ff99;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 7px 10px;
    letter-spacing: 0.5px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.forge-text-input:focus {
    outline: none;
    border-color: #00ff99;
    box-shadow: 0 0 8px rgba(0,255,120,0.25);
}

/* layout picker */
.forge-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.forge-layout-card {
    background: rgba(0,255,120,0.03);
    border: 1px solid rgba(0,255,120,0.2);
    padding: 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Courier New', monospace;
    color: #00ff99;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.forge-layout-card:hover {
    border-color: rgba(0,255,120,0.55);
    background: rgba(0,255,120,0.06);
    transform: translateY(-1px);
}
.forge-layout-card.forge-layout-active {
    border-color: #00ff99;
    background: rgba(0,255,120,0.1);
    box-shadow: 0 0 10px rgba(0,255,120,0.25);
}
.forge-layout-thumb {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,255,120,0.15);
}
.forge-layout-thumb svg {
    width: 100%;
    height: auto;
    display: block;
}
.forge-layout-thumb svg rect {
    fill: rgba(0,255,120,0.5);
}
.forge-layout-card.forge-layout-active .forge-layout-thumb svg rect {
    fill: #00ff99;
}
.forge-layout-name {
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: bold;
}
.forge-layout-blurb {
    font-size: 9.5px;
    line-height: 1.5;
    color: rgba(0,255,120,0.5);
}

/* colors stage */
.forge-swatch-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.forge-swatch {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0,255,120,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.forge-swatch:hover {
    border-color: #00ff99;
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(0,255,120,0.3);
}
.forge-swatch-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
}
.forge-color-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.forge-color-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.forge-color-field label {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: 1px;
    color: rgba(0,255,120,0.45);
    text-transform: uppercase;
}
.forge-color-input-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.forge-color-input-wrap input[type="color"] {
    width: 32px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(0,255,120,0.3);
    border-right: none;
    background: none;
    cursor: pointer;
}
.forge-hex-input {
    width: 80px;
    background: rgba(0,255,120,0.04);
    border: 1px solid rgba(0,255,120,0.3);
    color: #00ff99;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 0 8px;
    letter-spacing: 0.5px;
}
.forge-hex-input:focus {
    outline: none;
    border-color: #00ff99;
}
.forge-color-preview-bar {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(0,255,120,0.2);
    display: flex;
    gap: 18px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    transition: background 0.15s;
}

.forge-effects-scroll {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
}
.forge-effects-scroll::-webkit-scrollbar { width: 4px; }
.forge-effects-scroll::-webkit-scrollbar-track { background: #001a0a; }
.forge-effects-scroll::-webkit-scrollbar-thumb { background: #00ff66; }

/* effects stage */
.forge-effects-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.forge-effect-row {
    border-bottom: 1px solid rgba(0,255,120,0.08);
    padding: 10px 2px;
}
.forge-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.forge-toggle input[type="checkbox"] {
    display: none;
}
.forge-toggle-track {
    width: 30px;
    height: 16px;
    border-radius: 9px;
    background: rgba(0,255,120,0.12);
    border: 1px solid rgba(0,255,120,0.35);
    position: relative;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s;
}
.forge-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0,255,120,0.55);
    transition: transform 0.18s, background 0.18s;
}
.forge-toggle input:checked + .forge-toggle-track {
    background: rgba(0,255,120,0.25);
    border-color: #00ff99;
}
.forge-toggle input:checked + .forge-toggle-track .forge-toggle-thumb {
    transform: translateX(14px);
    background: #00ff99;
    box-shadow: 0 0 6px rgba(0,255,120,0.6);
}
.forge-effect-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.forge-effect-name {
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    color: #00ff99;
    letter-spacing: 0.8px;
}
.forge-effect-desc {
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    color: rgba(0,255,120,0.45);
}
.forge-charset-sub {
    display: flex;
    gap: 16px;
    margin: 8px 0 0 42px;
}
.forge-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: rgba(0,255,120,0.6);
    letter-spacing: 0.5px;
    cursor: pointer;
}
.forge-radio input {
    accent-color: #00ff99;
}

.forge-matrix-palette-sub {
    align-items: center;
    flex-wrap: wrap;
}
.forge-mini-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,120,0.3);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.forge-mini-swatch:hover {
    transform: scale(1.15);
    border-color: rgba(0,255,120,0.7);
}
.forge-mini-swatch.forge-mini-swatch-active {
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

/* preview / export stage */
.forge-preview-frame-wrap {
    border: 1px solid rgba(0,255,120,0.3);
    box-shadow: 0 0 14px rgba(0,255,120,0.1);
}
.forge-preview-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,255,120,0.06);
    border-bottom: 1px solid rgba(0,255,120,0.2);
}
.forge-preview-bar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,255,120,0.4);
}
.forge-preview-bar-label {
    margin-left: 8px;
    font-family: 'Courier New', monospace;
    font-size: 9.5px;
    letter-spacing: 1px;
    color: rgba(0,255,120,0.55);
}
.forge-preview-iframe {
    width: 100%;
    height: 510px;
    border: none;
    display: block;
    background: #000;
    scrollbar-width: thin;
    scrollbar-color: #00ff66 #001a0a;
    color-scheme: dark;
}

.forge-preview-iframe::-webkit-scrollbar { width: 6px; }
.forge-preview-iframe::-webkit-scrollbar-track { background: #001a0a; }
.forge-preview-iframe::-webkit-scrollbar-thumb { background: #00ff66; border-radius: 0; }
.forge-preview-iframe::-webkit-scrollbar-thumb:hover { background: #00ffaa; }
.forge-output-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.forge-output-actions .tut-download-btn {
    margin-top: 0;
    background: none;
    cursor: pointer;
    font-family: 'Courier New', monospace;
}

/* ── KNIGHTS.log tank/model-swap loading spinner ─────────────
   Shown over the CRT screen during the brief gap between disposing the old
   model and the new one's mesh finishing its GLTFLoader fetch/parse. ────── */
.knights-tank-spinner {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(2, 6, 4, 0.35);
}
.knights-tank-spinner-ring {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 255, 136, 0.2);
    border-top-color: rgba(0, 255, 136, 0.9);
    border-radius: 50%;
    animation: knightsTankSpin 0.8s linear infinite;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
}
@keyframes knightsTankSpin {
    to { transform: rotate(360deg); }
}