/* ============================================================
   PLAYPANALO shared theme (owner 2026-11-03): Palisdo's design in the colours of the PLAYPANALO logo, deep purple
   surfaces and buttons, gold accents with sparkle highlights, and the phone's own app font (no web font).
   Mobile-first top bar / bottom nav reused on every page; layout after the owner's reference video.
   ============================================================ */

:root{
  /* PLAYPANALO (2026-11-10, from the PlayPANALO logo): deep navy surfaces, electric blue buttons and accents, silver ink
     and edges (the crown and wordmark), sparkle highlights, light ink.
     Old token names are kept so every page follows the palette. */
  --orange:#288FF6;--orange-deep:#238CF6;--orange-ink:#8CD1FC;
  --orange-soft:rgba(40,143,246,.16);--orange-wash:rgba(40,143,246,.07);
  --coin:#288FF6;--coin-deep:#0A7AEA;
  --bg:#060C19;--bg2:#091326;--bg3:#0C1933;--bg4:#0F1F40;--field:#091326;
  --card:#0A152B;--border:#132953;--border-soft:#102143;
  --text:#F2F6FB;--text2:#B2BDCD;--text3:#8194AE;
  --green:#22C55E;--danger:#F04B5F;

  --gold:#288FF6;--gold2:#0A7AEA;--red:#F04B5F;--red2:#B3192F;
  --purple:var(--orange-deep);--cyan:var(--gold);

  --gradient-brand:linear-gradient(180deg,#6CCBFF 0%,#1E8FFF 48%,#0B5ED7 100%);
  --gradient-gold:linear-gradient(180deg,#92D3FC 0%,#288FF6 50%,#0973DD 100%);
  --gradient-band:linear-gradient(180deg,#0A162D 0%,#070F1F 100%);

  --font-display:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --topbar-h:60px;--bottomnav-h:64px;--radius:14px;--radius-sm:10px;--cut:14px;
  --shadow-card:0 2px 14px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{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(40,143,246,0.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(40,143,246,0.35);box-shadow:0 2px 14px rgba(34,140,246,0.11)}
.topbar-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.topbar-logo .logo-img.logo-word{height:34px;width:auto;border-radius:0;filter:drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 2px 8px rgba(40,143,246,.45))}
.topbar-logo .logo-img{height:44px;width:auto;display:block;border-radius:10px;box-shadow:none;border-radius:6px}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:21px;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(40,143,246,0.1);border:1.5px solid rgba(40,143,246,0.45);
  color:#D1E2F2;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s}
.topbar-icon-btn:hover{background:rgba(40,143,246,0.22)}

.btn-outline-sm{background:transparent;border:1px solid rgba(40,143,246,0.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:#FFFFFF;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:none;box-shadow:0 4px 16px rgba(34,140,246,0.35)}
.btn-gradient:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(34,140,246,0.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:#fff;cursor:pointer;flex-shrink:0;
  box-shadow:0 2px 6px rgba(34,140,246,0.088)}
.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) + 36px)}
footer.site-footer{margin-bottom:calc(var(--bottomnav-h) + 20px)}
@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:#081224;color:var(--text);border:1px solid rgba(40,143,246,0.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(34,140,246,0.066)}
.site-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- Bottom nav: icon + visible label, raised Deposit coin ---------------- */
/* Floating pill (owner 2026-10-27): rounded bar off the screen edges, gold for the open page. */
.bottom-nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:var(--bottomnav-h);z-index:1000;
  display:flex;align-items:stretch;justify-content:space-around;padding:0 6px;border-radius:32px;
  background:rgba(10,21,43,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(40,143,246,.28);box-shadow:0 10px 28px rgba(0,0,0,.55)}
@media(min-width:640px){.bottom-nav{left:50%;right:auto;width:560px;transform:translateX(-50%)}}
.bn-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#92A3BA;text-decoration:none;font-size:12px;font-weight:800;position:relative;background:transparent;border:none;cursor:pointer;
  transition:color .15s}
.bn-item .bn-ic{width:46px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.bn-item .bn-ic svg{width:26px;height:26px;stroke-width:2.1}
.bn-item .bn-label{line-height:1;white-space:nowrap}
.bn-item.active{color:var(--gold)}
.bn-item.active .bn-ic{background:rgba(40,143,246,.14)}
.bn-item:active .bn-ic{transform:scale(.92)}
.bn-item.bn-raised{color:var(--gold)}

/* ---------------- 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(34,140,246,0.11)}
.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(4,9,19,0.25);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(34,140,246,0.25)}50%{box-shadow:0 0 22px rgba(34,140,246,0.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(4,9,19,0.385);border-radius:6px;padding:3px 6px;font-size:9px;font-weight:700;color:#D1E2F2}
.game-online .dot{width:5px;height:5px;border-radius:50%;background:#4ADE80}
.fav-btn{position:absolute;top:8px;right:8px;background:rgba(4,9,19,0.054);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#D1E2F2;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(4,9,19,0.385);color:#D1E2F2;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(34,140,246,0.11)}
.promo-tile-refer{background:linear-gradient(135deg,#091225,#081123);border:1px solid rgba(40,143,246,0.4)}
.promo-tile-deposit{background:var(--gradient-brand);border:1px solid rgba(40,143,246,0.35)}
.promo-tile-deposit .promo-tile-title,.promo-tile-deposit .promo-tile-sub{color:#D1E2F2}
.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:#081123;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(4,9,19,0.504);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,#081123 0%,#081021 55%,#081123 100%);border-top:1.5px solid rgba(40,143,246,0.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(34,140,246,0.132);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(40,143,246,0.4)}}
#globalModalBox .modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(4,9,19,0.06);color:#D1E2F2;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:#D1E2F2;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:#081123;
  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:#B9C3D2}
.auth-lead{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--text3)}
.auth-lead b{color:#D1E2F2;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,0.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:#FFFFFF;font-size:18px;font-weight:800;font-family:var(--font-body);
  box-shadow:0 6px 18px rgba(34,140,246,0.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:#fff;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(34,140,246,0.088);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:#fff;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(34,140,246,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:#288FF6;box-shadow:0 10px 22px rgba(34,140,246,0.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 #0F2041;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}}
button,a{transition:transform .18s cubic-bezier(.3,1.4,.5,1),filter .18s ease,background-color .2s ease,color .2s ease,opacity .2s ease}
button:active:not(:disabled){filter:brightness(1.1)}
.game-card{transition:transform .25s cubic-bezier(.2,1,.3,1),box-shadow .25s ease,border-color .25s ease}
.game-card:active{transform:scale(.96)}
/* glossy game art: soft top highlight + a light sweep (transform-only, staggered) */
.game-thumb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 38%,transparent 52%)}
.game-thumb::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-170%) skewX(-16deg);animation:glossTile 5s cubic-bezier(.45,0,.2,1) infinite}
.game-card:nth-child(3n+2) .game-thumb::after{animation-delay:-1.6s}
.game-card:nth-child(3n) .game-thumb::after{animation-delay:-3.3s}
@keyframes glossTile{0%,70%{transform:translateX(-170%) skewX(-16deg)}100%{transform:translateX(330%) skewX(-16deg)}}
/* glossy buttons */
.btn-gradient,.btn-pill-login{position:relative;overflow:hidden}
.btn-gradient::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,.32),rgba(255,255,255,.04));pointer-events:none}
.btn-gradient::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,.5),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)}}
/* softer popups */

#globalModalBox{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){body{animation:none}.game-thumb::after,.btn-gradient::after,.btn-pill-login::after{animation:none;opacity:0}}

/* ---------------- Gold pieces carry dark ink (white is unreadable on gold) ---------------- */
.btn-pill-login,.topbar-add-btn,.topbar-avatar{color:#060C19}
.site-topbar{border-bottom:1px solid rgba(40,143,246,.45)}
.topbar-icon-btn{color:var(--text)}

/* ---------------- Sparkle highlights (PLAYPANALO logo, owner 2026-11-03) ----------------
   Small gold and white glints behind the page, twinkling slowly; still for people who ask for less motion. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%,rgba(153,214,252,.95),transparent 70%),
    radial-gradient(1.2px 1.2px at 23% 34%,rgba(255,255,255,.8),transparent 70%),
    radial-gradient(2px 2px at 41% 8%,rgba(40,143,246,.9),transparent 70%),
    radial-gradient(1.3px 1.3px at 62% 27%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(1.8px 1.8px at 79% 15%,rgba(153,214,252,.9),transparent 70%),
    radial-gradient(1.2px 1.2px at 92% 41%,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(1.6px 1.6px at 14% 63%,rgba(40,143,246,.85),transparent 70%),
    radial-gradient(1.2px 1.2px at 36% 82%,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(1.8px 1.8px at 57% 58%,rgba(153,214,252,.8),transparent 70%),
    radial-gradient(1.3px 1.3px at 84% 76%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(1.6px 1.6px at 70% 93%,rgba(40,143,246,.85),transparent 70%);
  background-size:520px 620px;opacity:.55;animation:pdpTwinkle 5s ease-in-out infinite alternate}
@keyframes pdpTwinkle{from{opacity:.25}to{opacity:.7}}
.site-topbar{box-shadow:0 1px 0 rgba(40,143,246,.25),0 6px 18px rgba(35,140,246,.25)}
.topbar-logo .logo-img{border-radius:6px;box-shadow:0 0 10px rgba(40,143,246,.35)}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
/* PLAYPANALO (owner 2026-11-09): gold buttons carry dark ink, never white (white on gold is hard to read). */
.auth-submit,.btn-gradient,.btn-hero-primary,.btn-register,.btn-ticket,.dp-next,.games-load-more-btn,.h7-search,.phone-cta,.play-btn,
.promo-cta,.promo-tile-deposit,.rg-btn-agree,.rt-cta,.step-num,.h7-auth .up,.btn-pill-login,.cph-side .on,.cph-side a.on{color:#FFFFFF!important}
.auth-submit svg,.h7-search svg,.play-btn svg{color:#FFFFFF;stroke:currentColor}