/* ══════════════════════════════════════════════════════════════════
   FYM Slots 3D — «La Machine». The 3D presentation of the slots game,
   lifted VERBATIM from the Test Games/Slots3D mockup and only
   (a) gated on #slots-screen.sl3d-on — the class the 3D module adds when
       it takes the screen, so the 2D fallback's static markup is never
       touched by these rules on a WebGL-less device,
   (b) class-prefixed sl3d- (the platform owns the global namespace),
   (c) English text. Geometry/colours are the mockup's, unchanged.
   Outcome + money live on /api/slots (fair chain); this file is pure skin.
   ══════════════════════════════════════════════════════════════════ */
#slots-screen.sl3d-on {
  --sl-gold:     #e8c15a;
  --sl-gold-hi:  #ffe08a;
  --sl-cream:    #efe3c2;
  --sl-eyebrow:  #d9b866;
  --sl-sub:      #a99a7a;
  --sl-muted:    #8d8168;
  --sl-ruby:     #b01f2c;
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: #050403;
  font-family: 'Manrope', -apple-system, 'Helvetica Neue', sans-serif;
  padding: 0;
}
#slots-screen.sl3d-on::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 58% at 50% 42%,
    rgba(44, 30, 9, 0.5) 0%, rgba(7, 5, 3, 0.9) 55%, #000 100%);
}
#slots-screen.sl3d-on .sl3d-scene { position: absolute; inset: 0; z-index: 1; display: block; }
#slots-screen.sl3d-on .sl3d-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 72% 54% at 50% 44%,
    transparent 42%, rgba(8, 6, 3, 0.4) 72%, rgba(0, 0, 0, 0.85) 100%);
}

#slots-screen.sl3d-on .sl3d-hero {
  position: absolute; z-index: 4; left: 0; right: 0;
  /* below the GameChrome bar in-app; the mockup's own offset standalone */
  top: calc(var(--fym-gc-top, env(safe-area-inset-top, 0px)) + 10px);
  text-align: center; pointer-events: none;
}
#slots-screen.sl3d-on .sl3d-eyebrow {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--sl-eyebrow);
}
#slots-screen.sl3d-on .sl3d-title {
  font-family: 'Bodoni Moda', Georgia, serif; font-style: italic;
  font-size: 24px; font-weight: 700; color: var(--sl-cream);
  margin-top: 1px;
}
#slots-screen.sl3d-on .sl3d-bal {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 6px; padding: 5px 16px; border-radius: 999px;
  background: rgba(10, 14, 10, 0.72);
  border: 1px solid rgba(222, 188, 110, 0.32);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 10px; letter-spacing: 0.16em; color: var(--sl-sub);
}
#slots-screen.sl3d-on .sl3d-bal b {
  font-size: 15px; color: var(--sl-gold-hi); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

#slots-screen.sl3d-on .sl3d-mute {
  position: absolute; z-index: 6;
  top: calc(var(--fym-gc-top, env(safe-area-inset-top, 0px)) + 12px); right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bodoni Moda', Georgia, serif; font-size: 15px;
  color: #e8d9ae; background: rgba(10, 14, 10, 0.78);
  border: 1px solid rgba(222, 188, 110, 0.38); cursor: pointer;
}
#slots-screen.sl3d-on .sl3d-mute.sl3d-off { opacity: 0.45; text-decoration: line-through; }

#slots-screen.sl3d-on .sl3d-verdict {
  position: absolute; z-index: 5; left: 16px; right: 16px;
  top: 17%;
  text-align: center; pointer-events: none; opacity: 0;
}
#slots-screen.sl3d-on .sl3d-verdict.sl3d-onv { opacity: 1; }
#slots-screen.sl3d-on .sl3d-v-word {
  font-family: 'Bodoni Moda', Georgia, serif; font-style: italic;
  font-size: 32px; font-weight: 700; color: var(--sl-gold-hi);
  text-shadow: 0 0 26px rgba(201, 161, 59, 0.5), 0 3px 14px rgba(0, 0, 0, 0.9);
}
#slots-screen.sl3d-on .sl3d-v-sub {
  margin-top: 3px; font-size: 12px; letter-spacing: 0.14em; color: var(--sl-sub);
}
#slots-screen.sl3d-on .sl3d-verdict.sl3d-lose .sl3d-v-word { color: #b9a58e; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9); }
#slots-screen.sl3d-on .sl3d-verdict.sl3d-rise .sl3d-v-word,
#slots-screen.sl3d-on .sl3d-verdict.sl3d-rise .sl3d-v-sub {
  animation: sl3d-vRise 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sl3d-vRise {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#slots-screen.sl3d-on .sl3d-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background:
    linear-gradient(180deg, rgba(38, 26, 10, 0.94), rgba(12, 8, 3, 0.97) 42%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.75),
              inset 0 2px 0 #e8c15a,
              inset 0 4px 0 rgba(122, 74, 20, 0.85),
              inset 0 6px 0 rgba(246, 227, 160, 0.28),
              inset 0 -1px 0 rgba(232, 193, 90, 0.15);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 320ms ease;
}
#slots-screen.sl3d-on .sl3d-sheet.sl3d-flying {
  transform: translateY(115%); opacity: 0; pointer-events: none;
}
#slots-screen.sl3d-on .sl3d-status-line {
  text-align: center; padding-bottom: 9px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; letter-spacing: 0.12em; color: var(--sl-sub);
}
#slots-screen.sl3d-on .sl3d-status-line b { color: var(--sl-gold-hi); font-variant-numeric: tabular-nums; }
#slots-screen.sl3d-on .sl3d-bet-row { display: flex; gap: 10px; justify-content: center; padding-bottom: 11px; }
#slots-screen.sl3d-on .sl3d-chip-btn {
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(122, 74, 20, 0.9);
  background: radial-gradient(circle at 35% 28%,
    #f6e3ae, #d9b45e 52%, #a37f30 78%, #7a5c20);
  cursor: pointer;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 14px; font-weight: 800; color: #4a2d08;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6),
              inset 0 1px 2px rgba(255, 246, 216, 0.8),
              inset 0 -2px 3px rgba(90, 58, 12, 0.5);
  transition: transform 140ms ease, box-shadow 200ms ease, filter 200ms ease;
  filter: saturate(0.65) brightness(0.82);
}
#slots-screen.sl3d-on .sl3d-chip-btn.sl3d-sel {
  filter: none; transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65),
              0 0 16px rgba(246, 227, 160, 0.55),
              inset 0 1px 2px rgba(255, 246, 216, 0.9),
              inset 0 -2px 3px rgba(90, 58, 12, 0.5);
}
#slots-screen.sl3d-on .sl3d-spin-row { display: flex; gap: 8px; }
#slots-screen.sl3d-on .sl3d-spin {
  flex: 1; padding: 15px 10px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid rgba(122, 74, 20, 0.95);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 17px; font-weight: 800; letter-spacing: 0.22em; text-indent: 0.22em;
  color: #3a2408;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.65);
  background: linear-gradient(180deg,
    #fdf0c8 0%, #f0d68e 30%, #d9ab48 62%, #b8892f 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65),
              0 0 24px rgba(232, 193, 90, 0.3),
              inset 0 2px 2px rgba(255, 248, 222, 0.9),
              inset 0 -3px 4px rgba(110, 70, 18, 0.55);
}
#slots-screen.sl3d-on .sl3d-spin:disabled { filter: grayscale(0.6) brightness(0.6); }
#slots-screen.sl3d-on .sl3d-spin:active { transform: scale(0.98); }
#slots-screen.sl3d-on .sl3d-auto {
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(222, 188, 110, 0.4);
  background: rgba(20, 14, 6, 0.75);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: #e8d9ae; white-space: nowrap;
}
#slots-screen.sl3d-on .sl3d-auto.sl3d-onv {
  color: var(--sl-gold-hi); border-color: rgba(255, 224, 130, 0.85);
  box-shadow: 0 0 12px rgba(246, 227, 160, 0.35);
}

#slots-screen.sl3d-on .sl3d-toast {
  position: absolute; z-index: 11; left: 50%;
  top: calc(var(--fym-gc-top, env(safe-area-inset-top, 0px)) + 112px);
  transform: translateX(-50%);
  padding: 9px 20px; border-radius: 999px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 12px; letter-spacing: 0.1em; color: #241a06;
  background: linear-gradient(180deg, #f6e3ae, #c9a23f);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  opacity: 0; pointer-events: none; transition: opacity 300ms ease;
  white-space: nowrap;
}
#slots-screen.sl3d-on .sl3d-toast.sl3d-onv { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #slots-screen.sl3d-on .sl3d-verdict.sl3d-rise .sl3d-v-word,
  #slots-screen.sl3d-on .sl3d-verdict.sl3d-rise .sl3d-v-sub { animation: none; }
}