:root {
            --primary: #00f5ff;
            --secondary: #ff00aa;
            --accent: #00ff88;
            --warning: #ffff00;
            --danger: #ff0066;
            --dark: #0a0a0f;
            --darker: #050510;
            --mouse-x: 50%;
            --mouse-y: 50%
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }

        body {
            min-height: 100vh;
            background: var(--dark);
            font-family: 'Rajdhani', sans-serif;
            overflow: hidden;
            color: #fff;
            user-select: none
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .ambient-bg {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(0, 245, 255, .08) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255, 0, 170, .05) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(0, 255, 136, .05) 0%, transparent 40%);
            pointer-events: none
        }

        .grid-floor {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, rgba(0, 245, 255, .1) 0%, transparent 100%), repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(0, 245, 255, .03) 100px, rgba(0, 245, 255, .03) 101px), repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(0, 245, 255, .03) 100px, rgba(0, 245, 255, .03) 101px);
            transform: perspective(500px) rotateX(60deg);
            transform-origin: bottom;
            pointer-events: none
        }

        .main-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            padding: 2rem;
            transition: all .6s ease
        }

        .main-content.hidden {
            opacity: 0;
            transform: scale(.9);
            pointer-events: none
        }

        .title-section {
            text-align: center
        }

        .glitch-title {
            font-family: 'Orbitron', monospace;
            font-size: clamp(3rem, 10vw, 6rem);
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary);
            letter-spacing: .2em;
            position: relative;
            animation: glitch 3s infinite
        }

        .glitch-title::before,
        .glitch-title::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        .glitch-title::before {
            color: var(--secondary);
            animation: glitch-1 .3s infinite;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%)
        }

        .glitch-title::after {
            color: var(--accent);
            animation: glitch-2 .3s infinite;
            clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%)
        }

        @keyframes glitch {

            0%,
            90%,
            100% {
                opacity: 1
            }

            92%,
            94%,
            96% {
                opacity: .8
            }
        }

        @keyframes glitch-1 {

            0%,
            100% {
                transform: translate(0)
            }

            25% {
                transform: translate(-3px, 2px)
            }

            50% {
                transform: translate(3px, -2px)
            }

            75% {
                transform: translate(-2px, 1px)
            }
        }

        @keyframes glitch-2 {

            0%,
            100% {
                transform: translate(0)
            }

            25% {
                transform: translate(3px, -2px)
            }

            50% {
                transform: translate(-3px, 2px)
            }

            75% {
                transform: translate(2px, -1px)
            }
        }

        .subtitle {
            font-size: 1rem;
            letter-spacing: .5em;
            color: rgba(255, 255, 255, .5);
            margin-top: .5rem
        }

        .menu-options {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            width: 100%;
            max-width: 500px
        }

        .difficulty-selector,
        .mode-selector {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .75rem
        }

        .diff-label,
        .mode-label {
            font-family: 'Orbitron', monospace;
            font-size: .75rem;
            letter-spacing: .3em;
            color: rgba(255, 255, 255, .5)
        }

        .diff-buttons,
        .mode-buttons {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            justify-content: center
        }

        .diff-btn,
        .mode-btn {
            padding: .5rem 1rem;
            font-family: 'Orbitron', monospace;
            font-size: .75rem;
            letter-spacing: .1em;
            color: rgba(255, 255, 255, .6);
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .1);
            cursor: pointer;
            transition: all .3s ease
        }

        .diff-btn:hover,
        .mode-btn:hover {
            background: rgba(0, 245, 255, .1);
            border-color: var(--primary);
            color: #fff
        }

        .diff-btn.active,
        .mode-btn.active {
            background: linear-gradient(135deg, rgba(0, 245, 255, .2), rgba(0, 136, 255, .2));
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: 0 0 15px rgba(0, 245, 255, .3)
        }

        .start-btn {
            position: relative;
            padding: 1.25rem 3rem;
            font-family: 'Orbitron', monospace;
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: .3em;
            color: #fff;
            background: transparent;
            border: none;
            cursor: pointer;
            overflow: hidden;
            transition: all .3s ease
        }

        .btn-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 245, 255, .1), rgba(0, 136, 255, .05));
            backdrop-filter: blur(10px)
        }

        .btn-border {
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            background: linear-gradient(var(--dark), var(--dark)) padding-box, linear-gradient(135deg, var(--primary), var(--secondary)) border-box
        }

        .btn-glow {
            position: absolute;
            inset: -2px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            opacity: 0;
            filter: blur(15px);
            transition: opacity .3s ease
        }

        .btn-text {
            position: relative;
            z-index: 2
        }

        .btn-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
            transition: left .5s ease
        }

        .start-btn:hover .btn-glow {
            opacity: .6
        }

        .start-btn:hover .btn-shine {
            left: 100%
        }

        .start-btn:hover {
            transform: translateY(-3px)
        }

        .start-btn.pressed {
            animation: btnPress .6s ease forwards
        }

        @keyframes btnPress {
            0% {
                transform: scale(1)
            }

            30% {
                transform: scale(.95)
            }

            60% {
                transform: scale(1.1);
                filter: brightness(2)
            }

            100% {
                transform: scale(1.3);
                opacity: 0
            }
        }

        .hint-text {
            font-family: 'Orbitron', monospace;
            font-size: .8rem;
            letter-spacing: .15em;
            color: rgba(255, 255, 255, .4)
        }

        .blink {
            animation: blink 1s infinite
        }

        @keyframes blink {

            0%,
            50% {
                opacity: 1
            }

            51%,
            100% {
                opacity: 0
            }
        }

        .stats-display {
            display: flex;
            gap: 3rem;
            margin-top: 1rem
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .25rem
        }

        .stat-label {
            font-size: .7rem;
            letter-spacing: .2em;
            color: rgba(255, 255, 255, .4)
        }

        .stat-value {
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            color: var(--primary);
            text-shadow: 0 0 10px var(--primary)
        }

        .game-world {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .5s ease
        }

        .game-world.active {
            opacity: 1;
            pointer-events: all
        }

        #gameCanvas {
            display: block;
            border-radius: 4px;
            box-shadow: 0 0 30px rgba(0, 245, 255, .2), inset 0 0 50px rgba(0, 0, 0, .5)
        }

        .hud {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            font-family: 'Orbitron', monospace;
            pointer-events: none;
            z-index: 50;
            background: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent)
        }

        .hud-left,
        .hud-right {
            display: flex;
            gap: 2rem
        }

        .hud-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%)
        }

        .hud-item {
            display: flex;
            flex-direction: column;
            gap: .25rem
        }

        .hud-label {
            font-size: .6rem;
            letter-spacing: .2em;
            color: rgba(255, 255, 255, .5)
        }

        .hud-value {
            font-size: 1.5rem;
            color: var(--primary);
            text-shadow: 0 0 10px var(--primary)
        }

        .level-value {
            font-size: 2rem;
            color: var(--accent);
            text-shadow: 0 0 15px var(--accent)
        }

        .level-value.level-up {
            animation: levelPop .5s ease
        }

        @keyframes levelPop {
            0% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.5);
                color: #fff
            }

            100% {
                transform: scale(1);
                opacity: 1
            }
        }

        .speed-bar {
            width: 80px;
            height: 8px;
            background: rgba(255, 255, 255, .1);
            border-radius: 4px;
            overflow: hidden;
            margin-top: .5rem
        }

        .speed-fill {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--accent), var(--warning), var(--danger));
            transition: width .3s ease;
            border-radius: 4px
        }

        .countdown-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .8);
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
            z-index: 100
        }

        .countdown-overlay.active {
            opacity: 1
        }

        .countdown-number {
            font-family: 'Orbitron', monospace;
            font-size: 8rem;
            font-weight: 900;
            color: var(--primary);
            text-shadow: 0 0 50px var(--primary)
        }

        .countdown-number.pop {
            animation: countPop .8s ease
        }

        @keyframes countPop {
            0% {
                transform: scale(.5);
                opacity: 0
            }

            50% {
                transform: scale(1.2)
            }

            100% {
                transform: scale(1);
                opacity: 1
            }
        }

        .pause-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            background: rgba(0, 0, 0, .9);
            backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
            z-index: 80
        }

        .pause-overlay.active {
            opacity: 1;
            pointer-events: all
        }

        .pause-overlay h2 {
            font-family: 'Orbitron', monospace;
            font-size: 3rem;
            color: var(--primary);
            text-shadow: 0 0 30px var(--primary)
        }

        .pause-overlay p {
            color: rgba(255, 255, 255, .5)
        }

        .pause-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem
        }

        .game-over {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            background: rgba(0, 0, 0, .95);
            opacity: 0;
            pointer-events: none;
            transition: opacity .5s ease;
            z-index: 90
        }

        .game-over.active {
            opacity: 1;
            pointer-events: all
        }

        .game-over-title {
            font-family: 'Orbitron', monospace;
            font-size: clamp(2rem, 8vw, 4rem);
            color: var(--danger);
            text-shadow: 0 0 30px var(--danger);
            animation: pulse 2s infinite
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .7
            }
        }

        .game-over-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            text-align: center
        }

        .go-stat {
            display: flex;
            flex-direction: column;
            gap: .5rem
        }

        .go-label {
            font-size: .7rem;
            letter-spacing: .2em;
            color: rgba(255, 255, 255, .5)
        }

        .go-value {
            font-family: 'Orbitron', monospace;
            font-size: 2rem;
            color: var(--primary);
            text-shadow: 0 0 15px var(--primary)
        }

        .go-stat.highlight .go-value {
            color: var(--accent);
            text-shadow: 0 0 15px var(--accent)
        }

        .new-record {
            font-family: 'Orbitron', monospace;
            font-size: 1.5rem;
            color: var(--warning);
            text-shadow: 0 0 20px var(--warning);
            animation: recordPulse .5s ease infinite alternate;
            display: none
        }

        @keyframes recordPulse {
            from {
                transform: scale(1)
            }

            to {
                transform: scale(1.1)
            }
        }

        .game-over-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem
        }

        .game-btn {
            padding: 1rem 2.5rem;
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            letter-spacing: .15em;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            cursor: pointer;
            transition: all .3s ease
        }

        .game-btn.secondary {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, .3)
        }

        .game-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 245, 255, .4)
        }

        .game-btn.secondary:hover {
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(0, 245, 255, .2)
        }

        .mobile-controls {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: none;
            gap: .5rem;
            z-index: 60
        }

        .mobile-controls.visible {
            display: grid;
            grid-template-areas: ". up ." "left . right" ". down ." ". pause .";
            grid-template-columns: repeat(3, 60px);
            grid-template-rows: repeat(4, 50px)
        }

        .control-btn {
            width: 60px;
            height: 50px;
            font-size: 1.5rem;
            color: rgba(255, 255, 255, .6);
            background: rgba(0, 245, 255, .1);
            border: 2px solid rgba(0, 245, 255, .3);
            border-radius: 8px;
            cursor: pointer;
            transition: all .2s ease
        }

        .control-btn:active {
            background: rgba(0, 245, 255, .3);
            transform: scale(.95)
        }

        .control-btn.up {
            grid-area: up
        }

        .control-btn.down {
            grid-area: down
        }

        .control-btn.left {
            grid-area: left
        }

        .control-btn.right {
            grid-area: right
        }

        .control-btn.pause {
            grid-area: pause;
            font-size: 1rem;
            background: rgba(255, 0, 170, .1);
            border-color: rgba(255, 0, 170, .3)
        }

        #particleCanvas {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 200
        }

        @media(max-width:768px) {
            .hud {
                padding: .75rem 1rem
            }

            .hud-left,
            .hud-right {
                gap: 1rem
            }

            .hud-value {
                font-size: 1.2rem
            }

            .level-value {
                font-size: 1.5rem
            }

            .game-over-stats {
                gap: 1rem
            }

            .go-value {
                font-size: 1.5rem
            }

            .game-btn {
                padding: .75rem 1.5rem;
                font-size: .9rem
            }

            .game-over-buttons,
            .pause-buttons {
                flex-direction: column
            }

            .speed-bar {
                display: none
            }

            .countdown-number {
                font-size: 5rem
            }
        }

        @media(max-width:480px) {
            .menu-options {
                padding: 0 1rem
            }

            .diff-buttons,
            .mode-buttons {
                gap: .25rem
            }

            .diff-btn,
            .mode-btn {
                padding: .4rem .6rem;
                font-size: .65rem
            }

            .stats-display {
                gap: 2rem
            }

            .stat-value {
                font-size: 1.2rem
            }
        }

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

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important
            }