/* ===== الواجهة: روح سين جيم بهوية جيم جواب =====
   خلفية متدرّجة أفقياً، شعار أبيض مسطّح كبير، وبلاطات مسطّحة طالعة من «أرض» بيضا منحنية (قوس). */

/* ---------- البنر ---------- */
html body #top.hero,html body #top.hero[data-th]{position:relative;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  min-height:calc(100svh - clamp(72px,6.7vw,128px))!important;padding:clamp(18px,3.4vh,44px) 0 0!important;overflow:hidden!important;
  background:linear-gradient(90deg,#f39a12 0%,#f7af2a 40%,#fbc552 75%,#fdd581 100%)!important;background-image:linear-gradient(90deg,#f39a12 0%,#f7af2a 40%,#fbc552 75%,#fdd581 100%)!important}
html body #top.hero .pth,html body #top.hero .pthc,html body #top.hero .hfx,html body #top.hero .hq,html body #top.hero .wvx,html body #top.hero .h2ch{display:none!important}

/* الشعار: أبيض مسطّح، كبير وثابت */
html body #top.hero h1.wm{background:url(img/logo-flat-white.png) center/contain no-repeat!important;animation:none!important;filter:none!important;transform:none!important;
  width:clamp(150px,min(21vw,31vh),350px)!important;height:clamp(150px,min(21vw,31vh),350px)!important;margin:0 auto!important}
html body #top.hero h1.wm *{visibility:hidden!important}
html body #top.hero p.wel{margin:clamp(10px,2vh,22px) auto 0!important;font:800 clamp(1.15rem,1.9vw,1.9rem)/1.4 Alexandria,Changa,Tahoma,sans-serif!important;color:#fff!important;text-shadow:none!important;max-width:none!important}
html body #top.hero p.meta{margin:clamp(6px,1.2vh,12px) auto 0!important;font:400 clamp(.95rem,1.35vw,1.4rem)/1.4 Alexandria,Changa,Tahoma,sans-serif!important;color:#fff!important;opacity:1!important;text-shadow:none!important}

/* ---------- البلاطات ---------- */
html body #top.hero .wrap.tiles{--tw:clamp(118px,11.6vw,214px);--th:calc(var(--tw)*.92);--b:var(--tw);--w:var(--tw);--s:0px;
  position:relative;z-index:2;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-end!important;justify-content:center!important;
  gap:clamp(10px,1.3vw,24px)!important;width:100%!important;max-width:none!important;margin:auto 0 0!important;padding:calc(var(--tw)*.36) 16px 0!important;box-sizing:border-box}
html body #top.hero .wrap.tiles .tile{--p:0;position:relative!important;flex:none!important;width:var(--tw)!important;height:calc(var(--th) + clamp(40px,4.4vw,80px))!important;
  margin:0!important;padding:clamp(16px,1.6vw,28px) 10px 0!important;box-sizing:border-box!important;border:0!important;outline:0!important;
  border-radius:clamp(22px,2.2vw,40px) clamp(22px,2.2vw,40px) 0 0!important;box-shadow:none!important;filter:none!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  transform:translateY(calc((var(--p) - 2.5) * (var(--p) - 2.5) * -1 * var(--tw) * .034)) rotate(calc((var(--p) - 2.5) * 2.2deg))!important;
  transform-origin:50% 100%!important;transition:translate .2s ease!important;translate:0 0}
html body #top.hero .wrap.tiles a.tile:hover{translate:0 -8px}
html body #top.hero .wrap.tiles .tile::before,html body #top.hero .wrap.tiles .tile::after{display:none!important}

/* ترتيبها على القوس (يمين ← يسار) وألوانها المسطّحة */
html body #top.hero .wrap.tiles .t-det{order:0!important;--p:0;background:#6a35d6!important}
html body #top.hero .wrap.tiles .t-maf{order:1!important;--p:1;background:#1F1B16!important}
html body #top.hero .wrap.tiles .t-play{order:2!important;--p:2;background:#e8432f!important}
html body #top.hero .wrap.tiles .t-buy{order:3!important;--p:3;background:#fff!important}
html body #top.hero .wrap.tiles .t-stu{order:4!important;--p:4;background:#f47c12!important}
html body #top.hero .wrap.tiles .t-kids{order:5!important;--p:5;background:#14996a!important}

/* محتوى البلاطة: الكلمة كبيرة بالنص */
html body #top.hero .wrap.tiles .tile .wm.kl{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:clamp(2px,.4vw,6px)!important;margin:0!important;height:var(--th)!important;width:100%!important;font-size:inherit!important}
html body #top.hero .wrap.tiles .tile .wm.kl .jw img{display:block!important;width:calc(var(--tw)*.52)!important;height:auto!important;filter:none!important}
html body #top.hero .wrap.tiles .tile .wm.kl small{margin:0!important}
html body #top.hero .wrap.tiles img.lb-kids{width:calc(var(--tw)*.46)!important;translate:none!important}
html body #top.hero .wrap.tiles img.lb-students{width:calc(var(--tw)*.74)!important}
html body #top.hero .wrap.tiles .t-maf img.mw{width:calc(var(--tw)*.72)!important;height:auto!important;display:block!important}
html body #top.hero .wrap.tiles .t-det .hn{font:400 calc(var(--tw)*.2)/1 Rakkas,Changa,sans-serif!important;color:#fff!important}
html body #top.hero .wrap.tiles .tile b.tt{display:flex!important;align-items:center!important;justify-content:center!important;height:var(--th)!important;width:100%!important;margin:0!important}
html body #top.hero .wrap.tiles img.lb-create{width:calc(var(--tw)*.5)!important;filter:none!important}
html body #top.hero .wrap.tiles img.lb-buy{width:calc(var(--tw)*.44)!important;filter:none!important;content:url(img/lbl-buy-g.png?v=1)}

/* دوائر «+» فوق «إنشاء» و«اشترِ» */
html body #top.hero .wrap.tiles .t-play .pb,html body #top.hero .wrap.tiles .t-buy .bpl{position:absolute!important;top:calc(var(--tw)*-.17)!important;left:50%!important;translate:-50% 0!important;
  width:calc(var(--tw)*.3)!important;height:calc(var(--tw)*.3)!important;margin:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  box-shadow:none!important;border:calc(var(--tw)*.028) solid #fff!important;z-index:3}
html body #top.hero .wrap.tiles .t-play .pb{background:#e8432f!important;color:#fff!important}
html body #top.hero .wrap.tiles .t-buy .bpl{background:#16a34a!important;color:#fff!important}
html body #top.hero .wrap.tiles .t-play .pb svg,html body #top.hero .wrap.tiles .t-buy .bpl svg{width:55%!important;height:55%!important}
html body #top.hero .wrap.tiles .t-play,html body #top.hero .wrap.tiles .t-buy{padding-top:clamp(16px,1.6vw,28px)!important}

/* شارة «جديد» */
html body #top.hero .wrap.tiles .tile .soon{position:absolute!important;top:calc(var(--tw)*.07)!important;inset-inline-end:calc(var(--tw)*.08)!important;left:auto!important;translate:none!important;
  background:#fff!important;color:#1F1B16!important;font:700 clamp(.6rem,.8vw,.82rem)/1.5 Alexandria,Changa,Tahoma,sans-serif!important;padding:1px 10px!important;border-radius:999px!important;box-shadow:none!important}
html body #top.hero .wrap.tiles .edsn{box-shadow:none!important}

/* «الأرض» البيضا المنحنية اللي البلاطات طالعة منها */
html body #top.hero .curve{display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;top:auto!important;margin:0!important;z-index:3!important;
  height:clamp(70px,8.6vw,160px)!important;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 0 Q720 150 1440 0 V160 H0Z' fill='%23fff8e9'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat!important}
html body #top.hero .curve::before,html body #top.hero .curve::after{display:none!important}

/* ---------- الجوال ---------- */
@media(max-width:700px){
  html body #top.hero,html body #top.hero[data-th]{min-height:0!important;padding-top:22px!important}
  html body #top.hero h1.wm{width:clamp(150px,46vw,210px)!important;height:clamp(150px,46vw,210px)!important}
  html body #top.hero p.wel{font-size:1.05rem!important;padding:0 18px!important}
  html body #top.hero p.meta{font-size:.88rem!important;padding:0 18px!important}
  html body #top.hero .wrap.tiles{--tw:28vw;flex-wrap:wrap!important;gap:16px 10px!important;padding:34px 12px 4px!important;margin-top:4px!important}
  html body #top.hero .wrap.tiles .tile{transform:none!important;height:calc(var(--th) + 14px)!important;border-radius:22px!important}
  html body #top.hero .wrap.tiles .tile:nth-child(n){margin-bottom:0!important}
  html body #top.hero .wrap.tiles .t-play{order:0!important}html body #top.hero .wrap.tiles .t-buy{order:1!important}
  html body #top.hero .wrap.tiles .t-maf{order:2!important}html body #top.hero .wrap.tiles .t-kids{order:3!important}
  html body #top.hero .wrap.tiles .t-stu{order:4!important}html body #top.hero .wrap.tiles .t-det{order:5!important}
  html body #top.hero .curve{position:relative!important;height:34px!important;margin-top:-12px!important}
  html body #top.hero .wrap.tiles{padding-bottom:4px!important}
}

/* ======== طرق توزيع البلاطات (للمعاينة: ?t=a / ?t=b / ?t=c) ======== */
@media(min-width:701px){
/* (أ) منصّة: البلاطتين الرئيسيات أكبر وأعلى بالنص، والباقي بينزل درج لبرّا. بدون ميلان */
html.tva body #top.hero .wrap.tiles{align-items:flex-end!important;gap:clamp(12px,1.2vw,22px)!important;padding-top:calc(var(--tw)*.3)!important}
html.tva body #top.hero .wrap.tiles .tile{transform:none!important;--k:.78;width:calc(var(--tw)*var(--k))!important;height:calc(var(--th)*var(--k) + clamp(40px,4.4vw,80px) + var(--up,0px))!important;border-radius:clamp(20px,2vw,36px) clamp(20px,2vw,36px) 0 0!important}
html.tva body #top.hero .wrap.tiles .t-det,html.tva body #top.hero .wrap.tiles .t-kids{--k:.78}
html.tva body #top.hero .wrap.tiles .t-maf,html.tva body #top.hero .wrap.tiles .t-stu{--k:.9;--up:calc(var(--tw)*.12)}
html.tva body #top.hero .wrap.tiles .t-play,html.tva body #top.hero .wrap.tiles .t-buy{--k:1.18;--up:calc(var(--tw)*.26)}
html.tva body #top.hero .wrap.tiles .tile .wm.kl,html.tva body #top.hero .wrap.tiles .tile b.tt{height:calc(var(--th)*var(--k))!important}
html.tva body #top.hero .wrap.tiles .tile .wm.kl .jw img{width:calc(var(--tw)*var(--k)*.52)!important}
html.tva body #top.hero .wrap.tiles img.lb-create,html.tva body #top.hero .wrap.tiles img.lb-buy{width:calc(var(--tw)*.56)!important}
html.tva body #top.hero .curve{height:clamp(46px,5vw,90px)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q720 -10 1440 40 V160 H0Z' fill='%23fff8e9'/%3E%3C/svg%3E")!important}

/* (ب) مروحة ورق: البلاطات زي ورق لعب مفروش بإيد، متداخلة شوي ومايلة حوالين نقطة وحدة تحت */
html.tvb body #top.hero .wrap.tiles{gap:0!important;padding-top:calc(var(--tw)*.5)!important}
html.tvb body #top.hero .wrap.tiles .tile{margin-inline:calc(var(--tw)*-.04)!important;border-radius:clamp(22px,2.2vw,40px)!important;height:calc(var(--th) + clamp(70px,6vw,110px))!important;
  transform-origin:50% 240%!important;transform:rotate(calc((2.5 - var(--p)) * 4deg))!important;outline:clamp(3px,.3vw,5px) solid #fff8e9!important;outline-offset:-1px!important}
html.tvb body #top.hero .wrap.tiles .t-det,html.tvb body #top.hero .wrap.tiles .t-kids{z-index:1}
html.tvb body #top.hero .wrap.tiles .t-maf,html.tvb body #top.hero .wrap.tiles .t-stu{z-index:2}
html.tvb body #top.hero .wrap.tiles .t-play,html.tvb body #top.hero .wrap.tiles .t-buy{z-index:3}
html.tvb body #top.hero .wrap.tiles a.tile:hover{translate:0 -14px;z-index:5}

/* (ج) تركيبة: البلاطتين الرئيسيات طوال بالنص، والألعاب الأربع مربعات صغيرة فوق بعض على الجنبين */
html.tvc body #top.hero .wrap.tiles{display:grid!important;align-items:end!important;grid-template-columns:1fr 1.25fr 1.25fr 1fr!important;grid-template-rows:auto auto!important;gap:clamp(10px,1vw,16px)!important;
  width:min(900px,70vw)!important;margin-inline:auto!important;padding:calc(var(--tw)*.3) 0 0!important;--tw:clamp(110px,9.6vw,180px);--th:calc(var(--tw)*.78)}
html.tvc body #top.hero .wrap.tiles .tile{transform:none!important;width:auto!important;border-radius:clamp(18px,1.8vw,30px)!important;height:var(--th)!important;padding:0!important;justify-content:center!important}
html.tvc body #top.hero .wrap.tiles .t-det{grid-column:1;grid-row:1}
html.tvc body #top.hero .wrap.tiles .t-maf{grid-column:1;grid-row:2}
html.tvc body #top.hero .wrap.tiles .t-play{grid-column:2;grid-row:1/3;align-self:end;height:calc(var(--th)*2 + clamp(10px,1vw,16px) + clamp(30px,3vw,56px))!important;padding-top:0!important}
html.tvc body #top.hero .wrap.tiles .t-buy{grid-column:3;grid-row:1/3;align-self:end;height:calc(var(--th)*2 + clamp(10px,1vw,16px) + clamp(30px,3vw,56px))!important;padding-top:0!important}
html.tvc body #top.hero .wrap.tiles .t-stu{grid-column:4;grid-row:1}
html.tvc body #top.hero .wrap.tiles .t-kids{grid-column:4;grid-row:2}
html.tvc body #top.hero .wrap.tiles .t-maf,html.tvc body #top.hero .wrap.tiles .t-kids{border-radius:clamp(18px,1.8vw,30px) clamp(18px,1.8vw,30px) 0 0!important;height:calc(var(--th) + clamp(30px,3vw,56px))!important}
html.tvc body #top.hero .wrap.tiles .t-play,html.tvc body #top.hero .wrap.tiles .t-buy{border-radius:clamp(18px,1.8vw,30px) clamp(18px,1.8vw,30px) 0 0!important}
html.tvc body #top.hero .wrap.tiles .tile .wm.kl{height:100%!important}
html.tvc body #top.hero .wrap.tiles .tile .wm.kl .jw img{width:calc(var(--tw)*.4)!important}
html.tvc body #top.hero .wrap.tiles img.lb-kids{width:calc(var(--tw)*.36)!important}
html.tvc body #top.hero .wrap.tiles img.lb-students{width:calc(var(--tw)*.6)!important}
html.tvc body #top.hero .wrap.tiles .t-maf img.mw{width:calc(var(--tw)*.56)!important}
html.tvc body #top.hero .wrap.tiles .tile b.tt{height:100%!important}
html.tvc body #top.hero .wrap.tiles img.lb-create,html.tvc body #top.hero .wrap.tiles img.lb-buy{width:calc(var(--tw)*.62)!important}
html.tvc body #top.hero .wrap.tiles .t-play .pb,html.tvc body #top.hero .wrap.tiles .t-buy .bpl{top:calc(var(--tw)*-.15)!important}
html.tvc body #top.hero .curve{height:clamp(46px,5vw,90px)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q720 -10 1440 40 V160 H0Z' fill='%23fff8e9'/%3E%3C/svg%3E")!important}
}
/* (أ) إصلاح: محتوى البلاطات الصغيرة بيضل فوق الأرض البيضا وما بينقص */
@media(min-width:701px){
html.tva body #top.hero .wrap.tiles .t-det,html.tva body #top.hero .wrap.tiles .t-kids{--up:calc(var(--tw)*.08)}
html.tva body #top.hero .wrap.tiles .tile{padding-top:calc(var(--tw)*.2)!important}
html.tva body #top.hero .wrap.tiles .t-play,html.tva body #top.hero .wrap.tiles .t-buy{padding-top:calc(var(--tw)*.16)!important}
html.tva body #top.hero .wrap.tiles .tile .wm.kl{height:auto!important;justify-content:flex-start!important;gap:calc(var(--tw)*.03)!important}
html.tva body #top.hero .wrap.tiles .tile .wm.kl .jw img{width:calc(var(--tw)*var(--k)*.46)!important}
html.tva body #top.hero .wrap.tiles img.lb-kids{width:calc(var(--tw)*var(--k)*.46)!important}
html.tva body #top.hero .wrap.tiles img.lb-students{width:calc(var(--tw)*var(--k)*.74)!important}
html.tva body #top.hero .wrap.tiles .t-maf img.mw{width:calc(var(--tw)*var(--k)*.7)!important}
html.tva body #top.hero .wrap.tiles .t-det .hn{font-size:calc(var(--tw)*var(--k)*.2)!important}
html.tva body #top.hero .wrap.tiles .tile .soon{top:calc(var(--tw)*.05)!important}
}
/* الواجهة على الجوال بالعرض: كل البنر بيساع الشاشة والبلاطات الست بسطر واحد */
@media (orientation:landscape) and (max-height:520px){
  html body #top.hero,html body #top.hero[data-th]{min-height:0!important;padding-top:10px!important}
  html body #top.hero h1.wm{width:clamp(70px,20vh,120px)!important;height:clamp(70px,20vh,120px)!important;margin-top:0!important}
  html body #top.hero p.wel{font-size:clamp(.85rem,4.6vh,1.15rem)!important;margin-top:4px!important;padding:0 12px!important}
  html body #top.hero p.meta{font-size:clamp(.72rem,3.6vh,.92rem)!important;margin-top:2px!important}
  html body #top.hero .wrap.tiles{--tw:min(calc((100vw - 110px)/6.9),23vh)!important;flex-wrap:nowrap!important;gap:10px!important;padding:calc(var(--tw)*.32) 12px 0!important;margin-top:4px!important}
  html.tva body #top.hero .wrap.tiles .tile{order:var(--o)!important}
  html body #top.hero .wrap.tiles .t-det{--o:0}html body #top.hero .wrap.tiles .t-maf{--o:1}html body #top.hero .wrap.tiles .t-play{--o:2}
  html body #top.hero .wrap.tiles .t-buy{--o:3}html body #top.hero .wrap.tiles .t-stu{--o:4}html body #top.hero .wrap.tiles .t-kids{--o:5}
  html body #top.hero .curve{position:absolute!important;height:clamp(30px,8vh,50px)!important;margin:0!important}
}