:root{
    --bg-mid:   #0b151c;
    --bg-deep:  #060b10;
    --accent-c: #35e7ff;
    --accent-p: #7c3aed;
}

body{
    color: #e6edf3;
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 70%, #05080c 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::before{
    content:"";
    position: fixed;
    inset: -10vh -10vw;
    pointer-events: none;

    background:
        radial-gradient(900px 600px at 18% 22%,
        color-mix(in srgb, var(--accent-c) 18%, transparent),
        transparent 62%),
        radial-gradient(900px 600px at 82% 14%,
        color-mix(in srgb, var(--accent-p) 14%, transparent),
        transparent 64%),
        radial-gradient(1200px 260px at 50% -40px,
        rgba(255,255,255,0.10),
        rgba(255,255,255,0.00) 70%),
        radial-gradient(1400px 900px at 50% 30%,
        rgba(255,255,255,0.00) 40%,
        rgba(0,0,0,0.55) 100%);

    filter: blur(2px) saturate(115%);
    opacity: 1;
    transform: translate3d(0,0,0) scale(1.02);
    animation: aurora-drift 26s ease-in-out infinite alternate;
}

body::after{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

@keyframes aurora-drift{
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
    50%  { transform: translate3d( 1.0%, -2%, 0) scale(1.03); }
    100% { transform: translate3d( 2.0%,  1%, 0) scale(1.02); }
}

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .navbar {
        padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    }
}

@media all and (display-mode: standalone) {
    body { user-select: none; -webkit-user-select: none; }
    .game-card { -webkit-tap-highlight-color: transparent; }
}