/* responsive.css（レスポンシブスタイル）*/

/* タブレット用スタイル */
@media (max-width: 768px) {
    .screen-content {
        padding: 30px 20px;
    }

    .screen-content h1 {
        font-size: 2.5em;
    }

    .screen-content h2 {
        font-size: 2em;
    }

    #game-ui {
        max-width: 90vw;
        padding: 8px 12px;
    }

    #game-board {
        width: 90vw;
        height: 120vw; /* 縦横比 3:4 を維持 */
        max-height: 80vh;
    }

    #score-display,
    #lives-display,
    #level-display {
        font-size: 0.9em;
    }

    #score,
    #lives,
    #level {
        font-size: 1em;
    }

    #paddle {
        width: 50px; /* パドルは小さく維持 */
        height: 10px;
    }

    #ball {
        width: 14px; /* タブレットでも少し小さく */
        height: 14px;
    }

    #combo-display {
        max-width: 90vw;
        padding: 5px 12px;
        font-size: 0.8em;
        gap: 15px;
    }

    #combo-count,
    #combo-multiplier {
        font-size: 0.85em;
    }

    #stats-display {
        gap: 15px;
    }

    .stat-item {
        font-size: 0.85em;
    }
}

/* スマホ用スタイル */
@media (max-width: 480px) {
    .screen-content {
        padding: 20px 15px;
    }

    .screen-content h1 {
        font-size: 2em;
        margin-bottom: 20px;
    }

    .screen-content h2 {
        font-size: 1.8em;
    }

    .btn-primary,
    .btn-secondary {
        padding: 10px 20px;
        font-size: 14px;
    }

    #game-ui {
        max-width: 95vw;
        padding: 6px 10px;
    }

    #game-board {
        width: 95vw;
        height: 126vw; /* 縦横比維持 */
        max-height: 75vh;
    }

    #score-display,
    #lives-display,
    #level-display {
        font-size: 0.85em;
        flex: 1; /* 均等な幅で配置 */
        min-width: 30%; /* 最小幅設定 */
        text-align: center;
    }

    #score,
    #lives,
    #level {
        font-size: 0.95em;
    }

    .btn-small {
        padding: 4px 8px;
        font-size: 0.75em;
        margin: 2px;
    }

    #paddle {
        width: 40px; /* パドルは小さく維持 */
        height: 8px;
    }

    #ball {
        width: 12px; /* スマホでも少し小さく */
        height: 12px;
    }

    .instructions p {
        font-size: 1em;
    }

    #combo-display {
        max-width: 95vw;
        padding: 4px 10px;
        font-size: 0.75em;
        gap: 10px;
        flex-wrap: wrap;
    }

    #combo-count,
    #combo-multiplier {
        font-size: 0.8em;
    }

    #stats-display {
        gap: 10px;
    }

    .stat-item {
        font-size: 0.8em;
        min-width: auto;
    }

    .stat-value {
        min-width: 25px;
        font-size: 0.9em;
    }
}

/* 縦長画面用 */
@media (max-height: 700px) {
    #game-ui {
        margin-bottom: 10px;
        padding: 6px 12px;
    }
}

@media (max-height: 800px) {
    #game-board {
        height: 70vh;
        max-height: 70vh;
    }
}

@media (max-height: 600px) {
    #game-board {
        height: 80vh;
        max-height: 80vh;
    }

    .screen-content {
        padding: 20px;
    }
}

/* 非常に狭い画面用 */
@media (max-width: 360px) {
    #game-ui {
        font-size: 0.75em;
    }

    #score-display,
    #lives-display,
    #level-display {
        min-width: 28%;
        font-size: 0.8em;
    }
    #stats-display {
        gap: 8px;
    }

    .stat-item {
        font-size: 0.75em;
    }
}