:root {
    --bg: #0B0D0E;
    --surface: #0F1417;
    --phosphor: #30F2A2;
    --rf: #7EA8FF;
    --amber: #FFD166;
    --err: #FF3B3B;
    --ink: #E6ECEF;
    --muted: #9AA7B0;
    --col-width: min(105ch, 94vw);
    --boot: 0%;
    --mx: 50vw;
    --my: 50vh;
}

:root[data-mode="live"] {
    --surface: #0E1512;
    --rf: #8BB9FF;
}

:root[data-mode="archived"] {
    --surface: #151210;
}

:root[data-mode="live"] .section.is-green {
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .16) inset, 0 22px 44px rgba(48, 242, 162, .10);
}

:root[data-mode="live"] .ticker .ticker-inner {
    animation-duration: 35s;
}

:root[data-mode="live"] .keycard {
    opacity: .35;
    filter: saturate(.7);
    pointer-events: none;
}

@media (min-width: 721px) {
    :root[data-mode="live"] .keycard {
        display: none;
    }
}

:root[data-mode="archived"] .keycard {
    display: none;
}

:root[data-mode="archived"] .countdown-card .label::before,
:root[data-mode="archived"] .countdown-card .label::after {
    color: var(--amber);
}

.app-shell {
    margin-bottom: 20px;
}

.app-shell.mode-live {
    --surface: #0E1512;
    --phosphor: #3BFFB6;
    --rf: #9BC5FF;
}

.app-shell.mode-soldout {
    --surface: #14110F;
    --phosphor: #FFD166; 
    --rf: #FFC6A6;
}

.app-shell.mode-soldout #signal-canvas {
    background: radial-gradient(1200px 900px at 50% -15%, #181310 0%, #0B0D0E 65%) no-repeat;
}

.app-shell.mode-soldout .section {
    border-color: #3a2a2a;
    box-shadow:
            0 0 0 1px rgba(255, 209, 102, .06) inset,
            0 18px 36px rgba(0, 0, 0, .28);
    background: linear-gradient(180deg, rgba(255, 209, 102, .06), rgba(255, 209, 102, .02)),
    color-mix(in srgb, var(--surface) 94%, transparent);
}

.app-shell.mode-soldout .section.is-green {
    border-color: #3a2a2a;
    background: linear-gradient(180deg, rgba(255, 209, 102, .10), rgba(255, 209, 102, .04)),
    color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 0 0 1px rgba(255, 209, 102, .10) inset, 0 16px 32px rgba(0,0,0,.25);
}

.app-shell.mode-soldout .badge,
.app-shell.mode-soldout .cd-lab,
.app-shell.mode-soldout .live-pill {
    color: #FFE2A6;
}

.app-shell.mode-soldout .live-pill {
    background: #2d1a1a;
    border-color: #442020;
    letter-spacing: .12em;
}

.app-shell.mode-soldout .tp-bar > div,
.app-shell.mode-soldout .cd-bar > span,
.app-shell.mode-soldout .hero-rail > span {
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
}

.app-shell.mode-soldout .keycard {
    opacity: .35;
    filter: saturate(.7);
    pointer-events: none;
}

.app-shell.mode-soldout .footer-cta .mud-button-root.mud-button-filled {
    background: #3a2a2a;
    border-color: #4a3a3a;
}


.app-shell.mode-live #signal-canvas {
    background: radial-gradient(1200px 900px at 50% -15%, #0F1914 0%, #0B0D0E 65%) no-repeat;
}

.app-shell.mode-live .section {
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .10) inset, 0 18px 36px rgba(48, 242, 162, .08);
    border-color: #153328;
}

.app-shell.mode-live .ticker .ticker-inner {
    animation-duration: 35s;
}

.app-shell.mode-live .keycard {
    display: none;
}

.app-shell.mode-archived {
    --surface: #14110F;
}

.app-shell.mode-archived .keycard {
    display: none;
}

.app-shell.mode-archived .countdown-card .label::before,
.app-shell.mode-archived .countdown-card .label::after {
    color: var(--amber);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
    opacity: .12;
    mix-blend-mode: overlay;
}

#signal-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(1200px 900px at 50% -15%, #0E1419 0%, #0B0D0E 65%) no-repeat;
    filter: none;
}

.mono {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.h1 {
    font-size: clamp(28px, 4.6vw, 54px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.01em;
}

.h2 {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 700;
}

.small {
    font-size: .9rem;
}

.muted {
    color: var(--muted);
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #12181D;
    border: 1px solid #1a2127;
    font-size: .72rem;
    color: #A7FFDE;
}

.code-green {
    color: var(--phosphor);
}

.anchor.glow {
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .35), 0 0 24px rgba(48, 242, 162, .25) inset;
    border-radius: 6px;
}

.broadcast-col {
    width: var(--col-width);
    margin-inline: auto;
    padding-inline: 16px;
}

.section {
    background: rgba(15, 20, 23, 0.78);
    border: 1px solid #171C20;
    border-radius: 12px;
    padding: 20px 18px;
    margin: 18px 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 16px 32px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(3px) saturate(115%);
    backdrop-filter: blur(3px) saturate(115%);
    will-change: backdrop-filter;
}

.section .label {
    font-family: "IBM Plex Mono", ui-monospace;
    letter-spacing: .02em;
    color: var(--muted);
    font-size: .82rem;
}

.section .label::before {
    content: "<";
    color: var(--phosphor);
    margin-right: 4px;
}

.section .label::after {
    content: ">";
    color: var(--phosphor);
    margin-left: 4px;
}

.section.is-green {
    border-color: #153328;
    background: linear-gradient(180deg, rgba(48, 242, 162, .08), rgba(48, 242, 162, .03)), color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .10) inset, 0 16px 32px rgba(0, 0, 0, .25);
}

.section.is-green .badge {
    color: #A7FFDE;
    background: #0E151A;
    border-color: #1b3a2e;
}

.ticker {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #171C20;
    border-radius: 12px;
    background: #0C1115;
}

.ticker-inner {
    display: inline-block;
    padding: 8px 0;
    animation: ticker 55s linear infinite;
    will-change: transform;
}

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

.osd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #182026;
    border-radius: 12px;
    background: #0C1115;
}

.osd .dotbars {
    display: flex;
    gap: 2px;
    align-items: center;
    height: 16px;
}

.osd .dotbars span {
    width: 3px;
    height: 6px;
    background: #26323C;
    border-radius: 2px;
}

.osd .dotbars span.on {
    background: var(--phosphor);
    height: calc(6px + 10px * var(--rand, 0));
}

.keycard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px dashed #1E2A30;
    background: #0C1216;
    border-radius: 16px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.logincard {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px dashed #1E2A30;
    background: #0C1216;
    border-radius: 16px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.keycard::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(90deg, transparent, rgba(48, 242, 162, .12), transparent);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.keycard:hover::after {
    opacity: 1;
}

.redacted {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}

.redacted .cell {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 6px;
    background: #0A0E11;
    border: 1px solid #141A1F;
    overflow: hidden;
    isolation: isolate;
}

.redacted .cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, #0B0F12 0 8px, #0E1318 8px 16px);
    opacity: .9;
    transition: opacity .15s ease;
}

.redacted .cell::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(60% 60% at 50% 50%, rgba(48, 242, 162, .28), rgba(126, 168, 255, .12) 60%, transparent 75%);
    mix-blend-mode: screen;
    transition: opacity .15s ease;
}

.redacted .cell:hover::before {
    opacity: .3;
}

.redacted .cell:hover::after {
    opacity: 1;
}

.redacted .cell.reveal::after {
    opacity: .18;
}

.redacted .cell.reveal::before {
    content: attr(data-xy);
    position: absolute;
    inset: auto 6px 6px auto;
    font: 10px "IBM Plex Mono";
    color: #A7FFDE;
    opacity: .9;
    transform: translateZ(2px);
}

.redacted-wrap {
    position: relative;
    perspective: 700px;
}

.redacted-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 50%), rgba(48, 242, 162, .09), rgba(48, 242, 162, 0) 60%);
    mix-blend-mode: screen;
    opacity: .9;
    transition: opacity .2s;
}

.tilt-grid {
    transform-style: preserve-3d;
    transition: transform .2s ease;
}

.redacted-wrap:hover .tilt-grid {
    transform: rotateX(calc((var(--my, 50vh) - 50vh) / -200)) rotateY(calc((var(--mx, 50vw) - 50vw) / 200));
}

.flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .28s ease;
}

.flip:hover {
    transform: rotateX(6deg);
}

.flip:active {
    transform: rotateY(180deg);
}

.flip::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 4px;
    background: linear-gradient(45deg, #0B0F12 0 8px, #0E1318 8px 16px);
    transform: translateZ(1px);
}

.preview-holo .pv-frame {
    width: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: #0B1116;
    border: 1px solid #1b2630;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .03);
    transform: translateZ(0);
}

.preview-holo img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    filter: contrast(1.05) saturate(.9);
}

.preview-holo .pv-title {
    padding: 6px 10px;
    font-size: .85rem;
    color: #A7FFDE;
    background: linear-gradient(90deg, rgba(48, 242, 162, .12), transparent);
    border-top: 1px solid #162028;
}

.grid-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.tp-bar {
    height: 8px;
    background: #0b1217;
    border: 1px solid #18222a;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}

.tp-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
    transition: width .35s ease;
}

.matrix {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
    font-family: "IBM Plex Mono", ui-monospace;
    letter-spacing: .08em;
}

.matrix-col {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.matrix-digit {
    opacity: .8;
    transition: opacity .2s;
}

.preload {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: radial-gradient(1200px 900px at 50% -15%, #0E1419 0%, #0B0D0E 65%) no-repeat;
    overflow: hidden;
    opacity: 1;
    transition: opacity .42s ease;
}

.preload.done {
    opacity: 0;
    pointer-events: none;
}

.preload::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
    opacity: .12;
    mix-blend-mode: overlay;
}

.pre-card {
    position: relative;
    width: min(620px, 92vw);
    padding: 28px 32px 22px;
    background: #0C1115;
    border: 1px solid #1B242A;
    border-radius: 18px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .02);
    isolation: isolate;
}

.pre-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(126, 168, 255, 0) 0%, rgba(126, 168, 255, .10) 50%, rgba(126, 168, 255, 0) 100%);
    mix-blend-mode: screen;
    opacity: .6;
    animation: pre-scan 2.2s linear infinite;
}

@keyframes pre-scan {
    from {
        transform: translateY(-120%);
    }
    to {
        transform: translateY(120%);
    }
}

.pre-title {
    font-family: "Space Grotesk";
    font-weight: 800;
    font-size: clamp(34px, 6.6vw, 72px);
    line-height: 1;
    letter-spacing: .01em;
    color: var(--ink);
    position: relative;
    display: inline-block;
}

.pre-title::before,
.pre-title::after {
    content: attr(data-g);
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.pre-title::before {
    color: var(--phosphor);
    transform: translateX(-1px);
    text-shadow: -2px 0 var(--phosphor);
    animation: pre-slice1 1.9s steps(2, end) infinite;
}

.pre-title::after {
    color: var(--rf);
    transform: translateX(1px);
    text-shadow: 2px 0 var(--rf);
    animation: pre-slice2 1.9s steps(3, end) infinite;
}

@keyframes pre-slice1 {
    0% {
        clip-path: inset(0 0 82% 0)
    }
    35% {
        clip-path: inset(12% 0 45% 0)
    }
    60% {
        clip-path: inset(68% 0 8% 0)
    }
    100% {
        clip-path: inset(0 0 82% 0)
    }
}

@keyframes pre-slice2 {
    0% {
        clip-path: inset(76% 0 0 0)
    }
    40% {
        clip-path: inset(38% 0 22% 0)
    }
    70% {
        clip-path: inset(0 0 78% 0)
    }
    100% {
        clip-path: inset(76% 0 0 0)
    }
}

.pre-sub {
    margin-top: 10px;
    color: var(--muted);
    font-size: clamp(12px, 1.8vw, 16px);
    letter-spacing: .06em;
}

.pre-dots {
    display: inline-block;
    width: 1.2em;
    text-align: left;
}

.pre-meter {
    margin-top: 16px;
}

.pre-bar {
    height: 10px;
    border-radius: 999px;
    background: #0b1217;
    border: 1px solid #18222a;
    overflow: hidden;
}

.pre-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
    width: var(--blazor-load-percentage);
    transition: width .35s ease;
}

.pre-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    color: var(--muted);
    font-size: .9rem;
}

.pre-sep {
    opacity: .7;
}

.pre-reflect {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(6vh, 40px);
    width: min(620px, 92vw);
    height: 38vh;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 20, 24, .35), rgba(16, 20, 24, 0));
    filter: blur(6px) saturate(90%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent);
    border-radius: 20px;
}

.glitch {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-g);
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
}

.glitch::before {
    color: var(--rf);
    transform: translateX(-1px);
    text-shadow: -2px 0 var(--rf);
}

.glitch::after {
    color: var(--phosphor);
    transform: translateX(1px);
    text-shadow: 2px 0 var(--phosphor);
}

.glitch.burst::before {
    animation: glitch-slice-1 180ms steps(2, end) 3, glitch-jitter 90ms steps(2, end) 6;
    opacity: .85;
}

.glitch.burst::after {
    animation: glitch-slice-2 180ms steps(3, end) 3, glitch-jitter 90ms steps(2, end) 6 reverse;
    opacity: .6;
}

.glitch.loop::before {
    animation: glitch-slice-1 1.6s steps(2, end) infinite;
    opacity: .7;
}

.glitch.loop::after {
    animation: glitch-slice-2 1.6s steps(3, end) infinite reverse;
    opacity: .5;
}

@keyframes glitch-slice-1 {
    0% {
        clip-path: inset(0 0 85% 0)
    }
    25% {
        clip-path: inset(10% 0 60% 0)
    }
    50% {
        clip-path: inset(70% 0 10% 0)
    }
    75% {
        clip-path: inset(20% 0 50% 0)
    }
    100% {
        clip-path: inset(0 0 85% 0)
    }
}

@keyframes glitch-slice-2 {
    0% {
        clip-path: inset(80% 0 0 0)
    }
    25% {
        clip-path: inset(40% 0 30% 0)
    }
    50% {
        clip-path: inset(0 0 80% 0)
    }
    75% {
        clip-path: inset(60% 0 20% 0)
    }
    100% {
        clip-path: inset(80% 0 0 0)
    }
}

@keyframes glitch-jitter {
    from {
        transform: translate(1px, -1px);
    }
    to {
        transform: translate(-1px, 1px);
    }
}

.fx-glitch {
    position: relative;
    display: inline-block;
}

.fx-glitch::before, .fx-glitch::after {
    content: attr(data-g);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.fx-glitch::before {
    color: var(--rf);
}

.fx-glitch::after {
    color: var(--phosphor);
}

.fx-glitch.on::before {
    animation: fx-snap .08s steps(2, end) 4;
    opacity: .6;
}

.fx-glitch.on::after {
    animation: fx-snap .08s steps(2, end) 4 reverse;
    opacity: .35;
}

@keyframes fx-snap {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(1px, -1px);
    }
}

.mud-dialog-container .mud-dialog-title {
    display: none !important;
}

.paydlg .mud-dialog {
    position: relative;
    background: linear-gradient(180deg, rgba(48, 242, 162, .08), rgba(48, 242, 162, .03)), #0B1116;
    border: 1px solid #153328;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(48, 242, 162, .06), 0 18px 36px rgba(0, 0, 0, .35);
}

.paydlg .mud-dialog-content {
    padding: 0 !important;
    margin: 0px;
    border-radius: inherit;
    overflow: hidden;
}

.paydlg .paydlg-shell {
    position: relative;
    border-radius: 18px;
    padding: 5px;
}

.paydlg .paydlg-glow,
.paydlg .paydlg-shell::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 99999px;
    height: 99999px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(0, 0, 0, 0), var(--phosphor), rgba(0, 0, 0, 0) 25%);
    animation: paydlg-rotate 3s linear infinite;
}

.paydlg .paydlg-glow {
    filter: blur(18px);
    opacity: .45;
}

.paydlg.scanning-on .paydlg-shell::before,
.paydlg.scanning-on .paydlg-glow {
    animation-duration: 3.6s;
    opacity: .6;
}

@keyframes paydlg-rotate {
    to {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

.paydlg .paydlg-inner {
    position: relative;
    z-index: 1;
    border-radius: 13px;
    background: #0B1116;
    border: 1px solid #1b2630;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.paydlg .pay-body {
    background: linear-gradient(180deg, rgba(48, 242, 162, .10), rgba(48, 242, 162, .04)), #0B1116;
    padding: 24px;
    gap: 16px;
}

.paydlg .tos-body {
    background: linear-gradient(180deg, rgba(48, 242, 162, .10), rgba(48, 242, 162, .04)), #0B1116;
    padding: 24px;
    display: grid;
    gap: 16px;
}

.paydlg .pay-amount .h2 {
    margin: 2px 0;
}

.paydlg .pay-box {
    background: #0B1116;
    border: 1px solid #1b2630;
    border-radius: 12px;
    padding: 10px 12px;
}

.paydlg .pay-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.paydlg .pay-code {
    background: #0a0f13;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #162028;
    display: inline-block;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.paydlg .pay-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.paydlg .pay-note {
    font-size: .9rem;
}

.pay-address {
    align-items: stretch;
}

.pay-code {
    flex: 1 1 auto;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0a0f13;
    border: 1px solid #162028;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
}

.copy-icon {
    --ring: rgba(48, 242, 162, .18);
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #1b2630;
    border-radius: 10px;
    background: #0b1116;
    margin-left: 6px;
}
.copy-icon:hover { background: #0f151a; box-shadow: 0 0 0 1px var(--ring) inset; }
.copy-icon:active { transform: translateY(1px); }

@media (max-width: 720px) {
    .paydlg .pay-body { padding: 16px; gap: 12px; }
    .paydlg .pay-box   { padding: 10px;
    overflow-x: hidden;}
    .pay-code          { font-size: .9rem; }
}


.verify {
    display: grid;
    gap: 8px;
    background: #0B1116;
    border: 1px solid #172128;
    border-radius: 12px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.verify.ok {
    border-color: #153328;
    box-shadow: inset 0 0 0 1px rgba(48, 242, 162, .12);
}

.verify .verify-line {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}

.verify .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rf);
    box-shadow: 0 0 10px 0 rgba(126, 168, 255, .25);
}

.verify .dot.on {
    animation: blink 1s ease-in-out infinite;
}

.verify .dot.ok {
    background: var(--phosphor);
    box-shadow: 0 0 12px 2px rgba(48, 242, 162, .45);
}

@keyframes blink {
    50% {
        opacity: .4;
    }
}

.verify .tp-bar {
    height: 10px;
    border-radius: 999px;
    background: #0b1217;
    border: 1px solid #18222a;
    overflow: hidden;
}

.verify .tp-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
    transition: width .35s ease;
}

.verify .scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(126, 168, 255, 0) 0%, rgba(126, 168, 255, .08) 50%, rgba(126, 168, 255, 0) 100%);
    mix-blend-mode: screen;
    animation: scan 2.1s linear infinite;
    opacity: .6;
}

@keyframes scan {
    from {
        transform: translateY(-120%);
    }
    to {
        transform: translateY(120%);
    }
}

@media (max-width: 720px) {
    .paydlg .mud-dialog {
        max-width: 92vw;
        width: 92vw;
        margin: 12px auto !important;
        border-radius: 18px;
    }

    .paydlg .mud-dialog-content {
        padding: 0;
        overflow: hidden;
    }

    .paydlg .pay-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

.countdown-card {
    position: relative;
    overflow: hidden;
}

.countdown-card.is-live {
    border-color: #153328;
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .10) inset;
}

.countdown .cd-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.cd-block {
    background: #0B1116;
    border: 1px solid #172128;
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cd-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(126, 168, 255, .08), transparent);
    mix-blend-mode: screen;
    opacity: .28;
}

.cd-num {
    font-size: clamp(28px, 5.5vw, 46px);
    font-weight: 800;
    letter-spacing: .06em;
}

.cd-lab {
    color: #A7FFDE;
    font-size: .8rem;
    letter-spacing: .12em;
    margin-top: 2px;
}

.cd-meter {
    margin-top: 12px;
}

.cd-bar {
    height: 10px;
    border-radius: 999px;
    background: #0b1217;
    border: 1px solid #18222a;
    overflow: hidden;
}

.cd-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
    width: 0;
}

.cd-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--muted);
    font-size: .9rem;
}

.cd-meta .dot {
    opacity: .7;
}

.live-wrap {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.live-pill {
    display: inline-block;
    align-self: start;
    padding: 8px 12px;
    border-radius: 999px;
    background: #103225;
    border: 1px solid #1c4a38;
    color: #A7FFDE;
    letter-spacing: .12em;
}

.live-pill.archived {
    background: #2d1a1a;
    border-color: #442020;
    color: #FFC6C6;
}

.hud {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    pointer-events: auto;
}

.hud-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0C1115;
    border: 1px solid #182026;
    border-radius: 999px;
    padding: 8px 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    cursor: pointer;
    user-select: none;
}

.hud-pill.pre {
    border-color: #182026;
}

.hud-pill.live {
    border-color: #153328;
    box-shadow: 0 10px 24px rgba(48, 242, 162, .08);
}

.hud-pill.arch {
    border-color: #3a2a2a;
}

.hud .led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7782;
    box-shadow: 0 0 0 0 rgba(48, 242, 162, 0);
}

.hud-pill.live .led {
    background: var(--phosphor);
    box-shadow: 0 0 10px 2px rgba(48, 242, 162, .45);
}

.hud-pill.arch .led {
    background: var(--amber);
}

.hud-label {
    font-family: "IBM Plex Mono", ui-monospace;
    color: #A7FFDE;
    letter-spacing: .12em;
    font-size: .8rem;
}

.hud-eta {
    color: #var(--ink);
    font-weight: 700;
    letter-spacing: .06em;
}

.hud-ring {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    display: block;
}

.hud-ring circle {
    fill: none;
    stroke-width: 4;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.hud-ring .bg {
    stroke: #1c2a33;
}

.hud-ring .fg {
    stroke: var(--phosphor);
    stroke-linecap: round;
    transition: stroke-dashoffset .35s ease;
}

.epic-footer {
    padding: 18px 0 26px;
    border-top: 1px solid #171C20;
    background: none;
}

.epic-footer .broadcast-col {
    width: var(--col-width);
    margin-inline: auto;
    padding-inline: 16px;
}

.footer-card {
    overflow: clip;
}

.footer-strip {
    position: relative;
    overflow: hidden;
    border: 1px solid #153328;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(48, 242, 162, .10), rgba(48, 242, 162, .04));
    box-shadow: inset 0 0 0 1px rgba(48, 242, 162, .08);
    -webkit-mask-image: radial-gradient(160% 100% at 50% 50%, #000 65%, transparent 100%);
    mask-image: radial-gradient(160% 100% at 50% 50%, #000 65%, transparent 100%);
}

.footer-strip .strip-inner {
    display: inline-block;
    white-space: nowrap;
    padding: 10px 0;
    color: #A7FFDE;
    letter-spacing: .18em;
    will-change: transform;
    animation: footerTicker 48s linear infinite;
}

.footer-strip .strip-inner > span {
    padding-right: 1.2rem;
}

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

.footer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.footer-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0 10px;
}

.footer-cta .tiny {
    font-size: .85rem;
}

.footer-cta .tip {
    background: #0a0f13;
    border: 1px solid #162028;
    padding: 2px 6px;
    border-radius: 6px;
}

.footer-bottom {
    font-size: .8rem;
    opacity: .8;
}

.footer-cta .mud-button-root.mud-button-filled {
    background: #103225;
    border: 1px solid #1c4a38;
    border-radius: 12px;
}

.footer-cta .mud-button-root.mud-button-filled:hover {
    background: #114a34;
    border-color: #2b6a52;
}

.footer-cta .mud-button-root.mud-button-outlined {
    border: 1px solid #264a3a;
    border-radius: 12px;
}

@media (max-width: 820px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .keycard {
        flex-direction: column;
        align-items: stretch;
    }

    .matrix {
        grid-auto-columns: minmax(0, 33%);
    }
}

.section.ansi {
    background: linear-gradient(180deg, rgba(48, 242, 162, .06), rgba(48, 242, 162, .02)), color-mix(in srgb, var(--surface) 94%, transparent);
    border-color: #153328;
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .06) inset, 0 16px 32px rgba(0, 0, 0, .25);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-top: 10px;
}

.faq-q {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .06em;
    color: var(--ink);
    background: #0a0f13;
    border: 1px solid #162028;
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.35;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.faq-a {
    color: var(--muted);
    line-height: 1.6;
    background: #0B1116;
    border: 1px solid #172128;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.faq-a .glitch {
    text-shadow: 0 0 6px rgba(48, 242, 162, .22);
}

.faq-q:hover {
    border-color: #1e3a30;
    box-shadow: inset 0 0 0 1px rgba(48, 242, 162, .06);
}

.faq-a:hover {
    border-color: #1b2a33;
}

@media (max-width: 820px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.redacted.puzzle-locked {
    pointer-events: none;
}

.redacted .cell.selected::after {
    opacity: .22;
}

.redacted .cell.selected::before {
    opacity: .45;
}

.redacted .cell.selected::marker {
    content: "";
}

.redacted .cell.selected::selection {
    background: transparent;
}

.redacted .cell.selected::cue {
    display: none;
}

.redacted .cell.selected::part(badge) {
    all: unset;
}

.redacted .cell.selected::after,
.redacted .cell.selected .badge-step {
    pointer-events: none;
}

.redacted .cell.selected::before,
.redacted .cell.selected::after {
    transition: opacity .15s ease;
}

.redacted .cell.selected {
    position: relative;
}

.redacted .cell.selected::after,
.redacted .cell.selected::before {
    will-change: opacity;
}

.redacted .cell.selected::marker {
    content: none;
}

.redacted .cell.selected > .step-chip {
    display: none;
}

.redacted .cell.selected {
    --step: attr(data-step number, 0);
}

.redacted .cell.selected.reveal::before {
    content: attr(data-step);
    position: absolute;
    inset: auto 6px 6px auto;
    font: 11px "IBM Plex Mono", ui-monospace;
    color: #A7FFDE;
    opacity: .95;
    z-index: 2;
}

.redacted .cell.bad {
    border-color: #3a1d1d;
}

.redacted .cell.bad::before {
    opacity: .85 !important;
    background: linear-gradient(45deg, #1a0f11 0 8px, #2a1417 8px 16px);
}

.redacted .cell.bad::after {
    background: radial-gradient(60% 60% at 50% 50%, rgba(255, 64, 64, .35), rgba(255, 64, 64, .08) 60%, transparent 75%);
    opacity: .95 !important;
}

.redacted.complete .cell {
    animation: cell-pop 420ms ease forwards;
    animation-delay: calc((var(--i, 0) * 6ms));
    opacity: 0;
}

@keyframes cell-pop {
    to {
        transform: scale(.94);
        opacity: 0;
        filter: blur(2px)
    }
}

.puzzle-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.puzzle-msg {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #172128;
    background: #0b1116cc;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .03);
    font-size: clamp(14px, 1.8vw, 18px);
    letter-spacing: .06em;
    text-align: center;
}

.puzzle-msg.ok {
    border-color: #153328;
    box-shadow: 0 0 0 1px rgba(48, 242, 162, .10) inset, 0 18px 36px rgba(0, 0, 0, .35);
    color: #A7FFDE;
}

.puzzle-msg.deny {
    border-color: #3a2a2a;
    color: #FFC6C6;
    animation: denyPulse .9s ease-in-out 1;
}

@keyframes denyPulse {
    0% {
        transform: scale(1);
        filter: none;
    }
    40% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 10px rgba(255, 64, 64, .35));
    }
    100% {
        transform: scale(1);
        filter: none;
    }
}

.redacted .cell {
    transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

.redacted .cell:active {
    transform: scale(.985);
    border-color: #1f2a30;
}

.redacted .cell.selected {
    border-color: #1c4a38;
    box-shadow: inset 0 0 0 1px rgba(48, 242, 162, .25), 0 0 0 2px rgba(48, 242, 162, .12);
}

@keyframes selPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(48, 242, 162, .28);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(48, 242, 162, 0);
    }
}

.redacted .cell.just-selected {
    animation: selPulse .28s ease-out;
}

.osd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.osd .badge {
    font-size: .72rem;
}

.osd .osd-meta {
    margin-left: auto;
}

.dotbars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    width: clamp(90px, 22vw, 160px);
}

.dotbars span {
    width: 3px;
    height: 6px;
    background: #26323C;
    border-radius: 2px;
    opacity: .7;
    transition: height .18s ease, background .12s ease, opacity .18s ease;
}

.dotbars span.on {
    background: var(--phosphor);
    opacity: 1;
    height: calc(6px + 10px * var(--rand, 0));
}

@media (max-width: 720px) {
    .osd {
        padding: 8px 10px;
        gap: 8px;
    }

    .osd .badge {
        font-size: .65rem;
        padding: 1px 6px;
    }

    .osd .osd-meta {
        font-size: .78rem;
    }

    .dotbars {
        width: 36vw;
        max-width: 140px;
    }
}

@media (max-width: 380px) {
    .osd .osd-meta {
        display: none;
    }
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem 0;
    align-items: start;
}

.footer-manifesto h6 {
    color: #00ff9c;
    margin-bottom: 0.5rem;
}

.footer-manifesto p {
    max-width: 40ch;
    line-height: 1.6;
}

.footer-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cta-access-button {
    background-color: #00ff9c !important;
    color: #101010 !important;
}

.cta-access-button:hover {
    background-color: #8effd4 !important;
}

.intel-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.intel-links h6 {
    color: #00ff9c;
    margin-bottom: 0.25rem;
}

.legal-link {
    padding: 0 !important;
    min-width: auto !important;
    text-transform: none !important;
    font-size: inherit !important;
    margin-top: 4px;
}

.tip {
    margin-top: 4px;
    width: 100%;
    overflow-x: hidden;
    background-color: #111; 
    border: 1px solid #333;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: #a2ffc8;
}

.scanline-effect {
    height: 2px;
    width: 100%;
    background: rgba(0, 255, 156, 0.4);
    box-shadow: 0 0 10px 1px rgba(0, 255, 156, 0.5);
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.scanline-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: white;
    filter: blur(5px);
    animation: scan 4s linear infinite;
}

@keyframes scan {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(calc(100vw + 100px)));
    }
}

@media (max-width: 768px) {
    .footer-main-grid {
        grid-template-columns: 100%;
    }

    .footer-manifesto p {
        max-width: none;
    }

    .footer-actions {
        align-items: stretch;
    }

    .cta-buttons > * {
        flex-grow: 1; 
    }

    .footer-strip {
        display: none;
    }
}

.hero {
    position: relative;
    overflow: hidden;
    border-color: #153328;
    box-shadow:
            0 0 0 1px rgba(48,242,162,.18) inset,
            0 24px 48px rgba(0,0,0,.35),
            0 22px 44px rgba(48,242,162,.08);
    isolation: isolate;
}
.hero::before,
.hero::after{
    content:"";
    position:absolute; inset:-1px;
    pointer-events:none;
}
.hero::before{ 
    background: linear-gradient(180deg, transparent, rgba(126,168,255,.10), transparent);
    mix-blend-mode: screen;
    animation: heroScan 3.2s linear infinite;
    opacity:.65;
}
.hero::after{ 
    background: radial-gradient(120% 140% at 50% -10%, rgba(48,242,162,.10), transparent 55%),
    radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.35), transparent 60%);
    opacity:.8;
}
@keyframes heroScan{ from{ transform:translateY(-120%)} to{ transform:translateY(120%)} }

.hero-title{
    position: relative;
    margin: 8px 0 6px;
    line-height: .98;
    letter-spacing:-.015em;
}
.hero-title .glitch{
    background: linear-gradient(90deg, var(--ink), #A7FFDE 45%, var(--rf));
    -webkit-background-clip:text; background-clip:text;
    color: transparent;
    margin-top: 12px;
    margin-bottom: 12px;
    text-shadow:
            0 0 16px rgba(48,242,162,.18),
            0 0 38px rgba(48,242,162,.12);
}

.hero-title .glitch::before,
.hero-title .glitch::after{
    opacity:.75;
    filter: blur(0.5px) saturate(110%);
}

.hero-title::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-6px; height:3px;
    border-radius:999px;
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
    box-shadow: 0 0 18px rgba(48,242,162,.45);
    transform-origin:left center;
    transform: scaleX(0);
    animation: beamIn .9s ease-out .2s forwards;
}
@keyframes beamIn{ to{ transform: scaleX(1)} }

.hero .hero-matrix{
    position:absolute; inset:0; z-index:0;
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%);
    opacity:.25; pointer-events:none;
}
.hero-sub{
    display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
    position:relative; z-index:1;
}
.hero-sub .badge{
    background:#0E151A; border-color:#1b3a2e; color:#A7FFDE;
}
.hero-sub .sep{ opacity:.6; }

@keyframes popIn{
    0%{ transform:translateY(6px) scale(.985); opacity:.0}
    100%{ transform:none; opacity:1}
}
.hero{ animation: popIn .42s ease-out both; }

.hero{ transform-style: preserve-3d; }
.hero-title{ transform: translateZ(14px); }
.hero-sub{   transform: translateZ(8px);  }

.hero-title .glitch{
    --a: rgba(48,242,162,.28);
    --b: rgba(139,185,255,.22);
    color: transparent;
    background: linear-gradient(90deg,#eafff7, #c9fff0 40%, #cfe2ff);
    -webkit-background-clip:text;background-clip:text;
    text-shadow:
            0 0 0.5px #eafff7,
            0 0 18px var(--a),
            0 0 38px var(--a),
            0 0 22px var(--b);
    letter-spacing:-.02em;
    filter: saturate(1.15) contrast(1.05);
}
.hero-title .glitch::before{ transform:translateX(-2px) }
.hero-title .glitch::after { transform:translateX( 2px) }
.hero-rail{ height:4px; margin-bottom:12px; border-radius:999px; background:#0d1814;
    border:1px solid #1b3a2e; overflow:hidden; margin-top:10px; position:relative }
.hero-rail>span{ position:absolute; inset:0; width:0%;
    background:linear-gradient(90deg,var(--phosphor),var(--rf));
    box-shadow:0 0 18px rgba(48,242,162,.45); transition:width .9s cubic-bezier(.2,.9,.2,1) }
.hero.in .hero-rail>span{ width:100% }
.hero{ position:relative; transform-style:preserve-3d }
.hero-title{ transform:translateZ(14px) }
.hero-sub{ transform:translateZ(8px) }

.hero-sub{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }
.hero-sub .badge{
    background:#0f171b; border:1px solid #203a31; color:#A7FFDE;
    box-shadow:0 0 0 1px rgba(48,242,162,.06) inset
}

/* layout */
.access-card{ width:100%; }
.access-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:18px;
}
@media (max-width:900px){ .access-grid{ grid-template-columns:1fr } }

/* left meta */
.access-meta .badges{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.access-meta .badge{ background:#0E151A; border-color:#1b3a2e; color:#A7FFDE }

/* right form */
.access-form{
    padding:16px 18px;
    border-radius:14px;
    width:100%;
}.access-row{ display:flex; gap:10px; align-items:center }

.access-form.section.is-green{
    box-shadow:
            0 0 0 1px rgba(48,242,162,.12) inset,
            0 22px 44px rgba(48,242,162,.08);
    border-color:#153328;
}
@media (max-width:720px){ .access-row{ flex-direction:column; align-items:stretch } }


.access-input .mud-input-root{ height:56px }
.access-enter{ height:56px; padding:0 18px; font-weight:700 }

/* tidy helpers */
.access-hint.err{ margin-top:8px; color:#FF8A8A; font-size:.9rem }
.verify.compact{ margin-top:10px }
.deny{
    margin-top:10px; display:flex; gap:10px; align-items:flex-start;
    background:#1b1111; border:1px solid #402626; border-radius:12px; padding:10px 12px
}
.deny .led{ width:8px; height:8px; border-radius:50%; background:#FF3B3B;
    box-shadow:0 0 12px 2px rgba(255,59,59,.35); margin-top:6px }
.deny .tiny{ font-size:.8rem }

/* make outlined field match your theme */
.access-form .mud-input-outlined{
    border-radius:12px; border-color:#1b2630; background:#0b1116
}
.access-form .mud-input-outlined:hover{ border-color:#244341 }
.access-form .mud-input-root.mud-input-root-filled:hover{ background:#0d1419 }

.access-row{ display:flex; gap:10px; align-items:center }
.access-enter{ height:56px; white-space:nowrap }
@media (max-width:720px){
    .access-row{ flex-direction:column; align-items:stretch }
    .access-enter{ width:100% }
}

.app-shell.mode-soldout {
    --surface:#14110F;
    --phosphor:#FFD166;
    --rf:#FFC6A6; 
    --ink:#EDE7DF;
}

.app-shell.mode-soldout .hero::before{
    background: linear-gradient(180deg, transparent, rgba(255,209,102,.12), transparent);
}
.app-shell.mode-soldout .hero-rail>span{
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
    box-shadow: 0 0 18px rgba(255,209,102,.45);
}
.app-shell.mode-soldout .section.is-green{
    border-color:#3a2a2a;
    background: linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,209,102,.04)),
    color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 0 0 1px rgba(255,209,102,.10) inset, 0 16px 32px rgba(0,0,0,.25);
}

.app-shell.mode-soldout .footer-manifesto h6,
.app-shell.mode-soldout .intel-links h6{
    color:#FFD166; /* amber */
}

.app-shell.mode-soldout .footer-strip{
    border-color:#3a2a2a;
    background: linear-gradient(90deg, rgba(255,209,102,.10), rgba(255,209,102,.04));
    box-shadow: inset 0 0 0 1px rgba(255,209,102,.08);
}
.app-shell.mode-soldout .footer-strip .strip-inner{
    color:#FFE2A6;
}

.app-shell.mode-soldout .scanline-effect{
    background: rgba(255,209,102,.45);
    box-shadow: 0 0 10px 1px rgba(255,209,102,.5);
}
.app-shell.mode-soldout .scanline-effect::before{
}

.app-shell.mode-soldout .badge{
    color:#FFE2A6;
    background:#2a2019;
    border-color:#3a2a2a;
}

.app-shell.mode-soldout .tp-bar>div,
.app-shell.mode-soldout .cd-bar>span{
    background: linear-gradient(90deg, var(--phosphor), var(--rf));
}

.app-shell.mode-soldout .keycard{
    opacity:.35; filter:saturate(.75); pointer-events:none;
}

.livefeed .liveframe {
    position: relative;
    border: 1px solid #1b2630;
    border-radius: 12px;
    overflow: hidden
}

.livefeed video {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    filter: contrast(1.05) saturate(.9)
}

.livefeed .liveframe::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
}

.livefeed .hud {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(12, 17, 21, .6);
    border: 1px solid #1b2630;
    border-radius: 8px;
    padding: 4px 8px;
    display: flex;
    gap: 8px;
    align-items: center
}

.fakechat {
    margin-top: 8px;
    max-height: 160px;
    overflow: hidden;
    background: #0B1116;
    border: 1px solid #172128;
    border-radius: 10px;
    padding: 8px
}

.fakechat .line {
    opacity: .95
}

.fakechat .name {
    color: #A7FFDE
}

.killfeed {
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 6;
    display: grid;
    gap: 6px;
    pointer-events: none
}

.kill {
    background: #0C1115;
    border: 1px solid #182026;
    border-radius: 8px;
    padding: 6px 8px;
    opacity: .97;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35))
}

@media (max-width: 720px) {
    .killfeed {
        right: 8px;
        top: 8px
    }
}

.spark-card canvas {
    width: 100%;
    height: 80px;
    display: block
}

body.crt * {
    text-shadow: 0 0 2px rgba(48, 242, 162, .15)
}

body.crt::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    background: radial-gradient(150% 120% at 50% 10%, rgba(48, 242, 162, .05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
    mix-blend-mode: screen;
}

.radio-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px
}

.twvod-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0B1116;
    border: 1px solid #1b2630;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .03)
}

.twvod-wrap iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9
}

.cast-hud {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: .85rem;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(11, 15, 18, .45);
    border: 1px solid rgba(27, 38, 48, .6);
    backdrop-filter: blur(4px) saturate(110%)
}

.cast-noise::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
    opacity: .12;
    mix-blend-mode: overlay;
    pointer-events: none
}

.killfeed {
    position: fixed;
    right: 12px;
    top: 84px;
    z-index: 7;
    display: grid;
    gap: 6px;
    width: min(38ch, 32vw);
    pointer-events: none;
}

.kill {
    background: rgba(11, 17, 21, .65);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
    backdrop-filter: blur(4px) saturate(110%);
    border: 1px solid #182026;
    border-radius: 10px;
    padding: 6px 10px;
    line-height: 1.35;
    color: #E6ECEF;
    text-shadow: 0 0 6px rgba(48, 242, 162, .12);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .02);
    animation: kill-in .22s ease-out, kill-life 4.2s linear both;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kill::before {
    content: "☠";
    margin-right: 8px;
    color: #A7FFDE;
    opacity: .9;
}

@keyframes kill-in {
    from {
        transform: translateY(6px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes kill-life {
    0% {
        border-color: #153328;
        box-shadow: 0 12px 24px rgba(48, 242, 162, .08)
    }
    100% {
        border-color: #182026;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .35)
    }
}

.console-nudge {
    display:inline-flex; align-items:center; gap:10px;
    margin-top: 12px;
    padding:6px 10px; border:1px solid #153328; border-radius:12px;
    background:linear-gradient(180deg, rgba(48,242,162,.08), rgba(48,242,162,.03));
    color:#A7FFDE; cursor:pointer; user-select:none;
    box-shadow:0 0 0 1px rgba(48,242,162,.06) inset, 0 12px 24px rgba(0,0,0,.25);
    transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.console-nudge:hover {
    transform:translateY(-1px);
    border-color:#1c4a38; box-shadow:0 0 0 1px rgba(48,242,162,.10) inset, 0 16px 32px rgba(0,0,0,.3);
}
.cn-chip {
    display:inline-block; padding:2px 8px; border-radius:999px;
    background:#0E151A; border:1px solid #1b3a2e; color:#A7FFDE; font-size:.72rem; letter-spacing:.08em;
}

.matrix-card { border-color:#153328; }
.matrix-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid #172128;
    border-radius: 12px;
    background: #0B1116;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
    height: clamp(200px, 34vw, 360px);
}
#matrix-canvas { display:block; width:100%; height:100%; }

.matrix-title {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: clamp(28px, 7vw, 72px);
    background: linear-gradient(90deg, #30F2A2, #7EA8FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(48,242,162,.18);
    mix-blend-mode: screen;
}