/* Pick the Cast — design system (light; Apple HIG structure, Pick the Cast brand)
   Platform UI is monochrome: Onyx on white and Off White, Bricolage Grotesque and Instrument Sans, the P mark.
   The show brings the color: Survivor orange only on Survivor-specific cards,
   badges, picks and charts (--show*), plus the season logo, photos and tribes. */

/* Bricolage Grotesque for headings (its letters sharpen as they grow: optical size follows font size),
   Instrument Sans for text, and Instrument Sans condensed for scores and ranks. Both SIL OFL, self-hosted. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans Condensed"; font-style: normal; font-weight: 400 700; font-stretch: 80%; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;

  /* Brand neutrals */
  --bg: #f7f8f9;                       /* Off White */
  --bg-card: #ffffff;                  /* White */
  --bg-alt: #f7f8f9;                   /* marketing section band */
  --fill: #eef0f2;                     /* quiet buttons, chips */
  --fill-strong: #e6e8eb;              /* Mist */
  --label: #0b0b0d;                    /* Onyx, 19.7:1 on white */
  --label-2: #63676e;                  /* brand Gray one step darker: 5.0:1 on fills, 4.6:1 on Mist */
  --label-3: #9a9da3;                  /* placeholders and decoration only */
  --separator: #e6e8eb;                /* Mist */
  --separator-strong: #d3d6da;
  --material: rgba(255, 255, 255, 0.84);

  /* Liquid Glass: the floating layer only (bars, the tab bar, menus, toasts, the pick tray), never content.
     Fills stay thick enough that --label-on-glass keeps 5:1 even over dark tiles and photos scrolling beneath. */
  --glass: rgba(255, 255, 255, .8);                 /* bars and bar buttons */
  --glass-thick: rgba(255, 255, 255, .9);           /* menus and toasts: mostly text */
  --glass-filter: blur(24px) saturate(1.7);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(255, 255, 255, .6);
  --glass-edge: 0 0 0 .5px rgba(11, 11, 13, .12);
  --glass-lift: 0 12px 32px -12px rgba(11, 11, 13, .28), 0 2px 8px -2px rgba(11, 11, 13, .08);
  --lens: rgba(11, 11, 13, .075);                   /* the selected tab's pill */
  --label-on-glass: #4f535a;                        /* 7.7:1 on white, 4.9:1 over Onyx through --glass (--label-2 would be 3.6) */

  /* Platform accent is Onyx. Show colors only where the content is the show's. */
  --accent: #0b0b0d;
  --accent-on-tint: #0b0b0d;
  --accent-bright: #f97316;
  --accent-tint: #eef0f2;
  --show: #c2410c;                     /* Survivor orange for text, rings, checks: 5.2:1 on white */
  --show-fill: #f97316;                /* Survivor orange (brand) for fills and decoration */
  --show-tint: #fff1e6;                /* Survivor orange wash; --show text on it is 4.7:1 */
  --green: #1f7a36;                    /* 5.4:1 on white, 4.7:1 on fills and tints */
  --red: #d70015;                      /* accessible red, 5.5:1 */
  --gold: #8a6100;                     /* 5.6:1 */
  --gold-fill: #ffcc00;
  --blue: #0066cc;

  /* Legacy names used across views */
  --night: var(--bg); --night-2: var(--bg-card); --night-3: var(--bg-card);
  --surface: var(--bg-card); --surface-2: var(--fill); --surface-3: var(--fill-strong);
  --hairline: var(--separator); --hairline-strong: var(--separator-strong);
  --bone: var(--label); --muted: var(--label-2); --faint: var(--label-3);
  --sunset: var(--show); --sunset-hi: var(--show); --ember: var(--show); --on-sunset: #ffffff;
  --ocean: var(--blue); --jade: #12645b; --pos: var(--green); --neg: var(--red);
  --horizon: linear-gradient(90deg, #c2410c, #f97316 55%, #fdba74);

  /* Type: Bricolage Grotesque headings, Instrument Sans text, condensed tabular figures for scores */
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-num: "Instrument Sans Condensed", "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --r-xl: 28px;
  --r-lg: 20px;
  --r: 14px;
  --r-sm: 10px;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); /* clears the notch in landscape */
  --tabbar-h: 62px;
  --tabbar-gap: 10px;                  /* the floating tab bar's distance from the bottom edge */
  --header-h: 52px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.04);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-contrast: more) {
  :root { --label-2: #35373d; --label-3: #545458; --separator: #b9bdc3; --show: #9a3412;
    --glass: rgba(255, 255, 255, .97); --glass-thick: #ffffff; --glass-edge: 0 0 0 1px rgba(11, 11, 13, .5); --label-on-glass: #35373d; --lens: rgba(11, 11, 13, .14); }
}
/* Browsers without backdrop blur get the same bars, opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .97); --glass-thick: #ffffff; }
}

/* --- Base ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--label);
  font: 400 17px/1.5 var(--font-body);
  letter-spacing: -0.005em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a:not(.btn), .prose a:not(.btn), .link { color: var(--accent); }
/* Links inside running text get a quiet underline, so they don't rely on color alone. */
/* Links are Onyx like the text around them, so they always carry an underline. */
p a:not(.btn), .prose a:not(.btn), .link, .auth__alt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
p a:not(.btn):hover, .prose a:not(.btn):hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 .75em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; color: var(--label); }
h1 { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }   /* Large Title */
h2 { font-size: 22px; line-height: 1.27; font-weight: 700; letter-spacing: -0.005em; }  /* Title 2 */
h3 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }    /* Headline */
small, .small { font-size: 13px; letter-spacing: normal; }
.muted { color: var(--label-2); }
.faint { color: var(--label-2); } /* text must stay readable; --label-3 is for placeholders and decoration */
.pos { color: var(--green); }
.neg { color: var(--red); }
.gold { color: var(--gold); }
:focus-visible { outline: 3px solid rgba(0, 102, 204, 0.5); outline-offset: 2px; border-radius: 8px; }
::selection { background: rgba(249, 115, 22, .22); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a.sr-only[href="#main"]:focus { position: fixed; z-index: 100; top: calc(10px + env(safe-area-inset-top)); left: 12px; width: auto; height: auto; padding: 10px 16px; margin: 0; overflow: visible; clip: auto; border-radius: 999px; background: var(--onyx); color: #fff; font-weight: 600; }
:where([id]) { scroll-margin-top: 72px; } /* a jump to #something lands below the sticky bar */
/* Phones zoom into any field under 16px when it's tapped, so touch screens get 16px fields */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: max(16px, 1em); }
  .btn--sm { min-height: 40px; }
}
/* Small text links get a 44px-tall target without changing the layout */
.tap { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }
hr { border: 0; border-top: 1px solid var(--separator); margin: 20px 0; }
.num { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }

/* --- App shell -------------------------------------------------------------------------- */

.app { min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + env(safe-area-inset-bottom) + 24px); }
/* No bar background: its buttons carry the glass, and once content scrolls beneath, a scroll edge
   (a blur that fades out below the bar) keeps the title legible without stacking glass on glass. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; gap: 12px;
}
.topbar::before {
  content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(247, 248, 249, .94), rgba(247, 248, 249, .8) 62%, rgba(247, 248, 249, 0));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 64%, transparent); mask-image: linear-gradient(#000 64%, transparent);
  opacity: 0; transition: opacity .2s;
}
html.is-scrolled .topbar::before { opacity: 1; }
.topbar__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.wordmark { font: 600 17px/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; color: var(--label); }
.mark { width: 26px; height: 28px; flex: none; color: var(--label); }
.brand { display: inline-flex; align-items: center; flex: none; }
.logo { display: block; height: 30px; width: auto; }

.league-switch { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 6px 8px; margin-left: -8px; border-radius: 10px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.league-switch:hover { background: var(--fill); }
.league-switch__name { font: 600 17px/1.15 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.league-switch__season { font-size: 12px; color: var(--label-2); white-space: nowrap; letter-spacing: 0; }
.league-switch .icon { color: var(--accent); }

.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--accent); cursor: pointer; }
.icon-btn:hover { background: var(--fill); }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn .dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #fff; }
/* Bar buttons sit on their own glass, so they read before the bar's glass appears */
.topbar .icon-btn { width: 40px; height: 40px; margin-left: 6px; background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-rim), var(--glass-edge), 0 2px 8px -3px rgba(11, 11, 13, .16); }
.topbar .icon-btn:hover { background: #ffffff; }
.topbar .icon-btn .dot { top: 7px; right: 7px; }

/* Phones: the tab bar floats above the content on glass, and the selected tab sits in a lens */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom)); z-index: 40;
  width: min(100% - 24px, 520px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(var(--tabs, 5), 1fr);
  height: var(--tabbar-h); padding: 4px; border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-rim), var(--glass-edge), var(--glass-lift);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--label-on-glass); transition: background-color .2s, color .2s; }
.tabbar a .icon { width: 24px; height: 24px; stroke-width: 1.7; }
.tabbar a:active { background: var(--lens); }
.tabbar a[aria-current="page"] { color: var(--label); background: var(--lens); font-weight: 600; }
.tabbar a[aria-current="page"] .icon { stroke-width: 2.3; }
.tabbar a { position: relative; }
.tab-dot { position: absolute; top: 6px; left: calc(50% + 6px); width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #fff; }
/* Each destination appears once: tab bar on phones, top bar on desktop. */
@media (max-width: 959px) { .topbar__dup { display: none; } }
@media (min-width: 960px) { .tabbar .tabbar__dup { display: none; } }

.main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 16px var(--gutter) 0; }
.main--narrow { max-width: 640px; }

/* Desktop: the tabs become a glass capsule centered in the top bar (as on iPad), and the bar lines up with the page */
@media (min-width: 960px) {
  :root { --gutter: max(28px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .app { padding-bottom: 56px; }
  .topbar { padding-left: max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter))); }
  .league-switch__name { max-width: clamp(140px, calc(50vw - 260px), 280px); }
  .tabbar {
    position: sticky; top: 4px; bottom: auto; z-index: 41;
    display: flex; gap: 2px; width: max-content; height: 44px;
    margin: calc(-1 * var(--header-h) + 4px) auto 4px;
  }
  .tabbar a { flex-direction: row; padding: 0 16px; font-size: 14px; font-weight: 500; }
  .tabbar a:hover { color: var(--label); background: rgba(11, 11, 13, .045); }
  .tabbar a[aria-current="page"]:hover { background: var(--lens); }
  .tabbar a .icon { display: none; }
  .main { padding-top: 28px; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar::before, .topbar .icon-btn, .tabbar, .tray, .site-header, html.is-scrolled .site-header, .menu, .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar::before { inset: 0; background: #f7f8f9; -webkit-mask-image: none; mask-image: none; box-shadow: 0 1px 0 var(--separator); }
  html.is-scrolled .site-header { background: #f9f9fb; }
  .topbar .icon-btn, .tabbar, .tray, .menu, .toast { background: #ffffff; }
  html.is-scrolled .site-header[data-tone="dark"] { background: #16171a; }
}

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

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 18px; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--label-2); max-width: 60ch; font-size: 15px; letter-spacing: -0.005em; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: 17px; margin: 0 0 6px -4px; }
.back .icon { width: 22px; height: 22px; stroke-width: 2.2; }

/* --- Surfaces: inset grouped ------------------------------------------------------------------ */

.card { background: var(--bg-card); border-radius: var(--r-lg); padding: 16px; }
.card + .card { margin-top: 12px; }
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card__head h2, .card__head h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.card__head a { font-size: 15px; color: var(--accent); display: inline-flex; align-items: center; gap: 1px; min-height: 44px; margin: -10px -8px -10px 0; padding: 0 8px; border-radius: 999px; }
.card__head a:active { background: var(--fill); }
.section { margin-top: 28px; }
.section > h2 { margin: 0 4px 10px; }
.grid { display: grid; gap: 12px; }
.grid > * { min-width: 0; } /* a wide table scrolls inside its .table-wrap instead of stretching the column past the screen */
@media (min-width: 960px) {
  .grid--dash { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .grid--2 { grid-template-columns: 1fr 1fr; }
}

/* --- Buttons & forms (iOS button styles: filled, tinted, gray, plain) -------------------------------- */

.btn {
  --bg: var(--fill); --fg: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg);
  font: 600 17px/1 var(--font-body); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), filter .15s, background-color .15s;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: scale(.97); }
.btn--primary { --bg: var(--accent); --fg: #ffffff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { --bg: var(--accent-tint); --fg: var(--accent-on-tint); }
.btn--danger { --bg: rgba(255, 59, 48, .12); --fg: var(--red); }
.btn--sm { min-height: 34px; padding: 0 14px; font-size: 15px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .45; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.text-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 15px; cursor: pointer; }
.text-btn:hover { text-decoration: underline; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label, .label { font-size: 15px; font-weight: 600; color: var(--label); letter-spacing: -0.005em; }
.hint { font-size: 13px; color: var(--label-2); margin: 0; letter-spacing: normal; }
/* A new password's rules, ticked green as they're met (see auth/_new_password) */
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 5px; font-size: 14px; color: var(--label-2); }
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-rules .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; stroke-width: 2.6; color: transparent; box-shadow: inset 0 0 0 1.5px var(--separator-strong); transition: background .15s, color .15s, box-shadow .15s; }
.pw-rules li.is-met { color: var(--label); }
.pw-rules li.is-met .icon { background: var(--green); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pw-rules .icon { transition: none; } }
.field-error { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; font-size: 15px; color: var(--red); letter-spacing: -0.005em; }
.field-error .icon { margin-top: 2px; }
.input[aria-invalid="true"] { border-color: var(--red); }
.input, select.input, textarea.input {
  width: 100%; min-height: 44px; padding: 11px 14px;
  background: #fff; color: var(--label);
  border: 1px solid var(--separator-strong); border-radius: 12px;
  font: 17px/1.3 var(--font-body); letter-spacing: -0.01em;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--label); box-shadow: 0 0 0 4px rgba(11, 11, 13, .1); }
.input::placeholder { color: var(--label-3); }
.input:disabled { background: var(--bg); color: var(--label-2); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238e8e93' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
input[type="color"].input { padding: 4px; height: 44px; }
.input--sm, select.input.input--sm { min-height: 36px; padding: 6px 10px; font-size: 15px; border-radius: 10px; }
select.input.input--sm { padding: 6px 32px 6px 10px; background-position: right 10px center; }
input[type="file"].input { padding: 6px; font-size: 15px; color: var(--label-2); cursor: pointer; }
input[type="file"].input::file-selector-button { min-height: 36px; margin-right: 12px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--fill); color: var(--label); font: 600 15px/1 var(--font-body); cursor: pointer; }
input[type="file"].input:hover::file-selector-button { background: var(--fill-strong); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 10px 0; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.check strong { display: block; font-weight: 600; }
.check span { color: var(--label-2); font-size: 15px; }
.check strong + span, .check > span > span { display: block; }
.field > .check { font-weight: 400; letter-spacing: -0.01em; }
.check strong { color: var(--label); }

/* Pick deadline: follow the merge, or a specific date */
.deadline-choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; gap: 0; }
.deadline-choice legend { padding: 0; margin-bottom: 4px; }
.deadline-choice .check { padding: 8px 0; }
.deadline-choice__date { padding: 2px 0 4px 34px; }
.deadline-choice:has(input[value="merge"]:checked) .deadline-choice__date { display: none; }
.visibility-choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; gap: 0; }
.visibility-choice legend { padding: 0; margin-bottom: 4px; }
.visibility-choice .check { padding: 8px 0; }
.visibility-choice__more { display: grid; gap: 6px; padding: 4px 0 0 34px; }
.visibility-choice:has(input[value="private"]:checked) .visibility-choice__more { display: none; }
.form-grid { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.divider-text { display: flex; align-items: center; gap: 12px; color: var(--label-2); font-size: 13px; margin: 18px 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; border-top: 1px solid var(--separator); }

/* --- Pills, badges, avatars ------------------------------------------------------------------------- */

.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 600; color: var(--label); white-space: nowrap; letter-spacing: -0.005em; }
.pill .icon { width: 14px; height: 14px; }
.pill--sunset { background: var(--show-tint); color: var(--show); }
.pill--gold { background: #fff4cc; color: var(--gold); }
.pill--ocean { background: rgba(0, 122, 255, .12); color: var(--blue); }
.pill--pos { background: rgba(52, 199, 89, .16); color: #1e7a34; }
.pill--neg { background: rgba(255, 59, 48, .12); color: var(--red); }
.pill--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--separator-strong); color: var(--label-2); }
.tribe { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--label-2); letter-spacing: normal; }
.tribe::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tribe, #8e8e93); }
.avatar { --size: 36px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #a6abb6, #858992); color: #fff; font: 600 calc(var(--size) * .4)/1 var(--font-body); letter-spacing: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { --size: 64px; }
.avatar--xs { --size: 28px; }

/* --- Castaway portrait + torch --------------------------------------------------------------------------- */

.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  background: color-mix(in srgb, var(--tribe, #ff9500) 16%, #ffffff);
  isolation: isolate;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.portrait__initials { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(2rem, 9vw, 3rem)/1 var(--font-num); color: color-mix(in srgb, var(--tribe, #ff9500) 72%, #000); letter-spacing: -0.01em; }
.portrait__glow { display: none; }
.portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); z-index: 2; pointer-events: none; }
/* Out of the game: the photo fades; placeholder initials stay readable (4.5:1+) */
.portrait.is-out { filter: grayscale(1); }
.portrait.is-out img { opacity: .55; }
.portrait.is-out .portrait__initials { color: var(--label-2); }
.portrait__tag { position: absolute; left: 8px; top: 8px; z-index: 3; }

.torch { width: 12px; height: 16px; flex: none; }
.torch--lit path { fill: url(#flame); }
.torch--out path { fill: none; stroke: #aeaeb2; stroke-width: 1.6; }

/* --- My team ------------------------------------------------------------------------------------------------ */

.team { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.castaway-card { display: block; position: relative; background: var(--bg-card); border-radius: var(--r-lg); padding: 8px 8px 12px; transition: transform .15s var(--ease); }
.castaway-card:active { transform: scale(.98); }
.castaway-card .portrait { border-radius: 14px; }
.castaway-card__body { padding: 10px 4px 0; }
.castaway-card__name { font: 600 17px/1.2 var(--font-display); letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.castaway-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pts-badge { font: 700 22px/1 var(--font-num); font-variant-numeric: tabular-nums; }

.empty-team { display: grid; place-items: center; text-align: center; padding: 30px 20px; border-radius: var(--r-lg); background: var(--bg-card); }
.empty-team h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.empty-team p { color: var(--label-2); max-width: 34ch; margin: 0 auto 18px; font-size: 15px; }

/* --- Stats: one summary card, three columns -------------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg-card); border-radius: var(--r-lg); padding: 14px 0; }
.stat { padding: 0 14px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--separator); }
.stat__value { font: 700 28px/1.05 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.005em; }
.stat__value sup { font-size: .5em; vertical-align: top; position: relative; top: .2em; margin-left: 1px; }
.stat__label { margin-top: 4px; font-size: 13px; color: var(--label-2); line-height: 1.3; letter-spacing: normal; }
.stat--lead .stat__value { color: var(--gold); }

.projection { margin-top: 12px; border-radius: var(--r-lg); background: var(--bg-card); }
.projection summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.projection summary::-webkit-details-marker { display: none; }
.projection summary > .icon:first-child { color: var(--accent); }
.projection summary > .icon:last-child { color: var(--label-3); }
.projection__math { font-size: 15px; color: var(--label-2); letter-spacing: -0.005em; }
.projection__math { flex: 1; min-width: 0; }
.projection__math strong { color: var(--label); font: 700 22px/1 var(--font-num); margin-right: 6px; }
.projection__parts { display: block; margin-top: 3px; font-size: 13px; }
.projection ul { margin: 0; padding: 0 16px 16px 36px; color: var(--label-2); font-size: 15px; }
.projection li { margin: 4px 0; }

/* --- Leaderboard (inset grouped list) ---------------------------------------------------------------------- */

.lb { list-style: none; margin: 0; padding: 0; }
.lb-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 12px; }
.lb-row + .lb-row::before { content: ""; position: absolute; top: 0; left: 84px; right: 6px; height: 1px; background: var(--separator); }
.lb-row:hover { background: rgba(0, 0, 0, .025); }
.lb-row.is-me { background: var(--show-tint); }
.lb-row.is-me::before, .lb-row.is-me + .lb-row::before { display: none; }
.lb-rank { font: 600 17px/1 var(--font-num); text-align: center; color: var(--label-2); font-variant-numeric: tabular-nums; }
.lb-row.is-first .lb-rank { color: var(--gold); }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-name { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--label-2); min-width: 0; }
.lb-picks { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lb-pick { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 999px; background: var(--fill); font-size: 12px; font-weight: 500; color: var(--label); white-space: nowrap; letter-spacing: normal; }
.lb-pick .torch { width: 10px; height: 13px; }
.lb-pick.is-out { color: var(--label-2); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .3); }
.lb-score { text-align: right; padding-right: 4px; }
.lb-points { font: 700 22px/1 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.lb-delta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--label-2); font-weight: 500; }
.move { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 600; }
.move--up { color: var(--green); }
.move--down { color: var(--red); }
.lb-hidden { font-size: 13px; color: var(--label-2); display: inline-flex; gap: 4px; align-items: center; }
/* Ranks skipped between the top of the table and you */
.lb-gap { padding: 0 6px; }
.lb-row.lb-gap::before, .lb-gap + .lb-row::before { display: none; }
.lb-gap:hover { background: none; }
.lb-gap span:first-child { text-align: center; font-size: 20px; line-height: 1.1; color: var(--label-3); }

/* --- Lists, feed, events ------------------------------------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 44px; }
.list-row + .list-row, li + li > .list-row, li + li.list-row { border-top: 1px solid var(--separator); }
.list-row > .icon:first-child { color: var(--accent); }
.list-row > .icon:last-child { color: var(--label-3); }
.list-row__main { min-width: 0; flex: 1; }
.list-row__title { font-weight: 500; letter-spacing: -0.01em; }
.list-row__sub { font-size: 13px; color: var(--label-2); letter-spacing: normal; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 11px 0; font-size: 15px; letter-spacing: -0.005em; }
.feed li + li { border-top: 1px solid var(--separator); }
.feed .icon-wrap { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--label-2); }
.feed .icon-wrap .icon { width: 16px; height: 16px; }
.feed .tone-accent .icon-wrap { background: var(--show-tint); color: var(--show); }
.feed .tone-gold .icon-wrap { background: #fff4cc; color: var(--gold); }
.feed .tone-pos .icon-wrap { background: rgba(52, 199, 89, .16); color: var(--green); }
.feed .tone-neg .icon-wrap { background: rgba(255, 59, 48, .12); color: var(--red); }
.feed time { display: block; font-size: 12px; color: var(--label-2); margin-top: 2px; }
.feed .pts { font-weight: 600; }

.events { list-style: none; margin: 0; padding: 0; }
.events li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; letter-spacing: -0.005em; }
.events li + li { border-top: 1px solid var(--separator); }
.events .ev-pts { font: 700 17px/1 var(--font-num); white-space: nowrap; font-variant-numeric: tabular-nums; }
.events .ev-note { display: block; font-size: 13px; color: var(--label-2); }
.ep-card { display: block; }
.ep-card.is-mine { box-shadow: inset 3px 0 0 var(--show-fill); }
.ep-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ep-card__head h3 { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Castaway page: photo beside the name on phones, a large portrait on desktop. */
.castaway-head { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: end; }
.castaway-head h1 { font-size: 28px; }
@media (min-width: 960px) {
  .castaway-head { grid-template-columns: 1fr; gap: 16px; }
  .castaway-head__photo { max-width: 320px; }
  .castaway-head h1 { font-size: 34px; }
}
.face { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: var(--fill); }
.face.is-out { filter: grayscale(1); opacity: .75; }
.face--initials { display: grid; place-items: center; font: 600 15px/1 var(--font-display); color: var(--label-2); }

/* --- Pick screen ---------------------------------------------------------------------------------------------- */

.filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 14px; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--bg-card); color: var(--label); font: 500 15px var(--font-body); letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--shadow-sm); }
.filter[aria-pressed="true"] { background: var(--label); color: #fff; }
.filter .swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--tribe); }

.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 120px; }
@media (min-width: 640px) { .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pick, .cast-card { position: relative; display: block; background: var(--bg-card); border-radius: var(--r-lg); padding: 8px 8px 12px; -webkit-tap-highlight-color: transparent; }
.pick { cursor: pointer; transition: box-shadow .2s var(--ease), transform .15s var(--ease); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .portrait, .cast-card .portrait { border-radius: 14px; }
.pick:has(input:checked) { box-shadow: 0 0 0 3px var(--show); }
.pick__check { position: absolute; right: 8px; top: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .2); color: transparent; transition: all .2s var(--ease); }
.pick input:checked ~ .portrait .pick__check { background: var(--show); box-shadow: none; color: #fff; }
.pick input:focus-visible ~ .portrait { outline: 3px solid rgba(0, 102, 204, .5); outline-offset: 2px; }
.pick input:disabled ~ .portrait { filter: grayscale(1); opacity: .5; }
.pick.is-disabled { cursor: not-allowed; }
.pick__name { margin-top: 8px; padding: 0 4px; font: 600 15px/1.25 var(--font-display); letter-spacing: -0.01em; }
.pick__meta { padding: 0 4px; font-size: 13px; color: var(--label-2); margin-top: 2px; letter-spacing: normal; }
a.pick:active, .cast-card:active { transform: scale(.98); }

/* The picks tray floats on glass just above the tab bar (at the bottom of the window on desktop) */
.tray {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + env(safe-area-inset-bottom) + 8px); z-index: 39;
  width: min(100% - 24px, 640px); margin: 0 auto;
  padding: 8px; border-radius: 24px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-rim), var(--glass-edge), var(--glass-lift);
  display: flex; align-items: center; gap: 10px;
}
@media (min-width: 960px) { .tray { bottom: 16px; } }
.tray__slots { display: flex; gap: 8px; flex: 1; min-width: 0; }
.slot { flex: 1; min-width: 0; height: 44px; border-radius: 16px; border: 0; background: var(--fill); display: flex; align-items: center; gap: 6px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--label-2); text-align: left; cursor: pointer; }
.slot:disabled { cursor: default; opacity: 1; }
.slot.is-filled { background: var(--show-tint); color: var(--label); font-weight: 600; padding: 0 8px 0 6px; }
.slot__face { flex: none; display: grid; place-items: center; }
.slot__face img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.slot__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot__x { display: none; flex: none; color: var(--label-2); }
.slot.is-filled .slot__x { display: grid; }

/* --- Dialog / sheet --------------------------------------------------------------------------------------------- */

dialog { padding: 0; border: 0; background: transparent; color: var(--label); max-width: 100vw; max-height: 100dvh; }
dialog::backdrop { background: rgba(0, 0, 0, .3); }
.sheet { width: min(460px, 100vw); background: var(--bg-card); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); }
@media (max-width: 639px) {
  dialog.as-sheet { margin: auto 0 0; width: 100vw; }
  dialog.as-sheet .sheet { width: 100vw; border-radius: 22px 22px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  dialog.as-sheet .sheet::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--fill-strong); margin: -12px auto 14px; }
}
dialog[open] .sheet { animation: rise .32s var(--ease); }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h2 { margin-bottom: 6px; }
.sheet p { color: var(--label-2); }
.sheet .confirm-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 22px; }
.sheet .confirm-picks .portrait { border-radius: 14px; }

/* --- Toasts & notices -------------------------------------------------------------------------------------------- */

.toasts { position: fixed; z-index: 60; left: 50%; top: calc(var(--header-h) + env(safe-area-inset-top) + 10px); transform: translateX(-50%); width: min(520px, calc(100vw - 2 * var(--gutter))); display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 22px; background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-rim), var(--glass-edge), var(--glass-lift); font-size: 15px; letter-spacing: -0.005em; animation: rise .3s var(--ease); }
.toast .icon { flex: none; }
.toast--success .icon { stroke: var(--green); }
.toast--error .icon { stroke: var(--red); }
.toast--warning .icon, .toast--info .icon { stroke: var(--accent); }
.toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: all .25s; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-card); font-size: 15px; letter-spacing: -0.005em; }
.notice .icon { margin-top: 2px; color: var(--accent); }
.notice--accent { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--separator); }
.notice p { margin: 0; }

/* --- Empty states ------------------------------------------------------------------------------------------------ */

.empty { text-align: center; padding: 36px 18px; }
.empty .icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--label-3); stroke-width: 1.5; }
.empty h3, .empty__title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.empty p { color: var(--label-2); max-width: 40ch; margin: 0 auto 18px; font-size: 15px; }

/* --- Segmented control (sub-navigation) ------------------------------------------------------------------------------- */

.tabs { display: flex; gap: 2px; overflow-x: auto; margin: 0 0 20px; padding: 3px; background: var(--fill-strong); border-radius: 999px; width: max-content; max-width: 100%; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--label); border-radius: 999px; letter-spacing: normal; }
.tabs a:hover { background: rgba(255, 255, 255, .55); }
.tabs a[aria-current="page"] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }

/* --- Tables (admin / commissioner) ------------------------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--bg-card); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; letter-spacing: -0.005em; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--label-2); padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--separator); }
.table td { padding: 10px 14px; vertical-align: middle; }

/* Admin: show accents and feature switches */
.dot-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--swatch); margin-right: 8px; vertical-align: 1px; }
.dot-swatch--lg { width: 14px; height: 14px; margin-right: 10px; vertical-align: 3px; }
.flag-row { justify-content: space-between; }
.flag-row__text { display: grid; gap: 2px; min-width: 0; }
.flag-row form { display: flex; align-items: center; gap: 8px; flex: none; }
.table tr + tr td { border-top: 1px solid var(--separator); }
.table tr.is-muted td { color: var(--label-2); }
.table .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.inline-form { display: inline; }

/* --- Copy field ---------------------------------------------------------------------------------------------------- */

.copy { display: flex; gap: 8px; align-items: stretch; }
.copy .input { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: 0; }
.code-display { font: 700 34px/1 var(--font-num); letter-spacing: .14em; color: var(--label); }

/* --- Menu (league switcher, options) --------------------------------------------------------------------------------- */

.switcher { position: relative; min-width: 0; }
.switcher > summary { list-style: none; }
.switcher > summary::-webkit-details-marker { display: none; }
.menu { position: absolute; left: -8px; top: calc(100% + 6px); z-index: 50; width: min(300px, calc(100vw - 24px)); padding: 6px; border-radius: 20px; background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-rim), var(--glass-edge), 0 18px 48px -12px rgba(11, 11, 13, .3); animation: rise .18s var(--ease); }
.menu--right { left: auto; right: -8px; }
.menu__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--label); }
.menu__item small { display: block; font-weight: 400; font-size: 13px; color: var(--label-2); margin-top: 1px; }
.menu__item:hover { background: var(--fill); }
.menu__item .icon { color: var(--label-2); }
.menu__item.is-current .icon { color: var(--accent); }
.menu__sep { height: 1px; background: var(--separator); margin: 6px 6px; }
.menu form { margin: 0; }
.menu button.menu__item { width: 100%; background: none; border: 0; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }

/* --- Rules strip --------------------------------------------------------------------------------------------------------- */

.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .rules { grid-template-columns: 1fr 1fr; } }
.rules li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-card); }
.rules__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--show-tint); color: var(--show); }
.rules__icon .icon { width: 19px; height: 19px; }
.rules strong { display: block; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.rules div > span { display: block; font-size: 15px; color: var(--label-2); margin-top: 2px; letter-spacing: -0.005em; }
.prose .rules { padding-left: 0; }

/* --- Public website (apple.com-style) --------------------------------------------------------------------------------------- */

.site { min-height: 100dvh; display: flex; flex-direction: column; background: #fff; }
/* The bar runs edge to edge; its contents line up with the page's .wrap container (1080px). */
/* Clear at the top of the page; glass once the page scrolls beneath it, and dark glass over the dark bands (app.js). */
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter))); transition: background-color .25s, box-shadow .25s; }
.site-header { height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
html.is-scrolled .site-header { background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 .5px 0 rgba(11, 11, 13, .14); }
html.is-scrolled .site-header[data-tone="dark"] { background: rgba(18, 19, 22, .72); box-shadow: 0 .5px 0 rgba(255, 255, 255, .12); }
.site-header nav { display: none; gap: 2px; margin-left: 12px; }
.site-header nav a { padding: 6px 12px; border-radius: 999px; color: var(--label-on-glass); font-size: 14px; letter-spacing: -0.005em; transition: color .2s, background-color .2s; }
.site-header nav a:hover { color: var(--label); background: rgba(11, 11, 13, .045); }
.site-header nav a[aria-current="page"] { color: var(--label); background: var(--lens); font-weight: 500; }
.site-header[data-tone="dark"] .logo { filter: invert(1); }
.site-header[data-tone="dark"] nav a { color: rgba(255, 255, 255, .78); }
.site-header[data-tone="dark"] nav a:hover, .site-header[data-tone="dark"] nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); }
.site-header[data-tone="dark"] .btn--ghost { --bg: rgba(255, 255, 255, .16); --fg: #fff; }
.site-header[data-tone="dark"] .btn--primary { --bg: #fff; --fg: var(--onyx); }
.site-header__cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.site-header .brand { min-height: 44px; }
.site-footer .brand { display: inline-flex; min-height: 44px; }
@media (min-width: 900px) { .site-header nav { display: flex; } }
.brand { display: flex; align-items: center; gap: 9px; }
.brand__logo { height: 30px; width: auto; }
.site-main { flex: 1; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 740px; }

.hero { position: relative; padding: 48px 0 36px; text-align: center; }
.hero__logo { width: min(220px, 56vw); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .14)); }
.hero h1 { font-size: clamp(40px, 8vw, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -0.018em; max-width: 14ch; margin: 0 auto; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #c2410c, #ea580c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { font-size: clamp(19px, 2.6vw, 24px); line-height: 1.35; color: var(--label-2); max-width: 38ch; margin: 16px auto 26px; letter-spacing: -0.01em; }
.hero .btn-row { justify-content: center; }
.hero__photo { margin: 40px auto 0; max-width: 1080px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); }
.hero__photo img { width: 100%; height: auto; aspect-ratio: 1640 / 920; object-fit: cover; }
.hero__caption { font-size: 13px; color: var(--label-2); margin-top: 10px; }
.hero--page { text-align: left; padding: 40px 0 20px; }
.hero--page h1 { font-size: clamp(34px, 6vw, 56px); margin: 0; max-width: none; }
.hero--page .hero__lede { margin: 12px 0 0; max-width: 46ch; }
.horizon-line { height: 4px; background: var(--horizon); border-radius: 4px; opacity: .9; }

.preview { position: relative; border-radius: var(--r-xl); padding: 16px; background: #fff; box-shadow: var(--shadow); text-align: left; max-width: 520px; margin: 0 auto; }
.preview__head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 10px; }
.preview__head strong { font: 600 20px/1 var(--font-display); letter-spacing: -0.01em; }

.band { padding: 64px 0; }
.band:nth-of-type(even) { background: var(--bg-alt); }
.band h2 { font-size: clamp(30px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 12px; }
.band__lede { color: var(--label-2); max-width: 52ch; font-size: 19px; letter-spacing: -0.01em; }
.band--center { text-align: center; }
.band--center .band__lede { margin-left: auto; margin-right: auto; }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: step; text-align: left; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; padding: 22px; border-radius: var(--r-lg); background: #fff; }
.band:nth-of-type(odd) .steps li, .band:nth-of-type(odd) .score-cols .card { background: var(--bg-alt); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 17px/1 var(--font-num); margin-bottom: 14px; }
.steps h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.steps p { color: var(--label-2); margin: 0; font-size: 15px; letter-spacing: -0.005em; }

.score-cols { display: grid; gap: 12px; margin-top: 28px; text-align: left; }
@media (min-width: 800px) { .score-cols { grid-template-columns: repeat(3, 1fr); } }
.score-list { list-style: none; margin: 0; padding: 0; }
.score-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--separator); font-size: 15px; letter-spacing: -0.005em; }
.score-list li:first-child { border-top: 0; }
.score-list .num { font-size: 17px; }

/* Four across on phones keeps 21 faces to about one screen and a half. */
.cast-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; margin-top: 28px; text-align: left; }
@media (min-width: 640px) { .cast-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cast-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.cast-grid .portrait__initials { font-size: clamp(1.4rem, 6vw, 2rem); }
.cast-grid figcaption { margin-top: 7px; font: 600 14px/1.2 var(--font-display); letter-spacing: -0.005em; }
.cast-grid figcaption span { display: block; font: 400 12px/1.3 var(--font-body); color: var(--label-2); margin-top: 2px; }
@media (max-width: 639px) {
  .cast-grid figcaption { font-size: 13px; }
  .cast-grid figcaption span { font-size: 12px; }
}
figure { margin: 0; }

.cast-group + .cast-group { margin-top: 36px; }
.cast-group__title { display: flex; align-items: center; gap: 10px; font-size: 24px; margin-bottom: 14px; }
.cast-group__title .tribe::before { width: 12px; height: 12px; }
.cast-group__title .muted { font: 500 17px var(--font-body); }

/* Breadcrumbs on deeper public pages */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 16px; padding: 0; font-size: 14px; color: var(--label-2); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--label-3); }
.crumbs a { color: var(--label-2); }
.crumbs a:hover { color: var(--label); text-decoration: underline; }
.crumbs [aria-current] { color: var(--label); }

/* Castaway profile */
.profile { display: grid; gap: 24px; align-items: start; }
@media (min-width: 760px) { .profile { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; } }
.profile__photo .portrait { border-radius: var(--r-lg); max-width: 420px; }
.profile__aka { margin: 6px 0 0; color: var(--label-2); }
.profile__bio { max-width: 60ch; margin: 18px 0 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.005em; }
.timeline { list-style: none; margin: 20px 0 0; padding: 0; }
.timeline__ep { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--separator); }
.timeline__num { font: 700 15px/1.6 var(--font-num); color: var(--label-2); }
.timeline__ep.is-exit .timeline__num { color: var(--red); }
.timeline__events { list-style: none; margin: 6px 0 0; padding: 0; }
.timeline__events li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.profile-nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.profile-nav__link { display: grid; gap: 2px; font-weight: 600; letter-spacing: -0.01em; }
.profile-nav__link--next { text-align: right; }
.profile-nav__all { font-size: 15px; white-space: nowrap; }

.profile-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }

/* Guides */
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guide-list a { display: block; padding: 20px 22px; border-radius: var(--r-lg); background: var(--bg-alt); transition: background .15s; }
.guide-list a:hover { background: var(--fill); }
.guide-list h2 { font-size: 21px; line-height: 1.2; }
.guide-list p { margin: 8px 0 6px; color: var(--label-2); font-size: 15px; }
.guide-list--compact a { padding: 14px 18px; }
.guide-list--compact h3 { font-size: 17px; }
.guide__body h2 { margin-top: 36px; }
.guide__body .table-wrap { margin: 16px 0; }
.name-list { padding-left: 1.1em; }
.name-list li { margin: 6px 0; }

/* Episode guide and boot order */
.boot-order, .ep-guide, .ep-guide__events, .still-in { list-style: none; margin: 0; padding: 0; }
.boot-order li { display: grid; grid-template-columns: 72px auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--separator); }
.boot-order li span:last-child { display: grid; gap: 2px; }
.boot-order__n { font: 700 15px var(--font-num); color: var(--label-2); }
.ep-guide > li { padding: 18px 0; border-top: 1px solid var(--separator); }
.ep-guide h3 { font-size: 19px; }
.ep-guide__events { margin-top: 10px; display: grid; gap: 8px; }
.ep-guide__events li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ep-guide__events .ev-pts { margin-left: auto; font: 700 15px var(--font-num); }
.still-in { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.still-in li { display: flex; align-items: center; gap: 10px; }
.still-in .tribe { margin-left: auto; }

/* Cast viewer: any card with data-cv-item opens its contestant large, with arrows through the rest */
[data-cv-item] { position: relative; }
[data-cv-item] .portrait img { transition: transform .35s var(--ease); }
[data-cv-item]:hover .portrait img { transform: scale(1.04); }
.cv-open { position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; border-radius: var(--r); background: transparent; cursor: zoom-in; }
.cv-open:focus-visible { outline: 3px solid var(--show); outline-offset: 3px; }
.cv-lock { overflow: hidden; }

dialog.cv { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; overscroll-behavior: contain; }
dialog.cv[open] { display: grid; place-items: center; }
dialog.cv::backdrop { background: rgba(11, 11, 13, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cv__frame { position: relative; width: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.cv__stage { position: relative; background: var(--onyx); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cv__photo { position: relative; width: min(100%, 62dvh * .8); aspect-ratio: 4 / 5; margin: 0 auto; overflow: hidden; background: color-mix(in srgb, var(--tribe, #f08a24) 22%, #fff); }
.cv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.cv__initials { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(4rem, 18vw, 7rem)/1 var(--font-num); letter-spacing: -0.015em; color: color-mix(in srgb, var(--tribe, #f08a24) 72%, #000); }
.cv__nav, .cv__close { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--glass); color: var(--onyx); box-shadow: var(--glass-rim), var(--glass-edge), 0 6px 20px -6px rgba(0, 0, 0, .45); cursor: pointer; -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); transition: transform .15s var(--ease), background .15s; }
.cv__nav:hover, .cv__close:hover { background: #fff; transform: scale(1.06); }
.cv__nav:focus-visible, .cv__close:focus-visible { outline: 3px solid var(--show-fill); outline-offset: 2px; }
.cv__nav .icon, .cv__close .icon { width: 22px; height: 22px; }
.cv__nav { top: 50%; margin-top: -22px; }
.cv__nav--prev { left: 12px; }
.cv__nav--next { right: 12px; }
.cv__close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.cv__card { padding: 22px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.cv__count { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.cv__name { font-size: clamp(28px, 4vw, 36px); line-height: 1.05; letter-spacing: -0.018em; }
.cv__fullname { margin: 6px 0 0; font-size: 15px; color: var(--label-2); }
.cv__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.cv__status .pill .torch { width: 10px; height: 13px; }
.cv__status .tribe { font-size: 15px; }
.cv__about { margin: 16px 0 0; font-size: 18px; line-height: 1.45; letter-spacing: -0.005em; }
.cv__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--separator); }
.cv__facts dt { font-size: 13px; color: var(--label-2); }
.cv__facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.cv__cta { margin: 24px 0 0; }
.cv__credit { margin: 20px 0 0; font-size: 12px; color: var(--label-2); }
@media (min-width: 860px) {
  .cv { --cv-h: min(86dvh, 780px, (94vw - 340px) * 1.25); }
  .cv__frame { display: grid; grid-template-columns: auto minmax(320px, 400px); width: auto; height: var(--cv-h); overflow: hidden; border-radius: 24px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); }
  .cv__photo { width: calc(var(--cv-h) * .8); height: var(--cv-h); }
  .cv__card { overflow-y: auto; padding: 56px 32px 32px; }
  .cv__nav--prev { left: 16px; }
  .cv__nav--next { right: 16px; }
  .cv__close { top: 14px; right: 14px; background: var(--fill); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { [data-cv-item] .portrait img, .cv__nav, .cv__close { transition: none; } }

.join-code { display: flex; gap: 8px; max-width: 360px; }
.band--center .join-code { margin-left: auto; margin-right: auto; }
.join-code .input { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--separator); padding: 24px 0 calc(28px + env(safe-area-inset-bottom)); color: var(--label-2); font-size: 12px; letter-spacing: normal; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: 13px; }
.site-footer nav a { color: var(--label); }
.site-footer nav a:hover { text-decoration: underline; }

.prose { max-width: 68ch; }
.prose h2 { margin: 32px 0 10px; font-size: 24px; }
.prose p, .prose li { color: var(--label); font-size: 17px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.faq details { border-top: 1px solid var(--separator); }
.faq details:last-child { border-bottom: 1px solid var(--separator); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 26px; line-height: .8; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--label-2); margin: 0 0 18px; }

/* --- Platform: home, shows, show pages ------------------------------------------------------------------------------------------ */
/* Monochrome by default. A show page sets --show (text), --show-fill, --show-tint and --show-on from
   its accent (Shows::style); title cards take --card-accent. Everything else stays Onyx and Mist. */

:root { --onyx: #0b0b0d; --charcoal: #1a1b1f; --slate: #35373d; --gray: #6b6f76; --mist: #e6e8eb; --show-on: #0b0b0d; }

.btn--lg { min-height: 52px; padding: 0 26px; font-size: 18px; }
.btn--plain { --bg: transparent; --fg: var(--label); padding-left: 8px; padding-right: 8px; }
.btn--light { --bg: #ffffff; --fg: var(--onyx); }
.btn--on-dark { --bg: rgba(255, 255, 255, .14); --fg: #ffffff; }
.btn--plain-dark { --bg: transparent; --fg: rgba(255, 255, 255, .86); padding-left: 8px; padding-right: 8px; }
.btn.is-demo { pointer-events: none; }
.mb-1 { margin-bottom: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--fill); font-size: 12px; font-weight: 600; color: var(--label-2); white-space: nowrap; letter-spacing: normal; }

/* Phones: the site links sit under the header (the header has room for them from 900px). */
.site-subnav { display: flex; gap: 4px; overflow-x: auto; padding: 2px max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter))) 6px; scrollbar-width: none; }
.site-subnav::-webkit-scrollbar { display: none; }
.site-subnav { padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.site-subnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 15px; color: var(--label-2); white-space: nowrap; }
.site-subnav a[aria-current="page"] { background: var(--fill); color: var(--label); font-weight: 600; }
@media (min-width: 900px) { .site-subnav { display: none; } }

/* Hero: the name, set big */
.p-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px); }
.p-hero__title { margin: 0; max-width: none; font-size: clamp(40px, 10.6vw, 124px); line-height: .88; font-weight: 700; letter-spacing: -0.028em; text-transform: uppercase; }
.p-hero__tagline { margin: 22px 0 0; font-size: clamp(26px, 4.4vw, 46px); line-height: 1.08; font-weight: 600; letter-spacing: -0.018em; color: var(--label); text-wrap: balance; }
.p-hero__lede { margin: 18px 0 28px; max-width: 48ch; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.42; letter-spacing: -0.01em; color: var(--label-2); }
.p-hero__aside { margin: 16px 0 0; font-size: 15px; }
.p-hero--page { padding: clamp(28px, 5vw, 56px) 0 4px; }
.p-hero--page h1 { font-size: clamp(36px, 6.4vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
.p-hero--page .p-hero__lede { margin-bottom: 0; }

/* Sections */
.p-section { padding: clamp(52px, 8vw, 96px) 0; }
.p-section--tight { padding-top: 28px; }
.p-section--follow { padding-top: 8px; }
.p-section--alt { background: var(--bg-alt); }
.p-section__head { max-width: 720px; margin-bottom: 28px; }
.p-section h2, .p-feature h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.06; letter-spacing: -0.018em; }
.p-section__lede { margin: 12px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; color: var(--label-2); }

/* Category filter */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px; border-radius: 999px; background: var(--fill); color: var(--label); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transition: background-color .15s; }
.chip-link:hover { background: var(--fill-strong); }
.chip-link[aria-current="true"] { background: var(--onyx); color: #fff; }
.chip-link__n { font-weight: 500; opacity: .62; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 40px 0 var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .chips::-webkit-scrollbar { display: none; }
}

/* The lineup: every show as a title card */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .lineup { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .lineup--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lineup__empty { color: var(--label-2); margin-top: 12px; }

/* Title card: original type on Onyx; the pattern says the show's main category. */
.tcard { position: relative; display: block; border-radius: 14px; container-type: inline-size; color: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.tcard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(11, 11, 13, .55); }
a.tcard:focus-visible { outline-offset: 3px; border-radius: 14px; }
.tcard__screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: inherit; background: var(--charcoal); isolation: isolate; }
.tcard.is-live .tcard__screen { background: radial-gradient(120% 95% at 50% 128%, color-mix(in srgb, var(--card-accent) 64%, transparent) 0%, transparent 60%), var(--onyx); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 50%, transparent); }
.tcard__screen::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(205deg, #000 25%, transparent 80%); mask-image: linear-gradient(205deg, #000 25%, transparent 80%); }
.tcard--strategy .tcard__screen::before { background: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 7cqi 7cqi, linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 7cqi 7cqi; }
.tcard--social .tcard__screen::before { background: repeating-radial-gradient(circle at 90% 8%, rgba(255, 255, 255, .1) 0 1px, transparent 1.5px 6.5cqi); }
.tcard--dating .tcard__screen::before { background: radial-gradient(circle 21cqi at 64% 34%, transparent 93%, rgba(255, 255, 255, .2) 94% 97%, transparent 98%), radial-gradient(circle 21cqi at 84% 34%, transparent 93%, rgba(255, 255, 255, .2) 94% 97%, transparent 98%); }
.tcard--competition .tcard__screen::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .075) 0 1px, transparent 1px 5cqi); }
.tcard--cooking .tcard__screen::before { background: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.6px) 0 0 / 5cqi 5cqi; }
.tcard--performance .tcard__screen::before { background: conic-gradient(from 168deg at 80% -12%, transparent 0deg, rgba(255, 255, 255, .13) 10deg, transparent 26deg, transparent 34deg, rgba(255, 255, 255, .08) 42deg, transparent 56deg); }
.tcard__name { position: absolute; left: 8cqi; right: 8cqi; bottom: 7.5cqi; font-size: clamp(14px, 10.5cqi, 72px); line-height: .96; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; color: #fff; }
.tcard__name::before { content: ""; display: block; width: 2.1em; height: max(2px, .085em); margin-bottom: .42em; border-radius: 2px; background: var(--card-accent); transition: background-color .25s; }
.tcard.is-soon .tcard__name { color: #d6d8dc; }
.tcard.is-soon .tcard__name::before { background: rgba(255, 255, 255, .26); }
a.tcard.is-soon:hover .tcard__name::before, a.tcard.is-soon:focus-visible .tcard__name::before { background: var(--card-accent); }
.tcard__network { position: absolute; left: 8cqi; top: 7cqi; font-size: clamp(10px, 4.6cqi, 15px); font-weight: 600; color: rgba(255, 255, 255, .6); }
.tcard__status { position: absolute; right: 6cqi; top: 6cqi; display: inline-flex; align-items: center; gap: 5px; height: clamp(22px, 8cqi, 28px); padding: 0 clamp(7px, 3.2cqi, 11px); border-radius: 999px; background: rgba(11, 11, 13, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: clamp(11px, 3.8cqi, 13px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tcard.is-live .tcard__status { background: #fff; color: var(--onyx); }
.tcard__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--card-accent); }
@media (prefers-reduced-motion: no-preference) { .tcard.is-live .tcard__status .dot { animation: live-pulse 2.4s ease-in-out infinite; } }
@keyframes live-pulse { 50% { opacity: .3; } }
@container (max-width: 190px) { .tcard__network { display: none; } }
.tcard__art { position: absolute; }
.tcard.has-art .tcard__screen::before { display: none; } /* the show's own artwork replaces the pattern */
.tcard__art--contain { left: 14%; top: 17%; width: 72%; height: 58%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.tcard__art--cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard.is-soon .tcard__art--contain { filter: brightness(0) invert(1); opacity: .6; }
.tcard.is-soon .tcard__art--cover { filter: grayscale(1); opacity: .55; }
.tcard--lg { border-radius: 22px; }

/* Featured live show (Onyx band) */
.p-feature { padding: clamp(52px, 8vw, 96px) 0; background: var(--onyx); color: #fff; }
.p-feature__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .p-feature__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }
.p-feature h2 { color: #fff; }
.p-feature p { max-width: 46ch; margin-top: 14px; font-size: 19px; letter-spacing: -0.01em; color: rgba(255, 255, 255, .74); }
.p-feature__fact { font-size: 15px !important; }
.p-feature__fact .num { margin-right: 4px; font-size: 24px; color: #fff; }
.p-feature .btn-row { margin-top: 24px; }

/* Steps: a real sequence, so numbered */
.p-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
@media (min-width: 800px) { .p-steps { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.p-steps li { counter-increment: step; padding: 24px; border-radius: var(--r-lg); background: var(--bg-alt); }
.p-section--alt .p-steps li { background: #fff; }
.p-steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px; border-radius: 50%; background: var(--onyx); color: #fff; font: 700 16px/1 var(--font-num); }
.show-page .p-steps li::before { background: var(--show-fill); color: var(--show-on); }
.p-steps h3 { margin-bottom: 6px; font-size: 19px; }
.p-steps p { margin: 0; font-size: 15px; color: var(--label-2); }

.p-split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .p-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.p-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.p-points li { display: flex; gap: 14px; align-items: flex-start; }
.p-points .icon { margin-top: 3px; }
.p-points span { font-size: 15px; color: var(--label-2); }
.p-points strong { display: block; font-size: 17px; font-weight: 600; color: var(--label); }

/* Sample league (always labeled as sample) */
.sample { margin: 0; padding: 16px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); }
.sample__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; }
.sample__head strong { font-size: 20px; letter-spacing: -0.01em; }
.sample__rows { list-style: none; margin: 0; padding: 0; }
.sample__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 6px; border-top: 1px solid var(--separator); }
.sample__row.is-me { border-radius: 12px; background: var(--bg-alt); }
.sample__row.is-me + .sample__row { border-top-color: transparent; }
.sample__rank { text-align: center; font-size: 15px; color: var(--label-2); }
.sample__name { display: block; font-weight: 600; }
.sample__picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sample__score { text-align: right; }
.sample__score .num { display: block; font-size: 20px; }
.sample__cap { padding: 10px 6px 0; font-size: 12px; color: var(--label-2); }

.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; }
@media (min-width: 800px) { .upcoming { grid-template-columns: 1fr 1fr; } }
.upcoming li { padding: 18px 0; border-top: 1px solid var(--separator); }
.upcoming__name { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.upcoming__name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--card-accent); }
.upcoming p { margin: 6px 0 0; font-size: 15px; color: var(--label-2); }

.p-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .p-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.p-cards li { padding: 24px; border-radius: var(--r-lg); background: #fff; }
.p-section:not(.p-section--alt) .p-cards li { background: var(--bg-alt); }
.p-cards h3 { margin: 14px 0 6px; font-size: 19px; }
.p-cards p { margin: 0; font-size: 15px; color: var(--label-2); }
.p-cards--questions p { margin-top: 12px; font-size: 17px; font-weight: 500; color: var(--label); }

/* Waitlist */
.notify-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.notify-form .input { flex: 1 1 220px; width: auto; }
.notify-form select.input { flex: 0 1 230px; }
.notify-error { flex-basis: 100%; margin: 4px 0 0; font-size: 15px; color: var(--red); }
.notify-done { display: flex; gap: 10px; align-items: center; margin-top: 20px; font-weight: 600; }
.notify-done .icon { color: var(--green); }

/* Show directory */
.directory { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 16px; }
@media (min-width: 640px) { .directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.directory__body { padding: 14px 2px 0; }
.directory__body h2 { font-size: 21px; letter-spacing: -0.01em; }
.directory__tagline { margin: 6px 0 10px; font-size: 15px; color: var(--label-2); }
.directory__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* Show page */
.s-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(28px, 4vw, 44px); }
.s-hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .s-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.s-hero h1 { font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -0.022em; }
.s-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--label-2); }
.s-hero__lede { max-width: 34ch; margin: 20px 0 0; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.s-hero__summary { max-width: 54ch; margin: 12px 0 24px; color: var(--label-2); }
.s-facts { padding: 0 0 8px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--separator); box-shadow: inset 0 0 0 1px var(--separator); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { padding: 18px 20px; background: var(--bg-alt); }
.facts dt { font-size: 13px; font-weight: 600; color: var(--label-2); }
.facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.s-facts__note { margin: 16px 0 0; font-size: 15px; color: var(--label-2); }
.s-facts__note strong { color: var(--label); }

/* Official trailer: a poster until someone presses play; YouTube loads only then */
.s-trailer { margin-top: clamp(28px, 4vw, 44px); padding: clamp(40px, 6vw, 72px) 0; background: var(--onyx); color: #fff; }
.s-trailer h2 { margin-bottom: 20px; color: #fff; }
.s-trailer__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--charcoal); }
.s-trailer__poster, .s-trailer__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s-trailer__poster { display: grid; place-items: center; background: radial-gradient(120% 95% at 50% 128%, color-mix(in srgb, var(--show-fill) 60%, transparent) 0%, transparent 60%), var(--charcoal); }
.s-trailer__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.s-trailer__play { position: relative; display: grid; place-items: center; width: clamp(64px, 9vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--show-fill); color: var(--show-on); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.s-trailer__play svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.s-trailer__poster:hover .s-trailer__play, .s-trailer__poster:focus-visible .s-trailer__play { transform: scale(1.08); }
.s-trailer__poster:hover img { transform: scale(1.02); }
.s-trailer__poster:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.s-trailer__note { margin: 14px 0 0; font-size: 14px; color: rgba(255, 255, 255, .62); }
@media (prefers-reduced-motion: reduce) { .s-trailer__poster img, .s-trailer__play { transition: none; } }

/* How it works: the app's own screens in league windows, a step at a time */
.hw-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 6vw, 80px); }
.hw-hero__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .hw-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; } }
.hw-hero h1 { font-size: clamp(42px, 7vw, 78px); line-height: .98; letter-spacing: -0.022em; }
.hw-hero__lede { max-width: 38ch; margin: 18px 0 26px; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.4; letter-spacing: -0.01em; color: var(--label-2); }
.hw-hero__free { margin: 18px 0 0; font-size: 15px; color: var(--label-2); }

.hw-shot { position: relative; margin: 0; }
.hw-shot figcaption { margin-top: 12px; font-size: 13px; color: var(--label-2); }
.hw-window { container-type: inline-size; overflow: hidden; border-radius: 22px; background: var(--bg); box-shadow: 0 40px 80px -40px rgba(11, 11, 13, .45), 0 0 0 1px rgba(11, 11, 13, .07); }
.hw-window__bar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px 0 16px; background: #fff; border-bottom: 1px solid var(--separator); }
.hw-window__league { min-width: 0; margin-right: auto; line-height: 1.2; }
.hw-window__league strong { display: block; overflow: hidden; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.hw-window__league span { display: block; font-size: 11px; color: var(--label-2); white-space: nowrap; }
.hw-window__tabs { display: none; gap: 14px; font-size: 13px; color: var(--label-2); }
.hw-window__tabs span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hw-window__tabs .icon { width: 15px; height: 15px; }
.hw-window__tabs .is-on { color: var(--label); font-weight: 600; }
@container (min-width: 560px) { .hw-window__tabs { display: flex; } }
.hw-window__body { padding: 14px; }
.hw-window__body > * + * { margin-top: 12px; }
.hw-window .card + .card { margin-top: 12px; }
.hw-window .card__head h3 { font-size: 18px; }
.hw-window .lb-row:hover { background: none; }
.hw-window .lb-row.is-me { background: var(--show-tint); }
.hw-window .projection summary { cursor: default; }
.hw-input { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.hw-members { list-style: none; margin: 0; padding: 0; }
.hw-members li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.hw-members li + li { border-top: 1px solid var(--separator); }
.hw-members strong { display: block; font-size: 15px; letter-spacing: -0.005em; }
.hw-pickhead h3 { font-size: 20px; }
.hw-window .filters { margin: 0; padding: 0; overflow: hidden; }
.hw-window .filter { height: 30px; padding: 0 12px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.hw-window .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 0; }
@container (min-width: 480px) { .hw-window .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 479px) { .hw-window .pick-grid > :nth-child(n+5) { display: none; } }
.hw-window .pick { padding: 6px 6px 10px; cursor: default; }
.hw-window .pick.is-picked { box-shadow: 0 0 0 3px var(--show); }
.hw-window .pick.is-picked .pick__check { background: var(--show); color: #fff; box-shadow: none; }
.hw-window .pick__name { font-size: 14px; }
.hw-window .tray { position: static; width: auto; margin: 12px -14px -14px; padding: 10px 14px; border-radius: 0; border-top: 1px solid var(--separator); background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hw-window .team .portrait { aspect-ratio: 16 / 9; background: linear-gradient(150deg, color-mix(in srgb, var(--tribe) 42%, #fff), color-mix(in srgb, var(--tribe) 14%, #fff)); }
.hw-window .team .portrait__initials { font-size: clamp(1.8rem, 7cqi, 2.6rem); }

.hw-toast { display: flex; align-items: center; gap: 12px; max-width: 340px; margin-bottom: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 22px 44px -20px rgba(11, 11, 13, .45), 0 0 0 1px rgba(11, 11, 13, .07); font-size: 14px; line-height: 1.3; }
.hw-toast__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--onyx); }
.hw-toast__icon .mark { width: 18px; height: 20px; color: #fff; }
.hw-toast strong { display: block; letter-spacing: -0.005em; }
.hw-toast strong + span { color: var(--label-2); }
@media (min-width: 960px) {
  .hw-toast { position: absolute; z-index: 2; left: -40px; bottom: 24px; margin: 0; }
  .hw-shot--hero figcaption { margin: 0 0 0 auto; max-width: calc(100% - 320px); padding-top: 14px; min-height: 64px; }
}

.hw-steps { padding: 0 0 clamp(32px, 5vw, 64px); }
.hw-step { display: grid; gap: 28px; align-items: center; padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--separator); }
@media (min-width: 960px) {
  .hw-step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .hw-step:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .hw-step:nth-child(even) .hw-step__text { order: 2; }
}
.hw-step__num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: var(--show-fill); color: var(--show-on); font: 700 17px/1 var(--font-num); }
.hw-step h2 { font-size: clamp(30px, 3.8vw, 42px); line-height: 1.06; letter-spacing: -0.018em; }
.hw-step__text p { max-width: 42ch; margin: 14px 0 0; font-size: 18px; line-height: 1.45; letter-spacing: -0.005em; color: var(--label-2); }
.hw-step__text .hw-step__more { font-size: 16px; }

.hw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .hw-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hw-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hw-rules li { padding: 22px; border-radius: var(--r-lg); background: #fff; }
.hw-rules h3 { margin-bottom: 6px; font-size: 18px; }
.hw-rules p { margin: 0; font-size: 15px; color: var(--label-2); }

.hw-cta { padding: clamp(52px, 8vw, 96px) 0; background: var(--onyx); color: #fff; }
.hw-cta h2 { max-width: 18ch; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.02em; color: #fff; }
.hw-cta p { max-width: 46ch; margin: 14px 0 26px; font-size: 19px; letter-spacing: -0.01em; color: rgba(255, 255, 255, .74); }

/* The windows come alive once, as they scroll into view (the static layout is the final frame) */
@media (prefers-reduced-motion: no-preference) {
  .js .hw-toast { animation: hw-in .6s var(--ease) 1.1s both; }
  .js [data-reveal]:not(.is-visible) .hw-stagger > * { opacity: 0; }
  .js [data-reveal].is-visible .hw-stagger > * { animation: hw-in .5s var(--ease) both; }
  .js [data-reveal].is-visible .hw-stagger > :nth-child(2) { animation-delay: .18s; }
  .js [data-reveal].is-visible .hw-stagger > :nth-child(3) { animation-delay: .36s; }
  .js [data-reveal].is-visible .hw-stagger > :nth-child(4) { animation-delay: .54s; }
  .js [data-reveal].is-visible .pick.is-picked { animation: hw-pick .5s var(--ease) .3s both; }
  .js [data-reveal].is-visible .pick.is-picked + .pick ~ .pick.is-picked { animation-delay: .6s; }
  .js [data-reveal].is-visible .hw-total { animation: hw-pop .45s var(--ease) .8s both; }
}
@keyframes hw-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes hw-pick { from { box-shadow: 0 0 0 0 var(--show); transform: scale(.97); } }
@keyframes hw-pop { from { opacity: 0; transform: scale(.6); } }

/* Pick screen demo */
.demo { margin-top: 24px; padding: 16px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); }
.demo__head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 12px; }
.demo__head strong { font-size: 18px; letter-spacing: -0.01em; }
.demo__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.demo__pick { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: var(--bg-alt); font-size: 12px; font-weight: 600; text-align: center; letter-spacing: -0.005em; }
.demo__pick.is-picked { background: var(--show-tint); box-shadow: inset 0 0 0 2px var(--show-fill); }
.demo__face { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--slate); color: #fff; font-size: 16px; font-weight: 700; }
.demo__pick.is-picked .demo__face { background: var(--show-fill); color: var(--show-on); }
.demo__check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--show-fill); color: var(--show-on); }
.demo__check .icon { width: 12px; height: 12px; stroke-width: 3; }
.demo__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 0 4px; }
.demo__draft { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demo__round { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.demo__slots, .demo__lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.demo__slot { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-alt); font-size: 14px; font-weight: 600; }
.demo__slot.is-mine { background: var(--show-tint); box-shadow: inset 0 0 0 2px var(--show-fill); }
.demo__note { margin: 12px 4px 0; font-size: 14px; color: var(--label-2); }

/* Scoring page */
.score-group__title { margin: 40px 0 6px; font-size: 24px; }
.score-group__title:first-child { margin-top: 0; }
.score-table { list-style: none; margin: 0; padding: 0; }
.score-table li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--separator); }
.score-table p { margin: 4px 0 0; font-size: 15px; color: var(--label-2); }
.score-table .num { font-size: 19px; white-space: nowrap; }

.s-sources { padding: 32px 0 56px; border-top: 1px solid var(--separator); }
.s-sources summary { cursor: pointer; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--label-2); }
.s-sources ul { margin: 8px 0 16px; padding-left: 18px; font-size: 14px; }
.s-sources li { margin: 4px 0; }
.formats td { vertical-align: top; }
.faq__title { margin: 28px 0 4px; font-size: 22px; }
.faq__title:first-child { margin-top: 0; }

/* Footer */
.site-footer__cols { display: grid; gap: 28px; margin-bottom: 28px; }
@media (min-width: 800px) { .site-footer__cols { grid-template-columns: 1.2fr 2fr 1fr; } }
.site-footer__cols nav { display: block; margin: 0; }
.site-footer__cols h2 { margin-bottom: 10px; font-size: 13px; color: var(--label); }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.site-footer__cols nav[aria-label="Shows"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
.site-footer .logo { width: auto; height: 22px; }
.site-footer__legal { max-width: 82ch; font-size: 12px; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--green); vertical-align: 2px; }

/* --- Auth --------------------------------------------------------------------------------------------------------------------- */

.auth { min-height: 100dvh; display: grid; place-items: center; padding: 32px var(--gutter); background: var(--bg); }
.auth__panel { width: 100%; max-width: 420px; }
.auth__brand { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth__brand .logo { height: 38px; }
.auth h1 { font-size: 28px; text-align: center; margin-bottom: 6px; }
.auth__lede { text-align: center; color: var(--label-2); margin: 0 0 22px; font-size: 17px; }
.auth__panel > form, .auth__panel > .card { background: var(--bg-card); border-radius: var(--r-lg); padding: 20px; }
.auth__alt { text-align: center; margin-top: 20px; color: var(--label-2); font-size: 15px; }
.auth__alt a { color: var(--accent); font-weight: 600; }
.btn--google { --bg: #fff; --fg: #1f1f1f; box-shadow: inset 0 0 0 1px var(--separator-strong); }

/* --- Admin ----------------------------------------------------------------------------------------------------------------------- */

.admin-grid { display: grid; gap: 16px; }
@media (min-width: 1040px) { .admin-grid--episode { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.state { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }
.state--draft { background: #fff4cc; color: var(--gold); }
.state--published { background: rgba(52, 199, 89, .16); color: #1e7a34; }
.state--void_pending { background: rgba(255, 59, 48, .12); color: var(--red); }
.state--void { background: var(--fill); color: var(--label-2); }
.entry-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 64px 64px 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.entry-row .input { min-height: 40px; padding: 8px 10px; font-size: 15px; border-radius: 10px; }
.entry-row .icon-btn { color: var(--label-2); }
.entry-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 64px 64px 34px; gap: 6px; font-size: 13px; color: var(--label-2); margin-bottom: 6px; padding: 0 2px; }
@media (max-width: 639px) { .entry-row, .entry-head { grid-template-columns: 1fr 1fr 52px 52px 30px; } }
.tribal-table td, .tribal-table th { padding: 8px 10px; }
.tribal-table input[type="number"] { width: 64px; min-height: 36px; padding: 6px 8px; }
.tribal-table select { min-height: 36px; padding: 6px 30px 6px 8px; font-size: 15px; }
.json { font: 12px/1.45 ui-monospace, "SF Mono", Menlo, monospace; color: var(--label-2); white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; letter-spacing: 0; }
.publish-card { background: linear-gradient(180deg, #fff6eb, #fff); }

/* --- Utilities ------------------------------------------------------------------------------------------------------------------- */

.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap-gap { flex-wrap: wrap; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
/* Hide only; never set a display value, so buttons and table cells keep their own layout. */
@media (max-width: 959px) { .hide-mobile { display: none !important; } }
.show-mobile-inline { display: none; }
@media (max-width: 959px) { .show-mobile-inline { display: inline; } }
@media (min-width: 960px) { .hide-desktop { display: none !important; } }
.js-only { display: none !important; }
.js .js-only { display: flex !important; }
.js .no-js-only { display: none !important; }

/* --- Motion preferences ---------------------------------------------------------------------------------------------------------- */

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

@media (min-width: 960px) {
  .castaway-card .portrait { aspect-ratio: 1 / 1; }
}

/* --- Profile ------------------------------------------------------------------------------------------------------------------------ */

.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
@media (min-width: 640px) { .profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.profile-stats dt { font-size: 13px; font-weight: 600; color: var(--label-2); }
.profile-stats dd { margin: 4px 0 0; font-size: 28px; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.badge { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-card); color: var(--label-2); }
.badge strong { display: block; color: var(--label); font-weight: 600; }
.badge span span { font-size: 14px; }
.badge__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--fill); color: var(--label-3); }
.badge.is-earned .badge__icon { background: var(--onyx); color: var(--gold-fill); }

/* --- Polls ------------------------------------------------------------------------------------------------------------------------- */

.polls { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .polls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.poll { padding: 20px; border-radius: var(--r-lg); background: #fff; }
.p-section:not(.p-section--alt) .poll { background: var(--bg-alt); }
.poll__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.poll__q { font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
.poll__form fieldset { border: 0; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.poll__option { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--fill); cursor: pointer; font-weight: 500; }
.poll__option input { width: 18px; height: 18px; accent-color: var(--show-fill, var(--accent)); }
.poll__option:has(input:checked) { background: var(--show-tint); box-shadow: inset 0 0 0 2px var(--show-fill); }
.poll__results { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 6px; }
.poll__results li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--fill); overflow: hidden; isolation: isolate; font-size: 15px; }
.poll__bar { position: absolute; inset: 0 auto 0 0; width: var(--pct); z-index: -1; background: color-mix(in srgb, var(--show-fill) 22%, transparent); }
.poll__results li.is-correct { box-shadow: inset 0 0 0 2px var(--green); }
.poll__results li.is-mine .poll__label { font-weight: 600; }
.poll__label .icon { display: inline-block; vertical-align: -2px; color: var(--green); }
.poll__pct { font-size: 15px; }
.poll__form--change { display: flex; gap: 8px; margin-top: 10px; }
.poll__form--change .input { width: auto; flex: 1; }
.poll__note { margin: 12px 0 0; font-size: 12px; color: var(--label-2); }

/* --- Shop preview -------------------------------------------------------------------------------------------------------------------- */

.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
@media (min-width: 900px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.product-card { display: grid; gap: 4px; }
.product-card .product-art { border-radius: var(--r-lg); transition: transform .25s var(--ease); }
.product-card:hover .product-art { transform: translateY(-3px); }
.product-card__name { margin-top: 8px; font-weight: 600; letter-spacing: -0.005em; }
.product-card__meta { font-size: 14px; color: var(--label-2); }
.product-art { display: block; width: 100%; height: auto; }
.product-hero .product-art { border-radius: var(--r-xl); }
.product-title { font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.018em; }
.product-desc { font-size: 19px; letter-spacing: -0.01em; margin-top: 16px; }
.h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* --- Admin analytics (single-series charts: Onyx marks, text in text tokens) ----------------------------------------------------- */

.dash-hero__label, .dash-tile__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--label-2); }
.dash-hero__value { margin: 2px 0 4px; font-size: 56px; line-height: 1.05; letter-spacing: -0.015em; }
.dash-tiles { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .dash-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-tiles .card { margin: 0; }
.dash-tile__value { margin: 4px 0 2px; font-size: 28px; letter-spacing: -0.01em; }
.dash-tile__note { margin: 0; font-size: 13px; color: var(--label-2); }
.dash-title { font-size: 19px; margin-bottom: 2px; }
.cols { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 16px; border-bottom: 1px solid var(--separator); }
.cols__slot { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline-offset: 2px; }
.cols__bar { display: block; width: 100%; max-width: 24px; height: var(--h); min-height: 3px; border-radius: 4px 4px 0 0; background: var(--onyx); transition: opacity .15s; }
.cols__slot:hover .cols__bar, .cols__slot:focus-visible .cols__bar { opacity: .7; }
.cols__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--label-2); }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; padding: 6px 10px; border-radius: 8px; background: var(--onyx); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.hbars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 9em) 1fr; gap: 12px; align-items: center; outline-offset: 2px; }
.hbars__name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars__track { display: flex; align-items: center; gap: 8px; }
.hbars__bar { display: block; width: var(--w); min-width: 2px; height: 20px; border-radius: 0 4px 4px 0; background: var(--onyx); }
.hbars__value { font-size: 14px; }
.birth { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.birth legend { padding: 0; margin-bottom: 6px; }
.birth__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }

/* --- Public leagues ------------------------------------------------------------------------------------------------------------------- */

.pub-leagues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pub-league { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg-alt); transition: background-color .15s; }
.pub-league:hover { background: var(--fill); }
.pub-league__main { display: grid; gap: 3px; min-width: 0; }
.pub-league__main strong { font-size: 18px; letter-spacing: -0.01em; }
.pub-league__host { font-size: 14px; color: var(--label-2); }
.pub-league__desc { font-size: 15px; color: var(--label); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pub-league__meta { display: grid; justify-items: end; gap: 4px; flex: none; text-align: right; }
.pub-league__meta .num { font-size: 22px; line-height: 1; }
.pub-standings { max-width: 760px; }

/* --- Schedule: What's on, the next date on show pages, logo tiles -------------------------------------------------- */

/* A show's logo on a small Onyx tile. Live shows in color; the rest as silhouettes, like their title cards. */
.logo-tile { position: relative; flex: none; display: grid; place-items: center; width: 112px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--charcoal); color: #fff; }
.logo-tile.is-live { background: radial-gradient(120% 95% at 50% 128%, color-mix(in srgb, var(--card-accent) 60%, transparent) 0%, transparent 62%), var(--onyx); }
.logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.logo-tile--contain img { width: 80%; height: 70%; object-fit: contain; }
.logo-tile--contain:not(.is-live) img { filter: brightness(0) invert(1); opacity: .62; }
.logo-tile--cover:not(.is-live) img { filter: grayscale(1); opacity: .55; }
.logo-tile > span { padding: 0 8px; font: 700 13px/1.05 var(--font-display); text-align: center; text-wrap: balance; }
@media (max-width: 639px) { .logo-tile { width: 88px; border-radius: 10px; } }

.sched-day + .sched-day { margin-top: 32px; }
.sched-day__date { margin: 0 0 4px; font-size: 22px; }
.sched-day__date span { margin-left: 6px; font: 500 16px/1 var(--font-body); color: var(--label-2); }
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--separator); }
.sched-item__show::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* the whole row is the target */
.sched-item__show:active::after { background: rgba(11, 11, 13, .04); }
.sched-item__play { position: relative; z-index: 1; }
.sched-list > .sched-item:first-child { border-top: 0; }
.sched-item__text { min-width: 0; }
.sched-item__show { display: inline-block; font: 600 18px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--label); }
.sched-item__show:hover { text-decoration: underline; text-underline-offset: 3px; }
.sched-item__what { margin: 2px 0 0; font-size: 15px; color: var(--label); }
.sched-item__when { margin: 1px 0 0; font-size: 14px; color: var(--label-2); }
.sched-item__play { margin-left: auto; height: 34px; padding: 0 14px; font-size: 14px; }
@media (min-width: 760px) {
  .sched-list--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .sched-list--grid > .sched-item:nth-child(2) { border-top: 0; }
}

/* The next date on a show page, with its countdown */
.s-when { display: flex; align-items: flex-start; gap: 10px; max-width: 46ch; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: 16px; line-height: 1.45; }
.s-when > .icon { margin-top: 2px; color: var(--label-2); }
.s-when__count { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.s-when__note { display: block; margin-top: 4px; font-size: 14px; color: var(--label-2); }

/* Month calendar: whole weeks, Sunday first; each day lists its shows by logo, name and time */
.cal { border: 1px solid var(--separator); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--separator); }
.cal .cal__title { font-size: 26px; line-height: 1.1; } /* beats .p-section h2 */
.cal__nav { display: flex; align-items: center; gap: 6px; }
.cal__nav .icon-btn { width: 40px; height: 40px; background: var(--fill); }
.cal__nav .icon-btn:hover { background: var(--fill-strong); }
.cal__nav span.icon-btn { opacity: .35; }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid th { padding: 8px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--label-2); }
.cal__grid abbr { text-decoration: none; }
.cal__day { height: 118px; padding: 6px; vertical-align: top; border-top: 1px solid var(--separator); border-left: 1px solid var(--separator); }
.cal__day:first-child { border-left: 0; }
.cal__day.is-other { background: var(--bg); }
.cal__num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px; font: 600 13px/1 var(--font-body); color: var(--label); }
.cal__day.is-other .cal__num { color: var(--label-2); font-weight: 500; }
a.cal__num:hover { background: var(--fill); }
.cal__day.is-today .cal__num { background: var(--onyx); color: #fff; }
.cal__events { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.cal__ev { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px; border-radius: 8px; }
.cal__ev:hover { background: var(--fill); }
.cal__ev-text { display: grid; min-width: 0; line-height: 1.2; }
.cal__ev-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--label); }
.cal__ev-time { font-size: 11px; color: var(--label-2); }
/* Aired days: tiles dim; Survivor's logo keeps its shape in grey */
.cal__day.is-past .logo-tile { opacity: .55; }
.cal__day.is-past .logo-tile.is-live { background: var(--charcoal); }
.cal__day.is-past .logo-tile.is-live img { filter: grayscale(1); }
.logo-tile--mini { width: 40px; border-radius: 6px; }
.logo-tile--mini > span { padding: 0 2px; font-size: 7px; }
.p-section .cal-list__title { margin: 36px 0 12px; font-size: 26px; }
.sched-day { scroll-margin-top: 72px; }
.sched-day.is-past .sched-item__show, .sched-day.is-past .sched-item__what { color: var(--label-2); }
@media (max-width: 759px) {
  /* Phones: each day shows just its logos; tap the date for the details below */
  .cal__head { padding: 10px 10px 10px 14px; }
  .cal .cal__title { font-size: 20px; }
  .cal__day { height: 72px; padding: 3px 2px; }
  .cal__num { min-width: 24px; height: 24px; font-size: 12px; }
  .cal__ev { padding: 0; }
  .cal__ev .logo-tile--mini { width: 100%; border-radius: 4px; }
  .cal__ev-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cal__day { position: relative; }
  a.cal__num::after { content: ""; position: absolute; inset: 0; } /* tap anywhere in the day */
  .cal__ev { pointer-events: none; }
  .cal__day:has(a.cal__num:active) { background: var(--fill); }
}