/* DGN Reels interaction polish: Bonus Boost, sound, win sequence and bonus gate. */
.rw-machine{position:relative}

.rl-ante{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.65rem;
  min-height:3.15rem;padding:.55rem .7rem;border:1px solid var(--line-2);border-radius:.58rem;
  background:#070807;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
.rl-ante>span{display:grid;gap:.08rem;min-width:0}
.rl-ante b{font:900 .68rem var(--font-display);letter-spacing:.1em;color:var(--ink)}
.rl-ante small{color:var(--subtle);font:650 .55rem var(--font-body);white-space:nowrap}
.rl-ante strong{flex:0 0 auto;color:var(--gold-lit);font:850 .63rem var(--font-display);white-space:nowrap}
.rl-ante.is-on{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,163,42,.14),rgba(240,163,42,.035));box-shadow:0 0 18px -10px rgba(240,163,42,.7)}
.rl-ante.is-on b{color:var(--gold-lit)}
.rl-ante:disabled{opacity:.62;cursor:not-allowed}

.rl-go,.rl-chip,.rl-mode{transform:translateZ(0)}
.rl-go:disabled{opacity:.82;transform:none!important;filter:none!important;box-shadow:0 0 0 1px var(--accent-deep),0 10px 24px -18px var(--accent-glow)}
.rl-chip:disabled{opacity:.72}
.rl-mode:disabled{opacity:.72}
.rl-tools button:disabled{opacity:.72}

.rw-win{min-height:3.1rem!important;contain:layout paint}
.rw-lines{min-height:1.85rem;align-content:flex-start}
.rw-lines:empty{visibility:hidden;display:flex!important}

.rw-strip{backface-visibility:hidden;transform-style:preserve-3d}
.rw-strip.rolling img,.rw-strip.rolling .g{filter:blur(2.2px) brightness(.82) drop-shadow(0 3px 7px rgba(0,0,0,.7))!important;transform:scale(.985)}
.rw-strip.settle img,.rw-strip.settle .g{transition:filter .22s ease,transform .22s ease;filter:blur(.35px) drop-shadow(0 2px 6px rgba(0,0,0,.58))}
.rw-cell{transition:background .26s ease,box-shadow .32s ease,filter .28s ease,transform .28s ease}
.rw-cell.win{
  animation:rw-win-arrive .52s cubic-bezier(.2,.8,.25,1) both,rw-pulse 1.15s ease-in-out infinite!important;
  animation-delay:var(--win-delay,0ms),calc(var(--win-delay,0ms) + .52s)!important
}
@keyframes rw-win-arrive{0%{filter:brightness(.86);transform:scale(.965)}55%{filter:brightness(1.42);transform:scale(1.045)}100%{filter:brightness(1);transform:scale(1)}}
.rl-nums b.lit{animation:rw-line-pop .42s ease both}
.rl-nums li:nth-child(1) b.lit{animation-delay:.05s}
.rl-nums li:nth-child(2) b.lit{animation-delay:.12s}
.rl-nums li:nth-child(3) b.lit{animation-delay:.19s}
@keyframes rw-line-pop{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

.rl-tools .rl-sound{white-space:nowrap}

/* A held Skull is a separate fixed layer above the reel strips. The strip keeps
   moving behind it, but the Wild itself never leaves its exact 5x3 cell. */
.rw-reels{position:relative}
.rw-sticky-layer{
  position:absolute;inset:.4rem;z-index:12;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,var(--cell,4rem));
  column-gap:.35rem;row-gap:0;pointer-events:none;overflow:hidden;border-radius:.45rem
}
.rw-sticky-cell{
  position:relative;height:var(--cell,4rem)!important;min-height:var(--cell,4rem)!important;
  background:radial-gradient(circle at 50% 45%,rgba(180,247,36,.14),rgba(8,9,8,.96) 67%),#080908!important;
  box-shadow:inset 0 0 0 1px var(--accent-bright),0 0 16px -3px var(--accent-glow)!important;
  animation:rw-sticky-breathe 1.05s ease-in-out infinite alternate
}
.rw-sticky-cell::after{
  content:"STICKY";position:absolute;left:50%;bottom:.12rem;transform:translateX(-50%);
  padding:.08rem .2rem;border-radius:.18rem;background:rgba(5,6,5,.78);color:var(--accent-bright);
  font:900 clamp(.32rem,.9vw,.46rem)/1 var(--font-display);letter-spacing:.08em
}
.rw-sticky-cell img{width:96%!important;height:96%!important;filter:drop-shadow(0 0 8px rgba(180,247,36,.36))!important}
@keyframes rw-sticky-breathe{from{filter:brightness(.96)}to{filter:brightness(1.13)}}

/* Two visible scatters put every remaining reel into anticipation until the
   third lands or the spin runs out. The server result is already settled; this
   is presentation only. The reel keeps rolling, but visibly slows and the
   cabinet flashes so a near-miss reads like a real slot tease. */
.rw-reel{position:relative}
.rw-reel.scatter-tease{
  z-index:5;
  overflow:visible!important;
  box-shadow:0 0 0 1px rgba(255,194,74,.95),0 0 22px 2px rgba(240,163,42,.78),0 0 48px -8px rgba(240,163,42,.9);
  animation:scatter-reel-pulse .48s ease-in-out infinite alternate
}
.rw-reel.scatter-tease::after{
  content:"";position:absolute;inset:-4px;border:2px solid rgba(255,203,102,.88);border-radius:.55rem;
  box-shadow:inset 0 0 18px rgba(240,163,42,.3),0 0 16px rgba(240,163,42,.65);pointer-events:none
}
.rw-reel.scatter-tease .rw-strip.rolling{animation-duration:760ms!important}
.rw-reel.scatter-tease .rw-strip.rolling img,.rw-reel.scatter-tease .rw-strip.rolling .g{
  filter:blur(1.15px) brightness(1.22) drop-shadow(0 0 9px rgba(255,196,70,.8))!important
}
.rl-board.scatter-tease{
  border-color:rgba(255,195,68,.9)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 26px -8px rgba(240,163,42,.85)!important;
  animation:scatter-board-pulse .62s ease-in-out infinite alternate
}
@keyframes scatter-reel-pulse{from{filter:brightness(.92)}to{filter:brightness(1.2)}}
@keyframes scatter-board-pulse{from{background-color:rgba(240,163,42,.01)}to{background-color:rgba(240,163,42,.08)}}

/* Premium art needs to read as premium. The source files have different amounts
   of transparent padding, so size them individually rather than giving every
   symbol the same 84% box. */
.rw-cell[data-sym="L"] img{width:104%!important;height:104%!important}
.rw-cell[data-sym="O"] img{width:96%!important;height:96%!important}
.rw-cell[data-sym="C"] img{width:98%!important;height:98%!important}
.rw-cell[data-sym="D"] img{width:96%!important;height:96%!important}
.rw-cell[data-sym="N"] img{width:94%!important;height:94%!important}
.rw-cell[data-sym="R"] img{width:94%!important;height:94%!important}
.rw-cell[data-sym="W"] img,.rw-cell[data-sym="T"] img{width:96%!important;height:96%!important}

/* Desktop stability. Keep the rail and stage aligned, but do not hard-cap the
   entire machine height: Bonus Boost + Sound added more controls than the old
   fixed 31.5rem rail could contain. The result rows reserve their own space so
   a win/no-win never overlaps the reels or changes the grid height. */
@media(min-width:901px){
  .rl{
    align-items:stretch!important;
    min-height:35.5rem!important;
    height:auto!important;
    max-height:none!important
  }
  .rl-rail{
    align-self:stretch!important;
    box-sizing:border-box!important;
    min-height:35.5rem!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important
  }
  .rl-stage{
    box-sizing:border-box!important;
    min-height:35.5rem!important;
    height:auto!important;
    max-height:none!important;
    justify-content:flex-start!important;
    overflow:visible!important
  }
  .rl-board{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important
  }
  .rw-win{
    position:relative!important;
    z-index:2!important;
    flex:0 0 3.1rem!important;
    width:100%!important;
    height:3.1rem!important;
    min-height:3.1rem!important;
    max-height:3.1rem!important;
    margin:0!important;
    overflow:hidden!important;
    background:var(--surface)
  }
  .rw-lines{
    position:relative!important;
    z-index:2!important;
    flex:0 0 1.85rem!important;
    width:100%!important;
    height:1.85rem!important;
    min-height:1.85rem!important;
    max-height:1.85rem!important;
    margin:0!important;
    overflow:auto!important;
    scrollbar-width:thin
  }
  .rl-tools{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:.28rem!important
  }
  .rl-tools button{
    min-height:2.25rem!important;
    padding:.2rem .24rem!important;
    font-size:.55rem!important;
    letter-spacing:.035em!important
  }
  .rl-go,.rl-go:hover:not(:disabled),.rl-go:active{transform:none!important}
}

.rl-bonus-gate{
  position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:1.25rem;
  background:radial-gradient(circle at 50% 48%,rgba(240,163,42,.22),rgba(0,0,0,.9) 48%,#000 82%);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);cursor:pointer;touch-action:manipulation
}
.rl-bonus-gate[hidden]{display:none!important}
.rl-bonus-burst{
  position:relative;display:grid;place-items:center;gap:.4rem;width:min(92vw,42rem);padding:clamp(2.2rem,7vw,5.2rem) 1rem;
  text-align:center;border:1px solid rgba(240,163,42,.5);border-radius:1.2rem;
  background:radial-gradient(circle at center,rgba(240,163,42,.16),rgba(6,7,6,.94) 66%);
  box-shadow:0 0 90px -15px rgba(240,163,42,.65),inset 0 0 45px rgba(240,163,42,.08);overflow:hidden
}
.rl-bonus-burst::before,.rl-bonus-burst::after{content:"";position:absolute;inset:-35%;border:1px solid rgba(240,163,42,.25);border-radius:50%;animation:bonus-ring 2.2s ease-out infinite;pointer-events:none}
.rl-bonus-burst::after{animation-delay:1.05s}
@keyframes bonus-ring{0%{transform:scale(.25);opacity:.75}100%{transform:scale(1.15);opacity:0}}
.rl-bonus-kicker{position:relative;z-index:1;color:var(--gold);font:900 .72rem var(--font-display);letter-spacing:.24em}
.rl-bonus-burst strong{position:relative;z-index:1;color:#fff7db;font:1000 clamp(4rem,17vw,9.5rem)/.85 var(--font-display);letter-spacing:-.06em;text-shadow:0 0 18px rgba(240,163,42,.72),0 0 65px rgba(240,163,42,.35);animation:bonus-word .7s cubic-bezier(.2,1.35,.3,1) both}
@keyframes bonus-word{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.rl-bonus-burst>b{position:relative;z-index:1;color:var(--gold-lit);font:900 clamp(1rem,3.5vw,1.6rem) var(--font-display);letter-spacing:.1em}
.rl-bonus-boosted{position:relative;z-index:1;padding:.28rem .55rem;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font:850 .62rem var(--font-display);letter-spacing:.1em}
.rl-bonus-burst small{position:relative;z-index:1;margin-top:1.05rem;color:#ddd7c7;font:700 clamp(.72rem,2vw,.9rem) var(--font-body);letter-spacing:.04em;animation:bonus-tap 1.4s ease-in-out infinite}
@keyframes bonus-tap{50%{opacity:.48}}
body.slots-bonus-open{overflow:hidden!important}

@media(max-width:900px){
  .rl-rail{grid-template-areas:"field field" "ante ante" "go modes" "readout readout" "msg msg" "tools tools"!important}
  .rl-ante{grid-area:ante;min-height:2.75rem;padding:.4rem .55rem}
  .rl-ante small{font-size:.5rem}
  .rl-tools{grid-template-columns:repeat(5,1fr)!important}
  .rl-tools button{font-size:.45rem!important;padding:.12rem!important}
  .rw-win{min-height:2.45rem!important}
  .rw-lines{min-height:1.2rem}
}

@media(prefers-reduced-motion:reduce){
  .rl-bonus-burst::before,.rl-bonus-burst::after,.rl-bonus-burst strong,.rl-bonus-burst small,.rw-cell.win,.rl-nums b.lit,.rw-reel.scatter-tease,.rl-board.scatter-tease,.rw-sticky-cell{animation:none!important}
}