/* MijnDex v5.4 — Pokédex scenery composition.
   Keep the full-bleed, header-overlay v5.3 design, but stop zooming/cropping
   covers across extra-wide monitors. Actual scene stays a real <img> element. */

/* Blurred scenery behind the crisp artwork fills ultrawide viewports. */
.cin-pokemon-hero {
  background-color:#090e12!important;
  background-image:none!important;
}
.cin-pokemon-hero::before {
  content:"";display:block!important;position:absolute!important;
  inset:-32px!important;z-index:0!important;
  background-image:var(--cin-cover,none)!important;
  background-repeat:no-repeat!important;
  background-position:center 42%!important;
  background-size:cover!important;
  filter:blur(26px) brightness(.55) saturate(.86)!important;
  transform:scale(1.03)!important;
  opacity:1!important;
  pointer-events:none!important;
}

/* This is the important part: capped image width and CONTAIN, not COVER.
   The Pokémon can no longer lose its head/feet to a forced panorama crop. */
.cin-pokemon-hero > img.cin-cover-image {
  display:block!important;
  position:absolute!important;
  inset:auto!important;
  top:0!important;
  right:max(0px, calc((100vw - 1392px) / 2))!important;
  bottom:auto!important;left:auto!important;
  width:min(76vw, 1080px)!important;
  height:100%!important;
  max-width:1080px!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:right center!important;
  opacity:1!important;
  z-index:1!important;
  pointer-events:none!important;
  -webkit-mask-image:linear-gradient(90deg, transparent 15%, #000 59%, #000 94%, transparent 100%)!important;
  mask-image:linear-gradient(90deg, transparent 15%, #000 59%, #000 94%, transparent 100%)!important;
}

/* Fade the background behind copy, and the entire scene into the cards. */
.cin-pokemon-hero::after {
  content:"";display:block!important;
  position:absolute!important;inset:0!important;height:100%!important;
  z-index:2!important;pointer-events:none!important;
  background:
    linear-gradient(90deg, #090e12f1 0%, #090e12b6 20%, #090e1254 43%, #090e1200 71%),
    linear-gradient(0deg, #090e12 0%, #090e1275 13%, #090e1200 42%)!important;
}
.cin-pokemon-hero > .cin-hero-inner {position:relative;z-index:3!important;}

@media (max-width:760px) {
  /* On phones show the complete illustration ABOVE the text, without zoom. */
  .cin-pokemon-hero::before {
    background-position:50% 0!important;
    filter:blur(15px) brightness(.49)!important;
  }
  .cin-pokemon-hero > img.cin-cover-image {
    inset:auto!important;
    top:58px!important;right:0!important;left:0!important;
    width:100%!important;
    height:clamp(210px, 75vw, 340px)!important;
    max-width:100%!important;max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 100%)!important;
    mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 100%)!important;
  }
  .cin-pokemon-hero::after {
    background:linear-gradient(180deg,
      #090e1278 0%, #090e1200 15%, #090e1200 34%,
      #090e12bb 58%, #090e12 73%, #090e12 100%)!important;
  }
}