/* =====================================================
   山手線 テーマ (theme-yamanote.css)
   ===================================================== */

body.theme-yamanote {
    --train-body-color: #dcdcdc;
    /* ステンレス質感のベース色 */
    --train-roof-color: #5a5a5a;
    /* 屋根のグレー */
    --train-window-frame: #1a1a1a;
    /* 窓枠は黒 */
    --train-line-color: #80c342;
    /* 山手線グリーン（ウグイス色） */
    --train-face-color: #1a1a1a;
    /* フロントマスクは黒 */
}

/* 山手線の詳細 */
body.theme-yamanote .train-car {
    /* ステンレスの金属質感グラデーション、および上部のウグイス色・黒のストライプ */
    background:
        linear-gradient(to bottom,
            var(--train-roof-color) 0%, var(--train-roof-color) 12%,
            var(--train-line-color) 12%, var(--train-line-color) 16%,
            #111 16%, #111 18%,
            #f5f5f5 18%,
            #e0e0e0 22%,
            #d5d5d5 40%,
            #e0e0e0 60%,
            #b5b5b5 85%,
            #999 100%);
    border-radius: 6px;
    border: 1px solid #aaa;
}

/* 山手線（中間車）の4つのドアを、ウグイス色の縦帯で表現 */
body.theme-yamanote .train-car::before {
    content: '';
    position: absolute;
    top: 18%;
    left: 0;
    width: 100%;
    height: 82%;
    z-index: 2;
    pointer-events: none;
    background-image:
        /* ドア縦の分割線 */
        linear-gradient(90deg,
            transparent 7.9%, #222 7.9%, #222 8.1%, transparent 8.1%,
            transparent 35.9%, #222 35.9%, #222 36.1%, transparent 36.1%,
            transparent 63.9%, #222 63.9%, #222 64.1%, transparent 64.1%,
            transparent 91.9%, #222 91.9%, #222 92.1%, transparent 92.1%),
        /* ドアの窓 */
        linear-gradient(90deg,
            transparent 6.5%, #151515 6.5%, #151515 9.5%, transparent 9.5%,
            transparent 34.5%, #151515 34.5%, #151515 37.5%, transparent 37.5%,
            transparent 62.5%, #151515 62.5%, #151515 65.5%, transparent 65.5%,
            transparent 90.5%, #151515 90.5%, #151515 93.5%, transparent 93.5%),
        /* ドアベース（ウグイス色） */
        linear-gradient(90deg,
            transparent 4%, var(--train-line-color) 4%, var(--train-line-color) 12%, transparent 12%,
            transparent 32%, var(--train-line-color) 32%, var(--train-line-color) 40%, transparent 40%,
            transparent 60%, var(--train-line-color) 60%, var(--train-line-color) 68%, transparent 68%,
            transparent 88%, var(--train-line-color) 88%, var(--train-line-color) 96%, transparent 96%);
    background-size:
        100% 100%,
        100% 40%,
        100% 100%;
    background-position:
        0 0,
        0 15%,
        0 0;
    background-repeat: no-repeat;
}

/* 山手線用窓デザイン */
body.theme-yamanote .window {
    width: 62px;
    height: 70px;
    margin-top: 20px;
    background: linear-gradient(to bottom, #2a2a2a, #111);
    border: 3px solid #666;
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------
   山手線 先頭車両 (1両目)
   ----------------------------------------------- */
body.theme-yamanote .train-car:first-child {
    border-left: none;
    /* デフォルトの境界線を消去 */
}

/* 先頭車両のドア配置 (前面に運転台があるため3枚ドア) */
body.theme-yamanote .train-car:first-child::before {
    content: '';
    position: absolute;
    top: 18%;
    left: 0;
    width: 100%;
    height: 82%;
    z-index: 2;
    pointer-events: none;
    background-image:
        /* ドア縦の分割線 (ドア2, 3, 4) */
        linear-gradient(90deg,
            transparent 35.9%, #222 35.9%, #222 36.1%, transparent 36.1%,
            transparent 63.9%, #222 63.9%, #222 64.1%, transparent 64.1%,
            transparent 91.9%, #222 91.9%, #222 92.1%, transparent 92.1%),
        /* ドアの窓 */
        linear-gradient(90deg,
            transparent 34.5%, #151515 34.5%, #151515 37.5%, transparent 37.5%,
            transparent 62.5%, #151515 62.5%, #151515 65.5%, transparent 65.5%,
            transparent 90.5%, #151515 90.5%, #151515 93.5%, transparent 93.5%),
        /* ドアベース */
        linear-gradient(90deg,
            transparent 32%, var(--train-line-color) 32%, var(--train-line-color) 40%, transparent 40%,
            transparent 60%, var(--train-line-color) 60%, var(--train-line-color) 68%, transparent 68%,
            transparent 88%, var(--train-line-color) 88%, var(--train-line-color) 96%, transparent 96%);
    background-size:
        100% 100%,
        100% 40%,
        100% 100%;
    background-position:
        0 0,
        0 15%,
        0 0;
    background-repeat: no-repeat;
}

/* 先頭車両のフロントマスク (E235系 特徴的な黒面と黄緑のフレーム) */
body.theme-yamanote .train-car:first-child::after {
    content: '山手線';
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 8px;
    color: #39ff14;
    /* ネオン調のLED表示 */
    font-weight: bold;
    text-align: center;
    line-height: 22px;
    padding-top: 2px;

    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 100%;

    background-image:
        /* 行先表示器用ブラック枠 */
        linear-gradient(to bottom,
            #111 0%, #111 25px,
            transparent 25px),
        /* 下部のウグイス色グラデーショングラフィック */
        linear-gradient(to top,
            rgba(128, 195, 66, 0.95) 0%,
            rgba(128, 195, 66, 0.4) 40%,
            transparent 70%);
    background-color: #1a1a1a;

    border-left: 8px solid var(--train-line-color);
    border-top: 8px solid var(--train-line-color);
    border-bottom: 8px solid var(--train-line-color);
    border-right: 2px solid #555;
    border-radius: 12px 0 0 12px;
    box-sizing: border-box;
    z-index: 10;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8), 2px 0 5px rgba(0, 0, 0, 0.3);
}

/* -----------------------------------------------
   山手線 後尾車両 (5両目)
   ----------------------------------------------- */
body.theme-yamanote .train-car:last-child {
    border-right: none;
}

/* 後尾車両のドア配置 (後方に運転台があるため3枚ドア) */
body.theme-yamanote .train-car:last-child::before {
    content: '';
    position: absolute;
    top: 18%;
    left: 0;
    width: 100%;
    height: 82%;
    z-index: 2;
    pointer-events: none;
    background-image:
        /* ドア縦の分割線 (ドア1, 2, 3) */
        linear-gradient(90deg,
            transparent 7.9%, #222 7.9%, #222 8.1%, transparent 8.1%,
            transparent 35.9%, #222 35.9%, #222 36.1%, transparent 36.1%,
            transparent 63.9%, #222 63.9%, #222 64.1%, transparent 64.1%),
        /* ドアの窓 */
        linear-gradient(90deg,
            transparent 6.5%, #151515 6.5%, #151515 9.5%, transparent 9.5%,
            transparent 34.5%, #151515 34.5%, #151515 37.5%, transparent 37.5%,
            transparent 62.5%, #151515 62.5%, #151515 65.5%, transparent 65.5%),
        /* ドアベース */
        linear-gradient(90deg,
            transparent 4%, var(--train-line-color) 4%, var(--train-line-color) 12%, transparent 12%,
            transparent 32%, var(--train-line-color) 32%, var(--train-line-color) 40%, transparent 40%,
            transparent 60%, var(--train-line-color) 60%, var(--train-line-color) 68%, transparent 68%);
    background-size:
        100% 100%,
        100% 40%,
        100% 100%;
    background-position:
        0 0,
        0 15%,
        0 0;
    background-repeat: no-repeat;
}

/* 後尾車両のフロント/テールマスク (赤色テールライト点灯) */
body.theme-yamanote .train-car:last-child::after {
    content: '山手線';
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 8px;
    color: #ff3333;
    /* 赤色のテール表示 */
    font-weight: bold;
    text-align: center;
    line-height: 22px;
    padding-top: 2px;

    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 100%;

    background-image:
        /* 行先表示器用ブラック枠 */
        linear-gradient(to bottom,
            #111 0%, #111 25px,
            transparent 25px),
        /* 下部のウグイス色グラデーショングラフィック */
        linear-gradient(to top,
            rgba(128, 195, 66, 0.95) 0%,
            rgba(128, 195, 66, 0.4) 40%,
            transparent 70%);
    background-color: #1a1a1a;

    border-right: 8px solid var(--train-line-color);
    border-top: 8px solid var(--train-line-color);
    border-bottom: 8px solid var(--train-line-color);
    border-left: 2px solid #555;
    border-radius: 0 12px 12px 0;
    box-sizing: border-box;
    z-index: 10;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8), -2px 0 5px rgba(0, 0, 0, 0.3);
}