@import url('/public/assets/css/royal_baji_jaya_replace.css');

.rp-app{padding-bottom:96px}
.vip-strip{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin:12px 0}
.vip-box{border-radius:20px;padding:16px;background:linear-gradient(135deg,#2b174d,#111326);border:1px solid rgba(255,216,74,.18);box-shadow:0 12px 30px #0007}
.vip-box h2{margin:0;color:#ffd84a;font-size:22px}.vip-box p{margin:6px 0 0;color:#cbd3e7}
.promo-card{border-radius:20px;min-height:110px;padding:16px;background:radial-gradient(circle at right,#ffd84a33,transparent 35%),linear-gradient(135deg,#7c1dff,#151633);border:1px solid #463064;position:relative;overflow:hidden}
.promo-card b{color:#ffd84a}.promo-card em{position:absolute;right:10px;bottom:-5px;font-size:72px;font-style:normal}
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.module-grid a{min-height:84px;border-radius:18px;background:#101529;border:1px solid #262244;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-weight:900;text-align:center}
.module-grid span{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#7c1dff,#ec2b94);font-size:23px}
.sports-card{background:#101529;border:1px solid #2c2848;border-radius:18px;margin:12px 0;overflow:hidden}
.sports-head{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;background:#171632}
.sports-head b{color:#fff}.sports-head small{color:#40f3ad}
.odd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}
.odd{border:1px solid #352b54;border-radius:14px;background:#0a0d1b;padding:10px;text-align:center;font-weight:900}
.odd input{width:auto}.odd small{display:block;color:#9ca4bd;margin-bottom:3px}
.bet-slip{position:sticky;bottom:80px;z-index:20;background:#101529;border:1px solid #ffd84a55;border-radius:18px;padding:12px;box-shadow:0 8px 28px #000a}
.lottery-board{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0}
.lottery-num{height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#171632,#0e1325);border:1px solid #382f59;font-weight:950;color:#ffd84a}
.lottery-hero{border-radius:22px;padding:18px;background:radial-gradient(circle at right,#ffd84a33,transparent 35%),linear-gradient(135deg,#271244,#111326);border:1px solid #463064}
.wallet-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.wallet-actions a{border-radius:16px;background:#101529;padding:13px;text-align:center;font-weight:900;border:1px solid #27213e}
.profile-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.profile-menu a{background:#111326;border:1px solid #27213e;border-radius:16px;padding:14px;font-weight:900}
.chat-box{height:430px;background:#090d19;border:1px solid #27213e;border-radius:20px;padding:14px;overflow:auto}.bubble{max-width:78%;padding:10px 12px;border-radius:16px;background:#171632;margin:8px 0}.bubble.me{margin-left:auto;background:#7c1dff}
.admin-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.admin-stat{border-radius:18px;background:linear-gradient(135deg,#171632,#111326);border:1px solid #27213e;padding:16px}.admin-stat b{font-size:24px;color:#ffd84a}
@media(max-width:560px){.module-grid{grid-template-columns:repeat(4,1fr);gap:8px}.module-grid a{font-size:11px;min-height:76px}.vip-strip{grid-template-columns:1fr}.wallet-actions{grid-template-columns:repeat(4,1fr)}.profile-menu{grid-template-columns:1fr 1fr}.admin-top{grid-template-columns:1fr 1fr}.odd-row{grid-template-columns:repeat(3,1fr)}}


/* V33 real user panel polish */
.v33-card{background:#111326;border:1px solid #2b2446;border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 12px 28px #0007}
.v33-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.v33-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v33-action{display:block;background:#101529;border:1px solid #322a52;border-radius:16px;padding:14px;text-align:center;font-weight:900}
.v33-action span{font-size:28px;display:block;margin-bottom:6px}
.v33-badge{display:inline-block;background:#ff3155;color:#fff;border-radius:9px;padding:4px 7px;font-size:11px;font-weight:900}
.v33-ok{background:#20d98d;color:#06120c}.v33-gold{color:#ffd84a}.v33-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid #28213f}.v33-row:last-child{border-bottom:0}
.v33-wheel{width:190px;height:190px;border-radius:50%;margin:15px auto;background:conic-gradient(#7c1dff 0 60deg,#ffd84a 60deg 120deg,#ec2b94 120deg 180deg,#20d98d 180deg 240deg,#ff3155 240deg 300deg,#0fc3df 300deg);display:grid;place-items:center;box-shadow:0 0 30px #7c1dff88}
.v33-wheel:after{content:'SPIN';width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:#101326;border:8px solid #050611;color:#fff;font-weight:950}
@media(max-width:560px){.v33-grid{grid-template-columns:1fr 1fr}.v33-grid-3{grid-template-columns:repeat(3,1fr)}}



/* ROYALS 888 PREMIUM LOGO STYLE */
.royals-logo,
.rp-logo,
.side-logo,
.logo,
.brand,
.site-logo{
  font-weight:900!important;
  letter-spacing:1.6px!important;
  text-transform:uppercase!important;
}

.royals-logo{
  font-size:34px!important;
  line-height:1!important;
  position:relative;
  padding:6px 12px;
  color:transparent!important;
  background:linear-gradient(180deg,#fff7c7 0%,#f5c84b 34%,#b77908 65%,#fff2a8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:
    0 0 10px rgba(212,175,55,.55),
    0 0 24px rgba(255,45,85,.22);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.royals-logo:before{
  content:"♛";
  display:block;
  font-size:20px;
  line-height:1;
  margin-bottom:4px;
  color:#f8d66d;
  text-shadow:0 0 16px rgba(212,175,55,.75);
}

.royals-logo span{
  color:transparent!important;
  background:linear-gradient(180deg,#ff4b6b 0%,#ff174d 45%,#9f1239 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 16px rgba(255,45,85,.55);
}

.rp-logo,
.side-logo{
  color:transparent!important;
  background:linear-gradient(180deg,#fff4b8,#d4af37 45%,#9b6b0f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 14px rgba(212,175,55,.35);
}

.royals-sub{
  margin-top:10px!important;
  color:#d6b95a!important;
  font-weight:700!important;
  letter-spacing:2px!important;
}

.royals-ring{
  border-top-color:#f8d66d!important;
  border-right-color:#ff2d55!important;
  border-bottom-color:rgba(212,175,55,.22)!important;
  box-shadow:
    0 0 35px rgba(212,175,55,.45),
    inset 0 0 25px rgba(255,45,85,.12)!important;
}



/* ROYALS 888 IMAGE LOGO + FAVICON STYLE */
.royals-brand-img,
.royals-logo-img{
  display:inline-block!important;
  width:auto!important;
  max-width:190px!important;
  max-height:64px!important;
  object-fit:contain!important;
  vertical-align:middle!important;
  filter:drop-shadow(0 0 14px rgba(212,175,55,.45)) drop-shadow(0 0 24px rgba(255,45,85,.18))!important;
}
#royalsSplash .royals-logo-img{
  max-width:260px!important;
  max-height:260px!important;
  width:min(72vw,260px)!important;
  height:auto!important;
}
.rp-logo .royals-logo-img,
.side-logo .royals-logo-img,
.logo .royals-logo-img,
.brand .royals-logo-img,
.site-logo .royals-logo-img{
  max-height:48px!important;
  max-width:170px!important;
}
.rp-logo,
.side-logo,
.logo,
.brand,
.site-logo{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}



/* ROYALS 888 ADMIN-UPLOAD BANNER IMAGE SUPPORT */
.hero .slide.has-banner-img{
  background:#101b29!important;
  overflow:hidden;
}
.hero .slide .banner-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transform:scale(1.01);
}
.hero .slide .banner-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(5,8,16,.78) 0%,rgba(5,8,16,.44) 45%,rgba(5,8,16,.12) 100%);
}
.hero .slide h1,
.hero .slide p,
.hero .slide .cta{
  position:relative;
  z-index:2;
}
.hero .slide.has-banner-img h1{
  text-shadow:0 3px 16px rgba(0,0,0,.75);
}
.hero .slide.has-banner-img p{
  text-shadow:0 2px 12px rgba(0,0,0,.70);
}
.rp-banner{position:relative;overflow:hidden}
.rp-banner-image{
  position:absolute;
  inset:0;
  z-index:0;
}
.rp-banner-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rp-banner-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,8,16,.78),rgba(5,8,16,.16));
}
.rp-banner-text{
  position:relative;
  z-index:2;
}