/**
 * Face Picker Modal Styles
 * 
 * Modal for selecting die face when using Plot Twist
 */

/**
 * Face Picker Modal Styles
 * Generic reusable die picker (styled to match Stretchy's picker)
 * Uses generic-* prefix to avoid conflicts with Stretchy's inline modal
 */

.generic-face-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.generic-face-picker-tray {
  display: flex;
  gap: 12px;
  padding: 20px;
  background: #1c1c1c;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  animation: genericFacePickerSlideIn 0.3s ease-out;
}

@keyframes genericFacePickerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Face picker dice inherit all the .die styling */
.generic-face-picker-die {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  background: radial-gradient(circle at 24% 26%, rgba(0, 0, 0, 0.05) 0 10%, transparent 11%) 0 0/12px 12px,
    linear-gradient(135deg, #ffffff 0%, #f8f8f8 50%, #eeeeee 100%);
  color: #000;
  border: 3px solid #000;
  border-radius: 0;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.68, -.55, .265, 1.55), box-shadow .28s, filter .28s;
  position: relative;
  box-shadow: 3px 3px 0px #000, 4px 4px 12px rgba(0, 0, 0, 0.4);
  transform: perspective(400px) rotateX(5deg) rotateY(-2deg) rotateZ(0deg);
  background-size: 8px 8px, 100% 100%;
}

.generic-face-picker-die:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 6px;
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.generic-face-picker-die:hover {
  transform: perspective(300px) rotateX(20deg) rotateY(-20deg) translateY(-6px) scale(1.15);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

/* Mobile optimizations */
@media (max-width: 1024px) {
  .generic-face-picker-tray {
    gap: 10px;
    padding: 16px;
    flex-wrap: wrap;
    max-width: 90vw;
  }
  
  .generic-face-picker-die {
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .generic-face-picker-tray {
    gap: 8px;
    padding: 12px;
  }
  
  .generic-face-picker-die {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
}