/*
 * LA PAGINA DELLE DONAZIONI (giro «la pagina delle donazioni», 23 ottobre 2026), su /donate: sopra landing.css, che le
 * da' il carattere, i colori, la barra, i bottoni, la lingua e il piede (chi arriva dalla landing ce l'ha gia'). Qui
 * solo il suo corpo: il titolo, le due righe, e un riquadro per indirizzo, col QR e l'indirizzo da copiare. Niente in
 * linea (la CSP del gioco); niente che si muova.
 */

.pagina-donazioni {
  min-height: 72svh;
  padding-block: calc(104px + env(safe-area-inset-top, 0px)) clamp(56px, 8vw, 112px);
  background: radial-gradient(110% 70% at 75% 0%, var(--grotta), var(--notte) 70%);
}
.pagina-donazioni h1 { font-size: var(--t-titolo); font-stretch: 118%; letter-spacing: -.015em; max-width: 20ch; }
.etica { display: grid; gap: 14px; margin-top: 22px; max-width: 62ch; color: #d4cbe4; }

/* i riquadri, uno sotto l'altro */
.elenco-donazioni { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 18px; max-width: 900px; }
.donazione {
  display: grid; gap: 18px; align-content: start;
  padding: 24px; border-radius: 18px; border: 1px solid var(--linea); background: rgba(21, 12, 35, .6);
}
.donazione .dati { display: grid; gap: 10px; align-content: start; min-width: 0; }
.donazione h2 { font-size: var(--t-medio); font-stretch: 105%; }
/* l'arancio solo dove c'e' Bitcoin (landing.css); Monero col suo */
.donazione.btc h2, .donazione.lightning h2 { color: var(--bitcoin); }
.donazione.xmr h2 { color: #ff7a33; }
.donazione .cosa { color: var(--tenue); font-size: var(--t-piccolo); }

/* il QR: bianco, coi suoi quattro moduli di margine (nell'SVG), grande abbastanza per un telefono che lo guarda; quello
   dell'offerta Lightning ha piu' moduli (una sessantina per lato, contro i 40 di un indirizzo), e si fa piu' grande */
.cornice-qr { justify-self: center; width: min(100%, 248px); }
.lightning .cornice-qr { width: min(100%, 300px); }
.cornice-qr:empty { display: none; }
.qr { display: block; width: 100%; height: auto; border-radius: 12px; }

/* l'indirizzo: intero, a capo dove capita, e un tocco lo seleziona tutto (senza JavaScript si copia da li') */
.indirizzo {
  display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); background: rgba(7, 4, 13, .7);
  color: var(--testo); font: 500 .84rem/1.5 ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  overflow-wrap: anywhere; word-break: break-all; -webkit-user-select: all; user-select: all;
}
/* l'offerta Lightning e' lunga (centinaia di caratteri): intera anche lei (un riquadro che si scorre dentro la pagina,
   al telefono, si prende il dito), solo un po' piu' piccola */
.lightning .indirizzo { font-size: .78rem; }
/* i gesti: «Apri nel wallet» (solo dove si tocca col dito: al computer un link bitcoin: non apre niente, di solito) e
   «Copia» (solo con JavaScript) */
.gesti { display: flex; flex-wrap: wrap; gap: 10px; }
.gesti .bottone { min-height: 44px; }
.apri { display: none; }
@media (pointer: coarse) { .gesti .apri { display: inline-flex; } }
.copia[hidden] { display: none; }
.copia.fatto { border-color: rgba(248, 226, 166, .6); color: var(--oro-chiaro); }

.non-ancora { margin-top: 36px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--linea); background: rgba(21, 12, 35, .6); max-width: 62ch; }
.di-chi { margin-top: 28px; max-width: 62ch; color: var(--tenue); font-size: var(--t-piccolo); }

/* quando c'e' posto il QR accanto all'indirizzo (un'offerta Lightning troppo lunga per un QR non ne ha: allora
   l'indirizzo prende tutto il riquadro) */
@media (min-width: 640px) {
  .donazione { grid-template-columns: 200px minmax(0, 1fr); }
  .donazione.lightning { grid-template-columns: 260px minmax(0, 1fr); }
  .donazione:has(.cornice-qr:empty) { grid-template-columns: minmax(0, 1fr); }
  .cornice-qr { width: 200px; }
  .lightning .cornice-qr { width: 260px; }
}