/* ===================================================================
   FantaSanRocco — Il Lusso del Sud
   Dark Baroque × Southern Italian Festival × Modern Luxury
   =================================================================== */

/* ---------- Tokens -------------------------------------------------- */
:root {
  --bg:      #040408;
  --bg-1:    #09091a;
  --bg-2:    #0f0d1e;
  --bg-card: rgba(11, 9, 22, 0.92);
  --glass:       rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --border:      rgba(255, 255, 255, 0.07);
  --border-gold: rgba(212, 160, 26, 0.28);

  --text:   #ede8d5;
  --text-2: #9a8f78;
  --text-3: #5a5248;

  --gold:   #d4a01a;
  --gold-2: #f5c842;
  --amber:  #e8861e;
  --fire:   #e84e1b;
  --fire-2: #c0390f;
  --green:  #2ecc71;
  --red:    #e74c3c;
  --blue:   #5b8dee;
  --orange: #e84e1b;
  --orange-2: #c0390f;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow:      0 32px 80px rgba(0, 0, 0, 0.85);
  --shadow-sm:   0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 60px rgba(212, 160, 26, 0.18), 0 0 120px rgba(232, 134, 30, 0.08);

  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-heading: 'Cinzel', serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
}

/* ---------- Keyframes ----------------------------------------------- */
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(2.5%, -3.5%) scale(1.07); }
  66%       { transform: translate(-2%, 2.5%) scale(0.96); }
}
@keyframes halo-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(212, 160, 26, 0.72),
      0 0 0 5px rgba(212, 160, 26, 0.1),
      0 0 0 10px rgba(212, 160, 26, 0.04),
      0 0 55px rgba(212, 160, 26, 0.42),
      0 0 110px rgba(232, 134, 30, 0.16),
      0 32px 64px rgba(0, 0, 0, 0.92);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(245, 200, 66, 0.95),
      0 0 0 8px rgba(212, 160, 26, 0.2),
      0 0 0 18px rgba(212, 160, 26, 0.07),
      0 0 75px rgba(212, 160, 26, 0.62),
      0 0 150px rgba(232, 134, 30, 0.28),
      0 32px 64px rgba(0, 0, 0, 0.92);
  }
}
@keyframes title-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 2px 14px rgba(212, 160, 26, 0.28); }
  50%       { box-shadow: 0 2px 28px rgba(212, 160, 26, 0.58); }
}
@keyframes grain-drift {
  0%  { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(2px, -3px); }
  60% { transform: translate(3px, 2px); }
  80% { transform: translate(-2px, 3px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ---------- Scrollbar ----------------------------------------------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(212, 160, 26, 0.22);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212, 160, 26, 0.44); }

/* ---------- Selection ----------------------------------------------- */
::selection {
  background: rgba(212, 160, 26, 0.3);
  color: #fff;
}

/* ---------- Body + Background --------------------------------------- */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Ambient orbs — candlelight & fireworks glow */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 80% 6%,  rgba(212, 140, 20, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 52% 44% at 12% 94%, rgba(232, 78, 27, 0.14)  0%, transparent 62%),
    radial-gradient(ellipse 38% 38% at 6%  38%,  rgba(88, 42, 200, 0.07) 0%, transparent 55%),
    linear-gradient(170deg, #040408 0%, #08081a 55%, #050510 100%);
  animation: orb-drift 22s ease-in-out infinite;
}

/* Film grain overlay */
body::after {
  content: '';
  position: fixed; inset: -50%; z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.024;
  mix-blend-mode: overlay;
  animation: grain-drift 0.28s steps(1) infinite;
}

/* ---------- Links --------------------------------------------------- */
a { color: var(--gold); text-decoration: none; transition: color .22s var(--ease); }
a:hover { color: var(--gold-2); }
img { max-width: 100%; display: block; }

/* ---------- Topbar -------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: .5rem;
  padding: 0 1.5rem;
  height: 56px;
  background: rgba(4, 3, 10, 0.9);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(212, 160, 26, 0.16);
  box-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 8px 40px rgba(0,0,0,0.5);
}

.brand {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 45%, var(--amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(212, 160, 26, 0.35));
  white-space: nowrap;
}
.brand strong { /* inherited */ }
.brand:hover { opacity: .82; }

.nav {
  display: flex; align-items: center; gap: .08rem;
  margin-left: auto; flex-wrap: nowrap;
}
.nav a {
  color: var(--text-2);
  font-size: .83rem;
  font-weight: 500;
  padding: .32rem .68rem;
  border-radius: var(--r-sm);
  transition: all .22s var(--ease);
  white-space: nowrap;
  letter-spacing: .01em;
}
.nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav a.active {
  color: var(--gold);
  background: rgba(212, 160, 26, 0.1);
  font-weight: 600;
}
.nav a.staff { color: var(--amber); }
.nav a.staff:hover { background: rgba(232, 134, 30, 0.1); }

/* ── Bottone Gioco (accanto al brand, sempre visibile) ────────────── */
.nav-game-btn {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: #1a1206;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, var(--amber) 100%);
  background-size: 200% auto;
  border-radius: 100px;
  padding: .35rem .85rem .35rem .72rem;
  box-shadow: 0 2px 12px rgba(212,160,26,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: background-position .4s var(--ease), box-shadow .25s var(--ease), transform .18s var(--ease);
  white-space: nowrap; flex-shrink: 0;
  animation: nav-game-pulse 3.5s ease-in-out infinite;
}
.nav-game-btn .ico { width: 13px; height: 13px; color: #1a1206; flex-shrink: 0; }
.nav-game-btn:hover {
  background-position: right center;
  box-shadow: 0 4px 22px rgba(212,160,26,.55), inset 0 1px 0 rgba(255,255,255,.3);
  transform: translateY(-1px);
}
.nav-game-btn.is-active {
  background: linear-gradient(135deg, #fff7d0 0%, var(--gold-2) 40%, var(--gold) 100%);
  box-shadow: 0 0 0 2px rgba(212,160,26,.4), 0 4px 22px rgba(212,160,26,.4);
  animation: none;
}
@keyframes nav-game-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(212,160,26,.35), inset 0 1px 0 rgba(255,255,255,.25); }
  50%       { box-shadow: 0 4px 20px rgba(212,160,26,.6), 0 0 0 3px rgba(212,160,26,.18), inset 0 1px 0 rgba(255,255,255,.25); }
}

/* Icona Ruota della Fortuna — tonda, accanto al bottone Gioco */
.nav-wheel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  color: var(--gold-2);
  background: radial-gradient(circle at 35% 30%, rgba(243,198,75,.16), rgba(212,160,26,.05));
  border: 1px solid var(--border-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
}
.nav-wheel-btn .ico { width: 19px; height: 19px; }
.nav-wheel-btn:hover {
  color: #fff7d0; transform: rotate(35deg);
  box-shadow: 0 0 0 2px rgba(212,160,26,.25), 0 4px 16px rgba(212,160,26,.4);
}
.nav-wheel-btn.is-active {
  color: #1a1206;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(212,160,26,.4);
}

/* Saldo punti dell'utente nella barra in alto */
.nav-balance {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  padding: .26rem .6rem .26rem .5rem; border-radius: 100px;
  font-family: var(--font-heading); font-weight: 800; font-size: .82rem;
  color: var(--gold-2);
  background: linear-gradient(135deg, rgba(243,198,75,.16), rgba(212,160,26,.06));
  border: 1px solid var(--border-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: box-shadow .25s var(--ease), transform .18s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.nav-balance .ico { width: 15px; height: 15px; color: var(--gold-2); flex-shrink: 0; }
.nav-balance:hover { color: #fff7d0; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(212,160,26,.35); }
.nav-balance-val { line-height: 1; display: inline-block; }
.nav-balance-val.bump { animation: nav-bal-bump .5s cubic-bezier(.2,1.4,.3,1); }
@keyframes nav-bal-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff7d0; } 100% { transform: scale(1); } }

.btn-mini {
  background: linear-gradient(135deg, var(--fire-2), var(--fire));
  color: #fff !important;
  padding: .3rem .88rem;
  border-radius: 980px;
  font-weight: 600; font-size: .8rem;
  border: none; cursor: pointer;
  letter-spacing: .025em;
  transition: all .25s var(--spring);
  box-shadow: 0 2px 14px rgba(232, 78, 27, 0.38);
}
.btn-mini:hover {
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 4px 22px rgba(232, 78, 27, 0.56);
  text-decoration: none;
}

.link-btn {
  background: none; border: none;
  color: var(--text-3); cursor: pointer;
  font-size: .83rem; padding: .32rem .55rem;
  font-family: inherit;
  border-radius: var(--r-sm);
  transition: all .2s var(--ease);
}
.link-btn:hover { color: var(--text-2); background: var(--glass); }
.inline { display: inline; }

/* ---------- Layout -------------------------------------------------- */
.container {
  width: 100%; max-width: 800px;
  margin: 0 auto; padding: 1.5rem 1.25rem;
  flex: 1;
}

/* ---------- Cards --------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid rgba(212, 160, 26, 0.1);
  border-radius: var(--r-lg);
  padding: 1.65rem;
  margin: 1rem 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 4px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--spring);
  position: relative; overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.022) 0%, transparent 55%);
  pointer-events: none; border-radius: inherit;
}
.card:hover {
  border-color: rgba(212, 160, 26, 0.3);
  box-shadow:
    0 12px 56px rgba(0,0,0,0.72),
    0 0 0 1px rgba(212,160,26,0.07),
    inset 0 1px 0 rgba(255,255,255,0.06),
    var(--shadow-gold);
}

/* ---------- Typography ---------------------------------------------- */
h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 4vw, 1.95rem);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.2;
  color: var(--text);
}
h2 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: .55rem;
  color: var(--text);
}
h3 {
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.muted  { color: var(--text-2); }
.small  { font-size: .83rem; }
.lead   {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.68;
}
.center { text-align: center; }

/* ---------- Buttons ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .42rem;
  background: linear-gradient(135deg, var(--fire-2) 0%, var(--fire) 42%, var(--amber) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600; font-size: .9rem;
  padding: .74rem 1.55rem;
  border-radius: 980px;
  border: none; cursor: pointer;
  transition: all .3s var(--spring);
  white-space: nowrap;
  letter-spacing: .025em;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(232, 78, 27, 0.38), inset 0 1px 0 rgba(255,255,255,0.14);
}
/* Shimmer sweep */
.btn::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-22deg);
  transition: left .55s var(--luxury);
}
.btn:hover {
  color: #fff; text-decoration: none;
  transform: scale(1.045) translateY(-1.5px);
  box-shadow: 0 10px 44px rgba(232, 78, 27, 0.56), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn:hover::before { left: 160%; }
.btn:active { transform: scale(0.97); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(212, 160, 26, 0.24);
  box-shadow: none;
}
.btn-ghost::before { display: none; }
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(212, 160, 26, 0.5);
  box-shadow: 0 0 24px rgba(212, 160, 26, 0.12);
  transform: scale(1.02) translateY(-1px);
}

.btn-ok {
  background: linear-gradient(135deg, #186e35, var(--green));
  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.28);
}
.btn-ok:hover { box-shadow: 0 8px 36px rgba(46, 204, 113, 0.46); }
.btn-no {
  background: linear-gradient(135deg, #7e1818, var(--red));
  box-shadow: 0 4px 20px rgba(231, 76, 60, 0.28);
}
.btn-no:hover { box-shadow: 0 8px 36px rgba(231, 76, 60, 0.46); }

/* ---------- Flash --------------------------------------------------- */
.flash {
  padding: .9rem 1.2rem;
  border-radius: var(--r);
  margin: 1rem 0;
  font-weight: 500; font-size: .9rem;
  display: flex; align-items: center; gap: .7rem;
  backdrop-filter: blur(10px);
  animation: fade-up .4s var(--ease) both;
}
.flash::before { font-size: 1rem; }
.flash-success {
  background: rgba(46, 204, 113, .09);
  border: 1px solid rgba(46, 204, 113, .25);
  color: #3ee07a;
  box-shadow: 0 0 24px rgba(46,204,113,.07);
}
.flash-success::before { content: "✓"; }
.flash-error {
  background: rgba(231, 76, 60, .09);
  border: 1px solid rgba(231, 76, 60, .25);
  color: #ff6b6b;
  box-shadow: 0 0 24px rgba(231,76,60,.07);
}
.flash-error::before { content: "✕"; }

/* ---------- Hero ---------------------------------------------------- */
.hero {
  text-align: center;
  padding: 4.5rem 1rem 2.5rem;
  animation: fade-up 0.8s var(--ease) both;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.08;
  background: linear-gradient(
    120deg,
    #fffaee 0%,
    var(--gold-2) 16%,
    #fff8d6 28%,
    var(--gold) 42%,
    var(--amber) 56%,
    var(--gold-2) 68%,
    #fffaee 82%,
    var(--gold) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-shimmer 9s linear infinite;
  margin-bottom: .9rem;
  padding-bottom: .06em;
}
.hero .lead { max-width: 500px; margin: 0 auto .5rem; }
/* ---------- Prize Banner (home) ------------------------------------ */
.prize-banner {
  background: linear-gradient(135deg, rgba(212,130,20,.14) 0%, rgba(11,9,22,.92) 100%);
  border-color: rgba(212, 160, 26, 0.32) !important;
  box-shadow: var(--shadow-gold), 0 4px 28px rgba(0,0,0,0.55) !important;
}
.prize-banner h2 { color: var(--gold); font-size: 1.1rem; }
.prize-banner p  { color: var(--text-2); font-size: .93rem; margin: .5rem 0; }
.prize-banner a  {
  font-family: var(--font-heading);
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
}

/* ---------- Podium / Leaderboard ----------------------------------- */
.podium { list-style: none; }
.podium li {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  font-size: .98rem;
}
.podium li:last-child { border-bottom: none; }
.podium li:first-child .name  { color: var(--gold-2); font-weight: 700; }
.podium li:first-child .pts   { font-size: 1.1rem; }
.podium .name { flex: 1; font-weight: 500; }
.podium .pts  {
  font-family: var(--font-heading);
  font-weight: 700; color: var(--gold);
  font-size: .96rem; letter-spacing: .05em;
}

.leaderboard { list-style: none; }
.lb-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .82rem .62rem;
  border-radius: var(--r-sm);
  transition: background .2s var(--ease);
}
.lb-row:hover { background: rgba(255,255,255,0.038); }
.lb-row.top {
  background: linear-gradient(90deg, rgba(212,160,26,0.09), transparent 80%);
  border-left: 2px solid rgba(212,160,26,0.48);
  padding-left: .82rem;
}
.rank {
  width: 2rem; text-align: center;
  font-family: var(--font-heading);
  font-weight: 700; color: var(--text-3);
  font-size: .86rem; letter-spacing: .04em;
}
.lb-name   { flex: 1; font-weight: 500; }
.lb-points {
  font-family: var(--font-heading);
  font-weight: 700; color: var(--gold);
  font-size: .92rem; letter-spacing: .05em;
}
.lb-done   { color: var(--text-3); font-size: .76rem; }

/* ---------- How it works ------------------------------------------- */
.how ol {
  padding-left: 1.3rem;
  color: var(--text-2);
  display: flex; flex-direction: column; gap: .55rem;
}
.how ol li { line-height: 1.62; font-size: .93rem; }

/* ---------- Prize page --------------------------------------------- */
.prize-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  letter-spacing: .07em;
}

.prize-card {
  overflow: hidden;
  transition: transform .38s var(--spring), box-shadow .38s var(--ease);
}
.prize-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.prize-rank {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700;
  margin-bottom: .9rem;
  letter-spacing: .07em;
}
.prize-gold { border-color: rgba(245, 193, 7, .38) !important; box-shadow: 0 4px 24px rgba(245,193,7,.06) !important; }
.prize-silver { border-color: rgba(180,180,200, .3) !important; }
.prize-bronze { border-color: rgba(180, 100, 60, .35) !important; }

.prize-gold .prize-rank {
  background: linear-gradient(135deg, #ffd700, #fff3a0, #c8900e);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.prize-silver .prize-rank {
  background: linear-gradient(135deg, #a8a8c0, #ececf4, #888898);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.prize-bronze .prize-rank {
  background: linear-gradient(135deg, #cd7f32, #e8a060, #9a5020);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.prize-body { display: flex; gap: 1.35rem; align-items: flex-start; flex-wrap: wrap; }
.prize-info { flex: 1; min-width: 200px; }
.prize-info h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.prize-info p  { color: var(--text-2); font-size: .88rem; line-height: 1.68; }
.prize-details {
  padding-left: 1.1rem; margin: .65rem 0;
  color: var(--text-2); font-size: .86rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.prize-photo { margin: 0; flex-shrink: 0; }
.prize-photo img {
  width: 185px; height: 140px;
  object-fit: cover; border-radius: var(--r);
  border: 1px solid rgba(212,160,26,.18);
  box-shadow: var(--shadow-sm);
  transition: transform .38s var(--spring);
}
.prize-card:hover .prize-photo img { transform: scale(1.06); }
.prize-photo-placeholder {
  width: 185px; height: 140px; border-radius: var(--r);
  border: 1px dashed rgba(212,160,26,.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 2rem; gap: .4rem; color: var(--text-3);
}
.prize-photo-placeholder span { font-size: .74rem; }

/* ---------- Gallery ------------------------------------------------- */
.gallery-section h2 { margin-bottom: .35rem; }
.gallery-section .lead { margin-bottom: .25rem; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .88rem; margin-top: 1rem;
}
.gallery-item {
  margin: 0; display: flex; flex-direction: column;
  background: var(--bg-2); border-radius: var(--r);
  overflow: hidden; border: 1px solid rgba(212,160,26,.07);
  transition: border-color .3s var(--ease), transform .38s var(--spring), box-shadow .38s var(--ease);
}
.gallery-item:hover {
  border-color: rgba(212,160,26,.38);
  transform: translateY(-5px);
  box-shadow: var(--shadow), 0 0 30px rgba(212,160,26,.07);
}
.gallery-item a { display: block; overflow: hidden; }
.gallery-item img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover; display: block;
  transition: transform .48s var(--ease);
}
.gallery-item:hover img { transform: scale(1.09); }
.gallery-item figcaption {
  padding: .6rem .75rem;
  font-size: .77rem; color: var(--text-2);
  line-height: 1.46; letter-spacing: .01em;
}
.gallery-placeholder {
  grid-column: 1 / -1; text-align: center;
  padding: 3rem 1rem;
  border: 1px dashed rgba(212,160,26,.12);
  border-radius: var(--r-lg); color: var(--text-3);
}
.gallery-placeholder span { font-size: 2.5rem; display: block; margin-bottom: .7rem; }

/* ---------- Forms --------------------------------------------------- */
form label {
  display: block;
  margin: .9rem 0 .3rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=datetime-local],
input[type=file], select, textarea {
  width: 100%; padding: .82rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(10, 8, 20, 0.82);
  color: var(--text); font-size: .9rem;
  font-family: inherit;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
  outline: none;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(212, 160, 26, 0.58);
  box-shadow: 0 0 0 3px rgba(212, 160, 26, 0.1), 0 0 22px rgba(212,160,26,0.05);
}
.form-card { max-width: 460px; margin: 1.5rem auto; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row > label { flex: 1; min-width: 130px; }
label.check {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 500; color: var(--text);
  text-transform: none; letter-spacing: 0;
  font-size: .88rem;
}
label.check input { width: auto; }
.mission-form button { margin-top: .9rem; }

/* ---------- Missions ------------------------------------------------ */
.mission-grid { display: grid; gap: .82rem; }
.mission-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid rgba(212, 160, 26, 0.08);
  border-radius: var(--r-lg);
  padding: 1.18rem 1.28rem;
  color: var(--text);
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
}
/* Golden left accent bar */
.mission-card::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--fire), var(--gold));
  opacity: 0;
  transition: opacity .3s var(--ease);
  border-radius: 3px 0 0 3px;
}
.mission-card:hover {
  border-color: rgba(212, 160, 26, 0.28);
  background: rgba(14, 12, 26, 0.98);
  transform: translateY(-3px) translateX(2px);
  box-shadow: var(--shadow-sm), var(--shadow-gold);
  text-decoration: none;
  color: var(--text);
}
.mission-card:hover::after { opacity: 1; }
.mission-card.inactive { opacity: .42; }
.mission-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .7rem; }
.mission-head h3, .mission-head h1 { margin: 0; }
.mission-desc { color: var(--text-2); margin: .55rem 0; font-size: .87rem; line-height: 1.58; }
.points-badge {
  background: linear-gradient(135deg, var(--fire-2), var(--amber), var(--gold));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700; padding: .22rem .72rem;
  border-radius: 980px; white-space: nowrap;
  font-size: .8rem; letter-spacing: .07em;
  box-shadow: 0 2px 16px rgba(212, 160, 26, 0.32);
  animation: badge-glow 3.2s ease-in-out infinite;
  flex-shrink: 0;
}
.points-badge.big { font-size: 1.05rem; padding: .3rem .92rem; }
.mission-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.tag {
  font-size: .72rem;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(255,255,255,0.07);
  padding: .18rem .58rem; border-radius: 980px;
  color: var(--text-3); letter-spacing: .025em;
}
.tag-ok      { color: var(--green);  border-color: rgba(46,204,113,.35); background: rgba(46,204,113,.055); }
.tag-pending { color: var(--gold);   border-color: rgba(212,160,26,.35); background: rgba(212,160,26,.055); }
.tag-live    { color: var(--green);  border-color: rgba(46,204,113,.35); background: rgba(46,204,113,.055); }
.tag-off     { color: var(--text-3); }
.back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .9rem; font-size: .88rem; }

/* ---------- Profile ------------------------------------------------- */
.profile-head { text-align: center; padding: .5rem 0 1.3rem; }
.big-total {
  font-family: var(--font-display);
  font-size: 3.4rem; font-weight: 700;
  letter-spacing: .04em; line-height: 1;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 50%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 32px rgba(212,160,26,.52));
}
.big-total span {
  font-family: var(--font-body);
  font-size: .88rem; color: var(--text-3);
  font-weight: 400; display: block; margin-top: .28rem;
  -webkit-text-fill-color: var(--text-3); filter: none;
}
.sub-list { list-style: none; }
.sub-row {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .82rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  font-size: .88rem;
}

/* ---------- Moderation --------------------------------------------- */
.mod-list { display: grid; gap: 1rem; }
.mod-user-header {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .5rem 0 .25rem;
  border-bottom: 1px solid rgba(212,160,26,.2);
  margin-top: .8rem;
}
.mod-user-header:first-child { margin-top: 0; }
.mod-user-name {
  font-family: var(--font-heading); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.mod-user-count { font-size: .75rem; color: var(--text-3); }
.mod-top  { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.mod-photo {
  width: 100%; max-height: 400px; object-fit: contain;
  border-radius: var(--r); margin: .7rem 0; background: #000;
  border: 1px solid rgba(212,160,26,.1);
}
.mod-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .5rem; }
.reject-form { display: flex; gap: .4rem; flex: 1; min-width: 200px; }
.reject-form input { flex: 1; }

/* ---------- Admin --------------------------------------------------- */
.admin-mission {
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--r-sm); margin: .65rem 0; padding: .55rem .95rem;
  background: rgba(10, 8, 20, 0.62);
  transition: border-color .22s var(--ease);
}
.admin-mission:hover { border-color: rgba(212,160,26,.22); }
.admin-mission summary {
  display: flex; justify-content: space-between;
  cursor: pointer; padding: .5rem 0;
  font-family: var(--font-heading);
  font-weight: 600; font-size: .86rem; letter-spacing: .025em;
}
.danger-form { margin-top: .65rem; }
.user-list { list-style: none; }
.user-row {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.045); flex-wrap: wrap;
  font-size: .88rem;
}
.role-badge {
  font-size: .66rem; padding: .15rem .52rem;
  border-radius: 980px; margin-left: .4rem;
  font-weight: 700; letter-spacing: .05em;
  font-family: var(--font-heading);
}
.role-user      { background: rgba(255,255,255,.055); color: var(--text-3); }
.role-moderator { background: rgba(212,160,26,.14); color: var(--gold); border: 1px solid rgba(212,160,26,.24); }
.role-admin     {
  background: linear-gradient(135deg, var(--fire-2), var(--fire));
  color: #fff; box-shadow: 0 2px 8px rgba(232,78,27,.28);
}

/* ---------- Inviti -------------------------------------------------- */
.invite-list { list-style: none; }
.invite-row {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.045); flex-wrap: wrap;
}
.invite-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .25rem; }
.invite-link { width: 100%; font-size: .76rem; padding: .4rem; }
.invite-actions { display: flex; align-items: center; gap: .5rem; }
.invite-row.used { opacity: .38; }

/* ---------- Reset card (admin) ------------------------------------- */
.reset-card { border-color: rgba(231,76,60,.28) !important; }
.reset-card h2 { color: var(--red); }

/* ---------- Footer -------------------------------------------------- */
.footer {
  text-align: center;
  color: var(--text-3); font-size: .72rem;
  font-family: var(--font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2rem 1.25rem;
  border-top: 1px solid rgba(212, 160, 26, 0.1);
  margin-top: 2rem;
}

/* ---------- Accessibility ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Responsive ---------------------------------------------- */
@media (min-width: 560px) {
  .mission-grid { grid-template-columns: 1fr 1fr; }
  .prize-photo img,
  .prize-photo-placeholder { width: 200px; height: 152px; }
}

@media (max-width: 480px) {
  .topbar { padding: 0 .85rem; }
  .nav a  { font-size: .77rem; padding: .28rem .4rem; }
  .hero   { padding: 3rem .75rem 1.8rem; }
  .hero h1 { letter-spacing: .03em; }
  .container { padding: 1rem .75rem; }
  .card   { padding: 1.25rem; }
  .prize-body { flex-direction: column; }
  .prize-photo img,
  .prize-photo-placeholder { width: 100%; height: 185px; }
}

/* ===================================================================
   LANDING PAGE — Scroll Experience
   =================================================================== */

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;   /* iOS: niente auto-ingrandimento dei font */
  text-size-adjust: 100%;
}
/* Rinforzo anti scroll orizzontale: `clip` non crea un contenitore di scroll
   (quindi non rompe la sticky del footer) come farebbe `hidden`. */
body { overflow-x: clip; }

/* Full-bleed breakout from .container */
.lp-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
}

/* Inner content wrapper — recenters at max 860px */
.lp-section-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Scroll Reveal System ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
[data-reveal="fade-up"]    { transform: translateY(44px); }
[data-reveal="fade-in"]    { transform: translateY(0); }
[data-reveal="scale-in"]   { transform: scale(0.9); }
[data-reveal="slide-up"]   { transform: translateY(60px); }
[data-reveal="slide-right"]{ transform: translateX(-52px); }
[data-reveal="slide-left"] { transform: translateX(52px); }
[data-reveal].is-visible   { opacity: 1 !important; transform: none !important; }

/* ── NUMERI ───────────────────────────────────────────────────── */
.lp-numbers {
  padding: 6rem 1.5rem;
  background: var(--bg-1);
  border-top: 1px solid rgba(212,160,26,.09);
  border-bottom: 1px solid rgba(212,160,26,.09);
}
.lp-numbers-inner {
  max-width: 860px; margin: 0 auto;
  display: flex; justify-content: center;
  gap: clamp(2rem, 8vw, 6rem);
  flex-wrap: wrap; text-align: center;
}
.lp-num-item { display: flex; flex-direction: column; align-items: center; }
.lp-num-val {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 6rem);
  font-weight: 900; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 50%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(212,160,26,.38));
}
.lp-num-label {
  font-family: var(--font-heading);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-top: .5rem;
}

/* ── PREMI ────────────────────────────────────────────────────── */
.lp-prizes {
  padding: 8rem 1.5rem;
  text-align: center;
}

.lp-kicker {
  font-family: var(--font-heading);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem; display: block;
}
.lp-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.5vw, 4rem);
  font-weight: 700; letter-spacing: .04em; line-height: 1.14;
  color: var(--text); margin-bottom: 3.5rem;
}

.lp-prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
.lp-prize-card {
  background: var(--bg-card);
  border: 1px solid rgba(212,160,26,.1);
  border-radius: var(--r-xl);
  padding: 2.2rem 1.6rem 1.8rem;
  text-align: center;
  transition: transform .4s var(--spring), box-shadow .4s var(--ease), border-color .4s;
}
.lp-prize-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212,160,26,.38);
  box-shadow: var(--shadow), var(--shadow-gold);
}
.lp-prize-gold   { border-color: rgba(245,193,7,.28);  }
.lp-prize-silver { border-color: rgba(180,180,200,.2); }
.lp-prize-bronze { border-color: rgba(180,100,60,.22); }
.lp-prize-gold:hover   { border-color: rgba(245,193,7,.6);  box-shadow: var(--shadow), 0 0 60px rgba(245,193,7,.12); }
.lp-prize-silver:hover { border-color: rgba(200,200,220,.5); }
.lp-prize-bronze:hover { border-color: rgba(205,127,50,.5); }
.lp-prize-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.lp-prize-card h3 {
  font-family: var(--font-heading);
  font-size: .9rem; letter-spacing: .05em;
  margin-bottom: .55rem; color: var(--text);
}
.lp-prize-card p { font-size: .83rem; color: var(--text-2); line-height: 1.58; }

.lp-more-link {
  font-family: var(--font-heading);
  font-size: .82rem; letter-spacing: .07em;
  color: var(--gold); display: inline-block;
  transition: color .2s var(--ease);
}
.lp-more-link:hover { color: var(--gold-2); }

/* ── COME FUNZIONA ────────────────────────────────────────────── */
.lp-how {
  padding: 8rem 1.5rem;
  background: var(--bg-1);
  border-top: 1px solid rgba(212,160,26,.07);
  text-align: center;
}
.lp-how .lp-headline { margin-bottom: 3.5rem; }
.lp-steps {
  max-width: 660px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 2.8rem;
  text-align: left;
}
.lp-step { display: flex; align-items: flex-start; gap: 1.6rem; }
.lp-step-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(135deg, rgba(212,160,26,.4), rgba(212,160,26,.14));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; flex-shrink: 0; width: 3.5rem;
  margin-top: .1rem;
}
.lp-step-body h3 {
  font-family: var(--font-heading);
  font-size: .95rem; letter-spacing: .04em;
  margin-bottom: .45rem; color: var(--text);
}
.lp-step-body p { font-size: .88rem; color: var(--text-2); line-height: 1.65; }

/* ── PODIO ────────────────────────────────────────────────────── */
.lp-podio {
  padding: 8rem 1.5rem;
  text-align: center;
}
.lp-podio-empty {
  font-family: var(--font-serif);
  font-size: 1.2rem; font-style: italic;
  color: var(--text-2); line-height: 1.72;
  margin-top: 1rem;
}
.lp-podio-list {
  list-style: none;
  max-width: 500px; margin: 2rem auto 2.2rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.lp-podio-item {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--bg-card);
  border: 1px solid rgba(212,160,26,.1);
  border-radius: var(--r-lg); padding: 1.2rem 1.6rem;
  transition: border-color .3s var(--ease), transform .3s var(--spring);
}
.lp-podio-item:first-child {
  border-color: rgba(245,193,7,.32);
  box-shadow: 0 0 30px rgba(245,193,7,.05);
}
.lp-podio-item:hover { transform: translateY(-3px); border-color: rgba(212,160,26,.3); }
.lp-podio-medal { font-size: 1.7rem; flex-shrink: 0; }
.lp-podio-name {
  flex: 1; text-align: left;
  font-family: var(--font-heading);
  font-size: .92rem; letter-spacing: .03em;
}
.lp-podio-pts {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(212,160,26,.38));
}
.lp-podio-pts small {
  font-size: .62rem; letter-spacing: .06em;
  -webkit-text-fill-color: var(--text-3); filter: none; margin-left: .15rem;
}

/* ── CTA FINALE ───────────────────────────────────────────────── */
.lp-final {
  padding: 10rem 1.5rem 12rem;
  text-align: center;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(212,140,20,.1) 0%, transparent 70%);
  border-top: 1px solid rgba(212,160,26,.09);
}
.lp-final-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8.5vw, 5.5rem);
  font-weight: 900; letter-spacing: .05em; line-height: 1.1;
  background: linear-gradient(135deg, #fff8ee 0%, var(--gold-2) 30%, var(--gold) 65%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 1.2rem;
}
.lp-final-name {
  background: linear-gradient(135deg, var(--fire) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lp-final-sub {
  font-family: var(--font-serif);
  font-size: 1.1rem; font-style: italic;
  color: var(--text-2); margin-bottom: 2.2rem; line-height: 1.65;
}

/* ── Responsive LP ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .lp-prizes-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .lp-numbers-inner { gap: 2rem; }
  .lp-step        { gap: 1rem; }
  .lp-step-num    { font-size: 2rem; width: 2.8rem; }
  .lp-prizes, .lp-how, .lp-podio, .lp-final { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ===================================================================
   MOBILE — Hamburger · Overlay Menu · Bottom Tab Bar
   =================================================================== */

/* ── Hamburger button ──────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 10px;
  transition: background .2s var(--ease);
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:active { background: var(--glass); }
.hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--spring), opacity .25s var(--ease), width .3s var(--ease);
  transform-origin: center;
}
.hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(4.7px, 4.7px); }
.hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4.7px, -4.7px); }

/* ── Mobile overlay menu ───────────────────────────────────────── */
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 299;
  background: rgba(4, 3, 10, 0.97);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }

.mm-inner {
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: 5rem 2.5rem 3rem;
}

.mm-greeting {
  font-family: var(--font-heading);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 2.5rem;
}
.mm-greeting span { color: var(--gold); }

.mm-nav {
  display: flex; flex-direction: column; gap: .2rem;
  flex: 1;
}
.mm-link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 700; letter-spacing: .04em;
  color: rgba(237, 232, 213, 0.18);
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color .25s var(--ease), transform .25s var(--spring), letter-spacing .25s;
  transform: translateX(0);
  display: block;
  opacity: 0;
  animation: none;
}
.mm-link:hover, .mm-link:focus {
  color: var(--text);
  transform: translateX(8px);
  letter-spacing: .06em;
}
.mm-link.mm-staff { color: rgba(232, 134, 30, 0.25); }
.mm-link.mm-staff:hover { color: var(--amber); }

/* Stagger-in when menu opens */
.mobile-menu.is-open .mm-link {
  opacity: 1;
  animation: mm-slide-in .4s var(--spring) both;
}
.mobile-menu.is-open .mm-link[data-delay="0"] { animation-delay: .05s; }
.mobile-menu.is-open .mm-link[data-delay="1"] { animation-delay: .10s; }
.mobile-menu.is-open .mm-link[data-delay="2"] { animation-delay: .15s; }
.mobile-menu.is-open .mm-link[data-delay="3"] { animation-delay: .20s; }
.mobile-menu.is-open .mm-link[data-delay="4"] { animation-delay: .25s; }
.mobile-menu.is-open .mm-link[data-delay="5"] { animation-delay: .30s; }
.mobile-menu.is-open .mm-link[data-delay="6"] { animation-delay: .35s; }
.mobile-menu.is-open .mm-link[data-delay="7"] { animation-delay: .40s; }

@keyframes mm-slide-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mm-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(212,160,26,.12);
}
.mm-logout {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
  padding: .6rem 0;
  transition: color .2s var(--ease);
}
.mm-logout:hover { color: var(--red); }

/* ── Bottom Tab Bar ────────────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 150;
  background: rgba(4, 3, 10, 0.94);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-top: 1px solid rgba(212, 160, 26, 0.15);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .22rem;
  padding: .6rem .4rem .55rem;
  color: var(--text-3);
  font-family: var(--font-heading);
  font-size: .55rem; letter-spacing: .06em; text-transform: uppercase;
  transition: color .2s var(--ease), transform .2s var(--spring);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.bn-item svg { width: 23px; height: 23px; transition: transform .25s var(--spring); }
.bn-item:active { transform: scale(0.9); }
.bn-item:active svg { transform: scale(0.88); }

.bn-item.bn-active { color: var(--gold); }
.bn-item.bn-active svg { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(212,160,26,.55)); }
.bn-item.bn-active::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 2px 2px;
}

/* Pulsante centrale Gioco: cerchio dorato rialzato sopra la barra */
.bn-game {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem .4rem .55rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bn-game-circle {
  width: 52px; height: 52px; margin-top: -24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #1a1206;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, var(--amber) 100%);
  box-shadow:
    0 0 0 5px rgba(4,3,10,.94),                 /* stacco dalla barra */
    0 6px 18px rgba(212,160,26,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s var(--spring), box-shadow .25s var(--ease);
}
.bn-game-circle .ico { width: 26px; height: 26px; color: #1a1206; }
.bn-game:active .bn-game-circle { transform: scale(.92); }
.bn-game-label {
  font-family: var(--font-heading); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-2);
}
.bn-game.bn-active .bn-game-circle {
  box-shadow:
    0 0 0 5px rgba(4,3,10,.94),
    0 0 0 7px rgba(212,160,26,.45),
    0 6px 22px rgba(212,160,26,.6),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.bn-game.bn-active .bn-game-label { color: var(--gold); }

/* ── Mobile overrides ──────────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 769px) {
  .nav a { font-size: .76rem; padding: .28rem .42rem; }
  .nav form button { font-size: .76rem; padding: .28rem .42rem; }
}

@media (max-width: 768px) {
  /* Show mobile elements */
  .hamburger     { display: flex; }
  .mobile-menu   { display: flex; }
  .bottom-nav    { display: flex; }

  /* Hide desktop nav */
  .nav { display: none; }

  /* Topbar adjustment */
  .topbar { padding: 0 .9rem; gap: .35rem; }
  .brand  {
    filter: none;
    font-size: .78rem;
    letter-spacing: .02em;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 108px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* Push content above bottom-nav */
  .container { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Tighten cards */
  .card { padding: 1.1rem; border-radius: 18px; margin: .7rem 0; }

  /* Mission grid single column */
  .mission-grid { grid-template-columns: 1fr !important; }

  .lp-prizes-grid {
    grid-template-columns: 1fr;
    max-width: 340px; margin-inline: auto;
  }
  .lp-prize-card { padding: 1.8rem 1.4rem; }

  .lp-steps { gap: 2rem; }
  .lp-step { gap: 1.1rem; align-items: flex-start; }

  .lp-podio-list { max-width: 100%; }
  .lp-podio-item { padding: 1rem 1.2rem; }

  .lp-final { padding: 7rem 1.2rem 10rem; }
  .lp-final-title { font-size: clamp(2.2rem, 11vw, 3.5rem); }

  /* Leaderboard */
  .lb-done { display: none; }

  /* Profile big number */
  .big-total { font-size: 2.8rem; }

  /* Prize page */
  .prize-body { flex-direction: column; }
  .prize-photo img,
  .prize-photo-placeholder { width: 100%; height: 200px; }
}

/* Extra small screens */
@media (max-width: 380px) {
  .lp-headline { font-size: 1.8rem; }
  .lp-final-title { font-size: 2rem; }
}

/* ===================================================================
   CLASSIFICA — Leaderboard redesign
   =================================================================== */

/* ── Hero ───────────────────────────────────────────────────────── */
.lb-hero {
  text-align: center;
  padding: 3rem 1rem 1.5rem;
}
.lb-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  font-weight: 700; letter-spacing: .06em;
  background: linear-gradient(135deg, #fffaee 0%, var(--gold-2) 30%, var(--gold) 65%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .5rem; line-height: 1.1;
}
.lb-hero-sub {
  font-family: var(--font-serif);
  font-size: 1rem; font-style: italic; color: var(--text-2);
}

/* ── Empty state ────────────────────────────────────────────────── */
.lb-empty {
  text-align: center; padding: 4rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.lb-empty-icon { font-size: 3.5rem; display: block; margin-bottom: .5rem; }

/* ── Podium ─────────────────────────────────────────────────────── */
.lb-podium-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .75rem;
  padding: 2rem 1rem 0;
  margin-bottom: 1.5rem;
}

.lb-podium-card {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; max-width: 220px; min-width: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 1.6rem 1rem 0;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-bottom: none;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  transition: transform .35s var(--spring);
}
.lb-podium-card:hover { transform: translateY(-4px); }

/* Gold */
.lb-podium-gold {
  border-color: rgba(245,193,7,.35);
  background: linear-gradient(180deg, rgba(212,150,20,.14) 0%, var(--bg-card) 60%);
  box-shadow: 0 -8px 40px rgba(245,193,7,.1), inset 0 1px 0 rgba(245,193,7,.2);
}
/* Silver */
.lb-podium-silver {
  border-color: rgba(180,180,210,.25);
  background: linear-gradient(180deg, rgba(160,160,200,.1) 0%, var(--bg-card) 60%);
}
/* Bronze */
.lb-podium-bronze {
  border-color: rgba(180,100,50,.28);
  background: linear-gradient(180deg, rgba(160,90,40,.1) 0%, var(--bg-card) 60%);
}

/* 1st place taller */
.lb-podium-first { padding-top: 2.2rem; }

.lb-podium-medal { font-size: 2.4rem; margin-bottom: .6rem; line-height: 1; }
.lb-podium-first .lb-podium-medal { font-size: 3rem; }

.lb-podium-name {
  font-family: var(--font-heading);
  font-size: .82rem; letter-spacing: .05em;
  color: var(--text); text-align: center;
  margin-bottom: .8rem;
  word-break: break-word;
}

.lb-podium-pts {
  font-family: var(--font-display);
  font-weight: 900; line-height: 1;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: .02em;
}
.lb-podium-gold   .lb-podium-pts {
  background: linear-gradient(135deg, #ffd700, #fff3a0, #d4a01a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(245,193,7,.5));
}
.lb-podium-silver .lb-podium-pts {
  background: linear-gradient(135deg, #c8c8e0, #eeeef8, #9898b0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lb-podium-bronze .lb-podium-pts {
  background: linear-gradient(135deg, #cd7f32, #e8a060, #9a5020);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.lb-podium-pts-label {
  font-family: var(--font-heading);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-top: .15rem; margin-bottom: .6rem;
}
.lb-podium-done {
  font-size: .72rem; color: var(--text-3);
  font-family: var(--font-heading); letter-spacing: .04em;
  margin-bottom: 1rem;
}

/* Bottom pedestal bar */
.lb-podium-bar {
  width: 100%; margin-top: auto;
  border-radius: 0;
}
.lb-podium-bar-gold   { height: 48px; background: linear-gradient(180deg, rgba(245,193,7,.2), rgba(245,193,7,.06)); }
.lb-podium-bar-silver { height: 32px; background: linear-gradient(180deg, rgba(180,180,220,.15), rgba(180,180,220,.04)); }
.lb-podium-bar-bronze { height: 18px; background: linear-gradient(180deg, rgba(180,100,50,.15), rgba(180,100,50,.04)); }

/* "tu" badge */
.lb-me { outline: 1px solid rgba(212,160,26,.4); }
.lb-you {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(212,160,26,.18); color: var(--gold);
  border: 1px solid rgba(212,160,26,.3);
  border-radius: 980px; padding: .1rem .4rem;
  margin-left: .3rem; vertical-align: middle;
  font-weight: 600;
}

/* ── Lista 4°+ ──────────────────────────────────────────────────── */
.lb-list-wrap {
  margin-top: 0 !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}
.lb-list-title {
  font-size: .72rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--text-3) !important;
  margin-bottom: .8rem !important;
}
.lb-list { list-style: none; }
.lb-list-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .78rem .3rem;
  border-bottom: 1px solid rgba(255,255,255,.045);
  transition: background .18s var(--ease);
  border-radius: 8px;
}
.lb-list-row:last-child { border-bottom: none; }
.lb-list-row:hover { background: rgba(255,255,255,.04); }
.lb-list-row.lb-me { background: rgba(212,160,26,.07); }
.lb-list-row.lb-me:hover { background: rgba(212,160,26,.1); }

.lb-list-rank {
  font-family: var(--font-heading);
  font-size: .8rem; letter-spacing: .05em;
  color: var(--text-3); width: 2.2rem; text-align: center; flex-shrink: 0;
}
.lb-list-name { flex: 1; font-weight: 500; font-size: .92rem; }
.lb-list-done { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.lb-list-pts  {
  font-family: var(--font-heading);
  font-weight: 700; font-size: .95rem;
  color: var(--gold); letter-spacing: .05em; white-space: nowrap;
}
.lb-list-pts small {
  font-size: .6rem; color: var(--text-3); margin-left: .1rem; letter-spacing: .06em;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lb-podium-wrap { gap: .45rem; padding: 1.5rem .5rem 0; }
  .lb-podium-card { padding: 1.2rem .6rem 0; border-radius: 14px 14px 0 0; }
  .lb-podium-first { padding-top: 1.7rem; }
  .lb-podium-medal { font-size: 1.8rem; }
  .lb-podium-first .lb-podium-medal { font-size: 2.2rem; }
  .lb-podium-name { font-size: .72rem; }
  .lb-podium-done { font-size: .65rem; }
  .lb-list-done { display: none; }
}

/* ── Online pill ─────────────────────────────────────────────────── */
.online-pill {
  display: flex; align-items: center; gap: .38rem;
  padding: .28rem .72rem;
  border-radius: 980px;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.22);
  font-family: var(--font-heading);
  font-size: .68rem; letter-spacing: .06em;
  color: var(--text-3);
  white-space: nowrap;
  user-select: none;
  transition: border-color .3s, color .3s;
}
.online-pill:hover { border-color: rgba(46,204,113,.4); color: var(--text-2); }

/* Wrapper del contatore — clip il roll verticale */
.oc-wrap {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 1.1em;
}
.oc-val {
  display: inline-block;
  line-height: 1;
}

/* Flash verde sul pill quando il numero cambia */
@keyframes oc-pill-flash {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.55); border-color: rgba(46,204,113,.75); }
  45%  { box-shadow: 0 0 18px 5px rgba(46,204,113,.2); border-color: rgba(46,204,113,.55); }
  100% { box-shadow: none; border-color: rgba(46,204,113,.22); }
}
.online-pill.oc-flash { animation: oc-pill-flash .75s ease-out forwards; }

.online-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.7);
  animation: dot-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px  rgba(46,204,113,.7); }
  50%       { opacity: .65; box-shadow: 0 0 12px rgba(46,204,113,.4); }
}

@media (max-width: 768px) {
  .online-pill { font-size: .62rem; padding: .24rem .55rem; }
}

/* ── Mobile menu close button ───────────────────────────────────── */
.mm-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer; color: var(--text-2);
  transition: background .2s var(--ease), color .2s, transform .2s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.mm-close svg { width: 20px; height: 20px; }
.mm-close:hover, .mm-close:active {
  background: rgba(255,255,255,0.12);
  color: var(--text);
  transform: scale(1.08);
}

/* ── Prize duo images ───────────────────────────────────────────── */
.prize-photos-duo {
  display: flex; flex-direction: column; gap: .5rem;
  flex-shrink: 0;
}
.prize-duo-img {
  width: 185px; height: 130px;
  object-fit: cover; border-radius: var(--r);
  border: 1px solid rgba(212,160,26,.2);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--spring);
}
.prize-card:hover .prize-duo-img { transform: scale(1.04); }

@media (max-width: 480px) {
  .prize-photos-duo { flex-direction: row; }
  .prize-duo-img { width: calc(50% - .25rem); height: 110px; }
}

/* Brand: nome completo di default, sigla "FSR" sui telefoni stretti
   (lascia spazio a icona ruota + saldo punti + online nella barra) */
.brand-short { display: none; }
.brand-full  { display: inline; }
@media (max-width: 560px) {
  .brand-full  { display: none; }
  .brand-short { display: inline; }
}


/* ===================================================================
   GALLERIA — Magazine Pro
   =================================================================== */

/* ── Hero ─────────────────────────────────────────────────────── */
.gl-hero {
  position: relative;
  min-height: 55vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 2rem 5rem;
  text-align: center;
  border-bottom: 1px solid rgba(212,160,26,.1);
  overflow: hidden;
}
/* Mosaico fotografico dietro il titolo — desktop: 3 colonne */
.gl-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    url('/images/galleria/sanrocco-processione.jpg'),
    url('/images/galleria/palio-fuochi.jpg'),
    url('/images/galleria/sanrocco-oro.jpg');
  background-size: 33.34% 100%, 33.33% 100%, 33.33% 100%;
  background-position: 0% center, 50% center, 100% center;
  background-repeat: no-repeat;
  opacity: .11;
  pointer-events: none;
}
/* Mobile: una sola foto centrata */
@media (max-width: 600px) {
  .gl-hero::after {
    background-image: url('/images/galleria/sanrocco-processione.jpg');
    background-size: cover;
    background-position: center 30%;
  }
}
.gl-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(212,160,26,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 15% 20%, rgba(232,134,30,.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 85% 20%, rgba(192,57,15,.06) 0%, transparent 55%);
  pointer-events: none;
}
.gl-hero-inner { position: relative; z-index: 2; }
.gl-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 900; letter-spacing: .07em; line-height: .95;
  background: linear-gradient(120deg, #fffaee 0%, var(--gold-2) 18%, #fff8d6 32%, var(--gold) 46%, var(--amber) 60%, var(--gold-2) 76%, #fffaee 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: title-shimmer 9s linear infinite;
  margin-bottom: .8rem;
}
.gl-sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-style: italic; color: var(--text-2); line-height: 1.65;
  margin-bottom: 1.8rem;
}
.gl-hero-count {
  font-family: var(--font-heading);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid rgba(212,160,26,.18);
  border-radius: 100px; display: inline-block;
  padding: .35rem 1.1rem;
}
.gl-hero-count span { color: var(--gold); font-weight: 700; margin-right: .35rem; }

/* ── Section wrapper ──────────────────────────────────────────── */
.gl-section {
  padding: 5rem 0 5.5rem;
  border-bottom: 1px solid rgba(212,160,26,.08);
}
.gl-section-alt { background: rgba(6,4,14,.45); }
.gl-section-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Section header ───────────────────────────────────────────── */
.gl-section-head {
  display: flex; align-items: flex-start; gap: 1.4rem;
  margin-bottom: 2.8rem;
}
.gl-section-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 900; line-height: .9; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(212,160,26,.35) 0%, rgba(212,160,26,.08) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gl-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700; letter-spacing: .05em;
  color: var(--text); margin: 0 0 .5rem;
}
.gl-section-desc {
  font-family: var(--font-serif);
  font-style: italic; font-size: 1rem;
  color: var(--text-3); line-height: 1.6; margin: 0;
}

/* ── Magazine grid ────────────────────────────────────────────── */
.gl-mag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: .9rem;
}
.gl-mag-grid-alt {
  grid-template-columns: repeat(3, 1fr);
}
.gl-mag-grid-trio {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 340px;
}

/* Featured photo: 2×2 */
.gl-mag-item.gl-featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* ── Photo item ───────────────────────────────────────────────── */
.gl-mag-item {
  position: relative; margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(10,8,22,.6);
  cursor: zoom-in;
}
.gl-mag-item a {
  display: block; width: 100%; height: 100%;
  position: relative;
}
.gl-mag-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94), filter .4s;
  filter: brightness(.92) saturate(1.05);
}
.gl-mag-item:hover img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.1);
}

/* Caption overlay — slides up from bottom */
.gl-caption-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(4,3,10,.88) 0%,
    rgba(4,3,10,.45) 45%,
    transparent 70%
  );
  display: flex; align-items: flex-end;
  padding: 1.4rem 1.2rem 1.1rem;
  opacity: 0;
  transition: opacity .38s var(--ease);
}
.gl-mag-item:hover .gl-caption-overlay { opacity: 1; }
.gl-caption-text {
  font-family: var(--font-serif);
  font-style: italic; font-size: .88rem;
  color: rgba(255,255,255,.92); line-height: 1.5;
  transform: translateY(8px);
  transition: transform .38s var(--ease);
}
.gl-mag-item:hover .gl-caption-text { transform: translateY(0); }

/* Gold accent line on hover */
.gl-mag-item::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.gl-mag-item:hover::after { transform: scaleX(1); }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .gl-mag-grid,
  .gl-mag-grid-alt,
  .gl-mag-grid-trio { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gl-mag-item.gl-featured { grid-column: span 2; grid-row: span 1; }
  .gl-caption-overlay { opacity: 1; }
  .gl-caption-text { transform: translateY(0); }
}
@media (max-width: 540px) {
  .gl-section { padding: 3rem 0 3.5rem; }
  .gl-section-inner { padding-inline: 1rem; }
  .gl-section-head { gap: .8rem; margin-bottom: 1.8rem; }
  .gl-mag-grid,
  .gl-mag-grid-alt,
  .gl-mag-grid-trio { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gl-mag-item.gl-featured { grid-column: span 1; grid-row: span 1; }
  .gl-hero { min-height: 45vh; padding: 4rem 1.2rem 3.5rem; }
}


/* ===================================================================
   PROFILO — Redesign lusso scuro
   =================================================================== */

.pf-hero {
  position: relative;
  min-height: 46vh;
  display: flex; align-items: center; justify-content: center;
  padding: 5.5rem 2rem 4.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(212,160,26,.1);
}
.pf-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 90% at 50% 100%, rgba(212,160,26,.1) 0%, transparent 68%);
  pointer-events: none;
}
.pf-hero-inner { position: relative; z-index: 1; }

/* Profilo: dimensione/colore arrivano dal sistema .avatar; qui solo posizione + alone */
.pf-avatar {
  margin: 0 auto 1.2rem;
  box-shadow: 0 0 0 8px rgba(212,160,26,.06), 0 0 60px rgba(212,160,26,.18);
}
.pf-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  font-weight: 900; letter-spacing: .05em; line-height: 1.05;
  background: linear-gradient(120deg, #fffaee 0%, var(--gold-2) 28%, var(--gold) 58%, var(--amber) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: title-shimmer 9s linear infinite;
  margin: 0 0 1rem;
}
.pf-score-wrap {
  display: flex; align-items: baseline; gap: .5rem;
  justify-content: center;
}
.pf-pts {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 50%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 28px rgba(212,160,26,.5));
}
.pf-pts-label {
  font-family: var(--font-body);
  font-size: .88rem; color: var(--text-3);
  font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}

/* Stats strip */
.pf-stats-strip {
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid rgba(212,160,26,.1);
  border-bottom: 1px solid rgba(212,160,26,.1);
  background: rgba(8,6,18,.6);
}
.pf-stat {
  flex: 1; text-align: center;
  padding: 1.8rem 1rem;
  border-right: 1px solid rgba(212,160,26,.07);
}
.pf-stat:last-child { border-right: none; }
.pf-stat-val {
  font-family: var(--font-heading);
  font-size: 1.8rem; font-weight: 700;
  color: var(--gold); display: block;
  line-height: 1; margin-bottom: .4rem;
}
.pf-stat-label {
  font-size: .65rem; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}

/* Section title */
.pf-section-title {
  font-family: var(--font-heading);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  margin: 2.2rem 0 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(212,160,26,.12);
}
.pf-empty {
  text-align: center; padding: 3.5rem 1rem;
  font-family: var(--font-serif);
  font-style: italic; color: var(--text-3); font-size: 1.08rem;
  line-height: 1.7;
}

/* Submissions */
.pf-sub-list { list-style: none; display: grid; gap: .55rem; }
.pf-sub-row {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: rgba(10,8,22,.7);
  border: 1px solid rgba(255,255,255,.045);
  border-left: 3px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .22s var(--spring);
}
.pf-sub-row:hover {
  border-color: rgba(212,160,26,.15);
  box-shadow: 0 6px 28px rgba(0,0,0,.35);
  transform: translateX(3px);
}
.pf-sub-row.is-approved { border-left-color: rgba(74,222,128,.45); }
.pf-sub-row.is-pending  { border-left-color: rgba(212,160,26,.5); }
.pf-sub-row.is-rejected { border-left-color: rgba(239,68,68,.45); }
.pf-sub-icon { font-size: 1.15rem; flex-shrink: 0; margin-top: .1rem; }
.pf-sub-body { flex: 1; min-width: 0; }
.pf-sub-title {
  font-family: var(--font-heading);
  font-size: .87rem; font-weight: 600;
  letter-spacing: .02em; color: var(--text);
  display: block; margin-bottom: .22rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-sub-meta { font-size: .72rem; color: var(--text-3); letter-spacing: .02em; }
.pf-sub-note { font-size: .74rem; color: #ef8080; margin-top: .3rem; font-style: italic; }
.pf-sub-badge {
  flex-shrink: 0;
  font-size: .65rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 100px;
  align-self: flex-start; margin-top: .1rem;
  white-space: nowrap;
}
.pf-sub-badge.ok   { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.pf-sub-badge.wait { background: rgba(212,160,26,.12); color: var(--gold); border: 1px solid rgba(212,160,26,.22); }
.pf-sub-badge.no   { background: rgba(239,68,68,.12);  color: #ef4444;  border: 1px solid rgba(239,68,68,.22); }

/* Form card */
.pf-form-card {
  background: rgba(10,8,22,.8);
  border: 1px solid rgba(212,160,26,.12);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  margin: 2rem 0 1rem;
}
.pf-form-title {
  font-family: var(--font-heading);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

@media (max-width: 768px) {
  .pf-hero { min-height: 38vh; padding: 4rem 1.5rem 3.5rem; }
  .pf-stat-val { font-size: 1.5rem; }
  .pf-pts { filter: none; }
  .pf-form-card { padding: 1.5rem 1.2rem; border-radius: 18px; }
}


/* ===================================================================
   BANNER PRUDENZA
   =================================================================== */

.safety-overlay {
  position: fixed; inset: 0; z-index: 9900;
  background: rgba(4,3,10,.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.safety-overlay.safety-visible {
  opacity: 1; pointer-events: auto;
}
.safety-card {
  max-width: 480px; width: 100%;
  background: rgba(10,8,22,.97);
  border: 1px solid rgba(212,160,26,.28);
  border-radius: 26px;
  padding: 2.8rem 2.2rem 2.2rem;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(212,160,26,.06), 0 40px 100px rgba(0,0,0,.7), 0 0 80px rgba(212,160,26,.07);
  transform: translateY(28px) scale(.97);
  transition: transform .45s var(--spring), opacity .45s var(--ease);
}
.safety-overlay.safety-visible .safety-card {
  transform: translateY(0) scale(1);
}
.safety-icon {
  font-size: 3rem; display: block;
  margin-bottom: .9rem; line-height: 1;
  animation: halo-pulse 4s ease-in-out infinite;
}
.safety-title {
  font-family: var(--font-heading);
  font-size: 1.55rem; font-weight: 700;
  letter-spacing: .07em;
  color: var(--gold);
  margin-bottom: .7rem;
}
.safety-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .93rem; color: var(--text-2);
  margin-bottom: 1.4rem; line-height: 1.6;
}
.safety-list {
  list-style: none; text-align: left;
  background: rgba(4,3,10,.55);
  border: 1px solid rgba(212,160,26,.1);
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.8rem;
  display: grid; gap: .6rem;
}
.safety-list li {
  font-size: .88rem; color: var(--text);
  line-height: 1.45;
  display: flex; align-items: center; gap: .6rem;
}
.safety-emo { font-size: 1.25rem; line-height: 1; flex-shrink: 0; width: 1.5rem; text-align: center; }
.safety-btn {
  width: 100%; justify-content: center;
  font-size: .92rem; padding: .95rem 1.5rem;
  letter-spacing: .04em;
}
.safety-fine {
  font-size: .68rem; color: var(--text-3);
  margin-top: 1rem; line-height: 1.55;
}

@media (max-width: 480px) {
  .safety-card { padding: 2rem 1.4rem 1.8rem; border-radius: 20px; }
  .safety-title { font-size: 1.3rem; }
}


/* ===================================================================
   CONTATORE COMPLETAMENTI MISSIONE
   =================================================================== */

.mission-counter {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .72rem;
}
.mc-icon { font-size: .85rem; flex-shrink: 0; }
.mc-val  {
  font-family: var(--font-heading);
  font-weight: 700; font-size: .8rem;
  color: var(--gold);
}
.mc-label { color: var(--text-3); }


/* ===================================================================
   PROGRAMMAZIONE FESTA — Design mostruoso
   =================================================================== */

/* ── Hero ─────────────────────────────────────────────────────── */
.pg-hero {
  position: relative;
  min-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  padding: 5.5rem 2rem 5rem;
  text-align: center;
  border-bottom: 1px solid rgba(212,160,26,.12);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(212,160,26,.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(232,134,30,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 30%, rgba(232,78,27,.06) 0%, transparent 60%);
}
.pg-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
}
.pg-hero-inner { position: relative; z-index: 1; }
.pg-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 6.5rem);
  font-weight: 900; letter-spacing: .06em; line-height: 1;
  background: linear-gradient(120deg,
    #fffaee 0%, var(--gold-2) 16%, #fff8d6 30%,
    var(--gold) 44%, var(--amber) 58%, var(--gold-2) 74%, #fffaee 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: title-shimmer 9s linear infinite;
  margin-bottom: .7rem;
}
.pg-sub {
  font-family: var(--font-serif);
  font-size: clamp(.95rem, 2.2vw, 1.25rem);
  font-style: italic; color: var(--text-2);
  line-height: 1.65; margin-bottom: 2rem;
}
.pg-hero-badges {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
}

/* ── Day section ─────────────────────────────────────────────── */
.pg-day {
  padding: 3.5rem 0 4rem;
  border-bottom: 1px solid rgba(212,160,26,.07);
}
.pg-day-inner {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.pg-day-header {
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 2.2rem;
}
.pg-day-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 50%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(212,160,26,.35));
  flex-shrink: 0;
}
.pg-day-info {
  display: flex; flex-direction: column; gap: .1rem;
}
.pg-day-name {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text);
}
.pg-day-month {
  font-family: var(--font-body);
  font-size: .75rem; color: var(--text-3);
  letter-spacing: .12em; text-transform: uppercase;
}
.pg-day-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212,160,26,.35) 0%, transparent 100%);
}

/* ── Event card ──────────────────────────────────────────────── */
.pg-card {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: rgba(10,8,22,.75);
  border: 1px solid rgba(255,255,255,.055);
  border-left: 4px solid rgba(212,160,26,.25);
  border-radius: 20px;
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.1rem;
  position: relative; overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--spring);
}
.pg-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(212,160,26,.04) 0%, transparent 60%);
  pointer-events: none;
}
.pg-card:hover {
  border-color: rgba(212,160,26,.4);
  box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 30px rgba(212,160,26,.08);
  transform: translateY(-4px) translateX(3px);
}

/* night/evening/morning/afternoon tints */
.pg-night    { border-left-color: rgba(139,92,246,.5); }
.pg-night::before { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(139,92,246,.05) 0%, transparent 60%); }
.pg-night:hover   { border-color: rgba(139,92,246,.5);   box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 30px rgba(139,92,246,.1); }

.pg-evening  { border-left-color: rgba(232,134,30,.55); }
.pg-evening::before { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(232,134,30,.05) 0%, transparent 60%); }
.pg-evening:hover   { border-color: rgba(232,134,30,.55); box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 30px rgba(232,134,30,.1); }

.pg-morning  { border-left-color: rgba(250,204,21,.5); }
.pg-morning::before { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(250,204,21,.04) 0%, transparent 60%); }
.pg-morning:hover   { border-color: rgba(250,204,21,.5);  box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 30px rgba(250,204,21,.1); }

.pg-afternoon { border-left-color: rgba(52,211,153,.45); }
.pg-afternoon::before { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(52,211,153,.04) 0%, transparent 60%); }
.pg-afternoon:hover   { border-color: rgba(52,211,153,.45); box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 0 30px rgba(52,211,153,.1); }

/* ── Grande evento ────────────────────────────────────────────── */
.pg-card-grande {
  border-color: rgba(212,160,26,.5) !important;
  border-left-width: 5px;
  background: rgba(14,10,26,.9);
  box-shadow: 0 0 0 1px rgba(212,160,26,.1), 0 8px 48px rgba(0,0,0,.5), 0 0 60px rgba(212,160,26,.07);
}
.pg-grande-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(212,160,26,.08) 0%, transparent 65%);
  pointer-events: none;
  animation: halo-pulse 3.5s ease-in-out infinite;
}
.pg-card-grande:hover {
  border-color: rgba(212,160,26,.8) !important;
  box-shadow: 0 12px 60px rgba(0,0,0,.55), 0 0 60px rgba(212,160,26,.16) !important;
}
.pg-title-grande {
  background: none !important;
  -webkit-text-fill-color: var(--gold-2) !important;
  color: var(--gold-2) !important;
  animation: none !important;
  text-shadow: 0 0 28px rgba(212,160,26,.45), 0 0 6px rgba(245,200,66,.2);
}
.pg-card-subtitle-tour {
  font-family: var(--font-serif);
  font-style: italic; font-size: .95rem; color: var(--text-2);
  margin: .3rem 0 .6rem; letter-spacing: .01em;
}

/* ── Time block ───────────────────────────────────────────────── */
.pg-card-time {
  display: flex; flex-direction: column; align-items: center;
  gap: .1rem; flex-shrink: 0;
  min-width: 68px; text-align: center;
  padding-top: .2rem;
}
.pg-time-icon { font-size: 1.3rem; line-height: 1; }
.pg-time-val {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700;
  color: var(--text); letter-spacing: .04em;
  line-height: 1.1;
}
.pg-time-label {
  font-size: .62rem; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}

/* ── Card body ────────────────────────────────────────────────── */
.pg-card-body { flex: 1; min-width: 0; }
.pg-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .55rem;
}
.pg-location {
  font-size: .75rem; color: var(--text-3);
  letter-spacing: .04em;
}
.pg-free-badge {
  font-size: .68rem; font-weight: 700;
  color: #4ade80; letter-spacing: .06em;
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.22);
  border-radius: 100px; padding: .15rem .55rem;
}
.pg-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  font-weight: 700; letter-spacing: .03em;
  color: var(--text);
  margin: 0 0 .45rem; line-height: 1.25;
  background: linear-gradient(90deg, var(--text) 0%, var(--text-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pg-card-subtitle {
  font-family: var(--font-serif);
  font-style: italic; font-size: .9rem; font-weight: 400;
  color: var(--text-2);
}
.pg-card-desc {
  font-family: var(--font-serif);
  font-size: .9rem; font-style: italic;
  color: var(--text-2); line-height: 1.55;
  margin-bottom: .85rem;
}

/* ── Badges ───────────────────────────────────────────────────── */
/* Pulsanti Instagram artisti (Programmazione) */
.pg-ig-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pg-ig {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .42rem .8rem; border-radius: 100px;
  font-family: var(--font-heading); font-size: .76rem; font-weight: 700;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(75deg, #fa7e1e 0%, #d62976 48%, #962fbf 80%, #4f5bd5 100%);
  box-shadow: 0 4px 14px rgba(214,41,118,.32);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.pg-ig:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(214,41,118,.5); filter: brightness(1.06); }
.pg-ig:active { transform: scale(.96); }
.pg-ig .ico { width: 16px; height: 16px; flex-shrink: 0; color: #fff; }

/* Colonna foto artista (destra su desktop, sotto il testo su mobile) */
.pg-artist {
  flex-shrink: 0; width: 200px;
  display: flex; flex-direction: column; gap: .7rem; align-items: stretch;
}
.pg-artist-photo {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.pg-artist .pg-ig-row { margin-top: 0; justify-content: center; gap: .4rem; }
.pg-artist .pg-ig { font-size: .68rem; padding: .38rem .72rem; }
/* Schede con due artisti: foto affiancate nello spazio di un solo box */
.pg-artist-photos { display: flex; gap: .5rem; }
.pg-artist-photos .pg-artist-photo {
  width: 50%; aspect-ratio: 1 / 1; object-fit: cover;
}
.pg-artist-multi .pg-ig-row { flex-wrap: wrap; }

.pg-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pg-badge {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 100px;
  white-space: nowrap;
}
.pg-badge-musica  { background: rgba(212,160,26,.12); color: var(--gold);   border: 1px solid rgba(212,160,26,.22); }
.pg-badge-live    { background: rgba(232,134,30,.12); color: var(--amber);  border: 1px solid rgba(232,134,30,.28); }
.pg-badge-dj      { background: rgba(139,92,246,.13); color: #a78bfa;       border: 1px solid rgba(139,92,246,.28); }
.pg-badge-big     { background: rgba(232,78,27,.14);  color: #f97316;       border: 1px solid rgba(232,78,27,.3);
                    animation: badge-glow 2.8s ease-in-out infinite; }
.pg-badge-fam     { background: rgba(52,211,153,.12); color: #34d399;       border: 1px solid rgba(52,211,153,.25); }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pg-hero { min-height: 44vh; padding: 4rem 1.2rem 3.5rem; }
  .pg-day  { padding: 2.8rem 0 3rem; }
  .pg-day-inner { padding-inline: 1rem; }
  .pg-day-header { gap: .8rem; margin-bottom: 1.6rem; }
  .pg-card { flex-direction: column; gap: .8rem; padding: 1.2rem 1.1rem; }
  .pg-card-time { flex-direction: row; min-width: unset; align-items: center; gap: .5rem; }
  .pg-time-icon { font-size: 1.1rem; }
  .pg-time-label { display: none; }
  .pg-time-val { font-size: 1.1rem; }
  /* Foto artista: sotto il testo, centrata */
  .pg-artist { width: 100%; align-items: center; }
  .pg-artist-photo { max-width: 300px; }
  .pg-artist-multi .pg-artist-photos { max-width: 300px; width: 100%; }
  .pg-artist-multi .pg-artist-photos .pg-artist-photo { max-width: none; }
}
@media (max-width: 480px) {
  .pg-title { letter-spacing: .02em; }
  .pg-day-num { font-size: 3rem; filter: none; }
}

/* ════════════════════════════════════════════════════════════════
   PREMI PAGE  (.pz-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.pz-hero {
  padding: 7rem 0 5.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 140% 60% at 50% 0%, rgba(212,160,26,.14) 0%, rgba(232,134,30,.04) 45%, transparent 65%),
    #040408;
}
.pz-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
  opacity: .5;
}
.pz-hero-inner {
  max-width: 820px; margin: 0 auto; padding: 0 1.5rem;
  position: relative; z-index: 1;
}
.pz-hero-kicker {
  font-family: Cinzel, serif;
  font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); opacity: .8; margin-bottom: 1.3rem;
}
.pz-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2.2rem, 9vw, 5.2rem);
  font-weight: 900; line-height: 1.05; margin-bottom: 1.3rem;
  color: var(--gold-2);
  text-shadow: 0 0 80px rgba(212,160,26,.45), 0 2px 40px rgba(212,160,26,.2);
}
.pz-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--text-2); font-style: italic;
  max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.75;
}
.pz-hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: Cinzel, serif; font-size: .75rem; letter-spacing: .15em;
  color: var(--text-2);
  border: 1px solid rgba(212,160,26,.25);
  padding: .6rem 1.8rem; border-radius: 999px;
  background: rgba(212,160,26,.04);
}
.pz-hero-pill span { color: var(--gold); font-size: 1rem; margin: 0 .1rem; }

/* ── Prize section ────────────────────────────────────────────── */
.pz-section {
  padding: 5.5rem 0;
  position: relative; overflow: hidden;
}
.pz-gold   { background: radial-gradient(ellipse 80% 70% at 25% 50%, rgba(212,160,26,.06) 0%, transparent 70%); }
.pz-silver { background: radial-gradient(ellipse 80% 70% at 75% 50%, rgba(192,192,220,.04) 0%, transparent 70%); }
.pz-bronze { background: radial-gradient(ellipse 80% 70% at 25% 50%, rgba(205,127,50,.06) 0%, transparent 70%); }
.pz-section-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 2.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem;
  align-items: center; position: relative; z-index: 1;
}
.pz-silver .pz-section-inner { direction: rtl; }
.pz-silver .pz-section-info,
.pz-silver .pz-photos-area { direction: ltr; }

/* Ghost rank numeral */
.pz-rank-ghost {
  position: absolute;
  font-family: Cinzel, serif; font-weight: 900;
  font-size: clamp(10rem, 30vw, 24rem); line-height: 1;
  right: -1%; top: 50%; transform: translateY(-50%);
  pointer-events: none; user-select: none;
}
.pz-gold   .pz-rank-ghost { color: rgba(212,160,26,.05); }
.pz-silver .pz-rank-ghost { color: rgba(192,192,220,.035); right: auto; left: -1%; }
.pz-bronze .pz-rank-ghost { color: rgba(205,127,50,.05); }

/* Rank label */
.pz-rank-label {
  display: flex; align-items: center; gap: .8rem;
  font-family: Cinzel, serif; font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; margin-bottom: 1.4rem;
}
.pz-gold   .pz-rank-label { color: #f5c842; }
.pz-silver .pz-rank-label { color: #c8c8de; }
.pz-bronze .pz-rank-label { color: #cd8a3a; }
.pz-medal { font-size: 1.9rem; line-height: 1; }

/* Divider */
.pz-divider { width: 3.5rem; height: 2px; border-radius: 1px; margin-bottom: 1.5rem; }
.pz-gold   .pz-divider { background: linear-gradient(90deg, var(--gold), transparent); }
.pz-silver .pz-divider { background: linear-gradient(90deg, #c8c8de, transparent); }
.pz-bronze .pz-divider { background: linear-gradient(90deg, #cd8a3a, transparent); }

/* Prize name */
.pz-prize-name {
  font-family: Cinzel, serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700; line-height: 1.1; margin-bottom: .5rem;
}
.pz-gold   .pz-prize-name { color: var(--gold-2); }
.pz-silver .pz-prize-name { color: #d8d8ee; }
.pz-bronze .pz-prize-name { color: #e8a05a; }

.pz-prize-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic; color: var(--text-2); margin-bottom: 1.4rem;
}
.pz-prize-desc {
  color: var(--text-2); line-height: 1.8; font-size: .94rem;
  margin-bottom: 1.4rem;
}
.pz-details {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.pz-details li {
  font-size: .87rem; color: var(--text-2);
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pz-details li:last-child { border-bottom: none; }

/* Photos */
.pz-photos-area { display: flex; flex-direction: column; gap: .7rem; }
.pz-photos-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pz-photo { border-radius: .6rem; overflow: hidden; }
.pz-photo img {
  width: 100%; display: block;
  aspect-ratio: 4/3; object-fit: cover;
  transition: transform .5s ease;
}
.pz-photo:hover img { transform: scale(1.06); }
.pz-photo-single img { aspect-ratio: 5/4; }
.pz-photo-border-gold   { box-shadow: 0 0 0 1px rgba(212,160,26,.22), 0 16px 48px rgba(212,160,26,.1); }
.pz-photo-border-silver { box-shadow: 0 0 0 1px rgba(192,192,220,.18), 0 16px 48px rgba(192,192,220,.07); }
.pz-photo-border-bronze { box-shadow: 0 0 0 1px rgba(205,127,50,.22), 0 16px 48px rgba(205,127,50,.09); }
.pz-photo-placeholder {
  border-radius: .6rem;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .6rem; padding: 3.5rem 1rem;
  color: var(--text-2); font-size: .78rem;
  font-family: Cinzel, serif; letter-spacing: .1em;
}
.pz-ph-icon { font-size: 3rem; }

/* ── How to win ────────────────────────────────────────────────── */
.pz-how {
  padding: 6.5rem 0;
  background: linear-gradient(to bottom, rgba(212,160,26,.03), transparent);
}
.pz-how-inner { max-width: 720px; margin: 0 auto; padding: 0 2rem; }
.pz-how-kicker {
  font-family: Cinzel, serif; font-size: .72rem; letter-spacing: .25em;
  color: var(--text-2); text-transform: uppercase; text-align: center; margin-bottom: .8rem;
}
.pz-how-title {
  font-family: Cinzel, serif;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  color: var(--gold); text-align: center; margin-bottom: 3.5rem;
}
.pz-steps { display: flex; flex-direction: column; }
.pz-step {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem;
  align-items: flex-start; padding: 1.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pz-step:last-child { border-bottom: none; }
.pz-step-num {
  font-family: Cinzel, serif; font-size: 1rem; font-weight: 700;
  color: var(--gold); opacity: .55; padding-top: .2rem;
}
.pz-step-title {
  font-family: Cinzel, serif; font-size: .93rem;
  color: var(--text); margin-bottom: .4rem;
}
.pz-step-desc { font-size: .87rem; color: var(--text-2); line-height: 1.72; }
.pz-how-cta { margin-top: 3.5rem; text-align: center; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pz-section-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .pz-silver .pz-section-inner { direction: ltr; }
  .pz-rank-ghost {
    font-size: 7rem; top: auto; bottom: -1.5rem; right: 0;
    transform: none; opacity: 1;
  }
  .pz-silver .pz-rank-ghost { left: auto; right: 0; }
}
@media (max-width: 520px) {
  .pz-photos-duo { grid-template-columns: 1fr; }
  .pz-title { font-size: clamp(1.9rem, 11vw, 2.6rem); }
}


/* ════════════════════════════════════════════════════════════════
   STORIA PAGE  (.st-*)
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.st-hero {
  padding: 7.5rem 0 5.5rem;
  text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 130% 70% at 50% -5%, rgba(212,160,26,.12) 0%, rgba(232,134,30,.04) 42%, transparent 65%),
    linear-gradient(rgba(4,4,8,.8), rgba(4,4,8,.8)),
    url('/images/galleria/sanrocco-processione.jpg') center 30% / cover no-repeat;
}
.st-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 180px; pointer-events: none; opacity: .6;
}
.st-hero-inner {
  max-width: 820px; margin: 0 auto; padding: 0 1.5rem;
  position: relative; z-index: 1;
}
.st-hero-kicker {
  font-family: Cinzel, serif;
  font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); opacity: .8; margin-bottom: 1.3rem;
}
.st-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.9rem, 8vw, 4.6rem);
  font-weight: 900; line-height: 1.08; margin-bottom: 1.3rem;
  color: var(--gold-2);
  text-shadow: 0 0 70px rgba(212,160,26,.45), 0 2px 30px rgba(212,160,26,.18);
}
.st-hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--text-2); font-style: italic;
  max-width: 540px; margin: 0 auto 2.5rem; line-height: 1.75;
}
.st-hero-dates {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: Cinzel, serif; font-size: .75rem; letter-spacing: .18em;
  color: var(--text-2);
  border: 1px solid rgba(212,160,26,.2);
  padding: .6rem 1.8rem; border-radius: 999px;
  background: rgba(212,160,26,.04);
}
.st-hero-dates span { color: var(--gold); }

/* ── Ornament ──────────────────────────────────────────────────── */
.st-ornament {
  text-align: center; padding: 2.5rem 0;
  font-size: 1.4rem; letter-spacing: .6em; color: var(--gold); opacity: .3;
}

/* ── Chapter ───────────────────────────────────────────────────── */
.st-chapter { padding: 5.5rem 0; position: relative; overflow: hidden; }
.st-chapter-alt { background: rgba(255,255,255,.013); }
.st-chapter-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 2.5rem;
  display: grid; grid-template-columns: 260px 1fr; gap: 4.5rem;
  align-items: flex-start;
}
.st-chapter-alt .st-chapter-inner { direction: rtl; }
.st-chapter-alt .st-chapter-sidebar,
.st-chapter-alt .st-chapter-content { direction: ltr; }

/* Sidebar */
.st-chapter-sidebar { position: sticky; top: 5.5rem; }
.st-ch-num {
  font-family: Cinzel, serif; font-weight: 900;
  font-size: clamp(4.5rem, 14vw, 8rem); line-height: 1;
  color: rgba(212,160,26,.14); margin-bottom: .4rem;
}
.st-ch-label {
  font-family: Cinzel, serif; font-size: .68rem; letter-spacing: .22em;
  color: var(--text-2); text-transform: uppercase; line-height: 1.6;
  border-left: 2px solid rgba(212,160,26,.3); padding-left: .9rem;
}
.st-ch-year {
  font-family: Cinzel, serif; font-size: 1rem; color: var(--gold);
  margin-top: 1.6rem; letter-spacing: .06em; opacity: .7;
}

/* Content */
.st-divider {
  width: 3.5rem; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 1.5rem;
}
.st-ch-title {
  font-family: Cinzel, serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700; color: var(--text);
  margin-bottom: 1.3rem; line-height: 1.2;
}
.st-ch-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: rgba(237,232,213,.82);
  line-height: 2; margin-bottom: 1.4rem;
}
.st-ch-body strong { color: var(--gold-2); font-weight: 600; }
.st-ch-body:last-child { margin-bottom: 0; }

/* Pull quote */
.st-pull {
  border-left: 3px solid rgba(212,160,26,.4);
  padding: 1.1rem 1.5rem;
  margin: 1.8rem 0;
  background: rgba(212,160,26,.04);
  border-radius: 0 .5rem .5rem 0;
}
.st-pull-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-style: italic; color: var(--gold-2); line-height: 1.65;
  margin: 0;
}

/* ── Feast day callout ─────────────────────────────────────────── */
.st-feast {
  padding: 7rem 0;
  text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(212,160,26,.08) 0%, transparent 65%);
}
.st-feast-inner {
  max-width: 700px; margin: 0 auto; padding: 0 2rem;
  position: relative; z-index: 1;
}
.st-feast-num {
  font-family: Cinzel, serif; font-weight: 900;
  font-size: clamp(6rem, 28vw, 14rem); line-height: 1;
  color: rgba(212,160,26,.15);
  margin-bottom: -2rem; display: block;
}
.st-feast-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.5rem, 5vw, 3.2rem); font-weight: 700;
  color: var(--gold-2);
  text-shadow: 0 0 50px rgba(212,160,26,.45);
  margin-bottom: 1.2rem; position: relative; z-index: 1;
}
.st-feast-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-2); font-style: italic;
  line-height: 1.75; margin-bottom: 2.5rem;
}
.st-feast-cta .btn { font-size: .9rem; padding: .9rem 2.6rem; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .st-chapter-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .st-chapter-alt .st-chapter-inner { direction: ltr; }
  .st-chapter-sidebar { position: static; }
  .st-ch-num { font-size: 4rem; margin-bottom: .2rem; }
}
@media (max-width: 520px) {
  .st-title { font-size: clamp(1.7rem, 11vw, 2.5rem); }
  .st-feast-num { font-size: 7rem; }
}

/* ── Galleria: sezione Palio dei Fuochi ──────────────────────────── */
.gl-section-palio {
  background: radial-gradient(ellipse 100% 60% at 50% 0%,
    rgba(232,78,27,.07) 0%, rgba(232,134,30,.03) 40%, transparent 65%);
}
.gl-section-palio .gl-section-head::before {
  background: linear-gradient(90deg, rgba(232,78,27,.25), transparent);
}
.gl-section-palio .gl-section-title { color: var(--fire); }
.gl-section-palio .gl-section-num { color: var(--fire); }

.gl-mag-grid-palio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: .9rem;
}
.gl-mag-grid-palio .gl-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.gl-palio-item::after {
  background: linear-gradient(135deg, rgba(232,78,27,.15) 0%, transparent 60%) !important;
}
.gl-palio-item:hover { border-color: rgba(232,78,27,.4) !important; }
.gl-palio-item.gl-featured {
  box-shadow: 0 0 0 1px rgba(232,78,27,.2), 0 20px 60px rgba(232,78,27,.12);
}

@media (max-width: 768px) {
  .gl-mag-grid-palio {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
  }
}
@media (max-width: 480px) {
  .gl-mag-grid-palio { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gl-mag-grid-palio .gl-featured { grid-column: span 1; grid-row: span 1; }
}


/* ═══════════════════════════════════════════════════════════════════
   SISTEMA ICONE SVG  —  sostituiscono le emoji con un look raffinato
   Le icone ereditano dimensione (1em) e colore (currentColor) dal
   contenitore: dove prima c'era un'emoji, ora c'è un tratto in oro.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --medal-gold:   #f3c64b;
  --medal-silver: #ced3dd;
  --medal-bronze: #cf9156;
}

.ico {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  flex: 0 0 auto;
  stroke-width: 1.6;
  overflow: visible;
}

/* Utility colore medaglia */
.is-gold   { color: var(--medal-gold); }
.is-silver { color: var(--medal-silver); }
.is-bronze { color: var(--medal-bronze); }

/* ── Home — premi & podio ─────────────────────────────────────── */
.lp-prize-gold   .lp-prize-icon { color: var(--medal-gold); }
.lp-prize-silver .lp-prize-icon { color: var(--medal-silver); }
.lp-prize-bronze .lp-prize-icon { color: var(--medal-bronze); }
.lp-prize-icon .ico {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
/* Card-gioco nella home (link) */
.lp-game-card { display: block; text-decoration: none; color: inherit; border-color: rgba(212,160,26,.18); }
.lp-game-card:hover { border-color: rgba(212,160,26,.55); box-shadow: var(--shadow), 0 0 60px rgba(212,160,26,.12); }
.lp-game-icon { color: var(--gold-2); }
.lp-game-tag {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-heading); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2); border: 1px solid var(--border-gold); border-radius: 100px; padding: .22rem .62rem;
}
.lp-more-link .ico, .btn .ico { vertical-align: -0.12em; }

/* ── Classifica ───────────────────────────────────────────────── */
.lb-empty-icon { color: var(--gold-2); display: inline-flex; }
.lb-podium-gold   .lb-podium-medal { color: var(--medal-gold); }
.lb-podium-silver .lb-podium-medal { color: var(--medal-silver); }
.lb-podium-bronze .lb-podium-medal { color: var(--medal-bronze); }
.lb-podium-medal { display: inline-flex; justify-content: center; }
.lb-podium-medal .ico { filter: drop-shadow(0 4px 16px rgba(0,0,0,.55)); }

/* ── Pagina Premi ─────────────────────────────────────────────── */
.pz-rank-label { /* già flex */ }
.pz-medal .ico { filter: drop-shadow(0 3px 12px rgba(0,0,0,.5)); }
.pz-ph-icon { color: var(--text-3); display: inline-flex; }
.pz-details li {
  display: flex; align-items: flex-start; gap: .6rem;
}
.pz-details .ico {
  color: currentColor; opacity: .85;
  width: 1.1em; height: 1.1em; margin-top: .12em;
}
.pz-gold   .pz-details .ico { color: var(--medal-gold); }
.pz-silver .pz-details .ico { color: var(--medal-silver); }
.pz-bronze .pz-details .ico { color: var(--medal-bronze); }

/* ── Banner sicurezza ─────────────────────────────────────────── */
.safety-icon {
  width: 84px; height: 84px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-2);
  background:
    radial-gradient(circle at 50% 34%, rgba(212,160,26,.28) 0%, rgba(4,3,10,.55) 72%);
  border: 1px solid var(--border-gold);
  font-size: 0;
}
.safety-icon .ico { width: 42px; height: 42px; }
.safety-list li {
  display: flex; align-items: flex-start; gap: .75rem;
}
.safety-list .ico {
  color: var(--gold-2);
  width: 1.2em; height: 1.2em;
  margin-top: .08em;
}

/* ── Missioni — contatore & tag ───────────────────────────────── */
.mc-icon { color: var(--gold); display: inline-flex; }
.tag { display: inline-flex; align-items: center; gap: .38em; }
.tag .ico { width: 1.05em; height: 1.05em; }
.tag-live .ico { color: var(--green); }

/* ── Programmazione ───────────────────────────────────────────── */
.pg-time-icon { color: var(--gold); display: inline-flex; }
.pg-night    .pg-time-icon { color: #8b9dde; }
.pg-evening  .pg-time-icon { color: var(--amber); }
.pg-afternoon .pg-time-icon { color: var(--gold-2); }
.pg-morning  .pg-time-icon { color: #f4c542; }
.pg-card-grande .pg-time-icon { color: var(--fire); }
.pg-location  { display: inline-flex; align-items: center; gap: .35em; }
.pg-location .ico { color: var(--gold); opacity: .7; }
.pg-free-badge { display: inline-flex; align-items: center; gap: .35em; }
.pg-badge { display: inline-flex; align-items: center; gap: .42em; }
.pg-badge .ico { width: 1.05em; height: 1.05em; }

/* ── Profilo ──────────────────────────────────────────────────── */
.pf-sub-icon { display: inline-flex; }
.pf-sub-row.is-approved .pf-sub-icon { color: var(--green); }
.pf-sub-row.is-pending  .pf-sub-icon { color: var(--gold); }
.pf-sub-row.is-rejected .pf-sub-icon { color: var(--red); }
.pf-form-title { display: flex; align-items: center; gap: .5rem; }
.pf-form-title .ico { color: var(--gold); }

/* ── Marchio / footer / titoli con icona ──────────────────────── */
.brand-mark { color: var(--gold-2); display: inline-flex; vertical-align: -0.18em; margin-right: .12em; }
.footer .ico { color: var(--gold); margin: 0 .15em; vertical-align: -0.12em; }
h1 .ico, h2 .ico { vertical-align: -0.1em; margin-right: .12em; color: var(--gold); }

/* Titoli staff (moderazione/admin) con icona inline */
.staff-title { display: inline-flex; align-items: center; gap: .55rem; }
.staff-title .ico { color: var(--gold); }

/* ── Inline buttons azioni moderazione ────────────────────────── */
.btn-ok .ico, .btn-no .ico { vertical-align: -0.14em; }


/* ═══════════════════════════════════════════════════════════════════
   RIFINITURE "LUSSO"  —  micro-aggiustamenti per alzare la percezione
   di valore senza cambiare l'identità (oro su nero).
   ═══════════════════════════════════════════════════════════════════ */

/* Bottone primario: oro più profondo, bagliore più sobrio, filo dorato */
.btn {
  background: linear-gradient(135deg, #b5340c 0%, var(--fire) 46%, var(--amber) 100%);
  box-shadow:
    0 6px 26px rgba(180, 60, 20, 0.34),
    inset 0 1px 0 rgba(255, 235, 190, 0.28),
    inset 0 0 0 1px rgba(245, 200, 66, 0.18);
  letter-spacing: .03em;
}
.btn:hover {
  box-shadow:
    0 12px 40px rgba(200, 70, 25, 0.46),
    inset 0 1px 0 rgba(255, 235, 190, 0.34),
    inset 0 0 0 1px rgba(245, 200, 66, 0.3);
  transform: translateY(-2px) scale(1.025);
}

/* Focus accessibile e raffinato su tutti gli elementi interattivi */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(245, 200, 66, 0.65);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Rispetto delle preferenze di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===================================================================
   AVATAR (foto profilo o iniziali)  —  componente riusabile
   Ispirato al pattern Radix Avatar (image + fallback iniziali + dot).
   =================================================================== */
.avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212,160,26,.18), rgba(232,134,30,.12));
  border: 1px solid rgba(212,160,26,.4);
  color: var(--gold);
  font-family: var(--font-heading); font-weight: 700; line-height: 1;
  user-select: none;
}
.avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover; display: block;
}
.avatar-fallback {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .02em;
}
.avatar-dot {
  position: absolute; right: 4%; bottom: 4%;
  width: 26%; height: 26%; min-width: 10px; min-height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg);
  box-shadow: 0 0 10px rgba(46,204,113,.55);
}
/* taglie */
.avatar-lg { width: 64px;  height: 64px;  font-size: 1.5rem; }
.avatar-xl { width: 96px;  height: 96px;  font-size: 2.4rem; border-width: 2px; }

/* ── Card "Foto profilo" nel profilo ──────────────────────────── */
.pf-avatar-row {
  display: flex; align-items: center; gap: 1.3rem;
  flex-wrap: wrap;
}
.pf-avatar-row .avatar { box-shadow: 0 0 0 6px rgba(212,160,26,.05); }
.pf-avatar-actions { flex: 1; min-width: 220px; }
.pf-avatar-form {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.pf-avatar-form input[type="file"] {
  flex: 1; min-width: 180px;
  font-size: .82rem; color: var(--text-2);
}
.pf-avatar-form input[type="file"]::file-selector-button {
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  color: var(--text); cursor: pointer;
  background: var(--glass); border: 1px solid var(--border-gold);
  border-radius: 100px; padding: .45rem .9rem; margin-right: .7rem;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.pf-avatar-form input[type="file"]::file-selector-button:hover {
  background: var(--glass-hover); border-color: rgba(212,160,26,.5);
}


/* ===================================================================
   CLASSIFICA — Tab Generale / Gioco
   =================================================================== */
.lb-tabs {
  display: flex; justify-content: center; gap: .6rem;
  margin: 0 auto 2rem; flex-wrap: wrap;
}
.lb-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 600;
  font-size: .82rem; letter-spacing: .06em;
  color: var(--text-2); cursor: pointer;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 100px; padding: .55rem 1.2rem;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lb-tab .ico { width: 1.05em; height: 1.05em; }
.lb-tab:hover { color: var(--text); border-color: rgba(212,160,26,.35); }
.lb-tab.active {
  color: #1a1206;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(212,160,26,.28);
}

.lb-panel { display: none; }
.lb-panel.lb-panel-active { display: block; animation: fade-up .4s var(--ease) both; }

/* medaglia inline nel rank della classifica gioco */
.lb-medal-inline { display: inline-flex; font-size: 1.5rem; line-height: 1; }
.lb-medal-inline .ico { width: 1em; height: 1em; }
.lb-list-game .lb-list-pts small { display: block; text-align: right; }

/* ===================================================================
   MEGA-MENU desktop — tendina con anteprima immagini (hover slideshow)
   =================================================================== */
/* Posizione: il menu è l'ultimo a destra, l'online-pill subito a sinistra */
.megamenu { margin-left: 0; }
.topbar .online-pill { margin-left: auto; }

/* Pulsante menu — icona hamburger curata */
.mm-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.24s var(--ease), color 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease), transform 0.12s var(--ease);
}
.mm-trigger:hover,
.megamenu.is-open .mm-trigger {
  background: linear-gradient(180deg, rgba(245,200,66,0.18), rgba(212,160,26,0.08));
  color: var(--gold-2);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.12), 0 6px 18px -8px rgba(212, 160, 26, 0.6);
}
.mm-trigger:active { transform: translateY(1px); }

.mm-bars {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 20px; height: 14px; gap: 4px;
}
.mm-bars span {
  display: block; height: 2px; width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.28s var(--ease), transform 0.28s var(--ease);
}
.mm-bars span:nth-child(2) { width: 62%; }     /* riga centrale più corta — tocco "designer" */
.mm-trigger:hover .mm-bars span:nth-child(2),
.megamenu.is-open .mm-bars span:nth-child(2) { width: 100%; }
.megamenu.is-open .mm-bars span:nth-child(1) { transform: translateY(1px); }
.megamenu.is-open .mm-bars span:nth-child(3) { transform: translateY(-1px); }

.mm-panel {
  position: absolute;
  top: 100%; right: 1.5rem;
  margin-top: 8px;
  width: min(640px, calc(100vw - 2rem));
  display: flex;
  gap: 1.6rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s var(--ease);
  z-index: 90;
}
.megamenu:hover .mm-panel,
.megamenu:focus-within .mm-panel,
.megamenu.is-open .mm-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Lista link */
.mm-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.mm-list li { margin: 0; }
.mm-logout-form { margin: 0; }
.megamenu .mega-link {
  display: block; width: 100%;
  text-align: left;
  background: none; border: none;
  cursor: pointer;
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem; font-weight: 800; line-height: 1.12;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--text-2, #9a8f78);
  padding: 0.22rem 0;
  transition: color 0.2s var(--ease);
}
.megamenu .mega-link:hover,
.megamenu .mega-link.is-active,
.megamenu .mega-link:focus-visible { color: var(--gold-2, #f5c842); background: none; outline: none; }
.megamenu .mega-link.is-current { color: var(--gold, #d4a01a); }
.megamenu .mega-link.is-staff { color: var(--amber, #e8861e); }
.megamenu .mega-link.is-staff:hover, .megamenu .mega-link.is-staff.is-active { color: var(--fire, #e84e1b); }

/* Stagger lettere */
.mega-link-text { display: inline-block; }
.mega-link-text span {
  display: inline-block;
  transition: transform 0.3s var(--ease);
  transition-delay: calc(var(--i, 0) * 16ms);
  will-change: transform;
}
.megamenu .mega-link:hover .mega-link-text span,
.megamenu .mega-link.is-active .mega-link-text span { transform: translateY(-4px); }

/* Stage immagini */
.mm-stage {
  position: relative;
  width: 270px; height: 320px;
  flex-shrink: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2, #0f0d1e);
  border: 1px solid var(--border);
}
.mm-shot {
  position: absolute; inset: 0;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.5s var(--ease), opacity 0.35s var(--ease);
}
.mm-shot.is-active { opacity: 1; clip-path: inset(0 0 0 0); }
.mm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 5rem;
  color: #1a1408;
  background: linear-gradient(135deg, var(--gold-2, #f5c842), var(--gold, #d4a01a) 55%, var(--amber, #e8861e));
}

@media (prefers-reduced-motion: reduce) {
  .mm-shot { transition: opacity 0.2s; clip-path: none !important; }
  .mm-link-text span { transition: none; }
  .mm-panel { transition: opacity 0.15s; }
}

/* ===================================================================
   STORIE — barra in alto (sotto la topbar) + visualizzatore a schermo intero
   =================================================================== */
.stories-bar {
  border-bottom: 1px solid rgba(212, 160, 26, 0.12);
  background: linear-gradient(180deg, rgba(15, 13, 30, 0.6), rgba(9, 8, 18, 0.3));
}
.stories-scroll {
  display: flex;
  gap: 1rem;
  max-width: 820px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.stories-scroll::-webkit-scrollbar { display: none; }

/* Cerchio singolo */
.story-circle {
  flex: 0 0 auto;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.story-ring {
  position: relative;
  width: 66px;
  height: 66px;
}
.story-ring > svg {            /* solo l'anello segmentato (figlio diretto), non le icone annidate */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sc-seg {
  fill: none;
  stroke: url(#fsrStoryGrad);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
}
.sc-seg.is-viewed,
.story-circle.is-viewed .sc-seg { stroke: rgba(255, 255, 255, 0.2); }

.story-thumb {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg, #040408);
  border: 2px solid var(--bg, #040408);
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;          /* niente menu "Salva immagine" al tap lungo (iOS) */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.story-circle:active .story-thumb img { transform: scale(1.05); transition: transform 0.2s; }

.story-label {
  font-size: 0.72rem;
  color: var(--text, #ede8d5);
  max-width: 72px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story-circle.is-viewed .story-label { color: var(--text-2, #9a8f78); }

/* Bottone "aggiungi storia" */
.story-add { margin: 0; flex: 0 0 auto; }
.story-add-btn { cursor: pointer; }
.story-add-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(212, 160, 26, 0.5);
  border-radius: 50%;
  background: rgba(245, 200, 66, 0.05);
}
.story-add-thumb {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}
.story-add-thumb .ico { width: 26px; height: 26px; color: var(--gold-2, #f5c842); }
.story-add-plus {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2, #f5c842), var(--gold, #d4a01a));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg, #040408);
  box-sizing: border-box;
}
.story-add-plus .ico { width: 12px; height: 12px; color: #1a1408; display: block; }
.story-add.is-loading .story-add-ring { opacity: 0.5; animation: story-pulse 0.9s ease-in-out infinite; }
@keyframes story-pulse { 50% { opacity: 0.85; } }

/* ---- Visualizzatore a schermo intero ---- */
.sv-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sv-overlay.is-open { opacity: 1; }
/* [hidden] deve sempre vincere sui display: grid/inline-flex dei controlli */
.sv-overlay [hidden] { display: none !important; }
.sv-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a0f;
}

/* Top: barre + intestazione */
.sv-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding: 0.6rem 0.5rem 1.4rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}
.sv-top button { pointer-events: auto; }
.sv-bars { display: flex; gap: 4px; padding: 0 0.4rem; }
.sv-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}
.sv-bar-fill {
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 2px;
}
.sv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.6rem 0;
}
.sv-user { display: flex; align-items: center; gap: 0.6rem; }
.sv-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-2, #f5c842), var(--gold, #d4a01a));
  color: #1a1408;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.sv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-meta { display: flex; flex-direction: column; line-height: 1.2; }
.sv-meta b { color: #fff; font-size: 0.88rem; }
.sv-meta small { color: rgba(255, 255, 255, 0.6); font-size: 0.72rem; }
.sv-actions { display: flex; align-items: center; gap: 0.3rem; }
.sv-paused {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.2rem;
}
.sv-paused .ico { width: 14px; height: 14px; }
.sv-icon-btn {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.sv-icon-btn:hover { background: rgba(255, 255, 255, 0.18); }
.sv-icon-btn .ico { width: 20px; height: 20px; }

/* Media */
.sv-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;       /* niente menu contestuale iOS al tap lungo */
  touch-action: none;                /* il gesto (pausa/swipe) è tutto nostro */
}
.sv-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;              /* il tocco arriva al contenitore, non all'immagine */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.sv-spinner {
  position: absolute;
  width: 38px; height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sv-spin 0.8s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* Chevron (solo desktop) */
.sv-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  display: none;
  place-items: center;
  cursor: pointer;
}
.sv-chevron:hover { background: rgba(255, 255, 255, 0.22); }
.sv-chevron .ico { width: 24px; height: 24px; }
.sv-prev { left: 0.5rem; }
.sv-next { right: 0.5rem; }
@media (min-width: 769px) {
  .sv-chevron { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-overlay { transition: none; }
  .sv-spinner, .story-add.is-loading .story-add-ring { animation: none; }
}

/* ===================================================================
   STICKY FOOTER — footer rivelato dallo scroll (effetto "tendina")
   Adattamento del componente React in CSS puro. Su desktop il footer
   resta agganciato in basso e viene scoperto man mano che il contenuto
   sale; su mobile è un footer normale (per non interferire con la
   bottom-nav fissa).
   =================================================================== */
:root { --footer-h: 540px; }

.site-footer {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  margin-top: 2.5rem;
}

.site-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 100%;
  padding: 2.6rem 1.25rem 2rem;
  border-top: 1px solid rgba(212, 160, 26, 0.16);
  background:
    linear-gradient(180deg, rgba(9, 8, 18, 0) 0%, rgba(8, 7, 16, 0.6) 60%, rgba(6, 5, 12, 0.85) 100%);
  overflow: hidden;
}

/* Bagliori radiali decorativi (oro tenue) */
.site-footer__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.site-footer__glow::before,
.site-footer__glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.site-footer__glow::before {
  top: -30%; left: 8%;
  width: 46%; height: 150%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(245, 200, 66, 0.05), transparent 75%);
  transform: rotate(-30deg);
}
.site-footer__glow::after {
  top: -10%; right: 4%;
  width: 30%; height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(212, 160, 26, 0.045), transparent 75%);
}

/* Riga superiore: brand + colonne */
.foot-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.foot-brand { max-width: 320px; }
.foot-logo {
  width: 84px; height: auto;
  border-radius: 14px;
  border: 1px solid rgba(212, 160, 26, 0.22);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.8);
  display: block;
}
.foot-tagline {
  margin: 1rem 0 0;
  color: var(--text-3, #948da3);
  font-size: 0.86rem;
  line-height: 1.6;
}
.foot-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.5rem 0.85rem 0.5rem 0.6rem;
  border: 1px solid rgba(212, 160, 26, 0.28);
  border-radius: 999px;
  color: var(--text-2, #cfc8d8);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease);
}
.foot-social .ico {
  width: 20px; height: 20px;
  color: var(--gold-2, #f5c842);
  flex-shrink: 0;
  transition: color 0.22s var(--ease);
}
.foot-social:hover {
  color: #fff;
  border-color: var(--gold-2, #f5c842);
  background: rgba(245, 200, 66, 0.08);
  transform: translateY(-1px);
}

.foot-group { min-width: 140px; }
.foot-group h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2, #f5c842);
}
.foot-group ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.foot-group a {
  color: var(--text-3, #9a93a8);
  font-size: 0.88rem;
  transition: color 0.22s var(--ease), padding-left 0.22s var(--ease);
}
.foot-group a:hover {
  color: var(--gold-2, #f5c842);
  padding-left: 3px;
}

/* Riga inferiore: copyright */
.foot-bottom {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(212, 160, 26, 0.1);
  color: var(--text-3, #837c90);
  font-size: 0.74rem;
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.foot-motto .ico { color: var(--gold); margin-left: 0.3em; vertical-align: -0.12em; }

/* Animazione di comparsa (blur-in) — attivata quando il footer entra in viewport */
.foot-col {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-8px);
  transition: opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 0.8s var(--ease);
}
.foot-reveal .foot-col { opacity: 1; filter: blur(0); transform: none; }
.foot-reveal .foot-col:nth-child(2) { transition-delay: 0.08s; }
.foot-reveal .foot-col:nth-child(3) { transition-delay: 0.16s; }
.foot-reveal .foot-col:nth-child(4) { transition-delay: 0.24s; }

/* ---- Desktop: effetto rivelazione ---- */
@media (min-width: 769px) {
  .site-footer {
    height: var(--footer-h);
    margin-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .site-footer__pin {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    height: var(--footer-h);
  }
  .site-footer__sticky {
    position: sticky;
    top: calc(100vh - var(--footer-h));
    height: 100%;
    overflow-y: auto;
  }
  .site-footer__inner { height: 100%; padding: 3rem 3rem 2.2rem; }
  .foot-bottom { flex-direction: row; justify-content: space-between; }
}

/* ---- Mobile: footer normale, spazio per la bottom-nav ---- */
@media (max-width: 768px) {
  .foot-top { gap: 1.8rem 2.4rem; }
  .foot-brand { max-width: 100%; }
}
@media (max-width: 768px) {
  .site-footer__inner { padding-bottom: calc(2rem + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .foot-col { opacity: 1; filter: none; transform: none; }
}

/* ===================================================================
   PROFILO — Livello, Streak giornaliera, Vetrina traguardi
   =================================================================== */
.pf-level {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: var(--r); padding: 1rem 1.1rem; margin: 1.3rem 0;
}
.pf-level-badge {
  flex-shrink: 0; width: 62px; height: 62px; border-radius: 14px;
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #1a1206; font-family: var(--font-heading); font-weight: 700;
  font-size: .58rem; letter-spacing: .06em; line-height: 1;
}
.pf-level-badge b { display: block; font-size: 1.55rem; margin-top: 2px; }
.pf-level-info { flex: 1; min-width: 0; }
.pf-level-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.pf-level-title { font-family: var(--font-heading); font-weight: 700; color: var(--gold-2); font-size: 1rem; }
.pf-level-next { font-size: .72rem; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.pf-level-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.pf-level-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .6s var(--ease); }
.pf-level-nexttitle { display: block; margin-top: .4rem; font-size: .72rem; color: var(--text-3); }

.pf-streak {
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: var(--r); padding: 1rem 1.1rem; margin: 1.3rem 0;
}
.pf-streak-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.pf-streak-title { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-heading); font-weight: 700; color: var(--gold-2); }
.pf-streak-title .ico { width: 18px; height: 18px; color: var(--fire); }
.pf-streak-sub { font-size: .75rem; color: var(--text-3); }
.pf-streak-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.pf-streak-day {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .5rem .2rem; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-3);
}
.pf-streak-day.is-on { background: rgba(212,160,26,.14); border-color: var(--border-gold); color: var(--gold-2); }
.pf-streak-day.is-current { background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-color: var(--gold-2); color: #1a1206; box-shadow: 0 0 0 3px rgba(245,200,66,.18); }
.pf-streak-d { font-size: .58rem; font-family: var(--font-heading); letter-spacing: .04em; }
.pf-streak-b { font-size: .75rem; font-weight: 700; }
.pf-streak-cta { margin: .85rem 0 0; font-size: .82rem; color: var(--gold-2); text-align: center; }

.pf-badge-count { font-size: .68rem; color: var(--gold); background: rgba(212,160,26,.1); border: 1px solid var(--border-gold); padding: .12rem .5rem; border-radius: 999px; vertical-align: middle; margin-left: .45rem; font-family: var(--font-heading); }
.pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: .5rem 0 1.4rem; }
.pf-badge { display: flex; align-items: center; gap: .6rem; padding: .65rem .7rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.pf-badge.is-done { border-color: var(--border-gold); background: rgba(212,160,26,.06); }
.pf-badge.is-locked { opacity: .55; }
.pf-badge-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.pf-badge.is-done .pf-badge-ic { background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.pf-badge.is-done .pf-badge-ic .ico { color: #1a1206; }
.pf-badge.is-locked .pf-badge-ic { background: rgba(255,255,255,.05); }
.pf-badge.is-locked .pf-badge-ic .ico { color: var(--text-3); }
.pf-badge-ic .ico { width: 17px; height: 17px; }
.pf-badge-name { flex: 1; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-badge-pts { font-size: .72rem; font-weight: 700; color: var(--gold-2); }
.pf-badge.is-locked .pf-badge-pts { color: var(--text-3); }

/* ── Popup premio giornaliero (streak) ── */
.streak-pop {
  position: fixed; inset: 0; z-index: 2600;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: rgba(4,3,10,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.streak-pop.is-open { opacity: 1; visibility: visible; }
.streak-pop-card {
  width: min(420px, 100%); text-align: center;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--border-gold); border-radius: var(--r-lg); padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow), 0 0 60px rgba(212,160,26,.2);
  transform: translateY(14px) scale(.96); transition: transform .3s var(--ease);
}
.streak-pop.is-open .streak-pop-card { transform: none; }
.streak-pop-ic { width: 56px; height: 56px; margin: 0 auto .7rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--fire), var(--gold)); box-shadow: 0 0 30px rgba(232,78,27,.4); }
.streak-pop-ic .ico { width: 28px; height: 28px; color: #fff; }
.streak-pop-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-2); margin: 0 0 .2rem; }
.streak-pop-sub { color: var(--text-2); font-size: .86rem; margin: 0 0 1.1rem; }
.streak-pop-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: 1.2rem; }
.streak-pop-day { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .1rem; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-3); }
.streak-pop-day.is-on { background: rgba(212,160,26,.14); border-color: var(--border-gold); color: var(--gold-2); }
.streak-pop-day.is-today { background: linear-gradient(135deg, var(--gold-2), var(--gold)); border-color: var(--gold-2); color: #1a1206; box-shadow: 0 0 0 3px rgba(245,200,66,.2); transform: scale(1.07); }
.streak-pop-day .d { font-size: .54rem; font-family: var(--font-heading); letter-spacing: .03em; }
.streak-pop-day .b { font-size: .72rem; font-weight: 700; }
.streak-pop-btn { width: 100%; justify-content: center; }

/* ── Radio: contatore "chi ascolta ora" ── */
.radio-listeners { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--text-2); margin: -.2rem 0 .2rem; }
.radio-listeners .rl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); flex-shrink: 0; }
.radio-listeners b { color: var(--gold-2); }

/* ── Admin: codici premio (link/QR monouso) ─────────────────────── */
.reward-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.reward-row { border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; padding: .7rem .8rem; background: rgba(255,255,255,.02); }
.reward-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.reward-label { font-weight: 600; }
.reward-link { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(0,0,0,.25); color: var(--text-1, #eee); margin-bottom: .5rem; }
.tag.tag-on { background: rgba(60,190,110,.16); color: var(--green, #4ecb71); border: 1px solid rgba(60,190,110,.4); }

/* ── Premi misteriosi (identità premi nascosta) ─────────────────── */
.pz-photo-mystery { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.pz-photo-mystery > span:nth-child(2) { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--gold, #f5c842); }
.pz-photo-mystery .pz-ph-note { font-size: .82rem; opacity: .8; letter-spacing: .03em; }
.mm-mystery h3 { letter-spacing: .02em; }

/* (Hint "continua a scorrere": stile spostato in cinematic.css, scoped .cine) */

/* ── Admin: punti utente + form bonus punti ─────────────────────── */
.user-pts { font-size: .72rem; color: var(--gold-2); margin-left: .45rem; font-weight: 600; }
.user-bonus { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.user-bonus input[name="points"] { width: 76px; }
.user-bonus input[name="reason"] { min-width: 150px; flex: 1 1 160px; }

/* ── Admin: griglia QR premio (stampabile) ──────────────────────── */
.reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .8rem; margin-top: .7rem; }
.reward-qr { position: relative; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 12px; padding: .6rem; text-align: center; background: rgba(255,255,255,.02); }
.reward-qr.is-used { opacity: .5; }
.reward-qr-img { background: #fff; border-radius: 8px; padding: 6px; line-height: 0; }
.reward-qr-img svg { width: 100%; height: auto; display: block; }
.reward-qr-meta { display: flex; gap: .35rem; justify-content: center; align-items: center; margin: .5rem 0 .3rem; flex-wrap: wrap; }
.reward-qr-code { font-family: ui-monospace, Menlo, monospace; font-size: .64rem; color: var(--text-2); word-break: break-all; }
.reward-qr-code strong { color: var(--gold-2); }
.reward-qr-del { position: absolute; top: 4px; right: 4px; }
.reward-qr-del .btn-mini { padding: .18rem .34rem; }
@media print {
  body * { visibility: hidden; }
  .reward-grid, .reward-grid * { visibility: visible; }
  .reward-grid { position: absolute; inset: 0 auto auto 0; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .reward-qr { border-color: #ccc; }
  .reward-qr-del { display: none !important; }
  .reward-qr.is-used { display: none; }         /* stampa solo i QR ancora liberi */
}

/* Azioni QR (scarica / copia) */
.reward-qr-actions { display: flex; gap: .35rem; justify-content: center; margin-top: .5rem; }
.reward-qr-actions .btn-mini { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; padding: .28rem .5rem; }
.reward-qr-actions .btn-mini svg { width: 13px; height: 13px; }
@media print { .reward-qr-actions { display: none !important; } }

/* ── PWA: banner "Aggiungi a Home" (iOS) + pulsante notifiche ────── */
.pwa-hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200;
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  background: rgba(11,10,22,.97); border: 1px solid rgba(245,200,66,.35);
  border-radius: 14px; color: #f3ecd0; font-size: .82rem; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pwa-hint b { color: #f5c842; }
.pwa-hint-x { margin-left: auto; background: none; border: 0; color: #f3ecd0; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; flex-shrink: 0; }
@media (min-width: 640px) { .pwa-hint { left: auto; max-width: 400px; } }
#pushBtn[disabled] { opacity: .6; cursor: default; }
.push-box { margin-top: 1rem; }

/* ── 2FA ─────────────────────────────────────────────────────────── */
.twofa-qr { background:#fff; padding:10px; border-radius:12px; width:220px; max-width:70%; margin:.9rem 0; }
.twofa-qr svg { width:100%; height:auto; display:block; }
.twofa-steps { padding-left:1.1rem; margin:.6rem 0; }
.twofa-codes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; margin:1rem 0; }
.twofa-codes code { font-size:1rem; letter-spacing:.12em; background:rgba(255,255,255,.05); padding:.35rem .5rem; border-radius:8px; display:block; text-align:center; }

/* ── Ruota: aura animata sull'icona in barra quando c'è il giro gratis ── */
.nav-wheel-btn.is-ready { position: relative; box-shadow: 0 0 10px rgba(245,200,66,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.nav-wheel-btn.is-ready::before,
.nav-wheel-btn.is-ready::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold-2, #f5c842); pointer-events: none;
  animation: navWheelAura 1.8s ease-out infinite;
}
.nav-wheel-btn.is-ready::after { animation-delay: .9s; }
@keyframes navWheelAura { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-wheel-btn.is-ready::before, .nav-wheel-btn.is-ready::after { animation: none; opacity: 0; }
}

/* ── Classifica: foto profilo/iniziali nel podio (prime 3) ───────── */
.lb-podium-avatar-wrap { position: relative; display: inline-flex; margin-bottom: .55rem; }
.avatar.lb-podium-avatar { width: 60px; height: 60px; font-size: 1.4rem; border-width: 2px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.lb-podium-first .lb-podium-avatar { width: 78px; height: 78px; font-size: 1.9rem; }
.lb-podium-avatar-wrap .lb-podium-medal {
  position: absolute; right: -6px; bottom: -6px; margin: 0;
  font-size: 1.25rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
}
.lb-podium-first .lb-podium-avatar-wrap .lb-podium-medal { font-size: 1.5rem; }
@media (max-width: 560px) {
  .avatar.lb-podium-avatar { width: 46px; height: 46px; font-size: 1.05rem; }
  .lb-podium-first .lb-podium-avatar { width: 58px; height: 58px; font-size: 1.35rem; }
  .lb-podium-avatar-wrap .lb-podium-medal { font-size: 1rem; right: -4px; bottom: -4px; }
}