/* =========================================================
   PlayHub - Homepage themes (selected in Admin > Homepage Themes)
   Classic = default style.css. Rules below are scoped by body class.
   ========================================================= */

/* =========================================================
   GLOBAL THEME TOKENS - every theme supports Light + Dark.
   The visitor toggle (sun/moon button) sets data-theme on <html> and <body>.
   ========================================================= */

/* ---------- Neon Arcade ---------- */
html[data-theme="dark"] body.ht-arcade,body.ht-arcade[data-theme="dark"]{
  --bg:#0a0820;--panel:#15123a;--ink:#f4f1ff;--muted:#a9a3d9;--line:#2a2563;--violet:#8b5cf6;--cyan:#12c9b6;
  background:radial-gradient(900px 500px at 15% -10%,rgba(91,61,245,.28),transparent 60%),
             radial-gradient(800px 500px at 100% 0,rgba(18,201,182,.14),transparent 55%),#0a0820;
}
html[data-theme="light"] body.ht-arcade,body.ht-arcade[data-theme="light"]{
  --bg:#eaf4ff;--panel:#ffffff;--ink:#0d1b3d;--muted:#4a5c85;--line:#c9dcf3;--violet:#5b3df5;--cyan:#0aa59a;
  background:radial-gradient(800px 420px at 10% -10%,rgba(91,61,245,.14),transparent 60%),
             radial-gradient(700px 420px at 100% 0,rgba(18,201,182,.16),transparent 55%),#eaf4ff;
}
body.ht-arcade header{border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(18,201,182,.35),0 8px 30px -18px rgba(91,61,245,.8)}
body.ht-arcade .main a.on{background:linear-gradient(90deg,#12c9b6,#5b3df5);color:#fff}
body.ht-arcade .btn.solid{background:linear-gradient(90deg,#12c9b6,#5b3df5);color:#fff}
body.ht-arcade .btn.primary{background:linear-gradient(90deg,#5b3df5,#12c9b6)}
body.ht-arcade .card{border-color:var(--line);background:var(--panel)}
body.ht-arcade .card:hover{border-color:var(--violet);box-shadow:0 0 26px rgba(139,92,246,.45)}
body.ht-arcade .play-btn{background:linear-gradient(90deg,#12c9b6,#5b3df5)}
body.ht-arcade .chip.on,body.ht-arcade .pbtn.on{background:linear-gradient(90deg,#12c9b6,#5b3df5);border-color:transparent;color:#fff}
body.ht-arcade .sh h2,body.ht-arcade .game-title{text-shadow:0 0 14px rgba(139,92,246,.35)}
body.ht-arcade .player{box-shadow:0 0 0 1.5px #12c9b6,0 0 34px rgba(18,201,182,.35)}
body.ht-arcade .news{border-color:var(--line)}
body.ht-arcade footer{background:#070517;border-top:1px solid #12c9b6;box-shadow:0 -10px 40px -22px rgba(18,201,182,.6)}
body.ht-arcade .load-more-btn{background:linear-gradient(90deg,#12c9b6,#5b3df5);color:#fff;box-shadow:0 0 24px rgba(91,61,245,.4)}
body.ht-arcade .chips-arrow:hover{background:linear-gradient(90deg,#12c9b6,#5b3df5)}
body.ht-arcade .prose a{color:var(--cyan)}

/* ---------- Clean Store ---------- */
html[data-theme="light"] body.ht-clean,body.ht-clean[data-theme="light"]{
  --bg:#f7f8fc;--panel:#ffffff;--ink:#111827;--muted:#667085;--line:#e4e7ee;--violet:#4f46e5;--cyan:#0ea5a4;--r:20px;
}
html[data-theme="dark"] body.ht-clean,body.ht-clean[data-theme="dark"]{
  --bg:#0f1115;--panel:#171a21;--ink:#f3f4f6;--muted:#9aa3b2;--line:#262b36;--violet:#818cf8;--cyan:#2dd4bf;--r:20px;
}
body.ht-clean{--r:20px}
body.ht-clean header{background:color-mix(in srgb,var(--panel) 92%,transparent);box-shadow:0 1px 0 var(--line)}
body.ht-clean .main a.on{background:var(--violet);color:#fff}
body.ht-clean .btn.solid{background:var(--violet);color:#fff}
body.ht-clean .card{border-radius:20px;box-shadow:0 8px 24px -18px rgba(17,24,39,.5)}
body.ht-clean .card:hover{box-shadow:0 18px 34px -18px rgba(79,70,229,.45)}
body.ht-clean .play-btn{background:var(--violet)}
body.ht-clean .chip{border-radius:12px}
body.ht-clean .chip.on,body.ht-clean .pbtn.on{background:var(--violet);border-color:var(--violet);color:#fff}
body.ht-clean .player{background:#0b0d12;border-radius:22px}
body.ht-clean .news{border-radius:22px}
body.ht-clean footer{background:var(--panel);color:var(--muted);border-top:1px solid var(--line)}
body.ht-clean footer h4{color:var(--ink)}
body.ht-clean footer a{color:var(--muted)}
body.ht-clean footer a:hover{color:var(--violet)}
body.ht-clean .load-more-btn{background:var(--violet);color:#fff}

/* ---------- Arcade hero / sections ---------- */
body.ht-arcade .hero{
  text-align:center;padding:64px 28px 40px;color:#fff;
  background:linear-gradient(135deg,#1a1250 0%,#2a1670 55%,#3b1a86 100%);
  border:1px solid rgba(18,201,182,.55);
  box-shadow:0 0 0 1px rgba(91,61,245,.35),0 0 38px rgba(18,201,182,.25),inset 0 0 60px rgba(91,61,245,.25);
}
body.ht-arcade .hero h1{max-width:18ch;margin:0 auto 14px;color:#fff;text-shadow:0 0 22px rgba(139,92,246,.8)}
body.ht-arcade .hero p{max-width:60ch;margin:0 auto 22px;color:#e9e5ff}
body.ht-arcade .hero .cta{justify-content:center}
body.ht-arcade .hero .pad{display:none}
.hero-kicker{display:inline-block;font:700 .78rem var(--bfont);letter-spacing:.14em;color:#12c9b6;background:rgba(18,201,182,.12);border:1px solid rgba(18,201,182,.4);padding:6px 14px;border-radius:99px;margin-bottom:18px}
body.ht-arcade .hero-search,
body.ht-clean .hero-search{display:block;max-width:560px;margin:0 auto 22px}
body.ht-arcade .hero-search input{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.25);box-shadow:none}
body.ht-arcade .hero-search input::placeholder{color:#c9c3f2}
body.ht-arcade .hero-search svg{stroke:#c9c3f2}
.hero-stats{display:flex;justify-content:center;gap:clamp(18px,5vw,56px);margin-top:34px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column;align-items:center}
.hero-stats b{font:800 2rem var(--hfont);color:#12c9b6;text-shadow:0 0 16px rgba(18,201,182,.6)}
.hero-stats span{font-size:.82rem;color:#c9c3f2;letter-spacing:.06em;text-transform:uppercase}
.cat-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cat-tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;transition:translate .15s,border-color .15s,box-shadow .15s}
.cat-tile .cat-ico{font-size:2rem;line-height:1.2}
.cat-tile b{font:700 .95rem var(--hfont)}
.cat-tile small{color:var(--muted);font-size:.78rem}
.cat-tile:hover{translate:0 -3px;border-color:#12c9b6;box-shadow:0 0 22px rgba(18,201,182,.35)}

/* ---------- Theme 3: Clean Store (light, search-first) ---------- */
body.ht-clean .hero{
  background:var(--panel);color:var(--ink);text-align:center;
  border:1.5px solid var(--line);padding:56px 28px 44px;
  box-shadow:0 20px 50px -34px rgba(60,30,160,.5);
}
body.ht-clean .hero h1{color:var(--ink);max-width:20ch;margin:0 auto 12px}
body.ht-clean .hero p{color:var(--muted);max-width:56ch;margin:0 auto 22px;opacity:1}
body.ht-clean .hero .cta{justify-content:center}
body.ht-clean .hero .pad{display:none}
body.ht-clean .hero-search input{background:var(--bg);color:var(--ink);border:1.5px solid var(--line);box-shadow:none;padding:16px 18px 16px 50px}
body.ht-clean .hero-search input:focus{outline:2px solid var(--violet);outline-offset:1px}
body.ht-clean .hero-search svg{stroke:var(--muted)}
body.ht-clean .btn.soft{padding:13px 24px}
.see-all{color:var(--violet);font-weight:700}
.feat-row{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
.feat-row .card{flex:0 0 250px;scroll-snap-align:start}
body.ht-clean .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
body.ht-clean .card{border-radius:20px;box-shadow:0 8px 24px -18px rgba(40,20,120,.55)}
body.ht-clean .thumb{aspect-ratio:1/1}
body.ht-clean .info{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
body.ht-clean .play-btn{width:100%;border-radius:12px}
body.ht-clean .chip{border-radius:12px}
body.ht-clean .feat-row .card .info{flex-direction:row;align-items:center}
body.ht-clean .feat-row .card .play-btn{width:auto}

@media (max-width:1100px){
  body.ht-clean .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  body.ht-clean .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  body.ht-clean .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ht-arcade .hero,body.ht-clean .hero{padding:36px 18px 28px}
  .feat-row .card{flex-basis:200px}
}