/* ------------------------------------------------------------------
   The front page, and the only stylesheet that owns it.

   It replaces eleven. The homepage used to load platform, season,
   home, watch, live-v2, game-ui, shell, motion, experience, theme,
   room-guide, featured-live, interaction-arena and glass, and the
   overlapping bugs on it were not mistakes anyone made in one file:
   three of those stylesheets each positioned a panel over the video,
   so the picture carried a side panel, a floating vote card and two
   docks at once, and the countdown was clipped by whichever landed
   last.

   So this file is the single owner. It depends on exactly two others,
   both of which it uses rather than fights:

     tokens.css   the palette, the type, the radius scale
     motion.css   [data-reveal] and the .tap / .lift press feedback

   Anything the page shows is styled here. If a rule for the homepage
   is ever needed again, it belongs in this file, not in a twelfth one.
   ------------------------------------------------------------------ */

:root {
  /*
   * The brand violet.
   *
   * tokens.css assigns crowdplay to --volt, which is #0000be, and that
   * is a field colour: as a button on a #101010 ground it is nearly
   * invisible, and white on it barely clears contrast. The wordmark is
   * chrome magenta-to-cyan, and the rest of this page was already
   * tinting its cards #b56cff to match it, so the violet is what the
   * page actually uses. It is declared here, page-locally, rather than
   * redefining a token every other screen reads.
   *
   * The three roles are strict, because a colour that means two things
   * means nothing:
   *
   *   violet  the brand, crowdplay, anything you press to go
   *   green   coins and values only                   (--signal)
   *   red     live, and nothing else                  (--live)
   */
  --brand:    #b56cff;
  --brand-hi: #c68fff;
  --brand-dim: rgba(181, 108, 255, .14);
  --brand-edge: rgba(181, 108, 255, .38);

  --page:  1220px;   /* the measure everything lines up to */
  --gut:   24px;
}

/* ---------------- the frame ---------------- */

body.home-page {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* a stage that bleeds 2px must not scroll the page */
}

.home-page * { box-sizing: border-box; }

/*
 * The attribute wins.
 *
 * home.js hides #balance, #tier and #continue with the
 * hidden attribute, and any class rule here that sets display would beat
 * the user agent's [hidden] on specificity. The signed-out coin chip shipped
 * showing a bare em dash for exactly that reason.
 */
.home-page [hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gut);
  /*
   * The rail takes 300px out of the viewport, or 64px collapsed, so a
   * viewport media query cannot tell the page how much room it has: at
   * 1280px the content is 980px with the rail open and 1216px without it,
   * and the two want different layouts. Everything inside therefore sizes
   * off this container, not the window.
   */
  container: page / inline-size;
}

/* Follow the shell's available width in both navigation states. */
main.wrap { max-width: none; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; letter-spacing: -.03em; line-height: 1.05; font-weight: 800; }

/* ---------------- the app shell, after Kick ---------------- */

/*
 * A 60px bar across the top and a 300px rail of channels down the left,
 * which is the shape Kick uses and the shape this platform had before the
 * front page was rebuilt. Ethan asked for it back.
 *
 * The behaviour is shell.js, untouched: it lifts the .ar-top header in the
 * markup into the fixed bar, builds the rail, remembers whether the rail is
 * collapsed, and turns it into a drawer under 900px. Only the looks live
 * here.
 *
 * The looks are NOT shell.css, and that is deliberate. That file styles the
 * bar and the rail, but it also carries a pile of front page rules
 * (#arcade.hm-arcade, .hm-how-title, .hm-people .kk-card, .hm-lobby, an
 * !important padding on .hm-body), and an id selector like #arcade beats
 * anything written here. Linking it would hand the page a second owner,
 * which is the thing that made the old homepage overlap itself. So the
 * chrome is drawn here, in this page's palette, and shell.css stays where
 * it belongs: on the pages that still use the rest of it.
 */

:root {
  --bar:   60px;
  --rail:  300px;
  --rail-min: 64px;
}

.page-shell {
  min-height: 100vh;
  padding-top: var(--bar);
}

/* The rail's width, once shell.js has said which state it is in. */
body.kk-ready .page-shell { padding-left: var(--rail); transition: padding-left 440ms var(--ease); }
body.kk-ready.kk-collapsed .page-shell { padding-left: var(--rail-min); }

/*
 * Before shell.js lifts it, .ar-top is a block at the top of the page, and
 * for that one frame the logo and the sign-in door sit in the document
 * flow above the hero. Held out of the way rather than drawn twice.
 */
body.kk-ready:not(.kk-mounted) .ar-top {
  position: fixed;
  inset: 0 0 auto;
  height: var(--bar);
  visibility: hidden;
}

/* ---- the bar ---- */

.kk-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: rgba(10, 10, 10, .92);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.kk-burger {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  transition: background .15s ease;
}
.kk-burger:hover { background: var(--glass); }

/* The header from the markup, once it has been lifted in here. */
.kk-top .ar-top {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.kk-top .ar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kk-top .ar-mark { display: flex; align-items: center; flex-shrink: 0; }
.kk-top .ar-mark img { height: 48px; width: auto; display: block; }

/* The rail carries navigation, so the bar does not repeat it. */
.kk-top .ar-nav { display: none; }

.kk-top .ar-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.ar-bal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--ink);
}
#tier.ar-bal { color: var(--muted); }
#tier.ar-bal:hover { color: var(--ink); border-color: var(--line-hard); }

.ar-tag {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease;
}
.ar-tag:hover { background: var(--glass); }
.account-signout {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.account-signout:hover { border-color: var(--line-hard); }
.account-signout:disabled { opacity: .65; cursor: wait; }

/*
 * The visitor's one door. shell.js swaps #who to "Get started" and adds
 * .kk-glass, and motion.css runs a sheen across it on hover.
 */
.kk-top .ar-tag.kk-glass {
  padding: 9px 19px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #0a0a0a;
  font-weight: 700;
}
.kk-top .ar-tag.kk-glass:hover { background: #fff; }

/* ---- the rail ---- */

.kk-side {
  position: fixed;
  top: var(--bar);
  left: 0;
  bottom: 0;
  z-index: 60;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 8px 24px;
  background: var(--void);
  border-right: 1px solid var(--line);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: width 440ms var(--ease);
}
body.kk-collapsed .kk-side { width: var(--rail-min); }

.kk-nav {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.kk-nav:hover { background: var(--card); }
.kk-nav.is-on { background: var(--card); }

.kk-nav i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-style: normal;
  color: var(--muted);
}
.kk-nav i svg { width: 20px; height: 20px; display: block; }
.kk-nav.is-on i { color: var(--brand); }
.kk-nav.is-on i svg { stroke: var(--brand); }

.kk-sep { flex-shrink: 0; height: 1px; margin: 9px 4px; background: var(--line); }

.kk-side-h {
  padding: 8px 12px 5px;
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/*
 * The empty rail. shell.js writes "Nobody is live right now" into the list
 * using the same .kk-side-h class as the "Live channels" heading above it,
 * so without this the page says the same thing twice in the same tiny
 * tracked capitals and neither line reads as the answer.
 */
#kk-list .kk-side-h {
  padding: 12px;
  margin: 2px 4px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: normal;
}
body.kk-collapsed #kk-list .kk-side-h { display: none; }

.kk-ch {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background .15s ease;
}
.kk-ch:hover { background: var(--card); }

.kk-ch-av {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--raised);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  overflow: hidden;
}
.kk-ch-av img { width: 100%; height: 100%; object-fit: cover; }
/* Live is red here, the way it is everywhere else on the page. */
.kk-ch.is-live .kk-ch-av { border-color: var(--live); }

.kk-ch-body { min-width: 0; display: flex; flex-direction: column; }
.kk-ch-body b {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kk-ch-body small {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kk-ch-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.kk-ch.is-live .kk-ch-n::before {
  content: '\25CF ';
  color: var(--live);
  font-size: 9px;
  vertical-align: 1px;
}

/* Your day, signed in. */
.kk-day {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 4px 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
}
.kk-day b { font-size: 13px; font-weight: 700; }
.kk-day small { font-size: 12px; color: var(--muted); }
.kk-day .kk-bar { height: 4px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; }
.kk-day .kk-bar i { display: block; height: 100%; background: var(--brand); }
.kk-day a { font-size: 12.5px; font-weight: 700; color: var(--brand); }

/* Collapsed to icons, and it remembers. */
body.kk-collapsed .kk-side-h,
body.kk-collapsed .kk-ch-body,
body.kk-collapsed .kk-ch-n,
body.kk-collapsed .kk-nav span,
body.kk-collapsed .kk-day { display: none; }
body.kk-collapsed .kk-ch { grid-template-columns: 32px; justify-content: center; padding: 7px 8px; }
body.kk-collapsed .kk-nav { justify-content: center; padding: 10px 8px; }

.kk-veil { display: none; }

/*
 * Under 900px the rail stops holding a column open and becomes a drawer the
 * burger opens, which is what shell.js already expects: it toggles
 * body.kk-drawer, makes the rail inert while it is shut, and closes it on a
 * tap outside, on any link in it, and on Escape.
 */
@media (max-width: 900px) {
  .kk-side {
    width: 282px;
    z-index: 82;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 440ms var(--ease), visibility 0s 440ms;
  }
  body.kk-collapsed .kk-side { width: 282px; }
  body.kk-ready .page-shell,
  body.kk-ready.kk-collapsed .page-shell { padding-left: 0; }

  body.kk-drawer .kk-side {
    visibility: visible;
    transform: none;
    transition-delay: 0s;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .6);
  }
  .kk-veil {
    display: block;
    position: fixed;
    inset: var(--bar) 0 0;
    z-index: 81;
    background: rgba(0, 0, 0, .58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms var(--ease), visibility 0s 320ms;
  }
  body.kk-drawer .kk-veil {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  /* The drawer is the navigation on a phone, so it never hides its labels. */
  body.kk-collapsed .kk-side-h,
  body.kk-collapsed .kk-ch-body,
  body.kk-collapsed .kk-ch-n,
  body.kk-collapsed .kk-nav span,
  body.kk-collapsed .kk-day,
  body.kk-collapsed #kk-list .kk-side-h { display: revert; }
  body.kk-collapsed .kk-ch { grid-template-columns: 32px 1fr auto; padding: 7px 12px; }
  body.kk-collapsed .kk-nav { justify-content: flex-start; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kk-side, .kk-veil, body.kk-ready .page-shell { transition: none; }
}

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease,
              border-color .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-go {
  background: var(--brand);
  color: #14031f;
  box-shadow: 0 10px 30px -12px rgba(181, 108, 255, .7);
}
.btn-go:hover { background: var(--brand-hi); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-hard);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--glass); }

/* The small call to action home.js renders inside cards and rows. */
.hm-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #14031f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.hm-cta:hover { background: var(--brand-hi); transform: translateY(-1px); }
.hm-cta:disabled { background: var(--raised); color: var(--muted); cursor: default; transform: none; }

/* ---------------- section rhythm ---------------- */

/*
 * Nine sections used to sit in the same box at the same size with the
 * same head, so the page read as one long undifferentiated column.
 * The rhythm here is deliberate: a generous gap between sections, a
 * tight one inside them, and one section per idea.
 */
.hm-sec { margin: 0 0 76px; }

.hm-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 20px;
}

.hm-head b {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.hm-head > span {
  font-size: 12.5px;
  color: var(--muted);
}

/* The carousel arrows mountRowNav appends to the head. */
.hm-row-nav { margin-left: auto; display: flex; gap: 8px; }
.hm-row-nav button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.hm-row-nav button:hover:not(:disabled) { border-color: var(--line-hard); background: var(--glass); }
.hm-row-nav button:disabled { opacity: .3; cursor: default; }

/* ---------------- the hero ---------------- */

/* The selected video or #1 live creator owns the first screen. */
.hero {
  display: grid;
  scroll-margin-top: var(--bar);
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) 44px;
  /* Leave room for the introduction while keeping the player in the first screen. */
  height: min(calc(56.25cqw + 260px), calc(100svh - var(--bar)));
  gap: 12px;
  padding: 20px 0 24px;
}
.hero-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.hero h1 {
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(30px, 3.5cqw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.hero h1 em { color: #be8df5; font-style: normal; }
.hero-intro { flex: 0 0 340px; padding-bottom: 2px; }
.hero-intro > p { margin: 0 0 16px; max-width: 42ch; color: var(--muted); font-size: 14px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.hero-copy > p {
  margin: 20px 0 0;
  max-width: 42ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--faint);
}

/*
 * The live count, which is counted and not claimed: mountClock puts
 * the real number here, and marks itself idle when the answer is none.
 * Red, and pulsing, only when something is genuinely on.
 */
.hero-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--surge-dim);
  border-radius: var(--r-pill);
  background: var(--surge-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ff8d84;
}
.hero-clock i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: hb 1.9s ease-in-out infinite;
}
@keyframes hb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-clock.is-idle {
  border-color: var(--line);
  background: transparent;
  color: var(--faint);
}
.hero-clock.is-idle i { background: var(--faint); animation: none; }

/* ---------------- the stage ---------------- */

/*
 * One clean picture.
 *
 * Everything that used to sit on top of the video (a 390px interaction
 * panel, a five button dock, a utilities cluster, a floating vote card
 * and a floating countdown) is gone from here. Two of those were the
 * same vote rendered twice by two different systems. What the crowd is
 * deciding now appears UNDER the frame, in .st-crowd, where it cannot
 * cover the thing it is about.
 */
.hero-stage { position: relative; min-width: 0; min-height: 0; }
.hero-stage #feature { height: 100%; min-height: 0; }
.hero-stage .hm-feature-loading { height: 100%; min-height: 0; aspect-ratio: auto; }
.hero-frame { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.hero-frame[hidden] { display: none; }
.hero-frame:not([hidden]) { animation: hero-frame-in 420ms var(--ease) both; }
@keyframes hero-frame-in { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
.hero-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.hero-frame-tabs { display: flex; gap: 5px; min-width: 0; height: 100%; }
.hero-frame-tabs button { display: inline-flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: background 180ms, color 180ms, border-color 180ms; white-space: nowrap; }
.hero-frame-tabs button > span { font: 10px var(--mono); color: var(--faint); }
.hero-frame-tabs button[aria-selected="true"] { border-color: #b56cff40; background: #b56cff13; color: var(--ink); }
.hero-frame-tabs button[aria-selected="true"] > span { color: var(--brand); }
.hero-frame-tabs button:hover { color: var(--ink); background: var(--card); }
.hero-frame-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hero-frame-nav button { width: 34px; height: 34px; }
.hero-astral { overflow: hidden; isolation: isolate; border: 1px solid #b56cff30; border-radius: var(--r-lg); background: #0b0d17; }
.hero-astral-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-astral::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #070812eb, #080a1255 62%, #080a1200), linear-gradient(0deg, #08091188, transparent 65%); pointer-events: none; }
.hero-astral-copy { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(12px, 2cqw, 24px); padding: clamp(24px, 4cqw, 64px); }
.hero-astral-kicker { color: #cbb3ed; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .16em; }
.hero-astral-copy h2 { color: #fff; font-size: clamp(40px, 7.5cqw, 108px); font-weight: 900; line-height: .88; letter-spacing: -.055em; }
.hero-astral-copy p { color: #d2cdd9; font-size: clamp(13px, 1.4cqw, 18px); line-height: 1.5; margin: 0; }
.hero-astral-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-astral-actions .is-epic { background: #10111c80; color: #fff; }
.hero-video-toggle, .hero-video-source { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 10px; border: 1px solid #ffffff38; border-radius: 50%; background: #101012b3; color: white; cursor: pointer; }
.hero-video-toggle:hover, .hero-video-source:hover { background: #101012; border-color: #ffffff80; }
.hero-video-toggle[hidden], .hero-video-source[hidden] { display: none; }
.hero-video-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-video-toggle .hero-video-play { fill: currentColor; stroke: none; }
.hero-video-toggle[data-playing="true"] .hero-video-play, .hero-video-toggle[data-playing="false"] .hero-video-pause { display: none; }
.hero-video-source { border-radius: 8px; font-size: 11px; text-decoration: none; }
@media (max-width: 600px) { .hero-video-toggle { right: 10px; bottom: 10px; min-width: 44px; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-frame:not([hidden]) { animation: none; }
  .hero-frame-tabs button { transition: none; }
}

.st {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}

.st-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #000;
  overflow: hidden;
}

.st-shot, .st-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-shot { transition: opacity .4s ease; }

/*
 * The fallback artwork. common.js hands back a .letters span with a
 * generated gradient when a stream has no thumbnail, and nothing on this
 * page had ever styled it, so it drew as two small letters in the corner
 * of an otherwise black frame.
 */
.st-shot .letters {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 900;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .5);
}
.st-shot.is-playing { opacity: 0; }
.st-video[hidden] { display: none; }
.st-video { object-fit: contain; }

.st-standby {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(ellipse at center, #211629, #0b0b0d 72%);
}
.st-standby-logo { position: relative; width: min(38%, 330px); height: auto; }
.st-standby-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.st-standby > span { position: relative; color: var(--muted); font-size: 14px; }
.st-standby-link { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:44px; padding:10px 18px; border:1px solid #ffffff26; border-radius:12px; background:#ffffff08; color:#ececf1; font-size:13px; font-weight:600; transition:background .2s,border-color .2s; }
.st-standby-link:hover { background:#ffffff12; border-color:#ffffff45; }
.st-standby-link:focus-visible { outline:2px solid #d2d7e1; outline-offset:4px; }
@media(max-height:650px) { .st-standby { gap:12px; }.st-standby-logo { width:min(25%,220px); } }
@media(prefers-reduced-motion:reduce) { .st-standby-link { transition:none; } }

/* A wash top and bottom, so white text on any picture stays readable. */
.st-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.7) 0%, transparent 26%),
    linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 34%);
}

.st-id {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.st-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  background: var(--live);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}
.st-flag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: hb 1.9s ease-in-out infinite;
}
.st-flag.is-replay { background: rgba(0, 0, 0, .66); color: var(--ink); backdrop-filter: blur(6px); }

.st-id-copy { min-width: 0; }
.st-id-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
  /* One line, clipped. The title used to run under the panel beside it. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-id-copy > span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}
.st-id:hover .st-id-copy strong { text-decoration: underline; text-underline-offset: 3px; }

.st-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .8);
  text-align: center;
}
.st-status[hidden] { display: none; }

/* The control bar: one row, on the picture, nothing else beside it. */
.st-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.st-controls { display: flex; align-items: center; gap: 2px; }

.st-controls button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.st-controls button:hover { background: rgba(255, 255, 255, .16); }
.st-controls button svg { width: 19px; height: 19px; }
.st-controls #stage-live {
  width: auto;
  padding: 0 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.st-room {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s ease;
}
.st-room:hover { background: rgba(255, 255, 255, .26); }

/*
 * What the crowd is deciding, under the picture rather than over it.
 * Read only on purpose: the hero shows that a vote is happening and
 * sends you to the room to cast one. Voting on the homepage is what
 * put a panel over the video in the first place, and the playable
 * demonstration is one section further down.
 */
.st-crowd {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--brand-dim);
}
.st-crowd[hidden] { display: none; }

.st-crowd-tag {
  flex-shrink: 0;
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--brand);
}
.st-crowd b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.st-crowd-opts {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--muted);
}
.st-crowd-opts span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
}
.st-crowd a {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.st-crowd a:hover { color: var(--brand-hi); }

/* Nothing on air. Honest, and it offers the practice round instead. */
.hl-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 82% 12%, var(--brand-dim), transparent 60%),
    var(--card);
}
.hl-empty > span {
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--brand);
}
.hl-empty h2 { font-size: 27px; }
.hl-empty p { margin: 0; max-width: 40ch; color: var(--muted); font-size: 14.5px; }
.hl-empty a { margin-top: 8px; font-weight: 700; color: var(--brand); }

.hm-feature-loading {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--faint);
  font-size: 13px;
}

/* ---------------- channel and game cards ---------------- */

/*
 * One card, used by both the network row and the arcade, because they
 * are the same object: a 16:9 picture with what is true about it
 * printed on the corner.
 */
.hm-people {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.hm-people::-webkit-scrollbar { display: none; }

.kk-card { scroll-snap-align: start; min-width: 0; }

.kk-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--tint, #b56cff) 26%, #131313), #121212);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.kk-card:hover .kk-thumb { border-color: var(--brand-edge); transform: translateY(-3px); }

.kk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kk-thumb-fill {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .34);
}

.kk-live, .kk-count, .kk-cat-pill {
  position: absolute;
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.kk-live { top: 9px; left: 9px; background: var(--live); color: #fff; }
.kk-count {
  bottom: 9px;
  left: 9px;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--mono);
  letter-spacing: .02em;
  text-transform: none;
}
.kk-cat-pill {
  top: 9px;
  right: 9px;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .8);
}

.kk-meta { display: flex; gap: 11px; margin-top: 12px; min-width: 0; }

.kk-av {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--raised);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  overflow: hidden;
}
.kk-av img { width: 100%; height: 100%; object-fit: cover; }

.kk-meta > span:last-child { min-width: 0; }
.kk-meta b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kk-card:hover .kk-meta b { color: var(--brand); }
.kk-meta small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kk-meta small:last-child { color: var(--faint); }

/* A roomy stream carousel, independent of the smaller Arcade cards. */
.hm-network { scroll-margin-top: calc(var(--bar) + 24px); }
.nw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.nw-eyebrow { display: block; margin-bottom: 9px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nw-head h2 { margin: 0; font-size: clamp(28px, 3cqw, 40px); line-height: 1.1; letter-spacing: -.045em; font-weight: 800; }
.nw-head p { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.nw-nav { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.nw-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-hard); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, transform .2s, opacity .2s; }
.nw-nav button:hover:not(:disabled) { background: var(--brand-dim); border-color: var(--brand); transform: translateY(-2px); }
.nw-nav button:disabled { opacity: .3; cursor: default; }
.nw-nav button:first-child { margin-right: 4px; color: var(--muted); }
.nw-nav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nw-nav .nw-play-icon { fill: currentColor; stroke: none; }
.nw-nav [data-playing="true"] .nw-play-icon, .nw-nav [data-playing="false"] .nw-pause-icon { display: none; }
.hm-network .nw-track { position: relative; grid-auto-columns: clamp(340px, 44%, 620px); gap: 24px; padding: 6px 0 14px; margin-top: -6px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; cursor: grab; }
.nw-track.is-moving, .nw-track.is-dragging { scroll-snap-type: none; }
.nw-track.is-dragging, .nw-track.is-dragging * { cursor: grabbing; user-select: none; }
.nw-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; border-radius: 16px; }
.hm-network .kk-card { display: block; text-decoration: none; color: var(--ink); min-width: 0; }
.hm-network .kk-thumb { border-radius: 18px; isolation: isolate; transition: border-color 260ms ease, transform 420ms cubic-bezier(.2,.75,.2,1), box-shadow 420ms ease; }
.hm-network .kk-thumb > img { transition: transform 700ms cubic-bezier(.2,.75,.2,1); }
.hm-network .kk-card:hover .kk-thumb, .hm-network .kk-card:focus-visible .kk-thumb { transform: translateY(-4px); border-color: var(--brand-edge); box-shadow: 0 12px 32px #0004; }
.hm-network .kk-card:hover .kk-thumb > img { transform: scale(1.04); }
.hm-network .kk-meta { align-items: center; gap: 13px; margin-top: 16px; }
.hm-network .kk-meta b { font-size: clamp(16px, 1.8cqw, 21px); font-weight: 750; margin-bottom: 7px; }
.hm-network .kk-meta small { font-size: 13px; color: var(--muted); }
.hm-network .kk-av { width: 46px; height: 46px; font-size: 17px; color: var(--tint, var(--brand)); border: 1px solid color-mix(in srgb, var(--tint, var(--brand)) 45%, transparent); background: color-mix(in srgb, var(--tint, var(--brand)) 12%, #151515); }
.nw-creator-dot { margin: 0 5px; font-size: 6px; vertical-align: middle; color: var(--faint); }
.nw-preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0005, transparent 40%, #000b); pointer-events: none; }
.nw-preview-label { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #ffffff30; border-radius: 6px; background: #101014d9; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.nw-preview-label i { width: 5px; height: 5px; border-radius: 50%; background: #ff545f; box-shadow: 0 0 9px #ff545f80; }
.hm-network .kk-cat-pill { top: 14px; right: 14px; font-size: 9px; padding: 6px 9px; text-transform: none; }
.nw-preview-action { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 32px); font-size: 12px; font-weight: 650; color: #fff; text-shadow: 0 1px 4px #000; transition: opacity .25s; }
.nw-preview-action > span { color: var(--tint); font-size: 17px; }
.nw-preview-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #ffffff55; border-radius: 50%; background: #10101480; backdrop-filter: blur(12px); opacity: 0; transform: translate(-50%, -40%) scale(.85); transition: transform 380ms cubic-bezier(.2,.75,.2,1), opacity 300ms; }
.nw-preview-play svg { width: 24px; height: 24px; fill: #fff; }
.nw-preview-cta { position: absolute; bottom: 16px; left: 16px; color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s; }
.nw-preview-card:is(:hover,:focus-visible) .nw-preview-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.nw-preview-card:is(:hover,:focus-visible) .nw-preview-cta { opacity: 1; transform: none; }
.nw-preview-card:is(:hover,:focus-visible) .nw-preview-action { opacity: 0; }
.nw-preview-cam { position: absolute; right: 14px; bottom: 14px; width: 24%; height: 43%; display: block; overflow: hidden; border: 2px solid var(--tint); border-radius: 9px; background: #091a1c; box-shadow: 0 4px 16px #0006; }
.nw-preview-cam img { object-fit: contain; }
.nw-footer { display: flex; align-items: center; gap: 20px; padding-top: 14px; }
.nw-count { font: 11px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.nw-dots { display: flex; align-items: center; gap: 3px; }
.nw-dots button { width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.nw-dots button::before { content: ''; width: 5px; height: 5px; border-radius: 5px; background: #ffffff30; transition: width .4s cubic-bezier(.2,.75,.2,1), background .3s; }
.nw-dots button[aria-current="true"]::before { width: 20px; background: var(--brand); }
.nw-footer > a { margin-left: auto; color: var(--muted); font-size: 12px; text-decoration: none; }
.nw-footer > a:hover { color: var(--ink); }
.nw-nav button:focus-visible, .nw-dots button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.hm-network:not(.nw-can-scroll) .nw-nav, .hm-network:not(.nw-can-scroll) .nw-dots, .hm-network:not(.nw-can-scroll) .nw-count { visibility: hidden; }
@container page (max-width: 760px) {
  .nw-head { gap: 14px; margin-bottom: 18px; }
  .nw-head h2 { font-size: 29px; }
  .nw-head p { font-size: 12px; max-width: 30ch; line-height: 1.5; }
  .nw-eyebrow { font-size: 9px; margin-bottom: 7px; }
  .nw-nav { gap: 5px; }
  .nw-nav button { width: 36px; height: 36px; }
  .nw-nav button:first-child { margin-right: 0; }
  .hm-network .nw-track { grid-auto-columns: 88%; gap: 16px; }
  .hm-network .kk-thumb { border-radius: 14px; }
  .hm-network .kk-meta { gap: 10px; margin-top: 13px; }
  .hm-network .kk-meta b { font-size: 17px; }
  .hm-network .kk-meta small { font-size: 12px; }
  .hm-network .kk-av { width: 40px; height: 40px; font-size: 15px; }
  .nw-footer { gap: 10px; padding-top: 8px; }
}
@media (max-width: 440px) {
  .nw-head { flex-wrap: nowrap; align-items: center; }
  .nw-head > div:first-child { flex: 1; min-width: 0; }
  .nw-head h2 { font-size: 25px; }
  .nw-head p { max-width: 23ch; }
  .nw-preview-label { left: 10px; top: 10px; font-size: 8px; }
  .hm-network .kk-cat-pill { top: 10px; right: 10px; font-size: 8px; }
  .nw-preview-action { left: 12px; bottom: 12px; font-size: 10px; }
  .nw-footer > a { font-size: 11px; }
  .nw-count { font-size: 10px; }
  .nw-dots { gap: 0; }
  .nw-dots button { width: 18px; }
  .nw-dots button[aria-current="true"]::before { width: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-network *, .hm-network *::before { transition: none !important; animation: none !important; }
}

/* Game categories use portrait covers; Astral Sever has the larger lead slot. */
.hm-games { scroll-margin-top: calc(var(--bar) + 24px); }
.hm-games .nw-head { margin-bottom: 24px; }
.ag-tools { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ag-search { display: flex; align-items: center; gap: 10px; width: clamp(220px, 22cqw, 320px); min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff05; color: var(--muted); transition: border-color .2s, background .2s; }
.ag-search:focus-within { border-color: var(--brand); background: #ffffff09; outline: 2px solid #b56cff22; outline-offset: 2px; }
.ag-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ag-search input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 12px 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.ag-search input::placeholder { color: var(--muted); }
.ag-results { min-height: 18px; margin: -8px 0 22px; color: var(--muted); font-size: 12px; }
@container page (max-width: 900px) {
  .hm-games .nw-head { flex-wrap: wrap; }
  .ag-tools { flex: 1 0 100%; justify-content: space-between; }
  .ag-search { flex: 1; width: auto; max-width: 420px; }
  .ag-search input { font-size: 16px; }
}
.hm-games .nw-nav button:first-child { margin-right: 0; color: var(--ink); }
.ag-track { --cover-width: clamp(180px, 18cqw, 236px); display: flex; align-items: flex-end; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; padding: 8px 2px 16px; margin: -8px -2px 0; cursor: grab; }
.ag-track::-webkit-scrollbar { display: none; }
.ag-track.is-moving, .ag-track.is-dragging { scroll-snap-type: none; }
.ag-track.is-dragging, .ag-track.is-dragging * { cursor: grabbing; user-select: none; }
.ag-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 16px; }
.ag-card { display: block; flex: 0 0 var(--cover-width); min-width: 0; color: var(--ink); text-decoration: none; scroll-snap-align: start; }
.ag-card.ag-featured { flex-basis: calc(var(--cover-width) * 1.1); }
.ag-cover { display: block; position: relative; isolation: isolate; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid #ffffff18; border-radius: 14px; background: radial-gradient(ellipse at 70% 25%, color-mix(in srgb, var(--game-tint) 28%, transparent), transparent 70%), #0c191a; box-shadow: 0 6px 18px #0003; transition: transform 420ms cubic-bezier(.2,.75,.2,1), border-color .25s, box-shadow .4s; }
.ag-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.75,.2,1); }
.ag-cover > img[hidden] { display: none; }
.ag-cover-backdrop { position: absolute; inset: -24px; overflow: hidden; opacity: .42; filter: blur(22px) brightness(.6); pointer-events: none; }
.ag-cover-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.ag-cover-box > img, .ag-cover-tile > img { position: relative; object-fit: contain; z-index: 1; }
.ag-cover-tile > img { width: calc(100% - 20px); margin-inline: 10px; }
.ag-cover-illustration > img { position: absolute; inset: 5% 0 auto; height: 68%; object-fit: contain; }
.ag-cover-box .ag-cover-shade, .ag-cover-tile .ag-cover-shade { display: none; }
.ag-cover-fallback { display: none; position: absolute; inset: 0; padding: 24px; align-items: center; justify-content: center; text-align: center; font-size: 25px; font-weight: 800; line-height: 1.1; }
.ag-cover-missing .ag-cover-fallback { display: flex; }
.ag-cover-missing .ag-cover-backdrop { display: none; }
.ag-featured .ag-cover { border-color: #c297ff66; border-radius: 18px; }
.ag-featured .ag-cover > img { object-position: 51% center; }
.ag-cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #08080c18, transparent 30%, #06060b0a 48%, #06060bcc 100%); }
.ag-featured .ag-cover-shade { background: linear-gradient(180deg, #08080c35, transparent 24%, #06060b0a 45%, #06060be6 100%); }
.ag-featured-badge { position: absolute; left: 14px; top: 14px; padding: 7px 10px; border: 1px solid #c297ff55; border-radius: 6px; background: #191125b8; backdrop-filter: blur(10px); font-size: 9px; font-weight: 750; color: #ddc5ff; letter-spacing: .025em; }
.ag-cover-type { position: absolute; left: 16px; bottom: 114px; color: #ffffffb0; font-size: 8px; font-weight: 750; letter-spacing: .23em; }
.ag-cover-name { position: absolute; left: 16px; right: 16px; bottom: 48px; color: #fff; font-size: clamp(23px, 2.3cqw, 29px); font-weight: 900; line-height: .98; letter-spacing: -.04em; text-shadow: 0 2px 16px #0006; }
.ag-cover-genre { position: absolute; bottom: 22px; left: 16px; color: var(--game-tint); font-size: 10px; font-weight: 600; }
.ag-cover-subtitle { font-size: .7em; letter-spacing: -.025em; }
.ag-featured .ag-cover-name { left: 16px; right: 16px; bottom: 52px; font-size: clamp(28px, 2.7cqw, 34px); line-height: .92; letter-spacing: -.055em; }
.ag-featured .ag-cover-type { left: 17px; bottom: 128px; font-size: 8px; }
.ag-featured .ag-cover-genre { left: 17px; bottom: 24px; font-size: 10px; }
.ag-cover-open { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff45; border-radius: 50%; background: #08080c80; color: #fff; font-size: 17px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .3s; }
.ag-card:is(:hover, :focus-visible) .ag-cover { transform: translateY(-6px); border-color: var(--game-tint); box-shadow: 0 12px 28px #0006; }
.ag-card:is(:hover, :focus-visible) .ag-cover > img { transform: scale(1.045); }
.ag-card:is(:hover, :focus-visible) .ag-cover-open { transform: none; opacity: 1; }
.ag-card:focus-visible { outline: 2px solid var(--game-tint); outline-offset: 5px; border-radius: 14px; }
.ag-info { display: block; padding: 14px 2px 0; min-height: 60px; }
.ag-info b { display: block; font-size: 16px; font-weight: 750; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-featured .ag-info b { font-size: 17px; }
.ag-info small { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 11px; }
.ag-info .ag-is-live { color: var(--ink); }
.ag-is-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.ag-cover-glyph { display: grid; place-items: center; position: absolute; inset: 0 0 20%; font-size: 90px; color: var(--game-tint); opacity: .5; }
.ag-blackjack-art { position: absolute; inset: 12% 10% 30%; }
.ag-blackjack-art i { display: flex; align-items: center; justify-content: center; position: absolute; left: 4%; top: 6%; width: 65%; height: 78%; border: 1px solid #fff; border-radius: 9px; background: linear-gradient(135deg, #fff, #e7e9dc); box-shadow: 0 8px 18px #0005; color: #101b19; font-size: 58px; font-style: normal; transform: rotate(-16deg); }
.ag-blackjack-art i:last-child { left: 35%; top: 17%; color: #be293b; transform: rotate(14deg); }
.ag-blackjack-art b { position: absolute; left: 9px; top: 6px; font-size: 19px; font-family: Georgia, serif; }
.ag-order-note { margin-left: auto; font-size: 11px; color: var(--faint); }
.hm-games:not(.nw-can-scroll) .nw-nav, .hm-games:not(.nw-can-scroll) .nw-dots, .hm-games:not(.nw-can-scroll) .nw-count { visibility: hidden; }
@container page (max-width: 760px) {
  .ag-track { --cover-width: 160px; gap: 16px; }
  .ag-cover-name { font-size: 21px; left: 13px; right: 13px; }
  .ag-cover-type { left: 14px; bottom: 105px; font-size: 7px; }
  .ag-cover-genre { left: 14px; font-size: 9px; }
  .ag-featured .ag-cover-name { font-size: 28px; left: 14px; right: 14px; bottom: 48px; }
  .ag-featured .ag-cover-type { left: 15px; bottom: 119px; font-size: 7px; }
  .ag-featured .ag-cover-genre { left: 15px; font-size: 9px; }
  .ag-info b { font-size: 14px; }
  .ag-featured .ag-info b { font-size: 15px; }
  .ag-order-note { max-width: 25ch; text-align: right; font-size: 10px; line-height: 1.5; }
}
@media (max-width: 440px) {
  .ag-track { --cover-width: 142px; gap: 14px; }
  .ag-featured .ag-cover-name { font-size: 26px; }
  .ag-cover-type { bottom: 101px; }
  .ag-featured .ag-cover-type { bottom: 113px; }
  .ag-featured-badge { left: 10px; top: 10px; font-size: 8px; padding: 6px 8px; }
  .ag-cover-name { font-size: 20px; }
  .ag-blackjack-art i { font-size: 43px; }
  .ag-order-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-games *, .hm-games *::before { transition: none !important; animation: none !important; }
}

/* ---------------- the demonstration ---------------- */

/*
 * The thing the product actually is, playable, with no account and no
 * network. It sits second on the page because a claim about viewers
 * changing a game is worth less than one hand of it.
 */
.ix-demo {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}

.ix-table {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(63, 220, 111, .09), transparent 62%),
    #0d120e;
  border-right: 1px solid var(--line);
}

.ix-table-top, .ix-table-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--faint);
}
.ix-table-bottom { margin-top: auto; }

.ix-badge {
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ix-seat { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ix-seat > span {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ix-seat b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
}

.ix-cards { display: flex; gap: 8px; }

.ix-card {
  display: grid;
  place-items: center;
  position: relative;
  width: 50px;
  height: 70px;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: #12100f;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8);
}
.ix-card small { font-size: 13px; }
.ix-card-red { color: var(--red); }
.ix-card-back {
  background: linear-gradient(145deg, #2a1046, #140724);
  border: 1px solid var(--brand-edge);
  color: var(--brand);
}
.ix-card-new { animation: dealt .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes dealt {
  from { opacity: 0; transform: translateY(-14px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

.ix-table-message {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .3);
  font-size: 13.5px;
  color: var(--ink);
}

.ix-decision { padding: 30px 28px; display: flex; flex-direction: column; }

.ix-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

.ix-decision h2 { margin: 12px 0 0; font-size: 27px; }
.ix-decision > p { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }

.ix-choices { display: grid; gap: 10px; margin: 22px 0 0; }

.ix-choices button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 18px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ix-choices button:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-dim);
  transform: translateX(3px);
}
.ix-choices button b { font-size: 15px; display: flex; gap: 8px; align-items: center; }
.ix-choices button small { font-size: 12.5px; color: var(--muted); }
.ix-choices button:disabled { cursor: default; opacity: .5; }
.ix-choices button.is-selected {
  opacity: 1;
  border-color: var(--brand);
  background: var(--brand-dim);
}

.ix-feedback {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 2px solid var(--line-hard);
  font-size: 13px;
  color: var(--muted);
}
.ix-feedback.is-result { border-left-color: var(--signal); color: var(--ink); }

.ix-demo-next {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 700;
}
.ix-demo-next a { color: var(--brand); }
.ix-text-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
.ix-text-button:hover { color: var(--ink); }

.ix-fine { margin: 16px 0 0; font-size: 11.5px; color: var(--faint); }

/* ---------------- learn Crowdplay by playing ---------------- */

.hm-crowdplay {
  display: grid;
  overflow-anchor: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(620px, calc(100svh - var(--bar) - 24px));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
  scroll-margin-top: calc(var(--bar) + 12px);
}
.hm-crowdplay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, var(--brand-dim), transparent 70%);
  scroll-margin-top: calc(var(--bar) + 12px);
}
.hm-crowdplay-kicker { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.hm-crowdplay-head h2 { font-size: clamp(23px, 2.7cqw, 34px); line-height: 1.12; }
.hm-crowdplay-head > p { flex: 0 1 32ch; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
#intro-demo { min-height: 0; }
.hm-crowdplay .cd { height: 100%; border: 0; border-radius: 0; }
.cd-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 1; gap: 10px; margin: 0; padding: 10px 20px; list-style: none; border-bottom: 1px solid var(--line); }
.cd-guide li { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); }
.cd-guide-number { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border: 1px solid var(--line-hard); border-radius: 50%; font-size: 10px; font-family: var(--mono); }
.cd-guide b { display: block; font-size: 13px; font-weight: 700; }
.cd-guide .is-current { background: var(--brand-dim); color: var(--ink); }
.cd-guide .is-current .cd-guide-number { background: var(--brand); border-color: var(--brand); color: #14031f; }
.hm-crowdplay-next { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.hm-crowdplay-next > div { flex: 1; }
.hm-crowdplay-next b { font-size: 13px; }
.hm-crowdplay-next .hm-cta { padding: 9px 14px; font-size: 12px; }
.hm-crowdplay-claim { border: 0; padding: 8px 0; background: transparent; color: var(--brand); font: inherit; font-size: 11px; cursor: pointer; }
.hm-crowdplay-claim:disabled { color: var(--muted); cursor: default; }

/* ---------------- continue, lobby, following ---------------- */

.hm-continue { display: grid; gap: 12px; }

.hm-cc {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color .16s ease;
}
.hm-cc:hover { border-color: var(--brand-edge); }
.hm-cc-glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 15px;
}
.hm-cc-body { min-width: 0; }
.hm-cc-body b { display: block; font-size: 14.5px; }
.hm-cc-body small { display: block; font-size: 12.5px; color: var(--muted); }
.hm-cc-cta { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap; }

.hm-lobby { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 40px; }
.hm-lc {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color .16s ease;
}
.hm-lc:hover { border-color: var(--brand-edge); }
.hm-lc.is-live { border-color: var(--signal-edge); }
.hm-lc-kicker {
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--faint);
}
.hm-lc-title { margin: 6px 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.hm-lc-track { height: 4px; border-radius: var(--r-pill); background: var(--raised); overflow: hidden; }
.hm-lc-track i { display: block; height: 100%; background: var(--brand); }
.hm-lc-note { margin-top: 9px; font-size: 12.5px; color: var(--muted); }

.hm-following { margin-bottom: 14px; }
.hm-following-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.hm-following-head b { font-size: 15px; }
.hm-following-head span { font-size: 12px; color: var(--muted); }
.hm-following-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.hm-following-row::-webkit-scrollbar { display: none; }
.hm-fchip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  font-size: 12.5px;
}
.hm-fchip:hover { border-color: var(--line-hard); }
.hm-fchip.is-live { border-color: var(--surge-dim); }
.hm-fchip i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--raised);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  color: var(--muted);
}
.hm-fchip b { font-size: 13px; }
.hm-fchip small { color: var(--muted); font-size: 11.5px; }

/* ---------------- the season board ---------------- */

.hm-board-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}

.lb-list { list-style: none; margin: 0; padding: 0; }

.lb-row {
  display: grid;
  grid-template-columns: 54px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lb-row:last-child { border-bottom: 0; }
.lb-rank { font-family: var(--mono); font-size: 13px; color: var(--faint); }
.lb-row:first-child .lb-rank { color: var(--brand); }
.lb-who { font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-xp {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--signal);
}
.lb-delta { font-family: var(--mono); font-size: 11.5px; color: var(--faint); min-width: 62px; text-align: right; }
.lb-delta.up { color: var(--signal); }

.hm-fac { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }

.hm-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-top: 1px solid var(--line-hard);
  background: var(--brand-dim);
  font-size: 13.5px;
}
.hm-me b { font-family: var(--mono); font-size: 15px; }
.hm-me span { color: var(--muted); font-size: 12.5px; }
.hm-me a { margin-left: auto; }

/* ---------------- the flagship promo ---------------- */

.hm-promo {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}

.hm-promo-art { position: relative; min-height: 300px; }
.hm-promo-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-promo-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--card));
}

.hm-promo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 34px 30px;
}

.hm-flag {
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--faint);
}
.hm-promo-name { font-size: 34px; font-weight: 900; letter-spacing: -.04em; }
.hm-promo-line { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 34ch; }
.hm-promo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.hm-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease;
}
.hm-wishlist:hover { border-color: var(--ink); background: var(--glass); }
.hm-wishlist.is-steam { background: var(--ink); border-color: var(--ink); color: #0a0a0a; }
.hm-wishlist.is-steam:hover { filter: brightness(.92); }

/* ---------------- coins, the store strip, the footer ---------------- */

.hm-shop, .hm-partners { scroll-margin-top: calc(var(--bar) + 24px); }
.hs-store-link { flex-shrink: 0; color: var(--muted); font-size: 13px; font-weight: 650; padding-bottom: 4px; }
.hs-store-link:hover { color: var(--ink); }
.hs-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.hs-card { position: relative; display: flex; min-height: 310px; overflow: hidden; isolation: isolate; padding: 32px; border: 1px solid #ffffff12; border-radius: 22px; background: #171512; color: var(--ink); text-decoration: none; transition: border-color 260ms var(--ease), transform 420ms var(--ease); }
.hs-coins { background: radial-gradient(ellipse at 90% 80%, #d88b182b, transparent 66%), linear-gradient(120deg, #201b13, #13130f); }
.hs-artifacts { background: radial-gradient(ellipse at 95% 70%, #8650dd33, transparent 65%), linear-gradient(120deg, #1c1727, #121018); }
.hs-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 64%; }
.hs-kicker { margin-bottom: 19px; font-size: 9px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; color: #e7c883; }
.hs-artifacts .hs-kicker { color: #c9a5fb; }
.hs-copy h3 { margin: 0; font-size: clamp(25px, 3.1cqw, 44px); font-weight: 800; letter-spacing: -.055em; line-height: 1.04; }
.hs-copy p { margin: 14px 0 24px; max-width: 27ch; color: #c0b7a8; font-size: 12px; line-height: 1.65; }
.hs-artifacts .hs-copy p { color: #b9adcc; }
.hs-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; padding: 12px 16px; border: 1px solid #ffda453d; border-radius: 999px; background: #f2d589; color: #211b0d; font-size: 12px; font-weight: 750; white-space: nowrap; }
.hs-artifacts .hs-cta { background: #c7a5f9; border-color: #cfb4f480; color: #21132f; }
.hs-cta > span { transition: translate 320ms var(--ease); }
.hs-art { position: absolute; z-index: 1; width: 55%; height: 95%; right: -8%; bottom: 0; object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 28px #0006); transform: rotate(-8deg); transition: transform 700ms var(--ease); }
.hs-artifacts .hs-art { width: 59%; right: -14%; bottom: 5%; transform: rotate(12deg); }
.hs-card-number { position: absolute; bottom: 14px; right: 19px; color: #ffffff35; font: 8px var(--mono); letter-spacing: .1em; }
.hs-card:hover { transform: translateY(-3px); border-color: #d2ad6b66; }
.hs-artifacts:hover { border-color: #bb86fc66; }
.hs-card:hover .hs-art { transform: rotate(-3deg) scale(1.04); }
.hs-artifacts:hover .hs-art { transform: rotate(6deg) scale(1.04); }
.hs-card:hover .hs-cta > span { translate: 2px -2px; }
.hs-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.hs-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; font-size: 11px; line-height: 1.5; }
.hs-foot p { margin: 0; color: var(--faint); }
.hs-foot a { color: var(--muted); white-space: nowrap; }
.hs-foot a:hover { color: var(--ink); }

.hm-partners { --partner-card-width: clamp(210px, 26cqw, 300px); }
.hm-partners .nw-head h2 { font-size: clamp(25px, 2.7cqw, 34px); }
.pn-track { position: relative; overflow-x: auto; padding: 5px 0 10px; margin-top: -5px; scrollbar-width: none; }
.pn-track::-webkit-scrollbar { display: none; }
.pn-belt { display: flex; width: max-content; isolation: isolate; }
/* Explicit grid columns keep a repeated row from sizing smaller than its cards. */
.pn-group { display: grid; grid-auto-flow: column; grid-auto-columns: var(--partner-card-width); flex: 0 0 auto; justify-content: space-around; gap: 16px; padding: 4px 16px 4px 0; width: max-content; min-width: var(--partner-width, 0px); overflow: clip; }
.pn-loop .pn-track { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
.pn-loop .pn-belt { will-change: transform; animation: partner-drift var(--partner-duration, 40s) linear infinite; animation-play-state: paused; }
.pn-running .pn-belt { animation-play-state: running; }
.pn-loop.pn-browsing .pn-track { overflow-x: auto; mask-image: none; }
.pn-loop.pn-browsing .pn-belt { animation: none; }
.pn-browsing .pn-group[aria-hidden] { display: none; }
@keyframes partner-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--partner-distance)), 0, 0); } }
@media (hover: hover) { .pn-track:hover .pn-belt { animation-play-state: paused; } }
.pn-card { position: relative; display: flex; width: var(--partner-card-width); min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 21px; height: 160px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(140deg, #19191b, #121213); color: var(--ink); text-decoration: none; transition: background 240ms, border-color 240ms, transform 400ms var(--ease); }
.pn-logo { display: flex; align-items: center; justify-content: center; height: 55px; }
.pn-logo img { width: 140px; max-height: 48px; object-fit: contain; }
.pn-kick .pn-logo img { width: 108px; }
.pn-aws .pn-logo img { width: 100px; }
.pn-youtube .pn-logo img, .pn-tiktok .pn-logo img { width: 168px; height: 56px; max-height: none; }
.pn-tiktok .pn-logo img { filter: invert(1) hue-rotate(180deg); }
.pn-card:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: var(--line-hard); background: #1c1c1e; }
.pn-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@container page (max-width: 760px) {
  .hs-grid { grid-template-columns: 1fr; gap: 14px; }
  .hs-card { min-height: 210px; padding: 23px 24px; }
  .hs-copy { max-width: 64%; }
  .hs-kicker { margin-bottom: 11px; font-size: 8px; }
  .hs-copy h3 { font-size: 29px; }
  .hs-copy p { margin: 9px 0 15px; font-size: 11px; line-height: 1.5; }
  .hs-cta { padding: 10px 14px; font-size: 11px; }
  .hs-art { width: 45%; right: -1%; }
  .hs-artifacts .hs-art { width: 46%; right: -3%; bottom: 1%; }
  .hs-foot { align-items: flex-start; gap: 12px; font-size: 10px; }
  .hm-partners { --partner-card-width: 190px; }
  .pn-card { height: 142px; }
  .pn-logo img { width: 125px; }
}
@media (max-width: 440px) {
  .hm-shop .nw-head { flex-wrap: wrap; gap: 10px; }
  .hs-store-link { font-size: 11px; }
  .hs-card { min-height: 206px; padding: 21px 18px; border-radius: 18px; }
  .hs-copy { max-width: 65%; }
  .hs-copy h3 { font-size: 25px; }
  .hs-copy p { max-width: 24ch; }
  .hs-art { width: 47%; right: -9%; height: 87%; bottom: 4%; }
  .hs-artifacts .hs-art { width: 49%; right: -10%; }
  .hs-card-number { font-size: 7px; right: 12px; bottom: 10px; }
  .hs-foot { display: block; }
  .hs-foot a { display: inline-block; margin-top: 8px; }
  .hm-partners { --partner-card-width: 166px; }
  .pn-card { height: 134px; gap: 16px; }
  .pn-logo img { width: 116px; }
  .pn-kick .pn-logo img { width: 96px; }
  .pn-aws .pn-logo img { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-card, .hs-art, .hs-cta > span, .pn-card { transition: none; }
  .hs-card:hover, .hs-card:hover .hs-art, .pn-card:is(:hover, :focus-visible) { transform: none; }
  .hs-card:hover .hs-cta > span { translate: none; }
  .pn-loop .pn-belt { animation: none; will-change: auto; width: 100%; }
  .pn-loop .pn-track { overflow: visible; mask-image: none; }
  .pn-group { width: 100%; min-width: 0; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--partner-card-width)), 1fr)); padding-right: 0; }
  .pn-card { width: 100%; }
  .pn-group[aria-hidden] { display: none; }
}

.ix-economy {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--void);
}
.ix-economy h2 { font-size: 20px; margin-bottom: 10px; }
.ix-economy p { margin: 0; max-width: 78ch; font-size: 13px; line-height: 1.65; color: var(--muted); }
.ix-economy a { color: var(--brand); font-weight: 600; white-space: nowrap; }

.hm-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 20px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--brand-dim), transparent 58%), var(--card);
  transition: border-color .16s ease;
}
.hm-strip:hover { border-color: var(--brand-edge); }
.hm-strip-left { display: flex; flex-direction: column; gap: 3px; }
.hm-strip-tag { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.hm-strip-note { font-size: 12.5px; color: var(--muted); }
.hm-strip-go { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }

.hm-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--page);
  margin: 0 auto;
  padding: 30px var(--gut) 50px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--faint);
}
.ix-foot-links { display: flex; gap: 18px; }
.ix-foot-links a { color: var(--muted); }
.ix-foot-links a:hover { color: var(--ink); }
.hm-foot #foot-right { margin-left: auto; }

/* ---------------- empty states ---------------- */

/*
 * An empty grid says it is empty. The numbers on this page are counted
 * and not claimed, so a quiet night has to look like one.
 */
.ix-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 34px 30px;
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-md);
  background: var(--card);
}
.ix-empty b { font-size: 17px; }
.ix-empty p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ix-primary { margin-top: 6px; font-weight: 700; color: var(--brand); }

.hm-empty {
  margin: 0;
  padding: 30px;
  border: 1px dashed var(--line-hard);
  border-radius: var(--r-md);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--faint);
  text-align: center;
}

/* ---------------- narrower ---------------- */

/* Supporting sections stack when the available content area narrows. */
@container page (max-width: 1120px) {
  .ix-demo, .hm-promo { grid-template-columns: 1fr; }
  .ix-table { border-right: 0; border-bottom: 1px solid var(--line); }
  .hm-promo-art { min-height: 220px; }
  .hm-promo-art::after { background: linear-gradient(0deg, var(--card), transparent 62%); }
}

@media (max-width: 720px) {
  :root { --gut: 16px; }

  body.home-page { font-size: 14.5px; }

  .kk-top { padding: 0 8px; gap: 4px; }
  .kk-top .ar-mark img { height: 36px; }
  .kk-top .ar-right { gap: 5px; }
  #tier.ar-bal { display: none; }   /* the season chip is the first to go */
  .ar-bal { padding: 5px 9px; font-size: 11.5px; }
  .kk-top .ar-tag.kk-glass { padding: 8px 14px; font-size: 12.5px; }

  .hm-sec { margin-bottom: 52px; }
  .hero { height: min(calc(56.25vw + 324px), calc(100svh - var(--bar))); }
  .hero h1 { font-size: clamp(28px, 6.8vw, 36px); }
  .st-standby { gap: 14px; }
  .st-standby > span { font-size: 12px; }
  .btn { flex: 1 1 auto; justify-content: center; padding: 14px 18px; }

  /* The stage runs to the edges, the way a video wants to on a phone. */
  .hero-stage { margin: 0 calc(var(--gut) * -1); }
  .hero-astral { border-radius: 0; border-left: 0; border-right: 0; }
  .hero-astral-copy { padding: 18px 22px; gap: 10px; }
  .hero-astral-copy h2 { font-size: clamp(38px, 8vw, 52px); }
  .hero-astral-kicker { font-size: 8px; }
  .hero-astral-copy p { font-size: 12px; }
  .hero-astral-actions { gap: 7px; }
  .hero-astral-actions .hm-wishlist { padding: 9px 12px; font-size: 11px; }
  .hero-frame-tabs { gap: 2px; }
  .hero-frame-tabs button { gap: 5px; padding: 0 8px; font-size: 11px; }
  .hero-frame-tabs button > span { font-size: 9px; }
  .hero-frame-nav { gap: 4px; }
  .hero-frame-nav button { width: 30px; height: 30px; }
  .st { border-radius: 0; border-left: 0; border-right: 0; }

  /*
   * The empty stage hugs its words instead of holding a 16:9 box open.
   * At this width the box is 193px tall and the copy inside it is nearer
   * 560, so the ratio only added a wall of padding under the last line.
   */
  .hl-empty, .hm-feature-loading {
    aspect-ratio: auto;
    min-height: 240px;
    padding: 28px 20px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .hl-empty h2 { font-size: 23px; }

  .st-id { top: 12px; left: 12px; right: 12px; gap: 9px; }
  .st-id-copy strong { font-size: 14px; }
  .st-bar { left: 10px; right: 10px; bottom: 9px; gap: 6px; }
  .st-controls button { width: 34px; height: 34px; }
  .st-controls #stage-live { display: none; }
  .st-room { padding: 8px 13px; font-size: 12px; }
  .st-crowd { padding: 13px 16px; }
  .st-crowd a { margin-left: 0; }

  .hm-head b { font-size: 20px; }
  .hm-head > span { display: none; }
  .hm-row-nav { display: none; }   /* a thumb already swipes the row */

  .hm-people { grid-auto-columns: minmax(230px, 1fr); gap: 16px; }

  .ix-table, .ix-decision,
  .hm-promo-text, .ix-economy { padding: 22px 18px; }
  .ix-decision h2 { font-size: 22px; }
  .hm-promo-name { font-size: 27px; }

  .lb-row { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 13px 14px; }
  .lb-delta { display: none; }

  .hm-strip { padding: 18px; }
  .hm-strip-go { margin-left: 0; flex-basis: 100%; }
  .hm-foot { padding-bottom: 40px; }
  .hm-foot #foot-right { margin-left: 0; }
}

/* ---------------- stillness, not breakage ---------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-clock i, .st-flag i { animation: none; }
  .ix-card-new { animation: none; }
  .btn, .hm-cta, .kk-card:hover .kk-thumb,
  .ix-choices button { transition: none; }
  .btn:hover, .hm-cta:hover, .kk-card:hover .kk-thumb { transform: none; }
  .ix-choices button:hover:not(:disabled) { transform: none; }
  .st-shot { transition: none; }
}

/* ---------------- the toast ---------------- */

/*
 * common.js appends .toast to the body, and it was styled only in
 * account.css, which this page has never loaded. So the confirmation
 * after collecting the how-it-works reward has always arrived on this
 * page as unstyled text in the corner. It is a flow the homepage owns,
 * so the homepage styles it.
 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 80;
  transform: translate(-50%, 20px);
  padding: 12px 20px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--ink);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err, .toast.bad { border-color: var(--live); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .22s linear; transform: translate(-50%, 0); }
}

/* ---------------- the playable table ---------------- */

/*
 * The front page's game, and the biggest thing on the page after the stage.
 *
 * It replaces a small two column card that held one scripted hand. The size
 * is the point: a card game reads as a card game at card size, and at the
 * 50px the old demo used it read as a diagram of one.
 *
 * All the motion here is built from four ideas, and every one of them has a
 * still version under prefers-reduced-motion at the bottom of this section:
 * cards fly in from the shoe with a stagger, the hole card turns over in 3D,
 * the totals pop when they change, and the outcome sweeps across the felt.
 */

.cd {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}

/* ---- the felt ---- */

.cd-table {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 16px 20px;
  border-right: 1px solid var(--line);
  background: #0a0f0b;
  overflow: hidden;
}

/*
 * The felt: a table lit from above, and the arc a dealer works behind.
 */
.cd-felt {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(95% 62% at 50% -8%, rgba(63, 220, 111, .16), transparent 62%),
    radial-gradient(120% 80% at 50% 120%, rgba(181, 108, 255, .10), transparent 60%),
    #0a0f0b;
}
.cd-felt::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 150%;
  height: 150%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(63, 220, 111, .12);
}

.cd-table > *:not(.cd-felt) { position: relative; z-index: 1; }
.cd-playfield > .cd-flash { position: absolute; z-index: 2; }

.cd-table-top,
.cd-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cd-table-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(250, 250, 250, .07); }

.cd-badge {
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cd-shoe {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--faint);
}
.cd-shoe b { color: var(--muted); font-weight: 700; }

.cd-stat { display: flex; flex-direction: column; gap: 2px; }
.cd-stat i {
  font-style: normal;
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  color: var(--faint);
}
.cd-stat b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
/* Coins are the one number on this page that is money, so they are green. */
.cd-stat:first-child b { color: var(--signal); }

/* ---- the seats ---- */

.cd-seat { display: flex; align-items: center; gap: 14px; min-height: 0; flex: 1; }
.cd-seat-dealer { justify-content: flex-start; }
.cd-seat-player { justify-content: flex-end; }

.cd-seat-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}

.cd-score {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 5px 10px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .4);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.cd-score.is-bust { border-color: var(--live); color: #ff8d84; }
.cd-score.is-bump { animation: cd-pop .34s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes cd-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* ---- the cards ---- */

.cd-cards { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 0; }

.cd-card {
  position: relative;
  width: 86px;
  height: 122px;
  flex-shrink: 0;
  perspective: 900px;
  /*
   * In from the shoe, with the stagger the module sets on --i. `backwards`
   * matters: without it the card is drawn at its resting place for one frame
   * before the animation takes it back to the shoe, which reads as a flicker.
   */
  animation: cd-deal .46s cubic-bezier(.16, .84, .24, 1) backwards;
  animation-delay: calc(var(--i, 1) * 40ms);
}
@keyframes cd-deal {
  from { opacity: 0; transform: translate(-190px, -76px) rotate(-16deg) scale(.86); }
  to   { opacity: 1; transform: none; }
}

.cd-card-in {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.2, .8, .2, 1);
}
/* Dealt face down, and turned over when the dealer plays. */
.cd-card.is-hole .cd-card-in { transform: rotateY(180deg); }

.cd-face {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  backface-visibility: hidden;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .9);
}

.cd-face-front {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 8px 10px;
  background: linear-gradient(170deg, #fffefc, #ebe8e4);
  color: #14110f;
}
.cd-face-front b { font-family: var(--mono); font-size: 17px; font-weight: 700; line-height: 1; }
.cd-face-front i { place-self: center; font-style: normal; font-size: 38px; line-height: 1; }
.cd-card-foot { justify-self: end; transform: rotate(180deg); }
.cd-card.is-red .cd-face-front { color: var(--red); }

.cd-face-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(181, 108, 255, .22) 0 6px, transparent 6px 12px),
    linear-gradient(165deg, #2a1046, #150726);
  border: 1px solid var(--brand-edge);
}

.cd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---- the message on the felt, and the outcome ---- */

.cd-call-out {
  margin: 0;
  padding: 11px 16px;
  align-self: center;
  border: 1px solid rgba(250, 250, 250, .09);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .42);
  font-size: 13px;
  color: var(--ink);
  text-align: center;
}
.cd-call-out:empty { visibility: hidden; }

.cd-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(30px, 5cqw, 52px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
  text-shadow: 0 6px 34px rgba(0, 0, 0, .8);
}
.cd-flash.is-on { animation: cd-sweep 1.5s cubic-bezier(.2, .8, .2, 1); }
.cd-flash.is-win  { background: radial-gradient(60% 50% at 50% 50%, rgba(63, 220, 111, .3), transparent 70%); }
.cd-flash.is-lose { background: radial-gradient(60% 50% at 50% 50%, rgba(212, 41, 30, .3), transparent 70%); }
.cd-flash.is-push { background: radial-gradient(60% 50% at 50% 50%, rgba(250, 250, 250, .14), transparent 70%); }
@keyframes cd-sweep {
  0%   { opacity: 0; transform: scale(.82); }
  18%  { opacity: 1; transform: scale(1); }
  74%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* A bust or a loss knocks the table, once, briefly. */
.cd-table.is-lose { animation: cd-knock .42s ease-in-out; }
@keyframes cd-knock {
  0%, 100% { transform: translateX(0); }
  22%  { transform: translateX(-6px); }
  58%  { transform: translateX(5px); }
  82%  { transform: translateX(-2px); }
}

/* ---- the call panel ---- */

.cd-panel {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  padding: 20px 24px;
}

.cd-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

.cd-panel h3 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.cd-panel > p { margin: 0; font-size: 13px; color: var(--muted); }

/* The deadline. Every crowdplay round closes on a clock. */
.cd-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.cd-clock svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.cd-clock circle { fill: none; stroke-width: 3.5; }
.cd-clock-track { stroke: var(--raised); }
.cd-clock-run {
  stroke: var(--brand);
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear, stroke .3s ease;
}
.cd-clock span {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
}
.cd-clock small { font-size: 11.5px; color: var(--muted); }
/* Banked, because nobody is looking at it. */
.cd-clock.is-held .cd-clock-run { stroke: var(--faint); }
.cd-clock.is-held span { color: var(--faint); }

.cd-clock.is-late .cd-clock-run { stroke: var(--live); }
.cd-clock.is-late span { color: #ff8d84; animation: cd-tick 1s steps(2, end) infinite; }
@keyframes cd-tick { 50% { opacity: .45; } }

/* ---- the chips ---- */

.cd-chips { display: flex; gap: 10px; }

.cd-chip {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* A chip's notched edge, which is the one detail that makes it a chip. */
  background:
    radial-gradient(circle at 50% 50%, var(--raised) 0 58%, transparent 58%),
    repeating-conic-gradient(from 0deg, var(--line-hard) 0deg 18deg, transparent 18deg 36deg);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2, 1.4, .3, 1), color .16s ease, filter .16s ease;
}
.cd-chip:hover { transform: translateY(-3px); color: var(--ink); }
.cd-chip.is-on {
  color: #14031f;
  background:
    radial-gradient(circle at 50% 50%, var(--brand) 0 58%, transparent 58%),
    repeating-conic-gradient(from 0deg, var(--brand-hi) 0deg 18deg, transparent 18deg 36deg);
  transform: translateY(-3px);
}
.cd-chip:active { transform: translateY(0) scale(.94); }

/* ---- the actions ---- */

.cd-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }

.cd-act {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  background: var(--raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.cd-act:hover { transform: translateY(-2px); border-color: var(--ink); }
.cd-act:active { transform: translateY(0); }
.cd-act.is-primary {
  border-color: transparent;
  background: var(--brand);
  color: #14031f;
  box-shadow: 0 10px 28px -14px rgba(181, 108, 255, .8);
}
.cd-act.is-primary:hover { background: var(--brand-hi); }

.cd-act kbd {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: rgba(0, 0, 0, .22);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
}
.cd-act.is-primary kbd { background: rgba(20, 3, 31, .16); }

.cd-log {
  margin: 0;
  min-height: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
/* Money, so it is green up and red down. Never green on the way down. */
.cd-log.is-up { color: var(--signal); }
.cd-log.is-down { color: #ff8d84; }

.cd-fine { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--faint); }
.cd-fine a { color: var(--brand); font-weight: 600; white-space: nowrap; }

/* Keep the explanation, table and choices in one viewport. */
.cd-card { width: 68px; height: 96px; flex-shrink: 1; min-width: 0; }
.cd-face-front i { font-size: 30px; }
.cd-face-front b { font-size: 14px; }
.cd-call-out { margin: 0; padding: 7px 12px; font-size: 12px; }
.cd-log { display: none; }
.cd-act { min-height: 44px; padding: 11px 16px; font-size: 13px; }
.cd-act kbd { display: none; }
.cd-panel > .cd-fine { font-size: 11px; line-height: 1.4; color: var(--faint); }

@container page (max-width: 760px) {
  .hm-crowdplay-head { display: block; padding: 15px 18px; }
  .hm-crowdplay-head > p { margin-top: 7px; font-size: 12px; }
  .hm-crowdplay-head h2 { font-size: 24px; }
  .hm-crowdplay-kicker { margin-bottom: 6px; font-size: 9px; }
  .cd { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .cd-guide { grid-column: 1; grid-row: 1; padding: 7px 10px; gap: 3px; }
  .cd-guide li { padding: 5px; gap: 6px; }
  .cd-guide b { font-size: 11px; }
  .cd-guide-number { flex-basis: 20px; height: 20px; font-size: 9px; }
  .cd-table { grid-column: 1; grid-row: 2; padding: 28px 16px 10px; border-right: 0; border-bottom: 1px solid var(--line); gap: 6px; }
  .cd-table-top { position: absolute !important; top: 8px; left: 12px; }
  .cd-badge { padding: 3px 7px; font-size: 8px; }
  .cd-seat { gap: 12px; flex: 1; padding-top: 0; }
  .cd-seat-player { padding-top: 0; }
  .cd-seat-name { font-size: 11px; gap: 5px; }
  .cd-score { min-width: 28px; padding: 3px 6px; font-size: 11px; }
  .cd-card { width: 48px; height: 66px; }
  .cd-face { padding: 5px; }
  .cd-face-front i { font-size: 23px; }
  .cd-face-front b { font-size: 11px; }
  .cd-call-out { display: none; }
  .cd-panel { grid-column: 1; grid-row: 3; padding: 12px 16px; gap: 7px; }
  .cd-eyebrow { font-size: 9px; }
  .cd-panel h3 { font-size: 20px; }
  .cd-panel > p { font-size: 12px; line-height: 1.4; }
  .cd-acts { gap: 8px; margin: 0; }
  .cd-act { flex: 1; justify-content: center; }
  .cd-panel > .cd-fine { font-size: 10px; }
  .cd-clock { min-height: 24px; }
  .cd-clock svg { width: 22px; height: 22px; }
  .hm-crowdplay-next { padding: 9px 14px; flex-wrap: wrap; gap: 5px 10px; }
  .hm-crowdplay-next > div { display: none; }
  .hm-crowdplay-next .hm-cta { margin-right: auto; }
}

@media (max-height: 700px) {
  .hm-crowdplay-head { padding-top: 12px; padding-bottom: 12px; }
  .cd-panel { gap: 6px; }
  .cd-eyebrow { display: none; }
  .cd-card { height: 72px; width: 52px; }
}
@media (max-height: 700px) and (max-width: 820px) {
  .cd-card { height: 54px; width: 40px; }
  .cd-card-foot { display: none; }
  .cd-face-front i { font-size: 20px; }
  .cd-panel h3 { font-size: 18px; }
}

/* One game surface, with the live Play along panel floating over the felt.
   Shared grid tracks keep cards clear of the overlay at every screen size. */
.hm-crowdplay .cd { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.cd-stage { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr); isolation: isolate; }
.cd-stage .cd-table { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; padding: 0; border: 0; }
.cd-playfield { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; min-height: 0; padding: 16px 20px; }
.cd-stage .cd-panel { grid-column: 2; grid-row: 1; position: relative; z-index: 3; }

.hm-crowdplay .cd-panel {
  margin: 14px; padding: 16px; gap: 12px; align-self: center;
  background: var(--pa-surface); border: 1px solid var(--pa-line); border-radius: 16px;
  box-shadow: var(--pa-shadow); min-width: 0;
}
.cd-play-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 16px var(--pa-font); }
.cd-practice-badge { padding: 4px 8px; border: 1px solid var(--pa-line); border-radius: 6px; color: var(--pa-muted); font: 600 10px var(--pa-font); }
.cd-coach { padding: 12px 0 2px; }
.cd-coach h3 { margin: 0 0 8px; font: 600 20px/1.2 var(--pa-font); letter-spacing: -.02em; }
.cd-coach p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--pa-muted); }
.hm-crowdplay .cd-act.is-primary { background: var(--pa-green); color: #fff; border-color: var(--pa-green); box-shadow: none; border-radius: 10px; }
.hm-crowdplay:has(.cd:not([data-phase="settled"]):not([data-phase="broke"])) .hm-crowdplay-next { display: none; }
/* In Vote, the live poll replaces the coach while a decision is open. */
.cd[data-phase="call"] .cd-coach,
.cd-panel:has(#cd-arena:not([data-interaction-mode="vote"])) .cd-coach,
.cd:not([data-phase="call"]) #cd-arena[data-interaction-mode="vote"] .ia-content { display: none; }
/* Vote status already confirms the choice, so a second receipt adds no information. */
#cd-arena .ia-receipt, #cd-arena .ia-rule { display: none !important; }
#cd-arena .ia-practice-help { font-size: 12px; color: var(--pa-muted); }
.cd-panel > .cd-fine { margin: 0; color: var(--pa-muted); }

@container page (max-width: 760px) {
  .cd-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cd-stage .cd-panel { grid-column: 1; grid-row: 2; }
  .hm-crowdplay .cd-panel { margin: 8px 12px; padding: 12px; gap: 8px; align-self: stretch; }
  .cd-playfield { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 28px 12px 8px; }
  .cd-play-head { font-size: 14px; }
  .cd-coach { padding-top: 8px; }
  .cd-coach h3 { font-size: 18px; margin-bottom: 6px; }
  .cd-coach p { margin-bottom: 10px; font-size: 12px; }
  .cd-seat { flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
  .cd-seat-player .cd-seat-name { order: -1; }
  .cd-cards { max-width: 100%; gap: 3px; }
  .cd-card { width: 43px; height: 60px; }
  .cd-face { padding: 4px; }
  .cd-card-foot { display: none; }
  #cd-arena .ia-content { padding-top: 10px; }
  #cd-arena .ia-kicker-row { margin-bottom: 6px; }
  #cd-arena .ia-options { margin-top: 10px; }
  #cd-arena .ia-option { min-height: 52px !important; padding: 6px 12px 10px !important; }
  #cd-arena .ia-option-copy { gap: 3px; }
  #cd-arena .ia-option-copy small { line-height: 1.2; }
  #cd-arena .ia-vote-status { margin-top: 8px; }
  #cd-arena .ia-rule { margin-top: 6px; }
  #cd-arena .ia-empty { margin-top: 10px; padding: 10px; }
}

@media (max-height: 700px) and (max-width: 820px) {
  .hm-crowdplay-head { padding: 10px 16px; }
  .hm-crowdplay-head h2 { font-size: 22px; }
  .hm-crowdplay-head > p { margin-top: 5px; }
  .cd-guide { padding-top: 4px; padding-bottom: 4px; }
  .hm-crowdplay .cd-panel { margin-top: 6px; margin-bottom: 6px; padding: 10px 12px; gap: 6px; }
  .cd-card { width: 36px; height: 46px; }
  .cd-playfield { padding-top: 25px; }
  .cd-seat { gap: 4px; }
  .cd-seat-name, .cd-score { font-size: 10px; }
}

/* A shared rhythm for navigation, covers and calls to action. */
html:has(.home-page) { scroll-behavior: smooth; }
.home-page .nw-nav button {
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 320ms var(--ease), opacity 180ms;
}
.home-page .nw-nav button svg { transition: translate 320ms var(--ease); }
.home-page .nw-nav button:active:not(:disabled) { transform: scale(.92); }
.home-page .ag-cover, .home-page .hm-network .kk-thumb { transition-timing-function: var(--ease); }
.home-page .ag-cover > img, .home-page .hm-network .kk-thumb > img { transition-duration: 850ms; transition-timing-function: var(--ease); }
.home-page .ag-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, #ffffff17 48%, transparent 70%);
  transform: translateX(-115%);
  transition: transform 900ms var(--ease);
}
.home-page .hero-heading a span, .home-page .hm-cta > span, .home-page .hm-wishlist > span {
  display: inline-block;
  transition: translate 320ms var(--ease);
}
.home-page :is(.ag-track, .nw-track).is-dragging :is(.ag-cover, .kk-thumb) {
  transform: scale(.99);
  transition-duration: 160ms;
}
.home-page :is(.ag-track, .nw-track).is-dragging img { transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page .ag-card:hover .ag-cover { transform: perspective(1000px) translateY(-6px) rotateY(-2deg); box-shadow: 0 14px 30px #0007, 0 0 22px color-mix(in srgb, var(--game-tint) 12%, transparent); }
  .home-page .ag-card:hover .ag-cover::after { transform: translateX(115%); }
  .home-page .nw-nav button[data-network-next]:hover:not(:disabled) svg { translate: 2px 0; }
  .home-page .nw-nav button[data-network-prev]:hover:not(:disabled) svg { translate: -2px 0; }
  .home-page :is(.hero-heading a, .hm-cta, .hm-wishlist):hover > span { translate: 2px -2px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.home-page) { scroll-behavior: auto; }
  .home-page .ag-cover::after { display: none; }
  .home-page :is(.ag-card, .kk-card):is(:hover, :focus-visible, :active),
  .home-page :is(.ag-card, .kk-card):is(:hover, :focus-visible) :is(.ag-cover, .kk-thumb, img),
  .home-page :is(.ag-track, .nw-track).is-dragging :is(.ag-cover, .kk-thumb),
  .home-page .nw-nav button:active:not(:disabled) { transform: none; }
  .home-page .nw-nav button svg,
  .home-page .hero-heading a span, .home-page .hm-cta > span, .home-page .hm-wishlist > span { transition: none; }
}

/* ---- stillness, not breakage ---- */

/*
 * Every animation above has a still counterpart here. The game is fully
 * playable with all of it off: the hole card still turns over, it just does
 * it instantly, and the module shortens its own pacing to match.
 */
@media (prefers-reduced-motion: reduce) {
  .cd-card { animation: none; }
  .cd-card-in { transition: none; }
  .cd-score.is-bump { animation: none; }
  .cd-table.is-lose { animation: none; }
  .cd-chip, .cd-act { transition: none; }
  .cd-chip:hover, .cd-act:hover { transform: none; }
  .cd-chip.is-on { transform: none; }
  .cd-clock.is-late span { animation: none; }
  .cd-clock-run { transition: none; }
  .cd-flash.is-on { animation: cd-fade 1.2s linear; }
  @keyframes cd-fade { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
}