/* NEW YOLK LAND v3: black-gold cinematic (SITE_V3_BRIEF). RTL-first, logical properties. */
@font-face{font-family:"Lalezar";src:url(/fonts/Lalezar.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Aref Ruqaa";src:url(/fonts/ArefRuqaa.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/InterTight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cairo";src:url(/fonts/Cairo.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{
 --bg:#070605;--bg2:#100d0a;--line:rgba(232,169,58,.2);--gold:#E8A93A;--gold2:#ffd27a;--amber:#b8661f;--ink:#f3ece0;--mute:#a59d90;
 --teal:#4fc6b8;--steel:#7fa2b0;--cafe:#9e2b25;--tower:#6a5cff;
 --navy:#1B2330;--navy2:#121821;--petrol:#1F4E52;--petrol2:#163a3d;--ivory:#F4EBDA;--ivory2:#EADDC4;--orange:#E2702F;
 --surface:rgba(255,255,255,.05);--field:#0b0b0d;--leadc:#d9d0c2;--h2c:var(--gold2);--goldt:var(--gold);
 --fd:"Lalezar","Inter Tight",system-ui,sans-serif;--fl:"Inter Tight","Cairo",system-ui,sans-serif;--fb:"Cairo","Inter Tight",system-ui,sans-serif;--fa:"Aref Ruqaa","Lalezar",serif;
 --pad:clamp(18px,5vw,80px);--max:1320px;color-scheme:dark}
html[lang=en]{--fd:"Inter Tight","Lalezar",system-ui,sans-serif;--fb:"Inter Tight","Cairo",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--fb);overflow-x:hidden}
img,svg{max-width:100%}
picture{display:block}
picture img{display:block;width:100%;height:100%;object-fit:cover}
a{color:var(--gold)}
h1,h2,h3{margin:0;font-family:var(--fd);font-weight:400;line-height:.98}
html[lang=en] h1,html[lang=en] h2{font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
p{margin:0 0 1em}
.small{font-size:13px;color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:900px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--gold);color:#000;padding:8px 14px;border-radius:8px;font-weight:800}
.skip:focus{top:12px}
[tabindex="-1"]:focus{outline:none}   /* in-page link targets (main, sections) get focus by script, no ring round the block */
.kicker{display:flex;align-items:center;gap:12px;font:800 13px/1 var(--fl);letter-spacing:.32em;text-transform:uppercase;color:var(--goldt);margin:0 0 18px}
html[lang=ar] .kicker{letter-spacing:.04em;font-family:var(--fb);font-size:15px}
.kicker::before{content:"";width:34px;height:1px;background:var(--goldt)}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--leadc);max-width:58ch}
.tag{font:800 11px/1 var(--fl);padding:6px 10px;border-radius:999px;border:1px solid rgba(243,236,224,.3);background:rgba(11,11,13,.6);color:var(--ink);letter-spacing:.04em;backdrop-filter:blur(6px)}
.tag-concept{border-color:var(--amber);color:#ffc89a}.tag-render{border-color:var(--teal);color:#b5f1e8}
.badge{display:inline-block;font:800 11px/1 var(--fl);padding:5px 9px;border-radius:999px;border:1px solid;letter-spacing:.05em;text-transform:none}
.badge-optional{color:#b5f1e8;border-color:var(--teal)}.badge-later{color:#ffc49f;border-color:var(--amber)}
.badge-live{color:#9ee0c9;border-color:#3fb3a6}.badge-dev{color:var(--gold);border-color:var(--gold)}.badge-planned{color:#ffc49f;border-color:var(--amber)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 30px;font:800 16px/1 var(--fb);text-decoration:none;border:1px solid transparent;cursor:pointer;
 clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .2s,filter .2s;color:var(--ink);background:none}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.gold,.btn-gold{background:var(--gold);color:#0d0904;clip-path:none;border-radius:2px;box-shadow:0 10px 40px rgba(232,169,58,.35);letter-spacing:.02em}
.btn.gold:hover,.btn-gold:hover{background:#f5bb4f}
.btn.ghost,.btn-line{border-color:rgba(243,236,224,.35);background:rgba(11,11,13,.35)}
.btn-ivory{background:var(--ink);color:#000}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* clip-path cuts away any outline outside the box: clipped buttons draw the ring inside, in their own text colour */
.btn:not(.gold):not(.btn-gold):focus-visible{outline:3px solid currentColor;outline-offset:-7px;border-radius:0}

/* header */
.top{position:fixed;inset-inline:0;top:0;z-index:50;display:flex;align-items:center;gap:22px;padding:18px var(--pad);mix-blend-mode:normal;transition:background .3s,padding .3s}
.top.solid{background:rgba(11,11,13,.82);backdrop-filter:blur(14px);padding-block:10px;box-shadow:0 1px 0 var(--line)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-inline-end:auto;font:900 13px var(--fl);letter-spacing:.3em}
.mark img{width:40px;height:40px;filter:drop-shadow(0 0 12px rgba(242,184,75,.5))}
#nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
#nav a{color:var(--ink);text-decoration:none;font:700 14px var(--fb);opacity:.8}
#nav a:hover,#nav a.on{opacity:1;color:var(--gold)}
.lang{color:var(--ink);text-decoration:none;font:800 13px var(--fl);border:1px solid var(--line);padding:9px 14px;letter-spacing:.08em}
.menu{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;flex-direction:column;gap:6px;align-items:center;justify-content:center;cursor:pointer}
.menu span:not(.sr){width:20px;height:2px;background:var(--ink)}
.notice{position:fixed;top:80px;inset-inline:var(--pad);z-index:60;display:flex;gap:12px;justify-content:space-between;align-items:center;background:var(--ink);color:#000;padding:12px 16px;max-width:720px;margin-inline:auto;font-weight:700}
.notice p{margin:0}.notice-x{border:0;background:none;font-size:24px;cursor:pointer}

/* hero: key art A (user pick), animated layers */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#000;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:0;transform-origin:62% 50%;animation:push 20s ease-in-out infinite alternate}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.06)}}
.ka{position:absolute;inset:-14px;will-change:transform;transform:translate3d(calc(var(--mx,0) * var(--d) * -12px),calc(var(--my,0) * var(--d) * -8px),0)}
.ka-base{--d:.35}.ka-rift{--d:1}.ka-edge{--d:1}.ka-sweep{--d:1}.ka-smoke{--d:.6}
.ka picture,.ka img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 50%}
.ka-rift img{filter:brightness(1.06) saturate(1.08)}
.ka-edge{mix-blend-mode:screen;animation:edge 3.6s ease-in-out infinite}
@keyframes edge{0%,100%{opacity:.35}50%{opacity:.95}}
.ka-sweep{-webkit-mask:url(/hero/mask-1280.png) 22% 50%/cover no-repeat;mask:url(/hero/mask-1280.png) 22% 50%/cover no-repeat;mix-blend-mode:screen;overflow:hidden}
.ka-sweep::before{content:"";position:absolute;inset-inline:0;height:28%;top:0;transform:translateY(358%);will-change:transform;background:linear-gradient(to top,transparent,rgba(255,226,150,.55),rgba(255,246,214,.85),rgba(255,226,150,.5),transparent);animation:riftsweep 6.5s cubic-bezier(.45,0,.3,1) infinite}
/* transform, not top: moving top re-lays out the page every frame (CLS) */
@keyframes riftsweep{0%{transform:translateY(358%)}70%,100%{transform:translateY(-108%)}}
.ka-smoke{pointer-events:none;overflow:hidden}
.ka-smoke i{position:absolute;width:42vw;height:42vw;border-radius:50%;background:radial-gradient(circle,rgba(180,170,160,.16),rgba(120,110,100,.06) 45%,transparent 70%);filter:blur(18px);right:-8vw;top:20%;animation:smoke 26s linear infinite}
.ka-smoke i:nth-child(2){top:50%;right:4vw;width:34vw;height:34vw;animation-duration:32s;animation-delay:-11s}
.ka-smoke i:nth-child(3){top:-6%;right:10vw;width:30vw;height:30vw;animation-duration:38s;animation-delay:-20s}
@keyframes smoke{0%{transform:translate(0,0) scale(1);opacity:0}15%{opacity:1}100%{transform:translate(-14vw,-10vh) scale(1.35);opacity:0}}
.h-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.2) 38%,transparent 55%),radial-gradient(ellipse at 66% 50%,transparent 45%,rgba(0,0,0,.7) 100%),linear-gradient(to top,var(--bg),transparent 18%)}
.hero-copy{position:absolute;z-index:3;left:var(--pad);right:auto;top:50%;transform:translateY(-50%);width:min(780px,44vw);text-align:left}
[dir=rtl] .hero-copy .cta{justify-content:flex-end}
[dir=rtl] .hero-copy .badge-inv{flex-direction:row-reverse}
.lockup{width:min(360px,100%);height:auto;margin-bottom:22px;filter:drop-shadow(0 0 40px rgba(232,169,58,.3))}
.hero h1{font-size:clamp(30px,2.9vw,54px);color:#fff4dd;margin-bottom:28px;text-shadow:0 4px 40px rgba(0,0,0,.6)}
html[lang=en] .hero h1{font-size:clamp(24px,2.2vw,40px);letter-spacing:.06em}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.badge-inv{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;font:800 13px var(--fl);letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
html[lang=ar] .badge-inv{font-family:var(--fb);letter-spacing:0;font-size:14px}
.badge-inv i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(232,169,58,.7);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(232,169,58,0)}100%{box-shadow:0 0 0 0 rgba(232,169,58,0)}}
.ph-note{display:none}

/* reveal masks */
/* the mask is a clip-path that reaches past the line box (Arabic dots, ascenders), so the line height is untouched */
.reveal-words .w{display:inline-block;vertical-align:bottom}
.js.motion .reveal-words .w{clip-path:inset(-.45em -.2em -.3em -.2em)}
.js.motion .reveal-words.done .w{clip-path:none}
html{scroll-padding-top:var(--navh,72px)}
.reveal-words .w>span{display:inline-block}
.js.motion .reveal-words .w>span{transform:translateY(110%)}
.js.motion .reveal-words.in .w>span{transform:none;transition:transform 1s cubic-bezier(.2,.8,.1,1)}
.js.motion .reveal-words.in .w:nth-child(2)>span{transition-delay:.08s}.js.motion .reveal-words.in .w:nth-child(3)>span{transition-delay:.16s}
.js.motion .reveal-words.in .w:nth-child(4)>span{transition-delay:.24s}.js.motion .reveal-words.in .w:nth-child(5)>span{transition-delay:.32s}

/* world: pinned horizontal pan across the panorama */
.world{position:relative;background:#000}
.world-pin{position:relative;height:100svh;overflow:hidden}
.world-track{position:absolute;top:0;left:0;height:100%;width:max(100vw,calc(100svh * var(--ar,2.33)));will-change:transform}
.world-track picture,.world-track img{display:block;width:100%;height:100%}
.world-track img{object-fit:cover}
html[dir=rtl]:not(.motion) .world-track{left:auto;right:0}
.pin{position:absolute;left:calc(var(--px) * 100%);top:calc(var(--py) * 100%);display:flex;align-items:center;gap:8px;font:800 14px var(--fb);color:var(--ink);text-shadow:0 2px 12px #000;transform:translate(-50%,-50%)}
.pin i{width:12px;height:12px;border-radius:50%;border:2px solid var(--gold);background:rgba(242,184,75,.3);box-shadow:0 0 0 6px rgba(242,184,75,.12)}
.world-copy{position:absolute;inset-block-end:9vh;inset-inline-start:var(--pad);z-index:2;max-width:520px;padding:26px;background:linear-gradient(to top,rgba(27,35,48,.92),rgba(27,35,48,.55));border-inline-start:3px solid var(--orange);backdrop-filter:blur(4px)}
.world-copy h2{font-size:clamp(46px,7vw,120px);color:var(--gold2);margin-bottom:12px}
.world-copy .tag{display:inline-block;margin-top:4px}

/* chapters: full-screen, colour graded, clip-path wipe in */
.chapter{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.ch-media{position:absolute;inset:0;z-index:-2}
.ch-media picture{height:100%}
.js.motion:not(.no-st) .ch-media{clip-path:inset(12% 8% 12% 8%)}   /* only where the scroll wipe runs */
.ch-media img{transform:scale(1.15)}
.ch-grade{position:absolute;inset:0;z-index:-1}
.g-farm .ch-grade{background:linear-gradient(to top,rgba(11,11,13,.92) 4%,rgba(60,32,6,.2) 42%,transparent 70%),radial-gradient(ellipse at 70% 20%,rgba(255,180,80,.25),transparent 60%)}
.g-market .ch-grade{background:linear-gradient(to top,rgba(11,11,13,.92) 4%,rgba(40,10,50,.3) 45%,transparent 70%),radial-gradient(ellipse at 30% 30%,rgba(255,60,180,.18),transparent 55%)}
.g-war .ch-grade{background:linear-gradient(to top,rgba(5,10,12,.94) 6%,rgba(20,45,52,.35) 45%,rgba(79,198,184,.06))}
.g-war .ch-media img{filter:saturate(.55) contrast(1.15) hue-rotate(-8deg)}
.g-cafe .ch-grade{background:linear-gradient(to top,rgba(11,11,13,.92) 4%,rgba(90,20,18,.3) 45%,transparent 70%),radial-gradient(ellipse at 70% 30%,rgba(79,198,184,.12),transparent 55%)}
.g-tower .ch-grade{background:radial-gradient(ellipse at 65% 35%,rgba(106,92,255,.28),transparent 55%),radial-gradient(ellipse at 60% 20%,rgba(79,198,184,.2),transparent 50%),linear-gradient(to top,var(--bg) 6%,rgba(11,11,13,.2))}
.g-tower{background:#06060c}
.ch-copy{position:relative;width:100%;padding:0 var(--pad) 12vh;max-width:var(--max);margin:0 auto}
.ch-n{font:900 clamp(80px,14vw,220px)/.8 var(--fl);color:transparent;-webkit-text-stroke:1px rgba(242,184,75,.45);margin:0 0 -.15em}
.chapter h2{font-size:clamp(46px,8.5vw,150px);max-width:14ch;color:var(--ink);margin-bottom:28px}
.g-war h2{color:#d8eef2}.g-tower h2{color:#e8e4ff}.g-farm h2{color:#ffe7b8}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px;padding:0;margin:0;font:700 16px var(--fb)}
.facts li{display:flex;gap:10px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;min-width:200px}
.f-n{font:800 12px var(--fl);color:var(--gold);letter-spacing:.12em}
.ch-label{position:absolute;inset-block-start:96px;inset-inline-end:var(--pad);z-index:2}
.chapter .kicker .badge{margin-inline-start:10px}
/* tower teaser rings */
.tw{display:grid;place-items:center}
.tw-stage{position:absolute;top:8%;inset-inline-end:8%;width:min(70vh,60vw);aspect-ratio:1;perspective:900px;display:grid;place-items:center}
.tw-emblem{width:44%;height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 50px rgba(106,92,255,.7)) drop-shadow(0 0 20px rgba(242,184,75,.6));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.tw-beam{position:absolute;left:50%;bottom:-10%;width:16%;height:70%;transform:translateX(-50%);background:linear-gradient(to top,rgba(79,198,184,.45),transparent);filter:blur(16px)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid rgba(242,184,75,.7);box-shadow:0 0 22px rgba(106,92,255,.45);transform-style:preserve-3d}
.ring i{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 16px #9fdcff}
.ring.r0{width:72%;height:72%;margin:-36% 0 0 -36%;animation:orbA 9s linear infinite}
.ring.r1{width:90%;height:90%;margin:-45% 0 0 -45%;border-color:rgba(79,198,184,.7);animation:orbB 13s linear infinite}
.ring.r2{width:56%;height:56%;margin:-28% 0 0 -28%;border-color:rgba(160,150,255,.75);animation:orbC 7s linear infinite reverse}
.ring.r3{width:104%;height:104%;margin:-52% 0 0 -52%;border-style:dashed;border-color:rgba(243,236,224,.3);animation:orbB 21s linear infinite reverse}
@keyframes orbA{from{transform:rotateX(66deg) rotateZ(0)}to{transform:rotateX(66deg) rotateZ(360deg)}}
@keyframes orbB{from{transform:rotateX(60deg) rotateY(12deg) rotateZ(0)}to{transform:rotateX(60deg) rotateY(12deg) rotateZ(360deg)}}
@keyframes orbC{from{transform:rotateX(70deg) rotateY(-10deg) rotateZ(0)}to{transform:rotateX(70deg) rotateY(-10deg) rotateZ(360deg)}}

/* characters */
.chars-sec,.plat-sec,.beta-sec,.faq-sec,.support-sec{padding:16vh 0}
.support-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--pad);align-items:start}
.support-sec h2{font-size:clamp(44px,7vw,120px);margin-bottom:30px}
.del-note{border-inline-start:2px solid var(--gold);padding-inline-start:14px;color:#d9d0c2;font-size:15px}
.form textarea{font:inherit;color:var(--ink);background:var(--field);border:1px solid rgba(243,236,224,.6);padding:12px 14px;width:100%;min-height:120px}
.form h3{font:400 28px var(--fd);margin:0}
.chars-sec h2,.plat-sec h2,.beta-sec h2,.faq-sec h2{font-size:clamp(44px,7vw,120px);margin-bottom:30px}
.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0 16px;perspective:1000px}
.char{position:relative;margin:0;aspect-ratio:3/4.4;overflow:hidden;background:#000;transition:transform .25s;transform-style:preserve-3d;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.char-img{position:absolute;inset:0}
.char-img picture{height:100%}
.char img{filter:contrast(1.05) saturate(.95);transition:transform .6s}
.char:hover img{transform:scale(1.05)}
.char::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent 50%)}
.char figcaption{position:absolute;z-index:2;inset-block-end:22px;inset-inline-start:22px}
.c-role{display:block;font:800 12px var(--fl);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
html[lang=ar] .c-role{letter-spacing:0;font-family:var(--fb);font-size:14px}
.c-name{display:block;font:400 clamp(30px,3vw,48px)/1 var(--fd);color:var(--ink)}

/* platforms: glass cards */
.plat-sec{}
.pl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:34px}
.pl{grid-column:span 2;display:flex;flex-direction:column;padding:24px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(243,236,224,.12);backdrop-filter:blur(10px);
 clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.pl:nth-child(1),.pl:nth-child(2){grid-column:span 3;border-color:rgba(242,184,75,.4)}
.pl.is-suggested{box-shadow:inset 0 0 0 1px var(--gold)}
.pl-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pl-head h3{font:400 28px var(--fd)}
html[lang=en] .pl-head h3{font:800 22px var(--fl)}
.pl-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line)}
.pl-icon svg{width:24px;height:24px}
.pl-st{margin-inline-start:auto;font:800 11px var(--fl);padding:6px 10px;border:1px solid;letter-spacing:.06em}
.st-invite{color:var(--teal);border-color:var(--teal)}.st-limited{color:var(--gold)}.st-soon{color:var(--mute);border-color:rgba(165,157,144,.4)}.st-ready{color:#9ee0c9}
.pl-k{font:800 11px var(--fl);letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin:0 0 4px}
.pl-access{font-size:15px}
.ticks{list-style:none;padding:0;margin:0 0 14px;font-size:14px}
.ticks li{padding-inline-start:16px;position:relative}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:6px;height:6px;background:var(--gold)}
.pl-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 14px;font-size:14px;padding:12px;background:rgba(0,0,0,.35)}
.pl-meta dt{color:var(--mute)}.pl-meta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pl-meta code{font-size:12px}.pl-meta code.tbd{font:inherit}
.pl-invnote{margin:0 0 12px;padding:10px 12px;border:1px dashed var(--gold);font-size:14px;font-weight:700;color:var(--gold2)}
.pl-invnote a{color:var(--ink)}
.pl-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.pl-actions .btn{min-height:46px;padding:10px 20px;font-size:14px}
.checker{border:1px solid var(--line);background:var(--bg2);color:var(--ink);padding:0;width:min(92vw,600px)}
.checker::backdrop{background:rgba(0,0,0,.85)}
.chk-inner{padding:26px}
.checks{list-style:none;padding:0;margin:14px 0}
.checks li{position:relative;padding:8px 12px;padding-inline-start:38px;margin-bottom:6px;background:rgba(255,255,255,.04)}
.checks li::before{position:absolute;inset-inline-start:12px;font-weight:900}
.chk-ok::before{content:"✓";color:#7fd3b6}.chk-bad::before{content:"✕";color:#ff8f84}.chk-warn::before{content:"!";color:var(--gold)}.chk-info::before{content:"i";color:var(--mute)}
.chk-result{font-weight:800}.chk-result.ok{color:#9ee0c9}.chk-result.bad{color:#ffb4ac}
.chk-actions{display:flex;flex-wrap:wrap;gap:10px}
.chk-size{color:var(--mute)}

/* beta: big invite-only panel */
.beta-sec{border-block:1px solid var(--line)}
.beta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--pad);align-items:center}
.beta-sec h2{color:var(--h2c)}
.form{position:relative;display:grid;gap:12px;padding:28px;background:rgba(255,255,255,.04);border:1px solid var(--gold);
 clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.form label{display:grid;gap:6px;font-weight:700;font-size:14px}
.form input,.form select{font:inherit;color:var(--ink);background:var(--field);border:1px solid rgba(243,236,224,.6);padding:12px 14px;min-height:48px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:0}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.form .check input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--gold)}
.req-type{margin:0;font-size:13px;color:var(--gold)}
.form .hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.form-msg{margin:0;min-height:1.4em;font-weight:700}.form-msg.ok{color:#9ee0c9}.form-msg.err{color:#ffb4ac}
.form-closed{margin:0;color:var(--mute)}
.field-err{color:#ffb4ac;font-size:13px}

/* faq + footer */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;padding:18px 0;font:700 19px var(--fb)}
.faq summary::after{content:"+";color:var(--goldt);font-size:24px}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--leadc)}
.foot{padding:70px 0 40px;border-top:1px solid var(--line);background:#050505}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:var(--pad);align-items:center}
.foot-lockup{width:min(260px,60vw);height:auto}
.foot-rules{color:var(--gold);font-weight:800}

/* egg trail */
.trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

@media (max-width:1000px){
 #nav{position:fixed;inset:0;z-index:-1;background:rgba(5,5,5,.97);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
 #nav{visibility:hidden;transition:opacity .25s,visibility 0s .25s}   /* closed: out of the tab order too */
 #nav.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .25s}
 #nav ul{flex-direction:column;align-items:center;gap:14px}
 #nav a{font:400 34px var(--fd)}
 .menu{display:flex}
 .pl,.pl:nth-child(1),.pl:nth-child(2){grid-column:span 3}
 .pl:nth-child(5){grid-column:span 6}
}
/* phone: designed layout, not shrunk */
@media (max-width:760px){
 body{font-size:16px}
 .mark span{display:none}
 .hero{height:auto;min-height:100svh;display:flex;flex-direction:column}
 .hero-art{position:relative;inset:auto;width:100%;height:64svh}
 .ka img,.ka picture img{object-position:68% 40%}
 .ka-sweep{-webkit-mask-position:68% 40%;mask-position:68% 40%}
 .ka{animation:drift 9s ease-in-out infinite alternate}
 @keyframes drift{from{transform:translate3d(calc(var(--d) * -6px),0,0)}to{transform:translate3d(calc(var(--d) * 6px),calc(var(--d) * -4px),0)}}
 .vignette{background:linear-gradient(to top,var(--bg) 2%,transparent 30%)}
 .hero-copy{position:relative;left:auto;top:auto;transform:none;width:100%;padding:0 var(--pad) 40px;margin-top:-24px}
 .hero-copy .lockup{width:180px}
 .lockup{width:220px}
 .hero h1{font-size:clamp(26px,7.5vw,36px)}
 html[lang=en] .hero h1{font-size:clamp(20px,5.6vw,28px)}
 .cta .btn{flex:1 1 100%}
 .ph-note{position:relative;inset:auto;margin:0 var(--pad) 20px}
 .world-copy{inset-inline:12px;inset-block-end:4vh;padding:18px}
 .chapter{min-height:92svh}
 .ch-copy{padding-bottom:9vh}
 .chapter h2{font-size:clamp(40px,12vw,64px)}
 .facts{flex-direction:column;gap:10px}
 .tw-stage{margin-inline-start:0;width:90vw}
 .chars{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
 .char{scroll-snap-align:center}
 .pl-grid{grid-template-columns:1fr}
 .pl,.pl:nth-child(n){grid-column:auto}
 .beta-grid,.foot-in,.support-grid{grid-template-columns:1fr}
 .chars-sec,.plat-sec,.beta-sec,.faq-sec{padding:10vh 0}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .reveal-words .w>span{transform:none!important}
 .js .ch-media{clip-path:none!important}
 .ch-media img{transform:none!important}
 .trail,.h-sparks,.grain{display:none}
}

.s-glint{animation:glint 3.5s ease-in-out infinite}
@keyframes glint{0%,70%,100%{opacity:.2}80%{opacity:1}}

/* egg-crack preloader (JS only, once per session) */
.preloader{display:none}
.js .preloader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#000;transition:opacity .6s}
.pl-egg{width:min(34vh,56vw);height:auto;overflow:visible}
.pl-egg .pl-top,.pl-egg .pl-bot{transition:transform .9s cubic-bezier(.6,0,.2,1)}
.pl-crack{stroke-dasharray:600;stroke-dashoffset:600;filter:drop-shadow(0 0 10px #ffb84a)}
.pl-burst{opacity:0;transform-box:fill-box;transform-origin:center}
.pl-flood{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff3cf 0,#ffcf6a 18%,#e8a93a 34%,rgba(232,169,58,0) 60%);opacity:0;transform:scale(.2);pointer-events:none}
.pl-skip{position:absolute;inset-block-end:28px;inset-inline-end:28px;background:none;border:1px solid rgba(232,169,58,.5);color:var(--gold);font:700 13px var(--fb);padding:8px 16px;cursor:pointer}
.preloader.crack .pl-crack{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out}
.preloader.open .pl-top{transform:translate(-4%,-22%) rotate(-12deg)}
.preloader.open .pl-bot{transform:translate(2%,10%) rotate(4deg)}
.preloader.open .pl-burst{opacity:1;transform:scale(9);transition:transform .9s ease-out,opacity .3s}
.preloader.open .pl-flood{opacity:1;transform:scale(3);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .4s}
.preloader.done{opacity:0;pointer-events:none}

/* world inside the egg */
.egg-sec{position:relative;padding:16vh 0;overflow:hidden;background:radial-gradient(ellipse at 40% 55%,rgba(232,169,58,.18),transparent 55%),#040302}
.egg-rays{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 38% 55%,rgba(255,207,106,.09) 0 4deg,transparent 4deg 13deg);animation:rays 60s linear infinite;mask:radial-gradient(circle at 38% 55%,#000 0,transparent 55%);-webkit-mask:radial-gradient(circle at 38% 55%,#000 0,transparent 55%)}
@keyframes rays{to{transform:rotate(360deg)}}
.egg-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--pad);align-items:center}
.egg-art{position:relative}
.egg-art .tag{position:absolute;inset-block-start:10px;inset-inline-start:10px}
.egg-img img,.egg-ph{width:100%;height:auto;filter:drop-shadow(0 30px 80px rgba(232,169,58,.35))}
.eg-glow{animation:egpulse 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes egpulse{50%{opacity:.6;transform:scale(1.05)}}
.eg-rim{filter:drop-shadow(0 0 12px #ffb84a)}
.eg-cap{transform-box:fill-box;transform-origin:20% 100%;animation:cap 6s ease-in-out infinite alternate}
@keyframes cap{from{transform:rotate(-4deg) translateY(-6px)}to{transform:rotate(-9deg) translateY(-22px)}}
.egg-sec h2{font-size:clamp(44px,6.5vw,110px);color:var(--gold2);margin-bottom:24px}
@media (max-width:760px){.egg-grid{grid-template-columns:1fr}.egg-sec{padding:10vh 0}}
@media (prefers-reduced-motion:reduce){.js .preloader{display:none}}

/* egg section with the master image (full-bleed, copy on the black side) */
.egg-full{min-height:100svh;padding:0;display:flex;align-items:center;background:#000}
.egg-bg{position:absolute;inset:0;z-index:0}
.egg-bg picture,.egg-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.egg-full .egg-glow{position:absolute;z-index:1;left:58%;top:12%;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.55),rgba(232,169,58,.18) 40%,transparent 70%);mix-blend-mode:screen;animation:egpulse 4.5s ease-in-out infinite}
.egg-full .egg-rays{inset:0;z-index:1;background:repeating-conic-gradient(from 0deg at 68% 32%,rgba(255,210,122,.08) 0 3deg,transparent 3deg 11deg);mask:radial-gradient(circle at 68% 32%,#000 0,transparent 42%);-webkit-mask:radial-gradient(circle at 68% 32%,#000 0,transparent 42%);mix-blend-mode:screen}
.egg-dust{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.egg-full .egg-copy{position:relative;z-index:3;width:min(520px,40vw);margin-inline:0;left:var(--pad)}
[dir=rtl] .egg-full .egg-copy{margin-inline-start:auto;margin-inline-end:0;left:auto;right:auto;margin-left:var(--pad)}
.egg-full::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7),transparent 45%),linear-gradient(to top,var(--bg),transparent 15%)}
@media (max-width:760px){
 .egg-full{flex-direction:column;align-items:stretch;min-height:0}
 .egg-bg{position:relative;height:60svh}
 .egg-bg img{object-position:66% 50%}
 .egg-full .egg-glow{left:48%;top:4%;width:44%}
 .egg-full .egg-copy,[dir=rtl] .egg-full .egg-copy{width:auto;margin:-40px var(--pad) 50px;left:auto}
}

/* hero title (user pick C): huge NEW YOLK, LAND in a gold band, Arabic below; text, no 3D render */
.tl{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:26px}
[dir=rtl] .tl{align-items:flex-end}
.tl-c .tl-big{font:900 clamp(60px,6.6vw,128px)/.86 var(--fl);letter-spacing:-.01em;text-transform:uppercase;color:#f6efe2;white-space:nowrap;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.tl-c .tl-bar{display:inline-block;margin-top:10px;padding:6px 26px 4px;background:var(--gold);color:#0b0805;font:900 clamp(34px,3.6vw,64px)/1 var(--fl);letter-spacing:.42em;text-indent:.42em}
.tl-ar{margin-top:14px;font:400 clamp(30px,3vw,52px)/1 var(--fd);color:#e8b75c;text-shadow:0 2px 0 rgba(0,0,0,.5)}
@media (max-width:760px){
 .tl-c .tl-big{font-size:clamp(44px,15.5vw,72px)}
 .tl-c .tl-bar{font-size:clamp(24px,8vw,34px);padding:5px 18px 3px}
 .tl-ar{font-size:clamp(26px,8vw,36px);margin-top:10px}
}

/* from the game: graded in-engine stills, horizontal strip + lightbox */
.fg-sec{padding:14vh 0 12vh}
.fg-sec h2{font-size:clamp(44px,6.5vw,110px);margin-bottom:20px;color:var(--h2c)}
.fg-strip{list-style:none;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px var(--pad) 18px;margin:0;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.fg-strip li{flex:0 0 min(42vw,720px);scroll-snap-align:start}
.fg-open{display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--line);background:#000;cursor:zoom-in;overflow:hidden}
.fg-open img{width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .6s;filter:brightness(.92)}
.fg-open:hover img,.fg-open:focus-visible img{transform:scale(1.04);filter:brightness(1.05)}
.fg-cap{margin:10px 0 0;font-size:14px;color:var(--mute);display:flex;gap:8px;align-items:center}
.fg-box{border:0;padding:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none}
.fg-box::backdrop{background:rgba(0,0,0,.92)}
.fg-box img{position:absolute;inset:6vh 6vw 10vh;width:88vw;height:84vh;object-fit:contain}
.fg-boxcap{position:absolute;inset-inline:0;bottom:3vh;text-align:center;color:var(--ink);margin:0}
.fg-prev,.fg-next,.fg-close{position:absolute;width:52px;height:52px;border:1px solid var(--line);background:rgba(0,0,0,.6);color:var(--ink);font-size:28px;cursor:pointer}
.fg-prev{left:16px;top:50%}.fg-next{right:16px;top:50%}.fg-close{right:16px;top:16px}
@media (max-width:760px){.fg-strip li{flex-basis:82vw}}

/* v3.2 hero: armoured-egg emblem over the name, a short subtitle, three state-aware actions */
.tl-egg{display:block;width:150px;margin:0 0 6px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.tl-egg img{width:100%;height:auto;object-fit:contain}
.hero h1{margin-bottom:14px}
.hero-sub{max-width:34em;margin:0 0 26px;font:500 clamp(16px,1.15vw,20px)/1.6 var(--fb);color:#f1e6d2;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.btn-watch{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 6px;color:var(--ink);font:700 16px var(--fb);text-decoration:none}
.btn-watch i{width:36px;height:36px;border-radius:50%;border:1px solid rgba(243,236,224,.5);display:grid;place-items:center;background:rgba(0,0,0,.35)}
.btn-watch i::before{content:"";border-left:11px solid var(--gold);border-block:7px solid transparent;margin-left:3px}
.btn-watch:hover{color:var(--gold2)}
@media (max-width:760px){.tl-egg{width:96px;margin-inline:auto 0}.hero-sub{font-size:16px}.btn-watch{flex:1 1 100%;justify-content:center}}

/* v3.2 palette: section themes (navy-charcoal / petrol / ivory), light spread across the page; sparks stay in the hero */
.th-ivory,.th-ivory2,.th-petrol,.th-navy{background:var(--bg);color:var(--ink)}
.th-ivory{--bg:var(--ivory);--ink:#1B2330;--mute:#5a6170;--line:rgba(27,35,48,.16);--surface:#fffaf1;--field:#fffdf8;--leadc:#2f3947;--h2c:#1B2330;--goldt:#8a5a0c;color-scheme:light}
.th-ivory2{--bg:var(--ivory2);--ink:#1B2330;--mute:#5a6170;--line:rgba(27,35,48,.18);--surface:#f8efdd;--field:#fffdf8;--leadc:#2f3947;--h2c:#1F4E52;--goldt:#8a5a0c;color-scheme:light}
.th-petrol{--bg:var(--petrol);--line:rgba(244,235,218,.18);--surface:rgba(255,255,255,.06);--field:#123033;--leadc:#d7e2dc;--h2c:var(--ivory);--goldt:#f2c36b}
.th-navy{--bg:var(--navy);--line:rgba(232,169,58,.22);--surface:rgba(255,255,255,.05);--field:#121821;--leadc:#cfd5de;--h2c:var(--gold2)}
.th-petrol{background:radial-gradient(ellipse at 85% 0,rgba(226,112,47,.16),transparent 55%),var(--petrol)}
.th-navy{background:radial-gradient(ellipse at 15% 100%,rgba(31,78,82,.5),transparent 60%),var(--navy)}
.th-ivory .btn.ghost,.th-ivory .btn-line,.th-ivory2 .btn-line{border-color:rgba(27,35,48,.35);background:transparent;color:var(--ink)}
.th-ivory .btn-ivory,.th-ivory2 .btn-ivory{background:var(--navy);color:var(--ivory)}
.th-ivory a,.th-ivory2 a{color:#8a4a12}
.th-ivory .tag,.th-ivory2 .tag{background:#fffaf1;border-color:rgba(27,35,48,.25);color:var(--ink)}
.th-ivory .small,.th-ivory2 .small{color:var(--mute)}
.th-ivory :focus-visible,.th-ivory2 :focus-visible{outline-color:#1B2330}
.tag-ingame{border-color:var(--orange)}
.badge-later{background:var(--orange);color:#1a0d04}

/* platforms: two clear paths, then compact cards (name -> status -> action -> version/size), details collapsible */
.paths{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:34px 0 26px}
.path{padding:26px;border:1px solid var(--line);background:var(--surface)}
.path h3{font:400 30px var(--fd);margin:0 0 12px}
html[lang=en] .path h3{font:800 24px var(--fl)}
.path-have{border:2px solid var(--gold);background:linear-gradient(160deg,rgba(232,169,58,.14),rgba(232,169,58,.03)),var(--surface)}
.path-have:focus{outline:none}
.path-have ol{margin:0 0 18px;padding-inline-start:22px}.path-have li{margin-bottom:6px}
.path-have code.u{font:700 .95em ui-monospace,Consolas,monospace;padding:1px 6px;background:var(--navy);color:var(--ivory)}
.path-want p{margin:0 0 18px}
.pl{grid-column:span 2;display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--surface);border:1px solid var(--line);backdrop-filter:none}
.pl-head{margin:0}
.pl-st{margin:0;align-self:flex-start;font:800 12px var(--fb);padding:6px 12px;border:1px solid;letter-spacing:.02em}
.pl-actions{margin-top:0}
.pl-meta{margin:0;background:transparent;padding:0;border-top:1px solid var(--line);padding-top:10px}
.pl-more{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}
.pl-more summary{cursor:pointer;font-weight:800;font-size:14px;min-height:44px;display:flex;align-items:center;list-style:none}
.pl-more summary::-webkit-details-marker{display:none}
.pl-more summary::after{content:"+";margin-inline-start:auto;font-size:22px;color:var(--goldt)}
.pl-more[open] summary::after{content:"–"}
.pl-more .pl-access{font-size:14px;margin:6px 0 8px}
.th-ivory .pl-icon{border-color:rgba(27,35,48,.2)}
.th-ivory .st-invite{color:#8a4a12;border-color:#c98a2a;background:#fff4dd}
.th-ivory .st-soon{color:#3d4656;border-color:rgba(27,35,48,.3)}
@media (max-width:900px){.paths{grid-template-columns:1fr}}
.th-ivory h2,.th-ivory2 h2,.th-petrol h2,.th-navy h2{color:var(--h2c)}
.hero-sub{width:fit-content;margin-right:auto}

/* «لمّ أول بيضاتك»: optional egg-collecting mini-game in a hand-drawn morning farm (local counter, no rewards) */
.eg-sec{padding:14vh 0 8vh}
.eg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.eg-sec h2{font-size:clamp(44px,6.5vw,110px);margin-bottom:16px}
.eg-tools{display:flex;gap:10px;flex-wrap:wrap}
.eg-sound,.eg-skip{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid rgba(27,35,48,.3);background:transparent;color:var(--ink);font:700 14px var(--fb);cursor:pointer;text-decoration:none}
.eg-sound[aria-pressed=true]{background:var(--navy);color:var(--ivory)}
.eg-scene{position:relative;aspect-ratio:16/6.2;max-width:1600px;margin:26px auto 0;overflow:hidden;border-block:1px solid var(--line);touch-action:manipulation}
.eg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eg-nest{position:absolute;width:13%;transform:translate(-50%,-50%)}
.eg-nest img,.eg-egg img,.eg-basket img,.bk-egg img,.eg-fly img{display:block;width:100%;height:auto;pointer-events:none}
.eg-n0{left:20%;top:80%}.eg-n1{left:44%;top:86%}.eg-n2{left:66%;top:78%}
.eg-egg{position:absolute;width:4.2%;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-78%);transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .25s;filter:drop-shadow(0 6px 6px rgba(60,35,10,.35));-webkit-tap-highlight-color:transparent}
.eg-egg::after{content:"";position:absolute;inset:-40%}
.eg-egg:hover,.eg-egg:focus-visible{transform:translate(-50%,-90%) rotate(-6deg);filter:drop-shadow(0 0 14px rgba(255,210,122,.95))}
.eg-egg:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:50%}
.eg-egg.got{visibility:hidden}
.eg-e0{left:18%;top:78%}.eg-e1{left:22.4%;top:79%}.eg-e2{left:42%;top:84%}.eg-e3{left:46.4%;top:85%}.eg-e4{left:64%;top:76%}.eg-e5{left:68.4%;top:77%}
.eg-basket{position:absolute;left:86%;top:76%;width:13%;transform:translate(-50%,-50%);transform-origin:50% 90%}
.bk-pile{position:absolute;inset:0}
.bk-egg{position:absolute;width:24%;opacity:0;transform:translateY(-30%) scale(.6);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.bk-egg.on{opacity:1;transform:none}
.bk0{left:16%;top:18%}.bk1{left:36%;top:14%}.bk2{left:56%;top:17%}.bk3{left:26%;top:6%}.bk4{left:46%;top:3%}.bk5{left:66%;top:8%}
.eg-count{position:absolute;inset-block-start:16px;inset-inline-start:16px;margin:0;padding:10px 16px;background:var(--navy);color:var(--ivory);font:700 15px var(--fb)}
.eg-num{display:inline-block;min-width:1ch;font:400 28px/1 var(--fd);color:var(--gold2);vertical-align:-3px}
.eg-fly{position:absolute;width:4.2%;left:0;top:0;pointer-events:none;z-index:5;will-change:transform}
.eg-flash{position:absolute;width:16%;aspect-ratio:1;left:0;top:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff3cf 0,#ffd27a 30%,rgba(232,169,58,0) 70%);z-index:4}
.eg-done{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:min(560px,90%);padding:22px 24px;background:rgba(27,35,48,.94);color:var(--ivory);text-align:center;z-index:6}
.eg-done-t{font:400 clamp(24px,2.4vw,36px)/1.2 var(--fd);margin:0 0 16px;color:var(--gold2)}
html[lang=en] .eg-done-t{font:800 clamp(20px,2vw,28px)/1.3 var(--fl)}
.eg-done .cta{justify-content:center}
.eg-done .btn{min-height:46px;padding:10px 18px;font-size:14px}
.eg-done .btn-line{border-color:rgba(244,235,218,.4);color:var(--ivory)}
.eg-done .btn-ivory{background:var(--ivory);color:var(--navy)}
.eg-note{margin-top:14px}
@media (max-width:760px){
 .eg-scene{aspect-ratio:4/5}
 .eg-nest{width:36%}.eg-egg{width:11.5%}.eg-fly{width:11.5%}.eg-basket{width:34%}.eg-flash{width:40%}
 .eg-n0{left:26%;top:50%}.eg-n1{left:72%;top:62%}.eg-n2{left:30%;top:80%}
 .eg-e0{left:20%;top:48%}.eg-e1{left:32%;top:49%}.eg-e2{left:66%;top:60%}.eg-e3{left:78%;top:61%}.eg-e4{left:24%;top:78%}.eg-e5{left:36%;top:79%}
 .eg-basket{left:74%;top:86%}
 .eg-done{top:4%}
}

/* story strip: egg -> basket -> shipment -> market -> farm upgrade (a token rides the road while scrolling) */
.story-sec{padding:12vh 0 10vh}
.story-sec h2{font-size:clamp(40px,5.5vw,96px);margin-bottom:10px}
.story-svg{display:block;width:100%;height:auto;margin-top:20px;overflow:visible}
.st-road{stroke:rgba(27,35,48,.18);stroke-width:10;stroke-linecap:round;fill:none}
.st-road-fill{stroke:var(--orange);stroke-width:10;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.st-ring{fill:#fffaf1;stroke:rgba(27,35,48,.2);stroke-width:2}
.st .st-ico{transform-box:fill-box;transform-origin:center}
.story-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:0;margin:8px 0 0;text-align:center}
.story-steps h3{font:400 clamp(22px,2vw,32px)/1.1 var(--fd);margin:0 0 6px;color:var(--navy)}
html[lang=en] .story-steps h3{font:800 clamp(16px,1.4vw,20px)/1.2 var(--fl);text-transform:uppercase}
.story-steps p{margin:0;font-size:15px;color:var(--leadc)}
.js.motion .story-sec .st-road-fill{stroke-dashoffset:1}
.js.motion .story-sec .st{opacity:.35;transition:opacity .4s}
.js.motion .story-sec .st.on{opacity:1}
.js.motion .story-sec .st.on .st-ring{stroke:var(--orange);stroke-width:4}
.js.motion .story-sec .sl{opacity:.45;transition:opacity .4s}
.js.motion .story-sec .sl.on{opacity:1}
[dir=rtl] .story-svg{transform:scaleX(-1)}
@media (max-width:760px){
 .story-svg{display:none}
 .story-steps{grid-template-columns:1fr;gap:0;text-align:start;border-inline-start:4px solid var(--orange);padding-inline-start:18px}
 .story-steps li{padding:12px 0}
 .js.motion .story-sec .sl{opacity:1}
}

/* day -> night clock (decorative): appears over the chapters */
.gclock{position:fixed;z-index:40;inset-block-end:18px;inset-inline-start:18px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;background:rgba(27,35,48,.82);color:var(--ivory);border:1px solid rgba(244,235,218,.18);backdrop-filter:blur(6px);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.gclock.on{opacity:1;transform:none}
.gc-t{font:800 18px/1 var(--fl);letter-spacing:.04em;direction:ltr}
.gc-l{font:600 13px var(--fb);color:#cfd5de}
.gc-ico{width:20px;height:20px;border-radius:50%;background:#ffd27a;box-shadow:0 0 12px #ffb84a;transition:background .5s,box-shadow .5s}
.gclock[data-icon=dusk] .gc-ico{background:linear-gradient(#E2702F 50%,transparent 50%);box-shadow:0 0 10px rgba(226,112,47,.7)}
.gclock[data-icon=moon] .gc-ico{background:transparent;box-shadow:inset -6px -3px 0 0 #f4ebda}
@media (prefers-reduced-motion:reduce){.gclock{transition:none}}

/* section scenes: hand-made SVG, played once when they enter the viewport (.play), reset when they leave; static = final frame */
.band{padding:12vh 0}
.band h2{font-size:clamp(40px,5.5vw,96px);margin-bottom:16px}
.vg-svg{display:block;width:100%;height:auto}
.vg-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin:34px 0 0}
.vg-card .vg{border:1px solid var(--line);overflow:hidden}
.vg-card h3{font:400 clamp(20px,1.7vw,28px)/1.15 var(--fd);margin:14px 0 6px;color:var(--navy)}
html[lang=en] .vg-card h3{font:800 18px/1.25 var(--fl)}
.vg-card p{margin:0;font-size:15px;color:var(--leadc)}
.band-split{display:grid;grid-template-columns:1fr 1.25fr;gap:5vw;align-items:center}
.band-heli .band-split{grid-template-columns:1.25fr 1fr}.band-heli .vg{order:-1}
.band-tower .band-split{grid-template-columns:1.5fr .7fr}
.band .vg{border:1px solid var(--line)}
.band-copy .tag,.band-copy .badge{display:inline-block;margin-top:6px}
@media (max-width:900px){.vg-grid{grid-template-columns:1fr 1fr}.band-split,.band-heli .band-split,.band-tower .band-split{grid-template-columns:1fr}.band-heli .vg{order:0}.band-tower .vg{max-width:320px}}
@media (max-width:560px){.vg-grid{grid-template-columns:1fr}}

/* transforms use the individual properties (translate/rotate/scale) so they compose with the SVG transform attributes */
.vg .cs-grow,.vg .cp-bar,.vg .rd-farm,.vg .mk-can,.vg .mk-sold,.vg .hl-rotor,.vg .hl-dust,.vg .tw-bea,.vg .hen,.vg .cs-pile{transform-box:fill-box;transform-origin:center}
.vg .cs-grow{transform-origin:50% 100%}.vg .cp-bar{transform-origin:0 50%}
.vg .rd-road{fill:none;stroke:#E8A93A;stroke-width:6;stroke-linecap:round;stroke-dasharray:1}
.vg .mk-path{fill:none;stroke:#1F4E52;stroke-width:3;stroke-dasharray:.02 .02;opacity:.35}
.vg .tw-ring{opacity:.8}
.js.motion .vg.play .cs-grow{animation:vg-grow 1.3s cubic-bezier(.3,1.3,.5,1) both}
.js.motion .vg.play .cs1 .cs-grow{animation-delay:.12s}.js.motion .vg.play .cs2 .cs-grow{animation-delay:.24s}.js.motion .vg.play .cs3 .cs-grow{animation-delay:.36s}.js.motion .vg.play .cs4 .cs-grow{animation-delay:.48s}
.js.motion .vg.play .cs-cob{animation:vg-cob 3.4s both}
.js.motion .vg.play .cs-pile{animation:vg-pop .5s 2.9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes vg-grow{from{scale:1 .05}to{scale:1 1}}
@keyframes vg-cob{0%,40%{opacity:0}55%,78%{opacity:1;translate:0 0}100%{opacity:0;translate:30px -10px}}
@keyframes vg-pop{from{scale:0;opacity:0}to{scale:1;opacity:1}}
.js.motion .vg.play .tr-truck{animation:vg-drive 3.2s .3s cubic-bezier(.45,0,.3,1) both}
.js.motion .vg.play .tr-w{animation:vg-spin 3.2s .3s cubic-bezier(.45,0,.3,1) both;transform-box:fill-box;transform-origin:center}
.js.motion .vg.play .tr-lane{animation:vg-lane 3.2s .3s linear both}
@keyframes vg-drive{from{translate:0 0}to{translate:226px 0}}
@keyframes vg-spin{from{rotate:0deg}to{rotate:900deg}}
@keyframes vg-lane{from{stroke-dashoffset:0}to{stroke-dashoffset:-68}}
.js.motion .vg.play .mk-can{animation:vg-can 3.6s both}.js.motion .vg.play .mc1{animation-delay:.2s}.js.motion .vg.play .mc2{animation-delay:.4s}
.js.motion .vg.play .mk-load{animation:vg-load 3.6s both}
.js.motion .vg.play .mk-truck{animation:vg-drive2 3.6s cubic-bezier(.45,0,.3,1) both}
.js.motion .vg.play .mk-sold{animation:vg-pop .5s 3.4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes vg-can{0%{scale:0;opacity:0}15%,45%{scale:1;opacity:1;translate:0 0}60%,100%{opacity:0;translate:70px -20px}}
@keyframes vg-load{0%,55%{opacity:0}65%,100%{opacity:1}}
@keyframes vg-drive2{0%,62%{translate:0 0}100%{translate:66px 0}}
.js.motion .vg.play .hn4,.js.motion .vg.play .hn5,.js.motion .vg.play .hn6,.js.motion .vg.play .hn7{animation:vg-pop .45s 1.1s cubic-bezier(.3,1.6,.5,1) both}
.js.motion .vg.play .hn8,.js.motion .vg.play .hn9,.js.motion .vg.play .hn10,.js.motion .vg.play .hn11{animation:vg-pop .45s 2.3s cubic-bezier(.3,1.6,.5,1) both}
.js.motion .vg.play .cp-bar{animation:vg-bar 2.6s steps(1,end) both}
@keyframes vg-bar{0%{scale:.33 1}45%{scale:.66 1}90%,100%{scale:1 1}}
.js.motion .vg.play .rd-road{animation:vg-draw 2.4s .6s ease-in-out both}
.js.motion .vg.play .rd-farm{animation:vg-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.js.motion .vg.play .rf1{animation-delay:.15s}.js.motion .vg.play .rf2{animation-delay:.3s}.js.motion .vg.play .rf3{animation-delay:.45s}
@keyframes vg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.js.motion .vg.play .hl-heli{animation:vg-lift 3.4s .8s cubic-bezier(.5,0,.3,1) both}
.js.motion .vg.play .hl-rotor{animation:vg-rotor .12s linear infinite}
.js.motion .vg.play .hl-dust{animation:vg-dust 1.1s ease-out 3 both}
@keyframes vg-lift{0%{translate:0 0;rotate:0deg}25%{translate:0 -24px;rotate:-2deg}100%{translate:150px -170px;rotate:-10deg}}
@keyframes vg-rotor{0%{scale:1 1}50%{scale:.15 1}100%{scale:1 1}}
@keyframes vg-dust{from{scale:.5 .5;opacity:1}to{scale:1.8 1.8;opacity:0}}
.js.motion .vg.play .tw-f{animation:vg-light .4s both}
.js.motion .vg.play .tw-bea{animation:vg-beacon 2.4s 2s ease-in-out infinite}
.js.motion .vg.play .tw-ring{animation:vg-light .8s 1.9s both}
@keyframes vg-light{from{opacity:.08}to{opacity:1}}
@keyframes vg-beacon{0%,100%{scale:1;opacity:.9}50%{scale:1.5;opacity:.4}}
.js.motion .vg.play .tf0{animation-delay:0.30s}.js.motion .vg.play .tf1{animation-delay:0.46s}.js.motion .vg.play .tf2{animation-delay:0.62s}.js.motion .vg.play .tf3{animation-delay:0.78s}.js.motion .vg.play .tf4{animation-delay:0.94s}.js.motion .vg.play .tf5{animation-delay:1.10s}.js.motion .vg.play .tf6{animation-delay:1.26s}.js.motion .vg.play .tf7{animation-delay:1.42s}.js.motion .vg.play .tf8{animation-delay:1.58s}.js.motion .vg.play .tf9{animation-delay:1.74s}
.vg-card .vg{aspect-ratio:5/3;display:grid;place-items:center;background:#f4e3c0}
.vg-card .vg .vg-svg{width:100%;height:100%}
.vg-card .vg-corn,.vg-card .vg-milk{background:#f6e6c6}.vg-card .vg-truck,.vg-card .vg-coop{background:#f3dfb8}

/* beta: the egg cracks and golden light pours out (once, on view); static = cracked + lit */
.beta-sec{position:relative;overflow:hidden;padding-top:6vh}
.be-egg{width:min(360px,70vw);margin:0 auto -2vh;border:0}
.be-egg .be-top{transform-box:fill-box;transform-origin:15% 100%;translate:26px -62px;rotate:-24deg}
.be-egg .be-crack{opacity:0}
.be-egg .be-rays{opacity:.8}.be-egg .be-glow{opacity:.85}
.be-egg .be-rays,.be-egg .be-glow{transform-box:fill-box;transform-origin:50% 100%}
.be-egg .be-glow{transform-origin:center}
.be-egg .be-crack{stroke-dasharray:1;stroke-dashoffset:0}
.js.motion .be-egg:not(.play) .be-top{translate:0 0;rotate:0deg}
.js.motion .be-egg:not(.play) .be-rays,.js.motion .be-egg:not(.play) .be-glow{opacity:0}
.js.motion .be-egg:not(.play) .be-crack{stroke-dashoffset:1;opacity:1}
.js.motion .be-egg.play .be-crack{animation:be-crack 1.1s .3s ease-out both}
.js.motion .be-egg.play .be-top{animation:be-open 1s 1.05s cubic-bezier(.3,1.3,.5,1) both}
.js.motion .be-egg.play .be-glow{animation:be-glow 1.4s 1.1s ease-out both}
.js.motion .be-egg.play .be-rays{animation:be-rays 1.6s 1.2s ease-out both}
@keyframes be-open{from{translate:0 0;rotate:0deg}to{translate:26px -62px;rotate:-24deg}}
@keyframes be-crack{0%{stroke-dashoffset:1;opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes be-glow{from{opacity:0;scale:.3}to{opacity:.85;scale:1}}
@keyframes be-rays{from{opacity:0;scale:.2 .2}to{opacity:.8;scale:1 1}}
.beta-sec h2{text-align:start}

/* «شاهد أسلوب اللعب»: the montage loads only when played */
.gp-sec{padding:12vh 0}
.gp-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:4vw;align-items:center}
.gp-sec h2{font-size:clamp(40px,5vw,88px);margin-bottom:14px}
.gp-beats{list-style:none;counter-reset:b;padding:0;margin:18px 0 0;display:grid;gap:8px}
.gp-beats li{counter-increment:b;display:flex;align-items:center;gap:10px;font-weight:700}
.gp-beats li::before{content:counter(b,decimal-leading-zero);font:800 12px var(--fl);color:var(--goldt);min-width:2.2em}
.gp-player{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}
.gp-player picture,.gp-vid{position:absolute;inset:0;width:100%;height:100%}
.gp-vid{object-fit:cover;background:#000}
.gp-play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;border:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.1));color:var(--ivory);font:800 16px var(--fb);cursor:pointer}
.gp-play i{width:84px;height:84px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 10px 40px rgba(232,169,58,.45);transition:transform .25s}
.gp-play i::before{content:"";border-left:24px solid #1B2330;border-block:15px solid transparent;margin-left:6px}
.gp-play:hover i,.gp-play:focus-visible i{transform:scale(1.08)}
.gp-play:focus-visible{outline-offset:-7px}   /* .gp-player clips anything outside */
.gp-player .ch-label{position:absolute;inset-block-start:12px;inset-inline-start:12px}
.gp-player.on .gp-play,.gp-player.on picture{display:none}
@media (max-width:900px){.gp-grid{grid-template-columns:1fr}}

/* performance: effects that repaint every frame are off on phones/small CPUs, and every hero loop pauses off-screen */
.fx-lite .grain,.fx-lite .h-sparks{display:none}
.fx-lite .ka-sweep::before,.fx-lite .ka-edge,.fx-lite .ka-smoke,.fx-lite .ka-smoke *{animation:none}
.fx-lite .ka-sweep{display:none}
.hero-off .hero *,.hero-off .hero *::before{animation-play-state:paused!important}

/* below-the-fold sections skip layout/paint until they come near the viewport (LCP on slow phones) */
.band,.eg-sec,.fg-sec,.chars-sec,.support-sec,.gp-sec{content-visibility:auto;contain-intrinsic-size:auto 900px}   /* not the FAQ: small, and find-in-page + contrast tools need it rendered */
.cv-off .band,.cv-off .eg-sec,.cv-off .fg-sec,.cv-off .chars-sec,.cv-off .faq-sec,.cv-off .support-sec,.cv-off .gp-sec{content-visibility:visible}

/* phone polish (v3.2 pass at 375 px) */
.tag,.badge{font-size:12px}
@media (max-width:760px){
 .gclock{inset-block-end:auto;inset-block-start:calc(var(--navh,64px) + 6px);inset-inline-start:auto;inset-inline-end:10px;padding:5px 10px 5px 8px;gap:7px}
 .gc-t{font-size:15px}.gc-l{font-size:12px}.gc-ico{width:16px;height:16px}
 .pl-actions .btn,.path .btn{flex:1 1 100%}
 .top .lang{min-height:44px;display:inline-flex;align-items:center}
 footer a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
 .form .check input{width:26px;height:26px}
 .form .check{padding-block:6px}
 .pl-meta .sha code{font-size:12px}
}

/* characters + vehicles */
.char .ch-label{position:absolute;z-index:3;inset-block-start:12px;inset-inline-start:12px}
.veh-h{font:400 clamp(28px,3vw,44px)/1.1 var(--fd);margin:56px 0 18px;color:var(--ivory)}
html[lang=en] .veh-h{font:800 26px var(--fl);text-transform:uppercase}
.vehs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0;margin:0}
.veh{padding:22px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.veh-ico{display:block;width:120px;color:var(--ivory);margin-bottom:12px}
.veh-ico svg{display:block;width:100%;height:auto}
.veh h4{font:400 26px/1.1 var(--fd);margin:0 0 6px;color:var(--gold2)}
html[lang=en] .veh h4{font:800 19px var(--fl)}
.veh p{margin:0 0 10px;color:var(--leadc);font-size:15px}
@media (max-width:760px){.vehs{grid-template-columns:1fr}}

/* language rule (Arabic page): English titles/sections/tabs, Arabic explanations; each element sets its own direction */
.h-en,.kicker-en{font-family:var(--fl)}
.kicker-en{letter-spacing:.28em;font-size:13px;text-transform:uppercase}
h2.h-en{font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:.95;font-size:clamp(38px,5.6vw,96px)}
[dir=rtl] .h-en,[dir=rtl] .kicker-en{text-align:right}
[dir=rtl] .kicker-en{flex-direction:row-reverse;justify-content:flex-start}
.h-ar{margin:10px 0 16px;font:400 clamp(22px,2.2vw,34px)/1.3 var(--fd);color:var(--goldt)}
.th-ivory .h-ar,.th-ivory2 .h-ar{color:#8a4a12}
.chapter .h-ar{color:var(--gold2);text-shadow:0 2px 18px rgba(0,0,0,.6)}
#nav a[lang=en]{font-family:var(--fl);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:760px){h2.h-en{font-size:clamp(32px,10vw,48px)}.h-ar{font-size:20px}}

/* START PLAYING: English label + Arabic hint; the panel with the real access paths */
.sp-open{flex-direction:column;gap:2px;line-height:1.1}
.sp-open span[lang=en]{font:900 15px/1 var(--fl);letter-spacing:.12em}
.sp-open small{font:600 12px/1.2 var(--fb);opacity:.85}
.sp-hero{min-height:60px;padding-inline:34px}
.top .sp-top{min-height:44px;padding:6px 16px;box-shadow:none}
.top .sp-top span[lang=en]{font-size:12px}
.top .sp-top small{font-size:11px}
.sp{border:0;padding:0;width:min(1080px,94vw);max-height:92vh;background:var(--navy);color:var(--ivory);box-shadow:0 30px 120px rgba(0,0,0,.6)}
.sp::backdrop{background:rgba(8,12,18,.72);backdrop-filter:blur(3px)}
.sp-in{position:relative;padding:34px clamp(18px,3vw,40px) 30px;border-top:4px solid var(--gold)}
.sp-x{position:absolute;inset-block-start:12px;inset-inline-end:12px;width:44px;height:44px;border:1px solid rgba(244,235,218,.25);background:transparent;color:var(--ivory);font-size:26px;cursor:pointer}
.sp-title{font:400 clamp(28px,3vw,44px)/1.15 var(--fd);margin:0 0 10px;color:var(--gold2)}
html[lang=en] .sp-title{font:900 clamp(24px,2.6vw,36px)/1.15 var(--fl);text-transform:uppercase}
.sp-inv{margin:0 0 22px;padding:10px 14px;border:1px dashed var(--gold);color:#f3dfb0;font-weight:700}
.sp-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0;margin:0}
.sp-tile{display:flex;flex-direction:column;padding:18px;background:rgba(255,255,255,.05);border:1px solid rgba(244,235,218,.14)}
.sp-tile h3{font:900 18px/1 var(--fl);letter-spacing:.06em;margin:0 0 4px;color:var(--ivory)}
[dir=rtl] .sp-tile h3{text-align:right}
.sp-hint{margin:0 0 10px;color:var(--gold2);font-weight:700;font-size:14px}
.sp-st{align-self:flex-start;font:800 12px var(--fb);padding:4px 10px;border:1px solid var(--teal);color:#b5f1e8;margin-bottom:10px}
.sp-p{font-size:14px;color:#cfd5de;margin:0 0 14px}
.sp-act{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.sp-act .btn{min-height:46px;padding:10px 14px;font-size:14px;width:100%}
.sp-act .btn-line{border-color:rgba(244,235,218,.35);color:var(--ivory);background:transparent}
.sp-meta{margin:0;font-size:13px;color:#cfd5de}
.sp-link{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:980px){.sp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sp{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}.sp-grid{grid-template-columns:1fr}.top .sp-top small{display:none}}

/* the panel lives outside every section: its own tokens */
.sp{--ink:var(--ivory);--line:rgba(244,235,218,.18);--goldt:var(--gold2)}
.sp .sp-title{color:var(--gold2)}

/* the seven-chapter story (spec B §4): desktop = pinned stage scrubbed by scroll; phone / reduced motion = steps beside a sticky stage */
.jr{position:relative;background:#0c1220;color:var(--ivory)}
.jr-skip{position:absolute;z-index:6;inset-block-start:calc(var(--navh,72px) + 26px);inset-inline-end:var(--pad);min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid rgba(244,235,218,.35);background:rgba(12,18,32,.6);color:var(--ivory);font-weight:700;text-decoration:none}
.jr-skip:focus-visible{outline:3px solid var(--gold)}
.jr-stage{position:sticky;top:var(--navh,64px);height:50vh;overflow:hidden;z-index:3;background:#0c1220;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.j-svg{display:block;width:100%;height:100%}
.jr-tag{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:2}
.jr-cards{list-style:none;margin:0;padding:0 var(--pad);position:relative;z-index:2}
.jc{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.jc-n{margin:0 0 6px;font:800 12px var(--fl);letter-spacing:.2em;color:var(--gold)}
.jc h3{margin:0 0 10px;font:900 clamp(30px,8vw,44px)/1 var(--fl);letter-spacing:-.01em;text-transform:uppercase;color:var(--ivory)}
[dir=rtl] .jc h3,[dir=rtl] .jc-n{text-align:right}
.jc-p{margin:0 0 12px;font-size:18px;color:#dfe4ea;max-width:34ch}
.jc .badge{align-self:flex-start}
.jc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.jc-cta .btn-line{border-color:rgba(244,235,218,.4);color:var(--ivory);background:transparent}
.jr-dots{display:none}
html:not(.js) .jr-stage{display:none}
/* pinned desktop mode */
.jr.pinmode .jr-pin{position:relative;height:100vh;overflow:hidden}
.jr.pinmode .jr-stage{position:absolute;inset:0;top:0;height:100%}
.jr.pinmode .jr-cards{position:absolute;inset-inline-start:var(--pad);inset-block-start:calc(var(--navh,72px) + 26px);width:min(470px,38vw);padding:0}
.jr.pinmode .jc{position:absolute;inset-inline:0;top:0;min-height:0;padding:26px 28px;background:linear-gradient(160deg,rgba(12,18,32,.88),rgba(27,35,48,.72));border-inline-start:4px solid var(--gold);
 opacity:0;transform:translateY(18px);transition:opacity .14s,transform .14s;pointer-events:none}
.jr.pinmode .jc.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .3s .16s,transform .3s .16s}
/* audit 2026-10-23: the outgoing card fades out first and the next one comes in after it, so two chapters never overlap */
.jr.pinmode .jr-dots{display:flex;flex-direction:column;gap:6px;position:absolute;z-index:3;inset-inline-end:var(--pad);top:50%;transform:translateY(-50%)}
.jd{width:44px;height:30px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.jd i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ivory);transition:transform .2s,background .2s}
.jd[aria-current=step] i{background:var(--gold);border-color:var(--gold);transform:scale(1.4)}
.jd:focus-visible{outline:3px solid var(--gold)}
.j-row{fill:none;stroke:#5b3c18;stroke-width:6;stroke-linecap:round;stroke-dasharray:1}
.j-seed{opacity:1}
@media (prefers-reduced-motion:reduce){.jr .jc{transition:none}}

.hero h1.h1-en{font:900 clamp(26px,2.4vw,44px)/1 var(--fl);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;text-align:left}
.h1-ar{margin:0 0 12px;font:400 clamp(24px,2.2vw,38px)/1.2 var(--fd);color:#ffe7b8;text-shadow:0 3px 24px rgba(0,0,0,.7);width:fit-content;margin-right:auto}

/* story stage: the seven cinematic chapter illustrations (concept art), stacked and crossfaded */
.js-img{position:absolute;inset:0;display:block;will-change:transform,opacity}
.js-img img{width:100%;height:100%;object-fit:cover}
html:not(.js) .js-img:not(.jsi1){display:none}
.jr-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(8,12,18,.55),transparent 32%,transparent 70%,rgba(8,12,18,.55))}

/* hero (user feedback): key art ~17% smaller on desktop, the full face and rift inside the viewport; black frame blends with the art */
@media (min-width:761px){
 .hero{background:#000}
 .hero-art{inset:auto;top:calc(var(--navh,72px) + 1vh);bottom:4vh;left:15vw;right:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 14%),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent);mask-composite:intersect}
 .hero h1.h1-en{text-align:left}
 .hero-copy .cta{justify-content:flex-start!important}
}
.hero .badge-inv{font-family:var(--fl);letter-spacing:.14em;font-size:12px}
.jr.pinmode .jr-stage{z-index:1;box-shadow:none}.jr.pinmode .jr-cards{z-index:4}
.jr.pinmode .jr-cards{inset-block-start:auto;inset-block-end:7vh;width:min(560px,42vw)}
.jr.pinmode .jc{top:auto;bottom:0;background:linear-gradient(160deg,rgba(12,18,32,.82),rgba(12,18,32,.6))}
.jr.pinmode .jr-shade{background:linear-gradient(to bottom,rgba(8,12,18,.45),transparent 25%,transparent 55%,rgba(8,12,18,.8))}

/* modals (user feedback: the device check was unreadable): one dark token set for every dialog, wherever it sits.
   ivory text on navy >= 12:1, muted text >= 7:1, gold headings, a clear gold primary button */
.checker,.sp,.fg-box{--ink:#F4EBDA;--mute:#cfd5de;--line:rgba(244,235,218,.22);--leadc:#e3e7ec;--goldt:#ffd27a;color:#F4EBDA}
.checker{background:#1B2330;border:1px solid rgba(232,169,58,.45);border-top:4px solid var(--gold)}
.checker h2{color:#ffd27a;font:400 clamp(26px,3vw,36px)/1.2 var(--fd);margin:0 0 8px}
html[lang=en] .checker h2{font:900 clamp(22px,2.4vw,30px)/1.2 var(--fl)}
.checker .small,.chk-size,.chk-note{color:#cfd5de;font-size:15px}
.checks li{background:rgba(255,255,255,.07);color:#F4EBDA;font-size:16px;border:1px solid rgba(244,235,218,.12)}
.chk-ok::before{color:#8ee6c4}.chk-bad::before{color:#ffa79e}.chk-warn::before{color:#ffd27a}.chk-info::before{color:#cfd5de}
.chk-result.ok{color:#a8f0d3}.chk-result.bad{color:#ffb9b1}
.checker .btn-gold,.checker .chk-go{background:var(--gold);color:#1a1206}
.checker .btn-line,.fg-box button{border-color:rgba(244,235,218,.45);color:#F4EBDA;background:transparent}
.fg-boxcap{color:#F4EBDA;text-shadow:0 2px 10px #000}

/* contrast audit (all sections): darker gold on the second ivory, brighter notes on petrol */
.th-ivory2{--goldt:#6f4606}
.th-petrol .small,.th-petrol .note{color:#dbe6e0}
.th-ivory a.btn-gold,.th-ivory2 a.btn-gold,.th-ivory a.btn.gold,.th-ivory2 a.btn.gold{color:#1a1206}.th-ivory a.btn-ivory,.th-ivory2 a.btn-ivory{color:var(--ivory)}.th-ivory a.btn-line,.th-ivory2 a.btn-line{color:var(--ink)}

/* hero rhythm (user: the tagline sat on the buttons): one column with fixed gaps, English-only, left-aligned */
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,3.2vh,34px)}
.hero-copy>*{margin:0!important}
.hero-copy .tl{margin:0}
.hero h1.h1-en{line-height:1.1;padding-top:.1em}
.hero-copy .cta{gap:14px}
.hero-copy .badge-inv{margin-top:-6px!important}
@media (max-width:760px){.hero-copy{gap:18px;align-items:stretch}.hero-copy .tl{align-self:flex-start}}
.hero-copy .tl{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
[dir=rtl] .hero-copy .badge-inv,.hero-copy .badge-inv{flex-direction:row;align-self:flex-start}

/* paintings instead of flat drawings (user): concept art in a 16:9 frame with a tag; text never sits on the painting */
.art-box{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;border:1px solid var(--line)}
.art-box .art,.art-box .art img{display:block;width:100%;height:100%}
.art-box .art img{object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.art-box:hover .art img{transform:scale(1.04)}
.art-tag{position:absolute;inset-block-end:10px;inset-inline-start:10px;z-index:2}
.vg-card .art-box{margin-bottom:4px}
.band-tower .band-split{grid-template-columns:1fr 1.25fr}
.veh-art{margin-bottom:12px}
.veh{display:flex;flex-direction:column}
.eg-bg{position:absolute;inset:0;width:100%;height:100%}
.eg-bg img{width:100%;height:100%;object-fit:cover}
.eg-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 35%);pointer-events:none}
.be-art{position:relative;width:min(520px,86vw);margin:0 auto 4vh;aspect-ratio:16/9;overflow:hidden;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.be-art .art,.be-art img{display:block;width:100%;height:100%;object-fit:cover}
.story-timeline{counter-reset:st;text-align:start}
.story-timeline li{counter-increment:st;position:relative;padding-top:40px;border-top:3px solid var(--orange)}
.story-timeline li::before{content:counter(st,decimal-leading-zero);position:absolute;top:10px;inset-inline-start:0;font:800 13px var(--fl);letter-spacing:.14em;color:#8a4a12}
.js.motion .story-sec .sl{opacity:1}
@media (max-width:760px){.story-timeline li{padding-top:34px;border-top:0;border-inline-start:3px solid var(--orange);padding-inline-start:16px}.story-timeline li::before{top:12px;inset-inline-start:16px}}
.art-box .tag{position:absolute;inset-block-end:10px;inset-inline-start:10px;z-index:2}

/* story captions on narrow screens (user: text spilled out at 200-360 px): the panel never exceeds the viewport,
   titles wrap anywhere, Arabic body sized for small screens; <= 480 px the panel is full width at the bottom over a dark gradient */
.jc{max-width:min(560px,calc(100vw - 32px));box-sizing:border-box}
.jc h3{font-size:clamp(28px,8vw,64px);overflow-wrap:anywhere;word-break:normal;hyphens:none;line-height:1.02}
.jc-p{font-size:clamp(15px,4.2vw,19px);line-height:normal;overflow-wrap:anywhere}
.jc .badge{max-width:100%;white-space:normal}
.jc-cta{max-width:100%}
.jc-cta .btn{max-width:100%;white-space:normal}
.jr.pinmode .jr-cards{max-width:calc(100vw - 32px)}
@media (max-width:480px){
 .jr-cards{padding:0}
 .jc{max-width:100vw;width:100%;padding:22px 16px;margin:0;background:linear-gradient(to top,rgba(8,12,18,.96),rgba(8,12,18,.82))}
 .jc h3{font-size:clamp(26px,9vw,40px)}
}
/* top bar on very narrow screens: everything stays inside the viewport */
@media (max-width:380px){
 .top{gap:8px;padding-inline:10px}
 .top .sp-top{padding:4px 10px;min-width:0}
 .top .sp-top span[lang=en]{font-size:11px;letter-spacing:.06em}
 .top .lang{padding:0 10px;font-size:13px}
 .top .mark img{width:32px;height:32px}
}
@media (max-width:300px){.top .mark{display:none}}

/* WATCH TRAILER modal */
.btn-watch{background:none;border:0;cursor:pointer}
.tr-box{border:0;padding:0;width:min(1100px,94vw);background:#05080d;color:#F4EBDA;box-shadow:0 30px 120px rgba(0,0,0,.7)}
.tr-box::backdrop{background:rgba(5,8,13,.86)}
.tr-in{position:relative;padding:48px 14px 14px}
.tr-x{inset-block-start:4px}
.tr-vid{display:block;width:100%;aspect-ratio:16/9;background:#000}
.tr-vid::cue{font:600 clamp(15px,2vw,22px)/1.35 var(--fb);background:rgba(0,0,0,.72);color:#fff}
.tr-note{margin:10px 4px 0;font-size:14px;color:#cfd5de}
@media (max-width:560px){.tr-box{width:100vw;max-width:100vw}.tr-in{padding:48px 0 10px}.tr-note{padding:0 12px}}
/* text-only scene card (no honest image available) */
.art-none{display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--petrol))}
.art-none span{font:900 clamp(40px,5vw,72px)/1 var(--fl);color:rgba(244,235,218,.18);letter-spacing:.04em}
.tag-render{border-color:var(--teal)}

/* phones without scroll-linked effects: the World panorama is swiped, starting from the reading side */
html.no-st[dir=rtl] .world-track{left:auto;right:0}
.top .mark img{flex:none;width:40px;height:40px;object-fit:contain}

/* land-to-market without illustrations (user 2026-10-23): elegant text cards on the dark palette, same height everywhere */
.band-text .vg-grid{align-items:stretch}
.vg-text{display:flex;flex-direction:column;min-height:220px;padding:26px 24px 24px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(232,169,58,.28);border-top:2px solid var(--gold)}
.vg-text .vg-k{margin:0 0 14px;font:800 13px/1 var(--fl);letter-spacing:.28em;color:var(--gold)}
.vg-text h3{color:var(--ivory)!important;margin:0 0 10px}
.vg-text h3::after{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-top:14px}
.vg-text p:last-child{color:#d7dde5;margin:0}
@media (max-width:560px){.vg-text{min-height:0}}
.band-solo .band-copy{max-width:760px;border-inline-start:2px solid var(--gold);padding-inline-start:28px}
.band-solo{padding-block:2vh}
[dir=rtl] .vg-text .vg-k{text-align:right}

/* VEHICLES gallery (Blender renders of the in-game models) */
.fleet-sec{padding:12vh 0}
.fl-status{margin:0 0 20px}
.fl-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0;margin:24px 0 10px}
.fl-card .art-box{margin-bottom:12px}
.fl-class{margin:0 0 4px;font:800 12px/1 var(--fl);letter-spacing:.24em;color:var(--gold)}
[dir=rtl] .fl-class{text-align:right}
.fl-card h3{margin:0 0 6px;font:400 clamp(24px,2.2vw,32px)/1.1 var(--fd);color:var(--ivory)}
html[lang=en] .fl-card h3{font:900 22px/1.15 var(--fl);text-transform:uppercase}
.fl-line{margin:0 0 6px;color:#d7dde5;font-size:15px}
.fl-unlock{margin:0;color:var(--gold2);font-size:13px;font-weight:700}
@media (max-width:900px){.fl-grid{grid-template-columns:1fr 1fr}}@media (max-width:560px){.fl-grid{grid-template-columns:1fr}}

.fl-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:inherit;cursor:zoom-in}
.fl-nospin{cursor:default}
.fl-open:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.art-box>.fl-open{position:absolute;inset:0;height:100%}   /* the button holds only the picture; the tag and 360 badge sit over it */
.art-box .fl-360,.art-box .art-tag{pointer-events:none}
.fl-360{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;padding:4px 10px;background:rgba(12,18,32,.8);border:1px solid var(--gold);color:var(--gold2);font:800 12px var(--fl);letter-spacing:.08em}
.fl-box{border:0;padding:0;width:min(1100px,94vw);background:#05080d;color:#F4EBDA}
.fl-box::backdrop{background:rgba(5,8,13,.86)}
.fl-in{position:relative;padding:48px 14px 16px}
.fl-vid{display:block;width:100%;aspect-ratio:16/9;background:#111;cursor:grab;touch-action:pan-y}
.fl-vid:active{cursor:grabbing}
.fl-vid:focus-visible{outline:3px solid var(--gold)}
.fl-name{margin:14px 4px 4px;font:400 28px/1.1 var(--fd);color:var(--gold2)}
html[lang=en] .fl-name{font:900 22px var(--fl);text-transform:uppercase}
.fl-l{margin:0 4px 8px;color:#e3e7ec}
.fl-box .small{margin:0 4px;color:#cfd5de;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* FAQ items: an English title over the question */
.faq summary{flex-wrap:wrap;align-items:center}
.fq-t{flex:1 0 100%;font:800 11px/1 var(--fl);letter-spacing:.2em;color:var(--goldt)}
[dir=rtl] .fq-t{text-align:right}
.fq-q{flex:1}

/* phones: the hero holds still (no endless push/drift repainting large layers); the key art itself is unchanged */
.fx-lite .hero-art,.fx-lite .ka{animation:none}
.fx-lite .ka{will-change:auto}

/* class + unlock level on one row above the name (director: the level line looked orphaned) */
.fl-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid rgba(232,169,58,.22)}
.fl-meta .fl-class{margin:0}
.fl-meta .fl-unlock{margin:0;white-space:nowrap}
[dir=rtl] .fl-meta .fl-class{text-align:start}
.fleet-sec h2{font-size:clamp(40px,5.6vw,96px);margin-bottom:14px}

/* story stage tag: concept art for the painted chapters, 'render of the in-game model' on the tower chapter */
.jr-tag-r0,.jr-tag-r1,.jr-tag-r2,.jr-tag-r3,.jr-tag-r4,.jr-tag-r5,.jr-tag-r6{display:none}
.jr:not([data-ch]) .jr-tag-r0{display:inline-block}   /* before the first step fires, chapter 1 is showing */
.jr:not([data-ch]):has(.jr-tag-r0) .jr-tag-concept{display:none}
.jr[data-ch="0"] .jr-tag-r0,.jr[data-ch="1"] .jr-tag-r1,.jr[data-ch="2"] .jr-tag-r2,.jr[data-ch="3"] .jr-tag-r3,.jr[data-ch="4"] .jr-tag-r4,.jr[data-ch="5"] .jr-tag-r5,.jr[data-ch="6"] .jr-tag-r6{display:inline-block}
.jr[data-ch="0"]:has(.jr-tag-r0) .jr-tag-concept,.jr[data-ch="1"]:has(.jr-tag-r1) .jr-tag-concept,.jr[data-ch="2"]:has(.jr-tag-r2) .jr-tag-concept,.jr[data-ch="3"]:has(.jr-tag-r3) .jr-tag-concept,
.jr[data-ch="4"]:has(.jr-tag-r4) .jr-tag-concept,.jr[data-ch="5"]:has(.jr-tag-r5) .jr-tag-concept,.jr[data-ch="6"]:has(.jr-tag-r6) .jr-tag-concept{display:none}
@media (max-width:760px){.jsi1.js-render img{object-position:29% 50%}.jsi4.js-render img{object-position:52% 50%}.jsi6.js-render img{object-position:30% 50%}}   /* phone crops on the people (set per render) */
@media (max-width:760px){.jsi3.js-render img{object-position:76% 50%}}   /* phone crop on the tractor */
@media (max-width:760px){.jsi5.js-render img{object-position:33% 50%}}   /* phone crop on the crowd and the egg trays */
@media (max-width:760px){.jsi2.js-render img{object-position:14% 40%}}   /* phone crop keeps the farmer centred */
.ch-media .art{display:block;width:100%;height:100%}
.ch-media .art img{width:100%;height:100%;object-fit:cover}

/* farm life: the approved road-to-market render as a wide banner; heading over a dark gradient, cards below */
.band-hasbanner{padding-top:0}
.band-banner{position:relative;height:min(64vh,660px);min-height:360px;overflow:hidden;margin-bottom:28px;display:flex;align-items:flex-end}
.band-banner .bb-pic,.band-banner .bb-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.bb-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,12,18,.92) 0%,rgba(8,12,18,.6) 32%,rgba(8,12,18,.08) 62%,rgba(8,12,18,.28) 100%)}
.bb-head{position:relative;z-index:2;padding-bottom:30px;width:100%}
.bb-head h2,.bb-head .h-ar,.bb-head .kicker{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.band-banner .art-tag{inset-block-start:14px;inset-block-end:auto}
@media (max-width:760px){.band-banner{height:62vh;min-height:420px}.band-banner .bb-pic img{object-position:58% 55%}}   /* phone crop on the truck */
@media (min-width:761px){   /* desktop: the truck sits above the heading block, clear of it */
 .band-banner{height:min(74vh,740px)}
 .band-banner .bb-pic img{object-position:50% 88%}
 .band-banner .bb-head h2{font-size:clamp(40px,4.6vw,76px)}
}
@media (min-width:1600px){.band-banner .bb-pic img{object-position:50% 64%}}   /* wide screens crop more height: keep the tower's crown in frame */

/* farm life: the coop-stages render (3 panels) as a wide strip under the cards */
.band-strip{margin:28px 0 0}
.art-strip{aspect-ratio:16/9}
.band-strip figcaption{margin-top:10px;color:#d7dde5;font-size:15px}
.band-strip .vg-k{color:var(--gold);font:800 12px var(--fl);letter-spacing:.2em;margin-inline-end:6px}
.strip-row{display:none;position:relative}
@media (max-width:760px){   /* phone: the three coop stages as a swipeable row */
 .band-strip.has-row .art-strip{display:none}
 .band-strip.has-row .strip-row{display:block}
 .strip-panels{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .strip-panels:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
 .sp-panel{position:relative;flex:0 0 72vw;scroll-snap-align:start;aspect-ratio:850/1440;max-height:62vh;overflow:hidden;border:1px solid var(--line)}
 .sp-panel picture,.sp-panel img{display:block;width:100%;height:100%;object-fit:cover}
 .sp-lab{position:absolute;inset-inline-start:10px;inset-block-end:10px;padding:4px 12px;background:rgba(12,18,32,.85);border:1px solid var(--gold);color:var(--gold2);font:800 13px var(--fl);letter-spacing:.06em}
 .strip-row>.art-tag{inset-block-start:10px;inset-block-end:auto}
}
.band-strip .strip-truth{display:block;margin-top:4px;color:var(--gold2);font-size:14px}

/* open registration: Google sign-up link (plain link, no Google script) */
.or-line{display:flex;align-items:center;gap:12px;margin:16px 0 10px;color:var(--mute,#8a93a3);font-size:13px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{display:inline-flex;align-items:center;gap:10px;justify-content:center;width:100%}
.btn-google .g-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#1a73e8;font:800 14px/1 var(--fl)}
.egg-bg .egg-pic,.egg-bg .egg-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (min-width:761px){   /* desktop: the egg render sits right of the copy (the copy is on the left in both languages); a dark fade under the text keeps it readable */
 .egg-bg:has(.egg-pic){background:#050403;overflow:hidden}
 .egg-bg .egg-pic img{transform:translateX(22%) scale(.94);transform-origin:50% 55%}
 .egg-bg:has(.egg-pic)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#050403 0%,#050403 22%,rgba(5,4,3,.85) 38%,rgba(5,4,3,0) 60%)}
}

/* sub-pages (How to play, vehicle pages): no script, so the nav is a plain row that scrolls on phones */
body.sub{background:#0b0b0d;color:var(--ivory)}
.sub-top{position:sticky;top:0;background:rgba(11,11,13,.94);border-bottom:1px solid rgba(255,255,255,.08)}
.sub-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.sub-nav a{color:var(--ivory);text-decoration:none;font:800 13px/1 var(--fl);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.sub-nav a:hover,.sub-nav a:focus-visible{color:var(--gold)}
.sub-main{padding:clamp(28px,6vh,64px) 0 80px}
.sub-main .wrap{max-width:1080px}
.sub-head h1{font:900 clamp(38px,6vw,84px)/1 var(--fd);margin:8px 0 14px;color:var(--gold2)}
.sub-head .lead{max-width:760px}
.crumbs{font-size:13px;margin:0 0 6px}.crumbs a{color:var(--gold)}
@media (max-width:900px){.sub-top{flex-wrap:wrap;row-gap:10px}.sub-nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.sub-nav ul{gap:16px}}
/* How to play */
.ht-toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 34px;padding:0}
.ht-toc a{display:inline-block;padding:7px 12px;border:1px solid rgba(232,169,58,.35);color:var(--ivory);text-decoration:none;font-size:14px}
.ht-toc a:hover,.ht-toc a:focus-visible{border-color:var(--gold);color:var(--gold2)}
.ht-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(460px,100%),1fr));gap:18px}
.ht-sec{background:#131318;border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--gold);padding:20px 22px 16px;scroll-margin-top:90px}
.ht-sec.ht-later{border-top-color:#6b6f78;opacity:.92}
.ht-n{margin:0;font:800 12px/1 var(--fl);letter-spacing:.2em;color:var(--gold)}
.ht-sec h2{font:800 clamp(20px,2.2vw,26px)/1.25 var(--fb);margin:6px 0 12px;color:var(--ivory)}
.ht-steps{margin:0;padding-inline-start:22px}.ht-steps li{margin:0 0 8px;line-height:1.7}
.ht-keys{border-collapse:collapse;margin:0 0 12px;width:100%}
.ht-keys th,.ht-keys td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:start;vertical-align:top}
.ht-keys th{width:90px}
kbd{display:inline-block;min-width:30px;padding:3px 8px;border:1px solid rgba(255,255,255,.35);border-bottom-width:3px;border-radius:5px;font:800 13px/1.3 var(--fl);text-align:center;background:#1c1c22;color:var(--ivory)}
/* vehicle pages */
.vp-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start;margin:22px 0}
.vp-art{aspect-ratio:16/9}
.vp-stats{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.vp-stat{background:#131318;padding:12px 14px}
.vp-stat dt{font:800 11px/1.2 var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 4px}
html[lang=ar] .vp-stat dt{letter-spacing:0;font:700 13px/1.3 var(--fb)}
.vp-stat dd{margin:0;font-size:17px;font-weight:700}
.vp-main{margin:14px 0 0;color:#d7dde5}
.vp-later{padding:16px;border:1px dashed rgba(255,255,255,.25)}
.vp-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;margin:8px 0 18px}
.vp-b{background:#131318;border-top:3px solid var(--gold);padding:16px 18px}
.vp-b h2{font:800 15px/1.2 var(--fb);margin:0 0 8px;color:var(--gold2)}
.vp-b p{margin:0}
.vp-note{opacity:.8;max-width:820px}
.vp-pn{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.vp-pn a{color:var(--gold);text-decoration:none;font-weight:700}
.fl-more{display:inline-block;margin-top:4px;color:var(--gold);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:24px}
@media (max-width:900px){.vp-grid{grid-template-columns:1fr}}

/* accessibility pass (WCAG 2.2): pause control, 360 turn buttons, character scroller */
.motion-tg{position:fixed;z-index:45;inset-block-end:18px;inset-inline-end:18px;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;background:rgba(27,35,48,.82);color:var(--ivory);border:1px solid rgba(244,235,218,.35);font:700 13px var(--fb);cursor:pointer;backdrop-filter:blur(6px)}
.motion-tg[hidden]{display:none}
.motion-tg i{width:10px;height:12px;border-inline:3px solid currentColor;box-sizing:border-box}
.motion-tg[aria-pressed=true]{border-color:var(--gold);color:var(--gold2)}
.motion-tg[aria-pressed=true] i{border-inline:0;border-inline-start:10px solid currentColor;border-block:6px solid transparent;width:0;height:0}
[dir=rtl] .motion-tg[aria-pressed=true] i{transform:scaleX(-1)}
@media (max-width:760px){.motion-tg{inset-block-end:12px;inset-inline-end:10px;padding:6px 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.motion-tg{display:none}}
/* paused by the visitor: every CSS loop holds still, the particle canvases go */
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.paused .vg *,.paused .be-egg *{animation:none!important}   /* the scroll-started scene drawings show their end state, as with reduced motion */
.paused .h-sparks,.paused .egg-dust,.paused .trail{visibility:hidden}
.fl-ctl{display:flex;gap:10px;justify-content:center;margin:10px 4px 0;direction:ltr}
.fl-turn{min-height:44px;padding:8px 16px;background:none;border:1px solid rgba(244,235,218,.45);color:#F4EBDA;font:700 14px var(--fb);cursor:pointer}
.fl-turn:hover{border-color:var(--gold);color:var(--gold2)}
.form input[type=checkbox]:focus-visible{outline-offset:3px}
.kicker [lang=ar]{letter-spacing:0;font-family:var(--fb)}   /* Arabic inside a spaced kicker: letters must join */
.vp-role{margin:-6px 0 10px;color:var(--gold2);font-weight:700}
/* press page */
.pr-sec{margin:34px 0}
.pr-sec h2{font:800 clamp(22px,2.6vw,30px)/1.2 var(--fb);color:var(--gold2);margin:0 0 14px}
.pr-facts table{width:100%;border-collapse:collapse}.pr-facts th,.pr-facts td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.1);text-align:start;vertical-align:top}
.pr-facts h3{font:800 18px/1.3 var(--fb);color:var(--ivory);margin:22px 0 8px}
.pr-logo img{max-width:min(480px,100%);height:auto;background:#0b0b0d}
.pr-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;margin:0;padding:0}
.pr-cap{font-size:14px;margin:8px 0 4px;color:#d7dde5}.pr-dl{color:var(--gold);font-weight:700;font-size:14px}
/* news / devlog */
.nw-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px;margin:24px 0 0;padding:0}
.nw-card{background:#131318;border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--gold)}
.nw-link{display:block;color:inherit;text-decoration:none;padding:0 0 16px}.nw-link:hover h2,.nw-link:focus-visible h2{color:var(--gold2)}
.nw-card .nw-art{margin:0 0 12px}.nw-card h2,.nw-card p{margin-inline:16px}
.nw-card h2{font:800 20px/1.3 var(--fb);margin-top:6px;margin-bottom:6px}
.nw-date{font:800 12px/1 var(--fl);letter-spacing:.16em;color:var(--gold);margin:12px 16px 0}
.nw-article .nw-date{margin:6px 0 0}
.nw-article .nw-art{max-width:900px;margin:10px 0 22px}
.nw-body{max-width:760px;line-height:1.85}.nw-body h2,.nw-body h3{color:var(--gold2);margin:26px 0 8px}
.nw-body mark.ph{background:none;color:var(--gold);border:1px dashed var(--gold);padding:0 4px;font-weight:700;unicode-bidi:isolate}
/* vehicles: FARM / OPERATIONS tabs (no JS: both panels show) */
.fl-tabs{display:flex;gap:8px;margin:18px 0 6px;flex-wrap:wrap}
.fl-tab{font:800 14px/1 var(--fl);letter-spacing:.12em;padding:12px 18px;min-height:44px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:none;color:inherit;cursor:pointer}
html[lang=ar] .fl-tab{font-family:var(--fb);letter-spacing:0;font-size:16px}
.fl-tab[aria-selected=true]{background:var(--gold);border-color:var(--gold);color:#1a1206}
.fl-tab:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.fl-panel{margin-top:10px}.fl-panel:focus-visible{outline:2px dashed var(--gold);outline-offset:6px}
html.modal-open,html.modal-open body{overflow:hidden;overscroll-behavior:none}
/* trust line in the hero (audit 2026-10-23: moved from the footer) */
.hero-trust{margin:10px 0 0;font:700 14px/1.4 var(--fb);color:#f1e3c4;text-shadow:0 1px 8px rgba(0,0,0,.7);max-width:46ch;text-align:left}
html[lang=en] .hero-trust{font-family:var(--fl);letter-spacing:.04em;font-size:13px}
/* /vehicles/ index + /roadmap/ (site audit 2026-10-23) */
.vi-jump{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}.vi-jump a{padding:10px 16px;border:1px solid var(--gold);border-radius:999px;font-weight:700;min-height:44px;box-sizing:border-box}
.sub section[id]{scroll-margin-top:90px}.sub section h2{margin:34px 0 8px}
.vi-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:18px;margin:16px 0 0;padding:0}
.vi-card{background:#131318;border:1px solid rgba(255,255,255,.08)}.vi-card>a{display:block;color:inherit;text-decoration:none}
.vi-card>a:hover h3,.vi-card>a:focus-visible h3{color:var(--gold2)}
.vi-card h3,.vi-card p{margin-inline:14px}.vi-card h3{margin-top:4px;margin-bottom:4px;font-size:19px}.vi-card p{margin-top:0;margin-bottom:12px}
.vi-st{font:800 12px/1.3 var(--fl);color:var(--gold);margin-top:12px!important;margin-bottom:2px!important}
.rm-miles{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.rm-miles li{padding:10px 14px;border:1px dashed rgba(255,255,255,.3);border-radius:10px}.rm-miles li.done{border:1px solid var(--gold)}
.rm-miles time{font:800 13px var(--fl);color:var(--gold);margin-inline-end:6px}
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 10px}
@media (max-width:900px){.rm-grid{grid-template-columns:1fr}}
.rm-col{background:#131318;border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--gold);padding:6px 18px 12px}
.rm-col h2{display:flex;flex-direction:column;gap:2px;margin:12px 0 6px}.rm-col h2 small{font:600 14px var(--fb);color:#c9cbd2}
.rm-next{border-top-color:var(--teal,#3fb3a6)}.rm-later{border-top-color:var(--amber,#e08a3c)}
.rm-col ul{margin:0;padding-inline-start:18px;line-height:1.7}.rm-col li{margin:6px 0}
.rm-money{font-weight:700}
/* consent banner (director 2026-10-23; renders only when a tracking ID is configured) */
.cz{position:fixed;z-index:60;inset-inline:16px;bottom:16px;max-width:560px;background:#141418;border:1px solid var(--gold);box-shadow:0 10px 40px rgba(0,0,0,.6);color:var(--ivory)}
.cz-in{padding:16px 18px}.cz-h{margin:0 0 6px;font-size:18px}.cz p{margin:0 0 10px;font-size:15px;line-height:1.6}
.cz-set{display:grid;gap:8px;margin:0 0 12px}.cz-set label{display:flex;gap:8px;align-items:flex-start;font-size:15px}
.cz-set input{width:20px;height:20px;margin-top:2px;flex:none}
.cz-btns{display:flex;flex-wrap:wrap;gap:8px}.cz-btns .btn{min-height:44px;padding:10px 16px}
.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.hero-count{margin:10px 0 0;font:800 13px var(--fl);letter-spacing:.12em;color:var(--gold)}.hero-count b{font-size:16px;color:var(--ivory)}
.social{list-style:none;display:flex;gap:10px;padding:0;margin:12px 0 0}.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--ivory)}
.social a:hover,.social a:focus-visible{color:var(--gold);border-color:var(--gold)}
/* the real land: in-game map screenshots (preview: map_section) */
.mp-sec{padding:90px 0}.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 14px}
@media (max-width:760px){.mp-grid{grid-template-columns:1fr}}
.mp-fig{margin:0}.mp-fig figcaption{margin-top:8px;font-size:15px;color:#d7dbe2}
.mp-truth{margin:10px 0;padding-inline-start:20px;line-height:1.75}.mp-attr{opacity:.75;font-size:12px;margin-top:10px}
.mp-fig .art-box{aspect-ratio:1/1}.mp-fig .art-box img{width:100%;height:100%;object-fit:cover}
@media (min-width:901px) and (max-width:1180px){.sub-nav ul{gap:13px}.sub-nav a{font-size:12px;letter-spacing:.05em}}   /* 8 links (news, roadmap, press) fit between the phone row and wide screens */
/* GO-day incident notice: a fixed bar at the BOTTOM (the home header is fixed at the top), on every page */
.incident{position:fixed;inset-inline:0;bottom:0;z-index:56;background:#f2b84b;color:#1a1206;padding:12px var(--pad);font-weight:800;line-height:1.5;text-align:center;box-shadow:0 -6px 24px rgba(0,0,0,.45)}.incident p{margin:0 auto;max-width:900px}
body:has(.incident){padding-bottom:96px}html:has(.incident) .motion-tg{inset-block-end:96px}
@media (max-width:760px){.incident{font-size:14px;padding:10px 14px}body:has(.incident){padding-bottom:150px}html:has(.incident) .motion-tg{inset-block-end:150px}}
/* /play-start: the ad landing page (light, mobile first) */
.ps{max-width:640px}.ps-art{margin:0 0 18px}.ps h1{font:900 clamp(30px,8vw,46px)/1.1 var(--fd);color:var(--gold2);margin:0 0 10px}
.ps-size{font-weight:700;border-inline-start:4px solid var(--gold);padding-inline-start:12px}
p.ps-phone{display:none;font-weight:700;color:var(--gold)}html.dev-phone p.ps-phone{display:block}
.ps-form{display:grid;gap:10px;margin:18px 0}.ps-form input[type=email]{font:inherit;padding:14px;min-height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:#101015;color:inherit}
.ps-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px}.ps-consent input{width:22px;height:22px;flex:none;margin-top:2px}
.ps-form .btn{min-height:50px;font-size:17px}.ps-msg{min-height:1.4em;margin:0}.ps-msg.err{color:#ffb4a8}
.ps-step{margin:20px 0;padding:18px;border:1px solid var(--gold);border-radius:10px}.ps-step h2{margin:0 0 8px}
.ps-form{position:relative}.ps-form .hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}   /* RTL-safe, like .form .hp (left:-9999px made the RTL page 10,000 px wide) */
.lf-sec{padding:70px 0}.lf{max-width:820px}.lf h2{font:900 clamp(26px,5vw,40px)/1.15 var(--fd);color:var(--gold2);margin:0 0 12px}.lf p{line-height:1.8}.lf-attr{opacity:.7;font-size:12px}
.lf-src bdi{white-space:nowrap}

/* generated */
.world-track{--ar:2.3343}
.pin.p0{--px:0.18;--py:0.62}
.pin.p1{--px:0.42;--py:0.42}
.pin.p2{--px:0.63;--py:0.66}
.pin.p3{--px:0.86;--py:0.5}
.char:nth-child(1) img{object-position:60% 40%}
.char:nth-child(2) img{object-position:45% 35%}
.char:nth-child(3) img{object-position:58% 30%}