/* Apex Racing is entirely still: no filters, parallax, 3D canvas or decorative
   animation. These inexpensive, static housings belong to the live controls,
   not to baked-in artwork, so their shadows always line up. */
.racing-signature { display: none; }

body[data-drive-scene="apex-racing"] .speed-hud {
  --apex-edge: #3b4c59;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  grid-template-areas: 'brand brand brand' 'sound gauge rpm';
  gap: 24px;
  left: calc(50% + 122px);
  bottom: 40px;
  width: calc(100% - 324px);
  max-width: 1050px;
  padding: 20px 26px 30px;
  border: 1px solid #42535f;
  border-top-color: #71848e;
  border-radius: 32px;
  background: linear-gradient(135deg, #283139, #121a21 28%, #0a1118 72%, #202a33);
  box-shadow: inset 0 1px 0 #bfddeb24, inset 0 -5px 0 #020508,
    0 7px 0 #080c11, 0 8px 0 #39444c, 0 24px 38px #000b;
}
body[data-drive-scene="apex-racing"] .racing-signature {
  grid-area: brand;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 0;
  pointer-events: none;
}
body[data-drive-scene="apex-racing"] .racing-signature::before,
body[data-drive-scene="apex-racing"] .racing-signature::after {
  content: '';
  flex: 1;
  height: 4px;
  border-block: 1px solid #090f15;
  background: linear-gradient(90deg, transparent, #2889a6 70%, #9edfeb);
  box-shadow: 0 1px 0 #a0e1f017;
}
body[data-drive-scene="apex-racing"] .racing-signature::after { transform: scaleX(-1); }
.racing-brand-inlay {
  flex: 0 0 auto;
  padding: 0 12px 11px;
  border: 1px solid #344752;
  border-bottom-color: #58717e;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 1px 0 #c6ecff1c, inset 0 3px 10px #000, 0 -3px 8px #0007;
  text-align: center;
}
.racing-logo-window { display: block; position: relative; overflow: hidden; width: 166px; height: 99px; }
.racing-logo-window img { display: block; position: absolute; width: 166px; height: 166px; max-width: none; top: -33px; left: 0; }
.racing-edition { display: block; font: 600 9px/1.4 var(--font-data); color: #9bb2c2; letter-spacing: .25em; text-transform: uppercase; }

body[data-drive-scene="apex-racing"] .drive-center-stack { grid-area: gauge; justify-content: center; }
body[data-drive-scene="apex-racing"] .speed-gauge {
  border-radius: 50%;
  background: radial-gradient(circle at 40% 20%, #21303a, #0b121a 58%, #04080d 76%);
  box-shadow: inset 0 3px 10px #000, inset 0 -1px 2px #7ba6bb50,
    0 0 0 5px #05090e, 0 0 0 6px #576a77, 0 0 0 11px #202c36,
    0 0 0 12px #080e15, 0 14px 0 9px #05090e, 0 22px 24px 8px #0009;
}
body[data-drive-scene="apex-racing"] .speed-gauge::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid #84c8eb14;
  pointer-events: none;
}
body[data-drive-scene="apex-racing"] .speed-gauge-value { text-shadow: 0 2px 1px #000; }
body[data-drive-scene="apex-racing"] .speed-gauge-ring { display: block; }
body[data-drive-scene="apex-racing"] .speed-gauge-value { position: absolute; top: 23%; }
body[data-drive-scene="apex-racing"] .speed-gauge-unit { position: absolute; top: 48%; margin: 0; }
body[data-drive-scene="apex-racing"] .speed-gauge-readout > .gear-indicator { position: absolute; bottom: 12%; margin: 0; }
body[data-drive-scene="apex-racing"] .speed-hud .speed-hud-side {
  position: relative;
  min-width: 0 !important;
  width: 100%;
  max-width: none;
  padding: 19px 16px;
  border: 1px solid var(--apex-edge);
  border-top-color: #6e808b;
  border-radius: 16px;
  background: linear-gradient(160deg, #1d2a34, #0b131c 65%);
  box-shadow: inset 0 1px 0 #d2f1ff1a, inset 0 -3px 0 #03090e,
    0 5px 0 #04090f, 0 6px 0 #32404b, 0 15px 20px #0009;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-drive-scene="apex-racing"] .soundboard { grid-area: sound; align-items: stretch; gap: 12px; z-index: 4; }
body[data-drive-scene="apex-racing"] .rpm-panel { grid-area: rpm; gap: 12px; }
body[data-drive-scene="apex-racing"] .hud-side-title { color: #b4c8d5; font-size: 11px; letter-spacing: .14em; }
body[data-drive-scene="apex-racing"] .rpm-rail {
  box-shadow: inset 0 2px 5px #000, 0 1px 0 #88bfd038;
  background: #040b12;
}
body[data-drive-scene="apex-racing"] .soundboard .custom-select-trigger {
  background: #08121c;
  border-color: #3e6579;
  box-shadow: inset 0 2px 6px #0008, 0 1px 0 #8bc7db24;
}
body[data-drive-scene="apex-racing"] .favorite-btn { background: #131f29; box-shadow: inset 0 1px 0 #b4e2fb22, 0 3px 0 #050a11; }
body[data-drive-scene="apex-racing"] .control-strip {
  background: linear-gradient(150deg, #202b34, #0b121b 70%);
  border-color: #465966;
  box-shadow: inset 0 1px 0 #d2f1ff20, 0 5px 0 #04090f, 0 15px 24px #0009;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-drive-scene="apex-racing"] .speed-gauge.kick-pulse,
body[data-drive-scene="apex-racing"] .rpm-panel.shift-pulse { animation: none; }

/* Keep the console clear of the existing control sidebar on shorter car
   displays. The physical screen remains static at every breakpoint. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: landscape),
       (orientation: landscape) and (max-height: 600px) {
  body[data-drive-scene="apex-racing"] .speed-hud {
    left: calc(50% + 108px); width: calc(100% - 276px); bottom: 26px;
    grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
    padding: 12px 16px 22px; gap: 18px;
  }
  body[data-drive-scene="apex-racing"] .speed-gauge { width: 132px; height: 132px; }
  body[data-drive-scene="apex-racing"] .speed-hud .speed-hud-side { padding: 12px 10px; }
  body[data-drive-scene="apex-racing"] .racing-logo-window { width: 122px; height: 73px; }
  body[data-drive-scene="apex-racing"] .racing-logo-window img { width: 122px; height: 122px; top: -24px; }
  body[data-drive-scene="apex-racing"] .racing-brand-inlay { padding-bottom: 8px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body[data-drive-scene="apex-racing"] .speed-hud { bottom: 20px; padding-block: 8px 20px; row-gap: 16px; }
  body[data-drive-scene="apex-racing"] .racing-logo-window { width: 82px; height: 49px; }
  body[data-drive-scene="apex-racing"] .racing-logo-window img { width: 82px; height: 82px; top: -16px; }
  body[data-drive-scene="apex-racing"] .racing-brand-inlay { padding: 0 10px 3px; }
  body[data-drive-scene="apex-racing"] .racing-edition { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) and (orientation: landscape) {
  body[data-drive-scene="apex-racing"] .scene-picker {
    left: calc(50% + 108px); width: calc(100% - 276px); max-width: none;
  }
}
@media (min-width: 701px) and (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) and (pointer: fine) {
  /* The mode is inlaid in the console header, clear of the background chooser
     and the sidebar's Start/Rev controls on a short dashboard. */
  body[data-drive-scene="apex-racing"] .mode-badge { top: auto; bottom: 206px; right: 44px; z-index: 6; font-size: 8px; padding: 5px 9px; }
  body[data-drive-scene="apex-racing"] .soundboard .hud-side-title { display: flex; align-items: center; min-height: 32px; }
  body[data-drive-scene="apex-racing"] .soundboard .voice-row { display: block; }
  body[data-drive-scene="apex-racing"] .soundboard .custom-select-trigger { min-height: 44px; }
  body[data-drive-scene="apex-racing"] .soundboard .favorite-btn { position: absolute; top: 3px; right: 6px; width: 44px; min-height: 44px; }
}

/* Flow layout on phones/tablets: the brand is an inlaid part of the console,
   never a floating overlay over a button. Leave room for the gauge bezel. */
@media (orientation: portrait),
       (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  body[data-drive-scene="apex-racing"] .speed-hud {
    position: relative;
    inset: auto;
    transform: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'brand brand' 'gauge rpm' 'sound sound';
    width: 100%; max-width: none; max-height: none;
    padding: 14px 14px 18px;
    margin: 76px 0 22px;
    gap: 26px 24px;
    overflow: visible;
    border-radius: 24px;
  }
  body[data-drive-scene="apex-racing"] .racing-signature { gap: 12px; }
  body[data-drive-scene="apex-racing"] .scene-picker { left: auto; width: 100%; max-width: none; }
  body[data-drive-scene="apex-racing"] .speed-hud-secondary { display: contents; }
  body[data-drive-scene="apex-racing"] .racing-logo-window { width: 132px; height: 79px; }
  body[data-drive-scene="apex-racing"] .racing-logo-window img { width: 132px; height: 132px; top: -26px; }
  body[data-drive-scene="apex-racing"] .racing-brand-inlay { padding: 0 8px 8px; }
  body[data-drive-scene="apex-racing"] .racing-edition { display: block; }
  body[data-drive-scene="apex-racing"] .speed-gauge { width: min(100%, 160px); height: auto; aspect-ratio: 1; }
  body[data-drive-scene="apex-racing"] .speed-hud .speed-hud-side { padding: 14px 10px; }
  body[data-drive-scene="apex-racing"] .speed-hud .soundboard { padding: 16px 12px; }
  body[data-drive-scene="apex-racing"] .rpm-trace { height: 44px; }
  body[data-drive-scene="apex-racing"] .rpm-scale { font-size: 9px; letter-spacing: 0; }
}
/* The old tablet branch used a fixed bottom sheet. Apex's larger instrument
   housing uses the same unambiguous document flow as the phone instead. */
@media (min-width: 701px) and (orientation: portrait) {
  body[data-drive-scene="apex-racing"] { display: flex; flex-direction: column; position: relative; height: auto; min-height: 100svh; padding: 20px; overflow-x: clip; }
  body[data-drive-scene="apex-racing"] .scene-picker { position: relative; inset: auto; transform: none; width: 100%; max-width: 640px; min-height: 110px; margin-inline: auto; }
  body[data-drive-scene="apex-racing"] .mode-badge { position: absolute; top: 146px; left: 20px; right: auto; }
  body[data-drive-scene="apex-racing"] .speed-hud { max-width: 640px; margin-inline: auto; padding: 20px 26px 30px; }
  body[data-drive-scene="apex-racing"] .drive-center-stack { min-width: 0; }
  body[data-drive-scene="apex-racing"] #panelToggle { position: relative; inset: auto; transform: none; align-self: flex-end; width: auto; height: auto; min-height: 44px; padding: 12px; margin-bottom: 16px; }
  body[data-drive-scene="apex-racing"] #panelToggle .panel-toggle-label,
  body[data-drive-scene="apex-racing"] #panelToggle .panel-toggle-icon { display: none; }
  body[data-drive-scene="apex-racing"] #panelToggle .panel-toggle-text { display: inline; }
  body[data-drive-scene="apex-racing"] #controlsSidebar { position: relative; inset: auto; width: 100%; max-width: 640px; max-height: none; margin-inline: auto; transform: none; }
  body[data-drive-scene="apex-racing"].panel-hidden #controlsSidebar { display: none; }
  body[data-drive-scene="apex-racing"] .control-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-height: none; overflow: visible; border-radius: 20px; padding: 20px; }
  body[data-drive-scene="apex-racing"] .control-strip > * { grid-column: 1 / -1; }
  body[data-drive-scene="apex-racing"] #startBtn,
  body[data-drive-scene="apex-racing"] #revBtn { grid-column: auto; width: 100%; height: 56px; margin: 0; border-radius: 12px; }
}
@media (max-width: 370px) and (orientation: portrait) {
  body[data-drive-scene="apex-racing"] .speed-hud { padding-inline: 12px; column-gap: 22px; }
  body[data-drive-scene="apex-racing"] .speed-gauge-value { font-size: 2rem; }
  body[data-drive-scene="apex-racing"] .speed-gauge-unit { font-size: .625rem; }
  body[data-drive-scene="apex-racing"] .speed-hud .rpm-panel { padding-inline: 8px; }
}