/* Lenktynės as a pixel game (docs/plan-lenktynes-stilius.md, etapas 1; mockups data/maketai/lenktynes-stilius/): the race
   page only — every rule is under html.px, set in lenktynes.html, so no other page changes (S7). Sand plates (S17 A),
   day and night by the clock or the viewer's pick (S9, lenktynes-tema.js), our own pixel font (S3, S8,
   tools/sriftas/build.py) for every word.

   The font's pixel is 1/10 of its size: 20px draws each pixel 2 × 2, 30px 3 × 3. Any other size, a letter-spacing or a
   line height that puts the baseline between pixels blurs the letters — so sizes are set here, not in the rules below
   app.css: everything 20px on a 28px line, the few big numbers 30px on 36px, inherited by what is inside them. The
   !important is this layer's on purpose: it is the one way past app.css's many sized rules without copying them. */

@font-face {
  font-family: 'Dragunai Pixel';
  src: url('/fonts/dragunai-pixel.woff2') format('woff2');
  font-display: block;
}

html.px[data-theme="diena"] {
  color-scheme: light;
  --ground: #FFF6DE;             /* text on the accent; the pinned menu's ground; an input */
  --surface: #F7E7C4; --surface-2: #EAD3A2; --line: #6B4226; --line-soft: #D2AE78;
  --text: #3B2414; --text-2: #7A5A3A; --muted: #8A6A48;
  --accent: #0A7A3E; --warn: #C8252C; --coin: #B8860B;
  --px-hi: #FFF6DE; --px-shade: #D2AE78; --px-acc-hi: #2FA864; --px-acc-sh: #05532A;
  --px-gold: #D99A12; --px-off: #C4A97C; --px-good: #1F7A3A; --px-dim: rgba(59, 36, 20, 0.45);
  --px-win: #FFD65C; --px-win-hi: #FFEFA8; --px-win-sh: #C99A1E; --px-win-star: #8A5A00; --px-win-off: #E8B84A;
  --px-flash: #FFFDF2; --px-flash-hi: #FFFFFF;
  --px-sky: linear-gradient(#BFE3EC 0 90px, #C5E2E5 90px 180px, #CBE2DF 180px 270px, #D0E1D8 270px 360px,
    #D6E0D1 360px 450px, #DCE0CB 450px 540px, #E2DFC4 540px 630px, #E7DEBD 630px 720px, #EDDEB7 720px 810px,
    #F3DDB0 810px 900px);
  --px-ground: #F3DDB0;
  --px-stars: none;
}
html.px[data-theme="naktis"] {
  color-scheme: dark;
  --ground: #1B1E3C;
  --surface: #262B52; --surface-2: #1C2044; --line: #07091A; --line-soft: #151935;
  --text: #F3E6C4; --text-2: #BFC3E0; --muted: #9AA0C8;
  --accent: #E8892E; --warn: #E0574E; --coin: #F2C230;
  --px-hi: #3D4682; --px-shade: #151935; --px-acc-hi: #F7B267; --px-acc-sh: #9C5414;
  --px-gold: #F2C230; --px-off: #4A5080; --px-good: #7BC96F; --px-dim: rgba(7, 9, 26, 0.72);
  /* the winner's plate pale: the 4th lane's chip is gold itself (#F0B429) and vanished on --px-gold */
  --px-win: #FFE7A0; --px-win-hi: #FFF6D6; --px-win-sh: #D9A830; --px-win-star: #C07C00; --px-win-off: #E2C27A;
  --px-flash: #3D4682; --px-flash-hi: #5A64A8;
  --px-sky: linear-gradient(#0E122C 0 90px, #111632 90px 180px, #141938 180px 270px, #171D3D 270px 360px,
    #1A2143 360px 450px, #1E2449 450px 540px, #21284F 540px 630px, #242C54 630px 720px, #272F5A 720px 810px,
    #2A3360 810px 900px);
  --px-ground: #2A3360;
  --px-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='140'%3E%3Cg fill='%23E9E4C8'%3E%3Crect x='12' y='20' width='2' height='2'/%3E%3Crect x='97' y='61' width='2' height='2'/%3E%3Crect x='151' y='14' width='2' height='2'/%3E%3Crect x='44' y='103' width='2' height='2'/%3E%3C/g%3E%3Crect x='130' y='96' width='2' height='2' fill='%238C93C8'/%3E%3C/svg%3E");
}

/* The sky in whole bands, as the scene's — then the ground's colour all the way down. */
html.px body {
  background-color: var(--px-ground);
  background-image: var(--px-stars), var(--px-sky);
  background-size: 180px 140px, 100% 900px;
  background-repeat: repeat, no-repeat;
  font-size: 20px; line-height: 28px;
}

/* ── The font ─────────────────────────────────────────────────────────────────────────────────────────────────── */
html.px body, html.px body * {
  font-family: 'Dragunai Pixel', monospace !important;
  font-weight: 400 !important; font-style: normal !important; font-synthesis: none;
  letter-spacing: 0 !important; -webkit-font-smoothing: none;
}
html.px body * { font-size: inherit !important; line-height: inherit !important; }
html.px :is(h1, .big, .stat, .rc-unit, .rc-h2, .rc-sheet-title, .rc-bbq-arrow, .rc-bbq-q) {
  font-size: 30px !important; line-height: 36px !important;
}
html.px .rc-pill { line-height: 20px !important; padding: 2px 6px; }
html.px .rc-stars { white-space: nowrap; }
html.px .rc-stars .on { color: var(--px-gold); }
html.px .rc-stars { color: var(--px-off); }

/* ── Plates: a 2 px outline with stepped corners, lit top-left, shaded bottom-right ────────────────────────────── */
/* :where() keeps these two at html.px + one class (0,1,1): enough over app.css's own one-class rules, and every
   override below (two classes) wins without a fight — an :is() here took its weight from `.tr-tabs button` and beat
   the lanes' coloured tops. */
html.px :where(.card, .rc-sheet, .rc-gain, .rc-title, .rc-toast, .tr-tabs button, .rc-theme, .rc-pick,
    .rc-stake, .rc-bet-go, .rc-act, .rc-buy, .rc-seg, .rc-sheet-cancel, .rc-sheet-ok, .rc-pick-tile, .rc-sheet-input,
    .rc-portrait-box) {
  border: 2px solid var(--line); border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-shade);
  clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px),
    0 2px, 2px 2px);
}
html.px :where(.card, .rc-gain, .rc-sheet, .rc-title, .tr-tabs button, .rc-theme, .rc-pick,
    .rc-stake, .rc-act, .rc-seg, .rc-sheet-cancel) {
  background: var(--surface); color: var(--text);
}
/* Chosen, or the main action: the accent, its own light and shade. Two rules — the chosen ones carry an attribute,
   and in one list it would lift the main actions over their own :disabled below. */
html.px :is(.tr-tabs button[aria-selected="true"], .rc-stake[aria-pressed="true"], .rc-seg[aria-pressed="true"],
    .rc-pick-tile[aria-pressed="true"]),
html.px :is(.rc-bet-go, .rc-buy, .rc-sheet-ok) {
  background: var(--accent); color: var(--ground); border-color: var(--line);
  box-shadow: inset 2px 2px 0 var(--px-acc-hi), inset -2px -2px 0 var(--px-acc-sh);
}
html.px .rc-sheet-ok.danger { background: var(--warn); }
/* The picked camel: sunk in, the accent round it — not filled, its name stays readable. */
html.px .rc-pick[aria-pressed="true"] {
  background: var(--surface-2); border-color: var(--accent);
  box-shadow: inset 2px 2px 0 var(--px-shade), inset -2px -2px 0 var(--px-hi);
}
html.px :is(button, .rc-pick):active:not(:disabled) {
  box-shadow: inset 2px 2px 0 var(--px-shade), inset -2px -2px 0 var(--px-hi);
}
html.px :is(.rc-bet-go, .rc-buy, .rc-act, .rc-sheet-ok, .rc-stake, .rc-pick-tile):disabled {
  background: var(--surface-2); color: var(--px-off); box-shadow: inset 2px 2px 0 var(--px-shade);
}

/* ── The tabs and the theme button: five equal tabs across, the sun or the moon beside them ─────────────────────── */
html.px .rc-tabbar { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 6px; margin: 0 0 14px; }
html.px .rc-tabbar .tr-tabs.mu-tabs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0;
  background: none; border: none; border-radius: 0;
}
html.px .tr-tabs button { min-height: 44px; padding: 0 6px; text-transform: uppercase; }
html.px .rc-theme {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; cursor: pointer;
  color: var(--px-gold);
}
html.px[data-theme="diena"] .rc-moon, html.px[data-theme="naktis"] .rc-sun { display: none; }

/* ── The track tab ────────────────────────────────────────────────────────────────────────────────────────────── */
html.px .rc-scene { background: var(--surface-2); }
/* The bet bar a plate of its own under the scene, as the mockup drew them. */
html.px .rc-scene:has(+ .rc-betbar:not([hidden])) { border-bottom: 2px solid var(--line); }
html.px .rc-betbar { margin-top: 12px; border-color: var(--line); padding: 14px 16px; }
html.px .rc-chip { width: 12px; height: 12px; border-radius: 0; box-shadow: 0 0 0 2px var(--line); }
html.px .rc-pick .rc-chip { width: 12px; height: 12px; margin-top: 8px; }   /* the middle of the name's first line */
html.px .rc-gain { background: var(--surface); color: var(--px-good); padding: 2px 8px; }
/* Under the scene, not over it: on a phone its three lines and the board left the camels a strip (mockup S19). */
html.px .rc-banner {
  position: static; align-self: stretch;
  background: var(--surface); border-top: 2px solid var(--line);
  box-shadow: inset 0 2px 0 var(--px-hi);
}
html.px .rc-banner-label { color: var(--ground); text-transform: uppercase; }
html.px .rc-banner p { padding: 8px 12px; }
html.px .rc-banner b { color: var(--accent); }
/* The countdown has started (raceOverlays): the whole strip a step lighter three times, 140 ms each, in whole steps
   like the rest of the page (user, 2026-10-12: "lengvai sublyksėtų visa juosta" — mockup 91 A). */
html.px .rc-banner.flash { animation: rc-flash 840ms steps(1, end) 1; }
html.px .rc-banner.flash .rc-banner-label { animation: rc-flash-label 840ms steps(1, end) 1; }
@keyframes rc-flash {
  0%, 33.33%, 66.67% { background: var(--px-flash); box-shadow: inset 0 2px 0 var(--px-flash-hi); }
  16.67%, 50%, 83.33%, 100% { background: var(--surface); box-shadow: inset 0 2px 0 var(--px-hi); }
}
@keyframes rc-flash-label {
  0%, 33.33%, 66.67% { background: var(--px-acc-hi); }
  16.67%, 50%, 83.33%, 100% { background: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  html.px .rc-banner.flash, html.px .rc-banner.flash .rc-banner-label { animation: none; }
}
html.px .rc-pick { padding: 8px 10px; gap: 2px; }
html.px .rc-pick-look { padding-left: 20px; height: 28px; }
html.px .rc-pick-place { color: var(--muted); }
html.px .rc-pick-odds { color: var(--text); }
/* Bets closed: the same plates, still readable — not the greyed look of a button that cannot be pressed. */
html.px .rc-pick:disabled { color: var(--text); }
/* The winner on a gold plate, a cup for its place; the viewer's bet still pressed in, and tagged (user, 2026-10-12: the
   two had looked the same — mockup 90, variant B). Dark ink on the gold in both themes. */
html.px .rc-pick.won {
  background: var(--px-win); color: #3B2414; border-color: var(--line);
  box-shadow: inset 2px 2px 0 var(--px-win-hi), inset -2px -2px 0 var(--px-win-sh);
}
html.px .rc-pick.won[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: inset 2px 2px 0 var(--px-win-sh), inset -2px -2px 0 var(--px-win-hi);
}
html.px .rc-pick.won .rc-pick-place { display: none; }
html.px .rc-cup { display: inline-flex; flex: none; align-items: center; height: 28px; }
html.px .rc-pick.won :is(.rc-cup, .rc-pick-odds) { color: #3B2414; }
html.px .rc-pick.won .rc-stars { color: var(--px-win-off); }
html.px .rc-pick.won .rc-stars .on { color: var(--px-win-star); }
html.px .rc-pick.won .rc-temp { stroke: #6B4226; }
html.px .rc-pick.won .rc-pill { background: transparent; border-color: var(--px-win-sh); color: #6B4226; }
html.px .rc-mine-tag {
  flex: none; align-self: flex-start; margin-left: auto; padding: 0 6px; text-transform: uppercase;
  background: var(--accent); color: var(--ground); box-shadow: inset 0 0 0 2px var(--line);
}
html.px .rc-stake { min-height: 44px; }
html.px .rc-bet-go { min-height: 48px; padding: 0 18px; text-transform: uppercase; }
html.px .rc-bet-done.ok, html.px .rc-good, html.px .rc-pill.fed { color: var(--px-good); }
html.px .rc-bad, html.px .rc-bet-error { color: var(--warn); }
html.px .rc-pill { border: 2px solid var(--line-soft); border-radius: 0; color: var(--text-2); background: var(--surface-2); }
html.px .rc-temp { stroke: var(--muted); }
/* The weather (plan-lenktynes-statymai M1 A): the temperament it helps green, the one it hurts red, a little bolder. */
html.px .rc-temp.up { stroke: var(--px-good); stroke-width: 2.2; }
html.px .rc-temp.down { stroke: var(--warn); stroke-width: 2.2; }
/* Its plate on the scene's top left, and its line over the camels in the bar. */
html.px .rc-course {
  position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 10px; white-space: nowrap;
  text-transform: uppercase; background: var(--surface); color: var(--text);
  border: 2px solid var(--line); box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-shade);
}
html.px .rc-course[hidden] { display: none; }
html.px .rc-course-head { display: inline-flex; align-items: center; gap: 8px; }
html.px .rc-course-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--line-soft);
}
html.px .rc-course-line .rc-course-head { text-transform: uppercase; }
html.px .rc-course-line .rc-temp { vertical-align: -2px; }
@media (max-width: 899.98px) {
  html.px .rc-course { left: 6px; top: 6px; padding: 2px 6px; }
}
/* The kinds of bet (plan-lenktynes-statymai M4): a row of plates on a computer, one plate opening the list on a phone;
   the picked order's numbers on the camels; the viewer's bets under them. */
html.px .rc-kinds { display: grid; grid-template-columns: repeat(var(--kinds), minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
html.px :is(.rc-kinds .rc-seg, .rc-kind-pick) { min-height: 44px; padding: 0 6px; text-transform: uppercase; }
html.px .rc-kind-pick { display: none; }
html.px .rc-kind-more { color: var(--muted); }
html.px .rc-kind-help { margin: 0 0 12px; color: var(--text-2); }
html.px .rc-kind-option {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px; margin: 0 0 6px;
  padding: 6px 12px; text-align: left;
}
html.px .rc-seg[aria-pressed="true"] :is(.muted, .rc-kind-more) { color: var(--ground); }
html.px .rc-seq {
  flex: none; align-self: flex-start; margin-left: auto; padding: 0 6px;
  background: var(--accent); color: var(--ground); box-shadow: inset 0 0 0 2px var(--line);
}
/* 🔮 The free guess (lenktynes.md §3.1b, mockup M3 B): its own line under the bet — the streak in cells, gold at a
   prize, what the next right guess brings and the button at the end. */
html.px .rc-guess {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding-top: 12px;
  border-top: 2px solid var(--line-soft);
}
html.px .rc-guess-cells { display: inline-flex; flex-wrap: wrap; gap: 4px; }
html.px .rc-guess-cell {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 2px solid var(--line); background: var(--surface-2); color: var(--muted);
}
html.px .rc-guess-cell.on { background: var(--accent); color: var(--ground); }
html.px .rc-guess-cell.prize { border-color: var(--px-gold); }
html.px .rc-guess-cell.prize:not(.on) { color: var(--px-gold); }
html.px .rc-guess-go { margin-left: auto; padding: 0 14px; text-transform: uppercase; }
@media (max-width: 899.98px) {
  html.px .rc-guess-go { flex: 1 1 100%; margin-left: 0; }
}
/* 🎪 The shouts (plan-lenktynes-statymai M2 A): a plate of their own right under the scene (user, 2026-10-28) — three set
   phrases and the crowd's count at the end. */
html.px .rc-cheerbar { margin-top: 12px; padding: 10px 16px; }
html.px .rc-cheer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
html.px .rc-cheer .rc-stake { padding: 0 12px; }
html.px .rc-crowd-count { margin-left: auto; color: var(--text-2); }
/* A computer: the words; a phone: one row of icons (user, 2026-10-28 — "sutrauk į vieną eilutę"), the eye and "9 + 2". */
html.px :is(.rc-cheer-icon, .rc-crowd-short) { display: none; }
@media (max-width: 899.98px) {
  html.px .rc-cheerbar { padding: 8px 12px; }
  html.px .rc-cheer { flex-wrap: nowrap; gap: 8px; }
  html.px :is(.rc-cheer-label, .rc-cheer-word, .rc-crowd-long) { display: none; }
  html.px .rc-cheer-icon { display: block; }
  html.px .rc-crowd-short { display: inline; }
  html.px .rc-cheer .rc-stake { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }
  html.px .rc-crowd-count { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
}
html.px .rc-slip { margin-top: 12px; padding-top: 8px; border-top: 2px solid var(--line-soft); }
html.px .rc-slip-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; padding: 4px 0;
  border-bottom: 2px solid var(--line-soft);
}
html.px .rc-slip-row .rc-name { white-space: normal; overflow: visible; }
@media (max-width: 899.98px) {
  html.px .rc-kinds { display: none; }
  html.px .rc-kind-pick { display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 0 0 8px; padding: 0 12px; }
  html.px .rc-slip-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.px .rc-slip-row > :last-child { text-align: right; }
}
html.px .rc-last-row, html.px .rc-lead-row, html.px .rc-hist-row { border-bottom: 2px solid var(--line-soft); }

/* ── The other tabs ───────────────────────────────────────────────────────────────────────────────────────────── */
html.px .rc-title { color: var(--muted); }
html.px .rc-title.got { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
html.px .rc-lead-row.me { background: var(--surface-2); border-radius: 0; }
html.px .rc-rank.first { color: var(--accent); }
html.px .rc-toast { background: var(--surface); color: var(--px-good); }
html.px .rc-toast.bad { background: var(--surface); border-color: var(--line); color: var(--warn); }
html.px .rc-act small { color: var(--text-2); }
html.px .rc-act small.short { color: var(--warn); }
html.px .rc-gift-in { border-color: var(--accent); }
html.px .rc-sheet { background: var(--surface); color: var(--text); }
html.px .rc-sheet::backdrop { background: var(--px-dim); }
html.px .rc-sheet-input { background: var(--ground); color: var(--text); }
html.px .rc-sheet-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
html.px .rc-pick-tile { color: #3E2512; background: #E9DCC0; }
/* The new camels' frame (etapas 5) is 90 × 84 + 14 above for an accessory: ×2 a portrait is 180 × 196 — the old box
   (150 × 166, the 75 px camel's) cut off the tail and the rump. */
html.px .rc-portrait-box { width: 180px; height: 196px; }
html.px .rc-offer { grid-template-columns: 180px minmax(0, 1fr); }
html.px .rc-bbq-q { color: #3E2512; }

/* ── The logo (etapas 2, S10, S16): the battalion's turned races', a strip of 37 frames of 162 × 60 from
   tools/sprites/logo.py, turned by steps() — 110 ms a frame. Whole scales: ×2 on a phone (324 px fits 360 − 2 × 16),
   ×3 from 900. A new strip from the script changes these numbers too (it prints them). With less motion asked for, the
   camel stands under the shield (frame 18). ─────────────────────────────────────────────────────────────────── */
html.px .rc-logo {
  width: 324px; height: 120px;
  background: url('/lenktynes-logo.png') 0 0 / 11988px 120px no-repeat;
  image-rendering: pixelated;
  animation: rc-logo-tel 4070ms steps(37) infinite;
}
@keyframes rc-logo-tel { to { background-position: -11988px 0; } }
@keyframes rc-logo-pc { to { background-position: -17982px 0; } }
@media (min-width: 900px) {
  html.px .rc-logo { width: 486px; height: 180px; background-size: 17982px 180px; animation-name: rc-logo-pc; }
}
@media (prefers-reduced-motion: reduce) {
  html.px .rc-logo { animation: none; background-position: calc(-18 * 324px) 0; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  html.px .rc-logo { background-position: calc(-18 * 486px) 0; }
}

/* ── The page's name and the menu ─────────────────────────────────────────────────────────────────────────────── */
html.px h1 { text-transform: none; }
html.px .page-head .top-right { height: 36px; }
html.px .error { color: var(--warn); }

/* A phone: the menu a bar of two pixel icons along the bottom, home and this page, no words (S19; user, 2026-10-11);
   the tabs three and three, the sun or the moon in the sixth place; the camels one under another. */
@media (max-width: 899.98px) {
  html.px .tabs { background: var(--surface-2); border-top: 2px solid var(--line); }
  html.px .tabs > a { color: var(--muted); }
  html.px .rc-tab-word { display: none; }   /* not a 0 size: its 28 px line lifted the camel over the house */
  html.px .tabs > a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 4px 0 var(--accent); }
  html.px .rc-tabbar { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 44px 44px; row-gap: 6px; }
  html.px .rc-tabbar .tr-tabs.mu-tabs {
    grid-column: 1 / -1; grid-row: 1 / 3; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 44px;
  }
  html.px .rc-theme { grid-column: 3; grid-row: 2; z-index: 1; }
  html.px .rc-picks { grid-template-columns: minmax(0, 1fr); }
  html.px .rc-pick-look { padding-left: 0; }   /* 360 px: the marks and the odds need the indent's 20 px */
  html.px .rc-h2 { font-size: 20px !important; line-height: 28px !important; }   /* 30px broke "… 3 / 15" at 390 px */
}
/* A computer: the menu two plates — home's house, this page's word — pressed in with the accent under it. */
@media (min-width: 900px) {
  html.px .tabs { gap: 6px; border-bottom: none; padding: 4px 0; }
  html.px .tabs > a {
    min-height: 44px; padding: 0 12px; color: var(--text-2);
    border: 2px solid var(--line); background: var(--surface);
    box-shadow: inset 2px 2px 0 var(--px-hi), inset -2px -2px 0 var(--px-shade);
    clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px),
      calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px),
      0 2px, 2px 2px);
  }
  html.px .tabs > a svg { display: none; }
  html.px .tabs > a.rc-home svg { display: block; }   /* home is its pixel house only (user, 2026-10-11) */
  html.px .tabs > a[aria-current="page"] {
    background: var(--surface-2); color: var(--accent);
    box-shadow: inset 0 -4px 0 var(--accent), inset 2px 2px 0 var(--px-shade);
  }
  html.px.tabs-pinned .tabs { background: var(--px-ground); box-shadow: 0 2px 0 var(--line); }
}

/* ── A visitor without a login (user, 2026-10-19): the track tab only, "Prisijungti" beside it, and the way in where
   a player has the stake ──────────────────────────────────────────────────────────────────────────────────────── */
html.px .rc-login { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
html.px.race-visitor .tr-tabs button:not(#tab-btn-trasa) { display: none; }
/* One row at every width: the track, "Prisijungti" as wide as its word, the sun or the moon. */
html.px.race-visitor .rc-tabbar { grid-template-columns: minmax(0, 1fr) auto 48px; grid-template-rows: 44px; }
html.px.race-visitor .rc-tabbar > * { grid-column: auto; grid-row: 1; }
html.px.race-visitor .rc-tabbar .tr-tabs.mu-tabs { grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: 1; }
html.px .rc-tabbar .rc-login { min-height: 44px; }
html.px .rc-login-row { justify-content: space-between; }
html.px .rc-login-row .rc-bet-win { text-align: left; }
/* Three numbers without the balance: one row of three on a computer; on a phone two, the fund under them across. */
html.px.race-visitor .rc-stats > :last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  html.px.race-visitor .rc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.px.race-visitor .rc-stats > :last-child { grid-column: auto; }
}
@media (max-width: 899.98px) {
  html.px .rc-login-row .rc-login { flex: 1 1 100%; }
}