/*
 * ==========================================================
 * BOOM TRAINER OS
 * NATIONAL POKEDEX V2
 *
 * Extension of the native Pokédex design engine.
 * Core layout comes from pokedex.css.
 * ==========================================================
 */


.portal-national-v2 {
  width: 100%;
}


.portal-national-v2 .national-v2-hero {
  background:
    radial-gradient(
      circle at 76% 36%,
      rgba(53, 231, 194, .13),
      transparent 31%
    ),
    radial-gradient(
      circle at 22% 24%,
      rgba(54, 149, 255, .11),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(7, 19, 28, .98),
      rgba(5, 13, 24, .99)
    );
}


.portal-national-v2
.dex-hero h1 strong {
  display: block;
  color: #67ead0;
}


.portal-national-v2
.dex-hero__collection strong {
  color: #67ead0;
}


.portal-national-v2
.dex-hero__region-word {
  color: rgba(
    81,
    222,
    191,
    .075
  );
}


.national-v2-systems
.dex-system-card:nth-child(2)
.dex-system-card__icon,
.national-v2-systems
.dex-system-card:nth-child(2)
strong {
  color: #67e9c7;
}


.national-v2-region-meta {
  display: block;
  margin-top: 10px;
  color: rgba(
    154,
    185,
    195,
    .55
  );
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
}


.portal-national-v2
.dex-control-panel {
  margin-top: 24px;
}


.portal-national-v2
.dex-tabs button:first-child[
  aria-pressed="true"
] {
  border-color:
    rgba(93, 234, 205, .62);
  color: #69e9cf;
}


.national-v2-entry {
  min-width: 0;
}


.national-v2-owner-signal {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid
    rgba(73, 224, 190, .24);
  border-radius: 999px;
  background:
    rgba(43, 190, 157, .07);
  color: #6be5c8;
  font-size: .5rem;
  font-weight: 1000;
  letter-spacing: .055em;
  white-space: nowrap;
}


.national-v2-entry.is-missing
.national-v2-owner-signal {
  display: none;
}


.national-v2-entry
.dex-entry__signals {
  max-width: 65%;
}


.national-v2-detail {
  min-width: 0;
}


.national-v2-empty-detail {
  display: flex;
  min-height: 520px;
  padding: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}


.national-v2-empty-detail > span {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 24px;
  border: 1px solid
    rgba(81, 225, 201, .2);
  border-radius: 50%;
  background:
    rgba(54, 207, 182, .05);
  color: #64e4c8;
  font-size: 2rem;
  box-shadow:
    0 0 40px
    rgba(63, 227, 197, .06);
}


.national-v2-empty-detail small {
  color: #5fdcc4;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .13em;
}


.national-v2-empty-detail h2 {
  margin: 10px 0;
  font-size: 1.6rem;
}


.national-v2-empty-detail p {
  max-width: 340px;
  margin: 0;
  color: #718797;
  line-height: 1.65;
}


.national-v2-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}


.national-v2-detail-tags span,
.national-v2-detail-tags strong {
  padding: 6px 9px;
  border: 1px solid
    rgba(91, 176, 198, .17);
  border-radius: 999px;
  background:
    rgba(71, 149, 173, .05);
  color: #829dad;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .07em;
}


.national-v2-detail-tags strong {
  border-color:
    rgba(255, 205, 62, .35);
  background:
    rgba(255, 194, 38, .06);
  color: #ffd25c;
}


.national-v2-owners {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid
    rgba(90, 159, 178, .12);
}


.national-v2-owners > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}


.national-v2-owners > header span {
  display: block;
  margin-bottom: 4px;
  color: #5edcc3;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .12em;
}


.national-v2-owners > header h3 {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .04em;
}


.national-v2-owners > header b {
  color: #67e8cc;
  font-size: 1.1rem;
}


.national-v2-owner-list {
  display: flex;
  max-height: 510px;
  overflow-y: auto;
  padding-right: 4px;
  flex-direction: column;
  gap: 7px;
  overscroll-behavior: contain;
}


.national-v2-owner {
  display: grid;
  grid-template-columns:
    42px
    minmax(100px, .85fr)
    minmax(120px, 1fr)
    auto
    auto;
  min-height: 64px;
  padding: 9px 10px;
  align-items: center;
  gap: 10px;
  border: 1px solid
    rgba(91, 151, 170, .11);
  border-radius: 12px;
  background:
    rgba(7, 18, 28, .66);
  color: inherit;
  text-decoration: none;
  transition:
    border-color .18s ease,
    transform .18s ease,
    background .18s ease;
}


.national-v2-owner:hover {
  transform:
    translateX(2px);
  border-color:
    rgba(74, 222, 193, .34);
  background:
    rgba(15, 35, 44, .8);
}


.national-v2-owner.is-shiny {
  border-color:
    rgba(255, 205, 65, .21);
  background:
    linear-gradient(
      90deg,
      rgba(255, 198, 40, .045),
      rgba(8, 18, 29, .72)
    );
}


.national-v2-owner__avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid
    rgba(84, 220, 195, .19);
  border-radius: 50%;
  background:
    rgba(20, 56, 60, .58);
  color: #68e6c9;
  font-size: .85rem;
  font-weight: 1000;
}


.national-v2-owner__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.national-v2-owner__name strong,
.national-v2-owner__stats strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.national-v2-owner__name span,
.national-v2-owner__stats span {
  display: block;
  margin-top: 3px;
  color: #657b88;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .04em;
}


.national-v2-owner.is-shiny
.national-v2-owner__name span {
  color: #d9b74f;
}


.national-v2-owner__date {
  text-align: right;
}


.national-v2-owner__date small {
  display: block;
  color: #516875;
  font-size: .45rem;
  font-weight: 900;
  letter-spacing: .07em;
}


.national-v2-owner__date b {
  display: block;
  margin-top: 3px;
  color: #8ca3af;
  font-size: .58rem;
}


.national-v2-owner > i {
  color: #5cdcc2;
  font-style: normal;
}


.national-v2-more {
  width: 100%;
  min-height: 42px;
  margin-top: 5px;
  border: 1px solid
    rgba(74, 222, 195, .25);
  border-radius: 11px;
  background:
    rgba(46, 196, 168, .06);
  color: #64e4ca;
  font: inherit;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
}


.national-v2-more:hover {
  background:
    rgba(46, 196, 168, .12);
}


.national-v2-no-owner {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  padding: 24px;
  border: 1px dashed
    rgba(103, 164, 180, .15);
  border-radius: 14px;
  color: #637985;
  text-align: center;
}


.national-v2-no-owner > span {
  margin-bottom: 10px;
  color: #5bd9c0;
  font-size: 1.4rem;
}


.national-v2-no-owner strong {
  color: #8aa1ad;
  font-size: .72rem;
}


.national-v2-no-owner p {
  margin: 6px 0 0;
  font-size: .7rem;
}


@media (max-width: 1180px) {

  .national-v2-owner {
    grid-template-columns:
      42px
      1fr
      auto;
  }

  .national-v2-owner__stats {
    grid-column:
      2 / -1;
  }

  .national-v2-owner__date {
    display: none;
  }
}


@media (max-width: 760px) {

  .portal-national-v2
  .dex-hero h1 strong {
    display: block;
  }

  .national-v2-owner {
    grid-template-columns:
      38px
      1fr
      auto;
  }

  .national-v2-owner__avatar {
    width: 36px;
    height: 36px;
  }

  .national-v2-owner__stats {
    grid-column:
      2 / -1;
  }

  .national-v2-owner-list {
    max-height: none;
  }

  .national-v2-empty-detail {
    min-height: 300px;
  }
}