/* ============ GameHub Pro — style.css ============ */
:root{
  --bg:#0a0b12;
  --bg2:#0e1019;
  --card:#151725;
  --card2:#1a1c2c;
  --line:rgba(255,255,255,.07);
  --text:#f2f2f7;
  --muted:#8a90a6;
  --acc:#7c5cff;
  --acc2:#22d3ee;
  --pink:#ff5e9c;
  --gold:#e8c468;
  --gold-deep:#b8892e;
  --green:#34d399;
  --radius:22px;
  --radius-sm:14px;
  --maxw:520px;
  --shine:linear-gradient(155deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 35%);
  --font-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
}
@media (min-width:768px){ :root{ --maxw:760px; } }
@media (min-width:1080px){ :root{ --maxw:980px; } }

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none;}
html,body{height:100%;}
a, button, .card, .pcard, .genre-card, .fpill, .bn-btn, .icon-btn, .promo-card, .hero-slide, .fav, .pcard-heart{
  transition:transform .4s ease, opacity .4s ease;
}
a:active, button:active, .card:active, .pcard:active, .genre-card:active, .fpill:active, .bn-btn:active, .icon-btn:active, .promo-card:active, .hero-slide:active, .fav:active, .pcard-heart:active{
  transform:scale(.96); opacity:.8;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit; text-decoration:none;}
::-webkit-scrollbar{display:none;}
*{scrollbar-width:none;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.app{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  padding-bottom:80px;
  background:
    radial-gradient(520px 320px at 12% 0%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(460px 300px at 92% 8%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(600px 380px at 50% 38%, rgba(255,94,156,.07), transparent 65%),
    linear-gradient(180deg,#0d0e17 0%, #08090f 45%, #050508 100%);
  background-size:140% 140%, 140% 140%, 140% 140%, 100% 100%;
  animation:bgDrift 22s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
@keyframes bgDrift{
  0%,100%{background-position:12% 0%, 92% 8%, 50% 38%, 0 0;}
  50%{background-position:18% 6%, 84% 14%, 46% 44%, 0 0;}
}

/* ===== SPLASH ===== */
#splash{
  position:fixed; inset:0; z-index:999;
  background:radial-gradient(circle at 50% 30%, #1c1533 0%, #0a0b12 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; transition:opacity .6s ease, transform .6s ease;
}
#splash.hidden{opacity:0; transform:scale(1.05);}
#splash.gone{display:none;}
.splash-logo{
  width:84px; height:84px; border-radius:26px;
  background:linear-gradient(135deg,var(--acc),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-size:38px; color:#fff;
  box-shadow:0 0 60px rgba(124,92,255,.55);
  animation:pulseLogo 1.8s ease-in-out infinite;
}
@keyframes pulseLogo{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.splash-name{font-family:var(--font-display); font-size:27px; font-weight:800; letter-spacing:.01em;}
.splash-name span{color:var(--acc2);}
.splash-tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);}
.splash-loading{font-size:12px; color:var(--muted); margin-top:8px;}
#splashParticles{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.splash-particle{position:absolute; border-radius:50%; opacity:0; animation:floatUp linear infinite;}
@keyframes floatUp{
  0%{opacity:0; transform:translate(0,0);}
  15%{opacity:.9;}
  100%{opacity:0; transform:translate(var(--dx),-260px);}
}

/* ===== TOP HEADER ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 10px;
  position:sticky; top:0; z-index:40;
  background:rgba(10,11,18,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.icon-btn{
  width:44px; height:44px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-size:15px; position:relative;
}
.icon-btn .badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--pink); color:#fff; font-size:10px; font-weight:800;
  min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  box-shadow:0 0 0 3px var(--bg2);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--gold),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#1a0f0f;
  animation:brandGlow 3.2s ease-in-out infinite;
}
@keyframes brandGlow{
  0%,100%{box-shadow:0 4px 14px rgba(232,196,104,.35);}
  50%{box-shadow:0 4px 22px rgba(255,94,156,.45);}
}
.brand-text{line-height:1.1;}
.brand-text .name{font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:.01em;}
.brand-text .name span{color:var(--acc2); font-weight:800;}
.brand-text .sub{font-size:9px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-top:2px;}
.topbar-actions{display:flex; align-items:center; gap:9px;}

/* ===== DRAWER (hamburger) ===== */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.drawer-overlay.on{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:78%; max-width:320px; z-index:91;
  background:rgba(13,14,23,.88); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-right:1px solid rgba(255,255,255,.08); box-shadow:20px 0 50px rgba(0,0,0,.4);
  transform:translateX(-105%); transition:transform .3s cubic-bezier(.22,.9,.3,1);
  padding:22px 18px; overflow-y:auto;
}
.drawer.on{transform:translateX(0);}
.drawer-close{position:absolute; top:16px; right:16px;}
.drawer-brand{display:flex; align-items:center; gap:10px; margin-bottom:26px;}
.drawer-nav a{
  display:flex; align-items:center; gap:12px;
  padding:13px 12px; border-radius:12px; font-size:14.5px; font-weight:600;
  color:var(--text); margin-bottom:4px;
}
.drawer-nav a i{width:20px; text-align:center; color:var(--acc2);}
.drawer-nav a:active{background:var(--card);}
.drawer-divider{height:1px; background:var(--line); margin:16px 0;}
.drawer-info a{
  display:block; padding:10px 12px; font-size:13px; color:var(--muted); font-weight:600;
}

/* ===== LANG DROPDOWN ===== */
.lang-wrap{position:relative;}
.lang-trig{display:flex; align-items:center; gap:6px; padding:0 12px; width:auto;}
.lang-trig span{font-size:12px; font-weight:700;}
#langDD{
  position:absolute; top:48px; right:0; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:6px;
  min-width:120px; opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:all .18s ease; z-index:50; box-shadow:0 12px 30px rgba(0,0,0,.4);
}
#langDD.on{opacity:1; transform:translateY(0); pointer-events:auto;}
#langDD button{
  display:flex; align-items:center; gap:8px; width:100%; padding:9px 10px;
  background:none; border:none; color:var(--text); border-radius:8px; font-size:13px; font-weight:600;
}
#langDD button.active{background:rgba(124,92,255,.18); color:var(--acc2);}

/* ===== PAGES ===== */
.page{display:none;}
.page.active{display:block; animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ===== SECTION HEADER ===== */
.sec-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 18px 12px;
}
.sec-head .lead{display:flex; align-items:center; gap:9px;}
.sec-head .bar{width:4px; height:16px; border-radius:3px; background:linear-gradient(180deg,var(--acc),var(--pink));}
.sec-head h3{font-family:var(--font-display); font-size:13.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.sec-head .sub{font-size:11px; color:var(--muted); margin-top:1px;}
.sec-head .seeall{font-size:12px; font-weight:700; color:var(--acc2); display:flex; align-items:center; gap:4px;}

/* ===== HERO CAROUSEL ===== */
.hero-wrap{padding:14px 18px 4px; position:relative;}
.hero-wrap::before{
  content:''; position:absolute; inset:14px 18px 8px; border-radius:calc(var(--radius) + 3px);
  padding:2px; background:conic-gradient(from var(--ang,0deg), var(--acc), var(--acc2), var(--pink), var(--gold), var(--acc));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rotBorder 6s linear infinite; opacity:.75; pointer-events:none; z-index:0;
}
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes rotBorder{to{--ang:360deg;}}
.hero-track{position:relative; z-index:1;}
.hero-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:var(--radius);
}
.hero-slide{
  scroll-snap-align:start; flex:0 0 100%; position:relative; height:280px;
  border-radius:var(--radius); overflow:hidden; background:var(--card);
  animation:heroGlow 6s ease-in-out infinite;
}
@keyframes heroGlow{
  0%,100%{box-shadow:0 18px 40px rgba(124,92,255,.22);}
  33%{box-shadow:0 18px 40px rgba(34,211,238,.20);}
  66%{box-shadow:0 18px 40px rgba(255,94,156,.20);}
}
.hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,18,0) 25%, rgba(10,11,18,.75) 68%, rgba(10,11,18,.97) 100%);
}
.hero-badge{
  position:absolute; top:16px; left:16px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#1a0f0f;
  font-size:10.5px; font-weight:800; letter-spacing:.03em;
  padding:6px 12px; border-radius:20px;
}
.hero-content{position:absolute; left:18px; right:18px; bottom:18px;}
.hero-cat{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc2); font-weight:700; margin-bottom:4px;}
.hero-title{font-family:var(--font-display); font-size:26px; font-weight:800; line-height:1.06; margin-bottom:8px; text-shadow:0 3px 14px rgba(0,0,0,.5); letter-spacing:-.015em;}
.hero-title em{font-style:normal; background:linear-gradient(90deg,var(--gold),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-desc{
  font-size:12px; color:#d3d5e0; margin-bottom:14px; max-width:88%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-bottom{display:flex; align-items:center; justify-content:space-between;}
.hero-price{display:flex; flex-direction:column;}
.price-pill{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#1a0f0f !important;
  padding:3px 9px; border-radius:9px; font-weight:800; font-size:10px; display:inline-block;
  animation:pillGlow 3.6s ease-in-out infinite;
}
@keyframes pillGlow{
  0%,100%{box-shadow:0 0 0 rgba(232,196,104,0);}
  50%{box-shadow:0 4px 14px rgba(232,196,104,.4);}
}
.price-pill--lg{font-size:15px; padding:8px 16px; border-radius:12px; box-shadow:0 8px 20px rgba(232,196,104,.3);}
.btn-buy{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#1a0f0f;
  font-weight:800; font-size:13px; padding:11px 18px; border:none; border-radius:13px;
  box-shadow:0 8px 22px rgba(232,196,104,.3);
}
.hero-dots{position:absolute; right:18px; top:16px; background:rgba(10,11,18,.55); backdrop-filter:blur(6px);
  padding:5px 10px; border-radius:20px; font-size:10.5px; font-weight:700; color:#fff;}
.hero-pager{display:flex; justify-content:center; gap:5px; margin-top:10px;}
.hero-pager span{width:6px; height:6px; border-radius:50%; background:var(--line); transition:all .25s ease;}
.hero-pager span.on{width:18px; background:var(--gold);}

/* ===== CATEGORY CHIPS (genreGrid override) ===== */
#genreGrid{
  display:flex; gap:11px; overflow-x:auto; padding:16px 18px 6px;
}
#genreGrid::before{content:''; }
.genre-card{
  flex:0 0 auto; width:74px; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 6px 10px; border-radius:18px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 18px rgba(0,0,0,.3);
  position:relative; animation:fadeIn .3s ease both; cursor:pointer;
}
.genre-card.active{border-color:var(--gold); background:rgba(232,196,104,.1);}
.gc-glow-bg, .gc-count{display:none;}
.gc-icon-wrap{
  width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; box-shadow:0 6px 16px rgba(124,92,255,.35);
}
.gc-body{text-align:center;}
.gc-name{font-size:10.5px; font-weight:700; line-height:1.2;}
.gc-desc{display:none;}

/* ===== PROMO BANNERS ===== */
.promo-row{display:flex; gap:12px; padding:18px 18px 6px;}
.promo-card{
  flex:1; position:relative; height:126px; border-radius:20px; overflow:hidden;
  padding:14px; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; cursor:pointer; box-shadow:0 14px 28px rgba(0,0,0,.4);
}
.promo-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;}
.promo-grad{position:absolute; inset:0;}
.promo-card.cy .promo-grad{background:linear-gradient(200deg, rgba(232,196,104,.92) 0%, rgba(10,11,18,.55) 65%, rgba(10,11,18,.9) 100%);}
.promo-card.rd .promo-grad{background:linear-gradient(200deg, rgba(255,94,60,.9) 0%, rgba(10,11,18,.55) 65%, rgba(10,11,18,.9) 100%);}
.promo-body{position:relative; z-index:2;}
.promo-title{font-size:14px; font-weight:800; line-height:1.15; text-transform:uppercase; margin-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,.5);}
.promo-off{font-size:23px; font-weight:800; line-height:1;}
.promo-sub{font-size:10px; color:rgba(255,255,255,.85); margin-top:3px;}

/* ===== HORIZONTAL GAME STRIP ===== */
.h-scroll{display:flex; gap:13px; overflow-x:auto; padding:14px 18px 6px;}
.pcard{
  flex:0 0 188px; position:relative; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.09); animation:fadeIn .3s ease both; cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.05) inset;
}
.pcard::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--shine);}
.pcard-img{position:relative; width:100%; height:236px; background:var(--card2);}
.pcard-img img{width:100%; height:100%; object-fit:cover;}
.pcard-grad{position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,11,18,.94) 100%);}
.pcard-cat{
  position:absolute; top:8px; left:8px; z-index:2; font-size:9px; font-weight:800; text-transform:uppercase;
  background:rgba(10,11,18,.6); backdrop-filter:blur(4px); padding:4px 8px; border-radius:8px; letter-spacing:.04em; color:#fff;
}
.pcard-img[data-off]::before{
  content:attr(data-off); position:absolute; top:8px; left:8px; z-index:2;
  background:linear-gradient(135deg,#ff4d6d,#ff5e9c); color:#fff; font-size:10px; font-weight:800;
  padding:4px 8px; border-radius:8px;
}
.pcard-heart{
  position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(10,11,18,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; border:none;
}
.pcard-heart.on{color:var(--pink);}
.pcard-meta{position:absolute; left:10px; right:10px; bottom:10px; z-index:2;}
.pcard-name{font-size:12.5px; font-weight:800; line-height:1.25; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px;}
.pcard-price{display:flex; align-items:baseline; gap:6px; font-size:13px; font-weight:800; color:#fff;}
.pcard-price span{font-size:9.5px; color:rgba(255,255,255,.65); font-weight:700;}
.pcard-oldprice{font-size:10px; color:rgba(255,255,255,.55); text-decoration:line-through;}


/* ===== GAMES GRID (catalog page) ===== */
.filter-bar{padding:14px 18px 4px;}
#filterPills{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;}
.fpill{
  flex:0 0 auto; padding:9px 16px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  font-size:12px; font-weight:700; color:var(--muted);
}
.fpill.active{
  background:linear-gradient(135deg,var(--acc),var(--pink)); color:#fff; border-color:transparent;
  box-shadow:0 6px 18px rgba(124,92,255,.4);
}
.result-line{padding:12px 18px 4px; font-size:11.5px; color:var(--muted);}
.result-line b{color:var(--text);}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:13px; padding:8px 18px 10px;}
#favGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:13px; padding:14px 18px 10px;}
@media (min-width:600px){
  .grid, #favGrid{grid-template-columns:repeat(3,1fr);}
  .pcard{flex-basis:210px;}
}
@media (min-width:900px){
  .grid, #favGrid{grid-template-columns:repeat(4,1fr); gap:16px;}
  .promo-row{gap:16px;}
  .pcard{flex-basis:224px;}
}
.card{
  position:relative; background:var(--card); border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  animation:fadeIn .3s ease both; cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.05) inset;
}
.card::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:var(--shine);
}
.card img{width:100%; aspect-ratio:2/3; object-fit:cover;}
.card .grad{position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,11,18,.92) 100%);}
.badge-top{
  position:absolute; top:8px; left:8px; z-index:2; font-size:9px; font-weight:800; text-transform:uppercase;
  background:rgba(10,11,18,.6); backdrop-filter:blur(4px); padding:4px 8px; border-radius:8px; letter-spacing:.04em;
}
.fav{
  position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(10,11,18,.55); border:none; color:#fff; display:flex; align-items:center; justify-content:center;
}
.fav.on{color:var(--pink);}
.card .meta{position:absolute; left:10px; right:10px; bottom:10px; z-index:2;}
.card .meta h4{font-size:12px; font-weight:700; line-height:1.25; margin-bottom:5px;}
.card .row{display:flex; align-items:center; justify-content:space-between;}
.rating{font-size:8.5px; color:var(--gold);}
.tag-cat{font-size:9px; color:var(--acc2); display:flex; align-items:center; gap:3px; font-weight:700;}

.empty-state{padding:60px 30px; text-align:center; color:var(--muted);}
.empty-state i{font-size:32px; margin-bottom:12px; opacity:.5;}
.empty-state h4{color:var(--text); font-size:14px; margin-bottom:5px;}
.empty-state p{font-size:12px;}

/* pagination */
.pager{display:flex; align-items:center; justify-content:center; gap:6px; padding:14px 18px 24px;}
.pg-btn{width:34px; height:34px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--text);}
.pg-btn:disabled{opacity:.35;}
.pg-num{width:34px; height:34px; border-radius:10px; background:none; border:none; color:var(--muted); font-size:12px; font-weight:700;}
.pg-num.on{background:linear-gradient(135deg,var(--acc),var(--pink)); color:#fff;}
.pg-dots{color:var(--muted); font-size:12px; padding:0 2px;}

/* ===== SEARCH PAGE ===== */
.search-bar{margin:14px 18px 4px; position:relative;}
.search-bar input{
  width:100%; padding:14px 44px 14px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:13.5px;
}
.search-bar input::placeholder{color:var(--muted);}
.search-bar i.fa-magnifying-glass{position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted);}
#searchClear{position:absolute; right:14px; top:50%; transform:translateY(-50%); display:none; color:var(--muted); background:none; border:none;}
#searchHint{display:flex; flex-direction:column; align-items:center; padding:70px 30px; color:var(--muted); text-align:center; gap:10px;}
#searchHint i{font-size:30px; opacity:.4;}

/* ===== FAVORITES ===== */

/* ===== BOTTOM NAV ===== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-width:var(--maxw); margin:0 auto;
  background:rgba(12,13,22,.72); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -1px 0 rgba(255,255,255,.04), 0 -14px 30px rgba(0,0,0,.35);
  display:flex; padding:9px 6px calc(9px + env(safe-area-inset-bottom));
}
.bn-btn{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--muted); font-size:9.5px; font-weight:700; padding:6px 2px; position:relative;
}
.bn-btn i{font-size:17px; position:relative; z-index:1;}
.bn-btn.active{color:var(--gold);}
.bn-btn.active i{
  filter:drop-shadow(0 0 8px rgba(232,196,104,.65));
}
.bn-btn .bn-badge{
  position:absolute; top:-2px; right:22%; background:var(--pink); color:#fff; font-size:9px; font-weight:800;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* ===== GAME MODAL ===== */
.modal{
  position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.65);
  display:flex; align-items:stretch; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal.on{opacity:1; pointer-events:auto;}
.modal-sheet{
  width:100%; max-width:var(--maxw); height:100%; max-height:100%; overflow-y:auto;
  background:rgba(13,14,23,.97); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-radius:0; border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
  position:relative;
}
.modal-sheet::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--acc),var(--acc2),var(--pink),var(--gold));
}
.modal.on .modal-sheet{transform:translateY(0);}
.modal-handle{display:none;}

/* --- unified section rhythm: every kubik shares radius, spacing, soft 3D depth --- */
.modal-body{padding:12px 18px 26px; display:flex; flex-direction:column; gap:16px;}
.modal-card{
  background:linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.modal-label{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--acc2); display:flex; align-items:center; gap:6px; margin-bottom:10px;}

/* head + trailer share one kubik at the top of the sheet */
.modal-head-card{padding:14px; display:flex; flex-direction:column; gap:12px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.modal-head-title{
  font-family:var(--font-display); font-size:23px; font-weight:800; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
  background:linear-gradient(100deg,var(--text) 30%,var(--acc2) 60%,var(--pink) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:220% 100%; background-position:0% 0%;
  transition:background-position .5s ease, transform .3s ease, filter .3s ease;
}
.modal-head-title:hover{
  background-position:100% 0%; transform:translateY(-1px) scale(1.015);
  filter:drop-shadow(0 0 10px rgba(34,211,238,.35));
}
.modal-close{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#fff; font-size:14px;
  transition:background .2s ease, transform .2s ease;
}
.modal-close:hover{background:rgba(255,94,156,.15); border-color:rgba(255,94,156,.35); transform:rotate(90deg);}

/* trailer — öz aýratyn suraty (YouTube thumbnail) + üstünde play, indi kubigiň içinde */
.modal-trailer{position:relative; height:190px; border-radius:var(--radius-sm); overflow:hidden; background:var(--card2); border:1px solid var(--line);}
.modal-trailer img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.modal-trailer:hover img{transform:scale(1.04);}
.modal-trailer-label{
  position:absolute; left:10px; top:10px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc2); background:rgba(10,11,18,.6); padding:5px 10px; border-radius:8px;
}
.modal-trailer-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg, rgba(9,10,17,.15), rgba(9,10,17,.55));
}
.modal-trailer-playbtn{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; color:#111; font-size:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .25s ease;
}
.modal-trailer-play:hover .modal-trailer-playbtn{transform:scale(1.1);}
.modal-video{position:relative; width:100%; height:100%; background:#000;}
.modal-video iframe{width:100%; height:100%; border:0; display:block;}

/* skrinshotlar — aýratyn kubikde, ruçnoý geçirilýän slaýdşow */
.modal-shots-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; scrollbar-width:none; margin:0 -14px; padding:0 14px;}
.modal-shots-track::-webkit-scrollbar{display:none;}
.modal-shots-track img{
  scroll-snap-align:start; flex:0 0 80%; height:170px; object-fit:cover; border-radius:var(--radius-sm);
  border:1px solid var(--line); transition:transform .3s ease;
}
.modal-shots-track img:hover{transform:scale(1.02);}
.modal-shots-pager{display:flex; justify-content:center; gap:5px; margin-top:10px;}
.modal-shots-pager span{width:6px; height:6px; border-radius:50%; background:var(--line); transition:all .25s ease;}
.modal-shots-pager span.on{width:16px; background:var(--acc2);}


/* body — bir sütünli, deň aralykly kubikler: maglumat → beýan → tehniki → sargyt */
.modal-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.modal-tag{font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--acc2); background:rgba(34,211,238,.12); padding:5px 10px; border-radius:8px;}
.modal-stars{font-size:12px; color:var(--gold); letter-spacing:1px;}
.modal-title{font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.01em;}
.modal-metarow{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.modal-metarow span b{color:var(--text); font-weight:700;}
.modal-desc{font-size:12.5px; color:var(--muted); line-height:1.55;}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.spec{background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 12px;}
.sl{font-size:9.5px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:4px;}
.sv{font-size:11.5px; font-weight:700;}
.order-block{}
.ob-label{font-size:12px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:7px; color:var(--acc2);}
.ob-text{
  width:100%; min-height:64px; background:var(--card2); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-size:12px; padding:10px; resize:vertical; font-family:inherit; margin-bottom:10px;
}
.ob-btns{display:flex; gap:8px; margin-bottom:10px;}
.btn{border:none; border-radius:12px; font-weight:700; font-size:12.5px; padding:11px 14px; display:flex; align-items:center; justify-content:center; gap:7px; transition:filter .2s ease, transform .2s ease;}
.btn.primary{flex:1; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff;}
.btn.ghost{background:var(--card2); color:var(--text); border:1px solid var(--line); width:44px;}
.btn:hover{filter:brightness(1.12);}
.ob-meta{font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}

/* ===== INFO MODAL ===== */
.info-modal{
  position:fixed; inset:0; z-index:130; background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding:22px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.info-modal.on{opacity:1; pointer-events:auto;}
.info-sheet{
  width:100%; max-width:400px; max-height:75vh; overflow-y:auto;
  background:rgba(13,14,23,.94); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:22px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);
  transform:scale(.94); transition:transform .25s ease;
}
.info-modal.on .info-sheet{transform:scale(1);}
.info-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.info-head h3{font-size:15px; font-weight:800;}
.info-body{font-size:13px; color:var(--muted); line-height:1.6;}
.info-body p{margin-bottom:10px;}
.info-body strong{color:var(--text);}

/* ===== PWA BANNER ===== */
.pwa-banner{
  display:none; position:fixed; left:12px; right:12px; bottom:88px; z-index:70;
  max-width:calc(var(--maxw) - 24px); margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  align-items:center; gap:12px; box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.pwa-banner .pi{width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--acc),var(--pink)); display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; flex:0 0 auto;}
.pwa-banner .pt{flex:1; min-width:0;}
.pwa-banner .pt b{display:block; font-size:12.5px;}
.pwa-banner .pt span{font-size:10.5px; color:var(--muted);}
.pwa-banner button{background:none; border:none; color:var(--muted); font-size:14px; padding:6px;}
#pwaInstall{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#1a0f0f; border-radius:10px; padding:8px 12px; font-size:11.5px; font-weight:800;}

/* ===== FAQ ===== */
.faq-list{padding:4px 18px 6px; display:flex; flex-direction:column; gap:9px;}
.faq-item{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:700; color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary i{color:var(--gold); font-size:12px; transition:transform .3s ease; flex:0 0 auto;}
.faq-item[open] summary i{transform:rotate(180deg);}
.faq-item[open] summary{border-bottom:1px solid rgba(255,255,255,.08);}
.faq-a{padding:2px 16px 16px; font-size:12.5px; color:var(--muted); line-height:1.6;}

/* ===== CUSTOM ORDER STRIP ===== */
.custom-order{
  margin:18px 18px 8px; padding:22px 18px; border-radius:18px; text-align:center;
  background:linear-gradient(160deg, rgba(124,92,255,.16), rgba(255,94,156,.08));
  border:1px solid rgba(124,92,255,.28);
}
.co-icon{
  width:46px; height:46px; margin:0 auto 12px; border-radius:14px;
  background:linear-gradient(135deg,var(--acc),var(--pink)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow:0 10px 24px rgba(124,92,255,.35);
}
.co-title{font-size:13px; color:var(--text); line-height:1.55; margin-bottom:16px; font-weight:600;}
.co-call{
  display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:800;
  color:#1a0f0f; background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  padding:12px 22px; border-radius:13px; box-shadow:0 8px 22px rgba(232,196,104,.3);
  letter-spacing:.02em;
}

@media (min-width:560px){
  .app{border-left:1px solid var(--line); border-right:1px solid var(--line);}
}
@media (hover:hover) and (pointer:fine){
  .card, .pcard, .genre-card, .promo-card{transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
  .card:hover, .pcard:hover{transform:translateY(-5px); border-color:rgba(232,196,104,.4); box-shadow:0 20px 40px rgba(0,0,0,.5);}
  .genre-card:hover{transform:translateY(-3px); border-color:var(--gold);}
  .promo-card:hover{transform:translateY(-4px);}
  .btn.primary:hover, .co-call:hover, #pwaInstall:hover{filter:brightness(1.08);}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ===== STATS BAR ===== */
.stats-bar{
  display:flex; margin:14px 18px 0; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.stat{flex:1; text-align:center; padding:14px 6px; border-right:1px solid rgba(255,255,255,.08);}
.stat:last-child{border-right:none;}
.stat b{display:block; font-size:16px; font-weight:800; color:var(--gold); text-shadow:0 0 14px rgba(232,196,104,.4);}
.stat b i{font-size:12px; margin-left:2px;}
.stat span{font-size:9.5px; color:var(--muted); font-weight:600;}

/* ===== HOW IT WORKS ===== */
.howit{display:flex; gap:10px; padding:6px 18px 4px;}
.howit-step{
  flex:1; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:14px 10px; text-align:center; box-shadow:0 10px 22px rgba(0,0,0,.3);
}
.hs-num{
  width:26px; height:26px; margin:0 auto 8px; border-radius:50%;
  background:linear-gradient(135deg,var(--acc),var(--pink)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  box-shadow:0 4px 14px rgba(124,92,255,.5);
}
.howit-step b{display:block; font-size:11px; margin-bottom:4px;}
.howit-step span{font-size:9.5px; color:var(--muted); line-height:1.35; display:block;}

/* ===== FOOTER ===== */
.site-footer{
  margin-top:22px; padding:26px 20px 30px; text-align:center;
  border-top:1px solid var(--line);
}
.footer-name{font-size:15px; font-weight:800; margin-bottom:6px;}
.footer-desc{font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:14px; max-width:280px; margin-inline:auto;}
.footer-line{font-size:11.5px; color:var(--muted); margin-bottom:6px;}
.footer-line i{color:var(--acc2); margin-right:5px;}
.footer-copy{font-size:10px; color:#565b70; margin-top:14px;}