/* assaggio.css · l'assaggio della Bottega dentro la card del gioco completo (24/10/2026)
   Sopra stile.css della Bottega: stessi colori, stessa carta, stessi bottoni. */
body.assaggio {
  min-height: 0; color: var(--crema); background-color: var(--notte);
}
.assaggio__banco { max-width: 560px; margin: 0 auto; padding: 8px var(--gutter) 28px; }
.assaggio__insegna { width: min(240px, 70%); margin: 0 auto 18px; }
.assaggio__insegna .insegna__giu { font-size: clamp(22px, 6.4vw, 28px); }
.assaggio__titolo { font-family: var(--f-titoli); font-weight: 700; font-size: clamp(26px, 7.2vw, 32px); line-height: 1.1; text-align: center; }
.assaggio__intro { margin: 8px auto 0; max-width: 34ch; text-align: center; font-size: 17px; opacity: .92; }
.assaggio .gruppo__titolo { margin-top: 22px; }

.assaggio__tasti li:first-child { grid-column: 1 / -1; }

.assaggio__porta {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  margin-top: 30px; padding: 22px 20px 20px; transform: rotate(-.6deg);
}
.assaggio__lucchetto { width: 44px; height: auto; margin-top: 4px; opacity: .9; }
.assaggio__porta-titolo { font-family: var(--f-titoli); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--notte); margin-bottom: 6px; }
.assaggio__porta p { font-size: 16px; }
.assaggio__chiuse { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.assaggio__chiuse li {
  padding: 5px 12px 5px 30px; border-radius: 999px; font-family: var(--f-titoli); font-weight: 600; font-size: 14px; color: var(--seppia);
  background: rgba(51, 41, 31, .06); box-shadow: inset 0 0 0 1.5px rgba(51, 41, 31, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%236f604e' stroke-width='1.6'/%3E%3Crect x='3.5' y='7' width='9' height='7' rx='1.6' fill='%236f604e'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px 50%; background-size: 14px;
}
.assaggio__piccolo { font-size: 14px !important; line-height: 1.45; color: var(--seppia); }
.assaggio__ferma { margin-top: 20px; text-align: center; }

@media (min-width: 700px) {
  .assaggio__tasti { grid-template-columns: repeat(3, 1fr); }
  .assaggio__tasti li:first-child { grid-column: auto; }
}