/* BAKENEKO: THE MASK. Two fixed stages (landscape 1280x720, portrait 720 wide) scaled to fit;
   every DOM control is positioned in stage pixels by game.js, so the layout is the same on
   every device. Black lacquer, polished gold, one crimson accent. */

:root{
  --mag:#c8322c; --cyan:#ffd98a; --gold:#f2c45a; --vio:#8a1e1a;
  --ink:#0b0705; --panel:#140c08; --line:rgba(242,196,90,.55);
}
/* touch-action is not inherited, so it is set on every element: manipulation keeps
   scrolling but disables double-tap zoom. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Disables iOS text autosizing, which rescales fonts when a block's width changes
   (opening a panel does) and looks like a zoom. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0;height:100%;background:var(--ink);overflow:hidden;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  color:#f3ece2;user-select:none;touch-action:manipulation}
.hidden{display:none!important}

#stage{position:absolute;left:50%;top:50%;transform-origin:50% 50%;
  transform:translate(-50%,-50%);overflow:hidden;background:#0b0705}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- HUD pills ---------------------------------------------------------- */
#hud{position:absolute;display:flex;gap:10px;align-items:stretch}
.pill{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:6px 14px;border-radius:12px;background:rgba(10,6,22,.72);
  border:1px solid rgba(34,232,255,.28);backdrop-filter:blur(4px);
  box-shadow:0 0 14px rgba(34,232,255,.10) inset}
.pill b{font-size:11px;letter-spacing:.16em;opacity:.62;font-weight:600}
.pill span{font-size:21px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
#winBox{border-color:rgba(255,198,61,.42)}
#winBox span{color:var(--gold)}
#winBox.flash{animation:winflash .5s ease}
/* scale, not transform: layout.js centres the box with transform:translateX(-50%), which a
   transform keyframe would replace for the animation's length (the box jumped aside) */
@keyframes winflash{0%{scale:1}40%{scale:1.12}100%{scale:1}}

/* ---- controls ----------------------------------------------------------- */
#ctrl{position:absolute;display:flex;align-items:center;justify-content:center;gap:8px}
/* Equal flex:1 side groups keep SPIN centred; each group centres its own buttons so the
   outer ones stay clear of the screen edges. */
#ctrl .side{flex:1;display:flex;align-items:center;justify-content:center;gap:12px}
.rbtn{width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:radial-gradient(circle at 50% 38%,#2a1b45,#100a1e 70%);
  border:1px solid rgba(34,232,255,.42);
  box-shadow:0 0 12px rgba(34,232,255,.18),0 0 18px rgba(34,232,255,.10) inset;
  display:flex;align-items:center;justify-content:center;color:#cfe9ff}
/* SVG glyphs, not text: text glyphs carry their own vertical metrics and sit off-centre in the circle. */
.rbtn .glyph{width:52%;height:52%;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rbtn .glyph .fill{fill:currentColor;stroke:none}
.rbtn:active{transform:scale(.93)}
/* Disabled: solid plate, no glow, muted glyph, so the button stays visible over the city art. */
.rbtn.disabled{pointer-events:none;filter:grayscale(.85);
  background:radial-gradient(circle at 50% 38%,#241d33,#0d0a16 70%);
  border-color:rgba(150,165,190,.30);box-shadow:none;color:#6f7a92}
#autoBtn.on{border-color:var(--mag);color:#fff;
  box-shadow:0 0 16px rgba(255,46,136,.8),0 0 22px rgba(255,46,136,.25) inset}

#spinBtn{width:108px;height:108px;border:0;border-radius:50%;cursor:pointer;
  background:center/contain no-repeat url("assets/img/btn_spin.webp?v=86");
  position:relative;
  filter:drop-shadow(0 0 12px rgba(255,46,136,.5))}
#spinBtn::after{content:'';position:absolute;inset:0;border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 26px 4px rgba(255,46,136,.95);
  animation:haloFade 2.4s ease-in-out infinite;will-change:opacity}
@keyframes haloFade{0%,100%{opacity:0}50%{opacity:1}}
#spinBtn:active{transform:scale(.94)}
#spinBtn.busy::after{animation:none;opacity:0}
#spinBtn.busy{filter:drop-shadow(0 0 8px rgba(120,120,140,.5)) grayscale(.6)}

#menuBtn{position:absolute}
#buyBtn{position:absolute;border:0;border-radius:14px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:900;letter-spacing:.08em;font-size:18px;color:#fff;
  background:linear-gradient(160deg,#ff2e88,#7a1350);
  border:1px solid rgba(255,198,61,.55);box-shadow:0 0 18px rgba(255,46,136,.45)}
#buyBtn span{font-size:.72em;opacity:.85;letter-spacing:.18em}
#buyBtn:active{transform:scale(.95)}
#buyBtn.disabled{opacity:.4;filter:grayscale(.7);pointer-events:none}

/* ---- free-spins bar ----------------------------------------------------- */
#fsbar{position:absolute;display:flex;gap:26px;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;
  border-radius:14px;padding:0 22px;font-weight:800;letter-spacing:.08em;
  /* Opaque plate under the neon tint so the bar reads as solid over the city art */
  background:linear-gradient(90deg,rgba(255,46,136,.30),rgba(34,232,255,.30)),
             linear-gradient(180deg,#170b30,#0a0518);
  border:1px solid rgba(255,198,61,.72);
  box-shadow:0 0 26px rgba(255,46,136,.38),inset 0 1px 0 rgba(255,255,255,.10),
             0 8px 22px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);text-shadow:0 2px 6px rgba(0,0,0,.85)}
#fsMode{color:var(--gold)}#fsWon{color:#fff}

/* ---- modal panels ------------------------------------------------------- */
#panelWrap,#popWrap,#bigwin{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:rgba(4,2,10,.72);z-index:40;backdrop-filter:blur(3px)}
#panel{width:460px;max-width:88%;background:linear-gradient(165deg,#1b1035,#0b0616);
  border:1px solid rgba(255,198,61,.5);border-radius:18px;padding:0;
  overflow:hidden;box-shadow:0 0 44px rgba(255,46,136,.35)}
#panelBody{padding:0 22px 22px}
#pop{width:560px;max-width:92%;max-height:84%;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#1b1035,#0b0616);border:1px solid rgba(34,232,255,.45);
  border-radius:18px;padding:0;overflow:hidden;
  box-shadow:0 0 44px rgba(34,232,255,.28)}
/* overflow-x hidden: anything slightly too wide is clipped instead of scrolling the rules sideways */
#popBody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:0 18px 18px;overscroll-behavior:contain}
/* Bottom fade and chevron on the card (not the scrolling body) signal more content below;
   .atEnd hides them once scrolled to the end. */
#pop{position:relative}
#pop::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:64px;
  pointer-events:none;border-radius:0 0 17px 17px;opacity:1;transition:opacity .25s;
  background:linear-gradient(180deg,rgba(11,6,22,0),rgba(11,6,22,.92))}
#pop.atEnd::after{opacity:0}
#popMore{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  pointer-events:none;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(234,228,255,.72);
  text-shadow:0 2px 6px rgba(0,0,0,.9);transition:opacity .25s}
#popMore svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;animation:moreBob 1.6s ease-in-out infinite}
@keyframes moreBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
#pop.atEnd #popMore{opacity:0}
/* Close button matches the other round controls: dark disc, thin cyan edge, SVG glyph. */
/* z-index keeps the button above #popBody, a later sibling that would otherwise paint over
   it and take its taps. */
.xbtn{--disc:30px;position:absolute;top:50%;right:10px;transform:translateY(-50%);
  z-index:2;width:calc(var(--disc) + 22px);height:calc(var(--disc) + 22px);
  padding:0;border:0;background:none;box-shadow:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#cfe9ff}
/* The button is the tap target (about 48px); ::before draws the smaller visible disc inside it. */
.xbtn::before{content:"";position:absolute;width:var(--disc);height:var(--disc);
  border-radius:50%;background:radial-gradient(circle at 50% 38%,#2a1b45,#100a1e 70%);
  border:1px solid rgba(34,232,255,.30);
  box-shadow:0 0 8px rgba(34,232,255,.12),0 0 12px rgba(34,232,255,.07) inset;
  transition:border-color .12s,box-shadow .12s}
.xbtn .glyph{position:relative;width:calc(var(--disc) * .42);height:calc(var(--disc) * .42);
  display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round}
.xbtn:hover{color:#fff}
.xbtn:hover::before{border-color:rgba(255,46,136,.7);box-shadow:0 0 12px rgba(255,46,136,.32)}
.xbtn:active{transform:translateY(-50%) scale(.92)}
#pop,#panel{position:relative}

/* Header bar: full-width band with its own tint and bottom rule, title left-aligned,
   close X on the right. */
.pHead{padding:0 64px 0 22px;min-height:56px;display:flex;align-items:center;
  margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012))}
#panelHead,#popHead{position:relative;flex:0 0 auto}
/* The slot always holds the close button, so :empty never matches; hide it when there is no header */
#panelHead:not(:has(.pHead)),#popHead:not(:has(.pHead)){display:none}
.pHead .panelTitle{margin:0;text-align:left;justify-content:flex-start;min-height:0;
  padding:0;display:block}
.pHead .panelSub{text-align:left;margin:2px 0 0}
.pHead .htxt{min-width:0}
/* Outside the scroll container, so no sticky positioning or opaque fill is needed */
#pop .pHead{padding:0 60px 0 18px}

h3.sec{margin:16px 0 8px;font-size:13px;letter-spacing:.18em;color:var(--cyan);opacity:.9}
table.pt{width:100%;border-collapse:collapse;font-size:14px}
table.pt td,table.pt th{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.07);
  text-align:right}
table.pt td:first-child,table.pt th:first-child{text-align:left}
table.pt th{font-size:11px;letter-spacing:.12em;opacity:.55;font-weight:600}
table.pt img{height:26px;vertical-align:middle;margin-right:8px}
.rules{font-size:14px;line-height:1.55;opacity:.9}
.rules em{color:var(--gold);font-style:normal;font-weight:700}

/* Buy chooser: fixed heights so the panel does not jump between selections */
.buyHead{margin-bottom:6px}
.buyOpts{display:flex;flex-direction:column;gap:8px;margin:12px 0 10px}
.buyOpt{position:relative;display:flex;align-items:center;gap:12px;min-height:66px;
  padding:9px 14px;border-radius:14px;cursor:pointer;overflow:hidden;
  background:linear-gradient(100deg,#1c1032 0%,#140c24 55%,#1a0e2e 100%);
  border:1px solid rgba(255,255,255,.10);transition:border-color .12s,box-shadow .12s}
.buyOpt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--cyan),var(--mag));opacity:.55}
.buyOpt img{width:48px;height:48px;object-fit:contain;flex:0 0 48px;
  filter:drop-shadow(0 0 8px rgba(34,232,255,.45))}
.buyOpt .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.buyOpt b{font-size:16px;letter-spacing:.05em;white-space:nowrap}
.buyOpt i{font-style:normal;font-size:12px;opacity:.6;letter-spacing:.03em;line-height:1.3}
.buyOpt .price{flex:0 0 auto;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:20px;font-weight:900;color:var(--gold);
  text-shadow:0 0 14px rgba(255,198,61,.45)}
.buyOpt .price u{font-size:10px;font-weight:700;text-decoration:none;
  color:#ff7597;letter-spacing:.06em;opacity:.95}
.buyOpt.selected{border-color:var(--mag);
  background:linear-gradient(100deg,#37164f 0%,#22103a 55%,#3a1550 100%);
  box-shadow:0 0 22px rgba(255,46,136,.45),0 0 0 1px rgba(255,46,136,.5) inset}
.buyOpt.selected::before{opacity:1;width:5px}
/* An unaffordable option stays visible, dimmed */
.buyOpt.poor{opacity:.42;filter:grayscale(.55)}
.buyOpt.poor .price{color:#9c93b8;text-shadow:none}
.buyApply{width:100%;height:66px;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;border:0;border-radius:15px;font-size:19px;font-weight:900;color:#fff;
  letter-spacing:.06em;cursor:pointer;
  background:linear-gradient(160deg,#ff2e88,#7a1350);
  box-shadow:0 0 24px rgba(255,46,136,.5)}
.buyApply[disabled]{opacity:.3;filter:grayscale(1);cursor:default;box-shadow:none}
/* autoplay spin counts reuse the buy option look; the counts and the note are set large */
.autoNs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.buyOpt.autoN{justify-content:center;font:inherit;color:#fff}
#panel .buyOpt.autoN b{font-size:30px;font-weight:900}
.autoNote{font-size:18px;color:#f1e2bf;text-align:center;line-height:1.4;margin:0 0 12px}
#stage.portrait #panel .buyOpt.autoN{min-height:96px}
#stage.portrait #panel .buyOpt.autoN b{font-size:40px}
#stage.portrait .autoNote{font-size:25px}
/* the autoplay count: a red badge on AUTO, the word stays under the button */
#autoBtn[data-left]:not([data-left=""])::after{content:attr(data-left);position:absolute;top:-14px;right:-18px;
  min-width:40px;height:40px;padding:0 8px;box-sizing:border-box;border-radius:20px;background:#b8262c;
  border:2px solid #f2c45a;color:#fff;font:900 22px/36px "Cinzel",Georgia,serif;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.7)}
.buyCancel{display:none}
.buyCancel_unused{width:100%;height:48px;margin-top:9px;border:0;border-radius:12px;
  background:transparent;color:#9c93b8;font-size:14px;letter-spacing:.12em;cursor:pointer}
.panelTitle{font-size:20px;font-weight:900;letter-spacing:.1em;text-align:center;
  color:var(--gold);margin-bottom:4px}
.panelSub{font-size:13px;text-align:center;opacity:.66;margin-bottom:6px}
.pBtn{width:100%;height:60px;margin-top:14px;border:0;border-radius:14px;font-size:18px;
  font-weight:900;letter-spacing:.06em;color:#fff;cursor:pointer;
  background:linear-gradient(160deg,#22e8ff,#0d5a75)}
.menuRow{display:flex;justify-content:space-between;align-items:center;height:52px;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:15px}
.menuRow button{border:1px solid rgba(34,232,255,.45);background:#170e2c;color:#cfe9ff;
  border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;
  min-width:82px;min-height:40px}

/* ---- feature purchased --------------------------------------------------- */
#buyFx{position:absolute;inset:0;z-index:44;display:flex;align-items:center;
  justify-content:center;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(60,16,92,.62) 0%,
    rgba(8,3,18,.88) 60%,rgba(3,1,8,.94) 100%);
  animation:buyFxIn .28s ease}
@keyframes buyFxIn{from{opacity:0}to{opacity:1}}
#buyFxCard{text-align:center;padding:26px 34px;border-radius:20px;
  background:linear-gradient(165deg,rgba(32,16,58,.96),rgba(11,6,22,.96));
  border:1px solid rgba(255,198,61,.55);
  box-shadow:0 0 54px rgba(255,46,136,.38),inset 0 1px 0 rgba(255,255,255,.10);
  animation:buyFxCard .42s cubic-bezier(.18,1.4,.35,1)}
@keyframes buyFxCard{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
#buyFxTag{font-size:13px;font-weight:800;letter-spacing:.30em;color:var(--cyan);
  opacity:.95;margin-bottom:10px}
#buyFxName{font-size:30px;font-weight:900;letter-spacing:.06em;line-height:1.1;
  background:linear-gradient(180deg,#fff6cf,#ffc63d 55%,#ff9d2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,150,40,.45))}
#buyFxCost{margin-top:8px;font-size:20px;font-weight:800;color:#eae4ff;opacity:.82}
#stage.portrait #buyFxTag{font-size:20px}
#stage.portrait #buyFxName{font-size:46px}
#stage.portrait #buyFxCost{font-size:30px}
#stage.portrait #buyFxCard{padding:38px 46px;border-radius:26px}

/* ---- big win ------------------------------------------------------------ */
#bigwin{z-index:46}
#bwCard{position:relative;width:min(84%,440px);padding:26px 22px;border-radius:20px;
  text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,#2a1046,#0a0514 72%);
  border:1px solid rgba(255,198,61,.65);box-shadow:0 0 60px rgba(255,46,136,.5);
  animation:pop .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
#bwTitle{font-size:13px;letter-spacing:.22em;color:var(--cyan);margin-bottom:6px}
#bwTier{font-size:26px;font-weight:900;letter-spacing:.1em;color:var(--gold);
  text-shadow:0 0 22px rgba(255,198,61,.75)}
#bwAmount{font-size:44px;font-weight:900;margin-top:6px;
  text-shadow:0 0 26px rgba(255,46,136,.8)}
#bwHint{font-size:11px;letter-spacing:.16em;opacity:.42;margin-top:12px}
#bwCollect{margin-top:14px;width:100%;height:58px;border:0;border-radius:14px;
  font-size:17px;font-weight:900;letter-spacing:.08em;color:#fff;cursor:pointer;
  background:linear-gradient(160deg,#ffc63d,#a06a00)}

/* ---- toast -------------------------------------------------------------- */
#toast{position:absolute;left:50%;transform:translateX(-50%);top:14%;z-index:48;
  display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.tst{padding:9px 18px;border-radius:11px;font-size:15px;font-weight:800;letter-spacing:.05em;
  background:rgba(12,6,26,.9);border:1px solid rgba(255,198,61,.55);color:var(--gold);
  box-shadow:0 0 22px rgba(255,198,61,.3);animation:tin .3s ease}
@keyframes tin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

#badge{position:absolute;right:8px;bottom:6px;font-size:10px;opacity:.28;letter-spacing:.1em}

/* ---- PORTRAIT: big touch targets ---------------------------------------- */
/* The portrait stage (720 wide) is scaled down to the phone width, so portrait gets its own
   larger sizes to keep tap targets above the 44px minimum. #stage.portrait is toggled in calcLayout. */
#stage.portrait .rbtn{width:96px;height:96px;border-width:2px}
#stage.portrait .rbtn .glyph{stroke-width:2.2}
#stage.portrait #spinBtn{width:180px;height:180px}
#stage.portrait #ctrl .side{gap:18px}

#stage.portrait #buyBtn{font-size:26px;border-radius:20px;flex-direction:column;gap:0}
#stage.portrait #buyBtn span{font-size:.68em}
#stage.portrait .pill{padding:8px 18px;border-radius:15px}
#stage.portrait .pill b{font-size:15px}
#stage.portrait .pill span{font-size:29px}
#stage.portrait #fsbar{font-size:26px;gap:34px;padding:0 28px;border-radius:18px}
/* Modals are DOM too, so they need portrait sizes as well */
#stage.portrait #panel{width:640px;padding:0}
#stage.portrait #panelBody{padding:0 28px 28px}
#stage.portrait #pop{width:660px;padding:0}
#stage.portrait #popBody{padding:0 24px 24px}
#stage.portrait #popMore{font-size:17px;bottom:16px}
#stage.portrait #popMore svg{width:20px;height:20px}
#stage.portrait #pop::after{height:96px}
#stage.portrait .buyOpt{min-height:92px;padding:12px 18px;gap:16px;border-radius:18px}
#stage.portrait .buyOpt img{width:70px;height:70px;flex-basis:70px}
#stage.portrait .buyOpt b{font-size:23px}
#stage.portrait .buyOpt i{font-size:16px}
#stage.portrait .buyOpt .price{font-size:28px}
#stage.portrait .buyOpt .price u{font-size:13px}
#stage.portrait .buyApply{height:92px;font-size:25px}

#stage.portrait .panelTitle{font-size:28px}
#stage.portrait .panelSub{font-size:18px}
#stage.portrait .pBtn{height:86px;font-size:26px}
/* Tap targets here are in stage pixels and the stage is scaled to about 0.6, so they are sized
   to render at 48 real px or more. Check with getBoundingClientRect(). */
#stage.portrait .menuRow{height:88px;font-size:21px}
#stage.portrait .menuRow button{min-width:130px;min-height:76px;padding:12px 22px;font-size:19px}
/* The right offset clears the card's 18px corner radius. Only the disc size changes per
   orientation; the hit box follows it, and top:50% keeps it centred in the header. */
#stage.portrait .xbtn{--disc:56px;right:18px}
#stage.portrait .pHead{margin-bottom:18px;padding:0 116px 0 28px;min-height:96px}
#stage.portrait #pop .pHead{padding:0 112px 0 24px}

#stage.portrait .rules{font-size:20px}
#stage.portrait h3.sec{font-size:17px}
#stage.portrait table.pt{font-size:20px}
#stage.portrait table.pt img{height:38px}
#stage.portrait #bwCard{width:min(88%,620px);padding:34px 26px}
#stage.portrait #bwTier{font-size:36px}
#stage.portrait #bwAmount{font-size:58px}
#stage.portrait #bwTitle{font-size:18px}
#stage.portrait #bwCollect{height:84px;font-size:25px}
#stage.portrait #badge{font-size:14px}

/* ---- loading screen ----------------------------------------------------- */
#loader{position:fixed;inset:0;z-index:80;background:
  radial-gradient(circle at 50% 38%,#1a0d2e,#07040f 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;transition:opacity .45s ease}
#loader.gone{opacity:0;pointer-events:none}
/* The logo art is neon on pure black; screen blending drops the black background */
#ldLogo{width:min(66vw,440px);aspect-ratio:1.385;mix-blend-mode:screen;
  background:center/contain no-repeat url("assets/img/logo.webp?v=86");
  animation:ldPulse 2.2s ease-in-out infinite}
@keyframes ldPulse{0%,100%{opacity:.82}50%{opacity:1}}
#ldBar{width:min(56vw,320px);height:6px;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.10);box-shadow:0 0 12px rgba(34,232,255,.2) inset}
#ldFill{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#22e8ff,#ff2e88);transition:width .25s ease}
#ldTxt{font-size:12px;letter-spacing:.34em;opacity:.5;font-weight:700}

/* ---- free-spins intro ---------------------------------------------------- */
/* Free-spins intro is a scene, not a card: vignette, soft light halo, a beam behind the art */
#fsintro{position:absolute;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(60,16,92,.72) 0%,
    rgba(12,4,24,.93) 55%,rgba(3,1,8,.98) 100%);
  /* .55s matches SCAT_FADE in game.js, so the two fades overlap into one move */
  backdrop-filter:blur(7px);animation:fsFade .55s ease}
@keyframes fsFade{from{opacity:0}to{opacity:1}}
/* The halo is blurred so the conic stripes read as soft rays */
.fsHalo{position:absolute;left:50%;top:42%;width:2600px;height:2600px;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.34;filter:blur(34px);
  background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,46,136,.55) 8% 13%,
    transparent 15% 27%,rgba(34,232,255,.5) 29% 34%,transparent 36% 48%,
    rgba(255,198,61,.5) 50% 55%,transparent 57% 69%,rgba(255,46,136,.5) 71% 76%,
    transparent 78% 90%,rgba(34,232,255,.45) 92% 97%,transparent 99% 100%);
  animation:fsSpin 26s linear infinite}
@keyframes fsSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.fsBeam{position:absolute;left:50%;top:-6%;width:430px;height:74%;
  transform:translateX(-50%);pointer-events:none;filter:blur(26px);opacity:.55;
  background:linear-gradient(180deg,rgba(255,214,120,.55) 0%,rgba(255,120,200,.18) 45%,
    transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
  animation:fsBeamPulse 3.4s ease-in-out infinite}
@keyframes fsBeamPulse{0%,100%{opacity:.42}50%{opacity:.68}}
#fsCard{position:relative;z-index:1;text-align:center;padding:0 22px;
  animation:fsIn .5s cubic-bezier(.18,1.4,.35,1)}
@keyframes fsIn{from{transform:scale(.8) translateY(26px);opacity:0}to{transform:none;opacity:1}}
/* Stage pixels, never vmin/vw: #stage is already transform-scaled, so viewport units would be
   scaled twice. */
#fsIcon{width:210px;height:210px;object-fit:contain;
  filter:drop-shadow(0 0 40px rgba(255,198,61,.85)) drop-shadow(0 14px 26px rgba(0,0,0,.6));
  animation:fsBob 3.2s ease-in-out infinite}
@keyframes fsBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.04)}}
#fsTitle{margin-top:2px;font-size:26px;font-weight:900;
  letter-spacing:.24em;color:#ffe6a6;
  text-shadow:0 0 8px rgba(255,198,61,.9),0 0 34px rgba(255,140,40,.7),0 2px 0 rgba(0,0,0,.5)}
/* metallic number with a light sweeping through it */
#fsNum{font-size:132px;font-weight:900;line-height:.88;
  margin:2px 0 0;letter-spacing:-.03em;
  background:linear-gradient(100deg,#a05c00 0%,#ffcf5c 22%,#fffbe8 34%,#ffcf5c 46%,
    #ff8c1e 62%,#ffcf5c 78%,#a05c00 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,150,40,.55)) drop-shadow(0 6px 12px rgba(0,0,0,.55));
  animation:fsShine 2.8s linear infinite}
@keyframes fsShine{from{background-position:180% 0}to{background-position:-80% 0}}
#fsSub{font-size:21px;font-weight:900;letter-spacing:.52em;
  text-indent:.52em;color:#bff4ff;
  text-shadow:0 0 10px rgba(34,232,255,.9),0 0 30px rgba(34,232,255,.55)}
#fsGo{position:relative;margin-top:26px;width:320px;height:66px;
  border:0;border-radius:999px;cursor:pointer;
  overflow:hidden;color:#2a1400;font-size:20px;font-weight:900;letter-spacing:.2em;
  background:linear-gradient(180deg,#fff0bd 0%,#ffc63d 42%,#f39a00 100%);
  box-shadow:0 0 34px rgba(255,180,60,.55),0 6px 0 #a05c00,0 10px 22px rgba(0,0,0,.5);
  animation:fsGoPulse 2s ease-in-out infinite}
#fsGo span{position:relative;z-index:1}
/* the shine that travels across the button */
#fsGo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-120%);animation:fsGoShine 2.6s ease-in-out infinite}
@keyframes fsGoShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@keyframes fsGoPulse{0%,100%{box-shadow:0 0 26px rgba(255,180,60,.45),0 6px 0 #a05c00,0 10px 22px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 46px rgba(255,200,90,.8),0 6px 0 #a05c00,0 10px 22px rgba(0,0,0,.5)}}
#fsGo:active{transform:translateY(4px);box-shadow:0 0 26px rgba(255,180,60,.5),0 2px 0 #a05c00}
/* MAXX gets its own colourway: cyan light, ice-blue number */
#fsintro.maxx{background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(10,64,96,.72) 0%,
  rgba(4,12,28,.94) 55%,rgba(2,4,10,.98) 100%)}
#fsintro.maxx .fsBeam{background:linear-gradient(180deg,rgba(150,240,255,.6) 0%,
  rgba(70,150,255,.2) 45%,transparent 78%)}
#fsintro.maxx #fsIcon{filter:drop-shadow(0 0 44px rgba(34,232,255,.9)) drop-shadow(0 14px 26px rgba(0,0,0,.6))}
#fsintro.maxx #fsTitle{color:#c9f6ff;
  text-shadow:0 0 8px rgba(34,232,255,.95),0 0 34px rgba(20,140,255,.7),0 2px 0 rgba(0,0,0,.5)}
#fsintro.maxx #fsNum{background:linear-gradient(100deg,#0a5a7a 0%,#7fe6ff 22%,#f2ffff 34%,
  #7fe6ff 46%,#1f9dff 62%,#7fe6ff 78%,#0a5a7a 100%);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 26px rgba(40,180,255,.6)) drop-shadow(0 6px 12px rgba(0,0,0,.55))}
#fsintro.maxx #fsSub{color:#ffe6a6;
  text-shadow:0 0 10px rgba(255,198,61,.9),0 0 30px rgba(255,150,40,.55)}
/* The pulse animation sets box-shadow every frame, so the MAXX colourway needs its own keyframes */
#fsintro.maxx #fsGo{color:#00232f;
  background:linear-gradient(180deg,#e6fdff 0%,#22e8ff 42%,#0284b5 100%);
  animation:fsGoPulseC 2s ease-in-out infinite}
@keyframes fsGoPulseC{0%,100%{box-shadow:0 0 26px rgba(60,220,255,.45),0 6px 0 #04566f,0 10px 22px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 46px rgba(120,240,255,.85),0 6px 0 #04566f,0 10px 22px rgba(0,0,0,.5)}}
#stage.portrait #fsintro.maxx #fsGo{box-shadow:0 0 40px rgba(60,220,255,.55),0 9px 0 #04566f,0 14px 30px rgba(0,0,0,.5)}

/* bet stepper inside the buy chooser */
.buyBet{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 2px;
  padding:10px 14px;border-radius:14px;background:#140c26;
  border:1px solid rgba(34,232,255,.28)}
.buyBet button{width:46px;height:46px;flex:0 0 46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(34,232,255,.45);background:#1d1235;color:#cfe9ff;
  font-size:24px;font-weight:900;line-height:1}
.buyBet button:disabled{opacity:.28;pointer-events:none}
.buyBet span{min-width:120px;text-align:center}
.buyBet b{display:block;font-size:10px;letter-spacing:.18em;opacity:.55;font-weight:700}
.buyBet i{font-style:normal;font-size:24px;font-weight:900;color:#fff}
#stage.portrait .buyBet{gap:22px;padding:14px 18px}
#stage.portrait .buyBet button{width:66px;height:66px;flex-basis:66px;font-size:32px}
#stage.portrait .buyBet span{min-width:170px}
#stage.portrait .buyBet b{font-size:13px}
#stage.portrait .buyBet i{font-size:32px}

#stage.portrait #fsIcon{width:320px;height:320px}
#stage.portrait #fsTitle{font-size:40px;letter-spacing:.2em}
#stage.portrait #fsNum{font-size:220px}
#stage.portrait #fsSub{font-size:32px}
#stage.portrait #fsGo{width:480px;height:104px;font-size:31px;margin-top:34px;
  box-shadow:0 0 40px rgba(255,180,60,.55),0 9px 0 #a05c00,0 14px 30px rgba(0,0,0,.5)}
#stage.portrait .fsBeam{width:620px}

/* ---- top notification (non-blocking) ------------------------------------ */
/* Absolute inside the stage, not a full-screen overlay: the game stays live underneath. */
#notif{position:absolute;left:50%;transform:translateX(-50%);z-index:55;
  display:flex;flex-direction:column;gap:10px;overflow:hidden;
  padding:14px 16px 12px;border-radius:16px;
  background:linear-gradient(165deg,rgba(30,16,54,.97),rgba(12,6,26,.97));
  border:1px solid rgba(255,198,61,.6);
  box-shadow:0 10px 34px rgba(0,0,0,.6),0 0 34px rgba(255,46,136,.35);
  animation:ntIn .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes ntIn{from{opacity:0;transform:translateX(-50%) translateY(-22px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
#notif.out{animation:ntOut .25s ease forwards}
@keyframes ntOut{to{opacity:0;transform:translateX(-50%) translateY(-22px)}}
#ntText{font-size:15px;line-height:1.35;text-align:center;color:#f0e9ff}
#ntText b{color:var(--gold)}
#ntBtns{display:flex;gap:10px}
#ntBtns button{flex:1;height:46px;border:0;border-radius:11px;cursor:pointer;
  font-size:14px;font-weight:900;letter-spacing:.1em}
#ntNo{background:#241634;color:#a79cc4;border:1px solid rgba(255,255,255,.12)!important}
#ntOk{background:linear-gradient(180deg,#fff0bd,#ffc63d 45%,#f39a00);color:#2a1400;
  box-shadow:0 0 20px rgba(255,180,60,.5)}
#ntBtns button:active{transform:scale(.96)}
#ntBar{display:block;height:3px;border-radius:2px;align-self:stretch;
  background:linear-gradient(90deg,var(--cyan),var(--mag));transform-origin:left center}
@keyframes ntCount{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#stage.portrait #notif{padding:20px 22px 16px;border-radius:22px;gap:14px}
#stage.portrait #ntText{font-size:23px}
#stage.portrait #ntBtns button{height:70px;font-size:21px;border-radius:15px}
#stage.portrait #ntBar{height:5px}


/* SPIN halo (#spinBtn::after): a static shadow with only opacity animated, so it is
   composited on the GPU instead of repainting a blurred shadow every frame. */


/* ===== THE MASK theme ==================================================================== */
@font-face{font-family:"Cinzel";src:url("assets/fonts/Cinzel.ttf") format("truetype");
  font-weight:400 900;font-display:block}
/* every painted plate (wallet, message line, free-spins bar) is the same rendered plaque,
   nine-sliced so its blossom ends keep their shape at any width */
.plq,#winBox,#fsbar,#strip{border-style:solid;border-width:12px 34px;
  border-image:url("assets/img/plaque.webp?v=109") 70 150 fill / 12px 34px stretch;
  background:none;box-shadow:none;backdrop-filter:none}
#hud{position:absolute;inset:0;pointer-events:none;display:block}
.plq{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.05;padding:0}
.plq b{font-size:13px;letter-spacing:.2em;color:#d9b26a;font-weight:700}
.plq span{font-size:25px;font-weight:900;color:#fff1d0;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.8)}
#strip{position:absolute;display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:19px;font-weight:700;letter-spacing:.08em;color:#f6dfa4;white-space:nowrap;
  text-shadow:0 2px 6px rgba(0,0,0,.85)}
#strip .paw{display:none}
#winBox{position:absolute;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0;font-size:16px;letter-spacing:.12em;color:#d9b26a;white-space:nowrap}
#winBox b{font-size:13px;font-weight:700;opacity:.8}
#winBox span{font-size:20px;font-weight:900;color:#fff1d0;font-variant-numeric:tabular-nums}
#fsbar{font-size:16px;font-weight:700;color:#f6dfa4;gap:16px;padding:0 6px}
#stage.portrait #fsbar{font-size:17px;gap:18px;padding:0 6px}
#fsMode{color:#f2c45a}

/* the controls: painted lacquer-and-gold buttons placed in stage pixels by calcLayout */
#ctrl{position:absolute;inset:0;pointer-events:none;display:block}
.pbtn{position:absolute;border:0;padding:0;cursor:pointer;pointer-events:auto;border-radius:50%;
  background:center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.pbtn:active{transform:scale(.93)}
.pbtn em{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;
  font-style:normal;font-size:var(--lbl,15px);font-weight:700;letter-spacing:.12em;color:#e8cf95;
  white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.pbtn.disabled{pointer-events:none;filter:grayscale(.85) brightness(.6)}
#spinBtn{background-image:url("assets/img/btn_spin.webp?v=109");width:auto;height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,190,90,.35))}
#spinBtn::after{box-shadow:0 0 30px 6px rgba(255,196,96,.75)}
#spinBtn.busy{filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) grayscale(.5) brightness(.8)}
#betDown{background-image:url("assets/img/btn_minus.webp?v=109")}
#betUp{background-image:url("assets/img/btn_plus.webp?v=109")}
#menuBtn{background-image:url("assets/img/btn_menu.webp?v=109")}
#soundBtn{background-image:url("assets/img/btn_sound.webp?v=109")}
#soundBtn.muted{background-image:url("assets/img/btn_mute.webp?v=109")}
#autoBtn{background-image:url("assets/img/btn_auto.webp?v=109")}
#speedBtn{background-image:url("assets/img/btn_turbo.webp?v=109")}
#autoBtn.on,#speedBtn.on{filter:drop-shadow(0 0 12px rgba(255,200,100,.95)) brightness(1.15)}
#buyBtn{position:absolute;border:0;border-radius:50%;padding:0;font-size:0;
  background:url("assets/img/btn_buy.webp?v=109") center/contain no-repeat;box-shadow:none;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.7))}
/* social mode: the painted BUY BONUS becomes GET BONUS (no buying words in social play) */
.stk-social #buyBtn{background-image:url("assets/img/btn_buy_get.webp?v=109")}
#buyBtn span{display:none}
#stage.portrait .pbtn{border-width:0}

/* loading: the theatre before the play */
#loader{background:#0b0705 url("assets/img/loading.webp?v=109") center/cover no-repeat}
#ldLogo{background:url("assets/img/logo.webp?v=109") center/contain no-repeat}
#ldBar{background:rgba(0,0,0,.55);border:1px solid rgba(242,196,90,.6)}
#ldFill{background:linear-gradient(90deg,#b5762a,#f6cf6c,#fff1c8)}
#ldTxt{color:#e8cf95;letter-spacing:.3em}

/* the curtain: two halves of the painted shoji cover */
#curtain{position:absolute;inset:0;z-index:35;overflow:hidden;pointer-events:none}
#curtain i{position:absolute;top:0;bottom:0;width:50.4%;background-size:200% 100%;
  background-repeat:no-repeat;will-change:transform}
#curtainL{left:0;background-position:0 50%;transform:translateX(-102%)}
#curtainR{right:0;background-position:100% 50%;transform:translateX(102%)}
#curtain.lit i{animation:eyesFlare 1.1s ease-in-out infinite alternate}
@keyframes eyesFlare{from{filter:brightness(1)}to{filter:brightness(1.22) saturate(1.15)}}

/* Act II opens: the scene, the entry panel and START */
#entry{position:absolute;inset:0;z-index:31;background:#0b0705 center/cover no-repeat}
#entry .ePanel{position:absolute;left:50%;bottom:19%;width:86%;aspect-ratio:1000/618;
  transform:translateX(-50%);background:url("assets/img/panel_entry.webp?v=109") center/contain no-repeat}
#entryTitle{position:absolute;left:9%;right:9%;top:7%;height:16%;display:none;align-items:center;
  justify-content:center;font-size:40px;font-weight:900;letter-spacing:.08em;color:#f6cf6c;
  background:linear-gradient(#0d0a08,#0a0806);border-radius:6px;text-shadow:0 0 14px rgba(255,190,90,.5)}
#entry.maxx #entryTitle{display:flex}
#entryGo{position:absolute;left:50%;bottom:9%;width:58%;aspect-ratio:634/186;transform:translateX(-50%);
  border:0;padding:0;cursor:pointer;background:url("assets/img/btn_start.webp?v=109") center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
#entryGo:active{transform:translateX(-50%) scale(.95)}
#stage:not(.portrait) #entry .ePanel{width:44%;bottom:22%}
#stage:not(.portrait) #entryGo{width:28%;bottom:6%}

/* curtain call: dawn */
#dawn{position:absolute;inset:0;z-index:30;background:#0b0705 center/cover no-repeat;pointer-events:none}

/* the big win: the beast's eyes open behind the amount */
#bigwin{background:rgba(6,3,2,.55) url("assets/img/bigwin.webp?v=109") center/cover no-repeat}
#bwCard{background:none;border:0;box-shadow:none}
#bwTitle{color:#e8cf95;letter-spacing:.24em}
#bwTier{color:#f6cf6c;text-shadow:0 0 22px rgba(255,190,90,.7)}
#bwAmount{color:#fff1d0;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,190,90,.65),0 4px 10px rgba(0,0,0,.8)}
#bwCollect{background:linear-gradient(#fff1c8,#f2c45a 45%,#b5762a);border:2px solid #fff6dc;border-radius:999px;
  color:#2a1405;font-family:"Cinzel",Georgia,serif;font-weight:900;letter-spacing:.14em;
  box-shadow:0 6px 18px rgba(0,0,0,.6),0 0 18px rgba(255,200,100,.45),inset 0 2px 0 rgba(255,255,255,.6)}

/* panels: black lacquer and gold */
#panel,#pop{background:linear-gradient(170deg,#1a120c,#0b0705);border:1px solid rgba(242,196,90,.65);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,230,170,.12)}
.panelTitle,.pHead .panelTitle{color:#f6cf6c}
.menuRow button{border:1px solid rgba(242,196,90,.55);background:#140c08;color:#f3ece2}
.buyOpt{background:linear-gradient(170deg,#1c130c,#0e0906);border-color:rgba(242,196,90,.35)}
.buyOpt.selected{border-color:#f2c45a;box-shadow:0 0 18px rgba(242,196,90,.35)}
.buyOpt::before{background:#c8322c}
.buyApply,.pBtn{background:linear-gradient(#f6cf6c,#b5762a);color:#2a1405;border:1px solid #fff1c8}
.tst{background:rgba(14,9,6,.94);border-color:rgba(242,196,90,.6);color:#f6cf6c}
#notif{background:linear-gradient(170deg,#1a120c,#0b0705);border:1px solid rgba(242,196,90,.6)}
#badge{color:#e8cf95}

#pop{background:linear-gradient(170deg,#1a120c,#0b0705)}
.tst{background:rgba(14,9,6,.94)}

/* the big win: a dark lacquer plate behind the title, tier and amount, so they read over the bright art */
#bwCard{background:radial-gradient(ellipse at 50% 50%,rgba(10,6,3,.82),rgba(10,6,3,.55) 60%,rgba(10,6,3,0) 78%)!important;
  padding:48px 26px!important}
#stage.portrait #bwTitle{font-size:20px}
#stage.portrait #bwTier{font-size:44px}
#stage.portrait #bwAmount{font-size:72px}
#bwCollect{display:block;margin:18px auto 0;width:70%;height:64px;font-size:22px}

/* ===== loading: BEGIN, and the story before the play =========================================== */
#loader{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;
  padding-bottom:max(9vh,40px)}
#ldLogo{margin-bottom:auto;margin-top:12vh}
#ldGo{min-width:220px;height:62px;padding:0 40px;border-radius:999px;cursor:pointer;
  background:linear-gradient(#fff1c8,#f2c45a 45%,#b5762a);border:2px solid #fff6dc;
  font-family:"Cinzel",Georgia,serif;font-size:24px;font-weight:900;letter-spacing:.2em;color:#2a1405;
  box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 26px rgba(255,200,100,.55),inset 0 2px 0 rgba(255,255,255,.6);
  animation:goPulse 2.2s ease-in-out infinite}
@keyframes goPulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 18px rgba(255,200,100,.35),inset 0 2px 0 rgba(255,255,255,.6)}
  50%{box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 34px rgba(255,200,100,.8),inset 0 2px 0 rgba(255,255,255,.6)}}
#ldGo:active{transform:scale(.96)}
#ldStory{background:none;border:0;color:#e8cf95;font-family:"Cinzel",Georgia,serif;font-size:14px;
  letter-spacing:.2em;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:.85}
#story{position:fixed;inset:0;z-index:90;background:#050302;overflow:hidden;
  transition:opacity .6s ease}
#story.out{opacity:0}
#stFrames,#stVideo{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100vw,calc(100vh * 9 / 16));height:100%}
#stVideo{object-fit:cover}
.stFrame{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;
  transition:opacity .9s ease;will-change:transform,opacity}
.stFrame.on{opacity:1}
.stFrame.mv-in{animation:kbIn 6s ease-out forwards}
.stFrame.mv-out{animation:kbOut 6s ease-out forwards}
.stFrame.mv-up{animation:kbUp 6s ease-out forwards}
@keyframes kbIn{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes kbOut{from{transform:scale(1.16)}to{transform:scale(1.03)}}
@keyframes kbUp{from{transform:scale(1.12) translateY(5%)}to{transform:scale(1.12) translateY(-4%)}}
#stCap{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);margin:0;
  width:min(86vw,calc(100vh * 9 / 16 * .86));text-align:center;
  font-family:"Cinzel",Georgia,serif;font-size:clamp(17px,4.6vw,26px);font-weight:700;line-height:1.4;
  color:#fff1d6;letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 24px rgba(0,0,0,.8);
  opacity:0;transition:opacity .7s ease}
#stCap.on{opacity:1}
#stCap.title{bottom:auto;top:16%;display:flex;flex-direction:column;align-items:center;gap:6px}
#stCap.title b{font-size:clamp(40px,12vw,68px);font-weight:900;letter-spacing:.06em;
  background:linear-gradient(#fff6d8,#f6cf6c 55%,#c98a2c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.8))}
#stCap.title span{font-size:clamp(20px,6vw,32px);font-weight:900;letter-spacing:.2em;color:#f2c45a}
#stCap.title em{font-style:normal;font-size:clamp(12px,3.4vw,16px);letter-spacing:.32em;color:#e8cf95;margin-top:10px}
#stSkip{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));
  height:38px;padding:0 18px;border-radius:999px;border:1px solid rgba(242,196,90,.7);
  background:rgba(10,6,3,.6);color:#f2c45a;font-family:"Cinzel",Georgia,serif;font-size:14px;
  font-weight:700;letter-spacing:.2em;cursor:pointer}

#ldLogo{mix-blend-mode:normal;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
#stCap.title{top:12%}
#stCap.title img{width:min(78vw,calc(100vh * 9 / 16 * .78));height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.75))}

/* SKIP is easy to find: a gold pill at the top, on the loader (first visit) and over the story */
#ldSkip,#stSkip{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));
  height:46px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(255,226,160,.9);
  background:rgba(12,7,3,.72);color:#f6cf6c;font-family:"Cinzel",Georgia,serif;font-size:17px;font-weight:900;
  letter-spacing:.16em;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 14px rgba(255,190,90,.3);z-index:2}
#ldSkip:active,#stSkip:active{transform:scale(.95)}
#strip{font-size:16px}
#stage:not(.portrait) #strip{font-size:15px}
/* a portrait picture on a landscape stage: the whole picture centred (::after) over a blurred,
   dimmed copy of itself (::before); the picture comes from --img, set with the background */
#dawn,#entry,#bigwin{isolation:isolate}
#stage:not(.portrait) #dawn,#stage:not(.portrait) #entry{background-image:none!important}
#stage:not(.portrait) #dawn::before,#stage:not(.portrait) #entry::before{content:"";position:absolute;inset:-40px;
  background-image:var(--img);background-size:cover;background-position:center;filter:blur(26px) brightness(.5)}
#stage:not(.portrait) #dawn::after,#stage:not(.portrait) #entry::after{content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:contain;background-position:center;background-repeat:no-repeat}
#entry .ePanel,#entryGo{z-index:1}
#stage:not(.portrait) #bigwin{background:#0b0705}
#stage:not(.portrait) #bigwin::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("assets/img/bigwin.webp?v=109") center/contain no-repeat}
#stage:not(.portrait) #bigwin::after{content:"";position:absolute;inset:-40px;z-index:-2;
  background:url("assets/img/bigwin.webp?v=109") center/cover no-repeat;filter:blur(26px) brightness(.45)}
/* the captions sit on a soft dark band so they read over bright shots */
#story::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:1;pointer-events:none;
  width:min(100vw,calc(100vh * 9 / 16));height:42%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72) 70%)}
#stVideo,#stFrames{z-index:0}
#stCap{z-index:2}
#stSkip{z-index:3}

/* the story asks for the first touch to play its sound */

/* ===== THE MASK panels: the rendered frame (nine-slice, corners whole), the centre flower,
   the painted close disc, gold and lacquer pills, lacquer and crimson cards ================= */
#panel,#pop,#notif,#buyFxCard{border-style:solid!important;border-color:transparent!important;border-width:0!important;border-radius:0!important;
  background:none!important;box-shadow:0 26px 60px rgba(0,0,0,.55)!important;
  border-image:url("assets/img/ui_frame.webp?v=109") 364 fill / 110px / 0 stretch}
#stage.portrait #panel,#stage.portrait #pop{border-image-width:150px}
#notif,#stage.portrait #notif{border-image-width:78px;padding:30px 34px 26px}
#buyFxCard{border-image-width:90px;padding:46px 58px 40px!important}
/* the centre flower sits on the top rail at the frame's own scale (624 x 150 source px) */
#panel::before,#pop::before{content:"";position:absolute;z-index:3;top:0;left:50%;
  width:132px;height:32px;transform:translateX(-50%);pointer-events:none;
  background:url("assets/img/ui_crest.webp?v=109") center/100% 100% no-repeat}
#stage.portrait #panel::before,#stage.portrait #pop::before{width:180px;height:43px}
#panelWrap,#popWrap{background:rgba(6,3,2,.66)}

/* header: centred Cinzel title under the flower, the close disc in the top right corner */
#panel .pHead,#pop .pHead{background:none;border:0;justify-content:center;text-align:center;
  padding:34px 70px 4px;min-height:0;margin-bottom:8px}
#stage.portrait #panel .pHead,#stage.portrait #pop .pHead{padding:52px 92px 6px;margin-bottom:12px}
.pHead .htxt{display:flex;flex-direction:column;align-items:center}
#panel .pHead .panelTitle,#pop .pHead .panelTitle{text-align:center;font-family:"Cinzel",Georgia,serif;
  font-weight:900;letter-spacing:.14em;color:#f6cf6c;
  background:linear-gradient(#fff3cf,#f2c45a 55%,#b5762a);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
#stage.portrait .pHead .panelTitle{font-size:28px;letter-spacing:.1em}
#panel .pHead .panelSub,#pop .pHead .panelSub{text-align:center;font-family:Georgia,serif;font-style:italic;
  color:#d9c49a;opacity:.85;letter-spacing:.04em}
#stage.portrait .pHead .panelSub{font-size:19px}
.xbtn{top:22px;right:20px;transform:none}
.xbtn:active{transform:scale(.92)}
.xbtn .glyph{display:none}
.xbtn::before,.xbtn:hover::before{border:0;box-shadow:none;border-radius:0;
  background:url("assets/img/ui_close.webp?v=109") center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
#stage.portrait .xbtn{--disc:62px;top:30px;right:30px}
#panelBody{padding:0 30px 30px}
#stage.portrait #panelBody{padding:0 42px 42px}
#popBody{padding:0 28px 30px}
#stage.portrait #popBody{padding:0 40px 44px}
#pop::after{left:24px;right:24px;bottom:24px;border-radius:0;
  background:linear-gradient(180deg,rgba(5,3,2,0),rgba(5,3,2,.94))}
#popMore{color:#f6cf6c;font-family:"Cinzel",Georgia,serif;bottom:30px}
#stage.portrait #popMore{bottom:40px}

/* pills: gold = the action or a switch that is on, black lacquer = the rest */
#stage .gbtn,#stage .lbtn,#ntBtns #ntOk,#ntBtns #ntNo,#stage .buyApply{border-style:solid!important;border-color:transparent!important;border-width:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;border-image-repeat:stretch;cursor:pointer;
  font-family:"Cinzel",Georgia,serif;font-weight:900;letter-spacing:.12em;white-space:nowrap}
#stage .gbtn,#ntBtns #ntOk,#stage .buyApply{border-image-source:url("assets/img/ui_pill_gold.webp?v=109");border-image-slice:0 132 fill;
  color:#2a1405!important;text-shadow:0 1px 0 rgba(255,244,214,.55)}
#stage .lbtn,#ntBtns #ntNo,#stage .buyApply[disabled]{border-image-source:url("assets/img/ui_pill_lacquer.webp?v=109");border-image-slice:0 140 fill;
  color:#f6cf6c!important;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.gbtn:active,.lbtn:active,#ntOk:active,#ntNo:active,.buyApply:active{transform:scale(.95)}
#panel .menuRow .gbtn,#panel .menuRow .lbtn{min-width:120px;height:46px;min-height:0;padding:0 26px;
  font-size:13px;border-image-width:0 23px}
#panel .menuRow .lbtn{border-image-width:0 30px}
#stage.portrait #panel .menuRow .gbtn,#stage.portrait #panel .menuRow .lbtn{min-width:178px;height:72px;
  padding:0 40px;font-size:20px;border-image-width:0 36px}
#stage.portrait #panel .menuRow .lbtn{border-image-width:0 48px}
#ntBtns button{border-image-width:0 23px}
#ntBtns #ntNo{border-image-width:0 30px}
#stage.portrait #ntBtns button{height:72px;border-image-width:0 36px}
#stage.portrait #ntBtns #ntNo{border-image-width:0 48px}
#ntText{color:#f1e3c4;font-family:Georgia,serif}
#ntBar{background:linear-gradient(90deg,#b5762a,#fff1c8,#b5762a)}

/* menu rows: painted icon, Cinzel label, control */
#panel .menuRow{justify-content:flex-start;gap:14px;height:auto;min-height:64px;
  border-bottom:1px solid rgba(242,196,90,.16)}
#panel .menuRow:last-child{border-bottom:0}
.mIc{width:42px;height:42px;flex:0 0 42px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.mLbl{flex:1;min-width:0;font-family:"Cinzel",Georgia,serif;font-weight:700;color:#f1e3c4;letter-spacing:.04em}
.mVal{font-family:"Cinzel",Georgia,serif;font-weight:900;color:#f6cf6c;font-variant-numeric:tabular-nums}
#stage.portrait #panel .menuRow{min-height:100px;gap:20px;font-size:22px}
#stage.portrait .mIc{width:68px;height:68px;flex-basis:68px}
#stage.portrait .mVal{font-size:24px}

/* buy chooser: the bet on a lacquer card with the painted - and +, options on lacquer cards,
   the chosen one crimson */
#panel .buyBet{border:0 solid transparent;border-radius:0;background:none;
  border-image:url("assets/img/ui_card_dark.webp?v=109") 70 fill / 22px / 0 stretch;padding:12px 20px}
#panel .buyBet button{border:0;border-radius:0;color:transparent;font-size:0;box-shadow:none;
  background:url("assets/img/btn_minus.webp?v=109") center/contain no-repeat}
#panel .buyBet #bbUp{background-image:url("assets/img/btn_plus.webp?v=109")}
#stage.portrait #panel .buyBet button{width:76px;height:76px;flex-basis:76px}
#panel .buyBet b{color:#d9c49a;opacity:.9;font-family:"Cinzel",Georgia,serif}
#panel .buyBet i{color:#fff1d0;font-family:"Cinzel",Georgia,serif;font-variant-numeric:tabular-nums}
#panel .buyOpt{border:0 solid transparent;border-radius:0!important;background:none;box-shadow:none;
  border-image:url("assets/img/ui_card_dark.webp?v=109") 70 fill / 22px / 0 stretch;overflow:visible}
#panel .buyOpt.selected{border-image-source:url("assets/img/ui_card_red.webp?v=109");box-shadow:none;
  filter:drop-shadow(0 0 12px rgba(255,170,80,.45))}
#panel .buyOpt::before{display:none}
#panel .buyOpt img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,196,96,.35))}
#panel .buyOpt b{font-family:"Cinzel",Georgia,serif;font-weight:900;color:#f6e3b4}
#panel .buyOpt i{color:#e5d3ae;opacity:.82}
#panel .buyOpt .price{font-family:"Cinzel",Georgia,serif;color:#f6cf6c;text-shadow:0 2px 4px rgba(0,0,0,.8)}
#panel .buyOpt.poor .price{color:#9a8a70}
#panel .buyOpt.poor .price u{color:#e68a7a}
#stage.portrait #panel .buyOpt{padding:16px 26px}
#stage.portrait #panel .buyOpt b{font-size:22px}
#stage.portrait #panel .buyOpt i{font-size:16px}
#stage .buyApply{height:66px;border-image-width:0 33px;font-size:19px}
#stage .buyApply[disabled]{opacity:.75;filter:none;border-image-width:0 43px}
#stage.portrait .buyApply{height:96px;font-size:26px;border-image-width:0 48px}
#stage.portrait .buyApply[disabled]{border-image-width:0 64px;font-size:22px}

/* rules: Cinzel heads, serif text, gold hairlines */
#pop h3.sec{font-family:"Cinzel",Georgia,serif;color:#f2c45a;opacity:1;letter-spacing:.2em;
  text-align:center;margin:22px 0 10px}
#stage.portrait #pop h3.sec{font-size:19px}
#pop .rules{font-family:Georgia,"Times New Roman",serif;color:#efe3cc;opacity:.95}
#stage.portrait #pop .rules{font-size:19px;line-height:1.55}
#pop .rules em{color:#f6cf6c}
#pop table.pt td,#pop table.pt th{border-bottom:1px solid rgba(242,196,90,.14);color:#f1e3c4}
#pop table.pt th{color:#d9c49a;opacity:.9}
#pop table.pt td:first-child{font-family:"Cinzel",Georgia,serif;font-weight:700}
#stage.portrait #pop table.pt{font-size:18px}
#stage.portrait #pop table.pt img{height:40px}

/* the purchase card */
#buyFxTag{color:#d9c49a!important;font-family:"Cinzel",Georgia,serif}
#buyFxName{font-family:"Cinzel",Georgia,serif;color:#f6cf6c!important;text-shadow:0 2px 6px rgba(0,0,0,.8)}
#buyFxCost{color:#fff1d0!important;font-family:"Cinzel",Georgia,serif}
/* an older #ntNo rule sets its border with !important, which also resets the border image */
#ntBtns #ntNo{border-image:url("assets/img/ui_pill_lacquer.webp?v=109") 0 140 fill / 0 30px / 0 stretch!important}
#stage.portrait #ntBtns #ntNo{border-image-width:0 48px!important}
/* the purchase card keeps clear of the screen edges; long names wrap inside it */
#stage.portrait #buyFxCard{width:560px;max-width:84%;box-sizing:border-box;padding:56px 60px 48px!important;border-image-width:110px}
#stage.portrait #buyFxName{font-size:42px}

/* the message line and the feature strip: the plaque scaled evenly (its blossom ends keep their
   shape), only the black middle stretches; sized for a phone */
#winBox{border-width:12px 26px;border-image-width:12px 26px;min-width:260px;padding:0 14px;gap:14px}
#winBox b{font-size:14px;letter-spacing:.16em}
#winBox span{font-size:22px}
#stage.portrait #winBox{border-width:13px 29px;border-image-width:13px 29px;min-width:420px;padding:0 20px;gap:18px}
#stage.portrait #winBox b{font-size:18px}
#stage.portrait #winBox span{font-size:30px}
#strip,#fsbar{border-width:11px 25px;border-image-width:11px 25px}
#stage.portrait #strip{font-size:19px}
#stage.portrait #fsbar{font-size:21px;gap:22px}
/* the lantern catch: the strip and the free-spins bar step aside for the canvas counter */
#strip,#fsbar{transition:opacity .2s}
#stage.catch #strip,#stage.catch #fsbar{opacity:0}

/* the curtain total: the dark plate under the amount fades out inside the card, so no edge shows */
#bwCard{background:radial-gradient(closest-side,rgba(10,6,3,.78),rgba(10,6,3,.5) 55%,rgba(10,6,3,0))!important;
  padding:70px 60px!important}

/* a control that is off for now stays gold, only darker (no grey or white) */
/* a round in play dims them only a little: a darker button for most of the session read as broken */
#buyBtn.disabled{opacity:1;filter:brightness(.82)}
.pbtn.disabled,.rbtn.disabled{filter:brightness(.82)}
#stage.portrait #strip{font-size:17px;letter-spacing:.04em}
/* the strip's lines crossfade */
#strip span{transition:opacity .16s ease}
#strip span.out{opacity:0}

/* the win plate: fades and settles in, fades out; COLLECT rises in once the count is done */
#bigwin.show{animation:bwIn .45s ease-out both}
#bigwin.show #bwCard{animation:bwCardIn .6s cubic-bezier(.2,1.25,.4,1) both}
#bigwin.out{animation:bwOut .5s ease-in forwards}
@keyframes bwIn{from{opacity:0}to{opacity:1}}
@keyframes bwOut{from{opacity:1}to{opacity:0}}
@keyframes bwCardIn{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
#bwCollect.reveal{animation:bwCollectIn .45s ease-out both}
@keyframes bwCollectIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

/* Act II entry: the panel and START rise in while the screens open; the scenes breathe slowly */
#entry:not(.hidden) .ePanel{animation:ePanelIn .8s .85s cubic-bezier(.2,1.1,.4,1) both}
#entry:not(.hidden) #entryGo{animation:ePanelIn .7s 1.15s cubic-bezier(.2,1.1,.4,1) both}
@keyframes ePanelIn{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
#entry:not(.hidden),#dawn:not(.hidden){animation:sceneBreath 7s ease-out both}
@keyframes sceneBreath{from{scale:1.07}to{scale:1}}
#stage.portrait #bwTitle{font-size:24px;color:#f6e3b4;letter-spacing:.3em;text-shadow:0 2px 8px rgba(0,0,0,.9)}

/* a button never looks blocked. During a round a tap is simply refused (the
   handlers check S.busy and play SFX.denied); SPIN stays live because it skips the round. */
#stage .pbtn.disabled{pointer-events:auto;opacity:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
#stage #buyBtn.disabled{pointer-events:auto;opacity:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.7))}
#stage .rbtn.disabled{pointer-events:auto;filter:none}
#stage #spinBtn.busy{filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,190,90,.35))}
/* the purchase card fades out before the curtain */
#buyFx.out{animation:buyFxOut .45s ease forwards}
@keyframes buyFxOut{from{opacity:1}to{opacity:0}}

/* ===== the win plate: a small panel in the game's own frame (nine-slice + flower), the amount in
   gold, COLLECT as the gold pill; the coin shower flies on its own canvas between the picture and
   the plate ======================================================================================= */
#bwCoins{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#bigwin{background:rgba(6,3,2,.62) url("assets/img/bigwin.webp?v=109") center/cover no-repeat}
#bigwin #bwCard{position:relative;z-index:1;box-sizing:border-box;text-align:center;
  width:auto!important;min-width:400px;max-width:86%;
  background:none!important;border-style:solid!important;border-color:transparent!important;border-width:0!important;
  border-radius:0!important;border-image:url("assets/img/ui_frame.webp?v=109") 364 fill / 84px / 0 stretch;
  padding:54px 56px 40px!important;box-shadow:0 30px 80px rgba(0,0,0,.65)!important}
#bigwin #bwCard::before{content:"";position:absolute;z-index:2;top:0;left:50%;width:150px;height:36px;
  transform:translateX(-50%);background:url("assets/img/ui_crest.webp?v=109") center/100% 100% no-repeat}
#stage.portrait #bigwin #bwCard{min-width:560px;border-image-width:110px;padding:72px 64px 54px!important}
#stage.portrait #bigwin #bwCard::before{width:190px;height:46px}
#bigwin #bwTitle{font-family:"Cinzel",Georgia,serif;font-weight:700;color:#f1e3c4;letter-spacing:.26em;
  text-shadow:0 2px 6px rgba(0,0,0,.9);margin-bottom:4px}
#bigwin #bwTier{font-family:"Cinzel",Georgia,serif;font-weight:900;color:#f6cf6c;letter-spacing:.12em;
  text-shadow:0 0 18px rgba(255,190,90,.55),0 3px 6px rgba(0,0,0,.9)}
#bigwin #bwAmount{font-family:"Cinzel",Georgia,serif;font-weight:900;font-variant-numeric:tabular-nums;
  background:linear-gradient(#fff8e2,#f6cf6c 52%,#c98a2c);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 rgba(60,24,4,.9)) drop-shadow(0 6px 14px rgba(0,0,0,.8));
  text-shadow:none}
#stage.portrait #bigwin #bwAmount{font-size:80px}
#bigwin #bwCollect{display:block;margin:20px auto 0;width:78%;height:76px;font-size:24px;cursor:pointer;
  background:none!important;box-shadow:none!important;border-style:solid!important;border-color:transparent!important;
  border-width:0!important;border-radius:0!important;
  border-image:url("assets/img/ui_pill_gold.webp?v=109") 0 132 fill / 0 38px / 0 stretch;
  font-family:"Cinzel",Georgia,serif;font-weight:900;letter-spacing:.16em;color:#2a1405;text-shadow:0 1px 0 rgba(255,244,214,.55)}
#stage.portrait #bigwin #bwCollect{height:92px;font-size:28px;border-image-width:0 46px}
#bigwin #bwCollect:active{scale:.95}
#bigwin #bwHint{font-family:"Cinzel",Georgia,serif;color:#d9c49a;opacity:.7}
/* buy panel: an option you cannot afford or a bet step at its end is dimmed only a little,
   in its own colours (controls never look grey or blocked) */
#panel .buyOpt.poor{opacity:1;filter:brightness(.82)}
#panel .buyBet button:disabled{opacity:1;filter:brightness(.82);pointer-events:auto}
#stage .buyApply[disabled]{opacity:1;filter:brightness(.9)}
/* the strip's line sits inside the plaque's middle and never wraps; strip.js shrinks it to fit */
#strip span{display:block;white-space:nowrap;overflow:hidden;max-width:100%;text-align:center}

/* ===== QA pass =========================================================================== */
/* SPIN halo: a radial gradient instead of an animated box-shadow, which WebKit drew as a square
   box under the parent's drop-shadow filter; it breathes only while SPIN is idle */
#spinBtn::after{box-shadow:none!important;inset:-14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,196,96,.55),rgba(255,170,60,.22) 62%,rgba(255,150,40,0));
  animation:haloFade 2.4s ease-in-out 6 both}
/* the purchase card: a warm veil, the act still glowing behind it (not a black screen) */
#buyFx{background:radial-gradient(ellipse 75% 45% at 50% 50%,rgba(40,16,6,.55),rgba(12,6,3,.35) 70%,rgba(8,4,2,.25))!important}
/* button labels in the game's face, not the system font */
.pbtn em{font-family:"Cinzel",Georgia,serif}
/* the rules' last line clears the MORE BELOW cue */
#popBody{padding-bottom:64px!important}
#stage.portrait #popBody{padding-bottom:96px!important}

/* START on the title picture: the same painted gold pill as COLLECT after an act (one style for both) */
#ldGo{min-width:0;width:min(72vw,300px);height:62px;padding:0 34px;cursor:pointer;
  background:none!important;box-shadow:none!important;border-style:solid!important;border-color:transparent!important;
  border-width:0!important;border-radius:0!important;
  border-image:url("assets/img/ui_pill_gold.webp?v=109") 0 132 fill / 0 31px / 0 stretch;
  font-family:"Cinzel",Georgia,serif;font-size:24px;font-weight:900;letter-spacing:.18em;color:#2a1405;
  text-shadow:0 1px 0 rgba(255,244,214,.55);
  animation:goGlow 2.2s ease-in-out infinite}
@keyframes goGlow{0%,100%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,200,100,.35))}
  50%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,200,100,.75))}}
#ldGo:active{scale:.95}
/* Stake build: the build badge is a portal aid only */
body.stk #badge{display:none}

/* EXTRA WILD MODE: the bet plaque says the mode and the price of a spin in it, in crimson light */
#betBox.mode b{color:#ffb48a;letter-spacing:.08em}
#betBox.mode span{color:#ffd7b0;text-shadow:0 0 10px rgba(255,120,60,.8),0 2px 6px rgba(0,0,0,.8)}
#betBox.mode{filter:drop-shadow(0 0 10px rgba(230,70,40,.65))}
#stage.portrait #betBox.mode b{font-size:11px}
#panel .buyOpt.active{border-image-source:url("assets/img/ui_card_red.webp?v=109")}
#panel .buyOpt .price u.per{color:#e5d3ae;font-weight:600}