/* PlayWexa v0.24.8: reference-inspired full-width hero proportions,
   single-source character-based artwork, and responsive original world banners. */
:root { --pw-content-max:1760px; }
/* Ref hero is a seamless background, not an image within a framed card. */
body[data-route="/"] .pw-cinematic-hero.hero{
  min-height:430px;
  background:linear-gradient(100deg,#07132d,#071638 42%,#10133b 82%);
  border-bottom:1px solid rgba(105,148,255,.36);
}
body[data-route="/"] .pw-cinematic-hero .hero-inner{
  min-height:430px;
  padding:22px 0 18px;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy{
  width:min(57%,860px);
  gap:0;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .pill{
  font-size:.73rem;letter-spacing:.025em;padding:9px 16px;
  border:1px solid rgba(103,198,255,.46);
  box-shadow:0 0 18px #4a9cff1c;
  background:rgba(6,24,55,.66);color:#f4faff;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy h1{
  margin:13px 0 8px;
  font-size:clamp(2.9rem,4.04vw,4.8rem);
  line-height:1.065;letter-spacing:-.054em;
  text-wrap:balance;
  text-shadow:0 8px 25px #020617c0;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy h1 em{
  background:linear-gradient(100deg,#6ff5ff 5%,#98bbff 42%,#c1a2ff 70%,#ff8dda 100%);
  color:transparent;-webkit-background-clip:text;background-clip:text;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy>p{
  max-width:640px;font-size:clamp(.92rem,1.02vw,1.10rem);line-height:1.62;
  margin:0;color:#ecf4ff;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .button-row{margin-top:15px;gap:12px}
body[data-route="/"] .pw-cinematic-hero .hero-copy .btn{
  min-height:43px;padding:10px 17px;font-size:.83rem;
  border-radius:12px;box-shadow:0 0 17px rgba(108,128,255,.24);
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats{
  margin-top:16px;gap:0;align-items:stretch;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats>div{
  padding:3px 18px 2px;background:none;border:0;border-left:2px solid rgba(99,228,255,.7);
  box-shadow:none;border-radius:0;
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats>div:first-child{padding-left:12px}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats strong{font-size:1.45rem;color:#fff}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats span{font-size:.71rem;color:#c8d8f7}
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image{
  object-fit:cover;object-position:60% 39%;filter:saturate(1.23) contrast(1.07) brightness(.94)
}
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene::after{
  background:linear-gradient(90deg,#04112efc 0%,#05122bd9 23%,#06162a96 42%,#09122a1a 69%,transparent 93%),
   linear-gradient(0deg,#04102766,transparent 30%),
   radial-gradient(ellipse at 82% 22%,#be48ff25,transparent 44%);
}
body[data-route="/"] .pw-cinematic-hero .pw-hero-artifact{right:2.5%;top:28px}
body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{right:20%;bottom:10%}
/* Consistent character artwork in all cards and navigational surfaces. */
body[data-route="/"] .home-worlds .world-art{height:clamp(155px,13.3vw,230px)}
body[data-route="/"] .home-worlds .world-illustration{object-fit:cover;object-position:50% 44%;filter:saturate(1.06)}
.pw-ref-world-card img{object-fit:cover;object-position:50% 43%}
.pw-topbar .pw-featured-trigger img,
.pw-topbar .pw-mega-item img,
.pw-mobile-menu .world-nav-link img{border-radius:50%;object-fit:cover}
/* Character banners use the same source face and costume as the card and navigation art. */
body[data-page="site"] .world-hero{overflow:hidden;align-items:center;gap:22px}
body[data-page="site"] .world-hero-glyph{min-width:0;width:min(45%,580px);max-width:580px;display:flex;justify-content:flex-end}
body[data-page="site"] .world-hero-glyph img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;border-radius:20px;border:1px solid rgba(147,184,255,.38);box-shadow:0 18px 38px #01061799}
/* Category card thumbnails reuse the owner's assigned world character. */
body[data-route="/"] .pw-category-item img{width:56px;height:48px;object-fit:cover;border-radius:11px}
@media (max-width:1150px){
  body[data-route="/"] .pw-cinematic-hero .hero-copy{width:min(65%,660px)}
  body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.65rem,4.4vw,4.1rem)}
}
@media (max-width:850px){
  body[data-route="/"] .pw-cinematic-hero .hero-copy{width:100%;max-width:650px}
  body[data-route="/"] .pw-cinematic-hero .hero-inner{min-height:0;padding:32px 0 0}
  body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.8rem,7vw,4.2rem)}
  body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{height:clamp(300px,56vw,490px)}
  body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene::after{background:linear-gradient(0deg,#06122a69,transparent 48%)}
  body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image{object-position:54% center}
  body[data-page="site"] .world-hero-glyph{width:100%;max-width:none;justify-content:center}
  body[data-page="site"] .world-hero-glyph img{max-height:260px}
}
@media(max-width:540px){
  body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.3rem,9vw,3.3rem)}
  body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats>div{padding:3px 10px}
  body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats strong{font-size:1.18rem}
  body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats span{font-size:.63rem}
  body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{height:clamp(245px,61vw,340px)}
  body[data-page="site"] .world-hero-glyph img{max-height:205px}
}