/* ============================================================
   Gold Rush Saloon — enhanced game visuals & animation layer
   Loaded after styles.css to override / augment game styling
   Slot-machine cabinet styling upgrade
   ============================================================ */

/* Ambient sun glow behind the machine */
.sun-glow{
  position:absolute; top:-14%; left:50%; transform:translateX(-50%);
  width:min(680px,120vw); height:min(680px,120vw); z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(240,180,41,.28) 0%, rgba(240,180,41,.10) 34%, transparent 62%);
  animation:sunPulse 7s ease-in-out infinite;
}
@keyframes sunPulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}

/* Twinkle uses per-star duration variable */
.star{animation-duration:var(--tw,3s)!important}

/* Floating dust motes */
.dust{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.mote{position:absolute; bottom:-10px; width:var(--sz,3px); height:var(--sz,3px);
  background:rgba(244,228,193,.5); border-radius:50%; filter:blur(.5px);
  animation:float linear infinite}
@keyframes float{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.8}
  90%{opacity:.6}
  100%{transform:translateY(-105vh) translateX(30px);opacity:0}
}

/* Loader upgrades */
.load-coin{font-size:46px; animation:coinFlip 1.1s ease-in-out infinite; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
@keyframes coinFlip{0%,100%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(180deg) translateY(-10px)}}
.load-fill{background:linear-gradient(90deg,var(--amber),var(--terra),var(--amber))!important; background-size:200% 100%!important; animation:shimmer 1.2s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* Balance value pop when changed already covered — add subtle text glow */
.balbox .val{text-shadow:0 0 12px rgba(240,180,41,.4)}

/* ============================================================
   COMPACT LAYOUT — fit the whole game into the viewport
   ============================================================ */
.wrap{
  min-height:100vh; height:100vh; max-height:100vh;
  justify-content:flex-start;
  padding:8px 10px 10px!important;
  overflow:hidden;
}

/* Scale the whole board down so it fits comfortably */
.gtop{max-width:460px; padding:2px 4px 0}
.gcomp{max-width:460px; margin:6px 0}
.machine{max-width:440px; margin-top:10px!important}
.controls{max-width:460px; margin-top:12px}

/* ============================================================
   SLOT MACHINE CABINET
   ============================================================ */

.machine{
  position:relative; z-index:2; width:100%;
  padding:0;
}

/* ---- Cabinet marquee / crown on top of the frame ---- */
.machine::before{
  content:"★ GOLD RUSH SALOON ★";
  display:block;
  position:relative;
  z-index:3;
  margin:0 18px -12px;
  padding:10px 10px 20px;
  text-align:center;
  font-family:'Rye',serif;
  font-size:clamp(13px,3.6vw,19px);
  color:#3a2416;
  letter-spacing:1px;
  background:
    repeating-linear-gradient(90deg,#f7d98f 0 14px,#f0b429 14px 28px);
  border:4px solid #6b452b;
  border-bottom:none;
  border-radius:60% 60% 0 0 / 90% 90% 0 0;
  box-shadow:
    0 -6px 20px rgba(240,180,41,.5),
    inset 0 6px 12px rgba(255,255,255,.55),
    inset 0 -14px 22px rgba(122,43,18,.3);
  text-shadow:1px 1px 0 rgba(255,255,255,.5);
}

/* Chase-light bulbs framing the marquee */
.machine::after{
  content:"";
  position:absolute; top:2px; left:12px; right:12px; height:14px; z-index:4;
  background-image:radial-gradient(circle, #fff 0 3px, #f0b429 3px 5px, transparent 6px);
  background-size:22px 14px;
  background-repeat:repeat-x;
  border-radius:60% 60% 0 0 / 100% 100% 0 0;
  animation:bulbChase 1.2s steps(2) infinite;
  filter:drop-shadow(0 0 4px rgba(240,180,41,.9));
  pointer-events:none;
}
@keyframes bulbChase{
  0%{background-position:0 0; opacity:1}
  50%{background-position:11px 0; opacity:.55}
  100%{background-position:22px 0; opacity:1}
}

/* ---- The reel frame becomes the cabinet body ---- */
.frame{
  position:relative;
  background:linear-gradient(160deg,#6b452b,#3a2416 55%,#2a190f)!important;
  border:4px solid var(--amber)!important;
  border-radius:22px!important;
  padding:20px 26px 18px!important;
  box-shadow:0 18px 46px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.35),
             inset 0 0 40px rgba(240,180,41,.18), 0 0 0 1px rgba(240,180,41,.25)!important;
  animation:frameGlow 5s ease-in-out infinite;
}
@keyframes frameGlow{0%,100%{box-shadow:0 18px 46px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 40px rgba(240,180,41,.18), 0 0 22px rgba(240,180,41,.15)}50%{box-shadow:0 18px 46px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 48px rgba(240,180,41,.3), 0 0 40px rgba(240,180,41,.3)}}

/* Vertical side rails on the cabinet body */
.frame > .reels{position:relative; z-index:2}

/* Decorative corner bolts */
.frame-bolts span{position:absolute; width:12px; height:12px; border-radius:50%; z-index:5;
  background:radial-gradient(circle at 35% 30%, #ffe08a, var(--amber-dk)); box-shadow:inset 0 -2px 3px rgba(0,0,0,.5), 0 0 6px rgba(240,180,41,.5)}
.frame-bolts span:nth-child(1){top:10px;left:10px}
.frame-bolts span:nth-child(2){top:10px;right:10px}
.frame-bolts span:nth-child(3){bottom:10px;left:10px}
.frame-bolts span:nth-child(4){bottom:10px;right:10px}

/* Recessed reel window backing */
.reels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:10px;
  background:linear-gradient(180deg,#1c1109,#2a190f);
  border-radius:16px;
  box-shadow:inset 0 6px 16px rgba(0,0,0,.7), inset 0 -4px 10px rgba(0,0,0,.5),
             0 0 0 3px rgba(240,180,41,.35);
}

/* Reel columns with glass reflection — individual slot windows */
.reel-col{position:relative; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#d8bd8e,#efe0bd);
  box-shadow:inset 0 0 12px rgba(122,43,18,.25),
             inset 0 3px 6px rgba(255,255,255,.6),
             0 0 0 2px #6b452b;
}
/* subtle top/bottom shading on each reel window for depth */
.reel-col::before{
  content:""; position:absolute; top:0; left:0; right:0; height:26%;
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent); z-index:4; pointer-events:none;
}
.reel-col::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:26%;
  background:linear-gradient(0deg,rgba(0,0,0,.28),transparent); z-index:4; pointer-events:none;
}

.reel{
  background:linear-gradient(180deg,var(--sand-lt),#e8d3a8)!important;
  position:relative; transition:filter .3s; border-radius:12px;
  font-size:clamp(40px,11vw,64px)!important;
}
.reel.spinning{filter:blur(1.5px)}
.reel.land{animation:reellandPro .5s cubic-bezier(.2,1.5,.35,1)!important}
@keyframes reellandPro{0%{transform:translateY(-24%) scale(1.08)}55%{transform:translateY(7%) scale(.97)}80%{transform:translateY(-3%)}100%{transform:translateY(0) scale(1)}}

/* Winning symbol glow + bounce */
.reel.winglow{animation:winPulse 1.1s ease-in-out infinite!important;
  box-shadow:inset 0 -6px 12px rgba(122,43,18,.25), inset 0 4px 8px rgba(255,255,255,.6), 0 0 26px rgba(240,180,41,.85)!important}
@keyframes winPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* Reel glass sheen sweep */
.reel-glass{position:absolute; inset:20px 26px; border-radius:14px; pointer-events:none; z-index:3; overflow:hidden}
.reel-glass::before{content:''; position:absolute; top:-60%; left:-30%; width:40%; height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:rotate(18deg);
  animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,70%{left:-40%}85%,100%{left:130%}}

/* Payline glow when winning */
.payline{left:26px!important; right:26px!important; transition:opacity .3s, box-shadow .3s}
.payline.active{opacity:1!important; height:5px!important;
  background:linear-gradient(90deg,transparent,var(--amber),var(--terra),var(--amber),transparent)!important;
  box-shadow:0 0 16px 3px rgba(240,180,41,.75); animation:lineFlash .6s ease-in-out infinite alternate}
@keyframes lineFlash{from{opacity:.6}to{opacity:1}}

/* ---- Coin tray at bottom of the cabinet ---- */
.machine .frame::after{
  content:"◉ INSERT VIRTUAL COINS ◉";
  display:block;
  margin:12px -14px -10px;
  padding:8px 10px 7px;
  text-align:center;
  font-family:'Oswald',sans-serif;
  font-size:9px;
  letter-spacing:2px;
  color:var(--amber);
  opacity:.85;
  background:linear-gradient(180deg,#241509,#150c05);
  border-top:3px solid rgba(240,180,41,.35);
  border-radius:0 0 14px 14px;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.7);
}

/* ---------- Hot streak bar ---------- */
.streakbar{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; height:18px}
.streakbar.show{opacity:1; transform:translateY(0)}
.streak-lab{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1.5px; color:var(--amber);
  text-shadow:0 0 8px rgba(240,180,41,.6)}
.streak-flames{display:inline-flex; gap:2px}
.flame{font-size:15px; animation:flameBob .7s ease-in-out infinite}
@keyframes flameBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.15)}}

/* ---------- Win overlay upgrades ---------- */
.wincard{animation:cardBob 1.6s ease-in-out infinite}
@keyframes cardBob{50%{transform:translateY(-6px)}}
#winOverlay.show .wincard{box-shadow:0 0 50px rgba(240,180,41,.7)}
.wl{animation:wlPulse 1s ease-in-out infinite}
@keyframes wlPulse{50%{transform:scale(1.06)}}
#winOverlay.jackpot .wincard{border-color:#ffe08a; box-shadow:0 0 70px rgba(240,180,41,.95)}
#winOverlay.jackpot .wl{color:#ffe08a; animation:jackShake .4s ease-in-out infinite}
@keyframes jackShake{0%,100%{transform:rotate(-2deg) scale(1.02)}50%{transform:rotate(2deg) scale(1.08)}}
.wa{text-shadow:0 0 18px rgba(240,180,41,.5)}

/* ============================================================
   SLOT LEVER — the classic pull-arm on the side of the cabinet
   ============================================================ */
.controls{position:relative}

.spinbtn{position:relative; overflow:visible}
.spin-txt{position:relative; z-index:2}
.spin-ring{position:absolute; inset:6px; border-radius:50px; border:2px solid rgba(255,255,255,.35);
  opacity:0; pointer-events:none}
.spinbtn.spinning{animation:spinPulse .8s ease-in-out infinite}
.spinbtn.spinning .spin-ring{opacity:1; animation:ringSpin 1s linear infinite;
  border-top-color:var(--amber); border-right-color:transparent; border-bottom-color:var(--amber); border-left-color:transparent}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes spinPulse{50%{box-shadow:0 10px 30px rgba(240,180,41,.6), inset 0 -4px 8px rgba(0,0,0,.3)}}
.spinbtn:not(:disabled)::after{content:''; position:absolute; inset:0; border-radius:50px;
  box-shadow:0 0 0 0 rgba(240,180,41,.5); animation:idleGlow 2.4s ease-in-out infinite}
@keyframes idleGlow{0%{box-shadow:0 0 0 0 rgba(240,180,41,.5)}70%,100%{box-shadow:0 0 0 14px rgba(240,180,41,0)}}

/* SPIN button styled like a slot's chrome plunger / lever knob */
.spinbtn{
  background:linear-gradient(145deg,var(--terra),var(--terra-dk))!important;
  border:3px solid #ffcf6a!important;
}
.spinbtn::before{
  content:"";
  position:absolute; top:-2px; left:14%; right:14%; height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.4),transparent);
  border-radius:50px 50px 40% 40%;
  pointer-events:none; z-index:1;
}

/* Bet steppers pop */
.betstep{transition:transform .1s, box-shadow .2s; box-shadow:0 3px 0 var(--amber-dk)}
.betstep:hover{box-shadow:0 3px 10px rgba(240,180,41,.4)}
.betstep:active{transform:translateY(2px) scale(.96); box-shadow:0 1px 0 var(--amber-dk)}

/* Icon buttons subtle press */
.iconbtn{transition:background .2s, transform .1s}
.iconbtn:active{transform:scale(.92)}

/* Compact control sizing so everything fits */
.spinbtn{height:60px!important; min-width:130px!important; font-size:19px!important}
.maxbtn,.autobtn{height:48px!important; padding:0 14px!important; font-size:14px!important}
.iconbtn{width:40px!important; height:40px!important; font-size:18px!important}
.balbox .val,.betval .n,.winbox .n{font-size:19px!important}
.betstep{width:40px!important; height:40px!important; font-size:22px!important}

/* On short viewports, shrink further */
@media (max-height:720px){
  .reel{font-size:clamp(34px,9vw,52px)!important}
  .frame{padding:14px 20px 12px!important}
  .machine::before{padding:8px 10px 16px; font-size:clamp(12px,3vw,16px)}
  .gcomp{margin:4px 0; font-size:9px}
  .controls{margin-top:8px}
  .machine{margin-top:6px!important}
  .spinbtn{height:52px!important}
  .maxbtn,.autobtn{height:44px!important}
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .sun-glow,.mote,.reel-glass::before,.frame,.flame,.wincard,.wl,.spinbtn::after,.load-coin,.machine::after{animation:none!important}
  .reel.spinning{filter:none}
}