/* ============================================================
   jljl77.homes - Core theme stylesheet
   Prefix: pg8a-
   Palette: #2D2D2D | #BBBBBB | #FFCC02 | #36454F | #FFF176 | #C0C0C0
   ============================================================ */

:root{
  --pg8a-bg:#2D2D2D;
  --pg8a-bg-soft:#36454F;
  --pg8a-text:#FFFFFF;
  --pg8a-text-muted:#BBBBBB;
  --pg8a-primary:#FFCC02;
  --pg8a-accent:#FFF176;
  --pg8a-silver:#C0C0C0;
  --pg8a-dark:#1c1c1c;
  --pg8a-line:rgba(255,255,255,0.08);
  --pg8a-shadow:0 4px 18px rgba(0,0,0,0.45);
  --pg8a-radius:12px;
  --pg8a-header-h:56px;
  --pg8a-bottomnav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  font-family:"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  background:var(--pg8a-bg);
  color:var(--pg8a-text);
  line-height:1.5rem;
  font-size:1.5rem;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--pg8a-primary);text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* ---------- Layout ---------- */
.pg8a-container{width:100%;padding:0 1.2rem;}
.pg8a-wrapper{padding-top:var(--pg8a-header-h);padding-bottom:calc(var(--pg8a-bottomnav-h) + 2rem);}
.pg8a-section{padding:2rem 1.2rem;}
.pg8a-section-alt{background:var(--pg8a-bg-soft);}

/* ---------- Header ---------- */
.pg8a-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(90deg,#1c1c1c,#36454F);
  border-bottom:2px solid var(--pg8a-primary);
  max-width:430px;margin:0 auto;
}
.pg8a-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--pg8a-header-h);padding:0 1rem;
}
.pg8a-logo{display:flex;align-items:center;gap:.6rem;color:var(--pg8a-text);font-weight:700;font-size:1.7rem;}
.pg8a-logo img{width:28px;height:28px;border-radius:6px;}
.pg8a-logo span{color:var(--pg8a-primary);}
.pg8a-header-actions{display:flex;align-items:center;gap:.5rem;}
.pg8a-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:36px;padding:0 1.2rem;border:none;border-radius:20px;
  font-size:1.3rem;font-weight:700;cursor:pointer;transition:transform .15s,opacity .15s;
}
.pg8a-btn:active{transform:scale(.96);}
.pg8a-btn-primary{background:var(--pg8a-primary);color:#1c1c1c;}
.pg8a-btn-secondary{background:transparent;color:var(--pg8a-text);border:1px solid var(--pg8a-silver);}
.pg8a-btn-ghost{background:var(--pg8a-bg-soft);color:var(--pg8a-primary);}
.pg8a-menu-toggle{
  background:transparent;border:none;color:var(--pg8a-text);
  font-size:2rem;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
}

/* ---------- Mobile dropdown menu ---------- */
.pg8a-mobile-menu{
  position:fixed;top:var(--pg8a-header-h);left:0;right:0;z-index:9999;
  background:#1c1c1c;border-bottom:1px solid var(--pg8a-line);
  max-width:430px;margin:0 auto;
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.pg8a-mobile-menu.open{max-height:480px;}
.pg8a-mobile-menu a{
  display:block;padding:1.1rem 1.4rem;color:var(--pg8a-text);
  border-bottom:1px solid var(--pg8a-line);font-size:1.4rem;
}
.pg8a-mobile-menu a:active{background:var(--pg8a-bg-soft);}

/* ---------- Hero / Carousel ---------- */
.pg8a-hero{padding:1.2rem;}
.pg8a-carousel{position:relative;border-radius:var(--pg8a-radius);overflow:hidden;box-shadow:var(--pg8a-shadow);}
.pg8a-slides{display:flex;transition:transform .4s ease;}
.pg8a-slide{min-width:100%;position:relative;cursor:pointer;}
.pg8a-slide img{width:100%;height:180px;object-fit:cover;}
.pg8a-slide-caption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.75));color:var(--pg8a-text);
}
.pg8a-slide-caption strong{color:var(--pg8a-primary);font-size:1.6rem;display:block;}
.pg8a-dots{display:flex;justify-content:center;gap:.5rem;padding:.8rem 0;}
.pg8a-dot{width:8px;height:8px;border-radius:50%;background:var(--pg8a-silver);cursor:pointer;}
.pg8a-dot.active{background:var(--pg8a-primary);width:20px;border-radius:4px;}

/* ---------- Headings ---------- */
.pg8a-h1{font-size:2.2rem;line-height:1.4;color:var(--pg8a-text);margin:1rem 0 .6rem;}
.pg8a-h1 b{color:var(--pg8a-primary);}
.pg8a-section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:1.6rem 0 1rem;
}
.pg8a-section-title h2{font-size:1.8rem;color:var(--pg8a-primary);}
.pg8a-section-title .pg8a-more{font-size:1.2rem;color:var(--pg8a-accent);}

/* ---------- Filter chips ---------- */
.pg8a-filters{display:flex;gap:.6rem;overflow-x:auto;padding:.5rem 0 1rem;-webkit-overflow-scrolling:touch;}
.pg8a-chip{
  flex:0 0 auto;padding:.6rem 1.2rem;border-radius:18px;
  background:var(--pg8a-bg-soft);color:var(--pg8a-text-muted);
  font-size:1.2rem;cursor:pointer;border:1px solid var(--pg8a-line);white-space:nowrap;
}
.pg8a-chip.active{background:var(--pg8a-primary);color:#1c1c1c;font-weight:700;}

/* ---------- Game grid ---------- */
.pg8a-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
}
.pg8a-card{
  background:var(--pg8a-bg-soft);border-radius:var(--pg8a-radius);
  overflow:hidden;cursor:pointer;border:1px solid var(--pg8a-line);
  transition:transform .15s;
}
.pg8a-card:active{transform:scale(.97);}
.pg8a-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#222;}
.pg8a-card-name{padding:.6rem;font-size:1.1rem;color:var(--pg8a-text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Promo banner ---------- */
.pg8a-promo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:linear-gradient(90deg,#FFCC02,#FFF176);
  color:#1c1c1c;border-radius:var(--pg8a-radius);padding:1.2rem;margin:1.2rem 0;
}
.pg8a-promo-text{font-weight:700;font-size:1.5rem;}
.pg8a-promo-text small{display:block;font-weight:500;font-size:1.1rem;color:#36454F;}
.pg8a-promo .pg8a-btn{background:#1c1c1c;color:var(--pg8a-primary);}

/* ---------- SEO content ---------- */
.pg8a-seo{padding:1.6rem 1.2rem;color:var(--pg8a-text-muted);font-size:1.35rem;}
.pg8a-seo h2{color:var(--pg8a-text);font-size:1.7rem;margin:1.2rem 0 .6rem;}
.pg8a-seo h3{color:var(--pg8a-primary);font-size:1.45rem;margin:1rem 0 .4rem;}
.pg8a-seo p{margin:.6rem 0;}
.pg8a-seo a{font-weight:700;}
.pg8a-faq{padding:1.6rem 1.2rem;}
.pg8a-faq details{
  background:var(--pg8a-bg-soft);border-radius:8px;padding:1rem;margin-bottom:.6rem;
  border:1px solid var(--pg8a-line);
}
.pg8a-faq summary{font-weight:700;color:var(--pg8a-primary);cursor:pointer;font-size:1.35rem;}
.pg8a-faq details[open] summary{margin-bottom:.5rem;}

/* ---------- Footer ---------- */
.pg8a-footer{
  background:#1c1c1c;border-top:2px solid var(--pg8a-primary);
  padding:2rem 1.2rem calc(var(--pg8a-bottomnav-h) + 2rem);color:var(--pg8a-text-muted);
}
.pg8a-footer p{margin:.6rem 0;font-size:1.25rem;}
.pg8a-footer-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0;}
.pg8a-footer-links a{
  flex:1 1 45%;text-align:center;background:var(--pg8a-bg-soft);color:var(--pg8a-primary);
  padding:.7rem;border-radius:8px;font-size:1.2rem;border:1px solid var(--pg8a-line);
}
.pg8a-footer-sitemap{display:flex;flex-direction:column;gap:.4rem;margin:1rem 0;}
.pg8a-footer-sitemap a{color:var(--pg8a-silver);font-size:1.2rem;}
.pg8a-footer-sitemap a:hover{color:var(--pg8a-primary);}
.pg8a-copy{text-align:center;font-size:1.1rem;color:var(--pg8a-text-muted);margin-top:1rem;border-top:1px solid var(--pg8a-line);padding-top:1rem;}

/* ---------- Bottom nav ---------- */
.pg8a-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  height:var(--pg8a-bottomnav-h);max-width:430px;margin:0 auto;
  background:linear-gradient(180deg,#36454F,#1c1c1c);
  border-top:2px solid var(--pg8a-primary);
  display:flex;justify-content:space-around;align-items:center;
}
.pg8a-bottomnav button,.pg8a-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--pg8a-silver);
  font-size:1rem;gap:.2rem;cursor:pointer;height:100%;min-width:60px;min-height:60px;
  transition:color .15s,transform .15s;text-decoration:none;
}
.pg8a-bottomnav button:active,.pg8a-bottomnav a:active{transform:scale(.9);}
.pg8a-bottomnav .pg8a-bn-ico{font-size:2.2rem;line-height:1;}
.pg8a-bottomnav .material-icons.pg8a-bn-ico{font-size:2.4rem;}
.pg8a-bottomnav .pg8a-bn-label{font-size:1rem;}
.pg8a-bottomnav .active{color:var(--pg8a-primary);}
.pg8a-bottomnav .pg8a-bn-badge{
  position:absolute;top:6px;right:22%;background:#e53935;color:#fff;
  font-size:.9rem;padding:0 5px;border-radius:8px;min-width:16px;text-align:center;
}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .pg8a-bottomnav{display:none;}
  body{max-width:768px;}
}
@media (max-width:768px){
  main{padding-bottom:80px;}
}