/* Boost gauge (boost-gauge.js): lives in the RPM panel, replacing the
   decorative RPM trace while a forced-induction sound is playing. */
.boost-gauge { display: none; width: 100%; max-width: 230px; margin: 2px auto 0; }
#rpmPanel.has-boost .boost-gauge, #gaugeStyleMount.has-boost .boost-gauge { display: block; }
#rpmPanel.has-boost .rpm-trace { display: none; }
#rpmPanel.has-boost .rpm-scale { display: none; }

/* Custom gauge styles: the gauge sits beside the instrument inside
   #gaugeStyleMount as a pod skinned to match it (boost-gauge.js). */
#gaugeStyleMount.has-boost { gap: 14px; }
#gaugeStyleMount .boost-gauge.is-pod { margin: 0; max-width: none; flex: none; width: 150px; }
#gaugeStyleMount.has-boost .gs-wide + .boost-gauge.is-pod { width: 172px; }
#gaugeStyleMount .is-pod .bg-svg { filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .45)); }
#gaugeStyleMount .skin-bare .bg-svg { filter: none; }
.bg-dash-face { fill: #05070a; stroke: rgba(150, 178, 196, .2); }
.skin-dash .bg-kind, .skin-dash .bg-unit { letter-spacing: .24em; }
/* EV Minimal's frosted disc becomes a capsule around dial + pod. */
body[data-gauge-style="ev-minimal"] #gaugeStyleMount.has-boost { border-radius: 999px !important; padding: 8px 22px 8px 8px !important; }

/* Shorter desktop and in-car windows (Tesla): match gauge-styles.css steps. */
@media (min-width: 701px) and (max-height: 760px) {
  #gaugeStyleMount .boost-gauge.is-pod { width: 150px; }
  #gaugeStyleMount.has-boost .gs-wide + .boost-gauge.is-pod { width: 168px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #gaugeStyleMount.has-boost { gap: 8px; }
  #gaugeStyleMount .boost-gauge.is-pod { width: 104px; }
  #gaugeStyleMount.has-boost .gs-wide + .boost-gauge.is-pod { width: 112px; }
  #gaugeStyleMount.has-boost .gs-wide { width: 300px; }
}
/* Phones: round dials share the row with the pod; wide dashes stack it below. */
@media (max-width: 700px) and (orientation: portrait),
       (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  #gaugeStyleMount.has-boost { gap: 10px; }
  #gaugeStyleMount.has-boost .gs-round { width: min(52vw, 200px); }
  #gaugeStyleMount .boost-gauge.is-pod { width: min(36vw, 150px); }
  #gaugeStyleMount.has-boost:has(.gs-wide) { flex-direction: column; gap: 6px; }
  #gaugeStyleMount.has-boost .gs-wide + .boost-gauge.is-pod { width: min(38vw, 150px); }
  body[data-gauge-style="ev-minimal"] #gaugeStyleMount.has-boost { padding: 6px 14px 6px 6px !important; }
}

.bg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bg-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 10; stroke-linecap: round; }
.bg-zone-vac { fill: none; stroke: rgba(95, 211, 228, .18); stroke-width: 10; }
.bg-zone-boost { fill: none; stroke: url(#bgBoostGrad); stroke-opacity: .22; stroke-width: 10; }
.bg-zone-red { fill: none; stroke: #ff2d55; stroke-opacity: .32; stroke-width: 10; stroke-linecap: round; }
.bg-fill { fill: none; stroke: url(#bgBoostGrad); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 120, 50, .75)); }
.bg-fill.is-vac { stroke: #5fd3e4; filter: drop-shadow(0 0 4px rgba(95, 211, 228, .6)); }
.bg-tick { stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.bg-tick-minor { stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.bg-tick-zero { stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.bg-num { fill: rgba(255, 255, 255, .62); font: 600 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; }
.bg-num-vac { fill: rgba(95, 211, 228, .75); font-size: 8px; letter-spacing: .08em; }
.bg-needle-line { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.bg-needle-glow { stroke: #ff7a3a; stroke-width: 7; stroke-linecap: round; opacity: .35; filter: blur(2px); }
.bg-hub { fill: #0b1219; stroke: rgba(255, 255, 255, .7); stroke-width: 2; }
.bg-peak { fill: #ffd27a; transition: opacity .3s; }
.bg-value { fill: #fff; font: 700 25px/1 ui-monospace, "SF Mono", Menlo, monospace; text-anchor: middle; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bg-unit { fill: rgba(255, 255, 255, .55); font: 700 7.5px/1 system-ui, sans-serif; text-anchor: middle; letter-spacing: .16em; }
.bg-kind { fill: #ffb347; font: 800 8px/1 system-ui, sans-serif; text-anchor: middle; letter-spacing: .2em; }
.bg-lamp { fill: rgba(255, 255, 255, .16); font: 800 6.5px/1 system-ui, sans-serif; text-anchor: middle; letter-spacing: .12em; transition: fill .12s; }
.bg-lamp.is-on { fill: #ff4d6d; filter: drop-shadow(0 0 4px rgba(255, 77, 109, .9)); }
.boost-gauge.is-high .bg-value { fill: #ffcf9e; }

/* low-power devices (Tesla Atom): no filter effects */
.boost-gauge.lite .bg-fill, .boost-gauge.lite .bg-fill.is-vac, .boost-gauge.lite .bg-lamp.is-on { filter: none; }
.boost-gauge.lite .bg-needle-glow { display: none; }

/* light theme */
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-track { stroke: rgba(16, 34, 45, .1); }
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-tick { stroke: rgba(16, 34, 45, .55); }
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-num { fill: rgba(16, 34, 45, .65); }
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-value { fill: #10222d; }
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-unit { fill: rgba(16, 34, 45, .55); }
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-needle-line { stroke: #10222d; }
body.theme-day .boost-gauge:is(.skin-panel, .skin-bare) .bg-hub { fill: #fff; stroke: rgba(16, 34, 45, .6); }