/* ============================================================
   Chi siamo · Le promesse che non facciamo
   con Seven che sbircia la riga piccola
   Un mazzo di volantini urlati, le promesse che chi ha una
   bolletta si sente ripetere. Si buttano via uno a uno col bollino
   «No, grazie» attaccato sull'angolo (o, per chi lo sa fare,
   trascinandoli) e sotto ognuno c'è, calma e verde, la cosa che
   facciamo noi al suo posto. Resta lì finché non la tieni col
   bollino «Questa sì»: allora va in fila sotto, e alla fine sul
   tavolo restano solo quelle.
   Il volantino è stilizzato apposta: colori pieni, stella a raggi,
   grassetti stretti. Nessun marchio vero, nessuna foto.
   ============================================================ */

/* il volantino lanciato attraversa la pagina: non deve allargarla,
   e deve passare sopra le fasce che vengono dopo */
.spina { overflow-x: clip; z-index: 2; }

.pr-griglia {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "testo tavolo" "testo comandi" "fila fila";
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 5vw, 84px);
  align-items: start;
}
.pr-testo { grid-area: testo; padding-top: clamp(14px, 3vw, 48px); }
.pr-comandi { grid-area: comandi; }
.pr-fila-zona { grid-area: fila; }
.pr-tavolo { grid-area: tavolo; }

.pr-titolo {
  margin-top: 16px;
  font-size: clamp(38px, 4.9vw, 70px);
  font-weight: 830; font-stretch: 112%; letter-spacing: -.03em; line-height: .98;
  max-width: 13ch;
  text-wrap: balance;
}
.pr-titolo em { display: block; margin-top: .18em; font-style: normal; color: var(--green-deep); font-size: .62em; line-height: 1.04; max-width: 17ch; }
.pr-sotto { margin-top: 20px; font-size: 17.5px; color: var(--soft); max-width: 46ch; }

/* ---------- i comandi, sotto il mazzo ----------
   Larghi quanto il mazzo e allineati al suo bordo sinistro: sei
   pallini, il conto e, piccola, la riga per chi vuole trascinare */
.pr-griglia { --spazio-cestino: clamp(110px, 12.4vw, 178px); }
.pr-comandi {
  justify-self: center;
  width: min(calc(100% - var(--spazio-cestino)), 392px);
  margin-right: var(--spazio-cestino);
  /* il bollino sporge sotto il foglio: i pallini gli lasciano spazio */
  margin-top: 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.pr-conto { font-size: 15px; font-weight: 700; color: var(--soft); }
.pr-conto b { color: var(--ink); font-weight: 850; font-size: 18px; }
.pr-aiuto { font-size: 13.5px; color: var(--soft); }
.pr-aiuto-tel { display: none; }
/* a tavolo pulito la riga d'aiuto non serve più */
.pr-griglia.finita .pr-aiuto { display: none; }
.pr-punti { display: flex; gap: 7px; list-style: none; }
.pr-punti li {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #c5cec8; background: transparent;
  transition: background .3s, border-color .3s, transform .4s var(--ease);
}
.pr-punti li.pieno { background: var(--green); border-color: var(--green); }
.pr-punti li.arrivato { transform: scale(1.5); }

/* ---------- il tavolo ---------- */
.pr-tavolo {
  position: relative; z-index: 3;
  min-height: clamp(470px, 40vw, 560px);
  display: grid; place-items: center;
}
/* una macchia di luce sotto il mazzo: è il tavolo, senza disegnarlo */
.pr-tavolo::before {
  content: ""; position: absolute; inset: 4% 2% 0;
  background: radial-gradient(closest-side, rgba(75, 160, 120, .14), rgba(75, 160, 120, 0));
  z-index: -1;
}
.pr-mazzo {
  position: relative; isolation: isolate;
  width: min(calc(100% - var(--spazio-cestino)), 392px); aspect-ratio: 4 / 5;
  /* il mazzo cede posto a destra: lì sta il cestino, staccato dal
     foglio quanto basta perché il bollino «No, grazie» respiri */
  margin-right: var(--spazio-cestino);
}
.pr-coppia {
  position: absolute; inset: 0; z-index: calc(10 + var(--z, 0));
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg));
  transition: transform .5s var(--ease);
}
.pr-coppia.andata { display: none; }

/* ---------- il volantino ---------- */
.pr-volantino {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 26px 22px;
  border-radius: 5px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 40px -26px rgba(34, 58, 60, .75);
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  will-change: transform;
}
.pr-volantino:active { cursor: grabbing; }
.pr-volantino.t-sole {
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%),
    var(--sun);
}
.pr-volantino.t-bianco {
  background:
    linear-gradient(180deg, var(--sun) 0 12px, transparent 12px),
    #fffdf6;
}
.pr-volantino.t-righe {
  background:
    repeating-linear-gradient(-45deg, rgba(246, 183, 60, .42) 0 16px, rgba(246, 183, 60, 0) 16px 32px),
    var(--sun-soft);
}

.pr-occhio {
  font-size: 12.5px; font-weight: 850; letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 10px; background: var(--ink); color: var(--sun);
  transform: rotate(-2deg);
}
.pr-urlo {
  margin-top: 14px;
  font-size: clamp(31px, 2.9vw, 41px);
  font-weight: 900; font-stretch: 72%; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .95;
  max-width: 11ch;
}
.pr-urlo + .pr-urlo, .pr-urlo + .pr-enorme, .pr-enorme + .pr-urlo { margin-top: 6px; }
.pr-urlo-xl { font-size: clamp(46px, 4.3vw, 60px); line-height: .9; }
.pr-urlo-riga { font-size: clamp(26px, 2.4vw, 33px); max-width: none; white-space: nowrap; }
.pr-evid {
  background: #fff; padding: 2px 10px 4px;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1.5deg);
  max-width: none;
}
.t-sole .pr-evid, .t-righe .pr-evid { background: #fff; }
.t-bianco .pr-evid { background: var(--sun); }
.pr-enorme {
  font-size: clamp(136px, 12.8vw, 184px);
  font-weight: 900; font-stretch: 68%; line-height: .82; letter-spacing: -.03em;
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 6px 6px 0 var(--ink);
}
.pr-enorme-parola { font-size: clamp(64px, 5.6vw, 80px); text-transform: uppercase; margin-top: 12px; }
.pr-conta {
  margin-top: 22px; display: inline-flex; align-items: baseline; gap: 12px;
  padding: 10px 18px; border: 2.5px solid var(--ink); border-radius: 6px; background: #fff;
}
.pr-conta span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pr-orologio { font-size: 36px; font-weight: 900; font-stretch: 75%; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pr-numero {
  margin-top: 16px;
  font-size: 58px; font-weight: 900; font-stretch: 70%; letter-spacing: .02em;
  color: var(--green-deep); background: #fff;
  padding: 2px 14px; border-radius: 8px; border: 2.5px solid var(--green-deep);
}
.pr-moduli { margin-top: 26px; display: flex; gap: 12px; }
.pr-moduli i {
  display: block; width: 86px; height: 110px; background: #fff; border: 2px solid var(--ink); border-radius: 3px;
  background-image: repeating-linear-gradient(180deg, transparent 0 10px, rgba(34, 58, 60, .3) 10px 12px);
  background-size: 70% 100%; background-position: center 14px; background-repeat: no-repeat;
}
.pr-moduli i:nth-child(2) { transform: rotate(5deg) translateY(4px); }
.pr-moduli i:nth-child(3) { transform: rotate(-4deg); }
.pr-piccolo { margin-top: auto; padding-top: 12px; font-size: 11.5px; font-weight: 600; font-style: italic; opacity: .78; }
.pr-tagliando {
  align-self: stretch; margin-top: 12px; padding-top: 9px;
  border-top: 2px dashed rgba(34, 58, 60, .45);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .62;
  display: flex; align-items: center; gap: 8px;
}
.pr-tagliando::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a3c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 8.1L20 20M8.1 15.9L20 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* il timbro del volantino sugli incentivi */
.pr-timbro {
  position: absolute; right: 24px; bottom: 76px;
  width: 142px; height: 142px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 4px solid var(--ink); box-shadow: inset 0 0 0 5px var(--sun), inset 0 0 0 7px var(--ink);
  font-size: 17px; font-weight: 900; font-stretch: 72%; text-transform: uppercase; letter-spacing: .06em; line-height: 1;
  color: var(--ink); transform: rotate(-14deg);
}
.pr-timbro small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .14em; }

/* la stella a raggi, in alto a destra, che sborda dal foglio */
.pr-stella {
  position: absolute; top: -26px; right: -22px;
  width: 116px; height: 116px;
  display: grid; place-items: center;
  transform: rotate(12deg);
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.pr-stella::before {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  clip-path: polygon(50.0% 0.0%, 58.7% 12.0%, 71.7% 5.0%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89.0% 50.0%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%, 74.3% 80.5%, 71.7% 95.0%, 58.7% 88.0%, 50.0% 100.0%, 41.3% 88.0%, 28.3% 95.0%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11.0% 50.0%, 1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5.0%, 41.3% 12.0%);
}
.t-bianco .pr-stella::before { background: var(--sun); }
.pr-stella b {
  position: relative;
  font-size: 19px; font-weight: 900; font-stretch: 72%; text-transform: uppercase; letter-spacing: .01em;
  color: var(--ink);
}

/* ---------- la risposta, sotto il volantino ---------- */
.pr-risposta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 30px 28px 24px;
  background: linear-gradient(180deg, #fff 0%, #f6fbf8 100%);
  border: 1.5px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 60px -44px rgba(34, 58, 60, .9);
}
.pr-da-noi {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep);
}
.pr-da-noi i {
  width: 30px; height: 30px; border-radius: 50%; background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}
.pr-coppia.scoperta .pr-da-noi i { animation: pr-timbro .55s var(--ease) both; }
@keyframes pr-timbro {
  0% { transform: scale(0); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.pr-risposta h3 {
  margin-top: 22px;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 830; font-stretch: 108%; letter-spacing: -.026em; line-height: 1.08;
}
.pr-risposta p { margin-top: 14px; font-size: 16.5px; color: var(--soft); }
.pr-quale { margin-top: auto; font-size: 13px; font-weight: 800; color: var(--green); letter-spacing: .06em; }

/* ---------- il fondo del mazzo: il tavolo pulito ---------- */
/* il tavolo pulito sta nella parte bassa del mazzo: Seven, seduto
   sul suo bordo, resta così dentro lo schermo e sotto la testata */
.pr-fine {
  position: absolute; inset: 26% 0 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 28px;
  background: var(--green-soft);
  border: 2px dashed rgba(47, 122, 87, .35); border-radius: 18px;
  transition: background .5s, border-color .5s;
}
.pr-fine > *:not(.pr-seven-seduto) { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .15s, transform .5s var(--ease) .15s; }
.pr-fine-titolo {
  margin-top: 12px;
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 830; font-stretch: 110%; letter-spacing: -.028em; line-height: 1.02;
}
.pr-fine-titolo em { font-style: normal; color: var(--green-deep); }
.pr-fine p { margin-top: 12px; font-size: 16px; color: var(--soft); max-width: 30ch; }
.pr-fine-azioni { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pr-rimetti {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 800; color: var(--green-deep);
  border-bottom: 2px solid var(--sun); padding: 0 0 2px;
}
/* Seven seduto sul bordo alto del foglio, col volantino appallottolato:
   la coda sale dietro la schiena, il bordo cade al 35% dell'altezza */
.pr-seven-seduto {
  position: absolute; right: 26px; bottom: 100%;
  width: clamp(112px, 10vw, 138px);
  translate: 0 35%;
  opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom center;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.pr-mazzo.vuoto .pr-fine { background: #fff; border: 1.5px solid var(--line); box-shadow: 0 50px 80px -56px rgba(34, 58, 60, .85); }
.pr-mazzo.vuoto .pr-fine > * { opacity: 1; transform: none; }

/* ---------- il cestino, con Seven seduto sul bordo ----------
   Un cestino a rete verde, appoggiato sul tavolo accanto al mazzo e
   un filo dietro il suo fianco. È fatto di due strati: dietro la
   bocca e i fili lontani, davanti i fili vicini e il bordo; in
   mezzo cadono le palline, così si vedono attraverso la rete.
   Seven siede sul bordo davanti, un po' a destra, e lascia libera
   la parte sinistra dove si ammucchiano i volantini buttati. */
.pr-cestino {
  --h: clamp(186px, 16vw, 232px);   /* l'altezza di Seven */
  position: absolute; z-index: 1;
  left: calc(100% + 32px); bottom: -12px;
  width: clamp(134px, 11.6vw, 168px); aspect-ratio: 160 / 150;
  pointer-events: none;
}
/* l'ombra sul tavolo */
.pr-cestino::before {
  content: ""; position: absolute; z-index: -1;
  left: 4%; right: 4%; bottom: -5%; height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 58, 60, .26), rgba(34, 58, 60, 0));
}
.pr-cestino svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cb-dentro { fill: rgba(75, 160, 120, .09); }
.cb-bocca { fill: rgba(47, 122, 87, .12); }
.cb-filo-dietro { fill: none; stroke: rgba(47, 122, 87, .34); stroke-width: 1.7; stroke-linecap: round; }
.cb-bordo-dietro { fill: none; stroke: #3d8a64; stroke-width: 5; stroke-linecap: round; }
.cb-filo { fill: none; stroke: var(--green-deep); stroke-width: 2.3; stroke-linecap: round; }
.cb-fascia { fill: none; stroke: var(--green-deep); stroke-width: 3.4; stroke-linecap: round; }
.cb-base { fill: none; stroke: var(--green-deep); stroke-width: 6; stroke-linecap: round; }
.cb-bordo { fill: none; stroke: var(--green-deep); stroke-width: 6.5; stroke-linecap: round; }
.cb-luce { fill: none; stroke: #8fd3ae; stroke-width: 1.6; stroke-linecap: round; transform: translateY(-1.6px); }

/* le palline: una per volantino buttato, ognuna al suo posto */
.pr-palline { position: absolute; inset: 0; }
.pr-pallina {
  position: absolute; left: var(--x); top: var(--y);
  width: 22.5%; aspect-ratio: 1; object-fit: contain;
  rotate: var(--r, 0deg);
  opacity: 0;
  filter: drop-shadow(0 3px 3px rgba(34, 58, 60, .18));
}
.pr-pallina.dentro { opacity: 1; }

/* Seven: il punto d'appoggio è il bordo davanti del cestino, a
   destra. Ogni posa si allinea col centro del busto (--cx) e scende
   di quanto serve perché le ginocchia stiano sul bordo (--giu). */
.pr-seven-cestino {
  position: absolute; left: 70%; top: 17%;
  width: 0; height: 0;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.pr-posa {
  position: absolute; left: 0; bottom: 0;
  height: var(--h); width: auto; max-width: none;
  translate: calc(var(--cx, .5) * -100%) var(--giu, 35%);
  filter: drop-shadow(0 16px 16px rgba(34, 58, 60, .16));
  opacity: 0; transition: opacity .14s linear;
}
.pr-posa.attiva { opacity: 1; }
.pr-posa-lancia { --cx: .491; --giu: 34%; aspect-ratio: 428 / 700; }
.pr-posa-lancia img:first-child { display: block; width: 100%; height: 100%; }
.pr-posa-pollice { --cx: .532; --giu: 35%; }
/* la pallina che Seven fa saltare nella mano, ogni tanto */
.pr-palla-in-mano {
  position: absolute; left: 83.4%; top: 29.28%; width: 15.46%;
}
.pr-posa-lancia.lancia .pr-palla-in-mano { animation: pr-lancio 1.05s var(--ease); }
@keyframes pr-lancio {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  45% { transform: translateY(calc(var(--h) * -.13)) rotate(-160deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  88% { transform: translateY(0) rotate(-330deg); }
  94% { transform: translateY(calc(var(--h) * -.012)) rotate(-345deg); }
  100% { transform: rotate(-360deg); }
}
/* a mazzo finito Seven si sposta sul foglio pulito */
.pr-cestino.finito .pr-seven-cestino { opacity: 0; transform: translateY(10px); }

.pr-annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- la fila sotto: quello che resta ---------- */
.pr-fila-zona { position: relative; z-index: 1; margin-top: clamp(22px, 3vw, 40px); }
.pr-fila-titolo {
  font-size: clamp(20px, 1.8vw, 24px); font-weight: 830; font-stretch: 108%; letter-spacing: -.02em;
}
.pr-fila-titolo em { font-style: normal; color: var(--green-deep); }
.pr-fila-dopo { display: none; }
.pr-fila-zona.finita .pr-fila-prima { display: none; }
.pr-fila-zona.finita .pr-fila-dopo { display: inline; animation: pr-su .5s var(--ease); }
@keyframes pr-su { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-fila {
  list-style: none; margin-top: 14px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
.pr-posto {
  position: relative; min-height: 118px;
  padding: 14px 16px 16px;
  border: 2px dashed var(--line); border-radius: 16px;
  transition: background .4s, border-color .4s, transform .5s var(--ease);
}
.pr-posto-n { font-size: 12.5px; font-weight: 850; letter-spacing: .08em; color: #aab5ae; }
.pr-posto p { margin-top: 8px; font-size: 15px; font-weight: 720; line-height: 1.3; opacity: 0; transition: opacity .4s .1s; }
.pr-posto.pieno { background: var(--green-soft); border: 2px solid transparent; }
.pr-posto.pieno .pr-posto-n { color: var(--green-deep); display: inline-flex; align-items: center; gap: 7px; }
.pr-posto.pieno .pr-posto-n::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.pr-posto.pieno p { opacity: 1; }
.pr-posto.arrivato { animation: pr-arriva .5s var(--ease); }
@keyframes pr-arriva { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }

/* senza script: niente mazzo, le sei risposte già in fila */
html:not(.js) .pr-coppia, html:not(.js) .pr-comandi, html:not(.js) .pr-seven-cestino { display: none; }
html:not(.js) .pr-pallina { opacity: 1; }
html:not(.js) .pr-fine > * { opacity: 1; transform: none; }
html:not(.js) .pr-seven-seduto { opacity: 1; transform: none; }
html:not(.js) .pr-posto p { opacity: 1; }

/* ---------- telefono: il mazzo nella zona del pollice ----------
   Al telefono non si lancia col mouse: si fa scorrere la carta di
   lato, come si sfoglia un mazzo in mano. Il titolo si accorcia, il
   mazzo prende la larghezza, il tasto e i sei pallini stanno sotto
   il pollice. Le risposte si infilano nel loro pallino; la fila
   intera compare solo alla fine, sotto il tavolo pulito. */
@media (max-width: 720px) {
  .pr-griglia {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "testo" "tavolo" "comandi" "fila";
    grid-template-rows: auto;
  }
  .pr-testo { padding-top: 4px; }
  .pr-titolo { font-size: 36px; max-width: none; }
  .pr-titolo em { font-size: .6em; }
  .pr-sotto { margin-top: 12px; font-size: 15.5px; }
  .pr-tavolo { min-height: 0; padding: 30px 0 24px; }
  .pr-mazzo { width: min(82vw, 330px); }
  .pr-volantino { padding: 22px 20px 16px; }
  .pr-urlo { font-size: 28px; }
  .pr-urlo-xl { font-size: 42px; }
  .pr-urlo-riga { font-size: 25px; }
  .pr-enorme { font-size: 128px; }
  .pr-enorme-parola { font-size: 72px; }
  .pr-numero { font-size: 44px; }
  .pr-orologio { font-size: 28px; }
  .pr-moduli i { width: 70px; height: 90px; }
  .pr-timbro { width: 112px; height: 112px; font-size: 14px; bottom: 64px; }
  .pr-risposta h3 { font-size: 26px; }
  .pr-risposta::after { width: 84px; height: 84px; background-size: 40px; }
  .pr-stella { width: 92px; height: 92px; top: -20px; right: -14px; }
  .pr-stella b { font-size: 16px; }
  .pr-risposta { padding: 24px 22px 20px; }
  .pr-risposta p { font-size: 15.5px; }
  .pr-fine { padding: 22px; }
  .pr-seven-seduto { width: 92px; right: 16px; }
  /* al telefono il tavolo pulito prende l'altezza che gli serve,
     con lo spazio sopra per Seven seduto sul bordo */
  .pr-mazzo.vuoto { aspect-ratio: auto; }
  .pr-mazzo.vuoto .pr-fine { position: relative; inset: auto; margin-top: 118px; }
  .pr-mazzo { margin-right: 0; }
  /* sotto il mazzo resta il posto per la testa di Seven, che siede
     sul cestino accanto al conto */
  .pr-tavolo { padding-bottom: 56px; }
  .pr-griglia { --spazio-cestino: 0px; }
  /* il bollino sporge sotto il foglio: la testa di Seven scende quanto
     basta per non finirgli sotto */
  .pr-griglia:not(.finita) .pr-tavolo { padding-bottom: 92px; }

  /* al telefono il cestino sta per terra, nella zona del pollice,
     accanto ai pallini e al conto; le palline ci cadono dentro
     mentre si sfoglia il mazzo */
  .pr-comandi {
    width: 100%; margin: 14px 0 0;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px;
  }
  .pr-comandi .pr-cestino {
    --h: 124px;
    position: relative; left: auto; bottom: auto;
    grid-column: 3; grid-row: 1 / 3; align-self: end;
    width: 82px; margin: 0 4px 0 2px;
  }
  .pr-comandi .pr-seven-cestino { left: 64%; }
  /* a mazzo finito Seven è sul foglio: la testa non serve più posto */
  .pr-griglia.finita .pr-tavolo { padding-bottom: 20px; }
  .pr-punti { gap: 8px; grid-column: 1; grid-row: 1; }
  .pr-punti li { width: 14px; height: 14px; }
  .pr-conto { grid-column: 2; grid-row: 1; font-size: 14px; }
  .pr-aiuto { grid-column: 1 / 3; grid-row: 2; font-size: 13.5px; }
  .pr-aiuto-desk { display: none; }
  .pr-aiuto-tel { display: inline; }

  .pr-fila-zona { display: none; }
  .pr-fila-zona.finita { display: block; margin-top: 26px; }
  .pr-fila { grid-template-columns: 1fr; gap: 8px; }
  .pr-posto { min-height: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
  .pr-posto p { margin-top: 0; }
  html:not(.js) .pr-fila-zona { display: block; }
}

@media (min-width: 721px) and (max-width: 940px) {
  .pr-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; --spazio-cestino: 0px; }
  .pr-titolo { font-size: 40px; }
  .pr-mazzo { width: min(calc(100% - 64px), 290px); justify-self: start; }
  .pr-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-mazzo { margin-right: 0; }
  /* il cestino si stacca dal foglio, così il bollino non gli finisce
     sopra: la colonna del tavolo si prende lo spazio che serve */
  .pr-griglia { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .pr-cestino { --h: 146px; width: 100px; left: calc(100% + 16px); }
  .pr-comandi { justify-self: start; width: min(calc(100% - 64px), 290px); }
  /* il foglio pulito prende l'altezza che gli serve, e Seven più
     piccolo non copre il titolo */
  .pr-mazzo.vuoto { aspect-ratio: auto; }
  .pr-mazzo.vuoto .pr-fine { position: relative; inset: auto; margin-top: 112px; padding: 24px 22px; }
  .pr-seven-seduto { width: 86px; right: -12px; }
  .pr-volantino { padding: 22px 20px 16px; }
  .pr-occhio { font-size: 10.5px; letter-spacing: .14em; }
  .pr-urlo { font-size: 24px; }
  .pr-urlo-xl { font-size: 34px; }
  .pr-urlo-riga { font-size: 21px; }
  .pr-enorme { font-size: 104px; }
  .pr-enorme-parola { font-size: 62px; }
  .pr-numero { font-size: 34px; margin-top: 12px; }
  .pr-orologio { font-size: 26px; }
  .pr-moduli i { width: 56px; height: 72px; }
  .pr-timbro { width: 104px; height: 104px; font-size: 13px; bottom: 60px; }
  .pr-risposta h3 { font-size: 24px; }
  .pr-risposta::after { width: 76px; height: 76px; background-size: 36px; }
  .pr-stella { width: 80px; height: 80px; top: -18px; right: -12px; }
  .pr-stella b { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-posa-lancia.lancia .pr-palla-in-mano { animation: none; }
  .pr-posto.arrivato, .pr-punti li.arrivato { animation: none; transform: none; }
}

/* ============================================================
   i bollini
   Due adesivi veri, attaccati sull'angolo in basso a destra del
   foglio e un po' fuori, con il bordo bianco del ritaglio e la loro
   ombra. Sul volantino «No, grazie», scuro, con la manina; sulla
   risposta il gemello verde, «Questa sì», con la spunta. Dicono
   sempre cosa fare: «clicca» sul computer, «tocca» al telefono.
   ============================================================ */
.pr-bollino {
  position: absolute; z-index: 5;
  right: -16px; bottom: -20px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 11px;
  border: 4px solid #fff; border-radius: 22px;
  background: var(--ink); color: #fff;
  font-family: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 18px 26px -14px rgba(20, 38, 40, .8);
  transform: rotate(-6deg);
  transition: transform .3s var(--ease), box-shadow .3s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.pr-bollino:hover { transform: rotate(-3deg) scale(1.05); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 24px 30px -14px rgba(20, 38, 40, .8); }
.pr-bollino:active { transform: rotate(-3deg) scale(.97); }
.pr-bollino:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.pr-bollino-segno {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sun); color: var(--ink);
}
.pr-bollino-segno svg { width: 25px; height: 25px; overflow: visible; }
.pr-bollino-testo b { display: block; font-size: 23px; font-weight: 850; letter-spacing: -.012em; line-height: 1.02; white-space: nowrap; }
.pr-bollino-testo small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 750; letter-spacing: .01em; color: var(--sun); white-space: nowrap; }
/* il richiamo: un alone che si allarga dal bollino, finché non lo usi */
.pr-bollino::before {
  content: ""; position: absolute; inset: -4px; border-radius: 24px;
  border: 3px solid var(--sun); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pr-mazzo:not(.usato) .pr-coppia.in-cima .pr-no-grazie::before { animation: pr-alone 1.9s var(--ease) infinite; }
  .pr-mazzo:not(.usato) .pr-coppia.in-cima .pr-no-grazie .pr-bollino-segno svg { animation: pr-tocca 1.9s var(--ease) infinite; }
  .pr-mazzo:not(.tenuta) .pr-coppia.scoperta .pr-tienila::before { animation: pr-alone 1.9s var(--ease) 1.2s infinite; }
}
@keyframes pr-alone {
  0% { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22, 1.5); }
}
/* la manina che tocca il bollino */
@keyframes pr-tocca {
  0%, 55%, 100% { transform: none; }
  20% { transform: translate(1px, 3px) scale(.86); }
  35% { transform: none; }
}
/* si vede solo il bollino del volantino in cima; col clic se ne va subito */
.pr-coppia:not(.in-cima) .pr-no-grazie { visibility: hidden; }
.pr-volantino.via .pr-no-grazie { opacity: 0; pointer-events: none; }

/* il gemello sulla risposta: verde, arriva un attimo dopo la
   risposta, come un timbro, e resta finché non lo usi */
.pr-tienila {
  background: var(--green-deep);
  transform: rotate(4deg);
  visibility: hidden; opacity: 0;
}
.pr-tienila:hover { transform: rotate(2deg) scale(1.05); }
.pr-tienila:active { transform: rotate(2deg) scale(.97); }
.pr-tienila .pr-bollino-segno { background: #fff; color: var(--green-deep); }
.pr-tienila .pr-bollino-segno svg { width: 22px; height: 22px; }
.pr-tienila small { color: #bfe6cf; }
.pr-tienila::before { border-color: var(--green); }
.pr-coppia.scoperta .pr-tienila { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pr-coppia.scoperta .pr-tienila { animation: pr-bollino-arriva .5s var(--ease) .55s backwards; }
}
@keyframes pr-bollino-arriva {
  0% { opacity: 0; transform: rotate(-16deg) scale(.5); }
  70% { opacity: 1; transform: rotate(7deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(4deg) scale(1); }
}
/* la risposta lascia posto al bollino: il «n di 6» resta a sinistra */
.pr-risposta { padding-bottom: 30px; }

/* «clicca» col mouse, «tocca» col dito */
.solo-tel { display: none; }
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .solo-desk { display: none; }
  .solo-tel { display: inline; }
}

/* la pallina in volo: nasce dal foglio che si appallottola e cade
   nel cestino dal punto in cui il foglio sparisce */
.pr-palla-volo {
  position: fixed; left: 0; top: 0; z-index: 60;
  object-fit: contain; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 6px 6px rgba(34, 58, 60, .2));
}

/* ---------- la fila: le carte tenute si rileggono ----------
   La carta piena dice «Rileggila»; aperta, la riga che la spiega
   scende sotto come un risvolto bianco, sopra quello che c'è dopo,
   e la fila resta alta com'è */
.pr-posto.pieno { cursor: pointer; transition: background .25s, box-shadow .25s, transform .5s var(--ease); }
.pr-posto.pieno:hover { background: #d8ecdf; }
.pr-posto.pieno:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.pr-posto-rileggi, .pr-posto-chiudi {
  align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--green-deep);
}
.pr-posto-rileggi { display: none; margin-top: auto; padding-top: 10px; }
.pr-posto-rileggi::after, .pr-posto-chiudi::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.pr-posto-chiudi { display: inline-flex; margin-top: 10px; }
.pr-posto-chiudi::after { transform: translateY(2px) rotate(-135deg); }
.pr-posto.pieno .pr-posto-rileggi { display: inline-flex; }
.pr-posto.aperto .pr-posto-rileggi { visibility: hidden; }
.pr-posto-piu { display: none; }
.pr-posto-testo { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--soft); }
.pr-posto.aperto { z-index: 4; }
.pr-posto.aperto .pr-posto-piu { display: flex; animation: pr-su .3s var(--ease); }
@media (min-width: 721px) {
  .pr-posto { display: flex; flex-direction: column; align-items: flex-start; }
  .pr-posto-piu {
    position: absolute; left: -2px; right: -2px; top: -2px;
    flex-direction: column; align-items: flex-start;
    padding: 14px 16px 14px;
    background: #fff; border: 2px solid var(--green); border-radius: 16px;
    box-shadow: 0 26px 34px -22px rgba(34, 58, 60, .7);
  }
}

/* ---------- telefono ---------- */
@media (max-width: 720px) {
  .pr-bollino { right: -10px; bottom: -18px; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 20px; }
  .pr-bollino-segno { width: 38px; height: 38px; }
  .pr-bollino-segno svg { width: 22px; height: 22px; }
  .pr-bollino-testo b { font-size: 20px; }
  .pr-bollino-testo small { font-size: 12px; }
  .pr-fila-zona.finita .pr-posto { flex-wrap: wrap; }
  .pr-posto p { flex: 1; }
  .pr-posto-rileggi { order: 1; margin: 0; }
  .pr-posto.aperto .pr-posto-rileggi { display: none; }
  .pr-posto-piu { order: 2; flex-basis: 100%; flex-direction: column; align-items: flex-start; }
  .pr-posto.pieno .pr-posto-piu .pr-posto-n, .pr-posto.pieno .pr-posto-piu p { display: none; }
  .pr-posto-testo { margin-top: 0; }
  .pr-posto.aperto { background: #fff; border-color: var(--green); }
}
@media (min-width: 721px) and (max-width: 940px) {
  .pr-bollino { right: -14px; bottom: -18px; padding: 9px 16px 9px 9px; }
  .pr-bollino-segno { width: 36px; height: 36px; }
  .pr-bollino-testo b { font-size: 19px; }
  .pr-bollino-testo small { font-size: 11.5px; }
}

/* ============================================================
   Seven sbircia la riga piccola
   La riga con l'asterisco resta piccola com'è: Seven la fa solo
   notare. A ogni volantino nuovo si sporge dal cestino, ferma la
   lente un attimo sull'asterisco, che nel vetro si vede ingrandito,
   e torna a sedersi.
   La riga sta in basso a destra, dalla parte di Seven, in un
   blocchetto stretto come le avvertenze vere.
   ============================================================ */
.pr-piccolo {
  align-self: flex-end; text-align: right;
  max-width: 11em; line-height: 1.25;
  margin-bottom: 4px; margin-right: -10px;
}
/* il cestino si avvicina un poco al mazzo: da seduto sul bordo Seven
   arriva con la lente fino all'asterisco */
@media (min-width: 941px) { .pr-cestino { left: calc(100% + 18px); bottom: -24px; } }
/* il timbro «Già approvato!» sale un poco: sotto c'è la riga piccola */
.pr-timbro { bottom: 112px; }

/* le due pose della sbirciata: stesso posto e stessa misura delle
   altre, allineate sulle scarpe e sulla seduta. Le misure vengono dal
   ritaglio: --k ingrandisce la lente, --ingrandisci il testo nel vetro */
.pr-posa-sbircia { --k: 2; --ingrandisci: 2.1; --inclina: 11; }
.pr-sbircia-lato {
  width: calc(var(--h) * .8777); height: calc(var(--h) * .9042);
  translate: calc(var(--h) * -.6845) calc(var(--h) * .3432);
}
.pr-sbircia-su {
  display: none;
  width: calc(var(--h) * .6370); height: calc(var(--h) * 1.0808);
  translate: calc(var(--h) * -.3076) calc(var(--h) * .3417);
}
.pr-sbircia-corpo {
  position: absolute; inset: 0;
  transform: translateX(var(--tx, 0px)) rotate(var(--rot, 0deg));
}
.pr-sbircia-lato .pr-sbircia-corpo { transform-origin: 78.1% 62%; }      /* la seduta */
.pr-sbircia-su .pr-sbircia-corpo { transform-origin: 48.5% 68.4%; }
.pr-sbircia-corpo > img, .pr-sbircia-lente img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-sbircia-lente { position: absolute; inset: 0; transform: scale(var(--k)); }
.pr-sbircia-lato .pr-sbircia-lente { transform-origin: 28.15% 69.75%; }  /* dove il manico entra nella cornice */
.pr-sbircia-su .pr-sbircia-lente { transform-origin: 34.12% 17.62%; }
.pr-sbircia-centro { position: absolute; width: 0; height: 0; }
.pr-sbircia-lato .pr-sbircia-centro { left: 14.69%; top: 68.45%; }
.pr-sbircia-su .pr-sbircia-centro { left: 25.9%; top: 9.83%; }
/* mentre sbircia Seven passa davanti al volantino in cima, e il
   cambio di posa è netto, come uno stacco: niente due Seven a metà */
.pr-cestino.sbircia { z-index: 30; }
.pr-cestino.sbircia .pr-posa { transition: none; }

/* dentro il vetro: una copia del volantino, ingrandita attorno al
   centro della lente e ritagliata al cerchio. Sta dentro il volantino,
   così gira con lui; il vetro e la cornice le passano sopra */
.pr-lente-vista {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
}
.pr-copia {
  position: absolute; inset: 0; margin: 0;
  box-shadow: none !important; cursor: default; pointer-events: none;
  transition: none !important; will-change: auto;
}
.pr-copia, .pr-copia *, .pr-copia *::before, .pr-copia *::after { animation: none !important; transition: none !important; }

/* la riga piccola sotto il puntatore: Seven arriva subito */
.pr-coppia.in-cima .pr-piccolo { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .pr-posa { transition: none; }
}

/* ---------- portatili piccoli: Seven è più piccolo, la lente un po'
   più grande perché arrivi all'asterisco ---------- */
@media (min-width: 941px) and (max-width: 1320px) {
  .pr-posa-sbircia { --k: 2.45; --ingrandisci: 2; }
  .pr-cestino { left: calc(100% + 12px); }
  .pr-bollino { right: -8px; }
}

/* ---------- tablet e telefono: la riga piccola va incontro alla lente ----------
   Qui la lente sale e scende di poco, e i volantini più pieni
   (l'orologio, il numero verde, i moduli) spingevano la riga fuori
   dalla sua portata, a volte fuori dal foglio. La riga sta allora
   sempre nello stesso punto, appena sopra il tratteggio, dove arriva
   la lente: al massimo tre righe, centrate in altezza. Il volantino
   si allunga un poco, così sopra resta posto per tutto il resto. */
@media (max-width: 940px) {
  .pr-piccolo {
    position: absolute; right: var(--pc-destra); bottom: var(--pc-sotto);
    width: var(--pc-largo); max-width: none; height: 3.6em; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: flex-end;
    line-height: 1.2;
  }
  /* senza la riga piccola nel flusso è il tratteggio a scendere in fondo */
  .pr-tagliando { margin-top: auto; }
  .pr-mazzo:not(.vuoto) { aspect-ratio: var(--volantino); }
}

/* ---------- tablet stretto ----------
   Seven è più piccolo: il cestino sale e si avvicina al mazzo e la
   lente è un po' più grande */
@media (min-width: 721px) and (max-width: 940px) {
  .pr-griglia { --pc-destra: 10px; --pc-sotto: 61px; --pc-largo: 9em; --volantino: 4 / 5.4; }
  .pr-posa-sbircia { --k: 2.6; --ingrandisci: 1.7; }
  .pr-bollino { bottom: -26px; }
  .pr-timbro { bottom: 118px; }
  .pr-cestino { left: calc(100% + 8px); bottom: 10px; }
}

/* ---------- telefono ----------
   Seven sta sotto il volantino, sul cestino, con la testa davanti
   all'angolo in basso a destra del foglio: lì la lente la alza. I
   due bollini passano all'angolo in basso a sinistra, così lui non
   li copre mai e la riga piccola resta libera. */
@media (max-width: 720px) {
  .pr-griglia { --pc-destra: 46px; --pc-sotto: 59px; --pc-largo: 8.8em; --volantino: 4 / 5.6; }
  .pr-sbircia-lato { display: none; }
  .pr-sbircia-su { display: block; }
  /* la lente alzata da sotto: un po' più grande, e Seven si piega di
     più, così arriva all'asterisco */
  .pr-posa-sbircia { --k: 4; --ingrandisci: 1.5; --inclina: 10; }
  .pr-timbro { bottom: 132px; }
  .pr-bollino { right: auto; left: -12px; bottom: -18px; }
  .pr-no-grazie { transform: rotate(5deg); }
  .pr-no-grazie:hover { transform: rotate(3deg) scale(1.05); }
  .pr-no-grazie:active { transform: rotate(3deg) scale(.97); }
  /* «n di 6» sale accanto a «Da noi»: in basso a sinistra c'è il bollino */
  .pr-quale { position: absolute; top: 28px; right: 22px; margin: 0; }
  .pr-tienila { transform: rotate(-4deg); }
  .pr-tienila:hover { transform: rotate(-2deg) scale(1.05); }
  .pr-tienila:active { transform: rotate(-2deg) scale(.97); }
  /* il cestino sale fin sotto il volantino, a destra; i comandi sono
     larghi quanto il mazzo più un filo, così sui telefoni grandi il
     cestino resta sotto l'angolo del foglio e non sul bordo dello
     schermo. Seven siede quanto basta in basso perché la lente arrivi
     appena sopra il tratteggio */
  .pr-griglia:not(.finita) .pr-tavolo { padding-bottom: 30px; }
  .pr-comandi {
    position: relative; width: min(100%, calc(min(82vw, 330px) + 38px));
    margin: 0 auto; padding-right: 104px; min-height: 64px;
  }
  .pr-comandi .pr-cestino { position: absolute; right: 8px; top: var(--su-cestino, -14px); z-index: 4; }
  .pr-griglia.finita .pr-comandi .pr-cestino { top: 0; }
}

/* ---------- computer: quello che resta sul tavolo, accanto al mazzo ----------
   La fila sta nella colonna del titolo, sotto la frase, dove accanto
   al mazzo c'era spazio vuoto: si vede mentre si gioca, e la risposta
   tenuta ci vola dentro, anche sui portatili bassi (1366×768,
   1536×864 col testo al 125%) e in full HD. Il titolo si stringe un
   poco anche con l'altezza dello schermo, non solo con la larghezza. */
@media (min-width: 941px) {
  /* la quarta riga, elastica, prende l'altezza in più della fila:
     i pallini e il conto restano attaccati sotto il mazzo */
  .pr-griglia {
    grid-template-areas: "testo tavolo" "fila tavolo" "fila comandi" "fila .";
    grid-template-rows: auto auto auto 1fr;
    /* al mazzo quello che gli serve, col cestino; il resto alla colonna
       del titolo, dove ora sta anche la fila */
    grid-template-columns: minmax(0, 1fr) calc(392px + var(--spazio-cestino) + 16px);
  }
  .spina { padding-top: clamp(16px, 3.5vh, 48px); }
  .pr-testo { padding-top: clamp(6px, 3vh, 48px); }
  .pr-titolo { font-size: clamp(36px, min(4.9vw, 6.6vh), 70px); margin-top: clamp(8px, 1.6vh, 16px); }
  .pr-sotto { margin-top: clamp(10px, 2vh, 20px); font-size: clamp(16px, 2.5vh, 17.5px); }
  .pr-fila-zona { margin-top: clamp(16px, 3.4vh, 40px); align-self: start; max-width: 760px; }
  .pr-fila-titolo { font-size: clamp(18px, 3.2vh, 24px); }
  .pr-fila { margin-top: clamp(8px, 1.4vh, 12px); }
  .pr-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin-top: 12px; }
  .pr-posto > p { text-wrap: pretty; }
}
/* schermi bassi (1366×768, 1280×720): la sezione parte più vicina
   alla testata, così la seconda riga di carte resta dentro */
@media (min-width: 941px) and (max-height: 700px) {
  .spina { padding-top: 14px; }
  .pr-testo { padding-top: 10px; }
}
/* portatili stretti: la colonna non basta per tre carte affiancate */
@media (min-width: 941px) and (max-width: 1199px) {
  .pr-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Le carte della fila: ognuna col suo segno
   Orizzontali e basse, così la fila sta accanto al mazzo anche sui
   portatili bassi. Ogni posto ha il suo disegno (la bolletta, la
   penna, la mano che si ferma, il palazzo, la persona, la cartella):
   grigio e tratteggiato finché il posto è vuoto, così si intuisce
   cosa arriva; verde quando la carta tenuta ci arriva sopra.
   ============================================================ */
.pr-posto-segno { display: none; }
.pr-posto-segno svg { display: block; width: 100%; height: 100%; }

@media (min-width: 721px) {
  .pr-posto {
    display: grid; grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "segno testo" "numero rileggi";
    grid-template-rows: 1fr auto;
    column-gap: 11px; align-items: start;
    min-height: clamp(74px, 11vh, 98px); padding: clamp(9px, 1.5vh, 12px) 14px clamp(8px, 1.4vh, 11px) 10px;
  }
  .pr-posto > p { grid-area: testo; margin-top: 0; font-size: clamp(13.5px, 2.15vh, 14.5px); line-height: 1.28; }
  .pr-posto > .pr-posto-n { grid-area: numero; justify-self: center; padding-top: 6px; font-size: 11px; }
  .pr-posto > .pr-posto-rileggi { grid-area: rileggi; margin-top: 0; padding-top: clamp(3px, .8vh, 6px); font-size: 12px; }
  .pr-posto-piu { z-index: 3; }
  .pr-posto-segno {
    grid-area: segno; display: block;
    width: 36px; height: 36px; padding: 8px; border-radius: 11px;
    border: 1.5px dashed #cdd5cf; color: #b9c3bc;
    transition: background .35s, color .35s, border-color .35s, box-shadow .35s;
  }
  .pr-posto.pieno {
    background: #fff; border: 1.5px solid var(--line);
    box-shadow: 0 16px 24px -20px rgba(34, 58, 60, .55);
  }
  .pr-posto.pieno:hover { background: #f5fbf7; }
  .pr-posto.pieno .pr-posto-segno {
    background: var(--green); border: 1.5px solid var(--green); color: #fff;
    box-shadow: 0 10px 16px -10px rgba(47, 122, 87, .9);
  }
  .pr-posto.pieno .pr-posto-n { color: #aab5ae; }
  .pr-posto.pieno .pr-posto-n::after { display: none; }
  .pr-posto.arrivato .pr-posto-segno { animation: pr-segno .5s var(--ease); }
  @keyframes pr-segno { 0% { transform: scale(.6) rotate(-12deg); } 65% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } }
}

/* al telefono, nell'elenco di fine partita, il segno sta al posto della spunta */
@media (max-width: 720px) {
  .pr-posto.pieno { background: #fff; border: 1.5px solid var(--line); }
  .pr-posto.pieno.aperto { border-color: var(--green); }
  .pr-posto-segno {
    display: block; flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 10px;
    background: var(--green); color: #fff;
  }
  .pr-posto.pieno .pr-posto-n::after { display: none; }
}