/* سبونج لايف — «مكتبة الألعاب». Layout only: centred title and call to action, a wide «اتصل بالبث» card, the
   live-streams rail, «آخر التحديثات» with a wider featured card, compact filters, then four columns of 3D game
   cards. Every colour, font, radius, shadow and timing comes from shared-theme.css (navy + cyan + sponge yellow),
   and the header, background and bottom bar are the site's shared components. */
:root{--gl-narrow:min(1600px,var(--sl-frame));--gl-wide:var(--sl-frame)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.gl{min-height:100svh;overflow-x:clip}
body.gl a{color:inherit}
body.gl button,body.gl input{font:inherit;color:inherit}
.gl :focus-visible{outline:none;box-shadow:var(--sl-focus)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gl-skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:60;padding:10px 16px;border-radius:var(--sl-r-sm);background:var(--sl-primary);color:#fff;font-weight:var(--sl-fw-heavy);text-decoration:none}
.gl-skip:focus{top:12px}
.gl-main,.gl-foot{position:relative;z-index:1}

/* ---------------- page ---------------- */
.gl-main{display:flex;flex-direction:column;align-items:center;padding-bottom:var(--sl-sp-7)}
.gl-hero,.gl-connect,.gl-live,.gl-support{width:var(--gl-narrow)}
.gl-updates,.gl-library{width:var(--gl-wide)}

/* hero */
.gl-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:88px}
.gl-pill{display:inline-flex;align-items:center;gap:9px;margin:0;padding:7px 16px;border-radius:var(--sl-r-pill);background:rgba(var(--sl-cyan-rgb),.1);border:1px solid rgba(var(--sl-cyan-rgb),.35);color:var(--sl-cyan-soft);font-size:var(--sl-fs-sm);font-weight:var(--sl-fw-bold);line-height:20px}
.gl-pill i{width:7px;height:7px;border-radius:50%;background:var(--sl-yellow);box-shadow:0 0 0 3px rgba(var(--sl-yellow-rgb),.2),0 0 10px var(--sl-yellow)}
.gl-hero h1{margin:20px 0 0;color:var(--sl-text);font:var(--sl-fw-black) var(--sl-fs-display)/1.2 var(--sl-font);letter-spacing:-.01em;text-shadow:0 2px 0 #0A2B66,0 0 34px rgba(var(--sl-cyan-rgb),.45)}
.gl-lead{max-width:580px;margin:14px 0 0;color:var(--sl-muted);font-size:var(--sl-fs-md);line-height:1.85}
.gl-cta{margin-top:22px}
.gl-cta svg{width:20px;height:20px}
.gl-jump{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:var(--sl-fs-sm);line-height:20px}
.gl-jump a{color:var(--sl-muted);font-weight:var(--sl-fw-bold);text-decoration:none;transition:color var(--sl-dur-2)}
.gl-jump a:hover{color:var(--sl-cyan-soft)}
.gl-jump i{width:4px;height:4px;border-radius:50%;background:rgba(var(--sl-cyan-rgb),.45)}

/* «اتصل بالبث» */
.gl-connect{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:18px 26px;border-radius:var(--sl-r-lg);
  background:var(--sl-grad-panel);border:1px solid var(--sl-border-2);box-shadow:var(--sl-shadow-md),inset 0 1px 0 rgba(140,232,255,.08)}
.gl-connect-text{min-width:0}
.gl-connect h2{display:flex;align-items:center;gap:10px;margin:0;color:var(--sl-text);font:var(--sl-fw-black) var(--sl-fs-md)/1.9 var(--sl-font)}
.gl-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--sl-muted);box-shadow:0 0 0 4px rgba(158,173,208,.15)}
.gl-connect p{margin:2px 0 0;color:var(--sl-muted);font-size:var(--sl-fs-sm);line-height:1.7}
.gl-connect-act{display:flex;align-items:center;gap:10px;flex:none}
.gl-status{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:var(--sl-r-pill);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--sl-muted);font-size:12.5px;font-weight:var(--sl-fw-heavy);white-space:nowrap}
.gl-status i{width:7px;height:7px;border-radius:50%;background:var(--sl-muted)}
.gl-connect[data-state=linked] .gl-dot,.gl-connect[data-state=linked] .gl-status i{background:var(--sl-yellow);box-shadow:0 0 0 4px rgba(var(--sl-yellow-rgb),.16)}
.gl-connect[data-state=live] .gl-dot,.gl-connect[data-state=live] .gl-status i{background:var(--sl-success);box-shadow:0 0 0 4px rgba(47,217,160,.18),0 0 10px var(--sl-success)}
.gl-connect[data-state=live] .gl-status{color:#B4F5DF;border-color:rgba(47,217,160,.4);background:rgba(47,217,160,.08)}
.gl-connect[data-state=reauth] .gl-dot,.gl-connect[data-state=reauth] .gl-status i{background:var(--sl-danger);box-shadow:0 0 0 4px rgba(255,77,106,.16)}

/* ---------------- «بثوث شغّالة الآن» ---------------- */
.gl-live{margin-top:28px}
.gl-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.gl-live h2{display:flex;align-items:center;gap:10px;margin:0;color:var(--sl-text);font:var(--sl-fw-black) var(--sl-fs-md)/1.85 var(--sl-font)}
.gl-live-dot{width:8px;height:8px;border-radius:50%;background:var(--sl-live);box-shadow:0 0 0 4px rgba(255,59,92,.16);animation:gl-pulse 1.6s ease-in-out infinite}
.gl-live-count{color:var(--sl-muted);font-size:12.5px;font-weight:var(--sl-fw-heavy)}
.gl-car-nav{display:flex;gap:8px}
.gl-car-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--sl-border-2);background:rgba(var(--sl-deep-rgb),.45);color:var(--sl-text);cursor:pointer;transition:background var(--sl-dur-2),border-color var(--sl-dur-2),opacity var(--sl-dur-2)}
.gl-car-btn[data-dir=prev] svg{transform:scaleX(-1)}
.gl-car-btn:hover{background:rgba(var(--sl-cyan-rgb),.12);border-color:var(--sl-cyan)}
.gl-car-btn:disabled{opacity:.35;cursor:default}
.gl-live-rail{margin-top:8px;padding:6px 0 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.gl-live-rail::-webkit-scrollbar{display:none}
.gl-live-rail.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.gl-live-rail.is-drag a{pointer-events:none}
.gl-live-track{display:flex;gap:16px;margin:0;padding:0 2px;list-style:none;width:max-content}
.gl-lc{position:relative;display:flex;gap:14px;width:330px;min-height:130px;padding:14px;border-radius:18px;scroll-snap-align:start;
  background:var(--sl-grad-card);border:1px solid var(--sl-border-2);box-shadow:inset 0 1px 0 rgba(140,232,255,.08),var(--sl-shadow-md);transition:border-color var(--sl-dur-2),transform var(--sl-dur-2)}
.gl-lc:hover{border-color:var(--sl-border-3);transform:translateY(-2px)}
.gl-lc-ava{position:relative;flex:none;width:56px;height:56px;margin-top:22px}
.gl-lc-ava .ava{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--sl-navy);border:2px solid var(--sl-live);
  box-shadow:0 0 0 3px rgba(255,59,92,.14),0 0 18px -4px rgba(255,59,92,.6);color:var(--sl-text);font:var(--sl-fw-black) 21px/1 var(--sl-font)}
.gl-lc-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.gl-lc[data-join=true] .gl-lc-ava .ava{border-color:var(--sl-cyan);box-shadow:0 0 0 3px rgba(var(--sl-cyan-rgb),.16),0 0 18px -4px rgba(var(--sl-cyan-rgb),.7)}
.gl-lc-tag{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:6px;background:var(--sl-live);border:2px solid var(--sl-surface);color:#fff;font:var(--sl-fw-black) 9.5px/1.5 var(--sl-font);letter-spacing:.04em}
.gl-lc-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.gl-lc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:27px}
.gl-lc-name{overflow:hidden;color:var(--sl-text);font-size:var(--sl-fs-base);font-weight:var(--sl-fw-black);white-space:nowrap;text-overflow:ellipsis}
.gl-lc-btn{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 12px;border-radius:var(--sl-r-pill);background:linear-gradient(180deg,#FF5A75,var(--sl-live));color:#fff;font-size:12px;font-weight:var(--sl-fw-heavy);text-decoration:none;box-shadow:0 6px 14px -8px rgba(255,59,92,.9);transition:filter var(--sl-dur-2),transform var(--sl-dur-1)}
.gl-lc-btn.is-join{background:var(--sl-grad-primary);box-shadow:0 6px 14px -8px var(--sl-glow-blue)}
.gl-lc-btn:hover{filter:brightness(1.1)}
.gl-lc-btn svg{width:11px;height:11px;fill:currentColor}
.gl-lc-acc,.gl-lc-game{display:flex;align-items:center;gap:6px;overflow:hidden;font-size:12.5px;line-height:19px;white-space:nowrap;text-overflow:ellipsis}
.gl-lc-acc{color:var(--sl-cyan-soft)}
.gl-lc-game{color:var(--sl-muted)}
.gl-lc-acc svg,.gl-lc-game svg{width:14px;height:14px;flex:none;color:var(--sl-cyan)}
.gl-lc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.gl-chip{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 9px;border-radius:var(--sl-r-pill);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--sl-muted);font-size:11.5px;white-space:nowrap}
.gl-chip b{color:var(--sl-text)}
.gl-chip svg{width:13px;height:13px;color:var(--sl-cyan)}
.gl-chip.is-word{color:var(--sl-yellow-hi);border-color:rgba(var(--sl-yellow-rgb),.35);background:rgba(var(--sl-yellow-rgb),.08)}
.gl-live-empty{display:flex;align-items:center;gap:16px;margin-top:14px;padding:18px 22px;border-radius:18px;border:1px dashed var(--sl-border-2);background:linear-gradient(90deg,rgba(var(--sl-cyan-rgb),.06),rgba(var(--sl-surface-rgb),.4))}
.gl-live-empty[hidden]{display:none}
.gl-live-empty-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;background:rgba(255,59,92,.1);border:1px solid rgba(255,59,92,.3);color:#FFB3C1}
.gl-live-empty-ic svg{fill:none;stroke:currentColor;stroke-width:2}
.gl-live-empty div{flex:1;min-width:0}
.gl-live-empty b{color:var(--sl-text);font-size:var(--sl-fs-base)}
.gl-live-empty p{margin:2px 0 0;color:var(--sl-muted);font-size:var(--sl-fs-sm);line-height:1.7}

/* ---------------- «آخر التحديثات» ---------------- */
.gl-updates{margin-top:56px}
.gl-upd-head{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.gl-sec-title{display:flex;align-items:center;gap:12px}
.gl-sec-tile{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:var(--sl-grad-ocean);color:#fff;box-shadow:0 10px 24px -10px var(--sl-glow-blue),inset 0 1px 0 rgba(255,255,255,.3)}
.gl-sec-tile svg{fill:none;stroke:currentColor;stroke-width:2}
.gl-sec-title h2{margin:0;color:var(--sl-text);font:var(--sl-fw-black) var(--sl-fs-lg)/1.3 var(--sl-font)}
.gl-sec-title p{margin:2px 0 0;color:var(--sl-muted);font-size:var(--sl-fs-sm)}
.gl-upd-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gl-seg,.gl-cols{display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:var(--sl-r-pill);background:rgba(var(--sl-deep-rgb),.5);border:1px solid var(--sl-border)}
.gl-seg button,.gl-cols button{min-width:30px;height:30px;padding:0 13px;border:0;border-radius:var(--sl-r-pill);background:none;color:var(--sl-muted);font-size:12.5px;font-weight:var(--sl-fw-heavy);cursor:pointer;transition:background var(--sl-dur-2),color var(--sl-dur-2)}
.gl-cols button{padding:0 9px}
.gl-seg button:hover,.gl-cols button:hover{color:var(--sl-text)}
.gl-seg button[aria-pressed=true],.gl-cols button[aria-pressed=true]{background:var(--sl-grad-primary);color:#fff;box-shadow:0 6px 16px -8px var(--sl-glow-blue)}
.gl-cols span{padding:0 8px;color:var(--sl-muted);font-size:var(--sl-fs-xs)}
.gl-more{height:38px;padding:0 14px;font-size:var(--sl-fs-sm)}
.gl-more[hidden]{display:none}
.gl-upd-list{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;margin-top:17px;align-items:stretch}
.gl-upd{--acc:var(--sl-cyan);--acc-rgb:var(--sl-cyan-rgb);--acc-ink:var(--sl-cyan-soft);
  position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;border-radius:22px;overflow:hidden;border:1px solid transparent;
  background:radial-gradient(520px 260px at 100% 0%,rgba(var(--acc-rgb),.16),transparent 65%) padding-box,linear-gradient(180deg,#0E1F45,#0A1636) padding-box,
    conic-gradient(from 350deg,var(--acc),var(--sl-primary),rgba(var(--sl-cyan-rgb),.1) 40%,rgba(var(--sl-cyan-rgb),.1) 70%,var(--acc)) border-box;
  box-shadow:var(--sl-shadow-md)}
.gl-upd[data-type=new]{--acc:var(--sl-yellow);--acc-rgb:var(--sl-yellow-rgb);--acc-ink:var(--sl-yellow-hi)}
.gl-upd[data-type=update]{--acc:var(--sl-cyan);--acc-rgb:var(--sl-cyan-rgb);--acc-ink:var(--sl-cyan-soft)}
.gl-upd[data-type=platform]{--acc:var(--sl-primary-hi);--acc-rgb:44,139,255;--acc-ink:#CFE4FF}
.gl-upd-bg{position:absolute;left:-28px;bottom:-30px;width:170px;height:170px;color:var(--acc);opacity:.07;transform:rotate(-14deg);pointer-events:none}
.gl-upd-top{position:relative;display:flex;align-items:flex-start;gap:12px}
.gl-upd-tile{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.35);color:var(--acc)}
.gl-upd-tile svg{width:24px;height:24px}
.gl-upd-who{flex:1;min-width:0}
.gl-upd h3{margin:0;color:var(--sl-text);font:var(--sl-fw-black) var(--sl-fs-md)/1.4 var(--sl-font)}
.gl-upd-meta{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--sl-muted);font-size:var(--sl-fs-xs)}
.gl-upd-meta b{color:var(--acc);font-weight:var(--sl-fw-bold)}
.gl-upd-meta svg{width:13px;height:13px}
.gl-upd-chip{flex:none;align-self:center;padding:3px 10px;border-radius:var(--sl-r-pill);background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.4);color:var(--acc-ink);font-size:11px;font-weight:var(--sl-fw-heavy);white-space:nowrap}
.gl-upd-sum{position:relative;margin:0;color:var(--sl-text);font-size:var(--sl-fs-sm);line-height:1.7;opacity:.9}
.gl-upd ul{position:relative;display:grid;gap:7px;margin:0;padding:0;list-style:none;flex:1}
.gl-upd li{display:flex;gap:8px;color:#D5E3F5;font-size:var(--sl-fs-sm);line-height:1.7}
.gl-upd li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--acc)}
.gl-upd-play{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;margin-top:4px;border-radius:var(--sl-r-sm);color:#fff;font-size:14px;font-weight:var(--sl-fw-heavy);text-decoration:none;
  background:var(--sl-grad-primary);box-shadow:0 3px 0 0 #0B3E9E,0 12px 26px -16px var(--sl-glow-blue),inset 0 1px 0 rgba(255,255,255,.3);transition:filter var(--sl-dur-2),transform var(--sl-dur-1)}
.gl-upd[data-type=new] .gl-upd-play{color:var(--sl-ink);background:var(--sl-grad-sun);box-shadow:var(--sl-shadow-sun)}
.gl-upd-play:hover{filter:brightness(1.08)}
.gl-upd-play:active{transform:translateY(2px)}
.gl-upd-play.is-ghost{background:rgba(var(--sl-deep-rgb),.45);border:1px solid var(--sl-border-2);box-shadow:none;color:var(--sl-text)}
.gl-upd-play svg{width:17px;height:17px}
.gl-upd.is-extra{display:none}
.gl-upd-list.is-all .gl-upd.is-extra{display:flex}

/* ---------------- filters, search, columns ---------------- */
.gl-library{margin-top:26px;scroll-margin-top:calc(var(--sl-header-real,74px) + 12px)}
.gl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--sl-r-pill);background:rgba(var(--sl-navy-rgb),.6);border:1px solid var(--sl-border)}
.gl-filters{display:flex;gap:6px;flex-wrap:wrap}
.gl-filters button{height:34px;padding:0 15px;border-radius:var(--sl-r-pill);border:1px solid var(--sl-border);background:rgba(var(--sl-deep-rgb),.4);color:#C9D6EE;font-size:var(--sl-fs-sm);font-weight:var(--sl-fw-heavy);cursor:pointer;white-space:nowrap;transition:background var(--sl-dur-2),color var(--sl-dur-2),border-color var(--sl-dur-2),box-shadow var(--sl-dur-2)}
.gl-filters button:hover{color:#fff;border-color:var(--sl-border-3)}
.gl-filters button[aria-selected=true]{color:#fff;border-color:transparent;background:var(--sl-grad-primary);box-shadow:0 8px 22px -10px var(--sl-glow-blue),inset 0 1px 0 rgba(255,255,255,.25)}
.gl-bar-end{display:flex;align-items:center;gap:10px}
.gl-search{display:flex;align-items:center;gap:8px;height:38px;width:250px;padding:0 14px;border-radius:var(--sl-r-pill);background:rgba(var(--sl-deep-rgb),.5);border:1px solid var(--sl-border-2);color:var(--sl-muted);transition:border-color var(--sl-dur-2),box-shadow var(--sl-dur-2)}
.gl-search:focus-within{border-color:var(--sl-cyan);box-shadow:0 0 0 3px rgba(var(--sl-cyan-rgb),.22)}
.gl-search svg{flex:none}
.gl-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--sl-text);font-size:var(--sl-fs-sm)}
.gl-search input::placeholder{color:var(--sl-muted)}
.gl-search input::-webkit-search-cancel-button{filter:invert(.7)}
.gl-count{margin:12px 6px 0;color:var(--sl-muted);font-size:var(--sl-fs-sm)}

/* ---------------- the game cards ---------------- */
.gl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:12px 0 0;padding:0;list-style:none}
.gl-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.gl-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.gl-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:320px;margin-bottom:7px;padding:22px 20px;border-radius:var(--sl-r-xl);overflow:hidden;
  background:radial-gradient(130% 70% at 50% -12%,rgba(var(--sl-cyan-rgb),.16),transparent 62%),var(--sl-grad-card);
  border:1.5px solid rgba(var(--sl-cyan-rgb),.3);box-shadow:var(--sl-shadow-card),0 0 40px -18px rgba(var(--sl-primary-rgb),.6);
  transition:transform var(--sl-dur-3) var(--sl-ease),box-shadow var(--sl-dur-3),border-color var(--sl-dur-3);animation:gl-in .45s var(--sl-ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.gl-card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px 220px at 50% 0%,rgba(var(--sl-cyan-rgb),.16),transparent 70%);opacity:0;transition:opacity var(--sl-dur-3);pointer-events:none}
.gl-card::after{content:"";position:absolute;top:-20%;bottom:-20%;width:46%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.06) 45%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 55%,transparent);transform:skewX(-12deg);pointer-events:none;opacity:0}
.gl-card:hover{transform:translateY(-5px);border-color:rgba(var(--sl-cyan-rgb),.7);box-shadow:var(--sl-shadow-card),0 0 52px -14px rgba(var(--sl-cyan-rgb),.55)}
.gl-card:hover::before{opacity:1}
.gl-card:hover::after{opacity:1;animation:gl-shine .9s ease-out both}
.gl-card>*{position:relative}
.gl-bgicon{position:absolute!important;left:-18px;bottom:56px;width:140px;height:140px;color:var(--sl-cyan);opacity:.07;transform:rotate(-14deg);pointer-events:none;transition:opacity var(--sl-dur-3),transform .5s}
.gl-card:hover .gl-bgicon{opacity:.11;transform:rotate(-8deg) scale(1.04)}
.gl-card-top{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.gl-tile{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:17px;background:linear-gradient(180deg,#F2FCFF,#A8E9FF);color:var(--sl-primary-lo);
  box-shadow:0 4px 0 0 #1F78B4,0 0 26px -6px rgba(var(--sl-cyan-rgb),.6),inset 0 1px 0 rgba(255,255,255,.8);transition:transform var(--sl-dur-3) var(--sl-ease-spring)}
.gl-tile svg{width:30px;height:30px}
.gl-card:hover .gl-tile{transform:translateY(-3px) rotate(-6deg)}
.gl-num{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--sl-r-pill);background:rgba(var(--sl-cyan-rgb),.08);border:1px solid var(--sl-border-2);color:var(--sl-cyan-soft);font:var(--sl-fw-heavy) 12px/1 var(--sl-font);letter-spacing:.04em}
.gl-meta{display:flex;flex-wrap:wrap;gap:6px;min-height:22px}
.gl-cat{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--sl-r-pill);font-size:var(--sl-fs-xs);font-weight:var(--sl-fw-heavy);white-space:nowrap;
  color:var(--sl-cyan-soft);background:rgba(var(--sl-cyan-rgb),.1);border:1px solid rgba(var(--sl-cyan-rgb),.34)}
.gl-cat[data-cat=smart]{color:#CFE4FF;background:rgba(var(--sl-primary-rgb),.18);border-color:rgba(44,139,255,.48)}
.gl-cat[data-cat=elimination]{color:#FFC2CF;background:rgba(255,77,106,.12);border-color:rgba(255,77,106,.4)}
.gl-cat[data-cat=luck]{color:var(--sl-yellow-hi);background:rgba(var(--sl-yellow-rgb),.1);border-color:rgba(var(--sl-yellow-rgb),.38)}
.gl-cat[data-cat=group]{color:#B4F5DF;background:rgba(47,217,160,.1);border-color:rgba(47,217,160,.38)}
.gl-title{margin:0;color:var(--sl-text);font:var(--sl-fw-black) 21px/1.3 var(--sl-font);overflow-wrap:anywhere}
.gl-desc{flex:1;margin:0;color:var(--sl-muted);font-size:14.5px;line-height:1.7}
.gl-how{display:flex;align-items:flex-start;gap:7px;margin:0;color:var(--sl-cyan-soft);font-size:12.5px;line-height:1.6;opacity:.9}
.gl-how svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--sl-cyan)}
.gl-play{display:flex;align-items:center;justify-content:center;gap:7px;height:48px;margin-top:4px;border-radius:14px;color:#fff;font-size:var(--sl-fs-base);font-weight:var(--sl-fw-black);text-decoration:none;
  background:var(--sl-grad-primary);box-shadow:var(--sl-shadow-btn);transition:transform var(--sl-dur-1),box-shadow var(--sl-dur-1),filter var(--sl-dur-2)}
.gl-play svg{width:19px;height:19px;color:var(--sl-yellow);filter:drop-shadow(0 0 6px rgba(var(--sl-yellow-rgb),.6));transition:transform var(--sl-dur-2)}
.gl-play:hover{filter:brightness(1.08);box-shadow:0 4px 0 0 #0B3E9E,0 16px 30px -10px rgba(var(--sl-primary-rgb),1),inset 0 1px 0 rgba(255,255,255,.4)}
.gl-play:hover svg{transform:translateX(-4px)}
.gl-play:active{transform:translateY(3px);box-shadow:0 1px 0 0 #0B3E9E,0 8px 18px -10px rgba(var(--sl-primary-rgb),.8),inset 0 1px 0 rgba(255,255,255,.3)}
.gl-play.is-loading{pointer-events:none;filter:saturate(.8)}
.gl-play.is-loading svg{display:none}
.gl-play.is-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--sl-yellow);animation:gl-spin .7s linear infinite}
.gl-play[aria-disabled=true]{pointer-events:none;background:linear-gradient(180deg,#1B2A4D,#142243);color:var(--sl-muted);box-shadow:0 4px 0 0 #0A1430,inset 0 1px 0 rgba(255,255,255,.06)}
.gl-play[aria-disabled=true] svg{transform:none;width:17px;height:17px;color:var(--sl-muted);filter:none}
.gl-card.is-dev .gl-tile{filter:grayscale(.6) brightness(.85)}
/* «قيد التطوير»: the card keeps its art, name and description; «العب الآن» becomes a button that explains */
.gl-play.is-dev{width:100%;border:0;font-family:inherit;cursor:pointer;background:linear-gradient(180deg,var(--sl-elevated),var(--sl-surface));color:var(--sl-muted);
  box-shadow:0 4px 0 0 rgba(var(--sl-deep-rgb),.9),inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(var(--sl-cyan-rgb),.18)}
.gl-play.is-dev svg{transform:none;width:17px;height:17px;color:var(--sl-yellow);filter:none}
.gl-play.is-dev:hover{filter:none;color:var(--sl-text);box-shadow:0 4px 0 0 rgba(var(--sl-deep-rgb),.9),inset 0 0 0 1px rgba(var(--sl-cyan-rgb),.45)}
.gl-play.is-dev:hover svg{transform:none}
.gl-play.is-dev:focus-visible{outline:none;box-shadow:var(--sl-focus)}
.gl-off{display:flex;align-items:center;gap:8px;margin:0;color:var(--sl-muted);font-size:var(--sl-fs-sm);font-weight:var(--sl-fw-bold)}
.gl-off i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sl-warn);box-shadow:0 0 10px rgba(255,176,32,.7)}
.gl-badge-dev{color:var(--sl-yellow);background:rgba(var(--sl-yellow-rgb),.1);border-color:rgba(var(--sl-yellow-rgb),.42)}
.gl-badge-spot{color:var(--sl-ink);background:var(--sl-grad-sun);border-color:transparent;box-shadow:0 4px 14px -6px rgba(255,184,0,.9)}
.gl-card.is-spotlight{border-color:rgba(var(--sl-yellow-rgb),.55);box-shadow:var(--sl-shadow-card),0 0 0 1px rgba(var(--sl-yellow-rgb),.18),0 0 46px -16px rgba(var(--sl-yellow-rgb),.55)}
.gl-devtest{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:-4px;color:var(--sl-cyan);font-size:var(--sl-fs-sm);font-weight:var(--sl-fw-heavy);text-decoration:none}
.gl-devtest svg{width:15px;height:15px}
.gl-devtest:hover{color:var(--sl-cyan-soft);text-decoration:underline}
.gl-devstrip{display:flex;align-items:center;gap:10px;margin:0 0 var(--sl-sp-4);padding:12px 16px;border-radius:var(--sl-r-md);background:rgba(var(--sl-primary-rgb),.12);
  border:1px solid rgba(var(--sl-cyan-rgb),.28);color:var(--sl-text);font-size:var(--sl-fs-base);font-weight:var(--sl-fw-bold);line-height:1.7}
.gl-devstrip svg{flex:none;color:var(--sl-cyan)}
.gl-dev{max-width:min(440px,calc(100vw - 32px));padding:0;border:0;background:transparent;color:var(--sl-text)}
.gl-dev::backdrop{background:rgba(var(--sl-deep-rgb),.72);backdrop-filter:blur(6px)}
.gl-dev[open]{animation:sl-pop var(--sl-dur-3) var(--sl-ease-spring)}
.gl-dev-card{display:grid;justify-items:center;gap:12px;padding:28px 24px 24px;border-radius:var(--sl-r-xl);text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(var(--sl-cyan-rgb),.16),transparent 60%),var(--sl-grad-card);border:1.5px solid rgba(var(--sl-cyan-rgb),.32);box-shadow:var(--sl-shadow-lg)}
.gl-dev-ic{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(180deg,#F2FCFF,#A8E9FF);color:var(--sl-primary-lo);box-shadow:var(--sl-shadow-md)}
.gl-dev-ic svg{width:42px;height:42px}
.gl-dev-badge{margin:0;padding:5px 12px;border-radius:var(--sl-r-pill);color:var(--sl-yellow);background:rgba(var(--sl-yellow-rgb),.1);border:1px solid rgba(var(--sl-yellow-rgb),.45);font-size:var(--sl-fs-xs);font-weight:var(--sl-fw-heavy)}
.gl-dev-badge.is-spotlight{color:var(--sl-ink);background:var(--sl-grad-sun);border-color:transparent}
.gl-dev-card h2{margin:0;font-size:var(--sl-fs-xl);font-weight:var(--sl-fw-black)}
.gl-dev-msg{margin:0;font-size:var(--sl-fs-md);font-weight:var(--sl-fw-bold);line-height:1.8}
.gl-dev-note{margin:0;color:var(--sl-cyan-soft);font-size:var(--sl-fs-sm);line-height:1.7}
.gl-dev-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.gl-dev-acts .sl-btn{min-width:130px}
.gl-empty{display:grid;justify-items:center;gap:6px;margin-top:22px;padding:34px 20px;border-radius:22px;border:1px dashed var(--sl-border-2);text-align:center;color:var(--sl-muted)}
.gl-empty[hidden]{display:none}
.gl-empty b{color:var(--sl-text);font-size:var(--sl-fs-md)}
.gl-empty .sl-btn{margin-top:8px}

/* ---------------- support + footer ---------------- */
.gl-support{display:flex;align-items:center;gap:20px;margin-top:56px;padding:24px 28px;border-radius:22px;
  background:radial-gradient(600px 220px at 100% 0%,rgba(var(--sl-yellow-rgb),.08),transparent 60%),radial-gradient(700px 260px at 0% 100%,rgba(var(--sl-cyan-rgb),.12),transparent 60%),var(--sl-grad-panel);
  border:1px solid var(--sl-border-2)}
.gl-support-ic{display:grid;place-items:center;width:68px;height:68px;flex:none;border-radius:18px;background:var(--sl-deep);border:1px solid var(--sl-border-2);box-shadow:0 12px 30px -16px var(--sl-glow)}
.gl-support-text{flex:1;min-width:0}
.gl-support-kicker{display:flex;align-items:center;gap:8px;margin:0;color:var(--sl-muted);font-size:12.5px;font-weight:var(--sl-fw-bold)}
.gl-support-kicker i{width:7px;height:7px;border-radius:50%;background:var(--sl-yellow)}
.gl-support h2{margin:4px 0 0;color:var(--sl-text);font:var(--sl-fw-black) var(--sl-fs-lg)/1.4 var(--sl-font)}
.gl-support-text>p:last-child{margin:4px 0 0;color:var(--sl-muted);font-size:var(--sl-fs-sm)}
.gl-support-links{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.gl-foot{padding:26px 16px 34px;text-align:center;color:var(--sl-muted);font-size:var(--sl-fs-sm)}
.gl-foot p{margin:0}
.gl-foot a{color:var(--sl-cyan-soft);text-decoration:none}
.gl-foot a:hover{color:#fff}

/* sections ease in once as they reach the screen */
.gl-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s var(--sl-ease)}
.gl-reveal.is-in{opacity:1;transform:none}
.no-js .gl-reveal{opacity:1;transform:none}

@keyframes gl-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gl-shine{from{left:-60%}to{left:120%}}
@keyframes gl-spin{to{transform:rotate(1turn)}}
@keyframes gl-pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,59,92,.16)}50%{box-shadow:0 0 0 7px rgba(255,59,92,.05)}}

/* ---------------- responsive ---------------- */
@media (min-width:1200px){.gl-card{min-height:360px}}
@media (max-width:1199px){
  .gl-grid,.gl-grid[data-cols]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gl-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-upd-list{grid-template-columns:1.25fr 1fr}
  .gl-upd-list>.gl-upd:nth-child(3){display:none}
  .gl-upd-list.is-all>.gl-upd:nth-child(3){display:flex}
}
@media (max-width:980px){
  .gl-hero{padding-top:44px}
  .gl-cols{display:none}
  .gl-grid,.gl-grid[data-cols]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .gl-connect{flex-direction:column;align-items:stretch;padding:18px}
  .gl-connect-act{justify-content:space-between}
  .gl-upd-list{grid-template-columns:minmax(0,1fr)}
  .gl-upd-list>.gl-upd:nth-child(n+2){display:none}
  .gl-upd-list.is-all>.gl-upd{display:flex}
  .gl-bar{border-radius:22px;padding:10px}
  .gl-bar-end{width:100%}
  .gl-search{width:100%}
  .gl-support{flex-wrap:wrap}
  .gl-support-links{width:100%}
}
@media (max-width:620px){
  :root{--gl-narrow:calc(100% - 28px);--gl-wide:calc(100% - 28px)}
  .gl-hero{padding-top:34px}
  .gl-hero h1{font-size:clamp(38px,11vw,52px);margin-top:16px}
  .gl-lead{font-size:var(--sl-fs-base);line-height:1.85}
  .gl-pill{font-size:var(--sl-fs-xs)}
  .gl-grid,.gl-grid[data-cols]{grid-template-columns:minmax(0,1fr);gap:18px}
  .gl-card{min-height:0;padding:20px 18px;border-radius:24px}
  .gl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-10px;padding-inline:10px;-webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .gl-filters::-webkit-scrollbar{display:none}
  .gl-filters button{flex:none}
  .gl-bar{padding:8px 10px;gap:10px}
  .gl-car-nav{display:none}
  .gl-lc{width:min(300px,82vw)}
  .gl-live-rail{margin-inline:-14px;padding-inline:14px;-webkit-mask:none;mask:none}
  .gl-live-empty{flex-wrap:wrap;padding:16px}
  .gl-live-empty .sl-btn{width:100%}
  .gl-upd{padding:18px}
  .gl-upd-tools{width:100%}
  .gl-seg{overflow-x:auto;max-width:100%;scrollbar-width:none}
  .gl-seg::-webkit-scrollbar{display:none}
  .gl-seg button{flex:none}
  .gl-support{padding:20px 18px}
  .gl-support-links .sl-btn{flex:1}
  .gl-jump{gap:10px;font-size:12.5px}
}
@media (hover:none){.gl-card:hover{transform:none}.gl-card:hover::after{animation:none;opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gl-card,.gl-reveal,.gl-tile,.gl-bgicon,.gl-play,.gl-play svg,.gl-lc{transition:none;animation:none}
  .gl-reveal{opacity:1;transform:none}
  .gl-card::after{display:none}
  .gl-live-dot{animation:none}
  .gl-live-rail{scroll-behavior:auto}
}