:root {
  --sfondo: #f7f5f0;
  --carta: #ffffff;
  --testo: #1d1f24;
  --tenue: #5b606b;
  --bordo: #dcd8cf;
  --accento: #1f5f8b;
  --accento-forte: #174a6d;
  --accento-tenue: #e3edf5;
  --segno: #a8431a;
  --avviso: #fff4d6;
  --avviso-bordo: #d9a520;
  --ombra: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 5%);
  --raggio: 14px;
  --sinistra: #c0392b;
  --destra: #1f5fae;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #14161a;
    --carta: #1d2026;
    --testo: #eceae5;
    --tenue: #a5aab5;
    --bordo: #33373f;
    --accento: #7fb6de;
    --accento-forte: #a6cdea;
    --accento-tenue: #22323f;
    --segno: #f0915f;
    --avviso: #3a3120;
    --avviso-bordo: #b8891c;
    --ombra: none;
    --sinistra: #f07a6c;
    --destra: #7fb0f0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accento); }
a:hover { color: var(--accento-forte); }

:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
  border-radius: 6px;
}

.salta {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--carta);
  padding: 8px 12px;
  z-index: 10;
}
.salta:focus { left: 8px; }

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.testata, main, .piede {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

.testata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--testo);
  text-decoration: none;
}
.marchio svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accento);
  stroke-width: 1.8;
}
.marchio svg path { fill: var(--segno); stroke: none; }

.collegamento-metodo { font-size: 0.95rem; }

main { padding-bottom: 48px; outline: none; }

.schermata { padding-top: 12px; }

.occhiello {
  color: var(--tenue);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

h1, .titolo-grande {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 16px;
}

h2, h3, h4 { line-height: 1.25; }

.attacco { font-size: 1.15rem; margin: 0 0 24px; }

.promesse {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
}
.promesse li {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px 16px;
}

.bottone {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--accento);
  background: transparent;
  color: var(--accento);
  cursor: pointer;
  text-decoration: none;
}
.bottone.primario {
  background: var(--accento);
  color: var(--carta);
}
.bottone.primario:hover { background: var(--accento-forte); color: var(--carta); }

.bottone-testo {
  font: inherit;
  background: none;
  border: none;
  color: var(--accento);
  cursor: pointer;
  padding: 10px 4px;
}
.bottone-testo:disabled { color: var(--tenue); cursor: default; opacity: 0.5; }

.nota { color: var(--tenue); font-size: 0.93rem; }

.avanzamento {
  height: 6px;
  background: var(--bordo);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 18px;
}
#barra {
  height: 100%;
  width: 0;
  background: var(--accento);
  transition: width 0.25s ease;
}

.affermazione {
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  font-weight: 650;
  margin: 0 0 28px;
  min-height: 3.2em;
  outline: none;
}

.scala { border: 0; margin: 0; padding: 0; }

.scelte { display: grid; gap: 10px; }

.scelta {
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--raggio);
  border: 1.5px solid var(--bordo);
  background: var(--carta);
  color: var(--testo);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.scelta:hover { border-color: var(--accento); }
.scelta[aria-pressed="true"] {
  border-color: var(--accento);
  background: var(--accento-tenue);
  font-weight: 600;
}
.scelta .tasto {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--bordo);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  color: var(--tenue);
}

.navigazione {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.cursore { margin: 24px 0; }
.cursore input { width: 100%; accent-color: var(--accento); height: 32px; }
.estremi {
  display: flex;
  justify-content: space-between;
  color: var(--tenue);
  font-size: 0.9rem;
}
.valore-cursore {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 8px 0 0;
}

.titolo-risultato { font-size: 2rem; margin: 0 0 20px; outline: none; }

.avviso {
  background: var(--avviso);
  border-left: 4px solid var(--avviso-bordo);
  padding: 12px 16px;
  border-radius: 8px;
}

.scheda {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--ombra);
}
.scheda h3 { margin: 0 0 4px; font-size: 1.3rem; }
.scheda > .nota:first-of-type { margin-top: 0; }

.assi { display: grid; gap: 18px; margin: 16px 0 8px; }
.asse-nome { font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; }
.asse-nome span { color: var(--tenue); font-weight: 400; }
.asse-linea {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accento-tenue), var(--bordo), var(--accento-tenue));
}
.asse-punto {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--segno);
  border: 3px solid var(--carta);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--segno);
}
.asse-poli {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--tenue);
  margin-top: 4px;
  gap: 12px;
}
.asse-poli span:last-child { text-align: right; }

.classifica { padding: 0; margin: 14px 0 0; list-style: none; counter-reset: posto; }
.classifica > li {
  counter-increment: posto;
  display: grid;
  grid-template-columns: 2em 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--bordo);
}
.classifica > li:first-child { border-top: 0; }
.classifica > li::before {
  content: counter(posto) ".";
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.classifica .nome { font-weight: 600; }
.classifica .percento {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accento);
}
.classifica .spiega {
  grid-column: 2 / 4;
  font-size: 0.9rem;
  color: var(--tenue);
}
.etichetta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--bordo);
  border-radius: 99px;
  padding: 0 8px;
  margin-left: 6px;
  color: var(--tenue);
  vertical-align: 2px;
}
.classifica.compatta > li { padding: 7px 0; }

.linea { margin: 18px 0 6px; }
.linea-sigle { position: relative; isolation: isolate; }
.sigla {
  position: absolute;
  bottom: 0;
  display: grid;
  place-items: center;
  height: 38px;
  min-width: 38px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--bordo);
  background: #fff;
}
.sigla img { display: block; }
.gamba {
  position: absolute;
  top: 100%;
  width: 1px;
  margin-left: -1px;
  background: var(--tenue);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1; /* dietro i simboli delle righe più basse */
}
.sigla.prima { border: 2px solid var(--accento); box-shadow: 0 0 0 2px var(--accento-tenue); }
.linea-asse {
  position: relative;
  margin-top: 8px;
  border-radius: 99px;
  height: 6px;
  background: linear-gradient(90deg, var(--sinistra), var(--bordo), var(--destra));
}
.linea-asse .punto {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tenue);
  border: 1.5px solid var(--carta);
  transform: translate(-50%, -50%);
}
.linea-numeri {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--tenue);
  margin: 4px -3px 0;
  font-variant-numeric: tabular-nums;
}
.linea-tu { position: relative; height: 48px; }
.segno-tu {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  line-height: 1.2;
}
.segno-tu.risposte { top: 0; color: var(--testo); }
.segno-tu.ti-vedi { top: 24px; color: var(--tenue); }
.linea-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; }
.linea-legenda .tu { color: var(--testo); font-weight: 600; }
.linea-legenda .ti-vedi { color: var(--tenue); font-weight: 600; }
.linea-poli { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; margin-top: 2px; }
.linea-poli span:first-child { color: var(--sinistra); }
.linea-poli span:last-child { color: var(--destra); }
.collocazione { margin: 12px 0 0; }

.confronta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.confronta label { font-weight: 600; }
.confronta select {
  font: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--bordo);
  background: var(--carta);
  color: var(--testo);
}
.asse-simbolo {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--bordo);
  background: #fff;
}
.asse-simbolo img { display: block; max-width: 100%; max-height: 100%; }
.asse-nome .partito-valore { margin-left: 8px; }

.piano-cornice { display: flex; gap: 6px; margin: 16px auto 0; max-width: 480px; }
.piano-asse-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--tenue);
}
.piano {
  position: relative;
  flex: 1;
  aspect-ratio: 1;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background:
    linear-gradient(var(--bordo), var(--bordo)) center / 1px 100% no-repeat,
    linear-gradient(var(--bordo), var(--bordo)) center / 100% 1px no-repeat;
  isolation: isolate;
}
.piano-asse-x {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--tenue);
  margin: 4px auto 0;
  padding-left: 22px;
  max-width: 480px;
}
.piano .punto-partito {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tenue);
  transform: translate(-50%, -50%);
}
.piano .simbolo {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--bordo);
  background: #fff;
}
.piano .simbolo img { display: block; max-width: 100%; max-height: 100%; }
.piano .filo {
  position: absolute;
  height: 1px;
  background: var(--tenue);
  opacity: 0.6;
  transform-origin: 0 50%;
  z-index: -1;
}
.piano .tu {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--testo);
  z-index: 2;
  text-shadow: 0 0 3px var(--carta), 0 0 3px var(--carta);
}

.dettagli { margin-top: 12px; }
.dettagli summary { cursor: pointer; color: var(--accento); padding: 6px 0; }

.due-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 28px;
}
.due-colonne h4 { margin: 16px 0 0; }
.fonte { font-size: 0.82rem; color: var(--tenue); margin: 6px 0 0; }

.riquadro {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--accento-tenue);
}
.riquadro h4 { margin: 0 0 4px; }
.riquadro p { margin: 0; }

.azioni-finali { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.piede {
  border-top: 1px solid var(--bordo);
  color: var(--tenue);
  font-size: 0.85rem;
  padding-top: 16px;
  padding-bottom: 32px;
}

.pagina h2 { margin-top: 36px; }
.pagina table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.pagina th, .pagina td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella-scorre { overflow-x: auto; }
.citazione { font-size: 0.9rem; color: var(--tenue); padding-left: 12px; border-left: 3px solid var(--bordo); }

@media (prefers-reduced-motion: reduce) {
  #barra { transition: none; }
}