/* La caisse : le plateau du jeu. Chaque état se lit par la forme autant que par la couleur. */

.ticket {
  position: relative;
  width: min(100%, 340px);
  padding: var(--e-4) var(--e-5) var(--e-5);
  background: var(--fiche);
  color: var(--encre);
  border-radius: 6px 6px 0 0;
  box-shadow: var(--ombre-fiche);
  font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x;
  mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) -8px 0 / 16px 100% repeat-x;
}

.ticket-entete {
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-2);
  border-bottom: 1px dashed var(--fiche-ombre);
  font-family: var(--police-titre);
  font-stretch: 130%;
  font-weight: 800;
  font-size: var(--t-etiquette);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--encre-2);
}

.ticket-ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding: 3px 0;
}

.ticket-ligne .pointilles {
  flex: 1;
  border-bottom: 1.5px dotted var(--fiche-ombre);
  transform: translateY(-4px);
}

.ticket-ligne.total {
  margin-top: var(--e-1);
  padding-top: var(--e-2);
  border-top: 1px dashed var(--fiche-ombre);
  font-weight: 800;
  font-size: var(--t-sous);
}

.ticket-ligne.donne {
  color: var(--fam-encre);
  font-weight: 800;
}

.question {
  font-family: var(--police-titre);
  font-stretch: 112%;
  font-weight: 750;
  font-size: var(--t-titre);
  line-height: 1.15;
  text-align: center;
}

.choix-montants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  width: 100%;
}

.choix-montant {
  min-height: 60px;
  border-radius: var(--r-moyen);
  background: var(--surface-haute);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  font-family: var(--police-titre);
  font-stretch: var(--chiffres-largeur);
  font-weight: var(--chiffres-graisse);
  font-size: var(--t-titre);
  font-variant-numeric: tabular-nums;
  transition: transform var(--d-appui) var(--ease-out), box-shadow var(--d-court) ease;
}

.choix-montant:active {
  transform: scale(0.96);
}

.choix-montant.juste {
  box-shadow: inset 0 0 0 3px var(--fam);
}

.choix-montant.faux {
  box-shadow: inset 0 0 0 3px var(--erreur);
}

.affichage {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 60px;
  padding: 0 var(--e-4);
  border-radius: var(--r-moyen);
  background: var(--studio-950);
  box-shadow: inset 0 0 0 1px var(--studio-800);
  font-family: var(--police-titre);
  font-stretch: var(--chiffres-largeur);
  font-weight: var(--chiffres-graisse);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  color: var(--points);
}

.affichage.vide {
  color: var(--texte-3);
}

.affichage.juste {
  box-shadow: inset 0 0 0 3px var(--fam);
}

.affichage.faux {
  box-shadow: inset 0 0 0 3px var(--erreur);
}

.clavier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
  width: 100%;
}

.touche {
  display: grid;
  place-items: center;
  min-height: 54px;
  border-radius: var(--r-moyen);
  background: var(--surface-haute);
  font-family: var(--police-titre);
  font-stretch: var(--chiffres-largeur);
  font-weight: var(--chiffres-graisse);
  font-size: var(--t-titre);
  transition: transform var(--d-appui) var(--ease-out), background-color var(--d-court) ease;
}

.touche:active {
  transform: scale(0.95);
  background: var(--studio-700);
}

.touche svg {
  width: 24px;
  height: 24px;
}

.touche-valider {
  grid-column: 1 / -1;
  background: var(--fam);
  color: var(--studio-950);
  font-size: var(--t-sous);
}

.touche-valider:active {
  background: color-mix(in oklab, var(--fam) 80%, black);
}

.ticket.mini {
  width: 210px;
  padding: var(--e-3) var(--e-4) var(--e-4);
  font-size: var(--t-petit);
}