/* レスポンシブデザイン */
@media (max-width: 768px) {
    .item-icon {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }

    .item-collect-text {
        font-size: 1rem;
    }

    .item-cooldown {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

/* ハイコントラストモード対応 */
@media (prefers-contrast: high) {
    .shield-icon {
        border: 3px solid #00ffff;
        background: #0066cc;
    }

    .wormhole-icon {
        border: 3px solid #da70d6;
        background: #8a2be2;
    }

    .item-spawn-warning {
        border: 4px dashed #ffff00;
    }
}

/* 減光モード対応 */
@media (prefers-reduced-motion: reduce) {
    .shield-active,
    .wormhole-active,
    .item-collect-text,
    .cooldown-active,
    .item-spawn-warning {
        animation: none;
    }

    .shield-effect,
    .wormhole-effect {
        transition: none;
    }
}

/* ================================================
   燃料表示レスポンシブスタイル
   ================================================ */

/* タブレット (768px以下) */
@media (max-width: 768px) {
    .fuel-display {
        padding: 5px 10px;
        gap: 6px;
        min-width: 110px;
        border-radius: 20px;
    }
    
    .fuel-icon {
        font-size: 1.1em;
    }
    
    .fuel-bar-container {
        min-width: 60px;
    }
    
    .fuel-bar {
        height: 8px;
        border-radius: 4px;
    }
    
    .fuel-fill {
        border-radius: 3px;
    }
    
    .fuel-percent {
        font-size: 0.85em;
        min-width: 35px;
    }
}

/* モバイル (480px以下) */
@media (max-width: 480px) {
    .fuel-display {
        padding: 4px 8px;
        gap: 5px;
        min-width: 100px;
        border-radius: 18px;
        border-width: 1px;
    }
    
    .fuel-icon {
        font-size: 1em;
    }
    
    .fuel-bar-container {
        min-width: 50px;
    }
    
    .fuel-bar {
        height: 6px;
        border-radius: 3px;
    }
    
    .fuel-fill {
        border-radius: 2px;
    }
    
    .fuel-percent {
        font-size: 0.8em;
        min-width: 30px;
    }
    
    /* モバイルではアニメーションを軽量化 */
    .fuel-blink {
        animation: fuelBlinkMobile 1.5s infinite;
    }
    
    @keyframes fuelBlinkMobile {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
}

/* 超小型モバイル (320px以下) */
@media (max-width: 320px) {
    .fuel-display {
        padding: 3px 6px;
        gap: 4px;
        min-width: 90px;
        border-radius: 15px;
    }
    
    .fuel-bar-container {
        min-width: 40px;
    }
    
    .fuel-bar {
        height: 5px;
    }
    
    .fuel-percent {
        font-size: 0.75em;
        min-width: 25px;
    }
    
    .fuel-icon {
        font-size: 0.9em;
    }
}

/* 横向きモバイル (ランドスケープ) */
@media (max-height: 500px) and (orientation: landscape) {
    .fuel-display {
        padding: 3px 8px;
        min-width: 100px;
    }
    
    .fuel-bar {
        height: 6px;
    }
    
    .fuel-percent {
        font-size: 0.8em;
    }
}

/* 高解像度ディスプレイ */
@media (min-resolution: 192dpi) {
    .fuel-display {
        border-width: 1.5px;
    }
    
    .fuel-bar {
        border-width: 0.5px;
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .fuel-display {
        background: rgba(0, 5, 10, 0.9);
    }
    
    .fuel-display.fuel-warning {
        background: rgba(30, 20, 0, 0.9);
    }
    
    .fuel-display.fuel-critical {
        background: rgba(30, 0, 0, 0.9);
    }
}

/* コントラストモード対応 */
@media (prefers-contrast: high) {
    .fuel-display {
        border-color: #ffffff;
        background: #000000;
    }
    
    .fuel-display.fuel-warning {
        border-color: #ffff00;
        background: #333300;
    }
    
    .fuel-display.fuel-critical {
        border-color: #ff0000;
        background: #330000;
    }
}

/* アニメーション無効化設定対応 */
@media (prefers-reduced-motion: reduce) {
    .fuel-display,
    .fuel-fill,
    .fuel-icon,
    .fuel-percent {
        transition: none;
        animation: none;
    }
    
    .fuel-blink {
        animation: none;
        opacity: 1;
    }
    
    .fuel-display.fuel-critical {
        animation: none;
        border-color: #ff0000;
    }
}