/* モバイル対応 */
@media (max-width: 768px) {
    .ore-icon-blink {
        animation-duration: 0.4s;
    }
    
    .ore-pulse {
        animation-duration: 1.5s;
    }
    
    @keyframes oreBlink {
        0% {
            transform: scale(1);
            color: inherit;
        }
        50% {
            transform: scale(1.15);
            color: #FFD700;
        }
        100% {
            transform: scale(1);
            color: inherit;
        }
    }
    
    .game-area {
        height: 65vh; /* ビューポート高の65%を使用 */
        max-height: 500px;
        min-height: 400px;
    }
    
    .game-area-stats {
        padding: 8px 12px;
        min-width: 130px;
    }

    .game-area-stat {
        font-size: 0.8rem;
    }

    #livesCount {
        font-size: 1em;
    }

    .title-container {
        padding: 15px;
        max-width: 95%;
    }

    .game-title {
        font-size: 2.5rem;
        margin-bottom: 8px;
    }

    .game-subtitle {
        font-size: 1.3rem;
        margin-bottom: 25px;
        padding: 0 5px;
    }

    .menu-buttons {
        gap: 12px;
        margin: 25px 0;
    }

    .menu-btn {
        padding: 12px 25px;
        font-size: 1.1rem;
    }

    .screen-container {
        padding: 20px 15px;
        margin: 15px;
        max-width: 90%;
    }

    #livesDisplay {
        font-size: 1em;
    }

    #livesCount {
        font-size: 1.1em;
        letter-spacing: 1px;
    }
    .controls {
        gap: 10px;
        max-width: 100%;
    }
    
    .game-over-controls,
    .game-controls {
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .game-over-controls button,
    .game-controls button {
        min-width: 120px;
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}

/* 小さな画面対応 */
@media (max-width: 480px) {
    .game-area-stats {
        padding: 5px 8px;
        min-width: 110px;
    }

    .game-area-stat {
        font-size: 0.7rem;
    }

    #gameScreen .container {
        padding: 10px 5px;
    }

    .title-container {
        padding: 10px;
        max-width: 100%;
    }

    .game-area {
        height: 630px;
    }

    .game-stats div {
        min-width: 100%;
    }

    .game-title {
        font-size: 2rem;
        margin-bottom: 5px;
    }

    .game-subtitle {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .menu-buttons {
        gap: 10px;
        margin: 20px 0;
    }

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

    .controls button {
        min-width: 100px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .quick-instruction {
        padding: 15px;
        margin: 0 10px;
    }

    .quick-instruction p {
        font-size: 0.9rem;
        margin: 8px 0;
    }
    
    .game-over-controls,
    .game-controls {
        gap: 8px;
    }
    
    .game-over-controls button,
    .game-controls button {
        min-width: 100px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* iPhoneサイズ別最適化 */
/* iPhone 14 Pro Max / 15 Pro Max (430px) */
@media (max-width: 430px) {
    .game-area {
        height: 70vh; /* より広いゲームエリア */
        max-height: 550px;
        min-height: 450px;
    }
}

/* iPhone 12-15 (390px) */
@media (max-width: 390px) {
    .game-area {
        height: 68vh;
        max-height: 520px;
        min-height: 430px;
    }
}

/* iPhone SE / 小型モデル (375px以下) */
@media (max-width: 375px) {
    .game-area {
        height: 65vh;
        max-height: 480px;
        min-height: 400px;
    }
    
    .game-title {
        font-size: 2rem;
    }
    
    .game-subtitle {
        font-size: 1.1rem;
    }
}

/* 非常に小さな画面向け */
@media (max-width: 320px) {
    .game-area {
        height: 60vh;
        max-height: 420px;
        min-height: 350px;
    }
}

/* 縦長画面対応 */
@media (max-height: 700px) {
    .game-area {
        height: 75vh; /* 縦長画面ではより高く */
        max-height: 450px;
        min-height: 380px;
    }

    #gameScreen .container {
        padding: 5px;
    }

    .title-container {
        padding: 10px;
    }

    .game-title {
        font-size: 2.2rem;
        margin-bottom: 5px;
    }

    .game-subtitle {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .menu-buttons {
        margin: 20px 0;
        gap: 10px;
    }
}

/* 横長画面対応 */
@media (min-width: 1200px) and (min-height: 800px) {
    .title-container {
        max-width: 800px;
        padding: 40px;
    }
}

/* タブレット向けのゲームエリアサイズ調整 */
@media (min-width: 769px) and (max-width: 1024px) {
    .game-area {
        height: 70vh;
        max-height: 600px;
        min-height: 500px;
    }
}

/* iPhoneの向きに応じた調整 */
@media (max-width: 768px) and (orientation: landscape) {
    .game-area {
        height: 80vh; /* 横向きではより高く */
        max-height: 400px;
    }
    
    .title-container {
        padding: 10px;
    }
    
    .menu-buttons {
        margin: 15px 0;
        gap: 8px;
    }
    
    .menu-btn {
        padding: 8px 15px;
        font-size: 1rem;
    }
}

/* 追加: 非常に小さな画面向け */
@media (max-width: 360px) {
    .game-area {
        height: 420px; /* 最小限の高さを確保 */
    }
}

/* 安全エリアの考慮 (iPhone X以降のノッチ対応) */
@supports(padding: max(0px)) {
    .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    
    #gameScreen .container {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* 減光モード対応 */
@media (prefers-reduced-motion: reduce) {
    .ore-icon-blink,
    .ore-pulse,
    .ore-blink-common,
    .ore-blink-rare,
    .ore-blink-epic {
        animation: none;
        transform: none;
    }
    
    .ore-icon-blink {
        color: #FFD700 !important;
    }
}