/* 🔹 Generale */
body {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
    transition: background 0.5s ease, color 0.5s ease;
  }
  
  /* 🔹 Light Mode (Predefinito) */
  body.light-mode {
    background: url("/theme/light.png") repeat;
    background-size: 700px;
  }
  
  /* 🔹 Dark Mode */
  body.dark-mode {
    background: url("/theme/dark.png") repeat;
    background-size: 600px;
  }
  /* ====== STILE BASE COMUNE ====== */
  p {
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: 1em;
    transition: color 0.3s ease;
  }
  
  /* Colore automatico in base al tema */
  body.light-mode p {
    color: #222; /* quasi nero, per contrasto con sfondo chiaro */
  }
  
  body.dark-mode p {
    color: #f5f5f5; /* grigio chiaro per leggibilità su sfondo scuro */
  }
  
  .swal2-title {
    color: #000 !important;
  }
  
  /* Colore automatico in base al tema */
  body.light-mode h2 {
    color: #222; /* quasi nero, per contrasto con sfondo chiaro */
  }
  
  body.dark-mode h2 {
    color: #f5f5f5; /* grigio chiaro per leggibilità su sfondo scuro */
  }
  
  .footer {
    text-align: center;
    margin-top: 40px;
    padding: 16px 24px;
    font-size: 14px;
    border-top: 1px solid transparent;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: all 0.3s ease;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  }
  
  body.light-mode .footer {
    background: var(--card-bg-light);
    color: var(--text-light);
    border-top-color: rgba(0, 0, 0, 0.1);
  }
  
  body.dark-mode .footer {
    background: var(--card-bg-dark);
    color: var(--text-dark);
    border-top-color: rgba(255, 255, 255, 0.15);
  }
  
  button,
  select {
    display: inline-block;
    min-width: 100px;
    padding: 8px 16px; /* meno spazio verticale */
    font-size: 15px;
    font-weight: 700;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.8px;
    font-family: "Bebas Neue", "Segoe UI", sans-serif;
    font-size: 20px !important;
  }
  
  .light-mode button,
  .light-mode select {
    background: #ffd700;
    color: #202020;
    border-color: #ffd700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  .light-mode button:hover,
  .light-mode select:hover {
    background: #ffd700;
    transform: scale(1.03);
  }
  
  .dark-mode button,
  .dark-mode select {
    background: #ffd700;
    color: #222;
    border-color: #ffcc00;
    box-shadow: 0 2px 6px rgba(255, 213, 0, 0.25);
  }
  
  .dark-mode button:hover,
  .dark-mode select:hover {
    background: #ffd700;
    transform: scale(1.03);
  }
  
  .trainer-card {
    border-radius: var(--border-radius);
    padding: 32px 48px;
    margin: 40px auto;
    width: min(90%, 1000px);
    font-family: "Segoe UI", sans-serif;
    animation: fadeIn 0.7s ease-out;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  
  /* Tema Chiaro */
  body.light-mode .trainer-card {
    background: var(--card-bg-light);
    color: var(--text-light);
    border-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Tema Scuro */
  body.dark-mode .trainer-card {
    background: var(--card-bg-dark);
    color: var(--text-dark);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
  
  .trainer-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: center;
    flex: 1;
  }
  
  .avatar-box img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid #888;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    background-color: white;
  }
  
  .trainer-info h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: inherit;
  }
  
  .trainer-info p {
    font-size: 18px;
    margin: 5px 0 0;
    color: inherit;
    border-radius: 6px;
  }
  
  #trainerBadge {
    margin-top: 8px;
  }
  
  #trainerBadge span {
    background: gold;
    color: #f5f5f5;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    box-shadow: 0 0 5px gold;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  #trainerCard {
    display: block; /* visible by default now */
  }
  

  
  .trainer-card.hide {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    transition: all 0.5s ease;
  }
  
  .trainer-card {
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  
  /* Aggiungiamo un overlay scuro sopra lo sfondo */
  .trainer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Soft vignette overlay adds depth without obscuring content */
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
    pointer-events: none;
  }
  
  /* Portiamo i contenuti sopra l’overlay */
  .trainer-inner {
    position: relative;
    z-index: 1;
  }
  
  /* 🔹 Switch per il cambio tema */
  .theme-switch {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    z-index: 1000;
    /* Add subtle shadow for visibility */
    padding: 6px;
    border-radius: var(--border-radius);
  }
  
  /* 🔹 Checkbox nascosta */
  .theme-switch input {
    display: none;
  }
  
  /* 🔹 Bottone switch (Mobile Friendly) */
  .switch {
    /* larger and more tactile */
    width: 48px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: background 0.4s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
  
  /* 🔹 Cerchio interno (Mobile Adjustments) */
  .switch::after {
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: 0.4s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  /* Add icons inside the track to indicate sun/moon */
  .switch::before {
    content: '☀';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-light);
    z-index: 1;
    transition: opacity 0.3s ease;
  }

  input:checked + .switch::before {
    content: '🌙';
    left: auto;
    right: 6px;
    color: var(--text-dark);
  }
  
  /* 🔹 Dark Mode Style */
  input:checked + .switch {
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
  }
  
  input:checked + .switch::after {
    transform: translateX(24px);
    /* Moves knob to the right when checked */
  }
  
  /* 🔹 Responsive Adjustments */
  @media (max-width: 480px) {
    .theme-switch {
      top: 8px;
      right: 8px;
    }
  
    .switch {
      width: 40px;
      height: 20px;
    }

    .switch::after {
      width: 16px;
      height: 16px;
      top: 2px;
      left: 2px;
    }

    input:checked + .switch::after {
      transform: translateX(20px);
    }
  }
  
  /* Hover effetto */
  select:hover,
  button:hover {
    background: linear-gradient(135deg, #1f3a57, #132334);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(20, 50, 80, 0.4);
  }
  
  /* Attivo (click) effetto */
  button:active,
  select:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
  }
  
  /* Focus accessibilità */
  button:focus,
  select:focus {
    outline: 2px solid #80bdff;
    outline-offset: 2px;
  }
  /* 🔹 Dark Mode Attivata */
  .theme-switch input:checked + .switch {
    background: #222;
  }
  
  .theme-switch input:checked + .switch::after {
    left: 25px;
    background: yellow;
  }
  
  .light-mode #darkmode {
    color: black;
    /* Text color for light mode */
  }
  
  .dark-mode #darkmode {
    color: white;
    /* Text color for dark mode */
  }
  
  .light-mode #mobileWarning {
    color: black;
    /* Text color for light mode */
  }
  
  .dark-mode #mobileWarning {
    color: #ffde00;
    /* Text color for dark mode */
  }
  
  .container {
    max-width: 1500px;
    margin: auto;
    padding: 20px;
  }
  
  .search-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  #searchInput {
    width: 90%;
    max-width: 500px;
    padding: 12px 16px;
    font-size: 18px;
    border-radius: var(--border-radius);
    border: none;
    outline: none;
    background: var(--card-bg-light);
    color: var(--text-light);
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(calc(var(--glass-blur) / 2));
    transition: box-shadow 0.3s ease;
  }
  
  #searchInput::placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  /* Dark mode override for search box */
  body.dark-mode #searchInput {
    background: var(--card-bg-dark);
    color: var(--text-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }

  body.dark-mode #searchInput::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  
  .macroseries-header {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 700;
    color: var(--text-light);
    margin-top: 30px;
    padding-left: 10px;
    width: 100%;
    position: relative;
    /* Add a subtle gradient underline for wow factor */
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .year-separator {
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 700;
    color: var(--text-light);
    margin-top: 15px;
    padding: 5px 0;
    width: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .set-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  align-items: center;
  margin-top: 30px;
}

/* grid example */
.set-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* card */
.set-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;         /* nice rectangle */
  border-radius: var(--border-radius);
  overflow: hidden;               /* never bleed */
  /* Glassmorphic card background */
  background: var(--card-bg-light);
  backdrop-filter: blur(calc(var(--glass-blur) / 1.5));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateZ(0);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.set-item:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,0,0,.34); }

  /* Dark mode variant */
  body.dark-mode .set-item {
    background: var(--card-bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }

/* image fills safely */
.set-item .set-img {
  width: 100%; height: 100%; display: block;
  object-fit:fill; object-position: center;
  transition: transform .35s ease;
}
.set-item:hover .set-img { transform: scale(1.03); }

/* top-left year badge */
.set-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 8px;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* footer overlay with series */
.set-title {
  position: absolute; inset-inline: 10px; bottom: 10px;
  display: grid; gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);      /* glassy */
}
.set-name {
  font-weight: 800; letter-spacing: .2px;
  font-size: 1rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-series {
  font-weight: 600; opacity: .9;
  font-size: .82rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ======= graceful no-image fallback ======= */
.set-item.no-image {
  background:
    radial-gradient(120% 140% at 0% 0%, #2a2a2a, #171717),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, rgba(255,255,255,0) 12px 24px);
}
.set-item.no-image .set-img { display: none; }

/* show big monogram centered behind the title */
.set-item.no-image::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,.08);
  font: 900 84px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: 2px;
  user-select: none; pointer-events: none;
}


.set-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.set-info h4 {
  margin: 0 0 5px 0;
  color: #111;
  font-size: 20px;
}

.set-info p {
  margin: 3px 0;
  color: #555;
  font-size: 14px;
}

.year-separator {
  font-size: 24px;
  font-weight: bold;
  color: #222;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* griglia reattiva */
.set-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
  
@media (max-width: 600px) {
  .set-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 15px;
    width: 80%;
  }

  .set-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }

  .set-info h4 {
    font-size: 18px;
  }

  .set-info p {
    font-size: 13px;
  }

  .year-separator {
    font-size: 20px;
    gap: 10px;
  }
}

.modal-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-basic-info h2 {
    font-size: 24px;
    margin: 10px 0 5px 0;
}

.card-basic-info p {
    font-size: 16px;
    color: #555;
}


  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    justify-items: center;
    padding: 10px;
  }
  
  .card-item {
    min-width: 300px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    max-width: 220px;
    align-content: center;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.04);
  }
  
  .card-details {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* opzionale */
    transition: background 0.3s ease;
  }
  
  /* Tema chiaro */
  body.light-mode .card-details {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
  }
  
  /* Tema scuro */
  body.dark-mode .card-details {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
  }
  
  
  @media (max-width: 768px) {
    #trainerUsername {
      font-size: 50px !important;
    }
  }
  
  /* Modal chiaro */
  body.light-mode .modal-content {
    background: var(--card-bg-light);
    color: var(--text-light);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(calc(var(--glass-blur) / 1.5));
  }
  
  /* Modal scuro */
  body.dark-mode .modal-content {
    background: var(--card-bg-dark);
    color: var(--text-dark);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(calc(var(--glass-blur) / 1.5));
  }
  
  .modal-content img {
    width: 250px;
    height: 350px;
    border-radius: 10px;
    object-fit: cover;
  }
  
  .modal-details {
    color: white;
    padding-left: 40px;
    text-align: left;
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    padding: 6px 12px;
    border-radius: var(--border-radius);
    transition: 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  
  .close:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
  
  .modal-content img {
    width: 400px;
    /* Increased from 250px */
    height: 650px;
    /* Increased from 350px */
    border-radius: 10px;
    object-fit: fill;
  }
  
  .opaque-background {
    backdrop-filter: blur(20px);
    /* Optional: Adds a blur effect */
    padding: 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
  }
  
  .filter-container {
    text-align: center;
    margin-bottom: 20px;
  }
  
  label {
    font-weight: bold;
    color: var(--text-light);
  }

  body.dark-mode label {
    color: var(--text-dark);
  }
  
  /* @font-face {
      font-family: 'Pokemon';
      src: url('fonts/pokemon.woff2') format('woff2'), 
           url('fonts/pokemon.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  } */
  
  /* 🔹 Binder Container */
  .binder-container {
    background: var(--card-bg-light);
    padding: 24px;
    border-radius: var(--border-radius);
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* Dark mode override for binder container */
  body.dark-mode .binder-container {
    background: var(--card-bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  
  /* 🔹 Binder Controls */
  .binder-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  /* 🔹 PayPal Donation Box */
  .donation-box {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 16px;
    border-radius: var(--border-radius);
    text-align: center;
    margin-top: 15px;
    color: var(--text-light);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
  }
  
  .donation-box p {
    margin: 0;
    font-weight: bold;
  }
  
  .donation-box button {
    background: var(--card-bg-light);
    color: var(--secondary-color);
    font-size: 14px;
    padding: 10px 18px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    border-radius: var(--border-radius);
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
  
  .donation-box button:hover {
    background: var(--card-bg-light);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
  }

  /* Dark mode adjustments for donation box */
  body.dark-mode .donation-box {
    color: var(--text-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  }

  body.dark-mode .donation-box button {
    background: var(--card-bg-dark);
    color: var(--primary-color);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  }

  body.dark-mode .donation-box button:hover {
    background: var(--card-bg-dark);
    color: var(--secondary-color);
  }
  
  /* 🔹 Input File */
  input[type="file"] {
    background: #f8f8f8;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
  }
  
  /* Apply to the entire website */
  body {
    font-family: "Pokemon", sans-serif !important;
  }

  /*
   * =============================
   * 🎨 THEME REIMAGINATION
   *
   * To give the site a fresh, modern appearance we define a palette of
   * CSS custom properties.  These variables centralise colours and
   * sizing so that the entire interface can be tweaked from a single
   * location.  The palette draws inspiration from Pokémon – bright
   * yellows and oranges evoke Pikachu and Charizard while deep blues
   * and purples add contrast.  A light, airy gradient backs the light
   * theme and a cosmic gradient decks the dark theme.  We also set
   * sensible default radii and blur levels used in our glassmorphism
   * elements.  Should you wish to tune the look further, adjust
   * these values rather than modifying individual rules.
   */
  :root {
    /* Brand colours */
    --primary-color: #f8d210; /* Pikachu yellow */
    --secondary-color: #fe7f2d; /* Warm orange */
    --accent-color: #6a0572; /* Deep purple for contrast */

    /* Text colours */
    --text-light: #1a1a1a;
    --text-dark: #f5f5f5;

    /* Backgrounds */
    --bg-light: radial-gradient(circle at top left, #ffffff 0%, #f2f6fb 100%);
    --bg-dark: radial-gradient(circle at bottom right, #0b132b 0%, #1f3a93 100%);

    /* Container backgrounds */
    --card-bg-light: rgba(255, 255, 255, 0.7);
    --card-bg-dark: rgba(20, 20, 20, 0.7);

    /* Special effects */
    --glass-blur: 10px;
    --border-radius: 16px;
  }

  /*
   * Theme-specific background assignments.  The light mode now uses a
   * bright, sky‑like gradient instead of a tiled texture, while the
   * dark mode uses a cosmic gradient evocative of night.  Transitions
   * ensure a smooth change when toggling themes.
   */
  body.light-mode {
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.5s ease, color 0.5s ease;
  }

  body.dark-mode {
    background: var(--bg-dark);
    color: var(--text-dark);
    transition: background 0.5s ease, color 0.5s ease;
  }
  
  select {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    /* Dark blue-grey gradient */
    color: white;
    /* White text for better readability */
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* Subtle white border */
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1),
      0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-left: 10px;
    outline: none;
  }
  
  /* 🔹 Hover effect */
  select:hover {
    background: linear-gradient(135deg, #3b4b5e, #465a6c);
    /* Slightly brighter gradient */
    transform: scale(1.03);
    /* Slight pop effect */
  }
  
  /* 🔹 Focus effect */
  select:focus {
    border: 2px solid #ffcb05;
    /* Yellow highlight */
    box-shadow: 0px 0px 12px rgba(255, 203, 5, 0.8);
  }
  
  select option {
    background: white;
    /* Sfondo bianco per le opzioni */
    color: black;
    /* Testo nero per le opzioni */
    font-weight: normal;
  }
  
  /* 🔹 Improved Card Hover Effect */
  .card-inner {
    perspective: 1200px;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    position: relative;
  }
  
  /* 🔹 Enhanced Card Image */
  .card-img {
    transition: transform 0.15s ease-out, box-shadow 0.25s ease-in-out;
    position: relative;
    will-change: transform;
  }
  
  /* 🔹 Light Reflection Effect */
  .card-img::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220%;
    height: 220%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.4) 5%,
      rgba(255, 255, 255, 0) 80%
    );
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, opacity 0.2s ease-in-out;
    pointer-events: none;
    opacity: 0;
  }
  
  /* 🔹 Activate Light Reflection on Hover */
  .card-inner:hover .card-img::before {
    opacity: 1;
  }
  
  /* 🔹 Add Subtle Depth & Shadow on Hover */
  .card-inner:hover .card-img {
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.3);
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
  }
  
  .pagination-btn {
    background: var(--card-bg-light);
    color: var(--text-light);
    font-size: 16px;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  
  .pagination-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    filter: brightness(1.05);
  }
  
  .pagination-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
    font-weight: bold;
  }

  body.dark-mode .pagination-btn {
    background: var(--card-bg-dark);
    color: var(--text-dark);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  }

  body.dark-mode .pagination-btn.active {
    color: var(--text-dark);
  }

  /*
   * ============================
   * 🟡 MODERN BUTTONS & SELECTS
   *
   * Existing buttons and select elements are refreshed with a bolder,
   * more tactile look.  We leverage our colour variables and
   * introduce subtle gradients and shadows to create depth.  On
   * hover, the controls gently lift off the page, reinforcing
   * interactivity.  Focus rings are enhanced for accessibility.
   */
  button,
  select {
    display: inline-block;
    min-width: 110px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    transition: all 0.3s ease;
    letter-spacing: 0.8px;
    font-family: "Bebas Neue", "Segoe UI", sans-serif;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    margin: 0 8px;
  }

  /* Default state for light mode controls */
  body.light-mode button,
  body.light-mode select {
    background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
  }

  /* Default state for dark mode controls */
  body.dark-mode button,
  body.dark-mode select {
    background-image: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: var(--text-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }

  /* Hover state lifts and brightens the button */
  button:hover,
  select:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.05) saturate(1.05);
  }

  /* Active state resets transform for tactile press */
  button:active,
  select:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  /* Focus ring for accessibility */
  button:focus,
  select:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }

  /* Options inside selects should remain legible */
  select option {
    background: #fff;
    color: #000;
  }
  
  #hpFilter {
    width: 120px;
    padding: 12px;
    font-size: 16px;
    border-radius: var(--border-radius);
    border: none;
    outline: none;
    background: var(--card-bg-light);
    color: var(--text-light);
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(calc(var(--glass-blur)/2));
  }
  
  #hpFilter::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
  }
  
  #hpFilter:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  }
  
  #hpFilter:focus {
    border-color: transparent;
    background: var(--card-bg-light);
    box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.6);
  }

  /* Dark mode overrides for HP filter */
  body.dark-mode #hpFilter {
    background: var(--card-bg-dark);
    color: var(--text-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }

  body.dark-mode #hpFilter::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  
  /* 🔹 General Card Styling */
  .card-item {
    padding: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    max-width: 220px;
    position: relative;
    /* Glass background for card container */
    background: var(--card-bg-light);
    backdrop-filter: blur(calc(var(--glass-blur) / 2));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  body.dark-mode .card-item {
    background: var(--card-bg-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  
  .card {
    width: 100%;
    /* Mantiene la card adattata al contenitore */
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2),
      0 55px 35px -20px rgba(0, 0, 0, 0.3);
    /* 🔹 Ombra più morbida */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, filter;
  
    /* 🔹 Sostituzione del nero puro con un effetto più realistico */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform-origin: center;
  }
  
  /* Holographic Effect */
  .card:before,
  .card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    transition: all 0.3s ease;
  }
  
  /* Hover Effect */
  .card:hover {
    box-shadow: -10px -10px 15px -5px var(--color1),
      10px 10px 15px -5px var(--color2), 0 0 15px 4px rgba(255, 255, 255, 0.3),
      0 55px 35px -20px rgba(0, 0, 0, 0.5);
    /*transform: scale(1.5);*/
  }
  
  .card:hover:after {
    filter: brightness(1.2) contrast(1.2);
  }
  
  .card:hover {
    box-shadow: var(--shadow-x) var(--shadow-y) 30px rgba(0, 0, 0, 0.3),
      -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2),
      -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2),
      0 0 13px 4px rgba(255, 255, 255, 0.3), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
  }
  
  .card.charizard {
    --color1: var(--charizard1);
    --color2: var(--charizard2);
    --front: var(--charizardfront);
  }
  
  .card.pika {
    --color1: var(--pika1);
    --color2: var(--pika2);
    --front: var(--pikafront);
  }
  
  .card.mewtwo {
    --color1: var(--mewtwo1);
    --color2: var(--mewtwo2);
    --front: var(--mewtwofront);
  }
  
  .card.eevee {
    --color1: #ec9bb6;
    --color2: #ccac6f;
    --color3: #69e4a5;
    --color4: #8ec5d6;
    --color5: #b98cce;
    --front: var(--eeveefront);
  }
  
  .card:before,
  .card:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-repeat: no-repeat;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    transition: all 0.33s ease;
  }
  
  .card:before {
    background-position: 50% 50%;
    background-size: 300% 300%;
    background-image: linear-gradient(
      115deg,
      transparent 0%,
      var(--color1) 25%,
      transparent 47%,
      transparent 53%,
      var(--color2) 75%,
      transparent 100%
    );
    opacity: 0.5;
    filter: brightness(0.5) contrast(1);
    z-index: 1;
  }
  
  .card.active:after,
  .card:hover:after {
    filter: brightness(1) contrast(1);
    opacity: 1;
  }
  
  .card.active,
  .card:hover {
    animation: none;
    transition: box-shadow 0.1s ease-out;
  }
  
  .card.active:before,
  .card:hover:before {
    animation: none;
    background-image: linear-gradient(
      110deg,
      transparent 25%,
      var(--color1) 48%,
      var(--color2) 52%,
      transparent 75%
    );
    background-position: 50% 50%;
    background-size: 250% 250%;
    opacity: 0.88;
    filter: brightness(0.66) contrast(1.33);
    transition: none;
  }
  
  .card.active:before,
  .card:hover:before,
  .card.active:after,
  .card:hover:after {
    animation: none;
    transition: none;
  }
  
  .card.animated {
    transition: none;
    animation: holoCard 12s ease 0s 1;
  
    &:before {
      transition: none;
      animation: holoGradient 12s ease 0s 1;
    }
  
    &:after {
      transition: none;
      animation: holoSparkle 12s ease 0s 1;
    }
  }
  
  .card:before {
    background-position: 50% 50%;
    background-size: 300% 300%;
    background-image: linear-gradient(
      115deg,
      transparent 0%,
      var(--color1) 25%,
      transparent 47%,
      transparent 53%,
      var(--color2) 75%,
      transparent 100%
    );
    opacity: 0.5;
    filter: brightness(0.5) contrast(1);
    z-index: 1;
  }
  
  @keyframes holoSparkle {
    0%,
    100% {
      opacity: 0.75;
      background-position: 50% 50%;
      filter: brightness(1.2) contrast(1.25);
    }
  
    5%,
    8% {
      opacity: 1;
      background-position: 40% 40%;
      filter: brightness(0.8) contrast(1.2);
    }
  
    13%,
    16% {
      opacity: 0.5;
      background-position: 50% 50%;
      filter: brightness(1.2) contrast(0.8);
    }
  
    35%,
    38% {
      opacity: 1;
      background-position: 60% 60%;
      filter: brightness(1) contrast(1);
    }
  
    55% {
      opacity: 0.33;
      background-position: 45% 45%;
      filter: brightness(1.2) contrast(1.25);
    }
  }
  
  @keyframes holoGradient {
    0%,
    100% {
      opacity: 0.5;
      background-position: 50% 50%;
      filter: brightness(0.5) contrast(1);
    }
  
    5%,
    9% {
      background-position: 100% 100%;
      opacity: 1;
      filter: brightness(0.75) contrast(1.25);
    }
  
    13%,
    17% {
      background-position: 0% 0%;
      opacity: 0.88;
    }
  
    35%,
    39% {
      background-position: 100% 100%;
      opacity: 1;
      filter: brightness(0.5) contrast(1);
    }
  
    55% {
      background-position: 0% 0%;
      opacity: 1;
      filter: brightness(0.75) contrast(1.25);
    }
  }
  
  @keyframes holoCard {
    0%,
    100% {
      transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
  
    5%,
    8% {
      transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
    }
  
    13%,
    16% {
      transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
    }
  
    35%,
    38% {
      transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
    }
  
    55% {
      transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
    }
  }
  
  .card.eevee:hover {
    box-shadow: 0 0 30px -5px white, 0 0 10px -2px white,
      0 55px 35px -20px rgba(0, 0, 0, 0.5);
  }
  
  .card.eevee:hover:before,
  .card.eevee.active:before {
    background-image: linear-gradient(
      115deg,
      transparent 20%,
      var(--color1) 36%,
      var(--color2) 43%,
      var(--color3) 50%,
      var(--color4) 57%,
      var(--color5) 64%,
      transparent 80%
    );
  }
  
  .demo .card {
    background-image: var(--back);
    font-size: 2vh;
  }
  
  .demo .card > span {
    position: relative;
    top: 45%;
  }
  
  .demo .card:nth-of-type(1),
  .demo .card:nth-of-type(2),
  .demo .card:nth-of-type(3) {
    width: 20vh;
    height: 27.5vh;
    box-shadow: inset 0 0 0 1px rgba(white, 0.4),
      0 25px 15px -10px rgba(0, 0, 0, 0.5);
    animation: none;
  }
  
  .demo .card:nth-of-type(1),
  .demo .card:nth-of-type(2),
  .demo .card:nth-of-type(3) {
    &:before,
    &:after {
      animation: none;
    }
  }
  
  .demo .card:nth-of-type(1) {
    &:before,
    &:after {
      display: none;
    }
  }
  
  .demo .card:nth-of-type(2) {
    background: none;
  
    &:before {
      display: none;
    }
  }
  
  .demo .card:nth-of-type(3) {
    background: none;
  
    &:after {
      display: none;
    }
  }
  
  .operator {
    display: inline-block;
    vertical-align: middle;
    font-size: 6vh;
  }
  
  h1 {
    display: block;
    margin: 30px 0;
  }
  
  #app {
    position: relative;
  }
  
  .demo,
  .cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    perspective: 2000px;
    position: relative;
    z-index: 1;
    transform: translate3d(0.1px, 0.1px, 0.1px);
  }
  
  .demo {
    flex-direction: row;
    justify-content: center;
  }
  
  @media screen and (min-width: 600px) {
    .cards {
      flex-direction: row;
    }
  }
  
  .cards .card {
    &:nth-child(2) {
      &,
      &:before,
      &:after {
        animation-delay: 0.25s;
      }
    }
  
    &:nth-child(3) {
      &,
      &:before,
      &:after {
        animation-delay: 0.5s;
      }
    }
  
    &:nth-child(4) {
      &,
      &:before,
      &:after {
        animation-delay: 0.75s;
      }
    }
  }
  
  html,
  body,
  main {
    min-height: 100%;
  }
  
  .modal-content .card-item {
    min-width: 400px !important;
    /* Imposta la larghezza minima a 500px */
    max-width: 400px;
    /* Puoi aggiungere un limite massimo per uniformità */
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: white;
  }
  
  .hidden {
    display: none;
  }
  
  img.card-img {
    max-width: 300px;
  }
  
  .modal-content img.card-img {
    max-width: 500px !important;
    max-height: 560px !important;
  }
  
  /* 🔹 COMMON (Quasi nessun effetto) */
  .common::after {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    opacity: 0.2;
    mix-blend-mode: normal;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* 🔹 UNCOMMON (Leggera illuminazione) */
  .uncommon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle,
      rgba(0, 115, 230, 0.2) 10%,
      transparent 80%
    );
    opacity: 0.3;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* 🔹 RARE (Bagliore moderato) */
  .rare::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle,
      rgba(255, 204, 0, 0.4) 15%,
      transparent 90%
    );
    opacity: 0.4;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* 🔹 HOLO RARE (Effetto di riflesso brillante) */
  .rare.holo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 204, 0, 0.3) 15%,
      rgba(255, 140, 0, 0.2) 30%,
      rgba(255, 255, 0, 0.2) 50%,
      rgba(0, 255, 100, 0.2) 70%,
      rgba(0, 115, 230, 0.3) 85%
    );
    background-size: 200% 200%;
    opacity: 0.5;
    mix-blend-mode: color-dodge;
    transition: background-position 0.4s ease-in-out, opacity 0.3s ease-in-out;
  }
  
  /* 🟡 Effetto olografico quando il mouse passa sopra */
  .rare.holo:hover::after {
    background-position: 50% 50%;
    opacity: 0.7;
  }
  
  /* 🔹 ULTRA RARE (Bagliore colorato intenso) */
  .ultra-rare::after,
  .rare-ultra::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 87, 34, 0.5) 15%,
      rgba(255, 193, 7, 0.4) 30%,
      rgba(33, 150, 243, 0.4) 50%,
      rgba(0, 255, 100, 0.4) 70%,
      rgba(103, 58, 183, 0.5) 85%
    );
    background-size: 250% 250%;
    opacity: 0.6;
    mix-blend-mode: color-dodge;
    transition: background-position 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  
  /* 🔹 Effetto olografico per Ultra Rare */
  .ultra-rare:hover::after,
  .rare-ultra:hover::after {
    background-position: 50% 50%;
    opacity: 0.8;
  }
  
  /* 🔹 SECRET RARE (Effetto olografico arcobaleno con animazione) */
  .secret-rare::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 87, 34, 0.5) 15%,
        rgba(255, 193, 7, 0.4) 30%,
        rgba(33, 150, 243, 0.4) 50%,
        rgba(0, 255, 100, 0.4) 70%,
        rgba(103, 58, 183, 0.5) 85%
      ),
      url("https://assets.codepen.io/13471/sparkles.gif");
    background-size: 300% 300%;
    opacity: 0.8;
    mix-blend-mode: color-dodge;
    animation: holoSparkle 4s infinite ease-in-out;
  }
  
  /* 🔹 PROMO (Effetto dorato brillante) */
  .promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle,
      rgba(255, 235, 59, 0.6) 10%,
      transparent 90%
    );
    opacity: 0.7;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* 🟡 Effetto di illuminazione per Promo */
  .promo:hover::after {
    opacity: 1;
  }
  
  /* 🔹 Effetto scintillante per Secret Rare */
  @keyframes holoSparkle {
    0%,
    100% {
      opacity: 0.9;
      background-position: 50% 50%;
      filter: brightness(1.2) contrast(1.25);
    }
  
    5%,
    10% {
      opacity: 1;
      background-position: 40% 40%;
      filter: brightness(1) contrast(1.2);
    }
  
    25%,
    30% {
      opacity: 0.7;
      background-position: 60% 60%;
      filter: brightness(1.1) contrast(1);
    }
  
    50% {
      opacity: 1;
      background-position: 45% 45%;
      filter: brightness(1.3) contrast(1.5);
    }
  }
  
  /* Adds the shiny holo effect */
  .holo:after {
    background-image: url("https://assets.codepen.io/13471/holo.png"),
      linear-gradient(
        125deg,
        #ff008450 15%,
        #fca40040 30%,
        #ffff0030 40%,
        #00ff8a20 60%,
        #00cfff40 70%,
        #cc4cfa50 85%
      ) !important;
    background-size: 160% !important;
    background-blend-mode: overlay !important;
    filter: brightness(1) contrast(1) !important;
    transition: all 0.3s ease !important;
  }
  
  .holo:after {
    opacity: 1;
    background-image: url("https://assets.codepen.io/13471/sparkles.gif"),
      linear-gradient(
        125deg,
        #ff008450 15%,
        #fca40040 30%,
        #ffff0030 40%,
        #00ff8a20 60%,
        #00cfff40 70%,
        #cc4cfa50 85%
      ) !important;
    background-position: 50% 50% !important;
    background-size: 160% !important;
    background-blend-mode: overlay !important;
    z-index: 2 !important;
    filter: brightness(1) contrast(1) !important;
    transition: all 0.33s ease !important;
    mix-blend-mode: color-dodge !important;
    opacity: 0.75 !important;
  }
  
  @keyframes gentleSparkles {
    0% {
      background-position: 0% 0%, 0% 0%, 100% 100%;
    }
    50% {
      background-position: 50% 50%, 100% 100%, 0% 0%;
    }
    100% {
      background-position: 100% 100%, 0% 0%, 100% 100%;
    }
  }
  
  .card.holo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: url("https://assets.codepen.io/13471/sparkles.gif"),
      radial-gradient(
        circle at 20% 30%,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 70%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 70%
      );
    background-size: cover, 300% 300%, 300% 300%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    animation: gentleSparkles 8s infinite ease-in-out;
    opacity: 0.6;
    border-radius: 8px;
  }
  
  .illustration:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      125deg,
      rgba(0, 231, 255, 0.3) 15%,
      rgba(255, 0, 231, 0.2) 30%,
      rgba(255, 255, 0, 0.2) 50%,
      rgba(0, 255, 100, 0.2) 70%,
      rgba(0, 115, 230, 0.3) 85%
    );
    background-size: 300% 300%;
    mix-blend-mode: color-dodge;
    opacity: 0.5;
    transition: background-position 0.4s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
  }
  
  /* 🟡 Holo Effect on Hover */
  .illustration:hover:after {
    opacity: 0.7;
    background-position: 50% 50%;
  }
  
  /* 🎨 Optional: Slight tilt effect when hovering */
  .illustration:hover {
    transform: scale(1.02);
  }
  
  @media (max-width: 768px) {
    /* 🔹 Adjust heading size */
    h1 {
      font-size: 28px;
    }
  
    /* 🔹 Search input and dropdown */
    #searchInput {
      width: 95%;
      padding: 8px;
      font-size: 16px;
    }
  
    .macroseries-header,
    .year-separator {
      text-align: center;
      font-size: 42px;
    }
  
    /* 🔹 Set items */
    .set-list {
      align-items: center;
    }
  
  
    /* 🔹 Card list grid layout */
    .card-list {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 8px;
      justify-content: center;
    }
  
    .card-item {
      max-width: 150px;
      padding: 10px;
      border-radius: 8px;
    }
  
    .modal-content .card-item {
      min-width: 250px !important;
      max-width: 250px;
    }
  
    .card-item img {
      width: 100%;
      height: auto;
    }
  
    /* 🔹 Modal adjustments */
    .modal-content {
      flex-direction: column;
      text-align: center;
      max-width: 90%;
      padding: 10px;
      font-size: 16px;
    }
  
    .modal-content img.card-img {
      width: 100%;
      max-width: 300px;
      height: auto;
    }
  
    .modal-details {
      padding: 10px;
      text-align: center;
    }
  
    .close {
      top: 5px;
      right: 5px;
      font-size: 18px;
      padding: 3px 6px;
    }
  
    /* 🔹 Pagination Buttons */
    .pagination-container {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 10px 0;
    }
  
    .pagination-btn {
      font-size: 14px;
      padding: 6px 10px;
    }
  
    /* 🔹 Filter Dropdown */
    select {
      font-size: 14px;
      padding: 6px 10px;
      border-radius: 6px;
    }
  
    /* 🔹 Binder container */
    .binder-container {
      max-width: 90%;
      padding: 15px;
    }
  
    /* 🔹 Holo Effect Fix */
    .holo:after {
      background-size: 250%;
    }
  
    /* 🔹 Ensure smooth scrolling */
    html,
    body {
      scroll-behavior: smooth;
    }
  }
  
  /* 🔹 Hide toggle button on PC */
  @media (min-width: 769px) {
    #toggleGridBtn {
      display: none !important;
    }
  }
  
  /* 🔹 Centering the button */
  .grid-toggle-btn {
    display: block;
    /* Ensure it takes the full width available */
    margin: 20px auto;
    /* Center it horizontally */
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    background: #ffcb05;
    color: black;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1000;
    text-align: center;
  }
  
  /* 🔹 Ensure it's centered on mobile */
  @media (max-width: 768px) {
    .grid-toggle-btn {
      width: 80%;
      /* Adjust width to fit mobile screens */
      max-width: 250px;
      /* Prevent it from being too large */
    }
  
    /* 🔹 Default: Single card per row */
    .card-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
      /* Default: 1 card per row */
      gap: 10px;
    }
  }
  
  /* 🔹 When toggled: 2 cards per row */
  .grid-two-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* 🔹 Adatta le carte alla griglia */
  .grid-view .card-item {
    max-width: 120px;
    /* Imposta una larghezza massima più piccola */
    padding: 5px;
  }
  
  /* 🔹 Riduci le immagini all'interno della griglia */
  .grid-view .card-img {
    width: 100%;
    height: auto;
    max-height: 180px;
    /* Limita l'altezza */
  }
  
  /* 🔹 Aggiusta il contenitore della griglia */
  .card-list.grid-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    /* 2 carte per riga */
    gap: 10px;
    justify-content: center;
    align-items: center;
  }
  
  /* 🔹 Two-Column Grid Mode */
  .grid-two-columns .card-item {
    min-width: 150px !important;
    /* Apply only when class is active */
  }
  
  /* 🌙 Dark Mode per i bottoni dei set */
  .dark-mode .set-item {
  background: radial-gradient(120% 140% at 0% 0%, #dddddd, #d6d6d6);
    color: white;
    border: 1px solid #000;
  }
  
  .card {
    box-shadow: var(--shadow-x) var(--shadow-y) 30px rgba(0, 0, 0, 0.3);
    animation: shadow-x linear, shadow-y linear;
    animation-timeline: scroll(root inline), scroll(root block);
  }
  
  #setInternazionaleBtn,
  #setGiapponesiBtn,
  .headerbtn {
    font-size: 15px;
    background-color: #34495e; /* Colore verde */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombra per dare effetto 3D */
  }
  
  #setInternazionaleBtn:hover,
  #setGiapponesiBtn:hover,
  .headerbtn:hover {
    background-color: #476481; /* Colore verde più scuro al passaggio del mouse */
    transform: translateY(
      -2px
    ); /* Effetto di sollevamento quando si passa sopra con il mouse */
  }
  
  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Distanza tra i bottoni */
  }
  
  @media (max-width: 768px) {
    #setInternazionaleBtn,
    #setGiapponesiBtn {
      padding: 10px 20px;
      font-size: 18px;
      border-radius: 6px;
      width: 45%;
      min-width: 140px;
      margin-top: 10px;
    }
  
    .button-container {
      flex-direction: row;
      gap: 12px;
      padding: 10px 0;
    }
  }
  
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      130deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.05) 25%,
      rgba(255, 255, 255, 0.15) 45%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0.15) 55%,
      rgba(255, 255, 255, 0.05) 75%,
      rgba(255, 255, 255, 0) 100%
    );
    background-size: 300% 300%;
    animation: softLightSweep 6s ease-in-out infinite;
    opacity: 0.5;
    mix-blend-mode: screen;
    border-radius: 10px;
    transition: opacity 0.3s ease;
  }
  
  @keyframes softLightSweep {
    0% {
      background-position: 200% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: -100% 0%;
    }
  }
  
  /* 🔹 Stile Generale */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
    color: white;
    padding: 5px;
    height: 60px;
    width: 100%;
    justify-content: center;
  }
  
  /* 🔹 Allinea il nome utente e il logout */
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
  }
  
  /* 🔹 Stile per il logout */
  .logout-btn {
    background: #ff4b5c;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-size: 14px;
  }
  .logout-btn:hover {
    background: #ff2d3b;
  }
  
  /* 🔹 Nascondi il menu mobile su desktop */
  .mobile-menu {
    display: none;
  }
  
  /* 🔹 Mostra il menu mobile solo su schermi piccoli */
  @media screen and (max-width: 768px) {
    .desktop-only {
      display: none;
    }
  
    .mobile-menu {
      display: block;
      position: relative;
    }
  
    .menu-toggle {
      font-size: 24px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px;
      color: white;
    }
  
    /* Make sure the menu is on top of everything */
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 50px;
      left: 10px;
      background: #34495e;
      border-radius: 5px;
      width: 200px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      padding: 10px;
      transition: all 0.3s ease-in-out;
      z-index: 9999; /* This ensures it appears on top */
    }
  
    /* Show when toggled */
    .dropdown-menu.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
  
    .dropdown-menu button {
      width: 100%;
      padding: 10px;
      border: none;
      background: none;
      color: white;
      text-align: left;
      cursor: pointer;
    }
  
    .dropdown-menu button:hover {
      background: #476481;
    }
  
    /* 🔹 Il nome utente e logout devono stare sulla stessa riga */
    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    .user-info {
      flex-direction: row;
    }
  }
  
  .rename-btn,
  .remove-btn {
    margin: 5px;
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .rename-btn {
    background-color: #f1c40f !important;
    color: white;
  }
  
  .rename-btn:hover {
    background-color: #d4ac0d !important;
  }
  
  .remove-btn {
    background-color: #e74c3c !important;
    color: white;
  }
  
  .remove-btn:hover {
    background-color: #c0392b !important;
  }
  
  .card-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
  
  .counter-btn:hover {
    background-color: #ccc;
  }
  
  .card-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #222;
  }
  
  .card-counter-value {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    min-width: 30px;
    text-align: center;
    display: inline-block;
  }
  
  /* .counter-btn {
      padding: 8px 14px;
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
      border: none;
      background-color:rgb(54, 54, 54), 0);
      color: white;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.1s;
  } */
  
  .counter-btn:hover {
    background-color: #0056b3;
  }
  
  .counter-btn:active {
    transform: scale(0.9);
  }
  .fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  /* Evidenzia la card selezionata */
  .card-item.selected {
    border: 2px solid #00c3ff;
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  
  /* Checkbox stilizzato */
  .card-counter input[type="checkbox"] {
    accent-color: #00c3ff;
    transform: scale(1.2);
    margin-right: 4px;
  }
  
  /* Etichetta checkbox */
  .card-counter label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #333;
  }
  
  .select-btn.selected-btn {
    background-color: #00c37a !important;
    color: white;
    border-color: #00a966 !important;
  }
  
  .set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    width: 100%;
  }
  
  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .header-filters {
    display: flex;
    gap: 10px;
    padding: 10px;
    background-color: #222;
    border-top: 1px solid #444;
    height: 40px;
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
  }
  
  .header-filters select,
  .header-filters input {
    padding: 8px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    white-space: nowrap; /* Prevents text from wrapping */
  }
  
  /* ✅ Responsive per Mobile */
  @media screen and (max-width: 600px) {
    .header-filters {
      flex-direction: column;
      align-items: center;
      height: auto;
      padding: 6px;
      gap: 6px;
    }
  
    .header-filters select,
    .header-filters input {
      width: 90%;
      font-size: 13px;
      padding: 6px;
    }
  }
  
  .rarity-btn {
    margin: 2px !important;
  }
  
  .banner-section {
    width: 100%;
    background-image: url("/Banner.png"); /* ← Cambia con il tuo path */
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    position: relative;
  }
  
  /* Holo Effect for All High Rarity Cards */
  .card[class*="rare"]::after {
    opacity: 1;
    background-image: url("https://assets.codepen.io/13471/sparkles.gif"),
      linear-gradient(
        125deg,
        #ff008450 15%,
        #fca40040 30%,
        #ffff0030 40%,
        #00ff8a20 60%,
        #00cfff40 70%,
        #cc4cfa50 85%
      ) !important;
    background-position: 50% 50% !important;
    background-size: 160% !important;
    background-blend-mode: overlay !important;
    z-index: 2 !important;
    filter: brightness(1) contrast(1) !important;
    transition: all 0.33s ease !important;
    mix-blend-mode: color-dodge !important;
    opacity: 0.75 !important;
  }
  
  .card[class*="rare"]:hover::after {
    opacity: 0.9;
    background-position: 60% 40%;
  }
  
  @keyframes holoSparkle {
    0%,
    100% {
      background-position: 50% 50%;
      opacity: 0.6;
      filter: brightness(1.1) contrast(1.2);
    }
    25% {
      background-position: 40% 60%;
      opacity: 0.75;
    }
    50% {
      background-position: 60% 40%;
      opacity: 0.65;
    }
    75% {
      background-position: 50% 50%;
      opacity: 0.9;
    }
  }
  
  @media screen and (min-width: 1200px) {
    .sponsor-float {
      position: relative;
      bottom: 15px;
      top: 10px;
      background: black;
      color: #fff;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px #000;
      z-index: 9999;
      text-align: center;
      margin: 40px auto;
      width: 95%;
      height: 250px;
    }
    .sponsor-float img {
      width: 800px;
      background-image: image("/Banner.png");
      background-size: cover;
      background-position: center;
      height: 250px;
    }
  }
  
  @media screen and (max-width: 1200px) {
    .sponsor-float {
      display: none;
    }
    .sponsor-float img {
      display: none;
    }
  }

    /* 🔽 Mobile styles for screen width 600px or less */
    @media screen and (max-width: 700px) {
        .trainer-card {
          padding: 15px;
          margin: 10px;
          top: 20px;
          max-width: 100%;
          height: 120px !important;
        }
      
        .trainer-inner {
          flex-direction: column;
          text-align: center;
          gap: 15px;
        }
      
        .avatar-box img {
          width: 130px;
          height: 130px;
          border-radius: 50%;
          background-color: white;
        }
      
        .trainer-info h2 {
          font-size: 20px;
        }
      
        .trainer-info p {
          font-size: 16px;
        }
      
        #trainerBadge span {
          font-size: 11px;
          padding: 2px 6px;
        }
      }

      /* Barra orizzontale scrollabile per i filtri */
.rarity-scrollbar {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 5px;
  margin: 10px 0;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

.rarity-scrollbar::-webkit-scrollbar {
  height: 6px;
}

.rarity-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.rarity-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* Stile dei bottoni */
.rarity-filter-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.rarity-filter-btn:hover {
  background-color: #ddd;
}

/* Bottone attivo evidenziato */
.rarity-filter-btn.active {
  background-color: #333;
  color: #fff;
}
  
 #ocrModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in-out;
  }

  #ocrModalContent {
    background: white;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    border-radius: 12px;
    position: relative;
    font-family: sans-serif;
    animation: popIn 0.3s ease-in-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }

  #ocrModalContent img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  #ocrModalClose {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
  }

  @keyframes fadeIn {
    from { opacity: 0 } to { opacity: 1 }
  }

  @keyframes popIn {
    from { transform: scale(0.9); opacity: 0 } to { transform: scale(1); opacity: 1 }
  }

/* ==============================================================
 * Pokémon Theme Adjustments (User-requested)
 *
 * The following rules override parts of the stock theme to better
 * reflect a Pokémon Trading Card Game aesthetic.  Gradients have
 * been replaced by flat colours inspired by the Pokémon palette,
 * and the original patterned backgrounds for light and dark modes
 * are reinstated.  These overrides sit at the end of the CSS file
 * to ensure they take precedence over earlier definitions.
 */

/* Override primary colour variables with Pokémon‑inspired hues */
:root {
  /* Bright Pikachu yellow */
  --primary-color: #a34eca;
  /* Poké Ball red */
  --secondary-color: #a34eca;
  /* Deep Pokémon blue for accents */
  --accent-color: #58086b;

  /* Ensure card backgrounds remain softly translucent */
  --card-bg-light: rgba(255, 255, 255, 0.8);
  --card-bg-dark: rgba(0, 0, 0, 0.75);

  /* Text colours for contrast */
  --text-light: #222222;
  --text-dark: #f5f5f5;
}

/* Reinstate the original image backgrounds for light and dark modes.
   These rules override the gradient assignments defined earlier. */
body.light-mode {
  background: url("/theme/light.png") repeat;
  background-size: 700px;
  color: var(--text-light);
}

body.dark-mode {
  background: url("/theme/dark.png") repeat;
  background-size: 600px;
  color: var(--text-dark);
}

/* Remove gradients from large headings and apply Pokémon colours */
.macroseries-header {
  background: none !important;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--primary-color);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.year-separator {
  background: none !important;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--secondary-color);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Simplify the theme switch appearance by removing gradients */
.switch {
  background: var(--primary-color);
}

input:checked + .switch {
  background: var(--secondary-color);
}

/* Buttons and selects: replace gradients with flat Pokémon colours */
button,
select {
  background: var(--primary-color);
  color: #202020;
  border: 2px solid var(--secondary-color);
  box-shadow: none;
}

button:hover,
select:hover {
  background: var(--secondary-color);
  color: var(--text-light);
  transform: translateY(-2px);
}

button:active,
select:active {
  transform: translateY(0);
}

body.dark-mode button,
body.dark-mode select {
  background: var(--secondary-color);
  color: var(--text-dark);
  border-color: var(--accent-color);
}

body.dark-mode button:hover,
body.dark-mode select:hover {
  background: var(--accent-color);
  color: var(--text-dark);
}

/* Pagination buttons: remove gradients and align with new palette */
.pagination-btn {
  background: var(--primary-color) !important;
  color: #202020 !important;
  box-shadow: none;
}

.pagination-btn:hover {
  background: var(--secondary-color) !important;
  color: var(--text-light) !important;
}

.pagination-btn.active {
  background: var(--secondary-color) !important;
  color: var(--text-light) !important;
}

body.dark-mode .pagination-btn {
  background: var(--secondary-color) !important;
  color: var(--text-dark) !important;
}

body.dark-mode .pagination-btn.active {
  background: var(--accent-color) !important;
  color: var(--text-dark) !important;
}

/* Donation box: flatten gradient and use Pokémon colours */
.donation-box {
  background: var(--primary-color) !important;
  color: var(--text-light) !important;
}

body.dark-mode .donation-box {
  background: var(--secondary-color) !important;
  color: var(--text-dark) !important;
}

.donation-box button {
  background: var(--card-bg-light) !important;
  color: var(--secondary-color) !important;
}

body.dark-mode .donation-box button {
  background: var(--card-bg-dark) !important;
  color: var(--primary-color) !important;
}

.donation-box button:hover {
  background: var(--card-bg-light) !important;
  color: var(--accent-color) !important;
}

body.dark-mode .donation-box button:hover {
  background: var(--card-bg-dark) !important;
  color: var(--accent-color) !important;
}

/* Close button styling */
.close {
  background: var(--secondary-color) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.close:hover {
  background: var(--accent-color) !important;
}

/* Remove gradients from selects used in filter containers */
select {
  background: var(--card-bg-light) !important;
  color: var(--text-light) !important;
}

body.dark-mode select {
  background: var(--card-bg-dark) !important;
  color: var(--text-dark) !important;
}

select:hover {
  background: var(--card-bg-light) !important;
  color: var(--text-light) !important;
}

body.dark-mode select:hover {
  background: var(--card-bg-dark) !important;
  color: var(--text-dark) !important;
}

/* Maintain readability of headings and labels */
label {
  color: var(--text-light);
}

body.dark-mode label {
  color: var(--text-dark);
}