/* ================= BEACON BREAKOUT (js/slots/beacon.js) ================= */
/* every control lives inside the machine: the site's shared bar and favorite button are not used on this page */
#v-beacon > .gbar,#v-beacon .ghead .gfav{display:none}
img.px,.bk-logo img{image-rendering:pixelated;image-rendering:crisp-edges}
.slotview .bk-game{border-radius:var(--r);overflow:hidden;border:1px solid #27405e;box-shadow:0 24px 50px -30px #000,inset 0 0 0 1px #ffffff0a}
.bk-stage{position:relative;height:clamp(520px, calc(var(--vh, 1vh) * 100 - var(--head) - 84px), 900px);overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:var(--side,200px) 1fr var(--side,200px);grid-template-rows:1fr auto;align-items:center;user-select:none;-webkit-user-select:none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 42%,#1f6a8c55,#0000 70%),
    radial-gradient(ellipse at center,#0000 38%,#02040acc 100%),
    repeating-linear-gradient(0deg,#0c131f 0 6px,#0a1019 6px 12px),
    repeating-linear-gradient(90deg,#0b1220 0 6px,#0a101c 6px 12px) #0b1220;background-blend-mode:normal,normal,overlay,overlay,normal}
/* full-coverage animated background canvas (drawn/reactive in code), behind all content */
.bk-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.bk-stage > .bk-side,.bk-stage > .bk-machine,.bk-stage > .bk-deck{position:relative;z-index:1}

/* side panels */
.bk-side{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 20px;min-width:0}
.bk-left{justify-content:flex-start;padding:16px 18px 10px;gap:10px}
.bk-left .bk-logo.big{flex:0 0 auto;margin-top:2px}

/* ---- animated Minecraft beacon: base block + pulsing vertical beam (left-panel centerpiece) ---- */
.bk-beacon{position:relative;flex:1 1 auto;align-self:stretch;width:100%;min-height:150px;overflow:hidden}
.bk-beacon-block{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:86px;height:86px;z-index:3;image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 13px rgba(120,225,255,.7));animation:bk-bob 3.2s ease-in-out infinite}
.bk-pedestal{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:106px;height:30px;z-index:2;border-radius:3px;
  background:linear-gradient(#3b4b64,#222f44);border:2px solid #0d1626;border-bottom-width:5px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.09),inset 0 -5px 0 rgba(0,0,0,.4),0 10px 20px -10px #000}
.bk-pedestal::before{content:"";position:absolute;inset:3px;border-radius:2px;opacity:.65;
  background:repeating-linear-gradient(90deg,#2e3d54 0 12px,#35455e 12px 24px)}
.bk-halo{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:150px;height:118px;z-index:1;filter:blur(3px);
  background:radial-gradient(ellipse at center,rgba(120,225,255,.5),rgba(120,225,255,.12) 45%,transparent 70%);animation:bk-halo 2.6s ease-in-out infinite}
.bk-beam-glow{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:84px;width:60px;z-index:1;filter:blur(8px);
  background:linear-gradient(to top,rgba(90,205,255,.5),rgba(80,195,255,.22) 45%,transparent 80%);animation:bk-beam 2.6s ease-in-out infinite}
.bk-beam{position:absolute;left:50%;transform:translateX(-50%);top:4px;bottom:90px;width:26px;z-index:2;border-radius:50% 50% 0 0/10px;
  background:linear-gradient(to top,rgba(210,250,255,.95),rgba(150,232,255,.8) 28%,rgba(120,215,255,.5) 68%,rgba(120,215,255,0));animation:bk-beam 2.6s ease-in-out infinite}
.bk-beam-core{position:absolute;left:50%;transform:translateX(-50%);top:8px;bottom:94px;width:10px;z-index:3;border-radius:50% 50% 0 0/8px;mix-blend-mode:screen;
  background:linear-gradient(to top,#fff,rgba(225,250,255,.95) 20%,rgba(190,240,255,.55) 62%,rgba(190,240,255,0));animation:bk-shimmer 1.7s ease-in-out infinite}
.bk-mote{position:absolute;left:50%;bottom:84px;width:4px;height:4px;border-radius:50%;background:#e6fbff;z-index:3;opacity:0;
  box-shadow:0 0 6px 2px rgba(150,235,255,.85);animation:bk-mote 3.4s linear infinite}
.bk-mote:nth-of-type(1){--dx:-14px;animation-delay:0s}
.bk-mote:nth-of-type(2){--dx:9px;animation-delay:.6s}
.bk-mote:nth-of-type(3){--dx:-6px;animation-delay:1.2s}
.bk-mote:nth-of-type(4){--dx:13px;animation-delay:1.8s}
.bk-mote:nth-of-type(5){--dx:-11px;animation-delay:2.4s}
.bk-mote:nth-of-type(6){--dx:4px;animation-delay:3s}
.bk-flash{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff,rgba(190,245,255,.6) 40%,transparent 68%)}
.bk-ripple{position:absolute;left:50%;bottom:72px;transform:translate(-50%,50%);width:40px;height:16px;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
  border:2px solid rgba(190,245,255,.9);box-shadow:0 0 10px rgba(150,235,255,.7)}
@keyframes bk-beam{0%,100%{opacity:.8;transform:translateX(-50%) scaleX(.92)}50%{opacity:1;transform:translateX(-50%) scaleX(1.08)}}
@keyframes bk-shimmer{0%,100%{opacity:.68}50%{opacity:1}}
@keyframes bk-halo{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
@keyframes bk-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@keyframes bk-mote{0%{transform:translate(calc(-50% + var(--dx,0)),0) scale(.6);opacity:0}12%{opacity:1}86%{opacity:.5}100%{transform:translate(calc(-50% + var(--dx,0)),-250px) scale(1.15);opacity:0}}
/* ---- beam SURGE: fired by JS on each real beacon drop in the bonus ---- */
.bk-beacon.bk-fire .bk-beam{animation:bk-fire-beam .78s ease-out}
.bk-beacon.bk-fire .bk-beam-glow{animation:bk-fire-glow .78s ease-out}
.bk-beacon.bk-fire .bk-beam-core{animation:bk-fire-core .78s ease-out}
.bk-beacon.bk-fire .bk-halo{animation:bk-fire-halo .78s ease-out}
.bk-beacon.bk-fire .bk-beacon-block{animation:bk-fire-block .78s ease-out}
.bk-beacon.bk-fire .bk-flash{animation:bk-fire-flash .6s ease-out}
.bk-beacon.bk-fire .bk-ripple{animation:bk-fire-ripple .72s ease-out}
@keyframes bk-fire-beam{0%{opacity:1;transform:translateX(-50%) scaleX(1);filter:brightness(1)}16%{opacity:1;transform:translateX(-50%) scaleX(1.95);filter:brightness(1.9)}100%{opacity:.85;transform:translateX(-50%) scaleX(1);filter:brightness(1)}}
@keyframes bk-fire-glow{0%{opacity:.5;transform:translateX(-50%) scaleX(1)}16%{opacity:1;transform:translateX(-50%) scaleX(1.8)}100%{opacity:.5;transform:translateX(-50%) scaleX(1)}}
@keyframes bk-fire-core{0%{opacity:.8;filter:brightness(1)}16%{opacity:1;filter:brightness(2.2) drop-shadow(0 0 8px #fff)}100%{opacity:.7;filter:brightness(1)}}
@keyframes bk-fire-halo{0%{opacity:.7;transform:translateX(-50%) scale(1)}18%{opacity:1;transform:translateX(-50%) scale(1.55)}100%{opacity:.7;transform:translateX(-50%) scale(1)}}
@keyframes bk-fire-block{0%{filter:brightness(1) drop-shadow(0 0 13px rgba(120,225,255,.7))}16%{filter:brightness(1.7) drop-shadow(0 0 22px rgba(190,245,255,.95))}100%{filter:brightness(1) drop-shadow(0 0 13px rgba(120,225,255,.7))}}
@keyframes bk-fire-flash{0%{opacity:0;transform:translateX(-50%) scale(.5)}14%{opacity:.95}100%{opacity:0;transform:translateX(-50%) scale(1.35)}}
@keyframes bk-fire-ripple{0%{opacity:0;transform:translate(-50%,50%) scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translate(-50%,50%) scale(2.7)}}
/* reduced motion: static glowing beacon + a brief brightness bump instead of the animated surge */
@media (prefers-reduced-motion:reduce){
  .bk-beam,.bk-beam-glow,.bk-beam-core,.bk-halo,.bk-beacon-block{animation:none}
  .bk-mote{display:none}
  .bk-beam,.bk-beam-core{opacity:.92}
  .bk-beacon.bk-fire .bk-beam,.bk-beacon.bk-fire .bk-beam-glow,.bk-beacon.bk-fire .bk-beam-core,.bk-beacon.bk-fire .bk-halo,.bk-beacon.bk-fire .bk-beacon-block,.bk-beacon.bk-fire .bk-flash,.bk-beacon.bk-fire .bk-ripple{animation:none}
  .bk-beacon.bk-bump .bk-beam,.bk-beacon.bk-bump .bk-beam-core,.bk-beacon.bk-bump .bk-beacon-block{filter:brightness(1.7)}
}
.bk-logo{display:flex;flex-direction:column;align-items:center;max-width:100%;font-family:Silkscreen,monospace;font-weight:700;line-height:1;text-align:center;
  filter:drop-shadow(0 4px 0 #061018) drop-shadow(0 10px 14px #000a)}
.bk-logo .l1{color:#86e0ff;font-size:clamp(23px,2.2vw,34px);-webkit-text-stroke:1px #06313f;text-shadow:0 3px 0 #1a7ba0;letter-spacing:.01em}
.bk-logo .l2{color:#eef7ff;font-size:clamp(17px,1.6vw,24px);-webkit-text-stroke:1px #1a2740;text-shadow:0 3px 0 #3a5f85;letter-spacing:.06em}
.bk-mlogo{display:none}
.bk-plate{width:100%;max-width:230px;border-radius:var(--r-sm);background:#091020e0;border:1px solid #2c4160;box-shadow:0 14px 30px -16px #000;padding:10px}
.bk-ph{font-family:Silkscreen,monospace;font-weight:700;font-size:13px;color:#86e0ff;text-align:center;margin-bottom:6px;letter-spacing:.04em}
.bk-feat{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #ffffff10}
.bk-feat:first-of-type{border-top:0}
.bk-fi{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:6px;background:#10192c;border:1px solid #28395c}
.bk-fi img{width:34px;height:34px}
.bk-feat b{display:block;font-family:Silkscreen,monospace;font-size:12px;color:#fff;letter-spacing:.03em}
.bk-feat small{display:block;color:#9fb4cc;font-size:11.5px;line-height:1.3}
.bk-round{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;text-align:center}
.bk-round small{display:block;color:#8fb0d6;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.bk-round b{font-size:18px;color:#fff}

/* machine */
.bk-machine{display:flex;flex-direction:column;align-items:center;justify-self:center;min-width:0}
.bk-topbar{display:flex;align-items:center;justify-content:center;gap:12px;min-height:30px;margin-bottom:4px}
.bk-mult{display:flex;align-items:baseline;gap:6px;padding:3px 12px;border-radius:var(--r-sm);background:#07293ae0;border:1px solid #2bd1ff88;box-shadow:0 0 16px -4px #2bd1ff66}
.bk-mult[hidden]{display:none}
.bk-right .bk-mult{width:100%;margin-bottom:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border-radius:10px;text-align:center;background:linear-gradient(160deg,#123b4c,#081d2e);border-color:#31c7f7}
.bk-right .bk-mult b{font-size:clamp(24px,2.8vw,44px);line-height:1.15;white-space:nowrap}
.bk-right .bk-mult small{font-size:11px}
.bk-right .bk-mult span{font-size:11px;color:#9fbccc}
.bk-right .bk-mult.pop{animation:bk-mult-pop .45s ease-out}
@keyframes bk-mult-pop{50%{box-shadow:0 0 28px #2bd1ff88;border-color:#dcfaff}}
.bk-mult small{font-family:Silkscreen,monospace;font-size:11px;color:#9fe6ff;letter-spacing:.06em}
.bk-mult b{font-family:Silkscreen,monospace;font-size:24px;color:#eafcff;text-shadow:0 2px 0 #0a6a90}
/* obtained-upgrade strip (right panel on desktop, topbar on mobile) */
.bk-upgbar{display:none}
.bk-upgrades{padding:8px 8px 10px}
.bk-upg-row,.bk-upgbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bk-upg{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:8px;background:#06293a;border:1px solid #2bd1ff66;box-shadow:inset 0 1px 0 #ffffff22,0 4px 10px -6px #2bd1ff}
.bk-upg img{width:30px;height:30px}
.bk-upg em{position:absolute;right:-4px;bottom:-5px;font-style:normal;font-family:Silkscreen,monospace;font-size:11px;font-weight:700;color:#042234;background:#2bd1ff;border-radius:7px;padding:0 4px;line-height:1.45;box-shadow:0 1px 0 #0a1526}
.bk-upg.mult{border-color:#ffd36b88}.bk-upg.mult em{background:#ffd36b}
.bk-upg.gwild{border-color:#c9a8ff99}.bk-upg.gwild em{background:#c9a8ff}
.bk-upg.spins{border-color:#aef0ff99}
.bk-upg.pop{animation:bkUpgPop .55s cubic-bezier(.2,.9,.3,1.5)}
@keyframes bkUpgPop{0%{transform:scale(1)}40%{transform:scale(1.42)}100%{transform:scale(1)}}
.bk-fspill{display:none}
.bk-board{line-height:0;filter:drop-shadow(0 18px 24px #000c)}
.bk-board canvas{display:block}
.bk-msg{margin-top:8px;min-height:30px;max-width:min(100%,760px);padding:5px 16px;border-radius:var(--r-sm);background:#050a14d9;border:1px solid #ffffff14;
  color:var(--muted);font-size:14px;font-weight:600;text-align:center;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-msg b{color:var(--text)}
.bk-msg.win{color:#ffe2a8;border-color:#d6a84a66}
.bk-msg.win b{color:#fff}
.bk-msg.ice{color:#c4ecff;border-color:#7fd0ff66}
.bk-msg.ice b{color:#fff}
.bk-msg.pink{color:#ffc2dd;border-color:#ff8fc466}
.bk-msg.pink b{color:#fff}
.bk-msg.dim,.bk-msg.part{color:var(--dim)}

/* deck */
.bk-deck{grid-column:1/-1;position:relative;z-index:4;display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:84px;
  background:#070b16;border-top:3px solid #27405e;box-shadow:inset 0 2px 0 #2bd1ff33,0 -10px 24px -10px #000c}
.bk-plaques{display:flex;gap:8px;min-width:0}
.bk-plaque,.bk-stake{display:flex;flex-direction:column;justify-content:center;height:58px;padding:4px 12px;border-radius:var(--r-sm);
  background:linear-gradient(#0a1020,#121a30);border:1px solid #2c4160;box-shadow:inset 0 2px 6px #000a}
.bk-plaque{min-width:132px}
.bk-plaque small,.bk-stake small{color:#8fb8e6;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bk-plaque b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-plaque.win b{color:#9fe6ff}
.bk-stake{margin-left:auto;padding:4px 10px}
.bk-step{display:flex;align-items:center;gap:6px}
.bk-step b{min-width:76px;text-align:center;font-size:17px}
.bk-step button{width:30px;height:28px;border:0;border-radius:6px;background:#1c3250;color:#e6f2ff;font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.bk-step button:hover:not(:disabled){background:#294874}
.bk-step button:disabled{opacity:.35;cursor:not-allowed}
.bk-spin{position:relative;width:96px;height:96px;margin:-14px 4px -6px;border-radius:50%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#86e0ff,#1ba0e0 55%,#0f6ba8);color:#042234;
  box-shadow:0 0 0 5px #0a1526,0 0 0 7px #2bd1ff,0 10px 26px -6px #000,inset 0 3px 0 #ffffff66,inset 0 -6px 12px #0003;transition:transform .12s,filter .15s}
.bk-spin span{font-size:21px;font-weight:900;letter-spacing:.06em;line-height:1}
.bk-spin small{font-size:11px;font-weight:700;opacity:.9;min-height:13px;margin-top:2px}
.bk-spin:hover:not(:disabled){filter:brightness(1.1)}
.bk-spin:active:not(:disabled){transform:scale(.96)}
.bk-spin.stop{background:radial-gradient(circle at 50% 35%,#ff9db0,#e0405e 55%,#a8203c);color:#fff}
.bk-spin.skip{background:radial-gradient(circle at 50% 35%,#b5a4ff,#6d4ff0 55%,#4a2fc4);color:#fff}
.bk-spin.fs{background:radial-gradient(circle at 50% 35%,#86e0ff,#1ba0e0 55%,#0f6ba8)}
.bk-spin:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed}
.bk-tools{display:flex;gap:6px}
.bk-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:58px;height:58px;border-radius:var(--r-sm);border:1px solid #2c4160;
  background:#0d1526;color:#c3d6ee;cursor:pointer;font-size:11px;font-weight:700}
.bk-tool .ic{width:18px;height:18px}
.bk-tool:hover{background:#15223c;color:#fff}
.bk-tool.on{color:#86e0ff;border-color:#86e0ff77}
#bk-fav.on{color:#ff6b97}
#bk-fav.on svg{fill:currentColor}
.bk-ff{display:block;width:18px;height:18px;background:currentColor;clip-path:polygon(0 10%,48% 50%,0 90%,0 10%,50% 10%,100% 50%,50% 90%,50% 10%)}
.bk-buybtn{height:58px;padding:0 14px;border-radius:var(--r-sm);border:1px solid #2bd1ff88;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(#0e4a66,#073043);color:#aef0ff;font-weight:900;font-size:13px;letter-spacing:.06em;line-height:1.25;box-shadow:inset 0 1px 0 #ffffff33,0 6px 16px -8px #2bd1ff}
.bk-buybtn small{font-size:13px;color:#fff;font-weight:700;letter-spacing:0}
.bk-buybtn:hover:not(:disabled){filter:brightness(1.12)}
.bk-buybtn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.bk-buybtn.below small{color:#ffd36b}
.bk-card.buy{width:min(440px,100%)}
.bk-card.buy h2{margin:0 0 8px;font-size:20px}
.bk-card.buy tr.after td{font-weight:800;color:var(--text)}
.bk-row{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.bk-stage.narrow .bk-buybtn{height:52px;padding:0 10px}

/* overlays + loader */
.bk-ovl{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#02050cb0;padding:16px;opacity:0;transition:opacity .2s}
.bk-ovl.on{opacity:1}
.bk-ovl[hidden]{display:none}
.bk-card{width:min(720px,100%);max-height:100%;overflow:auto;background:#0b1224;border:1px solid #2c4160;border-radius:var(--r);padding:16px 18px;box-shadow:0 30px 60px #000a}
.bk-card-h{display:flex;align-items:center;justify-content:space-between}
.bk-card-h h2{margin:0;font-size:20px}
.bk-fine{color:var(--muted);font-size:13px}
.bk-ptab{width:100%;border-collapse:collapse;margin:6px 0 10px}
.bk-ptab th{text-align:left;color:#8fb8e6;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:4px 6px}
.bk-ptab td{padding:4px 6px;border-top:1px solid #ffffff10}
.bk-ptab td small{display:block;color:var(--dim);font-size:11px}
.bk-psym{display:flex;align-items:center;gap:8px}
.bk-psym img{width:32px;height:32px}
.bk-rules{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.5}
.bk-rules li{margin:4px 0}
.bk-rules b{color:var(--text)}
.bk-load{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#0a1120;transition:opacity .3s}
.bk-load.off{opacity:0;pointer-events:none}
.bk-load div{display:flex;flex-direction:column;align-items:center;gap:10px}
.bk-load img{width:64px;height:64px;image-rendering:pixelated}
.bk-load b{color:#dceaff}
.bk-lbar{width:180px;height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}
.bk-lbar i{display:block;height:100%;width:0;background:#2bd1ff}

/* free-spin / end title cards + pixel transition */
.bk-pix{position:absolute;inset:0;z-index:18;pointer-events:none;display:grid;grid-template-columns:repeat(var(--cols,16),1fr);grid-template-rows:repeat(var(--rows,10),1fr)}
.bk-pix i{background:var(--c);opacity:0;transition:opacity 70ms linear;transition-delay:calc(var(--k) * var(--half,520ms))}
.bk-pix.in i,.bk-pix.full i{opacity:1}
.bk-pix.out i{opacity:0}
.bk-title-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 34px;border-radius:6px;background:#07131f;border:3px solid #2bd1ff;
  box-shadow:0 0 0 3px #060a12,0 24px 50px #000c,0 0 40px -6px #2bd1ff66;text-align:center;animation:bkCard .45s cubic-bezier(.2,.9,.3,1.25)}
@keyframes bkCard{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.bk-pxt{margin:0;font-family:Silkscreen,monospace;font-weight:700;font-size:clamp(26px,4vw,44px);color:#86e0ff;text-shadow:0 4px 0 #0a5a7a;letter-spacing:.03em}
.bk-pxn{margin:0;font-family:Silkscreen,monospace;font-weight:700;font-size:clamp(44px,7vw,80px);line-height:1;color:#fff;text-shadow:0 5px 0 #1a7ba0}
.bk-introsub{margin:0;color:#cfe6f5;font-size:13px;max-width:320px}
.bk-cta{margin-top:6px;min-width:150px;height:46px;border:0;border-radius:6px;cursor:pointer;font-family:Silkscreen,monospace;font-weight:700;font-size:18px;color:#042234;
  background:#2bd1ff;box-shadow:inset 0 -4px 0 #0f6ba8,0 0 0 3px #060a12}
.bk-cta:hover{filter:brightness(1.08)}
.bk-auto{color:#9ab0c4;font-size:12px}
.bk-title-card.end .bk-pxn{font-size:clamp(34px,5vw,58px);color:#cfe3f2;text-shadow:0 4px 0 #1a2740}
.bk-title-card.end.won{border-color:#86e0ff}
.bk-title-card.end.won .bk-pxn{color:#aef0ff;text-shadow:0 4px 0 #0a5a7a}
.pop{animation:bkPop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes bkPop{0%{transform:scale(1)}35%{transform:scale(1.45);color:#86e0ff}100%{transform:scale(1)}}

/* right-side panels: BASE = centered Buy Bonus GUI ; BONUS = free-spins progress (swapped by setBonus) */
.bk-right{justify-content:center}                                        /* center a CONTENT-SIZED panel, don't stretch it */
.bk-buyplate,.bk-progress{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 14px 18px;
  border-color:#2bd1ff88;background:linear-gradient(#0a2636e8,#07131fe8);box-shadow:inset 0 1px 0 #ffffff14,0 14px 30px -16px #000}
.bk-buyplate[hidden],.bk-progress[hidden]{display:none}
.bk-buyplate-mid{display:flex;flex-direction:column;align-items:center;gap:13px;width:100%}
.bk-buyplate-icon{width:60px;height:60px;margin:0 auto;display:grid;place-items:center;border-radius:12px;background:#06293a;border:1px solid #2bd1ff66;box-shadow:inset 0 1px 0 #ffffff22,0 6px 16px -8px #2bd1ff;animation:bk-bob-y 3.2s ease-in-out infinite}
@keyframes bk-bob-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.bk-buyplate-icon img{width:44px;height:44px;image-rendering:pixelated}
.bk-buyplate-sub{margin:0;text-align:center;color:#9fb9d6;font-size:12px;line-height:1.45;max-width:200px}
.bk-buybtn.big{width:100%;height:68px;flex-direction:column}
.bk-buybtn.big span{font-size:15px}
.bk-buybtn.big small{font-size:15px;margin-top:2px}
.bk-fspill small{display:block;font-family:Silkscreen,monospace;font-size:12px;color:#9fe6ff;letter-spacing:.04em}
.bk-ph.sub{font-size:11px;color:#9fe6ff;margin:10px 0 4px;opacity:.9}
.bk-prog-fs{text-align:center}
.bk-prog-fs b{display:block;font-family:Silkscreen,monospace;font-size:50px;line-height:1.05;color:#fff;text-shadow:0 4px 0 #0f6ba8}
.bk-prog-fs small{display:block;font-family:Silkscreen,monospace;font-size:11px;color:#9fe6ff;letter-spacing:.05em;text-transform:uppercase}
.bk-progress{padding:24px 14px 28px;gap:18px}
.bk-upg-wrap{width:100%}.bk-upg-wrap[hidden]{display:none}
/* themed + simplified buy-confirm dialog (Beacon's dungeon/cyan palette) */
.bk-buycard{width:min(380px,100%);text-align:center;border-color:#2bd1ff88;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,#0e4a6655,#0000 70%),linear-gradient(#0b2334,#081321);box-shadow:0 30px 60px #000a,inset 0 1px 0 #ffffff1a}
.bk-buycard h2{margin:2px 0 10px;font-size:22px;font-family:Silkscreen,monospace;color:#eafcff;letter-spacing:.03em}
.bk-buy-what{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;color:#bcd4ea;font-size:13px}
.bk-buy-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#06293a;border:1px solid #2bd1ff55}
.bk-buy-icon img{width:24px;height:24px;image-rendering:pixelated}
.bk-buy-cost{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto 16px;padding:14px;border-radius:var(--r-sm);background:#06202ecc;border:1px solid #2bd1ff55}
.bk-buy-cost small{font-family:Silkscreen,monospace;font-size:12px;color:#9fe6ff;letter-spacing:.08em}
.bk-buy-cost b{font-family:Silkscreen,monospace;font-size:30px;color:#fff;text-shadow:0 2px 0 #0a6a90}
.bk-buycard .bk-row{justify-content:center}
.bk-stage.bonus{background:
    radial-gradient(ellipse 55% 60% at 50% 42%,#2bd1ff44,#0000 70%),
    radial-gradient(ellipse at center,#0000 38%,#01060ad9 100%),
    repeating-linear-gradient(0deg,#07131f 0 6px,#061019 6px 12px),
    repeating-linear-gradient(90deg,#06121e 0 6px,#05101a 6px 12px) #06121e}
.bk-stage.bonus .bk-deck{border-top-color:#2bd1ff}

/* info below the machine */
.bk-info{margin-top:22px;display:flex;flex-direction:column;gap:22px}
.bk-info section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.bk-info h3{margin:0 0 10px;font-size:18px}
.bk-info h3 small{color:var(--dim);font-weight:600;font-size:13px}
.bki-hero{display:flex;gap:18px;align-items:flex-start}
.bki-hero > img{width:200px;border-radius:var(--r-sm);flex:0 0 auto}
.bki-hero h2{margin:0 0 8px}
.bki-hero p{color:var(--muted);margin:0 0 12px}
.bki-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bki-facts li{background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px}
.bki-facts small{display:block;color:var(--dim);font-size:11px}
.bki-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.bki-feats > div{background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px}
.bki-feats img{width:48px;height:48px}
.bki-feats h4{margin:6px 0}
.bki-feats p{margin:0;color:var(--muted);font-size:13.5px}
.bki-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.bki-note{color:var(--dim);font-size:12.5px}
.bk-kv{width:100%;border-collapse:collapse;font-size:13.5px}
.bk-kv td{padding:5px 4px;border-top:1px solid #ffffff10;vertical-align:top}
.bk-kv td:last-child{text-align:right}
.bk-kv small{color:var(--dim)}

/* narrow / portrait */
.bk-stage.narrow{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;align-content:start;padding-top:8px}
.bk-stage.narrow .bk-left{display:none}                                   /* hide the big beacon decoration on phones */
.bk-stage.narrow .bk-right{width:100%;height:auto;padding:0 8px;gap:0}    /* keep the Buy Bonus button reachable */
.bk-stage.narrow .bk-buyplate{flex:0 0 auto;flex-direction:row;padding:8px 10px;min-height:0}
.bk-stage.narrow .bk-buyplate .bk-ph,.bk-stage.narrow .bk-buyplate-icon,.bk-stage.narrow .bk-buyplate-sub{display:none}
.bk-stage.narrow .bk-buyplate-mid{flex-direction:row;gap:0}
.bk-stage.narrow .bk-buybtn.big{height:52px}
.bk-stage.narrow .bk-progress{display:none}                              /* on mobile the bonus progress lives in the topbar */
.bk-stage.narrow.bonus .bk-right{display:flex}
.bk-stage.narrow .bk-right{order:-1;flex-direction:row;justify-content:flex-end;gap:8px;padding:8px}
.bk-stage.narrow .bk-right .bk-mult{width:auto;min-width:150px;gap:3px;margin:0;padding:8px 12px}
.bk-stage.narrow .bk-right .bk-mult b{font-size:25px}
.bk-stage.narrow .bk-mlogo{display:none}
.bk-stage.narrow .bk-topbar{min-height:0}
.bk-stage.narrow .bk-deck{padding:8px 8px}
.bk-stage.narrow .bk-plaque,.bk-stage.narrow .bk-stake{height:50px}
.bk-stage.narrow .bk-buybtn{height:48px}
.bk-stage.narrow .bk-msg{white-space:normal;font-size:13px;margin:8px 8px 0}
.bk-stage.narrow .bk-deck{flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 8px}
.bk-stage.narrow .bk-plaques{width:100%}
.bk-stage.narrow .bk-plaque{flex:1;min-width:0}
.bk-stage.narrow .bk-stake{margin-left:0}
.bk-stage.narrow .bk-spin{width:78px;height:78px;margin:0}
.bk-stage.narrow .bk-tool{width:46px;height:52px;font-size:10px}
.bk-stage.narrow.bonus .bk-mlogo{display:none}
.bk-stage.narrow.bonus .bk-fspill{display:flex;align-items:baseline;gap:8px;margin:2px 0 6px}
.bk-stage.narrow.bonus .bk-upgbar{display:flex;margin:2px 0}
.bk-stage.narrow .bk-upg{width:40px;height:40px}.bk-stage.narrow .bk-upg img{width:26px;height:26px}
.bk-fspill b{font-family:Silkscreen,monospace;font-size:24px;color:#fff}
@media (max-width:760px){
  .bki-hero{flex-direction:column}
  .bki-hero > img{width:100%;max-width:320px}
  .bki-cols{grid-template-columns:1fr}
  .bk-info section{padding:14px}
  .bk-ptab td,.bk-ptab th{padding:3px 3px;font-size:12px}
}

/* Compact wild value, directly beside the top locked tile. */
.bk-machine > .bk-mult{position:absolute;left:calc(100% + 12px);top:34px;width:132px;min-height:96px;padding:13px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:linear-gradient(150deg,#103346,#071c2b);text-align:center}
.bk-machine > .bk-mult small{font-size:9px;line-height:1.5}.bk-machine > .bk-mult b{font-size:30px;line-height:1}
.bk-mult.pop{animation:bk-mult-pop .45s ease-out}
.bk-stage.narrow .bk-right .bk-mult{min-width:116px;min-height:52px;padding:8px}.bk-stage.narrow .bk-right .bk-mult small{font-size:8px}

/* Panels belong to the same dark stone and steel machine as the reels. */
.bk-machine>.bk-mult,.bk-right .bk-mult,.bk-buyplate{background:repeating-linear-gradient(0deg,#ffffff03 0 2px,transparent 2px 8px),linear-gradient(135deg,#252d3a,#111b28 65%);border:3px solid #46566b;border-radius:3px;box-shadow:inset 0 0 0 2px #0b111d,inset 0 6px 0 #67728655,0 5px 0 #050c15,0 9px 16px #0006}
.bk-machine>.bk-mult{border-top:4px solid #c862ab}.bk-machine>.bk-mult small,.bk-right .bk-mult small{color:#8fcadf}.bk-machine>.bk-mult b{color:#e0f4ff;text-shadow:0 3px #245775}
.bk-buyplate{padding:16px 12px}.bk-buyplate .bk-ph{color:#d6e3ee}.bk-buyplate-sub{color:#8fa4bd}.bk-buyplate .bk-buybtn{border:2px solid #628097;border-radius:3px;background:linear-gradient(#3a6579,#1e3d55);box-shadow:inset 0 2px #91bac766,inset 0 -4px #10273b;color:#e2f8ff}.bk-buyplate .bk-buyplate-icon{filter:drop-shadow(0 3px #07101b)}

/* Only ambient scenery and the separate side beacon warm up; reel-canvas beams stay cyan. */
#bk-beacon .bk-beam{background:linear-gradient(to top,rgba(var(--beacon-rgb,110,215,255),.98),rgba(var(--beacon-rgb,110,215,255),.85) 28%,rgba(var(--beacon-rgb,110,215,255),.55) 68%,rgba(var(--beacon-rgb,110,215,255),0))}
#bk-beacon .bk-beam-glow{background:linear-gradient(to top,rgba(var(--beacon-rgb,110,215,255),.65),rgba(var(--beacon-rgb,110,215,255),.3) 45%,transparent 80%)}
#bk-beacon .bk-beam-core{background:linear-gradient(to top,#fff,rgba(var(--beacon-rgb,110,215,255),.95) 20%,rgba(var(--beacon-rgb,110,215,255),.55) 62%,rgba(var(--beacon-rgb,110,215,255),0))}
#bk-beacon .bk-halo{background:radial-gradient(ellipse at center,rgba(var(--beacon-rgb,110,215,255),.55),rgba(var(--beacon-rgb,110,215,255),.15) 45%,transparent 70%)}
#bk-beacon .bk-mote{background:rgb(var(--beacon-rgb,110,215,255));box-shadow:0 0 6px 2px rgba(var(--beacon-rgb,110,215,255),.85)}
#bk-beacon .bk-ripple{border-color:rgba(var(--beacon-rgb,110,215,255),.9);box-shadow:0 0 10px rgba(var(--beacon-rgb,110,215,255),.7)}
#bk-beacon .bk-flash{background:radial-gradient(circle,#fff,rgba(var(--beacon-rgb,110,215,255),.6) 40%,transparent 68%)}
.bk-stage:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:#f04446;opacity:var(--beacon-warmth,0);transition:opacity 1.3s ease;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.bk-stage:after{transition:none}}