@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
/* ============================================================
   PHILArcade shared theme — deep jungle green and yellow gold, taken from
   the logo. 'Montserrat' ExtraBold for display/numbers, 'Montserrat' for UI text.
   Mobile-first top bar / bottom nav reused on every page.
   ============================================================ */

:root{
  /* PHILArcade: yellow gold on deep green, ivory text.
     Old token names are kept so every page follows the palette. */
  --orange:#DFBE34;--orange-deep:#B69717;--orange-ink:#EAD26C;
  --orange-soft:rgba(223,190,52,.13);--orange-wash:rgba(223,190,52,.06);
  --coin:#F2D767;--coin-deep:#C6A725;
  --bg:#060B16;--bg2:#080E1D;--bg3:#0B1327;--bg4:#0D1831;--field:#070D1A;
  --card:#070F21;--border:#0F214B;--border-soft:#0A1736;
  --text:#F4EFE3;--text2:#C9BFA8;--text3:#7C8AA6;
  --green:#3FBF7F;--danger:#D9534F;

  --gold:#E3C649;--gold2:#C6A725;--red:#C6A725;--red2:#957D18;
  --purple:var(--orange-deep);--cyan:var(--gold);

  --gradient-brand:linear-gradient(180deg,#F8E388 0%,#DFBE34 48%,#B69717 100%);
  --gradient-gold:linear-gradient(180deg,#FCECA8 0%,#E3C649 45%,#B69717 100%);
  --gradient-band:linear-gradient(180deg,#0B142A 0%,#060A14 100%);

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

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-synthesis-weight:none}
body{background-color:var(--bg);
  color:var(--text);overflow-x:hidden;max-width:100%;font-family:var(--font-body)}
/* Jungle artwork (owner 2026-10-21), fixed behind every page; a fixed layer instead of
   background-attachment:fixed, which iOS Safari ignores. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--bg) url(images/phil-bg.webp) center top/cover no-repeat}

/* 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(223,190,52,.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}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:18.9px;letter-spacing:1.5px;color:var(--text);line-height:1}
.brand-word b{background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar-center{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar-icon-btn{width:36px;height:36px;border-radius:50%;background:rgba(223,190,52,.1);border:1.5px solid rgba(223,190,52,.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(223,190,52,.22)}

.btn-outline-sm{background:transparent;border:1px solid rgba(223,190,52,.55);color:var(--gold);padding:9px 18px;
  border-radius:999px;font-size:11.7px;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:#1A1406;padding:11px 24px;
  border-radius:999px;text-decoration:none;display:inline-block;
  font-family:var(--font-body);font-size:12.6px;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:.2s;white-space:nowrap;position:relative;overflow:hidden;
  text-shadow:none;box-shadow:0 4px 16px rgba(182,151,23,.35)}
.btn-gradient:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(182,151,23,.5)}
.btn-gradient:active{transform:translateY(0)}
.btn-gradient.btn-lg{padding:15px 34px;font-size:14.4px}

/* 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:8.1px;color:var(--text3);font-weight:700}
.topbar-balance .amount{font-size:11.7px;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:#1A1406;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:#0C1730;color:var(--text);border:1px solid rgba(223,190,52,.4);padding:12px 20px;border-radius:12px;
  font-size:11.7px;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: PHILArcade app bar (owner's reference: gold-framed bar, 3D art popping above it) ---------------- */
.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:linear-gradient(180deg,#242F49 0%,#121C33 45%,#0A1122 100%);
  padding:0 max(4px,calc((100vw - 600px) / 2)) env(safe-area-inset-bottom,0px);
  border-top:3px solid #E0A82A;box-shadow:0 -1px 0 #6B3F00,inset 0 3px 0 rgba(255,236,170,.25),0 -6px 16px rgba(0,0,0,.55)}
.bn-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding-bottom:5px;
  color:#7CC4E6;text-decoration:none;font:800 clamp(9px,2.5vw,10.3px)/1 'Montserrat',var(--font-body);letter-spacing:0;padding-left:2px;padding-right:2px;position:relative;background:transparent;border:none;cursor:pointer;
  text-shadow:0 1px 0 #06202E,0 0 3px rgba(0,0,0,.8);transition:color .15s}
.bn-item .bn-ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-top:-14px;transition:transform .18s;
  border-radius:11px;background:linear-gradient(160deg,#3466E0 0%,#1A3FA6 55%,#0C1F5E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1.5px #E9B847,0 4px 8px rgba(0,0,0,.45)}
.bn-item .bn-ic img{width:32px;height:32px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.bn-item .bn-label{line-height:1.05;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.bn-item.active{color:#FFE58A}
.bn-item.active .bn-ic{transform:translateY(-3px) scale(1.08)}
.bn-item.active .bn-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 2px #FFE58A,0 0 12px rgba(255,214,90,.6)}
.bn-item:active .bn-ic{transform:scale(.92)}
/* Bottom nav life (owner 2026-10-21): active icon floats with a gold glow, idle icons wiggle now and then,
   a tap squashes and bounces the icon before the page changes. */
.bn-item .bn-ic img{transform-origin:50% 100%}
.bn-item.active .bn-ic img{animation:bnFloat 1.8s ease-in-out infinite}
.bn-item:not(.active) .bn-ic img{animation:bnWiggle 6s ease-in-out infinite}
.bn-item:nth-child(2) .bn-ic img{animation-delay:-1.2s}.bn-item:nth-child(3) .bn-ic img{animation-delay:-2.4s}
.bn-item:nth-child(4) .bn-ic img{animation-delay:-3.6s}.bn-item:nth-child(5) .bn-ic img{animation-delay:-4.8s}
.bn-item.active .bn-label{text-shadow:0 0 8px rgba(255,214,90,.7)}
.bn-item.tap .bn-ic img{animation:bnTap .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bnWiggle{0%,86%,100%{transform:none}89%{transform:rotate(-7deg) scale(1.04)}92%{transform:rotate(6deg) scale(1.04)}95%{transform:rotate(-3deg)}}
@keyframes bnLabel{0%,100%{text-shadow:0 0 0 rgba(255,214,90,0)}50%{text-shadow:0 0 8px rgba(255,214,90,.8)}}
@keyframes bnTap{0%{transform:scale(1)}30%{transform:scale(1.18,.8)}60%{transform:scale(.9,1.15) translateY(-6px)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bn-item .bn-ic img,.bn-item .bn-label{animation:none !important}}

/* ---------------- Shared section / typography helpers ---------------- */
.section-label{font-size:10.8px;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:22.5px;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:11.7px;margin-top:4px}
@media(max-width:480px){.section-title{font-size:19.8px}}

/* ---------------- 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:9.9px;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:8.1px;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,#0D1934,#091021);border:1px solid rgba(223,190,52,.4)}
.promo-tile-deposit{background:var(--gradient-brand);border:1px solid rgba(223,190,52,.35)}
.promo-tile-deposit .promo-tile-title,.promo-tile-deposit .promo-tile-sub{color:#1A1406}
.promo-tile-icon{font-size:23.4px;margin-bottom:8px}
.promo-tile-title{font-family:var(--font-display);font-size:17.1px;font-weight:700;color:var(--text)}
.promo-tile-sub{font-size:10.8px;color:var(--text2);margin-top:4px}

/* ---------------- Footer ---------------- */
footer.site-footer{background:#070C19;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:9.9px;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:10.8px;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}
}

/* ---------------- Login / Sign Up window (owner 2026-11-03: the owner's two designs) ----------------
   The frame is the owner's artwork cut in three: top (logo, title, close), a middle slice stretched to the
   content's height, and the bottom. The labels and fields are HTML so they stay big enough to type in on a phone. */
#globalModalOverlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,12,.42);align-items:center;justify-content:center;
  padding:10px 6px;overflow-y:auto;overscroll-behavior:contain}
#globalModalBox{position:relative;width:min(100%,540px);margin:auto;color:#fff;font-family:Georgia,"Times New Roman",serif;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));animation:authPop .42s cubic-bezier(.2,1.25,.35,1)}
@keyframes authPop{from{transform:scale(.86) translateY(14px);opacity:0}}
.pa-top,.pa-bot{position:relative;width:100%;background:center/100% 100% no-repeat}
.pa-mid{background:center top/100% 100% no-repeat;padding:0 9.5% 2px}
.pa-login .pa-top{aspect-ratio:1459/368;background-image:url(/images/phil-auth-login-top.webp)}
.pa-login .pa-mid{background-image:url(/images/phil-auth-login-mid.webp)}
.pa-login .pa-bot{aspect-ratio:1459/176;background-image:url(/images/phil-auth-login-bot.webp)}
.pa-signup .pa-top{aspect-ratio:1458/324;background-image:url(/images/phil-auth-signup-top.webp)}
.pa-signup .pa-mid{background-image:url(/images/phil-auth-signup-mid.webp)}
.pa-signup .pa-bot{aspect-ratio:1458/143;background-image:url(/images/phil-auth-signup-bot.webp)}
.pa-close{position:absolute;width:8%;aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pa-login .pa-close{left:89.2%;top:36.5%}
.pa-signup .pa-close{left:90.7%;top:22.5%}
.pa-close:active{background:rgba(255,255,255,.15)}
.pa-row{display:grid;align-items:center;column-gap:3%;margin:0 0 12px}
.pa-row>*,.pa-in{min-width:0}
.pa-login .pa-row{grid-template-columns:38% 1fr;margin-bottom:16px}
.pa-signup .pa-row{grid-template-columns:34% 1fr}
.pa-pill{display:flex;align-items:center;justify-content:center;height:44px;padding:0 6px;border-radius:9px;text-align:center;
  background:linear-gradient(180deg,#14246E,#060D3A);border:2px solid #E9B847;box-shadow:0 0 0 1.5px #7A4E0C,inset 0 0 0 1.5px #FFF0B0;
  font-weight:700;font-size:clamp(12px,3.6vw,17px);line-height:1.05;text-shadow:0 2px 2px rgba(0,0,0,.6)}
.pa-lbl{display:flex;align-items:center;gap:7px;font-weight:700;font-size:clamp(12.5px,3.7vw,17px);line-height:1.1;text-shadow:0 2px 2px rgba(0,0,0,.6)}
.pa-lbl::before{content:"";flex:none;width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(135deg,#FFF3BF,#E9B847 50%,#9C6414);
  box-shadow:0 0 6px rgba(255,210,90,.7)}
.pa-in{display:flex;align-items:center;height:44px;padding:0 12px;border-radius:12px;background:#040A33;border:2px solid #5FE3FF;
  box-shadow:0 0 8px rgba(80,220,255,.5),inset 0 0 12px rgba(0,0,0,.55);transition:border-color .15s,box-shadow .15s}
.pa-signup .pa-in{height:40px;border-radius:10px}
.pa-in:focus-within{border-color:#B8F4FF;box-shadow:0 0 12px rgba(120,235,255,.8),inset 0 0 12px rgba(0,0,0,.55)}
.pa-in.bad{border-color:#FF6B6B;box-shadow:0 0 10px rgba(255,90,90,.6)}
.pa-in input{flex:1;min-width:0;height:100%;padding:0;background:transparent;border:0;outline:0;color:#fff;font:400 16px Georgia,"Times New Roman",serif}
.pa-in input::placeholder{color:#B9C2EE;opacity:1;font-size:clamp(11.5px,3.3vw,15px)}
.pa-cc{flex:none;margin-right:10px;padding-right:10px;font-weight:700;font-size:17px}
.pa-login .pa-cc{color:#FFE14A;border-right:1.5px solid #D9B640}
.pa-signup .pa-cc{align-self:stretch;display:flex;align-items:center;margin:0 10px 0 -12px;padding:0 12px;color:#fff;border-right:2px solid #5FE3FF}
.pa-cap{display:flex;gap:8px;align-items:center}
.pa-cap .pa-in{flex:1;min-width:0}
.pa-cap img{flex:none;height:40px;width:auto;max-width:42%;border-radius:7px;background:#EFF4F2;cursor:pointer}
.pa-msg{margin:-2px 0 10px;padding:7px 10px;border-radius:8px;background:rgba(150,0,0,.4);color:#FFD0D0;font:600 12.5px/1.35 Montserrat,sans-serif;text-align:center}
.pa-msg[hidden]{display:none}
.pa-note{margin:0 0 10px;text-align:center;font-size:14px;color:#D7DEFF}
.pa-note b{color:#FFE14A}
.pa-acts{display:flex;align-items:center;justify-content:center;gap:4%;margin:4px 0 0}
.pa-btn{display:block;flex:none;border:0;padding:0;background:center/100% 100% no-repeat transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pa-login .pa-btn{width:60%;aspect-ratio:613/172;background-image:url(/images/phil-auth-login-btn.webp)}
.pa-signup .pa-btn{width:72%;aspect-ratio:760/158;margin:0 auto;background-image:url(/images/phil-auth-signup-btn.webp)}
.pa-btn:active{transform:scale(.96)}
.pa-btn:disabled{opacity:.6;cursor:default}
.pa-sep{width:2px;height:30px;background:#D9B640}
.pa-link{color:#4FE3FF;font-size:clamp(14px,4vw,19px);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pa-switch{margin:4px 0 0;text-align:center;font-size:clamp(13px,3.7vw,16px);color:#fff}
.pa-switch a{color:#FFE14A;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pa-fine{margin:8px 0 0;text-align:center;font:500 10.5px/1.45 Montserrat,sans-serif;color:#AFB9E6}
.pa-fine a{color:#FFE14A}
@media(prefers-reduced-motion:reduce){#globalModalBox{animation:none}}

/* ---------------- Login/Register pill + balance chip (top bar) ---------------- */
.btn-pill-login{background:var(--gradient-gold);border:none;color:#1A1406;padding:10px 18px;
  border-radius:999px;font-size:11.7px;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:11.7px;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:#1A1406;font-size:15.3px;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:10.8px}}

/* ---------------- 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:9px;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:#FFD318;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}

/* ---------------- Smooth + glossy motion (owner 2026-10-21) ---------------- */
html{-webkit-tap-highlight-color:transparent}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
body{animation:pageIn .25s ease-out both}
@keyframes pageIn{from{opacity:0}}
.bn-ic,.bn-ic img{will-change:transform}
button,a,.wg-tile{transition:transform .18s cubic-bezier(.3,1.4,.5,1),filter .18s ease}
button:active:not(:disabled){filter:brightness(1.12)}
/* glossy buttons: top highlight + a light sweep every few seconds */
.btn-gradient,.wg-more,.auth-submit,.rw-btn:not(:disabled),.btn-pill-login{position:relative;overflow:hidden}
.btn-gradient::before,.wg-more::before,.auth-submit::before,.rw-btn:not(:disabled)::before,.btn-pill-login::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;
  border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.06));pointer-events:none}
.btn-gradient::after,.wg-more::after,.auth-submit::after,.rw-btn:not(:disabled)::after,.btn-pill-login::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none;
  animation:glossSweep 3.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes glossSweep{0%,62%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(360%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){body{animation:none}.btn-gradient::after,.wg-more::after,.auth-submit::after,.rw-btn::after,.btn-pill-login::after{animation:none;opacity:0}}