/* ============================================================
   Mythic Picks 2026 — marketing site
   Mobile-first. Dark mode. Honey-glow gold + twilight purple.
   ============================================================ */

/* ---------------------------------------------------------------
   Reset + base
--------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 160ms ease;
}
a:hover { color: var(--accent-soft); }

img, svg { display: block; max-width: 100%; height: auto; }

button { font: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.visually-hidden,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px;
  background: var(--accent); color: #1A0F38;
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-weight: 700; z-index: 200;
}

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------
   Layout primitives
--------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 720px) { .container { padding-inline: var(--space-8); } }

.section {
  position: relative;
  padding-block: var(--space-16);
}
@media (min-width: 1024px) { .section { padding-block: var(--space-24); } }

.section__head { max-width: 38rem; margin-bottom: var(--space-10); }
.section__title { font-size: var(--fs-2xl); }
.section__lede { color: var(--muted); margin-top: var(--space-3); font-size: var(--fs-lg); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--gold { color: var(--gold); }
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .eyebrow__dot { animation: none; } }

/* ---------------------------------------------------------------
   Background decor
--------------------------------------------------------------- */
.bg-decor {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.bg-decor__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(239, 193, 99, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 193, 99, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7) 0%, transparent 70%);
}
.bg-decor__glow {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
}
.bg-decor__glow--cyan {
  top: -20vmax; left: -10vmax;
  background: radial-gradient(circle, rgba(239, 193, 99, 0.55), transparent 60%);
}
.bg-decor__glow--gold {
  bottom: -25vmax; right: -15vmax;
  background: radial-gradient(circle, rgba(239, 193, 99, 0.35), transparent 60%);
  opacity: 0.25;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.85), rgba(26, 15, 56, 0.55));
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}
.logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.logo img { height: 32px; width: auto; }
.logo__wordmark { display: none; }
@media (min-width: 720px) { .logo__wordmark { display: block; } }

.site-nav { display: none; gap: var(--space-7); }
@media (min-width: 1024px) { .site-nav { display: flex; } }
.site-nav a {
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-nav a:hover { color: var(--accent); }

.site-header__cta { margin-left: auto; }
@media (min-width: 1024px) { .site-header__cta { margin-left: 0; } }

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--border-bold);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 160ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  --btn-fg: #1A0F38;
  --btn-border: transparent;
  box-shadow: var(--glow-soft);
}
.btn--primary:hover { box-shadow: var(--glow-cyan); }

.btn--ghost {
  --btn-bg: rgba(239, 193, 99, 0.06);
  --btn-fg: var(--text);
  --btn-border: var(--border-bold);
}
.btn--ghost:hover { background: rgba(239, 193, 99, 0.12); color: var(--accent); }

.btn--gold {
  --btn-bg: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  --btn-fg: #1A0F38;
  --btn-border: transparent;
}

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
}
@media (min-width: 1024px) { .hero { padding-block: var(--space-20) var(--space-24); } }

.hero__inner {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.display { font-size: var(--fs-hero); letter-spacing: 0.01em; }
.display__line { display: block; }
.display__line--accent { color: var(--accent); }

.hero__lede {
  color: var(--text-soft);
  font-size: var(--fs-lg);
  max-width: 36rem;
}

.hero__cta-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2);
}

.store-badges {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-3);
}
.store-badges--sm { margin-top: var(--space-5); gap: var(--space-2); }

.store-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0.6rem 1rem;
  background: rgba(10, 5, 28, 0.7);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: not-allowed;
}
.store-badge__icon { color: var(--text); opacity: 0.95; }
.store-badge__small { display: block; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.store-badge__big { font-family: var(--font-display); font-size: var(--fs-md); }
.store-badges--sm .store-badge { padding: 0.45rem 0.8rem; }
.store-badges--sm .store-badge__big { font-size: var(--fs-sm); }

.hero__rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-3);
}
.hero__stars { color: var(--gold); letter-spacing: 0.15em; }
.hero__rating-note { color: var(--muted-dim); font-style: italic; }

/* Hero stage — 3-up phone */
.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 28rem;
  padding-block: var(--space-6);
}
.phone {
  margin: 0;
  position: relative;
  width: 60%;
  max-width: 22rem;
  border-radius: 36px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(239, 193, 99, 0.18);
  background: var(--bg-elev);
}
.phone img { width: 100%; height: auto; display: block; }
.phone--front {
  z-index: 3;
  transform: translateY(0) rotate(0);
  box-shadow: var(--shadow-card), var(--glow-cyan);
}
.phone--back {
  position: absolute;
  z-index: 2;
  width: 48%;
  opacity: 0.96;
}
.phone--leagues {
  left: 5%;
  transform: translateY(8%) rotate(-7deg);
}
.phone--arena {
  right: 5%;
  transform: translateY(8%) rotate(7deg);
}
@media (min-width: 720px) {
  .hero__stage { min-height: 36rem; }
  .phone { max-width: 26rem; }
}
@media (min-width: 1024px) {
  .hero__stage { min-height: 40rem; }
  .phone--leagues { transform: translateY(6%) rotate(-9deg); }
  .phone--arena { transform: translateY(6%) rotate(9deg); }
}

/* ---------------------------------------------------------------
   Modes
--------------------------------------------------------------- */
.modes-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .modes-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.mode-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bold);
  box-shadow: var(--glow-soft);
}

.mode-card__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ---- Arena visual: hex grid, bolt, HP bar ---- */
.mode-card__visual--arena {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(239, 193, 99, 0.28), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(26, 15, 56, 0.95), transparent 60%),
    linear-gradient(135deg, #1A0F38 0%, #120A2E 100%);
}
.mode-card__hex-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(60deg, rgba(239, 193, 99, 0.10) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(239, 193, 99, 0.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(239, 193, 99, 0.05) 1px, transparent 1px);
  background-size: 36px 62px, 36px 62px, 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.9) 30%, transparent 75%);
  pointer-events: none;
}
.mode-card__bolt {
  position: absolute;
  top: -10%; left: 50%;
  width: 3px; height: 130%;
  transform-origin: top center;
  transform: translateX(-50%) rotate(12deg);
  background: linear-gradient(180deg, transparent, var(--accent) 30%, var(--accent-soft) 50%, var(--accent) 70%, transparent);
  box-shadow: 0 0 18px var(--accent), 0 0 38px rgba(239, 193, 99, 0.45);
  opacity: 0;
  animation: modeBolt 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes modeBolt {
  0%, 60%, 100% { opacity: 0; transform: translateX(-50%) rotate(12deg) scaleY(0.85); }
  68% { opacity: 1; transform: translateX(-50%) rotate(12deg) scaleY(1); }
  78% { opacity: 0; transform: translateX(-50%) rotate(12deg) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .mode-card__bolt { animation: none; } }

.mode-card__hp {
  position: absolute;
  bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
  z-index: 2;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.mode-card__hp-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warning);
}
.mode-card__hp-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 107, 94, 0.18);
  overflow: hidden;
  border: 1px solid rgba(255, 107, 94, 0.4);
}
.mode-card__hp-fill {
  display: block;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, #FF6B5E, #FFAA66);
  box-shadow: 0 0 12px rgba(255, 107, 94, 0.6);
  animation: modeHp 3.6s ease-in-out infinite;
}
@keyframes modeHp {
  0%, 64% { width: 45%; }
  72% { width: 18%; }
  100% { width: 18%; }
}
@media (prefers-reduced-motion: reduce) { .mode-card__hp-fill { animation: none; } }

/* ---- Leagues visual: data grid, sparkline, standings ---- */
.mode-card__visual--leagues {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(239, 193, 99, 0.22), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(26, 15, 56, 0.95), transparent 60%),
    linear-gradient(135deg, #241551 0%, #120A2E 100%);
}
.mode-card__data-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(239, 193, 99, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 193, 99, 0.04) 1px, transparent 1px);
  background-size: 100% 26px, 56px 100%;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.9) 30%, transparent 80%);
  pointer-events: none;
}
.mode-card__sparkline {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 50%; max-width: 12rem; height: auto;
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(239, 193, 99, 0.5));
  pointer-events: none;
}
.mode-card__standings {
  position: absolute;
  bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
  z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(239, 193, 99, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(26, 15, 56, 0.7);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.mode-card__standings-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-3);
  padding: 0.45rem 0.7rem;
  color: var(--text-soft);
}
.mode-card__standings-row + .mode-card__standings-row {
  border-top: 1px solid rgba(239, 193, 99, 0.12);
}
.mode-card__standings-row--me {
  background: rgba(239, 193, 99, 0.10);
  color: var(--gold-soft);
}
.standings-rank { color: var(--muted); }
.mode-card__standings-row--me .standings-rank { color: var(--gold); }
.standings-team { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.standings-rec { color: var(--muted); }
.standings-pts { color: var(--gold-soft); }
.mode-card__chip {
  position: absolute; top: var(--space-4); left: var(--space-4);
  z-index: 2;
  padding: 0.3rem 0.7rem;
  background: rgba(239, 193, 99, 0.12);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.mode-card__chip--gold {
  background: rgba(239, 193, 99, 0.14);
  border-color: var(--border-gold);
  color: var(--gold);
}
.mode-card__spotlight {
  width: clamp(140px, 30%, 200px);
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(239, 193, 99, 0.35));
  transition: transform 400ms ease, filter 400ms ease;
}
.mode-card__visual--gold .mode-card__spotlight {
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(239, 193, 99, 0.35));
}
.mode-card:hover .mode-card__spotlight {
  transform: scale(1.06) rotate(-2deg);
}

.mode-card__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.mode-card__kicker { color: var(--accent); font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.16em; text-transform: uppercase; }
.mode-card__kicker--gold { color: var(--gold); }
.mode-card__title { font-size: var(--fs-xl); }
.mode-card__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
  letter-spacing: 0.01em;
  font-style: italic;
}
.mode-card--leagues .mode-card__tagline { color: var(--gold-soft); }
.mode-card__copy { color: var(--text-soft); }

/* Session "How a typical session looks" */
.mode-card__session {
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(10, 5, 28, 0.5);
}
.mode-card--leagues .mode-card__session { border-color: var(--border-gold); }
.mode-card__session-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.mode-card__steps {
  display: flex; flex-direction: column; gap: var(--space-3);
  list-style: none;
  padding: 0; margin: 0;
}
.mode-card__step {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border-soft);
  position: relative;
}
.mode-card__steps--gold .mode-card__step { border-bottom-color: rgba(239, 193, 99, 0.18); }
.mode-card__step:last-child { padding-bottom: 0; border-bottom: 0; }

.mode-card__step-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  width: 1.8rem;
}
.mode-card__steps--gold .mode-card__step-num { color: var(--gold); }

.mode-card__step-icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: rgba(239, 193, 99, 0.10);
  border: 1px solid var(--border-bold);
  display: grid; place-items: center;
  color: var(--accent);
}
.mode-card__steps--gold .mode-card__step-icon {
  background: rgba(239, 193, 99, 0.10);
  border-color: var(--border-gold);
  color: var(--gold);
}
.mode-card__step-text {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--text);
}

/* "Show me more →" link */
.mode-card__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(239, 193, 99, 0.06);
  transition: background 200ms ease, transform 160ms ease, color 200ms ease;
}
.mode-card__more span {
  display: inline-block;
  transition: transform 200ms ease;
}
.mode-card__more:hover { background: rgba(239, 193, 99, 0.14); transform: translateY(-1px); }
.mode-card__more:hover span { transform: translateX(4px); }
.mode-card__more--gold {
  color: var(--gold);
  border-color: var(--border-gold);
  background: rgba(239, 193, 99, 0.06);
}
.mode-card__more--gold:hover { background: rgba(239, 193, 99, 0.14); color: var(--gold-soft); }

/* ====== Deep sub-sections ====== */
.modes-deep {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.modes-deep__panel {
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--bg-card-2);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
  border: 1px solid var(--border-soft);
}
@media (min-width: 720px) { .modes-deep__panel { padding: var(--space-10); } }
@media (min-width: 1024px) { .modes-deep__panel { padding: var(--space-12); } }

.modes-deep__panel--arena {
  border-color: var(--border-bold);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(239, 193, 99, 0.08), transparent 50%),
    var(--bg-card-2);
}
.modes-deep__panel--codex {
  border-color: var(--border-gold);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(239, 193, 99, 0.10), transparent 50%),
    var(--bg-card-2);
}

.modes-deep__head { max-width: 44rem; margin-bottom: var(--space-8); }
.modes-deep__title { font-size: var(--fs-2xl); margin-top: var(--space-2); }
.modes-deep__lede { color: var(--text-soft); font-size: var(--fs-lg); margin-top: var(--space-3); }

.modes-deep__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .modes-deep__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .modes-deep__panel--arena .modes-deep__grid { grid-template-columns: repeat(3, 1fr); }
}

.modes-deep__fact {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(10, 5, 28, 0.55);
}
.modes-deep__fact-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.modes-deep__fact-value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
  margin-top: var(--space-2);
  letter-spacing: 0.01em;
}
.modes-deep__fact-value span {
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-left: var(--space-1);
}
.modes-deep__fact--gold { border-color: var(--border-gold); }
.modes-deep__fact--gold .modes-deep__fact-value { color: var(--gold-soft); }

/* Arena rarity ramp */
.modes-deep__rarity { margin-top: var(--space-8); }
.modes-deep__rarity-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.modes-deep__rarity-ramp {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.modes-deep__rarity-ramp li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}
.ramp-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.ramp-dot--common { background: var(--rarity-common); color: var(--rarity-common); }
.ramp-dot--rare { background: var(--rarity-rare); color: var(--rarity-rare); }
.ramp-dot--epic { background: var(--rarity-epic); color: var(--rarity-epic); }
.ramp-dot--legendary { background: var(--rarity-legendary); color: var(--rarity-legendary); }
.ramp-dot--fullart { background: var(--rarity-fullart); }

/* Leagues two-column layout (scoring infographic + facts/slots) */
.modes-deep__layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .modes-deep__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}
.modes-deep__scoring {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-gold);
  background: var(--bg-elev);
  max-width: 24rem;
  margin-inline: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 24px rgba(239, 193, 99, 0.18);
}
.modes-deep__scoring img { width: 100%; height: auto; display: block; }

.modes-deep__slots { margin-top: var(--space-6); }
.modes-deep__slot-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slot-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: rgba(10, 5, 28, 0.6);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
}
.slot-chip strong { letter-spacing: 0.04em; }
.slot-chip span { color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.12em; }
.slot-chip--captain { border-color: var(--border-gold); color: var(--gold); }
.slot-chip--captain span { color: var(--gold-soft); }
.slot-chip--star { border-color: var(--border-gold); color: var(--gold-soft); }
.slot-chip--core { color: var(--accent); border-color: var(--border-bold); }
.slot-chip--wildcard { color: #B26BFF; border-color: rgba(178, 107, 255, 0.45); }
.slot-chip--bench { color: var(--muted); }

.modes-deep__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.modes-deep__panel--codex .modes-deep__actions { border-top-color: rgba(239, 193, 99, 0.2); }

/* ===============================================================
   Collectible loop — packs section
   - Rarity ladder: 5 CSS-only card variants showing tier progression
   - Loop stats row
   - Auras showcase: 3 visual aura treatments
   - Loop CTA
   =============================================================== */

/* ---- Rarity ladder ---- */
.rarity-ladder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
@media (min-width: 640px) { .rarity-ladder { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rarity-ladder { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } }

.ladder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-card-2);
  aspect-ratio: 5 / 7;
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.ladder-card:hover { transform: translateY(-6px); }

/* Rarity badge */
.ladder-card__rarity {
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Art placeholder (CSS-only — no images) */
.ladder-card__art {
  flex: 1;
  margin: var(--space-2) 0;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(160deg, var(--bg-elev) 0%, var(--bg) 100%);
}
.ladder-card__art > span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.ladder-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
}
.ladder-card__name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.ladder-card__genre {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ladder-card__note {
  padding: var(--space-2) var(--space-1) 0;
  font-size: 0.7rem;
  color: var(--muted);
  border-top: 1px dashed var(--border-soft);
  margin-top: var(--space-2);
}

/* ===== Tier 01 — COMMON ===== */
/* Flat. Muted gray. No glow. Sets the "this is the floor" baseline. */
.ladder-card--common {
  border: 1px solid rgba(181, 196, 214, 0.25);
}
.ladder-card--common .ladder-card__rarity { color: var(--rarity-common); }

/* ===== Tier 02 — RARE ===== */
/* Cyan border + subtle cyan glow. The first "you got something" moment. */
.ladder-card--rare {
  border: 1px solid rgba(239, 193, 99, 0.5);
  box-shadow: 0 0 0 1px rgba(239, 193, 99, 0.18), 0 12px 32px rgba(239, 193, 99, 0.12);
}
.ladder-card--rare .ladder-card__rarity { color: var(--rarity-rare); }
.ladder-card--rare .ladder-card__art {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(239, 193, 99, 0.22), transparent 60%),
    linear-gradient(160deg, #241551 0%, #120A2E 100%);
}

/* ===== Tier 03 — EPIC ===== */
/* Animated purple gradient border (pulses). Stronger glow. Status-effect tier. */
.ladder-card--epic {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card-2), var(--bg-card-2)) padding-box,
    linear-gradient(135deg, #B26BFF 0%, #FF8FC4 50%, #B26BFF 100%) border-box;
  box-shadow: 0 0 24px rgba(178, 107, 255, 0.28), 0 18px 40px rgba(178, 107, 255, 0.18);
  animation: ladderEpicPulse 4s ease-in-out infinite;
}
@keyframes ladderEpicPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(178, 107, 255, 0.28), 0 18px 40px rgba(178, 107, 255, 0.18); }
  50% { box-shadow: 0 0 38px rgba(178, 107, 255, 0.5), 0 18px 50px rgba(178, 107, 255, 0.3); }
}
.ladder-card--epic .ladder-card__rarity { color: var(--rarity-epic); }
.ladder-card--epic .ladder-card__art {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(178, 107, 255, 0.3), transparent 60%),
    linear-gradient(160deg, #241551 0%, #120A2E 100%);
}

/* ===== Tier 04 — LEGENDARY ===== */
/* Gold foil border + animated shine sweep + 3 sparkle SVG flourishes. */
.ladder-card--legendary {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card-2), var(--bg-card-2)) padding-box,
    linear-gradient(135deg, #FBE3A6 0%, #EFC163 35%, #CC9836 60%, #FBE3A6 100%) border-box;
  box-shadow: 0 0 28px rgba(239, 193, 99, 0.4), 0 22px 50px rgba(239, 193, 99, 0.22);
}
.ladder-card--legendary::before {
  /* Diagonal foil shine that sweeps across the card every 4s */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 232, 150, 0.35) 47%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 232, 150, 0.35) 53%, transparent 70%);
  transform: translateX(-120%);
  animation: ladderLegendarySweep 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
@keyframes ladderLegendarySweep {
  0%, 30% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}
.ladder-card--legendary .ladder-card__rarity { color: var(--rarity-legendary); }
.ladder-card--legendary .ladder-card__art {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(239, 193, 99, 0.32), transparent 60%),
    linear-gradient(160deg, #241551 0%, #120A2E 100%);
}
.ladder-card__sparks {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 4px var(--gold));
  pointer-events: none;
}
.ladder-card__sparks .spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: ladderSpark 2.4s ease-in-out infinite;
}
.ladder-card__sparks .spark--1 { animation-delay: 0s; }
.ladder-card__sparks .spark--2 { animation-delay: 0.6s; }
.ladder-card__sparks .spark--3 { animation-delay: 1.2s; }
@keyframes ladderSpark {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  40%, 60% { opacity: 1; transform: scale(1.1); }
}

/* ===== Tier 05 — FULL-ART ===== */
/* Animated rainbow border + full-bleed art (no inner frame) + holo shimmer. */
.ladder-card--fullart {
  border: 2px solid transparent;
  background:
    var(--bg-card-2) padding-box,
    linear-gradient(135deg, #EFC163 0%, #B26BFF 30%, #EFC163 60%, #FF8FC4 90%, #EFC163 100%) border-box;
  background-size: auto, 300% 300%;
  animation: ladderFullartShift 7s linear infinite;
  box-shadow: 0 0 36px rgba(239, 193, 99, 0.32), 0 28px 60px rgba(178, 107, 255, 0.28);
}
@keyframes ladderFullartShift {
  0%   { background-position: 0% 50%, 0% 50%; }
  50%  { background-position: 0% 50%, 100% 50%; }
  100% { background-position: 0% 50%, 0% 50%; }
}
.ladder-card--fullart .ladder-card__rarity {
  color: var(--text);
  background: var(--rarity-fullart);
  background-size: 200% 200%;
  border: none;
  animation: ladderFullartShift 7s linear infinite;
  color: #1A0F38;
}
.ladder-card__rarity--inverted { font-weight: 800; }

/* Full-bleed art replaces the boxed art for this tier */
.ladder-card--fullart .ladder-card__art-full {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.25), transparent 55%),
    linear-gradient(160deg, #EFC163 0%, #B26BFF 45%, #EFC163 80%, #FF8FC4 100%);
  background-size: 100% 100%, 200% 200%;
  animation: ladderFullartArtShift 8s linear infinite;
  z-index: 0;
}
@keyframes ladderFullartArtShift {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
.ladder-card--fullart .ladder-card__art-full > span {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

/* Holographic shimmer scan-line overlay */
.ladder-card__shimmer {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 2px,
      transparent 2px,
      transparent 8px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.ladder-card--fullart .ladder-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
}
.ladder-card--fullart .ladder-card__name { color: #fff; }
.ladder-card--fullart .ladder-card__genre { color: rgba(255, 255, 255, 0.75); }
.ladder-card--fullart .ladder-card__note {
  position: relative; z-index: 3;
  border-top: 0;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.85);
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ladder-card--epic,
  .ladder-card--fullart,
  .ladder-card--fullart .ladder-card__art-full,
  .ladder-card--fullart .ladder-card__rarity { animation: none; }
  .ladder-card--legendary::before { display: none; }
  .ladder-card__sparks .spark { animation: none; opacity: 0.6; }
}

/* ---- Loop stats ---- */
.loop-stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-12);
}
@media (min-width: 720px) { .loop-stats { grid-template-columns: repeat(3, 1fr); } }
.loop-stat {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: border-color 200ms ease, transform 200ms ease;
}
.loop-stat:hover { border-color: var(--border-bold); transform: translateY(-2px); }
.loop-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--accent);
  letter-spacing: 0.01em;
}
.loop-stat__label { color: var(--text-soft); font-size: var(--fs-sm); }
.loop-stat__label a { color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---- Auras showcase ---- */
.auras {
  padding: var(--space-7);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(239, 193, 99, 0.12), transparent 55%),
    var(--bg-card-2);
}
@media (min-width: 720px) { .auras { padding: var(--space-10); } }

.auras__head { max-width: 38rem; margin-bottom: var(--space-7); }
.auras__head h3 { font-size: var(--fs-xl); margin-top: var(--space-2); }
.auras__head p { color: var(--text-soft); margin-top: var(--space-3); }

.auras__previews {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.aura-preview {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center;
}
.aura-preview__card {
  width: 100%;
  aspect-ratio: 5 / 7;
  max-width: 12rem;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
}
.aura-preview__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  color: var(--text);
}
.aura-preview__hint { color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.06em; }

/* Holo aura: rotating multi-color gradient */
.aura-preview--holo .aura-preview__card {
  background:
    linear-gradient(135deg, #EFC163, #B26BFF 35%, #EFC163 70%, #FF8FC4),
    var(--bg-elev);
  background-size: 200% 200%;
  animation: auraHolo 5s linear infinite;
  box-shadow: 0 0 24px rgba(178, 107, 255, 0.35);
}
@keyframes auraHolo { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.aura-preview--holo .aura-preview__card::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(105deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 10px);
  mix-blend-mode: overlay;
}

/* Neon aura: green pulse with electric glow */
.aura-preview--neon .aura-preview__card {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(155, 225, 93, 0.25), transparent 60%),
    linear-gradient(180deg, #1A0F38, #120A2E);
  border: 2px solid var(--success);
  box-shadow: 0 0 24px rgba(155, 225, 93, 0.45), inset 0 0 24px rgba(155, 225, 93, 0.25);
  animation: auraNeon 2.2s ease-in-out infinite;
}
@keyframes auraNeon {
  0%, 100% { box-shadow: 0 0 18px rgba(155, 225, 93, 0.35), inset 0 0 18px rgba(155, 225, 93, 0.18); }
  50%      { box-shadow: 0 0 36px rgba(155, 225, 93, 0.65), inset 0 0 28px rgba(155, 225, 93, 0.32); }
}

/* Gold aura: gold base + diagonal sweep highlight */
.aura-preview--gold .aura-preview__card {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 217, 107, 0.4), transparent 65%),
    linear-gradient(180deg, #241551 0%, #120A2E 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 28px rgba(239, 193, 99, 0.45);
  color: var(--gold-soft);
}
.aura-preview--gold .aura-preview__card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 232, 150, 0.6) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: auraGoldSweep 3.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes auraGoldSweep {
  0%, 25% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .aura-preview--holo .aura-preview__card,
  .aura-preview--neon .aura-preview__card { animation: none; }
  .aura-preview--gold .aura-preview__card::before { display: none; }
}

/* ---- Loop CTA ---- */
.loop-cta {
  margin-top: var(--space-12);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center;
}
.loop-cta .btn { padding: 1rem 1.6rem; font-size: var(--fs-md); }
.loop-cta__fine { color: var(--muted); font-size: var(--fs-xs); }

/* ===============================================================
   Creator gallery
   - Genre filter chip row (vanilla JS in script.js handles filtering)
   - CSS Grid auto-fill wall of card-back tiles, 24 + 1 CTA
   - Tiles are <button>s — focusable + keyboard activatable
   =============================================================== */

.creator-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.creator-filter__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.creator-filter__chip:hover { color: var(--accent); border-color: var(--border-bold); transform: translateY(-1px); }
.creator-filter__chip.is-active,
.creator-filter__chip[aria-pressed="true"] {
  background: rgba(239, 193, 99, 0.14);
  border-color: var(--border-bold);
  color: var(--accent);
  box-shadow: var(--glow-soft);
}

.creator-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .creator-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}
@media (min-width: 720px) {
  .creator-grid { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
}
@media (min-width: 1024px) {
  /* Brief asks for "6x4 on desktop" — auto-fill at 11rem hits 6 cols at ~76rem container */
  .creator-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

.creator-grid > li[hidden] { display: none; }

.creator-grid__hint {
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-style: italic;
}

/* Creator tile — 3D flip card.
   - .creator-tile is the button (focusable, click toggles .is-flipped)
   - .creator-tile__inner holds two faces and rotates on Y
   - .creator-tile__face--back / --front sit at rotateY(0)/180deg
   - backface-visibility hides the away-facing side
   Filter (visibility) is handled by [hidden] on the <li> in script.js;
   the flip state per tile is preserved across filter changes. */
.creator-tile {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
  perspective: 1200px;
  border-radius: var(--radius-md);
}
.creator-tile:focus-visible {
  outline: none;
}
.creator-tile:focus-visible .creator-tile__inner {
  box-shadow: 0 0 0 3px var(--accent), var(--glow-cyan);
}

.creator-tile__inner {
  position: relative;
  width: 100%; height: 100%;
  display: block;
  border-radius: var(--radius-md);
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 200ms ease;
  will-change: transform;
}
.creator-tile:hover .creator-tile__inner {
  box-shadow: var(--glow-soft);
}
.creator-tile.is-flipped .creator-tile__inner {
  transform: rotateY(180deg);
}

.creator-tile__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.creator-tile__face--back {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  transition: border-color 200ms ease;
}
.creator-tile:hover .creator-tile__face--back { border-color: var(--border-bold); }

/* Front face — creator art with name + small genre tag overlay */
.creator-tile__face--front {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(239, 193, 99, 0.18), transparent 60%),
    linear-gradient(180deg, #241551 0%, #120A2E 100%);
  border: 1px solid var(--border-bold);
  box-shadow: var(--glow-soft);
}

.creator-tile__art {
  width: 100%;
  flex: 1;
  height: 100%;
  object-fit: cover;
  display: block;
}
.creator-tile__art--portrait {
  flex: 1;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.creator-tile__genre {
  position: absolute;
  left: var(--space-2); bottom: var(--space-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(26, 15, 56, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-bold);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Front-face overlay — creator name (bottom) + genre tag (top-right) */
.creator-tile__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: #fff;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  z-index: 2;
}
.creator-tile__tag {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(26, 15, 56, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-bold);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .creator-tile__inner { transition: none; }
}

/* CTA tile — different visual, always shown regardless of filter */
.creator-tile--cta {
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: var(--space-5);
  background:
    repeating-linear-gradient(45deg, rgba(239, 193, 99, 0.05) 0 8px, transparent 8px 16px),
    var(--bg-card);
  border: 2px dashed var(--border-bold);
  border-radius: var(--radius-md);
  color: var(--accent);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.creator-tile--cta:hover {
  background:
    repeating-linear-gradient(45deg, rgba(239, 193, 99, 0.10) 0 8px, transparent 8px 16px),
    var(--bg-card);
  transform: translateY(-4px);
  box-shadow: var(--glow-soft);
}
.creator-tile__cta-icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(239, 193, 99, 0.12);
  border: 1px solid var(--border-bold);
  color: var(--accent);
}
.creator-tile__cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text);
  letter-spacing: 0.01em;
  margin-top: auto;
}
.creator-tile__cta-sub {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.creators-disclaimer {
  margin-top: var(--space-8);
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 50rem;
}
.creators-disclaimer em { font-style: italic; }

/* ---------------------------------------------------------------
   Social
--------------------------------------------------------------- */
.social-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
.social-card {
  padding: var(--space-7);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.social-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bold);
  box-shadow: var(--glow-soft);
}
.social-card__icon { color: var(--accent); }
.social-card h3 { font-size: var(--fs-xl); }
.social-card p { color: var(--text-soft); }

/* ===============================================================
   Plus comparison section
   - Tier price band (Free vs Plus hero cards)
   - Semantic comparison <table> on desktop (≥720px)
   - Card-per-tier <dl> stack on mobile (<720px)
   - Cyan accent for Free column, gold accent for Plus column
   =============================================================== */
.section--plus { background: radial-gradient(ellipse at 50% 0%, rgba(239, 193, 99, 0.06), transparent 60%); }

/* --- Tier price band --- */
.plus-tiers {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-10);
}
@media (min-width: 720px) { .plus-tiers { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.plus-tier {
  position: relative;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--bg-card-2);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (min-width: 720px) { .plus-tier { padding: var(--space-8); } }

.plus-tier--free {
  border: 1px solid var(--border-bold);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(239, 193, 99, 0.10), transparent 50%),
    var(--bg-card-2);
}
.plus-tier--plus {
  border: 1px solid var(--border-gold);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(239, 193, 99, 0.16), transparent 55%),
    var(--bg-card-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(239, 193, 99, 0.18) inset;
}
.plus-tier:hover { transform: translateY(-2px); }

.plus-tier__logo {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: clamp(64px, 9vw, 96px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(239, 193, 99, 0.4));
  pointer-events: none;
}
.plus-tier__head { display: flex; flex-direction: column; gap: var(--space-1); padding-right: 80px; }
.plus-tier__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.plus-tier__kicker--gold { color: var(--gold); }
.plus-tier__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-2);
}
.plus-tier--free .plus-tier__price strong { color: var(--accent-soft); }
.plus-tier--plus .plus-tier__price strong { color: var(--gold-soft); }
.plus-tier__price span { color: var(--muted); font-size: var(--fs-md); }
.plus-tier__or { color: var(--muted-dim); font-size: var(--fs-sm) !important; text-transform: lowercase; letter-spacing: 0.04em; }
.plus-tier__save { color: var(--gold-soft); font-size: var(--fs-sm); margin-top: var(--space-1); }
.plus-tier__line {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text);
  margin-top: var(--space-3);
}
.plus-tier__copy { color: var(--text-soft); }
.plus-tier__cta { align-self: flex-start; margin-top: var(--space-3); }

/* --- Desktop comparison table --- */
.plus-table-wrap {
  display: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
@media (min-width: 720px) { .plus-table-wrap { display: block; } }

.plus-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.plus-table th, .plus-table td {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.plus-table tbody tr:last-child th,
.plus-table tbody tr:last-child td { border-bottom: 0; }

/* Column headers — Free cyan, Plus gold */
.plus-table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(10, 5, 28, 0.55);
  border-bottom: 1px solid var(--border-bold);
}
.plus-table__th-feature { color: var(--muted); }
.plus-table__th-free {
  color: var(--accent);
  text-align: center;
  width: 22%;
  border-left: 1px solid var(--border-soft);
}
.plus-table__th-plus {
  color: var(--gold);
  text-align: center;
  width: 22%;
  background: rgba(239, 193, 99, 0.06);
  border-left: 1px solid var(--border-soft);
}

/* Row labels */
.plus-table tbody th {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
}

/* Value cells */
.plus-table tbody td {
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-size: var(--fs-md);
  border-left: 1px solid var(--border-soft);
}
.plus-table tbody td.is-free { color: var(--accent-soft); }
.plus-table tbody td.is-plus {
  color: var(--gold-soft);
  background: rgba(239, 193, 99, 0.04);
  font-weight: 700;
}

.plus-table tbody tr { transition: background 160ms ease; }
.plus-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* --- Mobile card-per-tier --- */
.plus-mobile-tiers {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .plus-mobile-tiers { display: none; } }

.plus-mobile-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.plus-mobile-card--free {
  border: 1px solid var(--border-bold);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(239, 193, 99, 0.08), transparent 60%),
    var(--bg-card);
}
.plus-mobile-card--plus {
  border: 1px solid var(--border-gold);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(239, 193, 99, 0.10), transparent 60%),
    var(--bg-card);
}
.plus-mobile-card__head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); }
.plus-mobile-card__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.plus-mobile-card__kicker--gold { color: var(--gold); }
.plus-mobile-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
  margin-top: var(--space-1);
}

.plus-mobile-card__list { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-4); }
.plus-mobile-card__list dt {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}
.plus-mobile-card__list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  text-align: right;
}
.plus-mobile-card--free .plus-mobile-card__list dd { color: var(--accent-soft); }
.plus-mobile-card--plus .plus-mobile-card__list dd { color: var(--gold-soft); font-weight: 700; }

/* Auto-renew note */
.plus-fine {
  margin-top: var(--space-7);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   Daily return
--------------------------------------------------------------- */
.daily-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .daily-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .daily-grid { grid-template-columns: repeat(4, 1fr); } }
.daily-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform 200ms ease, border-color 200ms ease;
}
.daily-card:hover { transform: translateY(-2px); border-color: var(--border-bold); }
.daily-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.4rem; color: var(--accent);
  background: rgba(239, 193, 99, 0.08);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.daily-card h3 { font-size: var(--fs-lg); }
.daily-card p { color: var(--text-soft); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------
   Mailing list
--------------------------------------------------------------- */
.section--mailing {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(239, 193, 99, 0.10), transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(178, 107, 255, 0.08), transparent 50%);
}
.mailing {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--space-7);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xl);
  background: var(--bg-card-2);
  box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) {
  .mailing { grid-template-columns: 1.1fr 1fr; padding: var(--space-12); gap: var(--space-12); }
}
.mailing__copy h2 { margin-top: var(--space-2); }
.mailing__copy p { color: var(--text-soft); margin-top: var(--space-3); }

.mailing__form { display: flex; flex-direction: column; gap: var(--space-4); }
.mailing__field { display: flex; flex-direction: column; gap: var(--space-2); }
.mailing__field label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.mailing__field input {
  padding: 0.85rem 1rem;
  background: rgba(10, 5, 28, 0.85);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mailing__field input::placeholder { color: var(--muted-dim); }
.mailing__field input:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}
.mailing__field input[aria-invalid="true"] {
  border-color: var(--warning);
}
.mailing__turnstile { min-height: 0; }
.mailing__submit { width: 100%; padding: 0.9rem 1.4rem; }
.mailing__fine { color: var(--muted); font-size: var(--fs-xs); text-align: center; margin-top: var(--space-1); }

.form-message {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.form-message.error { color: var(--warning); }
.form-message.success { color: var(--success); }

/* ===============================================================
   FAQ
   Native <details>/<summary>. No custom JS.
   Chevron rotates 180° on [open].
   =============================================================== */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.faq-item:hover { border-color: var(--border-bold); }
.faq-item[open] {
  border-color: var(--border-bold);
  background: linear-gradient(180deg, rgba(239, 193, 99, 0.04), transparent), var(--bg-card);
  box-shadow: var(--glow-soft);
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  color: var(--text);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }

/* Chevron — inline SVG-style via clip-path/border to avoid extra DOM */
.faq-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transform-origin: center;
  transition: transform 220ms ease;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after { transition: none; }
}

.faq-item > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

.faq-item__body {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--text-soft);
}
.faq-item__body > * + * { margin-top: var(--space-3); }
.faq-item__body a {
  color: var(--accent);
  border-bottom: 1px solid rgba(239, 193, 99, 0.35);
  padding-bottom: 1px;
}
.faq-item__body a:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }
.faq-item__body strong { color: var(--text); }

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, transparent, rgba(10, 5, 28, 0.7));
  padding-block: var(--space-12) var(--space-7);
  margin-top: var(--space-16);
}
.site-footer__inner {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.2fr 2fr; } }

.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__wordmark { height: 28px; width: auto; }
.site-footer__tagline { color: var(--muted); font-size: var(--fs-sm); max-width: 22rem; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
}
@media (min-width: 720px) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.site-footer__cols a { color: var(--text-soft); font-size: var(--fs-sm); }
.site-footer__cols a:hover { color: var(--accent); }
.site-footer__cols li { padding-block: 0.25rem; }

.site-footer__base {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
  display: grid; gap: var(--space-3);
}
@media (min-width: 720px) { .site-footer__base { grid-template-columns: 2fr 1fr; align-items: center; } }
.site-footer__disclaimer { color: var(--muted); font-size: var(--fs-xs); max-width: 50rem; }
.site-footer__copy { color: var(--muted-dim); font-size: var(--fs-xs); text-align: left; }
@media (min-width: 720px) { .site-footer__copy { text-align: right; } }

/* ---------------------------------------------------------------
   Reveal animation
--------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}