/* Roadster League game UI. Dark Tesla-site minimalism with Rocket League energy.
   Brand tokens come from /brand/brand.css when present; every var() below has a fallback.
   In-match HUD: the Rocket League layout (RL_BIBLE 2.2-2.10) scaled for the 480x480 card by --s. */
:root {
  --ui-font: var(--rl-font-ui, var(--font-ui, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  --ui-display: var(--rl-font-display, var(--font-display, var(--ui-font)));
  /* thin squared HUD numerals with slashed zeros (brand v2 --font-hud); until it lands: Bahnschrift / DIN */
  --hud-font: var(--font-hud, "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif);
  --ui-bg: #000;
  --ui-panel: rgba(12, 13, 16, 0.72);
  --ui-panel-solid: #0c0d10;
  --ui-line: rgba(255, 255, 255, 0.14);
  --ui-text: #f4f4f2;
  --ui-muted: rgba(244, 244, 242, 0.62);
  --ui-blue: var(--rl-blue, #2C9BFF);
  --ui-orange: var(--rl-orange, #FF8A1F);
  --ui-gold: var(--rl-gold, #D7AE6E);
  --ui-red: var(--rl-red, #E8212E);
  --ui-accent: var(--rl-accent, #ffffff);
  /* Rocket League HUD tones (RL_BIBLE 1.13): scoreboard boxes, feed / nameplate pills, moment gold */
  --hud-blue: #4a6dde;
  --hud-blue-lo: #3456cf;
  --hud-orange: #db7640;
  --hud-orange-lo: #c4602d;
  --pill-blue: #266ff7;
  --pill-orange: #ed832b;
  --moment-gold: var(--rl-moment-gold, #FFE48F);
  --scored-gold: #F9D15B;
  --ballcam: #F67D60;
  --replay-red: #F07A5F;
  --scoredby: #79A5DA;
  --glow-gold: 0 0 2px rgba(255, 210, 110, 0.95), 0 0 16px rgba(255, 166, 40, 0.55), 0 2px 8px rgba(0, 0, 0, 0.55);
  --u: min(1vw, 1vh);
  /* Two scales. --s: menus, title, results (the card = 1, capped at 1.35). --hs: the in-match HUD, which keeps growing
     on big screens like RL's (1.0 at 480, 1.4 at 720, 2.0 at 1080: the 1080p scoreboard was 259x54 against RL's
     354x82). main.js also sets both on .rl-root from the window size (robust where calc() cannot divide lengths) and
     raises their floor to 1 for touch players (phone text was 6.5-8.5 px). */
  --s: clamp(0.82, calc(min(100vw, 100vh) / 480px), 1.35);
  --hs: clamp(0.82, calc(0.2 + min(100vw, 100vh) / 600px), 2.6);
}
@media (pointer: coarse) {
  :root { --s: clamp(1, calc(min(100vw, 100vh) / 480px), 1.35); --hs: clamp(1, calc(0.2 + min(100vw, 100vh) / 600px), 2.6); }
}
/* Full screen the page never scrolls, zooms or pulls to refresh. Inside a frame (html.rl-framed: the X card) it must
   not trap the timeline (J3/J4): a swipe or the wheel over the card scrolls the timeline like any post, except while
   the player is playing (html.rl-engaged, set by main.js: a match screen, after the first input or while the touch
   controls show; cleared on menus / results / blur). The stick zone and the touch buttons never scroll. */
html, body { margin: 0; height: 100%; background: var(--ui-bg); overflow: hidden; overscroll-behavior: none; }
body { color: var(--ui-text); font-family: var(--ui-font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
html.rl-framed:not(.rl-engaged), html.rl-framed:not(.rl-engaged) body { overscroll-behavior: auto; touch-action: pan-x pan-y; }
html.rl-framed:not(.rl-engaged) #game { touch-action: pan-x pan-y; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.rl-root { position: absolute; inset: 0; pointer-events: none; font-size: calc(14px * var(--s)); }
.rl-root button, .rl-root input { font-family: inherit; }
.rl-root [hidden] { display: none !important; }
.rl-layer { position: absolute; inset: 0; pointer-events: none; display: none; }
.rl-root[data-screen="loading"] .rl-loading,
.rl-root[data-screen="title"] .rl-title,
.rl-root[data-screen="connecting"] .rl-connecting,
.rl-root[data-screen="warmup"] .rl-warmup,
.rl-root[data-screen="warmup"] .ui-hud,
.rl-root[data-screen="game"] .ui-hud,
.rl-root[data-screen="results"] .rl-results { display: block; }
.rl-root[data-screen="warmup"] .rl-score, .rl-root[data-screen="warmup"] .rl-board { display: none; }
/* the centre overlays live outside the HUD layer: never over menus, results or loading */
.rl-root:not([data-screen="game"]):not([data-screen="warmup"]) :is(.rl-countdown, .rl-goal, .rl-moment, .rl-demo) { display: none !important; }

/* ------------------------------------------------------------------ shared bits */
.ui-btn {
  pointer-events: auto; cursor: pointer; border: 0; border-radius: 4px; padding: 0.7em 1.3em; min-height: 40px;
  font-size: 0.86em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #111; background: rgba(244, 244, 242, 0.92);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.2s ease; white-space: nowrap;
}
.ui-btn:hover { background: #fff; }
.ui-btn:active { transform: scale(0.97); }
.ui-btn.ghost { color: var(--ui-text); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--ui-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ui-btn.ghost:hover { background: rgba(255, 255, 255, 0.16); }
.ui-btn.hot {
  color: #fff; font-weight: 800; font-style: italic; letter-spacing: 0.12em;
  background: linear-gradient(100deg, #ff3d2e 0%, #ff7a1a 48%, #ffb43a 100%);
  box-shadow: 0 6px 24px rgba(255, 90, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ui-btn.hot:hover { box-shadow: 0 8px 32px rgba(255, 110, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45); background: linear-gradient(100deg, #ff4d3a 0%, #ff8a2a 48%, #ffc04a 100%); }
.ui-btn:focus-visible, .ui-swatch:focus-visible, .ui-seg button:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 2px; }
/* text floors (RL_BIBLE 2.2, J2): never under 10 px, labels 11 px; sizes are absolute (calc * --s), not nested em */
.rl-link { pointer-events: auto; cursor: pointer; background: none; border: 0; color: var(--ui-muted); font-size: max(11px, calc(10.9px * var(--s))); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 6px; min-height: 36px; }
.rl-link:hover { color: var(--ui-text); }
.rl-label { font-size: max(11px, calc(9.8px * var(--s))); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ui-muted); }
.rl-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.ui-logo { display: flex; align-items: center; justify-content: center; }
.ui-logo img { display: block; max-width: 100%; max-height: 100%; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6)); }
.rl-wordmark { font-family: var(--ui-display); font-weight: 900; font-style: italic; letter-spacing: 0.02em; line-height: 0.86; text-align: center; text-transform: uppercase; }
.rl-wordmark b { display: block; font-size: 1em; background: linear-gradient(180deg, #ffffff 0%, #d9dde3 55%, #9aa3ad 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rl-wordmark span { display: block; font-size: 0.47em; letter-spacing: 0.42em; margin-top: 0.2em; padding-left: 0.42em; background: linear-gradient(90deg, #ff4b2b, #ff9d2e, #ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Tesla T (SPEC 0 logo policy): loading screen and title, once /brand/tesla-t.svg exists */
.rl-tesla { position: absolute; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.rl-tesla img { display: block; height: calc(20px * var(--s)); width: auto; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6)); }
.rl-tesla span { font-size: max(10px, calc(9.5px * var(--s))); font-weight: 600; letter-spacing: 0.55em; padding-left: 0.55em; color: rgba(255, 255, 255, 0.78); }
.rl-loading .rl-tesla { left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); flex-direction: column; gap: 7px; }
.rl-title .rl-tesla { left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); }
.rl-title .rl-tesla img { height: calc(17px * var(--s)); }
.rl-title .rl-tesla span { display: none; }

/* ------------------------------------------------------------------ loading */
.rl-loading { background: radial-gradient(120% 80% at 50% 110%, #2a0f22 0%, #0b0610 45%, #000 75%); pointer-events: auto; }
.rl-loading-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); width: min(76vw, 420px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rl-loading .ui-logo { width: 100%; height: min(46vh, 300px); font-size: min(11vw, 52px); }
.rl-progress { width: 72%; height: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; border-radius: 2px; }
.rl-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ff4b2b, #ffb43a); box-shadow: 0 0 12px #ff7a1a; transition: width 0.25s ease; }
.rl-loading-label { font-size: max(11px, calc(9.5px * var(--s))); letter-spacing: 0.3em; color: var(--ui-muted); text-transform: uppercase; }

/* ------------------------------------------------------------------ title / showroom */
.rl-title { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.78) 78%, rgba(0, 0, 0, 0.92) 100%); }
.rl-title-top { position: absolute; left: 0; right: 0; top: max(10px, env(safe-area-inset-top)); display: flex; justify-content: center; }
.rl-title-top .ui-logo { height: min(30vh, 210px); width: min(80vw, 420px); font-size: min(8.6vw, 7.4vh, 46px); }
.rl-title-bottom { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, 440px); display: flex; flex-direction: column; gap: calc(8px * var(--s)); align-items: stretch; pointer-events: auto; }
.rl-paint-name { text-align: center; font-size: max(11px, calc(11.5px * var(--s))); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; }
.rl-paint-name small { display: inline-block; margin-left: 0.6em; color: var(--ui-muted); font-weight: 500; letter-spacing: 0.16em; font-size: max(10px, calc(9.6px * var(--s))); }
.rl-swatches { display: flex; justify-content: center; gap: calc(7px * var(--s)); }
.ui-swatch { pointer-events: auto; cursor: pointer; width: calc(28px * var(--s)); height: calc(28px * var(--s)); border-radius: 50%; border: 0; padding: 0; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -6px 10px rgba(0, 0, 0, 0.35), inset 0 5px 8px rgba(255, 255, 255, 0.28); transition: transform 0.15s ease; }
.ui-swatch:hover { transform: scale(1.1); }
.ui-swatch.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #fff; }
/* a bigger tap target, same dot (J3: 23 px swatches on phones): the hit box reaches half way into the gaps */
.ui-swatch::before { content: ""; position: absolute; inset: -8px calc(-3.5px * var(--s)); border-radius: 8px; }
.rl-root.tmode .rl-swatches { gap: 12px; }
.rl-root.tmode .ui-swatch::before { inset: -8px -6px; }
.rl-namebox { display: flex; gap: 8px; }
.rl-name { pointer-events: auto; flex: 1; min-width: 0; height: 40px; box-sizing: border-box; border-radius: 4px; border: 0; padding: 0 12px; font-size: 16px; color: var(--ui-text); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--ui-line); outline: none; user-select: text; -webkit-user-select: text; }
.rl-name:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); }
.rl-name::placeholder { color: rgba(244, 244, 242, 0.42); }
.ui-seg { pointer-events: auto; display: flex; padding: 3px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-seg button { cursor: pointer; border: 0; border-radius: 4px; background: transparent; color: var(--ui-muted); padding: 0 12px; height: 34px; font-size: max(11px, calc(10.9px * var(--s))); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.ui-seg button small { font-weight: 500; opacity: 0.7; margin-left: 4px; font-size: max(10px, calc(9.1px * var(--s))); }
.ui-seg button.on { background: rgba(244, 244, 242, 0.92); color: #111; }
.rl-root.tmode .ui-seg button { position: relative; }
.rl-root.tmode .ui-seg button::before { content: ""; position: absolute; inset: -3px 0; } /* 40 px tall tap targets */
.rl-play { height: calc(50px * var(--s)); font-size: 1.25em; }
.rl-meta { display: flex; justify-content: space-between; align-items: center; color: var(--ui-muted); font-size: max(11px, calc(10.4px * var(--s))); letter-spacing: 0.1em; text-transform: uppercase; }
.rl-meta .rl-link { margin-right: -6px; }
.rl-online i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; margin-right: 6px; box-shadow: 0 0 8px #3ddc84; vertical-align: 1px; }

/* ------------------------------------------------------------------ connecting / warmup */
.rl-connecting, .rl-warmup { pointer-events: none; }
/* z-index: above the touch stick zone (.rl-touch, later in the DOM), which otherwise swallowed taps on
   PLAY A BOT NOW / CANCEL wherever the two overlap (landscape phones, small cards). */
.rl-center-card { z-index: 4; position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(88vw, 400px); text-align: center; pointer-events: auto; padding: 14px 16px 12px; border-radius: 8px; background: var(--ui-panel); box-shadow: inset 0 0 0 1px var(--ui-line), 0 12px 40px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rl-warmup .rl-center-card { top: calc(max(10px, env(safe-area-inset-top)) + 40px); padding: 10px 14px; }
.rl-search { font-size: max(12px, calc(12px * var(--s))); letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; }
.rl-search b { font-variant-numeric: tabular-nums; margin-left: 0.4em; color: var(--ui-gold); }
.rl-search-sub { margin: 4px 0 10px; font-size: max(11px, calc(10px * var(--s))); color: var(--ui-muted); letter-spacing: 0.06em; }
.rl-dots::after { content: ""; animation: rl-dots 1.2s steps(4) infinite; }
@keyframes rl-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.rl-spinner { width: 22px; height: 22px; margin: 4px auto 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); border-top-color: #fff; animation: rl-spin 0.8s linear infinite; }
@keyframes rl-spin { to { transform: rotate(360deg); } }

/* ================================================================== HUD (RL layout) */
.ui-hud { pointer-events: none; }

/* scoreboard (F1): team box | dark clock box | team box, your team on the left */
.rl-score { position: absolute; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; height: calc(40px * var(--hs)); pointer-events: auto; cursor: pointer; filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.45)); }
.rl-score-team { position: relative; width: calc(47px * var(--hs)); display: flex; align-items: center; justify-content: center; font-family: var(--hud-font); font-weight: 400; font-size: calc(26px * var(--hs)); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: calc(2px * var(--hs)) calc(2px * var(--hs)) 0 rgba(255, 255, 255, 0.28), 0 0 6px rgba(0, 0, 0, 0.25); }
.rl-score-team.t0 { background: linear-gradient(180deg, #5d84f2 0%, var(--hud-blue) 45%, var(--hud-blue-lo) 100%); box-shadow: 0 0 calc(14px * var(--hs)) rgba(70, 110, 240, 0.65); }
.rl-score-team.t1 { background: linear-gradient(180deg, #ef935a 0%, var(--hud-orange) 45%, var(--hud-orange-lo) 100%); box-shadow: 0 0 calc(14px * var(--hs)) rgba(230, 120, 60, 0.65); }
.rl-score-team.side-l { border-radius: calc(7px * var(--hs)) 0 0 calc(5px * var(--hs)); clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%); }
.rl-score-team.side-r { border-radius: 0 calc(7px * var(--hs)) calc(5px * var(--hs)) 0; clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%); }
.rl-score-team b { font-weight: inherit; }
/* RL draws plain zeros in the big scoreboard, the clock and the boost dial (slashed ones only in the tables):
   the brand's HUD face has them as ss01 */
.rl-score-team, .rl-clock, .rl-boost .num { font-feature-settings: 'ss01' 1; }
.rl-clock { position: relative; min-width: calc(98px * var(--hs)); display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #121a3b 0%, #191924 48%, #2a1a14 100%); font-family: var(--hud-font); font-weight: 300; font-size: calc(21px * var(--hs)); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: #fff; box-shadow: inset calc(2px * var(--hs)) 0 0 rgba(255, 255, 255, 0.85), inset calc(-2px * var(--hs)) 0 0 rgba(255, 255, 255, 0.85); }
.rl-clock::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: calc(-3px * var(--hs)); height: calc(3px * var(--hs)); background: #191924; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); }
.rl-clock .ot-word { font-size: 0.62em; letter-spacing: 0.12em; }
.rl-clock.mode-overtime { color: var(--moment-gold); }
.rl-clock.mode-zero span { animation: rl-pulse 0.7s ease-in-out infinite alternate; color: #ffd27a; }
.rl-clock.mode-low span { color: #fff2d0; }
@keyframes rl-pulse { from { opacity: 1; } to { opacity: 0.45; } }
.rl-score .bump b { animation: rl-bump 0.6s ease; display: inline-block; }
@keyframes rl-bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* stat popups (F4): under the scoreboard, a thin label over a faint icon, "+points" beneath */
.rl-popups { position: absolute; left: 50%; top: calc(max(6px, env(safe-area-inset-top)) + 58px * var(--hs)); transform: translateX(-50%); width: 80%; display: flex; justify-content: center; }
.rl-popup { position: relative; display: flex; flex-direction: column; align-items: center; animation: rl-pop-in 0.28s ease-out both; }
.rl-popup.out { animation: rl-pop-out 0.26s ease-in both; }
.rl-popup .p-icon { position: absolute; left: 50%; top: 50%; width: calc(46px * var(--hs)); height: calc(46px * var(--hs)); transform: translate(-50%, -58%); color: rgba(255, 140, 40, 0.42); filter: blur(0.3px) drop-shadow(0 0 8px rgba(255, 130, 30, 0.5)); }
.rl-popup .p-icon svg { width: 100%; height: 100%; }
.rl-popup .p-label { position: relative; font-family: var(--hud-font); font-weight: 400; font-size: calc(15px * var(--hs)); letter-spacing: 0.06em; color: #fff; white-space: nowrap; text-shadow: 0 0 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.7); }
.rl-popup .p-pts { position: relative; font-family: var(--hud-font); font-weight: 400; font-size: calc(13px * var(--hs)); color: var(--moment-gold); text-shadow: var(--glow-gold); margin-top: 1px; }
@keyframes rl-pop-in { 0% { opacity: 0; transform: translateY(6px) scale(0.92); } 100% { opacity: 1; transform: none; } }
@keyframes rl-pop-out { to { opacity: 0; transform: translateY(-6px); } }

/* feed (F5): top right, team pills + white icons with an orange glow */
.rl-feed { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(4px * var(--hs)); }
/* the feed never covers the scoreboard (192px * --s wide, centred): it keeps to the space right of it and long names
   ellipsize (a demolition row with two long names overlapped the orange score on the 480 card) */
.rl-feed { max-width: calc(50vw - 96px * var(--hs) - 16px); }
.rl-feedrow { max-width: 100%; }
.rl-feedrow .f-pill { min-width: 0; flex: 0 1 auto; }
.rl-feedrow { display: flex; align-items: center; height: calc(19px * var(--hs)); animation: rl-feed-in 0.25s ease-out both; transition: opacity 0.45s; }
.rl-feedrow.out { opacity: 0; }
@keyframes rl-feed-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.f-pill { height: calc(16px * var(--hs)); min-height: 16px; padding: 0 calc(9px * var(--hs)); border-radius: 999px; display: flex; align-items: center; font-weight: 800; font-size: max(10px, calc(10.5px * var(--hs))); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; white-space: nowrap; max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.f-pill.t0 { background: linear-gradient(90deg, #2a63e8, #4b84ff); }
.f-pill.t1 { background: linear-gradient(90deg, #df6d22, #f59a4a); }
.f-pill.me { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.4); }
.f-icon { width: calc(21px * var(--hs)); height: calc(21px * var(--hs)); color: #fff; margin: 0 calc(-3px * var(--hs)) 0 calc(2px * var(--hs)); filter: drop-shadow(0 0 2px rgba(255, 150, 40, 1)) drop-shadow(0 0 5px rgba(255, 120, 20, 0.85)); flex: none; }
.f-icon svg { width: 100%; height: 100%; display: block; }
.rl-feedrow.two .f-icon { margin: 0 calc(3px * var(--hs)); }
.rl-feedrow.hid { display: none; } /* at most 2 rows on small screens, across both places (hud.js _feedLayout) */
/* small screens without touch controls: a two-name row (demolition) sits just under the scoreboard line, where it can
   be 46vw wide; beside the scoreboard the 480 card cut both names to 4-5 letters (F5) */
.rl-feed.lo { top: calc(max(6px, env(safe-area-inset-top)) + 40px * var(--hs) + 6px); max-width: 46vw; }
.rl-feed.lo .f-pill { max-width: 10em; }

/* quick chat feed (top left) and pickers */
.rl-chatfeed { position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); max-width: min(46%, 420px, calc(210px * var(--hs))); display: none; flex-direction: column; gap: 1px; font-size: max(11px, calc(8.5px * var(--hs))); line-height: 1.3; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.65); z-index: 3; }
.rl-root[data-screen="game"] .rl-chatfeed, .rl-root[data-screen="warmup"] .rl-chatfeed, .rl-root[data-screen="results"] .rl-chatfeed { display: flex; }
.rl-root[data-screen="warmup"] .rl-chatfeed { top: calc(max(10px, env(safe-area-inset-top)) + 150px); }
.rl-chatline { color: #fff; white-space: normal; overflow-wrap: anywhere; overflow: hidden; transition: opacity 0.6s; animation: rl-feed-in 0.2s ease-out both; }
/* in a match without touch controls the chat shares the top row with the scoreboard (192px * --s, centred): it keeps
   to the space left of it and wraps (long lines ran under the blue score box on the 480 card) */
.rl-root:not(.touch)[data-screen="game"] .rl-chatfeed { max-width: min(46%, 420px, calc(50vw - 96px * var(--hs) - 18px)); }
.rl-chatline.old { opacity: 0; }
.rl-chatline .ts { color: rgba(255, 255, 255, 0.7); }
.rl-chatline b { font-weight: 800; }
.rl-chatline b.t0 { color: #7aa4ff; }
.rl-chatline b.t1 { color: #ffa45e; }
.rl-chatline.sys { color: #ffd77a; }
.rl-chatline:nth-last-child(n+7) { display: none; }
.rl-qc-picker { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 36%; padding: 8px 26px 9px 12px; background: linear-gradient(90deg, rgba(6, 12, 30, 0.86) 60%, rgba(6, 12, 30, 0)); font-size: max(11px, calc(9.5px * var(--hs))); line-height: 1.55; z-index: 4; animation: rl-feed-in 0.18s ease-out both; }
.rl-qc-picker .qc-kicker { color: var(--scoredby); font-size: max(11px, 0.82em); letter-spacing: 0.14em; font-weight: 700; }
.rl-qc-picker .qc-title { color: #fff; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 2px; }
.rl-qc-picker .qc-opt { color: #9cc0ff; }
.rl-qc-picker kbd { font-family: inherit; color: #fff; display: inline-block; width: 1.4em; font-weight: 700; }
.rl-qc-grid { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); pointer-events: auto; }
.qc-card { width: min(88vw, 340px); box-sizing: border-box; padding: 10px; border-radius: 10px; background: rgba(10, 12, 18, 0.94); box-shadow: inset 0 0 0 1px var(--ui-line), 0 16px 40px rgba(0, 0, 0, 0.5); }
.qc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--scoredby); }
.qc-x { pointer-events: auto; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }
.qc-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qc-cell { pointer-events: auto; cursor: pointer; min-height: 52px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; font-weight: 700; padding: 6px; }
.qc-cell.cat { background: linear-gradient(160deg, rgba(74, 109, 222, 0.55), rgba(30, 40, 90, 0.6)); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12.5px; font-weight: 800; }
.qc-cell:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.2); }
.rl-chatbtn { display: none; pointer-events: auto; cursor: pointer; position: absolute; left: calc(max(10px, env(safe-area-inset-left)) + 39px); top: max(10px, env(safe-area-inset-top)); width: 34px; height: 30px; border: 0; border-radius: 6px; background: rgba(6, 7, 10, 0.62); box-shadow: inset 0 0 0 1px var(--ui-line); align-items: center; justify-content: center; }
/* 44 px tap targets around the small touch buttons, same look (J3: they were 34x30) */
.rl-chatbtn::before, .rl-menubtn::before { content: ""; position: absolute; inset: -7px -3px -7px -5px; }
.rl-chatbtn::before { inset: -7px -6px -7px -2px; }

/* boost dial (F2): 230 degrees, 46 segments, orange -> yellow -> white tail, team disc, big digits */
.rl-boost { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: calc(132px * var(--hs)); height: calc(132px * var(--hs)); }
.rl-boost svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rl-boost .disc { fill: url(#rlDisc0); }
.rl-boost.t1 .disc { fill: url(#rlDisc1); }
.rl-boost .ring { fill: none; stroke: rgba(205, 215, 235, 0.42); stroke-width: 2.4; }
.rl-boost .ticks path { stroke: rgba(205, 215, 235, 0.5); stroke-width: 2.4; }
.rl-boost .seg { opacity: 0; }
.rl-boost .seg.on { opacity: 1; }
/* RL's dial digits are neon tubes: a hollow outline with a glow, over a darker offset copy (2.5D) */
.rl-boost .num { font-family: var(--hud-font); font-weight: 300; font-size: 86px; text-anchor: middle; dominant-baseline: central; letter-spacing: 1px; fill: rgba(70, 110, 255, 0.18); stroke: #7ea2ff; stroke-width: 2.6px; paint-order: stroke; filter: drop-shadow(0 0 4px rgba(90, 140, 255, 0.85)); }
.rl-boost .num.back { fill: none; stroke: #0a2a8c; stroke-width: 3px; opacity: 0.9; filter: none; }
.rl-boost.t1 .num { fill: rgba(255, 150, 50, 0.16); stroke: #ffc56a; filter: drop-shadow(0 0 4px rgba(255, 150, 50, 0.85)); }
.rl-boost.t1 .num.back { fill: none; stroke: #6a2c06; filter: none; }
.rl-boost.white .num:not(.back) { fill: rgba(255, 255, 255, 0.2); stroke: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)); }
.rl-boost.empty .num:not(.back) { opacity: 0.6; }
.rl-boost .cap { font-family: var(--ui-font); font-size: 18px; font-weight: 700; letter-spacing: 3px; text-anchor: middle; fill: rgba(150, 175, 230, 0.75); }
.rl-boost.t1 .cap { fill: rgba(255, 190, 140, 0.75); }
/* FLY readiness pip (F7): beside the dial, in the empty part of its ring */
.rl-fly { position: absolute; left: 88%; top: 63%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: max(11px, calc(9.5px * var(--hs))); font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px #000; transition: color 0.15s; }
.rl-fly i { width: calc(9px * var(--hs)); height: calc(9px * var(--hs)); transform: rotate(45deg); background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: background 0.15s, box-shadow 0.15s; }
.rl-fly.ready { color: #c9ecff; }
.rl-fly.ready i { background: #7fd0ff; box-shadow: 0 0 8px #7fd0ff, 0 0 2px #fff; }
.rl-fly.active, .rl-fly.hover { color: #fff; }
.rl-fly.active i, .rl-fly.hover i { background: #fff; box-shadow: 0 0 10px #bfe6ff; animation: rl-pulse 0.25s ease-in-out infinite alternate; }

/* ball cam indicator (F6): bottom left, only while ball cam is on */
.rl-cam { pointer-events: auto; cursor: pointer; position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); border: 0; padding: 0; background: none; display: none; flex-direction: column; align-items: flex-start; text-align: left; }
.rl-cam.on { display: flex; }
.rl-cam-main { display: flex; align-items: center; gap: calc(6px * var(--hs)); font-family: var(--hud-font); font-weight: 400; font-size: calc(16px * var(--hs)); letter-spacing: 0.04em; color: var(--ballcam); text-shadow: 0 0 9px rgba(246, 125, 96, 0.65), 0 1px 2px rgba(0, 0, 0, 0.6); }
.rl-cam-main i { width: calc(9px * var(--hs)); height: calc(9px * var(--hs)); border-radius: 50%; background: var(--ballcam); box-shadow: 0 0 8px var(--ballcam); }
.rl-cam small { margin: 1px 0 0 calc(15px * var(--hs)); font-size: max(10px, calc(10px * var(--hs))); font-weight: 600; letter-spacing: 0.05em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 5px rgba(0, 0, 0, 0.6); }
.rl-root.hint-off .rl-cam small { display: none; }

/* pilot HUD (SPEC 8): speed always, altitude while airborne, G-force on big screens only */
.rl-pilot { position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.rl-speed { display: flex; align-items: baseline; font-family: var(--hud-font); font-weight: 400; font-size: calc(30px * var(--hs)); line-height: 0.9; color: #ff9b3d; font-variant-numeric: tabular-nums; transform: skewX(-8deg); text-shadow: 0 0 10px rgba(255, 120, 30, 0.7), 0 2px 6px rgba(0, 0, 0, 0.6); }
.rl-speed .lead { opacity: 0.3; }
.rl-speed small { margin-left: 4px; font-family: var(--ui-font); font-size: max(11px, calc(10px * var(--hs))); font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 196, 150, 0.9); text-shadow: 0 1px 2px #000; }
.rl-speed.ss { color: #fff1d6; text-shadow: 0 0 12px rgba(255, 196, 110, 0.95), 0 2px 6px rgba(0, 0, 0, 0.6); }
.rl-alt { display: none; position: absolute; left: 100%; bottom: 2px; margin-left: calc(14px * var(--hs)); align-items: baseline; gap: 4px; white-space: nowrap; font-family: var(--hud-font); color: #cfe7ff; text-shadow: 0 0 8px rgba(80, 170, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.7); }
.rl-alt.on { display: flex; }
.rl-alt .a-label { font-family: var(--ui-font); font-size: max(11px, calc(9.5px * var(--hs))); font-weight: 800; letter-spacing: 0.14em; color: rgba(200, 225, 255, 0.75); }
.rl-alt b { font-weight: 400; font-size: calc(17px * var(--hs)); }
.rl-alt small { font-family: var(--ui-font); font-size: max(11px, calc(9.5px * var(--hs))); font-weight: 700; color: rgba(200, 225, 255, 0.75); }
.rl-gforce { display: none; position: absolute; right: 100%; bottom: -4px; margin-right: calc(16px * var(--hs)); width: calc(52px * var(--hs)); height: calc(52px * var(--hs)); flex-direction: column; align-items: center; justify-content: center; font-family: var(--hud-font); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.rl-gforce svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); }
.rl-gforce .g-track { fill: rgba(6, 8, 12, 0.45); stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; }
.rl-gforce .g-bar { fill: none; stroke: #ff9b3d; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 200; transition: stroke-dasharray 0.15s; filter: drop-shadow(0 0 3px rgba(255, 140, 40, 0.8)); }
.rl-gforce .g-label { position: relative; font-family: var(--ui-font); font-size: max(10px, calc(6.5px * var(--hs))); font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.rl-gforce b { position: relative; font-weight: 400; font-size: calc(15px * var(--hs)); line-height: 1; }
.rl-gforce small { position: relative; font-size: max(10px, calc(7px * var(--hs))); color: rgba(255, 255, 255, 0.6); }
@media (min-width: 720px) and (min-height: 500px) {
  .rl-gforce { display: flex; }
  .rl-root.hint-off .rl-cam small { display: block; } /* full screen keeps RL's permanent hint */
}

.rl-menubtn { pointer-events: auto; cursor: pointer; position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); width: 34px; height: 30px; border: 0; border-radius: 6px; background: rgba(6, 7, 10, 0.62); box-shadow: inset 0 0 0 1px var(--ui-line); color: #fff; display: flex; align-items: center; justify-content: center; }
.rl-net { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 34px); font-size: 0.62em; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* countdown (A2): thin pale-gold squared numerals, modest, centred at ~30% */
.rl-countdown { position: absolute; left: 0; right: 0; top: 29%; text-align: center; pointer-events: none; font-family: var(--hud-font); font-weight: 300; font-size: calc(50px * var(--hs)); line-height: 1; color: var(--moment-gold); text-shadow: var(--glow-gold); display: none; }
.rl-countdown.show { display: block; }
.rl-countdown span { position: relative; display: inline-block; animation: rl-count 1s ease-out both; }
/* a soft dark backing behind the thin numerals: on giga the 3-2-1 landed on the factory's giant white TESLA letters (A2) */
.rl-countdown span::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.3em; height: 1.6em; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 6, 16, 0.66), rgba(4, 6, 16, 0.42) 45%, rgba(4, 6, 16, 0.14) 75%, rgba(4, 6, 16, 0)); }
.rl-countdown span { text-shadow: 0 0 2px rgba(255, 210, 110, 0.95), 0 0 16px rgba(255, 166, 40, 0.55), 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.55); }
.rl-countdown.go span::before { width: 2.8em; }
.rl-countdown.go span { animation: rl-go 0.9s ease-out both; }
@keyframes rl-count { 0% { transform: scale(1.22); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 78% { opacity: 1; } 100% { transform: scale(0.96); opacity: 0; } }
@keyframes rl-go { 0% { transform: scale(1.3); opacity: 0; } 14% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }

/* NAME SCORED! (E3): thin gold capitals, at most 90% of the width */
.rl-goal { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; display: none; }
.rl-goal.show { display: block; }
.rl-scored { display: inline-block; white-space: nowrap; font-family: var(--hud-font); font-weight: 300; font-size: min(calc(32px * var(--hs)), calc(90vw / (var(--len, 14) * 0.66))); letter-spacing: 0.05em; line-height: 1.05; color: var(--scored-gold); text-shadow: 0 0 2px rgba(255, 214, 100, 0.95), 0 0 18px rgba(255, 170, 40, 0.55), 0 2px 10px rgba(0, 0, 0, 0.55); animation: rl-scored-in 0.4s ease-out both; }
@keyframes rl-scored-in { 0% { opacity: 0; letter-spacing: 0.22em; } 100% { opacity: 1; letter-spacing: 0.05em; } }

/* moments: time warnings (F11), OVERTIME (F10) */
.rl-moment { position: absolute; left: 0; right: 0; top: 23%; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
.rl-moment.show { opacity: 1; }
.rl-moment .m-word { font-family: var(--hud-font); font-weight: 300; font-size: min(calc(25px * var(--hs)), 6.4vw); letter-spacing: 0.08em; color: var(--moment-gold); text-shadow: var(--glow-gold); white-space: nowrap; }
.rl-moment .m-sub { margin-top: 4px; font-size: max(10px, calc(10.5px * var(--hs))); font-weight: 800; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 3px #000; }
.rl-moment.ot { top: 16%; }

/* DEMOLISHED + respawn countdown (local car) */
.rl-demo { position: absolute; left: 0; right: 0; top: 37%; text-align: center; pointer-events: none; animation: rl-pop-in 0.25s ease-out both; }
.rl-demo .d-word { font-family: var(--hud-font); font-weight: 300; font-size: calc(34px * var(--hs)); letter-spacing: 0.1em; color: #fff; text-shadow: 0 0 3px rgba(255, 200, 150, 0.95), 0 0 16px rgba(255, 90, 30, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6); }
.rl-demo .d-sub { margin-top: 5px; font-size: max(10px, calc(11px * var(--hs))); font-weight: 800; letter-spacing: 0.26em; color: #ffd5b8; text-shadow: 0 1px 3px #000; }

/* Tab scoreboard (F3): per team a big score + name, then SCORE GOALS ASSISTS SAVES SHOTS PING (four on small
   screens). RL has no panel: team-gradient rows that fade out to the right, a faint backing under the title only
   (the old dark panel + 88% rows covered 27% of the card, over the goal explosion: E9). */
.rl-board { --bc: max(44px, calc(42px * var(--hs))); position: absolute; left: 0; right: 0; margin: 0 auto; top: 39%; width: min(calc(100vw - 16px), calc(520px * var(--hs))); box-sizing: border-box; padding: 0 calc(8px * var(--hs)); pointer-events: none; font-variant-numeric: tabular-nums; animation: rl-pop-in 0.2s ease-out both; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.35); }
.rl-board .b-title { text-align: center; font-family: var(--hud-font); font-weight: 300; font-size: calc(14px * var(--hs)); letter-spacing: 0.22em; color: #fff; margin-bottom: calc(2px * var(--hs)); }
.rl-board .b-title span { display: inline-block; padding: calc(1px * var(--hs)) calc(26px * var(--hs)); background: linear-gradient(90deg, rgba(6, 8, 14, 0), rgba(6, 8, 14, 0.5) 22%, rgba(6, 8, 14, 0.5) 78%, rgba(6, 8, 14, 0)); }
.rl-board .b-team + .b-team { margin-top: calc(6px * var(--hs)); }
.rl-board .b-head { display: flex; align-items: flex-end; gap: calc(6px * var(--hs)); height: calc(24px * var(--hs)); }
.rl-board .b-score { font-family: var(--hud-font); font-weight: 300; font-size: calc(25px * var(--hs)); line-height: 0.95; }
.rl-board .b-name { font-family: var(--hud-font); font-weight: 300; font-size: calc(17px * var(--hs)); letter-spacing: 0.06em; line-height: 1; flex: 1; }
.rl-board .t0 .b-score, .rl-board .t0 .b-name { color: #a9c1ff; text-shadow: 0 0 10px rgba(70, 110, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6); }
.rl-board .t1 .b-score, .rl-board .t1 .b-name { color: #ffc69c; text-shadow: 0 0 10px rgba(255, 130, 50, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6); }
.rl-board .b-cols { display: grid; grid-template-columns: repeat(6, var(--bc)); font-size: max(11px, calc(8.5px * var(--hs))); font-weight: 800; letter-spacing: 0.04em; color: #fff; text-align: center; padding-bottom: 2px; }
.rl-board .b-cols i { font-style: normal; white-space: nowrap; }
.rl-board .sm, .rl-stats .sm { display: none; }
.rl-board .b-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(6, var(--bc)); align-items: center; height: calc(24px * var(--hs)); margin-top: 2px; font-family: var(--hud-font); font-weight: 400; font-size: max(12px, calc(13px * var(--hs))); color: #fff; text-align: center; }
.rl-board .t0 .b-row { background: linear-gradient(90deg, rgba(48, 92, 235, 0.85), rgba(48, 92, 235, 0.25)); }
.rl-board .t1 .b-row { background: linear-gradient(90deg, rgba(222, 110, 45, 0.85), rgba(222, 110, 45, 0.25)); }
.rl-board .b-row.me { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.rl-board .b-player { text-align: left; padding-left: calc(8px * var(--hs)); font-family: var(--ui-font); font-weight: 700; font-size: max(11px, calc(12px * var(--hs))); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 5px; }
.rl-board .b-player .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-board .b-mvp { width: 1em; height: 1em; color: #ffb347; display: inline-flex; flex: none; }
.rl-board .b-ping { display: flex; align-items: center; justify-content: center; gap: 3px; color: #8cf07c; font-size: 0.86em; }
.rl-board .b-ping s { text-decoration: none; color: rgba(255, 255, 255, 0.7); font-family: var(--ui-font); font-size: max(10px, 0.78em); font-weight: 800; letter-spacing: 0.08em; }
/* BOT: a badge (the 7-9 px text tags were unreadable on the card) */
em.bot { flex: none; font-style: normal; font-family: var(--ui-font); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.08em; color: #fff; padding: 2px 4px 2px 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); text-shadow: none; opacity: 0.9; }
.rl-board .bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 0.8em; }
.rl-board .bars u { display: block; width: 2px; background: currentColor; }
.rl-board .bars u:nth-child(1) { height: 30%; } .rl-board .bars u:nth-child(2) { height: 55%; } .rl-board .bars u:nth-child(3) { height: 80%; } .rl-board .bars u:nth-child(4) { height: 100%; }

/* goal replay strip (E7, RL_BIBLE 2.8): REPLAY bottom left, SCORED BY banner bottom centre, skip bottom right.
   The whole overlay is a skip target ("TAP TO SKIP": a tap anywhere votes); the touch menu button stays above it. */
.rl-replay { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; }
.rl-root.replaying .rl-menubtn { z-index: 1; }
/* REPLAY: RL's is medium weight and bright; the thin salmon one lost contrast over bright floors (E7) */
.rp-tag { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: calc(6px * var(--hs)); font-family: var(--hud-font); font-weight: 500; font-size: calc(19px * var(--hs)); letter-spacing: 0.06em; color: #ff8a70; text-shadow: 0 0 2px rgba(255, 140, 110, 0.9), 0 0 12px rgba(240, 90, 60, 0.85), 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.9); }
.rp-tag i { width: calc(8px * var(--hs)); height: calc(8px * var(--hs)); border-radius: 50%; background: var(--replay-red); box-shadow: 0 0 8px var(--replay-red); animation: rl-pulse 0.8s ease-in-out infinite alternate; }
.rp-banner { position: absolute; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 2px); transform: translateX(-50%); width: calc(262px * var(--hs)); max-width: 62vw; display: flex; flex-direction: column; align-items: center; }
.rp-kicker { font-size: max(11px, calc(10px * var(--hs))); font-weight: 700; letter-spacing: 0.16em; color: var(--scoredby); text-shadow: 0 1px 3px #000; margin-bottom: calc(3px * var(--hs)); }
.rp-plate { width: 100%; height: calc(30px * var(--hs)); display: flex; align-items: center; background: linear-gradient(90deg, rgba(8, 10, 18, 0.94) 0%, rgba(22, 24, 38, 0.9) 65%, rgba(22, 24, 38, 0.55) 100%); clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.rp-chev { width: calc(7px * var(--hs)); align-self: stretch; }
.rp-plate.t0 .rp-chev { background: linear-gradient(180deg, #6b93ff, #2f5fe0); box-shadow: 0 0 10px rgba(70, 110, 255, 0.8); }
.rp-plate.t1 .rp-chev { background: linear-gradient(180deg, #ffb070, #e2702c); box-shadow: 0 0 10px rgba(255, 130, 50, 0.8); }
.rp-plate b { margin-left: calc(10px * var(--hs)); font-family: var(--hud-font); font-weight: 400; font-size: calc(18px * var(--hs)); color: #fff; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.rp-row { display: flex; gap: calc(12px * var(--hs)); margin-top: calc(4px * var(--hs)); font-family: var(--hud-font); font-weight: 400; font-size: max(11px, calc(12.5px * var(--hs))); color: #d6e5ff; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.rp-row span { display: flex; align-items: center; gap: 4px; }
.rp-row svg { width: calc(14px * var(--hs)); height: calc(14px * var(--hs)); color: #6aa6ff; filter: drop-shadow(0 0 3px rgba(80, 150, 255, 0.7)); }
.rp-skip { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); border: 0; padding: 4px 0; background: none; cursor: pointer; pointer-events: auto; font-size: max(10px, calc(10.5px * var(--hs))); font-weight: 700; letter-spacing: 0.08em; color: #fff; text-shadow: 0 1px 3px #000; text-align: right; }
.rp-skip b { color: var(--replay-red); font-weight: 800; }
.rp-skip.voted span { color: rgba(255, 255, 255, 0.6); }
/* the replay view key, keyboard / pad screens at least 720 px wide (RL scorer view: PRESS SPACEBAR TO TOGGLE VIEW) */
.rp-skip .rp-camkey { display: none; margin-top: 3px; font-size: max(10px, calc(9px * var(--hs))); font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.72); }
@media (min-width: 720px) { .rl-root:not(.tmode) .rp-skip .rp-camkey:not([hidden]) { display: block; } }
.rl-root.replaying .rl-boost, .rl-root.replaying .rl-pilot, .rl-root.replaying .rl-cam, .rl-root.replaying .rl-chatbtn,
.rl-root.replaying .rl-countdown, .rl-root.replaying .rl-demo, .rl-root.replaying .rl-goal, .rl-root.replaying .rl-qc-picker,
.rl-root.replaying .rl-popups { display: none !important; }

/* the cut into / out of the replay */
.rl-wipe { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 246, 230, 0.92) 50%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%); background-size: 320% 100%; z-index: 7; }
.rl-wipe.go { animation: rl-wipe 0.5s ease-out; }
@keyframes rl-wipe { 0% { opacity: 1; background-position: 100% 0; } 60% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }

.rl-toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); padding: 8px 14px; border-radius: 4px; background: rgba(6, 7, 10, 0.86); box-shadow: inset 0 0 0 1px var(--ui-line); font-size: max(11px, calc(10.9px * var(--s))); letter-spacing: 0.06em; text-align: center; max-width: 86vw; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 5; }
.rl-toast.show { opacity: 1; }
/* CLICK TO PLAY: a strip just above the bottom HUD, not at the centre, where the ball sits at kickoff and in ball cam */
.rl-focus { position: absolute; left: 50%; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px * var(--hs)); transform: translateX(-50%); padding: 7px 16px; border-radius: 4px; background: rgba(6, 7, 10, 0.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); font-size: max(11px, calc(11px * var(--hs))); font-weight: 700; letter-spacing: 0.16em; white-space: nowrap; pointer-events: auto; cursor: pointer; display: none; z-index: 3; }
.rl-root.needs-focus[data-screen="game"] .rl-focus, .rl-root.needs-focus[data-screen="warmup"] .rl-focus { display: block; }

/* BACK ONLINE · FIND A MATCH: after an offline fallback, once the server answers again (a tap / click goes online) */
.rl-backonline { position: absolute; left: 50%; top: calc(max(6px, env(safe-area-inset-top)) + 40px * var(--hs) + 6px); transform: translateX(-50%); z-index: 3; pointer-events: auto; cursor: pointer; border: 0; border-radius: 999px; padding: 4px 12px; white-space: nowrap; font-family: var(--ui-font); font-size: max(11px, calc(10px * var(--hs))); letter-spacing: 0.1em; color: #fff; background: linear-gradient(90deg, rgba(20, 120, 70, 0.9), rgba(30, 160, 95, 0.9)); box-shadow: 0 0 12px rgba(60, 220, 132, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.rl-backonline b { font-weight: 800; }
.rl-backonline span { font-weight: 600; opacity: 0.9; }
.rl-backonline::before { content: ""; position: absolute; inset: -8px -4px; }
.rl-root.back-online .rl-popups { margin-top: calc(26px * var(--hs)); }
.rl-root.touch.back-online .rl-feed { margin-top: calc(26px * var(--hs)); }
.rl-root.replaying .rl-backonline { display: none; }

/* ================================================================== results: the RL post-match screen */
.rl-results { pointer-events: auto; background: linear-gradient(180deg, rgba(4, 5, 8, 0.12) 0%, rgba(4, 5, 8, 0.5) 30%, rgba(4, 5, 8, 0.86) 58%, rgba(4, 5, 8, 0.94) 100%); overflow-y: auto; }
.rl-results-inner { position: relative; margin: 0 auto; width: min(94vw, 540px); min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: calc(6px * var(--s)); padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); }
.rl-winner { text-align: center; --wc: #9cb8ff; --wg: rgba(70, 110, 255, 0.85); }
.rl-results.w1 .rl-winner { --wc: #ffd0a8; --wg: rgba(255, 130, 40, 0.9); }
.rl-winner .w-kicker { font-family: var(--hud-font); font-weight: 400; font-size: calc(15px * var(--s)); letter-spacing: 0.14em; color: #ffb27a; text-shadow: 0 0 10px rgba(255, 140, 60, 0.7); margin-bottom: calc(2px * var(--s)); }
.rl-results.w0 .rl-winner .w-kicker { color: #93b6ff; text-shadow: 0 0 10px rgba(70, 120, 255, 0.8); } /* RL: the kicker takes the winner's colour */
.rl-result-word { font-family: var(--hud-font); font-weight: 200; font-size: min(13.5vmin, 78px); letter-spacing: 0.08em; line-height: 1; color: var(--wc); text-shadow: 0 0 2px rgba(255, 255, 255, 0.85), 0 0 18px var(--wg), 0 0 42px var(--wg); animation: rl-win-in 0.7s ease-out both; }
@keyframes rl-win-in { 0% { opacity: 0; letter-spacing: 0.3em; } 100% { opacity: 1; letter-spacing: 0.08em; } }
.rl-result-score { display: flex; justify-content: center; align-items: center; gap: 14px; font-family: var(--hud-font); font-weight: 300; font-size: calc(30px * var(--s)); line-height: 1; font-variant-numeric: tabular-nums; }
.rl-result-score .b { color: #a9c1ff; text-shadow: 0 0 10px rgba(70, 110, 255, 0.7); } .rl-result-score .o { color: #ffc69c; text-shadow: 0 0 10px rgba(255, 130, 50, 0.7); } .rl-result-score .d { color: var(--ui-muted); font-size: 0.6em; }
.rl-result-ot { text-align: center; font-size: max(11px, calc(9.5px * var(--s))); font-weight: 700; letter-spacing: 0.2em; color: var(--moment-gold); }
.rl-mvp { text-align: center; font-size: max(11px, calc(10px * var(--s))); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ui-muted); }
.rl-mvp b { color: #ffb347; font-weight: 800; }
.rl-mvp:empty { display: none; }
.rl-stats { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: calc(10.9px * var(--s)); font-variant-numeric: tabular-nums; }
.rl-stats th { font-weight: 700; font-size: max(11px, calc(9px * var(--s))); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; padding: 0 4px; text-align: center; }
.rl-stats th:first-child, .rl-stats td:first-child { text-align: left; }
.rl-stats td { padding: calc(4px * var(--s)) 4px; text-align: center; font-family: var(--hud-font); font-weight: 400; font-size: max(12px, calc(12.2px * var(--s))); }
.rl-stats tr.t0 td { background: linear-gradient(90deg, rgba(48, 92, 235, 0.82), rgba(30, 62, 180, 0.55)); }
.rl-stats tr.t1 td { background: linear-gradient(90deg, rgba(222, 110, 45, 0.82), rgba(160, 70, 25, 0.55)); }
.rl-stats tr td:first-child { border-radius: 3px 0 0 3px; padding-left: calc(8px * var(--s)); max-width: 13em; }
.rl-stats tr td:last-child { border-radius: 0 3px 3px 0; }
.rl-stats tr.me td { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -1.5px 0 rgba(255, 255, 255, 0.55); }
.rl-stats tr.me td:first-child { box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -1.5px 0 rgba(255, 255, 255, 0.55); }
.rl-stats td.sc { font-weight: 500; }
.rl-stats .pl { display: flex; align-items: center; gap: 6px; font-family: var(--ui-font); font-weight: 700; font-size: max(11.5px, calc(11.2px * var(--s))); white-space: nowrap; }
.rl-stats .pl .nm { overflow: hidden; text-overflow: ellipsis; }
.rl-mvp-emblem { width: calc(26px * var(--s)); height: calc(26px * var(--s)); flex: none; color: #ff9a3c; filter: drop-shadow(0 0 4px rgba(255, 130, 30, 0.85)); margin: -4px 0; }
/* the emblem's own MVP lettering is ~4 px at this size: an MVP badge after the name says it instead */
.rl-stats .rl-mvp-emblem text { display: none; }
em.mvpb { flex: none; font-style: normal; font-family: var(--ui-font); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.08em; color: #2a1606; padding: 2px 4px 2px 5px; border-radius: 3px; background: linear-gradient(180deg, #ffc46a, #ff9a3c); box-shadow: 0 0 6px rgba(255, 140, 40, 0.6); }
.rl-stats .accs { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.rl-stats .acc { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 1px 6px 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 205, 100, 0.75); font-family: var(--hud-font); font-weight: 400; font-size: max(10.5px, calc(10px * var(--s))); letter-spacing: 0.08em; color: #ffd36b; line-height: 1.15; }
.rl-stats .acc small { font-family: var(--ui-font); font-size: max(10px, calc(8.2px * var(--s))); font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); }
.rl-leaving { text-align: center; font-family: var(--hud-font); font-weight: 400; font-size: calc(13px * var(--s)); letter-spacing: 0.12em; color: var(--moment-gold); text-shadow: var(--glow-gold); }
.rl-leaving b { font-weight: 400; display: inline-block; min-width: 1.4em; }
.rl-results .rl-row .ui-btn { flex: 1; }
.rl-postchat { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.rl-postchat button { position: relative; pointer-events: auto; cursor: pointer; border: 0; border-radius: 999px; padding: 5px 10px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; font-size: max(10.5px, 0.72em); font-weight: 700; letter-spacing: 0.03em; }
.rl-postchat button:hover { background: rgba(255, 255, 255, 0.16); }
.rl-postchat kbd { font-family: inherit; color: var(--scoredby); margin-right: 5px; }
/* touch: 40+ px tap targets for the chips and MAIN MENU, same look (J3: 24-25 px) */
.rl-root.tmode .rl-postchat { gap: 8px; }
.rl-root.tmode .rl-postchat button { padding: 10px 12px; }
.rl-root.tmode .rl-postchat button::before { content: ""; position: absolute; inset: -4px -2px; }
.rl-root.tmode .rl-link { min-height: 44px; padding: 0 12px; }

/* ------------------------------------------------------------------ menu */
.rl-menu { position: absolute; inset: 0; pointer-events: auto; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; z-index: 5; }
.rl-root.menu-open .rl-menu { display: block; }
/* The card never scrolls as a whole: on short screens (landscape phones, small cards) RESUME / LEAVE fell
   below the fold of a scroll box with no visible scrollbar. Only the controls help shrinks and scrolls. */
.rl-menu-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 380px); max-height: 94%; overflow: hidden; box-sizing: border-box; padding: 14px 16px; border-radius: 8px; background: rgba(12, 13, 16, 0.94); box-shadow: inset 0 0 0 1px var(--ui-line), 0 20px 60px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 10px; }
.rl-menu-card > * { flex-shrink: 0; }
.rl-menu-card > .rl-help { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; align-content: start; }
.rl-menu-card h2 { margin: 0; font-family: var(--ui-display); font-style: italic; font-weight: 900; font-size: 1.3em; letter-spacing: 0.06em; }
.rl-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rl-setting .ui-seg button { height: 28px; padding: 0 9px; font-size: max(11px, calc(9.8px * var(--s))); }
.rl-root.tmode .rl-setting .ui-seg button { height: 36px; }
.rl-range { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 52%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); outline: none; }
.rl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer; }
.rl-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; cursor: pointer; border: 0; }
.rl-help { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: max(11px, calc(10.4px * var(--s))); color: var(--ui-muted); }
.rl-help b { color: var(--ui-text); font-weight: 700; letter-spacing: 0.04em; }
.rl-help h4 { grid-column: 1 / -1; margin: 6px 0 0; font-size: max(11px, calc(9px * var(--s))); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ui-text); }
.rl-menu .rl-row .ui-btn { flex: 1; }

/* ------------------------------------------------------------------ touch controls */
.rl-touch { position: absolute; inset: 0; pointer-events: none; }
.rl-touch-zone { position: absolute; left: 0; top: 18%; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
.rl-stick { position: absolute; left: max(84px, 26%); top: 68%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18); opacity: 0.55; transition: opacity 0.15s; }
.rl-stick.active { opacity: 1; }
.rl-stick-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.9), rgba(220, 225, 232, 0.55)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
/* the hint sits above the stick: under it, it ran into BALL CAM on landscape phones (F6) */
.rl-stick-hint { position: absolute; left: max(84px, 26%); top: calc(68% - 76px); transform: translateX(-50%); font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.45); white-space: nowrap; transition: opacity 0.4s; }
.rl-stick-hint.gone, .rl-root.hint-off .rl-stick-hint, .rl-root.board-open .rl-stick-hint { opacity: 0; } /* after the first stick touch, or with the other hints */
.rl-tbtn { pointer-events: auto; position: absolute; border: 0; border-radius: 50%; color: #fff; font-weight: 900; font-style: italic; letter-spacing: 0.08em; touch-action: none; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; }
.rl-tbtn-fly { right: calc(max(14px, env(safe-area-inset-right)) + 4px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 8px); width: 86px; height: 86px; font-size: 17px; background: radial-gradient(circle at 50% 35%, rgba(127, 208, 255, 0.55), rgba(44, 155, 255, 0.28)); box-shadow: inset 0 0 0 2px rgba(160, 220, 255, 0.7), 0 0 18px rgba(44, 155, 255, 0.35); }
.rl-tbtn-thrust { right: calc(max(14px, env(safe-area-inset-right)) + 100px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 6px); width: 66px; height: 66px; font-size: 11.5px; background: radial-gradient(circle at 50% 35%, rgba(255, 170, 80, 0.55), rgba(255, 110, 30, 0.28)); box-shadow: inset 0 0 0 2px rgba(255, 190, 120, 0.7), 0 0 16px rgba(255, 120, 40, 0.3); }
.rl-tbtn-cam { right: max(10px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); width: 40px; height: 40px; background: rgba(6, 7, 10, 0.6); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.rl-tbtn.on { transform: scale(0.94); filter: brightness(1.5); }
.rl-root.fly-wait .rl-tbtn-fly { opacity: 0.45; }
/* HUD when touch controls are up: the dial sits above FLY, the FLY pip is the button itself, BALL CAM is a label.
   The speed readout moves from the bottom centre (THRUST covered it by 20-25 x 6 px on 358-390 px phones) to just
   above the dial, ALT to its left (F6 / F8 / J3); the G-force gauge stays off. */
.rl-root.touch { --dial-b: calc(max(18px, env(safe-area-inset-bottom)) + 100px); --dial-w: calc(108px * var(--hs)); }
.rl-root.touch .rl-boost { right: calc(max(14px, env(safe-area-inset-right)) + 2px); bottom: var(--dial-b); width: var(--dial-w); height: var(--dial-w); }
.rl-root.touch .rl-pilot { left: auto; right: calc(max(14px, env(safe-area-inset-right)) + 4px); bottom: calc(var(--dial-b) + var(--dial-w) + 4px); transform: none; }
.rl-root.touch .rl-speed { font-size: calc(26px * var(--hs)); }
.rl-root.touch .rl-gforce { display: none !important; }
/* the readout above the dial makes way for the centre moments (NAME SCORED!, DEMOLISHED, the Tab board) */
.rl-root.touch.goal-on .rl-pilot, .rl-root.touch.demo-on .rl-pilot, .rl-root.touch.board-open .rl-pilot { opacity: 0; }
/* with touch controls the Tab board covers the dial (the 358 card): the dial makes way while it is open */
.rl-root.touch.board-open .rl-boost { opacity: 0; }
.rl-root.touch .rl-boost { transition: opacity 0.2s; }
.rl-root.touch .rl-pilot { transition: opacity 0.2s; }
.rl-root.touch .rl-boost .cap { display: none; }
.rl-root.touch .rl-fly { display: none; }
.rl-root.touch .rl-cam { pointer-events: none; }
.rl-root.touch .rl-chatbtn { display: flex; }
.rl-root.touch .rl-chatfeed { top: calc(max(10px, env(safe-area-inset-top)) + 38px); }
.rl-root.touch .rl-feed { top: calc(max(8px, env(safe-area-inset-top)) + 46px); max-width: 48vw; }
.rl-root.touch .rl-alt { left: auto; right: 100%; bottom: 1px; margin: 0 calc(10px * var(--hs)) 0 0; transform: none; }
.rl-root:not(.touch) .rl-menubtn { display: none; }
.rl-root.touch .rl-net { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 44px); }

/* small squares (the 480x480 X card) and phones: RL_BIBLE 2.2 (feed <= 2 rows, chat <= 3 lines, no timestamps) */
@media (max-width: 560px), (max-height: 560px) {
  .rl-chatline:nth-last-child(n+4) { display: none; }
  .rl-chatline .ts { display: none; }
  .rl-boost .cap { display: none; }
  .rl-board .lg, .rl-stats .lg { display: none; }
  .rl-board .sm, .rl-stats .sm { display: inline; }
  .rp-banner { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 20px * var(--hs)); width: calc(232px * var(--hs)); }
  .rp-plate { height: calc(24px * var(--hs)); }
  .rp-plate b { font-size: calc(15px * var(--hs)); }
  .rp-kicker { margin-bottom: 1px; font-size: 11px; }
  .rp-row { margin-top: 2px; font-size: 11px; }
  .rp-tag { bottom: max(8px, env(safe-area-inset-bottom)); font-size: calc(16px * var(--hs)); }
  .rp-skip { bottom: max(6px, env(safe-area-inset-bottom)); }
  /* the Tab board keeps four columns on the card (RL_BIBLE 2.2: SCORE GOALS SAVES SHOTS) */
  .rl-board .c-ast, .rl-board .c-ping { display: none; }
  .rl-board .b-cols { grid-template-columns: repeat(4, var(--bc)); }
  .rl-board .b-row { grid-template-columns: minmax(0, 1fr) repeat(4, var(--bc)); }
  /* ALT above the speed readout: beside it, it crowded the start of the dial on the 480 card */
  .rl-root:not(.touch) .rl-alt { left: 50%; bottom: 100%; margin: 0 0 3px; transform: translateX(-50%); }
}
/* narrow results (phones, the 358-390 px card): SCORE GOALS SAVES only, one accolade per row */
@media (max-width: 400px) {
  .rl-stats .c-ast, .rl-stats .c-shots { display: none; }
  .rl-stats .acc + .acc { display: none; }
}
/* short screens (the card, landscape phones): accolades inline after the name, no MVP line (the emblem says it) */
@media (max-height: 560px) {
  .rl-stats td:first-child { white-space: nowrap; overflow: hidden; }
  .rl-stats .pl { display: inline-flex; vertical-align: middle; }
  .rl-stats .accs { display: inline-flex; vertical-align: middle; margin: 0 0 0 4px; flex-wrap: nowrap; }
  .rl-stats .acc small { display: none; }
  .rl-stats .acc { padding: 1px 5px; }
  .rl-mvp { display: none; }
  .rl-result-word { font-size: min(12.5vmin, 72px); }
  .rl-results-inner { gap: calc(5px * var(--s)); }
}
@media (max-height: 520px) {
  .rl-title-top .ui-logo { height: 30vh; }
  .rl-title-bottom { gap: 6px; }
  .rl-name, .ui-seg button { height: 34px; }
  .rl-name { height: 36px; }
  .rl-play { height: 44px; }
  .rl-stick { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .rl-tbtn-fly { width: 74px; height: 74px; }
  .rl-tbtn-thrust { width: 58px; height: 58px; right: calc(max(14px, env(safe-area-inset-right)) + 88px); }
  .rl-root.touch { --dial-b: calc(max(18px, env(safe-area-inset-bottom)) + 86px); --dial-w: calc(96px * var(--hs)); }
  .rl-root.touch .rl-demo { top: 30%; } /* clear of the dial on short touch screens */
  .rl-results .ui-btn { min-height: 36px; padding: 0.5em 1em; }
}
@media (max-width: 360px) { .ui-seg button small { display: none; } }
@media (prefers-reduced-motion: reduce) { .rl-scored, .rl-countdown span, .rl-result-word, .rl-wipe.go { animation: none; } }