/* ==========================================================================
   BOOM Social Online Casino — machine.css
   Slot cabinet pages: reels, dock, paytable, cheer mascot
   ========================================================================== */

.bm-play{padding:128px 0 90px}
.bm-crumb{display:inline-block;color:var(--bm-dim);text-decoration:none;
  font:600 .88rem "Rubik",sans-serif;padding:8px 0;margin-bottom:14px;
  transition:color .4s var(--bm-snap)}
.bm-crumb:hover{color:var(--bm-paper)}

/* cabinet = shell + core */
.bm-cab{position:relative;background:rgba(255,255,255,.045);border:1px solid var(--bm-line);
  border-radius:30px;padding:8px;box-shadow:0 40px 90px -40px rgba(255,59,59,.35)}
.bm-cab__core{border-radius:23px;padding:clamp(18px,3vw,34px);
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(46,197,255,.14), transparent 60%),
    linear-gradient(170deg,var(--bm-navy-2),#0E1226);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.bm-cab__marquee{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:20px}
.bm-cab__marquee h1{font-size:clamp(1.5rem,3.4vw,2.4rem);margin:0;
  text-shadow:0 0 26px rgba(46,197,255,.5)}
.bm-cab__lines{font:600 .72rem "Rubik",sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bm-blue)}

/* reels */
.bm-stage{--cell:clamp(56px,8.4vw,102px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.1vw,12px)}
.bm-reel{height:calc(var(--cell)*3);overflow:hidden;border-radius:14px;position:relative;
  background:linear-gradient(180deg,#0A0D1F,#10142E 50%,#0A0D1F);border:1px solid var(--bm-line)}
.bm-reel::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,32,.85),transparent 22%,transparent 78%,rgba(10,13,32,.85))}
.bm-reel__tape{will-change:transform}
.bm-cell{height:var(--cell);display:flex;align-items:center;justify-content:center;position:relative}
.bm-cell img{width:74%;height:74%;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.bm-reel.is-blur .bm-cell img{filter:blur(2px) drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.bm-cell.is-hit::after{content:"";position:absolute;inset:5px;border-radius:12px;
  border:2px solid var(--bm-yellow);
  box-shadow:0 0 20px rgba(255,217,59,.55),inset 0 0 16px rgba(255,217,59,.22);
  animation:bm-hit .8s var(--bm-spring) both}
@keyframes bm-hit{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}

/* control dock */
.bm-dock{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:24px}
.bm-dock__bet{display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);border:1px solid var(--bm-line);
  border-radius:999px;padding:6px 8px}
.bm-dock__label{font:600 .72rem "Rubik",sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bm-dim);padding:0 8px}
.bm-dock__bet button{width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--bm-line);background:rgba(255,255,255,.07);color:var(--bm-paper);
  font-size:1.15rem;line-height:1;
  transition:background .4s var(--bm-snap),transform .4s var(--bm-snap)}
.bm-dock__bet button:hover{background:rgba(255,255,255,.14)}
.bm-dock__bet button:active{transform:scale(.92)}
.bm-dock__bet strong{font-family:"Bungee",sans-serif;font-size:1.05rem;font-weight:400;
  color:var(--bm-yellow);min-width:84px;text-align:center}
.bm-dock__win{flex:1 1 200px;text-align:center;margin:0;min-height:1.5em;
  font-family:"Bungee",sans-serif;font-size:clamp(.95rem,2vw,1.3rem);
  color:var(--bm-yellow);text-shadow:0 0 22px rgba(255,217,59,.55)}
.bm-dock__win.is-pop{animation:bm-pop .7s var(--bm-spring)}
@keyframes bm-pop{0%{transform:scale(.55);opacity:0}65%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
.bm-spin{font-family:"Bungee",sans-serif;font-size:1.25rem;letter-spacing:.08em;
  color:var(--bm-navy);background:linear-gradient(135deg,var(--bm-red),var(--bm-red-2));
  border:0;border-radius:999px;padding:18px 46px;cursor:pointer;
  box-shadow:0 18px 44px -14px rgba(255,59,59,.7),inset 0 1px 1px rgba(255,255,255,.35);
  transition:transform .45s var(--bm-snap),box-shadow .45s var(--bm-snap),filter .45s var(--bm-snap)}
.bm-spin:hover{transform:translateY(-2px);
  box-shadow:0 24px 54px -16px rgba(255,59,59,.85),inset 0 1px 1px rgba(255,255,255,.35)}
.bm-spin:active{transform:scale(.96)}
.bm-spin:disabled{filter:saturate(.35) brightness(.75);cursor:default;transform:none}

/* win celebration mascot */
.bm-cheer{position:absolute;right:-14px;bottom:-16px;width:clamp(92px,13vw,150px);
  opacity:0;transform:translateY(34%) scale(.5) rotate(10deg);pointer-events:none;
  filter:drop-shadow(0 18px 36px rgba(255,217,59,.35));
  transition:transform .75s var(--bm-spring),opacity .35s var(--bm-snap)}
.bm-cheer.is-on{opacity:1;transform:translateY(0) scale(1) rotate(0)}

/* paytable */
.bm-paysec{margin-top:84px}
.bm-paysec h2{font-size:clamp(1.4rem,3vw,2rem)}
.bm-paygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:14px;margin-top:26px}
.bm-pay{background:rgba(255,255,255,.045);border:1px solid var(--bm-line);
  border-radius:20px;padding:20px 16px;text-align:center}
.bm-pay img{width:62px;height:62px;object-fit:contain}
.bm-pay h3{font:600 .9rem/1.4 "Rubik",sans-serif;margin:12px 0;letter-spacing:0}
.bm-pay--wild{border-color:rgba(255,217,59,.5);box-shadow:0 0 34px -12px rgba(255,217,59,.5)}
.bm-pay dl{display:flex;justify-content:center;gap:14px;margin:0}
.bm-pay dl div{display:flex;flex-direction:column;gap:2px}
.bm-pay dt{font:600 .68rem "Rubik",sans-serif;color:var(--bm-dim);letter-spacing:.08em}
.bm-pay dd{margin:0;font-family:"Bungee",sans-serif;font-size:.92rem;color:var(--bm-yellow)}
.bm-paysec__note{color:var(--bm-dim);font-size:.88rem;margin-top:24px;max-width:760px}

@media (max-width:640px){
  .bm-play{padding:112px 0 64px}
  .bm-dock{justify-content:center}
  .bm-dock__win{order:3;flex-basis:100%}
  .bm-spin{width:100%}
  .bm-cheer{right:-6px;bottom:-10px}
}