/* The music and scenery stay visible; occasional commands open on demand. */
.control-drawer{display:contents}
.control-drawer>summary{display:none}
/* Draw the play symbol in CSS so Safari never substitutes an emoji. */
.stage #play.scene-play{font-size:0!important;padding:0}
.stage #play.scene-play::before{content:"";width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:30px solid currentColor;margin-left:6px}
.stage #play.scene-play:not([data-state="idle"])::before{width:14px;height:14px;border:0;border-radius:2px;background:currentColor;margin:0}
@media(max-width:900px),(max-width:1000px) and (max-height:550px){
 .stage,.stage.adult-ambiance{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:40px 210px 30px minmax(240px,40svh) auto;gap:5px;padding-bottom:5px}
 .stage header,.stage.adult-ambiance header{height:40px;grid-row:1;grid-column:1}
 .stage .brand{display:none}
 .stage .sign,.stage.adult-ambiance .sign{top:5px;left:0;transform:none;width:70%;max-width:70%;border:0;border-radius:10px;padding:5px;background:transparent;box-shadow:none}
 .stage h1,.stage.adult-ambiance h1{font-size:17px;margin:0;letter-spacing:-.5px}
 .stage .sign p,.stage .sign:before,.stage .sign:after,.stage .stars{display:none}
 .stage .back{top:0;right:0;left:auto;min-height:40px;margin:0;padding:11px 8px;font-size:10px}
 .stage .score-panel,.stage.panoramic .score-panel{grid-row:2;grid-column:1;height:100%;padding:4px 6px;border-width:3px;border-radius:18px;box-shadow:none}
 .stage .score-heading{min-height:28px;font-size:10px;align-items:center}
 .stage #score-source{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65%}
 .stage #fullscreen{font-size:0;min-width:40px;min-height:32px;padding:0;border-width:1px;border-radius:10px}
 .stage #fullscreen::before{content:"⛶";font-size:20px}
 .stage .score-message{min-height:24px}
 .stage .score-panel .cue{font-size:11px;padding:2px 8px;box-shadow:none}
 .stage .pulse-panel,.stage .pulse-panel:has(.beats b:nth-child(5)){grid-row:3;grid-column:1;width:auto;max-width:100%;justify-self:center;height:30px;min-height:30px;flex-direction:row;padding:0 10px;border-width:0;background:transparent;gap:7px;border-radius:0}
 .stage .pulse-panel>span{font-size:10px}
 .stage .beats b,.stage .pulse-panel:has(.beats b:nth-child(5)) .beats b{width:23px;height:23px;flex-basis:23px;font-size:15px}
 .stage .landscape,.stage.adult-ambiance .landscape{grid-row:4;grid-column:1;height:100%;min-height:240px;border-radius:14px}
 .stage .control-drawer{display:block;grid-row:5;grid-column:1;width:100%;min-width:0;background:#fffdf4ed;border:1px solid #daceef;border-radius:14px;color:var(--ink)}
 .stage .control-drawer>summary{display:block;cursor:pointer;min-height:44px;padding:12px;text-align:center;font-size:14px;font-weight:bold;list-style:none}
 .stage .control-drawer>summary::after{content:" ＋"}
 .stage .control-drawer[open]>summary::after{content:" −"}
 .stage .control-drawer>summary::-webkit-details-marker{display:none}
 .stage .control-drawer:not([open])>.controls{display:none}
 .stage .control-drawer .controls{position:relative;inset:auto;transform:none;display:grid;grid-template-columns:1fr;grid-template-rows:44px 44px auto;height:auto;width:100%;max-width:none;padding:6px;gap:5px;border:0;box-shadow:none;background:transparent}
 .stage .controls .play-controls{display:none}
 .stage .controls #listen{grid-column:1;grid-row:1;min-height:44px;font-size:16px}
 .stage .controls .tempo{grid-column:1;grid-row:2;display:flex;flex-wrap:nowrap;gap:8px;padding:4px 8px}
 .stage .controls .tempo input{flex:1;min-width:0}
 .stage .controls .level{grid-column:1;grid-row:3;display:flex;align-items:center}
 .stage #play.scene-play{top:32%;left:50%;width:60px;height:60px;min-height:0;padding:0}
 .stage #play.scene-play::before{border-top-width:15px;border-bottom-width:15px;border-left-width:24px}
 .stage #play.scene-play:not([data-state="idle"]){width:44px;height:44px;top:6px;left:6px}
 body.night-mode .stage .control-drawer{background:#1c303b;color:#e5ece7;border-color:#4e6771}
 .game-settings{margin-top:6px}
 .game-settings>summary{font-size:14px;min-height:44px;padding:12px 0}
}
@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){
 .stage,.stage.adult-ambiance{height:auto;min-height:100svh;grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:32px 195px minmax(180px,48svh);gap:4px}
 .stage header,.stage.adult-ambiance header{grid-row:1;grid-column:1/-1;height:36px}
 .stage .sign,.stage.adult-ambiance .sign{width:60%;max-width:60%;top:2px}
 .stage .score-panel,.stage.panoramic .score-panel{grid-row:2;grid-column:1/-1}
 .stage .pulse-panel,.stage .pulse-panel:has(.beats b:nth-child(5)){grid-row:1;grid-column:2;z-index:4;align-self:center;justify-self:start}
 .stage .pulse-panel>span{display:none}
 .stage .back{min-height:34px;padding:9px 7px}
 .stage .landscape,.stage.adult-ambiance .landscape{grid-row:3;grid-column:1/-1;min-height:160px}
 .stage .control-drawer{grid-row:4;grid-column:1/-1}
}

/* Explicit icon anchoring also avoids anonymous text changing its grid position. */
.stage #play.scene-play::before{
 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
}
.stage #play.scene-play{
 background:linear-gradient(145deg,#ad67ebb8,#7632bcb8);
 box-shadow:0 4px 16px #35216c40;
}
.stage.adult-ambiance #play.scene-play,
body.night-mode .stage #play.scene-play{
 background:linear-gradient(145deg,#527d7cb8,#203d49b8);
 box-shadow:0 4px 16px #18242c40;
}
.stage #play.scene-play:not([data-state="idle"]){box-shadow:0 3px 10px #18242c40}

/* A visible destination and a quiet stop control beside the scenery. */
.stage .panorama-station{width:clamp(160px,22vw,330px)}
.stage.adult-ambiance:not(.panoramic) .panorama-station{width:clamp(150px,30%,330px);max-height:75%}
@media(min-width:1001px), (min-width:901px) and (min-height:551px){
 .stage:not(.adult-ambiance){width:100%;height:max(800px,calc(100svh - 12px));aspect-ratio:auto}
 .stage:not(.adult-ambiance) .score-panel{height:32%}
 .stage #play.scene-play:not([data-state="idle"]){top:var(--stop-top,8px);left:12px;transform:none}
 .stage.adult-ambiance #play.scene-play[data-state="idle"]{top:calc(var(--stop-top,452px) + 54px);left:50%;transform:translate(-50%,-50%)}
 .stage.adult-ambiance #play.scene-play:not([data-state="idle"]){top:var(--stop-top,452px);left:12px;transform:none}
}
@media(max-width:900px),(max-width:1000px) and (max-height:550px){
 .stage .panorama-station{width:clamp(150px,42vw,210px)}
 .stage.adult-ambiance:not(.panoramic) .panorama-station{width:clamp(145px,42%,210px)}
}

/* Larger learning labels, while leaving the musical symbols unchanged. */
.stage .heard-popup strong{font-size:clamp(30px,2.8vw,42px)}
@media(max-width:900px),(max-width:1000px) and (max-height:550px){.stage .heard-popup strong{font-size:30px}}

/* Keep a clear line of text below the blue marker. */
.stage .score-message{min-height:44px}

/* Retain layout geometry so hiding the controls does not shift the rails. */
.stage.is-playing .control-drawer,
.stage.is-playing .controls{visibility:hidden;pointer-events:none}

@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){
 .stage header,.stage.adult-ambiance header{height:32px}
 .stage .score-message{min-height:36px}
}
@media(max-width:900px),(max-width:1000px) and (max-height:550px){
 .stage.is-playing .control-drawer{display:none}
 .stage.is-playing ~ .game-settings,
 .stage.is-playing ~ .help,
 .stage.is-playing ~ .import-status,
 .stage.is-playing ~ footer{display:none}
}

/* Child engine wheels touch y=174 in a 175-unit SVG; wagon wheels share that baseline. */
/* Raise the complete child convoy by 5px, preserving the coupling and wheel alignment. */
.stage:not(.adult-ambiance) #train .train-convoy{bottom:5px}
.stage:not(.adult-ambiance) .train-convoy img.locomotive{margin-bottom:calc(var(--engine-size)*-0.005714286)}
.stage:not(.adult-ambiance) .animal-wagon{margin-bottom:calc(var(--engine-size)*.08 - 4px)}
.stage:not(.adult-ambiance) .animal-wagon::after{
 content:"";position:absolute;right:calc(var(--engine-size)*-.09);
 bottom:calc(var(--engine-size)*.08);width:calc(var(--engine-size)*.11);
 height:calc(var(--engine-size)*.025);min-height:3px;
 border-radius:3px;background:#a95347;box-shadow:inset 0 1px 0 #ffd17b;
}

/* Keep portrait controls below the iPhone status area in standalone/fullscreen mode. */
@media(max-width:900px) and (orientation:portrait){
 .stage,.stage.adult-ambiance{padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
 #page-score-dialog{padding-top:env(safe-area-inset-top,0px)}
}