@property --nav-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: -90deg;
}

@property --nav-fill-progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

:root {
    color-scheme: dark;
    --bg: #07080d;
    --surface: #10141d;
    --surface-2: #171d28;
    --surface-3: #202838;
    --text: #fff7db;
    --muted: #aeb8c8;
    --line: #304154;
    --mint: #28f7c8;
    --blue: #4cc9ff;
    --coral: #ff4d7d;
    --sun: #ffe66d;
    --berry: #c45cff;
    --danger: #f04455;
    --nav-height: 90px;
    --nav-pad-x: 6px;
    --nav-logo-size: var(--nav-height);
    --nav-party-height: var(--nav-height);
    --nav-party-main-height: 54px;
    --nav-sign-drop: -2px;
    --nav-sign-rope: 18px;
    --nav-sign-offset-x: 19px;
    --game-radius: 8px;
    --game-panel: rgba(13, 18, 27, 0.94);
    --game-panel-2: rgba(17, 23, 34, 0.92);
    --game-line: rgba(255, 247, 219, 0.12);
    --game-line-strong: color-mix(
        in srgb,
        var(--cab-a, #28f7c8) 48%,
        rgba(255, 247, 219, 0.16)
    );
    --game-glow: color-mix(in srgb, var(--cab-a, #28f7c8) 22%, transparent);
}

.theme-checkers {
    --cab-a: #ff4d7d;
    --cab-b: #28f7c8;
    --cab-c: #ffe66d;
}

.theme-chess {
    --cab-a: #28f7c8;
    --cab-b: #4cc9ff;
    --cab-c: #fff7db;
}

.theme-connect4 {
    --cab-a: #ffe66d;
    --cab-b: #ff4d7d;
    --cab-c: #4cc9ff;
}

.theme-tictactoe {
    --cab-a: #28f7c8;
    --cab-b: #ff4d7d;
    --cab-c: #ffe66d;
}

.theme-pool {
    --cab-a: #28f7c8;
    --cab-b: #ffe66d;
    --cab-c: #ff4d7d;
}

.theme-airhockey {
    --cab-a: #4cc9ff;
    --cab-b: #ff4d7d;
    --cab-c: #28f7c8;
}

.theme-battleship {
    --cab-a: #4cc9ff;
    --cab-b: #28f7c8;
    --cab-c: #d7f7ff;
}

.theme-falconlander {
    --cab-a: #ff9f1c;
    --cab-b: #4cc9ff;
    --cab-c: #fff7db;
}

.theme-flappy {
    --cab-a: #ffe66d;
    --cab-b: #28f7c8;
    --cab-c: #4cc9ff;
}

.theme-pinball {
    --cab-a: #c45cff;
    --cab-b: #ff4d7d;
    --cab-c: #ffe66d;
}

.theme-reaction {
    --cab-a: #28f7c8;
    --cab-b: #ff4d7d;
    --cab-c: #ffe66d;
}

.theme-typeracer {
    --cab-a: #4cc9ff;
    --cab-b: #ff4d7d;
    --cab-c: #28f7c8;
}

.theme-memory {
    --cab-a: #c45cff;
    --cab-b: #28f7c8;
    --cab-c: #ffe66d;
}

.theme-colormatch {
    --cab-a: #ff4d7d;
    --cab-b: #ffe66d;
    --cab-c: #28f7c8;
}

.theme-frequencymatch {
    --cab-a: #4cc9ff;
    --cab-b: #28f7c8;
    --cab-c: #c45cff;
}

.theme-blackjack {
    --cab-a: #28f7c8;
    --cab-b: #ff4d7d;
    --cab-c: #ffe66d;
}

.theme-poker {
    --cab-a: #ff4d7d;
    --cab-b: #ffe66d;
    --cab-c: #28f7c8;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    min-height: 100%;
    overflow-x: clip;
    overflow-anchor: none;
}

body {
    margin: 0;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    background: #050608;
}

body.in-match {
    background: var(--bg);
    overflow: hidden;
}

body.in-match .topbar,
body.in-match .game-grid {
    filter: blur(5px);
    opacity: 0.72;
    pointer-events: none;
}

body.is-restoring-tab .app-shell,
body.is-restoring-tab .game-grid,
body.is-restoring-tab .board-stage,
body.is-restoring-tab .reaction-stage,
body.is-restoring-tab .color-stage,
body.is-restoring-tab .frequency-stage {
    transition: none !important;
    animation: none !important;
}

.ambient-root {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100lvh;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background: #050608;
    --lobby-bg-blur: 6px;
}

.ambient-root.is-hidden {
    display: none;
}

.ambient-root.has-static-fallback {
    background: #050608;
}

.ambient-root.has-static-fallback::before {
    content: "";
    position: absolute;
    inset: -10px;
    background:
        linear-gradient(180deg, rgba(2, 3, 8, 0.02), rgba(2, 3, 8, 0.38)),
        url("/assets/arcade-room-bg.webp") center top / cover no-repeat,
        #050608;
    filter: blur(var(--lobby-bg-blur)) saturate(1.04);
}

.ambient-canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: blur(var(--lobby-bg-blur)) saturate(1.04);
    transform: scale(1.012);
    transform-origin: center;
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 14px;
    width: min(1120px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 14px;
    overflow-x: clip;
}

.topbar {
    position: relative;
    z-index: 30;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(350px, 1fr) minmax(260px, max-content);
    gap: 14px;
    min-height: var(--nav-height);
    max-height: var(--nav-height);
    min-width: 0;
    padding: 0 var(--nav-pad-x) 0 0;
    border: 1px solid transparent;
    border-radius: var(--nav-border-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
        linear-gradient(
            90deg,
            rgba(5, 7, 14, 0.96),
            rgba(9, 12, 21, 0.82) 44%,
            rgba(8, 10, 18, 0.72)
        ),
        rgba(8, 10, 18, 0.82);
    box-shadow:
        inset 0 0px 0 rgba(255, 255, 255, 0.055),
        inset 0 0px 0 rgba(0, 0, 0, 0.34),
        0 12px 28px rgba(0, 0, 0, 0.18);
    overflow: visible;
    --nav-border-speed: 104s;
    --nav-border-radius: 20px;
    --nav-border-thickness: 2px;
}

.topbar::before,
.topbar::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.topbar::before {
    inset: -1px;
    z-index: 1;
    border-radius: var(--nav-border-radius);
    border: 1px solid rgba(76, 201, 255, 0.18);
}

.topbar::after {
    inset: -1px;
    z-index: 0;
    border-radius: 21px;
    box-shadow: 0 0 18px rgba(76, 201, 255, 0.08);
}

.topbar-border-layer {
    position: absolute;
    inset: -1px;
    z-index: 3;
    box-sizing: border-box;
    padding: var(--nav-border-thickness);
    overflow: visible;
    border-radius: var(--nav-border-radius);
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    contain: paint;
    will-change: opacity;
    --nav-angle: -90deg;
    --nav-fill-progress: 0;
}

.topbar-border-layer::after {
    display: none;
}

.topbar-border-svg {
    position: absolute;
    inset: -1px;
    z-index: 4;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
}

.gpu-effects .topbar-border-layer,
.gpu-effects .topbar-border-svg,
.gpu-effects .topbar-inner-glow,
.gpu-effects .welcome-border-glow,
.gpu-effects .welcome-neon-sign::before,
.gpu-effects .welcome-neon-sign::after {
    display: none;
}

.gpu-effects .welcome-neon-sign {
    overflow: visible;
}

.nav-gpu-overlay {
    position: absolute;
    inset: -18px;
    z-index: 3;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    background: transparent;
    pointer-events: none;
}

.nav-gpu-overlay.is-sign {
    inset: -34px;
    z-index: 1;
    width: calc(100% + 68px);
    height: calc(100% + 68px);
}

.nav-gpu-overlay.is-lost {
    display: none;
}

.nav-svg-effect {
    x: 1px;
    y: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    rx: var(--nav-border-radius);
    ry: var(--nav-border-radius);
    fill: none;
    stroke-width: var(--nav-border-thickness);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    will-change: opacity, stroke-dashoffset;
}

.nav-svg-rainbow-glow {
    stroke: url("#navStrokeRainbow");
    stroke-width: calc(var(--nav-border-thickness) + 0.8px);
    stroke-dasharray: 1000 0;
    stroke-opacity: 0.48;
    filter: drop-shadow(0 0 3px rgba(54, 234, 255, 0.28))
        drop-shadow(0 0 8px rgba(255, 77, 184, 0.16));
    animation:
        nav-window-rainbow var(--nav-border-speed) linear infinite,
        nav-svg-rgb-glow 10s ease-in-out infinite;
}

.nav-svg-rainbow {
    stroke: url("#navStrokeRainbow");
    stroke-width: 1.6px;
    stroke-dasharray: 1000 0;
    stroke-opacity: 0.96;
    filter: drop-shadow(0 0 2px rgba(94, 140, 255, 0.24));
    animation:
        nav-window-rainbow var(--nav-border-speed) linear infinite,
        nav-svg-rgb-wave 16s linear infinite;
}

.nav-svg-rainbow-sheen {
    stroke: rgba(232, 252, 255, 0.78);
    stroke-width: 1.3px;
    stroke-dasharray: 62 938;
    filter: drop-shadow(0 0 3px rgba(232, 252, 255, 0.38))
        drop-shadow(0 0 6px rgba(54, 234, 255, 0.18));
    animation:
        nav-window-rainbow var(--nav-border-speed) linear infinite,
        nav-svg-path-run 12s linear infinite,
        nav-svg-rgb-sheen 5.8s ease-in-out infinite;
}

.nav-svg-progress {
    stroke: var(--mint);
    stroke-dasharray: 118 882;
    filter: drop-shadow(0 0 5px rgba(40, 247, 200, 0.46));
    animation:
        nav-window-progress var(--nav-border-speed) linear infinite,
        nav-svg-path-run 14s linear infinite;
}

.nav-svg-energy {
    stroke: #fffdf2;
    stroke-dasharray: 36 16 12 936;
    filter: drop-shadow(0 0 6px rgba(76, 201, 255, 0.55));
    animation:
        nav-window-energy var(--nav-border-speed) linear infinite,
        nav-svg-path-run 13s linear infinite;
}

.nav-svg-comet {
    stroke: url("#navStrokeComet");
    stroke-width: calc(var(--nav-border-thickness) + 0.4px);
    stroke-dasharray: 156 844;
    filter: drop-shadow(0 0 7px rgba(255, 230, 109, 0.42));
    animation:
        nav-window-comet var(--nav-border-speed) linear infinite,
        nav-svg-path-run 14s linear infinite;
}

.nav-svg-aurora {
    stroke: url("#navStrokeAurora");
    stroke-dasharray: 1000 0;
    filter: drop-shadow(0 0 6px rgba(40, 247, 200, 0.28));
    animation:
        nav-window-aurora var(--nav-border-speed) linear infinite,
        nav-svg-soft-pulse 10s ease-in-out infinite;
}

.nav-svg-flicker {
    stroke: var(--blue);
    stroke-dasharray: 1000 0;
    filter: drop-shadow(0 0 5px rgba(76, 201, 255, 0.4));
    animation:
        nav-window-flicker var(--nav-border-speed) linear infinite,
        nav-svg-flicker-breathe 9s ease-in-out infinite;
}

.nav-svg-dots {
    stroke: url("#navStrokeRainbow");
    stroke-width: calc(var(--nav-border-thickness) + 0.2px);
    stroke-dasharray: 1.4 7.2;
    animation:
        nav-window-dots var(--nav-border-speed) linear infinite,
        nav-svg-path-run 15s linear infinite;
}

.nav-svg-fill {
    stroke: url("#navStrokePlasma");
    stroke-dasharray: 0 1000;
    stroke-linecap: butt;
    animation:
        nav-window-fill var(--nav-border-speed) linear infinite,
        nav-svg-fill-path 12s linear infinite;
}

.nav-svg-crt {
    stroke: rgba(185, 255, 245, 0.88);
    stroke-dasharray: 64 936;
    filter: drop-shadow(0 0 5px rgba(185, 255, 245, 0.34));
    animation:
        nav-window-crt var(--nav-border-speed) linear infinite,
        nav-svg-path-run 13s linear infinite;
}

.nav-svg-sparkle {
    stroke: #fffdf2;
    stroke-width: calc(var(--nav-border-thickness) + 0.4px);
    stroke-dasharray: 0.6 15 1.6 38 0.8 27;
    filter: drop-shadow(0 0 6px rgba(255, 253, 242, 0.46));
    animation:
        nav-window-sparkle var(--nav-border-speed) linear infinite,
        nav-svg-path-run 14s linear infinite,
        nav-svg-sparkle-twinkle 4.8s ease-in-out infinite;
}

.nav-svg-plasma {
    stroke: url("#navStrokePlasma");
    stroke-dasharray: 720 280;
    filter: drop-shadow(0 0 7px rgba(255, 77, 125, 0.32));
    animation:
        nav-window-plasma var(--nav-border-speed) linear infinite,
        nav-svg-path-run 16s linear infinite,
        nav-svg-soft-pulse 10s ease-in-out infinite;
}

.nav-fx-rainbow,
.nav-fx-progress,
.nav-fx-energy,
.nav-fx-comet,
.nav-fx-aurora,
.nav-fx-flicker,
.nav-fx-dots,
.nav-fx-fill,
.nav-fx-crt,
.nav-fx-sparkle,
.nav-fx-plasma {
    display: none;
}

.nav-fx-rainbow {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        #4cc9ff 0deg,
        #28f7c8 58deg,
        #ffe66d 118deg,
        #ff4d7d 180deg,
        #c45cff 252deg,
        #4cc9ff 360deg
    );
    animation:
        nav-window-rainbow var(--nav-border-speed) linear infinite,
        nav-rainbow-border 6s linear infinite;
}

.nav-fx-progress {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        transparent 0deg 270deg,
        rgba(40, 247, 200, 0.12) 282deg,
        #28f7c8 298deg 314deg,
        rgba(40, 247, 200, 0.12) 328deg,
        transparent 342deg 360deg
    );
    animation:
        nav-window-progress var(--nav-border-speed) linear infinite,
        nav-progress-border 6s linear infinite;
}

.nav-fx-energy {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        transparent 0deg 278deg,
        rgba(76, 201, 255, 0.14) 289deg,
        #fffdf2 300deg,
        #4cc9ff 310deg 318deg,
        transparent 333deg 360deg
    );
    animation:
        nav-window-energy var(--nav-border-speed) linear infinite,
        nav-energy-border 6s linear infinite;
}

.nav-fx-comet {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        transparent 0deg 240deg,
        rgba(255, 253, 242, 0.08) 256deg,
        rgba(255, 230, 109, 0.34) 274deg,
        #fffdf2 292deg 302deg,
        #4cc9ff 310deg,
        transparent 334deg 360deg
    );
    animation:
        nav-window-comet var(--nav-border-speed) linear infinite,
        nav-comet-border 6s linear infinite;
}

.nav-fx-aurora {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        rgba(76, 201, 255, 0.24) 0deg,
        rgba(40, 247, 200, 0.95) 62deg,
        rgba(255, 230, 109, 0.32) 118deg,
        rgba(196, 92, 255, 0.86) 196deg,
        rgba(255, 77, 125, 0.36) 276deg,
        rgba(76, 201, 255, 0.24) 360deg
    );
    animation:
        nav-window-aurora var(--nav-border-speed) linear infinite,
        nav-aurora-border 6s linear infinite;
}

.nav-fx-glitch {
    border: 1px solid rgba(255, 77, 125, 0.48);
    box-shadow:
        0 0 0 1px rgba(76, 201, 255, 0.3),
        0 0 12px rgba(255, 77, 125, 0.22);
    animation:
        nav-window-glitch var(--nav-border-speed) linear infinite,
        nav-glitch-red 6s ease-in-out infinite;
}

.nav-fx-corners {
    background:
        radial-gradient(
            circle at 0 0,
            rgba(40, 247, 200, 0.95) 0 5px,
            rgba(40, 247, 200, 0.28) 6px 13px,
            transparent 14px
        ),
        radial-gradient(
            circle at 100% 0,
            rgba(255, 230, 109, 0.9) 0 5px,
            rgba(255, 230, 109, 0.25) 6px 13px,
            transparent 14px
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(255, 77, 125, 0.9) 0 5px,
            rgba(255, 77, 125, 0.25) 6px 13px,
            transparent 14px
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(76, 201, 255, 0.9) 0 5px,
            rgba(76, 201, 255, 0.25) 6px 13px,
            transparent 14px
        );
    animation:
        nav-window-corners var(--nav-border-speed) linear infinite,
        nav-corner-pulse 6s linear infinite;
}

.nav-fx-flicker {
    border: 1px solid rgba(76, 201, 255, 0.48);
    box-shadow:
        0 0 10px rgba(76, 201, 255, 0.24),
        inset 0 0 10px rgba(76, 201, 255, 0.08);
    animation:
        nav-window-flicker var(--nav-border-speed) linear infinite,
        nav-neon-breathe 6s ease-in-out infinite;
}

.nav-fx-dots {
    background: repeating-conic-gradient(
        from var(--nav-angle) at 50% 50%,
        #ffe66d 0deg 3deg,
        transparent 3deg 8deg,
        #ff4d7d 8deg 11deg,
        transparent 11deg 16deg,
        #4cc9ff 16deg 19deg,
        transparent 19deg 24deg,
        #28f7c8 24deg 27deg,
        transparent 27deg 32deg
    );
    animation:
        nav-window-dots var(--nav-border-speed) linear infinite,
        nav-dot-border 6s linear infinite;
}

.nav-fx-fill {
    background: conic-gradient(
        from -90deg at 50% 50%,
        #ffe66d 0deg calc(var(--nav-fill-progress) * 1deg),
        #28f7c8 calc(var(--nav-fill-progress) * 1deg)
            calc(var(--nav-fill-progress) * 1deg + 5deg),
        transparent calc(var(--nav-fill-progress) * 1deg + 5deg) 360deg
    );
    animation:
        nav-window-fill var(--nav-border-speed) linear infinite,
        nav-fill-border 6s linear infinite;
}

.nav-fx-crt {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        transparent 0deg 276deg,
        rgba(185, 255, 245, 0.12) 288deg,
        rgba(185, 255, 245, 0.78) 302deg 313deg,
        rgba(185, 255, 245, 0.12) 326deg,
        transparent 342deg 360deg
    );
    animation:
        nav-window-crt var(--nav-border-speed) linear infinite,
        nav-crt-scan 6s linear infinite;
}

.nav-fx-sparkle {
    background: repeating-conic-gradient(
        from var(--nav-angle) at 50% 50%,
        transparent 0deg 10deg,
        rgba(255, 253, 242, 0.95) 10deg 12deg,
        transparent 12deg 23deg,
        rgba(255, 77, 125, 0.8) 23deg 25deg,
        transparent 25deg 38deg,
        rgba(76, 201, 255, 0.9) 38deg 40deg,
        transparent 40deg 54deg
    );
    animation:
        nav-window-sparkle var(--nav-border-speed) linear infinite,
        nav-sparkle-border 6s linear infinite,
        nav-sparkle-twinkle 1.6s ease-in-out infinite;
}

.nav-fx-plasma {
    background: conic-gradient(
        from var(--nav-angle) at 50% 50%,
        #ff4d7d 0deg,
        #ffe66d 54deg,
        #28f7c8 118deg,
        #4cc9ff 186deg,
        #c45cff 268deg,
        #ff4d7d 360deg
    );
    animation:
        nav-window-plasma var(--nav-border-speed) linear infinite,
        nav-plasma-border 6s linear infinite;
}

.topbar.effects-js .topbar-border-layer,
.topbar.effects-js .nav-svg-effect {
    animation: none;
    opacity: 0;
    visibility: hidden;
}

.topbar.effects-js.nav-effect-rainbow .nav-svg-rainbow-glow,
.topbar.effects-js.nav-effect-rainbow .nav-svg-rainbow,
.topbar.effects-js.nav-effect-rainbow .nav-svg-rainbow-sheen,
.topbar.effects-js.nav-effect-progress .nav-svg-progress,
.topbar.effects-js.nav-effect-energy .nav-svg-energy,
.topbar.effects-js.nav-effect-comet .nav-svg-comet,
.topbar.effects-js.nav-effect-aurora .nav-svg-aurora,
.topbar.effects-js.nav-effect-flicker .nav-svg-flicker,
.topbar.effects-js.nav-effect-dots .nav-svg-dots,
.topbar.effects-js.nav-effect-fill .nav-svg-fill,
.topbar.effects-js.nav-effect-crt .nav-svg-crt,
.topbar.effects-js.nav-effect-sparkle .nav-svg-sparkle,
.topbar.effects-js.nav-effect-plasma .nav-svg-plasma,
.topbar.effects-js.nav-effect-glitch .nav-fx-glitch,
.topbar.effects-js.nav-effect-corners .nav-fx-corners {
    visibility: visible;
}

.topbar.effects-js.nav-effect-rainbow .nav-svg-rainbow-glow {
    opacity: 1;
    animation: nav-svg-rgb-glow 10s ease-in-out infinite;
}

.topbar.effects-js.nav-effect-rainbow .nav-svg-rainbow {
    opacity: 1;
    animation: nav-svg-rgb-wave 16s linear infinite;
}

.topbar.effects-js.nav-effect-rainbow .nav-svg-rainbow-sheen {
    opacity: 1;
    animation:
        nav-svg-path-run 12s steps(240, end) infinite,
        nav-svg-rgb-sheen 5.8s ease-in-out infinite;
}

.topbar.effects-js.nav-effect-progress .nav-svg-progress,
.topbar.effects-js.nav-effect-energy .nav-svg-energy,
.topbar.effects-js.nav-effect-comet .nav-svg-comet,
.topbar.effects-js.nav-effect-dots .nav-svg-dots,
.topbar.effects-js.nav-effect-crt .nav-svg-crt {
    opacity: 1;
    animation: nav-svg-path-run 14s steps(240, end) infinite;
}

.topbar.effects-js.nav-effect-energy .nav-svg-energy,
.topbar.effects-js.nav-effect-crt .nav-svg-crt {
    animation-duration: 13s;
}

.topbar.effects-js.nav-effect-dots .nav-svg-dots {
    animation-duration: 15s;
}

.topbar.effects-js.nav-effect-aurora .nav-svg-aurora,
.topbar.effects-js.nav-effect-plasma .nav-svg-plasma {
    opacity: 0.92;
    animation: nav-svg-soft-pulse 10s ease-in-out infinite;
}

.topbar.effects-js.nav-effect-flicker .nav-svg-flicker {
    opacity: 0.95;
    animation: nav-svg-flicker-breathe 9s ease-in-out infinite;
}

.topbar.effects-js.nav-effect-fill .nav-svg-fill {
    opacity: 1;
    animation: nav-svg-fill-path 12s linear infinite;
}

.topbar.effects-js.nav-effect-sparkle .nav-svg-sparkle {
    opacity: 1;
    animation:
        nav-svg-path-run 14s steps(240, end) infinite,
        nav-svg-sparkle-twinkle 4.8s ease-in-out infinite;
}

.topbar.effects-js.nav-effect-glitch .nav-fx-glitch {
    opacity: 0.78;
    animation: nav-glitch-red 6s ease-in-out infinite;
}

.topbar.effects-js.nav-effect-corners .nav-fx-corners {
    opacity: 1;
    animation: nav-corner-pulse 6s linear infinite;
}

.topbar-inner-glow {
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: 7px;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(40, 247, 200, 0.15),
            transparent 20%
        ),
        radial-gradient(
            circle at 100% 0,
            rgba(255, 230, 109, 0.13),
            transparent 18%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(255, 77, 125, 0.13),
            transparent 18%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(76, 201, 255, 0.14),
            transparent 18%
        );
    animation: nav-inner-glow-breathe 8s ease-in-out infinite;
}

.topbar-inner-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0 18%,
        rgba(255, 253, 242, 0.12) 42%,
        rgba(76, 201, 255, 0.12) 50%,
        transparent 76% 100%
    );
    transform: translateX(-115%);
    animation: nav-inner-glow-sweep 6.8s linear infinite;
}

.brand,
.topbar-controls {
    position: relative;
    z-index: 2;
}

.topbar:has(.party-details[open]) .topbar-controls {
    z-index: 90;
}

@keyframes nav-window-rainbow {
    0%,
    7.2423% {
        opacity: 1;
    }
    8.1423%,
    99.1% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes nav-window-progress {
    0%,
    7.2423% {
        opacity: 0;
    }
    8.1423%,
    14.9346% {
        opacity: 1;
    }
    15.8346%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-energy {
    0%,
    14.9346% {
        opacity: 0;
    }
    15.8346%,
    22.6269% {
        opacity: 1;
    }
    23.5269%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-comet {
    0%,
    22.6269% {
        opacity: 0;
    }
    23.5269%,
    30.3192% {
        opacity: 1;
    }
    31.2192%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-aurora {
    0%,
    30.3192% {
        opacity: 0;
    }
    31.2192%,
    38.0115% {
        opacity: 0.92;
    }
    38.9115%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-glitch {
    0%,
    38.0115% {
        opacity: 0;
    }
    38.9115%,
    45.7038% {
        opacity: 0.78;
    }
    46.6038%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-corners {
    0%,
    45.7038% {
        opacity: 0;
    }
    46.6038%,
    53.3962% {
        opacity: 1;
    }
    54.2962%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-flicker {
    0%,
    53.3962% {
        opacity: 0;
    }
    54.2962%,
    61.0885% {
        opacity: 0.95;
    }
    61.9885%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-dots {
    0%,
    61.0885% {
        opacity: 0;
    }
    61.9885%,
    68.7808% {
        opacity: 1;
    }
    69.6808%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-fill {
    0%,
    68.7808% {
        opacity: 0;
    }
    69.6808%,
    76.4731% {
        opacity: 1;
    }
    77.3731%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-crt {
    0%,
    76.4731% {
        opacity: 0;
    }
    77.3731%,
    84.1654% {
        opacity: 1;
    }
    85.0654%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-sparkle {
    0%,
    84.1654% {
        opacity: 0;
    }
    85.0654%,
    91.8577% {
        opacity: 1;
    }
    92.7577%,
    100% {
        opacity: 0;
    }
}

@keyframes nav-window-plasma {
    0%,
    91.8577% {
        opacity: 0;
    }
    92.7577%,
    99.1% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes nav-svg-path-run {
    to {
        stroke-dashoffset: -1000;
    }
}

@keyframes nav-svg-rainbow-glow-suite {
    0%,
    7.2423%,
    100% {
        opacity: 1;
        filter: hue-rotate(0deg) brightness(0.86)
            drop-shadow(0 0 3px rgba(54, 234, 255, 0.22))
            drop-shadow(0 0 8px rgba(255, 77, 184, 0.12));
    }
    3.6% {
        filter: hue-rotate(34deg) brightness(1.08)
            drop-shadow(0 0 4px rgba(94, 140, 255, 0.28))
            drop-shadow(0 0 10px rgba(155, 92, 255, 0.16));
    }
    8.1423%,
    99.1% {
        opacity: 0;
    }
}

@keyframes nav-svg-rainbow-suite {
    0%,
    7.2423%,
    100% {
        opacity: 1;
        filter: hue-rotate(0deg) saturate(1.02) brightness(0.98)
            drop-shadow(0 0 2px rgba(94, 140, 255, 0.22));
    }
    3.6% {
        filter: hue-rotate(28deg) saturate(1.08) brightness(1.06)
            drop-shadow(0 0 3px rgba(255, 77, 184, 0.24));
    }
    8.1423%,
    99.1% {
        opacity: 0;
    }
}

@keyframes nav-svg-rainbow-sheen-suite {
    0% {
        opacity: 1;
        stroke-opacity: 0.16;
        stroke-dashoffset: 0;
    }
    3.6% {
        stroke-opacity: 0.5;
    }
    7.2423%,
    100% {
        opacity: 1;
        stroke-opacity: 0.16;
        stroke-dashoffset: -1000;
    }
    8.1423%,
    99.1% {
        opacity: 0;
    }
}

@keyframes nav-svg-progress-suite {
    0%,
    8.1%,
    15.8346%,
    100% {
        opacity: 0;
    }
    8.1423% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    14.9346% {
        opacity: 1;
        stroke-dashoffset: -1000;
    }
}

@keyframes nav-svg-energy-suite {
    0%,
    15.8%,
    23.5269%,
    100% {
        opacity: 0;
    }
    15.8346% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    22.6269% {
        opacity: 1;
        stroke-dashoffset: -1000;
    }
}

@keyframes nav-svg-comet-suite {
    0%,
    23.5%,
    31.2192%,
    100% {
        opacity: 0;
    }
    23.5269% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    30.3192% {
        opacity: 1;
        stroke-dashoffset: -1000;
    }
}

@keyframes nav-svg-aurora-suite {
    0%,
    31.2%,
    38.9115%,
    100% {
        opacity: 0;
    }
    31.2192%,
    38.0115% {
        opacity: 0.92;
        filter: brightness(0.96) drop-shadow(0 0 4px rgba(76, 201, 255, 0.22));
    }
    34.6% {
        opacity: 0.92;
        filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 77, 125, 0.3));
    }
}

@keyframes nav-svg-flicker-suite {
    0%,
    54.25%,
    61.9885%,
    100% {
        opacity: 0;
    }
    54.2962%,
    61.0885% {
        opacity: 0.95;
        filter: brightness(0.82) drop-shadow(0 0 4px rgba(76, 201, 255, 0.3));
    }
    57.6% {
        opacity: 0.95;
        filter: brightness(1.42) drop-shadow(0 0 9px rgba(76, 201, 255, 0.5));
    }
}

@keyframes nav-svg-dots-suite {
    0%,
    61.95%,
    69.6808%,
    100% {
        opacity: 0;
    }
    61.9885% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    68.7808% {
        opacity: 1;
        stroke-dashoffset: -1000;
    }
}

@keyframes nav-svg-fill-suite {
    0%,
    69.65%,
    77.3731%,
    100% {
        opacity: 0;
        stroke-dasharray: 0 1000;
    }
    69.6808% {
        opacity: 1;
        stroke-dasharray: 0 1000;
    }
    76.4731% {
        opacity: 1;
        stroke-dasharray: 1000 0;
    }
}

@keyframes nav-svg-crt-suite {
    0%,
    77.34%,
    85.0654%,
    100% {
        opacity: 0;
    }
    77.3731% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    84.1654% {
        opacity: 1;
        stroke-dashoffset: -1000;
    }
}

@keyframes nav-svg-sparkle-suite {
    0%,
    85.04%,
    92.7577%,
    100% {
        opacity: 0;
    }
    85.0654% {
        opacity: 1;
        stroke-dashoffset: 0;
        filter: brightness(0.9) drop-shadow(0 0 4px rgba(255, 253, 242, 0.32));
    }
    88.4% {
        opacity: 1;
        filter: brightness(1.55) drop-shadow(0 0 8px rgba(255, 253, 242, 0.5));
    }
    91.8577% {
        opacity: 1;
        stroke-dashoffset: -1000;
        filter: brightness(0.9) drop-shadow(0 0 4px rgba(255, 253, 242, 0.32));
    }
}

@keyframes nav-svg-plasma-suite {
    0%,
    92.74%,
    100% {
        opacity: 0;
    }
    92.7577%,
    99.1% {
        opacity: 1;
        filter: brightness(0.96) drop-shadow(0 0 4px rgba(76, 201, 255, 0.22));
    }
    96% {
        opacity: 1;
        filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 77, 125, 0.3));
    }
}

@keyframes nav-layer-glitch-suite {
    0%,
    38.85%,
    46.6038%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
        filter: brightness(1);
    }
    38.9115% {
        opacity: 0.78;
        transform: translate(0, 0);
        filter: brightness(1);
    }
    40.1% {
        opacity: 0.78;
        transform: translate(0.28px, -0.22px);
        filter: brightness(1.28);
    }
    40.7% {
        opacity: 0.78;
        transform: translate(-0.22px, 0.18px);
        filter: brightness(0.96);
    }
    42.2%,
    45% {
        opacity: 0.78;
        transform: translate(0, 0);
        filter: brightness(1.05);
    }
    45.7038% {
        opacity: 0.78;
        transform: translate(0, 0);
        filter: brightness(1);
    }
}

@keyframes nav-layer-corners-suite {
    0%,
    46.55%,
    54.2962%,
    100% {
        opacity: 0;
        filter: brightness(0.88);
    }
    46.6038%,
    53.3962% {
        opacity: 1;
        filter: brightness(0.88);
    }
    50% {
        opacity: 1;
        filter: brightness(1.38);
    }
}

@keyframes nav-svg-rgb-wave {
    0% {
        filter: hue-rotate(0deg) saturate(1.02) brightness(0.98)
            drop-shadow(0 0 2px rgba(94, 140, 255, 0.22));
    }
    50% {
        filter: hue-rotate(28deg) saturate(1.08) brightness(1.06)
            drop-shadow(0 0 3px rgba(255, 77, 184, 0.24));
    }
    100% {
        filter: hue-rotate(56deg) saturate(1.02) brightness(0.98)
            drop-shadow(0 0 2px rgba(54, 234, 255, 0.22));
    }
}

@keyframes nav-svg-rgb-glow {
    0%,
    100% {
        filter: hue-rotate(0deg) brightness(0.86)
            drop-shadow(0 0 3px rgba(54, 234, 255, 0.22))
            drop-shadow(0 0 8px rgba(255, 77, 184, 0.12));
    }
    50% {
        filter: hue-rotate(34deg) brightness(1.08)
            drop-shadow(0 0 4px rgba(94, 140, 255, 0.28))
            drop-shadow(0 0 10px rgba(155, 92, 255, 0.16));
    }
}

@keyframes nav-svg-rgb-sheen {
    0%,
    100% {
        stroke-opacity: 0.16;
    }
    50% {
        stroke-opacity: 0.5;
    }
}

@keyframes nav-svg-fill-path {
    0% {
        stroke-dasharray: 0 1000;
    }
    86%,
    100% {
        stroke-dasharray: 1000 0;
    }
}

@keyframes nav-svg-soft-pulse {
    0%,
    100% {
        filter: brightness(0.96) drop-shadow(0 0 4px rgba(76, 201, 255, 0.22));
    }
    50% {
        filter: brightness(1.18) drop-shadow(0 0 8px rgba(255, 77, 125, 0.3));
    }
}

@keyframes nav-svg-flicker-breathe {
    0%,
    100% {
        filter: brightness(0.82) drop-shadow(0 0 4px rgba(76, 201, 255, 0.3));
    }
    50% {
        filter: brightness(1.42) drop-shadow(0 0 9px rgba(76, 201, 255, 0.5));
    }
}

@keyframes nav-svg-sparkle-twinkle {
    0%,
    100% {
        filter: brightness(0.9) drop-shadow(0 0 4px rgba(255, 253, 242, 0.32));
    }
    50% {
        filter: brightness(1.55) drop-shadow(0 0 8px rgba(255, 253, 242, 0.5));
    }
}

@keyframes nav-rainbow-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-progress-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-energy-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-comet-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-aurora-border {
    from {
        --nav-angle: 270deg;
    }
    to {
        --nav-angle: -90deg;
    }
}

@keyframes nav-glitch-red {
    0%,
    100% {
        transform: translate(0, 0);
        filter: brightness(1);
    }
    18% {
        transform: translate(0.28px, -0.22px);
        filter: brightness(1.28);
    }
    22% {
        transform: translate(-0.22px, 0.18px);
        filter: brightness(0.96);
    }
    26%,
    62% {
        transform: translate(0, 0);
        filter: brightness(1.05);
    }
    66% {
        transform: translate(0.18px, 0);
        filter: brightness(1.22);
    }
    70% {
        transform: translate(0, 0);
        filter: brightness(1);
    }
}

@keyframes nav-corner-pulse {
    0%,
    100% {
        filter: brightness(0.88);
    }
    50% {
        filter: brightness(1.38);
    }
}

@keyframes nav-neon-breathe {
    0%,
    100% {
        filter: brightness(0.82);
    }
    50% {
        filter: brightness(1.42);
    }
}

@keyframes nav-dot-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-fill-border {
    from {
        --nav-fill-progress: 0;
    }
    to {
        --nav-fill-progress: 360;
    }
}

@keyframes nav-crt-scan {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-sparkle-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-sparkle-twinkle {
    0%,
    100% {
        filter: brightness(0.9);
    }
    50% {
        filter: brightness(1.55);
    }
}

@keyframes nav-plasma-border {
    from {
        --nav-angle: -90deg;
    }
    to {
        --nav-angle: 270deg;
    }
}

@keyframes nav-inner-glow-breathe {
    0%,
    100% {
        opacity: 0.74;
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 1;
        filter: hue-rotate(36deg);
    }
}

@keyframes nav-inner-glow-sweep {
    0% {
        transform: translateX(-115%);
        opacity: 0;
    }
    34%,
    64% {
        opacity: 0.86;
    }
    100% {
        transform: translateX(115%);
        opacity: 0;
    }
}

@keyframes nav-css-border-suite {
    0% {
        opacity: 1;
        transform: translate(0, 0);
        background:
            linear-gradient(
                    90deg,
                    #4cc9ff,
                    #28f7c8,
                    #ffe66d,
                    #ff4d7d,
                    #c45cff,
                    #4cc9ff
                )
                0 0 / 340px 2px repeat-x,
            linear-gradient(
                    180deg,
                    #28f7c8,
                    #ffe66d,
                    #ff4d7d,
                    #c45cff,
                    #4cc9ff,
                    #28f7c8
                )
                100% 0 / 2px 340px repeat-y,
            linear-gradient(
                    270deg,
                    #ffe66d,
                    #ff4d7d,
                    #c45cff,
                    #4cc9ff,
                    #28f7c8,
                    #ffe66d
                )
                0 100% / 340px 2px repeat-x,
            linear-gradient(
                    0deg,
                    #ff4d7d,
                    #c45cff,
                    #4cc9ff,
                    #28f7c8,
                    #ffe66d,
                    #ff4d7d
                )
                0 0 / 2px 340px repeat-y;
    }
    12.55% {
        background-position:
            340px 0,
            1092px 340px,
            -340px 90px,
            0 -340px;
    }
    12.75% {
        opacity: 1;
        background:
            linear-gradient(
                    90deg,
                    transparent 0 38%,
                    #28f7c8 46% 54%,
                    transparent 62%
                )
                0 0 / 260px 2px repeat-x,
            linear-gradient(
                    180deg,
                    transparent 0 38%,
                    #28f7c8 46% 54%,
                    transparent 62%
                )
                100% 0 / 2px 260px repeat-y,
            linear-gradient(
                    270deg,
                    transparent 0 38%,
                    #28f7c8 46% 54%,
                    transparent 62%
                )
                0 100% / 260px 2px repeat-x,
            linear-gradient(
                    0deg,
                    transparent 0 38%,
                    #28f7c8 46% 54%,
                    transparent 62%
                )
                0 0 / 2px 260px repeat-y;
    }
    22.95% {
        background-position:
            520px 0,
            1092px 520px,
            -520px 90px,
            0 -520px;
    }
    23.15% {
        opacity: 1;
        background:
            linear-gradient(
                    90deg,
                    transparent 0 52%,
                    #fffdf2 57%,
                    #4cc9ff 61%,
                    transparent 70%
                )
                0 0 / 300px 2px repeat-x,
            linear-gradient(
                    180deg,
                    transparent 0 52%,
                    #fffdf2 57%,
                    #4cc9ff 61%,
                    transparent 70%
                )
                100% 0 / 2px 300px repeat-y,
            linear-gradient(
                    270deg,
                    transparent 0 52%,
                    #fffdf2 57%,
                    #4cc9ff 61%,
                    transparent 70%
                )
                0 100% / 300px 2px repeat-x,
            linear-gradient(
                    0deg,
                    transparent 0 52%,
                    #fffdf2 57%,
                    #4cc9ff 61%,
                    transparent 70%
                )
                0 0 / 2px 300px repeat-y;
    }
    31.68% {
        background-position:
            600px 0,
            1092px 600px,
            -600px 90px,
            0 -600px;
    }
    31.88%,
    40.07% {
        opacity: 0.42;
        background:
            linear-gradient(
                    90deg,
                    rgba(255, 77, 125, 0.85),
                    rgba(255, 77, 125, 0.32)
                )
                0 0 / 100% 1px no-repeat,
            linear-gradient(
                    180deg,
                    rgba(76, 201, 255, 0.78),
                    rgba(76, 201, 255, 0.26)
                )
                100% 0 / 1px 100% no-repeat,
            linear-gradient(
                    270deg,
                    rgba(76, 201, 255, 0.78),
                    rgba(255, 77, 125, 0.32)
                )
                0 100% / 100% 1px no-repeat,
            linear-gradient(
                    0deg,
                    rgba(255, 77, 125, 0.72),
                    rgba(76, 201, 255, 0.28)
                )
                0 0 / 1px 100% no-repeat;
    }
    33.6%,
    37.2% {
        transform: translate(0.7px, -0.6px);
        opacity: 0.74;
    }
    35.4%,
    39.1% {
        transform: translate(-0.6px, 0.5px);
        opacity: 0.46;
    }
    40.27%,
    49.46% {
        transform: translate(0, 0);
        opacity: 1;
        background:
            radial-gradient(
                circle at 0 0,
                rgba(40, 247, 200, 0.95) 0 5px,
                rgba(40, 247, 200, 0.28) 6px 13px,
                transparent 14px
            ),
            radial-gradient(
                circle at 100% 0,
                rgba(255, 230, 109, 0.9) 0 5px,
                rgba(255, 230, 109, 0.25) 6px 13px,
                transparent 14px
            ),
            radial-gradient(
                circle at 100% 100%,
                rgba(255, 77, 125, 0.9) 0 5px,
                rgba(255, 77, 125, 0.25) 6px 13px,
                transparent 14px
            ),
            radial-gradient(
                circle at 0 100%,
                rgba(76, 201, 255, 0.9) 0 5px,
                rgba(76, 201, 255, 0.25) 6px 13px,
                transparent 14px
            );
    }
    43.2%,
    47.8% {
        opacity: 0.22;
    }
    49.66%,
    58.19% {
        opacity: 0.42;
        background:
            linear-gradient(
                    90deg,
                    rgba(76, 201, 255, 0.84),
                    rgba(76, 201, 255, 0.34)
                )
                0 0 / 100% 1px no-repeat,
            linear-gradient(180deg, rgba(76, 201, 255, 0.64), transparent) 100%
                0 / 1px 100% no-repeat,
            linear-gradient(
                    270deg,
                    rgba(76, 201, 255, 0.84),
                    rgba(76, 201, 255, 0.28)
                )
                0 100% / 100% 1px no-repeat,
            linear-gradient(0deg, rgba(76, 201, 255, 0.64), transparent) 0 0 /
                1px 100% no-repeat;
    }
    54% {
        opacity: 0.86;
    }
    58.39% {
        opacity: 1;
        background:
            repeating-linear-gradient(
                    90deg,
                    #ffe66d 0 4px,
                    transparent 4px 11px
                )
                0 0 / 220px 2px repeat-x,
            repeating-linear-gradient(
                    180deg,
                    #ff4d7d 0 4px,
                    transparent 4px 11px
                )
                100% 0 / 2px 220px repeat-y,
            repeating-linear-gradient(
                    270deg,
                    #4cc9ff 0 4px,
                    transparent 4px 11px
                )
                0 100% / 220px 2px repeat-x,
            repeating-linear-gradient(0deg, #28f7c8 0 4px, transparent 4px 11px)
                0 0 / 2px 220px repeat-y;
    }
    67.59% {
        background-position:
            220px 0,
            1092px 220px,
            -220px 90px,
            0 -220px;
    }
    67.79% {
        opacity: 1;
        background:
            linear-gradient(90deg, #ffe66d, #28f7c8) 0 0 / 0 2px no-repeat,
            linear-gradient(180deg, #28f7c8, #4cc9ff) 100% 0 / 2px 0 no-repeat,
            linear-gradient(270deg, #4cc9ff, #c45cff) 100% 100% / 0 2px
                no-repeat,
            linear-gradient(0deg, #c45cff, #ff4d7d) 0 100% / 2px 0 no-repeat;
    }
    70.36% {
        background-size:
            100% 2px,
            2px 0,
            0 2px,
            2px 0;
    }
    72.94% {
        background-size:
            100% 2px,
            2px 100%,
            0 2px,
            2px 0;
    }
    75.52% {
        background-size:
            100% 2px,
            2px 100%,
            100% 2px,
            2px 0;
    }
    77.02%,
    78.32% {
        background-size:
            100% 2px,
            2px 100%,
            100% 2px,
            2px 100%;
    }
    78.52% {
        opacity: 1;
        background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(185, 255, 245, 0.78),
                    transparent
                )
                0 0 / 180px 2px repeat-x,
            linear-gradient(
                    180deg,
                    transparent,
                    rgba(185, 255, 245, 0.58),
                    transparent
                )
                100% 0 / 2px 180px repeat-y,
            linear-gradient(
                    270deg,
                    transparent,
                    rgba(185, 255, 245, 0.78),
                    transparent
                )
                0 100% / 180px 2px repeat-x,
            linear-gradient(
                    0deg,
                    transparent,
                    rgba(185, 255, 245, 0.58),
                    transparent
                )
                0 0 / 2px 180px repeat-y;
    }
    87.05% {
        background-position:
            360px 0,
            1092px 360px,
            -360px 90px,
            0 -360px;
    }
    87.25% {
        opacity: 1;
        background:
            linear-gradient(
                    90deg,
                    #ff4d7d,
                    #ffe66d,
                    #28f7c8,
                    #4cc9ff,
                    #c45cff,
                    #ff4d7d
                )
                0 0 / 520px 2px repeat-x,
            linear-gradient(
                    180deg,
                    #ffe66d,
                    #28f7c8,
                    #4cc9ff,
                    #c45cff,
                    #ff4d7d,
                    #ffe66d
                )
                100% 0 / 2px 520px repeat-y,
            linear-gradient(
                    270deg,
                    #28f7c8,
                    #4cc9ff,
                    #c45cff,
                    #ff4d7d,
                    #ffe66d,
                    #28f7c8
                )
                0 100% / 520px 2px repeat-x,
            linear-gradient(
                    0deg,
                    #4cc9ff,
                    #c45cff,
                    #ff4d7d,
                    #ffe66d,
                    #28f7c8,
                    #4cc9ff
                )
                0 0 / 2px 520px repeat-y;
    }
    100% {
        background-position:
            390px 0,
            1092px 420px,
            -390px 90px,
            0 -420px;
    }
}

@keyframes nav-css-inner-suite {
    0%,
    12.55% {
        opacity: 1;
        background:
            linear-gradient(
                90deg,
                rgba(76, 201, 255, 0.16),
                transparent 22%,
                transparent 72%,
                rgba(255, 77, 125, 0.14)
            ),
            linear-gradient(180deg, rgba(255, 230, 109, 0.05), transparent 44%);
    }
    12.75%,
    22.95% {
        opacity: 1;
        background:
            radial-gradient(
                circle at 18% 0,
                rgba(40, 247, 200, 0.16),
                transparent 26%
            ),
            radial-gradient(
                circle at 82% 100%,
                rgba(76, 201, 255, 0.12),
                transparent 28%
            );
    }
    23.15%,
    31.68%,
    78.52%,
    87.05% {
        opacity: 1;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 253, 242, 0.12),
            rgba(76, 201, 255, 0.1),
            transparent
        );
    }
    31.88%,
    40.07% {
        opacity: 1;
        background: linear-gradient(
            90deg,
            rgba(255, 77, 125, 0.09),
            transparent 28%,
            rgba(76, 201, 255, 0.08)
        );
    }
    40.27%,
    49.46% {
        opacity: 1;
        background:
            radial-gradient(
                circle at 0 0,
                rgba(40, 247, 200, 0.16),
                transparent 18%
            ),
            radial-gradient(
                circle at 100% 0,
                rgba(255, 230, 109, 0.13),
                transparent 18%
            ),
            radial-gradient(
                circle at 100% 100%,
                rgba(255, 77, 125, 0.13),
                transparent 18%
            ),
            radial-gradient(
                circle at 0 100%,
                rgba(76, 201, 255, 0.14),
                transparent 18%
            );
    }
    49.66%,
    58.19% {
        opacity: 0.72;
        background: linear-gradient(
            180deg,
            rgba(76, 201, 255, 0.09),
            transparent 58%
        );
    }
    58.39%,
    67.59% {
        opacity: 1;
        background: repeating-linear-gradient(
            90deg,
            rgba(255, 230, 109, 0.07) 0 16px,
            rgba(76, 201, 255, 0.06) 16px 32px,
            transparent 32px 64px
        );
    }
    67.79%,
    78.32% {
        opacity: 1;
        background: linear-gradient(
            90deg,
            rgba(255, 230, 109, 0.12),
            rgba(40, 247, 200, 0.1),
            rgba(255, 77, 125, 0.08)
        );
    }
    87.25%,
    100% {
        opacity: 1;
        background: linear-gradient(
            90deg,
            rgba(196, 92, 255, 0.12),
            rgba(255, 77, 125, 0.1),
            rgba(76, 201, 255, 0.1)
        );
    }
}

@keyframes nav-css-inner-runner {
    0%,
    12.75%,
    23.15%,
    49.66%,
    67.79%,
    78.52%,
    87.25% {
        transform: translateX(-115%);
        opacity: 0;
    }
    6.2%,
    27.4%,
    54%,
    73.1%,
    82.8%,
    93.6% {
        opacity: 1;
    }
    12.55%,
    31.68%,
    58.19%,
    78.32%,
    87.05%,
    100% {
        transform: translateX(115%);
        opacity: 0;
    }
}

.brand,
.topbar-controls {
    position: relative;
    top: -1px;
}

.brand {
    display: grid;
    grid-template-columns: var(--nav-logo-size) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    height: var(--nav-logo-size);
    color: inherit;
    text-decoration: none;
    left: -1px;
}

.brand-tower {
    position: relative;
    display: grid;
    justify-items: center;
    height: var(--nav-logo-size);
    min-width: 0;
}

.brand-mark {
    display: grid;
    width: var(--nav-logo-size);
    height: var(--nav-logo-size);
    place-items: center;
    margin: 0;
    border: 0;
    border-radius: var(--nav-border-radius);
    background: transparent;
    overflow: hidden;
    box-shadow: none;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    opacity: 1;
    transform: none;
}

.brand-sign-hanger {
    position: absolute;
    top: calc(var(--nav-height) + 2px + var(--nav-sign-drop));
    z-index: 1;
    display: grid;
    justify-items: center;
    padding-top: var(--nav-sign-rope);
    pointer-events: none;
    transform: translateX(var(--nav-sign-offset-x));
}

.brand-sign-hanger::before,
.brand-sign-hanger::after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: var(--nav-sign-rope);
    background: linear-gradient(
        180deg,
        rgba(255, 247, 219, 0.7),
        rgba(255, 247, 219, 0.1)
    );
    box-shadow: 0 0 6px rgba(255, 230, 109, 0.18);
}

.brand-sign-hanger::before {
    /* This ones a bit longer since sign is tilted*/
    left: calc(50% - 25px);
    height: calc(var(--nav-sign-rope) + 5px);
}

.brand-sign-hanger::after {
    left: calc(50% + 25px);
}

.brand strong,
.brand small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-copy {
    min-width: 0;
}

.brand strong {
    color: transparent;
    font-size: 1.16rem;
    letter-spacing: 0;
    background: linear-gradient(100deg, #70d7ff 0%, #fff7db 42%, #ff5c9d 100%);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow:
        0 0 13px rgba(76, 201, 255, 0.2),
        0 0 18px rgba(255, 77, 125, 0.12);
}

.brand small,
.game-card-meta,
.board-name small,
.seat-badge,
.country-badge,
.result-kicker {
    color: var(--muted);
    font-size: 0.78rem;
}

.brand small {
    color: #b9c9da;
    text-shadow:
        0 0 10px rgba(76, 201, 255, 0.16),
        0 0 13px rgba(255, 77, 125, 0.08);
}

.welcome-neon-sign {
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 40px;
    place-items: center;
    padding: 7px 13px;
    border: 0;
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(12, 6, 19, 0.92), rgba(5, 7, 14, 0.94)),
        #090b12;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 14px rgba(255, 230, 109, 0.18),
        0 0 22px rgba(196, 92, 255, 0.14);
    color: var(--sun);
    font-size: 0.78rem;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-1deg);
}

.welcome-border-glow {
    position: absolute;
    inset: -5px;
    border-radius: 10px;
    background:
        linear-gradient(
                90deg,
                #4cc9ff,
                #28f7c8,
                #ffe66d,
                #ff4d7d,
                #c45cff,
                #4cc9ff
            )
            0 5px / 220px 2px repeat-x,
        linear-gradient(
                180deg,
                #28f7c8,
                #ffe66d,
                #ff4d7d,
                #c45cff,
                #4cc9ff,
                #28f7c8
            )
            calc(100% - 5px) 0 / 2px 220px repeat-y,
        linear-gradient(
                270deg,
                #ffe66d,
                #ff4d7d,
                #c45cff,
                #4cc9ff,
                #28f7c8,
                #ffe66d
            )
            0 calc(100% - 5px) / 220px 2px repeat-x,
        linear-gradient(
                0deg,
                #ff4d7d,
                #c45cff,
                #4cc9ff,
                #28f7c8,
                #ffe66d,
                #ff4d7d
            )
            5px 0 / 2px 220px repeat-y;
    pointer-events: none;
}

.welcome-border-glow {
    z-index: 0;
    display: block;
    filter: blur(7px);
    opacity: 0.76;
}

.welcome-neon-sign::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background:
        linear-gradient(
                90deg,
                #4cc9ff,
                #28f7c8,
                #ffe66d,
                #ff4d7d,
                #c45cff,
                #4cc9ff
            )
            0 0 / 220px 2px repeat-x,
        linear-gradient(
                180deg,
                #28f7c8,
                #ffe66d,
                #ff4d7d,
                #c45cff,
                #4cc9ff,
                #28f7c8
            )
            100% 0 / 2px 220px repeat-y,
        linear-gradient(
                270deg,
                #ffe66d,
                #ff4d7d,
                #c45cff,
                #4cc9ff,
                #28f7c8,
                #ffe66d
            )
            0 100% / 220px 2px repeat-x,
        linear-gradient(
                0deg,
                #ff4d7d,
                #c45cff,
                #4cc9ff,
                #28f7c8,
                #ffe66d,
                #ff4d7d
            )
            0 0 / 2px 220px repeat-y;
    pointer-events: none;
}

.welcome-neon-sign::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 2;
    border: 1px solid rgba(76, 201, 255, 0.2);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(12, 6, 19, 0.94), rgba(5, 7, 14, 0.96)),
        #090b12;
    pointer-events: none;
}

.welcome-word {
    position: relative;
    z-index: 3;
}

.welcome-word-always {
    color: #4cc9ff;
    text-shadow:
        0 0 7px rgba(76, 201, 255, 0.9),
        0 0 17px rgba(76, 201, 255, 0.58);
}

.welcome-word-open {
    color: #ff4d7d;
    text-shadow:
        0 0 7px rgba(255, 77, 125, 0.9),
        0 0 17px rgba(255, 77, 125, 0.62),
        0 0 26px rgba(255, 230, 109, 0.34);
}

.topbar-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr);
    gap: 8px;
    align-items: stretch;
    justify-self: end;
    min-width: 0;
    width: 100%;
}

.score-pill,
.arcade-stat,
.match-status {
    min-height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #4cc9ff) 28%, rgba(255, 247, 219, 0.12));
    border-radius: 8px;
    padding: 7px 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 56%),
        rgba(17, 23, 34, 0.9);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 8px 20px rgba(0, 0, 0, 0.14);
}

.score-pill.mine,
.arcade-stat {
    border-color: rgba(255, 230, 109, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 247, 219, 0.035), transparent),
        rgba(18, 23, 33, 0.9);
}

.score-pill strong,
.arcade-stat strong {
    color: var(--sun);
}

.turn-badge {
    color: #06130f;
    background: var(--mint);
}

.match-status.is-your-turn {
    border-color: rgba(40, 247, 200, 0.5);
    color: #06130f;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 62%),
        var(--mint);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 0 18px rgba(40, 247, 200, 0.24);
}

.match-status.is-opponent-turn {
    border-color: rgba(76, 201, 255, 0.34);
    color: rgba(255, 247, 219, 0.88);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 58%),
        rgba(19, 28, 42, 0.94);
}

.match-status.is-server-closed {
    border-color: rgba(240, 68, 85, 0.6);
    color: #fff7db;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 58%),
        linear-gradient(135deg, #5b1725, var(--danger));
}

.match-status.is-pending {
    border-color: rgba(255, 230, 109, 0.48);
    color: var(--sun);
    background:
        linear-gradient(180deg, rgba(255, 230, 109, 0.1), transparent 58%),
        rgba(38, 30, 15, 0.94);
}

.match-status.is-finished {
    border-color: rgba(255, 247, 219, 0.22);
    color: rgba(255, 247, 219, 0.82);
    background: rgba(24, 26, 34, 0.92);
}

input,
textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(76, 201, 255, 0.24);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--text);
    background: #0b1018;
    outline: none;
}

input:focus,
textarea:focus,
button:focus-visible,
summary:focus-visible {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(40, 247, 200, 0.16);
    outline: none;
}

.primary-button,
.secondary-button,
.danger-button,
.queue-button,
.arcade-command {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 13px;
    font-weight: 850;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 16px rgba(0, 0, 0, 0.14),
        0 0 0 rgba(0, 0, 0, 0);
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease,
        opacity 120ms ease;
}

.primary-button,
.queue-button,
.arcade-command {
    color: #06130f;
    border-color: rgba(40, 247, 200, 0.54);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 52%),
        linear-gradient(135deg, var(--mint), #8affde 58%, #4cc9ff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -10px 18px rgba(0, 0, 0, 0.12),
        0 0 18px rgba(40, 247, 200, 0.16);
}

.secondary-button {
    color: #dff6ff;
    border-color: rgba(76, 201, 255, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 55%),
        linear-gradient(135deg, rgba(23, 44, 66, 0.96), rgba(13, 22, 34, 0.96));
}

.secondary-button:hover:not(:disabled) {
    border-color: rgba(76, 201, 255, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 16px rgba(0, 0, 0, 0.14),
        0 0 16px rgba(76, 201, 255, 0.14);
}

.danger-button {
    color: white;
    border-color: rgba(240, 68, 85, 0.58);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 52%),
        linear-gradient(135deg, #ff5c70, var(--danger) 58%, #8f1729);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -10px 18px rgba(0, 0, 0, 0.16),
        0 0 16px rgba(240, 68, 85, 0.16);
}

.compact-button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.82rem;
}

button:not(:disabled):active {
    transform: translateY(1px);
}

.primary-button:hover:not(:disabled),
.queue-button:hover:not(:disabled),
.arcade-command:hover:not(:disabled),
.party-create-button:hover:not(:disabled) {
    border-color: rgba(40, 247, 200, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -10px 18px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(40, 247, 200, 0.22);
}

#partyRegenerate,
#partyPrivacy,
#requeueButton,
#resultBackButton,
#backButton,
#confirmCancel,
#matchOfferDecline {
    border-color: rgba(76, 201, 255, 0.34);
}

#partyLeave,
#matchOfferDecline {
    color: #fff7db;
    border-color: rgba(255, 77, 125, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 55%),
        linear-gradient(135deg, rgba(74, 26, 43, 0.96), rgba(32, 18, 30, 0.96));
}

#partyRegenerate {
    color: #fff7db;
    border-color: rgba(255, 230, 109, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 55%),
        linear-gradient(135deg, rgba(75, 57, 18, 0.96), rgba(31, 25, 17, 0.96));
}

#partyPrivacy {
    color: #e9f7ff;
    border-color: rgba(76, 201, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 55%),
        linear-gradient(135deg, rgba(18, 48, 69, 0.96), rgba(15, 23, 34, 0.96));
}

.party-panel {
    position: relative;
    display: grid;
    align-items: center;
    justify-self: end;
    width: max-content;
    max-width: 100%;
    height: var(--nav-party-height);
    min-width: 0;
}

.party-empty {
    display: grid;
    grid-template-columns: minmax(132px, auto);
    gap: 5px;
    align-content: center;
    align-items: center;
    justify-content: end;
    min-width: 0;
    height: var(--nav-party-height);
    min-height: 0;
}

.party-create-button {
    display: grid;
    grid-template-columns: 1fr auto;
    min-width: 0;
    min-height: 38px;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(76, 201, 255, 0.68);
    border-radius: 8px;
    padding: 7px 9px 7px 11px;
    color: #fffdf2;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 54%),
        linear-gradient(
            135deg,
            rgba(76, 201, 255, 0.36),
            rgba(255, 77, 125, 0.34)
        ),
        rgba(10, 14, 24, 0.98);
    box-shadow:
        inset 0 0px 0 rgba(255, 255, 255, 0.18),
        inset 0 -10px 18px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(76, 201, 255, 0.24),
        0 0 26px rgba(255, 77, 125, 0.18);
}

.party-kicker {
    color: rgba(255, 247, 219, 0.72);
    font-size: 0.64rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.party-create-button strong {
    display: flex;
    align-items: center;
    min-height: 24px;
    color: #fffdf2;
    font-size: 1rem;
    line-height: 1;
    text-align: left;
    text-shadow:
        0 0 8px rgba(76, 201, 255, 0.42),
        0 0 12px rgba(255, 77, 125, 0.28);
}

.party-create-button i {
    position: relative;
    display: block;
    align-self: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 77, 125, 0.5);
    border-radius: 999px;
    background: linear-gradient(135deg, #4cc9ff, #ff4d7d);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 10px rgba(76, 201, 255, 0.22),
        0 0 14px rgba(255, 77, 125, 0.18);
}

.party-create-button i::before,
.party-create-button i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: #05070c;
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.party-create-button i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.party-help {
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.party-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(112px, auto) minmax(112px, auto);
    grid-template-rows: var(--nav-party-main-height) 17px;
    gap: 2px 5px;
    align-items: center;
    align-content: center;
    width: max-content;
    height: var(--nav-party-height);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 3px;
    background: transparent;
}

.party-actions,
.party-player,
.result-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.party-card > .party-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(56px, 1fr);
    grid-column: 2;
    grid-row: 1;
}

.party-code-shell {
    position: relative;
    display: grid;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    width: max-content;
    min-width: 0;
    height: var(--nav-party-main-height);
}

.party-copy-toast {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px) scale(0.98);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.party-copy-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.party-code-toast {
    inset: 0;
    border-radius: 7px;
    background: rgba(5, 11, 15, 0.78);
    color: var(--mint);
    font-size: 0.88rem;
    font-weight: 1000;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(40, 247, 200, 0.46);
}

.party-code-button {
    display: grid;
    width: 154px;
    min-width: 0;
    min-height: var(--nav-party-main-height);
    height: var(--nav-party-main-height);
    align-content: center;
    justify-items: center;
    border: 1px solid rgba(255, 230, 109, 0.2);
    border-radius: 7px;
    padding: 2px 32px 3px 7px;
    background: rgba(33, 26, 14, 0.82);
    color: inherit;
    overflow: hidden;
}

.party-code-eye {
    position: absolute;
    top: 4px;
    right: 3px;
}

.party-code-refresh {
    position: absolute;
    right: 3px;
    top: 28px;
}

.party-code-eye,
.party-code-refresh {
    width: 24px;
    min-width: 24px;
    min-height: 22px;
    height: 22px;
    padding: 2px;
    border-radius: 6px;
}

.party-code-button span {
    color: var(--mint);
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.party-code-button strong {
    color: var(--sun);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.party-code-button.is-hidden {
    border-color: rgba(76, 201, 255, 0.22);
    background: rgba(15, 27, 37, 0.82);
}

.party-code-button.is-hidden strong {
    color: #b9dff2;
    letter-spacing: 0;
}

.party-summary {
    display: grid;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.party-summary strong,
.party-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-summary span {
    color: var(--muted);
    font-size: 0.76rem;
}

.party-link {
    height: 34px;
    border-color: rgba(255, 247, 219, 0.1);
    background: rgba(5, 7, 14, 0.66);
    color: var(--muted);
    font-size: 0.76rem;
}

.party-link-hidden {
    display: grid;
    place-items: center start;
    padding: 0 10px;
    color: rgba(233, 247, 255, 0.78);
}

.party-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78px, 1fr);
    align-items: center;
    align-content: center;
    height: 100%;
    gap: 3px;
    justify-content: stretch;
}

.party-card .compact-button {
    min-height: 0;
    height: 100%;
    padding: 5px;
    font-size: 0.72rem;
    line-height: 1;
}

.party-icon-button {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 78px;
    min-height: 21px;
}

.party-text-button,
.party-details > summary {
    display: inline-grid;
    place-content: center;
    align-items: center;
    justify-content: center;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 8px;
}

.party-text-button span,
.party-details > summary span {
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.party-card > .party-actions .party-icon-button,
.party-card > .party-actions .party-details > summary {
    min-height: var(--nav-party-main-height);
    height: var(--nav-party-main-height);
}

.party-card > .party-actions .party-svg-icon {
    width: 28px;
    height: 28px;
    stroke-width: 2.25;
}

.party-details > summary .party-svg-icon {
    width: 30px;
    height: 30px;
}

.party-code-shell .party-icon-button {
    width: 24px;
    min-width: 24px;
    min-height: 22px;
    height: 22px;
    padding: 2px;
    z-index: 2;
}

.party-code-shell .party-svg-icon {
    width: 15px;
    height: 15px;
}

.party-svg-icon {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.party-svg-refresh {
    color: var(--sun);
    filter: drop-shadow(0 0 5px rgba(255, 230, 109, 0.34));
}

.party-svg-eye {
    color: var(--sky);
    filter: drop-shadow(0 0 5px rgba(76, 201, 255, 0.3));
}

.party-svg-details {
    color: var(--mint);
    filter: drop-shadow(0 0 5px rgba(40, 247, 200, 0.3));
}

.party-svg-leave {
    color: var(--coral);
    filter: drop-shadow(0 0 5px rgba(255, 77, 125, 0.3));
}

.party-help-active {
    margin-bottom: 2px;
}

.party-details {
    position: relative;
}

.party-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: none;
    background: rgba(1, 3, 8, 0.62);
    backdrop-filter: blur(7px) saturate(1.08);
}

.party-details[open] .party-modal-backdrop {
    display: block;
    animation: partyBackdropIn 140ms ease-out;
}

.party-details > summary {
    height: 100%;
    min-height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(196, 92, 255, 0.28);
    border-radius: 7px;
    width: 100%;
    min-width: 28px;
    padding: 3px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
        linear-gradient(135deg, rgba(45, 31, 65, 0.9), rgba(18, 22, 34, 0.92));
    color: #eee2ff;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    list-style: none;
}

.party-status-line {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 17px;
    height: 17px;
    padding: 0 3px;
    color: rgba(255, 247, 219, 0.68);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.party-status-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.party-status-line span:first-child {
    color: rgba(255, 247, 219, 0.88);
}

.party-status-line span:last-child {
    color: var(--mint);
    justify-self: end;
    text-align: right;
}

.party-details > summary::-webkit-details-marker {
    display: none;
}

.party-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 80;
    display: grid;
    width: min(560px, calc(100vw - 28px));
    max-height: min(680px, calc(100dvh - 32px));
    gap: 12px;
    border: 1px solid rgba(76, 201, 255, 0.28);
    border-radius: 8px;
    padding: 13px;
    background:
        radial-gradient(
            circle at 16% 0,
            rgba(40, 247, 200, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 20%,
            rgba(196, 92, 255, 0.13),
            transparent 30%
        ),
        linear-gradient(180deg, rgba(255, 247, 219, 0.07), transparent 42%),
        rgba(7, 10, 18, 0.975);
    backdrop-filter: blur(18px) saturate(1.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.44),
        0 22px 54px rgba(0, 0, 0, 0.52),
        0 0 32px rgba(76, 201, 255, 0.14);
    overflow: auto;
    transform: translate(-50%, -50%);
    animation: partyPopoverIn 140ms ease-out;
}

.party-popover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--mint),
        var(--blue),
        var(--coral),
        var(--berry)
    );
    opacity: 0.16;
    clip-path: inset(0 0 calc(100% - 2px) 0 round 8px 8px 0 0);
}

@keyframes partyPopoverIn {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 6px)) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes partyBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.party-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 247, 219, 0.15);
    border-radius: 999px;
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 247, 219, 0.9);
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 0;
}

.party-modal-close:hover {
    border-color: rgba(255, 77, 125, 0.42);
    background: rgba(255, 77, 125, 0.13);
    color: #fff7db;
}

.party-popover-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding-right: 44px;
}

.party-popover-header div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.party-popover-header strong {
    color: var(--text);
    font-size: 1rem;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
}

.party-popover-header span,
.party-popover-header small {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 247, 219, 0.7);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.party-popover-header small {
    color: var(--mint);
    text-align: right;
}

.party-popover .party-help {
    border: 1px solid rgba(40, 247, 200, 0.24);
    border-radius: 8px;
    padding: 9px 10px;
    background:
        linear-gradient(135deg, rgba(40, 247, 200, 0.13), transparent 58%),
        rgba(255, 255, 255, 0.05);
    color: #e8fff9;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.28;
    text-align: left;
    text-shadow: 0 0 12px rgba(40, 247, 200, 0.18);
    text-transform: none;
}

.party-link-wrap {
    position: relative;
    display: grid;
}

.party-popover .party-link {
    width: 100%;
    height: 42px;
    border: 1px solid rgba(76, 201, 255, 0.5);
    border-radius: 8px;
    padding: 0 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 62%),
        linear-gradient(
            135deg,
            rgba(76, 201, 255, 0.46),
            rgba(28, 101, 178, 0.86)
        );
    color: #f3fbff;
    font-size: 0.82rem;
    font-weight: 950;
    cursor: pointer;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 18px rgba(76, 201, 255, 0.16);
}

.party-popover .party-link:focus {
    border-color: rgba(40, 247, 200, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 2px rgba(40, 247, 200, 0.12),
        0 0 22px rgba(76, 201, 255, 0.2);
}

.party-link-toast {
    inset: 0;
    border: 1px solid rgba(40, 247, 200, 0.34);
    border-radius: 8px;
    background: rgba(4, 14, 16, 0.9);
    color: var(--mint);
    font-size: 0.82rem;
    font-weight: 1000;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(40, 247, 200, 0.5);
}

.party-notice {
    position: fixed;
    top: calc(14px + var(--nav-height) / 2);
    right: max(16px, calc((100vw - 1120px) / 2 + 14px));
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    width: min(390px, calc(100vw - 24px));
    margin-right: var(--nav-pad-x);
    border: 1px solid rgba(40, 247, 200, 0.38);
    border-radius: 8px;
    padding: 11px 10px 11px 13px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 52%),
        linear-gradient(
            180deg,
            rgba(40, 247, 200, 0.12),
            rgba(76, 201, 255, 0.06)
        ),
        rgba(7, 11, 18, 0.96);
    backdrop-filter: blur(14px) saturate(1.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 16px 38px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(40, 247, 200, 0.14);
    transform: translateY(-50%);
    animation: noticeIn 160ms ease-out;
}

@keyframes noticeIn {
    from {
        opacity: 0;
        transform: translateY(calc(-50% - 8px)) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.party-notice strong,
.party-notice span {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.party-notice strong {
    color: var(--mint);
    font-size: 0.88rem;
    line-height: 1.16;
}

.party-notice.is-warning {
    border-color: rgba(255, 230, 109, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 52%),
        linear-gradient(
            180deg,
            rgba(255, 230, 109, 0.13),
            rgba(255, 77, 125, 0.05)
        ),
        rgba(7, 11, 18, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 16px 38px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(255, 230, 109, 0.13);
}

.party-notice.is-warning strong {
    color: var(--sun);
}

.party-notice span {
    color: rgba(255, 247, 219, 0.84);
    font-size: 0.8rem;
    line-height: 1.28;
}

.party-notice button {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    align-self: center;
    border: 1px solid rgba(255, 247, 219, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 0;
}

.party-notice button:hover {
    border-color: rgba(255, 247, 219, 0.26);
    background: rgba(255, 255, 255, 0.1);
}

.party-roster {
    display: grid;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
    scrollbar-width: thin;
}

.party-player {
    min-height: 46px;
    border: 1px solid rgba(255, 247, 219, 0.075);
    border-radius: 8px;
    padding: 7px 8px 7px 7px;
    background:
        linear-gradient(90deg, rgba(255, 247, 219, 0.045), transparent 42%),
        rgba(10, 15, 24, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.party-player.is-you {
    border-color: rgba(40, 247, 200, 0.2);
    background:
        linear-gradient(90deg, rgba(40, 247, 200, 0.11), transparent 46%),
        rgba(9, 22, 25, 0.46);
}

.party-player.is-offline {
    opacity: 0.72;
}

.party-player-name,
.party-player-actions,
.player-name {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.party-player-actions {
    margin-left: auto;
}

.party-popover .seat-badge,
.party-popover .country-badge {
    min-height: 22px;
    border: 1px solid rgba(255, 247, 219, 0.09);
    padding: 4px 8px;
    background: rgba(5, 7, 14, 0.46);
    color: rgba(255, 247, 219, 0.72);
    font-size: 0.68rem;
    line-height: 1;
}

.party-popover .country-badge {
    color: var(--mint);
}

.party-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(40, 247, 200, 0.22);
    border-radius: 7px;
    color: #06130f;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 62%),
        linear-gradient(135deg, var(--mint), #4cc9ff);
    font-size: 0.82rem;
    font-weight: 1000;
    box-shadow: 0 0 16px rgba(40, 247, 200, 0.1);
}

.party-handle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 247, 219, 0.94);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.you-marker {
    display: inline-flex;
    align-items: center;
    color: var(--mint);
    font-size: 0.74rem;
    font-weight: 950;
    line-height: 1;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: calc(var(--nav-sign-drop) + var(--nav-sign-rope) + 46px);
}

.game-grid.is-hidden,
.arena {
    display: none;
}

.game-card-button {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: stretch;
    width: 100%;
    min-height: 286px;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 12px;
    color: var(--text);
    text-align: center;
    background:
        linear-gradient(
            135deg,
            rgba(76, 201, 255, 0.16),
            rgba(255, 77, 125, 0.13)
        ),
        linear-gradient(
                135deg,
                color-mix(
                    in srgb,
                    var(--cab-a, #4cc9ff) 18%,
                    rgba(16, 20, 29, 0.9)
                ),
                rgba(16, 20, 29, 0.9)
            )
            padding-box,
        linear-gradient(
                135deg,
                rgba(76, 201, 255, 0.95) 0%,
                rgba(76, 201, 255, 0.78) 30%,
                rgba(255, 77, 125, 0.78) 70%,
                rgba(255, 77, 125, 0.95) 100%
            )
            border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease;
    overflow: hidden;
}

.game-card-button::before {
    display: none;
}

.game-card-button::after {
    display: none;
}

.game-card-button:hover:not(:disabled) {
    border-color: color-mix(
        in srgb,
        var(--cab-a, #4cc9ff) 48%,
        rgba(255, 247, 219, 0.16)
    );
    background:
        linear-gradient(
                135deg,
                color-mix(in srgb, var(--cab-a, #4cc9ff) 26%, #10141d),
                color-mix(in srgb, var(--coral) 10%, #151c28)
            )
            padding-box,
        linear-gradient(
                135deg,
                rgba(76, 201, 255, 0.95) 0%,
                rgba(76, 201, 255, 0.78) 30%,
                rgba(255, 77, 125, 0.78) 70%,
                rgba(255, 77, 125, 0.95) 100%
            )
            border-box;
    transform: translateY(-1px);
}

.game-card-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0;
    min-width: 0;
}

.game-card-preview {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 100%;
    max-width: 180px;
    height: 150px;
    border-radius: 8px;
    border: 1px solid rgba(255, 247, 219, 0.12);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 18px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.game-preview-chess {
    background-image: url("/assets/game-card-previews/chess.png");
}

.game-preview-checkers {
    background-image: url("/assets/game-card-previews/checkers.png");
}

.game-preview-connect4 {
    background-image: url("/assets/game-card-previews/connect4.png");
}

.game-preview-tictactoe {
    background-image: url("/assets/game-card-previews/tictactoe.png");
}

.game-preview-pool {
    background-image: url("/assets/game-card-previews/pool.png");
}

.game-preview-reaction {
    background-image: url("/assets/game-card-previews/reaction.png");
}

.game-preview-falconlander {
    background-image: url("/assets/game-card-previews/falconlander.png");
}

.game-preview-flappy {
    background-image: url("/assets/game-card-previews/flappy.png");
}

.game-preview-pinball {
    background-image: url("/assets/game-card-previews/pinball.png");
}

.game-preview-typeracer {
    background-image: url("/assets/game-card-previews/typeracer.png");
}

.game-preview-memory {
    background-image: url("/assets/game-card-previews/memory.png");
}

.game-preview-colormatch {
    background-image: url("/assets/game-card-previews/colormatch.png");
}

.game-preview-frequencymatch {
    background-image: url("/assets/game-card-previews/frequencymatch.png");
}

.game-preview-battleship {
    background-image: url("/assets/game-card-previews/battleship.png");
}

.game-preview-blackjack {
    background-image: url("/assets/game-card-previews/blackjack.png");
}

.game-preview-poker {
    background-image: url("/assets/game-card-previews/poker.png");
}

.game-preview-airhockey {
    background-image: url("/assets/game-card-previews/airhockey.png");
}

.game-card-title,
.game-card-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card-title {
    width: 100%;
    color: var(--mint);
    font-size: 1rem;
    font-weight: 950;
    text-shadow: 0 0 14px rgba(40, 247, 200, 0.18);
}

.game-card-meta {
    align-self: center;
    color: rgba(196, 209, 224, 0.88);
    font-size: 0.78rem;
    font-weight: 850;
}

.game-card-cta {
    position: relative;
    z-index: 1;
    justify-self: stretch;
    border-radius: 999px;
    padding: 8px 10px;
    border: 1px solid rgba(40, 247, 200, 0.28);
    color: #06130f;
    background: linear-gradient(135deg, var(--mint), #8affde);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 12px rgba(40, 247, 200, 0.12);
}

.game-card-cta.cta-play {
    background: linear-gradient(135deg, var(--mint), #4cc9ff);
}

.game-card-cta.cta-leave {
    color: #fff7db;
    border-color: rgba(255, 77, 125, 0.42);
    background: linear-gradient(135deg, #ff5c70, var(--danger));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 12px rgba(240, 68, 85, 0.14);
}

.game-card-cta.cta-bot {
    color: #06131d;
    border-color: rgba(76, 201, 255, 0.42);
    background: linear-gradient(135deg, #4cc9ff, #9be7ff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 12px rgba(76, 201, 255, 0.14);
}

.game-card-cta.cta-locked {
    color: rgba(255, 247, 219, 0.58);
    border-color: rgba(255, 247, 219, 0.12);
    background: rgba(23, 29, 40, 0.86);
    box-shadow: none;
}

.arena.active {
    --game-width: 560px;
    --game-aspect: 1 / 1;
    --stage-width: 582px;
    --arena-height: 100dvh;
    --arena-safe-height: calc(var(--arena-height) - 32px);
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 16px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(76, 201, 255, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 58% 82%,
            rgba(255, 77, 125, 0.06),
            transparent 34%
        ),
        rgba(2, 4, 9, 0.58);
    backdrop-filter: blur(5px);
    overflow: auto;
    overscroll-behavior: contain;
}

@supports (height: 100dvh) {
    .arena.active {
        --arena-height: 100dvh;
    }
}

@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
    }

    body {
        min-height: -webkit-fill-available;
    }

    .arena.active {
        min-height: -webkit-fill-available;
    }
}

.arena.game-falconlander,
.arena.game-flappy,
.arena.game-blackjack,
.arena.game-poker {
    --game-width: 720px;
    --game-aspect: 16 / 9;
    --stage-width: 742px;
}

.arena.game-pool {
    --game-width: min(430px, calc((var(--arena-height) - 138px) * 9 / 16));
    --game-aspect: 9 / 16;
    --stage-width: calc(var(--game-width) + 22px);
}

.arena.game-battleship,
.arena.game-pinball {
    --game-width: min(430px, calc((var(--arena-height) - 138px) * 9 / 16));
    --game-aspect: 9 / 16;
    --stage-width: calc(var(--game-width) + 22px);
}

.arena.game-falconlander {
    --game-width: 660px;
    --game-aspect: 4 / 5;
    --stage-width: 682px;
}

.board-stage {
    position: relative;
    width: min(100%, var(--stage-width));
    max-height: var(--arena-safe-height);
    overflow: auto;
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 54%, rgba(255, 247, 219, 0.1));
    border-radius: var(--game-radius);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 11%, transparent),
            transparent 32%
        ),
        linear-gradient(
            315deg,
            color-mix(in srgb, var(--cab-b, #ff4d7d) 11%, transparent),
            transparent 34%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 24%),
        var(--game-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -30px 84px rgba(0, 0, 0, 0.24),
        0 0 0 1px color-mix(in srgb, var(--cab-b, #ff4d7d) 14%, transparent),
        0 24px 72px rgba(0, 0, 0, 0.56),
        0 0 42px var(--game-glow);
    transition:
        filter 120ms ease,
        transform 120ms ease,
        opacity 120ms ease;
}

.board-stage {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
}

.board-stage.live-turn {
    border-color: rgba(40, 247, 200, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(40, 247, 200, 0.1),
        0 0 28px rgba(40, 247, 200, 0.13),
        0 24px 64px rgba(0, 0, 0, 0.52);
}

.arena.has-confirm .board-stage,
.arena.has-result-modal .board-stage {
    filter: blur(5px);
    opacity: 0.76;
    pointer-events: none;
}

.board-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 60px;
    border: 1px solid rgba(255, 247, 219, 0.095);
    border-radius: calc(var(--game-radius) - 4px);
    padding: 10px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 12%, transparent),
            transparent 46%
        ),
        linear-gradient(
            270deg,
            color-mix(in srgb, var(--cab-b, #ff4d7d) 10%, transparent),
            transparent 42%
        ),
        rgba(5, 8, 14, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 24px rgba(0, 0, 0, 0.18);
}

.board-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.board-close-button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 247, 219, 0.18);
    border-radius: 8px;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 58%),
        rgba(15, 20, 30, 0.92);
    color: rgba(255, 247, 219, 0.92);
    font-family: Arial, sans-serif;
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.board-close-button:hover {
    border-color: rgba(76, 201, 255, 0.38);
    background: rgba(76, 201, 255, 0.14);
    color: #fff7db;
}

.board-name {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-left: 2px;
}

.board-name strong {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: var(--mint);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 1000;
    text-shadow: 0 0 18px rgba(40, 247, 200, 0.24);
}

.bot-warmup-tag {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 77, 125, 0.72);
    border-radius: 4px;
    padding: 2px 5px 1px;
    color: #fff7db;
    background: rgba(240, 68, 85, 0.92);
    font-size: 0.62em;
    font-weight: 1000;
    line-height: 1.05;
    text-shadow: none;
    transform: translateY(-0.08em);
    box-shadow: 0 0 16px rgba(240, 68, 85, 0.28);
}

.board-name small {
    color: rgba(196, 209, 224, 0.9);
    font-size: 0.78rem;
    font-weight: 850;
}

.board-name strong,
.board-name small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-wrap {
    position: relative;
    width: min(100%, var(--game-width));
    margin: 0 auto;
    border-radius: calc(var(--game-radius) - 2px);
}

.webgl-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--game-aspect);
    min-height: 0;
    overflow: hidden;
    border-radius: calc(var(--game-radius) - 3px);
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #4cc9ff) 34%, rgba(255, 247, 219, 0.08));
    background: #07080d;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -22px 48px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(5, 7, 13, 0.72),
        0 12px 28px rgba(0, 0, 0, 0.28);
    touch-action: none;
    contain: strict;
}

.webgl-canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
}

.webgl-canvas.cursor-default {
    cursor: default;
}

.webgl-canvas.cursor-pointer {
    cursor: pointer;
}

.webgl-canvas.cursor-grab {
    cursor: grab;
}

.webgl-canvas.cursor-grabbing {
    cursor: grabbing;
}

.webgl-label-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.control-mount {
    width: min(100%, var(--game-width));
    margin: 0 auto;
}

.empty-arena {
    border: 1px solid var(--game-line);
    border-radius: var(--game-radius);
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        var(--game-panel-2);
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.turn-badge,
.seat-badge,
.country-badge {
    min-height: 24px;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 900;
}

.seat-badge,
.country-badge {
    background: #202838;
}

.match-result-dialog {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: grid;
    place-items: center;
    padding: 16px;
    background:
        radial-gradient(
            circle at 50% 36%,
            color-mix(in srgb, var(--cab-a, #28f7c8) 18%, transparent),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 76%,
            color-mix(in srgb, var(--cab-b, #ff4d7d) 10%, transparent),
            transparent 34%
        ),
        rgba(2, 4, 9, 0.46);
    backdrop-filter: blur(7px) saturate(1.12);
}

.match-result-overlay {
    display: grid;
    place-items: center;
    width: min(560px, 100%);
}

.match-offer-dialog {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 16px;
    background:
        radial-gradient(
            circle at 50% 38%,
            color-mix(in srgb, var(--cab-a, #28f7c8) 12%, transparent),
            transparent 30%
        ),
        rgba(2, 4, 9, 0.64);
    backdrop-filter: blur(4px);
}

.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 76;
    display: grid;
    place-items: center;
    padding: 16px;
    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(255, 77, 125, 0.07),
            transparent 34%
        ),
        rgba(2, 4, 9, 0.34);
    backdrop-filter: blur(4px);
}

.confirm-dialog.pause-overlay {
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(1.5px);
}

.match-offer-card,
.confirm-card {
    display: grid;
    gap: 12px;
    width: min(440px, 100%);
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 48%, rgba(255, 247, 219, 0.18));
    border-radius: var(--game-radius);
    padding: 18px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 12%, transparent),
            transparent 42%
        ),
        linear-gradient(
            315deg,
            color-mix(in srgb, var(--cab-b, #ff4d7d) 10%, transparent),
            transparent 40%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
        rgba(17, 23, 34, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        inset 0 -24px 64px rgba(0, 0, 0, 0.2),
        0 22px 58px rgba(0, 0, 0, 0.42),
        0 0 36px color-mix(in srgb, var(--cab-a, #28f7c8) 16%, transparent);
}

.pause-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(390px, 100%);
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 34%, rgba(255, 255, 255, 0.16));
    border-radius: var(--game-radius);
    padding: 20px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 11%, transparent),
            transparent 38%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
        rgba(9, 13, 22, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 22px 56px rgba(0, 0, 0, 0.34);
}

.match-offer-card h2,
.match-offer-card p,
.confirm-card h2,
.confirm-card p,
.pause-card h2,
.pause-card p {
    margin: 0;
}

.match-offer-card h2,
.confirm-card h2,
.pause-card h2,
.match-result-card h2 {
    color: #fff7db;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.match-offer-card p,
.confirm-card p,
.match-result-card p {
    color: rgba(224, 233, 244, 0.88);
    font-weight: 650;
    line-height: 1.42;
}

.pause-card p {
    color: var(--muted);
    font-weight: 650;
}

.pause-countdown {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 148px;
    padding: 10px 14px;
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 26%, rgba(255, 255, 255, 0.1));
    border-radius: var(--game-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%),
        rgba(0, 0, 0, 0.28);
}

.pause-countdown strong {
    color: var(--cab-a, #28f7c8);
    font-size: 34px;
    line-height: 1;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
}

.pause-countdown span {
    color: rgba(255, 247, 219, 0.72);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.match-offer-state {
    color: var(--cab-a, #28f7c8);
    font-weight: 850;
    min-height: 32px;
    display: grid;
    align-items: center;
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 30%, rgba(255, 247, 219, 0.08));
    border-radius: var(--game-radius);
    padding: 7px 9px;
    background: color-mix(
        in srgb,
        var(--cab-a, #28f7c8) 9%,
        rgba(4, 8, 14, 0.72)
    );
}

.match-result-card {
    display: grid;
    gap: 16px;
    width: min(580px, 100%);
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 48%, rgba(255, 247, 219, 0.18));
    border-radius: var(--game-radius);
    padding: 20px 22px;
    background:
        radial-gradient(
            circle at 14% 12%,
            color-mix(in srgb, var(--cab-a, #28f7c8) 18%, transparent),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            color-mix(in srgb, var(--cab-b, #ff4d7d) 14%, transparent),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 14%, transparent),
            transparent 44%
        ),
        linear-gradient(
            315deg,
            color-mix(in srgb, var(--cab-b, #ff4d7d) 9%, transparent),
            transparent 40%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 32%),
        rgba(17, 23, 34, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.095),
        inset 0 -38px 90px rgba(0, 0, 0, 0.24),
        0 26px 70px rgba(0, 0, 0, 0.5),
        0 0 46px color-mix(in srgb, var(--cab-a, #28f7c8) 18%, transparent);
}

.result-win .match-result-card {
    border-color: rgba(40, 247, 200, 0.54);
}

.result-lose .match-result-card {
    border-color: rgba(255, 77, 125, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.095),
        inset 0 -38px 90px rgba(0, 0, 0, 0.24),
        0 26px 70px rgba(0, 0, 0, 0.5),
        0 0 46px rgba(255, 77, 125, 0.16);
}

.result-draw .match-result-card {
    border-color: rgba(255, 230, 109, 0.42);
}

.result-kicker {
    width: max-content;
    min-height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 28%, rgba(255, 247, 219, 0.1));
    border-radius: 999px;
    padding: 4px 9px;
    background: color-mix(
        in srgb,
        var(--cab-a, #28f7c8) 10%,
        rgba(8, 11, 18, 0.64)
    );
    color: color-mix(in srgb, var(--cab-a, #28f7c8) 76%, #fff7db);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}

.result-hero {
    display: grid;
    gap: 8px;
    padding: 2px 2px 0;
}

.result-hero h2,
.result-hero p {
    margin: 0;
}

.result-hero h2 {
    color: #fff7db;
    font-size: clamp(2rem, 6.5vw, 3.1rem);
    line-height: 0.96;
    font-weight: 1000;
    text-shadow:
        0 0 24px color-mix(in srgb, var(--cab-a, #28f7c8) 22%, transparent),
        0 3px 0 rgba(0, 0, 0, 0.18);
}

.result-hero p {
    max-width: 44ch;
    color: rgba(224, 233, 244, 0.9);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.36;
}

.result-scoreboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.result-summary-grid {
    display: grid;
    gap: 10px;
}

.result-scoreboard.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.result-scoreboard.is-many {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 8px;
}

.result-score {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255, 247, 219, 0.11);
    border-radius: 8px;
    padding: 10px 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 46%),
        rgba(7, 11, 18, 0.66);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 12px 28px rgba(0, 0, 0, 0.2);
}

.result-score.is-winner {
    border-color: color-mix(
        in srgb,
        var(--cab-a, #28f7c8) 48%,
        rgba(255, 247, 219, 0.12)
    );
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 18%, transparent),
            transparent 52%
        ),
        rgba(7, 13, 18, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        0 0 24px color-mix(in srgb, var(--cab-a, #28f7c8) 12%, transparent);
}

.result-score.is-you:not(.is-winner) {
    border-color: rgba(255, 247, 219, 0.2);
}

.result-score span,
.result-score strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-score span {
    color: rgba(255, 247, 219, 0.72);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.result-score strong {
    margin-top: 3px;
    color: #fff7db;
    font-size: clamp(1.5rem, 5vw, 2.15rem);
    font-weight: 1000;
    line-height: 0.95;
}

.result-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.result-stats.is-memory {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.result-stat {
    min-width: 0;
    border: 1px solid rgba(255, 247, 219, 0.09);
    border-radius: 8px;
    padding: 8px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 60%),
        rgba(5, 8, 14, 0.52);
}

.result-stat span,
.result-stat strong {
    display: block;
}

.result-stat span {
    color: rgba(196, 209, 224, 0.72);
    font-size: 0.67rem;
    font-weight: 950;
    line-height: 1.15;
    text-transform: uppercase;
}

.result-stat strong {
    margin-top: 3px;
    color: rgba(255, 247, 219, 0.95);
    font-size: 0.92rem;
    font-weight: 950;
}

.result-actions.single-action {
    justify-content: end;
}

.result-breakdown {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 247, 219, 0.08);
    border-radius: 8px;
    padding: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 48%),
        rgba(5, 8, 14, 0.42);
}

.result-breakdown h3 {
    margin: 0;
    color: rgba(255, 247, 219, 0.82);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}

.result-breakdown-list {
    display: grid;
    gap: 5px;
    max-height: 150px;
    overflow: auto;
    padding-right: 2px;
}

.result-breakdown-row {
    display: grid;
    grid-template-columns: minmax(72px, 0.65fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    min-width: 0;
    border-top: 1px solid rgba(255, 247, 219, 0.055);
    padding-top: 5px;
}

.result-breakdown-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.result-breakdown-row span {
    color: rgba(196, 209, 224, 0.74);
    font-size: 0.72rem;
    font-weight: 900;
}

.result-breakdown-row strong {
    min-width: 0;
    color: rgba(255, 247, 219, 0.95);
    font-size: 0.82rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
}

.result-actions > button {
    min-width: 124px;
}

.arcade-controls,
.pool-controls,
.score-strip,
.holdem-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.arcade-controls,
.score-strip {
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #28f7c8) 22%, rgba(255, 247, 219, 0.08));
    border-radius: var(--game-radius);
    padding: 9px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--cab-a, #28f7c8) 7%, transparent),
            transparent 44%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        rgba(8, 11, 18, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 8px 20px rgba(0, 0, 0, 0.14);
}

.arcade-controls {
    justify-content: center;
}

.pool-controls {
    justify-content: space-between;
}

.slider-control {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: min(260px, 100%);
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #4cc9ff) 22%, rgba(255, 247, 219, 0.08));
    border-radius: var(--game-radius);
    padding: 7px 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%),
        rgba(17, 23, 34, 0.86);
    color: var(--muted);
    font-weight: 850;
}

.slider-control span {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    white-space: nowrap;
}

.slider-control strong {
    color: var(--mint);
}

.lander-controls {
    justify-content: center;
}

.lander-touch-controls {
    display: none;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    touch-action: none;
}

.lander-touch {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(76, 201, 255, 0.28);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 62%),
        rgba(15, 23, 36, 0.9);
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    user-select: none;
    -webkit-user-select: none;
}

.lander-touch.flame {
    border-color: rgba(255, 159, 28, 0.44);
    background:
        linear-gradient(180deg, rgba(255, 230, 109, 0.18), transparent 58%),
        rgba(54, 25, 18, 0.92);
    color: var(--sun);
}

.lander-touch:active {
    transform: translateY(1px) scale(0.98);
    filter: brightness(1.16);
}

@media (pointer: coarse), (max-width: 720px) {
    .arena.game-falconlander .control-mount {
        position: fixed;
        left: 0;
        right: 0;
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 42;
        pointer-events: none;
    }

    .arena.game-falconlander .lander-controls {
        width: min(420px, calc(100vw - 24px));
        margin: 0 auto;
        border-color: rgba(255, 247, 219, 0.13);
        background: rgba(6, 10, 17, 0.7);
        backdrop-filter: blur(12px);
        pointer-events: auto;
    }

    .arena.game-falconlander .lander-touch-controls {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}

input[type="range"] {
    accent-color: var(--mint);
}

input[type="range"] {
    min-height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
}

input[type="range"]::-webkit-slider-thumb {
    filter: drop-shadow(0 0 6px rgba(40, 247, 200, 0.22));
}

.reaction-shell,
.typeracer-shell,
.color-shell,
.frequency-shell,
.arcade-shell {
    display: grid;
    gap: 12px;
    width: min(100%, 620px);
    margin: 0 auto;
}

.reaction-stage,
.color-stage,
.frequency-stage {
    display: grid;
    min-height: 280px;
    place-items: center;
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #4cc9ff) 26%, rgba(255, 247, 219, 0.1));
    border-radius: var(--game-radius);
    background:
        linear-gradient(135deg, rgba(255, 247, 219, 0.045), transparent 28%),
        radial-gradient(
            circle at 50% 34%,
            rgba(76, 201, 255, 0.12),
            transparent 32%
        ),
        linear-gradient(180deg, #101827, #0d121b);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 -30px 80px rgba(2, 5, 13, 0.34),
        0 12px 28px rgba(0, 0, 0, 0.2);
    animation: game-stage-in 260ms ease-out both;
}

.reaction-tap-stage {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 430px;
    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(255, 255, 255, 0.1),
            transparent 34%
        ),
        linear-gradient(180deg, #741424, #2a0710);
    box-shadow:
        inset 0 0 0 1px rgba(255, 77, 125, 0.18),
        inset 0 -42px 96px rgba(20, 0, 8, 0.42);
    animation: none;
}

.reaction-tap-stage.is-intro {
    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(255, 230, 109, 0.16),
            transparent 34%
        ),
        linear-gradient(180deg, #4a345e, #17101f);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 109, 0.18),
        inset 0 -42px 96px rgba(20, 10, 28, 0.42);
}

.reaction-tap-stage.is-green {
    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(255, 255, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(180deg, #12a36f, #06311f);
    box-shadow:
        inset 0 0 0 1px rgba(40, 247, 200, 0.28),
        inset 0 -42px 96px rgba(0, 20, 12, 0.35),
        0 0 46px rgba(40, 247, 200, 0.2);
}

.reaction-tap-stage.is-disabled {
    cursor: default;
    opacity: 0.78;
}

.reaction-tap-stage .reaction-readout {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 16px;
    text-align: center;
}

.reaction-tap-stage .reaction-readout strong {
    display: block;
    color: #fff7db;
    font-size: 5rem;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.3);
}

.reaction-tap-stage .reaction-readout small {
    display: block;
    margin-top: 16px;
    color: rgba(255, 247, 219, 0.82);
    font-size: 1rem;
}

.reaction-tap-stage .reaction-readout small:empty {
    display: none;
}

.reaction-history-grid {
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    pointer-events: none;
}

.reaction-history {
    display: grid;
    min-width: 0;
    text-align: left;
}

.reaction-history.is-mine {
    order: -1;
}

.reaction-history.is-rival {
    text-align: right;
}

.reaction-history > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 247, 219, 0.86);
}

.reaction-history.is-rival > div:first-child {
    flex-direction: row-reverse;
}

.reaction-history strong {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reaction-history small {
    color: rgba(255, 247, 219, 0.62);
    font-size: 0.74rem;
}

.reaction-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    gap: 5px;
}

.reaction-history-list span {
    display: block;
    min-height: 23px;
    padding: 4px 5px;
    border: 1px solid rgba(255, 247, 219, 0.1);
    border-radius: 6px;
    background: rgba(2, 5, 13, 0.24);
    color: rgba(255, 247, 219, 0.36);
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
}

.reaction-history-list span.is-set {
    border-color: rgba(255, 247, 219, 0.18);
    background: rgba(2, 5, 13, 0.38);
    color: rgba(255, 247, 219, 0.9);
}

.reaction-readout,
.type-phrase,
.progress-lane,
.color-match-value,
.target-chip,
.guess-chip {
    border: 1px solid
        color-mix(in srgb, var(--cab-a, #4cc9ff) 20%, rgba(255, 247, 219, 0.1));
    border-radius: var(--game-radius);
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
        #111722;
}

.type-lanes {
    display: grid;
    gap: 8px;
}

.typeracer-shell {
    grid-template-rows: auto auto auto minmax(96px, auto) auto;
}

.type-clock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 247, 219, 0.1);
    border-radius: var(--game-radius);
    background: rgba(8, 12, 20, 0.46);
    color: rgba(255, 247, 219, 0.68);
    font-size: 0.82rem;
}

.type-clock strong {
    color: rgba(255, 247, 219, 0.9);
    font-size: 1rem;
}

.type-phrase {
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    line-height: 1.55;
    box-shadow: inset 0 0 0 1px rgba(76, 201, 255, 0.05);
}

.type-phrase span {
    color: var(--mint);
}

.type-phrase .type-hidden-tail {
    color: rgba(255, 247, 219, 0.38);
}

.type-input {
    min-height: 96px;
    resize: vertical;
}

.progress-track,
.color-match-meter {
    position: relative;
    display: block;
    width: 100%;
    height: 14px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    appearance: none;
    background: #202838;
}

.progress-track::-webkit-progress-bar,
.color-match-meter::-webkit-progress-bar {
    border-radius: 999px;
    background: #202838;
}

.progress-track::-webkit-progress-value,
.color-match-meter::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mint), var(--sun));
    transition: width 160ms ease-out;
}

.progress-track::-moz-progress-bar,
.color-match-meter::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mint), var(--sun));
}

.frequency-viz {
    width: min(360px, 78vw);
    height: 96px;
    overflow: visible;
}

.frequency-viz-backdrop {
    fill: #0d121b;
    stroke: rgba(255, 247, 219, 0.1);
}

.frequency-wave-path {
    fill: none;
    stroke: rgba(76, 201, 255, 0.58);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    filter: drop-shadow(0 0 6px rgba(76, 201, 255, 0.24));
}

.frequency-marker {
    stroke: var(--sun);
    stroke-linecap: round;
    stroke-width: 1.25;
}

.guess-marker {
    stroke: var(--coral);
}

.frequency-viz {
    border-radius: 8px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(76, 201, 255, 0.2) 0 2px,
            transparent 2px 42px
        ),
        linear-gradient(
            180deg,
            rgba(76, 201, 255, 0.1),
            rgba(196, 92, 255, 0.06)
        ),
        #0d121b;
    box-shadow: inset 0 0 34px rgba(76, 201, 255, 0.1);
}

.frequency-stage {
    position: relative;
    overflow: hidden;
}

.frequency-stage::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(76, 201, 255, 0.12);
    border-radius: 8px;
    pointer-events: none;
}

.color-chip {
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 247, 219, 0.18);
    border-radius: 8px;
    background: #0d121b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -10px 18px rgba(0, 0, 0, 0.12),
        0 10px 22px rgba(0, 0, 0, 0.24);
    transition:
        transform 140ms ease-out,
        background 120ms linear;
}

.color-chip:hover {
    transform: translateY(-2px);
}

.color-stage {
    grid-template-columns: auto auto minmax(110px, 180px) auto;
    gap: 18px;
    align-items: center;
}

.color-match-meter {
    width: 100%;
}

@keyframes game-stage-in {
    from {
        opacity: 0.72;
        transform: translateY(7px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.color-input {
    width: 70px;
    height: 44px;
    padding: 4px;
}

.wide {
    width: 100%;
}

.flag-badge {
    font-size: 1rem;
}

@media (max-width: 1100px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (max-width: 645px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding-right: var(--nav-pad-x);
    }

    .arena.active {
        grid-template-columns: 1fr;
    }

    .party-panel {
        grid-column: auto;
        justify-self: end;
        width: 100%;
    }

    .party-card {
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .party-code-shell {
        width: max-content;
    }

    .party-code-button {
        width: 154px;
    }

    .party-popover {
        width: min(560px, calc(100vw - 16px));
    }

    .party-create-button {
        width: 100%;
    }

    .topbar-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand {
        grid-template-columns: var(--nav-logo-size);
        gap: 0;
    }

    .brand-copy {
        display: none;
    }

    .topbar:has(.party-panel:not(.has-party)) .brand {
        grid-template-columns: var(--nav-logo-size) minmax(0, 1fr);
        gap: 10px;
    }

    .topbar:has(.party-panel:not(.has-party)) .brand-copy {
        display: block;
    }
}

@media (max-width: 560px) {
    .app-shell {
        padding: 8px;
    }

    .game-card-button {
        min-height: 264px;
    }

    .game-card-preview {
        max-width: 154px;
        height: 128px;
    }

    .board-title {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px 10px;
    }

    .board-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .match-status {
        justify-self: stretch;
        min-width: 0;
    }

    .match-offer-card,
    .confirm-card,
    .pause-card,
    .match-result-card {
        width: min(100%, calc(100vw - 24px));
        padding: 14px;
    }

    .result-actions,
    .arcade-controls,
    .pool-controls,
    .score-strip {
        display: grid;
        grid-template-columns: 1fr;
    }

    .result-scoreboard,
    .result-stats {
        grid-template-columns: 1fr 1fr;
    }

    .result-hero h2 {
        font-size: clamp(1.85rem, 12vw, 2.5rem);
    }

    .result-actions > button,
    .arcade-controls > button,
    .pool-controls > button {
        width: 100%;
    }

    .slider-control {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .reaction-stage,
    .color-stage,
    .frequency-stage {
        min-height: 240px;
    }

    .webgl-stage {
        aspect-ratio: var(--game-aspect);
    }

    .color-stage {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .color-match-value,
    .color-match-meter {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 380px) {
    .result-scoreboard,
    .result-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) and (pointer: coarse) {
    .arena.active {
        place-items: stretch;
        padding: 0;
    }

    .board-stage {
        width: 100%;
        min-height: var(--arena-height);
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px;
    }
}