/* 🎁 Bonus Center popup (js/bonus.js) + home offers slider. Same look as the Invite popup (it-ov / it-x come from invite.css). */
.bc-box{position:relative;width:min(560px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;border-radius:22px;color:#fff;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0,#7a1838,#3a0718 55%,#24030e);border:3px solid #8a2bd8;box-shadow:0 0 0 2px #f5c518 inset,0 24px 60px rgba(0,0,0,.7),0 0 40px rgba(138,43,216,.45);
  transform:scale(.92);transition:transform .25s cubic-bezier(.2,1.4,.4,1);font-family:var(--f-display,'Chakra Petch',sans-serif)}
.it-ov.show .bc-box{transform:none}
.bc-head{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 56px 6px}
.bc-head h2{margin:0;font-size:24px;font-weight:800;color:#ffe14d;-webkit-text-stroke:1px #7a2a00;paint-order:stroke fill;text-shadow:0 3px 0 #a33f00,0 6px 12px rgba(0,0,0,.5)}
.bc-head .it-x{top:6px;right:10px;width:38px;height:38px;font-size:24px}
.bc-tabs{display:flex;gap:6px;overflow-x:auto;padding:6px 10px 10px;scrollbar-width:none;flex:none}
.bc-tabs::-webkit-scrollbar{display:none}
.bc-tab{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px;padding:7px 6px;border-radius:14px;border:1.5px solid rgba(201,155,255,.45);background:linear-gradient(180deg,#4a1640,#2c0a22);color:#fff;cursor:pointer}
.bc-tab span{font-size:22px;line-height:1}
.bc-tab small{font:700 11px var(--f-display);white-space:nowrap}
.bc-tab.on{background:linear-gradient(180deg,#ffd84a,#ff9d00);border-color:#fff3b0;color:#3a1400;box-shadow:0 3px 0 #a24400}
.bc-dot{position:absolute;top:-4px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff2d55;border:2px solid #fff;font:700 10px/14px var(--f-mono,monospace);font-style:normal;color:#fff}
.bc-body{flex:1;min-height:0;overflow:auto;padding:4px 14px 16px;display:flex;flex-direction:column;gap:12px}
.bc-hero{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:2px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.bc-hero h3{margin:0 0 2px;font:800 19px var(--f-display);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.bc-hero p{margin:0;font:600 13px/1.35 var(--f-body,sans-serif);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bc-hero.red{background:linear-gradient(100deg,#e3263f,#b3122e 60%,#ff5a6e)}
.bc-hero.gold{background:linear-gradient(100deg,#ff9a1f,#ff7a00 60%,#ffb14a)}
.bc-hero.purple{background:linear-gradient(100deg,#7a3ae8,#5122c4 60%,#a77bff)}
.bc-hero.green{background:linear-gradient(100deg,#22c55e,#15803d 60%,#4ade80)}
.bc-hero.blue{background:linear-gradient(100deg,#2a8cff,#1460e6 60%,#4fb0ff)}
.bc-clock{font-size:44px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.bc-env{position:relative;flex:none;width:86px;height:104px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;
  background:linear-gradient(180deg,#ff3b3b,#c3121b);border:2px solid #ffd84a;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.bc-env-top{position:absolute;left:-2px;right:-2px;top:-2px;height:44px;border-radius:10px 10px 50% 50%;background:linear-gradient(180deg,#ff5a5a,#d81b25);border:2px solid #ffd84a;border-top:0}
.bc-env b{position:relative;z-index:1;display:grid;place-items:center;min-width:46px;height:46px;margin-bottom:6px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff3a0,#e8a400);color:#7a1020;font:800 14px var(--f-display);border:2px solid #fff;padding:0 4px}
.bc-env small{position:relative;font:800 11px var(--f-display);color:#ffe14d}
.bc-env.live{animation:bcShake .5s infinite alternate}
@keyframes bcShake{to{transform:rotate(-5deg) scale(1.04)}}
.bc-row{display:flex;align-items:center;gap:10px;justify-content:space-between;font:600 13px var(--f-body,sans-serif);color:#f3d6e6}
.bc-row .bc-bar{flex:1;max-width:60%}
.bc-bar{position:relative;height:18px;border-radius:10px;background:#5a2a12;box-shadow:inset 0 2px 3px rgba(0,0,0,.5);overflow:hidden}
.bc-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#7cf27c,#22b04a);border-radius:10px}
.bc-bar span{position:relative;display:block;text-align:center;font:600 11px/18px var(--f-mono,monospace);color:#fff;text-shadow:0 1px 1px #000}
.bc-count{font:800 26px var(--f-display);color:#ffe14d}
.bc-big{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:14px;background:rgba(0,0,0,.25);border:1.5px solid rgba(245,197,24,.5)}
.bc-big small{font:700 12px var(--f-display);letter-spacing:.1em;color:#e9d5ff;text-transform:uppercase}
.bc-big b{font:800 32px/1.1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
.bc-big.timer b{color:#56c8ff;letter-spacing:.06em}
.bc-big.win b{color:#ffe14d;-webkit-text-stroke:1px #7a2a00;paint-order:stroke fill;text-shadow:0 3px 0 #a33f00}
.bc-btn{display:grid;place-items:center;width:100%;min-height:50px;border-radius:999px;border:2px solid rgba(255,255,255,.8);color:#fff;font:800 18px var(--f-display);letter-spacing:.03em;text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#bfbfbf,#8c8c8c);box-shadow:0 4px 0 #5e5e5e;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.bc-btn:active:not(:disabled){transform:translateY(3px)}
.bc-btn:disabled{cursor:default;opacity:.85}
.bc-btn.red:not(:disabled){background:linear-gradient(180deg,#ff5a6e,#c3121b);box-shadow:0 4px 0 #6b0718,0 0 18px rgba(255,90,110,.5);animation:bcPulse 1s infinite}
.bc-btn.gold:not(:disabled){background:linear-gradient(180deg,#ffb23a,#f06a00);box-shadow:0 4px 0 #a24400;animation:bcPulse 1s infinite}
.bc-btn.purple:not(:disabled){background:linear-gradient(180deg,#8a3ef0,#5122c4);box-shadow:0 4px 0 #2a0d6e}
.bc-btn.green:not(:disabled){background:linear-gradient(180deg,#5ef08a,#18b04c);box-shadow:0 4px 0 #0b7a31;animation:bcPulse 1s infinite}
.bc-btn.blue:not(:disabled){background:linear-gradient(180deg,#56b0ff,#1460e6);box-shadow:0 4px 0 #0b3a8a;animation:bcPulse 1s infinite}
@keyframes bcPulse{50%{transform:scale(1.03)}}
.bc-note{margin:0;text-align:center;font:500 13px/1.45 var(--f-body,sans-serif);color:#e9c9da}
.bc-list{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid rgba(201,155,255,.35)}
.bc-list>b{font:700 13px var(--f-display);color:#ffd84a}
.bc-list>div{display:flex;justify-content:space-between;font:600 13px var(--f-body,sans-serif)}
.bc-list em{font-style:normal;color:#7cf27c;font-weight:800}
.bc-calc{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);border:1.5px solid rgba(245,197,24,.45);font:600 14px var(--f-body,sans-serif)}
.bc-calc b{text-align:right;font:800 16px var(--f-display)}
.bc-calc .eq{grid-column:1/-1;text-align:center;font-size:26px;color:#ffe14d;margin-top:4px}
/* bet wheel */
.bc-wheel{position:relative;width:min(240px,70vw);aspect-ratio:1;margin:0 auto}
.bc-disc{position:absolute;inset:0;border-radius:50%;border:6px solid #ffd84a;box-shadow:0 0 0 3px #7a2a00,0 10px 24px rgba(0,0,0,.6),inset 0 0 20px rgba(0,0,0,.35)}
.bc-disc span{position:absolute;left:50%;top:0;width:0;height:50%;transform-origin:0 100%}
.bc-disc span b{position:absolute;top:10%;left:0;transform:translateX(-50%);font:800 16px var(--f-display);color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.6)}
.bc-pin{position:absolute;left:50%;top:-12px;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #ffe14d;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5));z-index:2}
.bc-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--f-display);font-style:normal;color:#7a1020;background:radial-gradient(circle at 40% 30%,#fff3a0,#e8a400);border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.5)}
/* jackpot */
.bc-jp{display:flex;flex-direction:column;align-items:center;padding:16px 10px;border-radius:18px;background:radial-gradient(ellipse at 50% 0,#ffd84a33,transparent 60%),linear-gradient(180deg,#3a0d6e,#1e0514);border:3px solid #f5c518;box-shadow:0 0 30px rgba(255,191,31,.45)}
.bc-jp small{font:800 16px var(--f-display);letter-spacing:.2em;color:#ffd84a}
.bc-jpn{font:800 clamp(34px,10vw,52px)/1.1 var(--f-display);color:#ffe14d;-webkit-text-stroke:1.5px #7a2a00;paint-order:stroke fill;text-shadow:0 4px 0 #a33f00,0 0 24px rgba(255,216,74,.6);font-variant-numeric:tabular-nums}
/* inbox / news */
.bc-mail{padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(106,43,224,.35),rgba(60,18,110,.35));border:1px solid rgba(201,155,255,.45);display:flex;flex-direction:column;gap:6px}
.bc-mail.new{border-color:#ffd84a;box-shadow:0 0 0 1px #ffd84a}
.bc-mail.pin{border-color:#ff9d00}
.bc-mh{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.bc-mh b{font:800 15px var(--f-display)}
.bc-mh small{flex:none;font:500 11px var(--f-mono,monospace);color:#d9b3c9}
.bc-mail p{margin:0;font:500 13px/1.45 var(--f-body,sans-serif);color:#f3e3ec;white-space:pre-wrap}
.bc-got{font:700 13px var(--f-display);color:#7cf27c}
.bc-mail .bc-btn{min-height:40px;font-size:15px}
/* coins rain on a win */
.bc-coins{position:fixed;inset:0;pointer-events:none;z-index:9100;overflow:hidden}
.bc-coins i{position:absolute;top:-30px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#e8a400 60%,#a36a00);box-shadow:0 0 0 2px #7a4a00 inset;animation:bcFall 1.5s ease-in forwards}
@keyframes bcFall{to{transform:translateY(110vh) rotate(540deg)}}

/* ---- home: second row of round buttons + offers slider ---- */
.hp-quick.two{margin-top:-4px}
.hp-q.rd .hp-qi{background:radial-gradient(circle at 40% 30%,#ff9aa8,#c3121b);box-shadow:0 4px 0 #6b0718}
.hp-q.tl .hp-qi{background:radial-gradient(circle at 40% 30%,#99f6e4,#0d9488);box-shadow:0 4px 0 #064e3b}
.hp-offers{position:relative;border-radius:18px;overflow:hidden;border:2px solid #f5c518;box-shadow:0 0 0 2px rgba(138,43,216,.8) inset,0 10px 24px -10px rgba(0,0,0,.8)}
.hp-otrack{display:flex;transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.hp-o{flex:0 0 100%;display:flex;align-items:center;gap:12px;min-height:92px;padding:12px 16px;border:0;color:#fff;text-align:left;cursor:pointer;font:inherit}
.hp-o .ic{flex:none;font-size:46px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.hp-o .tx{flex:1;min-width:0}
.hp-o b{display:block;font:800 clamp(16px,4.6vw,22px)/1.1 var(--f-display);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.hp-o b em{font-style:normal;color:#ffe14d;-webkit-text-stroke:1px #7a2a00;paint-order:stroke fill}
.hp-o small{display:block;margin-top:3px;font:600 12px/1.3 var(--f-body,sans-serif);opacity:.95}
.hp-o .go{flex:none;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.7);font:800 13px var(--f-display)}
.hp-o.jp{background:radial-gradient(ellipse at 20% 0,rgba(255,216,74,.35),transparent 60%),linear-gradient(100deg,#3a0d6e,#5122c4 50%,#7a1838)}
.hp-o.rp{background:linear-gradient(100deg,#c3121b,#e3263f 50%,#ff7a00)}
.hp-o.cb{background:linear-gradient(100deg,#1460e6,#2a8cff 50%,#22c55e)}
.hp-o.inv{background:linear-gradient(100deg,#5122c4,#8a2bd8 50%,#ff7a00)}
.hp-o.gb{background:linear-gradient(100deg,#ff7a00,#ffb14a 50%,#e3263f)}
.hp-odots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:5px}
.hp-odots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.hp-odots i.on{background:#ffe14d;width:18px;border-radius:4px}
.hp-quick .hp-q b{font-size:10.5px;white-space:normal;text-align:center;line-height:1.1;max-width:62px}
/* realistic pictures (img/ui, made with Gemini) */
.bc-tab span .bc-img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.bc-clock .bc-img{width:64px;height:64px;object-fit:contain}
.bc-env2{position:relative;flex:none;width:92px;display:flex;flex-direction:column;align-items:center}
.bc-env2 .bc-img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.bc-env2 b{margin-top:-14px;padding:2px 8px;border-radius:999px;background:linear-gradient(180deg,#ffe14d,#ff9d00);color:#5a1a00;font:800 12px var(--f-display);border:1.5px solid #fff;white-space:nowrap}
.bc-env2.live .bc-img{animation:bcShake .5s infinite alternate}
.bc-jp{position:relative;overflow:hidden;background:url(/img/ui/jackpot_bg.webp?v=1) center/cover no-repeat!important}
.bc-jp::before{content:'';position:absolute;inset:0;background:rgba(26,4,20,.45)}
.bc-jp>*{position:relative}
.bc-jp .bc-img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}

/* ---- 🎁 Today's bonus popup ---- */
.bt-box{position:relative;width:min(420px,100%);max-height:calc(100dvh - 24px);overflow:auto;border-radius:22px;color:#fff;transform:scale(.9);transition:transform .3s cubic-bezier(.2,1.4,.4,1);
  background:radial-gradient(ellipse at 50% 0,#7a1838,#3a0718 60%,#24030e);border:3px solid #8a2bd8;box-shadow:0 0 0 2px #f5c518 inset,0 24px 60px rgba(0,0,0,.75),0 0 40px rgba(138,43,216,.5)}
.it-ov.show .bt-box{transform:none}
.bt-art{position:relative;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:12px 14px 10px;text-align:center;
  background:linear-gradient(180deg,transparent 45%,rgba(36,3,14,.95)),url(/img/ui/bonus_banner.webp?v=1) center 30%/cover no-repeat;border-radius:19px 19px 0 0}
.bt-art .it-x{top:8px;right:8px;width:36px;height:36px;font-size:22px}
.bt-art h2{margin:0;font:800 30px/1 var(--f-display);color:#ffe14d;-webkit-text-stroke:1.4px #7a2a00;paint-order:stroke fill;text-shadow:0 4px 0 #a33f00,0 0 20px rgba(255,216,74,.5)}
.bt-art p{margin:4px 0 0;font:700 14px var(--f-body,sans-serif);color:#fff;text-shadow:0 1px 3px #000}
.bt-list{display:flex;flex-direction:column;gap:8px;padding:10px 12px}
.bt-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:linear-gradient(180deg,rgba(106,43,224,.35),rgba(60,18,110,.35));border:1px solid rgba(201,155,255,.5)}
.bt-row img{flex:none;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.bt-row>span{flex:1;min-width:0}
.bt-row b{display:block;font:800 15px var(--f-display)}
.bt-row small{display:block;font:600 12px var(--f-body,sans-serif);color:#e9c9da}
.bt-btn{flex:none;min-width:84px;height:38px;padding:0 12px;border-radius:999px;border:2px solid rgba(255,255,255,.8);color:#fff;font:800 14px var(--f-display);cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.3);background:linear-gradient(180deg,#bfbfbf,#8c8c8c);box-shadow:0 3px 0 #5e5e5e}
.bt-btn.green{background:linear-gradient(180deg,#5ef08a,#18b04c);box-shadow:0 3px 0 #0b7a31}
.bt-btn.gold{background:linear-gradient(180deg,#ffb23a,#f06a00);box-shadow:0 3px 0 #a24400}
.bt-btn.blue{background:linear-gradient(180deg,#56b0ff,#1460e6);box-shadow:0 3px 0 #0b3a8a}
.bt-btn.purple{background:linear-gradient(180deg,#8a3ef0,#5122c4);box-shadow:0 3px 0 #2a0d6e}
.bt-btn.red{background:linear-gradient(180deg,#ff5a6e,#c3121b);box-shadow:0 3px 0 #6b0718}
.bt-btn:not(:disabled):not(.done){animation:bcPulse 1.1s infinite}
.bt-btn.done{background:linear-gradient(180deg,#4a1640,#2c0a22);box-shadow:none}
.bt-soon{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 12px 4px}
.bt-soon span{padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid rgba(245,197,24,.45);font:700 12px var(--f-display);color:#ffd84a}
.bt-all{display:block;width:calc(100% - 24px);margin:8px 12px 14px;height:48px;border-radius:999px;border:2px solid #ffe08a;color:#fff;font:800 17px var(--f-display);cursor:pointer;background:linear-gradient(180deg,#ffb23a,#ff8a00 55%,#f06a00);box-shadow:0 4px 0 #a24400;text-shadow:0 2px 0 #b54d00}

/* ---- floating buttons on the left (the free spin wheel is on the right) ---- */
.fd-dock{position:fixed;z-index:26;left:max(8px,env(safe-area-inset-left,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:6px}
.fd-dock[hidden]{display:none}
.fd-b{position:relative;display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;cursor:pointer}
.fd-b[hidden]{display:none}
.fd-i{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#7a1838,#2a0718);box-shadow:0 0 0 2.5px #f5c518,0 6px 16px rgba(0,0,0,.55)}
.fd-i img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.fd-b>b{margin-top:-8px;padding:1px 7px;border-radius:999px;background:linear-gradient(180deg,#4a1640,#2c0a22);border:1.5px solid #f5c518;color:#ffd84a;font:800 10px/1.4 var(--f-mono,monospace);white-space:nowrap;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.fd-b.hot .fd-i{box-shadow:0 0 0 2.5px #fff3a0,0 0 18px rgba(255,216,74,.85),0 6px 16px rgba(0,0,0,.55);animation:fdBob 1.2s ease-in-out infinite}
.fd-b.hot>b{background:linear-gradient(180deg,#5ef08a,#18b04c);color:#053b17;border-color:#fff}
.fd-dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff2d55;border:2px solid #fff;color:#fff;font:700 10px/14px var(--f-mono,monospace);font-style:normal}
.fd-x{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:1;cursor:pointer;opacity:.75}
@keyframes fdBob{50%{transform:translateY(-4px) scale(1.05)}}
body.gx-on .fd-dock{display:none!important}
.fd-i{width:48px;height:48px}.fd-i img{width:38px;height:38px}.fd-dock{gap:4px}
.fd-dock{gap:10px}.fd-b>b{position:relative;z-index:2}