/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

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

/* ── Glassmorphism panel ───────────────────────────────────────── */
.glass-panel {
  background: rgba(31, 18, 32, 0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(244,114,182, 0.2);
}

/* ── Card Flip 3D ──────────────────────────────────────────────── */
.card-flip {
  width: 130px;
  height: 210px;
  perspective: 1000px;
  cursor: pointer;
  flex-shrink: 0;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}

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

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(244,114,182, 0.4);
}

.card-back {
  background: linear-gradient(135deg, #5b1233 0%, #1f1220 50%, #5b1233 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s;
}

.card-back-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(45deg, rgba(244,114,182,0.06) 0, rgba(244,114,182,0.06) 1px, transparent 0, transparent 50%);
  background-size: 14px 14px;
}

.card-flip:hover .card-back {
  box-shadow: 0 0 28px rgba(244,114,182, 0.7);
  border-color: rgba(251,207,232, 0.8);
}

.card-front {
  transform: rotateY(180deg);
  background: #0d0710;
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Card Info Overlay ─────────────────────────────────────────── */
.card-info-overlay {
  background: linear-gradient(transparent, rgba(13,7,16,0.95));
  padding: 8px 6px 6px;
}

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
}
.badge-up  { background: rgba(16,185,129,0.2); color:#34d399; border:1px solid rgba(16,185,129,0.4); }
.badge-rev { background: rgba(239,68,68,0.2);  color:#f87171; border:1px solid rgba(239,68,68,0.4); }

/* ── Spinner ───────────────────────────────────────────────────── */
.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(244,114,182,0.2);
  border-top-color: #fbcfe8;
  border-radius: 50%;
  animation: spin-slow 0.8s linear infinite;
}

/* ── Result box fade-in ────────────────────────────────────────── */
#result-box {
  animation: fadeInUp 0.5s ease both;
}

/* ── Result text ✦ Thông điệp cốt lõi highlight ─────────────── */
#result-text {
  font-size: 0.95rem;
  line-height: 1.85;
}

/* ── Navbar links ──────────────────────────────────────────────── */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  letter-spacing: 0.03em;
}
.nav-link:hover {
  color: #fbcfe8;
  background: rgba(244,114,182, 0.12);
}
.nav-link i { font-size: 12px; }

/* ── Shooting star ─────────────────────────────────────────────── */
@keyframes shootingStar {
  0%   { transform: rotate(var(--sa)) translateX(0);    opacity: 1; }
  75%  { opacity: 0.6; }
  100% { transform: rotate(var(--sa)) translateX(520px); opacity: 0; }
}

/* ── Mobile deck shuffle animation ────────────────────────────── */
@keyframes deckShuffle {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-22px) rotate(-8deg); }
  45%  { transform: translateX(22px) rotate(8deg); }
  68%  { transform: translateX(-12px) rotate(-4deg); }
  85%  { transform: translateX(12px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* ── Mobile adjustments ────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Nav: icon-only on small screens */
  .nav-link .nav-text { display: none; }
  .nav-link { padding: 6px 6px; gap: 2px; }

  /* Slot placeholders & revealed cards scale down */
  .slot-placeholder { width: 68px !important; height: 110px !important; }
  .slot-placeholder i { font-size: 1rem !important; }
  .card-slot > p { font-size: 9px; max-width: 70px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Extra-narrow devices (e.g. iPhone SE 320px): trim brand text to avoid nav overflow */
@media (max-width: 340px) {
  .logo-suffix { display: none; }
  .nav-link { padding: 6px 4px; }
}