/* ===========================================================================
   Responsive layer: 360 px phone  ->  55" digital signage.

   Everything above is authored in fixed pixels against a ~1600x900 reference
   and every media query in style.css is a `max-` query, so from ~901 px upward
   the interface never changed again: at 3840x2160 the menu was 10.2% of the
   screen and body copy was 14 px. This layer restores proportion by scaling the
   interface roots — and only those, never #sea/#vignette, which must stay at
   native resolution for the 3D view.

   --ui is set continuously by ui-scale.js; the ladder below is the no-JS
   fallback. At --ui:1 every rule here is a no-op, so the tuned phone, tablet
   and laptop layouts are bit-for-bit unchanged.
   =========================================================================== */

:root { --ui: 1; --vh: calc(1vh / var(--ui)); --dvh: calc(1dvh / var(--ui)); --vw: calc(1vw / var(--ui)); }

/* Landscape: scale only when BOTH axes allow, so tall HUD columns always fit. */
@media (min-width: 1700px) and (min-height: 950px)  { :root { --ui: 1.05 } }
@media (min-width: 1900px) and (min-height: 1060px) { :root { --ui: 1.20 } }
@media (min-width: 2200px) and (min-height: 1230px) { :root { --ui: 1.35 } }
@media (min-width: 2560px) and (min-height: 1400px) { :root { --ui: 1.60 } }
@media (min-width: 3000px) and (min-height: 1680px) { :root { --ui: 1.85 } }
@media (min-width: 3400px) and (min-height: 1900px) { :root { --ui: 2.10 } }
@media (min-width: 3800px) and (min-height: 2100px) { :root { --ui: 2.40 } }

/* Portrait signage and large portrait tablets are led by width. */
@media (orientation: portrait) and (min-width: 1000px) { :root { --ui: 1.35 } }
@media (orientation: portrait) and (min-width: 1400px) { :root { --ui: 1.75 } }
@media (orientation: portrait) and (min-width: 1800px) { :root { --ui: 2.10 } }
@media (orientation: portrait) and (min-width: 2100px) { :root { --ui: 2.40 } }

/* The interface roots. #sea and #vignette are deliberately excluded. */
header,
#menu,
#hud,
#overlay,
#toast,
#sceneCaption,
#raceCountdown { zoom: var(--ui); }

/* account.html / research.html: single-column documents, same scale. */
body > main { zoom: var(--ui); }

/* ---------------------------------------------------------------------------
   Signage refinements — large, distant, often unattended displays.
   --------------------------------------------------------------------------- */

/* Long-form copy is unreadable at 3 m and steals room the readouts need. */
@media (min-width: 2200px) {
  #menu > details,
  .fine { display: none; }
}

/* A 55" panel is viewed from across a room: favour the live readouts. */
@media (min-width: 2560px) and (min-height: 1400px) {
  .objective h3 { font-size: 22px; }
  .instruments strong { font-size: 34px; }
  #raceHud > strong,
  #takedownHud > strong { font-size: 40px; }
}

/* The keyboard legend stays hidden in easy mode. It lists captain-mode bindings
   (IPS sway, thruster) that do not apply, and it sits in the same bottom-centre
   strip as .easyHelp, which now describes the engine lever instead. */

/* Portrait signage: the HUD was laid out for a wide screen. Stack it instead of
   letting the left and right columns collide in the middle of a 1080 px panel. */
@media (orientation: portrait) and (min-width: 1000px) {
  /* style.css pins these with .easyMode-prefixed selectors, so match that
     specificity: a bare .map here lost, leaving both top AND bottom set, which
     stretched the wind and chart panels down the whole screen. top/bottom are
     reset explicitly for the same reason. */
  .objective, .easyMode .objective {
    left: calc(3 * var(--vw)); right: calc(3 * var(--vw)); max-width: none; }
  .wind, .easyMode .wind {
    right: calc(3 * var(--vw)); left: auto; top: auto; bottom: calc(34 * var(--vh)); }
  .map, .easyMode .map {
    right: calc(3 * var(--vw)); left: auto; top: auto; bottom: calc(20 * var(--vh)); }
  #alignment, .easyMode #alignment {
    left: calc(3 * var(--vw)); right: auto; top: auto; bottom: calc(20 * var(--vh)); }
  .easyMode #easyDrivePad { right: calc(3 * var(--vw)); left: auto; top: auto; bottom: calc(7 * var(--vh)); }
  .easyMode #captainPanel { left: calc(3 * var(--vw)); right: auto; top: auto; bottom: calc(7 * var(--vh)); }
  .instruments, .easyMode .instruments { bottom: calc(2 * var(--vh)); }
  .panel { left: calc(3 * var(--vw)); width: min(calc(88 * var(--vw)), 620px); }
  /* The wide portrait panel reaches the right edge, where the floating yacht
     caption used to sit. The boat selector already names the yacht. */
  #sceneCaption { display: none; }
}

/* Very wide video walls: keep the centred readouts off the far edges. */
@media (min-aspect-ratio: 3/1) {
  .objective { max-width: 26vw; }
  #menu { left: 4vw; }
}

/* ---------------------------------------------------------------------------
   Viewport units under `zoom`.

   Percentages, centring and pixel lengths all scale correctly inside a zoomed
   element, but vh/vw/dvh do NOT compensate — they resolve against the real
   viewport and are then multiplied by the zoom again. Left alone, the menu's
   `max-height:86vh` became 86vh x 2.4 and the panel overflowed a 4K screen with
   no way to scroll. These helpers divide the unit back out.

   Scoped to >=1000px, the point below which --ui is always 1, so every
   hand-tuned phone and small-tablet rule is left completely alone.
   --------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  #menu                 { max-height: calc(86 * var(--vh)); }
  .challengeMode #menu  { max-height: calc(100 * var(--dvh) - 100px); }
  #overlay .result      { max-height: calc(90 * var(--dvh)); overflow: auto; }
}

/* ---------------------------------------------------------------------------
   Small phones (<=360 px).

   Pre-existing overlap, unrelated to scaling: `.easyMode #captainPanel` is
   `calc(100% - 236px)` with `min-width:100px`, but the drive pad occupies
   210px + 10px of gutter. At 320px the panel is floored to 100px and its right
   edge lands 10px inside the pad. Trim the pad so both fit with clearance.
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .easyMode #easyDrivePad { width: 190px; padding: 7px; }
  #touchJoystick { width: 104px; height: 104px; }
  #touchStop { width: 56px; height: 60px; margin-left: 6px; }
  .easyMode #captainPanel { width: calc(100% - 216px); }
}

/* ===========================================================================
   Engine control lever + touchscreen driving layout.

   The joystick's vertical axis had to be HELD to hold a speed, so you could not
   keep a steady cruise and steer with the same thumb. The lever is set once and
   stays, and the joystick becomes a pure rudder. Left thumb drives, right thumb
   steers - the layout every touch game uses, and it scales straight up to a
   wall-mounted panel where both hands are free.
   =========================================================================== */

:root { --track: 210px; --lever-w: 62px; }
.easyMode #throttleLever { position: absolute; left: 30px; bottom: 110px;
  width: calc(var(--lever-w) + 34px); padding: 10px 8px 8px; text-align: center;
  touch-action: none; user-select: none; -webkit-user-select: none; }
#throttleLever .eyebrow { font-size: 9px; }

/* Machined binnacle, recessed gate and a rubber throttle grip. The outer
   dimensions stay fixed so the surrounding responsive layout remains valid. */
.easyMode #throttleLever {
  border-radius: 18px 18px 12px 12px;
  border: 1px solid #879497;
  background: linear-gradient(100deg,#28363b,#536065 8%,#263338 18%,#17272e 80%,#667277 97%,#25343a);
  box-shadow: inset 0 1px 0 #d4dddf88, inset 0 -3px 0 #060e13, 0 8px 18px #00101966;
}
#throttleLever .eyebrow { color: #d6e0df; letter-spacing: 1.5px; }
#leverTrack {
  --lever-inset: 22px;
  position: relative; width: var(--lever-w); height: var(--track);
  margin: 7px auto 5px; border-radius: 9px;
  background: repeating-linear-gradient(to bottom,transparent 0 9px,#bbc4bf66 9px 10px,transparent 10px 20px) left 5px top 22px / 6px calc(100% - 44px) no-repeat,
    linear-gradient(90deg,#364248,#8d9797 46%,#424d52 54%,#243239);
  border: 1px solid #07161c; overflow: hidden;
  box-shadow: inset 0 2px 5px #0009, 0 1px 0 #ced9d044;
  touch-action: none; cursor: grab;
}
#leverTrack:active { cursor: grabbing; }
#leverTrack:focus-visible { outline: 3px solid #f1c777; outline-offset: 3px; }
#leverTrack::before {
  content: ''; position: absolute; width: 8px; left: calc(50% - 4px);
  top: 19px; bottom: 19px; border-radius: 5px;
  background: #050d11; box-shadow: 1px 0 0 #d4dedb88, inset 2px 0 3px #000;
  pointer-events: none;
}
#leverTrack::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  border-top: 2px solid #efc889; pointer-events: none;
}
#leverFill {
  position: absolute; left: calc(50% - 2px); width: 4px;
  background: #dabc83; border-radius: 2px; pointer-events: none;
}
#leverFill.astern { background: #91b9ca; }
#leverHandle {
  position: absolute; z-index: 3; left: 5px; right: 5px;
  height: 32px; margin-top: -16px; border-radius: 9px;
  border: 1px solid #091115;
  background: linear-gradient(#5a6263,#20292d 24%,#111c21 70%,#38464a);
  box-shadow: inset 0 2px 1px #b9c2be88, inset 0 -2px 0 #040b0e, 0 4px 5px #0009;
  pointer-events: none;
}
#leverHandle::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 9px; height: 11px;
  border-top: 1px solid #87918c; border-bottom: 1px solid #87918c;
  background: linear-gradient(transparent 45%,#87918c 45% 55%,transparent 55%);
}
.leverMark {
  position: absolute; z-index: 2; left: 0; right: 0; text-align: center;
  font-size: 8px; font-weight: 700; letter-spacing: .8px; color: #ecf0e9;
  text-shadow: 0 1px 2px #000; pointer-events: none;
}
.leverAhead { top: 4px; } .leverAstern { bottom: 4px; }
.leverNeutral { display: none; }
#leverReadout {
  display: block; font-size: 11px; line-height: normal; letter-spacing: 0;
  color: #efddb6; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: #06151bcc; border-radius: 3px; box-shadow: inset 0 1px 2px #0008;
}

/* Steering pad is now a rudder: label the axis it actually uses. */
.joyPort, .joyStbd { position: absolute; top: 50%; margin-top: -6px; font-size: 9px;
  color: #dfeae9; pointer-events: none; }
.joyPort { left: 8px; } .joyStbd { right: 8px; }
#touchJoystick.deflected { border-color: #efc88999; }

/* --- Where the three touch zones sit ------------------------------------ */
/*
   Hand-computing a "bottom" for the finish panel at every breakpoint kept
   producing off-by-a-few overlaps, so the offsets are derived instead. Each
   breakpoint declares three numbers - the lever's track length, its total
   height, and how far the control row sits off the bottom - and the finish
   panel's position falls out of them. Change one number and the stack stays
   consistent.
*/
:root { --lever-h: 264px; --ctrl-bottom: 110px; }
.easyMode #throttleLever,
.easyMode #easyDrivePad { bottom: var(--ctrl-bottom); }

/* Wide screens: lever | finish panel | steering, all on the bottom row. */
@media (min-width: 901px) {
  .easyMode #captainPanel { left: 152px; }
}

/* Narrower than that, three abreast does not fit: the finish panel becomes a
   centred bar sitting directly above the two thumb controls. */
@media (max-width: 900px) {
  .easyMode #captainPanel { left: 50%; right: auto; transform: translateX(-50%);
    width: min(430px, calc(100% - 20px));
    bottom: calc(var(--ctrl-bottom) + var(--lever-h) + 14px); }
}
@media (max-width: 600px) {
  :root { --track: 150px; --lever-w: 54px; --lever-h: 204px; --ctrl-bottom: 108px; }
  .easyMode #throttleLever { left: 10px; }
}
@media (max-width: 360px) {
  :root { --track: 132px; --lever-w: 48px; --lever-h: 186px; }
}

/* Short landscape (phone on its side): the finish panel rejoins the bottom row,
   so it opts out of the derived offset above.
   Pre-existing: style.css put these at bottom:61 while .instruments occupies up
   to 69px, so they overlapped by 8px before the lever existed. */
@media (max-height: 520px) and (min-width: 601px) {
  :root { --track: 112px; --lever-w: 50px; --lever-h: 166px; --ctrl-bottom: 74px; }
  .easyMode #throttleLever { left: 15px; }
  .easyMode #captainPanel { bottom: var(--ctrl-bottom); left: auto; right: 290px;
    transform: none; width: 210px; }
}
@media (max-height: 420px) and (min-width: 601px) {
  :root { --track: 92px; --lever-h: 146px; }
}

/* Portrait signage and portrait kiosks. A squarer portrait (1200x1600) makes the
   lever proportionally taller than a 9:16 panel, so the track is shortened and
   the control row lifted clear of the instrument strip. */
@media (orientation: portrait) and (min-width: 1000px) {
  :root { --track: 170px; --lever-h: 224px; --ctrl-bottom: calc(10 * var(--vh)); }
  .easyMode #throttleLever { left: calc(3 * var(--vw)); }
  .easyMode #captainPanel { left: 50%; right: auto; transform: translateX(-50%);
    width: min(560px, calc(72 * var(--vw)));
    bottom: calc(var(--ctrl-bottom) + var(--lever-h) + 14px); }
}

/* --- Display cutouts ----------------------------------------------------- */
/* index.html opts into viewport-fit=cover, so on a notched phone these controls
   would otherwise sit under the notch or the home indicator. */
@supports (padding: env(safe-area-inset-left)) {
  .easyMode #throttleLever { margin-left: env(safe-area-inset-left, 0px); }
  .easyMode #easyDrivePad  { margin-right: env(safe-area-inset-right, 0px); }
  .easyMode #throttleLever,
  .easyMode #easyDrivePad,
  .easyMode #captainPanel  { margin-bottom: env(safe-area-inset-bottom, 0px); }
  .instruments, .easyMode .instruments { margin-bottom: env(safe-area-inset-bottom, 0px); }
  /* header padding differs per breakpoint, so inset its contents instead of
     restating it and clobbering the tuned values. */
  .brand    { margin-left: env(safe-area-inset-left, 0px); }
  .topright { margin-right: env(safe-area-inset-right, 0px); }
}

/* Short phones (iPhone SE, older Android). Below ~700px tall the objective banner,
   the finish panel, the lever and the instruments cannot all stack, so lay the
   finish panel's secondary buttons side by side and trim the banner. */
@media (max-height: 700px) and (max-width: 600px) {
  .easyMode #captainPanel { padding: 7px; }   /* bottom stays derived */
  .easyMode #captainPanel .eyebrow { display: none; }
  .easyMode .captainActions { grid-template-columns: 1fr 1fr; }
  .easyMode #interactButton { min-height: 56px; font-size: 12px; }
  .easyMode .objective { max-height: 64px; }
}

/* Ultra-short portrait phones (320x480 class). Nothing else fits between the
   banner and the lever, so the finish button stands alone. */
@media (max-height: 520px) and (max-width: 600px) {
  .easyMode .objective { max-height: 40px; }
  .easyMode .captainActions { display: none; }
}

/* Below ~500px tall in portrait (iPhone 4 class, the supported floor) the
   objective banner and a 44px-plus finish target cannot both fit above the
   lever. Working controls beat an advisory banner; guidance still arrives
   through the toast messages. */
@media (max-height: 500px) and (max-width: 600px) {
  .easyMode .objective { display: none; }
}