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

/* Le terrain : un carré dans le décor (cadre sombre), avec le stationnement enneigé dedans. Tout ce qui est
   posé dessus (véhicules, bancs, sortie) est placé en pourcentage du terrain, à l'intérieur de sa boîte.
   Le terrain coupe ce qui dépasse : ton auto qui sort par la trouée disparaît au bord, sans rien déborder. */
.stationnement-terrain {
  position: relative;
  flex: none;
  width: min(100%, 360px);
  aspect-ratio: 1;
  border-radius: var(--r-moyen);
  background: var(--studio-950);
  box-shadow: inset 0 0 0 1px var(--studio-800), var(--ombre-pupitre);
  overflow: hidden;
  overflow: clip;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  --stationnement-ligne: color-mix(in oklab, var(--studio-500) 38%, transparent);
  /* Ombres sur la neige : le bleu de coulisse (studio-950) en canaux RVB, pour doser l'opacité. */
  --stationnement-ombre: 9 8 35;
}

/* La neige du stationnement, avec les lignes des places qui paraissent encore. */
.stationnement-sol {
  position: absolute;
  border-radius: 6px;
  background-color: var(--studio-100);
  background-image:
    linear-gradient(to right, var(--stationnement-ligne) 1px, transparent 1px),
    linear-gradient(to bottom, var(--stationnement-ligne) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 6);
  box-shadow: inset 0 6px 10px -8px rgb(var(--stationnement-ombre) / 0.35);
}

/* La sortie : une trouée dans le cadre, au bout de la rangée de sortie. Elle s'allume quand ton auto sort. */
.stationnement-sortie {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--studio-100);
  box-shadow: -3px 0 0 var(--studio-100);
  color: var(--studio-700);
  transition: background-color var(--d-court) ease, color var(--d-court) ease, box-shadow var(--d-court) ease;
}

.stationnement-sortie svg {
  width: 100%;
  height: 72%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stationnement-gagne .stationnement-sortie {
  background: var(--fam);
  box-shadow: -3px 0 0 var(--fam);
  color: var(--studio-950);
}

/* Un banc de neige : fixe, on ne peut pas le toucher. */
.stationnement-banc {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgb(var(--stationnement-ombre) / 0.22));
}

.stationnement-banc svg {
  width: 100%;
  height: 100%;
}

.stationnement-banc-contour {
  fill: var(--studio-700);
  stroke: var(--studio-700);
  stroke-width: 6;
}

.stationnement-banc-neige {
  fill: var(--studio-50);
}

.stationnement-banc-relief {
  fill: none;
  stroke: var(--studio-300);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Les véhicules : vus du dessus, cerclés d'encre. Couché, un véhicule se glisse à l'horizontale et la page
   défile encore si on glisse le doigt à la verticale ; debout, le doigt ne fait que le glisser. */
.stationnement-vehicule {
  position: absolute;
  display: block;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0 6px 10px -6px rgb(var(--stationnement-ombre) / 0.6);
  touch-action: pan-y;
  -webkit-touch-callout: none;
  cursor: grab;
  transition:
    left 140ms var(--ease-out),
    top 140ms var(--ease-out),
    transform var(--d-appui) var(--ease-out),
    box-shadow var(--d-court) ease;
  --stationnement-carrosserie: var(--studio-700);
  --stationnement-vitre: var(--studio-950);
}

.stationnement-debout {
  touch-action: none;
}

.stationnement-camion {
  border-radius: 9px;
}

.stationnement-vehicule:disabled {
  cursor: default;
}

.stationnement-vehicule svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stationnement-carrosserie {
  fill: var(--stationnement-carrosserie);
  stroke: var(--studio-950);
  stroke-width: 3;
}

.stationnement-vitre {
  fill: var(--stationnement-vitre);
}

.stationnement-phare {
  fill: var(--studio-100);
}

.stationnement-neige {
  fill: var(--studio-50);
}

/* La caisse d'un camion : claire, pour que le camion se lise d'un seul bloc avec sa cabine de couleur. */
.stationnement-caisse {
  fill: var(--studio-300);
  stroke: var(--studio-950);
  stroke-width: 3;
}

.stationnement-nervure {
  fill: none;
  stroke: var(--studio-500);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Les autres véhicules prennent les bleus de nuit du studio ; ton auto, la couleur de la famille. */
.stationnement-teinte-1 {
  --stationnement-carrosserie: var(--studio-700);
  --stationnement-vitre: var(--studio-950);
}

.stationnement-teinte-2 {
  --stationnement-carrosserie: var(--studio-500);
  --stationnement-vitre: var(--studio-800);
}

.stationnement-teinte-3 {
  --stationnement-carrosserie: var(--studio-800);
  --stationnement-vitre: color-mix(in oklab, var(--studio-500) 70%, var(--studio-800));
}

.stationnement-teinte-4 {
  --stationnement-carrosserie: var(--studio-300);
  --stationnement-vitre: var(--studio-700);
}

/* Ton auto : la couleur de la famille et, en plus, une enseigne « TOI » sur le toit (une forme, pas
   seulement une couleur). */
.stationnement-toi {
  --stationnement-carrosserie: var(--fam);
  --stationnement-vitre: var(--studio-950);
}

.stationnement-enseigne {
  fill: var(--studio-50);
  stroke: var(--studio-950);
  stroke-width: 3;
}

.stationnement-enseigne-texte {
  fill: var(--studio-950);
  font-family: var(--police-titre);
  font-stretch: var(--nom-jeu-largeur);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* Choisi (au toucher, pour le déplacer avec les flèches) : un anneau d'encre de la famille, détaché par
   un liseré blanc. Le focus du clavier reste l'anneau ambre, posé plus loin pour ne pas le cacher. */
.stationnement-choisi {
  z-index: 2;
  box-shadow:
    0 0 0 2px var(--studio-50),
    0 0 0 5px var(--fam-encre),
    0 6px 10px -6px rgb(var(--stationnement-ombre) / 0.6);
}

.stationnement-vehicule:focus-visible {
  z-index: 2;
  outline-offset: 6px;
}

/* Pendant qu'on le glisse, le véhicule suit le doigt (sans transition) et se soulève un peu. */
.stationnement-glisse {
  z-index: 3;
  transform: scale(1.04);
  box-shadow: 0 12px 18px -10px rgb(var(--stationnement-ombre) / 0.7);
  cursor: grabbing;
  transition:
    transform var(--d-appui) var(--ease-out),
    box-shadow var(--d-court) ease;
}

.stationnement-choisi.stationnement-glisse {
  box-shadow:
    0 0 0 2px var(--studio-50),
    0 0 0 5px var(--fam-encre),
    0 12px 18px -10px rgb(var(--stationnement-ombre) / 0.7);
}

/* Bloqué : une courte secousse le long de sa voie. */
.stationnement-refus {
  animation: stationnement-refus-x 220ms var(--ease-out);
}

.stationnement-debout.stationnement-refus {
  animation-name: stationnement-refus-y;
}

@keyframes stationnement-refus-x {
  25% {
    translate: -4px 0;
  }
  75% {
    translate: 4px 0;
  }
}

@keyframes stationnement-refus-y {
  25% {
    translate: 0 -4px;
  }
  75% {
    translate: 0 4px;
  }
}

/* Ton auto sort par la trouée : elle file vers la droite et le bord du terrain la cache. */
.stationnement-sort {
  z-index: 3;
  animation: stationnement-sortie 520ms cubic-bezier(0.55, 0, 0.75, 0.2) 120ms forwards;
}

@keyframes stationnement-sortie {
  to {
    transform: translateX(135%);
  }
}

@keyframes stationnement-fondu {
  to {
    opacity: 0;
  }
}

/* Les flèches du véhicule choisi, sous le terrain ; sinon, une ligne d'aide à la même hauteur
   (rien ne saute quand on choisit un véhicule). */
.stationnement-fleches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: 52px;
}

.stationnement-aide {
  grid-column: 1 / -1;
}

.stationnement-fleche svg {
  width: 26px;
  height: 26px;
}

.stationnement-fleche[data-direction="gauche"] svg {
  transform: rotate(180deg);
}

.stationnement-fleche[data-direction="haut"] svg {
  transform: rotate(-90deg);
}

.stationnement-fleche[data-direction="bas"] svg {
  transform: rotate(90deg);
}

.stationnement-fleche[aria-disabled="true"] {
  border-color: var(--surface-haute);
  color: var(--texte-3);
}

/* L'aperçu de la fiche : un petit stationnement, sans interaction. */
.stationnement-apercu {
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}

.stationnement-terrain.stationnement-mini {
  width: 188px;
  border-radius: 12px;
}

.stationnement-mini .stationnement-sol {
  border-radius: 4px;
}

.stationnement-mini .stationnement-vehicule {
  border-radius: 6px;
  box-shadow: 0 3px 5px -3px rgb(var(--stationnement-ombre) / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .stationnement-vehicule,
  .stationnement-glisse,
  .stationnement-sortie {
    transition: none;
  }

  .stationnement-glisse {
    transform: none;
  }

  .stationnement-refus,
  .stationnement-debout.stationnement-refus {
    animation: none;
  }

  /* Ton auto s'efface sur place au lieu de filer. */
  .stationnement-sort {
    animation: stationnement-fondu 200ms ease forwards;
  }
}