/* =========================================
   基本設定 & 変数定義
   ========================================= */
:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --navbar-bg: #ffffff;
    --navbar-text: rgba(0,0,0,.55);
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 0.375rem;
    --shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    --visualizer-color: #0d6efd;
    --visualizer-glow: none;
}

/* =========================================
   アニメーション定義
   ========================================= */

/* RGBボーダーサイクル */
@keyframes gaming-rgb-border {
    0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
    20% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00; }
    40% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00; }
    60% { border-color: #00ffff; box-shadow: 0 0 10px #00ffff; }
    80% { border-color: #0000ff; box-shadow: 0 0 10px #0000ff; }
    100% { border-color: #ff00ff; box-shadow: 0 0 10px #ff00ff; }
}

/* 背景ウェーブ */
@keyframes gaming-bg-wave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================
   処理中プログレスバー
   ========================================= */
.processing-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 10;
    overflow: hidden;
}
.processing-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: processingShimmer 1.2s ease-in-out infinite;
}
@keyframes processingShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes uploadProgressShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes uploadProgressSweep {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}