/* v32.css — Long Drive v3.2 driving HUD: glass cluster (arc tach + speed + gear + AUTO/MANUAL + shift light + nitro),
   restyled top chips / trip pod, fading controls hint, touch gear buttons. One accent: aqua (#7be7d6). */
#hud { --acc: #7be7d6; --acc-rgb: 123,231,214; --red: #ff5a4e; --plate: rgba(8,12,20,.42); --stroke: rgba(255,255,255,.12); }
/* old v2/v3 speed pod, tach bar, gear badge and nitro pod are replaced by the cluster */
#hud .hud-speed-pod, #hud .hud-tach, #hud .hud-gear-mode, #hud .hud-nitro-pod { display: none !important; }
#hud .hud-status-pod .pod-cell:first-child, #hud .hud-status-pod .pod-div:first-of-type { display: none; }

/* glass chips (top) + trip pod */
#hud .hud-route, #hud .hud-env, #hud .hud-status-pod, #hud .hud-cog {
  background: linear-gradient(180deg, rgba(20,26,38,.52), rgba(8,12,20,.42)); border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
#hud .hud-route { font-family: var(--font-display); font-weight: 600; letter-spacing: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
#hud .hud-env { font-family: var(--font-display); font-weight: 600; letter-spacing: 1.5px; }
#hud .pod-cell b { font-family: var(--font-display); letter-spacing: 1.5px; }

/* ---------- cluster ---------- */
.ldc { --spd: 0; position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); width: 260px; height: 206px;
  transform: translateX(-50%) scale(var(--ldc-s, 1)); transform-origin: 50% 100%; pointer-events: none; color: #eef6ff;
  font-family: var(--font-display); animation: hudFade .5s var(--ease) both; transition: transform .25s var(--ease), filter .25s var(--ease); }
.ldc::before { content: ''; position: absolute; left: 22px; right: 22px; top: 16px; bottom: 24px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6,10,18,.62), rgba(6,10,18,.34) 70%, transparent);
  box-shadow: 0 0 calc(16px + 40px * var(--spd)) rgba(var(--acc-rgb), calc(.04 + .16 * var(--spd))); }
.ldc-arc { position: absolute; inset: 0 10px 16px; width: 240px; height: 190px; overflow: visible; }
.ldc-track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 9; stroke-linecap: round; }
.ldc-red { fill: none; stroke: rgba(255,90,78,.55); stroke-width: 9; }
.ldc-fill { fill: none; stroke: var(--acc); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(var(--acc-rgb),.75)); transition: stroke .2s; }
.ldc-ticks line { stroke: rgba(255,255,255,.38); stroke-width: 1.4; }
.ldc-ticks line.mj { stroke: rgba(255,255,255,.75); stroke-width: 2.2; }
.ldc-ticks line.hot { stroke: var(--red); }
.ldc-ticks text { fill: rgba(230,240,255,.7); font: 600 10px var(--font-display); text-anchor: middle; letter-spacing: .5px; }
.ldc.redline .ldc-fill { stroke: #ffb36b; filter: drop-shadow(0 0 7px rgba(255,120,80,.9)); }
.ldc-speed { position: absolute; left: 0; right: 0; top: 76px; display: flex; flex-direction: column; align-items: center; line-height: .85;
  text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 0 calc(18px * var(--spd)) rgba(var(--acc-rgb), .45); }
.ldc-spd { font-size: 62px; font-weight: 600; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.ldc-unit { margin-top: 5px; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: rgba(220,232,250,.66); }
.ldc-gearbox { position: absolute; right: 2px; top: 118px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ldc-gear { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 32px; font-weight: 700;
  background: rgba(8,12,20,.55); border: 1px solid rgba(var(--acc-rgb),.45); box-shadow: inset 0 0 12px rgba(var(--acc-rgb),.18), 0 0 14px rgba(var(--acc-rgb),.18); color: var(--acc); }
.ldc-gear.pop { animation: ldcPop .28s var(--ease); }
.ldc-mode { font-size: 9px; font-weight: 700; letter-spacing: 2px; padding: 2px 7px; border-radius: 99px; color: rgba(230,240,255,.8); background: rgba(255,255,255,.08); border: 1px solid var(--stroke); }
.ldc.manual .ldc-mode { color: #10161f; background: var(--acc); border-color: var(--acc); }
.ldc-rpm { position: absolute; left: 0; right: 0; top: 150px; text-align: center; font-size: 11px; letter-spacing: 2px; color: rgba(220,232,250,.6); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.ldc-rpm b { color: #eef6ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.ldc-shift { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: #fff; background: var(--red); box-shadow: 0 0 16px rgba(255,90,78,.8); opacity: 0; transition: opacity .12s; }
.ldc.shift .ldc-shift { opacity: 1; animation: ldcFlash .32s steps(2, jump-none) infinite; }
.ldc-nos { position: absolute; left: 14px; top: 112px; width: 6px; height: 54px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; display: flex; align-items: flex-end; }
.ldc-nos i { display: block; width: 100%; height: 0%; border-radius: 4px; background: var(--acc); box-shadow: 0 0 8px rgba(var(--acc-rgb),.8); transition: height .15s linear; }

.ldc.noslow .ldc-nos i { background: #5a657a; box-shadow: none; }
.ldc.nos { --ldc-k: 1.035; filter: drop-shadow(1.5px 0 0 rgba(255,60,140,.35)) drop-shadow(-1.5px 0 0 rgba(60,220,255,.35)); }
.ldc.nos { transform: translateX(-50%) scale(calc(var(--ldc-s, 1) * 1.035)); }
.ldc.nos .ldc-nos i { background: #ffce8a; box-shadow: 0 0 10px rgba(255,206,138,.9); }
@keyframes ldcPop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ldcFlash { 0% { opacity: 1; } 50% { opacity: .35; } }

/* controls hint (fades) */
.ldc-hint { position: absolute; left: 50%; bottom: calc(218px + env(safe-area-inset-bottom)); transform: translate(-50%, 6px); padding: 7px 14px; border-radius: 99px;
  font: 600 12px var(--font-display); letter-spacing: 1.5px; color: rgba(235,245,255,.9); background: var(--plate); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); white-space: nowrap; pointer-events: none; }
.ldc-hint.show { opacity: 1; transform: translate(-50%, 0); }
.ldc-hint.big { font-size: 16px; padding: 9px 20px; color: #fff; border-color: rgba(255,90,78,.7); box-shadow: 0 0 22px rgba(255,90,78,.45); animation: ldcPulse .8s ease-in-out infinite; }
@keyframes ldcPulse { 50% { box-shadow: 0 0 6px rgba(255,90,78,.2); } }

/* touch: gear buttons + compact cluster */
.touch-gears { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(300px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.tbtn-gear { width: 48px !important; height: 44px !important; border-radius: 12px !important; font-size: 16px !important; background: rgba(8,12,20,.42); border: 1px solid rgba(var(--acc-rgb, 123,231,214),.45); color: #eef6ff; }
.tbtn-gear.on { background: rgba(123,231,214,.3); }
body.touch .ldc { --ldc-s: .78; }
body.touch .ldc-hint { bottom: calc(176px + env(safe-area-inset-bottom)); }
@media (max-height: 500px) {
  .ldc { --ldc-s: .7; }
  body.touch .ldc { --ldc-s: .62; bottom: calc(2px + env(safe-area-inset-bottom)); }
  .ldc-hint { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.touch .ldc-hint { bottom: calc(132px + env(safe-area-inset-bottom)); }
  .touch-gears { flex-direction: row; right: auto; left: calc(16px + env(safe-area-inset-left)); bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
}
@media (max-width: 560px) and (min-height: 501px) { body.touch .ldc { --ldc-s: .7; bottom: calc(250px + env(safe-area-inset-bottom)); } body.touch .ldc-hint { bottom: calc(400px + env(safe-area-inset-bottom)); } }
@media (hover: hover) and (pointer: fine) { .touch-gears { display: none; } }
@media (prefers-reduced-motion: reduce) { .ldc-shift, .ldc-hint.big, .ldc-gear.pop { animation: none !important; } }