/* ==============================
   基本設定
============================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family: "Microsoft JhengHei", sans-serif;
}

body {
    background: #111;
}


/* ==============================
   Loading 畫面
============================== */

#loading-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    z-index: 9999;

    opacity: 1;
    transition: opacity 1.2s ease;
}


/* ==============================
   背景圖片
============================== */

/* 共用背景設定 */
.background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* 開始遊戲畫面 */
#start-screen .background {
    background-image: url("../images/start-bg.jpg");
}


/* Loading 畫面 */
#loading-screen .background {
    background-image: url("../images/loading-bg.jpg");
}


/* ==============================
   背景漸層
   讓下面的文字比較清楚
============================== */

.dark-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(15, 12, 10, 0.02) 35%,
            rgba(15, 12, 10, 0.18) 65%,
            rgba(15, 12, 10, 0.72) 100%
        );
}


/* ==============================
   Loading UI 整體
============================== */

.loading-content {
    position: absolute;

    left: 7%;
    right: 7%;
    bottom: 6%;

    z-index: 2;

    color: white;
}


/* ==============================
   遊戲名稱
============================== */

.loading-content h1 {
    margin: 0;

    font-size: clamp(38px, 4.5vw, 72px);

    font-weight: 500;

    letter-spacing: 0.18em;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.45);
}


.loading-content h2 {
    margin:

        5px
        0
        28px
        4px;

    font-size: clamp(15px, 1.4vw, 23px);

    font-weight: 400;

    letter-spacing: 0.35em;

    opacity: 0.92;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5);
}


/* ==============================
   鐵軌區域
============================== */

.rail-area {
    position: relative;

    width: 100%;

    height: 60px;
}


/* ==============================
   小火車
============================== */

.train {
    position: absolute;

    left: 0;

    bottom: 18px;

    width: 72px;
    height: 35px;

    z-index: 3;

    transition: left 0.25s ease-out;
}


/* 火車車廂 */

.train-body {
    position: absolute;

    left: 0;
    bottom: 5px;

    width: 56px;
    height: 27px;

    border: 2px solid rgba(255, 255, 255, 0.95);

    border-radius:
        6px
        3px
        2px
        2px;
}


/* 火車頭 */

.train-front {
    position: absolute;

    right: 0;
    bottom: 5px;

    width: 18px;
    height: 21px;

    border:
        2px solid
        rgba(255, 255, 255, 0.95);

    border-left: none;

    border-radius:
        0
        9px
        2px
        0;
}


/* 車窗 */

.window {
    display: inline-block;

    width: 10px;
    height: 9px;

    margin-top: 6px;
    margin-left: 7px;

    border:
        1.5px solid
        rgba(255, 255, 255, 0.9);

    border-radius: 2px;
}


/* 車輪 */

.wheel {
    position: absolute;

    bottom: 0;

    width: 8px;
    height: 8px;

    border:
        2px solid
        rgba(255, 255, 255, 0.95);

    border-radius: 50%;

    background: transparent;
}


.wheel-left {
    left: 12px;
}


.wheel-right {
    left: 44px;
}


/* ==============================
   鐵軌
============================== */

.rail {
    position: absolute;

    left: 0;
    right: 0;

    bottom: 9px;

    height: 10px;
}


/* 上方鐵軌 */

.rail-line {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background:
        rgba(255, 255, 255, 0.85);
}


/* 枕木 */

.sleepers {
    position: absolute;

    left: 0;
    top: 5px;

    width: 100%;
    height: 5px;

    background:
        repeating-linear-gradient(
            90deg,

            rgba(255, 255, 255, 0.65) 0,
            rgba(255, 255, 255, 0.65) 3px,

            transparent 3px,
            transparent 18px
        );
}


/* ==============================
   Loading 百分比
============================== */

.loading-text {
    margin-top: 5px;

    font-size: 12px;

    letter-spacing: 0.25em;

    opacity: 0.85;
}


/* ==============================
   Loading 結束後的遊戲畫面
============================== */

#game-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

    justify-content: center;
    align-items: center;

    background: #f4efe5;

    color: #40382f;
}


#game-screen h1 {
    margin: 0;

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

    font-weight: 400;

    letter-spacing: 0.15em;
}
/* ==========================
   開始畫面
========================== */

#start-screen {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    z-index: 10000;
}


/* 標題＋開始按鈕 */

.start-content {
    position: absolute;

    left: 7%;
    bottom: 10%;

    z-index: 3;

    color: white;
}


/* 尋軌 */

.start-content h1 {
    margin: 0;

    font-size: clamp(42px, 5vw, 78px);

    font-weight: 500;

    letter-spacing: 0.18em;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.45);
}


/* 阿明的日記 */

.start-content h2 {
    margin: 6px 0 30px 4px;

    font-size: clamp(16px, 1.5vw, 24px);

    font-weight: 400;

    letter-spacing: 0.35em;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5);
}


/* 開始遊戲按鈕 */

#start-btn {
    padding: 13px 38px;

    background:
        rgba(255, 255, 255, 0.88);

    color: #40382f;

    border: none;

    border-radius: 30px;

    font-size: 16px;

    letter-spacing: 0.15em;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


#start-btn:hover {
    transform: scale(1.05);

    background: white;
}


/* 一開始 Loading 不准出來 */

#loading-screen {
    display: none;
}


/* 遊戲本體也先藏起來 */

#game-screen {
    display: none;
}