/* The Chosen One — Card Shuffle, Dice 3D, winner modal */

/* ── Card Shuffle ─────────────────────────────────────────── */
.tco-card-stage { perspective: 1200px; min-height: 360px; padding-top: 30px; }
.tco-card-magic-circle {
  position: absolute; left: 50%; top: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 107, 74, 0.25);
  background: radial-gradient(circle, rgba(255,107,74,0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: tco-rune-spin 30s linear infinite;
}
.tco-card-magic-circle::before, .tco-card-magic-circle::after {
  content: ''; position: absolute; inset: 24px; border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.18);
}
.tco-card-magic-circle::after { inset: 64px; border-color: rgba(56, 189, 248, 0.15); }
@keyframes tco-rune-spin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.tco-card-fan { position: relative; width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; }
.tco-card {
  position: absolute;
  width: 100px; height: 150px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --c: #888;
}
.tco-card:disabled { cursor: default; }
.tco-card:hover:not(:disabled):not(.is-flipped) { transform: translateY(-12px) !important; }
.tco-card-back, .tco-card-front {
  position: absolute; inset: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-weight: 700;
}
.tco-card-back {
  background: linear-gradient(135deg, #1a2640 0%, #0f1a2e 100%);
  border: 2px solid var(--c);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.04);
  color: var(--c);
}
.tco-card-sigil { font-size: 2.4rem; opacity: 0.85; }
.tco-card-front {
  background: var(--c); transform: rotateY(180deg);
  font-size: 0.92rem; padding: 0 6px; text-align: center;
  word-break: break-word; line-height: 1.2;
}
.tco-card.is-flipped { transform: rotateY(180deg) scale(1.15) !important; z-index: 999 !important; }
.tco-card.is-winner {
  box-shadow: 0 0 40px var(--c), 0 0 80px var(--c);
  animation: tco-winner-pulse 1.6s ease-in-out infinite;
}
@keyframes tco-winner-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 20px var(--c)); }
}

/* ── Dice ─────────────────────────────────────────────────── */
.tco-dice-stage { perspective: 600px; min-height: 360px; padding: 40px 0; }
.tco-dice-scene { width: 140px; height: 140px; perspective: 600px; margin: 20px auto 30px; }
.tco-dice {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.tco-face {
  position: absolute; width: 140px; height: 140px;
  background: linear-gradient(135deg, #f9f4e6, #d8d0bc);
  border: 2px solid #1a1a1a; border-radius: 12px;
  display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
  padding: 16px; box-shadow: inset 0 0 12px rgba(0,0,0,0.18);
}
.tco-pip { width: 18px; height: 18px; border-radius: 50%; background: #1a1a1a; align-self: center; justify-self: center; box-shadow: 0 0 8px rgba(255, 107, 74, 0.5); }
.tco-face-1 { transform: translateZ(70px); }
.tco-face-6 { transform: rotateY(180deg) translateZ(70px); }
.tco-face-3 { transform: rotateX(90deg)  translateZ(70px); }
.tco-face-4 { transform: rotateX(-90deg) translateZ(70px); }
.tco-face-5 { transform: rotateY(90deg)  translateZ(70px); }
.tco-face-2 { transform: rotateY(-90deg) translateZ(70px); }

/* ── Winner modal ─────────────────────────────────────────── */
.tco-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(11, 13, 18, 0.85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.tco-modal-card {
  width: 100%; max-width: 440px; padding: 30px 24px 24px;
  background: var(--bg-elev); border: 2px solid var(--tco-coral); border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(255, 107, 74, 0.25);
  animation: tco-modal-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tco-modal-in {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tco-modal-trophy { font-size: 4rem; line-height: 1; margin-bottom: 6px; }
.tco-modal-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tco-amber);
  margin-bottom: 6px;
}
.tco-modal-name {
  font-size: 2.2rem; font-weight: 800; color: var(--tco-coral);
  margin: 0 0 18px; word-break: break-word;
  text-shadow: 0 0 16px var(--tco-coral-glow);
}
.tco-modal-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tco-modal-actions button {
  padding: 10px 18px; border-radius: 8px; font: inherit; font-size: 0.88rem; cursor: pointer;
  font-weight: 600;
}
.tco-modal-again { background: var(--tco-coral-glow); color: var(--tco-coral); border: 1px solid var(--tco-coral); }
.tco-modal-again:hover { background: var(--tco-coral); color: #0F1923; }
.tco-modal-close { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.tco-modal-close:hover { color: var(--text); border-color: var(--text); }

/* Confetti dots that rain inside the modal card */
.tco-confetti { position: absolute; top: -8px; width: 8px; height: 8px; opacity: 0; pointer-events: none; animation: tco-confetti-fall 2.4s linear forwards; }
@keyframes tco-confetti-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

@media (max-width: 480px) {
  .tco-card-magic-circle { width: 280px; height: 280px; }
  .tco-card { width: 84px; height: 124px; }
  .tco-dice-scene { width: 110px; height: 110px; }
  .tco-face { width: 110px; height: 110px; padding: 12px; }
  .tco-face-1 { transform: translateZ(55px); }
  .tco-face-6 { transform: rotateY(180deg) translateZ(55px); }
  .tco-face-3 { transform: rotateX(90deg)  translateZ(55px); }
  .tco-face-4 { transform: rotateX(-90deg) translateZ(55px); }
  .tco-face-5 { transform: rotateY(90deg)  translateZ(55px); }
  .tco-face-2 { transform: rotateY(-90deg) translateZ(55px); }
}