/* ============================================================
   Arion Plus - theme.css
   Mobile-first HTML5 gaming site (en-PH)
   Prefix: pgc4-
   Palette: #1E1E1E | #FFC0CB | #7CFC00 | #98FB98 | #DB7093
   ============================================================ */

:root{
  --pgc4-bg: #1E1E1E;
  --pgc4-bg-2: #262626;
  --pgc4-bg-3: #303030;
  --pgc4-pink: #FFC0CB;
  --pgc4-lime: #7CFC00;
  --pgc4-mint: #98FB98;
  --pgc4-rose: #DB7093;
  --pgc4-text: #F5F5F5;
  --pgc4-text-dim: #C9C9C9;
  --pgc4-muted: #8A8A8A;
  --pgc4-border: rgba(255,192,203,.18);
  --pgc4-shadow: 0 6px 24px rgba(0,0,0,.45);
  --pgc4-radius: 14px;
  --pgc4-radius-lg: 22px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html{ font-size:62.5%; } /* 1rem = 10px */
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(219,112,147,.18), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(124,252,0,.08), transparent 55%),
              var(--pgc4-bg);
  color: var(--pgc4-text);
  line-height: 1.5;
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color: var(--pgc4-pink); text-decoration:none; }
a:hover{ color: var(--pgc4-mint); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Layout ---------- */
.pgc4-wrap{ width:100%; max-width:430px; margin:0 auto; min-height:100vh; position:relative; background:var(--pgc4-bg); }
.pgc4-container{ width:100%; max-width:430px; margin:0 auto; padding:0 14px; }
main{ padding-bottom:80px; }

/* ---------- Header ---------- */
.pgc4-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: linear-gradient(180deg, rgba(30,30,30,.96), rgba(30,30,30,.86));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pgc4-border);
}
.pgc4-header-inner{
  max-width:430px; margin:0 auto; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pgc4-logo{ display:flex; align-items:center; gap:8px; min-width:0; }
.pgc4-logo img{ width:34px; height:34px; border-radius:8px; }
.pgc4-logo-text{ font-weight:800; font-size:1.8rem; color:var(--pgc4-pink); letter-spacing:.3px; white-space:nowrap; }
.pgc4-logo-text small{ display:block; font-size:1rem; font-weight:500; color:var(--pgc4-mint); }
.pgc4-header-actions{ display:flex; align-items:center; gap:8px; }
.pgc4-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px;
  font-size:1.35rem; font-weight:700;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
  white-space:nowrap;
}
.pgc4-btn:active{ transform:scale(.96); }
.pgc4-btn-login{
  background: transparent; color:var(--pgc4-pink);
  border:1.5px solid var(--pgc4-pink);
}
.pgc4-btn-login:hover{ background: rgba(255,192,203,.12); }
.pgc4-btn-register{
  background: linear-gradient(90deg, var(--pgc4-rose), var(--pgc4-pink));
  color:#1E1E1E; font-weight:800;
  box-shadow: 0 4px 14px rgba(219,112,147,.4);
}
.pgc4-btn-register:hover{ box-shadow: 0 6px 18px rgba(255,192,203,.5); }

/* ---------- Hero / Carousel ---------- */
.pgc4-hero{ margin-top:60px; padding:18px 0 4px; }
.pgc4-hero-card{
  border-radius: var(--pgc4-radius-lg);
  padding:22px 18px;
  background:
    radial-gradient(220px 120px at 80% 10%, rgba(124,252,0,.18), transparent 60%),
    linear-gradient(135deg, #2a1d24, #1E1E1E);
  border:1px solid var(--pgc4-border);
  box-shadow: var(--pgc4-shadow);
  position:relative; overflow:hidden;
}
.pgc4-hero-badge{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(124,252,0,.16); color: var(--pgc4-lime);
  font-size:1.15rem; font-weight:700; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(124,252,0,.3);
}
.pgc4-hero h1{ font-size:2.7rem; line-height:1.2; margin:10px 0; color:var(--pgc4-text); }
.pgc4-hero h1 b{ color: var(--pgc4-pink); }
.pgc4-hero p{ color: var(--pgc4-text-dim); font-size:1.4rem; margin-bottom:14px; }
.pgc4-hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.pgc4-cta-primary{
  background: linear-gradient(90deg, var(--pgc4-rose), var(--pgc4-pink));
  color:#1E1E1E; font-weight:800; padding:12px 20px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 4px 14px rgba(219,112,147,.4);
}
.pgc4-cta-secondary{
  background: rgba(152,251,152,.1); color: var(--pgc4-mint);
  border:1px solid rgba(152,251,152,.4); font-weight:700; padding:12px 18px; border-radius:999px;
}
.pgc4-hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.pgc4-stat{
  background: rgba(255,255,255,.04); border:1px solid var(--pgc4-border);
  border-radius:12px; padding:10px; text-align:center;
}
.pgc4-stat b{ display:block; color: var(--pgc4-lime); font-size:1.7rem; }
.pgc4-stat span{ font-size:1.1rem; color: var(--pgc4-muted); }

/* Carousel dots */
.pgc4-hero-carousel{ position:relative; }
.pgc4-dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.pgc4-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .2s, width .2s; }
.pgc4-dots span.active{ background: var(--pgc4-pink); width:22px; border-radius:8px; }

/* ---------- Section title ---------- */
.pgc4-section{ margin:22px 0; }
.pgc4-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pgc4-section-title{ font-size:1.9rem; font-weight:800; display:flex; align-items:center; gap:8px; }
.pgc4-section-title i{ color: var(--pgc4-pink); }
.pgc4-section-title b{ color: var(--pgc4-pink); }
.pgc4-section-link{ font-size:1.2rem; color: var(--pgc4-mint); font-weight:600; }

/* ---------- Category tabs ---------- */
.pgc4-tabs{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:none;
}
.pgc4-tabs::-webkit-scrollbar{ display:none; }
.pgc4-tab{
  flex:0 0 auto; padding:8px 14px; border-radius:999px;
  background: var(--pgc4-bg-2); color: var(--pgc4-text-dim);
  font-size:1.3rem; font-weight:700; border:1px solid transparent;
  white-space:nowrap;
}
.pgc4-tab.active{
  background: linear-gradient(90deg, var(--pgc4-rose), var(--pgc4-pink));
  color:#1E1E1E; border-color: var(--pgc4-pink);
}

/* ---------- Game grid ---------- */
.pgc4-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pgc4-card{
  position:relative; border-radius: var(--pgc4-radius);
  overflow:hidden; background: var(--pgc4-bg-2);
  border:1px solid var(--pgc4-border); transition: transform .15s ease, border-color .2s;
}
.pgc4-card:active{ transform: scale(.97); }
.pgc4-card-img{ aspect-ratio:1/1; background: linear-gradient(135deg,#1a1a1a,#2a2a2a); }
.pgc4-card-img img{ width:100%; height:100%; object-fit:cover; }
.pgc4-card-body{ padding:8px 10px; }
.pgc4-card-name{
  font-size:1.15rem; font-weight:600; color: var(--pgc4-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pgc4-card-tag{
  position:absolute; top:6px; left:6px;
  background: rgba(219,112,147,.92); color:#fff;
  font-size:1rem; font-weight:700; padding:2px 8px; border-radius:6px;
}
.pgc4-card-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(30,30,30,.55); opacity:0; transition:opacity .2s;
}
.pgc4-card:hover .pgc4-card-play{ opacity:1; }
.pgc4-card-play span{
  background: linear-gradient(90deg, var(--pgc4-rose), var(--pgc4-pink));
  color:#1E1E1E; font-weight:800; padding:8px 16px; border-radius:999px; font-size:1.2rem;
}

/* ---------- Panels / info blocks ---------- */
.pgc4-panel{
  border-radius: var(--pgc4-radius-lg); padding:18px;
  background: linear-gradient(135deg, var(--pgc4-bg-2), var(--pgc4-bg-3));
  border:1px solid var(--pgc4-border); box-shadow: var(--pgc4-shadow);
  margin:14px 0;
}
.pgc4-panel h2{ font-size:2rem; margin-bottom:10px; color: var(--pgc4-text); }
.pgc4-panel h2 b{ color: var(--pgc4-pink); }
.pgc4-panel p{ color: var(--pgc4-text-dim); margin-bottom:10px; font-size:1.35rem; }
.pgc4-panel ul{ list-style:none; padding:0; }
.pgc4-panel li{ padding:8px 0; border-bottom:1px dashed var(--pgc4-border); color: var(--pgc4-text-dim); font-size:1.3rem; }
.pgc4-panel li:last-child{ border-bottom:none; }
.pgc4-panel li b{ color: var(--pgc4-mint); }
.pgc4-panel i{ color: var(--pgc4-pink); margin-right:6px; }

/* ---------- Feature list ---------- */
.pgc4-features{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pgc4-feature{
  background: rgba(255,255,255,.04); border:1px solid var(--pgc4-border);
  border-radius:14px; padding:14px;
}
.pgc4-feature .ic{ font-size:2.2rem; color: var(--pgc4-lime); margin-bottom:6px; }
.pgc4-feature h3{ font-size:1.35rem; margin-bottom:4px; }
.pgc4-feature p{ font-size:1.2rem; color: var(--pgc4-muted); line-height:1.45; }

/* ---------- VIP / Club ---------- */
.pgc4-vip{
  border-radius: var(--pgc4-radius-lg); padding:20px;
  background:
    radial-gradient(300px 140px at 20% 0%, rgba(255,192,203,.2), transparent 60%),
    linear-gradient(135deg, #2c1f29, #1E1E1E);
  border:1px solid var(--pgc4-border); margin:14px 0;
}
.pgc4-vip h2{ color: var(--pgc4-pink); font-size:2.1rem; margin-bottom:8px; }
.pgc4-vip p{ color: var(--pgc4-text-dim); font-size:1.35rem; margin-bottom:12px; }
.pgc4-vip-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.pgc4-tier{
  text-align:center; padding:10px 4px; border-radius:12px;
  background: rgba(255,255,255,.04); border:1px solid var(--pgc4-border);
}
.pgc4-tier b{ display:block; font-size:1.2rem; color: var(--pgc4-mint); }
.pgc4-tier span{ font-size:1rem; color: var(--pgc4-muted); }

/* ---------- Promo ---------- */
.pgc4-promo{ display:grid; gap:10px; grid-template-columns:1fr; }
.pgc4-promo-card{
  border-radius:16px; padding:14px;
  background: linear-gradient(135deg, rgba(219,112,147,.18), rgba(124,252,0,.08));
  border:1px solid var(--pgc4-border);
  display:flex; align-items:center; gap:12px;
}
.pgc4-promo-icon{ width:42px; height:42px; border-radius:12px; background: rgba(255,192,203,.15); display:flex; align-items:center; justify-content:center; color: var(--pgc4-pink); font-size:2rem; flex:0 0 auto; }
.pgc4-promo-card h3{ font-size:1.4rem; margin-bottom:2px; color: var(--pgc4-text); }
.pgc4-promo-card p{ font-size:1.2rem; color: var(--pgc4-text-dim); }
.pgc4-promo-card a{ font-size:1.2rem; color: var(--pgc4-lime); font-weight:700; }

/* ---------- Safety / Tips two col ---------- */
.pgc4-twocol{ display:grid; gap:14px; grid-template-columns:1fr; }
.pgc4-tip{
  display:flex; gap:10px; padding:12px; border-radius:14px;
  background: rgba(152,251,152,.06); border:1px solid rgba(152,251,152,.2);
}
.pgc4-tip .ic{ color: var(--pgc4-mint); font-size:2rem; flex:0 0 auto; }
.pgc4-tip h3{ font-size:1.4rem; margin-bottom:2px; color: var(--pgc4-text); }
.pgc4-tip p{ font-size:1.2rem; color: var(--pgc4-text-dim); }

/* ---------- Reviews ---------- */
.pgc4-reviews{ display:grid; gap:10px; }
.pgc4-review{
  border-radius:14px; padding:14px;
  background: var(--pgc4-bg-2); border:1px solid var(--pgc4-border);
}
.pgc4-review-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.pgc4-review-avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--pgc4-rose), var(--pgc4-pink)); display:flex; align-items:center; justify-content:center; color:#1E1E1E; font-weight:800; }
.pgc4-review-name{ font-size:1.3rem; font-weight:700; }
.pgc4-review-stars{ color: var(--pgc4-lime); font-size:1rem; }
.pgc4-review p{ font-size:1.25rem; color: var(--pgc4-text-dim); }

/* ---------- Payments ---------- */
.pgc4-pay{ display:flex; flex-wrap:wrap; gap:8px; }
.pgc4-pay-item{
  flex:1 1 28%; text-align:center; padding:10px 4px; border-radius:12px;
  background: rgba(255,255,255,.04); border:1px solid var(--pgc4-border);
  font-size:1.15rem; color: var(--pgc4-text-dim); font-weight:600;
}
.pgc4-pay-item .ic{ display:block; font-size:1.8rem; color: var(--pgc4-pink); margin-bottom:4px; }

/* ---------- Winners ticker ---------- */
.pgc4-ticker{
  border-radius:12px; overflow:hidden;
  background: var(--pgc4-bg-2); border:1px solid var(--pgc4-border);
  padding:8px 12px; display:flex; align-items:center; gap:8px; margin:14px 0;
}
.pgc4-ticker-label{ color: var(--pgc4-lime); font-weight:800; font-size:1.2rem; white-space:nowrap; }
.pgc4-ticker-track{ overflow:hidden; flex:1; position:relative; }
.pgc4-ticker-list{ display:flex; gap:18px; white-space:nowrap; animation: pgc4scroll 22s linear infinite; }
@keyframes pgc4scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.pgc4-ticker-list span{ color: var(--pgc4-text-dim); font-size:1.15rem; }
.pgc4-ticker-list b{ color: var(--pgc4-pink); }

/* ---------- App download ---------- */
.pgc4-app{
  border-radius: var(--pgc4-radius-lg); padding:20px; text-align:center;
  background:
    radial-gradient(260px 130px at 50% 0%, rgba(124,252,0,.18), transparent 60%),
    linear-gradient(135deg,#1f2620,#1E1E1E);
  border:1px solid var(--pgc4-border); margin:14px 0;
}
.pgc4-app h2{ color: var(--pgc4-mint); font-size:2.1rem; margin-bottom:6px; }
.pgc4-app p{ color: var(--pgc4-text-dim); font-size:1.35rem; margin-bottom:14px; }
.pgc4-app-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pgc4-app-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px;
  background:#0f0f0f; border:1px solid var(--pgc4-border); border-radius:12px;
  color:var(--pgc4-text);
}
.pgc4-app-btn .ic{ font-size:2rem; color: var(--pgc4-pink); }
.pgc4-app-btn b{ font-size:1.4rem; }
.pgc4-app-btn span{ font-size:1rem; color: var(--pgc4-muted); display:block; }

/* ---------- FAQ ---------- */
.pgc4-faq-item{
  border:1px solid var(--pgc4-border); border-radius:12px; overflow:hidden; margin-bottom:8px;
  background: var(--pgc4-bg-2);
}
.pgc4-faq-q{
  width:100%; text-align:left; padding:14px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:1.4rem; font-weight:700; color: var(--pgc4-text);
}
.pgc4-faq-q .ic{ color: var(--pgc4-pink); transition: transform .2s; }
.pgc4-faq-item.open .pgc4-faq-q .ic{ transform: rotate(45deg); }
.pgc4-faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.pgc4-faq-a-inner{ padding:0 14px 14px; color: var(--pgc4-text-dim); font-size:1.25rem; }

/* ---------- CTA final ---------- */
.pgc4-final-cta{
  border-radius: var(--pgc4-radius-lg); padding:24px 18px; text-align:center;
  background: linear-gradient(135deg, var(--pgc4-rose), #b8567a);
  border:1px solid var(--pgc4-border); margin:18px 0;
}
.pgc4-final-cta h2{ color:#1E1E1E; font-size:2.4rem; margin-bottom:6px; }
.pgc4-final-cta p{ color: rgba(30,30,30,.85); font-size:1.4rem; margin-bottom:14px; }
.pgc4-final-cta button{
  background: #1E1E1E; color: var(--pgc4-pink); font-weight:800;
  padding:14px 28px; border-radius:999px; font-size:1.5rem;
}

/* ---------- Footer ---------- */
.pgc4-footer{
  border-top:1px solid var(--pgc4-border);
  padding:22px 14px 26px; background: #181818;
}
.pgc4-footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
.pgc4-footer h3{ font-size:1.4rem; color: var(--pgc4-pink); margin-bottom:8px; }
.pgc4-footer a{ display:block; color: var(--pgc4-text-dim); font-size:1.2rem; padding:3px 0; }
.pgc4-footer a:hover{ color: var(--pgc4-mint); }
.pgc4-footer p{ color: var(--pgc4-muted); font-size:1.15rem; }
.pgc4-footer-bottom{ text-align:center; padding-top:14px; border-top:1px dashed var(--pgc4-border); font-size:1.1rem; color: var(--pgc4-muted); }

/* ---------- Mobile bottom nav ---------- */
.pgc4-bnav{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  max-width:430px; margin:0 auto;
  display:flex; justify-content:space-around; align-items:center;
  height:62px;
  background: linear-gradient(180deg, rgba(38,38,38,.98), rgba(20,20,20,.98));
  border-top:1px solid var(--pgc4-border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.4);
}
.pgc4-bnav-item{
  flex:1 1 0; min-width:60px; min-height:60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color: var(--pgc4-muted); font-size:1rem; font-weight:600;
  transition: color .18s ease, transform .15s ease;
}
.pgc4-bnav-item .ic{ font-size:22px; transition: transform .18s ease, color .18s ease; }
.pgc4-bnav-item.active{ color: var(--pgc4-pink); }
.pgc4-bnav-item.active .ic{ color: var(--pgc4-pink); transform: translateY(-1px) scale(1.08); }
.pgc4-bnav-item:active .ic{ transform: scale(.9); }
.pgc4-bnav-item.promo{ color: var(--pgc4-mint); }
.pgc4-bnav-item.promo .ic{ color: var(--pgc4-mint); }

/* ---------- Mobile menu ---------- */
.pgc4-mmenu{
  position:fixed; top:0; right:-100%; width:80%; max-width:320px;
  height:100vh; z-index:9999; background:#181818;
  padding:70px 18px 30px; transition: right .3s ease;
  border-left:1px solid var(--pgc4-border);
}
.pgc4-mmenu.open{ right:0; }
.pgc4-mmenu a{
  display:block; padding:14px 10px; border-bottom:1px dashed var(--pgc4-border);
  font-size:1.5rem; color: var(--pgc4-text); font-weight:600;
}
.pgc4-mmenu a:hover{ color: var(--pgc4-pink); }
.pgc4-mmenu-close{
  position:absolute; top:14px; right:14px; font-size:2rem; color: var(--pgc4-text);
}
.pgc4-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.5); z-index:9998;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.pgc4-overlay.open{ opacity:1; pointer-events:auto; }

.pgc4-hamburger{
  width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,192,203,.12); border:1px solid var(--pgc4-border);
  color:var(--pgc4-pink); font-size:2.4rem;
}

/* ---------- Utility ---------- */
.pgc4-text-pink{ color: var(--pgc4-pink); }
.pgc4-text-mint{ color: var(--pgc4-mint); }
.pgc4-text-lime{ color: var(--pgc4-lime); }
.pgc4-hide-desktop{ display:block; }

/* ---------- Desktop ---------- */
@media (min-width: 769px){
  .pgc4-bnav{ display:none; }
  .pgc4-wrap{ max-width:960px; box-shadow:0 0 40px rgba(0,0,0,.5); }
  .pgc4-header-inner, .pgc4-container, main{ max-width:960px; }
  .pgc4-grid{ grid-template-columns:repeat(6,1fr); }
  .pgc4-features{ grid-template-columns:repeat(4,1fr); }
  .pgc4-promo{ grid-template-columns:repeat(3,1fr); }
  .pgc4-twocol{ grid-template-columns:repeat(2,1fr); }
  .pgc4-vip-tiers{ grid-template-columns:repeat(4,1fr); }
  .pgc4-footer-cols{ grid-template-columns:repeat(4,1fr); }
  .pgc4-hero h1{ font-size:3.4rem; }
  .pgc4-hamburger{ display:none; }
}

@media (max-width: 768px){
  main{ padding-bottom: 80px; }
}