/* theme-gattaca-v2.css — Gattaca Genomics Workstation Theme [STFN.RO]
   Inspired by the green phosphor CRT terminals from the movie. */

:root {
    /* Base — dark with subtle green tint */
    --bg-color: #020804;
    --bg-surface: #061208;

    /* Primary: Green phosphor CRT — slightly warmer than pure #00ff41 for legibility */
    --accent-primary: #33ff66;
    --accent-primary-dim: rgba(51, 255, 102, 0.2);
    --phosphor: #33ff66;
    --phosphor-dim: rgba(51, 255, 102, 0.2);
    --phosphor-glow: rgba(51, 255, 102, 0.06);

    /* Secondary: Amber for player/armor distinction (matches classic) */
    --accent-secondary: #ffb000;

    /* Valid badge — brighter pure green */
    --valid-green: #00ff41;
    --valid-green-dim: rgba(0, 255, 65, 0.15);

    /* Text — bright greenish-white for legibility */
    --text-primary: #e4f5e4;
    --text-dim: rgba(228, 245, 228, 0.75);

    /* Fonts */
    --font-main: 'Space Mono', monospace;

    /* Timing */
    --scan-speed: 2s;
    --mobile-footer-h: 95px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    cursor: none;

    & a, & button { cursor: none; }
}

/* Subtle phosphor glow text-shadow — scoped to main-grid */
.main-grid {
    text-shadow:
        0 0 1px rgba(51, 255, 102, 0.3),
        0 0 2px rgba(51, 255, 102, 0.08);
}

/* --- CRT EFFECTS --- */
.crt-aberration {
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 65%, rgba(0, 255, 65, 0.08) 100%);
    mix-blend-mode: screen;
    opacity: 0.5;
    will-change: opacity;
    contain: strict;

    @media (max-width: 768px) {
        opacity: 0.2;
    }
}

.crt-overlay {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.12) 2px,
            rgba(0, 0, 0, 0.12) 4px
        );
    background-size: 100% 4px;
    will-change: opacity;
    contain: strict;
}

/* CRT GLASS — convex surface with vignette and warm glare */
.monitor-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Soft corner/edge vignette */
        radial-gradient(
            ellipse 80% 70% at 50% 50%,
            transparent 30%,
            rgba(0, 0, 0, 0.15) 55%,
            rgba(0, 0, 0, 0.35) 75%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        /* Primary glare — warm golden shine, top-right */
        radial-gradient(
            ellipse 55% 45% at 75% 10%,
            rgba(255, 240, 180, 0.22) 0%,
            rgba(255, 230, 150, 0.12) 35%,
            rgba(255, 220, 120, 0.04) 60%,
            transparent 100%
        ),
        /* Secondary glare — smaller warm spot, bottom-left */
        radial-gradient(
            ellipse 30% 25% at 15% 90%,
            rgba(255, 240, 200, 0.08) 0%,
            rgba(255, 230, 180, 0.03) 50%,
            transparent 100%
        ),
        /* Wide diagonal light band */
        linear-gradient(
            125deg,
            transparent 15%,
            rgba(255, 245, 200, 0.015) 30%,
            rgba(255, 245, 200, 0.06) 45%,
            rgba(255, 245, 200, 0.03) 55%,
            rgba(255, 245, 200, 0.015) 65%,
            transparent 80%
        );
    pointer-events: none;
    z-index: 9990;
}

/* --- VISUALIZER --- */
.visualizer-container .img-layer {
    filter: grayscale(1) sepia(0.8) saturate(3) contrast(1.2);
}

.visualizer-container .scan-line-anim {
    background: var(--phosphor);
    opacity: 0.5;
    mix-blend-mode: screen;
}

/* --- LOADER (return visits) --- */
#site-loader {
    background: var(--bg-color);
}

.loader-title {
    font-size: 0.8rem;
    color: var(--phosphor);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.loader-bar-container {
    background: var(--phosphor-dim);
}

.loader-bar {
    background: var(--phosphor);
    animation: load-slide 1.5s infinite ease-in-out;
}

@keyframes load-slide {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* --- BOOT SEQUENCE --- */
#boot-sequence {
    background: var(--bg-color);
    color: var(--phosphor);
}

.boot-progress {
    background: var(--phosphor-dim);
}

.boot-progress-bar {
    background: var(--phosphor);
}

#boot-sequence .boot-valid {
    color: var(--valid-green);
    text-shadow: 0 0 6px var(--valid-green);
}

/* --- GAME UI COLORS --- */
.game-loader-text {
    color: var(--phosphor);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

#target-seq {
    color: var(--phosphor);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--phosphor-dim);
}

#game-msg { color: var(--text-primary); }

#summary-screen {
    background: rgba(2, 8, 4, 0.95);
}

.summary-box h2 { color: var(--phosphor); }
.stats-table td { border-bottom: 1px solid var(--phosphor-dim); }
.stats-table td:last-child { color: var(--valid-green); }
#agent-name { border-color: var(--phosphor-dim); }
#agent-name:focus { border-color: var(--phosphor); }
#score-banned { color: var(--phosphor); }
#score-leaderboard h3 { color: var(--phosphor); }
.leaderboard-table th { color: var(--valid-green); border-bottom: 1px solid var(--phosphor-dim); }
.leaderboard-table td { border-bottom: 1px solid var(--phosphor-dim); }
.leaderboard-table .leaderboard-top td { color: var(--phosphor); }

/* --- BOTTOM BAR --- */
.bottom-bar {
    background: var(--bg-surface);
}

.system-col .sys-subtitle {
    animation: blink-subtitle 2s infinite;
    transition: opacity 0.6s ease;
}

.system-col .sys-subtitle.fading {
    opacity: 0;
}

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

/* --- ID SECTION --- */
.id-col,
.mobile-id-container {
    background: rgba(6, 18, 8, 0.5);
}

.id-bg-accent {
    opacity: 0.4;
    filter: grayscale(1) sepia(0.8) saturate(3) brightness(0.7);
}

.floating-head {
    filter: grayscale(100%) contrast(1.6) brightness(1.8);
}

/* --- ID STATUS BADGE --- */
.id-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--valid-green);
    color: var(--valid-green);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-shadow: 0 0 4px var(--valid-green);
}

/* --- RIGHT PANEL --- */
.right-panel {
    background: var(--bg-color);
}

.content-area {
    scrollbar-color: var(--phosphor) var(--bg-surface);
}

/* --- PANEL HEADER --- */
.panel-header {
    color: var(--phosphor);
    opacity: 0.7;
}

/* --- FILTER BUTTONS --- */
.filter-btn {
    color: var(--text-primary);
    opacity: 0.7;

    &::before,
    &::after { color: var(--text-primary); }

    &:hover,
    &.active {
        background: var(--phosphor-glow);
        opacity: 1;
    }
}

.filter-btn.active {
    border-bottom: 2px solid var(--phosphor);
}

/* --- LOG ITEMS --- */
.log-item {
    border-left: 3px solid var(--phosphor-dim);
    transition: border-color 0.2s, background-color 0.2s;

    &:hover {
        border-left-color: var(--phosphor);
        background: var(--phosphor-glow);
    }

    & .log-thumb-small {
        filter: grayscale(1) sepia(0.8) saturate(3) contrast(1.2);
    }

    & .log-date { color: var(--text-dim); }
    & .log-header {
        color: var(--text-primary);
        &::before, &::after { color: var(--text-primary); }
    }
}

/* --- BUTTONS --- */
.btn-back {
    color: var(--text-primary);
    &::before, &::after { color: var(--text-primary); }
}

/* --- DETAIL VIEW HEADER --- */
.detail-view::before {
    content: 'LOG ENTRY // CLASSIFIED';
    display: block;
    font-size: 0.65rem;
    color: var(--phosphor-dim);
    letter-spacing: 2px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--phosphor-dim);
}

/* --- DETAIL TEXT --- */
.detail-text {
    color: var(--text-primary);
    & a { color: var(--text-primary); }
    & a::before, & a::after { color: var(--text-primary); }
    & h1, & h2, & h3 { color: var(--text-primary); }
    & img { border: 1px solid rgba(51, 255, 102, 0.15); }
}

/* --- MOBILE --- */
.mobile-header {
    @media (max-width: 768px) { background: var(--bg-surface); }
}

.mobile-led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--valid-green);
    box-shadow:
        0 0 3px var(--valid-green),
        0 0 8px var(--valid-green),
        0 0 14px rgba(51, 255, 102, 0.3);
    animation: blink-text 4s infinite;
    flex-shrink: 0;
}

.mobile-id-container {
    @media (max-width: 768px) { background: var(--bg-surface); }
}

/* --- CURSOR (only custom inside monitor-screen on large displays) --- */
.cursor-trail,
.cursor-main {
    background-color: var(--phosphor);
}

.cursor-main {
    box-shadow: 0 0 10px var(--phosphor);
    animation: voltage-flicker 0.3s infinite;
}

/* Green phosphor halo — large glow around cursor that illuminates nearby elements.
   mix-blend-mode: screen adds light without affecting black areas. */
.cursor-glow {
    position: fixed;
    pointer-events: none;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(51, 255, 102, 0.9) 0%,
        rgba(51, 255, 102, 0.3) 25%,
        rgba(51, 255, 102, 0.04) 60%,
        transparent 100%
    );
    mix-blend-mode: overlay;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 9989; /* Below glass overlay (9990) so it blends with content, not glass */
    opacity: 0;
    transition: opacity 0.3s ease-out;

    @media (pointer: coarse) {
        display: none !important;
    }
}

/* --- CURSOR TOOLTIP MORPH --- */
.cursor-main.has-tooltip {
    background-color: var(--phosphor);
    color: #000;
    box-shadow: 0 0 10px var(--phosphor);
}

.cursor-main.has-tooltip .cursor-tt-text {
    color: #000;
    text-shadow: none;
}

/* --- DNA STRAND & TAG VIZ --- */
.dna-strand-container {
    border-top: 1px solid var(--phosphor-dim);
}

.dna-strand-container::before {
    color: var(--phosphor);
}

.dna-strand-line {
    stroke: var(--phosphor);
}

.dna-rung {
    stroke: var(--phosphor);
}

.dna-node-circle {
    fill: var(--phosphor);
    stroke: var(--phosphor);
}

.dna-node:hover .dna-node-circle {
    filter: drop-shadow(0 0 4px var(--phosphor));
}

.dna-node-icon {
    color: var(--bg-color);
}

.dna-node-label { fill: var(--text-primary); }
.dna-node-label-bg { fill: var(--bg-color); stroke: var(--phosphor); stroke-width: 1; }

.mobile-tag-list {
    border-top: 1px solid var(--phosphor-dim);
}

.mobile-tag-list::before {
    color: var(--phosphor);
}

.mobile-tag-item {
    color: var(--text-primary);
}

.mobile-tag-item svg {
    background: var(--phosphor);
    color: var(--bg-color);
}

.mobile-tag-item span {
    background: var(--bg-color);
    border: 1px solid var(--phosphor);
}

.mobile-tag-item:hover {
    opacity: 0.8;
}

#tag-viz {
    background: var(--bg-color);
}

.tag-viz-header {
    color: var(--phosphor);
    border-bottom-color: var(--phosphor-dim);
}

.tag-viz-close {
    color: var(--phosphor);
}

.tag-viz-item {
    border: 1px solid var(--phosphor-dim);
    color: var(--text-primary);
}

.tag-viz-item:hover {
    background: var(--phosphor-glow);
    border-color: var(--phosphor);
}

/* --- RADAR --- */
.radar-ring { stroke: var(--phosphor); }
.radar-crosshair { stroke: var(--phosphor); }
.radar-center { fill: var(--phosphor); }
.radar-connection { stroke: var(--phosphor); }
.radar-sweep-wedge { fill: var(--phosphor); }
.radar-sweep-line { stroke: var(--phosphor); }
.radar-node-circle { fill: var(--phosphor); stroke: var(--phosphor); }
.radar-node:hover .radar-node-circle { filter: drop-shadow(0 0 4px var(--phosphor)); }
.radar-node-icon { color: var(--bg-color); }
.radar-node-label { fill: var(--text-primary); }
.radar-node-label-bg { fill: var(--bg-color); stroke: var(--phosphor); stroke-width: 1; }

/* --- TAG TOGGLE BUTTON --- */
.tag-toggle-btn {
    color: var(--text-primary);
    background: var(--bg-color);
    border-color: var(--phosphor-dim);
}

.tag-toggle-btn:hover,
.tag-toggle-btn.active {
    background: var(--phosphor-glow);
}

/* --- RELATED POSTS --- */
#related-posts {
    border-top: 1px solid var(--phosphor-dim);
}

.related-item {
    color: var(--text-primary);
    &::before, &::after { color: var(--text-primary); }
}

/* --- PREV/NEXT NAV --- */
.detail-nav {
    border-top: 1px solid var(--phosphor-dim);
}

.nav-prev, .nav-next {
    color: var(--text-primary);
    &::before, &::after { color: var(--text-primary); }
}

/* --- EXCERPT --- */
.log-excerpt { color: var(--text-dim); }

/* --- CONTACT ICONS --- */
.contact-icon svg { fill: var(--text-primary) !important; }
.contact-icon::before, .contact-icon::after { color: var(--text-primary); }

/* --- THEME-SPECIFIC ANIMATIONS --- */
@keyframes voltage-flicker {
    0% { opacity: 1; }
    40% { opacity: 1; }
    45% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

/* ===================================================================
   MONITOR FRAME — Realistic CRT with beveled bezel and convex glass
   =================================================================== */
@media (min-width: 1440px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Dark desk surface + phosphor ambient bleed from screen */
        background:
            radial-gradient(ellipse 50% 35% at 50% 42%, rgba(51, 255, 102, 0.025) 0%, transparent 70%),
            radial-gradient(ellipse at 50% 45%, #040a06 0%, #010201 55%);
    }

    .monitor-frame {
        position: relative;
        width: min(92vw, 1500px);
        height: min(85vh, 920px);
        /* Glossy black plastic bezel — smooth reflective surface */
        background:
            /* Glossy highlight streak across bezel top */
            linear-gradient(
                100deg,
                transparent 20%,
                rgba(255, 255, 255, 0.04) 40%,
                rgba(255, 255, 255, 0.07) 50%,
                rgba(255, 255, 255, 0.04) 60%,
                transparent 80%
            ),
            /* Base beveled gradient */
            linear-gradient(
                175deg,
                #2a2a2a 0%,
                #1e1e1e 3%,
                #161616 10%,
                #111111 50%,
                #0c0c0c 90%,
                #141414 96%,
                #1a1a1a 100%
            );
        border-radius: 18px;
        /* Multi-layer shadows for physical depth (reduced for perf) */
        box-shadow:
            /* Deep desk shadow */
            0 30px 40px rgba(0, 0, 0, 0.95),
            /* Glossy top edge highlight */
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            /* Bottom bevel shadow */
            inset 0 -1px 3px rgba(0, 0, 0, 0.6),
            /* Hard bottom edge */
            0 2px 0 #1a1a1a;
        /* Thicker bottom bezel like real CRTs */
        padding: 14px 20px 30px;
    }

    /* Ambient phosphor bleed — green light cast onto surrounding surface */
    .monitor-frame::before {
        content: '';
        position: absolute;
        inset: -50px -40px;
        border-radius: 50px;
        background: radial-gradient(
            ellipse 55% 45% at 50% 45%,
            rgba(51, 255, 102, 0.025) 0%,
            transparent 70%
        );
        pointer-events: none;
        z-index: -1;
    }

    /* Inner bezel chamfer — dark groove between plastic bezel and glass */
    .monitor-frame::after {
        content: '';
        position: absolute;
        top: 36px;
        left: 18px;
        right: 18px;
        bottom: 56px;
        border-radius: 14px;
        box-shadow:
            inset 0 3px 10px rgba(0, 0, 0, 0.95),
            inset 0 -1px 4px rgba(0, 0, 0, 0.6),
            inset 3px 0 6px rgba(0, 0, 0, 0.4),
            inset -3px 0 6px rgba(0, 0, 0, 0.4),
            0 1px 0 rgba(255, 255, 255, 0.04);
        pointer-events: none;
        z-index: 6;
    }

    .monitor-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        /* Embossed text — dark with subtle light edge below */
        color: rgba(255, 255, 255, 0.06);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
        height: 22px;
        font-size: 0.45rem;
        padding: 0 10px;
        letter-spacing: 3px;
    }

    .monitor-screen {
        flex: 1;
        overflow: hidden;
        position: relative;
        /* Slightly elliptical corners — CRT glass curvature */
        border-radius: 12px / 14px;
        background: var(--bg-color);
        /* Screen recessed into bezel with depth */
        box-shadow:
            inset 0 0 50px rgba(0, 0, 0, 0.5),
            inset 0 0 100px rgba(0, 0, 0, 0.25),
            inset 0 3px 6px rgba(0, 0, 0, 0.9);
        /* CRITICAL: contains fixed-pos cursor elements within screen */
        transform: translateZ(0);
        /* Faint phosphor edge bleed */
        border: 1px solid rgba(51, 255, 102, 0.04);
    }

    /* Border-radius for glass overlay inside monitor frame */
    .monitor-screen::before {
        border-radius: 12px / 14px;
    }

    .monitor-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        /* Embossed text — debossed into plastic */
        color: rgba(255, 255, 255, 0.06);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
        height: 28px;
        font-size: 0.4rem;
        padding: 6px 14px 0;
        letter-spacing: 2px;
    }

    .monitor-led {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--valid-green);
        box-shadow:
            0 0 3px var(--valid-green),
            0 0 8px var(--valid-green),
            0 0 14px rgba(51, 255, 102, 0.3);
        animation: blink-text 4s infinite;
    }

    .main-grid {
        height: 100%;
    }

    /* Re-scope CRT overlays inside monitor screen */
    .crt-overlay,
    .crt-aberration {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px / 14px;
    }

    .right-panel {
        max-height: 100%;
    }

    /* Game fullscreen within monitor frame */
    body.game-active .visualizer-container {
        position: absolute;
        inset: 0;
        z-index: 100;
    }

    /* Cursor — only inside monitor screen, contained by transform */
    .cursor-trail,
    .cursor-main,
    .cursor-glow {
        display: none;
    }
    .monitor-screen .cursor-trail,
    .monitor-screen .cursor-main,
    .monitor-screen .cursor-glow {
        display: block;
        position: absolute;
    }
    body { cursor: default; }
    body a, body button { cursor: default; }
    .monitor-screen { cursor: none; }
    .monitor-screen a, .monitor-screen button { cursor: none; }
}

/* Screen flicker — subtle brightness fluctuation */
.monitor-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    animation: screen-flicker 6s infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    will-change: opacity;
}

body.game-active .monitor-screen::after {
    animation-play-state: paused;
    opacity: 0;
}

@keyframes screen-flicker {
    0%, 95%, 100% { opacity: 0; }
    96% { opacity: 0.04; }
    97% { opacity: 0; }
    98% { opacity: 0.03; }
    99% { opacity: 0; }
}

/* --- RESPONSIVE SCAN SPEEDS --- */
@media (min-width: 1440px) { :root { --scan-speed: 2s; } }
@media (min-width: 2000px) { :root { --scan-speed: 1.5s; } }

/* --- MOBILE SIMPLIFICATION --- */
@media (max-width: 768px) {
    .img-layer { filter: grayscale(1) sepia(0.8) saturate(3) contrast(1.2) !important; }
    .crt-overlay { background-size: 100% 3px; opacity: 0.3; }
    body { text-shadow: none; cursor: default; }
    body a, body button, body .log-item, body .filter-btn { cursor: default; }
    .main-grid { text-shadow: none; }
    .filter-btn { min-height: 44px; }
}