/* Appfi: retro arcade theme */
:root{
  --bg:#0b0b1e; --bg2:#10102a; --panel:#16163a; --panel2:#1c1c48; --line:#2c2c66;
  --ink:#f4f1ff; --mute:#a9a6d6;
  --lime:#b6ff3b; --pink:#ff3ea5; --cyan:#3be8ff; --gold:#ffc23b;
  --px:'Press Start 2P',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --head:var(--sans);
  --r:14px;
}
html[lang=ar]{ --sans:'Cairo',system-ui,sans-serif; --head:'Lalezar','Cairo',sans-serif; }
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff6 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 8%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 42% 62%,#fff4 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 44%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 25% 85%,#fff4 50%,transparent 51%),
    radial-gradient(900px 500px at 85% -10%,#ff3ea522,transparent 70%),
    radial-gradient(800px 500px at -10% 30%,#3be8ff18,transparent 70%);
  background-size:420px 420px,380px 380px,460px 460px,520px 520px,400px 400px,100% 100%,100% 100%;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.px{font-family:var(--px);letter-spacing:.02em}
html[lang=ar] [data-i].px,html[lang=ar] .player .pname{font-family:var(--head);letter-spacing:0}
.crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px);mix-blend-mode:multiply}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.glow-lime{color:var(--lime);text-shadow:0 0 18px #b6ff3b88}
.hide-sm{}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:400 13px/1 var(--px);text-transform:uppercase;
  color:#0b0b1e;background:var(--lime);border:3px solid #0b0b1e;padding:16px 20px;text-decoration:none;cursor:pointer;
  box-shadow:5px 5px 0 var(--pink);transition:transform .08s,box-shadow .08s;border-radius:4px}
html[lang=ar] .btn{font:400 19px/1 var(--head);padding:14px 22px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--pink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--cyan)}
.btn-ghost:hover{box-shadow:7px 7px 0 var(--cyan)}
.btn-sm{padding:11px 14px;font-size:10px;box-shadow:3px 3px 0 var(--pink)}
html[lang=ar] .btn-sm{font-size:16px;padding:9px 14px}
.btn-wa{background:#25d366;box-shadow:5px 5px 0 var(--gold);margin-top:10px}
.chip-btn{font:400 10px/1 var(--px);color:var(--ink);background:var(--panel);border:2px solid var(--line);padding:9px 10px;border-radius:4px;cursor:pointer}
.chip-btn[lang=ar]{font:700 14px/1 'Cairo',sans-serif;padding:6px 10px}
.chip-btn:hover{border-color:var(--cyan)}
.chip-btn[aria-pressed=true]{border-color:var(--lime);color:var(--lime)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:#0b0b1ecc;backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:16px;color:var(--ink)}
.logo .px{font-family:'Press Start 2P',monospace;text-shadow:3px 3px 0 var(--pink)}
.logo-mark{width:24px;height:24px;flex:none;background:
  linear-gradient(var(--lime) 0 0) 0 75%/62% 25% no-repeat,
  linear-gradient(var(--lime) 0 0) 37.5% 25%/25% 75% no-repeat,
  linear-gradient(var(--pink) 0 0) 37.5% 25%/62% 25% no-repeat,
  linear-gradient(var(--gold) 0 0) 0 25%/25% 25% no-repeat;image-rendering:pixelated}
.links{display:flex;gap:22px;margin-inline-start:auto}
.links a{text-decoration:none;color:var(--mute);font-weight:500;font-size:15px}
.links a:hover{color:var(--lime)}
.tools{display:flex;align-items:center;gap:8px}
.burger{display:none;background:none;border:2px solid var(--line);border-radius:4px;width:40px;height:38px;padding:8px;cursor:pointer}
.burger span{display:block;height:3px;background:var(--ink);margin:3px 0}

/* Hero */
.hero{padding:34px 0 60px}
.crt{position:relative;max-width:1000px;margin:0 auto;background:#060614;border:4px solid #2a2a5c;border-radius:22px;padding:14px 14px 40px;
  box-shadow:0 0 0 6px #0b0b1e,0 0 0 9px #22224d,0 0 60px #3be8ff33 inset,0 30px 80px #0008}
.crt::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:radial-gradient(ellipse at center,transparent 60%,#0007 100%)}
.hud{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);padding:4px 8px 10px}
.hud b{color:var(--gold);font-weight:400}
#heroSnake{display:block;width:100%;height:auto;image-rendering:pixelated}
.insert{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;color:var(--gold)}
html[lang=ar] .insert{font-family:var(--head);font-size:18px;bottom:8px}
.hero-copy{text-align:center;max-width:820px;margin:44px auto 0}
.kicker{font-size:11px;color:var(--cyan);text-transform:uppercase;margin:0 0 14px}
html[lang=ar] .kicker{font-family:var(--head);font-size:18px}
h1,h2,h3,h4{font-family:var(--head);line-height:1.08;margin:0}
h1{font-size:clamp(40px,7vw,84px);font-weight:700;letter-spacing:-.02em}
html[lang=ar] h1{font-weight:400;line-height:1.3}
.lead{font-size:clamp(17px,2vw,20px);color:var(--mute);margin:18px auto 30px;max-width:640px}
.ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.stats{list-style:none;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:0;margin:40px 0 0}
.stats li{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:14px 18px;min-width:170px}
.stats b{display:block;color:var(--lime);font-size:18px;font-weight:400;margin-bottom:8px;font-family:'Press Start 2P',monospace}
.stats span{color:var(--mute);font-size:14px}

/* Marquee */
.marquee{overflow:hidden;border-block:3px solid var(--ink);background:var(--lime);color:#0b0b1e;transform:rotate(-1.2deg);margin:10px -10px}
.track{display:flex;width:max-content;gap:28px;padding:14px 0;font-size:14px;white-space:nowrap;animation:scroll 28s linear infinite}
.track span{display:inline-flex;gap:28px}
.track i{font-style:normal;color:var(--pink)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Sections */
.sec{padding:100px 0;position:relative}
.sec-alt{background:linear-gradient(180deg,var(--bg2),var(--bg));border-block:2px solid var(--line)}
h2{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.015em;max-width:780px}
html[lang=ar] h2{font-weight:400;line-height:1.3}
.sub{color:var(--mute);font-size:18px;max-width:620px;margin:14px 0 46px}

/* Levels */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.level{background:var(--panel);border:3px solid var(--line);border-radius:var(--r);padding:24px;position:relative;transition:transform .2s,border-color .2s}
.level:hover{transform:translateY(-6px);border-color:var(--c)}
.lv-top{display:flex;justify-content:space-between;align-items:center}
.lv-no{font-size:11px;color:var(--c)}
.stamp{font-size:8px;color:#0b0b1e;background:var(--c);padding:6px 7px;border-radius:3px;transform:rotate(4deg) scale(0);transition:transform .35s cubic-bezier(.3,1.8,.5,1) .6s}
html[lang=ar] .stamp{font-family:var(--head);font-size:14px}
.level.in .stamp{transform:rotate(4deg) scale(1)}
.sprite{height:96px;margin:22px 0 16px;display:flex;align-items:center}
.sprite svg{height:100%;width:auto;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--c) 50%,transparent))}
.level:hover .sprite svg{animation:bob .5s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.level h3{font-size:30px;margin-bottom:8px}
html[lang=ar] .level h3{font-weight:400}
.level p{color:var(--mute);margin:0 0 16px;font-size:16px}
.ticks{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:7px;font-size:15px}
.ticks li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--c);margin-inline-end:10px;vertical-align:middle}
.xp{display:flex;align-items:center;gap:10px;font-size:9px;color:var(--mute)}
.xp i{flex:1;height:12px;border:2px solid var(--line);padding:2px;display:block}
.xp b{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--c) 0 8px,transparent 8px 10px);transition:width 1.6s steps(20) .3s}
.level.in .xp b{width:100%}

/* Board */
.board-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:start}
.dice-row{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.die{width:58px;height:58px;display:grid;place-items:center;background:var(--ink);color:#0b0b1e;border-radius:10px;font-size:22px;box-shadow:4px 4px 0 var(--cyan)}
.die.shake{animation:shake .4s steps(4)}
@keyframes shake{25%{transform:rotate(14deg)}50%{transform:rotate(-12deg)}75%{transform:rotate(8deg)}}
.board-msg{min-height:3.2em;color:var(--gold);font-weight:500;margin:0 0 20px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.steps li{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:14px 16px}
.steps b{color:var(--pink);font-weight:400;font-size:13px;padding-top:4px}
.steps h4{font-size:19px;margin-bottom:3px}
html[lang=ar] .steps h4{font-weight:400;font-size:22px}
.steps p{margin:0;color:var(--mute);font-size:15px}
.board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);aspect-ratio:5/6;
  border:4px solid var(--ink);border-radius:8px;overflow:hidden;box-shadow:8px 8px 0 var(--pink);direction:ltr}
.cell{position:relative;border:1px solid #0b0b1e55;padding:6px;font:400 10px/1 var(--px);color:#0b0b1e99}
.cell:nth-child(odd){background:#2a2a66}.cell:nth-child(even){background:#22224f}
.cell.alt:nth-child(odd){background:#22224f}.cell.alt:nth-child(even){background:#2a2a66}
.cell .n{color:#ffffff55}
.cell .lab{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:4;text-align:center;font-size:8px;color:var(--gold);line-height:1.3;background:#0b0b1ed9;padding:3px 5px;border-radius:3px;white-space:nowrap}
.cell .lab:empty{display:none}
html[lang=ar] .cell .lab{font-family:var(--head);font-size:13px}
.cell.goal{background:var(--lime)!important}.cell.goal .n,.cell.goal .lab{color:#0b0b1e}
.board-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.token{position:absolute;z-index:3;width:9%;aspect-ratio:1;left:0;top:0;border-radius:4px;background:var(--gold);border:3px solid #0b0b1e;
  box-shadow:0 0 0 2px var(--gold),0 6px 14px #000a;transition:transform .22s steps(3);margin:-4.5% 0 0 -4.5%}
.token::after{content:"";position:absolute;inset:28% 22% auto;height:18%;background:linear-gradient(90deg,#0b0b1e 0 25%,transparent 25% 75%,#0b0b1e 75%)}
.token.slide{transition:transform .9s cubic-bezier(.6,0,.4,1)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--mute)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;margin-inline-end:8px;vertical-align:-1px}
.lg-l::before{background:var(--lime)}.lg-s::before{background:var(--pink)}

/* Cartridges */
.carts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cart{text-decoration:none;background:#2a2a40;border-radius:12px 12px 6px 6px;padding:0 12px 14px;border:3px solid #0b0b1e;box-shadow:0 0 0 2px var(--line),6px 8px 0 #0006;
  transition:transform .2s;display:flex;flex-direction:column}
.cart:hover{transform:translateY(-8px) rotate(-1deg)}
.cart-ridge{height:22px;margin:0 -12px 12px;border-radius:9px 9px 0 0;background:repeating-linear-gradient(90deg,#3a3a58 0 6px,#2a2a40 6px 12px)}
.cart-label{border:3px solid var(--c);border-radius:6px;overflow:hidden;aspect-ratio:4/3.2;background:#000;position:relative}
.cart-label img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .4s,transform .6s}
.cart-label.tall img{object-position:center 20%}
.cart:hover .cart-label img{transform:scale(1.05)}
.cart-label.swap img+img{position:absolute;inset:0;opacity:0}
.cart:hover .cart-label.swap img+img{opacity:1}
.cart-info{padding:14px 4px 0;display:flex;flex-direction:column;flex:1}
.tag{font-size:8px;color:#0b0b1e;background:var(--c);align-self:flex-start;padding:5px 7px;border-radius:3px;margin-bottom:10px}
html[lang=ar] .tag{font-family:var(--head);font-size:14px}
.cart h3{font-size:21px;margin-bottom:6px}
html[lang=ar] .cart h3{font-weight:400}
.cart p{color:var(--mute);font-size:14.5px;margin:0 0 14px;flex:1}
.play{font-size:9px;color:var(--c);direction:ltr}

/* Players */
.players{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.player{background:var(--panel);border:3px solid var(--line);border-radius:var(--r);padding:20px;text-align:center;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.player:hover,.player:focus-within{border-color:var(--c);transform:translateY(-6px)}
.player .ava{height:110px;display:grid;place-items:center;margin:6px 0 12px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 22%,transparent),transparent 65%)}
.player .ava svg{height:96px;width:auto}
.player:hover .ava svg{animation:bob .45s steps(2) infinite}
.player .pname{font-size:12px;color:var(--c);margin-bottom:10px}
html[lang=ar] .player .pname{font-family:var(--head);font-size:20px}
.player p{color:var(--mute);font-size:15px;margin:0 0 14px}
.player ul{list-style:none;padding:0;margin:0 0 16px;text-align:start;font-size:14.5px;display:grid;gap:5px}
.player ul li::before{content:"+ ";color:var(--c);font-weight:700}
.bars{display:grid;gap:7px;margin:0 0 18px;text-align:start}
.bar{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font:400 8px/1 var(--px);color:var(--mute)}
html[lang=ar] .bar{font:400 13px/1 var(--head);grid-template-columns:70px 1fr}
.bar i{height:10px;display:block;background:repeating-linear-gradient(90deg,var(--c) 0 10px,transparent 10px 13px);clip-path:inset(0 calc(100% - var(--v)) 0 0)}
html[dir=rtl] .bar i{clip-path:inset(0 0 0 calc(100% - var(--v)))}
.player .btn{margin-top:auto;font-size:11px;padding:13px 12px}

/* Arcade */
.arcade-grid{display:grid;grid-template-columns:1fr 440px;gap:50px;align-items:center}
.keys{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.keys li{display:flex;gap:16px;align-items:center;color:var(--mute)}
.keys .px{font-size:10px;color:var(--ink);background:var(--panel);border:2px solid var(--line);padding:8px 10px;border-radius:4px;min-width:96px;text-align:center}
.cabinet{background:linear-gradient(160deg,#2b1d5c,#170f38);border:4px solid #0b0b1e;border-radius:22px 22px 10px 10px;padding:16px;box-shadow:0 0 0 3px var(--pink),10px 12px 0 #0007}
.cab-top{text-align:center;font-size:13px;color:var(--gold);text-shadow:0 0 12px #ffc23b99;padding:6px 0 14px}
.cab-screen{position:relative;background:#050510;border:4px solid #000;border-radius:10px;padding:10px}
.cab-hud{display:flex;justify-content:space-between;font-size:10px;color:var(--mute);padding:0 2px 8px}
html[lang=ar] .cab-hud [data-i]{font-family:var(--head);font-size:15px}
.cab-hud b{color:var(--lime);font-weight:400}
#game{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none;background:#07071a}
.cab-over{position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#050510d9;text-align:center;padding:20px}
.cab-over[hidden]{display:none}
.cab-over .px{font-size:16px;color:var(--gold);margin:0}
html[lang=ar] .cab-over .px{font-family:var(--head);font-size:26px}
.cab-over .win{color:var(--lime);margin:0;font-size:15px}
.pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);gap:6px;justify-content:center;margin-top:14px;direction:ltr}
.pad button{background:var(--panel2);color:var(--ink);border:2px solid #0b0b1e;border-radius:8px;font-size:16px;cursor:pointer;box-shadow:0 4px 0 #000}
.pad button:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.pad [data-d=up]{grid-column:2}.pad [data-d=left]{grid-column:1;grid-row:2}.pad [data-d=down]{grid-column:2;grid-row:2}.pad [data-d=right]{grid-column:3;grid-row:2}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.form{background:var(--panel);border:3px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:16px;box-shadow:8px 8px 0 var(--cyan)}
.form label{display:grid;gap:6px;font-weight:500;font-size:15px}
.form input:not([type=checkbox]),.form textarea{width:100%;background:#0b0b1e;border:2px solid var(--line);border-radius:6px;color:var(--ink);font:inherit;padding:12px 14px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--lime)}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:500;font-size:15px;margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex!important;align-items:center;gap:8px;background:#0b0b1e;border:2px solid var(--line);border-radius:6px;padding:9px 12px;cursor:pointer}
.opt:has(input:checked){border-color:var(--lime);color:var(--lime)}
.opt input{accent-color:var(--lime)}

/* Footer */
.foot{padding:50px 0 40px;border-top:2px solid var(--line)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.over{font-size:11px;color:var(--pink);margin:0}
html[lang=ar] .over{font-family:var(--head);font-size:20px}
.small{color:var(--mute);font-size:14px;margin:0}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1020px){
  .carts,.players{grid-template-columns:repeat(2,1fr)}
  .board-grid,.arcade-grid,.contact-grid{grid-template-columns:1fr}
  .board-wrap{max-width:520px}
  .cabinet{max-width:440px;width:100%;margin:0 auto}
}
@media (max-width:860px){
  .links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:#0b0b1ef5;border-bottom:2px solid var(--line);margin:0}
  .links.open{display:flex}
  .links a{padding:16px 20px;border-top:1px solid var(--line);font-size:17px}
  .burger{display:block}
  .tools{margin-inline-start:auto}
  .levels{grid-template-columns:1fr}
  .hide-sm{display:none!important}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  .sec{padding:70px 0}
  .carts,.players{grid-template-columns:1fr}
  .crt{padding:8px 8px 32px;border-radius:14px}
  .hud{font-size:8px}
  .insert{font-size:8px;bottom:11px}
  .stats li{min-width:0;flex:1 1 140px}
  .btn{font-size:11px;padding:14px 16px}
  .cell .lab{font-size:6px;bottom:3px}
  .cell{font-size:7px;padding:3px}
  .logo{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}