/* ==========================================================================
   phbingo apk theme stylesheet
   Brand palette: #800080 / #0097A7 / #0D1117 / #34495E / #9932CC
   Class prefix: vc38-
   ========================================================================== */

:root{
  --vc38-purple:#800080;
  --vc38-teal:#0097A7;
  --vc38-dark:#0D1117;
  --vc38-slate:#34495E;
  --vc38-orchid:#9932CC;
  --vc38-gold:#FFD66B;
  --vc38-bg:#0D1117;
  --vc38-bg2:#11151f;
  --vc38-card:#161B27;
  --vc38-card2:#1C2333;
  --vc38-text:#EAF0F7;
  --vc38-muted:#9AA6B6;
  --vc38-line:rgba(255,255,255,.08);
  --vc38-grad:linear-gradient(135deg,#800080 0%,#9932CC 55%,#0097A7 100%);
  --vc38-grad2:linear-gradient(135deg,#9932CC 0%,#0097A7 100%);
  --vc38-shadow:0 10px 30px rgba(0,0,0,.35);
  --vc38-radius:14px;
  --vc38-maxw:430px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:62.5%}
body{
  font-family:"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;
  background:var(--vc38-bg);
  color:var(--vc38-text);
  line-height:1.5rem;
  font-size:1.4rem;
  max-width:var(--vc38-maxw);
  margin:0 auto;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
a{color:var(--vc38-gold);text-decoration:none;transition:color .2s ease}
a:hover{color:#fff}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.5;font-weight:700;color:#fff}
h1{font-size:2.4rem}
h2{font-size:2rem}
h3{font-size:1.7rem}
h4{font-size:1.5rem}
p{margin-bottom:1rem;color:var(--vc38-text)}

/* ===================== Header ===================== */
.vc38-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(13,17,23,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vc38-line);
  padding:.7rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.vc38-logo{display:flex;align-items:center;gap:.55rem;min-width:0}
.vc38-logo img{width:34px;height:34px;border-radius:8px;background:var(--vc38-grad)}
.vc38-logo b{font-size:1.45rem;color:#fff;white-space:nowrap}
.vc38-logo small{display:block;font-size:1rem;color:var(--vc38-gold);font-weight:600;letter-spacing:.5px}
.vc38-head-actions{display:flex;align-items:center;gap:.45rem}
.vc38-icon-btn{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--vc38-card);color:#fff;font-size:1.6rem;border:1px solid var(--vc38-line)
}
.vc38-icon-btn:active{transform:scale(.94)}
.vc38-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.15rem;border-radius:30px;font-size:1.3rem;font-weight:700;
  background:var(--vc38-grad);color:#fff;min-height:38px;
  box-shadow:0 6px 16px rgba(128,0,128,.35)
}
.vc38-btn:active{transform:scale(.96)}
.vc38-btn--ghost{background:transparent;border:1.5px solid var(--vc38-teal);color:var(--vc38-teal);box-shadow:none}
.vc38-btn--gold{background:linear-gradient(135deg,#FFD66B,#FF9F1C);color:#3a1d00}
.vc38-btn--block{display:flex;width:100%;justify-content:center;padding:.9rem 1rem;font-size:1.5rem}

/* ===================== Top promo strip ===================== */
.vc38-strip{
  background:var(--vc38-grad2);
  color:#fff;font-size:1.2rem;font-weight:600;
  padding:.5rem 1rem;text-align:center;letter-spacing:.3px
}
.vc38-strip b{color:#fff600}

/* ===================== Hero ===================== */
.vc38-hero{
  position:relative;padding:1.2rem 1rem 1.4rem;
  background:
    radial-gradient(circle at 85% 10%,rgba(0,151,167,.35),transparent 55%),
    radial-gradient(circle at 0% 100%,rgba(153,50,204,.4),transparent 60%),
    var(--vc38-bg2);
  overflow:hidden
}
.vc38-hero-tag{
  display:inline-flex;align-items:center;gap:.4rem;font-size:1.1rem;font-weight:700;
  color:var(--vc38-gold);background:rgba(255,214,107,.12);padding:.35rem .8rem;border-radius:20px;margin-bottom:.7rem
}
.vc38-hero h1{font-size:2.5rem;line-height:1.25;margin-bottom:.5rem}
.vc38-hero h1 span{background:var(--vc38-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vc38-hero p{color:var(--vc38-muted);font-size:1.3rem;margin-bottom:1rem}
.vc38-hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.vc38-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.4rem}
.vc38-hero-stat{background:rgba(255,255,255,.05);border:1px solid var(--vc38-line);border-radius:12px;padding:.7rem;text-align:center}
.vc38-hero-stat b{display:block;font-size:1.7rem;color:var(--vc38-gold)}
.vc38-hero-stat span{font-size:1.05rem;color:var(--vc38-muted)}

/* ===================== Carousel ===================== */
.vc38-carousel{
  position:relative;border-radius:18px;overflow:hidden;margin:1rem;
  box-shadow:var(--vc38-shadow);height:175px
}
.vc38-carousel-track{display:flex;transition:transform .5s ease;height:100%}
.vc38-slide{min-width:100%;height:100%;position:relative;padding:1.2rem;display:flex;flex-direction:column;justify-content:center}
.vc38-slide--a{background:linear-gradient(120deg,#800080,#9932CC)}
.vc38-slide--b{background:linear-gradient(120deg,#0097A7,#34495E)}
.vc38-slide--c{background:linear-gradient(120deg,#9932CC,#0097A7)}
.vc38-slide--d{background:linear-gradient(120deg,#34495E,#800080)}
.vc38-slide h3{font-size:1.9rem;color:#fff;margin-bottom:.3rem}
.vc38-slide p{color:rgba(255,255,255,.92);font-size:1.2rem;margin-bottom:.7rem}
.vc38-slide .vc38-btn{align-self:flex-start}
.vc38-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:.45rem}
.vc38-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.vc38-dot.active{background:#FFD66B;width:18px;border-radius:5px}

/* ===================== Section ===================== */
.vc38-section{padding:1.4rem 1rem .4rem}
.vc38-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.vc38-section-head h2{font-size:1.85rem;display:flex;align-items:center;gap:.5rem}
.vc38-section-head h2 i{color:var(--vc38-gold)}
.vc38-section-head a{font-size:1.15rem;color:var(--vc38-teal);font-weight:600}
.vc38-section-desc{color:var(--vc38-muted);font-size:1.2rem;margin-bottom:1rem}

/* ===================== Category tabs ===================== */
.vc38-tabs{
  display:flex;gap:.45rem;overflow-x:auto;padding:.4rem 1rem .6rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch
}
.vc38-tabs::-webkit-scrollbar{display:none}
.vc38-tab{
  flex:0 0 auto;padding:.55rem 1.1rem;border-radius:30px;font-size:1.2rem;font-weight:600;
  background:var(--vc38-card);color:var(--vc38-muted);border:1px solid var(--vc38-line);scroll-snap-align:start
}
.vc38-tab.active{background:var(--vc38-grad);color:#fff;border-color:transparent}
.vc38-tab i{margin-right:.3rem}

/* ===================== Game grid ===================== */
.vc38-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.vc38-card{
  background:var(--vc38-card);border:1px solid var(--vc38-line);border-radius:var(--vc38-radius);
  overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease
}
.vc38-card:active{transform:scale(.96)}
.vc38-card .vc38-card-img{aspect-ratio:1;width:100%;background:var(--vc38-card2);object-fit:cover}
.vc38-card-body{padding:.5rem .55rem .65rem}
.vc38-card-body b{font-size:1.15rem;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc38-card-body span{font-size:1rem;color:var(--vc38-muted);text-transform:uppercase;letter-spacing:.4px}
.vc38-card-badge{
  position:absolute;top:6px;left:6px;background:linear-gradient(135deg,#FFD66B,#FF6B6B);
  color:#3a1d00;font-size:.95rem;font-weight:700;padding:.15rem .45rem;border-radius:6px
}
.vc38-card-badge.hot{background:linear-gradient(135deg,#FF3D6E,#9932CC);color:#fff}
.vc38-card-badge.new{background:linear-gradient(135deg,#00C2A8,#0097A7);color:#fff}
.vc38-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(13,17,23,.55);opacity:0;transition:opacity .2s ease
}
.vc38-card:hover .vc38-play{opacity:1}
.vc38-play i{font-size:2.4rem;color:#FFD66B}

/* ===================== Promo banner ===================== */
.vc38-promo{
  margin:1rem;padding:1.2rem;border-radius:18px;
  background:linear-gradient(135deg,rgba(128,0,128,.92),rgba(0,151,167,.92));
  box-shadow:var(--vc38-shadow);position:relative;overflow:hidden
}
.vc38-promo::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08)}
.vc38-promo h3{font-size:1.85rem;color:#fff;margin-bottom:.3rem}
.vc38-promo p{color:rgba(255,255,255,.92);font-size:1.2rem;margin-bottom:.8rem}
.vc38-promo .vc38-btn{background:#fff;color:#800080}

/* ===================== Feature list ===================== */
.vc38-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;padding:.4rem 1rem}
.vc38-feat{background:var(--vc38-card);border:1px solid var(--vc38-line);border-radius:12px;padding:.9rem}
.vc38-feat i{font-size:1.9rem;color:var(--vc38-gold);margin-bottom:.4rem;display:block}
.vc38-feat b{display:block;font-size:1.3rem;color:#fff;margin-bottom:.2rem}
.vc38-feat span{font-size:1.1rem;color:var(--vc38-muted)}

/* ===================== Steps ===================== */
.vc38-steps{display:grid;gap:.6rem;padding:.2rem 1rem}
.vc38-step{display:flex;gap:.8rem;align-items:flex-start;background:var(--vc38-card);border:1px solid var(--vc38-line);border-radius:12px;padding:.85rem .9rem}
.vc38-step-num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--vc38-grad);display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.3rem}
.vc38-step b{display:block;font-size:1.3rem;color:#fff;margin-bottom:.15rem}
.vc38-step span{font-size:1.15rem;color:var(--vc38-muted)}

/* ===================== Article ===================== */
.vc38-article{padding:.4rem 1rem}
.vc38-article h2{margin:.8rem 0 .5rem;font-size:1.9rem}
.vc38-article h3{margin:.7rem 0 .4rem;color:var(--vc38-gold);font-size:1.55rem}
.vc38-article p{color:var(--vc38-text);margin-bottom:.85rem;font-size:1.3rem}
.vc38-article p .kw{color:var(--vc38-gold);font-weight:700}
.vc38-article ul{padding-left:1.2rem;margin:.5rem 0 .9rem}
.vc38-article ul li{list-style:disc;margin-bottom:.35rem;color:var(--vc38-text);font-size:1.25rem}
.vc38-callout{
  border-left:3px solid var(--vc38-gold);
  background:rgba(255,214,107,.08);padding:.8rem 1rem;border-radius:8px;margin:.8rem 0
}
.vc38-callout b{color:var(--vc38-gold)}

/* ===================== FAQ ===================== */
.vc38-faq{padding:.2rem 1rem;display:grid;gap:.55rem}
.vc38-faq-item{background:var(--vc38-card);border:1px solid var(--vc38-line);border-radius:12px;overflow:hidden}
.vc38-faq-q{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.85rem 1rem;font-weight:600;font-size:1.3rem;color:#fff}
.vc38-faq-q i{color:var(--vc38-teal);transition:transform .25s}
.vc38-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1rem;color:var(--vc38-muted);font-size:1.2rem}
.vc38-faq-item.open .vc38-faq-q i{transform:rotate(45deg)}
.vc38-faq-item.open .vc38-faq-a{max-height:340px;padding:.1rem 1rem .9rem}

/* ===================== Footer ===================== */
.vc38-footer{background:var(--vc38-bg2);border-top:1px solid var(--vc38-line);padding:1.4rem 1rem 2.4rem;margin-top:1.4rem}
.vc38-footer h4{color:#fff;font-size:1.35rem;margin-bottom:.6rem}
.vc38-footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-bottom:1.1rem}
.vc38-footer ul li{margin-bottom:.45rem}
.vc38-footer ul li a{color:var(--vc38-muted);font-size:1.2rem}
.vc38-footer ul li a:hover{color:var(--vc38-gold)}
.vc38-footer-brand{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.vc38-footer-brand img{width:30px;height:30px;border-radius:8px;background:var(--vc38-grad)}
.vc38-footer-brand b{font-size:1.4rem;color:#fff}
.vc38-footer p{color:var(--vc38-muted);font-size:1.15rem;margin-bottom:.6rem}
.vc38-pay{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem}
.vc38-pay span{background:var(--vc38-card);border:1px solid var(--vc38-line);padding:.3rem .7rem;border-radius:6px;font-size:1.05rem;color:var(--vc38-muted)}
.vc38-copy{text-align:center;border-top:1px solid var(--vc38-line);padding-top:1rem;color:var(--vc38-muted);font-size:1.1rem}

/* ===================== Mobile bottom nav ===================== */
.vc38-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--vc38-maxw);z-index:1000;
  background:rgba(13,17,23,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--vc38-line);
  display:flex;justify-content:space-around;align-items:stretch;
  height:62px;padding:0 .3rem
}
.vc38-bottomnav-btn{
  flex:1;min-width:60px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;color:var(--vc38-muted);font-size:1rem;position:relative
}
.vc38-bottomnav-btn i{font-size:2.1rem;transition:transform .2s ease,color .2s ease}
.vc38-bottomnav-btn:active i{transform:scale(1.15)}
.vc38-bottomnav-btn.active{color:var(--vc38-gold)}
.vc38-bottomnav-btn.active i{color:var(--vc38-gold)}
.vc38-bottomnav-btn--cta{
  background:var(--vc38-grad);color:#fff;border-radius:14px;margin-top:-14px;height:56px;min-width:60px;
  box-shadow:0 6px 18px rgba(128,0,128,.45)
}
.vc38-bottomnav-btn--cta i{font-size:2.3rem;color:#fff}
.vc38-bottomnav-btn--cta span{color:#fff;font-weight:700}

/* ===================== Mobile menu drawer ===================== */
.vc38-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s
}
.vc38-menu-overlay.open{opacity:1;visibility:visible}
.vc38-menu{
  position:fixed;top:0;right:0;height:100%;width:84%;max-width:340px;z-index:9999;
  background:var(--vc38-bg2);padding:1.2rem 1rem;transform:translateX(100%);transition:transform .28s ease;
  overflow-y:auto;border-left:1px solid var(--vc38-line)
}
.vc38-menu.open{transform:translateX(0)}
.vc38-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--vc38-line)}
.vc38-menu-head b{font-size:1.5rem;color:#fff}
.vc38-menu-head button{font-size:2rem;color:var(--vc38-muted)}
.vc38-menu-links{display:grid;gap:.4rem;margin-bottom:1.2rem}
.vc38-menu-links a{
  display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border-radius:10px;
  background:var(--vc38-card);color:#fff;font-size:1.3rem;font-weight:600;border:1px solid var(--vc38-line)
}
.vc38-menu-links a i{color:var(--vc38-teal);font-size:1.5rem}
.vc38-menu-cta{display:grid;gap:.5rem;margin-bottom:1rem}

/* ===================== Visibility ===================== */
.vc38-desktop-only{display:none}
@media(max-width:768px){main{padding-bottom:8rem}}
@media(min-width:769px){
  .vc38-bottomnav{display:none}
  .vc38-desktop-only{display:flex}
  body{max-width:960px}
}

/* ===================== Helpers ===================== */
.vc38-center{text-align:center}
.vc38-kw{color:var(--vc38-gold);font-weight:700}
.vc38-divider{height:1px;background:var(--vc38-line);margin:1.2rem 0;border:0}
.vc38-hide{display:none}