/* ============================================================
   BuildSpin — responsive + reduced motion
   ============================================================ */

/* comfortably mid-size */
@media (max-width: 1024px) {
  .machine-zone { padding-right: 68px; }
  .handle { right: -72px; transform: scale(.9); transform-origin: left center; }
}

@media (max-width: 860px) {
  :root { --tile-h: 66px; --tile-fs: 12.5px; }
  .machine { padding: 16px 16px 0; }
  .machine::before { left: 5px; } .machine::after { right: 5px; }
  .machine__base { margin: 20px -16px 0; }
  .steps { flex-direction: column; gap: 10px; align-items: flex-start; max-width: 420px; }
  .steps__sep { display: none; }
  .slogans { grid-template-columns: 1fr; max-width: 520px; }
}

/* phones: reels drop to 3x2 grid, handle docks to the cabinet edge */
@media (max-width: 700px) {
  :root { --tile-h: 58px; --tile-fs: 11.5px; }

  .machine-zone { padding-right: 0; width: calc(100% - 24px); }

  .reels { grid-template-columns: repeat(3, 1fr); gap: 6px; row-gap: 10px; }
  .reel__window { height: calc(var(--tile-h, 58px) * 3); }
  .payline { display: none; }

  .marquee__inner { flex-direction: column; gap: 4px; padding: 14px 10px; }
  .marquee__lobster { width: 74px; }
  .marquee__tag { letter-spacing: .22em; }

  .console__row { flex-direction: column; }
  .pullbtn { width: 100%; min-height: 62px; }
  .console__hint { white-space: normal; font-size: 11.5px; }

  /* phones: the PULL button is the handle */
  .handle { display: none; }

  .bank__lights { gap: 6px; }
  .bank__led { width: 22px; }

  .ticker__text { font-size: 11.5px; letter-spacing: .16em; }
  .reel__plaque { letter-spacing: .1em; font-size: 9px; }

  .cardactions .btn { flex: 1 1 46%; font-size: 13.5px; padding: 12px 10px; }
  .ticket { padding: 26px 22px 24px; }
  .ticket__claim { font-size: 12.5px; }

  .topbar { padding-top: 12px; }
  .topbar__brand span { display: none; }

  .gallery__rail { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .gallery__rail { grid-template-columns: 1fr; }
  .receipt { padding: 20px 16px 24px; font-size: 12.25px; }
  .receipt__stamp { right: 8px; top: 108px; font-size: 11px; }
  .receipt__foil { left: 8px; top: 100px; width: 44px; height: 44px; }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .scene__glow, .marquee__title, .marquee__lobster .lob__glow,
  .ticker__text, .receipt__foil, .ticket::after { animation: none !important; }
  .ticker__mask { overflow-x: auto; }
  .ticker__text { padding-left: 12px; transform: none; }
  html { scroll-behavior: auto; }
}