:root{}
:root{
  --violet:#8B5CF6; --violet-d:#6D28D9; --violet-l:#A78BFA;
  --lime:#C8FF4D; --hot:#FF3D81;
  --ink:#0e0c16; --ink2:#141020; --card:#1b1630; --card2:#211a3a;
  --line:#2c2543; --text:#ECE9F6; --muted:#A79FC4;
  --rail:64px; --topbar:64px; --maxw:1320px;
  --disp:"Tajawal",system-ui,sans-serif; --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* preview note */
.pv-note{background:linear-gradient(90deg,var(--violet-d),var(--hot));color:#fff;text-align:center;
  font-family:var(--disp);font-weight:700;padding:.55rem 1rem;font-size:.92rem}
.pv-note span{opacity:.9;font-weight:500}

/* ---------- TOP BAR ---------- */
.topbar{position:sticky;top:0;z-index:40;height:var(--topbar);
  background:linear-gradient(90deg,var(--violet-d),var(--violet));
  display:flex;align-items:center;gap:1rem;padding:0 clamp(.8rem,2vw,1.4rem);
  border-bottom:1px solid rgba(255,255,255,.12)}
.logo{font-family:var(--disp);font-weight:900;font-size:1.5rem;letter-spacing:.5px;white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.logo b{color:#fff}.logo i{color:var(--lime);font-style:normal}
.logo .pad{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.15);display:grid;place-items:center}
.search{flex:1;max-width:560px;margin:0 auto;position:relative}
.search input{width:100%;height:42px;border-radius:22px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);color:#fff;padding:0 2.6rem 0 1rem;font-family:var(--body);font-size:.95rem}
.search input::placeholder{color:rgba(255,255,255,.75)}
.search input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,255,77,.25)}
.search svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:rgba(255,255,255,.85)}
.tb-actions{display:flex;align-items:center;gap:.5rem}
.btn{font-family:var(--disp);font-weight:700;font-size:.85rem;border-radius:20px;padding:.5rem .9rem;cursor:pointer;white-space:nowrap;border:1px solid transparent}
.btn-install{background:var(--lime);color:#15121f}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.btn-icon{background:rgba(255,255,255,.12);color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0}
.btn-icon svg{width:18px;height:18px;fill:#fff}

/* ---------- LAYOUT (main + right rail) ---------- */
.shell{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr var(--rail);gap:0}
.main{min-width:0;padding:1rem clamp(.6rem,1.6vw,1.2rem) 3rem}

/* right icon rail = the side category menu */
.rail{position:sticky;top:var(--topbar);align-self:start;height:calc(100vh - var(--topbar));
  background:var(--ink2);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem 0;overflow-y:auto}
.rail::-webkit-scrollbar{width:0}
.rail-item{position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:.16s}
.rail-item svg{width:22px;height:22px;fill:currentColor}
.rail-item:hover{background:var(--card2);color:#fff}
.rail-item.active{color:#fff;background:linear-gradient(135deg,var(--violet),var(--violet-d))}
.rail-item .tip{position:absolute;right:56px;top:50%;transform:translateY(-50%);background:#000;color:#fff;
  font-family:var(--disp);font-weight:700;font-size:.8rem;padding:.3rem .6rem;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.16s}
.rail-item:hover .tip{opacity:1}
.rail-sep{width:26px;height:1px;background:var(--line);margin:.35rem 0}

/* ---------- TICKER ---------- */
.ticker{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:1.1rem}
.ticker-track{display:flex;gap:2rem;padding:.5rem 1rem;white-space:nowrap;animation:scroll 26s linear infinite;font-size:.86rem}
.ticker-track b{color:var(--lime)}
.ticker .dot{color:var(--hot)}
@keyframes scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- SECTION HEADERS ---------- */
.sec{margin:1.6rem 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;gap:1rem}
.sec-head h2{font-family:var(--disp);font-weight:900;font-size:clamp(1.1rem,2.2vw,1.5rem);margin:0;display:flex;align-items:center;gap:.5rem}
.sec-head h2 .bar{width:5px;height:1.15em;border-radius:3px;background:linear-gradient(var(--violet),var(--hot))}
.sec-more{font-family:var(--disp);font-weight:700;font-size:.82rem;color:var(--lime);cursor:pointer;white-space:nowrap}
.sec-more:hover{text-decoration:underline}

/* ---------- CARD GRID / SHELF ---------- */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.strip{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:6px}.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* GAME CARD */
.card{position:relative;border-radius:15px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:.18s;isolation:isolate}
.card:hover{transform:translateY(-4px);border-color:var(--violet-l);box-shadow:0 10px 26px -8px rgba(139,92,246,.5)}
.card .thumb{aspect-ratio:1/1;display:grid;place-items:center;font-family:var(--disp);font-weight:900;font-size:1.02rem;color:#fff;text-align:center;padding:.5rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.card .cap{padding:.5rem .6rem;font-family:var(--disp);font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{position:absolute;top:.5rem;font-family:var(--disp);font-weight:800;font-size:.72rem;padding:.16rem .45rem;border-radius:8px;display:flex;align-items:center;gap:.2rem;z-index:2;backdrop-filter:blur(2px)}
.b-rate{inset-inline-start:.5rem;background:rgba(0,0,0,.62);color:var(--lime)}
.b-rate .star{color:#FFD24D}
.b-new{inset-inline-end:.5rem;background:var(--violet);color:#fff}
.b-hot{inset-inline-end:.5rem;background:var(--hot);color:#fff}

/* small tile (playing-now strip) */
.tile{flex:0 0 auto;width:104px}
.tile .thumb{aspect-ratio:1/1;border-radius:13px;font-size:.8rem}

/* FEATURED (top rated) */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feat .card .thumb{aspect-ratio:16/10;font-size:1.3rem}
.feat .genre{position:absolute;bottom:.55rem;inset-inline-start:.55rem;background:rgba(0,0,0,.6);color:var(--violet-l);font-family:var(--disp);font-weight:700;font-size:.75rem;padding:.15rem .5rem;border-radius:8px;z-index:2}

/* ---------- SEO INTRO ---------- */
.intro{background:linear-gradient(160deg,var(--card2),var(--ink2));border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.5rem}
.intro h3{font-family:var(--disp);font-weight:900;font-size:1.25rem;margin:.2rem 0 .5rem}
.intro h4{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--violet-l);margin:1rem 0 .3rem}
.intro p{color:var(--muted);font-size:.95rem;margin:.3rem 0}
.intro .more{display:inline-block;margin-top:.7rem;font-family:var(--disp);font-weight:700;color:var(--lime);cursor:pointer;border:1px solid var(--line);border-radius:20px;padding:.35rem .9rem}

/* ---------- TAG CLOUD ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.55rem}
.tag{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:.42rem .85rem;font-family:var(--disp);font-weight:700;font-size:.85rem;color:var(--text);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:.35rem}
.tag:hover{border-color:var(--violet-l);color:#fff;background:var(--card2)}
.tag .ic{color:var(--violet-l)}

/* ---------- FOOTER ---------- */
.foot{background:linear-gradient(var(--ink2),var(--ink));border-top:1px solid var(--line);margin-top:2rem}
.foot-top{height:3px;background:linear-gradient(90deg,var(--violet),var(--lime),var(--hot))}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.2rem;display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
.foot small{color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:1rem;font-family:var(--disp);font-weight:700;font-size:.86rem}
.foot-links a{color:var(--muted)}.foot-links a:hover{color:var(--lime)}

/* ---------- MOBILE BOTTOM NAV (hidden on desktop) ---------- */
.botnav{display:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .grid5{grid-template-columns:repeat(4,1fr)}
  .feat{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  :root{--rail:0px}
  .rail{display:none}
  .shell{grid-template-columns:1fr}
  .tb-actions .btn-ghost{display:none}
  .feat{grid-template-columns:1fr}
  /* shelves become horizontal scroll on phones */
  .grid5{display:flex;overflow-x:auto;gap:.7rem;padding-bottom:.4rem;scrollbar-width:thin}
  .grid5>.card{flex:0 0 42%}
  .main{padding-bottom:5rem}
  .botnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:50;height:60px;
    background:var(--ink2);border-top:1px solid var(--line);justify-content:space-around;align-items:center}
  .botnav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-family:var(--disp);font-weight:700;font-size:.7rem}
  .botnav a.active{color:#fff}
  .botnav svg{width:22px;height:22px;fill:currentColor}
  .botnav .fab{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--violet-d));margin-top:-18px;color:#fff}
}
@media(max-width:420px){.grid5>.card{flex:0 0 55%}}

/* ===== ربط الصور + إصلاحات نهائية نظيفة (v1.0.17) ===== */
.logo,.foot .logo{direction:ltr}

/* بطاقات: صور حقيقية + زوايا مشطوفة + الاسم فوق الصورة */
.card{border-radius:16px;overflow:hidden}
.card .thumb{position:relative;overflow:hidden;border-radius:16px;padding:0}
.card .thumb .pv-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px}
.card .thumb .pv-emoji{font-size:1.6rem;opacity:.6}
.card .thumb .card-t{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:.4rem .55rem;
  background:linear-gradient(transparent,rgba(6,4,14,.92));color:#fff;font-family:var(--disp);font-weight:800;
  font-size:.78rem;line-height:1.25;text-align:start;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.card .badge{z-index:3}
.tile{width:100px}
.tile .thumb,.tile .thumb .pv-img{border-radius:14px}
.tile .thumb .card-t{font-size:.64rem;padding:.26rem .36rem}

/* الأعلى تقييماً */
.feat .card .thumb{position:relative;overflow:hidden;border-radius:16px}
.feat .card .thumb .pv-img{width:100%;height:100%;object-fit:cover;display:block}
.feat .card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,16,.85),transparent 62%);z-index:1}
.feat .card .thumb .feat-title{position:absolute;bottom:.6rem;inset-inline:.75rem;z-index:2;color:#fff;font-family:var(--disp);font-weight:900;font-size:1.02rem;line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.feat .card .genre,.feat .card .badge{z-index:2}

/* مبدّل اللغة */
.tb-lang{display:inline-flex;gap:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:2px}
.tb-lang .lang-btn{font-family:var(--disp);font-weight:800;font-size:.72rem;color:#fff;padding:3px 9px;border-radius:12px;opacity:.72;cursor:pointer}
.tb-lang .lang-btn.on{background:var(--lime);color:#15121f;opacity:1}

/* مساحات أضيق كثيرًا + خط أصغر درجة */
body{font-size:14.5px}
.main{padding:.35rem clamp(.5rem,1.2vw,.9rem) 1.4rem}
.sec{margin:.5rem 0}
.sec-head{margin-bottom:.35rem}
.sec-head h2{font-size:clamp(.95rem,1.7vw,1.18rem)}
.sec-head .bar{height:1em}
.ticker{margin-bottom:.45rem}
.ticker-track{font-size:.8rem}
.grid5{gap:.6rem}
.strip{gap:.55rem;scrollbar-width:thin}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.feat{gap:.7rem}
.intro{padding:1rem 1.15rem}
.intro h3{font-size:1.06rem}
.intro h4{font-size:.9rem}
.intro p{font-size:.86rem}
.tag .ic svg{width:16px;height:16px;fill:currentColor}
.rail-item svg{width:22px;height:22px;fill:currentColor}

/* الشريط الجانبي: يمين بالعربي/يسار بالإنجليزي، ثابت (sticky) ضمن المحتوى بين الهيدر والفوتر،
   والاسم يظهر بجانب الأيقونة (تلميح جانبي) عند المرور — لا يتداخل مع الهيدر/الفوتر */
.shell{grid-template-columns:var(--rail) 1fr}
.rail{grid-column:1;border-inline-start:0;border-inline-end:1px solid var(--line)}
.main{grid-column:2;min-width:0}
.rail-item .tip{inset-inline-end:calc(100% + 6px);inset-inline-start:auto}

/* وسوم ملوّنة جمالية (ألوان متناوبة) */
.tags .tag{color:#fff;border:0;transition:.15s}
.tags .tag:nth-child(6n+1){background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.tags .tag:nth-child(6n+2){background:linear-gradient(135deg,#FF3D81,#b0165a)}
.tags .tag:nth-child(6n+3){background:linear-gradient(135deg,#0EA5E9,#0369A1)}
.tags .tag:nth-child(6n+4){background:linear-gradient(135deg,#10B981,#047857)}
.tags .tag:nth-child(6n+5){background:linear-gradient(135deg,#F59E0B,#B45309)}
.tags .tag:nth-child(6n+6){background:linear-gradient(135deg,#A855F7,#7E22CE)}
.tags .tag .ic,.tags .tag .ic svg{color:#fff;fill:#fff}
.tags .tag:hover{filter:brightness(1.12);transform:translateY(-1px)}
@media(max-width:760px){ .shell{grid-template-columns:1fr} .rail{display:none} .main{grid-column:auto} }

/* ===== 1.0.18: أيقونات ملوّنة + إطار لكل لعبة/تصنيف + تنقّل بالأسهم بلا شريط تمرير ===== */
.rail-emo{order:1;font-size:20px;line-height:1;width:24px;text-align:center;flex:0 0 24px}
.rail-item{gap:.6rem}
.rail{height:fit-content;max-height:calc(100vh - var(--topbar) - 14px);align-self:start;top:calc(var(--topbar) + 7px);overflow-y:auto;overflow-x:hidden}
.card{border:1px solid rgba(255,255,255,.14)}
.card:hover{border-color:var(--violet-l)}
.feat .card{border:1px solid rgba(255,255,255,.14)}
.sec{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:.8rem .9rem;margin:.65rem 0;position:relative}
.sec .intro,.intro{background:transparent;border:0;padding:0}
.grid5{display:flex;gap:.6rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
.grid5::-webkit-scrollbar{display:none}
.grid5 > .card{flex:0 0 148px;width:148px}
.strip{scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.sh-arrow{position:absolute;top:calc(50% + 14px);transform:translateY(-50%);z-index:6;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(20,16,32,.92);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.45);opacity:.92;transition:.15s}
.sh-arrow:hover{background:var(--violet);opacity:1}
.sh-arrow.prev{inset-inline-start:4px}
.sh-arrow.next{inset-inline-end:4px}
@media(max-width:760px){ .grid5 > .card{flex:0 0 44%;width:44%} .sh-arrow{display:none} }

/* ===== 1.0.19: تثبيت الشريط الجانبي بمتانة (flex) + ملء الصفوف + تقليص أكثر ===== */
.shell{display:flex;align-items:flex-start;grid-template-columns:none}
.rail{order:-1;flex:0 0 var(--rail);position:sticky;top:calc(var(--topbar) + 6px);height:fit-content;
  max-height:calc(100vh - var(--topbar) - 12px);overflow-y:auto;overflow-x:hidden;align-self:flex-start}
.main{order:0;flex:1 1 auto;min-width:0}
.rail-item{justify-content:center;gap:.5rem;padding:0 8px}
.rail-emo{font-size:19px;flex:0 0 auto;width:auto}
body{font-size:13.5px}
.main{padding:.3rem clamp(.4rem,1vw,.8rem) 1.2rem}
.sec{padding:.5rem .65rem;margin:.5rem 0}
.sec-head{margin-bottom:.3rem}
.sec-head h2{font-size:clamp(.9rem,1.5vw,1.08rem)}
.ticker{margin-bottom:.4rem}
.grid5{gap:.5rem}
.grid5 > .card{flex:0 0 140px;width:140px}
.strip{gap:.5rem}
.tile{width:96px}
.intro h3{font-size:1rem}
.intro h4{font-size:.86rem}
.intro p{font-size:.83rem}
.card,.feat .card{border:1px solid rgba(255,255,255,.22)}
.card:hover,.feat .card:hover{border-color:var(--lime);box-shadow:0 6px 18px -6px rgba(139,92,246,.55)}
.sh-arrow{top:auto;bottom:8px;transform:none}
@media(max-width:760px){ .shell{display:block} .rail{display:none} }

/* ================= صفحات داخلية Time4Gam (نفس هوية الرئيسية) ================= */
.container{max-width:var(--maxw);margin:0 auto;width:100%}
.t4g-page{min-width:0}

/* ترويسة التصنيف/البحث */
.t4g-archive-head{background:linear-gradient(160deg,var(--card2),var(--ink2));border:1px solid var(--line);
  border-radius:16px;padding:1rem 1.15rem;margin:.5rem 0}
.t4g-archive-head .sec-eyebrow{color:var(--violet-l);font-family:var(--disp);font-weight:700;font-size:.8rem;margin-bottom:.2rem}
.t4g-archive-head h1{font-family:var(--disp);font-weight:900;font-size:clamp(1.3rem,3vw,2rem);margin:0;color:#fff}
.t4g-archive-head p{color:var(--muted);margin:.4rem 0 0;line-height:1.7;font-size:.9rem}

/* شبكة ألعاب متعدّدة الصفوف (لعرض كل ألعاب التصنيف) */
.t4g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
@media(max-width:520px){ .t4g-grid{grid-template-columns:repeat(2,1fr)} }

/* ترقيم الصفحات */
.t4g-pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:1.2rem 0 .3rem}
.t4g-pagination a,.t4g-pagination span{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:var(--disp);
  font-weight:800;font-size:.9rem;text-decoration:none;transition:.15s}
.t4g-pagination a:hover{border-color:var(--violet-l);color:#fff}
.t4g-pagination .current{background:linear-gradient(135deg,var(--violet),var(--violet-d));border-color:transparent;color:#fff}
.t4g-pagination .dots{border:0;background:transparent}

/* مشغّل اللعبة */
.t4g-player-wrap{max-width:1000px;margin:0 auto}
.t4g-player-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:.4rem 0 .6rem}
.t4g-player-head h1{font-family:var(--disp);font-weight:900;font-size:clamp(1.2rem,2.6vw,1.7rem);margin:0;color:#fff}
.t4g-player-cat{color:var(--violet-l);font-family:var(--disp);font-weight:700;font-size:.9rem;text-decoration:none}
.t4g-fullscreen-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--lime);color:#15121f;border:0;
  border-radius:12px;padding:.5rem .9rem;font-family:var(--disp);font-weight:800;font-size:.82rem;cursor:pointer;white-space:nowrap}
.t4g-player-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
.t4g-player-stage iframe,.t4g-player-stage embed,.t4g-player-stage object,.t4g-player-stage video,.t4g-player-stage canvas{
  position:absolute;inset:0;width:100%!important;height:100%!important;border:0;display:block}
.t4g-player-stage:fullscreen{aspect-ratio:auto;height:100vh;border-radius:0}
.t4g-player-desc{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:1rem 1.15rem;margin-top:.9rem}
.t4g-player-desc h2{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:#fff;margin:.2rem 0 .3rem}
.t4g-player-desc p{color:var(--muted);line-height:1.8;margin:0 0 .6rem;font-size:.9rem}
.t4g-related{margin-top:1rem}
.t4g-related .sec-head{margin-bottom:.4rem}
.t4g-related h2{font-family:var(--disp);font-weight:900;font-size:1.05rem;color:#fff;margin:0}

/* صفحات المحتوى/القانونية */
.t4g-doc-main{padding:.3rem clamp(.4rem,1vw,.8rem) 1.4rem}
.t4g-doc-hero{background:linear-gradient(160deg,var(--card2),var(--ink2));border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;margin:.5rem 0 .9rem}
.t4g-crumbs{display:flex;gap:.4rem;align-items:center;color:var(--muted);font-size:.82rem;font-family:var(--disp);font-weight:700;margin-bottom:.5rem}
.t4g-crumbs a{color:var(--violet-l);text-decoration:none}
.t4g-doc-title{font-family:var(--disp);font-weight:900;font-size:clamp(1.4rem,3vw,2.1rem);color:#fff;margin:0}
.t4g-doc-sub{color:var(--muted);margin:.4rem 0 0;font-size:.92rem}
.t4g-doc-rule{display:block;height:3px;width:70px;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--lime));margin-top:.7rem}
.t4g-doc{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.4rem;color:var(--text);line-height:1.9}
.t4g-doc h2{font-family:var(--disp);font-weight:800;color:#fff;font-size:1.15rem;margin:1.2rem 0 .5rem}
.t4g-doc h3{font-family:var(--disp);font-weight:700;color:#fff;font-size:1rem;margin:1rem 0 .4rem}
.t4g-doc p,.t4g-doc li{color:var(--muted);font-size:.92rem}
.t4g-doc a{color:var(--violet-l)}
.t4g-doc ul,.t4g-doc ol{padding-inline-start:1.3rem}

/* شبكة الرئيسية القديمة إن وُجدت — تأمين */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}

/* مقالات المدونة (تأمين قراءة) */
.t4g-blog{color:var(--text);line-height:1.9}
.t4g-blog a{color:var(--violet-l)}
.t4g-blog img{border-radius:12px;max-width:100%;height:auto}
.t4g-blog h1,.t4g-blog h2,.t4g-blog h3{font-family:var(--disp);color:#fff}
.t4g-blog p,.t4g-blog li{color:var(--muted)}

/* ================= 1.0.21: لوجو مربّع + فوتر غني + شريط يتوسّع + أسهم أوضح + زر أعلى ================= */

/* اللوجو: Time [4] Gam */
.logo{direction:ltr;display:inline-flex;align-items:center;gap:1px;font-family:var(--disp);font-weight:900;font-size:1.32rem}
.logo b{color:#fff}
.logo i{color:var(--lime);font-style:normal}
.logo .pad{display:none}
.logo-box{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:9px;
  background:linear-gradient(135deg,var(--hot),#c01765);color:#fff;font-weight:900;font-size:1em;margin:0 2px;line-height:1}

/* فوتر غني (أصغر) */
.foot{background:linear-gradient(180deg,var(--ink2),var(--ink));border-top:1px solid var(--line);margin-top:1.2rem;padding:0}
.foot .foot-top{display:none}
.foot-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:1.2rem;
  padding:1.4rem clamp(.8rem,3vw,2rem) 1rem;text-align:start}
.foot-brand .logo{font-size:1.28rem}
.foot-desc{color:var(--muted);font-size:.82rem;line-height:1.7;margin:.5rem 0 .7rem;max-width:34ch}
.foot-social{display:flex;gap:.5rem;flex-wrap:wrap}
.soc{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;transition:.15s}
.soc svg{width:17px;height:17px}
.soc:hover{transform:translateY(-2px);filter:brightness(1.08)}
.soc-tt{background:#000}
.soc-fb{background:#1877F2}
.soc-yt{background:#FF0000}
.soc-ig{background:radial-gradient(circle at 30% 110%,#feda75,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5)}
.soc-x{background:#000}
.foot-col{min-width:0}
.foot-col h4{font-family:var(--disp);font-weight:800;color:#fff;font-size:.92rem;margin:0 0 .5rem}
.foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:.84rem;padding:.18rem 0;transition:.15s}
.foot-col a:hover{color:var(--lime)}
.foot-bar{border-top:1px solid var(--line);text-align:center;padding:.7rem 1rem}
.foot-bar small{color:var(--muted);font-size:.78rem}
@media(max-width:760px){ .foot-in{grid-template-columns:1fr 1fr;gap:1rem} .foot-brand{grid-column:1/-1} }

/* الشريط الجانبي: يتوسّع بالمرور ويُظهر اسم التصنيف بجانب الأيقونة (تراكب بلا إزاحة للمحتوى) */
.rail{overflow:visible;height:fit-content;z-index:60}
.rail-item{width:var(--rail);overflow:hidden;justify-content:flex-start;gap:.6rem;padding:0 12px;border-radius:0;
  transition:width .16s ease,background .16s}
.rail-item .rail-emo{order:1;flex:0 0 24px;font-size:19px}
.rail-item .tip{position:static;order:2;opacity:0;white-space:nowrap;font-family:var(--disp);font-weight:700;
  font-size:.85rem;color:var(--text);transition:opacity .14s}
.rail:hover .rail-item{width:206px;overflow:visible;background:var(--card2)}
.rail:hover .rail-item.active{background:linear-gradient(135deg,var(--violet),var(--violet-d))}
.rail:hover .tip{opacity:1}

/* الأسهم: أوضح + منتصف كل صف */
.sh-arrow{top:50%;bottom:auto;transform:translateY(-50%);width:40px;height:40px;font-size:24px;
  background:var(--violet);color:#fff;border:2px solid rgba(255,255,255,.25);opacity:1;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.sh-arrow:hover{background:var(--violet-d)}

/* زر العودة لأعلى */
.to-top{position:fixed;inset-inline-end:16px;bottom:16px;z-index:200;width:46px;height:46px;border-radius:50%;
  border:0;background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transform:translateY(10px);transition:.2s}
.to-top svg{width:22px;height:22px}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{filter:brightness(1.14)}
@media(max-width:760px){ .to-top{bottom:70px} }

/* ================= 1.0.22: شريط جانبي محتوى (لوحة واحدة نظيفة) + وسوم أصغر + كل التصنيفات ================= */
/* الشريط: غلاف خارجي 64px (فتحة flex) + غلاف داخلي يتمرّر عموديًا ويتّسع أفقيًا بالمرور — لا يغطّي الفوتر/اللوجو */
.rail{flex:0 0 var(--rail);position:sticky;top:calc(var(--topbar) + 6px);align-self:flex-start;height:fit-content;
  overflow:visible;background:none;border:0;z-index:60}
.rail-scroll{width:var(--rail);max-height:calc(100vh - var(--topbar) - 16px);overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:3px;padding:6px 0;background:var(--ink2);
  border-inline-end:1px solid var(--line);border-radius:0 0 14px 0;transition:width .17s ease}
.rail:hover .rail-scroll{width:212px;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.rail-item{width:100%;height:42px;display:flex;align-items:center;justify-content:flex-start;gap:.6rem;
  padding:0 13px;border-radius:0;overflow:hidden;color:var(--muted);background:none;transition:background .14s,color .14s}
.rail:hover .rail-item{width:100%;overflow:hidden;background:none}
.rail-item:hover,.rail:hover .rail-item:hover{background:rgba(255,255,255,.07);color:#fff}
.rail-item.active,.rail:hover .rail-item.active{color:#fff;background:none}
.rail-item.active .rail-emo{filter:drop-shadow(0 0 6px var(--violet))}
.rail-emo{flex:0 0 24px;width:24px;text-align:center;font-size:19px;line-height:1;order:0}
.rail .tip{position:static;order:1;opacity:0;white-space:nowrap;font-family:var(--disp);font-weight:700;
  font-size:.85rem;color:inherit;background:none;padding:0;transform:none;inset:auto;transition:opacity .14s}
.rail:hover .tip{opacity:1}
.rail-sep{height:1px;width:auto;background:var(--line);margin:4px 10px;flex:0 0 auto}

/* سحابة الوسوم: أيقونات أصغر + شرائح أصغر لتستوعب تصنيفات أكثر */
.tags{gap:.42rem}
.tag{padding:.3rem .7rem;font-size:.82rem;gap:.3rem}
.tag .ic{font-size:.92em}
.tag .ic svg{width:14px;height:14px}

/* ================= 1.0.23: شريط ثابت كامل الارتفاع + سهمَا أعلى/أسفل + تقليص أقسام الرئيسية ================= */
/* الشريط: ثابت من أسفل الهيدر حتى أسفل الصفحة؛ المحتوى والفوتر يُزاحان ليتركا مكانه (فلا يغطّي شيئًا) */
.shell{display:block}
.main{padding-inline-end:var(--rail)}
.rail{position:fixed;top:var(--topbar);bottom:0;inset-inline-end:0;inset-inline-start:auto;width:var(--rail);
  height:auto;max-height:none;z-index:60;display:flex;flex-direction:column;background:var(--ink2);
  border-inline-start:1px solid var(--line);border-inline-end:0;overflow:visible;align-self:auto;flex:0 0 auto}
.rail-nav{flex:0 0 22px;display:none;align-items:center;justify-content:center;background:var(--card2);
  color:var(--muted);border:0;cursor:pointer;font-size:11px;line-height:1;width:var(--rail)}
.rail-nav:hover{color:#fff;background:var(--violet)}
.rail-nav.show{display:flex}
.rail-scroll{flex:1 1 auto;width:var(--rail);max-height:none;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;border-radius:0;box-shadow:none}
.rail-scroll::-webkit-scrollbar{display:none}
.rail:hover .rail-scroll{width:212px;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.foot{padding-inline-end:var(--rail)}
@media(max-width:760px){ .rail{display:none} .main{padding-inline-end:0} .foot{padding-inline-end:0} }

/* «قيد اللعب الآن»: إزالة الفراغات الزائدة */
#top.sec{padding:.4rem .6rem .45rem}
#top .sec-head{margin-bottom:.15rem}
.strip{align-items:flex-start;padding:0;margin:0}
.tile{width:92px}

/* «الأعلى تقييماً»: ضغط الحجم */
.feat{gap:.55rem}
.feat .card .thumb{aspect-ratio:16/8}
.feat .card .feat-title{font-size:.92rem;bottom:.45rem}

/* ================= 1.0.24: كتلة البطاقة + مبدّل ألوان المظهر + قائمة الجوال + عن الشركة ================= */
/* إصلاح فراغات «قيد اللعب»: البطاقة عنصر كتلي (يُزيل فجوة السطر الرأسية حول المربّعات) */
.card{display:block}
.tile{align-self:flex-start}
#top .strip{padding:0;margin:0}

/* بوب-أب المظهر (ألوان) في الشريط العلوي */
.t4g-theme-wrap{position:relative;display:inline-block}
.theme-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--card2);border:1px solid var(--line);
  border-radius:14px;padding:.75rem;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:300;min-width:172px}
.theme-pop[hidden]{display:none}
.theme-pop-t{display:block;font-family:var(--disp);font-weight:700;font-size:.8rem;color:var(--muted);margin-bottom:.55rem}
.swatches{display:flex;flex-wrap:wrap;gap:.45rem}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;transition:.14s}
.sw:hover{transform:scale(1.12);border-color:#fff}

/* عن الشركة (فوتر) */
.foot-about{color:var(--muted);font-size:.82rem;line-height:1.7;margin:0}

/* قائمة الجوال (بحث + مظهر + فئات) */
.mobile-menu{position:fixed;inset:0;z-index:400;background:var(--ink);display:none;flex-direction:column;
  padding:.9rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.open{display:flex}
.mm-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.mm-head .search{flex:1;margin:0}
.mm-close{flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card2);
  color:#fff;font-size:18px;cursor:pointer}
.mm-label{display:block;font-family:var(--disp);font-weight:700;font-size:.8rem;color:var(--muted);margin:.4rem 4px .5rem}
.mm-theme{border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:.4rem}
.mm-theme .swatches{padding:0 4px}
.mm-theme .sw{width:30px;height:30px}
.mm-cat{display:flex;align-items:center;gap:.7rem;padding:.7rem 6px;border-bottom:1px solid var(--line);
  color:var(--text);text-decoration:none}
.mm-cat:active{background:var(--card2)}
.mm-emo{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:18px}
.mm-name{flex:1;font-weight:600;font-size:.95rem}
.mm-arrow{color:var(--muted);font-size:1.2rem}
@media(min-width:761px){ .mobile-menu{display:none!important} }

/* ================= 1.0.25: فوتر بلون الهيدر + أسهم مستطيلة + أزرار تصنيف أوضح + عناوين بجانب بعضها ================= */
/* الفوتر بنفس تدرّج الهيدر ويتبع مبدّل الألوان (--violet) */
.foot{background:linear-gradient(90deg,var(--violet-d),var(--violet));border-top:0;margin-top:1.2rem}
.foot-col h4{color:#fff}
.foot-col a{color:rgba(255,255,255,.86)}
.foot-col a:hover{color:var(--lime)}
.foot-desc,.foot-about{color:rgba(255,255,255,.85)}
.foot-bar{border-top:1px solid rgba(255,255,255,.22)}
.foot-bar small{color:rgba(255,255,255,.8)}
.foot .logo b{color:#fff}
.foot .logo i{color:var(--lime)}

/* أزرار التصنيف: أوضح وأكثر شبهًا بالأزرار (ظل + حدّ خفيف) */
.tag{border:0;color:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.5);font-weight:800}
.tag:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(0,0,0,.55)}

/* أسهم التنقّل مستطيلة (مثل شارة «جديد») */
.sh-arrow{width:30px;height:40px;border-radius:10px;font-size:22px}

/* رأس صفحة التصنيف: العنوان والتسمية جنبًا إلى جنب */
.t4g-head-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .8rem}
.t4g-archive-head .sec-eyebrow{color:var(--violet-l);font-family:var(--disp);font-weight:800;font-size:.85rem;margin:0}
.t4g-archive-head h1{margin:0}
.t4g-archive-head .t4g-head-row p{color:var(--muted);margin:0;font-size:.88rem;align-self:center}
.t4g-crumbs{margin-bottom:.45rem}