* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
:root {
--bg1:#091540; --bg2:#1c1f5a; --bg3:#3d1670; --bg4:#0d2f66;
--glass:rgba(8,10,28,.72); --glass-border:rgba(255,255,255,.1); --text-soft:rgba(255,255,255,.75);
--green1:#14b85f; --green2:#23d77d; --blue1:#4d7cff; --purple1:#7c4dff; --danger1:#b3253b; --danger2:#ea475f; --warn1:#b57a16; --warn2:#f0ae2b;
--panel-padding:28px; --panel-radius:24px;
--control-padding-y:14px; --control-padding-x:16px; --control-radius:14px;
--surface-padding-y:16px; --surface-padding-x:18px; --surface-radius:18px;
--glass-padding-y:12px; --glass-padding-x:16px; --glass-radius:18px;
--settings-input-width:110px;
--panel-max-width:460px; --panel-form-max-width:440px; --panel-lobby-max-width:520px;
--screen-pad-x:20px; --screen-pad-top:20px; --screen-pad-bottom:40px;
--screen-gap:18px; --layout-gap:22px; --section-gap:14px;
--title-size:2.4rem; --subtitle-size:1rem; --subtitle-width:46ch;
--btn-min-height:54px; --btn-padding-x:16px;
--mode-min-height:58px; --mode-padding-y:16px; --mode-padding-x:14px;
--topbar-gap:14px; --nav-gap:10px; --nav-pill-pad-y:11px; --nav-pill-pad-x:15px;
--surface-shadow:0 24px 64px rgba(0,0,0,.42);
--glass-blur:16px; --glass-alpha:.72; --glass-border-alpha:.1;
--theme-panel-width:420px; --theme-panel-pad:18px;
--home-link-pad-y:12px; --home-link-pad-x:16px;
--contrast-text:rgba(255,255,255,.76); --contrast-border:rgba(255,255,255,.12); --contrast-highlight:rgba(255,255,255,.18);
--safe-top:env(safe-area-inset-top, 0px);
--safe-right:env(safe-area-inset-right, 0px);
--safe-bottom:env(safe-area-inset-bottom, 0px);
--safe-left:env(safe-area-inset-left, 0px);
--scrollbar-size:12px;
--scrollbar-track:rgba(8,11,24,.42);
--scrollbar-thumb:linear-gradient(180deg, rgba(var(--accent-1-rgb), .82), rgba(var(--accent-2-rgb), .72));
--scrollbar-thumb-border:rgba(255,255,255,.16);
--scrollbar-thumb-hover:linear-gradient(180deg, rgba(var(--accent-1-rgb), .94), rgba(var(--accent-2-rgb), .86));
}
:root[data-density="compact"]{
--panel-padding:22px; --panel-radius:22px;
--control-padding-y:11px; --control-padding-x:13px; --control-radius:12px;
--surface-padding-y:12px; --surface-padding-x:14px; --surface-radius:15px;
--glass-padding-y:9px; --glass-padding-x:13px; --glass-radius:15px;
--settings-input-width:96px;
--screen-pad-x:16px; --screen-pad-top:16px; --screen-pad-bottom:28px;
--screen-gap:14px; --layout-gap:16px; --section-gap:10px;
--title-size:2.08rem; --subtitle-size:.94rem; --subtitle-width:42ch;
--btn-min-height:48px; --btn-padding-x:14px;
--mode-min-height:50px; --mode-padding-y:13px; --mode-padding-x:12px;
--topbar-gap:10px; --nav-gap:8px; --nav-pill-pad-y:9px; --nav-pill-pad-x:13px;
--home-link-pad-y:10px; --home-link-pad-x:14px;
}
:root[data-density="relaxed"]{
--panel-padding:36px; --panel-radius:30px;
--control-padding-y:17px; --control-padding-x:19px; --control-radius:17px;
--surface-padding-y:20px; --surface-padding-x:22px; --surface-radius:21px;
--glass-padding-y:15px; --glass-padding-x:19px; --glass-radius:22px;
--settings-input-width:124px;
--screen-pad-x:26px; --screen-pad-top:24px; --screen-pad-bottom:48px;
--screen-gap:24px; --layout-gap:28px; --section-gap:18px;
--title-size:2.72rem; --subtitle-size:1.06rem; --subtitle-width:50ch;
--btn-min-height:60px; --btn-padding-x:18px;
--mode-min-height:64px; --mode-padding-y:18px; --mode-padding-x:16px;
--topbar-gap:18px; --nav-gap:12px; --nav-pill-pad-y:12px; --nav-pill-pad-x:17px;
--home-link-pad-y:14px; --home-link-pad-x:18px;
}
:root[data-contrast="boosted"]{
--text-soft:rgba(255,255,255,.88);
--contrast-text:rgba(255,255,255,.9);
--contrast-border:rgba(255,255,255,.24);
--contrast-highlight:rgba(255,255,255,.32);
--scrollbar-track:rgba(7,10,24,.58);
--scrollbar-thumb-border:rgba(255,255,255,.24);
}
:root[data-glass="clear"]{
--glass:rgba(8,10,28,.56);
--glass-alpha:.56;
--glass-border:rgba(255,255,255,.14);
--glass-border-alpha:.14;
--glass-blur:12px;
--scrollbar-track:rgba(8,11,24,.3);
}
:root[data-glass="solid"]{
--glass:rgba(8,10,28,.88);
--glass-alpha:.88;
--glass-border:rgba(255,255,255,.08);
--glass-border-alpha:.08;
--glass-blur:6px;
--scrollbar-track:rgba(5,8,20,.7);
}
body {
min-height:100vh; min-height:100dvh; overflow-x:hidden; overflow-y:auto; color:white; background:linear-gradient(-45deg,var(--bg1),var(--bg2),var(--bg3),var(--bg4));
background-size:400% 400%; animation:gradientShift 14s ease infinite; position:relative;
opacity:0; transform:translateY(10px); filter:blur(3px);
transition:opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.skip-link{
position:fixed;
left:calc(16px + var(--safe-left));
top:calc(12px + var(--safe-top));
z-index:120;
padding:10px 14px;
border-radius:14px;
background:rgba(8,11,24,.96);
border:1px solid rgba(255,255,255,.14);
color:#fff;
text-decoration:none;
font-weight:800;
transform:translateY(-160%);
transition:transform .18s ease;
box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.skip-link:focus{
transform:translateY(0);
outline:none;
}
body::before,
body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
}
body::before{
z-index:0;
background:
radial-gradient(circle at 18% 12%, rgba(255,243,177,.12), transparent 20%),
radial-gradient(circle at 78% 22%, rgba(118,148,255,.14), transparent 24%),
conic-gradient(from 210deg at 50% 110%, rgba(255,255,255,.06), transparent 18%, rgba(255,255,255,.03) 38%, transparent 58%, rgba(143,162,255,.05) 78%, transparent 100%);
mix-blend-mode:screen;
opacity:.72;
animation:skyBloomDrift 18s ease-in-out infinite alternate;
}
body::after{
z-index:0;
background-image:
linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,.018)),
radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0);
background-size:100% 100%, 4px 4px;
opacity:.18;
mix-blend-mode:soft-light;
}
body.page-ready{ opacity:1; transform:none; filter:none; }
body.page-leaving{ opacity:0; transform:translateY(10px) scale(.992); filter:blur(4px); pointer-events:none; }
html{
scrollbar-color: rgba(var(--accent-1-rgb), .85) rgba(8,11,24,.4);
scrollbar-width: thin;
}
body,
.theme-panel,
.player-list,
.baccarat-player-list,
.craps-player-list,
.blackjack-screen,
.slots-screen,
.keno-screen,
.sicbo-screen,
.roulette-screen,
.table-screen,
.midnight-screen,
.baccarat-screen,
.craps-screen{
scrollbar-color: rgba(var(--accent-1-rgb), .85) var(--scrollbar-track);
scrollbar-width: thin;
}
body::-webkit-scrollbar,
.theme-panel::-webkit-scrollbar,
.player-list::-webkit-scrollbar,
.baccarat-player-list::-webkit-scrollbar,
.craps-player-list::-webkit-scrollbar,
.blackjack-screen::-webkit-scrollbar,
.slots-screen::-webkit-scrollbar,
.keno-screen::-webkit-scrollbar,
.sicbo-screen::-webkit-scrollbar,
.roulette-screen::-webkit-scrollbar,
.table-screen::-webkit-scrollbar,
.midnight-screen::-webkit-scrollbar,
.baccarat-screen::-webkit-scrollbar,
.craps-screen::-webkit-scrollbar{
width:var(--scrollbar-size);
height:var(--scrollbar-size);
}
body::-webkit-scrollbar-track,
.theme-panel::-webkit-scrollbar-track,
.player-list::-webkit-scrollbar-track,
.baccarat-player-list::-webkit-scrollbar-track,
.craps-player-list::-webkit-scrollbar-track,
.blackjack-screen::-webkit-scrollbar-track,
.slots-screen::-webkit-scrollbar-track,
.keno-screen::-webkit-scrollbar-track,
.sicbo-screen::-webkit-scrollbar-track,
.roulette-screen::-webkit-scrollbar-track,
.table-screen::-webkit-scrollbar-track,
.midnight-screen::-webkit-scrollbar-track,
.baccarat-screen::-webkit-scrollbar-track,
.craps-screen::-webkit-scrollbar-track{
background:var(--scrollbar-track);
border-radius:999px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
body::-webkit-scrollbar-thumb,
.theme-panel::-webkit-scrollbar-thumb,
.player-list::-webkit-scrollbar-thumb,
.baccarat-player-list::-webkit-scrollbar-thumb,
.craps-player-list::-webkit-scrollbar-thumb,
.blackjack-screen::-webkit-scrollbar-thumb,
.slots-screen::-webkit-scrollbar-thumb,
.keno-screen::-webkit-scrollbar-thumb,
.sicbo-screen::-webkit-scrollbar-thumb,
.roulette-screen::-webkit-scrollbar-thumb,
.table-screen::-webkit-scrollbar-thumb,
.midnight-screen::-webkit-scrollbar-thumb,
.baccarat-screen::-webkit-scrollbar-thumb,
.craps-screen::-webkit-scrollbar-thumb{
background:var(--scrollbar-thumb);
border-radius:999px;
border:2px solid transparent;
background-clip:padding-box;
box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 0 0 1px var(--scrollbar-thumb-border);
}
body::-webkit-scrollbar-thumb:hover,
.theme-panel::-webkit-scrollbar-thumb:hover,
.player-list::-webkit-scrollbar-thumb:hover,
.baccarat-player-list::-webkit-scrollbar-thumb:hover,
.craps-player-list::-webkit-scrollbar-thumb:hover,
.blackjack-screen::-webkit-scrollbar-thumb:hover,
.slots-screen::-webkit-scrollbar-thumb:hover,
.keno-screen::-webkit-scrollbar-thumb:hover,
.sicbo-screen::-webkit-scrollbar-thumb:hover,
.roulette-screen::-webkit-scrollbar-thumb:hover,
.table-screen::-webkit-scrollbar-thumb:hover,
.midnight-screen::-webkit-scrollbar-thumb:hover,
.baccarat-screen::-webkit-scrollbar-thumb:hover,
.craps-screen::-webkit-scrollbar-thumb:hover{
background:var(--scrollbar-thumb-hover);
}
body::-webkit-scrollbar-corner,
.theme-panel::-webkit-scrollbar-corner,
.player-list::-webkit-scrollbar-corner,
.baccarat-player-list::-webkit-scrollbar-corner,
.craps-player-list::-webkit-scrollbar-corner,
.blackjack-screen::-webkit-scrollbar-corner,
.slots-screen::-webkit-scrollbar-corner,
.keno-screen::-webkit-scrollbar-corner,
.sicbo-screen::-webkit-scrollbar-corner,
.roulette-screen::-webkit-scrollbar-corner,
.table-screen::-webkit-scrollbar-corner,
.midnight-screen::-webkit-scrollbar-corner,
.baccarat-screen::-webkit-scrollbar-corner,
.craps-screen::-webkit-scrollbar-corner{
background:transparent;
}
@keyframes gradientShift {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes skyBloomDrift {0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-10px,0) scale(1.03)}}
.stars { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.star { position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 8px rgba(255,255,255,.6); animation:twinkle linear infinite; }
@keyframes twinkle {0%,100%{opacity:.25; transform:scale(1)}50%{opacity:1; transform:scale(1.8)}}
.skyline {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 360px;
z-index: 0;
pointer-events: none;
overflow: hidden;
perspective: 1000px;
}
.skyline::before{
content:"";
position:absolute;
left:-10%;
right:-10%;
bottom:28px;
height:150px;
background:
radial-gradient(ellipse at 50% 100%, rgba(113,144,255,.18), transparent 62%),
linear-gradient(180deg, rgba(145,186,255,.08), rgba(75,94,193,.04) 36%, rgba(0,0,0,0) 100%);
filter:blur(18px);
opacity:.92;
pointer-events:none;
}
.skyline-layer {
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 100%;
background-repeat: no-repeat;
background-position: bottom center;
transition: transform .18s ease-out;
will-change: transform;
filter: drop-shadow(0 0 18px rgba(255,255,255,.04));
}
.skyline-layer::before {
content: "";
position: absolute;
inset: 0;
background-repeat: repeat-x;
background-position: bottom left;
background-size: 100% 100%;
}
.skyline-layer.back {
opacity: .22;
height: 108%;
filter: blur(1px) drop-shadow(0 0 18px rgba(135,151,255,.08));
}
.skyline-layer.mid {
opacity: .42;
height: 114%;
filter: drop-shadow(0 0 22px rgba(126,146,255,.1));
}
.skyline-layer.front {
opacity: 1;
height: 122%;
filter: drop-shadow(0 10px 24px rgba(0,0,0,.26));
}
.skyline-layer.back::before {
background-image: url("data:image/svg+xml;utf8,");
}
.skyline-layer.mid::before {
background-image: url("data:image/svg+xml;utf8,");
}
.skyline-layer.front::before {
background-image: url("data:image/svg+xml;utf8,");
}
.skyline::after {
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:112px;
background:
linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.18) 56%, transparent),
linear-gradient(90deg, transparent, rgba(179,198,255,.08), transparent);
pointer-events:none;
}
.skyline-objects{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
overflow:hidden;
}
.skyline-fogbank{
position:absolute;
bottom:44px;
height:94px;
border-radius:999px;
background:radial-gradient(circle at 50% 50%, rgba(163,201,255,.18), rgba(105,132,215,.1) 42%, rgba(255,255,255,0) 72%);
filter:blur(18px);
opacity:.58;
animation:fogDrift 18s ease-in-out infinite alternate;
}
.fogbank-a{ left:8%; width:300px; }
.fogbank-b{ right:4%; width:380px; animation-duration:24s; animation-delay:-3s; }
.skyline-wheel{
position:absolute;
left:11%;
bottom:34px;
width:124px;
height:124px;
border-radius:50%;
opacity:.52;
filter:drop-shadow(0 0 12px rgba(var(--accent-1-rgb), .22));
animation:wheelSpin 26s linear infinite;
}
.wheel-ring,
.wheel-hub,
.wheel-spoke{
position:absolute;
inset:0;
border-radius:50%;
}
.wheel-ring{
border:3px solid rgba(186,221,255,.22);
box-shadow:0 0 0 7px rgba(120,158,255,.06), inset 0 0 0 1px rgba(255,255,255,.12);
}
.wheel-hub{
inset:50%;
width:14px;
height:14px;
margin:-7px;
background:rgba(214,236,255,.65);
box-shadow:0 0 18px rgba(164,198,255,.42);
}
.wheel-spoke{
left:50%;
top:50%;
width:2px;
height:50%;
transform-origin:50% 0;
background:linear-gradient(180deg, rgba(214,235,255,.48), rgba(214,235,255,0));
}
.spoke-a{ transform:translateX(-50%) rotate(0deg); }
.spoke-b{ transform:translateX(-50%) rotate(45deg); }
.spoke-c{ transform:translateX(-50%) rotate(90deg); }
.spoke-d{ transform:translateX(-50%) rotate(135deg); }
.skyline-sign{
position:absolute;
bottom:132px;
width:104px;
height:38px;
opacity:.8;
animation:signPulse 4.8s ease-in-out infinite;
}
.sign-west{ left:25%; }
.sign-east{ right:18%; animation-delay:-2.2s; }
.sign-frame{
position:absolute;
inset:0;
border-radius:12px;
border:1px solid rgba(255,255,255,.18);
background:linear-gradient(180deg, rgba(20,26,48,.62), rgba(6,10,22,.82));
box-shadow:0 0 18px rgba(var(--accent-1-rgb), .15), inset 0 0 18px rgba(var(--accent-2-rgb), .12);
}
.sign-copy{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
letter-spacing:.24em;
font-size:.7rem;
font-weight:800;
color:rgba(218,240,255,.88);
text-shadow:0 0 10px rgba(var(--accent-1-rgb), .6), 0 0 18px rgba(var(--accent-2-rgb), .45);
}
.skyline-beacon{
position:absolute;
bottom:132px;
width:180px;
height:260px;
transform-origin:50% 100%;
background:linear-gradient(180deg, rgba(255,255,255,0), rgba(184,214,255,.12) 35%, rgba(var(--accent-1-rgb), .22) 100%);
clip-path:polygon(48% 0, 52% 0, 72% 100%, 28% 100%);
opacity:.18;
filter:blur(1px);
animation:beaconSweep 10s ease-in-out infinite;
}
.beacon-left{ left:33%; }
.beacon-right{ right:30%; animation-delay:-4.5s; }
.skyline-comet{
position:absolute;
width:140px;
height:4px;
border-radius:999px;
background:linear-gradient(90deg, rgba(255,255,255,0), rgba(202,232,255,.95));
box-shadow:0 0 14px rgba(172,206,255,.42);
opacity:.7;
}
.comet-a{
top:20%;
left:12%;
transform:rotate(-16deg);
animation:cometGlide 16s linear infinite;
}
.comet-b{
top:30%;
right:10%;
width:110px;
transform:rotate(-22deg);
animation:cometGlide 19s linear infinite;
animation-delay:-8s;
}
@keyframes fogDrift{
from{transform:translate3d(-14px,0,0) scale(1)}
to{transform:translate3d(16px,-6px,0) scale(1.08)}
}
@keyframes wheelSpin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@keyframes signPulse{
0%,100%{opacity:.7; transform:translateY(0)}
50%{opacity:1; transform:translateY(-2px)}
}
@keyframes beaconSweep{
0%,100%{transform:rotate(-10deg) scaleY(1)}
50%{transform:rotate(10deg) scaleY(1.05)}
}
@keyframes cometGlide{
0%{opacity:0; transform:translate3d(-120px,-30px,0) rotate(-16deg)}
10%,60%{opacity:.78}
100%{opacity:0; transform:translate3d(220px,90px,0) rotate(-16deg)}
}
.moon-wrap {
position:fixed; top:30px; left:30px; width:128px; height:128px; z-index:1; pointer-events:auto;
display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 34px rgba(170,140,255,.22)) drop-shadow(0 0 20px rgba(255,245,200,.16));
transition:transform .3s ease, filter .3s ease;
isolation:isolate;
}
.moon, .moon-glow, .moon-halo { position:absolute; border-radius:50%; transition:transform .24s ease, filter .24s ease, opacity .24s ease; }
.moon-glow {
width:128px; height:128px;
background:
radial-gradient(circle, rgba(162,126,255,.28) 0%, rgba(120,106,255,.22) 22%, rgba(255,245,185,.16) 44%, rgba(255,255,255,0) 72%);
animation:moonPulse 4.6s ease-in-out infinite;
filter:blur(1px);
}
.moon {
width:78px; height:78px;
background:
radial-gradient(circle at 30% 28%, #fffef7 0%, #f7f0cf 50%, #d8cfa6 76%, #b7a677 100%);
box-shadow:
inset -13px -12px 0 rgba(159,140,91,.18),
inset 9px 7px 0 rgba(255,255,255,.42),
0 0 28px rgba(255,244,190,.24),
0 0 40px rgba(131,111,255,.15);
}
.moon::before, .moon::after {
content:""; position:absolute; border-radius:50%; background:rgba(159,145,103,.16);
box-shadow: inset 2px 2px 0 rgba(255,255,255,.18);
}
.moon::before { width:14px; height:14px; left:17px; top:18px; }
.moon::after { width:10px; height:10px; right:18px; bottom:16px; }
.moon-halo {
width:92px; height:92px; border:1px solid rgba(223,218,255,.22);
box-shadow:0 0 0 10px rgba(170,160,255,.06), 0 0 0 22px rgba(255,250,225,.028);
}
.moon-wrap::after{
content:"";
position:absolute;
width:10px; height:10px; border-radius:50%;
right:24px; top:18px;
background:rgba(255,255,255,.92);
box-shadow:0 0 10px rgba(255,255,255,.75), 0 0 22px rgba(159,136,255,.55);
opacity:.9;
animation:moonSparkle 3.6s ease-in-out infinite;
}
.moon-wrap:hover {
transform:translateY(-2px) scale(1.02);
filter:drop-shadow(0 0 42px rgba(138,111,255,.28)) drop-shadow(0 0 22px rgba(255,245,200,.22));
}
.moon-wrap:hover .moon, .moon-wrap:hover .moon-glow, .moon-wrap:hover .moon-halo {
animation:moonHoverShake .36s linear 3;
transform:scale(1.05);
filter:brightness(1.1);
}
@keyframes moonPulse { 0%,100%{ transform:scale(1); opacity:.84; } 50%{ transform:scale(1.065); opacity:1; } }
@keyframes moonHoverShake { 0%,100%{ transform:translateX(0) scale(1.05);} 25%{ transform:translateX(-1.8px) rotate(-1.2deg) scale(1.05);} 75%{ transform:translateX(1.8px) rotate(1.2deg) scale(1.05);} }
@keyframes moonSparkle { 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.2);} }
.premium-aurora, .premium-vignette { position:fixed; inset:0; pointer-events:none; }
.premium-aurora {
z-index:0;
background:
radial-gradient(ellipse at 18% 8%, rgba(255,248,193,.10), transparent 32%),
radial-gradient(ellipse at 75% 18%, rgba(88,143,255,.13), transparent 38%),
radial-gradient(ellipse at 54% 12%, rgba(148,88,255,.12), transparent 40%);
filter:blur(10px);
animation:auroraShift 14s ease-in-out infinite alternate;
}
.premium-vignette {
z-index:1;
background:radial-gradient(circle at center, transparent 46%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.34) 100%);
}
@keyframes auroraShift { from{ transform:translateY(0) scale(1);} to{ transform:translateY(-8px) scale(1.02);} }
/* Page-specific atmosphere pass */
body{
--room-core:rgba(77,124,255,.18);
--room-glow:rgba(124,77,255,.18);
--room-warm:rgba(255,217,127,.1);
--room-floor:rgba(22,28,58,.58);
--room-line:rgba(158,231,255,.13);
--room-spark:rgba(255,255,255,.18);
--room-shadow:rgba(0,0,0,.52);
--room-grid:rgba(255,255,255,.038);
--room-skyline-filter:drop-shadow(0 10px 24px rgba(0,0,0,.3));
background:
radial-gradient(circle at 50% -12%, var(--room-warm), transparent 30%),
radial-gradient(circle at 14% 18%, var(--room-core), transparent 32%),
radial-gradient(circle at 86% 14%, var(--room-glow), transparent 34%),
linear-gradient(-45deg,var(--bg1),var(--bg2),var(--bg3),var(--bg4));
background-size:100% 100%, 100% 100%, 100% 100%, 420% 420%;
}
body::before{
background:
radial-gradient(ellipse at 50% 106%, var(--room-floor), transparent 54%),
radial-gradient(circle at 18% 12%, var(--room-warm), transparent 22%),
radial-gradient(circle at 78% 22%, var(--room-core), transparent 26%),
conic-gradient(from 210deg at 50% 110%, rgba(255,255,255,.08), transparent 18%, rgba(255,255,255,.03) 38%, transparent 58%, var(--room-glow) 78%, transparent 100%);
opacity:.86;
}
body::after{
background-image:
linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,.026) 28% 29%, transparent 29% 58%, rgba(255,255,255,.018) 58% 59%, transparent 59%),
radial-gradient(circle at 1px 1px, var(--room-spark) 1px, transparent 0),
linear-gradient(var(--room-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--room-grid) 1px, transparent 1px);
background-size:180px 180px, 4px 4px, 92px 92px, 92px 92px;
opacity:.22;
mask-image:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.45) 58%, rgba(0,0,0,.8));
}
.premium-aurora::before,
.premium-aurora::after,
.premium-vignette::before,
.premium-vignette::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
}
.premium-aurora{
background:
radial-gradient(ellipse at 16% 10%, color-mix(in srgb, var(--room-warm), transparent 18%), transparent 34%),
radial-gradient(ellipse at 80% 16%, color-mix(in srgb, var(--room-core), transparent 10%), transparent 40%),
radial-gradient(ellipse at 52% 8%, color-mix(in srgb, var(--room-glow), transparent 12%), transparent 44%);
}
.premium-aurora::before{
background:
linear-gradient(105deg, transparent 12%, var(--room-line) 17%, transparent 24% 44%, rgba(255,255,255,.04) 48%, transparent 55%),
linear-gradient(72deg, transparent 42%, color-mix(in srgb, var(--room-core), transparent 30%) 50%, transparent 62%);
filter:blur(14px);
opacity:.56;
transform:translate3d(-2%,0,0);
animation:roomLightSweep 20s ease-in-out infinite alternate;
}
.premium-aurora::after{
inset:10% -16% auto -16%;
height:44%;
background:
radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.09), transparent 12%),
repeating-linear-gradient(90deg, transparent 0 72px, var(--room-line) 72px 73px, transparent 73px 150px);
opacity:.2;
filter:blur(.3px);
transform:perspective(780px) rotateX(58deg);
transform-origin:50% 100%;
}
.premium-vignette{
background:
radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.16) 75%, rgba(0,0,0,.42) 100%),
linear-gradient(180deg, transparent 56%, rgba(0,0,0,.24));
}
.premium-vignette::before{
top:auto;
height:38%;
background:
linear-gradient(180deg, transparent, rgba(0,0,0,.36)),
repeating-linear-gradient(90deg, transparent 0 118px, var(--room-line) 118px 119px, transparent 119px 236px),
repeating-linear-gradient(0deg, transparent 0 58px, rgba(255,255,255,.035) 58px 59px, transparent 59px 116px);
opacity:.48;
transform:perspective(680px) rotateX(64deg) translateY(10%);
transform-origin:bottom;
}
.premium-vignette::after{
background:
radial-gradient(circle at 50% 100%, rgba(255,255,255,.055), transparent 28%),
radial-gradient(circle at 18% 94%, var(--room-core), transparent 20%),
radial-gradient(circle at 82% 94%, var(--room-glow), transparent 22%);
opacity:.42;
mix-blend-mode:screen;
}
.skyline-layer.front{filter:var(--room-skyline-filter);}
@keyframes roomLightSweep{
from{transform:translate3d(-3%,0,0) scale(1)}
to{transform:translate3d(3%,-12px,0) scale(1.03)}
}
body[data-site-section="hub"]{
--room-core:rgba(70,120,255,.2);
--room-glow:rgba(181,96,255,.2);
--room-warm:rgba(255,220,142,.13);
--room-floor:rgba(22,22,54,.62);
--room-line:rgba(159,136,255,.16);
--room-spark:rgba(255,248,210,.22);
}
body[data-site-section="house"]{
--room-core:rgba(180,202,255,.16);
--room-glow:rgba(255,210,128,.15);
--room-warm:rgba(255,246,202,.14);
--room-floor:rgba(34,28,44,.58);
--room-line:rgba(255,228,166,.14);
--room-spark:rgba(255,244,210,.2);
}
body[data-site-section="guide"]{
--room-core:rgba(89,173,255,.17);
--room-glow:rgba(106,111,255,.16);
--room-warm:rgba(190,230,255,.1);
--room-floor:rgba(16,30,58,.58);
--room-line:rgba(158,231,255,.15);
--room-spark:rgba(206,236,255,.2);
}
body[data-page-game="poker"]{
--room-core:rgba(20,184,95,.18);
--room-glow:rgba(77,124,255,.16);
--room-warm:rgba(255,214,126,.12);
--room-floor:rgba(8,52,34,.64);
--room-line:rgba(93,255,169,.14);
--room-spark:rgba(192,255,219,.18);
--room-skyline-filter:drop-shadow(0 10px 24px rgba(0,0,0,.34)) drop-shadow(0 0 16px rgba(34,211,141,.08));
}
body[data-page-game="blackjack"]{
--room-core:rgba(23,215,125,.18);
--room-glow:rgba(240,174,43,.16);
--room-warm:rgba(255,222,138,.14);
--room-floor:rgba(12,58,37,.62);
--room-line:rgba(255,218,128,.15);
--room-spark:rgba(255,242,196,.22);
}
body[data-page-game="roulette"]{
--room-core:rgba(234,71,95,.18);
--room-glow:rgba(77,124,255,.16);
--room-warm:rgba(255,230,180,.1);
--room-floor:rgba(58,12,24,.64);
--room-line:rgba(255,127,141,.16);
--room-spark:rgba(255,214,222,.2);
}
body[data-page-game="midnight"]{
--room-core:rgba(124,77,255,.22);
--room-glow:rgba(158,231,255,.15);
--room-warm:rgba(255,217,127,.12);
--room-floor:rgba(30,18,72,.64);
--room-line:rgba(178,153,255,.18);
--room-spark:rgba(235,228,255,.22);
}
body[data-page-game="keno"]{
--room-core:rgba(45,212,191,.18);
--room-glow:rgba(77,124,255,.15);
--room-warm:rgba(255,226,150,.09);
--room-floor:rgba(8,46,58,.62);
--room-line:rgba(125,255,232,.15);
--room-spark:rgba(200,255,246,.2);
}
body[data-page-game="sicbo"]{
--room-core:rgba(240,174,43,.18);
--room-glow:rgba(255,127,141,.13);
--room-warm:rgba(255,237,180,.12);
--room-floor:rgba(58,36,12,.62);
--room-line:rgba(255,209,116,.16);
--room-spark:rgba(255,235,190,.22);
}
body[data-page-game="slots"]{
--room-core:rgba(255,89,165,.18);
--room-glow:rgba(158,231,255,.14);
--room-warm:rgba(255,214,126,.11);
--room-floor:rgba(54,16,58,.62);
--room-line:rgba(255,137,196,.15);
--room-spark:rgba(255,219,238,.22);
}
body[data-page-game="baccarat"]{
--room-core:rgba(35,215,125,.16);
--room-glow:rgba(255,217,127,.16);
--room-warm:rgba(255,244,202,.12);
--room-floor:rgba(12,46,38,.62);
--room-line:rgba(255,220,145,.14);
--room-spark:rgba(238,255,228,.2);
}
body[data-page-game="craps"]{
--room-core:rgba(72,196,255,.17);
--room-glow:rgba(240,174,43,.14);
--room-warm:rgba(255,230,180,.1);
--room-floor:rgba(7,42,56,.62);
--room-line:rgba(139,223,255,.16);
--room-spark:rgba(216,246,255,.2);
}
body[data-room="mines"]{
--room-core:rgba(158,231,255,.14);
--room-glow:rgba(255,95,124,.14);
--room-warm:rgba(255,220,142,.08);
--room-floor:rgba(18,26,44,.64);
--room-line:rgba(255,127,141,.12);
--room-spark:rgba(210,230,255,.18);
}
body[data-page-game="roulette"] .premium-aurora::after,
body[data-page-game="midnight"] .premium-aurora::after{
background:
radial-gradient(circle at 78% 42%, transparent 0 58px, rgba(255,255,255,.16) 59px 61px, transparent 62px 92px, rgba(255,255,255,.1) 93px 95px, transparent 96px),
conic-gradient(from 18deg at 78% 42%, var(--room-core), transparent 9deg 22deg, var(--room-glow) 24deg 34deg, transparent 36deg 50deg, var(--room-warm) 54deg 62deg, transparent 66deg);
opacity:.22;
transform:none;
filter:blur(.2px);
}
body[data-page-game="slots"] .premium-vignette::before{
background:
linear-gradient(180deg, transparent, rgba(0,0,0,.36)),
repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,.08) 76px 78px, transparent 78px 154px),
repeating-linear-gradient(90deg, rgba(255,89,165,.1) 0 18px, rgba(158,231,255,.08) 18px 36px, rgba(255,217,127,.08) 36px 54px);
}
body[data-page-game="keno"]::after,
body[data-site-section="guide"]::after{
background-image:
radial-gradient(circle at center, var(--room-line) 0 2px, transparent 2.5px),
radial-gradient(circle at 1px 1px, var(--room-spark) 1px, transparent 0),
linear-gradient(var(--room-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--room-grid) 1px, transparent 1px);
background-size:70px 70px, 4px 4px, 92px 92px, 92px 92px;
}
body[data-page-game="sicbo"] .premium-vignette::after,
body[data-page-game="craps"] .premium-vignette::after{
background:
radial-gradient(circle at 22% 86%, rgba(255,255,255,.12) 0 7px, transparent 8px),
radial-gradient(circle at 27% 91%, rgba(255,255,255,.12) 0 7px, transparent 8px),
radial-gradient(circle at 78% 88%, rgba(255,255,255,.12) 0 7px, transparent 8px),
radial-gradient(circle at 50% 100%, rgba(255,255,255,.055), transparent 28%),
radial-gradient(circle at 18% 94%, var(--room-core), transparent 20%),
radial-gradient(circle at 82% 94%, var(--room-glow), transparent 22%);
opacity:.46;
}
body[data-site-section="chill"]{
--room-core:rgba(115,198,255,.14);
--room-glow:rgba(169,140,255,.15);
--room-warm:rgba(255,244,202,.08);
--room-floor:rgba(13,24,48,.5);
--room-line:rgba(184,214,255,.12);
--room-spark:rgba(232,244,255,.18);
--room-grid:rgba(255,255,255,.028);
background:
radial-gradient(circle at 50% -18%, rgba(255,246,210,.1), transparent 28%),
radial-gradient(circle at 16% 18%, var(--room-core), transparent 34%),
radial-gradient(circle at 88% 16%, var(--room-glow), transparent 36%),
linear-gradient(180deg,#030712 0%,#10133b 46%,#040711 100%);
background-size:100% 100%;
animation:none;
}
body[data-site-section="chill"]::before{
background:
radial-gradient(ellipse at 50% 106%, rgba(96,124,180,.22), transparent 58%),
radial-gradient(circle at 22% 20%, var(--room-core), transparent 28%),
radial-gradient(circle at 72% 14%, var(--room-glow), transparent 32%),
linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
opacity:.74;
}
body[data-site-section="chill"]::after{
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0),
linear-gradient(120deg, transparent 0 46%, rgba(184,214,255,.035) 46% 47%, transparent 47%);
background-size:5px 5px, 150px 150px;
opacity:.16;
mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.34) 52%, rgba(0,0,0,.72));
}
body[data-site-section="chill"] .premium-aurora::before{
background:
linear-gradient(112deg, transparent 18%, rgba(158,231,255,.09) 28%, transparent 42%),
linear-gradient(74deg, transparent 42%, rgba(169,140,255,.1) 54%, transparent 68%);
opacity:.44;
filter:blur(18px);
animation:chillCurtainDrift 26s ease-in-out infinite alternate;
}
body[data-site-section="chill"] .premium-vignette::before{
height:34%;
background:
linear-gradient(180deg, transparent, rgba(0,0,0,.42)),
repeating-linear-gradient(90deg, transparent 0 140px, rgba(184,214,255,.08) 140px 141px, transparent 141px 280px);
opacity:.34;
}
body[data-site-section="chill"] .moon-wrap{
left:auto;
right:24px;
top:22px;
transform:scale(.76);
transform-origin:100% 0;
opacity:.58;
pointer-events:none;
filter:drop-shadow(0 0 32px rgba(158,231,255,.16)) drop-shadow(0 0 18px rgba(255,245,200,.12));
}
body[data-site-section="chill"] .moon-wrap:hover{
transform:scale(.76);
}
body[data-chill-room="solitaire"]{--room-core:rgba(255,220,142,.11);--room-glow:rgba(105,158,255,.12);}
body[data-chill-room="chess"]{--room-core:rgba(210,225,255,.12);--room-glow:rgba(89,112,180,.14);}
body[data-chill-room="checkers"]{--room-core:rgba(255,110,138,.12);--room-glow:rgba(158,231,255,.12);}
body[data-chill-room="sudoku"]{--room-core:rgba(166,205,255,.12);--room-glow:rgba(255,244,202,.08);}
body[data-chill-room="2048"]{--room-core:rgba(255,205,116,.12);--room-glow:rgba(169,140,255,.14);}
body[data-chill-room="match"]{--room-core:rgba(212,142,255,.12);--room-glow:rgba(255,205,116,.11);}
body[data-chill-room="snake"]{--room-core:rgba(125,255,217,.12);--room-glow:rgba(158,231,255,.12);}
body[data-chill-room="kenken"]{--room-core:rgba(238,248,255,.12);--room-glow:rgba(255,220,142,.11);}
body[data-chill-room="towers"]{--room-core:rgba(158,231,255,.13);--room-glow:rgba(255,217,127,.12);}
body[data-chill-room="lights"]{--room-core:rgba(255,246,180,.12);--room-glow:rgba(117,205,255,.13);}
@keyframes chillCurtainDrift{
from{transform:translate3d(-2%,0,0) scale(1)}
to{transform:translate3d(2%,-14px,0) scale(1.04)}
}
.blackjack-screen { position:relative; z-index:2; width:100%; min-height:100vh; padding:20px 20px 40px; display:none; flex-direction:column; animation:panelFloat .35s ease; }
.blackjack-layout {
width:min(1460px, 100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:stretch;
}
.blackjack-table {
width:100%; min-height:560px; border-radius:42px;
background:radial-gradient(circle at 50% 40%, rgba(25,120,70,.30), rgba(9,61,36,.88)), linear-gradient(135deg, rgba(16,84,48,.96), rgba(8,48,29,.98));
border:10px solid #29170d; box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.45);
position:relative; padding:28px; display:flex; flex-direction:column; gap:22px; overflow:hidden;
}
.blackjack-table::before { content:""; position:absolute; inset:18px; border:2px solid rgba(255,255,255,.08); border-radius:30px; pointer-events:none; }
.blackjack-table::after {
content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.06), transparent 24%, transparent 72%, rgba(255,255,255,.04));
pointer-events:none; mix-blend-mode:screen;
}
.blackjack-header { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.blackjack-dealer-title { font-size:1rem; font-weight:800; color:rgba(255,255,255,.92); }
.blackjack-subtitle { font-size:.92rem; color:rgba(255,255,255,.72); }
.blackjack-hands { position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:auto; }
.blackjack-seat {
min-height:120px; border-radius:18px; background:linear-gradient(180deg, rgba(18,28,40,.78), rgba(12,24,34,.66)); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px);
box-shadow:0 10px 24px rgba(0,0,0,.25); padding:14px; transition:transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
}
.blackjack-seat.turn { outline:2px solid rgba(60,255,150,.7); box-shadow:0 0 24px rgba(60,255,150,.28); transform:translateY(-2px); }
.blackjack-seat-name { font-weight:800; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.blackjack-seat-stack, .blackjack-seat-state { font-size:.84rem; color:rgba(255,255,255,.72); }
.blackjack-seat-cards { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px; min-height:84px; }
.blackjack-bottom-ui {
min-height:560px; display:flex; flex-direction:column; gap:14px; margin:0; padding:18px;
background:linear-gradient(180deg, rgba(10,12,24,.78), rgba(9,12,26,.6)); border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(14px); border-radius:34px; box-shadow:0 24px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
position:relative; overflow:hidden;
}
.blackjack-bottom-ui::before {
content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%); pointer-events:none;
}
.blackjack-bottom-ui .player-hand-box,
.blackjack-bottom-ui .summary-box,
.blackjack-bottom-ui .blackjack-actions { width:100%; align-self:stretch; position:relative; z-index:1; }
.blackjack-bottom-ui .player-hand-box,
.blackjack-bottom-ui .summary-box { padding:16px; border-radius:22px; background:rgba(255,255,255,.04); }
.blackjack-bottom-ui .player-hand-box { flex:0 0 auto; }
.blackjack-bottom-ui .summary-box { margin-top:auto; }
.blackjack-bottom-ui .cards-row { justify-content:flex-start; min-height:auto; }
.blackjack-bottom-ui .card,
.blackjack-bottom-ui .dealing-card { width:58px; height:84px; font-size:1.1rem; }
.blackjack-actions { display:grid; grid-template-columns:1fr; gap:12px; }
.blackjack-actions button { padding:15px 14px; border:none; border-radius:16px; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .15s ease, opacity .2s ease, filter .2s ease; color:white; }
.blackjack-actions button:hover { transform:translateY(-1px); }
.blackjack-actions button:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; transform:none !important; }
@media (max-width:1100px){
.blackjack-layout{grid-template-columns:minmax(0,1fr) 320px}
.blackjack-hands{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.blackjack-screen{padding:12px 12px 28px}
.blackjack-layout{grid-template-columns:1fr}
.blackjack-table{padding:18px; border-radius:28px}
.blackjack-hands{grid-template-columns:1fr}
.blackjack-bottom-ui { min-height:unset; }
.blackjack-bottom-ui .cards-row { justify-content:center; }
.blackjack-bottom-ui .card,
.blackjack-bottom-ui .dealing-card { width:56px; height:82px; }
}
.mode-select {
margin: 16px 0 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mode-btn {
padding: 14px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.08);
color: white;
font-weight: 800;
cursor: pointer;
transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mode-btn:hover { transform: translateY(-2px); }
.mode-btn.active {
background: linear-gradient(135deg,var(--blue1),var(--purple1));
border-color: rgba(255,255,255,.28);
box-shadow: 0 10px 25px rgba(86,96,255,.28);
}
.game-type-pill {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
font-size:.86rem;
font-weight:800;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.92);
margin-top:12px;
}
.container { position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.panel {
width:100%; max-width:460px; background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--glass-border);
border-radius:var(--panel-radius); padding:var(--panel-padding); box-shadow:0 20px 50px rgba(0,0,0,.45); text-align:center; animation:panelFloat .5s ease;
position:relative; overflow:hidden; isolation:isolate; background-clip:padding-box; -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
@keyframes panelFloat {from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:translateY(0)}}
.title { font-size:2.3rem; font-weight:800; margin-bottom:10px; letter-spacing:.5px; }
.subtitle { font-size:.98rem; color:var(--text-soft); margin-bottom:24px; }
.input {
width:100%; padding:var(--control-padding-y) var(--control-padding-x); margin-bottom:14px; border:1px solid rgba(255,255,255,.14); border-radius:var(--control-radius);
background:rgba(255,255,255,.08); color:white; font-size:1rem; outline:none; transition:.2s ease;
}
.input::placeholder { color:rgba(255,255,255,.5); }
.input:focus { border-color:rgba(130,170,255,.65); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(90,140,255,.14); }
.btn {
width:100%; padding:var(--control-padding-y) var(--control-padding-x); border:none; border-radius:var(--control-radius); font-size:1rem; font-weight:700; cursor:pointer; margin-top:10px;
position:relative;
overflow:hidden;
transition:transform .15s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg, transparent 18%, rgba(255,255,255,.16) 50%, transparent 82%);
transform:translateX(-140%);
transition:transform .7s cubic-bezier(.19,1,.22,1);
pointer-events:none;
}
.btn:hover { transform:translateY(-2px); }
.btn:hover::before,
.btn:focus-visible::before{ transform:translateX(140%); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(126,171,255,.18), 0 14px 28px rgba(0,0,0,.22);
}
.btn-primary { background:linear-gradient(135deg,var(--blue1),var(--purple1)); color:white; box-shadow:0 10px 25px rgba(86,96,255,.3); }
.btn-secondary { background:rgba(255,255,255,.1); color:white; }
.btn-success { background:linear-gradient(135deg,var(--green1),var(--green2)); color:white; box-shadow:0 10px 25px rgba(31,210,114,.28); }
.btn-danger { background:linear-gradient(135deg,var(--danger1),var(--danger2)); color:white; }
.btn-warning { background:linear-gradient(135deg,var(--warn1),var(--warn2)); color:white; }
.btn-disabled { background:rgba(255,255,255,.16); color:rgba(255,255,255,.5); cursor:not-allowed; box-shadow:none; }
.btn-disabled::before{ display:none; }
.btn-disabled:hover,
.btn-disabled:active{ transform:none; }
.hidden { display:none !important; }
.room-code-box, .settings-box, .info-box {
margin-top:18px; padding:var(--surface-padding-y) var(--surface-padding-x); border-radius:var(--surface-radius); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); font-size:1rem;
}
.room-code-box { font-weight:700; letter-spacing:1px; }
.settings-box { text-align:left; }
.settings-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:8px 0; }
.settings-row span { color:rgba(255,255,255,.82); }
.settings-row input { width:var(--settings-input-width); padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:white; }
.settings-row input:disabled { opacity:.55; cursor:not-allowed; }
.player-list {
margin-top:18px; text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:14px; max-height:220px; overflow-y:auto;
}
.player-item { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.05); margin-bottom:10px; font-size:.98rem; }
.player-item:last-child { margin-bottom:0; }
.host-badge, .dealer-badge, .blind-badge {
font-size:.8rem; padding:5px 9px; border-radius:999px; font-weight:700;
}
.host-badge { background:linear-gradient(135deg,var(--blue1),var(--purple1)); }
.dealer-badge { background:linear-gradient(135deg,#f0ae2b,#b57a16); }
.blind-badge { background:linear-gradient(135deg,#1bc76e,#119a53); }
.section-label { margin-top:18px; margin-bottom:10px; font-size:.92rem; color:rgba(255,255,255,.78); text-align:left; font-weight:700; }
.table-screen { position:relative; z-index:2; width:100%; min-height:100vh; padding:var(--screen-pad-top) var(--screen-pad-x) calc(var(--screen-pad-bottom) + 56px); display:none; flex-direction:column; justify-content:space-between; animation:panelFloat .35s ease; }
.top-bar { display:flex; justify-content:space-between; align-items:center; gap:var(--topbar-gap); margin-bottom:18px; flex-wrap:wrap; padding-right:260px; }
.glass-box { background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(var(--glass-blur)); border-radius:var(--glass-radius); padding:var(--glass-padding-y) var(--glass-padding-x); box-shadow:0 16px 35px rgba(0,0,0,.28); }
.table-area { flex:1; display:flex; align-items:center; justify-content:center; padding:10px 0 20px; position:relative; }
.poker-table {
width:min(1000px,100%); min-height:520px; border-radius:999px;
background:radial-gradient(circle at center, rgba(30,140,90,.34), rgba(10,73,44,.78)), linear-gradient(135deg, rgba(20,90,45,.95), rgba(10,55,35,.98));
border:10px solid #29170d; box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.45);
position:relative; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
}
.poker-table::before { content:""; position:absolute; inset:18px; border:2px solid rgba(255,255,255,.08); border-radius:999px; pointer-events:none; }
.poker-table::after { content:""; position:absolute; width:50%; height:180%; top:-40%; left:-20%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); transform:rotate(18deg); pointer-events:none; }
.seat {
--seat-transform:none;
position:absolute; width:128px; min-height:78px; text-align:center; padding:10px 12px; border-radius:16px; background:rgba(10,12,24,.72);
border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); box-shadow:0 10px 24px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
transform:var(--seat-transform);
}
.seat-name { font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat-stack, .seat-state { font-size:.84rem; color:rgba(255,255,255,.72); }
.seat.turn { outline:2px solid rgba(60,255,150,.7); box-shadow:0 0 24px rgba(60,255,150,.28); animation:turnPulse 1.4s ease-in-out infinite; }
.seat.folded { opacity:.55; filter:grayscale(.45); }
.seat.all-in { box-shadow:0 0 24px rgba(240,174,43,.25); }
.seat.winner { outline:2px solid rgba(103,132,255,.78); box-shadow:0 0 30px rgba(103,132,255,.30), 0 0 60px rgba(164,94,255,.18); }
@keyframes turnPulse {0%,100%{transform:var(--seat-transform) scale(1)}50%{transform:var(--seat-transform) scale(1.03)}}
.seat-1 { top:10px; left:50%; --seat-transform:translateX(-50%); }
.seat-2 { top:88px; right:60px; }
.seat-3 { bottom:150px; right:42px; }
.seat-4 { bottom:8px; left:50%; --seat-transform:translateX(-50%); min-width:152px; z-index:3; }
.seat-5 { bottom:150px; left:42px; }
.seat-6 { top:88px; left:60px; }
.table-center { position:absolute; top:52%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:18px; z-index:2; width:min(60%, 500px); pointer-events:none; }
.pot-wrap { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; }
.chip-stack { position:relative; width:42px; height:46px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); animation:chipBob 2.2s ease-in-out infinite; }
@keyframes chipBob {0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chip { position:absolute; left:0; width:42px; height:12px; border-radius:999px; border:2px solid rgba(255,255,255,.35); background:linear-gradient(180deg,#d02a43,#9f1c31); }
.chip:nth-child(1){bottom:0}.chip:nth-child(2){bottom:8px;background:linear-gradient(180deg,#324eff,#2337b5)}.chip:nth-child(3){bottom:16px;background:linear-gradient(180deg,#1bc76e,#119a53)}.chip:nth-child(4){bottom:24px;background:linear-gradient(180deg,#f0ae2b,#b57a16)}
.pot-box { text-align:center; padding:12px 24px; border-radius:18px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.09); min-width:170px; box-shadow:0 0 20px rgba(255,255,255,.04); }
.pot-label { font-size:.88rem; color:rgba(255,255,255,.72); margin-bottom:4px; }
.pot-value { font-size:1.5rem; font-weight:800; }
.cards-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; min-height:110px; }
.card {
width:72px; height:102px; border-radius:14px; background:linear-gradient(180deg,#ffffff,#e8edf7); color:#111827; display:flex; align-items:center; justify-content:center;
font-size:1.35rem; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.7);
transition:transform .12s ease, box-shadow .18s ease, filter .18s ease, opacity .2s ease; transform-origin:center center; will-change:transform; position:relative; transform-style:preserve-3d; overflow:hidden;
}
.card::after { content:""; position:absolute; top:-120%; left:-40%; width:60%; height:300%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:rotate(24deg); opacity:0; transition:opacity .18s ease; pointer-events:none; }
.card:hover::after { opacity:1; }
.card:hover { box-shadow:0 18px 30px rgba(0,0,0,.34), 0 0 18px rgba(255,255,255,.10); filter:brightness(1.04); z-index:5; }
.card.back { background:linear-gradient(180deg,#243b77,#1a2452); color:white; border:2px solid rgba(255,255,255,.16); }
.card.red { color:#b91c1c; }
.dealing-card { position:absolute; width:72px; height:102px; border-radius:14px; background:linear-gradient(180deg,#243b77,#1a2452); border:2px solid rgba(255,255,255,.16); box-shadow:0 10px 24px rgba(0,0,0,.25); pointer-events:none; z-index:30; transform:translate(-50%, -50%); }
.card-slot { width:72px; height:102px; display:flex; align-items:center; justify-content:center; perspective:900px; }
.seat-mini-cards, .seat-mini-cards-user { display:flex; gap:6px; justify-content:center; margin-top:8px; min-height:28px; }
.mini-card {
width:20px; height:28px; border-radius:6px; background:linear-gradient(180deg,#243b77,#1a2452);
border:1px solid rgba(255,255,255,.16); box-shadow:0 4px 10px rgba(0,0,0,.25); opacity:.92;
}
.mini-card.revealed { background:linear-gradient(180deg,#ffffff,#e8edf7); color:#111827; display:flex; align-items:center; justify-content:center; font-size:.52rem; font-weight:800; }
.mini-card.revealed.red { color:#b91c1c; }
.card.deal-in { animation:cardDealIn .45s cubic-bezier(.2,.85,.2,1) both; }
.card.board-pop { animation:boardPop .42s cubic-bezier(.2,.85,.2,1) both; }
.card.reveal-flip { animation:revealFlip .55s cubic-bezier(.25,.85,.2,1) both; }
.card.dim-back { opacity:.42; filter:saturate(.8); }
@keyframes cardDealIn {
0% { opacity:0; transform:translateY(26px) scale(.86) rotate(-8deg); }
100% { opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
}
@keyframes boardPop {
0% { opacity:0; transform:translateY(-18px) scale(.82); }
100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes revealFlip {
0% { opacity:0; transform:rotateY(88deg) scale(.9); }
100% { opacity:1; transform:rotateY(0deg) scale(1); }
}
.bottom-ui { display:flex; flex-direction:column; gap:var(--section-gap); margin-top:18px; margin-bottom:28px; }
.player-hand-box, .summary-box {
align-self:center; width:min(850px,100%); background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(var(--glass-blur));
border-radius:24px; padding:18px; box-shadow:0 16px 35px rgba(0,0,0,.28); text-align:center;
}
.hand-title { font-size:.95rem; color:rgba(255,255,255,.72); margin-bottom:12px; font-weight:700; }
.actions { width:min(850px,100%); align-self:center; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--section-gap); }
.actions button { padding:15px 14px; border:none; border-radius:16px; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .15s ease, opacity .2s ease, filter .2s ease; color:white; }
.actions button:hover { transform:translateY(-1px); }
.actions button:disabled, .small-btn:disabled, .raise-box input:disabled {
opacity:.42; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; transform:none !important;
}
.actions button:disabled:hover, .small-btn:disabled:hover { transform:none; }
.actions button.locked, .small-btn.locked, .raise-box input.locked {
opacity:.42; cursor:not-allowed; filter:grayscale(.2); box-shadow:none; transform:none !important;
}
.raise-box { width:min(850px,100%); align-self:center; display:flex; gap:var(--section-gap); align-items:center; flex-wrap:wrap; justify-content:center; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(var(--glass-blur)); border-radius:20px; padding:14px; }
.raise-box input { width:160px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:white; outline:none; }
.small-btn { padding:12px 16px; border:none; border-radius:12px; font-weight:700; cursor:pointer; color:white; background:linear-gradient(135deg,var(--blue1),var(--purple1)); }
.status-line, .summary-line { text-align:center; color:rgba(255,255,255,.82); font-size:.95rem; }
.showdown-banner {
position:fixed; left:50%; top:118px; transform:translateX(-50%) translateY(-10px) scale(.96);
min-width:min(760px, calc(100vw - 32px)); max-width:calc(100vw - 32px); padding:14px 22px; border-radius:20px;
background:linear-gradient(135deg, rgba(61,95,255,.20), rgba(164,94,255,.18)); border:1px solid rgba(255,255,255,.14);
box-shadow:0 18px 45px rgba(0,0,0,.34), 0 0 34px rgba(90,110,255,.16); backdrop-filter:blur(16px);
text-align:center; font-weight:900; letter-spacing:.02em; z-index:32; opacity:0; pointer-events:none;
transition:opacity .22s ease, transform .26s ease;
}
.showdown-banner.show { opacity:1; transform:translateX(-50%) translateY(0) scale(1); animation:bannerPulse 1.3s ease; }
@keyframes bannerPulse { 0%{ filter:brightness(.92);} 45%{ filter:brightness(1.12);} 100%{ filter:brightness(1);} }
.summary-line + .summary-line { margin-top:8px; }
.leave-btn { width:auto; padding:12px 16px; margin:0; }
.toast {
position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-16px); background:rgba(8,10,28,.9); border:1px solid rgba(255,255,255,.12);
color:white; padding:12px 18px; border-radius:14px; z-index:50; box-shadow:0 18px 30px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:.25s ease; backdrop-filter:blur(12px); font-weight:700;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.muted { color:rgba(255,255,255,.65); font-size:.92rem; }
.roulette-screen { position:relative; z-index:2; width:100%; min-height:100vh; padding:var(--screen-pad-top) var(--screen-pad-x) var(--screen-pad-bottom); display:none; flex-direction:column; }
.roulette-layout { width:min(1460px,100%); display:grid; grid-template-columns:minmax(360px,430px) minmax(620px,1fr); gap:var(--layout-gap); align-items:stretch; }
.roulette-side, .roulette-main {
background:rgba(7,11,28,var(--glass-alpha)); border:1px solid rgba(255,255,255,var(--glass-border-alpha)); backdrop-filter:blur(var(--glass-blur)); border-radius:30px;
box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.roulette-side::before, .roulette-main::before, .panel::before, .glass-box::before, .blackjack-bottom-ui::before {
content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%, transparent 66%, rgba(255,255,255,.04)); pointer-events:none;
}
.roulette-side { padding:var(--panel-padding); display:flex; flex-direction:column; gap:var(--section-gap); }
.roulette-main { padding:var(--surface-padding-y); display:flex; flex-direction:column; gap:var(--screen-gap); background:linear-gradient(180deg, rgba(12,23,55,.82), rgba(9,13,29,.9)); }
.roulette-wheel-stage {
position:relative; min-height:330px; border-radius:26px; background:radial-gradient(circle at 50% 42%, rgba(28,124,255,.14), rgba(5,10,30,.0) 45%), radial-gradient(circle at 50% 55%, rgba(29,191,120,.10), transparent 58%), rgba(0,0,0,.22);
border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.roulette-wheel-stage::after {
content:none;
}
.roulette-wheel-shell { position:relative; width:292px; height:292px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 20px 38px rgba(0,0,0,.42)); }
.roulette-wheel {
width:292px; height:292px; border-radius:50%; position:relative;
background:conic-gradient(from -90deg,
#18a35b 0deg 9.73deg,
#94283a 9.73deg 19.46deg,
#131927 19.46deg 29.19deg,
#94283a 29.19deg 38.92deg,
#131927 38.92deg 48.65deg,
#94283a 48.65deg 58.38deg,
#131927 58.38deg 68.11deg,
#94283a 68.11deg 77.84deg,
#131927 77.84deg 87.57deg,
#94283a 87.57deg 97.30deg,
#131927 97.30deg 107.03deg,
#94283a 107.03deg 116.76deg,
#131927 116.76deg 126.49deg,
#94283a 126.49deg 136.22deg,
#131927 136.22deg 145.95deg,
#94283a 145.95deg 155.68deg,
#131927 155.68deg 165.41deg,
#94283a 165.41deg 175.14deg,
#131927 175.14deg 184.87deg,
#94283a 184.87deg 194.60deg,
#131927 194.60deg 204.33deg,
#94283a 204.33deg 214.06deg,
#131927 214.06deg 223.79deg,
#94283a 223.79deg 233.52deg,
#131927 233.52deg 243.25deg,
#94283a 243.25deg 252.98deg,
#131927 252.98deg 262.71deg,
#94283a 262.71deg 272.44deg,
#131927 272.44deg 282.17deg,
#94283a 282.17deg 291.90deg,
#131927 291.90deg 301.63deg,
#94283a 301.63deg 311.36deg,
#131927 311.36deg 321.09deg,
#94283a 321.09deg 330.82deg,
#131927 330.82deg 340.55deg,
#94283a 340.55deg 350.28deg,
#131927 350.28deg 360deg);
border:12px solid #5a3b1f; box-shadow:inset 0 0 0 6px rgba(255,255,255,.08), 0 18px 32px rgba(0,0,0,.35); transition:transform 4.1s cubic-bezier(.12,.9,.18,1); transform:translateZ(0);
}
.roulette-wheel::before { content:""; position:absolute; inset:18px; border-radius:50%; border:2px solid rgba(255,255,255,.18); }
.roulette-wheel::after { content:""; position:absolute; inset:76px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.2), rgba(32,21,10,.95)); box-shadow:inset 0 6px 18px rgba(255,255,255,.12); }
.roulette-wheel-labels { position:absolute; inset:0; }
.roulette-wheel-labels span {
position:absolute; left:50%; top:50%; transform-origin:0 0; font-size:.78rem; font-weight:800; color:white; text-shadow:0 1px 3px rgba(0,0,0,.6); width:20px; text-align:center;
}
.roulette-wheel-pointer {
position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:28px solid #f7d97d; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); z-index:4;
}
.roulette-ball-orbit { position:absolute; inset:16px; border-radius:50%; pointer-events:none; }
.roulette-ball {
position:absolute; top:0; left:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%, -50%); background:radial-gradient(circle at 35% 35%, white, #d8e5ff 68%, #93a9d1 100%);
box-shadow:0 0 12px rgba(255,255,255,.45), 0 3px 9px rgba(0,0,0,.35); transition:transform 3.95s cubic-bezier(.12,.9,.18,1); will-change:transform; backface-visibility:hidden;
}
.roulette-stage-burst { position:absolute; inset:auto 50% 18px auto; transform:translateX(50%); font-weight:900; letter-spacing:.08em; color:rgba(255,255,255,.18); font-size:2.3rem; pointer-events:none; }
.roulette-result-chip {
position:absolute; right:18px; top:18px; min-width:90px; padding:12px 14px; border-radius:18px; background:rgba(10,15,34,.76); border:1px solid rgba(255,255,255,.12); text-align:center; box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.roulette-result-chip .n { font-size:2rem; font-weight:900; }
.roulette-result-chip .t { font-size:.78rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; }
.roulette-result-chip.red { background:linear-gradient(180deg, rgba(185,48,72,.95), rgba(126,31,49,.88)); }
.roulette-result-chip.black { background:linear-gradient(180deg, rgba(40,48,65,.95), rgba(17,21,31,.9)); }
.roulette-result-chip.green { background:linear-gradient(180deg, rgba(19,160,86,.94), rgba(14,117,63,.88)); }
.roulette-chip-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.roulette-chip {
position:relative; min-height:62px; border:none; cursor:pointer; border-radius:18px; color:white; font-weight:900; font-size:1rem;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,.08) 34%, rgba(0,0,0,.12) 35%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
box-shadow:0 12px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
border:1px solid rgba(255,255,255,.08);
}
.roulette-chip:hover { transform:translateY(-2px) scale(1.02); }
.roulette-chip.active { outline:2px solid rgba(123,221,255,.85); box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 26px rgba(0,0,0,.32); }
.roulette-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.roulette-stat { padding:14px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.roulette-stat .label { font-size:.78rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.roulette-stat .value { font-size:1.24rem; font-weight:900; }
.roulette-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.roulette-actions button, .roulette-outside button, .roulette-number-cell {
transition:transform .12s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
}
.roulette-actions button:hover, .roulette-outside button:hover, .roulette-number-cell:hover { transform:translateY(-2px); }
.roulette-outside { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.roulette-betting-board { display:flex; flex-direction:column; gap:12px; }
.roulette-board-glass { padding:14px; border-radius:24px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); }
.roulette-zero-row { display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:stretch; }
.roulette-zero-cell, .roulette-number-cell, .roulette-dozen, .roulette-column {
border:none; cursor:pointer; border-radius:14px; color:white; font-weight:800; position:relative; overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18);
}
.roulette-zero-cell::after, .roulette-number-cell::after, .roulette-dozen::after, .roulette-column::after, .roulette-outside button::after {
content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 36%, transparent 64%, rgba(255,255,255,.06)); pointer-events:none;
}
.roulette-zero-cell { min-height:188px; background:linear-gradient(180deg, #13a056, #0e753f); font-size:1.8rem; }
.roulette-numbers-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:8px; }
.roulette-number-cell { min-height:56px; font-size:1rem; }
.roulette-number-cell.red { background:linear-gradient(180deg, #b93048, #7e1f31); }
.roulette-number-cell.black { background:linear-gradient(180deg, #283041, #11151f); }
.roulette-number-cell.active-bet, .roulette-zero-cell.active-bet, .roulette-dozen.active-bet, .roulette-column.active-bet, .roulette-outside button.active-bet {
outline:2px solid rgba(123,221,255,.9); box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 10px 24px rgba(0,0,0,.24);
}
.bet-badge {
position:absolute; bottom:6px; right:6px; min-width:28px; padding:4px 7px; border-radius:999px; background:rgba(6,10,22,.85); color:#9ee7ff; font-size:.72rem; font-weight:900; border:1px solid rgba(255,255,255,.12);
}
.roulette-dozens, .roulette-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.roulette-dozen, .roulette-column, .roulette-outside button { min-height:58px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color:white; }
.roulette-history { display:flex; gap:8px; flex-wrap:wrap; }
.roulette-history-pill { min-width:38px; padding:8px 10px; border-radius:999px; text-align:center; font-weight:900; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.18); }
.roulette-history-pill.red { background:linear-gradient(180deg, rgba(185,48,72,.86), rgba(126,31,49,.76)); }
.roulette-history-pill.black { background:linear-gradient(180deg, rgba(40,48,65,.9), rgba(17,21,31,.84)); }
.roulette-history-pill.green { background:linear-gradient(180deg, rgba(19,160,86,.9), rgba(14,117,63,.82)); }
.roulette-summary-box { margin-top:auto; padding:16px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.roulette-side-title { font-size:.88rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.62); font-weight:800; }
.roulette-board-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.roulette-board-title strong { font-size:1.18rem; }
@keyframes rouletteChipPop {0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.bet-badge { animation:rouletteChipPop .2s ease; }
/* Roulette polish */
.roulette-screen,
.roulette-wheel-stage,
.roulette-wheel-shell,
.roulette-wheel,
.roulette-ball,
.roulette-number-cell,
.roulette-zero-cell,
.roulette-dozen,
.roulette-column,
.roulette-outside button,
.roulette-chip{
-webkit-tap-highlight-color: transparent;
}
.roulette-wheel-stage{
isolation:isolate;
}
.roulette-wheel-shell, .roulette-wheel, .roulette-ball{
transform-style:preserve-3d;
}
.roulette-ball-orbit{
inset:0;
}
.roulette-actions button, .roulette-chip, .roulette-number-cell, .roulette-zero-cell, .roulette-dozen, .roulette-column, .roulette-outside button{
touch-action:manipulation;
}
@media (max-width:700px){
.roulette-main{padding:14px}
.roulette-side{padding:14px}
.roulette-wheel-stage{min-height:260px;border-radius:20px}
.roulette-wheel-shell,.roulette-wheel{width:250px;height:250px}
.roulette-wheel-labels span{font-size:.68rem;width:18px}
.roulette-number-cell{min-height:50px;font-size:.95rem}
.roulette-dozen, .roulette-column, .roulette-outside button{min-height:54px}
}
@media (max-width:1150px){ .roulette-layout{grid-template-columns:1fr}.roulette-wheel-stage{min-height:290px} }
@media (max-width:700px){ .roulette-screen{padding:12px 12px 28px}.roulette-chip-row{grid-template-columns:repeat(2,1fr)}.roulette-zero-row{grid-template-columns:1fr}.roulette-zero-cell{min-height:70px}.roulette-numbers-grid{grid-template-columns:repeat(6,1fr)}.roulette-outside,.roulette-dozens,.roulette-columns,.roulette-actions,.roulette-meta-grid{grid-template-columns:1fr 1fr} }
@media (max-width:900px){
.poker-table{min-height:620px; border-radius:40px}.poker-table::before{border-radius:28px}.seat{width:106px; min-height:72px; padding:8px 10px; font-size:.9rem}
.seat-1{top:10px}.seat-2{top:84px; right:16px}.seat-3{bottom:176px; right:10px}.seat-4{bottom:10px; min-width:132px}.seat-5{bottom:176px; left:10px}.seat-6{top:84px; left:16px}.table-center{top:50%; width:min(72%,460px)}
.actions{grid-template-columns:repeat(2,1fr)} .card,.dealing-card{width:64px; height:92px; font-size:1.2rem}
}
@media (max-width:560px){
.panel{padding:22px 18px; border-radius:20px}.title{font-size:1.95rem}.table-screen{padding:12px 12px 104px}.poker-table{min-height:680px; padding:18px}.top-bar{gap:10px}.glass-box{width:100%}
.card,.dealing-card{width:56px; height:82px; border-radius:12px}.seat{width:88px; min-height:68px; font-size:.8rem}.seat-stack,.seat-state{font-size:.76rem}.seat-3,.seat-5{bottom:188px}.seat-4{bottom:10px; min-width:124px}.table-center{top:49%; width:min(78%,380px)}.actions{grid-template-columns:1fr 1fr}.raise-box{flex-direction:column}.raise-box input{width:100%}
}
/* ===== Universal browser/mobile fixes ===== */
body{
overflow-x:hidden;
}
.floating-page-nav{
position:fixed;
top:28px;
right:18px;
z-index:60;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.floating-page-nav a{
width:auto !important;
padding:10px 14px !important;
margin:0 !important;
text-decoration:none !important;
}
.moon-wrap{
top:44px;
left:28px;
}
.table-screen,
.blackjack-screen,
.roulette-screen,
.midnight-screen,
.keno-screen,
.sicbo-screen,
.craps-screen{
padding-top:26px;
}
/* Dedicated pages should never show the other two table types */
body[data-page-game="poker"] #blackjackScreen,
body[data-page-game="poker"] #rouletteScreen,
body[data-page-game="blackjack"] #gameScreen,
body[data-page-game="blackjack"] #rouletteScreen,
body[data-page-game="roulette"] #gameScreen,
body[data-page-game="roulette"] #blackjackScreen{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
/* Safer roulette animation anchoring */
.roulette-wheel-shell{
overflow:visible;
width:300px;
height:300px;
}
.roulette-wheel{
width:300px;
height:300px;
transform-origin:center center;
will-change:transform;
backface-visibility:hidden;
}
.roulette-ball-orbit{
inset:0;
overflow:visible;
}
.roulette-ball{
top:50%;
left:50%;
transform:translate(-50%, -50%) rotate(0deg) translateY(-126px);
transform-origin:center center;
will-change:transform;
backface-visibility:hidden;
}
/* Mobile: only one screen visible, easier buttons, real scrolling */
@media (max-width: 900px){
html, body{
min-height:100%;
height:auto;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
}
.moon-wrap{
top:22px;
left:18px;
transform:scale(.9);
transform-origin:top left;
}
.floating-page-nav{
left:12px;
right:12px;
top:auto;
bottom:12px;
justify-content:flex-start;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
background:rgba(10,12,24,.76);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:8px;
gap:8px;
}
.floating-page-nav::-webkit-scrollbar{
display:none;
}
.floating-page-nav a{
flex:0 0 auto;
text-align:center;
min-height:44px;
min-width:max-content;
padding:10px 12px !important;
border-radius:14px;
font-size:.88rem;
white-space:nowrap;
}
#mainContainer[style*="display: none"]{
display:none !important;
}
.table-screen,
.blackjack-screen,
.roulette-screen,
.midnight-screen,
.keno-screen,
.sicbo-screen,
.slots-screen,
.baccarat-screen,
.craps-screen{
display:none;
min-height:100vh;
height:auto;
overflow-x:hidden;
overflow-y:auto;
padding:14px 12px 44px;
}
.table-screen[style*="display: flex"],
.table-screen[style*="display:flex"],
.blackjack-screen[style*="display: flex"],
.blackjack-screen[style*="display:flex"],
.roulette-screen[style*="display: flex"],
.roulette-screen[style*="display:flex"],
.midnight-screen[style*="display: flex"],
.midnight-screen[style*="display:flex"],
.keno-screen[style*="display: flex"],
.keno-screen[style*="display:flex"],
.sicbo-screen[style*="display: flex"],
.sicbo-screen[style*="display:flex"],
.slots-screen[style*="display: flex"],
.slots-screen[style*="display:flex"],
.baccarat-screen[style*="display: flex"],
.baccarat-screen[style*="display:flex"],
.craps-screen[style*="display: flex"],
.craps-screen[style*="display:flex"]{
display:block !important;
}
.container{
min-height:100vh;
height:auto;
align-items:flex-start;
padding:14px;
}
.panel,
.home-card,
.roulette-side,
.roulette-main,
.blackjack-bottom-ui,
.player-hand-box,
.summary-box{
width:100%;
}
.top-bar{
position:sticky;
top:0;
z-index:40;
gap:8px;
margin-top:0 !important;
background:linear-gradient(180deg, rgba(9,11,26,.96), rgba(9,11,26,.72));
backdrop-filter:blur(12px);
border-radius:18px;
padding:8px;
padding-right:8px;
}
.top-bar .glass-box,
.top-bar .leave-btn{
width:100%;
border-radius:14px;
padding:10px 12px;
font-size:.92rem;
}
.table-area,
#tableArea,
#bjTableArea,
#rtTableArea{
display:block;
height:auto;
min-height:auto;
overflow:visible;
}
.bottom-ui,
.blackjack-bottom-ui{
margin-top:16px;
margin-bottom:0;
min-height:auto;
}
.btn,
.small-btn,
.actions button,
.blackjack-actions button,
.roulette-actions button,
.roulette-chip,
.mode-btn,
.game-link{
min-height:52px !important;
padding:13px 12px !important;
border-radius:15px !important;
font-size:.96rem !important;
line-height:1.2 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
white-space:normal !important;
-webkit-tap-highlight-color:transparent;
}
.mode-select{
grid-template-columns:1fr !important;
}
.actions{
grid-template-columns:1fr 1fr !important;
gap:10px;
}
.blackjack-actions{
grid-template-columns:1fr !important;
}
.roulette-actions,
.roulette-chip-row,
.roulette-meta-grid,
.roulette-dozens,
.roulette-columns,
.roulette-outside{
grid-template-columns:1fr 1fr !important;
}
.roulette-layout{
grid-template-columns:1fr !important;
}
.roulette-zero-row{
grid-template-columns:1fr !important;
}
.roulette-numbers-grid{
grid-template-columns:repeat(3,1fr) !important;
}
.roulette-zero-cell{
min-height:76px !important;
}
.roulette-wheel-stage{
min-height:280px;
}
.roulette-wheel-shell,
.roulette-wheel{
width:254px !important;
height:254px !important;
}
.roulette-ball{
transform:translate(-50%, -50%) rotate(0deg) translateY(-106px);
}
body[data-page-game="poker"] #blackjackScreen,
body[data-page-game="poker"] #rouletteScreen,
body[data-page-game="blackjack"] #gameScreen,
body[data-page-game="blackjack"] #rouletteScreen,
body[data-page-game="roulette"] #gameScreen,
body[data-page-game="roulette"] #blackjackScreen{
display:none !important;
}
}
/* ===== Mobile scroll pull-back fix ===== */
@media (max-width: 900px){
html, body{
height:auto !important;
min-height:100% !important;
overflow-x:hidden !important;
overflow-y:auto !important;
overscroll-behavior-y:auto !important;
-webkit-overflow-scrolling:touch !important;
touch-action:pan-y !important;
}
body{
position:static !important;
}
.container,
#mainContainer,
.table-screen,
.blackjack-screen,
.roulette-screen,
.midnight-screen,
.keno-screen,
.sicbo-screen,
.slots-screen,
.baccarat-screen,
.craps-screen,
.table-area,
#tableArea,
#bjTableArea,
#rtTableArea,
.bottom-ui,
.blackjack-bottom-ui,
.roulette-layout,
.blackjack-layout,
.midnight-layout,
.keno-layout,
.sicbo-layout,
.slots-layout,
.baccarat-layout,
.craps-layout{
overflow:visible !important;
height:auto !important;
max-height:none !important;
}
.top-bar{
position:relative !important;
top:auto !important;
}
}
@media (max-width: 560px){
.table-screen,
.blackjack-screen,
.roulette-screen,
.midnight-screen,
.keno-screen,
.sicbo-screen,
.slots-screen,
.baccarat-screen,
.craps-screen{
padding-bottom:52px !important;
}
.top-bar{
position:relative !important;
background:none !important;
backdrop-filter:none !important;
}
.floating-page-nav{
left:10px;
right:10px;
bottom:10px;
padding:7px;
gap:7px;
border-radius:16px;
}
.floating-page-nav a{
min-height:42px;
padding:9px 11px !important;
font-size:.84rem;
}
}
/* ===== Single player bots ===== */
#singlePlayerCreateInfo.hidden{
display:none !important;
}
/* Rounded corner cleanup for browser rendering */
.panel,
.glass-box,
.blackjack-bottom-ui,
.roulette-side,
.roulette-main,
.home-card,
.btn,
.mode-btn,
.game-link,
.actions button,
.blackjack-actions button,
.roulette-actions button,
.roulette-outside button,
.roulette-zero-cell,
.roulette-number-cell,
.roulette-dozen,
.roulette-column,
.input{
isolation:isolate;
background-clip:padding-box;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
}
.panel::before,
.glass-box::before,
.blackjack-bottom-ui::before,
.roulette-side::before,
.roulette-main::before,
.roulette-zero-cell::after,
.roulette-number-cell::after,
.roulette-dozen::after,
.roulette-column::after,
.roulette-outside button::after{
border-radius:inherit !important;
}
@media (min-width: 901px){
.floating-page-nav{top:18px; right:18px; bottom:auto;}
.top-bar{padding-right:290px;}
.top-bar .leave-btn{margin-left:auto;}
.actions{grid-template-columns:repeat(5,minmax(0,1fr));}
}
#copyRoomCodeBtn{display:inline-flex;align-items:center;justify-content:center;}
.seat.turn{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 32px rgba(60,255,150,.22),0 18px 34px rgba(0,0,0,.34);}
.player-hand-box,.summary-box,.raise-box{box-shadow:0 18px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);}
.singleplayer-bot-wrap{
width:100%;
margin:-4px 0 14px;
padding:14px 16px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
text-align:left;
}
.singleplayer-bot-wrap.hidden{display:none;}
.singleplayer-bot-label{
display:block;
font-weight:800;
color:rgba(255,255,255,.92);
margin-bottom:10px;
}
.singleplayer-bot-input{
width:100%;
margin:0;
padding:0;
height:18px;
accent-color:#6f7cff;
background:transparent;
border:none;
box-shadow:none;
}
.singleplayer-bot-hint{
margin-top:10px;
font-size:.86rem;
color:rgba(255,255,255,.68);
line-height:1.35;
}
@media (max-width: 900px){
.showdown-banner{ top:104px; min-width:calc(100vw - 24px); padding:12px 16px; font-size:.92rem; }
}
/* V18 polish */
#createRoomScreen .title{margin-bottom:6px;}
#createRoomScreen .subtitle{max-width:360px; margin:0 auto 14px; line-height:1.35;}
#createRoomScreen .input{margin-top:0;}
#singlePlayerCreateInfo{margin-bottom:12px; line-height:1.4;}
#singlePlayerBotBetWrap{
width:100%;
margin:-2px 0 14px;
}
#singlePlayerBotBetWrap.hidden{display:none;}
#singlePlayerBotBetWrap .settings-row input{width:120px;}
#singlePlayerBotBetWrap .settings-row span{font-size:.94rem;}
.singleplayer-bot-wrap{
margin:0 0 14px;
padding:16px 16px 14px;
border-radius:18px;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 32px rgba(0,0,0,.16);
}
.singleplayer-bot-input{
appearance:none; -webkit-appearance:none;
height:8px; border-radius:999px;
background:linear-gradient(90deg, rgba(77,124,255,.92), rgba(124,77,255,.92));
outline:none;
}
.singleplayer-bot-input::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:24px; height:24px; border-radius:50%;
background:#fff; border:3px solid rgba(114,100,255,.95);
box-shadow:0 6px 18px rgba(74,89,255,.35);
cursor:pointer;
}
.singleplayer-bot-input::-moz-range-thumb{
width:24px; height:24px; border-radius:50%;
background:#fff; border:3px solid rgba(114,100,255,.95);
box-shadow:0 6px 18px rgba(74,89,255,.35);
cursor:pointer;
}
.singleplayer-bot-steps{
margin-top:10px;
display:flex; justify-content:space-between;
color:rgba(255,255,255,.55); font-size:.76rem; font-weight:700;
}
@media (max-width:900px){
.moon-wrap{top:18px; left:16px; transform:scale(.84);}
#createRoomScreen{max-width:420px;}
.singleplayer-bot-wrap{padding:14px 14px 12px; border-radius:16px;}
}
/* V22 layout + banner polish */
:root{
--game-top-safe: 118px;
--game-shell-width: min(1180px, calc(100vw - 44px));
--bottom-shell-width: min(860px, calc(100vw - 44px));
}
.table-screen,
.blackjack-screen,
.roulette-screen,
.midnight-screen,
.keno-screen,
.sicbo-screen,
.slots-screen,
.baccarat-screen,
.craps-screen{
padding-top: var(--game-top-safe);
padding-left: 22px;
padding-right: 22px;
padding-bottom: 28px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
.top-bar{
width: var(--game-shell-width);
margin: 0 auto 18px;
justify-content: flex-start;
align-items: center;
gap: 10px;
padding-right: 0;
}
.top-bar .glass-box,
.top-bar .leave-btn{
flex: 0 0 auto;
}
.glass-box{
position:relative;
overflow:hidden;
}
.glass-box::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 52%);
pointer-events:none;
opacity:.8;
}
.top-bar .leave-btn{
margin-left: auto;
min-width: 148px;
}
.table-area{
width: var(--game-shell-width);
margin: 0 auto;
padding: 6px 0 14px;
}
.bottom-ui,
.blackjack-bottom-ui,
.roulette-layout{
width: var(--bottom-shell-width);
margin-left: auto;
margin-right: auto;
}
.player-hand-box,
.summary-box,
.raise-box,
.actions,
.blackjack-bottom-ui,
.roulette-layout{
max-width: 100%;
}
.poker-table{
width: min(1040px, 100%);
min-height: 560px;
}
.seat-3{ bottom: 138px; right: 46px; }
.seat-4{ bottom: 22px; min-width: 162px; }
.seat-5{ bottom: 138px; left: 46px; }
.table-center{
top: 48%;
width: min(56%, 470px);
gap: 14px;
}
.status-line{
min-height: 24px;
text-align: center;
line-height: 1.3;
}
.floating-page-nav{
display:none !important;
top: 18px;
right: 18px;
width: auto;
max-width: calc(100vw - 180px);
padding: 8px;
border-radius: 18px;
background: rgba(14,16,30,.42);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(12px);
box-shadow: 0 18px 40px rgba(0,0,0,.22);
animation:navDockIn .7s cubic-bezier(.16,1,.3,1);
overflow:hidden;
}
.floating-page-nav a{
border-radius: 14px !important;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition:transform .22s cubic-bezier(.22,1,.36,1), background .24s ease, border-color .24s ease, box-shadow .24s ease !important;
}
.floating-page-nav::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg, rgba(255,255,255,.12), transparent 30%, transparent 72%, rgba(255,255,255,.06));
pointer-events:none;
opacity:.8;
}
.floating-page-nav a:hover,
.floating-page-nav a:focus-visible{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.floating-page-nav a.is-current,
.floating-page-nav a[aria-current="page"]{
background:linear-gradient(135deg, rgba(var(--accent-1-rgb),.92), rgba(var(--accent-2-rgb),.88)) !important;
border-color:rgba(255,255,255,.24) !important;
color:#fff !important;
box-shadow:0 14px 30px rgba(var(--accent-2-rgb),.28);
}
.showdown-banner{
top: 18px;
opacity: 0;
transform: translateX(-50%) translateY(-22px) scale(.97);
pointer-events: none;
}
.showdown-banner.show{
animation: bannerDropAway 3s cubic-bezier(.22,.9,.2,1) forwards;
}
@keyframes bannerDropAway{
0%{
opacity: 0;
transform: translateX(-50%) translateY(-26px) scale(.97);
}
12%{
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
72%{
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
100%{
opacity: 0;
transform: translateX(-50%) translateY(-24px) scale(.985);
}
}
.toast.show{
animation: toastDropAway 2.4s cubic-bezier(.22,.9,.2,1) forwards;
}
@keyframes toastDropAway{
0%{
opacity:0;
transform:translateX(-50%) translateY(-18px);
}
14%{
opacity:1;
transform:translateX(-50%) translateY(0);
}
78%{
opacity:1;
transform:translateX(-50%) translateY(0);
}
100%{
opacity:0;
transform:translateX(-50%) translateY(-18px);
}
}
.moon-wrap{
top: 18px;
left: 18px;
width: 112px;
height: 112px;
filter: drop-shadow(0 0 28px rgba(170,140,255,.2)) drop-shadow(0 0 18px rgba(255,245,200,.14));
}
.moon-glow{ width: 112px; height: 112px; }
.moon{ width: 72px; height: 72px; }
.moon-halo{ width: 84px; height: 84px; }
.moon-wrap::before{
content:"";
position:absolute;
inset:18px;
border-radius:50%;
background: radial-gradient(circle at 38% 36%, rgba(255,255,255,.18), transparent 55%);
opacity:.7;
pointer-events:none;
}
.premium-aurora::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(115deg, transparent 0%, rgba(255,255,255,.045) 28%, transparent 42%),
linear-gradient(245deg, transparent 0%, var(--room-core) 24%, transparent 38%),
radial-gradient(ellipse at 76% 28%, var(--room-glow), transparent 36%);
mix-blend-mode:screen;
opacity:.5;
animation:auroraSweep 18s ease-in-out infinite alternate;
}
body[data-page-game="roulette"] .premium-aurora::after,
body[data-page-game="midnight"] .premium-aurora::after{
background:
radial-gradient(circle at 78% 42%, transparent 0 58px, rgba(255,255,255,.16) 59px 61px, transparent 62px 92px, rgba(255,255,255,.1) 93px 95px, transparent 96px),
conic-gradient(from 18deg at 78% 42%, var(--room-core), transparent 9deg 22deg, var(--room-glow) 24deg 34deg, transparent 36deg 50deg, var(--room-warm) 54deg 62deg, transparent 66deg),
linear-gradient(115deg, transparent 0%, rgba(255,255,255,.045) 28%, transparent 42%);
opacity:.24;
}
body[data-site-section="chill"] .premium-aurora::after{
background:
linear-gradient(115deg, transparent 0%, rgba(184,214,255,.045) 28%, transparent 42%),
radial-gradient(ellipse at 78% 24%, var(--room-glow), transparent 36%),
radial-gradient(ellipse at 18% 18%, var(--room-core), transparent 34%);
opacity:.36;
}
@keyframes navDockIn{
0%{
opacity:0;
transform:translateY(-14px) scale(.97);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
}
}
@keyframes auroraSweep{
0%{transform:translate3d(-2%,0,0) scale(1)}
100%{transform:translate3d(2%,-1%,0) scale(1.03)}
}
@media (max-width: 1100px){
:root{
--game-shell-width: min(100%, calc(100vw - 26px));
--bottom-shell-width: min(100%, calc(100vw - 26px));
}
.floating-page-nav{
max-width: calc(100vw - 150px);
}
.top-bar{
gap: 8px;
}
.table-center{
width:min(62%, 430px);
}
}
@media (max-width: 900px){
:root{
--game-top-safe: 96px;
}
.table-screen,
.blackjack-screen,
.roulette-screen,
.midnight-screen,
.keno-screen,
.sicbo-screen,
.slots-screen,
.baccarat-screen,
.craps-screen{
padding-left: 12px;
padding-right: 12px;
padding-bottom: 44px;
}
.moon-wrap{
top: 14px;
left: 12px;
width: 86px;
height: 86px;
transform: none;
}
.moon-glow{ width: 86px; height: 86px; }
.moon{ width: 58px; height: 58px; }
.moon-halo{ width: 68px; height: 68px; }
.top-bar{
width: 100%;
gap: 8px;
margin-bottom: 12px;
}
.top-bar .glass-box,
.top-bar .leave-btn{
flex: 1 1 calc(50% - 8px);
min-width: 0;
}
.top-bar .leave-btn{
margin-left: 0;
width: 100%;
}
.table-area{
width: 100%;
padding: 4px 0 10px;
}
.poker-table{
min-height: 620px;
padding: 16px;
}
.seat-2{ top: 92px; right: 12px; }
.seat-3{ bottom: 178px; right: 10px; }
.seat-4{ bottom: 14px; min-width: 132px; }
.seat-5{ bottom: 178px; left: 10px; }
.seat-6{ top: 92px; left: 12px; }
.table-center{ top: 46%; width: min(74%, 360px); gap: 12px; }
.showdown-banner{
top: 92px;
min-width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
padding: 12px 14px;
font-size: .92rem;
}
}
@media (max-width: 560px){
body[data-site-section="chill"] .moon-wrap{
right:-18px;
top:30px;
transform:scale(.62);
opacity:.24;
}
body[data-site-section="chill"] .moon-wrap:hover{
transform:scale(.62);
}
.floating-page-nav{
left: 10px;
right: 10px;
max-width: none;
padding: 7px;
gap: 7px;
justify-content:flex-start;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
}
.floating-page-nav a{
flex: 0 0 auto;
min-width:max-content;
padding:9px 11px !important;
font-size: .84rem;
white-space:nowrap;
}
.seat{ width: 86px; }
.seat-1{ top: 14px; }
.seat-2,.seat-6{ top: 100px; }
.seat-3,.seat-5{ bottom: 186px; }
.seat-4{ bottom: 12px; }
.table-center{ top: 44.5%; width: min(80%, 320px); }
.player-hand-box,.summary-box{ padding: 16px 14px; }
}
/* Final roulette responsiveness and wheel alignment */
:root{
--roulette-wheel-size: clamp(224px, 28vw, 300px);
}
.roulette-layout{
width:min(1460px, 100%);
grid-template-columns:minmax(320px, 400px) minmax(0, 1fr);
align-items:start;
}
.roulette-side,
.roulette-main,
.roulette-betting-board,
.roulette-board-title,
.roulette-history,
.roulette-zero-row,
.roulette-numbers-grid{
min-width:0;
}
.roulette-wheel-stage{
min-height:clamp(310px, 34vw, 380px);
padding:24px;
isolation:isolate;
}
.roulette-wheel-shell{
width:var(--roulette-wheel-size) !important;
height:var(--roulette-wheel-size) !important;
flex:0 0 var(--roulette-wheel-size);
overflow:visible;
}
.roulette-wheel{
width:100% !important;
height:100% !important;
transform-origin:center center;
}
.roulette-wheel-labels{
position:absolute;
inset:0;
z-index:2;
}
.roulette-wheel-labels span{
width:clamp(16px, 1.65vw, 20px);
font-size:clamp(.64rem, .74vw, .78rem);
}
.roulette-ball-orbit{
inset:0;
overflow:visible;
z-index:3;
}
.roulette-ball{
top:50%;
left:50%;
width:clamp(14px, 1.1vw, 16px);
height:clamp(14px, 1.1vw, 16px);
transform-origin:center center;
z-index:3;
}
.roulette-wheel-pointer{
z-index:4;
}
.roulette-board-title{
flex-wrap:wrap;
align-items:flex-start;
}
.roulette-zero-row{
grid-template-columns:minmax(96px, 120px) minmax(0, 1fr);
}
.roulette-numbers-grid{
grid-template-columns:repeat(12, minmax(0, 1fr));
}
.roulette-zero-cell,
.roulette-number-cell,
.roulette-dozen,
.roulette-column,
.roulette-outside button,
.roulette-actions button,
.roulette-chip{
min-width:0;
}
.roulette-screen .btn,
.roulette-screen .roulette-chip,
.roulette-screen .roulette-number-cell,
.roulette-screen .roulette-zero-cell,
.roulette-screen .roulette-dozen,
.roulette-screen .roulette-column,
.roulette-screen .roulette-outside button{
transition:transform .18s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}
.roulette-screen .btn:hover,
.roulette-screen .roulette-chip:hover,
.roulette-screen .roulette-number-cell:hover,
.roulette-screen .roulette-zero-cell:hover,
.roulette-screen .roulette-dozen:hover,
.roulette-screen .roulette-column:hover,
.roulette-screen .roulette-outside button:hover{
transform:translateY(-2px);
}
@media (max-width: 1240px){
.roulette-layout{
grid-template-columns:minmax(300px, 380px) minmax(0, 1fr);
}
}
@media (max-width: 1120px){
.roulette-layout{
grid-template-columns:1fr;
}
.roulette-side{
order:2;
}
.roulette-main{
order:1;
}
.roulette-wheel-stage{
min-height:340px;
}
}
@media (max-width: 760px){
:root{
--roulette-wheel-size: clamp(236px, 58vw, 254px);
}
.roulette-screen{
padding-left:12px;
padding-right:12px;
}
.roulette-side,
.roulette-main{
padding:16px;
border-radius:24px;
}
.roulette-wheel-stage{
min-height:300px;
padding:18px 16px 24px;
}
.roulette-result-chip{
top:14px;
right:14px;
min-width:80px;
padding:10px 12px;
}
.roulette-chip-row,
.roulette-meta-grid,
.roulette-actions,
.roulette-dozens,
.roulette-columns,
.roulette-outside{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.roulette-zero-row{
grid-template-columns:1fr !important;
}
.roulette-zero-cell{
min-height:78px !important;
}
.roulette-numbers-grid{
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
}
}
@media (max-width: 540px){
:root{
--roulette-wheel-size: min(224px, calc(100vw - 72px));
}
.roulette-wheel-stage{
min-height:272px;
padding-top:20px;
}
.roulette-result-chip{
position:static;
margin:0 auto 10px;
}
.roulette-stage-burst{
bottom:14px;
font-size:1.7rem;
}
.roulette-chip-row,
.roulette-meta-grid,
.roulette-actions,
.roulette-dozens,
.roulette-columns,
.roulette-outside{
grid-template-columns:1fr !important;
}
.roulette-numbers-grid{
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
}
@media (prefers-reduced-motion: reduce){
.roulette-screen .btn,
.roulette-screen .roulette-chip,
.roulette-screen .roulette-number-cell,
.roulette-screen .roulette-zero-cell,
.roulette-screen .roulette-dozen,
.roulette-screen .roulette-column,
.roulette-screen .roulette-outside button,
.roulette-wheel,
.roulette-ball{
transition-duration:.01ms !important;
animation-duration:.01ms !important;
}
}
/* Slots */
.slots-screen{
--slots-cell-height: 88px;
position:relative;
z-index:2;
width:100%;
min-height:100vh;
height:100vh;
padding:var(--game-top-safe) var(--screen-pad-x) calc(var(--screen-pad-bottom) - 12px);
display:none;
flex-direction:column;
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
animation:panelFloat .35s ease;
}
.slots-screen .table-area{
width:var(--game-shell-width);
margin:0 auto;
padding:4px 0 24px;
display:block;
flex:none;
overflow:visible;
}
.slots-layout{
width:100%;
margin:0 auto;
display:grid;
grid-template-columns:minmax(252px, 300px) minmax(0, 1fr);
gap:var(--layout-gap);
align-items:start;
}
.slots-sidebar{
min-width:0;
display:flex;
flex-direction:column;
gap:var(--section-gap);
}
.slots-main{
min-width:0;
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(240px, 280px);
grid-template-areas:
"machine paytable"
"lower lower";
gap:var(--layout-gap);
align-items:start;
}
.slots-panel{
position:relative;
overflow:hidden;
border-radius:28px;
border:1px solid rgba(255,255,255,var(--glass-border-alpha));
background:linear-gradient(180deg, rgba(10,14,28,.78), rgba(8,11,22,.62));
box-shadow:0 20px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(var(--glass-blur));
padding:var(--surface-padding-y) var(--surface-padding-x) calc(var(--surface-padding-y) + 2px);
}
.slots-panel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%);
pointer-events:none;
}
.slots-panel::after{
content:"";
position:absolute;
inset:auto -12% -42% -12%;
height:140px;
background:radial-gradient(circle at center, rgba(111,136,255,.12), transparent 72%);
pointer-events:none;
opacity:.7;
}
.slots-panel > *{
position:relative;
z-index:1;
}
.slots-panel-kicker{
margin-bottom:14px;
font-size:.86rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.64);
}
.slots-stats-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
}
.slots-stat-card{
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
gap:6px;
}
.slots-stat-card span{
font-size:.8rem;
color:rgba(255,255,255,.62);
text-transform:uppercase;
letter-spacing:.08em;
}
.slots-stat-card strong{
font-size:1.3rem;
font-weight:900;
color:rgba(255,255,255,.96);
}
.slots-stat-card.jackpot{
background:linear-gradient(135deg, rgba(216,170,48,.16), rgba(255,115,76,.14));
border-color:rgba(255,197,76,.24);
box-shadow:0 14px 30px rgba(255,156,82,.12);
}
.slots-chip-row,
.slots-action-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
}
.slots-chip-row{
margin-bottom:14px;
}
.slots-action-grid{
margin-top:2px;
}
.slots-bet-chip{
min-width:0;
padding:14px 12px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.07);
color:#fff;
font-weight:900;
cursor:pointer;
transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease;
}
.slots-bet-chip:hover{
transform:translateY(-2px);
}
.slots-bet-chip.active{
background:linear-gradient(135deg, rgba(255,214,109,.24), rgba(255,132,96,.22));
border-color:rgba(255,218,118,.34);
box-shadow:0 16px 28px rgba(255,164,76,.16);
}
.slots-bet-chip:disabled{
opacity:.42;
cursor:not-allowed;
transform:none;
}
.slots-action-grid .btn{
width:100%;
margin:0;
}
.slots-summary{
margin-top:10px;
min-height:58px;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.8);
line-height:1.5;
}
.slots-line-wins{
display:flex;
flex-wrap:wrap;
gap:10px;
min-height:42px;
}
.slots-line-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:9px 12px;
border-radius:999px;
background:rgba(99,119,255,.16);
border:1px solid rgba(118,137,255,.22);
color:rgba(255,255,255,.92);
font-size:.84rem;
font-weight:800;
}
.slots-line-pill.fresh{
animation:slotsWinPill .4s ease;
}
.slots-line-pill.scatter{
background:rgba(114,227,255,.15);
border-color:rgba(114,227,255,.28);
}
.slots-line-pill.jackpot{
background:linear-gradient(135deg, rgba(255,211,92,.22), rgba(255,120,86,.22));
border-color:rgba(255,210,92,.34);
}
.slots-machine-shell{
grid-area:machine;
position:relative;
overflow:hidden;
border-radius:42px;
padding:30px;
background:
radial-gradient(circle at 50% 0%, rgba(255,215,125,.16), transparent 28%),
radial-gradient(circle at 50% 120%, rgba(73,103,255,.15), transparent 34%),
linear-gradient(145deg, rgba(20,29,56,.98), rgba(8,11,24,.98));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 26px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
.slots-machine-shell::before{
content:"";
position:absolute;
inset:14px;
border-radius:30px;
border:1px solid rgba(255,255,255,.08);
pointer-events:none;
}
.slots-machine-topper{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
}
.slots-machine-marquee{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.slots-marquee-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.9);
font-size:.82rem;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
}
.slots-machine-lights{
display:flex;
gap:8px;
}
.slots-machine-lights span{
width:10px;
height:10px;
border-radius:50%;
background:linear-gradient(135deg, #ffd86f, #ff8d5a);
box-shadow:0 0 16px rgba(255,193,84,.4);
animation:slotsBulbPulse 1.4s ease-in-out infinite;
}
.slots-machine-lights span:nth-child(2){animation-delay:.12s}
.slots-machine-lights span:nth-child(3){animation-delay:.24s}
.slots-machine-lights span:nth-child(4){animation-delay:.36s}
.slots-machine-lights span:nth-child(5){animation-delay:.48s}
.slots-machine-lights span:nth-child(6){animation-delay:.6s}
.slots-reels-frame{
position:relative;
padding:20px;
border-radius:30px;
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 66%),
linear-gradient(180deg, rgba(7,9,18,.98), rgba(10,12,28,.98));
border:1px solid rgba(255,255,255,.08);
box-shadow:inset 0 18px 36px rgba(255,255,255,.03), inset 0 -16px 26px rgba(0,0,0,.4);
}
.slots-reels-frame.spinning{
box-shadow:inset 0 18px 36px rgba(255,255,255,.04), inset 0 -16px 26px rgba(0,0,0,.45), 0 18px 34px rgba(84,119,255,.12);
}
.slots-reels{
display:grid;
grid-template-columns:repeat(5, minmax(0,1fr));
gap:16px;
}
.slots-reel-window{
position:relative;
height:calc(var(--slots-cell-height) * 3);
overflow:hidden;
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.1);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.24);
transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.slots-reel-window.spinning{
transform:translateY(-2px);
border-color:rgba(255,255,255,.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(109,152,255,.08);
}
.slots-reel-window::before,
.slots-reel-window::after{
content:"";
position:absolute;
left:0;
right:0;
height:44px;
z-index:2;
pointer-events:none;
}
.slots-reel-window::before{
top:0;
background:linear-gradient(180deg, rgba(8,10,20,.92), rgba(8,10,20,0));
}
.slots-reel-window::after{
bottom:0;
background:linear-gradient(0deg, rgba(8,10,20,.92), rgba(8,10,20,0));
}
.slots-payline-overlay{
position:absolute;
inset:calc(50% - 3px) 26px auto 26px;
height:6px;
border-radius:999px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
pointer-events:none;
box-shadow:0 0 22px rgba(255,255,255,.18);
transition:opacity .2s ease, box-shadow .2s ease, transform .2s ease;
}
.slots-reels-frame.spinning .slots-payline-overlay{
opacity:1;
transform:scaleX(1.02);
box-shadow:0 0 30px rgba(255,255,255,.28), 0 0 42px rgba(88,144,255,.18);
}
.slots-track{
transform:translateY(0);
will-change:transform, filter;
}
.slots-track.animate{
animation:slotsReelSpin cubic-bezier(.14,.82,.26,1) forwards;
filter:blur(.15px);
}
.slots-cell{
height:var(--slots-cell-height);
display:flex;
align-items:center;
justify-content:center;
border-bottom:1px solid rgba(255,255,255,.05);
background:
radial-gradient(circle at 50% 28%, rgba(255,255,255,.12), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
color:#fff;
font-weight:900;
letter-spacing:.05em;
text-shadow:0 4px 16px rgba(0,0,0,.28);
position:relative;
}
.slots-cell.ghost{
opacity:.52;
}
.slots-cell.winning{
animation:slotsSymbolPulse .72s ease-in-out infinite alternate;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);
}
.slots-cell.winning::after{
content:"";
position:absolute;
inset:8px;
border-radius:18px;
border:1px solid rgba(255,255,255,.28);
box-shadow:0 0 28px rgba(255,241,183,.22);
}
.slots-symbol-label{
font-size:1.15rem;
}
.slots-symbol-cherry{background-color:rgba(238,84,120,.14)}
.slots-symbol-lemon{background-color:rgba(255,210,73,.14)}
.slots-symbol-plum{background-color:rgba(170,104,255,.14)}
.slots-symbol-clover{background-color:rgba(69,214,154,.14)}
.slots-symbol-bell{background-color:rgba(255,173,84,.14)}
.slots-symbol-bar{background-color:rgba(108,133,255,.16)}
.slots-symbol-seven{background-color:rgba(255,89,89,.16)}
.slots-symbol-wild{background:linear-gradient(180deg, rgba(255,201,84,.22), rgba(255,118,84,.2))}
.slots-symbol-scatter{background:linear-gradient(180deg, rgba(101,230,255,.22), rgba(111,140,255,.2))}
.slots-lower-grid{
grid-area:lower;
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:16px;
align-items:stretch;
}
.slots-paytable-panel{
grid-area:paytable;
align-self:start;
}
.slots-leaderboard,
.slots-history-list,
.slots-paytable{
display:flex;
flex-direction:column;
gap:10px;
}
.slots-leader-item,
.slots-history-pill,
.slots-pay-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-width:0;
padding:12px 14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.slots-leaderboard,
.slots-history-list{
min-height:236px;
}
.slots-leader-item.current{
background:linear-gradient(135deg, rgba(79,109,255,.18), rgba(79,215,255,.14));
border-color:rgba(101,176,255,.25);
}
.slots-leader-name{
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.slots-leader-meta,
.slots-history-pill,
.slots-pay-row span{
font-size:.84rem;
color:rgba(255,255,255,.72);
}
.slots-history-pill{
justify-content:flex-start;
flex-wrap:wrap;
}
.slots-paytable-panel .slots-paytable{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
align-content:start;
}
.slots-pay-row{
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:6px;
min-height:0;
padding:11px 12px;
line-height:1.3;
}
.slots-pay-row strong{
font-size:.96rem;
font-weight:900;
color:rgba(255,255,255,.96);
}
@media (min-width:1680px){
.slots-paytable-panel .slots-paytable{
grid-template-columns:repeat(3, minmax(0,1fr));
}
}
@keyframes slotsReelSpin{
0%{transform:translateY(calc(var(--slots-cell-height) * -1)); filter:blur(0)}
12%{filter:blur(1.8px)}
56%{filter:blur(2.4px)}
74%{transform:translateY(calc(var(--slots-stop-offset, 0px) + 22px)); filter:blur(1.1px)}
88%{transform:translateY(calc(var(--slots-stop-offset, 0px) - 10px)); filter:blur(.4px)}
100%{transform:translateY(var(--slots-stop-offset, 0px)); filter:blur(0)}
}
@keyframes slotsBulbPulse{
0%,100%{transform:scale(1); opacity:.7}
50%{transform:scale(1.18); opacity:1}
}
@keyframes slotsSymbolPulse{
from{transform:scale(1); filter:saturate(1)}
to{transform:scale(1.03); filter:saturate(1.22)}
}
@keyframes slotsWinPill{
from{opacity:0; transform:translateY(8px)}
to{opacity:1; transform:translateY(0)}
}
@media (max-width:1180px){
.slots-layout{
grid-template-columns:1fr;
}
.slots-main{
grid-template-columns:1fr;
grid-template-areas:
"machine"
"paytable"
"lower";
}
.slots-machine-shell{
padding:24px;
}
.slots-lower-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.slots-paytable-panel .slots-paytable{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width:900px){
.slots-screen{
min-height:100vh;
height:auto;
padding:var(--game-top-safe) 12px 120px;
}
.slots-screen .table-area{
width:100%;
padding:4px 0 12px;
}
.slots-reels{
gap:10px;
}
.slots-reel-window{
--slots-cell-height: 80px;
}
.slots-paytable-panel .slots-paytable{
grid-template-columns:repeat(2, minmax(0,1fr));
}
}
@media (max-width:720px){
.slots-machine-shell{
padding:18px;
border-radius:30px;
}
.slots-machine-topper{
flex-direction:column;
align-items:flex-start;
}
.slots-stats-grid,
.slots-chip-row,
.slots-action-grid,
.slots-lower-grid{
grid-template-columns:1fr;
}
.slots-reels{
gap:8px;
}
.slots-reel-window{
--slots-cell-height: 72px;
border-radius:16px;
}
.slots-symbol-label{
font-size:.92rem;
}
.slots-paytable-panel .slots-paytable{
grid-template-columns:1fr;
}
}
@media (prefers-reduced-motion: reduce){
.slots-track.animate,
.slots-machine-lights span,
.slots-cell.winning,
.slots-bet-chip,
.slots-action-grid .btn{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
}
/* V27 themes + global polish */
:root{
--accent-1-rgb:77,124,255;
--accent-2-rgb:124,77,255;
--accent-3-rgb:31,210,114;
--panel-max-width:520px;
--panel-form-max-width:580px;
--panel-lobby-max-width:560px;
}
:root[data-theme="moonrise"],
:root:not([data-theme]){
--bg1:#091540;
--bg2:#1c1f5a;
--bg3:#3d1670;
--bg4:#0d2f66;
--blue1:#4d7cff;
--purple1:#7c4dff;
--green1:#14b85f;
--green2:#23d77d;
--danger1:#b3253b;
--danger2:#ea475f;
--warn1:#b57a16;
--warn2:#f0ae2b;
--accent-1-rgb:77,124,255;
--accent-2-rgb:124,77,255;
--accent-3-rgb:31,210,114;
}
:root[data-theme="emerald"]{
--bg1:#051a21;
--bg2:#0c3d40;
--bg3:#10644f;
--bg4:#112a4a;
--blue1:#2cc4c0;
--purple1:#5ad78c;
--green1:#14b875;
--green2:#45e3a4;
--danger1:#b64b54;
--danger2:#ef7d72;
--warn1:#b98c25;
--warn2:#f1c956;
--accent-1-rgb:44,196,192;
--accent-2-rgb:90,215,140;
--accent-3-rgb:20,184,117;
}
:root[data-theme="sunset"]{
--bg1:#24111f;
--bg2:#4e2030;
--bg3:#854433;
--bg4:#2d2c4f;
--blue1:#ff8a5b;
--purple1:#ff5f87;
--green1:#dc9f39;
--green2:#ffd36f;
--danger1:#bc4356;
--danger2:#ff7a86;
--warn1:#b76e20;
--warn2:#f2b548;
--accent-1-rgb:255,138,91;
--accent-2-rgb:255,95,135;
--accent-3-rgb:220,159,57;
}
:root[data-theme="noir"]{
--bg1:#05080f;
--bg2:#141b29;
--bg3:#2a2338;
--bg4:#112033;
--blue1:#91b1ff;
--purple1:#d7b4ff;
--green1:#4e8a76;
--green2:#7dbca1;
--danger1:#8a3c4d;
--danger2:#c96b7d;
--warn1:#8e6f2e;
--warn2:#cfb06a;
--accent-1-rgb:145,177,255;
--accent-2-rgb:215,180,255;
--accent-3-rgb:78,138,118;
}
:root[data-theme="sapphire"]{
--bg1:#030d28;
--bg2:#103a6b;
--bg3:#0d5e92;
--bg4:#081632;
--blue1:#4db5ff;
--purple1:#7ee7ff;
--green1:#33b8d8;
--green2:#7af3ff;
--danger1:#b94969;
--danger2:#ef7897;
--warn1:#ca912a;
--warn2:#ffd36a;
--accent-1-rgb:77,181,255;
--accent-2-rgb:126,231,255;
--accent-3-rgb:51,184,216;
}
:root[data-theme="ember"]{
--bg1:#1e0908;
--bg2:#4a1414;
--bg3:#8d2f1a;
--bg4:#2b0d16;
--blue1:#ff8a47;
--purple1:#ffbe5c;
--green1:#e6692f;
--green2:#ffb36f;
--danger1:#cc3b38;
--danger2:#ff6f59;
--warn1:#c88b1f;
--warn2:#ffd061;
--accent-1-rgb:255,138,71;
--accent-2-rgb:255,190,92;
--accent-3-rgb:230,105,47;
}
:root[data-theme="lagoon"]{
--bg1:#03161b;
--bg2:#0b4146;
--bg3:#127280;
--bg4:#082730;
--blue1:#32d7d1;
--purple1:#79ffd9;
--green1:#1ebf97;
--green2:#8cffd3;
--danger1:#ba516c;
--danger2:#ec7c90;
--warn1:#b99827;
--warn2:#f3de73;
--accent-1-rgb:50,215,209;
--accent-2-rgb:121,255,217;
--accent-3-rgb:30,191,151;
}
[hidden]{display:none !important;}
*{
font-family:"Segoe UI Variable Text","Segoe UI","Trebuchet MS",sans-serif;
}
.container{
padding:var(--screen-pad-top) var(--screen-pad-x) calc(var(--screen-pad-bottom) + 4px);
}
#mainContainer.container{
align-items:flex-start;
padding-top:calc(var(--screen-pad-top) + 98px);
}
.panel{
max-width:var(--panel-max-width);
border-radius:var(--panel-radius);
padding:var(--panel-padding) calc(var(--panel-padding) - 2px);
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
linear-gradient(180deg, rgba(8,10,28,.82), rgba(8,10,28,.72));
box-shadow:var(--surface-shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel::after{
content:"";
position:absolute;
inset:auto -18% -42% -18%;
height:180px;
background:radial-gradient(circle at center, rgba(var(--accent-1-rgb), .18), rgba(var(--accent-2-rgb), .08) 46%, transparent 74%);
opacity:.9;
pointer-events:none;
}
.title{
font-size:var(--title-size);
margin-bottom:12px;
letter-spacing:.02em;
}
.subtitle{
font-size:var(--subtitle-size);
max-width:var(--subtitle-width);
margin:0 auto 28px;
line-height:1.55;
color:var(--contrast-text);
}
.input{
margin-bottom:16px;
padding:15px 16px;
border-radius:16px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:var(--btn-min-height);
padding-left:var(--btn-padding-x);
padding-right:var(--btn-padding-x);
margin-top:0;
text-decoration:none;
box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.btn-secondary{
border:1px solid rgba(255,255,255,.12);
box-shadow:none;
}
.btn-home-back{
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.07);
}
.room-code-box,
.settings-box,
.info-box{
padding:var(--surface-padding-y) var(--surface-padding-x);
border-radius:var(--surface-radius);
line-height:1.55;
}
.settings-box{
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.settings-row{
gap:var(--section-gap);
padding:10px 0;
}
.settings-row input{
width:calc(var(--settings-input-width) + 26px);
min-height:42px;
border-radius:12px;
}
.player-list{
padding:var(--surface-padding-y);
border-radius:20px;
max-height:260px;
}
.player-item{
margin-bottom:12px;
border-radius:14px;
}
.mode-select{
margin:18px 0 16px;
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:var(--section-gap);
}
.mode-btn{
min-height:var(--mode-min-height);
padding:var(--mode-padding-y) var(--mode-padding-x);
border-radius:var(--control-radius);
}
#homeScreen,
#createModeScreen,
#createRoomScreen,
#joinRoomScreen{
max-width:var(--panel-form-max-width);
}
#lobbyScreen{
max-width:var(--panel-lobby-max-width);
padding:28px 24px;
}
#lobbyScreen .btn{
margin-top:0;
min-height:52px;
white-space:normal;
line-height:1.25;
}
#lobbyScreen .btn + .btn{
margin-top:10px;
}
#lobbyScreen .room-code-box,
#lobbyScreen .settings-box,
#lobbyScreen .player-list{
margin-top:14px;
}
#lobbyScreen .player-list{
max-height:208px;
}
#homeScreen .subtitle,
#createModeScreen .subtitle,
#createRoomScreen .subtitle,
#joinRoomScreen .subtitle,
#lobbyScreen .subtitle{
max-width:44ch;
}
#createModeScreen .info-box,
#createRoomScreen .info-box,
#createRoomScreen .settings-box,
#joinRoomScreen .info-box{
margin-top:0;
margin-bottom:16px;
}
#createRoomScreen .input,
#joinRoomScreen .input{
margin-bottom:18px;
}
#createRoomScreen .title,
#joinRoomScreen .title,
#createModeScreen .title{
margin-bottom:8px;
}
.home-action-stack,
.form-action-stack{
display:grid;
gap:12px;
}
.home-action-stack{
margin-top:6px;
}
.home-action-stack .btn,
.form-action-stack .btn{
width:100%;
}
.home-action-stack .btn-home-back{
margin-top:4px;
}
.brand-room-pill{
display:inline-flex;
align-items:center;
margin-left:10px;
padding:7px 11px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.9);
font-size:.74rem;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
vertical-align:middle;
}
.brand-promo-banner{
margin:16px 0 14px;
padding:18px;
border-radius:22px;
border:1px solid rgba(255,255,255,.1);
background:
radial-gradient(circle at top right, rgba(var(--accent-2-rgb),.2), transparent 45%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
display:grid;
grid-template-columns:minmax(0,1.4fr) auto;
gap:16px;
text-align:left;
box-shadow:0 18px 36px rgba(0,0,0,.22);
}
.brand-promo-copy strong{
display:block;
margin-bottom:6px;
font-size:1.08rem;
}
.brand-promo-copy p{
margin:0;
color:rgba(255,255,255,.72);
line-height:1.5;
}
.brand-live-note{
margin-top:10px !important;
padding:10px 12px;
border-radius:14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}
.home-story-card,
.home-promo-card,
.about-section,
.about-floor-card,
.rules-section,
.progression-panel,
.progression-liveops-card{
content-visibility:auto;
contain-intrinsic-size:320px;
}
.brand-promo-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:10px;
font-size:.78rem;
letter-spacing:.05em;
font-weight:800;
color:rgba(255,255,255,.6);
text-transform:uppercase;
}
.brand-promo-actions{
display:grid;
gap:10px;
align-content:start;
}
.brand-home-tip-strip{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:14px;
}
.brand-tip-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:10px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
color:#fff;
font:inherit;
font-weight:800;
cursor:pointer;
transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.brand-tip-pill:hover,
.brand-tip-pill:focus-visible{
transform:translateY(-1px);
border-color:rgba(var(--accent-2-rgb),.34);
background:rgba(var(--accent-2-rgb),.16);
outline:none;
}
.brand-help-trigger{
white-space:nowrap;
}
.brand-tooltip-panel{
position:fixed;
top:92px;
right:18px;
width:min(420px, calc(100vw - 24px));
padding:18px;
border-radius:24px;
background:
radial-gradient(circle at top right, rgba(var(--accent-2-rgb),.22), transparent 40%),
linear-gradient(180deg, rgba(8,10,28,.94), rgba(8,10,28,.88));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 26px 58px rgba(0,0,0,.42);
z-index:75;
}
.brand-tooltip-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
margin-bottom:14px;
}
.brand-tooltip-head strong{
display:block;
font-size:1.05rem;
}
.brand-tooltip-close{
border:none;
background:rgba(255,255,255,.08);
color:#fff;
border-radius:999px;
min-height:38px;
padding:0 14px;
font:inherit;
font-weight:700;
cursor:pointer;
}
.brand-tooltip-grid{
display:grid;
gap:10px;
}
.brand-tooltip-card{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.brand-tooltip-card strong{
display:block;
margin-bottom:6px;
}
.brand-tooltip-card p{
margin:0;
color:rgba(255,255,255,.72);
line-height:1.5;
}
.brand-tooltip-actions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.brand-inline-tip-tray{
position:fixed;
right:18px;
bottom:84px;
z-index:76;
width:min(360px, calc(100vw - 24px));
opacity:0;
transform:translateY(18px);
pointer-events:none;
transition:opacity .22s ease, transform .22s ease;
}
.brand-inline-tip-tray.show{
opacity:1;
transform:translateY(0);
}
.brand-inline-tip-card{
padding:16px 18px;
border-radius:20px;
background:rgba(7,10,24,.92);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 48px rgba(0,0,0,.34);
}
.brand-inline-tip-card strong{
display:block;
margin-bottom:6px;
}
.brand-inline-tip-card p{
margin:0;
color:rgba(255,255,255,.72);
line-height:1.5;
}
.theme-launcher{
position:fixed;
left:calc(18px + var(--safe-left));
bottom:calc(18px + var(--safe-bottom));
z-index:90;
width:auto;
min-height:52px;
padding:0 18px;
border:none;
border-radius:999px;
background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)), rgba(9,13,28,.86);
color:#fff;
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(18px);
box-shadow:0 18px 42px rgba(0,0,0,.38),0 0 0 1px rgba(var(--accent-2-rgb),.1),inset 0 1px 0 rgba(255,255,255,.12);
cursor:pointer;
transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.theme-launcher:hover,
.theme-launcher:focus-visible{
transform:translateY(-2px);
outline:none;
border-color:rgba(255,255,255,.3);
box-shadow:0 22px 50px rgba(0,0,0,.44),0 0 0 1px rgba(var(--accent-2-rgb),.22),inset 0 1px 0 rgba(255,255,255,.16);
}
.theme-launcher-label{
font-size:.92rem;
font-weight:900;
letter-spacing:.04em;
}
.theme-panel{
position:fixed;
left:calc(18px + var(--safe-left));
bottom:calc(78px + var(--safe-bottom));
z-index:91;
width:min(var(--theme-panel-width), calc(100vw - 36px));
max-height:min(82vh, 820px);
overflow:auto;
padding:var(--theme-panel-pad);
border-radius:28px;
background:linear-gradient(180deg, rgba(18,22,48,.96), rgba(7,10,24,.94));
border:1px solid rgba(255,255,255,.16);
box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 0 1px rgba(var(--accent-2-rgb),.12),inset 0 1px 0 rgba(255,255,255,.1);
backdrop-filter:blur(calc(var(--glass-blur) + 6px));
animation:themePanelIn .24s cubic-bezier(.22,1,.36,1);
}
.theme-panel::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:radial-gradient(circle at 22% 0%, rgba(var(--accent-1-rgb),.24), transparent 36%), radial-gradient(circle at 92% 18%, rgba(var(--accent-2-rgb),.18), transparent 34%);
pointer-events:none;
}
.theme-panel > *{
position:relative;
z-index:1;
}
@keyframes themePanelIn{
from{opacity:0; transform:translateY(14px) scale(.985)}
to{opacity:1; transform:translateY(0) scale(1)}
}
.theme-panel-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:14px;
}
.theme-panel-header strong{
display:block;
margin-top:4px;
font-size:1.55rem;
line-height:1;
letter-spacing:0;
}
.theme-panel-header span{
display:block;
color:rgba(255,255,255,.72);
font-size:.88rem;
line-height:1.45;
}
.theme-panel-kicker{
color:#9ee7ff !important;
font-size:.74rem !important;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
}
.theme-close-btn{
width:40px;
height:40px;
flex:0 0 40px;
border:none;
border-radius:14px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:1.35rem;
line-height:1;
cursor:pointer;
transition:transform .16s ease, background .2s ease, border-color .2s ease;
}
.theme-close-btn:hover,
.theme-close-btn:focus-visible{
outline:none;
transform:translateY(-1px);
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.22);
}
.theme-preview-card{
min-height:132px;
position:relative;
overflow:hidden;
display:grid;
align-items:end;
margin-bottom:18px;
padding:16px;
border-radius:22px;
background:linear-gradient(135deg, rgba(var(--accent-1-rgb),.2), rgba(var(--accent-2-rgb),.14)), rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.13);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 34px rgba(0,0,0,.24);
}
.theme-preview-orbit{
position:absolute;
width:126px;
height:126px;
right:-20px;
top:-32px;
border-radius:50%;
background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.9), rgba(255,255,255,.26) 32%, rgba(var(--accent-2-rgb),.18) 58%, transparent 70%);
filter:drop-shadow(0 0 24px rgba(var(--accent-2-rgb),.24));
}
.theme-preview-table{
position:absolute;
left:16px;
top:18px;
display:flex;
gap:8px;
}
.theme-preview-table span{
width:42px;
height:58px;
border-radius:10px;
background:linear-gradient(160deg,#fbfdff,#dfe8f7);
box-shadow:0 12px 20px rgba(0,0,0,.24);
}
.theme-preview-table span:nth-child(2){
transform:translateY(9px) rotate(5deg);
}
.theme-preview-table span:nth-child(3){
transform:translateY(2px) rotate(-7deg);
}
.theme-preview-copy{
position:relative;
display:grid;
gap:4px;
}
.theme-preview-copy strong{
font-size:1rem;
}
.theme-preview-copy span{
width:max-content;
max-width:100%;
padding:5px 9px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.76);
font-size:.76rem;
font-weight:800;
}
.theme-preview-copy span[data-state="accepted"]{color:#9ef7c6}
.theme-preview-copy span[data-state="declined"]{color:#ffd08a}
.theme-option-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.theme-section{
display:grid;
gap:12px;
}
.theme-section + .theme-section{
margin-top:16px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.09);
}
.theme-section-copy{
display:flex;
flex-direction:column;
gap:4px;
}
.theme-section-copy strong{
font-size:.96rem;
letter-spacing:.02em;
}
.theme-section-copy span{
color:rgba(255,255,255,.62);
font-size:.8rem;
line-height:1.45;
}
.theme-option{
width:100%;
display:grid;
grid-template-columns:44px 1fr;
align-items:center;
gap:10px;
min-height:82px;
padding:11px;
border:none;
border-radius:18px;
background:rgba(255,255,255,.055);
border:1px solid var(--contrast-border);
color:#fff;
text-align:left;
cursor:pointer;
transition:transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.theme-option:hover,
.theme-option:focus-visible{
transform:translateY(-2px);
outline:none;
border-color:var(--contrast-highlight);
}
.theme-option.active{
background:linear-gradient(135deg, rgba(var(--accent-1-rgb), .22), rgba(var(--accent-2-rgb), .18));
border-color:rgba(255,255,255,.26);
box-shadow:0 16px 28px rgba(0,0,0,.22),0 0 0 1px rgba(var(--accent-2-rgb),.12);
}
.theme-swatch{
width:44px;
height:44px;
flex:0 0 44px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.theme-swatch[data-theme="moonrise"]{background:linear-gradient(135deg, #091540, #4d7cff 58%, #7c4dff);}
.theme-swatch[data-theme="emerald"]{background:linear-gradient(135deg, #051a21, #2cc4c0 55%, #5ad78c);}
.theme-swatch[data-theme="sunset"]{background:linear-gradient(135deg, #24111f, #ff8a5b 55%, #ff5f87);}
.theme-swatch[data-theme="noir"]{background:linear-gradient(135deg, #05080f, #91b1ff 52%, #d7b4ff);}
.theme-swatch[data-theme="sapphire"]{background:linear-gradient(135deg, #030d28, #4db5ff 54%, #7ee7ff);}
.theme-swatch[data-theme="ember"]{background:linear-gradient(135deg, #1e0908, #ff8a47 50%, #ffbe5c);}
.theme-swatch[data-theme="lagoon"]{background:linear-gradient(135deg, #03161b, #32d7d1 52%, #79ffd9);}
.theme-copy{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.theme-copy-top{
display:flex;
align-items:center;
gap:6px;
min-width:0;
}
.theme-copy strong{
font-size:.94rem;
}
.theme-copy em{
padding:3px 6px;
border-radius:999px;
background:rgba(255,255,255,.08);
color:rgba(255,255,255,.68);
font-size:.62rem;
font-style:normal;
font-weight:900;
text-transform:uppercase;
letter-spacing:.06em;
}
.theme-copy small{
color:rgba(255,255,255,.68);
font-size:.8rem;
line-height:1.35;
}
.theme-chip-row{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
gap:10px;
}
.theme-chip{
min-height:78px;
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
padding:12px;
border:none;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid var(--contrast-border);
color:#fff;
text-align:left;
cursor:pointer;
transition:transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.theme-chip:hover,
.theme-chip:focus-visible{
transform:translateY(-2px);
outline:none;
border-color:var(--contrast-highlight);
}
.theme-chip.active{
background:linear-gradient(135deg, rgba(var(--accent-1-rgb), .22), rgba(var(--accent-2-rgb), .18));
border-color:rgba(255,255,255,.18);
box-shadow:0 16px 28px rgba(0,0,0,.18);
}
.theme-chip strong{
font-size:.88rem;
}
.theme-chip small{
color:rgba(255,255,255,.64);
font-size:.76rem;
line-height:1.35;
}
.theme-section-utility{
align-items:start;
}
.theme-manage-btn{
width:100%;
padding:12px 14px;
border:none;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid var(--contrast-border);
color:#fff;
font-weight:800;
cursor:pointer;
text-align:left;
transition:transform .16s ease, border-color .2s ease, background .2s ease;
}
.theme-manage-btn:hover,
.theme-manage-btn:focus-visible{
transform:translateY(-2px);
outline:none;
border-color:var(--contrast-highlight);
background:rgba(255,255,255,.1);
}
.home-return-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin:0 auto 18px;
padding:var(--home-link-pad-y) var(--home-link-pad-x);
border-radius:999px;
background:linear-gradient(135deg, rgba(var(--accent-1-rgb), .18), rgba(var(--accent-2-rgb), .12));
border:1px solid var(--contrast-border);
color:#fff;
text-decoration:none;
font-weight:700;
letter-spacing:.02em;
box-shadow:0 16px 34px rgba(0,0,0,.22);
transition:transform .16s ease, border-color .2s ease, background .2s ease;
}
.home-return-link:hover,
.home-return-link:focus-visible{
transform:translateY(-2px);
border-color:var(--contrast-highlight);
background:linear-gradient(135deg, rgba(var(--accent-1-rgb), .24), rgba(var(--accent-2-rgb), .18));
}
.cookie-consent-banner{
position:fixed;
right:calc(18px + var(--safe-right));
bottom:calc(18px + var(--safe-bottom));
z-index:100;
width:min(420px, calc(100vw - 28px));
display:grid;
gap:14px;
padding:18px;
border-radius:24px;
background:rgba(8,11,24,.94);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 24px 60px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}
.cookie-consent-copy{
display:grid;
gap:8px;
}
.cookie-consent-copy strong{
font-size:1rem;
letter-spacing:.03em;
}
.cookie-consent-copy p{
margin:0;
color:rgba(255,255,255,.72);
font-size:.88rem;
line-height:1.5;
}
.cookie-consent-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.cookie-btn{
flex:1 1 160px;
min-height:46px;
padding:12px 14px;
border:none;
border-radius:16px;
color:#fff;
font-weight:800;
cursor:pointer;
transition:transform .16s ease, opacity .2s ease, border-color .2s ease, background .2s ease;
}
.cookie-btn:hover{
transform:translateY(-2px);
}
.cookie-btn-primary{
background:linear-gradient(135deg,var(--blue1),var(--purple1));
box-shadow:0 12px 28px rgba(var(--accent-2-rgb),.24);
}
.cookie-btn-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
:root[data-scenery="minimal"] body::before,
:root[data-scenery="minimal"] body::after,
:root[data-scenery="minimal"] .stars,
:root[data-scenery="minimal"] .skyline,
:root[data-scenery="minimal"] .skyline-objects,
:root[data-scenery="minimal"] .moon-wrap,
:root[data-scenery="minimal"] .premium-aurora,
:root[data-scenery="minimal"] .premium-vignette{
display:none !important;
}
:root[data-scenery="minimal"] body{
background-size:100% 100%;
}
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
:root[data-contrast="boosted"] .panel,
:root[data-contrast="boosted"] .glass-box,
:root[data-contrast="boosted"] .roulette-side,
:root[data-contrast="boosted"] .roulette-main,
:root[data-contrast="boosted"] .slots-panel,
:root[data-contrast="boosted"] .midnight-side,
:root[data-contrast="boosted"] .midnight-board-glass,
:root[data-contrast="boosted"] .baccarat-hand-zone,
:root[data-contrast="boosted"] .chill-card,
:root[data-contrast="boosted"] .solitaire-main,
:root[data-contrast="boosted"] .solitaire-side,
:root[data-contrast="boosted"] .chess-main,
:root[data-contrast="boosted"] .chess-side,
:root[data-contrast="boosted"] .checkers-main,
:root[data-contrast="boosted"] .checkers-side,
:root[data-contrast="boosted"] .sudoku-main,
:root[data-contrast="boosted"] .sudoku-side,
:root[data-contrast="boosted"] .twenty-main,
:root[data-contrast="boosted"] .twenty-side,
:root[data-contrast="boosted"] .mines-main,
:root[data-contrast="boosted"] .mines-side,
:root[data-contrast="boosted"] .match-main,
:root[data-contrast="boosted"] .match-side,
:root[data-contrast="boosted"] .snake-main,
:root[data-contrast="boosted"] .snake-side,
:root[data-contrast="boosted"] .kenken-main,
:root[data-contrast="boosted"] .kenken-side,
:root[data-contrast="boosted"] .towers-main,
:root[data-contrast="boosted"] .towers-side,
:root[data-contrast="boosted"] .lights-main,
:root[data-contrast="boosted"] .lights-side{
border-color:var(--contrast-border);
box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 20px 48px rgba(0,0,0,.32);
}
:root[data-contrast="boosted"] .subtitle,
:root[data-contrast="boosted"] .theme-copy small,
:root[data-contrast="boosted"] .theme-chip small,
:root[data-contrast="boosted"] .theme-section-copy span,
:root[data-contrast="boosted"] .cookie-consent-copy p,
:root[data-contrast="boosted"] .seat-stack,
:root[data-contrast="boosted"] .seat-state,
:root[data-contrast="boosted"] .status-line,
:root[data-contrast="boosted"] .summary-line,
:root[data-contrast="boosted"] .chill-card p,
:root[data-contrast="boosted"] .solitaire-subtitle,
:root[data-contrast="boosted"] .chess-subtitle,
:root[data-contrast="boosted"] .checkers-subtitle,
:root[data-contrast="boosted"] .sudoku-subtitle,
:root[data-contrast="boosted"] .twenty-subtitle,
:root[data-contrast="boosted"] .mines-subtitle,
:root[data-contrast="boosted"] .match-subtitle,
:root[data-contrast="boosted"] .snake-subtitle,
:root[data-contrast="boosted"] .kenken-subtitle,
:root[data-contrast="boosted"] .towers-subtitle,
:root[data-contrast="boosted"] .lights-subtitle{
color:var(--contrast-text);
}
:root[data-glass="clear"] .panel,
:root[data-glass="clear"] .roulette-side,
:root[data-glass="clear"] .roulette-main,
:root[data-glass="clear"] .slots-panel,
:root[data-glass="clear"] .midnight-side,
:root[data-glass="clear"] .midnight-board-glass,
:root[data-glass="clear"] .chill-card,
:root[data-glass="clear"] .solitaire-main,
:root[data-glass="clear"] .solitaire-side,
:root[data-glass="clear"] .chess-main,
:root[data-glass="clear"] .chess-side,
:root[data-glass="clear"] .checkers-main,
:root[data-glass="clear"] .checkers-side,
:root[data-glass="clear"] .sudoku-main,
:root[data-glass="clear"] .sudoku-side,
:root[data-glass="clear"] .twenty-main,
:root[data-glass="clear"] .twenty-side,
:root[data-glass="clear"] .mines-main,
:root[data-glass="clear"] .mines-side,
:root[data-glass="clear"] .match-main,
:root[data-glass="clear"] .match-side,
:root[data-glass="clear"] .snake-main,
:root[data-glass="clear"] .snake-side,
:root[data-glass="clear"] .kenken-main,
:root[data-glass="clear"] .kenken-side,
:root[data-glass="clear"] .towers-main,
:root[data-glass="clear"] .towers-side,
:root[data-glass="clear"] .lights-main,
:root[data-glass="clear"] .lights-side{
background:linear-gradient(180deg, rgba(10,14,30,.68), rgba(8,11,24,.48));
}
:root[data-glass="solid"] .panel,
:root[data-glass="solid"] .roulette-side,
:root[data-glass="solid"] .roulette-main,
:root[data-glass="solid"] .slots-panel,
:root[data-glass="solid"] .midnight-side,
:root[data-glass="solid"] .midnight-board-glass,
:root[data-glass="solid"] .chill-card,
:root[data-glass="solid"] .solitaire-main,
:root[data-glass="solid"] .solitaire-side,
:root[data-glass="solid"] .chess-main,
:root[data-glass="solid"] .chess-side,
:root[data-glass="solid"] .checkers-main,
:root[data-glass="solid"] .checkers-side,
:root[data-glass="solid"] .sudoku-main,
:root[data-glass="solid"] .sudoku-side,
:root[data-glass="solid"] .twenty-main,
:root[data-glass="solid"] .twenty-side,
:root[data-glass="solid"] .mines-main,
:root[data-glass="solid"] .mines-side,
:root[data-glass="solid"] .match-main,
:root[data-glass="solid"] .match-side,
:root[data-glass="solid"] .snake-main,
:root[data-glass="solid"] .snake-side,
:root[data-glass="solid"] .kenken-main,
:root[data-glass="solid"] .kenken-side,
:root[data-glass="solid"] .towers-main,
:root[data-glass="solid"] .towers-side,
:root[data-glass="solid"] .lights-main,
:root[data-glass="solid"] .lights-side{
background:linear-gradient(180deg, rgba(8,10,24,.92), rgba(7,10,22,.84));
}
:root[data-density="compact"] .poker-table{
min-height:480px;
padding:22px;
}
:root[data-density="relaxed"] .poker-table{
min-height:560px;
padding:34px;
}
:root[data-density="compact"] .seat{
width:118px;
min-height:72px;
padding:8px 10px;
}
:root[data-density="relaxed"] .seat{
width:138px;
min-height:84px;
padding:12px 14px;
}
:root[data-density="compact"] .slots-screen{
--slots-cell-height:78px;
}
:root[data-density="relaxed"] .slots-screen{
--slots-cell-height:96px;
}
@media (max-width:900px){
#mainContainer.container{
padding-top:104px;
padding-bottom:34px;
}
.panel{
padding:28px 22px;
border-radius:24px;
}
.settings-row{
flex-direction:column;
align-items:stretch;
}
.settings-row input{
width:100%;
}
.theme-launcher{
left:auto;
right:calc(12px + var(--safe-right));
top:calc(12px + var(--safe-top));
bottom:auto;
min-height:42px;
padding:0 13px;
z-index:101;
}
.theme-launcher-label{
font-size:.78rem;
letter-spacing:.02em;
}
.theme-panel{
left:calc(12px + var(--safe-left));
top:calc(64px + var(--safe-top));
bottom:auto;
width:calc(100vw - 24px);
max-height:calc(100vh - 82px - var(--safe-top));
}
.cookie-consent-banner{
right:calc(12px + var(--safe-right));
bottom:calc(12px + var(--safe-bottom));
width:calc(100vw - 24px);
gap:8px;
padding:11px 12px;
border-radius:18px;
}
.cookie-consent-copy{
gap:6px;
}
.cookie-consent-copy strong{
font-size:.88rem;
}
.cookie-consent-copy p{
font-size:.76rem;
line-height:1.32;
}
.cookie-consent-actions{
flex-wrap:nowrap;
gap:8px;
}
.cookie-btn{
flex:1 1 0;
min-height:38px;
padding:8px 10px;
border-radius:13px;
font-size:.78rem;
}
.skyline-wheel{
left:7%;
width:92px;
height:92px;
bottom:28px;
}
.skyline-sign{
width:82px;
height:32px;
bottom:110px;
}
}
.midnight-screen{
position:relative;
z-index:2;
width:100%;
min-height:100vh;
padding:var(--screen-pad-top) var(--screen-pad-x) var(--screen-pad-bottom);
display:none;
flex-direction:column;
gap:var(--screen-gap);
animation:panelFloat .35s ease;
}
.midnight-layout{
width:min(1480px, 100%);
display:grid;
grid-template-columns:minmax(340px, 420px) minmax(0, 1fr);
gap:var(--layout-gap);
align-items:stretch;
}
.midnight-side,
.midnight-board-glass{
background:linear-gradient(180deg, rgba(7,11,28,.78), rgba(7,12,30,.6));
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(16px);
box-shadow:0 24px 50px rgba(0,0,0,.26);
}
.midnight-side{
border-radius:30px;
padding:var(--panel-padding);
display:flex;
flex-direction:column;
gap:var(--section-gap);
}
.midnight-side-title,
.midnight-board-title strong{
font-size:1rem;
letter-spacing:.08em;
text-transform:uppercase;
}
.midnight-chip-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.midnight-chip{
min-height:56px;
border:none;
border-radius:18px;
cursor:pointer;
color:#fff;
font-weight:800;
font-size:1rem;
background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.1);
transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.midnight-chip:hover,
.midnight-chip.active{
transform:translateY(-2px);
border-color:rgba(255,255,255,.24);
box-shadow:0 14px 28px rgba(var(--accent-2-rgb), .18);
}
.midnight-meta-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}
.midnight-stat{
padding:14px;
border-radius:20px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
}
.midnight-stat .label{
font-size:.76rem;
text-transform:uppercase;
letter-spacing:.08em;
color:rgba(255,255,255,.6);
margin-bottom:6px;
}
.midnight-stat .value{
font-size:1.14rem;
font-weight:800;
}
.midnight-actions{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.midnight-summary-box{
margin-top:auto;
padding:16px 18px;
border-radius:22px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.midnight-main{
display:grid;
gap:18px;
}
.midnight-wheel-stage{
position:relative;
min-height:448px;
border-radius:34px;
padding:28px 18px 60px;
overflow:hidden;
background:
radial-gradient(circle at 20% 22%, rgba(var(--accent-1-rgb), .18), transparent 22%),
radial-gradient(circle at 82% 18%, rgba(var(--accent-2-rgb), .24), transparent 24%),
radial-gradient(circle at 50% 32%, rgba(255,214,112,.16), transparent 28%),
radial-gradient(circle at 50% 80%, rgba(var(--accent-2-rgb), .15), transparent 44%),
linear-gradient(180deg, rgba(9,12,29,.84), rgba(6,9,20,.92));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 28px 64px rgba(0,0,0,.34);
display:flex;
align-items:center;
justify-content:center;
}
.midnight-wheel-stage::before{
content:"";
position:absolute;
inset:-10% -18%;
background:
radial-gradient(circle at 22% 58%, rgba(255,212,104,.26), transparent 18%),
radial-gradient(circle at 76% 40%, rgba(var(--accent-2-rgb), .28), transparent 16%),
radial-gradient(circle at 64% 72%, rgba(var(--accent-1-rgb), .16), transparent 18%);
filter:blur(22px);
opacity:.92;
pointer-events:none;
}
.midnight-wheel-stage::after{
content:"";
position:absolute;
inset:18px;
border-radius:26px;
border:1px solid rgba(255,255,255,.08);
pointer-events:none;
}
.midnight-wheel-shell{
--midnight-wheel-size:360px;
position:relative;
width:var(--midnight-wheel-size);
height:var(--midnight-wheel-size);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 18px 36px rgba(0,0,0,.3));
isolation:isolate;
}
.midnight-wheel-glow{
position:absolute;
inset:-34px;
border-radius:50%;
background:
radial-gradient(circle, rgba(var(--accent-1-rgb), .3), rgba(var(--accent-2-rgb), .12) 40%, transparent 68%),
conic-gradient(from 180deg, rgba(255,255,255,.05), transparent 22%, rgba(255,255,255,.05) 46%, transparent 72%, rgba(255,255,255,.05));
filter:blur(16px);
}
.midnight-wheel{
position:absolute;
inset:0;
border-radius:50%;
border:16px solid rgba(22,12,29,.94);
box-shadow:inset 0 0 0 3px rgba(255,255,255,.08), inset 0 18px 30px rgba(255,255,255,.08), inset 0 -18px 28px rgba(0,0,0,.18), 0 24px 44px rgba(0,0,0,.3);
will-change:transform;
}
.midnight-wheel::before,
.midnight-wheel::after{
content:"";
position:absolute;
border-radius:50%;
}
.midnight-wheel::before{
inset:26%;
background:radial-gradient(circle, rgba(14,18,33,.86), rgba(7,10,21,.96));
box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.midnight-wheel::after{
inset:calc(50% - 16px);
background:radial-gradient(circle, rgba(255,245,202,.98), rgba(243,185,87,.82));
box-shadow:0 0 18px rgba(255,214,96,.48);
z-index:3;
}
.midnight-wheel-pointer{
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:18px solid transparent;
border-right:18px solid transparent;
border-top:38px solid #fff4c0;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
z-index:7;
}
.midnight-wheel-pointer::after{
content:"";
position:absolute;
left:-7px;
top:-39px;
width:14px;
height:14px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,245,202,.98), rgba(243,185,87,.82));
box-shadow:0 0 12px rgba(255,214,96,.42);
}
.midnight-wheel-markers{
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
}
.midnight-wheel-marker{
position:absolute;
min-width:18px;
height:18px;
padding:0 4px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
font-size:.58rem;
font-weight:900;
line-height:1;
color:#fff;
border:1px solid rgba(255,255,255,.22);
box-shadow:0 4px 10px rgba(0,0,0,.24);
background:rgba(11,16,29,.72);
backdrop-filter:blur(6px);
transform:translate(-50%, -50%);
}
.midnight-wheel-marker[data-token="10"],
.midnight-wheel-marker[data-token="20"],
.midnight-wheel-marker[data-token="MID"]{
min-width:24px;
}
.midnight-wheel-center{
position:absolute;
inset:calc(50% - 62px);
width:124px;
height:124px;
border-radius:50%;
border:3px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 30% 26%, rgba(255,255,255,.18), transparent 30%),
linear-gradient(180deg, rgba(18,22,40,.98), rgba(8,10,22,.98));
box-shadow:inset 0 0 0 8px rgba(6,7,16,.7), inset 0 10px 18px rgba(255,255,255,.06), 0 14px 28px rgba(0,0,0,.34);
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
cursor:pointer;
z-index:6;
transition:transform .18s ease, box-shadow .24s ease, border-color .24s ease;
}
.midnight-wheel-center:hover,
.midnight-wheel-center:focus-visible{
transform:scale(1.03);
border-color:rgba(255,255,255,.2);
box-shadow:inset 0 0 0 8px rgba(6,7,16,.7), inset 0 10px 18px rgba(255,255,255,.06), 0 18px 30px rgba(0,0,0,.38);
}
.midnight-wheel-center-label{
font-size:2rem;
line-height:1;
letter-spacing:.04em;
font-weight:900;
background:linear-gradient(180deg, #ffd982, #f868ff 60%, #76c9ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.midnight-wheel-center small{
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.22em;
color:rgba(255,255,255,.7);
}
.midnight-wheel-legend{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex-wrap:wrap;
z-index:4;
}
.midnight-wheel-key{
min-width:42px;
min-height:28px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 10px 18px rgba(0,0,0,.2);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:.74rem;
font-weight:900;
}
.midnight-wheel-shell.spinning .midnight-wheel-glow{
animation:midnightWheelGlow 1.1s ease-in-out infinite alternate;
}
.midnight-wheel-shell.spinning .midnight-wheel-pointer{
animation:midnightPointerBounce .14s linear infinite alternate;
}
.midnight-wheel-shell.spinning .midnight-wheel-center{
animation:midnightCenterPulse .8s ease-in-out infinite alternate;
}
.midnight-wheel-shell.flash .midnight-wheel-glow{
animation:midnightWheelFlash .7s ease;
}
.midnight-result-badge{
position:absolute;
right:20px;
top:20px;
min-width:108px;
padding:12px 14px;
border-radius:20px;
background:linear-gradient(180deg, rgba(22,28,46,.94), rgba(10,12,24,.88));
border:1px solid rgba(255,255,255,.14);
text-align:center;
z-index:4;
}
.midnight-result-badge .t{
font-size:.78rem;
color:rgba(255,255,255,.7);
text-transform:uppercase;
letter-spacing:.08em;
}
.midnight-result-badge .n{
font-size:2rem;
font-weight:900;
}
.midnight-stage-burst{
position:absolute;
left:28px;
top:22px;
font-size:.8rem;
letter-spacing:.26em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.midnight-betting-board{
padding:18px;
border-radius:28px;
}
.midnight-board-title{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:16px;
}
.midnight-history{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.midnight-history-pill{
min-width:42px;
padding:8px 10px;
border-radius:999px;
text-align:center;
font-size:.78rem;
font-weight:800;
border:1px solid rgba(255,255,255,.12);
color:#fff;
}
.midnight-board-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:12px;
}
.midnight-bet-card{
position:relative;
min-height:124px;
border:none;
border-radius:24px;
padding:18px 16px;
color:#fff;
text-align:left;
cursor:pointer;
overflow:hidden;
border:1px solid rgba(255,255,255,.1);
box-shadow:0 16px 30px rgba(0,0,0,.22);
transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.midnight-bet-card:hover,
.midnight-bet-card.active-bet{
transform:translateY(-3px);
border-color:rgba(255,255,255,.24);
box-shadow:0 22px 34px rgba(0,0,0,.28);
}
.midnight-bet-card .value{
display:block;
font-size:2rem;
font-weight:900;
margin-bottom:8px;
}
.midnight-bet-card .payout{
display:block;
font-size:.86rem;
color:rgba(255,255,255,.82);
}
.midnight-paytable-note{
margin-top:14px;
color:rgba(255,255,255,.66);
font-size:.86rem;
line-height:1.5;
}
.midnight-result-badge.one,
.midnight-history-pill.one,
.midnight-bet-card.tone-one,
.midnight-wheel-marker.one,
.midnight-wheel-key.tone-one{background:linear-gradient(180deg, rgba(56,88,255,.94), rgba(31,45,133,.94));}
.midnight-result-badge.two,
.midnight-history-pill.two,
.midnight-bet-card.tone-two,
.midnight-wheel-marker.two,
.midnight-wheel-key.tone-two{background:linear-gradient(180deg, rgba(29,175,255,.94), rgba(18,84,143,.94));}
.midnight-result-badge.five,
.midnight-history-pill.five,
.midnight-bet-card.tone-five,
.midnight-wheel-marker.five,
.midnight-wheel-key.tone-five{background:linear-gradient(180deg, rgba(122,93,255,.94), rgba(63,43,132,.94));}
.midnight-result-badge.ten,
.midnight-history-pill.ten,
.midnight-bet-card.tone-ten,
.midnight-wheel-marker.ten,
.midnight-wheel-key.tone-ten{background:linear-gradient(180deg, rgba(207,93,255,.94), rgba(104,38,140,.94));}
.midnight-result-badge.twenty,
.midnight-history-pill.twenty,
.midnight-bet-card.tone-twenty,
.midnight-wheel-marker.twenty,
.midnight-wheel-key.tone-twenty{background:linear-gradient(180deg, rgba(244,154,50,.94), rgba(143,78,18,.94));}
.midnight-result-badge.midnight,
.midnight-history-pill.midnight,
.midnight-bet-card.tone-midnight,
.midnight-wheel-marker.midnight,
.midnight-wheel-key.tone-midnight{background:linear-gradient(180deg, rgba(255,212,90,.96), rgba(182,117,19,.94)); color:#24170a;}
.midnight-bet-card.tone-midnight .payout{color:rgba(36,23,10,.82);}
@keyframes midnightWheelGlow{
from{transform:scale(1); opacity:.72}
to{transform:scale(1.04); opacity:1}
}
@keyframes midnightWheelFlash{
0%{opacity:0}
30%{opacity:1}
100%{opacity:.72}
}
@keyframes midnightPointerBounce{
from{transform:translateX(-50%) translateY(0)}
to{transform:translateX(-50%) translateY(4px)}
}
@keyframes midnightCenterPulse{
from{transform:scale(1)}
to{transform:scale(1.035)}
}
@media (max-width:1180px){
.midnight-layout{
grid-template-columns:1fr;
}
}
@media (max-width:760px){
.midnight-screen{
padding:12px 12px 28px;
}
.midnight-chip-row,
.midnight-board-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.midnight-wheel-stage{
min-height:390px;
padding-top:54px;
padding-bottom:60px;
}
.midnight-result-badge{
right:14px;
top:14px;
min-width:92px;
}
.midnight-stage-burst{
left:20px;
top:16px;
letter-spacing:.18em;
}
}
@media (max-width:560px){
.midnight-wheel-marker{
min-width:16px;
height:16px;
font-size:.52rem;
padding:0 3px;
}
.midnight-wheel-marker[data-token="10"],
.midnight-wheel-marker[data-token="20"],
.midnight-wheel-marker[data-token="MID"]{
min-width:21px;
}
.midnight-wheel-center{
inset:calc(50% - 54px);
width:108px;
height:108px;
}
.midnight-wheel-center-label{
font-size:1.72rem;
}
.midnight-wheel-legend{
gap:6px;
}
.midnight-wheel-key{
min-width:36px;
min-height:24px;
padding:5px 8px;
font-size:.68rem;
}
}
@media (max-width:640px){
.panel{
padding:24px 18px;
border-radius:22px;
}
.title{
font-size:2.02rem;
}
.subtitle{
margin-bottom:22px;
}
.mode-select{
grid-template-columns:1fr;
}
#lobbyScreen{
padding:22px 18px;
}
}
/* Keno */
.keno-screen{
position:relative;
z-index:2;
width:100%;
min-height:100vh;
padding:var(--screen-pad-top) var(--screen-pad-x) var(--screen-pad-bottom);
display:none;
flex-direction:column;
gap:var(--screen-gap);
animation:panelFloat .35s ease;
}
.keno-layout{
width:min(1480px, 100%);
margin:0 auto;
display:grid;
grid-template-columns:minmax(320px, 380px) minmax(0, 1fr);
gap:var(--layout-gap);
align-items:start;
}
.keno-side,
.keno-main-card,
.keno-player-card{
position:relative;
overflow:hidden;
border-radius:30px;
border:1px solid rgba(255,255,255,var(--glass-border-alpha));
background:linear-gradient(180deg, rgba(9,13,30,.82), rgba(8,11,24,.64));
backdrop-filter:blur(var(--glass-blur));
box-shadow:0 22px 52px rgba(0,0,0,.28);
}
.keno-side{
padding:var(--panel-padding);
display:flex;
flex-direction:column;
gap:var(--section-gap);
}
.keno-kicker{
font-size:.78rem;
letter-spacing:.16em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
font-weight:800;
}
.keno-chip-row,
.keno-actions,
.keno-stat-grid{
display:grid;
gap:10px;
}
.keno-chip-row{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
.keno-actions{
grid-template-columns:1fr 1fr;
}
.keno-chip{
min-height:52px;
border:none;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
color:#fff;
font-weight:800;
cursor:pointer;
transition:transform .16s ease, background .2s ease, border-color .2s ease;
}
.keno-chip:hover{
transform:translateY(-2px);
}
.keno-chip.active{
background:linear-gradient(135deg, rgba(var(--accent-1-rgb), .24), rgba(var(--accent-2-rgb), .18));
border-color:rgba(255,255,255,.2);
}
.keno-chip:disabled{
opacity:.46;
cursor:not-allowed;
transform:none;
}
.keno-stat-grid{
grid-template-columns:1fr 1fr;
}
.keno-stat-card{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.keno-stat-card span{
display:block;
font-size:.74rem;
text-transform:uppercase;
letter-spacing:.1em;
color:rgba(255,255,255,.62);
margin-bottom:6px;
}
.keno-stat-card strong{
font-size:1.1rem;
}
.keno-actions .btn{
min-height:50px;
}
.keno-summary{
display:grid;
gap:8px;
padding:16px 18px;
border-radius:20px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.keno-main{
display:grid;
gap:var(--layout-gap);
}
.keno-main-card{
padding:var(--panel-padding);
}
.keno-main-card::before,
.keno-player-card::before,
.keno-side::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%, transparent 72%, rgba(255,255,255,.03));
}
.keno-main-card > *,
.keno-player-card > *,
.keno-side > *{
position:relative;
z-index:1;
}
.keno-board-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
flex-wrap:wrap;
}
.keno-board-title strong{
display:block;
font-size:1.24rem;
}
.keno-board-title p{
margin-top:6px;
color:rgba(255,255,255,.7);
line-height:1.5;
}
.keno-draw-tray{
min-height:60px;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:flex-end;
}
.keno-draw-ball{
width:44px;
height:44px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:900;
background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 12px 24px rgba(0,0,0,.22);
}
.keno-draw-ball.hit{
background:linear-gradient(180deg, rgba(255,212,90,.96), rgba(182,117,19,.92));
color:#24170a;
}
.keno-draw-ball.fresh{
animation:kenoBallPop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes kenoBallPop{
0%{opacity:0;transform:translateY(12px) scale(.72)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.keno-number-grid{
display:grid;
grid-template-columns:repeat(10, minmax(0, 1fr));
gap:10px;
}
.keno-number{
position:relative;
min-height:58px;
border:none;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:#fff;
cursor:pointer;
font-weight:800;
transition:transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.keno-number:hover{
transform:translateY(-2px);
}
.keno-number.selected{
background:linear-gradient(135deg, rgba(var(--accent-1-rgb), .24), rgba(var(--accent-2-rgb), .18));
border-color:rgba(255,255,255,.18);
}
.keno-number.ticket{
box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
}
.keno-number.drawn{
background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
border-color:rgba(255,255,255,.16);
}
.keno-number.hit{
background:linear-gradient(180deg, rgba(255,212,90,.96), rgba(182,117,19,.92));
border-color:rgba(255,235,174,.44);
color:#24170a;
box-shadow:0 18px 28px rgba(182,117,19,.24);
}
.keno-number.locked{
opacity:.72;
}
.keno-player-card{
padding:22px;
}
.keno-player-list{
display:grid;
gap:10px;
}
.keno-player-item{
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.keno-player-item.current{
border-color:rgba(var(--accent-1-rgb), .32);
box-shadow:0 0 0 1px rgba(var(--accent-1-rgb), .14);
}
.keno-player-name{
font-weight:800;
margin-bottom:4px;
}
.keno-player-meta,
.keno-pay-note{
color:rgba(255,255,255,.68);
line-height:1.45;
}
.keno-pay-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
gap:10px;
margin-top:18px;
}
.keno-pay-pill{
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.keno-pay-pill strong{
display:block;
margin-bottom:4px;
}
.keno-pay-pill span{
color:rgba(255,255,255,.68);
font-size:.84rem;
}
@media (max-width:1160px){
.keno-layout{
grid-template-columns:1fr;
}
}
@media (max-width:760px){
.keno-screen{
padding:12px 12px 28px;
}
.keno-chip-row,
.keno-actions,
.keno-stat-grid{
grid-template-columns:1fr 1fr;
}
.keno-number-grid{
grid-template-columns:repeat(5, minmax(0, 1fr));
}
.keno-board-header{
flex-direction:column;
}
.keno-draw-tray{
justify-content:flex-start;
}
}
/* Sic Bo */
.sicbo-screen{
position:relative;
z-index:2;
width:100%;
min-height:100vh;
padding:var(--game-top-safe) 22px 28px;
display:none;
flex-direction:column;
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
animation:panelFloat .35s ease;
}
.sicbo-screen .table-area{
width:var(--game-shell-width);
margin:0 auto;
padding:6px 0 22px;
display:block;
flex:none;
overflow:visible;
}
.sicbo-layout{
width:min(1480px, 100%);
margin:0 auto;
display:grid;
grid-template-columns:minmax(310px, 380px) minmax(0, 1fr);
gap:22px;
align-items:start;
}
.sicbo-sidebar,
.sicbo-main{
min-width:0;
}
.sicbo-sidebar{
display:flex;
flex-direction:column;
gap:16px;
}
.sicbo-main{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(280px, 330px);
gap:16px;
align-items:start;
}
.sicbo-panel{
position:relative;
overflow:hidden;
padding:18px;
border-radius:28px;
border:1px solid rgba(255,255,255,.1);
background:linear-gradient(180deg, rgba(10,14,28,.82), rgba(7,10,21,.68));
box-shadow:0 22px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(14px);
}
.sicbo-panel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 26%);
pointer-events:none;
}
.sicbo-panel > *{
position:relative;
z-index:1;
}
.sicbo-kicker{
margin-bottom:14px;
font-size:.84rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.sicbo-chip-row,
.sicbo-actions,
.sicbo-stat-grid,
.sicbo-board-grid{
display:grid;
gap:12px;
}
.sicbo-chip-row,
.sicbo-actions,
.sicbo-stat-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.sicbo-chip{
min-height:60px;
border:none;
border-radius:18px;
color:#fff;
font-weight:900;
cursor:pointer;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.08) 34%, rgba(0,0,0,.12) 35%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.sicbo-chip:hover{ transform:translateY(-2px); }
.sicbo-chip.active{ outline:2px solid rgba(123,221,255,.82); box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 26px rgba(0,0,0,.3); }
.sicbo-chip:disabled{ opacity:.42; cursor:not-allowed; transform:none; }
.sicbo-stat-card{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
gap:6px;
}
.sicbo-stat-card span{
font-size:.78rem;
color:rgba(255,255,255,.62);
text-transform:uppercase;
letter-spacing:.08em;
}
.sicbo-stat-card strong{
font-size:1.2rem;
font-weight:900;
}
.sicbo-actions .btn{
width:100%;
margin:0;
}
.sicbo-summary{
margin-top:14px;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}
.sicbo-summary .summary-line + .summary-line{ margin-top:10px; }
.sicbo-stage{
position:relative;
overflow:hidden;
border-radius:42px;
padding:26px;
background:
radial-gradient(circle at 50% 20%, rgba(255,226,143,.12), transparent 30%),
radial-gradient(circle at 50% 86%, rgba(91,116,255,.14), transparent 34%),
linear-gradient(180deg, rgba(28,24,70,.92), rgba(8,13,38,.98));
border:10px solid #29170d;
box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 28px 66px rgba(0,0,0,.42);
}
.sicbo-stage::before{
content:"";
position:absolute;
inset:18px;
border-radius:30px;
border:2px solid rgba(255,255,255,.08);
pointer-events:none;
}
.sicbo-table-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
flex-wrap:wrap;
}
.sicbo-total-pill,
.sicbo-title-pill{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 16px;
border-radius:999px;
background:rgba(6,12,24,.44);
border:1px solid rgba(255,255,255,.08);
font-weight:800;
}
.sicbo-dice-stage{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
min-height:170px;
margin-bottom:18px;
}
.sicbo-die{
width:78px;
height:78px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
font-weight:900;
color:#1d2240;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(232,236,255,.9));
box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.sicbo-dice-stage.rolling .sicbo-die{
animation:sicboDieShake .52s ease-in-out 3;
}
@keyframes sicboDieShake{
0%,100%{transform:translate3d(0,0,0) rotate(0)}
20%{transform:translate3d(-6px,4px,0) rotate(-8deg)}
40%{transform:translate3d(6px,-4px,0) rotate(10deg)}
60%{transform:translate3d(-5px,-3px,0) rotate(-6deg)}
80%{transform:translate3d(5px,3px,0) rotate(7deg)}
}
.sicbo-board-grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.sicbo-bet-spot{
position:relative;
overflow:hidden;
min-height:92px;
border:none;
border-radius:22px;
color:#fff;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
font-weight:900;
text-align:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.24);
transition:transform .16s ease, box-shadow .22s ease, opacity .22s ease;
}
.sicbo-bet-spot::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 36%, transparent 64%, rgba(255,255,255,.06));
pointer-events:none;
}
.sicbo-bet-spot:hover{ transform:translateY(-2px); }
.sicbo-bet-spot.active-bet{ outline:2px solid rgba(123,221,255,.88); box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 28px rgba(0,0,0,.26); }
.sicbo-bet-spot.family-main{ background:linear-gradient(180deg, rgba(51,101,237,.92), rgba(32,66,151,.9)); }
.sicbo-bet-spot.family-single{ background:linear-gradient(180deg, rgba(22,160,94,.94), rgba(14,107,63,.9)); }
.sicbo-bet-spot.family-double{ background:linear-gradient(180deg, rgba(239,168,58,.94), rgba(176,110,18,.9)); }
.sicbo-bet-spot.family-triple{ background:linear-gradient(180deg, rgba(109,88,255,.86), rgba(67,50,170,.9)); }
.sicbo-history,
.sicbo-player-list{
display:grid;
gap:10px;
}
.sicbo-history-pill,
.sicbo-player-item{
padding:13px 14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.sicbo-player-item.current{
border-color:rgba(123,221,255,.28);
box-shadow:0 0 0 1px rgba(123,221,255,.16);
}
.sicbo-player-name{ font-weight:900; margin-bottom:5px; }
.sicbo-player-meta,
.sicbo-rules{ color:rgba(255,255,255,.7); line-height:1.45; font-size:.9rem; }
@media (max-width:1180px){
.sicbo-layout{ grid-template-columns:1fr; }
.sicbo-main{ grid-template-columns:1fr; }
}
@media (max-width:760px){
.sicbo-screen{ padding:var(--game-top-safe) 12px 28px; }
.sicbo-panel,
.sicbo-stage{ border-radius:24px; padding:18px; }
.sicbo-board-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:540px){
.sicbo-chip-row,
.sicbo-stat-grid,
.sicbo-actions{ grid-template-columns:1fr; }
}
/* Baccarat */
.baccarat-screen{
position:relative;
z-index:2;
width:100%;
min-height:100vh;
padding:var(--screen-pad-top) var(--screen-pad-x) var(--screen-pad-bottom);
display:none;
flex-direction:column;
animation:panelFloat .35s ease;
}
.baccarat-layout{
width:min(1480px, 100%);
margin:0 auto;
display:grid;
grid-template-columns:minmax(330px, 390px) minmax(0, 1fr);
gap:22px;
align-items:start;
}
.baccarat-side,
.baccarat-main{
min-width:0;
}
.baccarat-side{
display:flex;
flex-direction:column;
gap:16px;
}
.baccarat-main{
display:flex;
flex-direction:column;
gap:16px;
}
.baccarat-main-grid{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(280px, 330px);
gap:16px;
align-items:start;
}
.baccarat-panel{
position:relative;
overflow:hidden;
padding:18px;
border-radius:28px;
border:1px solid rgba(255,255,255,.1);
background:linear-gradient(180deg, rgba(10,14,28,.8), rgba(7,10,21,.66));
box-shadow:0 22px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(14px);
}
.baccarat-panel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 26%);
pointer-events:none;
}
.baccarat-panel > *{
position:relative;
z-index:1;
}
.baccarat-feed-panel{
min-height:100%;
align-self:stretch;
}
.baccarat-panel-kicker{
margin-bottom:14px;
font-size:.84rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.baccarat-chip-row,
.baccarat-actions{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
}
.baccarat-chip-row{
margin-bottom:14px;
}
.baccarat-chip{
min-width:0;
min-height:64px;
padding:14px 12px;
border:none;
border-radius:18px;
cursor:pointer;
color:#fff;
font-weight:900;
font-size:1rem;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.08) 34%, rgba(0,0,0,.12) 35%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.baccarat-chip:hover{
transform:translateY(-2px);
}
.baccarat-chip.active{
outline:2px solid rgba(123,221,255,.82);
box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 26px rgba(0,0,0,.3);
}
.baccarat-chip:disabled{
opacity:.42;
cursor:not-allowed;
transform:none;
}
.baccarat-stat-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
}
.baccarat-stat-card{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
gap:6px;
}
.baccarat-stat-card span{
font-size:.78rem;
color:rgba(255,255,255,.62);
text-transform:uppercase;
letter-spacing:.08em;
}
.baccarat-stat-card strong{
font-size:1.24rem;
font-weight:900;
}
.baccarat-actions .btn{
width:100%;
margin:0;
}
.baccarat-summary{
margin-top:14px;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}
.baccarat-summary .summary-line + .summary-line{
margin-top:10px;
}
.baccarat-history{
display:flex;
flex-wrap:wrap;
gap:10px;
min-height:38px;
margin-bottom:14px;
}
.baccarat-history-pill{
min-width:72px;
padding:9px 12px;
border-radius:999px;
text-align:center;
font-weight:900;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.06);
}
.baccarat-history-pill.player{background:linear-gradient(180deg, rgba(60,116,255,.9), rgba(44,82,185,.82));}
.baccarat-history-pill.banker{background:linear-gradient(180deg, rgba(25,176,101,.9), rgba(15,120,67,.82));}
.baccarat-history-pill.tie{background:linear-gradient(180deg, rgba(235,164,67,.92), rgba(174,112,22,.84));}
.baccarat-player-list{
display:flex;
flex-direction:column;
gap:10px;
}
.baccarat-player-item{
padding:13px 14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.baccarat-player-item.current{
border-color:rgba(123,221,255,.28);
box-shadow:0 0 0 1px rgba(123,221,255,.16);
}
.baccarat-player-name{
font-weight:900;
margin-bottom:5px;
}
.baccarat-player-meta{
color:rgba(255,255,255,.7);
line-height:1.45;
font-size:.9rem;
}
.baccarat-table-shell{
position:relative;
overflow:hidden;
border-radius:42px;
padding:28px;
background:
radial-gradient(circle at 50% 18%, rgba(255,219,126,.12), transparent 30%),
radial-gradient(circle at 50% 86%, rgba(74,116,255,.14), transparent 34%),
radial-gradient(circle at 50% 48%, rgba(24,128,82,.24), rgba(8,63,39,.92));
border:10px solid #29170d;
box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 28px 66px rgba(0,0,0,.42);
}
.baccarat-table-shell::before{
content:"";
position:absolute;
inset:18px;
border-radius:30px;
border:2px solid rgba(255,255,255,.08);
pointer-events:none;
}
.baccarat-table-shell.result-player{box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 0 0 1px rgba(82,134,255,.22), 0 28px 68px rgba(0,0,0,.42), 0 0 36px rgba(82,134,255,.16);}
.baccarat-table-shell.result-banker{box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 0 0 1px rgba(38,191,123,.22), 0 28px 68px rgba(0,0,0,.42), 0 0 36px rgba(38,191,123,.16);}
.baccarat-table-shell.result-tie{box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 0 0 1px rgba(241,176,66,.24), 0 28px 68px rgba(0,0,0,.42), 0 0 36px rgba(241,176,66,.16);}
.baccarat-table-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
flex-wrap:wrap;
}
.baccarat-pot-pill{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 16px;
border-radius:999px;
background:rgba(6,12,24,.44);
border:1px solid rgba(255,255,255,.08);
font-weight:800;
}
.baccarat-pot-pill strong{
font-size:1.12rem;
}
.baccarat-result-banner{
flex:1 1 320px;
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:20px;
background:linear-gradient(135deg, rgba(61,95,255,.16), rgba(164,94,255,.12));
border:1px solid rgba(255,255,255,.1);
font-weight:900;
letter-spacing:.02em;
text-align:center;
box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.baccarat-result-banner.player{background:linear-gradient(135deg, rgba(61,95,255,.28), rgba(100,144,255,.14));}
.baccarat-result-banner.banker{background:linear-gradient(135deg, rgba(26,178,105,.28), rgba(72,212,150,.14));}
.baccarat-result-banner.tie{background:linear-gradient(135deg, rgba(240,174,43,.3), rgba(255,210,96,.14));}
.baccarat-result-banner.announce{animation:baccaratResultReveal .62s cubic-bezier(.16,1,.3,1);}
@keyframes baccaratResultReveal{
0%{opacity:0;transform:translateY(-10px) scale(.96)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.baccarat-hands{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(220px, 260px) minmax(0, 1fr);
gap:18px;
align-items:stretch;
}
.baccarat-hand-zone,
.baccarat-center-column{
position:relative;
min-width:0;
}
.baccarat-hand-zone{
padding:18px;
border-radius:28px;
background:linear-gradient(180deg, rgba(10,14,26,.44), rgba(9,13,24,.28));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 16px 34px rgba(0,0,0,.22);
display:flex;
flex-direction:column;
gap:14px;
}
.baccarat-hand-zone.player.winner{
border-color:rgba(82,134,255,.28);
box-shadow:0 0 0 1px rgba(82,134,255,.16), 0 16px 34px rgba(0,0,0,.22), 0 0 36px rgba(82,134,255,.14);
}
.baccarat-hand-zone.banker.winner{
border-color:rgba(38,191,123,.28);
box-shadow:0 0 0 1px rgba(38,191,123,.16), 0 16px 34px rgba(0,0,0,.22), 0 0 36px rgba(38,191,123,.14);
}
.baccarat-hand-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.baccarat-hand-title{
font-size:1.06rem;
font-weight:900;
letter-spacing:.02em;
}
.baccarat-total-pill{
min-width:42px;
min-height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
font-size:1.1rem;
font-weight:900;
}
.baccarat-badge{
min-height:30px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 10px;
border-radius:999px;
font-size:.74rem;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(255,255,255,.92);
}
.baccarat-cards{
min-height:114px;
}
.baccarat-center-column{
display:flex;
flex-direction:column;
justify-content:center;
gap:14px;
}
.baccarat-sidebets{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.baccarat-bet-spot{
position:relative;
overflow:hidden;
min-height:92px;
width:100%;
padding:16px 14px;
border:none;
border-radius:22px;
color:#fff;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
font-weight:900;
text-align:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.24);
transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.baccarat-bet-spot::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 36%, transparent 64%, rgba(255,255,255,.06));
pointer-events:none;
}
.baccarat-bet-spot:hover{
transform:translateY(-2px);
}
.baccarat-bet-spot.player{background:linear-gradient(180deg, rgba(51,101,237,.92), rgba(32,66,151,.9));}
.baccarat-bet-spot.banker{background:linear-gradient(180deg, rgba(22,160,94,.94), rgba(14,107,63,.9));}
.baccarat-bet-spot.tie{background:linear-gradient(180deg, rgba(239,168,58,.94), rgba(176,110,18,.9)); min-height:116px;}
.baccarat-bet-spot.side{background:linear-gradient(180deg, rgba(109,88,255,.86), rgba(67,50,170,.9));}
.baccarat-bet-spot.active-bet{
outline:2px solid rgba(123,221,255,.88);
box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 28px rgba(0,0,0,.26);
}
.baccarat-bet-spot.winner,
#baTieZone.winner{
outline:2px solid rgba(255,255,255,.4);
box-shadow:0 0 0 4px rgba(255,255,255,.1), 0 0 34px rgba(255,255,255,.18);
}
.baccarat-bet-spot strong{
font-size:1.02rem;
}
.baccarat-rules{
display:grid;
gap:10px;
color:rgba(255,255,255,.78);
line-height:1.58;
}
.baccarat-screen .btn,
.baccarat-chip,
.baccarat-bet-spot{
-webkit-tap-highlight-color:transparent;
}
.baccarat-screen{
min-height:100vh;
padding:var(--game-top-safe) 22px 28px;
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
}
.baccarat-screen .table-area{
width:var(--game-shell-width);
margin:0 auto;
padding:6px 0 22px;
display:block;
flex:none;
overflow:visible;
}
@media (max-width:1180px){
.baccarat-layout{
grid-template-columns:1fr;
}
.baccarat-side{
order:2;
}
.baccarat-main{
order:1;
}
}
@media (max-width:1320px){
.baccarat-main-grid{
grid-template-columns:1fr;
}
}
@media (max-width:760px){
.baccarat-screen{
padding:var(--game-top-safe) 12px 28px;
}
.baccarat-panel,
.baccarat-table-shell{
border-radius:24px;
padding:18px;
}
.baccarat-hands{
grid-template-columns:1fr;
}
.baccarat-center-column{
order:2;
}
.baccarat-sidebets{
grid-template-columns:1fr;
}
.baccarat-chip-row,
.baccarat-stat-grid,
.baccarat-actions{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.baccarat-result-banner{
flex-basis:100%;
}
.baccarat-main-grid{
grid-template-columns:1fr;
}
}
@media (max-width:540px){
.baccarat-chip-row,
.baccarat-stat-grid,
.baccarat-actions{
grid-template-columns:1fr;
}
.baccarat-table-top{
justify-content:center;
}
.baccarat-pot-pill{
width:100%;
justify-content:center;
}
}
/* Craps */
.craps-screen{
position:relative;
z-index:2;
width:100%;
min-height:100vh;
padding:var(--game-top-safe) 22px 28px;
display:none;
flex-direction:column;
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
animation:panelFloat .35s ease;
}
.craps-screen .table-area{
width:var(--game-shell-width);
margin:0 auto;
padding:6px 0 22px;
display:block;
flex:none;
overflow:visible;
}
.craps-layout{
width:min(1480px, 100%);
margin:0 auto;
display:grid;
grid-template-columns:minmax(310px, 380px) minmax(0, 1fr);
gap:22px;
align-items:start;
}
.craps-sidebar,
.craps-main,
.craps-main-grid{
min-width:0;
}
.craps-sidebar{
display:flex;
flex-direction:column;
gap:16px;
}
.craps-main{
display:flex;
flex-direction:column;
gap:16px;
}
.craps-main-grid{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(280px, 330px);
gap:16px;
align-items:start;
}
.craps-panel{
position:relative;
overflow:hidden;
padding:18px;
border-radius:28px;
border:1px solid rgba(255,255,255,.1);
background:linear-gradient(180deg, rgba(10,14,28,.82), rgba(7,10,21,.68));
box-shadow:0 22px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(14px);
}
.craps-panel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 26%);
pointer-events:none;
}
.craps-panel > *{
position:relative;
z-index:1;
}
.craps-panel-kicker{
margin-bottom:14px;
font-size:.84rem;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.craps-feed-panel{
min-height:100%;
align-self:stretch;
}
.craps-chip-row,
.craps-actions,
.craps-stat-grid{
display:grid;
gap:12px;
}
.craps-chip-row{
grid-template-columns:repeat(2, minmax(0,1fr));
margin-bottom:14px;
}
.craps-actions{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.craps-stat-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.craps-chip{
min-width:0;
min-height:64px;
padding:14px 12px;
border:none;
border-radius:18px;
cursor:pointer;
color:#fff;
font-weight:900;
font-size:1rem;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.08) 34%, rgba(0,0,0,.12) 35%), linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 12px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.craps-chip:hover{
transform:translateY(-2px);
}
.craps-chip.active{
outline:2px solid rgba(123,221,255,.82);
box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 26px rgba(0,0,0,.3);
}
.craps-chip:disabled{
opacity:.42;
cursor:not-allowed;
transform:none;
}
.craps-stat-card{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
gap:6px;
}
.craps-stat-card span{
font-size:.78rem;
color:rgba(255,255,255,.62);
text-transform:uppercase;
letter-spacing:.08em;
}
.craps-stat-card strong{
font-size:1.2rem;
font-weight:900;
}
.craps-actions .btn{
width:100%;
margin:0;
}
.craps-summary{
margin-top:14px;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}
.craps-summary .summary-line + .summary-line{
margin-top:10px;
}
.craps-table-shell{
position:relative;
overflow:hidden;
border-radius:42px;
padding:26px;
background:
radial-gradient(circle at 50% 20%, rgba(255,226,143,.12), transparent 30%),
radial-gradient(circle at 50% 86%, rgba(91,116,255,.14), transparent 34%),
linear-gradient(180deg, rgba(10,42,62,.9), rgba(6,29,44,.98));
border:10px solid #29170d;
box-shadow:inset 0 0 0 6px rgba(255,255,255,.04), inset 0 16px 60px rgba(255,255,255,.04), 0 28px 66px rgba(0,0,0,.42);
}
.craps-table-shell::before{
content:"";
position:absolute;
inset:18px;
border-radius:30px;
border:2px solid rgba(255,255,255,.08);
pointer-events:none;
}
.craps-table-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:18px;
flex-wrap:wrap;
}
.craps-pot-pill,
.craps-point-banner{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:56px;
padding:12px 16px;
border-radius:999px;
background:rgba(6,12,24,.44);
border:1px solid rgba(255,255,255,.08);
font-weight:900;
}
.craps-point-banner{
flex:1 1 320px;
border-radius:20px;
background:linear-gradient(135deg, rgba(61,95,255,.16), rgba(164,94,255,.12));
box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.craps-dice-stage{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
padding:18px;
border-radius:28px;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 34px rgba(0,0,0,.22);
}
.craps-dice-pair{
display:flex;
gap:14px;
}
.craps-die{
width:88px;
height:88px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(180deg, #ffffff, #e8edf7);
color:#111827;
font-size:2.15rem;
font-weight:900;
border:2px solid rgba(255,255,255,.7);
box-shadow:0 14px 24px rgba(0,0,0,.26);
}
.craps-roll-chip{
min-width:120px;
padding:14px 16px;
border-radius:22px;
background:rgba(4,10,24,.56);
border:1px solid rgba(255,255,255,.1);
text-align:center;
box-shadow:0 14px 26px rgba(0,0,0,.22);
}
.craps-roll-chip span{
display:block;
margin-bottom:6px;
color:rgba(255,255,255,.66);
text-transform:uppercase;
letter-spacing:.08em;
font-size:.78rem;
}
.craps-roll-chip strong{
font-size:2rem;
font-weight:900;
}
.craps-dice-stage.rolling .craps-die{
animation:crapsDiceShake .72s cubic-bezier(.3,.86,.26,1.08);
}
.craps-roll-chip.fresh{
animation:crapsResultPulse .7s cubic-bezier(.2,.9,.2,1);
}
@keyframes crapsDiceShake{
0%{transform:translate3d(0,0,0) rotate(0deg)}
18%{transform:translate3d(-6px,4px,0) rotate(-8deg)}
36%{transform:translate3d(5px,-4px,0) rotate(9deg)}
54%{transform:translate3d(-4px,3px,0) rotate(-6deg)}
72%{transform:translate3d(4px,-2px,0) rotate(5deg)}
100%{transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes crapsResultPulse{
0%{transform:scale(.9); opacity:.4}
100%{transform:scale(1); opacity:1}
}
.craps-board-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:12px;
}
.craps-bet-spot{
position:relative;
overflow:hidden;
min-height:104px;
width:100%;
padding:16px 14px;
border:none;
border-radius:24px;
color:#fff;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
font-weight:900;
text-align:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.24);
transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.craps-bet-spot::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 36%, transparent 64%, rgba(255,255,255,.06));
pointer-events:none;
}
.craps-bet-spot:hover{
transform:translateY(-2px);
}
.craps-bet-spot.pass{background:linear-gradient(180deg, rgba(36,136,255,.92), rgba(24,82,170,.9));}
.craps-bet-spot.dont{background:linear-gradient(180deg, rgba(170,56,78,.94), rgba(108,28,46,.92));}
.craps-bet-spot.field{background:linear-gradient(180deg, rgba(239,168,58,.94), rgba(176,110,18,.9));}
.craps-bet-spot.come{background:linear-gradient(180deg, rgba(77,123,255,.9), rgba(74,46,185,.88));}
.craps-bet-spot.place{background:linear-gradient(180deg, rgba(22,160,94,.94), rgba(14,107,63,.9));}
.craps-bet-spot.hardway{background:linear-gradient(180deg, rgba(109,88,255,.88), rgba(67,50,170,.9));}
.craps-bet-spot.active-bet{
outline:2px solid rgba(123,221,255,.88);
box-shadow:0 0 0 4px rgba(123,221,255,.12), 0 12px 28px rgba(0,0,0,.26);
}
.craps-bet-spot strong{
font-size:1.02rem;
}
.craps-history{
display:flex;
flex-wrap:wrap;
gap:10px;
min-height:42px;
margin-bottom:14px;
}
.craps-history-pill{
min-width:64px;
padding:9px 12px;
border-radius:20px;
text-align:center;
font-weight:900;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.06);
display:flex;
flex-direction:column;
gap:2px;
}
.craps-history-pill span{
font-size:.76rem;
color:rgba(255,255,255,.68);
}
.craps-history-pill.hard{
background:linear-gradient(180deg, rgba(109,88,255,.86), rgba(67,50,170,.9));
}
.craps-history-pill.seven{
background:linear-gradient(180deg, rgba(170,56,78,.94), rgba(108,28,46,.92));
}
.craps-player-list{
display:flex;
flex-direction:column;
gap:10px;
}
.craps-player-item{
padding:13px 14px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.craps-player-item.current{
border-color:rgba(123,221,255,.28);
box-shadow:0 0 0 1px rgba(123,221,255,.16);
}
.craps-player-item.shooter{
border-color:rgba(240,174,43,.24);
}
.craps-player-name{
font-weight:900;
margin-bottom:5px;
}
.craps-player-meta,
.craps-rules{
color:rgba(255,255,255,.76);
line-height:1.55;
font-size:.92rem;
}
.craps-rules{
display:grid;
gap:10px;
}
.craps-screen .btn,
.craps-chip,
.craps-bet-spot{
-webkit-tap-highlight-color:transparent;
}
@media (max-width:1320px){
.craps-main-grid{
grid-template-columns:1fr;
}
}
@media (max-width:1180px){
.craps-layout{
grid-template-columns:1fr;
}
.craps-sidebar{
order:2;
}
.craps-main{
order:1;
}
}
@media (max-width:760px){
.craps-screen{
padding:var(--game-top-safe) 12px 28px;
}
.craps-panel,
.craps-table-shell{
border-radius:24px;
padding:18px;
}
.craps-dice-stage{
flex-direction:column;
align-items:center;
}
.craps-board-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.craps-chip-row,
.craps-stat-grid,
.craps-actions{
grid-template-columns:repeat(2, minmax(0,1fr));
}
.craps-main-grid{
grid-template-columns:1fr;
}
}
@media (max-width:540px){
.craps-chip-row,
.craps-stat-grid,
.craps-actions,
.craps-board-grid{
grid-template-columns:1fr;
}
.craps-die{
width:74px;
height:74px;
font-size:1.9rem;
}
.craps-table-top{
justify-content:center;
}
.craps-pot-pill,
.craps-point-banner{
width:100%;
}
}
@media (prefers-reduced-motion: reduce){
html{
scroll-behavior:auto;
}
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
.craps-die,
.craps-roll-chip,
.craps-bet-spot,
.craps-chip{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
}
.progression-home-slot{
margin-top:14px;
}
.progression-shell{
position:relative;
z-index:1;
display:grid;
gap:16px;
text-align:left;
}
.progression-hero{
display:grid;
grid-template-columns:minmax(0,1.4fr) minmax(220px,.78fr) minmax(220px,.78fr);
gap:16px;
}
.progression-hero-copy,
.progression-utility-card,
.progression-daily-card,
.progression-panel{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
border-radius:22px;
padding:18px;
box-shadow:0 18px 34px rgba(0,0,0,.2);
}
.progression-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 11px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.9);
font-size:.78rem;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.progression-title{
margin:10px 0 8px;
font-size:2.1rem;
line-height:1;
letter-spacing:-.03em;
}
.progression-subtitle{
margin:0;
color:rgba(255,255,255,.72);
line-height:1.55;
}
.progression-alias-row{
margin-top:16px;
display:grid;
gap:12px;
}
.progression-alias-field{
display:grid;
gap:6px;
color:rgba(255,255,255,.84);
font-size:.88rem;
font-weight:700;
}
.progression-alias-input{
min-height:48px;
border-radius:15px;
border:1px solid rgba(255,255,255,.12);
background:rgba(3,8,24,.72);
color:#fff;
padding:12px 14px;
font:inherit;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.progression-alias-input:focus{
outline:none;
border-color:rgba(var(--accent-2-rgb),.56);
box-shadow:0 0 0 3px rgba(var(--accent-2-rgb),.18);
}
.progression-session-note{
color:rgba(255,255,255,.68);
line-height:1.5;
font-size:.9rem;
}
.progression-daily-card{
display:grid;
gap:10px;
align-content:start;
}
.progression-vault-card{
display:grid;
gap:10px;
align-content:start;
}
.progression-daily-label{
font-size:.78rem;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
}
.progression-daily-card strong{
font-size:1.1rem;
}
.progression-daily-card span{
color:rgba(255,255,255,.72);
line-height:1.45;
}
.progression-claim-btn{
width:100%;
min-height:50px;
}
.progression-liveops-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.progression-liveops-card,
.progression-mission-card{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 16px 32px rgba(0,0,0,.16);
}
.progression-liveops-card.event{
background:linear-gradient(180deg, rgba(var(--accent-1-rgb),.14), rgba(255,255,255,.05));
}
.progression-liveops-card.lucky{
position:relative;
overflow:hidden;
}
.progression-live-copy{
margin:0;
color:rgba(255,255,255,.72);
line-height:1.5;
}
.progression-live-link-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}
.progression-live-link{
display:inline-flex;
align-items:center;
min-height:40px;
padding:8px 12px;
border-radius:999px;
text-decoration:none;
color:#fff;
font-weight:800;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
.progression-live-link.compact{
min-height:36px;
font-size:.88rem;
}
.progression-event-note{
margin-top:12px;
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.82);
line-height:1.45;
font-size:.92rem;
}
.progression-mission-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:12px;
}
.progression-mission-card.ready{
border-color:rgba(var(--accent-2-rgb),.36);
box-shadow:0 14px 30px rgba(var(--accent-2-rgb),.16);
}
.progression-mission-card.claimed{
opacity:.76;
}
.progression-mission-top{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
}
.progression-mission-top p{
margin:6px 0 0;
color:rgba(255,255,255,.68);
line-height:1.45;
font-size:.92rem;
}
.progression-reward-chip.spin{
background:rgba(122,93,255,.18);
border-color:rgba(122,93,255,.28);
}
.progression-lucky-wheel-wrap{
position:relative;
width:232px;
height:232px;
margin:10px auto 14px;
}
.progression-lucky-wheel{
--lucky-rotation:0deg;
position:relative;
width:100%;
height:100%;
border-radius:50%;
padding:10px;
background:linear-gradient(135deg, rgba(var(--accent-1-rgb),.92), rgba(var(--accent-2-rgb),.92));
box-shadow:0 22px 44px rgba(0,0,0,.28), 0 0 28px rgba(var(--accent-2-rgb),.24);
transform:rotate(var(--lucky-rotation));
transition:transform 4.1s cubic-bezier(.12,.92,.18,1);
}
.progression-lucky-wheel.spinning{
filter:saturate(1.12) brightness(1.02);
}
.progression-lucky-wheel-face{
position:relative;
width:100%;
height:100%;
border-radius:50%;
overflow:hidden;
background:
conic-gradient(
from -90deg,
rgba(56,88,255,.96) 0deg 45deg,
rgba(29,175,255,.94) 45deg 90deg,
rgba(122,93,255,.94) 90deg 135deg,
rgba(207,93,255,.94) 135deg 180deg,
rgba(244,154,50,.94) 180deg 225deg,
rgba(255,212,90,.96) 225deg 270deg,
rgba(122,93,255,.94) 270deg 315deg,
rgba(255,212,90,.96) 315deg 360deg
);
border:4px solid rgba(4,9,22,.28);
}
.progression-spin-label{
position:absolute;
left:50%;
top:50%;
display:flex;
align-items:center;
justify-content:center;
width:84px;
text-align:center;
font-size:.72rem;
font-weight:900;
line-height:1.15;
text-transform:uppercase;
letter-spacing:.03em;
color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.4);
transform-origin:center center;
}
.progression-spin-label.midnight{
color:#24170a;
text-shadow:none;
}
.progression-lucky-wheel-center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:78px;
height:78px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
letter-spacing:.08em;
background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.2), rgba(5,10,22,.94) 60%);
border:3px solid rgba(255,255,255,.12);
box-shadow:0 10px 24px rgba(0,0,0,.34);
}
.progression-lucky-pointer{
position:absolute;
left:50%;
top:-2px;
transform:translateX(-50%);
width:0;
height:0;
border-left:14px solid transparent;
border-right:14px solid transparent;
border-top:24px solid rgba(255,255,255,.94);
filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
z-index:2;
}
.progression-spin-history{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}
.progression-spin-history-pill{
display:inline-flex;
align-items:center;
min-height:30px;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.86);
font-size:.82rem;
font-weight:800;
}
.progression-dual-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.progression-achievement-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:12px;
}
.progression-achievement-card,
.progression-level-reward-card{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:grid;
gap:12px;
}
.progression-achievement-card.ready,
.progression-level-reward-card.ready{
border-color:rgba(var(--accent-2-rgb),.36);
box-shadow:0 14px 30px rgba(var(--accent-2-rgb),.16);
}
.progression-achievement-card.claimed,
.progression-level-reward-card.claimed{
opacity:.76;
}
.progression-achievement-top,
.progression-level-reward-top{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
}
.progression-achievement-top p{
margin:6px 0 0;
color:rgba(255,255,255,.68);
line-height:1.45;
font-size:.92rem;
}
.progression-achievement-status{
flex-shrink:0;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.84);
font-size:.76rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
}
.progression-progress-label{
display:flex;
justify-content:space-between;
gap:10px;
color:rgba(255,255,255,.72);
font-size:.88rem;
font-weight:700;
}
.progression-progress-track{
height:10px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.progression-progress-fill{
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--blue1),var(--purple1));
box-shadow:0 0 18px rgba(var(--accent-2-rgb),.3);
}
.progression-reward-row{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.progression-reward-chip{
display:inline-flex;
align-items:center;
min-height:32px;
padding:6px 10px;
border-radius:999px;
background:rgba(var(--accent-2-rgb),.14);
border:1px solid rgba(var(--accent-2-rgb),.24);
color:rgba(255,255,255,.92);
font-size:.82rem;
font-weight:800;
}
.progression-reward-chip.special{
background:rgba(255,213,92,.14);
border-color:rgba(255,213,92,.24);
}
.progression-level-reward-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:12px;
}
.progression-level-reward-top span{
color:rgba(255,255,255,.66);
font-size:.88rem;
}
.progression-claim-inline{
min-height:44px;
}
.progression-title-panel{
display:grid;
gap:12px;
}
.progression-title-select{
min-height:48px;
border-radius:15px;
border:1px solid rgba(255,255,255,.12);
background:rgba(3,8,24,.72);
color:#fff;
padding:12px 14px;
font:inherit;
}
.progression-title-select:focus{
outline:none;
border-color:rgba(var(--accent-2-rgb),.56);
box-shadow:0 0 0 3px rgba(var(--accent-2-rgb),.18);
}
.progression-level-bar{
display:grid;
gap:10px;
padding:16px 18px;
border-radius:20px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.progression-level-copy{
display:flex;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
color:rgba(255,255,255,.8);
}
.progression-level-track{
height:12px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.progression-level-fill{
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--blue1),var(--purple1));
box-shadow:0 0 22px rgba(var(--accent-2-rgb),.34);
}
.progression-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}
.progression-stat{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:grid;
gap:8px;
}
.progression-stat-label{
font-size:.78rem;
text-transform:uppercase;
letter-spacing:.04em;
font-weight:800;
color:rgba(255,255,255,.58);
}
.progression-stat-value{
font-size:1.18rem;
line-height:1.2;
}
.progression-stat.positive .progression-stat-value,
.progression-game-meta.positive,
.progression-history-item.win .progression-history-side{
color:#8cecb0;
}
.progression-stat.negative .progression-stat-value,
.progression-game-meta.negative,
.progression-history-item.loss .progression-history-side{
color:#ff9fa6;
}
.progression-sections{
display:grid;
gap:16px;
}
.progression-panel-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
flex-wrap:wrap;
margin-bottom:14px;
}
.progression-panel-head h3{
margin:0;
font-size:1.08rem;
}
.progression-panel-head span{
color:rgba(255,255,255,.66);
font-size:.9rem;
}
.progression-badge-grid,
.progression-game-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
}
.progression-badge-card,
.progression-game-card{
padding:15px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:grid;
gap:8px;
}
.progression-badge-card strong,
.progression-game-card strong{
font-size:1rem;
}
.progression-badge-card p{
margin:0;
color:rgba(255,255,255,.68);
line-height:1.45;
font-size:.92rem;
}
.progression-badge-card.unlocked{
border-color:rgba(var(--accent-2-rgb),.34);
background:linear-gradient(180deg, rgba(var(--accent-1-rgb),.16), rgba(255,255,255,.05));
box-shadow:0 14px 28px rgba(var(--accent-2-rgb),.14);
}
.progression-badge-card.locked{
opacity:.72;
}
.progression-game-head{
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
}
.progression-game-head span,
.progression-game-meta{
color:rgba(255,255,255,.68);
font-size:.9rem;
line-height:1.45;
}
.progression-history-list{
display:grid;
gap:10px;
}
.progression-history-item{
display:grid;
grid-template-columns:minmax(0,1.6fr) auto;
gap:12px;
align-items:center;
padding:14px 15px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}
.progression-history-item.push .progression-history-side,
.progression-history-item.daily .progression-history-side{
color:#c7d2ff;
}
.progression-history-main{
display:grid;
gap:4px;
}
.progression-history-main strong{
font-size:.98rem;
}
.progression-history-main span{
color:rgba(255,255,255,.68);
line-height:1.4;
font-size:.92rem;
}
.progression-history-side{
display:grid;
gap:4px;
justify-items:end;
text-align:right;
color:rgba(255,255,255,.8);
font-size:.88rem;
font-weight:700;
}
.progression-empty-state{
padding:18px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.7);
line-height:1.55;
}
.progression-toast{
position:fixed;
left:50%;
bottom:24px;
transform:translate(-50%, 18px);
min-width:min(420px,calc(100vw - 32px));
max-width:calc(100vw - 32px);
padding:14px 18px;
border-radius:18px;
background:rgba(7,10,24,.9);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 24px 48px rgba(0,0,0,.34);
color:#fff;
text-align:center;
z-index:80;
opacity:0;
pointer-events:none;
transition:opacity .22s ease, transform .22s ease;
}
.progression-toast.show{
opacity:1;
transform:translate(-50%, 0);
}
@media (max-width:900px){
.brand-promo-banner{
grid-template-columns:1fr;
}
.progression-hero{
grid-template-columns:1fr;
}
.progression-dual-grid{
grid-template-columns:1fr;
}
.progression-liveops-grid{
grid-template-columns:1fr;
}
.progression-history-item{
grid-template-columns:1fr;
}
.progression-history-side{
justify-items:start;
text-align:left;
}
}
@media (max-width:640px){
.brand-room-pill{
display:flex;
margin:10px auto 0;
width:max-content;
}
.brand-tooltip-panel{
top:auto;
right:12px;
bottom:76px;
width:calc(100vw - 24px);
padding:16px;
}
.brand-tooltip-actions{
grid-template-columns:1fr;
}
.brand-inline-tip-tray{
right:12px;
bottom:72px;
width:calc(100vw - 24px);
}
.progression-title{
font-size:1.72rem;
}
.progression-hero-copy,
.progression-daily-card,
.progression-panel{
padding:16px;
border-radius:18px;
}
.progression-stats-grid,
.progression-mission-grid,
.progression-achievement-grid,
.progression-level-reward-grid,
.progression-badge-grid,
.progression-game-grid{
grid-template-columns:1fr;
}
.progression-lucky-wheel-wrap{
width:210px;
height:210px;
}
.progression-spin-label{
width:72px;
font-size:.66rem;
}
.progression-toast{
bottom:18px;
}
}