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

/* Les casiers se tiennent au sol, en bas de l'écran, sous le pouce. */
.casiers-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  margin-top: auto;
}

/* La minuterie du coup d'œil (niveaux 11 à 15) */
.casiers-sablier {
  width: min(100%, 320px);
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pilule);
  background: var(--studio-800);
}

.casiers-sablier span {
  display: block;
  height: 100%;
  background: var(--fam);
  transform-origin: left;
}

/*
  Le banc de casiers : un meuble de métal, 5 colonnes au plus.
  Largeur : jamais plus que la colonne, au plus 88 px par casier, et assez basse pour tenir sous le HUD
  (casiers en 3:4, environ 300 px réservés au reste de l'écran), sans descendre sous 56 px par casier.
*/
.casiers-banc {
  --casiers-ecart: 6px;
  --casiers-marge: 10px;
  --casiers-cadre: calc((var(--casiers-c) - 1) * var(--casiers-ecart) + 2 * var(--casiers-marge));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--casiers-c), minmax(0, 1fr));
  gap: var(--casiers-ecart);
  width: min(
    100%,
    max(
      calc(var(--casiers-c) * 56px + var(--casiers-cadre)),
      min(
        calc(var(--casiers-c) * 88px + var(--casiers-cadre)),
        calc(
          (100dvh - 300px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - (var(--casiers-r) - 1) * var(--casiers-ecart) - 2 * var(--casiers-marge)) *
            0.75 / var(--casiers-r) * var(--casiers-c) + var(--casiers-cadre)
        )
      )
    )
  );
  padding: var(--casiers-marge);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--studio-800), var(--studio-850));
  box-shadow: var(--ombre-pupitre);
}

/* Un casier : un creux sombre, fermé par une porte de métal. */
.casiers-casier {
  --case: var(--studio-950);
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  background: var(--studio-950);
  transition: transform var(--d-appui) var(--ease-out);
}

.casiers-casier[data-etat="ferme"][aria-disabled="false"]:active {
  transform: scale(0.95);
}

.casiers-casier[aria-disabled="true"] {
  cursor: default;
}

/* L'intérieur : un creux sombre avec sa tablette du haut ; l'objet repose dessous (la coche ne le cache pas). */
.casiers-interieur {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 18%;
  background: var(--studio-950);
  box-shadow: inset 0 0 0 1px var(--studio-800), inset 0 8px 12px -8px rgb(0 0 0 / 0.9);
}

.casiers-interieur::before {
  content: "";
  position: absolute;
  top: 17%;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 1px;
  background: var(--studio-800);
}

.casiers-interieur svg {
  width: 72%;
  height: auto;
}

/* La porte : acier du studio, avec ses fentes d'aération et sa poignée. Elle pivote sur sa charnière, à gauche. */
.casiers-porte {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--studio-500), white 10%) 0%,
    var(--studio-500) 40%,
    color-mix(in oklab, var(--studio-500), var(--studio-700) 40%) 100%
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    inset 0 -3px 0 rgb(0 0 0 / 0.16),
    inset 3px 0 0 rgb(0 0 0 / 0.1);
  transform-origin: left center;
  transition: transform var(--d-court) var(--ease-out);
}

.casiers-porte::before {
  content: "";
  position: absolute;
  top: 9%;
  left: 24%;
  right: 24%;
  height: 16%;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--studio-800) 0 2px, transparent 2px 5px);
}

.casiers-porte::after {
  content: "";
  position: absolute;
  top: 46%;
  right: 13%;
  width: 7%;
  min-width: 4px;
  height: 16%;
  border-radius: 2px;
  background: var(--studio-800);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.45);
}

/* Ouvert : la porte se range contre sa charnière et montre l'objet. */
.casiers-casier[data-etat="ouvert"] .casiers-porte,
.casiers-casier[data-etat="trouve"] .casiers-porte {
  transform: scaleX(0.1);
}

/* Paire trouvée : un contour et une coche (la forme dit l'état, pas seulement la couleur). */
.casiers-casier[data-etat="trouve"] .casiers-interieur {
  box-shadow: inset 0 0 0 2px var(--fam), inset 0 8px 12px -8px rgb(0 0 0 / 0.9);
}

.casiers-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fam);
  color: var(--studio-950);
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.6);
  animation: casiers-coche 220ms var(--ease-out);
}

.casiers-badge svg {
  width: 14px;
  height: 14px;
}

@keyframes casiers-coche {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@media (hover: hover) and (pointer: fine) {
  .casiers-casier[data-etat="ferme"][aria-disabled="false"]:hover .casiers-porte {
    filter: brightness(1.08);
  }
}

/* Aperçu de la fiche : un petit banc de 3 × 2, une paire trouvée. */
.apercu.casiers-apercu {
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}

.casiers-banc.casiers-mini {
  width: 152px;
  padding: 6px;
  gap: 5px;
  border-radius: 8px;
}

.casiers-mini .casiers-casier {
  border-radius: 3px;
}

.casiers-mini .casiers-badge {
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  animation: none;
}

.casiers-mini .casiers-badge svg {
  width: 10px;
  height: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .casiers-casier,
  .casiers-porte {
    transition: none;
  }

  .casiers-badge {
    animation: none;
  }
}