/* 响应式设计 */

/* 大屏幕 (1200px以上) */
@media (min-width: 1200px) {
    .container {
        max-width: 700px;
    }

    .game-header h1 {
        font-size: 3rem;
    }

    .game-board.size-3 {
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        width: 330px;
        height: 330px;
    }

    .game-board.size-4 {
        grid-template-columns: repeat(4, 85px);
        grid-template-rows: repeat(4, 85px);
        width: 365px;
        height: 365px;
    }

    .game-board.size-5 {
        grid-template-columns: repeat(5, 75px);
        grid-template-rows: repeat(5, 75px);
        width: 395px;
        height: 395px;
    }

    .tile {
        font-size: 1.8rem;
    }

    .size-4 .tile {
        font-size: 1.6rem;
    }

    .size-5 .tile {
        font-size: 1.4rem;
    }

    .size-6 .tile {
        font-size: 1.2rem;
    }
}

/* 中等屏幕 (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        max-width: 600px;
        padding: 25px;
    }

    .game-header h1 {
        font-size: 2.2rem;
    }

    .game-info {
        gap: 12px;
    }

    .control-panel {
        gap: 12px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
}

/* 小屏幕 (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        padding: 20px;
        width: 95%;
    }

    .game-header {
        margin-bottom: 25px;
    }

    .game-header h1 {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .game-info {
        gap: 8px;
        justify-content: center;
    }

    .info-item {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .game-board.size-3 {
        grid-template-columns: repeat(3, 70px);
        grid-template-rows: repeat(3, 70px);
        width: 235px;
        height: 235px;
    }

    .game-board.size-4 {
        grid-template-columns: repeat(4, 60px);
        grid-template-rows: repeat(4, 60px);
        width: 255px;
        height: 255px;
    }

    .game-board.size-5 {
        grid-template-columns: repeat(5, 50px);
        grid-template-rows: repeat(5, 50px);
        width: 265px;
        height: 265px;
    }

    .game-board.size-6 {
        grid-template-columns: repeat(6, 42px);
        grid-template-rows: repeat(6, 42px);
        width: 267px;
        height: 267px;
    }

    .tile {
        font-size: 1.3rem;
    }

    .size-4 .tile {
        font-size: 1.2rem;
    }

    .size-5 .tile {
        font-size: 1rem;
    }

    .size-6 .tile {
        font-size: 0.9rem;
    }

    .control-panel {
        gap: 10px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .modal-content {
        width: 95%;
    }

    .victory-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .victory-buttons .btn {
        width: 100%;
    }
}

/* 超小屏幕 (575px以下) */
@media (max-width: 575px) {
    .container {
        padding: 15px;
        width: 98%;
        border-radius: 15px;
    }

    .game-header {
        margin-bottom: 20px;
    }

    .game-header h1 {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .game-info {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .info-item {
        padding: 6px 10px;
        font-size: 0.85rem;
        min-width: 120px;
        text-align: center;
    }

    .game-main {
        gap: 20px;
    }

    .game-board-container {
        padding: 10px;
    }

    .game-board {
        padding: 10px;
    }

    .game-board.size-3 {
        grid-template-columns: repeat(3, 60px);
        grid-template-rows: repeat(3, 60px);
        width: 200px;
        height: 200px;
    }

    .game-board.size-4 {
        grid-template-columns: repeat(4, 50px);
        grid-template-rows: repeat(4, 50px);
        width: 215px;
        height: 215px;
    }

    .game-board.size-5 {
        grid-template-columns: repeat(5, 42px);
        grid-template-rows: repeat(5, 42px);
        width: 225px;
        height: 225px;
    }

    .game-board.size-6 {
        grid-template-columns: repeat(6, 36px);
        grid-template-rows: repeat(6, 36px);
        width: 231px;
        height: 231px;
    }

    .tile {
        font-size: 1.1rem;
        border-radius: 6px;
    }

    .size-4 .tile {
        font-size: 1rem;
    }

    .size-5 .tile {
        font-size: 0.9rem;
    }

    .size-6 .tile {
        font-size: 0.8rem;
    }

    .control-panel {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .btn {
        width: 100%;
        padding: 12px;
        font-size: 0.9rem;
    }

    .game-status {
        padding: 12px;
        font-size: 0.95rem;
    }

    .modal-content {
        width: 95%;
        margin: 10px;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 1.3rem;
    }

    .modal-body {
        padding: 15px;
    }

    .ranking-tabs {
        margin-bottom: 15px;
    }

    .tab-btn {
        padding: 10px;
        font-size: 0.9rem;
    }

    .ranking-item {
        padding: 12px;
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }

    .victory-stats p {
        font-size: 1.1rem;
        margin: 8px 0;
    }

    .victory-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .victory-buttons .btn {
        width: 100%;
    }
}

/* 横屏适配 */
@media (max-height: 600px) and (orientation: landscape) {
    .container {
        max-height: 90vh;
        overflow-y: auto;
        padding: 15px;
    }

    .game-header {
        margin-bottom: 15px;
    }

    .game-header h1 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .game-info {
        gap: 8px;
    }

    .info-item {
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    .game-main {
        gap: 15px;
    }

    .game-board-container {
        padding: 10px;
    }

    .control-panel {
        gap: 8px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .modal-content {
        max-height: 85vh;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .tile {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.1),
            inset 0 0.5px 0 rgba(255, 255, 255, 0.6);
    }

    .game-board {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {

    .info-item,
    .game-status,
    .ranking-item {
        background: rgba(255, 255, 255, 0.9);
    }

    .tile {
        background: linear-gradient(145deg, #f7fafc, #edf2f7);
    }

    .modal-content {
        background: #f7fafc;
    }
}