/* ═══════════════════════════════════════════════════════════
   LAB THEME — Atmospheric pixel art research facility palette
   Based on reference images with deep blue-greys, dark reds, 
   teal accents, and amber specimen lighting
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Override existing palette */
    --bg: #090D11;
    --green: #53A89B;
    --purple: #33474A;
    --red: #8D2625;
    --cyan: #53A89B;
    --yellow: #916735;
    --text: #ACAAA8;
    --text-dim: #646F81;
    
    /* ═══ BASE COLORS ═══ */
    --lab-bg-base: #090D11;        /* Very dark blue-grey (main BG) */
    --lab-bg-layer1: #0E1216;      /* Slightly lighter layer */
    --lab-bg-layer2: #141A1F;      /* Panel backgrounds */
    
    --lab-charcoal: #201B1D;       /* Dark charcoal grey */
    --lab-steel: #2A2D2F;          /* Steel grey (borders) */
    --lab-metal: #575A5C;          /* Metal highlights */
    --lab-light-metal: #92999B;    /* Bright metal (text, icons) */
    
    /* ═══ ACCENT COLORS ═══ */
    --lab-red-dark: #5F1919;       /* Deep crimson (warnings) */
    --lab-red-bright: #8D2625;     /* Brighter red (alerts, danger) */
    --lab-red-glow: rgba(141, 38, 37, 0.25);  /* Red glow effect */
    
    --lab-teal: #53A89B;           /* Teal (active panels, links) */
    --lab-teal-dark: #33474A;      /* Dark teal (equipment panels) */
    --lab-teal-glow: rgba(83, 168, 155, 0.15); /* Teal glow */
    
    --lab-amber: #916735;          /* Amber/bronze (specimen lighting) */
    --lab-amber-light: #AA8E51;    /* Lighter amber */
    --lab-amber-glow: rgba(145, 103, 53, 0.2); /* Amber glow */
    
    --lab-olive: #494C37;          /* Olive green (inactive states) */
    --lab-slate: #646F81;          /* Blue-grey slate (secondary text) */
    
    /* ═══ FUNCTIONAL COLORS ═══ */
    --text-primary: #ACAAA8;       /* Light grey (main text) */
    --text-secondary: #92999B;     /* Metal grey (secondary) */
    --text-dim: #646F81;           /* Slate (disabled/dim) */
    
    --border-default: #2A2D2F;     /* Steel borders */
    --border-accent: #33474A;      /* Teal borders (panels) */
    --border-danger: #5F1919;      /* Red borders (alerts) */
    
    --glow-red: 0 0 20px var(--lab-red-glow);
    --glow-teal: 0 0 20px var(--lab-teal-glow);
    --glow-amber: 0 0 20px var(--lab-amber-glow);
}

/* ═══ GLOBAL OVERRIDES ═══ */
body {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* ═══ SECTION BACKGROUNDS ═══ */
/* Canvas world.js renders the pixel-art lab background — sections must be transparent */
.section {
    background: transparent !important;
}

/* Scene-bg layers are transparent — canvas handles all room rendering */
.lab-bg,
.section-lab .scene-bg {
    background: transparent !important;
}

/* Specimens — transparent (canvas handles) */
.specimens-bg,
.section-specimens .scene-bg {
    background: transparent !important;
}

/* Observatory — transparent (canvas handles) */
.observatory-bg,
.section-observatory .scene-bg {
    background: transparent !important;
}

/* Team/Investigation Board — transparent (canvas handles) */
.team-bg,
.section-team .scene-bg {
    background: transparent !important;
}

/* Agent Bay — transparent (canvas handles) */
.agent-bg,
.section-agent .scene-bg {
    background: transparent !important;
}

/* Command — transparent (canvas handles) */
.command-bg,
.section-command .scene-bg {
    background: transparent !important;
}

/* ═══ TEXT COLORS ═══ */
.section-title,
h1, h2, h3, h4 {
    color: var(--text-primary) !important;
}

.section-subtitle,
p, span {
    color: var(--text-secondary) !important;
}

/* ═══ LINKS & INTERACTIVE ═══ */
a {
    color: var(--lab-teal) !important;
}

a:hover {
    color: var(--lab-amber-light) !important;
    text-shadow: var(--glow-amber);
}

/* ═══ BORDERS ═══ */
.server-rack,
.ctrl-panel,
.crt-screen,
.track-card,
.panel-row,
.inv-card,
.wl-panel,
.file-card {
    border-color: var(--border-default) !important;
}

.server-rack:hover,
.ctrl-panel:hover {
    border-color: var(--border-accent) !important;
}

/* ═══ PANELS & CARDS ═══ */
.server-rack,
.ctrl-panel,
.crt-screen {
    background: rgba(14, 18, 22, 0.7) !important;
    border: 1px solid var(--border-default) !important;
}

.rack-header,
.panel-header {
    color: var(--lab-teal) !important;
    border-bottom-color: var(--border-accent) !important;
}

/* ═══ RACK CELLS ═══ */
.rack-cell {
    background: var(--lab-charcoal) !important;
    border-color: var(--lab-steel) !important;
}

.rack-cell.active {
    background: var(--lab-teal-dark) !important;
    box-shadow: inset 0 0 8px var(--lab-teal-glow), var(--glow-teal) !important;
}

.rack-cell.buffer {
    background: rgba(32, 27, 29, 0.5) !important;
    opacity: 0.3 !important;
}

/* ═══ CRT SCREENS ═══ */
.crt-screen {
    background: rgba(9, 13, 17, 0.95) !important;
    color: var(--lab-teal) !important;
    text-shadow: 0 0 4px var(--lab-teal-glow) !important;
}

.crt-line.highlight {
    color: var(--lab-amber-light) !important;
}

/* ═══ BUTTONS ═══ */
.panel-btn,
.track-btn,
button:not(.file-card):not(.inv-card) {
    background: var(--lab-steel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--lab-metal) !important;
}

.panel-btn:hover,
.track-btn:hover,
button:not(.file-card):not(.inv-card):hover:not(:disabled) {
    background: var(--lab-teal-dark) !important;
    border-color: var(--lab-teal) !important;
    box-shadow: var(--glow-teal) !important;
}

button:disabled {
    background: var(--lab-charcoal) !important;
    color: var(--text-dim) !important;
    border-color: var(--border-default) !important;
}

/* ═══ TRACK CARDS ═══ */
.track-card {
    background: rgba(20, 26, 31, 0.8) !important;
}

.track-card.active {
    border-color: var(--lab-amber) !important;
    box-shadow: var(--glow-amber) !important;
}

.track-name {
    color: var(--lab-amber-light) !important;
}

/* ═══ INVESTIGATION BOARD ═══ */
.inv-card {
    background: rgba(32, 27, 29, 0.9) !important;
    border-color: var(--lab-steel) !important;
}

.inv-card.evidence {
    border-color: var(--lab-red-dark) !important;
}

.red-string {
    stroke: var(--lab-red-bright) !important;
    filter: drop-shadow(0 0 3px var(--lab-red-glow)) !important;
}

/* ═══ SPECIMEN FLASKS ═══ */
.flask-item {
    border-color: var(--border-default) !important;
}

.flask-item.selected {
    border-color: var(--lab-amber) !important;
    box-shadow: var(--glow-amber) !important;
}

.flask-item.incident {
    border-color: var(--lab-red-bright) !important;
    box-shadow: var(--glow-red) !important;
}

/* ═══ FILE CARDS ═══ */
.file-card {
    background: rgba(20, 26, 31, 0.7) !important;
    border-color: var(--border-default) !important;
}

.file-card:hover {
    border-color: var(--lab-teal) !important;
    box-shadow: var(--glow-teal) !important;
}

.file-status.open {
    color: var(--lab-teal) !important;
}

.file-status.sealed,
.file-status.corrupted,
.file-status.redacted {
    color: var(--lab-red-bright) !important;
}

/* ═══ WHITELIST FORM ═══ */
.wl-panel {
    background: rgba(14, 18, 22, 0.85) !important;
    border: 1px solid var(--border-accent) !important;
}

.wl-panel input[type="text"],
.wl-panel input[type="url"] {
    background: rgba(9, 13, 17, 0.8) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

.wl-panel input:focus {
    border-color: var(--lab-teal) !important;
    box-shadow: 0 0 0 2px var(--lab-teal-glow) !important;
}

/* ═══ BOOT SHIELD ═══ */
.boot-shield {
    background: var(--lab-bg-base) !important;
}

.boot-text {
    color: var(--lab-teal) !important;
    text-shadow: var(--glow-teal) !important;
}

/* ═══ NAVIGATION DOTS ═══ */
.nav-dot {
    background: var(--lab-metal) !important;
}

.nav-dot.active {
    background: var(--lab-teal) !important;
    box-shadow: var(--glow-teal) !important;
}

/* ═══ CRT SCANLINE + VIGNETTE OVERLAY ═══ */
/* Adds subtle research-terminal atmosphere. Non-interactive. */
#crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    mix-blend-mode: multiply;
}
#crt-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.10) 0px,
        rgba(0, 0, 0, 0.10) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.5;
}
#crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.28) 100%
    );
}
/* Slow flicker on the scanline layer */
@keyframes crtFlicker {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.42; }
}
#crt-overlay::before { animation: crtFlicker 6s steps(8) infinite; }
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    #crt-overlay::before { animation: none; }
    .easter-egg { animation: none !important; }
}