/* Twin Flame Widget — styles (v5.0 embed) */
.tfw-container { max-width: 1000px; margin: 0 auto; padding: 1rem; }
.seo-intro { background: var(--panel, rgba(18,16,31,.6)); backdrop-filter: blur(6px); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 16px; padding: 1rem 1rem 0; }
.seo-intro h2 { margin-top: 0; color: var(--gold, #ffd166); }
.seo-intro p { margin-bottom: 1rem; }
.tfw-widget { margin-top: 1rem; padding: 1rem; background: var(--panel, rgba(18,16,31,.6)); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); border: 1px solid var(--border, rgba(255,255,255,.08)); }
.tfw-controls { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tfw-controls .tfw-status { color: var(--muted, #bfb8d6); }
button.tfw-btn-primary, .tfw-cta { background: linear-gradient(135deg, var(--accent, #d66bff), var(--accent-2, #ff6ec7)); border: none; color: white; padding: .6rem .9rem; border-radius: 999px; cursor: pointer; font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(214,107,255,.25); display: inline-flex; align-items: center; }
button.tfw-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
button.tfw-btn-ghost { background: transparent; color: var(--accent, #d66bff); border: 1px solid var(--accent, #d66bff); padding: .5rem .8rem; border-radius: 999px; cursor: pointer; }

.icon-copy { width: 1em; height: 1em; margin-right: .5em; vertical-align: -0.1em; transition: transform .15s ease; }
button.tfw-btn-primary:hover .icon-copy { transform: scale(1.05); }

.tfw-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 130px)); gap: .9rem; margin-top: 1rem; will-change: transform; perspective: 1000px; justify-content: center; }
.tfw-card-grid.shuffling .tfw-card { animation: shuffle-wiggle .7s var(--delay, 0ms) both;
  width: 100%;
}


.tfw-card { position: relative; aspect-ratio: 2/3; border: 0; border-radius: 14px; background: #241a38; cursor: pointer; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.3); transition: transform .2s ease, outline-color .2s ease, background-image .25s ease, filter .2s ease, box-shadow .3s ease; background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 50%), radial-gradient(circle at 70% 75%, rgba(255,255,255,.08), transparent 45%), linear-gradient(135deg, #221633, #3a285a 55%, #6a3a8a); background-size: cover; background-position: center; }
.tfw-card:hover { transform: translateY(-2px); }

@keyframes flip-anim { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(180deg); } }
.tfw-card.flipping { animation: flip-anim .35s ease both; }

@keyframes face-pop { 0% { transform: scale(0.975); } 100% { transform: scale(1); } }
@keyframes face-glow { 0% { box-shadow: 0 6px 16px rgba(0,0,0,.3), 0 0 0 rgba(255,110,199,0); } 30% { box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 24px rgba(255,110,199,.35); } 100% { box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 0 rgba(255,110,199,0); } }
.tfw-card.flipped { outline: 3px solid var(--accent-2, #ff6ec7); filter: saturate(1.05); transform: none; background-image: var(--face); animation: face-pop .36s ease both .35s, face-glow 1.1s ease-out .35s 1; }
.tfw-card.locked { cursor: not-allowed; filter: grayscale(.35) brightness(.9); }

.tfw-reading { margin-top: 1.25rem; }
.tfw-cards-reveal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.tfw-reveal-card { background: rgba(23,20,39,.9); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1rem; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.reveal-title { font-weight: 800; margin: .35rem 0 .5rem; color: var(--gold, #ffd166); letter-spacing: .2px; }
.reveal-face p { margin: 0; }
.reveal-art { width: 100%; border-radius: 12px; margin-bottom: .8rem; object-fit: cover; }

.tfw-compiled { margin-top: .5rem; }
.tfw-compiled h3 { color: var(--gold, #ffd166); margin-bottom: .35rem; }
.tfw-compiled .intro { font-weight: 600; }
.soft { color: var(--muted, #bfb8d6); }
.tfw-cta-row { margin-top: .9rem; }
.disclaimer, .credit { color: var(--muted, #bfb8d6); font-size: .9rem; }

.faq { margin: 2rem 0; }
.faq details { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .6rem .8rem; background: rgba(18,16,31,.6); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.faq details + details { margin-top: .6rem; }

.tfw-footer { text-align: center; padding: 2rem 1rem 3rem; color: var(--muted, #bfb8d6); }

@keyframes shuffle-wiggle { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 30% { transform: translateY(-8px) rotate(-2deg); } 60% { transform: translateY(6px) rotate(2deg); } 100% { transform: translateY(0) rotate(0deg); opacity: 1; } }


/* --- v5.2 sizing patch --- */

:root {
  --card-min: 92px;
  --card-max: 158px;
}

/* Grid sizing refinement */
.tfw-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 130px)); gap: .9rem; margin-top: 1rem; will-change: transform; perspective: 1000px; justify-content: center; }

/* Card sizing refinement */
.tfw-card {
  width: 100%;
  aspect-ratio: 2/3;
}

/* Revealed card image constraints */
.reveal-art {
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  max-height: 420px;
}
@media (min-width: 1200px){
  .reveal-art { max-height: 460px; }
}

@media (min-width: 1200px){
  .tfw-card-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 140px)); }
}