/* ============================================================
   tableplus link - design stylesheet
   Prefix: pg3b-
   Palette: #FF69B4 (pink) | #FFB3FF (light pink) | #1A1A2E (deep navy)
   ============================================================ */

:root{
  --pg3b-pink:#FF69B4;
  --pg3b-pink-soft:#FFB3FF;
  --pg3b-navy:#1A1A2E;
  --pg3b-navy-2:#23234a;
  --pg3b-navy-3:#2d2d5a;
  --pg3b-gold:#FFD86B;
  --pg3b-text:#FFFFFF;
  --pg3b-muted:#c9c4e0;
  --pg3b-line:rgba(255,179,255,.18);
  --pg3b-shadow:0 10px 28px rgba(0,0,0,.32);
  --pg3b-radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:62.5%;-webkit-text-size-adjust:100%;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(circle at 20% 0%,#2a1a4a 0%,var(--pg3b-navy) 55%);
  color:var(--pg3b-text);
  line-height:1.5rem;
  font-size:1.5rem;
  overflow-x:hidden;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
}
img{max-width:100%;display:block;}
a{color:var(--pg3b-pink-soft);text-decoration:none;}
a:hover{color:#fff;}

/* ---------- Header ---------- */
.pg3b-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;
  background:linear-gradient(135deg,rgba(26,26,46,.96),rgba(35,35,74,.96));
  border-bottom:1px solid var(--pg3b-line);
  backdrop-filter:blur(8px);
}
.pg3b-logo{display:flex;align-items:center;gap:.6rem;}
.pg3b-logo-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--pg3b-pink),var(--pg3b-pink-soft));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;
  box-shadow:0 4px 12px rgba(255,105,180,.45);
}
.pg3b-logo-text{font-size:1.7rem;font-weight:800;letter-spacing:.3px;color:#fff;}
.pg3b-logo-text span{color:var(--pg3b-pink-soft);}
.pg3b-header-actions{display:flex;align-items:center;gap:.5rem;}
.pg3b-btn{
  border:0;cursor:pointer;font-weight:700;font-size:1.3rem;
  padding:.7rem 1.2rem;border-radius:30px;transition:transform .15s ease,box-shadow .15s ease;
  min-height:38px;display:inline-flex;align-items:center;gap:.4rem;
}
.pg3b-btn:active{transform:scale(.95);}
.pg3b-btn-login{
  background:transparent;color:#fff;border:1px solid var(--pg3b-pink-soft);
}
.pg3b-btn-register{
  background:linear-gradient(135deg,var(--pg3b-pink),var(--pg3b-pink-soft));
  color:var(--pg3b-navy);box-shadow:0 6px 14px rgba(255,105,180,.45);
}
.pg3b-icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--pg3b-line);
  background:rgba(255,255,255,.05);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* ---------- Top sticky nav (categories) ---------- */
.pg3b-topnav{
  position:sticky;top:55px;z-index:900;
  display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 1rem;
  background:rgba(26,26,46,.88);border-bottom:1px solid var(--pg3b-line);
  scrollbar-width:none;
}
.pg3b-topnav::-webkit-scrollbar{display:none;}
.pg3b-topnav a{
  flex:0 0 auto;padding:.5rem 1rem;border-radius:20px;font-size:1.25rem;font-weight:600;
  color:var(--pg3b-muted);background:rgba(255,255,255,.04);border:1px solid transparent;white-space:nowrap;
}
.pg3b-topnav a.active,.pg3b-topnav a:hover{color:#fff;background:rgba(255,105,180,.22);border-color:var(--pg3b-pink);}

/* ---------- Mobile menu ---------- */
.pg3b-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.pg3b-menu-backdrop.open{opacity:1;visibility:visible;}
.pg3b-menu{
  position:fixed;top:0;right:-86%;width:86%;max-width:340px;height:100%;z-index:9999;
  background:linear-gradient(180deg,#23234a,#1A1A2E);
  padding:1.6rem 1.2rem;overflow-y:auto;transition:right .28s ease;
  border-left:1px solid var(--pg3b-line);
}
.pg3b-menu.open{right:0;}
.pg3b-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem;}
.pg3b-menu-title{font-size:1.7rem;font-weight:800;color:#fff;}
.pg3b-menu-close{background:transparent;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1;}
.pg3b-menu-section{margin-bottom:1.4rem;}
.pg3b-menu-section h4{
  font-size:1.2rem;color:var(--pg3b-pink-soft);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.6rem;
}
.pg3b-menu-section a{
  display:block;padding:.7rem .6rem;border-radius:8px;font-size:1.35rem;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.pg3b-menu-section a:hover{background:rgba(255,105,180,.15);}

/* ---------- Hero / Carousel ---------- */
.pg3b-main{padding:0 0 80px;}
.pg3b-hero{
  position:relative;margin:1rem;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#3a1a55,#1A1A2E);border:1px solid var(--pg3b-line);
}
.pg3b-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.pg3b-carousel::-webkit-scrollbar{display:none;}
.pg3b-slide{
  flex:0 0 100%;scroll-snap-align:center;padding:1.6rem;position:relative;min-height:200px;
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;
}
.pg3b-slide-tag{
  display:inline-block;width:max-content;padding:.3rem .8rem;border-radius:14px;font-size:1.1rem;font-weight:700;
  background:rgba(255,216,107,.18);color:var(--pg3b-gold);border:1px solid rgba(255,216,107,.4);
}
.pg3b-slide h1,.pg3b-slide h2{font-size:2.2rem;line-height:1.25;color:#fff;}
.pg3b-slide p{font-size:1.3rem;color:var(--pg3b-muted);}
.pg3b-slide .pg3b-btn{margin-top:.5rem;width:max-content;}
.pg3b-carousel-dots{display:flex;gap:.5rem;justify-content:center;padding:.6rem 0 1rem;}
.pg3b-carousel-dots span{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;
}
.pg3b-carousel-dots span.active{background:var(--pg3b-pink);width:18px;border-radius:6px;}

/* ---------- Section ---------- */
.pg3b-section{padding:1.4rem 1rem;}
.pg3b-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.pg3b-section-title{
  font-size:1.7rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:.5rem;
}
.pg3b-section-title i{color:var(--pg3b-pink);}
.pg3b-section-link{font-size:1.2rem;color:var(--pg3b-pink-soft);font-weight:600;}

/* ---------- Game grid ---------- */
.pg3b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.pg3b-card{
  background:linear-gradient(160deg,#2c2c58,#1f1f40);border:1px solid var(--pg3b-line);
  border-radius:var(--pg3b-radius);overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
  display:flex;flex-direction:column;
}
.pg3b-card:active{transform:scale(.96);}
.pg3b-card:hover{box-shadow:var(--pg3b-shadow);border-color:var(--pg3b-pink);}
.pg3b-card-img{
  position:relative;aspect-ratio:1/1;background:#000;overflow:hidden;
}
.pg3b-card-img img{width:100%;height:100%;object-fit:cover;}
.pg3b-card-badge{
  position:absolute;top:5px;left:5px;font-size:1rem;font-weight:700;padding:.15rem .45rem;border-radius:6px;
  background:rgba(255,105,180,.9);color:#fff;
}
.pg3b-card-body{padding:.5rem .55rem;text-align:center;}
.pg3b-card-title{font-size:1.15rem;color:#fff;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pg3b-card-cta{
  margin:.35rem 0 .5rem;font-size:1.05rem;font-weight:700;color:var(--pg3b-navy);
  background:linear-gradient(135deg,var(--pg3b-pink),var(--pg3b-pink-soft));border-radius:8px;padding:.3rem 0;
}
.pg3b-card.featured{grid-column:span 1;}

/* ---------- Category filter chips ---------- */
.pg3b-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.pg3b-chip{
  padding:.45rem .9rem;border-radius:20px;font-size:1.15rem;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--pg3b-muted);border:1px solid var(--pg3b-line);
}
.pg3b-chip.active{background:var(--pg3b-pink);color:#fff;border-color:var(--pg3b-pink);}

/* ---------- Featured / promo strip ---------- */
.pg3b-promo{
  display:flex;gap:.8rem;align-items:center;background:linear-gradient(135deg,#3a1a55,#2c1a3a);
  border:1px solid var(--pg3b-line);border-radius:18px;padding:1.1rem;margin:1rem;
}
.pg3b-promo-icon{
  flex:0 0 56px;width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--pg3b-gold),var(--pg3b-pink));
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff;
}
.pg3b-promo-body h3{font-size:1.45rem;color:#fff;margin-bottom:.25rem;}
.pg3b-promo-body p{font-size:1.2rem;color:var(--pg3b-muted);}

/* ---------- Long-form SEO content ---------- */
.pg3b-article{padding:1.4rem 1rem;}
.pg3b-article h2{font-size:1.9rem;color:#fff;margin:1.2rem 0 .6rem;}
.pg3b-article h3{font-size:1.5rem;color:var(--pg3b-pink-soft);margin:1rem 0 .4rem;}
.pg3b-article p{font-size:1.35rem;color:var(--pg3b-muted);margin-bottom:.7rem;line-height:1.65;}
.pg3b-article ul{margin:.4rem 0 .9rem 1.4rem;}
.pg3b-article li{font-size:1.3rem;color:var(--pg3b-muted);margin-bottom:.35rem;line-height:1.55;}
.pg3b-article ol{margin:.4rem 0 .9rem 1.4rem;}
.pg3b-article a{font-weight:700;text-decoration:underline;text-decoration-color:var(--pg3b-pink);}
.pg3b-callout{
  background:rgba(255,105,180,.1);border-left:3px solid var(--pg3b-pink);
  padding:.8rem 1rem;border-radius:8px;margin:.8rem 0;
}

/* ---------- FAQ ---------- */
.pg3b-faq{padding:1.4rem 1rem;}
.pg3b-faq-item{
  background:#23234a;border:1px solid var(--pg3b-line);border-radius:12px;margin-bottom:.6rem;overflow:hidden;
}
.pg3b-faq-q{
  width:100%;text-align:left;background:transparent;border:0;color:#fff;font-size:1.3rem;font-weight:700;
  padding:.9rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.6rem;
}
.pg3b-faq-q .pg3b-faq-ico{color:var(--pg3b-pink);transition:transform .2s ease;}
.pg3b-faq-item.open .pg3b-faq-ico{transform:rotate(45deg);}
.pg3b-faq-a{
  max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 1rem;color:var(--pg3b-muted);font-size:1.25rem;
}
.pg3b-faq-item.open .pg3b-faq-a{max-height:400px;padding:.2rem 1rem .9rem;}

/* ---------- Footer ---------- */
.pg3b-footer{
  background:#15152a;border-top:1px solid var(--pg3b-line);padding:1.6rem 1rem 2.2rem;
}
.pg3b-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem;}
.pg3b-footer-col h4{font-size:1.2rem;color:var(--pg3b-pink-soft);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;}
.pg3b-footer-col a{display:block;font-size:1.2rem;color:var(--pg3b-muted);padding:.25rem 0;}
.pg3b-footer-bottom{
  text-align:center;font-size:1.1rem;color:#7d7a99;padding-top:1rem;border-top:1px solid rgba(255,255,255,.05);
}
.pg3b-footer-warn{
  font-size:1.05rem;color:#8a87a8;background:rgba(255,255,255,.03);border-radius:8px;padding:.7rem;margin-bottom:.8rem;line-height:1.5;
}

/* ---------- Bottom nav ---------- */
.pg3b-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  max-width:430px;margin:0 auto;
  display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(180deg,rgba(35,35,74,.96),rgba(21,21,42,.99));
  border-top:1px solid var(--pg3b-line);backdrop-filter:blur(10px);
  height:62px;padding:0 .2rem;
}
.pg3b-bottomnav-btn{
  flex:1;min-width:60px;min-height:60px;background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--pg3b-muted);
  font-size:1.05rem;font-weight:600;
}
.pg3b-bottomnav-btn .material-symbols-outlined,
.pg3b-bottomnav-btn i{font-size:24px;}
.pg3b-bottomnav-btn.active{color:var(--pg3b-pink);}
.pg3b-bottomnav-btn.featured{
  position:relative;top:-14px;
  width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  background:linear-gradient(135deg,var(--pg3b-pink),var(--pg3b-pink-soft));color:#fff;
  box-shadow:0 6px 16px rgba(255,105,180,.55);border:2px solid rgba(255,255,255,.15);
}
.pg3b-bottomnav-btn.featured i{font-size:26px;}
.pg3b-bottomnav-btn:active{transform:scale(.92);}

/* ---------- Floating CTA ---------- */
.pg3b-fab{
  position:fixed;right:1rem;bottom:78px;z-index:1000;
  background:linear-gradient(135deg,var(--pg3b-pink),var(--pg3b-pink-soft));
  color:var(--pg3b-navy);font-weight:800;font-size:1.2rem;
  padding:.7rem 1.1rem;border-radius:30px;box-shadow:0 8px 18px rgba(255,105,180,.5);
  border:0;cursor:pointer;display:flex;align-items:center;gap:.4rem;
}

/* ---------- Utilities ---------- */
.pg3b-container{padding:0 1rem;}
.pg3b-hide-desktop{}
.pg3b-pill{
  display:inline-block;padding:.25rem .65rem;border-radius:10px;font-size:1.05rem;font-weight:700;
  background:rgba(255,105,180,.2);color:var(--pg3b-pink-soft);border:1px solid rgba(255,105,180,.4);
}
.pg3b-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem;}
.pg3b-stat{
  background:#23234a;border:1px solid var(--pg3b-line);border-radius:12px;padding:.8rem;text-align:center;
}
.pg3b-stat b{display:block;font-size:1.7rem;color:var(--pg3b-gold);}
.pg3b-stat span{font-size:1.1rem;color:var(--pg3b-muted);}

/* ---------- Desktop hide rules ---------- */
@media (min-width:769px){
  .pg3b-bottomnav{display:none;}
  .pg3b-fab{display:none;}
  .pg3b-main{padding-bottom:20px;}
}
@media (max-width:768px){
  .pg3b-main{padding-bottom:80px;}
}