/* Touch controls: wheel bottom left, pedals and selector bottom right. Landscape first, notch safe. */
body.touch, #touch { --bt: 52px; }
#touch { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
  --m: 12px; --wh: clamp(150px, 50vh, 232px); --ph: clamp(92px, 32vh, 138px); --sh: clamp(196px, 52vh, 232px);
  --y: #f1c40f; --red: #d92b20; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch > * { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
#touch svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- steering wheel ---- */
.tc-wheelwrap { position: absolute; left: calc(var(--sl) + var(--m) + 2px); bottom: calc(var(--sb) + var(--m) - 6px); width: var(--wh); height: var(--wh); pointer-events: none !important; }
.tc-wheel { position: absolute; inset: 0; border-radius: 50%; pointer-events: auto; touch-action: none; }
.tc-wbase, .tc-wrot, .tc-wgloss { position: absolute; pointer-events: none; }
.tc-wbase { inset: 0; }
.tc-wrot { inset: 7.5%; will-change: transform; }
.tc-wgloss { inset: 7.5%; }
.tc-ticks line { stroke: rgba(255,255,255,.26); stroke-width: 1.4; stroke-linecap: round; }
.tc-ticks line.m { stroke: rgba(255,255,255,.4); }
.tc-ticks line.c { stroke: var(--y); stroke-width: 2.4; }
.tc-wheel.down .tc-ticks line.m { stroke: rgba(255,255,255,.6); }
.tc-wrot svg { filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); }

/* ---- buttons: dark glass face in an aluminium bezel ---- */
.tc-btn { position: relative; width: var(--bt); height: var(--bt); padding: 0; border: 0; border-radius: 50%; color: #eceef0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2f3136 0%, #17181b 62%, #0d0d0f 100%);
  box-shadow: 0 0 0 1.5px #0a0a0b, 0 0 0 3.5px #8c9197, 0 0 0 4.5px #d9dce0, 0 0 0 5.5px rgba(0,0,0,.55), 0 5px 10px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.45);
  transition: transform .07s, box-shadow .12s; touch-action: none; -webkit-appearance: none; appearance: none; }
.tc-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%); pointer-events: none; }
.tc-btn .tc-ico { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.tc-btn .tc-ico .acc { stroke: var(--y); }
.tc-btn .led { position: absolute; left: 50%; bottom: 7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2a2b2f; box-shadow: inset 0 1px 1px rgba(0,0,0,.7); }
.tc-btn.down, .tc-btn:active { transform: scale(.94); box-shadow: 0 0 0 1.5px #0a0a0b, 0 0 0 3.5px #6f747a, 0 0 0 4.5px #b4b8bd, 0 0 0 5.5px rgba(0,0,0,.55), 0 2px 5px 2px rgba(0,0,0,.5), inset 0 3px 8px rgba(0,0,0,.65); }
.tc-btn.down .led { background: var(--y); box-shadow: 0 0 6px 1px rgba(241,196,15,.8); }
.tc-hand .tc-ico .acc { stroke: var(--red); }
.tc-hand.down .led { background: #ff4a3d; box-shadow: 0 0 6px 1px rgba(255,74,61,.85); }
.tc-hand.down { color: #ff7a6e; }
.tc-nitro { --n: 1; }
.tc-nitro .tc-ico { stroke: none; fill: #d6d9dd; width: 46%; height: 46%; }
.tc-nitro::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; padding: 3px;
  background: conic-gradient(#31b6ff calc(var(--n) * 360deg), rgba(255,255,255,.12) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tc-nitro.down .tc-ico, .tc-nitro.boost .tc-ico { fill: #5fc6ff; filter: drop-shadow(0 0 5px rgba(49,182,255,.9)); }
.tc-nitro.down .led, .tc-nitro.boost .led { background: #31b6ff; box-shadow: 0 0 6px 1px rgba(49,182,255,.9); }

.tc-horn { position: absolute; left: calc(var(--sl) + var(--m) + var(--wh) + 14px); bottom: calc(var(--sb) + var(--m) + 4px); }

/* top right: camera sits beside the existing settings button */
.tc-cam { position: fixed; z-index: 31; top: calc(max(14px, var(--st)) + 2px); right: calc(max(14px, var(--sr)) + var(--bt) + 22px); }
body.touch #gearBtn.tc-set { width: var(--bt); height: var(--bt); border-radius: 50%; color: #eceef0; z-index: 31; -webkit-backdrop-filter: none; backdrop-filter: none;
  top: calc(max(14px, env(safe-area-inset-top, 0px)) + 2px); right: max(14px, env(safe-area-inset-right, 0px));
  background: radial-gradient(circle at 50% 35%, #2f3136 0%, #17181b 62%, #0d0d0f 100%);
  box-shadow: 0 0 0 1.5px #0a0a0b, 0 0 0 3.5px #8c9197, 0 0 0 4.5px #d9dce0, 0 0 0 5.5px rgba(0,0,0,.55), 0 5px 10px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.45); }
body.touch #gearBtn.tc-set svg { width: 28px; height: 28px; stroke-width: 1.7; }
body.touch #gearBtn.tc-set:active { transform: scale(.94); background: radial-gradient(circle at 50% 35%, #2f3136, #0d0d0f); color: #eceef0; }
body.touch.settings-open .tc-cam { visibility: hidden; }
body.touch:not(.tc-started) .tc-cam { display: none; }

/* ---- right side: handbrake, selector, pedals, nitro ---- */
.tc-right { position: absolute; right: calc(var(--sr) + var(--m) + 4px); bottom: calc(var(--sb) + var(--m)); display: grid; pointer-events: none !important;
  grid-template-columns: auto auto auto; grid-template-areas: "hand . ." "shift brake gas"; align-items: end; column-gap: 12px; row-gap: 22px; }
.tc-right > * { pointer-events: auto; }
.tc-hand { grid-area: hand; justify-self: center; }
.tc-nitro { grid-area: gas; align-self: end; justify-self: center; margin-bottom: calc(var(--ph) + 20px); }

/* selector: brushed aluminium plate with a dark gate and a knurled knob */
.tc-shift { grid-area: shift; position: relative; width: 58px; height: var(--sh); border-radius: 12px; touch-action: none;
  background: linear-gradient(90deg, #8b9096 0%, #dadde0 18%, #a4a9af 50%, #dfe1e4 82%, #868b91 100%);
  box-shadow: 0 0 0 1px #0a0a0b, 0 6px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.25); }
.tc-shift::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px); pointer-events: none; }
.tc-shift .slot { position: absolute; left: 7px; right: 7px; top: 6px; bottom: 6px; border-radius: 8px; background: linear-gradient(90deg, #060607, #151618 50%, #060607); box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.55); }
.tc-shift .lt { position: absolute; left: 0; right: 0; text-align: center; font: 700 15px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: rgba(255,255,255,.34); transform: translateY(-50%); pointer-events: none; letter-spacing: .02em; }
.tc-shift .lt:nth-of-type(1) { top: 12.5%; } .tc-shift .lt:nth-of-type(2) { top: 37.5%; } .tc-shift .lt:nth-of-type(3) { top: 62.5%; } .tc-shift .lt:nth-of-type(4) { top: 87.5%; }
.tc-shift .lt.on { visibility: hidden; }
.tc-shift .knob { position: absolute; left: 3px; right: 3px; height: 23%; top: 1.5%; border-radius: 9px; display: grid; place-items: center; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, rgba(255,255,255,0) 1px 3px), linear-gradient(90deg, #5d6167 0%, #e9ebee 22%, #b0b4b9 48%, #f2f3f5 74%, #6b6f75 100%);
  box-shadow: 0 5px 9px rgba(0,0,0,.65), 0 0 0 1px #0a0a0b, inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.35); transition: top .13s cubic-bezier(.2,.8,.2,1); }
.tc-shift .knob b { display: grid; place-items: center; width: 62%; height: 58%; border-radius: 6px; font: 800 17px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #f4f4f2;
  background: linear-gradient(180deg, #1e1f22, #0b0b0c); box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.55); }
.tc-shift[data-sel="D"] .knob b { color: var(--y); } .tc-shift[data-sel="P"] .knob b { color: #ff5a4d; }
.tc-shift.drag .knob { transition: none; }
.tc-shift.down { box-shadow: 0 0 0 1px #0a0a0b, 0 6px 14px rgba(0,0,0,.55), 0 0 0 3px rgba(241,196,15,.55), inset 0 1px 0 rgba(255,255,255,.7); }

/* pedals */
.tc-pedal { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; }
.tc-pedal svg { filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); }
.tc-pedal .plate { transform-box: fill-box; transform-origin: 50% 100%; }
.tc-gas { grid-area: gas; height: var(--ph); width: calc(var(--ph) * 72 / 128); }
.tc-brake { grid-area: brake; height: calc(var(--ph) * .88); width: calc(var(--ph) * .88 * 96 / 112); }
.tc-meter { position: absolute; top: 4%; bottom: 8%; width: 4px; display: flex; flex-direction: column-reverse; gap: 3px; pointer-events: none; }
.tc-gas .tc-meter { left: -9px; } .tc-brake .tc-meter { right: -9px; }
.tc-meter i { flex: 1; border-radius: 1px; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.tc-gas .tc-meter i.on { background: var(--y); box-shadow: 0 0 5px rgba(241,196,15,.7); }
.tc-brake .tc-meter i.on { background: #ff4a3d; box-shadow: 0 0 5px rgba(255,74,61,.7); }

/* ---- HUD stays clear of the controls ---- */
body.touch #cluster { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
body.touch #lap { top: calc(max(14px, env(safe-area-inset-top, 0px)) + 4px); }

/* ---- rotate prompt ---- */
.tc-rotate { display: none; position: fixed; inset: 0; z-index: 60; place-items: center; background: rgba(8,8,10,.9); pointer-events: auto; }
.tc-rotate .card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 34px; border: 1.5px solid rgba(255,255,255,.2); border-radius: 16px; font-size: 16px; font-weight: 600; color: #f4f4f2; }
.tc-rotate .tc-ico { width: 84px; height: 84px; fill: none; stroke: #f4f4f2; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: tcrot 2.6s ease-in-out infinite; }
.tc-rotate .tc-ico .acc { stroke: var(--y); }
@keyframes tcrot { 0%,20% { transform: rotate(0); } 60%,100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.touch.tc-started:not(.tc-portrait-ok) .tc-rotate { display: grid; } }
@media (prefers-reduced-motion: reduce) { .tc-rotate .tc-ico { animation: none; } }

/* ---- portrait fallback after the prompt is dismissed ---- */
@media (orientation: portrait) {
  #touch { --wh: clamp(120px, 38vw, 170px); --ph: clamp(80px, 12vh, 104px); --sh: 200px; --bt: 48px; }
  .tc-right { column-gap: 8px; }
  .tc-horn { bottom: calc(var(--sb) + var(--m) + var(--wh) + 14px); left: calc(var(--sl) + var(--m) + 8px); }
}
@media (max-height: 360px) and (orientation: landscape) { #touch { --sh: 196px; --ph: 100px; --wh: 160px; } }