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

.ville {
  position: relative;
  width: min(100%, 360px);
  border-radius: var(--r-grand);
  background: var(--studio-900);
  box-shadow: inset 0 0 0 1px var(--studio-800);
  touch-action: manipulation;
}

.ville svg.carte {
  width: 100%;
  height: auto;
}

.rue {
  stroke: var(--studio-50);
  stroke-width: 22;
  stroke-linecap: round;
  transition: stroke 260ms ease;
}

.rue.degagee {
  stroke: var(--studio-700);
}

.rue-ligne {
  stroke: transparent;
  stroke-width: 2.5;
  stroke-dasharray: 9 9;
  stroke-linecap: round;
  transition: stroke 260ms ease;
}

.rue-ligne.degagee {
  stroke: var(--studio-500);
}

.sens {
  fill: var(--studio-950);
  transition: fill 260ms ease;
}

.sens.degagee {
  fill: var(--studio-300);
}

.coin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
}

.coin::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--studio-500);
  transition: transform var(--d-court) var(--ease-out), background-color var(--d-court) ease;
}

.coin.possible::before {
  width: 16px;
  height: 16px;
  background: var(--fam);
  outline: 5px solid color-mix(in oklab, var(--fam) 30%, transparent);
}

.coin.refus::before {
  background: var(--erreur);
  animation: secousse 220ms var(--ease-out);
}

.deneigeuse {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--fam);
  color: var(--studio-950);
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.8), 0 0 0 3px var(--studio-950);
  pointer-events: none;
  transition: left 220ms var(--ease-in-out), top 220ms var(--ease-in-out);
}

.deneigeuse svg {
  width: 28px;
  height: 28px;
}

.garage {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  color: var(--texte-3);
  pointer-events: none;
}

.ville.resolue .deneigeuse {
  animation: deneigeuse-fete 600ms var(--ease-out);
}

@keyframes deneigeuse-fete {
  40% {
    transform: scale(1.18);
  }
}

.ville.mini {
  width: 190px;
}

@media (prefers-reduced-motion: reduce) {
  .coin.refus::before,
  .ville.resolue .deneigeuse {
    animation: none;
  }

  .deneigeuse {
    transition: none;
  }
}