/* Base viewer */
.dixit-viewer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  perspective: 1500px;
  position: relative;
}

/* Card */
.dixit-card {
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, top 0.6s ease, left 0.6s ease, width 0.6s ease, height 0.6s ease, opacity 0.4s ease;
  border-radius: 12px;
}

.dixit-card .card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.dixit-card .card-front,
.dixit-card .card-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.dixit-card .card-front { transform: rotateY(180deg); }

/* Grid focused: flip + center viewport */
.dixit-card.focus-center {
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-50%, -50%);
  z-index: 50 !important;
}
.dixit-card.focus-center .card-inner { transform: rotateY(180deg); }

/* Stack mode */
.dixit-viewer.stack {
  height: 220px;
  justify-content: center;
}

.dixit-viewer.stack .dixit-card {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  transition: transform 0.6s ease, width 0.6s ease, height 0.6s ease, opacity 0.4s ease;
}

.dixit-viewer.stack .dixit-card {
  transform: rotate(calc(var(--i, 0) * 8deg)) translateX(calc(var(--i, 0) * 36px));
  z-index: calc(10 + var(--i, 0));
}

/* Active stack card: zoom + center in viewport */
.dixit-viewer.stack .dixit-card.active {
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-50%, -50%);
  z-index: 60 !important;
}

/* Dim other stack cards */
.dixit-viewer.stack.dimmed .dixit-card:not(.active) {
  opacity: 0.7;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 767px) {
  .dixit-viewer.stack { height: 180px; }
}


/* v2.6 overrides (minimal, non-destructive)
   - Remove dimming in stack mode
   - Force FRONT side visible in stack mode
*/
.dixit-viewer.stack .dixit-card { opacity: 1 !important; }
.dixit-viewer.stack.dimmed .dixit-card:not(.active) { opacity: 1 !important; }

/* Make sure fronts face up in stack */
.dixit-viewer.stack .card-inner { transform: rotateY(0deg) !important; }
.dixit-viewer.stack .card-front { transform: rotateY(0deg) !important; backface-visibility: visible !important; }
.dixit-viewer.stack .card-back  { transform: rotateY(180deg) !important; backface-visibility: hidden !important; }