:root{
  --pink:#ff5fa2; --orange:#ff8a3d; --yellow:#ffce3a;
  --teal:#1fc8bd; --blue:#3d7bff; --purple:#9b5de5;
  --ink:#7a4a1e; --crust:#7a4413;
  --bg1:#fff6e6; --bg2:#ffe9d4; --bg3:#ffe3ec; --bg4:#fff1d8;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 32%, var(--bg3) 58%, var(--bg4) 82%, var(--bg2) 100%);
  background-size:300% 300%;
  animation:bgShift 22s ease-in-out infinite;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@keyframes bgShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
/* Tech page gets a distinct cool background */
body.tech-page{ background:linear-gradient(160deg, #e7ebfa 0%, #eaf3ff 50%, #f1eefc 100%); animation:none; }

/* ===== language switch (RTL ar / LTR en) ===== */
html[dir="rtl"] .en{ display:none; }
html[dir="ltr"] .ar{ display:none; }

/* ============ Ambient background ============ */
.blob{ position:fixed; border-radius:50%; filter:blur(64px); opacity:.4; z-index:0; pointer-events:none; will-change:transform; animation:drift 17s ease-in-out infinite; }
.blob.b1{ width:46vmax; height:46vmax; top:-16vmax; inset-inline-end:-14vmax; background:radial-gradient(circle at 30% 30%, #ff9ecb, var(--pink)); }
.blob.b2{ width:40vmax; height:40vmax; bottom:-18vmax; inset-inline-start:-14vmax; background:radial-gradient(circle at 30% 30%, #8fe9e1, var(--teal)); animation-delay:-6s; }
.blob.b3{ width:32vmax; height:32vmax; top:46%; inset-inline-start:60%; background:radial-gradient(circle at 30% 30%, #ffe08a, var(--yellow)); opacity:.3; animation-delay:-10s; }
@keyframes drift{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(3vmax,-3vmax) scale(1.08)} 66%{transform:translate(-2vmax,2vmax) scale(.94)} }

/* ============ Top bar (back + language) ============ */
.topbar{ position:fixed; top:0; inset-inline:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:max(12px,env(safe-area-inset-top)) 16px 12px; pointer-events:none; }
.topbar > *{ pointer-events:auto; }
.pillbtn{ display:inline-flex; align-items:center; gap:.45em; cursor:pointer; text-decoration:none; border:none; font-family:inherit; font-weight:800;
  font-size:clamp(.85rem,3.2vw,1rem); color:var(--crust); background:rgba(255,255,255,.74); border:2px solid rgba(255,255,255,.9);
  padding:.5em 1.05em; border-radius:999px; box-shadow:0 8px 20px rgba(150,90,30,.16); backdrop-filter:blur(6px); }
.pillbtn:active{ transform:scale(.95); }

/* ============ HERO (home) ============ */
.hero{ position:relative; z-index:1; min-height:62svh; display:grid; place-items:center; text-align:center;
  padding:clamp(84px,14vh,124px) 18px clamp(8px,2vw,16px); overflow:hidden; }
.confetti{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.shape{ position:absolute; top:-12vh; will-change:transform; animation:fall linear infinite; filter:drop-shadow(0 6px 10px rgba(122,74,30,.12)); }
.shape svg{ display:block; width:100%; height:100%; }
@keyframes fall{ 0%{transform:translate3d(0,-20vh,0) rotate(0)} 100%{transform:translate3d(var(--drift,20px),122vh,0) rotate(var(--spin,360deg))} }
.stage{ position:relative; z-index:2; display:grid; place-items:center; width:min(94vw,720px); animation:popIn 1s cubic-bezier(.18,.9,.28,1.2) both; }
@keyframes popIn{ from{opacity:0; transform:translateY(22px) scale(.9)} to{opacity:1; transform:none} }
.halo{ position:absolute; z-index:-1; width:118%; aspect-ratio:1/1; background:radial-gradient(closest-side, rgba(255,246,226,.95) 0%, rgba(255,246,226,.6) 45%, rgba(255,246,226,0) 72%); }
.logo{ grid-area:1/1; max-width:min(480px,84vw); max-height:46svh; width:auto; height:auto; filter:drop-shadow(0 22px 30px rgba(150,90,30,.28)); animation:float 4.2s ease-in-out infinite; will-change:transform; }
@keyframes float{ 0%,100%{transform:translateY(0) rotate(-.6deg)} 50%{transform:translateY(-14px) rotate(.6deg)} }
.stage .tagline{ margin-top:16px; font-weight:800; font-size:clamp(1.05rem,4vw,1.5rem); color:var(--crust); text-shadow:0 2px 0 rgba(255,255,255,.55); max-width:24ch; line-height:1.5; }

/* ============ Home nav buttons ============ */
.nav-cards{ position:relative; z-index:1; display:grid; gap:clamp(16px,3vw,24px); grid-template-columns:1fr 1fr;
  width:min(820px,94vw); margin:0 auto clamp(48px,9vw,80px); padding:0 4px; }
@media (max-width:620px){ .nav-cards{ grid-template-columns:1fr; } }
.nav-card{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; text-align:center;
  padding:clamp(26px,5vw,42px) 20px; border-radius:30px; border:2px solid rgba(255,255,255,.85); color:var(--crust);
  box-shadow:0 20px 44px rgba(150,90,30,.18), inset 0 1px 0 rgba(255,255,255,.8); transition:transform .15s ease, box-shadow .15s ease; }
.nav-card:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 28px 56px rgba(150,90,30,.26); }
.nav-card:active{ transform:scale(.98); }
.nav-card.games{ background:radial-gradient(120% 100% at 50% 0%, #fff3df, #ffd6b2); }
.nav-card.tech{ background:linear-gradient(180deg, #eef1fc, #e4eeff); color:#2b3a67; border-color:rgba(255,255,255,.9); }
.nav-emoji{ font-size:clamp(2.6rem,9vw,3.6rem); line-height:1; filter:drop-shadow(0 8px 14px rgba(80,60,30,.25)); }
.nav-title{ font-size:clamp(1.4rem,5.5vw,2rem); font-weight:900; }
.nav-desc{ font-weight:600; font-size:clamp(.85rem,3.2vw,1rem); opacity:.82; max-width:26ch; line-height:1.5; }

/* ============ Section pages (games / tech) ============ */
.section{ position:relative; z-index:1; text-align:center; padding:clamp(84px,15vh,120px) 16px clamp(40px,7vw,72px); }
.eyebrow{ display:inline-block; font-weight:800; font-size:clamp(.8rem,3vw,1rem); color:#fff;
  background:linear-gradient(120deg,var(--orange),var(--pink)); padding:.4em 1.1em; border-radius:999px; box-shadow:0 8px 20px rgba(255,94,126,.3); }
.section h2{ font-size:clamp(1.7rem,6.5vw,3rem); color:var(--crust); letter-spacing:.5px; text-shadow:0 2px 0 rgba(255,255,255,.5); margin:12px 0; }
.section .sub{ margin:.5em auto 0; max-width:42ch; font-weight:600; font-size:clamp(.95rem,3.6vw,1.15rem); color:rgba(122,74,30,.8); line-height:1.6; }
.tech-page .section h2{ color:#2b3a67; text-shadow:0 2px 0 rgba(255,255,255,.6); }
.tech-page .section .eyebrow{ background:linear-gradient(120deg,#3d7bff,#9b5de5); box-shadow:0 8px 20px rgba(61,123,255,.3); }
.mini-title{ margin-top:clamp(28px,6vw,46px); font-size:clamp(1.3rem,5vw,2rem); color:var(--crust); text-shadow:0 2px 0 rgba(255,255,255,.5); }
.mini-title .knife{ filter:drop-shadow(0 4px 6px rgba(150,90,30,.3)); }

/* ============ Game ============ */
.game-wrap{ position:relative; width:min(900px,94vw); height:clamp(440px,72svh,640px); margin:clamp(18px,4vw,32px) auto 0; border-radius:28px; overflow:hidden;
  border:3px solid rgba(255,255,255,.8); background:linear-gradient(180deg, #fff3df 0%, #ffe7c9 55%, #ffd9b0 100%);
  box-shadow:0 28px 60px rgba(150,90,30,.22), inset 0 2px 0 rgba(255,255,255,.7), inset 0 -40px 70px rgba(180,110,40,.10); touch-action:manipulation; }
.game-wrap::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(180,110,40,.10) 1.5px, transparent 1.6px); background-size:26px 26px; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.hud{ position:absolute; top:0; inset-inline:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; pointer-events:none; font-weight:800; }
.hud .score{ background:rgba(255,255,255,.72); color:var(--crust); padding:.35em .8em; border-radius:999px; box-shadow:0 6px 16px rgba(150,90,30,.18); font-size:clamp(.9rem,3.4vw,1.15rem); }
.hud .score b{ font-size:1.15em; }
.hud .score small{ display:block; font-size:.62em; opacity:.7; font-weight:700; }
.hud .lives{ display:flex; gap:3px; align-items:center; }
.hud .lives img.life{ width:clamp(22px,5vw,32px); height:auto; filter:drop-shadow(0 2px 3px rgba(150,90,30,.3)); }
.hud .lives img.lost{ opacity:.25; filter:grayscale(.9); }
.hud .mute{ pointer-events:auto; cursor:pointer; border:none; background:rgba(255,255,255,.72); width:2.2em; height:2.2em; border-radius:50%; font-size:clamp(.9rem,3.4vw,1.1rem); box-shadow:0 6px 16px rgba(150,90,30,.18); display:grid; place-items:center; }
.hud .mute:active{ transform:scale(.92); }
.overlay{ position:absolute; inset:0; z-index:4; display:none; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,2.5vw,18px); text-align:center; padding:24px;
  background:radial-gradient(circle at 50% 38%, rgba(255,247,233,.78), rgba(255,231,201,.92)); backdrop-filter:blur(3px); }
.overlay.show{ display:flex; animation:fadeIn .35s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.overlay h3{ font-size:clamp(1.6rem,7vw,2.6rem); color:var(--crust); text-shadow:0 2px 0 rgba(255,255,255,.5); }
.overlay p{ font-weight:600; color:rgba(122,74,30,.85); max-width:30ch; line-height:1.6; font-size:clamp(.95rem,3.8vw,1.1rem); }
.overlay .big{ font-size:clamp(1.05rem,4.4vw,1.4rem); font-weight:800; color:var(--crust); }
.overlay .big span{ color:var(--orange); }
.btn{ cursor:pointer; border:none; font-family:inherit; font-weight:800; color:#fff; font-size:clamp(1.05rem,4.6vw,1.45rem); padding:.6em 1.7em; border-radius:999px;
  background:linear-gradient(120deg, var(--orange), #ff5e7e 60%, var(--purple)); box-shadow:0 14px 30px rgba(255,94,126,.4), inset 0 2px 0 rgba(255,255,255,.45); transition:transform .12s ease; animation:pulseBtn 2.6s ease-in-out infinite; }
.btn:hover{ transform:translateY(-2px) scale(1.03); }
.btn:active{ transform:scale(.96); }
@keyframes pulseBtn{ 0%,100%{box-shadow:0 14px 30px rgba(255,94,126,.4), inset 0 2px 0 rgba(255,255,255,.45)} 50%{box-shadow:0 18px 40px rgba(255,94,126,.6), inset 0 2px 0 rgba(255,255,255,.45)} }

/* ============ Product cards ============ */
.product-card{ position:relative; width:min(640px,94vw); margin:clamp(16px,3.5vw,26px) auto 0; background:rgba(255,255,255,.78); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.9); border-radius:28px; padding:clamp(22px,5vw,38px); text-align:center; box-shadow:0 24px 56px rgba(40,50,90,.14), inset 0 1px 0 rgba(255,255,255,.8); }
.product-card .picon{ width:clamp(86px,18vw,112px); height:clamp(86px,18vw,112px); margin:0 auto; filter:drop-shadow(0 14px 22px rgba(20,30,60,.30)); }
.product-card .picon svg{ width:100%; height:100%; display:block; }
.product-card .picon.img{ border-radius:24px; }
.product-card h3{ font-size:clamp(1.35rem,5vw,1.9rem); color:var(--crust); margin-top:14px; }
.tech-page .product-card h3{ color:#2b3a67; }
.product-card .sub2{ font-weight:700; color:rgba(80,70,110,.72); font-size:clamp(.85rem,3.3vw,1rem); margin-top:4px; }
.product-card .tag{ font-weight:600; color:rgba(90,80,110,.9); max-width:46ch; margin:.7em auto 0; line-height:1.8; font-size:clamp(.92rem,3.5vw,1.05rem); }
.game-page .product-card .tag, .product-card.coop .tag{ color:rgba(122,74,30,.88); }
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:clamp(16px,4vw,24px) auto 0; max-width:520px; }
@media (max-width:480px){ .ba{ grid-template-columns:1fr; } }
.ba-col{ display:flex; flex-direction:column; gap:8px; }
.ba-tag{ font-weight:800; font-size:.85rem; padding:.25em .8em; border-radius:999px; align-self:center; }
.ba-tag.bad{ color:#c0392b; background:#ffe4e0; }
.ba-tag.good{ color:#1e8e4f; background:#e3f7ec; }
.vscode{ background:#1e1e2e; border:1px solid #2c2c44; border-radius:14px; padding:12px; text-align:start; }
.vscode .msg{ color:#e6e6f0; font-size:.82rem; line-height:1.7; margin-bottom:8px; }
.vscode .msg.ltr{ direction:ltr; text-align:left; }
.vscode .msg.rtl{ direction:rtl; text-align:right; }
.vscode code{ display:block; direction:ltr; text-align:left; font-family:monospace; font-size:.76rem; color:#9ad1ff; background:#15151f; padding:6px 8px; border-radius:8px; }
.feat{ list-style:none; padding:0; margin:clamp(16px,3.5vw,24px) auto; max-width:480px; text-align:start; display:grid; gap:10px; }
.feat li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; color:#48506b; font-size:clamp(.9rem,3.4vw,1.02rem); line-height:1.55; }
.feat li::before{ content:"✓"; flex:none; width:1.45em; height:1.45em; border-radius:50%; margin-top:.05em; background:linear-gradient(120deg,var(--teal),#16a085); color:#fff; font-weight:900; display:grid; place-items:center; font-size:.8em; }
.price{ margin-top:clamp(14px,3vw,20px); }
.price .amt{ font-size:clamp(2rem,8vw,2.9rem); font-weight:900; color:#2b3a67; line-height:1; }
.price .amt small{ font-size:.5em; font-weight:800; opacity:.65; margin-inline-start:3px; }
.price .once{ font-weight:700; color:rgba(80,70,110,.65); font-size:.88rem; margin-top:4px; }
.buy-btn{ display:inline-flex; align-items:center; gap:.5em; cursor:pointer; text-decoration:none; border:none; font-family:inherit; font-weight:800; color:#fff;
  font-size:clamp(1.05rem,4.4vw,1.35rem); padding:.7em 1.9em; border-radius:999px; margin-top:14px; background:linear-gradient(120deg,var(--orange),#ff5e7e 60%,var(--purple));
  box-shadow:0 14px 30px rgba(255,94,126,.4), inset 0 2px 0 rgba(255,255,255,.45); transition:transform .12s ease; }
.buy-btn:hover{ transform:translateY(-2px) scale(1.03); }
.buy-btn:active{ transform:scale(.97); }
.deliver{ margin-top:14px; font-weight:600; color:rgba(80,70,110,.85); font-size:clamp(.85rem,3.3vw,1rem); line-height:1.7; }
.note{ margin-top:8px; font-size:clamp(.8rem,3vw,.92rem); color:rgba(80,70,110,.62); line-height:1.6; }
.disclaimer{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(80,70,110,.18); font-size:clamp(.72rem,2.7vw,.82rem); color:rgba(80,70,110,.58); line-height:1.6; }
.product-card.soon{ opacity:.95; }
.product-card.soon .picon{ filter:grayscale(.2) drop-shadow(0 10px 18px rgba(20,30,60,.25)); }
.soon-badge{ position:absolute; top:16px; inset-inline-end:16px; font-weight:800; font-size:.8rem; color:#fff; background:linear-gradient(120deg,var(--purple),var(--blue)); padding:.35em .9em; border-radius:999px; box-shadow:0 6px 16px rgba(61,123,255,.3); }
.product-card.coop{ background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,236,210,.78)); }
.product-card.coop h3{ color:var(--crust); }
.coop-emoji{ font-size:clamp(2.6rem,10vw,3.6rem); line-height:1; filter:drop-shadow(0 8px 14px rgba(150,90,30,.25)); }

/* ============ Footer ============ */
.foot{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:30px 16px max(28px, env(safe-area-inset-bottom)); font-weight:600; font-size:.82rem; letter-spacing:.04em; color:rgba(110,90,70,.6); }
.foot .social{ display:flex; gap:12px; }
.foot .social-link{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#fff;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); box-shadow:0 8px 20px rgba(188,24,136,.32); transition:transform .15s ease; }
.foot .social-link:hover{ transform:translateY(-3px) scale(1.08); }
.foot .social-link:active{ transform:scale(.95); }
.foot .copy{ opacity:.85; direction:ltr; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce){
  body,.blob,.logo,.stage,.btn,.nav-card{ animation:none !important; }
  .confetti{ display:none; }
}