.comic-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.comic-book {
  position: relative;
  width: 100%;
  max-width: min(400px, 45vw);
  aspect-ratio: 8.5 / 11; 
  perspective: 1500px;
  display: flex;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
}

.page.turning {
  z-index: 1000 !important;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--page-img), 
                    radial-gradient(circle, #d35252 1.0px, transparent 1.0px), 
                    radial-gradient(circle, #d35252 1.0px, transparent 1.0px);
  background-size: contain, 5px 5px, 5px 5px;
  background-position: center, 0 0, 5px 5px;
  background-repeat: no-repeat, repeat, repeat;
  background-color: #f6eee3;
  border: 2px solid #000;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
}

.back {
  transform: rotateY(180deg);
}

.comic-sfx {
  position: absolute;
  z-index: 9999;
  width: 200px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(6px 6px 0px #000);
  animation: powAction 1.5s ease-out forwards;
}

@keyframes powAction {
  0% { transform: scale(0.5) rotate(-20deg); opacity: 1; }
  40% { transform: scale(1.1) rotate(10deg); opacity: 1; }
  70% { transform: scale(1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1.2) rotate(0deg); opacity: 0; }
}