/* Train Ride — theme styles */
.scene.themed { background:linear-gradient(180deg, #A5D8F0 0%, #C9E8F7 55%, #DDF0FA 100%); }
.ground { position:absolute; left:0; right:0; bottom:0; height:26%; z-index:2; background:linear-gradient(180deg,#8CC98A 0%,#79B877 30%,#6BA869 100%); }
/* railway track across the ground */
.ground:before { content:''; position:absolute; left:0; right:0; top:30%; height:26%; background:linear-gradient(180deg,#B8A98C,#A8977A); border-top:4px solid #8A7A5C; border-bottom:4px solid #8A7A5C; }
.ground:after { content:''; position:absolute; left:0; right:0; top:40%; height:6px; background:repeating-linear-gradient(90deg,#6A4530 0 16px, transparent 16px 46px); }
.sun-el { position:absolute; top:4%; right:5%; width:clamp(70px,12vw,120px); aspect-ratio:1; z-index:1; animation:sun-spin 40s linear infinite; }
@keyframes sun-spin { to { transform:rotate(360deg); } }
.sun-el svg, .cloud-el svg { width:100%; height:100%; }
.cloud-el { position:absolute; width:clamp(90px,16vw,170px); aspect-ratio:200/90; z-index:1; opacity:.95; }
.cloud-el.c1 { top:6%; left:8%; } .cloud-el.c2 { top:16%; left:55%; width:clamp(70px,12vw,130px); }
.cloud-el.drift { animation:cloud-drift 9s linear infinite; }
@keyframes cloud-drift { from{transform:translateX(30vw)} to{transform:translateX(-60vw)} }
.prop.hillA { width:clamp(220px,42vw,460px); aspect-ratio:300/120; bottom:24%; left:-6%; opacity:.9; }
.prop.hillB { width:clamp(180px,34vw,380px); aspect-ratio:300/120; bottom:24%; right:-4%; opacity:.85; }
.prop.station { width:clamp(150px,26vw,300px); aspect-ratio:180/160; bottom:30%; right:3%; }
.prop.ferris { width:clamp(130px,24vw,260px); aspect-ratio:240/260; bottom:26%; right:3%; }
.prop.tent1 { width:clamp(90px,15vw,180px); aspect-ratio:200/150; bottom:26%; right:32%; display:none; }
@media (min-width:700px){ .prop.tent1 { display:block; } }
/* long train: wide holder, slots along the carriage */
.veh-holder { --slot-w:8.5%; --slot-h:23%; --slot-top:30%; width:min(80vw,580px); aspect-ratio:640/277; left:2%; bottom:8%; }
.veh-holder.arrival { width:min(72vw,520px); }
.veh-holder.transit { bottom:9%; }
.veh-holder.transit .train-wheel { transform-box:fill-box; transform-origin:center; animation:wheel-spin 1s linear infinite; }
@keyframes wheel-spin { to { transform:rotate(360deg); } }
@media (max-width:540px){ .veh-holder { width:92vw; left:1%; bottom:14%; } .veh-holder.arrival { width:88vw; } .kids-curb { bottom:34%; } }