/* Photomaton de la salle de jeux (photomaton.js) : le compte à rebours et le flash pour qui est dans la cabine,
   puis le mur des souvenirs (la galerie des bandes, une bande en grand). Les bandes restent sur
   leur papier clair, même en thème sombre : ce sont des photos. */

/* La vidéo de sa propre caméra d'où l'on tire l'image au flash : hors de l'écran. */
.photo-capture {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

/* --- 3, 2, 1 --- */
.photo-countdown {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  pointer-events: none;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(31, 23, 53, 0.55),
    0 0 24px rgba(31, 23, 53, 0.45);
}
.photo-count {
  font-size: clamp(96px, 18vw, 168px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.photo-count:empty {
  display: none;
}
.photo-count.pop {
  animation: photo-pop 0.9s var(--ease-out) both;
}
.photo-count-sub {
  font-size: 18px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(31, 23, 53, 0.45);
  -webkit-backdrop-filter: var(--glass-blur, blur(8px));
  backdrop-filter: var(--glass-blur, blur(8px));
}
/* Sans l'effet verre (app.css) : plus sombre, la caméra ne s'efface plus derrière. */
:root[data-glass="off"] .photo-count-sub {
  background: rgba(31, 23, 53, 0.65);
}
.photo-count-sub:empty {
  display: none;
}
@keyframes photo-pop {
  0% {
    transform: scale(1.6);
    opacity: 0;
  }
  18% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(0.92);
    opacity: 0.2;
  }
}

/* --- Le flash : un voile blanc qui s'éteint vite (plus doux pour qui demande moins d'animations). --- */
.photo-flash {
  position: fixed;
  inset: 0;
  z-index: 36;
  background: #fff;
  pointer-events: none;
  animation: photo-flash 0.6s ease-out both;
}
.photo-flash.soft {
  animation-name: photo-flash-soft;
}
@keyframes photo-flash {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}
@keyframes photo-flash-soft {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

/* --- Le mur des souvenirs --- */
.modal.photo-wall-modal {
  width: min(880px, 100%);
}
.photo-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.photo-sub {
  color: var(--text-2);
  font-size: var(--fs-sub);
  font-weight: 400;
}
.photo-empty {
  margin: 8px 0 4px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px 10px;
  max-height: min(68vh, 760px);
  overflow-y: auto;
  padding: 4px 2px 8px;
}
.photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  padding: 10px 8px 8px;
  border-radius: var(--r-md);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.photo-card:hover,
.photo-card:focus-visible {
  background: var(--fill);
}
/* Épinglées un peu de travers, comme au mur. */
.photo-card canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 6px;
  box-shadow: 0 6px 16px -6px rgba(31, 23, 53, 0.45);
  transform: rotate(-1.2deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.photo-card:nth-child(2n) canvas {
  transform: rotate(1deg);
}
.photo-card:nth-child(3n) canvas {
  transform: rotate(-0.4deg);
}
.photo-card:hover canvas {
  transform: rotate(0) scale(1.03);
}
.photo-card-names {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.photo-card small {
  color: var(--text-2);
  font-size: var(--fs-caption);
}

/* --- Une bande en grand --- */
.photo-big {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
/* La bande entière à l'écran : sa hauteur tient dans la fenêtre, sa largeur suit. */
.photo-big-strip {
  flex: none;
}
.photo-big-strip canvas {
  display: block;
  height: min(70vh, 716px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 10px 28px -10px rgba(31, 23, 53, 0.5);
}
.photo-big-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.photo-big-side p {
  margin: 0;
}
.photo-big-names {
  font-size: 17px;
  font-weight: 700;
}
.photo-big-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}
.photo-big-actions .btn,
.photo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.photo-big-actions .btn svg,
.photo-back svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 640px) {
  .photo-big {
    flex-direction: column;
    align-items: center;
  }
}

/* --- L'écran de la cabine : les caméras de ceux qui sont dedans (ou leur avatar), le compte à
   rebours par-dessus, le flash. Sous les fenêtres (la bande qui sort s'ouvre devant lui). --- */
.photo-finder {
  position: fixed;
  inset: 0 0 8vh;
  margin: auto;
  z-index: 25;
  width: min(420px, calc(100vw - 32px));
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-lg);
  animation: pop-in var(--dur-base) var(--ease-out) backwards;
}
.photo-finder-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-sub);
  font-weight: 700;
}
.photo-finder-head svg {
  width: 16px;
  height: 16px;
}
.photo-finder-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #24203a;
}
.photo-finder-frame {
  position: absolute;
  inset: 0;
}
.photo-finder-cell {
  position: absolute;
  overflow: hidden;
  background: #d9cdee;
}
.photo-finder-cell video,
.photo-finder-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-finder-portrait {
  image-rendering: pixelated;
}
.photo-finder-cell video.mirror {
  transform: scaleX(-1);
}
/* Son petit avatar, collé en haut à droite comme sur la bande. */
.photo-finder-sticker {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 6px;
  image-rendering: pixelated;
}
.photo-finder-name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(31, 23, 53, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.photo-finder-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  font-size: clamp(72px, 16vw, 112px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 2px 0 rgba(31, 23, 53, 0.55),
    0 0 24px rgba(31, 23, 53, 0.5);
}
.photo-finder-count.pop {
  animation: photo-pop 0.9s var(--ease-out) both;
}
.photo-finder-screen.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  animation: photo-flash 0.6s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .photo-finder-screen.flash::after {
    animation-name: photo-flash-soft;
  }
}
.photo-finder-caption {
  text-align: center;
  font-weight: 700;
}
.photo-finder-caption:empty {
  display: none;
}
.photo-finder-shoot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.photo-finder-shoot svg {
  width: 18px;
  height: 18px;
}
.photo-finder-shoot kbd {
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.24);
  font: inherit;
  font-size: 12px;
}