:root{
  --bg:#0b0a08;
  --shadow: rgba(0,0,0,.55);
  --gold:#ffd77a;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  overflow:hidden;
  background: radial-gradient(1200px 800px at 50% 10%, #1a130c 0%, var(--bg) 65%);
  color:#f7f1e6;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 12px 18px;
  gap:10px;
}

.topbar{
  width:min(1100px, 100%);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

.iconBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color:#f7f1e6;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 10px 20px var(--shadow);
  line-height:1;
  font-size:18px;
}
.iconBtn:hover{background: rgba(0,0,0,.35)}
.iconBtn:active{transform: translateY(1px)}

.stage{width:min(1100px,100%);flex:1;display:flex;justify-content:center;align-items:center;min-height:0}
.machineWrap{width:100%;display:flex;justify-content:center}

.machine{
  position:relative;
  width:1004px;
  height:668px;
  background: url("assets/fond.png") center/contain no-repeat;
  user-select:none;
  touch-action:manipulation;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.45));
  transform-origin: top center;
}

/* Layers */
.bulbLayer,.reelLayer{position:absolute;inset:0;pointer-events:none}

/* Reel windows */
.reelWindow{
  position:absolute;
  overflow:hidden;
  border-radius:10px;
  pointer-events:none;
}
.reelCanvas{width:100%;height:100%;display:block}

/* Vintage stop effect */
.vintageFlash{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background: rgba(255,220,170,.14);
  mix-blend-mode: screen;
}
.vintageFlash.on{opacity:1}
.grain{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,210,120,.22) 1px, transparent 1px);
  background-size: 14px 14px;
  mix-blend-mode: overlay;
}
.grain.on{opacity:.35}

/* Payline */
.payline{
  position:absolute;
  height:4px;
  border-radius:999px;
  background: rgba(255,215,122,.0);
  box-shadow: 0 0 14px rgba(255,215,122,.0);
  opacity:0;
  pointer-events:none;
}
.payline.on{
  opacity:1;
  background: rgba(255,215,122,.92);
  box-shadow: 0 0 18px rgba(255,183,77,.85);
}

/* Bulbs */
.bulb{
  position:absolute;
  border-radius:999px;
  background: rgba(255,215,122,.18);
  box-shadow: 0 0 0 rgba(255,215,122,0);
  opacity:.95;
}
.bulb.on{
  background: rgba(255,215,122,.88);
  box-shadow: 0 0 14px rgba(255,183,77,.85), 0 0 30px rgba(255,183,77,.45);
}

/* Counters (Prizee-like previous style) */
.counter{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}
.counter.bet{pointer-events:auto}
.counter-line, .betInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.55);
  -webkit-text-stroke: 1px rgba(0,0,0,.22);
}
.counter-label{
  font-size: 12px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.55);
  -webkit-text-stroke: 0px transparent;
}
.counter-num{
  font-size: 16px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.55);
  -webkit-text-stroke: 1px rgba(0,0,0,.22);
}
.counter-sep{
  font-size: 16px;
  opacity: .85;
  transform: translateY(-.5px);
}

.betInner{gap:10px}
.betBtn{
  pointer-events:auto;
  width:30px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,215,160,.28);
  background: rgba(20,14,10,.45);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 16px;
  cursor:pointer;
}
.betBtn:active{transform: translateY(1px)}
.betText{display:flex;gap:6px;white-space:nowrap}

/* Spin hotspot pulse: simple glow in the CENTER of the button (no outline) */
.spinHotspot{
  position:absolute;
  background: transparent;
  border:none;
  padding:0;
  cursor:pointer;
  border-radius:999px;
  /* allow the glow to extend beyond the hotspot box */
  overflow: visible;
}
.spinHotspot:disabled{cursor:not-allowed}

.spinHotspot.spin-pulse{animation: spinPulseBright 1.25s ease-in-out infinite}
.spinHotspot::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:82%;
  height:82%;
  transform: translate(-50%, -50%) scale(.94);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  /* soft core glow */
  background: radial-gradient(circle at center,
    rgba(255,239,196,.98) 0%,
    rgba(255,203,104,.70) 36%,
    rgba(255,203,104,.0) 72%);
  filter: blur(6px);
}
.spinHotspot.spin-pulse::after{opacity:1;animation: spinPulseCore 1.25s ease-in-out infinite}
.spinHotspot:active{transform: scale(.985);filter: brightness(1.12)}

@keyframes spinPulseBright{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@keyframes spinPulseCore{0%,100%{opacity:.45;transform: translate(-50%,-50%) scale(.92)}50%{opacity:.92;transform: translate(-50%,-50%) scale(1.08)}}

/* Paytable (top 3) */
.paytable{
  position:absolute;
  /* position is injected by script.js (and can be adjusted in dev via D) */
  width: 240px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  text-align:right;
  pointer-events:none;
}

.paytable.debug{
  pointer-events:auto;
  outline:2px dashed rgba(80,255,160,.95);
  outline-offset:6px;
  cursor:move;
}

.paytable.debug{
  pointer-events:auto;
  outline:2px solid rgba(80, 255, 120, .95);
  outline-offset:2px;
  cursor:move;
}
.payRow{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.payRow img{width:36px;height:36px;object-fit:contain;filter: drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.payTxt{color: rgba(255,245,230,.92);font-weight:900;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.payMult{opacity:.9}

/* Screen flash (jackpot) */
.screenFlash{position:absolute;inset:0;opacity:0;pointer-events:none;background: rgba(255,215,122,.18);mix-blend-mode: screen;}
.screenFlash.on{opacity:1;animation: flash 520ms ease-out 1}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* Footer */
.footer{
  width:min(1100px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.legal{color: rgba(255,255,255,.82);font-size:13px;text-align:center}
/* (home icon moved to topbar) */

/* Accessibility */
.srOnly{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive scaling */
@media (max-width: 1100px){
  .machine{transform-origin: top center}
}