/* Race screen (js/race/raceScreen.js): full-screen 3D view and HUD over the app. */
.rs { --ui: #ffffff; --bg: rgba(10, 16, 30, 0.72); --good: #3ddc84; --bad: #ff4d5e; --warn: #ffc94d; --acc: #ffd400;
  position: fixed; inset: 0; z-index: 50; background: #0b1220; color: var(--ui); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; user-select: none; touch-action: none; overflow: hidden; }
.rs canvas.rs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs .rsh { position: absolute; }
.rs .panel, .rs #rs-touch, .rs #rs-tools, .rs #rs-labels { position: absolute; }
.rs .rsh { position: fixed; pointer-events: none; }
.rs #rs-tl { top: calc(10px + env(safe-area-inset-top)); left: 14px; }
.rs #rs-pos { font: 900 46px/1 system-ui; text-shadow: 0 2px 8px #000b; letter-spacing: -0.02em; }
.rs #rs-pos small { font-size: 18px; opacity: 0.75; margin-left: 2px; }
.rs #rs-time { font: 800 22px/1 ui-monospace, Consolas, monospace; text-shadow: 0 2px 6px #000a; margin-top: 4px; }
/* Gap to the training ghost (js/race/ghost.js): green ahead of it, red behind. */
.rs #rs-ghost { font: 800 14px/1 ui-monospace, Consolas, monospace; text-shadow: 0 2px 6px #000a; margin-top: 4px; }
.rs #rs-ghost.ahead { color: #6dff8a; } .rs #rs-ghost.behind { color: #ff7a7a; } .rs #rs-ghost.hidden { display: none; }
.rs #rs-speed { font: 800 30px/1 system-ui; margin-top: 4px; text-shadow: 0 2px 6px #000a; }
.rs #rs-speed small { font-size: 13px; margin-left: 4px; opacity: 0.8; }
.rs #rs-mode { font: 700 13px/1 system-ui; letter-spacing: 0.08em; color: var(--acc); margin-top: 6px; height: 14px; text-shadow: 0 1px 4px #000; }
.rs #rs-manualTrack { width: 120px; height: 5px; background: #fff3; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.rs #rs-manualBar { height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(0); }
.rs #rs-mini { top: calc(10px + env(safe-area-inset-top)); right: 14px; width: min(34vw, 190px); height: min(34vw, 190px); background: var(--bg); border-radius: 12px; }
.rs #rs-board { top: calc(min(34vw, 190px) + 20px + env(safe-area-inset-top)); right: 14px; width: min(34vw, 190px); font: 700 12px/1.55 system-ui; background: var(--bg); border-radius: 10px; padding: 6px 9px; }
.rs #rs-board div { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }
.rs #rs-board b { width: 16px; text-align: right; opacity: 0.7; }
.rs #rs-board i { width: 9px; height: 9px; border-radius: 2px; margin-top: 4px; flex: none; }
.rs #rs-board .me { color: #fff; font-weight: 900; background: #1fbf5a99; border-radius: 4px; box-shadow: inset 3px 0 0 #fff; margin: 1px -4px; padding: 0 4px; }
.rs #rs-board .rival { color: #fff; font-weight: 900; background: #e0141e8c; border-radius: 4px; box-shadow: inset 3px 0 0 #fff; margin: 1px -4px; padding: 0 4px; }
.rs .rival-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #e0141e; color: #fff; font: 800 9px/15px system-ui; letter-spacing: .5px; vertical-align: 1px; }
.rs .gate-riders { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.rs .gr-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 12px; background: #ffffff0d; text-align: center; min-width: 0; }
.rs .gr-card.new { animation: gr-in .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.rs .gr-card.me { box-shadow: inset 0 0 0 2px var(--acc); }
.rs .gr-card b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs .gr-card small { font-size: 11px; font-weight: 600; opacity: .7; white-space: nowrap; }
.rs .gr-badge { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: color-mix(in srgb, var(--c) 75%, #fff);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 18%, #0b1220)); box-shadow: 0 0 0 2px var(--c2, #000), 0 0 0 4px var(--c); }
.rs .gr-badge .avatar-img { width: 100% !important; height: 100% !important; }
.rs .res-rider { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rs .gr-badge span { position: absolute; right: -6px; bottom: -4px; min-width: 20px; padding: 0 4px; border-radius: 999px; background: #0b1220; color: #fff; font: 800 11px/18px system-ui; }
.rs .gr-card.empty { animation: gr-wait 1.4s ease-in-out infinite; }
.rs .gr-card.empty .gr-badge { background: none; box-shadow: inset 0 0 0 2px #ffffff30; }
.rs .gr-card.empty b { opacity: .4; }
@keyframes gr-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes gr-wait { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .rs .gr-card.new, .rs .gr-card.empty { animation: none; } }
.rs #rs-board .out { opacity: 0.45; }
/* Start lights on the HUD, mirroring the masts at the gate: a tall tower, red on top, then
   amber, amber and green, big enough to read at a glance. --lights-h: how far down it reaches. */
.rs { --lamp: clamp(40px, 8vmin, 70px); --lamp-gap: calc(var(--lamp) * 0.2); --lamp-pad: calc(var(--lamp) * 0.22);
  --lights-h: calc(12px + env(safe-area-inset-top) + var(--lamp) * 4 + var(--lamp-gap) * 3 + var(--lamp-pad) * 2); }
.rs #rs-lights { top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -8px); display: flex; flex-direction: column; gap: var(--lamp-gap); padding: var(--lamp-pad); border-radius: calc(var(--lamp) * 0.4); background: #0b0c0fe8; box-shadow: 0 4px 18px #000a, inset 0 0 0 2px #ffffff1a; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 3; }
.rs #rs-lights.on { opacity: 1; transform: translate(-50%, 0); }
.rs #rs-lights i { --c: #ff2a2a; width: var(--lamp); height: var(--lamp); border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, #15161a); box-shadow: inset 0 3px 6px #000a; transition: background 0.06s, box-shadow 0.06s; }
.rs #rs-lights i:nth-child(2), .rs #rs-lights i:nth-child(3) { --c: #ffb000; }
.rs #rs-lights i:nth-child(4) { --c: #22ff55; }
.rs #rs-lights i.on { background: radial-gradient(circle at 40% 35%, #fff 0 12%, var(--c) 45%); box-shadow: 0 0 calc(var(--lamp) * 0.5) calc(var(--lamp) * 0.1) var(--c), inset 0 0 0 1px #ffffff40; }
/* The event banner and the gate call (top centre) step down below the tower while it is up. */
.rs.lights-on .ev-banner { top: calc(var(--lights-h) + 10px) !important; }
.rs.lights-on #rs-call { top: max(22%, calc(var(--lights-h) + 64px)); }
@media (orientation: landscape) and (max-height: 480px) {
  .rs { --lamp: clamp(24px, 8vmin, 38px); --lights-h: calc(6px + env(safe-area-inset-top) + var(--lamp) * 4 + var(--lamp-gap) * 3 + var(--lamp-pad) * 2); }
  .rs #rs-lights { top: calc(6px + env(safe-area-inset-top)); }
  /* Too little height to stack under the tower: the call goes beside it. */
  .rs.lights-on .ev-banner { top: calc(6px + env(safe-area-inset-top)) !important; left: calc(50% + var(--lamp) + 24px) !important; transform: none !important; }
  .rs.lights-on #rs-call { top: 30%; left: calc(50% + var(--lamp) + 24px); text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .rs #rs-lights { transition: opacity 0.25s; transform: translate(-50%, 0); } }
.rs #rs-call { top: 22%; left: 0; right: 0; text-align: center; font: 900 clamp(26px, 6vw, 54px)/1.1 system-ui; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 3px 12px #000c; transition: opacity 0.2s; opacity: 0; }
.rs #rs-msg { top: 30%; left: 0; right: 0; margin: auto; width: max-content; max-width: 92vw; padding: 8px 16px; border-radius: 999px; background: var(--bg); font: 800 17px/1.2 system-ui; transition: opacity 0.15s; opacity: 0; }
.rs .msg.good { color: var(--good); } .msg.bad { color: var(--bad); } .msg.warn { color: var(--warn); }
.rs #rs-meter { bottom: 150px; left: 0; right: 0; margin: auto; width: min(70vw, 340px); }
.rs #rs-meter.hidden { display: none; }
.rs #rs-meterLabel { font: 800 13px/1 system-ui; text-align: center; margin-bottom: 5px; letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 1px 4px #000; }
.rs #rs-meterTrack { position: relative; height: 10px; background: #fff3; border-radius: 6px; overflow: hidden; }
.rs #rs-meterTrack::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 18%; background: #3ddc8466; }
.rs #rs-meterFill { height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.rs #rs-meter.hot #rs-meterFill { background: var(--good); }
.rs #rs-meter.hot #rs-meterLabel { color: var(--good); }
.rs #rs-labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.rs .lbl { position: absolute; transform: translate(-50%, -100%); font: 800 11px/1 system-ui; padding: 3px 6px; border-radius: 6px; background: #000a; white-space: nowrap; border-left: 3px solid; }
.rs .lbl { opacity: .8; }
/* Rivals (players and the duel's AI rivals): just the name on see-through red, so the track still shows behind. */
.rs .lbl.rival { opacity: 1; z-index: 1; font-size: 12px; padding: 3px 7px; background: #e0141e8c; color: #fff; text-shadow: 0 1px 2px #000a; }
.rs .lbl.rival::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #e0141e8c; border-bottom: 0; }
.rs .panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 540px); max-height: 92vh; overflow: auto; background: var(--bg); backdrop-filter: blur(8px); border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 20px 60px #0008; }
.rs .panel.hidden, .hidden { display: none; }
/* A panel open (prep, pause, results) sits above the touch controls, which hide meanwhile:
   on a phone the stick and buttons would otherwise cover the panel's buttons. */
.rs .panel { z-index: 5; }
.rs #rs-leave { z-index: 6; }
.rs:has(> .panel:not(.hidden)) #rs-touch { display: none; }
.rs .panel h1 { margin: 0 0 4px; font: 900 32px/1 system-ui; letter-spacing: 0.02em; }
.rs .panel h1 span { color: var(--acc); }
.rs .panel h2 { margin: 0 0 4px; font: 900 34px/1 system-ui; }
.rs .panel p { margin: 8px 0; line-height: 1.4; font-size: 14px; opacity: 0.92; }
.rs .panel .sub { opacity: 0.75; font-size: 13px; }
.rs .panel ul { margin: 8px 0 14px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
kbd { background: #fff2; border-radius: 4px; padding: 1px 6px; font: 700 12px ui-monospace, monospace; }
.rs .panel button { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--acc); color: #111; font: 900 18px system-ui; letter-spacing: 0.04em; cursor: pointer; margin-top: 6px; }
.rs .lanes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 8px 0 12px; }
.rs .lanes button { margin: 0; padding: 10px 0; background: #ffffff1c; color: #fff; font-size: 16px; }
.rs .lanes button.on { background: var(--acc); color: #111; }
/* Your turn to pick a lane: zoom in, a yellow pulse round the panel and the free lanes glowing. */
.rs .panel.lane-turn { overflow-x: hidden; animation: laneIn 0.35s cubic-bezier(.2,1.4,.4,1), lanePulse 1s ease-in-out 0.35s infinite; outline: 2px solid #ffd400; }
.rs .panel.lane-turn .lanes button:not(:disabled) { animation: laneGlow 1s ease-in-out infinite; }
.rs .panel .lane-turn-head { opacity: 1; font-size: 15px; animation: laneHead 1s ease-in-out infinite; }
@keyframes laneIn { from { transform: translate(-50%, -50%) scale(0.85); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes lanePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 20px 60px #0008, 0 0 0 0 #ffd40000; } 50% { transform: translate(-50%, -50%) scale(1.025); box-shadow: 0 20px 60px #0008, 0 0 28px 4px #ffd40066; } }
@keyframes laneGlow { 0%, 100% { box-shadow: 0 0 0 0 #ffd40000; } 50% { box-shadow: 0 0 0 2px #ffd400, 0 0 14px #ffd40088; } }
@keyframes laneHead { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px #ffd400aa; } }
@media (prefers-reduced-motion: reduce) { .rs .panel.lane-turn, .rs .panel.lane-turn .lanes button, .rs .panel .lane-turn-head { animation: none; } }
.rs .lane-ends { display: flex; justify-content: space-between; margin: -6px 0 12px; font-size: 12px; opacity: 0.7; }
.rs #rs-results table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.rs #rs-results td { padding: 5px 4px; border-top: 1px solid #fff2; }
.rs #rs-results td:last-child { text-align: right; font-weight: 800; font-family: ui-monospace, Consolas, monospace; }
.rs #rs-results tr.me td { color: #fff; font-weight: 800; background: #1fbf5a40; }
.rs #rs-results tr.me td:first-child { box-shadow: inset 3px 0 0 #2ee66b; }
/* Results: the body scrolls (the per-obstacle list has its own short scroll), the buttons never do. */
.rs #rs-results:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
.rs #rs-results .res-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rs #rs-results .tech { max-height: min(30vh, 240px); overflow-y: auto; border-bottom: 1px solid #fff2; }
.rs #rs-results .tech table { margin-top: 0; }
.rs #rs-results .btns { flex: none; }
td.good { color: var(--good); } td.bad { color: var(--bad); }
.rs .rider { display: grid; grid-template-columns: 1fr 64px 40px 40px; gap: 6px; margin: 8px 0 4px; }
.rs .rider input { min-width: 0; padding: 9px 8px; border: 0; border-radius: 10px; background: #ffffff1c; color: #fff; font: 700 15px system-ui; }
.rs .rider input[type=color] { padding: 3px; height: 38px; cursor: pointer; }
.rs .acct { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.85; margin: 4px 0 6px; }
.rs .panel .acct button { width: auto; flex: none; white-space: nowrap; margin: 0 0 0 auto; padding: 6px 10px; font-size: 12px; background: #ffffff1c; color: #fff; }
.rs .rank { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 10px; }
.rs .rank td { padding: 4px; border-top: 1px solid #fff2; }
.rs .rank td:last-child { text-align: right; font-weight: 800; font-family: ui-monospace, Consolas, monospace; }
.rs .rank tr.me td { color: #fff; font-weight: 800; background: #1fbf5a40; }
.rs .rank tr.me td:first-child { box-shadow: inset 3px 0 0 #2ee66b; }
.rs .rank i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rs .rank .empty { opacity: 0.6; }
.rs #rs-touch { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 14px calc(16px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.rs #rs-touch .grp { display: flex; gap: 10px; pointer-events: auto; align-items: flex-end; }
/* Thumb cluster: PEDAL (held most of the race) big and red in the corner, MANUAL beside it, SALTO above it. */
.rs #rs-touch .grp:last-child { display: grid; grid-template-areas: '. jump' 'manual pedal'; gap: 10px; align-items: end; justify-items: center; }
.rs .tbtn[data-in="jump"] { grid-area: jump; }
.rs .tbtn[data-in="manual"] { grid-area: manual; }
.rs .tbtn[data-in="pedal"] { grid-area: pedal; }
.rs .tbtn { width: 92px; height: 92px; border-radius: 50%; border: 2px solid #fff6; background: #0009; color: #fff; font: 900 13px/1.1 system-ui; letter-spacing: 0.05em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; touch-action: none; cursor: pointer; }
.rs .tbtn kbd { font-size: 10px; opacity: 0.7; }
.rs .tbtn.on { background: var(--acc); color: #111; border-color: var(--acc); }
.rs .tbtn.main { width: 116px; height: 116px; font-size: 16px; background: #b3122299; }
.rs .tbtn.main.on { background: #e01b2e; color: #fff; border-color: #fff; }
.rs #rs-stick { position: relative; width: 164px; height: 164px; border-radius: 50%; border: 2px solid #fff6; background: radial-gradient(circle, #0006 0 45%, #000a 46%); touch-action: none; display: flex; align-items: center; justify-content: center; }
.rs #rs-stick.on { border-color: var(--acc); }
.rs #rs-stick kbd { position: absolute; bottom: -18px; font: 900 10px system-ui; color: #fff; opacity: 0.7; }
.rs #rs-knob { width: 62px; height: 62px; border-radius: 50%; background: #fffc; box-shadow: 0 2px 10px #0008; pointer-events: none; transition: transform 0.12s; }
.rs #rs-stick.on #rs-knob { background: var(--acc); transition: none; }
.rs #rs-mode.danger { color: #ff4d4d; }
.rs .tbtn.steer { width: 64px; height: 64px; font-size: 22px; }
.rs .tbtn.small { width: 48px; height: 48px; font-size: 17px; }
.rs #rs-tools { position: fixed; left: 14px; top: calc(150px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 8px; }
.rs #rs-loading { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); font: 700 12px system-ui; opacity: 0.8; }
@media (max-width: 600px) { .rs #rs-pos { font-size: 36px; } .rs #rs-board { font-size: 11px; } }
/* Narrow screens: stick on the left, the three buttons stacked as a thumb cluster on the right
   (SALTO big in the corner, PEDAL beside it, MANUAL above) so nothing runs off the edge. */
@media (max-width: 600px), (max-height: 480px) {
  .rs #rs-touch { padding: 0 10px calc(12px + env(safe-area-inset-bottom)); }
  .rs #rs-stick { width: clamp(116px, 36vw, 148px); height: clamp(116px, 36vw, 148px); }
  .rs #rs-knob { width: 46%; height: 46%; }
  .rs #rs-touch .grp:last-child { gap: 8px; }
  .rs .tbtn { width: clamp(62px, 19vw, 76px); height: clamp(62px, 19vw, 76px); font-size: 12px; }
  .rs .tbtn kbd, .rs #rs-stick kbd { display: none; }
  .rs .tbtn.main { width: clamp(84px, 26vw, 100px); height: clamp(84px, 26vw, 100px); font-size: 15px; }
  .rs .tbtn.small { width: 42px; height: 42px; font-size: 15px; }
  .rs .tbtn.steer { width: 56px; height: 56px; }
  .rs #rs-meter { bottom: calc(200px + env(safe-area-inset-bottom)); }
}
/* Phone on its side: little height, plenty of width. Buttons in one row on the right, stick
   and buttons sized off the height, tools in a row beside the timer, board beside the map. */
@media (orientation: landscape) and (max-height: 480px) {
  .rs #rs-touch { padding: 0 calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  .rs #rs-stick { width: clamp(108px, 42vh, 156px); height: clamp(108px, 42vh, 156px); }
  .rs #rs-touch .grp:last-child { gap: 8px; }
  .rs .tbtn { width: clamp(50px, 19vh, 70px); height: clamp(50px, 19vh, 70px); }
  .rs .tbtn.main { width: clamp(64px, 26vh, 92px); height: clamp(64px, 26vh, 92px); }
  .rs #rs-tl { top: calc(6px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
  .rs #rs-pos { font-size: 28px; } .rs #rs-pos small { font-size: 14px; }
  .rs #rs-time { font-size: 16px; margin-top: 2px; }
  .rs #rs-speed { font-size: 20px; margin-top: 2px; } .rs #rs-speed small { font-size: 11px; }
  .rs #rs-mode { font-size: 11px; height: 12px; margin-top: 3px; }
  .rs #rs-manualTrack { width: 90px; margin-top: 4px; }
  .rs #rs-tools { top: calc(6px + env(safe-area-inset-top)); left: calc(132px + env(safe-area-inset-left)); flex-direction: row; }
  .rs #rs-mini { top: calc(6px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: 30vh; height: 30vh; }
  .rs #rs-board { top: calc(6px + env(safe-area-inset-top)); right: calc(30vh + 20px + env(safe-area-inset-right)); width: 132px; font-size: 10px; line-height: 1.35; padding: 4px 7px; }
  .rs #rs-call { top: 26%; font-size: min(5.5vw, 11vh); }
  .rs #rs-msg { top: 40%; font-size: 14px; }
  .rs #rs-meter { bottom: calc(36vh + 16px + env(safe-area-inset-bottom)); width: min(34vw, 260px); }
  .rs .panel { max-height: 94vh; padding: 14px 16px 12px; }
}
.rs .panel .rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; margin: 8px 0; }
.rs .panel .rows b { text-align: right; }
.rs .panel .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* Shared out evenly and never wider than the panel (three long words ran off a phone's). */
.rs .panel .btns button { margin: 0; flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: clamp(13px, 4vw, 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Narrow: the main button (always last) gets a row of its own, the others share the one above. */
@media (max-width: 480px) { .rs .panel .btns:has(> button:nth-child(3)) > button:last-child { flex-basis: 100%; } }
.rs .panel button.ghost { background: #ffffff1c; color: #fff; }
.rs .reward { display: flex; gap: 14px; justify-content: center; margin: 10px 0 4px; flex-wrap: wrap; }
.rs .reward div { background: #ffffff12; border-radius: 12px; padding: 8px 14px; text-align: center; min-width: 92px; }
.rs .reward b { display: block; font: 900 22px/1.1 system-ui; color: var(--acc); }
.rs .reward small { opacity: .75; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rs .rtag { display: inline-block; font: 800 11px system-ui; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: var(--acc); color: #111; }

/* Helmet camera: goggle frame and lens tint over the view (HUD stays on top). */
.rs #rs-goggles { inset: 0; width: 100%; height: 100%; display: none; }
.rs.goggles #rs-goggles { display: block; }

/* Event: race results, general classification and the double-points warning of the final. */
.rs .panel .evh { margin: 10px 0 0; font: 900 11px system-ui; letter-spacing: .1em; opacity: .7; }
.rs .panel table.evt { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.15; }
.rs .panel table.evt td { padding: 2px 4px; border-top: 1px solid #fff2; white-space: nowrap; }
.rs .panel table.evt .avatar-img { width: 18px !important; height: 18px !important; }
/* Results panels: a smaller title, and the button always in sight at the bottom however long the tables are. */
.rs .panel:has(table.evt) { padding-top: 16px; padding-bottom: 12px; }
.rs .panel:has(table.evt) h2 { font-size: 26px; }
.rs .panel:has(table.evt) .sub { margin: 4px 0; }
/* Button bar pinned to the bottom of a long results panel: edge to edge and fading in
   from the top, so it reads as part of the panel and not as a dark box round the button. */
.rs .panel:has(table.evt) .btns { position: sticky; bottom: -12px; margin: 8px -22px -12px; padding: 14px 22px 12px; background: linear-gradient(rgba(10, 16, 30, 0), rgba(10, 16, 30, 0.85) 14px); }
@media (orientation: landscape) and (max-height: 480px) { .rs .panel:has(table.evt) .btns { bottom: -12px; margin: 8px -16px -12px; padding: 14px 16px 12px; } }
.rs .panel table.evt td:nth-child(n+3) { text-align: right; font-family: ui-monospace, Consolas, monospace; }
.rs .panel table.evt td:nth-child(2) { width: 100%; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.rs .panel table.evt tr.hd td { border-top: 0; opacity: .6; font: 800 11px system-ui; text-align: right; }
/* The player's own row in green, as the rival's in red: easy to find at a glance. */
.rs .panel table.evt tr.me td { color: #fff; font-weight: 800; background: #1fbf5a40; }
.rs .panel table.evt tr.me td:first-child { box-shadow: inset 3px 0 0 #2ee66b; }
.rs .panel table.evt tr.rival td { background: #e0141e33; font-weight: 800; }
.rs .panel table.evt tr.rival td:first-child { box-shadow: inset 3px 0 0 #e0141e; }
.rs .panel table.evt i.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.rs .dblwarn { margin: 10px 0 4px; padding: 7px 10px; border-radius: 12px; text-align: center; color: #111; background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #ffb300 14px 28px); box-shadow: 0 0 0 3px #111 inset, 0 0 24px #ffd40088; animation: dblpulse 0.9s ease-in-out infinite alternate; }
/* One line: "¡ATENTO! LA FINAL PUNTÚA DOBLE", the points below. */
.rs .dblwarn b { display: inline; font: 900 18px/1.1 system-ui; letter-spacing: .06em; margin-right: 6px; }
.rs .dblwarn span { display: inline; font: 900 15px/1.1 system-ui; letter-spacing: .04em; }
.rs .dblwarn small { display: block; font: 800 11px system-ui; margin-top: 2px; opacity: .8; }
.rs .dbl { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: #ffd400; color: #111; font: 900 clamp(18px, 4vw, 30px)/1.1 system-ui; text-shadow: none; animation: dblpulse 0.6s ease-in-out infinite alternate; }
@keyframes dblpulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.rs .reward div.loss b { color: #ff5a5a; }
@media (max-width: 480px) {
  .rs .gate-riders { gap: 6px; }
  .rs .gr-card { padding: 10px 4px 8px; }
  .rs .gr-badge { width: 42px; height: 42px; }
  .rs .gr-badge svg { width: 24px; height: 24px; }
  .rs .gr-card b { font-size: 13px; }
  .rs .gr-card small { font-size: 10px; white-space: normal; line-height: 1.2; }
}
/* Touch layout, gestures mode (.tz): two invisible thumb zones over the lower part of the screen instead
   of buttons. Left: the stick appears under the thumb. Right: hold = pedal, slide up = jump,
   slide down = manual; #rs-pad shows which under the finger. */
.rs #rs-touch { z-index: 2; }
.rs #rs-tools { z-index: 3; }
.rs .zone, .rs #rs-pad { display: none; }
.rs:not(.touchui) .tonly { display: none; }
.rs.tz .zone { display: block; position: fixed; top: 40%; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
.rs.tz #rs-zl { left: 0; }
.rs.tz #rs-zr { right: 0; }
.rs.tz .zhint { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0; font: 800 11px/1.35 system-ui; color: #fff; opacity: 0.55; text-shadow: 0 1px 3px #000; pointer-events: none; }
.rs.tz #rs-zl .zhint { left: calc(14px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom) + clamp(108px, 36vw, 150px)); }
.rs.tz #rs-zr .zhint { right: calc(14px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom) + 170px); text-align: right; }
.rs.tz:has(#rs-pad[data-st]:not([data-st=""])) #rs-zr .zhint,
.rs.tz:has(#rs-stick.on) #rs-zl .zhint { opacity: 0; }
.rs.tz #rs-touch .grp { pointer-events: none; }
.rs.tz #rs-touch .grp:last-child { display: none; }
.rs.tz #rs-stick { opacity: 0.4; transition: opacity 0.15s; }
.rs.tz #rs-stick.float { position: fixed; opacity: 1; }
.rs.tz #rs-pad { position: fixed; display: flex; flex-direction: column; align-items: center; gap: 30px; transform: translate(-50%, -50%); pointer-events: none; font: 900 11px system-ui; letter-spacing: 0.05em; color: #fff; text-shadow: 0 1px 3px #000; }
/* At rest it stays visible, faded in the bottom corner (as the stick does); pressed, it sits under the thumb. */
.rs.tz #rs-pad:not([data-st]), .rs.tz #rs-pad[data-st=""] { right: calc(22px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; opacity: 0.4; }
.rs.tz.lefty #rs-pad:not([data-st]), .rs.tz.lefty #rs-pad[data-st=""] { right: auto; left: calc(22px + env(safe-area-inset-left)); }
.rs #rs-pad > * { padding: 4px 8px; border-radius: 999px; background: #0007; opacity: 0.6; }
.rs #rs-pad span { width: 66px; height: 66px; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #fff8; border-radius: 50%; }
.rs #rs-pad[data-st="pedal"] span { background: #e01b2e; opacity: 1; border-color: #fff; }
.rs #rs-pad[data-st="jump"] b:first-child, .rs #rs-pad[data-st="manual"] b:last-child, .rs #rs-pad[data-st="mpedal"] i { background: var(--acc); color: #111; opacity: 1; }
/* Manual + pedal: beside the circle, towards the middle of the screen. */
.rs #rs-pad i { position: absolute; top: 50%; right: calc(50% + 33px + 12px); transform: translateY(-50%); font-style: normal; line-height: 1.15; text-align: center; white-space: nowrap; }
.rs.lefty #rs-pad i { right: auto; left: calc(50% + 33px + 12px); }
/* Left-handed (.lefty): everything mirrored. */
.rs.lefty #rs-touch { flex-direction: row-reverse; }
.rs.lefty #rs-touch .grp:last-child { grid-template-areas: 'jump .' 'pedal manual'; }
.rs.tz.lefty #rs-zl { left: auto; right: 0; }
.rs.tz.lefty #rs-zr { right: auto; left: 0; }
.rs.tz.lefty #rs-zl .zhint { left: auto; right: calc(14px + env(safe-area-inset-right)); text-align: right; }
.rs.tz.lefty #rs-zr .zhint { right: auto; left: calc(14px + env(safe-area-inset-left)); text-align: left; }
/* Control size (--ts, set from the player's touch settings): scaled from the corner they sit in. */
.rs #rs-touch .grp:last-child { transform: scale(var(--ts, 1)); transform-origin: bottom right; }
.rs #rs-stick { transform: scale(var(--ts, 1)); transform-origin: bottom left; }
.rs.lefty #rs-touch .grp:last-child { transform-origin: bottom left; }
.rs.lefty #rs-stick { transform-origin: bottom right; }
.rs.tz #rs-stick.float { transform-origin: center; }
/* Skip qualifying (js/race/eventRun.js): under the event banner, the only clickable bit of it. */
.rs .ev-skip { pointer-events: auto; margin-top: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid #fff6; background: #0b0c0fcc; color: #fff; font: 800 12px/1 system-ui; letter-spacing: 0.06em; cursor: pointer; text-shadow: none; }
.rs .ev-skip:hover { background: var(--acc); color: #111; border-color: var(--acc); }
.rs .ev-skip.hidden { display: none; }

/* ---- Race emotes (as in Moto Clash): picker beside the camera button, bubbles over the riders (mine blue, the others red) ---- */
.rs .emote-wrap { position: relative; }
.rs .emote-btn-ico { font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); transition: transform .2s; }
.rs .emote-btn:hover .emote-btn-ico { transform: scale(1.15) rotate(-8deg); }
.rs .emote-btn.cooling { opacity: .5; }
/* Tools in a column on the left: the picker opens to its right; in a row (phones) it opens below. */
.rs .emote-menu { position: absolute; left: 56px; right: auto; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 46px); gap: 4px; padding: 7px; background: rgba(16,18,23,.96); border: 1px solid #ffffff2e; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); perspective: 400px; animation: emoMenuIn .18s ease-out; }
@media (orientation: landscape) and (max-height: 480px) { .rs .emote-menu { left: 0; top: 50px; } }
.rs .emote-menu button { width: 46px; height: 46px; border: 0; border-radius: 11px; background: radial-gradient(circle at 35% 28%, rgba(120,170,255,.22), rgba(255,255,255,.04) 60%); font-size: 27px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: transform .15s, background .15s; }
.rs .emote-menu button span { display: inline-block; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); transform-style: preserve-3d; animation: emoIdle 2.4s ease-in-out infinite; }
.rs .emote-menu button:nth-child(odd) span { animation-delay: -1.2s; }
.rs .emote-menu button:hover, .rs .emote-menu button:active { transform: translateY(-2px) scale(1.12); background: radial-gradient(circle at 35% 28%, rgba(120,170,255,.45), rgba(61,139,255,.12) 65%); }
@keyframes emoMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes emoIdle { 0%,100% { transform: rotateY(-18deg) translateY(0); } 50% { transform: rotateY(18deg) translateY(-2px); } }

.rs .emote-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; } /* (over the panels: rivals speak between races too) */
.rs .emote { --ec: #3d8bff; --ec2: #9cc4ff; --ecd: #0f3d8c; position: absolute; left: 0; top: 0; will-change: transform; }
.rs .emote.theirs { --ec: #ff3c45; --ec2: #ffa0a4; --ecd: #8c1016; }
.rs .emote > * { position: absolute; }
.rs .emote-orb { left: -32px; top: -82px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; perspective: 300px;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 32%), radial-gradient(circle at 50% 60%, var(--ec) 0%, var(--ecd) 100%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 0 6px var(--ec), 0 0 22px 6px color-mix(in srgb, var(--ec) 60%, transparent), inset 0 -8px 14px rgba(0,0,0,.35);
  animation: emoPop .45s cubic-bezier(.2,1.6,.4,1) both; }
.rs .emote-glyph { font-size: 38px; line-height: 1; display: inline-block; transform-style: preserve-3d; filter: drop-shadow(0 4px 3px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.6)); }
.rs .emote-tail { left: -9px; top: -24px; width: 18px; height: 14px; background: var(--ec); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); animation: emoPop .45s cubic-bezier(.2,1.6,.4,1) both; }
.rs .emote-spark { width: 8px; height: 8px; border-radius: 50%; background: var(--ec2); box-shadow: 0 0 8px var(--ec); left: -4px; top: -54px; opacity: 0; animation: emoSpark 1s ease-out .1s both; }
.rs .emote-spark.s2 { animation-delay: .25s; --sx: -38px; --sy: -30px; } .rs .emote-spark.s1 { --sx: 40px; --sy: -26px; } .rs .emote-spark.s3 { animation-delay: .4s; --sx: 6px; --sy: -50px; width: 6px; height: 6px; }
.rs .emote.edge .emote-tail { display: none; }
/* A rider out of view: shown beside yours, tagged with their number and whether they are behind or ahead. */
.rs .emote-tag { display: none; left: 0; top: -104px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: var(--ecd); border: 1px solid var(--ec); color: #fff; font: 800 9px/1.3 system-ui; letter-spacing: .6px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: emoPop .45s cubic-bezier(.2,1.6,.4,1) both; }
.rs .emote.behind .emote-tag { display: block; }
.rs .emote.behind .emote-tail { display: none; }
.rs .emote.out .emote-tag { animation: emoOut .35s ease-in both; }
/* A rival not in the race on screen: at the top, their name under the bubble. */
.rs .emote.loose .emote-tag { top: -12px; font-size: 11px; }
.rs .emote.edge .emote-orb { transform: scale(.82); }
.rs .emote.out .emote-orb, .rs .emote.out .emote-tail { animation: emoOut .35s ease-in both; }
@keyframes emoPop { from { opacity: 0; transform: scale(.2) translateY(30px); } }
@keyframes emoOut { to { opacity: 0; transform: scale(.5) translateY(-24px); } }
@keyframes emoSpark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--sx, 30px), var(--sy, -30px)) scale(.3); } }
/* Each emote moves its own way (3D turns, bounces, shakes). */
.rs .emote-glyph.emo-bounce { animation: emoBounce .7s ease-in-out .3s infinite; }
.rs .emote-glyph.emo-spin { animation: emoSpin 1.6s linear .2s infinite; }
.rs .emote-glyph.emo-shake { animation: emoShake .5s ease-in-out .3s infinite; }
.rs .emote-glyph.emo-pulse { animation: emoPulse .8s ease-in-out .3s infinite; }
.rs .emote-glyph.emo-wave { transform-origin: 70% 80%; animation: emoWave .6s ease-in-out .3s infinite; }
.rs .emote-glyph.emo-dash { animation: emoDash .9s ease-in-out .3s infinite; }
@keyframes emoBounce { 0%,100% { transform: translateY(0) rotateX(0); } 40% { transform: translateY(-9px) rotateX(20deg); } 60% { transform: translateY(-9px) rotateX(-10deg); } }
@keyframes emoSpin { to { transform: rotateY(360deg); } }
@keyframes emoShake { 0%,100% { transform: rotateZ(0) rotateY(0); } 25% { transform: rotateZ(-14deg) rotateY(25deg); } 75% { transform: rotateZ(14deg) rotateY(-25deg); } }
@keyframes emoPulse { 0%,100% { transform: scale(1) rotateY(-15deg); } 50% { transform: scale(1.22) rotateY(15deg); } }
@keyframes emoWave { 0%,100% { transform: rotateZ(-18deg) rotateY(-10deg); } 50% { transform: rotateZ(18deg) rotateY(10deg); } }
@keyframes emoDash { 0%,100% { transform: translateX(-6px) rotateY(-25deg); } 50% { transform: translateX(8px) rotateY(25deg); } }
@media (orientation: portrait) {
  .rs .emote-orb { left: -27px; top: -72px; width: 54px; height: 54px; }
  .rs .emote-glyph { font-size: 31px; }
  .rs .emote-tail { top: -22px; }
}
@media (prefers-reduced-motion: reduce) { .rs .emote-glyph, .rs .emote-menu button span { animation: none; } }
/* Voice chat (js/ui/voiceBar.js) in the HUD: mic and listen beside the other tools. */
.rs .voice-bar { display: flex; gap: 8px; align-items: center; flex-direction: inherit; }
/* The empty slot that keeps the tools' row off a centred front camera (RaceScreen._layoutTools). */
.rs .tools-gap { display: none; }
/* Phone upright: the tools in one row across the top, in the band the screen's cutout leaves
   (or above everything when there is none), so none sits over the track; time and map below. */
@media (orientation: portrait) and (max-width: 600px) {
  .rs { --tools-h: 36px; --hud-top: max(calc(10px + env(safe-area-inset-top)), calc(var(--tools-h) + 12px)); }
  .rs #rs-tools { top: max(4px, calc((env(safe-area-inset-top) - var(--tools-h)) / 2)); left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); flex-direction: row; justify-content: space-between; align-items: center; gap: 4px; }
  .rs #rs-tools .tbtn.small { width: var(--tools-h); height: var(--tools-h); font-size: 14px; }
  .rs #rs-tools .tbtn.small svg { width: 18px; height: 18px; }
  .rs .tools-gap { display: block; flex: none; width: 40px; }
  .rs #rs-tl, .rs #rs-mini { top: var(--hud-top); }
  .rs #rs-board { top: calc(var(--hud-top) + min(34vw, 190px) + 10px); }
  .rs #rs-lights { top: calc(var(--hud-top) + 4px); }
  .rs .emote-menu { left: 0; top: calc(var(--tools-h) + 8px); }
}
.rs .voice-bar .tbtn.on { background: #2faa5ee6; color: #fff; }
.rs .voice-bar { position: relative; }
.rs .voice-volume.compact { display: flex; align-items: center; padding: 0 8px; height: 34px; border-radius: 17px; background: #0009; }
.rs .voice-volume.compact input { width: 84px; accent-color: #2faa5e; }
.rs .voice-volume.compact[hidden] { display: none; }
/* (a phone on its side: under the voice buttons, the row of tools has no room left before the standings) */
@media (orientation: landscape) and (max-height: 480px) { .rs .voice-volume.compact { position: absolute; left: 0; top: calc(100% + 6px); height: 28px; } .rs .voice-volume.compact input { width: 70px; } }
.rs .voice-talking { position: absolute; left: calc(100% + 8px); bottom: 12px; white-space: nowrap; font: 800 12px/1.2 system-ui; color: #9dffbd; text-shadow: 0 1px 4px #000; pointer-events: none; }