/* ===== Reading Page: Card Effects & 3D Ring ===== */

:root {
  /* Card Back Variables (Light) */
  --card-bg-reading: #C7B3FF;
  --card-border-reading: 1px solid #9F86FF;
  --card-shadow-inner: inset 0 0 16px rgba(255, 255, 255, 0.4);
  --card-shadow-outer: 0 4px 12px rgba(255, 255, 255, 0.5);
  --card-glow: 0 0 12px rgba(255, 255, 255, 0.6), 0 4px 12px rgba(255, 255, 255, 0.4);
  --card-glow-hover: 0 0 24px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.5);
  --card-glow-selected: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 0.7);
  --card-num-color: #9F86FF;
  --card-num-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  --card-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 476'%3E%3Cline x1='140' y1='15' x2='140' y2='461' stroke='%23FFFFFF' stroke-width='1.5' opacity='0.5'/%3E%3Cpolygon points='140,5 144,9 140,13 136,9' stroke='%23FFFFFF' fill='none' stroke-width='1.5' opacity='0.8'/%3E%3Ccircle cx='140' cy='20' r='2' fill='%23FFFFFF' opacity='0.8'/%3E%3Cpath d='M 122 36 Q 140 58 158 36 Q 140 46 122 36 Z' fill='none' stroke='%23FFFFFF' stroke-width='1.5' opacity='0.8'/%3E%3Ccircle cx='140' cy='85' r='45' stroke='%23FFFFFF' stroke-width='1.5' fill='none' opacity='0.8'/%3E%3Cg stroke='%23FFFFFF' stroke-width='1' fill='none' opacity='0.4'%3E%3Cpolygon points='140,50 165,59 175,85 165,111 140,120 115,111 105,85 115,59'/%3E%3Cpolygon points='140,65 154,73 158,85 154,97 140,105 126,97 122,85 126,73' transform='rotate(22.5 140 85)'/%3E%3Ccircle cx='140' cy='85' r='15'/%3E%3Cline x1='140' y1='50' x2='140' y2='65'/%3E%3Cline x1='140' y1='120' x2='140' y2='105'/%3E%3Cline x1='105' y1='85' x2='122' y2='85'/%3E%3Cline x1='175' y1='85' x2='158' y2='85'/%3E%3C/g%3E%3Ccircle cx='140' cy='238' r='90' stroke='%23FFFFFF' stroke-width='1.5' fill='none' opacity='0.8'/%3E%3Cpolygon points='140,85 260,238 140,391 20,238' stroke='%23FFFFFF' stroke-width='1.5' fill='none' opacity='0.8'/%3E%3Cg stroke='%23FFFFFF' stroke-width='1' fill='none' opacity='0.5'%3E%3Cpolyline points='140,128 155,238 140,348 125,238 140,128'/%3E%3Cpolyline points='30,238 140,223 250,238 140,253 30,238'/%3E%3Cpolygon points='140,198 180,238 140,278 100,238'/%3E%3Cpolygon points='140,213 165,238 140,263 115,238'/%3E%3Ccircle cx='140' cy='238' r='25'/%3E%3Ccircle cx='140' cy='238' r='10'/%3E%3Cline x1='140' y1='128' x2='140' y2='198'/%3E%3Cline x1='140' y1='348' x2='140' y2='278'/%3E%3Cline x1='30' y1='238' x2='100' y2='238'/%3E%3Cline x1='250' y1='238' x2='180' y2='238'/%3E%3Cline x1='112' y1='210' x2='168' y2='266'/%3E%3Cline x1='112' y1='266' x2='168' y2='210'/%3E%3C/g%3E%3Ccircle cx='140' cy='391' r='45' stroke='%23FFFFFF' stroke-width='1.5' fill='none' opacity='0.8'/%3E%3Cg stroke='%23FFFFFF' stroke-width='1' fill='none' opacity='0.4'%3E%3Cpolygon points='140,355 165,364 175,391 165,417 140,426 115,417 105,391 115,364'/%3E%3Cpolygon points='140,370 154,378 158,391 154,403 140,411 126,403 122,391 126,378' transform='rotate(22.5 140 391)'/%3E%3Ccircle cx='140' cy='391' r='15'/%3E%3Cline x1='140' y1='355' x2='140' y2='370'/%3E%3Cline x1='140' y1='426' x2='140' y2='411'/%3E%3Cline x1='105' y1='391' x2='122' y2='391'/%3E%3Cline x1='175' y1='391' x2='158' y2='391'/%3E%3C/g%3E%3Cpath d='M 122 440 Q 140 418 158 440 Q 140 430 122 440 Z' fill='none' stroke='%23FFFFFF' stroke-width='1.5' opacity='0.8'/%3E%3Ccircle cx='140' cy='456' r='2' fill='%23FFFFFF' opacity='0.8'/%3E%3Cpolygon points='140,463 144,467 140,471 136,467' stroke='%23FFFFFF' fill='none' stroke-width='1.5' opacity='0.8'/%3E%3C/svg%3E");
}

.dark {
  /* Card Back Variables (Dark) */
  --card-bg-reading: #141321;
  --card-border-reading: 1px solid rgba(212, 175, 55, 0.4);
  --card-shadow-inner: inset 0 0 24px rgba(0, 0, 0, 0.9);
  --card-shadow-outer: 0 0 10px rgba(212, 175, 55, 0.3), 0 6px 16px rgba(0, 0, 0, 0.5);
  --card-glow: 0 0 10px rgba(212, 175, 55, 0.3), 0 6px 16px rgba(0, 0, 0, 0.5);
  --card-glow-hover: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.4);
  --card-glow-selected: 0 0 30px rgba(212, 175, 55, 1), 0 0 60px rgba(212, 175, 55, 0.6);
  --card-num-color: #D4AF37;
  --card-num-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  --card-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 476'%3E%3Cline x1='140' y1='15' x2='140' y2='461' stroke='%23c8c8cc' stroke-width='1.5' opacity='0.4'/%3E%3Cpolygon points='140,5 144,9 140,13 136,9' stroke='%23c5a059' fill='none' stroke-width='1.5'/%3E%3Ccircle cx='140' cy='20' r='2' fill='%23c5a059'/%3E%3Cpath d='M 122 36 Q 140 58 158 36 Q 140 46 122 36 Z' fill='none' stroke='%23c5a059' stroke-width='1.5'/%3E%3Ccircle cx='140' cy='85' r='45' stroke='%23a27457' stroke-width='1.5' fill='none'/%3E%3Cg stroke='%23c8c8cc' stroke-width='1' fill='none' opacity='0.6'%3E%3Cpolygon points='140,50 165,59 175,85 165,111 140,120 115,111 105,85 115,59'/%3E%3Cpolygon points='140,65 154,73 158,85 154,97 140,105 126,97 122,85 126,73' transform='rotate(22.5 140 85)'/%3E%3Ccircle cx='140' cy='85' r='15'/%3E%3Cline x1='140' y1='50' x2='140' y2='65'/%3E%3Cline x1='140' y1='120' x2='140' y2='105'/%3E%3Cline x1='105' y1='85' x2='122' y2='85'/%3E%3Cline x1='175' y1='85' x2='158' y2='85'/%3E%3C/g%3E%3Ccircle cx='140' cy='238' r='90' stroke='%23a27457' stroke-width='1.5' fill='none'/%3E%3Cpolygon points='140,85 260,238 140,391 20,238' stroke='%23c5a059' stroke-width='1.5' fill='none'/%3E%3Cg stroke='%23c8c8cc' stroke-width='1' fill='none' opacity='0.7'%3E%3Cpolyline points='140,128 155,238 140,348 125,238 140,128'/%3E%3Cpolyline points='30,238 140,223 250,238 140,253 30,238'/%3E%3Cpolygon points='140,198 180,238 140,278 100,238'/%3E%3Cpolygon points='140,213 165,238 140,263 115,238'/%3E%3Ccircle cx='140' cy='238' r='25'/%3E%3Ccircle cx='140' cy='238' r='10'/%3E%3Cline x1='140' y1='128' x2='140' y2='198'/%3E%3Cline x1='140' y1='348' x2='140' y2='278'/%3E%3Cline x1='30' y1='238' x2='100' y2='238'/%3E%3Cline x1='250' y1='238' x2='180' y2='238'/%3E%3Cline x1='112' y1='210' x2='168' y2='266'/%3E%3Cline x1='112' y1='266' x2='168' y2='210'/%3E%3C/g%3E%3Ccircle cx='140' cy='391' r='45' stroke='%23a27457' stroke-width='1.5' fill='none'/%3E%3Cg stroke='%23c8c8cc' stroke-width='1' fill='none' opacity='0.6'%3E%3Cpolygon points='140,355 165,364 175,391 165,417 140,426 115,417 105,391 115,364'/%3E%3Cpolygon points='140,370 154,378 158,391 154,403 140,411 126,403 122,391 126,378' transform='rotate(22.5 140 391)'/%3E%3Ccircle cx='140' cy='391' r='15'/%3E%3Cline x1='140' y1='355' x2='140' y2='370'/%3E%3Cline x1='140' y1='426' x2='140' y2='411'/%3E%3Cline x1='105' y1='391' x2='122' y2='391'/%3E%3Cline x1='175' y1='391' x2='158' y2='391'/%3E%3C/g%3E%3Cpath d='M 122 440 Q 140 418 158 440 Q 140 430 122 440 Z' fill='none' stroke='%23c5a059' stroke-width='1.5'/%3E%3Ccircle cx='140' cy='456' r='2' fill='%23c5a059'/%3E%3Cpolygon points='140,463 144,467 140,471 136,467' stroke='%23c5a059' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ===== Steps Bar ===== */
.step-dot.active {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  color: #fff;
}
.dark .step-dot.active { color: #07060A; }
.step-dot.done {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.step-line.done { background: var(--color-primary); }

/* ===== Panels ===== */
.panel { display: none; animation: panelIn 0.4s ease; }
.panel.active { display: block; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Mode Card Gradient ===== */
.mode-card {
  position: relative; overflow: hidden;
}
.mode-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(199, 179, 255, 0.15), transparent 70%);
  transition: opacity 0.3s;
}
.mode-card:hover::before { opacity: 1; }
.mode-card.selected {
  border-color: var(--color-primary-deep);
  background: rgba(199, 179, 255, 0.1);
}

/* ===== Category & Spread Cards ===== */
.cat-card.selected {
  border-color: var(--color-primary-deep);
  background: rgba(199, 179, 255, 0.12);
}
.spread-card.selected {
  border-color: var(--color-primary-deep);
  background: rgba(199, 179, 255, 0.12);
}
.spread-card .spread-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--color-primary-deep); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 9999px; font-weight: 600;
}
.dark .spread-card .spread-badge { color: #07060A; }

/* ===== Preset Questions ===== */
.preset-q-btn {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--color-stroke);
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px; color: var(--color-text);
  background: var(--color-surface);
  transition: all 0.2s;
}
.preset-q-btn:hover {
  border-color: var(--color-primary-deep);
  background: rgba(199, 179, 255, 0.08);
}
.preset-q-btn.selected {
  border-color: var(--color-primary-deep);
  background: rgba(199, 179, 255, 0.15);
  font-weight: 600;
}

/* ===== Question Input ===== */
.send-btn {
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.send-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(159, 134, 255, 0.4);
}

/* ===== Shuffle Deck ===== */
.shuffle-deck {
  perspective: 800px;
}
.shuffle-deck .deck-card {
  position: absolute; width: 100%; height: 100%;
  border-radius: 10px; backface-visibility: hidden;
  background-color: var(--card-bg-reading);
  background-image: var(--card-svg);
  background-size: cover;
  background-position: center;
  border: var(--card-border-reading);
  box-shadow: var(--card-shadow-inner), var(--card-shadow-outer);
  transition: transform 0.3s, box-shadow 0.3s;
}
.shuffle-deck .deck-card:nth-child(1) { transform: rotate(-2deg) translateY(0); }
.shuffle-deck .deck-card:nth-child(2) { transform: rotate(1deg) translate(3px, -3px); }
.shuffle-deck .deck-card:nth-child(3) { transform: rotate(-1deg) translate(-2px, -6px); }

/* Shuffling animation */
@keyframes shuffleLeft {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-80px) rotate(-12deg); }
  50% { transform: translateX(0) rotate(0); }
  75% { transform: translateX(80px) rotate(12deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes shuffleRight {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(80px) rotate(12deg); }
  50% { transform: translateX(0) rotate(0); }
  75% { transform: translateX(-80px) rotate(-12deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes shuffleMid {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-30px) rotate(6deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-30px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0); }
}
.shuffling .deck-card:nth-child(1) { animation: shuffleLeft 0.6s ease-in-out infinite; }
.shuffling .deck-card:nth-child(2) { animation: shuffleMid 0.6s ease-in-out infinite 0.1s; }
.shuffling .deck-card:nth-child(3) { animation: shuffleRight 0.6s ease-in-out infinite 0.2s; }

/* ===== Shuffle Button ===== */
.shuffle-btn {
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
  box-shadow: 0 12px 32px rgba(159, 134, 255, 0.3);
  transition: all 0.25s;
}
.dark .shuffle-btn {
  color: #07060A;
  background: linear-gradient(135deg, #B8A1FF, #EBCB7A 55%, #78E6FF 140%);
}
.shuffle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(159, 134, 255, 0.4);
}
.shuffle-btn:active { transform: translateY(1px); }

/* ===== 3D Fate Ring ===== */
.fate-ring-wrapper {
  width: 100%; height: 500px; position: relative; margin: 10px 0 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 15%, black 35%, black 65%, transparent 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 15%, black 35%, black 65%, transparent 85%, transparent 100%);
}
.fate-ring-container {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  perspective: 1200px; perspective-origin: 50% 20%;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.fate-ring-container:active { cursor: grabbing; }
.fate-ring {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
}

/* Ring cards (size set by CSS variables) */
:root {
  --card-w: 140px;
  --card-h: 238px;
}
.ring-card {
  position: absolute;
  width: var(--card-w); height: var(--card-h);
  left: calc(var(--card-w) / -2); top: calc(var(--card-h) / -2);
  transform-style: preserve-3d;
  transition: opacity 0.5s ease, transform 0.3s ease;
  user-select: none;
  cursor: pointer;
}
.ring-card.drawn {
  opacity: 0; pointer-events: none;
  transform: scale(0.5) translateY(-100px) !important;
}
.ring-card:hover .ring-card-inner {
  box-shadow: var(--card-glow-hover);
}
.ring-card.selected .ring-card-inner {
  transform: translateZ(60px) scale(1.1);
  box-shadow: var(--card-glow-selected);
}
.ring-card-num {
  position: absolute; top: -32px; width: 100%; text-align: center;
  color: var(--card-num-color); font-size: 16px; font-weight: bold;
  text-shadow: var(--card-num-shadow); backface-visibility: hidden;
}
.ring-card-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  border-radius: 10px; box-shadow: var(--card-glow);
  border: var(--card-border-reading);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.ring-card-back, .ring-card-front {
  position: absolute; width: 100%; height: 100%; border-radius: 10px;
  backface-visibility: hidden;
}
.ring-card-back {
  background-color: var(--card-bg-reading);
  background-image: var(--card-svg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--card-shadow-inner);
}
.ring-card-front {
  transform: rotateY(180deg); display: none;
}

/* ===== Draw Slots (Spread Layout) ===== */
.spread-layout {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin-bottom: 24px; perspective: 1000px;
}
.draw-slot {
  width: var(--card-w); text-align: center;
}
.draw-slot .slot-frame {
  width: var(--card-w); height: var(--card-h); border-radius: 12px;
  border: 2px dashed var(--color-stroke);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; margin-bottom: 8px;
  position: relative; transition: all 0.3s; overflow: hidden;
  background: rgba(199, 179, 255, 0.04);
}
.draw-slot:hover .slot-frame {
  border-color: var(--color-primary);
  background: rgba(199, 179, 255, 0.08);
  transform: translateY(-4px);
}
.draw-slot .slot-frame .slot-num {
  font-size: 18px; font-weight: 700; color: var(--color-subtle);
}
.draw-slot .slot-frame .slot-icon {
  font-size: 32px; margin-top: 6px; opacity: 0.4;
}
.draw-slot .slot-label {
  font-size: 12px; color: var(--color-muted); line-height: 1.4;
}

/* Filled card state */
.draw-slot.filled .slot-frame {
  border: 2px solid var(--color-primary-deep);
  background: linear-gradient(145deg, #2D1B69, #1a0f3e);
  box-shadow: 0 8px 28px rgba(159, 134, 255, 0.25);
  overflow: hidden;
}
.draw-slot.filled .slot-frame .slot-num { display: none; }
.draw-slot.filled .slot-frame .slot-icon { display: none; }
.draw-slot.filled .slot-frame .card-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0; color: #E8DFFF; position: relative;
}
.card-face { display: none; }
.card-face .card-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.95; z-index: 1; border-radius: 10px;
}
.card-face .card-content-fallback {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; width: 100%; height: 100%;
}
.card-face .card-emoji { font-size: 36px; margin-bottom: 4px; }
.card-face .card-title {
  font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3;
}
.card-face .card-dir {
  font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px; border-radius: 4px;
  position: absolute; bottom: 6px; z-index: 3; color: #fff;
}

/* Flip animation */
@keyframes flipIn {
  0% { transform: rotateY(180deg) scale(0.8); opacity: 0; }
  60% { transform: rotateY(-10deg) scale(1.05); opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.draw-slot.filling .slot-frame { animation: flipIn 0.6s ease forwards; }

/* Next draw slot glow */
.draw-slot.next-draw .slot-frame {
  border-color: var(--color-primary-deep);
  box-shadow: 0 0 20px rgba(159, 134, 255, 0.3);
  animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(159, 134, 255, 0.2); }
  50% { box-shadow: 0 0 30px rgba(159, 134, 255, 0.45); }
}

/* ===== Result Preview Mini Cards ===== */
.mini-card {
  width: 60px; height: 96px; border-radius: 8px;
  background: linear-gradient(145deg, #2D1B69, #1a0f3e);
  border: 1px solid rgba(199, 179, 255, 0.3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #E8DFFF; padding: 0;
  overflow: hidden; position: relative;
}
.mini-card .mc-name {
  font-size: 10px; font-weight: 600; text-align: center;
  margin-top: 2px; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ===== AI Reading Box ===== */
.ai-reading-box {
  line-height: 1.8; font-size: 15px;
  white-space: pre-wrap; min-height: 120px;
}
.ai-reading-box .typing-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--color-primary-deep);
  animation: blink 0.8s infinite; vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ===== Action Buttons ===== */
.action-btn.primary {
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
  box-shadow: 0 8px 24px rgba(159, 134, 255, 0.25);
}
.dark .action-btn.primary {
  color: #07060A;
  background: linear-gradient(135deg, #B8A1FF, #EBCB7A);
}
.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(159, 134, 255, 0.35);
}

/* ===== Loading Dots ===== */
.loading-dots span {
  animation: dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ===== Dark Theme Overrides for Card Elements ===== */
.dark .draw-slot .slot-frame,
.dark .deck-card,
.dark .ring-card-inner {
  border-color: rgba(241, 202, 108, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(241, 202, 108, 0.1);
}
.dark .draw-slot.filled .slot-frame,
.dark .deck-card:hover,
.dark .ring-card:hover .ring-card-inner {
  border-color: #F1CA6C;
  box-shadow: 0 0 15px rgba(241, 202, 108, 0.4), inset 0 0 15px rgba(241, 202, 108, 0.2);
}
.dark .draw-slot .slot-num {
  color: #F1CA6C;
  text-shadow: 0 0 8px rgba(241, 202, 108, 0.5);
}

/* ===== Responsive Card Size ===== */
@media (max-width: 600px) {
  :root {
    --card-w: 90px;
    --card-h: 144px;
  }
}