/* pages/tournaments.css — tutte le pagine dell'app tournaments
   (presentazione, programma, lista tornei, dettaglio, FAQ, come
   arrivare, albo d'oro, iscrizione, conferma, liste mazzo). Sono la
   stessa app Django e condividono sfondo decorativo locale (.of-bg-*),
   quindi un solo file invece di uno a pagina.

   .of-bg-gradient/.of-bg-lineart erano un <style> identico copiato in
   6 template (presentazione, programma, lista tornei, FAQ, come
   arrivare, liste mazzo) — stesso problema del form del Branco
   duplicato, versione CSS. Consolidati qui, un solo posto da cambiare. */

/* ── Sfondo locale sezione OranguFest ─────────── */
.of-bg-gradient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 140% 120% at 50% 55%,
    rgba(13,10,8,0) 18%, rgba(170,80,10,.12) 50%,
    rgba(200,100,0,.21) 72%, rgba(160,65,0,.32) 100%);
}
.of-bg-lineart {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../../images/Gorilla Lineart sfondo bianco.png');
  background-size: 75%; background-repeat: no-repeat;
  background-position: left bottom;
  mix-blend-mode: screen; opacity: .20;
  filter: invert(1) sepia(.30) saturate(1.9) hue-rotate(-6deg);
  will-change: transform;
}

/* ── Cos'è OranguFest — presentazione + scorciatoie ──────────────
   Sezione introduttiva della home OranguFest: un blocco di testo centrato
   (misura di lettura limitata) e tre card-scorciatoia verso programma,
   iscrizione e lista mazzo. Le figure (icone) sono centrate nel proprio
   box; le card si dispongono su griglia auto-fit e restano centrate anche
   quando i toggle ne nascondono una o due. */
.of-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: var(--section-gap);
}
.of-about-text {
  /* Stessa larghezza del box .hero sopra (piena larghezza di .container):
     prima si fermava a 62ch, molto più stretto della card sopra. */
  width: 100%;
  text-align: center;
  /* .prose-card porta un suo margin-bottom pensato per stare da solo nel
     flusso; qui la spaziatura verso le nav-card la fa già il gap di
     .of-about (flex), quindi si azzera per non sommare i due. */
  margin-bottom: 0;
}
.of-about-text p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1rem;
  /* Il tetto di 68ch di .prose-card p lasciava il testo in una colonna
     stretta a sinistra del box: qui il paragrafo occupa tutta la larghezza. */
  max-width: none;
  text-wrap: wrap;
}
.of-about-text p:last-child { margin-bottom: 0; }
.of-about-text strong { color: var(--text); }

/* Stessa griglia e stessa taglia-carta di .cards/.card (chi-siamo-branco.css
   → .cs-vals): erano card centrate con icona da 56px su una griglia a
   240px, quindi con 2-3 sole voci finivano stirate enormi e vuote nel
   mezzo. Ora riusano le proporzioni compatte delle card "I nostri valori". */
.of-nav-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
  gap: 1.25rem;
}
/* Con una sola scorciatoia attiva la card non si stira su tutta la riga */
.of-nav-cards:has(> .of-nav-card:only-child) { grid-template-columns: minmax(var(--card-min-width), 320px); }

.of-nav-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.of-nav-card:hover,
.of-nav-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--copper);
  box-shadow: var(--shadow-md), var(--glow-copper);
}
.of-nav-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  background: var(--copper-glow);
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
}
.of-nav-card-icon svg { width: 22px; height: 22px; display: block; }
.of-nav-card-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--copper-bright);
  margin-bottom: .35rem;
}
.of-nav-card-desc {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.of-nav-card-arrow {
  margin-top: .75rem;
  color: var(--copper-bright);
  font-size: .95rem;
  transition: transform .18s ease;
}
.of-nav-card:hover .of-nav-card-arrow { transform: translateX(4px); }

/* Bagliore a cursore sulle .tcard (static/js/tournament-cards.js) */
.tcard-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: var(--radius-md);
  transition: background .1s;
}

/* ── Dettaglio: meta-list condivisa ────────────
   Nome fuorviante ereditato dallo split: non è solo "tournament
   detail", è .detail-grid/.detail-meta/.meta-label usati anche dalla
   sidebar di decklist_form.html. */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}

.detail-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.detail-meta li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  color: var(--text-muted);
  padding: .5rem 0;
  border-bottom: 1px solid rgba(200,121,65,0.08);
}

.meta-label {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  min-width: min(140px, 38%);
}

/* ── Tournament list ─────────────────────────── */
/* Intestazione del giorno: più evidente dell'ornamento normale */
.ornament.tday {
  font-size: .95rem;
  font-weight: 700;
  color: var(--copper);
  margin-bottom: 1.4rem;
}

.tcard-time {
  font-weight: 700;
  color: var(--text);
}

.tlist {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.tcard {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.tcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  opacity: 0;
  transition: opacity .25s;
  z-index: 4;
  pointer-events: none;
}

.tcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--glow-copper);
  border-color: var(--copper);
}
.tcard:hover::before { opacity: 1; }

.tcard--full { opacity: .72; }
.tcard--full:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--copper-border); }

/* image col */
.tcard-img {
  position: relative;
  overflow: hidden;
  background: var(--surface-mid);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tcard-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.tcard:hover .tcard-img img { transform: scale(1.05); }

.tcard-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(13,10,8,.55));
  pointer-events: none;
}

.tcard-img--placeholder { background: var(--surface-mid); }

.tcard-format-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  font-family: 'Cinzel', serif;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--copper-bright);
  background: rgba(13,10,8,.8);
  border: 1px solid var(--copper-border);
  border-radius: 999px;
  padding: .22rem .72rem;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* body col */
.tcard-body {
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.tcard-top { flex: 1; }

.tcard-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text);
  margin: 0 0 .5rem;
}

.tcard-desc {
  color: var(--text-muted);
  font-size: .97rem;
  line-height: 1.65;
  margin: 0;
}

/* meta strip */
.tcard-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: .7rem 0;
  border-top: 1px solid rgba(200,121,65,.1);
  border-bottom: 1px solid rgba(200,121,65,.1);
}

.tcard-meta-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .92rem;
  color: var(--text-muted);
}

.tcard-meta-label {
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
}

/* actions */
.tcard-actions {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.tcard-cta { min-width: 120px; justify-content: center; }

.tcard-detail-link {
  font-size: .68rem;
}

.tcard-full-label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Tournament detail ───────────────────────── */
.tdetail { display: flex; flex-direction: column; gap: 1.25rem; }

.tdetail-hero {
  position: relative;
  border: var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  min-height: 240px;
}

.tdetail-cover { position: absolute; inset: 0; }
.tdetail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdetail-cover-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13,10,8,.92) 30%, rgba(13,10,8,.35));
}

.tdetail-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,3rem);
  max-width: 580px;
}
.tdetail-hero-content--noimg { max-width: 100%; }
.tdetail-hero-content h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--text);
  margin: .5rem 0 .75rem;
  line-height: 1.05;
}
.tdetail-hero-content p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; margin: 0; }

.tdetail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Colonna orizzontale a 3 riquadri sempre stata troppo stretta per il
   testo: .tdetail-steps vive nella metà destra di .tdetail-grid (due
   colonne), mai più di ~500px anche a container pieno — 3 box da ~140px
   non hanno spazio per frasi come "Compila nome, cognome ed email" e
   vanno a capo parola per parola. Impilati in verticale invece che solo
   sotto i 900px: qui non c'era abbastanza colonna nemmeno da desktop. */
.tdetail-steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  margin: 1rem 0;
}

.tstep {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface-mid);
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-sm);
  padding: .5rem .8rem;
}

.tstep-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--copper);
  color: var(--bg);
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tstep-text { font-size: .875rem; color: var(--text-muted); line-height: 1.3; }
/* La sequenza è già leggibile dai numeri nei pallini: la freccia
   orizzontale non serve più impilati in verticale (vedi .tdetail-steps). */
.tstep-arrow { display: none; }

/* ── Registration form ───────────────────────── */
.reg-page { display: flex; flex-direction: column; gap: var(--section-gap); }

/* Immagine del torneo nel riepilogo iscrizione — figura centrata nel box,
   ritagliata a proporzione fissa così card con e senza immagine caricata
   restano coerenti. */
.reg-image {
  margin: 0 0 1.25rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--copper-border);
  background: var(--surface-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Il fallback brandizzato (lineart) non va tagliato come una foto: sta al
   centro, contenuto e a bassa intensità, coerente con lo sfondo del sito. */
.reg-image img.reg-image--brand {
  object-fit: contain;
  padding: 1.25rem;
  opacity: .8;
  filter: invert(1) sepia(.3) saturate(1.9) hue-rotate(-6deg);
}

.reg-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: 1.25rem;
  align-items: start;
}

.form-section-label {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1.1rem;
}

.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .85rem;
}

.reg-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.field-optional {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: .875rem;
  color: var(--text-dim);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.field-hint {
  color: var(--text-dim);
  font-size: .875rem;
  margin: .2rem 0 .6rem;
  line-height: 1.5;
}

.field-hint code {
  background: var(--surface-mid);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-family: monospace;
  font-size: .875rem;
  color: var(--copper-bright);
}

.field-error {
  display: block;
  color: var(--danger-text);
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: .3rem;
}

.reg-privacy {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  background: var(--surface-mid);
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-sm);
}

.reg-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.55;
  cursor: pointer;
}

.reg-privacy-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: .05rem;
  accent-color: var(--copper);
  flex-shrink: 0;
  cursor: pointer;
}

.reg-submit {
  width: 100%;
  justify-content: center;
  padding: .9rem 1.75rem;
  font-size: .72rem;
}

.reg-paypal-note {
  color: var(--text-dim);
  font-size: .875rem;
  text-align: center;
  margin: .75rem 0 0;
  line-height: 1.5;
}

/* summary sidebar */
.reg-total-row {
  border-top: var(--rule) !important;
  margin-top: .25rem;
  padding-top: .75rem !important;
}

.reg-total {
  color: var(--copper-bright);
  font-size: 1.15rem;
}

/* Prima 3 riquadri fianco a fianco in un aside da --sidebar-width (300px):
   ~85px l'uno, con "Paga con PayPal" spezzata su 3 righe di una parola.
   Impilati in verticale, la riga di connessione orizzontale non serve
   più (i pallini numerati bastano). */
.reg-summary-steps {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--rule);
}

.reg-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.reg-step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--copper-glow);
  border: 1px solid var(--copper-border);
  color: var(--copper-bright);
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.reg-step-line { display: none; }

/* ── Registration success ────────────────────── */
.reg-success-checkmark {
  width: 56px; height: 56px;
  margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(108,196,74,.08);
  border: 1px solid rgba(108,196,74,.25);
  border-radius: 50%;
}

.success-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.success-step {
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.success-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper-dim), transparent);
}

.success-step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--copper);
  color: var(--bg);
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .85rem;
}

.success-step-body h3 {
  font-family: 'Cinzel', serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin: 0 0 .5rem;
}
.success-step-body p { color: var(--text-muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* Prima .success-recap aveva un max-width proprio (520px), diverso dal
   box "Riepilogo" di decklist_expired/locked/rate_limited (500-520px) e
   dalle altre pagine a box singolo — tolto: tutte ora occupano la piena
   larghezza di --container-wide, la stessa dappertutto. */

.success-recap-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* ── Decklist form ───────────────────────────── */
.decklist-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: 1.25rem;
  align-items: start;
}

/* Verde tenuto di proposito — stesso ruolo di .cs-form-success: stato
   di conferma/successo (lista caricata), non decorazione di brand. */
.decklist-status-ok {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(108,196,74,.07);
  border: 1px solid rgba(108,196,74,.25);
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  color: var(--accent-green);
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.1rem;
}

.decklist-status-missing {
  background: rgba(200,121,65,.07);
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-sm);
  padding: .65rem 1rem;
  color: var(--copper-bright);
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 1.1rem;
}

.decklist-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.decklist-or::before,.decklist-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--copper-border);
}

.decklist-existing-pdf {
  color: var(--text-muted);
  font-size: .88rem;
  margin: .4rem 0 0;
}

.decklist-tip h2 { color: var(--copper-bright) !important; }
.decklist-tip p { color: var(--text-muted); font-size: .92rem; }

input[type="file"] {
  color: var(--text-muted);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: .95rem;
  padding: .6rem 0;
  cursor: pointer;
}

/* ── Decklist lookup ─────────────────────────── */
.lookup-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: 1.25rem;
  align-items: start;
}

/* .detail-meta/.meta-label (sopra) sono pensati per valori brevi su una
   riga (un formato, una data) — qui .lookup-help li riusa con frasi
   intere ("Nella pagina di conferma trovi il codice..."), che dentro
   --sidebar-width (300px) meno il --meta-label min-width (140px)
   restavano compresse in una colonna da ~90px e andavano a capo una
   parola per riga. Impilate invece che affiancate. */
.lookup-help .detail-meta li {
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
}
.lookup-help .meta-label { min-width: 0; }

.lookup-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: 1rem;
}

.lookup-field label {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0;
}

.lookup-token-input {
  font-family: monospace !important;
  font-size: 1rem !important;
  letter-spacing: .04em;
}

.lookup-submit {
  width: 100%;
  justify-content: center;
  margin-top: .5rem;
}

/* ── Token box (pagina conferma) ─────────────── */
.token-box {
  background: var(--surface);
  border: 2px solid var(--copper);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-copper);
}

.token-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--copper-bright), transparent);
}

.token-box-label {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.token-code {
  font-family: monospace;
  font-size: 1.1rem;
  color: var(--copper-bright);
  background: var(--surface-mid);
  border: 1px solid var(--copper-border);
  border-radius: var(--radius-sm);
  padding: .85rem 1.25rem;
  letter-spacing: .08em;
  word-break: break-all;
  margin-bottom: 1.25rem;
  user-select: all;
}

.token-box-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.token-copy-btn {
  transition: color .2s, border-color .2s;
}
/* Stato "copiato" — era manipolazione di style.color/borderColor con hex
   scritto a mano nello script inline; stesso ruolo delle altre conferme
   verdi del sito (.decklist-status-ok, .cs-form-success). */
.token-copy-btn--done {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

.token-note {
  color: var(--text-dim);
  font-size: .88rem;
  line-height: 1.6;
  margin: 0;
}

.token-note strong { color: var(--text-muted); }
.token-note a { color: var(--copper); }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .tcard           { grid-template-columns: 1fr; }
  .tcard-img       { min-height: 160px; }
  .tcard-img-overlay { background: linear-gradient(to top, rgba(13,10,8,.75), transparent); }
  .tdetail-grid    { grid-template-columns: 1fr; }
  .reg-layout      { grid-template-columns: 1fr; }
  .decklist-layout { grid-template-columns: 1fr; }
  .success-steps   { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .detail-grid { grid-template-columns: 1fr; }
  .lookup-layout { grid-template-columns: 1fr; }
  .token-code { font-size: .88rem; }
}

@media (max-width: 600px) {
  .reg-row         { grid-template-columns: 1fr; }
  .tcard-meta      { gap: .85rem; }
  .tcard-actions   { flex-wrap: wrap; }
  .success-recap-actions { flex-direction: column; }
}