:root {
    --bg: #1A1F25;
    --bg-2: #2D3239;
    --bg-3: #3D434A;
    --bg-deep: #0E1318;
    --ink: #0E1318;
    --surface: #E5E8EC;
    --surface-2: #F1F3F6;
    --surface-3: #D5D9DE;
    --teal: #00B4D0;
    --teal-dk: #066D80;
    --orange: #FF6B22;
    --orange-dk: #B84812;
    --gold: #C48A2F;
    --rust: #B8412D;
    --hvt: #A070C8;
    --text: #C8CCD2;
    --text2: #A0A8B0;
    --muted: #888D94;
    --line: rgba(14, 19, 24, 0.85);
    --panel: var(--surface);
    --red: var(--orange);
    --aqua: var(--teal);
    --blue: var(--teal);
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "JetBrains Mono", "Barlow", monospace, sans-serif;
    color: var(--text);
    background: var(--bg);
    position: relative;
}

body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        linear-gradient(rgba(0, 180, 208, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 208, 0.055) 1px, transparent 1px);
    background-size: 48px 48px;
}

body::after {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
}

.page-shell {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 14px 0 40px;
    position: relative;
    z-index: 1;
}

.page-shell::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 20;
    background: linear-gradient(to right, var(--teal) 0%, var(--teal) 60%, var(--orange) 60%, var(--orange) 100%);
}

.page-shell::after {
    content: "";
    position: fixed; bottom: 0; left: 0; right: 0; height: 3px; z-index: 20;
    background: linear-gradient(to right, var(--orange) 0%, var(--orange) 40%, var(--teal) 40%, var(--teal) 100%);
}

/* MARQUEE -------------------------------------------------- */
.marquee {
    overflow: hidden;
    border: 1px solid var(--ink);
    border-top: 3px solid var(--teal);
    border-radius: 0;
    background: var(--bg-2);
    box-shadow: 0 4px 0 var(--orange), var(--shadow);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding: 0;
}

.marquee__copy {
    margin: 0;
    padding: 10px 18px;
    font-family: "Oswald", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--teal);
    white-space: nowrap;
    animation: drift 28s linear infinite;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.sound-toggle {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--orange);
    padding: 0 18px;
    font: inherit;
    font-family: "Oswald", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.sound-toggle:hover {
    background: var(--orange);
    color: #fff;
}

.sound-toggle[aria-pressed="false"] {
    color: var(--muted);
}

.sound-toggle[aria-pressed="false"]:hover {
    color: #fff;
    background: var(--teal-dk);
}

/* HERO ----------------------------------------------------- */
.hero {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr;
    gap: 32px;
    align-items: end;
    padding: 40px 0 28px;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 30px;
    position: relative;
}

.hero::after {
    content: "";
    position: absolute; left: 0; bottom: -4px; width: 40%; height: 3px;
    background: var(--orange);
}

.eyebrow,
.cabinet-card__tag,
.player-bar__label,
.status-panel__label {
    margin: 0 0 8px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
}

.hero h1 {
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 6.8rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--teal);
    text-shadow: 0 0 32px rgba(0, 180, 208, 0.25);
}

.hero h1 span {
    color: var(--orange);
    text-shadow: 0 0 32px rgba(255, 107, 34, 0.25);
}

.hero__lede {
    max-width: 42rem;
    margin: 18px 0 0;
    color: var(--text);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.95rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

.hero__status {
    display: grid;
    gap: 12px;
}

/* STATUS PANEL (cream) ------------------------------------ */
.status-panel {
    position: relative;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    backdrop-filter: none;
    padding: 14px 16px 12px;
}

.status-panel::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(to right, var(--teal) 0%, var(--teal) 60%, var(--orange) 60%, var(--orange) 100%);
}

.status-panel__label {
    color: var(--teal-dk);
}

.status-panel strong {
    display: block;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* CABINET GRID -------------------------------------------- */
.cabinet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.cabinet-card {
    position: relative;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    backdrop-filter: none;
    padding: 14px 16px 18px;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cabinet-card::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
    background: var(--teal);
}

.cabinet-card:hover::before {
    background: var(--orange);
}

.cabinet-card__tag {
    color: var(--orange-dk);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    margin: 0 0 4px;
}

.cabinet-card__banner {
    position: relative;
    z-index: 1;
    min-height: 120px;
    border-radius: 0;
    border: 1px solid var(--ink);
    margin-bottom: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 2px 0 var(--ink);
}

.cabinet-card__icon {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: block;
    image-rendering: pixelated;
    opacity: 0.95;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.cabinet-card__icon::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
}

.cabinet-card__banner::before,
.cabinet-card__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cabinet-card__banner::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%);
}

.cabinet-card__banner::after {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.05) 0,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 3px
        );
    opacity: 0.35;
}

.cabinet-card__glow {
    position: absolute;
    inset: 0;
    opacity: 0.9;
    pointer-events: none;
}

.cabinet-card--blacksite .cabinet-card__glow {
    background:
        radial-gradient(circle at 75% 22%, rgba(104, 184, 255, 0.35), transparent 24%),
        linear-gradient(180deg, rgba(26, 58, 103, 0.6), transparent 55%);
}

.cabinet-card--blacksite .cabinet-card__banner {
    background:
        radial-gradient(circle at 78% 24%, rgba(104, 184, 255, 0.48), transparent 22%),
        linear-gradient(135deg, rgba(17, 42, 70, 0.96), rgba(9, 17, 31, 0.94)),
        linear-gradient(90deg, transparent 0 62%, rgba(255, 255, 255, 0.08) 62% 64%, transparent 64%);
}

.cabinet-card--blacksite .cabinet-card__icon::before {
    background: #9fd4ff;
    box-shadow:
        12px 0 0 #9fd4ff,
        18px 0 0 #9fd4ff,
        24px 0 0 #9fd4ff,
        30px 0 0 #9fd4ff,
        6px 6px 0 #9fd4ff,
        12px 6px 0 #9fd4ff,
        18px 6px 0 #4f9de6,
        24px 6px 0 #4f9de6,
        30px 6px 0 #9fd4ff,
        36px 6px 0 #9fd4ff,
        18px 12px 0 #9fd4ff,
        24px 12px 0 #9fd4ff,
        12px 18px 0 #9fd4ff,
        18px 18px 0 #9fd4ff,
        24px 18px 0 #9fd4ff,
        30px 18px 0 #9fd4ff,
        6px 24px 0 #9fd4ff,
        36px 24px 0 #9fd4ff,
        18px 24px 0 #9fd4ff,
        24px 24px 0 #9fd4ff,
        18px 30px 0 #9fd4ff,
        24px 30px 0 #9fd4ff,
        18px 36px 0 #9fd4ff,
        24px 36px 0 #9fd4ff;
}

.cabinet-card--gridlock .cabinet-card__glow {
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 90, 54, 0.38), transparent 24%),
        linear-gradient(180deg, rgba(76, 18, 18, 0.6), transparent 60%);
}

.cabinet-card--gridlock .cabinet-card__banner {
    background:
        radial-gradient(circle at 78% 22%, rgba(255, 90, 54, 0.46), transparent 20%),
        linear-gradient(135deg, rgba(66, 16, 16, 0.96), rgba(20, 6, 6, 0.96)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 14%, transparent 14% 28%, rgba(255, 255, 255, 0.06) 28% 30%, transparent 30%);
}

.cabinet-card--gridlock .cabinet-card__icon::before {
    background: #ff9a84;
    box-shadow:
        12px 0 0 #ff9a84,
        18px 0 0 #ff9a84,
        24px 0 0 #ff9a84,
        30px 0 0 #ff9a84,
        6px 6px 0 #ff9a84,
        12px 6px 0 #ff9a84,
        18px 6px 0 #ff9a84,
        24px 6px 0 #ff9a84,
        30px 6px 0 #ff9a84,
        36px 6px 0 #ff9a84,
        0 12px 0 #ff9a84,
        6px 12px 0 #ff9a84,
        12px 12px 0 #5b1111,
        18px 12px 0 #ff9a84,
        24px 12px 0 #ff9a84,
        30px 12px 0 #5b1111,
        36px 12px 0 #ff9a84,
        42px 12px 0 #ff9a84,
        6px 18px 0 #ff9a84,
        12px 18px 0 #ff9a84,
        18px 18px 0 #ff9a84,
        24px 18px 0 #ff9a84,
        30px 18px 0 #ff9a84,
        36px 18px 0 #ff9a84,
        12px 24px 0 #ff9a84,
        18px 24px 0 #ff9a84,
        24px 24px 0 #ff9a84,
        30px 24px 0 #ff9a84;
}

.cabinet-card--heist .cabinet-card__glow {
    background:
        radial-gradient(circle at 78% 20%, rgba(67, 230, 208, 0.3), transparent 24%),
        linear-gradient(180deg, rgba(60, 15, 79, 0.56), transparent 58%);
}

.cabinet-card--heist .cabinet-card__banner {
    background:
        radial-gradient(circle at 80% 22%, rgba(67, 230, 208, 0.42), transparent 22%),
        linear-gradient(135deg, rgba(55, 9, 69, 0.96), rgba(17, 7, 29, 0.96)),
        linear-gradient(120deg, transparent 0 58%, rgba(255, 0, 110, 0.2) 58% 68%, transparent 68%);
}

.cabinet-card--heist .cabinet-card__icon::before {
    background: #69ffe2;
    box-shadow:
        12px 0 0 #69ffe2,
        18px 0 0 #69ffe2,
        24px 0 0 #69ffe2,
        30px 0 0 #69ffe2,
        6px 6px 0 #69ffe2,
        12px 6px 0 #69ffe2,
        18px 6px 0 #69ffe2,
        24px 6px 0 #69ffe2,
        30px 6px 0 #69ffe2,
        36px 6px 0 #69ffe2,
        0 12px 0 #69ffe2,
        6px 12px 0 #69ffe2,
        12px 12px 0 #69ffe2,
        18px 12px 0 #0f2233,
        24px 12px 0 #0f2233,
        30px 12px 0 #69ffe2,
        36px 12px 0 #69ffe2,
        42px 12px 0 #69ffe2,
        6px 18px 0 #69ffe2,
        12px 18px 0 #69ffe2,
        18px 18px 0 #69ffe2,
        24px 18px 0 #69ffe2,
        30px 18px 0 #69ffe2,
        36px 18px 0 #69ffe2,
        6px 24px 0 #69ffe2,
        12px 24px 0 #69ffe2,
        30px 24px 0 #69ffe2,
        36px 24px 0 #69ffe2;
}

.cabinet-card--area51 .cabinet-card__glow {
    background:
        radial-gradient(circle at 75% 20%, rgba(124, 255, 101, 0.28), transparent 24%),
        linear-gradient(180deg, rgba(18, 65, 26, 0.58), transparent 58%);
}

.cabinet-card--area51 .cabinet-card__banner {
    background:
        radial-gradient(circle at 80% 22%, rgba(124, 255, 101, 0.34), transparent 22%),
        linear-gradient(135deg, rgba(18, 55, 24, 0.96), rgba(5, 15, 9, 0.96)),
        linear-gradient(90deg, transparent 0 72%, rgba(124, 255, 101, 0.16) 72% 76%, transparent 76%);
}

.cabinet-card--area51 .cabinet-card__icon::before {
    background: #b2ff9f;
    box-shadow:
        18px 0 0 #b2ff9f,
        24px 0 0 #b2ff9f,
        12px 6px 0 #b2ff9f,
        18px 6px 0 #b2ff9f,
        24px 6px 0 #b2ff9f,
        30px 6px 0 #b2ff9f,
        6px 12px 0 #b2ff9f,
        12px 12px 0 #b2ff9f,
        18px 12px 0 #b2ff9f,
        24px 12px 0 #b2ff9f,
        30px 12px 0 #b2ff9f,
        36px 12px 0 #b2ff9f,
        0 18px 0 #b2ff9f,
        6px 18px 0 #b2ff9f,
        12px 18px 0 #08130b,
        18px 18px 0 #b2ff9f,
        24px 18px 0 #b2ff9f,
        30px 18px 0 #08130b,
        36px 18px 0 #b2ff9f,
        42px 18px 0 #b2ff9f,
        12px 24px 0 #b2ff9f,
        18px 24px 0 #b2ff9f,
        24px 24px 0 #b2ff9f,
        30px 24px 0 #b2ff9f,
        18px 30px 0 #b2ff9f,
        24px 30px 0 #b2ff9f;
}

.cabinet-card--court .cabinet-card__glow {
    background:
        radial-gradient(circle at 76% 20%, rgba(255, 191, 71, 0.3), transparent 24%),
        linear-gradient(180deg, rgba(72, 28, 14, 0.58), transparent 58%);
}

.cabinet-card--court .cabinet-card__banner {
    background:
        radial-gradient(circle at 80% 24%, rgba(255, 191, 71, 0.36), transparent 20%),
        linear-gradient(135deg, rgba(74, 22, 12, 0.96), rgba(24, 10, 6, 0.96)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 10%, transparent 10% 100%);
}

.cabinet-card--court .cabinet-card__icon::before {
    background: #ffd68d;
    box-shadow:
        6px 0 0 #ffd68d,
        12px 0 0 #ffd68d,
        18px 0 0 #ffd68d,
        12px 6px 0 #ffd68d,
        24px 6px 0 #ffd68d,
        30px 12px 0 #ffd68d,
        24px 18px 0 #ffd68d,
        18px 24px 0 #ffd68d,
        12px 30px 0 #ffd68d,
        18px 30px 0 #ffd68d,
        24px 30px 0 #ffd68d,
        30px 30px 0 #ffd68d,
        36px 36px 0 #ffd68d,
        30px 42px 0 #ffd68d;
}

.cabinet-card--operator .cabinet-card__glow {
    background:
        radial-gradient(circle at 80% 20%, rgba(140, 119, 255, 0.3), transparent 24%),
        linear-gradient(180deg, rgba(24, 31, 78, 0.58), transparent 58%);
}

.cabinet-card--operator .cabinet-card__banner {
    background:
        radial-gradient(circle at 80% 24%, rgba(140, 119, 255, 0.4), transparent 22%),
        linear-gradient(135deg, rgba(20, 28, 88, 0.96), rgba(7, 11, 30, 0.96)),
        linear-gradient(90deg, transparent 0 58%, rgba(140, 119, 255, 0.18) 58% 68%, transparent 68%);
}

.cabinet-card--operator .cabinet-card__icon::before {
    background: #c5b8ff;
    box-shadow:
        12px 0 0 #c5b8ff,
        18px 0 0 #c5b8ff,
        24px 0 0 #c5b8ff,
        30px 0 0 #c5b8ff,
        6px 6px 0 #c5b8ff,
        12px 6px 0 #c5b8ff,
        18px 6px 0 #c5b8ff,
        24px 6px 0 #c5b8ff,
        30px 6px 0 #c5b8ff,
        36px 6px 0 #c5b8ff,
        0 12px 0 #c5b8ff,
        6px 12px 0 #c5b8ff,
        12px 12px 0 #c5b8ff,
        18px 12px 0 #11183f,
        24px 12px 0 #11183f,
        30px 12px 0 #c5b8ff,
        36px 12px 0 #c5b8ff,
        42px 12px 0 #c5b8ff,
        12px 18px 0 #c5b8ff,
        18px 18px 0 #c5b8ff,
        24px 18px 0 #c5b8ff,
        30px 18px 0 #c5b8ff,
        12px 24px 0 #c5b8ff,
        18px 24px 0 #c5b8ff,
        24px 24px 0 #c5b8ff,
        30px 24px 0 #c5b8ff;
}

.cabinet-card--backgammon .cabinet-card__glow {
    background:
        radial-gradient(circle at 80% 20%, rgba(246, 179, 90, 0.3), transparent 24%),
        linear-gradient(180deg, rgba(83, 45, 20, 0.6), transparent 58%);
}

.cabinet-card--hvt .cabinet-card__glow {
    background:
        radial-gradient(circle at 80% 20%, rgba(176, 112, 216, 0.34), transparent 24%),
        linear-gradient(180deg, rgba(54, 18, 74, 0.6), transparent 58%);
}

.cabinet-card--backgammon .cabinet-card__banner {
    background:
        radial-gradient(circle at 80% 22%, rgba(246, 179, 90, 0.34), transparent 20%),
        linear-gradient(135deg, rgba(88, 45, 18, 0.96), rgba(31, 18, 11, 0.96)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 10%, transparent 10% 50%, rgba(255, 255, 255, 0.06) 50% 60%, transparent 60%);
}

.cabinet-card--hvt .cabinet-card__banner {
    background:
        radial-gradient(circle at 80% 24%, rgba(176, 112, 216, 0.38), transparent 22%),
        linear-gradient(135deg, rgba(54, 18, 74, 0.96), rgba(17, 7, 29, 0.96)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 12%, transparent 12% 100%);
}

.cabinet-card--backgammon .cabinet-card__icon::before {
    background: #ffe0ad;
    box-shadow:
        12px 0 0 #ffe0ad,
        0 6px 0 #ffe0ad,
        6px 6px 0 #ffe0ad,
        12px 6px 0 #ffe0ad,
        18px 6px 0 #ffe0ad,
        0 12px 0 #ffe0ad,
        6px 12px 0 #7a471d,
        12px 12px 0 #7a471d,
        18px 12px 0 #ffe0ad,
        0 18px 0 #ffe0ad,
        6px 18px 0 #ffe0ad,
        12px 18px 0 #ffe0ad,
        18px 18px 0 #ffe0ad,
        30px 0 0 #ffe0ad,
        42px 0 0 #ffe0ad,
        30px 6px 0 #ffe0ad,
        36px 6px 0 #ffe0ad,
        42px 6px 0 #ffe0ad,
        48px 6px 0 #ffe0ad,
        30px 12px 0 #ffe0ad,
        36px 12px 0 #7a471d,
        42px 12px 0 #7a471d,
        48px 12px 0 #ffe0ad,
        30px 18px 0 #ffe0ad,
        36px 18px 0 #ffe0ad,
        42px 18px 0 #ffe0ad,
        48px 18px 0 #ffe0ad;
}

.cabinet-card--hvt .cabinet-card__icon::before {
    background: #f0c8ff;
    box-shadow:
        12px 0 0 #f0c8ff,
        18px 0 0 #f0c8ff,
        24px 0 0 #f0c8ff,
        6px 6px 0 #f0c8ff,
        12px 6px 0 #2d0d3d,
        18px 6px 0 #f0c8ff,
        24px 6px 0 #f0c8ff,
        30px 6px 0 #f0c8ff,
        6px 12px 0 #f0c8ff,
        12px 12px 0 #f0c8ff,
        18px 12px 0 #f0c8ff,
        24px 12px 0 #2d0d3d,
        30px 12px 0 #f0c8ff,
        36px 12px 0 #f0c8ff,
        6px 18px 0 #f0c8ff,
        12px 18px 0 #2d0d3d,
        18px 18px 0 #f0c8ff,
        24px 18px 0 #f0c8ff,
        30px 18px 0 #f0c8ff,
        36px 18px 0 #f0c8ff,
        12px 24px 0 #f0c8ff,
        18px 24px 0 #f0c8ff,
        24px 24px 0 #f0c8ff,
        30px 24px 0 #f0c8ff,
        18px 30px 0 #f0c8ff,
        24px 30px 0 #f0c8ff,
        24px 36px 0 #f0c8ff;
}

.cabinet-card h2,
.player-bar__title h2 {
    position: relative;
    margin: 0 0 6px;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-transform: uppercase;
    z-index: 1;
}

.cabinet-card__desc,
.player-bar__hint {
    position: relative;
    margin: 0;
    color: #3A4048;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    letter-spacing: 0;
    z-index: 1;
    margin-top: auto;
}

.cabinet-card__meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 12px 0 14px;
    z-index: 1;
}

.cabinet-card__meta span {
    border: 1px solid var(--ink);
    border-radius: 0;
    padding: 3px 8px;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink);
    background: var(--surface-2);
}

.play-button,
.lobby-button {
    position: relative;
    z-index: 1;
    border: 1px solid var(--ink);
    border-top: 3px solid var(--orange-dk);
    border-radius: 0;
    padding: 12px 22px;
    font: inherit;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, letter-spacing 120ms ease, border-top-color 120ms ease;
}

.play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--orange);
    color: #fff;
    box-shadow: 0 4px 0 var(--ink);
    text-decoration: none;
}
.play-button::before { content: "▸ "; }

.play-button:hover {
    background: var(--orange-dk);
    letter-spacing: 0.24em;
}

.lobby-button {
    background: var(--surface);
    color: var(--ink);
    border-top-color: var(--teal-dk);
    box-shadow: 0 4px 0 var(--ink);
}
.lobby-button::before { content: "◂ "; }

.lobby-button:hover {
    background: var(--teal);
    color: #fff;
    border-top-color: var(--teal-dk);
}

.player-view[hidden] {
    display: none;
}

.player-view {
    padding-top: 14px;
}

.player-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 14px 18px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    position: relative;
    box-shadow: var(--shadow);
}
.player-bar::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(to right, var(--teal) 0%, var(--teal) 60%, var(--orange) 60%, var(--orange) 100%);
}

.player-bar__label {
    color: var(--teal-dk);
}

.player-bar__hint {
    color: #3A4048;
    font-size: 0.78rem;
}

.screen-stage {
    padding-top: 14px;
}

.screen-stage__frame {
    padding: 10px;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    position: relative;
    box-shadow: var(--shadow);
}
.screen-stage__frame::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(to right, var(--orange) 0%, var(--orange) 40%, var(--teal) 40%, var(--teal) 100%);
}

#gameFrame {
    display: block;
    width: 100%;
    min-height: 78vh;
    border: 0;
    border-radius: 0;
    background: #000;
}

@keyframes drift {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 980px) {
    .hero,
    .cabinet-grid,
    .player-bar {
        grid-template-columns: 1fr;
    }

    .page-shell {
        width: min(100% - 20px, 1240px);
    }

    .player-bar {
        align-items: start;
    }

    #gameFrame {
        min-height: 72vh;
    }
}

@media (max-width: 640px) {
    .marquee {
        padding: 8px;
        border-radius: 24px;
        align-items: stretch;
        flex-direction: column;
    }

    .marquee__copy {
        font-size: 0.76rem;
        letter-spacing: 0.15em;
        white-space: normal;
        animation: none;
        padding: 8px 10px 0;
    }

    .cabinet-card {
        min-height: 300px;
    }

    .cabinet-card h2,
    .player-bar__title h2 {
        font-size: 1.55rem;
    }

    .hero__lede,
    .cabinet-card__desc,
    .player-bar__hint {
        font-size: 1rem;
    }

    #gameFrame {
        min-height: 68vh;
    }

    .sound-toggle {
        width: 100%;
    }
}