/* WallPixelArt — barra inferiore (identica al tema precedente): rettangolo
   scuro arrotondato, "+" centrale con anello al neon arancione. */
.wpa-bottomnav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);
  width:calc(100% - 24px);max-width:460px;height:62px;z-index:1000;
  background:rgba(15,15,23,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--wpa-line,rgba(255,255,255,.08));border-radius:24px;
  display:flex;align-items:center;justify-content:space-around;padding:0 8px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;transition:transform .28s ease,opacity .28s ease;}
/* Nascosta durante il drag-elimina nel profilo: scivola giù e sfuma. */
.wpa-bottomnav.wpa-nav-away{transform:translateX(-50%) translateY(140%);opacity:0;pointer-events:none;}
.wpa-bn{display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--wpa-muted,#8a8a9a);font-size:10.5px;text-decoration:none;flex:1 1 0;background:none;border:0;cursor:pointer;font-family:inherit;}
/* Voce attiva (la classe la mette navbar.js confrontando il percorso): ogni
   voce ha il suo colore, preso dalla palette del logo, con un alone tenue.
   Il colore d'accento resta il ripiego per le voci senza un colore proprio. */
.wpa-bn.active{color:var(--wpa-accent,#ff4d6d);}
.wpa-bn.active svg{filter:drop-shadow(0 0 6px currentColor);}
.wpa-bn.active[data-icon="home"]{color:#ff7a1a;}
.wpa-bn.active[data-icon="grid"]{color:#19a6e2;}
.wpa-bn.active[data-icon="trophy"]{color:#ffc21e;}
.wpa-bn.active[data-icon="user"]{color:#1fbf7a;}
.wpa-bn.active[data-icon="search"]{color:#16b8c0;}
.wpa-bn.active[data-icon="bell"]{color:#f5371f;}
.wpa-bn.active[data-icon="heart"]{color:var(--wpa-accent,#ff4d6d);}
.wpa-bn.active[data-icon="challenge"]{color:#1560d4;}
.wpa-bn.active[data-icon="info"]{color:#8b7bff;}
.wpa-bn.active[data-icon="clan"]{color:var(--wpa-myclan,#a855f7);}
.wpa-bn.active[data-icon="hourglass"]{color:#ff7a1a;}
.wpa-bn.active[data-icon="timeline"]{color:#8b5cf6;}
.wpa-bn svg{width:21px;height:21px;}
/* Anello a gradiente attorno all'avatar, identico a quello dell'immagine del
   profilo (arancio→magenta→viola): un solo colore sembrava di un'altra app. Il
   bordo interno riprende il fondo della barra, così l'anello "stacca". */
/* Anello dell'avatar = colore del PROPRIO clan (viola per chi non ne ha, via
   --wpa-myclan). Stesso criterio dell'avatar nell'header. */
.wpa-bn-avatar-ring{display:block;flex:0 0 auto;padding:2px;border-radius:50%;
  background:var(--wpa-myclan,#a855f7);}
.wpa-bn-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid #0f0f17;box-sizing:border-box;}
/* Il nickname resta del grigio delle altre etichette, anche quando sei sul tuo
   profilo (l'evidenza la dà l'anello dell'avatar, non il testo). */
.wpa-bn-me .wpa-bn-me-name{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--wpa-muted,#8a8a9a);}
/* Badge notifiche non lette sull'avatar (lo mette features/notifications.js). */
.wpa-bn-me{position:relative;}
/* L'omino senza foto profilo eredita il colore del clan (scritto inline dal
   template). currentColor sull'icona, cosi' vale sia per stroke che per fill. */
.wpa-bn-me-ph{display:inline-flex;align-items:center;justify-content:center;}
.wpa-bn-me-ph svg{color:inherit;stroke:currentColor;}
.wpa-notif-badge{position:absolute;top:0;left:50%;transform:translateX(5px);
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ff3b5c;color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;box-sizing:border-box;
  box-shadow:0 0 0 2px var(--wpa-bg,#0f0f17);pointer-events:none;}
/* Notifiche non lette (>0): la campanella "suona" periodicamente per attirare l'occhio. */
.wpa-bn-me.has-unread svg{transform-origin:50% 2px;animation:wpa-bell-ring 2.4s ease-in-out infinite;}
@keyframes wpa-bell-ring{
  0%,70%,100%{transform:rotate(0);}
  74%{transform:rotate(15deg);} 78%{transform:rotate(-12deg);}
  82%{transform:rotate(9deg);} 86%{transform:rotate(-6deg);} 90%{transform:rotate(3deg);}
}
@media (prefers-reduced-motion:reduce){.wpa-bn-me.has-unread svg{animation:none;}}
/* Badge non-letti sulla voce Feed (le notifiche vivono lì dal 06/08/2026). */
.wpa-bn[data-icon="timeline"],.wpa-bn[data-icon="bell"]{position:relative;}
.wpa-bn[data-icon="timeline"].has-unread svg,
.wpa-bn[data-icon="bell"].has-unread svg{transform-origin:50% 2px;animation:wpa-bell-ring 2.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.wpa-bn[data-icon="timeline"].has-unread svg,
.wpa-bn[data-icon="bell"].has-unread svg{animation:none;}}
/* Il numerino (campanella = non lette, Feed = cose da votare) si appoggia allo
   spigolo in alto a destra dell'icona, non dell'intera voce: la voce è larga
   un quinto della barra, e centrarlo su quella lo staccherebbe dall'icona. */
.wpa-bn[data-icon="timeline"] .wpa-notif-badge,
.wpa-bn[data-icon="bell"] .wpa-notif-badge{top:-4px;left:50%;transform:translateX(3px);}
/* Feed: pallino rosso senza numero (c'è / non c'è), con un battito lento. */
.wpa-notif-dot{min-width:0;width:9px;height:9px;padding:0;border-radius:50%;
  animation:wpa-dot-pulse 2s ease-in-out infinite;}
@keyframes wpa-dot-pulse{
  0%,100%{transform:translateX(3px) scale(1);opacity:1;}
  50%{transform:translateX(3px) scale(.72);opacity:.55;}
}
@media (prefers-reduced-motion:reduce){.wpa-notif-dot{animation:none;}}
/* La campanella disegna fino ai bordi del suo riquadro 24×24 (le altre icone
   stanno più strette): a 21px sembrava più grande. Qui la si pareggia a occhio. */
.wpa-bn[data-icon="bell"] svg{width:19px;height:19px;}
.wpa-bn-pub{flex:0 0 auto;margin-top:-34px;}
.wpa-bn-pub .ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;line-height:0;
  background:
    radial-gradient(circle at 50% 50%, #160f0a 0%, #160f0a 44%, rgba(22,15,10,0) 54%),
    conic-gradient(from 90deg, #ff5a00, #ffc24d, #ff7a00, #ff3d00, #ffb43c, #ff5a00);
  box-shadow:
    0 0 14px 3px rgba(255,110,0,.70),
    0 0 32px 9px rgba(255,55,0,.42),
    inset 0 0 11px 1px rgba(255,150,40,.55);}
.wpa-bn-pub .ring svg{width:28px;height:28px;display:block;}
.wpa-bn-pub span:last-child{color:var(--wpa-accent,#ff4d6d);font-weight:700;font-size:11px;margin-top:4px;display:block;text-align:center;}

html{-webkit-tap-highlight-color:transparent;}
.wpa-bn:focus,.wpa-bn-pub:focus{outline:none;}
body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));}

/* Buy Me a Coffee (pulsante flottante) */
.wpa-bmc{position:fixed;right:14px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:999;
  background:var(--wpa-accent,#ff4d6d);color:#14141c;text-decoration:none;
  font:700 .85rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:10px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.3);}
.wpa-bmc:hover{filter:brightness(1.06);}

/* Popup "nuovo livello": compare una volta sola, al primo accesso dopo lo scatto. */
.wpa-levelup{position:fixed;inset:0;z-index:100003;display:grid;place-items:center;
  background:rgba(6,6,10,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:wpaLvlIn .18s ease}
@keyframes wpaLvlIn{from{opacity:0}to{opacity:1}}
.wpa-levelup-box{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  width:min(320px,86vw);padding:26px 22px;border-radius:20px;background:var(--wpa-pop-bg);
  border:1.5px solid var(--wpa-pop-line);box-shadow:var(--wpa-pop-shadow);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.wpa-levelup-badge{line-height:0;animation:wpaLvlPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes wpaLvlPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* L'insegna nuova arriva col suo colore: qui prende l'alone, è il suo momento. */
.wpa-levelup-badge svg{filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 28px rgba(255,255,255,.22))}
.wpa-levelup-box b{color:#fff;font-size:17px;font-weight:800}
.wpa-levelup-box span{color:#9a9aa6;font-size:13px}
.wpa-levelup-ok{margin-top:8px;padding:10px 26px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:800;font-size:13px;color:#fff;background:var(--wpa-accent,#ff4d6d)}
.wpa-levelup-ok:hover{filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){.wpa-levelup,.wpa-levelup-badge{animation:none}}

/* Gara vinta: stessa scatola del livello (sfondo scuro, sito bloccato sotto),
   ma qui il protagonista è la FOTO — è quella che ha vinto, non un'insegna. */
.wpa-cwin-box{width:min(360px,88vw);gap:7px}
.wpa-cwin-medal{font-size:30px;line-height:1;animation:wpaLvlPop .5s cubic-bezier(.2,1.6,.4,1)}
.wpa-cwin-photo{width:150px;height:150px;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 2px #f4b400,0 8px 26px rgba(0,0,0,.6)}
.wpa-cwin-photo img{width:100%;height:100%;object-fit:cover;display:block}
.wpa-cwin-name{font-style:normal;font-weight:700;font-size:13px;color:#f4b400}
/* La riga del livello 16 è una PROMESSA, non la notizia: staccata dal resto da
   un filo, e più piccola del corpo che annuncia la vittoria. */
.wpa-cwin-lvl{margin-top:4px;padding-top:9px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:#c7c7cf}
@media (prefers-reduced-motion:reduce){.wpa-cwin-medal{animation:none}}

/* Tutte le icone della barra alla STESSA misura, comunque siano disegnate:
   riquadro fisso e centratura. Alcune (clessidra, scudo) occupano più area del
   loro viewBox e sembravano più grandi a parità di dimensione. */
.wpa-bn svg{width:21px;height:21px;flex:0 0 auto;display:block;}
.wpa-bn > span:not(.ring):not(.wpa-bn-avatar-ring){display:block;}
/* Nome del waller nella barra: GRIGIO come le altre etichette; diventa del
   colore del proprio clan SOLO quando sei sulla tua pagina profilo (voce attiva).
   Fuori da lì l'evidenza la dà l'anello dell'avatar, non il testo. */
.wpa-bn-me.active .wpa-bn-me-name{color:var(--wpa-myclan,#fff);}