/* =====================================================================
   «Il Paese dei Balocchi» — style.css
   Estetica: legno scuro, pergamena, inchiostro, oro, rosso.
   Solo font di sistema, nessuna risorsa remota.
   ===================================================================== */

:root {
  --legno-1: #33210f;
  --legno-2: #1d120a;
  --legno-3: #120b06;
  --pergamena: #efe3c6;
  --pergamena-scura: #ddc9a1;
  --pergamena-chiara: #f8f0dc;
  --inchiostro: #2b2117;
  --inchiostro-soft: #5c4a33;
  --oro: #c3a04a;
  --oro-chiaro: #eccd7d;
  --oro-scuro: #856620;
  --rosso: #8f2d24;
  --rosso-chiaro: #c14535;
  --verde: #4d6642;
  --carta-l: clamp(96px, 8.4vw, 128px);
  --carta-a: 0.175;
  --ombra: 0 10px 26px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  color: var(--inchiostro);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 205, 130, 0.13), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(90deg, rgba(255, 214, 150, 0.03) 0 1px, transparent 1px 29px),
    linear-gradient(180deg, #3a2715, #20130a 62%, #130b06);
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(100% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 0;
}

.nascosto { display: none !important; }

/* ------------------------------------------------------------------ */
/* Tavolo                                                              */
/* ------------------------------------------------------------------ */
.tavolo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* -------------------------- Barra in alto -------------------------- */
.barra-alta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 18px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 32%),
    linear-gradient(180deg, #f3e8cd, #e1cfa8);
  border-bottom: 3px double var(--oro-scuro);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.marchio {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 150px;
}

.marchio-titolo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #3d2a13;
  white-space: nowrap;
}

.marchio-spettacolo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--inchiostro-soft);
  white-space: nowrap;
}

.marchio-spettacolo b { color: var(--rosso); font-size: 12px; }

.statistiche {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-etichetta {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--inchiostro-soft);
  white-space: nowrap;
}

.stat-valore {
  font-size: 15px;
  font-weight: 700;
  color: #34230f;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.stat-bugie { min-width: 150px; }
.stat-bugie .stat-valore { font-size: 14px; }
.stat-bugie .stat-valore b { color: var(--rosso); font-size: 17px; }
.stat-bugie .su { margin: 0 3px; color: var(--inchiostro-soft); font-weight: 400; }

.barra-obiettivo {
  display: block;
  height: 6px;
  width: 100%;
  min-width: 110px;
  margin-top: 1px;
  background: rgba(70, 45, 15, 0.22);
  border: 1px solid rgba(70, 45, 15, 0.35);
  border-radius: 3px;
  overflow: hidden;
}

.barra-obiettivo > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #a97f2c, var(--oro-chiaro));
  transition: width 0.3s ease;
}

.pallini { display: inline-flex; gap: 4px; align-items: center; height: 18px; }

.pallino {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(70, 45, 15, 0.55);
  background: transparent;
  display: inline-block;
}

.pallino.pieno {
  background: radial-gradient(circle at 32% 30%, var(--oro-chiaro), var(--oro-scuro));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.comandi-barra {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-monete .stat-valore {
  color: #6d4a0d;
  font-size: 17px;
}

.stat-monete .stat-valore::before {
  content: "◉";
  color: var(--oro-scuro);
  margin-right: 3px;
  font-size: 13px;
}

/* -------------------------- Pulsanti ------------------------------- */
.bottone {
  font-family: inherit;
  font-size: 14px;
  color: #f6ead0;
  background: linear-gradient(180deg, #5a4325, #3b2a15);
  border: 1px solid #8a6b24;
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 0 #1c1208, 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.bottone:hover:not(:disabled) { filter: brightness(1.14); }
.bottone:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #1c1208; }

.bottone:focus-visible {
  outline: 2px solid var(--oro-chiaro);
  outline-offset: 2px;
}

.bottone:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.bottone.primario {
  background: linear-gradient(180deg, #8f2d24, #6b1f18);
  border-color: #c98a52;
  color: #fff1d8;
  font-weight: 700;
}

.bottone.primario:hover:not(:disabled) { filter: brightness(1.2); }

.bottone.piccolo { font-size: 12px; padding: 5px 11px; }
.bottone.grande { font-size: 16px; padding: 10px 18px; min-width: 150px; }

/* -------------------------- Area di gioco -------------------------- */
.area-gioco {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px 6px;
  overflow: hidden;
}

.boss-banner {
  width: min(760px, 94vw);
  flex: 0 0 auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: #f7e9cc;
  background: linear-gradient(180deg, rgba(143, 45, 36, 0.95), rgba(88, 24, 17, 0.96));
  border: 1px solid var(--oro);
  border-radius: 8px;
  padding: 5px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.boss-banner strong { color: var(--oro-chiaro); letter-spacing: 0.4px; }

.pannello-punteggio {
  width: min(760px, 94vw);
  flex: 0 1 auto;
  min-height: 150px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 16px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(180deg, var(--pergamena-chiara), var(--pergamena));
  border: 2px solid var(--oro-scuro);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 215, 0.65), var(--ombra);
}

.pannello-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(110, 80, 35, 0.35);
}

.pannello-occhiello {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--inchiostro-soft);
}

.mano-corrente {
  font-size: 15px;
  font-weight: 700;
  color: var(--rosso);
  letter-spacing: 0.4px;
}

.catena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow-y: auto;
  padding: 4px 2px 0;
  scrollbar-width: thin;
}

.catena.vuoto {
  align-items: center;
  text-align: center;
  gap: 6px;
}

.suggerimento {
  margin: 0;
  font-size: 14px;
  color: var(--inchiostro-soft);
  max-width: 560px;
  line-height: 1.35;
}

.ultima-mano {
  margin: 0;
  font-size: 12px;
  color: var(--inchiostro-soft);
  font-style: italic;
}

.anteprima {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2px 0;
}

.anteprima-mano {
  font-size: 19px;
  font-weight: 700;
  color: var(--rosso);
}

.anteprima-formula {
  font-size: 14px;
  color: var(--inchiostro-soft);
  font-variant-numeric: tabular-nums;
}

.anteprima-formula b { color: #34230f; font-size: 16px; }

.riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.3;
  padding: 1px 8px;
  border-radius: 5px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  font-variant-numeric: tabular-nums;
}

.riga.attiva { opacity: 1; transform: none; }
.riga .valore { font-weight: 700; white-space: nowrap; }

.riga.riga-bugie { color: #4a371c; }
.riga.riga-jolly { color: #8a5a00; }
.riga.riga-jolly .valore { color: #8a5a00; font-style: italic; font-weight: 600; }
.riga.riga-mano { color: #4a371c; }
.riga.riga-talismano { color: #6b3a12; }
.riga.riga-talismano .valore { color: var(--rosso); }
.riga.riga-moltiplicatore { color: #6b3a12; }
.riga.riga-moltiplicatore .valore { color: var(--rosso); font-size: 15px; }
.riga.riga-fama { border-top: 1px solid rgba(110, 80, 35, 0.3); padding-top: 3px; color: #3b2b15; }
.riga.riga-fama-totale { color: #3b2b15; }
.riga.riga-totale {
  margin-top: 3px;
  padding: 4px 10px;
  background: rgba(143, 45, 36, 0.09);
  border: 1px solid rgba(143, 45, 36, 0.35);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--rosso);
}
.riga.riga-totale .valore { font-size: 20px; color: var(--rosso); }
.riga.riga-totale.completa { animation: battito 0.45s ease; }

@keyframes battito {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* -------------------------- Talismani ------------------------------ */
.talismani {
  width: min(760px, 94vw);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 70px;
}

.talismani-etichetta {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: rgba(244, 231, 200, 0.6);
  padding: 0;
}

.lista-talismani {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 62px;
}

.talismano {
  position: relative;
  width: clamp(56px, 4.9vw, 70px);
  height: clamp(70px, 6.2vw, 88px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid var(--oro-scuro);
  border-radius: 8px;
  background:
    radial-gradient(90% 70% at 40% 20%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(165deg, #f6ecd3, #d9c59c);
  box-shadow: inset 0 0 0 1px rgba(120, 88, 32, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45);
  cursor: help;
  outline: none;
}

.talismano:hover, .talismano:focus-visible {
  border-color: var(--oro-chiaro);
  box-shadow: 0 0 0 2px rgba(236, 205, 125, 0.6), 0 6px 14px rgba(0, 0, 0, 0.5);
}

.monogramma {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--rosso);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nome-talismano {
  font-size: 8.5px;
  line-height: 1.12;
  text-align: center;
  padding: 0 3px;
  color: #4c3517;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tip-talismano {
  display: none;
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 8px 11px;
  background: linear-gradient(180deg, #2c1d10, #1a1008);
  color: #f4e7c8;
  border: 1px solid var(--oro);
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  z-index: 30;
  pointer-events: none;
}

.tip-talismano b {
  display: block;
  color: var(--oro-chiaro);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.talismano:hover .tip-talismano,
.talismano:focus-visible .tip-talismano { display: block; }

.talismani-vuoto {
  font-size: 12.5px;
  color: rgba(244, 231, 200, 0.66);
  font-style: italic;
  padding: 8px 2px;
}

/* -------------------------- Mano e comandi ------------------------ */
.area-mano {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 18px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
  border-top: 1px solid rgba(195, 160, 74, 0.35);
}

.mano-contenitore {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.mano {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 22px;
  min-height: calc(var(--carta-l) * 1.425 + 22px);
}

.carta {
  position: relative;
  flex: 0 0 auto;
  width: var(--carta-l);
  aspect-ratio: 400 / 570;
  padding: 0;
  border: 2px solid #6d5423;
  border-radius: 7px;
  background: #f2e6cb;
  cursor: pointer;
  overflow: hidden;
  transform-origin: bottom center;
  box-shadow: 0 5px 11px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 245, 210, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.carta + .carta { margin-left: calc(var(--carta-l) * -0.17); }

.carta-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}

.carta:hover {
  transform: translateY(-8px);
  z-index: 6;
  border-color: var(--oro-chiaro);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(236, 205, 125, 0.45);
}

/* Jolly selvatici: bordo dorato e badge «JOLLY» */
.carta.carta-jolly {
  border-color: var(--oro);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(236, 205, 125, 0.75),
    inset 0 0 0 1px rgba(255, 245, 210, 0.55);
}

.carta.carta-jolly:hover,
.carta.carta-jolly.selezionata {
  border-color: var(--oro-chiaro);
}

.badge-jolly {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f4d98a, #c99a2e);
  color: #2c1d05;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.carta.selezionata {
  transform: translateY(-17px);
  border-color: var(--oro-chiaro);
  z-index: 7;
  box-shadow: 0 0 0 3px var(--oro-chiaro), 0 12px 24px rgba(0, 0, 0, 0.7);
}

.carta.selezionata:hover { transform: translateY(-20px); }

.carta:focus-visible {
  outline: 2px dashed rgba(206, 228, 255, 0.95);
  outline-offset: 3px;
  z-index: 8;
}

.carta-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), transparent 45%),
    repeating-linear-gradient(45deg, rgba(120, 90, 40, 0.08) 0 3px, transparent 3px 8px),
    #f2e6cb;
  color: var(--inchiostro);
  text-align: center;
}

.carta.senza-immagine .carta-img { display: none; }
.carta.senza-immagine .carta-fallback { display: flex; }

.carta-fallback .fb-rango {
  font-size: calc(var(--carta-l) * 0.34);
  font-weight: 700;
  line-height: 1;
}

.carta-fallback .fb-seme { font-size: calc(var(--carta-l) * 0.26); line-height: 1; }
.carta-fallback.jolly .fb-rango {
  font-size: calc(var(--carta-l) * 0.16);
  letter-spacing: 1px;
}
.carta-fallback.jolly .fb-seme { color: var(--oro-scuro); font-size: calc(var(--carta-l) * 0.3); }
.carta-fallback .fb-titolo {
  font-size: 8.5px;
  line-height: 1.15;
  color: var(--inchiostro-soft);
  overflow: hidden;
  max-height: 3.4em;
}
.carta-fallback.rosso { color: var(--rosso); }
.carta-fallback.nero { color: #241d15; }

.comandi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  width: 168px;
  flex: 0 0 auto;
}

.conteggio-selezione {
  font-size: 11px;
  text-align: center;
  color: rgba(244, 231, 200, 0.7);
  letter-spacing: 0.4px;
}

.messaggio {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: rgba(244, 231, 200, 0.85);
  letter-spacing: 0.3px;
}

.messaggio.attenzione { color: #ffc48a; font-weight: 700; }
.messaggio.successo { color: #cfe3a8; }

/* -------------------------- Modali -------------------------------- */
.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(9, 5, 3, 0.72);
  backdrop-filter: blur(2px);
}

.modale {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: min(780px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 18px 24px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 30%),
    linear-gradient(180deg, var(--pergamena-chiara), var(--pergamena-scura));
  border: 3px double var(--oro-scuro);
  border-radius: 12px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 248, 225, 0.7);
  scrollbar-width: thin;
}

.modale h2 {
  margin: 2px 0 8px;
  font-size: 27px;
  color: #3a2510;
  letter-spacing: 0.4px;
}

.occhiello {
  margin: 0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2.6px;
  color: var(--inchiostro-soft);
}

.azioni {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.modale-annuncio { width: min(560px, 92vw); text-align: center; }

.corpo-annuncio p, .corpo-guadagno p { margin: 6px 0; font-size: 14.5px; line-height: 1.45; }

.obiettivo-grande {
  margin: 10px 0 4px;
  font-size: 40px;
  font-weight: 700;
  color: var(--rosso);
  line-height: 1;
}

.obiettivo-grande small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--inchiostro-soft);
  text-transform: uppercase;
  margin-top: 5px;
}

.malus-boss {
  margin: 12px auto 0;
  width: min(430px, 92%);
  padding: 9px 13px;
  background: rgba(143, 45, 36, 0.1);
  border: 1px solid rgba(143, 45, 36, 0.45);
  border-radius: 8px;
  color: #5b1f18;
  font-size: 13.5px;
  line-height: 1.4;
}

.malus-boss b { color: var(--rosso); }

.conto {
  list-style: none;
  margin: 12px auto;
  padding: 0;
  width: min(330px, 100%);
  font-size: 14px;
}

.conto li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px dotted rgba(90, 60, 20, 0.35);
}

.conto li b { color: var(--rosso); }
.conto .totale-conto {
  border-bottom: none;
  border-top: 2px solid rgba(90, 60, 20, 0.4);
  margin-top: 4px;
  padding-top: 7px;
  font-size: 17px;
  font-weight: 700;
}

/* -------------------------- Bottega -------------------------------- */
.modale-bottega { width: min(950px, 95vw); }

.bottega-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(110, 80, 35, 0.35);
}

.bottega-cassa {
  display: flex;
  gap: 18px;
  font-size: 14px;
  color: var(--inchiostro-soft);
  white-space: nowrap;
}

.bottega-cassa strong { color: #6d4a0d; font-size: 17px; }

.vetrina {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.voce-bottega {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.65), rgba(235, 220, 186, 0.55));
  border: 1px solid rgba(110, 80, 35, 0.5);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 230, 0.6);
}

.voce-bottega.venduta { opacity: 0.55; }

.voce-bottega h3 {
  margin: 0;
  font-size: 15.5px;
  color: var(--rosso);
  line-height: 1.2;
}

.voce-bottega .voce-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #4d3a22;
  flex: 1;
}

.voce-bottega .voce-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.prezzo {
  font-size: 16px;
  font-weight: 700;
  color: #6d4a0d;
  white-space: nowrap;
}

.prezzo::before { content: "◉ "; font-size: 12px; color: var(--oro-scuro); }

.bottega-azioni {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(110, 80, 35, 0.35);
  flex-wrap: wrap;
}

.bottega-nota {
  flex: 1;
  margin: 0;
  font-size: 11.5px;
  color: var(--inchiostro-soft);
  font-style: italic;
  text-align: center;
}

.bottega-posseduti { margin-top: 13px; }

.bottega-posseduti .talismani-vuoto {
  color: var(--inchiostro-soft);
  font-style: italic;
  padding: 4px 2px;
}

.bottega-posseduti h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--inchiostro-soft);
}

.posseduti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.possesso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  background: rgba(255, 250, 232, 0.55);
  border: 1px solid rgba(110, 80, 35, 0.35);
  border-radius: 7px;
  font-size: 12.5px;
}

.possesso .possesso-nome { line-height: 1.2; }
.possesso .possesso-nome small { display: block; color: var(--inchiostro-soft); font-size: 10.5px; }

/* -------------------------- Regole -------------------------------- */
.modale-regole { width: min(820px, 95vw); }

.regole-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid rgba(110, 80, 35, 0.4);
  padding-bottom: 7px;
}

.regole-testa h2 { margin: 0; }

.contenuto-regole { font-size: 13.5px; line-height: 1.45; }
.contenuto-regole h3 {
  margin: 15px 0 5px;
  font-size: 15px;
  color: var(--rosso);
  letter-spacing: 0.3px;
}
.contenuto-regole p { margin: 4px 0; }
.contenuto-regole ul { margin: 4px 0; padding-left: 20px; }
.contenuto-regole li { margin: 2px 0; }

.tabella-mani {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 5px 0 2px;
  font-variant-numeric: tabular-nums;
}

.tabella-mani th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--inchiostro-soft);
  border-bottom: 2px solid rgba(110, 80, 35, 0.4);
  padding: 3px 6px;
}

.tabella-mani td {
  padding: 2.5px 6px;
  border-bottom: 1px solid rgba(110, 80, 35, 0.2);
}

.tabella-mani td:last-child, .tabella-mani th:last-child { text-align: right; }
.tabella-mani td:nth-child(2), .tabella-mani th:nth-child(2) { text-align: right; }

.boss-regola {
  background: rgba(143, 45, 36, 0.08);
  border-left: 3px solid var(--rosso);
  padding: 5px 10px;
  margin: 5px 0;
}

/* -------------------------- Schermate ------------------------------ */
.schermata {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(90% 75% at 50% 18%, rgba(255, 200, 110, 0.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 58px),
    linear-gradient(180deg, #3a2715, #1d120a 65%, #130b06);
}

.pannello-iniziale {
  position: relative;
  width: min(640px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  padding: 30px 38px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 34%),
    linear-gradient(180deg, var(--pergamena-chiara), var(--pergamena));
  border: 3px double var(--oro-scuro);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 248, 225, 0.75);
  scrollbar-width: thin;
}

.pannello-iniziale h1 {
  margin: 4px 0 10px;
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.02;
  color: #3a2510;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.8);
}

.sottotitolo {
  margin: 0 auto;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.5;
  color: #4d3a22;
}

.fregio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px auto 12px;
  color: var(--oro-scuro);
}

.fregio span {
  display: block;
  width: min(130px, 26vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-scuro), transparent);
}

.fregio b { font-size: 19px; font-weight: 400; }

.seme-iniziale, .seme-finale {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--inchiostro-soft);
}

.seme-iniziale strong, .seme-finale strong { color: #5d3f12; }

.nota {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--inchiostro-soft);
}

.nota code {
  background: rgba(90, 60, 20, 0.1);
  padding: 0 3px;
  border-radius: 3px;
  font-size: 11px;
}

.pannello-finale { max-width: 600px; }

.titolo-vittoria {
  color: #7a4e10 !important;
  animation: brillio 2.2s ease-in-out infinite alternate;
}

@keyframes brillio {
  from { text-shadow: 0 1px 0 rgba(255, 250, 230, 0.8), 0 0 0 rgba(195, 160, 74, 0); }
  to { text-shadow: 0 1px 0 rgba(255, 250, 230, 0.8), 0 0 22px rgba(195, 160, 74, 0.55); }
}

.titolo-sconfitta { color: #6d2a20 !important; }

.statistiche-finali {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
  padding: 12px 10px;
  background: rgba(90, 60, 20, 0.08);
  border: 1px solid rgba(110, 80, 35, 0.3);
  border-radius: 9px;
}

.statistiche-finali div { text-align: center; }

.statistiche-finali dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--inchiostro-soft);
}

.statistiche-finali dd {
  margin: 3px 0 0;
  font-size: 21px;
  font-weight: 700;
  color: #4a330f;
  font-variant-numeric: lining-nums tabular-nums;
}

.noscript {
  position: fixed;
  z-index: 99;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  background: var(--pergamena);
  color: var(--inchiostro);
  font-size: 18px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Adattamenti per schermi bassi / stretti                            */
/* ------------------------------------------------------------------ */
@media (max-width: 1120px) {
  .marchio { min-width: 0; }
  .marchio-titolo { font-size: 15px; }
  .statistiche { gap: 12px; }
  .stat-bugie { min-width: 130px; }
  .barra-obiettivo { min-width: 95px; }
  .comandi { width: 150px; }
  .bottone.grande { min-width: 134px; font-size: 15px; padding: 9px 12px; }
  .carta-fallback .fb-titolo { font-size: 8px; }
}

@media (max-height: 760px) {
  .barra-alta { padding: 5px 14px 6px; }
  .area-gioco { gap: 7px; padding-top: 7px; }
  .pannello-punteggio { min-height: 104px; padding: 7px 14px 8px; }
  .talismano { width: 54px; height: 68px; }
  .talismano.con-immagine { width: 64px; height: 78px; padding: 2px; }
  .talismano.con-immagine .talismano-immagine { width: 32px; height: 32px; }
  .talismano.con-immagine .nome-talismano { font-size: 6.5px; }
  .lista-talismani, .talismani { min-height: 64px; }
  .monogramma { font-size: 17px; }
  .nome-talismano { font-size: 8px; }
  .area-mano { padding-bottom: 9px; }
  .carta { border-width: 2px; }
  .nota { margin-top: 12px; }
  .pannello-iniziale { padding: 24px 30px 22px; }
}

@media (max-width: 900px) {
  .barra-alta { gap: 10px; }
  .marchio-titolo { display: none; }
  .marchio-spettacolo { font-size: 10px; }
  .stat-etichetta { font-size: 8px; letter-spacing: 1px; }
  .mano-contenitore { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* link di ritorno alla galleria del mazzo (solo nella versione pubblicata) */
.torna-mazzo {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 60;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: rgba(20, 15, 10, 0.72);
  color: #d8bd7c;
  font-family: var(--serif, Georgia, serif);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}
.torna-mazzo:hover { background: rgba(201, 162, 39, 0.22); color: #f2e6cb; }

/* ================================================================
   Asset illustrati: moneta e talismani (da Google Flow, deck-3)
   ================================================================ */

/* la moneta al posto del simbolo testuale */
.stat-monete .stat-valore::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("assets/moneta.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.prezzo::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -1px;
  background: url("assets/moneta.png") center / contain no-repeat;
}

/* talismano illustrato: la carta riempie il riquadro, il nome sta sopra */
.talismano.con-immagine {
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;
  background: #1d150d;
}
.talismano.con-immagine .talismano-immagine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  pointer-events: none;
}
.talismano.con-immagine .nome-talismano {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 16px 2px 3px;
  color: #f7edda;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0) 0%, rgba(20, 14, 8, 0.86) 70%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* vetrina della bottega con l'illustrazione */
.voce-immagine {
  width: 62px;
  height: 87px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(120, 88, 32, 0.4);
  margin-bottom: 8px;
  float: none;
  display: block;
}

/* elenco dei talismani posseduti nella bottega */
.possesso-immagine {
  width: 26px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.possesso .possesso-nome { flex: 1; }

/* ================================================================
   Flip 3D delle carte, animazioni e Memory del Grillo (sez. 9)
   ================================================================ */

/* --- doppia faccia delle carte ------------------------------------ */
.carta { perspective: 900px; }

.carta-interno {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 5px;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.carta-faccia {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.carta-faccia .carta-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carta-faccia.senza-immagine .carta-img { display: none; }
.carta-faccia.senza-immagine .carta-fallback { display: flex; }

/* ingresso delle carte pescate: retro -> fronte, sfalsato per carta */
.carta.in-ingresso .carta-interno { transform: rotateY(180deg); }
.carta.in-ingresso.entrata .carta-interno { transform: rotateY(0deg); }

/* carte selezionate che si girano prima della giocata */
.carta.girata .carta-interno { transform: rotateY(180deg); }

/* retro: pergamena scura con filetto oro e monogramma «P».
   Se in futuro esisterà assets/dorso.jpg diventa lo sfondo del retro
   (il gradiente resta come velo di sicurezza). */
.carta-retro {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    url("assets/dorso.jpg"),
    radial-gradient(80% 70% at 50% 30%, rgba(236, 205, 125, 0.16), transparent 70%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 9px),
    linear-gradient(165deg, #4b321a, #2a1a0c 70%);
  background-size: cover, auto, auto, auto;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(236, 205, 125, 0.55);
  box-shadow: inset 0 0 0 3px rgba(236, 205, 125, 0.22), inset 0 0 18px rgba(0, 0, 0, 0.6);
}

.carta-retro::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(236, 205, 125, 0.5);
  border-radius: 3px;
}

.carta-retro-p {
  position: relative;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--carta-l) * 0.46);
  line-height: 1;
  color: var(--oro-chiaro);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), 0 0 18px rgba(236, 205, 125, 0.35);
}

/* --- carte giocate nel pannello del banco ------------------------- */
.carte-banco {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 4px 0 2px;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.carte-banco.sparisce { opacity: 0; }

.carta-banco {
  position: relative;
  display: block;
  width: clamp(38px, 3.6vw, 48px);
  aspect-ratio: 400 / 570;
  flex: 0 0 auto;
  perspective: 700px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.carta-banco .carta-interno {
  border-radius: 4px;
  transform: rotateY(180deg);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.carta-banco.entrata .carta-interno { transform: rotateY(0deg); }

.carta-banco .carta-faccia {
  border-radius: 3px;
  border: 1px solid #6d5423;
}

.carta-banco .carta-retro-p { font-size: 20px; }
.carta-banco .carta-retro::before { inset: 3px; }
.carta-banco .carta-fallback .fb-rango { font-size: 16px; }
.carta-banco .carta-fallback .fb-seme { font-size: 12px; }
.carta-banco .carta-fallback .fb-titolo { display: none; }
.carta-banco .badge-jolly { top: 2px; right: 2px; padding: 0 3px; font-size: 6px; letter-spacing: 0.4px; }

/* --- flip dei talismani quando contribuiscono --------------------- */
.lista-talismani { perspective: 800px; }

@keyframes giro-talismano {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.talismano.flip-attivo { animation: giro-talismano 0.45s ease; }

.talismano.attivato {
  border-color: var(--oro-chiaro);
  box-shadow: 0 0 0 2px rgba(236, 205, 125, 0.8), 0 6px 16px rgba(0, 0, 0, 0.55);
}

/* --- Memory del Grillo ------------------------------------------- */
.modale-memory { width: min(600px, 94vw); text-align: center; }

.memory-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.memory-cassa {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--inchiostro-soft);
  white-space: nowrap;
}

.memory-cassa strong { color: var(--rosso); font-size: 14px; }

.memory-nota {
  margin: 8px 0 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--inchiostro-soft);
}

.memory-griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: min(380px, 100%);
  margin: 0 auto;
}

.tessera {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 400 / 570;
  border: 2px solid #6d5423;
  border-radius: 6px;
  background: #2a1a0c;
  cursor: pointer;
  perspective: 700px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.tessera .carta-interno {
  border-radius: 5px;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tessera.coperta .carta-interno { transform: rotateY(180deg); }

.tessera .carta-retro-p { font-size: 26px; }
.tessera .carta-retro::before { inset: 4px; }
.tessera .carta-fallback .fb-rango { font-size: calc(var(--carta-l) * 0.2); }
.tessera .carta-fallback .fb-seme { font-size: calc(var(--carta-l) * 0.15); }
.tessera .carta-fallback .fb-titolo { font-size: 6px; }
.tessera .badge-jolly { top: 2px; right: 2px; padding: 0 3px; font-size: 6px; }

.tessera:hover:not(.trovata) { border-color: var(--oro-chiaro); }

.tessera:focus-visible {
  outline: 2px dashed rgba(206, 228, 255, 0.95);
  outline-offset: 3px;
}

.tessera.trovata {
  border-color: var(--oro-chiaro);
  box-shadow: 0 0 0 2px rgba(236, 205, 125, 0.75), 0 0 14px rgba(236, 205, 125, 0.35);
}

.memory-esito {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rosso);
  line-height: 1.35;
}

@media (max-height: 700px) {
  .memory-griglia { width: min(320px, 100%); gap: 7px; }
  .memory-nota { margin: 6px 0 8px; }
}

/* ================================================================
   Difficoltà, ordinamento, medaglioni e zecchino (sez. 10)
   ================================================================ */

/* --- scelta della difficoltà -------------------------------------- */
.marchio-difficolta {
  margin-top: 1px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oro-scuro);
  white-space: nowrap;
}

.difficolta-scelta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.difficolta-etichetta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--inchiostro-soft);
}

.bottone.difficolta { font-size: 13px; padding: 6px 13px; }

.bottone.difficolta[aria-pressed="true"] {
  background: linear-gradient(180deg, #a03a2d, #7a2419);
  border-color: var(--oro-chiaro);
  color: #fff1d8;
  box-shadow: 0 0 0 2px rgba(236, 205, 125, 0.45), 0 2px 0 #1c1208;
}

.difficolta-nota {
  margin: 9px auto 0;
  max-width: 520px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--inchiostro-soft);
  min-height: 2.6em;
}

/* --- ordinamento della mano --------------------------------------- */
.area-mano { flex-wrap: wrap; row-gap: 2px; }

.ordinamento {
  flex: 0 0 100%;
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 4px;
}

.ordinamento-etichetta {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(244, 231, 200, 0.62);
}

.ordinamento-bottone[aria-pressed="true"] {
  background: linear-gradient(180deg, #f0dfb4, #d8c089);
  border-color: var(--oro-chiaro);
  color: #3a2510;
  font-weight: 700;
  box-shadow: 0 2px 0 #1c1208, inset 0 0 0 1px rgba(255, 250, 230, 0.6);
}

/* --- medaglioni dei talismani (pannello, vetrina, posseduti) ------ */
.talismano.con-immagine {
  width: clamp(68px, 6vw, 88px);
  height: clamp(82px, 7.2vw, 104px);
  justify-content: center;
  gap: 2px;
  padding: 3px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 40% 20%, rgba(255, 255, 255, 0.75), transparent 60%),
    linear-gradient(165deg, #f6ecd3, #d9c59c);
}

.talismano.con-immagine .talismano-immagine {
  position: static;
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff8e3, #dcc79c);
  box-shadow: 0 0 0 2px rgba(120, 88, 32, 0.45), 0 2px 5px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.talismano.con-immagine .nome-talismano {
  position: static;
  width: 100%;
  padding: 0 2px;
  font-size: 7.5px;
  line-height: 1.1;
  letter-spacing: 0.2px;
  -webkit-line-clamp: 3;
  word-break: break-word;
  color: #4c3517;
  background: none;
  text-shadow: none;
}

.voce-immagine {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff8e3, #dcc79c);
  box-shadow: 0 0 0 2px rgba(120, 88, 32, 0.45), 0 3px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 6px;
}

.possesso-immagine {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff8e3, #dcc79c);
  box-shadow: 0 0 0 1px rgba(120, 88, 32, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  flex: 0 0 auto;
}

/* --- tooltip dei talismani posseduti in Bottega ------------------- */
.possesso { position: relative; outline: none; }

.possesso:focus-visible {
  outline: 2px dashed rgba(120, 80, 30, 0.8);
  outline-offset: 2px;
}

.possesso .tip-talismano { bottom: calc(100% + 9px); z-index: 60; }

.possesso:hover .tip-talismano,
.possesso:focus-within .tip-talismano,
.possesso:focus .tip-talismano { display: block; }

.tip-talismano .tip-costo {
  display: block;
  margin-top: 4px;
  color: var(--oro-chiaro);
  font-size: 11.5px;
  letter-spacing: 0.3px;
}

/* --- guadagno con fronte e rovescio dello zecchino ---------------- */
.guadagno-difficolta {
  margin: 2px 0 0;
  text-align: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--inchiostro-soft);
}

.conto .totale-conto {
  flex-wrap: wrap;
  align-items: center;
}

.conto .guadagno-zero {
  display: block;
  padding: 6px 2px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--inchiostro-soft);
  border-bottom: 1px dotted rgba(90, 60, 20, 0.35);
}

.conto .voce-gia-incassata b { color: var(--verde); }

.conto .resoconto-monete {
  border-bottom: none;
  padding-top: 6px;
  font-size: 13px;
  color: var(--inchiostro-soft);
}

.zecchino {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}

.zecchino img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.zecchino .zecchino-didascalia {
  font-size: 9px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.4px;
  text-transform: lowercase;
  color: var(--inchiostro-soft);
}

@media (max-height: 760px) {
  .ordinamento { padding: 0; }
  .ordinamento-etichetta { display: none; }
  .area-mano { padding-top: 2px; }
  .marchio-difficolta { font-size: 9px; }
}