/* ============================================================
BLOXHIT — Hitcoin red/black brand revamp.
Identity: dark obsidian base, blood-red accents, white logo type.
Variable NAMES kept (`--pink`, `--gold`, `--magenta`) so existing
call-sites like `box-shadow: 0 0 12px var(--pink)` automatically
inherit the new red glow without touching a thousand rules.
============================================================ */
:root{
/* Obsidian base — near-black with a faint red undertone, matching
the dark Roblox-square the Bloxhit logo sits on. */
--bg-0:#08080b;
--bg-1:#0e0a0e;
--bg-2:#15090c;
--surface:#1a0d10;
--surface-2:#23121a;
--surface-3:#301720;
--line:rgba(255,255,255,.07);
--line-2:rgba(221,28,28,.20);
--text:#ffffff;
--text-dim:#e8d4d4;
--text-mute:#9c8085;
/* Brand accents — ALL named after the old palette so we don't have
to touch every `var(--pink)` site. The actual values are now
red/crimson tuned to match the Hitcoin logo. */
--pink:#dd1c1c; /* core Hitcoin red — was hot pink */
--pink-soft:#ff5252; /* soft red for hover/shimmer */
--pink-deep:#7a0e0e; /* deep crimson for shadows */
--pink-glow:rgba(221,28,28,.55);
--magenta:#a01818; /* deep red used in gradient stops */
--berry-dark:#4a0808;
--orange:#ff3838; /* "hit" highlight — bright red */
--orange-deep:#9c1010;
--gold:#ff5050; /* re-aliased: any old "gold" UI now reads as warm red */
--gold-deep:#9c1010;
--cyan:#ff7a7a; /* re-aliased: stop being aqua, become salmon-red */
--green:#28c76f; /* keep green for "win" cues — readability needs it */
--red:#ff3838;
--plum:#5a0a0a; /* re-aliased to dark blood-red */
--plum-deep:#380505;
--shadow-panel:0 12px 32px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45);
--shadow-glow:0 0 24px rgba(221,28,28,.55), 0 0 60px rgba(221,28,28,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-weight:500;color:var(--text);
font-size:14px;
overflow-x:hidden;position:relative;min-height:100vh;
background:
radial-gradient(ellipse 1200px 800px at 80% -10%, rgba(221,28,28,.22), transparent 60%),
radial-gradient(ellipse 1200px 800px at -10% 110%, rgba(122,14,14,.28), transparent 60%),
radial-gradient(ellipse 800px 600px at 50% 50%, rgba(255,56,56,.08), transparent 70%),
linear-gradient(180deg, #08080b 0%, #15090c 50%, #08080b 100%);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
letter-spacing:.01em;
}
/* faint grid overlay — red tint matches the brand. */
body::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(rgba(221,28,28,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(221,28,28,.05) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}
#petals{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;opacity:.85}
/* glowing background orbs */
.bg-orb{
position:fixed;border-radius:50%;filter:blur(70px);
z-index:-1;pointer-events:none;
animation:orbDrift 18s ease-in-out infinite;
}
.bg-orb-1{
top:-100px;right:-100px;width:500px;height:500px;
background:radial-gradient(circle, rgba(221,28,28,.50), transparent 70%);
}
.bg-orb-2{
bottom:-150px;left:-100px;width:600px;height:600px;
background:radial-gradient(circle, rgba(122,14,14,.55), transparent 70%);
animation-delay:-9s;
}
.bg-orb-3{
top:40%;left:50%;width:400px;height:400px;transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(255,56,56,.18), transparent 70%);
animation-delay:-4s;
}
@keyframes orbDrift{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(60px,-40px) scale(1.15)}
}
/* particle FX — burst dots that fly out on win events. Now red-tinted. */
.fx-particle{
position:fixed;pointer-events:none;z-index:400;
border-radius:50% 0 50% 0;
background:radial-gradient(circle at 30% 30%, #fff, #dd1c1c);
box-shadow:0 0 12px rgba(221,28,28,.7);
transform:translate(-50%,-50%);
animation:fxFly 1.1s cubic-bezier(.25,.7,.4,1) forwards;
will-change:transform,opacity;
}
@keyframes fxFly{
0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
20%{opacity:1;transform:translate(calc(-50% + var(--dx,0) * .3), calc(-50% + var(--dy,0) * .3)) scale(1) rotate(calc(var(--rot,0) * .3))}
100%{opacity:0;transform:translate(calc(-50% + var(--dx,0)), calc(-50% + var(--dy,0))) scale(.4) rotate(var(--rot,0))}
}
/* ============================================================
TOPBAR
============================================================ */
.topbar{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;gap:16px;
padding:10px 24px;
background:rgba(20,8,12,.85);
backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid var(--line);
box-shadow:0 4px 24px rgba(0,0,0,.45);
}
/* Brand logo block (image-based — see .bh-logo-img below). */
.logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0;text-decoration:none}
.accent{
background:linear-gradient(135deg,var(--pink),var(--orange));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.online-pill{
display:flex;align-items:center;gap:12px;
padding:8px 18px;border-radius:99px;
background:linear-gradient(135deg, rgba(221,28,28,.15), rgba(221,28,28,.05));
border:1px solid rgba(221,28,28,.4);
font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--text);
flex-shrink:0;
}
.online-pill strong{font-family:'Sora';font-weight:400;color:var(--green)}
.online-dot{
width:10px;height:10px;border-radius:50%;background:var(--green);
box-shadow:0 0 12px var(--green);
animation:onlineP 1.5s ease-in-out infinite;
}
@keyframes onlineP{
0%{box-shadow:0 0 0 0 rgba(221,28,28,.6), 0 0 12px var(--green)}
100%{box-shadow:0 0 0 12px rgba(221,28,28,0), 0 0 12px var(--green)}
}
.online-divider{width:1px;height:18px;background:rgba(255,255,255,.15)}
.user-area{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.balance{
display:flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:99px;
background:linear-gradient(135deg,rgba(221,28,28,.18),rgba(255,56,56,.06));
border:1px solid rgba(221,28,28,.4);
font-family:'Plus Jakarta Sans';font-weight:700;font-size:14px;color:#ffd0e8;
box-shadow:0 0 16px rgba(221,28,28,.22);
position:relative;overflow:hidden;
letter-spacing:.04em;
}
.balance::before{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(221,28,28,.35),transparent);
transform:translateX(-100%);
animation:shine 3s linear infinite;
}
@keyframes shine{to{transform:translateX(200%)}}
.balance-label{font-size:10px;letter-spacing:1.5px;opacity:.85;color:#ff5050;display:inline-flex;align-items:center}
.balance-label .bc-glyph{width:18px;height:18px;margin-left:0;vertical-align:middle}
.balance.bump{animation:bump .4s}
@keyframes bump{0%,100%{transform:scale(1)}50%{transform:scale(1.12);box-shadow:0 0 36px var(--pink)}}
/* Hitcoin badge icon — uses the new Hitcoin currency PNG so it matches
the brand. The image is the floating red square that says "HITCOIN"
around its edge, so we never render an "HC" / "BC" acronym text. */
.bcoin-icon{
width:22px;height:22px;
background:url('assets/hitcoin currency.png') center/contain no-repeat;
filter:drop-shadow(0 0 6px rgba(221,28,28,.55));
flex-shrink:0;display:inline-block;
/* Subtle idle hover for the brand mark — keeps the "alive" feel of the
old pink coin without leaking pink anywhere. */
animation:hitcoinFloat 3.6s ease-in-out infinite;
}
.bcoin-icon.small{width:18px;height:18px;animation-duration:4.2s}
.bcoin-icon.big{
width:80px;height:80px;
filter:drop-shadow(0 0 18px rgba(221,28,28,.65));
animation-duration:4.4s;
}
@keyframes hitcoinFloat{
0%,100%{transform:translateY(0) rotate(-2deg)}
50% {transform:translateY(-2px) rotate(2deg)}
}
/* Inline coin glyph used inside text strings (history rows, popups, toasts,
leaderboard, live feed). Same image, sized to flow with surrounding text. */
.bc-glyph{
display:inline-block;
width:1.15em;height:1.15em;
vertical-align:-.22em;margin-left:.12em;
background:url('assets/hitcoin currency.png') center/contain no-repeat;
filter:drop-shadow(0 0 4px rgba(221,28,28,.5));
flex-shrink:0;font-size:1em;
}
.profile{
display:flex;align-items:center;gap:8px;
padding:4px 14px 4px 4px;border-radius:99px;
background:rgba(255,255,255,.06);border:1px solid var(--line-2);
}
.profile-avatar{display:flex;animation:bobble 3s ease-in-out infinite}
@keyframes bobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.profile-name{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--text)}
.btn-icon-only{
width:42px;height:42px;padding:0;border-radius:14px;font-size:20px;
background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--text);
display:none;align-items:center;justify-content:center;cursor:pointer;
}
/* ============================================================
LAYOUT
============================================================ */
.layout{
display:grid;
grid-template-columns:208px 1fr 280px;
gap:0;position:relative;z-index:5;
min-height:calc(100vh - 64px);
}
/* SIDEBAR */
.sidebar{
position:sticky;top:64px;
align-self:start;
height:calc(100vh - 64px);
overflow-y:auto;overflow-x:hidden; /* hover-translate must not flash a scrollbar */
padding:20px 14px;
background:linear-gradient(180deg, rgba(16,19,46,.6), rgba(10,12,31,.6));
border-right:1px solid var(--line);
backdrop-filter:blur(12px);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.sb-section{margin-bottom:24px}
.sb-title{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:10px;letter-spacing:2.5px;
color:var(--text-mute);margin-bottom:8px;padding:0 10px;
}
.sb-link{
display:flex;align-items:center;gap:10px;
padding:10px 12px;border-radius:12px;
font-family:'Plus Jakarta Sans';font-weight:600;font-size:14px;color:var(--text-dim);
cursor:pointer;
transition:background .3s cubic-bezier(.2,.8,.25,1), color .3s, transform .3s, box-shadow .3s;
margin-bottom:3px;
position:relative;
letter-spacing:.02em;
}
/* `display:flex` above shadows the browser default `[hidden]{display:none}`,
which is what kept the Admin link visible for non-admin users despite
`adminLink.hidden = true` running. The attribute selector below has
higher specificity than the bare class, so [hidden] wins again. */
.sb-link[hidden]{ display:none !important }
.sb-link:hover{
background:rgba(255,82,82,.1);color:var(--text);
transform:translateX(4px);
}
.sb-link.active{
background:linear-gradient(90deg, rgba(255,82,82,.25), rgba(160,24,24,.1));
color:var(--text);
box-shadow:inset 0 0 0 1px rgba(255,82,82,.4);
}
.sb-link.active::before{
content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
background:linear-gradient(180deg,var(--pink),var(--pink-deep));
border-radius:0 4px 4px 0;
box-shadow:0 0 12px var(--pink);
}
.sb-icon{
width:22px;height:22px;
display:inline-flex;align-items:center;justify-content:center;
color:var(--text-mute);
transition:color .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.sb-icon svg{width:100%;height:100%;display:block}
.sb-link:hover .sb-icon{color:var(--pink);transform:scale(1.08)}
.sb-link.active .sb-icon{color:var(--pink);filter:drop-shadow(0 0 6px rgba(255,82,82,.6))}
.sb-badge{
margin-left:auto;font-size:9px;letter-spacing:.05em;font-weight:800;
padding:3px 7px;border-radius:99px;
border:1px solid;
}
.sb-hot{color:#ff5252;border-color:rgba(255,82,82,.4);background:rgba(221,28,28,.15)}
.sb-new{color:#7be8a3;border-color:rgba(123,232,163,.4);background:rgba(221,28,28,.15)}
.sb-rate-box{
background:linear-gradient(135deg, var(--surface), var(--bg-2));
border:1px solid var(--line-2);border-radius:14px;
padding:14px;
box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.rate-row{
display:flex;justify-content:space-between;align-items:center;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;
padding:6px 0;border-bottom:1px dashed var(--line-2);
}
.rate-row:last-child{border-bottom:none}
.rate-row span{color:var(--text-mute)}
.rate-row strong{color:var(--text);font-family:'Sora';font-weight:400;font-size:14px}
/* MAIN */
main{
position:relative;z-index:5;
padding:20px 22px 50px;min-width:0;
}
/* CHAT */
.chat{
position:sticky;top:64px;align-self:start;
height:calc(100vh - 64px);
display:flex;flex-direction:column;
background:linear-gradient(180deg, rgba(16,19,46,.7), rgba(10,12,31,.7));
border-left:1px solid var(--line);
backdrop-filter:blur(12px);
}
.chat-head{
display:flex;align-items:center;gap:8px;
padding:12px;border-bottom:1px solid var(--line);
}
.chat-tabs{display:flex;gap:6px;flex:1}
.ch-tab{
flex:1;
padding:8px 10px;border-radius:99px;cursor:pointer;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;
background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--text-dim);
transition:background .25s, color .25s, transform .2s, box-shadow .3s;
}
.ch-tab:hover{color:var(--text);background:rgba(255,82,82,.1)}
.ch-tab:active{transform:scale(.96)}
.ch-tab.active{
background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;
border-color:rgba(255,255,255,.25);
box-shadow:0 0 16px rgba(255,82,82,.45), inset 0 1px 0 rgba(255,255,255,.2);
animation:segActivePop .35s cubic-bezier(.34,1.56,.64,1);
}
.chat-online{
display:flex;align-items:center;gap:6px;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;color:var(--green);
}
.chat-online-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:onlineP 1.5s ease-in-out infinite}
.chat-body{
flex:1;overflow-y:auto;
padding:10px 12px;
display:flex;flex-direction:column;gap:10px;
}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.cmsg{display:flex;gap:8px;align-items:flex-start;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cmsg-avatar{
width:32px;height:32px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:16px;border:2px solid rgba(255,255,255,.15);
box-shadow:0 2px 8px rgba(0,0,0,.4);
overflow:hidden;
}
.cmsg-avatar-img{padding:0;background:rgba(0,0,0,.3)}
.cmsg-avatar-img img{
width:100%;height:100%;object-fit:cover;display:block;
border-radius:50%;
}
.cmsg-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:16px}
.cmsg-body{flex:1;min-width:0;font-size:13px;line-height:1.4}
.cmsg-name{font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px}
.cmsg-rank{
display:inline-block;font-size:9px;
padding:1px 6px;border-radius:99px;
margin-right:4px;color:#fff;font-weight:800;
vertical-align:middle;
}
.rank-vip{background:linear-gradient(135deg,#ff5050,#7a0e0e)}
.rank-mod{background:linear-gradient(135deg,#dd1c1c,#7a0e0e)}
.rank-bot{background:linear-gradient(135deg,#806060,#5b6680)}
/* Admin pill — cyan→violet metallic gradient with subtle shine sweep so it
stands out from regular VIP/MOD pills. Same color story as the developer
badge SVG so the brand reads consistently. */
.rank-admin{
background:linear-gradient(135deg,#ff5252 0%,#a01818 60%,#380505 100%);
background-size:200% 100%;
animation: rankAdminShine 4.6s linear infinite;
box-shadow:0 0 8px rgba(118,228,255,.55), 0 0 14px rgba(165,138,255,.35);
}
@keyframes rankAdminShine{
from{ background-position: 0 0 }
to { background-position: 200% 0 }
}
.cmsg-text{color:var(--text-dim);word-break:break-word}
.cmsg-system{
font-size:11px;color:var(--cyan);text-align:center;
font-style:italic;padding:6px 10px;
background:rgba(0,255,213,.06);border-radius:8px;
border:1px solid rgba(0,255,213,.2);
}
.chat-rules{
font-size:10px;color:var(--text-mute);text-align:center;
padding:6px 12px;border-top:1px dashed var(--line-2);
}
.chat-input{
display:flex;gap:6px;padding:10px 12px;
border-top:1px solid var(--line);
background:rgba(255,255,255,.03);
}
.chat-input input{
flex:1;
padding:10px 14px;border-radius:99px;
border:1px solid var(--line-2);background:rgba(255,255,255,.04);
font-family:'Plus Jakarta Sans';font-weight:600;font-size:13px;color:var(--text);
outline:none;
}
.chat-input input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,82,82,.2)}
.btn-send{
padding:0 14px;border-radius:99px;cursor:pointer;
background:linear-gradient(135deg,var(--pink),var(--pink-deep));
color:#fff;border:none;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;
box-shadow:0 0 14px rgba(255,82,82,.45);
}
.btn-send:active{transform:translateY(2px)}
/* ============================================================
BUTTONS
============================================================ */
/* HTML `hidden` attribute MUST win over .btn's display:inline-flex.
Without this rule, [hidden] gets overridden by the cascade and the
button still renders. Same trick the BJ contextual-buttons fix relies on. */
.btn[hidden]{ display: none !important; }
.btn{
position:relative;
font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
font-size:13px;letter-spacing:.06em;
padding:11px 20px;border-radius:14px;
border:1px solid var(--line-2);cursor:pointer;color:var(--text);
background:rgba(255,255,255,.05);
overflow:hidden;
/* keep label centered and never let it spill */
display:inline-flex;align-items:center;justify-content:center;gap:6px;
white-space:nowrap;
text-overflow:ellipsis;
line-height:1.1;
transition:transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s, background .25s, border-color .25s, color .25s;
will-change:transform;
}
.btn:hover{
transform:translateY(-2px);
border-color:rgba(255,82,82,.7);
color:#fff;
box-shadow:
0 0 0 1px rgba(255,82,82,.45),
0 8px 22px rgba(255,82,82,.35),
0 0 28px rgba(255,82,82,.25);
}
.btn:active{transform:translateY(0) scale(.96)}
.btn.big{padding:14px 26px;font-size:14px}
.btn-shine{
position:absolute;top:0;left:-50%;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
transform:skewX(-20deg);pointer-events:none;
}
.btn:hover .btn-shine{animation:btnShine .6s ease}
@keyframes btnShine{from{left:-50%}to{left:120%}}
.btn-primary{
background:linear-gradient(180deg,#ff5252 0%,var(--pink) 50%,var(--pink-deep) 100%);
color:#fff;border-color:rgba(255,255,255,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -2px 0 rgba(122,24,56,.4),
0 1px 0 rgba(255,255,255,.15),
0 4px 12px rgba(255,82,82,.45),
0 0 0 1px rgba(255,82,82,.2);
}
.btn-primary:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -2px 0 rgba(122,24,56,.5),
0 1px 0 rgba(255,255,255,.18),
0 6px 18px rgba(255,82,82,.7),
0 0 0 1px rgba(255,82,82,.4),
0 0 28px rgba(255,82,82,.4);
}
.btn-primary:active{transform:translateY(1px)}
.btn-deposit{
background:linear-gradient(180deg,#ff7a7a 0%,#ff5252 50%,#28c76f 100%);
color:#003322;border:1px solid rgba(255,255,255,.3);font-weight:800;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -2px 0 rgba(26,138,77,.4),
0 4px 12px rgba(221,28,28,.45),
0 0 0 1px rgba(221,28,28,.2);
}
.btn-deposit:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -2px 0 rgba(26,138,77,.5),
0 6px 18px rgba(221,28,28,.65),
0 0 28px rgba(221,28,28,.4);
}
.btn-deposit:active{transform:translateY(1px)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text-dim);border:1px solid var(--line-2)}
.btn-ghost:hover{
color:#fff;
border-color:rgba(255,82,82,.65);
box-shadow:
0 0 0 1px rgba(255,82,82,.4),
0 6px 18px rgba(255,82,82,.3),
0 0 22px rgba(255,82,82,.2);
}
.btn-outline{
background:transparent;border:2px solid var(--pink);color:var(--text);
box-shadow:0 0 16px rgba(255,82,82,.2);
}
.btn-outline:hover{background:rgba(255,82,82,.12);box-shadow:0 0 24px rgba(255,82,82,.4)}
.btn-cashout{
background:linear-gradient(180deg,#ff7a7a 0%,#ff5050 50%,#ff3838 100%);
color:#3a1d00;border:1px solid rgba(255,255,255,.3);font-weight:800;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 0 rgba(201,121,0,.4),
0 4px 12px rgba(255,168,0,.45),
0 0 0 1px rgba(255,168,0,.2);
}
.btn-cashout:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -2px 0 rgba(201,121,0,.5),
0 6px 18px rgba(255,168,0,.65),
0 0 28px rgba(255,168,0,.4);
}
.btn-cashout:active{transform:translateY(1px)}
.btn-cashout:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
/* ============================================================
ROUTES
============================================================ */
.route{display:none;animation:routeIn .42s cubic-bezier(.16,1,.3,1)}
.route.active{display:block}
@keyframes routeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ============================================================
PROMO STRIP (banner row)
============================================================ */
.promo-strip{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;
}
.promo{
position:relative;
height:140px;border-radius:20px;
padding:18px 20px;
overflow:hidden;
display:flex;flex-direction:column;justify-content:space-between;
border:1px solid var(--line-2);
cursor:pointer;
transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.promo:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.promo-1{background:linear-gradient(135deg,#ff5050 0%,#ff3838 60%,#7a0e0e 100%)}
.promo-2{background:linear-gradient(135deg,#a01818 0%,#7a0e0e 50%,#ff3838 100%)}
.promo-3{background:linear-gradient(135deg,#ff5252 0%,#28c76f 60%,#3a0808 100%)}
.promo::before{content:"";position:absolute;top:-30%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);pointer-events:none}
.promo-tag{
align-self:flex-start;padding:4px 10px;border-radius:99px;
background:rgba(255,255,255,.25);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.4);
font-family:'Plus Jakarta Sans';font-weight:800;font-size:10px;color:#fff;letter-spacing:.1em;
}
.promo-title{
font-family:'Sora';font-weight:400;font-size:24px;color:#fff;
letter-spacing:.02em;
text-shadow:0 2px 0 rgba(0,0,0,.3), 0 4px 0 rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.3);
}
.promo-sub{font-family:'Plus Jakarta Sans';font-weight:600;font-size:12px;color:rgba(255,255,255,.9);margin-top:-4px}
.promo-art{position:absolute;right:-10px;bottom:-10px;width:120px;height:120px;opacity:.85;pointer-events:none}
.promo-art-coins{
background:radial-gradient(circle at 35% 25%,#ffe0e0 0%,#ff5252 35%,#ff5050 60%,#b87800 100%);
border-radius:50%;
box-shadow:0 0 30px rgba(255,217,0,.5);
animation:bobble 3s ease-in-out infinite;
}
.promo-art-coins::before{
content:"BC";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-size:38px;color:#5c3800;
}
.promo-art-crate{
background:linear-gradient(135deg,#bd93ff,#7c3aed);
border-radius:20px;border:3px solid #ff5050;
box-shadow:0 0 30px rgba(189,147,255,.5);
animation:bobble 3s ease-in-out infinite -1s;
}
.promo-art-crate::before{
content:"";position:absolute;inset:0;
background:url("data:image/svg+xml;utf8,") center/72% no-repeat;
filter:drop-shadow(0 6px 14px rgba(201,90,26,.45));
}
.promo-art-bonus{
background:linear-gradient(135deg,#ffe0e0,#ff5050);
border-radius:50%;box-shadow:0 0 30px rgba(255,217,0,.5);
animation:bobble 3s ease-in-out infinite -2s;
}
.promo-art-bonus::before{
content:"+25%";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-size:24px;color:#5c3800;
}
/* ============================================================
LIVE BET FEED
============================================================ */
.bet-feed-wrap{
background:linear-gradient(135deg, var(--surface), var(--bg-2));
border:1px solid var(--line-2);border-radius:18px;
padding:14px 18px;margin-bottom:24px;
box-shadow:var(--shadow-panel);
}
.bet-feed-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:10px;flex-wrap:wrap;gap:10px;
}
.bet-feed-title{
display:flex;align-items:center;gap:8px;
font-family:'Sora';font-size:18px;color:var(--text);
letter-spacing:.04em;
text-shadow:0 0 16px rgba(255,82,82,.3);
}
.live-dot{
width:10px;height:10px;border-radius:50%;background:var(--red);
box-shadow:0 0 10px var(--red);
animation:livePulse 1s ease-in-out infinite;
}
@keyframes livePulse{50%{opacity:.3;transform:scale(.7)}}
.bet-feed-tabs{display:flex;gap:6px}
.bf-tab{
padding:6px 14px;border-radius:99px;cursor:pointer;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;
background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--text-dim);
transition:background .3s, color .3s, transform .25s, box-shadow .3s;
}
.bf-tab:hover{color:var(--text);background:rgba(255,82,82,.12)}
.bf-tab:active{transform:scale(.96)}
.bf-tab.active{
background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:rgba(255,255,255,.2);
box-shadow:0 0 18px rgba(255,82,82,.45), inset 0 1px 0 rgba(255,255,255,.2);
animation:segActivePop .35s cubic-bezier(.34,1.56,.64,1);
}
.bet-feed{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.bet-feed::-webkit-scrollbar{width:6px}
.bet-feed::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.bf-row{
display:grid;grid-template-columns:1.2fr 1.5fr 1fr .8fr 1.2fr;gap:10px;align-items:center;
padding:8px 14px;border-radius:12px;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;
background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
animation:bfIn .4s ease;
}
@keyframes bfIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.bf-row.bf-head{
background:transparent;border:none;
font-size:10px;letter-spacing:1.5px;color:var(--text-mute);padding:4px 14px;
}
/* Live-feed game indicator: small colored pill — no chunky icon box.
The colour itself encodes the game, name appears alongside as a label. */
.bf-game{display:flex;align-items:center;gap:8px;font-family:'Sora';font-weight:700;font-size:11px;letter-spacing:.14em}
.bf-game-icon{
width:6px;height:6px;border-radius:50%;
display:inline-block;flex-shrink:0;
background:currentColor;
box-shadow:0 0 8px currentColor;
}
.bf-game-icon svg.bf-icon{display:none}
.bf-user{color:var(--text);display:flex;align-items:center;gap:8px}
.bf-avatar{
width:24px;height:24px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:13px;flex-shrink:0;
border:1.5px solid rgba(255,255,255,.18);
box-shadow:0 1px 4px rgba(0,0,0,.3);
overflow:hidden;background:rgba(0,0,0,.3);
}
.bf-avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.bf-bet{color:#ffd0a8;font-weight:600}
.bf-multi{font-family:'Sora';font-weight:700;letter-spacing:.04em}
/* Win indicators stay green so the player can still parse win-vs-loss at
a glance — universal casino UX, even on a red-themed brand. */
.bf-multi-win{color:#28c76f;text-shadow:0 0 10px rgba(40,199,111,.35)}
.bf-multi-push{color:#ffd0a8}
.bf-multi-loss{color:#ff5252;font-size:11px;letter-spacing:.18em;opacity:.85}
.bf-payout{font-family:'Sora';font-weight:700;letter-spacing:.04em}
.bf-win{color:#28c76f}
.bf-loss{color:#ff5252}
/* big-wins indicator: small dot, no boxy badge */
.bw-game-icon{
width:5px;height:5px;border-radius:50%;
background:currentColor;box-shadow:0 0 6px currentColor;
display:inline-block;flex-shrink:0;
vertical-align:middle;margin-right:6px;
}
.bw-game-icon svg{display:none}
.bw-info .bw-game{display:flex;align-items:center;gap:4px}
/* mines empty-tile planet placeholder */
.mt-empty{
width:50%;height:50%;
color:var(--plum);
opacity:.55;
transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
pointer-events:none;
}
.mine-tile:hover .mt-empty{opacity:.85;transform:scale(1.08)}
.mine-tile.gem .mt-empty,
.mine-tile.bomb .mt-empty{display:none}
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;
display:grid;grid-template-columns:1.3fr .9fr;gap:40px;
padding:48px;border-radius:28px;
background:
radial-gradient(ellipse at top right, rgba(255,82,82,.18), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(160,24,24,.18), transparent 60%),
linear-gradient(135deg, var(--surface), var(--bg-2));
border:1px solid var(--line-2);
box-shadow:var(--shadow-panel);
overflow:hidden;
margin-bottom:40px;
}
.hero::before{
content:"";position:absolute;top:-100px;left:-100px;
width:300px;height:300px;border-radius:50%;
background:radial-gradient(circle,rgba(255,82,82,.18),transparent 70%);
filter:blur(40px);pointer-events:none;
}
.badge{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:99px;
background:linear-gradient(135deg,rgba(221,28,28,.2),rgba(221,28,28,.05));
border:1px solid rgba(221,28,28,.5);
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:1.5px;font-weight:700;
color:var(--green);margin-bottom:24px;
}
.badge-dot{
width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);
animation:badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(221,28,28,.7)}100%{box-shadow:0 0 0 10px rgba(221,28,28,0)}}
.hero-title{
font-family:'Sora',sans-serif;font-weight:400;
font-size:clamp(42px,5.2vw,76px);
line-height:.96;letter-spacing:-.5px;
margin-bottom:22px;color:var(--text);
text-shadow:0 0 24px rgba(255,82,82,.4);
}
.title-pop{
display:inline-block;
background:linear-gradient(135deg,var(--pink),var(--pink-deep) 50%,var(--gold));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 4px 24px rgba(255,82,82,.5));
}
/* Hero logo — drops the "Bloxhit." text in favor of the actual brand image.
Sized to feel proportionate next to the giant "Play. Win." cap-height. */
.hero-title-logo{
display:block;
height:1.9em;width:auto;
margin:6px 0 0 -0.06em;
filter:drop-shadow(0 10px 24px rgba(221,28,28,.5))
drop-shadow(0 0 36px rgba(255,82,82,.32));
user-select:none;-webkit-user-drag:none;
animation:heroLogoFloat 3.8s ease-in-out infinite;
}
@keyframes heroLogoFloat{
0%,100%{transform:translateY(0) rotate(-1deg)}
50% {transform:translateY(-8px) rotate( 1deg)}
}
@media (max-width:760px){
.hero-title-logo{height:1.6em}
}
.hero-sub{font-size:16px;color:var(--text-dim);max-width:560px;margin-bottom:24px;line-height:1.5;font-weight:600}
.hl{color:var(--gold);font-weight:700}
.hero-cta{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
/* "Your balance" hero card — replaces the old fake site-wide stats grid. */
.hero-balance{
position:relative;max-width:380px;
padding:18px 22px;border-radius:18px;
background:
radial-gradient(ellipse at 0% 0%, rgba(221,28,28,.18), transparent 55%),
linear-gradient(135deg, rgba(221,28,28,.06), rgba(255,56,56,.04));
border:1px solid rgba(221,28,28,.28);
box-shadow:0 12px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
overflow:hidden;
}
.hero-balance::before{
content:"";position:absolute;inset:0;
background:linear-gradient(110deg, transparent 35%, rgba(255,82,82,.15) 50%, transparent 65%);
background-size:300% 100%;
animation:hbShine 5s linear infinite;
pointer-events:none;
}
@keyframes hbShine{from{background-position:200% 0}to{background-position:-100% 0}}
.hb-label{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;
letter-spacing:.18em;color:#ff5252;
text-transform:uppercase;margin-bottom:10px;
}
.hb-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hero-balance .bcoin-icon.big{
width:48px;height:48px;flex-shrink:0;
}
.hb-amount{display:flex;align-items:baseline;gap:6px;line-height:1}
.hb-num{
font-family:'Sora';font-weight:800;font-size:36px;letter-spacing:.01em;
background:linear-gradient(135deg, #ffffff 0%, #ffe0e0 50%, #ff5252 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 14px rgba(255,82,82,.35));
}
.hb-unit{
font-family:'Sora';font-weight:700;font-size:14px;
color:#ff5252;letter-spacing:.12em;
display:inline-flex;align-items:center;
}
.hb-unit .bc-glyph{width:24px;height:24px;margin-left:0;vertical-align:middle;filter:drop-shadow(0 0 6px rgba(221,28,28,.55))}
.hb-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.hb-cta{padding:10px 18px;font-size:12px;letter-spacing:.12em}
.hb-signed-out-msg{
display:none;font-family:'Plus Jakarta Sans';font-weight:600;
color:var(--text-dim);font-size:13px;margin-top:6px;
}
.hero-balance[data-state="signed-out"] .hb-row,
.hero-balance[data-state="signed-out"] .hb-cta-row{display:none}
.hero-balance[data-state="signed-out"] .hb-signed-out-msg{display:block}
.hero-art{display:flex;align-items:center;justify-content:center;position:relative}
.hero-limited-stack{position:relative;width:340px;height:320px}
.hero-limited-stack::after{
/* glowing ground beneath items */
content:"";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
width:260px;height:40px;
background:radial-gradient(ellipse,rgba(255,90,200,.55),rgba(140,90,255,.25) 50%,transparent 75%);
filter:blur(22px);z-index:0;pointer-events:none;
animation:limGlowPulse 4s ease-in-out infinite;
}
@keyframes limGlowPulse{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
/* Static-facing limited art — gentle bob only, no Y-axis spin. */
.hlim{
position:absolute;width:160px;height:160px;
filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,90,200,.35));
}
.hlim img{
width:100%;height:100%;object-fit:contain;
-webkit-user-select:none;user-select:none;pointer-events:none;
}
/* Triangle arrangement with individual gentle bobs */
.hlim-1{ /* back center — purple dominus, biggest */
top:18px;left:50%;margin-left:-90px;z-index:2;
width:180px;height:180px;
animation:limBobA 5s ease-in-out infinite;
filter:drop-shadow(0 16px 22px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(170,80,255,.55));
}
.hlim-2{ /* front-left — fedora */
bottom:34px;left:6px;z-index:4;
width:150px;height:150px;
animation:limBobB 5.5s ease-in-out infinite -1.5s;
filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,255,255,.35));
}
.hlim-3{ /* front-right — valkyrie */
bottom:30px;right:0;z-index:3;
width:160px;height:160px;
animation:limBobC 6s ease-in-out infinite -3s;
filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,200,255,.45));
}
@keyframes limBobA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes limBobB{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes limBobC{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-petal{
position:absolute;width:18px;height:18px;
background:radial-gradient(ellipse at 30% 30%,#fff,#dd1c1c);
border-radius:50% 0 50% 0;
box-shadow:0 0 12px var(--pink);
}
.hero-petal-1{top:18px;left:8px;animation:petalDrift 5s ease-in-out infinite}
.hero-petal-2{bottom:60px;right:-2px;animation:petalDrift 6s ease-in-out infinite -2s}
.hero-petal-3{top:120px;right:-8px;animation:petalDrift 7s ease-in-out infinite -4s;transform:scale(.7)}
@keyframes petalDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-15px) rotate(180deg)}}
/* ============================================================
SECTION TITLES
============================================================ */
.section-title{
font-family:'Sora',sans-serif;font-weight:400;
font-size:30px;color:var(--text);
margin:36px 0 18px;
display:flex;align-items:center;gap:12px;
letter-spacing:.02em;
text-shadow:0 0 20px rgba(255,82,82,.3);
}
.section-emoji{display:inline-block;animation:bobble 2s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--pink))}
/* ============================================================
GAME CARDS
============================================================ */
.game-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;
perspective:1200px;
}
.game-card{
position:relative;
border:none;cursor:pointer;
border-radius:24px;
height:300px;
padding:20px 18px;
display:flex;flex-direction:column;align-items:flex-start;
overflow:hidden;
transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1);
box-shadow:0 10px 30px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.3);
font-family:'Plus Jakarta Sans',sans-serif;
text-align:left;color:#fff;
transform-style:preserve-3d;
/* No will-change here. The card has translateZ children (.gc-name/.gc-art/
.gc-tag/.gc-bubble) that need the preserve-3d context to extrude — and
will-change:transform promotes the card to its own layer which forces
flat rendering on those descendants (same root-cause as the dice 2D
regression). The transform animations composite fine without the hint. */
}
.game-card:hover{
box-shadow:0 24px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,82,82,.4);
}
.game-card:active{transform:perspective(1000px) translateY(4px) scale(.985) !important}
.game-card .gc-name,.game-card .gc-art{transition:transform .55s cubic-bezier(.16,1,.3,1)}
/* Game-card backgrounds — all reds, but each game gets its own shade so
the home grid still feels varied. */
.gc-crash {background:linear-gradient(165deg,#ff5252 0%,#dd1c1c 50%,#7a0e0e 100%)}
.gc-blackjack{background:linear-gradient(165deg,#ff7a7a 0%,#a01818 60%,#380505 100%)}
.gc-slots {background:linear-gradient(165deg,#ff5050 0%,#ff3838 60%,#7a0e0e 100%)}
.gc-cases {background:linear-gradient(165deg,#a01818 0%,#7a0e0e 50%,#ff3838 100%)}
.gc-dice {background:linear-gradient(165deg,#ff7a7a 0%,#dd1c1c 60%,#4a0808 100%)}
.gc-mines {background:linear-gradient(165deg,#dd1c1c 0%,#a01818 50%,#3a0808 100%)}
.game-card::before{content:"";position:absolute;top:-30%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);pointer-events:none}
.game-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.2));pointer-events:none}
.gc-name{
font-family:'Sora',sans-serif;font-weight:400;
font-size:28px;letter-spacing:.04em;color:#fff;
text-shadow:0 2px 0 rgba(0,0,0,.3),0 4px 0 rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.4);
margin-bottom:0;position:relative;z-index:2;
}
.gc-tag{
position:absolute;bottom:16px;left:18px;
padding:5px 14px;border-radius:99px;
background:rgba(255,255,255,.25);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.4);
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;
color:#fff;z-index:3;letter-spacing:.04em;
}
.gc-bubble{
position:absolute;
padding:5px 12px;border-radius:99px;
background:linear-gradient(135deg,#dd1c1c,#a01818);
border:2px solid #fff;
font-family:'Sora';font-size:13px;color:#fff;
z-index:4;box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.gc-crash .gc-bubble{top:80px;left:14px;animation:bubbleFloat 3s ease-in-out infinite}
.gc-crash .gc-bubble-2{top:auto;bottom:50px;left:auto;right:14px;animation-delay:-1.5s;background:linear-gradient(135deg,#7a0e0e,#380505)}
@keyframes bubbleFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.gc-art{
position:absolute;bottom:50px;left:50%;transform:translateX(-50%);
width:65%;pointer-events:none;z-index:1;
filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));
transform-style:preserve-3d;
}
.gc-art svg{width:100%;height:auto;display:block}
.art-rocket{animation:rocketFloat 3s ease-in-out infinite}
@keyframes rocketFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.rk-flame-grp{transform-origin:100px 175px;animation:flameWobble .25s steps(4) infinite}
@keyframes flameWobble{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.2)}}
.art-cards{animation:cardsHover 4s ease-in-out infinite}
@keyframes cardsHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.art-slots{animation:bobble 3s ease-in-out infinite}
.art-chest{animation:bobble 3s ease-in-out infinite -1s}
.art-dice{animation:diceRoll 5s ease-in-out infinite}
@keyframes diceRoll{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) translateY(-4px)}75%{transform:rotate(5deg) translateY(-4px)}}
.art-mine{animation:bobble 3s ease-in-out infinite -.5s}
/* ============================================================
BIG WINS
============================================================ */
.big-wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.bw-card{
display:flex;align-items:center;gap:12px;
padding:14px;border-radius:14px;
background:linear-gradient(135deg, var(--surface), var(--bg-2));
border:1px solid var(--line-2);
transition:transform .25s cubic-bezier(.2,.8,.25,1), border-color .25s, box-shadow .25s;
}
.bw-card:hover{transform:translateY(-3px);border-color:var(--pink);box-shadow:0 8px 24px rgba(255,82,82,.25)}
.bw-avatar{
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:20px;border:2px solid rgba(255,255,255,.2);
box-shadow:0 4px 12px rgba(0,0,0,.4);flex-shrink:0;
}
.bw-info{flex:1;min-width:0}
.bw-info .bw-name{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--text)}
.bw-info .bw-game{font-size:11px;color:var(--text-mute)}
.bw-amount{font-family:'Sora';font-weight:400;font-size:18px;color:var(--green)}
/* ============================================================
GAME SHELL
============================================================ */
/* Liquid-glass shell — translucent base + subtle inner highlights + blur
so the bg orbs/grid show through faintly. Replaces the solid surface look. */
.game-shell{
position:relative;
background:
linear-gradient(135deg, rgba(28,12,16,.55), rgba(16,8,10,.45));
border:1px solid rgba(255,255,255,.08);border-radius:24px;
padding:24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 0 0 1px rgba(255,82,82,.04),
var(--shadow-panel);
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
max-width:none;width:100%;margin:0;
overflow:hidden;
}
.game-shell::before{
/* Liquid sheen — soft pink/orange highlight that drifts across the top edge. */
content:"";position:absolute;left:-20%;right:-20%;top:0;height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(255,82,82,.6) 25%, rgba(255,56,56,.5) 75%, transparent 100%);
opacity:.45;pointer-events:none;
}
.game-shell::after{
/* Subtle radial glow that "breathes" — gives the panel life without being noisy. */
content:"";position:absolute;inset:-40%;
background:radial-gradient(ellipse 60% 40% at 30% 0%, rgba(255,82,82,.08), transparent 60%),
radial-gradient(ellipse 60% 40% at 70% 100%, rgba(122,14,14,.07), transparent 60%);
pointer-events:none;z-index:0;
}
.game-shell > *{position:relative;z-index:1}
/* ============================================================
GAME GUIDE — collapsible "How to play" panel under each game
============================================================ */
/* ============================================================
GAME GUIDES — collapsible "How it works" strips at the bottom
of every game page. Old design used a "?" pill icon and dense
columns. New design: animated game thumbnail (lifted from the
game-header SVG so it's a real image, not a glyph), three
numbered sections (Rules / Tips / Payouts) with clean typography,
per-game accent colors picked from GAME_COLORS in app.js so each
guide reads as part of its game's brand.
============================================================ */
.game-guide{
--gg-accent: rgba(255,82,82,.55);
--gg-accent-soft: rgba(255,82,82,.10);
margin-top:24px;
border-radius:20px;
background:
radial-gradient(ellipse 360px 160px at 0% 0%, var(--gg-accent-soft), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
border:1px solid rgba(255,255,255,.07);
overflow:hidden;
position:relative;
transition:border-color .25s, box-shadow .25s;
}
.game-guide:hover{border-color:rgba(255,255,255,.12)}
.game-guide.open{
border-color:var(--gg-accent);
box-shadow:0 8px 30px rgba(0,0,0,.25), 0 0 0 1px var(--gg-accent-soft);
}
.game-guide::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg, transparent, var(--gg-accent), transparent);
opacity:.6;
}
/* Per-game accent colors — drives the thumbnail glow, the section number
gradient, and the open-state border. */
.game-guide.gg-crash {--gg-accent:rgba(221,28,28,.6); --gg-accent-soft:rgba(221,28,28,.12)}
.game-guide.gg-bj {--gg-accent:rgba(255,82,82,.6); --gg-accent-soft:rgba(255,82,82,.12)}
.game-guide.gg-slots {--gg-accent:rgba(255,170,58,.6); --gg-accent-soft:rgba(255,170,58,.12)}
.game-guide.gg-dice {--gg-accent:rgba(255,82,82,.6); --gg-accent-soft:rgba(255,82,82,.12)}
.game-guide.gg-mines {--gg-accent:rgba(95,232,212,.6); --gg-accent-soft:rgba(95,232,212,.12)}
.game-guide.gg-limbo {--gg-accent:rgba(255,82,82,.6); --gg-accent-soft:rgba(255,82,82,.12)}
.game-guide.gg-plinko {--gg-accent:rgba(255,56,56,.6); --gg-accent-soft:rgba(255,56,56,.12)}
.game-guide.gg-upgrader {--gg-accent:rgba(160,24,24,.6); --gg-accent-soft:rgba(160,24,24,.12)}
/* ---- Header (clickable) ---- */
.gg-head{
display:flex;align-items:center;gap:16px;
width:100%;
padding:18px 22px;
background:transparent;
border:0;
text-align:left;
cursor:pointer;
color:var(--text);
font-family:inherit;
transition:background .25s;
}
.gg-head:hover{background:rgba(255,255,255,.025)}
.gg-head:focus-visible{outline:2px solid var(--gg-accent); outline-offset:-2px}
.gg-thumb{
flex-shrink:0;
width:64px; height:64px;
border-radius:14px;
display:flex; align-items:center; justify-content:center;
background:
radial-gradient(ellipse 60% 60% at 50% 30%, var(--gg-accent-soft), transparent 70%),
rgba(10,8,11,.55);
border:1px solid rgba(255,255,255,.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 0 24px var(--gg-accent-soft);
position:relative;
overflow:hidden;
}
.gg-thumb svg, .gg-thumb .gh-svg{
width:42px; height:42px;
filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
/* Subtle radial glow that pulses behind the thumb */
.gg-thumb::after{
content:"";
position:absolute; inset:0;
background:radial-gradient(ellipse 60% 40% at 50% 100%, var(--gg-accent-soft), transparent 70%);
pointer-events:none;
animation:ggThumbGlow 4s ease-in-out infinite;
}
@keyframes ggThumbGlow{
0%,100%{opacity:.5}
50%{opacity:1}
}
.game-guide.open .gg-thumb{
border-color:var(--gg-accent);
}
.gg-title-block{
flex:1; min-width:0;
display:flex; flex-direction:column; gap:2px;
}
.gg-eyebrow{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:10px; font-weight:800; letter-spacing:.18em;
color:var(--text-mute, #5a3030);
text-transform:uppercase;
opacity:.85;
}
.gg-title{
font-family:'Sora',sans-serif;
font-weight:700; font-size:20px;
color:#fff;
letter-spacing:-.005em;
line-height:1.2;
}
.gg-subtitle{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:12px; font-weight:600;
color:var(--text-dim, #b6c0e4);
letter-spacing:.01em;
}
.gg-cta{
flex-shrink:0;
display:inline-flex; align-items:center; gap:8px;
padding:8px 14px;
border-radius:10px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700; font-size:11px; letter-spacing:.06em;
color:var(--text-dim, #b6c0e4);
text-transform:uppercase;
transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.gg-head:hover .gg-cta{
background:var(--gg-accent-soft);
border-color:var(--gg-accent);
color:#fff;
transform:translateX(2px);
}
.gg-cta-chev{
display:inline-block;
font-size:18px; line-height:1;
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.game-guide.open .gg-cta-chev{transform:rotate(90deg)}
.game-guide.open .gg-cta{
background:var(--gg-accent-soft);
border-color:var(--gg-accent);
color:#fff;
}
.game-guide.open .gg-cta .gg-cta-text::before{
content:"Hide ";
}
.game-guide.open .gg-cta .gg-cta-text{
font-size:0; /* hide original text, show "Hide" via ::before */
letter-spacing:0;
}
.game-guide.open .gg-cta .gg-cta-text::before{
font-size:11px; letter-spacing:.06em;
}
/* ---- Body ---- */
.gg-body{
display:grid; grid-template-rows:0fr;
transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.game-guide.open .gg-body{grid-template-rows:1fr}
.gg-body-inner{overflow:hidden; min-height:0}
.gg-content{
padding:0 22px 22px;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-areas:
"rules tips"
"payouts payouts";
gap:18px;
}
.gg-section-rules {grid-area:rules}
.gg-section-tips {grid-area:tips}
.gg-section-payouts {grid-area:payouts}
@media (max-width:760px){
.gg-content{
grid-template-columns:1fr;
grid-template-areas:"rules" "tips" "payouts";
gap:14px;
}
}
.gg-section{
padding:16px;
border-radius:14px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
border:1px solid rgba(255,255,255,.05);
}
.gg-section h4{
display:flex; align-items:center; gap:10px;
font-family:'Sora',sans-serif;
font-weight:600; font-size:13px;
color:#fff;
margin:0 0 12px;
letter-spacing:0;
text-transform:none;
}
.gg-section-num{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px;
border-radius:8px;
background:linear-gradient(135deg, var(--gg-accent), rgba(255,255,255,.1));
color:#fff;
font-family:'JetBrains Mono','Sora',monospace;
font-weight:700; font-size:11px;
letter-spacing:0;
box-shadow:0 0 12px var(--gg-accent-soft);
}
.gg-list{
list-style:none;
padding:0; margin:0;
counter-reset:gg-step;
}
.gg-list li{
position:relative;
padding:6px 0 6px 22px;
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:500; font-size:13.5px;
line-height:1.55;
color:var(--text-dim, #b6c0e4);
}
.gg-list li::before{
content:"";
position:absolute; left:0; top:13px;
width:8px; height:8px;
border-radius:50%;
background:var(--gg-accent);
box-shadow:0 0 8px var(--gg-accent-soft);
}
.gg-list li strong{color:#fff; font-weight:700}
.gg-list li em{color:#fff; font-style:normal; font-weight:600}
.gg-payouts{
display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
gap:8px;
}
.gg-payout-row{
display:flex; justify-content:space-between; align-items:center;
padding:10px 14px;
border-radius:10px;
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.06);
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700; font-size:12px;
transition:transform .12s, border-color .12s, background .12s;
}
.gg-payout-row:hover{
transform:translateY(-1px);
border-color:var(--gg-accent);
background:var(--gg-accent-soft);
}
.gg-payout-row .gg-pay-label{color:var(--text-dim, #b6c0e4); letter-spacing:.02em}
.gg-payout-row .gg-pay-mult{
color:#fff;
font-family:'Sora',sans-serif;
font-weight:700;
font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
.gg-head{padding:14px 16px; gap:12px}
.gg-thumb{width:52px; height:52px}
.gg-thumb svg, .gg-thumb .gh-svg{width:34px; height:34px}
.gg-title{font-size:17px}
.gg-subtitle{font-size:11px}
.gg-cta-text{display:none}
.gg-cta{padding:8px 10px; min-width:34px}
.gg-content{padding:0 16px 16px}
}
.game-header{
position:relative;
display:flex;flex-direction:column;align-items:center;justify-content:center;
margin-bottom:24px;padding:22px 22px 24px;gap:10px;
border-radius:18px;
background:
radial-gradient(ellipse 380px 160px at 50% 0%, rgba(255,82,82,.18), transparent 70%),
radial-gradient(ellipse 360px 140px at 50% 100%, rgba(160,24,24,.18), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 6px 18px rgba(0,0,0,.3);
text-align:center;
}
/* Compact variant — used for game routes where the EOS row + live multi
already serve as the visual header. Avoids stealing 250px of vertical
space with a redundant title block. */
.game-header.gh-compact{
flex-direction:row;justify-content:space-between;align-items:center;
padding:10px 16px;
margin-bottom:14px;
gap:12px;
text-align:left;
}
.gh-compact .game-title{font-size:20px;letter-spacing:.04em;animation:none;filter:none}
.gh-compact .fair-pill{margin-left:auto}
/* Per-game animated icon — small, sits inline with the title. */
.gh-compact .gh-icon{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;flex-shrink:0;
filter:drop-shadow(0 0 10px rgba(255,82,82,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.gh-compact .gh-icon svg{width:100%;height:100%;display:block;overflow:visible}
.gh-compact .gh-rocket-grp{
transform-origin:24px 22px;transform-box:fill-box;
animation:ghCompactBob 3.2s ease-in-out infinite;
}
@keyframes ghCompactBob{
0%,100%{transform:translateY(0) rotate(-2deg)}
50% {transform:translateY(-3px) rotate(2deg)}
}
.gh-compact .gh-rocket-flame{
transform-origin:24px 38px;transform-box:fill-box;
animation:ghCompactFlame .25s ease-in-out infinite alternate;
}
@keyframes ghCompactFlame{
from{transform:scaleY(.85) scaleX(.92)}
to {transform:scaleY(1.1) scaleX(1.05)}
}
.game-header::before{
/* soft drifting ambient glow */
content:"";position:absolute;inset:-20%;
background:
radial-gradient(circle 200px at 30% 50%, rgba(255,108,174,.16), transparent 70%),
radial-gradient(circle 200px at 70% 50%, rgba(160,24,24,.16), transparent 70%);
filter:blur(20px);
animation:bgDriftA 14s ease-in-out infinite;
pointer-events:none;z-index:0;
}
.game-header::after{
/* subtle pink underline accent — softer than the rainbow strip */
content:"";position:absolute;left:50%;bottom:0;
width:160px;height:2px;transform:translateX(-50%);
background:linear-gradient(90deg, transparent, rgba(255,82,82,.55), transparent);
pointer-events:none;z-index:0;
}
.game-title{
font-family:'Sora';font-size:42px;color:var(--text);font-weight:700;
letter-spacing:.02em;
display:block;text-align:center;
position:relative;z-index:1;margin:0;
background:linear-gradient(95deg, #ffffff 0%, #ffe0e0 20%, #ffffff 40%, #ffd4f0 60%, #ffffff 80%, #ffe0e0 100%);
background-size:220% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:titleShimmer 5.5s linear infinite, titleFloat 6s ease-in-out infinite;
filter:drop-shadow(0 0 14px rgba(255,82,82,.45));
}
@keyframes titleShimmer{from{background-position:-220% 0}to{background-position:220% 0}}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* =========== animated game art (per-game) =========== */
.gh-art{
position:relative;z-index:1;
width:96px;height:96px;
display:flex;align-items:center;justify-content:center;
filter:drop-shadow(0 0 18px rgba(255,82,82,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.45));
animation:ghArtFloat 4.5s ease-in-out infinite;
}
@keyframes ghArtFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
.gh-svg{width:100%;height:100%;display:block;overflow:visible}
/* sparkle dots that twinkle on every header */
.gh-spark{transform-origin:center;transform-box:fill-box;animation:ghSparkle 2.4s ease-in-out infinite}
.gh-spark-a{animation-delay:-0s}
.gh-spark-b{animation-delay:-.6s}
.gh-spark-c{animation-delay:-1.2s}
.gh-spark-d{animation-delay:-1.8s}
@keyframes ghSparkle{
0%,100%{opacity:.2;transform:scale(.6)}
50%{opacity:1;transform:scale(1.4)}
}
/* status pill is no longer shown in the header — it lives off-screen but stays
in the DOM so existing JS can keep updating its text/className without errors */
.game-header .game-status{
position:absolute;left:-9999px;top:-9999px;
pointer-events:none;
}
/* ----- Crash: rocket bobs + flame flickers ----- */
.gh-svg-rocket .gh-rocket-grp{
transform-origin:40px 40px;transform-box:fill-box;
animation:ghRocketBob 1.6s ease-in-out infinite;
}
.gh-svg-rocket .gh-rocket-flame{
transform-origin:40px 60px;transform-box:fill-box;
animation:ghFlameFlicker .26s ease-in-out infinite alternate;
}
@keyframes ghRocketBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes ghFlameFlicker{
from{transform:scaleY(.85) scaleX(1.1);opacity:.85}
to {transform:scaleY(1.15) scaleX(.92);opacity:1}
}
/* ----- Blackjack: cards rock back and forth ----- */
.gh-svg-cards .gh-card-back{
transform-origin:33px 47px;transform-box:fill-box;
animation:ghCardRockA 3.2s ease-in-out infinite;
}
.gh-svg-cards .gh-card-front{
transform-origin:51px 37px;transform-box:fill-box;
animation:ghCardRockB 3.2s ease-in-out infinite;
}
@keyframes ghCardRockA{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-4deg)}}
@keyframes ghCardRockB{0%,100%{transform:rotate(8deg)}50%{transform:rotate(2deg)}}
/* ----- Slots: reels spin/blur cycle ----- */
.gh-svg-slots .gh-reel{transform-origin:center;transform-box:fill-box}
.gh-svg-slots .gh-reel-1{animation:ghReelSpin 1.8s ease-in-out infinite}
.gh-svg-slots .gh-reel-2{animation:ghReelSpin 1.8s ease-in-out infinite -.3s}
.gh-svg-slots .gh-reel-3{animation:ghReelSpin 1.8s ease-in-out infinite -.6s}
@keyframes ghReelSpin{
0%,80%,100%{transform:translateY(0);opacity:1}
20%,60%{transform:translateY(-4px);opacity:.7}
}
/* ----- Dice: tumble in place ----- */
.gh-svg-dice .gh-die-blue{
transform-origin:22px 38px;transform-box:fill-box;
animation:ghDieTumbleA 3s ease-in-out infinite;
}
.gh-svg-dice .gh-die-red{
transform-origin:56px 52px;transform-box:fill-box;
animation:ghDieTumbleB 3s ease-in-out infinite -.4s;
}
@keyframes ghDieTumbleA{
0%,100%{transform:rotate(-8deg) translateY(0)}
50%{transform:rotate(8deg) translateY(-3px)}
}
@keyframes ghDieTumbleB{
0%,100%{transform:rotate(10deg) translateY(0)}
50%{transform:rotate(-6deg) translateY(-3px)}
}
/* ----- Mines: spark on fuse + bomb wobble ----- */
.gh-svg-mine .gh-mine-grp{
transform-origin:40px 50px;transform-box:fill-box;
animation:ghMineWobble 2.4s ease-in-out infinite;
}
.gh-svg-mine .gh-mine-spark{
transform-origin:40px 9px;transform-box:fill-box;
animation:ghMineSparkle .35s ease-in-out infinite alternate;
}
@keyframes ghMineWobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ghMineSparkle{
from{transform:scale(.85);opacity:.7}
to {transform:scale(1.25);opacity:1}
}
/* ----- Limbo: line draws from bottom-left to top-right repeatedly ----- */
.gh-svg-limbo .gh-limbo-line{
animation:ghLimboDraw 3s ease-in-out infinite;
filter:drop-shadow(0 0 6px rgba(255,82,82,.7));
}
.gh-svg-limbo .gh-limbo-star{
transform-origin:72px 12px;transform-box:fill-box;
animation:ghLimboStar 3s ease-in-out infinite;
}
.gh-svg-limbo .gh-limbo-x{
animation:ghLimboNumber 3s ease-in-out infinite;
}
@keyframes ghLimboDraw{
0%{stroke-dashoffset:120}
60%{stroke-dashoffset:0}
85%{stroke-dashoffset:0;opacity:1}
100%{stroke-dashoffset:0;opacity:.2}
}
@keyframes ghLimboStar{
0%,55%{transform:scale(.4);opacity:0}
62%{transform:scale(1.4);opacity:1}
85%{transform:scale(1);opacity:1}
100%{transform:scale(1);opacity:0}
}
@keyframes ghLimboNumber{
0%,55%{opacity:0}
70%,90%{opacity:1}
100%{opacity:0}
}
/* ----- Coinflip: a coin that lifts, squishes through edge-on,
swaps face (heads → tails → heads), and lands. Squish + face-swap
percentages are deliberately INTERLOCKED (heads disappears the
moment the coin reaches edge-on, edge cylinder flashes during the
squish window, tails appears as the coin re-expands). Cubic ease
curves on the squish + the lift make the motion feel weighted, not
robotic. ----- */
.gh-svg-coinflip .gh-cf-grp{
transform-origin:40px 40px;transform-box:fill-box;
animation:ghCoinflipFlip 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.gh-svg-coinflip .gh-cf-shadow{
animation:ghCoinflipShadow 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
.gh-svg-coinflip .gh-cf-heads{ animation:ghCoinflipHeads 2.4s linear infinite }
.gh-svg-coinflip .gh-cf-tails{ animation:ghCoinflipTails 2.4s linear infinite; opacity:0 }
.gh-svg-coinflip .gh-cf-edge { animation:ghCoinflipEdge 2.4s linear infinite; opacity:0 }
@keyframes ghCoinflipFlip{
/* Two-flip cycle: heads → edge (25%) → tails (50%) → edge (75%) → heads (100%).
Lift peaks at 50% so the coin appears to ride a parabolic arc. */
0% { transform:translateY(0) scaleY(1) }
25% { transform:translateY(-9px) scaleY(.10) }
50% { transform:translateY(-14px) scaleY(1) }
75% { transform:translateY(-9px) scaleY(.10) }
100% { transform:translateY(0) scaleY(1) }
}
@keyframes ghCoinflipShadow{
0%,100%{ rx:18;opacity:.50 }
25%,75%{ rx:10;opacity:.18 }
50% { rx:7; opacity:.12 }
}
/* Heads = visible 0–22% and 78–100%. Faded in/out across the squish
window so the swap reads as a real flip, not a hard cut. */
@keyframes ghCoinflipHeads{
0%,22% { opacity:1 }
25% { opacity:0 }
75% { opacity:0 }
78%,100% { opacity:1 }
}
@keyframes ghCoinflipTails{
0%,22% { opacity:0 }
28%,72% { opacity:1 }
78%,100% { opacity:0 }
}
/* Edge cylinder = visible only in the squish window where neither
face is shown — fills that 22%-28% / 72%-78% gap so there's no
blank frame. */
@keyframes ghCoinflipEdge{
0%,21% { opacity:0 }
23%,27% { opacity:1 }
29%,71% { opacity:0 }
73%,77% { opacity:1 }
79%,100% { opacity:0 }
}
/* Sidebar coinflip icon is now a static SVG (matches the visual flow of
the other sidebar icons — none of them animate). The shared keyframes
below are still used by .cf-emoji (live-feed cards) and .hi-coinflip
(history rows) so they stay defined. */
@keyframes sbCoinflipFlip{
0%,100%{ transform:scaleY(1) translateY(0) }
25% { transform:scaleY(.10) translateY(-2px) }
50% { transform:scaleY(1) translateY(-3px) }
75% { transform:scaleY(.10) translateY(-2px) }
}
@keyframes sbCoinflipColor{
0%,22% { fill:currentColor }
28%,72% { fill:#dd1c1c }
78%,100% { fill:currentColor }
}
@keyframes sbCoinflipMark{
0%,22% { opacity:1 }
28%,72% { opacity:0 }
78%,100% { opacity:1 }
}
@keyframes sbCoinflipShadow{
0%,100%{ ry:1;opacity:.35 }
25%,75%{ ry:.5;opacity:.15 }
50% { ry:.4;opacity:.10 }
}
/* ----- Mini coin (history rows, live feed cards) — reuses the same
animated emblem as the sidebar/header, sized for inline contexts.
----- */
.cf-emoji{
display:inline-block;width:1.4em;height:1.4em;
vertical-align:-.3em;flex-shrink:0;
position:relative;
}
.cf-emoji svg{ width:100%;height:100%;display:block;color:#ffd900 }
.cf-emoji .cf-em-coin{
transform-origin:50% 50%;transform-box:fill-box;
animation:sbCoinflipFlip 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
.cf-emoji .cf-em-disc{ animation:sbCoinflipColor 2.4s linear infinite }
.cf-emoji .cf-em-mark{ animation:sbCoinflipMark 2.4s linear infinite }
/* Static-side variants (used when we know the rolled side and want
to lock the visual to that face). */
.cf-emoji-heads .cf-em-coin, .cf-emoji-tails .cf-em-coin,
.cf-emoji-heads .cf-em-disc, .cf-emoji-tails .cf-em-disc,
.cf-emoji-heads .cf-em-mark, .cf-emoji-tails .cf-em-mark{ animation:none }
.cf-emoji-heads .cf-em-disc{ fill:#ffd900 }
.cf-emoji-tails .cf-em-disc{ fill:#dd1c1c }
/* History-row variant — same animation, plumbed into the .hr-icon slot
that every game's history row uses. */
.hi-coinflip .hi-cf-coin{
transform-origin:50% 50%;transform-box:fill-box;
animation:sbCoinflipFlip 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
.hi-coinflip .hi-cf-disc{ animation:sbCoinflipColor 2.4s linear infinite }
.hi-coinflip .hi-cf-mark{ animation:sbCoinflipMark 2.4s linear infinite }
.hi-coinflip .hi-cf-shadow{ animation:sbCoinflipShadow 2.4s cubic-bezier(.45,.05,.55,.95) infinite }
/* ----- Plinko: ball drops repeatedly through pegs ----- */
.gh-svg-plinko .gh-plinko-ball{
transform-origin:center;transform-box:fill-box;
animation:ghPlinkoBall 2.4s cubic-bezier(.4,1.6,.6,1) infinite;
filter:drop-shadow(0 0 4px rgba(255,217,0,.8));
}
.gh-svg-plinko .gh-pegs circle{animation:ghPegFlash 2.4s ease-in-out infinite}
.gh-svg-plinko .gh-pegs circle:nth-child(2){animation-delay:.2s}
.gh-svg-plinko .gh-pegs circle:nth-child(3){animation-delay:.3s}
.gh-svg-plinko .gh-pegs circle:nth-child(5){animation-delay:.5s}
.gh-svg-plinko .gh-pegs circle:nth-child(6){animation-delay:.7s}
.gh-svg-plinko .gh-pegs circle:nth-child(8){animation-delay:.9s}
.gh-svg-plinko .gh-pegs circle:nth-child(9){animation-delay:1.1s}
@keyframes ghPlinkoBall{
0% {transform:translate(0,0)}
20% {transform:translate(-6px,16px)}
40% {transform:translate(4px,30px)}
60% {transform:translate(-4px,42px)}
80% {transform:translate(6px,52px)}
100% {transform:translate(0,0);opacity:0}
}
@keyframes ghPegFlash{
0%,100%{fill:rgba(255,255,255,.5)}
50%{fill:#ffe0e0;filter:drop-shadow(0 0 4px #ff5050)}
}
/* ----- Upgrader: arc fills, pointer ticks ----- */
.gh-svg-upgrader .gh-up-arc{
stroke-dasharray:175.93;
stroke-dashoffset:175.93;
animation:ghUpgraderFill 3s ease-in-out infinite;
filter:drop-shadow(0 0 6px rgba(255,82,82,.6));
}
.gh-svg-upgrader .gh-up-pointer{
transform-origin:40px 40px;transform-box:fill-box;
animation:ghUpgraderTick 3s ease-in-out infinite;
}
@keyframes ghUpgraderFill{
0%{stroke-dashoffset:175.93}
60%{stroke-dashoffset:44}
100%{stroke-dashoffset:175.93}
}
@keyframes ghUpgraderTick{
0%,100%{transform:rotate(0deg)}
60%{transform:rotate(270deg)}
}
/* ----- Affiliate: coins float up ----- */
.gh-svg-affiliate .gh-aff-coin{transform-origin:center;transform-box:fill-box}
.gh-svg-affiliate .gh-aff-coin-1{animation:ghAffCoin 2.4s ease-in-out infinite}
.gh-svg-affiliate .gh-aff-coin-2{animation:ghAffCoin 2.4s ease-in-out infinite -.4s}
.gh-svg-affiliate .gh-aff-coin-3{animation:ghAffCoin 2.4s ease-in-out infinite -.8s}
.gh-svg-affiliate .gh-aff-people{
transform-origin:40px 36px;transform-box:fill-box;
animation:ghAffPeople 3s ease-in-out infinite;
}
@keyframes ghAffCoin{
0% {transform:translateY(8px) scale(.7);opacity:0}
35% {opacity:1}
100% {transform:translateY(-12px) scale(1);opacity:0}
}
@keyframes ghAffPeople{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (max-width:760px){
.game-header{padding:18px 14px 20px}
.game-title{font-size:32px}
.gh-art{width:78px;height:78px}
}
.game-status{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;letter-spacing:1.5px;
padding:8px 16px;border-radius:99px;
background:linear-gradient(135deg, rgba(221,28,28,.2), rgba(221,28,28,.05));
border:1px solid rgba(221,28,28,.5);color:var(--green);
}
.game-status.danger{background:linear-gradient(135deg,rgba(221,28,28,.2),rgba(221,28,28,.05));border-color:rgba(221,28,28,.5);color:#ff5252}
.game-status.win{background:linear-gradient(135deg,rgba(255,217,0,.2),rgba(255,217,0,.05));border-color:rgba(255,217,0,.5);color:var(--gold)}
.control-group label{
display:block;font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;letter-spacing:2px;
color:var(--text-mute);margin-bottom:8px;
}
.bet-input{
display:flex;align-items:center;gap:6px;
padding:10px 14px;
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(255,82,82,.18);border-radius:12px;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
transition:border-color .2s, box-shadow .2s;
}
.bet-input:focus-within{
border-color:var(--pink);
box-shadow:0 0 0 4px rgba(221,28,28,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.bet-input input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'Plus Jakarta Sans';font-weight:700;font-size:18px;min-width:0;transition:color .25s, text-shadow .25s}
.bet-input input.bet-input-bump{
animation:betInputBump .32s cubic-bezier(.34,1.56,.64,1);
color:#ff5050;text-shadow:0 0 12px rgba(255,217,0,.7);
}
@keyframes betInputBump{
0%{transform:scale(1)}
45%{transform:scale(1.08)}
100%{transform:scale(1)}
}
.bet-input button{
background:rgba(255,82,82,.15);border:1px solid rgba(255,82,82,.3);color:var(--pink);
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;
padding:4px 10px;border-radius:99px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;line-height:1;
transition:background .2s, color .2s, transform .15s, box-shadow .25s;
}
.bet-input button:hover{background:var(--pink);color:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,82,82,.55)}
.bet-input button:active{transform:scale(.9);background:var(--pink-deep);color:#fff}
.bet-input button.bet-action-flash{
animation:betActionFlash .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes betActionFlash{
0%{transform:scale(1);box-shadow:0 0 0 rgba(255,82,82,0)}
40%{transform:scale(1.18);box-shadow:0 0 22px rgba(255,217,0,.85), 0 0 40px rgba(255,82,82,.5);background:#ff5050;color:#5b2640}
100%{transform:scale(1);box-shadow:0 0 0 rgba(255,82,82,0)}
}
.suffix{color:var(--text-mute);font-family:'Plus Jakarta Sans';font-weight:700}
.history-bar{
display:flex;gap:8px;flex-wrap:wrap;
padding:14px;border-radius:14px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
margin-top:18px;min-height:48px;
}
.hist-item{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;
padding:6px 14px;border-radius:99px;
background:rgba(255,82,82,.12);border:1px solid rgba(255,82,82,.3);color:var(--pink);
}
.hist-item.low{background:rgba(221,28,28,.12);border-color:rgba(221,28,28,.4);color:#ff5252}
.hist-item.high{background:rgba(221,28,28,.12);border-color:rgba(221,28,28,.4);color:var(--green)}
.hist-item.huge{background:linear-gradient(135deg,#ff5050,#dd1c1c);border-color:transparent;color:#000}
/* ============================================================
CRASH — multi-player overlay (EOS row, history bar, players panel)
============================================================ */
.history-bar-top{margin:0 0 14px;max-width:none}
/* Two-column layout: bet controls + players list on the LEFT,
big rocket board on the RIGHT. Stacks on narrow viewports. */
.crash-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:18px;align-items:start;
margin-bottom:18px;
}
.crash-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.crash-right{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:980px){
.crash-layout{grid-template-columns:1fr}
}
.crash-eos-row{
margin:0 0 4px;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.crash-eos-block{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border-radius:10px;
background:linear-gradient(135deg, rgba(122,14,14,.22), rgba(221,28,28,.1));
border:1px solid rgba(122,14,14,.35);
font-family:'JetBrains Mono','Sora',monospace;
}
.ceb-label{
font-family:'Sora';font-weight:800;font-size:10px;letter-spacing:.18em;
color:#a01818;
}
.ceb-num{
font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;
color:#fff;letter-spacing:.02em;
}
.crash-network{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;border-radius:10px;
background:rgba(0,0,0,.28);
border:1px solid var(--line-2);
font-family:'Sora';font-weight:700;font-size:11px;letter-spacing:.12em;
color:var(--text-dim);
}
.cn-dot{width:8px;height:8px;border-radius:50%;background:#ff5252;box-shadow:0 0 8px #ff5252;animation:cnPulse 1.6s ease-in-out infinite}
.crash-network[data-status="down"] .cn-dot{background:#dd1c1c;box-shadow:0 0 8px #dd1c1c}
.crash-network[data-status="waiting"] .cn-dot{background:#ff5252;box-shadow:0 0 8px #ff5252}
@keyframes cnPulse{0%,100%{opacity:.7}50%{opacity:1}}
.crash-fairness{
margin-left:auto;
padding:8px 14px;font-size:11px;letter-spacing:.12em;
}
.crash-phase-pill{
position:absolute;left:16px;top:14px;z-index:9;
display:flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:99px;
background:rgba(15,8,10,.72);
border:1px solid rgba(255,82,82,.4);
font-family:'Sora';font-weight:700;font-size:11px;letter-spacing:.12em;
color:#ffe0e0;
backdrop-filter:blur(10px) saturate(140%);
}
.cph-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:cphPulse 1.4s ease-in-out infinite}
@keyframes cphPulse{0%,100%{opacity:.65}50%{opacity:1}}
.crash-phase-pill[data-phase="flight"] .cph-dot{background:#ff5252;box-shadow:0 0 10px #ff5252}
.crash-phase-pill[data-phase="crashed"] .cph-dot{background:#dd1c1c;box-shadow:0 0 10px #dd1c1c}
.crash-round-badge{
position:absolute;right:16px;top:14px;z-index:9;
padding:6px 12px;border-radius:99px;
background:rgba(15,8,10,.72);
border:1px solid rgba(255,255,255,.18);
font-family:'Sora';font-weight:800;font-size:12px;letter-spacing:.08em;
color:#e8d4d4;
backdrop-filter:blur(10px);
}
/* Players panel — liquid-glass card matching the game-shell aesthetic. */
.crash-players{
position:relative;
width:100%;margin:0;
padding:14px 16px;border-radius:14px;
background:linear-gradient(180deg, rgba(28,12,16,.45), rgba(16,8,10,.4));
border:1px solid rgba(255,82,82,.22);
backdrop-filter:blur(12px) saturate(150%);
-webkit-backdrop-filter:blur(12px) saturate(150%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cp-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:10px;
}
.cp-title{
font-family:'Sora';font-weight:800;font-size:11px;letter-spacing:.18em;color:#ff5252;
}
.cp-count{
font-family:'Sora';font-weight:800;font-size:13px;color:var(--text);
padding:2px 10px;border-radius:99px;
background:rgba(255,82,82,.2);border:1px solid rgba(255,82,82,.4);
min-width:32px;text-align:center;
}
.cp-list{
display:flex;flex-direction:column;gap:4px;
max-height:340px;overflow-y:auto;overflow-x:hidden; /* prevent hover-translate pulse */
padding-right:4px;
scrollbar-gutter:stable;
}
.cp-list::-webkit-scrollbar{width:6px}
.cp-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.cp-empty{
padding:18px 12px;text-align:center;
font-family:'Plus Jakarta Sans';font-weight:600;color:var(--text-mute);font-size:12px;
}
/* The row stays single-line with consistent column widths so 100 rows look
uniform and don't shuffle widths on each poll. */
.cp-row{
display:grid;
grid-template-columns:24px minmax(0,1fr) auto;
gap:10px;align-items:center;
padding:6px 10px;border-radius:8px;
background:rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.05);
font-size:12.5px;
transition:background .2s, border-color .2s;
}
.cp-row.cp-mine{
background:linear-gradient(90deg, rgba(221,28,28,.18), rgba(255,56,56,.05));
border-color:rgba(221,28,28,.45);
box-shadow:0 0 14px rgba(255,82,82,.25);
}
.cp-row.cp-cashed{border-color:rgba(255,82,82,.4);background:rgba(255,82,82,.06)}
.cp-row.cp-lost{opacity:.5}
.cp-av{
width:24px;height:24px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:12px;flex-shrink:0;
border:1.5px solid rgba(255,255,255,.18);
overflow:hidden;background:rgba(0,0,0,.3);
}
.cp-av-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cp-name{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12.5px;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
min-width:0;
}
.cp-right{
display:inline-flex;align-items:center;gap:8px;
white-space:nowrap;
font-family:'Sora';font-weight:700;font-size:12px;
}
.cp-bet{color:var(--text-dim)}
.cp-auto{
font-family:'Plus Jakarta Sans';font-weight:600;font-size:10px;
padding:1px 7px;border-radius:99px;
background:rgba(122,14,14,.18);color:#ff7a7a;
border:1px solid rgba(122,14,14,.4);
}
.cp-multi{font-weight:800}
.cp-multi.cp-cashed{color:#28c76f;text-shadow:0 0 8px rgba(40,199,111,.5)}
.cp-multi.cp-lost{color:#ff5252}
.cp-payout{font-weight:800}
.cp-payout.cp-win{color:#28c76f}
.cp-payout.cp-loss{color:#ff5252}
@media (min-width:1080px){
.cp-list{max-height:480px}
}
/* Disabled-state action button (e.g. while waiting for next round). */
.crash-bet-btn.btn-disabled{
opacity:.55;cursor:not-allowed;
background:linear-gradient(135deg, var(--surface-2), var(--surface));
}
.crash-board{
position:relative;
width:100%;
aspect-ratio:16 / 11;
min-height:480px;
max-height:660px;
margin:0;
border-radius:18px;
border:1px solid var(--line-2);
overflow:hidden;
background:#04061a;
}
.crash-board.shake{animation:boardShake .35s cubic-bezier(.36,.07,.19,.97)}
@keyframes boardShake{
0%,100%{transform:translate(0)}
10%,30%,50%,70%,90%{transform:translate(-4px,2px)}
20%,40%,60%,80%{transform:translate(4px,-2px)}
}
/* layered scrolling sky */
.crash-sky{
position:absolute;inset:0;
background:
radial-gradient(ellipse 600px 300px at 50% 100%, rgba(255,82,82,.18), transparent 70%),
radial-gradient(ellipse 500px 400px at 50% -10%, rgba(160,24,24,.18), transparent 70%),
linear-gradient(180deg,#04061a 0%, #0a0e30 40%, #1a0942 80%, #2a0e5a 100%);
}
/* Two parallax star layers — scroll faster as multi grows. The previous
implementation stacked 12 radial-gradient images PER LAYER, which makes
the browser re-rasterize the area on every scroll frame because gradient
backgrounds aren't always tile-cached. Switched to a single inline-SVG
data URI — paints once, gets cached as an image, just translates each
frame. ~5× cheaper paint cost on Chromium's "Rendering" perf panel.
`contain: strict` keeps the layer's repaint isolated from the rest of
the board. */
.crash-stars{
position:absolute;inset:-100% 0 -100% 0;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat;
background-size:400px 400px;
animation:starsScroll 6s linear infinite;
will-change:transform;
contain:strict;
}
.crash-stars-2{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat;
background-size:400px 400px;
animation-duration:14s;
opacity:.7;
}
/* Translate by exactly ONE tile height (400px) so the wrap looks identical
to the frame before it. Translating 50% of the layer (which is 3× parent
height) was NOT a multiple of the tile size and produced a visible seam
every cycle. translate3d gets us a free GPU layer too. */
@keyframes starsScroll{
from{transform:translate3d(0,0,0)}
to {transform:translate3d(0,400px,0)}
}
.crash-board[data-flying="1"] .crash-stars{animation-duration:var(--star-speed,3s)}
.crash-board[data-flying="1"] .crash-stars-2{animation-duration:calc(var(--star-speed,3s) * 2.5)}
/* horizon mountain silhouette */
.crash-mountain{
position:absolute;left:0;right:0;bottom:0;height:80px;pointer-events:none;
background:
linear-gradient(180deg, transparent, rgba(0,0,0,.5)),
radial-gradient(60px 40px at 10% 100%, #1f1042, transparent 70%),
radial-gradient(80px 50px at 30% 100%, #2a0e5a, transparent 70%),
radial-gradient(100px 60px at 65% 100%, #1a0942, transparent 70%),
radial-gradient(70px 45px at 90% 100%, #2a0e5a, transparent 70%);
filter:blur(2px);opacity:.7;
}
#crash-canvas{display:none}
/* Crash multi text — sized + centered consistently. Tightened from
font-size 56-140px → 48-110px so the number doesn't feel like it
overflows the rocket's airspace at desktop widths. tabular-nums
keeps the digits from jiggling as they tick (was visibly jumping
when going 9.99→10.00 etc.). */
.crash-multiplier{
position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
font-family:'Sora';font-weight:800;
font-size:clamp(48px, 7.5vw, 110px);
color:#fff;line-height:1;
letter-spacing:-.015em;
font-variant-numeric:tabular-nums;
filter:drop-shadow(0 0 28px rgba(221,28,28,.7)) drop-shadow(0 10px 20px rgba(0,0,0,.65));
pointer-events:none;z-index:8;
transition:color .25s, filter .25s;
text-align:center;white-space:nowrap;
will-change:transform,filter;
}
.crash-multiplier.crashed{
color:#dd1c1c;
filter:drop-shadow(0 0 24px rgba(221,28,28,.9)) drop-shadow(0 0 60px rgba(221,28,28,.5));
animation:crashTextShake .5s cubic-bezier(.36,.07,.19,.97);
}
/* Locked-in (auto-cashout fired) — green so the player sees the win was
secured. Was accidentally swept to red by the broad #22ffaa→red pass;
this is a "you won" cue and stays green for win/loss legibility. */
.crash-multiplier.locked{
color:#28c76f;
filter:drop-shadow(0 0 24px rgba(40,199,111,.9)) drop-shadow(0 0 60px rgba(40,199,111,.45));
}
.crash-multiplier.countdown{
color:#fff;
font-variant-numeric:tabular-nums;
filter:drop-shadow(0 0 22px rgba(255,255,255,.25)) drop-shadow(0 6px 12px rgba(0,0,0,.65));
}
/* The EOS block number is much wider than a "0:08" countdown — shrink it
so #3a0808951 doesn't dwarf the board. Matches the proportional weight
of a normal multiplier reading. */
.crash-multiplier.countdown.eos-block{
font-size:clamp(28px, 4.4vw, 64px);
letter-spacing:0;
font-weight:700;
color:#ffe0e0;
}
@keyframes crashTextShake{
0%,100%{transform:translate(-50%,-50%) scale(1)}
20%{transform:translate(calc(-50% - 10px),-50%) scale(1.1) rotate(-4deg)}
40%{transform:translate(calc(-50% + 10px),-50%) scale(1.1) rotate(4deg)}
60%{transform:translate(calc(-50% - 6px),-50%) scale(1.1) rotate(-2deg)}
80%{transform:translate(calc(-50% + 6px),-50%) scale(1.1) rotate(2deg)}
}
/* Rocket — fixed center-bottom, animates idle bobble & shake during flight */
.crash-rocket{
position:absolute;left:50%;bottom:18%;
transform:translateX(-50%);
z-index:5;
filter:drop-shadow(0 0 16px rgba(255,82,82,.6));
animation:rocketIdle 2.5s ease-in-out infinite;
will-change:transform;
}
@keyframes rocketIdle{
0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}
50%{transform:translateX(-50%) translateY(-6px) rotate(1deg)}
}
.crash-rocket.flying{
animation:rocketFly .35s ease-in-out infinite;
}
@keyframes rocketFly{
0%,100%{transform:translateX(-50%) translateY(0)}
25%{transform:translateX(calc(-50% - 2px)) translateY(-3px)}
50%{transform:translateX(-50%) translateY(0)}
75%{transform:translateX(calc(-50% + 2px)) translateY(-3px)}
}
.crash-rocket.exploding{
animation:rocketExplode .6s cubic-bezier(.32,.72,0,1) forwards;
}
@keyframes rocketExplode{
0%{transform:translateX(-50%) scale(1) rotate(0);opacity:1;filter:brightness(1) drop-shadow(0 0 16px rgba(255,82,82,.6))}
30%{transform:translateX(-50%) scale(1.3) rotate(-15deg);opacity:1;filter:brightness(2.5) drop-shadow(0 0 40px #ff5050)}
100%{transform:translateX(-50%) scale(.2) rotate(180deg);opacity:0;filter:brightness(3) drop-shadow(0 0 60px #dd1c1c)}
}
/* flame trail under rocket */
.crash-flame{
position:absolute;left:50%;top:100%;transform:translateX(-50%);
width:34px;height:60px;
pointer-events:none;
display:flex;align-items:flex-start;justify-content:center;
filter:blur(1px);
}
.crash-flame span{
position:absolute;left:50%;top:0;
width:24px;height:50px;border-radius:0 0 50% 50%;
transform-origin:50% 0;
background:linear-gradient(180deg, #ffe0e0 0%, #ff5050 35%, #dd1c1c 70%, transparent 100%);
}
.crash-flame span:nth-child(1){animation:flameInner .12s steps(3) infinite}
.crash-flame span:nth-child(2){animation:flameMid .15s steps(3) infinite -.04s;width:32px;height:64px;opacity:.55}
.crash-flame span:nth-child(3){animation:flameOuter .18s steps(3) infinite -.08s;width:42px;height:78px;opacity:.3;filter:blur(4px)}
@keyframes flameInner{0%,100%{transform:translateX(-50%) scaleY(.85)}50%{transform:translateX(-50%) scaleY(1.15)}}
@keyframes flameMid{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.3)}}
@keyframes flameOuter{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.45)}}
.crash-rocket:not(.flying):not(.exploding) .crash-flame{opacity:.4}
/* Asteroid — flies in from top-right at crash time */
.crash-asteroid{
position:absolute;right:-150px;top:-150px;
z-index:6;opacity:0;
filter:drop-shadow(0 0 16px rgba(255,170,58,.6));
pointer-events:none;
}
.crash-asteroid.incoming{
opacity:1;
animation:asteroidStrike .5s cubic-bezier(.55,.05,.7,.5) forwards;
}
@keyframes asteroidStrike{
0%{right:-150px;top:-150px;transform:rotate(0)}
100%{right:calc(50% - 50px);top:calc(50% - 30px);transform:rotate(540deg)}
}
.crash-asteroid-trail{
position:absolute;left:-160px;top:50%;
width:200px;height:6px;
background:linear-gradient(90deg, transparent, #ff5050 50%, #fff 80%, #fff 100%);
transform:translateY(-50%) rotate(35deg);
opacity:0;
filter:blur(2px);
}
.crash-asteroid.incoming .crash-asteroid-trail{
animation:trailFade .5s ease-out forwards;
}
@keyframes trailFade{
0%{opacity:0;width:0}
60%{opacity:1;width:240px}
100%{opacity:0;width:240px}
}
/* explosion */
.crash-explosion{
position:absolute;left:50%;top:50%;
width:0;height:0;border-radius:50%;
transform:translate(-50%,-50%);
background:radial-gradient(circle,#fff 0%,#ff5050 25%,#dd1c1c 55%,#dd1c1c 75%,transparent 90%);
pointer-events:none;z-index:7;
}
.crash-explosion.boom{animation:bigBoom .8s ease-out forwards}
@keyframes bigBoom{
0%{width:0;height:0;opacity:1}
60%{width:480px;height:480px;opacity:.9}
100%{width:700px;height:700px;opacity:0}
}
/* falling debris pieces */
.crash-debris{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6}
.debris-piece{
position:absolute;width:14px;height:14px;border-radius:3px;
background:linear-gradient(135deg,#fff,#dde6f5);
box-shadow:0 0 8px rgba(255,170,58,.6);
}
.debris-piece.fall{animation:debrisFall 1.4s cubic-bezier(.4,0,.4,1) forwards}
@keyframes debrisFall{
0%{transform:translate(0,0) rotate(0);opacity:1}
100%{transform:translate(var(--dx),300px) rotate(720deg);opacity:0}
}
.crash-controls{display:flex;flex-direction:column;gap:12px;width:100%;margin:0}
.crash-controls .control-group{width:100%}
/* Keep all 4 button-bar items (½ / 2× / MAX) on the same row as the input.
Previously flex-wrap:wrap pushed MAX to its own line on narrow viewports;
now we tighten input min-width + button padding so they always fit. */
.crash-controls .bet-input{flex-wrap:nowrap;row-gap:0}
.crash-controls .bet-input input{min-width:60px;flex:1 1 80px}
.crash-controls .bet-input button{flex-shrink:0;padding:6px 10px;font-size:11px}
.crash-controls .crash-bet-btn{width:100%;margin-top:4px}
.crash-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
.crash-bet-btn{height:54px}
/* ============================================================
MINES
============================================================ */
.mines-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start;max-width:840px;margin:0 auto}
.mines-panel{display:flex;flex-direction:column;gap:14px}
.mines-panel > .btn{height:54px;font-size:14px;letter-spacing:.16em}
@media (max-width:760px){.mines-layout{grid-template-columns:1fr}}
.mines-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
aspect-ratio:1;padding:14px;
width:100%;max-width:520px;margin:0 auto;
background:linear-gradient(135deg,var(--bg-2),var(--bg-0));
border:1px solid var(--line-2);border-radius:18px;
}
.mine-tile{font-size:32px}
.mine-tile{
aspect-ratio:1;
background:linear-gradient(145deg,var(--surface-2),var(--surface));
border:1px solid var(--line-2);border-radius:14px;cursor:pointer;
position:relative;
transition:transform .25s cubic-bezier(.2,.8,.25,1), border-color .25s, box-shadow .25s;
display:flex;align-items:center;justify-content:center;font-size:36px;
user-select:none;
box-shadow:
0 6px 0 rgba(0,0,0,.35),
0 8px 16px rgba(0,0,0,.4),
inset 0 2px 0 rgba(255,255,255,.08);
transform-style:preserve-3d;will-change:transform;
}
.mine-tile::before{
content:"";position:absolute;inset:4px;border-radius:10px;
background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 50%);
pointer-events:none;
}
.mine-tile:hover{
transform:translateY(-5px) rotateX(8deg);
border-color:var(--pink);
box-shadow:0 11px 0 rgba(0,0,0,.35), 0 14px 28px rgba(255,82,82,.35), inset 0 2px 0 rgba(255,255,255,.1);
}
.mine-tile:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.mine-tile.locked{cursor:not-allowed}
.mine-tile.gem{
background:linear-gradient(135deg,#ffe0e0,#dd1c1c);border-color:#7a0e0e;
box-shadow:0 4px 0 #3a0808, 0 0 24px rgba(221,28,28,.6);
animation:tileReveal .45s cubic-bezier(.16,1,.3,1);
}
.mine-tile.bomb{
background:linear-gradient(135deg,#5b6680,#1a1f30);border-color:#0a0e1a;
box-shadow:0 4px 0 #0a0e1a, 0 0 24px rgba(221,28,28,.5);
animation:tileBomb .55s cubic-bezier(.36,.07,.19,.97);
}
.mine-tile.bomb-hit{
animation:bombHit .7s cubic-bezier(.36,.07,.19,.97);
z-index:10;
}
@keyframes bombHit{
0%{transform:scale(1) rotate(0)}
20%{transform:scale(1.4) rotate(-12deg);box-shadow:0 0 60px #dd1c1c, 0 0 120px #ff5050}
35%{transform:scale(1.3) rotate(12deg);background:linear-gradient(135deg,#dd1c1c,#ff5050);border-color:#fff}
60%{transform:scale(.9) rotate(-4deg);filter:brightness(2)}
100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
@keyframes tileBomb{
0%{transform:scale(.6);opacity:0}
60%{transform:scale(1.15);opacity:1}
100%{transform:scale(1);opacity:1}
}
/* Shockwave under the bombed tile. Originally animated `inset` from
50% 50% 50% 50% to -200% -200% -200% -200%, which makes the browser
recompute layout AND repaint the radial-gradient at each new size on
every frame — the most expensive thing this game does, and the reason
mines lagged on hit. Switched to a fixed-size pseudo positioned dead
center, animated via transform: scale() and opacity. transform/opacity
are GPU-composited only — no layout, no paint, no repaint cost. */
.mine-tile.bomb-hit::after{
content:"";
position:absolute;
left:50%; top:50%;
width:100px; height:100px;
margin-left:-50px; margin-top:-50px;
border-radius:50%;
background:radial-gradient(circle,#fff 0%,#ff5050 30%,#dd1c1c 60%,transparent 90%);
transform:scale(0.1);
opacity:0;
animation:tileShockwave .7s ease-out forwards;
pointer-events:none;
will-change:transform, opacity;
/* Once the animation finishes the shockwave is gone — promote it to its
own compositor layer so it doesn't trigger the parent's repaint. */
transform-origin:center;
}
@keyframes tileShockwave{
0% {transform:scale(0.1); opacity:1}
100%{transform:scale(8); opacity:0}
}
.mines-grid.shaking{animation:gridShake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes gridShake{
0%,100%{transform:translate(0)}
10%,30%,50%,70%,90%{transform:translate(-3px,2px) rotate(-.4deg)}
20%,40%,60%,80%{transform:translate(3px,-2px) rotate(.4deg)}
}
.game-shell.shake-shell{animation:shellShake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes shellShake{
0%,100%{transform:translate(0)}
10%,30%,50%,70%,90%{transform:translate(-2px,1px)}
20%,40%,60%,80%{transform:translate(2px,-1px)}
}
/* ============================================================
GAME CARD VARIANTS for new games
============================================================ */
.gc-limbo {background:linear-gradient(165deg,#ff5252 0%,#a01818 60%,#380505 100%)}
.gc-plinko {background:linear-gradient(165deg,#ff7a7a 0%,#dd1c1c 50%,#7a0e0e 100%)}
.gc-upgrader{background:linear-gradient(165deg,#ff3838 0%,#a01818 60%,#3a0808 100%)}
.gc-coinflip{background:linear-gradient(165deg,#dd1c1c 0%,#7a0e0e 60%,#3a0808 100%)}
/* ============================================================
LIMBO
============================================================ */
.limbo-stage{
position:relative;
width:100%;
aspect-ratio:16 / 9;
max-width:780px;
min-height:320px;
max-height:480px;
margin:0 auto 16px;
border-radius:18px;
/* Stage tint reverted to soft pink — was bright red, made the multi
reading hard to focus on. */
background:
radial-gradient(ellipse at center, rgba(255,109,180,.12), transparent 60%),
linear-gradient(180deg, var(--bg-2), var(--bg-0));
border:1px solid var(--line-2);
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.limbo-grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
}
.limbo-glow{
position:absolute;left:50%;top:50%;
width:380px;height:380px;border-radius:50%;
transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(255,82,82,.25), transparent 70%);
filter:blur(40px);
transition:background .4s, transform .4s;
pointer-events:none;
}
.limbo-stage.win .limbo-glow{
background:radial-gradient(circle, rgba(255,82,82,.6), transparent 70%);
transform:translate(-50%,-50%) scale(1.2);
}
.limbo-stage.loss .limbo-glow{
background:radial-gradient(circle, rgba(221,28,28,.5), transparent 70%);
}
.limbo-multi{
font-family:'Sora';font-weight:400;font-size:120px;
letter-spacing:.02em;color:#fff;
filter:drop-shadow(0 0 24px rgba(255,82,82,.5)) drop-shadow(0 8px 16px rgba(0,0,0,.6));
position:relative;z-index:2;
transition:color .25s;
}
.limbo-stage.win .limbo-multi{
color:#ff5252;
filter:drop-shadow(0 0 32px rgba(255,82,82,.9));
animation:limboWin .6s cubic-bezier(.16,1,.3,1);
}
.limbo-stage.loss .limbo-multi{
color:#dd1c1c;
filter:drop-shadow(0 0 32px rgba(221,28,28,.7));
animation:limboShake .35s cubic-bezier(.36,.07,.19,.97);
}
@keyframes limboWin{
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
@keyframes limboShake{
0%,100%{transform:translate(0)}
20%{transform:translate(-8px,2px) rotate(-2deg)}
40%{transform:translate(8px,-2px) rotate(2deg)}
60%{transform:translate(-5px,1px) rotate(-1deg)}
80%{transform:translate(5px,-1px) rotate(1deg)}
}
.limbo-target-line{
position:absolute;top:24px;left:50%;transform:translateX(-50%);
display:flex;align-items:center;gap:8px;
padding:8px 18px;border-radius:99px;
background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
border:1px solid rgba(255,217,0,.4);
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;
color:var(--text-mute);letter-spacing:.1em;
z-index:3;
}
.limbo-target-line strong{
font-family:'Sora';font-weight:400;font-size:18px;color:var(--gold);
text-shadow:0 0 12px rgba(255,217,0,.5);
}
.limbo-controls{
display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;align-items:end;
max-width:780px;margin:0 auto;
}
.limbo-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
@media (max-width:760px){.limbo-controls{grid-template-columns:1fr 1fr}}
.limbo-info{
padding:10px 14px;background:rgba(255,255,255,.04);
border:1px solid var(--line-2);border-radius:12px;
}
.limbo-chance{
font-family:'Sora';font-weight:400;font-size:20px;color:var(--green);
letter-spacing:.04em;
}
.limbo-payout{font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;color:var(--text-mute);margin-top:2px}
/* ============================================================
PLINKO
============================================================ */
.plinko-board{
position:relative;
width:100%;
/* lock to a stable aspect ratio so the board looks the same on every screen.
Bloxflip / Stake plinko boards use roughly this proportion. */
aspect-ratio:16 / 11;
max-width:820px;
min-height:460px;
max-height:640px;
margin:0 auto 18px;
border-radius:22px;
/* Layered gradient — vignette at the top with a soft pink wash and a
deeper indigo body. Cleaner and more "casino UI" than the flat panel. */
/* Plinko table reverted to a pink-on-indigo wash — the all-red version
made the chips/board hard to track because everything tinted toward
the same hue. */
background:
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,109,180,.14), transparent 65%),
radial-gradient(ellipse 70% 80% at 50% 110%, rgba(124,92,255,.10), transparent 70%),
linear-gradient(180deg, #1a1c3e 0%, #14163a 50%, #0e1030 100%);
border:1px solid rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
inset 0 -40px 60px rgba(0,0,0,.35),
0 18px 40px rgba(0,0,0,.4);
overflow:hidden;
}
#plinko-canvas{
position:absolute;inset:0;width:100%;height:calc(100% - 56px);
display:block;
}
.plinko-slots{
position:absolute;left:0;right:0;bottom:0;
height:60px;
display:flex;align-items:stretch;
padding:8px 18px;gap:4px;
/* Subtle backdrop so the pills sit on a row that visually anchors them
instead of floating above the board's bottom edge. */
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
}
.plinko-slot{
flex:1;min-width:0;
display:flex;align-items:center;justify-content:center;
border-radius:8px;
font-family:'Sora';font-weight:700;font-size:13px;color:#fff;
letter-spacing:0;
text-shadow:0 1px 2px rgba(0,0,0,.5);
/* Pill embossing — top highlight + bottom shadow gives the cell a 3D
"physical button" feel without being heavy. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -2px 0 rgba(0,0,0,.25),
0 2px 4px rgba(0,0,0,.25);
transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, filter .15s;
white-space:nowrap;
overflow:hidden;
padding:0 2px;
}
.plinko-slots[data-rows="16"] .plinko-slot{font-size:10px}
.plinko-slots[data-rows="14"] .plinko-slot{font-size:11px}
.plinko-slots[data-rows="12"] .plinko-slot{font-size:12px}
.plinko-slots[data-rows="10"] .plinko-slot{font-size:13px}
.plinko-slots[data-rows="8"] .plinko-slot{font-size:14px}
.plinko-slot.flash{
animation:slotFlash .8s cubic-bezier(.16,1,.3,1);
z-index:5;
}
@keyframes slotFlash{
0% {transform:translateY(0) scale(1); filter:brightness(1); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25)}
30% {transform:translateY(-14px) scale(1.22); filter:brightness(1.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 36px rgba(255,255,255,.95), 0 4px 16px rgba(255,255,255,.4)}
100%{transform:translateY(0) scale(1); filter:brightness(1); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25)}
}
/* Slot color tiers — Stake/Bloxflip-style: yellow → orange → pink → purple
from middle (low multi) to edges (high multi). The 0.5× middle stays
yellow; 1× pills sit one step in (orange); 2-5× pills are bright orange;
high multis (10×+) are pink/magenta; jackpot multis get purple. */
.plinko-slot.t-low {background:linear-gradient(180deg,#ffe169 0%, #f6b500 100%); color:#3a2300}
.plinko-slot.t-mid {background:linear-gradient(180deg,#ffac4d 0%, #ff8a1f 100%); color:#3a1a00}
.plinko-slot.t-high{background:linear-gradient(180deg,#ff9645 0%, #ff5e2b 100%); color:#fff}
.plinko-slot.t-fire{background:linear-gradient(180deg,#dd1c1c 0%, #d12a6a 100%); color:#fff}
.plinko-slot.t-jack{background:linear-gradient(180deg,#a01818 0%, #6a4fd8 100%); color:#fff}
.plinko-controls{
display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px;align-items:end;
max-width:780px;margin:0 auto;
}
.plinko-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
@media (max-width:760px){.plinko-controls{grid-template-columns:1fr 1fr}}
.seg-toggle{
display:flex;gap:4px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:14px;padding:4px;
}
.seg-btn{
flex:1;position:relative;
padding:9px 10px;border-radius:10px;cursor:pointer;
background:transparent;border:none;color:var(--text-dim);
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;letter-spacing:.04em;
transition:background .3s cubic-bezier(.16,1,.3,1), color .3s, transform .25s, box-shadow .35s;
z-index:1;
}
.seg-btn:hover{color:var(--text);background:rgba(255,82,82,.1)}
.seg-btn:active{transform:scale(.96)}
.seg-btn.active{
background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;
box-shadow:
0 0 18px rgba(255,82,82,.5),
0 4px 14px rgba(255,82,82,.35),
inset 0 1px 0 rgba(255,255,255,.25);
animation:segActivePop .35s cubic-bezier(.34,1.56,.64,1);
}
.seg-btn.active::before{
content:"";position:absolute;inset:0;border-radius:inherit;
border:1px solid rgba(255,255,255,.35);
pointer-events:none;
animation:segActiveRing .9s ease-out;
}
@keyframes segActivePop{
0%{transform:scale(.85)}
70%{transform:scale(1.06)}
100%{transform:scale(1)}
}
@keyframes segActiveRing{
0%{transform:scale(1);opacity:.9}
100%{transform:scale(1.18);opacity:0}
}
/* ============================================================
UPGRADER
============================================================ */
.upgrader-stage{
position:relative;
width:100%;
aspect-ratio:16 / 11;
max-width:780px;
min-height:360px;
max-height:520px;
margin:0 auto 16px;
display:flex;align-items:center;justify-content:center;
/* Stage backdrop reverted to the original soft plum tint — the red
stop made a bright crimson halo behind the wheel that fought with
the wheel's own pink/green pie. */
background:radial-gradient(ellipse at center, rgba(124,92,255,.12), transparent 65%);
border-radius:18px;border:1px solid var(--line-2);
overflow:hidden;
}
.upgrader-stage::before{
content:"";position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size:40px 40px;pointer-events:none;
}
.upgrader-wheel-wrap{
position:relative;
width:300px;height:300px;
}
.upgrader-pointer{
position:absolute;left:50%;top:-2px;
width:0;height:0;
transform:translateX(-50%);
border-left:14px solid transparent;
border-right:14px solid transparent;
border-top:24px solid var(--gold);
filter:drop-shadow(0 4px 8px rgba(255,217,0,.6)) drop-shadow(0 0 16px rgba(255,217,0,.5));
z-index:4;
}
.upgrader-wheel{
width:100%;height:100%;
filter:drop-shadow(0 0 30px rgba(160,24,24,.4));
transform:rotate(0);
will-change:transform;
/* transition is set per-spin via JS to drive a more realistic ease-out */
}
.upgrader-center{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
width:160px;height:160px;border-radius:50%;
background:radial-gradient(circle, var(--surface), var(--bg-0));
border:2px solid var(--line-2);
box-shadow:inset 0 4px 12px rgba(0,0,0,.4);
z-index:2;
}
.upgrader-percent{
font-family:'Sora';font-weight:400;font-size:46px;
color:var(--green);letter-spacing:.02em;
text-shadow:0 0 16px rgba(221,28,28,.5);
}
.upgrader-mult-label{font-family:'Plus Jakarta Sans';font-size:9px;letter-spacing:.2em;color:var(--text-mute);font-weight:700}
.upgrader-mult{
font-family:'Sora';font-weight:400;font-size:24px;
color:var(--gold);letter-spacing:.02em;
}
.upgrader-controls{
display:grid;grid-template-columns:1fr 2fr;gap:14px;align-items:end;
max-width:780px;margin:0 auto;
}
.upgrader-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
@media (max-width:760px){.upgrader-controls{grid-template-columns:1fr}}
.upgrader-slider{
-webkit-appearance:none;appearance:none;
width:100%;height:8px;border-radius:99px;
background:linear-gradient(90deg, var(--green) 0%, var(--green) var(--ufill,50%), rgba(255,255,255,.08) var(--ufill,50%));
outline:none;cursor:pointer;
}
.upgrader-slider::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:22px;height:22px;border-radius:50%;
background:linear-gradient(135deg,#fff,var(--green));
border:2px solid var(--green);
box-shadow:0 0 12px rgba(221,28,28,.6);
cursor:pointer;
}
.upgrader-slider::-moz-range-thumb{
width:22px;height:22px;border-radius:50%;
background:linear-gradient(135deg,#fff,var(--green));
border:2px solid var(--green);
box-shadow:0 0 12px rgba(221,28,28,.6);
cursor:pointer;
}
.upgrader-slider-meta{
display:flex;justify-content:space-between;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:10px;color:var(--text-mute);
margin-top:4px;letter-spacing:.1em;
}
.control-group-wide{grid-column:span 1}
@media (max-width:1000px){
.limbo-controls{grid-template-columns:1fr 1fr;gap:10px}
.limbo-controls>:last-child{grid-column:1/-1}
.plinko-controls{grid-template-columns:1fr 1fr}
.plinko-controls>:last-child{grid-column:1/-1}
.upgrader-controls{grid-template-columns:1fr}
}
@media (max-width:600px){
.limbo-stage{height:280px}
.limbo-multi{font-size:84px}
.limbo-controls{grid-template-columns:1fr;gap:10px}
.plinko-board{height:380px}
.plinko-slot{font-size:10px}
.upgrader-wheel-wrap{width:240px;height:240px}
.upgrader-center{width:128px;height:128px}
.upgrader-percent{font-size:34px}
}
/* ============================================================
ENHANCED GAME BACKGROUNDS — animated, more depth
============================================================ */
/* Limbo: floating gradient orbs + chart lines — reverted to the original
pink/gold/purple wash so the stage doesn't read as red-on-red. */
.limbo-stage::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle at 20% 30%, rgba(255,109,180,.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,217,0,.12), transparent 40%),
radial-gradient(circle at 50% 100%, rgba(124,92,255,.15), transparent 50%);
animation:bgFloat 20s ease-in-out infinite;
}
.limbo-stage::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,109,180,.04) 39px 40px),
repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,109,180,.04) 39px 40px);
mask:radial-gradient(ellipse at center, black 50%, transparent 90%);
}
@keyframes bgFloat{
0%,100%{background-position:0 0,0 0,0 0}
50%{background-position:30px -20px,-30px 20px,0 -10px}
}
/* Plinko: subtle drifting nebula — reverted to the orange/pink/purple
stops so the board doesn't fight the red brand on the chips. */
.plinko-board::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 600px 300px at 30% -10%, rgba(255,139,58,.15), transparent 70%),
radial-gradient(ellipse 500px 250px at 70% 110%, rgba(255,109,180,.18), transparent 70%),
radial-gradient(circle 200px at 50% 50%, rgba(124,92,255,.12), transparent 70%);
animation:bgFloat 22s ease-in-out infinite -8s;
}
/* Upgrader: rotating rings behind wheel — original pink/purple/gold
sweep so the conic doesn't double up red on top of the red brand. */
.upgrader-stage::after{
content:"";position:absolute;left:50%;top:50%;
width:560px;height:560px;border-radius:50%;
transform:translate(-50%,-50%);
background:conic-gradient(from 0deg,
rgba(255,109,180,.0) 0deg, rgba(255,109,180,.18) 30deg,
rgba(124,92,255,.18) 90deg, rgba(124,92,255,.18) 150deg,
rgba(255,217,0,.0) 210deg);
filter:blur(40px);
pointer-events:none;
animation:upRotate 20s linear infinite;
}
@keyframes upRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Plinko ::after slot is now claimed by the aurora effect (defined further
down). The previous "inset gold glow that pulses every .4s" was the
visual the user disliked — we replaced it with a slow aurora drift that
reads as atmospheric, not strobing. */
/* Limbo "rolling" pulse on stage */
.limbo-stage.rolling .limbo-glow{
animation:limboRolling 1.2s ease-in-out infinite;
}
@keyframes limboRolling{
0%,100%{transform:translate(-50%,-50%) scale(1)}
50%{transform:translate(-50%,-50%) scale(1.15)}
}
/* ============================================================
AFFILIATE PROGRAM
============================================================ */
.aff-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
margin-bottom:18px;
}
.aff-stat{
position:relative;
padding:18px 20px;border-radius:16px;
background:linear-gradient(135deg, rgba(28,31,71,.85), rgba(16,19,46,.95));
border:1px solid var(--line-2);
overflow:hidden;
transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.aff-stat:hover{transform:translateY(-2px);border-color:rgba(255,82,82,.5)}
.aff-stat::before{
content:"";position:absolute;top:-50%;right:-50%;width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle, rgba(255,82,82,.25), transparent 70%);
filter:blur(20px);
}
.aff-stat-tier{
background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(160,24,24,.18));
border-color:rgba(255,217,0,.45);
}
.aff-stat-tier::before{background:radial-gradient(circle, rgba(255,217,0,.4), transparent 70%)}
.aff-stat-label{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:10px;
letter-spacing:.2em;color:var(--text-mute);
}
.aff-stat-value{
font-family:'Sora';font-weight:800;font-size:30px;
background:linear-gradient(135deg,#fff,var(--gold));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-.02em;
margin:6px 0 4px;
}
.aff-stat-trend{font-size:11px;color:var(--text-dim);font-weight:600}
.aff-stat-trend strong{color:var(--green)}
.aff-stat-tier .aff-stat-value{
background:linear-gradient(135deg,#ff5050,#dd1c1c);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.aff-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin-bottom:18px;
}
.aff-card{
padding:22px;border-radius:18px;
background:linear-gradient(135deg, rgba(28,31,71,.7), rgba(16,19,46,.7));
border:1px solid var(--line-2);
margin-bottom:18px;
position:relative;
overflow:hidden;
}
.aff-card-head{margin-bottom:16px;position:relative;z-index:2}
.aff-card-title{
font-family:'Sora';font-weight:700;font-size:18px;color:var(--text);
letter-spacing:-.01em;
}
.aff-card-sub{font-size:13px;color:var(--text-dim);margin-top:2px;font-weight:500}
.aff-code-display{
display:flex;align-items:center;gap:10px;
padding:14px 16px;border-radius:12px;
background:linear-gradient(135deg, rgba(255,82,82,.12), rgba(160,24,24,.12));
border:1px solid rgba(255,82,82,.35);
margin-bottom:10px;
}
.aff-code-display code{
flex:1;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;
color:var(--gold);letter-spacing:.08em;
text-shadow:0 0 16px rgba(255,217,0,.3);
}
.aff-link-display{
display:flex;align-items:center;gap:10px;
padding:10px 14px;border-radius:10px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.aff-link-label{
font-family:'Plus Jakarta Sans';font-weight:800;font-size:9px;
letter-spacing:.2em;color:var(--text-mute);
}
.aff-link-display code{
flex:1;font-family:'JetBrains Mono',monospace;font-size:11px;
color:var(--cyan);font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aff-apply-row{
display:flex;gap:10px;
}
.aff-apply-row input{
flex:1;padding:14px 16px;border-radius:12px;
background:rgba(255,255,255,.05);border:1px solid var(--line-2);
color:var(--text);
font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;
letter-spacing:.1em;text-transform:uppercase;
outline:none;
transition:border-color .25s, box-shadow .25s;
}
.aff-apply-row input:focus{
border-color:var(--pink);
box-shadow:0 0 0 3px rgba(255,82,82,.18);
}
.aff-applied{
margin-top:12px;
display:flex;align-items:center;gap:10px;
padding:10px 14px;border-radius:10px;
background:rgba(221,28,28,.12);border:1px solid rgba(221,28,28,.45);
color:var(--green);font-weight:700;font-size:13px;
}
.aff-check{
width:18px;height:18px;border-radius:50%;
background:var(--green);
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.aff-check::before{
content:"";width:6px;height:9px;
border-right:2px solid #003322;border-bottom:2px solid #003322;
transform:rotate(45deg) translateY(-1px);
}
.aff-tiers{
display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.aff-tier{
padding:14px;border-radius:12px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
text-align:center;
position:relative;
transition:transform .25s, border-color .25s;
}
.aff-tier.current{
background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(255,82,82,.12));
border-color:var(--gold);
box-shadow:0 0 0 1px var(--gold), 0 0 24px rgba(255,217,0,.25);
transform:translateY(-2px);
}
.aff-tier-name{
font-family:'Sora';font-weight:700;font-size:13px;letter-spacing:.04em;
text-transform:uppercase;
}
.aff-tier-rate{
font-family:'Sora';font-weight:800;font-size:24px;color:var(--gold);
margin:6px 0 2px;letter-spacing:-.01em;
}
.aff-tier-req{font-size:10px;color:var(--text-mute);font-weight:600;letter-spacing:.05em}
.aff-tier-icon{
width:32px;height:32px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
margin:0 auto 6px;
font-family:'Sora';font-weight:800;font-size:13px;
}
.tier-bronze .aff-tier-icon{background:linear-gradient(135deg,#ad6900,#7a4a18);color:#fff}
.tier-silver .aff-tier-icon{background:linear-gradient(135deg,#e0e6f0,#806060);color:#0e0a0e}
.tier-gold .aff-tier-icon{background:linear-gradient(135deg,#ff5252,#ff5050);color:#5c3800}
.tier-diamond .aff-tier-icon{background:linear-gradient(135deg,#ffe0e0,#dd1c1c);color:#3a0808}
.tier-mythic .aff-tier-icon{background:linear-gradient(135deg,#a01818,#a01818);color:#fff}
.aff-activity{
display:flex;flex-direction:column;gap:6px;
max-height:340px;overflow-y:auto;
}
.aff-activity::-webkit-scrollbar{width:4px}
.aff-activity::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.aff-activity-row{
display:grid;grid-template-columns:32px 1fr auto auto;align-items:center;gap:12px;
padding:10px 14px;border-radius:10px;
background:rgba(255,255,255,.03);border:1px solid var(--line);
font-family:'Plus Jakarta Sans';
animation:aaIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes aaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.aff-act-avatar{
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-weight:800;font-size:13px;color:#fff;
border:1.5px solid rgba(255,255,255,.2);
}
.aff-act-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.aff-act-name{font-weight:700;font-size:13px;color:var(--text);letter-spacing:.01em}
.aff-act-action{font-size:11px;color:var(--text-mute);font-weight:500}
.aff-act-amount{
font-family:'Sora';font-weight:700;font-size:13px;color:var(--green);
white-space:nowrap;
}
.aff-act-time{font-size:10px;color:var(--text-mute);font-weight:600}
@media (max-width:1100px){
.aff-stats{grid-template-columns:repeat(2,1fr)}
.aff-grid{grid-template-columns:1fr}
.aff-tiers{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
.aff-stats{grid-template-columns:1fr 1fr}
.aff-tiers{grid-template-columns:1fr 1fr}
}
/* ============================================================
TYPOGRAPHY POLISH (Plus Jakarta Sans + Sora)
============================================================ */
.logo-main, .hero-title, .title-pop, .section-title, .game-title,
.modal-title, .stat-num, .crash-multiplier, .limbo-multi, .upgrader-percent,
.gp-title, .gp-payout, .pt-mult, .ws-val, .ws-arrow, .wc-mult, .wc-payout,
.bw-amount, .ci-mult, .cig-mult, .lead-rank, .lead-pay, .hr-profit,
.bf-multi, .bf-payout, .balance, .stats-title, .slots-top, .upgrader-mult,
.aff-stat-value, .aff-tier-rate, .aff-card-title, .aff-act-amount,
.title-burst, .promo-title, .gc-name, .cc-name, .wc-rarity-label,
.win-card .wc-name {
font-family:'Sora','Plus Jakarta Sans',system-ui,sans-serif;
font-feature-settings:"ss01","cv01";
letter-spacing:-.01em;
}
.balance{letter-spacing:.04em}
.gc-name, .promo-title, .crash-multiplier, .limbo-multi {
letter-spacing:-.02em;
font-weight:800;
}
.section-title, .game-title, .modal-title, .aff-card-title {
font-weight:700;letter-spacing:-.01em;
}
.hero-title{font-weight:800}
.stats-title, .pt-name, .ws-label, .aff-stat-label, .aff-link-label, .ci-rarity-tag, .cig-rarity-tag {
font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
}
.btn{font-weight:700;letter-spacing:.04em}
.btn.big{font-weight:800;letter-spacing:.06em}
/* (old ✨ emoji sparkle removed — replaced by the cyan ring flash below) */
/* ============================================================
RESULT POPUP — fills the dead space below each game
============================================================ */
.game-popup{
margin-top:16px;
padding:18px 24px;border-radius:18px;
background:linear-gradient(135deg, rgba(28,31,71,.9), rgba(16,19,46,.9));
border:1px solid var(--line-2);
display:flex;align-items:center;gap:18px;
min-height:78px;
position:relative;overflow:hidden;
opacity:0;transform:translateY(12px);
transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.game-popup.show{opacity:1;transform:translateY(0)}
.game-popup.win{
background:linear-gradient(135deg, rgba(221,28,28,.18), rgba(28,31,71,.9));
border-color:rgba(221,28,28,.55);
box-shadow:0 12px 30px rgba(221,28,28,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.game-popup.loss{
background:linear-gradient(135deg, rgba(221,28,28,.18), rgba(28,31,71,.9));
border-color:rgba(221,28,28,.55);
box-shadow:0 12px 30px rgba(221,28,28,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.game-popup.push{
background:linear-gradient(135deg, rgba(255,217,0,.15), rgba(28,31,71,.9));
border-color:rgba(255,217,0,.5);
}
/* (gp-glow / gp-icon decoration removed — tacky and not in spec.) */
.gp-glow,.gp-icon{display:none !important}
.gp-content{flex:1;min-width:0}
.gp-title{
font-family:'Sora';font-weight:400;font-size:22px;color:var(--text);
letter-spacing:.04em;
}
.gp-sub{font-family:'Plus Jakarta Sans';font-weight:600;font-size:13px;color:var(--text-dim);margin-top:2px}
.gp-payout{
font-family:'Sora';font-weight:400;font-size:26px;
letter-spacing:.04em;flex-shrink:0;
padding:8px 16px;border-radius:12px;
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);
}
.game-popup.win .gp-payout{color:var(--green);text-shadow:0 0 16px rgba(221,28,28,.55)}
.game-popup.loss .gp-payout{color:var(--red);text-shadow:0 0 16px rgba(221,28,28,.55)}
.game-popup.push .gp-payout{color:var(--gold)}
/* ============================================================
COMPACT SPACING
============================================================ */
main{padding:20px 22px 50px}
.hero{padding:36px;border-radius:24px;margin-bottom:28px;gap:32px}
.promo{height:120px;padding:16px 18px;border-radius:18px}
.promo-strip{margin-bottom:20px;gap:12px}
.section-title{margin:30px 0 14px;font-size:28px}
.game-grid{gap:14px}
.game-card{height:280px;padding:18px 16px;border-radius:20px}
.game-shell{padding:20px;border-radius:22px;margin-bottom:20px}
.game-header{margin-bottom:18px;padding-bottom:14px}
.bet-feed-wrap{padding:12px 16px;border-radius:18px;margin-bottom:20px}
.big-wins{gap:10px}
.bw-card{padding:12px;border-radius:14px}
.history-bar{padding:10px;margin-top:14px;border-radius:14px}
.crash-controls{gap:14px}
.bj-table{padding:24px 26px;min-height:380px}
.dice-stage{height:340px;margin-bottom:16px}
.cases-stage{height:180px;margin-bottom:16px}
.cases-row{gap:12px;margin-bottom:18px}
.case-card{height:200px;padding:14px}
.modal{padding:26px;border-radius:22px}
@keyframes tileReveal{
from{transform:scale(.6);opacity:0}
to{transform:scale(1);opacity:1}
}
.mine-tile.faded{opacity:.4}
.mines-panel{
background:linear-gradient(135deg,var(--surface),var(--bg-2));
border:1px solid var(--line-2);border-radius:18px;
padding:20px;display:flex;flex-direction:column;gap:14px;
}
.payout-display{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
padding:14px;border-radius:12px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.payout-display>div{display:flex;flex-direction:column;gap:4px}
.payout-display span{font-family:'Plus Jakarta Sans';font-size:9px;letter-spacing:1.5px;color:var(--text-mute);font-weight:700}
.payout-display strong{font-family:'Sora';font-size:20px;color:var(--gold);font-weight:400}
/* ============================================================
BLACKJACK
============================================================ */
.bj-table{
position:relative;
width:100%;max-width:780px;margin:0 auto 20px;
/* Felt is full casino green — the red-glow stop the broad theme sweep
introduced made it look bloody in the middle; reverted to a clean
green felt with a subtle inner highlight. */
background:
radial-gradient(ellipse at center, rgba(0,0,0,.18), transparent 70%),
linear-gradient(135deg,#0a3a1d,#1a8a4d 50%,#0d4f2a);
border:3px solid #5b3617;
border-radius:200px / 24px;
padding:34px 30px;
box-shadow:
inset 0 0 60px rgba(0,0,0,.4),
inset 0 4px 0 rgba(255,255,255,.06),
0 12px 30px rgba(0,0,0,.5);
min-height:440px;
display:flex;flex-direction:column;justify-content:space-between;gap:24px;
overflow:hidden;
}
/* felt diamond pattern */
.bj-table::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 2px,transparent 2px 8px),
repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 8px);
}
/* center brand */
.bj-table::after{
content:"BLOXHIT • BLACKJACK PAYS 3:2";
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-family:'Sora';font-size:14px;color:rgba(255,255,255,.18);
letter-spacing:.4em;white-space:nowrap;pointer-events:none;
}
.bj-zone{
display:flex;flex-direction:column;align-items:center;gap:14px;
position:relative;z-index:2;
}
.bj-label{
font-family:'Sora';font-size:20px;color:#fff;
text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 16px rgba(221,28,28,.6);
letter-spacing:.08em;
display:flex;align-items:center;gap:10px;
}
.bj-label::before,.bj-label::after{
content:"";width:36px;height:2px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.bj-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:140px}
.bj-card{
width:90px;height:130px;border-radius:10px;
background:#fff;border:2px solid #0e0a0e;
box-shadow:0 6px 14px rgba(0,0,0,.5);
display:flex;flex-direction:column;justify-content:space-between;
padding:8px 10px;
font-family:'Sora';font-weight:400;
position:relative;
animation:cardFlip .55s cubic-bezier(.16,1,.3,1);
}
@keyframes cardFlip{
0%{transform:rotateY(180deg) translateY(-12px);opacity:0}
100%{transform:rotateY(0) translateY(0);opacity:1}
}
.bj-card.red{color:#e63946}.bj-card.black{color:#0e0a0e}
.bj-card-rank{font-size:22px;line-height:1}
.bj-card-suit{font-size:30px;align-self:center}
.bj-card-rank-bot{align-self:flex-end;transform:rotate(180deg);font-size:22px;line-height:1}
.bj-card.flipped{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:var(--berry-dark)}
.bj-card.flipped::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,") center/72% no-repeat}
/* BJ controls — flex-wrap row.
- Bet-input `.control-group` claims the full row (flex-basis 100%) so
it's always on its own line above the action buttons.
- All `.btn` siblings flow as a centered cluster on the next row,
wrapping if too many fit.
- Hidden buttons collapse out completely (the .btn[hidden]!important
rule handles that), so when only DEAL is visible at idle, it lands
dead-center instead of being grid-anchored to the leftmost cell.
*/
.bj-controls{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px;
max-width: 780px;
margin: 0 auto;
}
.bj-controls > .control-group{
flex: 0 0 100%; /* bet input always claims its own row */
max-width: 280px;
margin: 0 auto;
width: 100%;
}
.bj-controls > .btn{
height: 54px;
font-size: 14px;
letter-spacing: .16em;
min-width: 200px;
max-width: 280px;
flex: 0 1 220px;
}
@media (max-width:760px){
.bj-controls > .btn{ flex: 1 1 100%; max-width: 100%; }
}
/* ============================================================
SLOTS — premium cabinet (deep red & gold)
============================================================ */
.slots-machine{
position:relative;
max-width:560px;margin:0 auto 28px;
padding:22px 22px 28px;border-radius:34px;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,217,0,.18), transparent 55%),
linear-gradient(180deg,#d11b3f 0%, #a01030 35%, #7a0a25 70%, #5a0518 100%);
border:4px solid #ff5050;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.22),
inset 0 -4px 0 rgba(0,0,0,.4),
inset 0 0 0 6px rgba(0,0,0,.18),
0 14px 0 #3e0212,
0 22px 50px rgba(0,0,0,.6),
0 0 60px rgba(255,82,82,.18);
}
.slots-machine::before{
/* faint specular sheen across the cabinet */
content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 35%, transparent 65%, rgba(0,0,0,.25) 100%);
mix-blend-mode:overlay;
}
/* ----- Crown / marquee ----- */
.sm-crown{
margin-bottom:18px;
position:relative;
}
.sm-crown-frame{
position:relative;
border-radius:18px;
background:linear-gradient(180deg,#2a0008 0%, #100004 100%);
border:2px solid #ff5050;
padding:10px 18px;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.1),
inset 0 -2px 0 rgba(0,0,0,.45),
0 4px 0 rgba(0,0,0,.35),
0 0 18px rgba(255,217,0,.18);
}
.sm-marquee-wrap{
display:flex;align-items:center;justify-content:center;gap:14px;
padding:6px 0;
position:relative;z-index:1;
}
.sm-star{
font-family:'Sora';font-size:18px;color:#ff5050;
text-shadow:0 0 12px rgba(255,217,0,.85), 0 0 22px rgba(255,56,56,.6);
animation:smStarSpin 4s linear infinite;
display:inline-block;
}
.sm-star-r{animation-direction:reverse}
@keyframes smStarSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sm-marquee{
font-family:'Sora';font-weight:800;font-size:26px;letter-spacing:.32em;
color:#ffe0e0;
background:linear-gradient(180deg, #ffe0e0 0%, #ff5050 35%, #ff3838 70%, #7a0e0e 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 14px rgba(255,217,0,.65)) drop-shadow(0 2px 0 rgba(122,24,56,.6));
white-space:nowrap;
animation:smMarqueeGlow 2.6s ease-in-out infinite;
}
@keyframes smMarqueeGlow{
0%,100%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65)) drop-shadow(0 2px 0 rgba(122,24,56,.6))}
50% {filter:drop-shadow(0 0 22px rgba(255,217,0,1)) drop-shadow(0 2px 0 rgba(122,24,56,.6)) drop-shadow(0 0 36px rgba(255,56,56,.5))}
}
/* Marquee bulbs — perfectly centered using flex, fills the strip evenly */
.sm-bulbs{
display:flex;align-items:center;justify-content:space-evenly;
height:14px;width:100%;
position:relative;z-index:1;
}
.sm-bulbs::before{
/* generates the bulbs via repeating gradient so they're always evenly
distributed; works at any width without manually placing 10 spans. */
content:"";display:block;width:100%;height:10px;border-radius:5px;
background-image:radial-gradient(circle 4px at 12px 5px, #ffe0e0 0%, #ff5050 40%, #b87800 75%, transparent 78%);
background-size:24px 10px;
background-repeat:repeat-x;
background-position:50% 50%;
filter:drop-shadow(0 0 4px rgba(255,217,0,.85));
animation:smBulbChase 1.6s linear infinite;
}
.sm-bulbs-bottom::before{animation-direction:reverse;animation-duration:2s}
@keyframes smBulbChase{
0% {background-position:0 50%;filter:drop-shadow(0 0 4px rgba(255,217,0,.85))}
50% {filter:drop-shadow(0 0 8px rgba(255,217,0,1)) drop-shadow(0 0 14px rgba(255,56,56,.5))}
100%{background-position:24px 50%;filter:drop-shadow(0 0 4px rgba(255,217,0,.85))}
}
/* ----- Cabinet (chrome bezel around the reels) ----- */
.sm-cabinet{
position:relative;
background:
linear-gradient(180deg, #23121a 0%, #15090c 50%, #23121a 100%);
border-radius:20px;padding:5px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 0 rgba(0,0,0,.55),
0 6px 0 rgba(0,0,0,.4);
}
.sm-cabinet-inner{
background:linear-gradient(180deg,#1a0008 0%, #3a0612 50%, #1a0008 100%);
border:2px solid rgba(255,217,0,.7);border-radius:16px;padding:14px;
box-shadow:
inset 0 4px 18px rgba(0,0,0,.7),
inset 0 0 0 1px rgba(0,0,0,.4);
position:relative;
}
.sm-cabinet-inner::before{
/* inner gold pinstripe */
content:"";position:absolute;inset:5px;border-radius:13px;
border:1px dashed rgba(255,217,0,.32);
pointer-events:none;
}
.sm-window{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
background:linear-gradient(180deg,#ffffff 0%, #f3dde8 50%, #e2cad8 100%);
border-radius:12px;padding:10px;
border:2px solid #2a0008;
box-shadow:
inset 0 6px 16px rgba(0,0,0,.45),
0 0 0 2px rgba(0,0,0,.4);
height:200px;overflow:hidden;
position:relative;
}
.sm-window .reel{height:180px;overflow:hidden}
.sm-window::before, .sm-window::after{
content:"";position:absolute;left:0;right:0;height:46px;
pointer-events:none;z-index:3;
}
.sm-window::before{
top:0;
background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 60%, transparent);
}
.sm-window::after{
bottom:0;
background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 60%, transparent);
}
/* Glowing payline */
.sm-payline{
position:absolute;left:14px;right:14px;top:50%;height:3px;
transform:translateY(-50%);
background:linear-gradient(90deg, transparent, #dd1c1c 12%, #ff5252 50%, #dd1c1c 88%, transparent);
box-shadow:0 0 12px rgba(221,28,28,.85), 0 0 24px rgba(221,28,28,.4);
pointer-events:none;z-index:2;
animation:smPayline 2.2s ease-in-out infinite;
}
@keyframes smPayline{
0%,100%{opacity:.55;box-shadow:0 0 8px rgba(221,28,28,.6)}
50% {opacity:1; box-shadow:0 0 16px rgba(221,28,28,1), 0 0 32px rgba(221,28,28,.55)}
}
/* arrow tips on either side of the payline */
.sm-payline-tip{
position:absolute;top:50%;width:14px;height:14px;
transform:translateY(-50%);
background:radial-gradient(circle at 35% 30%, #ff7090, #a01818 70%, #7a0e0e);
border:1.5px solid #ff5050;
box-shadow:0 0 10px rgba(255,217,0,.6);
z-index:3;
animation:smPaylineTip 2.2s ease-in-out infinite;
}
.sm-payline-tip-l{left:-7px;clip-path:polygon(40% 0, 100% 50%, 40% 100%, 0 100%, 0 0)}
.sm-payline-tip-r{right:-7px;clip-path:polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%)}
@keyframes smPaylineTip{
0%,100%{box-shadow:0 0 6px rgba(255,217,0,.5)}
50% {box-shadow:0 0 14px rgba(255,217,0,1), 0 0 24px rgba(255,56,56,.5)}
}
.reel{
position:relative;
background:linear-gradient(180deg, #ffffff 0%, #f3e0ea 50%, #ddc8d6 100%);
border-radius:10px;border:1.5px solid #b890a4;
overflow:hidden;
box-shadow:
inset 0 2px 4px rgba(0,0,0,.18),
inset 0 -2px 4px rgba(255,255,255,.4);
}
.reel::before{
/* faint vertical reel rib so it reads as a real spinning reel cylinder */
content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
background:linear-gradient(90deg, rgba(0,0,0,.06) 0%, transparent 8%, transparent 92%, rgba(0,0,0,.06) 100%);
border-radius:inherit;
}
.reel-strip{display:flex;flex-direction:column;line-height:1;align-items:center;transition:transform 2s cubic-bezier(.17,.67,.21,.99)}
.reel-strip span{display:flex;align-items:center;justify-content:center;height:180px;width:100%;flex-shrink:0}
.reel-strip span svg{width:108px;height:108px;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28))}
/* While spinning, blur the strip slightly so symbols read as motion */
.slots-machine.spinning .reel-strip{filter:blur(1.5px)}
/* ----- Coin tray with credits readout ----- */
.sm-tray{
margin-top:18px;
background:linear-gradient(180deg,#15090c 0%, #18181f 50%, #15090c 100%);
border:2px solid #ff5050;border-radius:14px;
padding:10px 18px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
box-shadow:inset 0 3px 8px rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.35);
}
.sm-tray-slot{
flex:1;height:8px;border-radius:6px;
background:linear-gradient(180deg, #050505, #2a0008);
box-shadow:inset 0 2px 4px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.05);
}
.sm-tray-credits{
display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;
font-family:'Sora';
}
.sm-tray-credits-label{
font-family:'Plus Jakarta Sans';font-weight:800;font-size:9px;letter-spacing:.22em;
color:#ff5050;opacity:.75;
}
.sm-tray-credits-val{
font-family:'Sora';font-weight:800;font-size:18px;letter-spacing:.05em;
color:#ff5050;
text-shadow:0 0 10px rgba(255,217,0,.7);
font-variant-numeric:tabular-nums;
}
/* ----- 3D pull lever ----- */
.sm-lever{
position:absolute;right:-32px;top:80px;
width:36px;height:160px;z-index:5;
}
.sm-lever-mount{
position:absolute;left:50%;top:0;
width:18px;height:14px;transform:translateX(-50%);
background:linear-gradient(180deg,#5c5c66,#15090c);
border-radius:6px 6px 2px 2px;
border:1px solid #1a1a1f;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.sm-lever-arm{
position:absolute;left:50%;top:8px;
width:9px;height:120px;transform:translateX(-50%);
background:linear-gradient(90deg,#23121a 0%,#e8d4d4 35%,#fff 50%,#e8d4d4 65%,#23121a 100%);
border-radius:5px;
box-shadow:
0 2px 4px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.4);
}
.sm-lever-knob{
position:absolute;left:50%;top:8px;
width:30px;height:30px;border-radius:50%;
transform:translate(-50%, -50%);
background:radial-gradient(circle at 32% 28%, #fff 0%, #ff7090 25%, #a01818 65%, #5a0a18 100%);
border:2px solid #2a0008;
box-shadow:
0 5px 10px rgba(0,0,0,.55),
inset 0 2px 6px rgba(255,255,255,.5),
inset 0 -3px 6px rgba(0,0,0,.4),
0 0 18px rgba(221,28,28,.4);
animation:smLeverIdle 3.5s ease-in-out infinite;
}
.slots-machine.spinning .sm-lever-knob{animation:smLeverPull .65s cubic-bezier(.34,1.56,.64,1)}
.slots-machine.spinning .sm-lever-arm{animation:smLeverPullArm .65s cubic-bezier(.34,1.56,.64,1)}
@keyframes smLeverIdle{
0%,100%{transform:translate(-50%,-50%)}
50% {transform:translate(-50%,-46%)}
}
@keyframes smLeverPull{
0% {transform:translate(-50%,-50%)}
40% {transform:translate(-50%,55%)}
100%{transform:translate(-50%,-50%)}
}
@keyframes smLeverPullArm{
0% {transform:translateX(-50%) scaleY(1)}
40% {transform:translateX(-50%) scaleY(1.6)}
100%{transform:translateX(-50%) scaleY(1)}
}
/* Win pump animation on the cabinet */
.slots-machine.win{animation:smWinPump .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes smWinPump{
0% {transform:scale(1)}
35% {transform:scale(1.025) rotate(-.5deg)}
60% {transform:scale(1.015) rotate(.5deg)}
100% {transform:scale(1)}
}
.slots-machine.win .sm-marquee{animation:smMarqueeWin 1s ease-out}
@keyframes smMarqueeWin{
0%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65))}
50%{filter:drop-shadow(0 0 28px rgba(255,82,82,1)) drop-shadow(0 0 60px rgba(255,217,0,.7))}
100%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65))}
}
.slots-controls{display:grid;grid-template-columns:1fr;gap:14px;align-items:end;max-width:420px;margin:0 auto 16px;justify-items:stretch}
.slots-controls > .btn{width:100%;height:54px;font-size:15px;letter-spacing:.18em}
/* ----- Paytable v2 (cards) ----- */
.paytable-v2{
max-width:780px;margin:0 auto;
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border:1px solid var(--line-2);border-radius:18px;
padding:16px 18px;
}
.paytable-v2 .pt-head{margin-bottom:12px;text-align:center}
.paytable-v2 .pt-head-title{
font-family:'Sora';font-weight:800;font-size:14px;letter-spacing:.32em;color:#fff;
text-shadow:0 0 14px rgba(255,217,0,.45);
}
.paytable-v2 .pt-head-sub{
font-family:'Plus Jakarta Sans';font-weight:600;font-size:11.5px;color:var(--text-mute);
letter-spacing:.05em;margin-top:2px;
}
.paytable-v2 .pt-grid{
display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px;
}
@media (max-width:760px){.paytable-v2 .pt-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
.paytable-v2 .pt-card{
position:relative;
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:10px 8px 12px;
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid var(--line-2);border-radius:14px;
transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s;
overflow:hidden;
}
.paytable-v2 .pt-card::before{
/* faint pink halo behind the symbols */
content:"";position:absolute;left:50%;top:30%;
width:80%;height:60%;transform:translateX(-50%);
background:radial-gradient(ellipse, rgba(255,82,82,.15), transparent 70%);
pointer-events:none;
}
.paytable-v2 .pt-card:hover{
transform:translateY(-3px);
border-color:rgba(255,217,0,.55);
box-shadow:0 6px 18px rgba(255,217,0,.18);
}
.paytable-v2 .pt-card-name{
font-family:'Plus Jakarta Sans';font-weight:800;font-size:10px;letter-spacing:.18em;
color:var(--text-mute);text-transform:uppercase;
position:relative;z-index:1;
}
.paytable-v2 .pt-card-syms{
display:flex;align-items:center;gap:2px;
position:relative;z-index:1;
}
.paytable-v2 .pt-card-syms .pt-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.paytable-v2 .pt-card-syms .pt-icon svg{width:100%;height:100%}
.paytable-v2 .pt-card-syms-pair .pt-icon-q{
width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.3);
border-radius:8px;
font-family:'Sora';font-weight:800;font-size:18px;color:var(--text-mute);
}
.paytable-v2 .pt-card-mult{
font-family:'Sora';font-weight:800;font-size:18px;letter-spacing:.04em;
color:var(--gold);text-shadow:0 0 10px rgba(255,217,0,.4);
position:relative;z-index:1;
}
.paytable-v2 .pt-card-seven .pt-card-mult{
color:#fff;
background:linear-gradient(135deg, #ff5050, #dd1c1c);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
/* ----- Rarity badges (paytable cards) ----- */
.paytable-v2 .pt-rarity-badge{
position:absolute;top:8px;right:8px;z-index:2;
font-family:'Plus Jakarta Sans';font-weight:800;font-size:8.5px;letter-spacing:.16em;
padding:3px 8px;border-radius:99px;
text-transform:uppercase;
border:1px solid currentColor;
background:rgba(0,0,0,.4);
white-space:nowrap;
}
.paytable-v2 .pt-rarity-common .pt-rarity-badge{color:#806060;border-color:rgba(168,184,197,.45);background:rgba(168,184,197,.12)}
.paytable-v2 .pt-rarity-uncommon .pt-rarity-badge{color:#7be8a3;border-color:rgba(123,232,163,.5);background:rgba(221,28,28,.16);box-shadow:0 0 8px rgba(221,28,28,.18)}
.paytable-v2 .pt-rarity-rare .pt-rarity-badge{color:#ff5252;border-color:rgba(255,82,82,.55);background:rgba(221,28,28,.18);box-shadow:0 0 10px rgba(221,28,28,.28)}
.paytable-v2 .pt-rarity-epic .pt-rarity-badge{color:#ff7a7a;border-color:rgba(205,182,255,.6);background:rgba(160,24,24,.22);box-shadow:0 0 12px rgba(160,24,24,.4)}
.paytable-v2 .pt-rarity-legendary .pt-rarity-badge{color:#ff5050;border-color:rgba(255,217,0,.65);background:rgba(255,217,0,.18);box-shadow:0 0 14px rgba(255,217,0,.45)}
.paytable-v2 .pt-rarity-mythic .pt-rarity-badge{
color:#fff;border-color:rgba(255,255,255,.6);
background:linear-gradient(135deg, rgba(255,217,0,.28), rgba(255,82,82,.32), rgba(160,24,24,.28));
box-shadow:0 0 18px rgba(255,82,82,.55), 0 0 28px rgba(255,217,0,.35);
animation:ptMythicShimmer 2.4s linear infinite;
background-size:200% 100%;
}
@keyframes ptMythicShimmer{from{background-position:0 0}to{background-position:200% 0}}
.paytable-v2 .pt-rarity-pair .pt-rarity-badge{color:#806060;border-color:rgba(168,184,197,.45);background:rgba(0,0,0,.35);font-style:italic}
/* tier-specific card glow ring */
.paytable-v2 .pt-rarity-rare {box-shadow:inset 0 0 0 1px rgba(221,28,28,.18)}
.paytable-v2 .pt-rarity-epic {box-shadow:inset 0 0 0 1px rgba(160,24,24,.22)}
.paytable-v2 .pt-rarity-legendary {box-shadow:inset 0 0 0 1px rgba(255,217,0,.3), 0 0 22px rgba(255,217,0,.1)}
.paytable-v2 .pt-rarity-mythic {
box-shadow:inset 0 0 0 1px rgba(255,82,82,.4), 0 0 28px rgba(255,82,82,.18);
background:linear-gradient(180deg, rgba(255,82,82,.08), rgba(160,24,24,.05));
}
.paytable-v2 .pt-rarity-mythic::before{
background:radial-gradient(ellipse, rgba(255,217,0,.18), rgba(255,82,82,.12) 50%, transparent 80%);
}
/* ============================================================
STATS ROW — fills the empty space below every game
YOUR HISTORY + TOP WINS TODAY
============================================================ */
.stats-row{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
margin-top:18px;
}
.stats-col{
background:linear-gradient(135deg, rgba(28,31,71,.7), rgba(16,19,46,.7));
border:1px solid var(--line-2);border-radius:14px;
padding:14px 16px;
display:flex;flex-direction:column;gap:10px;
min-height:240px;
}
.stats-head{
display:flex;justify-content:space-between;align-items:center;
padding-bottom:10px;border-bottom:1px dashed var(--line-2);
}
.stats-title{
font-family:'Sora';font-weight:400;font-size:14px;letter-spacing:.08em;
color:var(--text);
}
.stats-meta{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:10px;letter-spacing:.1em;
color:var(--text-mute);
display:inline-flex;align-items:center;gap:6px;
}
.stats-meta.live{color:var(--green)}
.live-dot-mini{
width:7px;height:7px;border-radius:50%;background:var(--green);
box-shadow:0 0 8px var(--green);
animation:onlineP 1.4s ease-in-out infinite;
}
.stats-list{
display:flex;flex-direction:column;gap:6px;
flex:1;
max-height:280px;
overflow-y:auto;overflow-x:hidden; /* prevent hover-translate pulse */
}
.stats-list::-webkit-scrollbar{width:4px}
.stats-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.stats-empty{
text-align:center;color:var(--text-mute);
padding:40px 16px;font-style:italic;font-size:13px;
font-family:'Plus Jakarta Sans';font-weight:600;
}
/* History rows */
.hist-row{
display:grid;
/* Reserve a stable amount for the profit column so the meta (1fr)
never collapses below readable. The auto-sized profit was eating
the meta column when the row was narrow, causing the time-ago
text to wrap into 2 lines and visually overlap the profit. */
grid-template-columns:34px 1fr minmax(64px, auto);
align-items:center;
column-gap:12px;
padding:9px 12px;
border-radius:10px;
background:rgba(255,255,255,.03);
border:1px solid var(--line);
font-family:'Plus Jakarta Sans';
animation:histIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes histIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hist-row.win{border-color:rgba(221,28,28,.35);background:rgba(221,28,28,.06)}
.hist-row.loss{border-color:rgba(221,28,28,.35);background:rgba(221,28,28,.06)}
.hist-row.push{border-color:rgba(255,217,0,.35);background:rgba(255,217,0,.06)}
.hr-icon{
width:34px;height:34px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid var(--line-2);
font-size:18px;
overflow:hidden;
}
.hr-icon svg{width:22px;height:22px;display:block}
.hist-row.win .hr-icon{background:linear-gradient(135deg, rgba(40,199,111,.22), rgba(221,28,28,.05));border-color:rgba(40,199,111,.35);color:#28c76f}
.hist-row.loss .hr-icon{background:linear-gradient(135deg, rgba(221,28,28,.22), rgba(221,28,28,.05));border-color:rgba(221,28,28,.35);color:#ff5252}
.hist-row.push .hr-icon{background:linear-gradient(135deg, rgba(255,217,0,.22), rgba(255,56,56,.05));border-color:rgba(255,217,0,.35);color:#ff5050}
/* ----- per-icon idle animations ----- */
.hi{transform-origin:center;transform-box:fill-box}
.hi-rocket-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiRocket 2.4s ease-in-out infinite}
.hi-rocket-flame{transform-origin:50% 80%;transform-box:fill-box;animation:hiFlame .26s ease-in-out infinite alternate}
.hi-boom-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiBoom 1.4s ease-in-out infinite}
.hi-cards-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiCards 3.2s ease-in-out infinite}
.hi-gem-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiGem 2.6s ease-in-out infinite}
.hi-gem-spark{animation:hiGemSpark 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.hi-bomb-g{transform-origin:50% 65%;transform-box:fill-box;animation:hiBomb 2.4s ease-in-out infinite}
.hi-bomb-fuse{transform-origin:18px 6px;transform-box:fill-box;animation:hiBombFuse .35s ease-in-out infinite alternate}
.hi-dice-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiDice 2.8s ease-in-out infinite}
.hi-trend-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiTrend 2.4s ease-in-out infinite}
.hi-trend-tip{animation:hiTrendTip 1.8s ease-in-out infinite}
.hi-target-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiTarget 2.8s ease-in-out infinite}
.hi-arrow-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiArrow 1.8s ease-in-out infinite}
.hi-push-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiPush 2s ease-in-out infinite}
@keyframes hiRocket{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-1.5px) rotate(2deg)}}
@keyframes hiFlame{from{transform:scaleY(.85)}to{transform:scaleY(1.15)}}
@keyframes hiBoom{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(20deg)}}
@keyframes hiCards{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes hiGem{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes hiGemSpark{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.6)}}
@keyframes hiBomb{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hiBombFuse{from{transform:scale(.85);opacity:.7}to{transform:scale(1.25);opacity:1}}
@keyframes hiDice{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes hiTrend{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes hiTrendTip{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes hiTarget{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes hiArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes hiPush{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hr-meta{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.hr-label{
font-weight:700;font-size:12.5px;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
letter-spacing:.01em;
line-height:1.25;
}
.hr-time{
font-size:10.5px;color:var(--text-mute);font-weight:600;
white-space:nowrap; /* don't let "7h ago" wrap into 2 lines */
overflow:hidden;text-overflow:ellipsis;
letter-spacing:.02em;
line-height:1.2;
}
.hr-profit{
font-family:'Sora';font-weight:700;font-size:13px;letter-spacing:.02em;
flex-shrink:0;
white-space:nowrap;
text-align:right;
justify-self:end;
}
.hist-row.win .hr-profit{color:var(--green)}
.hist-row.loss .hr-profit{color:var(--red)}
.hist-row.push .hr-profit{color:var(--gold)}
/* Leaderboard rows */
.lead-row{
display:grid;grid-template-columns:32px 32px 1fr auto;align-items:center;gap:10px;
padding:8px 12px;border-radius:10px;
background:rgba(255,255,255,.03);border:1px solid var(--line);
font-family:'Plus Jakarta Sans';
}
.lead-row:nth-child(1){
background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(255,255,255,.03));
border-color:rgba(255,217,0,.45);
}
.lead-row:nth-child(2){
background:linear-gradient(135deg, rgba(192,192,192,.14), rgba(255,255,255,.03));
border-color:rgba(192,192,192,.4);
}
.lead-row:nth-child(3){
background:linear-gradient(135deg, rgba(205,127,50,.18), rgba(255,255,255,.03));
border-color:rgba(205,127,50,.45);
}
.lead-rank{
width:26px;height:26px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-weight:400;font-size:12px;
background:rgba(255,255,255,.05);color:var(--text-dim);
border:1px solid var(--line-2);
}
.lead-rank.rank-1{background:linear-gradient(135deg,#ff5050,#7a0e0e);color:#5c3800;border-color:#7a0e0e;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.lead-rank.rank-2{background:linear-gradient(135deg,#e8e8ee,#806060);color:#0e0a0e;border-color:#806060}
.lead-rank.rank-3{background:linear-gradient(135deg,#e0a060,#7a0e0e);color:#fff;border-color:#7a0e0e}
.lead-avatar{
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:14px;border:1.5px solid rgba(255,255,255,.2);
}
.lead-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.lead-name{font-weight:700;font-size:13px;color:var(--text);letter-spacing:.02em}
.lead-bet{font-size:10px;color:var(--text-mute);font-weight:600}
.lead-pay{
font-family:'Sora';font-weight:400;font-size:14px;color:var(--green);
letter-spacing:.04em;text-shadow:0 0 8px rgba(221,28,28,.4);
}
@media (max-width: 700px){
.stats-row{grid-template-columns:1fr;gap:10px}
.stats-col{min-height:200px}
}
/* ============================================================
CASES
============================================================ */
.cases-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;
}
@media (max-width:1100px){ .cases-row{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .cases-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .cases-row{grid-template-columns:1fr} }
.case-card{
position:relative;
border-radius:18px;padding:18px 16px 14px;
cursor:pointer;
background:linear-gradient(165deg, rgba(28,31,71,.85), rgba(16,19,46,.95));
border:1px solid var(--line-2);
box-shadow:0 6px 20px rgba(0,0,0,.4);
transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .3s;
display:flex;flex-direction:column;align-items:stretch;gap:10px;
overflow:hidden;text-align:center;color:var(--text);font-family:'Plus Jakarta Sans';
will-change:transform;
}
.case-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 28px var(--case-glow,rgba(255,82,82,.35));
border-color:rgba(255,255,255,.25);
}
.case-card:hover .cc-art{transform:translateY(-3px) scale(1.04)}
.case-card.selected{
border-color:var(--gold);
box-shadow:0 0 0 2px var(--gold), 0 16px 36px rgba(255,217,0,.3), 0 0 28px var(--case-glow,rgba(255,82,82,.35));
}
.cc-art{
position:relative;
width:100%;aspect-ratio:11/10;
display:flex;align-items:center;justify-content:center;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cc-art .case-art{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
/* gentle emerge animation on the items at top */
.case-emerge{transform-origin:50% 78px;animation:emergeBob 3.6s ease-in-out infinite}
@keyframes emergeBob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-4px)}
}
.case-card .cc-name{
font-family:'Plus Jakarta Sans';font-weight:700;font-size:14px;
color:var(--text-dim);letter-spacing:.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
margin-top:2px;
}
.cc-price-row{
display:flex;align-items:center;justify-content:center;gap:6px;
font-family:'Sora';font-weight:400;font-size:24px;color:#fff;
letter-spacing:.02em;
}
.cc-price-coin{display:inline-flex;align-items:center}
.cc-rarity-bar{
display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
margin-top:6px;
}
.cc-bar-seg{
height:4px;border-radius:99px;
background:rgba(255,255,255,.08);
transition:background .3s, box-shadow .3s;
}
.cc-bar-seg.active.seg-1{background:#dd1c1c;box-shadow:0 0 8px #dd1c1c}
.cc-bar-seg.active.seg-2{background:#28c76f;box-shadow:0 0 8px #28c76f}
.cc-bar-seg.active.seg-3{background:#ff5050;box-shadow:0 0 8px #ff5050}
.cc-bar-seg.active.seg-4{background:#ff3838;box-shadow:0 0 8px #ff3838}
.cc-bar-seg.active.seg-5{background:#dd1c1c;box-shadow:0 0 10px #dd1c1c}
.cases-stage{
position:relative;height:200px;border-radius:18px;
background:
radial-gradient(ellipse at center, rgba(255,217,0,.15) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-2), var(--bg-0));
border:1px solid var(--line-2);
margin-bottom:20px;overflow:hidden;
box-shadow:inset 0 4px 16px rgba(0,0,0,.5);
}
.cases-spotlight{
position:absolute;left:50%;top:0;bottom:0;width:160px;
transform:translateX(-50%);
background:linear-gradient(180deg,rgba(255,217,0,.3),rgba(255,217,0,0));
pointer-events:none;
border-left:1px dashed rgba(255,217,0,.5);
border-right:1px dashed rgba(255,217,0,.5);
z-index:2;
}
.cases-pointer{
position:absolute;left:50%;transform:translateX(-50%);
font-size:28px;color:var(--gold);
filter:drop-shadow(0 0 8px rgba(255,217,0,.7));z-index:5;
}
.cases-pointer-top{top:-2px}
.cases-pointer-bot{bottom:-2px}
.cases-reel-wrap{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center}
.cases-reel{display:flex;gap:10px;padding:0 10px;height:160px;align-items:center;transition:transform 5s cubic-bezier(.05,.7,.1,1)}
.case-item{
flex:0 0 140px;height:140px;border-radius:14px;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:4px;
padding:14px 8px 10px;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11px;color:#fff;
border:2px solid rgba(255,255,255,.25);
box-shadow:0 4px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.35);
text-shadow:0 1px 0 rgba(0,0,0,.4);
position:relative;overflow:hidden;
}
.ci-icon-wrap{
width:54px;height:54px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(0,0,0,.3) 90%);
border:2px solid rgba(255,255,255,.35);
display:flex;align-items:center;justify-content:center;
box-shadow:inset 0 -4px 10px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);
position:relative;z-index:2;
}
.ci-icon{font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.ci-mult{font-family:'Sora';font-size:18px;font-weight:400;letter-spacing:.04em}
.ci-name{font-size:10px;opacity:.95;text-align:center;padding:0 6px;line-height:1.1;letter-spacing:.02em}
.ci-rarity{position:absolute;top:6px;left:6px;right:6px;height:3px;border-radius:2px}
.ci-rarity-tag{
position:absolute;top:6px;right:6px;
padding:2px 6px;border-radius:6px;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.25);
font-family:'Sora';font-weight:400;font-size:9px;letter-spacing:.1em;
color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6);
z-index:3;
}
.ci-shine{
position:absolute;left:-50%;top:0;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
transform:skewX(-20deg);
animation:itemShine 4s linear infinite;
pointer-events:none;
}
@keyframes itemShine{
0%{left:-60%}
60%,100%{left:120%}
}
.rarity-common{background:linear-gradient(135deg,#806060,#5b6680)}
.rarity-common .ci-rarity{background:#cfd5e2}
.rarity-uncommon{background:linear-gradient(135deg,#dd1c1c,#7a0e0e)}
.rarity-uncommon .ci-rarity{background:#a8c7ff}
.rarity-rare{background:linear-gradient(135deg,#a01818,#380505)}
.rarity-rare .ci-rarity{background:#b8a3ff}
.rarity-epic{background:linear-gradient(135deg,#dd1c1c,#7a0e0e)}
.rarity-epic .ci-rarity{background:#ffaecf}
.rarity-legendary{background:linear-gradient(135deg,#ff5050,#7a0e0e)}
.rarity-legendary .ci-rarity{background:#ffe05c}
.rarity-mythic{background:linear-gradient(135deg,#a01818,#a01818)}
.rarity-mythic .ci-rarity{background:#ffaee9}
.rarity-mythic::before{
content:"";position:absolute;inset:-2px;border-radius:inherit;
background:conic-gradient(from 0deg,#a01818,#ff5050,#00ffd5,#a01818,#a01818);
z-index:-1;animation:mythicSpin 3s linear infinite;
}
@keyframes mythicSpin{to{transform:rotate(360deg)}}
.case-items-section{margin:20px 0}
.case-items-title{
font-family:'Sora';font-size:20px;color:var(--text);margin-bottom:12px;font-weight:400;
letter-spacing:.02em;
}
.case-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.cig-item{
border-radius:14px;padding:14px 10px 10px;
display:flex;flex-direction:column;align-items:center;gap:6px;
border:1px solid rgba(255,255,255,.2);color:#fff;position:relative;
font-family:'Plus Jakarta Sans';overflow:hidden;
box-shadow:0 4px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.3);
transition:transform .25s cubic-bezier(.2,.8,.25,1);
}
.cig-item:hover{transform:translateY(-3px) scale(1.03)}
.cig-rarity-tag{
position:absolute;top:6px;right:6px;
padding:2px 6px;border-radius:6px;
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);
font-family:'Sora';font-size:9px;letter-spacing:.1em;color:#fff;
z-index:3;
}
.cig-icon-wrap{
width:48px;height:48px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(0,0,0,.3) 90%);
border:2px solid rgba(255,255,255,.35);
display:flex;align-items:center;justify-content:center;
box-shadow:inset 0 -3px 8px rgba(0,0,0,.3), 0 3px 6px rgba(0,0,0,.3);
}
.cig-icon{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.cig-name{font-size:11px;font-weight:700;text-align:center;line-height:1.1;letter-spacing:.02em}
.cig-stats{
display:flex;gap:8px;align-items:center;
padding:3px 10px;border-radius:99px;
background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.18);
}
.cig-mult{font-family:'Sora';font-size:14px;letter-spacing:.04em}
.cig-pct{font-size:10px;opacity:.85}
.cig-shine{
position:absolute;left:-50%;top:0;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
transform:skewX(-20deg);pointer-events:none;
animation:itemShine 5s linear infinite;
}
.cases-controls{display:flex;justify-content:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.case-recent{
display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;
padding:14px;border-radius:14px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);min-height:100px;
}
.recent-empty{
grid-column:1/-1;text-align:center;color:var(--text-mute);
padding:20px;font-style:italic;font-size:13px;
}
.recent-item{
position:relative;border-radius:10px;padding:10px 6px;
display:flex;flex-direction:column;align-items:center;gap:2px;
font-family:'Plus Jakarta Sans';color:#fff;border:1px solid rgba(255,255,255,.2);font-size:10px;
}
.recent-item .ri-icon{font-size:24px}
.recent-item .ri-mult{font-family:'Sora';font-weight:400;font-size:13px}
/* ============================================================
DICE — 3D
============================================================ */
.dice-stage{
position:relative;
width:100%;
aspect-ratio:16 / 9;
max-width:780px;
min-height:340px;
max-height:480px;
margin:0 auto 20px;
display:flex;align-items:center;justify-content:center;gap:80px;
perspective:1400px;
/* Dice felt reverted to a pink wash — was red and washed out the white
dice faces. */
background:
radial-gradient(ellipse at 50% 80%,rgba(0,0,0,.4),transparent 50%),
radial-gradient(ellipse at center,rgba(255,109,180,.1),transparent 70%),
linear-gradient(180deg, var(--bg-2), var(--bg-0));
border:1px solid var(--line-2);
border-radius:18px;
overflow:hidden;
}
.dice-stage::before{
content:"";position:absolute;inset:0;
background:repeating-linear-gradient(45deg,rgba(255,82,82,.04) 0 20px,transparent 20px 40px);
pointer-events:none;
}
.dice-shadow{
position:absolute;bottom:60px;left:calc(50% - 140px);
width:120px;height:30px;
background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
border-radius:50%;filter:blur(4px);
animation:diceShadow 1.6s ease-in-out infinite;
}
.dice-shadow-2{left:calc(50% + 20px);animation-delay:-.3s}
@keyframes diceShadow{0%,100%{transform:scale(1) translateY(0);opacity:.6}50%{transform:scale(.7) translateY(-4px);opacity:.4}}
/* The wrapper carries idle bob, landing squash, win-pulse — and a baseline 3D
tilt so the cube reads as 3D regardless of which face is forward.
The inner .dice handles only the rotateX/rotateY for the chosen face,
composed on top of the wrapper's tilt. */
.dice-cube-wrap{
position:relative;
width:120px;height:120px;
perspective:1400px;
transform-style:preserve-3d;
animation:diceIdle 4s ease-in-out infinite;
}
.dice-cube-wrap.landed{animation:diceLand .55s cubic-bezier(.36,.07,.19,.97)}
.dice-cube-wrap.win-pulse{animation:diceWinPulse .8s ease-out}
.dice-cube-wrap.loss-pulse{animation:diceLossPulse .8s ease-out}
.dice{
position:relative;width:100%;height:100%;
transform-style:preserve-3d;
transition:transform 2.4s cubic-bezier(.16,1,.3,1);
}
.dice-stage.rolling{animation:diceStageThrow .6s ease-out}
@keyframes diceStageThrow{
0%{transform:translateY(0)}
35%{transform:translateY(-18px)}
100%{transform:translateY(0)}
}
@keyframes diceLand{
0% {transform-origin:center bottom; transform:translate3d(0,0,0) rotateX(-18deg) rotateY(-18deg) scale(1,1)}
20% {transform:translate3d(0,-10px,0) rotateX(-18deg) rotateY(-18deg) scale(1.06,.92)}
45% {transform:translate3d(0,0,0) rotateX(-18deg) rotateY(-18deg) scale(1.14,.84)}
70% {transform:translate3d(0,-3px,0) rotateX(-18deg) rotateY(-18deg) scale(.98,1.04)}
100%{transform:translate3d(0,0,0) rotateX(-18deg) rotateY(-18deg) scale(1,1)}
}
@keyframes diceIdle{
0%,100%{transform:translate3d(0,0,0) rotateX(-18deg) rotateY(-18deg)}
50% {transform:translate3d(0,-12px,0) rotateX(-18deg) rotateY(-18deg)}
}
.dice.rolling{animation:none}
.dface{
position:absolute;width:120px;height:120px;border-radius:18px;
display:grid;padding:14px;border:3px solid;
box-shadow:inset 0 0 30px rgba(0,0,0,.25);
}
.dice-blue .dface{background:linear-gradient(135deg,#ff5252,#7a0e0e);border-color:#3a0808}
.dice-red .dface{background:linear-gradient(135deg,#ff7090,#a01818);border-color:#7a0e0e}
.dice-blue .dface::after,.dice-red .dface::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%);
}
.dface i{
background:#fff;border-radius:50%;display:block;
box-shadow:inset 0 -3px 4px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.3);
}
.df-1{place-items:center}.df-1 i{width:24px;height:24px}
.df-2{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.df-2 i:nth-child(1){grid-area:1/1;width:18px;height:18px}.df-2 i:nth-child(2){grid-area:3/3;width:18px;height:18px}
.df-3{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.df-3 i:nth-child(1){grid-area:1/1;width:18px;height:18px}
.df-3 i:nth-child(2){grid-area:2/2;width:18px;height:18px;justify-self:center;align-self:center}
.df-3 i:nth-child(3){grid-area:3/3;width:18px;height:18px}
.df-4,.df-5,.df-6{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.df-4 i{width:18px;height:18px}
.df-4 i:nth-child(1){grid-area:1/1}.df-4 i:nth-child(2){grid-area:1/3}
.df-4 i:nth-child(3){grid-area:3/1}.df-4 i:nth-child(4){grid-area:3/3}
.df-5 i{width:18px;height:18px}
.df-5 i:nth-child(1){grid-area:1/1}.df-5 i:nth-child(2){grid-area:1/3}
.df-5 i:nth-child(3){grid-area:2/2;justify-self:center;align-self:center}
.df-5 i:nth-child(4){grid-area:3/1}.df-5 i:nth-child(5){grid-area:3/3}
.df-6 i{width:16px;height:16px}
.df-6 i:nth-child(1){grid-area:1/1}.df-6 i:nth-child(2){grid-area:1/3}
.df-6 i:nth-child(3){grid-area:2/1}.df-6 i:nth-child(4){grid-area:2/3}
.df-6 i:nth-child(5){grid-area:3/1}.df-6 i:nth-child(6){grid-area:3/3}
.df-1{transform:translateZ(60px)}
.df-6{transform:rotateY(180deg) translateZ(60px)}
.df-2{transform:rotateY(90deg) translateZ(60px)}
.df-5{transform:rotateY(-90deg) translateZ(60px)}
.df-3{transform:rotateX(90deg) translateZ(60px)}
.df-4{transform:rotateX(-90deg) translateZ(60px)}
.dice-controls{display:grid;grid-template-columns:1fr 2fr 1fr;gap:14px;align-items:end}
.dice-pred{display:flex;gap:8px;flex-wrap:wrap}
.dp-btn{
flex:1;font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;
padding:10px 12px;border-radius:99px;cursor:pointer;
background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--text-dim);
transition:all .25s cubic-bezier(.2,.8,.25,1);
}
.dp-btn:hover{background:rgba(255,82,82,.15);color:var(--text);border-color:var(--pink)}
.dp-btn.active{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:rgba(255,255,255,.2);box-shadow:0 0 16px rgba(255,82,82,.5)}
/* ============================================================
MODAL
============================================================ */
.modal-backdrop{
position:fixed;inset:0;z-index:200;
background:rgba(0,0,0,.65);backdrop-filter:blur(10px);
display:none;align-items:center;justify-content:center;
padding:20px;animation:fadeIn .25s;
}
.modal-backdrop.open{display:flex}
@keyframes fadeIn{from{opacity:0}}
.modal{
position:relative;width:min(620px,100%);
max-height:90vh;overflow-y:auto;
background:linear-gradient(135deg,var(--surface),var(--bg-2));
border:1px solid var(--line-2);border-radius:24px;padding:32px;
box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,82,82,.2);
animation:modalIn .42s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{
position:absolute;top:16px;right:16px;
width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.05);border:1px solid var(--line-2);
color:var(--text);cursor:pointer;font-size:20px;font-weight:700;
}
.modal-close:hover{background:var(--red);border-color:var(--red)}
.modal-title{
font-family:'Sora';font-weight:400;font-size:32px;color:var(--text);margin-bottom:8px;
letter-spacing:.02em;
text-shadow:0 0 24px rgba(255,82,82,.4);
}
.modal-sub{color:var(--text-dim);margin-bottom:24px;font-size:14px;font-weight:600}
.crypto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.crypto-card{
padding:16px;border-radius:14px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
cursor:pointer;color:var(--text);text-align:left;font-family:'Plus Jakarta Sans';
transition:transform .2s, border-color .2s;
}
.crypto-card:hover{transform:translateY(-3px);border-color:var(--pink)}
.crypto-card.selected{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,255,213,.18)}
.crypto-logo{
width:36px;height:36px;border-radius:50%;margin-bottom:8px;
display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-weight:400;font-size:16px;color:#fff;
}
.crypto-btc{background:linear-gradient(135deg,#ff5252,#fbbf24)}
.crypto-eth{background:linear-gradient(135deg,#627eea,#3b5998)}
.crypto-sol{background:linear-gradient(135deg,#a01818,#14f195)}
.crypto-ltc{background:linear-gradient(135deg,#345d9d,#bebebe)}
.crypto-usdt{background:linear-gradient(135deg,#26a17b,#50af95)}
.crypto-doge{background:linear-gradient(135deg,#ad6900,#ff5050)}
.crypto-name{font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--text)}
.crypto-rate{font-size:11px;color:var(--text-mute);margin-top:2px;font-weight:600}
.deposit-detail{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start}
.deposit-qr{
width:160px;height:160px;border-radius:14px;
background:#fff;border:3px solid var(--pink);
display:flex;align-items:center;justify-content:center;overflow:hidden;
box-shadow:0 0 24px rgba(255,82,82,.4);
}
.deposit-info label{display:block;font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--text-mute);margin-bottom:6px}
.address-box{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);margin-bottom:10px}
.address-box code{flex:1;font-family:'Plus Jakarta Sans';font-size:11px;color:var(--cyan);word-break:break-all;font-weight:700}
.modal-note{font-size:12px;color:var(--text-mute);margin-bottom:14px;line-height:1.5;font-weight:600}
.modal-win{text-align:center;width:min(720px,100%)}
.modal-win .modal-title{display:flex;align-items:center;justify-content:center;gap:10px}
.title-burst{
display:inline-block;font-size:34px;
filter:drop-shadow(0 0 12px var(--gold));
animation:burstSpin 3s ease-in-out infinite;
}
@keyframes burstSpin{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.15)}}
.win-meta{
display:flex;align-items:center;justify-content:center;gap:6px;
margin-bottom:18px;color:var(--text-dim);font-size:13px;
}
.wm-crate{
font-family:'Sora';font-weight:400;color:var(--gold);
letter-spacing:.04em;
}
.win-stage{
display:flex;align-items:center;justify-content:center;
gap:14px;flex-wrap:wrap;
margin:8px 0 20px;min-height:240px;
}
.win-stage.multi .win-card{width:170px;height:220px}
.win-card{
position:relative;
width:220px;height:260px;
border-radius:20px;
padding:18px 14px 14px;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:8px;
border:3px solid rgba(255,255,255,.35);color:#fff;font-family:'Plus Jakarta Sans';
animation:winPop .6s cubic-bezier(.34,1.56,.64,1) backwards;
box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 32px rgba(255,255,255,.18);
overflow:hidden;
transform-style:preserve-3d;
}
@keyframes winPop{
0%{opacity:0;transform:scale(0) rotate(-180deg)}
70%{transform:scale(1.1) rotate(8deg)}
100%{opacity:1;transform:scale(1) rotate(0)}
}
.wc-rarity-label{
align-self:stretch;
padding:4px 10px;border-radius:99px;
background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);
font-family:'Sora';font-size:11px;letter-spacing:.15em;
text-transform:uppercase;text-align:center;
}
.wc-icon-wrap{
width:96px;height:96px;border-radius:50%;
background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.5), rgba(0,0,0,.35) 90%);
border:3px solid rgba(255,255,255,.45);
display:flex;align-items:center;justify-content:center;
box-shadow:
inset 0 -8px 16px rgba(0,0,0,.35),
inset 0 6px 12px rgba(255,255,255,.3),
0 0 24px rgba(255,255,255,.25);
margin:6px 0;
animation:winIconBob 2.5s ease-in-out infinite;
}
@keyframes winIconBob{
0%,100%{transform:translateY(0) rotate(-4deg)}
50%{transform:translateY(-6px) rotate(4deg)}
}
.win-card .wc-icon{font-size:54px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.win-card .wc-name{font-size:14px;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.win-card .wc-mult{
font-family:'Sora';font-weight:400;font-size:30px;letter-spacing:.04em;
text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.win-card .wc-payout{
padding:4px 12px;border-radius:99px;
background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);
font-family:'Sora';font-size:14px;color:#ffe0e0;
letter-spacing:.04em;
}
.wc-shine{
position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
transform:translateX(-100%);
animation:wcShine 3s ease-in-out infinite 1s;
}
@keyframes wcShine{
0%,30%{transform:translateX(-100%)}
50%,100%{transform:translateX(100%)}
}
/* mythic gets a rotating outer ring */
.win-card.rarity-mythic::before{
content:"";position:absolute;inset:-3px;border-radius:inherit;
background:conic-gradient(from 0deg,#a01818,#ff5050,#00ffd5,#a01818,#a01818);
z-index:-1;animation:mythicSpin 3s linear infinite;
}
.win-card.rarity-legendary::before{
content:"";position:absolute;inset:-3px;border-radius:inherit;
background:conic-gradient(from 0deg,#ff5050,#ffe0e0,#ff5050,#7a0e0e,#ff5050);
z-index:-1;animation:mythicSpin 5s linear infinite;
}
.win-summary{
display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;
padding:16px 20px;border-radius:14px;
background:linear-gradient(135deg, rgba(255,82,82,.1), rgba(160,24,24,.1));
border:1px solid var(--line-2);
margin-bottom:18px;
}
.ws-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.ws-label{font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.2em;color:var(--text-mute);font-weight:700}
.ws-val{font-family:'Sora';font-size:18px;color:var(--text);letter-spacing:.04em}
.ws-won{color:var(--gold)}
.ws-win{color:var(--green);text-shadow:0 0 14px rgba(221,28,28,.5)}
.ws-loss{color:var(--red);text-shadow:0 0 14px rgba(221,28,28,.5)}
.ws-arrow{font-family:'Sora';font-size:22px;color:var(--text-mute)}
.ws-cell-profit .ws-val{font-size:22px}
.win-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
/* ============================================================
TOAST
============================================================ */
.toast-wrap{position:fixed;bottom:30px;right:30px;z-index:300;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
padding:14px 20px;border-radius:14px;
background:linear-gradient(135deg,var(--surface),var(--bg-2));
border:1px solid var(--pink);
font-family:'Plus Jakarta Sans';font-size:13px;font-weight:700;color:var(--text);
box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(255,82,82,.3);
animation:toastIn .3s ease, toastOut .3s ease 3s forwards;
pointer-events:auto;
}
.toast.win{border-color:var(--green);box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(221,28,28,.45);color:#7be8a3}
.toast.loss{border-color:var(--red);box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(221,28,28,.45);color:#ff5252}
.toast.info{border-color:var(--cyan);color:var(--cyan)}
@keyframes toastIn{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(100px)}}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1300px){
.layout{grid-template-columns:200px 1fr}
.chat{display:none}
.chat.open{display:flex;position:fixed;right:0;top:64px;width:320px;height:calc(100vh - 64px);z-index:60;box-shadow:-12px 0 40px rgba(0,0,0,.6)}
.btn-icon-only{display:flex}
.promo-strip{grid-template-columns:1fr 1fr}
.promo-strip>:nth-child(3){display:none}
}
@media (max-width: 1000px){
.layout{grid-template-columns:1fr}
.sidebar{display:none}
.online-pill{display:none}
.hero{grid-template-columns:1fr;padding:32px}
.hero-art{display:none}
.stats{grid-template-columns:repeat(2,1fr)}
.crash-controls{grid-template-columns:1fr 1fr}
.crash-bet-btn{grid-column:1/-1}
.mines-layout{grid-template-columns:1fr}
.crypto-grid{grid-template-columns:repeat(2,1fr)}
.deposit-detail{grid-template-columns:1fr}
.deposit-qr{margin:0 auto}
.bj-controls{grid-template-columns:1fr 1fr}
.dice-controls{grid-template-columns:1fr}
.bf-row{grid-template-columns:1fr 1fr 1fr 1fr;font-size:11px}
.bf-row>*:nth-child(5){display:none}
.promo-strip{grid-template-columns:1fr}
.promo-strip>:nth-child(3){display:flex}
.win-summary{grid-template-columns:1fr 1fr 1fr;gap:8px}
.win-summary .ws-arrow{display:none}
.win-stage.multi .win-card{width:140px;height:200px}
}
@media (max-width: 700px){
main{padding:14px 12px 40px}
.topbar{padding:8px 12px;gap:8px}
.logo-text{display:none}
.balance{padding:6px 12px;font-size:13px}
.balance-label{display:none}
.btn-deposit{padding:8px 14px;font-size:11px}
.btn-ghost{padding:8px 12px;font-size:11px}
.profile{display:none}
.hero{padding:24px 18px;border-radius:20px}
.hero-title{font-size:42px}
.hero-sub{font-size:14px}
.stats{grid-template-columns:1fr 1fr;gap:10px}
.stat{padding:10px 12px}
.stat-num{font-size:20px}
.section-title{font-size:24px;margin:28px 0 14px}
.game-grid{grid-template-columns:1fr 1fr;gap:12px}
.game-card{height:210px;padding:14px}
.gc-name{font-size:22px}
.gc-tag{font-size:9px;padding:4px 10px;bottom:12px;left:14px}
.gc-art{bottom:36px;width:60%}
.gc-bubble{font-size:11px;padding:4px 9px}
.gc-crash .gc-bubble{top:50px}
.gc-crash .gc-bubble-2{bottom:40px}
.promo{height:100px;padding:12px 14px}
.promo-title{font-size:18px}
.promo-sub{font-size:11px}
.promo-art{width:80px;height:80px;right:-15px;bottom:-15px}
.promo-art-coins::before,.promo-art-bonus::before{font-size:22px}
.promo-art-crate::before{font-size:42px}
.game-shell{padding:16px;border-radius:18px}
.game-header{margin-bottom:16px;padding-bottom:14px}
.game-title{font-size:22px}
.game-status{font-size:10px;padding:6px 12px}
/* CRASH */
.crash-board{height:320px}
.crash-multiplier{font-size:56px}
.crash-rocket svg{width:42px;height:56px}
/* MINES */
.mines-grid{padding:8px;gap:6px;max-width:100%}
.mine-tile{font-size:24px;border-radius:10px}
.mines-panel{padding:14px}
/* BLACKJACK */
.bj-table{padding:18px 14px;min-height:320px;border-radius:140px / 22px}
.bj-table::after{font-size:10px;letter-spacing:.2em}
.bj-card{width:62px;height:90px;padding:6px 7px}
.bj-card-rank,.bj-card-rank-bot{font-size:16px}
.bj-card-suit{font-size:22px}
.bj-card.flipped::after{font-size:24px}
.bj-cards{gap:6px;min-height:100px}
.bj-controls{grid-template-columns:1fr 1fr;gap:10px}
.bj-controls .control-group{grid-column:1/-1}
/* SLOTS */
.slots-machine{padding:14px 14px 18px;border-radius:22px}
.sm-marquee{font-size:14px;letter-spacing:.12em}
.sm-bulbs span{width:5px;height:5px}
.sm-window{height:160px;padding:8px;gap:5px}
.reel-strip span{height:140px}
.reel-strip span svg{width:80px;height:80px}
.sm-lever{display:none}
.slots-controls{grid-template-columns:1fr;gap:10px}
.paytable-v2{padding:14px}
.paytable-v2 .pt-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.paytable-v2 .pt-card{padding:8px 6px 10px}
.paytable-v2 .pt-card-syms .pt-icon{width:28px;height:28px}
/* CASES */
.cases-row{grid-template-columns:repeat(2,1fr);gap:10px}
.case-card{height:170px;padding:12px}
.case-card .cc-name{font-size:18px}
.case-card .cc-price{font-size:11px;padding:4px 10px}
.cc-icon{font-size:54px}
.cases-stage{height:160px}
.case-item{flex:0 0 110px;height:110px;padding:10px 6px}
.ci-icon-wrap{width:42px;height:42px}
.ci-icon{font-size:22px}
.ci-mult{font-size:14px}
.ci-name{font-size:9px}
.case-items-grid{grid-template-columns:repeat(2,1fr);gap:8px}
/* DICE */
.dice-stage{height:280px;gap:24px}
.dice{width:90px;height:90px;animation-name:diceIdleSm}
.dface{width:90px;height:90px;padding:10px;border-radius:14px}
.dface i{box-shadow:inset 0 -2px 3px rgba(0,0,0,.5)}
.df-1 i{width:18px;height:18px}
.df-2 i,.df-3 i,.df-4 i,.df-5 i{width:14px !important;height:14px !important}
.df-6 i{width:12px !important;height:12px !important}
.df-1{transform:translateZ(45px)}
.df-6{transform:rotateY(180deg) translateZ(45px)}
.df-2{transform:rotateY(90deg) translateZ(45px)}
.df-5{transform:rotateY(-90deg) translateZ(45px)}
.df-3{transform:rotateX(90deg) translateZ(45px)}
.df-4{transform:rotateX(-90deg) translateZ(45px)}
.dice-shadow{width:80px;left:calc(50% - 100px)}
.dice-shadow-2{left:calc(50% + 16px)}
.dice-controls{grid-template-columns:1fr;gap:10px}
.dp-btn{font-size:11px;padding:8px 8px}
/* MODALS */
.modal{padding:20px 18px;border-radius:18px}
.modal-title{font-size:24px}
.crypto-grid{grid-template-columns:1fr 1fr}
.crypto-card{padding:12px}
/* WIN MODAL */
.modal-win{width:min(520px,100%)}
.win-stage{min-height:200px;gap:10px}
.win-card{width:160px;height:200px;padding:12px 10px}
.wc-icon-wrap{width:72px;height:72px}
.win-card .wc-icon{font-size:40px}
.win-card .wc-mult{font-size:24px}
.win-card .wc-name{font-size:12px}
.wc-rarity-label{font-size:10px}
.win-card .wc-payout{font-size:12px;padding:3px 10px}
.win-stage.multi .win-card{width:120px;height:170px}
.win-stage.multi .wc-icon-wrap{width:58px;height:58px}
.win-stage.multi .win-card .wc-icon{font-size:28px}
.win-summary{padding:12px;font-size:12px}
.ws-val{font-size:14px}
.ws-cell-profit .ws-val{font-size:16px}
/* TOPBAR */
.toast{font-size:12px;padding:10px 16px}
.toast-wrap{right:14px;bottom:14px;left:14px}
.toast-wrap>.toast{max-width:100%}
}
@keyframes diceIdleSm{
0%,100%{transform:translateY(0) rotateX(-15deg) rotateY(-15deg)}
50%{transform:translateY(-8px) rotateX(-15deg) rotateY(-15deg)}
}
@media (max-width: 460px){
.game-grid{grid-template-columns:1fr}
.promo-strip{gap:10px;margin-bottom:16px}
.stats{grid-template-columns:1fr 1fr}
.hero-title{font-size:36px;line-height:1}
.crash-multiplier{font-size:44px}
.case-items-grid{grid-template-columns:1fr 1fr}
.win-stage.multi .win-card{width:100%;max-width:200px}
.win-summary{grid-template-columns:1fr;gap:6px;text-align:center}
.win-summary .ws-arrow{display:none}
.ws-cell{padding:6px 0;border-bottom:1px dashed var(--line-2)}
.ws-cell-profit{border-bottom:none}
}
/* ============================================================
BUSY BUTTON STATE — used by every game while in-progress
============================================================ */
.btn.is-busy{
pointer-events:none;
position:relative;
cursor:wait;
transform:translateY(0) scale(.99);
filter:saturate(1.15);
animation:btnBusyPulse 1.2s ease-in-out infinite;
}
.btn.is-busy::before{
content:"";
position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
background-size:240% 100%;
background-position:130% 0;
animation:btnBusySweep 1.1s linear infinite;
pointer-events:none;
mix-blend-mode:screen;
}
.btn.is-busy .btn-shine{display:none}
.btn-busy-label{display:inline-flex;align-items:center;gap:8px;letter-spacing:.08em}
.btn-busy-dots{display:inline-flex;gap:3px;align-items:flex-end}
.btn-busy-dots i{
width:5px;height:5px;border-radius:50%;
background:currentColor;
display:block;
animation:btnBusyDot 1s ease-in-out infinite;
}
.btn-busy-dots i:nth-child(2){animation-delay:.15s}
.btn-busy-dots i:nth-child(3){animation-delay:.3s}
@keyframes btnBusyPulse{
0%,100%{box-shadow:inherit}
50%{filter:saturate(1.3) brightness(1.05)}
}
@keyframes btnBusySweep{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes btnBusyDot{
0%,80%,100%{transform:translateY(0);opacity:.5}
40%{transform:translateY(-4px);opacity:1}
}
/* primary busy variant — cycle through warm casino colors */
.btn-primary.is-busy{
background:linear-gradient(180deg,#ff5252 0%,#dd1c1c 50%,#7a0e0e 100%);
animation:btnBusyPulse 1.2s ease-in-out infinite, btnPrimaryBusyHue 2.6s linear infinite;
}
@keyframes btnPrimaryBusyHue{
0%{filter:hue-rotate(0deg) saturate(1.2)}
50%{filter:hue-rotate(-25deg) saturate(1.4) brightness(1.1)}
100%{filter:hue-rotate(0deg) saturate(1.2)}
}
.btn-cashout.is-busy{
animation:btnBusyPulse 1.2s ease-in-out infinite, btnCashoutBusyHue 2s linear infinite;
}
@keyframes btnCashoutBusyHue{
0%,100%{filter:saturate(1.2) brightness(1)}
50%{filter:saturate(1.4) brightness(1.1)}
}
/* ============================================================
ANIMATED VIBRANT BACKGROUNDS — every game
============================================================ */
/* shared color noise dots layer (used inside game stages) */
@keyframes bgDriftA{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-30px,20px) scale(1.12)}
}
@keyframes bgDriftB{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(40px,-25px) scale(1.08)}
}
@keyframes bgDriftC{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-20px,-30px) scale(1.05)}
}
@keyframes bgScrollDots{
from{background-position:0 0, 0 0}
to {background-position:80px 80px, -100px -120px}
}
@keyframes bgPanGrid{
from{background-position:0 0, 0 0}
to {background-position:80px 0, 0 80px}
}
/* ---- Slots: sakura petals + neon glow drift ---- */
.slots-machine{
position:relative;
isolation:isolate;
overflow:hidden;
}
.slots-machine::before{
content:"";position:absolute;inset:-30px;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 320px 200px at 18% 0%, rgba(255,108,174,.3), transparent 70%),
radial-gradient(ellipse 360px 220px at 82% 100%, rgba(255,217,0,.22), transparent 70%),
radial-gradient(ellipse 280px 220px at 50% 60%, rgba(160,24,24,.2), transparent 70%);
animation:bgDriftA 14s ease-in-out infinite;
}
.slots-machine::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(circle at 10% 20%, rgba(255,140,200,.6) 0 1.5px, transparent 2px),
radial-gradient(circle at 80% 60%, rgba(255,217,0,.55) 0 1.5px, transparent 2px),
radial-gradient(circle at 30% 90%, rgba(160,24,24,.55) 0 1.5px, transparent 2px),
radial-gradient(circle at 65% 35%, rgba(255,108,174,.55) 0 1.5px, transparent 2px),
radial-gradient(circle at 50% 70%, rgba(255,217,0,.5) 0 1.4px, transparent 2px);
background-size:120px 120px, 160px 160px, 200px 200px, 140px 140px, 180px 180px;
animation:bgScrollDots 26s linear infinite;
opacity:.65;
}
.slots-machine > *{position:relative;z-index:1}
/* falling petals */
.slots-petals{
position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.slots-petal{
position:absolute;top:-24px;
width:14px;height:14px;
background:radial-gradient(circle at 30% 30%, #ffe1ee, #ff7fb3 65%, #d63b73);
border-radius:80% 0 80% 0;
filter:drop-shadow(0 0 8px rgba(255,127,179,.7));
animation:petalFall linear infinite;
opacity:.85;
}
@keyframes petalFall{
0%{transform:translate(0,-30px) rotate(0deg);opacity:0}
10%{opacity:.8}
100%{transform:translate(var(--drift,40px),520px) rotate(720deg);opacity:0}
}
/* slots reel shake while spinning */
.slots-machine.spinning{animation:slotsRumble .14s linear infinite}
@keyframes slotsRumble{
0%{transform:translate(0,0)}
25%{transform:translate(-1.5px,1px)}
50%{transform:translate(1.5px,-1px)}
75%{transform:translate(-1px,-1.5px)}
100%{transform:translate(0,0)}
}
.slots-machine.win{animation:slotsWinPump .9s ease-out}
@keyframes slotsWinPump{
0%{transform:scale(1)}
35%{transform:scale(1.025)}
100%{transform:scale(1)}
}
/* ---- Plinko: enhanced nebula + drifting particles + dropping pulse ---- */
.plinko-board{isolation:isolate}
.plinko-board::before{
z-index:0;
background:
radial-gradient(ellipse 600px 320px at 30% -10%, rgba(255,56,56,.22), transparent 70%),
radial-gradient(ellipse 500px 260px at 70% 110%, rgba(255,82,82,.24), transparent 70%),
radial-gradient(circle 220px at 50% 50%, rgba(160,24,24,.18), transparent 70%) !important;
animation:bgDriftB 18s ease-in-out infinite -8s !important;
}
.plinko-stars{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(circle at 12% 22%, rgba(255,255,255,.7) 0 1px, transparent 2px),
radial-gradient(circle at 78% 40%, rgba(255,217,0,.6) 0 1.2px, transparent 2px),
radial-gradient(circle at 36% 72%, rgba(124,225,255,.6) 0 1px, transparent 2px),
radial-gradient(circle at 88% 80%, rgba(255,108,174,.6) 0 1.2px, transparent 2px),
radial-gradient(circle at 50% 12%, rgba(255,82,82,.55) 0 1px, transparent 2px);
background-size:140px 140px, 180px 180px, 200px 200px, 220px 220px, 160px 160px;
animation:bgScrollDots 32s linear infinite;
opacity:.55;
}
#plinko-canvas{z-index:1}
.plinko-slots{z-index:2}
/* AURORA — replaces the previous "pulsing light" both at rest and during
a drop. A diagonal gloss sweep travels across the board on a 22s loop;
when a ball is dropping the loop speeds up to 6s (still slower than the
old 1.4s pulse, so it reads as motion not strobing) and the star layer
accelerates to suggest depth + speed. ::after is the aurora layer; ::
before stays as the radial nebula. */
.plinko-board::after{
content:"";
position:absolute; inset:0;
background:
/* Diagonal aurora gloss — sweeps left-to-right */
linear-gradient(115deg,
transparent 35%,
rgba(160,24,24,.06) 47%,
rgba(255,82,82,.05) 53%,
transparent 65%),
/* Slow pink-purple breathing wash on top of the radial nebula */
radial-gradient(ellipse 70% 50% at 50% 0%,
rgba(255,82,82,.04), transparent 70%);
background-size:220% 100%, 100% 100%;
background-position:-50% 0, 0 0;
pointer-events:none;
z-index:0;
animation:plinkoAurora 22s linear infinite;
mix-blend-mode:screen;
}
@keyframes plinkoAurora{
0% {background-position:-50% 0, 0 0}
100% {background-position: 250% 0, 0 0}
}
/* When a ball is in flight: aurora speeds up ~3.7×, stars accelerate so
the depth feels active. No strobe — the existing animations keep their
character but in a higher gear. */
.plinko-board.dropping::after{
animation-duration:6s;
}
.plinko-board.dropping .plinko-stars{
animation-duration:9s;
opacity:.85;
}
.plinko-board.dropping::before{
animation-duration:9s !important;
}
/* Win flash — kept as a one-shot green sweep (this is a victory cue, not
a continuous animation, so it doesn't read as strobing). Slightly
shorter and cleaner: a single aurora pulse instead of the box-shadow
bloom. */
.plinko-board.win-flash::after{animation:plinkoWinFlash 1s ease-out}
@keyframes plinkoWinFlash{
0% {background-position:-50% 0, 0 0; filter:hue-rotate(0deg) brightness(1)}
20% {filter:hue-rotate(80deg) brightness(1.3)}
100% {background-position:250% 0, 0 0; filter:hue-rotate(0deg) brightness(1)}
}
/* ---- Upgrader: wheel shake while spinning + extra layers ---- */
/* Shake intensity is driven by a CSS variable controlled from JS so it can
decay smoothly as the wheel slows down. --shakeI ranges 0..1. */
.upgrader-wheel-wrap{
--shakeI: 0;
}
.upgrader-wheel-wrap.spinning{
animation:upgraderShake 0.06s linear infinite;
}
@keyframes upgraderShake{
0% {transform:translate(calc(var(--shakeI) * -2px), calc(var(--shakeI) * 1px))}
25% {transform:translate(calc(var(--shakeI) * 1.8px), calc(var(--shakeI) * -1.2px))}
50% {transform:translate(calc(var(--shakeI) * -1.4px), calc(var(--shakeI) * -1.6px))}
75% {transform:translate(calc(var(--shakeI) * 1.6px), calc(var(--shakeI) * 1.4px))}
100%{transform:translate(calc(var(--shakeI) * -1px), calc(var(--shakeI) * 1px))}
}
.upgrader-wheel-wrap.spinning .upgrader-pointer{
animation:upgraderPointerBounce .35s ease-out infinite;
}
@keyframes upgraderPointerBounce{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(2.5px)}
}
.upgrader-wheel.spinning-blur{
filter:drop-shadow(0 0 30px rgba(160,24,24,.5)) drop-shadow(0 0 60px rgba(255,82,82,.3));
}
.upgrader-stage{isolation:isolate}
.upgrader-stage::after{z-index:0}
.upgrader-stage > *{position:relative;z-index:1}
.upgrader-particles{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(circle at 15% 30%, rgba(255,82,82,.55) 0 1.4px, transparent 2px),
radial-gradient(circle at 85% 25%, rgba(160,24,24,.6) 0 1.4px, transparent 2px),
radial-gradient(circle at 70% 80%, rgba(255,217,0,.55) 0 1.4px, transparent 2px),
radial-gradient(circle at 30% 80%, rgba(160,24,24,.55) 0 1.4px, transparent 2px);
background-size:160px 160px, 200px 200px, 180px 180px, 220px 220px;
animation:bgScrollDots 28s linear infinite reverse;
opacity:.7;
}
.upgrader-wheel-wrap.win-burst::before{
content:"";position:absolute;inset:-20px;border-radius:50%;
background:radial-gradient(circle, rgba(255,82,82,.55), transparent 70%);
animation:upWinBurst .8s ease-out forwards;
pointer-events:none;z-index:0;
}
@keyframes upWinBurst{
0%{opacity:0;transform:scale(.6)}
35%{opacity:1;transform:scale(1.1)}
100%{opacity:0;transform:scale(1.6)}
}
/* ---- Dice: animated felt + glow drift ---- */
.dice-stage{isolation:isolate}
.dice-stage::before{z-index:0}
.dice-stage > *{position:relative;z-index:1}
.dice-stage::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 280px 200px at 20% 20%, rgba(255,82,82,.2), transparent 70%),
radial-gradient(ellipse 320px 220px at 80% 80%, rgba(160,24,24,.18), transparent 70%),
radial-gradient(ellipse 260px 220px at 50% 50%, rgba(255,217,0,.1), transparent 70%);
animation:bgDriftC 16s ease-in-out infinite;
}
.dice-particles{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(circle at 10% 30%, rgba(255,108,174,.6) 0 1.4px, transparent 2px),
radial-gradient(circle at 70% 20%, rgba(255,217,0,.55) 0 1.2px, transparent 2px),
radial-gradient(circle at 35% 80%, rgba(124,225,255,.5) 0 1.2px, transparent 2px),
radial-gradient(circle at 80% 75%, rgba(255,82,82,.55) 0 1.2px, transparent 2px);
background-size:140px 140px, 180px 180px, 220px 220px, 200px 200px;
animation:bgScrollDots 24s linear infinite;
opacity:.5;
}
/* ---- Mines: starfield + nebula ---- */
.mines-grid{
position:relative;
isolation:isolate;
overflow:visible;
}
.mines-grid::before{
content:"";position:absolute;inset:-12px;pointer-events:none;z-index:-1;
border-radius:22px;
background:
radial-gradient(ellipse 380px 240px at 25% 0%, rgba(255,82,82,.18), transparent 70%),
radial-gradient(ellipse 380px 240px at 75% 100%, rgba(160,24,24,.2), transparent 70%);
animation:bgDriftA 18s ease-in-out infinite;
}
.mines-grid::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
border-radius:14px;
background-image:
radial-gradient(circle at 12% 25%, rgba(255,255,255,.55) 0 1px, transparent 2px),
radial-gradient(circle at 78% 35%, rgba(255,217,0,.55) 0 1.2px, transparent 2px),
radial-gradient(circle at 36% 70%, rgba(124,225,255,.5) 0 1px, transparent 2px),
radial-gradient(circle at 88% 80%, rgba(255,108,174,.55) 0 1.2px, transparent 2px);
background-size:140px 140px, 180px 180px, 200px 200px, 220px 220px;
animation:bgScrollDots 30s linear infinite;
opacity:.6;
}
/* ---- Limbo: enhanced floating orbs (existing layer kept) ---- */
.limbo-stage{isolation:isolate}
.limbo-particles{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,82,82,.55) 0 1.2px, transparent 2px),
radial-gradient(circle at 80% 60%, rgba(255,217,0,.5) 0 1.2px, transparent 2px),
radial-gradient(circle at 50% 90%, rgba(160,24,24,.55) 0 1.2px, transparent 2px);
background-size:160px 160px, 200px 200px, 180px 180px;
animation:bgScrollDots 36s linear infinite;
opacity:.5;
}
/* ---- Crash: existing — give the multi text a subtle pulse while flying ---- */
.crash-board[data-flying="1"] .crash-multiplier{
animation:crashMultiPulse 1.1s ease-in-out infinite;
}
@keyframes crashMultiPulse{
0%,100%{text-shadow:0 0 18px rgba(255,82,82,.5)}
50%{text-shadow:0 0 32px rgba(255,82,82,.85), 0 0 48px rgba(255,217,0,.45)}
}
/* ---- Blackjack: animated felt swirl ---- */
.bj-table{isolation:isolate;overflow:hidden}
.bj-table::after{z-index:0}
.bj-table > *{position:relative;z-index:1}
.bj-particles{
position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(circle at 18% 28%, rgba(255,217,0,.5) 0 1.4px, transparent 2px),
radial-gradient(circle at 80% 36%, rgba(255,108,174,.55) 0 1.2px, transparent 2px),
radial-gradient(circle at 30% 75%, rgba(124,225,255,.45) 0 1px, transparent 2px),
radial-gradient(circle at 70% 82%, rgba(255,82,82,.5) 0 1.2px, transparent 2px);
background-size:160px 160px, 200px 200px, 220px 220px, 240px 240px;
animation:bgScrollDots 34s linear infinite;
opacity:.45;
}
/* ---- Plinko slot landing pop intensified ---- */
.plinko-slot.flash{
z-index:5;
animation:slotFlashV2 1s cubic-bezier(.16,1,.3,1);
}
@keyframes slotFlashV2{
0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,255,255,0)}
20%{transform:translateY(-16px) scale(1.22);box-shadow:0 0 36px rgba(255,255,255,.95), 0 0 72px rgba(255,217,0,.6)}
60%{transform:translateY(-4px) scale(1.06)}
100%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,255,255,0)}
}
/* ============================================================
DICE V2 — bloxgame-style controls + cleaner stage layout
============================================================ */
.dice-cube-row{
position:relative;
display:flex;align-items:center;justify-content:center;gap:80px;
width:100%;
/* Keep the 3D context unbroken between .dice-stage's perspective and
the inner .dice-cube-wrap. Without preserve-3d here, the row's
default `flat` transform-style flattens the cubes' 3D rotation
before the user ever sees it — they look like 2D colored squares. */
transform-style:preserve-3d;
}
.dice-roll-readout{
position:absolute;top:12px;left:50%;transform:translateX(-50%);
z-index:2;
display:flex;flex-direction:column;align-items:center;gap:2px;
transition:transform .25s;
}
.dice-roll-readout .drr-label{
font-family:'Plus Jakarta Sans';font-weight:800;font-size:10px;letter-spacing:.22em;
color:var(--text-mute);
padding:3px 10px;border-radius:99px;
background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);
}
.dice-roll-readout .drr-value{
font-family:'Sora';font-weight:800;font-size:52px;color:var(--text);
letter-spacing:.04em;line-height:1;
text-shadow:0 0 18px rgba(255,217,0,.55), 0 0 32px rgba(255,82,82,.35);
}
.dice-roll-readout.win .drr-label{background:rgba(40,199,111,.2);border-color:rgba(40,199,111,.5);color:#28c76f}
.dice-roll-readout.loss .drr-label{background:rgba(221,28,28,.2);border-color:rgba(221,28,28,.5);color:#ff5252}
/* OVER/UNDER badge — clear so the player knows what they're betting on */
.dice-mode-pill{
position:absolute;top:18px;left:18px;z-index:3;
display:inline-flex;align-items:center;gap:8px;
padding:7px 14px;border-radius:99px;
background:linear-gradient(135deg, rgba(255,82,82,.18), rgba(255,82,82,.06));
border:1px solid rgba(255,82,82,.45);
font-family:'Plus Jakarta Sans';font-weight:800;font-size:11px;letter-spacing:.18em;
color:#9affd0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(255,82,82,.18);
transition:background .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.dice-mode-pill .dmp-label{opacity:.65;letter-spacing:.2em}
.dice-mode-pill strong{
color:#ff5252;text-shadow:0 0 10px rgba(255,82,82,.7);font-size:13px;
}
.dice-mode-pill #dice-mode-target{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 6px;border-radius:999px;
background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:800;
border:1px solid rgba(255,255,255,.2);
}
.dice-mode-pill.under{
background:linear-gradient(135deg, rgba(160,24,24,.22), rgba(255,82,82,.08));
border-color:rgba(160,24,24,.55);
color:#ff7a7a;
box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(160,24,24,.25);
}
.dice-mode-pill.under strong{color:#a78bff;text-shadow:0 0 10px rgba(160,24,24,.7)}
.dice-mode-pill.flipping{animation:diceModePop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes diceModePop{
0%{transform:scale(.8) rotate(-3deg)}
60%{transform:scale(1.1) rotate(2deg)}
100%{transform:scale(1) rotate(0)}
}
.dice-roll-readout.win .drr-value{color:#28c76f;text-shadow:0 0 22px rgba(40,199,111,.85),0 0 40px rgba(40,199,111,.45)}
.dice-roll-readout.win {transform:translateX(-50%) scale(1.08)}
.dice-roll-readout.loss .drr-value{color:#ff7090;text-shadow:0 0 22px rgba(221,28,28,.85)}
.dice-target-bar{
position:absolute;left:5%;right:5%;bottom:14px;
z-index:3;
pointer-events:auto;
}
.dtb-track{
position:relative;height:34px;
border-radius:99px;
/* split fill: red zone left of thumb, green zone right of thumb */
background:linear-gradient(90deg,
#dd1c1c 0,
#dd1c1c var(--dtb-pct,50%),
#ff5252 var(--dtb-pct,50%),
#ff5252 100%);
box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.dtb-fill{display:none}
.dtb-marks{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:space-between;
padding:0 14px;
pointer-events:none;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:10px;
color:rgba(255,255,255,.85);letter-spacing:.1em;
text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.dtb-range{
position:absolute;inset:0;
width:100%;height:100%;
-webkit-appearance:none;appearance:none;
background:transparent;border:0;outline:none;
cursor:pointer;margin:0;
z-index:2;
}
.dtb-range::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:16px;height:46px;background:transparent;border:0;
cursor:grab;
}
.dtb-range::-moz-range-thumb{ width:16px;height:46px;background:transparent;border:0;cursor:grab; }
.dtb-thumb{
position:absolute;top:50%;
transform:translate(-50%,-50%);
left:var(--dtb-pct,50%);
pointer-events:none;
z-index:3;
}
.dtb-thumb-bar{
width:14px;height:50px;
border-radius:8px;
background:linear-gradient(180deg,#ffffff,#ff8cd1 60%,#a01818);
box-shadow:
0 0 0 2px rgba(255,255,255,.25),
0 0 18px rgba(255,82,82,.7),
0 0 32px rgba(255,82,82,.4);
}
.dtb-thumb-val{
position:absolute;left:50%;top:-26px;transform:translateX(-50%);
font-family:'Plus Jakarta Sans';font-weight:800;font-size:11px;letter-spacing:.05em;
color:#fff;
background:rgba(10,8,11,.9);border:1px solid rgba(255,255,255,.18);
padding:3px 9px;border-radius:99px;
white-space:nowrap;
box-shadow:0 4px 10px rgba(0,0,0,.5);
}
/* Dice controls — 2-row grid so each input gets enough room. Row 1 holds the
3 numeric fields; row 2 holds the wide PREDICTION segment + TARGET SUM. */
.dice-controls-v2{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:14px 14px;align-items:end;
max-width:none;margin:0;
}
.dice-controls-v2 .control-group:nth-child(1){grid-column:span 2} /* BET AMOUNT */
.dice-controls-v2 .control-group:nth-child(2){grid-column:span 2} /* MULTIPLIER */
.dice-controls-v2 .control-group:nth-child(5){grid-column:span 2} /* WIN CHANCE */
.dice-controls-v2 .control-group:nth-child(3){grid-column:span 4} /* PREDICTION (over/under) */
.dice-controls-v2 .control-group:nth-child(4){grid-column:span 2} /* TARGET SUM */
.dice-controls-v2 > .btn{
grid-column:1 / -1;
width:100%;height:54px;
margin-top:4px;
font-size:15px;letter-spacing:.18em;
}
.dice-mode-toggle .seg-btn{font-size:12px;padding:10px 8px;letter-spacing:.06em;white-space:nowrap}
@media (max-width:980px){
.dice-controls-v2{grid-template-columns:repeat(4, minmax(0, 1fr));}
.dice-controls-v2 .control-group:nth-child(1),
.dice-controls-v2 .control-group:nth-child(2),
.dice-controls-v2 .control-group:nth-child(5){grid-column:span 2}
.dice-controls-v2 .control-group:nth-child(3){grid-column:span 4}
.dice-controls-v2 .control-group:nth-child(4){grid-column:span 2}
}
@media (max-width:600px){
.dice-controls-v2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.dice-controls-v2 .control-group{grid-column:span 2 !important}
}
.dice-flip{
background:rgba(255,82,82,.18) !important;
border:1px solid rgba(255,82,82,.45) !important;
color:#ffd0e7 !important;
font-size:13px !important;
transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s !important;
}
.dice-flip:hover{background:var(--pink) !important;color:#fff !important;box-shadow:0 0 14px rgba(255,82,82,.55)}
.dice-flip:active{transform:rotate(180deg) scale(.92) !important}
.dice-flip.flipping{animation:diceFlipSpin .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes diceFlipSpin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
/* dice cube subtle landed flash on result */
.dice.win-pulse{animation:diceWinPulse .8s ease-out}
@keyframes diceWinPulse{
0%{filter:drop-shadow(0 0 0 rgba(255,82,82,0))}
35%{filter:drop-shadow(0 0 22px rgba(255,82,82,.85))}
100%{filter:drop-shadow(0 0 0 rgba(255,82,82,0))}
}
.dice.loss-pulse{animation:diceLossPulse .8s ease-out}
@keyframes diceLossPulse{
0%{filter:drop-shadow(0 0 0 rgba(221,28,28,0))}
35%{filter:drop-shadow(0 0 22px rgba(221,28,28,.85))}
100%{filter:drop-shadow(0 0 0 rgba(221,28,28,0))}
}
/* legacy .dice-pred no longer used — remove width side-effects */
.dice-pred{display:none}
/* ============================================================
RESULT TOAST — compact corner notification, out of the way of gameplay.
Slides in from top-right, holds briefly, slides out. No rainbow strip.
============================================================ */
.result-banner{
position:fixed;top:96px;right:24px;
transform:translateX(120%);
z-index:9000;pointer-events:none;
opacity:0;
transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s ease-out;
filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
.result-banner.show{opacity:1;transform:translateX(0)}
.result-banner.fading{opacity:0;transform:translateX(120%);transition-duration:.45s}
@media (max-width:760px){
.result-banner{top:auto;bottom:88px;right:12px;left:12px}
.result-banner{transform:translateY(160%)}
.result-banner.show{transform:translateY(0)}
.result-banner.fading{transform:translateY(160%)}
}
.rb-card{
position:relative;
min-width:240px;max-width:320px;
padding:14px 18px 16px;border-radius:18px;
text-align:left;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,82,82,.22), transparent 60%),
linear-gradient(180deg, rgba(34,18,40,.96), rgba(14,8,22,.98));
border:1px solid rgba(255,82,82,.35);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 0 0 1px rgba(0,0,0,.4),
0 18px 38px rgba(0,0,0,.55);
overflow:hidden;
display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;align-items:center;
}
/* (top rainbow strip removed — the user found it noisy) */
/* Minimal status glyph — small left bar, no chunky icon block. */
.rb-icon{
width:4px;height:36px;
margin:0;grid-row:span 2;
border-radius:2px;
font-size:0;line-height:0;color:transparent;
background:rgba(255,82,82,.7);
box-shadow:0 0 8px rgba(255,82,82,.5);
}
.result-banner.win .rb-icon{background:#28c76f;box-shadow:0 0 8px rgba(40,199,111,.6)}
.result-banner.loss .rb-icon{background:#dd1c1c;box-shadow:0 0 8px rgba(221,28,28,.6)}
.result-banner.push .rb-icon{background:#ff5252;box-shadow:0 0 8px rgba(255,80,80,.6)}
.rb-title{
font-family:'Sora';font-weight:800;font-size:14px;letter-spacing:.12em;
margin:0;line-height:1.15;
grid-column:2;
background:linear-gradient(180deg, #ffffff, #fff5fb 60%, #ffd4f0 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.result-banner.win .rb-title{background:linear-gradient(180deg, #d4ffea, #28c76f 60%, #28c76f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(40,199,111,.6))}
.result-banner.loss .rb-title{background:linear-gradient(180deg, #ffd4dc, #ff5252 60%, #a01818 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(221,28,28,.5))}
.result-banner.push .rb-title{background:linear-gradient(180deg, #ffe0e0, #ff5050 60%, #7a0e0e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(255,217,0,.55))}
.rb-sub{
font-family:'Plus Jakarta Sans';font-weight:600;font-size:11px;
color:var(--text-dim);
margin:2px 0 0;letter-spacing:.02em;line-height:1.25;
grid-column:2;
}
.rb-payout{
font-family:'Sora';font-weight:800;font-size:14px;letter-spacing:.02em;
display:inline-flex;align-items:center;gap:4px;
padding:5px 10px;border-radius:99px;
background:rgba(0,0,0,.45);
border:1px solid rgba(255,255,255,.12);
grid-column:3;grid-row:span 2;align-self:center;
white-space:nowrap;
}
.result-banner.win .rb-payout{color:#28c76f;text-shadow:0 0 18px rgba(40,199,111,.7);border-color:rgba(40,199,111,.5)}
.result-banner.loss .rb-payout{color:#ff5252;text-shadow:0 0 18px rgba(221,28,28,.6);border-color:rgba(221,28,28,.5)}
.result-banner.push .rb-payout{color:#ff5050;text-shadow:0 0 18px rgba(255,217,0,.6);border-color:rgba(255,217,0,.5)}
/* The big burst-ring is overkill for a corner toast — hide it. */
.rb-burst{display:none}
/* Subtle inner glow pulse on the card itself. */
.result-banner.win.show .rb-card{ animation:rbCardPulseWin 1.6s ease-out 1; }
.result-banner.loss.show .rb-card{ animation:rbCardPulseLoss 1.6s ease-out 1; }
@keyframes rbCardPulseWin{
0% {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 0 rgba(255,82,82,.55)}
60% {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 12px rgba(255,82,82,0)}
100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55)}
}
@keyframes rbCardPulseLoss{
0% {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 0 rgba(221,28,28,.55)}
60% {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 12px rgba(221,28,28,0)}
100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55)}
}
@media (max-width:760px){
.rb-card{min-width:240px;max-width:92vw;padding:12px 14px}
.rb-title{font-size:13px}
.rb-payout{font-size:13px;padding:4px 8px}
}
/* =====================================================
FAIRNESS — pill button + modals (history / detail / seeds)
===================================================== */
/* Fairness button — quiet glass pill that matches the rest of the brand
instead of the loud blue/teal it used to be. Sits inline in headers. */
.fair-pill{
position:relative;
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px 7px 11px;border-radius:999px;cursor:pointer;
font-family:'Plus Jakarta Sans';font-size:11px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:#ffe0e0;
background:linear-gradient(135deg, rgba(255,82,82,.10), rgba(255,255,255,.04));
border:1px solid rgba(255,82,82,.28);
backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.fair-pill:hover{
transform:translateY(-1px);
border-color:rgba(255,82,82,.6);
background:linear-gradient(135deg, rgba(255,82,82,.18), rgba(255,255,255,.06));
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px rgba(255,82,82,.25);
}
.fair-pill .fp-shield{
width:11px;height:13px;display:inline-block;flex-shrink:0;
background:linear-gradient(180deg, #ffd1e9 0%, #ff5dad 60%, #7a0e0e 100%);
-webkit-mask: path('M6 0 L12 2 L12 8 Q12 12 6 14 Q0 12 0 8 L0 2 Z');
mask: path('M6 0 L12 2 L12 8 Q12 12 6 14 Q0 12 0 8 L0 2 Z');
filter:drop-shadow(0 0 4px rgba(255,82,82,.55));
}
@media (max-width:760px){
.fair-pill{padding:6px 10px;font-size:10px}
}
/* Fairness modals share .modal-fair */
.modal-fair{width:min(680px,100%)}
.modal-fair .modal-title{font-size:26px;margin-bottom:6px}
.modal-fair .modal-sub{font-size:12.5px;line-height:1.55}
.modal-fair code{font-family:'Plus Jakarta Sans';font-size:11.5px;color:var(--cyan);word-break:break-all;font-weight:700}
/* Round list table */
.fair-table{
border-radius:14px;overflow:hidden;
border:1px solid var(--line-2);
background:rgba(255,255,255,.025);
margin-bottom:14px;
}
.fair-table-head, .fair-row{
display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:12px;
padding:12px 16px;align-items:center;
}
.fair-table-head{
background:rgba(0,0,0,.35);
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.12em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;
}
.fair-table-body{max-height:420px;overflow-y:auto}
.fair-row{
border-top:1px solid var(--line-2);
font-family:'Plus Jakarta Sans';font-size:13px;color:var(--text);
transition:background .15s;
}
.fair-row:hover{background:rgba(0,255,213,.06)}
.fair-row .fr-mult{font-family:'Sora';font-weight:700}
.fair-row .fr-mult.win{color:#28c76f}
.fair-row .fr-mult.loss{color:#dd1c1c}
.fair-row .fr-mult.push{color:var(--text-dim)}
.fair-row .fr-link{color:var(--cyan);font-weight:700;cursor:pointer;text-decoration:none}
.fair-row .fr-link:hover{color:#fff;text-decoration:underline}
.fair-row .fr-date{color:var(--text-dim);font-size:12px}
.fair-empty{padding:40px 16px;text-align:center;color:var(--text-mute);font-size:13px}
/* Pager */
.fair-pager{
display:flex;align-items:center;justify-content:center;gap:6px;
margin:0 0 16px;flex-wrap:wrap;
}
.fair-pager button{
min-width:34px;height:32px;padding:0 10px;
border-radius:8px;cursor:pointer;
font-family:'Plus Jakarta Sans';font-weight:800;font-size:12px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);
transition:background .15s, border-color .15s;
}
.fair-pager button:hover:not(:disabled){background:rgba(0,255,213,.1);border-color:var(--cyan)}
.fair-pager button.active{background:linear-gradient(135deg,var(--gold),#ff3838);color:#1a0e08;border-color:transparent}
.fair-pager button:disabled{opacity:.35;cursor:not-allowed}
.fair-pager .fp-ellipsis{color:var(--text-mute);padding:0 4px}
/* Detail field rows */
.fair-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.fair-label{
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.12em;font-weight:800;
color:var(--text-mute);text-transform:uppercase;
display:flex;align-items:center;gap:8px;
}
.fair-input-row{
display:flex;align-items:center;gap:8px;
padding:10px 12px;border-radius:10px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.fair-input-row code{flex:1;min-width:0}
.fair-input-row input{
flex:1;min-width:0;background:transparent;border:0;outline:0;
color:var(--text);font-family:'Plus Jakarta Sans';font-size:13px;font-weight:700;
}
.fair-input-row .btn{padding:6px 12px;font-size:11px;flex-shrink:0}
.fair-pill-mini{
display:inline-block;padding:2px 8px;border-radius:999px;
background:rgba(0,255,213,.12);border:1px solid rgba(0,255,213,.45);
color:#9ff5e3;font-size:9px;letter-spacing:.1em;font-weight:800;
}
.fair-pill-mini.next{background:rgba(255,217,0,.12);border-color:rgba(255,217,0,.45);color:#ffe680}
.fair-pill-mini.hidden-pill{background:rgba(255,82,82,.12);border-color:rgba(255,82,82,.45);color:#ffaad0}
.fair-verify-btn{
display:flex;width:100%;justify-content:center;text-align:center;
margin-bottom:10px;text-decoration:none;
}
.fair-actions{display:flex;gap:10px;flex-wrap:wrap}
.fair-actions .btn{flex:1;min-width:160px}
.fair-nonce-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
padding:10px;border-radius:10px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.fair-nonce-cell{
display:flex;justify-content:space-between;align-items:center;
padding:6px 10px;border-radius:8px;
background:rgba(0,0,0,.25);
font-family:'Plus Jakarta Sans';font-size:12px;
}
.fair-nonce-cell .fn-game{
color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;
font-size:10px;font-weight:800;
}
.fair-nonce-cell .fn-num{color:var(--cyan);font-weight:800}
@media (max-width:600px){
.fair-table-head, .fair-row{grid-template-columns:1fr 1fr 1.2fr;gap:8px;padding:10px 12px;font-size:12px}
.fair-actions .btn{min-width:0}
}
/* Sign-in / profile sign-out */
.profile-signout{
margin-left:6px;width:26px;height:26px;border-radius:50%;
background:rgba(255,255,255,.06);border:1px solid var(--line-2);
color:var(--text-mute);cursor:pointer;font-size:14px;font-weight:700;
transition:background .15s, color .15s;
}
.profile-signout:hover{background:var(--red);color:#fff;border-color:var(--red)}
#sign-in-btn[hidden]{display:none}
#profile-pill[hidden]{display:none}
#balance-pill[hidden]{display:none}
/* ============== MINES — spinner + animated diamond ============== */
.mine-tile.loading{
cursor:wait;
background:radial-gradient(circle at 50% 45%, rgba(0,255,213,.18), rgba(160,24,24,.10) 60%, transparent 80%);
border-color:rgba(0,255,213,.45);
}
.mt-spinner{
position:absolute;left:50%;top:50%;
width:48%;aspect-ratio:1/1;transform:translate(-50%,-50%);
border-radius:50%;
border:3px solid rgba(255,255,255,.12);
border-top-color:#ff5252;
border-right-color:#ff88c8;
animation:mtSpin .7s linear infinite;
}
@keyframes mtSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* The animated SVG diamond replaces the 💎 emoji. */
.mt-gem{
width:80%;height:80%;display:block;
filter:drop-shadow(0 0 12px rgba(95,232,212,.65)) drop-shadow(0 4px 6px rgba(0,0,0,.45));
animation:mtGemFloat 2.4s ease-in-out infinite, mtGemPop .5s cubic-bezier(.2,1.4,.5,1);
transform-origin:center;
}
@keyframes mtGemFloat{
0%,100%{transform:translateY(0) rotate(-1.5deg)}
50%{transform:translateY(-4px) rotate(1.5deg)}
}
@keyframes mtGemPop{
0%{transform:scale(.2) rotate(-30deg);opacity:0}
60%{transform:scale(1.18) rotate(8deg);opacity:1}
100%{transform:scale(1) rotate(0)}
}
/* Slow rotation/wobble for the inner facets. */
.mt-gem .mt-gem-rot{
transform-box:fill-box;transform-origin:center;
animation:mtGemSpin 5s ease-in-out infinite;
}
@keyframes mtGemSpin{
0%{transform:rotate(-4deg) scale(1)}
50%{transform:rotate(4deg) scale(1.04)}
100%{transform:rotate(-4deg) scale(1)}
}
/* Light streak that sweeps across the gem face. */
.mt-gem .mt-gem-shine{
animation:mtGemShine 1.8s ease-in-out infinite;
transform-origin:50% 50%;
}
@keyframes mtGemShine{
0%,100%{opacity:0;transform:translate(-6px,-6px)}
40%{opacity:1;transform:translate(0,0)}
70%{opacity:0;transform:translate(6px,6px)}
}
/* Reveal flash — a quick cyan ring that fades, replacing particle bursts. */
.mine-tile.gem-hit::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:0 0 0 0 rgba(95,232,212,.55), inset 0 0 0 0 rgba(95,232,212,.45);
animation:mtGemFlash .6s ease-out forwards;
}
@keyframes mtGemFlash{
0%{box-shadow:0 0 0 0 rgba(95,232,212,.7), inset 0 0 0 8px rgba(95,232,212,.45)}
100%{box-shadow:0 0 0 24px rgba(95,232,212,0), inset 0 0 0 0 rgba(95,232,212,0)}
}
/* ============================================================
PROFILE PAGE
============================================================ */
.profile-shell{padding:0}
.profile-header{
display:grid;grid-template-columns:1.1fr 1.4fr;gap:24px;
padding:28px 32px;
background:
radial-gradient(ellipse 460px 240px at 18% 0%, rgba(255,82,82,.18), transparent 70%),
radial-gradient(ellipse 460px 240px at 82% 100%, rgba(0,255,213,.14), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
border-radius:18px;
border:1px solid var(--line-2);
margin-bottom:18px;
}
.profile-hero-left{display:flex;align-items:center;gap:18px}
.profile-hero-avatar{
width:96px;height:96px;border-radius:50%;
background:var(--pink);
display:flex;align-items:center;justify-content:center;
font-size:46px;
box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 0 28px rgba(255,82,82,.4);
}
.profile-hero-name{
font-family:'Sora';font-weight:700;font-size:30px;color:var(--text);
letter-spacing:.02em;margin-bottom:4px;
}
.profile-hero-uid{font-size:12px;color:var(--text-mute);font-family:'Plus Jakarta Sans'}
.profile-hero-uid code{color:var(--cyan);font-weight:700}
.profile-hero-meta{font-size:12px;color:var(--text-mute);margin-top:2px}
.profile-hero-stats{
display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:center;
}
.ph-stat{
padding:14px 16px;border-radius:14px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.ph-stat-label{
font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.14em;font-weight:800;
color:var(--text-mute);text-transform:uppercase;margin-bottom:4px;
}
.ph-stat-value{
font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
}
.ph-stat-value.pos{color:#28c76f}
.ph-stat-value.neg{color:#dd1c1c}
/* Tabs */
.profile-tabs{
display:flex;gap:6px;margin-bottom:14px;
border-bottom:1px solid var(--line-2);padding:0 4px;
}
.profile-tab{
padding:11px 18px;border:0;background:transparent;cursor:pointer;
color:var(--text-mute);font-family:'Plus Jakarta Sans';font-weight:800;font-size:13px;
letter-spacing:.05em;border-bottom:2px solid transparent;
transition:color .15s, border-color .15s;
}
.profile-tab:hover{color:var(--text)}
.profile-tab.active{color:#fff;border-bottom-color:var(--pink)}
.profile-pane{padding:18px 4px}
.profile-pane[hidden]{display:none}
.profile-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.profile-pane-title{
font-family:'Sora';font-weight:700;font-size:20px;color:var(--text);margin:0;
}
.profile-select{
background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);
font-family:inherit;font-size:13px;font-weight:600;
padding:9px 12px;border-radius:10px;outline:0;cursor:pointer;
}
.profile-select:focus{border-color:var(--cyan)}
.profile-empty{padding:40px 16px;text-align:center;color:var(--text-mute);font-size:13px}
/* Transactions table */
.profile-table{
border-radius:14px;overflow:hidden;
border:1px solid var(--line-2);background:rgba(255,255,255,.025);
}
.profile-thead, .profile-tr{
display:grid;grid-template-columns:120px 1.4fr 1.2fr 1fr;gap:12px;
padding:11px 16px;align-items:center;
}
.profile-thead{
background:rgba(0,0,0,.35);
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.14em;font-weight:800;
color:var(--text-mute);text-transform:uppercase;
}
.profile-tbody{max-height:520px;overflow-y:auto}
.profile-tr{
border-top:1px solid var(--line-2);
font-family:'Plus Jakarta Sans';font-size:13px;color:var(--text);
}
.profile-tr:hover{background:rgba(0,255,213,.04)}
.ptr-id{font-family:'Plus Jakarta Sans';color:var(--text-mute);font-weight:700}
.ptr-desc{font-weight:600}
.ptr-date{color:var(--text-dim);font-size:12px}
.ptr-amt{font-family:'Sora';font-weight:700;text-align:right}
.ptr-amt.pos{color:#28c76f}
.ptr-amt.neg{color:#dd1c1c}
.profile-pager{
display:flex;align-items:center;justify-content:center;gap:6px;
margin-top:14px;flex-wrap:wrap;
}
.profile-pager button{
min-width:36px;height:34px;padding:0 12px;
border-radius:8px;cursor:pointer;
font-family:'Plus Jakarta Sans';font-weight:800;font-size:12px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);
}
.profile-pager button:hover:not(:disabled){background:rgba(0,255,213,.1);border-color:var(--cyan)}
.profile-pager button.active{background:linear-gradient(135deg,var(--gold),#ff3838);color:#1a0e08;border-color:transparent}
.profile-pager button:disabled{opacity:.35;cursor:not-allowed}
.profile-pager span{color:var(--text-mute);padding:0 4px}
/* By Game grid */
.profile-game-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
}
.profile-game-card{
padding:16px;border-radius:14px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.pgc-name{
font-family:'Sora';font-weight:700;font-size:18px;color:var(--text);
margin-bottom:10px;
}
.pgc-row{
display:flex;justify-content:space-between;align-items:center;
font-family:'Plus Jakarta Sans';font-size:12.5px;
color:var(--text-dim);padding:5px 0;
border-top:1px dashed rgba(255,255,255,.06);
}
.pgc-row strong{color:var(--text);font-weight:700}
.pgc-profit.pos strong{color:#28c76f}
.pgc-profit.neg strong{color:#dd1c1c}
/* Settings */
.profile-settings{max-width:560px;display:flex;flex-direction:column;gap:14px}
.profile-label{
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.14em;font-weight:800;
color:var(--text-mute);text-transform:uppercase;margin-bottom:-4px;
}
.profile-input-row{
padding:11px 13px;border-radius:10px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.profile-input-row input{
width:100%;background:transparent;border:0;outline:0;
color:var(--text);font-family:inherit;font-size:14px;font-weight:600;
}
/* (avatar emoji grid removed — Discord pfp is the avatar now) */
.profile-color-grid{display:flex;flex-wrap:wrap;gap:10px}
.pc-cell{
width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;
transition:transform .12s, border-color .12s;
}
.pc-cell:hover{transform:scale(1.08)}
.pc-cell.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
@media (max-width:760px){
.profile-header{grid-template-columns:1fr;padding:20px 18px;gap:16px}
.profile-hero-stats{grid-template-columns:1fr 1fr}
.profile-thead, .profile-tr{grid-template-columns:80px 1.2fr 1fr 1fr;font-size:12px;padding:9px 12px}
.ptr-date{font-size:11px}
}
#profile-pill{cursor:pointer}
#profile-pill:hover{background:rgba(255,82,82,.1)}
/* ==== Profile additions: level/tier progress, period, big-win, streaks ==== */
.ph-level, .ph-tier { padding-bottom:14px }
.ph-progress{
height:6px;border-radius:999px;overflow:hidden;
background:rgba(255,255,255,.06);
margin-top:8px;
}
.ph-progress-fill{
height:100%;width:0;
background:linear-gradient(90deg,#ff5252 0%,#a01818 60%,#dd1c1c 100%);
border-radius:999px;
transition:width .35s cubic-bezier(.16,1,.3,1);
}
.ph-progress-fill-gold{
background:linear-gradient(90deg,#ff5050,#ff3838 60%,#dd1c1c);
}
.ph-progress-label{
font-family:'Plus Jakarta Sans';font-size:11px;color:var(--text-mute);
margin-top:6px;letter-spacing:.04em;
}
.profile-period{
display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;
}
.profile-period-btn{
padding:7px 14px;border-radius:999px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
color:var(--text-mute);cursor:pointer;
font-family:'Plus Jakarta Sans';font-size:11.5px;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;
transition:color .15s, border-color .15s, background .15s;
}
.profile-period-btn:hover{color:var(--text);border-color:rgba(255,82,82,.5)}
.profile-period-btn.active{
background:linear-gradient(135deg,var(--pink),var(--pink-deep));
color:#fff;border-color:transparent;
box-shadow:0 0 18px rgba(255,82,82,.4);
}
.profile-cards{
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;
margin-bottom:18px;
}
.profile-card{
padding:14px 16px;border-radius:14px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.profile-card-label{
font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.14em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;
margin-bottom:6px;
}
.profile-card-value{
font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
}
.profile-card-big{
background:linear-gradient(135deg, rgba(255,217,0,.10), rgba(255,82,82,.10));
border-color:rgba(255,217,0,.25);
}
.bigwin-game{
font-family:'Sora';font-weight:700;font-size:18px;color:var(--gold);
margin-bottom:8px;
}
.bigwin-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bigwin-label{
font-family:'Plus Jakarta Sans';font-size:9px;letter-spacing:.14em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;margin-bottom:2px;
}
.bigwin-value{font-family:'Sora';font-weight:700;font-size:14px;color:var(--text)}
.bigwin-value.pos{color:#28c76f}
.bigwin-when{font-size:11px;color:var(--text-dim);font-family:'Plus Jakarta Sans';font-weight:600}
.profile-streaks{display:flex;flex-direction:column;gap:4px}
.streak-current{
font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
}
.streak-current.win{color:#28c76f}
.streak-current.loss{color:#dd1c1c}
.streak-best{
font-family:'Plus Jakarta Sans';font-size:11px;color:var(--text-mute);
}
@media (max-width:1100px){
.profile-cards{grid-template-columns:1fr 1fr 1fr}
.profile-card-big{grid-column:span 3}
}
@media (max-width:760px){
.profile-cards{grid-template-columns:1fr 1fr}
.profile-card-big{grid-column:span 2}
.bigwin-row{grid-template-columns:1fr 1fr}
}
/* ============== Top-bar Discord avatar ============== */
.profile-avatar-img{
width:32px;height:32px;border-radius:50%;display:block;
object-fit:cover;border:2px solid rgba(255,255,255,.1);
}
.profile-avatar-emoji{
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:18px;background:var(--pink);
}
/* ============== Profile hero ============== */
.profile-hero-avatar{
width:96px;height:96px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:46px;
box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 0 28px rgba(255,82,82,.4);
overflow:hidden;background:var(--pink);
position:relative;
}
.profile-hero-avatar::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
border:2px solid rgba(255,255,255,.18);
background:conic-gradient(from 90deg, rgba(255,82,82,.3), rgba(0,255,213,.3), rgba(255,217,0,.3), rgba(255,82,82,.3));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
padding:3px;
animation:phRingSpin 8s linear infinite;
pointer-events:none;
}
@keyframes phRingSpin{to{transform:rotate(360deg)}}
.profile-hero-avatar-img{
width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
}
.profile-header{
grid-template-columns:1fr 1.4fr;
}
/* 2x2 grid so each tile gets real breathing room. */
.profile-hero-stats{
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:1fr;
gap:14px;
align-items:stretch;
}
/* Level ring keeps a fixed visual size but lives inside its grid cell so
the tier card next to it gets the rest of the row. */
.ph-level-ring{
width:100%;height:auto;aspect-ratio:1/1;
max-width:170px;justify-self:center;align-self:center;
}
/* ============== Level ring (circular progress) ============== */
.ph-level-ring{
position:relative;width:130px;height:130px;
display:flex;align-items:center;justify-content:center;
}
.ph-ring-svg{width:100%;height:100%;display:block;
filter:drop-shadow(0 0 14px rgba(160,24,24,.45));
}
#prof-ring-fill{
transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
}
.ph-ring-inner{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.ph-ring-label{
font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.18em;
font-weight:800;color:var(--text-mute);
}
.ph-ring-value{
font-family:'Sora';font-weight:700;font-size:42px;color:#fff;
background:linear-gradient(135deg,#ff5252,#a01818,#dd1c1c);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 0 24px rgba(255,255,255,.08);
line-height:1;
animation:phLevelPulse 3.4s ease-in-out infinite;
}
@keyframes phLevelPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.04)}
}
/* ============== Tier card with letter badge ============== */
.ph-tier-card{
padding:14px 16px;border-radius:14px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
display:flex;flex-direction:column;justify-content:center;gap:8px;
position:relative;overflow:hidden;
}
.ph-tier-card::before{
/* subtle gold sheen drifting across */
content:"";position:absolute;inset:0;
background:linear-gradient(120deg, transparent 35%, rgba(255,217,0,.06) 50%, transparent 65%);
background-size:220% 100%;
animation:phTierShine 5s linear infinite;
pointer-events:none;
}
@keyframes phTierShine{from{background-position:-110% 0}to{background-position:110% 0}}
.ph-tier-header{display:flex;gap:12px;align-items:center}
.ph-tier-badge{
width:42px;height:42px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-weight:700;font-size:22px;color:#1a0e08;
background:linear-gradient(135deg,#ad6900,#a05a2c);
box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.35);
}
.ph-tier-badge[data-tier="silver"] {background:linear-gradient(135deg,#e8d4d4,#806060);color:#252b3a}
.ph-tier-badge[data-tier="gold"] {background:linear-gradient(135deg,#ffe680,#ff3838);color:#3a2a08}
.ph-tier-badge[data-tier="platinum"]{background:linear-gradient(135deg,#ffe0e0,#5fb8ff);color:#0e2a4a}
.ph-tier-badge[data-tier="diamond"] {background:linear-gradient(135deg,#ffd0d0,#a01818);color:#fff}
.ph-tier-badge[data-tier="mythic"] {background:linear-gradient(135deg,#dd1c1c,#ff5050);color:#fff;
animation:phMythicShimmer 2.4s ease-in-out infinite}
@keyframes phMythicShimmer{
0%,100%{filter:hue-rotate(0)}
50%{filter:hue-rotate(40deg)}
}
/* ============== Animated icons inside stat cards ============== */
.ph-stat-icon{display:flex;flex-direction:column;justify-content:center;gap:4px}
.ph-stat-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:2px;
}
.ph-icon{
width:22px;height:22px;color:#ff5252;
filter:drop-shadow(0 0 6px rgba(95,232,212,.45));
animation:phIconFloat 3s ease-in-out infinite;
flex-shrink:0;
}
.ph-icon-trend{color:#ff5252}
@keyframes phIconFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-3px)}
}
@media (max-width:1100px){
.profile-header{grid-template-columns:1fr;gap:18px}
.profile-hero-stats{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:760px){
.profile-hero-avatar{width:80px;height:80px;font-size:36px}
.ph-level-ring{max-width:130px}
.ph-ring-value{font-size:32px}
.profile-hero-stats{grid-template-columns:1fr;gap:10px}
}
/* ============== Custom scrollbar — pink/cyan, matches the theme ============== */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:10px}
*::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#dd1c1c,#a01818);
border-radius:10px;border:2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff7090,#9577ff)}
*{scrollbar-width:thin;scrollbar-color:#dd1c1c rgba(255,255,255,.04)}
/* ============== Username history chips ============== */
.profile-username-history{margin-top:-6px}
.profile-uh-label{
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.12em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;margin-bottom:8px;
}
.profile-uh-list{display:flex;flex-wrap:wrap;gap:8px}
.profile-uh-chip{
display:inline-flex;align-items:center;gap:8px;
padding:7px 12px;border-radius:999px;cursor:pointer;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
color:var(--text);font-family:'Plus Jakarta Sans';font-size:12.5px;font-weight:700;
transition:transform .15s, border-color .15s, color .15s, box-shadow .15s;
}
.profile-uh-chip:hover{
transform:translateY(-1px);
border-color:var(--cyan);
color:#fff;
box-shadow:0 0 0 1px rgba(0,255,213,.3), 0 6px 18px rgba(0,255,213,.18);
}
.profile-uh-revert{
font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--cyan);
}
/* ============== Better badge animations (VIP tier letter) ============== */
.ph-tier-badge{
position:relative;overflow:hidden;
animation:phBadgeFloat 4.2s ease-in-out infinite;
}
@keyframes phBadgeFloat{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-3px) rotate(2deg)}
}
.ph-tier-badge::after{
/* Sweeping shine streak across the badge face. */
content:"";position:absolute;inset:0;
background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
background-size:220% 100%;
animation:phBadgeShine 3.4s linear infinite;
pointer-events:none;mix-blend-mode:screen;
}
@keyframes phBadgeShine{
from{background-position:-110% 0}
to{background-position:110% 0}
}
/* ============== Anti-cramp: profile shell ============== */
.profile-shell{padding:24px}
.profile-header{padding:32px 36px;gap:32px;margin-bottom:24px}
.profile-hero-stats{gap:18px}
.profile-cards{gap:14px;margin-bottom:24px}
.profile-card{padding:18px 20px}
.profile-card-big{padding:20px 24px}
.profile-pane{padding:24px 8px}
.profile-thead, .profile-tr{padding:14px 20px;gap:16px}
.profile-tabs{gap:10px;padding:0 8px}
.profile-tab{padding:13px 22px}
/* Game shells — small breathing room bumps so games stop feeling cramped. */
.game-shell{padding:24px}
.game-header{padding:26px 26px 28px;margin-bottom:28px}
@media (min-width:1100px){
.game-shell{padding:32px}
.stats-row{gap:20px}
.stats-col{padding:18px 20px}
}
/* Make the chat panel breathe a bit too. */
.cmsg{padding:8px 12px}
.cmsg-text{line-height:1.5}
/* Sidebar — wider gap between sections. */
.sb-section + .sb-section{margin-top:20px}
/* Bet feed rows — bump padding so they don't read as a wall of text. */
.bf-row{padding:11px 16px;gap:14px}
/* ============== Profile Activity timeline ============== */
.profile-timeline{display:flex;flex-direction:column;gap:10px}
.act-row{
display:grid;
grid-template-columns:44px 1fr auto auto;
gap:14px;align-items:center;
padding:14px 18px;border-radius:14px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
transition:transform .15s, border-color .15s, box-shadow .15s;
position:relative;overflow:hidden;
}
.act-row::before{
/* Left accent bar — color codes outcome at a glance. */
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:rgba(255,255,255,.08);
}
.act-row.pos::before{background:linear-gradient(180deg,#28c76f,#28c76f)}
.act-row.neg::before{background:linear-gradient(180deg,#dd1c1c,#dd1c1c)}
.act-row.push::before{background:linear-gradient(180deg,#806060,#5a3030)}
.act-row:hover{
/* No translateX — would push the row past its scroll container's right
edge and pulse a horizontal scrollbar. Subtle pink glow instead. */
border-color:rgba(255,82,82,.45);
box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 14px rgba(255,82,82,.18);
}
.act-icon{
width:42px;height:42px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
filter:drop-shadow(0 0 10px currentColor);
border:1px solid var(--line-2);
}
.act-icon svg{width:24px;height:24px}
.act-meta{min-width:0}
.act-title{
font-family:'Sora';font-size:14.5px;color:var(--text);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-bottom:2px;
}
.act-title strong{font-weight:700}
.act-tag{
display:inline-block;padding:2px 8px;border-radius:999px;
font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.12em;
font-weight:800;text-transform:uppercase;
}
.act-tag-pos{background:rgba(40,199,111,.14);color:#28c76f;border:1px solid rgba(40,199,111,.4)}
.act-tag-neg{background:rgba(255,87,119,.14);color:#dd1c1c;border:1px solid rgba(255,87,119,.4)}
.act-tag-push{background:rgba(168,179,216,.12);color:var(--text-dim);border:1px solid rgba(168,179,216,.3)}
.act-sub{
font-family:'Plus Jakarta Sans';font-size:12.5px;color:var(--text-dim);font-weight:600;
}
.act-amount{
font-family:'Sora';font-weight:700;font-size:16px;text-align:right;
white-space:nowrap;
}
.act-amount.pos{color:#28c76f}
.act-amount.neg{color:#dd1c1c}
.act-time{
font-family:'Plus Jakarta Sans';font-size:11.5px;color:var(--text-mute);font-weight:700;
min-width:36px;text-align:right;
}
/* Animate row reveal so the timeline feels lively. */
.act-row{animation:actSlideIn .35s ease-out both}
.act-row:nth-child(1){animation-delay:.02s}
.act-row:nth-child(2){animation-delay:.05s}
.act-row:nth-child(3){animation-delay:.08s}
.act-row:nth-child(4){animation-delay:.11s}
.act-row:nth-child(5){animation-delay:.14s}
.act-row:nth-child(6){animation-delay:.17s}
.act-row:nth-child(n+7){animation-delay:.2s}
@keyframes actSlideIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
@media (max-width:760px){
.act-row{grid-template-columns:36px 1fr auto;gap:10px;padding:10px 12px}
.act-time{display:none}
.act-icon{width:36px;height:36px;border-radius:10px}
.act-icon svg{width:20px;height:20px}
}
/* ============== Top-bar balance label: replace "BC" text with the icon ============== */
.balance-label{display:none}
/* ============== Achievements ============== */
.profile-tab-badge{
display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
background:rgba(0,255,213,.12);color:var(--cyan);
font-size:10px;font-weight:800;letter-spacing:.06em;
border:1px solid rgba(0,255,213,.3);
}
.profile-ach-summary{
font-family:'Plus Jakarta Sans';font-size:13px;color:var(--text-dim);font-weight:700;
}
.profile-ach-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.ach-card{
position:relative;
display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;
padding:18px 18px 18px 16px;border-radius:16px;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
overflow:hidden;
transition:transform .18s, border-color .18s, box-shadow .18s;
}
.ach-card:hover{transform:translateY(-2px)}
.ach-icon{
width:56px;height:56px;border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-size:30px;line-height:1;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.ach-name{
font-family:'Sora';font-weight:700;font-size:15px;color:var(--text);
margin-bottom:3px;
}
.ach-desc{
font-family:'Plus Jakarta Sans';font-size:12px;color:var(--text-dim);
line-height:1.45;
}
.ach-tier{
position:absolute;top:10px;right:12px;
font-family:'Plus Jakarta Sans';font-size:9px;letter-spacing:.16em;
font-weight:800;text-transform:uppercase;color:var(--text-mute);
}
.ach-when{
position:absolute;bottom:8px;right:12px;
font-family:'Plus Jakarta Sans';font-size:10px;color:var(--text-mute);
font-weight:700;
}
/* Per-tier accent — unlocked cards glow in their tier color. */
.ach-card.unlocked.ach-common {border-color:rgba(168,179,216,.35);box-shadow:0 0 0 1px rgba(168,179,216,.18)}
.ach-card.unlocked.ach-rare {border-color:rgba(95,184,255,.45);box-shadow:0 0 0 1px rgba(95,184,255,.22), 0 0 18px rgba(95,184,255,.12)}
.ach-card.unlocked.ach-epic {border-color:rgba(160,24,24,.55);box-shadow:0 0 0 1px rgba(160,24,24,.3), 0 0 22px rgba(160,24,24,.18)}
.ach-card.unlocked.ach-legendary {border-color:rgba(255,217,0,.6); box-shadow:0 0 0 1px rgba(255,217,0,.35), 0 0 28px rgba(255,217,0,.22)}
.ach-card.unlocked.ach-mythic {border-color:rgba(255,82,82,.65); box-shadow:0 0 0 1px rgba(255,82,82,.4), 0 0 32px rgba(255,82,82,.3)}
.ach-card.unlocked.ach-mythic {animation:achMythicPulse 2.6s ease-in-out infinite}
@keyframes achMythicPulse{
0%,100%{box-shadow:0 0 0 1px rgba(255,82,82,.4), 0 0 32px rgba(255,82,82,.3)}
50% {box-shadow:0 0 0 1px rgba(255,217,0,.55), 0 0 38px rgba(255,217,0,.4)}
}
.ach-card.unlocked .ach-icon{
background:linear-gradient(135deg, rgba(0,255,213,.15), rgba(160,24,24,.15));
border-color:transparent;
filter:drop-shadow(0 0 8px rgba(0,255,213,.25));
}
.ach-card.unlocked.ach-legendary .ach-icon{
background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(255,148,42,.18));
filter:drop-shadow(0 0 10px rgba(255,217,0,.4));
}
.ach-card.unlocked.ach-mythic .ach-icon{
background:linear-gradient(135deg, rgba(255,82,82,.22), rgba(255,217,0,.22));
filter:drop-shadow(0 0 12px rgba(255,82,82,.45));
}
/* Locked card — desaturated and dimmer, with a lock badge corner. */
.ach-card.locked{opacity:.55}
.ach-card.locked .ach-icon{filter:grayscale(.8) brightness(.7)}
.ach-locked-overlay{
position:absolute;bottom:8px;right:12px;
font-size:14px;color:var(--text-mute);
}
/* ============== Achievement-unlocked toast ============== */
.ach-toast{
position:fixed;bottom:24px;right:-380px;z-index:9999;
width:340px;display:flex;align-items:center;gap:14px;
padding:14px 18px;border-radius:16px;
background:linear-gradient(135deg,#1d2148,#171a3a);
border:1px solid var(--line-2);
box-shadow:0 20px 50px rgba(0,0,0,.55);
transition:right .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.ach-toast.show{right:24px}
.ach-toast-icon{
width:48px;height:48px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:26px;flex-shrink:0;
background:linear-gradient(135deg, rgba(0,255,213,.18), rgba(160,24,24,.18));
}
.ach-toast.ach-legendary .ach-toast-icon{
background:linear-gradient(135deg, rgba(255,217,0,.22), rgba(255,148,42,.22));
}
.ach-toast.ach-mythic .ach-toast-icon{
background:linear-gradient(135deg, rgba(255,82,82,.25), rgba(255,217,0,.25));
}
.ach-toast-eyebrow{
font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.16em;font-weight:800;
color:var(--gold);text-transform:uppercase;
}
.ach-toast-name{
font-family:'Sora';font-weight:700;font-size:16px;color:#fff;margin:2px 0;
}
.ach-toast-desc{
font-family:'Plus Jakarta Sans';font-size:12px;color:var(--text-dim);line-height:1.45;
}
.ach-toast.ach-legendary, .ach-toast.ach-mythic{
border-color:rgba(255,217,0,.4);
box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 32px rgba(255,217,0,.25);
}
/* ============== Reusable inline game icon ============== */
.game-icon-inline{
display:inline-flex;align-items:center;justify-content:center;
width:1.2em;height:1.2em;vertical-align:middle;
filter:drop-shadow(0 0 6px currentColor);
}
.game-icon-inline svg{width:100%;height:100%;display:block}
/* ============== Animated achievement badge ============== */
.ach-badge{
position:relative;width:64px;height:64px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.ach-badge-rings{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;
}
.ach-badge .ach-bg{
fill:rgba(255,255,255,.04);
stroke:rgba(255,255,255,.18);
stroke-width:1.4;
transition:fill .3s, stroke .3s;
}
.ach-badge .ach-spin{
stroke:rgba(255,255,255,.35);
transform-origin:50% 50%;
animation:achSpin 12s linear infinite;
}
@keyframes achSpin{ to { transform:rotate(360deg) } }
.ach-badge .ach-orbit{
fill:#fff;
transform-origin:50% 50%;
animation:achOrbit 4.5s linear infinite;
}
@keyframes achOrbit{ to { transform:rotate(360deg) } }
.ach-badge .ach-flare{
opacity:.85;mix-blend-mode:screen;
animation:achFlare 3.4s ease-in-out infinite;
}
@keyframes achFlare{
0%,100%{opacity:.4;transform:scale(.85)}
50%{opacity:1;transform:scale(1.08)}
}
.ach-badge-emoji{
position:relative;z-index:1;
font-size:28px;line-height:1;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
animation:achEmojiBob 3.6s ease-in-out infinite;
transform-origin:center;
}
@keyframes achEmojiBob{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-2px) rotate(2deg)}
}
.ach-badge-lock{
position:absolute;bottom:-2px;right:-2px;z-index:2;
font-size:14px;
}
/* Per-tier color accent */
.ach-badge-common .ach-bg{fill:rgba(168,179,216,.12);stroke:rgba(168,179,216,.5)}
.ach-badge-common .ach-spin{stroke:rgba(168,179,216,.55)}
.ach-badge-common .ach-orbit{fill:#806060}
.ach-badge-rare .ach-bg{fill:rgba(95,184,255,.16);stroke:rgba(95,184,255,.6)}
.ach-badge-rare .ach-spin{stroke:rgba(95,184,255,.7)}
.ach-badge-rare .ach-orbit{fill:#ff5252}
.ach-badge-epic .ach-bg{fill:rgba(160,24,24,.18);stroke:rgba(160,24,24,.65)}
.ach-badge-epic .ach-spin{stroke:rgba(160,24,24,.8)}
.ach-badge-epic .ach-orbit{fill:#a01818}
.ach-badge-legendary .ach-bg{fill:rgba(255,217,0,.20);stroke:rgba(255,217,0,.7)}
.ach-badge-legendary .ach-spin{stroke:rgba(255,217,0,.85)}
.ach-badge-legendary .ach-orbit{fill:#ff5050}
.ach-badge-legendary{filter:drop-shadow(0 0 10px rgba(255,217,0,.55))}
.ach-badge-mythic .ach-bg{fill:rgba(255,82,82,.22);stroke:rgba(255,82,82,.75)}
.ach-badge-mythic .ach-spin{stroke:rgba(255,82,82,.85)}
.ach-badge-mythic .ach-orbit{fill:#ff5050}
.ach-badge-mythic{
filter:drop-shadow(0 0 14px rgba(255,82,82,.6));
animation:achMythicHue 4.2s ease-in-out infinite;
}
@keyframes achMythicHue{
0%,100%{filter:drop-shadow(0 0 14px rgba(255,82,82,.6))}
50% {filter:drop-shadow(0 0 18px rgba(255,217,0,.7))}
}
/* Locked badge: desaturate the orbit, dim emoji */
.ach-badge.locked .ach-orbit{fill:#5a6175;animation-duration:9s}
.ach-badge.locked .ach-flare{opacity:.18}
.ach-badge.locked .ach-badge-emoji{filter:grayscale(.85) brightness(.55)}
/* Update the achievement card to use the new badge layout. */
.ach-card{grid-template-columns:64px 1fr;gap:16px}
.ach-card .ach-icon{display:none}
/* ============== Public profile (read-only) ============== */
.profile-public-empty{
padding:60px 16px;text-align:center;color:var(--text-mute);font-size:14px;
}
.profile-public-body{display:block}
.pubprof-back{margin-bottom:14px}
/* ============== Big game icons in activity / history rows ============== */
.act-icon-big{
width:48px;height:48px;border-radius:12px;
background:rgba(255,255,255,.04);border:1px solid var(--line-2);
display:flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
}
.act-icon-big .gh-svg{width:38px;height:38px;display:block;overflow:visible}
.hr-icon-big{
/* Match the parent .hr-icon's 34px box — was 36px which overflowed
the parent and got clipped by overflow:hidden. */
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.hr-icon-big .gh-svg{width:26px;height:26px;display:block;overflow:visible}
/* ============== Achievement badge artwork (animated game/generic SVGs) ============== */
.ach-badge-art{
position:relative;z-index:1;width:60%;height:60%;
display:flex;align-items:center;justify-content:center;
}
.ach-badge-art .gh-svg, .ach-badge-art .ach-art{
width:100%;height:100%;display:block;overflow:visible;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
/* Generic achievement art animations */
.ach-art-trophy .ag-tro-grp{
transform-origin:50% 60%;transform-box:fill-box;
animation:atroBob 3.4s ease-in-out infinite;
}
@keyframes atroBob{
0%,100%{transform:translateY(0) rotate(-3deg)}
50%{transform:translateY(-3px) rotate(3deg)}
}
.ach-art-trophy .ag-tro-glint{animation:atroGlint 2s ease-in-out infinite}
@keyframes atroGlint{0%,100%{opacity:.2}50%{opacity:.95}}
.ach-art-flame .ag-fl-grp{
transform-origin:50% 100%;transform-box:fill-box;
animation:aflameDance 1.2s ease-in-out infinite;
}
@keyframes aflameDance{
0%,100%{transform:scaleY(1) scaleX(1)}
35%{transform:scaleY(1.08) scaleX(.94)}
70%{transform:scaleY(.96) scaleX(1.05)}
}
.ach-art-diamond .ag-di-grp{
transform-origin:50% 50%;transform-box:fill-box;
animation:adiamondSpin 6s ease-in-out infinite;
}
@keyframes adiamondSpin{
0%,100%{transform:rotate(-6deg) scale(1)}
50%{transform:rotate(6deg) scale(1.06)}
}
.ach-art-diamond .ag-di-shine{
animation:adiamondShine 2.2s ease-in-out infinite;
}
@keyframes adiamondShine{
0%,100%{opacity:0;transform:translate(-4px,-4px)}
40%{opacity:1;transform:translate(0,0)}
70%{opacity:0;transform:translate(4px,4px)}
}
.ach-art-coins .ag-co-grp{
transform-origin:50% 60%;transform-box:fill-box;
animation:acoinBob 2.8s ease-in-out infinite;
}
@keyframes acoinBob{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-2px)}
}
.ach-art-coins .ag-co-spark{
animation:acoinSpark 1.8s ease-in-out infinite;
transform-origin:center;transform-box:fill-box;
}
@keyframes acoinSpark{
0%,100%{opacity:.2;transform:scale(.6)}
50%{opacity:1;transform:scale(1.4)}
}
.ach-art-ctrl .ag-cr-grp{
transform-origin:50% 50%;transform-box:fill-box;
animation:actrlWobble 3.2s ease-in-out infinite;
}
@keyframes actrlWobble{
0%,100%{transform:rotate(-3deg)}
50%{transform:rotate(3deg)}
}
.ach-art-all .ag-all-grp{
transform-origin:50% 50%;transform-box:fill-box;
animation:aallSpin 8s linear infinite;
}
@keyframes aallSpin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
/* Override: game-icon-inside-badge fills more of the circle. */
.ach-badge .gh-svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
/* Hide the central flare behind the new artwork (we let the artwork breathe). */
.ach-badge .ach-flare{display:none}
/* ============== VIP tier badge — animated SVG art per tier ============== */
.ph-tier-badge{
/* Override the old letter-only style to fit the new SVG art. */
background:transparent !important;
box-shadow:none !important;
padding:0;
width:48px;height:48px;
border-radius:0;
}
.tier-art{width:100%;height:100%;display:block;overflow:visible}
.tier-art-bronze .tab-grp{
transform-origin:center;transform-box:fill-box;
animation:tabBronzeBob 3.6s ease-in-out infinite;
}
@keyframes tabBronzeBob{
0%,100%{transform:translateY(0) rotate(-3deg)}
50%{transform:translateY(-2px) rotate(3deg)}
}
.tier-art-silver .tas-shine{
animation:tasShine 2.2s ease-in-out infinite;
transform-origin:50% 50%;
}
@keyframes tasShine{
0%,100%{opacity:0;transform:translateX(-10px)}
50%{opacity:1;transform:translateX(0)}
}
.tier-art-gold .tag-rays{
transform-origin:50% 50%;transform-box:fill-box;
animation:tagSpin 11s linear infinite;
}
@keyframes tagSpin{ to { transform:rotate(360deg) } }
.tier-art-gold .tag-grp{
filter:drop-shadow(0 0 8px rgba(255,217,0,.5));
}
.tier-art-plat .tap-spark{
transform-origin:60px 22px;transform-box:fill-box;
animation:tapSpark 2s linear infinite;
}
@keyframes tapSpark{
0%,100%{opacity:.3;transform:scale(.6)}
50%{opacity:1;transform:scale(1.6)}
}
.tier-art-diamond .tad-grp{
transform-origin:50% 50%;transform-box:fill-box;
animation:tadSpin 5.5s ease-in-out infinite;
}
@keyframes tadSpin{
0%,100%{transform:rotate(-6deg)}
50%{transform:rotate(6deg)}
}
.tier-art-diamond .tad-shine{
animation:tadShine 2.4s ease-in-out infinite;
}
@keyframes tadShine{
0%,100%{opacity:0;transform:translate(-3px,-3px)}
45%{opacity:1;transform:translate(0,0)}
80%{opacity:0;transform:translate(4px,4px)}
}
.tier-art-mythic .tam-grp{
filter:drop-shadow(0 0 14px rgba(255,82,82,.6));
animation:tamHueShift 4.2s ease-in-out infinite;
transform-origin:50% 50%;transform-box:fill-box;
}
@keyframes tamHueShift{
0%,100%{filter:drop-shadow(0 0 14px rgba(255,82,82,.6)) hue-rotate(0deg)}
50% {filter:drop-shadow(0 0 18px rgba(255,217,0,.7)) hue-rotate(40deg)}
}
.tier-art-mythic .tam-aura{
transform-origin:50% 50%;transform-box:fill-box;
animation:tamPulse 2.6s ease-in-out infinite;
}
@keyframes tamPulse{
0%,100%{opacity:.3;transform:scale(.9)}
50%{opacity:.7;transform:scale(1.15)}
}
/* ============== User popup ============== */
.user-popup-card{width:min(520px,100%);max-height:86vh}
.up-hero{
display:flex;gap:16px;align-items:center;
padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:16px;
}
.up-avatar{
width:74px;height:74px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:32px;background:var(--pink);
box-shadow:0 0 0 3px rgba(255,255,255,.06), 0 0 22px rgba(255,82,82,.4);
overflow:hidden;flex-shrink:0;
}
.up-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.up-name{
font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
margin-bottom:2px;
}
.up-meta{font-family:'Plus Jakarta Sans';font-size:11.5px;color:var(--text-mute);font-weight:600;margin-bottom:8px}
.up-tags{display:flex;gap:6px;flex-wrap:wrap}
.up-tag{
display:inline-block;padding:3px 10px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid var(--line-2);
font-family:'Plus Jakarta Sans';font-size:10.5px;letter-spacing:.08em;
font-weight:800;color:var(--text);
}
.up-tag-tier[data-tier="bronze"] {background:linear-gradient(135deg,#ad6900,#a05a2c);color:#fff}
.up-tag-tier[data-tier="silver"] {background:linear-gradient(135deg,#e8d4d4,#806060);color:#252b3a}
.up-tag-tier[data-tier="gold"] {background:linear-gradient(135deg,#ffe680,#ff3838);color:#3a2a08}
.up-tag-tier[data-tier="platinum"] {background:linear-gradient(135deg,#ffe0e0,#5fb8ff);color:#0e2a4a}
.up-tag-tier[data-tier="diamond"] {background:linear-gradient(135deg,#ffd0d0,#a01818);color:#fff}
.up-tag-tier[data-tier="mythic"] {background:linear-gradient(135deg,#dd1c1c,#ff5050);color:#fff}
.up-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;
}
.up-stat{
padding:10px;border-radius:10px;text-align:center;
background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.up-stat-label{
font-family:'Plus Jakarta Sans';font-size:9px;letter-spacing:.14em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;margin-bottom:4px;
}
.up-stat-value{font-family:'Sora';font-weight:700;font-size:14px;color:var(--text)}
.up-bigwin{margin-bottom:16px}
.up-bigwin-eyebrow{
font-family:'Plus Jakarta Sans';font-size:10px;letter-spacing:.14em;
font-weight:800;color:var(--gold);text-transform:uppercase;margin-bottom:6px;
}
.up-bigwin-row{
display:flex;align-items:center;gap:14px;
padding:10px 12px;border-radius:10px;
background:linear-gradient(135deg, rgba(255,217,0,.10), rgba(255,82,82,.10));
border:1px solid rgba(255,217,0,.25);
}
.up-bigwin-game{font-family:'Sora';font-weight:700;color:var(--gold);flex:1}
.up-bigwin-multi{font-family:'Sora';font-weight:700}
.up-bigwin-profit{font-family:'Sora';font-weight:700;color:#28c76f}
.up-section-title{
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.14em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;margin-bottom:10px;
display:flex;justify-content:space-between;align-items:center;
}
.up-section-title span{color:var(--cyan)}
.up-ach-grid{
display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
}
.up-ach-cell{
display:flex;align-items:center;justify-content:center;
aspect-ratio:1/1;
}
.up-ach-cell.off .ach-badge{opacity:.32}
.up-ach-cell .ach-badge{width:48px;height:48px}
.up-ach-cell .ach-badge .ach-badge-emoji{font-size:20px}
@media (max-width:560px){
.up-stats{grid-template-columns:repeat(2,1fr)}
.up-ach-grid{grid-template-columns:repeat(5,1fr)}
}
/* ============== Bloxhit logo (uses the actual brand asset) ============== */
.logo{display:flex;align-items:center;text-decoration:none}
.bh-logo-img{
/* Was 64px — bumped the topbar up to 102px tall and ate vertical
real estate site-wide. 40px reads cleanly with the existing
drop-shadow halo and matches industry-standard topbar density. */
display:block;height:40px;width:auto;
filter:drop-shadow(0 3px 10px rgba(221,28,28,.45))
drop-shadow(0 0 14px rgba(255,82,82,.28));
transition:filter .2s ease, transform .2s ease;
user-select:none;-webkit-user-drag:none;
}
.logo:hover .bh-logo-img{
transform:scale(1.05);
filter:drop-shadow(0 4px 14px rgba(221,28,28,.7))
drop-shadow(0 0 20px rgba(255,82,82,.55));
}
@media (max-width:760px){
.bh-logo-img{height:34px}
}
/* ============== Reset old badge styles + add chunky cartoony badges ============== */
.ach-badge{
position:relative;width:64px;height:64px;
display:flex;align-items:center;justify-content:center;
border-radius:14px;
cursor:pointer;
transition:transform .2s cubic-bezier(.2,1.4,.5,1);
animation:bdgIdle 3.4s ease-in-out infinite;
}
.ach-badge:hover{transform:translateY(-3px) scale(1.08)}
@keyframes bdgIdle{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-3px)}
}
.ach-badge .ach-badge-bg{
position:absolute;inset:0;border-radius:14px;
box-shadow:
inset 0 -4px 0 rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.25),
0 6px 14px rgba(0,0,0,.4);
}
.ach-badge .ach-badge-art{
position:relative;z-index:1;width:64%;height:64%;
display:flex;align-items:center;justify-content:center;
}
.ach-badge .ach-badge-art svg{width:100%;height:100%;display:block;overflow:visible}
/* Per-badge bright cartoony backgrounds */
.ach-badge-first_blood .ach-badge-bg{background:linear-gradient(135deg,#ffe680 0%,#ff5050 100%);}
.ach-badge-high_roller .ach-badge-bg{background:linear-gradient(135deg,#a8e0ff 0%,#ff5252 50%,#7a0e0e 100%);}
.ach-badge-hot_streak .ach-badge-bg{background:linear-gradient(135deg,#ff3838 0%,#dd1c1c 60%,#7a0e0e 100%);}
.ach-badge-whale .ach-badge-bg{background:linear-gradient(135deg,#ffd0d0 0%,#ff5252 60%,#0a2a6a 100%);}
.ach-badge-mythic_pull .ach-badge-bg{background:linear-gradient(135deg,#ff5050 0%,#dd1c1c 50%,#a01818 100%);}
.ach-badge-mythic_pull{animation:bdgMythicShimmer 3s ease-in-out infinite}
@keyframes bdgMythicShimmer{
0%,100%{filter:drop-shadow(0 0 0 transparent)}
50% {filter:drop-shadow(0 0 14px rgba(255,217,0,.65))}
}
/* Locked badges: greyscale + dim */
.ach-badge.locked .ach-badge-bg{
background:linear-gradient(135deg,#3a3f55 0%,#1a1d2e 100%) !important;
}
.ach-badge.locked .ach-badge-art{filter:grayscale(1) brightness(.5)}
.ach-badge.locked{animation:none}
.ach-badge.locked:hover{transform:none}
/* Per-icon fine-grained animation */
.ach-art-trophy .bg-tro-grp{animation:bgTroBob 2.4s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes bgTroBob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.ach-art-trophy .bg-glint{animation:bgGlint 1.6s ease-in-out infinite}
@keyframes bgGlint{0%,100%{opacity:.2}50%{opacity:.95}}
.ach-art-diamond .bg-di-grp{animation:bgDiSpin 4s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes bgDiSpin{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.05)}}
.ach-art-diamond .bg-di-shine{animation:bgDiShine 2s ease-in-out infinite}
@keyframes bgDiShine{0%,100%{opacity:0;transform:translate(-3px,-3px)}50%{opacity:1;transform:translate(0,0)}}
.ach-art-flame .bg-fl-grp{animation:bgFlame 1s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
@keyframes bgFlame{
0%,100%{transform:scaleY(1) scaleX(1)}
35%{transform:scaleY(1.08) scaleX(.94)}
70%{transform:scaleY(.96) scaleX(1.06)}
}
.ach-art-whale .bg-wh-grp{animation:bgWhale 3.4s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes bgWhale{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(2px) rotate(2deg)}
}
.ach-art-whale .bg-wh-spout{animation:bgSpout 2.2s ease-in-out infinite}
@keyframes bgSpout{
0%,100%{opacity:0;transform:translateY(4px)}
50%{opacity:1;transform:translateY(0)}
}
.ach-art-thunder .bg-th-grp{
animation:bgThunder 1.8s ease-in-out infinite;
transform-origin:50% 50%;transform-box:fill-box;
filter:drop-shadow(0 0 8px rgba(255,217,0,.55));
}
@keyframes bgThunder{
0%,100%{transform:rotate(-4deg) scale(1)}
50%{transform:rotate(4deg) scale(1.06)}
}
/* Achievement card now wraps the new chunky badge */
.ach-card{grid-template-columns:64px 1fr}
.ach-card .ach-icon{display:none}
.ach-card.unlocked.ach-common,
.ach-card.unlocked.ach-rare,
.ach-card.unlocked.ach-epic,
.ach-card.unlocked.ach-legendary,
.ach-card.unlocked.ach-mythic{
/* Keep existing tier glow rules — but ensure the new badge isn't double-bordered. */
}
/* User popup — only show unlocked, lay them out chunky and big */
.up-ach-grid{grid-template-columns:repeat(5,1fr);gap:10px}
.up-ach-cell{aspect-ratio:1/1}
.up-ach-cell .ach-badge{width:100%;height:100%;border-radius:16px}
.up-ach-empty{
grid-column:1/-1;text-align:center;
font-family:'Plus Jakarta Sans';font-size:13px;color:var(--text-mute);
padding:20px;
}
/* Rename old "Achievement Unlocked" toast — eyebrow already updated in HTML */
/* ============== LIQUID GLASS — Apple-style frosted surfaces ==============
Applied broadly to floating panels: top bar, sidebar, modals, game shells,
chat. Each gets a subtle backdrop-blur + translucent gradient + thin
inner highlight. */
.topbar, .sidebar, .modal, .modal-fair,
.game-shell, .profile-shell,
.bet-feed-wrap, .stats-col, .game-popup, #chat,
.user-popup-card, .game-header, .ach-card,
.profile-game-card, .ph-stat, .ph-tier-card,
.profile-card, .ach-toast,
.act-row, .hist-row, .fair-pill, .fair-table {
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
}
/* Soft inner highlight on the most prominent surfaces. */
.topbar, .sidebar, .modal, .modal-fair, .game-shell, .profile-shell, .user-popup-card {
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 30%, rgba(255,255,255,0)),
linear-gradient(135deg, rgba(20,12,14,.62), rgba(10,8,11,.62));
border:1px solid rgba(255,255,255,.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 22px 60px rgba(0,0,0,.45);
border-radius:22px;
}
/* ============== Bigger top bar with scroll-aware liquid glass ============== */
.topbar{
position:sticky;top:0;z-index:50;
padding:18px 26px;
margin:0 14px 16px;
border-radius:20px;
transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.topbar.scrolled{
/* Hovered/scrolled: more opaque, deeper shadow, stronger blur. */
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 40%, rgba(255,255,255,0)),
linear-gradient(135deg, rgba(20,12,14,.85), rgba(10,8,11,.85));
border-color:rgba(255,255,255,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 30px 80px rgba(0,0,0,.55),
0 0 0 1px rgba(255,82,82,.08);
}
.topbar:hover{
/* Subtle liquid-glass lift on hover. */
border-color:rgba(255,255,255,.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 26px 70px rgba(0,0,0,.5),
0 0 0 1px rgba(0,255,213,.08);
}
/* Logo gets a touch larger to match the bigger bar. */
.logo-mark{width:48px;height:48px}
.logo-text .logo-main{font-size:24px;letter-spacing:.04em}
/* ============== Animated logo — per-letter bounce + color shift ============== */
.logo-main{
display:inline-flex;
letter-spacing:.04em;
}
.ll{
display:inline-block;
background:linear-gradient(180deg,#fff 0%,#ffd4f0 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:llBounce 2.6s ease-in-out infinite;
animation-delay:calc(var(--i,0) * .08s);
transform-origin:50% 80%;
}
.ll-accent{
background:linear-gradient(180deg,#dd1c1c 0%,#a01818 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes llBounce{
0%,100%{transform:translateY(0) scale(1)}
40% {transform:translateY(-4px) scale(1.06)}
70% {transform:translateY(0) scale(.98)}
}
/* Quick rainbow shimmer pass on hover. */
.logo-main:hover .ll{animation-duration:1.2s}
/* ============== Smoother shapes, glass-card buttons ============== */
.btn{border-radius:14px}
.btn:hover{
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.modal-backdrop{
background:rgba(8,10,24,.55);
backdrop-filter:blur(8px) saturate(140%);
-webkit-backdrop-filter:blur(8px) saturate(140%);
}
/* ============== Live feed sidebar (in-game) — real round rows ============== */
.lead-row{
cursor:pointer;
display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
padding:10px 12px;border-radius:12px;
transition:background .15s, border-color .15s;
}
/* No transform on hover — was causing the same horizontal-scrollbar pulse
as the coin list (parents that only have overflow-y:auto get a phantom
x-axis scrollbar from the 2px shift). */
.lead-row:hover{background:rgba(255,82,82,.07);border-color:rgba(255,82,82,.5)}
.lead-avatar{
width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.lead-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.lead-avatar-emoji{
width:100%;height:100%;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:16px;
}
.lead-name{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--text)}
.lead-bet{font-family:'Plus Jakarta Sans';font-size:11px;color:var(--text-mute)}
.lead-pay{font-family:'Sora';font-weight:700;font-size:13px}
.lead-pay.win{color:#28c76f}
.lead-pay.loss{color:#dd1c1c}
.lead-pay.push{color:var(--text-dim)}
.lead-rank{display:none}
/* ============== Buy BC modal ============== */
.modal-buy{width:min(680px,100%)}
.buy-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid var(--line-2)}
.buy-tab{
padding:10px 18px;border:0;background:transparent;cursor:pointer;
color:var(--text-mute);font-family:'Plus Jakarta Sans';font-weight:800;font-size:12.5px;
letter-spacing:.06em;border-bottom:2px solid transparent;
transition:color .15s, border-color .15s;
}
.buy-tab:hover{color:var(--text)}
.buy-tab.active{color:#fff;border-bottom-color:var(--pink)}
.buy-packages-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
}
.buy-pack{
position:relative;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:18px 14px;border-radius:16px;
background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
border:1px solid var(--line-2);
transition:transform .18s, border-color .18s, box-shadow .18s;
font-family:inherit;color:var(--text);
}
.buy-pack:hover{
transform:translateY(-3px);
border-color:rgba(0,255,213,.55);
box-shadow:0 0 0 1px rgba(0,255,213,.4), 0 8px 24px rgba(0,0,0,.4);
}
.buy-pack.popular{
border-color:rgba(255,217,0,.55);
background:linear-gradient(135deg, rgba(255,217,0,.10), rgba(255,82,82,.06));
}
.buy-pack.popular:hover{
box-shadow:0 0 0 1px rgba(255,217,0,.5), 0 8px 28px rgba(255,217,0,.25);
}
.buy-pack-badge{
position:absolute;top:-8px;right:-6px;
background:linear-gradient(135deg,#ff5050,#dd1c1c);
color:#1a0e08;padding:3px 8px;border-radius:6px;
font-family:'Plus Jakarta Sans';font-size:9px;font-weight:800;letter-spacing:.12em;
}
.buy-pack-name{
font-family:'Plus Jakarta Sans';font-size:11px;letter-spacing:.1em;
font-weight:800;color:var(--text-mute);text-transform:uppercase;
}
.buy-pack-amount{
font-family:'Sora';font-weight:700;font-size:18px;color:var(--text);
display:flex;align-items:center;gap:4px;
}
.buy-pack-price{
font-family:'Sora';font-weight:700;font-size:14px;color:var(--gold);
}
.buy-pack.busy{opacity:.4;pointer-events:none}
/* ============== Registration / agreement modal ============== */
.register-card{width:min(640px,100%)}
.register-check{
display:flex;gap:12px;align-items:flex-start;
padding:12px 0;cursor:pointer;
font-family:'Plus Jakarta Sans';font-size:13px;line-height:1.55;
color:var(--text-dim);
}
.register-check + .register-check{border-top:1px solid var(--line-2)}
.register-check input{position:absolute;opacity:0;pointer-events:none}
.register-cb{
flex-shrink:0;width:22px;height:22px;border-radius:6px;
background:rgba(255,255,255,.04);
border:1.5px solid var(--line-2);
display:flex;align-items:center;justify-content:center;
margin-top:1px;transition:background .15s, border-color .15s;
}
.register-cb::after{
content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
transform:rotate(-45deg) translate(0,-1px);
opacity:0;transition:opacity .15s;
}
.register-check input:checked + .register-cb{
background:linear-gradient(135deg,var(--pink),#a01818);
border-color:transparent;
}
.register-check input:checked + .register-cb::after{opacity:1}
.register-text{flex:1;color:var(--text)}
.register-text strong{color:#fff}
.register-text a{color:var(--gold);text-decoration:none}
.register-text a:hover{text-decoration:underline}
/* (Hero limited illustrations are styled near the top of this file under
`.hero-limited-stack` — kept here as a no-op section so the historic
anchor still resolves.) */
/* ============== Buy modal — payment-method chooser ============== */
.buy-stage{display:block}
.buy-stage[hidden]{display:none}
.buy-back{
background:transparent;border:0;cursor:pointer;
color:var(--text-mute);font-family:'Plus Jakarta Sans';
font-weight:700;font-size:12.5px;padding:0 0 12px;
transition:color .15s;
}
.buy-back:hover{color:var(--cyan)}
.pay-method-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
margin-top:6px;
}
@media (max-width:640px){.pay-method-grid{grid-template-columns:1fr}}
.pay-method{
display:flex;flex-direction:column;align-items:center;gap:10px;
padding:22px 16px;border-radius:18px;cursor:pointer;
background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border:1px solid var(--line-2);
font-family:inherit;color:var(--text);
transition:transform .18s, border-color .18s, box-shadow .18s;
}
.pay-method:hover{
transform:translateY(-3px);
border-color:rgba(255,217,0,.55);
box-shadow:0 8px 28px rgba(255,217,0,.15);
}
.pay-method:hover .pay-method-icon{transform:scale(1.06)}
.pay-method-icon{
width:80px;height:80px;border-radius:18px;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.28);
border:1px solid var(--line-2);
transition:transform .2s;
overflow:hidden;
}
.pay-method-icon svg{width:80%;height:80%;display:block}
.pay-method-icon img{
width:60px;height:60px;display:block;object-fit:contain;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
user-select:none;-webkit-user-drag:none;
}
.pay-method-icon-crypto{box-shadow:0 0 18px rgba(255,165,0,.25)}
.pay-method-icon-robux{box-shadow:0 0 18px rgba(165,165,165,.25)}
.pay-method-title{
font-family:'Sora';font-weight:700;font-size:17px;color:var(--text);
}
.pay-method-sub{
font-family:'Plus Jakarta Sans';font-size:11.5px;color:var(--text-mute);
font-weight:600;text-align:center;line-height:1.4;
}
.pay-method-sub.pay-method-soon{
color:var(--gold);
letter-spacing:.06em;text-transform:uppercase;font-weight:800;
}
/* ============== Crypto coin list (your wallets) ============== */
.buy-coin-list{
display:flex;flex-direction:column;gap:8px;max-height:60vh;
overflow-y:auto;overflow-x:hidden; /* hover translate must not trigger an x-axis scrollbar */
padding-right:4px;
}
.coin-row{
display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;
padding:12px 14px;border-radius:14px;cursor:pointer;
background:rgba(255,255,255,.04);border:1px solid rgba(255,82,82,.18);
font-family:inherit;color:var(--text);text-align:left;
transition:border-color .15s, background .15s, box-shadow .15s;
}
/* No transform on hover — was causing horizontal overflow that pulsed a
scrollbar in/out and made the modal shake under the cursor. */
.coin-row:hover{
border-color:rgba(255,82,82,.55);
background:linear-gradient(90deg, rgba(255,82,82,.08), rgba(255,56,56,.04));
box-shadow:0 0 14px rgba(255,82,82,.18);
}
.coin-row-icon{
width:42px;height:42px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-weight:800;font-size:22px;
background:transparent;border:none;
flex-shrink:0;
}
.coin-row-icon svg,
.coin-row-icon img{
width:42px;height:42px;display:block;border-radius:50%;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
object-fit:contain;
}
.coin-btc{background:linear-gradient(135deg,#ff5252,#a85f00);color:#fff}
.coin-eth{background:linear-gradient(135deg,#627eea,#3b5998);color:#fff}
.coin-sol{background:linear-gradient(135deg,#a01818,#14f195);color:#fff}
.coin-ltc{background:linear-gradient(135deg,#345d9d,#bebebe);color:#fff}
.coin-doge{background:linear-gradient(135deg,#ad6900,#ff5050);color:#3a2a08}
.coin-usdt{background:linear-gradient(135deg,#26a17b,#1f7d5e);color:#fff}
.coin-usdc{background:linear-gradient(135deg,#2775ca,#1c5a9c);color:#fff}
.coin-trx{background:linear-gradient(135deg,#ef0027,#a8001b);color:#fff}
.coin-bnb{background:linear-gradient(135deg,#f3ba2f,#a87a00);color:#3a2a08}
.coin-matic{background:linear-gradient(135deg,#8247e5,#4a2780);color:#fff}
.coin-row-meta{min-width:0}
.coin-row-name{font-family:'Sora';font-weight:700;font-size:15px;color:var(--text)}
.coin-row-net{font-family:'Plus Jakarta Sans';font-size:11px;color:var(--text-mute);font-weight:700}
.coin-row-arrow{font-size:24px;color:var(--text-mute)}
/* On nested deposit stages (crypto, coin-detail, bonus) the Back button is
the close affordance — hide the modal's global X to avoid the duplicate. */
#deposit-modal[data-active-stage="crypto"] .modal-close,
#deposit-modal[data-active-stage="coin-detail"] .modal-close,
#deposit-modal[data-active-stage="bonus"] .modal-close{display:none}
/* ============== Bloxflip-style per-coin deposit screen ============== */
.buy-stage-coin{display:flex;flex-direction:column;gap:14px}
.cd-crumbs{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;
color:var(--text-dim);
}
.cd-crumb{color:var(--text-mute)}
.cd-crumb-link{cursor:pointer;color:#ff5252;transition:color .15s}
.cd-crumb-link:hover{color:#fff}
.cd-crumb-active{color:#fff}
.cd-sep{color:var(--text-mute);font-size:14px}
.cd-back-btn{
margin-left:auto;padding:5px 12px;font-size:11px;letter-spacing:.1em;
}
.cd-title{
font-family:'Sora';font-weight:800;font-size:24px;color:#fff;
margin:0;letter-spacing:.01em;
}
.cd-rate{
font-family:'Plus Jakarta Sans';font-weight:600;font-size:12.5px;
color:var(--text-dim);margin:0;
}
/* Estimate panel (BC ↔ USD ↔ coin) */
.cd-estimate{
padding:14px;border-radius:14px;
background:linear-gradient(180deg, rgba(28,12,16,.5), rgba(16,8,10,.4));
border:1px solid rgba(255,82,82,.25);
display:flex;flex-direction:column;gap:8px;
}
.cd-estimate-head{
font-family:'Sora';font-weight:700;font-size:12px;letter-spacing:.14em;
color:#ff5252;text-align:center;margin-bottom:4px;text-transform:uppercase;
}
.cd-est-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 12px;border-radius:10px;
background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.06);
}
.cd-est-label{
font-family:'Plus Jakarta Sans';font-weight:600;font-size:13px;
color:var(--text-dim);
}
.cd-est-label-coin{display:flex;align-items:center;gap:8px}
.cd-est-coin-img{width:18px;height:18px;border-radius:50%;display:block}
.cd-est-input{
background:transparent;border:none;outline:none;
font-family:'Sora';font-weight:700;font-size:14px;color:#fff;
text-align:right;width:160px;min-width:0;
}
.cd-est-input::-webkit-inner-spin-button,
.cd-est-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cd-est-input[readonly]{color:#ff5252;cursor:default}
.cd-est-row.cd-row-below-min .cd-est-input{color:#ff5252}
.cd-est-warn{
margin-top:2px;padding:6px 10px;border-radius:8px;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:11.5px;
color:#ff5252;background:rgba(221,28,28,.10);
border:1px solid rgba(221,28,28,.32);
text-align:center;letter-spacing:.02em;
}
.cd-est-warn span{color:#fff;font-weight:800}
.cd-network-line{
font-family:'Plus Jakarta Sans';font-weight:600;font-size:12.5px;
color:#ff5252;text-align:left;margin:0;
}
.cd-network-line strong{color:#fff;font-weight:800}
.cd-qr-wrap{display:flex;justify-content:center;margin:6px 0}
.cd-qr{
width:200px;height:200px;border-radius:16px;
background:#fff;padding:10px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 24px rgba(255,82,82,.25);
}
.cd-qr svg{width:100%;height:100%;display:block}
.cd-addr-label{
display:block;
font-family:'Plus Jakarta Sans';font-weight:700;font-size:12.5px;
color:#ff5252;
}
.cd-addr-hint{color:var(--text-mute);font-weight:600}
.cd-addr-row{
display:flex;gap:8px;align-items:center;
padding:12px 14px;border-radius:12px;
background:rgba(0,0,0,.4);border:1px solid rgba(255,82,82,.25);
}
.cd-addr-row code{
flex:1;min-width:0;
font-family:'JetBrains Mono','Plus Jakarta Sans',monospace;
font-size:12.5px;color:#fff;
font-weight:600;word-break:break-all;
}
.cd-addr-copy{
border:1px solid rgba(255,82,82,.4);
background:rgba(255,82,82,.12);color:#ffe0e0;
width:36px;height:36px;border-radius:10px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:18px;line-height:1;
transition:background .15s, border-color .15s;
}
.cd-addr-copy:hover{background:rgba(255,82,82,.25);border-color:rgba(255,82,82,.7)}
.cd-warn{
padding:12px 14px;border-radius:12px;
font-family:'Plus Jakarta Sans';font-size:12.5px;line-height:1.5;
}
.cd-warn strong{display:block;color:#fff;font-weight:800;font-size:13px;margin-bottom:2px}
.cd-warn-info{
background:linear-gradient(180deg, rgba(255,80,80,.10), rgba(255,82,82,.04));
border:1px solid rgba(255,80,80,.35);
color:var(--text-dim);
}
.cd-warn-info strong{color:#ffd0a8}
.cd-warn-danger{
background:linear-gradient(180deg, rgba(221,28,28,.12), rgba(221,28,28,.04));
border:1px solid rgba(221,28,28,.35);
color:#ffc7d0;
}
.cd-warn-danger strong{color:#ff5252}
.cd-foot{
font-family:'Plus Jakarta Sans';font-size:11.5px;color:var(--text-mute);
text-align:center;line-height:1.55;margin:0;
}
/* Legacy classes still referenced elsewhere — kept compatible. */
.coin-detail-card{display:none}
.coin-detail-qr{width:200px;height:200px}
.coin-detail-qr svg{width:100%;height:100%}
.coin-detail-addr{display:flex;gap:8px;align-items:center}
.coin-detail-addr code{flex:1;min-width:0;font-family:'Plus Jakarta Sans';font-size:11.5px;color:#fff;font-weight:700;word-break:break-all}
.coin-detail-note{font-family:'Plus Jakarta Sans';font-size:11.5px;color:var(--text-mute);line-height:1.55}
/* ============================================================
AGE PILL + LEGAL FOOTER
----------------------------------------------------------------
Required visible 18+ marker (regulators expect a clear age gate
indicator) and Roblox trademark disclaimer (so we don't get hit
with a takedown for the playful "Blox" branding). Lives in the
topbar online-pill row and at the bottom of the home page.
============================================================ */
/* Hero legal strip — the 18+ image badge + Roblox trademark disclaimer.
Sits at the bottom of the hero card so the legal warnings live with
the brand statement above ("Play. Win.") instead of being scattered
around the topbar / footer. Designed to blend, not shout: muted text,
subtle border, the 18+ image as the only attention-grabber. */
.hero-legal{
display:flex; align-items:flex-start; gap:14px;
margin-top:18px; padding:14px 16px 12px;
border-radius:14px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)),
rgba(10,8,11,.45);
border:1px solid rgba(255,255,255,.06);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
max-width:560px;
}
.hero-legal .hl-18{
flex-shrink:0;
width:56px; height:56px;
filter:drop-shadow(0 4px 10px rgba(180,28,52,.4));
/* Slow, almost-still pulse so the badge feels alive without being
distracting next to the busy hero art. */
animation:hl18Pulse 3.4s ease-in-out infinite;
}
@keyframes hl18Pulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.04)}
}
.hero-legal .hl-text{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:11px; line-height:1.55;
color:rgba(182,192,228,.72);
}
.hero-legal .hl-text strong{color:rgba(255,255,255,.88); font-weight:700}
.hero-legal .hl-text a{
color:rgba(168,213,240,.85); text-decoration:underline;
text-decoration-color:rgba(168,213,240,.35);
transition:color .12s, text-decoration-color .12s;
}
.hero-legal .hl-text a:hover{
color:#ffe0e0; text-decoration-color:#ffe0e0;
}
.hero-legal .hl-meta{
display:block;
margin-top:6px;
padding-top:6px;
border-top:1px solid rgba(255,255,255,.05);
color:rgba(106,114,153,.85);
font-size:10.5px; letter-spacing:.02em;
}
@media (max-width:560px){
.hero-legal{padding:12px; gap:10px; margin-top:14px}
.hero-legal .hl-18{width:46px; height:46px}
.hero-legal .hl-text{font-size:10.5px; line-height:1.5}
.hero-legal .hl-meta{font-size:10px}
}
/* ============================================================
COIN SLIDER (bet-input redesign)
----------------------------------------------------------------
Replaces the original number-input-with-tiny-buttons pattern. A
wide track with a coin thumb, glowing fill that follows the
slider, big readable amount + USD equivalent, ½/2× quick pills.
The original stays in the DOM (hidden) so
existing handlers keep working.
============================================================ */
.cs-hidden-input{
position:absolute !important;
opacity:0 !important;
pointer-events:none !important;
width:1px !important; height:1px !important;
left:-9999px !important;
}
.coin-slider-host{
display:flex; flex-direction:column; gap:6px;
padding:10px 12px 8px;
border-radius:12px;
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
rgba(10,8,11,.45);
border:1px solid rgba(255,255,255,.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 2px 8px rgba(0,0,0,.18);
}
/* Top row — coin glyph, big amount, "BC" suffix on left; USD inline-right.
Single line keeps the component dense; previous layout split coin+amount
from USD which doubled the vertical real estate. */
.cs-readout{
display:flex; align-items:center; justify-content:space-between; gap:10px;
min-height:24px;
}
.cs-amount-row{
display:flex; align-items:baseline; gap:6px; min-width:0;
}
.cs-coin-glyph{
width:22px; height:22px;
background:url('assets/hitcoin currency.png') center/contain no-repeat;
filter:drop-shadow(0 0 4px rgba(221,28,28,.5));
flex-shrink:0;
align-self:center;
/* Slow horizontal coin "spin" — ovalizing scaleX cycle between 1 and 0.2
gives the optical illusion of a 3D coin rotating without needing a real
SVG. Paused while hovering or dragging because that's busy enough on
screen already. */
animation:csCoinSpin 5.2s ease-in-out infinite;
transform-origin:center;
}
@keyframes csCoinSpin{
0% {transform:scaleX(1) rotate(0)}
45% {transform:scaleX(.18) rotate(0)}
55% {transform:scaleX(.18) rotate(0)}
100% {transform:scaleX(1) rotate(0)}
}
.coin-slider-host:hover .cs-coin-glyph,
.coin-slider-host.cs-dragging .cs-coin-glyph{
animation-play-state:paused;
/* Hover/drag = quick acknowledgement spin that locks the coin upright */
transform:scaleX(1) rotate(0);
}
.cs-amount{
font-family:'Sora', sans-serif;
font-weight:700;
font-size:18px;
line-height:1;
color:#fff;
letter-spacing:-.005em;
cursor:text;
outline:none;
padding:1px 3px;
border-radius:5px;
transition:background .12s, color .12s;
min-width:36px;
/* Number value uses tabular figures so the width doesn't jitter as digits
change during a drag. Without this, the fill width and amount width
would both update each frame and the layout micro-shifts. */
font-variant-numeric:tabular-nums;
}
.cs-amount:hover{background:rgba(255,255,255,.04)}
.cs-amount.editing{
background:rgba(255,217,0,.1);
outline:1px solid rgba(255,217,0,.45);
color:#ff5050;
}
.cs-amount-suffix{
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700; font-size:11px; color:var(--text-mute,#5a3030);
letter-spacing:.06em;
}
.cs-usd{
font-family:'JetBrains Mono','Plus Jakarta Sans',monospace;
font-size:11px; color:var(--text-mute, #5a3030);
letter-spacing:0;
font-variant-numeric:tabular-nums;
flex-shrink:0;
/* Subtle "live update" pulse class added when the value changes — JS
toggles `cs-usd-pulse` for one frame so the eye catches the update. */
}
.cs-usd.cs-usd-pulse{animation:csUsdPulse .35s ease-out}
@keyframes csUsdPulse{
0% {color:#ff5050}
100%{color:var(--text-mute, #5a3030)}
}
.cs-slider-row{
display:flex; align-items:center; gap:8px;
}
.cs-track-wrap{
position:relative;
flex:1;
height:24px;
display:flex; align-items:center;
}
.cs-range{
appearance:none; -webkit-appearance:none;
width:100%; height:24px;
background:transparent;
margin:0; padding:0;
position:relative; z-index:3;
cursor:grab;
}
.cs-range:active{cursor:grabbing}
/* Slim track — 5px (was 8px). Inset shadow keeps the depth illusion. */
.cs-track-wrap::before{
content:"";
position:absolute; left:0; right:0; top:50%;
height:5px; transform:translateY(-50%);
background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.16));
border-radius:4px;
border:1px solid rgba(255,255,255,.04);
box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
/* Fill — gradient bar with a moving shimmer overlay. The shimmer is a
diagonal white gloss that translates across the fill independent of the
width animation; gives the bar a "liquid" quality without the cost of
re-rendering the gradient. */
.cs-track-fill{
position:absolute; left:0; top:50%;
height:5px; transform:translateY(-50%);
width:0%;
background:linear-gradient(90deg, #ff5050 0%, #ff3838 55%, #dd1c1c 100%);
border-radius:4px;
box-shadow:0 0 8px rgba(255,180,40,.4);
pointer-events:none;
z-index:2;
will-change:width;
overflow:hidden;
}
.cs-track-fill::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(110deg,
transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
background-size:60px 100%;
background-repeat:no-repeat;
animation:csFillShimmer 2.4s linear infinite;
pointer-events:none;
}
@keyframes csFillShimmer{
0% {background-position:-80px 0}
100%{background-position:calc(100% + 80px) 0}
}
.coin-slider-host.cs-dragging .cs-track-fill::after{
/* During a drag the user is creating their own motion — pause the
shimmer so it doesn't compete visually with the thumb. */
animation-play-state:paused;
}
.cs-ticks{
position:absolute; left:0; right:0; top:50%;
height:10px; transform:translateY(-50%);
display:flex; justify-content:space-between;
pointer-events:none;
z-index:1;
}
.cs-tick{
width:1px; height:5px;
background:rgba(255,255,255,.16);
border-radius:1px;
align-self:center;
}
/* Coin thumb — actual bloxcoin from assets/ico.png. 22px (was 30px) so it
sits flush in the slimmer track. Spins on drag for the "tossing a coin"
feel — distinct from the readout coin's slow horizontal spin. */
.cs-range::-webkit-slider-thumb{
appearance:none; -webkit-appearance:none;
width:22px; height:22px;
background:url('assets/hitcoin currency.png') center/contain no-repeat;
border:0;
filter:drop-shadow(0 0 6px rgba(221,28,28,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
cursor:grab;
transition:transform .14s cubic-bezier(.16,1,.3,1);
margin-top:0;
}
.cs-range::-webkit-slider-thumb:hover{transform:scale(1.18) rotate(8deg)}
.cs-range:active::-webkit-slider-thumb{
transform:scale(1.22);
cursor:grabbing;
filter:drop-shadow(0 0 14px rgba(255,217,0,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
/* When dragging, give the thumb a fast 3D-coin spin via the host class. */
.coin-slider-host.cs-dragging .cs-range::-webkit-slider-thumb{
animation:csThumbSpin .9s linear infinite;
}
@keyframes csThumbSpin{
0% {transform:scale(1.22) rotateY(0deg)}
100%{transform:scale(1.22) rotateY(360deg)}
}
.cs-range::-moz-range-thumb{
width:22px; height:22px;
background:url('assets/hitcoin currency.png') center/contain no-repeat;
border:0;
filter:drop-shadow(0 0 6px rgba(221,28,28,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
cursor:grab;
}
.cs-range::-moz-range-track{background:transparent; height:5px}
/* ½ / 2× quick pills — slimmer, glassy. */
.cs-quick{
flex-shrink:0;
height:24px; min-width:32px;
padding:0 8px;
border-radius:6px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
color:var(--text-dim, #b6c0e4);
font-family:'Sora',sans-serif; font-weight:700; font-size:11px;
letter-spacing:.03em;
cursor:pointer;
transition:transform .12s, background .12s, color .12s, border-color .12s;
}
.cs-quick:hover{
background:rgba(255,217,0,.1);
border-color:rgba(255,217,0,.4);
color:#ff5050;
transform:translateY(-1px);
}
.cs-quick:active{transform:translateY(0) scale(.94)}
.cs-min-max{
display:flex; justify-content:space-between;
font-family:'JetBrains Mono','Plus Jakarta Sans',monospace;
font-size:9.5px; color:var(--text-mute, #5a3030);
letter-spacing:.02em;
padding:0 2px;
margin-top:-1px;
font-variant-numeric:tabular-nums;
opacity:.75;
}
/* Compact variant for tight game panels */
@media (max-width:560px){
.coin-slider-host{padding:8px 10px 6px}
.cs-amount{font-size:16px}
.cs-coin-glyph{width:18px; height:18px}
.cs-usd{font-size:10px}
.cs-quick{min-width:28px; padding:0 6px; font-size:10px}
}
/* When the coin slider replaces a .bet-input, hide the legacy wrapper.
We don't `display:none` it because the original input must keep
participating in form-element events (focus calls, value reads). It
shrinks to a 0×0 footprint with overflow hidden, so it stays in the
accessibility tree but takes no visible space. */
.bet-input.bet-input-replaced{
width:0; height:0; overflow:hidden;
padding:0; margin:0; border:0;
opacity:0; pointer-events:none;
}
/* ============================================================
PERFORMANCE — pause/skip work on inactive routes
----------------------------------------------------------------
Every game route has decorative animations (rocket flame, dice
bounce, plinko peg flash, crash starfield, etc.) that keep
running even when the route is hidden. On low-spec laptops this
eats GPU time for no visible benefit. Two big levers:
1) `content-visibility: auto` on inactive routes. The browser
skips layout/paint entirely until the route enters the
viewport. Modern browsers (Chrome 85+, Safari 18+) honor this.
2) `animation-play-state: paused` on every animated descendant
of an inactive route. Lighter-touch fallback for browsers
that haven't shipped content-visibility yet.
The history-row icons (.hi-* classes) animate forever on every
row in your transactions list. We pause them when their row is
off-screen via IntersectionObserver in app.js — pure CSS can't
express "in viewport" without IO support.
============================================================ */
.route:not(.active){
content-visibility:auto;
contain-intrinsic-size:1000px;
}
.route:not(.active) *{
animation-play-state:paused !important;
}
/* History icons + tier badges animate on every row regardless of
visibility. We add a helper class .anim-paused via JS and pause
here. CSS-only fallback uses prefers-reduced-motion. */
.anim-paused, .anim-paused *{
animation-play-state:paused !important;
}
@media (prefers-reduced-motion: reduce){
.hi-rocket-g, .hi-rocket-flame, .hi-boom-g, .hi-cards-g,
.hi-gem-g, .hi-gem-spark, .hi-bomb-g, .hi-bomb-fuse,
.hi-dice-g, .hi-trend-g, .hi-trend-tip, .hi-target-g,
.hi-arrow-g, .hi-push-g,
.crash-stars, .crash-stars-2{
animation:none !important;
}
}
/* When the browser tab is in the background, pause all decorative
animations site-wide. The user can't see them and they're costing
battery on laptops / phones. */
body.tab-hidden *{
animation-play-state:paused !important;
}
/* ============================================================
MULTI SLIDER (target-multiplier inputs)
----------------------------------------------------------------
Distinct from the coin slider: thinner, faster, more "instrument
panel" than "wallet". One readout row, one slim track with stop
markers at the popular multipliers (2x / 5x / 10x / 100x), and
a themed thumb that visually hints at the game it lives in.
Two themes ship: ms-crash (rocket, pink-purple) and ms-limbo
(lightning bolt, cyan->gold). Adding a theme = ~10 lines.
============================================================ */
.multi-slider-host{
display:flex; flex-direction:column; gap:8px;
padding:10px 12px;
border-radius:12px;
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
rgba(10,8,11,.45);
border:1px solid rgba(255,255,255,.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 2px 8px rgba(0,0,0,.18);
position:relative;
overflow:hidden;
}
.multi-slider-host::before{
content:"";
position:absolute; inset:0;
background:linear-gradient(110deg,
transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
background-size:140% 100%;
background-repeat:no-repeat;
animation:msHostSweep 6s ease-in-out infinite;
pointer-events:none;
}
@keyframes msHostSweep{
0% {background-position:-50% 0; opacity:0}
20% {opacity:1}
80% {opacity:1}
100%{background-position:150% 0; opacity:0}
}
.multi-slider-host.ms-dragging::before{animation-play-state:paused; opacity:0}
.ms-readout{
display:flex; align-items:baseline; gap:6px;
position:relative;
z-index:1;
}
.ms-icon{
width:18px; height:18px; align-self:center;
flex-shrink:0;
background-position:center; background-repeat:no-repeat; background-size:contain;
}
.ms-icon-crash{
background-image:url("data:image/svg+xml;utf8,");
filter:drop-shadow(0 0 4px rgba(255,82,82,.55));
transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.ms-crash[data-risk="medium"] .ms-icon-crash{transform:rotate(-8deg)}
.ms-crash[data-risk="high"] .ms-icon-crash{transform:rotate(-16deg)}
.ms-crash[data-risk="extreme"] .ms-icon-crash{transform:rotate(-22deg) scale(1.08)}
.ms-icon-limbo{
background-image:url("data:image/svg+xml;utf8,");
filter:drop-shadow(0 0 4px rgba(255,217,0,.6));
animation:msLimboPulse 2.2s ease-in-out infinite;
}
@keyframes msLimboPulse{
0%,100%{transform:scale(1) ; filter:drop-shadow(0 0 3px rgba(255,217,0,.45))}
50% {transform:scale(1.12); filter:drop-shadow(0 0 8px rgba(255,217,0,.75))}
}
.ms-limbo.ms-dragging .ms-icon-limbo{animation-play-state:paused}
.ms-value{
font-family:'Sora', sans-serif;
font-weight:700;
font-size:18px;
line-height:1;
color:#fff;
letter-spacing:-.005em;
cursor:text;
outline:none;
padding:1px 3px;
border-radius:5px;
transition:background .12s, color .15s;
font-variant-numeric:tabular-nums;
min-width:42px;
}
.ms-value:hover{background:rgba(255,255,255,.04)}
.ms-value.editing{
background:rgba(255,255,255,.08);
outline:1px solid rgba(255,255,255,.25);
}
.ms-suffix{
font-family:'Sora',sans-serif;
font-weight:600; font-size:13px;
color:var(--text-mute,#5a3030);
margin-left:-2px;
}
.ms-chance{
margin-left:auto;
font-family:'JetBrains Mono','Plus Jakarta Sans',monospace;
font-size:10.5px; color:var(--text-mute,#5a3030);
font-variant-numeric:tabular-nums;
letter-spacing:.02em;
align-self:center;
}
.ms-chance::before{
content:"chance ";
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700; font-size:9px; letter-spacing:.08em;
color:rgba(255,255,255,.32); text-transform:uppercase;
margin-right:4px;
}
.ms-crash[data-risk="safe"] .ms-value{color:#ff5252}
.ms-crash[data-risk="medium"] .ms-value{color:#ff5050}
.ms-crash[data-risk="high"] .ms-value{color:#ff7090}
.ms-crash[data-risk="extreme"] .ms-value{color:#a01818}
.ms-limbo[data-risk="safe"] .ms-value{color:#ffe0e0}
.ms-limbo[data-risk="medium"] .ms-value{color:#ff5050}
.ms-limbo[data-risk="high"] .ms-value{color:#ff3838}
.ms-limbo[data-risk="extreme"] .ms-value{color:#dd1c1c}
.ms-track-wrap{
position:relative;
height:28px;
display:flex; align-items:center;
}
.ms-range{
appearance:none; -webkit-appearance:none;
width:100%; height:28px;
background:transparent;
margin:0; padding:0;
position:relative; z-index:3;
cursor:grab;
}
.ms-range:active{cursor:grabbing}
.ms-track-wrap::before{
content:"";
position:absolute; left:0; right:0; top:50%;
height:4px; transform:translateY(-50%);
background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.16));
border-radius:3px;
box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.ms-track-fill{
position:absolute; left:0; top:50%;
height:4px; transform:translateY(-50%);
width:0%;
border-radius:3px;
pointer-events:none;
z-index:2;
will-change:width;
}
.ms-crash .ms-track-fill{
background:linear-gradient(90deg, #ff5252 0%, #ff5050 30%, #dd1c1c 70%, #a01818 100%);
box-shadow:0 0 8px rgba(255,82,82,.4);
}
.ms-limbo .ms-track-fill{
background:linear-gradient(90deg, #ff5252 0%, #ff5252 30%, #ff5050 65%, #dd1c1c 100%);
box-shadow:0 0 8px rgba(255,217,0,.35);
}
.ms-track-glow{
position:absolute; left:0; top:50%;
width:14px; height:14px; transform:translate(-50%,-50%);
border-radius:50%;
pointer-events:none;
z-index:2;
opacity:.75;
animation:msGlowPulse 1.8s ease-in-out infinite;
}
.ms-crash .ms-track-glow{background:radial-gradient(circle, rgba(255,82,82,.7) 0%, transparent 70%)}
.ms-limbo .ms-track-glow{background:radial-gradient(circle, rgba(255,217,0,.7) 0%, transparent 70%)}
@keyframes msGlowPulse{
0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(.9)}
50% {opacity:.95; transform:translate(-50%,-50%) scale(1.25)}
}
.multi-slider-host.ms-dragging .ms-track-glow{animation-duration:.6s; opacity:1}
.ms-stops{
position:absolute; left:0; right:0; top:0;
height:8px;
pointer-events:none;
}
.ms-stop{
position:absolute; top:0;
transform:translateX(-50%);
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700; font-size:9px;
color:rgba(255,255,255,.35);
letter-spacing:.04em;
pointer-events:auto;
cursor:pointer;
padding:1px 5px;
border-radius:3px;
transition:color .12s, background .12s, transform .12s;
}
.ms-stop:hover{
color:#fff;
background:rgba(255,255,255,.08);
transform:translateX(-50%) translateY(-1px);
}
.ms-crash .ms-range::-webkit-slider-thumb{
appearance:none; -webkit-appearance:none;
width:22px; height:22px;
border:0;
border-radius:50%;
background:radial-gradient(60% 60% at 35% 30%, #ffe0ec 0%, #dd1c1c 50%, #8e1530 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
0 0 0 2px rgba(255,82,82,.18),
0 0 12px rgba(255,82,82,.55),
0 3px 6px rgba(0,0,0,.35);
cursor:grab;
transition:transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s;
}
.ms-crash .ms-range::-moz-range-thumb{
width:22px; height:22px;
border:0;
border-radius:50%;
background:radial-gradient(60% 60% at 35% 30%, #ffe0ec 0%, #dd1c1c 50%, #8e1530 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
0 0 0 2px rgba(255,82,82,.18),
0 0 12px rgba(255,82,82,.55),
0 3px 6px rgba(0,0,0,.35);
cursor:grab;
}
.ms-crash .ms-range:active::-webkit-slider-thumb{
transform:scale(1.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 0 4px rgba(255,82,82,.3),
0 0 22px rgba(255,82,82,.85),
0 4px 10px rgba(0,0,0,.4);
}
.ms-limbo .ms-range::-webkit-slider-thumb{
appearance:none; -webkit-appearance:none;
width:22px; height:22px;
border:0;
border-radius:6px;
background:linear-gradient(135deg, #ffe0e0 0%, #ff5050 45%, #7a0e0e 100%);
transform:rotate(45deg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 0 0 2px rgba(255,217,0,.2),
0 0 12px rgba(255,217,0,.55),
0 3px 6px rgba(0,0,0,.35);
cursor:grab;
transition:transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s;
}
.ms-limbo .ms-range::-moz-range-thumb{
width:22px; height:22px;
border:0;
border-radius:6px;
background:linear-gradient(135deg, #ffe0e0 0%, #ff5050 45%, #7a0e0e 100%);
transform:rotate(45deg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 0 0 2px rgba(255,217,0,.2),
0 0 12px rgba(255,217,0,.55),
0 3px 6px rgba(0,0,0,.35);
cursor:grab;
}
.ms-limbo .ms-range:active::-webkit-slider-thumb{
transform:rotate(45deg) scale(1.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
0 0 0 4px rgba(255,217,0,.32),
0 0 22px rgba(255,217,0,.85),
0 4px 10px rgba(0,0,0,.4);
}
.ms-range::-moz-range-track{background:transparent; height:4px}
.multi-slider-host[data-risk="extreme"] .ms-track-fill{
filter:saturate(1.3) brightness(1.1);
}
@media (max-width:560px){
.multi-slider-host{padding:8px 10px}
.ms-value{font-size:16px}
.ms-chance{font-size:9.5px}
}
/* ============================================================
v4 PRO POLISH — overrides applied last, win specificity battles
- Glassmorphic toast w/ icon + progress bar + close button
- Buttons: ripple + spring press + smoother hover bezier
- Game cards: 3D mouse tilt + cursor-follow glow trail
- Sidebar: bouncier hover snap
- Custom gradient scrollbars
============================================================ */
/* ---- TOAST v4 ---------------------------------------------- */
.toast-wrap{
position:fixed;
bottom:30px;right:30px;
z-index:300;
display:flex;flex-direction:column-reverse;gap:12px;
pointer-events:none;
width:380px;max-width:calc(100vw - 28px);
}
.toast{
position:relative;
display:grid;grid-template-columns:46px 1fr 22px;align-items:center;
gap:12px;
padding:14px 16px;
border-radius:16px;
background:linear-gradient(135deg, rgba(28,12,16,.92), rgba(12,6,8,.96));
border:1px solid rgba(255,255,255,.08);
font-family:'Plus Jakarta Sans';font-size:13px;font-weight:600;
color:var(--text);
letter-spacing:.01em;
text-shadow:0 1px 0 rgba(0,0,0,.35);
box-shadow:
0 18px 38px rgba(0,0,0,.55),
0 4px 10px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
transform-origin:right center;
pointer-events:auto;
overflow:hidden;
isolation:isolate;
animation:
toastSlideIn .55s cubic-bezier(.22,1,.36,1) both,
toastSlideOut .45s cubic-bezier(.5,0,.75,0) 3.25s forwards !important;
}
.toast::before{
content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
border-radius:0 4px 4px 0;
background:currentColor;
box-shadow:0 0 14px currentColor;
opacity:.95;
}
.toast::after{
content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;z-index:-1;
background:radial-gradient(140% 140% at 0% 50%, currentColor, transparent 55%);
opacity:.10;
}
/* Brand badge on the toast — Bloxhit logo image. Reads as "this
notification came from Bloxhit" without being heavy-handed. The
colored left border on the toast itself signals win/loss/info. */
.toast-brand{
position:relative;width:44px;height:44px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
border-radius:12px;
background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.4));
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
}
.toast-brand-img{
width:34px;height:34px;
object-fit:contain;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(221,28,28,.35));
user-select:none;-webkit-user-drag:none;
}
.toast .toast-body{
font-weight:600;color:var(--text);
line-height:1.35;letter-spacing:.01em;
padding-right:2px;min-width:0;
}
.toast .toast-body strong{color:#fff;font-weight:800}
.toast .toast-close{
width:22px;height:22px;border-radius:7px;
background:transparent;border:0;color:var(--text-mute);
font-size:15px;line-height:1;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;padding:0;
transition:background .18s ease, color .18s ease, transform .18s ease;
}
.toast .toast-close:hover{
background:rgba(255,255,255,.08);
color:#fff;
transform:scale(1.12) rotate(90deg);
}
.toast .toast-progress{
position:absolute;left:0;bottom:0;height:2px;width:100%;
background:linear-gradient(90deg, currentColor, transparent);
transform-origin:left center;
animation:toastProgress 3.5s linear forwards;
opacity:.85;
}
/* tinted variants — currentColor drives the accent bar + progress */
.toast.win{
color:#ff5252;border-color:rgba(255,82,82,.32);
box-shadow:
0 18px 38px rgba(0,0,0,.55),
0 0 28px rgba(255,82,82,.28),
inset 0 1px 0 rgba(255,255,255,.06);
}
.toast.loss{
color:#ff5e7e;border-color:rgba(221,28,28,.32);
box-shadow:
0 18px 38px rgba(0,0,0,.55),
0 0 28px rgba(221,28,28,.28),
inset 0 1px 0 rgba(255,255,255,.06);
}
.toast.info{
color:#ff5252;border-color:rgba(118,228,255,.32);
box-shadow:
0 18px 38px rgba(0,0,0,.55),
0 0 28px rgba(118,228,255,.26),
inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes toastSlideIn{
0%{opacity:0;transform:translateX(60px) scale(.92);filter:blur(4px)}
60%{filter:blur(0)}
100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
}
@keyframes toastSlideOut{
0%{opacity:1;transform:translateX(0) scale(1)}
100%{opacity:0;transform:translateX(80px) scale(.85);filter:blur(2px)}
}
@keyframes toastProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:700px){
.toast-wrap{right:14px;bottom:14px;left:14px;width:auto}
}
/* ---- BUTTON v4 --------------------------------------------- */
.btn{
transition:
transform .22s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s cubic-bezier(.2,.8,.25,1),
background .25s cubic-bezier(.2,.8,.25,1),
border-color .25s ease,
color .25s ease,
filter .25s ease;
}
.btn:hover{filter:brightness(1.04) saturate(1.08)}
.btn:active{transform:translateY(1px) scale(.96);transition-duration:.08s}
.btn:hover .btn-shine{animation:btnShine .55s cubic-bezier(.22,1,.36,1)}
/* JS-spawned ripple wave that radiates from the click point. */
.btn-ripple{
position:absolute;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 40%, rgba(255,255,255,0) 70%);
transform:translate(-50%,-50%) scale(0);
pointer-events:none;
z-index:1;
mix-blend-mode:screen;
animation:btnRipple .65s cubic-bezier(.22,1,.36,1) forwards;
width:14px;height:14px;
}
@keyframes btnRipple{
0%{opacity:.65;transform:translate(-50%,-50%) scale(0)}
100%{opacity:0;transform:translate(-50%,-50%) scale(28)}
}
/* The .btn-shine span and any nested label must sit ABOVE the ripple
layer so text never disappears mid-animation. */
.btn > *:not(.btn-ripple){position:relative;z-index:2}
/* ---- GAME CARD v4 ------------------------------------------ */
/* NOTE: do NOT set `will-change: transform` here. The card has 3D-parallax
children (.gc-name/.gc-art/.gc-tag/.gc-bubble use translateZ when
.is-tilting). will-change:transform promotes the card to its own
compositing layer which forces flat rendering on descendants — same
class of bug that broke the dice 3D cube. The transform animations
composite fine without the hint. */
.game-card{
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
transition:
transform .55s cubic-bezier(.16,1,.3,1),
box-shadow .55s cubic-bezier(.16,1,.3,1),
filter .35s ease;
}
.game-card.is-tilting{transition:transform .12s linear, box-shadow .35s, filter .35s}
.game-card:hover{
filter:saturate(1.08) brightness(1.04);
box-shadow:
0 30px 60px rgba(0,0,0,.55),
0 0 60px rgba(255,82,82,.35),
inset 0 0 0 1px rgba(255,255,255,.10);
}
.game-card.is-tilting:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.game-card .gc-glow{
position:absolute;inset:0;border-radius:inherit;
pointer-events:none;z-index:1;
background:radial-gradient(280px 280px at var(--mx,50%) var(--my,50%),
rgba(255,255,255,.30), rgba(255,255,255,0) 60%);
opacity:0;
transition:opacity .35s cubic-bezier(.16,1,.3,1);
mix-blend-mode:screen;
}
.game-card:hover .gc-glow{opacity:1}
.game-card .gc-name,
.game-card .gc-art,
.game-card .gc-tag,
.game-card .gc-bubble{transform-style:preserve-3d}
.game-card.is-tilting .gc-name{transform:translateZ(40px)}
.game-card.is-tilting .gc-art{transform:translateZ(30px)}
.game-card.is-tilting .gc-tag{transform:translateZ(34px)}
.game-card.is-tilting .gc-bubble{transform:translateZ(46px)}
/* ---- SIDEBAR v4 -------------------------------------------- */
.sb-link{
transition:
background .25s cubic-bezier(.34,1.56,.64,1),
color .2s ease,
transform .35s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s ease;
}
.sb-link:hover{transform:translateX(5px)}
/* ---- BG ORB DRIFT (gentle parallax follow) ----------------- */
.bg-orb{
transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
/* ---- SCROLLBARS — gradient pink/plum ----------------------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, rgba(255,82,82,.40), rgba(122,14,14,.40));
border-radius:8px;
border:2px solid transparent;
background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, rgba(255,82,82,.65), rgba(122,14,14,.65));
background-clip:padding-box;
}
/* ---- ROUTE TRANSITION refinement --------------------------- */
.route.active{
animation:routeIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes routeIn{
0%{opacity:0;transform:translateY(14px) scale(.99);filter:blur(6px)}
60%{filter:blur(0)}
100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
/* ---- BALANCE PILL — refined coin bump ---------------------- */
.balance.bump{animation:bumpV4 .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes bumpV4{
0%,100%{transform:scale(1)}
35%{transform:scale(1.14);box-shadow:0 0 36px var(--pink), 0 0 12px rgba(255,255,255,.4)}
70%{transform:scale(.98)}
}
/* ---- REDUCED MOTION ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
.toast{animation:none !important;opacity:1;transform:none}
.toast .toast-progress{animation:none;transform:scaleX(0)}
.btn-ripple{display:none}
.game-card{transform:none !important}
.game-card .gc-glow{display:none}
.bg-orb{animation:none !important}
.route.active{animation:none}
}
/* ============================================================
v5 PREMIUM POLISH — refined gradients, depth, proportions
Loaded last so it wins specificity battles against legacy rules.
- Buttons: multi-stop gradients + 3D depth + soft inner highlight
- Modals: glassy glow border, refined close X, title gradient
- Topbar: subtle border highlight + scroll glow
- Sidebar: gradient active state + smoother badges
- Inputs: glassmorphic with glow focus ring
- Section titles: gradient text fill
============================================================ */
/* ---- BUTTON v5 — premium multi-stop gradients + depth ------- */
.btn{
border-radius:12px;
font-weight:800;
letter-spacing:.07em;
isolation:isolate;
}
.btn::after{
/* Inner top highlight that catches the light. */
content:"";position:absolute;inset:1px;border-radius:11px;
background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%);
pointer-events:none;z-index:1;
opacity:.85;
transition:opacity .25s ease;
}
.btn:hover::after{opacity:1}
.btn:active::after{opacity:.55}
.btn .btn-shine{z-index:2}
/* PRIMARY — pink-to-magenta with depth */
.btn-primary{
background:
radial-gradient(120% 180% at 50% 0%, #ff7a7a 0%, transparent 45%),
linear-gradient(180deg, #ff5252 0%, #dd1c1c 45%, #a01818 75%, #7a0e0e 100%);
border:1px solid rgba(255,255,255,.20);
color:#fff;
text-shadow:0 1px 0 rgba(122,24,56,.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(122,24,56,.55),
0 1px 0 rgba(255,255,255,.10),
0 6px 14px rgba(221,28,28,.45),
0 0 0 1px rgba(221,28,28,.30),
0 0 26px rgba(221,28,28,.32);
}
/* Hover stays inside the brand-red palette — was previously fading to a
pink/magenta tail (leftover from the pre-revamp palette). */
.btn-primary:hover{
background:
radial-gradient(120% 180% at 50% 0%, #ffd6d6 0%, transparent 45%),
linear-gradient(180deg, #ff8e8e 0%, #ff5252 45%, #dd1c1c 75%, #7a0e0e 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(122,14,14,.70),
0 8px 22px rgba(221,28,28,.70),
0 0 0 1px rgba(221,28,28,.55),
0 0 38px rgba(255,56,56,.55);
}
.btn-primary:active{
transform:translateY(1px) scale(.97);
box-shadow:
inset 0 2px 4px rgba(122,24,56,.45),
0 2px 6px rgba(221,28,28,.3);
}
/* DEPOSIT — Hitcoin red gradient */
.btn-deposit{
background:
radial-gradient(120% 180% at 50% 0%, #ffd0d0 0%, transparent 45%),
linear-gradient(180deg, #ff7a7a 0%, #ff3838 45%, #dd1c1c 75%, #7a0e0e 100%);
border:1px solid rgba(255,255,255,.30);
color:#fff;
font-weight:900;
text-shadow:0 1px 0 rgba(0,0,0,.35);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(122,14,14,.65),
0 1px 0 rgba(255,255,255,.14),
0 6px 14px rgba(221,28,28,.50),
0 0 0 1px rgba(221,28,28,.30),
0 0 26px rgba(221,28,28,.45);
}
.btn-deposit:hover{
background:
radial-gradient(120% 180% at 50% 0%, #ffe0e0 0%, transparent 45%),
linear-gradient(180deg, #ff9a9a 0%, #ff5252 45%, #ff3838 75%, #a01818 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(122,14,14,.7),
0 8px 20px rgba(221,28,28,.75),
0 0 38px rgba(255,56,56,.55);
}
.btn-deposit:active{transform:translateY(1px) scale(.97)}
/* CASHOUT — gold gradient (kept actually-gold for the "you got money out"
feel; on a red-themed brand this stays distinct from the SIGN-IN red). */
.btn-cashout{
background:
radial-gradient(120% 180% at 50% 0%, #fff5cc 0%, transparent 45%),
linear-gradient(180deg, #ffe066 0%, #ffc933 45%, #f59e0b 75%, #ad6900 100%);
border:1px solid rgba(255,255,255,.30);
color:#3a1d00;
font-weight:900;
text-shadow:0 1px 0 rgba(255,255,255,.35);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.60),
inset 0 -1px 0 rgba(173,105,0,.60),
0 6px 14px rgba(255,168,0,.55),
0 0 0 1px rgba(255,168,0,.30),
0 0 28px rgba(255,168,0,.40);
}
.btn-cashout:hover{
background:
radial-gradient(120% 180% at 50% 0%, #fff8d6 0%, transparent 45%),
linear-gradient(180deg, #fff09a 0%, #ffe21a 45%, #ffb820 75%, #c87a0a 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.70),
inset 0 -1px 0 rgba(173,105,0,.70),
0 8px 20px rgba(255,168,0,.75),
0 0 38px rgba(255,168,0,.50);
}
.btn-cashout:active{transform:translateY(1px) scale(.97)}
/* GHOST — refined glass */
.btn-ghost{
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.10);
color:var(--text-dim);
font-weight:700;
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
}
.btn-ghost::after{display:none}
.btn-ghost:hover{
background:linear-gradient(180deg, rgba(255,82,82,.16), rgba(255,82,82,.06));
border-color:rgba(255,82,82,.55);
color:#fff;
box-shadow:
0 0 0 1px rgba(255,82,82,.45),
0 8px 20px rgba(255,82,82,.30),
inset 0 1px 0 rgba(255,255,255,.10);
}
/* OUTLINE — refined */
.btn-outline{
background:linear-gradient(180deg, rgba(255,82,82,.04), rgba(255,82,82,0));
border:1.5px solid var(--pink);
color:#fff;
box-shadow:0 0 22px rgba(255,82,82,.22), inset 0 0 18px rgba(255,82,82,.06);
}
.btn-outline::after{display:none}
.btn-outline:hover{
background:linear-gradient(180deg, rgba(255,82,82,.18), rgba(255,82,82,.06));
box-shadow:0 0 32px rgba(255,82,82,.45), inset 0 0 22px rgba(255,82,82,.15);
}
/* big buttons get a touch more heft */
.btn.big{padding:15px 28px;font-size:13.5px;letter-spacing:.10em;border-radius:14px}
.btn.big::after{border-radius:13px}
/* ---- TOPBAR v5 — refined border + subtle glow on scroll ---- */
.topbar{
background:linear-gradient(180deg, rgba(20,8,12,.92), rgba(12,6,8,.85));
border-bottom:1px solid rgba(255,82,82,.10);
box-shadow:
0 1px 0 rgba(255,255,255,.04) inset,
0 6px 24px rgba(0,0,0,.45);
}
.topbar::after{
/* Hairline highlight at the very bottom edge */
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(255,82,82,.45) 25%, rgba(122,14,14,.45) 50%, rgba(255,56,56,.45) 75%, transparent 100%);
opacity:.6;pointer-events:none;
}
.topbar{position:sticky;top:0}
/* ---- BALANCE PILL — refined gradient + finer border ---- */
.balance{
background:
linear-gradient(180deg, rgba(255,82,82,.22), rgba(255,82,82,.08)),
rgba(28,12,16,.5);
border:1px solid rgba(255,82,82,.45);
padding:7px 14px 7px 12px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 0 18px rgba(255,82,82,.20),
0 2px 8px rgba(0,0,0,.35);
}
/* ---- SIDEBAR LINK v5 — refined active gradient + badges ---- */
.sb-link{
border-radius:11px;
}
.sb-link.active{
background:
linear-gradient(90deg, rgba(255,82,82,.30) 0%, rgba(122,14,14,.16) 60%, rgba(122,14,14,0) 100%);
box-shadow:
inset 0 0 0 1px rgba(255,82,82,.30),
0 0 18px rgba(255,82,82,.10);
}
.sb-link.active::before{
width:3px;left:-1px;
background:linear-gradient(180deg,#ffb0d6 0%, var(--pink) 40%, var(--pink-deep) 100%);
box-shadow:0 0 14px var(--pink), 0 0 6px rgba(255,255,255,.4);
}
.sb-badge{
font-size:9px;letter-spacing:.08em;font-weight:800;
padding:3px 8px;border-radius:7px;line-height:1;
border:1px solid;
}
.sb-hot{
color:#ff5252;
border-color:rgba(255,82,82,.45);
background:linear-gradient(180deg, rgba(221,28,28,.22), rgba(221,28,28,.10));
box-shadow:0 0 10px rgba(221,28,28,.20);
}
.sb-new{
color:#7be8a3;
border-color:rgba(123,232,163,.45);
background:linear-gradient(180deg, rgba(221,28,28,.22), rgba(221,28,28,.10));
box-shadow:0 0 10px rgba(221,28,28,.20);
}
/* ---- BET INPUT v5 — refined glass with glow focus ---- */
.bet-input{
padding:11px 14px;
border-radius:13px;
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
rgba(12,6,8,.55);
border:1px solid rgba(255,82,82,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 0 22px rgba(255,82,82,.04);
}
.bet-input:focus-within{
border-color:var(--pink);
box-shadow:
0 0 0 4px rgba(221,28,28,.16),
0 0 18px rgba(255,82,82,.25),
inset 0 1px 0 rgba(255,255,255,.10);
}
.bet-input button{
border-radius:8px;
background:linear-gradient(180deg, rgba(255,82,82,.20), rgba(255,82,82,.08));
border:1px solid rgba(255,82,82,.30);
font-weight:800;letter-spacing:.04em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* ---- MODAL v5 — premium glass with glow border ---- */
.modal-backdrop{
background:rgba(8,5,18,.62);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.modal{
border-radius:24px;
background:
linear-gradient(165deg, rgba(28,12,16,.96) 0%, rgba(20,8,12,.98) 100%);
border:1px solid rgba(255,82,82,.18);
box-shadow:
0 30px 80px rgba(0,0,0,.7),
0 0 0 1px rgba(255,82,82,.12),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 60px rgba(255,82,82,.08);
padding:34px 32px;
}
/* Glow ring removed — the prior `mask-composite: exclude` trick rendered
visible artifacts at the corners on certain GPUs/browsers (see user
screenshot). Replaced with a subtle multi-stop box-shadow on the
.modal itself which is uniform on every renderer. */
.modal-close{
position:absolute;top:14px;right:14px;
width:34px;height:34px;border-radius:11px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:var(--text-dim);
cursor:pointer;font-size:0;line-height:0;
display:flex;align-items:center;justify-content:center;
transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
z-index:2;
}
/* Render an SVG-like X using CSS pseudo-elements so we don't have to
change the existing `` markup. */
.modal-close::before,
.modal-close::after{
content:"";position:absolute;width:14px;height:1.5px;border-radius:1px;
background:currentColor;
transition:background .2s;
}
.modal-close::before{transform:rotate(45deg)}
.modal-close::after{transform:rotate(-45deg)}
.modal-close:hover{
background:rgba(221,28,28,.20);
border-color:rgba(221,28,28,.55);
color:#ffb0bd;
transform:rotate(90deg);
}
.modal-title{
font-family:'Sora';font-weight:400;font-size:30px;letter-spacing:.01em;
background:linear-gradient(180deg, #ffffff 0%, #ffd0d0 60%, #ff5252 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 18px rgba(255,82,82,.35));
margin-bottom:8px;
text-shadow:none;
}
.modal-sub{color:var(--text-dim);margin-bottom:22px;font-size:13.5px;font-weight:600;line-height:1.5}
@keyframes modalIn{
0%{opacity:0;transform:scale(.94) translateY(18px);filter:blur(6px)}
60%{filter:blur(0)}
100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
/* ---- SECTION TITLE v5 — gradient text fill ---- */
.section-title{
background:linear-gradient(180deg, #ffffff 0%, #ffd0d0 65%, #ff5252 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 2px 12px rgba(255,82,82,.18));
letter-spacing:.01em;
}
/* ---- LIVE BET FEED v5 — refined tabs ---- */
.bf-tab{
border-radius:10px;
font-weight:800;letter-spacing:.06em;
transition:background .2s, color .2s, transform .15s, box-shadow .25s;
}
.bf-tab.active{
background:linear-gradient(180deg, var(--pink), var(--pink-deep));
color:#fff;border-color:rgba(255,255,255,.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.40),
inset 0 -1px 0 rgba(122,24,56,.5),
0 4px 12px rgba(221,28,28,.40);
text-shadow:0 1px 0 rgba(122,24,56,.4);
}
/* ---- FAIR PILL v5 — slimmer + premium ---- */
.fair-pill{
border-radius:10px;
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border:1px solid rgba(255,82,82,.30);
letter-spacing:.06em;font-weight:800;font-size:11px;
transition:background .25s, border-color .25s, transform .2s, box-shadow .25s;
}
.fair-pill:hover{
background:linear-gradient(180deg, rgba(255,82,82,.18), rgba(255,82,82,.06));
border-color:rgba(255,82,82,.65);
box-shadow:0 0 20px rgba(255,82,82,.30);
}
/* ---- BC GLYPH inside toast bodies — hairline halo ---- */
.toast .bc-glyph{filter:drop-shadow(0 0 6px rgba(255,82,82,.5))}
/* ---- CHAT input v5 ---- */
.chat-input input{
background:rgba(12,6,8,.55);
border:1px solid rgba(255,82,82,.16);
border-radius:11px;
transition:border-color .25s, box-shadow .25s;
}
.chat-input input:focus{
border-color:var(--pink);
box-shadow:0 0 0 3px rgba(255,82,82,.20), 0 0 14px rgba(255,82,82,.20);
}
/* ---- ONLINE PILL v5 — refined emerald ---- */
.online-pill{
background:
linear-gradient(180deg, rgba(221,28,28,.18), rgba(221,28,28,.06)),
rgba(12,6,8,.4);
border:1px solid rgba(221,28,28,.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 18px rgba(221,28,28,.16);
border-radius:10px;
padding:7px 14px;
}
/* ---- PROFILE PILL v5 ---- */
.profile{
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border:1px solid rgba(255,82,82,.20);
border-radius:99px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.25);
}
/* ---- CRYPTO CARD v5 — refined hover ---- */
.crypto-card{
border-radius:13px;
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.06);
transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s, background .25s;
}
.crypto-card:hover{
transform:translateY(-3px);
border-color:rgba(255,82,82,.55);
background:linear-gradient(180deg, rgba(255,82,82,.10), rgba(255,82,82,.02));
box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 22px rgba(255,82,82,.20);
}
.crypto-card.selected{
border-color:var(--cyan);
box-shadow:
0 0 0 1px var(--cyan),
0 0 28px rgba(118,228,255,.30),
0 10px 24px rgba(0,0,0,.4);
background:linear-gradient(180deg, rgba(118,228,255,.08), rgba(118,228,255,.02));
}
/* ---- BG ORB v5 — softer pink/purple/orange (reverted from red so the
game shells don't read as red-on-red-on-red). ---- */
.bg-orb-1{
background:radial-gradient(circle, rgba(221,28,28,.38), transparent 70%);
filter:blur(80px);
}
.bg-orb-2{
background:radial-gradient(circle, rgba(122,14,14,.36), transparent 70%);
filter:blur(80px);
}
.bg-orb-3{
background:radial-gradient(circle, rgba(255,56,56,.18), transparent 70%);
filter:blur(70px);
}
/* ---- BODY GRID — finer red overlay ---- */
body::before{
background-image:
linear-gradient(rgba(221,28,28,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(221,28,28,.035) 1px, transparent 1px);
background-size:64px 64px;
}
/* ---- SCROLLBAR v5 — slimmer track + corner softening ---- */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, rgba(255,82,82,.50), rgba(122,14,14,.50));
border-radius:9px;border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, rgba(255,82,82,.75), rgba(122,14,14,.75));
background-clip:padding-box;
}
* { scrollbar-width:thin; scrollbar-color: rgba(255,82,82,.55) transparent }
/* ---- HISTORY BAR v5 ---- */
.history-bar{
border-radius:13px;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border:1px solid rgba(255,82,82,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* ---- FOCUS RING — accessibility + premium feel ---- */
:focus-visible{
outline:2px solid var(--pink);
outline-offset:2px;
border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}
.sb-link:focus-visible, .bf-tab:focus-visible{outline-offset:1px}
/* ============================================================
v6 QUIRKS — playful micro-touches
- Bet coin scales with bet/balance ratio
- Fire emoji + MAX→"ALL IN" when betting all your money
- Smooth number ticker via JS, no extra CSS
- Top scroll progress bar
- BC coin pulse + click spin
- Live feed row entry highlight
============================================================ */
/* ---- Bet input v9 — bloxflip-style: large number, hex-coin, soft pills ----
The fire/coin-scale/ALL IN system was scrapped per user feedback. The
½ / 2× / MAX buttons (and any optional bet-preset chips) all share one
uniform pill style so the row reads as a single calm strip. */
.bet-input{
position:relative;
/* Reset to the cleaner bloxflip silhouette: dark inset, rounded rect. */
padding:12px 14px !important;
background:linear-gradient(180deg, rgba(12,6,8,.50), rgba(12,6,8,.30)) !important;
border:1px solid rgba(255,255,255,.06) !important;
border-radius:12px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
gap:10px !important;
align-items:center;
}
.bet-input:focus-within{
border-color:rgba(255,82,82,.45) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 0 0 3px rgba(255,82,82,.12) !important;
}
.bet-input input[type="number"]{
font-size:18px !important;
font-weight:700 !important;
letter-spacing:.01em !important;
/* Hide the spinner buttons — they don't fit the minimal aesthetic. */
-moz-appearance:textfield;
}
.bet-input input[type="number"]::-webkit-outer-spin-button,
.bet-input input[type="number"]::-webkit-inner-spin-button{
-webkit-appearance:none;margin:0;
}
.bet-input .bcoin-icon{
flex-shrink:0;
width:22px;height:22px;
/* Static — no value-driven scale tiers anymore. */
transition:filter .25s ease;
}
/* Uniform pill style for ALL bet-input quick-select buttons. */
.bet-input button[data-bet-action]{
display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:30px;padding:0 12px;
border-radius:8px;
background:rgba(255,255,255,.04) !important;
border:1px solid rgba(255,255,255,.08) !important;
color:var(--text-dim) !important;
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700;font-size:12px;letter-spacing:.02em;
cursor:pointer;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s cubic-bezier(.34,1.56,.64,1);
box-shadow:none !important;
}
.bet-input button[data-bet-action]:hover{
background:rgba(255,82,82,.10) !important;
color:#fff !important;
border-color:rgba(255,82,82,.35) !important;
}
.bet-input button[data-bet-action]:active{
transform:scale(.95);
background:rgba(255,82,82,.18) !important;
}
/* Bet preset chips — inline row of value-shortcuts shown UNDER the bet
input (e.g. 5 / 25 / 100 / 500). Mirrors bloxflip's "Amount of rows"
strip — pure quick-pick, no slider. */
.bet-presets{
display:flex;gap:8px;flex-wrap:wrap;
margin-top:8px;
}
.bet-presets button{
flex:1 1 0;
min-width:0;
height:30px;padding:0 8px;
/* Flex centering — text-align:center alone doesn't vertically center
a one-line label inside a fixed-height block button. */
display:inline-flex;align-items:center;justify-content:center;
border-radius:8px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:var(--text-dim);
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700;font-size:12px;letter-spacing:.02em;line-height:1;
cursor:pointer;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.bet-presets button:hover{
background:rgba(255,82,82,.10);
color:#fff;
border-color:rgba(255,82,82,.35);
}
.bet-presets button.active{
background:linear-gradient(180deg, rgba(255,82,82,.22), rgba(255,82,82,.10));
color:#fff;
border-color:rgba(255,82,82,.55);
box-shadow:0 0 12px rgba(255,82,82,.20);
}
.bet-presets button:active{
transform:scale(.95);
}
/* ---- Top scroll progress bar ---- */
.scroll-progress{
position:fixed;top:0;left:0;height:2px;width:100%;
z-index:120;pointer-events:none;
transform:scaleX(var(--scroll-progress, 0));
transform-origin:left center;
background:linear-gradient(90deg, var(--pink) 0%, var(--plum) 50%, var(--orange) 100%);
box-shadow:0 0 12px rgba(255,82,82,.55), 0 0 2px rgba(255,255,255,.4);
transition:transform .08s linear;
}
/* ---- Hitcoin badge pulse + click spin ----
The .bcoin-icon CSS class name is kept to avoid breaking 30+ existing
call-sites in index.html / app.js — but the visual identity is now
the floating Hitcoin red square. The pulse glow is red, and the spin
on click is paired with a brief red halo for extra punch. */
.bcoin-icon{
transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.balance .bcoin-icon{
animation:bcPulse 3s ease-in-out infinite, hitcoinFloat 4s ease-in-out infinite;
}
@keyframes bcPulse{
0%,100%{filter:drop-shadow(0 0 6px rgba(221,28,28,.55))}
50% {filter:drop-shadow(0 0 14px rgba(221,28,28,.95)) drop-shadow(0 0 4px rgba(255,255,255,.4))}
}
.bcoin-icon.coin-spin{
animation:bcSpin .65s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes bcSpin{
0% {transform:rotate(0deg) scale(1);filter:drop-shadow(0 0 6px rgba(221,28,28,.55))}
50% {transform:rotate(180deg) scale(1.25);filter:drop-shadow(0 0 18px rgba(255,56,56,1)) drop-shadow(0 0 4px rgba(255,255,255,.6))}
100%{transform:rotate(360deg) scale(1);filter:drop-shadow(0 0 6px rgba(221,28,28,.55))}
}
/* ---- Live bet feed entry highlight ---- */
.bf-row.bf-new{
animation:bfNewIn .55s cubic-bezier(.16,1,.3,1) 1, bfNewFlash 1.2s ease-out 1;
}
@keyframes bfNewIn{
0% {opacity:0;transform:translateY(-8px) scale(.98)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes bfNewFlash{
0% {background:linear-gradient(90deg, rgba(255,82,82,.18), transparent 40%)}
100%{background:transparent}
}
/* ---- Smooth number ticker — JS-driven, just style hooks ---- */
.num-ticker{
display:inline-block;
transition:color .25s ease, text-shadow .25s ease;
}
.num-ticker.ticking{
color:#ff5050;
text-shadow:0 0 12px rgba(255,217,0,.55);
}
/* ---- Game card subtle sparkle pass ---- */
.game-card{position:relative}
.game-card::before{
/* refresh: faint sweeping highlight every cycle */
background:radial-gradient(circle, rgba(255,255,255,.30), transparent 70%);
}
.game-card .gc-sparkle{
position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
background-size:240% 100%;
background-position:130% 0;
opacity:0;
z-index:1;
mix-blend-mode:screen;
}
.game-card:hover .gc-sparkle{
opacity:1;
animation:gcSparkleSweep 1.1s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes gcSparkleSweep{
0% {background-position:130% 0;opacity:0}
20% {opacity:1}
100%{background-position:-130% 0;opacity:0}
}
/* ============================================================
v7 SVG ICON KIT — animated inline replacements for emojis.
All icons use SVG data URIs with multi-stop gradients to match
the visual quality of .gh-svg game-header art.
============================================================ */
/* Tiny dice — used in topbar rounds/min indicator. Tumbles gently. */
.ico-dice-tiny{
display:inline-block;
width:14px;height:14px;
vertical-align:-2px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation:diceTumble 4s ease-in-out infinite;
filter:drop-shadow(0 0 4px rgba(255,82,82,.4));
}
@keyframes diceTumble{
0%,100%{transform:rotate(-6deg)}
50%{transform:rotate(6deg)}
}
/* Tiny mine — used in mines suffix slot. */
.ico-mine-tiny{
display:inline-block;
width:18px;height:18px;
vertical-align:-3px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation:mineSpark 1.4s ease-in-out infinite;
filter:drop-shadow(0 0 5px rgba(255,140,40,.4));
}
@keyframes mineSpark{
0%,100%{filter:drop-shadow(0 0 4px rgba(255,140,40,.35))}
50% {filter:drop-shadow(0 0 9px rgba(255,217,0,.7))}
}
/* Tiny flame — used in streak labels, etc. */
.ico-flame-tiny{
display:inline-block;
width:12px;height:14px;
vertical-align:-3px;
margin-right:4px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation:fireFlick .35s ease-in-out infinite alternate;
}
/* Section header icon — animated sakura-bloom petal cluster. */
.section-icon{
display:inline-block;
width:30px;height:30px;
vertical-align:-7px;
margin-left:8px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation:sectionIconBob 4s ease-in-out infinite;
filter:drop-shadow(0 2px 6px rgba(255,82,82,.45));
}
@keyframes sectionIconBob{
0%,100%{transform:translateY(0) rotate(-6deg)}
50% {transform:translateY(-3px) rotate(6deg)}
}
/* Burst variant for celebratory section (e.g. Latest big wins) — gold star burst. */
.section-icon--burst{
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation:burstSpinSlow 3s ease-in-out infinite;
filter:drop-shadow(0 2px 8px rgba(255,217,0,.55));
}
@keyframes burstSpinSlow{
0%,100%{transform:rotate(-12deg) scale(1)}
50% {transform:rotate(12deg) scale(1.10)}
}
/* Title-burst (case opening title) — uses same star but bigger. */
.title-burst{
display:inline-block;
width:34px;height:34px;
vertical-align:-9px;
margin-right:8px;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation:burstSpinSlow 3s ease-in-out infinite;
filter:drop-shadow(0 0 12px var(--gold));
}
/* In-game mine bomb tile (BOMB_SVG inserted by app.js). */
.mt-bomb{ width:80%; height:80%; display:block; margin:auto; }
.mt-bomb-body{ animation:mtBombShake .5s ease-in-out infinite alternate }
@keyframes mtBombShake{
from{transform-origin:center;transform:translate(0,0)}
to {transform:translate(-.6px,.6px)}
}
.mt-bomb-spark{ animation:mtBombSpark .35s ease-in-out infinite alternate; transform-origin:center }
@keyframes mtBombSpark{
from{transform:scale(.85)}
to {transform:scale(1.20)}
}
.mt-bomb-fuse{ stroke-dasharray:18; stroke-dashoffset:0; animation:mtBombFuse 1.4s linear infinite }
@keyframes mtBombFuse{
from{stroke-dashoffset:0}
to {stroke-dashoffset:-18}
}
/* ============================================================
v7 RESULT BANNER — premium glass + animated SVG icon
============================================================ */
.result-banner .rb-card{
/* Override prior corner-toast layout: now has SVG icon block, premium
glass, color-coded ring border. */
display:grid;
grid-template-columns:46px 1fr auto;
column-gap:14px;
padding:14px 18px 16px 14px;
border-radius:18px;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,82,82,.20), transparent 65%),
linear-gradient(180deg, rgba(28,12,16,.94), rgba(12,6,8,.97));
backdrop-filter:blur(18px) saturate(180%);
-webkit-backdrop-filter:blur(18px) saturate(180%);
border:1px solid rgba(255,255,255,.10);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 22px 50px rgba(0,0,0,.6),
0 0 0 1px rgba(0,0,0,.4);
overflow:visible; /* let the icon's pulsing ring extend */
isolation:isolate;
}
/* Replace the previous 4px left bar with a real SVG icon box. */
.result-banner .rb-icon{
width:46px;height:46px;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
display:flex;align-items:center;justify-content:center;
grid-row:span 2;
font-size:0;line-height:0;
position:relative;
}
.result-banner .rb-icon .rbi{
width:100%;height:100%;display:block;
animation:rbiPop .55s cubic-bezier(.34,1.56,.64,1) 1;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.result-banner .rb-icon .rbi-stroke{
stroke-dasharray:42;
stroke-dashoffset:42;
animation:rbiDraw .55s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.result-banner .rb-icon .rbi-ring{
transform-origin:center;
animation:rbiRing 1.6s ease-out infinite;
opacity:.55;
}
@keyframes rbiPop{
0% {transform:scale(.5) rotate(-30deg);opacity:0}
60% {transform:scale(1.12) rotate(0);opacity:1}
100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes rbiDraw{
to{stroke-dashoffset:0}
}
@keyframes rbiRing{
0% {transform:scale(.85);opacity:.7}
60% {transform:scale(1.25);opacity:0}
100%{transform:scale(1.25);opacity:0}
}
/* Color tints (override the small-glyph colors from earlier). */
.result-banner.win{ filter:drop-shadow(0 18px 40px rgba(255,82,82,.35)) drop-shadow(0 0 24px rgba(0,0,0,.5)) }
.result-banner.loss{ filter:drop-shadow(0 18px 40px rgba(221,28,28,.35)) drop-shadow(0 0 24px rgba(0,0,0,.5)) }
.result-banner.push{ filter:drop-shadow(0 18px 40px rgba(255,217,0,.35)) drop-shadow(0 0 24px rgba(0,0,0,.5)) }
.result-banner.win .rb-card{ border-color:rgba(255,82,82,.35) }
.result-banner.loss .rb-card{ border-color:rgba(221,28,28,.35) }
.result-banner.push .rb-card{ border-color:rgba(255,217,0,.35) }
.result-banner .rb-title{
font-family:'Sora';font-weight:800;font-size:15px;letter-spacing:.10em;
text-shadow:none;
filter:drop-shadow(0 0 14px currentColor);
}
.result-banner .rb-sub{
font-size:11.5px;color:var(--text-dim);
letter-spacing:.02em;line-height:1.3;
font-weight:600;
}
.result-banner .rb-payout{
font-family:'Sora';font-weight:900;font-size:14.5px;
padding:6px 12px;border-radius:99px;
background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
}
/* ============================================================
v8 CENTERING + LIMITS — final polish
============================================================ */
/* Modal title and sub centered for cleaner premium look. */
.modal-title{ text-align:center }
.modal-sub{ text-align:center }
/* Fair history modal table left-aligned for data clarity. */
.modal-fair .fair-table-head, .modal-fair .fair-table-body{ text-align:left }
/* Empty state in fair-history centered. */
.fair-empty{ text-align:center; padding:24px 8px; color:var(--text-mute) }
/* History bar gets a max width + centered scroll for compactness. */
.history-bar-top{
justify-content:center;
max-width:780px;
margin:14px auto 18px;
flex-wrap:nowrap;overflow-x:auto;
}
.history-bar-top::-webkit-scrollbar{display:none}
.history-bar .hist-item{flex-shrink:0}
/* Suffix-mine inline icon container */
.suffix-mine{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;
}
/* Generic .ico utility class — used when an inline SVG bg-image is set */
.ico{ display:inline-block; vertical-align:-2px; }
/* ============================================================
Hitcoin glyph — subtle ambient shimmer everywhere it appears.
The glyph is the inline coin chip shown wherever we used to
write the literal text "BC". Hover gives it a gentle scale +
red halo so it feels alive without being noisy.
============================================================ */
.bc-glyph{
filter:drop-shadow(0 0 4px rgba(221,28,28,.55));
transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
animation:bcGlyphShimmer 4s ease-in-out infinite;
}
.bc-glyph:hover{
transform:scale(1.22) rotate(-8deg);
filter:drop-shadow(0 0 10px rgba(255,56,56,.95));
}
@keyframes bcGlyphShimmer{
0%,100%{filter:drop-shadow(0 0 4px rgba(221,28,28,.45))}
50% {filter:drop-shadow(0 0 8px rgba(255,56,56,.7)) drop-shadow(0 0 2px rgba(255,255,255,.35))}
}
/* Inline variant — slightly wider for headings/labels. */
.bc-glyph-inline{ width:1.05em;height:1.05em;vertical-align:-.18em }
@media (prefers-reduced-motion: reduce){
.bc-glyph{ animation:none }
}
/* ============================================================
v10 USD readout under bet inputs — replaces the cramped ".cs-usd"
that lived inside the now-removed coin-slider-host.
============================================================ */
.bet-usd-readout{
margin-top:8px;
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:700;
font-size:13px;
letter-spacing:.02em;
color:var(--text-mute);
text-align:right;
padding-right:4px;
transition:color .25s ease;
}
.bet-usd-readout:not(:empty){ color:var(--text-dim) }
/* ============================================================
v10 PLINKO landing badge — bloxflip-style per-ball inline
notification. Floats above the slot the ball lands in, color-
coded by outcome, auto-dismisses after ~1.4s. Multiple balls
each spawn their own badge without overlap (z-stack).
============================================================ */
.plinko-land{
position:absolute;
bottom:calc(100% + 6px);
left:50%;
transform:translateX(-50%);
background:linear-gradient(180deg, rgba(28,12,16,.96), rgba(12,6,8,.98));
border:1px solid rgba(255,255,255,.10);
border-radius:10px;
padding:6px 10px;
display:flex;flex-direction:column;align-items:center;gap:1px;
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:800;font-size:11px;letter-spacing:.04em;
color:#fff;
white-space:nowrap;
pointer-events:none;
z-index:6;
box-shadow:0 8px 18px rgba(0,0,0,.5);
animation:plinkoLandIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.plinko-land strong{
font-family:'Sora', sans-serif;
font-weight:800;font-size:14px;letter-spacing:.01em;
}
.plinko-land .plinko-land-pl{ font-size:10.5px; letter-spacing:.04em }
.plinko-land-win{
border-color:rgba(255,82,82,.45);
box-shadow:0 8px 18px rgba(0,0,0,.5), 0 0 18px rgba(255,82,82,.35);
}
.plinko-land-win strong{ color:#28c76f; text-shadow:0 0 10px rgba(40,199,111,.6) }
.plinko-land-win .plinko-land-pl{ color:#ff7a7a }
.plinko-land-loss{
border-color:rgba(221,28,28,.40);
box-shadow:0 8px 18px rgba(0,0,0,.5), 0 0 14px rgba(221,28,28,.30);
}
.plinko-land-loss strong{ color:#ff5252 }
.plinko-land-loss .plinko-land-pl{ color:#ff5252 }
.plinko-land-push strong{ color:#ff5050 }
.plinko-land-push .plinko-land-pl{ color:#ff5050 }
.plinko-land-out{
animation:plinkoLandOut .45s ease forwards;
}
@keyframes plinkoLandIn{
from{ opacity:0; transform:translate(-50%, 6px) scale(.85) }
to { opacity:1; transform:translate(-50%, 0) scale(1) }
}
@keyframes plinkoLandOut{
to{ opacity:0; transform:translate(-50%, -22px) scale(.9) }
}
@media (prefers-reduced-motion: reduce){
.plinko-land{ animation:none; opacity:1 }
.plinko-land-out{ opacity:0; transition:opacity .25s }
}
/* ============================================================
v11 COMING SOON state — used by Affiliate route (and any future
placeholder routes). Centered, glassmorphic card with a slow
pulse on the icon ring + sparkle stars.
============================================================ */
.coming-soon{
margin:32px auto;
max-width:560px;
padding:48px 36px;
text-align:center;
border-radius:24px;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,82,82,.18), transparent 60%),
linear-gradient(165deg, rgba(28,12,16,.92) 0%, rgba(20,8,12,.96) 100%);
border:1px solid rgba(255,82,82,.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 22px 50px rgba(0,0,0,.55),
0 0 60px rgba(255,82,82,.10);
position:relative;
}
.coming-soon-art{
width:96px;height:96px;margin:0 auto 18px;
filter:drop-shadow(0 0 18px rgba(255,82,82,.45));
}
.coming-soon-art svg{ width:100%; height:100%; display:block }
.coming-soon-art .cs-ring{
transform-origin:32px 32px;
animation:csRingSpin 14s linear infinite;
}
@keyframes csRingSpin{ to { transform:rotate(360deg) } }
.coming-soon-art .cs-spark-a{ animation:csSpark 1.6s ease-in-out -0s infinite alternate }
.coming-soon-art .cs-spark-b{ animation:csSpark 1.6s ease-in-out -.4s infinite alternate }
.coming-soon-art .cs-spark-c{ animation:csSpark 1.6s ease-in-out -.8s infinite alternate }
.coming-soon-art .cs-spark-d{ animation:csSpark 1.6s ease-in-out -1.2s infinite alternate }
@keyframes csSpark{ from { opacity:.2 } to { opacity:1 } }
.coming-soon-title{
font-family:'Sora', sans-serif; font-weight:800; font-size:24px;
letter-spacing:.02em; margin-bottom:12px;
background:linear-gradient(180deg, #ffffff 0%, #ffd0d0 65%, #ff5252 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 12px rgba(255,82,82,.30));
}
.coming-soon-sub{
font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; font-size:14px;
color:var(--text-dim); line-height:1.55; margin-bottom:14px;
letter-spacing:.01em;
}
.coming-soon-meta{
font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; font-size:12px;
color:var(--text-mute); line-height:1.5;
letter-spacing:.02em;
}
@media (prefers-reduced-motion: reduce){
.coming-soon-art .cs-ring,
.coming-soon-art .cs-spark-a,
.coming-soon-art .cs-spark-b,
.coming-soon-art .cs-spark-c,
.coming-soon-art .cs-spark-d{ animation:none }
}
/* ============================================================
v11 SLOTS PAYTABLE — collapsible disclosure
Replaces the always-visible giant multiplier grid with a
tap-to-reveal panel that integrates into the slots layout.
When closed: a single clean row shows "Payouts" + chevron.
When open: the existing paytable-v2 grid renders inside.
============================================================ */
.paytable-collapse{
margin-top:18px;
border-radius:14px;
background:linear-gradient(180deg, rgba(12,6,8,.50), rgba(12,6,8,.30));
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:border-color .25s ease, box-shadow .25s ease;
}
.paytable-collapse[open]{
border-color:rgba(255,82,82,.30);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 8px 22px rgba(0,0,0,.35),
0 0 22px rgba(255,82,82,.12);
}
.paytable-summary{
list-style:none;
display:flex;align-items:center;gap:12px;
padding:12px 16px;
cursor:pointer;
user-select:none;
font-family:'Plus Jakarta Sans', sans-serif;
transition:background .2s ease;
}
.paytable-summary::-webkit-details-marker{display:none}
.paytable-summary::marker{content:''}
.paytable-summary:hover{ background:rgba(255,82,82,.06) }
.paytable-summary .ps-icon{
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:8px;
background:linear-gradient(180deg, rgba(255,82,82,.18), rgba(255,82,82,.06));
border:1px solid rgba(255,82,82,.28);
color:#ffd0e8;
flex-shrink:0;
}
.paytable-summary .ps-icon svg{width:16px;height:16px;display:block}
.paytable-summary .ps-label{
font-weight:800;font-size:13px;letter-spacing:.10em;text-transform:uppercase;
color:#fff;
}
.paytable-summary .ps-meta{
font-weight:600;font-size:11.5px;color:var(--text-mute);
letter-spacing:.04em;
margin-left:auto;
}
.paytable-summary .ps-chev{
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;color:var(--text-dim);
transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.paytable-collapse[open] .paytable-summary .ps-chev{ transform:rotate(180deg); color:#ffb0d6 }
/* Inside: tighten the existing .paytable-v2 grid so the open state
is information-dense without feeling cramped. */
.paytable-collapse .paytable-v2{
margin:0;
padding:14px 16px 18px;
background:transparent;
border:0;
box-shadow:none;
animation:paytableReveal .35s cubic-bezier(.16,1,.3,1);
}
.paytable-collapse .paytable-v2 .pt-grid{
gap:10px;
grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.paytable-collapse .paytable-v2 .pt-card{
padding:10px 8px 12px;
border-radius:12px;
}
.paytable-collapse .paytable-v2 .pt-card-name{ font-size:11.5px }
.paytable-collapse .paytable-v2 .pt-card-syms .pt-icon{ width:24px;height:24px }
.paytable-collapse .paytable-v2 .pt-card-mult{ font-size:18px }
.paytable-collapse .paytable-v2 .pt-rarity-badge{
font-size:8.5px; padding:2px 6px; letter-spacing:.06em;
}
.paytable-collapse .paytable-v2 .pt-head{ display:none } /* duplicates the summary */
@keyframes paytableReveal{
0%{ opacity:0; transform:translateY(-6px) }
100%{ opacity:1; transform:translateY(0) }
}
@media (prefers-reduced-motion: reduce){
.paytable-collapse .paytable-v2{ animation:none }
.paytable-summary .ps-chev{ transition:none }
}
@media (max-width:760px){
.paytable-summary .ps-meta{ display:none }
.paytable-collapse .paytable-v2 .pt-grid{
grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
}
}
/* ============================================================
v12 HISTORY MODAL — user's audit_log timeline
============================================================ */
.hist-tabs{
display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;
padding-bottom:12px; border-bottom:1px solid var(--line-2);
}
.hist-tab{
padding:7px 14px; border-radius:9px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:var(--text-dim);
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:700; font-size:11.5px; letter-spacing:.06em;
cursor:pointer;
transition:background .2s, color .2s, border-color .2s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.hist-tab:hover{
background:rgba(255,82,82,.10);
color:#fff;
border-color:rgba(255,82,82,.35);
}
.hist-tab.active{
background:linear-gradient(180deg, rgba(255,82,82,.22), rgba(255,82,82,.10));
color:#fff;
border-color:rgba(255,82,82,.55);
box-shadow:0 0 12px rgba(255,82,82,.20);
}
.hist-table{
background:rgba(12,6,8,.50);
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
overflow:hidden;
}
.hist-table-head{
display:grid;
grid-template-columns:110px 1fr 130px 130px 90px;
gap:10px;
padding:10px 14px;
background:rgba(255,82,82,.06);
border-bottom:1px solid rgba(255,255,255,.06);
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:800; font-size:10.5px; letter-spacing:.10em;
color:var(--text-mute); text-transform:uppercase;
}
.hist-table-body{ max-height:50vh; overflow-y:auto }
/* Scoped to .hist-table-body so the 5-column "Type / Detail / Amount /
Balance / Date" layout doesn't clobber the per-game sidebar `.hist-row`
(3-column "icon / meta / profit"). Without this scope the modal grid
bled into the sidebar list and caused the time + profit overlap the
user reported. */
.hist-table-body .hist-row{
display:grid;
grid-template-columns:110px 1fr 130px 130px 90px;
gap:10px;
padding:11px 14px;
border-bottom:1px solid rgba(255,255,255,.04);
font-family:'Plus Jakarta Sans', sans-serif;
font-size:13px; align-items:center;
transition:background .15s ease;
}
.hist-table-body .hist-row:last-child{ border-bottom:none }
.hist-table-body .hist-row:hover{ background:rgba(255,82,82,.04) }
.hist-kind{
display:flex; align-items:center; gap:8px;
font-weight:700; color:var(--text);
}
.hist-dot{
width:7px; height:7px; border-radius:50%;
flex-shrink:0;
}
.hist-detail{ color:var(--text-dim); font-weight:600 }
.hist-amount{
font-family:'Sora', sans-serif; font-weight:800;
text-align:right;
}
.hist-amount.hist-pos{ color:#28c76f }
.hist-amount.hist-neg{ color:#ff5252 }
.hist-balance{
font-family:'Sora', sans-serif; font-weight:600; font-size:12.5px;
color:var(--text-dim); text-align:right;
}
.hist-date{
color:var(--text-mute); font-weight:600; font-size:11.5px;
text-align:right;
}
.hist-foot{
margin-top:14px;
text-align:center;
font-family:'Plus Jakarta Sans', sans-serif;
font-size:11.5px; color:var(--text-mute);
letter-spacing:.04em;
}
@media (max-width:760px){
.hist-table-head{ display:none }
.hist-table-body .hist-row{
grid-template-columns:1fr 1fr;
grid-template-areas:
"kind amount"
"detail balance"
"date date";
gap:6px;
}
.hist-kind{ grid-area:kind }
.hist-detail{ grid-area:detail; font-size:12px }
.hist-amount{ grid-area:amount }
.hist-balance{ grid-area:balance; font-size:11.5px }
.hist-date{ grid-area:date; text-align:left }
}
/* ============================================================
v12 SETTINGS MODAL — sound, motion, account
============================================================ */
.settings-section{
padding:18px 0;
border-bottom:1px dashed rgba(255,82,82,.10);
}
.settings-section:last-child{ border-bottom:none }
.settings-section-title{
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:800; font-size:11px; letter-spacing:.14em;
text-transform:uppercase;
color:var(--text-mute); margin-bottom:12px;
}
.settings-row{
display:flex; align-items:center; justify-content:space-between;
padding:8px 0; gap:14px;
cursor:pointer;
}
.settings-row.settings-row-stack{
flex-direction:column; align-items:stretch; gap:6px; cursor:default;
}
.settings-row-stack > .settings-row-label{ display:flex; align-items:center; justify-content:space-between }
.settings-row-label{
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:700; font-size:14px;
color:var(--text);
}
.settings-row-meta{
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:600; font-size:12px;
color:var(--text-mute);
margin:0 0 12px;
letter-spacing:.02em;
}
/* Toggle pill (input checkbox visually swapped for a switch). */
.settings-toggle{
position:relative;
width:44px; height:24px;
display:inline-block;
flex-shrink:0;
}
.settings-toggle input{
position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2;
}
.settings-toggle-pill{
position:absolute; inset:0;
border-radius:99px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.10);
transition:background .25s ease, border-color .25s ease;
}
.settings-toggle-pill::after{
content:""; position:absolute;
top:2px; left:2px;
width:18px; height:18px;
border-radius:50%;
background:#fff;
box-shadow:0 1px 4px rgba(0,0,0,.35);
transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.settings-toggle input:checked ~ .settings-toggle-pill{
background:linear-gradient(180deg, var(--pink), var(--pink-deep));
border-color:rgba(255,82,82,.5);
}
.settings-toggle input:checked ~ .settings-toggle-pill::after{
transform:translateX(20px);
background:#fff;
}
/* Range slider */
.settings-range{
flex:1;
-webkit-appearance:none; appearance:none;
height:6px; border-radius:99px;
background:linear-gradient(90deg,
rgba(255,82,82,.6) 0%,
rgba(255,82,82,.6) calc(var(--vol, 55%) * 1%),
rgba(255,255,255,.10) calc(var(--vol, 55%) * 1%),
rgba(255,255,255,.10) 100%);
outline:none;
cursor:pointer;
}
.settings-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff;
border:2px solid var(--pink);
box-shadow:0 0 10px rgba(255,82,82,.55), 0 2px 4px rgba(0,0,0,.3);
cursor:grab;
}
.settings-range::-moz-range-thumb{
width:18px; height:18px; border-radius:50%;
background:#fff; border:2px solid var(--pink);
box-shadow:0 0 10px rgba(255,82,82,.55);
cursor:grab;
}
.settings-range-value{
font-family:'Sora', sans-serif; font-weight:800; font-size:13px;
color:var(--text); min-width:48px; text-align:right;
letter-spacing:.02em;
}
/* Reduce motion (user-toggled) — disables DECORATIVE motion only.
Functional state-transition animations (dice rolling, slot reels,
plinko ball flight) MUST keep playing — without them the player
can't see the result land. The previous blanket `*` rule was
killing everything including the dice roll, so dice snapped to
the result face with no tumble. Now we kill only:
1. infinite-iteration animations (idle bobs, sparkles)
2. transitions on cosmetic-only properties */
html.user-reduce-motion .bg-orb,
html.user-reduce-motion .hero-petal,
html.user-reduce-motion .gh-spark,
html.user-reduce-motion .balance::before,
html.user-reduce-motion .bc-glyph,
html.user-reduce-motion .ico-flame-tiny,
html.user-reduce-motion .ico-mine-tiny,
html.user-reduce-motion .ico-dice-tiny,
html.user-reduce-motion .section-icon,
html.user-reduce-motion .title-burst,
html.user-reduce-motion .coming-soon-art .cs-ring,
html.user-reduce-motion .coming-soon-art .cs-spark-a,
html.user-reduce-motion .coming-soon-art .cs-spark-b,
html.user-reduce-motion .coming-soon-art .cs-spark-c,
html.user-reduce-motion .coming-soon-art .cs-spark-d,
html.user-reduce-motion .dice-cube-wrap,
html.user-reduce-motion .dice-shadow,
html.user-reduce-motion .gh-rocket-grp,
html.user-reduce-motion .gh-rocket-flame,
html.user-reduce-motion .hi-rocket-g,
html.user-reduce-motion .hi-rocket-flame,
html.user-reduce-motion .hi-boom-g,
html.user-reduce-motion .hi-cards-g,
html.user-reduce-motion .hi-gem-g,
html.user-reduce-motion .hi-gem-spark,
html.user-reduce-motion .hi-bomb-g,
html.user-reduce-motion .hi-bomb-fuse,
html.user-reduce-motion .hi-dice-g,
html.user-reduce-motion .hi-trend-g,
html.user-reduce-motion .hi-target-g,
html.user-reduce-motion .hi-arrow-g,
html.user-reduce-motion .hi-push-g{
animation:none !important;
}
/* Toast slide-in/out — keep but shorten */
html.user-reduce-motion .toast{
animation-duration:.15s, .15s !important;
}
/* Plinko peg flash + shimmer — purely decorative */
html.user-reduce-motion .game-card .gc-glow,
html.user-reduce-motion .game-card .gc-sparkle{
display:none !important;
}
/* Modal entrance: snappy not slow */
html.user-reduce-motion .modal{
animation-duration:.15s !important;
}
/* ============================================================
v14 ROW LAYOUT HARDENING — fixes overlap/wrap on every grid-row
pattern that ships in narrow sidebars (per-game history list,
live feed, players-in-round, leaderboard, fairness table, etc).
Common failure mode: `1fr` middle column collapsed when the
right-side amount string was bigger than the row had room for,
so meta text wrapped into two lines and visually overlapped
the profit on the right (per user screenshot).
Pattern applied:
- white-space:nowrap on every meta line (never wrap a label/time)
- text-overflow:ellipsis when overflow does happen
- min-width:0 on the meta column so flex-basis is correct
- flex-shrink:0 + nowrap on the right amount column
============================================================ */
/* per-game history list (sidebar) */
.hist-row .hr-meta{ overflow:hidden }
.hist-row .hr-label{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.hist-row .hr-time { white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.hist-row .hr-profit{ flex-shrink:0;white-space:nowrap;justify-self:end }
/* leaderboard / live-feed sidebar / "players in round" */
.lead-row .lead-meta{ overflow:hidden }
.lead-row .lead-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lead-row .lead-bet { white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lead-row .lead-pay { flex-shrink:0;white-space:nowrap;justify-self:end }
/* live bet feed at top of home + in-game */
.bf-row{ align-items:center }
.bf-row > *{ min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis }
/* "Players in round" panel — keeps name from wrapping into the multi */
.cp-row{ display:grid;grid-template-columns:24px 1fr auto;column-gap:10px;align-items:center }
.cp-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0 }
.cp-bet { white-space:nowrap }
.cp-multi{ flex-shrink:0;white-space:nowrap;justify-self:end }
/* fair-history table rows — also a 3-col grid that gets cramped */
.fair-row > *{ min-width:0 }
.fair-row .fr-mult{ white-space:nowrap }
.fair-row .fr-date{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.fair-row .fr-link{ white-space:nowrap }
/* "Recent activity" feed (act-row) */
.act-row{ align-items:center }
.act-row > *{ min-width:0 }
/* ============================================================
v13 DESIGN POLISH — fixes from screenshot review.
- Replaces the broken modal `::before` glow ring with a clean
multi-stop box-shadow (no corner artifacts)
- Modernizes the close button (X stays, but is now a smaller,
calmer chip with a subtler hover instead of a square frame)
- Modern range slider — flat track, gradient fill, larger
hit area, no clunky native chrome
- Same treatment to the multi-slider thumbs so crash/limbo
target sliders match
============================================================ */
/* ---- Modal: cleaner ring + better depth, no corner artifacts ---- */
.modal{
border:1px solid rgba(255,82,82,.20);
box-shadow:
0 30px 80px rgba(0,0,0,.70),
0 0 0 1px rgba(255,82,82,.14),
0 0 32px -4px rgba(255,82,82,.30),
inset 0 1px 0 rgba(255,255,255,.06);
}
/* ---- Close button: smaller, calmer, refined hover ---- */
.modal-close{
width:30px; height:30px;
top:18px; right:18px;
border-radius:50%;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}
.modal-close::before,
.modal-close::after{
width:11px; height:1.4px;
}
.modal-close:hover{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.18);
color:#fff;
transform:none; /* prior 90° rotate clashed with the glow border */
}
.modal-close:hover::before{ transform:rotate(45deg) scale(1.1) }
.modal-close:hover::after { transform:rotate(-45deg) scale(1.1) }
.modal-close:active{ transform:scale(.92) }
/* ---- Modern range slider — base style for any ---- */
.settings-range,
input[type="range"].cs-range,
input[type="range"].ms-range{
-webkit-appearance:none; appearance:none;
width:100%; height:18px;
background:transparent;
cursor:pointer;
outline:none;
}
/* WebKit track */
.settings-range::-webkit-slider-runnable-track{
height:6px; border-radius:99px;
background:rgba(255,255,255,.10);
}
/* The fill is rendered as a gradient on the track in v9 — for v13 we
keep the same look but normalize across browsers. The `--vol` var is
set inline by the JS so the fill width tracks the value. */
.settings-range{
background:linear-gradient(90deg,
var(--pink) 0%,
var(--pink) calc(var(--vol, 55%)),
rgba(255,255,255,.10) calc(var(--vol, 55%)),
rgba(255,255,255,.10) 100%) !important;
border-radius:99px;
height:6px;
}
.settings-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:16px; height:16px; border-radius:50%;
background:#fff;
border:2px solid var(--pink);
margin-top:0;
box-shadow:
0 0 0 4px rgba(255,82,82,.18),
0 0 12px rgba(255,82,82,.45),
0 2px 4px rgba(0,0,0,.4);
cursor:grab;
transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.settings-range::-moz-range-thumb{
width:16px; height:16px; border-radius:50%;
background:#fff; border:2px solid var(--pink);
box-shadow:
0 0 0 4px rgba(255,82,82,.18),
0 0 12px rgba(255,82,82,.45);
cursor:grab;
transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.settings-range::-moz-range-track{
background:transparent; height:6px;
}
.settings-range:hover::-webkit-slider-thumb{
transform:scale(1.10);
box-shadow:
0 0 0 5px rgba(255,82,82,.24),
0 0 18px rgba(255,82,82,.65),
0 2px 4px rgba(0,0,0,.4);
}
.settings-range:active::-webkit-slider-thumb{
cursor:grabbing;
transform:scale(1.18);
}
.settings-range:focus-visible::-webkit-slider-thumb{
outline:2px solid var(--pink);
outline-offset:3px;
}
/* ---- Multi-slider (crash auto / limbo target) thumb modernization ---- */
.ms-crash .ms-range::-webkit-slider-thumb,
.ms-limbo .ms-range::-webkit-slider-thumb{
appearance:none; -webkit-appearance:none;
width:18px; height:18px; border-radius:50%;
border:2px solid #fff;
transform:none !important;
margin-top:-7px;
box-shadow:
0 0 0 4px rgba(255,255,255,.10),
0 0 14px rgba(255,255,255,.30),
0 3px 6px rgba(0,0,0,.4) !important;
}
.ms-crash .ms-range::-webkit-slider-thumb{
background:radial-gradient(circle at 35% 30%, #ffd0e8, #dd1c1c 60%, #a01818);
}
.ms-limbo .ms-range::-webkit-slider-thumb{
background:radial-gradient(circle at 35% 30%, #ffe0e0, #ff5050 55%, #7a0e0e);
}
.ms-crash .ms-range::-moz-range-thumb,
.ms-limbo .ms-range::-moz-range-thumb{
width:18px; height:18px; border-radius:50%;
border:2px solid #fff;
transform:none !important;
}
.ms-crash .ms-range::-moz-range-thumb{
background:radial-gradient(circle at 35% 30%, #ffd0e8, #dd1c1c 60%, #a01818);
}
.ms-limbo .ms-range::-moz-range-thumb{
background:radial-gradient(circle at 35% 30%, #ffe0e0, #ff5050 55%, #7a0e0e);
}
.ms-crash .ms-range:active::-webkit-slider-thumb,
.ms-limbo .ms-range:active::-webkit-slider-thumb{
transform:scale(1.18) !important;
}
/* ============================================================
v15 DESIGN UPGRADES — autonomous polish pass
- Section-title icon vertical alignment (em-relative, scales w/ text)
- Latest-big-wins cards: refined gradient, multiplier chip, hover lift
- Game cards: subtle "PLAY ▸" badge that fades in on hover
============================================================ */
/* Section title icon — was using a hardcoded `vertical-align: -7px` that
didn't scale with font size. Switched to em-relative so the bob-rotation
animation lands centered against the text baseline at any heading size. */
.section-icon,
.section-icon--burst{
vertical-align:-.22em;
width:.95em; height:.95em;
}
.title-burst{
vertical-align:-.22em;
width:1em; height:1em;
}
/* ---- Latest big wins cards — refined ---- */
.big-wins{ gap:12px }
.bw-card{
position:relative;
padding:13px 14px;
background:
linear-gradient(165deg, rgba(28,12,16,.70), rgba(20,8,12,.92));
border:1px solid rgba(255,82,82,.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 4px 12px rgba(0,0,0,.30);
isolation:isolate;
overflow:hidden;
}
.bw-card::before{
/* faint pink glow that intensifies on hover */
content:""; position:absolute; inset:-1px;
background:radial-gradient(140% 100% at 100% 0%, rgba(255,82,82,.20), transparent 60%);
pointer-events:none; z-index:-1;
opacity:.6; transition:opacity .25s ease;
}
.bw-card:hover{
transform:translateY(-3px);
border-color:rgba(255,82,82,.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 12px 28px rgba(0,0,0,.45),
0 0 22px rgba(255,82,82,.22);
}
.bw-card:hover::before{ opacity:1 }
.bw-avatar{
width:42px; height:42px;
font-size:18px;
border:1.5px solid rgba(255,255,255,.18);
box-shadow:
0 0 0 3px rgba(255,82,82,.10),
0 4px 10px rgba(0,0,0,.4);
flex-shrink:0;
}
.bw-info{ min-width:0 }
.bw-info .bw-name{
font-weight:800; font-size:13px; letter-spacing:.01em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bw-info .bw-game{
font-weight:700; font-size:10px;
text-transform:uppercase; letter-spacing:.10em;
color:var(--pink-soft);
}
.bw-amount{
font-family:'Sora',sans-serif; font-weight:800;
font-size:16px; letter-spacing:.01em;
color:#ff5252;
text-shadow:0 0 12px rgba(255,82,82,.40);
white-space:nowrap;
flex-shrink:0;
}
/* ---- Game card hover hint ----
A small "PLAY ▸" chip that fades in on hover so users new to the site
know the colorful card is a click target. Sits above the existing
gc-glow trail and behind the bubble pricing chips. */
.game-card .gc-play-hint{
position:absolute;
top:14px; right:14px;
display:inline-flex; align-items:center; gap:5px;
padding:5px 11px;
border-radius:99px;
background:rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.20);
color:#fff;
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:800; font-size:10px;
letter-spacing:.10em; text-transform:uppercase;
pointer-events:none;
opacity:0;
transform:translateY(-4px);
transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
z-index:5;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.game-card:hover .gc-play-hint{
opacity:1;
transform:translateY(0);
}
.game-card .gc-play-hint::after{
content:"▸";
font-size:11px;
margin-left:1px;
}
@media (prefers-reduced-motion: reduce){
.game-card .gc-play-hint{ transition:opacity .15s ease }
}
/* ============================================================
v16 MODAL CONSISTENCY PASS
- Unify modal-title sizes (was a mix of 26/30px) → 26px
- Tighten padding so titles don't dominate (34→28 / 32→28)
- Safe max-height with vertical scroll for tall modals
- Tighten the gap between title and sub
- Modal-close pinned upper-right with breathing room
============================================================ */
.modal{
/* Tighter shell — was 34px 32px which made every modal feel like a
blog post. 28px all-around reads as a focused card. */
padding:28px 28px;
max-height:min(90vh, 880px);
}
.modal-title{
font-size:24px; /* unify (was 26 OR 30) — premium casino weight */
letter-spacing:.01em;
margin-bottom:6px;
}
.modal-sub{
font-size:13px;
margin-bottom:20px;
line-height:1.5;
}
/* Close button: bigger tap target on touch, same visual size */
.modal-close{
top:14px; right:14px;
width:32px; height:32px;
}
/* Slimmer scrollbar inside the modal body when content overflows */
.modal::-webkit-scrollbar{ width:8px }
.modal::-webkit-scrollbar-track{ background:transparent }
.modal::-webkit-scrollbar-thumb{
background:rgba(255,82,82,.35);
border-radius:8px;
border:2px solid transparent;
background-clip:padding-box;
}
/* Mobile padding refinement — phones can't afford 28px gutters */
@media (max-width:560px){
.modal{
padding:20px 18px;
border-radius:18px;
max-height:calc(100vh - 24px);
}
.modal-title{ font-size:20px }
.modal-sub{ font-size:12.5px; margin-bottom:14px }
}
/* ============================================================
ARCADE POLISH v1 — FOUNDATIONS
Layered on top of the existing design system. Every rule here
is additive (raises specificity or layers on existing classes
via :hover/::before/::after). Nothing existing is replaced —
all original transitions/animations still work. Game logic,
API contract, and balance rendering are not touched.
============================================================ */
:root{
/* Unified motion language — every animated surface uses these. */
--arcade-spring: cubic-bezier(.34, 1.56, .64, 1);
--arcade-out: cubic-bezier(.16, 1, .3, 1);
--arcade-in: cubic-bezier(.7, 0, .84, 0);
--arcade-snap: cubic-bezier(.2, .8, .2, 1);
--dur-fast: .14s;
--dur-base: .28s;
--dur-slow: .55s;
--dur-flow: .95s;
/* Layered glow tokens — any surface can reuse the brand stack. */
--glow-pink: 0 0 24px rgba(221,28,28,.45), 0 0 60px rgba(221,28,28,.18);
--glow-orange: 0 0 24px rgba(255,56,56,.42), 0 0 60px rgba(255,56,56,.16);
--glow-violet: 0 0 24px rgba(122,14,14,.45), 0 0 60px rgba(122,14,14,.18);
--glow-gold: 0 0 28px rgba(255,200,80,.55), 0 0 70px rgba(255,168,0,.22);
--glow-green: 0 0 22px rgba(221,28,28,.45), 0 0 60px rgba(221,28,28,.16);
--glow-red: 0 0 24px rgba(221,28,28,.55), 0 0 60px rgba(221,28,28,.18);
/* Depth stack — multiplicative shadow for cards. */
--depth-1: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.4);
--depth-2: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5);
--depth-3: inset 0 1px 0 rgba(255,255,255,.09), 0 30px 70px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.55);
/* Iridescent border conic — used as ::before mask on premium cards. */
--grad-iris:
conic-gradient(from var(--ang, 0turn),
rgba(221,28,28,.7) 0%, rgba(255,56,56,.7) 18%,
rgba(255,217,0,.55) 32%, rgba(122,14,14,.7) 56%,
rgba(118,228,255,.55) 72%, rgba(221,28,28,.7) 100%);
}
/* CSS custom-property registration so we can animate the conic angle. */
@property --ang { syntax:''; inherits:false; initial-value:0turn }
/* ----- BUTTONS — magnetic-spring upgrade. Existing :hover lift kept;
we add a faster spring on press release, a brighter focus ring,
and a subtle inner-rim glow that comes alive on hover. ----- */
.btn{
transition:
transform var(--dur-base) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out),
border-color var(--dur-base) var(--arcade-out),
color var(--dur-base) var(--arcade-out),
filter var(--dur-fast) var(--arcade-out);
isolation:isolate;
}
.btn::after{
content:""; position:absolute; inset:0; border-radius:inherit;
pointer-events:none; opacity:0;
background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.18), transparent 60%);
transition:opacity var(--dur-base) var(--arcade-out);
z-index:1;
}
.btn:hover::after{opacity:1}
.btn:active{
transform:translateY(0) scale(.94);
filter:brightness(1.06) saturate(1.12);
transition-duration: var(--dur-fast);
}
.btn:focus-visible{
outline:none;
box-shadow:
0 0 0 2px rgba(0,0,0,.6),
0 0 0 4px rgba(221,28,28,.85),
0 0 28px rgba(221,28,28,.45);
}
.btn-primary{ background-size:200% 200%; }
.btn-primary:hover{ background-position: 50% 100%; }
.btn-primary:active{ transform:translateY(1px) scale(.96) }
.btn-deposit{ background-size:200% 200%; }
.btn-deposit:hover{ background-position:50% 100%; }
.btn-cashout{ background-size:200% 200%; }
.btn-cashout:hover{ background-position:50% 100%; }
.btn-cashout:not(:disabled){ animation: cashoutPulse 2.4s ease-in-out infinite; }
@keyframes cashoutPulse{
0%,100%{ box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 0 rgba(201,121,0,.4),
0 4px 12px rgba(255,168,0,.45),
0 0 0 1px rgba(255,168,0,.2),
0 0 18px rgba(255,168,0,.25); }
50%{ box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -2px 0 rgba(201,121,0,.45),
0 6px 16px rgba(255,168,0,.6),
0 0 0 1px rgba(255,168,0,.35),
0 0 38px rgba(255,200,80,.55); }
}
/* ----- CARDS — universal depth + iridescent rim on hover (opt-in via .arc-card). ----- */
.arc-card{
position:relative;
border-radius:18px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.06);
box-shadow: var(--depth-1);
transition:
transform var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out),
border-color var(--dur-base) var(--arcade-out);
isolation:isolate;
}
.arc-card::before{
content:""; position:absolute; inset:0; border-radius:inherit;
padding:1px; pointer-events:none;
background: var(--grad-iris);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity:0;
transition:opacity var(--dur-base) var(--arcade-out);
animation: irisSpin 9s linear infinite;
}
.arc-card:hover{
transform: translateY(-3px);
box-shadow: var(--depth-2), var(--glow-pink);
border-color: rgba(221,28,28,.35);
}
.arc-card:hover::before{ opacity:.85; }
@keyframes irisSpin{ to{ --ang: 1turn } }
/* ----- LIVE BETS / leaderboards — gentle row-hover + win-row gold flash. ----- */
.bf, .bw, .lead-row{
transition:
transform var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out);
}
.bf:hover, .bw:hover, .lead-row:hover{
transform: translateY(-2px) scale(1.005);
background: rgba(255,255,255,.04);
box-shadow: var(--depth-1), 0 0 0 1px rgba(221,28,28,.18);
}
@keyframes goldFlash{
0%{ background: rgba(255,200,80,.0); }
20%{ background: rgba(255,200,80,.18); }
100%{ background: rgba(255,200,80,.0); }
}
.bf.bf-win-flash{ animation: goldFlash 1.4s ease-out 1; }
/* ----- GAME TILES — 3D parallax tilt + animated halo.
IMPORTANT: preserve-3d is required so the .gc-name/.gc-art/.gc-tag/.gc-bubble
translateZ children extrude into 3D space when .is-tilting is set. NO
will-change here — see note in the v4 .game-card block. */
.game-card{
transition:
transform var(--dur-slow) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
filter var(--dur-base) var(--arcade-out);
transform-style: preserve-3d;
}
.game-card::after{
content:""; position:absolute; inset:-2px; border-radius:inherit;
pointer-events:none; opacity:0; z-index:-1;
background: var(--grad-iris);
filter: blur(18px);
transition: opacity var(--dur-base) var(--arcade-out);
animation: irisSpin 9s linear infinite;
}
.game-card:hover::after{ opacity:.55; }
.game-card:hover{
transform: perspective(900px) translateY(-6px) rotateX(2deg) rotateY(-3deg) scale(1.012);
filter: brightness(1.06) saturate(1.08);
}
.game-card:active{
transform: perspective(900px) translateY(-2px) rotateX(0deg) rotateY(0deg) scale(.99);
transition-duration: var(--dur-fast);
}
/* ----- BALANCE — stronger pulse on credit. ----- */
.balance.bump{ animation: balanceBumpV2 .65s var(--arcade-spring); }
@keyframes balanceBumpV2{
0% { transform:scale(1); box-shadow:0 0 16px rgba(221,28,28,.22) }
35% { transform:scale(1.16); box-shadow:0 0 0 8px rgba(221,28,28,.18), var(--glow-pink) }
70% { transform:scale(.98); box-shadow:0 0 0 0 rgba(221,28,28,0), var(--glow-pink) }
100% { transform:scale(1); box-shadow:0 0 16px rgba(221,28,28,.22) }
}
/* ----- TOPBAR — subtle scroll-tightening (only when scrolled). ----- */
.topbar{
transition: padding var(--dur-base) var(--arcade-out), background var(--dur-base) var(--arcade-out), box-shadow var(--dur-base) var(--arcade-out);
}
.topbar.scrolled{
padding-top:6px; padding-bottom:6px;
background: rgba(15,8,10,.92);
box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(221,28,28,.08);
}
/* ----- TOAST — entrance/exit symmetry + soft drop-shadow. ----- */
.toast{
transform: translateY(-8px) scale(.96);
opacity: 0;
transition:
transform var(--dur-base) var(--arcade-spring),
opacity var(--dur-base) var(--arcade-out);
box-shadow: var(--depth-2);
}
.toast.show{ transform: translateY(0) scale(1); opacity:1; }
.toast.toast-win{ box-shadow: var(--depth-2), var(--glow-gold); }
.toast.toast-loss{ box-shadow: var(--depth-2), var(--glow-red); }
/* ----- MODAL — backdrop blur scale-in + symmetrical exit. ----- */
.modal-backdrop{
transition: opacity var(--dur-base) var(--arcade-out), backdrop-filter var(--dur-base) var(--arcade-out);
}
.modal{
transition:
transform var(--dur-base) var(--arcade-spring),
opacity var(--dur-base) var(--arcade-out);
box-shadow: var(--depth-3), 0 0 60px rgba(221,28,28,.12);
}
.modal-backdrop.show .modal{ transform: scale(1); opacity:1; }
/* ----- CHAT MESSAGE — slide+fade entry. ----- */
.cmsg{ animation: cmsgInV2 .45s var(--arcade-spring); }
@keyframes cmsgInV2{
from{ opacity:0; transform: translateX(-12px) scale(.98); filter: blur(2px); }
to { opacity:1; transform: translateX(0) scale(1); filter: blur(0); }
}
/* ----- INPUT focus ring — unified. ----- */
input:not([type=range]):focus-visible,
textarea:focus-visible,
select:focus-visible{
outline:none;
box-shadow:
0 0 0 2px rgba(0,0,0,.4),
0 0 0 3px rgba(221,28,28,.65),
0 0 22px rgba(221,28,28,.35) !important;
}
/* ----- SCROLLBAR — themed, slim, gradient. ----- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(255,82,82,.45), rgba(122,14,14,.45));
border-radius:10px;
border:2px solid transparent;
background-clip: padding-box;
transition: background var(--dur-base) var(--arcade-out);
}
*::-webkit-scrollbar-thumb:hover{
background: linear-gradient(180deg, rgba(255,82,82,.75), rgba(122,14,14,.75));
background-clip: padding-box;
}
html{ scrollbar-width: thin; scrollbar-color: rgba(255,82,82,.45) transparent; }
/* ----- TEXT-SELECTION. ----- */
::selection{ background: rgba(221,28,28,.35); color:#fff; }
/* ----- WIN PARTICLE BURST — fired by JS via `.fx-win-burst > i`. ----- */
.fx-win-burst{ position:fixed; pointer-events:none; z-index:500; width:0; height:0; }
.fx-win-burst > i{
position:absolute; left:0; top:0;
width:8px; height:8px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, #fff, var(--gold) 60%, var(--orange-deep));
box-shadow: 0 0 14px var(--gold);
transform: translate(-50%, -50%);
animation: winBurst 1.1s var(--arcade-out) forwards;
}
@keyframes winBurst{
0% { opacity:0; transform: translate(-50%,-50%) scale(.2); }
18% { opacity:1; }
100% { opacity:0; transform:
translate(calc(-50% + var(--bx,0px)), calc(-50% + var(--by,0px)))
scale(.4); }
}
/* ----- REDUCED MOTION. ----- */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .001s !important;
animation-iteration-count: 1 !important;
transition-duration: .08s !important;
}
.btn-cashout:not(:disabled){ animation: none !important; }
.arc-card::before, .game-card::after{ animation: none !important; }
body::before{ background: none; }
}
/* ============================================================
ARCADE POLISH v1 — END FOUNDATIONS
============================================================ */
/* ============================================================
ARCADE POLISH v2 — TOPBAR / HERO / LIVE BETS
============================================================ */
/* ----- LOGO — soft halo + click squish. Layered on .logo (the brand link). */
.logo{
position:relative;
transition:
transform var(--dur-base) var(--arcade-spring),
filter var(--dur-base) var(--arcade-out);
}
.logo::after{
content:""; position:absolute; inset:-12px; border-radius:50%;
background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(221,28,28,.25), transparent 70%);
pointer-events:none; opacity:.6; z-index:-1;
filter: blur(10px);
animation: logoHalo 4.6s ease-in-out infinite;
}
@keyframes logoHalo{
0%,100%{ opacity:.45; transform:scale(1) }
50% { opacity:.85; transform:scale(1.08) }
}
.logo:hover{ transform: translateY(-1px) rotate(-2deg) scale(1.04); filter: brightness(1.1); }
.logo:active{ transform: scale(.96); transition-duration: var(--dur-fast); }
/* ----- TOPBAR — drop a faint top-rim highlight + iridescent underline. */
.topbar{
position:sticky; top:0;
background:
linear-gradient(180deg, rgba(28,12,16,.70), rgba(15,8,10,.80)),
rgba(20,8,12,.85);
}
.topbar::after{
content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background: linear-gradient(90deg,
transparent, rgba(221,28,28,.55) 22%, rgba(255,56,56,.45) 50%,
rgba(122,14,14,.55) 78%, transparent);
opacity:.6; pointer-events:none;
animation: topbarRim 7s linear infinite;
background-size: 200% 100%;
}
@keyframes topbarRim{
from{ background-position: 0 0 } to{ background-position: 200% 0 }
}
/* ----- BALANCE PILL — tighter inner bevel + brighter shine. */
.balance{
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
linear-gradient(135deg,rgba(221,28,28,.22),rgba(255,56,56,.08));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 0 0 1px rgba(221,28,28,.35),
0 6px 18px rgba(221,28,28,.25),
var(--glow-pink);
}
.balance:hover{ filter: brightness(1.06); }
/* ----- ONLINE PILL — same depth treatment, green theme. */
.online-pill{
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
linear-gradient(135deg, rgba(221,28,28,.16), rgba(221,28,28,.04));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 0 0 1px rgba(221,28,28,.35),
0 6px 18px rgba(221,28,28,.18),
var(--glow-green);
}
/* ----- HERO — aurora aura + parallax-friendly inner glow. */
.hero{
position:relative;
isolation:isolate;
background:
radial-gradient(ellipse at 85% 5%, rgba(221,28,28,.28), transparent 55%),
radial-gradient(ellipse at 5% 95%, rgba(160,24,24,.28), transparent 55%),
radial-gradient(ellipse at 50% 50%, rgba(255,56,56,.10), transparent 70%),
linear-gradient(135deg, var(--surface), var(--bg-2));
box-shadow: var(--depth-3), 0 0 80px rgba(221,28,28,.12);
}
.hero::after{
/* slow auroral sheen across the whole panel */
content:""; position:absolute; inset:-1px; border-radius:inherit;
background: linear-gradient(110deg,
transparent 35%, rgba(255,82,82,.18) 47%, rgba(255,217,128,.10) 53%, transparent 65%);
background-size: 250% 100%;
animation: heroAurora 8s linear infinite;
pointer-events:none; mix-blend-mode: screen;
z-index: 0;
}
@keyframes heroAurora{ from{ background-position: 200% 0 } to{ background-position: -100% 0 } }
.hero > *{ position:relative; z-index:1; }
.hero-title{
letter-spacing:-.5px;
text-shadow: 0 0 24px rgba(255,82,82,.4), 0 0 48px rgba(122,14,14,.18);
}
.title-pop{
background: linear-gradient(135deg, #ffe0e0 0%, var(--pink) 35%, var(--pink-deep) 60%, var(--gold) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
background-size: 200% 200%;
animation: titleShift 6s ease-in-out infinite;
}
@keyframes titleShift{
0%,100%{ background-position: 0% 50% }
50% { background-position: 100% 50% }
}
.hero-balance{
/* Layered depth so it pops off the hero panel. */
box-shadow:
var(--depth-2),
inset 0 1px 0 rgba(255,255,255,.1),
0 0 40px rgba(221,28,28,.12);
transition: transform var(--dur-base) var(--arcade-out), box-shadow var(--dur-base) var(--arcade-out);
}
.hero-balance:hover{
transform: translateY(-2px);
box-shadow:
var(--depth-3),
inset 0 1px 0 rgba(255,255,255,.14),
0 0 60px rgba(221,28,28,.22),
var(--glow-pink);
}
/* Counter-up animation hook — fired by JS by toggling .hb-counting on the number. */
.hb-num.hb-counting{
animation: hbCount .9s var(--arcade-out);
}
@keyframes hbCount{
0% { transform: translateY(8px); filter: blur(4px); opacity:.6 }
100% { transform: translateY(0); filter: blur(0); opacity:1 }
}
/* ----- LIVE BETS panel — stronger frame + animated tab indicator. */
.live-bets{
position:relative;
border-radius: 22px;
box-shadow: var(--depth-2), 0 0 50px rgba(221,28,28,.06);
}
.bf-tab{
position:relative;
transition:
color var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out),
transform var(--dur-fast) var(--arcade-spring);
}
.bf-tab:hover{ transform: translateY(-1px); }
.bf-tab.active{
background: linear-gradient(180deg, rgba(221,28,28,.30), rgba(255,56,56,.18));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 4px 14px rgba(221,28,28,.35),
0 0 0 1px rgba(221,28,28,.45);
}
.bf-tab.active::after{
content:""; position:absolute; left:14%; right:14%; bottom:-6px; height:2px;
border-radius:2px;
background: linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);
filter: drop-shadow(0 0 6px var(--pink));
}
/* ----- LIVE BET ROW — staggered entry + win/loss accent stripe. */
.bf-row{
position:relative;
animation: bfRowIn .55s var(--arcade-spring) backwards;
transition:
transform var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out);
}
@keyframes bfRowIn{
from{ opacity:0; transform: translateY(-10px) scale(.98); filter: blur(3px); }
to { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Stagger the first 8 rows for a satisfying intro cascade */
.bf-row:nth-child(1){ animation-delay:.02s }
.bf-row:nth-child(2){ animation-delay:.06s }
.bf-row:nth-child(3){ animation-delay:.10s }
.bf-row:nth-child(4){ animation-delay:.14s }
.bf-row:nth-child(5){ animation-delay:.18s }
.bf-row:nth-child(6){ animation-delay:.22s }
.bf-row:nth-child(7){ animation-delay:.26s }
.bf-row:nth-child(8){ animation-delay:.30s }
.bf-row:not(.bf-head)::before{
/* Color accent stripe on the leading edge — themed by win/loss. */
content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px;
border-radius:0 3px 3px 0;
background: rgba(255,255,255,.06);
transition: background var(--dur-base) var(--arcade-out), box-shadow var(--dur-base) var(--arcade-out);
}
.bf-row:not(.bf-head):hover{
transform: translateX(2px);
background: rgba(255,255,255,.04);
box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(221,28,28,.18);
}
/* Win row: green stripe + faint glow */
.bf-row:has(.bf-multi-win)::before,
.bf-row:has(.bf-win)::before{
background: linear-gradient(180deg, var(--green), #28c76f);
box-shadow: 0 0 12px rgba(221,28,28,.55);
}
/* Loss row: red stripe */
.bf-row:has(.bf-multi-loss)::before,
.bf-row:has(.bf-loss)::before{
background: linear-gradient(180deg, var(--red), #a01818);
box-shadow: 0 0 10px rgba(221,28,28,.45);
}
/* New row pop: layer goldFlash from foundations on top for high-multi wins. */
.bf-row.bf-row-jackpot{
animation: bfRowJackpot 1.6s var(--arcade-out) 1;
}
@keyframes bfRowJackpot{
0% { background: rgba(255,200,80,.28); box-shadow: inset 0 0 0 1px rgba(255,200,80,.55), var(--glow-gold); }
60% { background: rgba(255,200,80,.10); }
100% { background: rgba(255,255,255,.0); box-shadow: none; }
}
/* ----- BF HEADER row — lock it stronger so the live data feels framed. */
.bf-row.bf-head{
position: sticky; top: 0; z-index: 2;
backdrop-filter: blur(8px);
background: linear-gradient(180deg, rgba(15,8,10,.75), rgba(15,8,10,.55));
border-bottom: 1px solid rgba(221,28,28,.18);
}
/* ----- BF user link — magnetic feel on the avatar+name. */
[data-user-link]{
cursor: pointer;
transition: transform var(--dur-fast) var(--arcade-spring), color var(--dur-fast) var(--arcade-out);
}
[data-user-link]:hover{ transform: translateY(-1px); color: #ffe0e0; }
/* ============================================================
ARCADE POLISH v2 — END
============================================================ */
/* ============================================================
ARCADE POLISH v3 — GAME TILES + SIDEBAR NAV
Layered on top of the v4 game-card system (the tilt + glow
logic at line ~7799). Adds badge polish, multiplier bubble
float, press-pop, and the iridescent active sidebar indicator.
============================================================ */
/* ----- GAME-CARD BADGES (POPULAR / NEW RELEASE / NEW) — shimmer + lift.
IMPORTANT: do NOT change position; the originals are position:absolute
anchored to bottom-left. We only enhance shadow + transition + add a
shimmer pseudo-element that stays inside the badge. ----- */
.game-card .gc-tag{
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
0 4px 12px rgba(0,0,0,.35);
transition:
box-shadow var(--dur-base) var(--arcade-out),
filter var(--dur-base) var(--arcade-out);
}
.game-card .gc-tag::after{
content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
transform: skewX(-22deg);
pointer-events:none;
}
.game-card:hover .gc-tag{
filter: brightness(1.12) saturate(1.1);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 6px 16px rgba(0,0,0,.45),
0 0 14px rgba(255,255,255,.18);
}
.game-card:hover .gc-tag::after{
animation: gcTagShine .9s var(--arcade-out) 1;
}
@keyframes gcTagShine{
to{ left: 160%; }
}
/* ----- GAME-CARD multiplier bubbles (2.0×, 23.2×, 100×) — extra glow only.
The originals are position:absolute with their own bubbleFloat keyframe;
we layer shadow polish without touching position or animation. ----- */
.game-card .gc-bubble{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 6px 16px rgba(0,0,0,.4),
0 0 18px rgba(255,255,255,.18);
transition: filter var(--dur-base) var(--arcade-out);
}
.game-card:hover .gc-bubble{
filter: brightness(1.12) saturate(1.1);
}
/* ----- GAME-CARD title — gradient sweep on hover. ----- */
.game-card .gc-name{
background-size: 200% 100%;
background-position: 0% 50%;
transition: background-position var(--dur-slow) var(--arcade-out);
}
.game-card:hover .gc-name{ background-position: 100% 50%; }
/* ----- GAME-CARD pressed (post-click) burst hook — JS toggles .gc-pressed. ----- */
.game-card.gc-pressed{
animation: gcPress .55s var(--arcade-spring);
}
@keyframes gcPress{
0% { transform: perspective(900px) scale(1) rotateX(0) rotateY(0) }
35% { transform: perspective(900px) scale(.97) rotateX(0) rotateY(0) }
100% { transform: perspective(900px) scale(1) rotateX(0) rotateY(0) }
}
/* ----- SIDEBAR NAV LINK — iridescent active indicator + magnetic hover. ----- */
.sb-link{
position:relative;
isolation:isolate;
transition:
background var(--dur-base) var(--arcade-out),
color var(--dur-base) var(--arcade-out),
transform var(--dur-base) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out);
}
.sb-link::after{
content:""; position:absolute; left:6px; right:6px; bottom:2px; height:1px;
background: linear-gradient(90deg, transparent, rgba(221,28,28,.55), transparent);
opacity:0;
transition: opacity var(--dur-base) var(--arcade-out);
pointer-events:none;
}
.sb-link:hover{
transform: translateX(6px);
box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(221,28,28,.18);
}
.sb-link:hover::after{ opacity:1; }
.sb-link.active{
background: linear-gradient(90deg, rgba(221,28,28,.18), rgba(255,56,56,.06) 60%, transparent);
color: #ffe0e0;
box-shadow:
0 6px 18px rgba(0,0,0,.4),
0 0 0 1px rgba(221,28,28,.4),
inset 0 1px 0 rgba(255,255,255,.08);
}
.sb-link.active::before{
content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, var(--pink), var(--orange));
box-shadow: 0 0 14px rgba(221,28,28,.7);
}
.sb-link.active::after{ opacity:1; }
/* ----- SIDEBAR ICONS — wobble on active. ----- */
.sb-link.active .sb-icon{
animation: sbIconWobble 3.2s ease-in-out infinite;
}
@keyframes sbIconWobble{
0%,100%{ transform: scale(1.06) rotate(0deg) }
25% { transform: scale(1.10) rotate(-3deg) }
75% { transform: scale(1.10) rotate( 3deg) }
}
/* ----- SIDEBAR BADGES (HOT / NEW) — pulse. ----- */
.sb-hot{ animation: sbBadgeHot 1.8s ease-in-out infinite; }
.sb-new{ animation: sbBadgeNew 2.2s ease-in-out infinite; }
@keyframes sbBadgeHot{
0%,100%{ box-shadow: 0 0 0 0 rgba(221,28,28,.0); }
50% { box-shadow: 0 0 0 6px rgba(221,28,28,.0), 0 0 14px rgba(221,28,28,.55); }
}
@keyframes sbBadgeNew{
0%,100%{ box-shadow: 0 0 0 0 rgba(221,28,28,.0); }
50% { box-shadow: 0 0 12px rgba(221,28,28,.55); }
}
/* ============================================================
ARCADE POLISH v3 — END
============================================================ */
/* ============================================================
ARCADE POLISH v4 — CRASH + MINES
Layers on the existing rich animation system. Only enhances:
no replacement of the rocket fly/explode keyframes.
============================================================ */
/* ----- CRASH: multiplier text — slow pulse during flight (drum-roll feel). ----- */
.crash-board[data-flying="1"] .crash-multiplier:not(.crashed):not(.locked):not(.countdown){
animation: crashMultiBeat 1.6s ease-in-out infinite;
}
@keyframes crashMultiBeat{
0%,100%{ filter: drop-shadow(0 0 22px rgba(221,28,28,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.65)); }
50% { filter: drop-shadow(0 0 36px rgba(255,200,80,.7)) drop-shadow(0 14px 24px rgba(0,0,0,.7)); }
}
/* ----- CRASH: board frame — iridescent rim on hover that fades during flight
so the player isn't distracted, then re-engages on crash for drama. ----- */
.crash-board{
position:relative;
isolation:isolate;
box-shadow: var(--depth-3), 0 0 60px rgba(221,28,28,.10);
}
.crash-board::before{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
background: var(--grad-iris);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; pointer-events:none;
transition: opacity var(--dur-base) var(--arcade-out);
animation: irisSpin 12s linear infinite;
z-index: 1;
}
.crash-board:hover::before,
.crash-board.shake::before{ opacity: .8; }
/* ----- CRASH: bet button — give it more presence pre-launch. ----- */
.crash-bet-btn{
font-size:15px;
letter-spacing:.16em;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
/* ----- CRASH: phase pill state pulses (betting / flight). ----- */
.crash-phase-pill[data-phase="betting"] .cph-dot{
animation: phaseDotBlink 1s ease-in-out infinite;
}
@keyframes phaseDotBlink{
0%,100%{ opacity:1; box-shadow: 0 0 10px currentColor; }
50% { opacity:.55; box-shadow: 0 0 4px currentColor; }
}
/* ----- CRASH: stars / sky get a tiny extra parallax depth on flight ----- */
.crash-board[data-flying="1"] .crash-sky{
filter: brightness(1.06) saturate(1.1);
transition: filter var(--dur-slow) var(--arcade-out);
}
/* ----- MINES: grid frame — rim glow + iridescent border on hover. ----- */
.mines-grid{
position:relative;
isolation:isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 40px rgba(0,0,0,.5),
0 0 0 1px rgba(221,28,28,.18);
transition: box-shadow var(--dur-base) var(--arcade-out);
}
.mines-grid::before{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
background: var(--grad-iris);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; pointer-events:none;
transition: opacity var(--dur-base) var(--arcade-out);
animation: irisSpin 11s linear infinite;
z-index: 1;
}
.mines-grid:hover::before{ opacity: .55; }
/* ----- MINES: tile hover — add an inner shimmer hint so untouched tiles
feel "alive" before being clicked. ----- */
.mine-tile:not(.gem):not(.bomb):not(.locked){
transition:
transform var(--dur-base) var(--arcade-spring),
border-color var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out),
filter var(--dur-fast) var(--arcade-out);
}
.mine-tile:not(.gem):not(.bomb):not(.locked)::after{
content:""; position:absolute; inset:4px; border-radius:10px;
background: radial-gradient(circle at 50% 0%, rgba(221,28,28,.18), transparent 60%);
opacity: 0;
transition: opacity var(--dur-base) var(--arcade-out);
pointer-events: none;
}
.mine-tile:not(.gem):not(.bomb):not(.locked):hover::after{ opacity: 1; }
.mine-tile:not(.gem):not(.bomb):not(.locked):hover{
filter: brightness(1.1);
}
.mine-tile:not(.gem):not(.bomb):not(.locked):active{
transform: translateY(2px) scale(.96);
filter: brightness(1.2);
transition-duration: var(--dur-fast);
}
/* ----- MINES: gem reveal — sparkle sweep over the gem face. ----- */
.mine-tile.gem{
background:
linear-gradient(135deg,#ffe0e0,#dd1c1c),
radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 50%);
box-shadow:
0 4px 0 #3a0808,
0 0 24px rgba(221,28,28,.6),
inset 0 1px 0 rgba(255,255,255,.4);
}
.mine-tile.gem::before{
/* sparkling sweep that fires once on reveal then idles softly */
content:""; position:absolute; inset:0; border-radius:inherit;
background:
linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
background-size: 200% 100%;
pointer-events: none;
animation: gemSparkle 1.2s var(--arcade-out) 1, gemSparkleIdle 4s ease-in-out infinite 1.4s;
}
@keyframes gemSparkle{
from{ background-position: 200% 0 } to{ background-position: -100% 0 }
}
@keyframes gemSparkleIdle{
0%,100%{ opacity: .55 }
50% { opacity: .9 }
}
/* ----- MINES: gem follow-up glow inside the tile (a slow inner pulse). ----- */
.mine-tile.gem::after{
content:""; position:absolute; inset:50% 50% 50% 50%;
border-radius:50%;
background: radial-gradient(circle, rgba(255,255,255,.55), rgba(221,28,28,.0) 70%);
pointer-events:none;
animation: gemPulse 2.8s ease-in-out infinite;
}
@keyframes gemPulse{
0%,100%{ inset: 50% 50% 50% 50%; opacity:.0 }
50% { inset: 30% 30% 30% 30%; opacity:.9 }
}
/* ----- MINES: cleared-all victory ring on the grid. JS toggles .cleared. ----- */
.mines-grid.cleared{
animation: minesCleared .8s var(--arcade-spring);
}
.mines-grid.cleared::before{ opacity: 1; }
@keyframes minesCleared{
0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 0 rgba(255,200,80,0); }
40% { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 18px rgba(255,200,80,.45), var(--glow-gold); }
100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 0 rgba(255,200,80,0); }
}
/* ============================================================
ARCADE POLISH v4 — END
============================================================ */
/* ============================================================
ARCADE POLISH v5 — REMAINING GAMES
Plinko / Dice / Limbo / Upgrader / Slots / Blackjack
============================================================ */
/* ----- COMMON: every game stage gets an iridescent rim that fades in on hover. */
.limbo-stage, .plinko-board, .upgrader-stage,
.dice-stage, .slots-machine, .bj-table{
position:relative;
isolation:isolate;
box-shadow: var(--depth-2), 0 0 60px rgba(221,28,28,.08);
transition: box-shadow var(--dur-base) var(--arcade-out);
}
.limbo-stage::after, .plinko-board::after, .upgrader-stage::after,
.dice-stage::after, .slots-machine::after, .bj-table::after{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
background: var(--grad-iris);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; pointer-events:none; z-index: 5;
transition: opacity var(--dur-base) var(--arcade-out);
animation: irisSpin 13s linear infinite;
}
/* NOTE: limbo + dice + plinko + upgrader + bj already have their own ::after
pseudo for stars/glow — the new one above with z-index:5 sits on the rim
and both can coexist because they target different inset/positions. */
/* ----- PLINKO: slot-flash hot color + win-burst on landing. */
.plinko-slot{
transition:
transform var(--dur-base) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
filter var(--dur-base) var(--arcade-out);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.4);
}
.plinko-slot.flash{
filter: brightness(1.18) saturate(1.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 8px 22px rgba(0,0,0,.5),
0 0 28px currentColor,
0 0 0 1px rgba(255,255,255,.35);
transform: translateY(-3px) scale(1.05);
}
.plinko-slot.t-jack.flash{ box-shadow:
inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(0,0,0,.5),
0 0 28px rgba(122,14,14,.85), var(--glow-violet); }
.plinko-slot.t-fire.flash{ box-shadow:
inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(0,0,0,.5),
0 0 28px rgba(221,28,28,.85), var(--glow-pink); }
/* ----- LIMBO: large multiplier crawl on win, redshift on loss. */
.limbo-stage.win .limbo-multi{
animation: limboWinPump 1.1s var(--arcade-spring) 1;
}
@keyframes limboWinPump{
0% { transform: scale(.7); filter: blur(8px); opacity:0; }
45% { transform: scale(1.18); filter: blur(0); opacity:1; }
70% { transform: scale(.95); }
100% { transform: scale(1); filter: blur(0); opacity:1; }
}
.limbo-stage.loss .limbo-multi{
animation: limboLossDrop .7s var(--arcade-out) 1;
}
@keyframes limboLossDrop{
0% { transform: translateY(0) scale(1); filter: blur(0); opacity:1; }
100% { transform: translateY(20px) scale(.85); filter: blur(2px); opacity:.6; }
}
/* ----- DICE: stage shake + cube glow on win. */
.dice-cube-wrap.win-pulse{
filter: drop-shadow(0 0 28px rgba(221,28,28,.7));
}
.dice-cube-wrap.loss-pulse{
filter: drop-shadow(0 0 24px rgba(221,28,28,.6));
}
.dice-pred .btn{
transition: transform var(--dur-fast) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out);
}
.dice-pred .btn:hover{ transform: translateY(-2px) scale(1.03); }
/* ----- UPGRADER: pointer subtle pulse, mult bigger feel. */
.upgrader-pointer{
filter: drop-shadow(0 0 8px rgba(221,28,28,.65));
animation: upgPointerPulse 2.2s ease-in-out infinite;
}
@keyframes upgPointerPulse{
0%,100%{ filter: drop-shadow(0 0 6px rgba(221,28,28,.55)); }
50% { filter: drop-shadow(0 0 16px rgba(255,200,80,.75)); }
}
.upgrader-mult{
text-shadow: 0 0 14px rgba(255,200,80,.45);
}
/* ----- SLOTS: marquee shimmer, win pump enhanced. */
.slots-machine{
box-shadow:
var(--depth-3),
inset 0 1px 0 rgba(255,255,255,.08),
0 0 60px rgba(221,28,28,.10);
}
.slots-machine.win{
box-shadow:
var(--depth-3),
inset 0 1px 0 rgba(255,255,255,.16),
0 0 80px rgba(255,200,80,.45),
var(--glow-gold);
}
.reel{
box-shadow:
inset 0 4px 12px rgba(0,0,0,.55),
inset 0 -4px 12px rgba(0,0,0,.35),
0 0 0 1px rgba(255,255,255,.05);
}
.slots-machine.win .reel{
box-shadow:
inset 0 4px 12px rgba(0,0,0,.55),
inset 0 -4px 12px rgba(0,0,0,.35),
0 0 0 1px rgba(255,200,80,.55),
0 0 22px rgba(255,200,80,.45);
animation: reelWinShimmer 1.4s ease-in-out;
}
@keyframes reelWinShimmer{
0%,100%{ filter: brightness(1) saturate(1); }
50% { filter: brightness(1.18) saturate(1.18); }
}
/* ----- BLACKJACK: card hover lift, flipped-card depth, win/loss zone glow. */
.bj-card{
transition:
transform var(--dur-base) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
filter var(--dur-base) var(--arcade-out);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 12px 22px rgba(0,0,0,.45),
0 2px 6px rgba(0,0,0,.3);
}
.bj-card:hover{
transform: translateY(-4px) rotate(-1deg) scale(1.03);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 18px 32px rgba(0,0,0,.55),
0 0 24px rgba(221,28,28,.25);
}
.bj-card.flipped{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
0 12px 22px rgba(0,0,0,.55),
0 0 18px rgba(221,28,28,.35);
}
.bj-zone.bj-win{
box-shadow: 0 0 0 2px rgba(221,28,28,.55), var(--glow-green);
animation: bjZonePulse 1.6s ease-in-out;
}
.bj-zone.bj-loss{
box-shadow: 0 0 0 2px rgba(221,28,28,.5), var(--glow-red);
}
@keyframes bjZonePulse{
0%,100%{ box-shadow: 0 0 0 2px rgba(221,28,28,.55), var(--glow-green); }
50% { box-shadow: 0 0 0 4px rgba(221,28,28,.7), var(--glow-green), 0 0 80px rgba(221,28,28,.35); }
}
/* ----- TARGET-LINE / chance / payout text — small but uniform polish. */
.limbo-target-line strong,
.upgrader-percent,
.upgrader-mult{
text-shadow: 0 0 10px rgba(255,200,80,.35);
}
/* ----- BET INPUT row — every game has one. Polished with focus state. */
.bet-input{
transition:
border-color var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out);
}
.bet-input:focus-within{
border-color: rgba(221,28,28,.55);
box-shadow:
0 0 0 2px rgba(221,28,28,.35),
0 6px 18px rgba(221,28,28,.18),
inset 0 1px 0 rgba(255,255,255,.12);
}
/* ----- BIG GAME ACTION BUTTONS — every game's PLACE BET / CASHOUT / SPIN
already inherits .btn; lift them visually with a subtle outer shadow. */
.crash-controls > .btn,
.mines-panel > .btn,
.limbo-controls > .btn,
.plinko-controls > .btn,
.upgrader-controls > .btn,
.slots-controls > .btn,
.dice-controls > .btn,
.bj-controls > .btn{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 8px 22px rgba(0,0,0,.45),
0 0 0 1px rgba(221,28,28,.18),
0 0 28px rgba(221,28,28,.14);
}
/* ============================================================
ARCADE POLISH v5 — END
============================================================ */
/* ============================================================
ARCADE POLISH v6 — CHAT + MODALS + TOASTS
============================================================ */
/* ----- CHAT panel — frosted depth + iridescent header. */
.chat{
box-shadow: var(--depth-3), 0 0 60px rgba(221,28,28,.10);
backdrop-filter: blur(18px) saturate(160%);
}
.chat-head{
position: relative;
background: linear-gradient(180deg, rgba(28,12,16,.85), rgba(28,12,16,.6));
}
.chat-head::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
background: linear-gradient(90deg, transparent, rgba(221,28,28,.55), transparent);
}
/* ----- CHAT TABS — animated underline like the bf-tabs. */
.chat-tabs button, .chat-tab{
position: relative;
transition:
color var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out),
transform var(--dur-fast) var(--arcade-spring);
}
.chat-tabs button:hover, .chat-tab:hover{ transform: translateY(-1px); }
.chat-tabs button.active::after,
.chat-tab.active::after{
content:""; position:absolute; left:18%; right:18%; bottom:-4px; height:2px;
border-radius:2px;
background: linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);
filter: drop-shadow(0 0 5px var(--pink));
}
/* ----- CHAT message hover state — subtle row highlight. */
.cmsg{
padding: 6px 10px;
border-radius: 10px;
transition: background var(--dur-base) var(--arcade-out);
}
.cmsg:hover{ background: rgba(255,255,255,.04); }
/* ----- CHAT system message — subtler look + soft pulsing dot. */
.cmsg-system{
background: linear-gradient(135deg, rgba(118,228,255,.10), rgba(122,14,14,.06));
border: 1px solid rgba(118,228,255,.15);
border-radius: 10px;
padding: 6px 10px;
position: relative;
}
.cmsg-system::before{
content:""; display:inline-block;
width:6px; height:6px; border-radius:50%;
background: var(--cyan);
box-shadow: 0 0 8px var(--cyan);
margin-right:8px; vertical-align:middle;
animation: chatSysDot 2s ease-in-out infinite;
}
@keyframes chatSysDot{
0%,100%{ opacity:.55; transform: scale(.85); }
50% { opacity:1; transform: scale(1.2); }
}
/* ----- CHAT input — focus glow that matches the global design. */
.chat-input input:focus{
border-color: rgba(221,28,28,.6);
box-shadow:
0 0 0 2px rgba(221,28,28,.35),
0 0 22px rgba(221,28,28,.25),
inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.btn-send{
transition:
transform var(--dur-fast) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
filter var(--dur-fast) var(--arcade-out);
}
.btn-send:hover{ transform: translateY(-2px) scale(1.05); filter: brightness(1.1); }
.btn-send:active{ transform: translateY(1px) scale(.96); }
/* ----- CHAT body scrollbar — match brand tokens. */
.chat-body::-webkit-scrollbar{ width: 6px; }
.chat-body::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(255,82,82,.45), rgba(122,14,14,.45));
border-radius: 6px;
}
/* ----- MODAL backdrop — deeper blur, softer fade. */
.modal-backdrop{
background: rgba(8, 4, 20, .68);
backdrop-filter: blur(14px) saturate(160%);
}
.modal{
background:
radial-gradient(ellipse at top, rgba(221,28,28,.12), transparent 50%),
linear-gradient(180deg, var(--surface), var(--bg-2));
border: 1px solid rgba(255,255,255,.08);
}
.modal::before{
content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
background: var(--grad-iris);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .35;
pointer-events: none;
animation: irisSpin 14s linear infinite;
}
.modal-close{
transition:
background var(--dur-base) var(--arcade-out),
transform var(--dur-fast) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out);
}
.modal-close:hover{
background: var(--red);
transform: rotate(90deg) scale(1.06);
box-shadow: 0 0 16px rgba(221,28,28,.6);
}
/* ----- MODAL title — gradient + soft drop shadow for that arcade feel. */
.modal-title{
background: linear-gradient(135deg, #fff 0%, #ffe0e0 60%, var(--gold) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(0 4px 14px rgba(221,28,28,.25));
}
/* ----- MODAL win special variant — already has .modal-win. Big vibe. */
.modal-win .modal-title{
background: linear-gradient(135deg, #fff 0%, var(--gold) 50%, var(--orange) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(255,200,80,.55));
animation: modalWinTitleShimmer 2.4s ease-in-out infinite;
}
@keyframes modalWinTitleShimmer{
0%,100%{ filter: drop-shadow(0 0 14px rgba(255,200,80,.45)); }
50% { filter: drop-shadow(0 0 28px rgba(255,200,80,.85)); }
}
/* ----- TOAST — richer borders/shadows, kind-aware glow. */
.toast{
background:
linear-gradient(180deg, rgba(28,12,16,.95), rgba(15,8,10,.95));
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
border-radius: 14px;
padding: 12px 18px;
font-weight: 700;
letter-spacing: .02em;
}
.toast.win{
border-color: rgba(221,28,28,.55);
box-shadow:
0 12px 32px rgba(0,0,0,.5),
0 0 0 1px rgba(221,28,28,.35),
var(--glow-green);
}
.toast.loss{
border-color: rgba(221,28,28,.5);
box-shadow:
0 12px 32px rgba(0,0,0,.5),
0 0 0 1px rgba(221,28,28,.3),
var(--glow-red);
}
.toast.info{
border-color: rgba(118,228,255,.45);
box-shadow:
0 12px 32px rgba(0,0,0,.5),
0 0 0 1px rgba(118,228,255,.25),
0 0 22px rgba(118,228,255,.3);
}
/* ============================================================
ARCADE POLISH v6 — END
============================================================ */
/* ============================================================
ARCADE POLISH v7 — PROFILE / ACHIEVEMENTS / WALLET
============================================================ */
/* ----- PROFILE TOPBAR pill — soft hover lift. */
.profile{
transition:
transform var(--dur-fast) var(--arcade-spring),
background var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out);
}
.profile:hover{
transform: translateY(-1px) scale(1.02);
background: rgba(255,255,255,.06);
box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(221,28,28,.25);
}
/* ----- PROFILE HERO HEADER — depth + iridescent rim. */
.profile-header{
position: relative;
isolation: isolate;
box-shadow: var(--depth-3), 0 0 60px rgba(221,28,28,.10);
}
.profile-header::before{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
background: var(--grad-iris);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .4; pointer-events: none;
animation: irisSpin 14s linear infinite;
}
/* ----- PROFILE TABS — animated underline like the bf-tabs. */
.profile-tab{
position: relative;
transition:
color var(--dur-base) var(--arcade-out),
transform var(--dur-fast) var(--arcade-spring);
}
.profile-tab:hover{ transform: translateY(-1px); }
.profile-tab.active::after{
content:""; position:absolute; left:14%; right:14%; bottom:-6px; height:2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);
filter: drop-shadow(0 0 6px var(--pink));
}
/* ----- ACHIEVEMENT BADGE — 3D wobble on hover. */
.ach-badge{
position: relative;
isolation: isolate;
transition:
transform var(--dur-base) var(--arcade-spring),
filter var(--dur-base) var(--arcade-out);
transform-style: preserve-3d;
}
.ach-badge:hover{
transform: perspective(600px) translateY(-3px) rotateX(8deg) rotateY(-6deg) scale(1.08);
filter: brightness(1.1) saturate(1.15);
}
.ach-badge.unlocked{
animation: achIdleBob 3.6s ease-in-out infinite;
}
@keyframes achIdleBob{
0%,100%{ transform: translateY(0) rotate(-1deg) }
50% { transform: translateY(-3px) rotate( 1deg) }
}
.ach-badge.locked{ filter: grayscale(.85) brightness(.6) saturate(.5); }
.ach-badge.locked:hover{ filter: grayscale(.6) brightness(.8) saturate(.7); }
/* ----- ACHIEVEMENT CARD — depth + tier-glow. */
.ach-card{
transition:
transform var(--dur-base) var(--arcade-spring),
box-shadow var(--dur-base) var(--arcade-out),
border-color var(--dur-base) var(--arcade-out);
}
.ach-card:hover{
transform: translateY(-4px);
box-shadow: var(--depth-2), 0 0 30px rgba(221,28,28,.18);
}
.ach-card.unlocked.ach-mythic{ box-shadow: 0 0 0 1px rgba(122,14,14,.45), var(--glow-violet); }
.ach-card.unlocked.ach-legendary{ box-shadow: 0 0 0 1px rgba(255,200,80,.45), var(--glow-gold); }
.ach-card.unlocked.ach-epic{ box-shadow: 0 0 0 1px rgba(122,14,14,.35), 0 0 20px rgba(122,14,14,.25); }
.ach-card.unlocked.ach-rare{ box-shadow: 0 0 0 1px rgba(118,228,255,.35), 0 0 18px rgba(118,228,255,.22); }
/* ----- ACHIEVEMENT TOAST — gold glow + scale-in. */
.ach-toast{
background:
radial-gradient(ellipse at top right, rgba(255,200,80,.18), transparent 50%),
linear-gradient(180deg, rgba(28,12,16,.96), rgba(15,8,10,.95));
box-shadow: var(--depth-3), 0 0 80px rgba(255,200,80,.35), var(--glow-gold);
transform: translateX(420px);
opacity: 0;
transition:
transform var(--dur-slow) var(--arcade-spring),
opacity var(--dur-base) var(--arcade-out);
}
.ach-toast.show{ transform: translateX(0); opacity: 1; }
/* ----- TIER BADGES (Bronze/Silver/Gold/Diamond/Mythic) — extra glow. */
[class*="tier-"] .aff-tier-icon{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 4px 10px rgba(0,0,0,.4);
}
.tier-bronze .aff-tier-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.4), 0 0 14px rgba(205,127,50,.5); }
.tier-silver .aff-tier-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.4), 0 0 14px rgba(224,230,240,.5); }
.tier-gold .aff-tier-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.4), var(--glow-gold); }
.tier-diamond .aff-tier-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.4), 0 0 18px rgba(221,28,28,.5); }
.tier-mythic .aff-tier-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.4), var(--glow-violet); }
/* ----- WALLET COIN ROW — magnetic hover, glows in coin's brand color. */
.coin-row{
position: relative;
transition:
transform var(--dur-base) var(--arcade-spring),
background var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out);
isolation: isolate;
}
.coin-row::after{
content:""; position:absolute; inset:0; border-radius:inherit;
background: radial-gradient(ellipse at left, rgba(221,28,28,.18), transparent 60%);
opacity: 0;
transition: opacity var(--dur-base) var(--arcade-out);
pointer-events:none;
}
.coin-row:hover{
transform: translateX(4px) translateY(-1px);
background: rgba(255,255,255,.05);
box-shadow: var(--depth-1), 0 0 0 1px rgba(221,28,28,.2);
}
.coin-row:hover::after{ opacity: .8; }
.coin-row[data-symbol="BTC"]:hover::after{ background: radial-gradient(ellipse at left, rgba(247,147,26,.22), transparent 60%); }
.coin-row[data-symbol="ETH"]:hover::after{ background: radial-gradient(ellipse at left, rgba(98,126,234,.22), transparent 60%); }
.coin-row[data-symbol="SOL"]:hover::after{ background: radial-gradient(ellipse at left, rgba(20,241,149,.22), transparent 60%); }
.coin-row[data-symbol="USDT"]:hover::after{ background: radial-gradient(ellipse at left, rgba(38,161,123,.22), transparent 60%); }
.coin-row[data-symbol="USDC"]:hover::after{ background: radial-gradient(ellipse at left, rgba(40,108,210,.22), transparent 60%); }
.coin-row[data-symbol="DOGE"]:hover::after{ background: radial-gradient(ellipse at left, rgba(193,176,123,.22), transparent 60%); }
.coin-row[data-symbol="LTC"]:hover::after{ background: radial-gradient(ellipse at left, rgba(180,180,200,.22), transparent 60%); }
.coin-row[data-symbol="TRX"]:hover::after{ background: radial-gradient(ellipse at left, rgba(255,20,28,.22), transparent 60%); }
.coin-row[data-symbol="BNB"]:hover::after{ background: radial-gradient(ellipse at left, rgba(243,186,47,.22), transparent 60%); }
.coin-row[data-symbol="MATIC"]:hover::after{ background: radial-gradient(ellipse at left, rgba(130,71,229,.22), transparent 60%); }
/* ----- DEPOSIT QR area — subtle shimmer hint when address is shown. */
.deposit-qr{
position: relative;
overflow: hidden;
}
.deposit-qr::after{
content:""; position:absolute; inset:0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
background-size: 250% 100%;
animation: depositQrShine 4.5s linear infinite;
pointer-events:none;
}
@keyframes depositQrShine{
from{ background-position: 200% 0 } to{ background-position: -100% 0 }
}
/* ----- HISTORY ROWS in profile/transactions — hover lift + side accent. */
.hist-row{
position: relative;
transition:
transform var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out);
}
.hist-row:hover{
transform: translateX(2px);
box-shadow: var(--depth-1), 0 0 0 1px rgba(221,28,28,.25);
}
.hist-row.win::before{ box-shadow: 0 0 12px rgba(221,28,28,.5); }
.hist-row.loss::before{ box-shadow: 0 0 12px rgba(221,28,28,.4); }
/* ----- STATS HEAD — title gets a gradient sweep. */
.stats-title{
background: linear-gradient(135deg, #fff, var(--pink-soft) 60%, var(--gold));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ============================================================
ARCADE POLISH v7 — END
============================================================ */
/* ============================================================
ARCADE POLISH v8 — FINAL SWEEP
GPU-only animations, will-change discipline, motion safety.
============================================================ */
/* will-change ONLY on elements that animate continuously or per-frame.
Lifting will-change off everything else lets the compositor reclaim
memory between interactions. */
.btn, .ach-badge,
.crash-rocket, .crash-multiplier,
.reel-strip,
.balance, .toast, .ach-toast,
.bf-row, .cmsg, .modal,
.plinko-slot{
will-change: transform, opacity;
}
/* IMPORTANT: elements EXCLUDED from the will-change list above because
they (or their descendants) rely on transform-style: preserve-3d.
will-change:transform promotes an element to its own composited layer,
which forces transform-style: flat on descendants in WebKit/Blink and
silently breaks any 3D scene built underneath. Excluded:
- .dice-cube-wrap → faces with translateZ(60) collapse to a plane
- .game-card → .gc-name/.gc-art/.gc-tag/.gc-bubble translateZ
parallax collapses to a flat tilt
- .mine-tile → rotateX(8deg) hover lift collapses to 2D shear
The transform animations on these still composite fine without the hint. */
/* idle elements should NOT carry will-change — the compositor caches them. */
.cmsg-text, .bf-bet, .bf-game, .bf-payout,
.modal-title, .modal-sub,
.ach-name, .ach-desc{ will-change: auto; }
/* ----- Smoother route transitions on top of the existing routeIn/routeIn v4. */
.route{ contain: layout style; } /* hint browser to skip parent reflows */
/* ----- Force GPU compositing on the heavy-motion stages.
IMPORTANT: any stage whose CHILDREN use `transform-style: preserve-3d`
must NOT be in this list. `transform: translateZ(0)` (and `contain: paint`)
creates a compositing layer that forces the descendants into flat
rendering, which kills the cube's 3D context. Same root cause as the
dice 2D regression. Stages with 3D children are excluded:
- .dice-stage (.dice-cube-wrap → .dice → 6 faces with translateZ:60)
- .mines-grid (.mine-tile uses preserve-3d + rotateX(8deg) hover lift)
*/
.crash-board, .plinko-board,
.upgrader-stage, .slots-machine, .bj-table{
transform: translateZ(0);
contain: layout paint style;
}
.dice-stage, .mines-grid{
/* keep paint isolation but no GPU-promote transform that would flatten 3D */
contain: layout style;
}
/* ----- Tabular numbers everywhere they tick — eliminates digit-jitter. */
.balance, .hb-num, .crash-multiplier, .limbo-multi,
.upgrader-percent, .upgrader-mult,
.bf-multi, .bf-payout, .bf-bet,
.hist-amount, .hr-payout, .hr-bet,
.crash-eos-block,
.toast-body{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" on;
}
/* ----- Ensure backdrop-filter falls back gracefully when not supported. */
@supports not (backdrop-filter: blur(1px)){
.topbar{ background: rgba(15,8,10,.96); }
.modal-backdrop{ background: rgba(8,4,20,.85); }
.chat{ background: rgba(15,8,10,.96); }
}
/* ----- Stronger motion-safety: kill heavy continuous animations. */
@media (prefers-reduced-motion: reduce){
.crash-multiplier,
.crash-rocket, .reel-strip,
.ach-badge.unlocked,
.balance::before, .hero-balance::before,
.topbar::after, .ach-toast,
.game-card .gc-bubble{
animation: none !important;
}
.upgrader-pointer{ animation: none !important; filter: drop-shadow(0 0 6px rgba(221,28,28,.55)) !important; }
.crash-board[data-flying="1"] .crash-multiplier{ animation: none !important; }
}
/* ============================================================
ARCADE POLISH v8 — END
============================================================ */
/* ============================================================
ARCADE POLISH v9 — BADGES (Discord-style)
New matte+shine SVG badges, profile-header badge row,
click-to-detail popover, tier-tinted glow rings.
============================================================ */
/* ----- The .ach-badge wrapper houses the new SVG art. Reset old conflicting
gradients and let the SVG drive its own gradients via per-call defs. ----- */
.ach-badge{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
transition:
transform var(--dur-base) var(--arcade-spring),
filter var(--dur-base) var(--arcade-out);
transform-style: preserve-3d;
}
.ach-badge .ach-badge-bg{ display: none; } /* old bg layer no longer needed */
.ach-badge .ach-badge-art{
width: 100%; height: 100%;
position: relative;
}
.ach-badge .ach-art{
width: 100%; height: 100%;
display: block;
overflow: visible;
}
/* Animated polish sweep across the .ach-shine highlight. */
.ach-badge .ach-shine{
transform-origin: 32px 22px;
animation: achShineSweep 3.6s ease-in-out infinite;
transform-box: fill-box;
}
@keyframes achShineSweep{
0%,100%{ opacity:.55; transform: translateY(0) scaleX(1) }
50% { opacity:1; transform: translateY(-1px) scaleX(1.06) }
}
/* Idle bob for unlocked badges — ach-card already had achIdleBob;
kept here as a hard fallback in case parent .ach-card is absent. */
.profile-badge-row .ach-badge.unlocked,
.up-ach-cell.on .ach-badge.unlocked{
animation: achIdleBob 4.2s ease-in-out infinite;
}
/* Locked desaturation — overlay the lock icon centered. */
.ach-badge.locked{
filter: grayscale(.85) brightness(.55) saturate(.5)
drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.ach-badge-lock{
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
color: #fff;
text-shadow: 0 2px 6px rgba(0,0,0,.7);
pointer-events: none;
opacity: .92;
}
/* Hover wobble — works on every site that uses .ach-badge. */
.ach-badge:hover{
transform: perspective(600px) translateY(-3px) rotateX(8deg) rotateY(-6deg) scale(1.06);
filter: drop-shadow(0 14px 22px rgba(0,0,0,.5))
drop-shadow(0 0 18px rgba(221,28,28,.35));
}
/* Tier-keyed glow on hover (each tier projects its own halo). */
.ach-badge.ach-tier-common:hover{ filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(180,196,232,.55)); }
.ach-badge.ach-tier-rare:hover{ filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(95,184,255,.65)); }
.ach-badge.ach-tier-epic:hover{ filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(165,138,255,.7)); }
.ach-badge.ach-tier-legendary:hover{filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(255,200,80,.8)); }
.ach-badge.ach-tier-mythic:hover{ filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 28px rgba(255,82,82,.85)); }
/* ============================================================
PROFILE BADGE ROW — Discord-style chip strip
============================================================ */
.profile-badge-row{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
padding: 8px 10px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.06);
box-shadow: var(--depth-1);
max-width: max-content;
align-items: center;
}
.profile-badge-row.is-empty{ display: none; }
.pbr-chip{
position: relative;
width: 36px; height: 36px;
border: 0; padding: 0; margin: 0;
background: transparent;
border-radius: 12px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition:
transform var(--dur-base) var(--arcade-spring),
filter var(--dur-base) var(--arcade-out),
background var(--dur-base) var(--arcade-out);
isolation: isolate;
}
.pbr-chip .ach-art{
width: 100%; height: 100%;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.pbr-chip:hover{
transform: translateY(-3px) scale(1.12);
background: rgba(255,255,255,.06);
}
.pbr-chip:hover .ach-art{
filter: drop-shadow(0 8px 14px rgba(0,0,0,.55))
drop-shadow(0 0 12px var(--pbr-glow, rgba(221,28,28,.55)));
}
.pbr-chip:focus-visible{
outline: none;
box-shadow:
0 0 0 2px rgba(0,0,0,.6),
0 0 0 3px rgba(221,28,28,.85);
}
.pbr-chip.pbr-tier-common{ --pbr-glow: rgba(180,196,232,.55); }
.pbr-chip.pbr-tier-rare{ --pbr-glow: rgba(95,184,255,.65); }
.pbr-chip.pbr-tier-epic{ --pbr-glow: rgba(165,138,255,.7); }
.pbr-chip.pbr-tier-legendary{ --pbr-glow: rgba(255,200,80,.75); }
.pbr-chip.pbr-tier-mythic{ --pbr-glow: rgba(255,82,82,.8); }
/* Subtle continuous shine on rarer tiers in the row. */
.pbr-chip.pbr-tier-legendary,
.pbr-chip.pbr-tier-mythic{
animation: pbrIdle 3.2s ease-in-out infinite;
}
@keyframes pbrIdle{
0%,100%{ filter: brightness(1) saturate(1); }
50% { filter: brightness(1.08) saturate(1.1); }
}
/* Inline (in user popup) — slightly more compact and tighter spacing. */
.up-badge-row{
margin-top: 6px;
padding: 6px 8px;
gap: 5px;
}
.up-badge-row .pbr-chip{ width: 30px; height: 30px; border-radius: 10px; }
/* ============================================================
ACHIEVEMENT DETAIL POPOVER — opens on chip click
============================================================ */
.ach-detail{
position: fixed;
z-index: 600;
width: 280px;
padding: 14px;
border-radius: 14px;
background:
radial-gradient(ellipse at top, rgba(221,28,28,.18), transparent 55%),
linear-gradient(180deg, rgba(28,12,16,.96), rgba(15,8,10,.96));
border: 1px solid rgba(221,28,28,.4);
box-shadow: var(--depth-3), 0 0 60px rgba(221,28,28,.18);
display: grid;
grid-template-columns: 60px 1fr;
gap: 12px;
align-items: center;
opacity: 0;
transform: translateY(6px) scale(.96);
transition:
transform var(--dur-base) var(--arcade-spring),
opacity var(--dur-base) var(--arcade-out);
pointer-events: auto;
}
.ach-detail.show{ opacity: 1; transform: translateY(0) scale(1); }
.ach-detail-art{
width: 60px; height: 60px;
filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.ach-detail-art .ach-art{ width: 100%; height: 100%; display: block; }
.ach-detail-body{ min-width: 0; }
.ach-detail-name{
font-family: 'Sora'; font-weight: 800;
font-size: 16px; color: #fff;
background: linear-gradient(135deg, #fff, #ffe0e0 60%, var(--gold));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 2px;
}
.ach-detail-tier{
font-family: 'Plus Jakarta Sans'; font-weight: 700;
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-mute);
margin-bottom: 6px;
}
.ach-detail-desc{
font-family: 'Plus Jakarta Sans'; font-weight: 600;
font-size: 12px; line-height: 1.4;
color: var(--text-dim);
margin-bottom: 4px;
}
.ach-detail-when{
font-family: 'Plus Jakarta Sans'; font-weight: 700;
font-size: 11px;
color: var(--cyan);
}
.ach-detail-mythic{ border-color: rgba(255,82,82,.55); box-shadow: var(--depth-3), var(--glow-pink); }
.ach-detail-legendary{ border-color: rgba(255,200,80,.55); box-shadow: var(--depth-3), var(--glow-gold); }
.ach-detail-epic{ border-color: rgba(165,138,255,.55); box-shadow: var(--depth-3), var(--glow-violet); }
.ach-detail-rare{ border-color: rgba(95,184,255,.45); box-shadow: var(--depth-3), 0 0 30px rgba(95,184,255,.35); }
/* ============================================================
ACH GRID CARD — refresh look so it matches the new badge art
============================================================ */
.ach-card{
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border: 1px solid rgba(255,255,255,.06);
box-shadow: var(--depth-1);
transition:
transform var(--dur-base) var(--arcade-out),
box-shadow var(--dur-base) var(--arcade-out),
border-color var(--dur-base) var(--arcade-out);
}
.ach-card.locked{ opacity: .68; }
.ach-card .ach-badge{ width: 80px; height: 80px; }
.ach-name{
font-family:'Sora'; font-weight:800; font-size:15px; color:#fff;
margin-bottom: 4px;
}
.ach-desc{
font-family:'Plus Jakarta Sans'; font-weight:600;
font-size: 12.5px; color: var(--text-dim); line-height: 1.4;
}
.ach-tier{
font-family:'Plus Jakarta Sans'; font-weight: 800;
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
padding: 4px 10px;
border-radius: 99px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: var(--text-dim);
}
.ach-card.ach-mythic .ach-tier{ background: rgba(255,82,82,.18); color: #ffd0e8; border-color: rgba(255,82,82,.45); }
.ach-card.ach-legendary .ach-tier{ background: rgba(255,200,80,.16); color: #ffe0a0; border-color: rgba(255,200,80,.45); }
.ach-card.ach-epic .ach-tier{ background: rgba(165,138,255,.18); color: #ff7a7a; border-color: rgba(165,138,255,.45); }
.ach-card.ach-rare .ach-tier{ background: rgba(95,184,255,.18); color: #ffd0d0; border-color: rgba(95,184,255,.45); }
.ach-when{
font-family:'Plus Jakarta Sans'; font-weight: 700;
font-size: 11px;
color: var(--cyan);
grid-column: 2 / 4;
margin-top: 4px;
}
/* ============================================================
ACH UNLOCK TOAST — refreshed for new badge art sizes
============================================================ */
.ach-toast{
position: fixed;
top: 90px; right: 20px;
width: 320px;
padding: 14px;
border-radius: 16px;
background:
radial-gradient(ellipse at top right, rgba(255,200,80,.18), transparent 50%),
linear-gradient(180deg, rgba(28,12,16,.96), rgba(15,8,10,.95));
border: 1px solid rgba(255,200,80,.4);
box-shadow: var(--depth-3), 0 0 80px rgba(255,200,80,.35), var(--glow-gold);
display: grid;
grid-template-columns: 64px 1fr;
gap: 12px;
align-items: center;
z-index: 700;
}
.ach-toast .ach-badge{ width: 64px; height: 64px; }
.ach-toast-eyebrow{
font-family:'Plus Jakarta Sans'; font-weight:800;
font-size:10px; letter-spacing:.22em; text-transform:uppercase;
color: var(--gold);
margin-bottom: 2px;
}
.ach-toast-name{
font-family:'Sora'; font-weight:800; font-size:16px; color:#fff;
background: linear-gradient(135deg, #fff, #ffe0a0, var(--gold));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ach-toast-desc{
font-family:'Plus Jakarta Sans'; font-weight: 600;
font-size: 12px; color: var(--text-dim); line-height: 1.4;
}
/* ============================================================
TIER ART REFRESH — shadow + animation polish
============================================================ */
.tier-art{
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.tier-art .tier-shine{
transform-origin: center;
animation: tierShineSweep 4.6s ease-in-out infinite;
transform-box: fill-box;
}
@keyframes tierShineSweep{
0%,100%{ opacity:.55; transform: scaleX(1) }
50% { opacity:1; transform: scaleX(1.06) }
}
.tier-art-mythic .tier-aura{
transform-origin: 40px 38px;
animation: tierMythicAura 3.2s ease-in-out infinite;
transform-box: fill-box;
}
@keyframes tierMythicAura{
0%,100%{ opacity:.4; transform: scale(1) }
50% { opacity:.85; transform: scale(1.08) }
}
.ph-tier-badge{
width: 64px; height: 64px;
flex-shrink: 0;
}
/* ============================================================
ARCADE POLISH v9 — END
============================================================ */
/* ============================================================
ARCADE POLISH v10 — SLOTS REWORK
PNG limited-item symbols on the reels + image-only paytable
with hover/tap reveal showing multiplier and chance.
============================================================ */
/* ----- Reel-strip images. The reel-strip span used to host an SVG; now it
hosts an ![]()
. Reset the legacy svg sizing and apply matte-shine treatment
so the image reads like an item card on the reel. ----- */
.reel-strip span{
position: relative;
perspective: 600px;
}
.reel-strip span > .slot-img{
width: 108px;
height: 108px;
object-fit: contain;
display: block;
filter:
drop-shadow(0 6px 8px rgba(0,0,0,.45))
drop-shadow(0 0 14px rgba(255,255,255,.06));
transition: filter var(--dur-base) var(--arcade-out),
transform var(--dur-base) var(--arcade-spring);
/* gentle idle bobble so static reels don't feel dead */
animation: slotImgIdle 3.4s ease-in-out infinite;
}
.reel-strip span:nth-child(2n) > .slot-img{ animation-delay: -1.4s; }
.reel-strip span:nth-child(3n) > .slot-img{ animation-delay: -2.6s; }
@keyframes slotImgIdle{
0%,100%{ transform: translateY(0) rotate(-1deg) }
50% { transform: translateY(-3px) rotate( 1deg) }
}
/* Pause idle bobble while the reel is spinning so the motion doesn't
compound with the strip translation (looks twitchy). */
.slots-machine.spinning .reel-strip span > .slot-img{
animation: none;
}
/* Win flash — fired by JS by adding .win to the .reel containing the
matched symbol; the inner image gets a brief gold pulse + bounce. */
.reel.win .slot-img{
filter:
drop-shadow(0 0 24px rgba(255,217,0,.95))
drop-shadow(0 0 48px rgba(255,138,0,.6));
animation: slotImgWin 1.1s var(--arcade-spring);
}
@keyframes slotImgWin{
0% { transform: scale(1) rotate(0) }
35% { transform: scale(1.18) rotate(-4deg) }
70% { transform: scale(.96) rotate(3deg) }
100% { transform: scale(1) rotate(0) }
}
/* Tier-aware idle aura behind the image when paused on a high-tier symbol.
Driven by adding the symbol class to the reel via the existing reel-strip
data flow. Cheap — single ::before, no extra DOM. */
.reel-strip span{
isolation: isolate;
}
.reel-strip span::before{
content:""; position:absolute; inset:8px; border-radius:50%;
pointer-events:none; opacity:.55; z-index:-1;
background: radial-gradient(circle, rgba(255,255,255,.15), transparent 65%);
filter: blur(8px);
}
/* ----- Paytable cards (image-only, name hidden). ----- */
.paytable-v2 .pt-card{
cursor: pointer;
/* Cards used to be ; they're now