/* === Card skins ===
 * Two new selectable card presentations, toggled like the glass theme:
 *   [data-theme="stage"] — Spotlight Stage (Duolingo-like): dimmed backdrop +
 *     spotlight, the active card a colorful surface with a crisp 4px white border.
 *   [data-theme="card"]  — Trading-card / Deck: vivid collectible card, 4px white
 *     border, drop shadow + holographic sheen, on the bright animated backdrop.
 * Both are additive CSS over the existing structure. Default + glass untouched.
 *
 * Colorful BUT legible in a dim theater: each card fills with its event gradient
 * under a dark scrim, so white text always reads. */

/* ── Shared: per-event gradient fill (set always; only used by the skins) ──── */
.card                          { --card-fill: linear-gradient(155deg, var(--grad-intro-1), var(--grad-intro-2) 55%, var(--grad-intro-3)); }
.card[data-type="trivia"]      { --card-fill: linear-gradient(155deg, var(--grad-trivia-1), var(--grad-trivia-2) 55%, var(--grad-trivia-3)); }
.card[data-type="scratcher"]   { --card-fill: linear-gradient(155deg, var(--grad-scratcher-1), var(--grad-scratcher-2) 55%, var(--grad-scratcher-3)); }
.card[data-type="videoBumper"],
.card[data-type="videoPoll"]   { --card-fill: linear-gradient(155deg, var(--grad-video-1), var(--grad-video-2) 55%, var(--grad-video-3)); }
.card[data-type="shop"]        { --card-fill: linear-gradient(155deg, var(--grad-shop-1), var(--grad-shop-2) 55%, var(--grad-shop-3)); }
.card[data-type="ugc"]         { --card-fill: linear-gradient(155deg, var(--grad-ugc-1), var(--grad-ugc-2) 55%, var(--grad-ugc-3)); }
.card[data-type="outro"],
.card[data-type="message"],
.card[data-type="checkin"]     { --card-fill: linear-gradient(155deg, var(--grad-outro-1), var(--grad-outro-2) 55%, var(--grad-outro-3)); }

/* Shared card surface for both skins: colorful fill + dark scrim + 4px border */
[data-theme="stage"] .card,
[data-theme="card"]  .card {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.52)), var(--card-fill);
  border: 4px solid #fff;
  border-radius: 26px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-theme="stage"] .card__header,
[data-theme="card"]  .card__header { color: #fff; }
[data-theme="stage"] .card__label,
[data-theme="card"]  .card__label { color: rgba(255, 255, 255, 0.70); }

/* Options stay legible on the colored surface */
[data-theme="stage"] .trivia__option,
[data-theme="stage"] .vpoll__option,
[data-theme="card"]  .trivia__option,
[data-theme="card"]  .vpoll__option {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.34);
}

/* ── Spotlight Stage ───────────────────────────────────────────────────────── */
[data-theme="stage"] html {
  background: radial-gradient(120% 90% at 50% 30%, #1a1030 0%, #0c0820 55%, #050410 100%);
  background-attachment: fixed;
}
[data-theme="stage"] body { background: transparent; }

/* Dim the animated gradient so the spotlit card pops (color still bleeds through) */
[data-theme="stage"] #gradient-stage { opacity: 0.5; filter: saturate(1.15) brightness(0.6); }

/* Spotlight: sits above the gradient stage (z -1) and below the feed (z 1) */
[data-theme="stage"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 44% at 50% 42%,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    transparent 70%);
}

[data-theme="stage"] .card {
  box-shadow:
    0 28px 72px -12px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 46px -6px var(--card-accent, var(--c-cyan));
}

/* ── Trading-card / Deck ───────────────────────────────────────────────────── */
[data-theme="card"] .card {
  box-shadow:
    0 22px 56px -14px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.20);
}

/* Holographic sheen — subtle diagonal glance of light */
[data-theme="card"] .card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg,
    transparent 32%,
    rgba(255, 255, 255, 0.13) 46%,
    transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  /* Static skins — nothing animates here, but keep parity with the theme system. */
  [data-theme="card"] .card::after { opacity: 0.4; }
}