body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #181c24;
  color: #f3f3f3;
  margin: 0;
  padding: 0;
}
header, footer {
  background: #23283a;
  padding: 1em;
  text-align: center;
}
h1 {
  margin: 0.2em 0;
}
.subgoal {
  font-size: 1.2em;
  color: #ffd700;
}
.progress-bar {
  background: #333;
  border-radius: 10px;
  overflow: hidden;
  width: 80%;
  margin: 0.5em auto 1em auto;
  height: 18px;
}
.progress {
  background: linear-gradient(90deg, #ffd700, #ff6f00);
  height: 100%;
  transition: width 0.5s;
}
.spiegazione {
  text-align: center;
  margin: 1em 0;
}
/* Layout principale a 3 colonne */
.main-3col {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1400px;
  margin: 2em auto;
  gap: 2em;
}
.col-sx, .col-dx {
  flex: 1 1 250px;
  min-width: 220px;
}
.col-center {
  flex: 2 1 600px;
  min-width: 350px;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1em;
  max-width: 600px;
  margin: 0 auto;
}
.coda-carte {
  background: #23283a;
  border-radius: 10px;
  padding: 1em;
  margin-bottom: 2em;
  text-align: center;
}
.carta-attuale {
  margin-bottom: 1.5em;
}
.carta-grande {
  width: 180px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px #000a;
  margin-bottom: 0.5em;
}
.carta-piccola {
  width: 100px;
  height: auto;
  border-radius: 10px;
  opacity: 0.7;
}
.coda-label {
  font-size: 1.1em;
  color: #ffd700;
  margin-bottom: 0.2em;
}
.sottotitolo {
  font-size: 1.3em;
  margin: 0.2em 0 0.5em 0;
}
.sottotitolo a {
  color: #7ecfff;
  text-decoration: none;
}
.sottotitolo a:hover {
  text-decoration: underline;
}
.descrizione {
  font-size: 1.1em;
  color: #e0e0e0;
  margin-bottom: 1em;
  padding: 0 3em;
}
.refresh-msg {
  text-align: center;
  color: #bdbdbd;
  font-size: 1.1em;
  margin-bottom: 1.5em;
}
.sbarrato {
  text-decoration: line-through;
  color: #aaa;
  position: relative;
}
.check-icon {
  color: #2ecc40;
  font-size: 1.2em;
  margin-left: 0.5em;
  vertical-align: middle;
  display: inline-block;
  text-decoration: none;
}
.sub-counter {
  font-size: 1.2em;
  color: #ffd700;
  margin-bottom: 1em;
}
.sub-num {
  color: #ffd700;
  font-weight: bold;
}

#toggle-order {
  font-size: 1em;
  padding: 0.2em 0.7em;
  margin-left: 0.7em;
  border-radius: 6px;
  border: none;
  background: #ffd700;
  color: #23283a;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  height: 2em;
}
#toggle-order:hover {
  background: #ffb300;
}
.donatore-row, .subgoal-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.3em;
}
.donatore-row input[type="text"] {
  width: 8em;
  min-width: 5em;
  max-width: 12em;
}
.donatore-row input[type="number"] {
  width: 4em;
}
.subgoal-row input[type="number"] {
  width: 4em;
}
.subgoal-row input[type="text"] {
  flex: 1 1 180px;
  min-width: 8em;
  max-width: 20em;
}
.subgoal-row input[type="checkbox"] {
  transform: scale(1.3);
  margin-left: 0.5em;
  accent-color: #2ecc40;
}
.delete-btn {
  background: none;
  border: none;
  color: #c62828;
  font-size: 1.2em;
  cursor: pointer;
  margin-left: 0.2em;
  padding: 0 0.2em;
  line-height: 1;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1em;
  max-width: 600px;
  margin: 0 auto;
}
.card {
  background: #23283a;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0008;
  aspect-ratio: 3/4;
  position: relative;
  perspective: 600px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  backface-visibility: hidden;
  transition: filter 0.3s;
}
.card .card-back {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  background: #181c24;
  border-radius: 12px;
  color: #ffd700;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card.flipped {
  transform: rotateY(180deg);
}
.card.flipped img {
  filter: none;
}
.card.flipped .card-back {
  display: none;
}
.donatori, .subgoals {
  max-width: 500px;
  margin: 2em auto;
  background: #23283a;
  border-radius: 10px;
  padding: 1em;
}
.donatori ul, .subgoals ul {
  list-style: none;
  padding: 0;
}
.donatori li, .subgoals li {
  padding: 0.3em 0;
  border-bottom: 1px solid #333;
}
.progress-bar-sub {
  margin: 1.5em auto 1em auto;
  max-width: 500px;
  text-align: center;
}
.progress-bar-bg {
  background: #e1cfff;
  border-radius: 12px;
  width: 100%;
  height: 28px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5em;
}
.progress-bar-fill {
  background: linear-gradient(90deg, #7c3aed, #4c1d95);
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.5s;
}
.progress-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 1.1em;
  color: #7c3aed;
  font-weight: bold;
  margin: 0 0.5em;
}
.subgoals input[type="radio"] {
  accent-color: #7c3aed;
  margin-right: 0.5em;
  transform: scale(1.2);
}
.subgoals li.unlocked {
  color: #ffd700;
  font-weight: bold;
}
footer {
  font-size: 0.9em;
  color: #aaa;
}
/* Admin panel */
form {
  max-width: 600px;
  margin: 2em auto;
  background: #23283a;
  border-radius: 10px;
  padding: 2em;
  box-shadow: 0 2px 8px #0006;
}
input[type="text"], textarea {
  width: 100%;
  margin-bottom: 0.7em;
  padding: 0.5em;
  border-radius: 5px;
  border: none;
  background: #181c24;
  color: #fff;
}
input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 0.5em;
}
button {
  background: #ffd700;
  color: #23283a;
  border: none;
  border-radius: 5px;
  padding: 0.6em 1.2em;
  font-size: 1em;
  cursor: pointer;
  margin-top: 1em;
  transition: background 0.2s;
}
button:hover {
  background: #ffb300;
}
.flashes {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.flashes li {
  padding: 0.5em;
  border-radius: 5px;
  margin-bottom: 0.5em;
}
.flashes .success {
  background: #2e7d32;
  color: #fff;
}
.flashes .danger {
  background: #c62828;
  color: #fff;
} 
.descrizione {
  font-size: 1.1em;
  color: #e0e0e0;
  margin-bottom: 1em;
  padding: 0 1.5em;
}
.card-zoom-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30, 20, 50, 0.88);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  opacity: 0;
}
.card-zoom-overlay.show {
  display: flex;
  opacity: 1;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.card-zoom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: zoomIn 0.3s;
}
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.card-zoom-img {
  width: 60vw;
  max-width: 420px;
  aspect-ratio: 3/4;
  border-radius: 18px;
  box-shadow: 0 8px 32px #000b;
  background: #23283a;
  margin-bottom: 1em;
  object-fit: contain;
}
.card-zoom-nome {
  color: #ffd700;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.7em;
  text-align: center;
  text-shadow: 0 2px 8px #000a;
}

/* Tabella probabilità tier */
.prob-table-section {
  margin-top: 1.2em;
  background: #23283a;
  border-radius: 10px;
  padding: 0.7em 0.3em 0.3em 0.3em;
  max-width: 340px;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.prob-table {
  width: 100%;
  font-size: clamp(0.8em, 1.1vw, 1em);
  table-layout: fixed;
}
.prob-table th, .prob-table td {
  padding: 0.25em 0.2em;
  white-space: nowrap;
  text-align: center;
}
.prob-table th:first-child, .prob-table td:first-child {
  text-align: left;
  min-width: 2.5em;
  max-width: 3.5em;
}
.prob-legend {
  margin-top: 0.7em;
  font-size: 0.93em;
  color: #ffd700;
  text-align: left;
  line-height: 1.6;
}
.prob-legend div {
  margin-bottom: 0.2em;
}
.prob-table th {
  background: #23283a;
  color: #ffd700;
  font-weight: bold;
  border-bottom: 2px solid #ffd700;
}
.prob-table tr:nth-child(even) td {
  background: #23283a;
}
.prob-table tr:nth-child(odd) td {
  background: #181c24;
}
.prob-table td {
  border-bottom: 1px solid #333;
}
.prob-table tr:last-child td {
  border-bottom: none;
} 
  
.legend-2col {
  display: flex;
  gap: 2em;
  justify-content: space-between;
}
.legend-col {
  flex: 1 1 0;
}

.scoperte-box {
  background: #23283a;
  border-radius: 10px;
  padding: 1em 1em 0.7em 1em;
  margin-top: 1.5em;
  margin-bottom: 2em;
  text-align: left;
}
.scoperte-box h2 {
  font-size: 1.15em;
  color: #ffd700;
  margin-bottom: 0.7em;
}
.scoperte-box div {
  font-size: 1.08em;
  margin-bottom: 0.3em;
} 
.progress-bar-carte {
  width: 100%;
  max-width: 600px;
  margin: 0.7em auto 0.7em auto;
}
.progress-bar-carte-bg {
  background: #e1cfff;
  border-radius: 12px;
  width: 100%;
  height: 28px;
  position: relative;
  overflow: hidden;
}
.progress-bar-carte-fill {
  background: linear-gradient(90deg, #7c3aed, #4c1d95);
  height: 100%;
  border-radius: 12px 0 0 12px;
  transition: width 0.5s;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 1;
}
.progress-bar-carte-label {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  color: #fff;
  font-weight: bold;
  font-size: 1.1em;
  white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 1px 2px #000, 1px 0 2px #000;
  letter-spacing: 0.5px;
  pointer-events: none;
} 
.scoperte-comune {
  color: #fff;
  font-weight: bold;
}
.scoperte-rara {
  color: #7ecfff;
  font-weight: bold;
}
.scoperte-ultrarara {
  color: #ff9800;
  font-weight: bold;
}
.scoperte-rainbow {
  font-weight: bold;
  background: linear-gradient(90deg, #ff3cac 0%, #784ba0 25%, #3498db 50%, #43e97b 75%, #f9ea8f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
} 
.scoperte-icona {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  margin-right: 0.3em;
  margin-bottom: 0.08em;
} 
.lotus-title-icona {
  height: 1.2em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.18em 0 0.18em;
  display: inline-block;
} 
.twitch-pesca-box {
  background: #9147ff;
  border-radius: 12px;
  padding: 1.2em 1em 1em 1em;
  margin-top: 1.5em;
  margin-bottom: 2em;
  text-align: center;
  box-shadow: 0 2px 8px #0002;
}
.pesca-btn {
  display: inline-block;
  background: #fff;
  color: #9147ff;
  font-weight: bold;
  font-size: 1.25em;
  padding: 0.7em 2.2em;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 0.7em;
  margin-top: 0.2em;
  box-shadow: 0 2px 8px #0003;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  border: 2px solid #fff;
  cursor: pointer;
}
.pesca-btn:hover {
  background: #ffd700;
  color: #23283a;
  transform: scale(1.06);
  border-color: #ffd700;
}
.pesca-info {
  color: #fff;           /* testo bianco, ottimo contrasto */
  background: #9147ff;   /* sfondo viola */
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: bold;
  /* aggiungi altre regole se vuoi */
} 

/* Responsive titolo principale con lotus ai lati solo sulla prima riga */
.main-title {
  text-align: center;
  margin-bottom: 0.2em;
}
.main-title-row1 {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.title-line2 {
  display: block;
  font-size: 1em;
  margin-top: 0.1em;
}

/* Sottotitolo sempre blu e leggibile */
.main-title-row3 {
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}
.main-title-row3 a:link,
.main-title-row3 a:visited,
.main-title-row3 a:active {
  color: #2196f3;
  text-decoration: none;
}
.main-title-row3 a:hover {
  color: #1565c0;
  text-decoration: underline;
} 
/* Rendi titolo2 identico a titolo */
.main-title-row2 .title-line1 {
  font-size: 2.5em;
  font-weight: bold;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px #0003;
  display: inline-block;
} 
/* === FOIL/SHINE 3D EFFECTS (from test_foil.html) === */
.card__inner {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(.25,.8,.25,1);
}
.card__shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.12) 60%, transparent 100%);
  filter: blur(8px);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  pointer-events: none;
  user-select: none;
}
.card__shine {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
  background-image:
    repeating-linear-gradient(var(--angle),  
      hsla(283, 49%, 60%, 0.75) calc(var(--space)*1),
      hsla(2, 74%, 59%, 0.75) calc(var(--space)*2), 
      hsla(53, 67%, 53%, 0.75) calc(var(--space)*3),  
      hsla(93, 56%, 52%, 0.75) calc(var(--space)*4),  
      hsla(176, 38%, 50%, 0.75) calc(var(--space)*5),  
      hsla(228, 100%, 77%, 0.75) calc(var(--space)*6), 
      hsla(283, 49%, 61%, 0.75) calc(var(--space)*7)
    );
  background-blend-mode: color-dodge;
  background-size: var(--imgsize);
  background-position: 0% calc(var(--background-y) * 1), var(--background-x) var(--background-y);
  filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.5)) contrast(2.3) saturate(1);
  transition: background-position 0.2s, filter 0.2s, opacity 0.2s;
  clip-path: var(--clip-borders);
  will-change: transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;
  opacity: 0.38;
  mix-blend-mode: screen;
}
.card__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 3;
  background-image: radial-gradient(
    farthest-corner ellipse 
    at calc(((var(--pointer-x)) * 0.5) + 25%) calc(((var(--pointer-y)) * 0.5) + 25%), 
    hsl(0, 0%, 100%) 5%, 
    hsla(300, 100%, 11%, 0.6) 40%, 
    hsl(0, 0%, 22%) 120% 
  );
  background-position: center center;
  background-size: 400% 500%;
  filter: brightness(calc((var(--pointer-from-center)*0.2) + 0.4)) contrast(.85) saturate(1.1);
  mix-blend-mode: lighten;
  clip-path: var(--clip-borders);
  opacity: 0.32;
}
.card__glare {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 4;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y), 
    hsla(0, 0%, 100%, 1) 10%, 
    hsla(0, 0%, 100%, 0.6) 35%, 
    hsla(180, 11%, 35%, 1) 60%
  );
  mix-blend-mode: screen;
  transition: background-position 0.2s, opacity 0.2s;
  clip-path: var(--clip-borders);
  will-change: transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;
  opacity: 0.22;
}
.card__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: var(--grain);
  opacity: 0.18;
  mix-blend-mode: soft-light;
  border-radius: 20px;
  clip-path: var(--clip-borders);
}
.card__glitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
  background: var(--glitter);
  background-size: var(--glittersize);
  opacity: 0.22;
  mix-blend-mode: lighten;
  border-radius: 20px;
  clip-path: var(--clip-borders);
}
.card__shine--gold {
  background-image:
    repeating-linear-gradient(var(--angle),  
      #fffbe6 calc(var(--space)*1),
      #ffe066 calc(var(--space)*2),
      #ffd700 calc(var(--space)*3),
      #fffbe6 calc(var(--space)*4),
      #ffe066 calc(var(--space)*5),
      #ffd700 calc(var(--space)*6),
      #fffbe6 calc(var(--space)*7)
    );
  mix-blend-mode: screen;
}
.card__shine--silver {
  background-image:
    repeating-linear-gradient(var(--angle),  
      #ffffff calc(var(--space)*1),
      #e0e0e0 calc(var(--space)*2),
      #b0b0b0 calc(var(--space)*3),
      #f8f8f8 calc(var(--space)*4),
      #e0e0e0 calc(var(--space)*5),
      #b0b0b0 calc(var(--space)*6),
      #ffffff calc(var(--space)*7)
    );
  mix-blend-mode: screen;
}
.card__shine,
.card__shine--gold,
.card__shine--silver,
.card__glare,
.card__grain,
.card__glitter {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1);
}
.is-foil-active .card__shine { opacity: calc(0.18 * var(--pointer-from-center)); }
.is-foil-active .card__shine--gold { opacity: calc(0.05 * var(--pointer-from-center)); }
.is-foil-active .card__shine--silver { opacity: calc(0.05 * var(--pointer-from-center)); }
.is-foil-active .card__glare { opacity: calc(0.10 * var(--pointer-from-center)); }
.is-foil-active .card__grain { opacity: calc(0.08 * var(--pointer-from-center)); }
.is-foil-active .card__glitter { opacity: calc(0.10 * var(--pointer-from-center)); }
/* === END FOIL/SHINE 3D EFFECTS === */

/* Fix overflow per foil zoom card e overlay */
.card-zoom-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 420px;
  height: 600px;
  perspective: 900px;
  overflow: visible;
  margin: 0 auto 1em auto;
  position: relative;
}
.foil-zoom-card {
  width: 420px;
  height: 600px;
  overflow: visible !important;
}
.card,
.foil-zoom-card,
.card__inner,
.card__img,
.card__img img {
  clip-path: none !important;
  background: none !important;
}
.foil-zoom-card,
.card-zoom-frame,
.card-zoom-img {
  box-shadow: none !important;
}

/* === MEDIA QUERIES === */

@media (max-width: 1000px) {
  .main-3col {
    flex-direction: column;
    gap: 1em;
  }
  .col-sx, .col-dx, .col-center {
    min-width: 0;
    width: 100%;
  }
  .cards-grid {
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .card-zoom-overlay {
    overflow-y: auto;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
  }
  .card-zoom-overlay::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .card-zoom-frame,
  .foil-zoom-card {
    width: 98vw;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
  }
  .prob-table {
    font-size: clamp(0.7em, 2.5vw, 0.93em);
  }
  .prob-legend {
    font-size: 0.85em;
    text-align: center;
  }
  .prob-table-section {
    max-width: 340px;
    width: 100%;
    overflow-x: auto;
  }
  .card-zoom-img {
    width: 90vw;
    max-width: 98vw;
  }
  .descrizione {
    padding: 0 0.5em;
  }
}

@media (min-width: 600px) {
  .main-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
  }
  .main-title-row1, .title-line2 {
    display: inline;
    font-size: inherit;
    margin-top: 0;
  }
  .legend-2col {
    flex-direction: row;
    gap: 0.7em;
    align-items: flex-start;
  }
} 

@media (max-width: 500px) {
  .prob-table {
    font-size: clamp(0.5em, 3vw, 0.78em);
  }
} 

@media (max-width: 400px) {
  .card-zoom-img {
    width: 90vw;
    max-width: 98vw;
  }
  .card-zoom-frame,
  .foil-zoom-card {
    width: 98vw;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
  }
}