/* =========================================
   Mobile / Responsive Styles
   ========================================= */
@media (max-width: 768px) {

    /* スクロール禁止 */
    html,
    body {
        overflow: hidden;
        height: 100%;
        height: 100dvh;
    }

    /* ゲームコンテナ: 画面に合わせて縮小 */
    /* ゲームコンテナ: 画面に合わせて縮小 */
    #game-container {
        width: 100%;
        height: auto;
        /* Constrain by viewport with some margin */
        max-width: 85vw;
        max-height: 85vh;
        max-height: 85dvh;
        /* Maintain aspect ratio */
        aspect-ratio: 400 / 515;
        /* Center it */
        margin: auto;
    }

    /* Canvasラッパーもそれに合わせる */
    #canvas-wrapper {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        /* 背景画像が表示されるように高さ確保 */
    }

    /* Canvas自体のサイズをラッパーに合わせる */
    #canvas-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    /* SCORE: 左上へ */
    #score-container {
        top: 10px;
        left: 10px;
        transform: scale(0.8);
        transform-origin: top left;
        padding: 5px 15px;
        z-index: 3000;
        /* Reset fixed positioning relative to viewport */
        position: fixed;
    }

    /* NEXT: 右上へ */
    #next-fruit-display {
        top: 10px;
        left: auto;
        /* PC用の左位置をリセット */
        right: 10px;
        transform: scale(0.8);
        /* 1.5倍だと大きすぎるので調整 */
        transform-origin: top right;
        z-index: 3000;
        position: fixed;
    }

    #next-fruit-preview {
        width: 80px;
        height: 80px;
    }

    /* 進化ルート: スマホでは場所を取るので非表示 */
    #evolution-container {
        display: none !important;
    }

    /* 設定ボタン: 右下へ */
    #settings-btn {
        top: auto;
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* タイトル画面の調整 */
    #title-image {
        width: 80%;
        max-width: 300px;
    }

    #title-menu-buttons {
        gap: 10px;
    }

    .menu-btn {
        width: 160px;
        font-size: 1rem;
        padding: 10px;
    }

    .sub-menu-row {
        flex-direction: column;
        gap: 10px;
    }

    /* カスタマイズ画面 */
    .customize-content {
        width: 95%;
        height: 90%;
        padding: 10px;
    }

    .balls-grid {
        gap: 5px;
    }

    .deck-item,
    .pool-item {
        width: 35px;
        height: 35px;
    }

    .deck-item img,
    .pool-item img {
        width: 25px;
        height: 25px;
    }

    .pool-area {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding: 5px;
        justify-items: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* 追加: 選択状態のスタイル (全デバイス共通) */
.deck-item.selected,
.pool-item.selected {
    border-color: #FF0000;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    background-color: #FFF0F0;
    transform: scale(1.1);
}