/* Pagina /wall ([wallpixelart_goalwall]): barra countdown, muro in un riquadro
   fisso, clan che accendono il faro. Separazioni a LINEE, niente riquadri. */
.wpa-gw{
  --gw-line:color-mix(in srgb,currentColor 14%,transparent);
  --gw-mute:color-mix(in srgb,currentColor 60%,transparent);
  --gw-dim:color-mix(in srgb,currentColor 42%,transparent);
  --gw-acc:var(--wpa-accent,#ff4d6d);
  --fc:var(--gw-acc);
  /* --gw-vw / --gw-ml: larghezza REALE del documento e scostamento per uscire
     dai margini della pagina. Li misura goalwall.js: con 100vw il muro finiva
     sotto il clip del contenitore (padding del main + padding qui) e le colonne
     di destra e sinistra restavano tagliate. */
  --gw-vw:100vw;--gw-ml:calc(50% - 50vw);
  max-width:960px;margin:0 auto;padding:0 16px 32px;display:flex;flex-direction:column;gap:18px;
  font-variant-numeric:tabular-nums;
}
.wpa-gw button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;margin:0}
.wpa-gw [hidden]{display:none!important}

/* freccetta che apre/chiude la barra (aperta di default) */
.wpa-gw .wpa-gw-tog{align-self:center;width:44px;height:26px;margin:-10px 0 -8px;display:grid;place-items:center;color:var(--gw-mute);border-radius:999px;transition:color .2s}
.wpa-gw .wpa-gw-tog:hover{color:inherit}
.wpa-gw-tog svg{transition:transform .25s}
.wpa-gw-tog[aria-expanded="false"] svg{transform:rotate(180deg)}
.wpa-gw-panel{display:flex;flex-direction:column;gap:18px}

/* barra */
.wpa-gw-bar{border-block:1px solid var(--gw-line);padding-block:14px 12px;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.wpa-gw-cd{display:flex;gap:12px;align-items:center;min-width:0}
.wpa-gw-cd svg{flex:none}
.wpa-gw-cd small{display:block;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gw-mute)}
.wpa-gw-cdv{display:block;font-size:25px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;line-height:1.2}
.wpa-gw-cdv i{font-style:normal;color:var(--gw-mute);font-weight:500;font-size:14px;margin:0 7px 0 1px}
.wpa-gw-stats{display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--gw-line);padding-left:14px;font-size:11px;white-space:nowrap}
.wpa-gw-stats b{font-size:13px}
.wpa-gw-stats span{color:var(--gw-mute)}
.wpa-gw .wpa-gw-lens{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gw-line);transition:background .2s,border-color .2s}
.wpa-gw .wpa-gw-lens:hover,.wpa-gw .wpa-gw-lens[aria-expanded="true"]{background:var(--gw-acc);border-color:var(--gw-acc);color:#fff}
.wpa-gw-prog{grid-column:1/-1;height:3px;border-radius:3px;background:var(--gw-line);overflow:hidden}
.wpa-gw-prog i{display:block;height:100%;background:linear-gradient(90deg,#b46cff,var(--gw-acc))}
.wpa-gw-progl{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--gw-dim);margin-top:-8px}

/* ricerca */
.wpa-gw-search{position:relative}
.wpa-gw .wpa-gw-q{width:100%;height:46px;border-radius:14px;border:1px solid var(--gw-line);background:transparent;color:inherit;font-size:15px;padding:0 44px 0 42px;box-shadow:none}
.wpa-gw .wpa-gw-q:focus,.wpa-gw .wpa-gw-q:focus-visible{outline:none;border-color:var(--gw-acc);box-shadow:none}
.wpa-gw-sico{position:absolute;left:14px;top:13px;color:var(--gw-mute);pointer-events:none;line-height:0}
.wpa-gw .wpa-gw-qx{position:absolute;right:8px;top:7px;width:32px;height:32px;border-radius:50%;color:var(--gw-mute)}
.wpa-gw-res{position:absolute;z-index:20;left:0;right:0;top:52px;background:#1c1929;color:#f3f1f8;border:1px solid #2a2638;border-radius:14px;padding:6px;box-shadow:0 18px 40px #0009;max-height:260px;overflow:auto;scrollbar-width:none}
.wpa-gw-res::-webkit-scrollbar{display:none}
.wpa-gw-res button{display:flex;width:100%;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-align:left}
.wpa-gw-res button:hover,.wpa-gw-res button.is-hl{background:#ffffff12}
.wpa-gw-res img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.wpa-gw-res .nm{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpa-gw-res .nm mark{background:none;color:var(--gw-acc);font-weight:700}
.wpa-gw-res .ct{font-size:12px;color:#9a94ad;white-space:nowrap}
.wpa-gw-res .none{padding:10px;color:#9a94ad;font-size:13px}

/* Intestazione della pagina: è l'HEADER del sito (qui il tema lo nasconde),
   quindi prende fondo, bordo e misure della barra hero delle altre pagine
   (.hb__bar): #12141a a tutta larghezza, logo da 56, filo sotto. */
.wpa-gw-ttl{display:flex;align-items:center;gap:12px;
  width:var(--gw-vw);margin-left:var(--gw-ml);box-sizing:border-box;
  padding:10px 14px;background:#12141a;border-bottom:1px solid rgba(255,255,255,.06)}
.wpa-gw-logo{flex:none;display:flex;align-items:center;height:64px;line-height:0}
.wpa-gw-logo svg{width:clamp(46px,12vw,57.6px);height:auto;display:block}
.wpa-gw-ttl h1{flex:1;min-width:0;margin:0;font-size:clamp(17px,3.6vw,30px);line-height:1.05;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
/* «di WallPixelArt» non si spezza mai: il «DI» orfano in fondo alla prima riga
   faceva leggere due titoli invece di uno. */
.wpa-gw-ttl h1 small{display:inline-block;white-space:nowrap;font-size:.62em;font-weight:700;letter-spacing:.01em;color:var(--gw-mute)}
.wpa-gw-ttl h1 b{color:var(--gw-acc)}
.wpa-gw-hint{flex:none;display:flex;align-items:center;gap:7px;color:var(--gw-mute);font-size:clamp(10px,2.2vw,12.5px);line-height:1.2;max-width:8.5em}
.wpa-gw-hint svg{flex:none;width:clamp(22px,5vw,32px);height:auto;opacity:.9}

/* muro: foto attaccate, niente bordi */
.wpa-gw-wall{position:relative;width:var(--gw-vw);margin-left:var(--gw-ml);border-radius:0;aspect-ratio:12/13;max-height:85vh;background:#07060b;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.wpa-gw-wall.is-zoomed{touch-action:none}
.wpa-gw-wall.is-drag{cursor:grabbing}
.wpa-gw-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.wpa-gw-grid{position:absolute;display:grid}
.wpa-gw-cell{position:relative;background:#14121c center/cover no-repeat;transition:filter .35s}
.wpa-gw-cell.is-empty{background:#0e0d15}
.wpa-gw-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#9a94ad;font-size:14px}
.wpa-gw-stage.is-faro .wpa-gw-cell:not(.is-on){filter:brightness(.16) saturate(.3)}
.wpa-gw-stage.is-faro .wpa-gw-cell.is-on{z-index:2;box-shadow:0 0 0 1.5px var(--fc),0 0 22px 4px color-mix(in srgb,var(--fc) 60%,transparent);animation:wpa-gw-pulse 1.6s ease-in-out infinite}
@keyframes wpa-gw-pulse{50%{box-shadow:0 0 0 1.5px var(--fc),0 0 34px 10px color-mix(in srgb,var(--fc) 35%,transparent)}}

/* riga sotto il muro: faro + prev/next + zoom */
.wpa-gw-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;font-size:13px;color:var(--gw-mute);border-bottom:1px solid var(--gw-line);padding-bottom:12px;margin-top:-6px}
.wpa-gw-msg{min-width:0}
.wpa-gw-chip{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--fc) 14%,transparent);border:1px solid color-mix(in srgb,var(--fc) 55%,transparent);border-radius:999px;padding:5px 6px 5px 12px;white-space:nowrap;max-width:100%;overflow:hidden}
.wpa-gw .wpa-gw-chip button{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent);font-size:12px;line-height:1;flex:none}
.wpa-gw-ctl,.wpa-gw-nav{display:flex;gap:6px;align-items:center;flex:none}
.wpa-gw-ctl button{height:32px;min-width:32px;border-radius:8px;border:1px solid var(--gw-line);display:grid;place-items:center;font-size:12px;color:var(--gw-mute);padding:0 8px}
.wpa-gw-ctl button:hover{color:inherit;border-color:var(--gw-mute)}

/* clan */
.wpa-gw-clh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:-8px}
.wpa-gw-clh h2{margin:0;font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.wpa-gw-clh span{font-size:12px;color:var(--gw-mute)}
.wpa-gw-clans{display:grid;grid-template-columns:repeat(6,1fr);border-block:1px solid var(--gw-line)}
.wpa-gw .wpa-gw-clan{border-left:1px solid var(--gw-line);padding:14px 4px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;position:relative;border-radius:0;transition:background .2s}
.wpa-gw .wpa-gw-clan:first-child{border-left:0}
.wpa-gw .wpa-gw-clan:hover{background:color-mix(in srgb,currentColor 4%,transparent)}
.wpa-gw-clan::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:var(--c);opacity:0;transition:opacity .2s}
/* Riga dei numeri: altezza FISSA e simbolo dentro una scatola di misura fissa.
   Il clan a tre tessere (🟦🟧🟩) è più alto e più largo degli altri simboli e
   sfalsava il suo numero rispetto agli altri cinque. */
.wpa-gw-clan .top{display:flex;align-items:center;justify-content:center;gap:5px;line-height:1;height:clamp(17px,3.4vw,21px);max-width:100%}
.wpa-gw-clan .em{font-size:clamp(13px,3vw,17px);line-height:1;display:inline-flex;align-items:center;min-width:0;overflow:hidden}
.wpa-gw-clan .em.is-multi{font-size:clamp(8px,1.9vw,11px);letter-spacing:-.06em}
.wpa-gw-clan .n{font-size:clamp(13px,3vw,17px);font-weight:700;line-height:1;flex:none}
.wpa-gw-clan .l{font-size:clamp(8.5px,1.9vw,11px);color:var(--gw-mute);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Clan ancora vuoto: non un «0» come gli altri, un invito. */
.wpa-gw-clan .cta{font-size:clamp(8px,1.8vw,10.5px);font-weight:700;line-height:1.15;text-align:center;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:999px;padding:2px 6px;margin-top:2px;max-width:100%}
.wpa-gw-clan.is-void .n{color:var(--gw-dim);font-weight:600}
.wpa-gw .wpa-gw-clan[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 10%,transparent)}
.wpa-gw-clan[aria-pressed="true"]::after{opacity:1}
.wpa-gw-clan[aria-pressed="true"] .n{color:var(--c)}
.wpa-gw-clan[aria-pressed="true"] .l{color:inherit}
.wpa-gw-note{font-size:12px;color:var(--gw-dim);text-align:center;margin:0}

@media (max-width:440px){
  .wpa-gw-bar{gap:10px}
  .wpa-gw-cdv{font-size:19px}
  .wpa-gw-cd svg{width:24px;height:24px}
  .wpa-gw-stats{padding-left:10px}
  .wpa-gw-ttl{gap:9px;padding:8px 12px}
  .wpa-gw-ttl h1{font-size:22px}
  .wpa-gw-logo{height:52px}
  .wpa-gw .wpa-gw-clan{padding:10px 2px 9px}
  .wpa-gw-line{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.wpa-gw *{animation:none!important;transition:none!important}}