*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7fdff;color:#6b7780}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.casino-app{min-height:100vh;background:linear-gradient(#eefcff,#fff 32%);padding-bottom:90px}.mobile-header{height:82px;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:linear-gradient(100deg,#55c8e7,#9cebd5);box-shadow:0 2px 10px rgba(0,104,145,.18)}.site-brand{display:flex;align-items:center;gap:8px;min-width:0}.site-brand img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fff}.site-brand strong{font-size:24px;color:#0755a3;text-shadow:0 1px #fff;white-space:nowrap}.site-brand strong span{color:#ff9c00}.header-actions{display:flex;align-items:center;gap:9px}.pill{height:48px;min-width:150px;padding:0 25px;display:grid;place-items:center;border-radius:28px;font-size:20px;color:#222;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}.login-pill{background:linear-gradient(135deg,#fff56c,#ff9f00)}.register-pill{background:linear-gradient(135deg,#ff4968,#c3005c);color:#fff}.menu-button{border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer}.page-content{width:min(1180px,100%);margin:auto}.hero-banner{background:#1a4b9c;overflow:hidden}.hero-banner img{width:100%;height:360px;object-fit:cover}.announcement{margin:26px 22px 18px;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:30px;background:#55bfe2;color:#fff;font-size:18px;font-weight:700;overflow:hidden;white-space:nowrap}.announcement div{animation:marquee 18s linear infinite}@keyframes marquee{from{transform:translateX(10%)}to{transform:translateX(-105%)}}.category-strip{display:flex;gap:14px;overflow-x:auto;padding:16px 22px 22px;scrollbar-width:none}.category-strip::-webkit-scrollbar{display:none}.category-strip a{min-width:135px;padding:12px 18px;border-radius:9px;background:#d9f7ff;text-align:center;font-size:22px;color:#78858e}.category-strip a span{display:block;font-size:28px;margin-bottom:5px}.category-strip a.active{color:#4a5c65;box-shadow:0 4px 12px rgba(27,178,214,.15)}.game-section{padding:20px 22px}.soft-section{background:#e6faff;border-radius:28px;margin:0 18px}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.section-title em{font-size:18px;color:#111;background:#69cbed;padding:6px 10px;border-radius:7px;font-style:italic}.section-title h2{margin:0;color:#28bec1;font-size:30px}.section-title a{margin-left:auto;color:#36aeb8;font-weight:700}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.game-tile{min-width:0;text-align:center;font-size:18px;color:#77828b}.thumb{position:relative;aspect-ratio:1/1;border-radius:15px;overflow:hidden;background:#dff8ff;box-shadow:0 5px 14px rgba(0,105,135,.12)}.thumb img{width:100%;height:100%;object-fit:cover}.thumb i{position:absolute;right:9px;top:7px;color:#fff;font-size:22px;text-shadow:0 1px 5px #555;font-style:normal}.game-tile>span{display:block;padding:9px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-image{height:100%;display:grid;place-items:center;font-size:55px}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{height:250px;border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background-size:cover;background-position:center;box-shadow:0 8px 22px rgba(0,0,0,.16);position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.78))}.feature-card>*{position:relative}.feature-card span{align-self:flex-start;margin-bottom:auto;background:#ff3e65;padding:5px 10px;border-radius:20px;font-size:12px}.feature-card b{font-size:25px}.feature-card small{font-size:15px;margin-top:5px}.live-card{background-image:url('../img/live2.jpeg')}.roulette-card{background-image:url('../img/777.jpeg')}.poker-card{background-image:url('../img/7771.jpeg')}.sport-one{background-image:url('../img/sports99.jpeg')}.sport-two{background-image:url('../img/sabong.jpeg')}.sport-three{background-image:url('../img/777.jpeg')}.leaderboard{padding:25px 22px}.podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:14px;margin:30px 0 20px}.podium>div{min-height:120px;border-radius:12px 12px 4px 4px;background:linear-gradient(#eafaff,#b7eaff);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #b6e9f7}.podium .first{min-height:155px;background:linear-gradient(#fff4a8,#ffb843)}.podium b{font-size:34px;color:#4aa9c8}.podium .first b{color:#e59300}.podium span{color:#37434a;font-weight:700;margin:5px}.podium strong{font-size:24px;color:#3168a0}.podium .first strong{color:#b14a0e}.ranking-table{border:4px solid #4db9df;border-radius:20px;overflow:hidden}.rank-head,.rank-row{display:grid;grid-template-columns:1fr 2fr 1fr;padding:13px 18px;text-align:center}.rank-head{background:#fff;color:#ef5c67;font-weight:800}.rank-row:nth-child(even){background:#dbf7ff}.rank-row:nth-child(odd){background:#f8fdff}.rank-row span:last-child{color:#f09c28;text-align:right}.app-footer{background:#d9f8ff;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 55px 120px}.app-footer h3{color:#45afd0}.app-footer a{display:block;font-size:20px;margin:24px 0;color:#839099}.chat-fab{position:fixed;right:22px;bottom:126px;z-index:90;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:linear-gradient(#fff,#bfe6ef);border:4px solid #24d8bf;box-shadow:0 6px 18px rgba(0,0,0,.18)}.bottom-menu{position:fixed;left:0;right:0;bottom:0;z-index:95;height:92px;background:linear-gradient(#36b7e6,#2ba8dc);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:5px 10px env(safe-area-inset-bottom)}.bottom-menu a{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:14px}.bottom-menu a span{font-size:30px;line-height:1.1}.bottom-menu a.active{color:#fff178}.bottom-menu .deposit-main{transform:translateY(-20px)}.bottom-menu .deposit-main span{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#fff7e2;border:3px solid #e6e96c;color:#e59522}.bottom-menu .deposit-main b{font-size:14px;margin-top:2px}.maintenance{padding:12px;text-align:center;background:#fff0c2;color:#8b5c00}.drawer{position:fixed;top:0;right:-310px;z-index:130;width:300px;height:100vh;background:#e7fbff;padding:24px;transition:.25s;box-shadow:-8px 0 22px rgba(0,0,0,.18)}.drawer-head{display:flex;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid #bfe6ee}.drawer-head img{width:55px;height:55px;border-radius:50%}.drawer-head b,.drawer-head span{display:block}.drawer a{display:block;padding:15px 10px;border-bottom:1px solid #ccecf2;font-weight:700}.drawer-shade{display:none;position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.35)}.menu-open .drawer{right:0}.menu-open .drawer-shade{display:block}
@media(max-width:760px){.mobile-header{height:72px;padding:8px 10px}.site-brand img{width:39px;height:39px}.site-brand strong{font-size:18px}.pill{height:43px;min-width:0;padding:0 18px;font-size:16px}.register-pill{display:none}.menu-button{font-size:31px}.hero-banner img{height:190px}.announcement{margin:14px 12px 8px;font-size:14px}.category-strip{padding:12px;gap:10px}.category-strip a{min-width:105px;font-size:17px;padding:10px}.category-strip a span{font-size:24px}.game-section{padding:17px 12px}.soft-section{margin:0 8px}.section-title{gap:7px}.section-title em{font-size:12px;padding:5px 7px}.section-title h2{font-size:23px}.section-title a{font-size:12px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.game-tile{font-size:15px}.thumb{border-radius:10px}.feature-cards{grid-template-columns:repeat(3,78%);overflow-x:auto;scroll-snap-type:x mandatory}.feature-card{height:210px;scroll-snap-align:start}.leaderboard{padding:16px 10px}.podium{gap:6px}.podium>div{min-height:92px}.podium .first{min-height:122px}.podium b{font-size:27px}.podium strong{font-size:16px}.rank-head,.rank-row{padding:10px 8px;font-size:13px}.app-footer{padding:28px 28px 115px}.app-footer a{font-size:16px;margin:18px 0}.chat-fab{width:62px;height:62px;right:12px;bottom:110px}.bottom-menu{height:82px}.bottom-menu a{font-size:12px}.bottom-menu a span{font-size:25px}.bottom-menu .deposit-main span{width:64px;height:64px}.casino-app{padding-bottom:80px}}
@media(max-width:390px){.login-pill{padding:0 13px;font-size:14px}.game-grid{grid-template-columns:repeat(3,1fr)}.game-tile{font-size:13px}.section-title h2{font-size:20px}}
/* STYLES MOVED FROM dashboard.php */
html, body, .casino-app, .page-content{
overflow-anchor:none!important;
}
.hero-banner{position:relative;touch-action:pan-y;user-select:none;width:100%;height:330px;min-height:330px;overflow:hidden;border-radius:14px;background:#07132a;overflow-anchor:none;contain:layout paint}
.hero-banner>a{display:block;width:100%;height:100%;line-height:0}
.hero-banner img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center center;display:block;background:#07132a}
/* Sports cards: show the complete image without cropping or stretching. */
#sports .sports-image-only>span,
#sports .sports-image-only .game-provider-line{display:none!important}
#sports .sports-image-only{padding:0;background:transparent;box-shadow:none;height:auto}
#sports .sports-image-only .thumb{width:100%;height:auto;aspect-ratio:4/5;margin:0;border-radius:10px;background:transparent;overflow:hidden}
#sports .sports-image-only .thumb img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none;background:transparent;display:block}
/* Keep the announcement compact so the larger promotion banner stays prominent. */
.announcement{min-height:50px!important;padding-top:8px!important;padding-bottom:8px!important}
@media(max-width:760px){
.hero-banner{width:100%;height:285px;min-height:285px;border-radius:0;overflow-anchor:none}
.hero-banner>a{height:100%}
.hero-banner img{width:100%;height:100%;max-height:none;object-fit:contain}
#sports .sports-image-only .thumb{aspect-ratio:4/5}
}
.hero-banner img{transition:opacity .22s ease;pointer-events:none}
.hero-banner img.is-changing{opacity:.35}
.hero-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center;gap:9px;padding:7px 10px;border-radius:20px;background:rgba(0,0,0,.22)}
.hero-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;transition:transform .2s ease,background .2s ease}
.hero-dot.active{background:#ffd900;transform:scale(1.35)}
#hot .thumb{overflow:hidden}
#hot .hot-badge{position:absolute;left:0;top:8px;z-index:4;display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:30px;padding:0 13px;border-radius:0 18px 18px 0;background:linear-gradient(135deg,#ff5564,#ef243d);color:#fff;font-size:14px;font-weight:900;line-height:1;letter-spacing:.3px;box-shadow:0 3px 8px rgba(155,0,20,.28)}
#hot .provider-badge{position:absolute;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:center;min-width:64px;height:31px;padding:0 10px;border-radius:12px 0 0 0;background:rgba(255,255,255,.96);color:#252525;font-size:14px;font-weight:900;line-height:1;letter-spacing:.4px;box-shadow:-2px -2px 7px rgba(0,0,0,.12)}
#hot .provider-badge.provider-jili{color:#c78a00}
#hot .provider-badge.provider-pg{color:#222}
#hot .provider-badge.provider-pp{color:#e85722}
@media(max-width:760px){.hero-dots{bottom:8px;gap:8px;padding:6px 9px}.hero-dot{width:9px;height:9px}#hot .hot-badge{top:6px;min-width:45px;height:25px;padding:0 10px;font-size:11px}#hot .provider-badge{min-width:48px;height:25px;padding:0 7px;font-size:10px}}
/* G8JL-inspired lively game cards */
.game-grid{align-items:stretch}
.game-tile{display:flex;flex-direction:column;text-align:left;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#607cf5 0%,#5874ed 100%);box-shadow:0 7px 16px rgba(12,24,66,.20);transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease}
.game-tile:active{transform:scale(.97)}
.game-tile:hover{transform:translateY(-3px);box-shadow:0 11px 24px rgba(12,24,66,.26)}
.game-tile .thumb{width:100%;aspect-ratio:1/1.04;border-radius:0;box-shadow:none;background:#182033;overflow:hidden}
.game-tile .thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.015)}
.game-tile>span{order:2;display:block;padding:8px 10px 2px;color:#fff;font-size:17px;font-weight:900;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.game-tile .game-provider-line{order:3;display:flex;align-items:center;justify-content:space-between;padding:3px 9px 9px;color:#fff;font-size:15px;font-weight:800;line-height:1.1}
.game-tile .favorite-heart{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.78);color:#fff;font-size:16px;box-shadow:0 2px 7px rgba(0,0,0,.13);text-shadow:0 1px 2px rgba(0,0,0,.12)}
.game-tile .thumb>i{display:none}
#live .live-badge{position:absolute;left:7px;top:7px;z-index:4;padding:5px 8px;border-radius:7px;background:#ffc928;color:#241600;font-size:10px;font-weight:900;line-height:1;box-shadow:0 3px 8px rgba(0,0,0,.24)}
#live .game-tile{background:linear-gradient(180deg,#321221 0%,#1b0b13 100%)}
#live .game-tile .thumb{aspect-ratio:1/1.08}
#live .game-provider-line b{color:#ffd54c}
#hot .hot-badge{left:8px;top:8px;min-width:44px;height:24px;padding:0 9px;border-radius:7px;background:linear-gradient(135deg,#ff4d55,#ff313d);font-size:11px;box-shadow:0 3px 8px rgba(175,0,15,.28)}
#hot .provider-badge{display:none}
.game-tile.provider-pg,.game-tile.provider-pgsoft{background:linear-gradient(180deg,#ffb347 0%,#ff9c2f 100%)}
.game-tile.provider-jili{background:linear-gradient(180deg,#6784ff 0%,#5873eb 100%)}
.game-tile.provider-pp{background:linear-gradient(180deg,#ff5d69 0%,#ef4a57 100%)}
.game-tile.provider-evoplay{background:linear-gradient(180deg,#48cd57 0%,#37ba48 100%)}
.featured-grid .game-tile:nth-child(4n+1){background:linear-gradient(180deg,#647ff7 0%,#596fe9 100%)}
.featured-grid .game-tile:nth-child(4n+2){background:linear-gradient(180deg,#ffb549 0%,#ffa132 100%)}
.featured-grid .game-tile:nth-child(4n+3){background:linear-gradient(180deg,#ff6269 0%,#f04f59 100%)}
.featured-grid .game-tile:nth-child(4n+4){background:linear-gradient(180deg,#48cd58 0%,#38b947 100%)}
.game-grid:not(.featured-grid) .game-tile:nth-child(4n+2){background:linear-gradient(180deg,#ffb549 0%,#ffa132 100%)}
.game-grid:not(.featured-grid) .game-tile:nth-child(4n+3){background:linear-gradient(180deg,#ee59ec 0%,#d747d7 100%)}
.game-grid:not(.featured-grid) .game-tile:nth-child(4n+4){background:linear-gradient(180deg,#48cd58 0%,#38b947 100%)}
@media(max-width:760px){
.game-grid{gap:12px 10px}
.game-tile{border-radius:10px}
.game-tile .thumb{aspect-ratio:1/1.05}
.game-tile>span{padding:7px 8px 2px;font-size:14px}
.game-tile .game-provider-line{padding:3px 8px 8px;font-size:13px}
.game-tile .favorite-heart{width:24px;height:24px;font-size:14px}
#hot .hot-badge{left:7px;top:7px;height:22px;min-width:40px;padding:0 8px;font-size:10px}
}
/* Subtle movement on selected game pictures only */
#hot .game-tile:nth-child(1) .thumb img,
#hot .game-tile:nth-child(3) .thumb img,
#hot .game-tile:nth-child(6) .thumb img,
#hot .game-tile:nth-child(9) .thumb img{
animation:gameImageFloat 5.5s ease-in-out infinite;
will-change:transform,filter;
}
#hot .game-tile:nth-child(2) .thumb img,
#hot .game-tile:nth-child(5) .thumb img,
#hot .game-tile:nth-child(8) .thumb img{
animation:gameImagePan 6.5s ease-in-out infinite alternate;
will-change:transform,filter;
}
#hot .game-tile:nth-child(3) .thumb img,
#hot .game-tile:nth-child(8) .thumb img{
animation-delay:-2.2s;
}
@keyframes gameImageFloat{
0%,100%{
transform:scale(1.025) translateY(0);
filter:brightness(1);
}
50%{
transform:scale(1.075) translateY(-3px);
filter:brightness(1.08);
}
}
@keyframes gameImagePan{
0%{
transform:scale(1.06) translateX(-3px);
filter:brightness(1);
}
100%{
transform:scale(1.095) translateX(3px);
filter:brightness(1.07);
}
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
#hot .game-tile .thumb img{
animation:none!important;
}
}
/* Auto-scrolling demo winners leaderboard */
.leaderboard-demo-label{
margin:0 0 10px;
padding:8px 12px;
border-radius:10px;
background:rgba(46,181,225,.10);
color:#168bb4;
font-size:12px;
font-weight:900;
letter-spacing:.45px;
text-align:center;
}
.winner-scroll-viewport{
position:relative;
height:286px;
overflow:hidden;
border:2px solid #2eb5e1;
border-radius:14px;
background:#fff;
}
.winner-scroll-viewport::before,
.winner-scroll-viewport::after{
content:"";
position:absolute;
left:0;
right:0;
height:22px;
z-index:3;
pointer-events:none;
}
.winner-scroll-viewport::before{
top:0;
background:linear-gradient(180deg,#fff,rgba(255,255,255,0));
}
.winner-scroll-viewport::after{
bottom:0;
background:linear-gradient(0deg,#fff,rgba(255,255,255,0));
}
.winner-scroll-track{
will-change:transform;
animation:winnerAutoScroll 72s linear infinite;
}
.winner-scroll-viewport:hover .winner-scroll-track,
.winner-scroll-viewport:active .winner-scroll-track{
animation-play-state:paused;
}
.winner-scroll-track .rank-row{
min-height:34px;
display:grid;
grid-template-columns:80px 1fr 140px;
align-items:center;
padding:0 12px;
font-size:13px;
}
.winner-scroll-track .rank-row:nth-child(odd){background:#d7f4fc}
.winner-scroll-track .rank-row:nth-child(even){background:#fff}
.winner-scroll-track .rank-row span:first-child{text-align:center}
.winner-scroll-track .rank-row span:nth-child(2){text-align:center}
.winner-scroll-track .rank-row span:last-child{text-align:right;color:#ff8b00;font-weight:800}
@keyframes winnerAutoScroll{
from{transform:translateY(0)}
to{transform:translateY(-50%)}
}
@media(max-width:760px){
.winner-scroll-viewport{height:252px}
.winner-scroll-track .rank-row{
min-height:32px;
grid-template-columns:56px 1fr 105px;
padding:0 8px;
font-size:11px;
}
.leaderboard-demo-label{font-size:10px;padding:7px 9px}
}
/* Floating partners: fixed slots with fade-only image switching */
.partner-float{
--partner-size:62px;
--partner-gap:10px;
position:fixed;
right:10px;
top:42%;
width:var(--partner-size);
height:calc((var(--partner-size) * 4) + (var(--partner-gap) * 3));
transform:translateY(-50%);
z-index:9998;
overflow:visible;
contain:strict;
overflow-anchor:none;
pointer-events:none;
}
.chat-fab{overflow:hidden;}
.partner-float .partner-item{
position:absolute;
left:0;
display:block;
width:var(--partner-size);
height:var(--partner-size);
border-radius:14px;
pointer-events:auto;
}
.partner-float .partner-item:nth-child(1){top:0}
.partner-float .partner-item:nth-child(2){top:calc((var(--partner-size) + var(--partner-gap)) * 1)}
.partner-float .partner-item:nth-child(3){top:calc((var(--partner-size) + var(--partner-gap)) * 2)}
.partner-float .partner-item:nth-child(4){top:calc((var(--partner-size) + var(--partner-gap)) * 3)}
.partner-float img{
width:100%;
height:100%;
object-fit:contain;
border-radius:14px;
display:block;
box-shadow:0 4px 12px rgba(0,0,0,.35);
opacity:1;
transition:opacity .28s ease, filter .28s ease;
}
.partner-float img.partner-fading{
opacity:.18;
filter:brightness(1.18);
}
.partner-float .partner-item:hover img{
filter:brightness(1.08);
}
@media(max-width:760px){
.partner-float{
--partner-size:56px;
--partner-gap:10px;
right:6px;
top:58%;
}
}
.preview-login-trigger{border:0;cursor:pointer;font-family:inherit}.preview-login-modal{position:fixed;inset:0;z-index:20000;display:none;align-items:center;justify-content:center;padding:18px}.preview-login-modal.show{display:flex}.preview-login-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}.preview-login-box{position:relative;z-index:1;width:min(430px,100%);padding:28px 24px 24px;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.38);color:#34434c}.preview-login-close{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:34px;color:#77838a;cursor:pointer}.preview-login-logo{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;object-fit:cover}.preview-login-box h2{margin:0;text-align:center;color:#178db8}.preview-login-box p{text-align:center;margin:7px 0 20px}.preview-login-box label{display:block;margin:12px 0;font-weight:800}.preview-login-box input{width:100%;height:50px;margin-top:7px;padding:0 14px;border:1px solid #cde8ef;border-radius:12px;font-size:16px;outline:none}.preview-login-box input:focus{border-color:#35bde5;box-shadow:0 0 0 3px rgba(53,189,229,.14)}.preview-submit-login,.preview-submit-register{width:100%;min-height:50px;border:0;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;cursor:pointer}.preview-submit-login{margin-top:18px;background:linear-gradient(135deg,#fff56c,#ff9f00);color:#222}.preview-submit-register{margin-top:10px;background:linear-gradient(135deg,#ff4968,#c3005c);color:#fff}.preview-login-error{padding:10px 12px;border-radius:10px;background:#ffe4e7;color:#b5152c;font-weight:700;text-align:center}.public-preview-mode a[href]:not(.preview-register-link){cursor:pointer}
/* Header login and register buttons */
.header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
flex-shrink:0;
}
.header-actions .pill{
height:48px;
min-width:164px;
padding:0 24px;
display:inline-flex;
align-items:center;
justify-content:center;
border:3px solid rgba(255,255,255,.88);
border-radius:999px;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
line-height:1;
font-weight:900;
text-align:center;
white-space:nowrap;
text-shadow:none;
box-shadow:0 3px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.35);
transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.header-actions .login-pill{
background:linear-gradient(180deg,#ffd83d 0%,#ffb21d 58%,#ffa313 100%);
color:#171717;
}
.header-actions .register-pill{
background:linear-gradient(180deg,#f82b70 0%,#e30d57 58%,#c60046 100%);
color:#fff;
}
.header-actions .pill:hover{
filter:brightness(1.04);
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.4);
}
.header-actions .pill:active{
transform:translateY(0) scale(.98);
}
.header-actions .preview-login-trigger{
font-family:inherit;
cursor:pointer;
}
.chat-fab-image{
width:100%;
height:100%;
display:block;
border-radius:50%;
object-fit:cover;
}
@media(max-width:760px){
.mobile-header{gap:8px}
.header-actions{gap:8px}
.header-actions .pill{
display:inline-flex;
height:46px;
min-width:0;
padding:0 19px;
border-width:2px;
font-size:16px;
}
.header-actions .register-pill{display:inline-flex}
}
@media(max-width:480px){
.site-brand strong{display:none}
.header-actions{gap:6px}
.header-actions .pill{
height:43px;
padding:0 15px;
font-size:14px;
}
.menu-button{font-size:29px}
}
@media(max-width:370px){
.site-brand img{width:35px;height:35px}
.header-actions .pill{
height:40px;
padding:0 11px;
font-size:13px;
}
}
/* =========================================================
FINAL COMPACT LOGIN / REGISTER BUTTONS
========================================================= */
.header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
flex-shrink:0;
}
.header-actions .pill{
min-width:0;
height:39px;
padding:0 19px;
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:999px;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
line-height:1;
font-weight:800;
white-space:nowrap;
text-align:center;
text-shadow:none;
box-shadow:none;
transition:filter .15s ease,transform .15s ease;
}
.header-actions .login-pill{
background:linear-gradient(90deg,#ffe600 0%,#ffc400 42%,#ff9800 100%);
color:#111;
}
.header-actions .register-pill{
background:linear-gradient(90deg,#ff416c 0%,#ed174f 48%,#b5004d 100%);
color:#fff;
}
.header-actions .pill:hover{
filter:brightness(1.04);
}
.header-actions .pill:active{
transform:scale(.98);
}
.header-actions .preview-login-trigger{
cursor:pointer;
font-family:inherit;
}
@media(max-width:760px){
.mobile-header{
height:68px;
padding:8px 14px;
gap:8px;
}
.site-brand{
flex:1 1 auto;
min-width:0;
}
.site-brand strong{
display:none;
}
.header-actions{
gap:10px;
}
.header-actions .pill{
display:inline-flex;
height:39px;
padding:0 19px;
border:0;
font-size:15px;
font-weight:800;
box-shadow:none;
}
.header-actions .login-pill{
min-width:104px;
}
.header-actions .register-pill{
display:inline-flex;
min-width:119px;
}
.menu-button{
display:block;
width:34px;
min-width:34px;
padding:0;
font-size:31px;
line-height:1;
color:#fff;
}
}
@media(max-width:430px){
.mobile-header{
padding-left:10px;
padding-right:10px;
gap:6px;
}
.site-brand{
display:none;
}
.header-actions{
gap:8px;
}
.header-actions .pill{
height:38px;
padding:0 17px;
font-size:14px;
}
.header-actions .login-pill{
min-width:103px;
}
.header-actions .register-pill{
min-width:117px;
}
.menu-button{
width:31px;
min-width:31px;
font-size:29px;
}
}
@media(max-width:350px){
.header-actions{
gap:6px;
}
.header-actions .pill{
height:36px;
padding:0 13px;
font-size:13px;
}
.header-actions .login-pill{
min-width:93px;
}
.header-actions .register-pill{
min-width:108px;
}
.menu-button{
width:28px;
min-width:28px;
font-size:27px;
}
}
/* FINAL FIX: keep Login/Register group on the right on mobile */
.mobile-header .header-actions{
margin-left:auto !important;
justify-content:flex-end !important;
}
@media(max-width:430px){
.mobile-header{
justify-content:flex-end !important;
}
.mobile-header .site-brand{
display:none !important;
}
.mobile-header .header-actions{
margin-left:auto !important;
width:auto !important;
flex:0 0 auto !important;
justify-content:flex-end !important;
}
}
/* =========================================================
FINAL HEADER ORDER FIX
Left: hamburger/menu
Center-left: logo
Right: login/register buttons
========================================================= */
.mobile-header{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
}
.mobile-header > .menu-button{
order:1 !important;
flex:0 0 auto !important;
margin:0 !important;
}
.mobile-header > .site-brand{
order:2 !important;
flex:0 1 auto !important;
min-width:0 !important;
}
.mobile-header > .header-actions{
order:3 !important;
margin-left:auto !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
flex:0 0 auto !important;
}
@media(max-width:760px){
.mobile-header{
padding:8px 10px !important;
gap:7px !important;
}
.mobile-header > .menu-button{
display:block !important;
width:32px !important;
min-width:32px !important;
padding:0 !important;
font-size:30px !important;
line-height:1 !important;
}
.mobile-header > .site-brand{
display:flex !important;
flex:0 0 auto !important;
}
.mobile-header > .site-brand strong{
display:none !important;
}
.mobile-header > .site-brand img{
width:38px !important;
height:38px !important;
}
.mobile-header > .header-actions{
margin-left:auto !important;
gap:7px !important;
}
}
@media(max-width:430px){
.mobile-header > .site-brand{
display:none !important;
}
.mobile-header > .header-actions{
margin-left:auto !important;
gap:6px !important;
}
.mobile-header > .header-actions .pill{
min-width:0 !important;
height:38px !important;
padding:0 14px !important;
font-size:13px !important;
}
}
@media(max-width:360px){
.mobile-header{
gap:4px !important;
padding-left:7px !important;
padding-right:7px !important;
}
.mobile-header > .menu-button{
width:29px !important;
min-width:29px !important;
font-size:27px !important;
}
.mobile-header > .header-actions{
gap:5px !important;
}
.mobile-header > .header-actions .pill{
height:36px !important;
padding:0 10px !important;
font-size:12px !important;
}
}
/* =========================================================
FINAL DASHBOARD HEADER: logo + balance + deposit + PH flag
========================================================= */
.mobile-header{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
min-height:76px;
padding:9px 16px!important;
}
.mobile-header > .site-brand{
order:1!important;
display:flex!important;
align-items:center!important;
flex:0 1 auto!important;
min-width:0!important;
}
.mobile-header > .header-actions{
order:2!important;
margin-left:auto!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:10px!important;
flex:0 0 auto!important;
}
.header-wallet{
height:44px;
display:inline-flex;
align-items:center;
gap:7px;
padding:0 12px 0 8px;
border-radius:999px;
color:#fff;
font-size:17px;
line-height:1;
font-weight:900;
white-space:nowrap;
background:rgba(0,133,176,.20);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.header-wallet .header-peso{
width:29px;
height:29px;
display:grid;
place-items:center;
border-radius:50%;
color:#fff;
background:linear-gradient(180deg,#ffd83e,#f6a800);
box-shadow:0 2px 6px rgba(128,77,0,.22);
font-size:18px;
font-weight:1000;
}
.header-icon-button{
width:46px;
height:46px;
flex:0 0 46px;
display:grid;
place-items:center;
padding:0;
border:0;
border-radius:50%;
overflow:hidden;
background:transparent;
cursor:pointer;
transition:transform .15s ease,filter .15s ease;
}
.header-icon-button img{
width:100%;
height:100%;
display:block;
object-fit:contain;
}
.header-icon-button:hover{filter:brightness(1.06)}
.header-icon-button:active{transform:scale(.94)}
.mobile-header .menu-button{
order:initial!important;
width:39px!important;
min-width:39px!important;
height:46px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
padding:0!important;
color:#fff!important;
font-size:39px!important;
line-height:1!important;
}
@media(max-width:760px){
.mobile-header{
height:68px!important;
min-height:68px!important;
padding:7px 9px!important;
gap:6px!important;
}
.mobile-header > .site-brand img{
width:42px!important;
height:42px!important;
border-width:1px!important;
}
.mobile-header > .site-brand strong{
display:none!important;
}
.mobile-header > .header-actions{
gap:6px!important;
}
.header-wallet{
height:39px;
gap:5px;
padding:0 8px 0 6px;
font-size:14px;
}
.header-wallet .header-peso{
width:25px;
height:25px;
font-size:15px;
}
.header-icon-button{
width:39px;
height:39px;
flex-basis:39px;
}
.mobile-header .menu-button{
width:32px!important;
min-width:32px!important;
height:40px!important;
font-size:32px!important;
}
}
@media(max-width:390px){
.mobile-header{
padding-left:7px!important;
padding-right:7px!important;
gap:4px!important;
}
.mobile-header > .site-brand img{
width:37px!important;
height:37px!important;
}
.mobile-header > .header-actions{
gap:4px!important;
}
.header-wallet{
height:36px;
padding:0 6px 0 5px;
font-size:12px;
}
.header-wallet .header-peso{
width:23px;
height:23px;
font-size:13px;
}
.header-icon-button{
width:36px;
height:36px;
flex-basis:36px;
}
.mobile-header .menu-button{
width:28px!important;
min-width:28px!important;
height:36px!important;
font-size:28px!important;
}
}
@media(max-width:340px){
.mobile-header > .site-brand{
display:none!important;
}
}
.mobile-header>.menu-button{order:1!important;margin-right:8px!important}.mobile-header>.site-brand{order:2!important}.mobile-header>.header-actions{order:3!important;margin-left:auto!important}
/* SAFE VISUAL REFRESH — additive only; preserves existing dashboard layout/logic */
:root{--ms-bg:#f4fbff;--ms-surface:#fff;--ms-sky:#39bde5;--ms-blue:#238dd1;--ms-navy:#17345b;--ms-gold:#ffc83d;--ms-muted:#71808d}
body{background:var(--ms-bg);color:var(--ms-muted)}
.casino-app{background:linear-gradient(180deg,#eaf9ff 0,#fff 34%,#f7fcff 100%)}
.mobile-header{background:linear-gradient(105deg,#43bee7,#7fe1d5);box-shadow:0 4px 18px rgba(21,120,163,.16)}
.site-brand strong{color:#124d91;font-weight:900;letter-spacing:-.4px}.site-brand strong span{color:#ff9c18}
.announcement{background:linear-gradient(90deg,#32b9df,#50c9dd);box-shadow:0 5px 15px rgba(39,160,198,.16)}
.category-strip a{background:#e9f9ff;color:#6c7c88;font-weight:800;border:1px solid #d6f2fb;transition:.16s ease}
.category-strip a:hover{transform:translateY(-2px)}
.category-strip a.active{background:linear-gradient(135deg,#35bde4,#268fd3);color:#fff!important;box-shadow:0 6px 16px rgba(38,143,211,.22)}
.game-section{position:relative}.section-title h2{color:#24aabf;font-weight:900;letter-spacing:-.4px}.section-title em{background:linear-gradient(135deg,#55cbe7,#3ab7df);color:#fff;font-weight:900;box-shadow:0 3px 9px rgba(44,157,197,.18)}
.game-tile{border:1px solid rgba(255,255,255,.65);box-shadow:0 7px 18px rgba(31,73,113,.16)}
.game-tile:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(31,73,113,.21)}
.game-tile .thumb img{transition:transform .25s ease}.game-tile:hover .thumb img{transform:scale(1.035)}
#live .game-tile{background:linear-gradient(180deg,#302030,#17121b)}
.leaderboard{background:linear-gradient(180deg,rgba(229,248,255,.55),rgba(255,255,255,.65));border-radius:24px}
.ranking-table,.winner-scroll-viewport{box-shadow:0 8px 20px rgba(42,148,190,.11)}
.bottom-menu{background:linear-gradient(180deg,#37bce6,#238fd0);box-shadow:0 -4px 18px rgba(16,91,132,.16)}
.drawer{background:linear-gradient(180deg,#f1fcff,#fff)}
@media(max-width:760px){.game-section{padding-left:12px;padding-right:12px}.section-title h2{font-size:22px}.category-strip a{font-weight:800}}
/* =========================================================
FINAL HERO BANNER FIT FIX
Full-width banner, natural image ratio, no dark empty area.
========================================================= */
.hero-banner{
position:relative!important;
width:100%!important;
height:auto!important;
min-height:0!important;
overflow:hidden!important;
border-radius:0!important;
background:transparent!important;
contain:none!important;
}
.hero-banner > a{
display:block!important;
width:100%!important;
height:auto!important;
line-height:0!important;
}
.hero-banner img{
display:block!important;
width:100%!important;
height:auto!important;
max-width:100%!important;
max-height:none!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
@media(max-width:760px){
.hero-banner{
height:auto!important;
min-height:0!important;
}
.hero-banner > a{
height:auto!important;
}
.hero-banner img{
width:100%!important;
height:auto!important;
max-height:none!important;
}
}