/* Home Slider: full-width showcase marquee of broadcast-dark cards.
   slider.js drives a constant drift on the track (transform) and scales each
   card by its distance from center; this file only paints. With scripting off
   or reduced motion, the track falls back to a plain scrollable row. */

.rt-slider {
  position: relative;
  overflow: hidden;
  padding: 18px 0 26px;
}
.rt-slider-track {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  width: max-content;
  will-change: transform;
  /* THE mobile swipe fix: without this the browser owns every touch, decides
     a moving finger means "scroll the page", and fires pointercancel, so the
     drag died before it began and the rail felt unswipeable. pan-y keeps
     vertical page scrolling native while handing horizontal gestures to the
     script. */
  touch-action: pan-y;
  cursor: default;
}
.rt-slider-track:active { cursor: default; }
/* No-JS / reduced-motion fallback: a normal swipeable row. */
.rt-slider.is-static .rt-slider-track {
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 4vw;
}
.rt-slider.is-static .rt-slider-card { scroll-snap-align: center; }

/* ==== Card plates: the site's own brand instead of a black rectangle ====
   Every card wears the fleet card family's slim brand strip (site logo at the
   right on the dark chrome, underlined in the card kind's accent), a plate
   tinted from the palette with a faint star field, and the site's brand
   marker (--rt-nav-icon: comet, feather, star) as a watermark. A photo, when
   a card has one, still takes the whole plate. No emoji, no giant glyph. */
.rt-slider-card {
  position: relative;
  flex: 0 0 auto;
  width: min(880px, 82vw);
  height: clamp(280px, 34vw, 380px);
  border-radius: 16px;
  overflow: hidden;
  --sl-accent: var(--rt-primary, #2566b6);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 78%, rgba(255, 255, 255, 0.22) 0 1.5px, transparent 2px),
    radial-gradient(circle at 30% 64%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.2) 0 1px, transparent 2px),
    radial-gradient(120% 160% at 85% -30%, color-mix(in srgb, var(--sl-accent) 55%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--rt-ink, #1d497c) 88%, #000), color-mix(in srgb, var(--rt-primary, #2566b6) 55%, #0b1530) 70%, color-mix(in srgb, var(--rt-ink, #1d497c) 80%, #000));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform-origin: center center;
}
/* The brand strip along the top: logo right, accent underline. */
.rt-slider-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  background-color: var(--rt-black, #111);
  background-image: var(--rt-banner-logo);
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: auto 34px;
  box-shadow: inset 0 -4px 0 var(--sl-accent);
  z-index: 2;
}
.rt-slider-strip-kind {
  position: absolute;
  left: 22px;
  top: 0;
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #fff;
  font-family: var(--rt-font-display, "RT Display", "Arial Narrow", sans-serif);
  font-weight: var(--rt-font-display-weight, 700);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rt-slider-strip-kind i { color: var(--sl-accent); font-size: 1.05em; }
/* The brand marker watermark (the site's own glyph, not a stock icon). */
.rt-slider-mark {
  position: absolute;
  right: clamp(18px, 6vw, 80px);
  bottom: -8%;
  font-size: clamp(7rem, 20vw, 15rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  transform: var(--rt-nav-icon-transform, none);
}
.rt-slider-mark::before {
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-weight: 900;
  content: var(--rt-nav-icon, "\f005");
}
.rt-slider-art {
  position: absolute;
  inset: 0;
}
.rt-slider-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
}
/* A newsletter cover: a poster leaning in from the right, under the strip. */
.rt-slider-art--poster { inset: 64px 4% 0 auto; width: 38%; top: 66px; }
.rt-slider-art--poster img { object-fit: cover; object-position: top; opacity: 1; border-radius: 10px 10px 0 0; box-shadow: 0 10px 30px rgba(0,0,0,.5); transform: rotate(2deg) translateY(6%); }
.rt-slider-card--newsletter { --sl-accent: #fff; }
.rt-slider-card:has(.rt-slider-art--poster) .rt-slider-mark { display: none; }
.rt-slider-card:has(.rt-slider-art--poster) .rt-slider-grade { background: linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.75) 50%, rgba(10,10,12,.2) 100%); }

/* Opponent logos on the game card: staged right, contained, not cropped. */
.rt-slider-art--contain {
  inset: 18% 4% 8% auto;
  width: 42%;
}
.rt-slider-art--contain img {
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}
/* The grade that keeps type readable over any photo. */
.rt-slider-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.5) 46%, rgba(10, 10, 12, 0.08) 100%),
    linear-gradient(0deg, rgba(10, 10, 12, 0.55) 0%, transparent 45%);
}
.rt-slider-card:has(.rt-slider-art:not(.rt-slider-art--contain)) .rt-slider-mark { display: none; }

/* ---- Kind accents: one hue per card family, on the strip underline and glow ---- */
.rt-slider-card--game { --sl-accent: var(--rt-primary-bright, #229ce0); }
.rt-slider-card--agenda { --sl-accent: var(--rt-primary-bright, #229ce0); }
.rt-slider-card--give { --sl-accent: var(--rt-primary-bright, #229ce0); }
.rt-slider-card--help { --sl-accent: #4cc38a; }
.rt-slider-card--join { --sl-accent: var(--rt-primary, #2566b6); }
.rt-slider-card--wish { --sl-accent: #c084fc; }
.rt-slider-card--news { --sl-accent: #fff; }
.rt-slider-card--activity { --sl-accent: var(--rt-primary-bright, #229ce0); }
.rt-slider-card--spirit {
  --sl-accent: #f28c28;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.3) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.25) 0 1px, transparent 2px),
    radial-gradient(120% 160% at 85% -30%, rgba(242, 140, 40, 0.55), transparent 60%),
    linear-gradient(160deg, #2a1a10, #4a2a14 70%, #1f1410);
}

.rt-slider-body {
  padding-top: 64px;
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 24px clamp(22px, 4vw, 52px);
  max-width: 70%;
}
/* The red slash badge: an angled broadcast tag. */
.rt-slider-badge {
  margin: 0;
  padding: 4px 12px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-on-primary, #fff);
  background: var(--rt-primary, #ed1c24);
  transform: skewX(-10deg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.rt-slider-title {
  margin: 0;
  font-family: var(--rt-font-display, "RT Display", "Arial Narrow", sans-serif);
  font-weight: var(--rt-font-display-weight, 400);
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.8);
}
.rt-slider-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  max-width: 52ch;
}
.rt-slider-cta { margin: 8px 0 0; }

/* Off-center cards dim a touch so the stage reads instantly. slider.js sets
   the transform; the dimming rides a CSS var it also sets. */
.rt-slider-card { opacity: calc(0.55 + 0.45 * var(--rt-center, 1)); }

/* ---- Game day treatment: today's game card celebrates ---- */
.rt-slider-card.is-today {
  box-shadow:
    0 0 0 2px var(--rt-primary, #ed1c24),
    0 0 34px rgba(237, 28, 36, 0.45),
    0 14px 40px rgba(0, 0, 0, 0.35);
}
.rt-slider-card.is-today .rt-slider-badge {
  animation: rt-slider-gameday 1.6s ease-in-out infinite;
}
/* The loud chip: free entry is a headline, not a footnote. */
.rt-slider-flag {
  margin: 0;
  padding: 5px 14px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #141414;
  background: #ffffff;
  border: 2px dashed var(--rt-primary, #ed1c24);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
@keyframes rt-slider-gameday {
  0%, 100% { transform: skewX(-10deg) scale(1); }
  50% { transform: skewX(-10deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-slider-card.is-today .rt-slider-badge { animation: none; }
}

/* ---- Step arrows: subtle, findable, click-first ---- */
.rt-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(16, 14, 15, 0.45);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(3px);
}
.rt-slider.is-ready .rt-slider-arrow { display: inline-flex; }
.rt-slider-arrow:hover,
.rt-slider-arrow:focus-visible {
  opacity: 1;
  background: var(--rt-primary, #ed1c24);
  border-color: var(--rt-primary, #ed1c24);
}
.rt-slider-arrow--prev { left: clamp(10px, 2vw, 28px); }
.rt-slider-arrow--next { right: clamp(10px, 2vw, 28px); }
@media (max-width: 700px) {
  /* Touch is the native gesture on phones; arrows would only cover cards. */
  .rt-slider.is-ready .rt-slider-arrow { display: none; }
}

@media (max-width: 700px) {
  .rt-slider-card {
    width: 86vw;
    height: 300px;
  }
  .rt-slider-body { max-width: 88%; }
  .rt-slider-art--contain { inset: auto 4% 6% auto; width: 38%; height: 40%; }
}

/* ---- The whole card is the link; buttons sit right, pointing forward ---- */
.rt-slider-cover { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.rt-slider-card:has(.rt-slider-cover) { cursor: pointer; }
.rt-slider-card:has(.rt-slider-cover:hover) { transform: translateY(-2px); }
.rt-slider-body { position: relative; z-index: 4; pointer-events: none; }
.rt-slider-body .rt-slider-cta a { pointer-events: auto; }
.rt-slider-cta { display: flex; justify-content: flex-end; }
.rt-slider-cta .rt-btn::after { content: "061"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900; margin-left: .5em; font-size: .85em; }