/* Himbis Pferderenna · one phase at a time · existing club palette and MADE Soulmaze */
@import url("../tokens.css");
@import url("../base.css");
@font-face { font-family: "MADE Soulmaze"; src: url("../assets/fonts/made-soulmaze.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../assets/fonts/general-sans.ttf") format("truetype"); font-weight: 200 700; font-display: swap; }
:root {
  --member-caddy: oklch(34% .13 16); --member-david: oklch(82% .16 80); --member-flipsi: oklch(92% .045 86);
  --member-hannes: oklch(35% .11 155); --member-marci: oklch(74% .2 350); --member-maecki: oklch(77% .02 235);
  --member-mueller: oklch(44% .18 268); --member-newmy: oklch(25% .015 245); --member-sebi: oklch(45% .17 20);
  --color-track: oklch(94% .04 121); --color-track-alt: oklch(97% .025 121);
  --game-width: 900px;
}
[data-member="caddy"] { --horse-color: var(--member-caddy); --horse-ink: var(--color-white); }
[data-member="david"] { --horse-color: var(--member-david); --horse-ink: var(--color-ink); }
[data-member="flipsi"] { --horse-color: var(--member-flipsi); --horse-ink: var(--color-ink); }
[data-member="hannes"] { --horse-color: var(--member-hannes); --horse-ink: var(--color-white); }
[data-member="marci"] { --horse-color: var(--member-marci); --horse-ink: var(--color-ink); }
[data-member="maecki"] { --horse-color: var(--member-maecki); --horse-ink: var(--color-ink); }
[data-member="mueller"] { --horse-color: var(--member-mueller); --horse-ink: var(--color-white); }
[data-member="newmy"] { --horse-color: var(--member-newmy); --horse-ink: var(--color-white); }
[data-member="sebi"] { --horse-color: var(--member-sebi); --horse-ink: var(--color-white); }
body { font-size: 16px; }
button, a, input { touch-action: manipulation; -webkit-tap-highlight-color: var(--color-paper-2); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .4; }
:is(button, a, input):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
button:disabled:active { transform: none; }
h1 { font-size: 20px; max-width: none; }
h2 { max-width: none; }
.game-header { max-width: 1180px; padding: var(--space-xs) var(--space-lg); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); min-height: 60px; }
.game-header > .icon-button { justify-self: end; }
.club-link { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-xs); font-weight: 650; text-decoration: none; }
.club-link img { width: 36px; height: 36px; mix-blend-mode: multiply; }
.club-link:hover { text-decoration: underline; }
.club-link:active { transform: translateY(1px); }
.icon-button { width: 44px; height: 44px; padding: 0; border: 2px solid var(--color-ink); border-radius: 50%; color: var(--color-ink); background: var(--color-paper); font-weight: 650; font-size: 20px; flex-shrink: 0; }
.icon-button:hover:not(:disabled) { background: var(--color-accent-2); }
.icon-button:active:not(:disabled) { transform: rotate(-8deg); }
.game-shell { max-width: var(--game-width); padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); margin-inline: auto; }
.screen { text-align: center; }
.poster-title { font-size: 36px; line-height: 1.15; transform: rotate(-2deg); overflow-wrap: anywhere; }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
.button { min-height: 48px; padding: var(--space-sm) var(--space-lg); border: 2px solid var(--color-ink); border-radius: 3px; font-weight: 650; font-size: 16px; line-height: 1.25; transition: transform var(--dur-micro) var(--ease-out); }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 4px 4px 0 var(--color-ink); }
.primary:hover:not(:disabled) { background: var(--color-accent-deep); }
.secondary { background: var(--color-paper-3); color: var(--color-ink); }
.secondary:hover { background: var(--color-accent-2); }
.main-action { display: block; width: min(100%, 420px); margin: var(--space-lg) auto 0; }
.text-button { padding: var(--space-xs); min-height: 44px; border: 0; background: none; color: var(--color-ink); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: .22em; }
.text-button:hover { color: var(--color-accent); }
.text-button:active { transform: translateY(1px); }
.horse-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); max-width: 680px; margin-inline: auto; }
.stable-lineup { margin-top: var(--space-lg); align-items: end; }
.member-card { min-width: 0; margin: 0; }
.member-image { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(2px 4px 0 var(--color-ink)); }
.member-name { display: block; width: fit-content; min-width: 70%; margin: var(--space-xs) auto 0; padding: var(--space-2xs) var(--space-xs); background: var(--horse-color); color: var(--horse-ink); border: 1px solid var(--color-ink); font-weight: 650; font-size: var(--text-sm); line-height: 1.2; border-radius: 2px; }
.stable-lineup .member-card:nth-child(1) { transform: rotate(-5deg); }
.stable-lineup .member-card:nth-child(2) { transform: rotate(3deg); }
.stable-lineup .member-card:nth-child(3) { transform: rotate(-2deg); }
.stable-lineup .member-card:nth-child(4) { transform: rotate(5deg); }
.shuffle-button { margin-top: var(--space-md); }
.stable-players { max-width: 580px; margin: var(--space-sm) auto 0; }
#seating-hint { font-size: var(--text-sm); }
.add-form { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.add-form input { flex: 1; min-width: 0; width: 100%; min-height: 48px; border: 1px solid var(--color-rule); border-radius: 3px; padding: var(--space-sm); background: var(--color-paper-3); color: var(--color-ink); }
.add-form input:hover { border-color: var(--color-ink); }
.seating-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); padding: 0; margin: var(--space-md) 0 0; list-style: none; counter-reset: seat; }
.seating-list li { display: flex; align-items: center; min-width: 0; max-width: 100%; padding-left: var(--space-sm); border: 1px solid var(--color-rule); border-radius: 3px; counter-increment: seat; background: var(--color-paper-3); }
.seating-list li::before { content: counter(seat); font-size: var(--text-xs); color: var(--color-muted); margin-right: var(--space-xs); }
.seating-name { overflow-wrap: anywhere; text-align: left; }
.remove-player { min-width: 44px; min-height: 44px; padding: 0; border: 0; color: var(--color-muted); background: none; font-size: 20px; }
.remove-player:hover { color: var(--color-error); }
.remove-player:active { transform: scale(.9); }
.turn-heading { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
#bet-instruction { margin-top: var(--space-md); font-size: var(--text-sm); }
.betting-lineup { margin-top: var(--space-lg); }
.bet-horse { position: relative; display: block; width: 100%; padding: var(--space-2xs); border: 2px solid transparent; border-radius: 4px; color: var(--color-ink); background: none; }
.bet-horse:hover:not(:disabled) .member-image { transform: translateY(-4px); }
.bet-horse:active:not(:disabled) .member-image { transform: translateY(1px) rotate(-2deg); }
.bet-horse .member-image { transition: transform var(--dur-micro) var(--ease-out); }
.bet-horse.has-bet { border-color: var(--horse-color); background: var(--color-paper-2); }
.bet-horse:disabled { opacity: 1; }
.bet-count { position: absolute; top: 0; right: 0; min-width: 32px; height: 32px; display: grid; place-items: center; padding-inline: var(--space-2xs); border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-accent-2); color: var(--color-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.bet-count.is-zero { visibility: hidden; }
.unbet { min-height: 44px; width: 44px; padding: 0; margin-top: var(--space-2xs); border: 0; background: none; color: var(--color-ink); font-size: 24px; }
.unbet:hover:not(:disabled) { background: var(--color-paper-2); border-radius: 50%; }
.unbet:active:not(:disabled) { transform: scale(.9); }
.bet-total { margin-top: var(--space-sm); min-height: 30px; font-size: 20px; font-weight: 650; }
.bet-actions .main-action { margin-top: var(--space-sm); }
.bet-secondary { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); }
#late-player { max-width: 480px; margin-inline: auto; }
#late-status { margin-top: var(--space-xs); }
[data-paying="true"] .betting-lineup { opacity: .8; }
[data-paying="true"] .unbet { display: none; }
[data-stage="race"] .game-shell { padding-top: var(--space-xs); max-width: 700px; }
.race-board { padding: calc(var(--space-lg) + var(--space-xs)) var(--space-sm); border: 2px solid var(--color-ink); border-radius: 4px; background: var(--color-track); box-shadow: 4px 4px 0 var(--color-ink); }
.racetrack { --track-rows: 7; --row-height: clamp(36px, calc((100svh - 276px) / var(--track-rows)), 66px); display: grid; grid-template-columns: 40px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--track-rows), var(--row-height)); position: relative; isolation: isolate; }
.track-lane { grid-row: 1 / -1; position: relative; min-width: 0; background: var(--color-track-alt); border-right: 1px dashed var(--color-rule); }
.track-lane:nth-of-type(even) { background: var(--color-paper-3); }
.racer { position: absolute; z-index: var(--z-raised); left: 50%; bottom: calc(var(--row-height) / 2); width: 88%; max-width: 76px; transform: translate(-50%, 50%) translateY(calc(var(--position) * var(--row-height) * -1)); transition: transform var(--dur-short) var(--ease-out); }
.racer .member-image { filter: drop-shadow(1px 2px 0 var(--color-ink)); }
.racer .member-name { width: 100%; min-width: 0; margin-top: 0; padding: 2px; font-size: 11px; }
.track-label { grid-column: 1; align-self: center; font-size: 11px; font-weight: 650; text-align: left; }
.finish-line { grid-row: 1; grid-column: 1 / -1; z-index: var(--z-base); border-bottom: 2px dashed var(--color-ink); pointer-events: none; }
.obstacle { z-index: var(--z-raised); grid-column: 1; align-self: center; justify-self: start; display: grid; place-items: center; width: 30px; height: min(44px, calc(var(--row-height) - 4px)); border: 3px double var(--color-paper-3); border-radius: 3px; background: var(--color-ink); color: var(--color-paper-3); box-shadow: 2px 2px 0 var(--color-ink); font-family: var(--font-display); font-size: var(--text-sm); }
.obstacle.is-pending { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.obstacle.revealed { background: var(--horse-color); color: var(--horse-ink); border: 1px solid var(--color-ink); box-shadow: none; font-family: var(--font-body); font-size: 9px; font-weight: 650; writing-mode: vertical-rl; }
.race-bottom { margin-top: var(--space-md); display: grid; grid-template-columns: minmax(76px, auto) minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--space-md); text-align: left; }
.name-card { display: grid; place-items: center; min-height: 48px; padding: var(--space-xs) var(--space-sm); border: 2px solid var(--color-ink); border-radius: 3px; background: var(--horse-color, var(--color-ink)); color: var(--horse-ink, var(--color-paper-3)); font-weight: 700; box-shadow: 2px 2px 0 var(--color-ink); transform: rotate(-3deg); }
.race-message { font-size: var(--text-sm); line-height: 1.4; }
.race-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: var(--space-sm); margin-top: var(--space-2xs); }
.race-actions .icon-button { width: 48px; height: 48px; border-radius: 3px; }
.result-screen { max-width: 600px; margin-inline: auto; }
.winner-card { width: 160px; margin: var(--space-lg) auto; transform: rotate(4deg); }
.winner-card .member-image { filter: drop-shadow(4px 5px 0 var(--color-ink)); }
.payouts { max-width: 420px; margin-inline: auto; }
.payout-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.payout-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.payout-list li > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.payout-list strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.error { color: var(--color-error); font-size: var(--text-sm); margin-top: var(--space-xs); }
.notice { padding: var(--space-sm); background: var(--color-paper-2); margin-bottom: var(--space-md); font-size: var(--text-sm); }
.skip-link { position: fixed; z-index: var(--z-toast); left: var(--space-md); top: var(--space-md); padding: var(--space-sm); background: var(--color-ink); color: var(--color-paper-3); transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }
.rules-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: var(--space-lg); color: var(--color-ink); background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: 4px; }
.rules-dialog::backdrop { background: var(--color-overlay); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.dialog-heading h2 { font-size: 24px; }
.rules-dialog ol { padding-left: var(--space-lg); font-size: var(--text-sm); }
.rules-dialog li { margin-bottom: var(--space-sm); }
#restart-confirm { margin-top: var(--space-sm); }
#restart-confirm .button { margin-top: var(--space-sm); }
@media (max-width: 48rem) {
  .club-link span { display: none; }
  .game-header { padding-inline: var(--space-md); min-height: 56px; }
  .game-shell { padding: var(--space-md) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
  h1 { font-size: 18px; }
  .poster-title { font-size: 26px; }
  .horse-lineup { gap: var(--space-xs); }
  .stable-lineup { margin-top: var(--space-lg); }
  .member-name { font-size: var(--text-xs); padding: var(--space-2xs); }
  .betting-lineup { margin-top: var(--space-md); }
  .bet-horse { padding: var(--space-3xs); }
  .bet-horse .member-name { font-size: 11px; }
  .bet-count { min-width: 26px; height: 26px; font-size: 14px; border-width: 1px; }
  .bet-total { font-size: 18px; }
  .seating-list { gap: var(--space-2xs); font-size: var(--text-sm); }
  .seating-list li { padding-left: var(--space-xs); }
  .seating-list li::before { margin-right: var(--space-2xs); }
  .race-board { padding-inline: var(--space-xs); }
  .race-bottom { gap: var(--space-xs) var(--space-sm); }
  .race-actions { position: sticky; bottom: env(safe-area-inset-bottom, 0px); padding-block: var(--space-xs); background: var(--color-paper); z-index: var(--z-sticky); }
  .winner-card { width: 130px; margin-block: var(--space-md); }
}
@media (max-width: 24rem) {
  .game-shell { padding-inline: var(--space-sm); }
  .game-header { padding-inline: var(--space-sm); }
  .poster-title { font-size: 23px; }
  .member-name { font-size: 11px; }
  .horse-lineup { gap: var(--space-2xs); }
  .add-form .button { padding-inline: var(--space-md); }
  .racetrack { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); }
  .racer .member-name { font-size: 10px; }
  .race-message { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) { .racer, .button, .member-image { transition: none; } }

/* Loose paper, printed tickets and the club's raspberry referee. */
:root { --game-outline: 2px solid var(--color-ink); --game-shadow: 4px 5px 0 var(--color-ink); }
.game-header h1 { padding: var(--space-xs) var(--space-sm); color: var(--color-accent-2); background: var(--color-ink); box-shadow: 3px 3px 0 var(--color-accent); transform: rotate(-2deg); font-size: 20px; }
.game-header > .icon-button { background: var(--color-accent-2); box-shadow: 2px 3px 0 var(--color-ink); transform: rotate(8deg); }
.screen { position: relative; isolation: isolate; }
.poster-title { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; font-size: 48px; line-height: 1.08; }
.poster-title::after { content: ""; position: absolute; z-index: -1; inset: auto 4% -3px 1%; height: .28em; background: var(--color-accent-2); transform: rotate(1deg); }
.phase-mascot { position: absolute; right: -60px; top: -12px; width: 120px; transform: rotate(12deg); pointer-events: none; }
.primary { box-shadow: var(--game-shadow); rotate: -1deg; }
.primary:hover:not(:disabled) { rotate: 0deg; }
.primary:active:not(:disabled) { box-shadow: var(--shadow-press); }
.stable-lineup { padding-inline: var(--space-xs); margin-top: var(--space-lg); }
.stable-lineup .member-card { padding: var(--space-xs); background: var(--color-paper-3); border: var(--game-outline); box-shadow: var(--game-shadow); }
.stable-lineup .member-card:nth-child(2) { transform: translateY(-6px) rotate(3deg); }
.stable-lineup .member-card:nth-child(4) { transform: translateY(-4px) rotate(5deg); }
.stable-lineup .member-name { width: 100%; margin-top: var(--space-2xs); }
.shuffle-button { margin-top: var(--space-lg); padding-inline: var(--space-md); background: var(--color-paper-3); border: var(--game-outline); box-shadow: 2px 3px 0 var(--color-ink); transform: rotate(2deg); text-decoration: none; }
.shuffle-button:hover { transform: rotate(0deg); color: var(--color-ink); background: var(--color-accent-2); }
.shuffle-button:active { box-shadow: var(--shadow-press); }
.seating-list li { border-color: var(--color-ink); box-shadow: 2px 2px 0 var(--color-ink); transform: rotate(-2deg); }
.seating-list li:nth-child(even) { transform: rotate(2deg); }
.turn-heading { gap: var(--space-md); }
#turn-progress { padding: var(--space-2xs) var(--space-sm); color: var(--color-ink); background: var(--color-paper-3); border: 1px solid var(--color-ink); box-shadow: 2px 2px 0 var(--color-ink); transform: rotate(3deg); }
.betting-lineup { gap: var(--space-lg); padding: var(--space-xs); margin-top: var(--space-md); }
.bet-choice { --card-angle: -4deg; --card-shift: 3px; }
.bet-choice:nth-child(2) { --card-angle: 3deg; --card-shift: -4px; }
.bet-choice:nth-child(3) { --card-angle: -2deg; --card-shift: 5px; }
.bet-choice:nth-child(4) { --card-angle: 5deg; --card-shift: -2px; }
.bet-horse { padding: var(--space-xs); border: var(--game-outline); background: var(--color-paper-3); box-shadow: var(--game-shadow); transform: translateY(var(--card-shift)) rotate(var(--card-angle)); }
.bet-horse .member-name { width: 100%; margin-top: var(--space-2xs); }
.bet-horse.has-bet { background: var(--color-paper-3); border-color: var(--color-ink); outline: 3px solid var(--horse-color); outline-offset: 3px; }
.bet-horse:hover:not(:disabled) { z-index: var(--z-raised); }
.bet-horse:focus-visible { outline-color: var(--color-focus); outline-width: 3px; outline-offset: 5px; }
.bet-count { top: -10px; right: -8px; border-radius: 44% 52% 47% 49%; box-shadow: 2px 2px 0 var(--color-ink); transform: rotate(9deg); }
.unbet { margin-top: var(--space-sm); }
.bet-slip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-sm); width: fit-content; max-width: 100%; margin: var(--space-xs) auto var(--space-md); padding: var(--space-2xs) var(--space-md); border: var(--game-outline); background: var(--color-accent-2); box-shadow: 3px 3px 0 var(--color-ink); transform: rotate(-2deg); }
.bet-slip .bet-total { margin: 0; min-height: 0; font-size: 18px; }
.reset-bet { font-size: var(--text-xs); font-weight: 650; white-space: nowrap; }
.reset-bet:hover:not(:disabled) { color: var(--color-ink); text-decoration-thickness: 2px; }
.reset-bet:disabled { opacity: .45; text-decoration: none; }
[data-paying="true"] .bet-slip { min-height: 52px; margin-top: var(--space-lg); }
[data-paying="true"] .betting-lineup { opacity: 1; }
.race-board { background: var(--color-paper-3); box-shadow: 6px 7px 0 var(--color-ink); transform: rotate(-.5deg); }
.finish-line { position: relative; border: 0; }
.finish-line::after { content: ""; position: absolute; inset: auto 0 0; height: 8px; background: conic-gradient(var(--color-ink) 25%, var(--color-paper-3) 0 50%, var(--color-ink) 0 75%, var(--color-paper-3) 0); background-size: 12px 12px; }
.track-label { position: relative; z-index: var(--z-base); justify-self: start; padding: 2px 3px; background: var(--color-accent-2); transform: rotate(-7deg); }
#obstacle-0, #obstacle-2, #obstacle-4 { transform: rotate(-5deg); }
#obstacle-1, #obstacle-3 { transform: rotate(4deg); }
.racer .member-name { box-shadow: 1px 2px 0 var(--color-ink); rotate: -2deg; }
.name-card { transform: rotate(-7deg); box-shadow: 3px 4px 0 var(--color-ink); }
.race-actions .icon-button { background: var(--color-paper-3); box-shadow: 2px 3px 0 var(--color-ink); rotate: 3deg; }
.result-screen .phase-mascot { right: -80px; top: var(--space-lg); }
.winner-card { position: relative; isolation: isolate; margin-block: var(--space-xl); }
.winner-card::before { content: ""; position: absolute; z-index: -1; inset: 10% -30% 0; background: var(--color-accent-2); transform: rotate(-13deg); clip-path: polygon(50% 0, 60% 13%, 77% 4%, 79% 23%, 98% 25%, 88% 43%, 100% 56%, 84% 65%, 88% 86%, 66% 83%, 56% 100%, 43% 86%, 23% 97%, 21% 76%, 1% 73%, 13% 56%, 0 43%, 17% 33%, 12% 13%, 35% 18%); }
.payouts { padding: var(--space-md) var(--space-lg); background: var(--color-paper-3); border: var(--game-outline); box-shadow: var(--game-shadow); transform: rotate(-2deg); }
.payout-list li { border-bottom: 1px dashed var(--color-rule); }
.result-screen .main-action { margin-top: var(--space-lg); }
@media (max-width: 70rem) { .phase-mascot { right: -8px; width: 90px; } .result-screen .phase-mascot { right: -20px; width: 90px; } }
@media (max-width: 48rem) {
  .game-header { column-gap: var(--space-sm); }
  .game-header h1 { padding: var(--space-xs); font-size: 16px; }
  .poster-title { font-size: 30px; }
  .phase-mascot { display: none; }
  .horse-lineup { gap: var(--space-sm); }
  .stable-lineup .member-card, .bet-horse { padding: var(--space-2xs); }
  .shuffle-button { margin-top: var(--space-md); }
  .turn-heading { gap: var(--space-sm); }
  .betting-lineup { padding: var(--space-xs) var(--space-2xs); }
  .bet-count { top: -7px; right: -5px; }
  .bet-slip { padding-inline: var(--space-xs); margin-bottom: var(--space-sm); }
  .bet-slip .bet-total { font-size: 16px; }
  .winner-card { margin-block: var(--space-lg); }
  .payouts { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 24rem) { .poster-title { font-size: 25px; } .horse-lineup { gap: var(--space-xs); } .bet-slip { gap: 0 var(--space-2xs); } .reset-bet { padding-inline: var(--space-2xs); } }