/* ==========================================================
   BOOM POKEDEX DIAMOND + RAINBOW + SINNOH V1
   ========================================================== */

:root {
  --dex-diamond: #43e9ff;
  --dex-diamond-hot: #a8fbff;
  --dex-diamond-deep: #087bcb;
  --dex-diamond-ink: #03121f;
  --dex-rainbow-a: #ff4fd8;
  --dex-rainbow-b: #54f6ff;
  --dex-rainbow-c: #ffe45b;
  --dex-rainbow-d: #7dff8b;
}


/* ---------- GEN tabs ---------- */

.dex-tabs [data-dex-region] {
  position: relative;
  min-height: 54px;
  padding-top: 22px !important;
}

.dex-tabs [data-dex-region]::before {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .15em;
  opacity: .58;
  white-space: nowrap;
}

.dex-tabs [data-dex-region="global"]::before {
  content: "NATIONAL";
}

.dex-tabs [data-dex-region="kanto"]::before {
  content: "GEN I";
}

.dex-tabs [data-dex-region="johto"]::before {
  content: "GEN II";
}

.dex-tabs [data-dex-region="hoenn"]::before {
  content: "GEN III";
}

.dex-tabs [data-dex-region="sinnoh"]::before {
  content: "GEN IV";
}

.dex-tabs [data-dex-region="sinnoh"] {
  border-color: rgba(64, 214, 255, .38);
  box-shadow:
    inset 0 0 18px rgba(48, 168, 255, .05);
}

.dex-tabs [data-dex-region="sinnoh"][aria-pressed="true"] {
  color: #d9fbff;
  border-color: #38dcff;
  background:
    linear-gradient(
      180deg,
      rgba(25, 150, 255, .25),
      rgba(3, 35, 72, .82)
    );
  box-shadow:
    0 0 0 1px rgba(104, 236, 255, .18),
    0 0 22px rgba(23, 177, 255, .33),
    inset 0 0 24px rgba(63, 228, 255, .12);
}


/* ---------- Diamond / Rainbow filter buttons ---------- */

[data-dex-filter="diamond"] {
  color: #89f4ff !important;
}

[data-dex-filter="rainbow"] {
  color: #ffd9fb !important;
}

[data-dex-filter="diamond"][aria-pressed="true"] {
  border-color: #47eaff !important;
  background:
    linear-gradient(
      180deg,
      rgba(58, 224, 255, .21),
      rgba(5, 54, 87, .86)
    ) !important;
  box-shadow:
    0 0 20px rgba(53, 216, 255, .25);
}

[data-dex-filter="rainbow"][aria-pressed="true"] {
  border-color: rgba(255,255,255,.82) !important;
  background:
    linear-gradient(
      110deg,
      rgba(255, 67, 194, .18),
      rgba(67, 222, 255, .18),
      rgba(255, 225, 70, .16)
    ) !important;
  box-shadow:
    0 0 20px rgba(122, 216, 255, .2);
}


/* ==========================================================
   GRID CARD: DIAMOND
   ========================================================== */

.dex-entry[data-dex-variant="diamond"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(72, 226, 255, .92) !important;
  background:
    radial-gradient(
      circle at 70% 18%,
      rgba(104, 241, 255, .19),
      transparent 32%
    ),
    radial-gradient(
      circle at 22% 72%,
      rgba(18, 125, 255, .13),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(4, 32, 52, .98),
      rgba(3, 14, 27, .98)
    ) !important;
  box-shadow:
    0 0 0 1px rgba(177, 249, 255, .14),
    0 0 18px rgba(38, 214, 255, .26),
    inset 0 0 26px rgba(47, 212, 255, .09) !important;
}

.dex-entry[data-dex-variant="diamond"][aria-selected="true"] {
  border-color: #b8fbff !important;
  box-shadow:
    0 0 0 1px #42e8ff,
    0 0 13px rgba(98, 241, 255, .82),
    0 0 34px rgba(23, 164, 255, .48),
    inset 0 0 34px rgba(73, 225, 255, .14) !important;
}

.dex-entry[data-dex-variant="diamond"]::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  background:
    conic-gradient(
      from 18deg,
      transparent 0 15%,
      rgba(100, 242, 255, .12) 17%,
      transparent 20% 45%,
      rgba(54, 163, 255, .13) 48%,
      transparent 52% 100%
    );
  animation:
    dexDiamondCardSweep 9s linear infinite;
}

.dex-entry[data-dex-variant="diamond"] .dex-entry__number {
  color: #9cf7ff !important;
}

.dex-entry[data-dex-variant="diamond"] .dex-entry__number::after {
  content: "◆  DIAMOND";
  position: absolute;
  top: 7px;
  right: 7px;
  max-width: calc(100% - 48px);
  padding: 4px 7px;
  border: 1px solid rgba(119, 244, 255, .76);
  border-radius: 999px;
  color: #d7fdff;
  background:
    linear-gradient(
      180deg,
      rgba(41, 200, 255, .31),
      rgba(3, 66, 113, .84)
    );
  box-shadow:
    0 0 11px rgba(67, 226, 255, .44),
    inset 0 0 8px rgba(176, 252, 255, .13);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow:
    0 0 8px rgba(171, 251, 255, .9);
}

.dex-entry[data-dex-variant="diamond"] img {
  filter:
    hue-rotate(72deg)
    saturate(1.35)
    brightness(1.16)
    drop-shadow(0 0 5px rgba(89, 239, 255, .8))
    drop-shadow(0 0 13px rgba(25, 167, 255, .4)) !important;
}

.dex-entry[data-dex-variant="diamond"] strong {
  color: #d9fcff !important;
  text-shadow:
    0 0 10px rgba(61, 226, 255, .34);
}


/* ==========================================================
   GRID CARD: RAINBOW
   ========================================================== */

.dex-entry[data-dex-variant="rainbow"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.88) !important;
  background:
    linear-gradient(
      135deg,
      rgba(17, 10, 36, .98),
      rgba(4, 28, 41, .98)
    ) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 24px rgba(104, 216, 255, .24),
    inset 0 0 30px rgba(255, 82, 207, .08) !important;
}

.dex-entry[data-dex-variant="rainbow"]::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 66, 197, .19),
      rgba(72, 222, 255, .18),
      rgba(255, 225, 76, .17),
      rgba(83, 255, 149, .15),
      rgba(154, 92, 255, .18),
      rgba(255, 66, 197, .19)
    );
  filter: blur(13px);
  animation:
    dexRainbowSpin 7s linear infinite;
}

.dex-entry[data-dex-variant="rainbow"] .dex-entry__number::after {
  content: "✧  RAINBOW";
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 999px;
  color: white;
  background:
    linear-gradient(
      105deg,
      rgba(255, 54, 190, .72),
      rgba(30, 177, 255, .72),
      rgba(255, 200, 47, .72)
    );
  box-shadow:
    0 0 14px rgba(119, 218, 255, .43);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .08em;
}

.dex-entry[data-dex-variant="rainbow"] img {
  filter:
    saturate(1.45)
    brightness(1.18)
    drop-shadow(0 0 7px rgba(120, 232, 255, .68)) !important;
  animation:
    dexRainbowPokemon 5s linear infinite;
}


/* ==========================================================
   SINNOH DETAIL
   ========================================================== */

.dex-detail--sinnoh {
  --specimen-accent: #45d9ff;
}


/* ==========================================================
   VARIANT HERO
   ========================================================== */

.dex-variant-hero {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 14px 4px;
  padding: 11px 13px;
  border: 1px solid rgba(126, 241, 255, .17);
  border-radius: 12px;
  background:
    linear-gradient(
      100deg,
      rgba(13, 33, 48, .82),
      rgba(7, 16, 27, .42)
    );
}

.dex-variant-hero__crest {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dex-variant-hero__crest > span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  font-size: 18px;
}

.dex-variant-hero__crest > span::first-letter {
  transform: rotate(-45deg);
}

.dex-variant-hero__crest div {
  min-width: 0;
}

.dex-variant-hero__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #83dce9;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}

.dex-variant-hero__title {
  display: block;
  overflow: hidden;
  color: #edfaff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dex-variant-hero__rarity {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #8fa9b8;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}


/* ==========================================================
   VARIANT SELECTOR
   ========================================================== */

.dex-variant-selector {
  position: relative;
  z-index: 4;
  margin: 13px 14px 14px;
  padding: 10px;
  border: 1px solid rgba(128, 172, 194, .22);
  border-radius: 13px;
  background:
    rgba(3, 15, 25, .64);
  backdrop-filter: blur(10px);
}

.dex-variant-selector > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.dex-variant-selector > header span {
  color: #7fdceb;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .16em;
}

.dex-variant-selector > header small {
  color: #5c7483;
  font-size: 7px;
  font-weight: 800;
}

.dex-variant-selector__forms {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.dex-variant-form {
  position: relative;
  display: grid;
  grid-template-columns:
    auto minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 8px;
  border: 1px solid rgba(110, 158, 181, .26);
  border-radius: 999px;
  color: #8096a4;
  background:
    linear-gradient(
      180deg,
      rgba(12, 30, 42, .88),
      rgba(5, 14, 22, .92)
    );
  cursor: pointer;
}

.dex-variant-form span {
  font-size: 10px;
}

.dex-variant-form b {
  overflow: hidden;
  font-size: 7px;
  letter-spacing: .07em;
  text-overflow: ellipsis;
}

.dex-variant-form small {
  min-width: 14px;
  color: #5f7888;
  font-size: 7px;
  font-weight: 900;
}

.dex-variant-form:disabled {
  opacity: .28;
  cursor: default;
}

.dex-variant-form--shiny:not(:disabled) {
  color: #ffe370;
  border-color: rgba(255, 215, 71, .34);
}

.dex-variant-form--diamond:not(:disabled) {
  color: #7ff4ff;
  border-color: rgba(74, 232, 255, .45);
}

.dex-variant-form--rainbow:not(:disabled) {
  color: #fff;
  border-color: rgba(230, 205, 255, .42);
}

.dex-variant-form[aria-pressed="true"] {
  opacity: 1;
  transform: translateY(-1px);
}

.dex-variant-form--normal[aria-pressed="true"] {
  color: #e7f3f8;
  border-color: #a8c2ce;
  box-shadow:
    0 0 14px rgba(162, 203, 220, .13);
}

.dex-variant-form--shiny[aria-pressed="true"] {
  color: #fff2a6;
  border-color: #ffe45a;
  box-shadow:
    0 0 15px rgba(255, 216, 59, .28),
    inset 0 0 10px rgba(255, 220, 71, .1);
}

.dex-variant-form--diamond[aria-pressed="true"] {
  color: white;
  border-color: #7af5ff;
  background:
    linear-gradient(
      180deg,
      rgba(44, 211, 255, .29),
      rgba(4, 66, 111, .91)
    );
  box-shadow:
    0 0 0 1px rgba(175, 252, 255, .3),
    0 0 18px rgba(44, 219, 255, .56),
    inset 0 0 14px rgba(118, 246, 255, .14);
}

.dex-variant-form--rainbow[aria-pressed="true"] {
  border-color: rgba(255,255,255,.94);
  background:
    linear-gradient(
      100deg,
      rgba(255, 67, 197, .36),
      rgba(47, 204, 255, .35),
      rgba(255, 222, 71, .32)
    );
  box-shadow:
    0 0 17px rgba(102, 221, 255, .42);
}


/* ==========================================================
   VARIANT REGISTRY
   ========================================================== */

.dex-variant-registry {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 14px 14px;
}

.dex-variant-registry > div {
  display: grid;
  grid-template-columns:
    24px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid rgba(107, 150, 171, .18);
  border-radius: 10px;
  background:
    rgba(4, 16, 25, .56);
}

.dex-variant-registry > div > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #6d8594;
  background: rgba(255,255,255,.04);
}

.dex-variant-registry small {
  color: #68808f;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}

.dex-variant-registry strong {
  color: #ddecf2;
  font-size: 13px;
}

.dex-variant-registry .has-diamond {
  border-color: rgba(67, 232, 255, .35);
  box-shadow:
    inset 0 0 17px rgba(64, 218, 255, .06);
}

.dex-variant-registry .has-diamond > span,
.dex-variant-registry .has-diamond strong {
  color: #83f6ff;
}

.dex-variant-registry .has-rainbow {
  border-color: rgba(242, 214, 255, .32);
  background:
    linear-gradient(
      105deg,
      rgba(255, 57, 192, .05),
      rgba(56, 205, 255, .05),
      rgba(255, 222, 68, .04)
    );
}

.dex-variant-registry .has-rainbow > span,
.dex-variant-registry .has-rainbow strong {
  color: #fff;
}


/* ==========================================================
   DIAMOND DETAIL PANEL
   ========================================================== */

.dex-detail.is-diamond {
  --specimen-accent: var(--dex-diamond);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(92, 236, 255, .92) !important;
  background:
    radial-gradient(
      ellipse at 50% 22%,
      rgba(44, 207, 255, .13),
      transparent 39%
    ),
    radial-gradient(
      ellipse at 72% 61%,
      rgba(20, 109, 255, .08),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      rgba(3, 22, 37, .995),
      rgba(2, 10, 18, .995)
    ) !important;
  box-shadow:
    0 0 0 1px rgba(177, 251, 255, .24),
    0 0 18px rgba(58, 226, 255, .38),
    0 0 50px rgba(19, 124, 255, .20),
    inset 0 0 50px rgba(62, 222, 255, .07) !important;
}

.dex-detail.is-diamond::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .7;
  background:
    linear-gradient(
      135deg,
      rgba(101, 241, 255, .38) 0 1px,
      transparent 1px 12%
    ),
    linear-gradient(
      45deg,
      transparent 0 82%,
      rgba(76, 221, 255, .16) 82% 83%,
      transparent 83%
    ),
    radial-gradient(
      circle at 15% 11%,
      #bafcff 0 1px,
      transparent 1.6px
    ),
    radial-gradient(
      circle at 83% 18%,
      #69e9ff 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 71% 44%,
      rgba(187,251,255,.85) 0 1px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 13% 69%,
      rgba(103,225,255,.8) 0 1px,
      transparent 1.7px
    );
}

.dex-detail.is-diamond::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(126, 241, 255, .17);
  clip-path:
    polygon(
      0 22px,
      22px 0,
      calc(100% - 22px) 0,
      100% 22px,
      100% calc(100% - 22px),
      calc(100% - 22px) 100%,
      22px 100%,
      0 calc(100% - 22px)
    );
  box-shadow:
    inset 0 0 18px rgba(67, 224, 255, .08);
}

.dex-detail.is-diamond > * {
  position: relative;
  z-index: 3;
}

.dex-detail.is-diamond > header {
  color: #8ff6ff;
}

.dex-detail.is-diamond .dex-variant-hero {
  border-color: rgba(91, 237, 255, .48);
  background:
    linear-gradient(
      100deg,
      rgba(27, 143, 195, .22),
      rgba(5, 29, 49, .66)
    );
  box-shadow:
    inset 0 0 18px rgba(87, 230, 255, .06);
}

.dex-detail.is-diamond .dex-variant-hero__crest > span {
  color: #8df7ff;
  border-color: #68ecff;
  background:
    rgba(53, 206, 255, .11);
  box-shadow:
    0 0 13px rgba(55, 218, 255, .6),
    inset 0 0 10px rgba(171, 251, 255, .1);
  text-shadow:
    0 0 10px #66efff;
}

.dex-detail.is-diamond .dex-variant-hero__eyebrow,
.dex-detail.is-diamond .dex-variant-hero__rarity {
  color: #72eeff;
}

.dex-detail.is-diamond .dex-variant-hero__title {
  color: #e5feff;
  text-shadow:
    0 0 12px rgba(82, 235, 255, .55);
}

.dex-detail.is-diamond .dex-detail__scanner {
  position: relative;
  margin:
    5px 13px 0;
  overflow: hidden;
  border: 1px solid rgba(75, 225, 255, .21);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at center,
      rgba(56, 212, 255, .16),
      rgba(4, 19, 32, .04) 46%,
      rgba(2, 10, 18, .75) 78%
    );
  box-shadow:
    inset 0 0 30px rgba(60, 218, 255, .08);
}

.dex-detail.is-diamond .dex-detail__scanner::before,
.dex-detail.is-diamond .dex-detail__scanner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.dex-detail.is-diamond .dex-detail__scanner::before {
  width: 72%;
  aspect-ratio: 1;
  left: 14%;
  top: 3%;
  border: 1px solid rgba(75, 231, 255, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(60, 221, 255, .025),
    0 0 0 56px rgba(60, 221, 255, .018);
}

.dex-detail.is-diamond .dex-detail__scanner::after {
  inset: auto 13% 8% 13%;
  height: 22px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(64, 230, 255, .26),
      transparent 68%
    );
  filter: blur(5px);
}

.dex-detail.is-diamond .dex-detail__scanner img {
  position: relative;
  z-index: 4;
  filter:
    hue-rotate(72deg)
    saturate(1.48)
    brightness(1.24)
    contrast(1.05)
    drop-shadow(0 0 7px rgba(120, 249, 255, .92))
    drop-shadow(0 0 22px rgba(22, 159, 255, .62)) !important;
  transform:
    scale(1.07);
  animation:
    dexDiamondFloat 4.8s ease-in-out infinite;
}

.dex-detail[data-dex-active-variant]:not(
  [data-dex-active-variant="shiny"]
) .dex-detail__shiny-showcase {
  display: none !important;
}


/* ---------- Crystal shard field ---------- */

.dex-crystal-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.dex-crystal-field i {
  position: absolute;
  display: block;
  width: 17px;
  height: 44px;
  opacity: 0;
  border: 1px solid rgba(178, 251, 255, .72);
  background:
    linear-gradient(
      145deg,
      rgba(220, 254, 255, .72),
      rgba(58, 215, 255, .14) 42%,
      rgba(29, 112, 255, .24)
    );
  clip-path:
    polygon(
      50% 0,
      100% 36%,
      73% 100%,
      18% 82%,
      0 33%
    );
  box-shadow:
    0 0 10px rgba(73, 224, 255, .32);
}

.dex-detail.is-diamond .dex-crystal-field i {
  opacity: .78;
}

.dex-crystal-field i:nth-child(1) {
  left: 7%;
  bottom: 8%;
  transform: rotate(-22deg) scale(.78);
}

.dex-crystal-field i:nth-child(2) {
  left: 17%;
  top: 11%;
  transform: rotate(19deg) scale(.43);
}

.dex-crystal-field i:nth-child(3) {
  right: 8%;
  bottom: 7%;
  transform: rotate(23deg) scale(.9);
}

.dex-crystal-field i:nth-child(4) {
  right: 18%;
  top: 9%;
  transform: rotate(-16deg) scale(.45);
}

.dex-crystal-field i:nth-child(5) {
  left: 46%;
  bottom: 0;
  transform: rotate(6deg) scale(.5);
}

.dex-crystal-field i:nth-child(6) {
  right: 4%;
  top: 43%;
  transform: rotate(31deg) scale(.34);
}


/* ==========================================================
   RAINBOW DETAIL PANEL
   ========================================================== */

.dex-detail.is-rainbow {
  --specimen-accent: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.88) !important;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(91, 221, 255, .13),
      transparent 38%
    ),
    linear-gradient(
      160deg,
      rgba(19, 7, 34, .99),
      rgba(3, 24, 35, .99)
    ) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.17),
    0 0 23px rgba(94, 220, 255, .34),
    0 0 52px rgba(242, 74, 208, .16),
    inset 0 0 46px rgba(255,255,255,.04) !important;
}

.dex-detail.is-rainbow::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 52, 186, .13),
      rgba(56, 216, 255, .13),
      rgba(255, 224, 73, .12),
      rgba(75, 255, 151, .11),
      rgba(154, 83, 255, .12),
      rgba(255, 52, 186, .13)
    );
  filter: blur(24px);
  animation:
    dexRainbowSpin 11s linear infinite;
}

.dex-detail.is-rainbow > * {
  position: relative;
  z-index: 3;
}

.dex-detail.is-rainbow .dex-variant-hero {
  border-color: rgba(255,255,255,.45);
  background:
    linear-gradient(
      105deg,
      rgba(255, 58, 187, .11),
      rgba(48, 204, 255, .12),
      rgba(255, 218, 60, .08)
    );
}

.dex-detail.is-rainbow .dex-variant-hero__crest > span {
  color: white;
  border-color: white;
  background:
    linear-gradient(
      135deg,
      rgba(255,70,196,.24),
      rgba(74,218,255,.22),
      rgba(255,221,69,.2)
    );
  box-shadow:
    0 0 18px rgba(111, 226, 255, .45);
}

.dex-detail.is-rainbow .dex-detail__scanner img {
  filter:
    saturate(1.55)
    brightness(1.22)
    drop-shadow(0 0 8px rgba(255,255,255,.72))
    drop-shadow(0 0 23px rgba(71, 217, 255, .45)) !important;
  animation:
    dexRainbowPokemon 5s linear infinite,
    dexDiamondFloat 4.6s ease-in-out infinite;
}

.dex-detail.is-rainbow .dex-crystal-field i {
  opacity: .68;
  animation:
    dexRainbowShard 5s linear infinite;
}


/* ---------- specimen labels ---------- */

.dex-specimens li {
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


/* ==========================================================
   MOTION
   ========================================================== */

@keyframes dexDiamondCardSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dexDiamondFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -4px;
  }
}

@keyframes dexRainbowSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dexRainbowPokemon {
  0% {
    filter:
      hue-rotate(0deg)
      saturate(1.55)
      brightness(1.2)
      drop-shadow(0 0 8px rgba(255,255,255,.72));
  }

  100% {
    filter:
      hue-rotate(360deg)
      saturate(1.55)
      brightness(1.2)
      drop-shadow(0 0 8px rgba(255,255,255,.72));
  }
}

@keyframes dexRainbowShard {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .dex-variant-selector__forms {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .dex-variant-hero {
    align-items: flex-start;
  }

  .dex-variant-hero__rarity {
    display: none;
  }

  .dex-variant-selector,
  .dex-variant-registry,
  .dex-variant-hero {
    margin-left: 10px;
    margin-right: 10px;
  }

  .dex-variant-registry {
    grid-template-columns:
      1fr 1fr;
  }

  .dex-detail.is-diamond .dex-detail__scanner {
    margin-left: 9px;
    margin-right: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dex-entry[data-dex-variant="diamond"]::before,
  .dex-entry[data-dex-variant="rainbow"]::before,
  .dex-detail.is-diamond .dex-detail__scanner img,
  .dex-detail.is-rainbow::before,
  .dex-detail.is-rainbow .dex-detail__scanner img,
  .dex-detail.is-rainbow .dex-crystal-field i {
    animation: none !important;
  }
}

/* BOOM_GEN_V_IX_TAB_LABELS_V1 */
.dex-tabs [data-dex-region="unova"]::before { content: "GEN V"; }
.dex-tabs [data-dex-region="kalos"]::before { content: "GEN VI"; }
.dex-tabs [data-dex-region="alola"]::before { content: "GEN VII"; }
.dex-tabs [data-dex-region="galar"]::before { content: "GEN VIII"; }
.dex-tabs [data-dex-region="paldea"]::before { content: "GEN IX"; }