/* Aspetto delle carte, condiviso da tutti i giochi di carte della Sala Giochi.
   Va incluso insieme a carte.js. Le variabili di colore sono quelle del sito. */

.carta{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:5/7;
  padding:0;
  background:#F6F1E4;
  border:1px solid #B9AE95;
  border-radius:6px;
  color:#12242B;
  font:inherit;
  line-height:1;
  cursor:pointer;
  overflow:hidden;
}

.carta.rossa{color:#B3243F}
.carta.nera{color:#12242B}

.carta .angolo{
  position:absolute;
  top:4%;
  left:6%;
  font-size:clamp(.62rem,2.9vw,1rem);
  font-weight:700;
  letter-spacing:-.02em;
}

.carta .centro{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(1rem,5vw,1.7rem);
  opacity:.9;
}

/* dorso */
.carta.coperta{
  background:#1B3E4A;
  border-color:#3A6C7C;
  background-image:repeating-linear-gradient(45deg,#22505E 0 6px,#1B3E4A 6px 12px);
  cursor:pointer;
}

/* segnaposto di pila vuota */
.carta.vuota{
  background:transparent;
  border:1px dashed #3A6C7C;
  color:#5B717A;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(.7rem,3.4vw,1.1rem);
}

/* stati */
.carta.scelta{box-shadow:0 0 0 3px #E9B44C inset;transform:translateY(-3px)}
.carta.spostabile{cursor:pointer}
.carta:disabled{cursor:default}
.carta:focus-visible{outline:2px solid #F1E9D6;outline-offset:2px}

/* pile sovrapposte: la carta scoperta lascia vedere una striscia,
   quella coperta una striscia piu' sottile */
.pila{position:relative;display:flex;flex-direction:column}
.pila .carta + .carta{margin-top:-105%}
.pila .carta.coperta + .carta{margin-top:-122%}