/* ========================================
   全体設定
======================================== */

* {
    box-sizing: border-box;
}


body {
    margin: 0;

    min-height: 100vh;

    font-family:
        "Hiragino Maru Gothic ProN",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    background: #fff8e8;

    color: #333;
}



/* ========================================
   アプリ全体
======================================== */

.app {
    width: min(900px, 94vw);

    min-height: 100vh;

    margin: 0 auto;

    padding: 20px 10px 30px;

    display: flex;
    justify-content: center;
}



/* ========================================
   画面
======================================== */

.screen {
    width: 100%;
}


.hidden {
    display: none !important;
}



/* ========================================
   ホーム画面
======================================== */

.home-screen {
    text-align: center;

    padding-top: 30px;
}


.home-title {
    margin: 10px 0 15px;

    font-size: clamp(32px, 7vw, 54px);

    font-weight: 800;
}


.home-message {
    margin: 0 0 30px;

    font-size: clamp(22px, 4vw, 32px);

    font-weight: 700;
}



/* ========================================
   のりもの選択
======================================== */

.vehicle-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    width: 100%;
}


.vehicle-button {
    min-height: 210px;

    border: none;

    border-radius: 30px;

    background: white;

    box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.15);

    cursor: pointer;

    font-family: inherit;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

    transition:
        transform 0.1s,
        box-shadow 0.1s;
}


.vehicle-button:active {
    transform: translateY(6px);

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.15);
}


.vehicle-icon {
    font-size: clamp(70px, 13vw, 120px);

    line-height: 1;
}


.vehicle-name {
    font-size: clamp(24px, 4vw, 36px);

    font-weight: 800;
}


/* 車両ごとの背景 */

.train-button {
    background: #fff0ed;
}


.police-button {
    background: #edf4ff;
}


.ambulance-button {
    background: #fff0f0;
}


.fire-button {
    background: #fff4df;
}



/* ========================================
   ゲーム画面
======================================== */

.game-screen {
    text-align: center;
}



/* ========================================
   ヘッダー
======================================== */

.game-header {
    width: 100%;

    display: flex;

    justify-content: flex-start;

    margin-bottom: 8px;
}


.home-button {
    border: none;

    border-radius: 999px;

    background: white;

    padding: 10px 20px;

    font-family: inherit;

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.15);
}


.home-button:active {
    transform: translateY(3px);
}



/* ========================================
   ゲームタイトル
======================================== */

.game-title {
    margin: 5px 0 15px;

    font-size: clamp(28px, 5vw, 44px);

    font-weight: 800;
}



/* ========================================
   ゲームシーン
======================================== */

.scene {
    width: 100%;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15);
}


.scene-background {
    position: relative;

    width: 100%;

    height: clamp(320px, 52vw, 450px);

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #73cfff 0%,
            #bceaff 70%,
            #e8f8ff 100%
        );
}



/* ========================================
   雲
======================================== */

.cloud {
    position: absolute;

    z-index: 1;

    font-size: clamp(45px, 8vw, 80px);

    opacity: 0.9;
}


.cloud-1 {
    top: 25px;

    left: 8%;
}


.cloud-2 {
    top: 70px;

    right: 10%;
}



/* ========================================
   道路
======================================== */

.road {
    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 110px;

    background: #555;
}


.road-line {
    position: absolute;

    left: 0;

    width: 100%;

    height: 8px;

    background: #f8e56c;
}


.road-line-1 {
    top: 25px;
}


.road-line-2 {
    top: 77px;
}



/* ========================================
   駅
======================================== */

.station {
    position: absolute;

    z-index: 3;

    right: 7%;

    bottom: 80px;

    width: 150px;
}


.station-name {
    width: 120px;

    margin: 0 auto -10px;

    padding: 8px;

    position: relative;

    z-index: 2;

    background: white;

    border: 4px solid #555;

    border-radius: 10px;

    font-size: 24px;

    font-weight: 800;
}


.station-building {
    font-size: 100px;

    line-height: 1;
}



/* ========================================
   線路
======================================== */

.rail {
    position: absolute;

    z-index: 2;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 90px;

    background: #8b7355;

    display: none;
}


.rail-line {
    position: absolute;

    left: 0;

    width: 100%;

    height: 10px;

    background: #555;

    border-radius: 5px;
}


.rail-line-1 {
    top: 20px;
}


.rail-line-2 {
    top: 58px;
}


.rail-sleeper {
    position: absolute;

    top: 10px;

    width: 14px;

    height: 68px;

    background: #654321;

    border-radius: 3px;
}


.sleeper-1 {
    left: 4%;
}

.sleeper-2 {
    left: 12%;
}

.sleeper-3 {
    left: 20%;
}

.sleeper-4 {
    left: 28%;
}

.sleeper-5 {
    left: 36%;
}

.sleeper-6 {
    left: 44%;
}

.sleeper-7 {
    left: 52%;
}

.sleeper-8 {
    left: 60%;
}

.sleeper-9 {
    left: 68%;
}

.sleeper-10 {
    left: 76%;
}

.sleeper-11 {
    left: 84%;
}

.sleeper-12 {
    left: 92%;
}



/* ========================================
   乗り物全体
======================================== */

.vehicle {
    position: absolute;

    z-index: 5;

    left: -270px;

    bottom: 75px;

    width: 250px;

    height: 110px;
}


.vehicle-image {
    display: none;

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;
}



/* ========================================
   電車
======================================== */

.train-vehicle {
    width: 230px;

    height: 100px;
}


.train-body {
    position: absolute;

    left: 0;

    bottom: 15px;

    width: 185px;

    height: 80px;

    background: #f44336;

    border: 5px solid #333;

    border-radius: 15px 5px 5px 15px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding: 8px;
}


.train-window {
    width: 43px;

    height: 40px;

    background: #bcecff;

    border: 4px solid #333;

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;
}


.train-front {
    position: absolute;

    right: 0;

    bottom: 15px;

    width: 50px;

    height: 80px;

    background: #ffcc00;

    border: 5px solid #333;

    border-left: none;

    border-radius: 0 25px 15px 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;
}


.wheel {
    position: absolute;

    bottom: 0;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: #222;

    border: 5px solid #555;
}


.train-vehicle .wheel-1 {
    left: 25px;
}


.train-vehicle .wheel-2 {
    left: 90px;
}


.train-vehicle .wheel-3 {
    right: 5px;
}



/* ========================================
   車
======================================== */

.car {
    position: relative;

    width: 230px;

    height: 100px;

    border-radius: 25px 30px 15px 15px;

    border: 5px solid #333;

    display: flex;

    align-items: center;

    justify-content: center;
}


.police-car {
    background: #f5f5f5;
}


.ambulance-car {
    background: #ffffff;
}


.fire-car {
    background: #e53935;
}



/* ========================================
   パトカー
======================================== */

.police-vehicle .car-window {
    position: absolute;

    top: 12px;

    left: 75px;

    width: 95px;

    height: 35px;

    background: #aee4ff;

    border: 4px solid #333;

    border-radius: 8px;
}


.car-light {
    position: absolute;

    top: -18px;

    width: 35px;

    height: 25px;

    border: 4px solid #333;

    border-radius: 8px 8px 2px 2px;
}


.red-light {
    left: 100px;

    background: #f44336;
}


.blue-light {
    left: 135px;

    background: #2196f3;
}


.car-body-icon {
    font-size: 55px;

    margin-top: 25px;
}



/* ========================================
   救急車
======================================== */

.ambulance-cross {
    position: absolute;

    right: 35px;

    top: 20px;

    font-size: 40px;

    font-weight: 900;

    color: #e53935;
}


.ambulance-vehicle .car-window {
    position: absolute;

    top: 12px;

    left: 70px;

    width: 90px;

    height: 35px;

    background: #bdeaff;

    border: 4px solid #333;

    border-radius: 8px;
}


.ambulance-vehicle .car-body-icon {
    margin-top: 25px;
}



/* ========================================
   消防車
======================================== */

.fire-ladder {
    position: absolute;

    top: 5px;

    left: 35px;

    font-size: 25px;

    color: #555;

    transform: rotate(-8deg);
}


.fire-vehicle .car-window {
    position: absolute;

    top: 20px;

    left: 125px;

    width: 70px;

    height: 35px;

    background: #bdeaff;

    border: 4px solid #333;

    border-radius: 8px;
}


.fire-vehicle .car-body-icon {
    margin-top: 25px;
}



/* ========================================
   車のタイヤ
======================================== */

.car-wheel {
    position: absolute;

    bottom: -18px;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #222;

    border: 6px solid #555;
}


.car-wheel-1 {
    left: 35px;
}


.car-wheel-2 {
    right: 35px;
}



/* ========================================
   電車が来るアニメーション
======================================== */

.vehicle.coming {
    animation:
        vehicleCome 2.5s ease-out forwards;
}


@keyframes vehicleCome {

    from {
        left: -270px;
    }

    to {
        left: calc(100% - 350px);
    }

}



/* ========================================
   電車・車が出発するアニメーション
======================================== */

.vehicle.going {
    animation:
        vehicleGo 2.5s ease-in forwards;
}


@keyframes vehicleGo {

    from {
        left: calc(100% - 350px);
    }

    to {
        left: 100%;
    }

}



/* ========================================
   メッセージ
======================================== */

.message {
    margin: 20px 0 15px;

    min-height: 45px;

    font-size: clamp(22px, 4vw, 34px);

    font-weight: 800;
}



/* ========================================
   操作ボタン
======================================== */

.action-button {
    border: none;

    padding: 18px 35px;

    border-radius: 999px;

    background: #ff7043;

    color: white;

    font-family: inherit;

    font-size: clamp(22px, 4vw, 32px);

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 0 #d94f28;

    transition:
        transform 0.1s,
        box-shadow 0.1s;
}


.action-button:active {
    transform: translateY(6px);

    box-shadow:
        0 1px 0 #d94f28;
}


.action-button:disabled {
    opacity: 0.55;

    cursor: default;
}



/* ========================================
   車の場合
======================================== */

.scene-background.car-mode .road {
    display: block;
}


.scene-background.car-mode .rail {
    display: none;
}


.scene-background.train-mode .road {
    display: none;
}


.scene-background.train-mode .rail {
    display: block;
}


.scene-background.car-mode .station {
    display: none;
}



/* ========================================
   スマートフォン
======================================== */

@media (max-width: 600px) {

    .app {
        width: 96vw;

        padding-top: 10px;
    }


    .home-screen {
        padding-top: 15px;
    }


    .home-title {
        margin-top: 5px;
    }


    .home-message {
        margin-bottom: 20px;
    }


    .vehicle-list {
        gap: 12px;
    }


    .vehicle-button {
        min-height: 170px;

        border-radius: 22px;
    }


    .vehicle-icon {
        font-size: 70px;
    }


    .vehicle-name {
        font-size: 22px;
    }


    .home-button {
        font-size: 18px;

        padding: 9px 15px;
    }


    .scene {
        border-radius: 20px;
    }


    .station {
        right: 2%;

        transform: scale(0.75);

        transform-origin: bottom right;
    }


    .vehicle {
        transform: scale(0.8);

        transform-origin: bottom left;
    }


    .message {
        margin-top: 15px;
    }


    .action-button {
        width: 90%;

        padding: 16px 15px;
    }

}