/* ============================= */
/* FONT LOAD */
/* ============================= */

@font-face {
    font-family: "GothicByte";
    src: url("GothicByte.ttf") format("truetype");
}


/* ============================= */
/* CURSORS */
/* ============================= */

body,
a,
td,
table,
img,
div,
p,
span,
li {
    cursor: url("select_enemy_h.cur"), auto;
}


/* ============================= */
/* BASE */
/* ============================= */

body {
    background: black url("BACK.gif") repeat;
    color: #00ff00;
    font-family: "Times New Roman", serif;
    animation: flicker 0.12s infinite;
    position: relative;
    overflow-x: hidden;
}


/* CRT flicker */
@keyframes flicker {
    0% { opacity: 0.98; }
    50% { opacity: 1; }
    100% { opacity: 0.99; }
}


/* scanlines */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,0.35) 3px
    );
    pointer-events: none;
    z-index: 9999;
}


/* brightness sweep */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,0.03),
        transparent
    );
    animation: sweep 6s linear infinite;
    pointer-events: none;
    z-index: 9998;
}

@keyframes sweep {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}


/* ============================= */
/* TEXT */
/* ============================= */

body, td, p, li {
    text-shadow: 0 0 2px #00ff00;
}


/* ============================= */
/* TITLE - CRT COLOR SHIFT */
/* ============================= */

h1 {
    font-family: "GothicByte", serif;
    font-size: 72px;
    color: #ff00ff;
    text-align: center;
    letter-spacing: 4px;

    position: relative;

    /* base glow */
    text-shadow:
        0 0 3px #ff00ff,
        0 0 6px #ff00ff;

    animation: crtShift 4s infinite ease-in-out;
}

/* subtle horizontal RGB drift */
@keyframes crtShift {
    0% {
        text-shadow:
            -1px 0 red,
            1px 0 cyan,
            0 0 3px #ff00ff,
            0 0 6px #ff00ff;
    }
    50% {
        text-shadow:
            1px 0 red,
            -1px 0 cyan,
            0 0 3px #ff00ff,
            0 0 6px #ff00ff;
    }
    100% {
        text-shadow:
            -1px 0 red,
            1px 0 cyan,
            0 0 3px #ff00ff,
            0 0 6px #ff00ff;
    }
}


/* ============================= */
/* LINKS */
/* ============================= */

a {
    color: #00ffff;
    text-decoration: underline;
}

a:visited {
    color: #ff00ff;
}

a:hover {
    color: black;
    background: #00ffff;
    text-shadow: 0 0 6px #00ffff;
}


/* ============================= */
/* BLINK */
/* ============================= */

.blink {
    animation: blink 1.2s steps(2, start) infinite;
}

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


/* ============================= */
/* PANELS */
/* ============================= */

table {
    border: 2px solid #00ff00;
    background: black;
    animation: panelPulse 3s ease-in-out infinite;
}

@keyframes panelPulse {
    0%,100% { box-shadow: 0 0 10px #00ff00; }
    50% { box-shadow: 0 0 18px #00ff00; }
}

td {
    border-bottom: 1px dashed #00ff00;
    padding: 6px;
}


/* ============================= */
/* PAGE FADE */
/* ============================= */

.fade-out {
    animation: fadeOut 0.3s forwards;
}

@keyframes fadeOut {
    to { opacity: 0; }
}


/* ============================= */
/* FLOATING SKULL */
/* ============================= */

.floating-skull {
    position: fixed;
    bottom: -180px;
    left: 50vw;
    width: 140px;
    height: auto;
    opacity: 0.85;
    pointer-events: none;
    z-index: 10;
    image-rendering: pixelated;

    animation: floatUp 20s linear infinite;
}

@keyframes floatUp {
    from { transform: translate(0, 0); }
    to { transform: translate(var(--drift, 0px), -140vh); }
}


/* ============================= */
/* SELECTION */
/* ============================= */

::selection {
    background: #00ff00;
    color: black;
}