body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            background-color: #faf8ef;
        }

        hr {
            width: 500px;
        }

        #board {
            width: 400px;
            height: 400px;
            background-color: #cdc1b5;
            border: 6px solid #bbada0;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            border-radius: 6px;
            position: relative;
        }

        .tile {
            width: 90px;
            height: 90px;
            border: 5px solid #bbada0;
            font-size: 40px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
            transition: all 0.15s ease-in-out;
        }

        /* Pop-in animation for new tiles */
        @keyframes pop-in {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .tile.new {
            animation: pop-in 0.2s ease-in-out;
        }

        /* Merge animation */
        @keyframes merge {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.15);
            }
            100% {
                transform: scale(1);
            }
        }

        .tile.merged {
            animation: merge 0.2s ease-in-out;
        }

        /* Score animation */
        @keyframes score-bump {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        #score {
            display: inline-block;
            transition: color 0.3s;
        }

        #score.bump {
            animation: score-bump 0.3s ease-in-out;
            color: #f65d3b;
        }

        .x2 {
            background-color: #eee4da;
            color: #727371;
        }

        .x4 {
            background-color: #ece0ca;
            color: #727371;
        }

        .x8 {
            background-color: #f4b17a;
            color: white;
        }

        .x16 {
            background-color: #f59575;
            color: white;
        }

        .x32 {
            background-color: #f57c5f;
            color: white;
        }

        .x64 {
            background-color: #f65d3b;
            color: white;
        }

        .x128 {
            background-color: #edce71;
            color: white;
            font-size: 35px;
        }

        .x256 {
            background-color: #edcc63;
            color: white;
            font-size: 35px;
        }

        .x512 {
            background-color: #edc651;
            color: white;
            font-size: 35px;
        }

        .x1024 {
            background-color: #ecc744;
            color: white;
            font-size: 30px;
        }

        .x2048 {
            background-color: #ecc230;
            color: white;
            font-size: 30px;
        }

        .x4096 {
            background-color: #fe3d3d;
            color: white;
            font-size: 30px;
        }

        .x8192 {
            background-color: #ff2020;
            color: white;
            font-size: 30px;
        }

        h1 {
            color: #776e65;
            font-size: 60px;
            margin: 20px 0 10px;
        }

        h2 {
            color: #776e65;
        }