.br-round-gauges {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: var(--br-gauge-bottom, max(118px, calc(env(safe-area-inset-bottom) + 108px)));
  transform: translateX(-50%);
  width: min(650px, calc(100vw - 24px));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, .75vw, 10px);
  pointer-events: none;
  filter: drop-shadow(0 7px 11px rgba(2, 19, 27, .62));
}
.br-round-gauge {
  display: block;
  width: clamp(94px, 16vw, 150px);
  height: auto;
  aspect-ratio: 1;
  flex: 0 1 auto;
}
.br-round-gauge--tach,
.br-round-gauge--speed { width: clamp(110px, 18vw, 165px); }
.br-round-gauge[hidden] { display: none; }
.br-round-gauges--compact { width: min(500px, calc(100vw - 24px)); }
.br-round-gauges--compact .br-round-gauge { width: clamp(84px, 13vw, 120px); }
.br-round-gauges--compact .br-round-gauge--tach,
.br-round-gauges--compact .br-round-gauge--speed { width: clamp(100px, 15vw, 136px); }
@media (max-width: 650px) {
  .br-round-gauges { width: calc(100vw - 12px); bottom: var(--br-gauge-bottom, max(107px, calc(env(safe-area-inset-bottom) + 99px))); gap: 2px; }
  .br-round-gauge, .br-round-gauge--tach, .br-round-gauge--speed,
  .br-round-gauges--compact .br-round-gauge,
  .br-round-gauges--compact .br-round-gauge--tach,
  .br-round-gauges--compact .br-round-gauge--speed { width: min(25vw, 94px); }
  .br-round-gauges:not(.br-round-gauges--turbo) .br-round-gauge { width: min(31vw, 112px); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .br-round-gauges { bottom: var(--br-gauge-bottom, max(7px, env(safe-area-inset-bottom))); }
  .br-round-gauge, .br-round-gauge--tach, .br-round-gauge--speed,
  .br-round-gauges--compact .br-round-gauge,
  .br-round-gauges--compact .br-round-gauge--tach,
  .br-round-gauges--compact .br-round-gauge--speed { width: min(17vh, 100px); }
}

/* Keep the sled and timing tree clear while the drag instruments stay in view. */
#hud .speedometer { display: none; }
.drag-overlay .drag-tach,
.drag-overlay .drag-speed,
.drag-overlay .drag-wideband,
.drag-overlay .drag-boost-scale { display: none; }
.drag-overlay .br-round-gauges {
  left: auto;
  right: 18px;
  bottom: 190px;
  transform: none;
}

/* The timing slip owns the screen once a pass is scored. The gauge cluster
   carries a z-index and the slip does not, so without this it paints on top of
   the results. The readings are frozen at the finish line anyway. */
.drag-overlay.results-open .br-round-gauges { display: none; }

/* Mobile drag HUD: keep the sled in the center, with engine data at both edges. */
@media (max-width:720px), (max-height:600px) and (pointer:coarse) {
  .drag-overlay .br-round-gauges,
  .drag-overlay.running .br-round-gauges {
    inset:0;
    transform:none;
    width:100%;
    height:100%;
    display:block;
  }
  .drag-overlay .br-round-gauges .br-round-gauge,
  .drag-overlay .br-round-gauges--compact .br-round-gauge {
    position:absolute;
    flex:none;
    width:min(25vw,100px);
  }
  .drag-overlay .br-round-gauge--tach { top:130px;left:6px; }
  .drag-overlay .br-round-gauge--afr { top:130px;right:6px; }
  .drag-overlay .br-round-gauge--boost { top:236px;right:6px; }
  .drag-overlay .br-round-gauges .br-round-gauge--speed { top:248px;left:12px;width:min(20vw,78px); }
  .drag-overlay:not(.running) .br-round-gauge--speed { display:none; }
  .drag-overlay.running .br-round-gauges .br-round-gauge { width:min(29vw,112px); }
  .drag-overlay.running .br-round-gauge--tach { top:6px;left:6px; }
  .drag-overlay.running .br-round-gauge--afr { top:100px;right:6px; }
  .drag-overlay.running .br-round-gauge--boost { top:218px;right:6px; }
  .drag-overlay.running .br-round-gauges .br-round-gauge--speed { top:126px;left:12px;width:min(22vw,82px); }
  .drag-overlay.results-open .br-round-gauges { display:none; }
  .drag-overlay .drag-belt-zone:not(.compact) {
    top:242px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);
    width:182px;min-width:0;padding:8px 10px 9px;

  }
  .drag-overlay .drag-belt-zone:not(.compact) .drag-belt-current { font-size:25px; }
  .drag-overlay .drag-belt-zone.compact,
  .drag-overlay.running .drag-belt-zone.compact {
    display:block;top:auto;bottom:126px;left:auto;right:6px;
    transform:none;width:calc(32vw - 6px);padding:5px 6px;
  }
  .drag-overlay .drag-belt-zone.compact .drag-belt-caption { display:flex; }
  .drag-overlay .drag-belt-zone.compact .drag-belt-current { display:block;margin-top:2px;font-size:18px; }
  .drag-overlay.running .drag-belt-zone.compact { display:block; }
  .drag-overlay.results-open .drag-belt-zone { display:none; }
}
@media (max-width:720px) and (max-height:740px) {
  .drag-overlay .drag-belt-zone:not(.compact) { top:204px; }
}
@media (max-width:340px) {
  .drag-overlay .drag-tree { width:150px; }
}
@media (max-height:600px) and (min-width:721px) and (pointer:coarse) {
  .drag-overlay .br-round-gauges .br-round-gauge,
  .drag-overlay .br-round-gauges--compact .br-round-gauge { width:min(23vh,90px); }
  .drag-overlay .br-round-gauge--tach { top:6px;left:6px; }
  .drag-overlay .br-round-gauge--afr { top:6px;right:6px; }
  .drag-overlay .br-round-gauge--boost { top:106px;right:6px; }
  .drag-overlay.running .br-round-gauges .br-round-gauge { width:min(22vh,86px); }
  .drag-overlay.running .br-round-gauge--tach { top:6px;left:6px; }
  .drag-overlay.running .br-round-gauge--afr { top:94px;right:6px; }
  .drag-overlay.running .br-round-gauge--boost { top:186px;right:6px; }
  .drag-overlay.running .br-round-gauges .br-round-gauge--speed { top:110px;left:12px;width:min(19vh,72px); }
  .drag-overlay .drag-belt-zone:not(.compact) { top:108px;left:6px;right:auto;transform:none;width:174px; }
  .drag-overlay .drag-belt-zone.compact,
  .drag-overlay.running .drag-belt-zone.compact { top:208px;bottom:auto;left:6px;right:auto;width:142px; }
}

/* The desktop pass uses the same clear center as the phone cockpit. */
@media(min-width:721px) and (min-height:601px) {
  .drag-overlay.running .drag-top,
  .drag-overlay.running .drag-readout,
  .drag-overlay.running .drag-bottom { display:none; }
  .drag-overlay .br-round-gauges { inset:0;width:100%;height:100%;display:block;transform:none; }
  .drag-overlay .br-round-gauges .br-round-gauge { position:absolute;flex:none;width:156px; }
  .drag-overlay .br-round-gauges .br-round-gauge--tach { top:16px;left:16px;width:170px; }
  .drag-overlay .br-round-gauges .br-round-gauge--speed { top:196px;left:30px;width:126px; }
  .drag-overlay .br-round-gauges .br-round-gauge--afr { top:132px;right:16px; }
  .drag-overlay .br-round-gauges .br-round-gauge--boost { top:298px;right:16px; }
}
/* Final slips own the screen, including after the desktop split layout. */
.drag-overlay.results-open .br-round-gauges { display:none; }

/* Belt telemetry belongs in the control dock, never over the snowmobile. */
.drag-overlay .drag-belt-zone.docked{left:12px;right:12px;top:auto;bottom:calc(4px + env(safe-area-inset-bottom));transform:none;width:auto;min-width:0;height:54px;box-sizing:border-box;padding:6px 12px;display:grid;grid-template-columns:82px minmax(0,1fr) 62px 60px 70px;grid-template-rows:14px 22px;gap:2px 9px;text-align:left;border-radius:7px;background:linear-gradient(120deg,#102633f5,#081824f0);box-shadow:inset 0 1px #c8e6f019,0 3px 12px #00101a40;backdrop-filter:blur(5px)}
.drag-overlay .docked .drag-belt-caption{grid-column:1;grid-row:1;font-size:6px;gap:6px}
.drag-overlay .docked .drag-belt-caption span{font-size:7px;letter-spacing:.06em}
.drag-overlay .docked .drag-belt-caption strong{font-size:7px;letter-spacing:.02em;padding:1px 3px;line-height:1.2}
.drag-overlay .drag-belt-zone.docked .drag-belt-current{grid-column:1;grid-row:2;display:block;font:800 20px/1.1 Consolas,monospace;letter-spacing:0;margin:0;white-space:nowrap}
.drag-overlay .docked .drag-belt-target{grid-column:2;grid-row:1;text-align:left;font:700 8px monospace;letter-spacing:.01em;margin:0}
.drag-overlay .docked .drag-belt-scale{grid-column:2;grid-row:2;height:8px;margin:7px 0 2px;border-radius:3px}
.drag-overlay .docked .drag-belt-scale i{top:-2px;height:10px;border-width:1px}
.drag-overlay .docked .drag-belt-scale b{top:-3px;width:3px;height:12px}
.drag-overlay .docked .drag-belt-ticks,.drag-overlay .docked .drag-belt-aim{display:none}
/* One column each. Both used to be placed in column 3 - along with the drive
   ratio before it moved out - so all of them drew on top of one another and
   the dock read as overlapping garbage on a phone. */
.drag-overlay .drag-belt-slip{grid-column:3;grid-row:1/3;border-left:1px solid #aacad333;padding-left:8px;align-self:center;min-width:0}
.drag-overlay .drag-belt-slip.drag-track-slip{grid-column:4}
.drag-overlay .drag-belt-slip.drag-drive-ratio{grid-column:5}
.drag-overlay .drag-belt-slip span{font:7px monospace;letter-spacing:.07em;color:#91b4c7;display:block}
.drag-overlay .drag-belt-slip b{font:800 12px Consolas,monospace;color:#e9efeb;display:block;white-space:nowrap}
.drag-overlay .drag-belt-slip strong[hidden]{display:none}
.drag-overlay .drag-belt-zone.docked.compact,.drag-overlay.running .drag-belt-zone.docked.compact{left:10px;right:10px;top:auto;bottom:calc(4px + env(safe-area-inset-bottom));width:auto;min-width:0;height:28px;padding:4px 9px;display:flex;align-items:center;gap:12px;transform:none;border-radius:4px}
.drag-overlay .docked.compact .drag-belt-caption{display:flex}
.drag-overlay .drag-belt-zone.docked.compact .drag-belt-current{font-size:14px;display:block;margin:0}
.drag-overlay .docked.compact .drag-belt-scale{flex:1;max-width:160px;min-width:20px;height:5px;margin:0}
.drag-overlay .docked.compact .drag-belt-target{margin-left:auto;font-size:7px}
.drag-overlay .docked.compact .drag-belt-slip{display:flex;align-items:center;gap:5px;padding-left:8px;margin-left:auto;white-space:nowrap}
/* The running dock is 28px tall and already carries a temperature, a scale and
   a target window. Two slip readouts fit beside those; three do not, and the
   third used to spill straight off the edge of the screen.

   So the drive ratio runs as a warning light here rather than a gauge. It
   takes the track slip's place only while the sled is actually geared out -
   and geared out means the track is HOOKED, so the readout it replaces is
   reading +0 MPH at that moment. Nothing is covered up that was saying
   anything. The full three-up layout is still there in the staging dock. */
.drag-overlay .docked.compact .drag-drive-ratio{display:none}
.drag-overlay .docked.compact.geared-out .drag-drive-ratio{display:flex}
.drag-overlay .docked.compact.geared-out .drag-track-slip{display:none}
.drag-overlay .docked.compact .drag-belt-slip b{font-size:12px}
.drag-overlay .drag-actions{bottom:calc(68px + env(safe-area-inset-bottom))}
.drag-overlay.running .drag-actions{bottom:calc(40px + env(safe-area-inset-bottom))}
.drag-overlay.results-open .drag-belt-zone.docked{display:none}
/* This used to reset the dock to three columns - from the days when there was
   one readout - which quietly undid the five-column layout above on every
   phone. The readouts landed in implicit columns, the belt scale was crushed
   to nothing and the target window wrapped over it.

   Each readout also stops being a two-line block here: display:contents drops
   the wrapper out of the grid so its label sits on the dock's existing top row
   and its value on the bottom one. Same two rows, but a column then only has
   to be as wide as one number instead of a padded block. */
@media(max-width:520px){.drag-overlay .docked.compact .drag-belt-target{display:none}
  .drag-overlay .drag-belt-zone.docked{gap:2px 6px;padding:6px 8px;grid-template-columns:64px minmax(56px,1fr) 58px 52px 64px}
  .drag-overlay .drag-belt-zone.docked .drag-belt-current{font-size:16px}
  .drag-overlay .docked .drag-belt-target{font-size:6.5px;letter-spacing:0}
  .drag-overlay .docked .drag-belt-slip{display:contents}
  .drag-overlay .docked .drag-belt-slip span{grid-row:1;align-self:end;font-size:6px;letter-spacing:.03em}
  .drag-overlay .docked .drag-belt-slip b{grid-row:2;align-self:center;font-size:10.5px}
  .drag-overlay .docked .drag-belt-slip span,.drag-overlay .docked .drag-belt-slip b{grid-column:3}
  .drag-overlay .docked .drag-track-slip span,.drag-overlay .docked .drag-track-slip b{grid-column:4}
  .drag-overlay .docked .drag-drive-ratio span,.drag-overlay .docked .drag-drive-ratio b{grid-column:5}
  /* display:contents would otherwise promote these hidden spares into the grid. */
  .drag-overlay .docked .drag-belt-slip strong[hidden]{display:none}
  /* The compact running dock stays a flex row, so it keeps its blocks. */
  .drag-overlay .docked.compact .drag-belt-slip{display:flex}
  .drag-overlay .docked.compact .drag-drive-ratio{display:none}
  .drag-overlay .docked.compact.geared-out .drag-drive-ratio{display:flex}
  .drag-overlay .docked.compact .drag-belt-slip span{font-size:7px}
  .drag-overlay .docked.compact .drag-belt-slip b{font-size:12px}
  .drag-overlay .docked.compact{gap:8px}}

body:has(.drag-overlay.visible) #boostStages{bottom:calc(160px + env(safe-area-inset-bottom))}
body:has(.drag-overlay.visible:not(.running)) #boostStages{bottom:calc(188px + env(safe-area-inset-bottom))}

.drag-overlay .drag-belt-zone.docked.compact .drag-belt-scale{display:block}

/* Utility menus must paint above the external boost controller. */
.drag-overlay.menu-open{z-index:40}
@media(orientation:landscape) and (max-height:560px){body:has(.drag-overlay.visible) #boostStages{bottom:calc(114px + env(safe-area-inset-bottom))}body:has(.drag-overlay.visible:not(.running)) #boostStages{bottom:calc(142px + env(safe-area-inset-bottom))}}


/* The round instruments and phase controls replace redundant text panels. */
.drag-overlay .drag-top,.drag-overlay .drag-readout,.drag-overlay .drag-bottom{display:none}

#boostStages .eyebrow{color:#a9c8d7}
.drag-overlay .drag-length-label{color:#26465a;text-shadow:0 1px #e9f6fa80}
@media(max-width:360px){.drag-overlay .docked.compact .drag-belt-caption strong{display:none}
  /* Everything shrinks a step again at 320. The layout is the same as every
     other phone; only the type comes down. */
  .drag-overlay .drag-belt-zone.docked{grid-template-columns:52px minmax(48px,1fr) 52px 50px 58px;gap:2px 5px;padding:6px 6px}
  .drag-overlay .drag-belt-zone.docked .drag-belt-current{font-size:13px}
  .drag-overlay .docked .drag-belt-target{font-size:5.5px}
  .drag-overlay .docked .drag-belt-slip span{font-size:5.5px}
  .drag-overlay .docked .drag-belt-slip b{font-size:10px}}

/* Track slip sits beside belt slip in the dock. They are different losses -
   belt slip is lost inside the guard, track slip is lost at the snow - so they
   read side by side rather than as one number. */
.drag-overlay .drag-track-slip b{color:#bdf7cd}
.drag-overlay .drag-track-slip.warn b{color:#ffb766}

/* Drive ratio reads where GEAR used to, in the main readout row. It is the
   reading that explains the two slips - a CVT at its shift RPM with the speed
   climbing is not slipping, it is changing ratio - and GEAR could only ever
   say "1", because a CVT has exactly one.

   It lived in the belt dock until three readouts ended up sharing a single
   grid cell and printing over each other on a phone. */
.drag-overlay .drag-drive-ratio strong{color:#8eeaff;white-space:nowrap}
.drag-overlay .drag-drive-ratio.shifting strong{color:#edc48a}
.drag-overlay .drag-drive-ratio.warn strong{color:#ffb766}

/* --------------------------------------------------------- detonation warning
   The one warning the game cannot give any other way: a motor held past its
   knock limit is on a timer nobody can see, and "no idea it was coming" is a
   fair complaint. It rides the instruments that are already on screen rather
   than taking a strip of a phone for itself, so it costs no layout in any mode.

   --br-danger is 0..1, the risk per second normalised. Both the glow and the
   beat follow it, so a glance tells you how far over you are, not merely that
   you are over. */
.br-round-gauges--danger .br-round-gauge--boost,
.br-round-gauges--danger .br-round-gauge--tach{
  animation:br-detonation calc(900ms - var(--br-danger,0)*520ms) ease-in-out infinite;
  border-radius:50%;
}
.br-round-gauges--danger .br-round-gauge--tach{animation-delay:.14s}
@keyframes br-detonation{
  0%,100%{filter:none;box-shadow:0 0 0 0 #ff5b2e00}
  50%{filter:brightness(calc(1 + var(--br-danger,0)*.28)) saturate(1.15);
      box-shadow:0 0 calc(10px + var(--br-danger,0)*26px) calc(1px + var(--br-danger,0)*4px)
        rgba(255,91,46,calc(.30 + var(--br-danger,0)*.5))}
}
/* Reduced motion keeps the information and drops the strobe: a steady ring
   still says "you are past the limit", which is the part that matters. */
@media(prefers-reduced-motion:reduce){
  .br-round-gauges--danger .br-round-gauge--boost,
  .br-round-gauges--danger .br-round-gauge--tach{
    animation:none;
    box-shadow:0 0 calc(8px + var(--br-danger,0)*18px) 2px rgba(255,91,46,.45);
  }
}

/* The staged controller and the instrument cluster both live just above the
   thumbs, and in freeride they were drawing on top of each other. Alpine
   already lifted the gauges when the panel is up; this does the same for every
   other ride mode rather than only the one somebody noticed. */
body:has(#boostStages:not(.hidden)) #hud .br-round-gauges{
  --br-gauge-bottom:max(184px,calc(env(safe-area-inset-bottom) + 176px));
}
@media(orientation:landscape) and (max-height:560px){
  body:has(#boostStages:not(.hidden)) #hud .br-round-gauges{
    --br-gauge-bottom:max(124px,calc(env(safe-area-inset-bottom) + 116px));
  }
}