/* =====================================================
   きかんしゃトーマス テーマ (theme-thomas.css)
   ===================================================== */

body.theme-thomas {
    --bg-color: #87CEEB;
    /* 空色 */
    --train-body-color: #0099CC;
    /* トーマスブルー */
    --train-roof-color: #111;
    --train-line-color: #FF0000;
    /* 赤いライン */
    --passenger-car-color: #8B4513;
    /* アニー・クララベル色 */
}

/* 1両目: トーマス */
body.theme-thomas .train-car:first-child {
    background: none;
    box-shadow: none;
    border: none;
    overflow: visible;

    /* ボイラーとサイドタンク */
    background:
        /* キャブ（運転室） */
        linear-gradient(to bottom, #0099CC 0%, #0099CC 100%),
        /* サイドタンク（四角い部分） */
        linear-gradient(to bottom, #0099CC 0%, #0099CC 100%);

    background-size: 100px 140px, 140px 100px;
    background-position: right bottom, 80px bottom;
    background-repeat: no-repeat;

    width: 320px;
    height: 140px;
    margin-top: 20px;
    position: relative;
    z-index: 5;
}

/* ボイラー（丸い部分） */
body.theme-thomas .train-car:first-child::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 180px;
    height: 100px;
    /* サイドタンクと同じ高さ */
    background: #0099CC;
    border-radius: 10px 0 0 0;
    z-index: -1;
}

/* 顔 (Face) */
body.theme-thomas .train-car:first-child::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #ddd, #bbb);
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 6;
}

/* 目 (Eyes) */
body.theme-thomas .train-car:first-child .window:first-child {
    all: unset;
    /* windowのリセット */
    position: absolute;
    bottom: 50px;
    left: 15px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    z-index: 7;
    box-shadow: 30px 0 0 #fff;
    /* もう片方の目 */
}

/* 黒目 */
body.theme-thomas .train-car:first-child .window:first-child::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10px;
    /* 視線 */
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    box-shadow: 30px 0 0 #000;
    /* もう片方の黒目 */
}

/* 煙突 */
body.theme-thomas .train-car:first-child .window:nth-child(2) {
    all: unset;
    position: absolute;
    top: -30px;
    left: 60px;
    width: 30px;
    height: 40px;
    background: #111;
    border-radius: 5px 5px 0 0;
    z-index: 4;
}

/* ドーム */
body.theme-thomas .train-car:first-child .window:nth-child(3) {
    all: unset;
    position: absolute;
    top: -15px;
    left: 120px;
    width: 40px;
    height: 30px;
    background: #ffd700;
    /* 金色のドーム */
    border-radius: 50% 50% 0 0;
    z-index: 4;
}

/* ナンバー「1」 */
body.theme-thomas .train-car:first-child .window:nth-child(3)::after {
    content: '1';
    position: absolute;
    top: 50px;
    left: 20px;
    font-size: 40px;
    font-weight: bold;
    color: #ffd700;
    /* 黄色い文字 */
    text-shadow: 1px 1px 0 #000;
    z-index: 10;
}

/* 車輪 (Thomas Wheels are Blue) */
body.theme-thomas .train-car:first-child .window:nth-child(3)::before {
    content: '';
    position: absolute;
    bottom: -80px;
    /* 位置調整 */
    left: -40px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, transparent 30%, #0099CC 35%, #0099CC 45%, #111 50%);
    border: 4px solid #fff;
    border-radius: 50%;
    animation: slWheelTurn 1s infinite linear;
    animation-play-state: paused;
    box-shadow: 70px 0 0 -4px #fff, 70px 0 0 0 #111,
        140px 0 0 -4px #fff, 140px 0 0 0 #111;
    /* 3軸 */
}

/* ロッド */
body.theme-thomas .train-car:first-child .window:nth-child(2)::after {
    content: '';
    position: absolute;
    bottom: -15px;
    /* 車輪の中心あたり */
    left: 30px;
    width: 140px;
    height: 8px;
    background: silver;
    border: 1px solid #666;
    z-index: 10;
    animation: slRodMove 1s infinite linear;
    animation-play-state: paused;
}



/* 2両目・3両目 (アニー・クララベル) */
body.theme-thomas .train-car:nth-child(n+2) {
    background: #8B4513;
    /* 茶色 */
    border-radius: 5px;
    border: 1px solid #5d4037;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    /* トーマスに合わせる */
    height: 120px;
}

body.theme-thomas .train-car:nth-child(n+2) .window {
    background: #fff;
    border: 2px solid #5d4037;
    width: 60px;
    height: 60px;
}

/* 屋根 */
body.theme-thomas .train-car:nth-child(n+2)::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 15px;
    background: #ddd;
    /* グレーの屋根 */
    border-radius: 5px 5px 0 0;
}