/* EXPRealm — the whole design system.
 *
 * MOBILE FIRST, and not as a slogan: livestream traffic is phone traffic. The
 * base styles are the small ones and every media query widens rather than
 * narrows. Nothing is allowed to exceed the viewport width — a live product
 * that scrolls sideways on a phone reads as broken before anybody reads a word.
 *
 * The palette is black and ACID GREEN. Not EXP Tube's #39df37 — EXP Tube
 * already uses that green in its HUD, and two layers sharing an accent is how
 * two brands quietly become one brand. RED means LIVE and nothing else; a
 * colour that means two things means nothing at a glance.
 *
 * A violet appears ONLY inside background gradients — never on text, a border
 * or a control. It gives the dark surfaces depth without becoming a second
 * accent competing with the green.
 *
 * Dark only. This is a video product; a light theme would be a second set of
 * contrast decisions for a screen that is mostly showing somebody else's feed.
 */

:root {
  /* Surfaces, darkest to lightest. */
  --er-black: #050607;
  --er-surface: #0b0d0f;
  --er-raised: #121518;
  --er-raised-2: #191d21;
  --er-line: #23282d;
  --er-line-bright: #333a41;

  --er-ink: #f4f7f9;
  --er-ink-dim: #9aa4ad;
  --er-ink-faint: #626c75;

  /* The one accent. */
  --er-lime: #c6ff2e;
  --er-lime-bright: #d8ff6b;
  --er-lime-dim: #7fa817;
  --er-lime-glow: rgba(198, 255, 46, 0.16);

  /* LIVE. Never decorative, never anything else. */
  --er-live: #ff2d4f;
  --er-live-glow: rgba(255, 45, 79, 0.22);

  /* Background gradients only. Never a border, never text, never a button. */
  --er-violet: #7c5cff;

  --er-warn: #ffb020;

  --er-radius: 12px;
  --er-radius-lg: 20px;
  --er-gap: 16px;
  --er-header: 60px;

  --er-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --er-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* One easing everywhere. Consistent motion reads as one product. */
  --er-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* `hidden` must actually hide.
 *
 * The HTML attribute is a USER-AGENT rule at the lowest possible specificity,
 * so any class that sets `display` silently beats it. This site toggles the
 * terms modal (display:grid), the camera placeholder (display:grid) and the
 * LIVE NOW rail with `el.hidden`, and without this line the modal greeted every
 * broadcaster with the full legal agreement before they had touched anything.
 * !important because the whole point is that nothing outranks it. */
[hidden] { display: none !important; }

html {
  /* Belt and braces against the sideways scroll. A single overflowing decorative
   * element on a 360px phone is otherwise enough to shift the whole document.
   *
   * CLIP, NOT HIDDEN. `overflow-x: hidden` on an ancestor turns that ancestor
   * into a scroll container, and a scroll container silently breaks every
   * `position: sticky` descendant — which here is the site header, so it scrolls
   * away instead of staying put. `clip` cuts the overflow off without creating
   * the scroll container, so both things work. This cost an hour once; leave it
   * alone. */
  overflow-x: clip;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--er-black);
  color: var(--er-ink);
  font-family: var(--er-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: clip; }

img, svg, video { max-width: 100%; display: block; }
a { color: var(--er-lime); text-decoration: none; }
a:hover { color: var(--er-lime-bright); }
button, input, select, textarea { font: inherit; color: inherit; }

/* Everything focusable gets a visible ring. On a phone this matters less; on a
 * desktop it is the difference between a usable form and a maze. */
:focus-visible {
  outline: 2px solid var(--er-lime);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--er-lime); color: var(--er-black); }

/* ------------------------------------------------------------------ layout */

.er-shell { min-height: 100svh; display: flex; flex-direction: column; }
.er-main { flex: 1; width: 100%; }

.er-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}
.er-wrap--narrow { max-width: 560px; }
.er-wrap--mid { max-width: 820px; }

.er-section { padding: 56px 0; }
.er-section--tight { padding: 32px 0; }

@media (min-width: 900px) {
  .er-wrap { padding: 0 32px; }
  .er-section { padding: 96px 0; }
  .er-section--tight { padding: 48px 0; }
}

/* A hairline that fades out at both ends, used between major sections. */
.er-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--er-line), transparent);
}

/* ------------------------------------------------------------------ header */

.er-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--er-header);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: rgba(5, 6, 7, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--er-line);
}

@media (min-width: 900px) { .er-header { padding: 0 32px; } }

.er-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--er-ink);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.er-logo:hover { color: var(--er-ink); }

/* The mark: a filled ring with a lime core. Reads as a record light and as a
 * portal, which is the whole brand in 22 pixels. */
.er-logo__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background:
    radial-gradient(circle at 50% 50%, var(--er-lime) 0 28%, transparent 30%),
    conic-gradient(from 200deg, var(--er-lime), var(--er-violet), var(--er-lime));
  box-shadow: 0 0 16px var(--er-lime-glow);
}

.er-logo__realm { color: var(--er-lime); }

.er-header__spacer { flex: 1; }

.er-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.er-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--er-raised-2);
  border: 1px solid var(--er-line-bright);
  color: var(--er-lime);
  font-weight: 800;
  font-size: 14px;
  object-fit: cover;
}
.er-avatar--lg { width: 76px; height: 76px; font-size: 30px; }

.er-header__user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--er-ink);
  max-width: 46vw;
}
.er-header__name {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The username beside the avatar is the first thing to go on a narrow phone —
 * the avatar alone still says "you are signed in". */
@media (max-width: 560px) { .er-header__name { display: none; } }

/* ------------------------------------------------------------------- type */

.er-h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 11vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-transform: uppercase;
}
.er-h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 5.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-transform: uppercase;
}
.er-h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.er-lede {
  margin: 0 0 26px;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--er-ink-dim);
  max-width: 62ch;
}

.er-muted { color: var(--er-ink-dim); }
.er-faint { color: var(--er-ink-faint); font-size: 13px; }

.er-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--er-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-lime);
}

/* The green half of a headline. */
.er-accent { color: var(--er-lime); }

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

.er-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44px minimum. Every control on this site is a touch target first. */
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--er-line-bright);
  background: var(--er-raised);
  color: var(--er-ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--er-ease), background 0.18s var(--er-ease),
              border-color 0.18s var(--er-ease), box-shadow 0.18s var(--er-ease);
}
.er-btn:hover {
  background: var(--er-raised-2);
  border-color: var(--er-ink-faint);
  color: var(--er-ink);
  transform: translateY(-1px);
}
.er-btn:active { transform: translateY(0); }
.er-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.er-btn--primary {
  background: var(--er-lime);
  border-color: var(--er-lime);
  color: var(--er-black);
  box-shadow: 0 6px 26px var(--er-lime-glow);
}
.er-btn--primary:hover {
  background: var(--er-lime-bright);
  border-color: var(--er-lime-bright);
  color: var(--er-black);
  box-shadow: 0 10px 34px var(--er-lime-glow);
}

.er-btn--ghost { background: transparent; border-color: transparent; color: var(--er-ink-dim); }
.er-btn--ghost:hover { background: var(--er-raised); color: var(--er-ink); }

.er-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.er-btn--lg { min-height: 54px; padding: 0 30px; font-size: 17px; }
.er-btn--block { display: flex; width: 100%; }

.er-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
/* On a phone the CTAs go full width and stack. Two half-width buttons side by
 * side at 360px is two buttons nobody can read. */
@media (max-width: 520px) {
  .er-btn-row--stack { flex-direction: column; align-items: stretch; }
  .er-btn-row--stack .er-btn { width: 100%; }
}

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

.er-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  isolation: isolate;
}
@media (min-width: 900px) { .er-hero { padding: 116px 0 108px; } }

/* The atmosphere: three slow, enormous, heavily blurred blooms. Pure CSS, no
 * images, no canvas, no JS. `pointer-events:none` on every layer — decoration
 * must never eat a tap meant for the CTA underneath it. */
.er-hero__bg {
  position: absolute;
  inset: -20% -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 18% 18%, rgba(198, 255, 46, 0.16), transparent 62%),
    radial-gradient(40% 44% at 84% 26%, rgba(124, 92, 255, 0.20), transparent 62%),
    radial-gradient(56% 46% at 50% 108%, rgba(198, 255, 46, 0.09), transparent 66%);
  filter: blur(28px);
  animation: er-drift 26s var(--er-ease) infinite alternate;
}

@keyframes er-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* A faint grid, fading out downward. Reads as a world/arena floor without
 * being a picture of one. */
.er-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 76% at 50% 24%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 76% at 50% 24%, #000 20%, transparent 78%);
}

.er-hero__note {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: var(--er-ink-faint);
  max-width: 46ch;
}

/* --------------------------------------------------------------- live dot */

.er-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--er-live);
  box-shadow: 0 0 0 0 var(--er-live-glow);
  animation: er-pulse 2s ease-out infinite;
}
@keyframes er-pulse {
  0%   { box-shadow: 0 0 0 0 var(--er-live-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 45, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 79, 0); }
}

.er-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--er-live);
  color: #fff;
  font-family: var(--er-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.er-live-tag .er-dot { background: #fff; box-shadow: none; animation: none; }

/* --------------------------------------------------- decorative stream wall
 *
 * Abstract cards, not fake screenshots. There is no thumbnail, no creator name
 * and no channel — a coloured field, a shape and a bar. It says "streams live
 * here" without claiming a stream exists, which is the line V1 must not cross.
 */

.er-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}
@media (min-width: 720px) {
  .er-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.er-tile {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--er-radius);
  border: 1px solid var(--er-line);
  background: var(--er-raised);
  overflow: hidden;
  animation: er-float 7s var(--er-ease) infinite alternate;
}
/* Staggered so the four never move as one block. */
.er-tile:nth-child(2) { animation-delay: -1.7s; }
.er-tile:nth-child(3) { animation-delay: -3.4s; }
.er-tile:nth-child(4) { animation-delay: -5.1s; }

@keyframes er-float {
  from { transform: translateY(4px); }
  to   { transform: translateY(-4px); }
}

.er-tile__art { position: absolute; inset: 0; }
.er-tile:nth-child(1) .er-tile__art {
  background: radial-gradient(80% 80% at 30% 25%, rgba(198, 255, 46, 0.30), transparent 65%), #0e1216;
}
.er-tile:nth-child(2) .er-tile__art {
  background: radial-gradient(80% 80% at 70% 30%, rgba(124, 92, 255, 0.34), transparent 65%), #0e1216;
}
.er-tile:nth-child(3) .er-tile__art {
  background: radial-gradient(80% 80% at 40% 70%, rgba(255, 45, 79, 0.24), transparent 65%), #0e1216;
}
.er-tile:nth-child(4) .er-tile__art {
  background: radial-gradient(80% 80% at 65% 60%, rgba(198, 255, 46, 0.20), transparent 65%), #0e1216;
}

/* The scanline sweep. One element, one transform, GPU-cheap. */
.er-tile__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(198, 255, 46, 0.13) 50%, transparent 58%);
  animation: er-scan 4.5s linear infinite;
}
.er-tile:nth-child(even) .er-tile__scan { animation-duration: 6s; animation-delay: -2s; }
@keyframes er-scan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

.er-tile__top {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.er-tile__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(5, 6, 7, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--er-ink-dim);
  font-family: var(--er-mono);
  font-size: 10.5px;
  font-weight: 600;
}

/* The bottom bars stand in for a title and a channel line. Deliberately blocks
 * rather than lorem ipsum: a grey bar is honestly empty, fake words are not. */
.er-tile__meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 6px;
}
.er-tile__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(244, 247, 249, 0.20);
}
.er-tile__bar--short { width: 52%; background: rgba(244, 247, 249, 0.11); }

/* --------------------------------------------------------------- activity
 *
 * A marquee of short activity fragments under the hero. Same rule as the
 * tiles: no names, no handles, nothing that reads as a real person's message.
 */

.er-ticker {
  position: relative;
  margin-top: 34px;
  border-top: 1px solid var(--er-line);
  border-bottom: 1px solid var(--er-line);
  padding: 12px 0;
  overflow: hidden;
  /* Fade both ends so the loop seam never lands in the middle of the eye. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.er-ticker__track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: er-marquee 34s linear infinite;
}
@keyframes er-marquee {
  /* -50%, because the track holds the list twice — that is what makes the loop
   * seamless instead of snapping back at the end. */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.er-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--er-ink-faint);
  font-family: var(--er-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.er-ticker__item b { color: var(--er-ink-dim); font-weight: 600; }

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

.er-card {
  background: var(--er-raised);
  border: 1px solid var(--er-line);
  border-radius: var(--er-radius-lg);
  padding: 22px;
}

.er-grid { display: grid; gap: 16px; }
.er-grid--2 { grid-template-columns: 1fr; }
.er-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .er-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .er-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .er-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A feature card. The lime hairline at the top edge only appears on hover, so
 * four of them at rest read as one calm grid rather than four competing boxes. */
.er-feature {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 28px;
  transition: border-color 0.24s var(--er-ease), transform 0.24s var(--er-ease);
}
.er-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--er-lime), transparent);
  opacity: 0;
  transition: opacity 0.24s var(--er-ease);
}
.er-feature:hover { border-color: var(--er-line-bright); transform: translateY(-3px); }
.er-feature:hover::before { opacity: 1; }

.er-feature__num {
  font-family: var(--er-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--er-lime-dim);
  margin-bottom: 16px;
}

.er-feature__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(198, 255, 46, 0.09);
  border: 1px solid rgba(198, 255, 46, 0.20);
  color: var(--er-lime);
}
.er-feature__icon svg { width: 20px; height: 20px; }

.er-feature p { margin: 0; color: var(--er-ink-dim); font-size: 14.5px; }

/* ------------------------------------------------------------------- CTA */

.er-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--er-radius-lg);
  border: 1px solid var(--er-line-bright);
  padding: 44px 24px;
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(198, 255, 46, 0.12), transparent 62%),
    radial-gradient(60% 100% at 80% 100%, rgba(124, 92, 255, 0.14), transparent 60%),
    var(--er-surface);
}
@media (min-width: 900px) { .er-cta { padding: 76px 40px; } }

.er-cta .er-lede { margin-left: auto; margin-right: auto; }
.er-cta .er-btn-row { justify-content: center; }

/* ------------------------------------------------------------------ forms */

.er-field { display: block; margin-bottom: 16px; }

.er-field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--er-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-ink-dim);
}

.er-input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: var(--er-radius);
  border: 1px solid var(--er-line-bright);
  background: var(--er-black);
  color: var(--er-ink);
  /* 16px exactly. Anything smaller and iOS Safari zooms the page on focus,
   * which on a signup form looks like the layout breaking. */
  font-size: 16px;
  transition: border-color 0.16s var(--er-ease), box-shadow 0.16s var(--er-ease);
}
.er-input::placeholder { color: var(--er-ink-faint); }
.er-input:focus {
  outline: none;
  border-color: var(--er-lime);
  box-shadow: 0 0 0 3px var(--er-lime-glow);
}
.er-input[aria-invalid="true"] {
  border-color: var(--er-live);
  box-shadow: 0 0 0 3px var(--er-live-glow);
}

/* Per-field message. Reserves no space when empty — a form that jumps as you
 * type is a form people abandon. */
.er-field__msg {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--er-ink-faint);
  min-height: 0;
}
.er-field__msg[data-tone="error"] { color: var(--er-live); }
.er-field__msg[data-tone="ok"] { color: var(--er-lime); }

.er-input-affix {
  position: relative;
  display: block;
}
/* The @ that lives inside the username box. */
.er-input-affix__at {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--er-ink-faint);
  font-size: 16px;
  pointer-events: none;
}
.er-input-affix .er-input { padding-left: 30px; }

.er-note {
  border-radius: var(--er-radius);
  border: 1px solid var(--er-line-bright);
  background: var(--er-raised);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--er-ink-dim);
  margin: 0 0 16px;
}
.er-note--error { border-color: rgba(255, 45, 79, 0.45); background: rgba(255, 45, 79, 0.08); color: #ffc9d1; }
.er-note--ok { border-color: rgba(198, 255, 46, 0.40); background: rgba(198, 255, 46, 0.07); color: var(--er-lime-bright); }
.er-note--warn { border-color: rgba(255, 176, 32, 0.42); background: rgba(255, 176, 32, 0.08); color: #ffd98a; }

/* Requirement checklist under the password box. */
.er-reqs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.er-reqs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--er-ink-faint);
}
.er-reqs li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--er-ink-faint);
  transition: background 0.16s var(--er-ease), box-shadow 0.16s var(--er-ease);
}
.er-reqs li[data-met="true"] { color: var(--er-lime); }
.er-reqs li[data-met="true"]::before { background: var(--er-lime); box-shadow: 0 0 8px var(--er-lime-glow); }

/* The spinner inside a submitting button. */
.er-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: er-spin 0.7s linear infinite;
}
@keyframes er-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- auth pages */

/* Auth screens get the hero's atmosphere at lower strength — the same product,
 * quieter, because a form is a place to concentrate. */
.er-auth {
  position: relative;
  overflow: hidden;
  padding: 40px 0 64px;
  isolation: isolate;
}
.er-auth::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 60% at 30% 0%, rgba(198, 255, 46, 0.13), transparent 66%),
    radial-gradient(40% 56% at 76% 8%, rgba(124, 92, 255, 0.16), transparent 66%);
  filter: blur(24px);
}
@media (min-width: 900px) { .er-auth { padding: 64px 0 96px; } }

.er-auth__card { padding: 26px 20px 24px; }
@media (min-width: 560px) { .er-auth__card { padding: 32px 30px 30px; } }

.er-auth__foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--er-ink-dim);
}

.er-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--er-ink-faint);
  font-family: var(--er-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.er-or::before, .er-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--er-line);
}

/* ------------------------------------------------------------ welcome page */

.er-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(198, 255, 46, 0.36);
  background: rgba(198, 255, 46, 0.08);
  color: var(--er-lime);
  font-family: var(--er-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.er-handle {
  font-family: var(--er-mono);
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 700;
  color: var(--er-lime);
  word-break: break-all;
}

/* One expanding ring behind the welcome mark. Celebration, not confetti. */
.er-burst {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
}
.er-burst::before, .er-burst::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--er-lime);
  opacity: 0;
  animation: er-ring 3.2s var(--er-ease) infinite;
}
.er-burst::after { animation-delay: 1.6s; }
@keyframes er-ring {
  0%   { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.er-burst__core {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--er-lime) 0 30%, transparent 32%),
    conic-gradient(from 200deg, var(--er-lime), var(--er-violet), var(--er-lime));
  box-shadow: 0 0 40px var(--er-lime-glow);
}

/* ------------------------------------------------------------ account page */

.er-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--er-line);
}
.er-detail:last-child { border-bottom: 0; }
.er-detail__k {
  font-family: var(--er-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-ink-faint);
}
.er-detail__v { font-size: 15px; color: var(--er-ink); word-break: break-word; }

.er-id {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- prose */

.er-prose { color: var(--er-ink-dim); font-size: 15.5px; }
.er-prose h2 { color: var(--er-ink); font-size: 20px; margin: 30px 0 8px; letter-spacing: -0.01em; }
.er-prose p { margin: 0 0 14px; }
.er-prose ul { margin: 0 0 14px; padding-left: 20px; }
.er-prose li { margin-bottom: 6px; }

/* ------------------------------------------------------------------ footer */

.er-footer {
  border-top: 1px solid var(--er-line);
  padding: 34px 0 44px;
  color: var(--er-ink-faint);
  font-size: 14px;
}
.er-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 760px) {
  .er-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.er-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.er-footer__links a { color: var(--er-ink-dim); font-size: 14px; }
.er-footer__links a:hover { color: var(--er-lime); }

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

.er-toast-host {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Above the safe area on a phone with a home bar. */
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: grid;
  gap: 8px;
  width: min(460px, calc(100vw - 32px));
  pointer-events: none;
}
.er-toast {
  pointer-events: auto;
  border-radius: var(--er-radius);
  border: 1px solid var(--er-line-bright);
  background: rgba(18, 21, 24, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 15px;
  font-size: 14.5px;
  color: var(--er-ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  animation: er-toast-in 0.22s var(--er-ease);
}
.er-toast[data-tone="error"] { border-color: rgba(255, 45, 79, 0.5); }
.er-toast[data-tone="ok"] { border-color: rgba(198, 255, 46, 0.45); }
.er-toast[data-tone="warn"] { border-color: rgba(255, 176, 32, 0.5); }
@keyframes er-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------- live */

/* The GO LIVE button. The red dot is the only red in the header, and it means
 * the same thing it means everywhere else on this site. */
.er-btn--golive { gap: 7px; }
.er-btn--golive .er-dot { width: 7px; height: 7px; }
.er-btn--primary.er-btn--golive .er-dot { background: var(--er-live); }

/* The LIVE NOW rail heading. */
.er-livebar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.er-livebar__count {
  font-family: var(--er-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--er-ink-faint);
}

/* A live stream card on the front page. */
.er-livecard {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  color: var(--er-ink);
  transition: border-color 0.2s var(--er-ease), transform 0.2s var(--er-ease);
}
.er-livecard:hover { border-color: var(--er-live); transform: translateY(-3px); color: var(--er-ink); }

.er-livecard__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(80% 80% at 35% 30%, rgba(198, 255, 46, 0.24), transparent 65%), #0e1216;
}
.er-livecard__tag { position: absolute; top: 10px; left: 10px; z-index: 2; }
.er-livecard__body { display: block; padding: 14px 16px 16px; }
.er-livecard__title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 3px;
  /* Two lines, then ellipsis. A long title must not make one card taller than
   * the three beside it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------- broadcast + watch */

.er-live-layout { display: grid; gap: 22px; }
@media (min-width: 960px) {
  /* Preview left, controls right. minmax(0,…) on the first column is what stops
   * the video's intrinsic width from pushing the grid wider than the page. */
  .er-live-layout { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
}

.er-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--er-radius-lg);
  border: 1px solid var(--er-line);
  background: #000;
  overflow: hidden;
}
.er-stage--watch { border-color: var(--er-line-bright); }

.er-stage__video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.er-stage__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 20px;
  background: var(--er-surface);
}

.er-stage__tag { position: absolute; top: 12px; left: 12px; z-index: 2; }

.er-watch-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.er-row-between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* A checkbox row that stays readable at 360px: the box never shrinks and the
 * label wraps beside it rather than under it. */
.er-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--er-ink-dim);
  cursor: pointer;
}
.er-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--er-lime);
  cursor: pointer;
}

/* A button that reads as a link, for opening the agreement from inside a
 * sentence. */
.er-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--er-lime);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.er-linkbtn:hover { color: var(--er-lime-bright); }

/* ------------------------------------------------------------------ modal */

.er-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 6, 7, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.er-modal__box {
  width: min(720px, 100%);
  /* svh, not vh: on mobile Safari the address bar makes vh taller than the
   * visible page, which would push the Agree button off the bottom. */
  max-height: min(86svh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--er-raised);
  border: 1px solid var(--er-line-bright);
  border-radius: var(--er-radius-lg);
  overflow: hidden;
}

.er-modal__head,
.er-modal__foot {
  flex: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--er-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.er-modal__foot { border-bottom: 0; border-top: 1px solid var(--er-line); }

.er-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  font-size: 14.5px;
}
.er-modal__body h3 {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--er-ink);
}
.er-modal__body h4 {
  margin: 22px 0 6px;
  font-size: 14.5px;
  color: var(--er-lime);
}

/* ---------------------------------------------------------------- replays */

.er-replay {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--er-line);
}
.er-replay:last-child { border-bottom: 0; }

.er-replay__thumb {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #0e1216;
  display: grid;
  place-items: center;
}
.er-replay__thumb img { width: 100%; height: 100%; object-fit: cover; }
.er-replay__ph {
  font-family: var(--er-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--er-ink-faint);
}

.er-replay__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.er-replay__title {
  font-weight: 600;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.er-chip-wait {
  flex: none;
  font-family: var(--er-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--er-warn);
}

.er-skeleton-row {
  height: 58px;
  border-radius: var(--er-radius);
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--er-raised) 25%, var(--er-raised-2) 37%, var(--er-raised) 63%);
  background-size: 400% 100%;
  animation: er-shimmer 1.4s linear infinite;
}
@keyframes er-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ---------------------------------------------------------------- utility */

.er-stack { display: grid; gap: 14px; }
.er-center { text-align: center; }
.er-nowrap { white-space: nowrap; }
.er-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- reduced motion
 *
 * Every animation on this site is decorative — the drifting bloom, the scanline,
 * the float, the marquee, the rings, the live pulse. Somebody who has asked
 * their OS for less motion loses nothing by having all of them stop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}