:root {
    --hm-red: #ff2c14;
    --hm-orange: #ff6714;
    --hm-hot: #ffb13c;

    --hm-white: #f3f6f7;
    --hm-muted: rgba(243, 246, 247, 0.48);

    --hm-black: #020202;
    --hm-panel: rgba(7, 5, 5, 0.74);

    --hm-line:
        rgba(255, 58, 20, 0.42);

    --hm-line-soft:
        rgba(255, 58, 20, 0.12);

    --hm-glow:
        0 0 8px rgba(255, 49, 18, 0.7),
        0 0 24px rgba(255, 49, 18, 0.22);
}

html,
body {
    overflow: hidden;
    background: var(--hm-black);
    color: var(--hm-white);

    font-family:
        "Courier New",
        Courier,
        monospace;
}

body {
    position: relative;
    min-height: 100vh;
}

#hellmode-engine {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    z-index: 0;
}

.hud {
    position: fixed;
    inset: 0;

    z-index: 5;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    padding: 20px;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;
}

body.is-online .hud {
    opacity: 1;
    visibility: visible;
}

.hud-header {
    position: relative;

    min-height: 42px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 24px;

    padding: 0 18px;

    border-top: 1px solid var(--hm-line);
    border-bottom: 1px solid var(--hm-line-soft);

    background:
        linear-gradient(
            90deg,
            rgba(255, 48, 15, 0.06),
            transparent 28%,
            transparent 72%,
            rgba(255, 48, 15, 0.06)
        );

    color: rgba(255, 255, 255, 0.5);

    font-size: 10px;
    letter-spacing: 0.16em;
}

.hud-header::before,
.hud-header::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 7px;
    height: 7px;

    background: var(--hm-red);

    transform:
        translateY(-50%)
        rotate(45deg);

    box-shadow: var(--hm-glow);
}

.hud-header::before {
    left: -3px;
}

.hud-header::after {
    right: -3px;
}

.hud-header__group {
    display: flex;
    align-items: center;

    gap: 12px;

    white-space: nowrap;
}

.hud-header__group:last-child {
    justify-content: flex-end;
}

.hud-header strong,
.hud-header__center strong {
    color: var(--hm-red);
    font-weight: 500;
}

.hud-header__center {
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
}

.hud-light {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--hm-orange);

    box-shadow:
        0 0 8px var(--hm-orange),
        0 0 20px rgba(255, 103, 20, 0.6);
}

.hud-main {
    position: relative;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(210px, 270px)
        minmax(400px, 1fr)
        minmax(210px, 270px);

    align-items: center;

    gap: clamp(16px, 2vw, 34px);

    padding: 16px 0;
}

.hud-column {
    position: relative;

    display: grid;
    gap: 18px;

    z-index: 4;
}

/* The core is absolutely positioned and does not occupy a grid cell.
   Lock both side columns to their intended tracks. */
.hud-column--left {
    grid-column: 1;
}

.hud-column--right {
    grid-column: 3;
}

.hud-core {
    /* Lock the core to the actual browser viewport, not the HUD grid row. */
    position: fixed;
    top: 50vh;
    left: 50vw;

    width: min(68vh, 680px, 48vw);
    aspect-ratio: 1;

    margin: 0;
    transform: translate(-50%, -50%);

    display: grid;
    place-items: center;

    z-index: 2;
}

.core-ring {
    position: absolute;

    border-radius: 50%;
}

.core-ring--outer {
    inset: 0;

    border:
        1px solid
        rgba(255, 77, 24, 0.24);

    box-shadow:
        inset 0 0 80px
        rgba(255, 40, 10, 0.025);
}

.core-ring--outer::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: 50%;

    border-top:
        3px solid
        var(--hm-red);

    border-right:
        3px solid transparent;

    border-bottom:
        3px solid transparent;

    border-left:
        3px solid transparent;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 44, 20, 0.9)
        );
}

.core-ring--ticks {
    inset: 7%;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 79, 27, 0.8)
                0deg 0.45deg,
            transparent
                0.45deg 4.8deg
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 46%,
            #000 46.3% 48.7%,
            transparent 49%
        );

    opacity: 0.72;
}

.core-ring--middle {
    inset: 15%;

    border:
        1px dashed
        rgba(255, 105, 23, 0.35);
}

.core-ring--middle::after {
    content: "";

    position: absolute;
    inset: 7%;

    border-radius: 50%;

    border-left:
        3px solid
        var(--hm-orange);

    border-right:
        3px solid transparent;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 103, 20, 0.8)
        );
}

.core-ring--inner {
    inset: 25%;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.core-ring--segments {
    inset: 10%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0 6%,
            var(--hm-red) 6% 8%,
            transparent 8% 24%,
            rgba(255, 106, 20, 0.4)
                24% 28%,
            transparent 28% 51%,
            var(--hm-orange) 51% 53%,
            transparent 53% 76%,
            rgba(255, 58, 20, 0.58)
                76% 80%,
            transparent 80%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 43%,
            #000 43.5% 47%,
            transparent 47.5%
        );

    filter:
        drop-shadow(
            0 0 7px
            rgba(255, 59, 18, 0.7)
        );
}

.core-crosshair {
    position: absolute;
    inset: 19%;

    border-radius: 50%;
}

.core-crosshair::before,
.core-crosshair::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    opacity: 0.62;
}

.core-crosshair::before {
    width: 150%;
    height: 1px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--hm-red),
            transparent
        );
}

.core-crosshair::after {
    width: 1px;
    height: 150%;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--hm-red),
            transparent
        );
}

.core-heading {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(900px, 78vw);

    display: grid;
    justify-items: center;
    align-items: center;

    transform: translate(-50%, -50%);

    z-index: 5;
    text-align: center;
}

.core-label {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    align-items: center;

    gap: 16px;

    color: var(--hm-orange);

    font-size:
        clamp(9px, 0.9vw, 14px);

    letter-spacing: 0.42em;

    white-space: nowrap;
}

.core-label span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--hm-red)
        );
}

.core-label span:last-child {
    transform: rotate(180deg);
}

.core-label strong {
    display: block;

    font-weight: 500;
}

.core-label--top {
    margin-bottom: 28px;
}

.core-label--bottom {
    margin-top: 26px;

    color: rgba(255, 255, 255, 0.78);
}

.hellmode-logo {
    
    font-size: clamp(54px, 8vw, 90px);

}
.hellmode-logo span {
    position: relative;
    display: inline-block;

    color: #c91d0f;

    text-shadow:
        0 0 2px #ff3615,
        0 0 7px rgba(255, 48, 12, 0.9),
        0 0 17px rgba(255, 72, 4, 0.62),
        0 0 34px rgba(190, 45, 0, 0.42);

    transition:
        color 90ms linear,
        filter 90ms linear,
        text-shadow 90ms linear,
        transform 90ms linear;
}

.hellmode-logo span.is-flaring {
    color: #ff4318;

    filter:
        brightness(1.55)
        saturate(1.35);

    transform: scaleY(1.025);

    text-shadow:
        0 0 3px #ffb14b,
        0 0 9px #ff6714,
        0 0 20px #e83c00,
        0 0 40px rgba(255, 72, 0, 0.92),
        0 0 78px rgba(145, 30, 0, 0.54);
}

.hellmode-logo span.is-afterglow {
    color: #e82c12;

    filter:
        brightness(1.18);

    text-shadow:
        0 0 3px #ff4b18,
        0 0 12px rgba(255, 75, 8, 0.82),
        0 0 28px rgba(174, 43, 0, 0.58),
        0 0 58px rgba(105, 18, 0, 0.3);
}

@keyframes logoHeat {
    0%,
    100% {
        filter:
            brightness(0.96)
            saturate(1.06);

        text-shadow:
            0 0 2px #ff3512,
            0 0 7px rgba(255, 49, 10, 0.84),
            0 0 16px rgba(255, 70, 4, 0.55),
            0 0 34px rgba(175, 40, 0, 0.34),
            0 0 66px rgba(95, 16, 0, 0.18);
    }

    45% {
        filter:
            brightness(1.08)
            saturate(1.18);

        text-shadow:
            0 0 3px #ff4a16,
            0 0 11px rgba(255, 75, 5, 0.94),
            0 0 24px rgba(224, 51, 0, 0.7),
            0 0 48px rgba(160, 33, 0, 0.45),
            0 0 86px rgba(90, 12, 0, 0.22);
    }

    63% {
        filter:
            brightness(1.01)
            saturate(1.1);
    }
}

@keyframes logoCoreFlicker {
    0%,
    88%,
    91%,
    94%,
    100% {
        opacity: 1;
    }

    89% {
        opacity: 0.93;
        filter: brightness(1.25);
    }

    90% {
        opacity: 1;
        filter: brightness(0.94);
    }

    92% {
        opacity: 0.97;
        filter: brightness(1.16);
    }

    93% {
        opacity: 1;
        filter: brightness(1);
    }
}
/* LOCK HUD STRUCTURE */

.hud {
    position: fixed !important;
    inset: 0 !important;

    display: grid !important;
    grid-template-rows:
        42px
        minmax(0, 1fr)
        30px !important;

    width: 100vw !important;
    height: 100vh !important;

    padding: 20px !important;
}

.hud-header {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: 42px !important;

    grid-row: 1 !important;

    margin: 0 !important;
    padding: 0 18px !important;

    transform: none;
}

.hud-main {
    position: relative !important;

    grid-row: 2 !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
}

.hud-footer {
    position: relative !important;

    grid-row: 3 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: 30px !important;

    margin: 0 !important;
}

.authorization {
    display:none;
}