/* Community + contact footer (home) */
.home-footer { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-link {
  display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.footer-link:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.fl-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0; color: #fff; }
.fl-ic svg { width: 24px; height: 24px; }
.fl-discord .fl-ic { background: #5865f2; }
.fl-mail .fl-ic { background: linear-gradient(135deg, #7c3aed, #db2777); }
.fl-text { display: flex; flex-direction: column; min-width: 0; }
.fl-text strong { color: var(--text); font-size: 15px; font-weight: 700; }
.fl-sub { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-legal { text-align: center; color: var(--faint); font-size: 12px; margin-top: 22px; }



.app {
  --px: clamp(14px, 3vw, 28px);
  --pt: clamp(16px, 3vw, 28px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pt) var(--px) 60px;
  min-height: calc(100vh - var(--header-h));
}

.section { margin-bottom: 42px; animation: sectionIn 0.4s var(--ease) both; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.section-title { font-size: clamp(18px, 2.4vw, 23px); font-weight: 750; letter-spacing: -0.02em; display: flex; align-items: center; gap: 11px; }
.section-title .dot { width: 5px; height: 22px; border-radius: var(--radius-xs); background: var(--accent-grad); box-shadow: 0 0 12px rgba(139, 92, 246, 0.55); }
.section-sub { color: var(--muted); font-size: 14px; }
.link-more { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-weight: 650; transition: color 0.15s, gap 0.15s var(--ease); white-space: nowrap; }
.link-more:hover { color: var(--accent-2); gap: 5px; }
.link-more svg { width: 16px; height: 16px; }
.section-title .live-ic { display: inline-grid; place-items: center; color: #f472b6; }
.section-title .live-ic svg { width: 20px; height: 20px; animation: live-pulse 2.2s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Airing-now mini-card strip */
.mini-row { gap: 12px; padding-bottom: 6px; }
.mini-card {
  flex: 0 0 clamp(190px, 32vw, 240px); display: flex; gap: 10px; align-items: center; padding: 8px;
  border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-soft);
  transition: border-color 0.15s, transform 0.15s var(--ease);
}
.mini-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.mini-cover { flex: 0 0 auto; width: 44px; height: 62px; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-2); }
.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.mini-title { font-size: 13px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Weekly calendar / schedule ===== */
.cal-loading { display: grid; place-items: center; padding: 60px 0; }
.cal-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.cal-col { flex: 0 0 clamp(168px, 21vw, 210px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.cal-col.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-day { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.cal-col.today .cal-day { background: var(--accent-soft); }
.cal-dow { font-weight: 800; font-size: 14px; }
.cal-col.today .cal-dow { color: #fff; }
.cal-date { font-size: 12px; color: var(--faint); }
.cal-items { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; max-height: 72vh; }
.cal-empty { color: var(--faint); text-align: center; padding: 18px 0; }
.cal-card { display: flex; gap: 9px; align-items: center; padding: 7px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-soft); transition: border-color 0.15s, transform 0.15s var(--ease), background 0.15s; }
.cal-card:hover { border-color: var(--accent); background: var(--surface-3); transform: translateX(2px); }
.cal-thumb { flex: 0 0 auto; width: 38px; height: 52px; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-3); }
.cal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cal-info { flex: 1 1 auto; min-width: 0; }
.cal-title { font-size: 12.5px; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.cal-meta { display: flex; align-items: center; gap: 8px; }
.cal-ep { font-size: 10px; font-weight: 800; color: #fff; background: var(--accent-grad); padding: 1px 6px; border-radius: 999px; }
.cal-time { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
@media (max-width: 700px) {
  .cal-board { flex-direction: column; overflow-x: visible; }
  .cal-col { flex: 1 1 auto; }
  .cal-items { max-height: none; }
}

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s var(--ease);
}
.chip:hover { color: #fff; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.25); background: var(--surface-3); }
.chip.active { background: var(--accent-soft); color: #fff; border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4); }
/* 18+ genre chips (only shown to age-verified users) */
.chip.chip-adult { background: rgba(219, 39, 119, 0.12); border-color: rgba(219, 39, 119, 0.45); color: #f9a8d4; }
.chip.chip-adult:hover { color: #fff; border-color: #db2777; background: rgba(219, 39, 119, 0.28); box-shadow: 0 6px 16px rgba(219, 39, 119, 0.3); }


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

/* ===== Catalog filter bar ===== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.filter-select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 34px 9px 15px; border-radius: 999px;
  background: var(--surface-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239a9ab4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 11px center;
  background-size: 15px;
  border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-select:hover { border-color: var(--accent); }
.filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filter-select option { background: var(--surface); color: var(--text); }
.filter-reset {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  padding: 9px 16px; border-radius: 999px; background: transparent;
  border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.filter-reset:hover { color: #fff; border-color: var(--accent-2); }
.filter-reset svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .filter-reset { margin-left: 0; } .filter-select { flex: 1 1 40%; } }

.card { display: block; cursor: pointer; animation: cardIn 0.36s var(--ease) both; }
.grid .card:nth-child(2n) { animation-delay: 0.03s; }
.grid .card:nth-child(3n) { animation-delay: 0.06s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.card-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease), opacity 0.4s; }
.card:hover .card-cover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(139, 92, 246, 0.3); }
.card:hover .card-cover img { transform: none; }
/* Bottom veil + a soft accent sweep on hover. */
.card-cover::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.6), transparent 45%),
    linear-gradient(120deg, rgba(124,58,237,0.28), transparent 55%);
  opacity: 0; transition: opacity 0.3s;
}
.card:hover .card-cover::after { opacity: 1; }
/* Thin inner ring for depth (always on). */
.card-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none;
}
.card-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  padding: 3px 9px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 800;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.card-badge.rank { background: var(--accent-grad); }
/* Score pill (top-right) — always visible, streaming-site style. */
.card-score {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px);
  color: #fcd34d; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.card-score svg { width: 11px; height: 11px; }
.card-score span { color: #fff; }
/* Format · episodes strip along the poster bottom, revealed on hover. */
.card-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: #e7e8f0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}
.card:hover .card-meta { opacity: 1; transform: translateY(0); }
/* "Open" chip revealed on hover, centered on the cover. */
.card-open {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  width: 46px; height: 46px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  display: grid; place-items: center;
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.card-open svg { width: 24px; height: 24px; overflow: visible; }
.card:hover .card-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Page hinged at the book's spine (centre); turns from the left half to the
   right half and stays there. */
.card-open .pg { transform-box: fill-box; transform-origin: right center; }
.card:hover .card-open .pg { animation: cardFlip 0.8s cubic-bezier(0.34, 0, 0.2, 1) 0.1s 1 both; }
@keyframes cardFlip {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-180deg); }
}
@media (hover: none) { .card-open { display: none; } }
.card-title {
  margin-top: 10px; font-size: 13.5px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.15s;
}
.card:hover .card-title { color: #fff; }
.card-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }

.skeleton { position: relative; overflow: hidden; background: var(--surface-2); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 12px; border-radius: var(--radius-xs); margin-top: 8px; }

/*  Home: greeting hero + horizontal snap rows*/
.home-hero {
  position: relative; overflow: hidden;
  margin: 0 0 30px; padding: 28px 30px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(219,39,119,0.16), transparent 60%),
    linear-gradient(120deg, rgba(124,58,237,0.16), rgba(20,18,32,0.4));
  border: 1px solid var(--border-soft);
  animation: sectionIn 0.4s var(--ease) both;
}
.home-hero::after {
  content: ""; position: absolute; top: -60%; right: -10%; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(124,58,237,0.25), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.home-title { position: relative; margin: 0 0 6px; font-size: clamp(26px, 5vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.home-title .grad { background: linear-gradient(100deg, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-sub { position: relative; margin: 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 560px) { .home-hero { padding: 22px 20px; margin-bottom: 24px; } }

/* Featured spotlight banner — auto-rotating art that blends into the page bg. */
/* Full-bleed, to the actual edges of the screen. It used to sit in a rounded rectangle
   with the page padding all round it, which framed the key art like a picture instead
   of letting it be the top of the page.
   Reaching the true left edge means crossing the fixed icon rail, so the margin backs
   out the page gutter, the centring of .app inside .main-col, and half the rail (see
   --rail). The rail is frosted glass, so the artwork reads softly through it. The rows
   underneath are untouched. */
.feature-hero {
  position: relative; overflow: hidden;
  height: clamp(520px, 84vh, 900px);
  border-radius: 0;
  margin-top: calc(-1 * var(--pt));
  margin-bottom: 34px;
  /* --sbw is the scrollbar gutter, measured in app.js: 100vw counts it, the laid-out
     page does not, so without it the whole hero sits a few pixels off to one side. */
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2 - var(--rail, 0px) / 2);
  margin-right: 0;
}
.feature-skeleton { animation: none; }
.feature-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.8s var(--ease); }
.feature-slide.active { opacity: 1; pointer-events: auto; }
.feature-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center 18%;
  transform: scale(1.06); filter: saturate(1.05) brightness(0.92);
  animation: featurePan 22s ease-in-out infinite alternate;
}
/* Cinematic scrim: dark from the left (text) + bottom (melts into the page bg). Sits
   above the art AND the trailer so the text stays readable either way. */
.feature-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(11,11,18,0.82) 22%, rgba(11,11,18,0.28) 55%, transparent 82%),
    linear-gradient(to top, var(--bg) 0%, var(--bg) 6%, transparent 46%, transparent 88%, rgba(11,11,18,0.45) 100%);
}
/* Trailer video background — fades in over the art after a few seconds. */
.feature-trailer { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0; transition: opacity 1s var(--ease); }
.feature-trailer.on { opacity: 1; }
.feature-trailer iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 177.78vh; height: 100vh; min-width: 100%; min-height: 100%;
  border: 0; pointer-events: none;
}

/* The hero now spans the whole screen, but its contents must still line up with the
   rows underneath — and those are centred in the space *beside* the fixed rail, not on
   the screen. Widening the box by the rail and padding that much back in puts the two
   on the same line; without it the title and the dots sat ~47px left of everything
   else. --hero-gutter keeps the text, the dots and the arrows on one edge. */
/* The page's own gutter (--px, from .app) — not a second, wider one, or the hero text
   and the rows below it line up differently. */
.feature-hero { --hero-gutter: var(--px); }
.feature-content {
  position: relative; z-index: 2; height: 100%;
  box-sizing: border-box;
  max-width: calc(var(--maxw) + var(--rail, 0px)); margin: 0 auto;
  display: flex; align-items: flex-end;
  padding: 0 var(--hero-gutter) clamp(46px, 6vw, 74px) calc(var(--rail, 0px) + var(--hero-gutter));
}
.feature-text { min-width: 0; max-width: 640px; padding-bottom: 4px; }
.feature-slide.active .feature-text { animation: featureIn 0.7s var(--ease) 0.06s both; }
.feature-title {
  margin: 0 0 14px; font-size: clamp(30px, 4.8vw, 52px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; padding-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-title a { background: linear-gradient(92deg, #fff 32%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Transparent title logo (TMDB) — shown instead of the text once it has loaded. */
.hero-logo { display: none; }
.feature-title.has-logo { display: block; overflow: visible; -webkit-line-clamp: none; margin-bottom: 16px; }
.feature-title.has-logo .feature-title-txt { display: none; }
.feature-title.has-logo a { background: none; }
.feature-title.has-logo .hero-logo {
  display: block; width: auto; height: auto;
  max-width: min(440px, 58vw); max-height: 168px;
  object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.65));
}
/* Season marker — the logo itself is the series logo, so this is what tells
   season 3 apart from season 1. */
.hero-season {
  display: inline-block; margin-top: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f9a8d4; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 16px; }
.feature-status { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #6ee7b7; }
.feature-status.status-FINISHED { color: #93c5fd; }
.feature-status.status-NOT_YET_RELEASED { color: #fcd34d; }
.feature-when { display: inline-flex; align-items: center; gap: 6px; color: #e7e8f0; font-weight: 650; font-size: 14px; }
.feature-when svg { width: 16px; height: 16px; }
.feature-desc {
  margin: 0 0 22px; color: #dcdce8; font-size: 15px; line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-desc:empty { display: none; }
.feature-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.feature-btn { padding: 13px 30px; font-size: 15px; }
.feature-round {
  width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: #fff;
  backdrop-filter: blur(8px); cursor: pointer; transition: background 0.15s, transform 0.15s var(--ease);
}
.feature-round:hover { background: rgba(255,255,255,0.24); transform: scale(1.06); }
.feature-round svg { width: 22px; height: 22px; }

.feature-dots {
  position: absolute; z-index: 3; bottom: 14px; left: 0; right: 0;
  box-sizing: border-box;
  max-width: calc(var(--maxw) + var(--rail, 0px)); margin: 0 auto;
  padding-left: calc(var(--rail, 0px) + var(--hero-gutter));
  display: flex; gap: 0;
}
/* The dot you see is 8px; the area you can hit is 20×32. Padding grows the button while
   background-clip keeps the colour on the dot itself — an 8px target is unusable with a
   thumb, and these sit on a phone's home screen more than anywhere else. */
.feature-dot {
  width: 8px; height: 8px; box-sizing: content-box;
  padding: 12px 6px; margin: 0; border: 0;
  border-radius: 999px; background: rgba(255,255,255,0.4); background-clip: content-box;
  cursor: pointer; transition: background 0.2s, width 0.25s var(--ease);
}
/* background-color, not the background shorthand: the shorthand would reset
   background-clip and spill the colour across the whole tap area. */
.feature-dot:hover { background-color: rgba(255,255,255,0.7); }
.feature-dot.active { background-color: #fff; width: 28px; }
.feature-arrows {
  position: absolute; z-index: 3; bottom: 18px; left: 0; right: 0;
  box-sizing: border-box;
  max-width: calc(var(--maxw) + var(--rail, 0px)); margin: 0 auto;
  padding-right: var(--hero-gutter);
  display: flex; justify-content: flex-end; gap: 8px;
  pointer-events: none;
}
.feature-arrow { pointer-events: auto; }
.feature-arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,12,20,0.5); border: 1px solid rgba(255,255,255,0.2); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.15s, transform 0.15s var(--ease); }
.feature-arrow:hover { background: var(--accent); transform: scale(1.06); }
.feature-arrow svg { width: 22px; height: 22px; }

@keyframes featurePan { from { transform: scale(1.06) translateX(-1%); } to { transform: scale(1.06) translateX(1%); } }
@keyframes featureIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  /* svh = the height with the browser bars showing, so the hero doesn't jump in size
     every time the address bar slides in and out while scrolling. */
  .feature-hero { height: clamp(460px, 88vh, 680px); height: clamp(460px, 82svh, 680px); margin-bottom: 22px; }
  .feature-slide::after {
    background:
      linear-gradient(to top, var(--bg) 0%, var(--bg) 6%, rgba(11,11,18,0.45) 42%, transparent 80%),
      linear-gradient(to right, rgba(11,11,18,0.6), rgba(11,11,18,0.15) 70%, transparent);
  }
  .feature-content { padding: 0 var(--hero-gutter) 34px calc(var(--rail, 0px) + var(--hero-gutter)); }
  .feature-title { font-size: clamp(26px, 8vw, 40px); margin-bottom: 10px; }
  .feature-title.has-logo { margin-bottom: 12px; }
  .feature-title.has-logo .hero-logo { max-width: 74vw; max-height: 104px; }
  .feature-meta { gap: 10px; margin-bottom: 12px; }
  .feature-desc { -webkit-line-clamp: 2; font-size: 13.5px; margin-bottom: 16px; }
  .feature-btn { padding: 11px 20px; font-size: 14px; }
  .feature-round { width: 44px; height: 44px; }
  .feature-arrows { display: none; }
  .feature-dots { bottom: 14px; }
}

.h-row {
  display: flex; gap: clamp(10px, 1.6vw, 16px);
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* hide scrollbar, keep scrollable (free, no snap) */
}
.h-row::-webkit-scrollbar { display: none; }
.h-row .card { flex: 0 0 clamp(118px, 23vw, 150px); }

/* Clean scroll wrapper: progress indicator + end-flash edges */
.h-scroll { position: relative; }
.h-ind { position: relative; height: 4px; width: clamp(120px, 26%, 260px); margin: 2px auto 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.h-ind-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-grad); }
.h-flash {
  position: absolute; top: 0; bottom: 18px; width: 56px; z-index: 4; opacity: 0; pointer-events: none;
}
.h-flash.left { left: 0; background: linear-gradient(to right, rgba(139,92,246,0.55), transparent); }
.h-flash.right { right: 0; background: linear-gradient(to left, rgba(139,92,246,0.55), transparent); }
.h-flash.on { animation: hflash 0.5s var(--ease); }
@keyframes hflash { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } }

/* Hover arrows for mouse users — the wheel no longer hijacks vertical scrolling.
   Trackpad users keep native horizontal scroll; touch hides the arrows. */
.h-arrow {
  position: absolute; top: calc(50% - 9px); transform: translateY(-50%); z-index: 6;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 12, 20, 0.86); backdrop-filter: blur(10px);
  border: 1px solid var(--border); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity 0.22s var(--ease), background 0.18s, border-color 0.18s, transform 0.18s var(--ease);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.h-arrow svg { width: 22px; height: 22px; }
.h-arrow.prev { left: -8px; }
.h-arrow.next { right: -8px; }
.h-scroll:hover .h-arrow { opacity: 1; }
.h-arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.h-arrow.disabled { opacity: 0 !important; pointer-events: none; }
.h-scroll.no-arrows .h-arrow { display: none; }
@media (hover: none) { .h-arrow { display: none; } }

/* Cards drift in one after another */
.grid .card, .h-row .card { animation: sectionIn 0.4s var(--ease) both; }
.grid .card:nth-child(1), .h-row .card:nth-child(1) { animation-delay: 0.02s; }
.grid .card:nth-child(2), .h-row .card:nth-child(2) { animation-delay: 0.05s; }
.grid .card:nth-child(3), .h-row .card:nth-child(3) { animation-delay: 0.08s; }
.grid .card:nth-child(4), .h-row .card:nth-child(4) { animation-delay: 0.11s; }
.grid .card:nth-child(5), .h-row .card:nth-child(5) { animation-delay: 0.14s; }
.grid .card:nth-child(6), .h-row .card:nth-child(6) { animation-delay: 0.17s; }
.grid .card:nth-child(7), .h-row .card:nth-child(7) { animation-delay: 0.2s; }
.grid .card:nth-child(8), .h-row .card:nth-child(8) { animation-delay: 0.23s; }

/* Top-3 medals on ranked cards */
.card-badge.rank.r1 { background: linear-gradient(120deg, #fde68a, #f59e0b); color: #451a03; box-shadow: 0 3px 12px rgba(245, 158, 11, 0.45); }
.card-badge.rank.r2 { background: linear-gradient(120deg, #f3f4f6, #9ca3af); color: #111827; }
.card-badge.rank.r3 { background: linear-gradient(120deg, #f59e0b, #92400e); color: #fff; }