/* Flight instruments float at the edges; only each dial keeps a local face. */
#app-shell #game-screen #hud #attitude-card,
#app-shell #game-screen #hud #hud-strip,
#app-shell #game-screen #engine-card {
  background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #hud {
  width: 216px; height: 244px; grid-template-columns: 216px; gap: 8px;
}
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #hud #attitude-card {
  width: 216px; height: 244px; padding: 8px; grid-template-rows: 20px 192px 16px; gap: 0;
}
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #hud #hud-strip {
  display: none;
}
#app-shell #systems-card { display: none; }
#app-shell #systems-canvas { display: block; width: 120px; height: 180px; }
#app-shell #game-screen.hud-mode-full #hud #hud-strip .hud-data-grid { display: none !important; }
#app-shell #game-screen.hud-mode-full #hud-strip .hud-lever-bank { display: none; }
html[data-instrument-profile="classic"] #app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #hud #hud-strip .hud-data-grid {
  display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 48px; height: 48px; order: -1; gap: 12px; padding: 0 12px;
}
html[data-instrument-profile="classic"] #app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #hud #hud-strip {
  display: block; position: absolute; bottom: 244px; width: 216px; height: 56px; padding: 0;
}
html[data-instrument-profile="classic"] #app-shell #game-screen.hud-mode-full #hud-strip .hud-metric:nth-child(n+3) { display: none; }
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-compact #hud-strip {
  background: rgba(30,51,69,.3); border: 0;
}
#app-shell #game-screen #engine-card {
  position: absolute; right: max(16px,var(--safe-right)); bottom: max(16px,var(--safe-bottom));
  width: 236px; height: 200px; padding: 0; display: grid; grid-template-columns: 180px 48px; gap: 8px; align-items: center; z-index: 8;
}
#app-shell #game-screen #engine-canvas { width: 180px; height: 180px; }
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #engine-card {
  width: 180px; height: 368px; grid-template-columns: 180px; grid-template-rows: 180px 180px;
}
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #systems-card { display: block; grid-column: 1; grid-row: 1; justify-self: center; }
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #engine-canvas { grid-column: 1; grid-row: 2; }
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #desktop-throttle-panel { grid-column: 2; grid-row: 2; }
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-compact #engine-card { display: none; }
#app-shell #game-screen.hud-mode-compact #engine-canvas,
#app-shell #game-screen.hud-mode-compact #engine-thrust-value { display: none; }
#app-shell #game-screen.hud-mode-hidden #engine-card { display: none; }
#app-shell #desktop-throttle-panel { display: grid; grid-template-columns: 48px; grid-template-rows: 20px 120px 20px; gap: 6px; justify-self: center; justify-items: center; align-items: center; color: var(--text); font: 12px var(--font-ui); }
#app-shell #desktop-throttle {
  width: 120px; min-width: 120px; height: 44px; min-height: 44px; margin: 0;
  transform: rotate(-90deg); background: transparent; border: 0; padding: 0; accent-color: var(--accent); cursor: ns-resize;
}
#app-shell #desktop-throttle-panel output { font-size: 14px; }
#app-shell #game-screen #desktop-throttle-panel { display: none; }
/* Chart controls sit in a dedicated left rail with full touch targets. */
#app-shell #game-screen:not(.mobile-controls-enabled) #minimap,
#app-shell #game-screen.mobile-controls-enabled #minimap {
  width: 276px; height: 224px; display: grid; grid-template-columns: 44px 224px; grid-template-rows: 224px; gap: 8px;
  border: 0; background: transparent; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#app-shell #game-screen #minimap-canvas { grid-column: 2; grid-row: 1; width: 224px; height: 224px; aspect-ratio: auto; background: rgba(30,51,69,.48); }
#app-shell #game-screen .map-controls {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-self: start; gap: 4px;
  background: rgba(30,51,69,.35); border: 0; padding: 0;
}
#app-shell #game-screen .map-controls output { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 11px; white-space: nowrap; }
#app-shell #game-screen #flight-network-chip { display: none; }
/* Four actions, followed directly by session information. Detail panels expand beneath the actions. */
#app-shell #settings-dialog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 8px; }
#app-shell #settings-header { display: none; }
#app-shell #settings-dialog #settings-resume-button { position: static; width: 100%; min-height: 48px; margin: 0; order: 0; }
#app-shell #settings-dialog .settings-tabs { display: contents; }
#app-shell #settings-dialog .settings-tabs button { min-height: 48px; margin: 0; border: 1px solid var(--glass-line); font-size: 14px; order: 0; }
#app-shell #settings-dialog .settings-section { grid-column: 1/-1; margin: 16px 0 0; padding-top: 16px; order: 1; }
#app-shell #settings-dialog .settings-session-content { order: 2; }
#app-shell #settings-dialog .settings-session-actions { margin-top: 8px; }
#app-shell #settings-dialog .settings-session-actions > .settings-label,
#app-shell #settings-dialog .settings-session-actions > .message { display: none; }
#app-shell #settings-network-status { display: block; font-size: 16px; color: var(--text); margin: 8px 0; }
@media(max-width:1000px), (max-height:550px) {
  #app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #hud { transform: scale(.82); }
  #app-shell #game-screen:not(.mobile-controls-enabled) #minimap,
#app-shell #game-screen.mobile-controls-enabled #minimap { width: 220px; height: 168px; grid-template-columns: 44px 168px; grid-template-rows: 168px; }
  #app-shell #game-screen #minimap-canvas { width: 168px; height: 168px; }
  #app-shell #game-screen #engine-card { width: 212px; height: 180px; grid-template-columns: 156px 48px; }
  #app-shell #game-screen #engine-canvas { width: 156px; height: 156px; }
  #app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #engine-card {
    width: 156px; height: 336px; grid-template-columns: 156px; grid-template-rows: 156px 172px;
  }
  #app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #systems-canvas { height: 156px; }
}
#app-shell #game-screen.mobile-controls-enabled #minimap { width: 196px; height: 144px; grid-template-columns: 44px 144px; grid-template-rows: 144px; }
#app-shell #game-screen.mobile-controls-enabled #minimap-canvas { width: 144px; height: 144px; }
#app-shell #game-screen.mobile-controls-enabled #mobile-flight-strip { right: 220px; }
#app-shell #game-screen.mobile-controls-enabled #desktop-throttle-panel { display: none; }
#app-shell #game-screen.mobile-controls-enabled #engine-card { width: 108px; height: 116px; display: block; right: 76px; bottom: 128px; }
#app-shell #game-screen.mobile-controls-enabled #engine-canvas { width: 108px; height: 108px; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-full #hud { width: 140px; height: 140px; grid-template-columns: 140px; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-full #hud #hud-strip { display: none !important; }
#app-shell #game-screen.mobile-controls-enabled .mobile-throttle { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media(max-width:700px) {
  #app-shell #game-screen.mobile-controls-enabled #mobile-flight-strip { left: 156px; right: 220px; padding: 6px; gap: 4px; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #app-shell #game-screen.mobile-controls-enabled #mobile-flight-strip > div:nth-of-type(4) { display: none; }
}
@media(max-height:550px) {
  #app-shell #settings-dialog { width: min(520px,calc(100vw - 32px)); padding: 16px; }
  #app-shell #settings-dialog .settings-section { margin-top: 8px; padding-top: 12px; }
}

#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-full #engine-card,
#app-shell #game-screen:not(.mobile-controls-enabled).hud-mode-compact #engine-card { padding: 0; gap: 8px; overflow: visible; justify-content: start; }
#app-shell #desktop-throttle { justify-self: center; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-full #engine-card,
#app-shell #game-screen.mobile-controls-enabled.hud-mode-compact #engine-card { display: block; width: 100px; height: 100px; right: 188px; bottom: 116px; padding: 0; }
#app-shell #game-screen.mobile-controls-enabled #engine-canvas { width: 100px; height: 100px; }

/* A mechanical lever grip remains operable as the native accessible range input. */
#app-shell #desktop-throttle { -webkit-appearance: none; appearance: none; }
#app-shell #desktop-throttle::-webkit-slider-runnable-track { height: 5px; border: 1px solid rgba(210,230,242,.7); background: rgba(27,48,65,.8); }
#app-shell #desktop-throttle::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 30px; margin-top: -13px; border: 1px solid #d8eaf4; border-radius: 2px; background: linear-gradient(90deg,#759bb3,#d0e5ef 45%,#87afc6 55%,#557e98); cursor: ns-resize; }
#app-shell #desktop-throttle::-moz-range-track { height: 4px; border: 1px solid rgba(210,230,242,.7); background: rgba(27,48,65,.8); }
#app-shell #desktop-throttle::-moz-range-thumb { width: 12px; height: 30px; border: 1px solid #d8eaf4; border-radius: 2px; background: #9dc5dc; }
#app-shell #desktop-throttle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The touch grip follows the full aircraft-specific throttle range. */
#app-shell #mobile-throttle-thumb { bottom: calc((100% - 22px) * var(--mobile-throttle-level)); }

/* Landscape touch cockpit: one stick on the left, all actions in the right bank. */
#app-shell #game-screen.mobile-controls-enabled #mobile-controls button,
#app-shell #game-screen.mobile-controls-enabled #settings-button,
#app-shell #game-screen.mobile-controls-enabled #hud-mode-button,
#app-shell #game-screen.mobile-controls-enabled .map-controls button {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: 50%; clip-path: none; display: flex; align-items: center; justify-content: center;
}
#app-shell #game-screen.mobile-controls-enabled .mobile-button-bank button,
#app-shell #game-screen.mobile-controls-enabled #settings-button,
#app-shell #game-screen.mobile-controls-enabled #hud-mode-button {
  position: fixed; top: auto; left: auto; margin: 0;
}
#app-shell #game-screen.mobile-controls-enabled #mobile-controls button::after { display: none; }
/* Support actions occupy the top row. Flight actions are nearest the thumb. */
#app-shell #game-screen.mobile-controls-enabled #settings-button { right: calc(max(12px,var(--safe-right)) + 220px); bottom: calc(max(16px,var(--safe-bottom)) + 104px); }
#app-shell #game-screen.mobile-controls-enabled #hud-mode-button { right: calc(max(12px,var(--safe-right)) + 168px); bottom: calc(max(16px,var(--safe-bottom)) + 104px); }
#app-shell #game-screen.mobile-controls-enabled #mobile-camera-button { right: calc(max(12px,var(--safe-right)) + 116px); bottom: calc(max(16px,var(--safe-bottom)) + 104px); left: auto; }
#app-shell #game-screen.mobile-controls-enabled #mobile-chat-button { right: calc(max(12px,var(--safe-right)) + 64px); bottom: calc(max(16px,var(--safe-bottom)) + 104px); left: auto; }
#app-shell #game-screen.mobile-controls-enabled .mobile-button-bank button[data-mobile-hold="yaw-left"] { right: calc(max(12px,var(--safe-right)) + 220px); bottom: calc(max(16px,var(--safe-bottom)) + 52px); left: auto; }
#app-shell #game-screen.mobile-controls-enabled .mobile-button-bank button[data-mobile-hold="yaw-right"] { right: calc(max(12px,var(--safe-right)) + 168px); bottom: calc(max(16px,var(--safe-bottom)) + 52px); left: auto; }
#app-shell #game-screen.mobile-controls-enabled #mobile-flap-button { right: calc(max(12px,var(--safe-right)) + 116px); bottom: calc(max(16px,var(--safe-bottom)) + 52px); left: auto; }
#app-shell #game-screen.mobile-controls-enabled #mobile-spoiler-button { right: calc(max(12px,var(--safe-right)) + 64px); bottom: calc(max(16px,var(--safe-bottom)) + 52px); left: auto; }
#app-shell #game-screen.mobile-controls-enabled #mobile-brake-button { right: calc(max(12px,var(--safe-right)) + 116px); bottom: max(16px,var(--safe-bottom)); left: auto; }
#app-shell #game-screen.mobile-controls-enabled #mobile-gear-button { right: calc(max(12px,var(--safe-right)) + 64px); bottom: max(16px,var(--safe-bottom)); left: auto; }
#app-shell #game-screen.mobile-controls-enabled #hud-mode-button strong { font-size: 9px; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-full #hud { left: calc(50% - 168px); top: max(8px,var(--safe-top)); bottom: auto; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-full #engine-card,
#app-shell #game-screen.mobile-controls-enabled.hud-mode-compact #engine-card { left: calc(50% - 20px); right: auto; top: max(16px,var(--safe-top)); bottom: auto; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-full #mobile-flight-strip { display: none; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-compact #mobile-flight-strip { left: max(12px,var(--safe-left)); right: calc(50% + 32px); }
html[data-instrument-profile="classic"] #app-shell #game-screen.mobile-controls-enabled.hud-mode-full #mobile-flight-strip { display: grid; top: max(156px,calc(var(--safe-top) + 148px)); left: calc(50% - 168px); right: auto; width: 248px; height: 40px; min-height: 40px; }
@media(max-width:600px) {
  #app-shell #game-screen.mobile-controls-enabled #engine-canvas { width: 88px; height: 88px; }
  #app-shell #game-screen.mobile-controls-enabled.hud-mode-full #engine-card,
  #app-shell #game-screen.mobile-controls-enabled.hud-mode-compact #engine-card { width: 88px; height: 88px; }
}
/* Chat stays inside the visual viewport, including when the software keyboard opens. */
#app-shell #chat-form { grid-template-columns: minmax(0,1fr) 72px; }
#app-shell #chat-form .chat-header { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; min-width: 0; }
#app-shell #chat-form .chat-header strong { font-size: 18px; }
#app-shell #chat-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
#app-shell #chat-form svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#app-shell #chat-form .chat-action-icon { display: none; }
#app-shell #game-screen.mobile-controls-enabled #chat-form {
  position: fixed; top: var(--chat-view-top,12px); bottom: auto; left: auto; right: max(12px,var(--safe-right)); transform: none;
  width: min(420px,calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
  max-height: var(--chat-view-height,calc(100vh - 24px)); overflow-y: auto; overscroll-behavior: contain;
  grid-template-columns: minmax(0,1fr) 44px; gap: 8px; padding: 12px; touch-action: pan-y;
}
#app-shell #game-screen.mobile-controls-enabled #chat-form input { min-height: 44px; font-size: 16px; }
#app-shell #game-screen.mobile-controls-enabled #chat-form button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 50%; clip-path: none; padding: 0; display: flex; align-items: center; justify-content: center; }
#app-shell #game-screen.mobile-controls-enabled #chat-form .chat-action-icon { display: block; }
#app-shell #game-screen.mobile-controls-enabled #chat-form button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
#app-shell #game-screen.mobile-controls-enabled.chat-open #mobile-controls,
#app-shell #game-screen.mobile-controls-enabled.chat-open #settings-button,
#app-shell #game-screen.mobile-controls-enabled.chat-open #hud-mode-button { visibility: hidden; pointer-events: none; }
#app-shell #game-screen.mobile-controls-enabled #mobile-controls #mobile-reset-button { display: none; }
#app-shell #game-screen.mobile-controls-enabled .map-controls { background: transparent; }
#app-shell #game-screen.mobile-controls-enabled .map-controls button { background: var(--hfs-glass); border: 1px solid var(--glass-line); }
#app-shell #chat-input::placeholder { color: #d1e2ee; opacity: 1; }
html[data-instrument-profile="classic"] #app-shell #game-screen.mobile-controls-enabled.hud-mode-full #mobile-flight-strip,
#app-shell #game-screen.mobile-controls-enabled.hud-mode-compact #mobile-flight-strip { left: calc(50% - 168px); right: auto; width: 206px; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 6px 8px; gap: 10px; }
#app-shell #game-screen.mobile-controls-enabled #mobile-flight-strip strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
#app-shell #game-screen.mobile-controls-enabled #mobile-flight-strip > div:nth-of-type(4) { display: none; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-hidden #engine-card { display: none; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-compact #engine-card { display: none; }
#app-shell #game-screen #hud-mode-button { display: flex; align-items: center; justify-content: center; gap: 8px; }
#app-shell #hud-mode-button .hud-mode-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#app-shell #game-screen.mobile-controls-enabled #hud-mode-button strong { display: none; }
#app-shell #game-screen.hud-mode-hidden #hud-mode-button .hud-mode-icon { opacity: .55; }
#app-shell #game-screen.mobile-controls-enabled.hud-mode-hidden #mobile-flight-strip { display: none; }
/* Routine flight status belongs in the pause menu; actionable alerts stay by Pause. */
#app-shell #game-screen #annunciator.notice { display: none; }
#app-shell #game-screen:not(.mobile-controls-enabled) #annunciator {
  top: calc(max(16px,var(--safe-top)) + 60px); left: max(16px,var(--safe-left)); right: auto;
  transform: none; max-width: min(360px,calc(100vw - 32px)); text-align: left;
}
#app-shell #combat-objective .combat-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
#app-shell #combat-objective .combat-actions button,
#app-shell #combat-objective #combat-retry { min-height: 44px; }

/* Mouse/touch activation should not leave a persistent blue ring behind.
 * Keyboard users still get a deliberate focus treatment through the
 * modality class, including Safari versions without :focus-visible. */
#app-shell :where(button, a, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

#app-shell .aircraft-navigation:focus::after {
  border-color: transparent;
}

html.keyboard-nav #app-shell :where(button, a, input, select, textarea, summary, [tabindex]):focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

html.keyboard-nav #app-shell .aircraft-navigation:focus::after {
  border-color: var(--accent);
}

/* Shared audio controls fit the existing angular pause panels. */
.audio-mix-row { display:grid; grid-template-columns: minmax(64px, .8fr) minmax(60px, 1.6fr) 42px 76px; align-items:center; gap:10px; min-height:48px; }
.audio-mix-row label { color:var(--text-main, #edf5ff); font-size:13px; }
.audio-mix-row input { width:100%; min-width:0; min-height:44px; accent-color:var(--accent, #68b9ff); }
.audio-mix-row output { font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
.audio-mix-row .audio-preview { min-height:44px; padding:8px; font-size:12px; }
.audio-caption { position:absolute; z-index:16; bottom:calc(env(safe-area-inset-bottom, 0px) + 26px); left:50%; transform:translateX(-50%); max-width:min(72vw, 560px); padding:9px 16px; color:#f5f9ff; background:rgba(9, 25, 43, .82); border-left:2px solid #82c6ff; text-align:center; font-size:14px; pointer-events:none; }
.audio-caption[hidden], .flight-paused .audio-caption { display:none; }
@media (max-width:700px) { .audio-mix-row { gap:6px; grid-template-columns:64px minmax(50px, 1fr) 36px 62px; } .audio-caption { bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); max-width:60vw; font-size:12px; } }

/* Legible labels on the compact touch layout. */
#app-shell #game-screen.mobile-controls-enabled #mobile-camera-zone span { font-size: 11px; }
#app-shell #game-screen.mobile-controls-enabled #mobile-throttle-value { font-size: 12px; }
#app-shell #game-screen.mobile-controls-enabled #settings-dialog .settings-label { font-size: 12px; }
#app-shell #settings-dialog #logout-button { font-size: 14px; }

#app-shell #game-screen .hud-heading-readout span,
#app-shell #game-screen .hud-attitude-foot span { font-size: 11px; }

#app-shell #settings-dialog .hud-preferences-note { font-size: 12px; line-height: 1.5; }