:root {
  --bg-deep: #0a0e2a;
  --bg-deep-2: #170f3d;
  --gold: #d4af37;
  --gold-light: #f4e2a1;
  --wine: #8a2846;
  --ink: #ffffff;
  --ink-dim: #b9b6d6;
  --danger: #e2445c;
  --success: #35c17b;
  --accent: var(--gold); /* colore tematico, cambia con la categoria attiva */
  --radius: 18px;
  font-family: 'Cinzel', 'Georgia', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, var(--bg-deep-2), var(--bg-deep) 70%);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Cinzel', 'Georgia', serif;
  letter-spacing: 0.03em;
}

.gold { color: var(--gold); }

.contrada-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  margin-left: 6px;
  vertical-align: middle;
}

.input {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 1.1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.input::placeholder { color: var(--ink-dim); text-transform: none; letter-spacing: normal; }

.badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

.btn {
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none; /* .btn si usa anche su <a>, es. la home */
  display: inline-block;
}
.btn:active { transform: scale(0.96); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #201200;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}
.btn-gold:hover { box-shadow: 0 8px 26px rgba(212, 175, 55, 0.5); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-light);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px 4px rgba(212, 175, 55, 0.35); }
  50% { box-shadow: 0 0 44px 14px rgba(212, 175, 55, 0.65); }
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.shake { animation: shake 0.5s; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.pop-in { animation: pop-in 0.35s ease; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slide-up 0.4s ease; }