/* ---------------------------------------------------------------------------
   base.css — hand-written.  Reset, interaction states, overlays, toasts.
   Never regenerated: _tools/gen.py only writes css/figma.css and the .html files.
   --------------------------------------------------------------------------- */

:root {
  --ink: #060f0a;
  --ink-2: #0c1a12;
  --ink-3: #0d1f15;
  --line: #172e21;
  --lime: #b8ff4a;
  --cream: #f5f2ed;
  --muted: #8a9c93;
  --danger: #ff6b5e;
  --ok: #4ade80;
  --focus: #b8ff4a;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

svg.fx-svg { display: block; overflow: visible; flex: 0 0 auto; }

/* --- element resets so generated classes fully control appearance --------- */
button, input, select, textarea, a {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
a { text-decoration: none; color: inherit; }
a.fx-link:hover, a.fx-btn:hover { opacity: .85; }
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
select.fx-input {
  cursor: pointer;
  background-image: none;
}
input::placeholder, textarea::placeholder { color: currentColor; opacity: .62; }
textarea.fx-input { resize: vertical; }
input[type="search"]::-webkit-search-cancel-button { display: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--lime);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- desktop / mobile variants ------------------------------------------- */
.view { position: relative; }

/* --- generic interactive affordances ------------------------------------- */
.fx-btn { cursor: pointer; transition: filter .15s ease, opacity .15s ease; }
.fx-btn:hover { filter: brightness(1.08); }
.fx-btn:active { transform: translateY(1px); }
.fx-btn[disabled], .fx-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}
.fx-link { cursor: pointer; }

/* nav / tab / filter / chip active state, normalised out of the mockup ----- */
[data-role="tab"], [data-role="chip"], [data-role="navlink"] {
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* The designed look of a selected chip comes from the mockup itself: the
   generator pools it as an `a*` class named in data-onclass, and app.js adds
   that class alongside .is-active.  These rules are the fallback for elements
   the generator had no designed state for. */
[data-onclass].is-active > * { color: var(--on-color, inherit) !important; }
[data-role="tab"].is-active:not([data-onclass]),
[data-role="chip"].is-active:not([data-onclass]) {
  background-color: var(--lime) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
[data-role="tab"].is-active:not([data-onclass]) *,
[data-role="chip"].is-active:not([data-onclass]) * { color: var(--ink) !important; }
[data-role="navlink"].is-active:not([data-onclass]) { color: var(--lime) !important; }
[data-role="navlink"].is-active:not([data-onclass])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--lime);
}
[data-role="odds"] { cursor: pointer; }
[data-role="odds"].is-selected {
  box-shadow: inset 0 0 0 2px var(--lime) !important;
  background-color: rgba(184, 255, 74, .12) !important;
}

/* --- checkbox / switch ---------------------------------------------------- */
.fx-check { position: relative; }
.fx-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 30%;
  height: 58%;
  border: 2px solid var(--ink);
  border-top: 0;
  border-left: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.fx-check[aria-checked="true"] {
  background-color: var(--lime) !important;
  box-shadow: inset 0 0 0 1px var(--lime) !important;
}
.fx-check[aria-checked="true"]::after { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.fx-check.is-invalid { box-shadow: inset 0 0 0 1.5px var(--danger) !important; }

.fx-toggle { cursor: pointer; transition: background-color .18s ease; }
.fx-toggle > * { transition: transform .18s ease; }
.fx-toggle[aria-checked="true"] { background-color: var(--lime) !important; }
.fx-toggle[aria-checked="true"] > * {
  transform: translateX(var(--tg-shift, 100%));
  background-color: var(--ink) !important;
}
.fx-toggle[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* --- accordions ----------------------------------------------------------- */
[data-role="acc-head"] { cursor: pointer; }
[data-role="acc-body"] {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .2s ease, margin .28s ease;
}
[data-role="acc"].is-open > [data-role="acc-body"] {
  max-height: 1200px;
  opacity: 1;
}
[data-role="acc-icon"] { transition: transform .25s ease; }
[data-role="acc"].is-open [data-role="acc-icon"] { transform: rotate(180deg); }

/* --- form validation ------------------------------------------------------ */
.fx-input.is-invalid { color: var(--danger) !important; }
[data-role="field"].is-invalid [data-n="input-wrapper"],
[data-role="field"].is-invalid [data-n="select-wrapper"] {
  box-shadow: inset 0 0 0 1.5px var(--danger) !important;
}
.field-error {
  display: block;
  margin-top: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--danger);
}
.field-hint {
  display: block;
  margin-top: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
}
.pw-meter { display: flex; gap: 4px; margin-top: 8px; }
.pw-meter i {
  flex: 1 1 0;
  height: 3px;
  background: #23372b;
  border-radius: 2px;
}
.pw-meter.s1 i:nth-child(-n+1), .pw-meter.s2 i:nth-child(-n+2),
.pw-meter.s3 i:nth-child(-n+3), .pw-meter.s4 i:nth-child(-n+4) { background: var(--lime); }
.pw-meter.s1 i:nth-child(-n+1) { background: var(--danger); }

/* --- overlays ------------------------------------------------------------- */
.overlay-root { position: relative; z-index: 90; }
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(3, 8, 5, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: ov-in .18s ease both;
}
.overlay[hidden] { display: none; }
.overlay > .view > * { min-height: 100dvh; }
.overlay .view { min-height: 100%; }
#ov-cookie, #ov-betslip { background: rgba(3, 8, 5, .55); }
#ov-cookie > .view > *, #ov-betslip > .view > * {
  min-height: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  animation: sheet-in .26s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ov-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
body.is-locked { overflow: hidden; }

/* --- toasts --------------------------------------------------------------- */
.toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--ink-3);
  color: var(--cream);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, .5);
  font-size: 13px;
  line-height: 18px;
  animation: toast-in .22s ease both;
}
.toast b {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--lime);
}
.toast.err b { color: var(--danger); }
.toast.ok b { color: var(--ok); }
.toast .demo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(184, 255, 74, .16);
  color: var(--lime);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.toast code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--lime);
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
.toast.out { animation: toast-out .2s ease both; }
@keyframes toast-out { to { transform: translateY(6px); opacity: 0 } }

/* --- empty bet slip ------------------------------------------------------- */
.slip-empty {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  padding: 6px 0 10px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
}

/* --- horizontal carousels ------------------------------------------------- */
.fx-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.fx-scroll::-webkit-scrollbar { display: none; }
.fx-scroll > * { scroll-snap-align: start; }

/* --- file upload zone ----------------------------------------------------- */
.fx-upload { cursor: pointer; }
.fx-upload:hover { filter: brightness(1.1); }
.fx-file { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* --- contact form success ------------------------------------------------- */
.ticket-ok {
  padding: 28px;
  border-radius: 10px;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ticket-ok-title {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--lime);
  margin-bottom: 10px;
}
.ticket-ok-body {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 24px;
  color: var(--cream);
}
.ticket-ok-again {
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}
.ticket-ok-again:hover { filter: brightness(1.06); }

/* --- misc ----------------------------------------------------------------- */
[hidden] { display: none !important; }
.is-hidden { display: none !important; }
.no-results {
  padding: 24px 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--muted);
}
[data-role="search-hit"] mark {
  background: rgba(184, 255, 74, .28);
  color: inherit;
  border-radius: 2px;
}
.session-only { display: none; }
body.is-authed .session-only { display: revert; }
body.is-authed .guest-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}