@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

        :root {
            --bg-grad: linear-gradient(135deg, #f0fdf4, #e0f2fe, #f5f3ff);
            --text-main: #1e293b;
            --text-muted: #64748b;
            --glass-bg: rgba(255, 255, 255, 0.6);
            --glass-border: rgba(255, 255, 255, 0.8);
            --panel-bg: rgba(255, 255, 255, 0.95);
            --panel-border: rgba(255, 255, 255, 0.8);
            --btn-bg: rgba(255, 255, 255, 0.9);
            --btn-border: #e2e8f0;
            --btn-hover: rgba(248, 250, 252, 0.9);
        }

        body.dark-mode {
            --bg-grad: linear-gradient(135deg, #020617, #0f172a, #1e1b4b);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --glass-bg: rgba(30, 41, 59, 0.5);
            --glass-border: rgba(51, 65, 85, 0.6);
            --panel-bg: rgba(15, 23, 42, 0.95);
            --panel-border: rgba(71, 85, 105, 0.8);
            --btn-bg: rgba(30, 41, 59, 0.8);
            --btn-border: #334155;
            --btn-hover: rgba(51, 65, 85, 0.9);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-grad);
            color: var(--text-main);
            min-height: 100vh;
            overflow-x: hidden;
            transition: 0.5s ease;
        }

        .glass {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
            transition: 0.4s;
            color: var(--text-main);
        }

        .glass-panel {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            backdrop-filter: blur(20px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transition: 0.4s;
            color: var(--text-main);
        }

        .btn-ui {
            background: var(--btn-bg);
            border: 1px solid var(--btn-border);
            color: var(--text-main);
            transition: 0.2s;
        }

        .btn-ui:hover {
            background: var(--btn-hover);
        }

        .text-adapt {
            color: var(--text-main);
        }

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

        .tower-slot {
            transition: 0.5s ease;
            position: relative;
            overflow: hidden;
        }

        .tower-slot::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
            transform: skewX(-20deg);
        }

        .tower-slot.active {
            background: rgba(56, 189, 248, 0.15);
            border-color: rgba(56, 189, 248, 0.6);
        }

        .tower-slot.active::before {
            animation: flare 2.5s infinite;
        }

        @keyframes flare {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .modal {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal.show {
            opacity: 1;
            pointer-events: auto;
        }

        @keyframes pulse-red {

            0%,
            100% {
                box-shadow: 0 0 10px rgba(239, 68, 68, 0);
            }

            50% {
                box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
                border-color: #ef4444;
            }
        }

        .wall-active {
            animation: pulse-red 1.5s infinite;
        }

        .ticket-warn {
            color: #ef4444 !important;
            font-weight: 800;
        }

        .perspective-1000 {
            perspective: 1000px;
        }

        .preserve-3d {
            transform-style: preserve-3d;
        }

        .backface-hidden {
            backface-visibility: hidden;
        }

        .rotate-y-180 {
            transform: rotateY(180deg);
        }

        .bg-card-back {
            background: linear-gradient(135deg, #1e293b, #0f172a);
        }

        @keyframes drop-in-lux {
            0% {
                opacity: 0;
                transform: translateY(-80px) scale(0.3) rotateX(20deg);
            }

            60% {
                opacity: 1;
                transform: translateY(10px) scale(1.05) rotateX(-10deg);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1) rotateX(0deg);
            }
        }

        .anim-drop-lux {
            animation: drop-in-lux 0.6s forwards;
        }

        @keyframes gacha-shake {

            0%,
            100% {
                transform: translate(1px, 1px) rotate(0deg)
            }

            50% {
                transform: translate(-2px, -1px) rotate(1deg)
            }
        }

        .anim-shake {
            animation: gacha-shake 0.3s infinite;
        }

        @keyframes shatter-lux {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            20% {
                opacity: 1;
                transform: scale(1.15) rotate(-5deg);
                filter: brightness(2);
            }

            100% {
                opacity: 0;
                transform: scale(0.4) translateY(100px) rotate(20deg);
                filter: brightness(0);
            }
        }

        .anim-shatter-lux {
            animation: shatter-lux 0.5s forwards;
        }