@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap; src: url(fonts/Archivo-300-800.woff2) format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/JetBrainsMono-600.woff2) format('woff2'); }
  :root { --ink: #f3f4f1; --dim: rgba(243,244,241,.62); --acc: #ff5a1f; --acc2: #ffb347; --nos: #38c8ff; --panel: rgba(8,10,12,.55);
          --disp: "Archivo", "Helvetica Neue", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }
  * { box-sizing: border-box; }
  html, body { overscroll-behavior: none; }   /* (round 25: no pull-to-refresh / rubber band) */
  html, body { margin: 0; height: 100%; background: #07090b; color: var(--ink); font: 14px/1.3 var(--disp); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
  #view { position: fixed; inset: 0; touch-action: none; }
  #view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .ov { position: fixed; pointer-events: none; z-index: 5; }
  /* loading / title */
  #title { inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 60%, #1b1512 0%, #07090b 70%); z-index: 20; transition: opacity 1s, background 1.2s; pointer-events: auto; }
  /* the loading card's backdrop: San Francisco from a helicopter at golden hour - over the bay off the Ferry Building,
     the Bay Bridge's west span, the downtown skyline against the low sun - rendered by the game itself (tools/aerial.cjs:
     the ultra preset, 2560 x 1440 -> assets/title_sf.webp, 268 KB, preloaded). The first paint: an 80 x 45 version
     inline in the CSS (~550 bytes; over a gradient in its colours should a policy refuse data: images), sharpened by
     the full one as soon as it has loaded; it fades out as the game behind it is ready */
  #titleBg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity 1.2s;
    background: url(data:image/webp;base64,UklGRogDAABXRUJQVlA4IHwDAADwEACdASpQAC0APt1YokyopKMiMzjpWRAbiWIAvy/iydJpHGpsR89YXhXQ9HcoK7++rjTrZ4dKO85j6/53iZG0XCL6XwXTnGIOicFK69ZIHhxrKkm+c5D8CIxvMpFXlsc8DNht060Unjb42WuHlv9f2t+McAD4vmjR61NuJvEcsEft8ZxRDwNpQhE8HR4sPgAA/vEGPYrEuqU89BbzP/cS2Ko7c0oz8O72TEjLu+0YEUiVk6cs8o/R3hw+f9qYa7ytbvqDoIadLNoAGV3iMxlpAv/iNrecMicz24tdeO0E86O5hPmjS7HEh/Ly68N+6V/b1q3Tvospg7TKON3UpqTEvTRiGcrH66kNoELhSsSkoDnJKMpTS08M30EXVytQ0uEACashqoN+M7e9qM2dBhTzfRzDWm+QkNKJIAJ0GVmCVyT1oyrqOfuR3AVOJs24SNM1BSb+szFihgV4cgFM6SQ244tArCqNYprkqeRNep5InK+wQ+vEeUvgjmfMuuaAEKlRSYvV3vw8c61fI60W0DEFbdczMbMYH631gZrsSs1VcDjnTlQGqjPie5/0o7WQc0idSCft/4qvbpydoFhHko2y2Y+rTdvoQLIOLje2eM2rstZb93p84ivDYXLJWHEoMCVtX3Jp+QiNXFQUgnGNCjBI4Wyl9m3e/2l0BgEEDAU/fYeUOEKgDX4XEf0K8IUC3PrkddMYO+FX6swg/r4fVU6LJeaqrNH/EIwEdmC3YO4gx3AdYNMcqIG+z9wLfffLBiElN64ihOx02KGsXPtWxirVbJUQjtfOrAEpDEkjiNHikT8mtwJWgt8CPhMSlqIcehB1ckbwuxvxdZMXFmDVeBU7wQ4QwYX4UcQIQ/UXpXFWl/p5RsgUyfMeJs+FIgWSaUVzxrf6AqO7mxogXRnkIygg/zeVYVg16cAPfQELnljOsP/L5HH7HVxqEMjBDwyGHot/j20LmAnasqQsJ7l6pGSuIE7NydUa1yBlJ4uuDH+GyUcPIaniQjhEaFpz97yNVCMJuEYU9O57MOCZ9FHUS58w82maddCzKCyHBfICKXonn+FRypnCaGxKLVfjlmfJipyoxP/SWnrEqVDB75zLshYpJnO0hUHbij6jEQQlpn64RmIYlyX202i63HJDoXwDS59YLd//S5z4nM5X3CYm76DwVhiS/FvElGLADoAA) center 40% / cover no-repeat, linear-gradient(180deg, #d8cdb7 0%, #e8dcc2 26%, #c7b391 34%, #6e6a66 42%, #4b4b4f 56%, #3c4547 70%, #2a3337 100%); }
  #titleBg i { position: absolute; inset: 0; background: url(assets/title_sf.webp) center 40% / cover no-repeat; animation: sfDrift 40s ease-out forwards; }
  #titleBg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 42% at 50% 50%, rgba(5,7,9,.58) 0%, rgba(5,7,9,.3) 60%, rgba(5,7,9,0) 100%), linear-gradient(180deg, rgba(5,7,9,.18) 0%, rgba(5,7,9,0) 28%, rgba(5,7,9,0) 66%, rgba(5,7,9,.5) 100%); }
  @keyframes sfDrift { from { transform: scale(1.07); } to { transform: scale(1.02) translate3d(0, -0.6%, 0); } }
  #title > div:not(#titleBg) { position: relative; z-index: 1; }
  #title.ready #titleBg { opacity: 0; }
  #title:not(.ready) h1 { text-shadow: 0 4px 34px rgba(0,0,0,.6); } #title:not(.ready) .sub, #title:not(.ready) #stage, #title:not(.ready) #keys, #title:not(.ready) #keysT { color: rgba(243,244,241,.86); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.7); }
  #title.ready { background: linear-gradient(180deg, rgba(7,9,11,.55) 0%, rgba(7,9,11,.05) 38%, rgba(7,9,11,.05) 62%, rgba(7,9,11,.7) 100%); }
  #title.ready h1 { text-shadow: 0 4px 40px rgba(0,0,0,.55); }
  #title.gone, #title.gone * { opacity: 0; pointer-events: none !important; }
  #title h1 { margin: 0; font-weight: 800; font-stretch: 125%; font-size: clamp(38px, 8vw, 110px); letter-spacing: .06em; line-height: .9; }
  #title h1 em { font-style: normal; color: var(--acc); }
  #title .sub { margin-top: 14px; font: 600 clamp(10px, 1.2vw, 13px) var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--dim); }
  #bar { width: min(420px, 70vw); height: 3px; background: rgba(255,255,255,.12); margin: 34px auto 0; overflow: hidden; }
  #bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: transform .3s linear; }
  #stage { margin-top: 12px; font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); min-height: 1.3em; }
  #go { margin-top: 26px; padding: 14px 34px; font: 800 15px var(--disp); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase; color: #0b0b0b; background: var(--acc); border: 0; border-radius: 3px; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; pointer-events: none; }
  #go.on { opacity: 1; transform: none; pointer-events: auto; }
  #go:hover { background: var(--acc2); }
  #keys { margin-top: 22px; font: 600 11px var(--mono); letter-spacing: .12em; color: var(--dim); line-height: 2; }
  #keys b { color: var(--ink); border: 1px solid rgba(255,255,255,.25); border-radius: 3px; padding: 1px 6px; margin: 0 2px; font-weight: 600; }
  #tierNote { margin-top: 6px; font: 600 10px var(--mono); letter-spacing: .08em; color: #ffc38a; max-width: 60ch; margin-inline: auto; } #tierNote:empty { display: none; }
  #err { margin-top: 18px; color: #ff8a70; font: 600 12px var(--mono); max-width: 60ch; }
  /* HUD, NFS Unbound style: a round speedometer bottom right (the speed big in the middle, the gear in a chip under it,
     the rev arc round it with the redline, the nitrous arc outside on its left), the round minimap bottom left with the
     district under it, the menu chips top right */
  #hud { right: max(16px, 2.6vw); bottom: max(12px, 2.4vh); width: clamp(176px, 16.5vw, 244px); aspect-ratio: 1; opacity: 0; transition: opacity .6s; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
  body.play #hud, body.play #where, body.play #map, body.play #mini { opacity: 1; }
  #dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  #dial .face { fill: url(#dface); stroke: rgba(255,255,255,.2); stroke-width: 1.2; }
  #dial .trk { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 7; }
  #dial #red { fill: none; stroke: #ff2d2d; stroke-width: 7; opacity: .85; }
  #dial #rpm { fill: none; stroke: #f4f7fb; stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke .15s; }
  #hud.hot #dial #rpm { stroke: #ff3b30; }
  #dial .tick { stroke: rgba(255,255,255,.75); stroke-width: 1.6; } #dial .tick.min { stroke: rgba(255,255,255,.35); stroke-width: 1; }
  #dial .num { fill: rgba(255,255,255,.8); font: 700 11px var(--disp); font-stretch: 112%; text-anchor: middle; dominant-baseline: central; }
  #dial .num.r { fill: #ff4a3d; }
  #dial .nosT { fill: none; stroke: rgba(56,200,255,.18); stroke-width: 9; stroke-linecap: round; }
  #dial #nos { fill: none; stroke: url(#nosG); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(56,200,255,.8)); }
  #dial .nosI { fill: var(--nos); }
  #dialC { position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%); text-align: center; line-height: 1; }
  #spd { font-weight: 800; font-stretch: 125%; font-size: clamp(38px, 3.9vw, 56px); letter-spacing: .01em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
  #unit { font: 700 9px var(--disp); font-stretch: 110%; letter-spacing: .22em; color: var(--dim); margin-top: 5px; }
  #gear { display: inline-block; margin-top: 9px; min-width: 26px; padding: 3px 6px 2px; border-radius: 5px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); font-weight: 800; font-stretch: 115%; font-size: clamp(14px, 1.3vw, 18px); color: var(--ink); }
  #hud.hot #gear { background: #ff3b30; border-color: #ff3b30; }
  #where { left: max(16px, 2.6vw); bottom: max(10px, 2vh); width: clamp(150px, 15vw, 210px); text-align: center; opacity: 0; transition: opacity .6s; text-shadow: 0 1px 10px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6); }
  #where .hood { font-weight: 800; font-stretch: 112%; font-size: clamp(13px, 1.25vw, 17px); letter-spacing: .03em; text-transform: capitalize; white-space: nowrap; }
  #where .st { font: 700 10px var(--disp); font-stretch: 110%; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,244,241,.8); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #where .x { font: 600 9px var(--mono); letter-spacing: .16em; color: var(--dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #where .dist { font: 600 11px var(--mono); letter-spacing: .2em; color: var(--acc2); margin-top: 6px; }
  #mini { left: calc(max(16px, 2.6vw) + clamp(150px, 15vw, 210px) / 2 - clamp(140px, 13.5vw, 190px) / 2); bottom: calc(max(10px, 2vh) + 52px); width: clamp(140px, 13.5vw, 190px); height: clamp(140px, 13.5vw, 190px); border-radius: 50%; overflow: hidden; background: rgba(8,10,12,.5); border: 2px solid rgba(255,255,255,.72); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.35); opacity: 0; transition: opacity .6s; }
  #mini canvas { width: 100%; height: 100%; display: block; }
  #toast { left: 50%; top: 18%; transform: translateX(-50%); font-weight: 800; font-stretch: 118%; font-size: clamp(18px, 2.4vw, 30px); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .35s; text-shadow: 0 2px 20px rgba(0,0,0,.6); white-space: nowrap; }
  #toast.on { opacity: 1; }
  #toast small { display: block; font: 600 11px var(--mono); letter-spacing: .25em; color: var(--acc2); margin-top: 6px; text-align: center; }
  #drift { left: 50%; top: 27%; transform: translateX(-50%); font: 800 clamp(14px, 1.6vw, 20px) var(--disp); letter-spacing: .2em; color: var(--acc2); opacity: 0; transition: opacity .25s; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
  #drift.on { opacity: 1; }
  #fps { right: 8px; top: 6px; font: 600 10px var(--mono); color: rgba(255,255,255,.4); }
  #help { inset: 0; display: none; place-items: center; background: rgba(0,0,0,.55); z-index: 15; pointer-events: auto; }
  body.help #help { display: grid; }
  #help .card { background: rgba(10,12,14,.92); border: 1px solid rgba(255,255,255,.14); padding: 26px 30px; border-radius: 6px; font: 600 12px var(--mono); letter-spacing: .08em; line-height: 2.1; max-width: 92vw; }
  #help h2 { margin: 0 0 10px; font: 800 18px var(--disp); letter-spacing: .14em; text-transform: uppercase; }
  #help b { color: var(--acc2); display: inline-block; min-width: 150px; }
  /* touch controls */
  #touch { inset: 0; display: none; z-index: 8; pointer-events: none; }
  body.touch.play #touch { display: block; }
  #touch .b { position: absolute; pointer-events: auto; border-radius: 50%; background: rgba(12,14,16,.45); border: 1px solid rgba(255,255,255,.28); color: var(--ink); display: grid; place-items: center; font: 800 12px var(--disp); letter-spacing: .12em; touch-action: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #touch .b.on { background: rgba(255,90,31,.55); border-color: var(--acc); }
  #tSteer { left: 3vw; bottom: 4vh; width: 38vw; max-width: 300px; height: 110px; border-radius: 55px !important; }
  #tSteer::after { content: "◀  STEER  ▶"; font: 800 12px var(--disp); letter-spacing: .18em; color: var(--dim); }
  #tSteer::before { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); transform: translateX(calc(var(--s, 0) * min(30vw, 110px))); transition: background .15s; }
  #tSteer.on::before { background: rgba(255,90,31,.55); border-color: var(--acc); }
  #tCam { left: 3vw; bottom: calc(4vh + 122px); width: 54px; height: 54px; font-size: 10px !important; }
  #touch, #touch * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  #tGas { right: 3vw; bottom: 4vh; width: 96px; height: 96px; }
  #tBrake { right: calc(3vw + 108px); bottom: 3vh; width: 76px; height: 76px; }
  #tHb { right: calc(3vw + 110px); bottom: calc(3vh + 90px); width: 62px; height: 62px; font-size: 10px !important; }
  #tNitro { right: calc(3vw + 18px); bottom: calc(4vh + 110px); width: 62px; height: 62px; border-color: var(--nos) !important; }
  body.touch #hud { bottom: auto; top: max(10px, 2vh); width: clamp(120px, 30vw, 150px); }
  body.touch #spd { font-size: 26px; } body.touch #gear { font-size: 11px; margin-top: 4px; min-width: 20px; } body.touch #unit { font-size: 7px; margin-top: 3px; } body.touch #gmode { display: none; }
  body.touch #toast { top: 42%; } body.touch #drift { top: 50%; }
  body.touch #mini { display: none; }
  body.touch #where { bottom: auto; top: max(10px, 2vh); text-align: left; width: auto; max-width: 34vw; }
  #menu { right: max(16px, 2.5vw); top: max(14px, 2.5vh); display: flex; gap: 8px; z-index: 9; pointer-events: auto; opacity: 0; transition: opacity .6s; }
  body.play #menu { opacity: 1; }
  body.touch #menu { top: auto; bottom: calc(4vh + 190px); }
  #menu button { background: rgba(10,12,16,.55); color: var(--ink); border: 1px solid rgba(255,255,255,.24); border-radius: 6px; padding: 7px 11px; font: 800 10px var(--disp); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #menu button:hover { border-color: var(--acc); }
  body.touch #hud { right: auto; left: 50%; transform: translateX(-50%); }
  /* driver aid lights (HUD) and the pause menu */
  #aids { position: absolute; right: 2%; bottom: 100%; margin-bottom: 4px; display: flex; gap: 5px; font: 700 8px var(--disp); font-stretch: 110%; letter-spacing: .14em; }
  #aids i { font-style: normal; padding: 2px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; color: var(--dim); transition: color .1s, background .1s, border-color .1s; }
  #aids i.act { color: #0b0b0b; background: var(--acc2); border-color: var(--acc2); }
  #aids i.off { opacity: .35; text-decoration: line-through; }
  #gmode { position: absolute; left: 50%; top: 80%; transform: translateX(-50%); font: 700 8px var(--disp); letter-spacing: .2em; color: var(--dim); }
  body.touch #aids { display: none; }
  #pause { inset: 0; display: none; place-items: center; background: rgba(0,0,0,.55); z-index: 16; pointer-events: auto; }
  body.paused #pause { display: grid; }
  #pause .card { background: rgba(10,12,14,.92); border: 1px solid rgba(255,255,255,.14); padding: 24px 28px; border-radius: 6px; width: min(560px, 92vw); max-height: 92vh; overflow: auto; }
  #pause h2 { margin: 0 0 4px; font: 800 20px var(--disp); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }
  #pause h3 { margin: 16px 0 8px; font: 600 10px var(--mono); letter-spacing: .25em; text-transform: uppercase; color: var(--dim); }
  #pause .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #pause .opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left; background: var(--panel); color: var(--ink); border: 1px solid rgba(255,255,255,.18); border-radius: 3px; padding: 10px 12px; cursor: pointer; font: 800 12px var(--disp); letter-spacing: .12em; text-transform: uppercase; }
  #pause .opt:hover { border-color: var(--acc); }
  #pause .opt b { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--dim); }
  #pause .opt[aria-pressed="true"] b { color: var(--acc); }
  #pause .opt small { grid-column: 1 / -1; font: 600 10px var(--mono); letter-spacing: .04em; text-transform: none; color: var(--dim); line-height: 1.4; }
  #pause .opt.wide { width: 100%; }
  #pause .opt.vol { cursor: default; }
  #pause .opt.vol input { grid-column: 1 / -1; width: 100%; accent-color: var(--acc); margin: 6px 0 0; }
  #manualHint { margin: 8px 0 0; font: 600 10px var(--mono); letter-spacing: .04em; color: var(--dim); line-height: 1.5; }
  #manualHint.on { color: var(--acc2); }
  #resume { display: block; width: 100%; margin-top: 18px; padding: 13px 20px; font: 800 14px var(--disp); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase; color: #0b0b0b; background: var(--acc); border: 0; border-radius: 3px; cursor: pointer; }
  #resume:hover { background: var(--acc2); }
  /* (round 25) graphics: one level (Auto, Battery saver, Mobile, Performance, High, Ultra: ui/pause.js), the frame cap */
  #pause .gfx, #pause .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } #pause .grid3 { margin-top: 8px; }
  #pause .opt[aria-checked="true"] { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
  #pause .opt[aria-checked="true"] b { color: var(--acc); }
  #pause .opt.risk small::after { content: " · heavy here (a crash drops a level)"; color: #ffc38a; }
  #pause .opt:disabled { opacity: .4; cursor: not-allowed; }
  #gfxAsk { display: none; margin-top: 8px; padding: 8px 10px; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--acc); border-radius: 3px; font: 600 11px var(--mono); color: var(--ink); }
  #gfxAsk.on { display: flex; } #gfxAsk span { flex: 1 1 200px; }
  #gfxAsk button { padding: 7px 12px; font: 800 11px var(--disp); letter-spacing: .14em; text-transform: uppercase; border-radius: 3px; cursor: pointer; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--ink); }
  #gfxAsk #gfxGo { background: var(--acc); border-color: var(--acc); color: #0b0b0b; }
  #gfxNote { margin: 6px 0 0; font: 600 10px var(--mono); letter-spacing: .04em; color: var(--dim); line-height: 1.5; } #gfxNote:empty { display: none; }
  @media (max-width: 480px) { #pause .grid { grid-template-columns: 1fr; } #pause .gfx { grid-template-columns: 1fr 1fr; } }
  /* no WebGPU (main.js noGpu): a panel in place of the loading bar */
  #nogpu { display: none; max-width: min(520px, 88vw); margin: 26px auto 0; padding: 18px 22px; text-align: left; background: rgba(10,12,14,.85); border: 1px solid rgba(255,90,31,.6); border-radius: 6px; }
  #nogpu h2 { margin: 0 0 8px; font: 800 17px var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
  #nogpu p { margin: 0; font: 500 14px/1.5 var(--disp); color: var(--ink); }
  #nogpu small { display: block; margin-top: 8px; font: 600 10px var(--mono); color: var(--dim); word-break: break-word; }
  #nogpu small:empty { display: none; }
  #nogpu button { margin-top: 14px; padding: 9px 20px; font: 800 12px var(--disp); letter-spacing: .16em; text-transform: uppercase; color: #0b0b0b; background: var(--acc); border: 0; border-radius: 3px; cursor: pointer; }
  body.nogpu #nogpu { display: block; } body.nogpu #bar, body.nogpu #stage, body.nogpu #keys, body.nogpu #keysT, body.nogpu #go { display: none; }
  /* touch: the title card's hints for thumbs, and it fits a phone held sideways */
  #keysT { display: none; margin-top: 18px; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--dim); line-height: 1.8; }
  body.touch #keys { display: none; } body.touch #keysT { display: block; } body.touch:not(.play) #toast { display: none; }
  @media (max-height: 500px) { #title h1 { font-size: clamp(30px, 11vh, 64px); } #title .sub { margin-top: 8px; } #bar { margin-top: 18px; } #go { margin-top: 14px; padding: 11px 30px; } #keys, #keysT { margin-top: 10px; } }
  /* portrait on a phone: a hint to turn it (the HUD and the controls are laid out for landscape) */
  #rotate { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; background: rgba(7,9,11,.88); text-align: center; font: 800 15px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
  #rotate i { display: block; width: 46px; height: 78px; margin: 0 auto 18px; border: 3px solid var(--acc); border-radius: 9px; animation: sfRot 2.4s ease-in-out infinite; }
  @keyframes sfRot { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
  @media (max-width: 700px) { #hud { width: 150px; } #spd { font-size: 34px; } }
  /* the taxi mode (?mode=waymo, src/taxi/taxi.js): the request card and the trip panel top centre, the running total top
     left, penalties under the panel, the ride's summary in the middle; the dial a power / regen gauge */
  .tx { position: fixed; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .35s, transform .35s; font-family: var(--disp); }
  body.play.waymo .tx.on, body.play.waymo #taxiTotal { opacity: 1; }
  #taxiCard, #taxiTrip { left: 50%; top: max(12px, 2vh); transform: translate(-50%, -8px); width: min(380px, 44vw); background: linear-gradient(180deg, rgba(10,14,18,.86), rgba(10,14,18,.72)); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 14px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  #taxiCard.on, #taxiTrip.on { transform: translate(-50%, 0); }
  .tx .tg { font: 800 10px var(--disp); font-stretch: 118%; letter-spacing: .22em; color: #3fd6c6; margin-bottom: 8px; }
  #taxiCard.compact .who, #taxiCard.compact .tg { display: none; } #taxiCard.compact { padding-top: 6px; padding-bottom: 6px; } #taxiCard.compact .leg:first-of-type { border-top: 0; }
  .tx .who { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; }
  .tx .who i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--disp); font-style: normal; color: #fff; }
  .tx b { display: block; font-weight: 800; font-stretch: 108%; font-size: 15px; letter-spacing: .01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tx small { display: block; font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .tx .leg { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); }
  .tx .leg em { font: 700 12px var(--mono); font-style: normal; color: #3fd6c6; }
  .tx .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
  .tx .dot.p { background: #3fd6c6; color: #3fd6c6; } .tx .dot.d { background: #ffb347; color: #ffb347; }
  #taxiTrip .dst { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; }
  #taxiTrip .dst b { font-size: 18px; }
  #taxiTrip .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; text-align: center; }
  #taxiTrip .row b { font-size: 20px; font-variant-numeric: tabular-nums; } #taxiTrip .row small { font-size: 9px; letter-spacing: .18em; }
  #taxiTrip .row b.late { color: #ff5a4f; } #taxiTrip .row em { display: block; font: 700 10px var(--mono); font-style: normal; color: #ff7a6f; height: 12px; }
  #taxiTrip .cf { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 10px; }
  #taxiTrip .cf small { font-size: 9px; letter-spacing: .14em; margin: 0; } #taxiTrip .cf b { font: 700 11px var(--mono); }
  #taxiTrip .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } #taxiTrip .bar i { display: block; height: 100%; transform-origin: 0 50%; transition: transform .3s, background .3s; }
  #taxiTotal { left: max(16px, 2.6vw); top: max(12px, 2vh); text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
  #taxiTotal b { font-size: clamp(22px, 2.2vw, 30px); color: #fff; } #taxiTotal small { font-size: 10px; letter-spacing: .14em; color: rgba(243,244,241,.8); text-transform: uppercase; }
  #taxiPen { left: 50%; top: calc(max(12px, 2vh) + 150px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 1; }
  body.tx-ride #taxiPen { top: calc(max(12px, 2vh) + 158px); }
  #taxiPen .pop { padding: 6px 14px; border-radius: 6px; background: rgba(10,14,18,.8); border-left: 3px solid #3fd6c6; text-align: center; animation: txPop 2.6s ease forwards; }
  #taxiPen .pop.bad { border-left-color: #ff5a4f; } #taxiPen .pop.bad b { color: #ff7a6f; }
  #taxiPen .pop.good { border-left-color: #43d17a; } #taxiPen .pop.good b { color: #6fe39a; }
  #taxiPen .pop b { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
  @keyframes txPop { 0% { opacity: 0; transform: translateY(-6px) scale(.96); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(4px); } }
  #taxiHint { left: 50%; top: 58%; transform: translateX(-50%); font: 800 clamp(13px, 1.4vw, 17px) var(--disp); letter-spacing: .18em; text-transform: uppercase; color: #3fd6c6; text-shadow: 0 2px 14px rgba(0,0,0,.7); white-space: nowrap; }
  body.tx-ride #taxiHint { color: #ffb347; }
  /* (round 27) the hint on a dark pill (teal letters over a bright sky read as nothing); the music's toast a small line
     under the earnings, not over the ride card (desktop) or mid-street (portrait) */
  #taxiHint { background: rgba(6, 10, 14, .62); padding: 6px 14px; border-radius: 999px; }
  #toast.music { left: 24px; top: 78px; transform: none; font-size: 12px; letter-spacing: .2em; text-align: left; }
  #toast.music small { text-align: left; font-size: 10px; margin-top: 3px; }
  body.touch #toast.music { left: 50%; transform: translateX(-50%); top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); font-size: 11px; text-align: center; }
  body.touch #toast.music small { text-align: center; font-size: 9px; }
  #taxiSum { left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97); width: min(340px, 86vw); background: rgba(10,14,18,.9); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
  #taxiSum.on { transform: translate(-50%, -50%); }
  #taxiSum .tg { text-align: center; font-size: 12px; } #taxiSum .st { text-align: center; font-size: 22px; color: #ffcf4a; letter-spacing: .12em; } #taxiSum .st i { font-style: normal; color: rgba(255,255,255,.18); }
  #taxiSum .who2 { text-align: center; font: 600 11px var(--mono); color: var(--dim); margin: 4px 0 10px; }
  #taxiSum .ln { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font: 600 12px var(--mono); color: rgba(243,244,241,.85); border-top: 1px solid rgba(255,255,255,.07); }
  #taxiSum .ln b { font: 700 13px var(--mono); display: inline; } #taxiSum .ln.neg b { color: #ff7a6f; } #taxiSum .ln.pos b { color: #6fe39a; }
  #taxiSum .tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.2); }
  #taxiSum .tot span { font: 800 11px var(--disp); letter-spacing: .2em; color: #3fd6c6; } #taxiSum .tot b { display: inline; font-size: 28px; color: #fff; }
  /* the Waymo's dial: power (white-teal) and regen (green, where the nitrous arc was); D / R in the chip */
  body.waymo:not(.ice) #dial #rpm { stroke: #8ff0e6; } body.waymo:not(.ice) #dial #red { display: none; } body.waymo:not(.ice) #gmode { display: none; }   /* (.ice: Teleoperator's Ferrari - its revs and nitrous) */
  body.waymo:not(.ice) #dial #nos { stroke: #43d17a; filter: drop-shadow(0 0 4px rgba(67,209,122,.8)); } body.waymo:not(.ice) #dial .nosT { stroke: rgba(67,209,122,.18); } body.waymo:not(.ice) #dial .nosI { fill: #43d17a; }
  body.waymo:not(.ice) #hud.hot #gear { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
  body.waymo:not(.ice) #tNitro, body.waymo:not(.ice) #tHb { display: none; }
  /* touch (the mobile tier): the panel narrower, the total smaller */
  /* (touch: the street's name top left, the dial top centre, the minimap top right, the pads along the bottom - the trip
     panel goes under the street's name, the total between the menu chips and GAS) */
  body.touch #taxiCard, body.touch #taxiTrip { top: calc(max(10px, 2vh) + 50px); left: 3vw; transform: translateY(-6px); width: min(290px, 34vw); padding: 7px 10px; }
  body.touch #taxiCard.on, body.touch #taxiTrip.on { transform: none; }
  body.touch .tx b { font-size: 12.5px; } body.touch .tx small { font-size: 9.5px; } body.touch #taxiTrip .dst b { font-size: 14px; } body.touch #taxiTrip .row { margin-top: 6px; } body.touch #taxiTrip .row b { font-size: 15px; } body.touch .tx .who, body.touch .tx .tg { display: none; }
  body.touch #taxiTrip .cf { margin-top: 6px; } body.touch .tx .leg { padding: 3px 0; }
  body.touch #taxiTotal { top: auto; bottom: calc(4vh + 112px); left: auto; right: 3vw; text-align: right; } body.touch #taxiTotal b { font-size: 18px; }
  body.touch #taxiPen { top: 41%; } body.touch #taxiPen .pop b { font-size: 12px; } body.touch #taxiHint { top: 52%; font-size: 12px; }
  body.touch #taxiSum { top: 56%; z-index: 9; transform: translate(-50%, -50%) scale(.8); } body.touch #taxiSum.on { transform: translate(-50%, -50%) scale(.84); }
  @media (max-height: 500px) { #taxiTrip .cf, #taxiCard .leg small { display: none; } }
  /* the title's modes */
  #modes { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
  #modes .mode { min-width: 170px; padding: 10px 16px 9px; text-align: left; background: rgba(10,12,16,.55); color: var(--ink); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #modes .mode b { display: block; font: 800 13px var(--disp); font-stretch: 116%; letter-spacing: .14em; text-transform: uppercase; }
  #modes .mode small { display: block; margin-top: 3px; font: 600 10px var(--mono); letter-spacing: .06em; color: var(--dim); }
  #modes .mode[aria-pressed="true"] { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
  #modes .mode[data-mode="waymo"][aria-pressed="true"] { border-color: #3fd6c6; box-shadow: inset 0 0 0 1px #3fd6c6; }
  body.waymo #go { background: #3fd6c6; } body.waymo #go:hover { background: #8ff0e6; } body.waymo #title h1 em { color: #3fd6c6; } body.waymo #bar i { background: linear-gradient(90deg, #3fd6c6, #8ff0e6); }
  @media (max-height: 500px) { #modes { margin-top: 10px; } #modes .mode { padding: 6px 10px; min-width: 140px; } #modes .mode small { display: none; } }
  /* Teleoperator (./build.sh taxi, ?variant=taxi): the taxi mode alone - no mode switch; its car from the pause menu's
     Change vehicle and "Choose your FSD" once loaded (ui/picker.js): a card per car over the live city */
  body.freeroam .tx { display: none !important; }
  body:not(.teleop) .tele, body.teleop .sfd, body.teleop #modes, body.teleop .modeH, body.teleop [data-mode-switch] { display: none !important; }
  body.picking #hud, body.picking #where, body.picking #map, body.picking #mini, body.picking #menu, body.picking #touch, body.picking .tx { opacity: 0 !important; pointer-events: none !important; }
  #picker { position: fixed; inset: 0; z-index: 30; visibility: hidden; opacity: 0; transition: opacity .55s, visibility 0s .55s; pointer-events: auto; color: var(--ink);
    background: linear-gradient(180deg, rgba(5,7,10,.78) 0%, rgba(5,7,10,.18) 26%, rgba(5,7,10,0) 40%, rgba(5,7,10,.55) 62%, rgba(5,7,10,.9) 100%); }
  #picker.on { visibility: visible; opacity: 1; transition: opacity .55s; }
  #picker .pk-in { position: absolute; inset: max(14px, 3.2vh) max(16px, 3vw) max(14px, 3vh); display: flex; flex-direction: column; }
  #picker .pk-hd small { font: 600 11px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: rgba(243,244,241,.7); }
  #picker .pk-hd h2 { margin: 6px 0 4px; font: 800 clamp(30px, 4.4vw, 66px)/.95 var(--disp); font-stretch: 125%; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
  #picker .pk-hd h2 em { font-style: normal; color: #5ef0d6; }
  #picker .pk-hd p { margin: 0; max-width: 52ch; font-size: 14px; color: rgba(243,244,241,.74); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
  #picker .pk-cards { margin-top: auto; display: flex; gap: clamp(10px, 1.6vw, 22px); justify-content: center; }
  #picker .pk-card { position: relative; width: min(340px, 18.2vw); padding: 0 0 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden;
    background: rgba(9,12,17,.7); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s, opacity .3s; opacity: .78; }
  #picker .pk-card:hover { opacity: .95; }
  #picker .pk-card[aria-pressed="true"] { opacity: 1; border-color: var(--acc); transform: translateY(-6px); box-shadow: 0 0 0 1px var(--acc), 0 22px 60px rgba(0,0,0,.55), 0 0 46px color-mix(in srgb, var(--acc) 28%, transparent); }
  #picker .pk-turn { position: relative; aspect-ratio: 16 / 9; touch-action: pan-y; cursor: grab; background: radial-gradient(ellipse 62% 58% at 50% 64%, #2b3038 0%, #12151b 58%, #090b0f 100%); }
  #picker .pk-turn:active { cursor: grabbing; }
  #picker .pk-turn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(9,12,17,.7) 100%); }
  #picker .pk-turn canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s; }
  #picker .pk-card.ready canvas { opacity: 1; }
  #picker .pk-load { position: absolute; right: 14px; bottom: 10px; z-index: 1; font: 600 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); opacity: 0; }
  #picker .pk-card.busy .pk-load { opacity: 1; animation: pkBlink 1s ease-in-out infinite; }
  @keyframes pkBlink { 50% { opacity: .35; } }
  #picker .pk-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 16px 0; }
  #picker .pk-name small { width: 100%; font: 600 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
  #picker .pk-name b { font: 800 clamp(18px, 1.42vw, 27px) var(--disp); font-stretch: 122%; letter-spacing: .05em; text-transform: uppercase; }
  #picker .pk-name i { font-style: normal; font-size: 13px; color: rgba(243,244,241,.62); }
  #picker .pk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 16px 0; }
  #picker .pk-stats span { padding-top: 7px; border-top: 1px solid rgba(255,255,255,.13); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(243,244,241,.58); }
  #picker .pk-stats b { display: block; margin-bottom: 2px; font: 700 clamp(14px, 1.3vw, 18px) var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
  #picker .pk-card p { margin: 10px 16px 0; font-size: 13px; line-height: 1.42; color: rgba(243,244,241,.8); }
  #picker .pk-tick { position: absolute; top: 12px; right: 12px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); }
  #picker .pk-card[aria-pressed="true"] .pk-tick { background: var(--acc); border-color: var(--acc); }
  #picker .pk-card[aria-pressed="true"] .pk-tick::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #071012; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
  #picker .pk-ft { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: clamp(10px, 2vh, 20px); }
  #picker .pk-go { min-width: 220px; padding: 14px 34px; font: 800 15px var(--disp); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase; color: #061113; background: #5ef0d6; border: 0; border-radius: 4px; cursor: pointer; box-shadow: 0 8px 30px rgba(94,240,214,.25); transition: background .2s; }
  #picker .pk-go:hover { background: #a6fff0; } #picker.busy .pk-go { background: rgba(94,240,214,.45); }
  #picker .pk-keys { font: 600 11px var(--mono); letter-spacing: .12em; color: rgba(243,244,241,.6); } #picker .pk-keys b { color: var(--ink); border: 1px solid rgba(255,255,255,.25); border-radius: 3px; padding: 1px 6px; margin: 0 2px; font-weight: 600; }
  body.touch #picker .pk-keys { display: none; }
  @media (max-height: 430px) { #picker .pk-in { inset: 8px max(12px, 3vw) 8px; } #picker .pk-hd small { display: none; } #picker .pk-hd h2 { font-size: 20px !important; margin: 0 0 6px; }
    #picker .pk-turn { aspect-ratio: 2.7 / 1 !important; } #picker .pk-name small { display: none; } #picker .pk-ft { margin-top: 8px; } #picker .pk-go { padding: 9px 22px !important; font-size: 13px; } }
  @media (max-height: 560px), (max-width: 700px) { #picker .pk-hd h2 { font-size: clamp(22px, 4vw, 34px); } #picker .pk-hd p, #picker .pk-card p { display: none; } #picker .pk-turn { aspect-ratio: 2.1 / 1; }
    #picker .pk-name { padding-top: 6px; } #picker .pk-name b { font-size: 18px; } #picker .pk-stats { padding-top: 6px; gap: 6px; } #picker .pk-stats b { font-size: 13px; } #picker .pk-card { padding-bottom: 9px; } #picker .pk-go { padding: 11px 24px; min-width: 0; } }
  /* (round 27) a phone held upright: the three cards side by side were 120 px wide (the names cut to CYBERC / FERRAR, the
     stats broken a word a line); one card a row instead, the turntable on the left, the name and the stats beside it */
  @media (orientation: portrait) and (max-width: 600px) {
    #picker .pk-cards { flex-direction: column; gap: 10px; }
    #picker .pk-card { width: 100%; display: grid; grid-template-columns: 44% 1fr; grid-template-rows: auto 1fr; padding: 0; }
    #picker .pk-card[aria-pressed="true"] { transform: none; }
    #picker .pk-turn { grid-row: 1 / 3; aspect-ratio: 16 / 11 !important; }
    #picker .pk-name { padding: 8px 10px 0 12px; } #picker .pk-name b { font-size: 17px; } #picker .pk-name i { font-size: 12px; }
    #picker .pk-stats { padding: 4px 10px 8px 12px; gap: 4px 8px; align-self: end; } #picker .pk-stats span { font-size: 8px; letter-spacing: .04em; padding-top: 4px; } #picker .pk-stats b { font-size: 12px; }
    #picker .pk-tick { top: 8px; right: 8px; width: 20px; height: 20px; } #picker .pk-card[aria-pressed="true"] .pk-tick::after { left: 6px; top: 3px; } }
  /* Teleoperator's title: its own loading image (assets/teleop_title.webp), the teal of the taxi mode */
  body.teleop #titleBg i { background-image: url(assets/teleop_title.webp); background-position: center 46%; }
  body.teleop #title h1 { font-size: clamp(34px, 7.2vw, 104px); letter-spacing: .05em; }

  /* (round 25) phones: the whole screen drives (car/input.js bindGestures) - no buttons over the street. A small top bar
     inside the safe area: the menu button (LIGHT, CAM, ? and the car are in it), the speed, the earnings, the minimap;
     the ride card slim at the top, one line while driving. Portrait and landscape. The desktop HUD is as it was. */
  body.touch #hud, body.touch #where, body.touch #menu, body.touch #touch, body.touch #fps, body.touch #rotate { display: none !important; }
  body.touch.play #view { touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  #tbar { display: none; inset: 0; z-index: 9; }
  body.touch.play #tbar { display: block; }
  :root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }
  #tMenu { position: absolute; left: calc(var(--sl) + 10px); top: calc(var(--st) + 8px); width: 38px; height: 38px; border-radius: 50%; pointer-events: auto; touch-action: manipulation;
    background: rgba(10,12,16,.42); border: 1px solid rgba(255,255,255,.22); display: grid; place-content: center; gap: 3px; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #tMenu i { display: block; width: 14px; height: 2px; border-radius: 1px; background: rgba(243,244,241,.9); }
  #tSpd { position: absolute; left: calc(var(--sl) + 58px); top: calc(var(--st) + 10px); display: flex; align-items: baseline; gap: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); white-space: nowrap; }
  #tSpd b { font: 800 22px var(--disp); font-stretch: 118%; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
  #tSpd small { font: 700 8.5px var(--disp); letter-spacing: .18em; color: rgba(243,244,241,.8); }
  #tSpd em { font: 800 10px var(--disp); font-style: normal; padding: 1px 4px; border-radius: 3px; border: 1px solid rgba(255,255,255,.35); color: var(--ink); }
  body.touch #taxiTotal { top: calc(var(--st) + 38px); left: calc(var(--sl) + 58px); right: auto; bottom: auto; text-align: left; }
  body.touch #taxiTotal b { font-size: 13px; display: inline; } body.touch #taxiTotal small { font-size: 8px; display: inline; margin-left: 4px; letter-spacing: .1em; }
  body.touch.play #mini { display: block; left: auto; right: calc(var(--sr) + 10px); top: calc(var(--st) + 8px); bottom: auto; width: 74px; height: 74px; border-width: 1.5px; }
  /* the ride card: slim, top centre; while driving one line (taxi.js .one) */
  body.touch #taxiCard, body.touch #taxiTrip { top: calc(var(--st) + 8px); left: 50%; transform: translate(-50%, -6px); width: min(44vw, 340px); padding: 5px 10px; border-radius: 8px; background: rgba(10,14,18,.66); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
  body.touch #taxiCard.on, body.touch #taxiTrip.on { transform: translate(-50%, 0); }
  .tx .one { display: none; }
  body.touch .tx .one { display: none; font: 700 12px var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.touch .tx .one em { font: 700 11px var(--mono); font-style: normal; color: #3fd6c6; margin-left: 6px; } body.touch .tx .one .dot { display: inline-block; margin-right: 7px; width: 8px; height: 8px; vertical-align: 1px; }
  body.touch.driving .tx#taxiCard > :not(.one), body.touch.driving .tx#taxiTrip > :not(.one) { display: none; }
  body.touch.driving .tx#taxiCard .one, body.touch.driving .tx#taxiTrip .one { display: block; }
  body.touch #taxiTrip .row, body.touch #taxiTrip .cf { margin-top: 4px; } body.touch #taxiTrip .row b { font-size: 13px; } body.touch #taxiTrip .dst b { font-size: 13px; }
  body.touch .tx .leg { padding: 2px 0; } body.touch .tx b { font-size: 12px; } body.touch .tx small { font-size: 9px; }
  body.touch #taxiPen { top: max(calc(var(--st) + 92px), calc(var(--txb, 0px) + 36px)); } body.touch #taxiPen .pop { padding: 4px 10px; } body.touch #taxiPen .pop b { font-size: 11px; }
  body.touch #taxiHint { top: max(calc(var(--st) + 64px), calc(var(--txb, 0px) + 6px)); font-size: 11px; }
  body.touch #toast { top: calc(var(--st) + 120px); font-size: 15px; } body.touch #toast small { font-size: 9px; }
  body.touch #drift { top: calc(var(--st) + 150px); font-size: 12px; }
  body.touch #taxiSum { top: 40%; }
  @media (orientation: portrait) {
    body.touch #tSpd { left: 50%; transform: translateX(-50%); top: calc(var(--st) + 10px); }
    body.touch #taxiTotal { left: 50%; transform: translateX(-50%); text-align: center; top: calc(var(--st) + 38px); }
    body.touch #taxiCard, body.touch #taxiTrip { top: calc(var(--st) + 90px); width: calc(100vw - 24px - var(--sl) - var(--sr)); max-width: 420px; }
    body.touch #taxiPen { top: max(calc(var(--st) + 178px), calc(var(--txb, 0px) + 38px)); } body.touch #taxiHint { top: max(calc(var(--st) + 150px), calc(var(--txb, 0px) + 8px)); } body.touch #toast { top: 30%; } body.touch #drift { top: 36%; }
    body.touch #taxiSum { top: 42%; }
  }
  /* the gestures' first-run hint (a few seconds, then it fades; main.js) */
  #gHint { left: 50%; bottom: calc(var(--sb) + 18%); transform: translateX(-50%); z-index: 9; display: none; gap: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(8,10,14,.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .8s; font: 700 11px var(--disp); letter-spacing: .06em; color: var(--ink); text-align: center; }
  body.touch.play #gHint { display: flex; } #gHint.on { opacity: 1; }
  @media (orientation: landscape) { #gHint { bottom: auto; top: calc(var(--st) + 22%); } }
  #gHint div { width: 92px; } #gHint svg { display: block; margin: 0 auto 6px; width: 46px; height: 46px; }
  #gHint small { display: block; font: 600 9px var(--mono); letter-spacing: .04em; color: var(--dim); margin-top: 2px; }
  /* the pause menu on touch: the quick row (LIGHT, CAMERA, ?) - the desktop has its chips */
  .touchOnly { display: none !important; } body.touch .touchOnly { display: grid !important; } body.touch .deskOnly { display: none !important; }
  body.touch #pause .card { padding: calc(14px + var(--st)) 18px 18px; max-height: 100%; width: min(560px, 100vw); border-radius: 0; }
  @media (min-width: 600px) and (min-height: 500px) { body.touch #pause .card { border-radius: 6px; max-height: 92vh; } }
  body.touch #pause h3 { margin: 12px 0 6px; } body.touch #pause .opt { padding: 8px 10px; touch-action: manipulation; }
  body.touch #help .card { font-size: 11px; line-height: 1.8; }