/* ============================================================
   Trade on Everything

   Design tokens below are the real ones, read out of
   polymarket.com's compiled stylesheets
   (/_next/static/immutable/chunks/1o01udu20adid.css).
   Names kept close to theirs so they stay traceable.
   ============================================================ */

/* ── Brand typeface ───────────────────────────────────────────
   Open Sauce One, pulled from their /_next/static/immutable/media/.
   Inter is their secondary face and stands in for anything the
   Open Sauce files don't cover. */

@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("fonts/OpenSauceOne-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── brand ramp ─────────────────────────────── */
  --pk-brand-50:      #f4fcff;
  --pk-brand-100:     #cadfff;
  --pk-brand-200:     #a0c1ff;
  --pk-brand-300:     #76a2ff;
  --pk-brand-400:     #4e7fff;
  --pk-brand-500:     #2e5cff;
  --pk-brand-600:     #1c3fe2;
  --pk-brand-700:     #0f1ac6;
  --pk-brand-800:     #0c00a4;
  --pk-brand-900:     #06006f;
  --pk-brand-950:     #02003e;

  /* ── neutral ramp, dark theme ───────────────── */
  --pk-gray-50:       #0c0e13;
  --pk-gray-100:      #1c1f27;
  --pk-gray-200:      #2d3037;
  --pk-gray-300:      #45474e;
  --pk-gray-400:      #62646a;
  --pk-gray-500:      #7d8189;
  --pk-gray-600:      #999ea7;
  --pk-gray-700:      #b6bbc4;
  --pk-gray-800:      #d2d4d9;
  --pk-gray-900:      #edeff1;

  /* ── alpha ramp: white laid over any surface ── */
  --pk-alpha-100:     rgba(225, 241, 246, 0.075);
  --pk-alpha-200:     rgba(232, 241, 255, 0.15);
  --pk-alpha-300:     rgba(240, 242, 255, 0.25);
  --pk-alpha-400:     rgba(244, 246, 254, 0.37);
  --pk-alpha-500:     rgba(243, 249, 255, 0.49);
  --pk-alpha-600:     rgba(239, 246, 255, 0.62);
  --pk-alpha-700:     rgba(242, 248, 255, 0.74);
  --pk-alpha-800:     rgba(245, 247, 252, 0.85);
  --pk-alpha-900:     rgba(246, 248, 250, 0.96);

  --pk-border-alpha:  rgba(255, 255, 255, 0.12);

  /* ── content ────────────────────────────────── */
  --pk-content-primary: #edeff1;
  --pk-fixed-white:     #f4f5f7;

  /* ── radius scale (theirs, off a 0.7rem base) ─ */
  --pk-radius:    0.7rem;
  --pk-radius-xs: calc(var(--pk-radius) - 6px);
  --pk-radius-sm: calc(var(--pk-radius) - 4px);
  --pk-radius-md: calc(var(--pk-radius) - 2px);
  --pk-radius-lg: var(--pk-radius);
  --pk-radius-xl: calc(var(--pk-radius) + 4px);
  --pk-radius-2xl: 1rem;
  --pk-radius-3xl: 1.5rem;

  /* ── hover behaviour (theirs: +10% white) ───── */
  --pk-hover-lighter-amount: 10%;

  /* ── their flat surface: a 1px inset ring ───── */
  --pk-shadow-flat: inset 0 0 0 1px var(--pk-border-alpha);

  /* ── page-level ─────────────────────────────── */
  --brand:            #0a2ae0;
  --brand-deep:       #021fc8;
  --brand-deeper:     #00139e;
  --brand-glow:       #3d5cff;

  --card:             rgba(122, 162, 255, 0.50);
  --card-lead:        rgba(126, 168, 255, 0.62);
  --card-line:        rgba(255, 255, 255, 0.30);

  --tray-top:         rgba(10, 48, 220, 0.95);
  --tray-bottom:      rgba(3, 26, 170, 0.96);
  --tray-line:        rgba(255, 255, 255, 0.10);

  --pill:             #10209c;
  --pill-fill:        #2b4bff;

  --ink:              #ffffff;
  --ink-soft:         rgba(255, 255, 255, 0.78);
  --ink-faint:        rgba(255, 255, 255, 0.55);

  --white:            #f5f6fa;

  --r-card:           18px;
  --r-btn:            999px;

  --ease-out:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:        cubic-bezier(0.36, 0.07, 0.19, 0.97);

  /* how far the wordmark travels out from behind the mark */
  --slide:            30px;

  --font: "Open Sauce One", "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #05060a;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The stage owns the layout; the body must not clip it. A page that
     cannot scroll is unreachable content when the window is short or
     the user is zoomed in. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Stage ────────────────────────────────────────────────────
   The whole composition is drawn to a phone-shaped stage and
   then centred, so every breakpoint keeps the same proportions. */

.screen {
  position: relative;
  /* dvw/dvh track the visible viewport as mobile browser chrome
     collapses, so the stage never overflows horizontally or hides
     content under the address bar. vw/vh kept as the fallback. */
  width: 100vw;
  width: 100dvw;
  /* min-height, not height: the stage fills the viewport when there is
     room for it, and is allowed to grow past it when there is not, so
     the page scrolls instead of clipping. */
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(140% 70% at 50% 8%, var(--brand-glow) 0%, transparent 55%),
    linear-gradient(180deg,
      #1236f0 0%,
      #0a2ae0 26%,
      #0620d4 52%,
      #0216ad 82%,
      #000c86 100%);
}

@supports not (height: 100dvh) {
  .screen { min-height: 100vh; }
}

/* The tray and the actions block keep their natural size; the hero
   absorbs the slack, so a tall window grows the top of the page
   rather than stretching the cards. */
.hero { flex: 1 1 auto; }
.tray,
.actions { flex: 0 0 auto; }

/* The notch and home indicator are handled on the edge elements
   rather than on .screen, so the flex children keep their full
   share of the height on a short phone. */
.hero { padding-top: env(safe-area-inset-top); }
.actions { padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }

/* Hold the page still while the splash is up. splash.js adds the class
   on every page; the support page has its own rule scoped to its body
   class, so this one covers the landing page. */
body.splash-lock {
  overflow: hidden;
}

@media (min-width: 640px) {
  /* On a desktop window the phone-shaped stage is centred with room to
     spare. It can grow past the viewport when the window is short —
     the page scrolls rather than clipping — but never shrinks below
     the space the three blocks need. */
  .screen {
    min-height: min(100dvh, 940px);
    margin-top: max(0px, calc((100dvh - min(100dvh, 940px)) / 2));
    margin-bottom: 0;
    border-radius: 34px;
    box-shadow: 0 40px 120px -40px rgba(10, 42, 224, 0.65);
  }
}

@supports not (height: 100dvh) {
  @media (min-width: 640px) {
    .screen { min-height: min(100vh, 940px); }
  }
}

/* ambient blooms */
.screen__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.glow--a {
  width: 70%;
  aspect-ratio: 1;
  top: -22%;
  left: -18%;
  background: radial-gradient(circle, #6d88ff 0%, transparent 68%);
}

.glow--b {
  width: 80%;
  aspect-ratio: 1;
  bottom: -30%;
  right: -26%;
  background: radial-gradient(circle, #1b3cff 0%, transparent 70%);
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(24px, 5vh, 48px) 16px clamp(16px, 3vh, 30px);
  text-align: center;
}

.hero__mark {
  display: block;
  width: clamp(28px, 6.6vw, 36px);
  aspect-ratio: 66 / 100;
  height: auto;
  flex: 0 0 auto;
  color: #fff;
  margin-bottom: clamp(18px, 4vh, 36px);
  animation: mark-in 620ms var(--ease-out) both;
}

.hero__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes mark-in {
  0%   { transform: scale(0.72); opacity: 0; }
  62%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* the title is sized to fit the stage rather than to a fixed rem,
   so "EVERYTHING" never runs past the right padding */
.hero__title {
  margin: 0;
  font-size: clamp(28px, 9.2vw, 46px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.026em;
  text-transform: uppercase;
  max-width: 100%;
  text-shadow: 0 2px 26px rgba(0, 24, 140, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; opacity: 1; transform: none; }
}

/* ── Market tray ──────────────────────────────────────────────
   Cards are absolutely placed inside a clipped tray so the
   bleed off each edge is exact instead of depending on
   negative-margin arithmetic that drifts per viewport. */

.tray {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: clamp(240px, 29vh, 278px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--tray-top) 0%, var(--tray-bottom) 100%);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--tray-line);
  box-shadow: 0 -18px 60px -30px rgba(0, 10, 80, 0.85);
}

.tray__track {
  position: absolute;
  top: clamp(26px, 4.4vh, 40px);
  left: -16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}

.tray__row {
  display: flex;
  gap: 12px;
}

/* faint bottom fade so the tray melts into the actions block
   without swallowing the lead card's footer */
.tray::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--tray-bottom) 96%);
}

.card {
  position: relative;
  width: 190px;
  height: 128px;
  flex: 0 0 auto;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--card-line);
  background: var(--card);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  animation: card-in 560ms var(--ease-out) both;
}

.card--lead {
  width: 252px;
  background: var(--card-lead);
}

.tray__row:nth-child(2) .card { animation-delay: 90ms; }

@keyframes card-in {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; opacity: 1; transform: none; }
}

.card__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.24;
  color: var(--ink);
}

.card__time {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ── Trailing card rows ──────────────────────────────────── */

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}

.row__odds {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.row__pct {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 84px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--pill);
}

/* the fill rides inside the pill, so it can never drift out of
   alignment the way a separately positioned element does */
.row__pct::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  border-radius: 11px 0 0 11px;
  background: linear-gradient(90deg, var(--pill-fill) 0%, #1d3ae0 100%);
}

/* ── Lead card options ───────────────────────────────────── */

.options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.option__icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.option__icon svg { display: block; width: 14px; height: 14px; }

.option__icon--dem { color: #4285f4; }

.option__icon--rep { background: #e4342c; color: #fff; }

.option__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.option__pct {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.option__bar { display: none; }

/* ── Lead card footer ────────────────────────────────────── */

.card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}

.pip {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

/* ── Actions ─────────────────────────────────────────────── */

.actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding: clamp(16px, 2.8vh, 26px) 20px calc(clamp(18px, 3.2vh, 30px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: var(--tray-bottom);
}

.btn {
  position: relative;
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), filter 160ms linear;
  -webkit-tap-highlight-color: transparent;
}

.btn__logo { flex: 0 0 auto; width: 19px; height: 19px; }

.btn:active { transform: scale(0.977); }

.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.btn--google {
  background: var(--white);
  color: #14181f;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}

.btn--google:hover { filter: brightness(0.965); }

.btn--apple {
  background: linear-gradient(180deg, #3f74f5 0%, #2f63ef 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 24px -14px rgba(0, 0, 0, 0.6);
}

.btn--apple:hover { filter: brightness(1.055); }

.btn:disabled { opacity: 0.62; cursor: default; }

/* ── Legal ───────────────────────────────────────────────── */

.legal {
  margin: 5px auto 0;
  max-width: 300px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.60);
}

.legal__link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.legal__link:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════
   SPLASH
   The lockup lives here: the mark lands, then the wordmark
   slides out from behind it. Dismissal is driven by a CSS
   animation with a forwards fill so the splash can never
   strand the page on a blue screen if JS is slow or blocked.
   ════════════════════════════════════════════════════════════ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #0a2ae0;
  /* the node is injected by splash.js; keep it out of scroll flow */
  overflow: hidden;
}

/* The blue stays. Only the lockup leaves.

   Fading the whole overlay was the flash: for the ~480ms between the
   fade starting and the navigation firing, whatever sits underneath
   index.html was visible through it. Holding solid blue and cutting to
   the next page — which opens on the same blue — removes the window
   entirely. */
.splash__lockup {
  animation: lockup-out 420ms var(--ease-soft) 2350ms forwards;
}

@keyframes lockup-out {
  to { opacity: 0; transform: scale(0.94); }
}

/* Safety net only: if navigation somehow hasn't happened, JS clears the
   node outright so the splash can never strand the page. */
.splash.is-hidden,
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms linear, visibility 0s linear 180ms;
}

.splash__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  /* reserve the room the word is about to occupy so nothing
     reflows at the moment it appears */
  padding-left: var(--slide);
}

.splash__mark {
  display: block;
  width: 40px;
  aspect-ratio: 66 / 100;
  height: auto;
  flex: 0 0 auto;
  color: #fff;
  position: relative;
  z-index: 2;
  animation: splash-mark 560ms var(--ease-out) both;
}

.splash__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes splash-mark {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* the word starts tucked behind the mark and travels right */
.splash__word {
  display: block;
  position: relative;
  z-index: 1;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: #fff;
  white-space: nowrap;
  /* negative margin equal to the travel distance puts the word's
     left edge under the mark's footprint at rest */
  margin-left: calc(var(--slide) * -1);
  padding-left: calc(var(--slide) + 9px);
  opacity: 0;
  animation: word-out 560ms var(--ease-out) 620ms both;
}

@keyframes word-out {
  from {
    transform: translateX(calc(var(--slide) * -1));
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    transform: translateX(0);
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash__mark,
  .splash__word { animation: none; opacity: 1; transform: none; clip-path: none; }
}

/* ── Short viewports ─────────────────────────────────────── */

@media (max-height: 720px) {
  .hero__mark { margin-bottom: 18px; }
  .hero__title { font-size: clamp(28px, 9.4vw, 42px); }
  .tray { height: clamp(206px, 30vh, 260px); }
  .card { height: 116px; }
}

@media (max-height: 600px) {
  .card__foot { display: none; }
  .card { height: 108px; padding: 12px 13px; gap: 8px; }
}