@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
/* ============================================================
   PH778 shared theme — black, gold and red, taken from the logo:
   dark top band with a gold edge, dark surfaces, light ink, gold
   and red accents. 'Kanit' for display/numbers, 'Poppins' for UI text.
   Mobile-first top bar / bottom nav reused on every page.
   ============================================================ */

:root{
  /* Core palette: black, gold and red from the PH778 logo. Old token names kept so every page follows. */
  --orange:#E1A92E;--orange-deep:#C8141B;--orange-ink:#F5C542;
  --orange-soft:rgba(245,197,66,.14);--orange-wash:rgba(245,197,66,.07);
  --coin:#FFC83A;--coin-deep:#E1A92E;
  --bg:#0A0605;--bg2:#110A07;--bg3:#1A110C;--bg4:#22170F;--field:#140D09;
  --card:#150E0A;--border:#3A2915;--border-soft:#2A1D10;
  --text:#F7EFE4;--text2:#CDBBA2;--text3:#93806A;
  --green:#22C55E;--danger:#EF4444;

  /* Legacy names still referenced by page styles — mapped onto the new palette */
  --gold:#F5C542;--gold2:#E1A92E;--red:#E0262D;--red2:#A50F15;
  --purple:var(--orange-deep);--cyan:var(--gold);

  --gradient-brand:linear-gradient(180deg,#E8262D 0%,#A50F15 100%);
  --gradient-gold:linear-gradient(180deg,#FFE594 0%,#F5C542 45%,#C68B1A 100%);
  --gradient-band:linear-gradient(180deg,#1B100A 0%,#0B0604 100%);

  --font-display:'Kanit','Poppins',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --topbar-h:60px;--bottomnav-h:64px;--radius:14px;--radius-sm:10px;--cut:14px;
  --shadow-card:0 2px 14px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-synthesis-weight:none}
body{background-color:var(--bg);
  background-image:radial-gradient(ellipse 90% 280px at 50% 0%,rgba(215,20,26,.18) 0%,transparent 100%);
  background-repeat:no-repeat;
  color:var(--text);overflow-x:hidden;max-width:100%;font-family:var(--font-body)}

/* Display face has a single weight: keep it from being faux-bolded */
.font-display,h1.font-display,h2.font-display,h3.font-display{font-family:var(--font-display);font-weight:700;letter-spacing:.2px}

/* ---------------- Small accents (kept for existing markup) ---------------- */
.crest-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin:0 7px;vertical-align:middle}
.crest-framed{position:relative}

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

a{-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--orange-ink);outline-offset:2px}

/* ---------------- Surface utility ---------------- */
.glass{background:var(--card)}

/* ---------------- Fixed top bar (orange band) ---------------- */
.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:10px;
  padding:0 12px;background:var(--gradient-band);border-bottom:1px solid rgba(245,197,66,.35);box-shadow:0 2px 14px rgba(0,0,0,.5)}
.topbar-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.topbar-logo .logo-img{height:44px;width:auto;display:block;border-radius:10px;box-shadow:none;border-radius:6px;mix-blend-mode:lighten}
.topbar-center{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar-icon-btn{width:36px;height:36px;border-radius:50%;background:rgba(245,197,66,.1);border:1.5px solid rgba(245,197,66,.45);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s}
.topbar-icon-btn:hover{background:rgba(245,197,66,.22)}

.btn-outline-sm{background:transparent;border:1px solid rgba(245,197,66,.55);color:var(--gold);padding:9px 18px;
  border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap;
  text-decoration:none;display:inline-block}
.btn-outline-sm:hover{border-color:var(--orange);color:var(--orange-ink)}
.btn-gradient{background:var(--gradient-brand);border:none;color:#fff;padding:11px 24px;
  border-radius:999px;text-decoration:none;display:inline-block;
  font-family:var(--font-body);font-size:14px;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:.2s;white-space:nowrap;position:relative;overflow:hidden;
  text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:0 4px 16px rgba(200,20,27,.4)}
.btn-gradient:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,20,27,.5)}
.btn-gradient:active{transform:translateY(0)}
.btn-gradient.btn-lg{padding:15px 34px;font-size:16px}

/* 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}
.topbar-balance .amount{font-size:13px;color:var(--orange-ink);font-weight:800}
.topbar-avatar{width:36px;height:36px;border-radius:50%;background:var(--gradient-gold);display:flex;overflow:hidden;
  align-items:center;justify-content:center;font-weight:900;color:#2A1A00;cursor:pointer;flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.topbar-avatar img{width:100%;height:100%;object-fit:cover}

/* ---------------- 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:#1E140D;color:var(--text);border:1px solid rgba(245,197,66,.4);padding:12px 20px;border-radius:12px;
  font-size:13px;font-weight:700;z-index:3000;opacity:0;transition:opacity .3s,transform .3s;max-width:88vw;text-align:center;
  box-shadow:0 10px 30px rgba(42,26,14,.3)}
.site-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- Bottom nav: icon + visible label, raised Deposit coin ---------------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom,0px));z-index:1000;
  display:flex;align-items:stretch;justify-content:space-around;background:#0C0705;
  padding-bottom:env(safe-area-inset-bottom,0px);
  border-top:1px solid rgba(245,197,66,.3);box-shadow:0 -4px 18px rgba(0,0,0,.5)}
.bn-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text3);text-decoration:none;font-size:11px;font-weight:800;position:relative;background:transparent;border:none;cursor:pointer;
  transition:color .15s}
.bn-item .bn-ic{width:46px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.bn-item .bn-ic svg{width:23px;height:23px}
.bn-item .bn-label{line-height:1;white-space:nowrap}
.bn-item.active{color:var(--orange-ink)}
.bn-item.active .bn-ic{background:var(--orange-soft)}
.bn-item:active .bn-ic{transform:scale(.92)}

.bn-item.bn-raised{color:var(--orange-ink)}
.bn-item.bn-raised .bn-ic{width:56px;height:56px;border-radius:50%;margin-top:-26px;background:var(--gradient-brand);color:#fff;
  border:4px solid #0C0705;box-shadow:0 0 0 2px rgba(245,197,66,.7),0 6px 16px rgba(200,20,27,.5)}
.bn-item.bn-raised .bn-ic svg{width:26px;height:26px}
.bn-item.bn-raised.active .bn-ic{background:var(--gradient-brand)}

/* ---------------- Shared section / typography helpers ---------------- */
.section-label{font-size:12px;font-weight:800;color:var(--orange-ink);letter-spacing:0;margin-bottom:4px;text-transform:none}
.section-title{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--text);line-height:1.15;letter-spacing:.2px}
.section-title span{color:inherit}
.section-sub{color:var(--text2);font-size:13px;margin-top:4px}
@media(max-width:480px){.section-title{font-size:22px}}

/* ---------------- Cards ---------------- */
.card-game{position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;cursor:pointer}
.card-game:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.card-game:active{transform:translateY(-1px) scale(.99)}
.feature-card{position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px}
.badge-cert{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:800;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 / skeleton / shared keyframes ---------------- */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer-text{color:var(--orange-ink)}
.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 floatParticle{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(-140px) rotate(200deg);opacity:0}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 10px rgba(245,122,18,.25)}50%{box-shadow:0 0 22px rgba(245,122,18,.45)}}
@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}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------------- Hot Games teaser ---------------- */
.hot-games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:420px){.hot-games-grid{gap:8px}}
@media(min-width:640px){.hot-games-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.hot-games-grid{grid-template-columns:repeat(6,1fr)}}
.game-online{position:absolute;bottom:8px;left:8px;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.55);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:#4ADE80}
.fav-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.45);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(--coin);stroke:var(--coin)}
.provider-chip{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:8px;font-weight:700;padding:3px 6px;border-radius:6px;letter-spacing:.3px}

/* ---------------- Promo tiles ---------------- */
.promo-tile{position:relative;border-radius:var(--radius);box-shadow:var(--shadow-card);padding:20px;overflow:hidden;text-decoration:none;display:block;min-height:110px;transition:transform .2s,box-shadow .2s}
.promo-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.5)}
.promo-tile-refer{background:linear-gradient(135deg,#21150C,#140C08);border:1px solid rgba(245,197,66,.4)}
.promo-tile-deposit{background:var(--gradient-brand);border:1px solid rgba(245,197,66,.35)}
.promo-tile-deposit .promo-tile-title,.promo-tile-deposit .promo-tile-sub{color:#fff}
.promo-tile-icon{font-size:26px;margin-bottom:8px}
.promo-tile-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--text)}
.promo-tile-sub{font-size:12px;color:var(--text2);margin-top:4px}

/* ---------------- Footer ---------------- */
footer.site-footer{background:#0C0705;border-top:1px solid var(--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(--text3);line-height:1.5;max-width:360px}
.site-footer .footer-links-row{display:flex;gap:16px;flex-wrap:wrap}
.site-footer .footer-links-row a{font-size:12px;font-weight:700;color:var(--text2);text-decoration:none;white-space:nowrap}
.site-footer .footer-links-row a:hover{color:var(--orange-ink)}
.site-footer .footer-badges{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
@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,.72);z-index:2000;align-items:flex-end;justify-content:center}
#globalModalBox{position:relative;width:100%;max-width:480px;min-height:min(86vh,720px);max-height:100vh;overflow-y:auto;
  background:linear-gradient(180deg,#1C110B 0%,#0E0806 55%,#0A0605 100%);border-top:1.5px solid rgba(245,197,66,.55);
  border-radius:26px 26px 0 0;padding:34px 20px calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--font-body);color:var(--text);
  box-shadow:0 -12px 40px rgba(0,0,0,.6);animation:authUp .25s ease-out}
@keyframes authUp{from{transform:translateY(40px);opacity:.3}}
@media(min-width:640px){#globalModalOverlay{align-items:center;padding:20px}#globalModalBox{min-height:0;border-radius:24px;border:1px solid rgba(245,197,66,.4)}}
#globalModalBox .modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center}
.auth-title{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.1;margin:0 0 8px;color:#fff;letter-spacing:.2px}
.auth-switch{font-size:15px;font-weight:700;color:var(--text3);margin:0 0 28px}
.auth-switch a{color:var(--gold);text-decoration:none;font-weight:800}
.auth-note{font-size:13px;color:var(--text2);margin:-14px 0 18px}
.auth-note b{color:var(--gold)}
.auth-field{display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;margin-top:18px;background:#0B0706;
  border:1.5px solid var(--border);border-radius:12px;transition:border-color .15s}
.auth-field:focus-within{border-color:var(--gold)}
.auth-field.bad{border-color:var(--red)}
.auth-field input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;font-family:var(--font-body)}
.auth-field input::placeholder{color:#7D6C5A}
.auth-lead{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--text3)}
.auth-lead b{color:#fff;font-size:16px;font-weight:800}
.auth-lead i{width:1.5px;height:22px;background:var(--text3);margin-left:2px}
.auth-ic svg{width:22px;height:22px}
.auth-flag{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.auth-err{display:flex;align-items:center;gap:6px;margin:6px 2px 0;font-size:13px;color:#F26363}
.auth-err svg{width:15px;height:15px;flex-shrink:0}
.auth-err[hidden]{display:none}
.auth-submit{display:block;width:100%;height:56px;margin-top:34px;border:none;border-radius:12px;cursor:pointer;
  background:var(--gradient-brand);color:#fff;font-size:18px;font-weight:800;font-family:var(--font-body);
  box-shadow:0 6px 18px rgba(200,20,27,.35);transition:transform .15s}
.auth-submit:active{transform:scale(.98)}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-fine{font-size:12px;color:var(--text3);text-align:center;margin:18px 0 0;line-height:1.5}
.auth-fine a{color:var(--gold)}

/* ---------------- Login/Register pill + balance chip (top bar) ---------------- */
.btn-pill-login{background:var(--gradient-gold);border:none;color:#2A1A00;padding:10px 18px;
  border-radius:999px;font-size:13px;font-weight:900;cursor:pointer;transition:.2s;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.4);flex-shrink:0}
.btn-pill-login:hover{transform:translateY(-1px)}
.btn-pill-login:active{transform:translateY(0)}
.topbar-balance-chip{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);
  border-radius:999px;padding:6px 10px 6px 8px;cursor:pointer;flex-shrink:0}
.topbar-balance-chip .coin-ic{width:16px;height:16px;flex-shrink:0;color:var(--coin-deep)}
.topbar-balance-chip .amount{font-size:13px;color:var(--text);font-weight:900;white-space:nowrap}
.topbar-add-btn{width:28px;height:28px;border-radius:50%;background:var(--gradient-gold);border:2px solid var(--bg);
  color:#2A1A00;font-size:17px;font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(120,40,0,.25);transition:.2s}
.topbar-add-btn:hover{transform:scale(1.08)}
@media(max-width:380px){.btn-pill-login{padding:9px 13px;font-size:12px}}

/* ---------------- Lobby grid ---------------- */
.lobby-layout{display:flex;gap:12px;align-items:flex-start}
.lobby-layout .hot-games-grid{flex:1;min-width:0}

/* ---------------- Quiet compliance line (footer, not a banner) ---------------- */
.compliance-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:var(--text3);
  font-weight:700;letter-spacing:.2px;flex-wrap:wrap;text-align:center}
.compliance-line img{height:14px;width:auto;display:block}

/* ---------------- Hero banner (artwork with its buttons painted in) ---------------- */
.hero-banner{position:relative;overflow:hidden;margin:0 0 18px;padding:0;border-radius:0 0 24px 24px;line-height:0;
  background:#F58A1A;box-shadow:0 10px 22px rgba(217,72,15,.2)}
@media(min-width:900px){.hero-banner{max-width:1120px;margin:16px auto 22px;border-radius:24px}}
.hero-banner h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-banner-link{display:block}
.hero-banner img{display:block;width:100%;height:auto}
/* Tap target over the painted "Deposit" button; percentages of the image so it scales with it.
   The rest of the banner links to the games, which covers the painted "Play Now" button. */
.hero-banner-hit{position:absolute;left:50.5%;top:67%;width:18%;height:16%;border-radius:999px}
.hero-banner-link:focus-visible,.hero-banner-hit:focus-visible{outline:3px solid #fff;outline-offset:-3px}