/* ---- Chaser cross-promotion ------------------------------------------------
   Shared unit used by IceChaser / BlitzChaser / DunkChaser to advertise each
   other. Geometry is lifted from BaseChaser's proven .bc-promo; the accent is
   tokenised so a new sibling site is one modifier class, not a new block.

   .xc-blitz  amber   (NFL)     .xc-ice  cyan (NHL)     .xc-dunk  orange (NBA)

   Ships in pairs: an inline banner above the footer, and one dismissible
   corner card. Dismissal is remembered in localStorage so it never nags. */
.xc-promos {
  max-width: 1400px; margin: 32px auto; padding: 0 20px;
  display: grid; gap: 16px;
}
/* Two siblings sit side by side on desktop, stack on narrow screens. */
@media (min-width: 981px) { .xc-promos.xc-two { grid-template-columns: 1fr 1fr; } }

.xc-promo { --xc-accent: #38bdf8; --xc-accent-deep: #0369a1; --xc-accent-dark: #075985; }
.xc-promo.xc-blitz { --xc-accent: #f59e0b; --xc-accent-deep: #b45309; --xc-accent-dark: #92400e; }
.xc-promo.xc-ice   { --xc-accent: #38bdf8; --xc-accent-deep: #0369a1; --xc-accent-dark: #075985; }
.xc-promo.xc-dunk  { --xc-accent: #fb923c; --xc-accent-deep: #c2410c; --xc-accent-dark: #9a3412; }

.xc-promo-inner {
  display: flex; align-items: stretch; gap: 0; overflow: hidden; height: 100%;
  border-radius: 14px; text-decoration: none; background: #10222e;
  border: 1px solid #1d3a4a; box-shadow: 0 6px 24px rgba(8,20,28,.18);
}
.xc-promo-art { flex: 0 0 38%; min-height: 150px; background: #0b1b24 center/cover no-repeat; }
.xc-promo-copy { flex: 1; padding: 22px 26px; color: #e9f1f2; }
.xc-promo-kicker {
  margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--xc-accent);
}
.xc-promo-copy h2 { margin: 0 0 6px; font-size: 1.6rem; color: #fff; font-weight: 800; }
.xc-promo-copy h2 b { color: var(--xc-accent); font-weight: 800; }
.xc-promo-sub { margin: 0 0 14px; font-size: .95rem; color: #b8cdd6; max-width: 54ch; }
.xc-promo-cta {
  display: inline-block; background: var(--xc-accent-deep); color: #fff; font-weight: 700;
  padding: 9px 18px; border-radius: 999px; font-size: .9rem;
}
.xc-promo-inner:hover .xc-promo-cta { background: var(--xc-accent-dark); }
@media (max-width: 720px) {
  .xc-promo-inner { flex-direction: column; }
  .xc-promo-art { flex: none; min-height: 120px; }
  .xc-promo-copy { padding: 18px 20px; }
  .xc-promo-copy h2 { font-size: 1.35rem; }
}

/* Corner card. A full-screen mobile interstitial is treated by Google as
   intrusive, so on phones this is deliberately a compact bottom sheet. */
.xc-launch {
  position: fixed; z-index: 90; color: #e9f1f2;
  background: #10222e top center/100% auto no-repeat;
  border: 1px solid #1d3a4a; box-shadow: 0 18px 50px rgba(5,14,20,.45);
  right: 24px; bottom: 24px; width: 340px;
  /* Art is 3:1 and spans the card width, so the space above the copy is
     width/3 = 113px. NOT a percentage: this element is position:fixed, so a
     percentage resolves against the viewport, not the card. Keep it inside the
     shorthand — a padding-top longhand above this gets silently reset. */
  padding: 113px 22px 22px;
  border-radius: 14px; opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.xc-launch.is-in { opacity: 1; transform: none; }
.xc-launch-x {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
  border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 8px;
  background: rgba(8,20,28,.55); color: #dbe7ee;
}
.xc-launch-x:hover { background: rgba(8,20,28,.85); color: #fff; }
.xc-launch-x:focus-visible,
.xc-promo-inner:focus-visible,
.xc-launch-cta:focus-visible { outline: 2px solid var(--xc-accent); outline-offset: 2px; }
.xc-launch-kicker {
  margin: 0 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--xc-accent);
}
.xc-launch h3 { margin: 0 0 6px; font-size: 1.15rem; color: #fff; }
.xc-launch h3 b { color: var(--xc-accent); }
.xc-launch-sub { margin: 0 0 14px; font-size: .88rem; color: #b8cdd6; }
.xc-launch-cta {
  display: inline-block; background: var(--xc-accent-deep); color: #fff; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; text-decoration: none; font-size: .88rem;
}
.xc-launch-cta:hover { background: var(--xc-accent-dark); color: #fff; }
@media (max-width: 720px) {
  /* full-bleed on phones: card is viewport-20px, so art height is ~123px at 390 */
  .xc-launch { right: 10px; left: 10px; bottom: 10px; width: auto; padding: 123px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .xc-launch { transition: none; } }