* {
                box-sizing: border-box;
                user-select: none;
            }

            body {
                font-family: "Inter", sans-serif;
                margin: 0;
                background: #fefefe;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                height: 100vh;
                padding-top: 0;
                overflow-x: hidden;
            }

            h1 {
                font-size: 2rem;
                background: linear-gradient(90deg, #4caf50, #81c784);
                color: white;
                padding: 10px 20px;
                border-radius: 15px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                margin-bottom: 15px;
                letter-spacing: 1px;
            }

            #timer {
                font-size: 1.2rem;
                background: #eee;
                padding: 8px 16px;
                border-radius: 20px;
                color: #222;
                font-weight: bold;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                margin-bottom: 20px;
            }

            #game-container {
                position: relative;
                width: 320px;
                max-width: 90vw;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            #grid {
                display: grid;
                grid-template-columns: repeat(5, 60px);
                gap: 10px;
                justify-content: center;
            }

            .cell {
                width: 60px;
                height: 60px;
                background: white;
                border: 2px solid #ccc;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
                font-weight: bold;
                border-radius: 10px;
                transition: background 0.3s, transform 0.2s, color 0.3s;
                cursor: pointer;
            }

            .cell.clicked {
                animation: flashGreenSmooth 0.9s ease-in-out;
            }

            @keyframes flashGreenSmooth {
                0% {
                    background-color: #4caf50;
                    color: white;
                    transform: scale(1);
                }
                30% {
                    background-color: #4caf50;
                    color: white;
                    transform: scale(1.03);
                }
                70% {
                    background-color: #e6ffe6;
                    color: black;
                    transform: scale(1);
                }
                100% {
                    background-color: white;
                    color: black;
                    transform: scale(1);
                }
            }

            .cell.spawned {
                animation: fadeInNumber 0.25s ease;
            }

            @keyframes fadeInNumber {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            .cell.correct {
                background: #4caf50;
                color: white;
                pointer-events: none;
            }

            .cell.final-correct {
                animation: fadeGreenSlow 1s ease forwards;
            }

            @keyframes fadeGreenSlow {
                0% {
                    background-color: white;
                    color: black;
                }
                100% {
                    background-color: #4caf50;
                    color: white;
                }
            }

            #start-btn {
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 12px 24px;
                font-size: 1rem;
                background: #333;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                z-index: 2;
            }

            #restart-btn,
            #share-btn {
                margin-top: 10px;
                transform: none;
                position: static;
                padding: 12px 24px;
                font-size: 1rem;
                background: #333;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                z-index: 2;
            }

            #message {
                margin-top: 1rem;
                font-weight: bold;
                font-size: 1rem;
                color: #333;
            }

            #buttons {
                margin-top: 1rem;
                display: none;
                flex-direction: row;
                align-items: center;
                gap: 10px;
            }

            #shareText {
                font-size: 0.9rem;
                color: #777;
                word-break: break-word;
                margin-top: 0.5rem;
                text-align: center;
            }

            .firework {
                position: absolute;
                top: 20%;
                left: 50%;
                transform: translateX(-50%);
                width: 10px;
                height: 10px;
                background: transparent;
                border-radius: 50%;
                animation: explode 1s ease-out forwards;
                pointer-events: none;
            }

            @keyframes explode {
                0% {
                    box-shadow: 0 0 #ff0, 0 0 #f00, 0 0 #0ff;
                    opacity: 1;
                }
                100% {
                    box-shadow:
                        30px 0 #ff0,
                        -30px 0 #f0f,
                        0 30px #0ff,
                        0 -30px #f00,
                        20px 20px #0f0,
                        -20px -20px #00f;
                    opacity: 0;
                    transform: scale(2);
                }
            }