/* Pothole Panic: ROADWORKS UI.
   The menus are road infrastructure: wet asphalt ground, thermoplastic road markings for buttons, retro-reflective
   road signs hanging from gantries for panels, licence plates for names and codes, amber LED roadworks boards for
   toasts and the kill feed, a traffic light for the start, hazard tape and sodium light for accents.
   Textures (--asphalt, --wear, --rough) are drawn on canvases by js/roadworks.js: no asset files. */
:root {
  --asph: #17191c; --asph2: #24272b; --paint: #eceae2; --py: #f2c230; --tar: #0b0c0e;
  --sblue: #1554a8; --sblue-d: #0a3270; --sgreen: #0d6e3c; --sgreen-d: #053f21; --syel: #f6c400; --syel-d: #8a6c00;
  --sred: #d0172b; --swhite: #f3f3ee; --sodium: #ff9a3c; --hivis: #def21e; --led: #ffad2a; --steel: #a3abb3; --steel-d: #646b72;
  --tag: #ff6a1a;
  --post: linear-gradient(90deg, #4f565d, #c6ccd1 42%, #7d848b 70%, #4f565d);
  --f-sign: 'Overpass', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-sten: 'Saira Stencil One', 'Stencil', Impact, sans-serif;
  --f-dot: 'Doto', 'Courier New', monospace;
  --mx: 0.5; --my: 0.35;
  --plate: var(--asph); --fg: var(--paint);
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 3 37 33H3z' fill='%23f6c400' stroke='%23d0172b' stroke-width='4.5' stroke-linejoin='round'/%3E%3Cpath d='M20 13v9' stroke='%23111' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='27.6' r='2.3' fill='%23111'/%3E%3C/svg%3E");
  --strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' preserveAspectRatio='xMidYMid slice'%3E%3Crect x='-20' y='-20' width='60' height='80' fill='%231c4fae'/%3E%3Cg fill='%23f6c400'%3E%3Ccircle cx='15' cy='14' r='1'/%3E%3Ccircle cx='14' cy='17' r='1'/%3E%3Ccircle cx='11.5' cy='18.8' r='1'/%3E%3Ccircle cx='8.5' cy='18.8' r='1'/%3E%3Ccircle cx='6' cy='17' r='1'/%3E%3Ccircle cx='5' cy='14' r='1'/%3E%3Ccircle cx='6' cy='11' r='1'/%3E%3Ccircle cx='8.5' cy='9.2' r='1'/%3E%3Ccircle cx='11.5' cy='9.2' r='1'/%3E%3Ccircle cx='14' cy='11' r='1'/%3E%3C/g%3E%3Ctext x='10' y='33' font-family='Arial' font-weight='700' font-size='9' fill='white' text-anchor='middle'%3EPP%3C/text%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--asph); color: var(--paint); font-family: var(--f-sign); font-weight: 600; -webkit-tap-highlight-color: transparent; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#dim { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,11,13,0) 45%, rgba(10,11,13,0.55) 100%); transition: opacity 0.3s; }
body.playing #dim { opacity: 0; }
#ground { position: fixed; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); pointer-events: none; transition: opacity 0.35s; will-change: transform; }
body:not([data-ground=band]):not([data-ground=full]) #ground { opacity: 0; }
#sweep { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#sweep::before { content: ''; position: absolute; left: 0; top: 0; width: 70vmax; height: 34vmax; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,238,205,0.075), rgba(255,238,205,0) 66%); animation: sweep 13s linear infinite; }
body:not([data-ground=band]):not([data-ground=full]) #sweep { display: none; }
@keyframes sweep { from { transform: translate(-80vmax, 20vh) rotate(-10deg); } to { transform: translate(110vw, 55vh) rotate(6deg); } }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; }

/* ------------------------------------------------------------ thermoplastic paint (worn, rough edges) */
.mark, .btn, .zebra > button, .shout, .slot::before, #touch .tleft svg {
  mask-image: var(--rough), var(--wear); mask-size: 100% 100%, 170px 170px; mask-repeat: no-repeat, repeat; mask-composite: intersect;
}
.skid { position: absolute; left: -4%; right: -4%; top: 30%; height: 40%; pointer-events: none; z-index: 3; border-radius: 45% 8% 8% 45%;
  background: linear-gradient(180deg, transparent 0 6%, rgba(8,8,9,0.85) 6% 34%, transparent 34% 66%, rgba(8,8,9,0.85) 66% 94%, transparent 94%);
  transform-origin: 0 50%; animation: skid 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes skid { 0% { transform: scaleX(0) skewX(-14deg); opacity: 0.95; } 50% { transform: scaleX(1) skewX(-14deg); opacity: 0.8; } 100% { transform: scaleX(1) skewX(-14deg); opacity: 0; } }

/* road text: a big painted arrow, tall stretched letters, a stop line under it */
.mark { --pc: var(--paint); position: relative; display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: none; padding: 10px 12px 22px 8px; color: var(--pc); text-align: left; transition: filter 0.2s; }
.mark.yel { --pc: var(--py); }
.mark .arr { width: 62px; height: 30px; flex: none; fill: var(--pc); }
.mark .rt { display: flex; flex-direction: column; min-width: 0; }
.mark b { display: inline-block; align-self: flex-start; font-family: var(--f-cond); font-weight: 800; font-size: 40px; line-height: 0.86; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
  transform: scaleY(1.42); transform-origin: 0 100%; margin-top: 15px;
  background: linear-gradient(100deg, var(--pc) 0 40%, #fffdf3 50%, var(--pc) 60% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark small { font-family: var(--f-sign); font-weight: 700; font-size: 13px; margin-top: 7px; opacity: 0.85; }
.mark::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 9px; background: var(--pc); }
.mark::before { content: ''; position: absolute; inset: -10% -6%; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 34% 58% at 50% 55%, rgba(255,240,205,0.2), rgba(255,240,205,0) 70%); }
.mark:hover, .mark:focus-visible { filter: brightness(1.13); outline: none; }
.mark:hover b, .mark:focus-visible b { animation: lamp 0.9s ease-out; }
.mark:hover::before, .mark:focus-visible::before { animation: pool 0.9s ease-out; }
.mark:active { filter: brightness(0.95); }
@keyframes lamp { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes pool { 0% { opacity: 0; transform: translateX(-45%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(45%); } }

/* zebra crossing: each stripe is a button */
.zebra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zebra > button, .btn { position: relative; isolation: isolate; overflow: hidden; border: 0; background: var(--paint); color: var(--asph); font-family: var(--f-sign); font-weight: 900; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.05; }
.zebra > button { min-height: 64px; padding: 8px 8px 5px; font-size: 13.5px; }
.zebra > button::before, .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(255,255,244,0) 30%, rgba(255,255,244,0.95) 50%, rgba(255,255,244,0) 70%); transform: translateX(-110%); }
.zebra > button:hover::before, .btn:hover::before, .zebra > button:focus-visible::before, .btn:focus-visible::before { animation: beam 0.8s ease-out; }
.zebra > button:hover, .btn:hover { filter: brightness(1.08); }
@keyframes beam { to { transform: translateX(110%); } }

.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 10px 18px 8px; min-height: 40px; font-size: 14px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.small { padding: 7px 13px 5px; min-height: 34px; font-size: 12.5px; }
.btn.back { padding-left: 28px; clip-path: polygon(17px 0, 100% 0, 100% 100%, 17px 100%, 0 50%); }
.btn.big { background: var(--py); color: #111; padding: 11px 38px 9px 22px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.btn.big b { font-family: var(--f-cond); font-weight: 800; font-size: 27px; letter-spacing: 1.2px; line-height: 1; }
.btn.big small { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------ road signs */
.panel, .gantry, .logo-plate { --plate: var(--sblue); --fg: #fff; --edge: var(--sblue-d); }
.panel.green, .gantry { --plate: var(--sgreen); --edge: var(--sgreen-d); }
.panel.yellow, .logo-plate { --plate: var(--syel); --fg: #111; --edge: var(--syel-d); }
.panel.white { --plate: var(--swhite); --fg: #111; --edge: #8d939a; }
.panel { position: relative; isolation: isolate; background: var(--plate); color: var(--fg); border-radius: 14px; padding: 20px 22px;
  box-shadow: inset 0 0 0 5px var(--plate), inset 0 0 0 8px var(--fg), 0 3px 0 var(--edge), 0 16px 30px rgba(0,0,0,0.55); }
/* rivets + retro-reflective micro prisms + a sheen that follows the pointer */
.panel::after, .gantry::after, .logo-plate::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 15px 15px, #e3e6e9 0 2.6px, #7b828a 3.2px 4px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 15px) 15px, #e3e6e9 0 2.6px, #7b828a 3.2px 4px, transparent 4.6px),
    radial-gradient(circle at 15px calc(100% - 15px), #e3e6e9 0 2.6px, #7b828a 3.2px 4px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #e3e6e9 0 2.6px, #7b828a 3.2px 4px, transparent 4.6px),
    linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,0.17) 45%, rgba(255,255,255,0.04) 52%, rgba(255,255,255,0) 60%) calc(var(--mx) * 100%) calc(var(--my) * 100%) / 320% 320% no-repeat,
    radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1.2px) 0 0 / 4px 4px; }
/* hanging straps up to the gantry */
.panel::before { content: ''; position: absolute; left: 18%; right: 18%; top: -20px; height: 26px; z-index: -2; pointer-events: none;
  background: var(--post) 0 0 / 9px 100% no-repeat, var(--post) 100% 0 / 9px 100% no-repeat; }
.screen .panel, .modal .panel, .res .panel { animation: hang 0.85s cubic-bezier(0.25, 0.9, 0.3, 1) both; transform-origin: 50% -20px; }
.racecol .panel, .gpanel { animation-delay: 0.07s !important; }
@keyframes hang { 0% { transform: translateY(-80px) rotate(-3deg); opacity: 0; } 35% { opacity: 1; transform: translateY(5px) rotate(1.8deg); } 55% { transform: translateY(-2px) rotate(-1.1deg); } 75% { transform: translateY(0) rotate(0.45deg); } 100% { transform: none; } }
.panel h2, .panel h3 { font-family: var(--f-sign); margin: 0 0 12px; }
.panel h2 { font-weight: 900; font-size: 28px; line-height: 1.05; letter-spacing: -0.2px; }
.panel h3 { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 1.6px; }
.hint { font-size: 13px; opacity: 0.85; margin: 6px 0 0; font-weight: 600; }
.field { margin: 14px 0; }
.field > label, .field > div > label { display: block; font-weight: 900; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 7px; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 2px solid var(--fg); background: transparent; color: var(--fg); border-radius: 6px; padding: 6px 12px 4px; min-width: 40px; font-family: var(--f-sign); font-weight: 800; font-size: 14px; }
.seg button:hover { background: color-mix(in srgb, var(--fg) 16%, transparent); }
.seg button.on { background: var(--fg); color: var(--plate); }

/* overhead gantry sign (screen titles, round / lap info) */
.gantry { position: relative; isolation: isolate; background: var(--plate); color: #fff; font-family: var(--f-sign); font-weight: 800; border-radius: 8px; padding: 7px 20px 4px;
  box-shadow: inset 0 0 0 3px var(--plate), inset 0 0 0 5px #fff, 0 3px 0 var(--edge), 0 12px 22px rgba(0,0,0,0.5); }
.gantry::before { content: ''; position: absolute; left: 16%; right: 16%; bottom: 100%; height: 300px; z-index: -2; pointer-events: none;
  background: var(--post) 0 0 / 7px 100% no-repeat, var(--post) 100% 0 / 7px 100% no-repeat; }
.gantry::after { background: linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,0.17) 45%, rgba(255,255,255,0.04) 52%, rgba(255,255,255,0) 60%) calc(var(--mx) * 100%) calc(var(--my) * 100%) / 320% 320% no-repeat, radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1.2px) 0 0 / 4px 4px; }

/* licence plates: names, room codes, the car number */
.plate, input:not([type]), input[type=text], input[type=number] {
  display: inline-block; border: 2px solid #111; border-radius: 6px; color: #121212; outline: none;
  background: radial-gradient(circle at 32px 50%, #d5d9dd 0 2.4px, #6c737a 3px 3.6px, transparent 4px), radial-gradient(circle at calc(100% - 11px) 50%, #d5d9dd 0 2.4px, #6c737a 3px 3.6px, transparent 4px), var(--strip) 0 0 / 22px 100% no-repeat, linear-gradient(#fbfbf7, #e9e9e3);
  box-shadow: inset 0 0 0 2px #f6f6f1, 0 0 0 2px #c3c8cd, 0 4px 8px rgba(0,0,0,0.45);
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0,0,0,0.3);
  padding: 5px 22px 3px 42px; font-size: 22px; line-height: 1.15; }
input:not([type]), input[type=text], input[type=number] { width: 100%; }
input::placeholder { color: rgba(0,0,0,0.3); }
.plate.yel, #oCode, .code b { background-color: transparent; background-image: radial-gradient(circle at 32px 50%, #d5d9dd 0 2.4px, #6c737a 3px 3.6px, transparent 4px), radial-gradient(circle at calc(100% - 11px) 50%, #d5d9dd 0 2.4px, #6c737a 3px 3.6px, transparent 4px), var(--strip), linear-gradient(#ffd31f, #f2bf00); background-size: auto, auto, 22px 100%, auto; background-repeat: no-repeat; box-shadow: inset 0 0 0 2px #ffd31f, 0 0 0 2px #c3c8cd, 0 4px 8px rgba(0,0,0,0.45); }
.plate.mini { background: linear-gradient(#fbfbf7, #e9e9e3); padding: 1px 7px 0; font-size: 15px; letter-spacing: 1.2px; border-width: 1.5px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #f6f6f1, 0 2px 4px rgba(0,0,0,0.4); }
input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }

/* sliders: a strip of road with a centre line, a hi-vis reflector as the thumb */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, #eceae2 0 14px, transparent 14px 26px) 0 50% / 100% 2px no-repeat, #26292d; box-shadow: inset 0 0 0 1.5px #111; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #111 0 3px, var(--tag) 3.5px 6px, #fff 6.5px 8px, var(--tag) 8.5px); box-shadow: 0 0 0 2px #111, 0 2px 4px rgba(0,0,0,0.5); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #111; background: var(--tag); }

/* LED roadworks boards (toast, kill feed, subtitles, timer) */
.led, .feed, .sub, .stats { font-family: var(--f-dot); font-weight: 900; color: var(--led); text-transform: uppercase; text-shadow: 0 0 6px rgba(255,160,40,0.55);
  background: #060607 radial-gradient(rgba(255,170,60,0.075) 0.9px, transparent 1.3px) 0 0 / 5px 5px; border-radius: 6px; box-shadow: inset 0 0 0 3px #2a2d31, inset 0 0 0 4px #000, 0 10px 22px rgba(0,0,0,0.55); }
@keyframes ledin { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes beacon { 50% { opacity: 0.12; box-shadow: none; } }

/* ------------------------------------------------------------ screens */
.screen { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; padding: max(16px, env(safe-area-inset-top)) 16px 28px; }
.bar { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 auto 28px; max-width: 1160px; padding-top: 16px; }
.bar::before { content: ''; position: absolute; left: -100vw; right: -100vw; top: -16px; height: 15px; pointer-events: none;
  background: linear-gradient(var(--steel), var(--steel)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--steel-d), var(--steel-d)) 0 100% / 100% 3px no-repeat, repeating-linear-gradient(55deg, transparent 0 9px, var(--steel-d) 9px 11px), repeating-linear-gradient(-55deg, transparent 0 9px, var(--steel-d) 9px 11px), #2b2f34;
  box-shadow: 0 6px 12px rgba(0,0,0,0.5); }
.bar h2 { margin: 0; font-size: 26px; line-height: 1.1; }

/* title: the menu is painted on a strip of road, the live race runs beside it */
#title { display: flex; padding: 0; overflow: hidden auto; }
.tcol { position: relative; width: clamp(400px, 37vw, 560px); min-height: 100%; padding: max(60px, env(safe-area-inset-top)) 30px 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.logo { position: relative; display: flex; flex-direction: column; align-items: stretch; animation: hang 1.1s cubic-bezier(0.25, 0.9, 0.3, 1) both; transform-origin: 50% -80px; }
.logo-plate { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; background: var(--plate); color: #111; border-radius: 16px; padding: 16px 24px 12px 16px;
  box-shadow: inset 0 0 0 5px var(--plate), inset 0 0 0 9px #111, 0 4px 0 var(--edge), 0 20px 36px rgba(0,0,0,0.6); }
.logo-plate::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 100%; height: 400px; z-index: -2; background: var(--post) 0 0 / 10px 100% no-repeat, var(--post) 100% 0 / 10px 100% no-repeat; }
.logo-tri { width: clamp(70px, 6.6vw, 96px); flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25)); }
.logo-words { display: flex; flex-direction: column; line-height: 0.84; }
.logo .w1 { font-family: var(--f-sign); font-weight: 900; font-size: clamp(38px, 4.3vw, 64px); letter-spacing: -1.5px; }
.logo .w2 { font-family: var(--f-sten); font-weight: 400; font-size: clamp(48px, 5.5vw, 82px); color: var(--sred); letter-spacing: 1px; margin-top: 2px; }
.logo-tape { align-self: stretch; height: 18px; margin: 12px 4px 0; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--syel) 0 14px, #111 14px 28px); box-shadow: 0 6px 12px rgba(0,0,0,0.5); }
.logo .tag { align-self: flex-start; margin: 10px 4px 0; background: #111; color: #fff; font-family: var(--f-sign); font-weight: 800; font-size: 14px; padding: 6px 12px 4px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #111, inset 0 0 0 3px #fff, 0 6px 12px rgba(0,0,0,0.5); }
.menu { display: flex; flex-direction: column; gap: 6px; }
.stats { align-self: flex-start; margin: 0; font-size: 14px; letter-spacing: 0.5px; padding: 8px 12px 6px; }
.stats:empty { display: none; }
/* traffic cones seen from above */
.cone { position: absolute; width: 46px; height: 46px; border-radius: 9px; background: #1d1d1d; box-shadow: 0 7px 12px rgba(0,0,0,0.55), inset 0 0 0 2px #2c2c2c; pointer-events: none; }
.cone::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle, #2a1408 0 3px, var(--tag) 3.5px 7px, #f4f4f0 7.5px 11px, var(--tag) 11.5px 15px, #c9470a 15.5px 17.5px, transparent 18px); }
.cone.c1 { right: -34px; top: 18%; transform: rotate(14deg); }
.cone.c2 { right: -18px; bottom: 9%; transform: rotate(-9deg); }

/* party setup: drivers park in painted bays */
.setup { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; max-width: 1160px; margin: 0 auto; }
.ptitle { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px; font-family: var(--f-sign); font-weight: 900; font-size: 24px; color: #fff; }
.psign { width: 42px; height: 42px; border-radius: 7px; display: grid; place-items: center; padding-top: 4px; background: var(--sblue); color: #fff; font-weight: 900; font-size: 30px; box-shadow: inset 0 0 0 2px var(--sblue), inset 0 0 0 4px #fff, 0 6px 12px rgba(0,0,0,0.5); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slot { position: relative; padding: 14px 16px 14px; min-height: 172px; display: flex; flex-direction: column; gap: 6px; }
.slot::before { content: ''; position: absolute; inset: 0; border: 6px solid var(--paint); border-bottom: 0; pointer-events: none; }
.slot .p { align-self: flex-start; font-family: var(--f-cond); font-weight: 800; font-size: 30px; line-height: 0.9; color: var(--pc, var(--paint)); transform: scaleY(1.4); transform-origin: 0 0; margin-bottom: 12px; letter-spacing: 1px; }
.slot input { font-size: 19px; padding: 4px 18px 2px 40px; }
.slot .car { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.chip { width: 16px; height: 16px; border-radius: 50%; flex: none; display: inline-block; box-shadow: 0 0 0 2px #eceae2, 0 0 0 3px #111; }
.slot .dev { font-size: 12px; opacity: 0.7; font-weight: 700; }
.slot .acts { display: flex; gap: 8px; margin-top: auto; }
.slot.empty { align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 13px; color: rgba(236,234,226,0.62); line-height: 1.7; }
.slot.empty::before { opacity: 0.38; border-style: dashed; }
kbd { font-family: var(--f-sign); font-weight: 800; background: #f3f3ee; color: #111; border-radius: 4px; padding: 1px 5px 0; font-size: 11.5px; white-space: nowrap; box-shadow: inset 0 0 0 1.5px #111; }
.racecol { display: flex; flex-direction: column; gap: 18px; }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.track { position: relative; border: 0; border-radius: 8px; background: var(--swhite); color: #111; padding: 0 0 7px; overflow: hidden; text-align: left; transition: transform 0.12s;
  box-shadow: inset 0 0 0 3px var(--swhite), inset 0 0 0 5px #111, 0 4px 10px rgba(0,0,0,0.35); }
.track canvas { display: block; width: calc(100% - 18px); height: 80px; margin: 9px 9px 0; }
.track b { display: block; font-family: var(--f-sign); font-weight: 900; font-size: 13.5px; padding: 3px 11px 0; }
.track small { display: block; font-size: 11px; font-weight: 600; padding: 0 11px; opacity: 0.72; line-height: 1.25; }
.track:hover { transform: translateY(-2px); }
.track.on { background: var(--syel); transform: translateY(-3px); box-shadow: inset 0 0 0 3px var(--syel), inset 0 0 0 5px #111, 0 0 0 3px #fff, 0 8px 16px rgba(0,0,0,0.45); }
.tracks.small .track small { display: none; }
.mark.go { padding-top: 6px; }
.mark.go b { font-size: 44px; }

/* garage: the car on a lamp-lit bay, a dealer price tag, the sign with a dashboard cluster */
.garage { display: grid; grid-template-columns: 1fr minmax(340px, 480px); gap: 22px; max-width: 1200px; margin: 0 auto; min-height: calc(100% - 120px); }
.stage { position: relative; min-height: 300px; }
.carname { position: absolute; left: 3%; bottom: 9%; max-width: 86%; transform: rotate(-4deg); color: #1a0d04; padding: 16px 26px 14px 50px;
  background: radial-gradient(circle at 24px 50%, #16181b 0 6px, #f5e9d8 6.5px 9px, transparent 9.5px), linear-gradient(170deg, #ff8436, var(--tag) 55%, #e8540c);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); animation: hang 0.9s cubic-bezier(0.25, 0.9, 0.3, 1) both; }
.carname .asis { display: block; font-style: normal; font-family: var(--f-sten); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.8; }
.carname b { display: block; font-family: var(--f-cond); font-weight: 800; font-size: clamp(34px, 4.4vw, 58px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.5px; }
.carname small { display: block; font-weight: 800; font-size: 14px; margin-top: 3px; }
.gpanel { align-self: start; }
.carlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.carlist button { border: 0; border-radius: 5px; background: var(--swhite); color: #111; padding: 6px 4px 4px; min-height: 42px; font-family: var(--f-cond); font-weight: 700; font-size: 14.5px; line-height: 1; text-transform: uppercase; letter-spacing: 0.3px;
  box-shadow: inset 0 0 0 2px var(--swhite), inset 0 0 0 3.5px #111; }
.carlist button:hover { background: #fff; }
.carlist button.on { background: var(--syel); box-shadow: inset 0 0 0 2px var(--syel), inset 0 0 0 3.5px #111, 0 0 0 2.5px #fff; }
.blurb { font-size: 14.5px; margin: 14px 0 10px; line-height: 1.4; font-weight: 600; }
.statbars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 12px 8px 8px; margin: 4px 0 2px; border-radius: 16px 16px 26px 26px;
  background: radial-gradient(ellipse at 50% 0%, #2c3035, #0c0d0f 78%); box-shadow: inset 0 0 0 2px #000, inset 0 2px 0 rgba(255,255,255,0.08), 0 4px 0 #050607, 0 10px 18px rgba(0,0,0,0.45); }
.sb { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.sb svg { display: block; width: 100%; max-width: 94px; height: auto; }
.sb .lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #c9ced4; white-space: nowrap; }
.sb .needle { transition: transform 0.9s cubic-bezier(0.3, 1.55, 0.45, 1); transform-box: view-box; transform-origin: 50px 50px; }
.sb .ghost { opacity: 0.5; }
.sb text { font-family: var(--f-dot); font-weight: 900; }
.special { position: relative; margin-top: 12px; padding: 9px 12px 8px 58px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-radius: 8px; background: var(--syel); color: #111; font-size: 13px; font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--syel), inset 0 0 0 4px #111; }
.special b { font-family: var(--f-sten); font-weight: 400; font-size: 16px; letter-spacing: 0.4px; }
.wtri { position: absolute; left: 12px; top: 50%; width: 36px; height: 33px; transform: translateY(-50%); background: var(--tri) center / contain no-repeat; }
.wtri.big { position: static; flex: none; width: 74px; height: 66px; transform: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 3px; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; transition: transform 0.1s;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.35), inset 0 3px 4px rgba(255,255,255,0.4), 0 0 0 3px #c5cbd1, 0 0 0 4.5px #30353a; }
.swatches button.on { transform: scale(1.14); box-shadow: inset 0 -4px 6px rgba(0,0,0,0.35), inset 0 3px 4px rgba(255,255,255,0.4), 0 0 0 3px var(--syel), 0 0 0 5px #111; }
.swatches label.custom { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--fg); display: flex; align-items: center; justify-content: center; font-weight: 900; cursor: pointer; position: relative; overflow: hidden; font-size: 18px; }
.swatches label.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.decals { display: flex; flex-wrap: wrap; gap: 5px; }
.decals button { border: 2px solid var(--fg); background: transparent; color: var(--fg); border-radius: 5px; padding: 4px 8px 2px; font-family: var(--f-sign); font-weight: 800; font-size: 12px; }
.decals button.on { background: var(--fg); color: var(--plate); }
.decals button.locked { opacity: 0.5; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 8px); }
.num input { width: 118px; text-align: center; padding-left: 34px; padding-right: 12px; font-size: 24px; }

/* online */
.online { max-width: 860px; margin: 0 auto; display: grid; gap: 22px; }
.entry { display: grid; gap: 18px; }
#oEntry { width: min(640px, 100%); margin: 0 auto; }
.join { display: flex; gap: 10px; align-items: stretch; }
.join input { flex: 1; min-width: 0; font-size: 30px; letter-spacing: 9px; text-align: center; padding: 4px 22px 1px 40px; }
.code { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.code span { font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; }
.code b { display: inline-block; border: 2px solid #111; border-radius: 6px; color: #121212; font-family: var(--f-cond); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: 10px; padding: 6px 20px 2px 48px; text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0,0,0,0.3); }
.lplayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.lp { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,0.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45); font-weight: 800; }
.lp .plate { font-size: 18px; padding: 3px 14px 1px 34px; background-size: auto, auto, 18px 100%, auto; background-position: 26px 50%, calc(100% - 9px) 50%, 0 0, 0 0; }
.lp .badges { display: flex; gap: 5px; }
.lp small { display: flex; align-items: center; gap: 7px; font-weight: 700; opacity: 0.92; }
.badge { font-family: var(--f-sten); font-weight: 400; font-size: 11px; letter-spacing: 0.6px; background: #111; color: var(--syel); padding: 2px 7px 1px; border-radius: 4px; }
.badge.you { background: var(--hivis); color: #111; }
.lrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.osettings.locked { pointer-events: none; opacity: 0.6; }

/* ------------------------------------------------------------ hud */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud .top { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: flex-start; }
.pill { white-space: nowrap; }
.pill:empty { display: none !important; }
.pill.gantry { font-size: 21px; padding: 7px 18px 4px; display: flex; align-items: center; gap: 10px; }
.pill.gantry::before { height: 200px; }
#hRound.gantry { box-shadow: inset 0 0 0 3px var(--plate), inset 0 0 0 5px #fff, 0 3px 0 var(--edge), 0 10px 20px rgba(0,0,0,0.5); }
#hRound::after { display: none; }
.pill.timer { font-family: var(--f-dot); font-weight: 900; font-size: 26px; line-height: 1; color: var(--led); padding: 8px 12px 6px; letter-spacing: 2px; text-shadow: 0 0 7px rgba(255,160,40,0.7);
  background: #060607 radial-gradient(rgba(255,170,60,0.075) 0.9px, transparent 1.3px) 0 0 / 5px 5px; border-radius: 6px; box-shadow: inset 0 0 0 3px #2a2d31, inset 0 0 0 4px #000, 0 10px 20px rgba(0,0,0,0.5); }
.pill.timer.ring { width: 62px; height: 62px; padding: 5px 0 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; font-family: var(--f-sign); font-weight: 900; font-size: 25px; letter-spacing: -1px; text-shadow: none;
  box-shadow: inset 0 0 0 7.5px var(--sred), 0 0 0 2px #fff, 0 10px 20px rgba(0,0,0,0.5); }
.pill.timer.low { animation: lowblink 0.5s steps(1) infinite; }
.pill.timer.ring.low { animation: lowpulse 0.5s infinite alternate; }
@keyframes lowblink { 50% { color: #5a3a10; text-shadow: none; } }
@keyframes lowpulse { to { transform: scale(1.1); background: #ffe8a0; } }

.cards { position: absolute; inset: 0; }
.card { position: absolute; width: 240px; padding: 10px 10px 9px; border-radius: 12px; color: #e8e8e4; display: grid; grid-template-columns: 1fr 62px; gap: 5px 10px; transition: transform 0.15s;
  background: linear-gradient(180deg, #2b2e33, #15171a); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 0 1px #000, 0 10px 22px rgba(0,0,0,0.5); }
.card::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 4px; border-radius: 0 0 3px 3px; background: repeating-linear-gradient(-45deg, var(--syel) 0 6px, #111 6px 12px); }
.card.c0 { left: 12px; top: max(12px, env(safe-area-inset-top)); }
.card.c1 { right: 12px; top: max(12px, env(safe-area-inset-top)); }
.card.c2 { left: 12px; bottom: 12px; }
.card.c3 { right: 12px; bottom: 12px; }
.card .who { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.card .tagp { flex: none; font-family: var(--f-cond); font-weight: 800; font-size: 14px; color: #fff; padding: 1px 6px 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); }
.card .nm { min-width: 0; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .pos { margin-left: auto; font-family: var(--f-dot); font-weight: 900; font-size: 25px; line-height: 1; color: var(--led); text-shadow: 0 0 8px rgba(255,160,40,0.65); }
.card .left { display: flex; flex-direction: column; gap: 5px; min-width: 0; justify-content: center; }
.card .hp { height: 13px; border-radius: 3px; background: #07080a; box-shadow: inset 0 0 0 1px #000; overflow: hidden; position: relative; }
.card .hp i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: repeating-linear-gradient(90deg, #5fe07c 0 7px, transparent 7px 9px); transition: width 0.15s; }
.card .hp.low i { background: repeating-linear-gradient(90deg, #ff4b3a 0 7px, transparent 7px 9px); }
.card .pips { display: flex; gap: 4px; flex-wrap: wrap; }
.card .pips:empty { display: none; }
.card .pips i { width: 15px; height: 9px; border-radius: 3px; background: #2b2e33; box-shadow: inset 0 0 0 1px #000; }
.card .pips i.on { background: var(--led); box-shadow: 0 0 7px rgba(255,170,40,0.85), inset 0 0 0 1px #b06a00; }
.card .lap { font-family: var(--f-cond); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.6px; }
.card .lap:empty { display: none; }
.card .meter { height: 10px; border-radius: 3px; background: #07080a; box-shadow: inset 0 0 0 1px #000; overflow: hidden; position: relative; }
.card .meter i { position: absolute; inset: 0 auto 0 0; background: #4b8fe8; }
.card .meter.ready i { background: repeating-linear-gradient(-45deg, var(--syel) 0 6px, #111 6px 12px); animation: tape 0.6s linear infinite; }
@keyframes tape { to { background-position: 17px 0; } }
.card .spn { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #b9bec4; }
.card .keyhint { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; color: var(--led); background: #050506; border-radius: 4px; padding: 4px 7px 2px; box-shadow: inset 0 0 0 1px #2a2d31; animation: ledin 0.4s steps(5); }
.card .item { grid-row: 2; grid-column: 2; position: relative; width: 62px; height: 62px; display: grid; place-items: center; align-self: center; }
.card .item::before { content: ''; position: absolute; inset: 10px; transform: rotate(45deg); border-radius: 5px; background: #24272b; box-shadow: inset 0 0 0 2px #000; }
.card .item.ready::before, .card .item.spin::before { background: var(--syel); box-shadow: inset 0 0 0 2px var(--syel), inset 0 0 0 4px #111, 0 0 0 1px #000, 0 0 14px rgba(246,196,0,0.4); }
.card .item svg { position: relative; width: 32px; height: 32px; }
.card .item.spin svg { animation: wob 0.12s infinite alternate; }
@keyframes wob { from { transform: rotate(-12deg) scale(0.9); } to { transform: rotate(12deg) scale(1.05); } }
.card .item .ammo { position: absolute; right: -4px; bottom: 0; background: #050506; color: var(--led); font-family: var(--f-cond); font-weight: 800; font-size: 14px; border-radius: 3px; padding: 0 5px; box-shadow: inset 0 0 0 1px #2a2d31; }
.card.danger { animation: shake 0.18s infinite; box-shadow: inset 0 0 0 1px #000, 0 0 0 3px var(--sred), 0 0 22px rgba(208,23,43,0.6); }
.card.out { opacity: 0.55; filter: grayscale(0.85); }
@keyframes shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(2px, -1px) rotate(0.6deg); } 75% { transform: translate(-2px, 1px) rotate(-0.6deg); } }

/* start lights: red, red + amber, amber, green */
.lights { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); display: flex; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #111214;
  box-shadow: 0 0 0 5px var(--syel), 0 0 0 7px #111, 0 16px 30px rgba(0,0,0,0.6); animation: hang 0.6s cubic-bezier(0.25, 0.9, 0.3, 1) both; transform-origin: 50% -40px; }
.lights::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 10px; margin-left: -5px; height: 300px; background: var(--post); }
.lights i { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3c40, #18191c 70%); box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 -4px 0 #2a2c30; transition: background 0.08s, box-shadow 0.08s; }
.lights[data-s="3"] .r, .lights[data-s="2"] .r { background: radial-gradient(circle at 40% 35%, #ffc2b5, #ff2d1a 45%, #9c0f08 82%); box-shadow: 0 0 24px 7px rgba(255,45,26,0.6); }
.lights[data-s="2"] .a, .lights[data-s="1"] .a { background: radial-gradient(circle at 40% 35%, #ffe7b0, #ffa21a 45%, #a35a00 82%); box-shadow: 0 0 24px 7px rgba(255,162,26,0.6); }
.lights[data-s="go"] .g { background: radial-gradient(circle at 40% 35%, #d2ffe6, #22e07a 45%, #087a3a 82%); box-shadow: 0 0 28px 9px rgba(34,224,122,0.6); }

/* shouts are road text painted across the screen */
.shout { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scaleY(1.45); padding: 4px 30px; font-family: var(--f-cond); font-weight: 800; font-size: clamp(64px, 12vw, 150px); line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: var(--paint); white-space: nowrap; pointer-events: none;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.75)); }
.shout:empty { display: none; }
.shout.pop { animation: pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); }
.shout.red { color: #ff4433; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.35, 0.2); opacity: 0; } to { transform: translate(-50%, -50%) scaleY(1.45); opacity: 1; } }
.sub { position: absolute; left: 50%; top: calc(40% + clamp(64px, 11vw, 130px)); transform: translateX(-50%); font-size: 20px; letter-spacing: 1px; padding: 9px 18px 6px; white-space: nowrap; animation: ledin 0.4s steps(5); }
.sub:empty { display: none; }
.feed { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; min-width: 220px; max-width: 330px; padding: 14px 14px 11px; }
.feed:empty { display: none; }
.feed::before, .feed::after, .toast::before, .toast::after { content: ''; position: absolute; top: -8px; width: 16px; height: 9px; border-radius: 8px 8px 2px 2px; background: var(--led); box-shadow: 0 0 10px var(--led); animation: beacon 1s steps(1) infinite; }
.feed::before, .toast::before { left: 16px; }
.feed::after, .toast::after { right: 16px; animation-delay: 0.5s; }
.feed div { font-size: 15px; line-height: 1.3; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ledin 0.35s steps(5); }
.minimap { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; border-radius: 12px; background: var(--sblue);
  box-shadow: inset 0 0 0 3px var(--sblue), inset 0 0 0 5px #fff, 0 3px 0 var(--sblue-d), 0 10px 20px rgba(0,0,0,0.5); }
.edge { position: absolute; inset: 0; transition: box-shadow 0.2s; }
.edge.on { box-shadow: inset 0 0 80px 20px rgba(208,23,43,0.5); }
.edge::before, .edge::after { content: ''; position: absolute; top: 0; bottom: 0; width: 16px; opacity: 0; transition: opacity 0.2s; background: repeating-linear-gradient(-45deg, var(--syel) 0 14px, #111 14px 28px); }
.edge::before { left: 0; } .edge::after { right: 0; }
.edge.on::before, .edge.on::after { opacity: 0.92; }
/* police lamps for knockouts */
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.flash::before, .flash::after { content: ''; position: absolute; inset: 0; }
.flash::before { background: radial-gradient(ellipse 55% 75% at 0% 0%, rgba(255,32,44,0.55), rgba(255,32,44,0) 70%); }
.flash::after { background: radial-gradient(ellipse 55% 75% at 100% 0%, rgba(40,96,255,0.55), rgba(40,96,255,0) 70%); }
.flash.on { animation: flashout 1s ease-out forwards; }
.flash.on::before { animation: wig 0.18s steps(1) infinite; }
.flash.on::after { animation: wig 0.18s steps(1) 0.09s infinite; }
@keyframes wig { 50% { opacity: 0; } }
@keyframes flashout { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
.pausebtn { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; margin-left: 150px; pointer-events: auto; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--sblue); color: #fff; font-family: var(--f-sign); font-weight: 900; font-size: 16px; letter-spacing: -1px; padding-top: 3px;
  box-shadow: inset 0 0 0 3px var(--sblue), inset 0 0 0 5px #fff, 0 8px 16px rgba(0,0,0,0.5); }
.pausebtn:hover { filter: brightness(1.15); }
.labels { position: absolute; inset: 0; }
.labels div { position: absolute; transform: translate(-50%, -100%); font-family: var(--f-cond); font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #111; white-space: nowrap; padding: 0 7px 0 13px; border-radius: 3px;
  background: linear-gradient(90deg, var(--pc, #111) 0 7px, #f3f3ee 7px); box-shadow: inset 0 0 0 1.5px #111, 0 3px 6px rgba(0,0,0,0.5); }
.labels div::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; border: 5px solid transparent; border-top-color: #111; border-bottom: 0; }

/* ------------------------------------------------------------ touch: painted arrows + road-sign buttons */
#touch { position: fixed; inset: auto 0 0 0; height: 0; z-index: 5; }
#touch button { pointer-events: auto; position: relative; border: 0; padding: 0; background: none; touch-action: none; display: grid; place-items: center; font-family: var(--f-sign); font-weight: 900; transition: transform 0.06s, filter 0.06s; }
#touch button span { position: relative; }
#touch button.on { transform: scale(0.92); filter: brightness(1.25); }
.tleft { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 12px; }
.tleft button { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, rgba(22,24,27,0.74) 0 62%, rgba(22,24,27,0) 71%) !important; }
.tleft svg { width: 56px; height: 56px; fill: var(--paint); }
.tleft button.on { background: radial-gradient(circle, rgba(255,236,200,0.32), rgba(22,24,27,0.74) 62%, rgba(22,24,27,0) 71%) !important; }
.tright { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 196px; height: 180px; }
.tright button { position: absolute !important; }
.tright .fire { right: 0; bottom: 0; width: 92px; height: 92px; background: #fff !important; clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); color: #fff; font-size: 18px; letter-spacing: 1px; }
.tright .fire::before { content: ''; position: absolute; inset: 4px; background: var(--sred); clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.tright .brake { right: 102px; bottom: 6px; width: 74px; height: 74px; border-radius: 50%; background: var(--sblue) !important; color: #fff; font-size: 13px; box-shadow: inset 0 0 0 3px var(--sblue), inset 0 0 0 5.5px #fff, 0 5px 10px rgba(0,0,0,0.5); }
.tright .sp { right: 8px; bottom: 98px; width: 78px; height: 78px; background: #111 !important; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); color: #111; font-size: 10.5px; }
.tright .sp::before { content: ''; position: absolute; inset: 4px; background: var(--syel); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ------------------------------------------------------------ results, modals, toast */
#results { display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 7vh; }
.res { width: min(490px, 100%); margin-right: 3vw; display: flex; flex-direction: column; gap: 16px; }
.res h2 { font-size: 30px; }
.rlist { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 0; }
.rlist li { display: grid; grid-template-columns: 42px 16px 1fr auto; gap: 10px; align-items: center; padding: 7px 9px 6px; border-top: 2px solid rgba(255,255,255,0.35); font-weight: 800; }
.rlist li:first-child { border-top-color: transparent; }
.rlist li .n { font-family: var(--f-cond); font-weight: 800; font-size: 19px; text-align: center; background: #fff; color: var(--sgreen); border-radius: 4px; padding: 1px 0 0; }
.rlist li small { display: block; font-weight: 600; opacity: 0.8; font-size: 12px; }
.rlist li .pts { font-family: var(--f-cond); font-weight: 800; font-size: 20px; }
.rlist li.me { background: var(--syel); color: #111; border-radius: 6px; border-top-color: transparent; }
.rlist li.me + li { border-top-color: transparent; }
.rlist li.me .n { background: #111; color: var(--syel); }
.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.award { position: relative; padding: 8px 10px 7px 38px; border-radius: 6px; background: var(--syel); color: #111; font-size: 12.5px; font-weight: 700; line-height: 1.3; box-shadow: inset 0 0 0 2px var(--syel), inset 0 0 0 3.5px #111; }
.award::before { content: ''; position: absolute; left: 9px; top: 11px; width: 21px; height: 19px; background: var(--tri) center / contain no-repeat; }
.award b { display: block; font-family: var(--f-sten); font-weight: 400; font-size: 14px; letter-spacing: 0.3px; }
.apron { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px; border-radius: 6px; background: var(--asphalt) #1c1e21; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 12px 26px rgba(0,0,0,0.55); }
.modal { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 24px; padding: 30px 16px 16px; overflow-y: auto; }
.modal::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--asphalt) #1c1e21; opacity: 0.9; }
.modal .panel { display: flex; flex-direction: column; gap: 10px; width: min(380px, 100%); flex: none; }
.modal .panel h2 { margin: 0; }
.modal .panel.wide { width: min(780px, 100%); display: block; }
.modal .panel.wide h2 { margin-bottom: 14px; }
.helpgrid h3 { margin-top: 4px; }
#pause .panel { flex-direction: row; align-items: center; gap: 16px; }
#pause .panel .hint { margin-top: 4px; }
.painted { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; flex: none; }
.painted .mark b { font-size: 36px; }
.helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.helpgrid p { font-size: 14px; line-height: 1.45; margin: 0 0 12px; font-weight: 600; }
.keys { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.keys td, .keys th { border-bottom: 2px solid rgba(0,0,0,0.12); padding: 5px 4px 3px; text-align: left; white-space: nowrap; }
.keys td kbd + kbd { margin-left: 2px; }
.keys th { font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.items div { display: grid; grid-template-columns: 40px 1fr; gap: 9px; align-items: center; font-size: 13px; font-weight: 600; }
.items div b { display: block; font-weight: 900; }
.items svg { width: 40px; height: 40px; padding: 5px; border-radius: 6px; background: var(--syel); box-shadow: inset 0 0 0 1.5px var(--syel), inset 0 0 0 3px #111; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); text-align: center; font-size: 18px; letter-spacing: 0.5px; padding: 13px 20px 10px; animation: ledin 0.4s steps(6); }
.nojs { position: fixed; inset: 40% 0 auto; text-align: center; font-weight: 800; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 860px) {
  #title { flex-direction: column; }
  .tcol { width: 100%; padding: max(54px, env(safe-area-inset-top)) 16px 22px; justify-content: space-between; gap: 18px; }
  .logo { align-self: center; width: min(100%, 420px); }
  .menu { margin-top: auto; }
  .cone { display: none; }
  .setup, .garage { grid-template-columns: 1fr; }
  .garage .stage { min-height: 40vh; }
  .helpgrid { grid-template-columns: 1fr; }
  #results { justify-content: center; }
  .res { margin-right: 0; margin-top: 32vh; }
}
@media (max-width: 560px) {
  .bar h2 { font-size: 21px; }
  .mark b { font-size: 34px; }
  .mark .arr { width: 50px; height: 25px; }
  .slots { grid-template-columns: 1fr; }
  .slot { min-height: 0; }
  .zebra > button { font-size: 12px; min-height: 58px; }
  .card { width: 178px; grid-template-columns: 1fr 48px; padding: 8px 7px 7px; }
  .card .nm { max-width: 70px; font-size: 13px; }
  .card .item { width: 48px; height: 48px; }
  .card .item::before { inset: 8px; }
  .card .item svg { width: 26px; height: 26px; }
  .card .spn { display: none; }
  .minimap { width: 96px; height: 96px; top: auto; bottom: 120px; transform: none; }
  .feed { top: 104px; transform: none; min-width: 0; max-width: 62vw; }
  .feed div { font-size: 13px; }
  .pausebtn { left: auto; right: 12px; margin-left: 0; top: auto; bottom: 206px; }
  #hud .top { left: auto; right: 10px; transform: none; gap: 8px; }
  .pill.gantry { font-size: 14px; padding: 6px 10px 3px; }
  .pill.timer.ring { width: 52px; height: 52px; font-size: 21px; }
  .lights { top: 22%; gap: 9px; padding: 10px 12px; }
  .lights i { width: 40px; height: 40px; }
  .awards { grid-template-columns: 1fr; }
  .field.two { grid-template-columns: 1fr; }
  .carname { padding: 12px 18px 10px 44px; }
  .statbars { padding: 10px 4px 6px; }
  .sb .lbl { font-size: 8.5px; letter-spacing: 0.2px; }
  .code b { font-size: 36px; letter-spacing: 7px; }
}
/* ------------------------------------------------------------ Honk Party accounts
   Logged-in drivers get a black plate with gold (#ffc53d) letters and the seal; guests keep the white plate.
   sso.js injects its own .sq-* styles after this file, so the overrides below are scoped under #online. */
.sq-verified { color: var(--sq-gold, #ffc53d) !important; font-weight: 800; white-space: nowrap; }
.plate.vplate { color: var(--sq-gold, #ffc53d); text-shadow: 0 0 6px rgba(255,197,61,0.3);
  background: radial-gradient(circle at 32px 50%, #8d939a 0 2.4px, #3a3e43 3px 3.6px, transparent 4px), radial-gradient(circle at calc(100% - 11px) 50%, #8d939a 0 2.4px, #3a3e43 3px 3.6px, transparent 4px), var(--strip) 0 0 / 22px 100% no-repeat, linear-gradient(#202326, #0c0d0f);
  box-shadow: inset 0 0 0 2px #2d3034, 0 0 0 2px #c3c8cd, 0 4px 8px rgba(0,0,0,0.45); }
.lp .plate.vplate { background-size: auto, auto, 18px 100%, auto; background-position: 26px 50%, calc(100% - 9px) 50%, 0 0, 0 0; }
.plate.mini.vplate { background: linear-gradient(#202326, #0c0d0f); box-shadow: inset 0 0 0 1.5px #2d3034, 0 2px 4px rgba(0,0,0,0.4); }
.plate .sq-seal { width: 0.8em; height: 0.8em; }
.labels div.vlabel { background: linear-gradient(90deg, var(--pc, #111) 0 7px, #16181b 7px); }
.award .sq-verified, .rlist li.me .sq-verified { background: #111; padding: 0 5px 0 3px; border-radius: 3px; }
#online .sq-gate { gap: 10px; margin-top: 10px; }
#online .sq-gate [hidden] { display: none !important; }
#online .sq-or { gap: 8px; font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; opacity: 1; }
#online .sq-or > span { opacity: 0.85; }
#online .sq-or > span:nth-of-type(2) { display: none; }
#online .sq-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; background: var(--swhite); color: #111; border-radius: 5px; padding: 6px 12px 4px;
  font-family: var(--f-sign); font-weight: 900; font-size: 13px; line-height: 1.1; letter-spacing: 0.6px; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--swhite), inset 0 0 0 3.5px #111, 0 2px 0 #8d939a; transition: transform 0.08s; }
#online .sq-btn:hover { background: #fff; transform: translateY(-1px); }
#online .sq-btn:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--swhite), inset 0 0 0 3.5px #111; }
#online .sq-btn:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; }
#online .sq-me { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; border: 2px solid #111; border-radius: 6px; padding: 7px 12px 5px 42px; color: #c9ced2;
  background: radial-gradient(circle at 32px 50%, #8d939a 0 2.4px, #3a3e43 3px 3.6px, transparent 4px), var(--strip) 0 0 / 22px 100% no-repeat, linear-gradient(#202326, #0c0d0f);
  box-shadow: inset 0 0 0 2px #2d3034, 0 0 0 2px #c3c8cd, 0 4px 8px rgba(0,0,0,0.45); }
#online .sq-me small { font-family: var(--f-sign); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.85; }
#online .sq-me .sq-verified { font-family: var(--f-cond); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: 2.5px; text-transform: uppercase; text-shadow: 0 0 6px rgba(255,197,61,0.3); }
#online .sq-me .sq-btn { margin-left: auto; opacity: 1; color: #111; font-size: 11px; padding: 5px 9px 3px; }
@media (max-width: 560px) {
  #online .sq-me { padding-left: 34px; background-size: auto, 18px 100%, auto; background-position: 26px 50%, 0 0, 0 0; }
  #online .sq-me .sq-verified { font-size: 20px; letter-spacing: 1.6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
  #sweep { display: none; }
}