/* ============================================================
   nustar gaming - style-6215.css
   Mobile-first gaming site styles. All classes use "pg62-" prefix.
   Palette: #DA70D6 | #BA55D3 | #9400D3 | #495057 | #333333
   Dark backgrounds, light text. Max width 430px on mobile.
   ============================================================ */
:root {
  --pg62-primary:#DA70D6; --pg62-secondary:#BA55D3; --pg62-accent:#9400D3;
  --pg62-bg:#333333; --pg62-bg-deep:#1f1f24; --pg62-bg-card:#495057;
  --pg62-text:#f5f3f8; --pg62-text-muted:#c9c4d2; --pg62-border:rgba(218,112,214,0.25);
  --pg62-gold:#ffd56b; --pg62-radius:14px; --pg62-shadow:0 6px 20px rgba(0,0,0,0.35);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:62.5%; -webkit-text-size-adjust:100%; }
body {
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(160deg,var(--pg62-bg-deep) 0%,var(--pg62-bg) 100%);
  color:var(--pg62-text); line-height:1.5rem; font-size:1.5rem;
  max-width:430px; margin:0 auto; min-height:100vh; position:relative; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--pg62-primary); text-decoration:none; }
ul { list-style:none; }

/* ---- Layout ---- */
.pg62-wrapper { width:100%; max-width:430px; margin:0 auto; position:relative; }
.pg62-container { padding:1.6rem 1.4rem; }

/* ---- Header ---- */
.pg62-header {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; z-index:1000;
  background:linear-gradient(120deg,rgba(51,51,51,0.96),rgba(73,80,87,0.96));
  backdrop-filter:blur(8px); border-bottom:1px solid var(--pg62-border); box-shadow:var(--pg62-shadow);
}
.pg62-header-inner { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 1rem; gap:0.8rem; }
.pg62-logo { display:flex; align-items:center; gap:0.6rem; flex:1; min-width:0; }
.pg62-logo img { width:28px; height:28px; border-radius:6px; }
.pg62-logo-text {
  font-size:1.6rem; font-weight:700; white-space:nowrap;
  background:linear-gradient(90deg,var(--pg62-primary),var(--pg62-gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.pg62-header-actions { display:flex; align-items:center; gap:0.5rem; }
.pg62-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  border:none; cursor:pointer; font-weight:700; border-radius:10px;
  font-size:1.3rem; padding:0.6rem 1rem; min-height:36px;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pg62-btn:active { transform:scale(0.96); }
.pg62-btn-login { background:transparent; color:var(--pg62-text); border:1px solid var(--pg62-primary); }
.pg62-btn-register { background:linear-gradient(90deg,var(--pg62-accent),var(--pg62-primary)); color:#fff; box-shadow:0 4px 14px rgba(148,0,211,0.4); }
.pg62-btn-register:hover { box-shadow:0 6px 18px rgba(218,112,214,0.55); }

/* ---- Menu toggle ---- */
.pg62-menu-toggle {
  background:transparent; border:none; color:var(--pg62-text); font-size:2rem; cursor:pointer;
  padding:0 0.4rem; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
}
.pg62-menu-toggle.pg62-active { color:var(--pg62-primary); }

/* ---- Mobile menu ---- */
.pg62-mobile-menu {
  position:fixed; top:56px; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; background:var(--pg62-bg-deep);
  border-bottom:1px solid var(--pg62-border); max-height:0; overflow:hidden;
  transition:max-height 0.32s ease; z-index:9999;
}
.pg62-mobile-menu.pg62-open { max-height:520px; box-shadow:var(--pg62-shadow); }
.pg62-mobile-menu ul { padding:0.6rem 0; }
.pg62-mobile-menu li { border-bottom:1px solid rgba(218,112,214,0.12); }
.pg62-mobile-menu a { display:block; padding:1rem 1.4rem; color:var(--pg62-text); font-size:1.4rem; }
.pg62-mobile-menu a:hover { background:rgba(218,112,214,0.12); color:var(--pg62-primary); }
.pg62-mobile-menu a i { width:22px; color:var(--pg62-secondary); }

/* ---- Main spacing ---- */
.pg62-main { padding-top:64px; padding-bottom:80px; }

/* ---- Hero carousel ---- */
.pg62-carousel { position:relative; width:100%; overflow:hidden; border-radius:0 0 var(--pg62-radius) var(--pg62-radius); }
.pg62-carousel-track { display:flex; transition:transform 0.5s ease; }
.pg62-carousel-slide { min-width:100%; position:relative; }
.pg62-carousel-slide img { width:100%; height:200px; object-fit:cover; }
.pg62-carousel-slide .pg62-slide-caption {
  position:absolute; left:1rem; bottom:1rem; background:rgba(31,31,36,0.7);
  padding:0.5rem 0.9rem; border-radius:8px; font-size:1.3rem; font-weight:600;
}
.pg62-carousel-dots { position:absolute; bottom:0.6rem; right:0.8rem; display:flex; gap:0.4rem; }
.pg62-carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.45); border:none; cursor:pointer; padding:0; }
.pg62-carousel-dot.pg62-active { background:var(--pg62-primary); width:18px; border-radius:4px; }

/* ---- Section ---- */
.pg62-section { padding:1.8rem 1.4rem; }
.pg62-section-title { font-size:1.9rem; font-weight:800; margin-bottom:1rem; color:var(--pg62-text); border-left:4px solid var(--pg62-primary); padding-left:0.8rem; }
.pg62-section-title .pg62-hl, .pg62-h1 .pg62-hl, .pg62-h2 .pg62-hl { color:var(--pg62-primary); }
.pg62-section-intro { color:var(--pg62-text-muted); font-size:1.35rem; margin-bottom:1.2rem; }
.pg62-h1 { font-size:2.1rem; font-weight:800; line-height:1.4; margin-bottom:0.8rem; }
h2.pg62-h2 { font-size:1.7rem; font-weight:700; margin:1.2rem 0 0.6rem; color:var(--pg62-text); }
h3.pg62-h3 { font-size:1.4rem; font-weight:700; margin:1rem 0 0.4rem; color:var(--pg62-primary); }
p.pg62-para { margin-bottom:0.9rem; color:var(--pg62-text-muted); }

/* ---- Filter tabs ---- */
.pg62-filters { display:flex; gap:0.5rem; overflow-x:auto; padding:0.6rem 0; margin-bottom:0.8rem; -webkit-overflow-scrolling:touch; }
.pg62-filters::-webkit-scrollbar { display:none; }
.pg62-filter-tab { flex:0 0 auto; padding:0.5rem 1rem; border-radius:20px; background:var(--pg62-bg-card); color:var(--pg62-text); border:1px solid transparent; font-size:1.25rem; cursor:pointer; white-space:nowrap; }
.pg62-filter-tab.pg62-active { background:linear-gradient(90deg,var(--pg62-accent),var(--pg62-primary)); color:#fff; border-color:var(--pg62-primary); }

/* ---- Game group + grid ---- */
.pg62-game-group { margin-bottom:1.6rem; }
.pg62-game-group-head { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.8rem; }
.pg62-game-group-head i { color:var(--pg62-primary); font-size:1.8rem; }
.pg62-game-group-head span { font-size:1.5rem; font-weight:700; }
.pg62-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; }
.pg62-card { background:var(--pg62-bg-card); border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid var(--pg62-border); transition:transform 0.18s ease, box-shadow 0.18s ease; }
.pg62-card:active { transform:scale(0.96); }
.pg62-card:hover { box-shadow:0 6px 16px rgba(148,0,211,0.35); border-color:var(--pg62-primary); }
.pg62-card img { width:100%; height:88px; object-fit:cover; }
.pg62-card-name { padding:0.4rem 0.3rem 0.5rem; font-size:1.1rem; text-align:center; color:var(--pg62-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }

/* ---- Feature / promo cards ---- */
.pg62-feature-grid { display:grid; grid-template-columns:1fr; gap:0.9rem; }
.pg62-feature-card { background:linear-gradient(135deg,var(--pg62-bg-card),rgba(73,80,87,0.6)); border:1px solid var(--pg62-border); border-radius:var(--pg62-radius); padding:1.2rem; }
.pg62-feature-card h3 { color:var(--pg62-primary); font-size:1.45rem; margin-bottom:0.4rem; }
.pg62-feature-card p { color:var(--pg62-text-muted); font-size:1.3rem; }
.pg62-feature-card .pg62-icon-row { display:flex; gap:0.8rem; margin-top:0.8rem; font-size:2rem; color:var(--pg62-secondary); }

/* ---- RTP bars ---- */
.pg62-rtp-row { margin-bottom:0.7rem; }
.pg62-rtp-label { display:flex; justify-content:space-between; font-size:1.2rem; margin-bottom:0.2rem; color:var(--pg62-text-muted); }
.pg62-rtp-bar { height:8px; background:rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; }
.pg62-rtp-fill { height:100%; background:linear-gradient(90deg,var(--pg62-accent),var(--pg62-primary)); border-radius:4px; }

/* ---- CTA banner ---- */
.pg62-cta { background:linear-gradient(120deg,var(--pg62-accent),var(--pg62-primary)); border-radius:var(--pg62-radius); padding:1.4rem; text-align:center; margin:1.4rem 0; box-shadow:var(--pg62-shadow); }
.pg62-cta h3 { color:#fff; font-size:1.6rem; margin-bottom:0.6rem; }
.pg62-cta p { color:rgba(255,255,255,0.9); font-size:1.3rem; margin-bottom:0.9rem; }
.pg62-cta .pg62-btn-cta { background:#fff; color:var(--pg62-accent); font-weight:800; padding:0.8rem 1.6rem; border-radius:24px; border:none; font-size:1.4rem; cursor:pointer; }
.pg62-cta .pg62-btn-cta:active { transform:scale(0.96); }

/* ---- Testimonials / winners ---- */
.pg62-testimonial { background:var(--pg62-bg-card); border-left:3px solid var(--pg62-primary); border-radius:10px; padding:1rem 1.1rem; margin-bottom:0.8rem; }
.pg62-testimonial p { font-style:italic; color:var(--pg62-text); font-size:1.3rem; margin-bottom:0.4rem; }
.pg62-testimonial .pg62-author { font-size:1.15rem; color:var(--pg62-secondary); font-weight:600; }
.pg62-winners { display:flex; flex-direction:column; gap:0.5rem; }
.pg62-winner { display:flex; justify-content:space-between; background:var(--pg62-bg-card); padding:0.6rem 0.9rem; border-radius:8px; font-size:1.2rem; }
.pg62-winner .pg62-amount { color:var(--pg62-gold); font-weight:700; }

/* ---- Payment chips ---- */
.pg62-payments { display:flex; flex-wrap:wrap; gap:0.5rem; }
.pg62-pay-chip { display:inline-flex; align-items:center; gap:0.4rem; background:var(--pg62-bg-card); border:1px solid var(--pg62-border); border-radius:20px; padding:0.4rem 0.9rem; font-size:1.2rem; color:var(--pg62-text); }
.pg62-pay-chip i { color:var(--pg62-primary); }

/* ---- Inline affiliate link ---- */
.pg62-link-inline { color:var(--pg62-primary); font-weight:700; text-decoration:underline; cursor:pointer; }
.pg62-link-inline:hover { color:var(--pg62-gold); }

/* ---- Footer ---- */
.pg62-footer { background:var(--pg62-bg-deep); border-top:1px solid var(--pg62-border); padding:1.6rem 1.4rem 2rem; margin-top:1rem; }
.pg62-footer-brand { color:var(--pg62-text-muted); font-size:1.25rem; line-height:1.5; margin-bottom:1rem; }
.pg62-footer-links { display:flex; flex-wrap:wrap; gap:0.5rem 1rem; margin-bottom:1rem; }
.pg62-footer-links a { color:var(--pg62-text-muted); font-size:1.2rem; }
.pg62-footer-links a:hover { color:var(--pg62-primary); }
.pg62-footer-promos { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.pg62-footer-promos .pg62-btn { background:var(--pg62-bg-card); color:var(--pg62-primary); border:1px solid var(--pg62-border); font-size:1.2rem; padding:0.5rem 0.9rem; }
.pg62-footer-copy { color:var(--pg62-text-muted); font-size:1.1rem; border-top:1px solid rgba(255,255,255,0.08); padding-top:0.9rem; }

/* ---- Mobile bottom nav ---- */
.pg62-bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; height:60px;
  background:linear-gradient(180deg,rgba(51,51,51,0.98),rgba(31,31,36,1));
  border-top:1px solid var(--pg62-border); display:flex; justify-content:space-around;
  align-items:center; z-index:1000; box-shadow:0 -4px 18px rgba(0,0,0,0.4);
}
.pg62-bottom-nav-btn {
  flex:1; background:transparent; border:none; color:var(--pg62-text-muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem;
  min-width:60px; min-height:60px; cursor:pointer; position:relative; padding:0.4rem 0;
  transition:color 0.18s ease, transform 0.18s ease;
}
.pg62-bottom-nav-btn:active { transform:scale(0.92); }
.pg62-bottom-nav-btn i { font-size:22px; }
.pg62-bottom-nav-btn .pg62-bn-label { font-size:10px; line-height:1; }
.pg62-bottom-nav-btn.pg62-bn-active { color:var(--pg62-primary); }
.pg62-bottom-nav-btn.pg62-bn-active::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; background:var(--pg62-primary); border-radius:0 0 3px 3px; }
.pg62-bottom-nav-btn.pg62-bn-promo { color:var(--pg62-gold); }
.pg62-bottom-nav-btn.pg62-bn-badge::after { content:''; position:absolute; top:8px; right:22px; width:7px; height:7px; background:#ff5b6e; border-radius:50%; }

/* ---- Back to top ---- */
.pg62-back-top { position:fixed; right:1rem; bottom:76px; width:40px; height:40px; border-radius:50%; background:var(--pg62-accent); color:#fff; border:none; font-size:1.6rem; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:999; box-shadow:var(--pg62-shadow); }
.pg62-back-top.pg62-show { display:flex; }

/* ---- Responsive ---- */
@media (min-width:769px) { .pg62-bottom-nav { display:none; } .pg62-main { padding-bottom:2rem; } }
@media (max-width:768px) { .pg62-main { padding-bottom:80px; } }
@media (max-width:360px) { .pg62-grid { grid-template-columns:repeat(2,1fr); } .pg62-logo-text { font-size:1.4rem; } }
