/* ============================================================
   MY CARD BAZAR — Tema «Tesoro»
   ------------------------------------------------------------
   Layer tematico caricato DOPO style.css.
   Non modifica style.css: ne sovrascrive i token e i componenti.
   Per disattivare il restyling basta rimuovere il <link> in base.html.twig.

   Indice
     1. Token
     2. Base e tipografia
     3. Remap classi Bootstrap
     4. Componenti del sito
     5. Identita colore delle carte
     6. Stampa
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------ */
:root {
  /* Fondali */
  --abisso: #0B1520;
  --superficie: #131F2C;
  --rialzo: #1A2837;
  --linea: #24354A;
  --linea-soft: #1B2938;

  /* Inchiostri */
  --ink: #EDF3F4;
  --ink-muted: #8496A8;
  --ink-faint: #5C6E80;

  /* Accenti.
     L'oro chiaro serve sia come stop alto dei gradienti sia come
     inchiostro per link, .text-gold e contatori. */
  --ottone: #D9A441;
  --ottone-chiaro: #F0CD7E;
  --ottone-scuro: #B98A28;
  --mare: #2E9BE0;

  /* --------------------------------------------------------
     Remap dei token gia esistenti in style.css.
     L'oro diventa il colore d'azione: le classi che si chiamano
     gia .btn-gold / .text-gold / .bg-gold tornano a dire il vero.
     Queste variabili sono usate anche inline nei template
     (es. confirmButtonColor: 'var(--primary-color)' in SweetAlert),
     quindi il remap si propaga da solo.
     -------------------------------------------------------- */
  --primary-color: var(--ottone);
  --primary-color-hover: #C79433;
  --primary-color-active: #A87A20;
  --primary-light-color: var(--rialzo);

  /* --bg-color NON va rimappato: in style.css fa doppio lavoro e in 11
     punti su 15 e' usato come colore del TESTO chiaro sui chip colorati
     (.text-bg-effect-*, footer, .btn-wa, slider). Lo sfondo pagina e'
     invece impostato esplicitamente su body qui sotto. */

  /* Colori carta ricalibrati per fondo scuro */
  --color-category-1: #C4172C;
  --color-category-2: #1D9E71;
  --color-category-3: #1780CC;
  --color-category-4: #9B2E8B;
  --color-category-5: #3A4450;
  --color-category-6: #E0CE3B;
  --color-opacity-category-1: rgba(196, 23, 44, .55);
  --color-opacity-category-2: rgba(29, 158, 113, .55);
  --color-opacity-category-3: rgba(23, 128, 204, .55);
  --color-opacity-category-4: rgba(155, 46, 139, .55);
  --color-opacity-category-5: rgba(58, 68, 80, .55);
  --color-opacity-category-6: rgba(224, 206, 59, .55);

  /* Livelli account */
  --wood-color: #D08A3C;
  --silver-color: #B9C4CE;
  --gold-color: #E0B75C;
  --wood-color-opacity: #D08A3C33;
  --silver-color-opacity: #B9C4CE33;
  --gold-color-opacity: #E0B75C33;

  /* Tipografia */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Scala tipografica fluida, rapporto 1.333 */
  --t--1: clamp(.78rem, .755rem + .12vw, .84rem);
  --t-0:  1rem;
  --t-1:  clamp(1.16rem, 1.09rem + .32vw, 1.33rem);
  --t-2:  clamp(1.42rem, 1.27rem + .68vw, 1.78rem);
  --t-3:  clamp(1.7rem, 1.4rem + 1.3vw, 2.37rem);
  --t-4:  clamp(2rem, 1.5rem + 2.2vw, 3.16rem);

  /* Superfici e profondita */
  --raggio: 12px;
  --raggio-sm: 8px;
  --ombra-sm: 0 2px 8px -3px rgba(0, 0, 0, .55);
  --ombra: 0 12px 32px -16px rgba(0, 0, 0, .8);
  --ombra-lg: 0 24px 60px -28px rgba(0, 0, 0, .9);

  /* Bootstrap */
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--abisso);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-border-color: var(--linea);
  --bs-border-color-translucent: var(--linea);
  --bs-dark-rgb: 19, 31, 44;
  --bs-light-rgb: 26, 40, 55;
  --bs-link-color: var(--ottone-chiaro);
  --bs-link-hover-color: var(--ottone);
}

/* ------------------------------------------------------------
   2. BASE E TIPOGRAFIA
   ------------------------------------------------------------ */

/* Il background.jpg da 1920x1080 lascia il posto a un gradiente:
   nessuna cucitura sugli schermi larghi e ~200 KB in meno. */
body {
  background-color: var(--abisso);
  background-image:
    radial-gradient(58% 42% at 18% 0%, rgba(46, 155, 224, .13), transparent 68%),
    radial-gradient(46% 38% at 88% 12%, rgba(217, 164, 65, .10), transparent 70%),
    linear-gradient(180deg, #0C1723 0%, var(--abisso) 42%, #08111A 100%);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* I titoli ereditano il colore dal contenitore: dentro un pannello
   .bg-gold devono restare scuri, non forzati a inchiostro chiaro. */
h1, h2, h3,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.08;
  text-wrap: balance;
  color: inherit;
}

h4, h5, h6,
.h4, .h5, .h6 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.25;
  color: inherit;
}

h1, .h1 { font-size: var(--t-4); }
h2, .h2 { font-size: var(--t-3); }
h3, .h3 { font-size: var(--t-2); }
h4, .h4 { font-size: var(--t-1); }

/* Nessun `color` qui: i <p> dentro un bottone o un badge colorato devono
   ereditare l'inchiostro del contenitore. Il colore di base arriva da body.
   Stesso motivo per cui i titoli usano `inherit`. */
p {
  font-size: var(--t-0);
  line-height: 1.62;
}

small, .small { font-size: var(--t--1); }

a,
a:hover {
  color: var(--ottone-chiaro);
  text-decoration: none;
  transition: color .15s ease;
}

a:hover { color: var(--ottone); }

/* Il focus deve restare visibile: navigazione da tastiera */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ottone);
  outline-offset: 2px;
  border-radius: 4px;
}

hr {
  border-color: var(--linea);
  opacity: 1;
}

::selection {
  background: var(--ottone);
  color: #14100A;
}

/* Le .fs-* restano invariate a desktop ma diventano fluide sui corpi
   grandi, cosi i titoli non sfondano piu su mobile. */
.fs-10 { font-size: .59rem; }
.fs-11 { font-size: .65rem; }
.fs-12 { font-size: .71rem; }
.fs-14 { font-size: .82rem; }
.fs-16 { font-size: .94rem; }
.fs-17 { font-size: 1rem; }
.fs-18 { font-size: 1.06rem; }
.fs-20 { font-size: 1.18rem; }
.fs-20-imp { font-size: 1.18rem !important; }
.fs-21 { font-size: 1.24rem; }
.fs-22 { font-size: 1.29rem; }
.fs-23 { font-size: 1.35rem; }
.fs-24 { font-size: 1.41rem; }
.fs-25 { font-size: clamp(1.24rem, 1.1rem + .6vw, 1.47rem); }
.fs-30 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.76rem); }
.fs-36 { font-size: clamp(1.53rem, 1.15rem + 1.7vw, 2.12rem); }
.fs-40 { font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.35rem); }
.fs-47 { font-size: clamp(1.85rem, 1.2rem + 2.9vw, 2.76rem); }
.fs-50 { font-size: clamp(1.95rem, 1.2rem + 3.3vw, 2.94rem); }

.bold { font-weight: 600; }
.semibold { font-weight: 500; }

/* Cifre tabellari: in colonna i numeri si allineano da soli */
.font-mono,
.card-code,
.counter-card,
.btn-counter-card,
#counter-deck,
.quantity-card-print-and-play {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* Scrollbar */
*::-webkit-scrollbar-thumb {
  background-color: var(--ottone-scuro);
  box-shadow: none;
}

*::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, .04);
  box-shadow: none;
}

* {
  scrollbar-color: var(--ottone-scuro) transparent;
  scrollbar-width: thin;
}

/* ------------------------------------------------------------
   3. REMAP CLASSI BOOTSTRAP
   Le stesse classi usate nei template, rivestite.
   ------------------------------------------------------------ */

/* .bg-white e' usata 88 volte come "pannello": diventa la superficie scura.
   Il contorno e' un anello interno e non un border, cosi non altera le
   dimensioni degli elementi ne raddoppia i bordi gia presenti. */
.bg-white {
  background-color: var(--superficie) !important;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--linea-soft);
}

.bg-light {
  background-color: var(--rialzo) !important;
  color: var(--ink);
}

.bg-dark {
  background-color: var(--superficie) !important;
  color: var(--ink);
}

/* .text-white resta inchiostro chiaro, non segue --bs-white */
.text-white { color: var(--ink) !important; }
.text-dark { color: var(--ink) !important; }
.text-muted { color: var(--ink-muted) !important; }
.text-black { color: var(--ink) !important; }

.text-success { color: #3FD07A !important; }
.text-danger { color: #F2637B !important; }
.text-warning { color: #F0B849 !important; }

.border { border-color: var(--linea) !important; }
.border-top { border-top-color: var(--linea) !important; }
.border-bottom { border-bottom-color: var(--linea) !important; }
.border-start { border-left-color: var(--linea) !important; }
.border-end { border-right-color: var(--linea) !important; }
.border-dark { border-color: var(--linea) !important; }

/* Raggi: 10px fisso diventa il token */
.border-radius-10 { border-radius: var(--raggio); }
.border-radius-20 { border-radius: 18px; }
.border-top-radius-10 {
  border-top-left-radius: var(--raggio) !important;
  border-top-right-radius: var(--raggio) !important;
}
.border-bottom-radius-10 {
  border-bottom-left-radius: var(--raggio) !important;
  border-bottom-right-radius: var(--raggio) !important;
}

/* --- Bottoni --- */
.btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--raggio-sm);
  --bs-btn-focus-shadow-rgb: 217, 164, 65;
  letter-spacing: .005em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn:active { transform: translateY(1px); }

/* Bootstrap 5.2 fissa --bs-btn-color:#212529 sui .btn senza variante,
   che diventerebbe testo scuro su fondo scuro. Il :not() evita di
   sovrascrivere i bottoni colorati, che definiscono il proprio colore. */
.btn:not([class*="btn-"]) {
  --bs-btn-color: var(--ink);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-color: var(--ink);
}

/* Il giallo carta e troppo chiaro per reggere testo bianco */
.btn-color-6,
.btn-color-6:hover,
.btn-outline-color-6:hover,
.badge-6 {
  color: #14100A !important;
}

/* L'azione principale: ottone */
.btn-gold,
.btn-gold:hover,
.btn-gold:focus {
  background-image: linear-gradient(170deg, var(--ottone-chiaro) 0%, var(--ottone) 58%, var(--ottone-scuro) 100%);
  background-color: var(--ottone);
  border-color: transparent;
  color: #1A1204;
  box-shadow: 0 6px 18px -9px rgba(217, 164, 65, .85);
}

.btn-gold:active {
  color: #1A1204 !important;
  background-image: none;
  background-color: var(--primary-color-active) !important;
  border-color: var(--primary-color-active) !important;
}

.btn-outline-gold,
.btn-outline-gold:focus {
  background-color: transparent;
  color: var(--ottone-chiaro);
  border-color: var(--ottone-scuro);
}

/* Filtri per colore carta.
   In style.css avevano fondo --bs-white (una pillola chiara sul tema
   scuro) e tutti lo stesso colore del testo. Qui il fondo sparisce e
   ognuno mostra il proprio colore: sono filtri di colore, tanto vale
   che si distinguano. */
.btn-outline-color-1,
.btn-outline-color-2,
.btn-outline-color-3,
.btn-outline-color-4,
.btn-outline-color-5,
.btn-outline-color-6,
.btn-outline-color-7 {
  background-color: transparent;
}

.btn-outline-color-1 { color: #E4526A; border-color: #C4172C; }
.btn-outline-color-2 { color: #34C795; border-color: #1D9E71; }
.btn-outline-color-3 { color: #4FA8E8; border-color: #1780CC; }
.btn-outline-color-4 { color: #C765B6; border-color: #9B2E8B; }
.btn-outline-color-5 { color: #9AAABA; border-color: #55636F; }
.btn-outline-color-6 { color: #E0CE3B; border-color: #B5A62C; }
.btn-outline-color-7 { color: var(--ottone-chiaro); border-color: var(--ottone-scuro); }

/* Selezionati: il colore riempie, come nel resto del tema */
.filter-card-color:checked + .btn-outline-color-1 { background-color: var(--color-category-1); color: #fff; }
.filter-card-color:checked + .btn-outline-color-2 { background-color: var(--color-category-2); color: #fff; }
.filter-card-color:checked + .btn-outline-color-3 { background-color: var(--color-category-3); color: #fff; }
.filter-card-color:checked + .btn-outline-color-4 { background-color: var(--color-category-4); color: #fff; }
.filter-card-color:checked + .btn-outline-color-5 { background-color: var(--color-category-5); color: #fff; }
.filter-card-color:checked + .btn-outline-color-6 { background-color: var(--color-category-6); color: #14100A; }

.btn-dark {
  --bs-btn-bg: var(--rialzo);
  --bs-btn-border-color: var(--linea);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: #22344A;
  --bs-btn-hover-border-color: var(--linea);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: #1B2A3B;
  --bs-btn-active-border-color: var(--linea);
  --bs-btn-active-color: var(--ink);
}

.btn-white {
  --bs-btn-bg: var(--rialzo);
  --bs-btn-border-color: var(--linea);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: #22344A;
  --bs-btn-hover-border-color: var(--linea);
  --bs-btn-active-bg: #1B2A3B;
  --bs-btn-active-border-color: var(--linea);
  --bs-btn-disabled-bg: var(--rialzo);
  --bs-btn-disabled-border-color: var(--linea);
}

.btn-success {
  --bs-btn-bg: #1E9463;
  --bs-btn-border-color: #1E9463;
  --bs-btn-hover-bg: #178053;
  --bs-btn-hover-border-color: #178053;
}

.btn-danger {
  --bs-btn-bg: #C4304A;
  --bs-btn-border-color: #C4304A;
  --bs-btn-hover-bg: #AB2740;
  --bs-btn-hover-border-color: #AB2740;
}

.btn-warning {
  --bs-btn-bg: #C98A2A;
  --bs-btn-border-color: #C98A2A;
  --bs-btn-color: #14100A;
  --bs-btn-hover-bg: #B37820;
  --bs-btn-hover-border-color: #B37820;
  --bs-btn-hover-color: #14100A;
}

/* .fake-btn e' l'intestazione dei pannelli (Statistiche Mazzo, Deck List...),
   non un bottone. Era una barra dorata identica alle azioni primarie: due
   mestieri per lo stesso colore indeboliscono l'accento. Diventa
   un'etichetta di sezione e l'oro resta alle sole azioni. */
.fake-btn,
.fake-btn.bg-gold {
  background-image: none;
  background-color: var(--rialzo);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linea);
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* --- Form --- */
.form-control,
.form-select,
.input-form {
  background-color: var(--abisso);
  border: 1px solid var(--linea);
  color: var(--ink);
  border-radius: var(--raggio-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--ink-faint); }

.form-control:focus,
.form-select:focus,
.input-form:focus {
  background-color: var(--abisso);
  border-color: var(--ottone-scuro);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .18);
}

/* Bootstrap forza .form-select:disabled a #e9ecef: un blocco chiaro con
   testo chiaro sopra. La regola va ripetuta per il select, che non e'
   coperto da .form-control. */
/* Inchiostro muto ma leggibile, non spento: un select disabilitato mostra
   comunque un'informazione utile (l'espansione corrente). A dire che non e'
   modificabile bastano fondo, bordo e cursore. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
select:disabled {
  background-color: var(--rialzo) !important;
  color: var(--ink-muted) !important;
  border-color: var(--linea-soft);
  cursor: not-allowed;
  opacity: 1;
}

/* La freccia del select e' un SVG con tratto scuro: invisibile sul tema.
   Stessa icona, tratto chiaro. */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238496A8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select:disabled {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235C6E80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Il menu a tendina nativo segue il tema */
.form-select option,
select option {
  background-color: var(--superficie);
  color: var(--ink);
}

.input-group-text {
  background-color: var(--rialzo);
  border-color: var(--linea);
  color: var(--ink-muted);
}

label,
.form-label {
  color: var(--ink-muted);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.form-check-input {
  background-color: var(--abisso);
  border-color: var(--linea);
}

.form-check-input:checked {
  background-color: var(--ottone);
  border-color: var(--ottone);
}

/* --- Tabelle --- */
.table {
  --bs-table-color: var(--ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--linea-soft);
  --bs-table-striped-color: var(--ink);
  --bs-table-striped-bg: rgba(255, 255, 255, .025);
  --bs-table-hover-color: var(--ink);
  --bs-table-hover-bg: rgba(255, 255, 255, .045);
}

.table > thead th {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom-color: var(--linea);
}

/* --- Card Bootstrap ---
   Componente vero (non le .card-item delle carte da gioco): il suo
   --bs-card-bg e' #fff e restava bianco su tutto il tema. Usato in
   Il Mio Account, Ricarica Berry, articoli e admin.
   Il bordo NON viene forzato: le .card-level-1/2/3 lo colorano
   con il livello dell'account (wood / silver / gold). */
.card {
  --bs-card-bg: var(--superficie);
  --bs-card-color: var(--ink);
  --bs-card-border-color: var(--linea);
  --bs-card-cap-bg: var(--rialzo);
  --bs-card-cap-color: var(--ink);
  --bs-card-border-radius: var(--raggio);
  --bs-card-inner-border-radius: calc(var(--raggio) - 1px);
}

.card-header,
.card-footer {
  border-color: var(--linea);
}

/* --- Altri componenti Bootstrap con fondo chiaro di default --- */
.list-group {
  --bs-list-group-bg: var(--superficie);
  --bs-list-group-color: var(--ink);
  --bs-list-group-border-color: var(--linea);
  --bs-list-group-action-hover-bg: var(--rialzo);
  --bs-list-group-action-hover-color: var(--ink);
}

.accordion {
  --bs-accordion-bg: var(--superficie);
  --bs-accordion-color: var(--ink);
  --bs-accordion-border-color: var(--linea);
  --bs-accordion-btn-bg: var(--rialzo);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-active-bg: var(--rialzo);
  --bs-accordion-active-color: var(--ottone-chiaro);
  --bs-accordion-btn-icon-transform: rotate(-180deg);
}

.pagination {
  --bs-pagination-bg: var(--superficie);
  --bs-pagination-color: var(--ink);
  --bs-pagination-border-color: var(--linea);
  --bs-pagination-hover-bg: var(--rialzo);
  --bs-pagination-hover-color: var(--ottone-chiaro);
  --bs-pagination-hover-border-color: var(--linea);
  --bs-pagination-active-bg: var(--ottone);
  --bs-pagination-active-border-color: var(--ottone);
  --bs-pagination-active-color: #1A1204;
  --bs-pagination-disabled-bg: var(--abisso);
  --bs-pagination-disabled-color: var(--ink-faint);
  --bs-pagination-disabled-border-color: var(--linea);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--linea);
  --bs-nav-tabs-link-hover-border-color: var(--linea);
  --bs-nav-tabs-link-active-bg: var(--superficie);
  --bs-nav-tabs-link-active-color: var(--ottone-chiaro);
  --bs-nav-tabs-link-active-border-color: var(--linea);
  --bs-nav-link-color: var(--ink-muted);
  --bs-nav-link-hover-color: var(--ink);
}

.progress {
  --bs-progress-bg: var(--rialzo);
  --bs-progress-bar-bg: var(--ottone);
}

.offcanvas {
  --bs-offcanvas-bg: var(--superficie);
  --bs-offcanvas-color: var(--ink);
  --bs-offcanvas-border-color: var(--linea);
}

.alert {
  --bs-alert-bg: var(--rialzo);
  --bs-alert-color: var(--ink);
  --bs-alert-border-color: var(--linea);
}

.popover, .tooltip-inner {
  --bs-popover-bg: var(--superficie);
  --bs-popover-border-color: var(--linea);
  --bs-popover-header-bg: var(--rialzo);
}

/* --- Modali --- */
.modal-content {
  background-color: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-lg);
  color: var(--ink);
}

.modal-header {
  border-bottom: 1px solid var(--linea);
}

.modal-header.bg-dark {
  background-color: var(--rialzo) !important;
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: var(--t-1);
}

.modal-footer { border-top: 1px solid var(--linea); }
.modal-backdrop.show { opacity: .72; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.modal p, .fs-1r { font-size: var(--t-0); }

/* --- Dropdown --- */
.dropdown-menu {
  --bs-dropdown-bg: var(--superficie);
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--rialzo);
  --bs-dropdown-border-color: var(--linea);
  --bs-dropdown-divider-bg: var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}

.dropdown-item { border-radius: 6px; }

/* --- DataTables ---
   Porta con se' il proprio CSS chiaro (movimenti Berry, confronto
   collezione, admin) e lo carica DOPO il tema. A parita di specificita
   vincerebbe lui: il prefisso `body` aggiunge un elemento e ribalta. */
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_length,
body .dataTables_wrapper .dataTables_filter,
body .dataTables_wrapper .dataTables_processing {
  color: var(--ink-muted);
}

body .dataTables_wrapper .dataTables_filter input,
body .dataTables_wrapper .dataTables_length select {
  background-color: var(--abisso);
  border: 1px solid var(--linea);
  color: var(--ink);
  border-radius: var(--raggio-sm);
  padding: .2rem .5rem;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ink) !important;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-sm);
  background: transparent !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #1A1204 !important;
  background: var(--ottone) !important;
  border-color: var(--ottone);
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #1A1204 !important;
  background: var(--ottone) !important;
  border-color: var(--ottone);
}

/* Disabilitato: muto ma non illeggibile */
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #77899A !important;
  background: transparent !important;
  border-color: var(--linea-soft);
}

body table.dataTable tbody tr { background-color: transparent; }
body table.dataTable tbody tr:hover { background-color: rgba(255, 255, 255, .04); }
body table.dataTable.no-footer { border-bottom-color: var(--linea); }

body table.dataTable thead th,
body table.dataTable thead td {
  border-bottom-color: var(--linea);
  color: var(--ink-muted);
}

/* --- Breadcrumb --- */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ink-faint);
  font-size: var(--t--1);
}

.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--ottone-chiaro); }
.breadcrumb-item.active { color: var(--ink); }

/* --- Badge --- */
.badge {
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 999px;
}

/* --- SweetAlert2 ---
   I template passano confirmButtonColor: 'var(--primary-color)',
   quindi il colore segue gia il remap dei token qui sopra. */
.swal2-popup {
  background: var(--superficie);
  color: var(--ink);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-lg);
  font-family: var(--font-body);
}

.swal2-title {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.015em;
}

.swal2-html-container { color: var(--ink-muted); }
.swal2-html-container b { color: var(--ink); }

.swal2-styled {
  border-radius: var(--raggio-sm);
  font-weight: 600;
}

.swal2-styled.swal2-confirm { color: #1A1204 !important; }
.swal2-container { backdrop-filter: blur(3px); }

/* ------------------------------------------------------------
   4. COMPONENTI DEL SITO
   ------------------------------------------------------------ */

.text-gold { color: var(--ottone-chiaro); }

.bg-gold {
  background-image: linear-gradient(170deg, var(--ottone-chiaro), var(--ottone) 60%, var(--ottone-scuro));
  background-color: var(--ottone);
  color: #1A1204;
}

.bg-light-gold { background-color: var(--rialzo); }

/* --------------------------------------------------------
   TESTATA DI PAGINA

   21 template ripetono lo stesso h1: riquadro pieno, maiuscolo,
   centrato. Il riquadro e' la parte che invecchia; l'allineamento
   e il maiuscolo sono scelte dell'autore e restano.
   Al posto del box: display serif, spaziatura da testata e un
   filetto d'ottone che sfuma ai lati.
   -------------------------------------------------------- */
h1.bg-white,
h2.bg-white {
  background-color: transparent !important;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.15;
  position: relative;
  padding-top: .25rem !important;
  padding-bottom: .85rem !important;
  border-bottom: 1px solid var(--linea);
}

h1.bg-white::after,
h2.bg-white::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ottone), transparent);
}

/* Se il titolo non e' centrato, il filetto lo segue */
h1.bg-white:not(.text-center)::after,
h2.bg-white:not(.text-center)::after {
  left: 0;
  transform: none;
  background: linear-gradient(90deg, var(--ottone), transparent);
}

/* --- Navbar ---
   Sostituisce opacity: .9 sull'intero elemento, che sbiadiva anche
   logo e testo, con un fondo semitrasparente + blur. */
body .navbar,
.navbar {
  background-color: rgba(11, 21, 32, .82) !important;
  opacity: 1;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linea-soft);
  box-shadow: 0 8px 28px -20px rgba(0, 0, 0, .9);
}

.navbar.open a.navbar-brand {
  background-color: rgba(11, 21, 32, .95);
  opacity: 1;
}

.navbar .btn-hamburger #hamburger-icon span,
.navbar .btn-hamburger #cross-icon span {
  background: var(--ink);
  border-radius: 2px;
}

.hamburger {
  background-color: rgba(11, 21, 32, .96);
  opacity: 1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hamburger ul li a {
  color: var(--ink);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .15s ease, border-color .15s ease;
}

.hamburger ul li a:hover,
#menu-summary a.active {
  color: var(--ottone-chiaro);
  border-bottom-color: var(--ottone);
}


.img-avatar {
  border: 1px solid var(--linea);
  background: var(--rialzo);
}

.no-avatar {
  border: 2px solid var(--linea);
  background: linear-gradient(150deg, #24384C, #16232F);
  color: var(--ink-muted);
}

/* --- Livelli account --- */
.badge-lv-1,
.badge-lv-2,
.badge-lv-3 {
  border: 1px solid;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Opachi, non tinte trasparenti: questi badge sono posizionati in
   assoluto a cavallo del bordo della card, quindi bordo e artwork
   trasparirebbero da sotto il testo. Fondo pieno e inchiostro scuro. */
.badge-lv-1 {
  background-color: var(--wood-color);
  border-color: var(--wood-color);
  color: #17100A !important;
}

.badge-lv-2 {
  background-color: var(--silver-color);
  border-color: var(--silver-color);
  color: #131A21 !important;
}

.badge-lv-3 {
  background-color: var(--gold-color);
  border-color: var(--gold-color);
  color: #1A1204 !important;
}

/* Distacca il badge dal bordo spesso su cui e' appoggiato */
.badge-lv-1.position-absolute,
.badge-lv-2.position-absolute,
.badge-lv-3.position-absolute {
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .75);
}

.badge-lv-1-opacity { background-color: var(--wood-color-opacity); color: var(--wood-color) !important; }
.badge-lv-2-opacity { background-color: var(--silver-color-opacity); color: var(--silver-color) !important; }
.badge-lv-3-opacity { background-color: var(--gold-color-opacity); color: var(--gold-color) !important; }

/* --- Contatore del mazzo ---
   Vive dentro una .fake-btn, che ora e' un'etichetta muta: il numero
   di carte e' pero' il dato piu' consultato del Deck Builder, quindi
   riprende peso. Il totale /51 resta muto: cambia solo il primo. */
#counter-deck {
  font-family: var(--font-mono);
  font-size: 1.24rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ottone-chiaro);
  vertical-align: -1px;
}

/* --- Berry, la moneta del sito --- */
.berry .badge,
.badge.badge-lv-3 {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Footer --- */
footer {
  background-color: #070E15;
  border-top: 1px solid var(--linea);
  color: var(--ink-muted);
  border-top-left-radius: var(--raggio);
  border-top-right-radius: var(--raggio);
}

footer a { color: var(--ink-muted); }
footer a:hover { color: var(--ottone-chiaro); }

/* --- Pagine di errore --- */
.errore {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(2.5rem, 8vw, 5rem) 0;
  text-align: center;
}

.errore-codice {
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2rem + 8vw, 6.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ottone);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: .75rem;
}

.errore-titolo {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.018em;
  margin: 0 0 .85rem;
  text-wrap: balance;
}

.errore-testo {
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto 2rem;
}

.errore-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.errore-scorciatoie {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  justify-content: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}

.errore-scorciatoie a {
  font-size: .88rem;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.errore-scorciatoie a:hover { color: var(--ottone-chiaro); }
.errore-scorciatoie i { color: var(--ottone-scuro); }

/* --- Loader --- */
.loader { background: rgba(8, 17, 26, .92); backdrop-filter: blur(6px); }

/* --- Paginazione Swiper ---
   I bullet contengono il numero della slide (renderBullet).
   Erano definiti tre volte con tre stili diversi nei template:
   homepage, pacchetti e pacchetti-virtuali. Qui una volta sola. */
.swiper-pagination-bullet {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  background: var(--rialzo);
  border: 1px solid var(--linea);
  opacity: 1;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.swiper-pagination-bullet:hover {
  color: var(--ink);
  border-color: var(--ottone-scuro);
}

.swiper-pagination-bullet-active {
  color: #1A1204;
  background: var(--ottone);
  border-color: var(--ottone);
}

/* --- Pannelli statistiche --- */
.row-stats table td { color: var(--ink-muted); }
.row-stats table td:last-child {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* --- Bottoni social e azioni deck --- */
.btn-wa, .btn-wa:hover, .btn-wa:focus, .btn-wa:active { background-color: #1FA855; color: #fff; }
.btn-telegram, .btn-telegram:hover, .btn-telegram:focus, .btn-telegram:active { background-color: #2589BE; color: #fff; }
.btn-compare, .btn-compare:hover, .btn-compare:focus, .btn-compare:active { background-color: #6C4396; color: #fff; }
.btn-duplicate, .btn-duplicate:hover, .btn-duplicate:focus, .btn-duplicate:active { background-color: #C2661C; color: #fff; }

/* ------------------------------------------------------------
   5. IDENTITA COLORE DELLE CARTE
   Le variabili --color-category-* esistevano gia ma servivano solo
   a colorare qualche bordo. Qui diventano la luce ambientale della
   pagina: ogni carta emette l'alone del proprio colore.
   ------------------------------------------------------------ */

.img-card,
.img-deck-card {
  border-radius: var(--raggio-sm);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.card-item,
.card-deck {
  position: relative;
}

/* --------------------------------------------------------
   L'alone e' pilotato dai data-color gia presenti nel markup:
   nessuna modifica ai template. --ci e' il colore primario
   della carta, --ci2 il secondario dei Leader bicolore.
   -------------------------------------------------------- */
.card-item { --ci: #0A121A; --ci2: var(--ci); --card-inset: 0px; }

/* Solo le card che sono colonne della griglia hanno il gutter da compensare */
.card-item[class*="col-"] { --card-inset: calc(var(--bs-gutter-x, 1.5rem) * .5); }

/* Colore primario — data-color vale "3" oppure "3|6" */
.card-item[data-color="1"], .card-item[data-color^="1|"], .card-item[data-color-one="1"] { --ci: var(--color-category-1); }
.card-item[data-color="2"], .card-item[data-color^="2|"], .card-item[data-color-one="2"] { --ci: var(--color-category-2); }
.card-item[data-color="3"], .card-item[data-color^="3|"], .card-item[data-color-one="3"] { --ci: var(--color-category-3); }
.card-item[data-color="4"], .card-item[data-color^="4|"], .card-item[data-color-one="4"] { --ci: var(--color-category-4); }
.card-item[data-color="5"], .card-item[data-color^="5|"], .card-item[data-color-one="5"] { --ci: var(--color-category-5); }
.card-item[data-color="6"], .card-item[data-color^="6|"], .card-item[data-color-one="6"] { --ci: var(--color-category-6); }

/* Il colore 7 e' il multicolore: --color-category-7 e' un gradiente e
   non puo' stare in una box-shadow. I due toni dell'alone diventano
   allora due tinte contrastanti, che lo fanno leggere come iridescente. */
.card-item[data-color="7"], .card-item[data-color-one="7"] {
  --ci: #FF2D9B;
  --ci2: #00C2D1;
}

/* Colore secondario dei bicolore */
.card-item[data-color$="|1"], .card-item[data-color-two="1"] { --ci2: var(--color-category-1); }
.card-item[data-color$="|2"], .card-item[data-color-two="2"] { --ci2: var(--color-category-2); }
.card-item[data-color$="|3"], .card-item[data-color-two="3"] { --ci2: var(--color-category-3); }
.card-item[data-color$="|4"], .card-item[data-color-two="4"] { --ci2: var(--color-category-4); }
.card-item[data-color$="|5"], .card-item[data-color-two="5"] { --ci2: var(--color-category-5); }
.card-item[data-color$="|6"], .card-item[data-color-two="6"] { --ci2: var(--color-category-6); }

/* .ombra-carta esisteva gia dietro ogni carta: diventa la sorgente
   dell'alone. Fallback neutro prima, per i browser senza color-mix.

   A riposo UNA sola ombra, come l'originale: /carte ne renderizza 4512
   in una pagina alta 57.000px e raddoppiarle costa il doppio in paint.
   I due toni dei bicolore compaiono all'hover, dove l'elemento e' uno solo. */
.ombra-carta {
  border-radius: var(--raggio-sm);
  box-shadow: 0 8px 22px 1px rgba(0, 0, 0, .6);
  box-shadow: 0 8px 22px 1px color-mix(in srgb, var(--ci) 48%, transparent);
  transition: box-shadow .24s ease;
}

.card-deck .img-deck-card {
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
}

@media (hover: hover) {
  .img-card:hover {
    transform: translateY(-4px) scale(1.03);
  }

  .card-item:hover .ombra-carta {
    box-shadow: 0 14px 40px 4px rgba(0, 0, 0, .7);
    box-shadow:
      -10px 12px 42px 2px color-mix(in srgb, var(--ci) 72%, transparent),
       10px 12px 42px 2px color-mix(in srgb, var(--ci2) 72%, transparent);
  }

  /* Riflesso foil. Anima background-position e non transform,
     che serve gia al posizionamento dell'elemento. */
  .card-item::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    left: var(--card-inset);
    width: calc(100% - var(--card-inset) * 2);
    border-radius: var(--raggio-sm);
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .30) 50%, transparent 60%);
    background-size: 300% 100%;
    background-position: 135% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: background-position .75s cubic-bezier(.3, .7, .3, 1), opacity .18s ease;
  }

  .card-item:hover::after {
    opacity: 1;
    background-position: -35% 0;
  }
}

/* --------------------------------------------------------
   COLLEZIONE — intestazioni delle espansioni

   Erano testo scuro con contorno bianco sopra l'artwork del set:
   leggibile, ma e' una soluzione da tema chiaro e su fondo scuro
   stona. Qui il contrasto lo da' una velatura sull'artwork, cosi
   il testo torna pulito e senza contorno.

   La specificita' (0,2,1) batte `button.text-shadow-white` di
   progress.css (0,1,1), che viene caricato dopo il tema.
   -------------------------------------------------------- */
.background-set {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background-position: center;
  background-size: cover;
  transition: border-color .18s ease;
}

.background-set::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(7, 14, 21, .94) 0%,
    rgba(7, 14, 21, .80) 42%,
    rgba(7, 14, 21, .58) 100%);
  transition: background .18s ease;
}

/* Questo componente sta sempre sopra una velatura scura, in entrambi i
   temi: l'inchiostro qui e' fisso e non segue --ink, che nel tema chiaro
   diventerebbe scuro su scuro. */
button.text-shadow-white.background-set,
button.text-shadow-white.background-set:hover,
button.text-shadow-white.background-set:active {
  color: #EDF3F4;
  text-shadow: none;
  --bs-btn-color: #EDF3F4;
  --bs-btn-hover-color: #EDF3F4;
  --bs-btn-active-color: #EDF3F4;
}

.background-set:hover { border-color: var(--ottone-scuro); }

.background-set:hover::before {
  background: linear-gradient(90deg,
    rgba(7, 14, 21, .90) 0%,
    rgba(7, 14, 21, .72) 42%,
    rgba(7, 14, 21, .48) 100%);
}

/* Il logo del set stacca dall'artwork velato */
.background-set .img-card-set {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}

/* Conteggi e valore in cifre tabellari */
.background-set .counter-category,
.background-set .price-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.background-set .counter-set { color: #F0CD7E; }

.background-set .fa-circle-chevron-down { color: #A9BAC9; }

/* Barra di completamento: traccia scura, il colore del set resta il suo */
.background-set .progress {
  background-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Le carte non possedute non devono brillare */
.card-item.not-owned .ombra-carta,
.not-owned .ombra-carta {
  box-shadow: none;
}

/* Stati collezione */
.bg-assente { box-shadow: 0 0 0 2px #C4304A, 0 6px 18px -10px #C4304A; }
.bg-mancante { box-shadow: 0 0 0 2px #C98A2A, 0 6px 18px -10px #C98A2A; }
.bg-posseduta { box-shadow: 0 0 0 2px #1E9463, 0 6px 18px -10px #1E9463; }

.not-owned { opacity: .32; filter: saturate(.4); }

.btn-counter-card {
  border-color: var(--abisso);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Riduzione movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   6. STAMPA
   Print & Play e l'export collezione devono restare su fondo
   bianco: qui i token tornano chiari.
   ------------------------------------------------------------ */
@media print {
  :root {
    --abisso: #ffffff;
    --superficie: #ffffff;
    --rialzo: #f4f6f8;
    --linea: #cbd5dd;
    --linea-soft: #e2e8ed;
    --ink: #101820;
    --ink-muted: #4a5966;
  }

  body {
    background: #fff !important;
    color: #101820 !important;
  }

  .bg-white,
  .bg-dark,
  .bg-light,
  .modal-content {
    background-color: #fff !important;
    color: #101820 !important;
    border-color: #cbd5dd !important;
  }

  .text-white,
  .text-dark { color: #101820 !important; }

  .card-item .img-card,
  .card-deck .img-deck-card,
  .img-card,
  .ombra-carta {
    box-shadow: none !important;
  }

  .card-item::after { display: none !important; }

  /* Componenti della fase 4: niente velature ne filetti sulla carta stampata */
  .background-set::before,
  h1.bg-white::after,
  h2.bg-white::after { display: none !important; }

  .background-set {
    background-image: none !important;
    border-color: #cbd5dd !important;
  }

  button.text-shadow-white.background-set,
  .fake-btn,
  .fake-btn.bg-gold,
  #counter-deck {
    color: #101820 !important;
    background: none !important;
  }
}