/* stati.css — Design system "Burraco Gold": STATI DI INTERAZIONE e MOVIMENTO.
 * Un solo posto per: durate/curve (token), hover/pressed/focus/disabled/loading dei componenti
 * globali (bottoni, card, link, righe, campi), spinner, skeleton e transizioni di vista/pagina.
 * Usa i token colore del design (line.css: --oro, --testo, --pannello…) così segue i due temi.
 * La pagina /design-system documenta dal vivo ogni stato; le classi .ds-hover/.ds-attivo/.ds-focus
 * esistono SOLO per quella pagina: forzano lo stato per mostrarlo, con lo stesso identico stile.
 * Il tavolo di gioco (public/bl/index.html) non usa queste classi: non è coinvolto. */

/* ---------- token del movimento: tre durate, due curve. Usarli ovunque, niente valori sparsi ---------- */
:root {
  --durata-veloce: 120ms;   /* feedback immediato: hover, pressed, focus */
  --durata-base: 200ms;     /* cambi di vista, fade, elementi medi */
  --durata-lenta: 320ms;    /* finestre, pannelli grandi */
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);        /* decelerata standard */
  --curva-pop: cubic-bezier(0.3, 1.25, 0.45, 1);  /* leggero rimbalzo, per le finestre */
}

/* ---------- bottoni: base comune (layout + transizioni + pressed + focus + disabled) ---------- */
.bg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--durata-veloce) var(--curva), color var(--durata-veloce) var(--curva),
    border-color var(--durata-veloce) var(--curva), box-shadow var(--durata-base) var(--curva),
    transform var(--durata-veloce) var(--curva), opacity var(--durata-veloce) var(--curva);
}
.bg-btn:not(:disabled):active, .bg-btn.ds-attivo { transform: translateY(1px) scale(0.98); }
.bg-btn:focus-visible, .bg-btn.ds-focus { outline: 3px solid var(--oro); outline-offset: 2px; }
.bg-btn:disabled:not(.bg-caricando) { opacity: 0.45; cursor: not-allowed; }

/* primario (oro pieno): hover schiarisce e si alza, pressed scurisce e si abbassa */
.bg-btn-oro { background: var(--oro); color: var(--su-oro); }
.bg-btn-oro:not(:disabled):hover, .bg-btn-oro.ds-hover {
  background: color-mix(in srgb, var(--oro) 82%, #fff);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--oro) 35%, transparent);
  transform: translateY(-1px);
}
.bg-btn-oro:not(:disabled):active, .bg-btn-oro.ds-attivo {
  background: color-mix(in srgb, var(--oro) 84%, #000);
  box-shadow: none; transform: translateY(1px) scale(0.98);
}
.bg-btn-oro:focus-visible, .bg-btn-oro.ds-focus { outline-color: var(--testo); }  /* ring leggibile sull'oro */

/* secondario "soft" (chip oro con bordo): hover accende il bordo */
.bg-btn-soft { background: var(--oro-chip); color: var(--testo); border: 1px solid var(--oro-bordo); font-weight: 700; }
.bg-btn-soft:not(:disabled):hover, .bg-btn-soft.ds-hover {
  border-color: var(--oro); background: color-mix(in srgb, var(--oro) 16%, var(--oro-chip)); transform: translateY(-1px);
}
.bg-btn-soft:not(:disabled):active, .bg-btn-soft.ds-attivo {
  background: color-mix(in srgb, var(--oro) 26%, var(--oro-chip)); transform: translateY(1px) scale(0.98);
}

/* contorno (trasparente con bordo): per azioni leggere, Rifiuta, × */
.bg-btn-ghost { background: transparent; color: var(--testo); border: 1px solid var(--linea3); font-weight: 600; }
.bg-btn-ghost:not(:disabled):hover, .bg-btn-ghost.ds-hover { background: var(--pannello2); border-color: var(--tratteggio); }
.bg-btn-ghost:not(:disabled):active, .bg-btn-ghost.ds-attivo { background: var(--chip); transform: translateY(1px) scale(0.98); }

/* ---------- card cliccabile (Hall, città, livello): hover si alza + bordo oro, pressed si posa ----------
   !important sul bordo: le card hanno il bordo nel proprio style inline, che altrimenti vincerebbe. */
.bg-card {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--durata-base) var(--curva), border-color var(--durata-veloce) var(--curva),
    box-shadow var(--durata-base) var(--curva), background var(--durata-veloce) var(--curva);
}
.bg-card:not(:disabled):hover, .bg-card.ds-hover {
  transform: translateY(-3px);
  border-color: var(--oro) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, #000 20%, transparent);
}
.bg-card:not(:disabled):active, .bg-card.ds-attivo { transform: translateY(-1px) scale(0.99); box-shadow: 0 6px 16px color-mix(in srgb, #000 16%, transparent); }
.bg-card:focus-visible, .bg-card.ds-focus { outline: 3px solid var(--oro); outline-offset: 2px; }

/* ---------- link testuale (Esplora le Hall, Vedi tutto, breadcrumb) ---------- */
.bg-link { border-radius: 6px; -webkit-tap-highlight-color: transparent; transition: color var(--durata-veloce) var(--curva); }
.bg-link:hover, .bg-link.ds-hover { text-decoration: underline; text-underline-offset: 3px; }
.bg-link svg { transition: transform var(--durata-veloce) var(--curva); }
.bg-link:hover svg, .bg-link.ds-hover svg { transform: translateX(3px); }
.bg-link:focus-visible, .bg-link.ds-focus { outline: 3px solid var(--oro); outline-offset: 2px; }

/* ---------- riga cliccabile (giocatori collegati, voci di elenco) ---------- */
.bg-riga { background: transparent; border-radius: 10px; transition: background var(--durata-veloce) var(--curva); }
.bg-riga:hover, .bg-riga.ds-hover { background: var(--pannello2); }
.bg-riga:focus-visible, .bg-riga.ds-focus { outline: 3px solid var(--oro); outline-offset: -2px; }

/* ---------- campi di testo (il bordo sta nello style inline → !important sul focus) ---------- */
.bg-input { transition: border-color var(--durata-veloce) var(--curva), box-shadow var(--durata-veloce) var(--curva); }
.bg-input:focus, .bg-input.ds-focus {
  outline: none; border-color: var(--oro) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 30%, transparent);
}
.bg-input[aria-invalid="true"] {
  border-color: var(--rosso-testo) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rosso-testo) 22%, transparent);
}
.bg-input:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- caricamento: bottone col lavoro in corso (testo nascosto, spinner al centro) ----------
   Aggiungere la classe + aria-busy="true" mentre l'azione lavora; il testo resta per gli screen reader. */
.bg-caricando { position: relative; pointer-events: none; color: transparent !important; }
.bg-caricando:disabled { opacity: 1 !important; cursor: wait; }   /* sta lavorando: pieno, non spento */
.bg-caricando > * { visibility: hidden; }                /* icone dentro il bottone */
.bg-caricando::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
  border-radius: 50%; border: 2.5px solid var(--colore-spin, var(--su-oro));
  border-top-color: transparent; animation: bg-ruota 0.7s linear infinite;
}
.bg-btn-soft.bg-caricando, .bg-btn-ghost.bg-caricando { --colore-spin: var(--oro); }

/* spinner da solo (splash, pannelli) */
.bg-spinner {
  display: inline-block; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--oro) 25%, transparent);
  border-top-color: var(--oro); animation: bg-ruota 0.8s linear infinite;
}
@keyframes bg-ruota { to { transform: rotate(360deg); } }

/* ---------- skeleton: segnaposto mentre i dati arrivano (niente vuoti, niente salti) ---------- */
.bg-skel {
  position: relative; overflow: hidden; border-radius: 10px;
  background: color-mix(in srgb, var(--testo) 8%, transparent);
  color: transparent !important; pointer-events: none; user-select: none;
}
.bg-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--testo) 8%, transparent), transparent);
  animation: bg-brilla 1.4s var(--curva) infinite;
}
.bg-skel-tondo { border-radius: 50%; }
@keyframes bg-brilla { to { transform: translateX(100%); } }

/* ---------- transizioni di vista e di pagina: mai cambi netti ----------
   .bg-vista  → sul contenuto della lobby quando cambia schermata (key React)
   .bg-vista-route → in app/template.tsx, su ogni cambio di route del sito */
.bg-vista, .bg-vista-route { animation: bg-entra var(--durata-base) var(--curva); }
/* il wrapper del template vive dentro <body> (flex colonna): si comporta da colonna trasparente */
.bg-vista-route { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
@keyframes bg-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- movimento ridotto: sistema (prefers-reduced-motion) o preferenza dell'app ----------
   Gli SPINNER restano: indicano lavoro in corso, non sono decorazione. */
@media (prefers-reduced-motion: reduce) {
  .bg-vista, .bg-vista-route, .bg-skel::after { animation: none !important; }
  .bg-btn, .bg-card, .bg-link, .bg-link svg, .bg-riga, .bg-input { transition: none !important; }
  .bg-btn:not(:disabled):hover, .bg-btn:not(:disabled):active, .bg-btn.ds-hover, .bg-btn.ds-attivo,
  .bg-card:not(:disabled):hover, .bg-card:not(:disabled):active, .bg-card.ds-hover, .bg-card.ds-attivo,
  .bg-link:hover svg, .bg-link.ds-hover svg { transform: none !important; }
}
html[data-animazioni="ridotte"] .bg-vista, html[data-animazioni="ridotte"] .bg-vista-route,
html[data-animazioni="ridotte"] .bg-skel::after { animation: none !important; }
html[data-animazioni="ridotte"] .bg-btn, html[data-animazioni="ridotte"] .bg-card,
html[data-animazioni="ridotte"] .bg-link, html[data-animazioni="ridotte"] .bg-link svg,
html[data-animazioni="ridotte"] .bg-riga, html[data-animazioni="ridotte"] .bg-input { transition: none !important; }
html[data-animazioni="ridotte"] .bg-btn:not(:disabled):hover, html[data-animazioni="ridotte"] .bg-btn:not(:disabled):active,
html[data-animazioni="ridotte"] .bg-card:not(:disabled):hover, html[data-animazioni="ridotte"] .bg-card:not(:disabled):active,
html[data-animazioni="ridotte"] .bg-link:hover svg { transform: none !important; }