/* The entire coupled train stays on its rail, including while stopped. */
.train-exemplar .scene-art.train {position:relative;height:100%;min-height:0;border-radius:24px;isolation:isolate;overflow:hidden;background:#e7e4c9;animation:none;container-type:size;}
.train-world {position:absolute;inset:0;background:#e7e4c9 url('../assets/train/countryside-world.webp') center/cover;}
.train-canvas {position:absolute;left:50%;bottom:3%;width:100%;width:min(100%,194cqh);aspect-ratio:2;transform:translateX(-50%);}
.train-rail {position:absolute;width:100%;height:100%;inset:0;}
.train-tap-target {position:absolute;left:3.75%;top:47.5%;width:42.5%;height:42.5%;padding:0;border:0;background:transparent;box-shadow:none;border-radius:12px;}
.train-vehicle {display:block;width:100%;height:100%;filter:drop-shadow(0 3px 2px #354f4120);}
.train-tap-target:focus-visible {outline:3px solid #377f7b;outline-offset:4px;}
.train-tap-target:disabled {cursor:default;}
.train-stop-cue {position:absolute;width:26px;height:26px;top:0;left:42%;opacity:0;}
.train-route-hint,.train-arrival {opacity:0;}
.train-arrival {position:absolute;right:2%;top:40%;width:30px;height:30px;}
[data-train-response='stop'] .train-stop-cue,[data-train-response='help'] .train-route-hint,[data-train-arrived='true'] .train-arrival {opacity:1;}
[data-train-boarded='true'] .train-tap-target .train-windows {fill:#ffe296;}
[data-train-boarded='true'] .train-tap-target .train-door-left {transform:translateX(-5px);}
[data-train-boarded='true'] .train-tap-target .train-door-right {transform:translateX(5px);}
.train-card-art {width:100%;height:100%;}
.train-exemplar .scene-art.pulse,.train-exemplar .scene-art.is-driving {animation:none;}
.train-exemplar .action-row {grid-template-columns:2fr 1fr;}
.train-exemplar .launch-button,.train-exemplar .again-button {grid-column:1;}
.train-exemplar .next-button {grid-column:2;}
.train-exemplar .remix-strip {grid-area:words;}
.train-exemplar .remix-strip details {width:100%;}
.train-exemplar .remix-strip summary {cursor:pointer;width:max-content;min-height:44px;padding:12px 2px;color:#526c71;font-weight:650;}
.train-exemplar .remix-strip .phrase-button {display:inline-flex;margin:5px;min-height:64px;max-width:100%;font-size:1rem;padding:10px;}
.train-exemplar .remix-strip .train-card-art {width:50px;height:50px;}
.train-exemplar .game-shell {grid-template-areas:"header header" "scene prompt" "scene phrases" "scene action" "agency agency" "words words" "progress progress" "levels levels";grid-template-rows:auto 32px minmax(240px,min(420px,calc(100svh - 380px))) 64px auto auto auto auto;}
@media(max-width:760px){
 .train-exemplar .scene-art.train {height:clamp(120px,calc(100svh - 430px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),360px);border-radius:20px;}
 .train-exemplar .game-shell {grid-template-areas:"header" "scene" "prompt" "phrases" "action" "agency" "words" "progress" "levels";grid-template-rows:auto auto auto 108px 62px auto auto auto auto;}

}
@media(max-width:760px) and (max-height:700px){
 .train-exemplar .scene-art.train {height:clamp(120px,calc(100svh - 400px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),360px);}
 .train-exemplar .game-shell {grid-template-rows:auto auto auto 96px 48px auto auto auto auto;}
}
@media(prefers-reduced-motion:reduce){.train-exemplar .scene-art *,.train-exemplar .phrase-button {animation:none!important;transition:none!important;}}
.train-exemplar.quiet-mode .scene-art *,.train-exemplar.quiet-mode .phrase-button {animation:none!important;transition:none!important;}
/* Landscape phones keep the scene and choices together, with agency in view. */
@media (min-width: 540px) and (max-width: 760px) and (max-height: 500px) {
 .train-exemplar .game-shell {padding:8px 12px;gap:6px 10px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"header header" "scene prompt" "scene phrases" "scene action" "agency agency" "words words" "progress progress" "levels levels";grid-template-rows:auto 24px 76px 44px auto auto auto auto;}
 .train-exemplar .top-bar {flex-wrap:nowrap;gap:8px;}
 .train-exemplar .eyebrow {display:none;}
 .train-exemplar h1 {font-size:1.35rem;}
 .train-exemplar .top-controls {width:auto;}
 .train-exemplar .control-button {min-height:34px;padding:6px 8px;font-size:.68rem;}
 .train-exemplar .stage,.train-exemplar .scene-art.train {height:100%;min-height:0;}
 .train-exemplar .train-canvas {max-width:302px;}
 .train-exemplar .prompt {font-size:.72rem;line-height:1.2;min-height:0;}
 .train-exemplar .phrase-grid .phrase-button {height:76px;font-size:.7rem;padding:3px;gap:0;}
 .train-exemplar .phrase-grid .phrase-icon {width:46px;height:46px;}
 .train-exemplar .regulation-row .phrase-button {min-height:60px;height:60px;padding:4px;font-size:.7rem;}
 .train-exemplar .regulation-row .phrase-icon {width:28px;height:28px;}
 .train-exemplar .phrase-bubble {font-size:.8rem;padding:6px 10px;}
}