/* Velo - pagina profilo. Le variabili arrivano da profilo.js. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #05040a; color: #f4eefb; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.cursore-nascosto, body.cursore-nascosto * { cursor: none !important; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.velo {
  position: relative; min-height: 100vh; min-height: 100dvh;
  color: var(--testo); font-family: var(--font-testo); font-size: var(--dim-testo, 15px); line-height: 1.5;
}
.velo ::selection { background: var(--sel); color: #fff; }

/* ---- sfondo */
.sfondo { position: fixed; inset: -20px; z-index: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sfondo-interno { position: absolute; inset: 0; overflow: hidden; }
.sfondo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sfondo-velo { position: absolute; inset: 0; }
.gradiente-animato { background-size: 300% 300% !important; animation: gradiente 16s ease-in-out infinite; }
@keyframes gradiente { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.tela-effetti, .tela-scia { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tela-effetti { z-index: 1; }
.tela-scia { z-index: 60; }

/* ---- filtri sopra tutto */
.filtro { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.filtro-vignetta { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%); }
.filtro-scanline { background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.filtro-grana::before { content: ""; position: absolute; inset: -100%; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grana .5s steps(4) infinite; }
@keyframes grana { 0% { transform: translate(0,0); } 25% { transform: translate(-5%,3%); } 50% { transform: translate(4%,-4%); } 75% { transform: translate(-3%,-2%); } }
.filtro-vecchia-tv { background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7)); animation: sfarfallio .12s infinite; }
@keyframes sfarfallio { 50% { opacity: .86; } }
.filtro-vhs { background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.filtro-vhs::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(transparent, rgba(255,255,255,.06), transparent); animation: vhs 6s linear infinite; }
@keyframes vhs { from { top: -20%; } to { top: 110%; } }

/* ---- palco e scheda */
.palco { position: relative; z-index: 5; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 48px 16px; }
.guscio { width: 100%; display: flex; justify-content: center; transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }
.scheda { width: 100%; border-radius: var(--raggio); position: relative; }
.layout-senza-scheda .scheda { background: none !important; border: 0 !important; box-shadow: none !important; }
.contenuto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.allinea-centro .contenuto, .allinea-centro .col-sinistra { align-items: center; text-align: center; }
.allinea-sinistra .contenuto, .allinea-sinistra .col-sinistra { align-items: stretch; text-align: left; }
.contenuto > * { width: 100%; }
.layout-divisa .corpo-scheda { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.layout-divisa .col-sinistra { display: flex; flex-direction: column; }
.layout-ampia .pulsanti { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 720px) {
  .layout-divisa .corpo-scheda, .layout-schermo-intero .corpo-scheda { grid-template-columns: 1fr !important; gap: 18px; }
  .palco { padding: 32px 12px; }
}

/* entrate: partono quando si chiude la schermata d'ingresso */
.scheda[class*="entrata-"]:not(.entrata-nessuna) { opacity: 0; }
.scheda.entrata-via { opacity: 1; }
.entrata-dissolvenza.entrata-via { animation: e-dissolvi .8s ease both; }
.entrata-sale.entrata-via { animation: e-sale .8s cubic-bezier(.2,.8,.2,1) both; }
.entrata-zoom.entrata-via { animation: e-zoom .7s cubic-bezier(.2,.8,.2,1) both; }
.entrata-rimbalzo.entrata-via { animation: e-rimbalzo .9s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes e-dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes e-sale { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes e-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes e-rimbalzo { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- intestazione */
.intestazione { display: flex; flex-direction: column; gap: 10px; align-items: inherit; }
.avatar-guscio { display: flex; justify-content: inherit; }
.allinea-centro .avatar-guscio { justify-content: center; }
.avatar { width: var(--dim-avatar); height: var(--dim-avatar); position: relative; flex: none; }
.avatar img, .avatar-iniziale { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-iniziale { display: grid; place-items: center; background: var(--acc-trasp); font-family: var(--font-titolo); font-size: calc(var(--dim-avatar) * .42); font-weight: 700; }
.forma-cerchio.avatar { border-radius: 50%; }
.forma-arrotondato.avatar { border-radius: 24%; }
.forma-quadrato.avatar { border-radius: 6px; }
.forma-esagono.avatar { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.anello-pieno.avatar { box-shadow: 0 0 0 3px var(--col-anello); }
.anello-bagliore.avatar { box-shadow: 0 0 0 2px var(--col-anello), 0 0 28px var(--col-anello); }
.anello-pulsante.avatar { animation: pulsa-anello 2.4s ease-in-out infinite; }
@keyframes pulsa-anello { 0%, 100% { box-shadow: 0 0 0 2px var(--col-anello), 0 0 8px var(--col-anello); } 50% { box-shadow: 0 0 0 4px var(--col-anello), 0 0 34px var(--col-anello); } }
.anello-rotante.avatar::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; z-index: -1;
  background: conic-gradient(var(--col-anello), transparent 40%, var(--col-anello) 60%, transparent); animation: gira 3s linear infinite; }
.anello-rotante.avatar { isolation: isolate; }
@keyframes gira { to { transform: rotate(360deg); } }

.riga-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: inherit; }
.allinea-centro .riga-nome { justify-content: center; }
.nome { margin: 0; font-family: var(--font-titolo); font-size: var(--dim-nome); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; position: relative; overflow-wrap: anywhere; }
.nome-bagliore { text-shadow: 0 0 12px var(--acc), 0 0 28px var(--acc-trasp); }
.nome-neon { color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--acc), 0 0 24px var(--acc), 0 0 48px var(--acc); animation: neon 4s infinite; }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
.nome-gradiente { background: linear-gradient(90deg, var(--acc), var(--nome2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nome-arcobaleno { background: linear-gradient(90deg, #ff5f6d, #ffc371, #7cf29c, #5ec8ff, #b18cff, #ff5f6d); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: arcobaleno 4s linear infinite; }
@keyframes arcobaleno { to { background-position: 200% center; } }
.nome-glitch::before, .nome-glitch::after { content: attr(data-testo); position: absolute; inset: 0; pointer-events: none; }
.nome-glitch::before { color: #ff2e63; transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); animation: glitch 2.2s infinite steps(2); mix-blend-mode: screen; }
.nome-glitch::after { color: #08f7fe; transform: translate(2px, 0); clip-path: inset(50% 0 0 0); animation: glitch 1.7s infinite reverse steps(2); mix-blend-mode: screen; }
@keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-1px, 2px); } 80% { transform: translate(2px, 0); } }
.nome-ondeggio span { display: inline-block; animation: onda 1.6s ease-in-out infinite; }
@keyframes onda { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.scintilla { position: absolute; top: 10%; width: 8px; height: 8px; pointer-events: none; animation: scintilla 2.5s ease-in-out infinite;
  background: radial-gradient(circle, #fff 0 20%, transparent 22%), conic-gradient(from 45deg, transparent 0 20%, var(--acc) 22% 28%, transparent 30% 45%, var(--acc) 47% 53%, transparent 55% 70%, var(--acc) 72% 78%, transparent 80% 95%, var(--acc) 97%); border-radius: 50%; }
@keyframes scintilla { 0%, 100% { opacity: 0; transform: translateY(0) scale(.4); } 50% { opacity: 1; transform: translateY(-14px) scale(1.2); } }

.bio { margin: 0; color: var(--sec); max-width: 52ch; white-space: pre-line; overflow-wrap: anywhere; }
.allinea-centro .bio { margin-inline: auto; }
.bio.con-cursore span::after { content: "|"; margin-left: 2px; color: var(--acc); animation: lampeggia 1s steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }
.meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--sec); font-size: 13px; justify-content: inherit; }
.allinea-centro .meta { justify-content: center; }
.meta > span { display: inline-flex; align-items: center; gap: 5px; }
.meta .ico { width: 15px; height: 15px; }

.ico { width: 18px; height: 18px; display: block; }

/* ---- badge */
.badge-riga { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.allinea-sinistra .badge-riga:not(.badge-in-linea) { justify-content: flex-start; }
.badge { position: relative; width: 26px; height: 26px; display: grid; place-items: center; color: var(--col); border-radius: 8px; background: color-mix(in srgb, var(--col) 14%, transparent); outline: none; }
.badge .ico { width: 16px; height: 16px; filter: drop-shadow(0 0 5px var(--col)); }
.badge::after { content: attr(data-nome); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap;
  background: rgba(10, 8, 16, .92); color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 7px; opacity: 0; pointer-events: none; transition: .15s; font-family: var(--font-testo); z-index: 5; }
.badge:hover::after, .badge:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---- social */
.social { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.allinea-sinistra .social { justify-content: flex-start; }
.social-voce { display: grid; place-items: center; color: var(--col); background: none; border: 0; padding: 4px; cursor: pointer; transition: transform .18s ease, filter .18s; border-radius: 10px; }
.social-voce .ico-social { width: var(--dim-social); height: var(--dim-social); display: block; }
.social-voce .ico-social .ico { width: 100%; height: 100%; }
.forma-cerchio .social-voce, .forma-quadrato .social-voce { padding: calc(var(--dim-social) * .4); background: color-mix(in srgb, var(--col) 12%, transparent); }
.forma-cerchio .social-voce { border-radius: 50%; }
.forma-quadrato .social-voce { border-radius: 12px; }
.con-bagliore .social-voce .ico-social { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--col) 65%, transparent)); }
.social-voce:hover { transform: translateY(-3px) scale(1.08); }
.social-voce:focus-visible, .pulsante:focus-visible, .badge:focus-visible, .lettore button:focus-visible, .galleria-voce:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ---- pulsanti link */
.pulsanti { display: flex; flex-direction: column; gap: 10px; }
.pulsante { --tinta: var(--acc); display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--testo); text-align: left;
  transition: transform .18s ease, box-shadow .18s, background .18s, border-color .18s; position: relative; overflow: hidden; }
.forma-arrotondato .pulsante { border-radius: 14px; }
.forma-pillola .pulsante { border-radius: 999px; padding-inline: 22px; }
.forma-squadrato .pulsante { border-radius: 2px; }
.stile-vetro .pulsante { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.stile-pieno .pulsante { background: var(--tinta); color: #fff; border: 1px solid transparent; }
.stile-contorno .pulsante { background: transparent; border: 1.5px solid var(--tinta); }
.stile-ombra .pulsante { background: rgba(255,255,255,.08); border: 1.5px solid var(--testo); box-shadow: 4px 4px 0 var(--tinta); }
.stile-minimale .pulsante { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0 !important; padding-inline: 4px; }
.hover-solleva .pulsante:hover { transform: translateY(-2px); }
.hover-bagliore .pulsante:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--tinta) 60%, transparent); border-color: var(--tinta); }
.hover-scorri .pulsante::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--tinta) 30%, transparent); transform: translateX(-101%); transition: transform .3s ease; z-index: -1; }
.hover-scorri .pulsante { isolation: isolate; }
.hover-scorri .pulsante:hover::before { transform: none; }
.hover-scuoti .pulsante:hover { animation: scuoti .35s; }
@keyframes scuoti { 25% { transform: translateX(-3px) rotate(-1deg); } 75% { transform: translateX(3px) rotate(1deg); } }
.stile-ombra.hover-solleva .pulsante:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.pul-icona { width: 22px; height: 22px; flex: none; color: var(--icone); }
.stile-pieno .pul-icona { color: #fff; }
.pul-icona .ico-social, .pul-icona .ico { width: 100%; height: 100%; display: block; }
.pul-testi { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pul-titolo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pul-sotto { font-size: 12.5px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pul-freccia { opacity: .45; flex: none; }
.pul-freccia .ico { width: 15px; height: 15px; }

/* ---- altri blocchi */
.blocco-testo { margin: 0; color: var(--sec); white-space: pre-line; overflow-wrap: anywhere; }
.blocco-immagine { width: 100%; height: auto; }
.blocco-immagine-link { display: block; }
.blocco-embed { width: 100%; border: 0; display: block; }
.blocco-embed.video, .blocco-video { aspect-ratio: 16 / 9; width: 100%; height: auto; background: #000; }
.separatore { height: 1px; }
.sep-linea { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--testo) 30%, transparent), transparent); }
.sep-puntini { height: 4px; background: radial-gradient(circle, color-mix(in srgb, var(--testo) 45%, transparent) 1.5px, transparent 2px) center / 12px 4px repeat-x; }
.sep-spazio { height: 8px; }
.sep-onda { height: 10px; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center repeat-x; }

.citazione { margin: 0; position: relative; padding: 16px 18px; border-left: 3px solid var(--acc); background: rgba(255,255,255,.04); border-radius: 4px 12px 12px 4px; text-align: left; }
.citazione blockquote { margin: 0; font-style: italic; font-size: 16px; }
.citazione figcaption { margin-top: 6px; color: var(--sec); font-size: 13px; }
.citazione-segno { position: absolute; right: 12px; top: 8px; color: var(--acc); opacity: .35; }
.citazione-segno .ico { width: 26px; height: 26px; }

.conto-titolo { font-size: 13px; color: var(--sec); margin-bottom: 8px; }
.conto-cifre { display: flex; gap: 8px; justify-content: center; }
.conto-cella { flex: 1; max-width: 78px; padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; }
.conto-cella strong { font-family: var(--font-titolo); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.conto-cella span { font-size: 11px; color: var(--sec); margin-top: 4px; }
.conto-fine { font-family: var(--font-titolo); font-size: 22px; color: var(--acc); }

.galleria { display: grid; gap: 6px; }
.galleria-voce { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.galleria-voce img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galleria-voce:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88); display: grid; place-items: center; padding: 24px; cursor: zoom-out; outline: none; }
.lightbox img { max-height: 90vh; border-radius: 10px; }

.blocco-visite { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--sec); font-size: 13px; }
.blocco-visite strong { color: var(--testo); }
.visite-angolo { position: fixed; z-index: 20; top: 16px; left: 16px; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(10px); font-size: 13px; color: var(--testo); }
.visite-angolo .ico { width: 15px; height: 15px; }

/* ---- discord */
.discord { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); text-align: left; flex-wrap: wrap; }
.discord.vuoto { color: var(--sec); font-size: 13px; justify-content: center; }
.discord-foto-guscio { position: relative; width: 52px; height: 52px; flex: none; }
.discord-foto { width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,.08); position: relative; }
.discord-foto img { width: 100%; height: 100%; border-radius: 50%; }
.discord-foto .discord-decorazione { position: absolute; inset: -12%; width: 124%; height: 124%; border-radius: 0; }
.discord-punto { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #17131f; }
.discord-punto.online { background: #23a55a; } .discord-punto.idle { background: #f0b232; } .discord-punto.dnd { background: #f23f43; } .discord-punto.offline { background: #80848e; }
.discord-testi { min-width: 0; flex: 1; }
.discord-nome { font-weight: 700; }
.discord-stato { font-size: 13px; color: var(--sec); overflow-wrap: anywhere; }
.discord-attivita { display: none; width: 100%; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.discord-attivita.pieno { display: flex; }
.discord-attivita img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.discord-attivita div { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.discord-attivita span { color: var(--sec); }
.discord.compatta { width: auto; align-self: center; }
.discord.compatta .discord-attivita { display: none; }

/* ---- lettore */
.lettore { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lettore-alto { display: flex; gap: 12px; align-items: center; }
.lettore-copertina { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none; background: var(--acc-trasp); display: grid; place-items: center; }
.lettore-copertina img { width: 100%; height: 100%; object-fit: cover; }
.lettore.in-riproduzione .lettore-copertina img { animation: respiro 3s ease-in-out infinite; }
@keyframes respiro { 50% { transform: scale(1.06); } }
.lettore-info { min-width: 0; }
.lettore-titolo { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lettore-artista { font-size: 13px; color: var(--sec); }
.lettore-visual { width: 100%; height: 36px; }
.lettore-tempi { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sec); font-variant-numeric: tabular-nums; }
.lettore-barra, .lettore-volume { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); flex: 1; cursor: pointer; }
.lettore-barra { background: linear-gradient(90deg, var(--acc) var(--avanz, 0%), rgba(255,255,255,.18) var(--avanz, 0%)); }
.lettore-barra::-webkit-slider-thumb, .lettore-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.lettore-barra::-moz-range-thumb, .lettore-volume::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.lettore-comandi { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lettore-comandi button { background: none; border: 0; padding: 6px; cursor: pointer; opacity: .85; border-radius: 50%; display: grid; place-items: center; }
.lettore-comandi button:hover { opacity: 1; }
.lettore-play { width: 44px; height: 44px; background: var(--testo) !important; color: #000 !important; opacity: 1 !important; }
.lettore-vol { display: flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--sec); }
.lettore-vol .lettore-volume { width: 70px; flex: none; }

.mini-lettore { position: fixed; z-index: 20; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 4px; padding: 5px 8px 5px 5px; border-radius: 999px;
  background: rgba(0,0,0,.4); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); max-width: calc(100vw - 32px); }
.mini-lettore button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; }
.mini-play { background: rgba(255,255,255,.12) !important; }
.mini-titolo { font-size: 12.5px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }

/* ---- schermata d'ingresso */
.ingresso { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; outline: none; transition: opacity .6s ease, backdrop-filter .6s; padding: 24px; text-align: center; }
.ingresso-sfocato { background: rgba(0,0,0,.35); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.ingresso-scuro { background: #000; }
.ingresso-trasparente { background: rgba(0,0,0,.15); }
.ingresso.via { opacity: 0; pointer-events: none; }
.ingresso-testo { font-family: var(--font-titolo); font-size: clamp(18px, 3vw, 26px); letter-spacing: .02em; min-height: 1.3em; color: var(--testo); }
.ingresso-sotto { color: var(--sec); font-size: 14px; }
.anim-pulsa .ingresso-testo { animation: pulsa-testo 2.2s ease-in-out infinite; }
@keyframes pulsa-testo { 50% { opacity: .45; } }
.anim-tremolio .ingresso-testo { animation: neon 3s infinite; text-shadow: 0 0 14px var(--acc); }
.anim-scrittura .ingresso-testo::after { content: "_"; animation: lampeggia 1s steps(1) infinite; color: var(--acc); }
.ingresso:focus-visible .ingresso-testo { outline: 2px solid var(--acc); outline-offset: 8px; border-radius: 6px; }

/* ---- cursore */
.cursore { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.cursore-punto { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--col); box-shadow: 0 0 12px var(--col); }
.cursore-anello { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--col); transition: width .15s, height .15s, margin .15s; }
.cursore-anello.premuto { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.cursore-punto.premuto { transform: scale(.7); }

/* ---- avviso copia */
.avviso { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: rgba(12,10,18,.92); color: #fff;
  padding: 10px 16px; border-radius: 12px; font: 14px system-ui, sans-serif; pointer-events: none; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.avviso.visibile { opacity: 1; transform: translate(-50%, 0); }

/* ---- miniature dei modelli: niente interazioni */
.mini .palco { pointer-events: none; }

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

/* ================================================================ v2 */

/* scrollbar sottile, nel colore della pagina */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--barra, #ff4f8b) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--barra, #ff4f8b) 45%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--barra, #ff4f8b) 75%, transparent); }

/* sfondo a strati: immagini, GIF e video, con carosello */
.sfondo-strato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; }
.sfondo-strato.visibile { opacity: 1; }
.trans-zoom .sfondo-strato:not(.visibile) { transform: scale(1.15); }
.trans-scorrimento .sfondo-strato:not(.visibile) { transform: translateX(6%); }
.trans-scorrimento .sfondo-strato.uscita { transform: translateX(-6%); }
.trans-sfocatura .sfondo-strato:not(.visibile) { filter: blur(24px); }
.sfondo-strato.uscita { opacity: 0; }
.zoom-lento { animation: zoom-lento 24s ease-in-out infinite alternate; }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.14); } }
.tonalita-animata { animation: tonalita 18s linear infinite; }
@keyframes tonalita { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* posizione della scheda nello schermo */
.pos-alto .palco { place-items: start center; }
.pos-basso .palco { place-items: end center; }
.pos-sinistra .palco { place-items: center start; padding-left: clamp(16px, 6vw, 96px); }
.pos-destra .palco { place-items: center end; padding-right: clamp(16px, 6vw, 96px); }
.pos-sinistra .guscio { justify-content: flex-start; }
.pos-destra .guscio { justify-content: flex-end; }

/* schermo intero: niente riquadro, contenuto grande su due colonne */
.layout-schermo-intero .palco { padding: clamp(24px, 6vh, 80px) clamp(16px, 6vw, 110px); }
.layout-schermo-intero .scheda { background: none !important; border: 0 !important; box-shadow: none !important; }
.layout-schermo-intero .corpo-scheda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: center; }
.layout-schermo-intero .nome { font-size: calc(var(--dim-nome) * 1.6); }
.layout-schermo-intero .bio { font-size: 1.15em; }
.layout-schermo-intero .contenuto { max-width: 560px; }

/* banner */
.banner { position: relative; overflow: hidden; }
.banner-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover no-repeat; }
.banner-dentro { border-radius: var(--raggio) var(--raggio) 0 0; }
.banner-sopra { position: fixed; top: 0; left: 0; right: 0; z-index: 2; }
.banner.sfuma::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55)); }
.banner-sopra.sfuma { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.banner-sopra.sfuma::after { display: none; }
.con-banner .avatar-guscio { margin-top: calc(var(--dim-avatar, 104px) * -0.5); position: relative; z-index: 2; }
.con-banner .intestazione .avatar-guscio { margin-top: -52px; }
.con-banner .avatar img, .con-banner .avatar-iniziale { box-shadow: 0 0 0 4px rgba(0,0,0,.35); }

/* avatar al passaggio del mouse */
.avatar { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.hover-zoom.avatar:hover { transform: scale(1.08); }
.hover-gira.avatar:hover { transform: rotate(360deg); transition-duration: .8s; }
.hover-inclina.avatar:hover { transform: rotate(-8deg) scale(1.04); }
.hover-rimbalza.avatar:hover { animation: rimbalza .6s; }
.hover-pulsa.avatar:hover { animation: pulsa-avatar 1s ease-in-out infinite; }
@keyframes rimbalza { 30% { transform: translateY(-14px); } 55% { transform: translateY(0); } 75% { transform: translateY(-5px); } }
@keyframes pulsa-avatar { 50% { transform: scale(1.07); } }

.nome-ombra { text-shadow: 0 4px 18px rgba(0,0,0,.55), 0 2px 2px rgba(0,0,0,.4); }

/* tag del team, in stile Discord */
.tag-team { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 5px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--col) 45%, transparent);
  background: color-mix(in srgb, var(--col) 18%, rgba(0,0,0,.25)); color: var(--testo); font: 700 12.5px/1.2 var(--font-testo); cursor: pointer; letter-spacing: .02em; transition: background .15s, transform .15s; }
.tag-team:hover { background: color-mix(in srgb, var(--col) 32%, rgba(0,0,0,.25)); transform: translateY(-1px); }
.tag-team img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.tag-punto { width: 10px; height: 10px; border-radius: 3px; background: var(--col); box-shadow: 0 0 8px var(--col); }
.tag-team:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.popover-team { position: fixed; z-index: 110; background: rgba(14, 11, 20, .96); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--col);
  border-radius: 14px; padding: 14px; color: #f4eefb; font-family: system-ui, sans-serif; box-shadow: 0 24px 60px rgba(0,0,0,.55); animation: compari .16s ease-out; }
@keyframes compari { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.popover-testa { display: flex; align-items: center; gap: 10px; }
.popover-testa img, .popover-icona { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.popover-icona { display: grid; place-items: center; background: var(--col); color: #fff; font-weight: 800; font-size: 18px; }
.popover-testa div { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.popover-testa strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popover-testa span { font-size: 12.5px; opacity: .7; }
.popover-descr { margin: 10px 0 0; font-size: 13px; opacity: .8; text-align: left; }
.popover-membri { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.popover-membri a { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; text-decoration: none; color: inherit; }
.popover-membri a:hover, .popover-membri a:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.popover-membri img, .membro-iniziale { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.membro-iniziale { display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 700; }
.membro-nome { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membro-user { font-size: 12px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.membro-capo { color: #ffd166; flex: none; }
.membro-capo .ico { width: 15px; height: 15px; }
.blocco-team { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--col) 35%, transparent); display: grid; gap: 12px; text-align: left; }
.team-facce { display: flex; flex-wrap: wrap; gap: 4px; }
.team-facce a { display: block; }
.team-facce img, .team-facce .membro-iniziale { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(0,0,0,.4); transition: transform .15s; }
.team-facce a:hover img, .team-facce a:hover .membro-iniziale { transform: translateY(-2px); }
.team-altri { font-size: 12.5px; opacity: .7; align-self: center; margin-left: 4px; }

/* badge: dimensione scelta dall'utente, e versione con il nome */
.badge { width: var(--dim-badge, 26px); height: var(--dim-badge, 26px); }
.badge .ico { width: calc(var(--dim-badge, 26px) * .62); height: calc(var(--dim-badge, 26px) * .62); }
.badge-estesi { gap: 8px; }
.badge-estesi .badge { width: auto; padding: 0 10px 0 7px; gap: 6px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--testo); }
.badge-estesi .badge .ico { color: var(--col); }

/* orologio */
.orologio { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.orologio-etichetta { font-size: 12.5px; color: var(--sec); }
.orologio-ora { font-family: var(--font-titolo); font-size: 34px; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.orologio-data { font-size: 13px; color: var(--sec); }
.allinea-sinistra .orologio { align-items: flex-start; }

/* lettore: conta brani e scaletta */
.lettore-info { flex: 1; }
.lettore-conta { font-size: 12px; color: var(--sec); font-variant-numeric: tabular-nums; align-self: flex-start; }
.scaletta { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.scaletta button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font-size: 13.5px; }
.scaletta button:hover { background: rgba(255,255,255,.06); }
.scaletta button.attiva { background: color-mix(in srgb, var(--acc) 20%, transparent); }
.scaletta button.attiva .scaletta-num { color: var(--acc); }
.scaletta-num { font-size: 12px; color: var(--sec); font-variant-numeric: tabular-nums; text-align: right; }
.scaletta-titolo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scaletta-artista { font-size: 12px; color: var(--sec); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-lettore button .ico { width: 16px; height: 16px; }

/* effetti al clic */
.clic-forma, .clic-punto, .clic-onda, .clic-testo { position: fixed; z-index: 95; pointer-events: none; color: var(--col); transform: translate(-50%, -50%); }
.clic-forma .ico { width: 18px; height: 18px; fill: currentColor; }
.clic-forma, .clic-punto, .clic-testo { animation: clic-vola .85s cubic-bezier(.2,.7,.3,1) forwards; }
.clic-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--col); box-shadow: 0 0 10px var(--col); }
.clic-testo { font: 800 16px system-ui, sans-serif; text-shadow: 0 0 10px var(--col); }
.clic-onda { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--col); animation: clic-onda .7s ease-out forwards; }
@keyframes clic-vola { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.6); opacity: 0; } }
@keyframes clic-onda { to { width: 90px; height: 90px; opacity: 0; } }

/* pulsante per il proprietario */
.modifica-pagina { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: rgba(10, 8, 16, .75); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; font: 600 13.5px system-ui, sans-serif; transition: background .15s; }
.modifica-pagina:hover { background: rgba(10, 8, 16, .92); }
.modifica-pagina .ico { width: 16px; height: 16px; }
@media (max-width: 720px) { .modifica-pagina span { display: none; } .modifica-pagina { padding: 11px; } }

/* niente elementi che allargano la scheda oltre lo schermo */
.scheda, .corpo-scheda, .contenuto, .col-sinistra, .lettore, .lettore-alto, .lettore-tempi, .lettore-comandi, .orologio, .citazione { min-width: 0; }
.lettore-barra { min-width: 0; width: 100%; }
.lettore-comandi { flex-wrap: wrap; }
@media (max-width: 420px) { .lettore-vol .lettore-volume { width: 54px; } .lettore-comandi { gap: 8px; } }
.palco { grid-template-columns: minmax(0, 1fr); }
.guscio { min-width: 0; }
.lettore-visual { max-width: 100%; }
/* lo sfondo resta dentro lo schermo: su telefono un elemento fisso che sborda allarga la pagina */
.sfondo { inset: 0; overflow: hidden; }
.sfondo-interno { inset: -20px; }
.sfondo-velo { inset: 0; }
html, body { overflow-x: hidden; }

/* anteprima fuori schermo: animazioni CSS ferme */
html.in-pausa *, html.in-pausa *::before, html.in-pausa *::after { animation-play-state: paused !important; }

/* ================================================================ scheda 3D */
.guscio { transition: none; }
.corpo-scheda { will-change: transform; }
.riflesso { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.scheda.bordo-animato::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), var(--acc), transparent 25%, var(--nome2) 50%, transparent 75%, var(--acc));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giro-bordo 5s linear infinite; }
@keyframes giro-bordo { to { --ang: 360deg; } }

/* ================================================================ immagini che escono */
.volanti { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.volanti img { position: absolute; height: auto; user-select: none; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; }
.volanti-piovono img { top: -20%; animation-name: vola-giu; }
.volanti-salgono img { top: 110%; animation-name: vola-su; }
.volanti-fluttuano img { animation-name: vola-giro; animation-timing-function: ease-in-out; animation-direction: alternate; }
.volanti-spuntano img { animation-name: vola-spunta; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes vola-giu { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--onda), 140vh) rotate(var(--rot)); } }
@keyframes vola-su { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--onda), -140vh) rotate(var(--rot)); } }
@keyframes vola-giro { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(var(--dx1), var(--dy1)) rotate(calc(var(--rot) / 2)); } 100% { transform: translate(var(--dx2), var(--dy2)) rotate(var(--rot)); } }
@keyframes vola-spunta { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 18% { transform: scale(1) rotate(calc(var(--rot) / 4)); opacity: 1; } 72% { transform: scale(1) rotate(calc(var(--rot) / 4)); opacity: 1; } 100% { transform: scale(0) rotate(calc(var(--rot) / 2)); opacity: 0; } }
.clic-immagine { position: fixed; z-index: 95; pointer-events: none; height: auto; transform: translate(-50%, -50%); animation: clic-immagine 1.05s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes clic-immagine { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; } }