/* ===================================================================
   shell.css — the whole design system. One source for three pages.
   It used to be duplicated across two files, so every change was made twice.
   Edit here and home, apps and games all update at once.
   =================================================================== */
:root{
  /* --mut was #7a8898 = 4.0 contrast on white, under the AA floor for small text
     (4.5). Now #68778a ≈ 5.0 — same feel, and actually readable. */
  --ink:#0f1720; --ink2:#39485a; --mut:#68778a; --line:#e6e9ee;
  --bg:#ffffff; --bg2:#f6f7f9; --accent:#0b64d6; --accent2:#0a4fa8;
  --radius:18px; --maxw:1240px;
  --f-lat:'Inter',system-ui,sans-serif; --f-ar:'Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box}
/* Skip link — keyboard only, the first Tab stop on the page */
.skip{position:absolute;inset-inline-start:-9999px;top:10px;z-index:80;background:var(--accent);
      color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:700}
.skip:focus{inset-inline-start:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-lat);
     -webkit-font-smoothing:antialiased;line-height:1.6}
html[dir=rtl] body{font-family:var(--f-ar)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- top bar ---------- */
.bar{position:fixed;inset-inline:0;top:0;z-index:60;background:rgba(255,255,255,.82);
     backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s}
.bar.on{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(15,23,32,.05)}
.bar .wrap{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:15.5px}
.brand .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#0b64d6,#062f6b);
     color:#fff;display:grid;place-items:center;font-size:14px;font-family:var(--f-lat);font-weight:800}
.bar nav{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.bar nav a{font-size:13.5px;color:var(--ink2);padding:8px 12px;border-radius:9px;font-weight:500}
.bar nav a:hover{background:var(--bg2);color:var(--ink)}
.bar nav a.here{color:var(--accent);background:rgba(11,100,214,.08);font-weight:700}
.lang{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;
      font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink);font-family:var(--f-lat)}
.lang:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:820px){ .bar nav a{padding:8px 9px;font-size:12.5px} }
/* On mobile the bar overflowed and clipped the language toggle. GitHub is in the
   footer, so it drops from the bar; the name drops too, initials tile stays. */
@media(max-width:620px){ .bar nav a[href^="https"]{display:none} }
@media(max-width:560px){ .bar .wrap{gap:8px;padding:0 16px} .brand span:last-child{display:none}
                         .bar nav{gap:2px} .bar nav a{padding:7px 7px;font-size:12px}
                         .lang{padding:6px 11px;font-size:12px} }
@media(max-width:400px){ .bar nav a{padding:7px 5px;font-size:11.5px} }

/* ---------- hero ---------- */
.hero{padding:150px 0 44px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
         font-weight:700;font-family:var(--f-lat);margin-bottom:20px}
html[dir=rtl] .eyebrow{letter-spacing:0;font-family:var(--f-ar)}
.hero h1{font-size:clamp(38px,6.2vw,68px);line-height:1.08;letter-spacing:-.035em;margin:0 0 22px;font-weight:800}
html[dir=rtl] .hero h1{letter-spacing:0;line-height:1.25}
.hero p.lead{font-size:clamp(16px,1.9vw,19.5px);color:var(--ink2);max-width:62ch;margin:0 0 26px}
.hstats{display:flex;flex-wrap:wrap;gap:44px;padding-top:8px}
.hstats b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;font-family:var(--f-lat);
          direction:ltr;unicode-bidi:isolate;line-height:1.1}
.hstats span{font-size:12.5px;color:var(--mut);font-weight:500}

/* ---------- profiles row ---------- */
.prow{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px}
.prow a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);
        border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink2);transition:.18s}
.prow a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
              box-shadow:0 8px 20px rgba(15,23,32,.07)}
.prow a svg{width:15px;height:15px;fill:currentColor;flex:none}
.prow a .hd{color:var(--mut);font-weight:500;font-family:var(--f-lat);direction:ltr;unicode-bidi:isolate}
.prow a:hover .hd{color:var(--accent)}
@media(max-width:700px){ .prow a .hd{display:none} }

/* ---------- the two doors (home) ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px 0 96px}
@media(max-width:900px){ .doors{grid-template-columns:1fr} }
.door{display:block;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;
      box-shadow:0 4px 16px rgba(15,23,32,.05);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.door:hover{transform:translateY(-8px);border-color:#c2d2e6;box-shadow:0 28px 60px rgba(15,23,32,.16)}
.door .art{height:210px;overflow:hidden;position:relative;background:linear-gradient(150deg,#eef2f7,#dde5ef);
           display:grid;place-items:center}
.door .art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.door:hover .art img{transform:scale(1.06)}
.door .art .glyph{font-size:64px}
.door .art.icons{gap:16px;display:flex;align-items:center;justify-content:center;padding:0 18px}
.door .art.icons img,.door .art.icons .ph{width:78px;height:78px;border-radius:20px;flex:none;
     background:#fff;object-fit:cover;box-shadow:0 12px 30px rgba(15,23,32,.18);
     transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.door .art.icons .ph{display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;
     background:linear-gradient(140deg,#0b64d6,#062f6b);font-family:var(--f-lat)}
.door .art.icons img:nth-child(2),.door .art.icons img:nth-child(4){transform:translateY(-14px)}
.door:hover .art.icons img{transform:translateY(-4px)}
.door:hover .art.icons img:nth-child(2),.door:hover .art.icons img:nth-child(4){transform:translateY(-20px)}
@media(max-width:520px){ .door .art.icons img,.door .art.icons .ph{width:58px;height:58px;border-radius:16px} }
.door .in{padding:28px 30px 30px}
.door h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin:0 0 10px;font-weight:800;line-height:1.15}
html[dir=rtl] .door h2{letter-spacing:0}
.door p{margin:0 0 16px;color:var(--ink2);font-size:15px}
.door .dstats{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:18px}
.door .dstats b{display:block;font-size:21px;font-weight:800;font-family:var(--f-lat);
                direction:ltr;unicode-bidi:isolate;line-height:1.15;letter-spacing:-.02em}
.door .dstats span{font-size:11.5px;color:var(--mut)}
.door .go{font-size:13.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.door:hover .go .arr{transform:translateX(4px)}
html[dir=rtl] .door:hover .go .arr{transform:translateX(-4px)}
.door .go .arr{transition:transform .25s;display:inline-block}

/* ---------- marquee ---------- */
.strip{margin:56px 0 0;position:relative;overflow:hidden;
       -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
       mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;gap:20px;width:max-content;animation:slide 34s linear infinite}
.strip:hover .track,.strip:focus-within .track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir=rtl] .track{animation-name:slideR}
@keyframes slideR{from{transform:translateX(0)}to{transform:translateX(50%)}}
/* Saqr's call, 2026-08-04: motion runs for everyone. It used to be disabled for
   anyone with "reduce motion" on in their OS — that setting was enabled on his
   own Mac, so the marquee and gallery sat frozen while the code was correct. */
.mcard{flex:0 0 408px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
       cursor:pointer;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
       text-align:start;display:block;font:inherit;color:inherit;overflow:hidden;
       box-shadow:0 2px 10px rgba(15,23,32,.04)}
.mcard:hover{transform:translateY(-8px);border-color:#c2d2e6;box-shadow:0 22px 52px rgba(15,23,32,.15)}
.mcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mshot{position:relative;height:222px;overflow:hidden;background:linear-gradient(150deg,#eef2f7,#dde5ef)}
.mshot img{width:100%;height:auto;display:block;transform:translateY(-6%) scale(1.04);
           transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mcard:hover .mshot img{transform:translateY(-11%) scale(1.09)}
.mshot::after{content:"";position:absolute;inset:auto 0 0 0;height:78px;
              background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.mshot.none{display:grid;place-items:center}
.mshot.none .big{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;
     background:linear-gradient(140deg,#0b64d6,#062f6b);color:#fff;font-weight:800;font-size:26px;
     font-family:var(--f-lat);box-shadow:0 12px 30px rgba(11,100,214,.3)}
.mbody{padding:0 18px 18px;position:relative;margin-top:-30px}
.mtop{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.mtop img{width:52px;height:52px;border-radius:14px;flex:none;background:#fff;object-fit:cover;
          border:2px solid #fff;box-shadow:0 6px 18px rgba(15,23,32,.14)}
.mtop .ph{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
          background:linear-gradient(140deg,#0b64d6,#062f6b);color:#fff;font-weight:800;font-size:19px;
          font-family:var(--f-lat);border:2px solid #fff;box-shadow:0 6px 18px rgba(15,23,32,.14)}
.mtop b{font-size:16px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.25}
.mtop small{color:var(--mut);font-size:11.5px;font-family:var(--f-lat);direction:ltr;unicode-bidi:isolate}
.mcard p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.55;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.mtags span{font-size:11px;padding:4px 10px;border-radius:999px;background:var(--bg2);color:var(--mut)}
.mgo{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
     font-size:12.5px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:6px}
.mcard:hover .mgo .arr{transform:translateY(3px)}
.mgo .arr{transition:transform .25s}
/* Small numbers inside the card — the detail that earns the card a second look */
.mnums{display:flex;flex-wrap:wrap;gap:20px;margin-top:13px}
.mnums b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
         font-family:var(--f-lat);direction:ltr;unicode-bidi:isolate}
.mnums span{font-size:10.5px;color:var(--mut);display:block}
@media(max-width:640px){ .mcard{flex-basis:300px} .mshot{height:168px} .mnums{gap:14px} }

/* ---------- detail section (app or game) ---------- */
.sec{padding:96px 0;border-top:1px solid var(--line)}
.sec:nth-child(even){background:var(--bg2)}
.shead{display:flex;align-items:flex-start;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.shead .ic{width:66px;height:66px;border-radius:18px;flex:none;background:#e9edf3;object-fit:cover;
           box-shadow:0 8px 22px rgba(15,23,32,.10)}
.shead .icph{width:66px;height:66px;border-radius:18px;flex:none;display:grid;place-items:center;
             background:linear-gradient(140deg,#0b64d6,#062f6b);color:#fff;font-size:24px;font-weight:800;
             font-family:var(--f-lat);box-shadow:0 8px 22px rgba(11,100,214,.28)}
.num{font-size:12.5px;font-weight:800;color:var(--accent);font-family:var(--f-lat);
     letter-spacing:.1em;margin-bottom:9px}
.sec h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;margin:0 0 6px;font-weight:800;line-height:1.14}
html[dir=rtl] .sec h2{letter-spacing:0}
.sec .one{font-size:17px;color:var(--ink2);margin:0}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-size:12px;padding:6px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink2)}
/* Must come after the even-section rule, or the white background wins and the white text disappears */
/* The role chip was solid blue, so it read as a button it is not. Now it is
   outlined in the brand colour — clearly a label, not something to press. */
.sec .chip.role,.sec:nth-child(even) .chip.role{background:rgba(11,100,214,.07);
   border-color:rgba(11,100,214,.32);color:var(--accent2);font-weight:700}
.chip.live,.sec:nth-child(even) .chip.live{background:#e8f7ee;border-color:#bfe6cd;color:#1c7a44;font-weight:700}

.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;margin-top:44px;align-items:start}
/* The gallery stays pinned while the detail is read — before this it left a large
   gap beneath it whenever there were fewer shots than there was copy. */
.grid > div:first-child{position:sticky;top:96px}
@media(max-width:940px){ .grid{grid-template-columns:1fr;gap:34px}
                         .grid > div:first-child{position:static} }

/* No scroll-snap, deliberately. Snap reset scrollLeft back to zero on every
   small step, so the gallery sat frozen while looking fine — caught by measuring
   on 2026-08-04: setting scrollLeft=40 by hand read back 0. */
.gal{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scrollbar-width:thin;
     overscroll-behavior-x:contain}
.gal::-webkit-scrollbar{height:7px}
.gal::-webkit-scrollbar-thumb{background:#d3dae4;border-radius:4px}
.gal img{flex:0 0 auto;height:400px;width:auto;border-radius:15px;border:1px solid var(--line);
         background:#fff;box-shadow:0 10px 30px rgba(15,23,32,.07)}
.gal.wide img{height:330px}
@media(max-width:640px){ .gal img{height:300px} .gal.wide img{height:220px} }
.noshot{border:1px dashed #cdd6e2;border-radius:15px;padding:40px 26px;text-align:center;color:var(--mut);
        font-size:13.5px;background:#fff}

.stat3{display:flex;flex-wrap:wrap;gap:34px;margin:0 0 26px}
.stat3 b{display:block;font-size:25px;font-weight:800;letter-spacing:-.02em;font-family:var(--f-lat);
         direction:ltr;unicode-bidi:isolate;line-height:1.15}
.stat3 span{font-size:12px;color:var(--mut)}
.sec .body{font-size:15.5px;color:var(--ink2);margin:0 0 26px}
h3.mini{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
        font-weight:700;margin:0 0 12px;font-family:var(--f-lat)}
html[dir=rtl] h3.mini{letter-spacing:0;font-family:var(--f-ar);text-transform:none;font-size:12.5px}
ul.did{list-style:none;padding:0;margin:0 0 26px}
ul.did li{position:relative;padding-inline-start:22px;margin-bottom:9px;font-size:14.5px;color:var(--ink2)}
ul.did li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:7px;height:7px;
                  border-radius:50%;background:var(--accent)}
.hardbox{border-inline-start:3px solid var(--accent);background:#fff;padding:16px 20px;
         border-radius:0 12px 12px 0;margin-bottom:26px}
html[dir=rtl] .hardbox{border-radius:12px 0 0 12px}
.hardbox b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
           margin-bottom:6px;font-family:var(--f-lat)}
html[dir=rtl] .hardbox b{letter-spacing:0;text-transform:none;font-family:var(--f-ar);font-size:13px}
.hardbox p{margin:0;font-size:14.5px;color:var(--ink2)}
.tech{font-size:12.5px;color:var(--mut);font-family:var(--f-lat);direction:ltr;text-align:start;margin-bottom:24px}
.btns{display:flex;flex-wrap:wrap;gap:11px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:11px;
     font-size:13.5px;font-weight:600;border:1px solid var(--line);background:#fff;transition:.18s}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn svg{width:16px;height:16px;flex:none;fill:currentColor}
.privnote{font-size:13px;color:var(--mut);background:#fff;border:1px dashed #cdd6e2;
          border-radius:11px;padding:13px 17px}

/* ---------- cross-link box ---------- */
.cross{padding:88px 0;border-top:1px solid var(--line);background:var(--bg2)}
.crossbox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:46px 44px;
          box-shadow:0 18px 44px rgba(15,23,32,.07)}
.crossbox .eyebrow{margin-bottom:14px}
.crossbox h2{font-size:clamp(25px,3.4vw,38px);letter-spacing:-.03em;margin:0 0 12px;font-weight:800;line-height:1.15}
html[dir=rtl] .crossbox h2{letter-spacing:0}
.crossbox p{color:var(--ink2);font-size:16px;margin:0 0 26px;max-width:60ch}
@media(max-width:640px){ .crossbox{padding:32px 24px} }

/* ---------- footer ---------- */
footer{padding:84px 0 46px;border-top:1px solid var(--line);
       background:radial-gradient(900px 420px at 12% -10%, #17263a, transparent 62%), var(--ink);
       color:#fff}
html[dir=rtl] footer{background:radial-gradient(900px 420px at 88% -10%, #17263a, transparent 62%), var(--ink)}
.ftop{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
@media(max-width:900px){ .ftop{grid-template-columns:1fr;gap:40px} }
footer h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;margin:0 0 14px;font-weight:800;line-height:1.14}
html[dir=rtl] footer h2{letter-spacing:0}
footer p{color:#9fb0c4;margin:0 0 26px;font-size:15.5px;max-width:46ch}
footer .btn{background:transparent;border-color:#33445a;color:#fff}
footer .btn:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.05)}
footer .btn.pri{background:#fff;border-color:#fff;color:var(--ink)}
footer .btn.pri:hover{background:#e8eef6;border-color:#e8eef6;color:var(--ink)}

/* Right-hand links column */
.fcol h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6f8095;
         font-weight:700;margin:0 0 14px;font-family:var(--f-lat)}
html[dir=rtl] .fcol h3{letter-spacing:0;text-transform:none;font-family:var(--f-ar);font-size:12.5px}
.flinks{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
@media(max-width:420px){ .flinks{grid-template-columns:1fr} }
.flinks a{display:flex;align-items:center;gap:10px;color:#c2cfdd;font-size:13.5px;font-weight:500;
          padding:8px 11px;border-radius:10px;border:1px solid transparent;transition:.16s;min-width:0}
.flinks a:hover{background:rgba(255,255,255,.06);border-color:#2c3b4f;color:#fff}
.flinks a svg{width:15px;height:15px;fill:currentColor;flex:none;opacity:.75}
.flinks a:hover svg{opacity:1}
.flinks a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Section links row */
.fnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.fnav a{font-size:13px;font-weight:600;color:#9fb0c4;padding:8px 15px;border-radius:999px;
        border:1px solid #2c3b4f;transition:.16s}
.fnav a:hover{color:#fff;border-color:#54708f;background:rgba(255,255,255,.05)}

.fine{margin-top:52px;padding-top:22px;border-top:1px solid #23303f;color:#6f8095;font-size:12.5px;
      display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.fine b{color:#9fb0c4;font-weight:600}
.d8{direction:ltr;unicode-bidi:isolate;display:inline-block}