:root {
    --black: #050509;
    --black-soft: #090a11;

    --panel: #0e1019;
    --panel-light: #151823;

    --white: #eeeeee;
    --gray: #9296a5;
    --dark-gray: #555968;

    --cyan: #50f6ff;
    --cyan-soft: rgba(80, 246, 255, 0.15);

    --magenta: #ff4fc8;
    --magenta-soft: rgba(255, 79, 200, 0.15);

    --yellow: #ffe45c;

    --border: #282b39;

    --max-width: 1240px;
}


/* ==============================================
   RESET
============================================== */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    min-height: 100vh;

    margin: 0;

    color: var(--white);

    background:
        linear-gradient(
            rgba(255,255,255,0.016) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.016) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% 0%,
            #171226 0%,
            #090910 42%,
            #040406 100%
        );

    background-size:
        35px 35px,
        35px 35px,
        auto;

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

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


/* ==============================================
   SCREEN TEXTURE
============================================== */

.screen-noise {
    position: fixed;

    inset: 0;

    z-index: 100;

    pointer-events: none;

    opacity: 0.13;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 3px
        );
}


/* ==============================================
   HEADER
============================================== */

.arcade-header {
    position: relative;

    z-index: 10;

    border-bottom: 1px solid var(--border);

    background: rgba(5,5,9,0.88);

    backdrop-filter: blur(12px);
}


.header-inner {
    width: min(calc(100% - 40px), var(--max-width));
    min-height: 68px;

    margin: 0 auto;

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

    gap: 30px;
}


.brand {
    color: var(--white);

    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}


.brand span {
    color: var(--cyan);

    text-shadow:
        0 0 10px rgba(80,246,255,0.65);
}


.arcade-nav {
    display: flex;
    align-items: center;

    gap: 24px;
}


.arcade-nav a {
    color: #787c8a;

    font-size: 0.65rem;

    letter-spacing: 0.08em;

    transition:
        color 120ms ease,
        text-shadow 120ms ease;
}


.arcade-nav a:hover {
    color: var(--cyan);

    text-shadow:
        0 0 8px rgba(80,246,255,0.5);
}


/* ==============================================
   MARQUEE
============================================== */

.marquee {
    position: relative;

    padding: 68px 20px 55px;

    border-bottom: 1px solid var(--border);
}


.marquee-inner {
    width: min(100%, 900px);

    margin: 0 auto;

    text-align: center;
}


.marquee-copy {
    padding: 28px 20px;

    background:
        linear-gradient(
            180deg,
            #181422,
            #0d0b13
        );

    border-top: 1px solid #3c344c;
    border-bottom: 1px solid #3c344c;

    box-shadow:
        inset 0 0 45px rgba(255,79,200,0.035),
        0 0 45px rgba(0,0,0,0.35);
}


.system-label {
    margin: 0 0 9px;

    color: var(--gray);

    font-size: 0.57rem;

    letter-spacing: 0.23em;
}


.marquee h1 {
    margin: 0;

    color: #ffffff;

    font-family:
        Arial Black,
        Impact,
        sans-serif;

    font-size: clamp(4.5rem, 13vw, 8rem);
    font-style: italic;

    letter-spacing: -0.045em;
    line-height: 0.82;

    text-shadow:
        3px 3px 0 #4b1f75,
        6px 6px 0 #1f5a78,
        0 0 25px rgba(80,246,255,0.22);
}


.marquee-subtitle {
    margin: 18px 0 0;

    color: var(--yellow);

    font-size: 0.68rem;

    letter-spacing: 0.28em;

    animation: pulse-text 1.6s ease-in-out infinite;
}


@keyframes pulse-text {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}


/* ==============================================
   MARQUEE LIGHTS
============================================== */

.marquee-lights {
    height: 16px;

    display: grid;
    grid-template-columns: repeat(10, 1fr);

    align-items: center;

    gap: 25px;

    padding: 0 20px;
}


.marquee-lights span {
    width: 7px;
    height: 7px;

    justify-self: center;

    background: var(--yellow);

    border-radius: 50%;

    box-shadow:
        0 0 7px var(--yellow),
        0 0 15px rgba(255,228,92,0.55);
}


.marquee-lights span:nth-child(even) {
    background: var(--magenta);

    box-shadow:
        0 0 7px var(--magenta),
        0 0 15px rgba(255,79,200,0.4);
}


/* ==============================================
   GAME SELECT
============================================== */

.game-select {
    width: min(calc(100% - 40px), var(--max-width));

    margin: 0 auto;

    padding: 70px 0 95px;
}


.section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

    color: #717585;

    font-size: 0.62rem;

    letter-spacing: 0.13em;
}


.section-bar > div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #bbc0cc;
}


.blink-light {
    width: 7px;
    height: 7px;

    background: #57ff85;

    border-radius: 50%;

    box-shadow:
        0 0 9px rgba(87,255,133,0.8);

    animation: blink 1.2s infinite;
}


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


/* ==============================================
   CABINETS
============================================== */

.cabinet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


.cabinet {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #171923,
            #0c0d14
        );

    border: 1px solid #303341;
    border-radius: 6px;

    box-shadow:
        0 25px 55px rgba(0,0,0,0.3);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.cabinet:hover {
    transform: translateY(-4px);
}


.cabinet-cyan:hover {
    border-color: rgba(80,246,255,0.42);

    box-shadow:
        0 28px 65px rgba(0,0,0,0.38),
        0 0 30px rgba(80,246,255,0.07);
}


.cabinet-magenta:hover {
    border-color: rgba(255,79,200,0.42);

    box-shadow:
        0 28px 65px rgba(0,0,0,0.38),
        0 0 30px rgba(255,79,200,0.07);
}


/* ==============================================
   CABINET HEADER
============================================== */

.cabinet-top {
    min-height: 44px;

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

    padding: 0 15px;

    border-bottom: 1px solid var(--border);

    background: #0b0c12;

    color: #686c79;

    font-size: 0.56rem;

    letter-spacing: 0.1em;
}


.game-status {
    color: #57d77c;
}


/* ==============================================
   CRT
============================================== */

.crt-shell {
    margin: 17px;

    padding: 9px;

    background:
        linear-gradient(
            145deg,
            #363846,
            #151720
        );

    border:
        1px solid #444755;

    border-radius: 9px;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.75);
}


.crt-screen {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: black;

    border: 2px solid #090a0d;
    border-radius: 13px;

    box-shadow:
        inset 0 0 35px rgba(0,0,0,0.8);
}


/*
   Actual game running behind the glass.
   pointer-events prevents the preview from stealing clicks.
*/

.game-preview {
    position: absolute;

    top: 0;
    left: 0;

    width: 160%;
    height: 160%;

    border: 0;

    transform:
        scale(0.625);

    transform-origin:
        top left;

    pointer-events: none;
}


.preview-glass {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 56%,
            rgba(0,0,0,0.37) 100%
        );

    box-shadow:
        inset 0 0 24px rgba(0,0,0,0.45);
}


.crt-scanlines {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: 0.25;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            rgba(0,0,0,0.10) 1px,
            rgba(0,0,0,0.10) 3px
        );
}


/* ==============================================
   CABINET INFORMATION
============================================== */

.cabinet-info {
    padding: 14px 20px 21px;
}


.title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.game-type {
    margin: 0 0 7px;

    color: #656978;

    font-size: 0.53rem;

    letter-spacing: 0.13em;
}


.cabinet h2 {
    margin: 0;

    font-family:
        Arial Black,
        Impact,
        sans-serif;

    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-style: italic;

    letter-spacing: -0.035em;
    line-height: 1;
}


.cabinet-cyan h2 {
    color: var(--cyan);

    text-shadow:
        0 0 14px rgba(80,246,255,0.18);
}


.cabinet-magenta h2 {
    color: var(--magenta);

    text-shadow:
        0 0 14px rgba(255,79,200,0.18);
}


.player-count {
    min-width: 39px;

    padding: 5px;

    color: var(--yellow);

    border: 1px solid #585136;

    font-size: 0.62rem;

    text-align: center;
}


.game-description {
    min-height: 78px;

    margin: 20px 0;

    color: #a1a5b1;

    font-family:
        system-ui,
        sans-serif;

    font-size: 0.83rem;
    line-height: 1.65;
}


/* ==============================================
   TAGS
============================================== */

.game-specs {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 21px;
}


.game-specs span {
    padding: 5px 7px;

    color: #707483;

    background: #090a10;

    border: 1px solid #282b37;

    font-size: 0.51rem;
}


/* ==============================================
   PLAY BUTTON
============================================== */

.play-button {
    width: 100%;
    min-height: 49px;

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

    padding: 0 15px;

    border: 1px solid;

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    transition:
        background 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}


.cabinet-cyan .play-button {
    color: var(--cyan);
    background: var(--cyan-soft);

    border-color: rgba(80,246,255,0.3);
}


.cabinet-cyan .play-button:hover {
    color: #061012;
    background: var(--cyan);

    box-shadow:
        0 0 18px rgba(80,246,255,0.25);
}


.cabinet-magenta .play-button {
    color: var(--magenta);
    background: var(--magenta-soft);

    border-color: rgba(255,79,200,0.3);
}


.cabinet-magenta .play-button:hover {
    color: #150511;
    background: var(--magenta);

    box-shadow:
        0 0 18px rgba(255,79,200,0.25);
}


/* ==============================================
   SYSTEM STATUS
============================================== */

.arcade-status {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: #08090e;
}


.status-content {
    width: min(calc(100% - 40px), var(--max-width));

    min-height: 96px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(220px, 2fr)
        repeat(3, 1fr);
}


.status-content > div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 6px;

    padding: 15px 22px;

    border-right: 1px solid var(--border);
}


.status-content > div:first-child {
    border-left: 1px solid var(--border);
}


.status-heading {
    color: #555967;

    font-size: 0.52rem;

    letter-spacing: 0.13em;
}


.status-content strong {
    color: #a2a6b0;

    font-size: 0.65rem;
    font-weight: 500;
}


.status-content > div:first-child strong {
    color: #57d77c;
}


/* ==============================================
   FOOTER
============================================== */

.arcade-footer {
    width: min(calc(100% - 40px), var(--max-width));

    min-height: 90px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 20px;

    color: #4e5260;

    font-size: 0.55rem;

    letter-spacing: 0.07em;
}


.arcade-footer a {
    justify-self: end;

    transition: color 120ms ease;
}


.arcade-footer a:hover {
    color: var(--cyan);
}


.footer-center {
    color: var(--yellow);

    animation: pulse-text 1.6s infinite;
}


/* ==============================================
   RESPONSIVE
============================================== */

@media (max-width: 850px) {

    .cabinet-grid {
        grid-template-columns: 1fr;
    }


    .game-description {
        min-height: auto;
    }


    .status-content {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .status-content > div {
        border-bottom: 1px solid var(--border);
    }

}


@media (max-width: 600px) {

    .header-inner {
        width: calc(100% - 24px);
    }


    .arcade-nav {
        gap: 11px;
    }


    .arcade-nav a {
        font-size: 0.52rem;
    }


    .marquee {
        padding-top: 45px;
    }


    .marquee h1 {
        font-size: clamp(4rem, 22vw, 6rem);
    }


    .marquee-lights {
        gap: 10px;
    }


    .game-select {
        width: calc(100% - 24px);

        padding-top: 50px;
    }


    .section-bar {
        font-size: 0.5rem;
    }


    .crt-shell {
        margin: 10px;
    }


    .cabinet-info {
        padding:
            14px
            15px
            17px;
    }


    .status-content {
        width: calc(100% - 24px);
    }


    .arcade-footer {
        width: calc(100% - 24px);

        grid-template-columns:
            1fr
            1fr;
    }


    .footer-center {
        display: none;
    }

}