/* ============================================================
   CashPlay shared theme — colors, typography, mobile-first top
   bar / category strip / floating actions / bottom nav, reused
   across every page so they share one consistent look.
   ============================================================ */

:root{
  --gold:#FFD54A;--gold2:#E8B923;--orange:#FFB020;--purple:#0B6B3A;
  --bg:#0F1512;--bg2:#151C18;--bg3:#1B241F;--bg4:#243029;
  --card:#151C18;--border:#28352D;--border-soft:rgba(34,197,94,.18);
  --text:#F5F5F5;--text2:#AEB8B2;--text3:#7C8A82;
  --green:#22C55E;--red:#FF3B5C;--cyan:#3DD6FF;
  --gradient-brand:linear-gradient(135deg,var(--green) 0%,var(--gold) 55%,var(--purple) 100%);
  --gradient-gold:linear-gradient(135deg,var(--gold),var(--gold2));
  --topbar-h:64px;--bottomnav-h:64px;--radius:20px;--radius-sm:14px;

  /* Green+white palette — additive, used by the simplified game-grid
     redesign (index.php) and the shared chrome. Existing dark tokens
     above are untouched so pages not yet redesigned are unaffected. */
  --cp2-bg:#FFFFFF;--cp2-surface:#F3FBF6;--cp2-border:#E3F0E8;
  --cp2-green:#1DA750;--cp2-green-dark:#12793A;--cp2-green-light:#E8F8EE;
  --cp2-text:#132316;--cp2-text2:#5C7568;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background-color:var(--bg);
  background-image:linear-gradient(180deg,rgba(15,21,18,.45) 0%,rgba(15,21,18,.74) 45%,rgba(15,21,18,.96) 100%),url('images/site-bg.webp');
  background-position:center top,center top;background-size:cover,cover;background-repeat:no-repeat,no-repeat;background-attachment:fixed,fixed;
  color:var(--text);overflow-x:hidden;max-width:100%;font-family:'Archivo',sans-serif}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

a{-webkit-tap-highlight-color:transparent}
button{font-family:inherit}

/* ---------------- Glass utility ---------------- */
.glass{background:rgba(20,20,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ---------------- Fixed top bar ---------------- */
.site-topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;border-bottom:1px solid var(--border)}
.topbar-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.topbar-logo .logo-img{height:42px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(34,197,94,.35))}
.topbar-logo .mark{width:34px;height:34px;border-radius:10px;background:var(--gradient-brand);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#141414;
  font-family:'Rajdhani',sans-serif;box-shadow:0 4px 14px rgba(255,176,32,.35)}
.topbar-logo .word{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:.2px}
.topbar-logo .word span{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar-center{display:flex;align-items:center;gap:8px;margin-left:auto}

.btn-outline-sm{background:transparent;border:1px solid var(--border);color:var(--text);padding:9px 18px;
  border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-outline-sm:hover{border-color:var(--gold);color:var(--gold)}
.btn-gradient{background:var(--gradient-brand);border:none;color:#141414;padding:10px 22px;border-radius:999px;
  font-size:13px;font-weight:800;cursor:pointer;transition:.2s;white-space:nowrap;position:relative;overflow:hidden;
  box-shadow:0 4px 18px rgba(255,176,32,.3)}
.btn-gradient:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,197,94,.4)}
.btn-gradient:active{transform:translateY(0)}
.btn-gradient.btn-lg{padding:15px 34px;font-size:15px;border-radius:14px}

/* Topbar balance / avatar (logged-in state) */
.topbar-balance{display:flex;flex-direction:column;line-height:1.1;padding:6px 12px;background:var(--bg3);
  border:1px solid var(--border);border-radius:10px}
.topbar-balance .label{font-size:9px;color:var(--text3);font-weight:700;letter-spacing:.5px}
.topbar-balance .amount{font-size:13px;color:var(--gold);font-weight:800}
.topbar-avatar{width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);display:flex;
  align-items:center;justify-content:center;font-weight:800;color:#141414;cursor:pointer;flex-shrink:0}

/* Green+white chrome — topbar sits on white glass instead of dark glass;
   its buttons/balance pill get green accents. Scoped under .site-topbar
   so unrelated uses of .btn-gradient/.btn-outline-sm elsewhere keep
   their existing dark styling. */
.site-topbar.glass{background:rgba(255,255,255,.92);border-bottom:1px solid var(--cp2-border)}
.site-topbar .btn-outline-sm{border-color:var(--cp2-border);color:var(--cp2-text)}
.site-topbar .btn-outline-sm:hover{border-color:var(--cp2-green);color:var(--cp2-green)}
.site-topbar .btn-gradient{background:var(--cp2-green);color:#fff;box-shadow:0 4px 14px rgba(29,167,80,.3)}
.site-topbar .btn-gradient:hover{box-shadow:0 8px 20px rgba(29,167,80,.4)}
.site-topbar .topbar-balance{background:var(--cp2-green-light);border-color:var(--cp2-border)}
.site-topbar .topbar-balance .label{color:var(--cp2-text2)}
.site-topbar .topbar-balance .amount{color:var(--cp2-green-dark)}
.site-topbar .topbar-avatar{background:var(--cp2-green);color:#fff}

/* ---------------- Page content offsets (mobile-first, same shell at every width) ---------------- */
.page-content{padding:calc(var(--topbar-h) + 14px) 14px calc(var(--bottomnav-h) + 24px)}
footer.site-footer{margin-bottom:var(--bottomnav-h)}
@media(min-width:900px){
  .page-content{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
}

/* ---------------- Toast ---------------- */
.site-toast{position:fixed;left:50%;bottom:calc(var(--bottomnav-h) + 20px);transform:translateX(-50%) translateY(20px);
  background:var(--card);border:1px solid var(--gold);color:var(--text);padding:12px 20px;border-radius:12px;
  font-size:13px;font-weight:600;z-index:3000;opacity:0;transition:opacity .3s,transform .3s;max-width:88vw;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4)}
.site-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- Bottom nav ---------------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:var(--bottomnav-h);z-index:1000;
  display:flex;align-items:stretch;justify-content:space-around;border-top:1px solid var(--border)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text2);text-decoration:none;font-size:10px;font-weight:700;position:relative;background:transparent;border:none;cursor:pointer}
.bn-item svg{width:21px;height:21px}
.bn-item.active{color:var(--gold)}
.bn-item.active svg{filter:drop-shadow(0 0 6px rgba(255,213,74,.7))}
.bn-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2px;
  background:var(--gradient-gold);border-radius:2px;box-shadow:0 0 8px rgba(255,213,74,.8)}

.bn-item.bn-raised{justify-content:flex-start;padding-top:0}
.bn-item.bn-raised .bn-raised-badge{width:50px;height:50px;border-radius:50%;background:var(--gradient-brand);
  display:flex;align-items:center;justify-content:center;margin-top:-24px;margin-bottom:2px;
  border:3px solid var(--bg2);box-shadow:0 6px 16px rgba(34,197,94,.45);transition:transform .2s}
.bn-item.bn-raised:active .bn-raised-badge{transform:scale(.92)}
.bn-item.bn-raised svg{width:24px;height:24px;color:#141414}
.bn-item.bn-raised.active::before{display:none}

/* Green+white chrome — bottom nav on white glass; icons are now the
   image badges (images/nav/*.png), which already draw their own
   label + crown, so no SVG/text sizing is needed for them. The raised
   (Invite) badge is cropped to the round chip only — no baked-in label —
   so it gets its own small text underneath via .bn-raised-label.

   All five badges render at full strength. Dimming the inactive ones washed
   out artwork that is already coloured and labelled, and left Home and Invite
   looking like the only live buttons. The current tab is marked by the green
   rule above it plus a slight scale-up instead. */
.bottom-nav.glass{background:rgba(255,255,255,.94);border-top:1px solid var(--cp2-border)}
.bn-icon-img{width:46px;height:auto;display:block;transition:transform .2s}
.bn-item.active .bn-icon-img{transform:scale(1.06)}
.bn-item.active::before{background:var(--cp2-green);box-shadow:0 0 8px rgba(29,167,80,.6)}
.bn-item.bn-raised{padding-top:0}
.bn-item.bn-raised .bn-raised-badge{width:auto;height:auto;border-radius:0;background:none;border:none;
  box-shadow:none;margin-top:-16px;margin-bottom:2px}
.bn-item.bn-raised .bn-icon-img{width:52px}
.bn-item.bn-raised:active .bn-raised-badge{transform:scale(.94)}
.bn-item.bn-raised .bn-raised-label{font-size:10px;font-weight:700;color:var(--cp2-text2)}
.bn-item.bn-raised.active .bn-raised-label{color:var(--cp2-green)}

/* ---------------- Shared section / typography helpers ---------------- */
.section-label{font-size:11px;font-weight:800;color:var(--orange);letter-spacing:1.5px;margin-bottom:6px;text-transform:uppercase}
.section-title{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;color:var(--text);line-height:1.2}
.section-title span{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-sub{color:var(--text2);font-size:13px;margin-top:6px}
@media(max-width:480px){.section-title{font-size:20px}}

/* ---------------- Cards ---------------- */
.card-game{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;cursor:pointer}
.card-game:hover{transform:translateY(-4px) scale(1.015);border-color:var(--gold);box-shadow:0 12px 30px rgba(255,213,74,.15)}
.badge-cert{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--text2)}

/* ---------------- Ripple ---------------- */
.ripple{position:relative;overflow:hidden}
.ripple .ripple-dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);
  animation:rippleAnim .6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(2.6);opacity:0}}

/* ---------------- Shimmer / entrance keyframes ---------------- */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer-text{background:linear-gradient(90deg,var(--gold) 0%,#fff 50%,var(--gold) 100%);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.4s linear infinite}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 37%,var(--bg3) 63%);background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;border-radius:var(--radius)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceIn{0%{transform:scale(.9)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.fade-in-up{animation:fadeInUp .5s ease both}

/* game-card overlays reused by the simplified game grid (index.php) */
.game-online{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border-radius:6px;padding:3px 6px;font-size:9px;font-weight:700;color:#fff}
.game-online .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.fav-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:.2s;z-index:2}
.fav-btn:hover{transform:scale(1.15)}
.fav-btn.active svg{fill:var(--gold);stroke:var(--gold)}
.provider-chip{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.55);color:var(--text2);font-size:8px;font-weight:700;padding:3px 6px;border-radius:6px;letter-spacing:.3px}

/* ---------------- Footer ---------------- */
footer.site-footer{background:var(--cp2-surface);border-top:1px solid var(--cp2-border);padding:20px}
.site-footer .footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.site-footer .footer-brand-row{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-footer .footer-legal{font-size:11px;color:var(--cp2-text2);line-height:1.5;max-width:360px}
.site-footer .footer-legal strong{color:var(--cp2-text)}
.site-footer .footer-links-row{display:flex;gap:16px;flex-wrap:wrap}
.site-footer .footer-links-row a{font-size:12px;color:var(--cp2-text2);text-decoration:none;white-space:nowrap}
.site-footer .footer-links-row a:hover{color:var(--cp2-green)}
.site-footer .footer-badges{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.site-footer .badge-cert{background:#fff;border-color:var(--cp2-border);color:var(--cp2-text2)}
@media(max-width:768px){
  footer.site-footer{padding:16px}
  .site-footer .footer-inner{flex-direction:column;align-items:center;text-align:center}
  .site-footer .footer-legal{max-width:100%}
  .site-footer .footer-badges{justify-content:center}
}

/* ---------------- Shared login/register modal ---------------- */
#globalModalOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;align-items:center;justify-content:center;padding:20px}
#globalModalBox{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px;width:100%;max-width:420px;position:relative;font-family:'Archivo',sans-serif;color:var(--text)}
#globalModalBox .modal-close{position:absolute;top:16px;right:16px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
#globalModalBox h3{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;text-align:center;margin-bottom:4px}
#globalModalBox .modal-sub{color:var(--text2);font-size:13px;text-align:center;margin-bottom:20px}
#globalModalBox label{font-size:12px;color:var(--text3);font-weight:600;display:block;margin-bottom:6px}
#globalModalBox input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:12px 16px;border-radius:10px;font-size:14px;outline:none;font-family:'Archivo',sans-serif;margin-bottom:14px;transition:border-color .2s}
#globalModalBox input:focus{border-color:var(--gold)}
#globalModalBox .modal-switch{text-align:center;font-size:13px;color:var(--text2)}
#globalModalBox .modal-switch a{color:var(--gold);font-weight:700;text-decoration:none}