* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: #080b08;
    background-image: radial-gradient(circle at 20% 10%, rgba(116, 255, 116, 0.05), transparent 32%), radial-gradient(circle at 80% 90%, rgba(120, 160, 255, 0.04), transparent 30%);
    color: #d7ffd7;
    font-family: "VT323", monospace;
    overflow: hidden;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}
/* =========================================================
   CINEMATIC INTRO
   ========================================================= */

#introScreen {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    color: #e8e8e8;

    padding: 40px;

    opacity: 1;

    transition:
        opacity 1.8s ease;
}


#introText {
    width: min(850px, 80vw);

    text-align: center;

    font-family: "VT323", monospace;

    font-size: clamp(
        24px,
        3vw,
        38px
    );

    line-height: 1.5;

    letter-spacing: 1px;

    color: #dedede;

    text-shadow:
        0 0 12px rgba(
            255,
            255,
            255,
            0.08
        );
}


.intro-line {
    opacity: 0;

    transform:
        translateY(8px);

    filter: blur(2px);

    transition:
        opacity 1.6s ease,
        transform 1.6s ease,
        filter 1.6s ease;
}


.intro-line.visible {
    opacity: 1;

    transform:
        translateY(0);

    filter: blur(0);
}


.intro-line.fade {
    opacity: 0;

    transition:
        opacity 1.2s ease;
}


#introScreen.intro-hidden {
    opacity: 0;

    pointer-events: none;
}

#bootScreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    background: #020502;
    color: #8cff8c;
    font-size: 24px;
    line-height: 1.25;
    text-shadow: 0 0 8px rgba(80, 255, 80, 0.35);
}

#bootText {
    max-width: 900px;
}

.boot-line {
    min-height: 1.25em;
    margin-bottom: 4px;
    white-space: pre-wrap;
}

.boot-title {
    margin-bottom: 20px;
    color: #b6ff72;
    font-family: "Press Start 2P", monospace;
    font-size: 32px;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(80, 255, 80, 0.45),
        0 0 18px rgba(80, 255, 80, 0.2);
}

.boot-story {
    color: #a8d8a8;
}

.boot-system {
    color: #75d675;
    font-family: "VT323", monospace;
}

.boot-warning {
    color: #d8ff9b;
    text-shadow:
        0 0 8px rgba(180, 255, 100, 0.35);
}

.boot-node {
    margin: 12px 0;
    color: #ffffff;
    font-family: "Press Start 2P", monospace;
    font-size: 18px;
    letter-spacing: 1px;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.25);
}

#bootCursor {
    display: inline-block;
    margin-top: 8px;
    animation: blink 0.8s infinite;
}

.boot-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

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

#panel {
    position: relative;
    z-index: 1000;
}

#desktop {
    position: relative;
    width: 100vw;
    height: calc(100vh - 48px);
}

#notificationContainer {
    position: fixed;
    top: 62px;
    right: 22px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.system-notification {
    display: flex;
    align-items: center;
    width: 350px;
    min-height: 92px;
    padding: 15px 18px;
    background: #171b17;
    border: 2px solid #5c705c;
    box-shadow: 6px 6px 0 #000;
    color: #d8ffd8;
    cursor: pointer;
    pointer-events: auto;
    animation: notification-in 0.25s ease-out;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    margin-right: 14px;
    color: #b6ff72;
    font-size: 27px;
}

.notification-text {
    min-width: 0;
}

.notification-title {
    color: #b6ff72;
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
}

.notification-from {
    margin-top: 6px;
    color: #ddd;
    font-size: 21px;
}

.notification-preview {
    margin-top: 2px;
    color: #888;
    font-size: 18px;
}

.system-notification:hover {
    background: #202620;
    border-color: #8cff8c;
}

@keyframes notification-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.skip-hint {
    position: absolute;
    top: 24px;
    right: 28px;
    color: #777;
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: skipPulse 1.8s ease-in-out infinite;
}
@keyframes skipPulse {
    50% { opacity: .45; }
}
#introScreen,#bootScreen { position: fixed; }

body.nexus-booting #panel,
body.nexus-booting #desktop,
body.nexus-booting #notificationContainer,
body.nexus-booting #novaMessageBox,
body.nexus-booting #novaMinimized,
body.nexus-booting .nova-history-panel {
    visibility: hidden;
}
#bootScreen { white-space: normal; }