html, body {
  height: 100%;
  margin: 0;
  background: #000;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
}

/* Container centrale */
.center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

/* Nasconde il contenuto principale finché non si sblocca */
#app { display: none; }

/* Pannello login */
#gate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #111, #000 60%);
  z-index: 10;
}
.panel {
  width: min(92vw, 520px);
  background:#111; border:1px solid #222; border-radius:14px; padding:22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  color:#eee;
}
.panel h2 { margin: 0 0 8px; font-size: 1.15rem; }
.panel .subtitle {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: #bdbdbd;
  line-height: 1.35;
}
.panel .row { display:flex; gap: 10px; }
.panel input[type="password"] {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0c0c0c;
  color: #fff;
  outline: none;
  font-size: 16px;   /* Previene zoom su iOS */
}
.panel button {
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #3b82f6;
  color: #fff;
  font-size: 16px;
}
.msg {
  margin-top: 10px;
  font-size: .9rem;
  color: #f87171;
  min-height: 1.2em;
}

/* Video responsive */
.video-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  max-height: 60vh;
  aspect-ratio: 16 / 9;
}
.video-container iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Sezione Patreon */
.patreon {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 720px;
}
.patreon h3 {
  margin-top: 0;
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #facc15;
}

/* Liste */
.patreon ol {
  margin: 0;
  padding-left: 20px; /* numerazione standard */
}
.patreon li {
  margin: 6px 0;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label { display: inline-flex; align-items: center; gap: 8px; }
.amount { color: #9ca3af; }

/* --- HIGHLIGHT SOLO PER TOP 3 --- */
.top3 {
  list-style: none;    /* niente numeri per la top 3 */
  padding-left: 0;
  margin-bottom: 12px;
}
.top3 li {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.top3 .first {
  border-color: #bfa10055;
  background: linear-gradient(180deg, rgba(250,204,21,0.12), rgba(250,204,21,0.04));
}
.top3 .first .amount { color: #facc15; }
.top3 .second {
  border-color: #c0c0c055;
  background: linear-gradient(180deg, rgba(192,192,192,0.10), rgba(255,255,255,0.03));
}
.top3 .third {
  border-color: #cd7f3255;
  background: linear-gradient(180deg, rgba(205,127,50,0.10), rgba(255,255,255,0.03));
}
.medal { width: 1.1em; display: inline-block; }

/* Resto della lista: standard, nessun highlight extra */
.rest { /* numerazione standard già attiva via <ol> */ }
.rest li { background: none; border: none; padding: 0; }

/* Nuove Donazioni */
.donations {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 720px;
  margin-top: 20px;
}

.donations h3 {
  margin-top: 0;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #f87171; /* evidenziazione */
}

.donations-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.donations-list li {
  margin: 8px 0;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.donations .amount {
  color: #22c55e;   /* verde per importi */
  font-weight: 600;
}

/* piccola rifinitura per schermi stretti */
@media (max-width: 420px) {
  .donations-list li {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

/* Donate box */
.donate {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 720px;
  margin-top: 20px;
}
.donate h3 {
  margin-top: 0;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 14px;
  color: #86efac; /* verde tenue */
}
.donate-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.donate-controls label {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: #cbd5e1;
}
#donate-amount {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0c0c0c;
  color: #fff;
  font-size: 16px; /* evita zoom iOS */
}
#donate-btn {
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #10b981; /* verde */
  color: #0b0f12;
  font-size: 16px;
  font-weight: 600;
}
.donate-note {
  margin: 10px 0 0;
  color: #9ca3af;
  font-size: 0.92rem;
}

/* Demo card form */
.demo-card {
  margin-top: 16px;
  color: #e5e7eb;
}
.demo-card summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin-bottom: 12px;
}
.demo-card summary::-webkit-details-marker { display: none; }
.demo-card summary::after {
  content: " ▼";
  font-size: 0.9rem;
  color: #9ca3af;
}
.demo-card[open] summary::after { content: " ▲"; }

#fake-card-form {
  padding: 14px;
  border: 1px dashed #2a2a2a;
  border-radius: 10px;
  background: #0f0f0f;
}
#fake-card-form .row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
#fake-card-form .row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#fake-card-form label {
  font-size: 0.9rem;
  color: #cbd5e1;
}
#fake-card-form input {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #0c0c0c;
  color: #fff;
  font-size: 16px; /* evita zoom iOS */
}
#fake-card-pay {
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  background: #3b82f6;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.demo-warning {
  color: #fbbf24;
  font-size: 0.9rem;
  margin: 8px 2px 0;
}

/* Small screens */
@media (max-width: 480px) {
  .donate-controls {
    grid-template-columns: 1fr auto;
  }
  .donate-controls label { grid-column: 1 / -1; }
  #donate-amount { grid-column: 1 / 2; }
  #donate-btn { grid-column: 2 / 3; }
}