/* ============================================================
   Fan Engagement — Design system condiviso
   ============================================================ */
:root {
  --bg-0: #070b18;
  --bg-1: #0e1428;
  --bg-2: #161d38;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.10);

  --txt: #f4f6ff;
  --txt-dim: #9aa3c4;

  --brand: #ff2d75;
  --brand-2: #7b2ff7;
  --accent: #19e3c5;
  --gold: #ffd23f;
  --green: #1fd65f;
  --red: #ff4d4d;

  /* Colori opzioni quiz (stile Kahoot) */
  --opt-a: #e8425b;
  --opt-b: #2d7ff9;
  --opt-c: #f9a521;
  --opt-d: #1fb86e;
  --opt-e: #9b51e0;
  --opt-f: #16c5c5;

  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--txt);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(123, 47, 247, 0.25), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(255, 45, 117, 0.20), transparent 55%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 60%, var(--bg-2));
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; }
input, select, textarea { font-family: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: 12px; font-weight: 700; font-size: .92rem;
  background: var(--surface-2); color: var(--txt); border: 1px solid var(--border);
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: rgba(255,255,255,.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none; box-shadow: 0 8px 24px rgba(255, 45, 117, .35);
}
.btn-primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.btn-accent { background: linear-gradient(135deg, var(--accent), #15b8d6); color: #062b27; border: none; }
.btn-gold { background: linear-gradient(135deg, var(--gold), #ffb01f); color: #3a2a00; border: none; }
.btn-ghost { background: transparent; }
.btn-sm { padding: .42rem .7rem; font-size: .8rem; border-radius: 9px; }
.btn-danger { color: #ffb4b4; border-color: rgba(255,77,77,.4); }
.btn-danger:hover { background: rgba(255,77,77,.16); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--txt-dim);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-dim); }
.dot.live { background: var(--green); box-shadow: 0 0 0 0 rgba(31,214,95,.6); animation: pulse 1.6s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,214,95,.6); }
  70% { box-shadow: 0 0 0 10px rgba(31,214,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,214,95,0); }
}

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }

input[type=text], input[type=number], input[type=password], textarea, select {
  width: 100%; padding: .7rem .85rem; border-radius: 11px;
  background: rgba(0,0,0,.25); border: 1px solid var(--border); color: var(--txt);
  font-size: .95rem; outline: none; transition: border .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,45,117,.18);
}
::placeholder { color: rgba(255,255,255,.35); }

.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }