/* PlayNexa v10 - style.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050608;--bg2:#090c0f;--bg3:#111519;--bg4:#181e24;
  --gold:#d4982e;--gold2:#f0c84a;--gold3:#ffd700;
  --teal:#28a8a8;--teal2:#60d0d0;
  --px:#fff5d6;--dim:rgba(255,245,214,.7);--dim2:rgba(255,245,214,.35);--dim3:rgba(255,245,214,.15);
  --bo:rgba(212,152,46,.22);--bo2:rgba(40,168,168,.22);
  --sg:0 0 22px rgba(212,152,46,.55);
  --r:12px;--pf:'Press Start 2P',monospace;--ff:'Rajdhani',sans-serif;
  --sw:240px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--px);font-family:var(--ff);overflow-x:hidden;min-height:100vh}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);pointer-events:none;z-index:9990}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}

/* ── NAV ── */
.topnav{position:fixed;top:0;left:0;right:0;height:58px;background:rgba(5,6,8,.97);backdrop-filter:blur(24px);border-bottom:1px solid var(--bo);z-index:500;display:flex;align-items:center;padding:0 1rem;gap:.8rem}
.logo-a{display:flex;align-items:center;gap:.52rem;text-decoration:none;flex-shrink:0}
.logo-a img{height:38px;width:38px;border-radius:50%;border:2px solid var(--gold);box-shadow:var(--sg);image-rendering:pixelated;object-fit:cover}
.logo-n{font-family:var(--pf);font-size:.55rem;color:var(--gold2);text-shadow:0 0 14px rgba(240,200,74,.7)}
@media(max-width:440px){.logo-n{display:none}}
.nav-ls{display:flex;gap:.05rem}@media(max-width:760px){.nav-ls{display:none}}
.nav-a{padding:.28rem .65rem;color:var(--dim2);font-size:.72rem;font-weight:700;letter-spacing:1px;text-decoration:none;border-radius:6px;transition:.17s;border:1px solid transparent;text-transform:uppercase}
.nav-a:hover{color:var(--teal2);border-color:var(--bo2);background:rgba(40,168,168,.06)}
.sb-tog{background:rgba(212,152,46,.12);border:1px solid var(--bo);border-radius:8px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex-shrink:0;color:var(--gold2);padding:0}
.sb-tog:hover{background:rgba(212,152,46,.25);border-color:var(--gold3);box-shadow:var(--sg)}
.srch-wrap{flex:1;position:relative;max-width:280px;margin-left:auto}
.srch-wrap svg{position:absolute;left:.68rem;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--gold);pointer-events:none}
#srch{width:100%;background:rgba(212,152,46,.08);border:1px solid rgba(212,152,46,.3);border-radius:8px;padding:.42rem .82rem .42rem 2.1rem;color:var(--px);font-family:var(--ff);font-size:.92rem;font-weight:600;outline:none;transition:.22s}
#srch::placeholder{color:rgba(240,200,74,.6);font-style:italic}
#srch:focus{border-color:var(--gold3);background:rgba(212,152,46,.14);box-shadow:0 0 14px rgba(212,152,46,.25)}
.rand-btn{background:linear-gradient(135deg,var(--gold3),#c8912a,#7a5008);border:2px solid rgba(255,215,0,.4);border-radius:9px;padding:.44rem 1.1rem;color:#1a0d00;font-family:var(--pf);font-size:.44rem;font-weight:900;cursor:pointer;flex-shrink:0;display:flex;align-items:center;gap:.48rem;transition:.2s;box-shadow:0 0 20px rgba(255,215,0,.4),0 4px 12px rgba(0,0,0,.4);letter-spacing:.5px}
.rand-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 0 35px rgba(255,215,0,.9),0 6px 20px rgba(212,152,46,.5)}
.rand-btn svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:380px){.rand-btn .rbt{display:none}}

/* ── LAYOUT ── */
.layout{display:flex;padding-top:58px;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{width:var(--sw);flex-shrink:0;position:fixed;top:58px;left:0;bottom:0;background:rgba(9,12,15,.98);border-right:1px solid var(--bo);padding:1rem .7rem 1.5rem;overflow-y:auto;z-index:400;scrollbar-width:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sidebar::-webkit-scrollbar{display:none}
.sidebar.closed{transform:translateX(calc(-1 * var(--sw)))}
@media(max-width:700px){.sidebar{display:none}}
.sb-head{font-family:var(--pf);font-size:.38rem;color:var(--gold2);letter-spacing:2px;padding:.2rem .5rem .7rem;text-transform:uppercase;text-shadow:0 0 10px rgba(240,200,74,.5)}
.all-btn{width:100%;display:flex;align-items:center;gap:.55rem;padding:.6rem .75rem;border-radius:9px;border:1px solid var(--gold);background:linear-gradient(135deg,rgba(212,152,46,.2),rgba(212,152,46,.07));color:var(--gold2);cursor:pointer;font-family:var(--ff);font-size:1rem;font-weight:800;transition:.18s;margin-bottom:.15rem;text-align:left}
.all-btn:hover,.all-btn.active{background:linear-gradient(135deg,rgba(255,215,0,.25),rgba(212,152,46,.15));box-shadow:0 0 14px rgba(212,152,46,.3)}
.all-count{margin-left:auto;background:var(--gold3);color:#1a0d00;font-family:var(--pf);font-size:.32rem;padding:.14rem .38rem;border-radius:5px;font-weight:900;min-width:28px;text-align:center}
.sb-div{height:1px;background:linear-gradient(90deg,transparent,var(--bo),transparent);margin:.6rem 0}
.cat-btn{width:100%;display:flex;align-items:center;gap:.55rem;padding:.55rem .72rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--dim);cursor:pointer;font-family:var(--ff);font-size:.98rem;font-weight:700;transition:.17s;text-align:left;margin-bottom:.07rem}
.cat-btn .ci{font-size:1.15rem;width:22px;text-align:center;flex-shrink:0}
.cat-btn .cl{flex:1;font-size:.98rem}
/* عداد الكاتيغوري — واضح وكبير */
.cat-btn .cc{font-family:var(--ff);font-size:.82rem;font-weight:800;background:rgba(255,255,255,.06);color:var(--dim2);padding:.1rem .4rem;border-radius:5px;min-width:28px;text-align:center;border:1px solid rgba(255,255,255,.08)}
.cat-btn:hover{background:rgba(212,152,46,.09);color:var(--px);border-color:rgba(212,152,46,.15)}
.cat-btn.active{background:rgba(212,152,46,.16);border-color:var(--gold);color:var(--gold2)}
.cat-btn.active .cc{background:rgba(212,152,46,.25);color:var(--gold2);border-color:rgba(212,152,46,.3);font-weight:900}

/* ── CONTENT ── */
.content{flex:1;padding:0 1.2rem 2.5rem;min-width:0;margin-left:0;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
.content.sb-open{margin-left:var(--sw)}
@media(max-width:700px){.content{margin-left:0!important}}
footer{border-top:1px solid var(--bo);padding:1.2rem;margin-left:0;transition:margin-left .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
footer.sb-open{margin-left:var(--sw)}
@media(max-width:700px){footer{margin-left:0!important}}

/* ── HERO ── */
.hero{padding:1.8rem 0 1.1rem;display:flex;align-items:center;gap:1.2rem;position:relative;overflow:hidden}
/* إضاءة Hero من المركز لا من اليسار */
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 100% at 30% 50%,rgba(212,152,46,.12) 0%,transparent 65%),
             radial-gradient(ellipse 40% 80% at 70% 50%,rgba(40,168,168,.05) 0%,transparent 65%);
  pointer-events:none}
.hlogo{width:68px;height:68px;border-radius:50%;border:3px solid var(--gold);box-shadow:var(--sg),0 0 45px rgba(212,152,46,.18);object-fit:cover;image-rendering:pixelated;flex-shrink:0;animation:glow 3s ease-in-out infinite;position:relative;z-index:1}
@keyframes glow{0%,100%{box-shadow:var(--sg),0 0 30px rgba(212,152,46,.12)}50%{box-shadow:0 0 38px rgba(255,215,0,.9),0 0 75px rgba(212,152,46,.28)}}
.htxt{position:relative;z-index:1}
.htxt h1{font-family:var(--pf);font-size:clamp(.58rem,2.1vw,1rem);color:var(--gold2);text-shadow:0 0 22px rgba(240,200,74,.7);letter-spacing:1.5px;line-height:1.8;margin-bottom:.32rem}
.htxt h1 span{color:var(--teal2);text-shadow:0 0 20px rgba(96,208,208,.7)}
.htxt p{font-size:.95rem;color:var(--dim);font-weight:600;line-height:1.5;margin-bottom:.6rem}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
/* كل الـ chips بنفس الإضاءة والوضوح */
.chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:.28rem .68rem;font-size:.85rem;font-weight:700;color:var(--px);backdrop-filter:blur(4px)}
.chip.g{border-color:var(--gold);color:var(--gold2);background:rgba(212,152,46,.12);text-shadow:0 0 8px rgba(240,200,74,.4)}
.chip.t{border-color:var(--teal);color:var(--teal2);background:rgba(40,168,168,.1);text-shadow:0 0 8px rgba(96,208,208,.4)}

/* mobile cats */
.mob-cats{display:none;gap:.3rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:none;margin-bottom:.45rem}
.mob-cats::-webkit-scrollbar{display:none}
@media(max-width:700px){.mob-cats{display:flex}}
.mob-cb{background:var(--bg3);border:1px solid var(--bo);border-radius:7px;padding:.3rem .68rem;color:var(--dim2);font-family:var(--pf);font-size:.28rem;cursor:pointer;white-space:nowrap;transition:.16s;flex-shrink:0}
.mob-cb.active{background:rgba(212,152,46,.14);border-color:var(--gold);color:var(--gold2)}

.ad{border:1px dashed rgba(212,152,46,.07);border-radius:var(--r);height:50px;display:flex;align-items:center;justify-content:center;color:rgba(255,245,214,.04);font-family:var(--pf);font-size:.22rem;letter-spacing:3px;margin:.35rem 0 .95rem}

.sh{display:flex;align-items:center;gap:.55rem;margin:1.5rem 0 .85rem;padding-bottom:.48rem;border-bottom:1px solid var(--bo);position:relative}
.sh::after{content:'';position:absolute;bottom:-1px;left:0;width:42px;height:2px;background:linear-gradient(90deg,var(--gold3),transparent)}
.sh h2{font-family:var(--pf);font-size:.48rem;color:var(--gold2);letter-spacing:1.5px;text-shadow:0 0 12px rgba(240,200,74,.4)}
.sh .sc{font-family:var(--ff);font-size:.82rem;font-weight:700;color:var(--dim3);margin-left:auto}

/* ── GRID ── */
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:.82rem;margin-bottom:2rem}
@media(max-width:520px){.gg{grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:.52rem}}
.gc{background:var(--bg3);border-radius:var(--r);border:1px solid rgba(212,152,46,.1);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:all .25s cubic-bezier(.175,.885,.32,1.275)}
.gc:hover{transform:translateY(-8px) scale(1.03);border-color:var(--gold);box-shadow:0 0 30px rgba(212,152,46,.35),0 16px 32px rgba(0,0,0,.6)}
.gt{position:relative;width:100%;padding-top:62.5%;overflow:hidden;background:var(--bg4)}
.gt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .42s;display:block}
.gc:hover .gt img{transform:scale(1.08)}
.gt::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(5,6,8,.6));pointer-events:none}
.pov{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(5,6,8,.42);opacity:0;transition:opacity .18s}
.gc:hover .pov{opacity:1}
.pbtn{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--gold3),var(--gold));display:flex;align-items:center;justify-content:center;transform:scale(.6);transition:transform .22s;box-shadow:0 0 28px rgba(255,215,0,.7)}
.gc:hover .pbtn{transform:scale(1)}
.pbtn svg{width:18px;height:18px;color:#1a0d00;margin-left:3px}
.badge{position:absolute;top:.38rem;left:.38rem;font-family:var(--pf);font-size:.26rem;padding:.12rem .28rem;border-radius:4px;z-index:3}
.hot{background:linear-gradient(135deg,#c0392b,#8b0000);color:#fff;box-shadow:0 0 10px rgba(192,57,43,.5)}
.new{background:linear-gradient(135deg,#0f7070,#054040);color:#60d0d0;border:1px solid rgba(96,208,208,.3)}
.gi{padding:.44rem .62rem;display:flex;align-items:center;gap:.22rem}
.gn{font-weight:700;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.gc-cat{font-family:var(--pf);font-size:.22rem;color:var(--teal2);padding:.1rem .26rem;border:1px solid var(--bo2);border-radius:3px;white-space:nowrap;flex-shrink:0}
.empty{grid-column:1/-1;text-align:center;padding:3.5rem 1rem;color:var(--dim3);font-family:var(--pf);font-size:.44rem;line-height:3}

.fl{font-family:var(--pf);font-size:.38rem;color:var(--gold2)}
.fls{display:flex;gap:.75rem;flex-wrap:wrap}
.fls a{color:var(--dim2);font-size:.72rem;font-weight:700;text-decoration:none;transition:.16s}
.fls a:hover{color:var(--teal2)}
.fc{font-family:var(--pf);font-size:.24rem;color:var(--dim3)}
@keyframes fi{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero{animation:fi .45s ease both}#tg,#ag{animation:fi .4s .08s ease both}

/* game page */
.bar{height:50px;background:rgba(5,6,8,.98);border-bottom:1px solid var(--bo);display:flex;align-items:center;padding:0 .8rem;gap:.6rem;flex-shrink:0}
.g-btn{display:flex;align-items:center;gap:.36rem;text-decoration:none;font-family:var(--pf);font-size:.36rem;padding:.32rem .6rem;border-radius:7px;transition:.18s;cursor:pointer;border:1px solid transparent;background:none;white-space:nowrap;color:inherit}
.g-back{border-color:var(--bo);background:rgba(212,152,46,.08);color:var(--px)}
.g-back:hover{border-color:var(--teal2);color:var(--teal2)}
.g-title{font-family:var(--pf);font-size:.45rem;color:var(--gold2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:center}
.g-fs{background:linear-gradient(135deg,var(--gold3),var(--gold),#7a5008);color:#1a0d00;border:none;font-weight:900}
.g-fs:hover{box-shadow:0 0 22px rgba(255,215,0,.7);transform:translateY(-1px)}
.g-tab{border-color:var(--bo2);background:rgba(40,168,168,.08);color:var(--teal2)}
.game-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#000;padding:.65rem;overflow:hidden}
.game-frame{width:100%;height:100%;max-width:1200px;max-height:740px;border:2px solid rgba(212,152,46,.15);border-radius:10px;overflow:hidden;box-shadow:0 0 50px rgba(0,0,0,.9);background:#000;transition:all .3s}
.game-frame iframe{width:100%;height:100%;border:none;display:block}
body.fs .bar{display:none}
body.fs .game-wrap{padding:0}
body.fs .game-frame{max-width:none;max-height:none;border:none;border-radius:0;box-shadow:none}