/* =====================================================================
   MACHINE BACKGROUNDS — each machine gets its own room rather than the
   same dark box with different symbols in it.
   ===================================================================== */
.machine-frame { position: relative; overflow: hidden; }

/* Shared particle layer; each machine themes it. */
.machine-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 500ms ease;
}

/* ---- Castle of Terror: fog, a sickly green pall and drifting motes ---- */
.machine-frame[data-machine="terrorCastle"] {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 12, 20, 0.5), transparent 60%),
    radial-gradient(ellipse at 20% 100%, rgba(20, 60, 30, 0.35), transparent 55%),
    linear-gradient(180deg, #14060a, #060203 70%, #000);
}
.machine-frame[data-machine="terrorCastle"]::before {
  opacity: 1;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(160, 255, 190, 0.55), transparent),
    radial-gradient(2px 2px at 74% 12%, rgba(255, 120, 120, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 38% 68%, rgba(200, 255, 220, 0.45), transparent),
    radial-gradient(2.5px 2.5px at 88% 55%, rgba(180, 110, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 55% 88%, rgba(255, 160, 160, 0.4), transparent),
    radial-gradient(2px 2px at 26% 45%, rgba(160, 255, 190, 0.35), transparent);
  animation: terrorMotes 11s linear infinite;
}
/* Motes drift upward and fade, like embers or spores. */
@keyframes terrorMotes {
  0%   { transform: translateY(0) scale(1); opacity: 0.85; }
  50%  { transform: translateY(-26px) scale(1.06); opacity: 0.4; }
  100% { transform: translateY(-52px) scale(1); opacity: 0.85; }
}

@keyframes terrorFogDrift {
  from { transform: translateX(-6%) scaleY(1); }
  to   { transform: translateX(6%) scaleY(1.15); }
}

/* ---- Opal Fruits: warm tropical light and floating fruit ---- */
.machine-frame[data-machine="fruits"] {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 170, 60, 0.28), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 90, 140, 0.22), transparent 55%),
    linear-gradient(180deg, #2a1206, #160a04 70%, #0a0402);
}
.machine-frame[data-machine="fruits"]::before {
  opacity: 1;
  /* Sun-shimmer speckle behind the reels. */
  background-image:
    radial-gradient(2px 2px at 18% 30%, rgba(255, 226, 140, 0.6), transparent),
    radial-gradient(2px 2px at 66% 18%, rgba(255, 180, 90, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 44% 72%, rgba(255, 240, 190, 0.5), transparent),
    radial-gradient(2.5px 2.5px at 84% 62%, rgba(255, 140, 170, 0.45), transparent);
  animation: fruitSparkle 6s ease-in-out infinite alternate;
}
@keyframes fruitSparkle {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.05); }
}

/* Fruit drifting behind the reels. Injected by the client so the images
   can come straight from the machine's own symbol set. */
.machine-bg-fruit {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  filter: blur(0.4px) saturate(1.2);
  animation: fruitFloat linear infinite;
}
@keyframes fruitFloat {
  0%   { transform: translateY(20%) rotate(0deg); }
  100% { transform: translateY(-120%) rotate(340deg); }
}

/* Reels sit above every background layer. */
/* Lift the reels above the new backdrop layers. ONLY these two get
   `position: relative` — .win-lines is absolutely positioned over the
   frame and .win-message-container is fixed to the viewport, and
   overriding either turns them into flex items of .machine-frame, which
   pushed the reels sideways whenever a win message appeared. They
   already carry their own z-index, so they need nothing here. */
.reels { position: relative; z-index: 2; }

/* =====================================================================
   TITLE — the marquee is the first thing seen, so it earns some work.
   ===================================================================== */




/* Shop title icon. */
.shop-title { display: flex; align-items: center; gap: 12px; }
.shop-title-icon {
  width: clamp(38px, 7vw, 62px);
  height: auto;
  filter: drop-shadow(0 0 12px var(--gold));
}

/* Shop item artwork. */
.shop-card-icon img {
  width: clamp(44px, 9vw, 62px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
}
.shop-icon-stack { position: relative; display: inline-flex; line-height: 0; }
.shop-icon-stack .shop-icon-badge {
  position: absolute;
  top: -6px;
  left: -8px;
  width: 40%;
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

/* Chest art is revealed only once decoded — see openOneChest. */
.chest-img { opacity: 0; transition: opacity 220ms ease; }
.chest-img.ready { opacity: 1; }

/* Bet stepper while the reels are turning. */
.bet-stepper.locked { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .machine-frame::before,
  .machine-frame[data-machine="terrorCastle"]::after,
  .machine-bg-fruit,
  .reel-track img.symbol-glow { animation: none; }
}

/* =====================================================================
   MOBILE PASS 2 — everything must be reachable and readable on a phone.
   ===================================================================== */
@media (max-width: 768px) {
  /* Reels get the space back from the slimmer gutters. */
  .machine-frame { padding-left: 4px; padding-right: 4px; }

  /* Big figures shouldn't wrap the tile. */
  .hud-value { white-space: nowrap; }
  .win-fly-amount { font-size: clamp(1.6rem, 11vw, 2.6rem); }
  .win-fly-detail { font-size: 0.5rem; padding: 2px 8px; }

  /* Stats: two per row rather than one wide column. */
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .stats-modal { padding: 16px; }
  .stats-value { font-size: 1rem; }
  .stats-label { font-size: 0.5rem; }

  /* Shop cards keep their artwork legible. */
  .shop-card-icon img { width: 46px; }
  .shop-title-icon { width: 38px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .bet-cost { display: none; }   /* the stepper already shows the cost */
  .shop-card-icon img { width: 40px; }
}