/* items.css - アイテム関連のスタイル */

/* プレイヤー周囲のシールドバリアエフェクト */
.player-shield-barrier {
    position: absolute;
    width: 80px; /* プレイヤーより大きめ */
    height: 80px;
    border-radius: 50%;
    border: 3px solid #00ffff;
    box-shadow:
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        inset 0 0 20px rgba(0, 255, 255, 0.3);
    pointer-events: none;
    z-index: 6;
    animation: shieldBarrier 1s infinite alternate;
}

@keyframes shieldBarrier {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-color: #00ffff;
        box-shadow:
            0 0 20px #00ffff,
            0 0 40px #00ffff,
            inset 0 0 20px rgba(0, 255, 255, 0.3);
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
        border-color: #00ccff;
        box-shadow:
            0 0 30px #00ccff,
            0 0 60px #00ccff,
            inset 0 0 30px rgba(0, 204, 255, 0.5);
    }
}

/* シールドエフェクト */
.shield-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.shield-active {
    opacity: 0.8 !important;
    animation: shieldPulse 1s infinite;
    background: radial-gradient(
        circle,
        rgba(0, 255, 255, 0.6) 0%,
        rgba(0, 200, 255, 0.4) 30%,
        rgba(0, 150, 255, 0.2) 60%,
        rgba(0, 0, 0, 0) 80%
    );
}

@keyframes shieldPulse {
    0% {
        opacity: 0.3;
        background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    }
    50% {
        opacity: 0.7;
        background: radial-gradient(circle, rgba(0, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
    }
    100% {
        opacity: 0.3;
        background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
    }
}

.player-shield-barrier {
    position: absolute;
    border: 2px solid #00ffff;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 10;
    animation: shieldPulse 2s infinite;
}

/* シールド延長エフェクト */
@keyframes shieldExtensionPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -100%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -150%) scale(0.8);
        opacity: 0;
    }
}

.shield-extension-effect {
    pointer-events: none;
    font-family: 'Arial', sans-serif;
}

/* ワームホールエフェクト */
.wormhole-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
}

.wormhole-active {
    opacity: 0.8 !important;
    animation: wormholeSpin 2s infinite linear;
}

@keyframes wormholeSpin {
    0% {
        transform: rotate(0deg);
        background: radial-gradient(circle, rgba(138, 43, 226, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
    }
    50% {
        background: radial-gradient(circle, rgba(148, 0, 211, 0.8) 0%, rgba(0, 0, 0, 0) 70%);
    }
    100% {
        transform: rotate(360deg);
        background: radial-gradient(circle, rgba(138, 43, 226, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
    }
}

/* スクリーンシェイク効果 */
.screen-shake {
    animation: screenShake 0.5s ease-in-out;
}

@keyframes screenShake {
    0%,
    100% {
        transform: translateX(0) translateY(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px) translateY(-3px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px) translateY(3px);
    }
}

/* 強化されたワームホールエフェクト */
.wormhole-effect.enhanced {
    background: radial-gradient(circle at 30% 30%, rgba(218, 112, 214, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(138, 43, 226, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(75, 0, 130, 0.7) 0%, transparent 70%);
    opacity: 0;
}

.wormhole-active.enhanced {
    opacity: 0.9 !important;
    animation:
        wormholeSpin 1.5s infinite linear,
        wormholePulse 0.5s infinite alternate,
        colorShift 2s infinite alternate;
}

@keyframes wormholePulse {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1.1) rotate(180deg);
    }
}

@keyframes colorShift {
    0% {
        filter: hue-rotate(0deg);
        background: radial-gradient(circle at 30% 30%, rgba(218, 112, 214, 0.8) 0%, transparent 50%),
            radial-gradient(circle at 70% 70%, rgba(138, 43, 226, 0.9) 0%, transparent 50%);
    }
    100% {
        filter: hue-rotate(60deg);
        background: radial-gradient(circle at 30% 30%, rgba(255, 105, 180, 0.8) 0%, transparent 50%),
            radial-gradient(circle at 70% 70%, rgba(147, 112, 219, 0.9) 0%, transparent 50%);
    }
}

/* スピードラインエフェクト */
.speed-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.speed-line {
    position: absolute;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #00ffff, transparent);
    animation: speedLine 0.8s linear forwards;
}

@keyframes speedLine {
    0% {
        transform: translateY(-100px) rotate(15deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(15deg);
        opacity: 0;
    }
}

/* アイテムアイコン（遊び方画面用） */
.instruction-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    flex-shrink: 0; /* サイズが変わらないように */
}

.instruction-shield-icon {
    background: linear-gradient(135deg, #00b4db, #0083b0);
    border: 2px solid #00ffff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.instruction-wormhole-icon {
    background: linear-gradient(135deg, #8a2be2, #9400d3);
    border: 2px solid #da70d6;
    box-shadow: 0 0 10px rgba(218, 112, 214, 0.5);
}

.instruction-resource-icon {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.7);
}

.item-example {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.item-description {
    flex: 1;
}

/* アイテム取得時のフローティングテキスト */
.item-collect-text {
    position: absolute;
    color: #00ff00;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 0 5px #000;
    z-index: 20;
    pointer-events: none;
    animation: floatUp 1.5s ease-out forwards;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* シールド取得時のテキスト */
.shield-collect {
    color: #00ffff !important;
    text-shadow: 0 0 10px #00ffff !important;
}

/* ワームホール通過時のテキスト */
.wormhole-collect {
    color: #da70d6 !important;
    text-shadow: 0 0 10px #da70d6 !important;
}

/* アイテムクールダウン表示 */
.item-cooldown {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #00ffff;
    color: white;
    font-size: 0.9rem;
    z-index: 15;
}

.cooldown-active {
    animation: cooldownPulse 1s infinite;
}

@keyframes cooldownPulse {
    0%,
    100% {
        border-color: #00ffff;
    }
    50% {
        border-color: #ff4444;
    }
}

/* アイテム出現予告エフェクト */
.item-spawn-warning {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px dashed #ffff00;
    animation: spawnWarning 1s infinite;
    pointer-events: none;
    z-index: 8;
}

@keyframes spawnWarning {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* シールドヒットエフェクト用スタイル */
.shield-hit {
    animation: shieldHit 0.3s ease-out;
}

.shield-shake {
    animation: shieldShake 0.3s ease-in-out;
}

@keyframes shieldShake {
    0%,
    100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-3px) translateY(-2px);
    }
    50% {
        transform: translateX(3px) translateY(2px);
    }
    75% {
        transform: translateX(-2px) translateY(-1px);
    }
}

@keyframes shieldHit {
    0% {
        background: radial-gradient(circle, rgba(0, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0) 70%);
        opacity: 1;
    }
    100% {
        background: radial-gradient(circle, rgba(0, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
        opacity: 0.7;
    }
}

/* シールドヒットエフェクトの強化 */
.shield-hit-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 255, 255, 0.8) 0%,
        rgba(0, 200, 255, 0.6) 20%,
        rgba(0, 150, 255, 0.4) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 7;
    opacity: 0;
    transition: opacity 0.3s;
}

.shield-hit-active {
    opacity: 1;
    animation: shieldHitPulse 0.5s ease-out;
}

@keyframes shieldHitPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* 資源用のスタイルクラス */
.resource-collect {
    color: #00ff88 !important;
    text-shadow: 
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 30px #00ff88 !important;
    font-weight: bold;
    animation: resourceFloat 1.5s ease-out forwards;
}

@keyframes resourceFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-25px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1);
    }
}

.resource-icon {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.7);
}

/* ================================================
   燃料表示スタイル
   ================================================ */

/* 燃料表示コンテナ */
.fuel-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 10, 20, 0.8);
    border-radius: 25px;
    border: 2px solid rgba(100, 150, 255, 0.3);
    font-family: 'Arial', 'Segoe UI', sans-serif;
    min-width: 130px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 燃料アイコン */
.fuel-icon {
    font-size: 1.3em;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 3px rgba(100, 200, 255, 0.5));
}

/* 燃料バーコンテナ */
.fuel-bar-container {
    flex: 1;
    min-width: 70px;
    position: relative;
}

/* 燃料バー背景 */
.fuel-bar {
    width: 100%;
    height: 10px;
    background: rgba(30, 60, 90, 0.6);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(100, 150, 255, 0.2);
    position: relative;
}

/* 燃料バーの光沢効果 */
.fuel-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 5px 5px 0 0;
}

/* 燃料充填部分 */
.fuel-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        #44ff44 0%, 
        #66ff66 30%, 
        #88ff88 70%, 
        #44ff44 100%);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                background 0.3s ease;
    box-shadow: 
        0 0 8px rgba(68, 255, 68, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

/* 燃料充填部分の光沢 */
.fuel-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.4) 100%);
    border-radius: 4px 4px 0 0;
}

/* 燃料パーセンテージ表示 */
.fuel-percent {
    font-size: 0.95em;
    font-weight: bold;
    min-width: 40px;
    text-align: right;
    color: #ffffff;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-variant-numeric: tabular-nums;
}

/* ================================================
   燃料状態スタイル
   ================================================ */

/* 注意状態 (21-40%) */
.fuel-display.fuel-warning {
    border-color: rgba(255, 170, 0, 0.4);
    background: rgba(40, 30, 0, 0.8);
}

.fuel-display.fuel-warning .fuel-fill {
    background: linear-gradient(90deg, 
        #ffaa00 0%, 
        #ffbb33 30%, 
        #ffcc44 70%, 
        #ffaa00 100%);
    box-shadow: 
        0 0 8px rgba(255, 170, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.fuel-display.fuel-warning .fuel-percent {
    color: #ffaa00;
    text-shadow: 0 0 6px rgba(255, 170, 0, 0.5);
}

.fuel-display.fuel-warning .fuel-icon {
    color: #ffaa00;
    filter: drop-shadow(0 0 4px rgba(255, 170, 0, 0.6));
}

/* 危険状態 (20%以下) */
.fuel-display.fuel-critical {
    border-color: rgba(255, 68, 68, 0.5);
    background: rgba(40, 0, 0, 0.8);
    animation: fuelCriticalPulse 2s infinite;
}

.fuel-display.fuel-critical .fuel-fill {
    background: linear-gradient(90deg, 
        #ff4444 0%, 
        #ff6666 30%, 
        #ff8888 70%, 
        #ff4444 100%);
    box-shadow: 
        0 0 10px rgba(255, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.fuel-display.fuel-critical .fuel-percent {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

.fuel-display.fuel-critical .fuel-icon {
    color: #ff4444;
    filter: drop-shadow(0 0 6px rgba(255, 68, 68, 0.7));
}

/* ================================================
   燃料アニメーション
   ================================================ */

/* 点滅アニメーション */
.fuel-blink {
    animation: fuelBlink 1.2s infinite;
}

@keyframes fuelBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    25% {
        opacity: 0.7;
        transform: scale(1.1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    75% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* 危険状態のパルスアニメーション */
@keyframes fuelCriticalPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255, 68, 68, 0.2);
    }
}

/* 燃料消費エフェクト */
.fuel-consumption-effect {
    animation: fuelConsumptionFlash 0.3s ease-out;
}

@keyframes fuelConsumptionFlash {
    0% {
        background-color: rgba(255, 200, 100, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

/* 燃料切れエフェクト */
.fuel-depletion-effect {
    animation: fuelDepletionPulse 0.8s ease-out;
}

@keyframes fuelDepletionPulse {
    0% {
        background-color: rgba(255, 50, 50, 0.6);
        transform: scale(1);
    }
    50% {
        background-color: rgba(255, 0, 0, 0.8);
        transform: scale(1.05);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* 新しい燃料獲得エフェクト */
.fuel-gain-effect {
    animation: fuelGainPulse 0.5s ease-out;
}

.fuel-consumption-effect .fuel-fill {
    animation: fuelConsumptionFlash 0.3s ease-out !important;
}

.fuel-gain-effect .fuel-fill {
    animation: fuelGainPulse 0.5s ease-out !important;
}

.fuel-depletion-effect {
    animation: fuelDepletionPulse 0.8s ease-out !important;
}

/* アニメーションが確実に適用されるように */
.fuel-fill {
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes fuelGainPulse {
    0% {
        background-color: rgba(100, 255, 100, 0.3);
        transform: scale(1);
    }
    50% {
        background-color: rgba(100, 255, 100, 0.6);
        transform: scale(1.02);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* ゲームエリア内の燃料表示 */
.game-area-stat.fuel-stat .value {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fuel-value {
    font-weight: bold;
    min-width: 35px;
    transition: color 0.3s ease;
}

.fuel-bar-mini {
    width: 40px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fuel-fill-mini {
    height: 100%;
    background: #44ff44;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ゲームエリア内の警告状態 */
.game-area-stat.fuel-stat.fuel-warning .fuel-fill-mini {
    background: #ffaa00;
}

.game-area-stat.fuel-stat.fuel-warning .fuel-value {
    color: #ffaa00;
}

.game-area-stat.fuel-stat.fuel-critical .fuel-fill-mini {
    background: #ff4444;
}

.game-area-stat.fuel-stat.fuel-critical .fuel-value {
    color: #ff4444;
    animation: fuelBlink 1s infinite;
}

.fuel-display .fuel-fill {
    background: linear-gradient(90deg, 
        #44ff44 0%, 
        #66ff66 30%, 
        #88ff88 70%, 
        #44ff44 100%);
    box-shadow: 
        0 0 8px rgba(68, 255, 68, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 警告状態のスタイルを確実に適用 */
.fuel-display.fuel-warning .fuel-fill {
    background: linear-gradient(90deg, 
        #ffaa00 0%, 
        #ffbb33 30%, 
        #ffcc44 70%, 
        #ffaa00 100%) !important;
    box-shadow: 
        0 0 8px rgba(255, 170, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* 危険状態のスタイルを確実に適用 */
.fuel-display.fuel-critical .fuel-fill {
    background: linear-gradient(90deg, 
        #ff4444 0%, 
        #ff6666 30%, 
        #ff8888 70%, 
        #ff4444 100%) !important;
    box-shadow: 
        0 0 10px rgba(255, 68, 68, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}