/* ================================================
   3D RETRO PORTFOLIO - Styles
   ================================================ */

:root {
    --crt-green: #4afa4a;
    --crt-green-dim: #2a8a2a;
    --crt-green-glow: #3cff3c;
    --crt-bg: #0a1a0a;
    --crt-dark: #051005;
    
    --terminal-bg: #0a1a0a;
    --terminal-text: #4afa4a;
    --terminal-green: #4afa4a;
    --terminal-yellow: #d29922;
    --terminal-red: #f85149;
    --terminal-white: #4afa4a;
    --terminal-gray: #2a6a2a;
    
    --win98-bg: #008080;
    --win98-titlebar: #000080;
    --win98-gray: #c0c0c0;
    --win98-dark: #808080;
    --win98-light: #dfdfdf;
    --win98-white: #ffffff;
    
    --font-terminal: 'VT323', 'Courier New', monospace;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-serif: 'Playfair Display', Georgia, serif;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}

body {
    font-family: var(--font-mono);
    color: white;
}

/* Liminal ambient light flicker animation */
@keyframes liminal-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    97% { opacity: 0.9; }
    98% { opacity: 1; }
}

@keyframes liminal-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(0.5px, -0.5px) scale(1.001); }
    50% { transform: translate(-0.5px, 0.5px) scale(0.999); }
    75% { transform: translate(0.3px, 0.3px) scale(1.001); }
}

@keyframes grain-shift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-1%, 1%); }
    40% { transform: translate(1%, -1%); }
    50% { transform: translate(-1%, 0%); }
    60% { transform: translate(1%, 0%); }
    70% { transform: translate(0%, 1%); }
    80% { transform: translate(0%, -1%); }
    90% { transform: translate(1%, 1%); }
}

/* ================================================
   WELCOME SCREEN - Enhanced Liminal Aesthetic
   ================================================ */

/* Keyframes */
@keyframes glitch-skew {
    0%, 100% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(1deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(0.5deg); }
}

@keyframes glitch-text {
    0%, 100% { 
        text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;
        transform: translate(0);
    }
    20% { 
        text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
        transform: translate(-2px, 1px);
    }
    40% { 
        text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;
        transform: translate(1px, -1px);
    }
    60% { 
        text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
        transform: translate(-1px, 2px);
    }
    80% { 
        text-shadow: -1px 0 #ff00ff, 1px 0 #00ffff;
        transform: translate(2px, -2px);
    }
}

@keyframes noise-move {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(5%, 5%); }
    30% { transform: translate(-5%, 5%); }
    40% { transform: translate(5%, -5%); }
    50% { transform: translate(-2%, 2%); }
    60% { transform: translate(2%, -2%); }
    70% { transform: translate(-3%, -3%); }
    80% { transform: translate(3%, 3%); }
    90% { transform: translate(-1%, 1%); }
    100% { transform: translate(0, 0); }
}

@keyframes vhs-tracking {
    0%, 100% { transform: translateY(0); opacity: 0; }
    10% { transform: translateY(100vh); opacity: 0.3; }
}

@keyframes particle-float {
    0%, 100% { 
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% { opacity: 0.6; transform: translateY(90vh) translateX(10px) scale(1); }
    90% { opacity: 0.6; transform: translateY(10vh) translateX(-10px) scale(1); }
    100% { 
        transform: translateY(-10vh) translateX(0) scale(0);
        opacity: 0;
    }
}

@keyframes frame-flicker {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
    52% { opacity: 0.1; }
    54% { opacity: 0.5; }
}

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

@keyframes progress-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes line-expand {
    0% { width: 0; opacity: 0; }
    100% { width: 150px; opacity: 1; }
}

@keyframes text-reveal {
    0% { 
        opacity: 0; 
        transform: translateY(20px);
        filter: blur(10px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes status-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.3; }
    94% { opacity: 1; }
    96% { opacity: 0.5; }
    97% { opacity: 1; }
}

/* ================================================
   LIMINAL GLITCH REALITY TEAR EFFECT
   Overlays on 3D scene - reality breaking apart
   ================================================ */

@keyframes reality-tear {
    0% { transform: scaleY(1) translateX(0) skewX(0); opacity: 0; }
    5% { transform: scaleY(1.1) translateX(-15px) skewX(3deg); opacity: 0.6; }
    10% { transform: scaleY(0.9) translateX(20px) skewX(-5deg); opacity: 0.8; }
    15% { transform: scaleY(1.15) translateX(-25px) skewX(4deg); opacity: 0.5; }
    20% { transform: scaleY(0.85) translateX(30px) skewX(-6deg); opacity: 0.9; }
    25% { transform: scaleY(1.2) translateX(-20px) skewX(5deg); opacity: 0.7; }
    30% { transform: scaleY(0.8) translateX(35px) skewX(-4deg); opacity: 1; }
    35% { transform: scaleY(1.1) translateX(-30px) skewX(6deg); opacity: 0.8; }
    40% { transform: scaleY(0.9) translateX(25px) skewX(-5deg); opacity: 0.9; }
    45% { transform: scaleY(1.15) translateX(-35px) skewX(4deg); opacity: 0.6; }
    50% { transform: scaleY(0.85) translateX(40px) skewX(-7deg); opacity: 1; }
    55% { transform: scaleY(1.2) translateX(-25px) skewX(5deg); opacity: 0.7; }
    60% { transform: scaleY(0.8) translateX(30px) skewX(-6deg); opacity: 0.9; }
    65% { transform: scaleY(1.1) translateX(-40px) skewX(6deg); opacity: 0.8; }
    70% { transform: scaleY(0.9) translateX(35px) skewX(-5deg); opacity: 1; }
    75% { transform: scaleY(1.15) translateX(-30px) skewX(4deg); opacity: 0.6; }
    80% { transform: scaleY(0.85) translateX(25px) skewX(-4deg); opacity: 0.8; }
    85% { transform: scaleY(1.1) translateX(-20px) skewX(3deg); opacity: 0.9; }
    90% { transform: scaleY(0.95) translateX(15px) skewX(-2deg); opacity: 0.7; }
    95% { transform: scaleY(1.05) translateX(-10px) skewX(1deg); opacity: 0.5; }
    100% { transform: scaleY(1) translateX(0) skewX(0); opacity: 0; }
}

@keyframes chromatic-aberration {
    0% { filter: none; }
    10% { filter: drop-shadow(-8px 0 rgba(255, 0, 0, 0.9)) drop-shadow(8px 0 rgba(0, 255, 255, 0.9)); }
    20% { filter: drop-shadow(12px 0 rgba(255, 0, 0, 0.7)) drop-shadow(-12px 0 rgba(0, 255, 255, 0.7)); }
    30% { filter: drop-shadow(-15px 0 rgba(255, 0, 0, 1)) drop-shadow(15px 0 rgba(0, 255, 255, 1)); }
    40% { filter: drop-shadow(6px 0 rgba(255, 0, 0, 0.6)) drop-shadow(-6px 0 rgba(0, 255, 255, 0.6)); }
    50% { filter: drop-shadow(-20px 0 rgba(255, 0, 0, 0.9)) drop-shadow(20px 0 rgba(0, 255, 255, 0.9)); }
    60% { filter: drop-shadow(10px 0 rgba(255, 0, 0, 0.8)) drop-shadow(-10px 0 rgba(0, 255, 255, 0.8)); }
    70% { filter: drop-shadow(-18px 0 rgba(255, 0, 0, 1)) drop-shadow(18px 0 rgba(0, 255, 255, 1)); }
    80% { filter: drop-shadow(5px 0 rgba(255, 0, 0, 0.5)) drop-shadow(-5px 0 rgba(0, 255, 255, 0.5)); }
    90% { filter: drop-shadow(-12px 0 rgba(255, 0, 0, 0.7)) drop-shadow(12px 0 rgba(0, 255, 255, 0.7)); }
    100% { filter: none; }
}

@keyframes vhs-distort {
    0%, 100% { transform: translateX(0) skewX(0) scaleX(1); }
    3% { transform: translateX(-50px) skewX(-8deg) scaleX(1.1); }
    6% { transform: translateX(60px) skewX(10deg) scaleX(0.9); }
    9% { transform: translateX(-40px) skewX(-6deg) scaleX(1.15); }
    12% { transform: translateX(70px) skewX(12deg) scaleX(0.85); }
    15% { transform: translateX(-30px) skewX(-4deg) scaleX(1.05); }
    18% { transform: translateX(50px) skewX(8deg) scaleX(0.95); }
    21% { transform: translateX(-60px) skewX(-10deg) scaleX(1.1); }
    24% { transform: translateX(40px) skewX(6deg) scaleX(0.9); }
    27% { transform: translateX(0) skewX(0) scaleX(1); }
}

@keyframes liminal-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.15; }
}

@keyframes tear-line {
    0% { transform: translateY(-100vh); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes rgb-split {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    50% { transform: translateX(8px); }
    75% { transform: translateX(-4px); }
}

@keyframes static-flicker {
    0%, 100% { opacity: 0.15; }
    5% { opacity: 0.4; }
    10% { opacity: 0.1; }
    15% { opacity: 0.5; }
    20% { opacity: 0.2; }
    25% { opacity: 0.6; }
    30% { opacity: 0.15; }
    35% { opacity: 0.45; }
    40% { opacity: 0.25; }
    45% { opacity: 0.55; }
    50% { opacity: 0.3; }
    55% { opacity: 0.5; }
    60% { opacity: 0.2; }
    65% { opacity: 0.6; }
    70% { opacity: 0.35; }
    75% { opacity: 0.45; }
    80% { opacity: 0.25; }
    85% { opacity: 0.55; }
    90% { opacity: 0.3; }
    95% { opacity: 0.4; }
}

@keyframes screen-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    5% { transform: translate(-12px, -8px) rotate(-1.5deg); }
    10% { transform: translate(15px, 6px) rotate(2deg); }
    15% { transform: translate(-10px, 12px) rotate(-1deg); }
    20% { transform: translate(8px, -10px) rotate(1.8deg); }
    25% { transform: translate(-15px, 5px) rotate(-2deg); }
    30% { transform: translate(12px, -8px) rotate(1.5deg); }
    35% { transform: translate(-8px, 15px) rotate(-1.8deg); }
    40% { transform: translate(10px, -12px) rotate(1deg); }
    45% { transform: translate(-12px, 8px) rotate(-1.5deg); }
    50% { transform: translate(15px, -6px) rotate(2deg); }
    55% { transform: translate(-10px, 10px) rotate(-1.2deg); }
    60% { transform: translate(8px, -15px) rotate(1.8deg); }
    65% { transform: translate(-15px, 12px) rotate(-2deg); }
    70% { transform: translate(12px, -5px) rotate(1.5deg); }
    75% { transform: translate(-8px, 8px) rotate(-1deg); }
    80% { transform: translate(10px, -10px) rotate(1.2deg); }
    85% { transform: translate(-6px, 6px) rotate(-0.8deg); }
    90% { transform: translate(5px, -5px) rotate(0.5deg); }
    95% { transform: translate(-3px, 3px) rotate(-0.3deg); }
}

@keyframes interlace {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 0 1px; }
}

.glitch-teleport {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
}

/* Chromatic aberration RGB split on the whole view */
.glitch-teleport .rgb-layer {
    position: absolute;
    inset: 0;
    background: inherit;
}

.glitch-teleport .rgb-layer.red {
    background: rgba(255, 0, 0, 0.25);
    mix-blend-mode: screen;
    animation: rgb-split 0.08s steps(3) infinite;
}

.glitch-teleport .rgb-layer.cyan {
    background: rgba(0, 255, 255, 0.25);
    mix-blend-mode: screen;
    animation: rgb-split 0.08s steps(3) infinite reverse;
    animation-delay: 0.03s;
}

/* Interlace scanlines - intense CRT effect */
.glitch-teleport .interlace {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.4) 1px,
        rgba(0, 0, 0, 0.4) 2px
    );
    animation: interlace 0.05s steps(2) infinite;
    opacity: 0.8;
}

/* Horizontal tear lines */
.glitch-teleport .tear-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.glitch-teleport .tear-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 5%,
        rgba(0, 255, 255, 1) 20%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 0, 255, 1) 80%,
        rgba(255, 255, 255, 0.3) 95%,
        transparent 100%
    );
    box-shadow: 
        0 0 40px rgba(255, 255, 255, 0.9),
        0 0 80px rgba(0, 255, 255, 0.7),
        0 -3px 0 rgba(0, 255, 255, 0.8),
        0 3px 0 rgba(255, 0, 255, 0.8),
        0 0 120px rgba(255, 0, 255, 0.5);
    animation: tear-line 0.5s ease-in-out forwards;
}

.glitch-teleport .tear-line:nth-child(1) { animation-delay: 0s; }
.glitch-teleport .tear-line:nth-child(2) { animation-delay: 0.1s; }
.glitch-teleport .tear-line:nth-child(3) { animation-delay: 0.2s; }
.glitch-teleport .tear-line:nth-child(4) { animation-delay: 0.3s; }
.glitch-teleport .tear-line:nth-child(5) { animation-delay: 0.4s; }
.glitch-teleport .tear-line:nth-child(6) { animation-delay: 0.5s; }
.glitch-teleport .tear-line:nth-child(7) { animation-delay: 0.6s; }
.glitch-teleport .tear-line:nth-child(8) { animation-delay: 0.7s; }

/* Static noise overlay */
.glitch-teleport .static-noise {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    animation: static-flicker 0.05s steps(10) infinite;
    mix-blend-mode: overlay;
}

/* VHS tracking distortion bands */
.glitch-teleport .vhs-bands {
    position: absolute;
    inset: 0;
}

.glitch-teleport .vhs-band {
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 10%,
        rgba(0, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 0, 255, 0.15) 70%,
        rgba(255, 255, 255, 0.1) 90%,
        transparent 100%
    );
    animation: vhs-distort 0.15s ease-in-out infinite;
}

.glitch-teleport .vhs-band:nth-child(1) { top: 10%; animation-delay: 0s; }
.glitch-teleport .vhs-band:nth-child(2) { top: 30%; animation-delay: 0.05s; }
.glitch-teleport .vhs-band:nth-child(3) { top: 50%; animation-delay: 0.1s; }
.glitch-teleport .vhs-band:nth-child(4) { top: 70%; animation-delay: 0.15s; }
.glitch-teleport .vhs-band:nth-child(5) { top: 85%; animation-delay: 0.2s; }

/* Liminal ambient glow pulses */
.glitch-teleport .liminal-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 255, 255, 0.2) 0%,
        rgba(255, 0, 255, 0.1) 40%,
        transparent 70%
    );
    animation: liminal-pulse 0.2s ease-in-out infinite;
}

/* Edge vignette - darker during glitch */
.glitch-teleport .vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 20%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* Glitch blocks - random displacement areas */
.glitch-teleport .glitch-blocks {
    position: absolute;
    inset: 0;
}

.glitch-teleport .glitch-block {
    position: absolute;
    background: rgba(0, 255, 255, 0.3);
    mix-blend-mode: exclusion;
    animation: reality-tear 0.1s steps(4) infinite;
    box-shadow: 
        inset 0 0 20px rgba(255, 0, 255, 0.5),
        0 0 30px rgba(0, 255, 255, 0.3);
}

.glitch-teleport .glitch-block:nth-child(1) {
    top: 5%; left: 0; width: 45%; height: 12%;
    animation-delay: 0s;
    background: rgba(255, 0, 255, 0.25);
}
.glitch-teleport .glitch-block:nth-child(2) {
    top: 25%; left: 50%; width: 50%; height: 8%;
    animation-delay: 0.05s;
}
.glitch-teleport .glitch-block:nth-child(3) {
    top: 40%; left: 10%; width: 60%; height: 10%;
    animation-delay: 0.1s;
    background: rgba(255, 255, 0, 0.2);
}
.glitch-teleport .glitch-block:nth-child(4) {
    top: 55%; left: 40%; width: 55%; height: 12%;
    animation-delay: 0.15s;
}
.glitch-teleport .glitch-block:nth-child(5) {
    top: 72%; left: 5%; width: 40%; height: 8%;
    animation-delay: 0.08s;
    background: rgba(255, 0, 255, 0.25);
}
.glitch-teleport .glitch-block:nth-child(6) {
    top: 85%; left: 35%; width: 65%; height: 15%;
    animation-delay: 0.12s;
}

/* Brief flash at transition */
.glitch-teleport .flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    animation: flash-burst 1.2s ease-out forwards;
}

@keyframes flash-burst {
    0% { opacity: 0; }
    70% { opacity: 0; }
    75% { opacity: 0.8; }
    80% { opacity: 0.2; }
    85% { opacity: 0.6; }
    90% { opacity: 0.1; }
    95% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Apply glitch effect to the 3D scene itself */
.scene-glitching {
    animation: scene-distort 1.2s ease-out forwards !important;
}

@keyframes scene-distort {
    0% { filter: none; transform: none; }
    3% { filter: saturate(3) hue-rotate(30deg) contrast(1.3); transform: skewX(3deg) translateX(15px) scaleX(1.02); }
    6% { filter: saturate(0.2) hue-rotate(-20deg) brightness(0.8); transform: skewX(-4deg) translateX(-20px) scaleX(0.98); }
    9% { filter: saturate(4) hue-rotate(60deg) contrast(1.5); transform: skewX(5deg) translateX(25px) scaleY(1.01); }
    12% { filter: saturate(0.3) hue-rotate(-40deg) brightness(1.2); transform: skewX(-3deg) translateX(-15px) scaleX(1.03); }
    15% { filter: saturate(3.5) hue-rotate(90deg) contrast(1.4) brightness(1.1); transform: skewX(4deg) translateX(30px); }
    18% { filter: saturate(0.4) hue-rotate(-60deg); transform: skewX(-5deg) translateX(-25px) scaleY(0.99); }
    21% { filter: saturate(4.5) hue-rotate(120deg) contrast(1.6); transform: skewX(6deg) translateX(20px) scaleX(0.97); }
    24% { filter: saturate(0.5) hue-rotate(-80deg) brightness(0.9); transform: skewX(-4deg) translateX(-30px); }
    27% { filter: saturate(5) hue-rotate(150deg) contrast(1.5) brightness(1.2); transform: skewX(5deg) translateX(35px) scaleY(1.02); }
    30% { filter: saturate(0.3) hue-rotate(-100deg); transform: skewX(-6deg) translateX(-20px) scaleX(1.04); }
    33% { filter: saturate(4) hue-rotate(180deg) contrast(1.7); transform: skewX(4deg) translateX(25px); }
    36% { filter: saturate(0.6) hue-rotate(-120deg) brightness(1.1); transform: skewX(-5deg) translateX(-35px) scaleY(0.98); }
    39% { filter: saturate(5.5) hue-rotate(210deg) contrast(1.6); transform: skewX(6deg) translateX(30px) scaleX(0.96); }
    42% { filter: saturate(0.4) hue-rotate(-140deg); transform: skewX(-4deg) translateX(-25px); }
    45% { filter: saturate(4.5) hue-rotate(240deg) contrast(1.8) brightness(1.3); transform: skewX(5deg) translateX(40px) scaleY(1.03); }
    48% { filter: saturate(0.5) hue-rotate(-160deg) brightness(0.85); transform: skewX(-6deg) translateX(-30px) scaleX(1.05); }
    51% { filter: saturate(6) hue-rotate(270deg) contrast(1.7); transform: skewX(4deg) translateX(35px); }
    54% { filter: saturate(0.3) hue-rotate(-180deg); transform: skewX(-5deg) translateX(-40px) scaleY(0.97); }
    57% { filter: saturate(5) hue-rotate(300deg) contrast(1.9) brightness(1.4); transform: skewX(6deg) translateX(30px) scaleX(0.95); }
    60% { filter: saturate(0.6) hue-rotate(-200deg) brightness(1.2); transform: skewX(-4deg) translateX(-35px); }
    63% { filter: saturate(6.5) hue-rotate(330deg) contrast(1.8); transform: skewX(5deg) translateX(45px) scaleY(1.04); }
    66% { filter: saturate(0.4) hue-rotate(-220deg); transform: skewX(-6deg) translateX(-25px) scaleX(1.06); }
    69% { filter: saturate(5.5) hue-rotate(360deg) contrast(2) brightness(1.5); transform: skewX(4deg) translateX(35px); }
    72% { filter: saturate(3) hue-rotate(30deg) brightness(1.6); transform: skewX(-3deg) translateX(-20px); }
    75% { filter: saturate(4) hue-rotate(60deg) contrast(1.8) brightness(1.7); transform: skewX(2deg) translateX(15px); }
    78% { filter: saturate(3.5) hue-rotate(90deg) brightness(1.8); transform: skewX(-1deg) translateX(-10px); }
    81% { filter: saturate(3) brightness(2); transform: skewX(0.5deg) translateX(5px); }
    84% { filter: saturate(2.5) brightness(2.3); transform: none; }
    87% { filter: saturate(2) brightness(2.6); }
    90% { filter: saturate(1.5) brightness(3); }
    93% { filter: brightness(3.5); }
    96% { filter: brightness(4); }
    100% { filter: brightness(5); }
}

.welcome-screen {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    overflow: hidden;
}

/* Noise layers */
.noise-layer {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.noise-1 {
    opacity: 0.04;
    animation: noise-move 0.5s steps(10) infinite;
}

.noise-2 {
    opacity: 0.02;
    animation: noise-move 0.3s steps(8) infinite reverse;
    mix-blend-mode: overlay;
}

/* VHS tracking lines */
.vhs-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(255, 255, 255, 0.01) 2px,
        rgba(255, 255, 255, 0.01) 4px
    );
    pointer-events: none;
}

.vhs-lines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: vhs-tracking 8s linear infinite;
}

/* Floating particles */
.liminal-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--crt-green);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--crt-green-glow);
    animation: particle-float 15s linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 30%; animation-delay: -3s; animation-duration: 18s; }
.particle:nth-child(3) { left: 50%; animation-delay: -6s; animation-duration: 14s; }
.particle:nth-child(4) { left: 70%; animation-delay: -9s; animation-duration: 16s; }
.particle:nth-child(5) { left: 90%; animation-delay: -12s; animation-duration: 20s; }

/* Main content */
.welcome-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    z-index: 10;
}

/* Glitching frame */
.welcome-frame {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    animation: frame-flicker 4s ease-in-out infinite;
}

.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--crt-green-dim);
    border-style: solid;
    border-width: 0;
}

.frame-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Text container */
.welcome-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.welcome-line {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--crt-green-dim) 20%,
        var(--crt-green) 50%,
        var(--crt-green-dim) 80%,
        transparent
    );
    box-shadow: 0 0 10px var(--crt-green-glow);
    animation: line-expand 1.5s ease-out forwards;
}

.welcome-line.top { animation-delay: 0.3s; width: 0; }
.welcome-line.bottom { animation-delay: 1.5s; width: 0; }

.welcome-glitch-text {
    font-family: var(--font-terminal);
    font-size: 14px;
    letter-spacing: 8px;
    color: var(--crt-green-dim);
    opacity: 0;
    animation: text-reveal 0.8s ease-out 0.8s forwards;
}

.welcome-main-text {
    font-family: var(--font-terminal);
    font-size: 48px;
    letter-spacing: 20px;
    color: var(--crt-green);
    text-shadow: 
        0 0 20px var(--crt-green-glow),
        0 0 40px rgba(74, 250, 74, 0.3),
        0 0 80px rgba(74, 250, 74, 0.1);
    opacity: 0;
    animation: text-reveal 1s ease-out 1s forwards, glitch-text 4s ease-in-out 2s infinite;
}

/* Status section */
.welcome-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    opacity: 0;
    animation: text-reveal 0.8s ease-out 1.8s forwards;
}

.status-text {
    font-family: var(--font-terminal);
    font-size: 12px;
    letter-spacing: 4px;
    animation: status-flicker 3s ease-in-out infinite;
}

.status-label {
    color: var(--crt-green-dim);
}

.status-value {
    color: var(--crt-green);
    margin-left: 10px;
}

.welcome-progress {
    display: flex;
    align-items: center;
    gap: 15px;
}

.progress-track {
    width: 200px;
    height: 3px;
    background: rgba(74, 250, 74, 0.1);
    position: relative;
    overflow: hidden;
}

.progress-fill {
    width: 0;
    height: 100%;
    background: var(--crt-green);
    box-shadow: 0 0 10px var(--crt-green-glow);
    transition: width 0.1s linear;
}

.progress-glow {
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, var(--crt-green-glow), transparent);
    animation: progress-glow 1.5s ease-in-out infinite;
    opacity: 0.5;
}

.progress-percent {
    font-family: var(--font-terminal);
    font-size: 12px;
    color: var(--crt-green);
    min-width: 35px;
}

/* Cursor prompt */
.welcome-prompt {
    margin-top: 20px;
    opacity: 0;
    animation: text-reveal 0.5s ease-out 2.2s forwards;
}

.prompt-cursor {
    font-family: var(--font-terminal);
    font-size: 18px;
    color: var(--crt-green);
    animation: cursor-blink 1s step-end infinite;
}

/* Overlays */
.welcome-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 100;
}

.welcome-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.8) 100%
    );
    pointer-events: none;
    z-index: 99;
}

/* ================================================
   BOOT SCREEN - CRT Terminal Style
   ================================================ */
.boot-screen {
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 1002;
    overflow: hidden;
}

.boot-crt-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 50, 0, 0.1) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
}

.boot-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 10;
}

.boot-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    font-family: var(--font-terminal);
    z-index: 5;
}

.boot-header {
    display: flex;
    justify-content: space-between;
    color: var(--crt-green);
    font-size: 14px;
    margin-bottom: 20px;
    text-shadow: 0 0 5px var(--crt-green-glow);
}

.boot-terminal {
    flex: 1;
    overflow-y: auto;
    color: var(--crt-green);
    font-size: 13px;
    line-height: 1.4;
    text-shadow: 0 0 3px var(--crt-green-glow);
}

.boot-terminal .boot-line {
    margin-bottom: 2px;
    white-space: pre;
}

.boot-terminal .boot-line.highlight {
    background: var(--crt-green);
    color: #000;
    display: inline-block;
    padding: 0 4px;
}

.boot-terminal .boot-line.white {
    color: #fff;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.boot-terminal .boot-line.yellow {
    color: #d29922;
    text-shadow: 0 0 3px rgba(210, 153, 34, 0.5);
}

.boot-terminal .boot-line.red {
    color: #f85149;
    text-shadow: 0 0 3px rgba(248, 81, 73, 0.5);
}

.boot-terminal .boot-line.cyan {
    color: #00ffff;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
}

.boot-glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 150px rgba(74, 250, 74, 0.05);
    pointer-events: none;
}

/* ================================================
   TERMINAL SCREEN - Full Screen CRT Terminal
   ================================================ */
.terminal-screen {
    position: fixed;
    inset: 0;
    background: var(--crt-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transform-origin: center center;
    animation: terminal-flicker 0.15s infinite;
}

/* Glitch animations */
@keyframes terminal-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.98; }
}

@keyframes glitch-skew {
    0%, 100% { transform: skew(0deg); }
    20% { transform: skew(0deg); }
    21% { transform: skew(2deg); }
    22% { transform: skew(-1deg); }
    23% { transform: skew(0deg); }
    80% { transform: skew(0deg); }
    81% { transform: skew(-2deg); }
    82% { transform: skew(0deg); }
}

@keyframes glitch-color {
    0%, 100% { text-shadow: 0 0 8px var(--crt-green-glow); }
    20% { text-shadow: 0 0 8px var(--crt-green-glow); }
    21% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff, 0 0 8px var(--crt-green-glow); }
    23% { text-shadow: 0 0 8px var(--crt-green-glow); }
    80% { text-shadow: 0 0 8px var(--crt-green-glow); }
    81% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff, 0 0 8px var(--crt-green-glow); }
    83% { text-shadow: 0 0 8px var(--crt-green-glow); }
}

@keyframes scanline-move {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* Liminal vignette for terminal */
.terminal-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 99;
}

/* Scanlines only - no grain */
.terminal-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 100;
}

/* Moving scanline glitch */
.terminal-screen .glitch-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(74, 250, 74, 0.1);
    box-shadow: 0 0 10px var(--crt-green-glow);
    pointer-events: none;
    z-index: 101;
    animation: scanline-move 8s linear infinite;
}

.terminal-screen.hidden {
    display: none;
}

.terminal-container {
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.terminal-header {
    display: none;
}

.terminal-title {
    display: none;
}

.terminal-buttons {
    display: none;
}

.term-btn {
    display: none;
}

.terminal-body {
    flex: 1;
    padding: 40px 60px;
    overflow-y: auto;
    font-family: var(--font-terminal);
    font-size: 20px;
    line-height: 1.5;
    animation: glitch-skew 4s infinite;
}

/* Custom scrollbar for CRT look */
.terminal-body::-webkit-scrollbar {
    width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
    background: var(--crt-dark);
}

.terminal-body::-webkit-scrollbar-thumb {
    background: var(--crt-green-dim);
}

.terminal-output {
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-output .line {
    margin-bottom: 2px;
    text-shadow: 0 0 8px var(--crt-green-glow);
    animation: glitch-color 5s infinite;
}

.terminal-output .system {
    color: var(--crt-green-dim);
}

.terminal-output .success {
    color: var(--crt-green);
}

.terminal-output .error {
    color: #ff6b6b;
    text-shadow: 0 0 8px #ff6b6b;
}

.terminal-output .info {
    color: var(--crt-green);
}

.terminal-output .warning {
    color: #ffd93d;
    text-shadow: 0 0 8px #ffd93d;
}

.terminal-output .white {
    color: var(--crt-green);
}

.terminal-output .ascii {
    color: var(--crt-green);
    font-size: 14px;
    line-height: 1.2;
    text-shadow: 0 0 10px var(--crt-green-glow);
}

.terminal-input-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.terminal-prompt {
    color: var(--crt-green);
    white-space: nowrap;
    text-shadow: 0 0 8px var(--crt-green-glow);
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--crt-green);
    font-family: var(--font-terminal);
    font-size: 20px;
    caret-color: var(--crt-green);
    text-shadow: 0 0 8px var(--crt-green-glow);
}

.terminal-hint {
    margin-top: 24px;
    font-size: 14px;
    color: var(--crt-green-dim);
    text-shadow: 0 0 5px var(--crt-green-glow);
}

.terminal-hint code {
    background: rgba(74, 250, 74, 0.1);
    color: var(--crt-green);
    padding: 2px 8px;
    border-radius: 4px;
}

.terminal-exit-hint {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--crt-green-dim);
    font-family: var(--font-terminal);
    font-size: 14px;
    text-shadow: 0 0 5px var(--crt-green-glow);
    z-index: 101;
    opacity: 0.7;
}

/* ================================================
   3D SCENE CONTAINER
   ================================================ */
.scene-container {
    position: fixed;
    inset: 0;
    background: #f7ebe4;
    animation: liminal-flicker 8s infinite;
}

/* Liminal vignette overlay */
.scene-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 35%,
        rgba(0, 0, 0, 0.2) 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Film grain overlay - animated */
.scene-container::after {
    content: '';
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
    z-index: 11;
    mix-blend-mode: overlay;
    animation: grain-shift 0.5s steps(10) infinite;
}

#three-canvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: saturate(0.82) contrast(0.92) brightness(1.03) blur(0.3px);
    animation: liminal-drift 12s ease-in-out infinite;
}

/* Haze/bloom overlay for dreamlike effect */
.scene-container .haze-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 30% 20%,
        rgba(255, 250, 240, 0.15) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 70% 80%,
        rgba(255, 245, 235, 0.1) 0%,
        transparent 40%
    );
    pointer-events: none;
    z-index: 9;
}

.scene-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 24px;
    pointer-events: none;
}

.overlay-header {
    display: flex;
    align-items: center;
    gap: 16px;
    pointer-events: auto;
}

.overlay-info {
    display: flex;
    flex-direction: column;
    background: #000;
    padding: 8px 16px;
}

.overlay-name {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.overlay-title {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.overlay-time {
    background: #000;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: white;
}

.overlay-controls {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.overlay-btn {
    width: 40px;
    height: 40px;
    background: #000;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.overlay-btn:hover {
    background: #222;
}

/* Focus Prompt */
.focus-prompt {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: white;
    padding: 12px 32px;
    font-family: var(--font-mono);
    font-size: 14px;
    animation: promptPulse 2s ease-in-out infinite;
}

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

.focus-prompt.hidden {
    display: none;
}

/* Back to Intro Button */
.back-to-intro-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--crt-green);
    border: 1px solid var(--crt-green);
    padding: 12px 24px;
    font-family: var(--font-terminal);
    font-size: 16px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s ease;
    text-shadow: 0 0 10px var(--crt-green-glow);
    box-shadow: 0 0 10px rgba(74, 250, 74, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.back-to-intro-btn:hover {
    background: rgba(74, 250, 74, 0.15);
    box-shadow: 0 0 20px rgba(74, 250, 74, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 15px var(--crt-green-glow);
    transform: scale(1.02);
}

.back-to-intro-btn:active {
    transform: scale(0.98);
}

.scene-instructions {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.scene-instructions:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.scene-instructions kbd {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Loading indicator */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fff;
    font-family: var(--font-mono);
    z-index: 10;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   MONITOR CONTENT (Win98 Style)
   ================================================ */
.monitor-content-wrapper {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 1024px;
    height: 768px;
    overflow: hidden;
}

.monitor-content {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--win98-bg);
}

/* CRT Effect Overlay */
.crt-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.1) 0px,
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 2px
        );
}

.crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Win98 Desktop */
.win98-desktop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        var(--win98-bg);
}

/* Win98 Window */
.win98-window {
    flex: 1;
    margin: 8px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    box-shadow: 1px 1px 0 #000;
}

/* Title Bar */
.win98-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 4px;
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: bold;
}

.titlebar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.titlebar-icon {
    font-size: 14px;
}

.titlebar-buttons {
    display: flex;
    gap: 2px;
}

.title-btn {
    width: 18px;
    height: 18px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.title-btn:active {
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

/* Window Content */
.win98-content {
    flex: 1;
    display: flex;
    background: var(--win98-white);
    overflow: hidden;
}

/* Desktop Icons Sidebar */
.desktop-icons-sidebar {
    width: 70px;
    background: var(--win98-bg);
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 2px solid;
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    cursor: pointer;
    text-align: center;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.desktop-icon .icon-img {
    font-size: 28px;
}

.desktop-icon span {
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    word-break: break-word;
    line-height: 1.2;
}

/* Content Area */
.content-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(0, 128, 128, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 255, 255, 0.95) 100%);
}

.content-section {
    position: absolute;
    inset: 0;
    padding: 30px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}

.content-section.active {
    opacity: 1;
    pointer-events: auto;
}

/* Home Section */
#section-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-title {
    font-family: var(--font-serif);
    font-size: 72px;
    font-weight: 900;
    color: #2c2c2c;
    margin-bottom: 8px;
    letter-spacing: -2px;
}

.home-subtitle {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    color: #555;
    font-style: italic;
    margin-bottom: 40px;
}

.home-nav {
    display: flex;
    gap: 24px;
}

.home-nav a {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: #000080;
    text-decoration: underline;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.home-nav a:hover {
    color: #0066cc;
}

.home-footer {
    font-size: 11px;
    color: #888;
    padding: 16px 0;
}

/* Back Button */
.back-btn {
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    padding: 6px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 20px;
}

.back-btn:active {
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

/* Section Headers */
.content-section h2 {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 24px;
}

.content-section h3 {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.content-section p {
    font-family: var(--font-mono);
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Skills Grid */
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.skills-grid span {
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    padding: 6px 14px;
    font-size: 12px;
    font-family: var(--font-mono);
}

/* Experience */
.exp-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exp-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

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

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.exp-date {
    font-size: 11px;
    color: #888;
    font-family: var(--font-mono);
}

.exp-company {
    color: #000080 !important;
    font-weight: 500;
    margin-bottom: 8px !important;
}

.exp-desc {
    margin-bottom: 0 !important;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.project-card {
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.project-card:hover {
    transform: translateY(-2px);
}

.project-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.project-card h3 {
    margin-bottom: 8px;
}

.project-card p {
    margin-bottom: 0;
    font-size: 11px;
}

/* Contact */
.contact-intro {
    font-size: 16px !important;
    margin-bottom: 24px !important;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    text-decoration: none;
    color: #333;
    font-family: var(--font-mono);
    font-size: 13px;
    transition: background 0.2s;
}

.contact-link:hover {
    background: #d4d4d4;
}

.contact-icon {
    font-size: 20px;
}

/* Win98 Taskbar */
.win98-taskbar {
    height: 32px;
    background: var(--win98-gray);
    border-top: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    display: flex;
    align-items: center;
    padding: 2px 4px;
    gap: 4px;
}

.start-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-light) var(--win98-dark) var(--win98-dark) var(--win98-light);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.start-button:active {
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

.start-logo {
    font-size: 14px;
}

.taskbar-divider {
    width: 2px;
    height: 24px;
    background: linear-gradient(180deg, var(--win98-dark), var(--win98-light));
    margin: 0 4px;
}

.taskbar-items {
    flex: 1;
    display: flex;
    gap: 4px;
}

.taskbar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
    font-size: 11px;
    font-family: var(--font-mono);
    max-width: 160px;
}

.taskbar-item.active {
    background: #fff;
}

.taskbar-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
}

.tray-icon {
    font-size: 12px;
}

.tray-time {
    font-size: 11px;
    font-family: var(--font-mono);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .terminal-body {
        font-size: 14px;
        min-height: 300px;
    }
    
    .overlay-info {
        display: none;
    }
    
    .scene-instructions {
        font-size: 10px;
        padding: 6px 12px;
    }
}

/* ================================================
   DESKTOP OVERLAY (Win95 Desktop Style)
   Rendered as CSS3D object on the monitor screen
   ================================================ */
.desktop-overlay {
    /* Full screen by default - will be styled via JS too */
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, 
        #5c9ce5 0%, 
        #4a8fd8 25%, 
        #3d7fc4 50%, 
        #88c0f0 75%, 
        #95d4f5 100%);
    background-image: 
        radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, 
            #5c9ce5 0%, 
            #4a8fd8 25%, 
            #3d7fc4 50%, 
            #88c0f0 75%, 
            #95d4f5 100%);
    font-family: 'Tahoma', 'MS Sans Serif', 'Segoe UI', sans-serif;
    overflow: hidden;
    z-index: 1000;
}

/* CRT Monitor Effect */
.desktop-crt-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

/* Scanlines */
.desktop-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 101;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.015) 0px,
        rgba(0, 0, 0, 0.015) 1px,
        transparent 1px,
        transparent 2px
    );
}

/* Desktop Icons Container - Left Side */
.desktop-icons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}

/* Individual Desktop Icon */
.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    padding: 4px;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
}

.desktop-icon:hover {
    background: rgba(0, 0, 128, 0.25);
    border: 1px dotted #ffffff;
}

.desktop-icon.selected {
    background: rgba(0, 0, 128, 0.4);
    border: 1px dotted #ffffff;
}

.desktop-icon .icon-image {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-icon .icon-image img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.desktop-icon span {
    font-size: 11px;
    color: #ffffff;
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.9),
        -1px -1px 1px rgba(0, 0, 0, 0.5);
    word-break: break-word;
    line-height: 1.2;
    max-width: 68px;
}

/* Desktop Icon with emoji */
.desktop-icon .icon-image {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* ================================================
   PORTFOLIO WINDOW - Sidebar Layout
   ================================================ */

.portfolio-window {
    position: absolute;
    width: 90%;
    max-width: 900px;
    height: 80%;
    max-height: 600px;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 
        2px 2px 0 #000,
        inset 1px 1px 0 #fff;
    z-index: 50;
    display: flex;
    flex-direction: column;
}

/* Win95 Title Bar */
.win95-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 4px;
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    font-size: 12px;
    font-weight: bold;
    user-select: none;
}

.titlebar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.titlebar-icon {
    font-size: 14px;
}

.titlebar-text {
    font-weight: bold;
}

.titlebar-buttons {
    display: flex;
    gap: 2px;
}

.win-btn {
    width: 16px;
    height: 14px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    font-size: 10px;
    font-family: 'Tahoma', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-weight: bold;
}

.win-btn:hover {
    background: #d4d4d4;
}

.win-btn:active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
}

/* Window Body - Contains Sidebar and Content */
.window-body {
    flex: 1;
    display: flex;
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    margin: 2px;
    overflow: hidden;
}

/* Sidebar Navigation */
.window-sidebar {
    width: 180px;
    min-width: 180px;
    background: linear-gradient(180deg, #f4f4f4 0%, #e0e0e0 100%);
    border-right: 2px solid #808080;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.sidebar-header {
    padding: 20px 16px;
    background: linear-gradient(180deg, #000080 0%, #0a0a6e 100%);
    color: white;
    text-align: left;
    border-bottom: 2px solid #000050;
}

.sidebar-name {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 6px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.sidebar-tagline {
    font-size: 12px;
    opacity: 0.9;
    font-style: italic;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    flex: 1;
}

.sidebar-nav .nav-item {
    display: block;
    padding: 10px 16px;
    color: #000;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-left: 4px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}

.sidebar-nav .nav-item:hover {
    background: rgba(0, 0, 128, 0.1);
    border-left-color: #000080;
}

.sidebar-nav .nav-item.active {
    background: rgba(0, 0, 128, 0.2);
    border-left-color: #000080;
    color: #000080;
}

/* Main Content Area */
.window-content {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    background: #ffffff;
    font-size: 12px;
    color: #000;
}

/* Custom scrollbar for Win95 look */
.window-content::-webkit-scrollbar {
    width: 16px;
}

.window-content::-webkit-scrollbar-track {
    background: var(--win98-gray);
    border: 1px solid #808080;
}

.window-content::-webkit-scrollbar-thumb {
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
}

.window-content::-webkit-scrollbar-button {
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    height: 16px;
}

/* Content Sections (only one visible at a time) */
.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

/* Typography */
.content-section h1 {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 24px;
    color: #000;
    margin-bottom: 8px;
    font-weight: normal;
}

.content-section h2 {
    font-size: 16px;
    color: #000;
    margin: 20px 0 12px;
    font-weight: bold;
}

.content-section h3 {
    font-size: 13px;
    color: #000;
    margin: 12px 0 8px;
}

.welcome-title {
    font-size: 28px !important;
    margin-bottom: 4px !important;
}

.welcome-subtitle {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}

.welcome-text {
    line-height: 1.7;
    margin-bottom: 12px;
    color: #333;
}

.welcome-text a {
    color: #000080;
    text-decoration: underline;
}

.welcome-text a:hover {
    color: #0000ff;
}

/* Resume Box */
.resume-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0f0f0;
    border: 1px solid #808080;
    padding: 12px 16px;
    margin: 16px 0;
}

.resume-icon {
    font-size: 32px;
}

.resume-text {
    font-size: 11px;
    line-height: 1.5;
}

.resume-text a {
    color: #000080;
    text-decoration: underline;
}

/* About Section */
.about-text {
    line-height: 1.7;
    margin-bottom: 12px;
    color: #333;
}

/* Skills Grid */
.skills-grid {
    display: flex;
    gap: 20px;
    margin-top: 12px;
}

.skill-category {
    flex: 1;
}

.skill-category h3 {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
}

.skill-category ul {
    list-style: none;
    padding: 0;
}

.skill-category li {
    font-size: 11px;
    padding: 4px 0;
    color: #333;
}

.skill-category li:before {
    content: "• ";
    color: #000080;
}

/* Experience Items */
.experience-item {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.exp-header h3 {
    margin: 0;
    font-size: 12px;
    color: #000080;
}

.exp-date {
    font-size: 10px;
    color: #666;
}

.exp-company {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}

.experience-item p {
    font-size: 11px;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

/* Project Cards */
.project-card {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.project-card h3 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #000;
}

.project-card p {
    font-size: 11px;
    color: #555;
    margin-bottom: 8px;
}

.project-card a {
    font-size: 11px;
    color: #000080;
    text-decoration: none;
}

.project-card a:hover {
    text-decoration: underline;
}

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 12px;
    text-decoration: none;
    color: #000;
    font-size: 11px;
    transition: background 0.15s ease;
}

.contact-card:hover {
    background: #e8e8e8;
}

.contact-icon {
    font-size: 20px;
}

/* Window Status Bar */
.window-statusbar {
    padding: 2px 8px;
    background: var(--win98-gray);
    border-top: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    font-size: 10px;
    color: #333;
}

/* Taskbar Item (active indicator) */
.taskbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    height: 22px;
    background: #fff;
    border: 2px solid;
    border-color: #404040 #dfdfdf #dfdfdf #404040;
    font-size: 11px;
    max-width: 160px;
    font-weight: bold;
    font-family: 'Tahoma', sans-serif;
}

/* Win95 Taskbar */
.win95-taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--win98-gray);
    border-top: 2px solid #dfdfdf;
    display: flex;
    align-items: center;
    padding: 2px 4px;
    gap: 4px;
    z-index: 60;
}

.start-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    height: 22px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    font-family: 'Tahoma', sans-serif;
}

.start-btn:hover {
    background: #d4d4d4;
}

.start-btn:active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
}

.start-logo {
    font-size: 13px;
}

.taskbar-divider {
    width: 2px;
    height: 20px;
    background: linear-gradient(to right, #808080, #fff);
    margin: 0 2px;
}

.taskbar-windows {
    flex: 1;
    display: flex;
    gap: 2px;
    overflow: hidden;
}

.taskbar-tray {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    height: 22px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
}

.taskbar-tray .tray-icon {
    font-size: 12px;
}

.taskbar-tray .tray-time {
    font-size: 11px;
    font-family: 'Tahoma', sans-serif;
}
/* ================================================
   START MENU
   ================================================ */

.start-menu {
    position: absolute;
    bottom: 30px;
    left: 2px;
    width: 200px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
    z-index: 100;
}

.start-menu-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to top, #000080, #1084d0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
}

.start-menu-brand {
    color: #c0c0c0;
    font-size: 16px;
    font-weight: bold;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    letter-spacing: 2px;
}

.start-menu-content {
    margin-left: 24px;
    padding: 4px 0;
}

.start-menu-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 11px;
    gap: 8px;
}

.start-menu-item:hover {
    background: #000080;
    color: white;
}

.start-menu-item .menu-icon {
    width: 20px;
    text-align: center;
}

.start-menu-item .menu-arrow {
    margin-left: auto;
    font-size: 8px;
}

.start-menu-divider {
    height: 1px;
    background: linear-gradient(to right, #808080, #c0c0c0, #808080);
    margin: 4px 8px 4px 32px;
}

/* ================================================
   WIN95 DIALOGS
   ================================================ */

.win95-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
    z-index: 200;
}

.dialog-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.dialog-close {
    width: 16px;
    height: 14px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.dialog-content {
    display: flex;
    padding: 16px;
    gap: 12px;
}

.dialog-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.dialog-text {
    flex: 1;
}

.dialog-text p {
    font-size: 11px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.dialog-text label {
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
}

.dialog-input {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    font-family: 'Tahoma', sans-serif;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    background: white;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px 12px;
}

.dialog-btn {
    padding: 4px 20px;
    font-size: 11px;
    font-family: 'Tahoma', sans-serif;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    cursor: pointer;
}

.dialog-btn:hover {
    background: #d4d4d4;
}

.dialog-btn:active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
}

/* ================================================
   NOTEPAD WINDOW
   ================================================ */

.notepad-window {
    position: absolute;
    width: 400px;
    height: 350px;
    top: 100px;
    left: 300px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 2px 2px 0 #000;
    z-index: 70;
    display: flex;
    flex-direction: column;
}

.notepad-menubar {
    display: flex;
    gap: 16px;
    padding: 2px 8px;
    background: var(--win98-gray);
    font-size: 11px;
    border-bottom: 1px solid #808080;
}

.notepad-menubar span {
    cursor: pointer;
}

.notepad-menubar span:hover {
    text-decoration: underline;
}

.notepad-content {
    flex: 1;
    padding: 4px;
    font-family: 'Fixedsys', 'Courier New', monospace;
    font-size: 13px;
    border: none;
    resize: none;
    background: white;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    margin: 2px;
    line-height: 1.4;
}

.notepad-content:focus {
    outline: none;
}

/* ================================================
   CMD / DOS WINDOW
   ================================================ */

.cmd-window {
    position: absolute;
    width: 500px;
    height: 300px;
    top: 80px;
    left: 200px;
    background: #000;
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 2px 2px 0 #000;
    z-index: 75;
    display: flex;
    flex-direction: column;
}

.cmd-titlebar {
    background: linear-gradient(90deg, #808080, #c0c0c0);
}

.cmd-titlebar .titlebar-text {
    color: #000;
}

.cmd-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px;
    font-family: 'Fixedsys', 'Courier New', monospace;
    font-size: 14px;
    color: #c0c0c0;
    background: #000;
    overflow: hidden;
}

.cmd-output {
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.cmd-input-line {
    display: flex;
    align-items: center;
}

.cmd-prompt {
    color: #c0c0c0;
    margin-right: 4px;
}

.cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #c0c0c0;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    caret-color: #c0c0c0;
}

/* ================================================
   BROWSER WINDOW (Internet Explorer style)
   ================================================ */

.browser-window {
    position: absolute;
    width: 700px;
    height: 500px;
    top: 50px;
    left: 150px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 2px 2px 0 #000;
    z-index: 70;
    display: flex;
    flex-direction: column;
}

.browser-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--win98-gray);
    border-bottom: 1px solid #808080;
}

.browser-btn {
    padding: 4px 8px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    cursor: pointer;
    min-width: 24px;
}

.browser-btn:active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
}

.browser-address-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.address-label {
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
}

.address-input {
    flex: 1;
    padding: 3px;
    border: 2px solid;
    border-color: #404040 #dfdfdf #dfdfdf #404040;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    background: white;
}

.browser-content {
    flex: 1;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
}

.browser-content::-webkit-scrollbar {
    width: 16px;
}

.browser-content::-webkit-scrollbar-track {
    background: var(--win98-gray);
}

.browser-content::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
}

.browser-statusbar {
    padding: 4px 8px;
    background: var(--win98-gray);
    border-top: 2px solid;
    border-color: #dfdfdf #404040;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    color: #000;
}

/* ================================================
   GAMES WINDOW
   ================================================ */

.games-window {
    position: absolute;
    width: 350px;
    height: 400px;
    top: 60px;
    left: 400px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 2px 2px 0 #000;
    z-index: 65;
    display: flex;
    flex-direction: column;
}

.games-content {
    flex: 1;
    padding: 12px;
    background: white;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    margin: 2px;
    overflow: auto;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.game-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    cursor: pointer;
    text-align: center;
}

.game-item:hover {
    background: #d4d4d4;
}

.game-item:active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
}

.game-item .game-icon {
    font-size: 32px;
    margin-bottom: 4px;
}

.game-item span {
    font-size: 11px;
    font-weight: bold;
}

.game-canvas-container {
    background: #000;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    position: relative;
}

#game-canvas {
    display: block;
}

.game-score {
    position: absolute;
    top: 4px;
    right: 8px;
    color: #0f0;
    font-family: 'Fixedsys', monospace;
    font-size: 12px;
}

/* ================================================
   DOOM WINDOW
   ================================================ */

.doom-window {
    position: absolute;
    width: 680px;
    height: 520px;
    top: 50px;
    left: 200px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: 2px 2px 0 #000;
    z-index: 70;
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 300px;
}

.doom-content {
    flex: 1;
    padding: 2px;
    background: #000;
    border: 2px solid;
    border-color: #808080 #dfdfdf #dfdfdf #808080;
    margin: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#doom-canvas-container {
    flex: 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

#jsdos-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: fill !important;
}

.doom-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px;
    background: var(--win98-gray);
    border-top: 1px solid #808080;
}

.doom-btn {
    padding: 4px 12px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.doom-btn:hover {
    background: #e4e4e4;
}

.doom-btn:active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
}

.doom-info {
    margin-left: auto;
    font-size: 11px;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    color: #000;
}

/* ================================================
   TASKBAR ITEMS - Additional Windows
   ================================================ */

.taskbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    height: 22px;
    background: var(--win98-gray);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    font-size: 11px;
    cursor: pointer;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taskbar-item.active {
    border-color: #404040 #dfdfdf #dfdfdf #404040;
    background: #d4d4d4;
}

.taskbar-item:hover {
    background: #e4e4e4;
}

/* Window draggable styles */
.win95-window.dragging {
    opacity: 0.9;
}

.win95-window .win95-titlebar {
    cursor: move;
}

/* Minimize/maximize effects */
.win95-window.minimized {
    display: none !important;
}