/* Cult Pop LIVE — tema condiviso. Colori campionati dalla sigla ufficiale. */
@import url('/fonts/archivo/500.css');
@import url('/fonts/archivo/700.css');
@import url('/fonts/archivo/800.css');
@import url('/fonts/archivo/900.css');

:root {
  --viola: #8a2bf8;
  --viola-scuro: #5b16b8;
  --lime: #d2fd3a;
  --fucsia: #fd7dff;
  --turchese: #3cbf9e;
  --giallo: #fbcf2c;
  --ardesia: #2c4a55; /* ombra del logo */
  --carta: #d8d6d3;
  --carta-blu: #c6d3dc;
  --carta-grigia: #a9a8a5;
  --inchiostro: #17121f;
  --bianco: #ffffff;
  --rosso: #ff4d5e;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--inchiostro);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}
/* colori espliciti: su telefoni/PC in modalità scura i pulsanti senza colore diventano bianco su bianco */
button, select, input { font-family: inherit; color: var(--inchiostro); }

/* fondo "carta strappata" generato in SVG, niente immagini pesanti */
.paper-bg {
  background-color: var(--carta);
  background-image:
    url('/img/torn-a.svg'),
    url('/img/torn-b.svg'),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,.06), transparent 45%);
  background-repeat: no-repeat;
  background-size: 140% auto, 160% auto, cover, cover;
  background-position: -20% -6%, 40% 108%, center, center;
  background-attachment: fixed;
}

/* Badge in stile logo (SEGNAPOSTO finché non riceviamo il logo vettoriale ufficiale) */
.badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  filter: drop-shadow(0 0 0 #fff);
}
.badge span {
  display: inline-block; background: var(--turchese); color: var(--giallo);
  font-weight: 900; letter-spacing: .02em; line-height: 1;
  padding: .18em .35em .12em; border: 3px solid #fff;
  box-shadow: 4px 4px 0 var(--ardesia), 8px 8px 0 var(--giallo);
  text-shadow: 2px 2px 0 var(--ardesia);
}
.badge span + span { margin-left: .6em; }

.brush {
  background: url('/img/brush.svg') center/100% 100% no-repeat;
  color: #fff; padding: .25em .6em;
}

.scribble-lime { background: url('/img/scribble-lime.svg') no-repeat center/contain; }
.plus { color: var(--fucsia); font-weight: 900; }

.btn {
  appearance: none; border: 3px solid var(--inchiostro); background: var(--lime);
  color: var(--inchiostro); font-weight: 900; font-size: 1.15rem; text-transform: uppercase;
  padding: .9em 1.3em; border-radius: 14px; box-shadow: 5px 5px 0 var(--inchiostro);
  cursor: pointer; transition: transform .06s, box-shadow .06s; touch-action: manipulation;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--inchiostro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.viola { background: var(--viola); color: #fff; }
.btn.fucsia { background: var(--fucsia); }
.btn.bianco { background: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }