/* Scopa Napoletana — "tavolo d'osteria": panno verde, bordo di legno, luce di lampada, carte vere. */
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces.woff2) format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../fonts/caveat.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --panno: #17503a;
  --panno-scuro: #0d3324;
  --panno-chiaro: #2a7553;
  --legno: #5b3420;
  --legno-scuro: #2e1a10;
  --legno-chiaro: #8a5634;
  --avorio: #f6efdf;
  --avorio-2: #ece2cb;
  --inchiostro: #2a1d14;
  --inchiostro-2: #6a5644;
  --rosso: #b3261e;
  --rosso-scuro: #8c1b15;
  --oro: #e0ad35;
  --oro-chiaro: #f3d27a;
  --gesso: #f1ede4;
  --lavagna: #22302a;
  --ombra-carta: 0 1px 1px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.28);
  --curva: cubic-bezier(.22,.9,.24,1);
  --dur: 440ms;
  color-scheme: light;
}
.veloce { --dur: 230ms; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; overscroll-behavior: none;
  font: 16px/1.45 "Figtree", system-ui, sans-serif; color: var(--inchiostro);
  background: var(--legno-scuro);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--oro-chiaro); color: var(--inchiostro); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--oro); outline-offset: 3px; border-radius: 8px; }
svg { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }

/* ---------------- il tavolo ---------------- */
.tavolo {
  position: fixed; inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(255,236,170,.16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
    var(--panno);
  box-shadow: inset 0 0 0 7px var(--legno), inset 0 0 0 9px var(--legno-scuro), inset 0 0 0 10px rgba(255,220,170,.18), inset 0 12px 40px rgba(0,0,0,.45);
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.barra {
  position: absolute; z-index: 60; top: calc(env(safe-area-inset-top) + 14px); left: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
}
.tondo {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(8,30,20,.55); color: var(--gesso); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: background .2s, transform .2s var(--curva);
}
.tondo:hover { background: rgba(8,30,20,.8); }
.tondo:active { transform: scale(.94); }

/* lavagnetta dei punti, come quella dell'osteria */
.lavagna {
  margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 5px 16px 6px;
  background: linear-gradient(160deg, #2b3a33, var(--lavagna)); color: var(--gesso);
  border-radius: 8px; box-shadow: 0 0 0 3px #7a5232, 0 0 0 4px #3a2414, 0 6px 16px rgba(0,0,0,.4);
  font-family: "Caveat", cursive; font-size: 21px; line-height: 1; min-width: 0;
}
.lv-riga { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lv-riga b { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.lv-nome { max-width: 9ch; padding: 0 .12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.lv-trattino { font-size: 17px; opacity: .65; white-space: nowrap; }
@media (max-width: 430px) { .lavagna { gap: 9px; padding: 5px 11px 6px; font-size: 19px; } .lv-riga b { font-size: 28px; } .lv-nome { max-width: 8.4ch; } .lv-trattino { font-size: 15px; } }
.lavagna .cresce { animation: gesso .9s var(--curva); }
@keyframes gesso { 0% { transform: scale(1.7); color: var(--oro-chiaro); } 100% { transform: none; } }

.cartellino {
  position: absolute; z-index: 30; display: flex; align-items: baseline; gap: 8px;
  color: var(--gesso); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap;
}
.cartellino .conta { font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
.cartellino.turno .nome::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px;
  background: var(--oro); box-shadow: 0 0 0 3px rgba(224,173,53,.3); vertical-align: 1px; animation: pulsa 1.4s ease-in-out infinite;
}
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(224,173,53,0); } }
.mazzo-conta {
  position: absolute; z-index: 45; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: grid; place-items: center; background: var(--avorio); color: var(--inchiostro);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: opacity .3s;
}

.stage { position: absolute; inset: 0; perspective: 1400px; }

/* ---------------- le carte ---------------- */
.carta {
  position: absolute; left: 0; top: 0; width: var(--w, 80px); aspect-ratio: 280 / 463;
  transform-style: preserve-3d; will-change: transform;
  transition: transform var(--dur) var(--curva), width var(--dur) var(--curva), filter .25s;
  border-radius: 7%/4.3%;
}
.carta .giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--dur) var(--curva); border-radius: inherit; }
.carta.coperta .giro { transform: rotateY(180deg); }
.carta .faccia, .carta .dorso {
  position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: var(--ombra-carta);
}
.carta .faccia {
  background: #fffdf7; padding: 5.5% 6.5%;
  background-image: linear-gradient(160deg, #fff 0%, #fbf6ea 100%);
  box-shadow: var(--ombra-carta), inset 0 0 0 1px rgba(0,0,0,.08);
}
.carta .faccia img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.carta .dorso {
  transform: rotateY(180deg); background: #fff url(../carte/retro.webp) center / 92% 94% no-repeat;
  box-shadow: var(--ombra-carta), inset 0 0 0 1px rgba(0,0,0,.1);
}
.carta.mia { cursor: pointer; }
.carta.mia:hover { filter: brightness(1.04); }
.carta.scelta .faccia { box-shadow: 0 0 0 3px var(--oro), 0 14px 30px rgba(0,0,0,.45); }
.carta.bersaglio .faccia { box-shadow: 0 0 0 3px var(--oro-chiaro), 0 0 0 7px rgba(243,210,122,.35), var(--ombra-carta); }
.carta.bersaglio { cursor: pointer; }
.carta.giocabile-no { filter: saturate(.75) brightness(.9); }
.carta.in-volo { z-index: 50 !important; }
.carta.in-volo .faccia { box-shadow: 0 18px 34px rgba(0,0,0,.5); }

.avviso {
  position: absolute; z-index: 40; left: 50%; transform: translateX(-50%); margin: 0;
  color: var(--gesso); font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  white-space: nowrap; transition: opacity .3s; pointer-events: none;
}
.fumetto {
  position: absolute; z-index: 70; max-width: min(78vw, 300px); padding: 9px 14px; border-radius: 14px 14px 14px 4px;
  background: var(--avorio); color: var(--inchiostro); font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35); animation: fumetto 2.6s var(--curva) forwards; pointer-events: none;
}
@keyframes fumetto { 0% { opacity: 0; transform: translateY(6px) scale(.96); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* il timbro "Scopa!": il momento del gioco */
.timbro {
  position: absolute; z-index: 80; left: 50%; top: 46%; pointer-events: none;
  font: italic 600 clamp(64px, 18vw, 150px)/1 "Fraunces", serif; color: var(--oro-chiaro);
  letter-spacing: -.02em; text-shadow: 0 3px 0 var(--rosso-scuro), 0 10px 30px rgba(0,0,0,.55);
  transform: translate(-50%, -50%) scale(.6) rotate(-8deg); opacity: 0; filter: blur(6px);
}
.timbro.via { animation: timbro 1.5s var(--curva) forwards; }
@keyframes timbro {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-14deg); filter: blur(10px); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); filter: blur(0); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(-8deg); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.08) rotate(-8deg); filter: blur(4px); }
}
.lampo { position: absolute; inset: 0; z-index: 75; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(255,230,150,.45), transparent 60%); animation: lampo .9s ease-out forwards; }
@keyframes lampo { from { opacity: 1; } to { opacity: 0; } }

/* ---------------- schermata iniziale ---------------- */
.inizio {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 20px);
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(255,232,160,.22), transparent 72%),
    radial-gradient(ellipse 130% 100% at 50% 40%, transparent 50%, rgba(0,0,0,.6) 100%),
    var(--panno);
  transition: opacity .45s var(--curva), visibility .45s;
}
.inizio.via { opacity: 0; visibility: hidden; }
.inizio-dentro { width: min(100%, 460px); display: grid; justify-items: center; text-align: center; color: var(--gesso); }
.ventaglio { position: relative; height: clamp(150px, 26vh, 220px); width: 100%; margin-bottom: 10px; }
.ventaglio img {
  position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 280/463; padding: 3.2% 3.8%;
  background: #fffdf7; border-radius: 7%/4.3%; box-shadow: 0 10px 26px rgba(0,0,0,.45); transform-origin: 50% 110%;
  animation: apri 1.1s var(--curva) both;
}
.ventaglio img:nth-child(1) { --r: -15deg; --x: -88%; transform: translateX(var(--x)) rotate(var(--r)); }
.ventaglio img:nth-child(2) { --r: 0deg; --x: -50%; transform: translateX(var(--x)) translateY(-4%); z-index: 2; }
.ventaglio img:nth-child(3) { --r: 15deg; --x: -12%; transform: translateX(var(--x)) rotate(var(--r)); }
@keyframes apri { from { transform: translateX(-50%) rotate(0deg) translateY(12px); } }
h1 { margin: 6px 0 4px; display: grid; line-height: .9; }
h1 .t1 { font: italic 600 clamp(64px, 19vw, 104px)/.95 "Fraunces", serif; letter-spacing: -.035em; color: var(--avorio); text-shadow: 0 4px 18px rgba(0,0,0,.35); }
h1 .t2 { font: 700 15px/1 "Figtree", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--oro-chiaro); margin-top: 6px; padding-left: .32em; }
.sotto { margin: 10px 0 26px; color: rgba(241,237,228,.78); }
.bottoni { display: grid; gap: 10px; width: 100%; }
.grosso {
  min-height: 52px; padding: 12px 20px; border-radius: 14px; border: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  background: var(--avorio); color: var(--inchiostro); font-weight: 700; font-size: 16.5px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 12px rgba(0,0,0,.25);
  transition: transform .18s var(--curva), box-shadow .2s, background .2s;
}
.grosso:hover { background: #fff8e8; }
.grosso:active { transform: translateY(1px) scale(.99); }
.grosso.primario { background: linear-gradient(180deg, #c83229, var(--rosso)); color: #fff6ec; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(120,20,15,.45); }
.grosso.primario:hover { background: linear-gradient(180deg, #d23a30, #ba2a21); }
.grosso:disabled { opacity: .55; cursor: default; }
.grosso .lucchetto { width: 18px; height: 18px; opacity: .6; }
.voci { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 18px; }
.voci button, .link {
  background: none; border: 0; padding: 8px 10px; color: inherit; font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(224,173,53,.55); text-underline-offset: 4px; text-decoration-thickness: 1.5px; border-radius: 8px;
}
.voci button { color: var(--gesso); }
.voci button:hover, .link:hover { text-decoration-color: var(--oro); }
.licenza { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(5,25,16,.45); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; }
.licenza .link { color: var(--oro-chiaro); padding: 4px 6px; }
.licenza.completa { background: rgba(224,173,53,.16); }
.piede { margin-top: 22px; display: grid; gap: 2px; font-size: 13.5px; color: rgba(241,237,228,.7); }
.piede a { color: var(--gesso); text-underline-offset: 3px; }
.piede .link { font-weight: 500; color: rgba(241,237,228,.85); }

/* ---------------- fogli (dialog) ---------------- */
dialog.foglio {
  width: min(calc(100% - 32px), 460px); max-height: min(86dvh, 760px); padding: 0; border: 0; border-radius: 18px;
  background: var(--avorio); color: var(--inchiostro); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06);
  overflow: auto; overscroll-behavior: contain;
}
dialog.foglio[open] { animation: foglio .34s var(--curva); }
@keyframes foglio { from { opacity: 0; transform: translateY(14px) scale(.98); } }
dialog.foglio.lungo { width: min(calc(100% - 32px), 560px); }
dialog.foglio.piccolo { width: min(calc(100% - 32px), 400px); }
dialog::backdrop { background: rgba(6,18,12,.55); backdrop-filter: blur(3px); }
dialog.foglio > header {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px;
  background: linear-gradient(var(--avorio) 80%, rgba(246,239,223,0));
}
dialog.foglio h2 { margin: 0; font: 650 23px/1.15 "Fraunces", serif; letter-spacing: -.01em; flex: 1; text-wrap: balance; }
dialog.foglio > :not(header) { margin-left: 20px; margin-right: 20px; }
dialog.foglio > :last-child { margin-bottom: 20px; }
.chiudi { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(42,29,20,.07); display: grid; place-items: center; margin: -6px -8px -6px 0; }
.chiudi:hover { background: rgba(42,29,20,.13); }
.lista { display: grid; gap: 4px; }
.lista button { text-align: left; padding: 14px 14px; border: 0; border-radius: 12px; background: transparent; font-weight: 600; font-size: 16.5px; }
.lista button:hover { background: var(--avorio-2); }
.lista .pericolo { color: var(--rosso); }
.nota { color: var(--inchiostro-2); font-size: 15px; margin-top: 0; }
.nota.piccola { font-size: 13.5px; }
.nota a, .testo a { color: var(--rosso); text-underline-offset: 3px; }
.mini { width: 15px; height: 15px; vertical-align: -2px; }
.testo { font-size: 15.5px; }
.testo h3 { font: 650 18px/1.2 "Fraunces", serif; margin: 22px 0 6px; }
.testo p, .testo li { max-width: 65ch; }
.testo ul { padding-left: 20px; margin: 6px 0; }
.testo li { margin: 5px 0; }
.testo li::marker { color: var(--rosso); }
.azioni { display: grid; gap: 10px; margin-top: 16px; justify-items: center; }
.azioni.riga { grid-template-columns: 1fr 1fr; }
.azioni .grosso { width: 100%; }
dialog .grosso { background: #fff; box-shadow: 0 0 0 1px rgba(42,29,20,.12), 0 2px 6px rgba(0,0,0,.06); }
dialog .grosso:hover { background: #fffaf0; }
dialog .grosso.primario { background: linear-gradient(180deg, #c83229, var(--rosso)); color: #fff6ec; box-shadow: 0 4px 12px rgba(120,20,15,.3); }
.grosso.whatsapp { background: #1f8f4e !important; color: #fff; box-shadow: 0 4px 12px rgba(20,90,50,.3) !important; }
.errore { color: var(--rosso); font-weight: 600; font-size: 14.5px; min-height: 0; margin: 8px 0 0; }
.errore:empty { display: none; }

.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo > span { font-weight: 700; font-size: 14px; }
.campo input, .campo textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(42,29,20,.18); background: #fff;
  font-size: 16px; caret-color: var(--rosso); transition: border-color .2s, box-shadow .2s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #8b7a69; }
.campo input:focus, .campo textarea:focus { outline: 0; border-color: var(--rosso); box-shadow: 0 0 0 4px rgba(179,38,30,.14); }
.codice-in { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; text-align: center; font-size: 20px !important; }
.oppure { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--inchiostro-2); font-size: 14px; }
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: rgba(42,29,20,.15); }
.codice-grande { margin: 4px 0 18px; text-align: center; font: 700 56px/1 "Fraunces", serif; letter-spacing: .14em; color: var(--rosso); font-variant-numeric: tabular-nums; }
.attesa { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--inchiostro-2); font-weight: 600; margin-top: 18px; }
.puntini { display: inline-flex; gap: 4px; }
.puntini i { width: 7px; height: 7px; border-radius: 50%; background: var(--rosso); animation: punto 1.2s infinite; }
.puntini i:nth-child(2) { animation-delay: .15s; } .puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.gruppo { border: 0; padding: 0; margin: 0 0 16px; }
.gruppo legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; padding: 0; }
.segmenti { display: flex; gap: 4px; padding: 4px; background: var(--avorio-2); border-radius: 12px; }
.segmenti.a-capo { flex-wrap: wrap; }
.segmenti button {
  flex: 1 1 auto; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent;
  font-weight: 650; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.segmenti button.attivo { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); color: var(--rosso-scuro); }
.segmenti button.bloccato, .interruttore.bloccato { opacity: .5; }
.segmenti button.bloccato::after, .interruttore.bloccato > span::after {
  content: ""; width: 13px; height: 13px; display: inline-block; margin-left: 6px; vertical-align: -1px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 017 0v2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 017 0v2.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.interruttore {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(42,29,20,.09); cursor: pointer;
}
.interruttore > span { font-weight: 650; }
.interruttore > small { grid-column: 1; color: var(--inchiostro-2); font-size: 13.5px; }
.interruttore input {
  grid-column: 2; grid-row: 1 / span 2; appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 14px;
  background: #cdbfa6; position: relative; transition: background .2s; cursor: pointer; margin: 0;
}
.interruttore input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s var(--curva); }
.interruttore input:checked { background: var(--panno-chiaro); }
.interruttore input:checked::after { transform: translateX(20px); }

/* conto della smazzata */
.conto { width: calc(100% - 40px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.conto th, .conto td { padding: 9px 6px; text-align: center; border-bottom: 1px dashed rgba(42,29,20,.18); }
.conto th:first-child, .conto td:first-child { text-align: left; font-weight: 650; }
.conto thead th { font-size: 13.5px; color: var(--inchiostro-2); font-weight: 700; }
.conto td small { color: var(--inchiostro-2); font-size: 12.5px; margin-left: 3px; }
.conto td.punto { color: var(--rosso-scuro); font-weight: 800; }
.conto tr.riga-voce { opacity: 0; animation: voce .4s var(--curva) forwards; }
@keyframes voce { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.conto tfoot td { border: 0; font: 650 20px/1.2 "Fraunces", serif; padding-top: 12px; }
.esito { text-align: center; font-weight: 650; margin-top: 14px; }
.esito.grande { font-size: 18px; }
.scelte { display: grid; gap: 10px; }
.opzione-presa {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: #fff; text-align: left;
  box-shadow: 0 0 0 1px rgba(42,29,20,.12);
}
.opzione-presa:hover { box-shadow: 0 0 0 2px var(--rosso); }
.opzione-presa .mini-carte { display: flex; gap: 4px; }
.opzione-presa .mini-carte img { width: 40px; aspect-ratio: 280/463; padding: 2px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.opzione-presa > span:last-child { font-weight: 650; font-size: 15px; }
.frasi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frasi button { padding: 12px 10px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(42,29,20,.12); font-weight: 650; font-size: 14.5px; }
.frasi button:hover { box-shadow: 0 0 0 2px var(--rosso); }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 0; margin-top: 0; }
.stat dt, .stat dd { padding: 10px 0; border-bottom: 1px dashed rgba(42,29,20,.18); margin: 0; }
.stat dd { font: 650 19px/1.2 "Fraunces", serif; font-variant-numeric: tabular-nums; text-align: right; }

.toast {
  position: fixed; z-index: 300; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translate(-50%, 20px);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--inchiostro); color: var(--avorio);
  font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .3s var(--curva);
}
.toast.su { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  .timbro.via { animation-duration: 1.2s; }
  .ventaglio img { animation: none; }
}

/* ---------------- Scopone: tavolo a quattro ---------------- */
.cartellino .ruolo:empty { display: none; }
.cartellino .ruolo { font-family: "Caveat", cursive; font-size: 18px; font-weight: 600; color: var(--oro-chiaro); opacity: .95; }
.cartellino.lato { font-size: 13.5px; }
.mucchio {
  position: absolute; z-index: 30; padding: 3px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(8,30,20,.55); color: var(--gesso); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.a-quattro .avviso { font-size: 14.5px; }

/* ---------------- schermata iniziale: scegli il gioco ---------------- */
.scelta-gioco { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 0 0 14px; }
.gioco-tile {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 10px 13px; border: 0; border-radius: 16px;
  background: rgba(5,25,16,.42); color: var(--gesso); text-align: center;
  box-shadow: inset 0 0 0 1.5px rgba(241,237,228,.14), 0 4px 14px rgba(0,0,0,.18);
  transition: background .25s, box-shadow .25s, transform .2s var(--curva);
}
.gioco-tile:hover { background: rgba(5,25,16,.6); }
.gioco-tile:active { transform: scale(.98); }
.gioco-tile b { font: italic 600 26px/1.05 "Fraunces", serif; letter-spacing: -.02em; }
.gioco-tile small { font-size: 13px; color: rgba(241,237,228,.78); font-weight: 600; }
.gioco-tile[aria-checked="true"] {
  background: linear-gradient(180deg, rgba(246,239,223,.98), var(--avorio-2)); color: var(--inchiostro);
  box-shadow: inset 0 0 0 2px var(--oro), 0 8px 22px rgba(0,0,0,.32);
}
.gioco-tile[aria-checked="true"] small { color: var(--inchiostro-2); }
.gioco-tile[aria-checked="true"]::after {
  content: ""; position: absolute; top: 9px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rosso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tavolino { width: 64px; height: 46px; margin-bottom: 2px; }
.tv-panno { fill: var(--panno-chiaro); stroke: var(--legno-chiaro); stroke-width: 2.5; }
.tv-a { fill: var(--oro); }
.tv-b { fill: #d9493f; }
.gioco-tile[aria-checked="false"] .tv-panno { fill: #1f5e43; }
h1 .t1.cambia { animation: cambia .55s var(--curva); }
@keyframes cambia { from { opacity: 0; transform: translateY(10px) rotate(-2deg); filter: blur(4px); } }
.coppia-bottoni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coppia-bottoni .grosso { font-size: 15px; padding: 10px 12px; gap: 8px; }
@media (max-width: 360px) { .coppia-bottoni { grid-template-columns: 1fr; } }
.sotto-bottone { margin: 6px 2px 14px; }

/* ---------------- sala d'attesa online ---------------- */
.sala-posti { position: relative; display: grid; gap: 8px; margin: 6px 0 4px; }
.sala-posti.n4 { grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: auto auto auto; align-items: center; }
.sala-posti.n2 { grid-template-columns: 1fr; justify-items: center; }
.sala-panno {
  display: grid; place-items: center; min-height: 74px; padding: 8px; border-radius: 50%/42%; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, var(--panno-chiaro), var(--panno)); color: var(--gesso);
  box-shadow: 0 0 0 4px var(--legno), 0 6px 14px rgba(0,0,0,.25); font: 600 17px/1.1 "Caveat", cursive;
}
.n4 .sala-panno { grid-column: 2; grid-row: 2; }
.n2 .sala-panno { width: 60%; min-height: 54px; order: 1; }
.posto {
  display: grid; gap: 1px; justify-items: center; padding: 8px 6px; min-height: 56px; border: 0; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(42,29,20,.12); text-align: center; min-width: 0;
}
.posto b { font-weight: 750; font-size: 14.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posto small { color: var(--inchiostro-2); font-size: 12px; }
.posto i { font-style: normal; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.posto.sq0 { box-shadow: 0 0 0 2px var(--oro); } .posto.sq0 i { color: #9a6c08; }
.posto.sq1 { box-shadow: 0 0 0 2px #d9493f; } .posto.sq1 i { color: var(--rosso-scuro); }
.posto.tu { background: #fff7e3; }
.posto.libero { background: transparent; border: 1.5px dashed rgba(42,29,20,.3); box-shadow: none; }
.posto.libero:not(:disabled) { cursor: pointer; }
.posto.libero:not(:disabled):hover { background: #fff; border-color: var(--rosso); }
.posto:disabled { cursor: default; color: inherit; }
.n4 .p0 { grid-column: 2; grid-row: 3; }
.n4 .p1 { grid-column: 3; grid-row: 2; }
.n4 .p2 { grid-column: 2; grid-row: 1; }
.n4 .p3 { grid-column: 1; grid-row: 2; }
.n2 .posto { width: 70%; }
.n2 .p0 { order: 2; } .n2 .p1 { order: 0; }

/* ---------------- statistiche, segnalazioni ---------------- */
.stat dt.stat-titolo { grid-column: 1 / -1; font: 650 17px/1.2 "Fraunces", serif; padding-top: 16px; border-bottom: 0; color: var(--rosso-scuro); }
.sotto-titolo { font: 650 18px/1.2 "Fraunces", serif; margin-top: 26px; margin-bottom: 8px; }
.mie { list-style: none; padding: 0; display: grid; gap: 8px; }
.mie li:not(.nota) { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(42,29,20,.1); }
.mie li > div { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.mie li p { margin: 4px 0 0; font-size: 14.5px; color: var(--inchiostro-2); overflow-wrap: anywhere; }
.mie small { color: var(--inchiostro-2); }
.stato-seg { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; background: var(--avorio-2); }
.stato-seg.s-in-lavorazione { background: #fbe7b0; color: #6b4a00; }
.stato-seg.s-fatta { background: #cfe9d9; color: #10502f; }
.stato-seg.s-scartata { background: #eadfd6; color: #6a5644; }
.rebattle { text-align: center; margin-top: 10px; }

/* ================================================================
   GRAFICA REALISTICA (10/10/2026)
   Tavolo d'osteria vero: legno di noce consumato (Poly Haven, CC0), panno di feltro (ambientCG, CC0)
   appoggiato sul legno, lampada calda sopra il tavolo con caduta di luce ai bordi, carte in alta
   risoluzione con lucentezza e ombre morbide a tre strati, lavagnetta d'ardesia con cornice di legno
   e scritte col gesso granuloso. Tutto statico (immagini + CSS): costo GPU minimo, 60 fps anche su telefono.
   ================================================================ */
:root {
  --bordo: clamp(10px, 2.3vmin, 34px);
  --ombra-carta: 0 .5px .5px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.22), 0 9px 18px -6px rgba(0,0,0,.42);
  --ombra-volo: 0 4px 8px rgba(0,0,0,.22), 0 24px 40px -10px rgba(0,0,0,.5);
}
.tavolo {
  background: #2a170d url(../img/legno.webp) 50% 50% / 720px auto;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}
/* il panno: sta sopra il legno, ha uno spessore e il bordo un po' piu' scuro dove e' rimboccato */
.tavolo::before {
  content: ""; position: absolute; inset: var(--bordo); border-radius: clamp(8px, 1.4vmin, 18px); pointer-events: none;
  background: url(../img/panno.webp) 0 0 / 420px 420px, #1d5c40;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 1.5px 2px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 26px rgba(0,0,0,.42);
}
/* lampada calda sopra il centro del tavolo + caduta della luce verso gli angoli (vale anche per le carte) */
.tavolo::after {
  content: ""; position: absolute; inset: 0; z-index: 55; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 50% at 50% 47%, rgba(255,212,150,.12), rgba(255,212,150,0) 72%),
    radial-gradient(ellipse 80% 78% at 50% 48%, rgba(0,0,0,0) 42%, rgba(12,5,0,.22) 75%, rgba(12,5,0,.5) 100%);
}
.tondo { background: rgba(10,22,15,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.35); }

/* lavagnetta d'ardesia con cornice di legno, gesso granuloso */
.lavagna {
  border: clamp(5px, .75vmin, 8px) solid transparent; border-radius: 6px;
  background: url(../img/lavagna.webp) 50% 50% / cover padding-box, url(../img/legno.webp) 0 0 / 240px border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.5), inset 0 2px 7px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.4);
  padding: 4px 15px 5px;
}
.lavagna .lv-riga b, .lavagna .lv-nome, .lavagna .lv-trattino {
  -webkit-mask: url(../img/gesso.png) 0 0 / 96px 96px; mask: url(../img/gesso.png) 0 0 / 96px 96px;
  text-shadow: 0 0 1px rgba(255,255,255,.45), 0 0 6px rgba(255,255,255,.12);
}

/* carte: cartoncino lucido, bordo con spessore, riflesso della lampada */
.carta .faccia {
  background: #fdfbf6 linear-gradient(160deg, #fff 0%, #f7f2e7 100%);
  box-shadow: var(--ombra-carta), inset 0 0 0 1px rgba(60,40,20,.12), inset 0 -1.5px 0 rgba(60,40,20,.08);
}
.carta .faccia::after, .carta .dorso::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 44%, rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 64%),
    radial-gradient(130% 70% at 25% 0%, rgba(255,250,235,.16), rgba(255,250,235,0) 60%),
    linear-gradient(0deg, rgba(60,35,10,.06), rgba(60,35,10,0) 30%);
}
.carta .dorso {
  background: #fdfbf6 url(../carte/retro.webp) center / 92% 94% no-repeat;
  box-shadow: var(--ombra-carta), inset 0 0 0 1px rgba(60,40,20,.14), inset 0 -1.5px 0 rgba(60,40,20,.08);
}
.carta.in-volo .faccia, .carta.in-volo .dorso { box-shadow: var(--ombra-volo); }
.carta.scelta .faccia { box-shadow: 0 0 0 3px var(--oro), var(--ombra-volo); }
.carta.bersaglio .faccia { box-shadow: 0 0 0 3px var(--oro-chiaro), 0 0 0 7px rgba(243,210,122,.35), 0 0 22px rgba(255,214,120,.35), var(--ombra-carta); }

/* schermata iniziale: lo stesso panno sotto la lampada */
.inizio {
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(255,214,150,.2), rgba(255,214,150,0) 72%),
    radial-gradient(ellipse 120% 95% at 50% 40%, rgba(0,0,0,0) 45%, rgba(10,4,0,.62) 100%),
    url(../img/panno.webp) 0 0 / 420px 420px, #1d5c40;
}
.ventaglio img { box-shadow: 0 .5px .5px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.25), 0 16px 30px -8px rgba(0,0,0,.55); background: #fdfbf6; }
.gioco-tile { background: rgba(5,22,14,.5); }

/* finestre su carta avorio vera */
dialog.foglio { background: var(--avorio) url(../img/carta.webp) 0 0 / 512px 512px; }
dialog.foglio > header { background: linear-gradient(rgba(246,239,223,.96) 80%, rgba(246,239,223,0)); }