/* Fenêtres : le plateau du jeu. Chaque état se lit par la forme autant que par la couleur. */

.zone-fenetres {
  justify-content: center;
}

.immeuble {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--c), 1fr);
  gap: var(--e-2);
  width: min(100%, calc(var(--c) * 100px), calc((100dvh - 300px) * 0.75 * var(--c) / var(--r, 3)));
  padding: var(--e-4);
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, var(--studio-800), var(--studio-850));
  box-shadow: var(--ombre-pupitre);
}

.immeuble::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: -6px;
  height: 10px;
  border-radius: 6px;
  background: var(--studio-700);
}

.fenetre {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--studio-950);
  box-shadow: inset 0 0 0 2px var(--studio-700);
  color: var(--studio-950);
  transition: background-color 120ms ease, box-shadow 120ms ease, transform var(--d-appui) var(--ease-out);
}

.fenetre:not(:disabled):active {
  transform: scale(0.95);
}

.fenetre.allumee,
.fenetre.juste {
  background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--fam) 45%, white) 0%, var(--fam) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--fam) 60%, white);
}

.fenetre.faux {
  background: var(--erreur);
  color: var(--studio-50);
  box-shadow: inset 0 0 0 2px #ff8a86;
}

.fenetre.attendue {
  background: color-mix(in oklab, var(--fam) 32%, var(--studio-950));
  box-shadow: inset 0 0 0 3px var(--fam);
}

.fenetre svg {
  width: 55%;
  height: auto;
}

.immeuble.mini {
  --c: 3;
  width: 168px;
  padding: 10px;
  gap: 6px;
}

.immeuble.mini .fenetre {
  font-family: var(--police-titre);
  font-stretch: var(--chiffres-largeur);
  font-weight: var(--chiffres-graisse);
  font-size: 1rem;
}