/* Shared by the landing page and the betting page. */
:root {
  --ink: #08090c;
  --panel: #111317;
  --panel2: #181b20;
  --rule: #24272e;
  --ash: #efefef;
  --smoke: #868d98;
  --ember: #3d6bff; /* the accent: cobalt blue (the name is from the orange it replaced) */
  --ember-hi: #7ea0ff;
  --ember-deep: #0c1638;
  --over: #3ddc84;
  --over-bg: #0f2a1b;
  --under: #ff5b6e;
  --under-bg: #33131a;
  --sans: 'Archivo', system-ui, Helvetica, Arial, sans-serif;
  --mono: 'Archivo', system-ui, Helvetica, Arial, sans-serif; /* labels and numbers: Archivo too, widened, with even figures */
  --gut: clamp(16px, 5vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--ash); font: 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.mono { font-family: var(--mono); }
.lab { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.dim { color: var(--smoke); }

.logo { display: inline-flex; align-items: center; gap: .3em; font-weight: 800; font-size: 26px; letter-spacing: -.06em; line-height: 1; }
.logo img { width: 1.25em; height: 1.25em; flex: none; }
.logo i { font-style: normal; color: var(--ember); }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ember); color: #fff; border-radius: 99px; padding: 12px 20px; font: 600 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: filter .15s, transform .15s; }
.pill:hover { filter: brightness(1.12); transform: translateY(-1px); }
.pill:disabled { background: var(--panel2); color: var(--smoke); filter: none; transform: none; }
.pill.ghost { background: #1b1d22; color: var(--ash); }
.pill.light { background: var(--ash); color: #000; }

.av { border-radius: 50%; object-fit: cover; background: var(--panel2); flex: none; }
.app { font: 600 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 4px 8px; white-space: nowrap; }
.app.fomo { background: #17233f; color: #9db8ff; }
.app.pump { background: var(--over-bg); color: var(--over); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Archivo everywhere: labels and buttons a little wide, figures that line up, headlines wide and heavy */
.mono, .lab, .pill, .chip { font-variant-numeric: tabular-nums; }
.lab, .pill { font-stretch: 112%; }
h1, h2, h3 { font-stretch: 108%; }