* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;

  background:
    radial-gradient(
      circle at top,
      #211533,
      #0b0b11 45%
    );

  color: white;
  min-height: 100vh;
}


/* ============================= */
/* TOPBAR */
/* ============================= */

.topbar {
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 40px;

  border-bottom: 1px solid #292633;

  background:
    rgba(
      10,
      10,
      15,
      0.9
    );
}

.logo {
  font-size: 25px;
  font-weight: bold;
  color: #a855f7;
}

.topbar-text {
  color: #777;
  font-size: 14px;
}


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

.hero {
  text-align: center;
  padding: 60px 20px 40px;
}

.hero h1 {
  font-size: 48px;
  margin: 0 0 10px;
}

.hero p {
  color: #999;
  margin-bottom: 30px;
}

.search-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-container input,
.search-container select {
  background: #17171f;
  color: white;

  border: 1px solid #33333f;
  border-radius: 12px;

  padding: 14px;
  font-size: 16px;
}

.search-container input {
  width: 350px;
  max-width: 90%;
}

.search-container select {
  min-width: 160px;
}


/* ============================= */
/* MAIN LAYOUT */
/* ============================= */

.main-layout {
  width: 1700px;
  max-width: 96%;

  margin: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    640px;

  gap: 25px;

  padding-bottom: 60px;

  align-items: start;
}


/* ============================= */
/* SECTION HEADER */
/* ============================= */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
}

.section-header span {
  color: #888;
  font-size: 14px;
}


/* ============================= */
/* POKEMON GRID */
/* ============================= */

.pokemon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}


/* ============================= */
/* POKEMON CARD */
/* ============================= */

.pokemon-card {
  background:
    linear-gradient(
      145deg,
      #181820,
      #121218
    );

  border: 1px solid #292936;
  border-radius: 18px;

  padding: 18px;

  cursor: pointer;

  transition:
    transform 0.2s,
    border 0.2s,
    background 0.2s;
}

.pokemon-card:hover {
  transform: translateY(-5px);
  border-color: #7c3aed;
  background: #1d1828;
}

.card-number {
  color: #777;
  font-size: 13px;
}

.card-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
}

.pokemon-card h3 {
  margin: 8px 0;
  font-size: 20px;
  text-transform: capitalize;
}


/* ============================= */
/* TYPES */
/* ============================= */

.types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.type {
  padding: 6px 10px;
  border-radius: 20px;

  font-size: 12px;
  font-weight: bold;

  text-transform: capitalize;

  background: #7038f8;
}


/* ============================= */
/* TYPE COLORS */
/* ============================= */

.type-fire {
  background: #f08030;
}

.type-water {
  background: #6890f0;
}

.type-grass {
  background: #78c850;
}

.type-electric {
  background: #f8d030;
  color: black;
}

.type-ice {
  background: #98d8d8;
  color: black;
}

.type-fighting {
  background: #c03028;
}

.type-poison {
  background: #a040a0;
}

.type-ground {
  background: #e0c068;
  color: black;
}

.type-flying {
  background: #a890f0;
}

.type-psychic {
  background: #f85888;
}

.type-bug {
  background: #a8b820;
}

.type-rock {
  background: #b8a038;
}

.type-ghost {
  background: #705898;
}

.type-dragon {
  background: #7038f8;
}

.type-dark {
  background: #705848;
}

.type-steel {
  background: #b8b8d0;
  color: black;
}

.type-fairy {
  background: #ee99ac;
  color: black;
}

.type-normal {
  background: #a8a878;
}


/* ============================= */
/* DETAILS PANEL */
/* ============================= */

.details-panel {
  background: #15151c;

  border: 1px solid #292936;
  border-radius: 20px;

  padding: 25px;

  position: sticky;

  top: 20px;

  max-height: calc(100vh - 40px);

  overflow-y: auto;
  overflow-x: hidden;

  align-self: start;

  margin-top: 46px;
}


/* ============================= */
/* CLOSE BUTTON */
/* ============================= */

.close-details {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #353542;
  border-radius: 10px;

  background: #1d1d26;

  color: #aaa;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s;

  z-index: 10;
}

.close-details:hover {
  background: #30243f;

  color: white;

  border-color: #8b5cf6;

  transform: scale(1.05);
}


/* ============================= */
/* DETAILS SCROLLBAR */
/* ============================= */

.details-panel::-webkit-scrollbar {
  width: 8px;
}

.details-panel::-webkit-scrollbar-track {
  background: #111118;
  border-radius: 10px;
}

.details-panel::-webkit-scrollbar-thumb {
  background: #4c356b;
  border-radius: 10px;
}

.details-panel::-webkit-scrollbar-thumb:hover {
  background: #7c3aed;
}

.details-panel {
  scrollbar-width: thin;
  scrollbar-color: #4c356b #111118;
}


/* ============================= */
/* PLACEHOLDER */
/* ============================= */

.details-placeholder {
  text-align: center;
  color: #777;
  padding: 60px 20px;
}

.details-placeholder h2 {
  color: white;
  margin-bottom: 10px;
}

.details-placeholder p {
  margin: 0;
}


/* ============================= */
/* DETAILS TOP */
/* ============================= */

.details-top {
  display: grid;

  grid-template-columns:
    230px
    minmax(0, 1fr);

  gap: 25px;

  align-items: center;

  padding-bottom: 24px;

  border-bottom: 1px solid #292936;
}

.details-artwork {
  background:
    linear-gradient(
      145deg,
      #1c1c25,
      #121218
    );

  border: 1px solid #2c2c38;
  border-radius: 18px;

  padding: 12px;
}

.details-image {
  width: 100%;
  height: 210px;
  object-fit: contain;
}

.details-summary {
  min-width: 0;

  padding-right: 35px;
}

.details-number {
  color: #777;
  font-size: 14px;
}

.details-summary h2 {
  font-size: 34px;

  margin:
    5px
    0
    10px;

  text-transform: capitalize;
}

.info-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;

  margin-top: 18px;
}

.info-box {
  background: #1d1d26;

  padding: 12px;

  border-radius: 12px;
}

.info-label {
  color: #777;
  font-size: 12px;
}

.info-value {
  margin-top: 3px;
  font-weight: bold;
}


/* ============================= */
/* DETAILS MIDDLE */
/* ============================= */

.details-middle {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 24px;

  margin-top: 24px;
}

.details-column {
  min-width: 0;
}


/* ============================= */
/* STATS */
/* ============================= */

.stats {
  margin-top: 0;
}

.stats h3 {
  margin:
    0
    0
    15px;
}

.stat {
  margin-bottom: 12px;
}

.stat-header {
  display: flex;
  justify-content: space-between;

  font-size: 14px;

  margin-bottom: 6px;
}

.stat-bar {
  height: 9px;

  border-radius: 20px;

  overflow: hidden;

  background: #292933;
}

.stat-fill {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #c084fc
    );

  border-radius: 20px;
}


/* ============================= */
/* ABILITIES + WEAKNESSES */
/* ============================= */

.compact-section {
  background: #1a1a22;

  border: 1px solid #2b2b36;

  border-radius: 14px;

  padding: 16px;
}

.compact-section + .compact-section {
  margin-top: 14px;
}

.compact-section h3 {
  margin:
    0
    0
    12px;

  font-size: 16px;
}

.ability-text {
  margin: 0;

  color: #d4d4d8;

  line-height: 1.5;
}


/* ============================= */
/* DETAILS BOTTOM */
/* ============================= */

.details-bottom {
  display: grid;

  grid-template-columns:
    0.9fr
    1.4fr;

  gap: 24px;

  margin-top: 24px;

  padding-top: 24px;

  border-top: 1px solid #292936;
}


/* ============================= */
/* EVOLUTIONS */
/* ============================= */

.evolutions-box h3 {
  margin:
    0
    0
    14px;
}

.evolution-chain {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}

.evolution-card {
  border: 1px solid #30303d;

  background: #1c1c25;

  color: white;

  border-radius: 12px;

  padding: 8px;

  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 88px;

  transition:
    border 0.2s,
    transform 0.2s,
    background 0.2s;
}

.evolution-card:hover {
  border-color: #8b5cf6;

  transform: translateY(-3px);

  background: #242030;
}

.evolution-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.evolution-card span {
  font-size: 12px;
  font-weight: bold;
  margin-top: 4px;
}

.evolution-arrow {
  color: #8b5cf6;

  font-size: 22px;
  font-weight: bold;
}


/* ============================= */
/* MOVES */
/* ============================= */

.moves-box {
  min-width: 0;
}

.moves-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}

.moves-header h3 {
  margin: 0;
}

.moves-header span {
  font-size: 12px;
  color: #777;
}

.moves-list {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 8px;

  max-height: 290px;

  overflow-y: auto;

  padding-right: 5px;
}

.moves-list::-webkit-scrollbar {
  width: 6px;
}

.moves-list::-webkit-scrollbar-track {
  background: #111118;
  border-radius: 10px;
}

.moves-list::-webkit-scrollbar-thumb {
  background: #423257;
  border-radius: 10px;
}

.move-item {
  background: #1d1d26;

  border: 1px solid #2c2c38;

  border-radius: 9px;

  padding: 10px;

  font-size: 13px;
}


/* ============================= */
/* SHINY BUTTON */
/* ============================= */

.shiny-button {
  width: 100%;

  margin-top: 24px;

  padding: 13px;

  border: none;
  border-radius: 12px;

  background: #7c3aed;

  color: white;

  font-size: 15px;
  font-weight: bold;

  cursor: pointer;
}

.shiny-button:hover {
  background: #8b5cf6;
}


/* ============================= */
/* EMPTY / LOADING */
/* ============================= */

.empty-text {
  color: #777;
  font-size: 13px;
}

.loading {
  color: #888;
  padding: 30px;
}


/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 1350px) {

  .main-layout {
    grid-template-columns:
      minmax(0, 1fr)
      560px;
  }

  .pokemon-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .details-top {
    grid-template-columns:
      200px
      minmax(0, 1fr);
  }

  .details-image {
    height: 190px;
  }

}


/* ============================= */
/* SMALL TABLET */
/* ============================= */

@media (max-width: 1000px) {

  .main-layout {
    grid-template-columns:
      1fr;
  }

  .details-panel {
    position: static;

    margin-top: 0;

    max-height: none;

    overflow-y: visible;
    overflow-x: visible;
  }

  .pokemon-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 700px) {

  .topbar {
    padding: 0 20px;
  }

  .topbar-text {
    display: none;
  }

  .hero {
    padding:
      40px
      15px
      30px;
  }

  .hero h1 {
    font-size: 35px;
  }

  .pokemon-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .card-image {
    height: 120px;
  }

  .details-panel {
    padding: 18px;
  }

  .details-top {
    grid-template-columns:
      1fr;
  }

  .details-artwork {
    max-width: 280px;

    width: 100%;

    margin: auto;
  }

  .details-middle {
    grid-template-columns:
      1fr;
  }

  .details-bottom {
    grid-template-columns:
      1fr;
  }

  .close-details {
    top: 10px;
    right: 10px;
  }

}


/* ============================= */
/* VERY SMALL MOBILE */
/* ============================= */

@media (max-width: 500px) {

  .moves-list {
    grid-template-columns:
      1fr;
  }

  .info-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .pokemon-grid {
    gap: 10px;
  }

  .pokemon-card {
    padding: 12px;
  }

  .pokemon-card h3 {
    font-size: 17px;
  }

}

/* ============================= */
/* CLICKABLE MOVES */
/* ============================= */

.move-item {
  width: 100%;

  background: #1d1d26;

  border: 1px solid #2c2c38;

  border-radius: 9px;

  padding: 10px;

  color: white;

  font-family: inherit;
  font-size: 13px;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.move-item:hover {
  background: #292033;

  border-color: #7c3aed;

  transform: translateY(-1px);
}


/* ============================= */
/* MOVE DETAIL PAGE */
/* ============================= */

.move-detail-page {
  min-height: 400px;
}

.back-button {
  margin-bottom: 24px;

  padding:
    10px
    14px;

  background: #1d1d26;

  border:
    1px solid #353542;

  border-radius:
    10px;

  color:
    #d4d4d8;

  font-size:
    13px;

  cursor:
    pointer;

  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.back-button:hover {
  background:
    #292033;

  border-color:
    #7c3aed;

  color:
    white;
}


.move-detail-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-bottom:
    20px;

  border-bottom:
    1px solid #292936;
}

.move-detail-header h2 {
  margin:
    5px
    0
    0;

  font-size:
    34px;
}

.move-detail-label {
  color:
    #777;

  font-size:
    12px;

  text-transform:
    uppercase;

  letter-spacing:
    1px;

  font-weight:
    bold;
}


/* MOVE STATS */

.move-stat-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    10px;

  margin-top:
    22px;
}

.move-stat-card {
  background:
    #1d1d26;

  border:
    1px solid #2c2c38;

  border-radius:
    12px;

  padding:
    14px;
}

.move-stat-card span {
  display:
    block;

  color:
    #777;

  font-size:
    12px;

  margin-bottom:
    5px;
}

.move-stat-card strong {
  font-size:
    17px;
}


/* MOVE EFFECT */

.move-effect-box {
  margin-top:
    22px;

  padding:
    18px;

  background:
    #1a1a22;

  border:
    1px solid #2b2b36;

  border-radius:
    14px;
}

.move-effect-box h3 {
  margin:
    0
    0
    10px;
}

.move-effect-box p {
  margin:
    0;

  color:
    #d4d4d8;

  line-height:
    1.6;
}


/* CURRENT POKEMON */

.move-current-pokemon {
  margin-top:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    18px;

  background:
    linear-gradient(
      145deg,
      #1d1828,
      #17171f
    );

  border:
    1px solid #30263d;

  border-radius:
    15px;
}

.move-current-pokemon h3 {
  margin:
    5px
    0
    0;

  font-size:
    22px;
}

.move-current-pokemon img {
  width:
    110px;

  height:
    110px;

  object-fit:
    contain;
}


/* ERROR */

.move-detail-error {
  text-align:
    center;

  padding:
    60px
    20px;
}


/* MOBILE */

@media (max-width: 700px) {

  .move-stat-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .move-detail-header h2 {
    font-size:
      28px;
  }

}


@media (max-width: 450px) {

  .move-stat-grid {
    grid-template-columns:
      1fr;
  }

}

/* =================================== */
/* ADVANCED MOVE SECTION */
/* =================================== */

.moves-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;

  margin-bottom: 12px;
}

.moves-title-row h3 {
  margin: 0;
}


/* GAME SELECT */

.move-version-select {
  max-width: 190px;

  padding:
    8px
    10px;

  border:
    1px solid #353542;

  border-radius:
    9px;

  outline: none;

  background:
    #1d1d26;

  color:
    white;

  font-size:
    12px;

  cursor:
    pointer;
}

.move-version-select:hover {
  border-color:
    #6d4d8e;
}

.move-version-select:focus {
  border-color:
    #8b5cf6;
}


/* =================================== */
/* MOVE FILTER BUTTONS */
/* =================================== */

.move-filters {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 12px;
}

.move-filter {
  padding:
    7px
    10px;

  border:
    1px solid #30303d;

  border-radius:
    8px;

  background:
    #1c1c25;

  color:
    #aaa;

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    bold;

  cursor:
    pointer;

  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.move-filter:hover {
  border-color:
    #6f528b;

  color:
    white;
}

.move-filter.active {
  background:
    #7c3aed;

  border-color:
    #8b5cf6;

  color:
    white;
}


/* =================================== */
/* MOVE CARDS */
/* =================================== */

.move-item {
  width: 100%;

  display: block;

  background:
    #1d1d26;

  border:
    1px solid #2c2c38;

  border-radius:
    10px;

  padding:
    10px;

  color:
    white;

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.move-item:hover {
  background:
    #292033;

  border-color:
    #7c3aed;

  transform:
    translateY(-1px);
}

.move-item-top {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    8px;
}

.move-name {
  font-size:
    13px;

  font-weight:
    bold;
}


/* =================================== */
/* LEVEL */
/* =================================== */

.move-level {
  flex-shrink: 0;

  padding:
    3px
    6px;

  border-radius:
    6px;

  background:
    #37264d;

  color:
    #c4a7e7;

  font-size:
    10px;

  font-weight:
    bold;
}


/* =================================== */
/* METHOD BADGES */
/* =================================== */

.move-method {
  display:
    inline-block;

  margin-top:
    7px;

  padding:
    3px
    6px;

  border-radius:
    5px;

  font-size:
    9px;

  font-weight:
    bold;

  text-transform:
    uppercase;

  letter-spacing:
    0.4px;
}


/* LEVEL UP */

.move-method-level-up {
  background:
    rgba(
      74,
      222,
      128,
      0.12
    );

  color:
    #86efac;
}


/* TM */

.move-method-machine {
  background:
    rgba(
      96,
      165,
      250,
      0.12
    );

  color:
    #93c5fd;
}


/* EGG */

.move-method-egg {
  background:
    rgba(
      244,
      114,
      182,
      0.12
    );

  color:
    #f9a8d4;
}


/* TUTOR */

.move-method-tutor {
  background:
    rgba(
      250,
      204,
      21,
      0.12
    );

  color:
    #fde047;
}


/* =================================== */
/* EMPTY MOVES */
/* =================================== */

.no-moves-message {
  grid-column:
    1 / -1;

  padding:
    20px;

  text-align:
    center;

  border:
    1px dashed #353542;

  border-radius:
    10px;

  color:
    #777;

  font-size:
    12px;
}


/* =================================== */
/* MOBILE */
/* =================================== */

@media (max-width: 700px) {

  .moves-title-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .move-version-select {
    width:
      100%;

    max-width:
      none;
  }

}

/* =================================== */
/* ADVANCED MOVE CARDS */
/* =================================== */

.moves-controls {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}


/* SORT */

.move-sort-select {
  flex-shrink: 0;

  padding:
    7px
    9px;

  border:
    1px solid #353542;

  border-radius:
    8px;

  background:
    #1d1d26;

  color:
    white;

  font-size:
    11px;

  outline: none;

  cursor: pointer;
}


/* MOVE LOADING */

.moves-loading {
  grid-column:
    1 / -1;

  padding:
    20px;

  text-align:
    center;

  color:
    #777;

  font-size:
    12px;
}


/* ADVANCED CARD */

.advanced-move-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}


/* NAME ROW */

.advanced-move-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}

.advanced-move-name {
  color:
    white;

  font-size:
    13px;

  font-weight:
    bold;

  line-height:
    1.3;
}


/* BADGES */

.advanced-move-badges {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    5px;
}

.mini-type {
  padding:
    4px
    7px;

  font-size:
    9px;
}


/* =================================== */
/* DAMAGE CLASS */
/* =================================== */

.damage-class {
  padding:
    4px
    7px;

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    bold;

  text-transform:
    uppercase;
}


/* PHYSICAL */

.damage-physical {
  background:
    rgba(
      239,
      68,
      68,
      0.14
    );

  color:
    #fca5a5;
}


/* SPECIAL */

.damage-special {
  background:
    rgba(
      59,
      130,
      246,
      0.14
    );

  color:
    #93c5fd;
}


/* STATUS */

.damage-status {
  background:
    rgba(
      156,
      163,
      175,
      0.14
    );

  color:
    #d1d5db;
}


/* =================================== */
/* MOVE MINI STATS */
/* =================================== */

.move-mini-stats {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    5px;
}

.move-mini-stats div {
  padding:
    6px;

  border-radius:
    7px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.move-mini-stats span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    #777;

  font-size:
    8px;

  text-transform:
    uppercase;

  letter-spacing:
    0.4px;
}

.move-mini-stats strong {
  color:
    #e4e4e7;

  font-size:
    11px;
}


/* =================================== */
/* TM NUMBER */
/* =================================== */

.move-level {
  white-space:
    nowrap;

  flex-shrink:
    0;

  padding:
    4px
    7px;

  border-radius:
    6px;

  background:
    #37264d;

  color:
    #c4a7e7;

  font-size:
    10px;

  font-weight:
    bold;
}


/* =================================== */
/* MOBILE */
/* =================================== */

@media (max-width: 700px) {

  .moves-controls {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .move-sort-select {
    width:
      100%;
  }

}

/* =================================== */
/* GENERATION FILTER */
/* =================================== */

#generationFilter {
  min-width: 190px;
}


/* =================================== */
/* LOAD MORE / GRID STATUS */
/* =================================== */

.grid-status {
  grid-column: 1 / -1;

  padding: 30px;

  text-align: center;

  color: #888;
}


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

@media (max-width: 700px) {

  #generationFilter {
    width: 100%;
    max-width: 350px;
  }

}

/* =================================== */
/* LOAD MORE */
/* =================================== */

.load-more-wrapper {
  grid-column:
    1 / -1;

  display:
    flex;

  justify-content:
    center;

  padding:
    22px 0 10px;
}

.load-more-button {
  min-width:
    180px;

  padding:
    13px 22px;

  border:
    1px solid #3d3150;

  border-radius:
    12px;

  background:
    #1c1825;

  color:
    white;

  font-size:
    14px;

  font-weight:
    bold;

  cursor:
    pointer;

  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.load-more-button:hover {
  background:
    #2a2038;

  border-color:
    #8b5cf6;

  transform:
    translateY(-2px);
}

.load-more-button:active {
  transform:
    translateY(0);
}

/* =================================== */
/* TYPE MATCHUPS */
/* =================================== */

.matchup-list {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}

.matchup-chip {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    6px
    9px;

  border-radius:
    8px;

  color: white;

  font-size:
    11px;

  font-weight:
    bold;

  text-transform:
    capitalize;
}

.matchup-type {
  opacity:
    0.95;
}

.matchup-multiplier {
  padding:
    2px
    5px;

  border-radius:
    5px;

  background:
    rgba(
      0,
      0,
      0,
      0.22
    );

  font-size:
    10px;
}


/* =================================== */
/* EVOLUTION CONDITIONS */
/* =================================== */

.evolution-chain {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;
}

.evolution-step {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-width:
    70px;
}

.evolution-condition {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  max-width:
    110px;

  text-align:
    center;
}

.evolution-condition span {
  padding:
    3px
    5px;

  border-radius:
    5px;

  background:
    #24202d;

  color:
    #aaa;

  font-size:
    9px;

  line-height:
    1.25;
}

.evolution-arrow {
  color:
    #8b5cf6;

  font-size:
    21px;

  font-weight:
    bold;
}


/* =================================== */
/* COMPACT MATCHUP BOXES */
/* =================================== */

.compact-section h3 {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


/* =================================== */
/* MOBILE EVOLUTIONS */
/* =================================== */

@media (max-width: 700px) {

  .evolution-chain {
    align-items:
      flex-start;
  }

  .evolution-step {
    min-width:
      55px;
  }

  .evolution-condition {
    max-width:
      90px;
  }

}

/* =================================== */
/* FORMS / REGIONAL VARIANTS */
/* =================================== */

.forms-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #292936;
}

.forms-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

.forms-heading h3 {
  margin: 4px 0 0;
  font-size: 20px;
}

.forms-small-label {
  color: #777;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.forms-count {
  color: #888;
  font-size: 11px;
}

.forms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-card {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid #2c2c38;
  border-radius: 13px;
  background: #1a1a22;
  color: white;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.form-card:hover {
  transform: translateY(-2px);
  border-color: #7c3aed;
  background: #211b2b;
}

.form-card.active-form {
  border-color: #8b5cf6;
  background: #241b31;
}

.form-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75px;
  border-radius: 10px;
  background: #14141b;
}

.form-image-wrap img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.form-card-content {
  min-width: 0;
}

.form-card-title {
  overflow: hidden;
  color: #f4f4f5;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-card-label {
  margin-top: 3px;
  color: #a78bfa;
  font-size: 10px;
  font-weight: bold;
}

.form-card-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.form-mini-type {
  padding: 3px 6px;
  font-size: 8px;
}

.form-current-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #7c3aed;
  color: white;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .forms-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================== */
/* TEAM BUILDER BUTTON */
/* =================================== */

.team-builder-open {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  margin-right: 20px;
  padding: 9px 13px;
  border: 1px solid #373244;
  border-radius: 10px;
  background: #191620;
  color: #e7e5ea;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
}

.team-builder-open:hover {
  border-color: #7c3aed;
  background: #241b31;
  transform: translateY(-1px);
}

.team-builder-open-icon {
  color: #a855f7;
}


/* =================================== */
/* OVERLAY */
/* =================================== */

.team-builder-open-body {
  overflow: hidden;
}

.team-builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 8, 0.82);
  backdrop-filter: blur(8px);
}

.team-builder-overlay.open {
  display: flex;
}

.team-builder-panel {
  width: min(1400px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid #2f2b38;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #15131b,
      #0f0f15
    );
  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.5);
}


/* =================================== */
/* HEADER */
/* =================================== */

.team-builder-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border-bottom: 1px solid #2a2632;
}

.team-builder-header h2 {
  margin: 4px 0 5px;
  font-size: 28px;
}

.team-builder-header p {
  margin: 0;
  color: #89858f;
  font-size: 13px;
}

.team-builder-kicker {
  color: #9d72c8;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.team-builder-close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #35313d;
  border-radius: 10px;
  background: #1d1a23;
  color: #aaa5b1;
  font-size: 24px;
  cursor: pointer;
}

.team-builder-close:hover {
  border-color: #7c3aed;
  color: white;
}


/* =================================== */
/* BODY */
/* =================================== */

.team-builder-body {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(360px, 0.8fr);
  min-height: 610px;
  max-height: calc(92vh - 110px);
}

.team-builder-left,
.team-builder-right {
  overflow-y: auto;
  padding: 24px;
}

.team-builder-left {
  border-right: 1px solid #292530;
}

.team-builder-right {
  background:
    rgba(255, 255, 255, 0.012);
}


/* =================================== */
/* TOOLBAR */
/* =================================== */

.team-builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.team-builder-toolbar > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.team-builder-toolbar h3 {
  margin: 0;
}

.team-builder-toolbar span {
  color: #77727f;
  font-size: 11px;
}

.team-clear-button {
  padding: 8px 10px;
  border: 1px solid #3a3037;
  border-radius: 8px;
  background: #21191d;
  color: #d59ba8;
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}

.team-clear-button:hover {
  border-color: #7c4554;
  color: #ffb4c1;
}


/* =================================== */
/* TEAM SLOTS */
/* =================================== */

.team-slots {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 12px;
}

.team-slot {
  position: relative;
  min-height: 195px;
  border: 1px solid #2c2933;
  border-radius: 15px;
  overflow: hidden;
}

.team-slot.filled {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background:
    linear-gradient(
      145deg,
      #1b1822,
      #14131a
    );
}

.team-slot.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  background: #131219;
  color: #66616d;
}

.team-slot-number {
  position: absolute;
  top: 9px;
  left: 10px;
  color: #68636e;
  font-size: 10px;
  font-weight: bold;
}

.team-remove-button {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 27px;
  height: 27px;
  border: 1px solid #39333f;
  border-radius: 8px;
  background: #211d27;
  color: #a9a2af;
  cursor: pointer;
}

.team-remove-button:hover {
  border-color: #8b5cf6;
  color: white;
}

.team-slot-image {
  width: 105px;
  height: 105px;
  object-fit: contain;
}

.team-slot-name {
  margin-top: 4px;
  font-size: 13px;
  font-weight: bold;
}

.team-slot-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 7px;
}

.team-mini-type {
  padding: 3px 6px;
  font-size: 8px;
}

.team-empty-plus {
  color: #55465f;
  font-size: 32px;
  line-height: 1;
}


/* =================================== */
/* SEARCH */
/* =================================== */

.team-search-box {
  margin-top: 22px;
}

.team-search-box label {
  display: block;
  margin-bottom: 8px;
  color: #d8d4dc;
  font-size: 12px;
  font-weight: bold;
}

.team-search-box input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #34303b;
  border-radius: 11px;
  outline: none;
  background: #17151d;
  color: white;
  font-family: inherit;
  font-size: 13px;
}

.team-search-box input:focus {
  border-color: #7c3aed;
}

.team-search-results {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.team-search-result {
  display: grid;
  grid-template-columns:
    54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 1px solid #2d2a34;
  border-radius: 11px;
  background: #18161d;
  color: white;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.team-search-result:hover:not(:disabled) {
  border-color: #7c3aed;
  background: #211b2b;
}

.team-search-result:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.team-search-result img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.team-search-result-info {
  min-width: 0;
}

.team-search-result-info > div:first-child {
  display: flex;
  flex-direction: column;
}

.team-search-result-info strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-search-number {
  color: #6e6974;
  font-size: 8px;
}

.team-search-types {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}

.team-search-add {
  color: #a879d8;
  font-size: 16px;
  font-weight: bold;
}

.team-search-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #36313e;
  border-radius: 10px;
  color: #74707a;
  font-size: 11px;
  text-align: center;
}


/* =================================== */
/* ANALYSIS */
/* =================================== */

.team-analysis-heading h3 {
  margin: 4px 0 18px;
}

.team-analysis-block {
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid #2d2934;
  border-radius: 13px;
  background: #18161d;
}

.team-analysis-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.team-analysis-title h4 {
  margin: 0;
  font-size: 13px;
}

.team-analysis-title span {
  color: #6f6a75;
  font-size: 9px;
}

.team-analysis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-weakness-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.team-analysis-row {
  display: grid;
  grid-template-columns:
    72px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
}

.team-analysis-type {
  justify-content: center;
  padding: 4px 6px;
  text-align: center;
  font-size: 8px;
}

.team-analysis-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 30px;
  background: #2a2631;
}

.team-analysis-bar-fill {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #6d3aae,
      #a855f7
    );
}

.team-analysis-row strong {
  color: #d9d5df;
  font-size: 11px;
  text-align: right;
}

.team-analysis-empty,
.team-analysis-loading {
  padding: 45px 20px;
  border: 1px dashed #342f3b;
  border-radius: 13px;
  color: #78727f;
  text-align: center;
}

.team-analysis-empty h4 {
  margin: 7px 0;
  color: #d8d4dd;
}

.team-analysis-empty p {
  max-width: 270px;
  margin: auto;
  font-size: 11px;
  line-height: 1.5;
}

.team-analysis-empty-icon {
  color: #79509e;
  font-size: 30px;
}

.team-analysis-loading {
  font-size: 11px;
}

.team-analysis-none {
  color: #706b76;
  font-size: 10px;
}

.team-balance-message {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.45;
}

.team-balance-message.good {
  border: 1px solid rgba(74, 222, 128, 0.2);
  background: rgba(74, 222, 128, 0.07);
  color: #a7e6ba;
}

.team-balance-message.warning {
  border: 1px solid rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.07);
  color: #efaaaa;
}


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

@media (max-width: 1000px) {

  .team-builder-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .team-builder-left,
  .team-builder-right {
    overflow: visible;
  }

  .team-builder-left {
    border-right: none;
    border-bottom: 1px solid #292530;
  }

}

@media (max-width: 700px) {

  .team-builder-overlay {
    padding: 0;
  }

  .team-builder-panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .team-builder-header {
    padding: 18px;
  }

  .team-builder-body {
    max-height: calc(100vh - 105px);
  }

  .team-builder-left,
  .team-builder-right {
    padding: 18px;
  }

  .team-slots {
    grid-template-columns:
      1fr 1fr;
  }

  .team-search-results {
    grid-template-columns: 1fr;
  }

  .team-builder-open {
    margin-right: 0;
  }

  .topbar-text {
    display: none;
  }

}

@media (max-width: 440px) {

  .team-slots {
    grid-template-columns: 1fr;
  }

}

/* =================================== */
/* MOBILE POKEMON DETAIL VIEW */
/* =================================== */

@media (max-width: 700px) {

  /*
    Zodra een Pokémon geopend wordt,
    verbergen we de volledige kaartlijst.
    Het detailpaneel wordt dan de hoofdweergave.
  */

  body.mobile-details-open .pokemon-section {
    display: none;
  }


  body.mobile-details-open .main-layout {
    display: block;
    width: 96%;
    max-width: 96%;
  }


  body.mobile-details-open .details-panel {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: 0;

    /*
      Zorgt dat scrollIntoView het paneel
      niet strak tegen de bovenrand zet.
    */
    scroll-margin-top: 12px;
  }


  /*
    Iets meer ruimte onderaan wanneer je
    door alle Pokémon-info scrollt.
  */

  body.mobile-details-open .details-panel {
    margin-bottom: 30px;
  }

}