/* ==========================================================================
   YY GAME — pages/about.css
   Marquee banner, mission/vision panels, principle badges, jackpot stat band.
   ========================================================================== */

/* ==========================================================================
   MARQUEE BANNER
   ========================================================================== */

.about-hero {
  padding-bottom: var(--space-xl);
}

.about-banner {
  position: relative;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  border: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(232, 184, 92, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 60% 80% at 12% 100%, rgba(107, 42, 142, 0.24) 0%, transparent 64%),
    var(--grad-velvet);
  box-shadow: var(--shadow-card-lg), var(--shadow-inset-top);
  text-align: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .about-banner { padding: var(--space-3xl) var(--space-2xl) var(--space-2xl); }
}

/* Marquee word strip across the top of the banner */
.about-banner__marquee {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.about-banner__marquee span {
  padding: 0.14rem 0.7rem;
  border: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-xs);
  background: rgba(11, 7, 8, 0.6);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  padding-left: calc(0.7rem + 0.24em);
  color: var(--color-gold-jackpot);
  text-shadow: 0 0 12px var(--color-gold-coin-a);
  animation: bulb-pulse 2.6s var(--ease-in-out) infinite;
}

.about-banner__marquee span:nth-child(2) { animation-delay: 0.3s; }
.about-banner__marquee span:nth-child(3) { animation-delay: 0.6s; }

.about-banner .eyebrow {
  justify-content: center;
}

.about-banner__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: 0.025em;
  margin-bottom: var(--space-md);
}

.about-banner__lede {
  max-width: 68ch;
  margin: 0 auto var(--space-xl);
  font-size: clamp(0.98rem, 2.3vw, 1.12rem);
  line-height: 1.76;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   MISSION / VISION
   ========================================================================== */

.mv-card {
  padding-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .mv-card { padding: var(--space-2xl) var(--space-xl) var(--space-xl); }
}

.mv-card__tag {
  position: absolute;
  top: 0;
  left: var(--space-lg);
  padding: 0.24rem 0.85rem;
  border: 1px solid var(--color-gold-deep);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: linear-gradient(180deg, rgba(122, 18, 38, 0.8), rgba(11, 7, 8, 0.9));
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-marquee);
  text-transform: uppercase;
  color: var(--color-gold-coin);
}

.mv-card--violet .mv-card__tag {
  border-color: var(--color-violet-light);
  background: linear-gradient(180deg, rgba(107, 42, 142, 0.8), rgba(11, 7, 8, 0.9));
  color: var(--color-violet-text);
}

.mv-card__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h3);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.mv-card p {
  font-size: var(--fs-sm);
  line-height: 1.74;
}

/* ==========================================================================
   PRINCIPLES
   ========================================================================== */

.principles {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.principle {
  position: relative;
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  border: 1px solid var(--color-obsidian-border);
  border-radius: var(--radius-lg);
  background: var(--grad-panel);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.principle:hover {
  border-color: var(--color-gold-deep);
  transform: translateY(-4px);
}

/* Coin-token badge straddling the top edge */
.principle__coin {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--color-text-on-gold);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 0 0 5px var(--color-obsidian-panel),
    0 0 0 6px rgba(232, 184, 92, 0.35);
}

.principle__coin svg {
  width: 28px;
  height: 28px;
}

.principle__title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-h3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-coin);
}

.principle p {
  font-size: var(--fs-sm);
  line-height: 1.72;
}

.principle .coin-list {
  text-align: left;
}

.principle .coin-list li {
  font-size: var(--fs-xs);
}

/* ==========================================================================
   SCOPE CARDS
   ========================================================================== */

.scope-card .coin-list li {
  font-size: var(--fs-sm);
}

.scope-card--yes {
  border-left: 3px solid var(--color-jade);
}

.scope-card--yes .payline-card__title {
  color: var(--color-jade);
}

.scope-card--yes .coin-list li::before {
  background: linear-gradient(140deg, #7ff0c9, var(--color-jade) 44%, var(--color-jade-deep));
  box-shadow: 0 0 0 2px rgba(47, 211, 160, 0.18), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

.scope-card--no {
  border-left: 3px solid var(--color-danger);
}

.scope-card--no .payline-card__title {
  color: var(--color-danger-text);
}

.scope-card--no .coin-list li::before {
  background: linear-gradient(140deg, #f08a84, var(--color-danger) 44%, #6d1712);
  box-shadow: 0 0 0 2px rgba(193, 58, 52, 0.18), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   JACKPOT STAT BAND
   ========================================================================== */

.stat-band--jackpot {
  border-color: var(--color-gold-deep);
  background: var(--color-gold-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-lg);
}

@media (min-width: 900px) {
  .stat-band--jackpot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-band--jackpot .stat-band__item {
  background:
    radial-gradient(ellipse 90% 100% at 50% 0%, rgba(232, 184, 92, 0.09) 0%, transparent 64%),
    linear-gradient(180deg, #1a1210, #0d0807);
  padding-block: var(--space-xl);
}

.stat-band--jackpot .stat-band__value {
  color: var(--color-gold-jackpot);
  text-shadow: 0 0 18px var(--color-gold-coin-a);
}