body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .game-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            width: 100%;
            max-width: 90%;
            margin: 0 auto;
        }

        #game-board,
        #next-piece-preview {
            border: 10px solid #fff;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            background-color: #000;
        }

        .controls {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-gap: 10px;
            width: 60%;
            min-width: 450px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        /* 按钮在第一行 */
        .controls button {
            grid-row: 1;
            height: auto;
            font-size: 1.5em;
        }

        /* p 元素在第二行 */
        .controls .game-info {
            grid-row: 2;
            grid-column: 1/5;
        }
        .game-info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
        }

        /* canvas 在最右侧占据两行两列 */
        #next-piece-preview {
            width: 100%;
            max-width: 120px;
            position: absolute;
            grid-row: 1 / span 2;
            grid-column: 5 / span 2;
        }

        /* 游戏结束界面样式 */
        #game-over-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        #game-over-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }

        /* 用户名输入框样式 */
        #username-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1001;
        }

        #username-content {
            box-sizing: border-box;
            background-color: white;
            padding: 50px;
            border-radius: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        /* 排行榜界面样式 */
        #leaderboard-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1002;
            overflow-y:auto ;
        }

        #leaderboard-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 突出显示当前局排名 */
        .current-rank {
            background-color: #ffff99;
        }

        /* 手机端控制按钮样式 */
        .mobile-controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }

        .mobile-controls button {
            width: 60px;
            height: 60px;
            font-size: 24px;
        }

        @media (min-width: 768px) {
            .controls {
                grid-template-columns: repeat(9, 1fr);
                grid-template-rows: 1fr;
            }
    
            /* 按钮在第一行 */
            .controls button {
                grid-row: 1;
                font-size: 1em;
            }
    
            /* p 元素在第二行 */
            .controls .game-info{
                grid-row: 1;
                font-size: 1rem;
            }
    
            /* canvas 在最右侧占据两行两列 */
            #next-piece-preview {
                width: 120px;
                grid-row: 1 / span 1;
                grid-column: 9 / span 1;

            }
        }