@font-face { font-family:"Racers Menu"; src:url("assets/RacersFont.otf") format("opentype"),url("RacersFont.otf") format("opentype"); font-display:swap; }
#lr-controls { --lr-yellow:#ffed11; --lr-ink:#020923; --lr-control-size:1; --lr-control-opacity:.6; color:var(--lr-yellow); font-family:"Racers Menu",sans-serif; }
#lr-controls [hidden] { display:none !important; }
#lr-controls.lr-preview #lr-touch { pointer-events:none; }
#lr-controls.lr-preview #lr-touch * { pointer-events:none !important; }
#lr-controls button { font:inherit; color:var(--lr-yellow); background:transparent; border:0; min-height:44px; padding:0; cursor:pointer; text-shadow:1px 2px #000; }
#lr-controls button:focus-visible { outline:2px solid var(--lr-yellow); outline-offset:3px; }
#lr-controls svg { display:block; width:100%; height:100%; fill:currentColor; filter:drop-shadow(1px 2px 0 #0009); pointer-events:none; }
#lr-controls-tools { position:fixed; left:50%; transform:translateX(-50%); top:max(6px,env(safe-area-inset-top)); z-index:15; display:flex; gap:4px; }
#lr-controls .lr-small { width:44px; height:44px; padding:12px; opacity:.6; }
#lr-touch { position:fixed; inset:0; pointer-events:none; z-index:12; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#lr-drive-zone { position:absolute; left:0; bottom:0; width:48%; height:65%; pointer-events:auto; touch-action:none; }
#lr-controls #lr-stick { position:absolute; left:calc(88px * var(--lr-control-size) + env(safe-area-inset-left)); top:58%; width:calc(160px * var(--lr-control-size)); height:calc(160px * var(--lr-control-size)); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; touch-action:none; opacity:var(--lr-control-opacity); transition:opacity .12s; }
#lr-minimap { position:absolute; left:59%; top:6px; transform:translateX(-50%); width:clamp(72px,23vw,100px); height:clamp(72px,23vw,100px); pointer-events:none; }

.lr-stick-ring { position:absolute; inset:8%; border:2px solid #ffed1190; border-radius:50%; background:#02092320; }
#lr-stick-thumb { position:absolute; left:calc(50% - 20px); top:calc(50% - 20px); width:40px; height:40px; background:#ffed1145; border:2px solid #ffed11c0; border-radius:50%; box-shadow:0 2px 2px #0005; }
#lr-drive-label,#lr-powerup-label { position:absolute; white-space:nowrap; pointer-events:none; text-align:center; font:16px/1 "Racers Menu",sans-serif; color:#ffed11; text-shadow:1px 2px #000; }
#lr-drive-label { left:10px; bottom:12px; font-size:14px; }
#lr-powerup-label { right:-4px; top:-18px; }
#lr-controls #lr-stick.is-down { opacity:1; }
#lr-camera-zone { position:absolute; right:max(8px,env(safe-area-inset-right)); top:24%; bottom:max(24px,env(safe-area-inset-bottom)); width:42%; pointer-events:auto; touch-action:none; }
#lr-actions { position:absolute; right:max(20px,calc(env(safe-area-inset-right) + 12px)); bottom:calc(max(104px,25svh) + env(safe-area-inset-bottom)); width:calc(154px * var(--lr-control-size)); height:calc(156px * var(--lr-control-size)); }
#lr-controls .lr-touch-button { position:absolute; color:var(--lr-yellow); width:calc(72px * var(--lr-control-size)); height:calc(72px * var(--lr-control-size)); pointer-events:auto; touch-action:none; opacity:var(--lr-control-opacity); }
#lr-controls .lr-slide { right:22%; bottom:0; width:calc(78px * var(--lr-control-size)); height:calc(72px * var(--lr-control-size)); }
#lr-slide img { width:calc(56px * var(--lr-control-size)); height:calc(56px * var(--lr-control-size)); display:block; margin:auto; image-rendering:pixelated; filter:drop-shadow(1px 2px 0 #0009); pointer-events:none; }
#lr-controls .lr-fire { right:0; top:0; }
#lr-powerup { display:block; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
#lr-controls .lr-touch-button.is-down { opacity:1; filter:drop-shadow(0 0 5px #ffed1166); }
/* Brake / reverse: low and inside SLIDE, so the right thumb sweeps FIRE, SLIDE, BRAKE in one arc from the top
   outside down to the bottom inside, with SLIDE between the two. Clear of SLIDE on the inside, and in landscape
   clear of the race's own minimap, which hangs 143 of the HUD's 480 units from the bottom-right corner. */
#lr-controls .lr-brake { width:calc(64px * var(--lr-control-size)); height:calc(64px * var(--lr-control-size)); padding:calc(12px * var(--lr-control-size));
  right:calc(max(29.8svh, max(20px, env(safe-area-inset-right) + 12px) + 112px * var(--lr-control-size)) + 12px);
  bottom:max(20px, calc(env(safe-area-inset-bottom) + 8px)); border:2px solid #ffed1190; border-radius:50%; background:#02092320; }
#lr-controls .lr-brake.is-down { color:#ffb64a; border-color:#ffb64a; }
body.game-expanded { overscroll-behavior:none; }
body.game-expanded #canvas { touch-action:none; }
body.lr-touch-reversed #lr-drive-zone { left:auto; right:0; }
body.lr-touch-reversed #lr-controls #lr-stick { left:calc(100% - 88px * var(--lr-control-size) - env(safe-area-inset-right)); }
body.lr-touch-reversed #lr-camera-zone { right:auto; left:max(8px,env(safe-area-inset-left)); }
body.lr-touch-reversed #lr-actions { right:auto; left:max(20px,calc(env(safe-area-inset-left) + 12px)); }
body.lr-touch-reversed #lr-controls .lr-fire { right:auto; left:0; }
body.lr-touch-reversed #lr-controls .lr-slide { right:auto; left:22%; }
body.lr-touch-reversed #lr-controls .lr-brake { right:auto; left:calc(max(29.8svh, max(20px, env(safe-area-inset-left) + 12px) + 112px * var(--lr-control-size)) + 12px); }
body.lr-touch-reversed #lr-minimap { left:41%; }
body.lr-touch-reversed #lr-drive-label { left:auto; right:10px; }
body.lr-touch-reversed #lr-powerup-label { right:auto; left:-4px; }
@media (orientation:portrait) {
  body.lr-touch-portrait #lr-controls-tools { left:auto; right:12px; top:58px; transform:none; }
  body.lr-touch-portrait #stage { background:#030b29; }
  body.lr-touch-portrait #canvas { height:calc(100% - 190px - env(safe-area-inset-bottom)) !important; }
  body.lr-touch-portrait #lr-touch { top:auto; height:calc(190px + env(safe-area-inset-bottom)); background:linear-gradient(#030b2900,#030b29 24%); }
  body.lr-touch-portrait #lr-drive-zone { bottom:env(safe-area-inset-bottom); width:48%; height:180px; }
  body.lr-touch-portrait #lr-controls #lr-stick { top:42%; }
  body.lr-touch-portrait #lr-actions { right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); width:calc(92px * var(--lr-control-size)); }
  body.lr-touch-portrait.lr-touch-reversed #lr-controls #lr-stick { left:calc(100% - 80px * var(--lr-control-size)); }
  body.lr-touch-portrait.lr-touch-reversed #lr-actions { right:auto; left:max(12px,env(safe-area-inset-left)); }
  body.lr-touch-portrait #lr-slide { right:12%; }
  body.lr-touch-portrait.lr-touch-reversed #lr-slide { right:auto; left:12%; }
  /* Under the minimap, centred between the drive area's edge (48%) and SLIDE, level with SLIDE. */
  body.lr-touch-portrait #lr-controls .lr-brake { right:calc(26% + 6px + 12.5px * var(--lr-control-size)); bottom:calc(12px + 4px * var(--lr-control-size) + env(safe-area-inset-bottom)); }
  body.lr-touch-portrait.lr-touch-reversed #lr-controls .lr-brake { right:auto; left:calc(26% + 6px + 12.5px * var(--lr-control-size)); }
  #lr-controls.lr-preview #lr-touch { top:auto; bottom:80px; height:calc(220px + env(safe-area-inset-bottom)); }
  #lr-controls.lr-preview #lr-drive-zone { bottom:env(safe-area-inset-bottom); height:200px; }
  #lr-controls.lr-preview #lr-actions { bottom:calc(32px + env(safe-area-inset-bottom)); }
  #lr-controls.lr-preview .lr-brake { right:calc(max(20px, env(safe-area-inset-right) + 12px) + 124px * var(--lr-control-size)); }
  body.lr-touch-reversed #lr-controls.lr-preview .lr-brake { right:auto; left:calc(max(20px, env(safe-area-inset-left) + 12px) + 124px * var(--lr-control-size)); }
  #lr-camera-zone { top:0; bottom:0; width:48%; }
}
@media (max-height:350px) and (orientation:landscape) {
  #lr-drive-zone { height:75%; }
  #lr-actions { bottom:65px; }
}