/* powerup.css（パワーアップスタイル）- テーマ変数対応版 */

.powerup {
    position: absolute;
    width: 24px;  /* サイズをさらに小さく */
    height: 24px; /* サイズをさらに小さく */
    border-radius: 4px;
    animation: float 2s ease-in-out infinite;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 影を調整 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px; /* フォントサイズをさらに小さく */
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* 絵文字を表示するためのcontent設定 */
.powerup.expand::before {
    content: "🔼";  /* 上向き矢印 */
}

.powerup.shrink::before {
    content: "🔽";  /* 下向き矢印 */
}

.powerup.multiball::before {
    content: "✨";  /* 火花 */
}

.powerup.slow::before {
    content: "🐢";  /* カメ */
}

/* 背景色とアニメーション - テーマ変数で制御 */
.powerup.expand {
    background: linear-gradient(135deg, var(--powerup-expand), var(--accent-secondary));
    animation: float 2s ease-in-out infinite, pulse-blue 1.5s ease-in-out infinite alternate;
}

.powerup.shrink {
    background: linear-gradient(135deg, var(--powerup-shrink), var(--accent-secondary));
    animation: float 2s ease-in-out infinite, pulse-red 1.2s ease-in-out infinite alternate;
}

.powerup.multiball {
    background: linear-gradient(135deg, var(--powerup-multiball), var(--accent-secondary));
    animation: float 2s ease-in-out infinite, spin-glow 3s linear infinite;
}

.powerup.slow {
    background: linear-gradient(135deg, var(--powerup-slow), var(--accent-secondary));
    animation: float 3s ease-in-out infinite, slow-pulse 2s ease-in-out infinite;
}

/* アニメーションの定義 */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

@keyframes pulse-blue {
    from {
        box-shadow: 0 4px 12px var(--powerup-expand);
    }
    to {
        box-shadow: 0 6px 20px var(--powerup-expand), 0 0 30px var(--powerup-expand);
    }
}

@keyframes pulse-red {
    from {
        box-shadow: 0 4px 12px var(--powerup-shrink);
    }
    to {
        box-shadow: 0 6px 20px var(--powerup-shrink), 0 0 30px var(--powerup-shrink);
    }
}

@keyframes spin-glow {
    0% {
        transform: rotate(0deg);
        box-shadow: 0 4px 12px var(--powerup-multiball);
    }
    50% {
        box-shadow: 0 6px 20px var(--powerup-multiball), 0 0 30px var(--powerup-multiball);
    }
    100% {
        transform: rotate(360deg);
        box-shadow: 0 4px 12px var(--powerup-multiball);
    }
}

@keyframes slow-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px var(--powerup-slow);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 16px var(--powerup-slow);
    }
}

#powerups-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* テーマ切り替え時のスムーズな遷移 */
.powerup {
    transition: background 0.5s ease, box-shadow 0.5s ease;
}