/* ==========================================================================
   XPLOROO · Hero slot machine module
   hero-slot-machine.css — Visual SHELL only: premium arcade-style cabinet
   with a curved top marquee, glass reel housing (3 static empty windows),
   decorative bolts/bevels, and reserved space below for future controls.
   No branding, no artwork, no moving reels, no buttons, no JS — original,
   self-contained component. Scoped entirely under `.slot-machine` — never
   touches `.hero` or any other section's classes/tokens/files.
   ========================================================================== */

.slot-machine {
  --sm-cyan: var(--cyan-400, #22d3ee);
  --sm-pink: var(--magenta-400, #ef54b4);
  --sm-metal-1: #2b2b34;
  --sm-metal-2: #131318;
  --sm-glass-1: #1a1a22;
  --sm-glass-2: #050507;

  position: relative;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   1. Top marquee — curved arch, glowing cyan-to-pink outer edge, dark
      glossy fill, empty center reserved for branding later.
   ------------------------------------------------------------------------- */
.slot-machine__marquee {
  position: relative;
  z-index: 1;
  height: clamp(5.5rem, 4.8rem + 3vw, 7.5rem);
  margin-inline: 4%;
  padding: 2px; /* glowing border thickness */
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--sm-cyan), var(--sm-pink));
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.35),
    0 0 22px rgba(239, 84, 180, 0.3);
}
.slot-machine__marquee-inner {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    radial-gradient(120% 160% at 50% 0%, var(--sm-metal-1) 0%, var(--sm-glass-2) 75%);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.08), inset 0 -14px 24px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------
   2. Main cabinet — large rounded rectangle, premium dark finish, thin
      neon border, soft shadows. Overlaps the marquee slightly so the two
      pieces read as one machine.
   ------------------------------------------------------------------------- */
.slot-machine__cabinet {
  position: relative;
  z-index: 0;
  margin-top: -1.25rem;
  padding: 2px; /* neon border thickness */
  border-radius: var(--radius-3xl, 28px);
  background: linear-gradient(160deg, var(--sm-cyan) 0%, var(--sm-pink) 100%);
  box-shadow:
    0 0 36px rgba(34, 211, 238, 0.216),
    0 0 36px rgba(239, 84, 180, 0.168);
}
.slot-machine__cabinet::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(155deg, var(--sm-metal-1) 0%, var(--sm-metal-2) 100%);
}

/* Decorative corner bolts — subtle depth, not overdone */
.slot-machine__bolt {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e7e7ec 0%, #8a8a94 45%, #2c2c33 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.4);
}
.slot-machine__bolt--tl { top: 14px; left: 14px; }
.slot-machine__bolt--tr { top: 14px; right: 14px; }
.slot-machine__bolt--bl { bottom: 14px; left: 14px; }
.slot-machine__bolt--br { bottom: 14px; right: 14px; }

/* -------------------------------------------------------------------------
   3. Glass panel — houses the reel row + reserved control space, with a
      glossy top sheen to sell the "glass" feel.
   ------------------------------------------------------------------------- */
.slot-machine__glass {
  position: relative;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) clamp(1rem, 0.8rem + 1vw, 1.5rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  border-radius: inherit;
  overflow: hidden;
}
.slot-machine__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Reel housing — two identical rows of three equally-spaced empty windows
   (6 total). Row gap matches column gap so spacing reads as uniform in
   both directions. Reels fill the full row width (divided evenly into 3)
   with a balanced 4:5 portrait ratio driving the height, so the reel area
   reads as full/premium with minimal unused space.
   ------------------------------------------------------------------------- */
.slot-machine__reels {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 0.4rem + 1vw, 1rem);
}

.slot-machine__reel-row {
  display: flex;
  gap: clamp(0.6rem, 0.4rem + 1vw, 1rem);
}

.slot-machine__reel {
  --slot-border: 2.5px; /* thin neon frame thickness */
  position: relative; /* anchors the embedded reel iframe below */
  flex: 1 1 0%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl, 16px);
  padding: var(--slot-border);
  overflow: hidden; /* the embedded reel must never spill past this frame */
  /* Neon cyan-to-pink gradient frame — the padding trick wraps it around
     the full rounded perimeter of the slot, not just one edge. */
  background: linear-gradient(135deg, #00e5ff 0%, #ff4dff 100%);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(0, 229, 255, 0.28),
    0 0 8px rgba(255, 77, 255, 0.22);
}
.slot-machine__reel::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-xl, 16px) - var(--slot-border));
  background: radial-gradient(120% 140% at 50% 0%, #1c1c24 0%, #050507 80%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 10px 18px rgba(0, 0, 0, 0.55);
}

/* Embedded reel — each slot loads its own standalone reel-demo*.html in an
   iframe (separate document = separate JS context, so the three reels
   animate fully independently). Positioned to exactly fill the same inset
   rect `::before` already occupies, so it sits inside the neon border,
   never on top of it. */
.slot-machine__reel iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(var(--radius-xl, 16px) - var(--slot-border));
  display: block;
}

/* -------------------------------------------------------------------------
   Row separator — premium metallic bar between the two reel rows, with a
   thin, subtle cyan-to-pink neon accent line through its center.
   ------------------------------------------------------------------------- */
.slot-machine__row-divider {
  position: relative;
  height: 6px;
  margin-inline: 3%;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(180deg, #46464f 0%, #1c1c22 45%, #0a0a0d 55%, #3a3a44 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.slot-machine__row-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4%;
  right: 4%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--sm-cyan), var(--sm-pink));
  opacity: 0.55;
  box-shadow: 0 0 4px rgba(34, 211, 238, 0.35), 0 0 4px rgba(239, 84, 180, 0.3);
}

/* Small illuminated "X" separator between reels — built from two crossing
   gradient bars. Hidden by default (mobile layout is untouched); only
   shown in the desktop single-row layout below. */
.slot-machine__x {
  display: none;
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 18px;
  height: 18px;
}
.slot-machine__x::before,
.slot-machine__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sm-cyan), var(--sm-pink));
  opacity: 0.6;
  box-shadow: 0 0 4px rgba(34, 211, 238, 0.35), 0 0 4px rgba(239, 84, 180, 0.3);
}
.slot-machine__x::before { transform: translateY(-50%) rotate(45deg); }
.slot-machine__x::after { transform: translateY(-50%) rotate(-45deg); }

/* Mobile-only duplicate cabinet + connecting wires (see the mobile media
   query below). Hidden by default — including on desktop — so their
   existence never affects the desktop layout in any way; only unhidden
   inside the `max-width: 1023px` query. */
.slot-machine__wires,
.slot-machine__cabinet--clone {
  display: none;
}

/* -------------------------------------------------------------------------
   Mobile (<1024px) — compact single-row hanging cabinet. Same reel markup
   as desktop (no HTML changes to the primary cabinet): the second reel row
   + its divider are hidden here too (mirroring the desktop rule below,
   kept separate so the two breakpoints never depend on each other), and
   corner bolts are dropped. The top marquee is removed entirely (no
   semicircle on mobile), and a duplicate cabinet is shown directly below
   the first, the two bridged by a small gap + two thin metallic wires so
   the lower cabinet reads as hanging from the upper one. Reel
   size/aspect-ratio is untouched — only the surrounding spacing changes.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* 1. One row only */
  .slot-machine__reels .slot-machine__reel-row:last-of-type,
  .slot-machine__row-divider {
    display: none;
  }

  /* 2. No corner bolts — redundant clutter now that the wires carry the
     "hanging" read; desktop keeps all four untouched. */
  .slot-machine__bolt {
    display: none;
  }

  /* 4. Remove the top semicircle/capsule entirely — no reserved space left
     behind; the cabinet now sits flush at the top of `.slot-machine`. */
  .slot-machine__marquee {
    display: none;
  }
  .slot-machine__cabinet {
    margin-top: 0;
  }

  /* 5. Duplicate cabinet + connecting wires, shown only here. */
  .slot-machine__wires {
    position: relative;
    display: block;
    height: 16px;
    margin: 10px auto 0;
  }
  .slot-machine__wire {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, #eef2f8 0%, #a7afc0 55%, #6b7280 100%);
    box-shadow: 0 0 4px rgba(210, 222, 255, 0.55), 0 0 2px rgba(255, 255, 255, 0.4);
    z-index: 3;
  }
  .slot-machine__wire--left { left: 20%; }
  .slot-machine__wire--right { right: 20%; }

  .slot-machine__cabinet--clone {
    display: block;
    margin-top: 0;
  }

  /* 3 & 6 & 8. Denser glass panel + tighter reel gap now that only one row
     remains — no reserved space left below for a second row. */
  .slot-machine__glass {
    padding: clamp(1rem, 0.85rem + 0.6vw, 1.25rem) clamp(0.9rem, 0.75rem + 0.6vw, 1.1rem);
  }
  .slot-machine__reel-row {
    gap: clamp(0.5rem, 0.4rem + 0.8vw, 0.75rem);
  }
}

/* -------------------------------------------------------------------------
   Desktop (>=1024px) — single wide row of 3 larger reels inside a wide
   horizontal cabinet, with illuminated "X" separators between them and an
   asymmetric cyan-to-pink cabinet glow. Mobile markup/rules above are
   untouched; this only re-lays out the existing elements at this breakpoint.

   Also desktop-only: the top marquee/semicircle is removed entirely, the
   four corner bolts are removed, and the rectangular cabinet (frame,
   border, glass body, padding, overall footprint) is enlarged ~30%. The
   reel row itself is capped at its original pre-enlargement width and
   re-centered, so the three reels keep their exact current size/position —
   only the surrounding cabinet/glass space grows around them.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .slot-machine {
    max-width: 83.2rem; /* 64rem × 1.3 — ~30% larger overall footprint */
  }

  /* No top semicircle on desktop, and no leftover space where it was. */
  .slot-machine__marquee {
    display: none;
  }

  /* Cabinet glow shifts from cyan on the left to pink on the right; sits
     flush at the top now that the marquee is gone; border thickness scaled
     ~30% to match the enlarged frame. */
  .slot-machine__cabinet {
    margin-top: 0;
    padding: 2.6px; /* was 2px — ~30% thicker neon border frame */
    box-shadow:
      -50px 0 108px rgba(0, 229, 255, 0.264),
      50px 0 108px rgba(255, 77, 255, 0.24);
  }
  .slot-machine__cabinet::before {
    inset: 2.6px; /* matches the scaled border padding above */
  }

  /* No corner nuts/bolts — clean, premium border. */
  .slot-machine__bolt {
    display: none;
  }

  /* Glass body padding scaled ~30% along with the rest of the frame. */
  .slot-machine__glass {
    padding: clamp(1.43rem, 1.17rem + 1.3vw, 2.08rem) clamp(1.3rem, 1.04rem + 1.3vw, 1.95rem) clamp(1.95rem, 1.56rem + 1.95vw, 2.925rem);
  }

  /* Only one reel row is shown at desktop; the second row and the row
     divider (both mobile-only) are hidden without being removed. */
  .slot-machine__reels .slot-machine__reel-row:last-of-type,
  .slot-machine__row-divider {
    display: none;
  }

  /* Reel area — sized to fill most of the enlarged glass panel instead of
     staying capped at its pre-enlargement width (that cap was leaving a
     large empty margin inside the cabinet). Widened ~30% (60.75rem ×
     1.3 ≈ 78.975rem) so each of the three reel windows grows ~30% wider
     (and, via their existing `aspect-ratio: 4/5`, proportionally taller)
     while remaining centered with the same relative gap between them. */
  .slot-machine__reels {
    max-width: 78.975rem;
    margin-inline: auto;
  }

  .slot-machine__reel-row {
    align-items: center;
    gap: clamp(1rem, 0.6rem + 2vw, 2rem);
  }

  .slot-machine__x {
    display: block;
  }
}