/* PlayWexa v0.24.7: premium hero, world artwork framing, clean header and seamless featured marquee.
   Responsive content width continues using the v0.24.5 1760px shared token;
   actual NexterHub DOM measurement is not available in this environment. */
:root {--pw-content-max:1760px;--pw-content-gutter:clamp(16px,2vw,40px)}
/* Public header: transparent resting category buttons; pre-existing hover and open styles remain. */
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-topbar .pw-featured-trigger:not(:hover):not(:focus-visible):not([aria-expanded="true"]),
body:is([data-page="site"],[data-page="game"],[data-page="dashboard"]) .pw-topbar .pw-worlds-all:not(:hover):not(:focus-visible):not([aria-expanded="true"]){
 background:transparent;
 border-color:transparent;
 box-shadow:none;
}
.pw-topbar .pw-featured-item{min-width:0}
.pw-topbar .pw-featured-trigger img{flex-shrink:0}
.pw-topbar .pw-featured-trigger,.pw-topbar .pw-worlds-all{white-space:nowrap}
.pw-topbar .pw-featured-trigger:focus-visible,.pw-topbar .pw-worlds-all:focus-visible{outline:2px solid #96efff;outline-offset:3px}
/* A unified full-width cinematic hero. The image layer fills the scene,
   while text remains in the shared 1760px centered content container. */
body[data-route="/"] .pw-cinematic-hero.hero{
 width:100%;max-width:none;margin:0;
 min-height:620px;isolation:isolate;position:relative;
 overflow:hidden;border:0;border-radius:0;
 background:linear-gradient(100deg,#061229,#101c42 48%,#1b1742);
 box-shadow:0 12px 38px #02081899;
}
body[data-route="/"] .pw-cinematic-hero .hero-inner{
 position:relative;
 box-sizing:border-box;
 display:block;
 width:var(--pw-site-width);
 max-width:var(--pw-content-max);
 min-height:620px;
 margin-inline:auto;
 padding:clamp(48px,5vw,88px) 0 46px;
}
body[data-route="/"] .pw-cinematic-hero .hero-stars{z-index:0;opacity:.2}
body[data-route="/"] .pw-cinematic-hero .hero-copy{
 position:relative;z-index:5;
 display:flex;flex-direction:column;align-items:flex-start;
 width:min(53%,740px);
 padding:0;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy h1{
 font-size:clamp(3.3rem,5vw,6.3rem);
 line-height:1.06;letter-spacing:-.055em;
 margin:22px 0 20px;
 color:#f8fbff;
 text-shadow:0 8px 32px #0007;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy>p{
 max-width:650px;color:#e2ecff;font-size:clamp(1rem,1.12vw,1.24rem);line-height:1.72;
 text-shadow:0 3px 13px #020714;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .button-row{margin-top:26px;gap:12px}
body[data-route="/"] .pw-cinematic-hero .hero-copy .btn{min-height:48px;white-space:normal;text-align:center}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats{margin-top:26px;flex-wrap:wrap;gap:10px}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats>div{margin:0}
body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{
 position:absolute;z-index:1;
 left:calc((var(--pw-site-width) - 100vw)/2);
 right:calc((var(--pw-site-width) - 100vw)/2);
 top:0;bottom:0;
 display:block;width:auto;max-width:none;height:100%;min-height:0;
 padding:0;margin:0;border:0;border-radius:0;
 box-shadow:none;background:#070f26;
 overflow:hidden;isolation:isolate;
}
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image{
 position:absolute;inset:0;
 width:100%;height:100%;display:block;
 object-fit:cover;object-position:59% 48%;
 filter:saturate(1.12) brightness(.89);
 transform:none;
}
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene:hover .pw-cinematic-image{
 transform:none;filter:saturate(1.12) brightness(.89);
}
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,#061329 0%,#061329f0 22%,#061329b8 40%,#06132933 66%,#06132908 95%),linear-gradient(0deg,#06112b88,transparent 29%);
}
body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{
 position:absolute;z-index:3;left:auto;right:14%;top:auto;bottom:12%;transform:none;
}
body[data-route="/"] .pw-cinematic-hero .pw-hero-artifact{
 position:absolute;z-index:3;right:clamp(16px,4vw,70px);top:34px;
}
/* World tiles retain a consistent ratio. Reframed source art has subtle atmospheric extension. */
body[data-route="/"] .home-worlds .world-art{height:clamp(155px,13.2vw,232px)}
body[data-route="/"] .home-worlds .world-illustration,
body[data-route="/"] .pw-ref-world-card img{
 width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}
body[data-route="/"] .home-worlds .world-grid{gap:clamp(12px,1.3vw,22px)}
body[data-route="/"] .home-worlds .world-card{min-width:0}
/* GPU transform animation: no scrollLeft fight, only the card track moves. */
body[data-route="/"] .pw-ref-viewport{
 overflow:hidden!important;
 touch-action:pan-y;
 scroll-snap-type:none!important;
 mask-image:linear-gradient(to right,transparent,#000 3.5%,#000 96.5%,transparent);
 -webkit-mask-image:linear-gradient(to right,transparent,#000 3.5%,#000 96.5%,transparent);
}
body[data-route="/"] .pw-ref-viewport.is-reduced-motion{mask-image:none;-webkit-mask-image:none;overflow-x:auto!important}
body[data-route="/"] .pw-ref-track{width:max-content;max-width:none;transform:translate3d(0,0,0);will-change:transform;gap:14px;}
body[data-route="/"] .pw-ref-track [data-featured-clone]{pointer-events:auto}
body[data-route="/"] .pw-ref-world-card{scroll-snap-align:none;flex:0 0 clamp(205px,18.5vw,276px)}
body[data-route="/"] .pw-ref-world-card:focus-visible{outline:3px solid #bdeeff;outline-offset:3px}
body[data-route="/"] .pw-ref-world-card img{transition:transform .25s}
body[data-route="/"] .pw-ref-viewport.is-reduced-motion .pw-ref-track{will-change:auto}
@media(max-width:1100px){
 body[data-route="/"] .pw-cinematic-hero .hero-copy{width:min(63%,660px)}
 body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.7rem,5vw,4.5rem)}
 body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image{object-position:65% center}
}
@media(max-width:850px){
 body[data-route="/"] .pw-cinematic-hero .hero-inner{min-height:0;padding:36px 0 0}
 body[data-route="/"] .pw-cinematic-hero .hero-copy{width:100%;max-width:680px;padding-bottom:28px}
 body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(3rem,8vw,5.4rem)}
 body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{
  position:relative;left:auto;right:auto;top:auto;bottom:auto;
  width:100%;height:clamp(300px,58vw,520px);
  border-radius:18px 18px 0 0;
  box-shadow:0 -12px 38px #020a1c55;
 }
 body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene::after{background:linear-gradient(0deg,#06132966,transparent 45%)}
 body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image{object-position:center center}
 body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{right:22%;bottom:10%}
}
@media(max-width:520px){
 body[data-route="/"] .pw-cinematic-hero .hero-inner{padding-top:25px}
 body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.55rem,10.3vw,3.8rem)}
 body[data-route="/"] .pw-cinematic-hero .hero-copy .button-row{gap:8px}
 body[data-route="/"] .pw-cinematic-hero .hero-copy .btn{font-size:.78rem;padding:10px}
 body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{height:clamp(245px,65vw,345px)}
 body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{bottom:8%;right:16px}
 body[data-route="/"] .pw-ref-world-card{flex-basis:78vw}
}
@media(prefers-reduced-motion:reduce){body[data-route="/"] .pw-ref-track{will-change:auto}}
html.reduce-motion body[data-route="/"] .pw-ref-track{will-change:auto}