/* ==========================================================================
   YY GAME — pages/download.css
   Download hero with QR medallion, and the reel-stop install stepper.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.dl-hero {
  position: relative;
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-obsidian-border);
  overflow: hidden;
}

@media (min-width: 768px) {
  .dl-hero { padding-bottom: var(--space-3xl); }
}

.dl-hero__glow {
  position: absolute;
  inset: -25% -10% auto -10%;
  height: 80%;
  background:
    radial-gradient(ellipse 46% 60% at 22% 10%, rgba(107, 42, 142, 0.3) 0%, transparent 66%),
    radial-gradient(ellipse 46% 60% at 80% 6%, rgba(122, 18, 38, 0.32) 0%, transparent 66%),
    radial-gradient(ellipse 68% 40% at 50% 0%, rgba(232, 184, 92, 0.12) 0%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

.dl-hero__grid {
  position: relative;
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 1000px) {
  .dl-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.dl-hero__title {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.dl-hero__lede {
  max-width: 56ch;
  margin-bottom: var(--space-lg);
  font-size: clamp(0.98rem, 2.4vw, 1.1rem);
  line-height: 1.74;
  color: var(--color-text-secondary);
}

.dl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.dl-hero__tg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(34, 158, 217, 0.28);
  border-radius: var(--radius-md);
  background: rgba(34, 158, 217, 0.07);
}

.dl-hero__tg-note {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

/* --- Fact strip ----------------------------------------------------------- */

.dl-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--color-obsidian-border);
  border-radius: var(--radius-md);
  background: var(--color-obsidian-border);
  overflow: hidden;
}

@media (min-width: 620px) {
  .dl-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.dl-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--space-sm) var(--space-xs);
  background: var(--color-obsidian-panel);
  text-align: center;
}

.dl-facts dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dl-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.1;
  color: var(--color-gold-coin);
}

/* ==========================================================================
   HERO STAGE — machine + QR medallion
   ========================================================================== */

.dl-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.dl-hero__machine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 370px;
  padding: 1.4rem 1.1rem 1.5rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 44% at 50% 0%, rgba(255, 233, 174, 0.11) 0%, transparent 62%),
    linear-gradient(168deg, #2a1a14 0%, #17100d 40%, #0d0808 100%);
  box-shadow:
    var(--shadow-card-lg),
    inset 0 1px 0 rgba(255, 233, 174, 0.16),
    inset 0 -18px 40px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .dl-hero__machine { max-width: 400px; padding: 1.6rem 1.5rem 1.8rem; }
}

.dl-hero__reels {
  width: 100%;
}

.dl-hero__machine .reel-rack {
  --reel-h: 62px;
}

@media (min-width: 768px) {
  .dl-hero__machine .reel-rack { --reel-h: 72px; }
}

.dl-hero__machine .phone-stage {
  position: relative;
  z-index: 3;
  padding-block: 0;
  width: 100%;
}

.dl-hero__machine .phone {
  max-width: 182px;
}

@media (min-width: 480px) {
  .dl-hero__machine .phone { max-width: 198px; }
}

@media (min-width: 768px) {
  .dl-hero__machine .phone { max-width: 214px; }
}

/* --- QR medallion --------------------------------------------------------- */

.qr-medallion {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
  border: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(232, 184, 92, 0.1), rgba(11, 7, 8, 0.86));
  box-shadow: var(--shadow-card), var(--shadow-inset-top);
}

.qr-medallion__ring {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 7px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      var(--color-gold-deep) 0deg,
      var(--color-gold-jackpot) 90deg,
      var(--color-gold-deep) 180deg,
      var(--color-gold-jackpot) 270deg,
      var(--color-gold-deep) 360deg);
  box-shadow: 0 0 22px var(--color-gold-faint-a), inset 0 -3px 6px rgba(0, 0, 0, 0.4);
}

.qr-medallion__ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-text-primary);
  padding: 3px;
}

.qr-medallion__caption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.qr-medallion__caption strong {
  font-family: var(--font-display);
  font-size: 1.14rem;
  letter-spacing: 0.06em;
  color: var(--color-gold-coin);
  font-weight: 400;
}

.qr-medallion__caption span {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   REEL-STOP STEPPER
   ========================================================================== */

.reel-steps {
  list-style: none;
  display: grid;
  gap: var(--space-lg);
  counter-reset: reelstep;
}

.reel-step {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-obsidian-border);
  border-radius: var(--radius-lg);
  background: var(--grad-panel);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) var(--ease-out);
}

.reel-step:hover {
  border-color: var(--color-gold-deep);
}

@media (min-width: 768px) {
  .reel-step {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
    padding: var(--space-xl);
  }
}

/* Connecting rail between the reel windows */
@media (min-width: 768px) {
  .reel-steps > .reel-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--space-xl) + 66px);
    bottom: calc(var(--space-lg) * -1);
    width: 2px;
    height: var(--space-lg);
    background: repeating-linear-gradient(180deg,
      var(--color-gold-deep) 0 5px, transparent 5px 11px);
    opacity: 0.6;
  }
}

/* --- The reel window ------------------------------------------------------ */

.reel-step__window {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 132px;
  border: 1px solid rgba(232, 184, 92, 0.32);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #120c0a 0%, #241611 26%, #1a1210 74%, #0d0807 100%);
  box-shadow:
    inset 0 10px 16px rgba(0, 0, 0, 0.7),
    inset 0 -10px 16px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

@media (min-width: 768px) {
  .reel-step__window { width: 132px; height: 158px; }
}

/* Glass banding over the reel */
.reel-step__window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.6) 0%, transparent 24%, transparent 76%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

/* Payline flash across the window on reveal */
.reel-step__window::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4%;
  right: -4%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--color-gold-jackpot), transparent);
  opacity: 0;
  z-index: 2;
}

.reel-step.is-revealed .reel-step__window::before {
  animation: step-payline 1.6s var(--ease-in-out) 520ms 2;
}

@keyframes step-payline {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.reel-step__symbol {
  display: grid;
  place-items: center;
  width: 58%;
  color: var(--color-gold-coin);
  transform: translateY(-130%);
  opacity: 0;
}

.reel-step__symbol svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

.reel-step.is-revealed .reel-step__symbol {
  animation: symbol-drop 760ms var(--ease-spring) 200ms forwards;
}

@keyframes symbol-drop {
  0% { transform: translateY(-130%); opacity: 0; }
  62% { transform: translateY(9%); opacity: 1; }
  82% { transform: translateY(-4%); }
  100% { transform: translateY(0); opacity: 1; }
}

.reel-step__index {
  position: absolute;
  bottom: 6px;
  right: 9px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: 0.06em;
  color: var(--color-gold-deep);
  z-index: 3;
}

/* --- Step body ------------------------------------------------------------ */

.reel-step__body h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-gold-coin);
}

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

.reel-step__aside {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-violet-light);
  border-radius: var(--radius-sm);
  background: rgba(107, 42, 142, 0.1);
  font-size: var(--fs-xs) !important;
}

/* Reduced motion: symbols simply sit in place */
@media (prefers-reduced-motion: reduce) {
  .reel-step__symbol {
    transform: none;
    opacity: 1;
    animation: none !important;
  }

  .reel-step__window::before { opacity: 0.5; animation: none !important; }
}