:root {
    --black: #000000;
    --black-soft: #030000;
    --red-abyss: #120000;
    --red-dim: #8d0808;
    --red-muted: #b50d0d;
    --red: #e11414;
    --red-hot: #ff2a2a;
    --text-core: #ffffff;
}

html, body {
    background: var(--black);
    background: radial-gradient(circle at 50% 45%, rgba(180, 0, 0, 0.2), transparent 36rem),
                linear-gradient(180deg, var(--black-soft), var(--black));
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    color: var(--red);
}

.center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.header, .textiboi {
    text-align: center;
    color: var(--text-core);
    font-family: inherit;
    text-shadow:
        1px 1px 0 var(--red-dim),
        2px 2px 0 var(--red-muted),
        3px 3px 0 rgba(225, 20, 20, 0.58),
        0 0 14px rgba(255, 0, 0, 0.18);
    transition: color 180ms ease, text-shadow 180ms ease;
}

.header a, .textiboi a {
    color: inherit;
    text-decoration: none;
}

.header:hover, .textiboi:hover {
    color: var(--text-core);
    text-shadow:
        1px 1px 0 var(--red),
        2px 2px 0 var(--red-hot),
        3px 3px 0 rgba(255, 42, 42, 0.72),
        0 0 16px rgba(255, 0, 0, 0.58),
        0 0 30px rgba(255, 0, 0, 0.34);
}

#status_text.begin {
    text-decoration: underline;
    cursor: pointer;
}

/* Heisenberg Overlay effects */
.scanlines {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.18;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 0, 0, 0.08) 0,
        rgba(255, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 5px
    );
    mix-blend-mode: screen;
}

.edge-vignette {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 0 34%, rgba(0, 0, 0, 0.72) 79%),
        linear-gradient(180deg, rgba(255, 0, 0, 0.08), transparent 12%, transparent 88%, rgba(255, 0, 0, 0.06));
}

.brand-mark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: min(44vw, 25rem);
    opacity: 0.07;
    user-select: none;
    pointer-events: none;
}

.textiboi {
    margin-top: 10px;
    font-size: 0.9rem;
}

.link-row {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

#typElement {
    font-size: 1.1rem;
    color: var(--red-hot);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}