/* =================================================================
 * Reflex Test Styles (Complete: Parallax, Animation, Dark Mode)
 * =================================================================
 */

/* --- 全体シーン --- */
#road-scene {
    background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 40%, #34495e 40%, #2c3e50 100%);
    overflow: hidden;
    perspective: 300px;
    position: relative;
}

/* --- 空と雲 (遠景) --- */
.sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to bottom, #0d47a1, #64b5f6);
    overflow: hidden;
}

.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 5%, transparent 20%),
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.5) 8%, transparent 25%),
        radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.3) 6%, transparent 15%);
    background-size: 50% 100%;
    animation: moveSky 60s linear infinite;
    animation-play-state: paused;
}

/* --- 山 (中景) --- */
.mountains {
    position: absolute;
    top: 30%;
    left: 0;
    width: 200%;
    height: 15%;
    background-image: linear-gradient(to bottom, #555 20%, #222 100%);
    -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
    clip-path: polygon(0% 100%, 10% 20%, 25% 80%, 40% 10%, 55% 60%, 70% 30%, 85% 70%, 100% 100%,
            110% 20%, 125% 80%, 140% 10%, 155% 60%, 170% 30%, 185% 70%, 200% 100%);
    opacity: 0.8;
    animation: moveMountains 20s linear infinite;
    animation-play-state: paused;
}

/* --- 道路コンテナ（3D変形） --- */
.road-container {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 1200px;
    height: 600px;
    transform: translateX(-50%) rotateX(60deg);
    transform-origin: 50% 0%;
    background-color: #2c3e50;
    overflow: hidden;
}

/* --- 路肩の風景 (近景) --- */
.side-landscape {
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: #2e7d32;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 190px, #3e2723 190px, #3e2723 200px),
        repeating-linear-gradient(0deg, transparent, transparent 45px, #bdc3c7 45px, #bdc3c7 50px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.1) 20px, rgba(0, 0, 0, 0) 40px);
    background-size: 100% 1000px;
    animation: moveRoad 1s linear infinite;
    animation-play-state: paused;
}

.side-landscape.left {
    left: 0;
    border-right: 10px solid #bdc3c7;
}

.side-landscape.right {
    right: 0;
    border-left: 10px solid #bdc3c7;
}

/* --- 道路本体 --- */
.road {
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    height: 100%;
    background-color: #34495e;
    box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5), inset -10px 0 20px rgba(0, 0, 0, 0.5);
}

.road-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzjIHEwgMYiCRUA0IwMzAwMAMw0JPw3jT94AAAAASUVORK5CYII=');
    opacity: 0.3;
    animation: moveRoad 0.5s linear infinite;
    animation-play-state: paused;
}

.center-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4%;
    height: 100%;
    background: repeating-linear-gradient(to bottom, #ffffff, #ffffff 15%, transparent 15%, transparent 30%);
    transform: translateX(-50%);
    animation: moveRoad 0.5s linear infinite;
    animation-play-state: paused;
}

.lane-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
}

.lane-line.left {
    left: 10%;
}

.lane-line.right {
    right: 10%;
}

/* --- 車体 --- */
.car-body {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 15;
    transform-origin: center bottom;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hood {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #1a252f, #000);
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.8);
}

.dashboard {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #111;
    border-top: 1px solid #333;
}

/* --- 挙動アニメーション (Keyframes) --- */
@keyframes moveRoad {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 1000px;
    }
}

@keyframes moveMountains {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes moveSky {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -50% 0;
    }
}

@keyframes signalFlash {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-signal {
    animation: signalFlash 0.2s infinite;
}

/* ブレーキ中の沈み込み（ノーズダイブ） */
.car-body.braking-dive {
    transform: translateY(15px) rotateX(2deg);
    transition: transform 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

/* 停止時の揺り戻し（リコイル） */
.car-body.braking-recoil {
    animation: recoil 0.6s ease-out forwards;
}

@keyframes recoil {
    0% {
        transform: translateY(15px) rotateX(2deg);
    }

    40% {
        transform: translateY(-5px) rotateX(-1deg);
    }

    100% {
        transform: translateY(0) rotateX(0);
    }
}

/* --- その他UI --- */
.drop-shadow {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

#btn-brake {
    transition: transform 0.1s, border-bottom-width 0.1s, background-color 0.2s;
}

#btn-brake:active:not(.disabled) {
    transform: translateY(4px);
    border-bottom-width: 4px !important;
    background-color: #c0392b !important;
    border-color: #a93226 !important;
}

/* スタート/ブレーキ押下時のフィードバック（マウス・キーボード両対応）
   :active と競合しないよう scale + brightness のみで構成 */
@keyframes btnPressPulse {
    0%   { transform: scale(1); filter: brightness(1); }
    30%  { transform: scale(0.93); filter: brightness(1.4); }
    100% { transform: scale(1); filter: brightness(1); }
}
.is-press-pulse {
    animation: btnPressPulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .vision-tool-card は /common/style-components.css に共通化済み */

/* ダークモードのprimary(#9d83d9)は白テキストとのコントラストが2.9:1でWCAG不合格のため
   より暗いバイオレットを使用 → 白テキストとのコントラスト約7:1 */
[data-bs-theme="dark"] #game-card .card-header.bg-primary {
    background-color: #5a3fa8 !important;
}

/* モバイル対応 */
@media (max-width: 576px) {
    /* ステージの高さを少し縮める */
    #game-card .card-body[style*="height: 360px"] {
        height: 280px !important;
    }
    /* スタートオーバーレイ内の速度選択ボタンを小さめに */
    #start-overlay .btn-group .btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.2rem;
    }
    /* ブレーキボタンのフォントサイズ調整 */
    #btn-brake .fs-2 {
        font-size: 1.5rem !important;
    }
}