/* Clutch Radar: design system and layout */

@font-face {
  font-family: "Saira";
  src: url("/fonts/saira.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Night violet base, one signal red. Never pure black. */
  --bg: #14131d;
  --bg-raised: #1a1927;
  --panel: #211f31;
  --line: #2f2d44;
  --line-strong: #4a4766;
  --text: #f2f0f8;
  --muted: #a19fb8;
  --red: #ff2a55;
  --red-deep: #c4153c;
  --red-glow: rgba(255, 42, 85, 0.35);

  --display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Side margin; on very wide screens the content stays in a centred column */
  --gutter: max(clamp(16px, 4vw, 56px), calc((100vw - 3200px) / 2));
  --card-w: clamp(220px, 21vw, 300px);
  --poster-w: clamp(150px, 13vw, 210px);
  --radius: 6px;
}

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

html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}

/* Anything the scripts hide stays hidden, even when its class sets display: grid or flex. Without this the
   category tiles on the browse pages stayed on screen above the chosen category's channels. */
[hidden] {
  display: none !important;
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  letter-spacing: 0.04em;
}

.brand svg {
  width: clamp(42px, 3.2vw, 54px);
  height: clamp(42px, 3.2vw, 54px);
  flex: none;
}

.nav {
  display: flex;
  gap: clamp(0.9rem, 2.4vw, 2rem);
  font-size: 0.92rem;
}

.nav a,
.nav span {
  color: var(--muted);
  transition: color 0.15s;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a[aria-current="page"] {
  box-shadow: 0 2px 0 var(--red);
  padding-bottom: 4px;
}

.nav .soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: default;
  opacity: 0.65;
}

.nav .soon small {
  font-size: 0.68rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
}

/* The burger button at the end of the menu. The auto margin keeps the links and the button together on the right. */
.topbar .nav {
  margin-left: auto;
}

.nav-burger {
  flex: none;
  display: grid;
  place-content: center;
  gap: 4px;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: -0.4rem;
  padding: 0;
  background: rgba(20, 19, 29, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s;
}

.nav-burger span {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.nav-burger:hover,
.nav-burger:focus-visible,
.nav-burger[aria-expanded="true"] {
  border-color: var(--red);
}

/* The full-screen menu (nav.js): logo and close button, the search box, then every section */
.site-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 1.1rem var(--gutter) 2.5rem;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(255, 42, 85, 0.16), transparent 70%),
    rgba(20, 19, 29, 0.98);
  color: var(--text);
  border: 0;
}

.site-menu::backdrop {
  background: rgba(10, 9, 16, 0.7);
}

.site-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-menu-close {
  width: 2.6rem;
  height: 2.6rem;
  background: none;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
}

.site-menu-close:hover,
.site-menu-close:focus-visible {
  border-color: var(--red);
}

.site-menu-search {
  max-width: 44rem;
  margin: 2rem 0 1.6rem;
}

.site-menu-search input {
  width: 100%;
  padding: 0.85rem 0.2rem;
  background: none;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  font: inherit;
  font-size: 1.25rem;
}

.site-menu-search input:focus {
  outline: none;
  border-bottom-color: var(--red);
}

.site-menu-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.3rem 2rem;
  max-width: 64rem;
}

/* "Buy me a coffee" at the bottom of the menu: an outlined pill, quieter than the sections */
.site-menu-coffee {
  display: inline-block;
  margin: 1.6rem 0 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}

.site-menu-coffee:hover,
.site-menu-coffee:focus-visible {
  color: var(--text);
  border-color: var(--red);
}

.site-menu-link {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.site-menu-link strong {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  transition: color 0.15s;
}

.site-menu-link span {
  color: var(--muted);
  font-size: 0.86rem;
}

.site-menu-link:hover strong,
.site-menu-link:focus-visible strong,
.site-menu-link[aria-current="page"] strong {
  color: var(--red);
}

/* ---------- The logo animation ----------
   The dot orbits the inner ring and two sonar "pings" spread out from it, like the logo video.
   Plain CSS on the SVG, so it is tiny and sharp at every size. Stops for prefers-reduced-motion. */

.logo-orbit {
  transform-origin: 16px 16px;
  animation: logo-orbit 6s linear infinite;
}

.logo-ping {
  transform-origin: 16px 16px;
  opacity: 0;
  animation: logo-ping 3s ease-out infinite;
}

.logo-ping--late {
  animation-delay: 1.5s;
}

.logo-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-dot 3s ease-in-out infinite;
}

@keyframes logo-orbit {
  to { transform: rotate(360deg); }
}

@keyframes logo-ping {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(2.1); opacity: 0; }
}

@keyframes logo-dot {
  0%, 30%, 100% { transform: scale(1); }
  12% { transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-orbit,
  .logo-ping,
  .logo-dot {
    animation: none;
  }
}

/* On phones the front page shows only the big hero logo; the small one in the menu would sit right above it */
@media (max-width: 720px) {
  .home .topbar .brand {
    display: none;
  }
}

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

.hero {
  position: relative;
  /* The same height as the "#1" spotlight hero, from the first moment: the spotlight only fills in once its
     data has loaded, and a growing hero would push the whole page down (a layout shift, CLS) */
  min-height: clamp(520px, 74vh, 780px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 34% 70% at 76% 58%, rgba(255, 42, 85, 0.22) 0%, transparent 72%),
    radial-gradient(ellipse 60% 80% at 70% 50%, #2d2548 0%, transparent 70%),
    var(--bg);
}

.hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Keeps the title readable and melts the banner into the rows below */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(20, 19, 29, 0.78) 28%, transparent 62%),
    linear-gradient(180deg, transparent 62%, var(--bg) 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: calc(44rem + var(--gutter) + 16px);
  padding: clamp(7rem, 17vh, 9.5rem) 16px 5.5rem var(--gutter);
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-stretch: 125%;
  font-size: clamp(2.7rem, 7.2vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
}

.hero-rule {
  width: 4.5rem;
  height: 2px;
  margin: 1.6rem 0 1.3rem;
  background: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
}

.lede {
  margin: 0;
  max-width: 28rem;
  color: #d3d0e4;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  margin: 1.8rem 0 0;
  padding: 0;
}

.facts div {
  min-width: 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--red);
}

.facts dt {
  font-size: 0.8rem;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 500;
  font-size: 1.3rem;
}

/* Streamers placed on the map as waypoints */

.waypoints {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 3200px); /* same column the canvas uses for the map */
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  transform: translate(16px, -50%);
  max-width: 13rem;
}

.wp--left {
  transform: translate(calc(-100% - 16px), -50%);
  text-align: right;
}

.wp a {
  display: block;
  padding: 0.3rem 0.6rem;
  background: rgba(20, 19, 29, 0.72);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  font-size: 0.82rem;
  line-height: 1.25;
  transition: border-color 0.15s, background 0.15s;
}

.wp--left a {
  border-left-width: 1px;
  border-right: 2px solid var(--red);
}

.wp a:hover {
  background: rgba(33, 31, 49, 0.92);
  border-color: var(--red);
}

.wp strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp span {
  color: var(--muted);
  font-size: 0.74rem;
}

/* ---------- Spotlight hero: the #1 channel right now ---------- */

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

.spot {
  display: none;
}

.hero--spot {
  min-height: clamp(520px, 74vh, 780px);
  background: var(--bg);
}

/* Dark fade behind the menu so it stays readable on any picture */
.hero--spot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 16, 0.92) 0%, rgba(10, 9, 16, 0.55) 55%, transparent 100%);
}

.hero--spot::after {
  background: linear-gradient(90deg, rgba(20, 19, 29, 0.6) 0%, transparent 55%);
}

.hero--spot canvas,
.hero--spot .hero-copy,
.hero--spot .waypoints {
  display: none;
}

.hero--spot .spot {
  display: block;
}

.spot-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(76%, 2300px);
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 62%, transparent 100%);
  mask-composite: intersect;
}

.spot-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) brightness(0.88);
}

/* A red glow where the picture meets the page */
.spot-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 70% at 100% 100%, rgba(255, 42, 85, 0.28), transparent 70%);
}

.spot-copy {
  position: relative;
  z-index: 2;
  max-width: calc(42rem + var(--gutter));
  padding: clamp(9rem, 24vh, 13rem) 16px 6rem var(--gutter);
}

.spot-rank {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 500;
  font-size: 1.1rem;
}

.spot-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.5rem;
  background: var(--red);
  border-radius: 4px;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: 0 0 18px var(--red-glow);
}

.spot-title {
  margin: 0;
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}

.spot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 1.1rem 0 0;
  font-weight: 600;
}

.spot-meta .spot-viewers {
  color: var(--red);
}

.spot-meta span:not(.spot-viewers) {
  color: #d3d0e4;
}

.spot-desc {
  margin: 0.8rem 0 0;
  max-width: 34rem;
  color: #d3d0e4;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Read the full story" under a cut description (title pages) */
.spot-more {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--red);
  font-weight: 700;
  font-size: 0.95rem;
}

/* The whole story above the Details tiles; #t-story keeps clear of the top bar when jumped to */
.title-story {
  max-width: 48rem;
  margin: 0 0 1.2rem;
  color: #d3d0e4;
  font-size: 1.05rem;
  line-height: 1.6;
  scroll-margin-top: 6rem;
}

.spot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background: rgba(109, 109, 130, 0.5);
  font-weight: 700;
  transition: background 0.15s, box-shadow 0.15s;
}

.btn:hover {
  background: rgba(130, 130, 155, 0.6);
}

.btn--primary {
  background: var(--red);
  box-shadow: 0 0 22px var(--red-glow);
}

.btn--primary:hover {
  background: #ff4a6e;
}

/* ---------- One fixed hero height (no layout shift) ----------
   Pages with a "#1" spotlight keep the same hero height before and after its data arrives, so the rows below
   never move (Cloudflare measured layout shifts, CLS, on #rows). The spotlight text sits at the bottom of the
   hero; the title is cut to two lines (the description already to three), so it always fits. */
.page-hero,
.hero#top {
  height: clamp(520px, 74vh, 780px);
}

/* The text block starts below the top bar and stacks from the bottom up. If it is ever taller than the room
   (a short laptop screen), the top of it is cut off instead of running over the logo and menu. */
.hero--spot .spot-copy {
  position: absolute;
  top: 5.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 0;
}

.hero--spot .spot-copy > * {
  flex-shrink: 0;
}

/* The title also shrinks with the screen height, so it fits on laptops with a wide but low screen,
   and one long word ("Thunderbolts*") stays on one line */
.hero--spot .spot-title {
  font-size: clamp(2.6rem, min(6.5vw, 10vh), 7rem);
  overflow-wrap: normal;
}

.hero--spot .spot-title.spot-title--long {
  font-size: clamp(2rem, min(4.6vw, 7vh), 4.2rem);
}

@media (max-height: 820px) and (min-width: 721px) {
  .hero--spot .spot-desc {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .hero--spot .spot-copy {
    padding-bottom: 4.5rem;
  }
}

.spot-title {
  display: -webkit-box;
  overflow: hidden;
  padding-bottom: 0.08em; /* room for letters like g and y */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 720px) {
  .page-hero,
  .hero#top {
    height: clamp(540px, 82vh, 640px);
  }

  .hero--spot .spot-copy {
    padding-bottom: 3.5rem;
  }

  .hero--spot .spot-title {
    overflow-wrap: anywhere;
  }
}

/* ---------- Rows ---------- */

main {
  position: relative;
  z-index: 3;
  margin-top: -3.2rem;
  padding-bottom: 4rem;
  /* At least one screen tall, so the footer starts below the screen. Before, the footer showed near the top
     while the rows were still loading and then jumped down, which Google counts as a layout shift (CLS). */
  min-height: 100vh;
}

.row {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

.row-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  margin-bottom: 0.8rem;
}

.row-head h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: 0.01em;
}

/* A red bar marks where each row starts */
.row-head h2::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.15em;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
}

.row-head p {
  margin: 0.1rem 0 0 calc(4px + 0.7rem);
  color: var(--muted);
  font-size: 0.86rem;
}

.scroll-btns {
  display: flex;
  gap: 0.4rem;
}

.scroll-btns[hidden] {
  display: none;
}

.scroll-btns button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.scroll-btns button:hover:not(:disabled) {
  border-color: var(--red);
  background: var(--bg-raised);
}

.scroll-btns button:disabled {
  opacity: 0.3;
  cursor: default;
}

.scroll-btns svg {
  width: 16px;
  height: 16px;
}

.track {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
  padding: 1rem var(--gutter) 1.6rem;
  list-style: none;
  overflow-x: auto;
  /* Sideways only. Without this the row also became a tiny up-and-down scroll area (its content is a bit taller
     on hover and in the Top 10), which caught the mouse wheel so the page seemed stuck over the row. */
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.track::-webkit-scrollbar {
  display: none;
}

.track > li {
  flex: none;
  scroll-snap-align: start;
}

/* ---------- Stream card ---------- */

.card {
  position: relative;
  display: block;
  width: var(--card-w);
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.card:focus-visible {
  z-index: 5;
  transform: translateY(-6px) scale(1.04);
  border-color: var(--red);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--red-glow);
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, hsl(var(--hue) 40% 24%), hsl(calc(var(--hue) + 40) 45% 14%));
}

.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.5rem;
  background: var(--red);
  color: #fff;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.viewers {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0.1rem 0.5rem;
  background: rgba(20, 19, 29, 0.82);
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
}

.card-body {
  padding: 0.65rem 0.8rem 0.8rem;
}

.card-body strong {
  display: block;
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 600;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-body .game {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Extra detail that opens when a card is hovered or focused */
.detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.card:hover .detail,
.card:focus-visible .detail {
  grid-template-rows: 1fr;
}

.detail > div {
  overflow: hidden;
  min-height: 0;
}

.detail p {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: #d3d0e4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail small {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.76rem;
}

/* ---------- Ranked card (top 10) ---------- */

.ranked {
  /* The numbers grow with the card next to them, so they never look squeezed between big cards */
  --rank-size: calc((var(--card-w) * 9 / 16 + 4.3rem) * 0.9);
  display: flex;
  align-items: flex-start; /* the card grows downward on hover, like in the other rows */
}

.rank {
  flex: none;
  /* A gap to the card. The padding keeps the outline of wide digits like 7 from
     reaching past its box, where the card would cover it. */
  margin-right: clamp(0.35rem, 0.8vw, 0.8rem);
  padding-right: 0.06em;
  /* sits at the bottom of the card as it looks at rest (thumbnail + name/game lines) */
  margin-top: calc(var(--card-w) * 9 / 16 + 4.3rem + 2px - 0.8 * var(--rank-size) - 0.4rem);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--rank-size);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 42, 85, 0.5);
  pointer-events: none;
  user-select: none;
}

/* Room between a number and the card before it */
.ranked + .ranked .rank {
  margin-left: clamp(0.6rem, 1.4vw, 1.4rem);
}

.ranked:first-child .rank {
  -webkit-text-stroke-color: var(--red);
  -webkit-text-stroke-width: 3px;
  filter: drop-shadow(0 0 14px var(--red-glow));
}

.ranked .card {
  position: relative;
  z-index: 1;
}

/* ---------- Game tile ---------- */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: clamp(170px, 15vw, 220px);
  aspect-ratio: 3 / 4;
  padding: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 30) 50% 14%));
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* The game's cover image fills the tile; a dark fade keeps the name readable */
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 19, 29, 0.94) 100%);
}

.tile strong,
.tile span {
  position: relative;
  z-index: 1;
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-6px) scale(1.04);
  border-color: var(--red);
}

.tile strong {
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile span {
  margin-top: 0.35rem;
  color: #d3d0e4;
  font-size: 0.82rem;
}

/* "More info" on cards that open our own page: shown on hover, always on touch screens (they have no hover) */
.tile .more-hint,
.thumb .more-hint {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  margin: 0;
  padding: 0.2rem 0.6rem;
  background: rgba(20, 19, 29, 0.85);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.card:hover .more-hint,
.card:focus-visible .more-hint,
.tile:hover .more-hint,
.tile:focus-visible .more-hint {
  opacity: 1;
}

@media (hover: none) {
  .tile .more-hint,
  .thumb .more-hint {
    opacity: 0.9;
  }
}

/* ---------- Movie poster tile (2:3) ---------- */

.tile--poster {
  width: var(--poster-w);
  aspect-ratio: 2 / 3;
}

/* The description opens on hover and pushes the title up */
.tile .detail {
  position: relative;
  z-index: 1;
}

.tile:hover .detail,
.tile:focus-visible .detail {
  grid-template-rows: 1fr;
}

.tile .detail p {
  -webkit-line-clamp: 5;
}

/* Darker fade while the description is open, so it stays readable on any poster */
.tile--poster:hover::after,
.tile--poster:focus-visible::after {
  background: linear-gradient(180deg, rgba(20, 19, 29, 0.25) 0%, rgba(20, 19, 29, 0.96) 60%);
}

/* Top 10 numbers sit at the bottom of the poster */
.ranked--poster {
  --rank-size: clamp(6rem, 11vw, 9.5rem);
}

.ranked--poster .rank {
  margin-top: calc(var(--poster-w) * 1.5 - 0.8 * var(--rank-size) - 0.4rem);
}

/* ---------- News headlines ---------- */

.news-meta {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

/* ---------- Tonight: match and stream cards ---------- */

.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
  padding: 1rem var(--gutter) 1.6rem;
  list-style: none;
}

.event {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 0.9rem 1rem;
  background: rgba(33, 31, 49, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}

a.event:hover,
a.event:focus-visible {
  background: var(--panel);
  border-color: var(--red);
}

.event-top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.event-time {
  flex: none; /* the time never wraps; the game tag shrinks instead */
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--red);
}

.event-tag {
  min-width: 0;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  text-align: center;
}

.team strong,
.event-channel strong {
  max-width: 100%;
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-vs {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.85rem;
}

.team-logo {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 32%), hsl(calc(var(--hue) + 40) 45% 16%));
  font-family: var(--display);
  font-weight: 700;
}

/* Team logos are drawn for light backgrounds, so they get a soft light circle (not the letter fallback) */
.team .team-logo:has(img) {
  background: #e9e7f2;
  padding: 0.35rem;
}

.team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-channel .team-logo img {
  object-fit: cover;
}

.event-channel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

/* The league's logo and name on a match card (the "match picture") */
.event-league {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.event-league-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.3rem;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 32%), hsl(calc(var(--hue) + 40) 45% 16%));
  font-family: var(--display);
  font-weight: 700;
}

/* League logos are drawn for light backgrounds too */
.event-league-logo:has(img) {
  background: #e9e7f2;
}

.event-league-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-league div {
  min-width: 0;
}

.event-league strong,
.event-league span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-league strong {
  font-family: var(--display);
  font-size: 0.95rem;
}

.event-league span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* The esports filters: a search box without the magnifier icon, then the buttons */
.esports-search {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.esports-search input {
  padding-left: 1.2rem;
  text-align: left;
  font-size: 1rem;
}

.row[hidden] {
  display: none;
}

.event-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-watch {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Twitch page extras: notes on cards, clip badges ---------- */

.card-body .card-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
}

.badge--clip {
  background: rgba(20, 19, 29, 0.85);
  border: 1px solid var(--line-strong);
}

.badge--clip::before {
  display: none;
}

/* ---------- YouTube: channel pictures, play icon and the player window ---------- */

.yt-by {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.yt-avatar {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* A round play button that appears on a video card's picture on hover */
.play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding-left: 0.2rem;
  transform: translate(-50%, -50%) scale(0.8);
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--red-glow);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.card:hover .play-icon,
.card:focus-visible .play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.player-dialog {
  width: min(94vw, 1100px);
  max-height: 94vh;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

.player-dialog::backdrop {
  background: rgba(10, 9, 16, 0.86);
  backdrop-filter: blur(4px);
}

.player-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.player-dialog-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.25;
}

.player-close {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
}

.player-close:hover {
  border-color: var(--red);
}

.player-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.8rem;
}

.player-dialog-foot p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------- "Share stats" on channel pages (share-card.js) ---------- */

/* These .btn are <button>s: without the browser's own border and font they look like the links beside them */
.channel-head button.btn,
.hub-links button.btn,
.share-actions button.btn {
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.channel-head button.btn:disabled,
.hub-links button.btn:disabled,
.share-actions button.btn:disabled,
.share-actions a.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.share-dialog {
  width: min(94vw, 780px);
  overflow-y: auto;
}

.share-lede {
  margin: -0.3rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.share-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.share-format {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.share-format small {
  color: var(--muted);
  font-size: 0.78rem;
}

.share-format:hover,
.share-format[aria-pressed="true"] {
  border-color: var(--red);
}

.share-format[aria-pressed="true"] {
  background: rgba(255, 42, 85, 0.16);
}

/* Phones: the two shapes side by side, with the hint under the name */
@media (max-width: 480px) {
  .share-formats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .share-format {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    border-radius: 12px;
  }
}

.share-preview {
  display: grid;
  place-items: center;
  padding: clamp(0.4rem, 1.5vw, 0.8rem);
  background: #0e0d15;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* The picture is drawn at full size (1200 or 1080 wide) and shown smaller, keeping its shape */
.share-preview canvas {
  display: block;
  max-width: 100%;
  max-height: 56vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.share-preview.is-busy canvas {
  opacity: 0.45;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.share-actions .btn {
  padding: 0.6rem 1.1rem;
}

.share-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* The hidden field "Copy link" uses in browsers that refuse the modern clipboard */
.share-copy-field {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- Movie and TV pages ---------- */

.spot-copy .channel-tags {
  margin-bottom: 0.8rem;
}

/* The country picker next to "Where to watch in ..." */
.watch-country {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.watch-country select {
  max-width: 13rem;
  padding: 0.45rem 0.7rem;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9rem;
}

.watch-country select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .channel-section .row-head:has(.watch-country) {
    flex-direction: column;
    align-items: start;
  }
}

/* Where to watch: groups of streaming service logos */
.provider-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  margin: 0.4rem 0 1rem;
}

.provider-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.providers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  background: rgba(33, 31, 49, 0.85);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.88rem;
}

.provider-logo {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
}

/* The services are buttons now: a click opens the "watch on ..." popup */
button.provider {
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

button.provider:hover,
button.provider:focus-visible {
  background: var(--panel);
  border-color: var(--red);
}

.watch-dialog {
  width: min(94vw, 30rem);
}

.watch-who {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.watch-who .provider-logo {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 10px;
}

.watch-how {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.watch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.2rem 0 0.9rem;
}

.watch-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.player.trailer {
  max-width: 900px;
}

.kpi-value--small {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.3;
}

/* Cast: a photo with the name and role under it */
.person {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: clamp(120px, 10vw, 150px);
}

.person-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  margin-bottom: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 30) 50% 14%));
  font-family: var(--display);
  font-weight: 700;
  font-size: 2rem;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

.person span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.25;
}

/* ---------- Channel page ---------- */

.channel-id {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.channel-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(72px, 9vw, 112px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--hue, 300) 45% 32%), hsl(calc(var(--hue, 300) + 40) 45% 16%));
  box-shadow: 0 0 24px var(--red-glow);
  font-family: var(--display);
  font-weight: 700;
  font-size: 2rem;
}

.channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel-names {
  min-width: 0;
}

.channel-names h1 {
  overflow-wrap: break-word; /* only breaks a name that cannot fit on a line at all */
}

/* Phones: the avatar above the name, and a smaller name, so it fits on one line */
@media (max-width: 600px) {
  .channel-id {
    flex-direction: column;
    align-items: flex-start;
  }

  .channel-names h1 {
    font-size: clamp(1.9rem, 8.5vw, 3rem);
  }
}

.channel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 1.4rem;
  margin: 0 0 0.4rem;
}

.channel-tags .badge {
  position: static;
}

.channel-tag {
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: #d3d0e4;
  font-size: 0.76rem;
  font-weight: 600;
}

.channel-desc {
  margin-top: 1rem;
}

.channel-section {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: 0 var(--gutter);
}

.channel-section .row-head {
  padding: 0;
}

.channel-note {
  margin: 0.6rem 0 0;
  color: var(--muted);
}

.channel-live {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  max-width: 1400px;
}

/* The player: a picture with a button until the visitor asks for the real Twitch player */
.player {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.player img,
.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.player img {
  filter: brightness(0.6);
}

.player-start {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 99px;
  box-shadow: 0 0 30px var(--red-glow);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.player-start:hover {
  background: #ff4a6e;
}

.player-note {
  position: absolute;
  bottom: 0.7rem;
  color: #d3d0e4;
  font-size: 0.74rem;
}

.channel-live-viewers {
  margin: 0;
  color: var(--red);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
}

.channel-live-title {
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
}

/* Stat tiles */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  max-width: 1400px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: rgba(33, 31, 49, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.kpi-label {
  color: var(--muted);
  font-size: 0.82rem;
}

.kpi-value {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
}

.kpi-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Hours watched per day */
.chart {
  position: relative;
  max-width: 1400px;
  padding: 0.6rem 0 0;
}

.chart-svg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart-axis {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart-hit {
  fill: transparent;
}

.chart-bar {
  fill: var(--red);
}

.chart-col {
  outline: none;
}

.chart-col:hover .chart-bar,
.chart-col:focus .chart-bar {
  fill: #ff6a88;
}

.chart-col:focus-visible .chart-hit {
  fill: rgba(255, 255, 255, 0.05);
}

.chart-tip {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  z-index: 2;
  transform: translate(-50%, -100%);
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  font-size: 0.8rem;
}

.chart-tip[hidden] {
  display: none;
}

.chart-tip strong {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
}

.chart-tip span {
  color: var(--muted);
}

.chart-table {
  max-width: 1400px;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.chart-table summary {
  cursor: pointer;
}

.chart-table table {
  width: 100%;
  max-width: 34rem;
  margin-top: 0.6rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.chart-table th,
.chart-table td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.chart-table th:first-child,
.chart-table td:first-child {
  text-align: left;
}

.channel-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  max-width: calc(1400px + 2 * var(--gutter));
}

/* Small lists: games and schedule */
.mini-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.mini-list a,
.mini-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  background: rgba(33, 31, 49, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mini-list a:hover,
.mini-list a:focus-visible {
  border-color: var(--red);
}

.mini-list strong {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-list span {
  color: var(--muted);
  font-size: 0.84rem;
}

.mini-row {
  flex-wrap: wrap;
  padding-left: 0.9rem;
}

.mini-list .mini-when {
  flex-basis: 100%;
  color: var(--red);
  font-weight: 700;
  font-size: 0.8rem;
}

.mini-cover {
  position: relative;
  flex: none;
  width: 2.2rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 32%), hsl(calc(var(--hue) + 40) 45% 16%));
}

.mini-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .channel-live {
    grid-template-columns: 1fr;
  }
}

/* ---------- States ---------- */

.skeleton .card,
.skeleton .tile {
  background: var(--bg-raised);
  border-color: var(--line);
}

.skeleton .thumb {
  background: var(--panel);
}

.message {
  margin: 3rem var(--gutter);
  padding: 1.2rem 1.4rem;
  max-width: 34rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
}

.message strong {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem;
}

.message p {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

/* ---------- Browse: filter buttons and a poster grid (Movies and TV pages) ---------- */

.browse {
  padding: 0 var(--gutter);
  margin: 4.4rem 0 2.2rem; /* main is pulled up 3.2rem over the hero; this keeps the filters clearly below it */
}

/* The filter block (rows.js filterPanel): a heading, the main row of choices (always visible), then the
   "Filter & sort" button on the left with the active choices next to it; the other choices open below */
.filter-head {
  display: block;
}

.filter-main {
  margin: 0.9rem 0 0;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin-top: 0.8rem;
}

.filter-head h2 {
  margin: 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.1;
}

.filter-head p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-toggle[aria-expanded="true"] {
  border-color: var(--red);
}

.filter-icon {
  color: var(--red);
}

/* How many filters are on */
.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 0.75rem;
}

.filter-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.filter-pill {
  padding: 0.35rem 0.8rem;
  background: rgba(255, 42, 85, 0.14);
  color: var(--text);
  border: 1px solid var(--red);
  border-radius: 99px;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.filter-pill:hover,
.filter-pill:focus-visible {
  background: rgba(255, 42, 85, 0.3);
}

.filter-clear {
  padding: 0.35rem 0.4rem;
  background: none;
  color: var(--muted);
  border: 0;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.filter-clear:hover {
  color: var(--text);
}

.filter-panel {
  margin-top: 0.9rem;
  padding: 1rem 1.1rem;
  background: rgba(26, 25, 39, 0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.filter-group + .filter-group {
  margin-top: 0.9rem;
}

.filter-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-panel .chips {
  margin: 0;
}

.filter-count[hidden],
.filter-active[hidden],
.filter-panel[hidden] {
  display: none;
}

@media (max-width: 720px) {
  /* The rows inside the panel scroll sideways up to the panel's edges */
  .filter-panel .chips {
    margin-inline: -1.1rem;
    padding-inline: 1.1rem;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0;
}

.chip {
  padding: 0.5rem 1rem;
  background: var(--bg-raised);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.chip:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.chip[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 16px var(--red-glow);
}

.chips--small .chip {
  padding: 0.38rem 0.85rem;
  font-size: 0.8rem;
}

.browse-status {
  min-height: 1.3em;
  margin: 0.9rem 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* A grid of Twitch or YouTube cards (filter results), instead of a sideways row */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-grid .card {
  width: 100%;
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.poster-grid .tile--poster {
  width: 100%;
}

.browse-more {
  display: flex;
  margin: 1.6rem auto 0;
}

/* .btn sets display, which would beat the hidden attribute */
.browse-more[hidden],
#rows-root[hidden] {
  display: none;
}

@media (max-width: 720px) {
  /* On phones each row of buttons scrolls sideways instead of taking many lines */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }

  .chips::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- Genres: Blockbuster-style tiles, "See all" and the genre pages ---------- */

/* A big tile with a picture and the genre's name; it opens the genre page */
.genre-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(200px, 19vw, 290px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 40) 45% 14%));
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.genre-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}

/* A dark veil so the name is readable on any picture */
.genre-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 22, 0.55);
  transition: background 0.2s ease;
}

.genre-tile strong {
  position: relative;
  z-index: 1;
  padding: 0 0.8rem;
  font-family: var(--display);
  font-stretch: 112%;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.genre-tile:hover,
.genre-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--red);
}

/* The first tile on the Movies and TV pages: the streaming catalogue, in red with radar rings */
.genre-tile--catalogue {
  align-content: center;
  gap: 0.35rem;
  border-color: rgba(255, 42, 85, 0.6);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 42, 85, 0.55), transparent 55%),
    linear-gradient(135deg, #3d1026, #14131d 75%);
}

.genre-tile--catalogue::after {
  background: repeating-radial-gradient(circle at 88% 18%, transparent 0 22px, rgba(255, 42, 85, 0.16) 22px 23px);
}

.genre-tile--catalogue span {
  position: relative;
  z-index: 1;
  padding: 0 0.8rem;
  color: #e3dff0;
  font-size: 0.8rem;
  text-align: center;
}

.genre-tile:hover::after,
.genre-tile:focus-visible::after {
  background: rgba(14, 13, 22, 0.35);
}

/* The catalogue tile keeps its radar rings, a little brighter, on hover */
.genre-tile--catalogue:hover::after,
.genre-tile--catalogue:focus-visible::after {
  background: repeating-radial-gradient(circle at 88% 18%, transparent 0 22px, rgba(255, 42, 85, 0.26) 22px 23px);
}

/* "See all" at the end of a row's heading */
.see-all {
  margin-left: auto;
  flex: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.see-all::after {
  content: " ›";
}

.see-all:hover,
.see-all:focus-visible {
  color: var(--text);
}

/* The genre page */
/* "← Movies": a real button with room around it, so the big title below never gets in the way of a tap */
.genre-back {
  position: relative;
  z-index: 2;
  margin: 0 0 1.3rem;
}

.genre-back a {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.45rem 1.1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

.genre-back a:hover,
.genre-back a:focus-visible {
  border-color: var(--red);
  background: rgba(255, 42, 85, 0.14);
}

.genre-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* The streaming catalogue (/catalogue): a button per service in the chosen country, with its logo */
.catalogue-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.catalogue-service {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.catalogue-service img {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -0.45rem;
  border-radius: 6px;
}

.genre-select {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.genre-select select {
  min-width: 12rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.genre-select input {
  min-width: 16rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.genre-select input:focus-visible,
.genre-select select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.genre-main {
  margin-top: 0;
  padding: 0 var(--gutter) 4rem;
}

.genre-others {
  margin-top: 3rem;
}

.genre-others h2 {
  margin: 0 0 0.8rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-size: 1.25rem;
}

/* ---------- Person page ---------- */

.person-copy {
  max-width: none;
}

.person-top {
  display: grid;
  grid-template-columns: clamp(140px, 18vw, 240px) minmax(0, 46rem);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 1.6rem;
}

.person-photo-big {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 40) 45% 14%));
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
}

.person-photo-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.2rem;
  margin: 0 0 1.2rem;
}

.person-facts dt {
  color: var(--muted);
  font-size: 0.84rem;
}

.person-facts dd {
  margin: 0;
  font-weight: 600;
}

.person-bio {
  margin: 0 0 1rem;
  color: #d3d0e4;
  line-height: 1.65;
  white-space: pre-line;
}

/* A long story starts folded to about eight lines */
.person-bio.is-folded {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
}

.person-more {
  margin-right: 0.6rem;
}

.person-main {
  margin-top: 1rem;
}

.person-credits {
  padding: 0 var(--gutter);
}

.person-credits h2 {
  margin: 0 0 0.8rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-size: 1.25rem;
}

.credit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62rem;
}

.credit-list li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.3fr) minmax(0, 1fr) 3.6rem;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.credit-year {
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
}

.credit-title {
  font-weight: 700;
}

.credit-title:hover,
.credit-title:focus-visible {
  color: var(--red);
}

.credit-role {
  color: var(--muted);
  font-size: 0.88rem;
}

.credit-kind {
  color: var(--muted);
  font-size: 0.74rem;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Cast cards on title pages open the person page */
a.person:hover strong,
a.person:focus-visible strong {
  color: var(--red);
}

@media (max-width: 600px) {
  .person-top {
    grid-template-columns: 1fr;
  }

  .person-photo-big {
    width: min(60vw, 220px);
  }

  .credit-list li {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .credit-role,
  .credit-kind {
    grid-column: 2;
    text-align: left;
  }

  .genre-select select {
    min-width: 0;
    width: 100%;
  }

  .genre-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Games page: news cards with pictures, and the game popup ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}

.browse-results .news-grid,
.game-block .news-grid {
  padding: 0;
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, transform 0.2s ease;
}

.news-card:hover,
.news-card:focus-visible {
  border-color: var(--red);
  transform: translateY(-3px);
}

.news-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--hue) 40% 26%), hsl(calc(var(--hue) + 40) 45% 14%));
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
}

.news-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0.9rem 1rem;
}

.news-text strong {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.3;
}

.browse-results {
  padding: 0 var(--gutter);
}

/* Buttons and blocks in the esports match popup (they were made for the old game popup) */
.game-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.game-block {
  margin-top: 1.4rem;
}

.game-block h3 {
  margin: 0 0 0.7rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-size: 1.1rem;
}

/* ---------- Esports: the main event hero, tournament tiles and tournament rows ---------- */

.event-hero-box {
  padding: 0 var(--gutter);
}

.event-hero {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 90% at 85% 20%, rgba(255, 42, 85, 0.22), transparent 70%),
    linear-gradient(135deg, hsl(var(--hue) 35% 18%), var(--bg-raised) 70%);
}

.event-hero-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-weight: 700;
}

.event-hero-league {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.event-hero-league .event-league-logo {
  width: 3.4rem;
  height: 3.4rem;
}

.event-hero-league strong,
.event-hero-league span {
  display: block;
}

.event-hero-league strong {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.1;
}

.event-hero-league span {
  color: var(--muted);
}

.event-hero-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 5vw, 4rem);
  padding: 0.6rem 0;
}

.event-hero-teams .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.event-hero-teams .team-logo {
  width: clamp(4rem, 9vw, 6.5rem);
  height: clamp(4rem, 9vw, 6.5rem);
  font-size: 1.8rem;
}

.event-hero-teams strong {
  font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
}

.event-hero-teams .event-vs {
  font-size: 1.2rem;
}

.event-hero-time {
  margin: 0;
  color: var(--red);
  font-weight: 700;
  text-align: center;
}

.event-hero .spot-actions {
  justify-content: center;
}

/* A tournament tile: its logo, name and number of matches */
.tournament-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: clamp(170px, 15vw, 210px);
  height: 100%;
  padding: 1.1rem 0.8rem;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.2s ease;
}

.tournament-tile:hover,
.tournament-tile:focus-visible {
  border-color: var(--red);
  transform: translateY(-4px);
}

.tournament-logo {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 32%), hsl(calc(var(--hue) + 40) 45% 16%));
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
}

.tournament-logo:has(img) {
  background: #e9e7f2;
}

.tournament-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tournament-tile strong {
  font-family: var(--display);
  line-height: 1.2;
}

.tournament-tile span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Match cards in a sideways row need a width */
.track .event {
  width: clamp(260px, 24vw, 320px);
  height: 100%;
}

.see-all--button {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.event-hero-box + .esports-filters {
  margin-top: 2.6rem;
}

/* ---------- Search ---------- */

.search-form {
  position: relative;
  max-width: 40rem;
  margin-top: 1.6rem;
}

.search-form svg {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  width: 1.3rem;
  height: 1.3rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-form input {
  width: 100%;
  padding: 0.95rem 1.2rem 0.95rem 3.2rem;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font: inherit;
  font-size: 1.1rem;
}

.search-form input::placeholder {
  color: var(--muted);
}

.search-form input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

#results-root {
  padding: 0 var(--gutter) 3rem;
}

/* Tabs over the search results: All, Twitch channels (2), Movies (8), ... */
.search-tabs {
  margin: 1.4rem 0 0;
}

.result-group[hidden] {
  display: none;
}

.result-group {
  margin-top: 1.8rem;
}

.result-group h2 {
  margin: 0 0 0.8rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.1;
}

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A result card: a picture on the left; the name, a details line and a short description on the right */
.result {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding: 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s;
}

.result:hover,
.result:focus-visible {
  background: var(--panel);
  border-color: var(--red);
}

.result-art {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 4.6rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 32%), hsl(calc(var(--hue) + 40) 45% 16%));
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
}

.result-art--round {
  width: 4.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
}

/* A live stream's picture is wide */
.result-art--wide {
  width: 8.4rem;
  aspect-ratio: 16 / 9;
}

.result-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-text {
  min-width: 0;
  padding-top: 0.1rem;
}

.result-text strong {
  display: block;
  overflow: hidden;
  font-family: var(--display);
  font-stretch: 105%;
  font-size: 1.02rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.result-meta {
  display: block;
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* At most three lines of the description */
.result-desc {
  display: -webkit-box;
  margin-top: 0.35rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* "Try:" buttons above the suggestions */
.search-try {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.search-try > span {
  flex: none;
  color: var(--muted);
  font-size: 0.86rem;
}

.search-try .chips {
  margin: 0;
}

@media (max-width: 720px) {
  .search-try {
    flex-direction: column;
    align-items: start;
  }

  .search-try .chips {
    max-width: calc(100% + 2 * var(--gutter));
  }

  .result-art--wide {
    width: 6.6rem;
  }
}

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

.footer {
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--line) 40%, transparent) 1;
  color: var(--muted);
  font-size: 0.84rem;
}

.footer p {
  margin: 0 0 0.3rem;
  max-width: 44rem;
}

/* The TMDB logo next to its credit line: small, so it never competes with our own logo */
.tmdb-logo {
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: -1px;
}

.tmdb-logo img {
  display: block;
  width: 100px;
  height: auto;
}

/* ---------- Pages with a simple header (leaderboards, YouTube) ---------- */

/* Rows on these pages start below the header instead of overlapping a big hero */
.page-rows {
  margin-top: 0;
}

.page-hero .hero-copy {
  padding-bottom: 4.5rem;
}

/* "Updated 5 minutes ago" under the hero */
.page-note {
  position: relative;
  z-index: 1;
  min-height: 1.3em;
  margin: 0;
  padding: 0 var(--gutter);
  color: var(--muted);
  font-size: 0.84rem;
}

/* ---------- Leaderboards page ---------- */

.page-head {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 40% 90% at 85% 30%, rgba(255, 42, 85, 0.18) 0%, transparent 72%),
    radial-gradient(ellipse 60% 100% at 75% 20%, #2d2548 0%, transparent 70%),
    var(--bg);
}

/* Melts the header into the page so the beams below start softly */
.page-head::after {
  content: "";
  position: absolute;
  inset: auto 0 -3rem 0;
  height: 3rem;
  z-index: -1;
  background: linear-gradient(180deg, var(--bg), transparent);
}

.page-copy {
  max-width: calc(44rem + var(--gutter) + 16px);
  padding: clamp(6.5rem, 14vh, 8rem) 16px 2.4rem var(--gutter);
}

.page-copy h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-stretch: 125%;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
}

.periods {
  display: inline-flex;
  gap: 0.3rem;
  margin-top: 1.6rem;
  padding: 0.3rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 99px;
}

.periods button {
  padding: 0.5rem 1.1rem;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 99px;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.periods button:hover {
  color: var(--text);
}

.periods button[aria-pressed="true"] {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 16px var(--red-glow);
}

/* The section tabs sit above the period buttons and are a little bigger */
.periods--sections {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  border-radius: 1.4rem;
}

.periods--sections button {
  font-size: 0.98rem;
}

.periods--sections + .periods {
  margin-top: 0.7rem;
}

.periods[hidden] {
  display: none;
}

.periods button:disabled {
  cursor: default;
  opacity: 0.5;
}

.periods button small {
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 0.66rem;
}

.board-note {
  min-height: 1.5em;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* "What does hours watched mean?": a small fold-out under Twitch numbers (rows.js hoursExplainer) */
.explain {
  max-width: 44rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.explain summary {
  width: fit-content;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.explain summary:hover {
  color: var(--red);
}

.explain p {
  margin: 0.5rem 0 0;
}

.boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  max-width: calc(1800px + 2 * var(--gutter));
  padding: 1.5rem var(--gutter) 4rem;
  transition: opacity 0.2s;
}

.boards.is-loading {
  opacity: 0.45;
}

.boards .message {
  margin: 0;
}

.board .row-head {
  padding: 0;
}

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

.lb-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lb-item + .lb-item {
  margin-top: 0.45rem;
}

.lb-rank {
  flex: none;
  width: 2.6rem;
  text-align: right;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 42, 85, 0.55);
  user-select: none;
}

.lb-item:first-child .lb-rank {
  -webkit-text-stroke-color: var(--red);
  filter: drop-shadow(0 0 10px var(--red-glow));
}

.lb-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  background: rgba(33, 31, 49, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}

.lb-link:hover,
.lb-link:focus-visible {
  background: var(--panel);
  border-color: var(--red);
}

.lb-avatar,
.lb-cover,
.lb-thumb {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 32%), hsl(calc(var(--hue) + 40) 45% 16%));
  font-family: var(--display);
  font-weight: 700;
}

.lb-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-size: 1.1rem;
}

.lb-cover {
  width: 2.6rem;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
}

/* YouTube video thumbnails: 16:9, the black bars of YouTube's 4:3 picture are cropped away */
.lb-thumb {
  width: 4.6rem;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
}

.lb-avatar img,
.lb-thumb img,
.lb-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-text {
  flex: 1;
  min-width: 0;
}

.lb-text strong,
.lb-text span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-text strong {
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 600;
  font-size: 1.02rem;
}

.lb-text span {
  color: var(--muted);
  font-size: 0.8rem;
}

.lb-value {
  flex: none;
  text-align: right;
  line-height: 1.2;
}

.lb-value strong {
  display: block;
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: 1.1rem;
}

.lb-value small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

/* ---------- Front page ---------- */

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* A dark veil over the poster wall: darkest behind the text, a crimson glow at the bottom,
   and a fade into the page below */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 52% at 50% 52%, rgba(20, 19, 29, 0.94) 0%, rgba(20, 19, 29, 0.78) 50%, rgba(20, 19, 29, 0.42) 100%),
    radial-gradient(ellipse 55% 35% at 50% 100%, rgba(255, 42, 85, 0.24), transparent 70%),
    linear-gradient(180deg, rgba(10, 9, 16, 0.9) 0%, transparent 22%, transparent 72%, var(--bg) 100%);
}

/* The poster wall: tilted columns that drift up and down */
.wall {
  position: absolute;
  inset: -25% -15%;
  z-index: -2;
  display: flex;
  justify-content: center;
  gap: 14px;
  transform: rotate(-12deg);
  opacity: 0;
  transition: opacity 1.8s ease;
}

.wall.is-ready {
  opacity: 0.6;
}

.wall-col {
  flex: none;
  width: clamp(110px, 11vw, 190px);
  overflow: hidden;
}

.wall-track {
  animation: wall-up var(--speed, 80s) linear infinite;
  will-change: transform;
}

.wall-col--down .wall-track {
  animation-name: wall-down;
}

/* Margin instead of gap, so half the track is exactly one copy of the pictures and the loop never jumps */
.wall-track img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  margin-bottom: 14px;
  object-fit: cover;
  border-radius: 6px;
  filter: saturate(0.85) brightness(0.8);
}

@keyframes wall-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes wall-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.home-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: 4.5rem 16px 9rem; /* more room below than above, so the buttons sit higher on the screen */
  text-align: center;
}

.home-logo {
  width: clamp(64px, 8vw, 112px);
  height: clamp(64px, 8vw, 112px);
  filter: drop-shadow(0 0 18px var(--red-glow));
}

/* "— PLAY | WATCH | EXPLORE —" */
.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0 0;
  color: var(--muted);
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.home-eyebrow::before,
.home-eyebrow::after {
  content: "";
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: var(--red);
}

.home-eyebrow span {
  color: var(--red);
}

.home-title {
  margin: 0.4em 0 0;
  margin-right: -0.16em; /* the wide letter spacing adds space after the last letter; this centres it */
  font-family: var(--display);
  font-weight: 200;
  font-stretch: 125%;
  font-size: clamp(3rem, 10.5vw, 10rem);
  line-height: 0.95;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}

.home-title span {
  display: inline-block;
}

.home-motto {
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.8rem);
  letter-spacing: 0.04em;
  color: #e4e1ef;
}

.home-motto .nowrap {
  white-space: nowrap;
}

.home-motto .amp {
  margin: 0 0.1em;
  color: var(--red);
  font-weight: 600;
  font-size: 1.35em;
  text-shadow: 0 0 18px var(--red-glow);
}

.home-lede {
  max-width: 36rem;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
}

.home-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  max-width: 60rem;
  margin-top: 2.4rem;
}

/* Outlined, letter-spaced buttons with an arrow that moves on hover */
.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.4rem;
  background: rgba(20, 19, 29, 0.55);
  border: 1px solid rgba(255, 42, 85, 0.45);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.home-btn span {
  transition: transform 0.2s;
}

a.home-btn:hover,
a.home-btn:focus-visible {
  background: rgba(255, 42, 85, 0.16);
  border-color: var(--red);
}

a.home-btn:hover span,
a.home-btn:focus-visible span {
  transform: translateX(4px);
}

.home-btn--main {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 24px var(--red-glow);
}

a.home-btn--main:hover,
a.home-btn--main:focus-visible {
  background: #ff4a6e;
}

/* A small mouse outline at the bottom with a dot that rolls down */
.home-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  width: 24px;
  height: 38px;
  margin-left: -12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
}

.home-scroll span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--red);
  animation: scroll-dot 1.8s ease-in-out infinite;
}

@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* The hero text rises in, one line after the other */
.home-copy > * {
  animation: rise-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.home-copy > :nth-child(2) { animation-delay: 0.1s; }
.home-copy > :nth-child(3) { animation-delay: 0.2s; }
.home-copy > :nth-child(4) { animation-delay: 0.35s; }
.home-copy > :nth-child(5) { animation-delay: 0.45s; }
.home-copy > :nth-child(6) { animation-delay: 0.55s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Front page: one section per part of the site ---------- */

.home main {
  margin-top: 0;
  padding: 1rem 0 4rem;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 7rem) clamp(16px, 4vw, 56px);
}

/* Every other section has the picture on the left */
.feature:nth-child(even) .feature-copy {
  order: 2;
}

.feature-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.feature-eyebrow span {
  color: var(--muted);
  font-family: var(--display);
  letter-spacing: 0.1em;
}

.feature h2 {
  margin: 0.8rem 0 0;
  font-family: var(--display);
  font-weight: 200;
  font-stretch: 118%;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.05;
}

.feature-copy > p:not(.feature-eyebrow) {
  max-width: 32rem;
  margin: 1rem 0 0;
  color: var(--muted);
}

.feature .feature-stat {
  min-height: 1.5em;
  padding-left: 0.8rem;
  border-left: 2px solid var(--red);
  color: var(--text);
  font-weight: 600;
}

.feature-copy .home-btn {
  margin-top: 1.8rem;
}

/* Sections slide in as they come into view. They are only hidden once home.js runs
   (it adds "reveal" to the page), so without JavaScript everything is simply visible. */
.reveal .feature-copy,
.reveal .feature-visual {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal .feature-visual {
  transition-delay: 0.15s;
}

.reveal .feature.is-visible .feature-copy,
.reveal .feature.is-visible .feature-visual {
  opacity: 1;
  transform: none;
}

/* A screenshot-style picture with a caption at the bottom */
.vis-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, hsl(var(--hue) 40% 24%), hsl(calc(var(--hue) + 40) 45% 14%));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 42, 85, 0.08);
}

.vis-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vis-shot .badge {
  left: 14px;
  top: 14px;
  z-index: 1;
}

.vis-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.2rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(20, 19, 29, 0.95));
}

.vis-caption strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.15;
}

.vis-caption span {
  color: #d3d0e4;
  font-size: 0.86rem;
}

.vis-list {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.vis-list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0.9rem;
  background: rgba(33, 31, 49, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.vis-list a:hover,
.vis-list a:focus-visible {
  border-color: var(--red);
}

.vis-link {
  display: block;
  border-radius: 10px;
}

.vis-link:hover .vis-shot,
.vis-link:focus-visible .vis-shot {
  border-color: var(--red);
}

.vis-list strong {
  flex: 1;
  font-family: var(--display);
  font-weight: 600;
}

.vis-list a > span:last-child {
  color: var(--muted);
  font-size: 0.86rem;
}

.vis-rank {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 42, 85, 0.7);
}

/* Three covers fanned out like cards in a hand; they spread a little on hover */
.vis-fan {
  position: relative;
  height: clamp(18rem, 32vw, 28rem);
}

.vis-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(9rem, 15vw, 13rem);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(150deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 30) 50% 14%));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vis-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vis-card:nth-child(1) { transform: translate(-115%, -48%) rotate(-10deg); }
.vis-card:nth-child(2) { z-index: 1; transform: translate(-50%, -54%) scale(1.06); }
.vis-card:nth-child(3) { transform: translate(15%, -48%) rotate(10deg); }

.vis-fan:hover .vis-card:nth-child(1) { transform: translate(-128%, -46%) rotate(-14deg); }
.vis-fan:hover .vis-card:nth-child(3) { transform: translate(28%, -46%) rotate(14deg); }

/* The next big match, like the cards on the Esports page but bigger */
.vis-match {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.6rem 1.8rem;
  background: rgba(33, 31, 49, 0.88);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.vis-match .team-logo {
  width: 4.4rem;
  height: 4.4rem;
}

.vis-match .team strong {
  font-size: 1.15rem;
}

/* The top 3 of the month on a podium: #1 in the middle and tallest */
.vis-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vis-podium li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 1.2rem 0.6rem;
  background: linear-gradient(180deg, rgba(255, 42, 85, 0.16), rgba(33, 31, 49, 0.9) 60%);
  border: 1px solid var(--line);
  border-radius: 10px 10px 4px 4px;
  text-align: center;
}

.vis-podium .place-1 { order: 2; min-height: 15rem; border-color: rgba(255, 42, 85, 0.5); }
.vis-podium .place-2 { order: 1; min-height: 11.5rem; }
.vis-podium .place-3 { order: 3; min-height: 9.5rem; }

.vis-podium .vis-rank {
  font-size: clamp(2.6rem, 5vw, 4rem);
}

.vis-podium .place-1 .vis-rank {
  -webkit-text-stroke-color: var(--red);
  filter: drop-shadow(0 0 12px var(--red-glow));
}

.vis-podium strong {
  max-width: 100%;
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vis-podium li > span:last-child {
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
  }

  .feature:nth-child(even) .feature-copy {
    order: 0;
  }

  .home-title {
    letter-spacing: 0.1em;
    margin-right: -0.1em;
  }

  .home-eyebrow {
    letter-spacing: 0.3em;
  }
}

/* Phones: the seven buttons two by two, so the hero still fits on the screen */
@media (max-width: 480px) {
  /* Start right under the menu button instead of in the middle, so all seven buttons fit on the screen */
  .home-hero {
    justify-content: flex-start;
  }

  .home-copy {
    padding-top: 3.75rem;
    padding-bottom: 3rem;
  }

  /* Tighter gaps on phones, so the buttons sit above Safari's bottom bar */
  .home-copy .home-eyebrow { margin-top: 1rem; }
  .home-copy .home-title { margin-top: 0.8rem; }
  .home-copy .home-motto { margin-top: 0.6rem; }
  .home-copy .home-lede { margin-top: 0.8rem; }
  .home-copy .home-buttons { margin-top: 1.4rem; }

  .home-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0.5rem;
  }

  .home-btn {
    justify-content: center;
    padding: 0.8rem 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }

  /* Leaderboards, the seventh button, takes the whole last row */
  .home-buttons > :last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wall-track,
  .home-scroll span,
  .home-copy > * {
    animation: none;
  }

  .reveal .feature-copy,
  .reveal .feature-visual {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  .nav .soon {
    display: none;
  }

  /* Phones: the burger menu replaces the row of links, so the top bar is just the logo and the burger */
  .topbar .nav {
    display: none;
  }

  .nav-burger {
    margin-left: auto;
  }

  .nav a {
    white-space: nowrap;
  }

  /* The menu does not fit on a phone, so it becomes a row you can swipe sideways.
     The fade on the right hints that there is more. */
  .topbar {
    gap: 1rem;
  }

  .nav {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2rem 6px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .hero {
    min-height: 470px;
  }

  .hero::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(20, 19, 29, 0.6) 55%, transparent 100%),
      linear-gradient(180deg, transparent 55%, var(--bg) 100%);
  }

  /* The map stays as background on phones; the labels would cover the title */
  .waypoints {
    display: none;
  }

  .scroll-btns {
    display: none;
  }

  .ranked {
    --rank-size: calc((var(--card-w) * 9 / 16 + 4.3rem) * 0.8);
  }

  .ranked--poster {
    --rank-size: 7rem;
  }
}

/* Phones: only the radar icon is shown, so the menu fits on one line */
@media (max-width: 480px) {
  .nav {
    gap: 0.9rem;
  }

  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lb-rank {
    width: 1.8rem;
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  .card:hover,
  .card:focus-visible,
  .tile:hover,
  .tile:focus-visible {
    transform: none;
  }
}


/* ---------- Animated background: soft red beams ---------- */

.beams {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.beams canvas {
  width: 100%;
  height: 100%;
  filter: blur(22px);
}

/* Phones and tablets: the still frame is drawn tiny and stretched, which makes it soft without a blur (see beams.js) */
.beams--still canvas {
  filter: none;
}

/* Touch screens have no real hover: a finger swiping a row "hovers" the card under it, which opened the
   description overlay and lifted the card in the middle of the swipe. There the cards stay still and the
   overlay stays closed; a tap opens the page, and the "More info" pill shows that it can be tapped. */
@media (hover: none) {
  .tile .detail,
  .card .detail {
    display: none;
  }

  .tile:hover,
  .card:hover,
  .genre-tile:hover,
  .news-card:hover,
  .tournament-tile:hover {
    transform: none;
  }
}

/* Long spotlight titles (like long YouTube video titles, often in capitals) get a smaller size, so two lines fit */
.spot-title--long {
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  line-height: 1.02;
}

/* ---------- Twitch browse page (/twitch/browse) ---------- */

.browse-controls {
  margin: 0 0 0.4rem;
}

.browse-controls [hidden] {
  display: none;
}

.poster-grid .tile {
  width: 100%;
}

.page-copy .periods {
  margin-top: 1.4rem;
}

/* "Browse all categories" on the Twitch page, where the filters used to be */
.browse-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 1rem 0 0;
}

.browse-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .genre-select input {
    min-width: 0;
    width: 100%;
  }

  .browse-controls {
    grid-template-columns: 1fr;
  }
}

/* The language dropdown on the YouTube page, on the line with the browse buttons */
.browse-cta .yt-country {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.browse-cta .yt-country select {
  min-width: 11rem;
  padding: 0.55rem 0.8rem;
}

@media (max-width: 720px) {
  .browse-cta .yt-country {
    width: 100%;
  }

  .browse-cta .yt-country select {
    flex: 1;
  }
}

/* ---------- Esports: match pictures and the match popup ---------- */

/* A match card is a button that opens the popup */
.event--match {
  position: relative;
  width: 100%;
  padding: 0 0 0.9rem;
  overflow: hidden;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.event--match > :not(.event-art):not(.more-hint) {
  margin: 0 1rem;
}

.event--match:hover,
.event--match:focus-visible {
  background: var(--panel);
  border-color: var(--red);
}

/* The game's picture across the top of the card, with the league logo on it */
.event-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  height: 6.5rem;
  padding: 0.6rem 0.8rem;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 40) 45% 14%));
}

.event-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.3s ease;
}

.event-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 29, 0.1) 0%, rgba(20, 19, 29, 0.85) 100%);
}

.event--match:hover .event-art img {
  transform: scale(1.05);
}

.event-art > .event-league-logo,
.event-art > .event-tag {
  position: relative;
  z-index: 1;
}

.event-art > .event-tag {
  background: rgba(20, 19, 29, 0.8);
  color: var(--text);
}

.event-soon {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.event--match .more-hint {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  padding: 0.2rem 0.6rem;
  background: rgba(20, 19, 29, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}

.event--match:hover .more-hint,
.event--match:focus-visible .more-hint {
  opacity: 1;
}

@media (hover: none) {
  .event--match .more-hint {
    opacity: 0.9;
  }
}

/* The main event gets the game's picture faded in on the right */
.event-hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: min(55%, 640px);
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}

.event-hero > :not(.event-hero-art) {
  position: relative;
}

/* The popup */
.match-dialog {
  width: min(94vw, 760px);
  padding: 0;
  overflow-x: hidden;
}

.match-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(9rem, 26vw, 13rem);
  padding: 1rem clamp(1rem, 3vw, 1.6rem);
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--hue) 45% 30%), hsl(calc(var(--hue) + 40) 45% 14%));
}

.match-banner-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.match-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 29, 0.15), var(--bg-raised));
}

.match-banner-league {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.match-banner-league strong,
.match-banner-league span {
  display: block;
}

.match-banner-league strong {
  font-family: var(--display);
  font-size: 1.25rem;
}

.match-banner-league span {
  color: #d3d0e4;
  font-size: 0.86rem;
}

.match-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
}

.match-body {
  display: grid;
  gap: 1.2rem;
  padding: 0.4rem clamp(1rem, 3vw, 1.6rem) 1.6rem;
}

.match-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
}

.match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  text-align: center;
}

.match-team strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.team-logo--big {
  width: clamp(4.2rem, 14vw, 6rem);
  height: clamp(4.2rem, 14vw, 6rem);
  font-size: 1.6rem;
}

.match-team .team-logo:has(img) {
  background: #e9e7f2;
  padding: 0.6rem;
}

.match-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.8rem;
  margin: 0;
}

.match-facts div {
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.match-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.match-facts dd {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.match-next {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-next-item {
  display: flex;
  gap: 0.9rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.match-next-item:hover,
.match-next-item:focus-visible {
  border-color: var(--red);
}

.match-next-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Browse pages with a plain header: the search and dropdowns come straight after it */
.page-rows > .browse {
  margin-top: 0.5rem;
}

.games-controls {
  margin-top: 0;
}

/* YouTube browse: the heading over the category, genre or game tiles, under the rows */
.browse-tiles {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

.tiles-title {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

/* The genre on show in a row of genre tiles (YouTube browse) */
.genre-tile[aria-current="page"] {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red), 0 0 24px var(--red-glow);
}

/* The search box above the game tiles on the YouTube browse page */
.game-search {
  margin: 0 0 1rem;
}

/* The links at the bottom of every footer: privacy page and contact */
.footer .footer-links {
  margin-top: 0.8rem;
}

.footer-links a {
  color: var(--text);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--red);
}

/* ---------- Privacy and terms page ---------- */

.legal {
  margin-top: 0; /* no hero to overlap, unlike the pages with rows */
  max-width: calc(46rem + var(--gutter) + 16px);
  padding: 0 16px 4rem var(--gutter);
}

.legal section + section {
  margin-top: 2rem;
}

.legal h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}

.legal p {
  margin: 0 0 0.8rem;
  color: #d3d0e4;
  line-height: 1.65;
}

.legal a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.legal code {
  padding: 0.1rem 0.35rem;
  background: var(--bg-raised);
  border-radius: 4px;
  font-size: 0.9em;
}

/* Touch screens: smoother swiping. Rows do not snap to a card when a swipe ends (snapping fought the phone's
   own swipe momentum and felt glitchy), a swipe at the end of a row does not move the page, and rows far
   off screen skip drawing until they come near (Movies and TV have 25+ rows). */
@media (hover: none) {
  .track {
    scroll-snap-type: none;
    overscroll-behavior-x: contain;
  }

  .row {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
}

/* ---------- Error pages (static/error/404.html, 4xx.html, 5xx.html) ---------- */

.error-code {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
}

.error-main {
  margin-top: 0;
  padding: 0 var(--gutter) 4rem;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 44rem;
}

/* ---------- Game pages (/games/<slug>, hub.js) ---------- */

/* The numbers at a glance and the Twitch/YouTube/Steam/IGDB buttons, under the hero. main is pulled up over the
   hero's faded bottom (for the rows on other pages), so the tiles get the same top margin as the filters there
   (.browse); without it they started inside the hero picture. */
.hub-facts {
  position: relative;
  margin-top: 4.4rem;
  padding: 0 var(--gutter);
}

.hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 0 var(--gutter);
}

.hub-wait {
  padding: 0 var(--gutter);
}

/* A channel that streamed the game most: picture, name and hours watched */
.hub-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: clamp(130px, 11vw, 160px);
  padding: 1rem 0.8rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, transform 0.2s ease;
}

.hub-channel .team-logo {
  width: 4rem;
  height: 4rem;
  font-size: 1.4rem;
}

.hub-channel .team-logo img {
  object-fit: cover;
}

.hub-channel strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display);
}

.hub-channel span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
}

/* "▲ 45 places" on the Twitch page's biggest climbers */
.hub-channel .climb {
  color: var(--red);
  font-weight: 700;
  font-size: 0.9rem;
}

.hub-channel:hover,
.hub-channel:focus-visible {
  border-color: var(--red);
  transform: translateY(-3px);
}

@media (hover: none) {
  .hub-channel:hover {
    transform: none;
  }
}

/* Inside a game page section the lists already sit in the page's side margins */
.channel-section .event-list,
.channel-section .news-grid {
  padding-left: 0;
  padding-right: 0;
}

/* Phones: the game page's numbers two by two, so the content starts sooner */
@media (max-width: 720px) {
  .hub-facts .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hub-facts .kpi {
    padding: 0.75rem 0.8rem;
  }

  .hub-facts .kpi-value {
    font-size: 1.35rem;
  }
}