:root {
    --primary-color: #e53935;
            --secondary-color: #2196f3;
            --accent-color: #ffc107;
            --dark-color: #333;
            --light-color: #f5f5f5;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --card-bg: white;
            --text-color: #333;
            --muted-text: #777;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 85%;
            margin: 0 auto;
            padding: 20px;
            background-color: var(--dark-color);
            color: var(--text-color);
            line-height: 1.4;
        } 
        h1, h2, h3 {
            color: var(--primary-color);
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        .controls {
            background-color: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 3px 10px var(--shadow-color);
            padding: 20px;
            margin-bottom: 20px;
        }
        .control-section {
            margin-bottom: 15px;
        }
        .control-section:last-child {
            margin-bottom: 0;
        }
        .control-section h3 {
            margin-bottom: 10px;
            font-size: 16px;
        }
        .developer-info {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            color: #777;
            text-decoration: none;
            transition: color 0.5s ease;
        }
        
        .developer-info:hover {
            color: #5865F2; /* Discord brand color */
        }
        
        .discord-icon {
            width: 28px;
            height: 28px;
            opacity: 0.8;
            transition: opacity 0.5s ease;
        }
        
        .developer-info:hover .discord-icon {
            opacity: 1;
        }
        .filters-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .filters-row:last-child {
            margin-bottom: 0;
        }
        select, input, button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            font-size: 14px;
        }
        select, input {
            min-width: 150px;
        }
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            min-width: auto;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        button:hover {
            background-color: #c62828;
        }
        button.secondary {
            background-color: var(--secondary-color);
        }
        button.secondary:hover {
            background-color: #1976d2;
        }
        button.accent {
            background-color: var(--accent-color);
            color: var(--dark-color);
        }
        button.accent:hover {
            background-color: #ffb300;
        }
        .stats-container {
            background-color: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 3px 10px var(--shadow-color);
            padding: 8px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .pokemon-card.selected {
            box-shadow: 0 0 0 5px red;
            border-radius: 12px;
            /* transform: -4px; */
            cursor: grabbing;
            /* outline-offset: -2px; */
        }
        .modern-card {
          font-family: 'Segoe UI', sans-serif;
          text-align: center;
          /* background: rgb(255, 236, 236); */
          border-radius: 16px;
          padding: 6px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          display: flex;
          flex-direction: column;
          gap: 2px;
          position: relative;
        }
        
        .modern-card.type-bug     { background-color: #A8B820; color: #000; }
        .modern-card.type-dark    { background-color: #70655d; color: #000; }
        /* modern-card.type-dark    { background-color: #705848; color: #000; } */
        .modern-card.type-dragon  { background-color: #7d49f7; color: #000; }
        /* modern-card.type-dragon  { background-color: #7038F8; color: #000; } */
        .modern-card.type-electric{ background-color: #F8D030; color: #000; }
        .modern-card.type-fairy   { background-color: #EE99AC; color: #000; }
        .modern-card.type-fighting{ background-color: #C03028; color: #000; }
        .modern-card.type-fire    { background-color: #F08030; color: #000; }
        .modern-card.type-flying  { background-color: #A890F0; color: #000; }
        .modern-card.type-ghost   { background-color: #705898; color: #000; }
        .modern-card.type-grass   { background-color: #78C850; color: #000; }
        .modern-card.type-ground  { background-color: #E0C068; color: #000; }
        .modern-card.type-ice     { background-color: #98D8D8; color: #000; }
        .modern-card.type-normal  { background-color: #A8A878; color: #000; }
        .modern-card.type-poison  { background-color: #A040A0; color: #000; }
        .modern-card.type-psychic { background-color: #F85888; color: #000; }
        .modern-card.type-rock    { background-color: #B8A038; color: #000; }
        .modern-card.type-steel   { background-color: #B8B8D0; color: #000; }
        .modern-card.type-water   { background-color: #6890F0; color: #000; }
        
        /* Make sure the moves section and other elements are above the background */
        .modern-card-bottom {
          background-color: whitesmoke;
          padding: 4px;
          opacity: 0.8375;
          flex-grow: 1;  /* Allow the bottom to grow and fill remaining space */
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border-bottom-left-radius: 12px;
          border-bottom-right-radius: 12px;
          position: relative;
          z-index: 10;  /* Bring it above the shadow or lucky background */
        }

        .modern-header {
            align-self: flex-start;  /* ✅ ADD THIS LINE */
            margin-left: 6px;        /* ✅ Optional: aligns nicely inside the card */
            z-index: 3;
        }
        
        .modern-name {
          font-weight: bold;
          font-size: 1.2rem;
        }
        .modern-types {
          display: flex;
          justify-content: center;
          gap: 4px;
        }
        .type-badge-icon {
          width: 22px;
          height: 22px;
          object-fit: contain;
          transform: scale(0.875);            

        }
        .type-badge-icon-stab {
            
          width: 22px;
          height: 22px;
          object-fit: contain;
          transform: scale(0.875);            
          border: 1px solid black;
          border-radius: 13px;
        }
        .type-icon-row .type-badge-icon {
          transform: scale(1.0);            
        }
        

.modern-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 12px;
    padding-bottom: 2px;
    /* overflow: hidden;  */
}

/* .modern-image-lucky {
    background-image: url("https://pogolist.com/Icons/lucky_icon.png");
    background-repeat: repeat;
    background-position: center;
    background-size: auto;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
} */

.modern-image-shadow {
    background-image: url("https://pogolist.com/Icons/shadow_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* .modern-image-purified {
    background-image: url("https://pogolist.com/Icons/purified_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
} */

.modern-image-shiny {
    background-image: url("https://pogolist.com/Icons/shiny_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.modern-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 144px;  /* ✅ Provide a real fixed height */
    position: relative;
    z-index: 2;
}

.pokemon-img {
    display: block;
    max-width: 115%;
    max-height: 115%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* margin: 0 auto; */
    margin-bottom: -10px;
    position: absolute;
    bottom: 0;
}

            .modern-header-row {
                position: relative;
                width: 100%;
                height: 24px;
                padding: 12px;
                display: flex; /* ✅ NEW: flex container */
                align-items: center; /* ✅ NEW: vertical align */
                justify-content: center; /* ✅ center CP text horizontally */
            }
            
            
            .modern-cp {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                font-size: 12px;
                font-weight: bold;
                color: red;
                z-index: 2;
                line-height: 1.2em;
                text-align: center;
                white-space: nowrap;
            }
            .modern-cp-value {
                font-size: 20px;
                font-weight: bold;
                color: red;
                z-index: 2;
                line-height: 1.2em;
            }
            .cp-text {
                font-size: 1.1em;
                font-weight: bold;
                color: #d12b2b;
                margin-top: 6px;
              }
              .cp-value {
                  font-size: 1.4em;
                  font-weight: bold;
                  color: #d12b2b;
                  margin-top: 6px;
                }

            
        .modern-info-row {
          display: flex;
          justify-content: space-around;
          font-size: 0.85rem;
          color: #666;
          margin-bottom: 5px;
        }
        .pokemon-card .modern-moves {
            display: none;
        }
        
        .pokemon-card.show-moves .modern-moves {
            display: flex;
        }
        

        .modern-moves {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: column;
          gap: 4px;
        }
        .modern-ivs {
            display: flex;
            justify-content: center;
            border: 1px;
            /* margin-top: 10px; */
        }
        
        .iv-value-container {
            display: inline;
            flex-direction: column;
            align-items: center;
            font-weight: 600;
            justify-content: center;
            margin: 0px 2px 1px;
            border: 2px solid #ccc;  /* Add border around the emoji */
            border-radius: 12px; 
        }
        
        .iv-value {
            padding-top: 2px;
            padding-left: 1px;
            padding-right: 1px;
            font-size: 16px;
            /* margin-bottom: 1px;  Space between value and emoji */
        }
        
        .iv-label {
            padding-bottom: 3px;
            padding-left: 1px;
            padding-right: 1px;
            font-size: 18px;  /* Size of the emoji */
        }
        
        .stats-container.selected-mode .stat-box {
            border: 3px solid red;
            border-radius: 8px;
            padding: 8px;
        }
        .stats-container.filtered-mode {
            border: 3px solid gray;
            border-radius: 8px;
            padding: 8px;
        }
        .stats-container.filtered-mode .stat-box {
            border: 3px solid gray;
            border-radius: 8px;
            padding: 8px;
        }
        .stat-box {
            flex: 1;
            min-width: 100px;
            text-align: center;
            padding: 8px;
            background-color: #f5f5f5;
            border-radius: 8px;
        }
        .stat-value {
            font-size: 22px;
            font-weight: bold;
            color: var(--primary-color);
        }
        .stat-label {
            font-size: 15px;
            color: var(--muted-text);
        }
        .search-string {
            padding: 10px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 10px 0;
            word-break: break-all;
            font-family: monospace;
        }

        .pokemon-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 5px;
        }
        
        @media (max-width: 768px) {
            .pokemon-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 3px;
            }
        }

/* Rank-specific borders */
.rank-1 {
    border-color: gold;
}
.rank-2 {
    border-color: silver;
}
.rank-3 {
    border-color: #cd7f32; /* bronze */
}

/* Shared styles */
.pvp-rank-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 20px;
  z-index: 10;
            padding: 2px;
            background-color: rgb(232, 232, 232);
            border-radius: 50%;
            border: 1px solid transparent;
            border-color: #000000; /* bronze */
            pointer-events: auto;
        }

    .rank-medal {
        display: inline-block;        
    }
    .rank-number {
        font-size: 18px;
        font-weight: bold;
      }

/***** Special Icons *****/
.special-icons-container {
    position: absolute;
    height: 32px;
    width: 100%;
    display: inline-flex;
    justify-content: space-around; /* Ensures the icons are spread out */
    align-items: center; /* Align vertically */
}

.special-icon {
    position: relative;
    width: 22px;
    height: 22px;
}

/* PVP icon */
.pvp-icon {
    z-index: 5;
    /* position: relative; */
    background-color: rgb(250, 255, 176 /50%);
    align-items: center;
}
.evolution-icon{
    z-index: 6;
    /* position: relative; */
    background-color: rgb(250, 255, 176 /50%);
    /* border-radius: 50%; */
    align-items: center;
    /* border: 2px solid #69bbcc; gold border */

}
/* Shiny Icon */
.shiny-icon {
    z-index: 4;
    background-color: rgb(255, 254, 168);
    border-radius: 50%;
    align-items: center;
    border: 2px solid #ffd700; /* gold border */
}

/* Shadow Icon */
.shadow-icon {
    z-index: 3;
    background-color: gray;
    border-radius: 50%;
    align-items: center;
    border: 2px solid #7700ff; /* purple border */
}

/* Purified Icon */
.purified-icon {
    z-index: 2;
    background-color: aliceblue;
    align-items: center;
    border-radius: 50%;
    border: 2px solid aqua; /* aqua border */
}

/* Lucky Icon */
.lucky-icon {
    z-index: 1;
    background-color: rgb(250, 255, 176 /50%);
    border-radius: 50%;
    align-items: center;
    border: 2px solid #ffffff; /* white border */
}

.type-icons {
  margin-top: 4px;
}
.type-badge-icon {
  width: 24px;
  height: 24px;
  margin: 0 2px;
  vertical-align: middle;
}
.cp-text {
  font-size: 1.1em;
  font-weight: bold;
  color: #d12b2b;
  margin-top: 6px;
}
.cp-value {
    font-size: 1.4em;
    font-weight: bold;
    color: #d12b2b;
    margin-top: 6px;
  }
.iv-row {
  display: flex;
  justify-content: space-around;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 10px;
}
.iv-icons {
  display: flex;
  justify-content: space-around;
  font-size: 1em;
  color: #444;
  margin-top: -4px;
}
        /*---New Type-based Filtering Grid ---*/
        .type-filter-grid {
            display: grid;
            grid-template-columns: repeat(6, auto);
            gap: 6px;
            margin-bottom: 1rem;
            justify-content: center;
        }
        .type-filter-grid .type-badge {
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.2s ease;
            user-select: none;
        }
        .type-filter-grid .type-badge.selected {
            opacity: 1;
            border: 2px solid #000;
            border-radius: 8px;
            box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.5);
            transform: scale(1.075);
        }
        .clear-type-button {
            margin-bottom: 15px ;
            text-align: center;
            display: block;
            padding: 0px 10px;
            font-weight: bold;
            background: #cccccc;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .clear-type-button:hover {
            background: #AFD;
        }
        .move-icon-wrap {
        display: inline-flex;
        align-items: center;
        /* gap: 1px; */
        margin-top: 0px;
        margin-bottom: 3px;
        }
        .move-icon-wrap img.type-badge-icon {
        width: 22px;
        height: 22px;
    }
        .pokemon-types {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 6px;
        }
        .move-badges {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 4px;
            justify-content: center;
            margin-top: 4px;
        }
        .type-badge {
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            color: white;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
            line-height: 1;
        }
        .type-badge.type-bug     { background-color: #A8B820; color: #000; }
        .type-badge.type-dark    { background-color: #70655d; color: #000; }
        /* .type-badge.type-dark    { background-color: #705848; color: #000; } */
        .type-badge.type-dragon  { background-color: #7d49f7; color: #000; }
        /* .type-badge.type-dragon  { background-color: #7038F8; color: #000; } */
        .type-badge.type-electric{ background-color: #F8D030; color: #000; }
        .type-badge.type-fairy   { background-color: #EE99AC; color: #000; }
        .type-badge.type-fighting{ background-color: #C03028; color: #000; }
        .type-badge.type-fire    { background-color: #F08030; color: #000; }
        .type-badge.type-flying  { background-color: #A890F0; color: #000; }
        .type-badge.type-ghost   { background-color: #705898; color: #000; }
        .type-badge.type-grass   { background-color: #78C850; color: #000; }
        .type-badge.type-ground  { background-color: #E0C068; color: #000; }
        .type-badge.type-ice     { background-color: #98D8D8; color: #000; }
        .type-badge.type-normal  { background-color: #A8A878; color: #000; }
        .type-badge.type-poison  { background-color: #A040A0; color: #000; }
        .type-badge.type-psychic { background-color: #F85888; color: #000; }
        .type-badge.type-rock    { background-color: #B8A038; color: #000; }
        .type-badge.type-steel   { background-color: #B8B8D0; color: #000; }
        .type-badge.type-water   { background-color: #6890F0; color: #000; }
        .pokemonTypes {
            margin: 4px 0;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            gap: 4px;
            justify-content: center;
        }
        .ivContainer {
            display: flex;
            justify-content: space-around;
            margin-top: 6px;
        }
        .ivBox {
            background-color: #f3f3f3;
            border-radius: 8px;
            padding: 4px 6px;
            width: 48px;
            text-align: center;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            font-size: 11px;
        }
        .ivLabel {
            font-weight: bold;
        }
        .ivEmoji {
            font-size: 14px;
            margin: 2px 0;
        }
        .ivValue {
            font-size: 13px;
            font-weight: bold;
        }
        .badge {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            padding: 3px 6px;
            border-radius: 4px;
            color: white;
        }
        .pokemon-name {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
            color: var(--dark-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .pokemon-number {
            color: var(--muted-text);
            font-weight: bold;
			font-size: 14px;
            margin-bottom: 10px;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }
        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .stat-value {
            font-weight: bold;
            color: var(--dark-color);
        }
        .stat-label {
            font-size: 10px;
            color: var(--muted-text);
        }
        .gender-male {
            color: #2196f3;
            max-width: 18px;
        }
        .gender-female {
            color: #e91e63;
            max-width: 18px;
        }
        .gender-neutral {
            color: #9e9e9e;
            max-width: 18px;
        }
        .move {
            font-size: 11px;
            color: #555;
            margin-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .hidden {
            display: none !important;
        }
        /* Modal styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal-content {
            background-color: white;
            border-radius: 10px;
            max-width: 800px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 10;
            border-radius: 10px 10px 0 0;
        }
        .modal-body {
            padding: 20px;
            overflow-y: auto;
        }
        .modal-footer {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            position: sticky;
            bottom: 0;
            background-color: white;
            border-radius: 0 0 10px 10px;
        }
        .close-modal {
            position: absolute;
            right: 20px;
            top: 20px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #777;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .close-modal:hover {
            color: var(--primary-color);
        }
        .modal-details {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .detail-pokemon-info .pokemon-types {
            display: inline-flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .detail-pokemon-info .type-badge {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 999px;
            vertical-align: middle;
        }
        .detail-pokemon-sprite {
            text-align: center;
            flex: 1;
            min-width: 200px;
        }
        .detail-pokemon-sprite img {
            max-width: 300px;
            max-height: 300px;
        }
        .detail-pokemon-info {
            flex: 2;
            min-width: 300px;
        }
        .detail-section {
            margin-bottom: 20px;
        }
        .detail-section h3 {
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .detail-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .detail-stat-box {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 10px;
            min-width: 80px;
            text-align: center;
        }
        .detail-moves {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .detail-move {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 10px;
            min-width: 120px;
        }
        .detail-table {
            width: 100%;
            border-collapse: collapse;
        }
        .detail-table tr {
            border-bottom: 1px solid #eee;
        }
        .detail-table th, .detail-table td {
            padding: 8px;
            text-align: left;
        }
        .detail-table th {
            color: var(--muted-text);
            font-weight: normal;
            width: 40%;
        }
        .detail-table td {
            font-weight: 500;
        }
        .stat-bar-container {
            width: 100%;
            height: 6px;
            background-color: #eee;
            border-radius: 3px;
            margin-top: 5px;
        }
        .stat-bar {
            height: 100%;
            border-radius: 3px;
        }
        .stat-bar-attack {
            background-color: #ff5252;
        }
        .stat-bar-defence {
            background-color: #2196f3;
        }
        .stat-bar-stamina {
            background-color: #4caf50;
        }
        .progress-bar {
            border-radius: 5px;
            overflow: hidden;
            margin-top: 5px;
            background-color: #e0e0e0;
            height: 8px;
        }
        .progress-fill {
            height: 100%;
            background-color: #fffb00;
        }
        /* Responsive */
        @media (max-width: 768px) {
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                max-width: 95%;
                margin: 0 auto;
                padding: 20px;
                background-color: var(--dark-color);
                color: var(--text-color);
                line-height: 1.6;
            } 

            #filterGender,
            #filterRegion, 
            #filterSize {
                display: none;
            }
            
            /* Stack form/costume dropdowns under their labels */
            .inline-checkbox-group {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            /* Move filter dropdowns */
            #filterForm,
            #filterCostume {
                margin-left: 20px; 
                /* min-width: 200px; */
                width: 50vw;
            }
            
            /* Stack move dropdowns vertically */
            .filters-row:has(#filterFastMove) {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            #toggleMoveLink {
                align-self: center;
                margin-top: 5px;
            }
            
            /* Center clear type filters button */
            #clear-type-filters {
                margin: 10px;
            }
            
            /* Show mobile filters only on mobile */
            .mobile-more-filters {
                display: block;
            }
            .stat-box {
                min-width: 100%;
            }
            .modal-content {
                width: 95%;
            }
            #sticky-select-controls {
                display: none !important;
            }
            .stats-container {
                flex-direction: column;
                gap: 10px;
            }
            .type-filter-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
        }
        /* Toggle switch */
        .toggle-container {
            display: flex;
            align-items: center;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
            margin-right: 10px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: var(--primary-color);
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .toggle-label {
            font-size: 14px;
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        .load-more-container {
            text-align: center;
            margin-top: 20px;
        }
		.alpha-nav {
            position: fixed;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			background: rgba(255,255,255,0.9);
			border-radius: 10px;
			padding: 5px;
			box-shadow: 0 0 5px rgba(0,0,0,0.1);
			z-index: 100;
		}
		.alpha-nav ul {
            list-style: none;
			padding: 0;
			margin: 0;
			text-align: center;
		}
		.alpha-nav li {
            padding: 4px 6px;
			cursor: pointer;
			font-weight: bold;
			font-size: 14px;
			color: var(--primary-color);
		}
		.alpha-nav li:hover {
            background-color: var(--light-color);
		}
        #stickySearchContainer {
            position: sticky;
            top: 0;
            background: white;
            z-index: 100;
            padding: 6px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 10px;
        }

/* Radio button styles */
.filter-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.filter-toggle-button {
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 6px;
  border: 2px solid #666;
  background-color: #eee;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.filter-toggle-button:hover {
  background-color: #ccc;
}
.filter-toggle-button.and-mode {
  background-color: #c0392b;
  color: white;
  border-color: #c0392b;
}
.filter-radio {
    display: none;
}
.filter-radio-label {
    padding: 6px 9px;
    border-radius: 4px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.2s ease;
}
.filter-radio-label:focus-visible {
    /* Draw the focus when :focus-visible is supported */
    outline: 1px solid black;
    outline-offset: 1px;
  }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
.filter-radio:checked + .filter-radio-label {
    background-color: var(--primary-color);
    color: white;
}
.filter-radio-label:hover {
    background-color: #e0e0e0;
}
.filter-flash {
    background-color: #ff4d4d !important;
    transition: background-color 0.2s ease;
}
.filter-pill {
    padding: 5px 10px;
    margin: 3px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    color: #000;
}
.filter-pill.active {
    background-color: #e53935;
    color: #fff;
}
.filter-pill-label:hover {
    background-color: #e0e0e0;
}
/* Inline checkbox + dropdown group layout*/
.inline-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    width: auto;
}
.tight-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.tight-label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 2px solid #999;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}
/* Checkmark when checked */
.tight-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #333;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
} */
    /* Ensure content stays above backgrounds */
    .pokemon-card > * {
        position: relative;
        z-index: 1;
    }
    .type-badge.stab {
    border: 1px solid black;
}
.type-badge.faded {
    filter: brightness(1.125) saturate(0.625);
    color: #fff;
    }
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
}
.stat img {
  width: 24px;
  height: 24px;
  margin-bottom: 0.25rem;
}
#sticky-sort-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1000;
}
/* Mobile adjustments */
@media (max-width: 768px) {
    #sticky-sort-container {
        bottom: 48px; /* Move up 16px from default */
        position: fixed; /* Ensure it stays visible during zoom */
        transform-origin: center center;
    }
    
    /* Make button scale with zoom */
    #sticky-sort-button {
        width: 5vw; /* Scale with viewport */
        height: 5vw;
        min-width: 16px; /* Minimum size */
        min-height: 16px;
        max-width: 80px; /* Maximum size */
        max-height: 80px;
        font-size: clamp(12px, 2.5vw, 14px); /* Scale font */
    }
}
#sticky-sort-button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #00bfa5;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center; /* Added to ensure text is centered properly */
    padding: 6px; /* Helps prevent cramped text when two-line */
}
#sticky-select-controls {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    display: grid;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Larger buttons (2026-07-21) so the panel reaches out toward the body's edge
   instead of leaving a gap in the left margin. */
#sticky-select-controls button {
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
}
#sticky-select-controls #selectedCount {
    font-size: 13px;
}



#sticky-sort-menu {
    position: fixed;
    bottom: 124px; /* clears the taller (100px) sort button below it */
    right: 24px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    z-index: 1001;
}

.hidden {
    display: none;
}
#returnToTopContainer {
    position: sticky;
    top: 10px;
    margin-bottom: 12px;
    z-index: 100;
}

#returnToTopBtn {
    background-color: var(--accent-color);
    color: var(--dark-color);
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}

#returnToTopBtn:hover {
    background-color: #ffb300;
}


/* --- Pokemon Card Base Style --- */
.pokemon-card {
    border-radius: 20px;
    padding: 9px;
    margin: 6px;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 192px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Native virtualization: the browser skips layout + paint for offscreen
       cards, so an 11,000-card collection scrolls like a 50-card one. The
       intrinsic size is a placeholder estimate for never-rendered cards
       ("auto" makes the browser remember each card's real size once it has
       been on screen, which also handles expanded/selected cards). */
    content-visibility: auto;
    contain-intrinsic-size: auto 210px auto 280px;
  }

  /* Placeholder for an un-built (virtualized) card. Mirrors the card's width +
     margin so the grid lays out identically whether a cell holds a slot or a
     real card; min-height is set inline from a measured card so the scroll
     height is correct before cards are built on scroll. */
  .card-slot {
    width: 192px;
    margin: 6px;
    box-sizing: border-box;
    border-radius: 20px;
    background: rgba(127, 127, 127, 0.06);
  }

  .pokemon-name {
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 4px;
  }
  
  /* --- CSS Custom Property for Rotation --- */
  @property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  /* --- Shiny Glow Effect --- */
  .modern-card-shiny::before {
    content: "";
    background-image: linear-gradient(
      var(--rotate),
      #fff8dc,
      #ffe066 43%,
      #ffd700
    );
  }
    /* --- LUCKY Glow Effect --- */
    /* .pokemon-card.modern-card-LUCKY::before {
        content: "";
        position: absolute;
        top: -10%;
        left: -10%;
        width: 120%;
        height: 120%;
        border-radius: 40px;
        background-image: linear-gradient(
          var(--rotate),
          #fff8dc,
          #ffe066 43%,
          #ffd700
        );
        } */
  
  /* --- Shadow Glow Effect --- */
  .modern-card.SHADOW::before {
    content: "";
    background-image: linear-gradient(
      var(--rotate),
      #d8b0ff,
      #a855f7 43%,
      #6b21a8
    );
  }
  
    /* --- Purified Glow Effect --- */
  .pokemon-card.PURIFIED::before {
    content: "";
    background-image: linear-gradient(
      var(--rotate),
      #ffffff,
      #ddfdff 43%,
      #a0fffa
    );
  }
  /* --- Rotating Animation --- */
  @keyframes spin {
    0% {
      --rotate: 0deg;
    }
    100% {
      --rotate: 360deg;
    }
  }
  
  /* --- Ensure contents sit above ::before --- */
  .pokemon-card > * {
    position: relative;
    z-index: 1;
  }
  /* --- Shiny Image Drop Shadow --- */
    .pokemon-card.modern-card-shiny .pokemon-img{
        -webkit-filter: drop-shadow(0 0 0 gold) drop-shadow(0 0 8px gold);
        filter: drop-shadow(0 0 0 gold) drop-shadow(0 0 10px gold);
    }

  
  /* --- Shadow Image Drop Shadow --- */
  .pokemon-card.SHADOW .pokemon-img {
    -webkit-filter: drop-shadow(0 0 0 #a855f7) drop-shadow(0 0 8px #a855f7);
    filter: drop-shadow(0 0 0 #a855f7) drop-shadow(0 0 16px #a855f7);
  }


    /* --- Purified Image Drop Shadow --- */
  .pokemon-card.PURIFIED .pokemon-img {
    -webkit-filter: drop-shadow(0 0 0 #f2e4ff) drop-shadow(0 0 32px #fcf8ff);
    filter: drop-shadow(0 0 0 #fcf8ff) drop-shadow(0 0 10px #fcf8ff);
  }

/* Mobile collapsible filters - ADD THESE */
.mobile-more-filters {
    display: none;  /* changed from margin-top: 10px; */
}

.mobile-toggle-btn {
    width: 100%;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 12px;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.mobile-toggle-btn:hover {
    background-color: #e0e0e0;
}

.mobile-collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-collapsible.hidden {
    max-height: 0;
}

.mobile-collapsible:not(.hidden) {
    max-height: 500px;
    padding: 10px 0;
}
/* Overlay effect when sticky sort menu is open */
.sticky-sort-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    pointer-events: none;
}

.sticky-sort-overlay.active {
    pointer-events: auto;
}

/* Keep sticky sort elements above overlay */
#sticky-sort-container,
#sticky-sort-menu {
    z-index: 1002;
}
/*Sticky Search Field Formatting*/
#stickySearchContainer {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

#stickySearchContainer input {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

#stickySearchContainer input:focus {
    outline: none;
    border-color: var(--primary-color);
}
/*Hide IV Labels Until Card is Selected*/
.pokemon-card .iv-label {
    display: none;
}

.pokemon-card.selected .iv-label {
    display: block;
}

/*Screen Darkening for Text Input Fields*/
.input-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    pointer-events: none;
}

.input-overlay.active {
    pointer-events: auto;
}

/* Keep input fields above overlay */
#searchInput:focus,
#pvpRankLimit:focus {
    position: relative;
    z-index: 1002;
}
/* GPX styles */
/* Tab navigation (enhanced 2026-07-21): each tab is an icon + title + one-line
   description so a first-time visitor immediately gets what the tab does. */
.tab-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 12px;
  }

  .tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--muted-text);
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid transparent;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-align: left;
    max-width: 340px;
  }

  .tab-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
  }

  .tab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tab-title {
    font-weight: 700;
    font-size: 15px;
  }

  .tab-sub {
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.25;
  }

  .tab:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(229, 57, 53, 0.06);
  }

  .tab.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(229, 57, 53, 0.12);
  }

  @media (max-width: 600px) {
    .tab-sub { display: none; }        /* keep the bar compact on phones */
    .tab { padding: 10px 16px; }
  }