@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

body {
    background-color: #050505;
    color: #4af626;
    /* Classic Terminal Green */
    font-family: 'VT323', monospace;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* === CRT SCREEN EFFECTS === */
body::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 1003;
    /* Top of everything */
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 1003;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% {
        opacity: 0.02795
    }

    5% {
        opacity: 0.04853
    }

    10% {
        opacity: 0.02713
    }

    15% {
        opacity: 0.05602
    }

    20% {
        opacity: 0.02279
    }

    25% {
        opacity: 0.08868
    }

    30% {
        opacity: 0.02534
    }

    35% {
        opacity: 0.06733
    }

    40% {
        opacity: 0.02604
    }

    45% {
        opacity: 0.06527
    }

    50% {
        opacity: 0.02242
    }

    55% {
        opacity: 0.04029
    }

    60% {
        opacity: 0.02738
    }

    65% {
        opacity: 0.04784
    }

    70% {
        opacity: 0.02871
    }

    75% {
        opacity: 0.05929
    }

    80% {
        opacity: 0.05263
    }

    85% {
        opacity: 0.06283
    }

    90% {
        opacity: 0.04899
    }

    95% {
        opacity: 0.07684
    }

    100% {
        opacity: 0.02498
    }
}

#starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.9;
    /* Much brighter */
}

/* === BOOT SCREEN === */
#boot-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2000;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #4af626;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hidden {
    display: none !important;
}

/* === MAIN ROOM === */
.room {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    /* Middle column narrower, outer closer */
    grid-template-rows: auto auto auto;
    gap: 10px;
    /* Slight gap helps readability */
    align-items: center;
    max-width: 1000px;
    /* Squeeze everything closer to center */
    padding: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Start hidden/scaled if needed, but handled by boot */
    width: 95%;

    /* Reveal Animation handled by JS (fade-in) */
    opacity: 0;
    transition: opacity 1s ease-in;
}

.room.visible {
    opacity: 1;
}

pre {
    font-family: 'VT323', monospace;
    /* More pixelated look */
    font-size: 16px;
    /* Slightly larger due to font difference */
    line-height: 1.0;
    color: #38bdf8;
    /* Cyanish for structures */
    display: inline-block;
    text-align: left;
    text-shadow: 0 0 2px rgba(56, 189, 248, 0.5);
    /* Glow */
}

.item {
    text-align: center;
    position: relative;
    transition: transform 0.2s;
    padding: 5px;
}

.item:hover {
    transform: scale(1.02);
}

.item:hover pre {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(56, 189, 248, 0.8);
}

/* === GLITCH TEXT === */
.glitch-wrapper {
    position: relative;
    display: inline-block;
}

.glitch {
    position: relative;
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(24px, 9999px, 98px, 0);
    }

    5% {
        clip: rect(54px, 9999px, 14px, 0);
    }

    10% {
        clip: rect(6px, 9999px, 66px, 0);
    }

    15% {
        clip: rect(32px, 9999px, 5px, 0);
    }

    20% {
        clip: rect(82px, 9999px, 24px, 0);
    }

    100% {
        clip: rect(65px, 9999px, 86px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(11px, 9999px, 84px, 0);
    }

    5% {
        clip: rect(82px, 9999px, 55px, 0);
    }

    10% {
        clip: rect(53px, 9999px, 6px, 0);
    }

    15% {
        clip: rect(12px, 9999px, 34px, 0);
    }

    20% {
        clip: rect(76px, 9999px, 2px, 0);
    }

    100% {
        clip: rect(2px, 9999px, 6px, 0);
    }
}

/* === SPECIFIC AREAS === */
.cloud-area {
    grid-column: 2;
    grid-row: 1;
    margin-top: -30px;
}

.cloud-area pre {
    color: #fff;
    text-shadow: 0 0 2px #fff;
}

/* Bright white cloud */

.tux-area {
    grid-column: 3;
    grid-row: 3;
    margin-top: -20px;
}

.tux-area pre {
    color: #facc15;
}

/* Yellow Tux */

.server-old-area {
    grid-column: 1;
    grid-row: 3;
    opacity: 0.6;
    margin-top: -20px;
}

.server-old-area pre {
    color: #ef4444;
}

/* Red Old Server */

.grid-area {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: -20px;
}

.grid-area pre {
    color: #f97316;
}

/* Orange Grid */

.shelf-area {
    grid-column: 3;
    grid-row: 1;
    opacity: 0.7;
    margin-bottom: -20px;
}

.server-hv-area {
    grid-column: 1;
    grid-row: 2;
}

.server-hv-area pre {
    color: #ef4444;
}

/* High Voltage Red */

.desk-area {
    grid-column: 2;
    grid-row: 2;
    z-index: 10;
}

.desk-area pre {
    color: #4af626;
}

/* Main Desk Green */

.coffee-area {
    grid-column: 3;
    grid-row: 2;
}

.coffee-area pre {
    color: #8b5cf6;
}

/* Purple Cup */


/* === ANIMATIONS & STATUS === */
.neon-bolt {
    color: #ffff00 !important;
    /* Force override */
    /* Much stronger glow */
    text-shadow:
        0 0 5px #ffff00,
        0 0 10px #ffff00,
        0 0 20px #ffff00,
        0 0 40px #ffaa00;
    /* Warm outer glow */
    animation: bolt-flicker 2s infinite;
    /* NEW ANIMATION */
    font-weight: bold;
    opacity: 1;
}

@keyframes bolt-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 0.99;
        text-shadow:
            0 0 5px #ffff00,
            0 0 10px #ffff00,
            0 0 20px #ffff00,
            0 0 40px #ffaa00;
    }

    20%,
    24%,
    55% {
        opacity: 0.4;
        text-shadow: none;
    }
}

.blink-fast {
    animation: blinker 0.1s step-end infinite;
    color: #0f0;
}

.btn {
    display: inline-block;
    margin-top: 15px;
    color: #000;
    text-decoration: none;
    background-color: #4af626;
    border: 1px solid #4af626;
    padding: 8px 25px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 0 10px #4af626;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn:hover {
    background-color: #000;
    color: #4af626;
    box-shadow: 0 0 20px #4af626, inset 0 0 10px #4af626;
}

.content {
    margin-top: 10px;
    text-align: center;
}

/* Typing Fix: Animation class separated */
.typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #4af626;
    width: 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

/* This class triggers the animation */
.typing.active {
    /* 21 chars + buffer */
    animation: typing 2.5s steps(22, end) forwards, blink-cursor .75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 22ch
    }
}

@keyframes blink-cursor {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #4af626
    }
}

.blink {
    animation: blinker 0.5s step-end infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.status {
    color: #f00;
    font-weight: bold;
    text-shadow: 0 0 5px #f00;
}

.status.ok {
    color: #0f0;
    text-shadow: 0 0 5px #0f0;
}

.label {
    color: #aaa;
    font-size: 12px;
    font-weight: bold;
}

.secret-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.secret-link:hover {
    color: #f00;
    text-shadow: 0 0 5px #f00;
}

/* Handy */
@media (max-width: 600px) {
    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Allow scroll on mobile */
    .room {
        display: flex;
        flex-direction: column;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        padding: 5px;
        gap: 20px;
        opacity: 1;
        /* Skip fade in on mobile for speed */
    }

    pre {
        font-size: 10px;
    }

    /* Slightly simpler */

    .shelf-area,
    .server-old-area {
        display: none;
    }

    .grid-area {
        order: 1;
        margin: 0;
    }

    .desk-area {
        order: 2;
        margin: 0;
    }

    .server-hv-area {
        order: 3;
    }

    .tux-area {
        display: block;
        order: 5;
        margin-top: 10px;
    }

    .typing {
        font-size: 18px;
        width: auto;
        border: none;
        animation: none;
        white-space: normal;
    }

    /* Disable tying on mobile to prevent breakage */

    /* Boot screen simple */
    #boot-screen {
        display: none;
    }

    /* Skip boot on mobile */
}