/* ═══ UNIFIED BACKGROUND ═══ */
/* Canvas handles all background rendering — scene-bg is transparent overlay */
.section-lab .scene-bg,
.section-specimens .scene-bg,
.section-observatory .scene-bg,
.section-team .scene-bg,
.section-command .scene-bg {
    background: transparent;
}

/* All scene content sits above the canvas */
.scene-bg > * {
    position: relative;
    z-index: 5;
}

/* Logo and social must stay absolute-positioned within their section */
.scene-bg > .band-logo {
    position: absolute;
    z-index: 10;
}
.scene-bg > .social-links {
    position: absolute;
    z-index: 20;
}

/* Remove old gradient overlays — canvas handles everything */
.section-lab .scene-bg::before,
.section-specimens .scene-bg::before,
.section-observatory .scene-bg::before,
.section-team .scene-bg::before,
.section-command .scene-bg::before {
    display: none;
}

/* ═══ CONTINUOUS CEILING PIPE ═══ */
/* Canvas renders all background — hide old CSS elements */
.ceiling-pipe, .ceiling-cable, .floor {
    display: none;
}

/* ═══ SCENE 1: THE LAB ═══ */
/* Background elements hidden — canvas renders them */
.lab-ceiling, .lab-shelves, .test-tube, .tube-liquid, .tube-bubble,
.monitor, .monitor-screen, .monitor-text, .screen-graph, .lab-desk {
    display: none;
}

.lab-ceiling {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: repeating-linear-gradient(90deg, #1a1a2e 0 60px, #12122a 60px 62px);
    border-bottom: 3px solid #2a2a4e;
}

.lab-ceiling::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 30%;
    width: 80px;
    height: 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 2px solid rgba(0, 255, 136, 0.2);
    box-shadow: 0 10px 40px rgba(0, 255, 136, 0.1);
}

.lab-shelves {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 200px;
    height: 300px;
    border: 2px solid #2a2a4e;
    background: repeating-linear-gradient(0deg, transparent 0 58px, #2a2a4e 58px 60px);
}

.test-tube {
    position: absolute;
    width: 20px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.tube-1 { top: 80px; right: 100px; }
.tube-2 { top: 100px; right: 140px; }
.tube-3 { top: 90px; right: 180px; }

.tube-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: var(--green);
    opacity: 0.6;
    animation: bubble-rise 3s ease-in-out infinite;
}

.liquid-purple { background: var(--purple); }
.liquid-red { background: var(--red); }

.tube-bubble {
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: bubble-float 2s ease-in-out infinite;
}

.monitor {
    position: absolute;
    width: 120px;
    height: 80px;
    background: #111;
    border: 3px solid #333;
    border-radius: 4px;
}

.monitor-1 { bottom: 120px; left: 80px; }
.monitor-2 { bottom: 140px; left: 220px; }

.monitor-screen {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 4px;
    background: #0a1a0a;
    border: 1px solid var(--green);
    overflow: hidden;
}

.monitor-text::after {
    content: '> ANALYZING...\A> SPECIMEN: HC-001\A> STATUS: ACTIVE';
    white-space: pre;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--green);
    padding: 4px;
    display: block;
    animation: type-text 4s steps(40) infinite;
}

.screen-graph {
    background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 255, 136, 0.1) 8px 9px),
                repeating-linear-gradient(0deg, transparent 0 8px, rgba(0, 255, 136, 0.1) 8px 9px);
}

.screen-graph::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 5px;
    right: 5px;
    height: 40px;
    background: linear-gradient(90deg, 
        transparent 0%, var(--green) 10%, transparent 15%,
        var(--green) 25%, transparent 30%, var(--green) 45%,
        transparent 50%, var(--green) 60%, transparent 65%,
        var(--green) 75%, transparent 80%, var(--green) 90%);
    opacity: 0.8;
    animation: graph-scroll 3s linear infinite;
}

.lab-desk {
    position: absolute;
    bottom: 60px;
    left: 60px;
    width: 300px;
    height: 8px;
    background: #2a2a4e;
    border: 1px solid #3a3a5e;
}

/* ═══ SCENE 2: SPECIMENS — see specimens.css ═══ */

/* ═══ SCENE 3: OBSERVATORY ═══ */
/* Background elements hidden — canvas renders them */
.stars-field, .pixel-star, .telescope, .planet {
    display: none;
}
.observatory-bg {
    /* base handled by unified bg above */
}

/* Add subtle glow that hints at sky opening up */
.observatory-bg::before {
    /* override unified ::before with deeper space tint that bleeds in from left */
}

.stars-field { position: absolute; inset: 0; }

.pixel-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    animation: star-twinkle 3s ease-in-out infinite;
}

.s1 { top: 10%; left: 15%; animation-delay: 0s; }
.s2 { top: 20%; left: 45%; animation-delay: 0.5s; width: 3px; height: 3px; }
.s3 { top: 8%; left: 70%; animation-delay: 1s; }
.s4 { top: 35%; left: 25%; animation-delay: 1.5s; width: 2px; height: 2px; }
.s5 { top: 15%; left: 85%; animation-delay: 2s; }
.s6 { top: 45%; left: 10%; animation-delay: 0.3s; width: 3px; height: 3px; }
.s7 { top: 30%; left: 55%; animation-delay: 0.8s; width: 2px; height: 2px; }
.s8 { top: 5%; left: 35%; animation-delay: 1.2s; }
.s9 { top: 50%; left: 80%; animation-delay: 1.8s; width: 3px; height: 3px; }
.s10 { top: 25%; left: 92%; animation-delay: 2.2s; width: 2px; height: 2px; }
.s11 { top: 40%; left: 65%; animation-delay: 0.6s; }
.s12 { top: 12%; left: 50%; animation-delay: 1.4s; width: 2px; height: 2px; }

.telescope {
    position: absolute;
    bottom: 100px;
    right: 100px;
    width: 60px;
    height: 120px;
    z-index: 5;
}

.telescope::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 80px;
    background: #444;
    border: 1px solid #555;
}

.telescope::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 24px;
    background: #333;
    border: 2px solid #555;
    border-radius: 4px;
    transform: rotate(-30deg);
    transform-origin: right center;
}

.planet {
    position: absolute;
    top: 15%;
    right: 20%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--purple), #2a0a4a);
    box-shadow: 0 0 30px rgba(123, 47, 255, 0.3), inset -10px -10px 20px rgba(0, 0, 0, 0.5);
    animation: planet-rotate 20s linear infinite;
}

.planet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    right: -20px;
    height: 8px;
    background: rgba(123, 47, 255, 0.3);
    border-radius: 50%;
    transform: translateY(-50%) rotateX(70deg);
}

/* Classified research files */
.files-subtitle {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, 74vw);
    margin: 0;
    z-index: 10;
    color: rgba(232, 232, 240, 0.72);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
}

.classified-files {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(860px, 88vw);
    display: grid;
    grid-template-columns: 230px 1fr 170px;
    gap: 18px;
    align-items: center;
    z-index: 10;
}

.file-terminal,
.warning-monitor,
.research-file {
    position: relative;
    background: rgba(5, 8, 8, 0.88);
    border: 1px solid rgba(110, 255, 165, 0.28);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}

.file-terminal {
    height: 206px;
    padding: 10px;
}

.terminal-bar {
    height: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(160, 255, 190, 0.88);
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(110, 255, 165, 0.22);
}

.terminal-bar span {
    width: 6px;
    height: 6px;
    background: rgba(110, 255, 165, 0.35);
}

.terminal-bar strong {
    margin-left: auto;
    font-weight: 400;
}

.terminal-screen {
    padding-top: 12px;
    overflow: hidden;
}

.terminal-screen p {
    margin: 0 0 9px;
    color: rgba(132, 255, 164, 0.76);
    font-family: var(--font-pixel);
    font-size: 7px;
    line-height: 1.7;
    letter-spacing: 0.8px;
    animation: terminal-flicker 4s steps(2) infinite;
}

.terminal-cursor {
    animation: cursor-blink 0.8s steps(1) infinite;
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.research-file {
    min-height: 112px;
    padding: 26px 16px 14px;
    color: var(--text);
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.research-file::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(110, 255, 165, 0.035) 9px 10px);
    opacity: 0.7;
    pointer-events: none;
}

.research-file:hover {
    transform: translateY(-3px);
    border-color: rgba(190, 255, 160, 0.72);
    background: rgba(8, 18, 12, 0.94);
}

.file-tab {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 8px 4px;
    background: rgba(110, 255, 165, 0.16);
    color: rgba(190, 255, 205, 0.94);
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: 1px;
}

.file-stamp {
    position: absolute;
    top: 8px;
    right: 10px;
    color: rgba(255, 85, 85, 0.78);
    border: 1px solid rgba(255, 85, 85, 0.42);
    padding: 3px 6px;
    font-family: var(--font-pixel);
    font-size: 6px;
    letter-spacing: 1px;
    transform: rotate(-7deg);
    animation: stamp-jitter 5s steps(1) infinite;
}

.research-file h3 {
    position: relative;
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1.5px;
}

.research-file p {
    position: relative;
    margin: 0;
    color: rgba(232, 232, 240, 0.7);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0.5px;
}

.file-lines {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 10px;
    display: flex;
    gap: 5px;
}

.file-lines span {
    display: block;
    height: 2px;
    flex: 1;
    background: rgba(110, 255, 165, 0.16);
}

.file-corrupt {
    border-color: rgba(255, 205, 80, 0.34);
}

.file-corrupt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    height: 2px;
    background: rgba(255, 255, 255, 0.65);
    animation: file-glitch 3.2s steps(1) infinite;
}

.file-redacted p::after {
    content: '';
    display: block;
    width: 72%;
    height: 8px;
    margin-top: 7px;
    background: #050505;
    border: 1px solid rgba(110, 255, 165, 0.16);
}

.warning-monitor {
    height: 206px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.monitor-eye {
    width: 74px;
    height: 38px;
    background: #050805;
    border: 1px solid rgba(110, 255, 165, 0.45);
    position: relative;
    overflow: hidden;
}

.monitor-eye::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 13px;
    height: 10px;
    background: rgba(214, 255, 99, 0.88);
    animation: eye-watch 5s steps(1) infinite;
}

.monitor-eye::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 31px;
    width: 12px;
    height: 18px;
    background: #050805;
    animation: eye-pupil 5s steps(1) infinite;
}

.monitor-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.monitor-copy strong {
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-pixel);
    font-size: 10px;
    letter-spacing: 1px;
}

.monitor-copy span {
    color: rgba(232, 232, 240, 0.62);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.6px;
}

@keyframes terminal-flicker {
    0%, 92%, 100% { opacity: 1; transform: translateX(0); }
    93% { opacity: 0.55; transform: translateX(1px); }
    94% { opacity: 0.9; transform: translateX(-1px); }
}

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

@keyframes stamp-jitter {
    0%, 89%, 100% { transform: rotate(-7deg) translate(0, 0); }
    90% { transform: rotate(-7deg) translate(1px, -1px); }
    91% { transform: rotate(-7deg) translate(-1px, 1px); }
}

@keyframes file-glitch {
    0%, 88%, 100% { opacity: 0; transform: translateX(0); }
    89% { opacity: 1; transform: translateX(-8px); }
    90% { opacity: 0.2; transform: translateX(6px); }
    91% { opacity: 0.8; transform: translateX(0); }
}

@keyframes eye-watch {
    0%, 35%, 100% { transform: translateX(0); }
    36%, 62% { transform: translateX(-6px); }
    63%, 84% { transform: translateX(7px); }
}

@keyframes eye-pupil {
    0%, 35%, 100% { transform: translateX(0); }
    36%, 62% { transform: translateX(-9px); }
    63%, 84% { transform: translateX(10px); }
}

/* ═══ SCENE 4: TEAM (Investigation Board) ═══ */
.team-bg {
    position: relative;
    overflow: hidden;
    background: #0c0906;
}

.inv-board {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Board surface - dark cork with industrial texture */
.board-surface {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(60,40,15,0.08) 1px, transparent 1px),
        radial-gradient(circle at 60% 70%, rgba(60,40,15,0.06) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(60,40,15,0.07) 1px, transparent 1px),
        radial-gradient(ellipse at 15% 75%, rgba(80,35,10,0.12) 0%, transparent 25%),
        radial-gradient(ellipse at 70% 15%, rgba(60,25,5,0.10) 0%, transparent 20%),
        radial-gradient(ellipse at 85% 65%, rgba(50,20,5,0.08) 0%, transparent 30%),
        linear-gradient(180deg, #161008 0%, #100c06 50%, #0a0704 100%);
    background-size: 3px 3px, 5px 5px, 4px 4px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

.board-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

.board-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 10%, rgba(140,100,40,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
    z-index: 2;
}

.red-strings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

/* Legacy SVG string styles removed — now canvas-driven */

.inv-lamp {
    position: absolute;
    top: 5%;
    right: 6%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ff3030, #aa1010);
    box-shadow: 0 0 20px rgba(200,20,20,0.6), 0 0 50px rgba(200,20,20,0.2);
    z-index: 20;
    animation: lamp-blink 3s ease-in-out infinite;
}
@keyframes lamp-blink {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 15px rgba(200,20,20,0.4); }
    50% { opacity: 1; box-shadow: 0 0 25px rgba(200,20,20,0.7), 0 0 60px rgba(200,20,20,0.2); }
}

/* Push Pins */
.pin {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.pin-red { background: radial-gradient(circle at 35% 35%, #ee3030, #8a1010); }
.pin-brass { background: radial-gradient(circle at 35% 35%, #c8a040, #6a5020); }
.pin-yellow { background: radial-gradient(circle at 35% 35%, #e8c832, #8a7a10); }
.pin-white { background: radial-gradient(circle at 35% 35%, #ddd, #888); }
.pin-grey { background: radial-gradient(circle at 35% 35%, #888, #444); }

/* Case Header */
.inv-case-header {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%) rotate(-0.5deg);
    background: #1e1810;
    border: 1px solid #3a2e1c;
    padding: 8px 24px 10px;
    text-align: center;
    z-index: 10;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.6);
    clip-path: polygon(1% 0%, 99% 1%, 100% 3%, 99% 97%, 98% 100%, 2% 99%, 0% 97%, 1% 2%);
}
.inv-case-header h2 {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: #c9a84c;
    letter-spacing: 3px;
    margin: 4px 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.inv-case-header p {
    font-family: var(--font-pixel);
    font-size: 6px;
    color: #6a5a3a;
    letter-spacing: 2px;
    margin: 2px 0 0;
}
.case-stamp {
    font-family: var(--font-pixel);
    font-size: 5px;
    letter-spacing: 2px;
    color: #4a6a4a;
    border: 1px solid #3a5a3a;
    padding: 1px 6px;
    display: inline-block;
}
.stamp-red { color: #8a3030; border-color: #6a2020; }

/* Timeline */
.inv-timeline {
    position: absolute;
    top: 14%;
    left: 8%;
    right: 15%;
    height: 30px;
    z-index: 10;
}
.inv-timeline .pin { left: 5%; top: -4px; }
.timeline-bar {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(20,16,10,0.8);
    border: 1px solid #2a2218;
    padding: 4px 0;
}
.tl-line {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: #3a3020;
}
.tl-mark {
    position: absolute;
    top: 3px;
    font-family: var(--font-pixel);
    font-size: 5px;
    color: #5a4a2a;
    letter-spacing: 1px;
    transform: translateX(-50%);
}
.tl-active { color: #c9a84c; }
.tl-redacted { color: #8a3030; }
.tl-incident {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c8a020;
    box-shadow: 0 0 6px rgba(200,160,30,0.4);
}
.tl-incident.incident-major {
    background: #cc2020;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px rgba(200,20,20,0.5);
}

/* Suspect Cards */
.inv-card {
    position: absolute;
    z-index: 12;
    cursor: pointer;
    transition: box-shadow 200ms ease, filter 200ms ease;
    outline: none;
    background: #161008;
    border: 1px solid #2a2218;
    box-shadow: 3px 4px 12px rgba(0,0,0,0.6);
}
.inv-card:hover, .inv-card:focus-visible {
    box-shadow: 0 6px 24px rgba(80,40,10,0.4);
    filter: brightness(1.15);
    z-index: 30;
}
.inv-card-main {
    top: 26%;
    left: calc(50% - 70px);
    transform: rotate(-1deg);
    width: 140px;
    height: 185px;
}
.inv-card-secondary {
    top: 24%;
    right: 10%;
    width: 110px;
    height: 150px;
    transform: rotate(2deg);
}
.inv-card-tertiary {
    top: 50%;
    left: 8%;
    width: 120px;
    height: 160px;
    transform: rotate(-2.5deg);
}
.inv-card-unknown {
    bottom: 12%;
    right: 15%;
    width: 90px;
    height: 120px;
    transform: rotate(1.5deg);
    border-style: dashed;
    border-color: #3a3020;
    cursor: default;
}

.card-mugshot {
    width: 100%;
    height: 65%;
    background-size: cover;
    background-position: center 20%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-bottom: 1px solid #2a1e10;
    position: relative;
    overflow: hidden;
}
.mugshot-overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0px, transparent 1px, transparent 2px),
        linear-gradient(180deg, transparent 80%, rgba(0,0,0,0.3) 100%);
}
.mugshot-silhouette {
    background: #0a0806 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.question-mark {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: #3a3020;
    text-shadow: 0 0 10px rgba(200,20,20,0.3);
}

.av-1 { background-image: url('../images/lead-researcher.png'); }
.av-2 { background-image: url('../images/prof-axiom.png'); }
.av-3 { background-image: url('../images/agent-null.png'); }

.card-info {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.card-name {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: #c9a84c;
    letter-spacing: 2px;
}
.card-role {
    font-family: var(--font-body);
    font-size: 10px;
    color: #5a4a32;
}
.card-id {
    font-family: var(--font-pixel);
    font-size: 5px;
    color: #3a3020;
    letter-spacing: 1px;
}
.card-annotation {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    font-family: var(--font-pixel);
    font-size: 5px;
    letter-spacing: 1px;
    color: #cc2020;
    background: rgba(12,8,4,0.9);
    padding: 2px 6px;
    border: 1px solid #6a2020;
    white-space: nowrap;
}
.annotation-yellow { color: #c8a020; border-color: #6a5a10; }
.annotation-green { color: #3a8a3a; border-color: #2a5a2a; }
.card-circle-mark {
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(180,30,30,0.5);
    border-radius: 50%;
    pointer-events: none;
}

/* Newspaper Clipping */
.inv-clipping {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 130px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #1c1810 0%, #201a10 50%, #1a1408 100%);
    border: 1px solid #2a2418;
    transform: rotate(1.5deg);
    z-index: 10;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
}
.clip-headline {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: #a08850;
    letter-spacing: 1px;
    margin-bottom: 3px;
    border-bottom: 1px solid #2a2218;
    padding-bottom: 3px;
}
.clip-subhead {
    font-family: var(--font-body);
    font-size: 8px;
    color: #6a5a3a;
    margin-bottom: 5px;
    line-height: 1.3;
}
.clip-body { display: flex; flex-direction: column; gap: 3px; }
.clip-line { display: block; height: 1.5px; background: #2a2418; width: 100%; }
.clip-line.short { width: 55%; }
.clip-date {
    font-family: var(--font-pixel);
    font-size: 4px;
    color: #4a3e28;
    margin-top: 5px;
    letter-spacing: 1px;
}
.clip-highlight {
    position: absolute;
    top: 8px; left: 6px; right: 6px;
    height: 14px;
    background: rgba(200,180,40,0.06);
    pointer-events: none;
}

/* Handwritten Note */
.inv-note {
    position: absolute;
    z-index: 10;
    padding: 10px 12px;
    background: #1a1610;
    border: 1px solid #2a2418;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
}
.note-1 {
    bottom: 18%;
    left: 30%;
    width: 135px;
    transform: rotate(1deg);
}
.inv-note p {
    font-family: var(--font-body);
    font-size: 9px;
    color: #7a6a4a;
    margin: 0;
    font-style: italic;
    line-height: 1.5;
}
.note-sig {
    font-family: var(--font-body);
    font-size: 8px;
    color: #4a3e28;
    display: block;
    text-align: right;
    margin-top: 4px;
}

/* Sticky Notes */
.inv-sticky {
    position: absolute;
    z-index: 14;
    width: 75px;
    padding: 8px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
.sticky-1 {
    top: 38%;
    right: 5%;
    background: rgba(180,160,40,0.12);
    border: 1px solid rgba(180,160,40,0.2);
    transform: rotate(3deg);
}
.sticky-2 {
    bottom: 28%;
    left: 52%;
    transform: rotate(-2deg);
}
.sticky-pink {
    background: rgba(180,60,80,0.1);
    border: 1px solid rgba(180,60,80,0.15);
}
.inv-sticky p {
    font-family: var(--font-body);
    font-size: 8px;
    color: #8a7a4a;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
}
.sticky-pink p { color: #9a5a5a; }

/* Redacted Document */
.inv-document {
    position: absolute;
    z-index: 10;
    padding: 10px 12px;
    background: #141008;
    border: 1px solid #2a2218;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.5);
}
.doc-classified {
    bottom: 6%;
    right: 5%;
    width: 120px;
    transform: rotate(-1.5deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 96% 93%, 90% 89%, 84% 94%, 76% 90%, 68% 96%, 60% 91%, 52% 95%, 44% 90%, 36% 94%, 28% 89%, 20% 95%, 12% 91%, 6% 94%, 0% 90%);
}
.doc-letterhead {
    font-family: var(--font-pixel);
    font-size: 5px;
    color: #6a5a3a;
    letter-spacing: 1px;
    margin-bottom: 8px;
    border-bottom: 1px solid #2a2218;
    padding-bottom: 4px;
}
.doc-lines { display: flex; flex-direction: column; gap: 4px; }
.dl { display: block; height: 2px; background: #222018; width: 100%; }
.dl.short { width: 55%; }
.dl.redacted { background: #3a1a1a; height: 3px; }
.doc-stamp-overlay {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-family: var(--font-pixel);
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(160,30,30,0.4);
    border: 2px solid rgba(160,30,30,0.3);
    padding: 3px 10px;
    pointer-events: none;
}

/* Polaroid Evidence Photos */
.inv-polaroid {
    position: absolute;
    z-index: 11;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.6);
    transition: transform 0.2s, box-shadow 0.2s;
}
.inv-polaroid[data-evidence]:hover {
    transform: scale(1.15) rotate(0deg);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), 2px 3px 14px rgba(0,0,0,0.8);
    z-index: 20;
}
.polaroid-1 {
    top: 58%;
    right: 32%;
    transform: rotate(2.5deg);
}
.polaroid-2 {
    top: 10%;
    right: 28%;
    transform: rotate(-1.5deg);
}
.polaroid-3 {
    top: 38%;
    left: 8%;
    transform: rotate(-2.5deg);
}
.polaroid-4 {
    top: 68%;
    left: 14%;
    transform: rotate(3.2deg);
}
.polaroid-image {
    width: 70px;
    height: 60px;
    background: #f0ede6;
    border: 4px solid #e8e4dc;
    border-bottom-width: 18px;
}
.polaroid-content { width: 100%; height: 100%; }
.lab-scene {
    background:
        radial-gradient(circle at 30% 50%, rgba(40,120,40,0.3) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(40,80,120,0.2) 0%, transparent 30%),
        linear-gradient(180deg, #080604 0%, #0a0a08 100%);
}
.vault-scene {
    background:
        radial-gradient(circle at 50% 50%, rgba(120,80,20,0.2) 0%, transparent 50%),
        repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(40,30,10,0.3) 8px, rgba(40,30,10,0.3) 9px),
        linear-gradient(180deg, #0a0806 0%, #080604 100%);
}
.corridor-scene {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(60,60,80,0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(200,180,100,0.15) 0%, transparent 30%),
        repeating-linear-gradient(0deg, transparent 0px, transparent 12px, rgba(30,30,40,0.4) 12px, rgba(30,30,40,0.4) 13px),
        linear-gradient(180deg, #08080c 0%, #0c0a10 100%);
}
.reactor-scene {
    background:
        radial-gradient(circle at 50% 50%, rgba(0,200,100,0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0,255,136,0.08) 40%, transparent 70%),
        linear-gradient(180deg, #040808 0%, #060a08 100%);
}
.polaroid-caption {
    font-family: var(--font-body);
    font-size: 7px;
    color: #3a3020;
    text-align: center;
    padding: 2px 4px 0;
    position: relative;
    top: -14px;
}

/* Fingerprint Card */
.inv-fingerprint {
    position: absolute;
    bottom: 32%;
    right: 7%;
    width: 65px;
    padding: 6px;
    background: #141008;
    border: 1px solid #2a2218;
    transform: rotate(4deg);
    z-index: 10;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
.fp-title {
    font-family: var(--font-pixel);
    font-size: 4px;
    color: #5a4a32;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.fp-image {
    width: 40px;
    height: 50px;
    margin: 0 auto;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(80,60,30,0.15) 21%, transparent 22%),
        radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(80,60,30,0.12) 31%, transparent 32%),
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(80,60,30,0.10) 41%, transparent 42%),
        radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(80,60,30,0.08) 51%, transparent 52%),
        radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(80,60,30,0.06) 61%, transparent 62%),
        #0a0806;
    border: 1px solid #1a1610;
}
.fp-label {
    font-family: var(--font-pixel);
    font-size: 4px;
    color: #8a3030;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 4px;
}

/* Facility Map */
.inv-map {
    position: absolute;
    top: 65%;
    left: 32%;
    width: 100px;
    height: 80px;
    background: #0c0a06;
    border: 1px solid #2a2218;
    transform: rotate(-1deg);
    z-index: 10;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
    overflow: hidden;
}
.inv-map .pin { left: 80%; }
.map-content { width: 100%; height: 100%; position: relative; }
.map-grid-lines {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0px, transparent 9px, rgba(40,30,15,0.2) 9px, rgba(40,30,15,0.2) 10px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 9px, rgba(40,30,15,0.2) 9px, rgba(40,30,15,0.2) 10px);
}
.map-marker {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid #cc2020;
    background: rgba(200,20,20,0.2);
}
.m-1 { top: 30%; left: 25%; }
.m-2 { top: 55%; left: 60%; }
.m-3 { top: 40%; left: 75%; }
.map-route {
    position: absolute;
    top: 30%; left: 25%;
    width: 50%; height: 25%;
    border-bottom: 1px dashed rgba(200,160,30,0.4);
    border-right: 1px dashed rgba(200,160,30,0.4);
}
.map-label {
    position: absolute;
    bottom: 2px; left: 4px;
    font-family: var(--font-pixel);
    font-size: 4px;
    color: #4a3e28;
    letter-spacing: 1px;
}

/* Index Cards */
.inv-index {
    position: absolute;
    z-index: 10;
    width: 110px;
    padding: 8px 10px;
    background: #181410;
    border: 1px solid #2a2418;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.5);
}
.idx-1 { bottom: 8%; left: 8%; transform: rotate(0.5deg); }
.idx-2 { top: 44%; right: 4%; transform: rotate(-1deg); width: 100px; }
.idx-title {
    font-family: var(--font-pixel);
    font-size: 5px;
    color: #8a7a4a;
    letter-spacing: 1px;
    border-bottom: 1px solid #2a2218;
    padding-bottom: 3px;
    margin-bottom: 5px;
}
.inv-index p {
    font-family: var(--font-body);
    font-size: 8px;
    color: #6a5a3a;
    margin: 0;
    line-height: 1.5;
}
.idx-circled { color: #c8a020; text-decoration: underline; text-underline-offset: 2px; }
.idx-underline { color: #cc4040; text-decoration: underline; }

/* Coffee Stains */
.inv-coffee-stain {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}
.stain-1 {
    top: 40%; left: 60%;
    width: 50px; height: 45px;
    border: 2px solid rgba(80,50,20,0.08);
    background: radial-gradient(ellipse, rgba(60,35,10,0.04) 0%, transparent 70%);
}
.stain-2 {
    bottom: 25%; left: 15%;
    width: 35px; height: 35px;
    border: 1.5px solid rgba(80,50,20,0.06);
    background: radial-gradient(ellipse, rgba(60,35,10,0.03) 0%, transparent 70%);
}

/* Tape Pieces */
.inv-tape {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    background: rgba(180,160,100,0.08);
    border: 1px solid rgba(180,160,100,0.05);
}
.tape-1 { top: 18%; left: 18%; width: 35px; height: 8px; transform: rotate(-5deg); }
.tape-2 { top: 55%; right: 28%; width: 28px; height: 7px; transform: rotate(12deg); }
.tape-3 { bottom: 12%; left: 48%; width: 30px; height: 7px; transform: rotate(-8deg); }

/* Hand-drawn Annotations */
.inv-scrawl {
    position: absolute;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 700;
    pointer-events: none;
    z-index: 16;
}
.scrawl-1 { top: 48%; left: 55%; font-size: 9px; color: rgba(180,30,30,0.5); transform: rotate(-5deg); }
.scrawl-2 { top: 32%; left: 60%; font-size: 7px; color: rgba(180,30,30,0.4); transform: rotate(2deg); }
.scrawl-3 { bottom: 42%; left: 22%; font-size: 8px; color: rgba(180,30,30,0.4); transform: rotate(-2deg); }
.scrawl-4 { bottom: 14%; right: 38%; font-size: 7px; color: rgba(200,160,30,0.4); transform: rotate(3deg); }

/* ═══ INVESTIGATION BOARD MOBILE ═══ */
@media (max-width: 768px) {
    .inv-board {
        transform: scale(0.65) translateX(-27%);
        transform-origin: top left;
        width: 154%;
        height: 154%;
    }
    .inv-case-header {
        top: 1%;
        padding: 6px 16px 8px;
    }
    .inv-case-header h2 { font-size: 10px; }
    .inv-timeline { top: 11%; left: 5%; right: 10%; }
    .inv-card-main {
        top: 22%;
        left: calc(50% - 60px);
        width: 120px;
        height: 160px;
    }
    .inv-card-secondary {
        top: 20%;
        right: 6%;
        width: 95px;
        height: 130px;
    }
    .inv-card-tertiary {
        top: 48%;
        left: 5%;
        width: 100px;
        height: 135px;
    }
    .inv-card-unknown {
        bottom: 8%;
        right: 10%;
        width: 75px;
        height: 100px;
    }
    .inv-clipping { top: 16%; left: 3%; width: 110px; }
    .inv-note.note-1 { bottom: 14%; left: 25%; width: 115px; }
    .inv-sticky { width: 65px; }
    .inv-document.doc-classified { bottom: 4%; right: 3%; width: 100px; }
    .inv-polaroid .polaroid-image { width: 55px; height: 48px; }
    .inv-fingerprint { width: 55px; }
    .inv-map { width: 85px; height: 65px; }
    .inv-index { width: 90px; }
    .card-name { font-size: 6px; }
    .card-role { font-size: 8px; }
}

@media (max-width: 480px) {
    .inv-board {
        transform: scale(0.52) translateX(-46%);
        width: 192%;
        height: 192%;
    }
    .inv-timeline { display: none; }
    .inv-card-main {
        top: 18%;
        left: calc(50% - 55px);
        width: 110px;
        height: 145px;
    }
    .inv-card-secondary {
        top: 16%;
        right: 4%;
        width: 85px;
        height: 115px;
    }
    .inv-card-tertiary {
        top: 45%;
        left: 3%;
        width: 90px;
        height: 120px;
    }
    .inv-card-unknown {
        bottom: 6%;
        right: 8%;
        width: 65px;
        height: 88px;
    }
    .inv-clipping { display: none; }
    .inv-note.note-1 { display: none; }
    .inv-sticky { display: none; }
    .inv-polaroid { display: none; }
    .inv-fingerprint { display: none; }
    .inv-map { display: none; }
    .inv-index { display: none; }
    .inv-scrawl { display: none; }
    .inv-document.doc-classified { display: none; }
    .inv-case-header h2 { font-size: 9px; letter-spacing: 2px; }
}

/* ═══ SCENE 5: COMMAND CENTER ═══ */
/* Wall screens hidden — canvas renders them */
.monitor-wall, .wall-screen {
    display: none;
}
.command-bg {
    /* base handled by unified bg above */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.monitor-wall {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.wall-screen {
    width: 100px;
    height: 70px;
    background: #0a1a0a;
    border: 2px solid rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
    animation: screen-flicker 5s ease-in-out infinite;
}

.wall-screen:nth-child(1) { animation-delay: 0s; }
.wall-screen:nth-child(2) { animation-delay: 1s; }
.wall-screen:nth-child(3) { animation-delay: 2s; }
.wall-screen:nth-child(4) { animation-delay: 3s; }
.wall-screen:nth-child(5) { animation-delay: 4s; }

/* ── WHITELIST SUBMISSION ── */
.wl-container {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
}

.wl-title {
    font-family: var(--font-pixel);
    font-size: clamp(16px, 3vw, 26px);
    color: var(--green);
    letter-spacing: 6px;
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.wl-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-bottom: 32px;
}

.wl-single-form {
    display: flex;
    justify-content: center;
}

.wl-panel {
    width: 460px;
    max-width: 92vw;
    background: rgba(0, 10, 0, 0.85);
    border: 1px solid rgba(0, 255, 136, 0.25);
    text-align: left;
}

.wl-tier-selector {
    display: none;
}

.wl-tier-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 14px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 2px solid transparent;
    opacity: 0.5;
}

.wl-tier-option.active {
    opacity: 1;
    border-bottom-color: var(--green);
    background: rgba(0, 255, 136, 0.04);
}

.wl-tier-option:hover {
    opacity: 0.8;
    background: rgba(0, 255, 136, 0.03);
}

.wl-tier-option input[type="radio"] {
    display: none;
}

.wl-tier-badge {
    font-family: var(--font-pixel);
    font-size: 11px;
    letter-spacing: 2px;
    padding: 4px 10px;
    border: 1px solid;
}

.wl-tier-label {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 2px;
}

.badge-gtd {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.5);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.badge-fcfs {
    color: #00bfff;
    border-color: rgba(0, 191, 255, 0.5);
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.3);
}

.wl-panel-body {
    padding: 22px;
}

.wl-task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.wl-task {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
}

.wl-task-input {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    cursor: default;
}

.wl-check {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    cursor: pointer;
}

.wl-task-text {
    flex: 1;
}

.wl-task-link {
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--green);
    letter-spacing: 2px;
    text-decoration: none;
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 4px 10px;
    transition: all 0.2s;
}

.wl-task-link:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--green);
}

.wl-field {
    width: 100%;
    background: rgba(0, 20, 0, 0.6);
    border: 1px solid rgba(0, 255, 136, 0.2);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--green);
    outline: none;
    letter-spacing: 0.5px;
    transition: border-color 0.2s;
}

.wl-field:focus {
    border-color: var(--green);
}

.wl-field::placeholder {
    color: rgba(0, 255, 136, 0.25);
}

.wl-wallet-section {
    margin-bottom: 18px;
}

.wl-wallet-label {
    display: block;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.wl-submit-btn {
    width: 100%;
    font-family: var(--font-pixel);
    font-size: 11px;
    padding: 16px;
    background: transparent;
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--green);
    letter-spacing: 3px;
    cursor: not-allowed;
    opacity: 0.4;
    transition: all 0.3s;
}

.wl-submit-btn:not(:disabled) {
    opacity: 1;
    cursor: pointer;
}

.wl-submit-btn:not(:disabled):hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--green);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

.wl-submit-btn.submitting {
    pointer-events: none;
    opacity: 0.6;
}

.wl-submit-btn.submitting span::after {
    content: '...';
    animation: blink 1s steps(2) infinite;
}

.wl-status {
    font-family: var(--font-body);
    font-size: 14px;
    margin-top: 12px;
    min-height: 20px;
    letter-spacing: 0.5px;
}

.wl-status.success { color: var(--green); }
.wl-status.error { color: #ff4444; }

.wl-note {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 2px;
    margin-top: 24px;
}

@media (max-width: 820px) {
    .wl-single-form { width: 100%; }
    .wl-panel { width: 100%; max-width: 400px; }
    .wl-tier-label { display: none; }
}

/* ═══ DIEGETIC DISCOVERY MARKERS ═══ */
.easter-egg {
    position: absolute;
    cursor: pointer;
    z-index: 30;
    opacity: 0.58;
    transition: opacity 0.18s steps(2), transform 0.18s steps(2), filter 0.18s steps(2);
    image-rendering: pixelated;
    -webkit-tap-highlight-color: transparent;
    animation: eggProximityHint 4s ease-in-out infinite;
}
.easter-egg.found {
    animation: none;
}
@keyframes eggProximityHint {
    0%, 100% { opacity: 0.35; filter: brightness(1); }
    50% { opacity: 0.65; filter: brightness(1.3) drop-shadow(0 0 3px rgba(0,255,136,0.2)); }
}

.easter-egg:hover { opacity: 1; transform: translateY(-1px); filter: brightness(1.25); animation: none; }
.easter-egg:active { opacity: 1; transform: translateY(1px); animation: none; }
.easter-egg.found { opacity: 0.78; cursor: pointer; animation: none; }

.egg-1 { bottom: 198px; left: 52px; }
/* egg-2 now inside .specimen-container (relative position) */
.egg-3 { top: 64px; left: 44px; }
.egg-4 { bottom: 102px; right: 42px; }
.egg-5 { top: 132px; left: 62px; }
.egg-6 { bottom: 150px; right: 120px; }

.easter-egg::before,
.easter-egg::after {
    content: \"\";
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

.easter-egg span {
    position: relative;
    z-index: 2;
    display: block;
    font-family: var(--font-pixel);
    font-size: 5px;
    line-height: 1;
    letter-spacing: 0.5px;
    color: rgba(230, 230, 210, 0.82);
    text-shadow: 1px 1px 0 #050505;
}

.marker-evidence {
    width: 38px;
    height: 18px;
    padding: 5px 4px 0 7px;
    background: #d6c58d;
    border: 2px solid #312613;
    box-shadow: inset 0 -3px 0 rgba(73, 46, 20, 0.45), 2px 2px 0 #050505;
}
.marker-evidence::before {
    top: 5px;
    left: 3px;
    width: 3px;
    height: 3px;
    background: #2c2114;
}
.marker-evidence::after {
    right: -5px;
    top: 4px;
    width: 7px;
    height: 8px;
    background: #9f1e1e;
    animation: marker-flicker 2.8s steps(1) infinite;
}

.marker-barcode {
    width: 42px;
    height: 18px;
    padding: 11px 3px 0;
    background: #d8d5bb;
    border: 2px solid #181818;
    box-shadow: inset 0 -3px 0 rgba(80, 76, 55, 0.38), 2px 2px 0 #050505;
}
.marker-barcode::before {
    top: 3px;
    left: 4px;
    width: 30px;
    height: 6px;
    background: repeating-linear-gradient(90deg, #111 0 1px, transparent 1px 3px, #111 3px 5px, transparent 5px 7px);
}
.marker-barcode::after {
    inset: 0;
    background: linear-gradient(transparent 45%, rgba(255,255,255,0.45) 45% 52%, transparent 52%);
    animation: marker-scan 3.4s steps(4) infinite;
}
.marker-barcode span { color: #151515; text-shadow: none; font-size: 4px; }

.marker-incident {
    position: absolute;
    bottom: 18px;
    right: -8px;
    width: 50px;
    height: 32px;
    padding: 18px 4px 0;
    background: #d4c8b5;
    border: 2px solid #1a1410;
    box-shadow: inset 0 -4px 0 rgba(60, 42, 28, 0.48), 2px 2px 0 #050505;
    z-index: 5;
}
.marker-incident::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 8px;
    background: #292014;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.marker-incident::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #d62828;
    box-shadow: 0 0 0 2px #2a0a0a;
    animation: marker-flicker 2.2s steps(1) infinite;
}
.marker-incident span {
    color: #2a1810;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
    font-size: 5px;
    letter-spacing: 0.3px;
}

.marker-file {
    width: 34px;
    height: 24px;
    padding: 13px 4px 0;
    background: #171717;
    border: 2px solid #3d3d3d;
    box-shadow: inset 0 3px 0 #292929, 2px 2px 0 #050505;
}
.marker-file::before {
    top: -2px;
    right: -2px;
    width: 12px;
    height: 8px;
    background: #2e2e2e;
    border-left: 2px solid #4b4b4b;
    border-bottom: 2px solid #4b4b4b;
}
.marker-file::after {
    left: 5px;
    top: 6px;
    width: 20px;
    height: 4px;
    background: #8f1515;
    box-shadow: 0 6px 0 #8f1515;
    animation: marker-flicker 3.1s steps(1) infinite;
}

.marker-panel {
    width: 30px;
    height: 36px;
    background: #1d2020;
    border: 2px solid #4a4a46;
    box-shadow: inset 0 0 0 2px #101111, 2px 2px 0 #050505;
}
.marker-panel::before {
    left: 6px;
    top: 7px;
    width: 14px;
    height: 16px;
    border: 2px solid #5f625a;
    border-right-color: #242424;
}
.marker-panel::after {
    right: 4px;
    bottom: 5px;
    width: 5px;
    height: 5px;
    background: #b71e1e;
    box-shadow: 0 0 0 2px #260909;
    animation: marker-led 1.7s steps(1) infinite;
}
.marker-panel-green::after { background: #609b4a; box-shadow: 0 0 0 2px #152810; }

.marker-tape {
    width: 42px;
    height: 26px;
    padding: 15px 4px 0;
    background: #27292a;
    border: 2px solid #555;
    box-shadow: inset 0 5px 0 #171819, 2px 2px 0 #050505;
}
.marker-tape::before {
    top: 5px;
    left: 7px;
    width: 7px;
    height: 7px;
    background: #090909;
    box-shadow: 20px 0 0 #090909;
}
.marker-tape::after {
    top: 7px;
    left: 15px;
    width: 12px;
    height: 3px;
    background: #666;
}
.marker-tape span { color: #b7b7b7; }

/* ── Lab interactive elements ─────────────────────────────── */
.test-tube[data-interactive],
.monitor[data-interactive] {
    cursor: pointer;
    transition: filter 200ms ease, transform 200ms ease;
    outline: none;
}
.test-tube[data-interactive]:hover,
.test-tube[data-interactive]:focus-visible {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(0, 229, 255, 0.4));
    transform: translateY(-2px);
}
.monitor[data-interactive]:hover,
.monitor[data-interactive]:focus-visible {
    filter: brightness(1.2);
    transform: scale(1.02);
}

/* Flash effect on click */
.hc-flash-monitor {
    animation: hc-flash-monitor-anim 600ms ease-out;
}
@keyframes hc-flash-monitor-anim {
    0% { filter: brightness(1); }
    20% { filter: brightness(2.4) hue-rotate(20deg); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

.hc-flash-tube {
    animation: hc-flash-tube-anim 600ms ease-out;
}
@keyframes hc-flash-tube-anim {
    0% { transform: translateY(0) scale(1); }
    20% { transform: translateY(-6px) scale(1.05); filter: brightness(1.6) drop-shadow(0 0 18px rgba(0, 229, 255, 0.7)); }
    50% { transform: translateY(2px) scale(0.98); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

/* Toast — pixel terminal style */
.hc-lab-toast {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(5, 8, 12, 0.95);
    border: 1px solid var(--cyan, #00e5ff);
    border-left: 3px solid var(--cyan, #00e5ff);
    padding: 12px 18px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: var(--cyan, #00e5ff);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.15), inset 0 0 12px rgba(0, 229, 255, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease, transform 240ms ease;
    z-index: 9000;
    max-width: 90vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-lab-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .hc-lab-toast {
        bottom: 90px;
        font-size: 14px;
        padding: 10px 14px;
        max-width: 92vw;
    }
}