/* ARENA global depth background - standalone effect layer */
:root {
    --arena-scroll-slow: 0px;
    --arena-scroll-mid: 0px;
    --arena-mouse-x: 0px;
    --arena-mouse-y: 0px;
}

html {
    background: #030711;
}

body {
    position: relative;
    overflow-x: hidden;
    isolation: isolate;
}

#arena-depth-bg,
#arena-depth-bg * {
    box-sizing: border-box;
}

#arena-depth-bg {
    position: fixed;
    inset: -24vh -18vw;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 12%, rgba(95, 214, 255, .36), transparent 22%),
        radial-gradient(circle at 88% 8%, rgba(159, 106, 255, .31), transparent 24%),
        radial-gradient(circle at 70% 88%, rgba(50, 199, 164, .22), transparent 26%),
        linear-gradient(180deg, #030711 0%, #08162a 48%, #030711 100%);
    transform: translate3d(0, var(--arena-scroll-slow), 0);
    will-change: transform;
}

#arena-depth-bg::before,
#arena-depth-bg::after {
    content: "";
    position: absolute;
    inset: -25%;
    will-change: transform;
}

#arena-depth-bg::before {
    opacity: .52;
    background-image:
        linear-gradient(rgba(105, 208, 255, .20) 2px, transparent 2px),
        linear-gradient(90deg, rgba(105, 208, 255, .16) 2px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,.35) 0 2px, transparent 3px);
    background-size: 150px 150px, 150px 150px, 115px 115px;
    transform:
        translate3d(calc(var(--arena-mouse-x) * -.25), calc(var(--arena-scroll-mid) - (var(--arena-mouse-y) * .2)), 0)
        rotate(-8deg)
        scale(1.10);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.82) 48%, transparent 100%);
}

#arena-depth-bg::after {
    opacity: .48;
    background:
        linear-gradient(118deg, transparent 0 34%, rgba(105,208,255,.18) 34.3% 35.2%, transparent 35.5% 100%),
        linear-gradient(118deg, transparent 0 57%, rgba(159,106,255,.18) 57.2% 58.4%, transparent 58.7% 100%),
        linear-gradient(118deg, transparent 0 72%, rgba(50,199,164,.12) 72.2% 73.1%, transparent 73.4% 100%);
    transform:
        translate3d(calc(var(--arena-mouse-x) * .18), calc(var(--arena-scroll-slow) - (var(--arena-mouse-y) * .12)), 0)
        scale(1.14);
}

.arena-depth-shape {
    position: absolute;
    display: block;
    border: 1px solid rgba(105, 208, 255, .25);
    background: linear-gradient(135deg, rgba(105,208,255,.13), rgba(159,106,255,.08));
    box-shadow:
        0 0 110px rgba(105,208,255,.14),
        inset 0 0 55px rgba(255,255,255,.035);
    transform: translate3d(0, var(--arena-scroll-mid), 0) rotate(var(--arena-r, 0deg));
    will-change: transform;
}

.arena-depth-shape.one {
    width: 520px;
    height: 520px;
    left: -150px;
    top: 140px;
    border-radius: 58px;
    --arena-r: 18deg;
    opacity: .55;
}

.arena-depth-shape.two {
    width: 680px;
    height: 220px;
    right: -260px;
    top: 360px;
    border-radius: 999px;
    --arena-r: -16deg;
    opacity: .48;
}

.arena-depth-shape.three {
    width: 390px;
    height: 390px;
    right: 10vw;
    bottom: -110px;
    border-radius: 50%;
    border-color: rgba(50,199,164,.25);
    --arena-r: 0deg;
    opacity: .42;
}

.arena-depth-ring {
    position: absolute;
    width: 760px;
    height: 760px;
    left: 50%;
    top: 24%;
    margin-left: -380px;
    border-radius: 50%;
    border: 2px solid rgba(105,208,255,.10);
    box-shadow:
        0 0 0 70px rgba(105,208,255,.018),
        0 0 0 150px rgba(159,106,255,.014),
        0 0 130px rgba(105,208,255,.13);
    transform:
        translate3d(calc(var(--arena-mouse-x) * .22), calc(var(--arena-scroll-mid) + (var(--arena-mouse-y) * .08)), 0)
        rotate(18deg);
    opacity: .62;
    will-change: transform;
}

.arena-depth-beam {
    position: absolute;
    left: -20vw;
    right: -20vw;
    height: 170px;
    top: 58%;
    background: linear-gradient(90deg, transparent, rgba(105,208,255,.075), rgba(159,106,255,.07), transparent);
    transform: translate3d(0, calc(var(--arena-scroll-slow) * .7), 0) rotate(-11deg);
    filter: blur(.2px);
    opacity: .9;
    will-change: transform;
}

/* Make existing page surfaces feel glassier over the moving depth layer without changing layout */
.site-header,
.hero-panel,
.hero-card,
.panel,
.stat-card,
.profile-hero,
.toolbar,
.table-wrap {
    backdrop-filter: blur(22px) saturate(1.08);
}

@media (max-width: 760px) {
    #arena-depth-bg { inset: -18vh -35vw; }
    .arena-depth-shape.one { width: 360px; height: 360px; left: -170px; }
    .arena-depth-shape.two { width: 460px; right: -250px; }
    .arena-depth-shape.three { width: 280px; height: 280px; }
    .arena-depth-ring { width: 520px; height: 520px; margin-left: -260px; }
}

@media (prefers-reduced-motion: reduce) {
    #arena-depth-bg,
    #arena-depth-bg::before,
    #arena-depth-bg::after,
    .arena-depth-shape,
    .arena-depth-ring,
    .arena-depth-beam {
        transform: none !important;
        transition: none !important;
    }
}