/* ── Modalita' aiuto ─────────────────────────────────────────────────────────
   Il "?" sta solo a tutto schermo; il suo posto lo sceglie js/aiuto.js, che
   prova piu' angoli e prende il primo che non tocca niente. Acceso, lo
   strumento si incornicia, tutto cio' che si puo' toccare prende un anello
   tratteggiato, e un tocco apre la scheda che spiega. Tema scuro in ottone,
   tema chiaro in azzurro di sistema come ogni cosa che si tocca. */

.tuner__aiuto { display: none; }
.tuner.is-full .tuner__aiuto {
  position: fixed; z-index: 525;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0; padding: 0; box-sizing: border-box;
  border: 1px solid rgba(194, 165, 114, 0.34); border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(194, 165, 114, 0.78);
  font-family: var(--f-display); font-size: 21px; font-weight: 500; line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--e-out), background-color 0.25s var(--e-out),
              border-color 0.25s var(--e-out), box-shadow 0.25s var(--e-out), transform 0.12s var(--e-out);
}
.tuner.is-full .tuner__aiuto span { display: block; transform: translateY(-1px); pointer-events: none; }
/* il bersaglio del dito e' sempre di 44 px, anche quando il disegno e' piu' piccolo */
.tuner.is-full .tuner__aiuto::before { content: ""; position: absolute; inset: calc((100% - 44px) / 2); border-radius: 50%; }
.tuner.is-full .tuner__aiuto[data-posto="nascosto"] { visibility: hidden; pointer-events: none; }
.tuner.is-full .tuner__aiuto:active { transform: scale(0.94); }
.tuner.is-full .tuner__aiuto:focus-visible { outline: 2px solid rgba(224, 190, 128, 0.9); outline-offset: 3px; }
@media (hover: hover) {
  .tuner.is-full:not(.is-aiuto) .tuner__aiuto:hover { color: rgba(244, 239, 230, 0.9); }
}
.tuner.is-full.is-aiuto .tuner__aiuto {
  color: #141416; background: #C2A572; border-color: #E0BE80;
  box-shadow: 0 0 0 4px rgba(194, 165, 114, 0.22), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ── Lo strato sopra lo strumento ── */
.tuner__aiutoStrato {
  position: fixed; inset: 0; z-index: 515;
  pointer-events: none;
}
.tuner__aiutoStrato[hidden] { display: none !important; }

/* la cornice: si capisce a colpo d'occhio che lo strumento e' in aiuto */
.tuner__aiutoCornice {
  position: absolute; inset: 0;
  box-shadow:
    inset 0 0 0 3px rgba(224, 190, 128, 0.85),
    inset 0 0 0 7px rgba(194, 165, 114, 0.16),
    inset 0 0 90px rgba(194, 165, 114, 0.12);
  background: rgba(8, 8, 9, 0.16);
  animation: aiuto-entra 220ms var(--e-out, ease-out) both;
}
@keyframes aiuto-entra { from { opacity: 0; } to { opacity: 1; } }

/* gli anelli di cio' che si puo' toccare */
.tuner__aiutoPunti { position: absolute; inset: 0; }
.tuner__aiutoPunti > span {
  position: absolute; box-sizing: border-box;
  border: 1.5px dashed rgba(224, 190, 128, 0.78); border-radius: 10px;
  background: rgba(194, 165, 114, 0.07);
  animation: aiuto-respiro 2.4s ease-in-out infinite;
}
.tuner__aiutoPunti > span.is-tondo { border-radius: 50%; }
.tuner__aiutoPunti > svg { position: absolute; overflow: visible; animation: aiuto-respiro 2.4s ease-in-out infinite; }
.tuner__aiutoPunti > svg :is(path, circle, rect) {
  fill: none; stroke: rgba(224, 190, 128, 0.78); stroke-width: 1.5; stroke-dasharray: 5 5;
}
.tuner__aiutoPunti > svg :is(circle, rect) { fill: rgba(194, 165, 114, 0.07); }
@keyframes aiuto-respiro { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* la voce aperta: anello pieno */
.tuner__aiutoFuoco {
  position: absolute; box-sizing: border-box;
  border: 2px solid #E0BE80; border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(194, 165, 114, 0.24), 0 0 26px rgba(224, 190, 128, 0.35);
  transition: left 0.18s var(--e-out, ease-out), top 0.18s var(--e-out, ease-out),
              width 0.18s var(--e-out, ease-out), height 0.18s var(--e-out, ease-out);
}
.tuner__aiutoFuoco.is-tondo { border-radius: 50%; }
.tuner__aiutoFuoco[hidden] { display: none !important; }

/* l'avviso d'ingresso e il suggerimento quando si tocca un punto vuoto */
.tuner__aiutoAvviso {
  position: absolute; left: 50%; top: 50%;
  width: max-content; max-width: min(340px, calc(100vw - 40px));
  box-sizing: border-box; padding: 14px 18px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(224, 190, 128, 0.6); border-radius: 16px;
  background: rgba(20, 20, 22, 0.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.95);
  text-align: center;
  animation: aiuto-entra 220ms var(--e-out, ease-out) both;
  transition: opacity 0.35s var(--e-out, ease-out);
}
.tuner__aiutoAvviso[hidden] { display: none !important; }
.tuner__aiutoAvviso.is-via { opacity: 0; }
.tuner__aiutoAvviso strong {
  display: block; margin-bottom: 4px;
  font-family: var(--f-display); font-size: 1.2rem; font-weight: 400;
  color: #E0BE80;
}
.tuner__aiutoAvviso p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: rgba(246, 242, 233, 0.86); }

/* ── La scheda che spiega ── */
.tuner__aiutoScheda {
  position: fixed; z-index: 530; left: 50%;
  display: flex; flex-direction: column;
  width: min(460px, calc(100vw - 24px)); max-height: 58vh; overflow: hidden;
  box-sizing: border-box; padding: 16px 18px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(224, 190, 128, 0.55); border-radius: 18px;
  background: #141416;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
  text-align: left;
  pointer-events: auto;
  animation: aiuto-entra 180ms var(--e-out, ease-out) both;
}
.tuner__aiutoScheda[hidden] { display: none !important; }
.tuner__aiutoScheda.is-sopra { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.tuner__aiutoScheda.is-sotto { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
/* sdraiati e bassi: di fianco, dalla parte opposta a cio' che si e' toccato */
.tuner__aiutoScheda:is(.is-destra, .is-sinistra) {
  top: 50%; bottom: auto;
  width: min(400px, 46vw); max-height: calc(100vh - 24px);
  transform: translateY(-50%);
}
.tuner__aiutoScheda.is-destra { left: auto; right: calc(env(safe-area-inset-right, 0px) + 12px); }
.tuner__aiutoScheda.is-sinistra { left: calc(env(safe-area-inset-left, 0px) + 12px); }
@supports (height: 100dvh) {
  .tuner__aiutoScheda { max-height: 58dvh; }
  .tuner__aiutoScheda:is(.is-destra, .is-sinistra) { max-height: calc(100dvh - 24px); }
}

.tuner__aiutoCorpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-right: -8px; padding-right: 8px;
}
.tuner__aiutoCorpo > :last-child { margin-bottom: 4px; }
.tuner__aiutoTesta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tuner__aiutoSegno {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #C2A572; color: #141416;
  font-family: var(--f-display); font-size: 15px; font-weight: 600; line-height: 1;
}
.tuner__aiutoTesta strong {
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 400; line-height: 1.2;
  color: var(--avorio, #F6F2E9);
}
.tuner__aiutoCosa { margin: 0 0 12px; font-size: 0.93rem; line-height: 1.55; color: rgba(246, 242, 233, 0.86); }
.tuner__aiutoEti {
  margin: 0 0 4px;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #C2A572;
}
.tuner__aiutoUso { margin: 0 0 12px; padding: 0 0 0 1.1em; list-style: disc outside; }
.tuner__aiutoUso li { margin: 0 0 4px; font-size: 0.88rem; line-height: 1.5; color: rgba(246, 242, 233, 0.8); }
.tuner__aiutoUso li::marker { color: #C2A572; }
.tuner__aiutoDove { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: rgba(246, 242, 233, 0.8); }
.tuner__aiutoAzioni {
  flex: none; display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(194, 165, 114, 0.16);
}
.tuner__aiutoBtn {
  padding: 8px 16px; min-height: 36px;
  border: 1px solid rgba(194, 165, 114, 0.56); border-radius: 999px;
  background: transparent; color: #C2A572;
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.tuner__aiutoBtn:active { background-color: rgba(194, 165, 114, 0.3); }
.tuner__aiutoBtn--esci { background: #C2A572; border-color: #C2A572; color: #141416; }
.tuner__aiutoBtn--esci:active { background-color: #E0BE80; }
.tuner__aiutoBtn:focus-visible { outline: 2px solid rgba(224, 190, 128, 0.9); outline-offset: 2px; }

/* ── Tema chiaro: azzurro di sistema per cio' che si tocca ── */
.tuner.is-full.is-chiaro .tuner__aiuto {
  color: #3A3A3C; background: #FFFFFF; border-color: rgba(60, 60, 67, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.tuner.is-full.is-chiaro.is-aiuto .tuner__aiuto {
  color: #FFFFFF; background: #007AFF; border-color: #007AFF;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2), 0 2px 8px rgba(0, 122, 255, 0.28);
}
.tuner.is-full.is-chiaro .tuner__aiuto:focus-visible { outline-color: #007AFF; }
.tuner.is-chiaro .tuner__aiutoCornice {
  box-shadow:
    inset 0 0 0 3px rgba(0, 122, 255, 0.85),
    inset 0 0 0 7px rgba(0, 122, 255, 0.12),
    inset 0 0 90px rgba(0, 122, 255, 0.08);
  background: rgba(242, 242, 247, 0.12);
}
.tuner.is-chiaro .tuner__aiutoPunti > span { border-color: rgba(0, 122, 255, 0.7); background: rgba(0, 122, 255, 0.06); }
.tuner.is-chiaro .tuner__aiutoPunti > svg :is(path, circle, rect) { stroke: rgba(0, 122, 255, 0.72); }
.tuner.is-chiaro .tuner__aiutoPunti > svg :is(circle, rect) { fill: rgba(0, 122, 255, 0.06); }
.tuner.is-chiaro .tuner__aiutoFuoco {
  border-color: #007AFF;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18), 0 0 22px rgba(0, 122, 255, 0.25);
}
.tuner.is-chiaro .tuner__aiutoAvviso {
  background: rgba(255, 255, 255, 0.96); border-color: rgba(60, 60, 67, 0.2);
  box-shadow: 0 24px 60px -24px rgba(28, 28, 30, 0.45);
}
.tuner.is-chiaro .tuner__aiutoAvviso strong { color: #007AFF; }
.tuner.is-chiaro .tuner__aiutoAvviso p { color: #3A3A3C; }
.tuner.is-chiaro .tuner__aiutoScheda {
  background: #FFFFFF; border-color: rgba(60, 60, 67, 0.2);
  box-shadow: 0 30px 70px -26px rgba(28, 28, 30, 0.45), 0 0 0 1px rgba(60, 60, 67, 0.06);
}
.tuner.is-chiaro .tuner__aiutoSegno { background: #007AFF; color: #FFFFFF; }
.tuner.is-chiaro .tuner__aiutoTesta strong { color: #1C1C1E; }
.tuner.is-chiaro :is(.tuner__aiutoCosa, .tuner__aiutoUso li, .tuner__aiutoDove) { color: #3A3A3C; }
.tuner.is-chiaro .tuner__aiutoEti { color: #6E6E73; }
.tuner.is-chiaro .tuner__aiutoAzioni { border-top-color: rgba(60, 60, 67, 0.12); }
.tuner.is-chiaro .tuner__aiutoUso li::marker { color: #007AFF; }
.tuner.is-chiaro .tuner__aiutoBtn { border-color: rgba(0, 122, 255, 0.5); color: #007AFF; }
.tuner.is-chiaro .tuner__aiutoBtn:active { background-color: rgba(0, 122, 255, 0.12); }
.tuner.is-chiaro .tuner__aiutoBtn--esci { background: #007AFF; border-color: #007AFF; color: #FFFFFF; }
.tuner.is-chiaro .tuner__aiutoBtn--esci:active { background-color: #0062CC; }

/* schermi bassi: la scheda si stringe */
@media (max-height: 560px) {
  .tuner__aiutoScheda { padding: 12px 14px 10px; }
  .tuner__aiutoTesta { margin-bottom: 6px; }
  .tuner__aiutoTesta strong { font-size: 1.12rem; }
  .tuner__aiutoCosa { margin-bottom: 8px; font-size: 0.86rem; line-height: 1.45; }
  .tuner__aiutoUso { margin-bottom: 8px; }
  .tuner__aiutoUso li, .tuner__aiutoDove { font-size: 0.82rem; line-height: 1.42; }
  .tuner__aiutoDove { margin-bottom: 8px; }
  .tuner__aiutoBtn { min-height: 32px; padding: 6px 14px; }
}

/* risparmio energetico e movimento ridotto: niente respiro */
.tuner.is-eco :is(.tuner__aiutoPunti > span, .tuner__aiutoPunti > svg) { animation: none; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  :is(.tuner__aiutoPunti > span, .tuner__aiutoPunti > svg) { animation: none; opacity: 0.9; }
  :is(.tuner__aiutoCornice, .tuner__aiutoAvviso, .tuner__aiutoScheda) { animation: none; }
  .tuner__aiutoFuoco { transition: none; }
}