/* IRLTube — the Tube red.
 *
 * White and cool grey, with the RED FROM THE WORDMARK as the interface colour.
 * Sampled from the logo rather than guessed: every letter of "Tube" averages
 * #E6372F, and the #CF0010–#F8663B spread is the shading inside the glyphs.
 *
 * ============================================================================
 * BRAND AND LIVE SHARE A HUE. THEY ARE SEPARATED BY FORM, NOT COLOUR.
 * ============================================================================
 *
 * This site previously used the lens blue for the interface precisely so red
 * could mean live and nothing else. That is no longer the case, so the
 * distinction has to be carried somewhere else, and it is:
 *
 *   BUTTONS are a GRADIENT, fully rounded pills.
 *   THE LIVE BADGE is FLAT, small-radius, uppercase, letterspaced, and its dot
 *   PULSES. It also almost always sits on a video thumbnail rather than on
 *   white, next to nothing else that is red.
 *
 * So: a flat red rectangle that blinks is live. A rounded red gradient is a
 * button. If a future component needs to be red and is neither, it needs a
 * reason — and if the LIVE badge ever starts getting lost, the fix is to change
 * the BADGE, not to repaint every button.
 *
 * The button red is #DE3229 rather than the exact #E6372F for one reason: white
 * text on the sampled colour measures 4.36:1 and misses AA. Two steps deeper is
 * visually indistinguishable and clears it at 4.67:1. The WORDMARK still ships
 * the true colour — that is artwork, not a text background.
 *
 * Contrast: every text colour here clears 4.5:1 on its own background, checked
 * in the browser rather than by eye. --irl-dim is the floor and is for secondary
 * lines, never for anything a person has to read in order to use the page.
 */

:root {
  /* Surfaces, lightest first */
  --irl-bg: #f7f9fc;
  --irl-surface: #ffffff;
  --irl-surface-2: #eef2f7;
  --irl-line: #e2e8f0;
  --irl-line-soft: #edf1f6;

  /* Text */
  --irl-text: #111827;
  --irl-muted: #55616f;
  --irl-dim: #5d6876;

  /* Interface — the Tube red */
  --irl-accent: #DE3229;
  /* THE GRADIENT DEEPENS, it never brightens. White text needs a background
   * luminance under ~0.183 to clear 4.5:1, and the orange highlight inside the
   * wordmark (#F8663B) measures 3.0:1 — so a button running out to it would be
   * half illegible while looking perfectly fine. Both stops here clear it. */
  --irl-accent-2: #C21F17;
  --irl-accent-ink: #A8221B;
  --irl-grad: linear-gradient(100deg, var(--irl-accent) 0%, var(--irl-accent-2) 100%);
  --irl-accent-wash: rgba(222, 50, 41, .08);

  /* Live. The same family as the brand now — see the note at the top of this
   * file for what keeps the two apart. */
  --irl-live: #dc2118;
  --irl-ok: #0f7a56;
  --irl-warn: #9a5b00;
  --irl-danger: #c0271c;

  /* The orange highlight from inside the wordmark. Texture only — it fails
   * contrast as a text background, so never on text, a border or a control. */
  --irl-warm: #F8663B;

  --irl-radius: 14px;
  --irl-radius-sm: 9px;
  --irl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --irl-shadow: 0 10px 28px rgba(16, 24, 40, .10);
  --irl-maxw: 1240px;
}

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

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

body {
  margin: 0;
  background: var(--irl-bg);
  color: var(--irl-text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

:focus-visible {
  outline: 2px solid var(--irl-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.irl-wrap {
  width: 100%;
  max-width: var(--irl-maxw);
  margin-inline: auto;
  padding-inline: 18px;
}

.irl-skip { position: absolute; left: -9999px; }
.irl-skip:focus {
  left: 12px; top: 12px; z-index: 99;
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  padding: 10px 14px;
  border-radius: var(--irl-radius-sm);
}

/* ---------------------------------------------------------------- Logo -- */

/* Both halves are images cut from the supplied logo, sized by HEIGHT with
 * width:auto so the intrinsic aspect survives a re-export. The width/height
 * attributes on the tags only reserve space so the header does not jump.
 *
 * THIS THEME USES THE ORIGINAL ARTWORK. The logo was drawn for a light
 * background — its "IRL" half is #2D3035 — so wordmark-light.png is simply the
 * wordmark as delivered. The recoloured wordmark-dark.png the charcoal theme
 * needed is gone along with that theme. */
.irl-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--irl-text);
}

.irl-logo__mark { height: 30px; width: auto; flex: none; }
.irl-logo__word { height: 21px; width: auto; flex: none; }
.irl-logo--sm .irl-logo__mark { height: 22px; }
.irl-logo--sm .irl-logo__word { height: 16px; }

/* -------------------------------------------------------------- Header -- */

.irl-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--irl-line);
}
.irl-header__spacer { flex: 1; }
.irl-header__actions { display: flex; align-items: center; gap: 9px; }

.irl-header__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--irl-line);
  background: var(--irl-surface);
}
.irl-header__name {
  font-size: 13px;
  font-weight: 600;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) { .irl-header__name { display: none; } }

/* On a phone the header is the logo plus two actions and there is not room for
   all three at full size. The logo shrinks rather than the buttons, because the
   buttons are what somebody came to press. */
@media (max-width: 430px) {
  .irl-header { padding-inline: 12px; gap: 8px; }
  .irl-logo { gap: 6px; }
  .irl-logo__mark { height: 24px; }
  .irl-logo__word { height: 17px; }
  .irl-header__actions { gap: 6px; }
  .irl-header__actions .irl-btn--sm { padding: 7px 11px; font-size: 12.5px; }
}

/* Rendered as EITHER an <img> (a real photo) or a <span> (the initial), so the
 * rules have to suit both. object-fit only applies to the image; the grid
 * centring only applies to the span, where it centres the letter. */
.irl-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--irl-surface-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--irl-muted);
  flex: none;
}
span.irl-avatar { display: grid; place-items: center; }
img.irl-avatar { display: block; }
.irl-avatar--lg { width: 84px; height: 84px; font-size: 32px; }

/* ------------------------------------------------------------- Buttons -- */

.irl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--irl-surface-2);
  color: var(--irl-text);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  /* A two-word label must not wrap into a two-line pill. At 375px "Create
     account" does exactly that in the header without this. */
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.irl-btn:hover:not(:disabled) { filter: brightness(.96); }
.irl-btn:active:not(:disabled) { transform: translateY(1px); }
.irl-btn:disabled { opacity: .5; cursor: not-allowed; }

.irl-btn--sm { padding: 8px 14px; font-size: 13px; }
.irl-btn--lg { padding: 14px 26px; font-size: 16px; }
.irl-btn--block { width: 100%; }

.irl-btn--primary { background: var(--irl-grad); color: #fff; }
.irl-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
.irl-btn--ghost { background: var(--irl-surface); border-color: var(--irl-line); }
.irl-btn--quiet { background: var(--irl-surface); border-color: var(--irl-line); }
.irl-btn--danger { background: var(--irl-surface); border-color: #f0c4c0; color: var(--irl-danger); }

/* Go live used to be the one red button on a blue site. Now every primary
 * action is red, so it is distinguished by the pulsing dot instead — the same
 * signal the LIVE badge uses, which is the point: this is the control that
 * starts that. Kept FLAT rather than gradient so it reads as the live family
 * rather than as another primary button. */
.irl-btn--golive { background: var(--irl-live); color: #fff; }
.irl-btn--golive:hover:not(:disabled) { filter: brightness(1.08); }
.irl-btn--golive .irl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: irl-pulse 1.6s ease-in-out infinite;
}

/* Subscribed is a STATE, not a call to action — so it loses the fill and
 * becomes a quiet outline. A button that looks identical before and after is a
 * button people press twice. */
.irl-btn--subbed {
  background: var(--irl-surface);
  border-color: var(--irl-line);
  color: var(--irl-muted);
}

.irl-spinner {
  width: 14px; height: 14px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: .7;
  animation: irl-spin .7s linear infinite;
}

@keyframes irl-spin { to { transform: rotate(360deg); } }
@keyframes irl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------------------------------------------------------------- Live -- */

/* The only red on a card, and now the only red on the page that is not the Go
 * live button. On white it does not need to fight anything. */
.irl-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--irl-live);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
}
.irl-live-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: irl-pulse 1.6s ease-in-out infinite;
}

/* Sits on a video thumbnail, which is arbitrary imagery — so it keeps its own
 * dark ground rather than assuming a light one. */
.irl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(17, 24, 39, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
}

/* ------------------------------------------- Creator number badge ------- */

/* "Creator #7". BLUE, not red — a permanent badge in the live colour would put
 * a false LIVE signal on every profile that has one. */
.irl-number {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--irl-line);
  background: var(--irl-surface-2);
  color: var(--irl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  /* The h1 it sits in is up to 33px; the badge must not inherit that. */
  vertical-align: middle;
}

/* The first hundred. */
.irl-number[data-founder="true"] {
  border-color: rgba(222, 50, 41, .35);
  background: var(--irl-accent-wash);
  color: var(--irl-accent-ink);
}

/* ---------------------------------------------------------------- Hero -- */

.irl-hero {
  position: relative;
  overflow: hidden;
  background: var(--irl-surface);
  border-bottom: 1px solid var(--irl-line);
  padding-block: clamp(48px, 9vw, 96px);
}
/* Texture, not signal. This is the only place the warm orange appears, at an
 * opacity where it is a tint on white rather than a colour. */
.irl-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(50% 45% at 20% 25%, rgba(222, 50, 41, .10), transparent 70%),
    radial-gradient(45% 40% at 82% 18%, rgba(248, 102, 59, .11), transparent 70%);
  pointer-events: none;
  animation: irl-drift 26s ease-in-out infinite alternate;
}
@keyframes irl-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

.irl-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.irl-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.03;
  letter-spacing: -.03em;
  font-weight: 850;
}
.irl-hero p {
  margin: 0 0 26px;
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--irl-muted);
  max-width: 52ch;
}
.irl-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------ Sections -- */

.irl-section { padding-block: 34px; }

.irl-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.irl-section__head h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.irl-section__count { color: var(--irl-dim); font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------ Live card grid -- */

.irl-grid {
  display: grid;
  gap: 18px;
  /* Narrower columns than a landscape grid would use: a 272px column at 9/16 is
     a 484px-tall card, which is a wall on a laptop. 208px gives ~370px, about
     the height of a widescreen card, so a vertical-first grid still scans. */
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  /* Cards in a row differ in height once streams differ in shape. Without this
     they stretch to the tallest and the short ones grow a grey tail. */
  align-items: start;
}
.irl-grid--tight { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

.irl-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  border-radius: var(--irl-radius);
  overflow: hidden;
  box-shadow: var(--irl-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.irl-card:hover {
  transform: translateY(-3px);
  border-color: #cfd9e6;
  box-shadow: var(--irl-shadow);
}

/* The aspect is set INLINE per card from the stream's recorded dimensions —
 * see streamAspectCss in irl-cards.js. This 9/16 is the fallback for a replay
 * card, which has no stream document behind it, and matches the platform
 * default. cover is safe precisely because the box matches the content; it only
 * crops when the two disagree, which is the case the inline value removes. */
.irl-card__thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  background: var(--irl-surface-2);
  overflow: hidden;
}
.irl-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* No thumbnail yet is the NORMAL case for a stream that just started —
 * Cloudflare needs a moment. A colour field beats a broken image icon. Kept
 * dark because a video frame will replace it and a light placeholder would
 * flash white before the picture lands. */
.irl-card__thumb--empty {
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(222, 50, 41, .32), transparent 70%),
    radial-gradient(60% 80% at 80% 70%, rgba(248, 102, 59, .26), transparent 70%),
    #1f2733;
}

.irl-card__badges {
  position: absolute;
  inset: 9px 9px auto 9px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.irl-card__body { padding: 12px 13px 14px; display: flex; gap: 10px; }
.irl-card__meta { min-width: 0; flex: 1; }

.irl-card__title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.irl-card__by { margin: 0; font-size: 13px; color: var(--irl-muted); }
.irl-card__sub { margin: 3px 0 0; font-size: 12px; color: var(--irl-dim); }

/* --------------------------------------------------------- Empty state -- */

.irl-empty {
  border: 1px dashed #cfd9e6;
  border-radius: var(--irl-radius);
  padding: 40px 22px;
  text-align: center;
  color: var(--irl-muted);
  background: var(--irl-surface);
}
.irl-empty h3 { margin: 0 0 6px; color: var(--irl-text); font-size: 17px; }
.irl-empty p { margin: 0 auto; max-width: 44ch; font-size: 14px; }
.irl-empty__cta { margin-top: 18px; }

.irl-error {
  border: 1px solid #f0c4c0;
  background: #fdf2f1;
  color: #8f1c14;
  border-radius: var(--irl-radius-sm);
  padding: 13px 15px;
  font-size: 14px;
}

/* ------------------------------------------------------------- Skeleton -- */

.irl-skeleton {
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  border-radius: var(--irl-radius);
  overflow: hidden;
}
.irl-skeleton__thumb { aspect-ratio: 16 / 9; background: var(--irl-surface-2); }
.irl-skeleton__bar {
  height: 10px;
  margin: 12px 13px;
  border-radius: 5px;
  background: var(--irl-surface-2);
}
.irl-skeleton__bar--short { width: 45%; }
.irl-skeleton, .irl-skeleton * { animation: irl-shimmer 1.5s ease-in-out infinite; }
@keyframes irl-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* --------------------------------------------------------------- Forms -- */

.irl-auth {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 42px 18px 64px;
}
.irl-auth__card {
  width: 100%;
  max-width: 430px;
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  border-radius: 18px;
  padding: 28px 26px 26px;
  box-shadow: var(--irl-shadow);
}
.irl-auth__card h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.irl-auth__card > p { margin: 0 0 22px; color: var(--irl-muted); font-size: 14px; }

.irl-field { margin-bottom: 15px; }
.irl-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 620;
  color: var(--irl-muted);
}

.irl-input {
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--irl-radius-sm);
  border: 1px solid #d3dbe6;
  background: var(--irl-surface);
  color: var(--irl-text);
  font: inherit;
}
.irl-input::placeholder { color: var(--irl-dim); }
.irl-input:focus {
  border-color: var(--irl-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--irl-accent-wash);
}
.irl-input[aria-invalid="true"] { border-color: var(--irl-danger); }

.irl-input--prefixed { padding-left: 30px; }
.irl-field__wrap { position: relative; }
.irl-field__at {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--irl-dim);
  pointer-events: none;
}

.irl-msg { display: block; margin-top: 6px; font-size: 12.5px; min-height: 1em; color: var(--irl-dim); }
.irl-msg[data-tone="error"] { color: var(--irl-danger); }
.irl-msg[data-tone="ok"] { color: var(--irl-ok); }

.irl-note { margin: 0 0 16px; padding: 11px 13px; border-radius: var(--irl-radius-sm); font-size: 13.5px; }
.irl-note--error { background: #fdf2f1; border: 1px solid #f0c4c0; color: #8f1c14; }
.irl-note--ok { background: #eefaf5; border: 1px solid #b7e4d2; color: #0b5c41; }
.irl-note--info { background: var(--irl-accent-wash); border: 1px solid rgba(222, 50, 41, .25); color: var(--irl-accent-ink); }

.irl-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.irl-rules li { font-size: 12.5px; color: var(--irl-dim); display: flex; align-items: center; gap: 7px; }
.irl-rules li::before { content: "○"; font-size: 11px; }
.irl-rules li[data-ok="true"] { color: var(--irl-ok); }
.irl-rules li[data-ok="true"]::before { content: "●"; }

.irl-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--irl-dim);
  font-size: 12px;
}
.irl-divider::before, .irl-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--irl-line);
}

.irl-swap { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--irl-muted); }
.irl-swap a { color: var(--irl-accent); font-weight: 620; }

.irl-legal { margin: 16px 0 0; font-size: 11.5px; color: var(--irl-dim); text-align: center; line-height: 1.5; }
.irl-legal a { color: var(--irl-muted); }

/* A link inside body copy. Blue, because on this site blue is what "you can
 * press this" looks like. */
.irl-link { color: var(--irl-accent); font-weight: 620; }

/* -------------------------------------------------------------- Player -- */

/* STAYS DARK IN A LIGHT THEME, on purpose. A video sits better in a dark
 * surround whatever the page around it is doing, and letterbox bars on white
 * would glare.
 *
 * ============================================================================
 * THE PLAYER TAKES THE SHAPE OF THE STREAM. VERTICAL IS THE DEFAULT.
 * ============================================================================
 *
 * --irl-player-aspect is set by watch.js from the video element's own
 * videoWidth/videoHeight as soon as the first frame arrives — no field on the
 * stream document, no extra write, nothing for a broadcaster to get wrong.
 *
 * The 9/16 fallback here is what shows BEFORE that: this is a phone-first
 * platform, so an unknown stream is assumed vertical rather than letterboxed
 * into a widescreen box it will probably not fill.
 *
 * object-fit stays CONTAIN in every mode. Whatever shape the box ends up,
 * nothing is ever cropped — a landscape stream in a tall box gets bars rather
 * than having its sides cut off. That is the lesson the camera constraints
 * carry too: fit and pad, never crop. */
.irl-player {
  position: relative;
  background: #0d1117;
  border-radius: var(--irl-radius);
  overflow: hidden;
  aspect-ratio: var(--irl-player-aspect, 9 / 16);
  /* A tall player must not run off the screen on a laptop. The stream keeps its
     shape; the box just stops growing. */
  max-height: min(78vh, 820px);
  margin-inline: auto;
  max-width: 100%;
  border: 1px solid var(--irl-line);
  box-shadow: var(--irl-shadow-sm);
  /* NO TRANSITION ON aspect-ratio. Animating it while the value comes from a
     custom property leaves the box pinned at the OLD ratio forever — measured:
     with the transition, switching to 16/9 kept a 395x702 box reporting
     "0.5625 / 1"; with it removed, the identical change gave 862x485 and
     "16 / 9" immediately. The override silently did nothing. */
}
.irl-player video { width: 100%; height: 100%; object-fit: contain; background: #0d1117; }

.irl-player__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
  background: rgba(13, 17, 23, .88);
  color: #c9d2de;
  font-size: 14px;
}
.irl-player__overlay[hidden] { display: none; }
.irl-player__overlay a { color: #ff8f80; }

.irl-player__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; }
.irl-player__controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }

/* The sound toggle. Its own control rather than an .irl-btn because it sits on
 * video, not on the page: it needs a dark ground of its own whatever frame is
 * behind it, and it must not inherit the red that means live. */
.irl-player__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(13, 17, 23, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  /* Comfortably past the 44px touch target once padding is counted, because on
     a phone this is the only control on the player. */
  min-height: 40px;
  transition: background .12s ease, border-color .12s ease;
}
.irl-player__btn:hover { background: rgba(13, 17, 23, .88); border-color: rgba(255, 255, 255, .38); }
.irl-player__btn:active { transform: translateY(1px); }
.irl-player__icon { font-size: 15px; line-height: 1; }

.irl-watch { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 900px) { .irl-watch { grid-template-columns: minmax(0, 1fr); } }

.irl-panel {
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  border-radius: var(--irl-radius);
  padding: 16px 17px;
  box-shadow: var(--irl-shadow-sm);
}
.irl-panel h2 { margin: 0 0 10px; font-size: 15px; }
.irl-panel + .irl-panel { margin-top: 16px; }

.irl-streamhead { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; }
.irl-streamhead h1 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.irl-streamhead__meta { min-width: 0; flex: 1; }
.irl-streamhead__by { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.irl-streamhead__by a { text-decoration: none; font-weight: 650; }
.irl-streamhead__subs { font-size: 12.5px; color: var(--irl-dim); }

/* ------------------------------------------------------------- Creator -- */

.irl-creator {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  padding-block: 30px;
}
.irl-creator__meta { min-width: 0; flex: 1; }
.irl-creator__name {
  margin: 0;
  font-size: clamp(24px, 4vw, 33px);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.irl-creator__stats { margin: 6px 0 0; color: var(--irl-muted); font-size: 14px; }
.irl-creator__actions { display: flex; gap: 9px; flex-wrap: wrap; }

.irl-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--irl-line);
  margin-bottom: 20px;
  overflow-x: auto;
}
.irl-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--irl-muted);
  font: inherit;
  font-weight: 620;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.irl-tab[aria-selected="true"] { color: var(--irl-text); border-bottom-color: var(--irl-accent); }

/* --------------------------------------------------------------- Setup -- */

.irl-setup { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 880px) { .irl-setup { grid-template-columns: minmax(0, 1fr); } }

/* The broadcaster's own preview follows the same rule, and it matters more
 * here: somebody framing a shot in a 16:9 box and then being broadcast at 9:16
 * has been shown a lie about where the edges are. */
.irl-preview {
  position: relative;
  background: #0d1117;
  border: 1px solid var(--irl-line);
  border-radius: var(--irl-radius);
  overflow: hidden;
  aspect-ratio: var(--irl-preview-aspect, 9 / 16);
  max-height: min(62vh, 620px);
  margin-inline: auto;
  max-width: 100%;
  /* NO TRANSITION ON aspect-ratio. Animating it while the value comes from a
     custom property leaves the box pinned at the OLD ratio forever — measured:
     with the transition, switching to 16/9 kept a 395x702 box reporting
     "0.5625 / 1"; with it removed, the identical change gave 862x485 and
     "16 / 9" immediately. The override silently did nothing. */
}
/* object-fit: contain, never cover. A phone camera hands back a portrait frame
 * and cropping it to a 16:9 box throws most of the picture away — the
 * broadcaster then cannot see what they are actually sending. Letterbox it. */
.irl-preview video { width: 100%; height: 100%; object-fit: contain; background: #0d1117; }

.irl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--irl-muted); }
.irl-check input { margin-top: 3px; flex: none; accent-color: var(--irl-accent); }
.irl-check a { color: var(--irl-accent); }

.irl-status { font-size: 13px; color: var(--irl-muted); min-height: 1.4em; margin: 10px 0 0; }

/* --------------------------------------------------------------- Modal -- */

.irl-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
}
.irl-modal[hidden] { display: none; }
.irl-modal__card {
  width: min(760px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
}
.irl-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--irl-line);
}
.irl-modal__head h2 { margin: 0; font-size: 17px; }
.irl-modal__body { padding: 18px; overflow: auto; font-size: 13.5px; line-height: 1.6; color: var(--irl-muted); }
.irl-modal__body h3 { color: var(--irl-text); font-size: 14px; margin: 18px 0 6px; }
.irl-modal__body h3:first-child { margin-top: 0; }
.irl-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid var(--irl-line);
  background: var(--irl-bg);
}

/* ------------------------------------------------------------- Reasons -- */

/* The report reason list. Each row is a whole clickable label rather than a
 * radio with text beside it — on a phone, a 13px radio button is not a target,
 * and somebody filing a report is usually in a hurry and often upset. */
.irl-reasons { display: grid; gap: 2px; }

.irl-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--irl-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--irl-text);
  min-height: 44px;
  transition: background .12s ease, border-color .12s ease;
}
.irl-reason:hover { background: var(--irl-surface-2); }
.irl-reason input { margin-top: 2px; flex: none; accent-color: var(--irl-accent); }
.irl-reason:has(input:checked) {
  background: var(--irl-accent-wash);
  border-color: rgba(222, 50, 41, .35);
}
/* :has() is widely supported now but not universally; without it the checked
   row simply looks like the others, which is a cosmetic loss rather than a
   broken form. The focus ring still shows which row is selected. */
.irl-reason input:focus-visible { outline: 2px solid var(--irl-accent); outline-offset: 2px; }

.irl-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The details box in the report dialog. */
textarea.irl-input { resize: vertical; min-height: 68px; font: inherit; }

/* -------------------------------------------------------------- Toasts -- */

.irl-toast-host {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
}
.irl-toast {
  background: var(--irl-surface);
  border: 1px solid var(--irl-line);
  border-radius: var(--irl-radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  box-shadow: var(--irl-shadow);
  animation: irl-rise .18s ease-out;
}
.irl-toast[data-tone="error"] { border-color: #f0c4c0; color: #8f1c14; background: #fdf2f1; }
.irl-toast[data-tone="ok"] { border-color: #b7e4d2; color: #0b5c41; background: #eefaf5; }
@keyframes irl-rise { from { opacity: 0; transform: translateY(8px); } }

/* -------------------------------------------------------------- Footer -- */

.irl-main { flex: 1; }

.irl-footer {
  margin-top: 54px;
  border-top: 1px solid var(--irl-line);
  background: var(--irl-surface);
  padding-block: 26px 34px;
  color: var(--irl-muted);
  font-size: 13px;
}
.irl-footer__inner { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.irl-footer__blurb { margin: 10px 0 0; }
.irl-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.irl-footer__links a { text-decoration: none; }
.irl-footer__links a:hover { color: var(--irl-text); }

/* ------------------------------------------------------------- Utility -- */

.irl-prose { max-width: 68ch; }
.irl-prose h1 { font-size: 28px; letter-spacing: -.02em; }
.irl-prose p { color: var(--irl-muted); }
.irl-prose a { color: var(--irl-accent); }

.irl-stack { display: grid; gap: 12px; }
.irl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.irl-muted { color: var(--irl-muted); }
.irl-dim { color: var(--irl-dim); }
[hidden] { display: none !important; }

/* Everything that moves on this site is decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Go live: the source switch and the head cam controls (game + head cam). */
.irl-modes .is-on { background: var(--irl-accent); border-color: var(--irl-accent); color: #fff; }
.irl-input--sm { padding: 6px 8px; font-size: 13px; width: auto; margin-left: 4px; }
.irl-headcam label { display: inline-flex; align-items: center; }