/* Tarot App Specific Styles - Integrating cartoon_demo animations */

#tarot-app-container {
  /* Ensure a positioning context if direct children need absolute positioning based on it */
  position: relative; 
}

/* CSS Variables from cartoon_demo, scoped */
#tarot-app-container {
  --card-width: 100px; /* Adjusted from 120px to better fit general UI */
  --card-height: 160px; /* Adjusted from 200px */
  --card-border-radius: 10px; /* Adjusted from 12px */
  /* Card back background will be set via background-image on the element directly */
}

/* New animation containers - basic styling, can be refined */
#tarot-app-container #new-deck-animation-area {
  display: flex;
  justify-content: center;
  align-items: center;
  /* perspective: 1000px; /* Might be needed for 3D effects on cards inside */
}

#tarot-app-container #new-fan-selection-area {
  /* overflow-x-auto is set inline, ensure it works with child absolute positioning */
  /* Child elements (.animated-tarot-card.fan) will be positioned absolutely by JS */
  /* Adding some padding at the bottom to make space for potential scrollbar without overlap */
  padding-bottom: 15px; 
}

/* Card styles from cartoon_demo, renamed and scoped */
#tarot-app-container .animated-tarot-card {
  position: absolute;
  width: var(--card-width);
  height: var(--card-height);
  perspective: 1000px;
  cursor: pointer;
  will-change: transform;
  /* transition: transform 0.5s ease-out; /* GSAP will handle transitions */
}

#tarot-app-container .animated-tarot-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s; /* For flip animation */
}

#tarot-app-container .animated-tarot-card .card-front,
#tarot-app-container .animated-tarot-card .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--card-border-radius);
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#tarot-app-container .animated-tarot-card .card-front {
  /* Style for the front of the card (showing image, name) */
  background-color: #2c2a3e; /* Darker card face */
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  overflow: hidden; /* Prevent content spill */
}

#tarot-app-container .animated-tarot-card .card-front img {
  max-width: 90%;
  max-height: 70%;
  border-radius: calc(var(--card-border-radius) - 4px);
  object-fit: contain;
}

#tarot-app-container .animated-tarot-card .card-front .card-name {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.8);
  margin-top: 5px;
  text-align: center;
}


#tarot-app-container .animated-tarot-card .card-back {
  /* Card back will use background-image set by JS or specific CSS */
  /* Fallback solid color if image fails, or base for image */
  background-color: #1e1c2f; 
  /* Using project's card_back.svg */
  background-image: url('tarot/images/card-back.svg'); 
}

/* Fan styles from cartoon_demo, scoped */
#tarot-app-container .animated-tarot-card.fan {
  position: absolute; /* Already set on .animated-tarot-card but explicit for fan */
  transform-origin: bottom center;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover */
  will-change: transform, z-index;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 移除悬停的自动变换，现在由JS控制
#tarot-app-container .animated-tarot-card.fan:hover {
  transform: translateY(-20px) scale(1.08) !important; 
  z-index: 1000 !important; 
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
*/

#tarot-app-container .animated-tarot-card.fan.selected-for-reading {
  /* Special style for cards that have been picked and are awaiting reading display */
  /* This is different from cartoon_demo's .selected which was for floating animation */
  box-shadow: 0 0 15px 3px rgba(58, 134, 255, 0.7);
  border: 1px solid rgba(58, 134, 255, 0.7);
  /* Optional: slightly different transform or scale if needed */
}

/* Animations from cartoon_demo */
@keyframes tarotAppShuffle {
  0% { transform: translateX(0) translateY(0) rotate(0); }
  25% { transform: translateX(20px) translateY(-10px) rotate(5deg); }
  50% { transform: translateX(-15px) translateY(10px) rotate(-8deg); }
  75% { transform: translateX(10px) translateY(-5px) rotate(3deg); }
  100% { transform: translateX(0) translateY(0) rotate(0); }
}

@keyframes tarotAppFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* If needed for individual card shuffle visual from cartoon_demo style */
#tarot-app-container .shuffle-animation-class {
  animation: tarotAppShuffle 0.5s ease-in-out;
}

/* Styles for the selected cards display area if we use cartoon_demo's #selected-cards like layout */
#tarot-app-container #final-selected-cards-display-area {
    display: flex; /* Or grid */
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
}

#tarot-app-container #final-selected-cards-display-area .displayed-card-item {
    /* Styles for each card shown in the final reading area */
    /* This will be similar to .animated-tarot-card but static and with text */
    width: var(--card-width);
    /* min-height calculated based on content */
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--card-border-radius);
    padding: 10px;
    text-align: center;
}

#tarot-app-container #final-selected-cards-display-area .displayed-card-item img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 120px; /* Limit image height */
    border-radius: calc(var(--card-border-radius) - 6px);
    margin-bottom: 8px;
}

#tarot-app-container #final-selected-cards-display-area .displayed-card-item .card-name-final {
    font-size: 0.8rem;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
}

#tarot-app-container #final-selected-cards-display-area .displayed-card-item .card-position-final {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

#tarot-app-container #final-selected-cards-display-area .displayed-card-item .card-reversed-indicator-final {
    font-size: 0.65rem;
    color: #ffc107; /* Amber color for reversed indicator */
    margin-top: 4px;
}

/* Styles for the new Spread Selection Modal (inspired by cartoon_demo) */
/* MODAL STYLES REMOVED as it's now inline */

/* Updated styles for inline spread selection area */
#tarot-app-container #spread-selection-area-main {
  /* Container for the title and the options */
  padding-bottom: 2rem; /* Add some space before shuffle area */
}

#tarot-app-container #spread-options-display-area {
  display: flex; /* Changed from grid to flex */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center; /* Center the buttons */
  gap: 1rem; /* Gap between buttons */
  margin-bottom: 1.5rem; /* Keep margin from original grid */
  padding: 0 1rem; /* Add some horizontal padding for the container */
}

#tarot-app-container .spread-option-button {
  background-color: rgba(42, 40, 60, 0.7); /* Darker, more solid buttons like cartoon_demo */
  border: 2px solid rgba(100, 100, 120, 0.5);
  border-radius: 8px;
  padding: 0.8rem 1.2rem; /* Adjust padding */
  text-align: center; /* Center text for horizontal buttons */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
  color: rgba(255, 255, 255, 0.7);
  min-width: 150px; /* Minimum width for each button */
  flex-grow: 0; /* Don't allow buttons to grow excessively */
}

#tarot-app-container .spread-option-button:hover {
  background-color: rgba(50, 48, 70, 0.9);
  border-color: rgba(129, 140, 248, 0.7); /* Indigo accent for hover */
  transform: translateY(-2px);
}

#tarot-app-container .spread-option-button.selected {
  background-color: rgba(79, 70, 229, 0.8); /* Indigo accent solid for selected */
  border-color: rgba(129, 140, 248, 1);
  color: #fff;
  box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
  transform: translateY(-2px) scale(1.02);
}

#tarot-app-container .spread-option-button h3 {
  font-size: 1rem; /* Adjust title size */
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: inherit;
}

#tarot-app-container .spread-option-button p {
  font-size: 0.75rem; /* Smaller description */
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0rem; /* Remove bottom margin if info is not present or very short */
}

#tarot-app-container .spread-option-button .spread-info {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.3rem;
}

/* REMOVE STYLES for #confirm-spread-selection-btn and .close-modal-btn as they are no longer used */

/* Ensure modal close button styling remains consistent or is updated if needed */
#tarot-app-container #spread-selection-modal .close-modal-btn {
    /* Styles for close button if any specific are needed, inherits otherwise */
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5rem;
    cursor: pointer;
}
#tarot-app-container #spread-selection-modal .close-modal-btn:hover {
    color: #fff;
}