/* Maison en blocs (Dev gameplay). Toutes les classes commencent par .maison-
   (l'écran lui-même réutilise .jeu-ecran pour le ciel et l'herbe). */

.maison.jeu-ecran { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.maison-haut { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.maison-scene { flex: 1; display: grid; place-items: start center; overflow: auto; padding-bottom: 150px; }
.maison-grille {
  display: grid; user-select: none;
  background: rgb(255 255 255 / .25);
  border: 5px solid var(--jeu-texte); box-shadow: 6px 6px 0 rgb(0 0 0 / .3);
}
.maison-case { cursor: pointer; outline: 1px dashed rgb(255 255 255 / .4); outline-offset: -1px; }
.maison-case img { display: block; image-rendering: pixelated; pointer-events: none; }
.maison-case:hover:not(.pleine) { background: rgb(255 204 51 / .5); }

/* Le sac de blocs, en haut : le bas de l'écran est laissé au guide */
.maison-sac {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  padding: 10px; min-height: 84px;
  background: rgb(139 90 43 / .94); border: 5px solid var(--jeu-texte);
}
.maison-sac-bloc {
  position: relative; width: 62px; height: 62px; display: grid; place-items: center; cursor: pointer;
  background: #6b4420; border: 4px solid #3d2612; font-size: 28px;
}
.maison-sac-bloc img { image-rendering: pixelated; }
.maison-sac-bloc span { position: absolute; right: 3px; bottom: 0; color: #fff; font: 700 17px var(--police-jeu); text-shadow: 2px 2px 0 #000; }
.maison-sac-bloc.choisi { border-color: var(--jeu-accent); box-shadow: 0 0 0 3px var(--jeu-texte); }
.maison-sac-vide { color: #fff; font: 700 18px var(--police-jeu); margin: 8px; }