/* ==========================================================================
   SERIES.CSS — Series Archive Page (e.g. Pokémon Red & Blue)
   ========================================================================== */

.series-page .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: visible;
}

.series-container {
  padding: 48px 0 56px;
  overflow: visible;
}

/* ── Hero Section ───────────────────────────────────────────────────────── */
.series-hero {
  text-align: center;
  margin-bottom: 48px;
}

.series-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 20px;
  line-height: 1.2;
}

.series-origin-summary {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(200, 220, 255, 0.8);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 400;
}

.series-hero-img {
  margin-top: 24px;
}


.series-hero-img img {
  max-width: 200px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}

/* ── Box Art — Museum Glass Case ─────────────────────────────────────────── */
.series-boxart {
  margin-bottom: 56px;
}

.boxart-case {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.boxart-item {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease;
}

.boxart-inner {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.boxart-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 25%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 75%,
    transparent 100%
  );
  transform: translateX(-100%) skewX(-12deg);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.boxart-item:hover .boxart-inner::after {
  transform: translateX(100%) skewX(-12deg);
}

.boxart-item:hover {
  transform: translateY(-8px) scale(1.1);
}

.boxart-red:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 0, 0, 0.25),
    0 0 48px rgba(255, 0, 0, 0.12);
}

.boxart-blue:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 100, 255, 0.25),
    0 0 48px rgba(0, 100, 255, 0.12);
}

.boxart-gold:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 215, 0, 0.35),
    0 0 48px rgba(255, 215, 0, 0.15);
}

.boxart-silver:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(192, 192, 192, 0.35),
    0 0 48px rgba(192, 192, 192, 0.15);
}

.boxart-ruby:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(224, 17, 95, 0.35),
    0 0 48px rgba(224, 17, 95, 0.15);
}

.boxart-sapphire:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(15, 82, 186, 0.35),
    0 0 48px rgba(15, 82, 186, 0.15);
}

.boxart-omega-ruby:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(224, 17, 95, 0.35),
    0 0 48px rgba(224, 17, 95, 0.15);
}

.boxart-alpha-sapphire:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(15, 82, 186, 0.35),
    0 0 48px rgba(15, 82, 186, 0.15);
}

.boxart-lets-go-pikachu:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 215, 0, 0.35),
    0 0 48px rgba(255, 215, 0, 0.15);
}

.boxart-lets-go-eevee:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(205, 133, 63, 0.35),
    0 0 48px rgba(205, 133, 63, 0.15);
}

.boxart-sun:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 215, 0, 0.35),
    0 0 48px rgba(255, 215, 0, 0.15);
}

.boxart-moon:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(75, 0, 130, 0.35),
    0 0 48px rgba(75, 0, 130, 0.15);
}

.boxart-ultra-sun:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 140, 0, 0.35),
    0 0 48px rgba(255, 140, 0, 0.15);
}

.boxart-ultra-moon:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(75, 0, 130, 0.35),
    0 0 48px rgba(75, 0, 130, 0.15);
}

.boxart-sword:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(192, 192, 192, 0.35),
    0 0 48px rgba(192, 192, 192, 0.15);
}

.boxart-shield:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(75, 0, 130, 0.35),
    0 0 48px rgba(75, 0, 130, 0.15);
}

.boxart-firered:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 0, 0, 0.35),
    0 0 48px rgba(255, 0, 0, 0.15);
}

.boxart-leafgreen:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(34, 139, 34, 0.35),
    0 0 48px rgba(34, 139, 34, 0.15);
}

.boxart-heartgold:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 215, 0, 0.35),
    0 0 48px rgba(255, 215, 0, 0.15);
}

.boxart-soulsilver:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(192, 192, 192, 0.35),
    0 0 48px rgba(192, 192, 192, 0.15);
}

.boxart-black:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(26, 26, 26, 0.5),
    0 0 48px rgba(26, 26, 26, 0.25);
}

.boxart-white:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(245, 245, 245, 0.35),
    0 0 48px rgba(245, 245, 245, 0.15);
}

.boxart-diamond:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(185, 242, 255, 0.35),
    0 0 48px rgba(185, 242, 255, 0.15);
}

.boxart-pearl:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(229, 228, 226, 0.35),
    0 0 48px rgba(229, 228, 226, 0.15);
}

.boxart-brilliant-diamond:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(185, 242, 255, 0.4),
    0 0 48px rgba(185, 242, 255, 0.2);
}

.boxart-shining-pearl:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(245, 200, 220, 0.4),
    0 0 48px rgba(245, 200, 220, 0.2);
}

.boxart-scarlet:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 0, 0, 0.35),
    0 0 48px rgba(255, 0, 0, 0.15);
}

.boxart-violet:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(139, 0, 255, 0.35),
    0 0 48px rgba(139, 0, 255, 0.15);
}

.boxart-x:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 0, 255, 0.35),
    0 0 48px rgba(0, 0, 255, 0.15);
}

.boxart-y:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 107, 107, 0.35),
    0 0 48px rgba(255, 107, 107, 0.15);
}

.boxart-case-single {
  justify-content: center;
}

.boxart-single:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 255, 255, 0.35),
    0 0 48px rgba(0, 255, 255, 0.15);
}

.boxart-yellow:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 220, 80, 0.35),
    0 0 48px rgba(255, 220, 80, 0.15);
}

.boxart-inner img {
  display: block;
  width: 140px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  transition: filter 0.35s ease;
}

.boxart-item:hover .boxart-inner img {
  filter: brightness(1.08) contrast(1.02);
}

/* Hai box art trên một hàng — màn hẹp (wrap mặc định đẩy xuống dòng) */
@media (max-width: 768px) {
  .boxart-case:not(.boxart-case-single) {
    flex-wrap: nowrap;
    gap: min(12px, 3vw);
    justify-content: center;
    align-items: center;
  }

  /*
   * Khung glass = đúng kích thước ảnh + padding (Safari hay làm width:fit-content + max-width:% rộng bét).
   * inline-flex + căn giữa → ảnh nằm giữa viền kính.
   */
  .boxart-case:not(.boxart-case-single) .boxart-item {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
  }

  .boxart-case:not(.boxart-case-single) .boxart-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
  }

  .boxart-case:not(.boxart-case-single) .boxart-inner img {
    width: auto;
    max-width: min(104px, calc((100vw - 80px) / 2));
    height: auto;
    display: block;
    margin: 0;
    object-fit: contain;
  }

  /* Giảm nhẹ neon trong starter pods (mobile / tablet hẹp) */
  .starter-pod .pod-scan-line {
    box-shadow: 0 0 4px 0 color-mix(in srgb, var(--glow-color, #6490ff) 38%, transparent);
  }

  .starter-pod .pod-sprite {
    filter:
      drop-shadow(0 3px 12px rgba(0, 0, 0, 0.42))
      drop-shadow(0 0 8px color-mix(in srgb, var(--glow-color, #6490ff) 26%, transparent));
  }

  .starter-pod:hover {
    filter: drop-shadow(0 10px 32px color-mix(in srgb, var(--glow-color, #6490ff) 18%, transparent));
  }

  .starter-pod:hover .pod-specimen {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 4px 0 12px rgba(0, 0, 0, 0.15),
      inset -4px 0 12px rgba(0, 0, 0, 0.15),
      0 8px 32px rgba(0, 0, 0, 0.38),
      0 0 28px color-mix(in srgb, var(--glow-color, #6490ff) 14%, transparent),
      0 0 52px color-mix(in srgb, var(--glow-color, #6490ff) 7%, transparent);
  }

  .starter-pod:hover .pod-sprite {
    filter:
      drop-shadow(0 5px 16px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 12px color-mix(in srgb, var(--glow-color, #6490ff) 42%, transparent));
  }
}

/* ── Starter Selection — separate glass frame ───────────────────────────── */
.series-starters-glass {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
  background: rgba(5, 12, 28, 0.48);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 36px 28px 40px;
  overflow: visible;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.series-starters-glass .series-starters {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Research Dossier — main glass frame ────────────────────────────────── */
.series-dossier-glass {
  background: rgba(5, 12, 28, 0.52);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 36px 32px 40px;
  overflow: visible;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Research Dossier Grid ──────────────────────────────────────────────── */
.series-dossier {
  margin-bottom: 0;
  overflow: visible;
}

.dossier-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: visible;
}

.dossier-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Gold & Silver + FireRed & LeafGreen + Emerald: Region + Threat stack on narrow landscape (e.g. phone sideways). */
@media (orientation: landscape) and (max-width: 1024px) {
  .dossier-row--gs-region-threat,
  .dossier-row--frlg-region-threat,
  .dossier-row--emerald-region-threat {
    grid-template-columns: 1fr;
  }

  .tech-row-pair--gs-shiny-friendship {
    flex-direction: column;
  }

  .tech-row-pair--gs-shiny-friendship .tech-item {
    flex: none;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Diamond & Pearl — phone/tablet landscape: Electivire + Rhyperior one row; GTS & PokéRadar image / text stacked */
  .tech-leap-diamond-pearl .tech-dp-evolutions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(12px, 2vw);
  }

  .tech-leap-diamond-pearl .tech-dp-evolutions .tech-img-electivire,
  .tech-leap-diamond-pearl .tech-dp-evolutions .tech-img-rhyperior {
    max-width: min(168px, 22vw);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-diamond-pearl .tech-dp-global-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .tech-leap-diamond-pearl .tech-dp-global-content .tech-img-wrap-left {
    float: none;
    margin: 0;
  }

  .tech-leap-diamond-pearl .tech-dp-global-content .text-accent-bar {
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-diamond-pearl .tech-dp-pokeradar-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 14px;
  }

  .tech-leap-diamond-pearl .tech-dp-pokeradar-content .tech-img-wrap-right {
    float: none;
    margin: 0;
  }

  .tech-leap-diamond-pearl .tech-dp-pokeradar-content .text-accent-bar {
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  /* Platinum — landscape: Battle Frontier full width, Expanded Sinnoh Dex below */
  .tech-leap-platinum .tech-platinum-row-1 {
    flex-direction: column;
    align-items: stretch;
    gap: min(28px, 4vh);
    width: 100%;
  }

  .tech-leap-platinum .tech-platinum-row-1 .tech-item {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Platinum — landscape: Shaymin row, then Giratina row below (larger sprites) */
  .tech-leap-platinum .tech-platinum-dex-rows-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(16px, 3.5vh);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap > .tech-platinum-dex-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: min(16px, 2.5vw);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-platinum-dex-row-altered {
    margin-top: 0;
    margin-bottom: 0;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .img-neon-wrap {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-img-platinum-land {
    max-width: min(120px, 16vw, 28vh) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-img-platinum-gracidea {
    max-width: min(78px, 11vw, 20vh) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-img-platinum-sky {
    max-width: min(150px, 20vw, 32vh) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-img-platinum-altered,
  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-img-platinum-origin {
    max-width: min(200px, 24vw, 38vh) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-platinum .tech-platinum-dex-rows-wrap .tech-img-platinum-orb {
    max-width: min(88px, 12vw, 18vh) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* HeartGold & SoulSilver — landscape: THREAT text full width, four admins in one row below */
  .dossier-threat-hgss .dossier-threat-hgss-content.dossier-threat-hgss-single-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: min(16px, 3vh);
    width: 100%;
  }

  .dossier-threat-hgss .dossier-threat-hgss-content .dossier-threat-info-hgss {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Override .dossier-threat-info .dossier-text { max-width: 18em } so copy uses full frame width */
  .dossier-threat-hgss .dossier-threat-info-hgss .dossier-text {
    max-width: none;
  }

  .dossier-threat-hgss .dossier-threat-imgs.dossier-threat-imgs-hgss-inline {
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: min(8px, 1.8vw);
  }

  .dossier-threat-hgss .dossier-threat-imgs-hgss .dossier-img-hgss-lyra-size {
    max-width: min(92px, 11.5vw) !important;
  }

  .dossier-threat-hgss .dossier-threat-imgs-hgss .dossier-img-hgss-proton-size {
    max-width: min(108px, 13vw) !important;
  }

  /* HeartGold & SoulSilver — landscape: Walking Together — Ethan, Typhlosion, Lyra, Meganium one row */
  .tech-leap-heartgold-soulsilver .tech-hgss-walking-row {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(10px, 1.8vw);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-heartgold-soulsilver .tech-hgss-walking-row .img-neon-wrap {
    flex: 0 1 auto;
    min-width: 0;
  }

  .tech-leap-heartgold-soulsilver .tech-hgss-walking-row .tech-img-hgss-lyra-size {
    max-width: min(96px, 12vw) !important;
  }

  .tech-leap-heartgold-soulsilver .tech-hgss-walking-row .tech-img-hgss-electivire-size {
    max-width: min(142px, 17.5vw) !important;
  }

  /* Black & White — landscape: Unova map above text; THREAT three sprites one row; Sprites + Battle Subway stacked (no overlap) */
  .dossier-regional-content.dossier-regional-black-white {
    flex-direction: column;
    align-items: stretch;
    gap: min(16px, 3vh);
    width: 100%;
  }

  .dossier-regional-black-white .dossier-img-unova {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  .dossier-threat-bw .dossier-threat-imgs.dossier-threat-imgs-bw {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(8px, 1.5vw);
    width: 100%;
    max-width: 100%;
  }

  .dossier-threat-bw .dossier-threat-imgs-bw > .img-neon-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-bw .dossier-threat-imgs-bw .dossier-img-bw-plasma-size {
    max-width: 100%;
    max-height: min(200px, 38vh, 24vw);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .dossier-threat-bw .dossier-threat-imgs-bw .dossier-img-bw-reshiram-size,
  .dossier-threat-bw .dossier-threat-imgs-bw .dossier-img-bw-zekrom-size {
    max-width: 100%;
    max-height: min(200px, 38vh, 26vw);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-black-white .tech-bw-sprites-subway-row {
    flex-direction: column;
    align-items: stretch;
    gap: min(28px, 4vh);
    width: 100%;
  }

  .tech-leap-black-white .tech-item-sprites,
  .tech-leap-black-white .tech-item-battle-subway {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-black-white .tech-bw-sprite-grid {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .tech-leap-black-white .tech-bw-battle-subway {
    align-items: center;
    justify-content: center;
  }

  .tech-leap-black-white .tech-img-bw-battle-subway {
    max-width: min(220px, 70vw);
    margin-left: auto;
    margin-right: auto;
  }

  /* Black 2 & White 2 — landscape: THREAT copy uses full frame width (not 18em cap + side-by-side squeeze) */
  .dossier-threat-b2w2 .dossier-threat-b2w2-row1 {
    flex-direction: column;
    align-items: stretch;
    gap: min(16px, 3vh);
    width: 100%;
  }

  .dossier-threat-b2w2 .dossier-threat-info-b2w2 {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dossier-threat-b2w2 .dossier-threat-info-b2w2 .dossier-text {
    max-width: none;
  }

  .dossier-threat-b2w2 .dossier-threat-b2w2-imgs-row1 {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  /* X & Y — landscape: Mega Evolution — four pairs on one row */
  .tech-leap-xy .tech-xy-mega-row {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(6px, 1.2vw);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-xy .tech-xy-mega-row .tech-xy-mega-pair {
    flex: 1 1 0;
    min-width: 0;
  }

  .tech-leap-xy .tech-xy-mega-row .tech-img-xy-mega-form {
    max-width: min(100px, 13vw) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-xy .tech-xy-mega-row .tech-img-xy-mega-stone {
    max-width: min(36px, 5vw) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Omega Ruby & Alpha Sapphire — landscape: Primal Groudon + Primal Kyogre one row */
  .tech-leap-oras .tech-oras-primal-row {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(10px, 2vw);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-oras .tech-oras-primal-pair {
    flex: 1 1 0;
    min-width: 0;
  }

  .tech-leap-oras .tech-oras-primal-row .tech-img-oras-primal-form {
    max-width: min(260px, 34vw) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-oras .tech-oras-primal-row .tech-img-oras-orb {
    max-width: min(60px, 8vw) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Omega Ruby & Alpha Sapphire — landscape: Super-Secret Bases + Cosplay Pikachu stacked (no overlap) */
  .tech-leap-oras .tech-oras-secret-areanav-row {
    flex-direction: column;
    align-items: stretch;
    gap: min(28px, 4vh);
    width: 100%;
  }

  .tech-leap-oras .tech-oras-secret-areanav-row .tech-item {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-oras .tech-oras-secret-areanav-row .tech-img-oras-secret-base,
  .tech-leap-oras .tech-oras-secret-areanav-row .tech-img-oras-cosplay {
    max-width: min(360px, 88vw);
    margin-left: auto;
    margin-right: auto;
  }

  /* Sun & Moon — phone/tablet landscape: gameplay art fits; Region Overview 2×2; Z-Moves spaced (reset desktop offsets) */
  .dossier-gameplay-sunmoon-alola-wrap,
  .dossier-gameplay-sunmoon-ultra-wrap {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .dossier-gameplay-sunmoon-plot {
    min-width: 0;
    max-width: 100%;
  }

  .dossier-img-sunmoon-alola {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
  }

  .dossier-gameplay-sunmoon-ultra-wrap .img-neon-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dossier-img-sunmoon-ultra {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
    flex-shrink: 1;
    min-width: 0;
  }

  .dossier-regional-sunmoon-alola-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 12px min(18px, 3vw);
    width: 100%;
    max-width: 100%;
    justify-items: center;
  }

  .dossier-regional-sunmoon-alola-forms .img-neon-wrap {
    min-width: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-regional-sunmoon-alola-forms .dossier-img-sunmoon-alola-form {
    max-width: min(200px, 36vw);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-sun-moon .tech-sunmoon-festival-img-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-sun-moon .tech-img-sunmoon-festival {
    max-width: min(420px, 92vw);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: min(28px, 5vw);
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-left .img-neon-wrap {
    margin-top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .tech-leap-sun-moon .tech-img-sunmoon-zmove-pikachu {
    margin-left: 0 !important;
    max-width: min(46vw, 420px) !important;
    width: auto;
    height: auto;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-right .tech-img-sunmoon-zmove {
    margin-right: 0 !important;
    max-width: min(42vw, 380px) !important;
    width: auto;
    height: auto;
  }

  /* Ultra Sun & Ultra Moon — phone/tablet landscape: (grid columns overridden after .dossier-row-ultra-region-threat base — base 1fr 1fr loads later and was winning). Art centered; Warp|Z-Power and Roto|Totem stacked rows; Z-Crystals one row */
  .dossier-row-ultra-region-threat > .dossier-block {
    min-width: 0;
  }

  .dossier-regional-content.dossier-regional-ultra {
    min-width: 0;
    max-width: 100%;
  }

  /* Region / Threat row layout for narrow landscape lives AFTER base USUM rules (see block below .dossier-img-ultra-giovanni). */

  .tech-leap-ultra .tech-ultra-row-warp-zpower,
  .tech-leap-ultra .tech-ultra-row-roto-totem {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: min(24px, 3vh);
  }

  .tech-leap-ultra .tech-ultra-row-warp-zpower .tech-item,
  .tech-leap-ultra .tech-ultra-row-roto-totem .tech-item {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-ultra .tech-ultra-warp-img-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .tech-leap-ultra .tech-img-ultra-warp {
    margin-left: auto;
    margin-right: auto;
  }

  .tech-leap-ultra .tech-ultra-zcrystals {
    flex-wrap: nowrap;
    justify-content: center;
    gap: min(10px, 2vw);
  }

  .tech-leap-ultra .tech-ultra-zcrystals .tech-img-ultra-z {
    max-width: min(88px, 20vw) !important;
    width: auto;
    height: auto;
  }

  .tech-leap-ultra .tech-ultra-zcrystals .tech-img-ultra-necrozium-z {
    max-width: min(140px, 32vw) !important;
    width: auto;
    height: auto;
  }
}

.dossier-block {
  position: relative;
  padding: 0;
  overflow: visible;
}

.dossier-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(100, 180, 255, 0.95);
  margin: 0 0 14px;
}

/* Pokeball accent bar — red/white vertical bar for text blocks */
.text-accent-bar {
  position: relative;
  padding-left: 18px;
}

.text-accent-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    #E53935 0%,
    #E53935 42%,
    #FFFFFF 58%,
    #FFFFFF 100%
  );
}

/* Pokémon names in text — bold, +1px, type color, subtle neon */
.pkmn-name {
  font-weight: 700;
  font-size: calc(1em + 1px);
}

.pkmn-water { color: #3b82f6; text-shadow: 0 0 8px rgba(59, 130, 246, 0.4), 0 0 16px rgba(59, 130, 246, 0.2); }
.pkmn-fire { color: #ff4444; text-shadow: 0 0 8px rgba(255, 68, 68, 0.4), 0 0 16px rgba(255, 68, 68, 0.2); }
.pkmn-electric { color: #f8d030; text-shadow: 0 0 8px rgba(248, 208, 48, 0.4), 0 0 16px rgba(248, 208, 48, 0.2); }
.pkmn-psychic { color: #f85888; text-shadow: 0 0 8px rgba(248, 88, 136, 0.4), 0 0 16px rgba(248, 88, 136, 0.2); }
.pkmn-dragon { color: #7038f8; text-shadow: 0 0 8px rgba(112, 56, 248, 0.4), 0 0 16px rgba(112, 56, 248, 0.2); }
.pkmn-dark { color: #5a5366; text-shadow: 0 0 8px rgba(90, 83, 102, 0.4), 0 0 16px rgba(90, 83, 102, 0.2); }
.pkmn-steel { color: #b8b8d0; text-shadow: 0 0 8px rgba(184, 184, 208, 0.4), 0 0 16px rgba(184, 184, 208, 0.2); }
.pkmn-grass { color: #78c850; text-shadow: 0 0 8px rgba(120, 200, 80, 0.4), 0 0 16px rgba(120, 200, 80, 0.2); }
.pkmn-ground { color: #e0c068; text-shadow: 0 0 8px rgba(224, 192, 104, 0.4), 0 0 16px rgba(224, 192, 104, 0.2); }

.dossier-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.85);
  margin: 0;
}

.dossier-regional-content,
.dossier-threat-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.dossier-regional-crystal {
  flex-direction: column;
}

/* Ruby & Sapphire — Region Overview: text centered vertically with image */
.dossier-regional-ruby-sapphire {
  align-items: center;
}

.dossier-regional-crystal .dossier-regional-imgs {
  margin-top: 8px;
}

.dossier-gameplay-content {
  display: block;
}

.dossier-gameplay-with-img {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.dossier-gameplay-crystal {
  flex-wrap: wrap;
}

.dossier-gameplay-crystal .text-accent-bar {
  flex: 1;
  min-width: 200px;
}

.dossier-gameplay-crystal .img-neon-suicune {
  margin-left: auto;
  margin-right: 110px;
}

.dossier-plot-img {
  flex-shrink: 0;
}

.dossier-img-free {
  width: auto !important;
  max-width: none;
  object-fit: contain;
}

.dossier-plot-img.dossier-img-free {
  height: 200px !important;
}

.dossier-img-suicune {
  height: 222px !important;
  flex-shrink: 0;
}


.dossier-regional-imgs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dossier-regional-imgs .dossier-img {
  width: 140px;
  height: 140px;
}

.dossier-threat-imgs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Gold & Silver — Threat: [radio-tower] [info] [red-gyarados], left-aligned */
.dossier-threat-gs {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Crystal — Threat: [tin-tower] [info], aligned in a row */
.dossier-threat-crystal {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: nowrap;
}

.dossier-threat-crystal .dossier-threat-info {
  flex: 1 1 auto;
  min-width: 0;
}

.dossier-threat-crystal .dossier-threat-info .dossier-text {
  max-width: none;
}

.dossier-threat-gs .dossier-img-radio {
  flex-shrink: 0;
}

.dossier-threat-info {
  flex: 0 1 auto;
  min-width: 200px;
  display: block;
}

.dossier-threat-info .dossier-text {
  max-width: 18em;
}

.dossier-threat-gs .dossier-img-auto {
  flex-shrink: 0;
}

/* Gold & Silver — Gyarados row: red-gyarados + red-gyarados-game, below THREAT */
.dossier-threat-gyarados-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 20px;
  flex-wrap: wrap;
}

.dossier-img-gyarados-game {
  height: 193px;
  width: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Illustrative images — plain, no border, no shadow */
.dossier-img {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* Gold & Silver — Whirl Islands (Region Overview) */
.dossier-img-whirl {
  width: 195px;
  height: 211px;
  object-fit: contain;
}

/* Ruby & Sapphire — Dive (Region Overview) +25% size */
.dossier-img-dive {
  width: auto;
  max-width: 344px;
  height: auto;
  object-fit: contain;
}

/* Emerald — Battle Frontier (Region Overview): neon, no float */
.img-neon-battle-frontier::before {
  background: radial-gradient(
    circle,
    rgba(80, 180, 140, 0.65) 0%,
    rgba(50, 150, 120, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 180, 140, 0.45);
  opacity: 0.65;
}

/* Float effect — different bounce for rayquaza, rayquaza-2, deoxys-speed */
.tech-img-float img {
  position: relative;
  z-index: 1;
}

.tech-img-float-1 {
  animation: techImgFloat1 3.5s ease-in-out infinite;
}

.tech-img-float-2 {
  animation: techImgFloat2 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
}

.tech-img-float-3 {
  animation: techImgFloat3 4.2s ease-in-out infinite;
  animation-delay: 0.8s;
}

@keyframes techImgFloat1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes techImgFloat2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes techImgFloat3 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.dossier-img-battle-frontier {
  width: auto;
  max-width: 119px;
  height: auto;
  object-fit: contain;
}

/* Emerald — Groudon vs Kyogre (Threat) */
.dossier-img-groudon-kyogre {
  width: auto;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

/* Ruby & Sapphire — Gameplay: team-aqua | text | team-magma (one row), text centered vertically */
.dossier-gameplay-ruby-sapphire {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: nowrap;
}

.dossier-gameplay-ruby-sapphire .dossier-gameplay-text {
  flex: 1;
  min-width: 200px;
}

/* Push team-magma left to narrow the middle text block */
.dossier-plot-magma {
  margin-right: 3.5rem;
}

.dossier-plot-imgs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dossier-plot-imgs .dossier-img {
  width: auto;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

.dossier-plot-team {
  width: auto !important;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

.dossier-plot-rayquaza {
  width: auto !important;
  max-width: 191px;
  height: auto;
  object-fit: contain;
}

.dossier-plot-rayquaza-2 {
  width: auto !important;
  max-width: 144px;
  height: auto;
  object-fit: contain;
}

/* Yellow — Region Overview: text + gamecard */
.dossier-regional-yellow {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.dossier-img-gamecard {
  width: auto !important;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Yellow — Grid: Gameplay|Region row, Threat|System row */
.dossier-grid-yellow {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.dossier-row-yellow-top,
.dossier-row-yellow-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Yellow — All 4 sections: text left, image right (same row) */
.dossier-gameplay-yellow,
.dossier-regional-yellow,
.dossier-threat-yellow,
.tech-leap-yellow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.dossier-yellow-text {
  flex: 1;
  min-width: 200px;
}

.dossier-yellow-img {
  flex-shrink: 0;
}

.dossier-plot-pikachu {
  width: auto !important;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

.dossier-img-team-rocket {
  width: auto !important;
  max-width: 276px;
  height: 276px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Ruby & Sapphire — Threat: magma-groundon | info | aqua-kyogre (one row, no border-radius) */
.dossier-row-region-only {
  grid-template-columns: 1fr;
}

.dossier-row-swsh-threat,
.dossier-row-sv-threat {
  grid-template-columns: 1fr;
}

.dossier-row-ultra-region-threat {
  grid-template-columns: 1fr 1fr;
}

/* Must follow the base rule above: otherwise `1fr 1fr` wins in the cascade and narrow-landscape never stacks. */
@media (orientation: landscape) and (max-width: 1024px) {
  .dossier-row-ultra-region-threat {
    grid-template-columns: 1fr;
    gap: min(28px, 4vh);
  }
}

.dossier-threat-rs-row {
  margin-top: 0;
}

.dossier-threat-ruby-sapphire {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: nowrap;
}

.dossier-antagonist-rs {
  width: auto !important;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.dossier-img-no-radius {
  border-radius: 0 !important;
}

.dossier-antagonist-imgs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dossier-antagonist-imgs .dossier-img {
  width: auto;
  max-width: 200px;
  height: auto;
  object-fit: contain;
}

/* Gold & Silver — Radio Tower (Threat): original 160x193 */
.dossier-img-radio {
  width: 160px;
  height: 193px;
  object-fit: contain;
}

/* Subtle neon glow for character images (muted, not spread) */
.img-neon-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.img-neon-wrap::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  z-index: 0;
  filter: blur(20px);
  opacity: 0.52;
  pointer-events: none;
}

.img-neon-wrap img {
  position: relative;
  z-index: 1;
}

.img-neon-eusine::before {
  background: radial-gradient(
    circle,
    rgba(180, 157, 207, 0.75) 0%,
    rgba(180, 157, 207, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(180, 157, 207, 0.45);
}

.img-neon-kris::before {
  background: radial-gradient(
    circle,
    rgba(85, 168, 177, 0.75) 0%,
    rgba(85, 168, 177, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(85, 168, 177, 0.45);
}

.img-neon-ethan::before {
  background: radial-gradient(
    circle,
    rgba(250, 90, 123, 0.75) 0%,
    rgba(250, 90, 123, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(250, 90, 123, 0.45);
}

.img-neon-suicune::before {
  background: radial-gradient(
    circle,
    rgba(104, 144, 240, 0.75) 0%,
    rgba(104, 144, 240, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(104, 144, 240, 0.45);
}

/* Emerald — Rayquaza (dragon green neon) */
.img-neon-rayquaza::before {
  background: radial-gradient(
    circle,
    rgba(0, 180, 120, 0.7) 0%,
    rgba(0, 150, 100, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(0, 180, 120, 0.45);
}

/* Ruby & Sapphire — Team Aqua (blue, soft neon) */
.img-neon-aqua::before {
  background: radial-gradient(
    circle,
    rgba(15, 82, 186, 0.6) 0%,
    rgba(59, 130, 246, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
  opacity: 0.7;
}

/* Ruby & Sapphire — Team Magma (red-orange, soft neon) */
.img-neon-magma::before {
  background: radial-gradient(
    circle,
    rgba(224, 17, 95, 0.6) 0%,
    rgba(255, 100, 50, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 100, 50, 0.35);
  opacity: 0.7;
}

/* Ruby & Sapphire — Sceptile (grass green neon) */
.img-neon-sceptile::before {
  background: radial-gradient(
    circle,
    rgba(120, 200, 80, 0.65) 0%,
    rgba(78, 200, 50, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(120, 200, 80, 0.45);
  opacity: 0.65;
}

/* Ruby & Sapphire — Blaziken (fire orange neon) */
.img-neon-blaziken::before {
  background: radial-gradient(
    circle,
    rgba(255, 140, 50, 0.65) 0%,
    rgba(255, 100, 50, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(255, 140, 50, 0.45);
  opacity: 0.65;
}

.dossier-img-rounded {
  border-radius: 12px !important;
}

.dossier-img-battle-tower {
  width: 234px !important;
  height: 283px !important;
  object-fit: contain;
  flex-shrink: 0;
}

/* Gold & Silver — Red Gyarados (Threat): same height as radio-tower (193px), rounded corners */
.dossier-img-auto {
  width: auto;
  height: 193px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}

/* ── Starter Pods — Cryo-Capsules ──────────────────────────────────────── */
.series-starters {
  margin-top: 48px;
  padding-bottom: 24px;
  overflow: visible;
}

.starters-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(140, 200, 255, 0.9);
  text-align: center;
  margin: 0 0 36px;
}

.starter-pods {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  overflow: visible;
}

/* ── Capsule shell ─────────────────────────────────────────── */
.starter-pod {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  text-decoration: none;
  color: inherit;
  overflow: visible;
  transition: transform 0.25s ease-out, filter 0.25s ease-out;
}

/* Curved glass cylinder body */
.pod-specimen {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 28px;
  background:
    linear-gradient(
      180deg,
      rgba(160, 190, 240, 0.13) 0%,
      rgba(20, 35, 80, 0.72) 60%,
      rgba(8, 16, 42, 0.88) 100%
    );
  border-radius: 100px 100px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 4px 0 16px rgba(0, 0, 0, 0.25),
    inset -4px 0 16px rgba(0, 0, 0, 0.25),
    inset 0 -12px 30px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  min-height: 180px;
  transition: box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}

/* Glass sheen — vertical highlight on left side */
.pod-specimen::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 8%;
  width: 18%;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 100%
  );
  border-radius: 50%;
  pointer-events: none;
  filter: blur(4px);
}

/* Scanning line — inside capsule only, type-colored */
.pod-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--glow-color, #6490ff) 20%, transparent) 10%,
    var(--glow-color, #6490ff) 50%,
    color-mix(in srgb, var(--glow-color, #6490ff) 20%, transparent) 90%,
    transparent 100%
  );
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--glow-color, #6490ff) 50%, transparent);
  top: 0;
  animation: capsuleScan 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes capsuleScan {
  0%   { top: 0;                    opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  95%  { top: calc(100% - 2px);     opacity: 0; }
  100% { top: calc(100% - 2px);     opacity: 0; }
}

/* Pokémon sprite */
.pod-sprite {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter:
    drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px color-mix(in srgb, var(--glow-color, #6490ff) 35%, transparent));
  transition: transform 0.25s ease-out, filter 0.25s ease-out;
}

/* Metallic base / Control Panel */
.pod-base {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px 12px;
  background: linear-gradient(
    180deg,
    rgba(8, 18, 40, 0.8) 0%,
    rgba(5, 10, 28, 0.92) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 12px 12px;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}

.pod-id {
  font-family: "Courier New", "Courier", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--glow-color, #6490ff) 85%, white);
  opacity: 0.75;
  text-transform: uppercase;
}

.pod-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
}

.pod-type {
  font-family: "Courier New", "Courier", monospace;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--glow-color, #6490ff) 90%, white);
  opacity: 0.65;
  margin-top: 2px;
}

/* ── Hover state: intensify glow + scale sprite ──── */
.starter-pod:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 16px 48px color-mix(in srgb, var(--glow-color, #6490ff) 25%, transparent));
}

.starter-pod:hover .pod-specimen {
  border-color: color-mix(in srgb, var(--glow-color, #6490ff) 35%, rgba(255,255,255,0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 4px 0 12px rgba(0, 0, 0, 0.15),
    inset -4px 0 12px rgba(0, 0, 0, 0.15),
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, var(--glow-color, #6490ff) 20%, transparent),
    0 0 80px color-mix(in srgb, var(--glow-color, #6490ff) 10%, transparent);
}

.starter-pod:hover .pod-sprite {
  transform: scale(1.1) translateY(-4px);
  filter:
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 20px color-mix(in srgb, var(--glow-color, #6490ff) 60%, transparent));
}

.starter-pod:hover .pod-base {
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* ── Tech Leap Extended (Gold & Silver) ──────────────────────────────────── */
.tech-leap-extended {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tech-leap-crystal .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 8px;
}

.tech-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tech-headline {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(160, 200, 230, 0.75);
  margin: 0;
}

.tech-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.85);
  margin: 0;
}

.tech-imgs-inline {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tech-protagonist-imgs .tech-img {
  height: 200px;
  width: auto;
  object-fit: contain;
}

.tech-move-tutor {
  align-items: flex-end;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.tech-move-tutor .tech-img,
.tech-move-tutor .tech-img-icebeam,
.tech-move-tutor .tech-img-flamethrower {
  height: 124px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
}

.tech-img {
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

/* Buena's Password rewards: floating + neon + slightly smaller */
.tech-rewards-inline {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}


.tech-dratini-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.tech-dratini-text {
  flex: 1;
  min-width: 200px;
}

.tech-subsection {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.tech-subsection .tech-text,
.tech-subsection .tech-text-block {
  flex: 1;
  min-width: 0;
}

.tech-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tech-subsection .tech-img {
  flex-shrink: 0;
}

/* Steel + Dark types: side by side, aligned */
.tech-types-row {
  display: flex;
  gap: 32px;
  align-items: stretch;
  flex-wrap: wrap;
}

.tech-types-row .tech-subsection-energy {
  flex: 1;
  min-width: 280px;
}

/* Gold & Silver "New types": Steel + Dark stack in portrait on small screens (not squeezed side by side). */
@media (max-width: 640px) and (orientation: portrait) {
  .tech-types-row--gs {
    flex-direction: column;
    align-items: stretch;
  }

  .tech-types-row--gs .tech-subsection-energy {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  /* Emerald — Animated Sprites: two columns (3 + 3), same grid pattern as Crystal entrance / GS shiny pairs row */
  .tech-emerald-legends.tech-emerald-legends--sprites-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    max-width: 100%;
    width: 100%;
  }

  .tech-emerald-legends.tech-emerald-legends--sprites-2col .shiny-row {
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  .tech-emerald-legends.tech-emerald-legends--sprites-2col .shiny-cell {
    padding: 10px 8px;
  }

  .tech-emerald-legends.tech-emerald-legends--sprites-2col .shiny-cell img {
    width: min(72px, 28vw);
    height: min(72px, 28vw);
  }

  /* HeartGold & SoulSilver — portrait: THREAT admins Ariana+Archer row, Proton+Petrel row */
  .dossier-threat-imgs.dossier-threat-imgs-hgss.dossier-threat-imgs-hgss-inline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(12px, 3vw);
    width: 100%;
    max-width: 100%;
  }

  .dossier-threat-imgs.dossier-threat-imgs-hgss.dossier-threat-imgs-hgss-inline > .img-neon-wrap {
    flex: 1 1 42%;
    min-width: 0;
    max-width: 48%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  /* Black & White — portrait: Fully Animated Sprites = strict 3×2 grid */
  .tech-leap-black-white .tech-bw-sprite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 12px;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .tech-leap-black-white .tech-bw-sprite-grid > .tech-bw-sprite-row {
    display: contents;
  }

  .tech-leap-black-white .tech-bw-sprite-cell {
    min-width: 0;
  }

  /* X & Y — portrait: Mega Evolution — Venusaur + Blastoise row, Charizard X + Y row */
  .tech-leap-xy .tech-xy-mega-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(12px, 3vw) min(16px, 4vw);
    row-gap: 20px;
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-xy .tech-xy-mega-row .tech-xy-mega-pair {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    max-width: calc(50% - 8px);
    box-sizing: border-box;
  }

  .tech-leap-xy .tech-xy-mega-row .tech-img-xy-mega-form {
    max-width: min(168px, 40vw) !important;
  }

  .tech-leap-xy .tech-xy-mega-row .tech-img-xy-mega-stone {
    max-width: min(48px, 11vw) !important;
  }
}

/* Steel/Dark energy: match text block height, compact size, 4 lines */
.tech-subsection-energy {
  align-items: center;
}

.tech-subsection-energy .tech-text {
  max-width: 24em;
}

.tech-subsection-energy .tech-img-energy {
  max-height: 6.5em;
  width: auto;
  object-fit: contain;
}

/* Steel/Dark energy icons: float + neon glow */
.tech-energy-icon {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  animation: techEnergyFloat 4s ease-in-out infinite;
}

.tech-energy-dark {
  animation-delay: 0.5s;
}

.tech-energy-icon::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  z-index: 0;
  filter: blur(24px);
  opacity: 0.65;
  pointer-events: none;
}

.tech-energy-icon img {
  position: relative;
  z-index: 1;
}

.tech-energy-steel::before {
  background: radial-gradient(
    circle,
    rgba(192, 200, 220, 0.9) 0%,
    rgba(140, 150, 180, 0.5) 40%,
    transparent 70%
  );
  box-shadow: 0 0 30px rgba(192, 200, 220, 0.5);
}

.tech-energy-dark::before {
  background: radial-gradient(
    circle,
    rgba(100, 60, 140, 0.9) 0%,
    rgba(75, 0, 130, 0.5) 40%,
    transparent 70%
  );
  box-shadow: 0 0 30px rgba(100, 60, 140, 0.5);
}

.tech-energy-gold::before {
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.9) 0%,
    rgba(255, 180, 50, 0.5) 40%,
    transparent 70%
  );
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.tech-energy-rare-candy::before {
  background: radial-gradient(
    circle,
    rgba(100, 150, 255, 0.9) 0%,
    rgba(65, 105, 225, 0.5) 40%,
    transparent 70%
  );
  box-shadow: 0 0 30px rgba(100, 150, 255, 0.5);
}

.tech-energy-full-restore::before {
  background: radial-gradient(
    circle,
    rgba(50, 205, 50, 0.9) 0%,
    rgba(34, 139, 34, 0.5) 40%,
    transparent 70%
  );
  box-shadow: 0 0 30px rgba(50, 205, 50, 0.5);
}

.tech-energy-gold-delay {
  animation-delay: 0.5s;
}

.tech-rewards-inline .tech-energy-gold .tech-img-energy,
.tech-rewards-inline .tech-energy-rare-candy .tech-img-energy,
.tech-rewards-inline .tech-energy-full-restore .tech-img-energy {
  max-height: 6.5em;
  width: auto;
  object-fit: contain;
}

.tech-img-dratini {
  max-width: 264px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 32px;
}

/* Ruby & Sapphire — Tech Leap */
/* Tech Leap — Yellow */
.tech-leap-yellow .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 16px;
}

.tech-img-pikachu-walking {
  width: auto;
  max-width: 280px;
  height: auto;
  object-fit: contain;
}

.tech-leap-ruby-sapphire .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 8px;
}

.tech-abilities-imgs .tech-img {
  height: 168px;
  width: auto;
  object-fit: contain;
}

.tech-img-double-battle {
  max-width: 350px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tech-img-milotic {
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Berries & Pokéblocks — text + image same row */
.tech-pokeblock-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.tech-pokeblock-row .text-accent-bar {
  flex: 1;
  min-width: 200px;
}

/* Ruby & Sapphire — Pokéblock: neon behind image + float, size -25% */
.tech-pokeblock-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: visible;
  animation: techPokeblockFloat 3.5s ease-in-out infinite;
}

.tech-pokeblock-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  min-width: 100px;
  min-height: 100px;
  border-radius: 50%;
  z-index: 0;
  filter: blur(24px);
  opacity: 0.38;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 180, 100, 0.5) 0%,
    rgba(255, 140, 80, 0.3) 50%,
    transparent 70%
  );
  box-shadow: 0 0 20px rgba(255, 160, 80, 0.3);
}

.tech-pokeblock-wrap .tech-img-pokeblock {
  position: relative;
  z-index: 1;
}

@keyframes techPokeblockFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.tech-img-pokeblock {
  max-width: 79px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Emerald — legends grid + Deoxys Speed */
.tech-leap-emerald .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 8px;
}

.tech-emerald-legends {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin-top: 12px;
}

.tech-emerald-legends .shiny-cell img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Emerald — Deoxys Speed neon */
.img-neon-deoxys::before {
  background: radial-gradient(
    circle,
    rgba(248, 88, 136, 0.65) 0%,
    rgba(200, 80, 120, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(248, 88, 136, 0.45);
  opacity: 0.65;
}

.tech-img-deoxys-speed {
  max-width: 228px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Diamond & Pearl ───────────────────────────────────────────────────── */

/* Sinnoh map — full width of container */
.dossier-gameplay-diamond-pearl {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-img-sinnoh {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Brilliant Diamond & Shining Pearl */
.dossier-gameplay-bdsp {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* BDSP + dossier-gameplay-with-img: flex row — min-width:0 so map/text can shrink inside viewport */
.dossier-gameplay-with-img.dossier-gameplay-bdsp {
  min-width: 0;
}

.dossier-gameplay-with-img.dossier-gameplay-bdsp .dossier-gameplay-bdsp-sinnoh-wrap,
.dossier-gameplay-with-img.dossier-gameplay-bdsp .text-accent-bar {
  min-width: 0;
}

.dossier-gameplay-bdsp-sinnoh-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-img-bdsp-sinnoh {
  width: auto;
  max-width: min(760px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-regional-bdsp {
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.dossier-regional-bdsp .dossier-regional-bdsp-wrap,
.dossier-regional-bdsp .text-accent-bar {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.dossier-regional-bdsp-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-img-bdsp-grand-underground {
  width: auto;
  max-width: min(693px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-img-bdsp-galactic {
  width: auto;
  max-width: min(560px, 100%);
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* BDSP — Team Galactic neon wrap must shrink with viewport (base .img-neon-wrap is flex-shrink: 0) */
.img-neon-wrap.img-neon-bdsp-galactic {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

.img-neon-wrap.img-neon-bdsp-galactic .dossier-img-bdsp-galactic {
  max-width: 100%;
}

.img-neon-bdsp-galactic::before {
  background: radial-gradient(
    circle,
    rgba(100, 130, 200, 0.5) 0%,
    rgba(70, 90, 160, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(100, 130, 200, 0.48);
  opacity: 0.72;
}

@media (orientation: landscape) and (max-width: 1024px) {
  /* BDSP — Threat: text below Team Galactic art (not squeezed beside it) */
  .dossier-threat-content.dossier-threat-crystal:has(.img-neon-bdsp-galactic) {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 20px;
  }

  .dossier-threat-content.dossier-threat-crystal:has(.img-neon-bdsp-galactic) .dossier-threat-info {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .dossier-threat-content.dossier-threat-crystal:has(.img-neon-bdsp-galactic)
    .dossier-threat-info
    .dossier-text {
    max-width: none;
  }
}

/* Omega Ruby & Alpha Sapphire */
.dossier-gameplay-oras {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-oras-hoenn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-oras-hoenn {
  width: auto;
  max-width: 711px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-gameplay-oras-plot-row {
  width: 100%;
}

.dossier-regional-oras {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.dossier-regional-oras-imgs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.dossier-regional-oras-eon-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-oras-eon {
  width: auto;
  max-width: 716px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-regional-oras-nav-wrap {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.dossier-img-oras-nav {
  width: auto;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-threat-oras-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.dossier-threat-oras-img-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-oras-magma-aqua {
  width: auto;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Tech Leap ORAS */
.tech-leap-oras .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-oras-primal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 16px;
}

.tech-oras-primal-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tech-oras-primal-pair .img-neon-wrap {
  display: flex;
  justify-content: center;
}

.tech-img-oras-primal-form {
  width: auto;
  max-width: 353px;
  height: auto;
  object-fit: contain;
}

.tech-img-oras-orb {
  width: auto;
  max-width: 64px;
  height: auto;
  object-fit: contain;
}

.img-neon-oras-red-orb::before {
  background: radial-gradient(
    circle,
    rgba(220, 80, 60, 0.55) 0%,
    rgba(180, 50, 40, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(220, 80, 60, 0.5);
  opacity: 0.7;
}

.img-neon-oras-blue-orb::before {
  background: radial-gradient(
    circle,
    rgba(80, 140, 220, 0.55) 0%,
    rgba(50, 100, 180, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(80, 140, 220, 0.5);
  opacity: 0.7;
}

.img-neon-oras-groudon::before {
  background: radial-gradient(
    circle,
    rgba(220, 120, 60, 0.5) 0%,
    rgba(180, 80, 40, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(220, 120, 60, 0.45);
  opacity: 0.68;
}

.img-neon-oras-kyogre::before {
  background: radial-gradient(
    circle,
    rgba(80, 150, 230, 0.5) 0%,
    rgba(50, 110, 190, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 150, 230, 0.45);
  opacity: 0.68;
}

/* Let's Go Pikachu & Eevee */
.dossier-gameplay-lets-go {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-lets-go-kanto-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-lets-go-kanto {
  width: auto;
  max-width: 756px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-gameplay-lets-go-plot-row {
  width: 100%;
}

.dossier-regional-lets-go {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.dossier-regional-lets-go-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.dossier-regional-lets-go-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-regional-lets-go-img-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

.dossier-img-lets-go-walking {
  width: auto;
  max-width: 384px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-threat-lets-go-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.dossier-threat-lets-go-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.dossier-threat-lets-go-jessie-james {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.dossier-img-lets-go-antagonist {
  width: auto;
  max-width: 275px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.img-neon-lets-go-james::before {
  background: radial-gradient(
    circle,
    rgba(80, 150, 220, 0.5) 0%,
    rgba(50, 110, 180, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(80, 150, 220, 0.45);
  opacity: 0.68;
}

.img-neon-lets-go-jessie::before {
  background: radial-gradient(
    circle,
    rgba(255, 100, 130, 0.5) 0%,
    rgba(220, 60, 100, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(255, 100, 130, 0.45);
  opacity: 0.68;
}

.img-neon-lets-go-giovanni::before {
  background: radial-gradient(
    circle,
    rgba(120, 100, 80, 0.5) 0%,
    rgba(80, 60, 50, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(140, 120, 100, 0.45);
  opacity: 0.68;
}

.tech-leap-lets-go .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-lets-go-gopark-bonding-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.tech-lets-go-gopark-bonding-row .tech-item {
  flex: 1 1 280px;
  min-width: 0;
}

.tech-lets-go-secret-wrap,
.tech-lets-go-gopark-wrap,
.tech-lets-go-bonding-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.tech-img-lets-go-secret {
  width: auto;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-img-lets-go-gopark {
  width: auto;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-img-lets-go-bonding {
  width: auto;
  max-width: 378px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Let's Go — narrow landscape: GO Park + Partner Bonding stacked; Team Rocket trio one row (rules after base .tech-lets-go-gopark-bonding-row / .dossier-threat-lets-go-imgs). */
@media (orientation: landscape) and (max-width: 1024px) {
  .tech-leap-lets-go .tech-lets-go-gopark-bonding-row {
    flex-direction: column;
    align-items: stretch;
    gap: min(22px, 3vh);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-lets-go .tech-lets-go-gopark-bonding-row .tech-item {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-lets-go .tech-lets-go-gopark-wrap,
  .tech-leap-lets-go .tech-lets-go-bonding-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-lets-go .tech-img-lets-go-gopark,
  .tech-leap-lets-go .tech-img-lets-go-bonding {
    max-width: min(420px, 92vw);
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .dossier-threat-lets-go-imgs {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: min(4px, 1.2vw);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dossier-threat-lets-go-jessie-james {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: min(4px, 1.2vw);
  }

  .dossier-threat-lets-go-jessie-james > .img-neon-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-lets-go-imgs > .img-neon-wrap.img-neon-lets-go-giovanni {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-lets-go-imgs .dossier-img-lets-go-antagonist {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(280px, 52vh);
    flex-shrink: 1;
    min-width: 0;
    object-fit: contain;
    box-sizing: border-box;
  }

  .dossier-gameplay-lets-go-kanto-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .dossier-img-lets-go-kanto {
    max-width: min(756px, 92vw);
    width: auto;
    height: auto;
  }

  .dossier-regional-lets-go-row {
    min-width: 0;
    max-width: 100%;
  }

  .dossier-img-lets-go-walking {
    max-width: min(384px, 88vw);
    width: auto;
    height: auto;
  }
}

/* Sun & Moon */
.dossier-gameplay-sun-moon {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-sunmoon-plot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.dossier-gameplay-sunmoon-alola-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-sunmoon-alola {
  width: auto;
  max-width: 728px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-gameplay-sunmoon-ultra-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-sunmoon-ultra {
  width: auto;
  max-width: 504px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.img-neon-sunmoon-ultra::before {
  background: radial-gradient(
    circle,
    rgba(120, 80, 180, 0.5) 0%,
    rgba(80, 50, 140, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(120, 80, 180, 0.45);
  opacity: 0.68;
}

.dossier-regional-sun-moon {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.dossier-regional-sunmoon-alola-forms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.dossier-img-sunmoon-alola-form {
  width: auto;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.img-neon-sunmoon-alola::before {
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.45) 0%,
    rgba(200, 150, 80, 0.25) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 200, 100, 0.4);
  opacity: 0.65;
}

.dossier-threat-sun-moon-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.dossier-threat-sun-moon-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.dossier-img-sunmoon-antagonist {
  width: auto;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-img-sunmoon-skull {
  max-width: 221px;
}

.dossier-img-sunmoon-aether {
  max-width: 174px;
}

.img-neon-sunmoon-skull::before {
  background: radial-gradient(
    circle,
    rgba(80, 60, 100, 0.5) 0%,
    rgba(50, 40, 70, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(80, 60, 100, 0.45);
  opacity: 0.68;
}

.img-neon-sunmoon-aether::before {
  background: radial-gradient(
    circle,
    rgba(100, 180, 255, 0.5) 0%,
    rgba(60, 150, 220, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(100, 180, 255, 0.45);
  opacity: 0.68;
}

.tech-leap-sun-moon .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-sunmoon-zmove-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-top: 16px;
}

.tech-sunmoon-zmove-left {
  flex: 1 1 280px;
  min-width: 0;
}

.tech-sunmoon-zmove-left .img-neon-wrap {
  margin-top: 16px;
}

.tech-sunmoon-zmove-right {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.tech-sunmoon-zmove-right .tech-img-sunmoon-zmove {
  margin-right: 136px;
}

.tech-img-sunmoon-zmove {
  width: auto;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-img-sunmoon-zmove-pikachu {
  width: auto;
  max-width: 446px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  margin-left: 50px;
}

.img-neon-sunmoon-zmove::before {
  background: radial-gradient(
    circle,
    rgba(255, 220, 100, 0.35) 0%,
    rgba(255, 180, 80, 0.2) 50%,
    transparent 75%
  );
  box-shadow: 0 0 18px rgba(255, 220, 100, 0.3);
  opacity: 0.6;
}

.tech-sunmoon-pokeride-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.tech-sunmoon-pokeride-left {
  flex: 1 1 400px;
  min-width: 0;
}

.tech-sunmoon-pokeride-right {
  flex-shrink: 0;
}

.tech-img-sunmoon-pokeride {
  width: auto;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-sunmoon-ride-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.tech-sunmoon-ride-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  min-height: 80px;
}

.tech-sunmoon-ride-glass img {
  width: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

.tech-sunmoon-festival-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
}

.tech-sunmoon-festival-text {
  flex: 1 1 280px;
  min-width: 0;
}

.tech-sunmoon-festival-img-wrap {
  flex-shrink: 0;
}

.tech-img-sunmoon-festival {
  width: auto;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-oras-secret-areanav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.tech-oras-secret-areanav-row .tech-item {
  flex: 1 1 280px;
  min-width: 0;
}

.tech-oras-secret-base-wrap,
.tech-oras-cosplay-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.tech-img-oras-secret-base {
  width: auto;
  max-width: 448px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-img-oras-cosplay {
  width: auto;
  max-width: 362px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-img-johto-hgss {
  max-width: 75%;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* FireRed & LeafGreen — plot image full width, regional, threat, tech */
.dossier-gameplay-firered-leafgreen {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-img-firered-plot {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-regional-firered-leafgreen {
  align-items: flex-start;
}

/* Team Rocket — size like Jupiter (max-width 276px), neon dark red */
.dossier-img-team-rocket-frlg {
  width: auto;
  max-width: 276px;
  height: auto;
  object-fit: contain;
}

.img-neon-team-rocket-frlg::before {
  background: radial-gradient(
    circle,
    rgba(180, 50, 50, 0.6) 0%,
    rgba(120, 30, 30, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(180, 50, 50, 0.5);
  opacity: 0.7;
}

.tech-leap-firered-leafgreen .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

/* System — 2 columns: Col1 = VS Seeker, Col2 = Wireless + Help */
.tech-frlg-two-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
}

.tech-frlg-col {
  flex: 1;
  min-width: 240px;
}

.tech-frlg-col-1 {
  max-width: 50%;
}

.tech-frlg-col-2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tech-frlg-vs-seeker {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.tech-frlg-vs-seeker .text-accent-bar {
  flex: 1;
  min-width: 200px;
}

/* VS Seeker — neon amber/orange, float effect only for this image */
.img-neon-vs-seeker::before {
  background: radial-gradient(
    circle,
    rgba(255, 160, 60, 0.6) 0%,
    rgba(220, 130, 40, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 160, 60, 0.5);
  opacity: 0.7;
}

.tech-img-float-vs-seeker {
  animation: techImgFloat1 3.5s ease-in-out infinite;
}

.tech-img-vs-seeker {
  width: auto;
  max-width: 84px;
  height: auto;
  object-fit: contain;
}

/* ── HeartGold & SoulSilver ─────────────────────────────────────────────── */
.dossier-regional-heartgold-soulsilver {
  align-items: center;
}

.dossier-regional-imgs-hgss {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.dossier-img-hgss-region {
  width: auto;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

.img-neon-pokeathlon::before {
  background: radial-gradient(
    circle,
    rgba(255, 200, 80, 0.6) 0%,
    rgba(220, 160, 40, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 200, 80, 0.5);
  opacity: 0.7;
}

.img-neon-safari-zone::before {
  background: radial-gradient(
    circle,
    rgba(80, 180, 100, 0.6) 0%,
    rgba(50, 140, 70, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 180, 100, 0.5);
  opacity: 0.7;
}

/* Threat — 4 admins, size like Lyra, same row as info */
.dossier-threat-hgss-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.dossier-threat-hgss-single-row {
  flex-wrap: nowrap;
}

.dossier-threat-info-hgss {
  flex: 0 1 auto;
  max-width: 28em;
  min-width: 0;
}

.dossier-threat-imgs-hgss {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.dossier-threat-imgs-hgss-inline {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.dossier-img-hgss-admin {
  width: auto;
  max-width: 276px;
  height: auto;
  object-fit: contain;
}

.dossier-img-hgss-lyra-size {
  max-width: 120px !important;
}

.dossier-img-hgss-proton-size {
  max-width: 153px !important;
}

.tech-img-hgss-lyra-size {
  max-width: 120px;
}

.tech-img-hgss-electivire-size {
  max-width: 218px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.img-neon-hgss-ariana::before,
.img-neon-hgss-archer::before,
.img-neon-hgss-proton::before,
.img-neon-hgss-petrel::before {
  background: radial-gradient(
    circle,
    rgba(180, 50, 50, 0.6) 0%,
    rgba(120, 30, 30, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(180, 50, 50, 0.5);
  opacity: 0.7;
}

/* Tech leap — Walking + Pokéwalker */
.tech-leap-heartgold-soulsilver .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-hgss-walking-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}

.tech-img-hgss-walking {
  width: auto;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

.img-neon-hgss-ethan::before,
.img-neon-hgss-lyra::before {
  background: radial-gradient(
    circle,
    rgba(255, 210, 100, 0.55) 0%,
    rgba(220, 170, 60, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 210, 100, 0.45);
  opacity: 0.65;
}

.img-neon-hgss-typhlosion::before {
  background: radial-gradient(
    circle,
    rgba(255, 140, 60, 0.6) 0%,
    rgba(220, 100, 40, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 140, 60, 0.5);
  opacity: 0.7;
}

.img-neon-hgss-meganium::before {
  background: radial-gradient(
    circle,
    rgba(100, 200, 100, 0.6) 0%,
    rgba(60, 160, 70, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(100, 200, 100, 0.5);
  opacity: 0.7;
}

.tech-hgss-pokewalker {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.tech-hgss-pokewalker .text-accent-bar {
  flex: 1;
  min-width: 200px;
}

.tech-img-hgss-pokewalker {
  width: auto;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

.img-neon-hgss-pokewalker::before {
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.6) 0%,
    rgba(220, 160, 50, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 200, 100, 0.5);
  opacity: 0.7;
}

/* ── Black & White ─────────────────────────────────────────────────────── */
.dossier-gameplay-black-white {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-bw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-gameplay-bw-text {
  flex: 1;
  min-width: 200px;
}

.dossier-gameplay-bw-img {
  flex-shrink: 0;
}

.dossier-plot-img.dossier-img-free.dossier-img-bw-n {
  width: auto !important;
  max-width: 183px !important;
  height: auto !important;
  object-fit: contain;
}

.img-neon-bw-n::before {
  background: radial-gradient(
    circle,
    rgba(80, 200, 120, 0.6) 0%,
    rgba(50, 160, 80, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 200, 120, 0.5);
  opacity: 0.7;
}

.dossier-regional-black-white {
  align-items: center;
}

.dossier-img-unova {
  width: auto;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Threat — Team Plasma, Reshiram, Zekrom */
.dossier-threat-bw-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-threat-bw-stacked {
  flex-direction: column;
  align-items: stretch;
}

.dossier-threat-info-bw {
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
}

.dossier-threat-info-bw .dossier-text {
  max-width: none;
}

.dossier-threat-imgs-bw {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.dossier-threat-imgs-bw-row {
  justify-content: center;
}

.dossier-img-bw-antagonist {
  width: auto;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

.dossier-img-bw-plasma-size {
  width: auto;
  max-width: 276px;
  height: auto;
  object-fit: contain;
}

.dossier-img-bw-legend-size {
  width: auto;
  max-width: 266px;
  height: auto;
  object-fit: contain;
}

.dossier-img-bw-reshiram-size {
  width: auto;
  max-width: 293px;
  height: auto;
  object-fit: contain;
}

.dossier-img-bw-zekrom-size {
  width: auto;
  max-width: 306px;
  height: auto;
  object-fit: contain;
}

.img-neon-bw-plasma::before {
  background: radial-gradient(
    circle,
    rgba(80, 60, 100, 0.6) 0%,
    rgba(50, 40, 70, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 60, 100, 0.5);
  opacity: 0.7;
}

.img-neon-bw-reshiram::before {
  background: radial-gradient(
    circle,
    rgba(255, 200, 180, 0.6) 0%,
    rgba(220, 150, 120, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 200, 180, 0.5);
  opacity: 0.7;
}

.img-neon-bw-zekrom::before {
  background: radial-gradient(
    circle,
    rgba(100, 150, 220, 0.6) 0%,
    rgba(60, 100, 180, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(100, 150, 220, 0.5);
  opacity: 0.7;
}

/* Black 2 & White 2 — plot, regional, conflict, tech */
.dossier-gameplay-b2w2-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-gameplay-b2w2-text {
  flex: 1;
  min-width: 200px;
}

.dossier-gameplay-b2w2-img {
  flex-shrink: 0;
}

.dossier-img-b2w2-aspertia {
  width: auto;
  max-width: 344px;
  height: auto;
  object-fit: contain;
}

.img-neon-b2w2-aspertia::before {
  background: radial-gradient(
    circle,
    rgba(80, 200, 120, 0.6) 0%,
    rgba(50, 160, 80, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 200, 120, 0.5);
  opacity: 0.7;
}

.dossier-regional-b2w2 {
  align-items: center;
  flex-direction: column;
}

.dossier-regional-imgs-b2w2 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.dossier-regional-imgs-b2w2 .dossier-regional-b2w2-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  width: 100%;
}

/* Override .dossier-regional-imgs .dossier-img (140x140) — B2W2 images need larger size */
.dossier-regional-imgs-b2w2 .dossier-img-b2w2-region {
  width: auto !important;
  height: auto !important;
  max-width: 297px;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-regional-imgs-b2w2 .dossier-img-b2w2-joinavenue {
  max-width: 157px !important;
}

.img-neon-b2w2-pokestar::before,
.img-neon-b2w2-joinavenue::before,
.img-neon-b2w2-tournament::before {
  background: radial-gradient(
    circle,
    rgba(80, 180, 140, 0.6) 0%,
    rgba(50, 150, 120, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 180, 140, 0.5);
  opacity: 0.7;
}

.dossier-threat-b2w2 .dossier-threat-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-threat-b2w2-row1 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-threat-info-b2w2 {
  flex: 1;
  min-width: 200px;
}

.dossier-threat-b2w2-imgs-row1 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  flex-shrink: 0;
}

.dossier-img-b2w2-plasma {
  width: auto;
  max-width: 276px;
  height: auto;
  object-fit: contain;
}

.dossier-img-b2w2-kyurem-threat {
  width: auto;
  max-width: 246px;
  height: auto;
  object-fit: contain;
}

.img-neon-b2w2-kyurem::before {
  background: radial-gradient(
    circle,
    rgba(135, 206, 250, 0.6) 0%,
    rgba(100, 180, 230, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(135, 206, 250, 0.5);
  opacity: 0.7;
}

.img-neon-b2w2-plasma::before {
  background: radial-gradient(
    circle,
    rgba(80, 60, 100, 0.6) 0%,
    rgba(50, 40, 70, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 60, 100, 0.5);
  opacity: 0.7;
}

.dossier-threat-b2w2-row2 {
  width: 100%;
}

.dossier-img-b2w2-ghetsis {
  width: 93%;
  max-width: 93%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tech-leap-black2-white2 .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-b2w2-kyurem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.tech-img-b2w2-kyurem {
  width: auto;
  max-width: 299px;
  height: auto;
  object-fit: contain;
}

.img-neon-b2w2-white-kyurem::before {
  background: radial-gradient(
    circle,
    rgba(255, 180, 80, 0.6) 0%,
    rgba(220, 140, 40, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 180, 80, 0.5);
  opacity: 0.7;
}

.img-neon-b2w2-black-kyurem::before {
  background: radial-gradient(
    circle,
    rgba(80, 140, 255, 0.6) 0%,
    rgba(50, 100, 220, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 140, 255, 0.5);
  opacity: 0.7;
}

/* X & Y — plot, regional, conflict, tech */
.dossier-gameplay-xy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-xy-kalos-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-xy-kalos {
  width: auto;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-img-xy-lumiose {
  width: auto;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-regional-xy {
  align-items: center;
}

.dossier-threat-xy .dossier-threat-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-threat-xy-row1 {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: center;
}

.dossier-threat-xy-row1 .img-neon-wrap {
  flex-shrink: 0;
}

.dossier-threat-info-xy {
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
}

.dossier-threat-info-xy .dossier-text {
  max-width: none;
}

.dossier-img-xy-flare {
  width: auto;
  max-width: 177px;
  height: auto;
  object-fit: contain;
}

.img-neon-xy-flare::before {
  background: radial-gradient(
    circle,
    rgba(255, 100, 80, 0.6) 0%,
    rgba(220, 60, 40, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 100, 80, 0.5);
  opacity: 0.7;
}

.dossier-threat-xy-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dossier-img-xy-legend {
  width: auto;
  max-width: 285px;
  height: auto;
  object-fit: contain;
}

.img-neon-xy-xerneas::before {
  background: radial-gradient(
    circle,
    rgba(100, 200, 255, 0.6) 0%,
    rgba(60, 150, 220, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(100, 200, 255, 0.5);
  opacity: 0.7;
}

.img-neon-xy-yveltal::before {
  background: radial-gradient(
    circle,
    rgba(180, 80, 100, 0.6) 0%,
    rgba(140, 50, 70, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(180, 80, 100, 0.5);
  opacity: 0.7;
}

.tech-leap-xy .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-xy-mega-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.tech-xy-mega-pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.tech-img-xy-mega-stone {
  width: auto;
  max-width: 52px;
  height: auto;
  object-fit: contain;
}

.tech-img-xy-mega-form {
  width: auto;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

.img-neon-xy-mega::before {
  background: radial-gradient(
    circle,
    rgba(180, 120, 255, 0.5) 0%,
    rgba(140, 80, 200, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(180, 120, 255, 0.4);
  opacity: 0.7;
}

.tech-xy-fairy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.tech-xy-fairy-text {
  flex: 1;
  min-width: 200px;
}

.tech-img-xy-fairy {
  width: auto;
  max-width: 125px;
  height: auto;
  object-fit: contain;
}

.img-neon-xy-fairy::before {
  background: radial-gradient(
    circle,
    rgba(255, 180, 220, 0.6) 0%,
    rgba(220, 140, 180, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 180, 220, 0.5);
  opacity: 0.7;
}

/* Tech leap — sprite grid 3x2 + Battle Subway */
.tech-leap-black-white .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-bw-sprite-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  max-width: 483px;
}

.tech-bw-sprite-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.tech-bw-sprites-subway-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.tech-item-sprites {
  flex: 1;
  min-width: 280px;
}

.tech-item-battle-subway {
  flex: 1;
  min-width: 280px;
}

.tech-bw-sprite-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tech-img-bw-sprite {
  width: auto;
  max-width: 92px;
  height: auto;
  object-fit: contain;
}

.img-neon-bw-cobalion::before {
  background: radial-gradient(
    circle,
    rgba(100, 150, 220, 0.55) 0%,
    rgba(60, 100, 180, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(100, 150, 220, 0.45);
  opacity: 0.65;
}

.img-neon-bw-terrakion::before {
  background: radial-gradient(
    circle,
    rgba(200, 120, 80, 0.55) 0%,
    rgba(160, 80, 50, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(200, 120, 80, 0.45);
  opacity: 0.65;
}

.img-neon-bw-virizion::before {
  background: radial-gradient(
    circle,
    rgba(100, 200, 120, 0.55) 0%,
    rgba(60, 160, 80, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(100, 200, 120, 0.45);
  opacity: 0.65;
}

.tech-bw-battle-subway {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.tech-bw-battle-subway .text-accent-bar {
  flex: 1;
  min-width: 200px;
}

.tech-img-bw-battle-subway {
  width: auto;
  max-width: 200px;
  height: auto;
  object-fit: contain;
}

.img-neon-bw-battle-subway::before {
  background: radial-gradient(
    circle,
    rgba(255, 180, 80, 0.55) 0%,
    rgba(220, 140, 50, 0.3) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 180, 80, 0.45);
  opacity: 0.65;
}

/* Region Overview — Pokétch images */
.dossier-regional-diamond-pearl {
  align-items: center;
}

.dossier-regional-diamond-pearl .dossier-regional-imgs .dossier-img {
  width: auto;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

/* Threat — row 1: text + Mars + Jupiter; row 2: Dialga (left), Palkia (right) */
.dossier-threat-diamond-pearl {
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.dossier-threat-row-dp-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

.dossier-threat-info-dp {
  flex: 0 1 auto;
  max-width: 22em;
}

.dossier-threat-info-dp .dossier-text {
  max-width: none;
}

.dossier-threat-imgs-dp-top {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-shrink: 0;
}

.dossier-threat-imgs-dp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  align-items: center;
  width: 100%;
}

.dossier-threat-dp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dossier-threat-dp-left {
  justify-content: flex-start;
}

.dossier-threat-dp-right {
  justify-content: flex-start;
}

.dossier-threat-dp-legend {
  margin-top: 4px;
}

/* Mars +5%, Jupiter unchanged, Dialga +10%, Palkia +10% */
.dossier-img-dp-mars {
  width: auto;
  max-width: 118px;
  height: auto;
  object-fit: contain;
}

.dossier-img-dp-dialga {
  width: auto;
  max-width: 337px;
  height: auto;
  object-fit: contain;
}

.dossier-img-dp-palkia {
  width: auto;
  max-width: 231px;
  height: auto;
  object-fit: contain;
}

.dossier-img-dp-jupiter,
.dossier-img-dp-saturn {
  width: auto;
  max-width: 276px;
  height: 276px;
  object-fit: contain;
}

/* Mars — orange neon (hair color) */
.img-neon-mars::before {
  background: radial-gradient(
    circle,
    rgba(255, 140, 60, 0.65) 0%,
    rgba(255, 100, 50, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 140, 60, 0.45);
  opacity: 0.65;
}

/* Jupiter — pink neon (hair color) */
.img-neon-jupiter::before {
  background: radial-gradient(
    circle,
    rgba(255, 150, 180, 0.65) 0%,
    rgba(255, 100, 140, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(255, 150, 180, 0.45);
  opacity: 0.65;
}

/* Saturn — blue neon (hair color) */
.img-neon-saturn::before {
  background: radial-gradient(
    circle,
    rgba(80, 160, 220, 0.65) 0%,
    rgba(60, 130, 200, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 160, 220, 0.45);
  opacity: 0.65;
}

/* Dialga — steel/dragon blue neon */
.img-neon-dialga::before {
  background: radial-gradient(
    circle,
    rgba(112, 56, 248, 0.65) 0%,
    rgba(80, 120, 200, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(112, 56, 248, 0.45);
  opacity: 0.65;
}

/* Palkia — water/dragon pink-purple neon */
.img-neon-palkia::before {
  background: radial-gradient(
    circle,
    rgba(168, 120, 248, 0.65) 0%,
    rgba(120, 80, 200, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(168, 120, 248, 0.45);
  opacity: 0.65;
}

.dossier-threat-dp-row {
  margin-top: 0;
}

/* ── Platinum ───────────────────────────────────────────────────────────── */

/* Region Overview — Distortion World full width */
.dossier-regional-platinum {
  flex-direction: column;
  gap: 20px;
}

.dossier-img-distortion-world {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Threat — text left, Cyrus & Charon right, same row */
.dossier-threat-platinum-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.dossier-threat-info-platinum {
  flex: 1;
  min-width: 220px;
  max-width: 32em;
}

.dossier-threat-imgs-platinum {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.dossier-img-platinum-antagonist {
  width: auto;
  max-width: 276px;
  height: 276px;
  object-fit: contain;
}

/* Compound selector beats .img-neon-muted::before so Team Galactic glow shows */
.img-neon-wrap.img-neon-cyrus::before {
  background: radial-gradient(
    circle,
    rgba(80, 60, 140, 0.65) 0%,
    rgba(60, 40, 120, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 28px rgba(80, 60, 140, 0.6);
  opacity: 0.8;
}

.img-neon-wrap.img-neon-charon::before {
  background: radial-gradient(
    circle,
    rgba(180, 100, 60, 0.65) 0%,
    rgba(160, 80, 40, 0.4) 50%,
    transparent 75%
  );
  box-shadow: 0 0 28px rgba(180, 100, 60, 0.6);
  opacity: 0.8;
}

/* Tech Leap — Platinum */
.tech-leap-platinum .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 8px;
}

/* Battle Frontier — text + image same row, text vertically centered with image */
.tech-item.tech-platinum-battle-frontier {
  overflow: visible;
}

.tech-platinum-battle-frontier-content.tech-wrap-content {
  overflow: visible;
}

.tech-platinum-battle-frontier-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tech-platinum-battle-frontier-content .text-accent-bar {
  flex: 1;
  min-width: 0;
}

.tech-platinum-battle-frontier-content .img-neon-wrap {
  flex-shrink: 0;
}

.tech-img-platinum-battle-frontier {
  width: auto;
  max-width: 168px;
  height: auto;
  object-fit: contain;
}

.tech-platinum-dex-imgs {
  margin-top: 16px;
}

/* Wraps Shaymin row + Giratina row; landscape mobile stacks two image rows (see landscape media) */
.tech-platinum-dex-rows-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tech-platinum-dex-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.tech-platinum-dex-row .tech-img {
  width: auto;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

/* Standalone row: altered, orb, origin — centered */
.tech-platinum-dex-row-altered {
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 8px;
}

.tech-img-platinum-altered,
.tech-img-platinum-origin {
  max-width: 337px !important;
}

.tech-img-platinum-orb {
  max-width: 84px !important;
}

.tech-img-platinum-gracidea {
  max-width: 50px !important;
}

.tech-img-platinum-land {
  max-width: 90px !important;
}

.tech-img-platinum-sky {
  max-width: 132px !important;
}

/* Platinum dex images — neon colors */
.img-neon-platinum-altered::before {
  background: radial-gradient(circle, rgba(120, 80, 180, 0.6) 0%, rgba(80, 50, 140, 0.35) 50%, transparent 75%);
  box-shadow: 0 0 22px rgba(120, 80, 180, 0.45);
  opacity: 0.65;
}

.img-neon-platinum-orb::before {
  background: radial-gradient(circle, rgba(80, 140, 220, 0.6) 0%, rgba(60, 120, 200, 0.35) 50%, transparent 75%);
  box-shadow: 0 0 22px rgba(80, 140, 220, 0.45);
  opacity: 0.65;
}

.img-neon-platinum-origin::before {
  background: radial-gradient(circle, rgba(100, 60, 160, 0.6) 0%, rgba(70, 40, 130, 0.35) 50%, transparent 75%);
  box-shadow: 0 0 22px rgba(100, 60, 160, 0.45);
  opacity: 0.65;
}

.img-neon-platinum-land::before {
  background: radial-gradient(circle, rgba(140, 180, 100, 0.6) 0%, rgba(100, 150, 80, 0.35) 50%, transparent 75%);
  box-shadow: 0 0 22px rgba(140, 180, 100, 0.45);
  opacity: 0.65;
}

.img-neon-platinum-gracidea::before {
  background: radial-gradient(circle, rgba(220, 140, 180, 0.6) 0%, rgba(200, 100, 160, 0.35) 50%, transparent 75%);
  box-shadow: 0 0 22px rgba(220, 140, 180, 0.45);
  opacity: 0.65;
}

.img-neon-platinum-sky::before {
  background: radial-gradient(circle, rgba(140, 200, 255, 0.6) 0%, rgba(100, 170, 230, 0.35) 50%, transparent 75%);
  box-shadow: 0 0 22px rgba(140, 200, 255, 0.45);
  opacity: 0.65;
}

/* Tech Leap — Diamond & Pearl */
.tech-leap-diamond-pearl .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 8px;
}

.tech-dp-physical-special {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tech-dp-physical-special .tech-img {
  width: auto;
  max-width: 120px;
  height: auto;
  object-fit: contain;
}

/* Electivire +20% (182→218px), Rhyperior +8% (168→181px) */
.tech-img-electivire {
  width: auto;
  max-width: 218px;
  height: auto;
  object-fit: contain;
}

.tech-img-rhyperior {
  width: auto;
  max-width: 181px;
  height: auto;
  object-fit: contain;
}

.tech-dp-evolutions {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tech-dp-evolutions .tech-img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Global Connection & PokéRadar — wrap text (image floats, text wraps) */
.tech-wrap-content {
  overflow: hidden;
}

/* PokéRadar — allow neon to overflow outside frame */
.tech-dp-pokeradar-content.tech-wrap-content {
  overflow: visible;
}

.tech-dp-pokeradar-content::after {
  content: "";
  display: table;
  clear: both;
}

.tech-item.tech-dp-pokeradar {
  overflow: visible;
}

.tech-img-wrap-left {
  float: left;
  margin-right: 20px;
  margin-bottom: 12px;
}

.tech-img-wrap-right {
  float: right;
  margin-left: 20px;
  margin-bottom: 12px;
}

.tech-dp-global-content .text-accent-bar {
  overflow: hidden;
}

.tech-dp-pokeradar-content .text-accent-bar {
  overflow: hidden;
}

.tech-img-gts {
  width: auto;
  max-width: 280px;
  height: auto;
  object-fit: contain;
}

.tech-img-pokeradar {
  width: auto;
  max-width: 136px;
  height: auto;
  object-fit: contain;
}

/* Electivire — electric yellow neon */
.img-neon-electivire::before {
  background: radial-gradient(
    circle,
    rgba(248, 208, 48, 0.65) 0%,
    rgba(248, 208, 48, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(248, 208, 48, 0.45);
  opacity: 0.65;
}

/* Rhyperior — ground/rock earthy neon */
.img-neon-rhyperior::before {
  background: radial-gradient(
    circle,
    rgba(224, 192, 104, 0.6) 0%,
    rgba(184, 160, 56, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(184, 160, 56, 0.4);
  opacity: 0.6;
}

/* Pokétch Red — red accent */
.img-neon-poketch-red::before {
  background: radial-gradient(
    circle,
    rgba(220, 80, 80, 0.65) 0%,
    rgba(200, 60, 60, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(220, 80, 80, 0.45);
  opacity: 0.65;
}

/* Pokétch Blue — blue accent */
.img-neon-poketch-blue::before {
  background: radial-gradient(
    circle,
    rgba(80, 140, 220, 0.65) 0%,
    rgba(60, 120, 200, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 140, 220, 0.45);
  opacity: 0.65;
}

/* Pokétch float — different bounce heights */
.tech-img-float-poketch-red {
  animation: techImgFloat1 3.2s ease-in-out infinite;
}

.tech-img-float-poketch-blue {
  animation: techImgFloat2 2.6s ease-in-out infinite;
  animation-delay: 0.5s;
}

.dossier-regional-imgs-poketch .img-neon-wrap {
  flex-shrink: 0;
}

.dossier-regional-imgs-poketch .dossier-img {
  width: auto;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

/* Muted neon — for GTS, physical, special, status */
.img-neon-muted::before {
  background: radial-gradient(
    circle,
    rgba(140, 180, 255, 0.25) 0%,
    rgba(100, 150, 220, 0.12) 50%,
    transparent 75%
  );
  box-shadow: 0 0 16px rgba(100, 150, 220, 0.2);
  opacity: 0.5;
}

/* Yellow — gamecard & pikachu neon (yellow/electric) */
.img-neon-yellow-gamecard::before,
.img-neon-pikachu::before {
  background: radial-gradient(
    circle,
    rgba(255, 220, 80, 0.6) 0%,
    rgba(240, 180, 40, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(255, 220, 80, 0.45);
  opacity: 0.65;
}

/* Yellow — Team Rocket neon (red/dark) */
.img-neon-team-rocket::before {
  background: radial-gradient(
    circle,
    rgba(200, 60, 60, 0.5) 0%,
    rgba(140, 40, 40, 0.25) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(200, 60, 60, 0.4);
  opacity: 0.6;
}

/* Yellow — Pikachu walking (tech leap) */
.img-neon-pikachu-walking::before {
  background: radial-gradient(
    circle,
    rgba(255, 220, 80, 0.35) 0%,
    rgba(240, 180, 40, 0.18) 50%,
    transparent 75%
  );
  box-shadow: 0 0 16px rgba(255, 220, 80, 0.3);
  opacity: 0.45;
}

/* PokéRadar — green/tech neon */
.img-neon-pokeradar::before {
  background: radial-gradient(
    circle,
    rgba(80, 200, 120, 0.65) 0%,
    rgba(60, 180, 100, 0.35) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(80, 200, 120, 0.45);
  opacity: 0.65;
}

/* Double Battles & Pokémon Contests — text + image same row */
.tech-text-img-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Double Battles: image aligned with text row */
.tech-text-img-row-double {
  align-items: center;
}

.tech-text-img-row .text-accent-bar {
  flex: 1;
  min-width: 200px;
}

.tech-text-img-row .tech-img {
  flex-shrink: 0;
}

@keyframes techEnergyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Row pairs: Day/Night + Breeding | Shiny + Friendship */
.tech-row-pair {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.tech-row-pair .tech-item {
  flex: 1;
  min-width: 260px;
}

.tech-subsection-friendship {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.tech-friendship-imgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  width: 180px;
}

.tech-img-friendship {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.tech-img-friendship-2 {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.tech-subsection-friendship .tech-text-block {
  flex: 1;
  min-width: 0;
}

.tech-shiny-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.shiny-row {
  display: flex;
  gap: 16px;
}

.shiny-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.shiny-cell img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.shiny-cell span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(180, 210, 255, 0.9);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .series-starters-glass {
    padding: 24px 18px 28px;
    margin-bottom: 24px;
  }

  .series-dossier-glass {
    padding: 24px 18px 28px;
  }

  .dossier-row,
  .dossier-row-yellow-top,
  .dossier-row-yellow-bottom,
  .dossier-row-ultra-region-threat {
    grid-template-columns: 1fr;
  }

  .dossier-regional-content,
  .dossier-threat-content,
  .dossier-threat-gs {
    flex-direction: column;
  }

  .dossier-gameplay-ruby-sapphire {
    flex-wrap: wrap;
  }

  /* Ruby & Sapphire — Gameplay: Team Aqua + Team Magma same row; plot text full width below */
  .dossier-gameplay-rs-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 14px 12px;
    align-items: start;
  }

  .dossier-gameplay-rs-teams .img-neon-aqua {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
  }

  .dossier-gameplay-rs-teams .img-neon-magma {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
  }

  .dossier-gameplay-rs-teams .dossier-gameplay-text {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .dossier-gameplay-rs-teams .dossier-plot-magma {
    margin-right: 0;
  }

  .dossier-threat-ruby-sapphire {
    flex-wrap: wrap;
  }

  .dossier-threat-info {
    min-width: 0;
  }

  .dossier-threat-imgs {
    flex-direction: column;
  }

  /* Black & White — narrow: Unova map fits frame; THREAT three images one row */
  .dossier-regional-content.dossier-regional-black-white .dossier-img-unova {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  .dossier-threat-imgs.dossier-threat-imgs-bw {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(6px, 1.5vw);
    width: 100%;
    max-width: 100%;
  }

  .dossier-threat-imgs-bw > .img-neon-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-imgs-bw .dossier-img-bw-plasma-size {
    max-width: 100%;
    max-height: min(200px, 32vh, 38vw);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .dossier-threat-imgs-bw .dossier-img-bw-reshiram-size,
  .dossier-threat-imgs-bw .dossier-img-bw-zekrom-size {
    max-width: 100%;
    max-height: min(200px, 32vh, 42vw);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* X & Y — narrow: Kalos + Lumiose maps scale to container (no horizontal clip) */
  .dossier-gameplay-xy .dossier-gameplay-xy-kalos-wrap {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dossier-gameplay-xy .dossier-img-xy-kalos {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  .dossier-regional-content.dossier-regional-xy {
    min-width: 0;
  }

  .dossier-regional-content.dossier-regional-xy .dossier-img-xy-lumiose {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  /* Omega Ruby & Alpha Sapphire — narrow: Hoenn, Eon Flute, DexNav/PokéNav, Magma vs Aqua, Secret Base / Cosplay art */
  .dossier-gameplay-oras .dossier-gameplay-oras-hoenn-wrap {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dossier-gameplay-oras .dossier-img-oras-hoenn {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  .dossier-regional-oras-imgs {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dossier-regional-oras-imgs .dossier-regional-oras-eon-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .dossier-regional-oras-imgs .dossier-img-oras-eon {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  .dossier-regional-oras-imgs .dossier-regional-oras-nav-wrap {
    display: flex;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    justify-content: center;
    gap: 14px;
  }

  .dossier-regional-oras-imgs .dossier-img-oras-nav {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    width: auto;
    max-width: calc(50% - 10px);
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
  }

  @media (orientation: portrait) {
    .dossier-regional-oras-imgs .dossier-regional-oras-nav-wrap {
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
    }

    .dossier-regional-oras-imgs .dossier-img-oras-nav {
      flex: none;
      width: 100%;
      max-width: 100%;
    }
  }

  .dossier-regional-oras-imgs .text-accent-bar {
    max-width: 100%;
    min-width: 0;
  }

  .dossier-threat-oras-content .text-accent-bar {
    max-width: 100%;
    min-width: 0;
  }

  .dossier-threat-oras-img-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .dossier-threat-oras-content .dossier-img-oras-magma-aqua {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  .tech-leap-oras .tech-oras-secret-base-wrap,
  .tech-leap-oras .tech-oras-cosplay-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .tech-leap-oras .tech-img-oras-secret-base,
  .tech-leap-oras .tech-img-oras-cosplay {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  /* Sun & Moon — mobile portrait/narrow: gameplay/regional art fits; Region Overview 2×2; Z-Moves & Festival stack */
  .dossier-gameplay-sunmoon-alola-wrap,
  .dossier-gameplay-sunmoon-ultra-wrap {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .dossier-gameplay-sunmoon-plot {
    min-width: 0;
    max-width: 100%;
  }

  .dossier-img-sunmoon-alola {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
  }

  /* Ultra Beast art is very wide — flex min-width:auto was keeping the row wider than the viewport. */
  .dossier-gameplay-sunmoon-ultra-wrap .img-neon-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dossier-img-sunmoon-ultra {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    box-sizing: border-box;
    display: block;
    flex-shrink: 1;
    min-width: 0;
  }

  .dossier-regional-sunmoon-alola-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 14px 16px;
    width: 100%;
    max-width: 100%;
    justify-items: center;
  }

  .dossier-regional-sunmoon-alola-forms .img-neon-wrap {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-regional-sunmoon-alola-forms .dossier-img-sunmoon-alola-form {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-sun-moon .tech-sunmoon-festival-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
  }

  /* Column layout: reset row-oriented flex-basis (280px was becoming min-height and pushed the image down). */
  .tech-leap-sun-moon .tech-sunmoon-festival-text {
    flex: none;
    width: 100%;
    min-height: 0;
  }

  .tech-leap-sun-moon .tech-sunmoon-festival-img-wrap {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .tech-leap-sun-moon .tech-img-sunmoon-festival {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .tech-leap-sun-moon .tech-img-sunmoon-zmove,
  .tech-leap-sun-moon .tech-img-sunmoon-zmove-pikachu {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* Snorlax art is taller/wider than Pikachu — cap so it does not dominate narrow portrait. */
  .tech-leap-sun-moon .tech-sunmoon-zmove-right .tech-img-sunmoon-zmove {
    width: auto;
    max-width: min(300px, 86vw);
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-left .img-neon-wrap {
    margin-top: 0;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-right {
    flex-shrink: 1;
    min-width: 0;
    justify-content: center;
  }

  .tech-leap-sun-moon .tech-sunmoon-zmove-row {
    gap: 20px;
  }

  /* Ultra Sun & Ultra Moon — mobile portrait: Alola map fits; THREAT text+Giovanni one row; Warp img centered; 3 Z-Crystals one row; Totem stacked */
  .dossier-gameplay-ultra-alola-wrap {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .dossier-img-ultra-alola {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    flex-shrink: 1;
    min-width: 0;
    display: block;
    box-sizing: border-box;
  }

  .dossier-gameplay-ultra-plot,
  .dossier-gameplay-ultra-imgs-row {
    min-width: 0;
    max-width: 100%;
  }

  .dossier-gameplay-ultra-imgs-row .img-neon-wrap {
    min-width: 0;
  }

  .dossier-img-ultra-recon,
  .dossier-img-ultra-necrozma {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 1;
    min-width: 0;
  }

  .dossier-threat-ultra-content.dossier-threat-ultra-stacked {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
  }

  .dossier-threat-ultra-stacked .dossier-threat-info-ultra {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .dossier-threat-ultra-giovanni-wrap {
    flex-shrink: 0;
    align-self: center;
  }

  .tech-leap-ultra .tech-ultra-warp-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
  }

  /* Column layout: flex-basis 200px was becoming min-height and pushed the art down. */
  .tech-leap-ultra .tech-ultra-warp-text {
    flex: none;
    width: 100%;
    min-height: 0;
  }

  .tech-leap-ultra .tech-ultra-warp-img-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .tech-leap-ultra .tech-img-ultra-warp {
    margin-left: auto;
    margin-right: auto;
    max-width: min(260px, 100%);
  }

  .tech-leap-ultra .tech-ultra-roto-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
  }

  .tech-leap-ultra .tech-ultra-roto-text {
    flex: none;
    width: 100%;
    min-height: 0;
  }

  .tech-leap-ultra .tech-ultra-roto-img-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .tech-leap-ultra .tech-ultra-zcrystals {
    flex-wrap: nowrap;
    justify-content: center;
    gap: min(8px, 2vw);
    width: 100%;
    min-width: 0;
  }

  .tech-leap-ultra .tech-ultra-zcrystals .img-neon-wrap {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .tech-leap-ultra .tech-ultra-zcrystals .tech-img-ultra-z {
    max-width: min(88px, 26vw) !important;
    width: auto;
    height: auto;
  }

  /* Ultranecrozium Z — larger than the two round crystals so it reads at a similar visual weight. */
  .tech-leap-ultra .tech-ultra-zcrystals .tech-img-ultra-necrozium-z {
    max-width: min(152px, 42vw) !important;
    width: auto;
    height: auto;
  }

  .tech-leap-ultra .tech-ultra-totem-row.tech-ultra-totem-inline {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .tech-leap-ultra .tech-ultra-totem-img-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Let's Go Pikachu & Eevee — mobile portrait: Kanto + walking art fit; Threat trio one row; GO Park / bonding images fit */
  .dossier-gameplay-content.dossier-gameplay-lets-go {
    min-width: 0;
    max-width: 100%;
  }

  .dossier-gameplay-lets-go-kanto-wrap {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .dossier-img-lets-go-kanto {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 1;
    min-width: 0;
    display: block;
    box-sizing: border-box;
  }

  .dossier-gameplay-lets-go-plot-row {
    min-width: 0;
    max-width: 100%;
  }

  .dossier-regional-lets-go-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dossier-regional-lets-go-text {
    flex: none;
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .dossier-regional-lets-go-img-wrap {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }

  .dossier-img-lets-go-walking {
    max-width: 100%;
    width: auto;
    height: auto;
    flex-shrink: 1;
    min-width: 0;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
  }

  /* Threat — three sprites one row, size maximized: 2 flex units (James+Jessie) + 1 (Giovanni) = equal ~1/3 each character. */
  .dossier-threat-lets-go-imgs {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: min(4px, 1.2vw);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dossier-threat-lets-go-jessie-james {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: min(4px, 1.2vw);
  }

  .dossier-threat-lets-go-jessie-james > .img-neon-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-lets-go-imgs > .img-neon-wrap.img-neon-lets-go-giovanni {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-lets-go-imgs .dossier-img-lets-go-antagonist {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(240px, 44vh);
    flex-shrink: 1;
    min-width: 0;
    object-fit: contain;
    box-sizing: border-box;
  }

  .tech-leap-lets-go .tech-lets-go-gopark-wrap,
  .tech-leap-lets-go .tech-lets-go-bonding-wrap {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .tech-leap-lets-go .tech-img-lets-go-gopark,
  .tech-leap-lets-go .tech-img-lets-go-bonding {
    max-width: 100%;
    width: auto;
    height: auto;
    box-sizing: border-box;
  }

  /* Diamond & Pearl — mobile portrait/narrow: Threat row (Mars/Jupiter/Saturn); legends fit; System tech rows */
  .dossier-threat-imgs.dossier-threat-imgs-dp-top {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(6px, 1.5vw);
    width: 100%;
    max-width: 100%;
  }

  .dossier-threat-imgs-dp-top > .img-neon-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-imgs-dp-top .dossier-img-dp-mars,
  .dossier-threat-imgs-dp-top .dossier-img-dp-jupiter,
  .dossier-threat-imgs-dp-top .dossier-img-dp-saturn {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(220px, 46vh, 58vw);
    object-fit: contain;
  }

  /* Platinum — mobile portrait/narrow: Cyrus & Charon same row */
  .dossier-threat-imgs.dossier-threat-imgs-platinum {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: min(10px, 2.5vw);
    width: 100%;
    max-width: 100%;
  }

  .dossier-threat-imgs-platinum > .img-neon-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .dossier-threat-imgs-platinum .dossier-img-platinum-antagonist {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(220px, 42vh, 48vw);
    object-fit: contain;
  }

  /* Platinum — Giratina altered / orb / origin one row */
  .tech-leap-platinum .tech-platinum-dex-row-altered {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: min(8px, 2vw);
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-platinum .tech-platinum-dex-row-altered > .img-neon-wrap {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tech-leap-platinum .tech-img-platinum-altered,
  .tech-leap-platinum .tech-img-platinum-origin {
    max-width: min(118px, 27vw) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .tech-leap-platinum .tech-img-platinum-orb {
    max-width: min(40px, 9vw) !important;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .dossier-threat-imgs-dp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dossier-threat-imgs-dp .dossier-threat-dp-cell {
    min-width: 0;
  }

  .dossier-threat-imgs-dp .dossier-img-dp-dialga,
  .dossier-threat-imgs-dp .dossier-img-dp-palkia {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: min(200px, 42vw);
    object-fit: contain;
  }

  .dossier-threat-imgs-dp .img-neon-wrap.dossier-threat-dp-legend {
    animation: none;
  }

  .dossier-threat-imgs-dp .img-neon-wrap {
    max-width: 100%;
  }

  .tech-leap-diamond-pearl .tech-dp-physical-special {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }

  .tech-leap-diamond-pearl .tech-dp-physical-special .tech-img {
    max-width: min(88px, 25vw);
  }

  .tech-leap-diamond-pearl .tech-dp-evolutions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
  }

  .tech-leap-diamond-pearl .tech-dp-evolutions .tech-img-electivire,
  .tech-leap-diamond-pearl .tech-dp-evolutions .tech-img-rhyperior {
    max-width: min(150px, 42vw);
  }

  .tech-leap-diamond-pearl .tech-dp-global-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .tech-leap-diamond-pearl .tech-dp-global-content .tech-img-wrap-left {
    float: none;
    margin: 0;
  }

  .tech-leap-diamond-pearl .tech-dp-global-content .text-accent-bar {
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-diamond-pearl .tech-dp-pokeradar-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
  }

  .tech-leap-diamond-pearl .tech-dp-pokeradar-content .tech-img-wrap-right {
    float: none;
    margin: 0;
  }

  .tech-leap-diamond-pearl .tech-dp-pokeradar-content .text-accent-bar {
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  .dossier-threat-gyarados-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tech-subsection {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .tech-types-row .tech-subsection-energy {
    min-width: 0;
  }

  .tech-row-pair {
    flex-direction: column;
  }

  .tech-row-pair .tech-item {
    min-width: 0;
  }

  .tech-frlg-two-cols {
    flex-direction: column;
  }

  .tech-frlg-col-1 {
    max-width: 100%;
  }

  .dossier-threat-hgss-content {
    flex-direction: column;
  }

  .dossier-threat-hgss-single-row {
    flex-wrap: wrap;
  }

  .dossier-threat-imgs-hgss-inline {
    flex-wrap: wrap;
    justify-content: center;
  }

  .dossier-threat-imgs-hgss {
    justify-content: center;
  }

  .tech-hgss-walking-row {
    justify-content: center;
  }

  .tech-hgss-pokewalker {
    flex-direction: column;
  }

  .dossier-threat-bw-content {
    flex-direction: column;
  }

  .dossier-threat-imgs-bw {
    justify-content: center;
  }

  .tech-bw-sprite-grid {
    max-width: 100%;
  }

  .tech-bw-sprite-row {
    flex-wrap: wrap;
  }

  .dossier-gameplay-bw-row {
    flex-direction: column;
  }

  .dossier-gameplay-bw-img {
    order: 1;
  }

  .dossier-gameplay-b2w2-row {
    flex-direction: column;
  }

  .dossier-gameplay-b2w2-img {
    order: 1;
  }

  .dossier-threat-b2w2-row1 {
    flex-direction: column;
  }

  .dossier-threat-b2w2-imgs-row1 {
    justify-content: center;
  }

  .dossier-threat-xy-row1 {
    flex-direction: column;
  }

  .dossier-threat-xy-row2 {
    justify-content: center;
  }

  .tech-xy-fairy-row {
    flex-direction: column;
  }

  .tech-bw-battle-subway {
    flex-direction: column;
  }

  .tech-bw-sprites-subway-row {
    flex-direction: column;
  }

  .tech-pokeblock-row,
  .tech-text-img-row {
    flex-direction: column;
  }

  /* Ruby & Sapphire — Berries & Pokéblocks: keep text + image on one row */
  .tech-pokeblock-row.tech-pokeblock-row--rs {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px 14px;
  }

  .tech-pokeblock-row.tech-pokeblock-row--rs .text-accent-bar {
    flex: 1;
    min-width: 0;
  }

  .tech-pokeblock-row.tech-pokeblock-row--rs .tech-pokeblock-wrap {
    flex-shrink: 0;
    padding: 12px 10px;
  }

  .tech-subsection-friendship {
    flex-direction: column;
  }

  .tech-shiny-table,
  .tech-emerald-legends {
    max-width: 100%;
  }

  .shiny-row {
    flex-direction: column;
  }

  /* Crystal — battle entrance table: two columns (Typhlosion/Feraligatr/Meganium | Entei/Suicune/Raikou). */
  .tech-shiny-table--crystal-entrance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    max-width: 100%;
    width: 100%;
  }

  .tech-shiny-table--crystal-entrance .shiny-row {
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  .tech-shiny-table--crystal-entrance .shiny-cell {
    padding: 10px 8px;
    isolation: isolate;
  }

  /* Isolate APNG paint so Entei / Raikou stills are not repainted every frame (WebKit). */
  .tech-shiny-table--crystal-entrance .shiny-cell--crystal-apng-suicune {
    contain: paint;
    transform: translateZ(0);
  }

  .tech-shiny-table--crystal-entrance .shiny-cell img {
    width: min(72px, 32vw);
    height: min(72px, 32vw);
  }

  /* Gold & Silver — bảng Shiny starter: giữ 2 ô / hàng trên mobile (override .shiny-row column) */
  .tech-shiny-table--gs-shiny-pairs .shiny-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
  }

  .tech-shiny-table--gs-shiny-pairs .shiny-cell {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 10px 6px;
  }

  .tech-shiny-table--gs-shiny-pairs .shiny-cell img {
    width: min(80px, 28vw);
    height: min(80px, 28vw);
  }

  /* Box art + starters: một hàng (bỏ column cũ); thu nhỏ để vừa màn hẹp */
  .boxart-case:not(.boxart-case-single) {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: min(10px, 2.5vw);
  }

  .boxart-case:not(.boxart-case-single) .boxart-item {
    padding: 6px;
  }

  .boxart-case:not(.boxart-case-single) .boxart-inner img {
    max-width: min(96px, calc((100vw - 72px) / 2));
  }

  .starter-pod .pod-scan-line {
    box-shadow: 0 0 3px 0 color-mix(in srgb, var(--glow-color, #6490ff) 30%, transparent);
  }

  .starter-pod .pod-sprite {
    filter:
      drop-shadow(0 2px 8px rgba(0, 0, 0, 0.38))
      drop-shadow(0 0 5px color-mix(in srgb, var(--glow-color, #6490ff) 18%, transparent));
  }

  .starter-pod:hover .pod-sprite {
    filter:
      drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45))
      drop-shadow(0 0 8px color-mix(in srgb, var(--glow-color, #6490ff) 32%, transparent));
  }

  .starter-pod:hover {
    filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--glow-color, #6490ff) 14%, transparent));
  }

  .starter-pod:hover .pod-specimen {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 4px 0 12px rgba(0, 0, 0, 0.15),
      inset -4px 0 12px rgba(0, 0, 0, 0.15),
      0 6px 24px rgba(0, 0, 0, 0.35),
      0 0 20px color-mix(in srgb, var(--glow-color, #6490ff) 12%, transparent),
      0 0 36px color-mix(in srgb, var(--glow-color, #6490ff) 6%, transparent);
  }

  .series-starters-glass {
    padding: 14px 8px 18px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .series-starters-glass .series-starters {
    padding-bottom: 8px;
  }

  .starters-title {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
  }

  .starter-pods {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: min(6px, 1.8vw);
  }

  .starter-pod {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .starter-pod .pod-specimen {
    min-height: 0;
    padding: 12px 6px 14px;
    border-radius: 56px 56px 14px 14px;
  }

  .starter-pod .pod-sprite {
    width: 56px;
    height: 56px;
  }

  .starter-pod .pod-base {
    padding: 6px 4px 8px;
    gap: 1px;
  }

  .starter-pod .pod-id {
    font-size: 0.48rem;
    letter-spacing: 0.1em;
  }

  .starter-pod .pod-name {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }

  .starter-pod .pod-type {
    font-size: 0.45rem;
    letter-spacing: 0.12em;
    margin-top: 0;
  }

  .starter-pod:hover {
    transform: translateY(-3px);
  }

  .tech-sunmoon-pokeride-row {
    flex-direction: column;
  }

  .tech-sunmoon-pokeride-right {
    display: flex;
    justify-content: center;
  }

  .tech-sunmoon-ride-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tech-sunmoon-zmove-row {
    flex-direction: column;
  }

  .tech-sunmoon-zmove-right {
    justify-content: center;
  }
}

/* ── Ultra Sun & Ultra Moon ──────────────────────────────────────────────── */
.dossier-gameplay-ultra {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-ultra-plot {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-ultra-imgs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.dossier-gameplay-ultra-alola-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.dossier-img-ultra-alola {
  width: auto;
  max-width: 728px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.img-neon-ultra-recon::before {
  background: radial-gradient(
    circle,
    rgba(0, 200, 180, 0.5) 0%,
    rgba(0, 160, 150, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(0, 200, 180, 0.45);
  opacity: 0.68;
}

.dossier-img-ultra-recon {
  width: auto;
  max-width: 325px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-img-ultra-necrozma {
  width: auto;
  max-width: 364px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.img-neon-ultra-necrozma::before {
  background: radial-gradient(
    circle,
    rgba(100, 60, 180, 0.5) 0%,
    rgba(70, 40, 140, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 24px rgba(100, 60, 180, 0.5);
  opacity: 0.7;
}

.dossier-regional-ultra-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-regional-ultra-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-regional-ultra-img-wrap {
  margin-right: 83px;
}

.dossier-img-ultra-megalopolis {
  width: auto;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-threat-ultra-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-threat-ultra-content.dossier-threat-ultra-stacked {
  flex-direction: column;
  align-items: stretch;
}

.dossier-threat-ultra-stacked .dossier-threat-info-ultra {
  flex: none;
  width: 100%;
}

.dossier-threat-info-ultra .dossier-text {
  max-width: none;
}

.dossier-threat-ultra-giovanni-wrap {
  display: flex;
  justify-content: flex-start;
}

.dossier-threat-info-ultra {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-img-ultra-giovanni {
  width: auto;
  max-width: 123px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* Narrow landscape — MUST follow base `.dossier-regional-ultra-row` / `.dossier-threat-ultra-stacked` or cascade loses. */
@media (orientation: landscape) and (max-width: 1024px) {
  /* Region Overview: copy + megalopolis one row; flex-start so .text-accent-bar::before only spans text height (not image height). */
  .dossier-regional-ultra-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: min(14px, 2.5vw);
    width: 100%;
    max-width: 100%;
  }

  .dossier-regional-ultra-text {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: min(100%, 56vw);
    align-self: flex-start;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .dossier-regional-ultra-text .text-accent-bar,
  .dossier-regional-ultra-text .dossier-text {
    max-width: 100%;
  }

  .dossier-regional-ultra-img-wrap {
    flex: 0 0 auto;
    margin-right: 0;
    width: auto;
    max-width: min(220px, 36vw);
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .dossier-img-ultra-megalopolis {
    max-width: min(220px, 36vw);
    width: auto;
    height: auto;
  }

  /* Threat Analysis: copy + Giovanni one row; same accent bar height fix via flex-start. */
  .dossier-threat-ultra .dossier-threat-ultra-content.dossier-threat-ultra-stacked {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: min(14px, 2.5vw);
  }

  .dossier-threat-ultra .dossier-threat-ultra-stacked .dossier-threat-info-ultra {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: min(100%, 62vw);
    align-self: flex-start;
  }

  .dossier-threat-ultra .dossier-threat-ultra-giovanni-wrap {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
    align-self: center;
  }
}

.img-neon-ultra-giovanni::before {
  background: radial-gradient(
    circle,
    rgba(180, 80, 80, 0.5) 0%,
    rgba(140, 50, 50, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(180, 80, 80, 0.45);
  opacity: 0.68;
}

.tech-leap-ultra .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-ultra-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.tech-ultra-row-warp-zpower .tech-item,
.tech-ultra-row-roto-totem .tech-item {
  flex: 1 1 320px;
  min-width: 0;
}

.tech-ultra-warp-row,
.tech-ultra-roto-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
}

.tech-ultra-warp-text,
.tech-ultra-roto-text {
  flex: 1 1 200px;
  min-width: 0;
}

.tech-img-ultra-warp,
.tech-img-ultra-roto {
  width: auto;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-ultra-zcrystals {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
}

.tech-img-ultra-z {
  width: auto;
  max-width: 112px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.tech-img-ultra-necrozium-z {
  max-width: 200px;
}

.img-neon-ultra-solganium::before {
  background: radial-gradient(
    circle,
    rgba(255, 180, 80, 0.5) 0%,
    rgba(255, 140, 50, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 180, 80, 0.45);
  opacity: 0.68;
}

.img-neon-ultra-lunalium::before {
  background: radial-gradient(
    circle,
    rgba(120, 100, 200, 0.5) 0%,
    rgba(80, 60, 160, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(120, 100, 200, 0.45);
  opacity: 0.68;
}

.img-neon-ultra-necrozium-z::before {
  background: radial-gradient(
    circle,
    rgba(100, 60, 180, 0.5) 0%,
    rgba(70, 40, 140, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(100, 60, 180, 0.5);
  opacity: 0.7;
}

.img-neon-ultra-roto::before {
  background: radial-gradient(
    circle,
    rgba(255, 100, 100, 0.5) 0%,
    rgba(220, 60, 60, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 100, 100, 0.45);
  opacity: 0.68;
}

.img-neon-ultra-totem::before {
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.5) 0%,
    rgba(255, 180, 0, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.45);
  opacity: 0.68;
}

.tech-ultra-totem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
}

.tech-ultra-totem-row.tech-ultra-totem-inline {
  flex-wrap: nowrap;
}

.tech-ultra-totem-text {
  flex: 1 1 auto;
  min-width: 0;
}

.tech-ultra-totem-img-wrap {
  flex-shrink: 0;
}

.tech-img-ultra-totem {
  width: auto;
  max-width: 204px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* ── Sword & Shield ───────────────────────────────────────────────────────── */
.dossier-gameplay-sword-shield {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-gameplay-swsh-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-gameplay-swsh-text {
  flex: 1 1 280px;
  min-width: 0;
}

/* Override .dossier-plot-img.dossier-img-free (2 classes) — need equal/higher specificity */
.dossier-plot-img.dossier-img-free.dossier-img-swsh-leon,
.dossier-img-swsh-leon {
  width: auto !important;
  max-width: 386px !important;
  height: 276px !important;
  object-fit: contain !important;
  border-radius: 12px;
}

.img-neon-swsh-leon::before {
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.5) 0%,
    rgba(255, 160, 60, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 22px rgba(255, 200, 100, 0.45);
  opacity: 0.68;
}

.dossier-swsh-galar-gameplay-wrap {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.5fr);
  gap: 24px;
  align-items: start;
  width: 100%;
}

.dossier-swsh-galar-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dossier-swsh-galar-col .dossier-img-swsh-galar {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.dossier-swsh-main-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

@media (max-width: 768px) {
  .dossier-swsh-galar-gameplay-wrap {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .dossier-swsh-galar-gameplay-wrap {
    grid-template-columns: 1fr;
    gap: min(22px, 3vh);
  }

  .dossier-swsh-galar-col,
  .dossier-swsh-main-col {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}

@media (orientation: portrait) and (max-width: 768px) {
  /* Sword & Shield — portrait: center Gameplay (Leon) + Region art; stack Gameplay row */
  .dossier-swsh-galar-col {
    width: 100%;
    justify-content: center;
  }

  .dossier-swsh-galar-col .dossier-img-swsh-galar {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
  }

  .dossier-gameplay-swsh-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
  }

  .dossier-gameplay-swsh-text {
    flex: none;
    width: 100%;
    align-self: stretch;
  }

  .dossier-gameplay-swsh-img,
  .dossier-gameplay-swsh-row .img-neon-wrap.dossier-gameplay-swsh-img {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dossier-plot-img.dossier-img-free.dossier-img-swsh-leon,
  .dossier-img-swsh-leon {
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
    max-width: min(196px, 57vw) !important;
  }

  .dossier-regional-swsh-imgs.dossier-regional-swsh-no-galar,
  .dossier-regional-swsh-no-galar {
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }

  .dossier-img-swsh-camping {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: auto;
    display: block;
  }
}

.dossier-regional-swsh-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.dossier-regional-swsh-no-galar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.dossier-img-swsh-galar {
  width: auto;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-img-swsh-camping {
  width: auto;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-threat-swsh-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.dossier-threat-swsh-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
}

.dossier-img-swsh-antagonist {
  width: auto !important;
  height: auto !important;
  max-width: 220px;
  object-fit: contain !important;
}

.dossier-threat-swsh-imgs .img-neon-wrap:first-child .dossier-img-swsh-antagonist {
  max-width: 312px !important;
}

.dossier-threat-swsh-imgs .img-neon-wrap:nth-child(2) .dossier-img-swsh-antagonist {
  max-width: 97px !important;
}

.dossier-threat-swsh-imgs .img-neon-wrap:nth-child(3) .dossier-img-swsh-antagonist {
  max-width: 134px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px;
}

.img-neon-swsh-team-yell::before {
  background: radial-gradient(
    circle,
    rgba(255, 100, 150, 0.5) 0%,
    rgba(220, 60, 120, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 100, 150, 0.45);
  opacity: 0.68;
}

.img-neon-swsh-rose::before {
  background: radial-gradient(
    circle,
    rgba(180, 80, 80, 0.5) 0%,
    rgba(140, 50, 50, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(180, 80, 80, 0.45);
  opacity: 0.68;
}

.img-neon-swsh-oleana::before {
  background: radial-gradient(
    circle,
    rgba(100, 150, 200, 0.5) 0%,
    rgba(60, 120, 180, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(100, 150, 200, 0.45);
  opacity: 0.68;
}

.tech-leap-swsh .tech-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(220, 235, 255, 0.9);
  margin: 0 0 20px;
}

.tech-swsh-dynamax-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  justify-content: center;
  align-items: center;
}

.tech-img-swsh-gmax {
  width: auto;
  max-width: 219px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.img-neon-swsh-gmax::before {
  background: radial-gradient(
    circle,
    rgba(255, 100, 100, 0.5) 0%,
    rgba(220, 60, 60, 0.28) 50%,
    transparent 75%
  );
  box-shadow: 0 0 20px rgba(255, 100, 100, 0.45);
  opacity: 0.68;
}

.tech-swsh-maxraid-ycomm-jobs-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.5fr);
  gap: 24px;
  align-items: start;
  margin-top: 16px;
}

.tech-swsh-maxraid-ycomm-jobs-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tech-swsh-maxraid-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-swsh-maxraid-img-col .tech-img-swsh-maxraid {
  width: 52%;
  max-width: 52%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .tech-swsh-maxraid-ycomm-jobs-row {
    grid-template-columns: 1fr;
  }
}

.tech-swsh-maxraid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 16px;
}

.tech-swsh-maxraid-text {
  flex: 1 1 280px;
  min-width: 0;
}

.tech-img-swsh-maxraid {
  width: auto;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* ── Scarlet & Violet ───────────────────────────────────────────────────────── */
.dossier-sv-paldea-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-sv-gameplay-region-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  min-width: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .dossier-sv-gameplay-region-row {
    grid-template-columns: 1fr;
  }
}

.dossier-img-sv-paldea {
  width: auto;
  max-width: min(711px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-gameplay-sv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.dossier-gameplay-sv-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-gameplay-sv-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.dossier-img-sv-protagonist {
  width: auto !important;
  height: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  border-radius: 12px;
}

.dossier-img-sv-florian {
  max-width: 92px !important;
}

.img-neon-sv-juliana::before {
  background: radial-gradient(circle, rgba(255, 150, 150, 0.5) 0%, rgba(220, 100, 100, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 150, 150, 0.45);
  opacity: 0.68;
}

.img-neon-sv-florian::before {
  background: radial-gradient(circle, rgba(150, 150, 255, 0.5) 0%, rgba(100, 100, 220, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(150, 150, 255, 0.45);
  opacity: 0.68;
}

.dossier-regional-sv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dossier-regional-sv-img-wrap {
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
  box-sizing: border-box;
}

.dossier-regional-sv-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-img-sv-riding {
  width: auto;
  max-width: min(426px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.img-neon-sv-riding::before {
  background: radial-gradient(circle, rgba(255, 200, 100, 0.5) 0%, rgba(220, 160, 60, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 200, 100, 0.45);
  opacity: 0.68;
}

.dossier-threat-sv-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-threat-sv-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-threat-sv-info {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-img-sv-team-star {
  width: auto !important;
  height: auto !important;
  max-width: 252px;
  object-fit: contain !important;
  border-radius: 12px;
}

.img-neon-sv-team-star::before {
  background: radial-gradient(circle, rgba(255, 100, 150, 0.5) 0%, rgba(220, 60, 120, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 100, 150, 0.45);
  opacity: 0.68;
}

.dossier-threat-sv-paradox {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  width: 100%;
}

.dossier-threat-sv-paradox-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-threat-sv-paradox-row .img-neon-wrap.img-neon-sv-paradox {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-shrink: 1;
}

.dossier-img-sv-paradox {
  width: auto !important;
  height: auto !important;
  max-width: min(184px, 100%) !important;
  object-fit: contain !important;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
}

.img-neon-sv-paradox::before {
  background: radial-gradient(circle, rgba(180, 150, 255, 0.5) 0%, rgba(140, 100, 220, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(180, 150, 255, 0.45);
  opacity: 0.68;
}

.tech-sv-terastal-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tech-sv-terastal-text {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.tech-sv-terastal-img-wrap.img-neon-wrap {
  align-self: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  flex-shrink: 1;
  box-sizing: border-box;
}

.tech-img-sv-terastal {
  width: auto;
  max-width: min(506px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.img-neon-sv-terastal::before {
  background: radial-gradient(circle, rgba(255, 220, 150, 0.5) 0%, rgba(255, 180, 80, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 24px rgba(255, 220, 150, 0.5);
  opacity: 0.68;
}

@media (orientation: portrait) and (max-width: 1024px) {
  /* Scarlet & Violet — portrait: stack Gameplay|Region; Threat intel → Team Star; center protagonists */
  .dossier-sv-gameplay-region-row {
    grid-template-columns: 1fr;
  }

  .dossier-gameplay-sv-imgs {
    width: 100%;
    justify-content: center;
    gap: min(20px, 5vw);
  }

  .dossier-gameplay-sv-imgs .img-neon-wrap {
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .dossier-threat-sv-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .dossier-threat-sv-info {
    flex: none;
    width: 100%;
  }

  .dossier-threat-sv-team-star {
    align-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* team-star.webp — 25% smaller than desktop max (252 × 0.75 ≈ 189px) */
  .dossier-img-sv-team-star {
    max-width: min(189px, 55vw) !important;
  }
}

/* ═══ Legends: Arceus ═══ */
.dossier-arceus-hisui-wrap {
  width: 100%;
  margin-bottom: 24px;
}

.dossier-img-arceus-hisui {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.dossier-gameplay-arceus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-gameplay-arceus-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-gameplay-arceus-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.dossier-img-arceus-plot {
  width: auto !important;
  height: auto !important;
  max-width: 180px;
  object-fit: contain !important;
  border-radius: 12px;
}

.dossier-gameplay-arceus-cyllene {
  flex-shrink: 0;
}

.dossier-img-arceus-cyllene {
  max-width: 116px !important;
}

.dossier-img-arceus-noble {
  max-width: 204px !important;
}

.img-neon-arceus-cyllene::before {
  background: radial-gradient(circle, rgba(100, 140, 200, 0.5) 0%, rgba(60, 100, 160, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(100, 140, 200, 0.45);
  opacity: 0.68;
}

.img-neon-arceus-noble::before {
  background: radial-gradient(circle, rgba(255, 200, 100, 0.5) 0%, rgba(220, 160, 60, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 200, 100, 0.45);
  opacity: 0.68;
}

.dossier-regional-arceus-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dossier-regional-arceus-text {
  width: 100%;
}

.dossier-regional-arceus-hisui2-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.dossier-img-arceus-hisui-2 {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px;
}

.img-neon-arceus-hisui::before {
  background: radial-gradient(circle, rgba(180, 150, 120, 0.5) 0%, rgba(140, 110, 80, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(180, 150, 120, 0.45);
  opacity: 0.68;
}

.dossier-threat-arceus-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dossier-threat-arceus-row1 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.dossier-threat-arceus-info {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-threat-arceus-clans {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.dossier-img-arceus-clan {
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px;
}

.dossier-img-arceus-diamond {
  max-width: 134px !important;
}

.dossier-img-arceus-pearl {
  max-width: 117px !important;
}

.img-neon-arceus-diamond::before {
  background: radial-gradient(circle, rgba(100, 150, 255, 0.5) 0%, rgba(50, 100, 220, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(100, 150, 255, 0.45);
  opacity: 0.68;
}

.img-neon-arceus-pearl::before {
  background: radial-gradient(circle, rgba(255, 182, 193, 0.5) 0%, rgba(255, 105, 180, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.45);
  opacity: 0.68;
}

.dossier-threat-arceus-row2 {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dossier-img-arceus-space-time {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

@media (orientation: portrait) and (max-width: 1024px) {
  /* Legends: Arceus — Gameplay portrait: intel first, Cyllene centered row, Nobles row below */
  .dossier-gameplay-arceus-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
  }

  .dossier-gameplay-arceus-text {
    order: 1;
    flex: none;
    width: 100%;
    max-width: none;
  }

  .dossier-gameplay-arceus-row > .img-neon-wrap.dossier-gameplay-arceus-cyllene {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .dossier-gameplay-arceus-imgs {
    order: 3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;
    gap: min(16px, 4vw);
  }

  /* Noble art: shrink with viewport (base .dossier-img / .img-neon-wrap use flex-shrink: 0) */
  .dossier-gameplay-arceus-imgs .img-neon-wrap.img-neon-arceus-noble {
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
    max-width: calc(50% - 8px);
    flex-shrink: 1;
    display: flex;
    justify-content: center;
  }

  .dossier-gameplay-arceus-imgs .dossier-img-arceus-noble {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 1;
    min-width: 0;
  }

  /* Threat — Diamond / Pearl clan art centered */
  .dossier-threat-arceus-row1 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .dossier-threat-arceus-info {
    flex: none;
    width: 100%;
  }

  .dossier-threat-arceus-clans {
    justify-content: center;
    width: 100%;
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  /* Legends: Arceus — Gameplay landscape: Noble art larger, centered */
  .dossier-gameplay-arceus-imgs {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: min(20px, 3vw);
  }

  .dossier-gameplay-arceus-imgs .img-neon-wrap.img-neon-arceus-noble {
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .dossier-img-arceus-noble {
    max-width: min(300px, 40vw) !important;
  }
}

.tech-leap-arceus .tech-arceus-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tech-leap-arceus .tech-arceus-row-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.tech-leap-arceus .tech-item-arceus {
  flex: 1 1 280px;
  min-width: 0;
}

.tech-arceus-item-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.tech-arceus-item-content .text-accent-bar {
  flex: 1 1 280px;
  min-width: 0;
}


.tech-img-arceus {
  width: auto !important;
  height: auto !important;
  max-width: 280px;
  object-fit: contain !important;
  border-radius: 12px;
}

.tech-img-arceus-large {
  max-width: 350px !important;
}

.tech-img-arceus-crafting {
  max-width: 204px !important;
}

.img-neon-arceus-tech::before {
  background: radial-gradient(circle, rgba(255, 220, 150, 0.5) 0%, rgba(220, 180, 80, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 220, 150, 0.45);
  opacity: 0.68;
}

/* ═══ Legends: Z-A ═══ */
.dossier-za-lumiose-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.dossier-img-za-lumiose {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-gameplay-za-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.dossier-gameplay-za-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-gameplay-za-row .img-neon-wrap.dossier-gameplay-za-img {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.dossier-img-za-plot {
  width: auto !important;
  height: auto !important;
  max-width: min(474px, 100%);
  object-fit: contain !important;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.img-neon-za-lumiose::before {
  background: radial-gradient(circle, rgba(255, 200, 100, 0.5) 0%, rgba(220, 160, 60, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 200, 100, 0.45);
  opacity: 0.68;
}

.dossier-regional-za-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dossier-regional-za-text {
  flex: 1 1 280px;
  min-width: 0;
}

.dossier-regional-za-img-wrap {
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
  box-sizing: border-box;
}

.dossier-img-za-region {
  width: auto !important;
  height: auto !important;
  max-width: min(474px, 100%);
  object-fit: contain !important;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.img-neon-za-art::before {
  background: radial-gradient(circle, rgba(100, 200, 255, 0.5) 0%, rgba(50, 150, 220, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(100, 200, 255, 0.45);
  opacity: 0.68;
}

.dossier-threat-za-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.dossier-threat-za-info {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.dossier-threat-za-row1,
.dossier-threat-za-row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-threat-za-row1 .img-neon-wrap,
.dossier-threat-za-row2 .img-neon-wrap {
  width: auto;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.dossier-threat-za-mega-wrap {
  position: relative;
}

.dossier-img-za-conflict {
  width: auto !important;
  height: auto !important;
  max-width: min(200px, 100%);
  object-fit: contain !important;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.dossier-img-za-floette {
  max-width: min(120px, 100%) !important;
}

.dossier-img-za-zygarde {
  max-width: min(307px, 100%) !important;
}

.dossier-img-za-10296 {
  max-width: min(250px, 100%) !important;
}

.dossier-img-za-10301 {
  max-width: min(296px, 100%) !important;
}

.dossier-threat-za-row2 .dossier-img-za-10301 {
  max-width: min(379px, 100%) !important;
}

.tech-img-za-10286 {
  max-width: min(249px, 100%) !important;
}

.img-neon-za-floette::before {
  background: radial-gradient(circle, rgba(255, 182, 193, 0.5) 0%, rgba(255, 105, 180, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.45);
  opacity: 0.68;
}

.img-neon-za-zygarde::before {
  background: radial-gradient(circle, rgba(100, 200, 100, 0.5) 0%, rgba(50, 160, 80, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(100, 200, 100, 0.45);
  opacity: 0.68;
}

.img-neon-za-mega::before {
  background: radial-gradient(circle, rgba(180, 150, 255, 0.5) 0%, rgba(140, 100, 220, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(180, 150, 255, 0.45);
  opacity: 0.68;
}

/* Mega Stone badges on conflict megas (Floettite / Zygardite) — neo mép TRÁI sprite Mega */
.dossier-threat-za-megastone {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: auto;
  width: clamp(28px, 9vw, 48px);
  height: auto;
  z-index: 3 !important;
  object-fit: contain;
  pointer-events: none;
  transform-origin: left top;
  filter:
    drop-shadow(0 0 6px rgba(200, 160, 255, 0.55))
    drop-shadow(0 0 14px rgba(120, 200, 255, 0.25));
  animation: dossierZaMegastoneFloat 3.4s ease-in-out infinite;
}

.dossier-threat-za-megastone--floettite {
  filter:
    drop-shadow(0 0 6px rgba(255, 140, 190, 0.5))
    drop-shadow(0 0 12px rgba(255, 200, 220, 0.22));
}

.dossier-threat-za-megastone--zygardite {
  filter:
    drop-shadow(0 0 6px rgba(100, 220, 140, 0.45))
    drop-shadow(0 0 12px rgba(160, 255, 200, 0.2));
}

@media (min-width: 1025px) {
  /* Threat row 1 — Floette + Mega: hẹp khoảng cách, vẫn căn giữa (KHÔNG dùng max-content + width:100% — dễ làm mất ảnh) */
  .dossier-threat-za-row1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 14px;
    max-width: min(560px, 100%);
    margin-inline: auto;
  }
}

@keyframes dossierZaMegastoneFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -4px);
  }
}

.tech-leap-za .tech-item-za {
  margin-bottom: 24px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.tech-za-mega-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin-top: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Mega Evolution — 3 rows: 3 | 4 | 3 (matches tech_leap_za_mega_imgs in routes) */
.tech-za-mega-row {
  display: grid;
  gap: 10px 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
}

.tech-za-mega-grid .tech-za-mega-row:nth-child(1) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tech-za-mega-grid .tech-za-mega-row:nth-child(2) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tech-za-mega-grid .tech-za-mega-row:nth-child(3) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tech-za-mega-row .img-neon-wrap.img-neon-za-mega-tech {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.tech-img-za-mega {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.img-neon-za-mega-tech::before {
  background: radial-gradient(circle, rgba(180, 150, 255, 0.5) 0%, rgba(140, 100, 220, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(180, 150, 255, 0.45);
  opacity: 0.68;
}

@media (min-width: 1025px) {
  /* Legends: Z-A — desktop: "The Return of Mega Evolution" sprites ~28% smaller (72% of cell) */
  .tech-za-mega-row .tech-img-za-mega {
    max-width: 72% !important;
  }
}

.tech-img-za {
  width: auto !important;
  height: auto !important;
  max-width: min(438px, 100%);
  object-fit: contain !important;
  border-radius: 12px;
  flex-shrink: 1;
  min-width: 0;
  box-sizing: border-box;
}

.tech-leap-za .tech-za-row-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.tech-leap-za .tech-za-row-pair .tech-item-za {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.tech-leap-za .tech-za-row-pair .img-neon-wrap.img-neon-za-tech {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.img-neon-za-tech::before {
  background: radial-gradient(circle, rgba(255, 220, 150, 0.5) 0%, rgba(220, 180, 80, 0.28) 50%, transparent 75%);
  box-shadow: 0 0 20px rgba(255, 220, 150, 0.45);
  opacity: 0.68;
}

@media (orientation: portrait) and (max-width: 1024px) {
  /* Legends: Z-A — portrait: dossier stacks + Threat art in 2-column grid */
  .dossier-gameplay-za-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dossier-gameplay-za-text {
    flex: none;
    width: 100%;
  }

  .dossier-regional-za-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dossier-regional-za-text {
    flex: none;
    width: 100%;
  }

}

@media (orientation: landscape) and (max-width: 1024px) {
  /* Legends: Z-A — landscape: center lumiose / za-art; Mega Evolution one row per data row; Urban + Living City stacked */
  .dossier-gameplay-za-row {
    justify-content: center;
  }

  .dossier-gameplay-za-row .img-neon-wrap.dossier-gameplay-za-img {
    width: 100%;
    justify-content: center;
  }

  .dossier-regional-za-row {
    justify-content: center;
  }

  .dossier-regional-za-img-wrap {
    width: 100%;
  }

  /* Threat: keep 2×2 grid (same as base); ensure rows use full width */
  .dossier-threat-za-row1,
  .dossier-threat-za-row2 {
    width: 100%;
    max-width: 100%;
  }

  .tech-leap-za .tech-za-row-pair {
    flex-direction: column;
  }

  .tech-leap-za .tech-za-row-pair .tech-item-za {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* ── “Go to pokedex” CTA — một palette xanh/teal dùng chung mọi series ───── */
.za-pokedex-cta {
  margin: 28px auto 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.za-pokedex-cta__card {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  padding: 16px 22px;
  text-align: center;
  text-decoration: none;
  width: fit-content;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  color: rgba(232, 255, 250, 0.96);
  background: linear-gradient(
    145deg,
    rgba(0, 56, 52, 0.58) 0%,
    rgba(4, 42, 44, 0.76) 48%,
    rgba(2, 34, 38, 0.84) 100%
  );
  border: 1px solid rgba(72, 210, 175, 0.38);
  border-radius: 18px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 32px rgba(0, 185, 155, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.za-pokedex-cta__card:hover {
  border-color: rgba(110, 235, 200, 0.52);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(180, 255, 235, 0.1) inset,
    0 0 40px rgba(0, 210, 175, 0.24);
  transform: translateY(-2px);
}

.za-pokedex-cta__label {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.za-pokedex-cta__arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: rgba(130, 240, 210, 0.92);
  opacity: 0.95;
}

main.container.za-party-dex-page {
  max-width: min(1100px, 100%);
}

.za-party-dex__header {
  text-align: center;
  margin-bottom: 40px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.za-party-dex__title {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
}

.za-party-dex__section {
  margin-bottom: 48px;
}

.za-party-dex__section--mega {
  padding-top: 32px;
  border-top: 1px solid rgba(180, 140, 255, 0.15);
}

.za-party-dex__section-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 230, 210, 0.88);
  margin: 0 0 6px;
}

.za-party-dex__section--mega .za-party-dex__section-title {
  color: rgba(200, 170, 255, 0.92);
}

.za-party-dex__section-note {
  margin: 0 0 18px;
  font-size: 0.78rem;
  color: rgba(160, 185, 210, 0.55);
}

.za-party-dex__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px 10px;
}

/* Type màu chỉ ở viền 2px: lớp trong gần đục để gradient không lọt xuyên thân thẻ */
.za-party-dex__cell {
  --t1: #6b7280;
  --t2: #6b7280;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 5px 7px;
  border-radius: 12px;
  min-width: 0;
  border: 2px solid transparent;
  background:
    linear-gradient(165deg, rgb(26, 30, 36), rgb(20, 23, 30)) padding-box,
    linear-gradient(125deg, var(--t1), var(--t2)) border-box;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

/* Sprite tile — larger art; compact caption below */
.za-party-dex__sprite-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  background: transparent;
  transition: transform 0.2s ease;
}

.za-party-dex__sprite-link:hover {
  transform: scale(1.04);
}

.za-party-dex__sprite-link img {
  /* Khung 92×92 giữ nguyên; sprite +8% so với 84px baseline */
  width: calc(84px * 1.08);
  height: calc(84px * 1.08);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.za-party-dex__sprite-missing {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: rgba(255, 200, 160, 0.45);
  font-weight: 700;
  font-size: 1.05rem;
}

.za-party-dex__num {
  margin-top: 1px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(0, 220, 200, 0.58);
}

.za-party-dex__section--mega .za-party-dex__num {
  color: rgba(200, 170, 255, 0.62);
}

.za-party-dex__name {
  font-size: 0.54rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  color: rgba(230, 238, 255, 0.88);
  text-decoration: none;
  word-break: break-word;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.za-party-dex__name:hover {
  color: #fff;
  text-decoration: underline;
}

@media (hover: none), (pointer: coarse) {
  .za-pokedex-cta__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}