:root {
  --cover: #FEDD00;
  --cover-deep: oklch(0.86 0.20 100);
  --cover-tint: oklch(0.96 0.10 100);

  --ink: oklch(0.16 0.02 250);
  --ink-strong: oklch(0.08 0.01 250);
  --ink-muted: oklch(0.40 0.02 250);
  --ink-dim: oklch(0.55 0.02 250);
  --hair: oklch(0.88 0.01 250);

  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f3f4f6;

  --pos: oklch(0.55 0.16 155);
  --mix: oklch(0.62 0.16 75);
  --neg: oklch(0.58 0.20 25);
  --pos-soft: oklch(0.93 0.08 155);
  --mix-soft: oklch(0.95 0.10 85);
  --neg-soft: oklch(0.94 0.08 25);

  --shadow-sm: 0 1px 0 oklch(0 0 0 / 0.06), 0 2px 6px -2px oklch(0 0 0 / 0.10);
  --shadow-md: 0 1px 0 oklch(0 0 0 / 0.06), 0 12px 24px -10px oklch(0 0 0 / 0.18);
  --shadow-lg: 0 1px 0 oklch(0 0 0 / 0.06), 0 30px 60px -20px oklch(0 0 0 / 0.30);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;

  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}* { box-sizing: border-box; }html, body { margin: 0; padding: 0; }html.is-restoring-scroll body { visibility: hidden; }body {
  background: var(--cover);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}a { color: var(--ink); text-decoration: none; }button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }/* ====== STATUS RAIL ====== */
.rail {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-strong);
  border-bottom: 1px solid oklch(0 0 0 / 0.12);
}.rail__inner {
  max-width: 1240px;
  margin: 0 auto;
  height: 32px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.05em;
}.rail__live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }.rail__live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-strong);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {0%, 100% { opacity: 1; }50% { opacity: 0.3; }}.rail__sep { opacity: 0.4; }.rail__item b { font-weight: 700; }/* ====== HEADER (floating pill on yellow) ====== */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 50;
  margin: 12px auto 0;
  max-width: 1240px;
  padding: 0 24px;
  transition: opacity 180ms ease, transform 220ms ease;
}body.scrolled-past-hub .site-header {
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}.site-header__inner {
  background: var(--paper);
  border-radius: 100px;
  box-shadow: var(--shadow-md);
  height: 58px;
  padding: 0 10px 0 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--ink-strong);
}.brand__mark {
  width: 56px;
  height: 56px;
  background: transparent;
  object-fit: contain;
  display: inline-block;
}.brand__slash { color: var(--ink-dim); font-weight: 400; }.search {
  position: relative;
  max-width: 520px;
  width: 100%;
}.search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 100px;
  font: 13px/1 var(--sans);
  outline: none;
}.search input::placeholder { color: var(--ink-dim); }.search input:focus { background: var(--paper); border-color: var(--ink-strong); }.search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-dim);
}.nav {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-right: 6px;
}.nav a {
  color: var(--ink-muted);
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
}.nav a:hover { color: var(--ink-strong); background: var(--paper-3); }.nav a[aria-current="page"] { color: var(--paper); background: var(--ink-strong); }/* ====== PAGE WRAPPERS ====== */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}.section { padding: 56px 0 8px; }.section + .section { padding-top: 36px; }.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}.section-head h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink-strong);
  text-wrap: balance;
}.section-head h2 .num { color: var(--ink-strong); opacity: 0.4; font-weight: 700; }.section-head .sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-strong);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}.breadcrumb {
  padding: 22px 0 0;
  font-size: 12px;
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-weight: 500;
}.breadcrumb a { opacity: 0.55; }.breadcrumb a:hover { opacity: 1; }.breadcrumb .sep { opacity: 0.4; }.breadcrumb .current { font-weight: 700; }/* ====== HOME HERO ====== */
.hero-home {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}.hero-home__main {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 56px 56px 48px;
  position: relative;
  overflow: hidden;
}.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-weight: 600;
}.hero__eyebrow .stamp {
  color: var(--ink-strong);
  background: var(--cover);
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10px;
}.hero__eyebrow .sep { opacity: 0.4; }h1.hero-home__h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.93;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  color: var(--ink-strong);
  text-wrap: balance;
}h1.hero-home__h1 mark {
  background: var(--cover);
  color: var(--ink-strong);
  padding: 0 8px;
  border-radius: 6px;
  box-decoration-break: clone;
}.hero-home__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 56ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}.hero-home__intro b { color: var(--ink-strong); font-weight: 600; }.hero-home__search {
  position: relative;
  max-width: 560px;
}.hero-home__search input {
  width: 100%;
  height: 56px;
  padding: 0 16px 0 52px;
  background: var(--paper-3);
  border: 1px solid var(--hair);
  border-radius: 100px;
  font: 15px/1 var(--sans);
  color: var(--ink);
  outline: none;
}.hero-home__search input:focus {
  background: var(--paper);
  border-color: var(--ink-strong);
  box-shadow: 0 0 0 4px oklch(0 0 0 / 0.06);
}.hero-home__search > svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
}.hero-home__status {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
  min-height: 18px;
}.hero-home__side {
  background: var(--ink-strong);
  color: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}.hero-home__side::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: var(--cover);
  border-radius: 50%;
  opacity: 0.15;
}.hero-home__side__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cover);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}.hero-home__side__stat {
  font-family: var(--display);
  font-size: clamp(60px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cover);
  margin: 0 0 4px;
}.hero-home__side__stat .small {
  font-family: var(--mono);
  color: oklch(1 0 0 / 0.6);
  font-size: 0.35em;
  font-weight: 600;
}.hero-home__side__lbl {
  font-size: 14px;
  color: oklch(1 0 0 / 0.75);
  margin-bottom: 22px;
  max-width: 26ch;
  line-height: 1.45;
}.hero-home__side__grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid oklch(1 0 0 / 0.15);
}.hero-home__side__grid > div { position: relative; z-index: 1; }.hero-home__side__grid .k {
  font-family: var(--mono);
  font-size: 10px;
  color: oklch(1 0 0 / 0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}.hero-home__side__grid .v {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--paper);
}.hero-home__side__grid .v .small {
  color: oklch(1 0 0 / 0.45);
  font-size: 12px;
  font-weight: 600;
}/* ====== HUB NAV ====== */
.hub {
  position: sticky;
  top: 12px;
  z-index: 49;
  margin: 18px 0 0;
  background: var(--paper);
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  padding: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  transition: box-shadow 200ms ease;
}body.scrolled-past-hub .hub { box-shadow: var(--shadow-md); }.hub .hub__brand {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
}.hub .hub__brand .brand__mark { width: 40px; height: 40px; }body.scrolled-past-hub .hub .hub__brand { display: inline-flex; }.hub__search {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--paper-3);
  color: var(--ink-strong);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}.hub__search:hover { background: var(--ink-strong); color: var(--cover); }body.scrolled-past-hub .hub__search { display: inline-flex; }.hub a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}.hub a:hover { background: var(--paper-3); color: var(--ink-strong); }.hub a[aria-current="true"] { background: var(--ink-strong); color: var(--paper); }.hub a svg { width: 14px; height: 14px; }.hub__count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--paper-3);
  color: var(--ink-strong);
  padding: 1px 8px;
  border-radius: 100px;
  margin-left: 2px;
}.hub a[aria-current="true"] .hub__count { background: var(--cover); }/* ====== GAME GRID ====== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px) {.game-grid { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 820px)  {.game-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }}
@media (max-width: 480px)  {.game-grid { grid-template-columns: 1fr; }}.gcard {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  color: inherit;
}.gcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }.gcard__poster {
  aspect-ratio: 900 / 1200;
  position: relative;
  background: var(--paper-3);
  overflow: hidden;
}.gcard__poster img, .gcard__poster picture {
  width: 100%;
  height: 100%;
  display: block;
}.gcard__poster img {
  object-fit: cover;
  object-position: 50% 30%;
}.gcard__poster.placeholder {
  display: grid;
  place-items: center;
  color: oklch(0.98 0.05 var(--g-h, 100));
}.gcard__poster.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 8%,  oklch(0.55 0.16 var(--g-h, 80)) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, oklch(0.35 0.18 var(--g-h2, 320)) 0%, transparent 60%),
    linear-gradient(160deg, oklch(0.26 0.08 var(--g-h, 240)), oklch(0.18 0.06 var(--g-h2, 280)));
}.gcard__poster.placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / 0.08) 3px 4px);
  mix-blend-mode: overlay;
}.gcard__glyph {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: -0.04em;
  text-shadow: 2px 2px 0 oklch(0.45 0.18 var(--g-h2, 320) / 0.7);
  position: relative;
  z-index: 1;
  line-height: 1;
  text-align: center;
  padding: 0 12px;
}.gcard__bucket {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 7px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.02em;
  border: 2px solid var(--ink-strong);
  box-shadow: 0 3px 0 var(--ink-strong);
  transform: rotate(-3deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}.gcard__bucket[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.gcard__bucket[data-bucket="meh"] { background: var(--b-meh);  color: var(--paper); }.gcard__bucket[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.gcard__bucket[data-bucket="wow"] { background: var(--b-wow); color: var(--ink-strong); }.gcard__bucket[data-bucket="mixed"] { background: var(--b-mixed); color: var(--paper); }.gcard__bucket[data-bucket="love_hate"] {
  background: linear-gradient(90deg, var(--b-shit) 0%, var(--b-shit) 48%, var(--b-wow) 52%, var(--b-wow) 100%);
  color: var(--paper);
}.gcard__ornament {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  background: var(--ink-strong);
  color: var(--b-wow);
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.gcard__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}.gcard__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  line-height: 1.15;
  text-wrap: balance;
}.gcard__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  letter-spacing: 0.04em;
}.gcard__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); }.gcard__meta b { color: var(--ink-strong); font-weight: 600; }.gcard__quote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  /* No BOTTOM padding on purpose. Modern Chrome maps -webkit-line-clamp to the
     standard line-clamp, which inserts the ellipsis but does NOT discard line 4
     -- it keeps painting it into the box's bottom-padding band, leaving a
     half-cut line. With zero bottom padding there is no band for line 4 to hide
     in, so overflow:hidden clips exactly between line 3 and line 4 on every
     engine -- no magic fudge factor, no mask. The line's own leading gives the
     visual gap above the box edge. Safari/iOS discards line 4 outright. */
  padding: 10px 12px 0;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--pos);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(1.5em * 3 + 10px); /* top padding (10px) + exactly 3 lines */
}.gcard__quote.mixed { border-left-color: var(--mix); }.gcard__quote.negative { border-left-color: var(--neg); }.gcard__quote.neutral, .gcard__quote.unknown { border-left-color: var(--ink-muted); }.gcard__quote em { color: var(--ink-strong); font-style: italic; font-weight: 600; }.gcard__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
}.gcard__ft .count { color: var(--ink-strong); }.gcard__ft-note { opacity: 0.65; font-weight: 500; }.gcard__creator { display: inline-flex; align-items: center; gap: 6px; }.gcard__creator .av-mini {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--paper);
  display: inline-grid;
  place-items: center;
}/* ====== TOP RATED LEADERBOARD ====== */
.toprated {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}.toprated__row {
  display: grid;
  grid-template-columns: 56px 80px 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
  transition: background .12s;
  color: inherit;
}.toprated__row:last-child { border-bottom: 0; }.toprated__row:hover { background: var(--paper-2); }.toprated__rank {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
}.toprated__rank[data-rank="1"] { position: relative; }.toprated__rank[data-rank="1"]::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--cover);
  border-radius: 100px;
}.toprated__poster {
  aspect-ratio: 900 / 1200;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper-3);
  position: relative;
}.toprated__poster img, .toprated__poster picture {
  width: 100%;
  height: 100%;
  display: block;
}.toprated__poster img {
  object-fit: cover;
  object-position: 50% 30%;
}.toprated__poster.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 8%,  oklch(0.55 0.16 var(--g-h, 80)) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, oklch(0.35 0.18 var(--g-h2, 320)) 0%, transparent 60%),
    linear-gradient(160deg, oklch(0.26 0.08 var(--g-h, 240)), oklch(0.18 0.06 var(--g-h2, 280)));
}.toprated__poster .gcard__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  padding: 0;
}.toprated__meta { min-width: 0; }.toprated__title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  line-height: 1.15;
  margin-bottom: 4px;
}.toprated__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}.toprated__sub b { color: var(--ink-strong); font-weight: 600; }.toprated__sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); }.toprated__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 88px;
}.toprated__bucket {
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.02em;
  border: 2px solid var(--ink-strong);
  box-shadow: 0 3px 0 var(--ink-strong);
  transform: rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}.toprated__bucket[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.toprated__bucket[data-bucket="meh"] { background: var(--b-meh); color: var(--paper); }.toprated__bucket[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.toprated__bucket[data-bucket="wow"] { background: var(--b-wow); color: var(--ink-strong); }.toprated__bucket-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}.toprated__cta {
  background: var(--ink-strong);
  color: var(--cover) !important;
  padding: 9px 14px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}.toprated__cta:hover { filter: brightness(1.1); }.toprated__cta svg { width: 12px; height: 12px; }
@media (max-width: 720px) {.toprated__row {
    grid-template-columns: 40px 60px 1fr;
    grid-template-areas:
      "rank poster meta"
      ".    .      score"
      ".    .      cta";
    gap: 12px;
    padding: 12px 16px;
  }.toprated__rank { grid-area: rank; font-size: 24px; }.toprated__poster { grid-area: poster; }.toprated__meta { grid-area: meta; }.toprated__score { grid-area: score; min-width: 0; flex-direction: row; align-items: center; gap: 10px; }.toprated__bucket { font-size: 13px; padding: 4px 10px; }.toprated__cta { grid-area: cta; justify-self: start; }}/* ====== STREAMERS GRID ====== */
.streamers-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px) {.streamers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (max-width: 520px) {.streamers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}.scard {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 16px 16px;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: inherit;
}.scard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }.scard__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--paper);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--hair);
}.scard__name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.2;
  text-wrap: balance;
  max-width: 100%;
  overflow-wrap: anywhere;
}.scard__sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}.scard__count {
  background: var(--paper-3);
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  margin-top: auto;
}/* ====== GENRES ====== */
.genres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 820px) {.genres { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 480px) {.genres { grid-template-columns: 1fr; }}.genre {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: transform .15s, box-shadow .15s;
  color: inherit;
}.genre:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }.genre__name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}.genre__count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  background: var(--cover);
  color: var(--ink-strong);
  padding: 3px 10px;
  border-radius: 100px;
}.genre__arrow { color: var(--ink-muted); }/* ====== ABOUT ====== */
.about {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 820px) {.about { grid-template-columns: 1fr; padding: 28px; gap: 24px; }}.about h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink-strong);
  text-wrap: balance;
}.about p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 14px;
  text-wrap: pretty;
}.about p b { color: var(--ink-strong); font-weight: 600; }.about__stats { display: flex; flex-direction: column; gap: 14px; }.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}.stat-row:last-child { border-bottom: 0; }.stat-row__k {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.stat-row__v {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
}/* ====== FAQ ====== */
.faq {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}.faq-item { border-bottom: 1px solid var(--hair); }.faq-item:last-child { border-bottom: 0; }.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary:hover { background: var(--paper-2); }.faq-item__q {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.012em;
  line-height: 1.3;
}.faq-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  color: var(--ink-strong);
  transition: transform .25s, background .15s;
}.faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--cover); }.faq-item__a {
  padding: 0 28px 22px 28px;
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 68ch;
}.faq-item__a p { margin: 0 0 10px; }.faq-item__a p:last-child { margin-bottom: 0; }.faq-item__a b { color: var(--ink-strong); font-weight: 600; }.faq-item__a a { font-weight: 600; text-decoration: underline; }/* ====== DETAIL HERO ====== */
.detail-hero {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}.cover {
  position: relative;
  overflow: hidden;
  background: var(--cover);
  aspect-ratio: 900 / 1200;
  max-height: calc(100vh - 180px);
  max-width: 100%;
  align-self: stretch;
  height: 100%;
}.cover img, .cover picture {
  width: 100%;
  height: 100%;
  display: block;
}.cover img {
  object-fit: cover;
  object-position: 50% 35%;
}.cover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: oklch(0 0 0 / 0.10);
  pointer-events: none;
}.cover__chip {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: oklch(1 0 0 / 0.85);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.06em;
}.cover__chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-strong);
  font-style: normal;
}.cover__credit {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: oklch(1 0 0 / 0.85);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.6);
  text-align: right;
  max-width: 60%;
}.intel {
  background: var(--paper);
  padding: 32px 32px 26px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}.intel__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-weight: 600;
}.intel__eyebrow .stamp {
  color: var(--ink-strong);
  background: var(--cover);
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10px;
}.intel__eyebrow .sep { opacity: 0.4; }h1.intel__title {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 60px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--ink-strong);
  text-wrap: balance;
  overflow-wrap: break-word;
}h1.intel__title .yr {
  font-family: var(--mono);
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 0.42em;
  vertical-align: 0.5em;
  margin-left: 6px;
}.intel__byline {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 22px;
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  align-items: center;
}.intel__byline b { color: var(--ink-strong); font-weight: 600; }.intel__byline .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-dim);
  display: inline-block;
}/* ====== BUCKET PALETTE ====== */
:root {
  --b-shit: oklch(0.55 0.22 25);
  --b-meh: oklch(0.62 0.02 250);
  --b-good: oklch(0.72 0.15 145);
  --b-wow: var(--cover);
  --b-mixed: oklch(0.62 0.05 300);
  --b-love-hate: oklch(0.60 0.20 340);
  --b-shit-soft: oklch(0.94 0.07 25);
  --b-meh-soft: oklch(0.96 0.01 250);
  --b-good-soft: oklch(0.95 0.08 145);
  --b-wow-soft: oklch(0.97 0.10 100);
  --b-mixed-soft: oklch(0.95 0.03 300);
  --b-love-hate-soft: oklch(0.95 0.07 340);
}/* ====== STAT BAR (hero verdict + meter) ====== */
.statbar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  border: 1px solid var(--hair);
  position: relative;
}.bucket-hero {
  position: relative;
  width: 168px;
  min-height: 168px;
  border-radius: 18px;
  border: 3px solid var(--ink-strong);
  background: var(--paper-3);
  color: var(--ink-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow:
    0 6px 0 var(--ink-strong),
    0 18px 30px -12px oklch(0 0 0 / 0.35);
}.bucket-hero[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.bucket-hero[data-bucket="meh"] { background: var(--b-meh); color: var(--paper); }.bucket-hero[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.bucket-hero[data-bucket="wow"] { background: var(--b-wow); color: var(--ink-strong); }.bucket-hero[data-bucket="mixed"] { background: var(--b-mixed); color: var(--paper); }.bucket-hero[data-bucket="love_hate"] {
  background: linear-gradient(135deg, var(--b-shit) 0%, var(--b-shit) 48%, var(--b-wow) 52%, var(--b-wow) 100%);
  color: var(--paper);
}.bucket-hero[data-bucket="love_hate"] .bucket-hero__word {
  font-size: 32px;
  letter-spacing: -0.03em;
}.bucket-hero--empty { transform: none; box-shadow: var(--shadow-sm); border-style: dashed; }.bucket-hero[data-inferred-only="1"] {
  background: transparent !important;
  border-style: dashed;
  box-shadow: none;
  color: var(--ink-strong) !important;
}.bucket-hero__ornament {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  background: var(--ink-strong);
  color: var(--b-wow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transform: rotate(8deg);
  box-shadow: 0 4px 10px -2px oklch(0 0 0 / 0.4);
}.bucket-hero__kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.8;
}.bucket-hero__word {
  font-family: var(--display);
  font-weight: 900;
  font-size: 58px;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 6px 0;
}.bucket-hero__count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
}.statbar__right { min-width: 0; }.statbar__lbl {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}.statbar__big {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}.statbar__big .num { color: var(--ink-strong); }.statbar__hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: 6px;
  font-weight: 500;
}/* segmented bucket meter */
.bmeter-block { margin: 4px 0 12px; }.bmeter-block__top {
  margin-bottom: 6px;
}.bmeter-block__lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}.bmeter {
  display: flex;
  width: 100%;
  height: 44px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--ink-strong);
  box-shadow: 0 3px 0 var(--ink-strong);
}.bmeter__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-width: 0;
  gap: 6px;
}.bmeter__cell:not(:last-child) { border-right: 2px solid var(--ink-strong); }.bmeter__cell[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.bmeter__cell[data-bucket="meh"] { background: var(--b-meh);  color: var(--paper); }.bmeter__cell[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.bmeter__cell[data-bucket="wow"] {
  background: var(--b-wow);
  color: var(--ink-strong);
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, oklch(0 0 0 / 0.06) 7px 8px);
}.bmeter__count {
  font-family: var(--mono);
  font-weight: 800;
  opacity: 0.9;
  letter-spacing: 0;
}.bmeter--empty {
  background: var(--paper-3);
  color: var(--ink-muted);
  border-style: dashed;
  border-color: var(--hair);
  box-shadow: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.bmeter__labels {
  display: flex;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}.bmeter__lbl {
  text-align: center;
  font-weight: 700;
  min-width: 0;
}/* ====== PER-CREATOR STICKER GRID ====== */
.bsticker-wrap {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 28px;
  margin-top: 18px;
}.bsticker-wrap .section-head { margin-bottom: 12px; }.bsticker-wrap .section-head h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  margin: 0 0 4px;
}.bsticker-wrap .section-head .sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}.bsticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  padding: 6px 0;
}.bsticker {
  position: relative;
  min-width: 0;
  border-radius: 14px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  border: 2.5px solid var(--ink-strong);
  box-shadow: 0 4px 0 var(--ink-strong);
  transform: rotate(var(--tilt, -1deg));
  transition: transform 0.15s;
}.bsticker:nth-child(odd) { --tilt: 1.5deg; }.bsticker:nth-child(3n) { --tilt: -2deg; }.bsticker:nth-child(4n) { --tilt: 1deg; }.bsticker:hover { transform: rotate(0deg) translateY(-2px); }.bsticker[data-bucket="shit"] { background: var(--b-shit-soft); }.bsticker[data-bucket="meh"] { background: var(--b-meh-soft); }.bsticker[data-bucket="good"] { background: var(--b-good-soft); }.bsticker[data-bucket="wow"] { background: var(--b-wow-soft); }.bsticker__verdict {
  font-family: var(--display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.04em;
  line-height: 1;
  padding: 6px 14px;
  border-radius: 8px;
}.bsticker[data-bucket="shit"] .bsticker__verdict { background: var(--b-shit); color: var(--paper); }.bsticker[data-bucket="meh"]  .bsticker__verdict { background: var(--b-meh);  color: var(--paper); }.bsticker[data-bucket="good"] .bsticker__verdict { background: var(--b-good); color: var(--ink-strong); }.bsticker[data-bucket="wow"]  .bsticker__verdict {
  background: var(--b-wow);
  color: var(--ink-strong);
  border: 2px solid var(--ink-strong);
  box-shadow: 0 3px 0 var(--ink-strong);
  position: relative;
}.bsticker[data-bucket="wow"] .bsticker__verdict::before, .bsticker[data-bucket="wow"] .bsticker__verdict::after {
  content: "✦";
  font-size: 13px;
  color: var(--ink-strong);
  position: absolute;
}.bsticker[data-bucket="wow"] .bsticker__verdict::before { left: -16px; top: 0; }.bsticker[data-bucket="wow"] .bsticker__verdict::after { right: -16px; bottom: 0; }.bsticker[data-inferred="1"] .bsticker__verdict {
  background: transparent !important;
  border: 2.5px dashed;
  box-shadow: none !important;
}.bsticker[data-inferred="1"][data-bucket="shit"] .bsticker__verdict { border-color: var(--b-shit); color: var(--b-shit); }.bsticker[data-inferred="1"][data-bucket="meh"]  .bsticker__verdict { border-color: var(--b-meh); color: var(--b-meh); }.bsticker[data-inferred="1"][data-bucket="good"] .bsticker__verdict { border-color: var(--b-good); color: var(--b-good); }.bsticker[data-inferred="1"][data-bucket="wow"]  .bsticker__verdict { border-color: var(--ink-strong); color: var(--ink-strong); }.bsticker[data-inferred="1"][data-bucket="wow"] .bsticker__verdict::before, .bsticker[data-inferred="1"][data-bucket="wow"] .bsticker__verdict::after { display: none; }.bsticker__name { font-family: var(--display); font-weight: 700; font-size: 14px; margin-top: 4px; color: var(--ink-strong); }.bsticker__src {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}a.bsticker__src:hover { color: var(--ink-strong); text-decoration: underline; }.bsticker__est {
  position: absolute;
  top: -8px;
  right: 10px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--ink-strong);
  color: var(--cover);
  padding: 2px 6px;
  border-radius: 4px;
}.bsticker-empty {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--hair);
  border-radius: var(--r-md);
}.sent-legend {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  flex-wrap: wrap;
}.sent-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  font-weight: 600;
}.sent-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  font-style: normal;
}.sent-legend .p i { background: var(--pos); }.sent-legend .m i { background: var(--mix); }.sent-legend .n i { background: var(--neg); }.sent-legend b { color: var(--ink-strong); font-weight: 700; margin-left: 3px; }/* META STRIP */
.meta-strip { margin-top: auto; padding-top: 22px; }.ms-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 10px;
}.ms-k {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 4px;
  font-weight: 600;
}.ms-v {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}.chip-mini {
  display: inline-flex;
  align-items: center;
  background: var(--paper-3);
  border: 1px solid var(--hair);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
}.chip-mini.num { font-family: var(--mono); }a.chip-mini { text-decoration: none; transition: background 0.15s, border-color 0.15s; }a.chip-mini:hover { background: var(--paper-2); border-color: var(--ink); }.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-strong);
  border: 1px solid var(--ink-strong);
  color: var(--cover) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 100px;
  transition: transform .15s;
}.pill-link:hover { transform: translateY(-1px); }.pill-link svg { width: 11px; height: 11px; opacity: 0.7; }.pill-link__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cover);
}.pill-link.ghost {
  background: transparent;
  color: var(--ink-strong) !important;
  border-color: var(--ink-strong);
}.pill-link.ghost .pill-link__dot { background: var(--ink-strong); }.attribution {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-dim);
  font-family: var(--mono);
}/* ====== CONSENSUS / PROS-CONS BLOCKS ====== */
.consensus, .proscons {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 28px;
  margin-top: 18px;
}.consensus h2, .proscons h2, .related-collections h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  margin: 0 0 10px;
}.consensus-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}.proscons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}.proscons-col {
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}.proscons-col h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink-muted);
  font-weight: 700;
}.proscons-col ul { margin: 0; padding-left: 18px; }.proscons-col li {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}/* Trailer: a YouTube-red pill in the Source row opens a modal player. */
.pill-link--trailer {
  font-family: inherit;
  line-height: 1;
  margin: 0;
  cursor: pointer;
  gap: 6px;
  background: #ff0000;
  border-color: #ff0000;
  color: #fff !important;
}.pill-link--trailer:hover { box-shadow: 0 4px 12px oklch(0.55 0.24 28 / 0.4); }
.pill-link--trailer .yt-glyph { width: 18px; height: 18px; opacity: 1; }
.trailer-modal[hidden] { display: none; }.trailer-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: searchModalIn 160ms ease;
}.trailer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.12 0.02 250 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}.trailer-modal__panel {
  position: relative;
  width: min(960px, 100%);
}.trailer-modal__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}.trailer-modal__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}.trailer-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 100px;
  background: var(--paper-3);
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  transition: background 150ms ease, color 150ms ease;
}.trailer-modal__close:hover { background: var(--ink-strong); color: var(--paper); }
@media (max-width: 980px) {.trailer-modal__close { top: -40px; }}
/* ====== FEED SECTION ====== */
.feed-section { padding: 36px 0 60px; }.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}.chips { display: flex; gap: 4px; flex-wrap: wrap; }.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
}.chip:hover { color: var(--ink-strong); background: var(--paper-3); }.chip[aria-pressed="true"] { background: var(--ink-strong); color: var(--paper); }.chip .dot { width: 6px; height: 6px; border-radius: 50%; }.chip[data-sent="positive"] .dot { background: var(--pos); }.chip[data-sent="mixed"]    .dot { background: var(--mix); }.chip[data-sent="negative"] .dot { background: var(--neg); }.chip[aria-pressed="true"] .dot { background: var(--cover); }.sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted);
  padding-right: 4px;
}.sort select {
  background: var(--paper-3);
  color: var(--ink);
  border: 0;
  border-radius: 100px;
  padding: 7px 26px 7px 12px;
  font: 12px/1 var(--sans);
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}/* ====== REVIEW GROUP (creator + video) ====== */
.review-group {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin: 0;
}.review-group + .review-group { margin-top: 16px; }.review-group-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid var(--hair);
}.review-group-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--paper);
}.review-group-heading { min-width: 0; }.review-group-creator {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0;
}.review-group-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
}.review-group-video, a.review-group-video {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}a.review-group-video:hover { color: var(--ink-strong); }.review-group-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
}.review-group-date:not(:first-child)::before {
  content: "·";
  margin-right: 6px;
  color: var(--ink-dim);
}.review-group-channel {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
}.review-group-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}.review-group-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--paper-3);
  color: var(--ink-strong);
  padding: 4px 10px;
  border-radius: 100px;
}.review-group-verdict {
  position: relative;
  padding: 5px 10px;
  border-radius: 7px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.02em;
  border: 2px solid var(--ink-strong);
  box-shadow: 0 3px 0 var(--ink-strong);
  transform: rotate(-3deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}.review-group-verdict[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.review-group-verdict[data-bucket="meh"] { background: var(--b-meh);  color: var(--paper); }.review-group-verdict[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.review-group-verdict[data-bucket="wow"] { background: var(--b-wow);  color: var(--ink-strong); }.review-group-verdict[data-inferred="1"] {
  background: var(--paper);
  border-style: dashed;
  box-shadow: none;
}.review-group-verdict[data-inferred="1"][data-bucket="shit"] { color: var(--b-shit); }.review-group-verdict[data-inferred="1"][data-bucket="meh"] { color: var(--b-meh); }.review-group-verdict[data-inferred="1"][data-bucket="good"] { color: var(--b-good); }.review-group-verdict[data-inferred="1"][data-bucket="wow"] { color: var(--ink-strong); }.review-group-verdict__ornament {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  background: var(--ink-strong);
  color: var(--b-wow);
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.review-note-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--paper-2);
}.review-note {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 14px 16px;
  border-left: 3px solid var(--hair);
  position: relative;
}.review-note[data-sentiment="positive"] { border-left-color: var(--pos); }.review-note[data-sentiment="mixed"] { border-left-color: var(--mix); }.review-note[data-sentiment="negative"] { border-left-color: var(--neg); }.review-note-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}.review-timestamp {
  font-family: var(--mono);
  font-weight: 700;
  background: var(--paper-3);
  color: var(--ink-strong);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}.review-timestamp::before {
  content: "▶";
  color: var(--ink-strong);
  margin-right: 5px;
  font-size: 8px;
}a.review-timestamp:hover { background: var(--ink-strong); color: var(--cover); }.review-note .quote {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-strong);
  margin: 0 0 10px;
  text-wrap: pretty;
  font-weight: 500;
}.review-note .quote::before {
  content: "\201C";
  font-family: Georgia, serif;
  color: var(--cover);
  text-shadow: -1px 1px 0 var(--ink-strong);
  margin-right: 2px;
  line-height: 0;
  font-size: 1.3em;
  vertical-align: -0.15em;
}.sent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}.sent-chip[data-sent="positive"] { background: var(--pos-soft); color: var(--pos); }.sent-chip[data-sent="mixed"] { background: var(--mix-soft); color: var(--mix); }.sent-chip[data-sent="negative"] { background: var(--neg-soft); color: var(--neg); }.sent-chip[data-sent="neutral"], .sent-chip[data-sent="unknown"] { background: var(--paper-3); color: var(--ink-muted); }.sent-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  background: var(--paper-3);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-weight: 600;
}.tag::before { content: "#"; color: var(--ink-dim); margin-right: 1px; }.review-note-ft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}.cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-strong);
  color: var(--cover) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: transform .15s;
}.cta:hover { transform: translateY(-1px); }.cta svg { width: 11px; height: 11px; }/* Empty state */
.empty {
  background: oklch(1 0 0 / 0.5);
  border: 1px dashed oklch(0 0 0 / 0.2);
  border-radius: var(--r-md);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-muted);
}.empty__big {
  font-size: 14px;
  color: var(--ink-strong);
  font-weight: 600;
  margin-bottom: 6px;
}.empty__sub {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-muted);
  font-weight: 500;
}/* ====== SIDEBAR PANELS ====== */
.panel {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}.panel + .panel { margin-top: 16px; }.panel__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}.panel__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-strong);
  font-weight: 700;
}.panel__hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
}.panel__body { padding: 14px; }.sent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}.sent-tile {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 10px;
}.sent-tile__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-weight: 600;
}.sent-tile__lbl i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  font-style: normal;
}.sent-tile.p i { background: var(--pos); }.sent-tile.m i { background: var(--mix); }.sent-tile.n i { background: var(--neg); }.sent-tile__num {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1;
}.panel__ft {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--hair);
  background: var(--paper-2);
}.panel__ft-note {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}.panel__ft-note b { color: var(--ink-strong); font-weight: 600; }/* ====== STREAMER PREFERENCES ROWS ====== */
.sp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}.sp-empty {
  padding: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
}.sp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--paper);
  transition: background .15s;
}.sp-row:hover { background: var(--paper-3); }.sp-row[data-status="preferred"] { background: var(--cover-tint); border-left: 3px solid var(--cover-deep); padding-left: 7px; }.sp-row[data-status="hidden"] { opacity: 0.6; }.sp-row[data-status="hidden"] .sp-row__name { text-decoration: line-through; text-decoration-color: var(--ink-dim); }.sp-row__id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}.sp-row__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: oklch(0.98 0 0);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}.sp-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.sp-row__meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  font-weight: 600;
  flex-shrink: 0;
}.sp-row__actions {
  display: inline-flex;
  gap: 6px;
}.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}.sp-btn:hover { color: var(--ink-strong); border-color: var(--ink-muted); }.sp-btn__icon { font-size: 11px; line-height: 1; }.sp-btn--prefer.is-active {
  background: var(--cover);
  color: var(--ink-strong);
  border-color: var(--ink-strong);
}.sp-btn--hide.is-active {
  background: var(--ink-strong);
  color: var(--paper);
  border-color: var(--ink-strong);
}/* Side-panel variant: tighter buttons, hide note count to keep name readable. */
.panel .sp-list { gap: 2px; padding: 6px; }
.panel .sp-row { padding: 6px 8px; gap: 6px; }
.panel .sp-row__meta { display: none; }
.panel .sp-btn { padding: 4px 8px; font-size: 10px; gap: 3px; }
.panel .sp-row__avatar { width: 24px; height: 24px; font-size: 10px; }

/* ====== CREATOR AVATAR IMG VARIANT ====== */
/* When a fetched YouTube channel avatar is available the avatar wrapper
   gets `has-img`. Override the colored-initials styles so the <picture> fills
   the circle without distortion. Keep wrapper sizes from the per-context
   rules above (av-mini 18px, sp-row__avatar 28px, review-group-avatar 44px,
   scard__avatar 60px); only the inner image fits. */
.av-mini.has-img,
.sp-row__avatar.has-img,
.review-group-avatar.has-img,
.scard__avatar.has-img,
.bsticker__avatar.has-img {
  padding: 0;
  background: transparent;
  display: inline-block;
  overflow: hidden;
}
.av-mini.has-img picture,
.sp-row__avatar.has-img picture,
.review-group-avatar.has-img picture,
.scard__avatar.has-img picture,
.bsticker__avatar.has-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.av-mini.has-img img,
.sp-row__avatar.has-img img,
.review-group-avatar.has-img img,
.scard__avatar.has-img img,
.bsticker__avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Streamer verdicts: small circular creator avatar between verdict + name. */
.bsticker__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--paper);
  border: 2px solid var(--ink-strong);
  box-shadow: 0 2px 0 var(--ink-strong);
  margin-top: 2px;
}

/* ====== SETTINGS PAGE ====== */
.settings-page { display: flex; flex-direction: column; gap: 18px; }.settings-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 28px;
}.settings-card h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}.settings-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 14px;
}.settings-howto {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}.settings-howto li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 12px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}.settings-howto__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  justify-self: start;
  white-space: nowrap;
}.settings-howto__chip--prefer { background: var(--cover); color: var(--ink-strong); border: 1px solid var(--ink-strong); }.settings-howto__chip--hide { background: var(--ink-strong); color: var(--paper); }.settings-howto__chip--default { background: var(--paper-3); color: var(--ink-muted); border: 1px solid var(--hair); }.sp-cookie-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-strong);
  background: transparent;
  border: 1px solid var(--ink-strong);
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, color .15s;
}.sp-cookie-btn:hover { background: var(--ink-strong); color: var(--cover); }.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 14px;
  text-wrap: pretty;
}/* ====== RELATED ====== */
.related-collections {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 28px;
  margin-top: 18px;
}.related-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}.related-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}.related-row a.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--paper-3);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-strong);
}.related-row a.pill:hover { background: var(--cover); }/* ====== FOOTER ====== */
.site-footer {
  padding: 36px 0 36px;
  color: var(--ink-strong);
  font-size: 12px;
  margin-top: 56px;
  border-top: 1px solid oklch(0 0 0 / 0.12);
}.site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}.footer-brand {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  opacity: 0.7;
}.footer-legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}.footer-legal-links a, .footer-legal-links button {
  color: var(--ink-strong);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  opacity: 0.7;
  font-weight: 600;
}.footer-legal-links a:hover, .footer-legal-links button:hover { opacity: 1; }.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
}.footer-socials a {
  color: var(--ink-strong);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  transition: opacity 120ms;
}.footer-socials a:hover { opacity: 1; }.footer-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}/* ====== LEGAL PAGES ====== */
.legal-page {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  max-width: 820px;
  margin: 24px auto 56px;
  padding: 40px 44px;
  line-height: 1.65;
  color: var(--ink);
}.legal-page h1 {
  font-family: var(--display);
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink-strong);
}.legal-page .legal-meta {
  color: var(--ink-muted);
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 12px;
}.legal-page h2 {
  margin-top: 32px;
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink-strong);
}.legal-page ul { padding-left: 22px; }.legal-page li + li { margin-top: 6px; }/* ====== SEARCH MODAL ====== */
/* ====== STREAMER FAB + MOBILE MODAL ====== */
.streamer-fab { display: none; position: fixed; bottom: 18px; right: 18px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--cover); color: var(--ink-strong); border: 2.5px solid var(--ink-strong); box-shadow: 0 4px 0 var(--ink-strong), var(--shadow-md); align-items: center; justify-content: center; cursor: pointer; }
.streamer-fab:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink-strong); }
.streamer-fab__count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink-strong); color: var(--cover); font: 700 11px/20px var(--mono); text-align: center; border: 2px solid var(--paper); }
.panel__hd-right { display: flex; align-items: center; gap: 8px; }
.panel__close { display: none; background: none; border: 0; padding: 2px; color: var(--ink-muted); cursor: pointer; line-height: 0; }
.panel__close:hover { color: var(--ink-strong); }
.streamer-backdrop { display: none; }
@keyframes streamerSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.search-modal[hidden] { display: none; }.search-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
  animation: searchModalIn 160ms ease;
}.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.12 0.02 250 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}.search-modal__panel {
  position: relative;
  width: min(640px, 100%);
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}.search-modal__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hair);
}.search-modal__head > svg { color: var(--ink-dim); }.search-modal__head input {
  border: 0;
  background: transparent;
  font: 600 18px/1.2 var(--display);
  color: var(--ink-strong);
  outline: none;
  height: 36px;
  width: 100%;
}.search-modal__head input::placeholder { color: var(--ink-dim); font-weight: 500; }.search-modal__close {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: var(--paper-3);
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  transition: background 150ms ease, color 150ms ease;
}.search-modal__close:hover { background: var(--ink-strong); color: var(--paper); }.search-modal__heading {
  padding: 14px 22px 6px;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  text-transform: uppercase;
}.search-modal__results {
  list-style: none;
  margin: 0;
  padding: 6px 8px 14px;
  overflow-y: auto;
}.search-modal__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--ink-strong);
  cursor: pointer;
}.search-modal__row:hover, .search-modal__row[aria-selected="true"] {
  background: var(--paper-3);
}.search-modal__thumb {
  width: 44px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-3);
  position: relative;
  flex: 0 0 44px;
}.search-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.search-modal__thumb__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 10px var(--mono);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px;
}.search-modal__name {
  font: 600 15px/1.25 var(--sans);
  color: var(--ink-strong);
}.search-modal__sub {
  font: 500 11px/1 var(--mono);
  color: var(--ink-dim);
  margin-top: 5px;
  letter-spacing: 0.04em;
}.search-modal__bucket {
  padding: 4px 9px;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.01em;
  border: 1.5px solid var(--ink-strong);
  box-shadow: 0 2px 0 var(--ink-strong);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
}.search-modal__bucket[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.search-modal__bucket[data-bucket="meh"] { background: var(--b-meh);  color: var(--paper); }.search-modal__bucket[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.search-modal__bucket[data-bucket="wow"] { background: var(--b-wow); color: var(--ink-strong); }.search-modal__bucket[data-inferred="1"] {
  background: transparent !important;
  border-style: dashed;
  box-shadow: none;
  color: var(--ink-strong) !important;
}.hero-avg__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.01em;
  border: 2px solid var(--ink-strong);
  box-shadow: 0 2px 0 var(--ink-strong);
  position: relative;
}.hero-avg__chip[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }.hero-avg__chip[data-bucket="meh"] { background: var(--b-meh); color: var(--paper); }.hero-avg__chip[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }.hero-avg__chip[data-bucket="wow"] { background: var(--b-wow); color: var(--ink-strong); }.hero-avg__chip--empty {
  background: var(--paper-3);
  color: var(--ink-muted);
  border-color: var(--hair);
  box-shadow: none;
}.search-modal__empty {
  padding: 36px 24px 44px;
  text-align: center;
  color: var(--ink-dim);
  font: 500 14px var(--sans);
}body.modal-open { overflow: hidden; }
@keyframes searchModalIn {from { opacity: 0; }to { opacity: 1; }}

/* ====== MOBILE ====== */
@media (max-width: 980px) {.site-header { padding: 0 10px; margin-top: 8px; top: 8px; }.site-header__inner { grid-template-columns: auto 1fr; gap: 10px; height: 52px; padding: 0 6px 0 14px; }.brand { font-size: 15px; gap: 6px; }.brand__mark { width: 44px; height: 44px; }.nav { display: none; }.search input { height: 34px; padding: 0 12px 0 32px; font-size: 12px; }.search svg { left: 11px; }.rail { font-size: 10px; }.rail__inner { height: 28px; padding: 0 14px; gap: 12px; overflow-x: auto; scrollbar-width: none; }.rail__inner::-webkit-scrollbar { display: none; }.wrap { padding: 0 12px; }.hero-home { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }.hero-home__main { padding: 32px 24px 28px; }h1.hero-home__h1 { font-size: clamp(36px, 9vw, 56px); }.hero-home__intro { font-size: 15px; margin-bottom: 22px; }.hero-home__side { padding: 24px; }.hero-home__side__grid { grid-template-columns: 1fr 1fr; }.hub { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; top: 8px; }.hub::-webkit-scrollbar { display: none; }.hub a { white-space: nowrap; }.hub__brand__txt { display: none; }.hub__search { position: sticky; right: 4px; }.search-modal { padding: 24px 12px 12px; }.search-modal__panel { max-height: calc(100vh - 48px); }.search-modal__head input { font-size: 16px; }.section { padding-top: 36px; }.section + .section { padding-top: 24px; }.section-head h2 { font-size: 26px; }.about { padding: 24px; }.faq-item summary { padding: 18px 20px; }.faq-item__a { padding: 0 20px 18px; font-size: 13.5px; }.faq-item__q { font-size: 16px; }.detail-hero { grid-template-columns: 1fr; margin-top: 14px; }.cover { aspect-ratio: auto; width: 100%; height: 42vh; min-height: 260px; max-height: none; }.cover img { object-position: 50% 30%; }.cover::after { top: auto; right: 0; left: 0; bottom: 0; width: auto; height: 1px; }.intel { padding: 22px 20px 20px; }h1.intel__title { font-size: clamp(36px, 11vw, 56px); margin-bottom: 12px; }.intel__byline { font-size: 13px; margin-bottom: 18px; }.statbar { grid-template-columns: auto 1fr; gap: 16px; padding: 14px; }.bucket-hero { width: 132px; min-height: 132px; padding: 12px; }.bucket-hero__word { font-size: 44px; }.ms-row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }.ms-k { padding-top: 0; }.pill-link { padding: 6px 11px; font-size: 11px; }.main { grid-template-columns: 1fr; gap: 16px; }.feed-section { padding: 24px 0 40px; }.section-head { margin-bottom: 16px; }.review-group-header { padding: 14px 16px; }.review-note-list { padding: 12px; }.legal-page { padding: 28px 22px; margin: 16px auto 40px; }}

@media (max-width: 980px) {
  .main > aside { order: -1; }
  .panel--streamers { display: none; }
  .streamer-fab { display: inline-flex; }
  .streamer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 110; background: oklch(0.12 0.02 250 / 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .panel--streamers.is-open { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 111; max-height: 82vh; border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); animation: streamerSheetIn 200ms ease; }
  .panel--streamers.is-open .panel__hd, .panel--streamers.is-open .panel__ft { flex: 0 0 auto; }
  .panel--streamers.is-open .panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .panel--streamers .panel__close { display: inline-flex; align-items: center; }
}
@media (max-width: 420px) {h1.intel__title { font-size: 42px; }.statbar { grid-template-columns: 1fr; text-align: left; }.bucket-hero { width: 100%; margin: 0 auto; transform: none; }.bsticker-grid { grid-template-columns: repeat(2, 1fr); }}/* ====== BROWSE / FILTER PAGE ====== */
.browse__head {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
}.browse__head h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  color: var(--ink-strong);
}.browse__head .lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 64ch;
}.browse__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--ink-line, oklch(0 0 0 / 0.10));
  border-radius: 14px;
  margin: 0 0 14px;
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.04);
}.browse__filters > .filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}.browse__filters .filter > span:first-child {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}.browse__filters input[type="search"], .browse__filters select {
  font: inherit;
  font-size: 13px;
  color: var(--ink-strong);
  background: var(--paper-3);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 0;
  transition: background 120ms, border-color 120ms;
}.browse__filters input[type="search"]:focus, .browse__filters select:focus {
  background: var(--paper);
  border-color: var(--ink-strong);
  outline: none;
}.filter--search input[type="search"] { width: clamp(180px, 26vw, 280px); }.filter--range input[type="range"] { width: 140px; }.filter--range output, .filter--range [data-filter-range-out] {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-strong);
  min-width: 1.6em;
  text-align: right;
}.filter--verdict__out {
  display: inline-block;
  min-width: 56px;
  padding: 2px 8px;
  border-radius: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}.filter--verdict__out[data-bucket="any"] { background: var(--paper-3); color: var(--ink-strong); border-color: var(--ink-strong); }
.filter--verdict__out[data-bucket="shit"] { background: var(--b-shit); color: var(--paper); }
.filter--verdict__out[data-bucket="meh"] { background: var(--b-meh); color: var(--paper); }
.filter--verdict__out[data-bucket="good"] { background: var(--b-good); color: var(--ink-strong); }
.filter--verdict__out[data-bucket="wow"] { background: var(--b-wow); color: var(--ink-strong); }
.filter--multi > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--paper-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  user-select: none;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}.filter--multi > summary::-webkit-details-marker { display: none; }.filter--multi > summary::after {
  content: "▾";
  font-size: 10px;
  margin-left: 2px;
  color: var(--ink-dim);
}.filter--multi[open] > summary { background: var(--paper); border-color: var(--ink-strong); }.filter--multi .filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cover);
  color: var(--ink-strong);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}.filter--multi .filter__badge[hidden] { display: none; }.filter__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--ink-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.14);
}.filter__menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}.filter__menu label:hover { background: var(--paper-3); color: var(--ink-strong); }.filter__menu input[type="checkbox"] { accent-color: var(--ink-strong); }.filter__reset {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}.filter__reset:hover { background: var(--paper-3); color: var(--ink-strong); border-color: var(--ink-strong); }.browse__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}.browse__status [data-browse-count] { color: var(--ink-strong); font-weight: 600; }.browse__empty {
  grid-column: 1 / -1;
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-dim);
  background: var(--paper);
  border: 1px dashed var(--ink-line, oklch(0 0 0 / 0.10));
  border-radius: 12px;
}.browse__empty__reset {
  font: inherit;
  font-weight: 600;
  color: var(--ink-strong);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 820px) {.browse__filters { padding: 12px; gap: 8px; }.filter--search input[type="search"] { width: 100%; }.filter--search { flex: 1 1 100%; }.filter__reset { margin-left: 0; }}.filter--toggle {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--paper-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
  user-select: none;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}.filter--toggle:hover { border-color: var(--ink-strong); }.filter--toggle input[type="checkbox"] { accent-color: var(--ink-strong); margin: 0; }.filter--toggle:has(input:checked) { background: var(--ink-strong); color: var(--cover); border-color: var(--ink-strong); }.filter--toggle:has(input:checked) input[type="checkbox"] { accent-color: var(--cover); }/* ====== PRE-RELEASE CHIP + BANNER ====== */
.gcard__pre {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--neg);
  color: #fff;
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.30);
}.prerelease-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--neg);
  color: var(--paper);
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.10);
}.prerelease-banner__chip {
  flex: 0 0 auto;
  background: var(--cover);
  color: var(--ink-strong);
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}.prerelease-banner__body { font-size: 14px; line-height: 1.5; }.prerelease-banner__body b { color: var(--cover); font-weight: 700; }
@media (max-width: 820px) {.prerelease-banner { flex-direction: column; align-items: flex-start; padding: 14px; gap: 8px; }}