/* Basic, theme-agnostic styles; tweak to match your theme */
.tftct-wrap { width:100%; }
.tftct-container { max-width:1100px; margin:0 auto; padding:1rem; }
.tftct-header { text-align:center; margin-bottom:1rem; }
.tftct-h2 { font-size:1.75rem; margin:0; }
.tftct-sub { color:#556; margin:.25rem 0 .75rem; }
.tftct-actions { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.tftct-btn { border:0; border-radius:999px; padding:.6rem 1rem; background:#0f172a; color:#fff; cursor:pointer; }
.tftct-btn[disabled] { background:#e5e7eb; color:#94a3b8; cursor:not-allowed; }

.tftct-grid { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; margin:1rem 0; padding:0; }
@media (min-width:600px){ .tftct-grid { grid-template-columns:repeat(5, 1fr); } }
@media (min-width:900px){ .tftct-grid { grid-template-columns:repeat(7, 1fr); } }

/* Card back uses a 2:3 ratio without aspect-ratio for maximum compatibility */
.tftct-card { position:relative; width:100%; padding-top:150%; border-radius:12px; overflow:hidden; border:1px solid #e2e8f0; background:linear-gradient(to bottom,#f8fafc,#f1f5f9); box-shadow:0 2px 8px rgba(0,0,0,.06); transition:transform .1s; }
.tftct-card:hover { transform:scale(1.01); }
.tftct-card.picked { outline:2px solid #10b981; transform:scale(1.02); }
.tftct-card > .tftct-back { position:absolute; inset:0; display:grid; place-items:center; }

.tftct-reveal { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem; }
@media (min-width:900px){ .tftct-reveal { grid-template-columns:1fr 1fr; } }

.tftct-cardbox { border:1px solid #e2e8f0; border-radius:14px; padding:1rem; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.tftct-cardbox h4 { margin:0 0 .25rem; }
.tftct-cardimg { position:relative; width:100%; padding-top:150%; border-radius:10px; background:#f1f5f9; color:#64748b; font-size:.85rem; margin:.5rem 0 .75rem; display:grid; place-items:center; }
.tftct-cardimg > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:10px; }
.tftct-cardtext p { margin:.25rem 0; font-size:.95rem; color:#334155; }

.tftct-panel { border:1px solid #e2e8f0; border-radius:14px; padding:1rem; background:#ecfdf5; }
.tftct-h3 { margin:0 0 .5rem; }
.tftct-narrative { margin:0 0 .75rem; color:#0f172a; }
.tftct-disclaimer { text-align:center; color:#94a3b8; font-size:.8rem; margin-top:1rem; }