/* ══════════════════════════════════════════════════════════
   ثيم «السماء المضيئة» — تجربة محلّية
   مستوحًى من صور المالك: أزرقٌ عميق تتموّج فوقه أشرطةُ ضوءٍ سماويّة
   بعمقٍ ثلاثيّ، وبطاقاتٌ زجاجيّة بحوافّ مضيئة.
   يُحمَّل آخرَ الأنماط فيغلبها. للرجوع للثيم السابق: احذف سطر
   ربطه في index.html — ولا شيء غيره يعتمد عليه.
   ══════════════════════════════════════════════════════════ */
:root{
  /* أغمق درجةً بطلب المالك — الوهج باقٍ، والأرضيّة أعمق */
  --sky-0:#020b26;
  --sky-1:#051a4d;
  --sky-2:#0a3585;
  --sky-glow:#52ccff;
  --sky-ice:#b4ecff;

  --brand-purple:#5a8cff;
  --brand-cyan:#52ccff;
  --brand-gold:#b4ecff;
  --brand-gradient:linear-gradient(135deg,#3d7dff 0%,#45c2ff 55%,#b4ecff 100%);

  --bg:#030d2a;
  --bg-2:#051640;
  --surf:#07204f;
  --surf-2:#0a2860;
  --panel:rgba(110,195,255,.07);
  --panel-2:rgba(110,195,255,.11);
  --panel-3:rgba(110,195,255,.17);
  --line:rgba(90,190,255,.24);
  --line-2:rgba(130,220,255,.46);

  --txt:#f0f8ff;
  --dim:#b8d3f0;
  --dim-2:#90b3da;

  --star:#9fe0ff;
  --p1:#3d8bff;
  --p2:#38c6ff;
  --p3:#86d9ff;
  --ok:#62e3cf;
  --acc:var(--p3);

  --shadow:0 14px 34px rgba(1,8,34,.55);
  --shadow-sm:0 4px 14px rgba(1,8,34,.4);
}

body{background:var(--sky-0)}

/* الواجهة العامّة وبوّابة الدخول طبقتان فوق التطبيق نفسه، فلا تكونان
   شفّافتين (يظهر التطبيق من تحتهما). تحملان السماءَ نفسها معتمةً:
   قلبٌ أزرق مضيء وشريطا ضوءٍ سماويّان أعلى وأسفل. */
.landing,.authgate,#bootveil{
  background:
    radial-gradient(120% 22% at 30% 0%, rgba(120,215,255,.34), transparent 70%),
    radial-gradient(110% 18% at 80% 4%, rgba(70,170,255,.30), transparent 72%),
    radial-gradient(120% 22% at 70% 100%, rgba(120,215,255,.30), transparent 70%),
    radial-gradient(100% 18% at 15% 96%, rgba(70,170,255,.26), transparent 72%),
    radial-gradient(70% 55% at 50% 42%, rgba(46,140,255,.36), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, var(--sky-2) 0%, var(--sky-1) 48%, var(--sky-0) 100%) !important;
  background-attachment:fixed !important;
}
.ld-nav{background:rgba(6,30,82,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ld-hero::before{
  background:
    radial-gradient(closest-side,rgba(80,190,255,.22),transparent 70%),
    radial-gradient(closest-side at 70% 40%,rgba(160,230,255,.12),transparent 70%);
}
.ld-hero h1 span{
  background:linear-gradient(90deg,#7fd6ff,#d6f4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ld-step,.ld-g,.ld-p,.ld-ph,.ag-card{
  background:linear-gradient(155deg,rgba(40,110,230,.26),rgba(8,30,86,.6));
  border-color:rgba(110,210,255,.42);
  box-shadow:inset 0 0 0 1px rgba(150,230,255,.1),0 0 18px rgba(60,170,255,.2);
}

/* ── الخلفية: قلبٌ أزرق مضيء وأطرافٌ أعمق ── */
#bgfx{
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(46,140,255,.36), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, var(--sky-2) 0%, var(--sky-1) 48%, var(--sky-0) 100%);
  perspective:1100px;
}
/* المشهد كلّه يميل ببطء في الفضاء — عمقٌ ثلاثيّ بلا WebGL */
#bgfx .sky-3d{
  position:absolute;inset:-7%;
  transform-style:preserve-3d;will-change:transform;
  animation:skyTilt 32s ease-in-out infinite alternate;
}
#bgfx .sky-waves{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#bgfx .sky-waves path{fill:none;stroke-linecap:round}
#bgfx .sky-waves .fill{stroke:none}
#bgfx .sky-top{animation:skyFloat 14s ease-in-out infinite alternate;transform-origin:50% 0}
#bgfx .sky-bot{animation:skyFloat 18s ease-in-out infinite alternate-reverse;transform-origin:50% 100%}
#bgfx .sky-dust circle{fill:var(--sky-ice);animation:skyTwinkle 4.2s ease-in-out infinite alternate}
#bgfx .sky-dust circle:nth-child(3n){animation-duration:6.5s}
#bgfx .sky-dust circle:nth-child(4n+1){animation-delay:-2.1s}
#bgfx .sky-dust circle:nth-child(5n+2){animation-delay:-3.4s}

@keyframes skyTilt{
  from{transform:rotateX(9deg) rotateY(-5deg) translateZ(0)}
  to  {transform:rotateX(-5deg) rotateY(6deg) translateZ(46px)}
}
@keyframes skyFloat{
  from{transform:translateY(0) scaleY(1)}
  to  {transform:translateY(16px) scaleY(1.09)}
}
@keyframes skyTwinkle{from{opacity:.12}to{opacity:.95}}

/* أثناء اللعب تهدأ الخلفية فلا تنافس المسرح ولا تأكل من إطارات اللعبة */
body.playing #bgfx .sky-3d,
body.playing #bgfx .sky-top,
body.playing #bgfx .sky-bot,
body.playing #bgfx .sky-dust circle{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  #bgfx .sky-3d,#bgfx .sky-top,#bgfx .sky-bot,#bgfx .sky-dust circle{animation:none}
}

/* ── الأسطح: زجاجٌ أزرق بحافّةٍ مضيئة ── */
#topbar,#toolrail{
  background:rgba(8,36,92,.55);
  border-color:var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(90,190,255,.08),0 8px 30px rgba(1,10,40,.35);
}
#stageBar,#rail,#chatPanel,#gdock,.modal-box{
  background:linear-gradient(160deg,rgba(14,58,140,.74),rgba(5,24,70,.86));
  border-color:var(--line-2);
  box-shadow:inset 0 0 0 1px rgba(120,215,255,.1),0 0 26px rgba(40,150,255,.18),var(--shadow);
}
body:not(.playing) #stage{
  /* الهدهد نفسه — شعار الزاوية — كبيراً شفّافاً خلف بطاقات الألعاب */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a97bff'/%3E%3Cstop offset='.5' stop-color='%2331e1ff'/%3E%3Cstop offset='1' stop-color='%23ffd76e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' opacity='.17'%3E%3Cpath d='M31 33 L36 11 L43 27 L50 7 L57 27 L64 11 L69 33 Z'/%3E%3Ccircle cx='50' cy='46' r='16.5'/%3E%3Cpath d='M50 60 q-23 5 -27 31 q27 5 41 -13 q10 -13 6 -23z'/%3E%3Cpath d='M65 45 L95 53 L65 51 Z'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat center 58% / min(62%, 640px) auto,
    linear-gradient(160deg,rgba(12,50,125,.22),rgba(3,14,44,.5));
  border-color:rgba(110,210,255,.35);
  box-shadow:inset 0 0 0 1px rgba(120,220,255,.08),0 0 44px rgba(40,150,255,.16);
}

/* بطاقات الألعاب: لوحُ زجاجٍ بحافّةٍ سماويّة تتوهّج عند المرور */
.gcard{
  background:linear-gradient(155deg,rgba(34,95,205,.24),rgba(5,20,62,.74) 60%,rgba(60,80,200,.2));
  border:1px solid rgba(110,210,255,.5);
  box-shadow:inset 0 0 0 1px rgba(150,230,255,.12),0 0 18px rgba(60,170,255,.26),0 10px 28px rgba(1,10,40,.45);
}
.gcard:hover{
  border-color:rgba(170,238,255,.92);
  box-shadow:inset 0 0 0 1px rgba(170,240,255,.25),0 0 32px rgba(80,200,255,.5),0 14px 34px rgba(1,10,40,.5);
}
.btn-primary,.gc-go{color:#04163d}

/* ── شعار الموقع في أعلى الشريط أكبر ── */
#toolrail .brand-logo{width:52px;height:52px;border-radius:17px;padding:7px}
#toolrail .brand-text b{font-size:14px}

/* ── بطاقات الألعاب أكبر في الواجهة ── */
.home-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
.gcard{padding:20px 20px 16px;gap:8px;border-radius:22px;min-height:196px}
.gcard.has-cover{padding:0;min-height:0}
.gc-orb{width:70px;height:70px;border-radius:22px}
.gc-orb .emo{font-size:36px}
.gc-b{font-size:19px}
.gc-d{font-size:13.5px}
.gc-go{font-size:13px}
@media(max-width:640px){
  .home-grid{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:11px}
  .gc-orb{width:58px;height:58px}
  .gc-b{font-size:16px}
}

/* ── القنبلة الموقوتة بثوب السماء ──
   كانت بنفسجيّةً داكنة. نفس ترتيبها ونفس الأحجام، بألوان الثيم:
   ساحةٌ زرقاء مضيئة، أزرارٌ زجاجيّة بحوافّ سماويّة، وقنبلةٌ زرقاء. */
body:has(#stage.bomb-memory-active) #stageWrap{background:var(--sky-0)!important}
body:has(#stage.bomb-memory-active) #toolrail,
body:has(#stage.bomb-memory-active) #stageBar{background:rgba(5,26,72,.94)!important}
.bm-game{background:var(--sky-0)}
.memory-arena{background:radial-gradient(ellipse at 50% 38%,#1b5fd0 0,#0b3486 38%,#061c52 72%,#031338 100%)}
.memory-arena:before{border-color:rgba(120,215,255,.2);
  box-shadow:0 0 0 45px rgba(80,190,255,.03),0 0 0 46px rgba(120,215,255,.13),0 0 0 90px rgba(80,190,255,.03),0 0 0 91px rgba(120,215,255,.08)}
.bm-game .game-top,.bm-game .game-footer{background:rgba(6,30,82,.78);border-color:var(--line-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bm-game .game-stats b{color:#9fe0ff}
.bm-game .memory-pad{
  background:linear-gradient(150deg,rgba(40,110,230,.4),rgba(8,30,86,.8));
  border:1px solid rgba(110,210,255,.5);
  box-shadow:inset 0 0 0 1px rgba(150,230,255,.12),0 0 16px rgba(60,170,255,.22),0 5px 0 #041540}
.bm-game .memory-pad:hover:enabled{background:linear-gradient(150deg,rgba(70,150,255,.52),rgba(12,40,110,.82))}
.bm-game .memory-pad.lit{background:linear-gradient(150deg,rgba(90,180,255,.58),rgba(20,60,150,.88));
  box-shadow:0 0 30px color-mix(in srgb,var(--symbol) 60%,transparent),0 4px 0 #041540}
.memory-pad b{color:#dff3ff}
.memory-bomb{filter:drop-shadow(0 0 30px rgba(80,190,255,.35)) drop-shadow(0 24px 24px rgba(1,10,40,.6))}
.memory-bomb.lit{filter:drop-shadow(0 0 36px rgba(120,220,255,.7))}
.memory-bomb #body-shade stop:nth-child(1){stop-color:#5aa6ff}
.memory-bomb #body-shade stop:nth-child(2){stop-color:#1f58b8}
.memory-bomb #body-shade stop:nth-child(3){stop-color:#0a2458}
.memory-bomb #rim-shade stop:nth-child(1){stop-color:#b4ecff}
.memory-bomb #rim-shade stop:nth-child(2){stop-color:#3d7dff}
.memory-bomb svg path[stroke="#b39dcc"]{stroke:#8fd8ff}
.memory-bomb svg path[stroke="#e4b6dc"]{stroke:#ffe38a}
.memory-bomb svg rect{fill:#6fb6ff}
.memory-bomb svg ellipse{fill:#d6f4ff}
.memory-bomb svg circle[fill="#171c31"]{fill:#041540;stroke:#52ccff}
.memory-bomb svg circle[stroke="#bf9add"]{stroke:#8fe0ff}
.memory-bomb svg path[stroke="#9380b1"]{stroke:#52ccff}
.bomb-display b{color:#eaf7ff}
.bomb-display small{color:#a9d8ff}
.memory-headline h2{color:#eef9ff;text-shadow:0 0 22px rgba(90,200,255,.45)}
.memory-progress i{border-color:#6fc6ff;background:#0a2a66}
.memory-progress i.done{background:#8fe0ff;box-shadow:0 0 12px #52ccff}
.memory-progress i.active{border-color:#d6f4ff}
.memory-timer{background:rgba(120,210,255,.15)}
.memory-timer i{background:linear-gradient(90deg,#3d7dff,#52ccff,#b4ecff)}
.bm-game .primary{background:var(--brand-gradient);color:#04163d;border-color:rgba(180,236,255,.6)}
.memory-paused,.memory-arena .event{background:rgba(3,20,60,.9)}
.bm-game .event h2{color:#9fe0ff}
.bm-game .bm-mini.current{border-color:#52ccff}

/* ══ بطاقات الألعاب: أعرض قليلاً وحوافٌّ أجمل ══
   • هامشُ الصفحة الجانبيّ أضيق والفراغ بين البطاقات أقلّ ⇒ كلُّ بطاقةٍ أعرض
     دون أن ينقص عدد الأعمدة.
   • حدٌّ متدرّج مضيء (فاتحٌ في الركن ويخفت في الوسط) بدل الخطّ الواحد.
   • الصورة داخل البطاقة بإطارٍ داخليّ وزوايا مدوّرة — كلوحٍ زجاجيّ يحمل صورة.
   • عند المرور: ترتفع البطاقة ويشتدّ وهجها. */
.home{padding-inline:14px}
.home-grid{gap:14px}

.gcard{
  border-radius:24px;
  border-color:transparent;
  /* زجاجٌ شفّاف: الهدهدُ الكبير خلف الألعاب يُرى من خلال البطاقات */
  background:
    linear-gradient(180deg,rgba(120,210,255,.08),transparent 38%),
    linear-gradient(155deg,rgba(30,85,190,.16),rgba(4,16,52,.3) 62%,rgba(50,70,190,.12));
  box-shadow:
    inset 0 1px 0 rgba(190,240,255,.16),
    0 0 22px rgba(50,160,255,.16),
    0 12px 30px rgba(1,8,32,.55);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, filter .28s;
}
.gcard::before{
  opacity:1;padding:1.5px;
  background:linear-gradient(150deg,
    rgba(170,235,255,.95) 0%, rgba(82,204,255,.35) 22%,
    rgba(40,110,230,.12) 50%, rgba(82,204,255,.3) 78%, rgba(150,225,255,.85) 100%);
}
.gcard:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(210,245,255,.28),
    0 0 36px rgba(80,200,255,.42),
    0 18px 38px rgba(1,8,32,.6);
}
.gcard:hover::before{
  background:linear-gradient(150deg,
    #d6f4ff 0%, rgba(110,220,255,.7) 25%, rgba(60,150,255,.3) 50%,
    rgba(110,220,255,.6) 75%, #c2eeff 100%);
}

/* الصورة لوحٌ داخل البطاقة */
.gcard.has-cover .gc-cover{
  margin:8px 8px 0;border-radius:18px;position:relative;
  box-shadow:0 0 0 1px rgba(150,225,255,.28), 0 8px 20px rgba(0,0,0,.4);
}
.gcard.has-cover .gc-cover::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 22%);
}
.gcard.has-cover .gc-foot{padding:10px 10px 10px;gap:8px}

/* «العب» و«؟» بثوب البطاقة */
.gcard .gc-go{
  border-radius:14px;color:#04163d;
  background:linear-gradient(135deg,#5fb8ff,#7fdcff 55%,#c6f1ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px rgba(40,150,255,.3);
}
.gcard:hover .gc-go{color:#04163d;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px rgba(60,180,255,.45)}
.gcard .gc-how{
  border-radius:14px;color:#cfeeff;
  background:rgba(120,210,255,.1);border:1px solid rgba(130,215,255,.38);
}
.gcard.maint .gc-go{background:rgba(255,215,110,.12);color:#ffd76e;box-shadow:none}

/* ══ صفحة الحساب ونوافذ الموقع — أغمق، وبنفس روح صفحة الألعاب ══
   كانت النافذة زرقاء فاتحة. صارت كصفحة الألعاب: أرضيّةٌ كحليّة عميقة،
   الهدهدُ شفّافاً في خلفيتها، حدٌّ مضيء، وخاناتٌ زجاجيّة كبطاقات الألعاب. */
.modal-back{background:rgba(1,6,22,.8)}
.modal-box{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a97bff'/%3E%3Cstop offset='.5' stop-color='%2331e1ff'/%3E%3Cstop offset='1' stop-color='%23ffd76e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' opacity='.07'%3E%3Cpath d='M31 33 L36 11 L43 27 L50 7 L57 27 L64 11 L69 33 Z'/%3E%3Ccircle cx='50' cy='46' r='16.5'/%3E%3Cpath d='M50 60 q-23 5 -27 31 q27 5 41 -13 q10 -13 6 -23z'/%3E%3Cpath d='M65 45 L95 53 L65 51 Z'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat center 62% / min(78%, 440px) auto,
    radial-gradient(90% 45% at 50% 0%, rgba(46,140,255,.16), transparent 70%),
    linear-gradient(165deg,#061a48 0%,#030d2a 72%);
  border:1px solid rgba(110,210,255,.34);
  box-shadow:inset 0 1px 0 rgba(190,240,255,.14), 0 0 44px rgba(50,160,255,.2), 0 30px 90px rgba(0,4,20,.8);
}
.modal-x{background:rgba(120,210,255,.08);border-color:rgba(130,215,255,.3);color:#cfeeff}

/* خانات الحساب زجاجٌ داكن كبطاقات الألعاب */
.acct .ac-s,.acct .ac-g,.acct .ac-r,.acct .cfg-card,.acct .tb-c{
  background:linear-gradient(155deg,rgba(30,85,190,.2),rgba(4,16,52,.72));
  border:1px solid rgba(110,210,255,.26);
  box-shadow:inset 0 1px 0 rgba(190,240,255,.08);
}
.acct .ac-s b{color:#eaf7ff;text-shadow:0 0 16px rgba(90,200,255,.35)}
.acct .ac-av{box-shadow:0 0 0 2px rgba(130,215,255,.45),0 0 22px rgba(60,170,255,.3)}
.acct .ac-tabs{background:rgba(4,16,52,.7);border:1px solid rgba(110,210,255,.2)}
.acct .ac-t{color:var(--dim-2)}
.acct .ac-t:hover{color:#dff3ff}
.acct .ac-t.on{color:#04163d;background:linear-gradient(135deg,#5fb8ff,#7fdcff 55%,#c6f1ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 14px rgba(40,150,255,.3)}
.modal-box input,.modal-box select,.modal-box textarea{
  background:rgba(2,10,34,.75);border-color:rgba(110,210,255,.26);color:var(--txt)}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus{border-color:rgba(130,220,255,.6)}

/* صفحة «ملفّي» (/me.html) بالثوب نفسه */
body.vw-body{
  background:
    radial-gradient(120% 22% at 30% 0%, rgba(120,215,255,.22), transparent 70%),
    radial-gradient(70% 55% at 50% 42%, rgba(46,140,255,.26), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, var(--sky-2) 0%, var(--sky-1) 48%, var(--sky-0) 100%) fixed;
}
.vw-card,.vw-hero{
  background:linear-gradient(155deg,rgba(30,85,190,.22),rgba(4,16,52,.8));
  border:1px solid rgba(110,210,255,.3);
  box-shadow:inset 0 1px 0 rgba(190,240,255,.12),0 0 26px rgba(50,160,255,.14),0 14px 34px rgba(1,8,32,.55);
}
.vw-s,.vw-bcard,.vw-r{background:rgba(4,16,52,.6);border-color:rgba(110,210,255,.22)}
.vw-btn{color:#04163d;background:linear-gradient(135deg,#5fb8ff,#7fdcff 55%,#c6f1ff)}
.vw-back{border-color:rgba(130,215,255,.3);background:rgba(120,210,255,.08)}

/* ══ الواجهة الرئيسية: «الصفوف» ══
   لعبةٌ مميّزة ضخمة بخلفية صورتها، ثم صفٌّ أفقيّ لكل نوع يُسحب بالعرض. */
.home-grid.home-rows{display:block}
.home-rows .gcard{animation:none}

.hr-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  min-height:340px;padding:36px 42px;margin:0 0 28px;border-radius:26px;
  background:#020a24;
  box-shadow:inset 0 0 0 1px rgba(130,215,255,.3),0 0 44px rgba(50,160,255,.16),0 22px 50px rgba(0,4,20,.6);
}
.hr-bg{position:absolute;inset:-50px;z-index:-2;background-size:cover;background-position:50% 35%;
  filter:blur(22px) brightness(.5) saturate(1.3)}
.hr-fade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(2,8,30,.25),rgba(2,8,30,.93) 58%),
  linear-gradient(0deg,rgba(2,8,30,.55),transparent 45%)}
.hr-txt{max-width:580px;display:flex;flex-direction:column;gap:12px}
.hr-eyebrow{align-self:flex-start;font-size:13px;font-weight:900;color:#03163d;padding:5px 14px;border-radius:30px;
  background:linear-gradient(135deg,#5fb8ff,#a8e6ff);box-shadow:0 4px 14px rgba(40,150,255,.3)}
/* عنوان اللعبة المميّزة h2 لا h1: عنوان الصفحة الوحيد لمحرّكات البحث في الصفحة العامّة */
.hr-txt .hr-title{margin:0;font-size:clamp(34px,4.4vw,60px);font-weight:900;line-height:1.08;letter-spacing:-.5px;
  text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hr-txt p{font-size:16px;line-height:1.8;color:#c9dcf5;max-width:520px}
.hr-btns{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.hr-play,.hr-how{font-family:inherit;cursor:pointer;border-radius:15px;transition:transform .2s,box-shadow .2s}
.hr-play{padding:13px 28px;border:0;font-size:16px;font-weight:900;color:#03163d;
  background:linear-gradient(135deg,#5fb8ff,#7fdcff 55%,#c6f1ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px rgba(40,150,255,.4)}
.hr-play:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 32px rgba(60,180,255,.55)}
.hr-how{padding:13px 20px;font-size:15px;font-weight:800;color:#dff3ff;
  background:rgba(120,210,255,.08);border:1px solid rgba(130,215,255,.4)}
.hr-how:hover{background:rgba(120,210,255,.16)}
.hr-art{flex:none;width:clamp(200px,23vw,290px);border-radius:22px;overflow:hidden;transform:rotate(-3deg);
  box-shadow:0 0 0 1px rgba(150,225,255,.45),0 0 44px rgba(80,190,255,.35),0 18px 40px rgba(0,0,0,.55)}
.hr-art img{display:block;width:100%}

.hr-row{margin:0 0 26px}
.hr-rowh{display:flex;align-items:baseline;gap:10px;margin:0 4px 10px}
.hr-rowh b{font-size:22px;font-weight:900}
.hr-rowh small{font-size:13px;color:var(--dim-2);font-weight:700}
.hr-rowh i{font-style:normal;margin-inline-start:auto;font-size:12px;font-weight:800;color:#9fe0ff;
  padding:2px 11px;border-radius:20px;background:rgba(82,204,255,.12)}
.hr-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,19vw,262px);gap:14px;
  overflow-x:auto;padding:8px 4px 14px;scroll-snap-type:x proximity;
  /* ── شريطُ التمرير يُرى ──
     كان خيطاً شفّافاً بلون السماء على خلفيّةٍ سماويّة، فلا يكاد يُفرَّق
     عنها: يقف الناسُ أمام صفٍّ فيه ألعابٌ أكثر ممّا يظهر ولا يعرفون
     أنّه يُمرَّر. فصار مجراه أسودَ صريحاً وإبهامُه فاتحاً فوقه. */
  scrollbar-width:auto;scrollbar-color:#a9e4ff #05070f;
}
.hr-strip::-webkit-scrollbar{height:12px}
.hr-strip::-webkit-scrollbar-track{
  background:#05070f;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
}
.hr-strip::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d8f2ff,#63c8ff);
  border:2px solid #05070f;border-radius:999px;
  box-shadow:0 0 8px rgba(99,200,255,.45);
}
.hr-strip::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff,#8fdcff)}
.hr-strip .gcard{scroll-snap-align:start;min-height:0}
/* البطاقات بلا صور بمقاس بطاقة الصورة نفسه (٢٦٢×٣١٧): النسبةُ لا
   الارتفاعُ الثابت، فتصغر معها حين يضيق عمود الصفّ على الشاشات الأصغر */
.hr-strip .gcard:not(.has-cover),
.home-grid:not(.home-rows) .gcard:not(.has-cover){aspect-ratio:262/317}
.hr-strip .gcard:not(.has-cover) .gc-foot,
.home-grid:not(.home-rows) .gcard:not(.has-cover) .gc-foot{margin-top:auto}
/* ══ «الصفوف» على الواجهة كاملة — كما في المسودّة ══
   على الرئيسية وحدها (لا أثناء اللعب) وفي الشاشات العريضة:
   • عمود الأدوات يستلقي شريطاً شفّافاً أعلى الصفحة يميناً، وسطر الاتصال
     يقابله يساراً — كلاهما يطفو فوق اللعبة المميّزة.
   • شريط «اختر لعبة للبدء» وإطار المسرح يختفيان: الصفحة هي المعرض.
   • اللعبة المميّزة تمتدّ من الحافّة إلى الحافّة وتذوب في الخلفية،
     والصفوف تصعد فوق طرفها السفليّ. */
@media(min-width:1100px){
  body:not(.playing):has(#stage[data-game="home"]){padding-inline-start:0 !important}

  body:not(.playing):has(#stage[data-game="home"]) #toolrail{
    position:fixed !important;inset-block:0 auto !important;inset-inline-start:0 !important;inset-inline-end:auto !important;
    width:auto !important;height:72px !important;flex-direction:row !important;align-items:center !important;gap:10px !important;
    padding:0 26px !important;background:transparent !important;border:0 !important;
    box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;z-index:30 !important;
  }
  body:not(.playing):has(#stage[data-game="home"]) #toolrail::after{display:none}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .brand{flex-direction:row !important;width:auto !important;gap:10px;padding:4px 6px}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .brand-logo{width:48px;height:48px}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .brand-text{text-align:start}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .brand-text b{font-size:21px}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .tools,
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .tr-foot{flex-direction:row !important;width:auto !important;margin:0 !important;gap:6px}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail .btn-icon{
    width:40px !important;height:40px !important;border-radius:13px;
    background:rgba(2,10,36,.45);border:1px solid rgba(130,215,255,.22);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  body:not(.playing):has(#stage[data-game="home"]) #toolrail [data-tip]::after{
    left:50%;inset-block-start:calc(100% + 8px);transform:translateX(-50%)}

  body:not(.playing):has(#stage[data-game="home"]) #topbar{
    position:fixed !important;top:0;inset-inline-end:0;inset-inline-start:auto;width:auto;height:72px;
    padding:0 26px !important;background:transparent !important;border:0 !important;
    box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;z-index:30}

  /* سِتارٌ علويّ خفيف يقرأ الأزرار فوق أيّ صورة */
  /* الشريط يبقى مقروءاً والصفحة تُمرَّر من تحته: زجاجٌ داكن مغبّش
     يذوب نحو الأسفل — كانت البطاقات تظهر عاريةً خلف الأيقونات */
  body:not(.playing):has(#stage[data-game="home"]) #layout::before{
    content:'';position:fixed;inset:0 0 auto 0;height:96px;z-index:25;pointer-events:none;
    background:linear-gradient(180deg,rgba(1,5,20,.94) 0%,rgba(1,5,20,.8) 62%,rgba(1,5,20,0) 100%);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);
            mask-image:linear-gradient(180deg,#000 70%,transparent)}

  body:not(.playing):has(#stage[data-game="home"]) #layout{padding:0 !important;gap:0 !important}
  body:not(.playing):has(#stage[data-game="home"]) #stageWrap{gap:0 !important}
  body:not(.playing):has(#stage[data-game="home"]) #stageBar{display:none !important}
  /* المسرح بلا إطار — لكن الهدهدُ الكبير يبقى خلف صفوف الألعاب، ثابتاً
     في مكانه والبطاقاتُ الشفّافة تمرّ فوقه وهي تُسحب */
  body:not(.playing):has(#stage[data-game="home"]) #stage{
    border:0 !important;border-radius:0 !important;box-shadow:none !important;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a97bff'/%3E%3Cstop offset='.5' stop-color='%2331e1ff'/%3E%3Cstop offset='1' stop-color='%23ffd76e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' opacity='.2'%3E%3Cpath d='M31 33 L36 11 L43 27 L50 7 L57 27 L64 11 L69 33 Z'/%3E%3Ccircle cx='50' cy='46' r='16.5'/%3E%3Cpath d='M50 60 q-23 5 -27 31 q27 5 41 -13 q10 -13 6 -23z'/%3E%3Cpath d='M65 45 L95 53 L65 51 Z'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat center 78% / min(52vw, 700px) auto !important}
  body:not(.playing):has(#stage[data-game="home"]) #stage::before{display:none}
  body:not(.playing):has(#stage[data-game="home"]) .home{padding:0 0 30px !important;gap:0 !important}

  body:not(.playing):has(#stage[data-game="home"]) .hr-hero{
    margin:0 0 -64px;border-radius:0;min-height:min(70vh,580px);
    padding:120px 64px 110px;background:transparent;box-shadow:none}
  /* «المجهول» رأسٌ بلونه — بأطرافٍ ذائبة لا بحدٍّ صريح */
  body:not(.playing):has(#stage[data-game="home"]) .hr-myst{
    background:
      radial-gradient(58% 92% at 62% 42%,rgba(255,70,95,.30),transparent 68%),
      radial-gradient(96% 104% at 50% 46%,rgba(126,12,36,.52),transparent 74%),
      radial-gradient(130% 86% at 50% 100%,rgba(48,6,20,.36),transparent 72%) !important;
    box-shadow:none !important}
  body:not(.playing):has(#stage[data-game="home"]) .hr-bg{
    inset:-30px;filter:blur(6px) brightness(.5) saturate(1.25);
    -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
  /* الستار الجانبيّ يذوب نحو الأسفل كالصورة نفسها — كان يُقصّ عند حافّة
     اللعبة المميّزة فيرسم خطّاً فاصلاً فوق الصفوف */
  body:not(.playing):has(#stage[data-game="home"]) .hr-fade{
    background:linear-gradient(90deg,rgba(2,8,30,.1),rgba(2,8,30,.9) 62%);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  /* الطرف السفليّ يذوب في الصفوف فنحتاج بلوغاً رأسيّاً — أمّا عرضاً
     فلا: وهجُ «المجهول» (‎.my-glow‎) أعرضُ من الرأس بـ١٢٠٪ ويمسح
     يميناً ويساراً، فكان يهرب من الرأس ويجرّ صفحةَ الألعاب كلّها
     إلى فراغٍ جانبيّ، ومقدارُه يتغيّر مع الحركة.
     clip تقصّ محوراً واحداً دون أن تجعل الآخر حاويةَ تمرير،
     بخلاف hidden. */
  body:not(.playing):has(#stage[data-game="home"]) .hr-hero{
    overflow-x:clip;overflow-y:visible}
  body:not(.playing):has(#stage[data-game="home"]) .home{scrollbar-width:thin;scrollbar-color:rgba(120,210,255,.25) transparent}
  body:not(.playing):has(#stage[data-game="home"]) .hr-txt .hr-title{font-size:clamp(46px,5vw,72px)}
  body:not(.playing):has(#stage[data-game="home"]) .hr-art{width:clamp(240px,23vw,330px)}
  /* ما بعد اللعبة المميّزة يصعد فوق طرفها الذائب */
  body:not(.playing):has(#stage[data-game="home"]) .hr-hero ~ *{position:relative;z-index:2;margin-inline:40px}
}

/* ══ «أعلى ٣»: لوحة الأبطال جنب اللعبة المميّزة ══ */
.t3b{flex:none;width:clamp(300px,30vw,390px);align-self:center;border-radius:22px;padding:18px;
  display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(155deg,rgba(30,85,190,.22),rgba(2,10,36,.86));
  border:1px solid rgba(110,210,255,.3);
  box-shadow:inset 0 1px 0 rgba(190,240,255,.12),0 0 30px rgba(50,160,255,.16),0 18px 40px rgba(0,4,20,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.t3b h3{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900;margin:0 2px 2px}
.t3b h3 small{margin-inline-start:auto;font-size:11.5px;font-weight:800;color:#03163d;padding:3px 11px;border-radius:20px;
  background:linear-gradient(135deg,#5fb8ff,#a8e6ff)}
/* #topthree يحمل من تصميم الكبسولات عرضاً بقدر محتواه (max-content) —
   والمعرّف يغلب الصنف، فنسمّيهما معاً ليغلب هذا */
#topthree.t3b-list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:9px;width:100%;max-width:none;overflow:visible;padding:0}
/* العرض كاملاً دائماً — كان الصفّ الممتلئ ينكمش إلى مقاس اسمه */
.t3b-list > .t3b-row{width:100%;max-width:none;align-self:stretch;margin:0}
.t3b-row{--rc:#9fe0ff;position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:30px 46px minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:center;column-gap:11px;row-gap:7px;padding:11px 12px;border-radius:16px;
  background:rgba(2,10,36,.6);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 30%,transparent);
  animation:t3bIn .45s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--t3-d,0ms)}
@keyframes t3bIn{from{opacity:0;transform:translateX(-14px)}}
.t3b-row.r1{--rc:#ffd35c;background:linear-gradient(270deg,rgba(255,211,92,.16),rgba(2,10,36,.6));
  box-shadow:inset 0 0 0 1px rgba(255,211,92,.5),0 0 22px rgba(255,211,92,.12)}
.t3b-row.r2{--rc:#d9e3f2}
.t3b-row.r3{--rc:#e0a26a}
/* البنر الملبوس خلف الصفّ، بستارٍ يُبقي الاسم مقروءاً */
.t3b-row.has-ban::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--t3-img) center var(--t3-y,50%)/cover;opacity:.55}
.t3b-row.has-ban::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(2,8,30,.55),rgba(2,8,30,.9))}
.t3b-rk{grid-row:1/3;font-size:22px;font-weight:900;text-align:center;color:var(--rc);
  text-shadow:0 0 14px color-mix(in srgb,var(--rc) 55%,transparent)}
.t3b-av{grid-row:1/3;position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#1c4fb8,#0a2460);box-shadow:0 0 0 2px var(--rc)}
.t3b-av i{position:absolute;font-style:normal;font-weight:900;font-size:18px;color:#eaf7ff}
.t3b-av img{position:relative;width:100%;height:100%;object-fit:cover}
.t3b-nm{min-width:0;font-size:15.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3b-nm small{display:inline-block;margin-inline-start:7px;font-size:10.5px;font-weight:800;color:#bfe9ff;
  padding:1px 7px;border-radius:10px;background:rgba(82,204,255,.14);vertical-align:middle}
.t3b-pt{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--rc)}
.t3b-bar{grid-column:3/5;height:6px;border-radius:6px;background:rgba(120,210,255,.1);overflow:hidden}
/* يمتلئ من اليمين — بداية السطر في العربيّة */
.t3b-bar i{display:block;height:100%;margin-inline-start:0;border-radius:6px;
  background:linear-gradient(270deg,var(--rc),rgba(255,255,255,.85));transition:width .6s cubic-bezier(.2,.9,.3,1)}
.t3b-row.empty{opacity:.55}
.t3b-row.empty .t3b-nm{font-weight:700;color:var(--dim)}
@media(max-width:900px){.t3b{width:100%}}

/* ══ «أعلى ٣»: منصّة التتويج وبطاقات البنرات (قسمٌ عريض تحت اللعبة المميّزة) ══ */
.t3x{margin:0 0 28px}
.t3x .hr-rowh small{font-size:13px;color:var(--dim-2);font-weight:700}
.t3x-av{position:relative;display:grid;place-items:center;border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(135deg,#1c4fb8,#0a2460)}
.t3x-av i{position:absolute;font-style:normal;font-weight:900;color:#eaf7ff}
.t3x-av img{position:relative;width:100%;height:100%;object-fit:cover}
.t3x-nm{font-weight:900;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3x-tier{font-size:11.5px;font-weight:800;color:#bfe9ff;padding:2px 10px;border-radius:20px;background:rgba(82,204,255,.12)}
.t3x-pts{font-weight:900;font-variant-numeric:tabular-nums}
.t3x-pts small{font-size:12px;color:var(--dim);font-weight:700}
@keyframes t3Float{50%{transform:translateY(-6px)}}
@keyframes t3Up{from{opacity:0;transform:translateY(18px)}}

/* منصّة التتويج */
#topthree.t3p-list{display:flex;align-items:flex-end;justify-content:center;gap:18px;width:100%;max-width:none;overflow:visible;padding:0}
.t3p-col{--rc:#9fe0ff;width:clamp(170px,19vw,240px);display:flex;flex-direction:column;align-items:center;
  animation:t3Up .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--t3-d,0ms)}
.t3p-col.r1{--rc:#ffd35c}.t3p-col.r2{--rc:#d9e3f2}.t3p-col.r3{--rc:#e0a26a}
.t3p-who{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:14px;max-width:100%}
.t3p-crown{font-size:28px;animation:t3Float 2.6s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,211,92,.6))}
.t3p-col .t3x-av{width:78px;height:78px;overflow:visible}
.t3p-col .t3x-av i{font-size:30px}
.t3p-col .t3x-av img{border-radius:50%}
.t3p-col.r1 .t3x-av{width:100px;height:100px}
.t3p-col.r1 .t3x-av i{font-size:38px}
.t3p-col .t3x-av::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--rc);box-shadow:0 0 22px var(--rc)}
.t3p-col .t3x-nm{font-size:17px}.t3p-col.r1 .t3x-nm{font-size:21px}
.t3p-block{width:100%;border-radius:20px 20px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 30%,#0a2a66),rgba(2,10,36,.92));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 55%,transparent),inset 0 2px 0 color-mix(in srgb,var(--rc) 80%,#fff),0 0 30px color-mix(in srgb,var(--rc) 22%,transparent)}
.t3p-block b{font-size:44px;font-weight:900;line-height:1;color:var(--rc);text-shadow:0 0 18px color-mix(in srgb,var(--rc) 60%,transparent)}
.t3p-block .t3x-pts{font-size:19px}
.t3p-col.r1 .t3p-block{height:170px}.t3p-col.r2 .t3p-block{height:126px}.t3p-col.r3 .t3p-block{height:98px}
.t3p-col.empty{opacity:.5}

/* بطاقات البنرات */
#topthree.t3n-list{display:grid;grid-template-columns:1fr 1.22fr 1fr;align-items:end;gap:18px;width:100%;max-width:none;overflow:visible;padding:0}
.t3n-card{--rc:#9fe0ff;position:relative;isolation:isolate;overflow:hidden;border-radius:24px;min-height:220px;padding:18px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;
  box-shadow:0 0 0 1.5px var(--rc),0 0 34px color-mix(in srgb,var(--rc) 28%,transparent),0 18px 40px rgba(0,0,0,.5);
  animation:t3Up .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--t3-d,0ms)}
.t3n-card.r1{--rc:#ffd35c;min-height:270px}.t3n-card.r2{--rc:#d9e3f2}.t3n-card.r3{--rc:#e0a26a}
/* خلفيّة البطاقة: بنر اللاعب إن لبس، وإلا تدرّجٌ بلون مركزه */
.t3n-bg{position:absolute;inset:0;z-index:-2;
  background:var(--t3-img,none) center var(--t3-y,50%)/cover,
    linear-gradient(120deg,color-mix(in srgb,var(--rc) 20%,#061a48),color-mix(in srgb,var(--rc) 55%,#0a3585))}
.t3n-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,8,30,.95) 14%,rgba(2,8,30,.15) 72%)}
.t3n-card.r1::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%) 0 0/200% 100%;animation:t3Shine 3.5s linear infinite}
@keyframes t3Shine{to{background-position:-200% 0}}
.t3n-card > *:not(.t3n-bg){position:relative;z-index:1}
/* رقم المركز في الزاوية المقابلة للاسم — كان فوق الصورة في البطاقتين الصغيرتين */
.t3n-rk{position:absolute !important;top:14px;inset-inline-end:14px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  font-size:21px;font-weight:900;color:#03163d;background:var(--rc)}
.t3n-crown{position:absolute !important;top:10px;left:50%;transform:translateX(-50%);font-size:32px;animation:t3Float 2.6s ease-in-out infinite}
.t3n-card .t3x-av{width:60px;height:60px;box-shadow:0 0 0 3px var(--rc)}
.t3n-card .t3x-av i{font-size:24px}
.t3n-card.r1 .t3x-av{width:76px;height:76px}.t3n-card.r1 .t3x-av i{font-size:30px}
.t3n-card .t3x-nm{font-size:19px}.t3n-card.r1 .t3x-nm{font-size:24px}
.t3n-card .t3x-pts{font-size:24px;color:var(--rc)}
.t3n-card.empty{opacity:.5}
@media(max-width:760px){#topthree.t3n-list{grid-template-columns:1fr}.t3p-col{width:31%}}

/* ══ الصفحة العامّة: «جدار الألعاب» ══ */
/* الجدار يمتدّ على عرض الشاشة كاملاً ولو كانت الصفحة محصورة في ١٠٨٠ بكسل */
.landing:has(.ld-wall){overflow-x:hidden}
.landing:has(.ld-wall) .ld-nav{background:linear-gradient(180deg,rgba(2,8,30,.85),rgba(2,8,30,0));
  backdrop-filter:none;-webkit-backdrop-filter:none;z-index:5}
.ld-wall{position:relative;isolation:isolate;overflow:hidden;
  width:100vw;margin:-80px calc(50% - 50vw) 10px;
  min-height:min(88vh,760px);display:grid;place-items:center;text-align:center;padding:120px 24px 70px;
  /* يذوب أسفله في الصفحة بدل أن ينتهي بحافّة */
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.ld-wall-tiles{position:absolute;inset:-14% -8%;z-index:-2;display:grid;grid-template-columns:repeat(7,1fr);gap:16px;
  transform:rotate(-8deg) scale(1.06);opacity:.68;animation:ldWallDrift 60s linear infinite alternate}
.ld-wt{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(130,215,255,.2)}
.ld-wt img{display:block;width:100%;aspect-ratio:720/729;object-fit:cover}
@keyframes ldWallDrift{from{transform:rotate(-8deg) scale(1.06) translateY(0)}to{transform:rotate(-8deg) scale(1.06) translateY(-6%)}}
@media(prefers-reduced-motion:reduce){.ld-wall-tiles{animation:none}}
.ld-wall-veil{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(46% 52% at 50% 50%,rgba(2,8,30,.93) 0%,rgba(2,8,30,.66) 58%,rgba(2,8,30,.18) 100%),
  linear-gradient(0deg,var(--sky-0) 0%,transparent 28%),linear-gradient(180deg,var(--sky-0) 0%,transparent 16%)}
.ld-wall-tx{max-width:980px;display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-wall-tx h1{font-size:clamp(34px,5vw,66px);font-weight:900;line-height:1.12;
  background:none;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.ld-wall-tx h1 span{background:linear-gradient(90deg,#7fd6ff,#e0f7ff);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.ld-wall-tx p{font-size:18px;line-height:1.8;color:#c9dcf5;max-width:640px}
.ld-wall-tx .ld-cta{justify-content:center}
.ld-wall-tx .ld-stats{justify-content:center}
.ld-posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:22px}
.ld-poster{border-radius:18px;overflow:hidden;transition:transform .25s,box-shadow .25s;
  box-shadow:0 0 0 1px rgba(130,215,255,.3),0 10px 24px rgba(0,0,0,.45)}
.ld-poster:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(170,235,255,.7),0 0 30px rgba(80,200,255,.4)}
.ld-poster img{display:block;width:100%;aspect-ratio:720/729;object-fit:cover}
@media(max-width:640px){
  .ld-wall-tiles{grid-template-columns:repeat(4,1fr);gap:10px}
  .ld-posters{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .hr-hero{flex-direction:column;align-items:stretch;padding:24px;min-height:0}
  .hr-art{display:none}
  .hr-strip{grid-auto-columns:170px}
}
::selection{background:#2f7dff;color:#fff}
::-webkit-scrollbar-thumb{background:rgba(120,210,255,.22)}
::-webkit-scrollbar-thumb:hover{background:rgba(120,210,255,.38)}

/* ── صفُّ «تحت التطوير» ──
   لا يراه إلا المالك، وفيه ما يجرّبه على بثّه قبل أن يأذن به للناس.
   يتميّز بلونٍ كهرمانيّ وحافّةٍ جانبيّة، فلا يختلط بصفوف الجاهز. */
.hr-row[data-row="dev"] .hr-rowh{
  position:relative;padding-inline-start:12px;
}
.hr-row[data-row="dev"] .hr-rowh::before{
  content:'';position:absolute;inset-block:2px;inset-inline-start:0;
  width:4px;border-radius:999px;background:linear-gradient(180deg,#ffd166,#ff9f43);
}
.hr-row[data-row="dev"] .hr-rowh b{color:#ffd166}
.hr-row[data-row="dev"] .hr-rowh i{color:#1d1503;background:#ffd166}
.hr-row[data-row="dev"] .hr-strip{
  padding-inline:10px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,209,102,.07),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.16);
}

/* ── بطاقاتُ «تحت التطوير» بنفسجيّةٌ شفّافة ──
   تُميَّز عن الجاهز بلونها لا بموضعها وحده: زجاجٌ بنفسجيّ يُرى منه
   الهدهدُ خلفها، وإطارٌ بنفسجيّ خفيف. وتسري على البطاقة أينما وقعت —
   في صفّ التطوير عند المالك، وفي صفوف الأنواع عند الناس — فلا تختلف
   اللعبةُ الواحدة بين شاشتين. */
.gcard.mine,
.gcard.maint{
  background:
    linear-gradient(180deg,rgba(196,160,255,.10),transparent 38%),
    linear-gradient(155deg,rgba(124,80,220,.17),rgba(22,10,54,.26) 62%,rgba(150,90,235,.12));
  box-shadow:
    inset 0 1px 0 rgba(226,205,255,.16),
    0 0 22px rgba(150,95,240,.16),
    0 12px 30px rgba(12,4,34,.5);
}
.gcard.mine::before,
.gcard.maint::before{
  background:linear-gradient(150deg,
    rgba(226,200,255,.9) 0%, rgba(168,120,255,.34) 22%,
    rgba(96,50,190,.12) 50%, rgba(168,120,255,.3) 78%, rgba(214,186,255,.8) 100%);
}
.gcard.mine:hover,
.gcard.maint:hover{
  box-shadow:
    inset 0 1px 0 rgba(236,220,255,.28),
    0 0 36px rgba(170,110,255,.4),
    0 18px 38px rgba(12,4,34,.58);
}
.gcard.mine:hover::before,
.gcard.maint:hover::before{
  background:linear-gradient(150deg,
    #ecdcff 0%, rgba(190,150,255,.7) 25%, rgba(120,70,215,.3) 50%,
    rgba(190,150,255,.6) 75%, #e2ccff 100%);
}
/* الوسمُ والزرّ يتبعان اللون نفسه */
.gcard.mine .gc-go,
.gcard.maint .gc-go{background:rgba(190,150,255,.14);color:#dcc6ff;box-shadow:none}
.gcard.mine .gc-maint,
.gcard.maint .gc-maint{
  background:rgba(20,8,44,.74);color:#e2ccff;
  border:1px solid rgba(190,150,255,.42);
}
/* صفُّ التطوير كلُّه بنفسجيّ — لا كهرمانيّ */
.hr-row[data-row="dev"] .hr-rowh::before{
  background:linear-gradient(180deg,#d9c2ff,#9b6bff);
}
.hr-row[data-row="dev"] .hr-rowh b{color:#d9c2ff}
.hr-row[data-row="dev"] .hr-rowh i{color:#1a0b33;background:#c9a8ff}
.hr-row[data-row="dev"] .hr-strip{
  background:linear-gradient(180deg,rgba(168,120,255,.07),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(168,120,255,.16);
}

/* ══════════════ «المجهول» — شريطٌ أحمر يعدّ إلى موعده ══════════════
   في رأس شاشة الألعاب قبل اللعبة المميّزة: أحمرُ صريحٌ لا يشبه شيئاً
   في الصفحة، فيقع عليه البصرُ أوّلَ ما تُفتح. */
/* «المجهول» يحلّ محلّ اللعبة المميّزة: يرث .hr-hero مقاسَها وموضعَها،
   ولا يزيد عليها إلا اللونَ الأحمر ووهجَه.

   وأطرافُه تذوب: اللونُ كلُّه تدرّجاتٌ دائريّةٌ تنتهي إلى الشفافية قبل
   أن تبلغ الحافّة — فلا حدَّ صريحٌ يقطعه عن الصفحة كما كان اللوحُ
   المستطيل، وإنّما يخفت حتى يختفي في الخلفية من جهاته الأربع. */
.hr-myst{
  position:relative;overflow:hidden;
  background:
    radial-gradient(58% 92% at 62% 42%,rgba(255,70,95,.30),transparent 68%),
    radial-gradient(96% 104% at 50% 46%,rgba(126,12,36,.52),transparent 74%),
    radial-gradient(130% 86% at 50% 100%,rgba(48,6,20,.36),transparent 72%);
  box-shadow:none;
}
/* خيطٌ أحمر خافتٌ أسفلَه — طرفاه يذوبان مثل اللون */
.hr-myst::after{
  content:'';position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,90,115,.4) 35%,
             rgba(255,90,115,.4) 65%,transparent);
}
/* وهجٌ يمرّ ببطء — يلفت ولا يزعج */
.my-glow{
  position:absolute;inset:-40% -10%;pointer-events:none;
  background:radial-gradient(38% 60% at 50% 50%,rgba(255,120,140,.12),transparent 70%);
  animation:mySweep 7s ease-in-out infinite alternate;
}
@keyframes mySweep{from{transform:translateX(-22%)}to{transform:translateX(22%)}}
.my-side{position:relative;z-index:1;min-width:0}
.my-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 11px;border-radius:999px;
  font-size:11.5px;font-weight:900;color:#ffd9de;
  background:rgba(255,60,85,.2);border:1px solid rgba(255,120,140,.45);
}
.my-dot{
  width:7px;height:7px;border-radius:50%;background:#ff4d68;
  box-shadow:0 0 10px #ff4d68;animation:myPulse 1.4s ease-in-out infinite;
}
@keyframes myPulse{50%{opacity:.35;transform:scale(.72)}}
.my-t{
  margin:10px 0 4px;font-size:clamp(38px,6.4vw,74px);font-weight:900;
  letter-spacing:-1.5px;line-height:1;color:#fff;
  text-shadow:0 4px 30px rgba(255,60,90,.6);
}
.my-s{margin:0 0 16px;font-size:clamp(13px,1.7vw,17px);font-weight:700;color:#ffc9d2}
.my-clock{position:relative;z-index:1;display:flex;gap:clamp(7px,1vw,13px);direction:ltr}
.my-c{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:clamp(62px,7vw,92px);padding:11px 8px 8px;border-radius:16px;
  background:rgba(18,2,8,.55);border:1px solid rgba(255,110,130,.3);
  box-shadow:inset 0 1px 0 rgba(255,200,210,.12);
}
.my-c b{
  font-size:clamp(28px,4.2vw,48px);font-weight:900;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(255,60,90,.5);
}
.my-c i{font-style:normal;font-size:11px;font-weight:800;color:#ffb3c0}
.my-now{
  padding:9px 18px;border-radius:14px;font-size:18px;font-weight:900;color:#2a0410;
  background:linear-gradient(140deg,#ff8ea0,#ff4d68);
}
@media(max-width:820px){
  .my-t{margin:6px 0 2px}
  .my-s{margin-bottom:11px}
  .my-clock{width:100%;justify-content:space-between;gap:6px}
  .my-c{min-width:0;flex:1;padding:7px 3px 6px;border-radius:12px}
}


/* «المجهول» (٢٠٢٦/٠٩/٢٥): كان لونُه الأحمر ينتهي بحدٍّ صريح فوقه وتحته فيبدو «مأكولاً».
   صار اللونُ في طبقةٍ خلفه تذوب أطرافُها العليا والسفلى في لون الصفحة. */
body .hr-myst,body:not(.playing):has(#stage[data-game="home"]) .hr-myst{background:none!important;overflow-x:clip!important;overflow-y:visible!important}
/* الصفحةُ الرئيسيّة تمرّر عموديّاً فقط — كان توهّجُ «المجهول» يمدّها يساراً فتنسحب الشاشة لفراغ مع التمرير */
#stage .home{overflow-x:hidden!important}
.hr-myst::before{content:'';position:absolute;inset:-60px 0 -90px;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 70% at 62% 45%,rgba(255,70,95,.28),transparent 70%),
    radial-gradient(80% 80% at 50% 50%,rgba(126,12,36,.46),transparent 76%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 72%,transparent 100%)}
.hr-myst::after{display:none!important}
.hr-myst > *{position:relative;z-index:1}
.hr-myst .my-glow{position:absolute;z-index:0}

/* ── صفُّ «الألعاب الجديدة» (٢٠٢٦/١٠/٠٤): أوّل الصفحة، بحافّةٍ ذهبيّة ووهجٍ خفيف ── */
.hr-row[data-row="fresh"] .hr-rowh{position:relative;padding-inline-start:12px}
.hr-row[data-row="fresh"] .hr-rowh::before{content:'';position:absolute;inset-block:2px;inset-inline-start:0;width:4px;border-radius:999px;background:var(--star)}
.hr-row[data-row="fresh"] .hr-rowh b{color:var(--star);font-weight:900}
.hr-row[data-row="fresh"] .hr-rowh i{color:var(--bg,#081226);background:var(--star)}
.hr-row[data-row="fresh"] .hr-strip{padding-inline:10px;border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--star) 9%,transparent),transparent 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--star) 22%,transparent)}

/* أبرز شعار اللاعب في «أبطال الليلة» بدل اسم البنر (٢٠٢٦/١٠/٠٥) */
.t3x-tier.t3x-md{font-size:12.5px;font-weight:900;color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.t3x-tier.t3x-md em{font-style:normal;color:var(--star,#ffc94a)}
.t3x-tier.t3x-md.t-b{background:rgba(240,150,80,.18);box-shadow:inset 0 0 0 1px rgba(240,178,122,.5)}
.t3x-tier.t3x-md.t-s{background:rgba(200,215,255,.16);box-shadow:inset 0 0 0 1px rgba(223,231,255,.5)}
.t3x-tier.t3x-md.t-g{background:rgba(255,200,60,.18);box-shadow:inset 0 0 0 1px rgba(255,210,74,.6);color:#ffe9a8}
.t3x-tier.t3x-md.t-l{background:rgba(170,100,255,.22);box-shadow:inset 0 0 0 1px rgba(199,155,255,.65),0 0 12px rgba(170,100,255,.35);color:#ecdcff}
.t3x-tier.t3x-md.t-n{background:rgba(160,255,60,.18);box-shadow:inset 0 0 0 1px rgba(200,255,74,.7),0 0 14px rgba(170,255,60,.4);color:#e6ffb0}

/* مهام اليوم للمتابعين — شريطٌ رفيع هادئ فوق «الألعاب الجديدة» (app.js dqHtml) */
.dq-bar{display:flex;align-items:center;gap:12px;margin:0 4px 18px;padding:9px 14px;border-radius:14px;
  background:rgba(82,204,255,.06);border:1px solid var(--line,rgba(150,225,255,.18));overflow:hidden;white-space:nowrap}
.dq-h{flex:none;font-size:15px;font-weight:900;color:var(--star)}
.dq-ms{display:flex;gap:8px;min-width:0;overflow:hidden}
.dq-m{flex:none;font-size:14px;font-weight:800;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.07)}
.dq-t{margin-inline-start:auto;flex:none;font-size:12.5px;font-weight:700;color:var(--dim-2)}
.dq-t b{color:var(--star);font-weight:900}
@media (max-width:1180px){.dq-t{display:none}}
@media (max-width:760px){.dq-bar{flex-wrap:wrap;white-space:normal}.dq-ms{flex-wrap:wrap}}