:root{
  --sticky-rail-w:52px;
  --sticky-menu-w:218px;
  --sticky-slot-w:1160px;
  --sticky-slot-h:690px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b1821;color:#eaf3f8;font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}

/* Sidebar visuals intentionally mirror the existing Steezy shell. */
.steezy-side-panel .ssp-label,.steezy-side-panel .ssp-section-title{display:none}
.steezy-side-panel .ssp-mode-row{display:flex;flex-direction:column;gap:5px;margin:0 0 8px}
.steezy-side-panel .ssp-mode{width:39px;height:38px;min-width:39px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:7px;background:#20394a;color:#c5d7e2;text-decoration:none}
.steezy-side-panel .ssp-mode.active{background:#1976df;color:#fff}
.ssp-mode-icon{width:22px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900}
.steezy-side-panel .ssp-nav{display:flex;flex-direction:column;gap:2px}
.steezy-side-panel .ssp-nav a{width:39px;min-width:39px;min-height:39px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:6px;color:#d9e7ef;text-decoration:none}
.steezy-side-panel .ssp-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.steezy-side-panel .ssp-ico{width:24px;height:24px;flex:0 0 24px;display:flex;align-items:center;justify-content:center;color:#a9c3d3;font-size:15px;font-weight:900}
.steezy-side-panel .ssp-sep{height:1px;margin:7px 5px;background:rgba(255,255,255,.10)}
body.steezy-side-open .steezy-side-panel .ssp-label{display:inline}
body.steezy-side-open .steezy-side-panel .ssp-section-title{display:block;padding:4px 8px 5px;color:#7f9aaa;font:800 11px/1 Arial,sans-serif}
body.steezy-side-open .steezy-side-panel .ssp-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
body.steezy-side-open .steezy-side-panel .ssp-mode{width:auto;min-width:0;height:38px;padding:0 10px;flex-direction:row;gap:6px;font:800 12px/1 Arial,sans-serif}
body.steezy-side-open .steezy-side-panel .ssp-nav a{width:auto;min-width:0;min-height:39px;display:grid;grid-template-columns:27px 1fr;align-items:center;justify-content:stretch;padding:0 8px;font:800 12px/1.05 Arial,sans-serif}

/* Minimal header dropdown styling needed by this new page. */








/* Shared page viewport: same job as #steezyPageViewport in Realm. */
#steezyPageViewport{
  width:calc(100vw - 52px);
  min-height:calc(100vh - 64px);
  margin-left:52px;
  padding:20px 24px 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
  transition:width .18s ease,margin-left .18s ease;
}
body.steezy-side-open #steezyPageViewport{width:calc(100vw - 218px);margin-left:218px}

.sticky-game-stage{
  width:min(var(--sticky-slot-w),100%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.sticky-game-frame{
  position:relative;
  width:100%;
  aspect-ratio:1110/690;
  max-height:calc(100vh - 122px);
  overflow:hidden;
  border-radius:10px;
  background:#f7b9da;
  box-shadow:0 18px 45px rgba(0,0,0,.34);
  isolation:isolate;
}

/* Sticky Steelerzz artwork stays split into independent layers. */
.sticky-art-bg,
.sticky-art-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  user-select:none;
}
.sticky-art-bg{
  z-index:0;
  object-fit:fill;
}
.sticky-art-frame{
  z-index:2;
  object-fit:fill;
}

/*
  Gameplay lives between the background and logo/UI artwork.
  Coordinates match the transparent 7x7 board opening in board-frame.png.
*/
.sticky-board-plane{
  position:absolute;
  z-index:3;
  left:16.45%;
  top:9.25%;
  width:53.35%;
  height:72.4%;
  pointer-events:none;
  overflow:visible;
}
.sticky-multiplier-layer,
.sticky-symbol-layer{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(7,1fr);
}
.sticky-multiplier-layer{z-index:1}
.sticky-symbol-layer{z-index:2}

.sticky-art-logo{
  position:absolute;
  z-index:5;
  right:2.1%;
  top:1.3%;
  width:3%;
  height:auto;
  max-height:38%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 7px 8px rgba(88,17,118,.28));
}
.sticky-foundation-tag{
  position:absolute;
  z-index:8;
  left:12px;
  bottom:10px;
  padding:6px 9px;
  border-radius:7px;
  background:rgba(34,9,65,.74);
  border:1px solid rgba(255,255,255,.2);
  color:#f8eaff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.3px;
  backdrop-filter:blur(3px);
}

.sticky-player-placeholder{height:62px;width:100%;border-radius:9px;background:#102531;border:1px solid #294654;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:7px 12px;box-shadow:0 9px 20px rgba(0,0,0,.2)}
.sticky-player-placeholder .ghost-control{height:42px;border-radius:7px;background:#1a3646;border:1px solid #315061}
.sticky-player-placeholder .left{width:200px;justify-self:start}.sticky-player-placeholder .center{width:120px;background:#1976df;justify-self:center}.sticky-player-placeholder .right{width:200px;justify-self:end}

.sticky-info{width:100%;display:flex;justify-content:space-between;gap:12px;color:#88a6b8;font-size:11px;font-weight:800;padding:0 4px}

/* The actual game remains full-size on roomy displays. On smaller displays it scales as one unit. */
@media(max-width:1185px){
  #steezyPageViewport{padding-left:16px;padding-right:16px}
  .sticky-game-stage{width:100%}
}
@media(max-width:760px){
  #steezyPageViewport{width:calc(100vw - 52px);margin-left:52px;padding:12px 10px 24px}
  body.steezy-side-open #steezyPageViewport{width:calc(100vw - 218px);margin-left:218px}
  .sticky-player-placeholder .left,.sticky-player-placeholder .right{width:90px}
  .sticky-player-placeholder .center{width:74px}
  .sticky-side-placeholder{display:none}
  .sticky-placeholder-board{width:78%}
}

/* ===== Sticky Steelerzz dynamic right-side feature UI ===== */
.sticky-side-ui{
  position:absolute;
  z-index:6;
  right:1.65%;
  top:34.5%;
  width:25.4%;
  height:61.5%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:1.7%;
  padding:1.2%;
  overflow:hidden;
  pointer-events:auto;
}
.sticky-side-backing{
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:4.5%;
  background:linear-gradient(180deg,rgba(255,122,206,.98),rgba(151,52,185,.98));
  border:2px solid rgba(255,235,253,.92);
  box-shadow:inset 0 0 0 3px rgba(95,22,122,.35),0 5px 14px rgba(79,12,101,.22);
}
.sticky-state{height:49%;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:3.5%}
.sticky-state[hidden]{display:none!important}
.sticky-art-button,
.sticky-art-counter{
  position:relative;
  width:100%;
  min-height:0;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  display:block;
  overflow:visible;
}
.sticky-art-button{height:49%;cursor:pointer;transition:transform .12s ease,filter .12s ease}
.sticky-art-button:hover{transform:scale(1.018);filter:brightness(1.05)}
.sticky-art-button:active{transform:scale(.995)}
.sticky-art-button img,
.sticky-art-counter img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.sticky-art-counter{height:100%}
.sticky-dynamic-value{
  position:absolute;
  z-index:2;
  left:16%;
  right:16%;
  bottom:8.4%;
  height:18%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff9e8;
  text-shadow:0 2px 0 #a72355,0 0 4px rgba(90,12,95,.55);
  font:900 clamp(10px,1.05vw,17px)/1 Arial,Helvetica,sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
}
.sticky-spin-count{
  bottom:7.8%;
  height:19%;
  font-size:clamp(16px,1.8vw,28px);
}
.sticky-history-wrap>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
.sticky-history-content{
  position:absolute;
  z-index:2;
  left:8.5%;right:8.5%;top:14%;bottom:15%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.sticky-history-empty{
  color:#9a5c9f;
  font:900 clamp(7px,.62vw,10px)/1 Arial,sans-serif;
  letter-spacing:.08em;
  opacity:.65;
}
.sticky-review-controls{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  padding:6px 10px;
  border-radius:8px;
  background:#102531;
  border:1px solid #294654;
  color:#9db5c3;
  font-size:11px;
  font-weight:900;
}
.sticky-review-controls button{
  height:27px;
  padding:0 11px;
  border-radius:6px;
  border:1px solid #355566;
  background:#193543;
  color:#d8e7ef;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.sticky-review-controls button:hover{background:#24495b}
.sticky-review-controls button.active{background:#1976df;border-color:#3593ff;color:#fff}
@media(max-width:760px){
  .sticky-review-controls{justify-content:flex-start}
  .sticky-side-ui{right:1.1%;width:26.2%}
}

/* ==========================================================================\n   v4 REFERENCE COMPOSITION\n   Sugar Rush 1000-style placement using ONLY the existing split PNG assets.\n   The overall Steezy slot frame size stays untouched.\n   ========================================================================== */

/* The old board-frame PNG also contains an obsolete right buy panel and bottom
   purple panel. Crop the SOURCE ART in CSS instead of generating replacement art. */
.sticky-board-art-crop{
  position:absolute;
  z-index:2;
  left:8.2%;
  top:.4%;
  width:83%;
  height:96.5%;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.sticky-board-art-crop .sticky-art-frame{
  position:absolute;
  /* source crop ~= x 180..1230 / y 0..812 of the 1672x941 PNG */
  left:-17.15%;
  top:0;
  width:159.25%;
  height:115.9%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
}

/* The live 7x7 symbol plane follows the enlarged/cropped board opening. */
.sticky-board-plane{
  left:16.45%;
  top:11.05%;
  width:69.15%;
  height:81.7%;
}

/* Reference has its branding on the opposite side from the buy rail. */
.sticky-art-logo{
  right:.35%;
  top:4.4%;
  width:17.1%;
  max-height:29%;
  z-index:7;
}

/* Compact left machine rail: buy state above, connector glass below. */
.sticky-side-ui{
  left:.55%;
  right:auto;
  top:2.15%;
  width:14.75%;
  height:81.5%;
  z-index:8;
  gap:0;
  padding:0;
  overflow:visible;
  align-items:stretch;
}
.sticky-side-backing{display:none}

.sticky-state{
  flex:0 0 43%;
  height:43%;
  gap:1.5%;
  justify-content:flex-start;
  overflow:visible;
}
.sticky-art-button{
  height:49.25%;
  filter:drop-shadow(0 3px 3px rgba(73,14,91,.26));
}
.sticky-art-button:hover{transform:scale(1.025);filter:brightness(1.06) drop-shadow(0 4px 4px rgba(73,14,91,.30))}
.sticky-art-button img,
.sticky-art-counter img{object-fit:contain}
.sticky-art-counter{
  width:100%;
  height:100%;
  filter:drop-shadow(0 3px 3px rgba(73,14,91,.25));
}

/* Values remain code-rendered. Coordinates aim into the blank yellow pads. */
.sticky-dynamic-value{
  left:17%;
  right:17%;
  bottom:5.8%;
  height:18.5%;
  font-size:clamp(8px,.77vw,13px);
  text-shadow:0 1px 0 #a72355,0 0 3px rgba(90,12,95,.48);
}
.sticky-spin-count{
  bottom:5.6%;
  height:18.5%;
  font-size:clamp(14px,1.25vw,22px);
}

.sticky-history-wrap>img{object-fit:fill}
.sticky-history-content{
  left:8.6%;
  right:8.6%;
  top:15.5%;
  bottom:17%;
  justify-content:flex-start;
  align-items:stretch;
  gap:3px;
}
.sticky-history-title{
  flex:0 0 auto;
  text-align:center;
  color:#985493;
  opacity:.62;
  font:900 clamp(5px,.47vw,8px)/1 Arial,sans-serif;
  letter-spacing:.12em;
  margin:0 0 3px;
}
.sticky-history-demo{
  display:flex;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}
.sticky-connection-row{
  min-height:17px;
  flex:1 1 0;
  display:grid;
  grid-template-columns:15px 12px 1fr auto;
  align-items:center;
  gap:2px;
  padding:1px 4px;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(246,65,154,.78),rgba(176,39,153,.70));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 0 0 1px rgba(103,20,123,.18);
  color:#fff;
  text-shadow:0 1px 1px rgba(88,11,92,.7);
  font-size:clamp(6px,.52vw,9px);
  line-height:1;
}
.sticky-connection-row b{font-size:1.05em}
.sticky-connection-row strong{font-size:.95em;white-space:nowrap}
.demo-multi{font-weight:900;color:#ffd85d}
.demo-candy{
  width:12px;
  height:12px;
  display:block;
  border-radius:45% 55% 45% 55%;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.58),inset -2px -2px 3px rgba(69,17,83,.24);
}
.demo-pink{background:#ff6fca}
.demo-green{background:#68d860}
.demo-purple{background:#9d65e8}

/* Keep the diagnostic label off the important left machine rail. */
.sticky-foundation-tag{
  left:auto;
  right:1.2%;
  bottom:1.2%;
  font-size:8px;
  opacity:.76;
}

/* In narrow mode, retain the same relative composition instead of reverting
   to the oversized v3 right panel. */
@media(max-width:760px){
  .sticky-side-ui{left:.35%;right:auto;width:15.1%}
  .sticky-art-logo{right:.1%;width:17.4%}
  .sticky-history-title{letter-spacing:.04em}
  .sticky-history-demo{gap:1px}
  .sticky-connection-row{grid-template-columns:9px 8px 1fr auto;padding:1px 2px;gap:1px}
  .demo-candy{width:8px;height:8px}
}

/* Clip future tumble/symbol animation to the actual 7x7 opening. */
.sticky-board-plane{overflow:hidden}

/* ==========================================================================
   v5 — NEW TRANSPARENT REEL FRAME + STEEZN'S REALM PLAYER BAR
   ========================================================================== */

/* New frame is already a clean transparent PNG. Do not crop or stretch the
   reel opening separately; preserve its authored aspect ratio. */
.sticky-reel-frame{
  position:absolute !important;
  inset:auto !important;
  left:7.6% !important;
  top:.35% !important;
  width:84.5% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  z-index:2 !important;
  pointer-events:none !important;
  user-select:none !important;
}

/* Future 7×7 symbols sit only inside the transparent glass opening and stop
   just above the seven lower tunnels. */
.sticky-board-plane{
  left:17.65% !important;
  top:12.1% !important;
  width:56.5% !important;
  height:59.4% !important;
  overflow:hidden !important;
  z-index:3 !important;
}

/* The new right-side candy reservoir is part of the reel frame. Keep the logo
   above it, just as the reference game layers branding over machine scenery. */
.sticky-art-logo{z-index:7 !important}

/* ---------- Steezn's Realm player bar ---------- */
.controls.cd-bar,
#cdBar.cd-bar{
  width:640px;
  max-width:calc(100% - 18px);
  height:72px;
  min-height:72px;
  margin:0 auto 0;
  padding:0;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 178px;
  align-items:stretch;
  column-gap:2px;
  position:relative;
  z-index:55;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
#cdBar button{font-family:inherit;cursor:pointer}

#cdBar .cd-left{
  width:50px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  margin:0;
}
#cdBar .cd-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#fff;
}
#cdBar #turboBtn{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.94);
  background:rgba(10,12,14,.93);
  box-shadow:0 0 0 2px rgba(0,0,0,.72),0 3px 12px rgba(0,0,0,.45);
  font-size:1.32rem;
  line-height:1;
}
#cdBar #turboBtn:hover,
#cdBar #turboBtn.turbo-on{color:#f7d35b;border-color:#f7d35b}

#cdBar .cd-mid{
  height:56px;
  align-self:center;
  display:grid;
  grid-template-columns:40px minmax(160px,1.48fr) minmax(108px,.82fr) 6px 150px;
  align-items:stretch;
  gap:0;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  overflow:visible;
}
#cdBar .cd-menu-anchor{grid-column:1;position:relative}
#cdBar .cd-menu-anchor + .cd-stat{grid-column:2}
#cdBar .cd-menu-anchor + .cd-stat + .cd-stat{grid-column:3}
#cdBar .cd-play{grid-column:5}

#cdBar .cd-menu-anchor,
#cdBar .cd-stat{
  min-width:0;
  height:56px;
  background:rgba(10,12,10,.62);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#cdBar .cd-menu-anchor{border-left:1px solid rgba(255,255,255,.10);border-radius:5px 0 0 5px}
#cdBar .cd-menu-anchor + .cd-stat + .cd-stat{border-right:1px solid rgba(255,255,255,.10);border-radius:0 5px 5px 0}

#cdBar #menuBtn,
#cdBar #menuBtn:hover,
#cdBar #menuBtn:active,
#cdBar #menuBtn:focus{
  width:36px;
  height:56px;
  min-width:36px;
  min-height:56px;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#e9ecef;
  font-size:1.18rem;
  transform:none;
  filter:none;
}
#cdBar #menuBtn:hover{color:#f7d35b}

#cdBar .cd-stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:6px 14px;
  box-sizing:border-box;
}
#cdBar .cd-menu-anchor + .cd-stat + .cd-stat{
  align-items:flex-end;
  text-align:right;
  padding-left:8px;
  padding-right:15px;
}
#cdBar .cd-stat label,
#cdBar .cd-play>label{
  display:block;
  margin:0 0 3px;
  color:#d5d8d6;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.45px;
  line-height:1;
  text-transform:uppercase;
}
#cdBar .cd-stat .val{
  margin:0;
  color:#f8fafc;
  font-size:.78rem;
  font-weight:900;
  line-height:1.05;
  white-space:nowrap;
}
#cdBar .cd-menu-anchor + .cd-stat + .cd-stat label,
#cdBar .cd-menu-anchor + .cd-stat + .cd-stat .val{width:100%;text-align:right}

#cdBar .cd-play{
  width:150px;
  min-width:150px;
  height:56px;
  position:relative;
  padding:0;
  margin:0;
  overflow:hidden;
  background:rgba(5,7,8,.94);
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px;
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 3px 12px rgba(0,0,0,.24);
}
#cdBar .cd-play>label{position:absolute;left:10px;top:9px;z-index:3;margin:0;color:#fff;font-size:.49rem}
#cdBar .cd-play-row{position:absolute;inset:0;width:150px;height:56px;display:block;margin:0;padding:0}
#cdBar .bet-display{
  position:absolute;
  left:42px;
  right:42px;
  bottom:15px;
  height:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
#cdBar .bet-currency{color:#fff;font-size:.75rem;font-weight:900;line-height:1}
#cdBar .cd-play-row .bet-val{color:#fff;font-size:.82rem;font-weight:900;line-height:1}
#cdBar .cd-pm{
  position:absolute;
  top:0;
  width:34px;
  height:56px;
  min-width:34px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:#fff;
  font-size:1.38rem;
  font-weight:500;
  line-height:1;
  box-shadow:none;
}
#cdBar .bet-minus{left:3px}
#cdBar .bet-plus{right:3px}
#cdBar .cd-pm:hover{color:#f7d35b}

#cdBar .cd-right{
  width:178px;
  min-width:178px;
  max-width:178px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:0;
  margin:0 0 0 6px;
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  overflow:visible;
}
#cdBar .auto-wrap{
  position:relative;
  width:120px;
  min-width:120px;
  max-width:120px;
  height:56px;
  flex:0 0 120px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0 -62px 0 0;
  padding:4px 0 4px 5px;
  background:rgba(7,9,10,.94);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px 30px 30px 6px;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 3px 12px rgba(0,0,0,.34);
  overflow:visible;
  z-index:1;
}
#cdBar .cd-auto{
  position:relative;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  box-shadow:none;
}
#cdBar .cd-auto::before{
  content:"↻";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-10deg);
  color:#fff;
  font-size:2.15rem;
  font-weight:700;
  line-height:1;
  z-index:1;
}
#cdBar .cd-auto .auto-letter{position:relative;z-index:2;color:#fff;font-size:.62rem;font-weight:1000;line-height:1;transform:translateY(1px)}
#cdBar .cd-auto:hover::before,
#cdBar .cd-auto:hover .auto-letter,
#cdBar .cd-auto.auto-on::before,
#cdBar .cd-auto.auto-on .auto-letter{color:#f7d35b}

#cdBar .cd-spin{
  position:relative;
  z-index:2;
  width:66px;
  height:66px;
  min-width:66px;
  min-height:66px;
  flex:0 0 66px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  outline:0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#17191b 0%,#080a0b 72%,#030404 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.55);
  color:#fff;
}
#cdBar .cd-spin .spin-arrow{
  display:block;
  transform:rotate(-18deg);
  color:#fff;
  font-size:3.55rem;
  font-weight:700;
  line-height:.82;
  text-shadow:0 2px 5px rgba(0,0,0,.48);
}
#cdBar .cd-spin:hover .spin-arrow{color:#f7d35b;text-shadow:0 2px 5px rgba(0,0,0,.48),0 0 8px rgba(247,211,91,.26)}
#cdBar .cd-spin:active{transform:none}

#cdBar .cd-bonus{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  margin:0 0 0 6px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid rgba(245,197,65,.72);
  background:radial-gradient(circle at 45% 38%,#3a2a0a 0%,#171006 58%,#080704 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.72),inset 0 0 12px rgba(245,197,65,.10),0 3px 12px rgba(0,0,0,.42);
  color:#f7d35b;
  font-size:.48rem;
  font-weight:1000;
  letter-spacing:.15px;
}
#cdBar .cd-bonus:hover{filter:brightness(1.12)}

/* Foundation-only dropdowns so the copied bar can be reviewed interactively. */
#cdBar .cd-menu,
#cdBar .auto-picker{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);
  z-index:100;
  padding:6px;
  background:#111416;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  box-shadow:0 14px 28px rgba(0,0,0,.46);
}
#cdBar .cd-menu{left:0;width:150px}
#cdBar .auto-picker{left:0;width:72px;grid-template-columns:1fr}
#cdBar .cd-menu.open{display:block}
#cdBar .auto-picker.show{display:grid}
#cdBar .cd-menu-title{padding:4px 7px 6px;color:#788690;font-size:9px;font-weight:900;letter-spacing:.08em}
#cdBar .cd-menu-item,
#cdBar .auto-picker button{
  width:100%;
  min-height:30px;
  padding:0 8px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#e9ecef;
  text-align:left;
  font-size:10px;
  font-weight:800;
}
#cdBar .auto-picker button{text-align:center}
#cdBar .cd-menu-item:hover,
#cdBar .auto-picker button:hover{background:#202326;color:#f7d35b}

@media(max-width:760px){
  #cdBar.cd-bar{transform:scale(.88);transform-origin:center top;margin-bottom:-9px}
}

/* ========================================================================== 
   v7 — SLOT-INTERNAL CONTROLS + REALM UTILITY STRIP
   ========================================================================== */

/* Keep the complete game presentation self-contained, like Steezn's Realm. */
.sticky-game-frame{
  aspect-ratio:1110/810;
  max-height:none;
  padding-bottom:120px;
}

/* Center the approved 7x7 candy machine artwork as one authored layer. */
.sticky-reel-frame{
  left:50% !important;
  top:.35% !important;
  width:84.5% !important;
  transform:translateX(-50%) !important;
}

/* Follow the same glass opening after the frame becomes taller. */
.sticky-board-plane{
  left:17.65% !important;
  top:10.30% !important;
  width:56.5% !important;
  height:50.60% !important;
}

/* Bigger feature-buy art while keeping the connection display underneath. */
.sticky-side-ui{
  left:.45% !important;
  top:1.75% !important;
  width:16.35% !important;
  height:69.4% !important;
}
.sticky-state{
  flex-basis:45.5% !important;
  height:45.5% !important;
  width:112%;
  margin-left:-6%;
}
/* Developer-only footer/status UI is intentionally gone in v7. */
.sticky-foundation-tag,
.sticky-review-controls,
.sticky-info{display:none !important}

/* Realm player bar now lives ON the slot, immediately above the utility strip. */
.controls.cd-bar#cdBar,
#cdBar.cd-bar{
  position:absolute !important;
  left:50% !important;
  bottom:48px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  z-index:70 !important;
}

/* Exact Steezn's Realm utility-strip composition. */
.game-utility-bar{
  position:absolute;
  z-index:73;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  min-height:40px;
  margin:0;
  padding:6px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#1a3445;
  border-radius:0 0 8px 8px;
  box-sizing:border-box;
}
.game-utility-left,.game-utility-right{
  display:flex;
  align-items:center;
  gap:4px;
}
.game-utility-center{
  color:#c9d8e2;
  font-size:.72rem;
  font-weight:800;
  opacity:.88;
}
.game-util-btn{
  min-width:38px;
  height:34px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#a9c0cf;
  font-size:.78rem;
  font-weight:800;
  cursor:pointer;
}
.game-util-btn:hover{background:#244659;color:#fff}
.game-util-btn.fairness{
  background:#36596d;
  color:#eef7fb;
  padding:0 13px;
}

/* Theatre mode mirrors Realm by widening the slot, without changing internal ratios. */
.sticky-game-frame.theater-mode{
  width:min(1320px,calc(100vw - 34px)) !important;
}

@media(max-width:760px){
  .sticky-game-frame{aspect-ratio:110/810}
  .sticky-side-ui{left:.25% !important;width:16.7% !important}
  .game-util-btn{min-width:32px;padding:0 7px}
}

/* TEST: keep width, pull slot bottom upward */
.sticky-game-frame{aspect-ratio:1110/700 !important;}

/* Steezy Original / Fairness / Fullscreen bottom bar */
.sticky-realm-bottom-strip{
    bottom: 1px !important;   /* LOWER the bar */
    left: 0.5% !important;      /* expand farther LEFT */
    right: 0.5% !important;     /* expand farther RIGHT */
    width: auto !important;
}
/* ========================================================================== */
/* PLAYER UI TUNING — remove bonus, shift info panel left, lighter glass      */
/* ========================================================================== */

/* Remove the round BONUS button completely. */
#cdBar #buyBtn,
#cdBar .cd-bonus{
  display:none !important;
}

/* Pull the Balance / Win / Settings block left without moving the spin button. */
#cdBar .cd-mid{
  transform:translateX(-148px) !important;
}

/* Make the settings + Balance / Win strip much more transparent. */
#cdBar .cd-menu-anchor,
#cdBar .cd-stat{
  background:rgba(10,12,10,.20) !important;
  border-color:rgba(255,255,255,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015) !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* Also soften the Bet panel so the whole center UI visually matches. */
#cdBar .cd-play{
  background:rgba(5,7,8,.20) !important;
  border-color:rgba(255,255,255,.055) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.015) !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* ========================================================================== */
/* REFERENCE PLAYER BAR v2 — compact Sugar-Rush-style composition             */
/* ========================================================================== */

/* Remove the separate lightning/turbo button. Spacebar can still be used by JS. */
#cdBar #turboBtn,
#cdBar .cd-left{
  display:none !important;
}

/* Re-compose the whole control bar as one long, low strip. */
.controls.cd-bar#cdBar,
#cdBar.cd-bar{
  width:720px !important;
  max-width:calc(100% - 12px) !important;
  height:62px !important;
  min-height:62px !important;
  grid-template-columns:minmax(0,1fr) 190px !important;
  column-gap:8px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  background:rgba(19,22,34,.12) !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Put settings + balance + win into the left side like the reference. */
#cdBar .cd-mid{
  grid-column:1 !important;
  width:100% !important;
  height:54px !important;
  align-self:center !important;
  transform:none !important;
  display:grid !important;
  grid-template-columns:38px 150px 118px 1fr !important;
  gap:0 !important;
  overflow:visible !important;
}

#cdBar .cd-menu-anchor{grid-column:1 !important;}
#cdBar .cd-menu-anchor + .cd-stat{grid-column:2 !important;}
#cdBar .cd-menu-anchor + .cd-stat + .cd-stat{grid-column:3 !important;}
#cdBar .cd-play{grid-column:4 !important;}

/* Very transparent glass, close to the screenshot instead of dark boxes. */
#cdBar .cd-menu-anchor,
#cdBar .cd-stat,
#cdBar .cd-play{
  height:54px !important;
  background:rgba(8,10,16,.10) !important;
  border-color:rgba(255,255,255,.035) !important;
  box-shadow:none !important;
  backdrop-filter:blur(1px) !important;
  -webkit-backdrop-filter:blur(1px) !important;
}

#cdBar .cd-stat{
  padding:5px 10px !important;
}

#cdBar .cd-stat label,
#cdBar .cd-play>label{
  font-size:.46rem !important;
  opacity:.88;
}

#cdBar .cd-stat .val{
  font-size:.78rem !important;
}

/* Compact bet area on the same left information strip. */
#cdBar .cd-play{
  width:auto !important;
  min-width:0 !important;
  border-radius:0 6px 6px 0 !important;
}
#cdBar .cd-play-row{
  width:100% !important;
  height:54px !important;
}
#cdBar .bet-display{
  left:38px !important;
  right:38px !important;
  bottom:14px !important;
}
#cdBar .cd-pm{
  height:54px !important;
  width:31px !important;
  min-width:31px !important;
  font-size:1.2rem !important;
}

/* Right-side spin cluster: autoplay immediately beside the main spin. */
#cdBar .cd-right{
  grid-column:2 !important;
  width:190px !important;
  min-width:190px !important;
  max-width:190px !important;
  height:62px !important;
  margin:0 !important;
  gap:4px !important;
  justify-content:flex-end !important;
}

#cdBar .auto-wrap{
  width:90px !important;
  min-width:90px !important;
  max-width:90px !important;
  height:50px !important;
  flex:0 0 90px !important;
  margin:0 -40px 0 0 !important;
  padding:2px 0 2px 4px !important;
  background:rgba(8,10,16,.14) !important;
  border-color:rgba(255,255,255,.05) !important;
  box-shadow:none !important;
}
#cdBar .cd-auto{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  flex:0 0 42px !important;
}
#cdBar .cd-auto::before{
  font-size:1.85rem !important;
}

#cdBar .cd-spin{
  width:60px !important;
  height:60px !important;
  min-width:60px !important;
  min-height:60px !important;
  flex:0 0 60px !important;
  background:rgba(8,10,16,.32) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.15) !important;
}
#cdBar .cd-spin .spin-arrow{
  font-size:3.15rem !important;
}

/* Bonus button remains removed. */
#cdBar #buyBtn,
#cdBar .cd-bonus{
  display:none !important;
}

/* Reference-style instruction across the upper middle of the bar. */
#cdBar::before{
 
  position:absolute;
  z-index:90;
  left:330px;
  top:3px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.92);
  font:900 10px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

@media(max-width:760px){
  #cdBar::before{display:none !important;}
}

/* ========================================================================== */
/* REFERENCE PLAYER BAR v3 — larger outlined spin / autoplay, no right housing */
/* ========================================================================== */

/* Give the right control cluster more room without disturbing the left info strip. */
.controls.cd-bar#cdBar,
#cdBar.cd-bar{
  width:790px !important;
  height:84px !important;
  min-height:84px !important;
  grid-template-columns:minmax(0,1fr) 252px !important;
  column-gap:12px !important;
  background:transparent !important;
}

/* Keep the left information strip vertically centered beside the larger controls. */
#cdBar .cd-mid{
  align-self:center !important;
}

/* Larger right-side control area, matching the reference composition. */
#cdBar .cd-right{
  grid-column:2 !important;
  width:252px !important;
  min-width:252px !important;
  max-width:252px !important;
  height:84px !important;
  margin:0 !important;
  padding:0 !important;
  gap:12px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Completely remove the faint rectangular/pill housing behind autoplay. */
#cdBar .auto-wrap{
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:62px !important;
  flex:0 0 62px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}

/* Autoplay is now its own clean circular outlined control. */
#cdBar .cd-auto{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  flex:0 0 58px !important;
  margin:0 !important;
  padding:0 !important;
  border:3px solid rgba(255,255,255,.96) !important;
  border-radius:50% !important;
  background:rgba(7,9,14,.12) !important;
  box-shadow:0 2px 5px rgba(0,0,0,.22) !important;
}
#cdBar .cd-auto::before{
  font-size:2.35rem !important;
  color:#fff !important;
}
#cdBar .cd-auto .auto-letter{
  color:#fff !important;
  font-size:.60rem !important;
}

/* Main spin becomes the visual hero: substantially larger with crisp white rings. */
#cdBar .cd-spin{
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  min-height:82px !important;
  flex:0 0 82px !important;
  margin:0 !important;
  border:4px solid rgba(255,255,255,.98) !important;
  border-radius:50% !important;
  background:rgba(7,9,14,.14) !important;
  box-shadow:
    0 0 0 2px rgba(15,20,35,.52),
    0 3px 7px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}
#cdBar .cd-spin .spin-arrow{
  font-size:4.45rem !important;
  line-height:.78 !important;
  color:#fff !important;
  text-shadow:0 2px 3px rgba(0,0,0,.34) !important;
}

/* Keep hover feedback subtle while preserving the white outlined reference look. */
#cdBar .cd-auto:hover,
#cdBar .cd-auto.auto-on,
#cdBar .cd-spin:hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.07) !important;
}

/* Re-center instruction text over the wider composition. */
#cdBar::before{
  left:390px !important;
  top:4px !important;
}


/* ========================================================================== */
/* PLAYER CONTROL FINAL TUNING — transparency + hover                         */
/* ========================================================================== */

/* Keep the right control area itself completely invisible. */
#cdBar .cd-right,
#cdBar .auto-wrap{
  background:transparent !important;
  box-shadow:none !important;
}

/* AUTOPLAY normal appearance */
#cdBar .cd-auto{
  background:rgba(7,9,14,.65) !important;
  border:3px solid rgba(255,255,255,.96) !important;
  box-shadow:0 2px 5px rgba(0,0,0,.18) !important;
  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease !important;
}

/* AUTOPLAY mouse-over / active */
#cdBar .cd-auto:hover,
#cdBar .cd-auto.auto-on{
  background:rgba(7,9,14,.90) !important;
  border-color:#fff !important;
  box-shadow:0 0 12px rgba(255,255,255,.28) !important;
  transform:scale(1.045) !important;
}

/* Keep autoplay icon white instead of switching gold. */
#cdBar .cd-auto:hover::before,
#cdBar .cd-auto:hover .auto-letter,
#cdBar .cd-auto.auto-on::before,
#cdBar .cd-auto.auto-on .auto-letter{
  color:#fff !important;
}

/* SPIN normal appearance */
#cdBar .cd-spin{
  background:rgba(7,9,14,.65) !important;
  border:4px solid rgba(255,255,255,.98) !important;
  box-shadow:
    0 0 0 2px rgba(15,20,35,.28),
    0 3px 7px rgba(0,0,0,.20) !important;
  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease !important;
}

/* SPIN mouse-over */
#cdBar .cd-spin:hover{
  background:rgba(7,9,14,.90) !important;
  border-color:#fff !important;
  box-shadow:
    0 0 0 2px rgba(15,20,35,.22),
    0 0 15px rgba(255,255,255,.34) !important;
  transform:scale(1.055) !important;
}

/* Keep spin arrow white on hover. */
#cdBar .cd-spin:hover .spin-arrow{
  color:#fff !important;
  text-shadow:none !important;
}


/* ========================================================================== */
/* BOTTOM PLAYER BAR TEXT — outlined slot/reference lettering                 */
/* ========================================================================== */

/* Chunky high-contrast lettering for every important player-bar value/label. */
#cdBar .cd-stat label,
#cdBar .cd-play > label,
#cdBar .cd-stat .val,
#cdBar .bet-currency,
#cdBar .bet-val{
  font-family:"Arial Black","Arial Narrow",Impact,Arial,sans-serif !important;
  font-weight:900 !important;
  -webkit-text-stroke:1px rgba(0,0,0,.95);
  paint-order:stroke fill;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 2px 2px rgba(0,0,0,.90) !important;
}

/* Reference-style gold/yellow headings. */
#cdBar .cd-stat label,
#cdBar .cd-play > label{
  color:#ffd95a !important;
}

/* Keep balances, wins, currency and bet amounts bright white. */
#cdBar .cd-stat .val,
#cdBar .bet-currency,
#cdBar .bet-val{
  color:#fff !important;
}


/* ========================================================================== */
/* PLAYER BAR SIZE + BET SPACING REFINEMENT                                   */
/* ========================================================================== */

/* Give the left information area more room and scale the typography up. */
#cdBar .cd-mid{
  grid-template-columns:42px 172px 138px minmax(190px,1fr) !important;
}

/* Settings button grows with the rest of the player information. */
#cdBar #menuBtn,
#cdBar #menuBtn:hover,
#cdBar #menuBtn:active,
#cdBar #menuBtn:focus{
  width:40px !important;
  min-width:40px !important;
  font-size:1.34rem !important;
}

/* Larger BALANCE / WIN / PLAY headings. */
#cdBar .cd-stat label,
#cdBar .cd-play > label{
  font-size:.58rem !important;
  letter-spacing:.48px !important;
}

/* Larger balance and win values. */
#cdBar .cd-stat .val{
  font-size:.96rem !important;
}

/* Slightly roomier stat padding so the larger text does not feel cramped. */
#cdBar .cd-stat{
  padding:5px 13px !important;
}

/* Give PLAY enough width for the larger amount while keeping everything tight. */
#cdBar .cd-play{
  min-width:190px !important;
  width:auto !important;
}

/* Pull the - and + much closer to the actual bet amount. */
#cdBar .cd-play-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:15px 9px 0 !important;
}

/* Stop the old absolute-positioned +/- layout from spreading them to the edges. */
#cdBar .cd-pm{
  position:static !important;
  width:28px !important;
  min-width:28px !important;
  height:30px !important;
  min-height:30px !important;
  flex:0 0 28px !important;
  font-size:1.55rem !important;
  line-height:1 !important;
}

/* Bet value now sits naturally between - and + instead of being pinned far away. */
#cdBar .bet-display{
  position:static !important;
  width:auto !important;
  height:30px !important;
  min-width:82px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
}

/* Increase the visible currency + amount. */
#cdBar .bet-currency{
  font-size:.88rem !important;
}
#cdBar .cd-play-row .bet-val,
#cdBar .bet-val{
  font-size:1rem !important;
}


/* ========================================================================== */
/* BET +/- BUTTONS — MATCH SPIN BUTTON VISUAL EFFECTS                         */
/* ========================================================================== */

#cdBar .cd-pm{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  flex:0 0 32px !important;

  border:2px solid rgba(255,255,255,.98) !important;
  border-radius:50% !important;
  background:rgba(7,9,14,.65) !important;

  color:#fff !important;
  font-size:1.45rem !important;
  font-weight:900 !important;
  line-height:1 !important;

  box-shadow:
    0 0 0 1px rgba(15,20,35,.28),
    0 2px 5px rgba(0,0,0,.20) !important;

  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease !important;
}

#cdBar .cd-pm:hover{
  background:rgba(7,9,14,.90) !important;
  border-color:#fff !important;
  color:#fff !important;

  box-shadow:
    0 0 0 1px rgba(15,20,35,.22),
    0 0 10px rgba(255,255,255,.34) !important;

  transform:scale(1.08) !important;
}

#cdBar .cd-pm:active{
  transform:scale(.96) !important;
}

/* ========================================================================== */
/* v8 COMBINED BONUS-BUY PANEL + CENTER CONFIRMATION UI                       */
/* ========================================================================== */

/* The base screen now uses ONE portrait art asset containing both offers. */
.sticky-state-base{
  flex:0 0 52% !important;
  height:52% !important;
  width:100% !important;
  margin:0 !important;
  gap:0 !important;
  overflow:visible !important;
}

.sticky-buy-combined{
  position:relative;
  width:116%;
  height:auto;
  aspect-ratio:1086/1448;
  margin-left:-8%;
  overflow:visible;
  filter:drop-shadow(0 4px 5px rgba(73,14,91,.28));
}

.sticky-buy-combined > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* Code-rendered prices sit in the two blank yellow price pads in the art. */
.sticky-buy-price{
  position:absolute;
  z-index:3;
  left:20%;
  right:20%;
  height:8.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:clamp(8px,.72vw,13px);
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  -webkit-text-stroke:.7px rgba(92,17,65,.96);
  paint-order:stroke fill;
  text-shadow:0 1px 1px rgba(0,0,0,.68);
  pointer-events:none;
}
.sticky-buy-price-free{top:37.4%}
.sticky-buy-price-super{top:82.2%}

/* Invisible hit areas make the two sections of the single PNG independently clickable. */
.sticky-buy-hit{
  position:absolute;
  z-index:4;
  left:8%;
  width:84%;
  padding:0;
  margin:0;
  border:0;
  border-radius:13%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sticky-buy-hit-free{top:7%;height:41%}
.sticky-buy-hit-super{top:50%;height:44%}
.sticky-buy-hit:hover{
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
}
.sticky-buy-hit:active{background:rgba(255,255,255,.10)}
.sticky-buy-hit:focus-visible{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:-3px;
}

/* Keep the existing bonus-spin counters/history untouched. */
.sticky-state-free,
.sticky-state-super{
  flex:0 0 43%;
  height:43%;
}

/* Centered confirmation overlay lives INSIDE the slot, above the board art. */
.sticky-buy-modal[hidden]{display:none !important}
.sticky-buy-modal{
  position:absolute;
  z-index:60;
  left:0;
  right:0;
  top:0;
  bottom:120px;
  display:grid;
  place-items:center;
  padding:2%;
  background:rgba(13,5,35,.54);
  opacity:0;
  transition:opacity .15s ease;
}
.sticky-buy-modal.is-open{opacity:1}

.sticky-buy-modal-card{
  position:relative;
  width:58%;
  aspect-ratio:4/3;
  max-height:92%;
  transform:scale(.975);
  transform-origin:center;
  transition:transform .15s ease;
  filter:drop-shadow(0 12px 22px rgba(39,0,61,.34));
}
.sticky-buy-modal.is-open .sticky-buy-modal-card{transform:scale(1)}

.sticky-buy-modal-card > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* Dynamic purchase total sits on the blank yellow center pill. */
.sticky-buy-modal-price{
  position:absolute;
  z-index:3;
  left:33%;
  right:33%;
  top:72.2%;
  height:12.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:clamp(14px,1.6vw,27px);
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  -webkit-text-stroke:1.4px rgba(108,24,60,.98);
  paint-order:stroke fill;
  text-shadow:0 2px 2px rgba(0,0,0,.62);
  pointer-events:none;
}

/* The red X and green check are baked into the art; these are transparent click targets. */
.sticky-buy-modal-hit{
  position:absolute;
  z-index:5;
  top:69%;
  width:25%;
  height:21%;
  padding:0;
  margin:0;
  border:0;
  border-radius:22%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sticky-buy-modal-cancel{left:7.5%}
.sticky-buy-modal-confirm{right:7.5%}
.sticky-buy-modal-hit:hover{
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),0 0 14px rgba(255,255,255,.16);
}
.sticky-buy-modal-hit:active{background:rgba(255,255,255,.13)}
.sticky-buy-modal-hit:focus-visible{
  outline:3px solid #fff;
  outline-offset:-4px;
}

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

@media(max-width:760px){
  .sticky-buy-combined{width:112%;margin-left:-6%}
  .sticky-buy-modal-card{width:70%}
  .sticky-buy-modal-price{font-size:clamp(10px,2.1vw,18px)}
}


/* ========================================================================== */
/* CONNECTION / HISTORY DISPLAY — LOWER POSITION                              */
/* ========================================================================== */

/*
  The connector display uses .sticky-history-wrap.
  Move the entire framed display downward without changing its size.
*/
/* ========================================================================== */
/* v9 PROFESSIONAL REFERENCE COMPOSITION                                      */
/* Dedicated left feature lane + smaller centered reel machine                */
/* ========================================================================== */

/*
  Main visual change:
  - the machine no longer starts underneath the buy panel
  - left feature UI gets its own breathing room
  - connector frame keeps its authored 4:3 shape instead of being stretched
  - player controls remain untouched
*/

/* Shrink the reel machine horizontally and move it right to create a true
   feature lane on the left, closer to the reference composition. */
.sticky-reel-frame{
  left:57.5% !important;
  top:.35% !important;
  width:79% !important;
  transform:translateX(-50%) !important;
}

/* Follow the resized reel opening. Vertical sizing is intentionally preserved. */
.sticky-board-plane{
  left:27.15% !important;
  top:10.30% !important;
  width:52.85% !important;
  height:50.60% !important;
}

/* Keep the branding comfortably inside the new right-side machine area. */
.sticky-art-logo{
  right:1.15% !important;
  top:4.15% !important;
  width:15.6% !important;
  max-height:27% !important;
}

/* -------------------------------------------------------------------------- */
/* LEFT FEATURE LANE                                                          */
/* -------------------------------------------------------------------------- */

.sticky-side-ui{
  left:1.55% !important;
  right:auto !important;
  top:3.0% !important;
  width:14.25% !important;
  height:auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  gap:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

/* Base buy art keeps its natural portrait proportions. */
.sticky-state-base{
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  overflow:visible !important;
}

.sticky-buy-combined{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1086 / 1448 !important;
  margin:0 !important;
  overflow:visible !important;
  filter:drop-shadow(0 4px 5px rgba(73,14,91,.24)) !important;
}

/* Do not let old generic state sizing stretch the base panel. */
.sticky-state-base .sticky-buy-combined > img{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
  object-fit:contain !important;
}

/* Bonus-spin counter states use the same clean left-lane width. */
.sticky-state-free,
.sticky-state-super{
  flex:0 0 auto !important;
  width:100% !important;
  height:29.5% !important;
  margin:0 !important;
}

/* -------------------------------------------------------------------------- */
/* CONNECTION / TUMBLE DISPLAY                                                */
/* -------------------------------------------------------------------------- */

/*
  The artwork itself is 4:3. Earlier CSS forced it into a much taller box,
  which is why it looked squeezed/placed by hand. Preserve the actual art ratio.
*/
.sticky-history-wrap > img{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Refit the live connection rows into the now-correct frame proportions. */
.sticky-history-content{
  left:8.7% !important;
  right:8.7% !important;
  top:17.2% !important;
  bottom:17.2% !important;

  gap:2px !important;
}

.sticky-history-title{
  margin:0 0 2px !important;
  font-size:clamp(5px,.43vw,7px) !important;
  letter-spacing:.09em !important;
}

.sticky-history-demo{
  gap:2px !important;
}

.sticky-connection-row{
  min-height:14px !important;
  padding:1px 4px !important;
  gap:2px !important;
  font-size:clamp(6px,.48vw,8px) !important;
}

/* -------------------------------------------------------------------------- */
/* PLAYER BAR RELATIONSHIP TO THE NEW MACHINE WIDTH                           */
/* -------------------------------------------------------------------------- */

/*
  Keep all of the player's custom button sizing/effects, but move the complete
  control bar a hair to the right so it visually belongs to the reel machine
  instead of the left feature rail.
*/
.controls.cd-bar#cdBar,
#cdBar.cd-bar{
  left:52.1% !important;
}

/* At narrower layouts, keep the composition centered and prevent the left lane
   from colliding with the player controls. */
@media (max-width:900px){
  .sticky-reel-frame{
    left:57% !important;
    width:80% !important;
  }

  .sticky-board-plane{
    left:26.8% !important;
    width:53.4% !important;
  }

  .sticky-side-ui{
    left:1.1% !important;
    width:14.8% !important;
  }

  .sticky-art-logo{
    right:.7% !important;
    width:15.8% !important;
  }

  .controls.cd-bar#cdBar,
  #cdBar.cd-bar{
    left:51.5% !important;
  }
}


/* ========================================================================== */
/* v10 LEFT LAYOUT — LARGE CONNECTOR + REELS PULLED INTO IT                   */
/* ========================================================================== */

/*
  These overrides intentionally sit at the very bottom of the file so they
  defeat the older responsive/v9 reel-position rules.
*/

/* Make the connector/history holder substantially larger. */
/* Keep the connector artwork filling the enlarged holder. */
.sticky-history-wrap > img{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
  object-fit:contain !important;
}

/* Refit the live rows to the enlarged connector artwork. */
.sticky-history-content{
  left:8.7% !important;
  right:8.7% !important;
  top:17.2% !important;
  bottom:17.2% !important;
}

/*
  Pull the COMPLETE reel assembly left.
  Frame + playable board move together, so they cannot separate.
*/
.sticky-reel-frame{
  left:53.4% !important;
  width:79% !important;
  transform:translateX(-50%) !important;
}

.sticky-board-plane{
  left:23.05% !important;
  width:52.85% !important;
}

/* Move the logo with the machine so the right side stays visually balanced. */
.sticky-art-logo{
  right:4.8% !important;
}

/* Keep these exact positions even under the older <=900px rule. */
@media (max-width:900px){
  .sticky-reel-frame{
    left:53.4% !important;
    width:79% !important;
  }

  .sticky-board-plane{
    left:23.05% !important;
    width:52.85% !important;
  }

  .sticky-art-logo{
    right:4.8% !important;
  }

}


/* ========================================================================== */
/* v11B — BUY PANEL + LOGO POLISH (USER LATEST BASE)                          */
/* ========================================================================== */

/* Remove the old transparent hover/button UI behind the combined buy artwork. */
.sticky-buy-combined .sticky-buy-hit,
.sticky-buy-combined button,
.sticky-buy-combined .sticky-art-button,
.sticky-state-base .sticky-buy-hit,
.sticky-state-base .sticky-art-button{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Remove any pseudo-element hover wash/rectangle from the clickable areas. */
.sticky-buy-combined .sticky-buy-hit::before,
.sticky-buy-combined .sticky-buy-hit::after,
.sticky-state-base .sticky-buy-hit::before,
.sticky-state-base .sticky-buy-hit::after{
  content:none !important;
  display:none !important;
}

/*
  Combined Buy / Super Buy art:
  roughly 65% of the enlargement from the previous version.
*/
.sticky-state-base{
  width:112% !important;
  margin-left:-6% !important;
  overflow:visible !important;
}

.sticky-buy-combined{
  width:112% !important;
  max-width:none !important;
  margin-left:-6% !important;
  overflow:visible !important;

  transform:scale(1.065) !important;
  transform-origin:center top !important;

  transition:
    transform .18s ease,
    filter .18s ease !important;
}

.sticky-buy-combined > img{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
  object-fit:contain !important;
  pointer-events:none !important;
}

/* Hover grows the COMPLETE artwork only — no transparent rectangle behind it. */
@media (hover:hover) and (pointer:fine){
  .sticky-buy-combined:hover{
    transform:scale(1.105) !important;
    filter:
      drop-shadow(0 6px 8px rgba(67,14,88,.24))
      brightness(1.035) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* STICKY STEELERZZ 1000 LOGO                                                 */
/* -------------------------------------------------------------------------- */

/* Larger logo, pushed farther right, with a slow vertical float. */
.sticky-art-logo{
  right:.25% !important;
  top:3.0% !important;
  width:19.2% !important;
  max-height:31% !important;

  animation:stickyLogoFloat 4.6s ease-in-out infinite !important;
  transform-origin:center center !important;
  will-change:transform !important;
}

@keyframes stickyLogoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(9px); }
}

@media (prefers-reduced-motion:reduce){
  .sticky-art-logo{
    animation:none !important;
  }
}

/* Keep the final choices from being overridden by older responsive rules. */
@media (max-width:900px){
  .sticky-art-logo{
    right:.25% !important;
    top:3.0% !important;
    width:19.2% !important;
    max-height:31% !important;
  }

  .sticky-state-base{
    width:112% !important;
    margin-left:-6% !important;
  }

  .sticky-buy-combined{
    width:112% !important;
    margin-left:-6% !important;
  }
}

/* ========================================================================== */
/* CONNECTOR HOLDER — SINGLE SOURCE OF TRUTH                                  */
/* ========================================================================== */
/*
  All older .sticky-history-wrap positioning blocks were removed.
  Edit ONLY this block from now on.
*/
.sticky-side-ui > .sticky-history-wrap{
  position:relative;
  flex:0 0 auto;
  width:140%;
  height:auto;
  max-width:none;
  aspect-ratio:4 / 3;

  /* USER POSITION */
  margin-top:26%;
  margin-left:-12.5%;

  overflow:visible;
  transform:none;
  transform-origin:center top;
  filter:drop-shadow(0 4px 5px rgba(33,72,120,.18));
}

/* ========================================================================== */
/* FINAL STICKY STEELERZZ 1000 LOGO CONTROL                                   */
/* ========================================================================== */
/*
  SIZE: change width
  HORIZONTAL: change right (more negative = farther right)
  VERTICAL START: change top
  BOUNCE SPEED: change 6s
  BOUNCE DISTANCE: change 12px below
*/
.sticky-art-logo{
  right:-.65% !important;
  top:2.1% !important;
  width:20% !important;
  height:auto !important;
  max-height:38% !important;

  animation-name:stickySteelerzzLogoBounce !important;
  animation-duration:4.8s !important;
  animation-timing-function:ease-in-out !important;
  animation-iteration-count:infinite !important;
  animation-fill-mode:both !important;

  transform-origin:center center !important;
  will-change:transform;
}

@keyframes stickySteelerzzLogoBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}


/* ========================================================================== */
/* v14 — LIVE 7x7 SYMBOL / TUMBLE / MULTIPLIER TEST ENGINE                   */
/* ========================================================================== */

.sticky-board-plane{
  isolation:isolate;
}

.sticky-multiplier-layer,
.sticky-symbol-layer{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(7,minmax(0,1fr));
  pointer-events:none;
}

.sticky-multiplier-layer{
  z-index:1;
}

.sticky-symbol-layer{
  z-index:2;
  overflow:visible;
}

.sticky-symbol-cell{
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5%;
  transform-origin:center center;
  animation:stickySymbolDrop .42s cubic-bezier(.18,.72,.22,1) both;
  animation-delay:var(--drop-delay,0ms);
  will-change:transform,opacity;
}

.sticky-symbol-cell > img{
  width:96%;
  height:96%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  filter:
    drop-shadow(0 2px 2px rgba(73,28,84,.23))
    drop-shadow(0 0 2px rgba(255,255,255,.24));
}

.sticky-symbol-cell.is-scatter > img{
  width:101%;
  height:101%;
  animation:stickyScatterIdle 2.8s ease-in-out infinite;
  filter:
    drop-shadow(0 2px 2px rgba(73,28,84,.28))
    drop-shadow(0 0 7px rgba(255,218,69,.34));
}

.sticky-symbol-cell.is-winning{
  z-index:8;
  animation:stickySymbolWin .42s ease-out both !important;
}

.sticky-symbol-cell.is-winning > img{
  filter:
    brightness(1.16)
    drop-shadow(0 0 5px rgba(255,255,255,.95))
    drop-shadow(0 0 11px rgba(255,100,211,.72));
}

@keyframes stickySymbolDrop{
  0%{
    opacity:0;
    transform:translateY(calc(var(--drop-rows,0) * -92%)) scale(.92);
  }
  74%{
    opacity:1;
    transform:translateY(4%) scale(1.02);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes stickySymbolWin{
  0%{opacity:1;transform:scale(1)}
  46%{opacity:1;transform:scale(1.16) rotate(-2deg)}
  76%{opacity:.92;transform:scale(.88) rotate(2deg)}
  100%{opacity:0;transform:scale(.22)}
}

@keyframes stickyScatterIdle{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-3%) rotate(1deg)}
}

/* -------------------------------------------------------------------------- */
/* MULTIPLIER SPOTS                                                           */
/* 1st winning hit = wrapper/marked spot. 2nd hit = x2, then doubles to x1024.*/
/* -------------------------------------------------------------------------- */

.sticky-multi-cell{
  position:relative;
  min-width:0;
  min-height:0;
  margin:7%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28%;
  opacity:0;
  transform:scale(.82);
}

.sticky-multi-cell.is-marked{
  opacity:1;
  transform:scale(1);
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.74) 0 7%,transparent 8%),
    radial-gradient(circle at center,rgba(255,244,145,.72),rgba(255,128,215,.58) 58%,rgba(156,58,210,.42) 100%);
  border:2px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 0 0 2px rgba(255,89,198,.30),
    0 0 8px rgba(255,93,210,.34);
}

.sticky-multi-cell.is-marked:not(.has-multiplier)::after{
  content:"";
  width:18%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff4aa;
  box-shadow:
    -13px -8px 0 -1px rgba(255,255,255,.75),
    12px 7px 0 -2px rgba(255,170,225,.84),
    4px -13px 0 -3px rgba(255,255,255,.78);
  opacity:.92;
}

.sticky-multi-cell.has-multiplier{
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.82) 0 7%,transparent 8%),
    radial-gradient(circle at center,#ffe973 0 16%,#ff9bd8 48%,#a94fe0 100%);
  border-color:rgba(255,255,255,.92);
  box-shadow:
    inset 0 0 0 2px rgba(255,232,104,.52),
    0 0 9px rgba(255,113,211,.54),
    0 0 15px rgba(255,225,94,.28);
}

.sticky-multi-value{
  position:relative;
  z-index:2;
  color:#fff;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:clamp(8px,.90vw,16px);
  font-weight:1000;
  line-height:1;
  letter-spacing:-.04em;
  -webkit-text-stroke:1.1px rgba(91,29,128,.98);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(46,12,69,.72);
}

.sticky-multi-cell.is-updated{
  animation:stickyMultiplierPop .54s cubic-bezier(.2,.85,.3,1.12) both;
}

@keyframes stickyMultiplierPop{
  0%{transform:scale(.72);filter:brightness(1)}
  48%{transform:scale(1.18);filter:brightness(1.35)}
  100%{transform:scale(1);filter:brightness(1)}
}

/* -------------------------------------------------------------------------- */
/* WIN / FEATURE CALLOUTS                                                     */
/* -------------------------------------------------------------------------- */

.sticky-float-win{
  position:absolute;
  z-index:22;
  transform:translate(-50%,-50%);
  padding:4px 7px;
  border-radius:999px;
  background:rgba(72,19,102,.80);
  border:1px solid rgba(255,255,255,.72);
  color:#fff8a8;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:clamp(8px,.75vw,13px);
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
  -webkit-text-stroke:.8px rgba(60,18,88,.90);
  paint-order:stroke fill;
  box-shadow:0 3px 9px rgba(49,12,71,.32);
  pointer-events:none;
  animation:stickyFloatWin .80s ease-out both;
}

@keyframes stickyFloatWin{
  0%{opacity:0;transform:translate(-50%,-20%) scale(.72)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  72%{opacity:1;transform:translate(-50%,-78%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-115%) scale(.92)}
}

.sticky-feature-message{
  position:absolute;
  z-index:30;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  min-width:44%;
  padding:10px 15px;
  text-align:center;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(116,37,159,.92),rgba(66,18,103,.94));
  border:2px solid rgba(255,255,255,.90);
  color:#ffe871;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:clamp(13px,1.55vw,25px);
  font-weight:1000;
  line-height:1.05;
  white-space:nowrap;
  -webkit-text-stroke:1.2px rgba(62,18,87,.96);
  paint-order:stroke fill;
  box-shadow:
    0 6px 18px rgba(55,14,80,.38),
    0 0 18px rgba(255,117,210,.36);
  pointer-events:none;
  animation:stickyFeatureMessage 1.18s ease-out both;
}

@keyframes stickyFeatureMessage{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  75%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}
}

/* -------------------------------------------------------------------------- */
/* LIVE CONNECTOR / TUMBLE HISTORY                                            */
/* -------------------------------------------------------------------------- */

.sticky-history-demo{
  min-height:0;
}

.sticky-live-connection{
  grid-template-columns:18px 1fr auto auto !important;
}

.sticky-history-symbol{
  width:17px;
  height:17px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(54,23,73,.28));
}

.sticky-live-connection strong{
  white-space:nowrap;
  font-size:clamp(5px,.43vw,7px);
}

/* -------------------------------------------------------------------------- */
/* PLAYER CONTROL FEEDBACK                                                    */
/* -------------------------------------------------------------------------- */

#cdBar .cd-spin.is-spinning .spin-arrow{
  animation:stickySpinArrow .62s linear infinite;
}

@keyframes stickySpinArrow{
  to{transform:rotate(360deg)}
}

#cdBar .cd-spin:disabled{
  cursor:default;
}

/* Keep the board readable on smaller layouts without changing authored art. */
@media(max-width:900px){
  .sticky-symbol-cell{padding:1%}
  .sticky-multi-cell{margin:6%}
  .sticky-multi-value{font-size:clamp(7px,1.05vw,12px)}
}

/* ========================================================================== */
/* v15 — 7x7 ALIGNMENT + REALM GRAVITY + JUICY CONNECTION MOTION             */
/* ========================================================================== */

/* The old board plane was still using coordinates from the narrower v10
   machine. These values are measured against board-frame-glass-7x7.png's
   actual inner divider rectangle, so the DOM's seven equal columns/rows sit
   directly inside the authored seven reel lanes. */
.sticky-board-plane{
  left:20.80% !important;
  top:13.05% !important;
  width:58.25% !important;
  height:60.95% !important;
  overflow:hidden !important;
}

@media(max-width:900px){
  .sticky-board-plane{
    left:20.80% !important;
    top:13.05% !important;
    width:58.25% !important;
    height:60.95% !important;
  }
}

/* JS/WAAPI owns all physical fall movement now. Remove the old generic CSS
   drop that was restarting every time renderGrid rebuilt the DOM. */
.sticky-symbol-cell{
  padding:0 !important;
  animation:none !important;
  overflow:visible;
  transform-origin:50% 62%;
  will-change:transform;
}

/* Fill the cell more like the reference candies. The alpha art itself contains
   some transparent breathing room, so >100% here is intentional. */
.sticky-symbol-cell > img{
  width:112% !important;
  height:112% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
  transform-origin:50% 62%;
  will-change:transform,filter;
}

.sticky-symbol-cell.is-scatter > img{
  width:116% !important;
  height:116% !important;
}

/* While WAAPI is moving a cell, keep idle/scatter animations from fighting
   the physics transform. The idle animation resumes after landing. */
.sticky-symbol-cell.is-motion > img{
  animation:none !important;
}

/* Juicy gummy connection: readable hold, squash, stretch, rebound, then pop.
   Duration is switched by JS for normal/turbo so the resolve wait and visual
   animation stay synchronized. */
.sticky-symbol-cell.is-winning{
  z-index:12 !important;
  animation:stickyGummyConnection var(--sticky-win-ms,840ms)
    cubic-bezier(.18,.78,.22,1) both !important;
}

.sticky-symbol-cell.is-winning > img{
  animation:none !important;
  filter:
    brightness(1.14)
    saturate(1.10)
    drop-shadow(0 0 5px rgba(255,255,255,.96))
    drop-shadow(0 0 12px rgba(255,100,211,.66)) !important;
}

@keyframes stickyGummyConnection{
  0%   {opacity:1;transform:translateY(0) scale(1,1) rotate(0deg)}
  13%  {opacity:1;transform:translateY(4%) scale(1.12,.88) rotate(-1.2deg)}
  28%  {opacity:1;transform:translateY(-5%) scale(.93,1.13) rotate(1.1deg)}
  43%  {opacity:1;transform:translateY(2%) scale(1.08,.94) rotate(-.7deg)}
  57%  {opacity:1;transform:translateY(-2%) scale(.97,1.06) rotate(.45deg)}
  70%  {opacity:1;transform:translateY(0) scale(1.025,.985) rotate(0deg)}
  81%  {opacity:1;transform:translateY(0) scale(1,1)}
  91%  {opacity:.90;transform:translateY(-1%) scale(1.08,1.08)}
  100% {opacity:0;transform:translateY(2%) scale(.20,.20)}
}

/* Connection-history rows should arrive with a soft gummy bump instead of
   snapping instantly into the rail. */
.sticky-live-connection{
  animation:stickyConnectionRowJuice .812s cubic-bezier(.18,.78,.22,1) both;
}

@keyframes stickyConnectionRowJuice{
  0%{opacity:0;transform:translateY(7px) scale(.94,.86)}
  38%{opacity:1;transform:translateY(-2px) scale(1.025,1.06)}
  68%{opacity:1;transform:translateY(1px) scale(.99,.98)}
  100%{opacity:1;transform:translateY(0) scale(1,1)}
}


/* ========================================================================== */
/* v16 — MEASURED REEL GEOMETRY + BONUS PRIORITY + HISTORY READABILITY       */
/* ========================================================================== */
/*
  board-frame-glass-7x7.png is NOT seven equal-width reels. Measured divider
  centers in the source PNG are approximately:
    126, 286, 441, 595, 751, 904, 1055, 1181 px
  giving lane widths:
    160, 155, 154, 156, 153, 151, 126 px

  Reel 7 really is narrower in the authored art. Instead of forcing an equal
  CSS grid (which progressively pushed reels 3-7 off-center), the live symbol
  and multiplier grids now use the artwork's real lane widths.
*/
.sticky-board-plane{
  left:20.775% !important;
  width:57.56% !important;
}

.sticky-symbol-layer,
.sticky-multiplier-layer{
  grid-template-columns:160fr 155fr 154fr 156fr 153fr 151fr 126fr !important;
}

@media(max-width:900px){
  .sticky-board-plane{
    left:20.775% !important;
    width:57.56% !important;
  }
}

/* Regular candies were a touch oversized in v15. */
.sticky-symbol-cell > img{
  width:106% !important;
  height:106% !important;
}

/* BONUS CUPCAKE: intentionally much larger than ordinary symbols. Its cell
   owns a high stacking context so transparent artwork can overlap neighboring
   reel lanes without being painted underneath later DOM cells. */
.sticky-symbol-cell.is-scatter{
  z-index:34 !important;
  overflow:visible !important;
}
.sticky-symbol-cell.is-scatter > img{
  width:150% !important;
  height:150% !important;
  max-width:none !important;
  max-height:none !important;
  position:relative;
  z-index:35;
}

/* Rigid outgoing-row clone layer used by the v16 fresh-spin handoff. */
.sticky-exit-overlay-v16{
  position:absolute;
  inset:0;
  z-index:48;
  overflow:hidden;
  pointer-events:none;
}
.sticky-exit-row-v16{
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change:transform;
}
.sticky-exit-cell-v16,
.sticky-exit-cell-v16 > *{
  animation:none !important;
  transition:none !important;
  pointer-events:none !important;
}
.sticky-exit-cell-v16{
  padding:0 !important;
  overflow:visible !important;
  transform-origin:50% 62%;
}

/* Connector/history art was large enough, but the actual live contents were
   still using old 5-8px typography. Use more of the frame's interior and make
   the four stored tumble rows readable at normal desktop scale. */
.sticky-history-content{
  left:7.5% !important;
  right:7.5% !important;
  top:12.5% !important;
  bottom:12.5% !important;
  gap:3px !important;
}
.sticky-history-title{
  margin:0 0 3px !important;
  font-size:clamp(9px,.72vw,12px) !important;
  line-height:1 !important;
  letter-spacing:.055em !important;
  opacity:.84 !important;
}
.sticky-history-demo{
  gap:3px !important;
}
.sticky-connection-row,
.sticky-live-connection{
  grid-template-columns:24px 20px minmax(0,1fr) auto !important;
  min-height:22px !important;
  padding:1px 5px !important;
  gap:3px !important;
  font-size:clamp(10px,.76vw,13px) !important;
  line-height:1 !important;
}
.sticky-history-symbol{
  width:24px !important;
  height:24px !important;
  max-width:none !important;
  max-height:none !important;
}
.sticky-connection-row b{
  font-size:1.12em !important;
}
.sticky-live-connection strong,
.sticky-connection-row strong{
  font-size:.94em !important;
  white-space:nowrap !important;
}
.demo-multi{
  font-size:1em !important;
}

/* ========================================================================== */
/* v17 — USER-APPROVED EQUAL-SPACING REEL BORDER TEST                        */
/* ========================================================================== */
/*
  The supplied slotborder.png replaces the old authored reel frame entirely.
  Unlike the previous PNG, this art uses seven equal-width reel lanes, so the
  live 7x7 board returns to a mathematically even seven-column grid.

  Frame placement remains unchanged so the left buy/history rail, logo and
  player controls do not move during this art test. Only the playable glass
  rectangle is re-measured to the new artwork.
*/
.sticky-board-plane{
  left:19.05% !important;
  top:12.15% !important;
  width:61.55% !important;
  height:49.35% !important;
  overflow:hidden !important;
}

.sticky-symbol-layer,
.sticky-multiplier-layer{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  grid-template-rows:repeat(7,minmax(0,1fr)) !important;
}

@media(max-width:900px){
  .sticky-board-plane{
    left:19.05% !important;
    top:12.15% !important;
    width:61.55% !important;
    height:49.35% !important;
  }
}

/* ========================================================================== */
/* v18 — VERTICAL REEL EXPANSION + SYMBOL DEPTH                              */
/* ========================================================================== */
/* Keep the machine's left/right footprint exactly the same, but give the reel
   assembly more height. This intentionally stretches only the Y axis so the
   equal seven-reel spacing is not disturbed. */
.sticky-reel-frame{
  transform:translateX(-50%) scaleY(1.06) !important;
  transform-origin:50% 50% !important;
}

/* Expand only vertically around the existing board center. Width and X stay
   untouched, so all seven reel centers remain exactly where v17 put them. */
.sticky-board-plane{
  left:19.05% !important;
  top:10.67% !important;
  width:61.55% !important;
  height:52.31% !important;
}

@media(max-width:900px){
  .sticky-reel-frame{
    transform:translateX(-50%) scaleY(1.06) !important;
    transform-origin:50% 50% !important;
  }
  .sticky-board-plane{
    left:19.05% !important;
    top:10.67% !important;
    width:61.55% !important;
    height:52.31% !important;
  }
}

/* Give every candy a soft physical shadow so it reads as sitting in front of
   the glass instead of being painted onto it. */
.sticky-symbol-cell > img{
  filter:
    drop-shadow(0 4px 3px rgba(72,26,92,.42))
    drop-shadow(0 1px 1px rgba(20,12,35,.32)) !important;
}

/* Preserve the larger overlapping bonus/scatter treatment and give it a
   slightly stronger shadow because it sits visually above neighboring cells. */
.sticky-symbol-cell.is-scatter > img{
  filter:
    drop-shadow(0 6px 4px rgba(72,26,92,.50))
    drop-shadow(0 2px 2px rgba(20,12,35,.36)) !important;
}

/* Winning gummy FX must stay brighter than the normal depth shadow. */
.sticky-symbol-cell.is-winning > img{
  filter:
    brightness(1.14)
    saturate(1.10)
    drop-shadow(0 4px 3px rgba(72,26,92,.42))
    drop-shadow(0 0 5px rgba(255,255,255,.96))
    drop-shadow(0 0 12px rgba(255,100,211,.66)) !important;
}

/* ========================================================================== */
/* v21 — SUGAR RUSH 1000 PROPORTION PASS                                     */
/* ========================================================================== */
/*
  Final override on purpose: older versions of this stylesheet contain many
  .sticky-reel-frame rules. Editing those earlier rules can appear to do
  nothing because later !important declarations win.

  This pass enlarges the complete reel machine while keeping its horizontal
  center relationship with the left feature rail. The PNG keeps its authored
  aspect ratio; the small extra Y scale gives the seven rows more of the tall,
  packed Sugar Rush 1000 presentation without stretching the columns sideways.
*/
.sticky-reel-frame{
  left:53.4% !important;
  top:4.5% !important;
  width:82% !important;
  height:auto !important;
  transform:translateX(-50%) scaleY(1.14) !important;
  transform-origin:50% 50% !important;
}

/* Follow the enlarged glass opening. Seven columns remain mathematically
   equal; only the complete playable rectangle is enlarged with the artwork. */
.sticky-board-plane{
  /*
    Aligned to the actual glass opening in the current reel artwork.
    These four values move/size the COMPLETE 7x7 symbol plane.
  */
  left:18.22% !important;
  top:12.67% !important;
  width:62.88% !important;
  height:59.5% !important;
  overflow:hidden !important;
}

.sticky-symbol-layer,
.sticky-multiplier-layer{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  grid-template-rows:repeat(7,minmax(0,1fr)) !important;
}

@media(max-width:900px){
  .sticky-reel-frame{
    left:53.4% !important;
    top:.35% !important;
    width:87% !important;
    transform:translateX(-50%) scaleY(1.10) !important;
    transform-origin:50% 50% !important;
  }
  .sticky-board-plane{
    left:18.22% !important;
    top:12.67% !important;
    width:62.88% !important;
    height:56.89% !important;
  }
}


/* ========================================================================== */
/* v22 — BONUS STATE / CONNECTOR PAY FX / MULTIPLIER COLOR PROGRESSION        */
/* ========================================================================== */

/* Keep the bonus counter art in the EXACT same flex footprint as the base buy
   art. This prevents the connector holder below it from jumping when the UI
   switches base -> Free Spins / Super Free Spins. */
.sticky-state-free,
.sticky-state-super{
  flex:0 0 auto !important;
  width:112% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  margin:0 0 0 -6% !important;
  overflow:visible !important;
}

.sticky-state-free .sticky-art-counter,
.sticky-state-super .sticky-art-counter{
  position:relative !important;
  width:112% !important;
  height:auto !important;
  aspect-ratio:1086 / 1448 !important;
  max-width:none !important;
  margin:0 0 0 -6% !important;
  overflow:visible !important;
  filter:drop-shadow(0 4px 5px rgba(73,14,91,.24)) !important;
}

.sticky-state-free .sticky-art-counter > img,
.sticky-state-super .sticky-art-counter > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}

/* Number is code-rendered into the yellow pad in both supplied bonus artworks. */
.sticky-spin-count{
  left:50% !important;
  right:auto !important;
  width:68% !important;
  transform:translateX(-50%) !important;
  bottom:10.0% !important;
  height:17.5% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-family:"Arial Black",Impact,Arial,sans-serif !important;
  font-size:clamp(19px,2.25vw,35px) !important;
  font-weight:1000 !important;
  line-height:1 !important;
  -webkit-text-stroke:1.5px rgba(126,59,0,.96) !important;
  paint-order:stroke fill !important;
  text-shadow:0 2px 2px rgba(92,40,0,.72),0 0 5px rgba(255,255,255,.28) !important;
}

/* Frame must paint ABOVE the live reel symbols. The transparent glass opening
   still reveals gameplay, while border/divider art cleanly masks symbol edges. */
.sticky-reel-frame{
  z-index:4 !important;
}
.sticky-board-plane{
  z-index:3 !important;
}

/* -------------------------------------------------------------------------- */
/* Reel multiplier progression: stronger values become larger + change color. */
/* -------------------------------------------------------------------------- */
.sticky-multi-cell.has-multiplier{
  --multi-a:#ff9bd8;
  --multi-b:#a94fe0;
  --multi-text:#fff;
  --multi-scale:1;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.86) 0 7%,transparent 8%),
    radial-gradient(circle at center,var(--multi-a) 0 20%,var(--multi-b) 100%) !important;
  border-color:rgba(255,255,255,.94) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.28),
    0 0 8px color-mix(in srgb,var(--multi-a) 62%,transparent),
    0 0 15px color-mix(in srgb,var(--multi-b) 38%,transparent) !important;
  transform:scale(var(--multi-scale));
}

.sticky-multi-value{
  color:var(--multi-text,#fff) !important;
  font-size:clamp(10px,1.05vw,18px) !important;
  -webkit-text-stroke:1.2px rgba(70,28,105,.96) !important;
}

/* x2 -> x1024 progression. Keep every tier visually distinct at a glance. */
.sticky-multi-cell[data-multi="2"]{
  --multi-a:#ffdf69; --multi-b:#ff67c8; --multi-text:#fff8b8; --multi-scale:.94;
}
.sticky-multi-cell[data-multi="4"]{
  --multi-a:#82f6ff; --multi-b:#32aef5; --multi-text:#ecffff; --multi-scale:.97;
}
.sticky-multi-cell[data-multi="8"]{
  --multi-a:#9cff76; --multi-b:#2bcf70; --multi-text:#f2ffe9; --multi-scale:1;
}
.sticky-multi-cell[data-multi="16"]{
  --multi-a:#79b8ff; --multi-b:#5368ff; --multi-text:#eef4ff; --multi-scale:1.02;
}
.sticky-multi-cell[data-multi="32"]{
  --multi-a:#e18cff; --multi-b:#8736e8; --multi-text:#fff1ff; --multi-scale:1.04;
}
.sticky-multi-cell[data-multi="64"]{
  --multi-a:#ff9472; --multi-b:#f43c64; --multi-text:#fff0df; --multi-scale:1.06;
}
.sticky-multi-cell[data-multi="128"]{
  --multi-a:#ff5ebd; --multi-b:#e21889; --multi-text:#fff1ad; --multi-scale:1.08;
}
.sticky-multi-cell[data-multi="256"]{
  --multi-a:#ffe566; --multi-b:#f59b18; --multi-text:#fffbd1; --multi-scale:1.10;
}
.sticky-multi-cell[data-multi="512"]{
  --multi-a:#65fff0; --multi-b:#5757ff; --multi-text:#fff4a3; --multi-scale:1.12;
}
.sticky-multi-cell[data-multi="1024"]{
  --multi-a:#fff16b; --multi-b:#ff3ca6; --multi-text:#ffffff; --multi-scale:1.15;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.50),
    0 0 11px rgba(255,239,99,.80),
    0 0 23px rgba(255,54,178,.65) !important;
}

.sticky-multi-cell[data-multi="128"] .sticky-multi-value,
.sticky-multi-cell[data-multi="256"] .sticky-multi-value{
  font-size:clamp(11px,1.14vw,19px) !important;
}
.sticky-multi-cell[data-multi="512"] .sticky-multi-value,
.sticky-multi-cell[data-multi="1024"] .sticky-multi-value{
  font-size:clamp(12px,1.22vw,21px) !important;
  letter-spacing:-.075em !important;
}

.sticky-multi-cell.is-counted{
  animation:stickyMultiCountPulse .56s cubic-bezier(.16,.82,.22,1) both !important;
}
@keyframes stickyMultiCountPulse{
  0%{filter:brightness(1);transform:scale(var(--multi-scale,1))}
  38%{filter:brightness(1.50);transform:scale(calc(var(--multi-scale,1) * 1.18))}
  100%{filter:brightness(1);transform:scale(var(--multi-scale,1))}
}

/* Flying copies of each contributing background multiplier visibly combine
   toward the connected cluster before the summed multiplier is shown. */
.sticky-multi-fly{
  position:absolute;
  z-index:28;
  transform:translate(-50%,-50%);
  pointer-events:none;
  white-space:nowrap;
  color:#fff8aa;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-size:clamp(11px,1.18vw,20px);
  font-weight:1000;
  line-height:1;
  -webkit-text-stroke:1.2px rgba(65,20,91,.96);
  paint-order:stroke fill;
  text-shadow:0 0 6px rgba(255,255,255,.68),0 2px 3px rgba(62,17,91,.72);
}

/* Reference sequence: small base amount -> "base × summed multi" -> one large
   final amount that rises and disappears. */
.sticky-pay-equation,
.sticky-pay-total{
  position:absolute;
  z-index:30;
  transform:translate(-50%,-50%);
  pointer-events:none;
  white-space:nowrap;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-weight:1000;
  line-height:1;
  paint-order:stroke fill;
}

.sticky-pay-equation{
  padding:3px 7px;
  color:#fff;
  font-size:clamp(13px,1.35vw,23px);
  -webkit-text-stroke:1.3px rgba(64,17,89,.98);
  text-shadow:0 2px 3px rgba(49,10,72,.72),0 0 7px rgba(255,255,255,.52);
  animation:stickyPayEquationIn .252s cubic-bezier(.18,.82,.2,1) both;
}
.sticky-pay-equation.has-multiplier{
  color:#fff6a6;
  animation:stickyPayEquationMulti .336s cubic-bezier(.18,.88,.25,1.2) both;
}
@keyframes stickyPayEquationIn{
  from{opacity:0;transform:translate(-50%,-35%) scale(.72)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes stickyPayEquationMulti{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.90)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.sticky-pay-total{
  color:#fff361;
  font-size:clamp(22px,2.50vw,43px);
  -webkit-text-stroke:2px rgba(75,20,98,.98);
  text-shadow:
    0 3px 3px rgba(47,10,67,.78),
    0 0 7px rgba(255,255,255,.85),
    0 0 17px rgba(255,108,213,.66);
  animation:stickyPayTotalRise 1.428s cubic-bezier(.15,.68,.22,1) both;
}
@keyframes stickyPayTotalRise{
  0%{opacity:0;transform:translate(-50%,-28%) scale(.70)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
  48%{opacity:1;transform:translate(-50%,-76%) scale(1)}
  78%{opacity:.94;transform:translate(-50%,-118%) scale(1.02)}
  100%{opacity:0;transform:translate(-50%,-168%) scale(.92)}
}

/* -------------------------------------------------------------------------- */
/* Compact / more readable tumble collector rows.                              */
/* -------------------------------------------------------------------------- */
.sticky-history-demo{
  gap:1px !important;
}

.sticky-connection-row,
.sticky-live-connection{
  grid-template-columns:22px 16px auto auto !important;
  justify-content:start !important;
  column-gap:1px !important;
  row-gap:0 !important;
  min-height:22px !important;
  padding:1px 3px !important;
  font-size:clamp(10px,.82vw,14px) !important;
}

.sticky-history-symbol{
  width:22px !important;
  height:22px !important;
}

.sticky-connection-row b{
  font-size:1.10em !important;
  margin:0 !important;
}

.demo-multi{
  font-size:1.02em !important;
  margin:0 !important;
  padding:0 1px !important;
}

.sticky-live-connection strong,
.sticky-connection-row strong{
  font-size:1.14em !important;
  margin-left:2px !important;
  color:#fff7b0 !important;
  white-space:nowrap !important;
}

/* Feature state should never alter the user's manually chosen collector holder
   position. These intentionally repeat the same values for every mode. */
.sticky-side-ui[data-mode="base"] > .sticky-history-wrap,
.sticky-side-ui[data-mode="free"] > .sticky-history-wrap,
.sticky-side-ui[data-mode="super"] > .sticky-history-wrap{
  margin-top:26% !important;
  margin-left:-12.5% !important;
}

@media(max-width:900px){
  .sticky-state-free,
  .sticky-state-super{
    width:112% !important;
    margin-left:-6% !important;
  }
}

/* ========================================================================== */
/* v23 — COLLECTOR GLASS / BUY MODAL ALIGNMENT / HELD BONUS RESULT SCREEN     */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* MAIN REEL ART GLASS VISIBILITY                                              */
/* -------------------------------------------------------------------------- */
/*
  The reel-frame PNG itself contains partially opaque frosting in the glass
  corners. CSS cannot selectively change only those baked-in pixels, but this
  final opacity control lets the live symbols show through the complete glass
  layer more clearly while preserving the existing art/border image.

  1.00 = original artwork opacity
  0.84 = current clearer-glass setting
  Lower this value further if the glass still hides too much of the symbols.
*/
:root{
  --sticky-reel-art-opacity:1;
  --sticky-collector-glass-opacity:1;
}

.sticky-reel-frame{
  opacity:var(--sticky-reel-art-opacity) !important;
}

/* -------------------------------------------------------------------------- */
/* TUMBLE COLLECTOR — REFERENCE-STYLE TRANSLUCENT RED STORED HITS              */
/* -------------------------------------------------------------------------- */
/* The live rows sit UNDER the transparent collector artwork. This makes the
   collector frame/glass paint over the red stored-hit UI instead of the text
   floating unnaturally on top of the glass. */
.sticky-side-ui > .sticky-history-wrap > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  z-index:5 !important;
  opacity:var(--sticky-collector-glass-opacity) !important;
  pointer-events:none !important;
}

.sticky-side-ui > .sticky-history-wrap .sticky-history-content{
  z-index:2 !important;
  left:7.8% !important;
  right:7.8% !important;
  top:11.5% !important;
  bottom:11.5% !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  overflow:hidden !important;
}

.sticky-history-demo{
  gap:0 !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
}

.sticky-connection-row,
.sticky-live-connection{
  grid-template-columns:20px 13px max-content max-content !important;
  justify-content:start !important;
  align-items:center !important;
  column-gap:0 !important;
  row-gap:0 !important;
  min-height:19px !important;
  padding:0 3px !important;
  margin:0 !important;
  border-radius:4px !important;

  /* Transparent red/pink stored-hit strip like the supplied reference. */
  background:linear-gradient(90deg,
    rgba(142,7,37,.70) 0%,
    rgba(145,10,65,.62) 48%,
    rgba(105,5,62,.54) 100%) !important;
  border:1px solid rgba(255,118,151,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,210,221,.14),
    inset 0 -1px 0 rgba(65,0,40,.22) !important;

  color:#fff !important;
  font-size:clamp(9px,.74vw,13px) !important;
  line-height:1 !important;
}

.sticky-history-symbol{
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  object-fit:contain !important;
  position:relative !important;
  z-index:1 !important;
}

.sticky-connection-row b,
.sticky-live-connection b{
  margin:0 !important;
  padding:0 !important;
  font-size:1.08em !important;
  line-height:1 !important;
}

.demo-multi{
  margin:0 !important;
  padding:0 !important;
  font-size:1em !important;
  line-height:1 !important;
}

.sticky-live-connection strong,
.sticky-connection-row strong{
  margin:0 0 0 1px !important;
  padding:0 !important;
  color:#fff4a6 !important;
  font-size:1.12em !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* -------------------------------------------------------------------------- */
/* BASE BUY PANEL — CENTER BOTH CODE-RENDERED PRICES IN THE YELLOW BUTTONS    */
/* -------------------------------------------------------------------------- */
.sticky-buy-price{
  left:50% !important;
  right:auto !important;
  width:58% !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
}

/* The upper yellow pad is slightly higher in the source PNG than the older
   generic coordinates assumed. The lower Super pad was already centered. */
.sticky-buy-price-free{
  top:36.75% !important;
}
.sticky-buy-price-super{
  top:82.20% !important;
}

/* -------------------------------------------------------------------------- */
/* BONUS BUY CONFIRMATION — FULL SLOT BLUR + EXACT ART BUTTON HIT REGIONS      */
/* -------------------------------------------------------------------------- */
.sticky-buy-modal{
  inset:0 !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  z-index:120 !important;
  padding:2% !important;
  background:rgba(12,5,28,.58) !important;
  -webkit-backdrop-filter:blur(5px) brightness(.78) !important;
  backdrop-filter:blur(5px) brightness(.78) !important;
}

/* Center the dynamic purchase amount over the actual yellow pad. The Free and
   Super source artworks put that pad at different Y positions, so v23 tags the
   modal with data-buy-type in JS instead of forcing one compromise position. */
.sticky-buy-modal-price{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.sticky-buy-modal[data-buy-type="free"] .sticky-buy-modal-price{
  top:68.40% !important;
  width:34% !important;
  height:12% !important;
}

.sticky-buy-modal[data-buy-type="super"] .sticky-buy-modal-price{
  top:72.60% !important;
  width:36% !important;
  height:13% !important;
}

/* Exact transparent click regions for the baked red-X / green-check buttons.
   They remain invisible on hover/press; the source art itself supplies every
   visible pixel so no off-center translucent rectangle can appear. */
.sticky-buy-modal-hit,
.sticky-buy-modal-hit:hover,
.sticky-buy-modal-hit:active{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

.sticky-buy-modal[data-buy-type="free"] .sticky-buy-modal-cancel{
  left:11.60% !important;
  top:68.10% !important;
  width:17.80% !important;
  height:13.70% !important;
}
.sticky-buy-modal[data-buy-type="free"] .sticky-buy-modal-confirm{
  left:70.30% !important;
  right:auto !important;
  top:68.10% !important;
  width:17.90% !important;
  height:13.70% !important;
}

.sticky-buy-modal[data-buy-type="super"] .sticky-buy-modal-cancel{
  left:10.30% !important;
  top:72.60% !important;
  width:18.40% !important;
  height:14.50% !important;
}
.sticky-buy-modal[data-buy-type="super"] .sticky-buy-modal-confirm{
  left:71.00% !important;
  right:auto !important;
  top:72.70% !important;
  width:18.60% !important;
  height:14.30% !important;
}

/* Keyboard accessibility can still show an outline, but mouse hover/press is
   intentionally 100% transparent. */
.sticky-buy-modal-hit:focus:not(:focus-visible){
  outline:none !important;
}

/* ========================================================================== */
/* v27 — CONNECTOR FX ABOVE REEL GLASS + COLLECTOR FOREGROUND GLASS ILLUSION  */
/* ========================================================================== */

/* Dedicated visual-only layer. Actual reel symbols/multipliers remain in the
   board plane beneath the reel artwork; only connector FX are promoted. */
.sticky-connector-fx-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:9 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Connector payout equation, final total and flying multiplier labels now live
   in .sticky-connector-fx-layer, so these render cleanly above baked glass. */
.sticky-connector-fx-layer .sticky-pay-equation,
.sticky-connector-fx-layer .sticky-pay-total,
.sticky-connector-fx-layer .sticky-multi-fly{
  z-index:1 !important;
}

/* COLLECTOR:
   Put stored connector rows ABOVE the collector PNG so the text/symbols remain
   readable. Then apply a separate subtle blue/white veil above the rows to keep
   the visual impression that they are still being viewed through glass. */
.sticky-side-ui > .sticky-history-wrap{
  isolation:isolate !important;
}

.sticky-side-ui > .sticky-history-wrap > img{
  z-index:3 !important;
}

/* Rows promoted above the baked collector art. */
.sticky-side-ui > .sticky-history-wrap .sticky-history-content{
  z-index:5 !important;
  opacity:.93 !important;
  filter:saturate(.92) brightness(.98) !important;
}

/* Artificial glass veil over JUST the collector viewing window. It does not
   block input and is intentionally subtle so the red rows stay readable. */
.sticky-side-ui > .sticky-history-wrap::after{
  content:"";
  position:absolute;
  z-index:6;
  left:7.8%;
  right:7.8%;
  top:11.5%;
  bottom:11.5%;
  border-radius:7%;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.12) 0%,
      rgba(205,235,255,.045) 28%,
      rgba(162,213,246,.075) 68%,
      rgba(255,255,255,.10) 100%);
  box-shadow:
    inset 0 0 12px rgba(196,231,255,.16),
    inset 0 1px 0 rgba(255,255,255,.22);
  mix-blend-mode:screen;
}

/* Keep the red stored-hit strips close and compact under the glass veil. */
.sticky-side-ui > .sticky-history-wrap .sticky-history-demo{
  gap:0 !important;
}


/* ========================================================================== */
/* v28 — TUMBLE COLLECTOR HOLDER / REFERENCE VIDEO PASS                       */
/* ========================================================================== */
/*
  Reference-video behavior:
  - history entries are thin horizontal strips, not tall cards
  - the first entry lands at the BOTTOM of the glass chamber
  - newer entries stack upward with essentially no dead space
  - symbol / count / multiplier / payout use fixed columns
  - payout is right aligned
  - one continuous glass chamber remains visually dominant
*/

/* Tighten the usable chamber so rows look physically contained by the frame. */
.sticky-side-ui > .sticky-history-wrap .sticky-history-content{
  left:9.2% !important;
  right:9.0% !important;
  top:15.5% !important;
  bottom:15.0% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:stretch !important;
  overflow:hidden !important;
  padding:0 !important;
}

/* Stack from the bottom upward like the supplied reference video. */
.sticky-side-ui > .sticky-history-wrap .sticky-history-demo{
  flex:0 0 auto !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:stretch !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Kill the old flex-grow behavior that was making every stored hit look like a
   large card. Each connection is now one compact fixed-height strip. */
.sticky-side-ui > .sticky-history-wrap .sticky-connection-row,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection{
  flex:0 0 20px !important;
  width:100% !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;

  display:grid !important;
  grid-template-columns:22px 14px 27px minmax(0,1fr) !important;
  align-items:center !important;
  justify-items:start !important;
  column-gap:1px !important;

  margin:0 !important;
  padding:0 5px 0 3px !important;

  /* Reference: one thin magenta/red band with crisp horizontal separators. */
  border:0 !important;
  border-radius:0 !important;
  border-top:1px solid rgba(255,205,224,.22) !important;
  border-bottom:1px solid rgba(78,0,49,.30) !important;
  background:
    linear-gradient(90deg,
      rgba(157,5,62,.74) 0%,
      rgba(181,16,89,.68) 48%,
      rgba(115,3,70,.66) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(48,0,41,.18) !important;

  color:#fff !important;
  line-height:1 !important;
  font-size:clamp(8px,.61vw,11px) !important;
  overflow:hidden !important;

  animation:stickyCollectorStripIn .58s cubic-bezier(.18,.80,.22,1) both !important;
}

/* The very bottom hit receives a tiny dark base edge, making it feel seated in
   the physical collector instead of floating over the artwork. */
.sticky-side-ui > .sticky-history-wrap .sticky-history-demo > :last-child{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(54,0,46,.30) !important;
}

@keyframes stickyCollectorStripIn{
  0%{
    opacity:0;
    transform:translateY(9px) scaleY(.80);
    filter:brightness(1.20);
  }
  55%{
    opacity:1;
    transform:translateY(-1px) scaleY(1.04);
    filter:brightness(1.06);
  }
  100%{
    opacity:.94;
    transform:translateY(0) scaleY(1);
    filter:brightness(.98);
  }
}

.sticky-side-ui > .sticky-history-wrap .sticky-history-symbol{
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  justify-self:center !important;
  margin:0 !important;
  object-fit:contain !important;
  filter:
    saturate(.92)
    brightness(.98)
    drop-shadow(0 1px 1px rgba(48,0,61,.36)) !important;
}

.sticky-side-ui > .sticky-history-wrap .sticky-connection-row b,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection b{
  justify-self:start !important;
  margin:0 !important;
  padding:0 !important;
  font-size:1em !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.sticky-side-ui > .sticky-history-wrap .demo-multi{
  justify-self:start !important;
  margin:0 !important;
  padding:0 !important;
  color:#ffe95f !important;
  font-size:1em !important;
  font-weight:1000 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.sticky-side-ui > .sticky-history-wrap .sticky-connection-row strong,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection strong{
  justify-self:end !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff9ca !important;
  font-size:1.03em !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* Replace the broad diagonal sheen with a faint uniform inner-glass treatment.
   This keeps the foreground rows readable while still making them look enclosed. */
.sticky-side-ui > .sticky-history-wrap::after{
  left:8.8% !important;
  right:8.8% !important;
  top:14.7% !important;
  bottom:14.2% !important;
  border-radius:3% !important;
  background:
    linear-gradient(180deg,
      rgba(226,244,255,.075) 0%,
      rgba(194,228,249,.025) 45%,
      rgba(255,255,255,.055) 100%) !important;
  box-shadow:
    inset 0 0 8px rgba(197,232,255,.11),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
  mix-blend-mode:screen !important;
}

/* The baked frame remains present below the promoted rows. */
.sticky-side-ui > .sticky-history-wrap > img{
  z-index:3 !important;
}

.sticky-side-ui > .sticky-history-wrap .sticky-history-content{
  z-index:5 !important;
}


/* ========================================================================== */
/* v29 — BEVELED COLLECTOR STRIPS + TRUE TOP-DROP / LAND BOUNCE               */
/* ========================================================================== */

/*
  Do this in CSS rather than baking another image:
  - stays razor-sharp at every scale
  - automatically fits dynamic text
  - gradient/bevel strength remains easy to tune
  - no extra art asset or alignment dependency
*/
.sticky-side-ui > .sticky-history-wrap .sticky-connection-row,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection{
  /* Deep candy-magenta center with bright upper bevel and dark lower lip. */
  background:
    linear-gradient(180deg,
      rgba(255,111,177,.78) 0%,
      rgba(229,42,123,.78) 10%,
      rgba(176,10,83,.84) 48%,
      rgba(131,3,68,.88) 88%,
      rgba(92,0,54,.92) 100%) !important;

  border-top:1px solid rgba(255,218,237,.74) !important;
  border-bottom:1px solid rgba(62,0,42,.72) !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 4px 6px rgba(255,157,202,.10),
    inset 0 -2px 0 rgba(67,0,48,.48),
    inset 0 -5px 7px rgba(53,0,43,.14),
    0 1px 0 rgba(255,185,220,.13) !important;

  /* JS now owns the drop/bounce so every entry really begins at chamber top. */
  animation:none !important;
  will-change:transform,opacity,filter;
}

/* Thin glossy ridge through the upper face gives the small strip the embossed /
   beveled appearance visible in the reference without creating a separate PNG. */
.sticky-side-ui > .sticky-history-wrap .sticky-connection-row::before,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection::before{
  content:"";
  position:absolute;
  pointer-events:none;
  left:1px;
  right:1px;
  top:1px;
  height:36%;
  border-radius:1px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.035));
  opacity:.72;
}

/* Rows need positioning context for the bevel pseudo-element. */
.sticky-side-ui > .sticky-history-wrap .sticky-connection-row,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection{
  position:relative !important;
}

/* Keep row contents above the bevel highlight. */
.sticky-side-ui > .sticky-history-wrap .sticky-connection-row > *,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection > *{
  position:relative;
  z-index:1;
}




/* ==========================================================================
   v32 — INNER TUMBLE GUI POSITION CONTROL
   ========================================================================== */

/*
  This moves ONLY the tumbling connection rows/text INSIDE the collector glass.
  It does NOT move the collector artwork/holder.

  USER CONTROL:
    positive X = move inner tumble GUI right
    negative X = move left
    positive Y = move down
    negative Y = move up
*/
:root{
  --sticky-tumble-gui-x:1%;
  --sticky-tumble-gui-y:-5%;
}

/* Reference order: quantity | symbol | multiplier | payout */
.sticky-side-ui > .sticky-history-wrap .sticky-connection-row,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection{
  border-radius:8px;
  grid-template-columns:14px 22px 27px minmax(0,1fr);
}

.sticky-side-ui > .sticky-history-wrap .sticky-connection-row b,
.sticky-side-ui > .sticky-history-wrap .sticky-live-connection b{
  justify-self:end;
  text-align:right;
  padding-right:1px;
}

/* THIS is the actual falling/stored GUI inside the holder. */
.sticky-side-ui > .sticky-history-wrap .sticky-history-content{
  transform:translate(
    var(--sticky-tumble-gui-x),
    var(--sticky-tumble-gui-y)
  );
}

/* Spin button stays visually stationary while reels/bonus rounds run. */
#cdBar .cd-spin.is-spinning .spin-arrow{
  animation:none;
}

/* ==========================================================================
   BONUS AWARD INTRO — v38.2 REBUILT WITH SEPARATE PNG LAYERS + CONTINUE BURST
   ========================================================================== */
.sticky-bonus-intro-overlay{
  position:absolute;
  inset:0;
  z-index:118;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5%;
  cursor:pointer;
  opacity:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,82,214,.26), transparent 32%),
    radial-gradient(circle at 50% 55%, rgba(255,120,190,.18), transparent 44%),
    rgba(27,3,46,.42);
  -webkit-backdrop-filter:blur(2.8px) brightness(.73) saturate(1.08);
  backdrop-filter:blur(2.8px) brightness(.73) saturate(1.08);
  transition:opacity .18s ease;
  outline:none;
}

.sticky-bonus-intro-overlay.is-open{opacity:1}
.sticky-bonus-intro-overlay.is-leaving{opacity:0}

.sticky-bonus-intro-stage{
  position:relative;
  width:min(78%,1060px);
  aspect-ratio:4 / 3.15;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 20px 34px rgba(31,0,48,.48));
}

.sticky-bonus-intro-stack,
.sticky-bonus-intro-candy-burst{
  position:absolute;
  inset:0;
}

.sticky-bonus-intro-title-art,
.sticky-bonus-intro-win-art,
.sticky-bonus-intro-number-wrap,
.sticky-bonus-intro-free-art,
.sticky-bonus-intro-press-art{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
}

.sticky-bonus-intro-title-art{
  top:0;
  width:92%;
  transform:translateX(-50%) translateY(-22px) scale(.72);
  transform-origin:50% 72%;
  animation:stickyBonusTitleIn .56s cubic-bezier(.18,.86,.24,1.18) .02s forwards, stickyBonusCongratsBreath 1.18s ease-in-out .7s infinite;
}

.sticky-bonus-intro-win-art{
  top:23%;
  width:82%;
  transform:translateX(-50%) translateY(12px) scale(.86);
  animation:stickyBonusWinLineIn .4s cubic-bezier(.19,.82,.23,1.1) .18s forwards;
}

.sticky-bonus-intro-number-wrap{
  top:47%;
  width:66%;
  aspect-ratio:16 / 4.1;
  transform:translateX(-50%) scale(.84);
  animation:stickyBonusHolderIn .44s cubic-bezier(.18,.88,.24,1.15) .32s forwards;
}

.sticky-bonus-intro-number-holder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.sticky-bonus-intro-number-value{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  font-family:"Arial Black", Impact, Arial, sans-serif;
  font-size:clamp(68px,9.2vw,152px);
  line-height:1;
  font-weight:1000;
  color:#fff1a8;
  letter-spacing:.02em;
  white-space:nowrap;
  -webkit-text-stroke:4px rgba(162,48,8,.95);
  text-shadow:0 5px 0 rgba(173,71,0,.64),0 12px 22px rgba(63,8,72,.44),0 0 14px rgba(255,255,255,.28);
}

.sticky-bonus-intro-free-art{
  top:69%;
  width:74%;
  transform:translateX(-50%) translateY(14px) scale(.85);
  animation:stickyBonusFreeLineIn .4s cubic-bezier(.17,.8,.24,1.06) .46s forwards;
}

.sticky-bonus-intro-press-art{
  bottom:-10%;
  width:64%;
  transform:translateX(-50%) scale(.88);
  filter:drop-shadow(0 8px 16px rgba(75,16,0,.32));
  animation:stickyBonusPressIn .36s ease .98s forwards, stickyBonusPressPulse 1.02s ease-in-out 1.35s infinite;
}

.sticky-bonus-intro-candy{
  position:absolute;
  left:50%;
  top:56%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.18) rotate(0deg);
  transform-origin:50% 50%;
  will-change:transform, opacity;
}
.sticky-bonus-intro-candy.p1{width:34%;}
.sticky-bonus-intro-candy.p2{width:31%;}
.sticky-bonus-intro-candy.p3{width:36%;}
.sticky-bonus-intro-candy.p4{width:29%;}
.sticky-bonus-intro-candy.p5{width:27%;}
.sticky-bonus-intro-candy.p6{width:24%;}
.sticky-bonus-intro-candy.p7{width:22%;}

.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-stack{
  animation:stickyBonusStageDepart 1.42s ease forwards;
}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy{
  opacity:1;
}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p1{animation:stickyBonusCandyBlast1 1.58s cubic-bezier(.16,.68,.16,1) forwards;}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p2{animation:stickyBonusCandyBlast2 1.66s cubic-bezier(.16,.68,.16,1) .06s forwards;}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p3{animation:stickyBonusCandyBlast3 1.72s cubic-bezier(.16,.68,.16,1) .03s forwards;}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p4{animation:stickyBonusCandyBlast4 1.54s cubic-bezier(.16,.68,.16,1) .10s forwards;}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p5{animation:stickyBonusCandyBlast5 1.62s cubic-bezier(.16,.68,.16,1) .04s forwards;}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p6{animation:stickyBonusCandyBlast6 1.56s cubic-bezier(.16,.68,.16,1) .08s forwards;}
.sticky-bonus-intro-overlay.is-transitioning .sticky-bonus-intro-candy.p7{animation:stickyBonusCandyBlast7 1.50s cubic-bezier(.16,.68,.16,1) .12s forwards;}

@keyframes stickyBonusTitleIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-28px) scale(.68)}
  72%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.05)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes stickyBonusCongratsBreath{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.03)}
}
@keyframes stickyBonusWinLineIn{
  0%{opacity:0;transform:translateX(-50%) translateY(16px) scale(.82)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes stickyBonusHolderIn{
  0%{opacity:0;transform:translateX(-50%) translateY(18px) scale(.78)}
  66%{opacity:1;transform:translateX(-50%) translateY(-3px) scale(1.03)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes stickyBonusFreeLineIn{
  0%{opacity:0;transform:translateX(-50%) translateY(16px) scale(.84)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes stickyBonusPressIn{
  0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.88)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes stickyBonusPressPulse{
  0%,100%{opacity:.78;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.035)}
}
@keyframes stickyBonusStageDepart{
  0%{opacity:1;transform:scale(1)}
  30%{opacity:1;transform:scale(1.035)}
  100%{opacity:0;transform:scale(.92)}
}
@keyframes stickyBonusCandyBlast1{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.34) rotate(-8deg)}
  10%{opacity:1;transform:translate(-76%,-62%) scale(.72) rotate(-14deg)}
  72%{opacity:1;transform:translate(-164%,-126%) scale(1.82) rotate(-30deg)}
  100%{opacity:.08;transform:translate(-236%,-174%) scale(2.65) rotate(-42deg)}
}
@keyframes stickyBonusCandyBlast2{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.32) rotate(10deg)}
  10%{opacity:1;transform:translate(-25%,-74%) scale(.70) rotate(24deg)}
  72%{opacity:1;transform:translate(18%,-152%) scale(1.76) rotate(56deg)}
  100%{opacity:.08;transform:translate(58%,-220%) scale(2.55) rotate(84deg)}
}
@keyframes stickyBonusCandyBlast3{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.30) rotate(-2deg)}
  10%{opacity:1;transform:translate(-30%,-68%) scale(.66) rotate(12deg)}
  72%{opacity:1;transform:translate(70%,-130%) scale(1.72) rotate(44deg)}
  100%{opacity:.08;transform:translate(142%,-182%) scale(2.50) rotate(70deg)}
}
@keyframes stickyBonusCandyBlast4{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.30) rotate(-14deg)}
  10%{opacity:1;transform:translate(-92%,-54%) scale(.68) rotate(-28deg)}
  72%{opacity:1;transform:translate(-176%,-18%) scale(1.66) rotate(-70deg)}
  100%{opacity:.08;transform:translate(-242%,18%) scale(2.35) rotate(-108deg)}
}
@keyframes stickyBonusCandyBlast5{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(0deg)}
  10%{opacity:1;transform:translate(16%,-58%) scale(.64) rotate(10deg)}
  72%{opacity:1;transform:translate(126%,-62%) scale(1.62) rotate(38deg)}
  100%{opacity:.08;transform:translate(214%,-70%) scale(2.28) rotate(62deg)}
}
@keyframes stickyBonusCandyBlast6{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.26) rotate(0deg)}
  10%{opacity:1;transform:translate(-66%,4%) scale(.58) rotate(18deg)}
  72%{opacity:1;transform:translate(-128%,72%) scale(1.48) rotate(54deg)}
  100%{opacity:.08;transform:translate(-178%,124%) scale(2.12) rotate(82deg)}
}
@keyframes stickyBonusCandyBlast7{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.26) rotate(0deg)}
  10%{opacity:1;transform:translate(0%,0%) scale(.56) rotate(-12deg)}
  72%{opacity:1;transform:translate(96%,66%) scale(1.44) rotate(-44deg)}
  100%{opacity:.08;transform:translate(172%,112%) scale(2.05) rotate(-72deg)}
}

@media(max-width:900px){
  .sticky-bonus-intro-stage{width:min(96%,980px);aspect-ratio:4 / 3.35;}
  .sticky-bonus-intro-title-art{width:96%;top:.5%;}
  .sticky-bonus-intro-win-art{top:24%;width:86%;}
  .sticky-bonus-intro-number-wrap{top:48%;width:76%;}
  .sticky-bonus-intro-free-art{top:69%;width:82%;}
  .sticky-bonus-intro-press-art{bottom:-11%;width:76%;}
  .sticky-bonus-intro-number-value{font-size:clamp(58px,13vw,132px);}
}


/* ========================================================================== */
/* v36 — BONUS COMPLETE ART + BOTTOM WIN HUD                                  */
/* ========================================================================== */

.sticky-bottom-win-hud{
  position:absolute;
  left:50%;
  bottom:116px;
  transform:translateX(-50%);
  z-index:121;
  width:min(72%,900px);
  display:none;
  flex-direction:column;
  align-items:center;
  gap:3px;
  pointer-events:none;
  opacity:0;
}
.sticky-bottom-win-hud.is-visible{
  display:flex;
  opacity:1;
}
.sticky-bottom-win-total,
.sticky-bottom-win-detail{
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
  paint-order:stroke fill;
  text-align:center;
}
.sticky-bottom-win-total{
  color:#ffe260;
  font-size:clamp(24px,2.65vw,50px);
  letter-spacing:.015em;
  -webkit-text-stroke:2px rgba(95,20,116,.98);
  text-shadow:0 4px 5px rgba(58,10,78,.82),0 0 10px rgba(255,255,255,.65),0 0 24px rgba(255,72,205,.50);
  transform-origin:50% 80%;
  min-height:1em;
}
.sticky-bottom-win-total.is-counting{
  animation:stickyBottomWinCounting .34s ease-in-out infinite alternate;
}
.sticky-bottom-win-total.is-settled-pop{
  animation:stickyBottomWinSettle .28s cubic-bezier(.2,.88,.25,1) both;
}
@keyframes stickyBottomWinCounting{
  from{transform:scale(1);filter:brightness(1)}
  to{transform:scale(1.025);filter:brightness(1.18)}
}
@keyframes stickyBottomWinSettle{
  0%{transform:scale(1)}
  55%{transform:scale(1.07)}
  100%{transform:scale(1)}
}
.sticky-bottom-win-detail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  min-height:24px;
  color:#fff;
  font-size:clamp(12px,1.15vw,22px);
  letter-spacing:.01em;
  -webkit-text-stroke:1.3px rgba(76,20,98,.98);
  text-shadow:0 2px 3px rgba(52,11,73,.74),0 0 8px rgba(255,255,255,.40);
  opacity:0;
}
.sticky-bottom-win-detail.has-detail{
  opacity:1;
}
.sticky-bottom-win-detail img{
  width:clamp(20px,1.6vw,28px);
  height:clamp(20px,1.6vw,28px);
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.sticky-bottom-win-detail .sticky-bottom-count,
.sticky-bottom-win-detail .sticky-bottom-amount,
.sticky-bottom-win-detail .sticky-bottom-multi,
.sticky-bottom-win-detail .sticky-bottom-final{
  color:#fff7b0;
}
.sticky-bottom-win-detail .sticky-bottom-word,
.sticky-bottom-win-detail .sticky-bottom-eq{
  color:#ffffff;
}
.sticky-bottom-win-detail .sticky-bottom-final{
  color:#ffe86c;
}
.sticky-bottom-win-detail.is-pop{
  animation:stickyBottomHudPop .48s cubic-bezier(.2,.88,.25,1) both;
}
@keyframes stickyBottomHudPop{
  0%{opacity:0;transform:translateY(8px) scale(.84)}
  35%{opacity:1;transform:translateY(-2px) scale(1.08)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:900px){
  .sticky-bottom-win-hud{bottom:112px; width:min(86%,900px); gap:2px;}
  .sticky-bottom-win-detail{padding:0 6px; gap:4px;}
}


/* ========================================================================== */
/* v38.9 — ISOLATED REFERENCE-STYLE BONUS / SUPER BONUS END SCREEN            */
/* ========================================================================== */
.sticky-v389-end-overlay{
  position:absolute;
  inset:0;
  z-index:126;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  opacity:0;
  background:rgba(38,2,55,.58);
  -webkit-backdrop-filter:blur(2.4px) brightness(.56) saturate(1.18);
  backdrop-filter:blur(2.4px) brightness(.56) saturate(1.18);
  transition:opacity .22s ease;
  outline:none;
}
.sticky-v389-end-overlay.is-open{opacity:1}
.sticky-v389-end-overlay.is-leaving{opacity:0}
.sticky-v389-end-glow{
  position:absolute;
  left:50%;
  top:49%;
  width:80%;
  aspect-ratio:1.48 / 1;
  transform:translate(-50%,-50%) scale(.68);
  opacity:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(255,68,213,.38) 0 24%,rgba(241,26,192,.13) 45%,transparent 70%),
    conic-gradient(from 20deg,transparent 0 12%,rgba(255,61,218,.28) 13% 15%,transparent 16% 31%,rgba(255,49,207,.24) 32% 35%,transparent 36% 57%,rgba(255,75,224,.25) 58% 61%,transparent 62% 80%,rgba(255,42,200,.23) 81% 84%,transparent 85%);
  filter:blur(1px) drop-shadow(0 0 28px rgba(255,43,209,.38));
  animation:v389EndGlowIn .72s ease .06s forwards,v389EndGlowBreath 2.05s ease-in-out .86s infinite;
  pointer-events:none;
}
.sticky-v389-end-stage{
  position:relative;
  width:min(77%,1040px);
  aspect-ratio:4 / 3.04;
  pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(40,0,58,.44));
}
.sticky-v389-end-title,
.sticky-v389-end-won,
.sticky-v389-end-amount-wrap,
.sticky-v389-end-spins-wrap{
  position:absolute;
  left:50%;
  opacity:0;
}
.sticky-v389-end-title{
  top:1%;
  width:94%;
  transform:translateX(-50%) translateY(-28px) scale(.66);
  transform-origin:50% 68%;
  animation:v389EndTitleIn .62s cubic-bezier(.16,.86,.22,1.14) .03s forwards,v389EndTitleBreath 1.18s ease-in-out .82s infinite;
}
.sticky-v389-end-won{
  top:26%;
  width:76%;
  transform:translateX(-50%) translateY(14px) scale(.84);
  animation:v389EndLineIn .42s cubic-bezier(.18,.82,.24,1.08) .24s forwards;
}
.sticky-v389-end-amount-wrap{
  top:48%;
  width:70%;
  aspect-ratio:3.35 / 1;
  transform:translateX(-50%) translateY(18px) scale(.78);
  animation:v389EndHolderIn .48s cubic-bezier(.17,.88,.22,1.16) .4s forwards;
}
.sticky-v389-end-amount-holder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.sticky-v389-end-amount{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-weight:1000;
  font-size:clamp(46px,6.4vw,112px);
  line-height:1;
  white-space:nowrap;
  color:#fff1a8;
  paint-order:stroke fill;
  -webkit-text-stroke:3px rgba(156,45,7,.97);
  text-shadow:0 4px 0 rgba(170,69,0,.62),0 0 10px rgba(255,255,255,.46),0 10px 18px rgba(62,7,77,.36);
  transform-origin:50% 70%;
}
.sticky-v389-end-amount.is-counting{animation:v389EndCountPulse .24s ease-in-out infinite alternate}
.sticky-v389-end-amount.is-settled{animation:v389EndSettle .72s cubic-bezier(.18,.84,.22,1.12) both}
.sticky-v389-end-spins-wrap{
  top:72%;
  width:80%;
  aspect-ratio:3.2 / 1;
  transform:translateX(-50%) translateY(14px) scale(.84);
  animation:v389EndSpinsIn .42s cubic-bezier(.18,.82,.24,1.08) .58s forwards;

  /* v38.12 footer spacing controls — adjust these six values to fine-tune. */
  --sticky-end-in-left:7.0%;
  --sticky-end-in-width:18.5%;
  --sticky-end-count-left:31.0%;
  --sticky-end-count-top:42%;
  --sticky-end-free-left:41.0%;
  --sticky-end-free-width:58.0%;
}
.sticky-v389-end-spins-in-art,
.sticky-v389-end-spins-free-art{
  position:absolute;
  display:block;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}
.sticky-v389-end-spins-in-art{
  left:var(--sticky-end-in-left);
  top:50%;
  width:var(--sticky-end-in-width);
  transform:translateY(-50%);
}
.sticky-v389-end-spins-free-art{
  left:var(--sticky-end-free-left);
  top:50%;
  width:var(--sticky-end-free-width);
  transform:translateY(-50%);
}
.sticky-v389-end-spins-count{
  position:absolute;
  left:var(--sticky-end-count-left);
  top:var(--sticky-end-count-top);
  transform:translate(-50%,-50%) scaleX(.98);
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-weight:1000;
  font-size:clamp(48px,6.2vw,112px);
  line-height:.9;
  color:#fff8fc;
  paint-order:stroke fill;
  -webkit-text-stroke:3.2px rgba(94,5,70,.98);
  text-shadow:
    0 4px 0 rgba(104,8,78,.88),
    0 7px 0 rgba(58,4,64,.74),
    0 0 5px rgba(255,255,255,.96),
    0 0 15px rgba(255,55,204,.92),
    0 0 28px rgba(255,33,188,.56);
  transform-origin:50% 55%;
  animation:v3810SpinsCountBreath 1.12s ease-in-out .92s infinite;
}
.sticky-v389-end-spins-count[data-digits="3"]{
  font-size:clamp(42px,5.3vw,94px);
}
.sticky-v389-end-spins-super{
  width:80%;
}
@keyframes v3810SpinsCountBreath{
  0%,100%{transform:translate(-50%,-50%) scale(.98)}
  50%{transform:translate(-50%,-54%) scale(1.045)}
}
.sticky-v389-end-burst{
  position:absolute;
  inset:0;
  z-index:128;
  pointer-events:none;
}
.sticky-v389-end-candy{
  position:absolute;
  left:50%;
  top:55%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.18) rotate(0deg);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.sticky-v389-end-candy.c1{width:28%}
.sticky-v389-end-candy.c2{width:26%}
.sticky-v389-end-candy.c3{width:30%}
.sticky-v389-end-candy.c4{width:24%}
.sticky-v389-end-candy.c5{width:22%}
.sticky-v389-end-candy.c6{width:20%}
.sticky-v389-end-candy.c7{width:18%}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-stage{animation:v389EndDepart 1.05s ease forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-glow{animation:v389EndGlowDepart 1s ease forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy{opacity:1}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c1{animation:v389EndCandy1 1.46s cubic-bezier(.16,.7,.13,1) forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c2{animation:v389EndCandy2 1.54s cubic-bezier(.16,.7,.13,1) .04s forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c3{animation:v389EndCandy3 1.62s cubic-bezier(.16,.7,.13,1) .03s forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c4{animation:v389EndCandy4 1.48s cubic-bezier(.16,.7,.13,1) .07s forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c5{animation:v389EndCandy5 1.58s cubic-bezier(.16,.7,.13,1) .02s forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c6{animation:v389EndCandy6 1.52s cubic-bezier(.16,.7,.13,1) .06s forwards}
.sticky-v389-end-overlay.is-transitioning .sticky-v389-end-candy.c7{animation:v389EndCandy7 1.44s cubic-bezier(.16,.7,.13,1) .08s forwards}
@keyframes v389EndGlowIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.65) rotate(-8deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
}
@keyframes v389EndGlowBreath{
  0%,100%{filter:blur(1px) brightness(.95) drop-shadow(0 0 20px rgba(255,43,209,.30));transform:translate(-50%,-50%) scale(1)}
  50%{filter:blur(.5px) brightness(1.18) drop-shadow(0 0 32px rgba(255,72,219,.46));transform:translate(-50%,-50%) scale(1.035)}
}
@keyframes v389EndTitleIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-28px) scale(.66)}
  72%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.045)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes v389EndTitleBreath{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.025)}
}
@keyframes v389EndLineIn{
  0%{opacity:0;transform:translateX(-50%) translateY(16px) scale(.82)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes v389EndHolderIn{
  0%{opacity:0;transform:translateX(-50%) translateY(20px) scale(.76)}
  66%{opacity:1;transform:translateX(-50%) translateY(-3px) scale(1.035)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes v389EndSpinsIn{
  0%{opacity:0;transform:translateX(-50%) translateY(15px) scale(.82)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes v389EndCountPulse{
  from{transform:translate(-50%,-50%) scale(.985)}
  to{transform:translate(-50%,-50%) scale(1.025)}
}
@keyframes v389EndSettle{
  0%{transform:translate(-50%,-50%) scale(.94)}
  55%{transform:translate(-50%,-50%) scale(1.07)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
@keyframes v389EndDepart{
  0%{opacity:1;transform:scale(1)}
  30%{opacity:1;transform:scale(1.025)}
  100%{opacity:0;transform:scale(.88)}
}
@keyframes v389EndGlowDepart{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
}
@keyframes v389EndCandy1{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-8deg)}
  12%{opacity:1;transform:translate(-108%,-84%) scale(.7) rotate(-18deg)}
  84%{opacity:1;transform:translate(-240%,-174%) scale(2.1) rotate(-42deg)}
  100%{opacity:0;transform:translate(-265%,-190%) scale(2.45) rotate(-48deg)}
}
@keyframes v389EndCandy2{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(10deg)}
  12%{opacity:1;transform:translate(-22%,-110%) scale(.72) rotate(32deg)}
  84%{opacity:1;transform:translate(64%,-224%) scale(2.35) rotate(78deg)}
  100%{opacity:0;transform:translate(76%,-240%) scale(2.7) rotate(88deg)}
}
@keyframes v389EndCandy3{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-2deg)}
  12%{opacity:1;transform:translate(-34%,-94%) scale(.64) rotate(20deg)}
  84%{opacity:1;transform:translate(145%,-184%) scale(2.2) rotate(64deg)}
  100%{opacity:0;transform:translate(166%,-200%) scale(2.55) rotate(72deg)}
}
@keyframes v389EndCandy4{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-14deg)}
  12%{opacity:1;transform:translate(-136%,-60%) scale(.66) rotate(-40deg)}
  84%{opacity:1;transform:translate(-246%,12%) scale(1.95) rotate(-100deg)}
  100%{opacity:0;transform:translate(-266%,24%) scale(2.25) rotate(-112deg)}
}
@keyframes v389EndCandy5{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  12%{opacity:1;transform:translate(26%,-74%) scale(.62) rotate(16deg)}
  84%{opacity:1;transform:translate(226%,-64%) scale(1.9) rotate(58deg)}
  100%{opacity:0;transform:translate(248%,-58%) scale(2.2) rotate(68deg)}
}
@keyframes v389EndCandy6{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  12%{opacity:1;transform:translate(-74%,18%) scale(.58) rotate(26deg)}
  84%{opacity:1;transform:translate(-184%,126%) scale(1.75) rotate(82deg)}
  100%{opacity:0;transform:translate(-202%,144%) scale(2.05) rotate(94deg)}
}
@keyframes v389EndCandy7{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.17)}
  12%{opacity:1;transform:translate(6%,8%) scale(.56) rotate(-18deg)}
  84%{opacity:1;transform:translate(178%,116%) scale(1.7) rotate(-66deg)}
  100%{opacity:0;transform:translate(198%,134%) scale(2) rotate(-76deg)}
}
@media(max-width:900px){
  .sticky-v389-end-stage{width:min(94%,980px);aspect-ratio:4 / 3.22}
  .sticky-v389-end-title{width:98%;top:2%}
  .sticky-v389-end-won{width:82%;top:27%}
  .sticky-v389-end-amount-wrap{width:76%;top:49%}
  .sticky-v389-end-spins-wrap{
    width:88%;
    top:74%;
    --sticky-end-in-left:7.0%;
    --sticky-end-in-width:18%;
    --sticky-end-count-left:30.5%;
    --sticky-end-count-top:42%;
    --sticky-end-free-left:41%;
    --sticky-end-free-width:59%;
  }
  .sticky-v389-end-spins-super{width:88%}
  .sticky-v389-end-amount{font-size:clamp(42px,10vw,94px)}
  .sticky-v389-end-spins-count{font-size:clamp(42px,10vw,92px)}
}