/* ===== Arena Plus Login - Core Layout (prefix: pg10-) ===== */
:root{
  --pg10-primary:#2E4057;
  --pg10-accent:#4169E1;
  --pg10-secondary:#4682B4;
  --pg10-bg:#1b2a3a;
  --pg10-bg-alt:#22364a;
  --pg10-text:#eef4fb;
  --pg10-muted:#a9bcd1;
  --pg10-gold:#ffd36e;
  --pg10-card:#23394f;
  --pg10-line:#34506e;
  --pg10-radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--pg10-bg);
  color:var(--pg10-text);
  line-height:1.5rem;
  max-width:430px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--pg10-accent);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.4rem;font-weight:700}
h1{font-size:2.2rem;line-height:2.8rem}
h2{font-size:1.9rem;line-height:2.4rem;margin-bottom:1rem}
h3{font-size:1.6rem;line-height:2rem;margin-bottom:.8rem}
p{margin-bottom:1rem;font-size:1.4rem;color:var(--pg10-muted)}

/* Layout helpers */
.pg10-container{width:100%;padding:0 1.2rem}
.pg10-wrapper{max-width:430px;margin:0 auto}
.pg10-section{padding:2rem 1.2rem}
.pg10-center{text-align:center}

/* Buttons */
.pg10-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem 1.6rem;border:none;border-radius:999px;
  font-size:1.3rem;font-weight:700;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;min-height:44px;
}
.pg10-btn-primary{background:linear-gradient(135deg,var(--pg10-accent),var(--pg10-secondary));color:#fff;box-shadow:0 4px 14px rgba(65,105,225,.4)}
.pg10-btn-gold{background:linear-gradient(135deg,var(--pg10-gold),#ff9e3d);color:#3a2600;box-shadow:0 4px 14px rgba(255,211,110,.4)}
.pg10-btn-ghost{background:transparent;border:1.5px solid var(--pg10-line);color:var(--pg10-text)}
.pg10-btn:hover{transform:translateY(-2px)}
.pg10-link-text{color:var(--pg10-gold);font-weight:700;border-bottom:1px dashed rgba(255,211,110,.4)}

/* Header */
.pg10-header{
  position:sticky;top:0;z-index:1000;background:rgba(27,42,58,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--pg10-line);
}
.pg10-header-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.2rem;gap:.8rem}
.pg10-logo{display:flex;align-items:center;gap:.6rem;font-size:1.5rem;font-weight:800;color:#fff;white-space:nowrap}
.pg10-logo i{color:var(--pg10-accent);font-size:2.2rem}
.pg10-logo span{color:var(--pg10-gold)}
.pg10-head-actions{display:flex;align-items:center;gap:.5rem}
.pg10-head-actions .pg10-btn{padding:.6rem 1.2rem;font-size:1.2rem;min-height:38px}
.pg10-menu-btn{background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}

/* Nav dropdown */
.pg10-nav{
  position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100vh;
  background:var(--pg10-bg-alt);z-index:9999;padding:2rem 1.4rem;overflow-y:auto;
  transition:right .3s ease;box-shadow:-4px 0 24px rgba(0,0,0,.5);
}
.pg10-nav.open{right:0}
.pg10-nav-title{font-size:1.6rem;color:var(--pg10-gold);margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--pg10-line)}
.pg10-nav a{display:flex;align-items:center;gap:.8rem;padding:1rem;color:var(--pg10-text);font-size:1.35rem;border-radius:10px;transition:background .2s}
.pg10-nav a:hover{background:rgba(65,105,225,.18)}
.pg10-nav a i{width:22px;color:var(--pg10-accent)}
.pg10-nav-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer}
.pg10-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;opacity:0;visibility:hidden;transition:opacity .3s}
.pg10-overlay.open{opacity:1;visibility:visible}

/* Hero / Carousel */
.pg10-hero{padding:1.2rem}
.pg10-carousel{position:relative;border-radius:var(--pg10-radius);overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pg10-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pg10-slides::-webkit-scrollbar{display:none}
.pg10-slide{min-width:100%;scroll-snap-align:center;position:relative}
.pg10-slide img{width:100%;height:200px;object-fit:cover}
.pg10-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);color:#fff;font-size:1.3rem;font-weight:700}
.pg10-slide-cap a{color:var(--pg10-gold)}
.pg10-dots{display:flex;justify-content:center;gap:.5rem;padding:.6rem 0}
.pg10-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer}
.pg10-dot.active{background:var(--pg10-accent);width:22px;border-radius:4px}

/* H1 section */
.pg10-h1-wrap{padding:1.5rem 1.2rem;text-align:center;background:linear-gradient(135deg,var(--pg10-primary),var(--pg10-bg-alt))}
.pg10-h1-wrap h1{color:#fff}
.pg10-h1-wrap p{color:var(--pg10-muted);margin-top:.5rem}

/* Game grid */
.pg10-cat-title{display:flex;align-items:center;gap:.6rem;padding:1.4rem 1.2rem .6rem}
.pg10-cat-title i{color:var(--pg10-gold)}
.pg10-cat-title h2{margin:0;color:#fff;font-size:1.7rem}
.pg10-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.4rem 1.2rem 1rem}
.pg10-card{
  background:var(--pg10-card);border:1px solid var(--pg10-line);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:transform .2s, box-shadow .2s;text-align:center
}
.pg10-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(65,105,225,.35)}
.pg10-card img{width:100%;height:78px;object-fit:cover}
.pg10-card-name{font-size:1.1rem;padding:.4rem .3rem .5rem;color:var(--pg10-text);min-height:32px;line-height:1.2rem}

/* Info modules */
.pg10-box{background:var(--pg10-card);border:1px solid var(--pg10-line);border-radius:var(--pg10-radius);padding:1.4rem;margin:1rem 1.2rem}
.pg10-box h2,.pg10-box h3{color:#fff}
.pg10-box ul{padding-left:1.4rem;color:var(--pg10-muted);font-size:1.35rem}
.pg10-box li{margin-bottom:.5rem}
.pg10-features{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:.8rem}
.pg10-feature{background:rgba(65,105,225,.08);border-radius:10px;padding:1rem;text-align:center}
.pg10-feature i{font-size:2.2rem;color:var(--pg10-accent);margin-bottom:.4rem}
.pg10-feature b{display:block;color:#fff;font-size:1.25rem;margin-bottom:.2rem}
.pg10-feature span{font-size:1.1rem;color:var(--pg10-muted);line-height:1.3rem}

/* Testimonials */
.pg10-testimonials{display:grid;grid-template-columns:1fr;gap:.8rem}
.pg10-testimonial{background:rgba(255,255,255,.04);border-left:3px solid var(--pg10-gold);border-radius:8px;padding:1rem}
.pg10-testimonial b{color:var(--pg10-gold);font-size:1.2rem}
.pg10-testimonial p{font-size:1.25rem;margin-bottom:.4rem;color:var(--pg10-text)}
.pg10-stars{color:var(--pg10-gold);font-size:1.1rem}

/* Payment chips */
.pg10-payments{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.pg10-pay{background:rgba(255,255,255,.06);border:1px solid var(--pg10-line);border-radius:999px;padding:.5rem 1rem;font-size:1.1rem;color:var(--pg10-text)}

/* Winners */
.pg10-winners{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.pg10-winner{background:rgba(65,105,225,.08);border-radius:8px;padding:.7rem;text-align:center}
.pg10-winner b{color:var(--pg10-gold);font-size:1.2rem;display:block}
.pg10-winner span{font-size:1.05rem;color:var(--pg10-muted)}

/* CTA */
.pg10-cta{margin:1.4rem 1.2rem;padding:1.8rem;border-radius:var(--pg10-radius);text-align:center;background:linear-gradient(135deg,var(--pg10-accent),var(--pg10-secondary));color:#fff}
.pg10-cta h2{color:#fff;margin-bottom:.6rem}
.pg10-cta p{color:rgba(255,255,255,.85)}
.pg10-cta .pg10-btn{margin-top:.6rem}

/* Footer */
.pg10-footer{background:var(--pg10-primary);padding:2rem 1.2rem 6.5rem;border-top:1px solid var(--pg10-line)}
.pg10-footer-brand{color:var(--pg10-muted);font-size:1.25rem;margin-bottom:1rem;line-height:1.6rem}
.pg10-footer-links{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-bottom:1rem}
.pg10-footer-links a{color:var(--pg10-muted);font-size:1.2rem}
.pg10-footer-links a:hover{color:var(--pg10-gold)}
.pg10-footer-promo{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.pg10-footer-promo .pg10-btn{font-size:1.15rem;padding:.7rem 1.1rem;min-height:40px}
.pg10-footer-copy{font-size:1.1rem;color:var(--pg10-muted);border-top:1px solid var(--pg10-line);padding-top:1rem}

/* Bottom nav */
.pg10-bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:60px;background:var(--pg10-primary);
  border-top:1px solid var(--pg10-line);display:flex;justify-content:space-around;align-items:center;
  z-index:1000;padding:.2rem;
}
.pg10-bottom-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:60px;min-height:56px;color:var(--pg10-muted);font-size:1rem;gap:.2rem;
  transition:color .2s, transform .2s;border-radius:10px;
}
.pg10-bottom-nav a i{font-size:2.2rem}
.pg10-bottom-nav a.active,.pg10-bottom-nav a:hover{color:var(--pg10-gold);transform:translateY(-2px)}

/* Desktop */
@media (min-width:769px){
  .pg10-bottom-nav{display:none}
  .pg10-footer{padding-bottom:2rem}
}
@media (max-width:768px){
  main{padding-bottom:80px}
}