/* styles-magic-game.css - Estilos Premium para El Truco de Magia Mental */

/* 3D Card Setup */
.card-container {
  perspective: 1000px;
  width: 45px;
  height: 68px;
  cursor: pointer;
  position: relative;
}

@media (min-width: 375px) {
  .card-container {
    width: 50px;
    height: 75px;
  }
}

@media (min-width: 480px) {
  .card-container {
    width: 65px;
    height: 97px;
  }
}

@media (min-width: 640px) {
  .card-container {
    width: 82px;
    height: 123px;
  }
}

@media (min-width: 768px) {
  .card-container {
    width: 100px;
    height: 150px;
  }
}

@media (min-width: 1024px) {
  .card-container {
    width: 112px;
    height: 168px;
  }
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

/* State: Face Down (Show Back) */
.card-container.face-down .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Front: Classic Elegant Playing Card */
.card-front {
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
  color: #171717;
  transform: rotateY(0deg);
  padding: 3px;
}

@media (min-width: 480px) {
  .card-front {
    padding: 6px;
  }
}

@media (min-width: 640px) {
  .card-front {
    padding: 10px;
  }
}

/* Card Back: Mysterious Cosmic / Mystic Theme */
.card-back {
  background: radial-gradient(circle at center, #1e113a 0%, #0a0418 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Card Back Design Details */
.card-back-pattern {
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(139, 92, 246, 0.4);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.card-back-pattern::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
  animation: pulse-glow 3s infinite ease-in-out;
}

.card-back-logo {
  font-size: 2rem;
  color: rgba(167, 139, 250, 0.8);
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.6));
  z-index: 2;
}

/* Card corner symbols */
.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
  font-weight: 800;
  font-size: 0.6rem;
}

.card-corner.top-left {
  align-self: flex-start;
}

.card-corner.bottom-right {
  align-self: flex-end;
  transform: rotate(180deg);
}

.card-center-suit {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

@media (min-width: 375px) {
  .card-corner {
    font-size: 0.65rem;
  }
}

@media (min-width: 480px) {
  .card-corner {
    font-size: 0.8rem;
  }
  .card-center-suit {
    font-size: 1.6rem;
  }
}

@media (min-width: 640px) {
  .card-corner {
    font-size: 1.15rem;
  }
  .card-center-suit {
    font-size: 2.6rem;
  }
}

/* Card Hover micro-interaction */
.card-container:not(.disabled) {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.card-container:not(.disabled):hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 20px 30px -10px rgba(139, 92, 246, 0.3);
}

/* Red Suits styling */
.text-red-suit {
  color: #e11d48; /* Crimson Rose */
}

/* Black Suits styling */
.text-black-suit {
  color: #1f2937; /* Very dark slate */
}

/* Custom Spinner for Stage 3 */
.mystery-spinner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 30%, #8b5cf6 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: spin 1.2s infinite linear;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Stage transition styles */
.stage-section {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stage-section.hidden-stage {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.stage-section.active-stage {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

/* Secret section styling */
.secret-explanation {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.secret-explanation.open {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}

/* Blinking Eye Styling */
.mystic-eye {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
  transition: filter 0.5s ease;
}

.mystic-eye .eyelid {
  transform-origin: 50px 30px; /* Center of SVG */
  animation: blink-anim 5s infinite ease-in-out;
}

.mystic-eye .iris {
  transform-origin: 50px 30px;
  transition: transform 0.5s ease;
}

/* Eye state during loading */
.mystic-eye.loading {
  filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.7));
}

.mystic-eye.loading .eyelid {
  animation: blink-anim-fast 1.8s infinite ease-in-out;
}

.mystic-eye.loading .iris {
  animation: iris-pulse 0.8s infinite alternate ease-in-out;
}

/* Animations */
@keyframes blink-anim {
  0%, 90%, 94%, 100% {
    transform: scaleY(1);
  }
  92%, 96% {
    transform: scaleY(0.05);
  }
}

@keyframes blink-anim-fast {
  0%, 70%, 74%, 100% {
    transform: scaleY(1);
  }
  72%, 76% {
    transform: scaleY(0.05);
  }
}

@keyframes iris-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}