/* =============================================================================
   V2-SHELL.CSS — Porta la direzione "Sentinel" su TUTTE le pagine interne
   (blog, strumenti, giochi, articoli) senza riscriverne i fogli di stile.

   Come funziona: i CSS dei tool (solitaire, threat-hunter, auditor, cardgame,
   securecrt-moba) sono scritti quasi interamente con i token di style.css —
   fino a 196 riferimenti a var(--...) e pochissimi colori fissi. Basta quindi
   RIDEFINIRE i token e l'intero sito interno cambia pelle, senza toccare una
   riga di quei file.

   Si carica DOPO style.css, e solo nelle pagine *-v2.html: il sito attuale
   non lo vede nemmeno.

   La modifica che pesa di piu' e' --grad: era un gradiente a tre colori
   (teal -> indigo -> magenta) usato su titoli di sezione, bottoni primari e
   sottolineature della nav. Tre accenti in competizione erano la causa del
   "visivamente caotico". Qui diventa una sola tinta.
   ========================================================================== */

/* La v2 e' a tema unico scuro: se in memoria e' rimasta la preferenza chiara
   del sito attuale, questi token la neutralizzano invece di mostrare una
   pagina mezza rotta. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --bg:        #05070b;
  --bg-soft:   #0e131c;
  --bg-soft-2: #131a25;
  --bg-glass:  rgba(14, 19, 28, .72);
  --line:      #1c2634;
  --line-2:    #2c3a4d;
  --text:      #e9f0f8;
  --muted:     #8b9bb0;
  --muted-2:   #5a6a7d;
  --accent:    #2dd4bf;
  --accent-2:  #5eead4;   /* era indigo: ora resta nella stessa famiglia */
  --accent-3:  #7dd3fc;   /* era magenta: ora un azzurro di supporto */
  --accent-ink:#04211d;
  --radius:    15px;
  --radius-sm: 11px;
  --shadow:    0 30px 80px rgba(0, 0, 0, .7);
  --shadow-sm: 0 10px 32px rgba(0, 0, 0, .5);
  /* Una sola tinta, non piu' tre in competizione. */
  --grad:      linear-gradient(100deg, #5eead4, #2dd4bf 55%, #14b8a6);
  --grad-soft: linear-gradient(100deg, rgba(45, 212, 191, .16), rgba(94, 234, 212, .10));
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------- STRISCIA DI CONFRONTO */
.v2bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.v2bar b { color: var(--accent); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.v2bar a {
  margin-left: auto; color: var(--text); text-decoration: none;
  border: 1px solid var(--line-2); padding: 6px 13px; border-radius: 8px;
  transition: border-color .2s, color .2s;
}
.v2bar a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------- NAV
   Barra di vetro: stesso linguaggio della home v2. */
.nav {
  background: rgba(5, 7, 11, .72) !important;
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nav__inner { height: 60px; }
.brand { font-weight: 700; letter-spacing: -.015em; }
.brand__logo { height: 26px; }
.nav__links a { font-weight: 500; }
/* La sottolineatura non e' piu' un gradiente tricolore. */
.nav__links a::after { background: var(--accent); }
.icon-btn {
  border-radius: 9px !important;
  border-color: var(--line-2) !important;
}
.icon-btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; }

/* --------------------------------------------------------------- SEZIONI
   Piu' respiro: era la seconda cosa che non convinceva, dopo i colori. */
.section { padding: 104px 0; }
.section--alt {
  background: linear-gradient(180deg, transparent, var(--bg-soft) 10%, var(--bg-soft) 90%, transparent);
}

/* Titolo di sezione: il trattino a gradiente diventa un occhiello monospaziato
   coerente con la home v2. */
.sec-title::before { width: 22px; height: 2px; background: var(--accent); }
.sec-title span {
  letter-spacing: -.03em;
}

/* ---------------------------------------------------------------- CARD */
.card {
  background: linear-gradient(180deg, var(--bg-soft), #080b11);
  border-radius: var(--radius);
  transition: border-color .28s, transform .28s;
}
.card:hover { border-color: rgba(45, 212, 191, .45); transform: translateY(-4px); }

/* --------------------------------------------------------------- BOTTONI */
.btn { border-radius: 11px; }
.btn--primary { color: var(--accent-ink); box-shadow: 0 12px 32px -10px rgba(45, 212, 191, .85); }
.btn--primary:hover { box-shadow: 0 18px 44px -12px rgba(45, 212, 191, .95); }
.btn--ghost:hover { box-shadow: 0 6px 24px rgba(45, 212, 191, .18); }

/* ------------------------------------------------------------------ TAG */
.tag, .taglist li {
  border-radius: 7px;
  font-family: var(--mono);
  font-size: .78rem;
}

/* --------------------------------------------------------------- FOOTER */
.footer { border-top: 1px solid var(--line); background: transparent; }

/* Il terminale della home: qui non c'e', ma alcune pagine interne riusano
   .terminal per i blocchi di codice. Bordo singolo invece del gradiente. */
.terminal::before { background: none !important; }
.terminal { border: 1px solid var(--line-2); }

/* ------------------------------------------------- ZONE DI THREAT HUNTER
   I colori delle zone stanno in threat-hunter.js e sono scelti per essere
   DISTINGUIBILI fra loro, non per stare in una palette: sul fondo chiaro del
   sito attuale funzionano, su questo scuro gridano. Non li cambio (li usa
   anche il sito attuale e il gioco dipende dal distinguerli): li smorzo verso
   il fondo, così restano separabili a colpo d'occhio ma smettono di urlare.
   Se color-mix non è supportato la riga viene ignorata e resta il colore
   pieno — il gioco resta comunque giocabile. */
.th-cell { background: color-mix(in srgb, var(--th-zone) 64%, #0a1017); }
.th-cell:hover { filter: brightness(1.3); }

@media (max-width: 900px) {
  .section { padding: 74px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .btn { transition: none !important; }
}