/* OPTES shared site chrome: tokens, header, mobile menu, footer, buttons, cards, reveal.
   One file for every page (home, game, security, 404, developers). Spec: optes-deploy/SITE-NAV-SPEC.md */
:root{
  color-scheme:dark;
  --bg:#000;--s1:#0b0b0b;--s2:#141414;--s3:#1f1f1f;--s4:#2a2a2a;
  --ink:#fff;--ink2:#b4b4b4;--ink3:#8a8a8a;
  --rule:rgba(255,255,255,.1);--rule2:rgba(255,255,255,.18);
  --gold:#c9b37e;
  --ar:"IBM Plex Sans Arabic","Manrope","Segoe UI",Tahoma,Arial,sans-serif;
  --lat:"Manrope","IBM Plex Sans Arabic","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --nav:64px;--max:1376px;--gut:32px;--r:20px;--rl:24px;
  --ease:cubic-bezier(.2,.7,.1,1);--fast:180ms;--base:420ms;--slow:800ms;
  --padR:max(var(--gut),env(safe-area-inset-right,0px));--padL:max(var(--gut),env(safe-area-inset-left,0px));
}
@media (max-width:760px){:root{--gut:20px;--nav:56px}}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--ar);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
main{display:block;overflow-x:clip}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:0;text-wrap:balance}
img,video,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.lat{font-family:var(--lat);direction:ltr;unicode-bidi:isolate}
.wrap{max-width:calc(var(--max) + var(--padR) + var(--padL));margin-inline:auto;padding-inline:var(--padR) var(--padL)}
.skip{position:absolute;top:-80px;inset-inline-start:12px;z-index:200;background:var(--ink);color:#000;padding:10px 14px;border-radius:10px;font-size:14px}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--s3);color:var(--ink);font:500 15px/1 var(--ar);cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease),opacity var(--fast) var(--ease)}
.btn:hover{background:var(--s4)}
.btn.light{background:var(--ink);color:#000}
.btn.light:hover{background:#dcdcdc}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px}
.btn[aria-disabled="true"]{cursor:not-allowed;color:var(--ink2)}
.btn[aria-disabled="true"]:hover{background:var(--s3)}
.btn .ic{width:14px;height:14px;flex:none}
.link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);min-height:44px}
.link:hover{color:var(--ink2)}
.link .ic{width:12px;height:12px}

/* ── header ── */
.sn{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.92);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);padding-top:env(safe-area-inset-top,0px)}
.sn .in{display:flex;align-items:center;gap:40px;height:var(--nav)}
.sn-logo{display:inline-flex;align-items:center;min-height:44px;font:600 19px/1 var(--lat);letter-spacing:.06em;direction:ltr;color:var(--ink)}
.sn-links{display:flex;align-items:center;gap:28px;font-size:14px}
.sn-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);transition:color var(--fast) var(--ease)}
.sn-links a:hover,.sn-links a[aria-current="page"]{color:var(--ink2)}
.sn-end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.sn-menu-btn{display:none;margin-inline-start:auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative}
.sn-menu-btn i{position:absolute;inset-inline:12px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform var(--base) var(--ease),top var(--base) var(--ease)}
.sn-menu-btn i:first-child{top:17px}.sn-menu-btn i:last-child{top:25px}
html.menu-open .sn-menu-btn i:first-child{top:21px;transform:rotate(45deg)}
html.menu-open .sn-menu-btn i:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:960px){.sn-links,.sn-end{display:none}.sn-menu-btn{display:block}}
.sn-menu{position:fixed;inset:calc(var(--nav) + env(safe-area-inset-top,0px)) 0 0;z-index:59;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;padding:8px 0 calc(24px + env(safe-area-inset-bottom,0px));padding-inline:var(--padR) var(--padL);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--base) var(--ease),transform var(--base) var(--ease),visibility 0s var(--base)}
html.menu-open{overflow:hidden}
html.menu-open .sn-menu{opacity:1;visibility:visible;transform:none;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.sn-menu nav a{display:flex;align-items:center;min-height:56px;font:500 22px/1.3 var(--ar);color:var(--ink)}
.sn-menu nav a:hover{color:var(--ink2)}
.sn-menu .acts{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:10px}
.sn-menu .acts .btn{width:100%;min-height:48px}
@media (min-width:961px){.sn-menu{display:none}}

/* the locked sign-in: a small note says when it opens */
.tip{position:fixed;z-index:80;inset-inline:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));margin-inline:auto;width:max-content;max-width:calc(100% - 40px);padding:12px 18px;border-radius:999px;background:var(--ink);color:#000;font:500 14px/1.4 var(--ar);text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.tip.show{opacity:1;transform:none}
html.menu-open .tip{bottom:auto;top:calc(var(--nav) + env(safe-area-inset-top,0px) + 12px)}

/* ── section heads and cards (shared) ── */
.sec{padding-block:clamp(72px,9vw,128px) 0}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px}
.sh h2{font:500 clamp(22px,2vw,26px)/1.35 var(--ar)}
.eyebrow{font:500 14px/1.4 var(--ar);color:var(--ink2)}
.card{display:block;color:var(--ink)}
.card .media{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--s2);isolation:isolate}
.card .media img,.card .media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease)}
.card:hover .media img{transform:scale(1.025)}
.card .media::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.card h3{margin-top:16px;font:500 18px/1.45 var(--ar)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink3)}
.meta b{font-weight:500;color:var(--ink)}

/* ── footer ── */
.sf{padding-block:clamp(96px,10vw,144px) calc(28px + env(safe-area-inset-bottom,0px));font-size:14px}
.sf-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 32px}
.sf h4{font:400 14px/1.4 var(--ar);color:var(--ink3);margin-bottom:12px}
.sf h4+ul+h4{margin-top:32px}
.sf li a{display:inline-flex;align-items:center;gap:.3em;min-height:36px;color:var(--ink);transition:color var(--fast) var(--ease)}
.sf li a:hover{color:var(--ink2)}
.sf li .soon{color:var(--ink3);font-size:12px;margin-inline-start:6px}
.sf-base{margin-top:clamp(64px,7vw,96px);display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;color:var(--ink2);font-size:13px}
.sf-base .who{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.sf-base .lang{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--s2);color:var(--ink);font-size:14px}
.sf-base .lang svg{width:15px;height:15px}
@media (max-width:960px){.sf-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.sf-cols{grid-template-columns:minmax(0,1fr);gap:40px}.sf h4+ul+h4{margin-top:40px}.sf-base{flex-direction:column;align-items:center;text-align:center}.sf-base .who{justify-content:center}}

/* ── reveal: only what is below the fold waits, so nothing ever flashes ── */
.rv-wait{opacity:0;transform:translateY(16px)}
.rv-in{opacity:1;transform:none;transition:opacity var(--slow) var(--ease) var(--d,0ms),transform var(--slow) var(--ease) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv-wait{opacity:1;transform:none}
}