/* ═══════════════════════════════════════════════════════
   CHARGE THE REELS — style.css
   Vanilla CSS. Single file. No frameworks.
════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────── */
:root {
  --red:         #E8001A;
  --red-bright:  #FF2233;
  --gold:        #FFD234;
  --white:       #FFFFFF;
  --dark:        #080003;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Manrope', sans-serif;

  /* Frame+Light.png is 1285 × 1156 — use exact ratio */
  --frame-ratio: calc(1285 / 1156);
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100svh;   /* hard cap — no overflow axis */
  overflow: hidden;
  overscroll-behavior: none;              /* kill bounce/rubber-band scroll on iOS/Android */
  background: var(--dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════
   BACKGROUNDS
════════════════════════════════════════════════════════ */

/* bg-layer sits at z-index 0 so it renders ABOVE body { background } (which is a block-level
   paint step that would cover any negative z-index fixed element).
   The CSS background-image is the static fallback shown when video is blocked or loading. */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: url(../assets/img/bg-desktop.jpg) center / cover no-repeat;
}

/* Portrait (all phones + all tablets incl. iPad Pro 1024×1366): mobile fallback image */
@media (orientation: portrait) {
  .bg-layer {
    background-image: url(../assets/img/form-bg.webp);
    background-position: center top;
  }
}

/* Each video fills the bg-layer; hidden by default, modifier shows the right one */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  display: none;
}

/* Landscape/desktop default: show PC video */
.bg-video--desktop { display: block; }
.bg-video--mobile  { display: none; }

/* Portrait (all phones + all tablets incl. iPad Pro 1024×1366): mobile video */
@media (orientation: portrait) {
  .bg-video--desktop { display: none !important; }
  .bg-video--mobile  { display: block !important; object-position: center top !important; }
}

/* Landscape + wide screen: enforce desktop video */
@media (orientation: landscape) and (min-width: 1024px) {
  .bg-video--desktop { display: block !important; }
  .bg-video--mobile  { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   PAGE LAYOUT — full viewport, slot shifted right on desktop
════════════════════════════════════════════════════════ */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;       /* slot toward right → clears background logo on left */
  padding-right: clamp(32px, 7vw, 120px);
  width: 100%;
  height: 100svh;
  overflow: hidden;                /* prevent scroll; does not clip filter on children */
}

.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 26px);     /* gap controls slot → button spacing */
  padding-bottom: clamp(18px, 3vh, 36px); /* room for button box-shadow at bottom */
}

/* ── Logo above slot drum ────────────────────────────── */
.slot-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  margin-bottom: -6px;             /* pulls logo closer to slot (reduces gap specifically here) */
}

.slot-logo img {
  display: block;
  width: clamp(240px, 30vw, 340px);
  height: auto;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .slot-logo img {
    width: clamp(190px, 58vw, 260px);
  }
}

/* ═══════════════════════════════════════════════════════
   SLOT MACHINE
   Frame+Light.png is 1285 × 1156 → aspect-ratio ~1.11
   The slot-machine uses the frame as background-image.
   Reels are inset inside the frame's window area.
════════════════════════════════════════════════════════ */
.slot-machine {
  position: relative;
  overflow: visible;               /* visible so filter:drop-shadow renders freely outside box */
  /* Bigger on desktop; height constrained so button never clips at 100svh */
  width: min(52vw, 720px, calc((100svh - 160px) * 1.111));
  aspect-ratio: 1285 / 1156;
  /* frame moved to ::after so it renders above .reels */
  filter:
    drop-shadow(0 0 36px rgba(232, 0, 26, 0.28));
}

/* Frame image on top layer — covers reel edges so contour sits above drum */
.slot-machine::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(../assets/img/frame-light.png?v=r20260630-assetfix);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  pointer-events: none;
}

/* Reel window: inset from slot-machine edges to sit inside frame border */
.reels {
  position: absolute;
  inset: 5.5% 10% 5.5% 11%; /* top right bottom left — frame ::after sits above at z-index 2 */
  z-index: 1;
  display: flex;
  gap: 0;
  overflow: hidden;
  background: rgba(0, 0, 4, 0.35);
  border-radius: 4px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.60);
}

/* Single reel strip */
.reel {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.reel:last-child { border-right: none; }

/* Icons strip — JS applies height + transform for animation */
.reel .icons {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Symbol cell */
.reel .symbol {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5%;             /* was 5% — tighter, symbols fill cells more densely */
  box-sizing: border-box;
}

.reel .symbol-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel .symbol-inner img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

/* Win symbol highlight */
.reel .symbol.is-win .symbol-inner img {
  filter: drop-shadow(0 0 8px rgba(232, 0, 26, 0.90))
          drop-shadow(0 0 3px var(--gold));
  animation: win-symbol-pulse 0.7s ease-in-out infinite alternate;
}

/* ═══════════════════════════════════════════════════════
   WIN LINE SVG — multi-layer lightning effect
   3 <path> layers per win pattern: glow / main / core
   Drawn via stroke-dashoffset animation; pulsed after draw
════════════════════════════════════════════════════════ */
.win-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  overflow: visible;        /* let SVG filter paint slightly outside bounds */
  opacity: 1;               /* always present; groups control their own visibility */
}

/* kept for JS compat (.is-visible added by showWinLine) — already opacity:1 */
.win-svg.is-visible { opacity: 1; }

/* ── Win group: hidden by default ─────────────────────── */
.win-line {
  opacity: 0;
  transition: opacity 0.10s ease;
}
.win-line.is-active { opacity: 1; }

/* ── Shared path base ──────────────────────────────────── */
.win-line__glow,
.win-line__main,
.win-line__core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;   /* fully hidden; animation draws to 0 */
}

/* Outer glow — fat blurred orange-red halo */
.win-line__glow {
  stroke: rgba(255, 72, 0, 0.55);
  stroke-width: 9;
  filter: url(#wglow-soft);
}

/* Main line — orange-gold */
.win-line__main {
  stroke: #ffb000;
  stroke-width: 4.5;
}

/* Core — hot white-yellow center */
.win-line__core {
  stroke: #fff7a8;
  stroke-width: 1.8;
}

/* ── Active: staggered draw → pulse ───────────────────── */
.win-line.is-active .win-line__glow {
  animation:
    wlDraw      0.55s ease-out    0s    both,
    wlGlowPulse 1.6s  ease-in-out 0.55s infinite;
}
.win-line.is-active .win-line__main {
  animation:
    wlDraw      0.50s ease-out    0.07s both,
    wlMainPulse 1.6s  ease-in-out 0.60s infinite;
}
.win-line.is-active .win-line__core {
  animation:
    wlDraw      0.45s ease-out    0.13s both,
    wlCorePulse 1.6s  ease-in-out 0.65s infinite;
}

/* Mobile: thinner strokes */
@media (max-width: 768px) {
  .win-line__glow { stroke-width: 7; }
  .win-line__main { stroke-width: 3.5; }
  .win-line__core { stroke-width: 1.5; }
}

@keyframes wlDraw {
  from { stroke-dashoffset: 150; }
  to   { stroke-dashoffset: 0; }
}

@keyframes wlGlowPulse {
  0%, 100% { stroke-opacity: 0.65; }
  50%       { stroke-opacity: 1; }
}

@keyframes wlMainPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 176, 0, 0.85)); }
  50%       { filter: drop-shadow(0 0 14px rgba(255, 215, 26, 1.0)); }
}

@keyframes wlCorePulse {
  0%, 100% { opacity: 0.70; }
  50%       { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   SPIN BUTTON — premium CTA
════════════════════════════════════════════════════════ */
.spin-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(220px, 38vw, 300px);
  height: clamp(60px, 7vh, 78px);
  padding: 0 clamp(40px, 7vw, 60px);
  border-radius: 100px;
  /* Red → orange gradient — яскравий warm CTA */
  background: linear-gradient(140deg, #FF5200 0%, #FF1A20 40%, #CC0018 100%);
  box-shadow:
    0 0 0 2px rgba(255, 90, 0, 0.28),         /* tight orange ring */
    0 0 40px rgba(255, 55, 0, 0.75),           /* orange glow halo */
    0 0 90px rgba(232, 0, 26, 0.35),           /* wide red bloom */
    inset 0 1px 0 rgba(255, 200, 100, 0.30),   /* top highlight */
    inset 0 -2px 0 rgba(0, 0, 0, 0.22);        /* bottom edge depth */
  transition: transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.13s ease,
              background 0.13s ease;
  overflow: hidden;
  will-change: transform;
}

/* Glossy top sheen */
.spin-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}

/* Hover — lifts + stronger bloom */
.spin-btn:hover:not(:disabled):not(.is-disabled):not(.is-spinning) {
  transform: translateY(-3px) scale(1.04);
  background: linear-gradient(140deg, #FF6A00 0%, #FF2820 40%, #D60018 100%);
  box-shadow:
    0 0 0 2px rgba(255, 110, 0, 0.38),
    0 0 60px rgba(255, 70, 0, 1.0),
    0 0 130px rgba(232, 0, 26, 0.55),
    inset 0 1px 0 rgba(255, 200, 100, 0.30);
}

/* Active / pressed */
.spin-btn:active:not(:disabled):not(.is-disabled):not(.is-spinning) {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    0 0 22px rgba(255, 55, 0, 0.60),
    0 2px 10px rgba(0, 0, 0, 0.65),
    inset 0 3px 6px rgba(0, 0, 0, 0.35);
  transition-duration: 0.07s;
}

.spin-btn__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.60), 0 0 20px rgba(255,100,0,0.40);
  white-space: nowrap;
}

/* Spinner (visible while .is-spinning) */
.spin-btn__loader {
  display: none;
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
  z-index: 2;
}

.spin-btn.is-spinning .spin-btn__text { opacity: 0.15; }
.spin-btn.is-spinning .spin-btn__loader { display: block; }

.spin-btn.is-disabled {
  opacity: 0.42;
  pointer-events: none;
  filter: saturate(0.5);
}

/* Idle bounce-pulse — draws the eye, invites a click */
.spin-btn.is-idle { animation: btn-pulse 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }

/* ═══════════════════════════════════════════════════════
   SPIN RESULT OVERLAY (intermediate, spins 1 & 2)
════════════════════════════════════════════════════════ */
.spin-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 3, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  will-change: opacity;
}

.spin-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.spin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 16px);
  padding: clamp(28px, 5vh, 52px) clamp(36px, 8vw, 68px);
  max-width: min(88vw, 500px);
  width: 100%;
  background: linear-gradient(155deg, #1A0008 0%, #0A0004 100%);
  border: 1.5px solid rgba(232, 0, 26, 0.50);
  border-radius: 20px;
  box-shadow:
    0 0 64px rgba(232, 0, 26, 0.35),
    0 0 120px rgba(232, 0, 26, 0.12),
    inset 0 0 40px rgba(232, 0, 26, 0.05);
  text-align: center;
  animation: card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.spin-card__title {
  font-family: 'Roboto Flex', 'Manrope', sans-serif;
  font-size: clamp(16px, 3.2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold) 0%, #FF4433 55%, #FF8800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.spin-card__reward {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  width: 100%;
  max-width: calc(100% - 40px);
  margin-inline: auto;
  margin-block: 0;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.spin-card__nowrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.spin-card__accent {
  white-space: nowrap;
  color: #FC6200;
  font-family: 'Roboto Flex', 'Manrope', sans-serif;
  font-weight: 900;
  font-size: 1em;
}

.spin-card__reward-text {
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.84em;
  text-transform: none;
  max-width: 100%;
}

@media (max-width: 480px) {
  .spin-card__reward {
    font-size: clamp(20px, 6.2vw, 32px);
    gap: 4px 8px;
    max-width: calc(100% - 28px);
  }
}

.spin-card__badge {
  margin-top: clamp(4px, 1vh, 10px);
  padding: 0.35em 1.2em;
  background: rgba(232, 0, 26, 0.10);
  border: 1.5px solid rgba(232, 0, 26, 0.40);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(232, 0, 26, 0.90);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */

/* ── Desktop ≥ 1024px ────────────────────────────────── */
@media (min-width: 1024px) {
  /* slot bigger, page already pushes it right via flex-end + padding-right */
  .slot-machine {
    width: min(52vw, 720px, calc((100svh - 160px) * 1.111));
  }
}

/* ── Wide desktop ≥ 1440px ───────────────────────────── */
@media (min-width: 1440px) {
  .slot-machine {
    width: min(50vw, 780px, calc((100svh - 160px) * 1.111));
  }
  .page {
    padding-right: clamp(60px, 9vw, 160px);
  }
}

/* ── Tablet / Mobile < 1024px ───────────────────────── */
@media (max-width: 1023px) {
  .page {
    /* Center on mobile — background-mob is full-bleed portrait */
    justify-content: center;
    padding-right: 0;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(12px, env(safe-area-inset-bottom));
  }

  .game-area {
    gap: clamp(12px, 2vh, 22px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .slot-logo {
    margin-bottom: -4px;
  }

  .slot-machine {
    /* Fills most of the portrait width; height auto-clamped via svh */
    width: min(88vw, 420px, calc((100svh - 130px) * 1.111));
    filter:
      drop-shadow(0 0 24px rgba(232, 0, 26, 0.25));
  }

  .spin-btn {
    min-width: min(74vw, 260px);
    height: clamp(50px, 11vw, 64px);
    padding: 0 clamp(28px, 7vw, 48px);
  }

  .spin-btn__text {
    font-size: clamp(22px, 6.5vw, 30px);
  }
}

/* ── Mobile ≤ 480px ──────────────────────────────────── */
@media (max-width: 480px) {
  .slot-machine {
    width: min(92vw, 370px, calc((100svh - 120px) * 1.111));
  }

  .spin-btn {
    min-width: min(80vw, 240px);
  }
}

/* ── Short screens (landscape mobile) ───────────────── */
@media (max-height: 600px) and (max-width: 1023px) {
  .game-area { gap: clamp(4px, 1.2vh, 10px); }

  /* In landscape the slot must be height-first */
  .slot-machine { width: min(60vh, 340px); }

  .spin-btn {
    height: clamp(38px, 8.5vw, 50px);
    min-width: min(70vw, 220px);
  }
  .spin-btn__text { font-size: clamp(18px, 5.5vw, 24px); }
}

/* ── Prevent overflow — no axis should scroll ────────── */
html, body  { max-width: 100%; overflow: hidden; }
.page       { max-width: 100%; overflow: hidden; }
.game-area  { max-width: 100%; overflow: visible; } /* visible: glows on slot/button must not be clipped */

/* ═══════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════ */

@keyframes win-symbol-pulse {
  from { filter: drop-shadow(0 0 6px rgba(232,0,26,0.80)) drop-shadow(0 0 2px var(--gold)); }
  to   { filter: drop-shadow(0 0 14px rgba(232,0,26,1.00)) drop-shadow(0 0 6px var(--gold)); }
}

@keyframes card-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1.00); }
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE LAYOUT — CSS variable positioning
   All breakpoints control only: --game-scale, --game-x, --game-y
   .game-area applies them via a single transform rule.
════════════════════════════════════════════════════════ */

:root {
  --game-scale: 1;
  --game-x:     0px;
  --game-y:     0px;
}

.game-area {
  gap: 2px;                       /* logo flush against slot */
  transform: translate(var(--game-x), var(--game-y)) scale(var(--game-scale));
  transform-origin: top center;
  will-change: transform;
}

.slot-logo { margin-bottom: 0; }

/* ── Reward overlay: 3rd bonus long variant (desktop only) ── */
@media (min-width: 769px) {
  .spin-card__reward--long {
    max-width: calc(100% - 24px) !important;
    font-size: clamp(34px, 3.4vw, 52px) !important;
    gap: 6px 10px !important;
  }

  .spin-card__reward--long .spin-card__nowrap,
  .spin-card__reward--long .spin-card__reward-text:nth-of-type(2) {
    white-space: nowrap;
  }
}

/* ── Breakpoint variable overrides ───────────────────── */

/* Small/mid desktop 1024–1365px (tall) — slightly smaller */
@media (min-width: 1024px) and (max-width: 1365px) {
  :root { --game-scale: 0.92; }
}

/* Tablet landscape + narrow desktop 1024–1180px */
@media (min-width: 1024px) and (max-width: 1180px) {
  :root { --game-scale: 0.90; }
}

/* Short desktop/laptop ≤1366px wide AND ≤800px tall (1280×720, 1366×768, 1024×768) */
@media (min-width: 1024px) and (max-width: 1366px) and (max-height: 800px) {
  :root { --game-scale: 0.88; }
}

/* Tablet portrait 769–1023px: centered, shift down to clear bg logo */
@media (min-width: 769px) and (max-width: 1023px) {
  :root {
    --game-y:     30px;
    --game-scale: 0.90;
  }
  .game-area  { gap: 4px; }
  .slot-logo  { margin-bottom: -2px; }
  /* Nudge desktop video left so background logo stays clearly visible on the left */
  .bg-video--desktop { object-position: 35% center; }
}

/* Tall tablet portrait 769–1023px × ≥1000px (820×1180, 912×1368) — more vertical room */
@media (min-width: 769px) and (max-width: 1023px) and (min-height: 1000px) {
  :root {
    --game-y:     56px;
    --game-scale: 0.92;
  }
}

/* Mobile ≤768px: portrait */
@media (max-width: 768px) {
  :root {
    --game-y:     42px;
    --game-scale: 1;
    --game-x:     0px;
  }
  .page      { justify-content: flex-start; }
  .game-area { gap: 0; }
  .slot-logo { margin-bottom: -2px; }
}

/* Short landscape mobile ≤768px × ≤500px */
@media (max-width: 768px) and (max-height: 500px) {
  :root {
    --game-y:     8px;
    --game-scale: 1;
  }
  .page { justify-content: center; }
}

/* ── Mobile performance: reduce expensive backdrop-filter ── */
@media (max-width: 768px) {
  /* Overlay blur: 8px → 4px — saves GPU fill on mid-range phones */
  .spin-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* Slot glow: already reduced to 24px in existing rule — keep */
  /* Win line glow filter: already thinner on mobile — keep */
}

/* ── Logo size increase ──────────────────────────────── */
.slot-logo img {
  width: clamp(280px, 36vw, 400px) !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .slot-logo img {
    width: clamp(220px, 68vw, 300px) !important;
  }
}

/* ── Spin button: gold/amber ─────────────────────────── */
.spin-btn {
  background: linear-gradient(
    180deg,
    #fff1a6 0%,
    #ffd85a 26%,
    #ffbc1f 52%,
    #f59b00 78%,
    #c97300 100%
  ) !important;
  border: 1px solid rgba(255, 238, 160, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(255, 210, 60, 0.30),
    0 0 40px rgba(255, 184, 0, 0.70),
    0 0 90px rgba(255, 140, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(100, 45, 0, 0.22) !important;
}

.spin-btn::before {
  background: linear-gradient(
    170deg,
    rgba(255, 255, 255, 0.42) 0%,
    transparent 50%
  ) !important;
}

.spin-btn__text {
  color: #ffffff !important;
  text-shadow:
    0 2px 0 rgba(80, 35, 0, 0.60),
    0 0 10px rgba(80, 35, 0, 0.35) !important;
}

.spin-btn:hover:not(:disabled):not(.is-disabled):not(.is-spinning) {
  background: linear-gradient(
    180deg,
    #fff6c4 0%,
    #ffe477 28%,
    #ffc83a 55%,
    #ffac08 78%,
    #d98500 100%
  ) !important;
  box-shadow:
    0 0 0 2px rgba(255, 220, 80, 0.40),
    0 0 60px rgba(255, 200, 0, 0.90),
    0 0 130px rgba(255, 160, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -2px 0 rgba(100, 45, 0, 0.18) !important;
}

.spin-btn:active:not(:disabled):not(.is-disabled):not(.is-spinning) {
  box-shadow:
    0 0 22px rgba(255, 184, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.50),
    inset 0 3px 6px rgba(100, 45, 0, 0.30) !important;
}

/* Idle pulse glow: gold instead of red */
@keyframes btn-pulse {
  0%, 100% {
    transform: scale(1.00);
    box-shadow:
      0 0 0 2px rgba(255, 210, 60, 0.28),
      0 0 32px rgba(255, 184, 0, 0.65),
      0 0 58px rgba(255, 140, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.50);
  }
  50% {
    transform: scale(1.055);
    box-shadow:
      0 0 0 3px rgba(255, 220, 60, 0.42),
      0 0 52px rgba(255, 200, 0, 0.95),
      0 0 80px rgba(255, 160, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
}

.game-actions {
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE / TABLET PORTRAIT — size + centering system
   Strategy: --slot-size-mobile set per breakpoint so the slot
   grows on larger screens. Centering via left:50% + translateX(-50%).
════════════════════════════════════════════════════════ */

/* ── Base: all portrait phones/tablets ≤1023px ───────── */
@media (max-width: 1023px) and (orientation: portrait) {
  .page {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .game-area {
    --mobile-game-y:    34px;
    --mobile-game-scale: 1;
    --slot-size-mobile: min(86vw, 54svh);

    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: translateX(-50%) translateY(var(--mobile-game-y)) scale(var(--mobile-game-scale)) !important;
    transform-origin: top center !important;

    width: fit-content !important;
    max-width: 100vw !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .slot-machine {
    width: var(--slot-size-mobile) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 56svh !important;
  }

  .slot-logo {
    width: var(--slot-size-mobile) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .game-actions {
    width: var(--slot-size-mobile) !important;
    max-width: calc(100vw - 24px) !important;
    margin-inline: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  /* Button proportional to slot width, not to viewport */
  .spin-btn {
    width: 78% !important;
    max-width: 340px !important;
    min-width: 200px !important;
    margin-inline: auto !important;
  }
}

/* ── Small phones 360–430px portrait ─────────────────── */
@media (min-width: 360px) and (max-width: 430px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y:    42px;
    --mobile-game-scale: 1;
    --slot-size-mobile: min(88vw, 50svh);
  }

  .spin-btn {
    width: 76% !important;
    max-width: 300px !important;
    min-width: 210px !important;
  }
}

/* ── Large phones 431–600px portrait ─────────────────── */
@media (min-width: 431px) and (max-width: 600px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y:    44px;
    --mobile-game-scale: 1;
    --slot-size-mobile: min(90vw, 52svh);
  }

  .spin-btn {
    width: 74% !important;
    max-width: 320px !important;
    min-width: 220px !important;
  }
}

/* ── Tablet portrait 601–1023px (iPad Mini, 820×1180, 912×1368) ── */
@media (min-width: 601px) and (max-width: 1023px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y:    70px;
    --mobile-game-scale: 1;
    --slot-size-mobile: min(70vw, 52svh, 680px);
  }

  .slot-logo img {
    width: clamp(240px, 38vw, 360px) !important;
  }

  .spin-btn {
    width: 74% !important;
    max-width: 360px !important;
    min-width: 240px !important;
  }
}

/* ── iPad Pro portrait 1000–1180px ────────────────────── */
@media (min-width: 1000px) and (max-width: 1180px) and (orientation: portrait) {
  .page {
    width: 100vw !important;
    height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .game-area {
    --mobile-game-y:    90px;
    --mobile-game-scale: 1;
    --slot-size-mobile: min(64vw, 50svh, 720px);

    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) translateY(var(--mobile-game-y)) scale(var(--mobile-game-scale)) !important;
    transform-origin: top center !important;
    width: fit-content !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .slot-machine {
    width: var(--slot-size-mobile) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .slot-logo {
    width: var(--slot-size-mobile) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .game-actions {
    width: var(--slot-size-mobile) !important;
    max-width: calc(100vw - 48px) !important;
    margin-inline: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .slot-logo img {
    width: clamp(280px, 34vw, 400px) !important;
  }

  .spin-btn {
    width: 72% !important;
    max-width: 400px !important;
    min-width: 260px !important;
  }
}

/* ── Tablet portrait 700–999px: push block below background logo ── */
/* Covers iPad Mini 768×1024, 820×1180, 834×1194, 912×1368          */
/* Overrides the 601–1023px rule (70px) via source order             */
@media (min-width: 700px) and (max-width: 999px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y: 92px !important;
  }
}

/* ── iPad Mini portrait 768×1024 — tighter height-range pin ── */
@media (min-width: 740px) and (max-width: 800px) and (min-height: 980px) and (max-height: 1080px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y: 105px !important;
  }
}

/* ── Larger tablet portrait 801–999px (820×1180, 834×1194, 912×1368) ── */
@media (min-width: 801px) and (max-width: 999px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y: 100px !important;
  }
}

/* ── Surface Duo 540×720 portrait ── */
@media (min-width: 520px) and (max-width: 560px) and (min-height: 680px) and (max-height: 760px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y: 72px !important;
  }
}

/* ── iPhone 4 320×480 portrait ── */
@media (max-width: 340px) and (max-height: 520px) and (orientation: portrait) {
  .game-area {
    --mobile-game-y: 34px !important;
  }
}

/* ── iPad Pro 1024×1366 portrait — larger slot logo ── */
@media (min-width: 1000px) and (max-width: 1100px) and (min-height: 1300px) and (max-height: 1400px) and (orientation: portrait) {
  .slot-logo img {
    width: clamp(360px, 38vw, 500px) !important;
    max-width: 500px !important;
  }
}