/* Stage layout (?layout=stage: the homepage hero, headline over the scene). The controls follow the old live hero: one
   compact group, the caption chip with a single row of joystick and mode buttons, in white with navy ink on the blue
   ground (the brand's white controls: 1.5px rule, 8% lift). Nothing else sits over the car: the owner's call on
   26 September 2026 took the pause and camera buttons off. Phones keep the group along the bottom; wide screens tuck it
   bottom right. Loaded with the scene, active only when body.stage is set: by f1-stage-flag.js at the start of the
   scene's body, before three.js loads (f1-original.js sets it again). */
body.stage #controls{display:flex;flex-direction:column;align-items:stretch;gap:10px;left:22px;right:22px;bottom:18px;z-index:2}
body.stage #ctlrow{display:flex;align-items:center;justify-content:flex-start;gap:10px}
/* Phones and portrait tablets (the narrow tier) put the joystick on the right, under the dominant thumb, and the mode rail
   to its left: portrait use is one-thumbed and mostly right-handed, and the wide composition already keeps the stick bottom
   right. The markup order (stick, rail) is unchanged for keyboard and screen-reader users; only the row is mirrored. */
body.stage:not(.stage-wide) #ctlrow{flex-direction:row-reverse}
/* The car is framed centre and reaches down to the row, so the caption moves under the row, where nothing sits; tighter
   spacing keeps the row within a few pixels of where it was. */
body.stage:not(.stage-wide) #controls{gap:6px;bottom:8px}
body.stage:not(.stage-wide) #modecap{order:1;align-self:flex-start;text-align:left}
body.stage #stick,body.stage[data-scene-mode] #stick{display:block;position:relative;left:auto;right:auto;bottom:auto;top:auto;flex:0 0 auto;width:72px;height:72px;background:#fff;border:1.5px solid rgba(42,58,77,.18);box-shadow:0 2px 14px rgba(10,10,10,.08);color:#6b7b8c}
body.stage #stick:hover,body.stage #stick:active{background:#fff}
body.stage #stick::after,body.stage[data-scene-mode] #stick::after{content:none}
body.stage #stick .sdir{color:#6b7b8c;font-size:10px;opacity:.9}
body.stage #knob{width:28px;height:28px;margin:-14px;background:#6b7b8c;border:0;box-shadow:none}
body.stage #rail{flex:1;min-width:0;padding:4px;gap:2px;background:#fff;border:1.5px solid rgba(42,58,77,.18);border-radius:999px;box-shadow:0 2px 14px rgba(10,10,10,.08)}
body.stage #rail button{flex:1 1 auto;min-width:0;min-height:38px;padding:9px 6px;border-radius:999px;background:transparent;color:#6b7b8c;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;white-space:nowrap}   /* each button takes its label's width and shares the rest, so "Wind tunnel" never wraps */
body.stage #rail button small{display:none}
body.stage #rail button:hover{background:transparent;color:#2a3a4d}
body.stage #rail button.active,body.stage #rail button.active:hover{background:#f2b257;color:#fff}
body.stage #rail button:focus-visible,body.stage #stick:focus-visible{outline:2px solid #f2b257;outline-offset:2px;box-shadow:0 2px 14px rgba(10,10,10,.08)}
body.stage #modecap{order:-1;align-self:flex-start;max-width:100%;min-height:0;margin:0;padding:6px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#2a3a4d;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;text-align:left}
body.stage .telemetry,body.stage .drive-pad,body.stage[data-scene-mode=drive] .drive-pad,body.stage .view-tools,body.stage #pause-scene{display:none}
/* a quiet vignette holds the edges of the scene, as on the old hero; the controls sit above it */
body.stage #hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 80% 70% at 55% 50%,rgba(10,20,30,0) 55%,rgba(10,20,30,.28) 100%)}

/* Loading: no loading screen. The page's headline and the blue ground are there from the first paint; the scene fades in
   behind them once the car is ready (body.hero-ready, set by f1-original.js, also on the fallback), and the controls
   brighten with it. Drags on the scene wait until then. (Owner, 27 September 2026: the loading card went.) */
body.stage #loader{display:none}
/* The opening still (owner, 28 October 2026): until the car is ready, a picture of the scene's first frame stands in for it,
   placed by f1-stage-flag.js where the camera will put the car, so the hero is never empty. The live scene fades in over
   it and it goes once the fade has finished. Rendered from the scene, transparent where the scene is. */
#opening{display:none}
body.stage #opening{display:block;position:absolute;left:0;top:0;max-width:none;height:auto;pointer-events:none;user-select:none}
body.stage.hero-ready #opening{visibility:hidden;transition:visibility 0s linear .5s}
body.stage #app{opacity:0;transition:opacity .45s ease}
body.stage.hero-ready #app{opacity:1}
body.stage:not(.hero-ready) #app{pointer-events:none}
/* the controls are there from the first paint (f1-stage-flag.js sets them to Build and the intro caption), dimmed and
   inert until the car is ready */
body.stage #controls{transition:opacity .45s ease}
body.stage:not(.hero-ready) #controls{opacity:.55;pointer-events:none}
@media(prefers-reduced-motion:reduce){body.stage #app,body.stage #controls,body.stage.hero-ready #opening{transition:none}}

/* the narrowest phones (320-359px); after the base rules so it wins */
@media(max-width:359px){body.stage:not(.stage-wide) #stick,body.stage:not(.stage-wide)[data-scene-mode] #stick{width:64px;height:64px}body.stage:not(.stage-wide) #ctlrow{gap:8px}body.stage:not(.stage-wide) #rail button{font-size:9px;letter-spacing:.02em;padding:9px 3px}
 body.stage:not(.stage-wide) #modecap{font-size:8.5px;letter-spacing:.02em;padding:6px 10px}}   /* captions stay on one line */

/* the wide composition (copy left, car right: body.stage-wide, set from the page's --stage-tier by f1-stage-flag.js) */
body.stage.stage-wide #controls{left:auto;right:48px;bottom:24px;align-items:flex-end;gap:9px;width:auto}
body.stage.stage-wide #ctlrow{width:auto;justify-content:flex-end;gap:12px}
body.stage.stage-wide #rail{flex:0 0 auto;width:auto}   /* the scene's coarse-pointer rule would stretch it across the row */
body.stage.stage-wide #rail button{flex:0 0 auto;padding:9px 16px;font-size:10.5px;letter-spacing:.1em}
body.stage.stage-wide #modecap{align-self:flex-end;order:1;font-size:10px;letter-spacing:.14em;text-align:right}