.wrap-talenti { max-width: 1440px; }
.wrap-talenti header.hero.semplice { margin-bottom: 4px; }
.wrap-talenti header.hero.semplice h1 { margin-bottom: 0; font-size: 22px; }
.wrap-talenti header.hero.semplice .bio { margin: 4px 0 0; }
.talenti-sezione {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.3px;
}
.talenti-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.talenti-comandante {
  display: flex;
  align-items: center;
  gap: 10px;
}
.talenti-comandante img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--panel-2);
}
.talenti-comandante select {
  min-height: 40px;
  min-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 15px;
}
.talenti-punti {
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
}
.talenti-punti b { color: var(--gold); font-size: 16px; }
.talenti-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.talenti-azioni button,
.nodo-azioni button {
  min-height: 36px;
  min-width: 36px;
  padding: 6px 12px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.talenti-azioni #btn-reset { font-size: 13px; }
.talenti-azioni button:disabled {
  opacity: 0.35;
  cursor: default;
}
.talenti-azioni button.attivo,
.suggerimento.attivo {
  background: var(--gold);
  color: #1a140a;
}
.suggerimenti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.suggerimento {
  max-width: 280px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.suggerimento.attivo {
  border-color: var(--gold);
  background: #2a2418;
}
.suggerimento strong { display: block; color: var(--gold); font-size: 13px; }
.suggerimento span { font-size: 12px; color: var(--muted); }

.talenti-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.alberi {
  position: relative;
  background: rgb(14, 50, 71);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: visible;
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.albero-quadrato {
  position: relative;
  width: min(100%, calc(100vh - 150px));
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: visible;
  background-image:
    repeating-conic-gradient(
      from 90deg at 50% 50%,
      rgba(170, 200, 225, 0.055) 0deg 0.35deg,
      transparent 0.35deg 15deg
    ),
    radial-gradient(circle at 50% 50%, transparent 8.3%, rgba(170, 200, 225, 0.09) 8.45%, transparent 8.7%),
    radial-gradient(circle at 50% 50%, transparent 11.4%, rgba(170, 200, 225, 0.08) 11.55%, transparent 11.8%),
    radial-gradient(circle at 50% 50%, transparent 16.8%, rgba(170, 200, 225, 0.08) 16.95%, transparent 17.2%),
    radial-gradient(circle at 50% 50%, transparent 22.6%, rgba(170, 200, 225, 0.07) 22.75%, transparent 23%),
    radial-gradient(circle at 50% 50%, transparent 28.8%, rgba(170, 200, 225, 0.07) 28.95%, transparent 29.2%),
    radial-gradient(circle at 50% 50%, transparent 33.9%, rgba(170, 200, 225, 0.07) 34.05%, transparent 34.3%),
    radial-gradient(circle at 50% 50%, transparent 38.8%, rgba(170, 200, 225, 0.06) 38.95%, transparent 39.2%),
    radial-gradient(circle at 50% 50%, transparent 43.6%, rgba(170, 200, 225, 0.06) 43.75%, transparent 44%);
}

.hub {
  position: absolute;
  width: 17%;
  height: 17%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}
.hub-esagono {
  position: absolute;
  height: 100%;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));
}
.hub-ritratto {
  position: absolute;
  height: 44%;
  width: auto;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -57%);
  clip-path: polygon(50% 5%, 93% 26%, 93% 74%, 50% 95%, 7% 74%, 7% 26%);
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8));
}
.hub-etichetta {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  width: 34%;
  left: 30%;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  line-height: 1.05;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
}
.hub-etichetta span {
  display: block;
  font-size: 8px;
  font-weight: 800;
}
.hub-etichetta.rosso {
  left: 50%;
  bottom: 76%;
  transform: translateX(-50%);
  color: #6a160c;
}
.hub-etichetta.giallo {
  bottom: 28%;
  transform: translateX(-80%);
  color: #5c4c00;
}
.hub-etichetta.blu {
  bottom: 28%;
  transform: translateX(80%);
  color: #0a4a70;
}

.albero {
  position: absolute;
  width: 50%;
  height: 50%;
  overflow: visible;
  background: none;
  border: 0;
}
.albero.rosso { top: -1%; left: 49.8%; }
.albero.giallo { top: 50%; left: 0; }
.albero.blu { top: 50%; left: 50%; }

.albero-linee {
  position: absolute;
  left: -60%;
  top: -60%;
  width: 220%;
  height: 220%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.albero-linee line {
  stroke: gray;
  stroke-width: 2.2;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}
.albero.rosso .albero-linee line.attiva { stroke: rgba(190, 50, 25, 1); opacity: 1; }
.albero.giallo .albero-linee line.attiva { stroke: rgba(183, 156, 4, 1); opacity: 1; }
.albero.blu .albero-linee line.attiva { stroke: rgba(22, 159, 227, 1); opacity: 1; }

.nodo {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  z-index: 10;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));
}
.nodo.piccolo {
  width: 3.6%;
  height: 4%;
}
.nodo.grande {
  width: 6.85%;
  height: 7.6%;
}
.nodo.vuoto {
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7)) grayscale(100%);
  opacity: 0.45;
}
.nodo.aperto {
  opacity: 1;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));
}
.nodo.selezionato { z-index: 12; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); }
.nodo-punti {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: auto;
  transform: translate(-50%, -95%);
  height: auto;
  width: auto;
  min-width: 1.4em;
  padding: 0 3px;
  color: #8a8a8a;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  z-index: 7;
  text-shadow: 0 1px 2px #000;
}
.nodo.aperto .nodo-punti { color: #8fde6a; }
.nodo.vuoto .nodo-punti { display: block; color: #7a7a7a; }

.sommario {
  background: rgba(12, 14, 18, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}
.sommario h2 { margin: 0 0 8px; font-size: 18px; color: var(--gold); }
.sommario h3 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; }
.sommario ul { margin: 0; padding: 0 0 0 16px; }
.sommario li { margin: 0 0 8px; font-size: 13px; }
.build-nota {
  margin: 8px 0 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: var(--panel-2);
  font-size: 13px;
}
.build-nota p { margin: 6px 0 0; color: var(--muted); }
.avviso { color: #d4a090; font-size: 12px; }
.dettaglio-nodo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.dettaglio-nodo h3 { margin-top: 0; color: var(--gold); text-transform: none; font-size: 15px; }
.nodo-azioni { display: flex; gap: 8px; margin-top: 8px; }

.tooltip-nodo {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  background: rgba(16, 18, 24, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  color: var(--text);
  pointer-events: none;
}
.tooltip-nodo[hidden] { display: none; }
.tooltip-nodo strong {
  display: block;
  color: var(--gold);
  font-size: 14px;
  margin: 0 0 4px;
}
.tooltip-nodo .tooltip-rank {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 6px;
}
.tooltip-nodo p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .talenti-toolbar { align-items: flex-start; }
  .talenti-punti { margin-left: 0; }
  .talenti-comandante { flex: 1; min-width: 0; }
  .talenti-comandante select { min-width: 0; width: 100%; }
  .suggerimento { max-width: none; flex: 1 1 calc(50% - 8px); }
  .talenti-layout { grid-template-columns: 1fr; }
  .sommario { position: static; max-height: none; order: 2; }
  .alberi {
    order: 1;
    min-height: 0;
    height: min(100vw, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .albero-quadrato {
    width: 760px;
    min-width: 760px;
    height: 760px;
    margin: 32px;
    flex-shrink: 0;
  }
  .nodo-punti { font-size: 11px; }
  .hub-etichetta,
  .hub-etichetta span {
    font-size: 11px;
  }
  .hub-etichetta { width: 48%; }
}