/* ==========================================================================
   UI polish layer: loaded last, visual only.
   One consistent "smoked glass" surface for every driving-screen panel so
   more of the road shows through, tighter spacing, and calmer secondary
   text. No layout logic in app.js depends on anything here; deleting this
   file restores the previous look exactly.
   ========================================================================== */

:root {
  --glass-bg: rgba(9, 13, 18, 0.34);
  --glass-bg-strong: rgba(9, 13, 18, 0.5);
  --glass-menu: rgba(11, 16, 22, 0.86);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-strong: rgba(255, 255, 255, 0.16);
  --glass-blur: blur(22px) saturate(160%);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ---------- Shared glass surface ---------- */
.scene-picker.background-picker,
.control-strip,
.speed-hud .speed-hud-side,
#panelToggle,
.mode-badge,
#controlsSidebar > .affiliate-banner {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
}

.control-strip, .speed-hud .speed-hud-side, .scene-picker.background-picker { text-shadow: var(--glass-text-shadow); }

/* ---------- Background picker: one slim row instead of a help card ---------- */
.scene-picker.background-picker {
  width: auto;
  min-width: 340px;
  padding: 6px 8px 6px 18px;
  gap: 0 18px;
  border-radius: 16px;
}
.background-eyebrow { font-size: 9px; letter-spacing: .16em; color: rgba(230, 240, 246, .6); }
.background-picker #backgroundTrigger { min-height: 36px; padding: 0; font-size: 15px; }
.background-chevron { font-size: 16px; opacity: .8; }
.background-motion { padding-left: 18px; border-left-color: var(--glass-border-strong); }
.background-switch { min-height: 40px; font-size: 12px; font-weight: 500; color: rgba(245, 247, 250, .86); }
.background-switch-track { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .22); }
/* Same information, kept for screen readers, but not printed on the road. */
#backgroundMotionWarning,
.background-status {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.background-picker .background-choices {
  background: var(--glass-menu);
  border-color: var(--glass-border-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  text-shadow: none;
}
.background-picker .background-choices button { min-height: 52px; }
.background-picker .background-choices button:hover { background: rgba(255, 255, 255, .06); }
.background-picker .background-choices button[aria-pressed='true'] { background: rgba(95, 211, 228, .12); }

/* ---------- Drive-mode badge ---------- */
.mode-badge { padding: 5px 13px; font-size: .58rem; color: rgba(230, 240, 246, .72); }

/* ---------- Sidebar ---------- */
.control-strip { padding: 18px 16px 14px; gap: 12px; border-radius: 20px; }
#startBtn {
  background: rgba(95, 211, 228, .08);
  box-shadow: 0 0 0 6px rgba(95, 211, 228, .06), 0 8px 24px rgba(0, 0, 0, .25);
}
#startBtn.running { box-shadow: 0 0 0 6px rgba(95, 211, 228, .16), 0 8px 28px rgba(95, 211, 228, .25); }
#revBtn { background: rgba(255, 138, 61, .07); margin-top: 4px; }
#revBtn:disabled { opacity: .28; }
.gps-settling-tip {
  padding: 10px 0 0;
  border-top: 1px solid var(--glass-border);
  color: rgba(214, 226, 234, .66);
  font-size: 11px;
  line-height: 1.5;
}
.gps-settling-tip strong { font-size: 11.5px; margin-bottom: 2px; color: rgba(240, 246, 250, .9); }

/* Settings and Sound Studio: a matched pair of quiet row buttons. */
.settings-toggle,
.studio-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: rgba(236, 243, 247, .9);
  font: 500 13px var(--font-ui);
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
.settings-toggle::after { content: '⚙'; font-size: 14px; opacity: .65; }
.studio-link::after { content: '→'; opacity: .65; }
.settings-toggle:hover, .studio-link:hover,
.settings-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .09); border-color: rgba(95, 211, 228, .55); color: #fff; }
.studio-link { color: var(--accent); }

.legal-footer { margin-top: 10px; font-size: .6rem; color: rgba(214, 226, 234, .5); text-shadow: var(--glass-text-shadow); }
.legal-footer a { color: inherit; }

#controlsSidebar > .affiliate-banner {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: .74rem;
  font-weight: 500;
  color: rgba(240, 246, 250, .88);
  text-shadow: var(--glass-text-shadow);
}
#controlsSidebar > .affiliate-banner .affiliate-banner-sub { margin-top: 2px; font-size: .62rem; color: rgba(214, 226, 234, .6); }
#controlsSidebar > .affiliate-banner:hover { border-color: rgba(95, 211, 228, .5) !important; }

/* Collapse tab */
#panelToggle { color: rgba(236, 243, 247, .8); }
#panelToggle:hover, #panelToggle:focus-visible { color: #fff; }

/* ---------- Bottom HUD ---------- */
.speed-hud .speed-hud-side { border-radius: 18px; }
.hud-side-title { color: rgba(214, 226, 234, .62); }
.rpm-rail { background: rgba(255, 255, 255, .1); }

/* Sound picker card */
#soundLibrary { font-family: var(--font-ui); }
#soundLibrary .sl-eyebrow { font-family: var(--font-data); color: rgba(214, 226, 234, .62); }
#soundLibrary h2 { font-weight: 550; letter-spacing: -.01em; }
#soundLibrary .sl-toggle, #soundLibrary .sl-done {
  border-color: rgba(95, 211, 228, .4);
  background: rgba(95, 211, 228, .1);
  color: #8fe6f1;
  border-radius: 11px;
  text-shadow: none;
}
#soundLibrary .sl-toggle:hover, #soundLibrary .sl-done:hover { background: rgba(95, 211, 228, .18); }

/* Expanded library: roomier tiles so names never break mid-word. */
#soundLibrary .sl-group { border-top-color: var(--glass-border-strong); }
#soundLibrary .sl-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
#soundLibrary .sl-tile { background: rgba(255, 255, 255, .045); border-color: var(--glass-border-strong); border-radius: 12px; transition: border-color .15s ease, background .15s ease; }
#soundLibrary .sl-tile:hover { background: rgba(255, 255, 255, .08); }
#soundLibrary .sl-pick { min-height: 54px; font-size: 13.5px; overflow-wrap: normal; word-break: normal; hyphens: manual; text-shadow: none; }
#soundLibrary .sl-star { flex-basis: 42px; border-left-color: var(--glass-border); color: rgba(214, 226, 234, .6); font-size: 20px; }
#soundLibrary .sl-star[aria-pressed=true] { background: rgba(255, 207, 119, .1); }
#soundLibrary .sl-selected { background: rgba(95, 211, 228, .13); border-color: rgba(95, 211, 228, .7); }
#soundLibrary .sl-empty { background: rgba(255, 255, 255, .04); border: 1px dashed var(--glass-border-strong); color: rgba(214, 226, 234, .7); text-shadow: none; }
body.sound-library-open .speed-hud .soundboard { background: var(--glass-bg-strong) !important; }
/* With a combined gauge style the RPM slot is empty, so the gauge centres. */
body.sound-library-open.gauge-style-custom:not([data-drive-scene="apex-racing"]) .drive-center-stack { grid-column: 1 / -1; }

/* ---------- Settings dialog: a touch of depth, still fully legible ---------- */
#driverSettingsDialog {
  background: rgba(14, 20, 28, .9);
  border-color: var(--glass-border-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
/* Sticky header must be opaque, or scrolled rows ghost through the title. */
#driverSettingsDialog .ds-header { background: #0f161e; }
body.theme-day #driverSettingsDialog .ds-header { background: #f8fafb; }
/* Plain-span labels (Theme, Gauge style) inherited a light colour in day mode. */
body.theme-day #driverSettingsDialog { color: #10222d; }
#driverSettingsDialog::backdrop { background: rgba(3, 8, 13, .5); backdrop-filter: blur(3px); }

/* ---------- Phones & short in-car screens ---------- */
@media (max-width: 700px) and (orientation: portrait),
       (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .speed-hud .speed-hud-side,
  #controlsSidebar,
  .control-strip { background: var(--glass-bg) !important; }
  .scene-picker.background-picker { min-width: 0; min-height: 0; padding: 6px 8px 6px 14px; }
  .mode-badge { top: calc(max(16px, env(safe-area-inset-top)) + 72px); }
  .settings-toggle, .studio-link { min-height: 48px; font-size: 14px; }
  #panelToggle, body.panel-hidden #panelToggle { width: auto; height: auto; border-radius: 12px; }
  #soundLibrary .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #soundLibrary .sl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Light theme keeps the same idea with frosted white ---------- */
body.theme-day {
  --glass-bg: rgba(255, 255, 255, .5);
  --glass-bg-strong: rgba(255, 255, 255, .68);
  --glass-menu: rgba(250, 252, 253, .92);
  --glass-border: rgba(16, 34, 45, .1);
  --glass-border-strong: rgba(16, 34, 45, .18);
  --glass-shadow: 0 12px 36px rgba(16, 34, 45, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
  --glass-text-shadow: none;
}
body.theme-day .settings-toggle, body.theme-day .legal-footer,
body.theme-day #controlsSidebar > .affiliate-banner, body.theme-day .gps-settling-tip strong { color: #10222d; }
body.theme-day .gps-settling-tip, body.theme-day #controlsSidebar > .affiliate-banner .affiliate-banner-sub { color: #4d6473; }
body.theme-day .studio-link { color: #00778f; }

/* Respect users who ask for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: rgba(12, 17, 23, .9); --glass-bg-strong: rgba(12, 17, 23, .94); }
}

/* Text-bearing sidebar panels get slightly more tint than the HUD so small
   copy stays readable over bright skies. */
.control-strip { background: rgba(9, 13, 18, .44) !important; }
body.theme-day .control-strip { background: rgba(255, 255, 255, .62) !important; }

/* ---------- Paywall ---------- */
/* The affiliate CTA inherited the dark HUD surface but the paywall's dark
   text colour, leaving it nearly unreadable. Match it to the light card. */
#paywallOverlay .affiliate-banner {
  background: linear-gradient(180deg, #f3fbfc, #e6f5f8);
  border: 1px solid #b9dfe6;
  color: #0d2b3a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}
#paywallOverlay .affiliate-banner .affiliate-banner-sub { color: #3f6170; }
#paywallOverlay .affiliate-banner:hover { border-color: #00778f; }

/* Desktop: the collapse tab stays attached to the sidebar edge. */
@media (min-width: 701px) and (min-height: 501px) {
  #panelToggle:not(#x) { border-left: 0 !important; width: 40px; height: 92px; }
  body.controls-right #panelToggle:not(#x) { border-left: 1px solid var(--glass-border) !important; border-right: 0 !important; }
}

/* Light theme fix-ups for controls that carried a dark-mode style. */
body.theme-day .studio-link:not(#x) { background: rgba(255, 255, 255, .55); border-color: var(--glass-border-strong); color: #00778f; }
body.theme-day .studio-link:not(#x):hover { background: rgba(255, 255, 255, .8); }
body.theme-day .settings-toggle { background: rgba(255, 255, 255, .55); }
body.theme-day #panelToggle { color: #10222d; }
body.theme-day .control-strip, body.theme-day .speed-hud .speed-hud-side, body.theme-day .scene-picker.background-picker { text-shadow: none; }

/* Touch screens: no hover colour/transition on the background picker. iOS
   WebKit treats a hover-triggered transition as "hover content" and swallows
   the first tap, so the picker needed two taps to open or choose. */
@media (hover: none) {
  .scene-picker button,
  .background-picker .background-choices button { transition: none; }
  .scene-picker button:hover { color: inherit; }
  .background-picker .background-choices button:hover { background: transparent; }
  .background-picker .background-choices button[aria-pressed='true']:hover { background: rgba(95, 211, 228, .12); }
}

/* ---------- Low-power devices (Tesla Intel Atom, 4-core, Stability Mode) ----------
   Live background blur over the animated road is one of the most expensive
   things a browser can draw, and on in-car hardware it competes with audio for
   CPU. In performance-lite the glass keeps its translucency but drops the blur. */
body.performance-lite *,
body.performance-lite *::before,
body.performance-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.performance-lite { --glass-blur: none; }   /* the shared glass rule reads its blur from this */
body.performance-lite:not(.theme-day) {
  --glass-bg: rgba(10, 14, 20, .58);
}
body.performance-lite.theme-day {
  --glass-bg: rgba(255, 255, 255, .72);
}