/* ==========================================================================
   Decks AI — grafica ispirata all'arena: blu reale, oro, cornici per rarità.
   Sfondi: pietra (CC0) e cielo notturno (pubblico dominio) da Wikimedia.
   ========================================================================== */

:root {
  --notte: #060b1c;
  --blu: #0b1738;
  --blu-2: #112050;
  --blu-3: #172a63;
  --oro: #f5c453;
  --oro-scuro: #b8862b;
  --oro-chiaro: #ffe9a8;
  --crema: #f6efdd;
  --grigio: #9aa8c4;
  --linea: rgba(245, 196, 83, 0.22);
  --linea-forte: rgba(245, 196, 83, 0.5);
  --elisir: #b262ff;
  --elisir-chiaro: #dcc2ff;
  --comune: #b9c4d4;
  --rara: #ffb347;
  --epica: #c084fc;
  --leggendaria: #ffd166;
  --campione: #ff6ad5;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --raggio: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--crema);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--notte);
  background-image:
    radial-gradient(1100px 520px at 78% -12%, rgba(37, 83, 190, 0.55), transparent 62%),
    radial-gradient(820px 460px at 8% 0%, rgba(178, 98, 255, 0.24), transparent 60%),
    radial-gradient(700px 500px at 50% 108%, rgba(245, 196, 83, 0.14), transparent 65%),
    linear-gradient(180deg, #0a1430 0%, #060b1c 42%, #040814 100%);
  background-attachment: fixed;
}

/* Cielo stellato in cima, pietra in fondo: due texture vere, molto velate. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}
body::before {
  background-image: url("sfondo/cielo.jpg");
  background-position: center top;
  opacity: 0.5;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
}
body::after {
  background-image: url("sfondo/pietra.jpg");
  background-position: center bottom;
  opacity: 0.1;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(0deg, #000 0%, transparent 52%);
}

.contenitore { width: min(1120px, 100% - 40px); margin-inline: auto; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ testata */
.testata {
  position: relative;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--oro), transparent) 1;
  background: linear-gradient(180deg, rgba(9, 18, 44, 0.92), rgba(6, 11, 28, 0.6));
  backdrop-filter: blur(10px);
}
.testata-interno { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--crema);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.marchio span {
  background: linear-gradient(180deg, #fff3c4, var(--oro) 55%, var(--oro-scuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marchio-cresta {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.marchio-nota {
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--linea);
  color: var(--grigio);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

main { padding: clamp(30px, 5vw, 56px) 0 44px; }

.occhiello {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
}

/* -------------------------------------------------------------------- eroe */
.invito { position: relative; max-width: 780px; }
.invito h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.55);
}
.invito h1 em {
  font-style: italic;
  background: linear-gradient(180deg, #fff6d6, var(--oro) 48%, #c98f2a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.invito-testo { margin: 0 0 26px; max-width: 62ch; color: #c8d3ea; font-size: 1.04rem; }

.cerca { display: flex; flex-wrap: wrap; gap: 10px; }
.cerca input {
  flex: 1 1 240px;
  padding: 15px 18px;
  border: 1px solid var(--linea-forte);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 25, 60, 0.95), rgba(7, 14, 34, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 22px rgba(0, 0, 0, 0.5);
  color: var(--crema);
  font-family: var(--mono);
  font-size: 1rem;
}
.cerca input::placeholder { color: #6d7d9e; }
.cerca input:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--oro), 0 0 26px -6px rgba(245, 196, 83, 0.7);
}
.cerca button {
  padding: 15px 24px;
  border: 1px solid #8a6417;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe9a8 0%, var(--oro) 42%, #d9a02f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 0 -2px #6b4c11, 0 18px 30px -18px rgba(245, 196, 83, 0.9);
  color: #2b1c00;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.cerca button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 7px 0 -2px #6b4c11, 0 22px 34px -18px rgba(245, 196, 83, 1); }
.cerca button:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 -2px #6b4c11; }

.aiuto { margin: 12px 0 0; color: var(--grigio); font-size: 0.82rem; }
.aiuto-link { color: var(--oro-chiaro); text-decoration: underline; }

/* ----------------------------------------------------------------- avvisi */
.avviso,
.anteprima-avviso {
  margin: 26px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 107, 129, 0.45);
  border-left: 3px solid rgba(255, 107, 129, 0.8);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(120, 26, 44, 0.5), rgba(60, 12, 26, 0.35));
  color: #ffd0d8;
  font-size: 0.92rem;
}
.avviso--ok {
  border-color: rgba(102, 230, 211, 0.45);
  border-left-color: var(--oro);
  background: linear-gradient(90deg, rgba(18, 60, 66, 0.5), rgba(9, 24, 34, 0.35));
  color: #c9f5ee;
}
.avviso-link { display: inline-block; margin-left: 8px; color: var(--oro); font-weight: 700; }
.anteprima-avviso {
  border-color: rgba(245, 196, 83, 0.4);
  border-left-color: var(--oro);
  background: linear-gradient(90deg, rgba(60, 44, 10, 0.55), rgba(19, 16, 33, 0.4));
  color: #f7e2b4;
}
.anteprima-avviso code { color: var(--oro-chiaro); }

/* ---------------------------------------------------------------- giocatore */
.giocatore {
  position: relative;
  margin: 40px 0 24px;
  padding: 22px 26px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background:
    radial-gradient(700px 200px at 0% 0%, rgba(178, 98, 255, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(17, 32, 80, 0.9), rgba(8, 16, 40, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -40px #000;
  overflow: hidden;
}
.giocatore::after {
  content: "";
  position: absolute;
  right: -30px; top: -40px;
  width: 200px; height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c453' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M3 17l2-9 4 4 3-7 3 7 4-4 2 9z'/%3E%3Cpath d='M3 17h18'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.12;
  transform: rotate(-8deg);
}
.giocatore h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.65rem; letter-spacing: 0.01em; }
.giocatore .tag { color: var(--oro); font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.04em; }
.dati { margin: 0; color: #b9c6e2; font-size: 0.9rem; font-family: var(--mono); letter-spacing: 0.02em; }

/* ------------------------------------------------------------------- mazzi */
.mazzi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 22px;
}

.mazzo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--linea);
  border-radius: 20px;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(37, 83, 190, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(20, 38, 92, 0.95), rgba(9, 18, 44, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -30px 60px -40px rgba(0, 0, 0, 0.9), 0 26px 50px -34px #000;
}
.mazzo::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(245, 196, 83, 0.16);
  border-radius: 15px;
  pointer-events: none;
}
.mazzo-testa { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.mazzo-testa h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.mazzo-elisir {
  margin: 0;
  text-align: right;
  color: #9fb0d2;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mazzo-elisir span {
  display: block;
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--elisir-chiaro);
  text-shadow: 0 0 18px rgba(178, 98, 255, 0.75), 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------- carte nei mazzi */
.carte { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }

.carta {
  position: relative;
  display: grid;
  grid-template-columns: 46px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 42, 98, 0.85), rgba(10, 20, 46, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 140ms ease, transform 140ms ease;
}
.carta:hover { border-color: var(--linea-forte); transform: translateX(2px); }
.carta-foto {
  display: grid;
  place-items: center;
  width: 46px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #1d356f, #0d1a3d);
  border: 1px solid rgba(245, 196, 83, 0.25);
}
.carta-foto img { width: 100%; height: 100%; object-fit: contain; }

/* Goccia di elisir */
.carta-elisir {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #e9d4ff, var(--elisir) 55%, #6c2bb8);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 12px -2px rgba(178, 98, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  color: #1a0730;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 800;
}
.carta-nome { font-size: 0.94rem; letter-spacing: 0.01em; }
.carta-livello { color: #a9b8d6; font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; }

/* Livello in stile carta: badge in basso */
.carta-livello::before {
  content: "★";
  margin-right: 4px;
  color: var(--oro);
  font-size: 0.62em;
}

.mazzo-perche { margin: 0; color: #a9b8d6; font-size: 0.86rem; }

.apri {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid #8a6417;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe9a8, var(--oro) 45%, #d9a02f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 0 -2px #6b4c11, 0 20px 30px -20px rgba(245, 196, 83, 0.9);
  color: #2b1c00;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.apri:hover { transform: translateY(-1px); }
.apri:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- catalogo */
/* --------------------------------------------------------- liste meta */
.meta-sezione { margin-top: 48px; }
.meta-testa h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.9rem;
  letter-spacing: 0.01em;
}
.meta-nota { max-width: 62ch; margin: 0; color: #a9b8d6; font-size: 0.88rem; line-height: 1.6; }
.meta-lista { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 0; }
.meta-voce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nome conteggio" "manca manca";
  gap: 2px 12px;
  padding: 11px 14px;
  border: 1px solid rgba(245, 196, 83, 0.14);
  border-left: 3px solid #33456f;
  border-radius: 10px;
  background: rgba(6, 12, 30, 0.45);
}
.meta-nome { grid-area: nome; color: var(--crema); font-weight: 700; font-size: 0.92rem; }
.meta-conteggio {
  grid-area: conteggio;
  color: #9fb0d2;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.meta-manca { grid-area: manca; color: #8d9dbe; font-size: 0.78rem; line-height: 1.45; }
.meta-voce.is-quasi { border-left-color: var(--oro); }
.meta-voce.is-quasi .meta-conteggio { color: var(--oro-chiaro); }
.meta-voce.is-pronta { border-left-color: #b6f06a; }
.meta-voce.is-pronta .meta-conteggio { color: #d6ffa6; }

.catalogo-sezione { margin-top: 48px; }
.catalogo-testa { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.catalogo-testa h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.catalogo-conteggio { margin: 0; max-width: 64ch; color: #a9b8d6; font-size: 0.9rem; }
.catalogo-conteggio b { color: var(--oro); }

.catalogo-filtri { display: flex; gap: 8px; }
.filtro-carte {
  padding: 9px 16px;
  border: 1px solid var(--linea-forte);
  border-radius: 999px;
  background: rgba(10, 20, 46, 0.7);
  color: #b9c6e2;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 150ms ease;
}
.filtro-carte span { opacity: 0.65; font-family: var(--mono); font-size: 0.74rem; }
.filtro-carte:hover { color: var(--crema); border-color: var(--oro); }
.filtro-carte.is-attivo {
  background: linear-gradient(180deg, #ffe9a8, var(--oro) 48%, #d9a02f);
  border-color: #8a6417;
  color: #2b1c00;
  font-weight: 700;
  box-shadow: 0 5px 0 -2px #6b4c11;
}

.catalogo {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
}
.catalogo-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 7px 9px;
  border: 1px solid rgba(150, 170, 210, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(19, 36, 84, 0.9), rgba(8, 16, 38, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.catalogo-carta.is-nascosta { display: none; }

/* Cornice per rarità */
.catalogo-carta[data-rarita="Rara"] { border-color: rgba(255, 179, 71, 0.55); }
.catalogo-carta[data-rarita="Epica"] { border-color: rgba(192, 132, 252, 0.6); }
.catalogo-carta[data-rarita="Leggendaria"] { border-color: rgba(255, 209, 102, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px -10px rgba(255, 209, 102, 0.8); }
.catalogo-carta[data-rarita="Campione"] { border-color: rgba(255, 106, 213, 0.7); }

.catalogo-carta.is-mia {
  background:
    radial-gradient(120px 90px at 50% 0%, rgba(245, 196, 83, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(30, 52, 110, 0.95), rgba(11, 22, 52, 0.95));
  border-color: var(--linea-forte);
}
.catalogo-carta.is-mia:hover {
  transform: translateY(-3px);
  border-color: var(--oro);
  box-shadow: 0 0 0 1px rgba(245, 196, 83, 0.6), 0 22px 34px -22px rgba(245, 196, 83, 0.9);
}

.catalogo-foto {
  position: relative;
  display: block;
  border-radius: 9px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(120, 160, 255, 0.22), rgba(8, 16, 38, 0.9));
  aspect-ratio: 110 / 132;
}
.catalogo-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.catalogo-carta.is-mancante .catalogo-foto img { filter: grayscale(1) brightness(0.62); opacity: 0.8; }
.catalogo-carta.is-mancante { opacity: 0.85; }

.catalogo-costo {
  position: absolute;
  top: 4px; left: 4px;
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #e9d4ff, var(--elisir) 55%, #6c2bb8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  color: #1a0730;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
}
.catalogo-lucchetto {
  position: absolute;
  right: 4px; bottom: 4px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(4, 8, 20, 0.78);
  border: 1px solid rgba(170, 190, 225, 0.35);
  font-size: 0.55rem;
  opacity: 0.9;
}
.catalogo-nome { font-size: 0.74rem; line-height: 1.22; }
.catalogo-stato { color: #8fa0c2; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.02em; }
.catalogo-carta.is-mia .catalogo-stato { color: var(--oro); }

/* -------------------------------------------------------------------- nota */
.nota {
  margin-top: 42px;
  padding: 24px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: linear-gradient(180deg, rgba(17, 32, 80, 0.85), rgba(8, 16, 40, 0.9));
}
.nota h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.15rem; }
.nota p { margin: 0; max-width: 80ch; color: #a9b8d6; font-size: 0.9rem; }

/* ------------------------------------------------------------------- piede */
.piede {
  margin-top: 10px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--oro), transparent) 1;
  padding: 22px 0 40px;
  background: linear-gradient(180deg, rgba(4, 8, 20, 0.2), rgba(4, 8, 20, 0.75));
}
.piede p { margin: 0 0 6px; color: #7f8dab; font-size: 0.78rem; }
.piede p:last-child { margin-bottom: 0; }
.piede a { color: var(--oro-chiaro); }

/* ----------------------------------------------------------- configurazione */
.pannello-setup {
  margin-top: 26px;
  padding: 26px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: linear-gradient(180deg, rgba(17, 32, 80, 0.9), rgba(8, 16, 40, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -40px #000;
}
.modulo { display: flex; flex-direction: column; gap: 10px; }
.modulo label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.modulo textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--linea-forte);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 20, 46, 0.95), rgba(6, 12, 30, 0.95));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.5);
  color: var(--crema);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  resize: vertical;
}
.modulo textarea:focus { outline: none; border-color: var(--oro); box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--oro); }
.modulo-azioni { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.modulo-azioni button {
  padding: 13px 22px;
  border: 1px solid #8a6417;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe9a8, var(--oro) 45%, #d9a02f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 0 -2px #6b4c11;
  color: #2b1c00;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}
.modulo-azioni button:hover { transform: translateY(-1px); }
.link-secondario { color: #b9c6e2; font-size: 0.88rem; }

/* ------------------------------------------------------ verifica hosting */
.verifica-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.verifica-voce {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(245, 196, 83, 0.16);
  border-left: 3px solid #7f8dab;
  border-radius: 10px;
  background: rgba(6, 12, 30, 0.5);
}
.verifica-voce b { font-size: 0.9rem; color: var(--crema); }
.verifica-voce span { color: #9fb0d2; font-size: 0.8rem; line-height: 1.45; }
.verifica-voce.is-ok { border-left-color: #b6f06a; }
.verifica-voce.is-ok b { color: #d6ffa6; }
.verifica-voce.is-ko { border-left-color: #ff5c47; }
.verifica-voce.is-ko b { color: #ffb4a8; }
.verifica-voce.is-nota { border-left-color: var(--oro); }
.verifica-ip {
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 196, 83, 0.3);
  border-radius: 10px;
  background: rgba(245, 196, 83, 0.07);
  color: #dbe4f6;
  font-size: 0.86rem;
  line-height: 1.55;
}
.verifica-ip b { color: var(--oro-chiaro); font-family: var(--mono); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 620px) {
  .testata-interno { flex-wrap: wrap; gap: 8px; }
  .marchio-nota { padding-left: 0; border-left: 0; }
  .mazzo { padding: 16px; }
  .carta { grid-template-columns: 42px 24px minmax(0, 1fr); row-gap: 2px; }
  .carta-livello { grid-column: 3; }
  .catalogo { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
  .mazzo-testa h3 { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Accento di rarità anche sulle carte dei mazzi */
.carta[data-rarita="Rare"] .carta-foto { border-color: rgba(255, 179, 71, 0.6); }
.carta[data-rarita="Epic"] .carta-foto { border-color: rgba(192, 132, 252, 0.7); box-shadow: 0 0 14px -6px rgba(192, 132, 252, 0.9); }
.carta[data-rarita="Legendary"] .carta-foto { border-color: rgba(255, 209, 102, 0.85); box-shadow: 0 0 16px -5px rgba(255, 209, 102, 0.95); }
.carta[data-rarita="Champion"] .carta-foto { border-color: rgba(255, 106, 213, 0.8); box-shadow: 0 0 16px -5px rgba(255, 106, 213, 0.9); }

/* =========================================================== struttura nuova */
.profilo-pannello {
  margin: 38px 0 18px;
  padding: 22px 26px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background:
    radial-gradient(700px 200px at 0% 0%, rgba(178, 98, 255, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(17, 32, 80, 0.92), rgba(8, 16, 40, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -40px #000;
}
.profilo-testa { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.profilo-testa h2 { margin: 0; font-family: var(--serif); font-size: 1.7rem; }
.profilo-testa .tag { color: var(--oro); font-family: var(--mono); font-size: 0.9rem; }
.profilo-arena { margin: 4px 0 0; color: #a9b8d6; font-size: 0.86rem; }

.statistiche { display: flex; flex-wrap: wrap; gap: 10px; }
.statistica {
  min-width: 92px;
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgba(6, 12, 30, 0.55);
  text-align: center;
}
.statistica b { display: block; font-size: 1.35rem; color: var(--oro-chiaro); text-shadow: 0 0 16px rgba(245, 196, 83, 0.35); }
.statistica span { display: block; margin-top: 2px; color: #93a3c4; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* --------------------------------------------------- livello degli avversari */
.controllo {
  margin: 18px 0 26px;
  padding: 20px 24px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: linear-gradient(180deg, rgba(14, 27, 68, 0.9), rgba(7, 14, 34, 0.92));
}
.controllo-testa { display: flex; align-items: start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.controllo h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.25rem; }
.controllo-nota { margin: 0; color: #a9b8d6; font-size: 0.88rem; }
.controllo-nota b { color: var(--oro); }
.chip-livelli { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-livello {
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linea-forte);
  border-radius: 10px;
  background: rgba(8, 16, 40, 0.8);
  color: #b9c6e2;
  font-family: var(--mono);
  font-size: 0.86rem;
  text-align: center;
  text-decoration: none;
  transition: all 140ms ease;
}
.chip-livello:hover { color: var(--crema); border-color: var(--oro); transform: translateY(-1px); }
.chip-livello.is-attivo {
  background: linear-gradient(180deg, #ffe9a8, var(--oro) 48%, #d9a02f);
  border-color: #8a6417;
  color: #2b1c00;
  font-weight: 800;
  box-shadow: 0 4px 0 -2px #6b4c11;
}
.controllo-spiega { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(245, 196, 83, 0.14); color: #93a3c4; font-size: 0.84rem; }
.controllo-spiega b { color: var(--oro-chiaro); }

/* ------------------------------------------------------ mazzi: stato livello */
.mazzo-sotto {
  margin: 0;
  padding: 7px 11px;
  border: 1px dashed rgba(245, 196, 83, 0.3);
  border-radius: 9px;
  color: #b9c6e2;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.carta-gap {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 92, 71, 0.18);
  border: 1px solid rgba(255, 92, 71, 0.45);
  color: #ffb3a6;
  font-style: normal;
  font-size: 0.62rem;
}

/* ------------------------------------------------------------------ storico */
.storico {
  margin-top: 40px;
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: linear-gradient(180deg, rgba(14, 27, 68, 0.9), rgba(7, 14, 34, 0.92));
}
.storico-testa { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.storico-testa h2 { margin: 0; font-family: var(--serif); font-size: 1.5rem; }
.storico-resa { margin: 0; color: #a9b8d6; font-size: 0.85rem; }
.storico-resa b { font-size: 1.5rem; color: var(--oro); }

.barra {
  display: flex;
  height: 34px;
  margin: 18px 0 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--linea);
  background: rgba(4, 8, 20, 0.6);
}
.barra span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.barra-v { background: linear-gradient(180deg, #b6f06a, #6fb62a); color: #10240a; }
.barra-p { background: rgba(150, 170, 210, 0.25); }
.barra-s { background: linear-gradient(180deg, #ff8f80, #c23a25); color: #2a0703; }

.storico-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.storico-titolo { margin: 0 0 10px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #93a3c4; font-family: var(--mono); }
.resa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.resa-lista li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: rgba(6, 12, 30, 0.5);
}
.resa-lista img { width: 28px; height: 33px; object-fit: contain; }
.resa-nome { font-size: 0.86rem; }
.resa-valore { font-family: var(--mono); font-size: 0.8rem; color: #b9c6e2; }
.resa-valore.is-buono { color: #b6f06a; }
.resa-valore.is-cattivo { color: #ff8f80; }
.storico-nota { margin: 16px 0 0; color: #8494b4; font-size: 0.76rem; }

/* ------------------------------------------------------------------ upgrade */
.potenzia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(245, 196, 83, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(20, 38, 92, 0.9), rgba(8, 16, 40, 0.94));
}
.potenzia h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.4rem; }
.potenzia-nota { margin: 0; color: #a9b8d6; font-size: 0.86rem; }
.potenzia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.potenzia-lista li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: rgba(6, 12, 30, 0.55);
}
.potenzia-lista img { width: 34px; height: 40px; object-fit: contain; }
.potenzia-nome { font-size: 0.9rem; display: flex; flex-direction: column; }
.potenzia-nome small { color: #93a3c4; font-family: var(--mono); font-size: 0.66rem; }
.potenzia-gap {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 92, 71, 0.16);
  border: 1px solid rgba(255, 92, 71, 0.45);
  color: #ffb3a6;
  font-family: var(--mono);
  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .potenzia { grid-template-columns: 1fr; }
  .profilo-testa { align-items: start; }
  .statistiche { width: 100%; }
  .statistica { flex: 1 1 90px; }
}

/* --------------------------------------------------- barra di navigazione */
.salta {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(7, 14, 34, 0.96), rgba(7, 14, 34, 0.72));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245, 196, 83, 0.18);
}
.salta a {
  padding: 6px 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: rgba(9, 18, 44, 0.8);
  color: #c3cfe6;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 140ms ease;
}
.salta a:hover { color: #2b1c00; background: var(--oro); border-color: #8a6417; }

/* chip più compatti: servono tutti i livelli da 1 a 15 */
.chip-livelli { gap: 5px; max-width: 100%; }
.chip-livello { min-width: 34px; padding: 7px 8px; font-size: 0.8rem; }
.chip-auto { min-width: 52px; }

/* Le sezioni con ancora non devono finire sotto la barra sticky. */
#mazzi, #storico, #da-salire, #arsenale { scroll-margin-top: 74px; }

/* La barra sticky deve coprire tutta la larghezza, non solo il contenitore. */
.salta {
  box-shadow: 0 0 0 100vmax rgba(7, 14, 34, 0.94);
  clip-path: inset(0 -100vmax);
}

.controllo-avviso {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 92, 71, 0.4);
  border-left: 3px solid #ff5c47;
  border-radius: 10px;
  background: rgba(255, 92, 71, 0.1);
  color: #ffd0c7;
  font-size: 0.84rem;
}

/* Dati del mazzo: elisir, livello medio e resa stimata affiancati */
.mazzo-dati { display: flex; gap: 14px; align-items: start; }
.mazzo-livello {
  margin: 0;
  text-align: right;
  color: #9fb0d2;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mazzo-livello span {
  display: block;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #b6f06a;
  text-shadow: 0 0 14px rgba(182, 240, 106, 0.35);
}
.mazzo-resa {
  margin: 0;
  text-align: right;
  color: #9fb0d2;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mazzo-resa span {
  display: block;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--oro-chiaro);
  text-shadow: 0 0 14px rgba(245, 196, 83, 0.35);
}

/* Verifica della struttura: riga sobria sotto i dati del mazzo */
.mazzo-garanzia {
  margin: 0;
  color: #94a5c6;
  font-size: 0.76rem;
  line-height: 1.5;
}
.mazzo-garanzia b { color: var(--oro-chiaro); font-weight: 700; }

/* ============================================================== motore AI */
.ai-pannello {
  margin: 18px 0 26px;
  padding: 22px 24px;
  border: 1px solid rgba(94, 247, 255, 0.28);
  border-radius: var(--raggio);
  background:
    radial-gradient(600px 180px at 0% 0%, rgba(94, 247, 255, 0.12), transparent 70%),
    radial-gradient(500px 170px at 100% 100%, rgba(178, 98, 255, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 24, 56, 0.92), rgba(6, 12, 30, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 26px 50px -40px #000;
}
.ai-testa h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.35rem; color: #d9f7ff; }
.ai-nota { margin: 0; max-width: 62ch; color: #a9b8d6; font-size: 0.86rem; }
.ai-stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.ai-voce {
  flex: 1 1 190px;
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgba(6, 12, 30, 0.55);
}
.ai-voce b { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6fe7f5; }
.ai-voce span { display: block; margin-top: 3px; color: #d3dff5; font-size: 0.84rem; }
.ai-apri {
  padding: 11px 18px;
  border: 1px solid rgba(94, 247, 255, 0.5);
  border-radius: 999px;
  background: rgba(94, 247, 255, 0.12);
  color: #bff6ff;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all 140ms ease;
}
.ai-apri:hover { background: #6fe7f5; color: #04121a; border-color: #6fe7f5; }

/* coach locale dentro ogni mazzo */
.coach {
  padding: 12px 14px;
  border: 1px solid rgba(94, 247, 255, 0.22);
  border-left: 3px solid #6fe7f5;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(11, 34, 66, 0.7), rgba(7, 18, 40, 0.7));
  display: grid;
  gap: 6px;
}
.coach p { margin: 0; font-size: 0.84rem; color: #c9d8f0; }
.coach b { color: #6fe7f5; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.coach-coppia { color: #b6f06a !important; }
.coach-attenzione { color: #ffc0b5 !important; }

/* =================================================================== chat */
.invito--corto h1 { font-size: clamp(2rem, 5vw, 3rem); }
.chat {
  margin: 0 0 26px;
  padding: 22px 24px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: linear-gradient(180deg, rgba(14, 27, 68, 0.94), rgba(7, 14, 34, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -44px #000;
}
.chat-flusso {
  display: grid;
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 18px;
}
.chat-turno {
  padding: 12px 16px;
  border-radius: 14px;
  max-width: 68ch;
}
.chat-turno p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.chat-turno .chat-chi {
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chat-turno--coach {
  justify-self: start;
  border: 1px solid rgba(94, 247, 255, 0.28);
  border-left: 3px solid #6fe7f5;
  background: rgba(9, 26, 56, 0.8);
  color: #d6e4f8;
}
.chat-turno--coach .chat-chi { color: #6fe7f5; }
.chat-turno--utente {
  justify-self: end;
  border: 1px solid rgba(245, 196, 83, 0.4);
  background: rgba(245, 196, 83, 0.12);
  color: #ffeec2;
}
.chat-turno--utente .chat-chi { color: var(--oro); text-align: right; }

.chat-modulo { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-modulo input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--linea-forte);
  border-radius: 12px;
  background: rgba(5, 11, 26, 0.75);
  color: var(--crema);
  font-family: var(--font);
  font-size: 0.95rem;
}
.chat-modulo input:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.chat-modulo button {
  padding: 13px 24px;
  border: 1px solid #8a6417;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe9a8, var(--oro) 48%, #d9a02f);
  color: #2b1c00;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}
.chat-modulo button:hover { transform: translateY(-1px); }

.chat-suggerimenti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chat-suggerimenti form { margin: 0; }
.chip-domanda {
  padding: 7px 14px;
  border: 1px solid var(--linea-forte);
  border-radius: 999px;
  background: rgba(9, 18, 44, 0.8);
  color: #b9c6e2;
  font-family: var(--font);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 140ms ease;
}
.chip-domanda:hover { color: #06121c; background: #6fe7f5; border-color: #6fe7f5; }

.chat-nota { margin: 14px 0 0; color: #8494b4; font-size: 0.76rem; }
.chat-nota code { color: #b9c6e2; }

.coach-mazzi {
  margin-bottom: 40px;
  padding: 18px 22px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: rgba(8, 16, 40, 0.6);
}
.coach-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.coach-lista li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: rgba(6, 12, 30, 0.55);
}
.coach-nome { font-size: 0.86rem; }
.coach-dati { font-family: var(--mono); font-size: 0.72rem; color: #93a3c4; white-space: nowrap; }

/* Campi di testo semplici nel setup (chiave Groq) */
.modulo input[type="text"] {
  padding: 12px 14px;
  border: 1px solid var(--linea-forte);
  border-radius: 12px;
  background: rgba(5, 11, 26, 0.75);
  color: var(--crema);
  font-family: var(--mono);
  font-size: 0.86rem;
}
.modulo input[type="text"]:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.pannello-setup h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 1.6rem; }
.pannello-setup + .pannello-setup { margin-top: 26px; }

.avviso--soft {
  border-color: rgba(245, 196, 83, 0.35);
  background: rgba(245, 196, 83, 0.08);
  color: #f3e2b4;
}

/* Parere del modello sul mazzo migliore */
.parere {
  margin: 0 0 22px;
  padding: 20px 22px;
  border: 1px solid rgba(94, 247, 255, 0.3);
  border-radius: var(--raggio);
  background:
    radial-gradient(500px 160px at 100% 0%, rgba(94, 247, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(17, 32, 60, 0.92), rgba(8, 16, 34, 0.94));
}
.parere-testo { margin: 6px 0 10px; color: #dbe7f8; font-size: 0.94rem; line-height: 1.6; }
.parere-firma { margin: 0; color: #7d8db0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------------------------------------------------------- firma dell'autore */
.piede-autore {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: #b9c6e2;
}
.piede-autore a {
  color: var(--oro-chiaro, #f5c453);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.piede-autore a:hover { color: #fff; }