/* Valley Drive — see reference/valley-drive-page.md.
   UI: borderless liquid-glass pieces — round icon buttons in the top corners, and a bottom bar
   of [time of day] [HUD: distance · speed · drive mode] [weather]. */
:root {
  color-scheme: dark;
  --sky: #b4d3ef;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.74);
  --ink-faint: rgba(255, 255, 255, 0.3);
  --accent: #3d8bff;
  --glass-a: 0.2;                                /* glass tint */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
  --hud-w: 536px;
  --hud-h: 100px;
  --tile-w: 104px;
  --bar-gap: 12px;
}
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Glass: no border — a faint tint, a blur of what's behind, and light catching the rim.
   js/valley-drive.js swaps the backdrop-filter for a refracting one on Chromium. */
.glass {
  background: rgba(16, 20, 28, var(--glass-a));
  border: 0;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.34),
    inset -1px -1px 1px rgba(255, 255, 255, 0.12),
    inset 0 0 18px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* ---------- top corners: round icon buttons ---------- */
.pill {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.pill .fill { fill: currentColor; stroke: none; }
.pill:hover { background: rgba(16, 20, 28, calc(var(--glass-a) + 0.16)); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xp { position: fixed; top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); left: var(--gutter); z-index: 5; }
.topright { position: fixed; top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); right: var(--gutter); z-index: 7; display: flex; gap: 8px; }
.sound .sound-off { display: none; }
.sound[aria-pressed="false"] .sound-waves { display: none; }
.sound[aria-pressed="false"] .sound-off { display: inline; }
#music .off-line { display: none; }
#music[aria-pressed="false"] .off-line { display: inline; }
#music[aria-pressed="false"] circle, #music[aria-pressed="false"] path:not(.off-line) { opacity: 0.55; }
#hideUi .eye-open { display: none; }
#hideUi[aria-pressed="true"] .eye-slash { display: none; }
#hideUi[aria-pressed="true"] .eye-open { display: inline; }

/* ---------- bottom bar: time tile · HUD · weather tile ---------- */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--bar-gap);
}
.hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(var(--hud-h) * 0.14);
  width: var(--hud-w);
  min-width: 0;
  flex: 0 1 auto;
  height: var(--hud-h);
  box-sizing: border-box;
  padding: 0 calc(var(--hud-h) * 0.2);
  border-radius: calc(var(--hud-h) * 0.22);
  text-shadow: var(--shadow);
}
/* a thin light bar along the bottom edge, like a HUD projection line */
.hud::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent);
  pointer-events: none;
}
.hud-side { display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
.hud-label { font-size: max(9px, calc(var(--hud-h) * 0.1)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.hud-val { font-size: calc(var(--hud-h) * 0.23); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hud-unit { font-size: max(9px, calc(var(--hud-h) * 0.09)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

.hud-speed {
  position: relative;
  width: calc(var(--hud-h) * 1.56);
  height: calc(var(--hud-h) * 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arcs path { fill: none; stroke-linecap: round; stroke-width: 3.5; }
.arc-track { stroke: var(--ink-faint); }
.arc-fill { stroke: var(--ink); stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
.arc-fill.boost { stroke: #ffb347; filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.7)); }
.speed { font-size: calc(var(--hud-h) * 0.46); font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* drive-mode toggle: steering-wheel badge, blue while auto-drive is on */
.mode {
  pointer-events: auto;
  border: 0;
  background: none;
  padding: 4px 8px;
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--font);
  text-shadow: var(--shadow);
  cursor: pointer;
}
.mode:hover { background: rgba(255, 255, 255, 0.08); }
.mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wheel {
  display: grid;
  place-items: center;
  width: calc(var(--hud-h) * 0.26);
  height: calc(var(--hud-h) * 0.26);
  margin-bottom: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  transition: background 0.2s, border-color 0.2s;
}
.wheel svg { width: 66%; height: 66%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mode.is-auto .wheel { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(61, 139, 255, 0.6); }
.mode-val { font-size: calc(var(--hud-h) * 0.15); }

/* time of day + weather tiles, the same height as the HUD */
.tg {
  flex: 0 0 var(--tile-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--hud-h);
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: calc(var(--hud-h) * 0.22);
  color: var(--ink);
  font-family: var(--font);
  text-shadow: var(--shadow);
  cursor: pointer;
}
.tg:hover { background: rgba(16, 20, 28, calc(var(--glass-a) + 0.16)); }
.tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tg svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.tg-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tg-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.tg-val { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---------- hint + toast (above the bar) ---------- */
.hint, .toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s;
}
.hint { bottom: calc(var(--gutter) + var(--hud-h) + 16px + env(safe-area-inset-bottom, 0px)); color: var(--ink-soft); }
.hint.gone { opacity: 0; }
.toast { bottom: calc(var(--gutter) + var(--hud-h) + 42px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }

/* ---------- touch pad (above the bar on touch screens) ---------- */
.pad { position: fixed; bottom: calc(var(--gutter) + var(--hud-h) + 12px + env(safe-area-inset-bottom, 0px)); display: none; gap: 10px; }
.pad.left { left: 16px; }
.pad.right { right: 16px; }
.pad button {
  width: 56px; height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 20, 28, calc(var(--glass-a) + 0.08));
  box-shadow: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.3), inset -1px -1px 1px rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font: 700 18px var(--font);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: none;
}
.pad button.on { background: rgba(255, 255, 255, 0.32); }

#loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); text-shadow: var(--shadow);
  background: var(--sky);
}

/* ---------- hide-the-UI (eye button / H): only that button stays, faded until hovered ---------- */
body.ui-hidden .xp, body.ui-hidden .bar, body.ui-hidden .hint,
body.ui-hidden .toast, body.ui-hidden .pad, body.ui-hidden #music, body.ui-hidden #sound { display: none !important; }
body.ui-hidden #hideUi { opacity: 0.45; transition: opacity 0.2s; }
body.ui-hidden #hideUi:hover, body.ui-hidden #hideUi:focus-visible { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  :root { --tile-w: 84px; --bar-gap: 8px; }
  .tg-val { font-size: 12px; }
  .hint { display: none; }
}
/* phones: the HUD needs the whole width, so the two tiles move up under the top-right buttons */
@media (max-width: 600px) {
  :root { --gutter: 14px; }
  .hud { width: 100%; padding: 0 10px; gap: 6px; }
  .bar { width: calc(100% - 2 * var(--gutter)); }
  .tg {
    position: fixed;
    top: calc(var(--gutter) + 50px + env(safe-area-inset-top, 0px));
    height: 44px;
    flex-direction: row;
    gap: 8px;
    padding: 0 12px 0 10px;
    border-radius: 16px;
  }
  .tg-time { left: var(--gutter); }
  .tg-wx { right: var(--gutter); }
  .tg svg { width: 20px; height: 20px; }
  .tg-text { align-items: flex-start; }
}
/* touch screens (mobile): a lower HUD, the car always on auto-drive, steering from the middle
   of each edge, and Brake / Boost just above the HUD */
@media (pointer: coarse) {
  :root { --hud-h: 80px; }
  .pad { display: flex; }
  .pad.left, .pad.right { top: 50%; bottom: auto; transform: translateY(-50%); }
  .pad.left { left: 12px; }
  .pad.right { right: 12px; }
  .pad.actions {
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    gap: 14px;
    bottom: calc(var(--gutter) + var(--hud-h) + 12px + env(safe-area-inset-bottom, 0px));
  }
  .pad button.txt {
    width: auto;
    height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    font: 700 13px var(--font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: var(--shadow);
  }
  /* with the controls hidden, Brake / Boost stay (dropped to the bottom edge); the arrows go */
  body.ui-hidden .pad.actions { display: flex !important; }
  body.ui-hidden .pad.actions { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); }
  .mode { pointer-events: none; }                   /* auto-drive only: the badge just shows it */
  .mode .hud-unit { display: none; }
  .hint { display: none; }
  .toast { bottom: calc(var(--gutter) + var(--hud-h) + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .hint, .toast, .wheel { transition: none; } }