/* Selectable gauge styles (gauge-styles.js). Classic keeps the original HUD;
   any other style hides the speed ring and RPM panel and shows one combined
   instrument in their place. Apex Racing's artwork is built around the
   classic ring, so that scene always keeps it. */
#gaugeStyleMount { display: none; }
body.gauge-style-custom:not([data-drive-scene="apex-racing"]) #speedGaugeEl,
body.gauge-style-custom:not([data-drive-scene="apex-racing"]) #rpmPanel { display: none; }
body.gauge-style-custom:not([data-drive-scene="apex-racing"]) #gaugeStyleMount {
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 16px;
}
#gaugeStyleMount:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
body.hide-speedometer #gaugeStyleMount { visibility: hidden; pointer-events: none; }

.gs-svg { display: block; height: auto; overflow: visible; }
.gs-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.gs-ui { font-family: var(--font-ui); }
#gaugeStyleMount .gs-round { width: 230px; }
#gaugeStyleMount .gs-wide { width: 470px; }
#gaugeStyleMount .gs-svg { filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .45)); }

@keyframes gs-kick { 0% { transform: translateY(0); } 30% { transform: translateY(3px); } 100% { transform: translateY(0); } }
.gs-kick { animation: gs-kick .34s ease-out; }
@media (prefers-reduced-motion: reduce) { .gs-kick { animation: none; } }

/* Phones: the gauge takes the whole top row the RPM panel used to share. */
@media (max-width: 700px) and (orientation: portrait),
       (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  body.gauge-style-custom:not([data-drive-scene="apex-racing"]) .drive-center-stack { grid-column: 1 / -1; }
  #gaugeStyleMount .gs-round { width: min(62vw, 220px); }
  #gaugeStyleMount .gs-wide { width: min(calc(100vw - 32px), 420px); }
}
/* Shorter desktop and in-car windows: step down so the dial clears the edge. */
@media (min-width: 701px) and (max-height: 760px) {
  #gaugeStyleMount .gs-round { width: 196px; }
  #gaugeStyleMount .gs-wide { width: 410px; }
}
/* Short in-car and landscape phone screens. */
@media (orientation: landscape) and (max-height: 500px) {
  #gaugeStyleMount .gs-round { width: 150px; }
  #gaugeStyleMount .gs-wide { width: 330px; }
}

/* Settings picker */
#driverSettingsDialog .ds-gauge-style { margin: 18px 0; font-size: 15px; }
#driverSettingsDialog .gs-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
#driverSettingsDialog .gs-choices button {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 8px 9px; border: 1px solid var(--hairline-strong); border-radius: 14px;
  background: var(--surface-raised); color: var(--text-dim); font: 600 13px var(--font-ui); cursor: pointer;
}
#driverSettingsDialog .gs-choices button[aria-checked="true"] { border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
/* The whole card is the tap target; iOS WebKit can drop taps that land on SVG. */
#driverSettingsDialog .gs-choices button * { pointer-events: none; }
#driverSettingsDialog .gs-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; pointer-events: none; }
#driverSettingsDialog .gs-thumb .gs-round { height: 64px; width: auto; }
#driverSettingsDialog .gs-thumb .gs-wide { width: 100%; max-height: 64px; }
@media (max-width: 520px) { #driverSettingsDialog .gs-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The two styles without their own instrument face get the HUD's frosted
   surface so they stay legible over bright scenes. */
body.gauge-style-custom[data-gauge-style="hypercar"] #gaugeStyleMount,
body.gauge-style-custom[data-gauge-style="ev-minimal"] #gaugeStyleMount {
  background: var(--surface); border: 1px solid var(--hairline);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.gauge-style-custom[data-gauge-style="hypercar"] #gaugeStyleMount { padding: 6px 14px 8px; border-radius: 24px; }
body.gauge-style-custom[data-gauge-style="ev-minimal"] #gaugeStyleMount { padding: 8px; border-radius: 50%; }
body.gauge-style-custom[data-gauge-style="hypercar"] #gaugeStyleMount .gs-svg,
body.gauge-style-custom[data-gauge-style="ev-minimal"] #gaugeStyleMount .gs-svg { filter: none; }