:root {
            --neon-cyan: #00f3ff;
            --neon-magenta: #ff00ea;
            --neon-green: #00ff66;
            --neon-red: #ff2b66;
            --neon-yellow: #ffd54a;
            --bg-1: #090b1f;
            --bg-2: #16113a;
            --bg-3: #08131f;
            --glass-bg: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.22);
        }

        body {
            color: #ffffff;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 18%, rgba(0, 243, 255, 0.32), transparent 42%),
                radial-gradient(circle at 88% 12%, rgba(255, 0, 234, 0.3), transparent 38%),
                radial-gradient(circle at 50% 90%, rgba(255, 213, 74, 0.22), transparent 48%),
                linear-gradient(145deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
            background-attachment: fixed;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.25;
        }

        .glass-panel {
            background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid var(--glass-border);
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), 0 0 24px rgba(0, 243, 255, 0.08);
        }

        .word-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
            border: 1px solid var(--glass-border);
            transition: all 0.25s ease;
            user-select: none;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
            opacity: 1;
            color: #ffffff;
            font-weight: 800;
            letter-spacing: 0.02em;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        .stage-1 .word-card { cursor: grab; }
        .stage-1 .word-card:active { cursor: grabbing; }
        .stage-1 .word-card {
            position: relative;
            border-width: 2px;
            border-color: transparent;
            background-image:
                linear-gradient(135deg, rgba(10, 15, 35, 0.94), rgba(14, 20, 44, 0.84)),
                linear-gradient(120deg, rgba(0, 243, 255, 0.75), rgba(255, 0, 234, 0.75));
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 10px 22px rgba(0, 0, 0, 0.28),
                0 0 14px rgba(0, 243, 255, 0.2);
        }
        .stage-1 .word-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 45%);
            mix-blend-mode: screen;
            opacity: 0.85;
        }
        .word-card.block-color-1 {
            background-image:
                linear-gradient(135deg, rgba(12, 19, 42, 0.95), rgba(18, 26, 54, 0.86)),
                linear-gradient(115deg, rgba(0, 243, 255, 0.95), rgba(68, 145, 255, 0.85));
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.28),
                0 0 16px rgba(0, 243, 255, 0.35);
        }
        .word-card.block-color-2 {
            background-image:
                linear-gradient(135deg, rgba(26, 13, 38, 0.95), rgba(39, 18, 52, 0.86)),
                linear-gradient(115deg, rgba(255, 0, 234, 0.92), rgba(255, 111, 201, 0.86));
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.28),
                0 0 16px rgba(255, 0, 234, 0.32);
        }
        .word-card.block-color-3 {
            background-image:
                linear-gradient(135deg, rgba(12, 30, 32, 0.95), rgba(16, 40, 42, 0.86)),
                linear-gradient(115deg, rgba(0, 255, 102, 0.92), rgba(0, 204, 255, 0.84));
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.28),
                0 0 16px rgba(0, 255, 102, 0.3);
        }
        .word-card.block-color-4 {
            background-image:
                linear-gradient(135deg, rgba(34, 22, 10, 0.95), rgba(46, 29, 12, 0.86)),
                linear-gradient(115deg, rgba(255, 213, 74, 0.9), rgba(255, 145, 0, 0.84));
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.28),
                0 0 16px rgba(255, 213, 74, 0.3);
        }
        .word-card.block-color-5 {
            background-image:
                linear-gradient(135deg, rgba(18, 14, 42, 0.95), rgba(28, 18, 58, 0.86)),
                linear-gradient(115deg, rgba(132, 108, 255, 0.9), rgba(0, 243, 255, 0.78));
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.28),
                0 0 16px rgba(132, 108, 255, 0.3);
        }
        .stage-1 .word-card:hover {
            border-color: var(--neon-cyan);
            box-shadow:
                0 14px 28px rgba(0, 0, 0, 0.32),
                0 0 22px rgba(0, 243, 255, 0.55);
            transform: translateY(-3px) scale(1.03);
        }

        .stage-2 .word-card { cursor: pointer; }
        .stage-2 .word-card {
            position: relative;
            border-width: 2px;
            border-color: transparent;
            background-image:
                linear-gradient(135deg, rgba(10, 15, 35, 0.94), rgba(14, 20, 44, 0.84)),
                linear-gradient(120deg, rgba(0, 243, 255, 0.72), rgba(255, 0, 234, 0.72));
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow:
                0 8px 20px rgba(0, 0, 0, 0.26),
                0 0 14px rgba(255, 0, 234, 0.2);
        }
        .stage-2 .word-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 46%);
            mix-blend-mode: screen;
            opacity: 0.8;
        }
        .stage-2 .word-card.block-color-1 {
            background-image:
                linear-gradient(135deg, rgba(12, 19, 42, 0.95), rgba(18, 26, 54, 0.86)),
                linear-gradient(115deg, rgba(0, 243, 255, 0.95), rgba(68, 145, 255, 0.82));
        }
        .stage-2 .word-card.block-color-2 {
            background-image:
                linear-gradient(135deg, rgba(26, 13, 38, 0.95), rgba(39, 18, 52, 0.86)),
                linear-gradient(115deg, rgba(255, 0, 234, 0.92), rgba(255, 111, 201, 0.84));
        }
        .stage-2 .word-card.block-color-3 {
            background-image:
                linear-gradient(135deg, rgba(12, 30, 32, 0.95), rgba(16, 40, 42, 0.86)),
                linear-gradient(115deg, rgba(0, 255, 102, 0.9), rgba(0, 204, 255, 0.82));
        }
        .stage-2 .word-card.block-color-4 {
            background-image:
                linear-gradient(135deg, rgba(34, 22, 10, 0.95), rgba(46, 29, 12, 0.86)),
                linear-gradient(115deg, rgba(255, 213, 74, 0.9), rgba(255, 145, 0, 0.82));
        }
        .stage-2 .word-card.block-color-5 {
            background-image:
                linear-gradient(135deg, rgba(18, 14, 42, 0.95), rgba(28, 18, 58, 0.86)),
                linear-gradient(115deg, rgba(132, 108, 255, 0.88), rgba(0, 243, 255, 0.76));
        }
        .stage-2 .word-card:hover:not(.solved) {
            border-color: var(--neon-magenta);
            box-shadow: 0 0 20px rgba(255, 0, 234, 0.45);
            transform: scale(1.06);
        }

        .word-card.solved {
            background: linear-gradient(135deg, rgba(0, 255, 102, 0.26), rgba(0, 255, 102, 0.12));
            border-color: var(--neon-green);
            box-shadow: 0 0 18px rgba(0, 255, 102, 0.4);
            color: #d2ffe8;
            cursor: default;
            transform: scale(0.96);
        }

        .word-card.failed {
            background: linear-gradient(135deg, rgba(255, 43, 102, 0.26), rgba(255, 43, 102, 0.12));
            border-color: var(--neon-red);
            box-shadow: 0 0 18px rgba(255, 43, 102, 0.38);
            color: #ffe2eb;
            cursor: default;
            transform: scale(0.96);
        }

        .word-card.selected {
            background: linear-gradient(135deg, rgba(255, 0, 234, 0.28), rgba(0, 243, 255, 0.14));
            border-color: var(--neon-magenta);
            box-shadow: 0 0 28px rgba(255, 0, 234, 0.55);
            transform: scale(1.1);
            z-index: 10;
        }

        .sortable-ghost {
            opacity: 0.9;
            border-style: solid !important;
            border-width: 2px !important;
            border-color: rgba(255, 255, 255, 0.7) !important;
            box-shadow:
                0 12px 24px rgba(0, 0, 0, 0.28),
                0 0 18px rgba(0, 243, 255, 0.35) !important;
        }
        .stage-1 .sortable-ghost.word-card,
        .stage-2 .sortable-ghost.word-card,
        .stage-1 .sortable-drag.word-card,
        .stage-2 .sortable-drag.word-card,
        .stage-1 .sortable-chosen.word-card,
        .stage-2 .sortable-chosen.word-card {
            background-clip: padding-box, border-box !important;
            color: #ffffff !important;
        }
        .sortable-chosen,
        .sortable-drag {
            opacity: 1 !important;
            filter: saturate(1.12) brightness(1.06);
        }

        .btn-neon {
            background: linear-gradient(120deg, rgba(0, 243, 255, 0.15), rgba(255, 0, 234, 0.18));
            border: 1px solid var(--neon-cyan);
            color: #d3faff;
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.35);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }

        .btn-neon:hover {
            background: linear-gradient(120deg, var(--neon-cyan), var(--neon-magenta));
            color: #070b16;
            border-color: #ffffff;
            box-shadow: 0 0 24px rgba(0, 243, 255, 0.55), 0 0 24px rgba(255, 0, 234, 0.35);
            transform: translateY(-1px);
        }

        .class-btn {
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)),
                linear-gradient(120deg, rgba(120, 130, 150, 0.22), rgba(90, 100, 120, 0.2));
            border: 2px solid rgba(0, 243, 255, 0.72);
            transition: all 0.22s ease;
            color: #f8fbff;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-shadow: 0 0 10px rgba(0, 243, 255, 0.45);
            box-shadow:
                0 10px 20px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(0, 243, 255, 0.5),
                0 0 14px rgba(255, 0, 234, 0.32),
                inset 0 0 10px rgba(255, 255, 255, 0.12);
            min-height: 82px;
            font-size: 1.12rem;
            line-height: 1.2;
            padding: 1rem 0.5rem;
        }

        .class-btn:hover {
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)),
                linear-gradient(120deg, rgba(145, 155, 175, 0.34), rgba(110, 120, 140, 0.3));
            border-color: rgba(255, 255, 255, 0.95);
            transform: translateY(-2px) scale(1.02);
            box-shadow:
                0 12px 26px rgba(0, 0, 0, 0.32),
                0 0 26px rgba(0, 243, 255, 0.72),
                0 0 18px rgba(255, 0, 234, 0.48);
        }

        .class-btn:active {
            transform: translateY(0) scale(0.99);
        }

        #grammar-panel .grid {
            background: rgba(8, 15, 32, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 1rem;
            padding: 0.75rem;
            box-shadow: inset 0 0 18px rgba(0, 243, 255, 0.08);
        }

        #grammar-panel {
            margin-top: 1rem !important;
        }

        #words-container.stage-2 {
            gap: 0.55rem !important;
        }

        div:where(.swal2-container) div:where(.swal2-popup) {
            background:
                radial-gradient(circle at top right, rgba(255, 0, 234, 0.22), transparent 45%),
                radial-gradient(circle at bottom left, rgba(0, 243, 255, 0.2), transparent 45%),
                linear-gradient(145deg, #16113a, #0a1026);
            border: 1px solid rgba(0, 243, 255, 0.5);
            color: #ffffff;
            font-family: 'Poppins', sans-serif;
            border-radius: 1rem;
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 243, 255, 0.3), 0 0 18px rgba(255, 0, 234, 0.25);
        }

        div:where(.swal2-container) h2:where(.swal2-title) {
            color: var(--neon-cyan);
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 12px rgba(0, 243, 255, 0.45), 0 0 10px rgba(255, 0, 234, 0.25);
            font-size: clamp(1.6rem, 2.2vw, 2rem);
        }

        div:where(.swal2-container) div:where(.swal2-html-container) {
            color: #e9edff;
            font-size: clamp(1.05rem, 1.5vw, 1.2rem);
            line-height: 1.55;
        }

        div:where(.swal2-container) div:where(.swal2-popup) {
            font-size: 1.05rem;
        }

        div:where(.swal2-container) button:where(.swal2-confirm) {
            background: linear-gradient(120deg, var(--neon-cyan), var(--neon-magenta)) !important;
            color: #070b16 !important;
            border: 1px solid #ffffff !important;
            box-shadow: 0 0 18px rgba(0, 243, 255, 0.35), 0 0 12px rgba(255, 0, 234, 0.3);
        }

        div:where(.swal2-container) button:where(.swal2-cancel) {
            background: rgba(255, 43, 102, 0.18) !important;
            color: #ffdfe8 !important;
            border: 1px solid rgba(255, 43, 102, 0.6) !important;
        }

        div:where(.swal2-container) img:where(.swal2-image) {
            width: auto !important;
            height: auto !important;
            max-width: 120px !important;
            max-height: 72px !important;
            object-fit: contain;
        }

        .swal2-confirm.btn-neon {
            border-radius: 0.5rem;
            padding: 0.5rem 1.5rem;
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(var(--neon-cyan), var(--neon-magenta));
            border-radius: 999px;
        }
        ::-webkit-scrollbar-thumb:hover { filter: brightness(1.15); }

        .confetti-layer {
            position: fixed;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 120;
        }

        .confetti-piece {
            position: absolute;
            top: -12vh;
            width: 10px;
            height: 18px;
            border-radius: 3px;
            opacity: 0.96;
            animation-name: confetti-fall;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
            will-change: transform, opacity;
            transform-style: preserve-3d;
            filter: saturate(1.1);
        }

        @keyframes confetti-fall {
            0% {
                transform: translate3d(0, -10vh, 0) rotate(0deg) rotateY(0deg);
                opacity: 0.98;
            }
            25% {
                transform: translate3d(calc(var(--drift-x, 0px) * 0.25), 26vh, 0) rotate(calc(var(--spin, 720deg) * 0.25)) rotateY(120deg);
                opacity: 0.96;
            }
            55% {
                transform: translate3d(calc(var(--drift-x, 0px) * 0.62), 62vh, 0) rotate(calc(var(--spin, 720deg) * 0.62)) rotateY(240deg);
                opacity: 0.9;
            }
            90% {
                transform: translate3d(calc(var(--drift-x, 0px) * 0.92), 104vh, 0) rotate(calc(var(--spin, 720deg) * 0.92)) rotateY(330deg);
                opacity: 0.95;
            }
            100% {
                transform: translate3d(var(--drift-x, 0px), 122vh, 0) rotate(var(--spin, 720deg)) rotateY(360deg);
                opacity: 0.78;
            }
        }