/* ==========================================================
   لمّة — الصفحة الرئيسية
   ========================================================== */
:root{
  --suit:#E879F9;          /* الهاند  — زهري */
  --lcd:#A855F7;           /* السنيك  — بنفسجي */
}

body.home{min-height:100dvh;overflow-x:hidden}

/* ---------- الخلفية المحيطة ---------- */
.ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58vw 42vw at 82% -6%,  rgba(34,211,238,.16), transparent 62%),
    radial-gradient(50vw 40vw at 8% 34%,   rgba(232,121,249,.11),  transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(168,85,247,.09), transparent 60%);
}

.home-shell{
  max-width:1080px;margin:0 auto;
  padding:18px 18px 44px;
  display:flex;flex-direction:column;min-height:100dvh;
}

/* ---------- الشريط العلوي ---------- */
.home-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--line);
  background:rgba(10,9,18,.55);backdrop-filter:blur(6px);
}
.pill--act{color:var(--text);text-decoration:none;transition:all .16s ease}
.pill--act:hover{color:var(--bg);background:var(--text);box-shadow:none;text-decoration:none}
.pill .live{width:8px;height:8px}

/* ---------- الهيرو ---------- */
.hero{text-align:center;padding:52px 0 44px}
.kicker{
  font-size:11px;letter-spacing:.34em;color:var(--mute);
  font-weight:700;margin:0 0 18px;
}
.mark{
  margin:0;line-height:.86;
  font-size:clamp(78px,25vw,158px);
  font-weight:700;letter-spacing:.01em;
  color:var(--text);
  text-shadow:0 0 60px rgba(233,233,245,.14);
}
.free{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
}
.free li{
  font-size:11.5px;font-weight:700;color:var(--purple);
  padding:6px 13px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.32);
}

.lede{
  margin:22px auto 0;max-width:400px;
  font-size:clamp(15px,3.6vw,17px);color:var(--mute);line-height:1.75;
}

/* ---------- شبكة الألعاب ---------- */
.games{
  display:grid;gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .games{grid-template-columns:repeat(3,1fr);gap:20px}
}

.gcard{
  position:relative;overflow:hidden;
  border-radius:22px;
  background:linear-gradient(170deg,var(--panel),#100E1C);
  box-shadow:inset 0 0 0 1px var(--line), 0 18px 44px -22px rgba(0,0,0,.7);
  display:flex;flex-direction:column;
  transition:transform .34s cubic-bezier(.2,.8,.3,1), box-shadow .34s ease;
}
.gcard--harf{transform:rotate(-1.2deg)}
.gcard--hand{transform:rotate(.35deg)}
.gcard--snake{transform:rotate(1.4deg)}
.gcard:hover{transform:rotate(0) translateY(-6px)}
.gcard--harf:hover{box-shadow:inset 0 0 0 1px rgba(34,211,238,.45), 0 26px 54px -22px rgba(34,211,238,.28)}
.gcard--hand:hover{box-shadow:inset 0 0 0 1px rgba(232,121,249,.42), 0 26px 54px -22px rgba(232,121,249,.26)}
.gcard--snake:hover{box-shadow:inset 0 0 0 1px rgba(168,85,247,.42), 0 26px 54px -22px rgba(168,85,247,.24)}

/* ---------- منطقة الرسم ---------- */
.gart{
  height:172px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);position:relative;
}
.gcard--harf .gart{background:radial-gradient(70% 100% at 50% 0%, rgba(34,211,238,.13), transparent 70%)}
.gcard--hand .gart{background:radial-gradient(70% 100% at 50% 0%, rgba(232,121,249,.13), transparent 70%)}
.gcard--snake .gart{background:radial-gradient(70% 100% at 50% 0%, rgba(168,85,247,.11), transparent 70%)}

/* حروف تنطفي بالتتابع */
.tiles{display:grid;grid-template-columns:repeat(4,40px);gap:7px}
.tiles span{
  aspect-ratio:1;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Reem Kufi','Tajawal',serif;font-weight:600;font-size:20px;
  background:var(--panel-2);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);
  animation:burn 11s infinite;
}
@keyframes burn{
  0%,4%    {background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
  7%       {background:var(--cyan);color:#0A0912;box-shadow:0 0 18px rgba(34,211,238,.55)}
  12%,74%  {background:#151223;color:#3A3455;box-shadow:inset 0 0 0 1px #252041}
  82%,100% {background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
}
.tiles span:nth-child(1){animation-delay:0s}
.tiles span:nth-child(2){animation-delay:.26s}
.tiles span:nth-child(3){animation-delay:.52s}
.tiles span:nth-child(4){animation-delay:.78s}
.tiles span:nth-child(5){animation-delay:1.04s}
.tiles span:nth-child(6){animation-delay:1.3s}
.tiles span:nth-child(7){animation-delay:1.56s}
.tiles span:nth-child(8){animation-delay:1.82s}
.tiles span:nth-child(9){animation-delay:2.08s}
.tiles span:nth-child(10){animation-delay:2.34s}
.tiles span:nth-child(11){animation-delay:2.6s}
.tiles span:nth-child(12){animation-delay:2.86s}

/* مروحة أوراق */
.fan{display:flex;align-items:center;justify-content:center;height:120px}
.pc{
  width:62px;height:88px;border-radius:9px;
  background:linear-gradient(160deg,#EDEAF7,#D6D0EA);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  margin-inline:-17px;
  transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.pc svg{width:26px;height:26px}
.pc--a{transform:rotate(-15deg) translateY(7px)}
.pc--b{transform:rotate(-5deg)}
.pc--c{transform:rotate(5deg)}
.pc--d{transform:rotate(15deg) translateY(7px)}
.pc--a svg,.pc--d svg{fill:#1A1630}
.pc--b svg,.pc--c svg{fill:var(--suit)}
.gcard--hand:hover .pc--a{transform:rotate(-26deg) translateY(9px) translateX(12px)}
.gcard--hand:hover .pc--b{transform:rotate(-9deg) translateY(-4px)}
.gcard--hand:hover .pc--c{transform:rotate(9deg) translateY(-4px)}
.gcard--hand:hover .pc--d{transform:rotate(26deg) translateY(9px) translateX(-12px)}

/* ---------- جسم الكرت ---------- */
.gbody{padding:20px;display:flex;flex-direction:column;flex:1}
.gbody h2{margin:0 0 9px;font-size:26px;font-weight:700}
.gcard--harf .gbody h2{color:var(--cyan)}
.gcard--hand .gbody h2{color:var(--suit)}
.gcard--snake .gbody h2{color:var(--lcd)}
.gbody>p{margin:0 0 16px;font-size:14px;color:var(--mute);line-height:1.7}

.facts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.facts li{
  font-size:11.5px;font-weight:700;color:var(--mute);
  padding:6px 11px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);
}

.gbody .btn{margin-top:auto}
.gcard--hand{opacity:.9}
.btn--snake{background:var(--lcd);color:#0A0912}
.soon{
  margin-top:auto;text-align:center;
  padding:13px;border-radius:var(--r);
  font-size:14px;font-weight:700;color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--line);
  background:rgba(232,121,249,.06);
}

/* ---------- الدعوة للتسجيل ---------- */
.cta{text-align:center;margin-top:30px}
.cta p{margin:0 0 10px;color:var(--mute);font-size:14px}
.cta .btn{max-width:260px;margin:0 auto}

.home-foot{
  margin-top:auto;padding-top:34px;text-align:center;
  font-size:11px;letter-spacing:.22em;color:#5A567A;font-weight:700;
}

@media (prefers-reduced-motion: reduce){
  .tiles span{animation:none}
  .gcard,.gcard--harf,.gcard--hand{transform:none}
  .gcard:hover{transform:none}
}

/* ---------- السنيك: مسار يزحف ---------- */
.snake{
  display:grid;
  grid-template-columns:repeat(6,18px);
  grid-template-rows:repeat(4,18px);
  gap:5px;
}
.seg{
  border-radius:4px;
  background:rgba(168,85,247,.2);
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.28);
  animation:crawl 2.6s linear infinite;
}
@keyframes crawl{
  0%,72%   {background:rgba(168,85,247,.2);  box-shadow:inset 0 0 0 1px rgba(168,85,247,.28)}
  80%      {background:var(--lcd);           box-shadow:0 0 12px rgba(168,85,247,.55)}
  92%,100% {background:rgba(168,85,247,.2);  box-shadow:inset 0 0 0 1px rgba(168,85,247,.28)}
}
.g1 {grid-area:1/6} .g2 {grid-area:1/5} .g3 {grid-area:1/4}
.g4 {grid-area:1/3} .g5 {grid-area:1/2} .g6 {grid-area:2/2}
.g7 {grid-area:3/2} .g8 {grid-area:3/3} .g9 {grid-area:3/4}
.g10{grid-area:3/5} .g11{grid-area:3/6}
.g1{animation-delay:0s}      .g2{animation-delay:.09s}  .g3{animation-delay:.18s}
.g4{animation-delay:.27s}    .g5{animation-delay:.36s}  .g6{animation-delay:.45s}
.g7{animation-delay:.54s}    .g8{animation-delay:.63s}  .g9{animation-delay:.72s}
.g10{animation-delay:.81s}   .g11{animation-delay:.9s}
.food{
  grid-area:4/6;align-self:center;justify-self:center;
  width:11px;height:11px;border-radius:50%;
  background:var(--lcd);
  animation:bite 2.6s ease-in-out infinite;
}
@keyframes bite{0%,100%{transform:scale(.75);opacity:.5}86%{transform:scale(1.15);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .seg,.food{animation:none}
}