/* burraco.com - componente "esempi di carte" (HTML + CSS + sprite SVG, nessun JavaScript).
   Le carte sono <svg viewBox="0 0 60 86"> che richiamano un simbolo dello sprite (sprite.svg o
   sprite incorporato nella pagina). La larghezza si imposta con --w; i gruppi si adattano da soli
   alla larghezza disponibile (unita container), quindi non c'e mai scroll orizzontale della pagina. */

.carta { display: block; width: var(--w, var(--carta-larghezza, 44px)); aspect-ratio: 60 / 86; height: auto; flex: none; overflow: visible; position: relative; }
.carta--r { aspect-ratio: 86 / 60; width: calc(var(--w, 44px) * 1.4333); }
.carta--in-linea { display: inline-block; --w: 34px; vertical-align: -.55em; margin: 0 2px; }
.carta--blocco { margin: 1em 0; }

/* contenitore dell'esempio: figura con carte e didascalia */
.esempio { container-type: inline-size; margin: 1.6em 0; padding: 18px 18px 14px; background: var(--bianco); border: 1px solid var(--filo-scuro); border-radius: var(--raggio); max-width: var(--colonna-testo); }
.esempio__titolo { font: 700 17px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); margin: 0 0 12px; }
.esempio__carte { min-height: 62px; padding: 2px 2px 8px; overflow-x: auto; }
.esempio figcaption { font: 400 17px/1.45 var(--ui); color: var(--inchiostro); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--filo); }
.esempio figcaption .esito { margin-right: 8px; }
.esempio--no { border: 2px dashed var(--bordeaux); background: var(--bianco); }
.esito { display: inline-flex; align-items: center; gap: 6px; font: 700 17px/1.2 var(--ui); padding: 4px 10px 4px 7px; border-radius: 3px; vertical-align: 1px; white-space: nowrap; }
.esito--ok { background: var(--carta-2); color: var(--inchiostro); }
.esito--no { background: var(--bordeaux-chiaro); color: var(--bordeaux); }

/* gruppo di carte sovrapposte: sequenza, combinazione, burraco */
.gruppo { --visibile: .48; --wmax: 56px; --w: min(var(--wmax), calc((100cqw - 6px) / var(--u, 4))); display: flex; align-items: center; width: max-content; max-width: none; padding: 2px 0; }
.gruppo > * { position: relative; }
.gruppo > * + * { margin-left: calc(var(--w) * (var(--visibile) - 1)); }
.gruppo--con-matta { padding-bottom: 24px; }
.carta-wrap { display: block; }
.etichetta-matta { position: absolute; left: 0; top: calc(100% + 4px); font: 700 16px/1 var(--ui); color: var(--bordeaux); white-space: nowrap; }
.mano { --visibile: .5; --wmax: 52px; }
.gruppo--ampio { --wmax: 56px; }
.gruppo--grande { --wmax: 72px; }

/* mazzetti coperti: pozzetti e tallone */
.pile { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; padding: 2px 2px 6px; }
.pila { display: grid; justify-items: center; gap: 8px; }
.pila__carte { position: relative; width: calc(var(--w, 56px) + var(--sp, 3px) * 5); height: calc(var(--w, 56px) * 86 / 60 + var(--sp, 3px) * 5); }
.pila__carte .carta { position: absolute; left: 0; top: 0; width: var(--w, 56px); }
.pila__carte .carta:nth-child(1) { transform: translate(0, calc(var(--sp, 3px) * 5)); }
.pila__carte .carta:nth-child(2) { transform: translate(calc(var(--sp, 3px) * 1), calc(var(--sp, 3px) * 4)); }
.pila__carte .carta:nth-child(3) { transform: translate(calc(var(--sp, 3px) * 2), calc(var(--sp, 3px) * 3)); }
.pila__carte .carta:nth-child(4) { transform: translate(calc(var(--sp, 3px) * 3), calc(var(--sp, 3px) * 2)); }
.pila__carte .carta:nth-child(5) { transform: translate(calc(var(--sp, 3px) * 4), calc(var(--sp, 3px) * 1)); }
.pila__carte .carta:nth-child(6) { transform: translate(calc(var(--sp, 3px) * 5), 0); }
.pila--grande { --w: 64px; --sp: 3.5px; }
.pila__etichetta { font: 700 18px/1.2 var(--ui); text-align: center; }
.pila__etichetta small { display: block; font: 400 16px/1.3 var(--ui); color: var(--testo-2); }

/* righe di confronto: esempio corretto / errato, affiancati su desktop e impilati su mobile */
.confronto { display: grid; gap: 14px; margin: 1.6em 0; max-width: var(--colonna-testo); }
.confronto .esempio { margin: 0; max-width: none; }
@media (min-width: 720px) { .confronto { grid-template-columns: 1fr 1fr; } }

/* tabella dei valori: carte vere accanto ai punti, ma il testo resta testo */
.valori td .gruppo, .valori th .gruppo { margin-top: 6px; }
.valori .carte-cella { display: block; margin-top: 8px; }
.valori .gruppo { --w: 38px; --visibile: .5; }
.valori td.punti { font: 700 22px/1.2 var(--serif); white-space: nowrap; color: var(--bordeaux); vertical-align: middle; }
.valori td.punti small { font: 400 16px var(--ui); color: var(--testo-2); }

@media print { .carta { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }


@media (min-width: 720px) { .gruppo { --wmax: 64px; } .mano { --wmax: 60px; } .gruppo--ampio { --wmax: 72px; } }

/* tavola delle carte: griglia di tutte le facce */
.carte-griglia { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.carte-griglia li { --w: 56px; display: grid; justify-items: center; gap: 4px; font: 400 16px/1.2 var(--ui); color: var(--testo-2); }
.carte-griglia .carta { --w: 56px; }
.t-grigi { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; filter: grayscale(1); }
.t-grigi .carta--blocco { margin: 0; }
/* browser senza unita container (iPhone con iOS precedente al 16 e simili): carte a misura fissa, l'esempio scorre dentro il suo riquadro */
@supports not (width: 1cqw) { .gruppo { --w: 40px; } .valori .gruppo { --w: 38px; } }

/* testo delle carte dello sprite (prima stava in un <style> dentro l'SVG: la CSP del sito non ammette <style> in linea) */
.cv { font-family: Literata, Georgia, "Times New Roman", serif; font-weight: 700; text-anchor: middle; }
.cu { font-family: "Source Sans 3", Arial, sans-serif; font-weight: 700; }