/* HIGHWAY DUEL */
:root{
  --amber:#ffb340; --cyan:#5ad6ff; --red:#ff3b30; --ink:#eef3f8;
  --panel:rgba(6,10,16,0.66); --line:rgba(255,255,255,0.12);
  --padh:98px;
}
/* Nothing on this page is text to be selected. A thumb on GAS was starting a
   selection and dragging a blue highlight over the labels around it, and a
   held tap was raising the copy callout, so selection, the callout, drag and
   double tap zoom are all off page wide, and the pads and the canvas take no
   browser gesture at all. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-user-drag:none}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05070b;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  touch-action:manipulation;overscroll-behavior:none}
body.portrait{--padh:124px}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none}
#view{z-index:1}
#hud{z-index:2;pointer-events:none}

.overlay{position:fixed;inset:0;z-index:5;display:none;
  align-items:center;justify-content:center;padding:env(safe-area-inset-top) 0 0 0;
  background:radial-gradient(120% 90% at 50% 30%,rgba(6,10,18,0.62),rgba(3,5,9,0.92))}
.overlay.on{display:flex}
/* the car select keeps its lower half clear: that is where the car is */
#menu{align-items:flex-start;
  background:linear-gradient(180deg,rgba(4,6,11,.94) 0%,rgba(4,6,11,.90) 38%,
    rgba(4,6,11,.55) 62%,rgba(4,6,11,.30) 82%,rgba(4,6,11,.55) 100%)}
/* The bar the page is opened inside sits over the top of the viewport, and it
   was landing straight on the title. Keep that much clear at the top. */
#menu .sheet{padding-top:calc(env(safe-area-inset-top,0px) + 52px)}

/* ------------------------------------------------------------- loading */
#loading{flex-direction:column;gap:18px;background:#05070b;
  position:fixed;inset:0;overflow:hidden}
/* The splash art fills whatever shape the window is, and is darkened by the
   layer above it so the title and the bar stay readable on top of a sunset. */
#loadart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;z-index:0}
#loading::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 85% at 50% 45%,rgba(4,6,11,.42),rgba(3,5,9,.88))}
#loading .brand,#loading #progwrap,#loading #loadnote{position:relative;z-index:2}
#loading .brand{font-weight:800;letter-spacing:.30em;
  font-size:clamp(20px,5.4vmin,42px);text-align:center}
#loading .brand span{color:var(--amber)}
#progwrap{width:min(62vw,340px);height:5px;border-radius:3px;
  background:rgba(255,255,255,.14);overflow:hidden}
#progbar{height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#2a7cff,#8ce8ff);transition:width .2s}
#loadnote{font-size:12px;letter-spacing:.14em;color:rgba(238,243,248,.5);
  text-transform:uppercase;min-height:1.2em;text-align:center;padding:0 16px}

/* ---------------------------------------------------------------- menu */
.sheet{width:min(96vw,900px);max-height:94vh;overflow:auto;touch-action:pan-y;
  padding:clamp(12px,2.4vmin,26px);display:flex;flex-direction:column;
  gap:clamp(8px,1.6vmin,16px);align-items:center;-webkit-overflow-scrolling:touch}
.title{font-weight:800;letter-spacing:.22em;line-height:1;text-align:center;
  font-size:clamp(22px,6.2vmin,52px);text-shadow:0 0 34px rgba(255,179,64,.35)}
.title span{color:var(--amber)}
.tag{font-size:clamp(9px,1.7vmin,13px);letter-spacing:.30em;
  color:rgba(238,243,248,.55);text-transform:uppercase;text-align:center}

.cars{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.6vmin,16px);width:100%}
@media (max-width:700px){.cars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.cars{grid-template-columns:1fr}}
.carcard{flex:1 1 0;min-width:0;cursor:pointer;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(8px,1.6vmin,15px);transition:border-color .15s,transform .15s,background .15s}
.carcard:hover{border-color:rgba(255,255,255,.28)}
.carcard.sel{border-color:var(--amber);background:rgba(30,20,6,.72);
  box-shadow:0 0 0 1px rgba(255,179,64,.4),0 10px 40px -18px rgba(255,179,64,.6)}
.carcard .cname{font-weight:800;font-size:clamp(12px,2.5vmin,20px);letter-spacing:.06em}
.carcard .cklass{font-size:clamp(8px,1.5vmin,11px);letter-spacing:.16em;
  color:rgba(238,243,248,.5);text-transform:uppercase;margin:2px 0 8px}
.stat{display:flex;align-items:center;gap:6px;margin:3px 0}
.stat i{font-style:normal;font-size:clamp(7px,1.3vmin,10px);letter-spacing:.10em;
  color:rgba(238,243,248,.48);width:52px;flex:none}
.bar{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden}
.bar u{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#8ce8ff)}
.carcard.sel .bar u{background:linear-gradient(90deg,var(--amber),#ffd79a)}
/* A card whose car file is still streaming in: dimmed and not clickable. */
.carcard.locked{opacity:.45;cursor:wait}
.carload{font-size:clamp(8px,1.5vmin,11.5px);letter-spacing:.10em;
  color:rgba(238,243,248,.45);text-transform:uppercase;min-height:1.2em}
.pickrow{display:flex;gap:clamp(8px,1.6vmin,14px);width:100%;justify-content:center}
.roadcard,.timecard{flex:1 1 0;max-width:280px;cursor:pointer;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);text-align:center;
  padding:clamp(7px,1.4vmin,12px);transition:border-color .15s,background .15s}
.roadcard:hover,.timecard:hover{border-color:rgba(255,255,255,.28)}
.roadcard.sel,.timecard.sel{border-color:var(--cyan);background:rgba(8,26,34,.72);
  box-shadow:0 0 0 1px rgba(90,214,255,.35)}
.roadcard .pname,.timecard .pname{font-weight:800;font-size:clamp(10px,2vmin,15px);letter-spacing:.08em}
.roadcard .psub{font-size:clamp(7px,1.3vmin,10px);letter-spacing:.12em;
  color:rgba(238,243,248,.5);text-transform:uppercase;margin-top:2px}
@media (max-width:560px){.pickrow{flex-wrap:wrap}.roadcard{flex:1 1 30%}}

.btn{appearance:none;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.07);color:var(--ink);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  padding:clamp(9px,1.8vmin,15px) clamp(16px,4vmin,34px);
  font-size:clamp(10px,2vmin,15px)}
.btn:hover{background:rgba(255,255,255,.13)}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.btn.go{background:linear-gradient(180deg,#ffc464,#f09014);color:#1a1204;
  border-color:rgba(255,220,150,.6);box-shadow:0 10px 34px -14px rgba(255,168,40,.85)}
.btn.off{color:rgba(238,243,248,.45)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.keys{font-size:clamp(8px,1.5vmin,11.5px);letter-spacing:.10em;
  color:rgba(238,243,248,.46);text-align:center;line-height:1.75;text-transform:uppercase}
.keys b{color:var(--ink);font-weight:700}
body.touch .keys .kbd{display:none}
body:not(.touch) .keys .tch{display:none}

/* ------------------------------------------------------------- results */
#resTitle{font-weight:800;letter-spacing:.20em;font-size:clamp(24px,7vmin,58px)}
#resTitle.win{color:#7dffa8;text-shadow:0 0 40px rgba(125,255,168,.45)}
#resTitle.lose{color:var(--red);text-shadow:0 0 40px rgba(255,59,48,.4)}
#resBody{width:min(90vw,420px);display:flex;flex-direction:column;gap:5px}
#resBody .row{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px dashed rgba(255,255,255,.12);padding:5px 2px;
  font-size:clamp(10px,2vmin,14px);letter-spacing:.12em}
#resBody .row span{color:rgba(238,243,248,.55);text-transform:uppercase}
#resBody .row b{font-family:ui-monospace,Menlo,monospace;font-size:1.12em}

/* ---------------------------------------------------------------- pads */
#pads{position:fixed;inset:auto 0 0 0;z-index:4;display:none;
  height:var(--padh);pointer-events:none;
  padding:0 max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom))
          max(10px,env(safe-area-inset-right))}
#pads.on{display:block}
body:not(.touch) #pads{display:none!important}
/* A pad is a drawn control, not a word in a box: the glyph inside it is an
   inline SVG with no text node in it at all, so there is nothing on it a tap
   can select and nothing that can be dragged out of it. */
.pad{position:absolute;bottom:6px;pointer-events:auto;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(120% 120% at 32% 22%,
    rgba(66,84,104,.52),rgba(10,16,24,.52) 62%,rgba(6,10,16,.60));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 18px -8px rgba(0,0,0,.8);
  backdrop-filter:blur(3px);color:var(--ink);
  width:74px;height:74px;transition:transform .06s,background .06s,box-shadow .06s}
.pad.down{background:radial-gradient(120% 120% at 32% 22%,
    rgba(255,206,140,.62),rgba(255,161,40,.44) 62%,rgba(190,110,10,.44));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 20px -2px rgba(255,179,64,.5);
  transform:scale(.94)}
.pad svg{display:block;pointer-events:none;width:58%;height:58%;
  fill:currentColor;stroke:none}
.pad.down svg{color:#2a1a04}
#pad-left{left:8px}
#pad-right{left:92px}
#pad-brk{right:92px;background:radial-gradient(120% 120% at 32% 22%,
    rgba(170,86,86,.5),rgba(44,16,16,.55) 62%,rgba(26,10,10,.62));
  border-color:rgba(255,150,140,.32)}
#pad-brk svg{width:52%;height:52%}
#pad-gas{right:8px;background:radial-gradient(120% 120% at 32% 22%,
    rgba(74,150,86,.55),rgba(14,44,20,.55) 62%,rgba(8,26,12,.62))}
#pad-nos{right:8px;bottom:86px;width:58px;height:58px;
  background:radial-gradient(120% 120% at 32% 22%,
    rgba(90,150,220,.55),rgba(14,30,58,.58) 62%,rgba(8,18,38,.62));
  border-color:rgba(140,232,255,.4);color:#bff2ff}
body.portrait #pad-nos{bottom:88px}
body.portrait .pad{width:78px;height:78px}
body.portrait #pad-right{left:96px}
body.portrait #pad-brk{right:96px}

@media (max-height:360px){
  .pad{width:60px;height:60px}
  #pad-right{left:76px}
  #pad-brk{right:76px}
  #pad-nos{width:48px;height:48px;bottom:70px;font-size:10px}
  :root{--padh:80px}
  .sheet{gap:6px}
}
@media (max-width:340px){
  .pad{width:62px;height:62px}
  #pad-right{left:78px}
  #pad-brk{right:78px}
}

#topbar{position:fixed;z-index:7;left:max(8px,env(safe-area-inset-left));
  bottom:calc(var(--padh) + 8px);display:flex;gap:6px;pointer-events:none}
body:not(.touch) #topbar{bottom:max(10px,env(safe-area-inset-bottom))}
#topbar .mini{pointer-events:auto;touch-action:manipulation;font-size:9px;letter-spacing:.14em;
  padding:7px 11px;border-radius:8px;border:1px solid var(--line);
  background:rgba(6,10,16,.62);color:rgba(238,243,248,.72);cursor:pointer;
  text-transform:uppercase;font-weight:700;font-family:inherit}
#topbar .mini:hover{background:rgba(6,10,16,.85);color:var(--ink)}
#topbar .mini.off{color:rgba(238,243,248,.38)}
body:not(.touch) #btnCam{display:none}
/* An overlay fills the screen with cards and art, and these two chips at the
   bottom left were landing on top of the first car card. While an overlay is
   up the sound chip moves to the top left, kept clear of the bar the page is
   opened inside the same way the menu title is, and the camera chip waits for
   the race, which is the only place it does anything. */
#loading.on ~ #topbar,#menu.on ~ #topbar,#results.on ~ #topbar{
  top:calc(env(safe-area-inset-top,0px) + 52px);bottom:auto}
/* On a narrow screen the title runs nearly edge to edge, so the sheet starts
   below the chip instead of underneath it. */
@media (max-width:599px){
  #menu.on .sheet,#results.on .sheet{
    padding-top:calc(env(safe-area-inset-top,0px) + 88px)}
}
#loading.on ~ #topbar #btnCam,#menu.on ~ #topbar #btnCam,
#results.on ~ #topbar #btnCam{display:none}

/* Pressed, each pad lights in its own colour. These need id strength: the
   plain .pad.down gradient loses to #pad-gas's own background, so without
   them the throttle and the brake showed no press at all. */
#pad-gas.down{background:radial-gradient(120% 120% at 32% 22%,
    rgba(170,255,180,.88),rgba(60,205,100,.62) 62%,rgba(20,120,50,.62))}
#pad-brk.down{background:radial-gradient(120% 120% at 32% 22%,
    rgba(255,180,170,.88),rgba(232,74,62,.64) 62%,rgba(140,22,18,.64))}
#pad-nos.down{background:radial-gradient(120% 120% at 32% 22%,
    rgba(200,244,255,.9),rgba(96,204,255,.64) 62%,rgba(18,112,182,.64))}
#pad-gas.down svg,#pad-brk.down svg,#pad-nos.down svg{color:#10180c}

/* the nitrous pad, gone cold: the bottle is below the level it will fire at */
#pad-nos.cold{background:radial-gradient(120% 120% at 32% 22%,
    rgba(48,42,30,.5),rgba(14,18,26,.5) 62%,rgba(10,12,18,.56));
  border-color:rgba(255,179,64,.34);color:rgba(255,179,64,.62)}

/* Audio streams independently of the 3D loading screen. */
#audioStatus{position:absolute;top:100%;left:0;white-space:nowrap;font-size:10px;
  padding:4px 6px;color:#e5eef5;background:rgba(5,7,11,.85);border-radius:4px}
#audioStatus:empty{display:none}

.audioCredits{pointer-events:auto;align-self:center;color:#adb8c5;font-size:10px;text-decoration:none;order:3}
#pads.on ~ #topbar .audioCredits{display:none}