/* صفحة «العب»: مشهد الشخصيات وهم بيلعبوا ورا البنر.
   psa = المشهد مع البلاطات، psb = المشهد لحاله بدون بلاطات */
html.psa body #pickscreen #phero.hero,html.psb body #pickscreen #phero.hero{
  background:linear-gradient(180deg,rgba(31,27,22,.72) 0%,rgba(31,27,22,.4) 30%,rgba(31,27,22,0) 52%),url(img/scene-poster.webp?v=1) center 38%/cover no-repeat,#f6b532!important;
  background-image:linear-gradient(180deg,rgba(31,27,22,.72) 0%,rgba(31,27,22,.4) 30%,rgba(31,27,22,0) 52%),url(img/scene-poster.webp?v=1)!important}
html.psa body #pickscreen #phero.hero .phtitle,html.psb body #pickscreen #phero.hero .phtitle{text-shadow:0 2px 18px rgba(0,0,0,.35)!important}

/* (أ) مع البلاطات: المشهد أطول عشان يبين فوق البلاطات */
html.psa body #pickscreen #phero.hero{min-height:clamp(560px,82vh,900px)!important}

/* (ب) بدون بلاطات: المشهد كامل */
html.psb body #pickscreen #phero.hero .wrap.tiles{display:none!important}
html.psb body #pickscreen #pick #phero.hero{width:100%!important;min-height:0!important;height:clamp(380px,40vw,68vh)!important;padding-top:clamp(28px,5vh,60px)!important;justify-content:flex-start!important;
  background-position:center,center 55%!important;background-size:100% 100%,cover!important}
html.psb body #pickscreen #phero.hero .wrap.hc{margin:0 auto!important;order:0!important}
html.psb body #pickscreen #phero.hero .curve{height:clamp(40px,5vw,90px)!important}
@media(max-width:700px){
  html.psb body #pickscreen #pick #phero.hero{height:auto!important;min-height:78vw!important;background-position:center,50% 60%!important}
  html.psa body #pickscreen #phero.hero{min-height:0!important}
}
/* (ب) العنوان فوق والمنحنى تحت دايماً */
html.psb body #pickscreen #pick #phero.hero{position:relative!important}
html.psb body #pickscreen #pick #phero.hero .wrap.hc{position:absolute!important;top:clamp(26px,5vh,56px)!important;left:0!important;right:0!important;margin:0!important;z-index:2}
html.psb body #pickscreen #pick #phero.hero .curve{position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;margin:0!important}
/* (ب) نسخة الإعلان: المشهد على اليسار بحافة مايلة، والعنوان على لوح أصفر يمين */
@media(min-width:701px){
html.psb body #pickscreen #pick #phero.hero{background:linear-gradient(135deg,#ffd877 0%,#f8bf4f 55%,#f2a51a 100%)!important;background-image:linear-gradient(135deg,#ffd877 0%,#f8bf4f 55%,#f2a51a 100%)!important;
  height:clamp(400px,38vw,64vh)!important;overflow:hidden!important}
html.psb body #pickscreen #pick #phero.hero .wvx{display:block!important;position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;width:64%!important;height:auto!important;z-index:1!important;opacity:1!important;
  background:url(img/scene-poster.webp?v=1) 30% 30%/cover no-repeat!important;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
html.psb body #pickscreen #pick #phero.hero .wvx svg{display:none!important}
html.psb body #pickscreen #pick #phero.hero .wrap.hc{top:0!important;bottom:clamp(40px,5vw,90px)!important;left:auto!important;right:0!important;width:38%!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}
html.psb body #pickscreen #pick #phero.hero .phtitle{font-size:clamp(2rem,4vw,4.4rem)!important;text-shadow:none!important}
html.psb body #pickscreen #pick #phero.hero .phsub{max-width:16em;text-shadow:none!important}
html.psb body #pickscreen #pick #phero.hero .curve{z-index:3!important}
}
@media(min-width:701px){
html.psb body #pickscreen #pick #phero.hero .wrap.hc::before{content:'';display:block;width:clamp(120px,12vw,220px);height:clamp(120px,12vw,220px);margin:0 auto clamp(6px,1vh,14px);background:url(img/logo-flat-white.png) center/contain no-repeat}
html.psb body #pickscreen #pick #phero.hero .wrap.hc{bottom:clamp(30px,4vw,70px)!important}
}
/* الصورة أخف (شفافة شوي) فبتذوب بالأصفر */
@media(min-width:701px){html.psb body #pickscreen #pick #phero.hero .wvx{opacity:.55!important}}
@media(max-width:700px){
html.psb body #pickscreen #pick #phero.hero{background:linear-gradient(135deg,#ffd877 0%,#f8bf4f 55%,#f2a51a 100%)!important;background-image:linear-gradient(135deg,#ffd877 0%,#f8bf4f 55%,#f2a51a 100%)!important;overflow:hidden!important}
html.psb body #pickscreen #pick #phero.hero .wvx{display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:1!important;opacity:.45!important;background:url(img/scene-poster.webp?v=1) 50% 40%/cover no-repeat!important}
html.psb body #pickscreen #pick #phero.hero .wvx svg{display:none!important}
html.psb body #pickscreen #pick #phero.hero .phtitle,html.psb body #pickscreen #pick #phero.hero .phsub{text-shadow:0 1px 8px rgba(150,80,0,.35)!important}
}