/* Shared animated masthead adapted from the supplied header-swords.html. */
:root{
  --sw-gold-1:#fff6c9;
  --sw-gold-2:#ffd24a;
  --sw-gold-3:#f0a516;
  --sw-gold-4:#b76a09;
}
.swHdr{
  position:relative;
  width:100%;
  max-width:1332px;
  margin-inline:auto;
  overflow:hidden;
  background-image:var(--sw-hdr-img);
  background-repeat:no-repeat;
  background-position:center 42%;
  background-size:cover;
  isolation:isolate;
}
.swHdr--lg{
  aspect-ratio:1332/359;
  --sw-hdr-img:url("/assets/default/img/vip/header-swords-1332x359.png?v=972caf2bfe25");
  --sw-title-size:clamp(26px,5.4vw,72px);
  --sw-title-top:22%;
}
.swHdr--sm{
  aspect-ratio:1280/100;
  --sw-hdr-img:url("/assets/default/img/vip/header-swords-1280x100.png?v=40242ae658cb");
  --sw-title-size:clamp(15px,2.7vw,36px);
  --sw-title-top:50%;
}
.swHdr::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(58% 78% at 50% 30%,rgba(255,238,170,.55),rgba(255,225,140,.22) 38%,rgba(255,255,255,0) 72%);
  animation:swSunBreath 7s ease-in-out infinite;
  pointer-events:none;
}
.swHdr__clouds{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.5;
  background:radial-gradient(120px 34px at 12% 22%,rgba(255,255,255,.95),transparent 70%),radial-gradient(160px 40px at 34% 14%,rgba(255,255,255,.85),transparent 70%),radial-gradient(140px 30px at 68% 26%,rgba(255,255,255,.9),transparent 70%),radial-gradient(190px 44px at 88% 16%,rgba(255,255,255,.8),transparent 70%);
  background-repeat:repeat-x;
  animation:swCloudDrift 60s linear infinite;
  pointer-events:none;
}
.swHdr__dust{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.swHdr__dust i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#fff9d6,rgba(255,214,102,0));animation:swDustFloat linear infinite}
.swHdr__dust-p1{left:9%;animation-duration:13s!important;animation-delay:0s!important}
.swHdr__dust-p2{left:21%;animation-duration:17s!important;animation-delay:2.5s!important}
.swHdr__dust-p3{left:33%;animation-duration:11s!important;animation-delay:5s!important}
.swHdr__dust-p4{left:47%;animation-duration:15s!important;animation-delay:1.2s!important}
.swHdr__dust-p5{left:58%;animation-duration:19s!important;animation-delay:6.5s!important}
.swHdr__dust-p6{left:70%;animation-duration:12s!important;animation-delay:3.4s!important}
.swHdr__dust-p7{left:82%;animation-duration:16s!important;animation-delay:8s!important}
.swHdr__dust-p8{left:92%;animation-duration:14s!important;animation-delay:4.2s!important}
.swHdr__title{position:absolute;left:50%;top:var(--sw-title-top);z-index:2;display:flex;align-items:center;gap:.55em;white-space:nowrap;transform:translate(-50%,-50%);animation:swTitleIn 1.15s cubic-bezier(.2,.85,.25,1) both}
.swHdr__title::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:135%;height:230%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,247,214,.85),rgba(255,238,180,.45) 45%,rgba(255,255,255,0) 75%);animation:swHaloPulse 3.6s ease-in-out infinite;pointer-events:none}
.swHdr__name{position:relative;margin:0;color:transparent;font-family:"Sakkal Majalla","Traditional Arabic","Arabic Typesetting","Segoe UI",Tahoma,sans-serif;font-size:var(--sw-title-size);font-weight:700;line-height:1.05;letter-spacing:.005em;background:linear-gradient(100deg,var(--sw-gold-4),var(--sw-gold-3) 18%,var(--sw-gold-2) 34%,var(--sw-gold-1) 44%,#fff 50%,var(--sw-gold-1) 56%,var(--sw-gold-2) 66%,var(--sw-gold-3) 82%,var(--sw-gold-4));background-size:260% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 2px 2px rgba(90,50,8,.45)) drop-shadow(0 0 14px rgba(255,196,60,.55));animation:swSheen 5.5s linear infinite,swGlowPulse 3.6s ease-in-out infinite}
.swHdr__name::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.055em rgba(120,66,10,.85);text-shadow:0 .045em .02em rgba(120,66,10,.35)}
.swHdr__sword{width:calc(var(--sw-title-size)*.95);height:auto;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(90,50,8,.45));animation:swSwordIn 1.1s .25s cubic-bezier(.2,.9,.25,1) both,swSwordShine 5.5s linear infinite}
.swHdr__sword--r{transform:scaleX(-1);animation-name:swSwordInR,swSwordShine}
.swHdr--sm .swHdr__sword,.swHdr--sm .swHdr__dust{display:none}
.swHdr--sm .swHdr__name::before{-webkit-text-stroke-width:.075em}
.swHdr--sm .swHdr__title::before{width:150%;height:260%}

/* Authenticated game shell: artwork replaces the legacy dynamic-header image. */
body.ui-shell-v1 #dynamic_header{position:relative;height:100px;background:none;overflow:hidden}
body.ui-shell-v1 #dynamic_header .swHdr--game{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0}
/* The owner-supplied 2026 artwork contains a centered illustrated band inside a
   larger transparent canvas. These values expose that band without creating a
   derivative image, so the source artwork stays byte-for-byte intact. */
body.ui-shell-v1 #dynamic_header .swHdr--game{
  --sw-hdr-img:url("/assets/default/img/vip/header-owner-2026.png?v=c3702c988f0e");
  background-position:center 54.2%;
  background-size:100% 389%;
}
body.ui-shell-v1 #dynamic_header .swHdr--game::before,
body.ui-shell-v1 #dynamic_header .swHdr--game>*{display:none}
/* 🪤 **اقرأ هذا قبل أن تضيف عنصراً إلى `#dynamic_header`.**
   القاعدة ترفع كل ابنٍ فوق اللوحة المطلقة (`.swHdr--game` عند z-index 0)
   بـ`position: relative`. وهي بذلك **تبتلع إحداثيات أي ابنٍ يضع نفسه**:
   `bottom`/`left` تتحوّل من إسنادٍ إلى الشاشة إلى إزاحةٍ عن الموضع الساكن.

   أوقعت هذا عنصرين:
   · شارة الحماية — وقعت عند (110، 116) بدل (5، 58)
   · `.hammenu` — شريط دوائر الجوال، مضبوط على `fixed; bottom: 50px` فجلس
     عند (-42، -22) **فوق الشاشة ويساراً**، وأيقونته السادسة خارجها تماماً

   فالاستثناء الآن **بالخاصية لا بالاسم**: أي عنصر يعلن موضعه بنفسه يُترك
   وشأنه، ويكفيه أن يحمل `[data-owns-position]` — فلا يحتاج من يأتي بعدنا أن
   يكتشف المصيدة من جديد ولا أن يعدّل هذه القاعدة. */
body.ui-shell-v1 #dynamic_header>:not(.swHdr--game):not(.hammenu):not([data-owns-position]){position:relative;z-index:2}
body.ui-shell-v1 #dynamic_header .swHdr__name{display:block!important}

/* Login and registration: share the compact supplied artwork. */
body.auth-shell #dynamic_header{position:relative;height:100px;background:none;overflow:hidden}
body.auth-shell #dynamic_header .swHdr--auth{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0}
body.auth-shell #dynamic_header .swHdr__name{display:block!important}

/* Public home: retain the established Main hook while using the supplied hero. */
.Main.swHdr--home,.Main.swHdr--manual{z-index:1;width:100%;max-width:none;height:auto;min-height:120px;margin-top:29px;border-radius:0;background-image:var(--sw-hdr-img);background-position:center 42%;background-size:cover}
body>.Bar{
  position:absolute;
  top:clamp(145px,14.5vw,178px);
  left:50%;
  z-index:5;
  width:min(calc(100% - 24px),358px);
  margin:0!important;
  transform:translateX(-50%);
  box-sizing:border-box;
}
body>.Main.swHdr--home~.Body,
body.public-manual-page>.Body,
body.public-manual-page #content_Tribes{top:0}

@keyframes swSunBreath{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes swCloudDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes swDustFloat{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:.9}100%{transform:translateY(-330px) scale(1.25);opacity:0}}
@keyframes swTitleIn{0%{opacity:0;filter:blur(10px);transform:translate(-50%,-50%) scale(1.22)}60%{opacity:1;filter:blur(0)}100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}}
@keyframes swHaloPulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes swSheen{from{background-position:180% 0}to{background-position:-80% 0}}
@keyframes swGlowPulse{0%,100%{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 2px 2px rgba(90,50,8,.45)) drop-shadow(0 0 10px rgba(255,196,60,.4))}50%{filter:drop-shadow(0 1px 0 rgba(255,255,255,.65)) drop-shadow(0 2px 3px rgba(90,50,8,.5)) drop-shadow(0 0 22px rgba(255,205,80,.8))}}
@keyframes swSwordIn{0%{opacity:0;transform:translateY(-14px) rotate(-18deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes swSwordInR{0%{opacity:0;transform:scaleX(-1) translateY(-14px) rotate(-18deg)}100%{opacity:1;transform:scaleX(-1)}}
@keyframes swSwordShine{0%,100%{opacity:.92}50%{opacity:1}}

@media(max-width:768px){
  body.ui-shell-v1 #dynamic_header{height:100px}
  body.ui-shell-v1 #dynamic_header .swHdr--game{background-position:center 54.2%;background-size:auto 389%}
  .Main.swHdr--home{min-height:170px;background-size:auto 100%}
}
@media(max-width:640px){.swHdr__sword{display:none}}
@media(prefers-reduced-motion:reduce){.swHdr *,.swHdr::before{animation:none!important}}