/* Pagina "Chi siamo": menu del party a sinistra, scheda in stile adventurer plate a destra.
   Il palco è sempre notturno (come un menu di gioco), con tutti e due i temi. */
.squadra{--sq-fondo:#0B1528;--sq-riga:#16274A;--sq-riga2:#1D3159;--sq-testo:#EEF2F8;--sq-tenue:#A9B7CF;
  position:relative;overflow:hidden;color:var(--sq-testo);padding:0 24px 72px;
  background:
    radial-gradient(60% 50% at 85% 20%,rgba(242,165,74,.16),transparent 70%),
    radial-gradient(50% 60% at 10% 90%,rgba(159,211,234,.12),transparent 70%),
    linear-gradient(160deg,#0E1B33 0%,var(--sq-fondo) 55%,#08111F 100%)}
.squadra>*{position:relative}

.squadra .sq-titolo{margin:0 -24px;padding:28px 0 0 12px;position:relative;z-index:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(64px,13vw,200px);line-height:.78;letter-spacing:-.01em;color:#F6F1E7;white-space:nowrap;
  text-shadow:0 6px 0 rgba(8,17,31,.55)}
.sq-titolo span{display:block;padding-left:12px}
/* pennellata ambra diagonale dietro al titolo */
.sq-titolo::before{content:"";position:absolute;z-index:-1;left:-4%;bottom:-6px;width:68%;height:.3em;background:var(--ambra);opacity:.9;
  transform:rotate(-3deg);clip-path:polygon(0 30%,8% 0,100% 18%,96% 100%,30% 86%,0 100%);pointer-events:none}
.sq-intro{max-width:1200px;margin:30px auto 28px;font-family:var(--label);font-weight:600;font-size:17px;color:var(--sq-tenue)}

.sq-griglia{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,12fr);gap:36px;align-items:start}

/* ── IL PARTY ── */
.party{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.membro{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100px;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 27% 84px;grid-template-rows:1fr auto auto;column-gap:14px;
  grid-template-areas:"nome striscia job" "ruolo striscia job" "titolo striscia job";
  padding:12px 18px 8px 22px;background:var(--sq-riga);color:var(--sq-testo);
  clip-path:polygon(0 4%,100% 0,97.5% 100%,0 96%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s}
.membro:hover{transform:translateX(6px);background:var(--sq-riga2)}
.membro:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--cielo)}
.membro[aria-expanded="true"]{background:var(--ambra);color:#0E1B33;transform:translateX(14px)}
.m-nome{grid-area:nome;align-self:end;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.3vw,32px);line-height:1;text-transform:uppercase;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-ruoli{grid-area:ruolo;display:flex;gap:6px;margin:6px 0 2px;min-width:0;overflow:hidden}
.m-ruolo{padding:3px 16px 2px 12px;background:#08111F;color:#F6F1E7;
  font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.m-titolo{grid-area:titolo;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em;font-family:var(--testo);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.m-titolo::first-letter{font-size:1.75em;line-height:.8}
.m-striscia{grid-area:striscia;margin:-12px 0 -8px;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 82%,transparent)}
.m-foto{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05);transition:transform .4s ease}
.membro:hover .m-foto{transform:scale(1.06)}
.m-foto.vuota{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(159,211,234,.10) 0 10px,transparent 10px 20px);
  font-family:var(--display);font-weight:800;font-size:44px;color:rgba(238,242,248,.35)}
.membro[aria-expanded="true"] .m-foto.vuota{color:rgba(14,27,51,.4);background:repeating-linear-gradient(135deg,rgba(14,27,51,.12) 0 10px,transparent 10px 20px)}
.m-job{grid-area:job;align-self:center;display:grid;grid-template-columns:auto auto;align-items:end;column-gap:4px;row-gap:2px;justify-items:start}
.m-job abbr{grid-column:1/-1;text-decoration:none;font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.16em;
  border:2px solid currentColor;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;justify-self:end}
.m-job b{font-family:var(--label);font-size:12px;letter-spacing:.1em;padding-bottom:6px}
.m-job strong{font-family:var(--display);font-weight:800;font-size:40px;line-height:.9;border-bottom:3px solid currentColor}

/* ── LA SCHEDA (adventurer plate) ── */
.sq-targhe{position:sticky;top:20px}
.targa{position:relative;border-radius:18px;padding:3px;overflow:hidden;
  background:linear-gradient(135deg,var(--cielo),#4C7BC0 35%,var(--ambra) 70%,#9FD3EA);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.targa>*{position:relative}
.targa::before{content:"";position:absolute;inset:3px;border-radius:15px;
  background:
    radial-gradient(circle at 78% 58%,rgba(159,211,234,.10) 0 22%,transparent 22.5%),
    radial-gradient(circle at 18% 88%,rgba(242,165,74,.10) 0 16%,transparent 16.5%),
    radial-gradient(circle at 92% 8%,rgba(159,211,234,.08) 0 12%,transparent 12.5%),
    linear-gradient(160deg,#1A2F57,#12223F 60%,#0E1B33)}
.targa:not([hidden]){animation:targa-entra .38s cubic-bezier(.2,.8,.2,1)}
@keyframes targa-entra{from{opacity:0;transform:translateX(24px) scale(.98)}to{opacity:1;transform:none}}

.t-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:3px 3px 0;padding:14px 20px 12px;border-radius:15px 15px 0 0;background:rgba(8,17,31,.62)}
.squadra .t-testa h2{margin:0;font-family:var(--label);font-weight:700;font-size:24px;letter-spacing:.02em;color:#F6F1E7}
.t-testa p{margin:2px 0 0;font-family:var(--testo);font-style:italic;font-size:15px;color:var(--cielo)}
.t-server{flex-shrink:0;font-family:var(--label);font-weight:600;font-size:14px;color:var(--sq-tenue);padding-top:6px}
.t-server::before{content:"◈ ";color:var(--ambra)}

.t-corpo{display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:18px;padding:18px 20px 6px}
.t-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.t-info p{margin:0}
.t-info small{display:block;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sq-tenue)}
.t-job{display:flex;align-items:center;gap:14px;margin:0}
.t-sigla{flex-shrink:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--ambra);color:#0E1B33;
  font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.1em;box-shadow:0 0 0 4px rgba(242,165,74,.25)}
.squadra .t-job>span:last-child{font-family:var(--display);font-weight:800;font-size:34px;line-height:.95;text-transform:uppercase;color:#F6F1E7}
.t-ruolo{font-family:var(--label);font-weight:700;font-size:15px;color:var(--ambra2);letter-spacing:.04em}
.t-riga{font-family:var(--label);font-weight:600;font-size:16px;line-height:1.4;color:var(--sq-testo)}
.t-voce{display:flex;flex-direction:column;gap:6px}
/* colore del cerchio del job secondo il ruolo, come in gioco */
.t-sigla[data-ruolo="tank"]{background:#5B8FD9;box-shadow:0 0 0 4px rgba(91,143,217,.28)}
.t-sigla[data-ruolo="healer"]{background:#5FB979;box-shadow:0 0 0 4px rgba(95,185,121,.28)}
.t-sigla[data-ruolo="dps"]{background:#D96B5B;box-shadow:0 0 0 4px rgba(217,107,91,.28)}
.t-sigla[data-ruolo="doh"],.t-sigla[data-ruolo="dol"]{background:#C9A55B;box-shadow:0 0 0 4px rgba(201,165,91,.28)}


.t-stile{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.t-stile li{padding:5px 10px;border-radius:6px;background:rgba(159,211,234,.12);border:1px solid rgba(159,211,234,.3);
  font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cielo)}

.t-ritratto{margin:0;align-self:stretch;min-height:300px;border-radius:10px;overflow:hidden;position:relative;
  box-shadow:0 0 0 2px rgba(242,165,74,.55),0 0 0 6px rgba(8,17,31,.6)}
.t-foto{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20% !important}
.t-foto.vuota{display:grid;place-items:center;height:100%;background:repeating-linear-gradient(135deg,rgba(159,211,234,.10) 0 12px,transparent 12px 24px);
  font-family:var(--display);font-weight:800;font-size:96px;color:rgba(238,242,248,.25)}
.t-ritratto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(8,17,31,.5));pointer-events:none}

.t-testo{margin:10px 20px 20px;padding:14px 16px;border-radius:10px;background:rgba(8,17,31,.45);
  font-family:var(--testo);font-size:16px;line-height:1.6;color:var(--sq-testo)}

@media (max-width:900px){
  .squadra .sq-titolo{white-space:normal;font-size:clamp(56px,17vw,120px)}
  .sq-griglia{grid-template-columns:minmax(0,1fr);gap:24px}
  .sq-targhe{display:none}
  .party .targa{margin:10px 0 6px}
  .membro{height:92px;grid-template-columns:minmax(0,1fr) 30% 70px;padding:10px 14px 6px 18px}
  .membro[aria-expanded="true"]{transform:translateX(6px)}
  .m-job abbr{width:38px;height:38px;font-size:11px}
  .m-job strong{font-size:30px}
}
@media (max-width:520px){
  .squadra{padding:0 16px 56px}
  .squadra .sq-titolo{margin:0 -16px}
  .membro{grid-template-columns:minmax(0,1fr) 26% 58px;column-gap:8px}
  .m-nome{font-size:22px}
  .m-titolo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-job abbr{display:none}
  .t-corpo{grid-template-columns:minmax(0,1fr)}
  .t-ritratto{order:-1;min-height:0;aspect-ratio:4/3}
  .t-testa{flex-direction:column;gap:2px}
  .t-server{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .membro,.m-foto{transition:none}
  .targa:not([hidden]){animation:none}
}