*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05040f;color:#fff;
  font-family:"Arial Black","Segoe UI Black","Helvetica Neue",Arial,Impact,sans-serif;font-weight:900;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hidden{display:none!important}
:root{--cy:#3ad7ff;--pk:#ff3fd2;--pu:#9b4dff;--gd:#ffcf4a}

/* ---------- stage / cabinet ---------- */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 20% 30%,#1a1150 0,transparent 55%),radial-gradient(ellipse at 80% 70%,#3a0b4a 0,transparent 55%),
  linear-gradient(#060515,#0b0724 60%,#05040f)}
#stage::before{content:"";position:absolute;inset:0;background:url(assets/cabinet.webp) center/cover;filter:blur(18px) brightness(.45);transform:scale(1.1)}
#app{position:relative;width:576px;flex:none;transform-origin:center center;display:flex;flex-direction:column;align-items:center;
  padding:12px 26px 10px}
.cab-bg{position:absolute;inset:0;background:url(assets/cabinet.webp) center/100% 100% no-repeat;border-radius:30px;pointer-events:none}
.cab-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07) 0,transparent 30%,transparent 70%,rgba(255,255,255,.04));border-radius:30px}
#app>*{position:relative}

/* jackpot */
.jp{display:flex;flex-direction:column;align-items:center;margin-top:6px;z-index:2}
.jp-label{font-size:15px;letter-spacing:2px;color:#e9e6ff;text-shadow:0 0 6px var(--cy);padding:3px 18px;border-radius:12px 12px 0 0;
  background:linear-gradient(#1b1848,#0c0a26);border:2px solid #5aa8ff;border-bottom:0;box-shadow:0 0 12px rgba(58,215,255,.5)}
.jp-label .dia{color:var(--cy);font-size:12px}
.jp-box{min-width:300px;text-align:center;padding:6px 22px 8px;border-radius:14px;background:linear-gradient(#170726,#0a0416);
  border:3px solid var(--pk);box-shadow:0 0 18px var(--pk),inset 0 0 18px rgba(255,63,210,.45);font-size:44px;line-height:1;
  color:#ffd6f7;text-shadow:0 0 6px #ff6be0,0 0 16px var(--pk),0 0 30px var(--pk);font-variant-numeric:tabular-nums}
.jp-box small{font-size:16px;margin-left:8px;letter-spacing:1px}
.jp-box.pulse{animation:jpp .5s}
@keyframes jpp{50%{transform:scale(1.05);filter:brightness(1.4)}}

/* title */
.title-wrap{flex:1 1 auto;min-height:150px;width:100%;display:flex;align-items:center;justify-content:center;overflow:visible}
.title{height:100%;max-height:300px;width:auto;max-width:108%;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);
  filter:drop-shadow(0 0 10px rgba(255,63,210,.35));animation:tglow 3s ease-in-out infinite}
@keyframes tglow{50%{filter:drop-shadow(0 0 18px rgba(58,215,255,.55)) brightness(1.1)}}

/* reels */
.reels-wrap{width:540px;padding:12px 11px;border-radius:22px;flex:none;margin-top:2px;
  background:linear-gradient(180deg,rgba(14,12,40,.92),rgba(8,6,24,.95));
  box-shadow:0 0 0 3px #2b2f6a,0 0 0 5px rgba(58,215,255,.6),0 0 26px rgba(58,215,255,.45),0 0 40px rgba(255,63,210,.25),inset 0 0 30px #000}
.reels{display:flex;gap:7px;height:306px}
.reel{position:relative;width:98px;height:306px;overflow:hidden;border-radius:12px;
  background:radial-gradient(ellipse at 50% 40%,#16123f,#07061a 75%);
  box-shadow:inset 0 0 0 2px rgba(58,215,255,.55),0 0 10px rgba(58,215,255,.35),inset 0 0 18px #000}
.reel:nth-child(even){box-shadow:inset 0 0 0 2px rgba(255,63,210,.6),0 0 10px rgba(255,63,210,.35),inset 0 0 18px #000}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 82%,rgba(0,0,0,.55)),
  linear-gradient(100deg,rgba(255,255,255,.13),rgba(255,255,255,0) 40%)}
.strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.strip.blur{filter:blur(2.6px) brightness(1.1)}
.cell{position:relative;width:98px;height:102px;display:flex;align-items:center;justify-content:center}
.cell img{width:94px;height:94px;border-radius:12px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 72%)}
.cell.lo img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 64%,transparent 74%);mask-image:radial-gradient(circle at 50% 50%,#000 64%,transparent 74%)}
.cell .lbl{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.3px;
  padding:2px 7px;border-radius:9px;background:rgba(6,6,28,.88);border:1.5px solid var(--c,#3ad7ff);color:#fff;
  text-shadow:0 0 5px var(--c,#3ad7ff);box-shadow:0 0 8px var(--c,#3ad7ff)}
.cell.win{z-index:2}
.cell.win img{animation:winpulse .7s ease-in-out infinite alternate}
.cell.win::before{content:"";position:absolute;inset:3px;border-radius:14px;border:3px solid var(--gd);
  box-shadow:0 0 14px var(--gd),inset 0 0 14px rgba(255,207,74,.6);animation:winpulse .7s ease-in-out infinite alternate}
.cell.scat::before{border-color:var(--pu);box-shadow:0 0 18px var(--pu),inset 0 0 14px rgba(155,77,255,.7)}
@keyframes winpulse{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.07);filter:brightness(1.35)}}
#lines{position:absolute;left:11px;top:12px;width:518px;height:306px;pointer-events:none;overflow:visible}
#lines polyline{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px currentColor)}
#callout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:5;
  font-size:30px;white-space:nowrap;padding:10px 24px;border-radius:30px;background:rgba(10,6,30,.92);border:3px solid var(--pk);
  color:#fff;text-shadow:0 0 8px var(--pk),0 0 18px var(--pk);box-shadow:0 0 24px var(--pk),inset 0 0 14px rgba(255,63,210,.5);transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
#callout.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#callout.cy{border-color:var(--cy);text-shadow:0 0 8px var(--cy),0 0 18px var(--cy);box-shadow:0 0 24px var(--cy),inset 0 0 14px rgba(58,215,255,.5)}
#callout.gd{border-color:var(--gd);color:#fff6d0;text-shadow:0 0 8px var(--gd),0 0 18px #ff9d00;box-shadow:0 0 24px var(--gd),inset 0 0 14px rgba(255,207,74,.5)}
#callout small{display:block;font-size:17px;text-align:center;color:#ffe9a8;margin-top:2px}

/* panels */
.panel{border-radius:16px;background:linear-gradient(180deg,rgba(18,22,60,.92),rgba(8,8,28,.95));
  box-shadow:0 0 0 2px rgba(58,215,255,.75),0 0 16px rgba(58,215,255,.45),inset 0 0 18px rgba(58,215,255,.15)}
.p-head{font-size:13px;letter-spacing:1px;color:#e8f6ff;text-shadow:0 0 6px var(--cy);text-align:center}
.p-sub{font-size:10px;letter-spacing:.5px;color:#bfe9ff;text-align:center;margin-top:4px}
.mid{display:flex;width:540px;gap:12px;margin-top:14px;height:128px;flex:none;align-items:center}
.moose-panel{width:156px;height:120px;position:relative;overflow:hidden;box-shadow:0 0 0 2px #2fe07a,0 0 16px rgba(47,224,122,.5);background:#0a1a10}
.moose-panel img{position:absolute;inset:-6px 0 0 0;width:100%;height:118%;object-fit:cover}
.moose-label{position:absolute;bottom:4px;left:6px;right:6px;font-size:10px;line-height:1.05;text-align:center;padding:2px 4px;border-radius:6px;
  background:rgba(0,0,0,.75);border:1.5px solid #2fe07a;text-shadow:0 0 5px #2fe07a}
.moose-panel.dance img{animation:moose .35s ease-in-out 4 alternate}
@keyframes moose{from{transform:rotate(-5deg) scale(1.02)}to{transform:rotate(5deg) scale(1.08)}}
.wild-panel{flex:1;height:128px;display:flex;align-items:center;justify-content:center}
.wild-panel img{height:150px;width:auto;margin:-12px 0;-webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 46% at 50% 50%,#000 70%,transparent 100%);
  animation:wildg 2.4s ease-in-out infinite}
@keyframes wildg{50%{filter:brightness(1.25) drop-shadow(0 0 12px #ffb300);transform:scale(1.03)}}
.boost-panel{width:156px;height:120px;padding:9px 8px}
.boost-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:6px;height:54px}
.bars{display:flex;gap:3px;align-items:flex-end;height:44px}
.bars i{width:8px;border-radius:2px;background:#27325e}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:48%}.bars i:nth-child(3){height:64%}.bars i:nth-child(4){height:82%}.bars i:nth-child(5){height:100%}
.bars i.on{background:linear-gradient(#7fe8ff,#6b4dff);box-shadow:0 0 6px var(--cy)}
.ring{--p:0;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:radial-gradient(#0b0b26 58%,transparent 60%),conic-gradient(var(--cy) calc(var(--p)*1%),#232a55 0);filter:drop-shadow(0 0 5px var(--cy));text-shadow:0 0 6px var(--cy)}

.bottom{display:flex;width:540px;gap:10px;margin-top:14px;align-items:center;height:160px;flex:none}
.pts-panel,.bet-panel{width:184px;height:150px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.bet-panel{box-shadow:0 0 0 2px rgba(255,63,210,.75),0 0 16px rgba(255,63,210,.45),inset 0 0 18px rgba(255,63,210,.15)}
.bet-panel .p-head{text-shadow:0 0 6px var(--pk)}
.pts-row{display:flex;align-items:center;gap:8px;font-size:31px;color:#bff3ff;text-shadow:0 0 8px var(--cy),0 0 16px var(--cy);font-variant-numeric:tabular-nums}
.chip-ico{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;font-size:13px;
  border:3px dashed #9fe9ff;color:#fff;box-shadow:0 0 8px var(--cy)}
.pill{font-size:13px;padding:6px 16px;border-radius:14px;border:2px solid var(--cy);background:rgba(10,20,50,.8);
  text-shadow:0 0 6px var(--cy);box-shadow:0 0 8px rgba(58,215,255,.5)}
.pill:disabled{opacity:.35;cursor:default}
#refill:not(:disabled){animation:refill 1s ease-in-out infinite;border-color:var(--gd);text-shadow:0 0 8px var(--gd)}
@keyframes refill{50%{transform:scale(1.1);box-shadow:0 0 18px var(--gd)}}
.bet-row{display:flex;align-items:center;gap:10px;font-size:28px;text-shadow:0 0 8px #fff}
.sq{width:36px;height:36px;border-radius:9px;border:2px solid #d9d9ff;font-size:24px;line-height:1;background:rgba(30,20,60,.8);box-shadow:0 0 8px rgba(255,255,255,.35)}
.sq:active{transform:scale(.92)}
#bet{min-width:62px;text-align:center;font-variant-numeric:tabular-nums}
.win-box{width:100%;border-radius:10px;padding:3px 0 4px;background:rgba(40,6,40,.6);border:2px solid rgba(255,63,210,.7);text-align:center;box-shadow:0 0 10px rgba(255,63,210,.4)}
#win{font-size:24px;color:#ffc4f3;text-shadow:0 0 8px var(--pk),0 0 16px var(--pk);font-variant-numeric:tabular-nums}
#spin{position:relative;flex:1;height:150px;width:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#2a4da8 0,#0c1a52 45%,#060a26 70%);
  box-shadow:0 0 0 4px #6fe6ff,0 0 0 9px #1a2a6a,0 0 0 11px rgba(255,63,210,.8),0 0 30px var(--cy),0 0 50px rgba(255,63,210,.5),inset 0 0 30px rgba(58,215,255,.6),inset 0 -10px 30px rgba(0,0,0,.6);
  animation:spinglow 1.8s ease-in-out infinite;max-width:150px}
#spin::before{content:"";position:absolute;left:16%;right:16%;top:8%;height:36%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0))}
.spin-txt{font-size:42px;letter-spacing:1px;color:#e9fbff;text-shadow:0 0 8px var(--cy),0 0 20px var(--cy),0 0 36px #3a7bff}
.chev{font-size:22px;color:#9fe9ff;text-shadow:0 0 8px var(--cy);margin-top:-4px}
#spin:active{transform:scale(.95)}
#spin.busy{filter:saturate(.6) brightness(.8);animation:none}
@keyframes spinglow{50%{box-shadow:0 0 0 4px #9ff0ff,0 0 0 9px #1a2a6a,0 0 0 11px rgba(255,63,210,1),0 0 46px var(--cy),0 0 70px rgba(255,63,210,.7),inset 0 0 36px rgba(58,215,255,.8),inset 0 -10px 30px rgba(0,0,0,.6)}}
.icons{display:flex;gap:16px;margin-top:12px;flex:none}
.icons button{width:54px;height:42px;border-radius:10px;font-size:20px;background:rgba(14,14,44,.85);border:2px solid rgba(120,130,255,.7);box-shadow:0 0 10px rgba(110,120,255,.45);font-family:Arial,sans-serif;font-weight:700}
.icons button.off{opacity:.5}

/* ---------- start ---------- */
#start{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;cursor:pointer;
  background:radial-gradient(ellipse at 50% 40%,rgba(40,20,90,.85),rgba(4,3,14,.97) 70%)}
#start img{width:min(90vw,520px);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
.st-tap{font-size:clamp(26px,7vw,44px);padding:14px 34px;border-radius:40px;border:3px solid var(--cy);text-shadow:0 0 10px var(--cy),0 0 24px var(--cy);
  box-shadow:0 0 24px var(--cy),inset 0 0 16px rgba(58,215,255,.5);animation:tapp 1.2s ease-in-out infinite}
@keyframes tapp{50%{transform:scale(1.07)}}
.st-note{font-family:Arial,sans-serif;font-weight:700;font-size:13px;color:#aab;letter-spacing:.5px}

/* ---------- fx ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------- big win ---------- */
#bigwin{position:fixed;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;background:radial-gradient(rgba(60,20,0,.55),rgba(0,0,0,.8));cursor:pointer;animation:fadein .3s}
.bw-inner{text-align:center;padding:0 18px;animation:bwpop .6s cubic-bezier(.3,1.7,.5,1)}
.bw-title{font-size:clamp(54px,16vw,120px);line-height:1;background:linear-gradient(#fff7c2,#ffd23c 40%,#ff9a00 60%,#ffe680);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #6b2a00;filter:drop-shadow(0 0 14px #ffb300) drop-shadow(0 6px 0 #4a1800);animation:bwshake 1s ease-in-out infinite}
.bw-amt{font-size:clamp(40px,11vw,80px);margin-top:10px;color:#fff;text-shadow:0 0 10px var(--pk),0 0 26px var(--pk);font-variant-numeric:tabular-nums}
.bw-amt::after{content:" PTS";font-size:.4em}
.bw-sub{font-size:clamp(20px,5.5vw,34px);margin-top:12px;color:#bff3ff;text-shadow:0 0 10px var(--cy)}
.bw-tap{font-family:Arial,sans-serif;font-size:14px;color:#ccc;margin-top:22px;opacity:.8}
@keyframes bwpop{from{transform:scale(.2);opacity:0}}
@keyframes bwshake{50%{transform:scale(1.06) rotate(-1.5deg)}}
@keyframes fadein{from{opacity:0}}

/* ---------- paytable ---------- */
#paytable{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:14px}
.pt-card{width:min(440px,100%);max-height:100%;overflow:auto;padding:16px;border-radius:18px;background:linear-gradient(#141245,#08071d);border:2px solid var(--cy);box-shadow:0 0 24px rgba(58,215,255,.5);text-align:center}
.pt-card h2{font-size:24px;text-shadow:0 0 10px var(--pk);margin-bottom:8px}
#ptList{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pt-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border-radius:10px;padding:4px;font-size:12px;text-align:left}
.pt-row img{width:44px;height:44px;border-radius:8px}
.pt-note{font-family:Arial,sans-serif;font-weight:400;font-size:12.5px;line-height:1.5;color:#cfd3ff;margin:10px 0}

/* ---------- bonus ---------- */
#bonus{position:fixed;inset:0;z-index:30;overflow:hidden;background:#05040f;animation:fadein .4s}
.b-fill{position:absolute;inset:-30px;background:url(assets/bonus.webp) center/cover;filter:blur(16px) brightness(.5)}
.b-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,177.78vh);aspect-ratio:16/9;container-type:inline-size;overflow:hidden}
.b-art{position:absolute;inset:0;background:url(assets/bonus.webp) center/cover}
.b-title{position:absolute;left:50%;top:1%;transform:translateX(-50%);text-align:center;z-index:2}
.b-allin{font-size:7.4cqw;line-height:1;white-space:nowrap;background:linear-gradient(#fff6b0,#ffd23c 45%,#ff9500 60%,#ffe06a);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.18cqw #5a2200;filter:drop-shadow(0 0 1cqw #ffae00) drop-shadow(0 .5cqw 0 #3a1200);animation:slam .7s cubic-bezier(.3,1.6,.5,1)}
.b-x10{display:inline-block;margin-top:.6cqw;padding:.4cqw 3.4cqw;font-size:6.4cqw;line-height:1.1;color:#fff;
  clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);background:linear-gradient(#5a1b8a,#22093f);
  text-shadow:0 0 1cqw #ffd23c,0 0 2cqw #ff9500;box-shadow:inset 0 0 0 .4cqw #c48bff;animation:slam .9s cubic-bezier(.3,1.6,.5,1)}
.b-x10.boom{animation:boom .6s}
@keyframes slam{from{transform:scale(3);opacity:0}}
@keyframes boom{40%{transform:scale(1.5);filter:brightness(2)}}
.bubble{position:absolute;z-index:3;background:#fff;color:#141414;border-radius:50%/42%;padding:1.6cqw 2.2cqw;font-family:"Comic Sans MS","Chalkboard SE","Trebuchet MS",Arial,sans-serif;font-weight:800;
  font-size:2.7cqw;line-height:1.15;text-align:center;box-shadow:0 .4cqw 0 rgba(0,0,0,.4);animation:pop .5s cubic-bezier(.3,1.7,.5,1) both;transform-origin:bottom center}
.bubble::after{content:"";position:absolute;bottom:-1.6cqw;border:1.2cqw solid transparent;border-top:2cqw solid #fff}
.bubble.bl{left:3%;top:6%;width:21%}.bubble.bl::after{right:22%}
.bubble.br{right:3%;top:9%;width:20%;animation-delay:.25s}.bubble.br::after{left:22%}
.bubble.say{animation:pop2 .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{from{transform:scale(0);opacity:0}}
@keyframes pop2{from{transform:scale(.6)}}
.plate{position:absolute;z-index:2;display:flex;flex-direction:column;padding:.7cqw 1.6cqw;border-radius:1cqw;background:rgba(14,6,34,.9);border:.25cqw solid #c48bff;box-shadow:0 0 1.4cqw #9b4dff}
.plate b{font-size:2.3cqw;letter-spacing:.1cqw}.plate i{font-style:normal;color:#ffd23c;font-size:1.9cqw;letter-spacing:.2cqw;text-shadow:0 0 .6cqw #ff9500}
.plate .sh{color:#b98bff}.plate .cr{color:#ffd23c}
.plate.pl{left:2%;top:58%}.plate.pr{right:2%;top:61%;border-color:var(--gd);box-shadow:0 0 1.4cqw #ffb300}
.holo{position:absolute;left:50%;top:58%;transform:translateX(-50%);width:30%;z-index:2;text-align:center;padding:.8cqw;border-radius:1.2cqw;
  background:linear-gradient(rgba(40,220,255,.2),rgba(40,220,255,.06));border:.2cqw solid rgba(90,230,255,.8);box-shadow:0 0 2cqw rgba(58,215,255,.6),inset 0 0 1.5cqw rgba(58,215,255,.35)}
.holo-t{font-size:1.9cqw;color:#c8f8ff;text-shadow:0 0 .8cqw var(--cy)}
.holo-h{font-size:1.5cqw;color:#e8fbff;margin-top:.5cqw;text-shadow:0 0 .6cqw var(--cy);min-height:1.8cqw}
.cards{display:flex;justify-content:center;gap:1.2cqw;margin-top:.6cqw}
.card{width:6.2cqw;aspect-ratio:5/7;perspective:60cqw;cursor:pointer}
.card-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.card.flip .card-in{transform:rotateY(180deg)}
.card:not(.flip):hover .card-in{transform:translateY(-6%) rotate(-3deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:.7cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.card .b{background:repeating-linear-gradient(45deg,#3b0d6b 0 .5cqw,#25084a .5cqw 1cqw);border:.3cqw solid #e0b8ff;box-shadow:0 0 1cqw #9b4dff;color:#ffd23c;font-size:3cqw;text-shadow:0 0 .8cqw #ff9500}
.card .f{transform:rotateY(180deg);background:linear-gradient(#fff,#e9e6f6);color:#111;border:.3cqw solid var(--gd);box-shadow:0 0 1.4cqw var(--gd);padding:.3cqw;text-align:center}
.card .f .r{font-size:2.3cqw;line-height:1}.card .f .r.red{color:#d4002a}
.card .f .n{font-size:.95cqw;line-height:1.1;margin-top:.3cqw}.card .f .m{font-size:1.5cqw;color:#7a1bd6;margin-top:.2cqw}
.card.dim{opacity:.45;filter:grayscale(.6)}
.card.pick{transform:scale(1.12);transition:transform .3s}
.cards.wiggle .card:not(.flip){animation:wig 1.2s ease-in-out infinite}
.cards.wiggle .card:nth-child(2){animation-delay:.2s}.cards.wiggle .card:nth-child(3){animation-delay:.4s}
@keyframes wig{0%,100%{transform:none}25%{transform:translateY(-5%) rotate(-3deg)}75%{transform:translateY(-2%) rotate(3deg)}}
.b-round{position:absolute;left:2%;bottom:4%;width:20%;z-index:2;display:flex;flex-direction:column;align-items:center;padding:1cqw;border-radius:1.2cqw;
  background:rgba(30,6,50,.9);border:.3cqw solid var(--pk);box-shadow:0 0 1.6cqw var(--pk),inset 0 0 1cqw rgba(255,63,210,.4)}
.b-round b{font-size:2.3cqw;color:#ffc6f4;text-shadow:0 0 .8cqw var(--pk)}.b-round i{font-style:normal;font-size:1.5cqw;color:#bfeaff;margin-top:.3cqw}
.b-pot{position:absolute;right:2%;bottom:3%;width:19%;z-index:2;display:flex;flex-direction:column;align-items:center;padding:.8cqw;border-radius:1.2cqw;
  background:rgba(30,6,50,.9);border:.3cqw solid #c48bff;box-shadow:0 0 1.6cqw #9b4dff}
.b-pot i{font-style:normal;font-size:1.9cqw;color:#ffe9a8}.b-pot b{font-size:4.2cqw;line-height:1.05;color:#ffd23c;text-shadow:0 0 1cqw #ff9500;font-variant-numeric:tabular-nums}
.b-big{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);z-index:2;white-space:nowrap;padding:1cqw 3cqw;font-size:3.6cqw;color:#fff;border-radius:1.4cqw;
  clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);background:linear-gradient(#4b2a00,#1e0e00);box-shadow:inset 0 0 0 .4cqw #ffc43a;
  text-shadow:0 0 1cqw #ffd23c,0 .3cqw 0 #6b3500;transition:transform .2s}
.b-big span{color:#ffd23c}
.b-big:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
.b-big:not(:disabled){animation:bigp .8s ease-in-out infinite}
@keyframes bigp{50%{transform:translateX(-50%) scale(1.1);filter:brightness(1.3)}}

/* phone portrait bonus layout */
@media (orientation:portrait){
  .b-stage{inset:0;left:0;top:0;transform:none;width:100%;height:100%;aspect-ratio:auto}
  .b-art{inset:auto;left:-9%;width:118%;top:21%;aspect-ratio:16/9;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 88%,transparent)}
  .b-title{top:2%}
  .b-allin{font-size:12.5cqw;-webkit-text-stroke:.35cqw #5a2200}
  .b-x10{font-size:11cqw;padding:.6cqw 6cqw;box-shadow:inset 0 0 0 .8cqw #c48bff}
  .bubble{font-size:4.6cqw;padding:2.4cqw 3cqw}
  .bubble.bl{left:2%;top:20%;width:42%}.bubble.br{right:2%;top:21.5%;width:40%}
  .bubble::after{bottom:-3cqw;border-width:2.2cqw;border-top-width:3.4cqw}
  .plate{padding:1.2cqw 2.6cqw;border-radius:2cqw;border-width:.5cqw}
  .plate b{font-size:4.4cqw}.plate i{font-size:3.6cqw}
  .plate.pl{left:3%;top:calc(21% + 52cqw)}.plate.pr{right:3%;top:calc(21% + 54cqw)}
  .holo{top:calc(21% + 70cqw);width:88%;padding:2cqw;border-radius:3cqw}
  .holo-t{font-size:5cqw}.holo-h{font-size:4cqw;min-height:5cqw;margin-top:1.4cqw}
  .cards{gap:4cqw;margin-top:2cqw}
  .card{width:21cqw}
  .card .f,.card .b{border-radius:2cqw}.card .b{font-size:9cqw;border-width:.8cqw}
  .card .f{border-width:.8cqw}.card .f .r{font-size:7cqw}.card .f .n{font-size:2.9cqw}.card .f .m{font-size:4.4cqw}
  .b-round{left:3%;bottom:14.5%;width:45%;padding:2.4cqw;border-radius:3cqw;border-width:.6cqw}
  .b-round b{font-size:5cqw}.b-round i{font-size:3.6cqw}
  .b-pot{right:3%;bottom:13.5%;width:45%;padding:1.6cqw;border-radius:3cqw;border-width:.6cqw}
  .b-pot i{font-size:3.8cqw}.b-pot b{font-size:8cqw}
  .b-big{bottom:2.5%;font-size:8cqw;padding:2.4cqw 7cqw;box-shadow:inset 0 0 0 .8cqw #ffc43a}
}