@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
/* ============================================================
   TARAPLAY 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{
  /* TARAPLAY: 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:#06160F;--bg2:#081D14;--bg3:#0B271B;--bg4:#0D3122;--field:#071A12;
  --card:#072116;--border:#0F4B31;--border-soft:#0A3624;
  --text:#F4EFE3;--text2:#C9BFA8;--text3:#6C907A;
  --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,#0B2A1D 0%,#06140E 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/wagi-jungle-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:#0C3021;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: TARAPLAY 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,#24493B 0%,#123326 45%,#0A2219 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:46px;height:40px;display:flex;align-items:flex-end;justify-content:center;margin-top:-16px;transition:transform .18s}
.bn-item .bn-ic svg{width:46px;height:40px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.55))}
.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 svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,214,90,.55))}
.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 svg{transform-origin:50% 100%}
.bn-item.active .bn-ic svg{animation:bnFloat 1.8s ease-in-out infinite}
.bn-item:not(.active) .bn-ic svg{animation:bnWiggle 6s ease-in-out infinite}
.bn-item:nth-child(2) .bn-ic svg{animation-delay:-1.2s}.bn-item:nth-child(3) .bn-ic svg{animation-delay:-2.4s}
.bn-item:nth-child(4) .bn-ic svg{animation-delay:-3.6s}.bn-item:nth-child(5) .bn-ic svg{animation-delay:-4.8s}
.bn-item.active .bn-label{text-shadow:0 0 8px rgba(255,214,90,.7)}
.bn-item.tap .bn-ic svg{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 svg,.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,#0D3424,#092117);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:#071911;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}
}

/* ---------------- Shared login/register window: gold frame, tab title, gem corners ---------------- */
#globalModalOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:2000;align-items:center;justify-content:center;
  padding:56px 16px 20px}
#globalModalBox{position:relative;width:100%;max-width:560px;font-family:"Fondamento",Georgia,serif;color:#fff;animation:authPop .42s cubic-bezier(.2,1.25,.35,1)}
@keyframes authPop{from{transform:scale(.86) translateY(14px);opacity:0}}
.auth-frame{position:relative;padding:7px;border-radius:18px;
  background:linear-gradient(160deg,#FFF0B0 0%,#E6B446 22%,#A8721A 48%,#F4D277 70%,#B57D1F 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.35)}
.auth-panel{position:relative;background:rgba(30,56,51,.86);border-radius:12px;padding:14px;box-shadow:inset 0 0 0 2px #0E1F1C;
  max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.auth-panel::-webkit-scrollbar{display:none}
#globalModalContent{background:rgba(23,45,41,.55);border-radius:18px;padding:34px 22px 26px;box-shadow:inset 0 2px 10px rgba(0,0,0,.45)}
.auth-tab{position:absolute;left:50%;top:-42px;z-index:3;transform:translateX(-50%);width:min(58%,300px);height:50px;display:flex;align-items:center;justify-content:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50C18 50 24 45 28 32L34 11C37 3 42 0 52 0H248C258 0 263 3 266 11L272 32C276 45 282 50 300 50Z' fill='%23F7D56F'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  font-size:25.2px;color:#1E2E2B;padding-top:4px}
.auth-corner{position:absolute;z-index:4;width:66px;height:66px;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.auth-corner svg{display:block;width:100%;height:100%}
.auth-corner.tl{top:-12px;left:-12px}.auth-corner.tr{top:-12px;right:-12px;transform:scaleX(-1)}
.auth-corner.bl{bottom:-12px;left:-12px;transform:scaleY(-1)}.auth-corner.br{bottom:-12px;right:-12px;transform:scale(-1,-1)}
#globalModalBox .modal-close{position:absolute;top:20px;right:20px;z-index:2;width:30px;height:30px;border-radius:50%;border:1.5px solid #2E6B5E;cursor:pointer;
  background:#0F2420;color:#CDE7DF;display:flex;align-items:center;justify-content:center}
.auth-row{display:grid;grid-template-columns:minmax(0,36%) 1fr;align-items:start;column-gap:14px;margin-top:22px}
.auth-row:first-child{margin-top:8px}
.auth-lbl{display:flex;align-items:center;min-height:52px;font-size:clamp(13.5px,3.9vw,21.6px);line-height:1.15;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.45)}
.auth-col{min-width:0}
.auth-field{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px;background:#0F1F1C;border:2px solid #2C6457;border-radius:16px;transition:border-color .15s}
.auth-field:focus-within{border-color:#3FD6A9}
.auth-field.bad{border-color:#F26363}
.auth-field input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;color:#fff;font:400 16px "Fondamento",Georgia,serif}
.auth-field input::placeholder{color:#A9B7B3}
.auth-lead{flex-shrink:0;color:#fff;font-size:clamp(13.5px,3.8vw,17.1px)}
.auth-captcha{display:block;height:40px;width:120px;margin-top:8px;border-radius:8px;cursor:pointer}
.auth-err{display:flex;align-items:center;gap:6px;margin:6px 2px 0;font:600 11.2px var(--font-body);color:#FF8080}
.auth-err svg{width:14px;height:14px;flex-shrink:0}
.auth-err[hidden]{display:none}
.auth-note{font-size:13.5px;color:#CFE3DD;margin:0 0 4px}
.auth-note b{color:#F7D56F}
.auth-actions{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,26px);margin-top:34px;padding-left:clamp(0px,12%,90px)}
.auth-submit{position:relative;overflow:hidden;flex:0 1 220px;height:54px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#A6A6A6 0%,#8A8A8A 46%,#6A6A6A 54%,#7C7C7C 100%);
  box-shadow:0 0 0 4px #E9E9E9,0 0 0 5.5px #7D7D7D,0 7px 12px rgba(0,0,0,.55),inset 0 -3px 6px rgba(0,0,0,.3);
  font:400 23.4px "Fondamento",Georgia,serif;color:#fff;-webkit-text-stroke:1px #1E1E1E;paint-order:stroke fill;text-shadow:0 2px 0 #222;transition:transform .12s}
.auth-submit::before{content:"";position:absolute;left:7%;right:7%;top:5px;height:44%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.08));pointer-events:none}
.auth-submit:active{transform:scale(.96)}
.auth-submit:disabled{opacity:.7;cursor:default;font-size:18px}
.auth-link{flex-shrink:0;font-size:clamp(14.4px,4.1vw,20.7px);color:#2ED3A6;text-decoration:underline;text-underline-offset:4px}
.auth-switch{text-align:center;font-size:15.3px;color:#CFE3DD;margin:24px 0 0}
.auth-switch a{color:#F7D56F;text-decoration:underline;text-underline-offset:3px}
.auth-fine{font:500 10.8px/1.5 var(--font-body);color:#9FB8B0;text-align:center;margin:22px 0 0}
.auth-fine a{color:#F7D56F}
.auth-panel .rg-pagcor-strip{color:#E4EFEC}
@media(max-width:380px){
  #globalModalContent{padding:30px 14px 22px}.auth-panel{padding:10px}
  .auth-row{grid-template-columns:minmax(0,34%) 1fr;column-gap:10px}
  .auth-field{padding:0 10px;height:48px}.auth-lbl{min-height:48px}.auth-actions{padding-left:0}
  .auth-corner{width:54px;height:54px}
}
@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 svg{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}}