/* paddle.css（パドルスタイル）- テーマ変数対応版 */

#paddle {
    position: absolute;
    bottom: 20px;
    left: 0px;
    width: 60px;  /* 幅をさらに小さく */
    height: 12px; /* 高さをさらに小さく */
    background: linear-gradient(45deg, var(--paddle-color), var(--accent-secondary));
    border-radius: 6px; /* 角丸を調整 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: width 0.3s ease, background 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box;
    transform: none !important;
}

#paddle.power-up {
    background: linear-gradient(45deg, var(--powerup-slow), var(--powerup-multiball));
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px var(--powerup-slow);
    }
    to {
        box-shadow: 0 0 20px var(--powerup-multiball), 0 0 30px var(--powerup-slow);
    }
}

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