/* Final HUD layout: grid reserves space for each control instead of independent
   top/bottom offsets. UI zoom still determines the size of the whole console. */
body.easyMode #hud {
  position:fixed; inset:0; display:grid;
  grid-template-columns:96px minmax(0,1fr) 270px;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:12px 20px; padding:110px 30px 28px;
  pointer-events:none;
}
body.easyMode #hud > * { pointer-events:auto; min-width:0; }
body.easyMode #hud > :where(.objective,.wind,.map,.instruments,#captainPanel,#throttleLever,#easyDrivePad,#raceHud,#takedownHud) {
  position:relative; inset:auto; transform:none; margin:0;
  max-height:none;
}
body.easyMode #hud .objective { grid-area:1 / 1 / 2 / 3; max-width:480px; width:auto; align-self:start; }
body.easyMode #hud .wind { grid-area:1 / 3; width:100%; align-self:start; }
body.easyMode #hud .map { grid-area:2 / 3; width:100%; align-self:start; }
body.easyMode #hud #throttleLever { grid-area:3 / 1; width:calc(var(--lever-w) + 34px); }
body.easyMode #hud #captainPanel { grid-area:3 / 2; width:min(100%,360px); justify-self:start; }
body.easyMode #hud #easyDrivePad { grid-area:3 / 3; width:270px; }
body.easyMode #hud .instruments { grid-area:4 / 1 / 5 / 4; justify-self:center; width:max-content; max-width:100%; }
body.easyMode #hud :is(#raceHud,#takedownHud) { grid-area:1 / 1 / 2 / 3; justify-self:start; width:310px; min-width:0; align-self:start; }
body.easyMode.challengeMode #hud .objective { display:none; }
body.easyMode #hud .easyHelp { display:none; }
body.easyMode #hud #alignment { display:none; }
#chartToggle { min-width:44px; min-height:44px; }
body:has(#menu:not([hidden])) #chartToggle { display:none; }
#hudChartClose { min-width:44px; min-height:44px; margin-top:8px; width:100%; }
/* Match the actual scaled viewport rather than relying on CSS pixels alone. */
@media (orientation:portrait) {
 body.easyMode #hud {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto minmax(12px,1fr) auto auto auto;
  padding:72px 12px 18px; gap:10px;
 }
 body.easyMode #hud .objective { grid-area:1 / 1 / 2 / 3; max-width:none; }
 body.easyMode #hud .wind { grid-area:2 / 1; }
 body.easyMode #hud .map { grid-area:2 / 2; }
 body.easyMode #hud #captainPanel { grid-area:4 / 1 / 5 / 3; width:100%; }
 body.easyMode #hud #throttleLever { grid-area:5 / 1; justify-self:start; }
 body.easyMode #hud #easyDrivePad { grid-area:5 / 2; justify-self:end; width:210px; }
 body.easyMode #hud .instruments { grid-area:6 / 1 / 7 / 3; }
 body.easyMode #hud :is(#raceHud,#takedownHud) { grid-area:1 / 1 / 2 / 3; width:100%; }
 body.easyMode #hud .captainActions { grid-template-columns:1fr 1fr; }
 body.easyMode #hud #captainPanel .eyebrow { display:none; }
 body.easyMode #hud #captainPanel { padding:8px; }
 body.easyMode #hud #interactButton { min-height:48px; padding:10px; }
}
@media (orientation:portrait) and (min-width:601px) {
 body.easyMode #hud { padding-top:110px; padding-left:24px; padding-right:24px; }
 body.easyMode #hud #easyDrivePad { width:270px; }
 body.easyMode #hud .objective { display:block; }
}
/* On compact displays chart details are available via the Chart button. */
@media (orientation:portrait) and (max-height:740px), (orientation:landscape) and (max-height:540px) {
 body.easyMode #hud .wind, body.easyMode #hud .map { display:none; }
}
@media (orientation:portrait) and (max-width:360px) {
 body.easyMode #hud #easyDrivePad { width:190px; }
 body.easyMode #hud { padding-left:8px; padding-right:8px; }
}
@media (orientation:portrait) and (max-height:600px) {
 body.easyMode #hud .objective { display:block; padding:8px 10px; max-height:76px; overflow:auto; }
 body.easyMode #hud .objective .eyebrow { display:none; }
 body.easyMode #hud .objective h3 { font-size:14px; margin:0 0 3px; }
 body.easyMode #hud .objective p { font-size:12px; }
 body.easyMode #hud #captainPanel .captainActions { display:none; }
 body.easyMode #hud { padding-top:70px; gap:6px; padding-bottom:8px; grid-template-rows:auto 0 minmax(0,1fr) auto auto auto; }
 body.easyMode #hud :is(#raceHud,#takedownHud) { padding:8px; }
 body.easyMode #hud :is(#raceHud,#takedownHud) > strong { font-size:24px; }
 body.easyMode #hud :is(#raceHud,#takedownHud) p { margin:4px; }
}
@media (orientation:landscape) and (max-height:540px) {
 :root { --track:92px; --lever-w:50px; }
 body.easyMode #hud { padding:66px 12px 8px; gap:8px; grid-template-columns:84px minmax(0,1fr) 240px; grid-template-rows:minmax(0,1fr) auto auto; }
 body.easyMode #hud .objective { grid-area:1 / 2; max-height:64px; overflow:auto; padding:6px 10px; }
 body.easyMode #hud .objective h3 { font-size:14px; margin:0; }
 body.easyMode #hud .objective .eyebrow,body.easyMode #hud .objective p { display:none; }
 body.easyMode #hud #throttleLever { grid-area:2 / 1; }
 body.easyMode #hud #captainPanel { grid-area:2 / 2; width:100%; padding:6px; }
 body.easyMode #hud #captainPanel :is(.captainActions,.eyebrow) { display:none; }
 body.easyMode #hud #interactButton { min-height:48px; font-size:11px; padding:8px; }
 body.easyMode #hud #easyDrivePad { grid-area:2 / 3; width:240px; padding:8px; }
 body.easyMode #hud .instruments { grid-area:3 / 1 / 4 / 4; padding:6px; }
 body.easyMode #hud :is(#raceHud,#takedownHud) { grid-area:1 / 2; padding:4px; width:100%; }
 body.easyMode #hud :is(#raceHud,#takedownHud) > strong { font-size:20px; display:inline; }
 body.easyMode #hud :is(#raceHud,#takedownHud) :is(p,button) { display:none; }
 body.easyMode #hud :is(#raceHud,#takedownHud) > small { font-size:9px; }
 body.easyMode #hud .instruments strong { font-size:18px; }
}
@media (orientation:landscape) and (max-width:650px) {
 body.easyMode #hud { grid-template-columns:74px minmax(0,1fr) 190px; }
 body.easyMode #hud #easyDrivePad { width:190px; }
 body.easyMode #hud #touchJoystick { width:98px; height:98px; }
 body.easyMode #hud #touchStop { width:56px; margin-left:4px; }
}
/* The expanded chart intentionally overlays the scene, never resizes controls. */
body #hud.chartOpen .map {
 display:block; position:fixed; z-index:8; grid-area:auto;
 left:50%; top:50%; transform:translate(-50%,-50%);
 width:min(300px,calc(92vw / var(--ui))); max-height:calc(84dvh / var(--ui)); overflow:auto;
 box-shadow:0 0 0 100vmax #04121cbf; padding:16px;
}
body #hud.chartOpen .map canvas { display:block; width:100%; height:auto; }
#overlay .result { width:min(420px,calc(100vw / var(--ui) - 24px)); max-height:calc(100dvh / var(--ui) - 24px); overflow:auto; }
/* Cutouts are physical viewport insets, so compensate for the HUD zoom. */
body.easyMode #hud { padding-left:max(12px,calc(env(safe-area-inset-left) / var(--ui))); padding-right:max(12px,calc(env(safe-area-inset-right) / var(--ui))); }
body.easyMode #hud :is(#throttleLever,#captainPanel,#easyDrivePad,.instruments) { align-self:end; }

@media (orientation:portrait) and (max-height:600px) {
 body.easyMode #hud :is(#raceHud,#takedownHud) { max-height:110px; overflow:auto; }
}
@media (orientation:landscape) and (min-height:541px) and (max-height:800px) {
 body.easyMode.challengeMode #hud:not(.chartOpen) .map { display:none; }
}

header { background:linear-gradient(#061e29d9,#061e2966); }
@media (orientation:landscape) and (max-height:540px) {
 body.easyMode:not(.challengeMode) #hud .objective { display:block; }
}
.brand { flex-shrink:0; white-space:nowrap; }
@media (orientation:portrait) { #phase { display:none; } }
#toast { top:45%; max-width:calc(90vw / var(--ui)); text-align:center; }
body.easyMode #hud { padding-bottom:max(8px,calc(env(safe-area-inset-bottom) / var(--ui))); }

body:has(#hud.chartOpen) #toast { display:none; }
/* Captain mode keeps its checklist and docking assist in separate grid cells. */
body:not(.easyMode) #hud {
 position:fixed; inset:0; display:grid; pointer-events:none;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
 grid-template-rows:auto minmax(0,1fr) auto auto;
 padding:110px 18px 12px; gap:12px;
}
body:not(.easyMode) #hud > :where(.objective,.wind,.map,.instruments,#captainPanel,#alignment,.controls) {
 position:relative; inset:auto; transform:none; margin:0; width:auto;
 min-width:0; min-height:0; max-width:100%; max-height:100%; pointer-events:auto;
}
body:not(.easyMode) #hud .objective { grid-area:1 / 1 / 2 / 3; max-height:110px; overflow:auto; }
body:not(.easyMode) #hud .wind { grid-area:1 / 3; padding:10px; }
body:not(.easyMode) #hud .windrow { margin:3px 0; }
body:not(.easyMode) #hud .windrow strong { font-size:24px; }
body:not(.easyMode) #hud #windEffect { display:none; }
body:not(.easyMode) #hud #captainPanel { grid-area:2 / 1; overflow:auto; align-self:end; }
body:not(.easyMode) #hud #alignment { grid-area:2 / 2; overflow:auto; align-self:end; }
body:not(.easyMode) #hud .map { grid-area:2 / 3; overflow:auto; align-self:start; }
body:not(.easyMode) #hud .map canvas { max-width:100%; height:auto; }
body:not(.easyMode) #hud .instruments { grid-area:3 / 1 / 4 / 4; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:10px; }
body:not(.easyMode) #hud .instruments > div { min-width:0; padding:0 8px; }
body:not(.easyMode) #hud .instruments strong { font-size:22px; white-space:normal; overflow-wrap:anywhere; }
body:not(.easyMode) #hud .controls { grid-area:4 / 1 / 5 / 4; flex-wrap:wrap; justify-content:center; gap:8px 12px; }
body:not(.easyMode) #hud :is(.captainActions button,#interactButton) { min-height:44px; }
@media (orientation:portrait) {
 body:not(.easyMode) #hud { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto minmax(0,1fr) auto auto; }
 body:not(.easyMode) #hud .objective { grid-area:1 / 1 / 2 / 3; }
 body:not(.easyMode) #hud .wind { grid-area:2 / 1; }
 body:not(.easyMode) #hud .map { grid-area:2 / 2; }
 body:not(.easyMode) #hud #captainPanel { grid-area:3 / 1; }
 body:not(.easyMode) #hud #alignment { grid-area:3 / 2; }
 body:not(.easyMode) #hud .instruments { grid-area:4 / 1 / 5 / 3; }
 body:not(.easyMode) #hud .controls { grid-area:5 / 1 / 6 / 3; }
}
@media (max-width:600px) {
 body:not(.easyMode) #hud { padding:72px 10px 8px; gap:8px; }
 body:not(.easyMode) #hud .objective { padding:8px; max-height:80px; }
 body:not(.easyMode) #hud .objective h3 { margin:0 0 4px; font-size:15px; }
 body:not(.easyMode) #hud .objective .eyebrow { display:none; }
 body:not(.easyMode) #hud :is(#captainPanel,#alignment) { padding:8px; }
 body:not(.easyMode) #hud .instruments { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 body:not(.easyMode) #hud .instruments strong { font-size:17px; }
 body:not(.easyMode) #hud .instruments small { letter-spacing:0; font-size:9px; }
 body:not(.easyMode) #captainChecklist { grid-template-columns:1fr; }
}
@media (orientation:portrait) and (max-height:740px), (orientation:landscape) and (max-height:540px) {
 body:not(.easyMode) #hud:not(.chartOpen) .map, body:not(.easyMode) #hud .wind { display:none; }
}
@media (orientation:landscape) and (max-height:540px) {
 body:not(.easyMode) #hud { padding:66px 12px 8px; gap:6px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 body:not(.easyMode) #hud .objective { max-height:44px; padding:6px; }
 body:not(.easyMode) #hud .objective h3 { font-size:14px; margin:0; }
 body:not(.easyMode) #hud .objective :is(.eyebrow,p) { display:none; }
 body:not(.easyMode) #hud .instruments { grid-area:3 / 1 / 4 / 3; grid-template-columns:repeat(5,minmax(0,1fr)); padding:6px; }
 body:not(.easyMode) #hud .controls { grid-area:4 / 1 / 5 / 3; }
}

body:not(.easyMode) #hud .wind { align-self:start; }
body:not(.easyMode) #hud .controls { background:#092630cf; padding:4px; }
@media (orientation:portrait), (orientation:landscape) and (max-height:540px) {
 body:not(.easyMode) #hud:has(#alignment[hidden]) #captainPanel { grid-column:1 / 3; }
}
body:not(.easyMode) #hud {
 padding-left:max(10px,calc(env(safe-area-inset-left) / var(--ui)));
 padding-right:max(10px,calc(env(safe-area-inset-right) / var(--ui)));
 padding-bottom:max(8px,calc(env(safe-area-inset-bottom) / var(--ui)));
}
/* Touch-first play keeps the sea clear. Supplemental UI lives behind INFO. */
#touchInfo { display:none; min-width:48px; min-height:44px; }
body.touchMinimal #touchInfo { display:block; }
body.touchMinimal #chartToggle,
body:has(#menu:not([hidden])) #touchInfo { display:none; }
body.touchMinimal #phase, body.touchMinimal .brand small, body.touchMinimal .mark { display:none; }
body.touchMinimal header { padding:8px 12px; background:linear-gradient(#061e29b3,transparent); }
body.touchMinimal .brand { font-size:12px; letter-spacing:2px; }
body.touchMinimal #sound { display:none; }
body.touchMinimal #pause { min-width:44px; min-height:44px; }
body.touchMinimal #hud { display:block; padding:0; }
body.touchMinimal #hud #throttleLever {
 position:absolute; left:max(12px,calc(env(safe-area-inset-left) / var(--ui))); right:auto;
 top:auto; bottom:max(12px,calc(env(safe-area-inset-bottom) / var(--ui)));
 --track:clamp(92px,calc(18dvh / var(--ui)),150px); --lever-w:48px;
 width:82px; margin:0;
}
body.touchMinimal #hud #easyDrivePad {
 position:absolute; right:max(12px,calc(env(safe-area-inset-right) / var(--ui))); left:auto;
 top:auto; bottom:max(12px,calc(env(safe-area-inset-bottom) / var(--ui)));
 width:190px; padding:0; margin:0; background:none; border:0; backdrop-filter:none;
}
body.touchMinimal #easyDrivePad .eyebrow { display:none; }
body.touchMinimal #hud #touchJoystick { width:112px; height:112px; background:#143640b3; }
body.touchMinimal #hud #touchStop { width:60px; height:64px; margin-left:8px; }
body.touchMinimal #touchStop small { display:none; }
body.touchMinimal #hud #captainPanel {
 position:absolute; top:64px; bottom:auto; left:50%; transform:translateX(-50%);
 width:min(300px,calc(92vw / var(--ui))); background:none; border:0; padding:0;
 backdrop-filter:none; margin:0;
}
body.touchMinimal #captainPanel > :not(#interactButton) { display:none; }
body.touchMinimal #hud #captainPanel:has(#interactButton:disabled) { display:none; }
body.touchMinimal #hud #interactButton { min-height:44px; margin:0; padding:10px; font-size:13px; }
body.touchMinimal #toast { display:none; }
body.touchMinimal #hud :is(#raceHud,#takedownHud) {
 position:absolute; top:64px; left:50%; transform:translateX(-50%); width:auto;
 min-width:150px; max-width:calc(90vw / var(--ui)); padding:6px 12px;
}
body.touchMinimal #hud :is(#raceHud,#takedownHud) :is(p,small,button) { display:none; }
body.touchMinimal #hud :is(#raceHud,#takedownHud) > strong { font-size:22px; }
#touchDetails { display:none; }
body.touchMinimal #hud #touchDetails:not([hidden]) {
 display:grid; position:fixed; z-index:10; inset:64px auto auto 50%; transform:translateX(-50%);
 width:min(440px,calc(94vw / var(--ui))); max-height:calc(100dvh / var(--ui) - 80px);
 overflow:auto; overscroll-behavior:contain; padding:14px; gap:12px;
 background:#092630f5; border:1px solid #c8dad54d; border-radius:12px;
 box-shadow:0 0 0 100vmax #04121c99; pointer-events:auto;
}
body.touchMinimal #hud #touchDetails > button { min-height:44px; background:#efc889; color:#172e33; }
body.touchMinimal #hud #touchDetails :is(.objective,.wind,.map,.instruments,.captainActions) {
 display:block; position:static; inset:auto; transform:none; width:100%; max-width:none;
 max-height:none; margin:0; padding:10px; background:none; border:0; overflow:visible;
}
body.touchMinimal #hud #touchDetails .objective p { display:block; }
body.touchMinimal #hud #touchDetails .map canvas { display:block; width:100%; height:auto; }
body.touchMinimal #hud #touchDetails .instruments { display:flex; flex-wrap:wrap; gap:12px; }
body.touchMinimal #hud #touchDetails .instruments > div { min-width:0; padding:0; border:0; }
body.touchMinimal #hud #touchDetails .instruments strong { font-size:20px; }
body.touchMinimal #hud #touchDetails .captainActions { display:flex; gap:8px; }
body.touchMinimal #hud #touchDetails .captainActions button { min-height:44px; }
body.touchInfoOpen #hud > :is(#captainPanel,#throttleLever,#easyDrivePad) { visibility:hidden; }