/* Scoped reset for game elements */
        #game-container,
        #game-container *,
        #game-container *::before,
        #game-container *::after {
            box-sizing: border-box;
        }

        #game-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            padding: 10px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            font-family: 'Segoe UI', system-ui, sans-serif;
            color: #fff;
            touch-action: manipulation;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        /* Site template container styling */
        #container_left {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100%;
        }

        #popup-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1000;
            overflow: visible;
        }
        #popup-overlay > * {
            pointer-events: auto;
        }

        #game-header {
            display: flex; justify-content: space-between; gap: 8px;
            margin-bottom: 12px; padding: 10px 12px;
            background: rgba(255, 255, 255, 0.05); border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-box { text-align: center; flex: 1; }
        .stat-label { font-size: 0.6rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
        .stat-value { font-size: 1.3rem; font-weight: 700; font-family: 'Courier New', monospace; }
        #score { color: #fbbf24; }
        #level { color: #34d399; }
        #moves { color: #f87171; }
        #words-found { color: #60a5fa; }

        #moves.low-moves { animation: pulse-warning 0.5s infinite alternate; }
        @keyframes pulse-warning {
            from { color: #f87171; transform: scale(1); }
            to { color: #fef08a; transform: scale(1.1); }
        }

        #word-display {
            width: 100%; padding: 10px 16px; margin-bottom: 10px;
            background: rgba(0, 0, 0, 0.3); border-radius: 10px;
            display: flex; justify-content: space-between; align-items: center;
            height: 45px; border: 2px solid transparent;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }
        #word-display.selecting { border-color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
        #word-display.valid { border-color: #34d399; background: rgba(52, 211, 153, 0.1); }
        #word-display.invalid { border-color: #f87171; background: rgba(248, 113, 113, 0.1); }
        #current-word { font-size: 1.5rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
        #word-score-preview { font-size: 0.9rem; color: #94a3b8; }

        #last-word-display {
            width: 100%; padding: 6px 12px; margin-bottom: 8px;
            background: rgba(96, 165, 250, 0.1); border-radius: 8px;
            display: flex; justify-content: center; align-items: baseline; gap: 8px;
            font-size: 0.9rem; border: 1px solid rgba(96, 165, 250, 0.3);
            line-height: 1.2;
        }
        #last-word-display .label { color: #93c5fd; font-size: 0.9rem; }
        #last-word-display #last-word-text {
            font-weight: 700; font-size: 0.95rem; color: #60a5fa;
            letter-spacing: 2px; text-transform: uppercase;
        }
        #last-word-display #last-word-points {
            font-weight: 600; font-size: 0.9rem; color: #fbbf24;
        }
        #last-word-display.word-scored {
            background: rgba(96, 165, 250, 0.25);
            animation: word-scored-pulse 0.5s ease;
        }
        @keyframes word-scored-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        /* Move bonus floating notification */
        .move-bonus-float {
            position: absolute; pointer-events: none; z-index: 150;
            font-weight: 700; font-size: 1rem; color: #34d399;
            background: rgba(0, 0, 0, 0.8); padding: 4px 10px; border-radius: 6px;
            animation: move-bonus-float 1.2s ease-out forwards;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            will-change: transform, opacity;
        }
        @keyframes move-bonus-float {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
            100% { opacity: 0; transform: translate(-50%, -120%) scale(0.9); }
        }

        #grid-container {
            position: relative; padding: 12px 12px 6px 6px;
            background: linear-gradient(145deg, #2d2d4a, #1e1e32);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        #grid {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            background: #1a1a2e; border-radius: 10px; overflow: hidden;
        }

        #selection-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
        #selection-path { fill: none; stroke: #60a5fa; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
        #selection-path.fading { animation: path-fade-out 1.5s ease-out forwards; }
        @keyframes path-fade-out {
            0% { opacity: 0.8; stroke-width: 4; }
            100% { opacity: 0; stroke-width: 1; }
        }

        .tile {
            position: absolute;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; user-select: none; touch-action: none;
            z-index: 10;
            /* GPU acceleration */
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .tile.falling {
            will-change: transform;
            transition: none !important;
        }

        .tile-inner {
            width: 92%; height: 92%; border-radius: 8px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: linear-gradient(145deg, #3d3d5c, #2a2a42);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top-color: rgba(255, 255, 255, 0.15);
            position: relative;
        }

        .tile-letter {
            font-size: 1.8em;
            font-weight: 700; color: #fff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            line-height: 1;
        }
        .tile-letter.qu-tile {
            font-size: 1.4em;
            letter-spacing: -0.05em;
        }
        .tile-points {
            font-size: 0.55em;
            color: #94a3b8;
            position: absolute; bottom: 6%; right: 8%;
        }

        .tile.selected .tile-inner { transform: scale(1.08); box-shadow: 0 0 16px rgba(96, 165, 250, 0.6); }
        .tile.in-path .tile-inner { background: linear-gradient(145deg, #60a5fa, #3b82f6); }
        .tile.typed-selection .tile-inner {
            background: linear-gradient(145deg, #a78bfa, #8b5cf6);
            box-shadow: 0 0 16px rgba(167, 139, 250, 0.6);
        }

        .tile.removing { animation: tile-remove 0.4s ease-out forwards; pointer-events: none; will-change: transform, opacity; }
        @keyframes tile-remove {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(0); opacity: 0; }
        }

        .tile.falling { transition: none !important; }
        .tile.bouncing .tile-inner { animation: bounce-squash 0.15s ease-out; }
        @keyframes bounce-squash {
            0% { transform: scaleY(0.8) scaleX(1.1); }
            50% { transform: scaleY(1.05) scaleX(0.95); }
            100% { transform: scaleY(1) scaleX(1); }
        }

        /* Implosion Animation - consecutive same letters */
        .tile.unstable {
            animation: tile-unstable 0.15s ease-in-out infinite;
            z-index: 200;
        }
        .tile.unstable .tile-inner {
            background: linear-gradient(145deg, #dc2626, #991b1b) !important;
            box-shadow: 0 0 15px rgba(220, 38, 38, 0.8), inset 0 0 10px rgba(255, 100, 100, 0.3);
            animation: unstable-glow 0.3s ease-in-out infinite alternate;
        }
        @keyframes tile-unstable {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-2px, 1px) rotate(-1deg); }
            50% { transform: translate(2px, -1px) rotate(1deg); }
            75% { transform: translate(-1px, -1px) rotate(-0.5deg); }
        }
        @keyframes unstable-glow {
            0% { box-shadow: 0 0 10px rgba(220, 38, 38, 0.6), inset 0 0 8px rgba(255, 100, 100, 0.2); }
            100% { box-shadow: 0 0 25px rgba(220, 38, 38, 1), inset 0 0 15px rgba(255, 100, 100, 0.5); }
        }
        .tile.imploding {
            animation: tile-implode 0.6s ease-in forwards;
            pointer-events: none;
            z-index: 200;
            will-change: transform, opacity;
        }
        @keyframes tile-implode {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            40% { transform: translate(0, 0) scale(1.1); opacity: 1; }
            100% {
                transform: translate(var(--implode-x), var(--implode-y)) scale(0.2);
                opacity: 0;
            }
        }
        .implosion-indicator {
            position: absolute;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #ec4899, #8b5cf6);
            color: white;
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 700;
            text-align: center;
            z-index: 300;
            animation: implosion-indicator-pop 0.6s ease-out forwards;
            box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
        }
        .implosion-indicator .implode-letter {
            font-size: 1.5rem;
            letter-spacing: 2px;
        }
        .implosion-indicator .implode-text {
            font-size: 0.9rem;
            opacity: 0.9;
            text-transform: uppercase;
        }
        @keyframes implosion-indicator-pop {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }
        .implosion-burst {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle, white, #ec4899, #8b5cf6, transparent);
            transform: translate(-50%, -50%) scale(0.133);
            animation: implosion-burst 0.5s ease-out forwards;
            pointer-events: none;
            z-index: 250;
            will-change: transform, opacity;
        }
        @keyframes implosion-burst {
            0% { transform: translate(-50%, -50%) scale(0.133); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(0.667); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }
        .tile.implosion-special-spawn .tile-inner {
            animation: special-spawn-glow 0.8s ease-out;
        }
        @keyframes special-spawn-glow {
            0% { box-shadow: 0 0 0 rgba(236, 72, 153, 0); }
            30% { box-shadow: 0 0 40px rgba(236, 72, 153, 1), 0 0 60px rgba(139, 92, 246, 0.8); }
            100% { box-shadow: none; }
        }

        /* Bonus Tiles - simple border glow */
        .tile.bonus .tile-inner {
            border: 2px solid #a78bfa;
            background: linear-gradient(145deg, #4a3d6a, #352a52);
        }
        .tile.bonus .tile-letter { color: #e9d5ff; }

        /* Special Tiles - Horizontal (subtle green horizontal stripes) */
        .tile.special_horizontal .tile-inner {
            background: repeating-linear-gradient(
                0deg,
                #166534 0px,
                #166534 4px,
                #14532d 4px,
                #14532d 8px
            );
            border: 2px solid #22c55e;
        }
        .tile.special_horizontal .tile-letter {
            color: #bbf7d0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* Special Tiles - Vertical (subtle green vertical stripes) */
        .tile.special_vertical .tile-inner {
            background: repeating-linear-gradient(
                90deg,
                #166534 0px,
                #166534 4px,
                #14532d 4px,
                #14532d 8px
            );
            border: 2px solid #22c55e;
        }
        .tile.special_vertical .tile-letter {
            color: #bbf7d0;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .tile.special_star .tile-inner {
            background: radial-gradient(circle at center, #fef08a 0%, #fde047 40%, #ca8a04 100%);
            border: 2px solid #fef08a;
            box-shadow: 0 0 12px rgba(253, 224, 71, 0.6);
            position: relative;
            overflow: visible;
        }
        .tile.special_star .tile-letter { color: #422006; text-shadow: 0 1px 2px rgba(255,255,255,0.6); z-index: 2; position: relative; }
        /* Animated diagonal arrows/bolts shooting from corners */
        .tile.special_star::before,
        .tile.special_star::after {
            content: '';
            position: absolute;
            width: 130%;
            height: 4px;
            background: linear-gradient(90deg, transparent 5%, #fde047 20%, #fff 50%, #fde047 80%, transparent 95%);
            box-shadow: 0 0 8px #fde047, 0 0 12px rgba(253, 224, 71, 0.6);
            top: 50%;
            left: 50%;
            transform-origin: center;
            animation: star-bolt-pulse 1.5s ease-in-out infinite;
            z-index: 1;
            pointer-events: none;
        }
        .tile.special_star::before { transform: translate(-50%, -50%) rotate(45deg); }
        .tile.special_star::after { transform: translate(-50%, -50%) rotate(-45deg); animation-delay: 0.75s; }
        @keyframes star-bolt-pulse {
            0%, 100% { opacity: 0.6; width: 110%; }
            50% { opacity: 1; width: 150%; box-shadow: 0 0 12px #fde047, 0 0 18px rgba(253, 224, 71, 0.8); }
        }

        .tile.special_bomb .tile-inner {
            background:
                radial-gradient(circle at 30% 30%, rgba(255,200,100,0.4) 0%, transparent 40%),
                linear-gradient(145deg, #f97316, #c2410c);
            border: 2px solid #fdba74;
            position: relative;
        }
        .tile.special_bomb::before,
        .tile.special_bomb::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70%;
            height: 70%;
            border: 5px solid rgba(255, 200, 100, 0.8);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0.2);
            animation: bomb-pulse 1.5s ease-out infinite;
            pointer-events: none;
            z-index: 1;
            will-change: transform, opacity;
        }
        .tile.special_bomb::after {
            animation-delay: 0.75s;
        }
        @keyframes bomb-pulse {
            0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
        }
        .tile.special_bomb .tile-letter { text-shadow: 0 1px 3px rgba(0,0,0,0.7); position: relative; z-index: 2; }

        .tile.special_rainbow .tile-inner {
            background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ec4899, #ef4444);
            background-size: 700% 100%;
            animation: rainbow-shift 4s linear infinite !important;
            border: 3px solid #fff;
        }
        .tile.special_rainbow .tile-letter {
            color: #fff;
            text-shadow: 0 0 3px #000, 0 0 6px #000;
        }
        @keyframes rainbow-shift {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        /* Leveler Tile - Distinguished with upward arrows and shimmy */
        .tile.leveler {
            overflow: visible;
            z-index: 15;
            animation: leveler-shimmy var(--shimmy-duration, 3s) ease-in-out infinite;
            animation-delay: var(--shimmy-delay, 0s);
        }
        .tile.leveler .tile-inner {
            background: linear-gradient(145deg, #1e3a5f, #0f2744) !important;
            border: 2px solid #38bdf8 !important;
            position: relative;
            overflow: hidden;
        }
        @keyframes leveler-shimmy {
            0%, 100% { transform: rotate(0deg) translateX(0); }
            15% { transform: rotate(-1.5deg) translateX(-1px); }
            30% { transform: rotate(1.2deg) translateX(0.5px); }
            45% { transform: rotate(-0.8deg) translateX(-0.5px); }
            60% { transform: rotate(1deg) translateX(0.5px); }
            75% { transform: rotate(-0.5deg) translateX(0); }
            85% { transform: rotate(0.3deg); }
        }
        .tile.leveler .tile-inner::before,
        .tile.leveler .tile-inner::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 10px solid rgba(56, 189, 248, 0.6);
            animation: leveler-arrows-rise 2s linear infinite;
            pointer-events: none;
            will-change: transform, opacity;
        }
        .tile.leveler .tile-inner::after {
            animation-delay: 1s;
        }
        @keyframes leveler-arrows-rise {
            0% { transform: translateX(-50%) translateY(0); opacity: 0; }
            20% { opacity: 0.8; }
            80% { opacity: 0.8; }
            100% { transform: translateX(-50%) translateY(-70px); opacity: 0; }
        }
        .tile.leveler .tile-letter { color: #7dd3fc !important; position: relative; z-index: 2; }

        .leveler-number {
            position: absolute; top: 2%; right: 2%;
            background: linear-gradient(135deg, #ffd700, #ffaa00);
            color: #333; font-weight: 900;
            font-size: 0.85em;
            width: 1.3em; height: 1.3em; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(255, 215, 0, 0.5);
            z-index: 30; border: 2px solid #fff;
        }
        /* Leveler colors: 2=yellow (default), 3=orange, 4=red */
        .leveler-number[data-num="3"] { background: linear-gradient(135deg, #ff8c00, #ff6600); }
        .leveler-number[data-num="4"] { background: linear-gradient(135deg, #ff4444, #cc0000); color: #fff; }
        @keyframes leveler-decrement {
            0% { transform: scale(1.8); box-shadow: 0 0 25px #ffd700, 0 0 40px #ff8c00; }
            30% { transform: scale(2.2); box-shadow: 0 0 35px #ffd700, 0 0 50px #ff8c00; }
            100% { transform: scale(1); box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(255, 215, 0, 0.5); }
        }
        @keyframes leveler-spawn {
            0% { transform: scale(0.5); opacity: 0.5; box-shadow: 0 0 30px #38bdf8; }
            50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 40px #38bdf8, 0 0 60px #0ea5e9; }
            100% { transform: scale(1); opacity: 1; }
        }
        .leveler-ring-burst {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.167);
            width: 120px; height: 120px;
            border: 4px solid #ffd700;
            border-radius: 50%;
            animation: ring-burst 0.6s ease-out forwards;
            pointer-events: none;
            z-index: 100;
            will-change: transform, opacity;
        }
        @keyframes ring-burst {
            0% { transform: translate(-50%, -50%) scale(0.167); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }

        /* Blank Tile - Looks like regular tile with dancing question mark */
        .tile.blank .tile-inner {
            background: linear-gradient(145deg, #3d3d5c, #2a2a42);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top-color: rgba(255, 255, 255, 0.15);
            position: relative;
            overflow: hidden;
        }
        .tile.blank .tile-inner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                115deg,
                transparent 20%,
                rgba(255, 255, 255, 0.12) 50%,
                transparent 80%
            );
            animation: blank-shimmer 5s ease-in-out infinite;
            pointer-events: none;
            will-change: transform;
        }
        @keyframes blank-shimmer {
            0%, 85% { transform: translateX(0); }
            100% { transform: translateX(400%); }
        }
        .tile.blank .tile-letter {
            color: #fff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            animation: blank-dance 1.5s ease-in-out infinite;
            z-index: 1;
            position: relative;
        }
        .tile.blank .tile-points { display: none; }
        @keyframes blank-dance {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-3px) rotate(-8deg);
            }
            50% {
                transform: translateY(0) rotate(0deg);
            }
            75% {
                transform: translateY(-3px) rotate(8deg);
            }
        }

        /* Rotate Tile - Hypnosis spiral effect */
        .tile.special_rotate .tile-inner {
            background: linear-gradient(145deg, #1e3a5f, #1d4ed8);
            border: 2px solid #60a5fa;
            position: relative;
            overflow: hidden;
        }
        /* Rotating curved arrows pattern */
        .tile.special_rotate .tile-inner::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 80%;
            transform: translate(-50%, -50%);
            background:
                /* Top-right curved arrow */
                radial-gradient(ellipse 40% 20% at 75% 25%, rgba(96, 165, 250, 0.25) 0%, transparent 100%),
                /* Bottom-left curved arrow */
                radial-gradient(ellipse 40% 20% at 25% 75%, rgba(96, 165, 250, 0.25) 0%, transparent 100%);
            animation: rotate-arrows 3s linear infinite;
            pointer-events: none;
        }
        .tile.special_rotate .tile-inner::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 70%;
            height: 70%;
            transform: translate(-50%, -50%);
            border: 5px solid transparent;
            border-top-color: rgba(96, 165, 250, 0.5);
            border-bottom-color: rgba(96, 165, 250, 0.5);
            border-radius: 50%;
            animation: rotate-arrows 2.5s linear infinite reverse;
            pointer-events: none;
        }
        .tile.special_rotate .tile-letter {
            color: #93c5fd;
            text-shadow: 0 0 4px #1d4ed8, 0 0 8px #3b82f6;
            z-index: 2;
            position: relative;
        }
        @keyframes rotate-arrows {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Shuffle Tile */
        .tile.special_shuffle .tile-inner {
            background:
                radial-gradient(circle at 20% 30%, #22c55e 3px, transparent 3px),
                radial-gradient(circle at 70% 20%, #eab308 3px, transparent 3px),
                radial-gradient(circle at 40% 70%, #ec4899 3px, transparent 3px),
                radial-gradient(circle at 80% 60%, #8b5cf6 3px, transparent 3px),
                linear-gradient(145deg, #065f46, #064e3b);
            border: 2px solid #34d399;
        }
        .tile.special_shuffle .tile-letter {
            color: #a7f3d0;
        }

        /* Transformation animations */
        .tile.rotating {
            animation: tile-rotate 0.8s ease-in-out forwards;
        }
        @keyframes tile-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-180deg); }
        }
        .tile.shuffling {
            animation: tile-shuffle 0.6s ease-out forwards;
        }
        @keyframes tile-shuffle {
            0% { opacity: 1; transform: scale(1); }
            30% { opacity: 0; transform: scale(0.5); }
            70% { opacity: 0; transform: scale(0.5); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* Laser Beams */
        .laser-beam { position: absolute; pointer-events: none; z-index: 200; opacity: 0; animation: laser-shoot 0.6s ease-out forwards; will-change: opacity, clip-path; }
        .laser-horizontal { height: 6px; background: linear-gradient(to right, transparent, #38bdf8, #38bdf8, transparent); box-shadow: 0 0 15px #38bdf8, 0 0 30px #38bdf8; }
        .laser-vertical { width: 6px; background: linear-gradient(to bottom, transparent, #38bdf8, #38bdf8, transparent); box-shadow: 0 0 15px #38bdf8, 0 0 30px #38bdf8; }
        .laser-diagonal { height: 6px; background: linear-gradient(to right, transparent, #fde047, #fde047, transparent); box-shadow: 0 0 15px #fde047; transform-origin: left center; animation: laser-shoot 0.9s ease-out forwards; }
        .laser-rainbow { height: 8px; background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6); box-shadow: 0 0 20px #fff; }
        .laser-rainbow-wide {
            height: 12px;
            background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
            background-size: 200% 100%;
            animation: rainbow-beam-shift 0.3s linear, laser-shoot 0.5s ease-out forwards;
            box-shadow: 0 0 30px rgba(255,255,255,0.8), 0 0 60px rgba(139,92,246,0.5);
        }
        .laser-rainbow-wide.vertical {
            width: 12px;
            height: auto;
            background: linear-gradient(180deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
        }
        @keyframes rainbow-beam-shift {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* Rainbow explosion effects */
        .rainbow-flash {
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            z-index: 300;
            animation: rainbow-flash-anim 0.4s ease-out forwards;
            pointer-events: none;
        }
        @keyframes rainbow-flash-anim {
            0% { opacity: 0; }
            20% { opacity: 1; }
            100% { opacity: 0; }
        }

        .rainbow-ring {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 4px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6) border-box;
            transform: translate(-50%, -50%) scale(0.05);
            animation: rainbow-ring-expand 0.8s ease-out forwards;
            pointer-events: none;
            z-index: 250;
            will-change: transform, opacity;
        }
        @keyframes rainbow-ring-expand {
            0% { transform: translate(-50%, -50%) scale(0.05); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }

        .rainbow-sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: rainbow-sparkle-fly 1s ease-out forwards;
            pointer-events: none;
            z-index: 260;
            box-shadow: 0 0 10px currentColor;
            will-change: transform, opacity;
        }
        @keyframes rainbow-sparkle-fly {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) scale(0);
            }
        }

        .tile.rainbow-hit .tile-inner {
            animation: tile-rainbow-hit 0.6s ease-out;
        }
        @keyframes tile-rainbow-hit {
            0% { filter: brightness(1); }
            30% { filter: brightness(2) hue-rotate(0deg); box-shadow: 0 0 30px white; }
            60% { filter: brightness(1.5) hue-rotate(180deg); }
            100% { filter: brightness(1) hue-rotate(360deg); }
        }

        /* Enhanced Rainbow Explosion Effects */
        .rainbow-core {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle, white 0%, #fef08a 30%, #f97316 60%, transparent 100%);
            transform: translate(-50%, -50%);
            animation: rainbow-core-pulse 1.2s ease-out forwards;
            pointer-events: none;
            z-index: 350;
            box-shadow: 0 0 40px white, 0 0 80px #fef08a;
        }
        @keyframes rainbow-core-pulse {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
            30% { transform: translate(-50%, -50%) scale(2); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
        }

        .rainbow-shockwave {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            border: 6px solid;
            transform: translate(-50%, -50%) scale(0.04);
            animation: shockwave-expand 1s ease-out forwards;
            pointer-events: none;
            z-index: 280;
            will-change: transform, opacity;
        }
        @keyframes shockwave-expand {
            0% { transform: translate(-50%, -50%) scale(0.04); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }

        .rainbow-laser {
            position: absolute;
            height: 4px;
            transform-origin: left center;
            animation: laser-fire 0.225s ease-out forwards;
            pointer-events: none;
            z-index: 290;
            border-radius: 2px;
        }
        @keyframes laser-fire {
            0% { opacity: 0; transform-origin: left center; clip-path: inset(0 100% 0 0); }
            30% { opacity: 1; clip-path: inset(0 50% 0 0); }
            100% { opacity: 1; clip-path: inset(0 0 0 0); }
        }

        .rainbow-impact {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: impact-burst 0.6s ease-out forwards;
            pointer-events: none;
            z-index: 295;
        }
        @keyframes impact-burst {
            0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
            50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
        }

        .tile.rainbow-disintegrate .tile-inner {
            animation: tile-disintegrate 0.9s ease-out forwards;
        }
        @keyframes tile-disintegrate {
            0% { transform: scale(1); filter: brightness(1); }
            20% { transform: scale(1.2); filter: brightness(3) saturate(2); box-shadow: 0 0 30px white; }
            50% { transform: scale(1.1) rotate(5deg); filter: brightness(2); }
            100% { transform: scale(1); filter: brightness(1); }
        }

        /* Rainbow refill - all tiles drop at once */
        .tile.rainbow-drop {
            opacity: 0.9;
        }
        .tile.rainbow-drop .tile-inner {
            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
        }
        .tile.rainbow-land .tile-inner {
            animation: rainbow-land-bounce 0.2s ease-out;
        }
        @keyframes rainbow-land-bounce {
            0% { transform: scale(1, 0.85); }
            50% { transform: scale(1.1, 0.9); }
            100% { transform: scale(1, 1); }
        }

        .rainbow-particle {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: particle-fly 1.2s ease-out forwards;
            pointer-events: none;
            z-index: 270;
            box-shadow: 0 0 8px currentColor;
            will-change: transform, opacity;
        }
        @keyframes particle-fly {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); }
        }

        @keyframes laser-shoot {
            0% { opacity: 0; clip-path: inset(0 100% 0 0); }
            20% { opacity: 1; }
            50% { opacity: 1; clip-path: inset(0 0 0 0); }
            100% { opacity: 0; clip-path: inset(0 0 0 0); }
        }

        /* Explosion - 5x5 area */
        .explosion {
            position: absolute; pointer-events: none; z-index: 200;
            transform: translate(-50%, -50%);
        }
        .explosion-ring {
            position: absolute;
            width: 20px; height: 20px;
            border-radius: 50%;
            border: 6px solid #f97316;
            box-shadow: 0 0 12px #f97316, 0 0 24px #ff6600;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: bomb-ring-expand 0.6s ease-out forwards;
            will-change: transform, opacity;
        }
        .explosion-ring:nth-child(2) {
            animation-delay: 0.1s;
            border-color: #fbbf24;
            box-shadow: 0 0 12px #fbbf24, 0 0 24px #f59e0b;
        }
        .explosion-ring:nth-child(3) {
            animation-delay: 0.2s;
            border-color: #ef4444;
            box-shadow: 0 0 12px #ef4444, 0 0 24px #dc2626;
        }
        @keyframes bomb-ring-expand {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            70% { opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
        }
        .explosion-spark {
            position: absolute;
            width: 6px; height: 6px;
            background: #fbbf24;
            border-radius: 50%;
            left: 50%; top: 50%;
            animation: bomb-spark 0.5s ease-out forwards;
        }
        @keyframes bomb-spark {
            0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) translate(var(--spark-x), var(--spark-y)) scale(0); opacity: 0; }
        }

        /* Rotate effect indicator */
        @keyframes spin-indicator {
            0% { transform: rotate(0deg) scale(0.5); opacity: 1; }
            100% { transform: rotate(360deg) scale(1.5); opacity: 0; }
        }

        /* Shuffle particle effect */
        @keyframes shuffle-particle {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(calc(cos(var(--angle)) * 60px), calc(sin(var(--angle)) * 60px)) scale(0); opacity: 0; }
        }

        /* Board rotation animation */
        .grid-rotating {
            animation: board-rotate 0.8s ease-in-out;
        }
        @keyframes board-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(180deg); }
        }

        /* Tile counter-rotation during board rotation */
        .tile-counter-rotate .tile-inner {
            animation: counter-rotate 0.8s ease-in-out forwards;
        }
        @keyframes counter-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-180deg); }
        }

        /* Shuffle tile movement - longer animation */
        .tile-shuffling {
            transition: none !important;
            animation: tile-shuffle-fade 1.8s ease-in-out;
        }
        @keyframes tile-shuffle-fade {
            0% { transform: scale(1) rotate(0deg); opacity: 1; }
            15% { transform: scale(0.5) rotate(90deg); opacity: 0.7; }
            30% { transform: scale(0.2) rotate(180deg); opacity: 0; }
            50% { transform: scale(0.2) rotate(360deg); opacity: 0; }
            70% { transform: scale(0.2) rotate(540deg); opacity: 0; }
            85% { transform: scale(0.5) rotate(630deg); opacity: 0.7; }
            100% { transform: scale(1) rotate(720deg); opacity: 1; }
        }

        /* Shuffle overlay - blocks all interaction */
        .shuffle-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: overlay-fade-in 0.3s ease-out;
        }
        @keyframes overlay-fade-in {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        .shuffle-modal {
            background: linear-gradient(145deg, #065f46, #064e3b);
            padding: 30px 50px;
            border-radius: 20px;
            text-align: center;
            color: white;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            animation: modal-bounce 0.4s ease-out;
        }
        @keyframes modal-bounce {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        .shuffle-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            animation: shuffle-icon-spin 1s linear infinite;
        }
        @keyframes shuffle-icon-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .shuffle-text {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 15px;
        }
        .shuffle-spinner {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top-color: #34d399;
            border-radius: 50%;
            animation: spinner-spin 0.8s linear infinite;
        }
        @keyframes spinner-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Transform popup animation */
        @keyframes popup-appear {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        /* Floating Scores */
        .floating-score {
            position: absolute; pointer-events: none; z-index: 100;
            font-weight: 700; font-size: 1.5rem; color: #fbbf24;
            background: rgba(0, 0, 0, 0.85); padding: 8px 16px; border-radius: 10px;
            text-shadow: 0 0 12px rgba(251, 191, 36, 0.9);
            animation: float-up 2.5s ease-out forwards;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(251, 191, 36, 0.3);
            will-change: transform, opacity;
        }
        .floating-score .word { display: block; font-size: 1rem; color: #60a5fa; letter-spacing: 2px; margin-bottom: 2px; }
        .floating-score .points { display: block; font-size: 1.5rem; }

        /* Auto-match cascade styling */
        .tile.auto-matched .tile-inner {
            background: linear-gradient(145deg, #22c55e, #16a34a) !important;
            box-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
        }
        .floating-score.auto-match-score {
            animation: float-up-cascade 2.5s ease-out forwards;
        }
        .floating-score .cascade-badge {
            display: block;
            font-size: 0.85rem;
            color: #22c55e;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 2px;
        }
        @keyframes float-up-cascade {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            10% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
            60% { transform: translate(-50%, -70%) scale(1.1); opacity: 1; }
            100% { transform: translate(-50%, -120%) scale(0.9); opacity: 0; }
        }

        @keyframes float-up {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            10% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
            60% { transform: translate(-50%, -70%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -120%) scale(0.9); opacity: 0; }
        }

        /* Moves Gained Notification */
        .moves-gained {
            position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: white; padding: 15px 30px; border-radius: 12px;
            font-size: 1.3rem; font-weight: 700; z-index: 1000;
            animation: moves-popup 1.5s ease-out forwards;
            box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
        }
        @keyframes moves-popup {
            0% { transform: translateX(-50%) scale(0); opacity: 0; }
            20% { transform: translateX(-50%) scale(1.1); opacity: 1; }
            80% { transform: translateX(-50%) scale(1); opacity: 1; }
            100% { transform: translateX(-50%) translateY(-20px) scale(0.9); opacity: 0; }
        }

        /* Level Up Animation */
        .level-up-popup {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #34d399, #10b981);
            color: white; padding: 25px 40px; border-radius: 16px;
            text-align: center; z-index: 1100;
            animation: level-popup 1.5s ease-out forwards;
            box-shadow: 0 0 40px rgba(52, 211, 153, 0.6);
            min-width: max-content;
        }
        .level-up-popup h2 { font-size: 1.6rem; margin: 0 0 8px 0; white-space: nowrap; }
        .level-up-popup .new-level { font-size: 2.5rem; font-weight: 900; }

        /* Milestone Rainbow Popup */
        .milestone-rainbow-popup {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b);
            color: white; padding: 30px 50px; border-radius: 20px;
            text-align: center; z-index: 1200;
            animation: rainbow-popup 2.5s ease-out forwards;
            box-shadow: 0 0 60px rgba(139, 92, 246, 0.8), 0 0 100px rgba(236, 72, 153, 0.5);
        }
        .milestone-rainbow-popup h2 {
            font-size: 2rem; margin: 0 0 10px 0;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
        }
        .milestone-rainbow-popup .rainbow-text {
            font-size: 1.8rem; font-weight: 900;
            line-height: 1.4;
            margin: 8px 0;
            background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: rainbow-text-shift 1s linear infinite;
        }
        .milestone-rainbow-popup .milestone-desc {
            font-size: 0.9rem; margin-top: 12px; opacity: 0.9; line-height: 1.3;
        }
        /* Bonus Rainbow Popup - smaller than milestone */
        .bonus-rainbow-popup {
            padding: 20px 35px;
        }
        .bonus-rainbow-popup h2 {
            font-size: 1.3rem;
            margin: 0 0 6px 0;
        }
        .bonus-rainbow-popup .rainbow-text {
            font-size: 1.2rem;
        }
        .bonus-rainbow-popup .milestone-desc {
            font-size: 0.85rem;
            margin-top: 6px;
        }
        @keyframes rainbow-popup {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
            85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
        }
        @keyframes rainbow-text-shift {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* Word Rainbow Popup - earned from 8+ letter word */
        .word-rainbow-popup .rainbow-text {
            font-size: 1.5rem;
            letter-spacing: 3px;
            margin: 10px 0;
        }

        /* Long Word Celebration Popup (7+ letters) */
        .long-word-popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
            color: white;
            padding: 25px 40px;
            border-radius: 20px;
            text-align: center;
            z-index: 1200;
            animation: long-word-popup 2.5s ease-out forwards;
            box-shadow: 0 0 50px rgba(34, 197, 94, 0.7), 0 0 80px rgba(22, 163, 74, 0.4);
        }
        .long-word-popup .long-word-emoji {
            font-size: 3rem;
            margin-bottom: 8px;
        }
        .long-word-popup .long-word-title {
            font-size: 1.8rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
        }
        .long-word-popup .long-word-text {
            font-size: 1.6rem;
            font-weight: 700;
            letter-spacing: 4px;
            margin: 12px 0;
            background: linear-gradient(90deg, #fef08a, #fbbf24, #fef08a);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shimmer-text 1s linear infinite;
        }
        .long-word-popup .long-word-length {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        .long-word-popup .long-word-bonus {
            font-size: 1.3rem;
            font-weight: 700;
            color: #fef08a;
            text-shadow: 0 0 10px rgba(254, 240, 138, 0.8);
        }
        @keyframes long-word-popup {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
            25% { transform: translate(-50%, -50%) scale(1); }
            80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
        }
        @keyframes shimmer-text {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* Rainbow spawn animation on tile - use transform instead to not interfere with background animation */
        .tile.rainbow-spawn .tile-inner {
            animation: rainbow-shift 4s linear infinite, rainbow-spawn-pulse 0.8s ease-out;
        }
        @keyframes rainbow-spawn-pulse {
            0% { transform: scale(0.5); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
            50% { transform: scale(1.3); box-shadow: 0 0 40px rgba(255, 255, 255, 1); }
            100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); }
        }

        @keyframes level-popup {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
            80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
        }

        /* Controls */
        #controls { display: flex; gap: 10px; margin-top: 12px; width: 100%; }
        .control-btn {
            flex: 1; padding: 10px; border: none; border-radius: 8px;
            font-weight: 600; font-size: 0.85rem; cursor: pointer;
            transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 1px;
        }
        .control-btn:active { transform: scale(0.95); }
        #end-game-btn { background: linear-gradient(135deg, #f87171, #dc2626); color: white; }
        #sound-btn { background: rgba(255, 255, 255, 0.1); color: white; flex: 0.5; }

        .shake { animation: shake 0.4s ease; }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-8px); }
            40%, 80% { transform: translateX(8px); }
        }

        /* Game Over */
        #game-over-overlay {
            display: none; position: absolute; inset: 0;
            background: rgba(0, 0, 0, 0.85); z-index: 2000;
            align-items: center; justify-content: center;
        }
        #game-over-overlay.show { display: flex; }

        #game-over-content {
            background: linear-gradient(145deg, #2d2d4a, #1e1e32);
            padding: 25px 20px; border-radius: 16px; text-align: center;
            border: 2px solid #8b5cf6; max-width: 380px; width: 95%;
        }

        .final-score-section {
            margin-bottom: 15px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 12px;
        }

        .stat-cell {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 10px 8px;
        }

        .stat-cell .stat-icon {
            font-size: 1.3rem;
            margin-bottom: 4px;
        }

        .stat-cell .stat-num {
            font-size: 1.6rem;
            font-weight: 700;
            color: #60a5fa;
        }

        .stat-cell .stat-word {
            font-size: 1rem;
            font-weight: 700;
            color: #34d399;
            text-transform: uppercase;
            letter-spacing: 1px;
            word-break: break-all;
        }

        .stat-cell .stat-lbl {
            font-size: 0.65rem;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2px;
        }

        .stat-cell.best-word-cell {
            grid-column: span 1;
        }

        .favorite-word-section {
            margin-bottom: 15px;
            padding: 8px;
            background: rgba(167, 139, 250, 0.1);
            border-radius: 8px;
        }

        .game-over-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .play-again-btn {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 700;
            transition: transform 0.2s;
        }

        .play-again-btn:hover {
            transform: scale(1.05);
        }

        .leaderboard-btn {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 700;
            transition: transform 0.2s;
        }

        .leaderboard-btn:hover {
            transform: scale(1.05);
        }

        /* Virtual Keyboard */
        #virtual-keyboard-tab {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 500;
        }
        #show-keyboard-btn {
            background: rgba(96, 165, 250, 0.2);
            color: #60a5fa;
            border: 1px solid rgba(96, 165, 250, 0.4);
            border-bottom: none;
            padding: 8px 24px;
            border-radius: 12px 12px 0 0;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        #show-keyboard-btn:hover {
            background: rgba(96, 165, 250, 0.3);
        }
        #virtual-keyboard-tab.hidden { display: none; }

        #virtual-keyboard {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, rgba(30, 30, 50, 0.98), rgba(20, 20, 35, 0.99));
            padding: 10px 5px 15px 5px;
            border-top: 2px solid #60a5fa;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
        }
        #virtual-keyboard.hidden { display: none; }

        .vk-row {
            display: flex;
            gap: 4px;
            justify-content: center;
        }
        .vk-key {
            min-width: 32px;
            height: 42px;
            padding: 0 10px;
            border: none;
            border-radius: 6px;
            background: linear-gradient(145deg, #3d3d5c, #2a2a42);
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.1s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        .vk-key:active {
            transform: scale(0.95);
            background: linear-gradient(145deg, #60a5fa, #3b82f6);
        }
        .vk-qu {
            font-size: 0.9rem;
            letter-spacing: -0.05em;
        }
        .vk-special {
            min-width: 60px;
            font-size: 0.8rem;
            background: linear-gradient(145deg, #4a4a6a, #3a3a5a);
        }
        .vk-enter {
            background: linear-gradient(145deg, #22c55e, #16a34a);
            min-width: 80px;
        }
        .vk-controls {
            margin-top: 4px;
        }

        /* Adjust game container when keyboard is visible */
        body.keyboard-visible #game-container {
            padding-bottom: 180px;
        }

        /* Mobile styles - maximize tile size */
        @media (max-width: 600px) {
            /* Contain rotation animation on mobile to prevent horizontal scroll */
            #container_left {
                overflow-x: hidden;
            }

            #game-container {
                padding: 4px;
                max-width: 100%;
                border-radius: 0;
                overflow: hidden;
            }

            #grid-container {
                overflow: hidden;
                padding: 4px;
                border-radius: 8px;
            }

            /* Ensure popups aren't clipped by parent overflow:hidden */
            #popup-overlay {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
            }

            #game-header {
                margin-bottom: 8px;
                padding: 8px 10px;
                border-radius: 8px;
            }

            .stat-box .stat-label {
                font-size: 0.55rem;
            }

            .stat-box .stat-value {
                font-size: 1.1rem;
            }

            #word-display {
                padding: 8px 12px;
                margin-bottom: 6px;
                height: 40px;
            }

            #current-word {
                font-size: 1.3rem;
            }

            #last-word-display {
                padding: 4px 10px;
                margin-bottom: 6px;
                font-size: 0.8rem;
            }

            #controls {
                margin-top: 8px;
            }

            .control-btn {
                padding: 8px;
                font-size: 0.75rem;
            }
        }

        /* Extra small phones */
        @media (max-width: 400px) {
            #game-container {
                padding: 2px;
            }

            #game-header {
                padding: 6px 8px;
                gap: 4px;
            }

            .stat-box .stat-value {
                font-size: 1rem;
            }

            #grid-container {
                padding: 2px;
            }
        }

        /* ===== TUTORIAL STYLES ===== */
        .tutorial-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: tutorial-fade-in 0.3s ease-out;
        }
        @keyframes tutorial-fade-in {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .tutorial-modal {
            background: linear-gradient(145deg, #2d2d4a, #1e1e32);
            border: 2px solid #60a5fa;
            border-radius: 20px;
            padding: 30px 35px;
            max-width: 340px;
            width: 90%;
            text-align: center;
            animation: tutorial-modal-bounce 0.4s ease-out;
            box-shadow: 0 0 40px rgba(96, 165, 250, 0.3);
        }
        @keyframes tutorial-modal-bounce {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }

        .tutorial-modal h2 {
            color: #60a5fa;
            font-size: 1.5rem;
            margin: 0 0 15px 0;
        }

        .tutorial-modal p {
            color: #cbd5e1;
            font-size: 0.95rem;
            line-height: 1.5;
            margin: 0 0 20px 0;
        }

        .tutorial-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .tutorial-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tutorial-btn-primary {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: white;
        }
        .tutorial-btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
        }

        .tutorial-btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .tutorial-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .tutorial-btn-end {
            background: transparent;
            color: #94a3b8;
            border: none;
            font-size: 0.8rem;
            padding: 8px;
            margin-top: 5px;
        }
        .tutorial-btn-end:hover {
            background: transparent;
            color: #f87171;
            transform: none;
            box-shadow: none;
        }

        /* Tutorial step tooltip */
        .tutorial-tooltip {
            position: absolute;
            background: linear-gradient(145deg, #1e40af, #1d4ed8);
            border: 2px solid #60a5fa;
            border-radius: 12px;
            padding: 15px 20px;
            max-width: 280px;
            z-index: 3100;
            animation: tooltip-appear 0.3s ease-out;
            box-shadow: 0 4px 20px rgba(96, 165, 250, 0.4);
        }
        @keyframes tooltip-appear {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .tutorial-tooltip::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 10px solid transparent;
        }
        .tutorial-tooltip.arrow-top::after {
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            border-bottom-color: #60a5fa;
        }
        .tutorial-tooltip.arrow-bottom::after {
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            border-top-color: #60a5fa;
        }
        .tutorial-tooltip.arrow-left::after {
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            border-right-color: #60a5fa;
        }

        .tutorial-tooltip h3 {
            color: #fbbf24;
            font-size: 1.1rem;
            margin: 0 0 8px 0;
        }

        .tutorial-tooltip p {
            color: #e0f2fe;
            font-size: 0.9rem;
            line-height: 1.4;
            margin: 0 0 12px 0;
        }

        .tutorial-tooltip .tutorial-btn {
            width: 100%;
            padding: 10px;
            font-size: 0.85rem;
        }

        /* Tutorial highlight pulse on elements */
        .tutorial-highlight {
            animation: tutorial-pulse 1.5s ease-in-out infinite;
            position: relative;
            z-index: 3050;
        }
        @keyframes tutorial-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7); }
            50% { box-shadow: 0 0 0 10px rgba(96, 165, 250, 0); }
        }

        /* Highlighted tile during tile type explanation - appears above overlay */
        .tutorial-tile-highlight {
            z-index: 3150 !important;
            animation: tutorial-tile-glow 1s ease-in-out infinite;
        }
        @keyframes tutorial-tile-glow {
            0%, 100% {
                filter: brightness(1.2) drop-shadow(0 0 8px rgba(96, 165, 250, 0.8));
            }
            50% {
                filter: brightness(1.4) drop-shadow(0 0 15px rgba(96, 165, 250, 1));
            }
        }

        /* Highlighted UI element (like moves counter) */
        .tutorial-ui-highlight {
            position: relative;
            z-index: 3150 !important;
            background: rgba(96, 165, 250, 0.3) !important;
            border-radius: 8px;
            animation: tutorial-ui-glow 1s ease-in-out infinite;
        }
        @keyframes tutorial-ui-glow {
            0%, 100% {
                box-shadow: 0 0 8px rgba(96, 165, 250, 0.8), inset 0 0 8px rgba(96, 165, 250, 0.3);
            }
            50% {
                box-shadow: 0 0 15px rgba(96, 165, 250, 1), inset 0 0 12px rgba(96, 165, 250, 0.5);
            }
        }

        /* Tutorial overlay for tile explanations - semi-transparent to show highlighted tile */
        .tutorial-overlay.tutorial-tile-explain {
            background: rgba(0, 0, 0, 0.5);
        }

        /* Tile explanation modal with arrows pointing to the tile */
        .tile-explanation-modal.arrow-top-point::before {
            content: '';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-bottom-color: #2d2d4a;
            border-top: none;
        }
        .tile-explanation-modal.arrow-bottom-point::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-top-color: #2d2d4a;
            border-bottom: none;
        }
        .tile-explanation-modal.arrow-left-point::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-right-color: #2d2d4a;
            border-left: none;
        }
        .tile-explanation-modal.arrow-right-point::after {
            content: '';
            position: absolute;
            right: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-left-color: #2d2d4a;
            border-right: none;
        }

        /* Tutorial dim overlay with cutout */
        .tutorial-dim {
            position: absolute;
            inset: 0;
            z-index: 3000;
            pointer-events: none;
        }
        .tutorial-dim::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
        }

        /* Tile type explanation modal */
        .tile-explanation-modal {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(145deg, #2d2d4a, #1e1e32);
            border-radius: 16px;
            padding: 25px 30px;
            max-width: 320px;
            width: 85%;
            text-align: center;
            z-index: 3200;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            /* Start hidden until positioned */
            opacity: 0;
            visibility: hidden;
        }
        .tile-explanation-modal.positioned {
            visibility: visible;
            animation: tile-explain-pop 0.4s ease-out forwards;
        }
        @keyframes tile-explain-pop {
            0% { opacity: 0; transform: scale(0.5); }
            70% { opacity: 1; transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }

        .tile-explanation-modal .tile-demo {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .tile-explanation-modal h3 {
            color: #fbbf24;
            font-size: 1.3rem;
            margin: 0 0 10px 0;
        }

        .tile-explanation-modal p {
            color: #cbd5e1;
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0 0 15px 0;
        }

        .tile-explanation-modal .tutorial-btn {
            padding: 10px 30px;
        }

        /* Demo tile styles for explanation modals */
        .tile-demo.demo-leveler {
            background: linear-gradient(145deg, #1e3a5f, #0f2744);
            border: 2px solid #38bdf8;
            color: #7dd3fc;
        }
        .tile-demo.demo-bonus {
            background: linear-gradient(145deg, #4a3d6a, #352a52);
            border: 2px solid #a78bfa;
            color: #e9d5ff;
        }
        .tile-demo.demo-horizontal {
            background: repeating-linear-gradient(0deg, #166534 0px, #166534 4px, #14532d 4px, #14532d 8px);
            border: 2px solid #22c55e;
            color: #bbf7d0;
        }
        .tile-demo.demo-vertical {
            background: repeating-linear-gradient(90deg, #166534 0px, #166534 4px, #14532d 4px, #14532d 8px);
            border: 2px solid #22c55e;
            color: #bbf7d0;
        }
        .tile-demo.demo-bomb {
            background: linear-gradient(145deg, #f97316, #c2410c);
            border: 2px solid #fdba74;
            color: #fff;
        }
        .tile-demo.demo-star {
            background: radial-gradient(circle at center, #fef08a 0%, #fde047 40%, #ca8a04 100%);
            border: 2px solid #fef08a;
            color: #422006;
        }
        .tile-demo.demo-rainbow {
            background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ec4899);
            border: 3px solid #fff;
            color: #fff;
            text-shadow: 0 0 3px #000;
        }
        .tile-demo.demo-blank {
            background: linear-gradient(145deg, #3d3d5c, #2a2a42);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
        }
        .tile-demo.demo-rotate {
            background: linear-gradient(145deg, #1e3a5f, #1d4ed8);
            border: 2px solid #60a5fa;
            color: #93c5fd;
        }
        .tile-demo.demo-shuffle {
            background: linear-gradient(145deg, #065f46, #064e3b);
            border: 2px solid #34d399;
            color: #a7f3d0;
        }

        /* ===== START GAME MODAL ===== */
        #start-game-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 5000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: start-fade-in 0.3s ease-out;
        }
        #start-game-overlay.hidden { display: none; }
        @keyframes start-fade-in {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .start-game-modal {
            background: linear-gradient(145deg, #2d2d4a, #1e1e32);
            border: 2px solid #8b5cf6;
            border-radius: 24px;
            padding: 40px 50px;
            text-align: center;
            max-width: 360px;
            width: 90%;
            animation: start-modal-pop 0.5s ease-out;
            box-shadow: 0 0 60px rgba(139, 92, 246, 0.4);
        }
        @keyframes start-modal-pop {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }

        .start-game-modal h1 {
            font-size: 2.5rem;
            background: linear-gradient(90deg, #60a5fa, #a78bfa, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0 0 20px 0;
            letter-spacing: 3px;
            line-height: 1.3;
            padding: 5px 0;
        }

        .start-game-modal p {
            color: #94a3b8;
            font-size: 0.95rem;
            margin: 0 0 30px 0;
            line-height: 1.5;
        }

        .start-game-btn {
            display: inline-block;
            padding: 16px 50px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.3rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
        }
        .start-game-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 30px rgba(34, 197, 94, 0.6);
        }
        .start-game-btn:active {
            transform: scale(0.98);
        }
        .start-game-btn.hidden {
            display: none;
        }

        /* Loading state */
        .start-loading {
            text-align: center;
        }
        .start-loading.hidden {
            display: none;
        }
        .loading-text {
            color: #94a3b8;
            font-size: 1.1rem;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }
        .loading-bar-container {
            width: 200px;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
            margin: 0 auto;
        }
        .loading-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #22c55e, #16a34a);
            border-radius: 3px;
            transition: width 0.3s ease-out;
        }