/* 極簡MVP專用CSS - 復用現有的精美設計 */

/* 高級3D翻卡動畫 (來自原FlipMemoryTest設計) */
.flip-card-container {
  perspective: 1000px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

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

.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 信心度按鈕 (復用ConfidenceButtons設計) */
.confidence-button {
  transition: all 0.2s ease-in-out;
  border: 2px solid;
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-weight: 500;
}

.confidence-button:hover:not(:disabled) {
  transform: scale(1.02);
}

.confidence-button.selected {
  transform: scale(1.05);
  ring: 2px;
  ring-color: rgba(59, 130, 246, 0.75);
  ring-offset: 2px;
}

.confidence-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 進度條平滑動畫 */
.progress-bar {
  transition: width 0.3s ease-in-out;
}

/* 響應式設計 (復用原有邏輯) */
@media (max-width: 480px) {
  .flip-card-container {
    min-height: 300px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .flip-card-container {
    min-height: 350px;
  }
}

@media (min-width: 769px) {
  .flip-card-container {
    min-height: 400px;
  }
}

/* 內容區塊樣式 (復用原有設計) */
.content-block {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.content-block h3 {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
  text-align: left;
}

.content-block p {
  color: #374151;
  text-align: left;
}