:root {
  --taxi: #FFC20E; --asphalt: #0B0B0D; --signal: #E4202E; --steel: #C9CED6; --concrete: #1B1B1F; --white: #F4F4F4;
  --display: 'Archivo Black', 'Arial Black', sans-serif; --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--asphalt); color: var(--white); font-family: var(--cond); touch-action: none; user-select: none; -webkit-user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

.screen { position: fixed; inset: 0; display: none; z-index: 2; }
.screen.active { display: flex; }

.logoimg { display: block; width: min(640px, 82vw); max-height: 26vh; object-fit: contain; object-position: left center; }
#loading .logoimg { object-position: center; }

#loading { flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--asphalt); z-index: 20; }
#loadbar { width: min(360px, 70vw); height: 6px; background: #222; }
#loadbar i { display: block; height: 100%; width: 0; background: var(--taxi); transition: width .2s; }
#loadmsg { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }

#s-title { align-items: flex-end; justify-content: flex-start; padding: 6vh 6vw calc(8vh + var(--safe-b)); background: linear-gradient(90deg, rgba(11,11,13,.85), rgba(11,11,13,0) 60%); }
.title-wrap { max-width: 720px; }
.tag { font-size: clamp(20px, 3vw, 30px); text-transform: uppercase; letter-spacing: .18em; color: var(--taxi); margin: 8px 0 28px; font-weight: 700; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.hint { color: #9aa0a8; font-size: 15px; margin-top: 22px; max-width: 520px; }
.credit { position: absolute; right: 16px; bottom: calc(10px + var(--safe-b)); font-size: 14px; color: #8b9098; letter-spacing: .06em; }

.btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); padding: 12px 28px; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transform: skewX(-8deg); transition: background .15s, transform .15s; min-height: 48px; }
.btn:hover { background: rgba(255,255,255,.14); }
.btn.primary { background: var(--taxi); color: var(--asphalt); border-color: var(--taxi); }
.btn.primary:hover { background: #ffd24a; }
.btn.go { font-size: 26px; padding: 14px 40px; }

/* menus */
.menu { flex-direction: column; padding: calc(16px + var(--safe-t)) 4vw calc(16px + var(--safe-b)); gap: 16px; background: linear-gradient(180deg, rgba(11,11,13,.92), rgba(11,11,13,.75)); overflow-y: auto; }
.menu.side { background: linear-gradient(90deg, rgba(11,11,13,0) 0 35%, rgba(11,11,13,.9) 60%); }
.menu header { display: flex; align-items: center; gap: 14px; }
.menu h1 { font-family: var(--display); font-style: italic; font-size: clamp(28px, 4vw, 46px); margin: 0; text-transform: uppercase; flex: 1; }
.step { color: var(--taxi); font-weight: 700; font-size: 18px; letter-spacing: .1em; }
.back { width: 48px; height: 48px; font-size: 32px; background: none; border: 1px solid rgba(255,255,255,.3); line-height: 1; }
.menu nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 8px; }
.grid { display: grid; gap: 10px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.panel { margin-left: auto; width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; }
.grid.list { grid-template-columns: repeat(2, 1fr); }
.card { text-align: left; background: rgba(27,27,31,.9); border: 1px solid rgba(255,255,255,.1); padding: 12px 14px; position: relative; transition: border-color .15s, transform .15s; }
.card:hover { border-color: rgba(255,255,255,.4); }
.card.sel { border-color: var(--taxi); box-shadow: inset 4px 0 0 var(--taxi); }
.card h3 { margin: 2px 0; font-size: 20px; font-weight: 700; text-transform: uppercase; }
.card p { margin: 0; color: #a4a9b1; font-size: 15px; }
.card em { font-style: normal; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--taxi); }
.card.mode { padding: 26px 22px; }
.card.mode h3 { font-family: var(--display); font-style: italic; font-size: 30px; }
.card.rider::after { content: ''; position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.info h2 { font-family: var(--display); font-style: italic; font-size: clamp(24px, 3vw, 36px); margin: 0; text-transform: uppercase; }
.info h2 span { color: var(--c1, var(--taxi)); }
.info p { margin: 4px 0; color: #c2c6cc; font-size: 18px; }
.info .bio { color: var(--taxi); }
.stat { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.stat span { width: 120px; color: #a4a9b1; }
.stat b { flex: 1; height: 8px; background: #2a2a30; }
.stat b i { display: block; height: 100%; background: var(--taxi); }
.grid.tracks { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card.track { display: flex; gap: 12px; align-items: center; }
.card.track canvas { width: 120px; height: 82px; flex: none; background: #111; }
.best { color: var(--steel) !important; font-size: 14px !important; margin-top: 4px !important; }
.grid.chips { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.chip { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px; background: rgba(27,27,31,.9); border: 1px solid rgba(255,255,255,.1); font-size: 20px; font-weight: 700; text-transform: uppercase; }
.chip i { width: 100%; height: 46px; background: linear-gradient(180deg, var(--a), var(--b)); }
.chip small { color: #a4a9b1; font-size: 14px; }
.chip.sel { border-color: var(--taxi); box-shadow: inset 0 -4px 0 var(--taxi); }
.opts { display: flex; gap: 20px; flex-wrap: wrap; }
.opt { display: flex; align-items: center; gap: 10px; font-size: 20px; text-transform: uppercase; }
.opt span { color: #a4a9b1; width: 70px; }
.opt button { width: 44px; height: 44px; background: #222; border: 1px solid #444; font-size: 24px; }
.opt b { min-width: 80px; text-align: center; font-size: 24px; }
.summary { color: var(--steel); font-size: 18px; margin: 0; }

/* HUD */
.hud { pointer-events: none; font-family: var(--cond); }
.hud button { pointer-events: auto; }
.hud .tl { position: absolute; left: 16px; top: calc(12px + var(--safe-t)); display: flex; gap: 14px; align-items: center; }
#pos { font-family: var(--display); font-style: italic; font-size: 64px; line-height: 1; color: var(--taxi); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
#pos small { font-size: 26px; color: var(--white); }
.meta { display: flex; flex-direction: column; font-size: 20px; text-shadow: 0 1px 4px #000; }
.meta b { font-size: 24px; text-transform: uppercase; }
#board { position: absolute; left: 16px; top: calc(100px + var(--safe-t)); margin: 0; padding: 0; list-style: none; font-size: 16px; text-transform: uppercase; }
#board li { display: flex; gap: 8px; align-items: center; background: rgba(11,11,13,.6); padding: 2px 10px 2px 6px; margin-bottom: 2px; width: 150px; }
#board li b { width: 16px; color: var(--taxi); }
#board li i { width: 4px; height: 16px; }
#board li.me { background: var(--taxi); color: var(--asphalt); }
#board li.me b { color: var(--asphalt); }
body.free #board, body.free .meta #best { display: none; }
.hud .tr { position: absolute; right: 16px; top: calc(12px + var(--safe-t)); text-align: right; }
#minimap { width: 200px; height: 160px; background: rgba(11,11,13,.55); display: block; margin-left: auto; }
.tr p { margin: 2px 0; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 3px #000; }
#hudWeather { color: var(--taxi); }
.hud .br { position: absolute; right: 20px; bottom: calc(18px + var(--safe-b)); width: 230px; }
.speedo { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
#spd { font-family: var(--display); font-style: italic; font-size: 76px; line-height: .9; }
.speedo small { font-size: 18px; color: var(--steel); }
#gear { font-style: normal; font-family: var(--display); font-size: 34px; color: var(--asphalt); background: var(--taxi); padding: 0 10px; margin-left: 8px; }
#rpm { height: 10px; background: rgba(255,255,255,.15); margin-top: 6px; transform: skewX(-20deg); }
#rpm i { display: block; height: 100%; background: linear-gradient(90deg, var(--white), var(--taxi) 70%, var(--signal)); }
#rpm.red i { background: var(--signal); }
.sub { display: flex; justify-content: space-between; margin-top: 6px; font-size: 16px; text-transform: uppercase; }
#draft { opacity: 0; color: #6ee7ff; transition: opacity .2s; }
#draft.on { opacity: 1; }
#count, #flash, #wrong { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .2s; font-family: var(--display); font-style: italic; text-transform: uppercase; text-shadow: 0 4px 20px rgba(0,0,0,.7); white-space: nowrap; }
#count { top: 26%; font-size: clamp(90px, 18vw, 200px); color: var(--taxi); }
#flash { top: 18%; font-size: clamp(22px, 4vw, 40px); }
#wrong { top: 34%; font-size: 36px; color: var(--signal); }
#count.on, #flash.on, #wrong.on { opacity: 1; }
.topbtns { position: absolute; top: calc(232px + var(--safe-t)); right: 16px; display: flex; gap: 6px; }
.topbtns button { background: rgba(11,11,13,.6); border: 1px solid rgba(255,255,255,.3); padding: 8px 12px; font-size: 16px; text-transform: uppercase; min-height: 40px; }
.touch-only { display: none !important; }
@media (pointer: coarse) { .touch-only { display: flex !important; } }
.touch { position: absolute; inset: auto 0 calc(10px + var(--safe-b)) 0; justify-content: space-between; padding: 0 14px; }
.tpad { display: flex; gap: 12px; }
.tpad button { pointer-events: auto; width: 88px; height: 88px; border-radius: 50%; background: rgba(11,11,13,.45); border: 2px solid rgba(255,255,255,.4); font-size: 26px; font-weight: 700; touch-action: none; }
.tpad.right button { font-size: 16px; }
.tpad button.on { background: rgba(255,194,14,.55); border-color: var(--taxi); }
#tGas { background: rgba(255,194,14,.3); }
/* Race HUD system: one panel language for all four corners (dark glass, taxi edge, condensed caps labels) */
.hud { --pnl: rgba(11,11,13,.68); --edge: 4px solid var(--taxi); --lbl: 13px; }
.hud .tl { gap: 0; align-items: stretch; background: var(--pnl); border-left: var(--edge); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#pos { font-size: 68px; padding: 6px 14px 4px 12px; background: var(--taxi); color: var(--asphalt); text-shadow: none; display: flex; align-items: baseline; }
#pos small { font-size: 24px; color: var(--asphalt); opacity: .7; margin-left: 2px; }
.meta { justify-content: center; gap: 2px; padding: 6px 16px 6px 14px; min-width: 150px; text-shadow: none; font-size: 22px; font-variant-numeric: tabular-nums; }
.meta b { font-size: 26px; letter-spacing: .04em; color: var(--white); }
.meta #time { font-weight: 700; }
.meta #best { font-size: 17px; color: var(--steel); letter-spacing: .03em; }
#board { top: calc(104px + var(--safe-t)); font-size: 19px; background: var(--pnl); border-left: var(--edge); padding: 6px 0; width: 214px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#board li { background: none; width: auto; gap: 10px; padding: 3px 14px 3px 10px; margin: 0; letter-spacing: .04em; font-weight: 600; }
#board li + li { border-top: 1px solid rgba(255,255,255,.07); }
#board li b { width: 18px; font-family: var(--display); font-size: 15px; color: var(--steel); }
#board li i { width: 5px; height: 18px; }
#board li.me { background: var(--taxi); color: var(--asphalt); }
.hud .tr { background: var(--pnl); border-right: var(--edge); padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#minimap { background: none; }
.tr p { font-size: 16px; font-weight: 600; text-shadow: none; padding-right: 2px; }
.hud .br { width: 260px; background: var(--pnl); border-right: var(--edge); padding: 10px 16px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.speedo { text-shadow: none; }
#spd { font-size: 80px; font-variant-numeric: tabular-nums; }
#rpm { height: 12px; margin-top: 8px; }
.sub { margin-top: 10px; gap: 8px; font-size: 15px; letter-spacing: .06em; }
.sub > span { flex: 1; padding: 4px 8px; border: 1px solid rgba(255,255,255,.18); text-align: center; color: var(--steel); }
.sub b { color: var(--white); font-variant-numeric: tabular-nums; }
#draft { opacity: .35; color: var(--steel); transition: opacity .2s, background .2s, color .2s; }
#draft.on { opacity: 1; background: #6ee7ff; color: var(--asphalt); border-color: #6ee7ff; }
.topbtns { top: calc(250px + var(--safe-t)); gap: 8px; }
.topbtns button { background: var(--pnl); border: 0; border-right: var(--edge); min-height: 48px; min-width: 64px; padding: 10px 16px; font-size: 18px; font-weight: 700; letter-spacing: .06em; }
@media (pointer: coarse) {
  .hud .br { bottom: calc(118px + var(--safe-b)); right: 14px; width: 180px; }
  #spd { font-size: 56px; }
}

/* Menu system: breadcrumb ribbon, showroom garage with stats top right and a carousel strip along the bottom */
.menu header { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; align-self: flex-start; background: rgba(17,17,20,.94); border-left: 4px solid var(--taxi); padding: 6px 56px 6px 8px; margin-left: -4vw; padding-left: calc(4vw - 4px); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); flex: none; }
.menu header .back { grid-row: 1 / 3; grid-column: 1; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.08); font-size: 28px; }
.menu header .step { grid-row: 1; grid-column: 2; font-size: 14px; font-weight: 500; color: var(--steel); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.menu header h1 { grid-row: 2; grid-column: 2; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; }
#s-results header { padding-top: 12px; padding-bottom: 12px; }
.menu.side { background: linear-gradient(180deg, rgba(11,11,13,.5), rgba(11,11,13,0) 24%); padding-left: 0; padding-right: 0; padding-bottom: 0; gap: 0; overflow: hidden; }
.menu.side header { margin-left: 0; padding-left: 4vw; }
.panel { display: contents; }
.info { order: 1; align-self: flex-end; width: min(340px, 46vw); margin: 0 4vw auto 0; padding: 14px 18px 16px; text-align: right; background: linear-gradient(270deg, rgba(11,11,13,.78), rgba(11,11,13,.35)); border-right: 4px solid var(--taxi); }
.info .kicker { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.info h2 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; margin: 2px 0 4px; }
.info .tagline { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.info h4 { margin: 14px 0 4px; text-align: left; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.info .bio { font-size: 18px; }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 7px 0 0; font-size: 15px; text-align: left; }
.stat span { width: auto; color: var(--white); font-weight: 700; }
.stat em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat b { grid-column: 1 / 3; height: 5px; background: rgba(255,255,255,.2); }
.swatch { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 12px; }
.swatch i { width: 30px; height: 14px; transform: skewX(-18deg); border: 1px solid rgba(255,255,255,.35); }
.swatch small { order: -1; margin-right: 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.menu.side nav { order: 2; margin-top: 0; padding: 10px 4vw 12px; }
.tabs { order: 3; display: flex; flex: none; background: rgba(17,17,20,.96); border-top: 1px solid rgba(255,255,255,.12); }
.tabs button { flex: 1; min-height: 44px; padding: 8px 6px; background: none; border: 0; border-top: 3px solid transparent; font-size: 19px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.tabs button:hover { color: var(--white); }
.tabs button.sel { background: #2b2c33; color: var(--white); border-top-color: var(--taxi); }
.grid.list { order: 4; flex: none; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; background: #2b2c33; padding: 8px max(8px, 1vw) calc(10px + var(--safe-b)); }
.grid.list::-webkit-scrollbar { display: none; }
#riderList { border-top: 3px solid var(--taxi); }
.grid.list .card { background: none; border: 2px solid transparent; padding: 4px 10px 8px; display: flex; flex-direction: column; min-width: 0; }
.grid.list .card:hover { background: rgba(255,255,255,.06); }
.grid.list .card.sel { border-color: var(--white); background: rgba(255,255,255,.08); box-shadow: inset 0 -4px 0 var(--taxi); }
.grid.list .card h3 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.list .card p { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.list .card em { font-size: 12px; }
.thumb { display: block; width: 100%; height: clamp(64px, 12.5vh, 104px); object-fit: contain; pointer-events: none; }
.card.rider::after { right: 8px; top: 8px; width: 14px; height: 14px; }
@media (max-width: 760px) {
  .info { width: auto; align-self: stretch; margin: 10px 0 auto; padding: 10px 4vw 12px; background: linear-gradient(180deg, rgba(11,11,13,.7), rgba(11,11,13,.25)); border-right: 0; text-align: left; }
  .info h4 { display: none; }
  .info .stat { margin-top: 4px; }
  .swatch { justify-content: flex-start; } .swatch small { order: 1; margin: 0 0 0 6px; }
  .grid.list { grid-auto-columns: 136px; }
  .grid.list .card h3 { font-size: 16px; }
  .tabs button { font-size: 15px; letter-spacing: .02em; }
  .thumb { height: 62px; }
}
@media (max-height: 500px) {
  .menu header { padding-top: 2px; padding-bottom: 2px; }
  .menu header .back { width: 36px; height: 36px; }
  .info { padding: 6px 12px 8px; width: min(280px, 40vw); margin-top: -40px; }
  .info h4, .info .bio, .swatch small { display: none; }
  .info .stat { margin-top: 2px; font-size: 13px; }
  .info .stat b { height: 3px; }
  .menu.side nav { padding-top: 0; padding-bottom: 6px; }
  .menu.side nav .btn { font-size: 16px; padding: 6px 18px; min-height: 36px; }
  .tabs button { min-height: 30px; padding: 3px 6px; font-size: 15px; }
  .grid.list { padding-top: 2px; padding-bottom: calc(4px + var(--safe-b)); }
  .grid.list .card p { display: none; }
  .thumb { height: 40px; }
}
#s-title { background: linear-gradient(90deg, rgba(11,11,13,.9), rgba(11,11,13,.55) 45%, rgba(11,11,13,0) 72%), linear-gradient(0deg, rgba(11,11,13,.7), rgba(11,11,13,0) 30%); }
.hint { color: #c2c6cc; text-shadow: 0 1px 3px #000; }
.credit { color: var(--white); text-shadow: 0 1px 4px #000; }

/* Title deck: the event at a glance. Four layered tiles (borough and map, event, bike, conditions) over the stage,
   each one a way into its setup screen, with the two calls to action underneath and the keys as caps, not prose. */
#s-title { padding-top: 4vh; padding-bottom: calc(5vh + var(--safe-b)); }
#s-title .logoimg { width: min(max(560px, 36vw), 82vw); max-height: 19vh; }
#s-title .tag { margin: 6px 0 18px; font-size: clamp(18px, 2.2vw, 26px); }
.title-wrap { max-width: min(max(640px, 44vw), 100%); }
.deck { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; margin-bottom: 18px; }
.tile { position: relative; overflow: hidden; min-width: 0; min-height: clamp(132px, 15vh, 176px); padding: 12px 14px 12px 16px; text-align: left; background: linear-gradient(160deg, rgba(38,39,46,.9), rgba(17,17,20,.9)); border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--taxi); box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); transition: transform .15s, border-color .15s, background .15s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tile::after { content: '›'; position: absolute; right: 12px; top: 6px; font-size: 24px; font-weight: 700; color: var(--steel); transition: color .15s, transform .15s; }
.tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); border-left-color: var(--taxi); background: linear-gradient(160deg, rgba(52,53,62,.94), rgba(22,22,26,.94)); }
.tile:hover::after { color: var(--taxi); transform: translateX(3px); }
.tile small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--taxi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.tile h3 { margin: 2px 0 4px; font-family: var(--display); font-style: italic; font-size: clamp(19px, 2vw, 25px); line-height: 1.05; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile p { margin: 0; font-size: 16px; font-weight: 500; color: #d5d8dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile p.dim { color: var(--steel); font-size: 14px; letter-spacing: .04em; margin-top: 4px; }
.t-track { display: flex; align-items: center; gap: 12px; }
.t-track canvas { flex: none; width: 108px; height: 76px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); }
.t-track > div { min-width: 0; flex: 1; }
.tile ul { list-style: none; margin: 6px 0 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid rgba(255,255,255,.09); }
.rows span { color: var(--steel); } .rows b { font-variant-numeric: tabular-nums; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.minis li { min-width: 0; } .minis span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.minis i { display: block; height: 5px; margin-top: 2px; background: rgba(255,255,255,.18); transform: skewX(-20deg); } .minis u { display: block; height: 100%; background: var(--taxi); }
.t-wx .sky { position: absolute; inset: 0 0 0 46%; background: linear-gradient(180deg, var(--a), var(--b)); opacity: .8; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.t-wx > :not(.sky) { position: relative; } .t-wx .rows { width: 58%; }
#s-title .row .btn { min-height: 52px; }
#s-title .btn.primary { padding: 12px 44px; font-family: var(--display); font-style: italic; font-size: 24px; box-shadow: 0 8px 24px rgba(255,194,14,.28); }
#s-title .btn:not(.primary) { background: rgba(17,17,20,.8); }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; list-style: none; margin: 18px 0 0; padding: 0; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #c2c6cc; text-shadow: 0 1px 3px #000; }
.keys li { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .keys .soft { color: var(--steel); }
kbd { display: inline-block; min-width: 24px; padding: 2px 6px; font: 700 13px var(--cond); text-align: center; color: var(--white); background: rgba(17,17,20,.85); border: 1px solid rgba(255,255,255,.3); border-bottom-width: 3px; border-radius: 4px; }
kbd:last-of-type { margin-right: 4px; }
@media (max-width: 760px) {
  .deck { grid-template-columns: 1fr 1fr; gap: 8px; } .tile { min-height: 0; padding: 9px 10px 10px 11px; }
  .t-track canvas, .minis, .tile p.dim, .keys { display: none; } .tile h3 { font-size: 17px; }
}
@media (max-height: 620px) { .deck, .keys { display: none; } #s-title .logoimg { max-height: 26vh; } }
@media (pointer: coarse) { .keys { display: none; } }

.overlay { align-items: center; justify-content: center; background: rgba(11,11,13,.7); z-index: 10; }
.card-lg { display: flex; flex-direction: column; gap: 12px; padding: 30px; background: var(--concrete); border-top: 6px solid var(--taxi); min-width: 280px; }
.card-lg h1 { font-family: var(--display); font-style: italic; margin: 0 0 8px; text-transform: uppercase; }

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 19px; }
th { text-align: left; color: #9aa0a8; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; padding: 6px 8px; }
td { padding: 8px; border-top: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
td i { display: inline-block; width: 6px; height: 16px; margin-right: 8px; vertical-align: middle; }
tr.me td { background: rgba(255,194,14,.18); }
#resTitle { color: var(--taxi); }

/* phones */
@media (max-width: 760px) {
  .card h3 { font-size: 16px; }
  .card p { font-size: 13px; }
  .grid.tracks { grid-template-columns: 1fr; }
  #s-title { background: linear-gradient(0deg, rgba(11,11,13,.9), rgba(11,11,13,0) 70%); }
}
@media (max-height: 500px) {
  #pos { font-size: 44px; } #board { display: none; }
  #minimap { width: 130px; height: 104px; }
  .topbtns { top: calc(122px + var(--safe-t)); }
  .tr p { display: none; }
  .hud .br { bottom: calc(10px + var(--safe-b)); right: 50%; transform: translateX(50%); width: 200px; }
  .tpad button { width: 76px; height: 76px; }
  .menu { gap: 8px; }
}

/* gaps to the riders either side, under the leaderboard */
#gap { position: absolute; left: 16px; top: calc(360px + var(--safe-t)); display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#gap span { background: var(--pnl, rgba(11,11,13,.6)); padding: 3px 12px 3px 10px; width: 214px; box-sizing: border-box; display: flex; justify-content: space-between; }
#gap b { font-family: var(--display); font-style: italic; }
#gap .up b { color: #35e06a; } #gap .dn b { color: var(--steel, #aab); }
body.free #gap { display: none; }

/* portrait phones: shrink the race HUD into slim corner chips so the road stays clear */
@media (max-width: 600px) {
  .hud .tl { left: 8px; top: calc(8px + var(--safe-t)); border-left-width: 3px; }
  #pos { font-size: 30px; padding: 3px 8px 2px 6px; }
  #pos small { font-size: 13px; }
  .meta { min-width: 0; padding: 3px 8px; font-size: 12px; }
  .meta b { font-size: 13px; }
  .meta #best { display: none; }
  #board { display: none; }
  .hud .tr { right: 8px; top: calc(8px + var(--safe-t)); padding: 4px; border-right-width: 3px; }
  #minimap { width: 92px; height: 74px; }
  .tr p { display: none; }
  .topbtns { top: calc(98px + var(--safe-t)); right: 8px; gap: 4px; }
  .topbtns button { min-height: 34px; min-width: 44px; padding: 6px 10px; font-size: 13px; border-right-width: 3px; }
  .hud .br { right: 8px; width: 132px; padding: 4px 8px 6px; border-right-width: 3px; }
  #spd { font-size: 34px; }
  .speedo small { font-size: 12px; }
  #gear { font-size: 18px; padding: 0 6px; margin-left: 4px; }
  #rpm { height: 6px; margin-top: 4px; }
  .sub { display: none; }
}

/* gap chips on phones (after the base #gap rule so they win) */
@media (max-height: 500px) { #gap { top: calc(112px + var(--safe-t)); font-size: 12px; } #gap span { width: 180px; padding: 2px 8px; } }
@media (max-width: 600px) { #gap { top: calc(56px + var(--safe-t)); left: 8px; font-size: 11px; } #gap span { width: auto; padding: 2px 8px; } }
#rewBtn { font-size: 24px; line-height: 1; }