/* Glass driving controls.

   The on-screen wheel, pedals and buttons used to be solid slabs painted over the city — on a phone
   they took up the bottom third of the screen and you could not see the road through any of it. This
   sheet makes them glass: mostly transparent, blurred behind, with a bright top edge and a fine rim so
   the shape still reads against pavement, sky or a lit shopfront.

   Four rules hold it together, and breaking any one of them is what makes glass UI unreadable:

   1. THE TINT IS DARK, NOT NEUTRAL. A clear panel over bright noon tarmac has no contrast. Every
      surface keeps a thin dark wash (about 40% at most) so white type on it always clears the
      background, and a `saturate()` in the backdrop filter keeps the city's colour from going grey
      behind the panel.
   2. THE EDGE DOES THE WORK. With the fill this light, the control is legible because of its rim and
      its inner top highlight, not its body. Those two lines are what make it read as a raised piece of
      glass rather than a smudge.
   3. PRESSED IS OPAQUE. Feedback has to survive a bright background, so the pressed state drops the
      transparency entirely and goes solid. That contrast between clear and solid IS the feedback.
   4. BLUR COSTS. Each `backdrop-filter` makes the compositor sample the frame behind that element. The
      count here is deliberately small — the wheel, the pedal cluster's six buttons and the radio bar —
      and the radius is modest. Do not sprinkle it on anything else without measuring the frame first.

   Loaded after driving.css and gameplay-layout.css so it wins on equal specificity. */

:root{
 --glass-tint:#0a121cb0;          /* the dark wash: enough for white type, little enough to see through */
 --glass-tint-soft:#0a121c8c;
 --glass-rim:#ffffff3d;
 --glass-top:#ffffff40;           /* the inner highlight along the top edge */
 --glass-drop:0 8px 22px #00000059;
 --glass-blur:blur(13px) saturate(1.3);
}

/* ---- the shared surface -------------------------------------------------------------------------- */
.controls button,
.is-driving #recover,
#duber-chip{
 background:var(--glass-tint);
 -webkit-backdrop-filter:var(--glass-blur);
 backdrop-filter:var(--glass-blur);
 border:1px solid var(--glass-rim);
 box-shadow:inset 0 1px 0 var(--glass-top),inset 0 -1px 0 #0000002e,var(--glass-drop);
}

/* ---- pedals ----------------------------------------------------------------------------------------
   The gas is the one control the thumb must find without looking, so it keeps its warm rim and a faint
   tint of its own while still being see-through. */
.controls .pedals button{
 background:linear-gradient(160deg,#ffffff1c,#0a121c99 62%);
 -webkit-backdrop-filter:var(--glass-blur);
 backdrop-filter:var(--glass-blur);
 border:1px solid var(--glass-rim);
 box-shadow:inset 0 1px 0 var(--glass-top),inset 0 0 0 1px #ffffff0f,var(--glass-drop);
}
.controls .pedals .gas-pedal{
 background:linear-gradient(160deg,#e4ded124,#0e1a18a6 64%);
 border-color:#e4ded173;
 box-shadow:inset 0 1px 0 #ffffff4d,0 0 20px #e4ded114,var(--glass-drop);
}
.controls .pedals .brake-pedal{border-color:#ffc9b880}
/* The tread bars: lighter, so they read as texture through the glass rather than as a solid block. */
.controls .pedals button>i{
 background:repeating-linear-gradient(180deg,#0b131e59 0,#0b131e59 4px,#c9d6e559 5px,#c9d6e559 7px,
  transparent 8px,transparent 13px);
 opacity:.85;
}
/* Pressed goes solid. This is the only state that is not glass, and that is the point. */
.controls button.pressed,
.controls .pedals button.pressed{
 -webkit-backdrop-filter:none;backdrop-filter:none;
 background:#e4ded1;color:#0a1521;border-color:#ffffff;
 box-shadow:0 0 22px #e4ded15c,inset 0 0 0 1px #ffffff;
}
.controls .pedals button.pressed{background:linear-gradient(150deg,#b4e948,#5c8022);color:#0d1707}
.controls .pedals button.pressed>i{background:#0d17074d;opacity:.5}

/* ---- handbrake, gear, horn -------------------------------------------------------------------------
   Small labelled buttons: the type has to stay crisp, so these keep a slightly heavier wash. */
.controls .handbrake{background:#1a0f0aa6;border-color:#f0c49b85;color:#ffe0c2}
.controls #gear{background:#0a121cb8}
.controls #horn{background:#0a121cb8}

/* ---- the wheel --------------------------------------------------------------------------------------
   An SVG cannot take backdrop-filter usefully, so the wheel is made of glass the other way: the rim
   becomes a translucent ring with a bright inner stroke, and the spokes thin out. The blur sits on the
   element behind it as a soft circular pane. */
#wheel{
 -webkit-backdrop-filter:blur(9px) saturate(1.2);
 backdrop-filter:blur(9px) saturate(1.2);
 border-radius:50%;
 box-shadow:inset 0 0 0 1px #ffffff26,0 10px 26px #00000047;
}
#wheel svg circle:first-of-type{fill:#0a121c8f;stroke:#c9d8ea9c}
#wheel svg circle:nth-of-type(2){stroke:#ffffffa8}
#wheel svg path{stroke:#c3d2e29e}
#wheel svg text{fill:#eef3f9}

/* ---- the radio bar and the reset button ------------------------------------------------------------- */
.is-driving #radio-mini.drive-radio{
 background:var(--glass-tint);
 -webkit-backdrop-filter:var(--glass-blur);
 backdrop-filter:var(--glass-blur);
 border:1px solid var(--glass-rim);
 box-shadow:inset 0 1px 0 var(--glass-top),var(--glass-drop);
}
.is-driving #radio-mini.drive-radio button{background:#ffffff14;border:1px solid #ffffff2b}
.is-driving #radio-mini.drive-radio button:disabled{opacity:.4}

/* ---- the top bar -------------------------------------------------------------------------------------
   The tools already blur; matching their fill to the controls is what makes the whole HUD one material. */
.is-driving header .tools button{
 background:var(--glass-tint-soft);
 border:1px solid var(--glass-rim);
 box-shadow:inset 0 1px 0 #ffffff26;
}

/* ---- Duber's own panels ------------------------------------------------------------------------------
   Same material, its own colour, so a request reads as part of the HUD rather than a sticker on it. */
#duber-card,#duber-progress{
 -webkit-backdrop-filter:blur(15px) saturate(1.35);
 backdrop-filter:blur(15px) saturate(1.35);
 box-shadow:inset 0 1px 0 #ffffff2e,0 12px 30px #00000066;
}
#duber-card{background:linear-gradient(160deg,#3d0e26d1,#170a13cc)}
#duber-progress{background:linear-gradient(160deg,#340b20cc,#150a11c4)}
#duber-card .duber-decline{background:#ffffff1a;border-color:#ffffff33}

/* The lowest device tier, and any browser that cannot blur at all, get the tint without the glass.
   `lite-hud` is set in game.js from the same deviceRank that picks the render tier, so the HUD and the
   renderer step down together instead of one of them quietly eating the other's budget. */
.lite-hud :is(.controls button,.controls .pedals button,#wheel,#duber-card,#duber-progress,
 #duber-chip,.is-driving #radio-mini.drive-radio){
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#0a121ce8}
.lite-hud .controls .pedals .gas-pedal{background:linear-gradient(160deg,#2a3330,#101b19)}
.lite-hud #duber-card{background:linear-gradient(160deg,#3d0e26f7,#170a13f2)}
.lite-hud #duber-progress{background:linear-gradient(160deg,#340b20f2,#150a11ee)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .controls button,.controls .pedals button,.is-driving #radio-mini.drive-radio,
 #duber-card,#duber-progress,.is-driving header .tools button{background:#0a121ce8}
 .controls .pedals .gas-pedal{background:linear-gradient(160deg,#2a3330,#101b19)}
 #duber-card{background:linear-gradient(160deg,#3d0e26f7,#170a13f2)}
}