/* ============================================================
   FRD Client Management - stile replicato dal progetto Unity
   Sfondo crema, card bianche con bordo beige, bottoni gradiente
   rosa->arancio, icone funzionalità viola->blu, font Open Sans.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
  --bg: #f2efe3;
  --bg-soft: #eceade;
  --card: #ffffff;
  --border: #e3dec8;
  --border-strong: #d6d0b4;
  --ink: #323232;
  --ink-soft: #6b6b64;
  --accent-a: #fa0f9c;
  --accent-b: #ffa61c;
  --func-a: #9e5cf7;
  --func-b: #2fb1f5;
  --green-a: #8ed438;
  --green-b: #5aa41c;
  --red: #c0392b;
  --shadow: 0 6px 18px rgba(80, 70, 40, .12);

  /* Stessi colori del marchio, portati al carico che serve perche' il testo
     bianco sopra si legga (4.5:1, come chiede lo standard). I --accent-*
     restano quelli originali e continuano a vestire spinner, slider e bordi,
     dove non c'e' testo sopra e il contrasto non e' in gioco. */
  --btn-a: #e3058a;        /* rosa bottone   - bianco sopra: 4.51:1 */
  --btn-b: #a86600;        /* ambra bottone  - bianco sopra: 4.60:1 */
  --btn-green-a: #54821c;  /* verde chiaro   - bianco sopra: 4.58:1 */
  --btn-green-b: #488316;  /* verde scuro    - bianco sopra: 4.63:1 */
  --accent-text: #cf047e;  /* rosa per il testo su fondo chiaro: 4.59:1 */
  --green-text: #427815;   /* verde per il testo su fondo chiaro: 4.64:1 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

body {
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%),
    var(--bg);
  min-height: 100vh;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- schermate ---------- */
.screen { display: none; flex: 1; flex-direction: column; align-items: center; padding: 24px; }
.screen.active { display: flex; }

/* ---------- tipografia ---------- */
.title-xl { font-weight: 800; font-size: clamp(26px, 4vw, 44px); letter-spacing: .5px; text-align: center; }
.title-lg { font-weight: 800; font-size: clamp(20px, 3vw, 32px); letter-spacing: .5px; }
.subtitle { color: var(--ink-soft); font-weight: 600; }

/* ---------- card ---------- */
.card {
  background: var(--card);
  border: 6px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 28px;
}

/* ---------- login ---------- */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.login-card {
  width: min(430px, 92vw);
  text-align: center;
  position: relative;
  padding-top: 84px;
  margin-top: 70px;
}
.login-logo {
  width: 132px; height: 132px;
  position: absolute; top: -66px; left: 50%; transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--border);
  object-fit: contain;
}
.field { text-align: left; margin: 14px 0; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; letter-spacing: .5px; }
.field input {
  width: 100%;
  padding: 12px 16px;
  font: inherit; font-weight: 600;
  border: 3px solid var(--border);
  border-radius: 14px;
  background: #fbfaf5;
  outline: none;
}
.field input:focus { border-color: var(--accent-b); }

.error-text { color: var(--red); font-weight: 700; min-height: 22px; font-size: 14px; margin-top: 8px; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; letter-spacing: .5px;
  color: #fff; cursor: pointer; border: none;
  border-radius: 999px;
  padding: 12px 34px;
  background: linear-gradient(90deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 4px 10px rgba(227, 5, 138, .32), inset 0 2px 3px rgba(255,255,255,.32);
  transition: transform .08s ease, filter .15s ease;
  text-transform: uppercase;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn:disabled { filter: grayscale(.8) brightness(.9); cursor: not-allowed; }

.btn-green {
  background: linear-gradient(180deg, var(--btn-green-a), var(--btn-green-b));
  box-shadow: 0 4px 10px rgba(72, 131, 22, .32), inset 0 2px 3px rgba(255,255,255,.3);
}
.btn-red {
  background: linear-gradient(180deg, #e74c3c, #b93222);
  box-shadow: 0 4px 10px rgba(185, 50, 34, .35), inset 0 2px 3px rgba(255,255,255,.35);
}
.btn-small { padding: 8px 20px; font-size: 13px; }
.btn-ghost {
  background: #fff; color: var(--ink);
  border: 3px solid var(--border);
  box-shadow: none;
}

/* freccia indietro */
.back-btn {
  position: absolute; top: 18px; left: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: #fff; color: var(--ink);
  font-size: 26px; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  z-index: 20;
}
.back-btn:hover { background: var(--bg-soft); }

/* ---------- header schermata ---------- */
.screen-header {
  width: 100%; max-width: 1100px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin: 12px 0 26px;
  min-height: 56px;
}

/* ---------- dashboard app (griglia) ---------- */
.apps-grid {
  width: 100%; max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.app-card {
  text-align: center;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.app-card img.app-icon {
  width: 110px; height: 110px; object-fit: contain;
  border-radius: 22px;
  background: #fff;
  border: 3px solid var(--border);
}
.app-card .app-name { font-weight: 800; font-size: 18px; word-break: break-word; }
.app-card.expired { opacity: .55; }
.app-card .expired-warning { color: var(--red); font-weight: 700; font-size: 13px; }
.no-apps { color: var(--ink-soft); font-weight: 700; font-size: 18px; margin-top: 40px; text-align: center; }

/* ---------- app config (schermata funzionalità) ---------- */
.appconfig-layout {
  width: 100%; max-width: 1100px;
  display: grid; grid-template-columns: 340px 1fr; gap: 26px;
  align-items: start;
}
@media (max-width: 860px) { .appconfig-layout { grid-template-columns: 1fr; } }

.appconfig-left { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.appconfig-left img.app-icon {
  width: 160px; height: 160px; object-fit: contain;
  border-radius: 28px; background: #fff; border: 4px solid var(--border);
}
.func-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}
.func-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--card);
  border: 4px solid var(--border);
  border-radius: 22px;
  padding: 18px 10px;
  cursor: pointer;
  font: inherit; font-weight: 800; font-size: 14px; color: var(--ink);
  text-transform: uppercase;
  transition: transform .08s ease, box-shadow .15s ease;
}
.func-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.func-btn img { width: 74px; height: 74px; }
.func-btn:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(1); }

/* ---------- analytics ---------- */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; width: 100%; max-width: 1100px;
}
.stat-card { text-align: center; padding: 22px 12px; }
.stat-card .stat-value {
  font-size: clamp(24px, 3.2vw, 40px); font-weight: 800;
  /* la durata puo' essere lunga ("12 min 30 s"): si rimpicciolisce da sola
     invece di andare a capo spezzandosi in due righe */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label { color: var(--ink-soft); font-weight: 700; margin-top: 4px; }

.chart-card { width: 100%; max-width: 1100px; margin-top: 22px; }
.chart-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.chart-controls select {
  font: inherit; font-weight: 700;
  padding: 8px 14px;
  border: 3px solid var(--border); border-radius: 12px; background: #fbfaf5;
  outline: none; cursor: pointer;
}
.chart-scroll { width: 100%; overflow-x: auto; }
#statsChart, .stats-chart-canvas { display: block; }
.chart-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft); flex-wrap: wrap; }
.chart-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- liste (tickets, leads, clienti) ---------- */
.list-wrap { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 14px; }
.list-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
}
.list-item .grow { flex: 1; min-width: 0; }
.list-item .item-title { font-weight: 800; font-size: 17px; word-break: break-all; }
.list-item .item-sub { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.list-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ticket-code { font-weight: 800; font-size: 18px; letter-spacing: 1px; }
.ticket-reward { color: var(--accent-text); font-weight: 800; }
.ticket-redeemed { color: var(--green-text); font-weight: 700; font-size: 13px; }
.ticket-pending { color: var(--ink-soft); font-weight: 700; font-size: 13px; }

/* ---------- QR ---------- */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.qr-wrap canvas { border: 6px solid var(--border); border-radius: 18px; background: #fff; max-width: min(70vw, 420px); height: auto; }

/* ---------- admin: form / editor ---------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; }
.editor-layout {
  width: 100%; max-width: 1100px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start;
}
@media (max-width: 900px) { .editor-layout { grid-template-columns: 1fr; } }

.toggle-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.toggle-row label.tlabel { font-weight: 800; flex: 1; text-transform: uppercase; font-size: 14px; }
.switch { position: relative; width: 58px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #cfcaba; border-radius: 999px; transition: .2s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 24px; height: 24px;
  left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.switch input:checked + .slider { background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); }
.switch input:checked + .slider::before { transform: translateX(28px); }

.inline-input { display: flex; gap: 10px; align-items: center; }
.inline-input input { flex: 1; }

/* AGGIUNGI GIOCO (admin): la riga aveva tre pezzi con larghezza minima fissa e
   nessun limite sulla scheda - sul telefono sbordava dallo schermo da tutti e
   due i lati. Adesso la scheda sta nella colonna e i pezzi vanno a capo. */
.riga-aggiungi {
  width: 100%; max-width: 1000px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.campo-riga {
  flex: 1 1 200px; min-width: 0; padding: 10px 14px;
  font: inherit; font-weight: 700;
  border: 3px solid var(--border); border-radius: 12px;
  background: #fbfaf5; outline: none;
}
input.campo-riga { font-weight: 600; }
@media (max-width: 640px) {
  .riga-aggiungi .campo-riga, .riga-aggiungi > .btn { flex: 1 1 100%; width: 100%; }
}

.date-row { display: flex; gap: 10px; align-items: center; }
.date-row select {
  font: inherit; font-weight: 700; padding: 8px 10px;
  border: 3px solid var(--border); border-radius: 12px; background: #fbfaf5;
}

/* icona cycler */
.icon-cycler { display: flex; align-items: center; gap: 14px; justify-content: center; }
.icon-cycler img { width: 110px; height: 110px; object-fit: contain; border-radius: 18px; border: 3px solid var(--border); background: #fff; }
.cycler-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--border); background: #fff; cursor: pointer;
  font-size: 20px; font-weight: 800; color: var(--ink);
}
.cycler-arrow:hover { background: var(--bg-soft); }
.icon-cycler .icon-name { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: center; word-break: break-all; }

/* ---------- client row (admin dashboard) ---------- */
.client-row { justify-content: space-between; }
.client-row .client-id { font-weight: 800; font-size: 18px; word-break: break-all; }

/* ---------- toast / avvisi ---------- */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-weight: 700;
  padding: 12px 26px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 100; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; }

/* ---------- loading overlay ---------- */
#loading {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  background: rgba(242, 239, 227, .88);
  z-index: 90;
}
#loading.show { display: flex; }
#loading .spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 7px solid var(--border);
  border-top-color: var(--accent-a);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading .loading-text { font-weight: 800; letter-spacing: 1px; }

/* ---------- modale conferma ---------- */
.modal-backdrop {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(50, 50, 50, .45); z-index: 95;
}
.modal-backdrop.show { display: flex; }
.modal { width: min(420px, 92vw); text-align: center; }
.modal .modal-msg { font-weight: 700; margin: 10px 0 22px; }
.modal .modal-actions { display: flex; gap: 14px; justify-content: center; }

/* header piccolo con logo */
.brand-mini {
  position: absolute; top: 16px; right: 22px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: 1px; color: var(--ink-soft);
  z-index: 10;
}
.brand-mini img { width: 44px; height: 44px; }

/* ---------- spinner caricamento icone/loghi ---------- */
.icon-box { position: relative; display: inline-block; line-height: 0; }
.icon-box img { display: block; }
.icon-box.icon-loading img { opacity: .25; }
.icon-box.icon-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 30px; height: 30px;
  border: 4px solid var(--border);
  border-top-color: var(--accent-a);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */
input, select, textarea, button { font-size: 16px; } /* niente auto-zoom iOS */

@media (max-width: 900px) {
  .appconfig-layout, .editor-layout { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
  .screen { padding: 14px 12px 30px; }
  .screen-header { margin: 6px 0 16px; min-height: 46px; padding: 0 48px; }
  .title-xl { font-size: 24px; }
  .title-lg { font-size: 19px; }
  .brand-mini { display: none; }

  .back-btn { width: 44px; height: 44px; font-size: 20px; top: 12px; left: 12px; }
  .screen-header .back-btn { top: 0; }

  .card { padding: 18px 14px; border-width: 4px; border-radius: 20px; }
  .login-card { padding-top: 66px; margin-top: 58px; width: 100%; }
  .login-logo { width: 100px; height: 100px; top: -50px; }

  .btn { padding: 12px 20px; font-size: 14px; }
  .btn-small { padding: 9px 14px; font-size: 12px; }

  .apps-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .app-card { padding: 14px 10px; gap: 8px; }
  .app-card img.app-icon { width: 78px; height: 78px; }
  .app-card .app-name { font-size: 15px; }

  .appconfig-left img.app-icon { width: 120px; height: 120px; }
  .func-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .func-btn { padding: 14px 8px; font-size: 12px; }
  .func-btn img { width: 54px; height: 54px; }

  .stats-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 16px 8px; }
  .stat-card .stat-value { font-size: 26px; }
  .stat-card .stat-label { font-size: 12px; }

  .chart-controls { flex-direction: column; align-items: stretch; }
  .chart-controls select { width: 100%; }

  .list-item { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .list-item .grow { min-width: 0; }
  .list-actions { display: flex; width: 100%; }
  .list-actions .btn { flex: 1; white-space: nowrap; }
  .client-row .client-id { font-size: 16px; }

  .inline-input { flex-direction: column; align-items: stretch; gap: 8px; }
  .inline-input .btn { width: 100%; }

  .date-row { flex-wrap: wrap; }
  .date-row select { flex: 1; min-width: 70px; }

  .icon-cycler { gap: 10px; }
  .icon-cycler img { width: 90px; height: 90px; }
  .cycler-arrow { width: 42px; height: 42px; }

  .qr-wrap canvas { max-width: 82vw; }
  #toast { bottom: 16px; font-size: 14px; padding: 10px 20px; }
}

@media (max-width: 380px) {
  .apps-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MOBILE - seconda passata (03/09/2026)
   Il pannello si usa dal telefono almeno quanto dal computer: il cliente
   controlla i lead dal locale, e chi consegna i ticket ha in mano il telefono,
   non un portatile. Qui si sistemano le cose che sul telefono rompevano:
   parole spezzate a meta', bersagli sotto il dito, righe che sbordavano di
   lato, e il testo che si seleziona invece di far partire il tocco.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

/* Le parole lunghe (Cliente_Gioco, email, link) vanno spezzate dove serve
   invece di allargare la pagina di lato.
   NB: non si mette `overflow-x: hidden` su body - farebbe di body un
   contenitore di scorrimento e la barra SALVA MODIFICHE, che e' sticky,
   smetterebbe di restare agganciata in fondo. */
.app-name, .item-title, .item-sub, .client-id, .tn-identificativo,
.listino-nome, .lead-mail, .stat-label { overflow-wrap: anywhere; }

/* Il tocco su una scheda deve aprire la scheda, non selezionarne il titolo:
   sul telefono un dito che indugia trasforma il tap in una selezione e
   sembra che il pannello non risponda. I dati che si copiano davvero
   (codici, email) restano selezionabili piu' sotto. */
.app-card, .func-btn, .stat-card, .tk-testa, .btn, .back-btn,
.tk-filtri button { -webkit-user-select: none; user-select: none; }
.tk-cod b, .item-sub.selezionabile, .qr-url { -webkit-user-select: all; user-select: all; }

/* Il pollice non ha la mira del mouse: 44px sono il minimo, anche per i
   bottoni "piccoli" e per le frecce del selettore di icona. */
@media (max-width: 860px), (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn-small { min-height: 44px; padding: 10px 16px; }
  .link-btn, .link-inline { min-height: 44px; display: inline-flex; align-items: center; }
  .tk-x { width: 30px; height: 30px; font-size: 20px; opacity: .8; }
  .tk-cod { padding-right: 38px; }
}

@media (max-width: 640px) {
  /* Il saluto era lungo quanto lo schermo e andava a capo in mezzo al nome. */
  .subtitle, #welcomeText { font-size: 13px; overflow-wrap: anywhere; }

  /* Il nome del gioco si adatta alla colonna invece di spezzarsi:
     "Wheel_Of_Fortune" andava a capo lasciando una "e" da sola. */
  .app-card .app-name { font-size: clamp(11px, 3.4vw, 15px); line-height: 1.25; }

  /* Schermata TICKETS: la barra diventa due righe piene invece di quattro
     pezzi incastrati. La ricerca sta sopra, filtri e azioni sotto. */
  .tk-barra-strumenti { gap: 8px; }
  .tk-barra-strumenti input[type="search"] { flex: 1 1 100%; }
  .tk-filtri { flex: 1 1 100%; }
  .tk-filtri button { flex: 1; padding: 10px 6px; font-size: 13px; }
  .tk-barra-azioni { flex: 1 1 100%; margin-left: 0; }
  .tk-barra-azioni .btn { flex: 1; }
  .tk-intro { font-size: 13px; padding: 10px 12px; }

  /* Un blocco su telefono: premio e conteggio su due righe, barra a tutta
     larghezza sotto, freccia in alto a destra. Prima si accavallavano. */
  .tk-testa { gap: 8px; padding: 14px; position: relative; padding-right: 40px; }
  .tk-testa-testo { flex: 1 1 100%; }
  .tk-conta { flex-direction: row; align-items: baseline; gap: 8px; flex: 1 1 100%; }
  .tk-conta b { font-size: 18px; }
  .tk-barra { flex: 1 1 100%; }
  .tk-freccia { position: absolute; top: 14px; right: 14px; }
  .tk-azioni .btn { flex: 1 1 auto; }
  .tk-corpo { padding: 0 14px 14px; }

  /* La griglia delle funzioni con nomi lunghi (LEADERBOARD, GENERA QR) */
  .func-btn { overflow-wrap: anywhere; }

  /* Le righe di campi (GENERA TICKET, filtri della classifica) su telefono
     vanno a capo per intero invece di stringersi: un <select> non si stringe
     sotto la sua opzione piu' lunga, e "Detto a voce o stampato: la persona
     scrive il codice" sbordava fuori dallo schermo trascinandosi dietro tutta
     la pagina. Verificato: scrollWidth > clientWidth sulla schermata TICKETS. */
  .lb-riga { gap: 8px; }
  .lb-riga select,
  .lb-riga input[type="text"],
  .lb-riga input[type="date"],
  .lb-riga input[type="number"] { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; }
  .lb-riga label { flex: 1 1 100%; }
  /* Quanti / Lunghezza restano affiancati: sono due numeri corti e separarli
     su due righe allungherebbe il modulo per niente. */
  #tkQuanti, #tkLunghezza { flex: 1 1 40% !important; width: auto !important; }

  /* Tre riquadri stanno in tre colonne, non due piu' un orfano che si porta
     via mezzo schermo. Quando sono quattro (Analytics) restano due e due. */
  .stats-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stats-row:has(> :nth-child(3):last-child) .stat-card { padding: 14px 4px; }
  .stats-row:has(> :nth-child(3):last-child) .stat-value { font-size: 22px; }
  .stats-row:has(> :nth-child(3):last-child) .stat-label { font-size: 11px; }
}

/* Telefoni con la tacca: il contenuto non deve finirci sotto. */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    .screen {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(30px, env(safe-area-inset-bottom));
    }
    .barra-salva { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  }
}

/* ---------- link di servizio (login) ---------- */
/* Il testo resta della stessa misura: e' il padding a portare l'area
   toccabile oltre i 24px richiesti da WCAG 2.2, senza cambiare l'aspetto. */
.link-inline {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 6px 4px;
  font-size: 13px; text-decoration: underline;
  border-radius: 8px;
}
.link-inline:focus-visible {
  outline: 3px solid var(--btn-a); outline-offset: 2px; text-decoration: none;
}

/* ---------- telefoni con la tacca ---------- */
/* Senza questo, sugli iPhone recenti i comandi in fondo alla pagina
   finiscono sotto la barra di sistema. */
#app {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.brand-mini { top: max(16px, env(safe-area-inset-top)); }
.back-btn { top: max(18px, env(safe-area-inset-top)); }

/* ---------- zona di rilascio dei loghi ---------- */
.dropzone {
  width: 100%; max-width: 1000px; margin-bottom: 22px;
  border: 3px dashed var(--border-strong); border-radius: 26px;
  background: var(--card);
  padding: 30px 22px; text-align: center; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.dropzone:hover { border-color: var(--btn-a); }
.dropzone:focus-visible { outline: 3px solid var(--btn-a); outline-offset: 3px; }
/* mentre il file e' sospeso sopra: si deve capire che si puo' lasciare qui */
.dropzone.is-over {
  border-color: var(--btn-green-b);
  background: #f4faee;
  transform: scale(1.01);
}
.dropzone-icon { font-size: 34px; line-height: 1; color: var(--ink-soft); margin-bottom: 6px; }
.dropzone.is-over .dropzone-icon { color: var(--btn-green-b); }
.dropzone-title { font-weight: 800; font-size: 18px; }
.dropzone-hint { color: var(--ink-soft); font-weight: 600; font-size: 14px; margin-top: 4px; }

/* ---------- ricerca fra i loghi ---------- */
.icon-results {
  margin-top: 10px;
  max-height: 260px; overflow-y: auto;
  border-radius: 14px;
}
.icon-results:not(:empty) { border: 3px solid var(--border); background: #fbfaf5; }
.icon-result {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 12px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--ink);
  text-align: left; border-bottom: 1px solid var(--border);
}
.icon-result:last-child { border-bottom: none; }
.icon-result:hover, .icon-result:focus-visible { background: var(--bg-soft); outline: none; }
.icon-result.is-current { background: #fdf1e3; }
.icon-result img {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  background: #fff; border: 2px solid var(--border); border-radius: 8px;
}
.icon-result .nome { flex: 1; word-break: break-word; }
.icon-result .marca { font-size: 11px; font-weight: 800; color: var(--green-text); letter-spacing: .06em; }
.icon-results-info { padding: 10px 12px; color: var(--ink-soft); font-weight: 600; font-size: 13px; }

/* Un bottone con display:flex ignora l'attributo hidden: senza questa riga
   le funzioni non disponibili resterebbero visibili. */
.func-btn[hidden] { display: none; }

/* ===================== Classifica filtrata e contest ===================== */
.lb-filtri { margin-bottom: 18px; }
.lb-riga {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.lb-riga:last-child { margin-bottom: 0; }
/* display:flex vince sull'attributo hidden: senza questa riga i campi
   "Dal / Al" restavano a vista anche con "Questa settimana" selezionato.
   Stessa trappola gia' vista sui .func-btn. */
.lb-riga[hidden] { display: none; }
.lb-riga label { font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.lb-riga select, .lb-riga input[type="date"] {
  padding: 8px 12px; font: inherit; font-weight: 700;
  border: 3px solid var(--border); border-radius: 12px; background: #fbfaf5;
}
.lb-riga-classifica { display: flex; align-items: center; gap: 12px; }
.lb-pos {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
}
/* Oro, argento, bronzo: il podio si deve riconoscere senza leggere il numero. */
.lb-podio-1 .lb-pos { background: #e8b830; }
.lb-podio-2 .lb-pos { background: #c7c7cf; }
.lb-podio-3 .lb-pos { background: #cd8b52; }
.lb-punti { font-weight: 900; font-size: 19px; font-variant-numeric: tabular-nums; }

/* ===================== Profili giocatore ===================== */
.ps-griglia {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 18px; align-items: baseline;
}
.ps-etichetta { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.ps-valore { font-weight: 800; font-size: 16px; word-break: break-word; }

/* Albero JSON: e' quello che rende leggibile il salvataggio di un gioco
   qualunque, anche di uno che non rispetta il formato condiviso. */
.json-albero { font-size: 14px; line-height: 1.6; }
.json-albero details { margin: 2px 0; }
.json-albero summary {
  cursor: pointer; font-weight: 800; color: var(--ink-soft);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 0; min-height: 24px; display: flex; align-items: center;
}
.jv-figli { padding-left: 16px; border-left: 2px solid var(--border); margin-left: 4px; }
.jv-riga { display: flex; gap: 10px; align-items: baseline; padding: 1px 0; flex-wrap: wrap; }
.jv-chiave { font-weight: 800; min-width: 90px; word-break: break-word; }
.jv-str { font-weight: 600; word-break: break-word; }
.jv-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.jv-bool { font-weight: 800; }
.jv-nullo, .jv-nota { color: var(--ink-soft); font-weight: 600; font-style: italic; }

@media (max-width: 620px) {
  .ps-griglia { grid-template-columns: 1fr; gap: 2px 0; }
  .ps-etichetta { margin-top: 8px; }
  .jv-chiave { min-width: 0; }
}

/* ===================== Contest: elenco e dettaglio ===================== */
/* La riga e' un <button>: deve restare cliccabile tutta, ma non sembrare un
   bottone - sembra una scheda dell'elenco come le altre. */
.ct-riga {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ct-riga:hover { background: #fdf1e3; }
.ct-freccia { font-size: 26px; line-height: 1; opacity: .45; flex: 0 0 auto; }

.ct-badge {
  display: inline-block; flex: 0 0 auto;
  padding: 5px 11px; border: 3px solid var(--border); border-radius: 999px;
  font-size: 11.5px; font-weight: 900; letter-spacing: .06em; white-space: nowrap;
}
/* Lo stato si legge dal colore ma anche dalla parola: chi non distingue
   verde e rosso deve capirlo lo stesso. */
.ct-aperto  { background: #d8f3d8; }
.ct-chiuso  { background: #f0e2d2; }
.ct-futuro  { background: #e2eaf5; }
.ct-spento  { background: #eceae2; opacity: .8; }

/* Il canvas resta a 512 px perche' il QR scaricato dev'essere stampabile, ma a
   schermo va rimpicciolito: a grandezza naturale spingeva i comandi sotto la
   piega, e chi apriva il contest non vedeva COPIA LINK ne' ELIMINA. */
#ctQr { width: min(250px, 55vw); height: auto; display: block; margin: 0 auto; }

.ct-link {
  margin-top: 14px; padding: 10px 12px;
  border: 3px dashed var(--border); border-radius: 12px;
  background: #fbfaf5; font-size: 13.5px; font-weight: 700;
  word-break: break-all; user-select: all;
}

@media (max-width: 620px) {
  .ct-riga { flex-wrap: wrap; }
  .ct-freccia { display: none; }
}

/* Il codice del contest: si legge da lontano e si copia con un tocco, perche'
   va ribattuto dentro l'app classifica del gioco. */
.ct-codice-box {
  margin: 4px 0 18px; padding: 12px;
  border: 3px solid var(--border); border-radius: 14px; background: #fbfaf5;
}
.ct-codice-et {
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: var(--ink-soft); margin-bottom: 4px;
}
.ct-codice {
  font-size: 30px; font-weight: 900; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; cursor: pointer; user-select: all;
  min-height: 40px; line-height: 40px;
}
.ct-codice:hover { color: var(--green-text); }

/* L'identificativo della classifica, visibile solo lato Admin. Sta sotto i
   filtri come una nota tecnica: deve essere leggibile a colpo d'occhio ma non
   rubare la scena alla classifica. */
.lb-identificativo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px;
  border: 2px dashed var(--border); border-radius: 12px; background: #fbfaf5;
}
.lb-identificativo[hidden] { display: none; }
.lb-id-et {
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em; color: var(--ink-soft);
}
.lb-id-valore {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; font-weight: 700; cursor: pointer; user-select: all;
  word-break: break-all;
}
.lb-id-valore:hover { color: var(--green-text); }
.lb-id-nota { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

/* Scritto a mano: si vede che qualcuno ha messo mano, perche' e' proprio
   quella la riga da ricontrollare quando i numeri sembrano strani. */
.lb-id-forzato { background: #fdf1e3; border-style: solid; }

/* Ricerca fra i contatti raccolti dai giochi, nella schermata AGGIUNGI. */
.lead-risultati {
  margin-top: 6px; max-height: 220px; overflow-y: auto;
  border: 3px solid var(--border); border-radius: 12px; background: #fff;
}
.lead-risultati[hidden] { display: none; }
.lead-riga {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 9px 12px; border: 0; border-bottom: 2px solid var(--border);
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.lead-riga:last-child { border-bottom: 0; }
.lead-riga:hover { background: #fdf1e3; }
.lead-sub { font-size: 12px; font-weight: 600; color: var(--ink-soft); word-break: break-all; }
.lead-vuoto { padding: 12px; font-weight: 600; color: var(--ink-soft); }

/* Cestino sulle righe: piccolo ma non troppo - deve restare premibile col
   pollice senza diventare il primo elemento che si nota nella riga. */
.btn-cestino {
  flex: 0 0 auto; width: 30px; height: 30px; margin-left: 6px;
  border: 2px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 17px; line-height: 1;
  font-weight: 900; cursor: pointer; opacity: .5;
}
.btn-cestino:hover { opacity: 1; background: #ffe3e3; border-color: #c0392b; color: #c0392b; }


/* Etichette dei controlli del grafico: dicono a cosa serve ogni menu, che con
   quattro selettori di fila non e' piu' indovinabile. */
.ctrl-et {
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.chart-controls { flex-wrap: wrap; gap: 8px; }

/* Listino nell'area cliente: due colonne, il prezzo sempre allineato a destra
   cosi' si scorrono con l'occhio senza rileggere ogni riga. */
.listino-riga {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 2px solid var(--border);
}
.listino-riga:last-child { border-bottom: 0; }
.listino-nome { font-weight: 800; font-size: 16px; }
.listino-prezzo {
  flex: 0 0 auto; font-weight: 900; font-size: 17px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 520px) {
  .listino-riga { flex-direction: column; gap: 2px; }
  .listino-prezzo { align-self: flex-start; }
}

/* ===================== TORNEI =====================
   Il tabellone e' l'unica cosa in tutta la piattaforma che si legge come uno
   schema e non come un elenco: le due caselle di una partita devono stare
   sulla stessa riga e avere la stessa larghezza, altrimenti non si capisce
   chi gioca contro chi. */

/* La spiegazione in cima: e' la risposta a "come funziona", e va letta prima
   di premere qualsiasi cosa. Numerata, perche' e' una sequenza. */
.tn-come { margin-bottom: 4px; }
.tn-passi { margin: 0; padding-left: 22px; }
.tn-passi li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.45; }
.tn-passi li:last-child { margin-bottom: 0; }

.tn-identificativo {
  margin-bottom: 14px; padding: 8px 12px;
  border: 2px dashed var(--border); border-radius: 12px; background: #fbfaf5;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  word-break: break-all;
}
.tn-identificativo[hidden] { display: none; }

#tnQr { width: min(250px, 55vw); height: auto; display: block; margin: 0 auto; }

.tn-turno-tit {
  font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 16px 0 7px;
}
.tn-turno-tit:first-child { margin-top: 0; }

.tn-partita {
  display: flex; align-items: stretch; gap: 8px; margin-bottom: 7px;
  padding: 6px; border: 2px solid var(--border); border-radius: 12px;
  background: #fbfaf5;
}
/* Una partita pronta e' quella su cui si puo' agire adesso: deve saltare
   all'occhio in mezzo a un tabellone di caselle ancora vuote. */
.tn-partita.tn-pronta { border-color: var(--green-text, #2f7a45); background: #eef8f0; }

.tn-lato {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border: 2px solid var(--border); border-radius: 9px;
  background: #fff; font: inherit; font-size: 14.5px; font-weight: 700; color: inherit;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
}
.tn-lato:disabled { cursor: default; opacity: 1; }
.tn-partita.tn-pronta .tn-lato:not(:disabled):hover { background: #d8f3d8; }
.tn-vinta { background: #d8f3d8; font-weight: 900; }
.tn-persa { opacity: .5; text-decoration: line-through; }
.tn-punti { font-variant-numeric: tabular-nums; font-weight: 900; opacity: .75; font-size: 13px; }
.tn-vs {
  flex: 0 0 auto; align-self: center; font-size: 11px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}

@media (max-width: 520px) {
  .tn-lato { font-size: 13.5px; padding: 8px 6px; }
}

/* Un campo nascosto deve sparire davvero. Regola esplicita e non per fiducia
   nel foglio del browser: e' gia' successo con .lb-riga, dove un display:flex
   piu' avanti nel foglio vinceva su [hidden] e i campi restavano a vista. */
.field[hidden] { display: none; }

/* ===== [hidden] deve vincere sempre =====
   Il foglio del browser dice display:none per [hidden], ma qualunque regola
   nostra con un display esplicito lo batte per specificita'. E' gia' costato
   due difetti: i campi "Dal/Al" della classifica sempre a vista, e il bottone
   "APRI L'APP TORNEO" che compariva anche su un gioco senza app torneo.
   Invece di ricordarsene caso per caso, la regola sta qui una volta sola. */
[hidden] { display: none !important; }

/* ===== TICKET: i codici appena generati =====
   Vanno letti e ribattuti, quindi monospazio e spaziati: in un font
   proporzionale "K7M2QP" e "K7M2OP" si somigliano troppo. */
.tk-codici { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 800; letter-spacing: .1em;
  padding: 7px 11px; border: 2px solid var(--border); border-radius: 9px;
  background: #fbfaf5; user-select: all;
}

/* ============================================================
   TICKETS - la schermata intera
   I ticket si generano a BLOCCHI e a blocchi si usano: un blocco = una riga
   con la sua barra di consumo, e i codici dentro come gettoni. La vecchia
   lista piatta (una scheda alta per codice) obbligava a scorrere cento
   riquadri identici per sapere quanti ne restavano di quel premio.
   ============================================================ */

.tk-intro {
  max-width: 1000px; width: 100%; margin: 0 auto 16px;
  padding: 12px 16px; border-radius: 14px;
  background: #fbf6ea; border: 2px solid var(--border);
  color: var(--ink-soft); font-size: 14px; line-height: 1.5;
}
.tk-intro strong { color: var(--ink); }

/* Tutta la schermata sta sulla stessa colonna: prima ogni riquadro prendeva
   la larghezza del proprio testo e i bordi non erano allineati fra loro. */
#screen-tickets .tk-gen,
#screen-tickets-liberi #ticketsListLiberi,
#screen-tickets-usati #ticketsListUsati,
#screen-tickets .tk-appena,
#screen-tickets .tk-blocco,
#screen-tickets #ticketsList { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }

/* --- il generatore, richiudibile --- */
.tk-gen { margin-top: 16px; }
.tk-gen > summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  cursor: pointer; list-style: none; margin: -4px 0 0;
}
.tk-gen > summary::-webkit-details-marker { display: none; }
.tk-gen > summary::after {
  content: "▾"; margin-left: auto; font-size: 18px; color: var(--ink-soft);
  transition: transform .18s ease;
}
.tk-gen[open] > summary::after { transform: rotate(180deg); }
.tk-gen[open] > summary { margin-bottom: 14px; }
.tk-gen-hint { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

.tk-appena { margin-top: 16px; border-color: var(--green-text); }
.tk-appena-testa {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}

/* --- barra di ricerca e filtri --- */
.tk-barra-strumenti {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 1000px; width: 100%; margin: 18px auto 14px;
}
.tk-barra-strumenti input[type="search"] {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px;
  padding: 11px 14px; min-height: 44px;
  border: 2px solid var(--border); border-radius: 11px; background: var(--card);
}
.tk-barra-strumenti input[type="search"]:focus {
  outline: none; border-color: var(--accent-text);
}
.tk-filtri { display: flex; gap: 0; border: 2px solid var(--border); border-radius: 11px; overflow: hidden; }
.tk-filtri button {
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  border: 0; background: var(--card); color: var(--ink-soft);
  padding: 10px 14px; min-height: 44px;
}
.tk-filtri button + button { border-left: 2px solid var(--border); }
.tk-filtri button.on { background: var(--ink); color: #fff; }
.tk-barra-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* --- le due strade: da usare / gia' riscattati ---
   Non sono un filtro travestito: portano a due schermate diverse, perche'
   consegnare codici nuovi e controllare chi ha riscattato sono due lavori che
   non si fanno nello stesso momento. Il numero grande e' la cosa che si guarda
   davvero, quindi comanda il riquadro. */
.tk-strade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%; max-width: 1000px; margin: 18px auto 14px;
}
.tk-strada {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
  padding: 20px 22px;
}
.tk-strada:hover { background: #fbf8ee; }
.tk-strada:disabled { opacity: .5; cursor: default; }
.tk-strada:disabled:hover { background: var(--card); }
.tk-strada-n { font-size: 34px; font-weight: 800; line-height: 1; }
.tk-strada-t { font-size: 17px; font-weight: 800; color: var(--accent-text); }
.tk-strada-d { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
/* Senza questa riga i due riquadri erano identici ai tre contatori qui sopra,
   che invece non fanno niente: nessuno capiva che si potessero premere. */
.tk-strada-apri {
  margin-top: 8px; font-size: 13px; font-weight: 800;
  color: var(--accent-text); display: inline-flex; align-items: center; gap: 6px;
}
.tk-strada-apri b { font-size: 16px; transition: transform .15s ease; }
.tk-strada:hover .tk-strada-apri b { transform: translateX(4px); }
.tk-strada:disabled .tk-strada-apri { display: none; }

.tk-azioni-globali {
  width: 100%; max-width: 1000px; margin: 0 auto 18px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}

@media (max-width: 640px) {
  .tk-strade { grid-template-columns: 1fr; gap: 10px; }
  .tk-strada { padding: 16px 18px; }
  .tk-strada-n { font-size: 28px; }
  .tk-azioni-globali { justify-content: stretch; }
  .tk-azioni-globali .btn { flex: 1; }
}

/* --- un blocco --- */
.tk-blocco { padding: 0; overflow: hidden; margin-bottom: 12px; }
.tk-testa {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 0; background: none; padding: 14px 16px; color: inherit;
}
.tk-testa:hover { background: #fbf8ee; }
.tk-testa-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.tk-premio { font-size: 17px; font-weight: 800; color: var(--accent-text); }
.tk-quando { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.tk-conta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; }
.tk-conta b { font-size: 20px; font-weight: 800; }
.tk-conta-sub { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.tk-barra {
  flex: 1 1 120px; height: 9px; min-width: 90px; border-radius: 99px;
  background: #ece7d6; overflow: hidden;
}
.tk-barra i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--green-a), var(--green-b));
}
.tk-freccia { font-size: 16px; color: var(--ink-soft); transition: transform .18s ease; }
.tk-blocco.aperto .tk-freccia { transform: rotate(180deg); }

.tk-corpo { display: none; padding: 0 16px 16px; border-top: 2px solid var(--border); }
.tk-blocco.aperto .tk-corpo { display: block; }
.tk-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }

.tk-nascosti { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.tk-griglia { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-cod {
  position: relative; display: inline-flex; flex-direction: column; gap: 1px;
  padding: 7px 30px 7px 11px; border: 2px solid var(--border); border-radius: 9px;
  background: #fbfaf5;
}
/* Monospazio e spaziati: in un font proporzionale "K7M2QP" e "K7M2OP" si
   somigliano troppo, e questi codici si leggono a voce. */
.tk-cod b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 800; letter-spacing: .1em; user-select: all;
}
.tk-cod small { font-size: 11px; font-weight: 600; color: var(--green-text); }
.tk-cod.usato { background: #f1f0e8; border-style: dashed; }
.tk-cod.usato b { color: var(--ink-soft); text-decoration: line-through; }
.tk-x {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer;
  font-size: 17px; line-height: 1; opacity: .45;
}
.tk-cod:hover .tk-x, .tk-x:focus-visible { opacity: 1; background: #f3e2df; color: var(--red); }

.tk-vuoto {
  display: flex; flex-direction: column; gap: 6px; text-align: center;
  max-width: 1000px; width: 100%; margin: 0 auto; padding: 34px 18px;
  border: 2px dashed var(--border-strong); border-radius: 16px;
  color: var(--ink-soft); font-size: 14px;
}
.tk-vuoto strong { color: var(--ink); font-size: 16px; }

/* ===== BARRA DI SALVATAGGIO =====
   Sta agganciata in fondo alla finestra perche' la scheda di un gioco e' lunga:
   il tasto non deve finire sotto la piega proprio quando serve. */
.barra-salva {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  flex-wrap: wrap; width: 100%; max-width: 1000px;
  margin-top: 18px; padding: 12px 16px;
  border: 3px solid var(--border); border-radius: 16px;
  background: var(--card, #fbfaf5);
}
/* Quando c'e' qualcosa da salvare la barra si fa notare: chi ha toccato un
   interruttore deve capire che manca ancora un passaggio. */
.barra-salva.da-salvare { border-color: var(--green-text, #2f7a45); background: #eef8f0; }
.stato-salva { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.barra-salva.da-salvare .stato-salva { color: var(--green-text, #2f7a45); }
.barra-salva .btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 520px) {
  .barra-salva { justify-content: stretch; }
  .barra-salva .btn { width: 100%; }
}

/* ===== CLONA UN GIOCO: la scelta di cosa portarsi dietro ===== */
.clone-dati {
  margin-top: 10px; padding: 12px 14px;
  border: 2px dashed var(--border); border-radius: 12px; background: #fbfaf5;
}
.clone-tit {
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.clone-riga {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 0; font-size: 14px; font-weight: 700; cursor: pointer;
}
.clone-riga input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green-text, #2f7a45); }
.clone-riga em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); }

/* ===== MITTENTE EMAIL DEL CLIENTE ===== */
.ms-guida { background: #fbfaf5; }
.ms-passi { margin: 0; padding-left: 22px; }
.ms-passi li { margin-bottom: 7px; font-size: 14.5px; line-height: 1.45; }
.ms-passi li:last-child { margin-bottom: 0; }

.ms-dichiarazione {
  margin-top: 14px; padding: 12px 14px;
  border: 2px dashed var(--border); border-radius: 12px; background: #fbfaf5;
  font-size: 13.5px; line-height: 1.5;
}

/* Lo stato del collegamento si legge a colpo d'occhio: e' la differenza fra
   "posso mandare" e "credo di poter mandare". */
.ms-stato {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  border: 3px solid var(--border); background: #fbfaf5;
  font-size: 14px; font-weight: 700; line-height: 1.5;
}
.ms-stato.ms-ok      { border-color: var(--green-text, #2f7a45); background: #eef8f0; }
.ms-stato.ms-errore  { border-color: #c2553f; background: #f7e6e2; }
.ms-stato.ms-attesa  { border-color: #e8b830; background: #fdf6e3; }

/* ===== CAMPAGNE EMAIL ===== */

/* Da quale casella partiranno: sta in cima perche' e' la prima cosa che
   determina se questa schermata serve a qualcosa o no. */
.cp-mittente {
  padding: 12px 14px; border-radius: 12px; border: 3px solid var(--border);
  background: #fbfaf5; font-size: 14px; line-height: 1.5;
}
.cp-mittente-ok { border-color: var(--green-text, #2f7a45); background: #eef8f0; }
.cp-mittente-ko { border-color: #c2553f; background: #f7e6e2; }
.cp-mittente em { font-style: normal; font-weight: 800; }

/* Quante persone riceveranno davvero. E' il numero da guardare prima di
   scrivere, non dopo. */
.cp-pubblico {
  margin-top: 10px; padding: 11px 13px; border-radius: 11px;
  border: 2px solid var(--border); background: #fbfaf5;
  font-size: 14px; line-height: 1.5;
}
.cp-pubblico-ok { border-color: var(--green-text, #2f7a45); background: #eef8f0; }
.cp-pubblico-ko { border-color: #e8b830; background: #fdf6e3; }

.cp-etichetta {
  display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft);
}
#cpCorpo, #cpAllineaTesto {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 2px solid var(--border); border-radius: 11px;
  font: 15px/1.5 inherit; resize: vertical; background: #fff;
}
#cpCorpo:disabled { background: #f3f2ee; color: #666; }

.cp-riga .item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cp-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  border: 2px solid var(--border); background: #f3f2ee; color: var(--ink-soft);
  vertical-align: middle;
}
.cp-tag-ok    { border-color: var(--green-text, #2f7a45); background: #eef8f0; color: #2f7a45; }
.cp-tag-ko    { border-color: #c2553f; background: #f7e6e2; color: #a83a26; }
.cp-tag-corso { border-color: #e8b830; background: #fdf6e3; color: #8a6a10; }

.cp-allinea { background: #fdf6e3; border-color: #e8b830; }

/* L'anteprima imita la posta, non la piattaforma: chi guarda deve riconoscere
   un'email, non una schermata dell'app. */
.cp-anteprima {
  border: 2px solid var(--border); border-radius: 11px; background: #fff;
  padding: 16px 18px;
}
.cp-ant-oggetto {
  font-size: 16px; font-weight: 800; padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid #e4e2dc;
}
.cp-ant-corpo { font-size: 15px; line-height: 1.55; color: #1b1b1b; min-height: 40px; }
.cp-ant-corpo a { color: #1a5fb4; }
.cp-ant-piede {
  margin-top: 24px; padding-top: 12px; border-top: 1px solid #ddd;
  font-size: 12px; line-height: 1.5; color: #888;
}

/* ===== IL MITTENTE A PASSI: indirizzo, poi password. Niente altro. ===== */

/* Ogni passo e' una scheda con un numero grosso davanti. Il numero non e'
   decorazione: dice che le cose da fare sono due e che si e' a meta'. */
.ms-passo { margin-top: 16px; }
.ms-passo-testa {
  display: flex; align-items: center; gap: 11px;
  font-size: 17px; font-weight: 800; margin-bottom: 4px;
}
.ms-numero {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink, #1b1b1b); color: #fff; font-size: 15px; font-weight: 800;
}
.ms-passo-sotto { margin: 0 0 12px 39px; font-size: 13.5px; color: var(--ink-soft); }

.ms-riga-campo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ms-riga-campo input {
  flex: 1 1 260px; min-width: 0; padding: 12px 14px;
  border: 2px solid var(--border); border-radius: 11px;
  font: 16px/1.3 inherit; background: #fff;
}

/* La scelta dell'indirizzo: quello dell'account o un altro. */
.ms-opzione {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 2px solid var(--border); border-radius: 11px; background: #fff;
  font-size: 14.5px; line-height: 1.45; cursor: pointer;
}
.ms-opzione:has(input:checked) { border-color: var(--green-text, #2f7a45); background: #eef8f0; }
.ms-opzione input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
                    accent-color: var(--green-text, #2f7a45); }
.ms-opzione b { font-weight: 800; word-break: break-all; }

.ms-tut-intro {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 10px;
  background: #fbfaf5; border: 2px solid var(--border);
  font-size: 13.5px; line-height: 1.55;
}
.ms-tut-passi { margin: 0; padding-left: 22px; }
.ms-tut-passi li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
.ms-tut-passi li:last-child { margin-bottom: 0; }
.ms-tut-passi b { font-weight: 800; }
.ms-tut-link { font-size: 13.5px; font-weight: 700; color: #1a5fb4; }
.ms-tut-senonva {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #fdf6e3; border: 2px solid #e8b830;
  font-size: 13px; line-height: 1.5;
}