.modc-loader {
        --cyan: #f4b900;
        --cyan-soft: #ffd86a;
        --purple: #a5a7ab;
        --purple-soft: #d7d9dd;
        --gold: #f4b900;
        --blue-dark: #050505;
        --blue-mid: #0d0d0f;

        position: fixed;
        inset: 0;
        z-index: 99999;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
            radial-gradient(circle at 50% 45%, rgba(244, 185, 0, .12), transparent 34%),
            radial-gradient(circle at 50% 50%, rgba(194, 197, 202, .08), transparent 42%),
            rgba(5, 5, 5, .96);
        opacity: 1;
        visibility: visible;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    .modc-loader::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(148, 163, 184, .22) 1px, transparent 1px);
        background-size: 52px 52px;
        opacity: .32;
        animation: modcStars 8s linear infinite;
    }

    .modc-loader-scene {
        position: relative;
        width: 390px;
        height: 390px;
        display: grid;
        place-items: center;
        transform-style: preserve-3d;
    }

    .modc-bg-glow {
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 999px;
        background:
            radial-gradient(circle, rgba(34, 211, 238, .30), transparent 54%),
            radial-gradient(circle, rgba(124, 58, 237, .35), transparent 72%);
        filter: blur(14px);
        animation: modcGlow 2s ease-in-out infinite;
    }

    .modc-orbit {
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
    }

    .modc-orbit-outer {
        width: 300px;
        height: 300px;
        border: 1px solid rgba(34, 211, 238, .14);
        box-shadow:
            inset 0 0 36px rgba(34, 211, 238, .08),
            0 0 42px rgba(124, 58, 237, .18);
        animation: modcBreath 2.2s ease-in-out infinite;
    }

    .modc-orbit-mid {
        width: 282px;
        height: 282px;
        background: conic-gradient(from 25deg,
                transparent 0deg,
                transparent 18deg,
                var(--cyan) 58deg,
                transparent 104deg,
                transparent 158deg,
                var(--purple) 212deg,
                transparent 252deg,
                var(--gold) 305deg,
                transparent 344deg);
        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
        filter:
            drop-shadow(0 0 10px rgba(34, 211, 238, .65)) drop-shadow(0 0 18px rgba(124, 58, 237, .45));
        animation: modcSpin 1.55s linear infinite;
    }

    .modc-orbit-dash {
        width: 218px;
        height: 218px;
        border: 3px dashed rgba(168, 85, 247, .72);
        box-shadow: 0 0 24px rgba(124, 58, 237, .20);
        animation: modcSpinReverse 2.6s linear infinite;
    }

    .modc-orbit-inner {
        width: 158px;
        height: 158px;
        background: conic-gradient(from 120deg,
                rgba(34, 211, 238, .95),
                transparent 60deg,
                rgba(124, 58, 237, .95),
                transparent 145deg,
                rgba(250, 204, 21, .72),
                transparent 220deg,
                rgba(34, 211, 238, .9));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
        filter: drop-shadow(0 0 12px rgba(34, 211, 238, .5));
        animation: modcSpin 2.9s linear infinite;
    }

    .modc-core {
        position: relative;
        z-index: 5;
        width: 132px;
        height: 132px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background:
            radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0 5%, transparent 16%),
            radial-gradient(circle at 35% 30%, var(--cyan-soft) 0 18%, var(--cyan) 28%, var(--purple) 62%, #1e1b4b 100%);
        box-shadow:
            0 0 30px rgba(34, 211, 238, .85),
            0 0 70px rgba(124, 58, 237, .75),
            inset 0 0 30px rgba(255, 255, 255, .24);
        animation: modcCoreFloat 1.6s ease-in-out infinite;
    }

    .modc-core::before {
        content: "";
        position: absolute;
        inset: 16px;
        border-radius: inherit;
        background:
            radial-gradient(circle at 50% 42%, rgba(34, 211, 238, .28), transparent 58%),
            linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(2, 6, 23, .18));
        border: 1px solid rgba(255, 255, 255, .14);
    }

    .modc-core::after {
        content: "";
        position: absolute;
        inset: -13px;
        border-radius: inherit;
        background: conic-gradient(transparent,
                rgba(34, 211, 238, .95),
                transparent,
                rgba(124, 58, 237, .95),
                transparent,
                rgba(250, 204, 21, .75),
                transparent);
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
        animation: modcSpin .95s linear infinite;
    }

    .modc-controller {
        position: relative;
        z-index: 8;
        width: 78px;
        height: 46px;
        border-radius: 24px 24px 27px 27px;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .18), transparent 42%),
            linear-gradient(180deg, #172033, #020617);
        border: 1px solid rgba(255, 255, 255, .32);
        box-shadow:
            inset 0 0 18px rgba(34, 211, 238, .38),
            0 12px 24px rgba(2, 6, 23, .38),
            0 0 18px rgba(34, 211, 238, .30);
    }

    .modc-controller::before,
    .modc-controller::after {
        display: none;
        content: none;
    }

    .modc-dpad {
        position: absolute;
        left: 15px;
        top: 14px;
        width: 20px;
        height: 20px;
        filter: drop-shadow(0 0 7px rgba(255, 255, 255, .85));
    }

    .modc-dpad::before,
    .modc-dpad::after {
        content: "";
        position: absolute;
        border-radius: 4px;
        background: #f8fafc;
    }

    .modc-dpad::before {
        left: 7px;
        top: 0;
        width: 6px;
        height: 20px;
    }

    .modc-dpad::after {
        left: 0;
        top: 7px;
        width: 20px;
        height: 6px;
    }

    .modc-action {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #f8fafc;
        box-shadow: 0 0 9px rgba(255, 255, 255, .9);
    }

    .modc-a1 {
        right: 20px;
        top: 10px;
    }

    .modc-a2 {
        right: 11px;
        top: 19px;
    }

    .modc-a3 {
        right: 29px;
        top: 19px;
    }

    .modc-a4 {
        right: 20px;
        top: 28px;
    }


    .modc-dot {
        position: absolute;
        z-index: 3;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--cyan);
        box-shadow: 0 0 16px currentColor;
        animation: modcDot 1.9s ease-in-out infinite;
    }

    .modc-dot.d1 {
        left: 82px;
        top: 86px;
        color: var(--cyan);
        background: var(--cyan);
    }

    .modc-dot.d2 {
        right: 75px;
        top: 102px;
        color: var(--purple-soft);
        background: var(--purple-soft);
        animation-delay: .2s;
    }

    .modc-dot.d3 {
        left: 85px;
        bottom: 103px;
        color: var(--gold);
        background: var(--gold);
        animation-delay: .4s;
    }

    .modc-dot.d4 {
        right: 95px;
        bottom: 112px;
        color: var(--cyan);
        background: var(--cyan);
        animation-delay: .6s;
    }

    .modc-dot.d5 {
        left: 55px;
        top: 205px;
        width: 6px;
        height: 6px;
        color: var(--cyan);
        background: var(--cyan);
        animation-delay: .8s;
    }

    .modc-dot.d6 {
        right: 38px;
        top: 210px;
        width: 7px;
        height: 7px;
        color: var(--purple-soft);
        background: var(--purple-soft);
        animation-delay: 1s;
    }

    .modc-loader,
    .modc-loader * {
        box-sizing: border-box;
    }

    .modc-loader.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .modc-loader[hidden] {
        display: none;
    }

    .swal2-container {
        z-index: 100000;
    }

    .modc-orbit-mid {
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
    }

    .modc-orbit-inner {
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
    }

    .modc-core::after {
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
    }

    @keyframes modcSpin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes modcSpinReverse {
        to {
            transform: rotate(-360deg);
        }
    }

    @keyframes modcStars {
        to {
            background-position: 52px 52px;
        }
    }

    @keyframes modcGlow {

        0%,
        100% {
            transform: scale(.9);
            opacity: .62;
        }

        50% {
            transform: scale(1.14);
            opacity: 1;
        }
    }

    @keyframes modcBreath {

        0%,
        100% {
            transform: scale(.94);
            opacity: .58;
        }

        50% {
            transform: scale(1.05);
            opacity: 1;
        }
    }

    @keyframes modcCoreFloat {

        0%,
        100% {
            transform: translateY(0) scale(1);
        }

        50% {
            transform: translateY(-10px) scale(1.045);
        }
    }

    @keyframes modcDot {

        0%,
        100% {
            transform: translateY(0) scale(.68);
            opacity: .45;
        }

        50% {
            transform: translateY(-18px) scale(1.22);
            opacity: 1;
        }
    }

    @media (max-width: 480px) {
        .modc-loader-scene {
            transform: scale(.78);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .modc-loader *,
        .modc-loader::before {
            animation-duration: 3s !important;
        }
    }