@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Kumbh+Sans:wght@400;500;600;700&display=swap');

.fc-root { max-width: 680px; margin: 0 auto; font-family: 'Kumbh Sans','Roboto',sans-serif; }
.fc-root * { box-sizing: border-box; }
.fc-empty { padding: 28px; text-align: center; color: #6b7280; background: #f8f9ff; border-radius: 12px; }

/* ── Outer wrap ── */
.fc-card-wrap { background: #fff; border-radius: 18px; box-shadow: 0 6px 32px rgba(19,30,59,.13); border: 1px solid #dde3f0; overflow: hidden; }

/* ── Top bar ── */
.fc-topbar { background: #131e3b; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.fc-eyebrow { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 700; margin-bottom: 2px; }
.fc-counter { font-size: 1rem; font-weight: 900; color: #fff; font-family: 'Roboto',sans-serif; }
.fc-topbar-btns { display: flex; align-items: center; gap: 10px; }
.fc-icon-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .2s; flex-shrink: 0; }
.fc-icon-btn:hover { background: rgba(255,255,255,.25); }
.fc-icon-btn.active { background: #d97706; border-color: #d97706; }
.fc-icon-btn.shuffled { animation: fcSpin .5s ease; }
@keyframes fcSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ── 3D Stage ── */
.fc-stage { padding: 24px 20px 12px; perspective: 1200px; cursor: pointer; }
.fc-flipper { position: relative; width: 100%; min-height: 380px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.fc-flipper.flipped { transform: rotateY(180deg); }

/* Slide animations */
.fc-flipper.slide-left  { animation: fcSlideLeft .22s ease; }
.fc-flipper.slide-right { animation: fcSlideRight .22s ease; }
@keyframes fcSlideLeft  { from { opacity:.2; transform: translateX(40px) rotateY(0); } to { opacity:1; transform: translateX(0) rotateY(0); } }
@keyframes fcSlideRight { from { opacity:.2; transform: translateX(-40px) rotateY(0); } to { opacity:1; transform: translateX(0) rotateY(0); } }

/* Faces */
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 44px; min-height: 380px; overflow-y: auto; }
.fc-front { background: linear-gradient(135deg, #131e3b 0%, #1c2d57 100%); }
.fc-front .fc-face-text {
  font-size: 1.9rem;
  font-weight: 800;
  text-align: center;
  align-self: center;
  color: #fff;
  line-height: 1.4;
  white-space: pre-wrap;
}
.fc-back  { background: #ffffff; border: 2px solid #e8edf5; transform: rotateY(180deg); }
.fc-face-label { display: none; }
.fc-face-text {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  text-align: left;
  line-height: 1.7;
  font-family: 'Kumbh Sans','Roboto',sans-serif;
  max-width: 100%;
  width: 100%;
}
.fc-back .fc-face-text {
  color: #111827;
  font-size: .95rem;
  white-space: pre-wrap;
}
.fc-back .fc-face-label { color: rgba(0,0,0,.3); }

/* Hint */
.fc-hint {
    text-align: center;
    font-size: 24px !important;
    color: #000000 !important;;
    margin: 10px 0 0;
    font-weight: 500;
    text-transform: capitalize !important;;
}
/* ── Navigation ── */
.fc-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 16px; gap: 12px; }
.fc-nav-btn { background: #131e3b; color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-family: 'Kumbh Sans','Roboto',sans-serif; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .2s; }
.fc-nav-btn:hover:not(:disabled) { background: #1c2d57; }
.fc-nav-btn:disabled { background: #d1d5db; cursor: not-allowed; }
.fc-dots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; flex: 1; }
.fc-dot { width: 9px; height: 9px; border-radius: 50%; background: #e8edf5; border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.fc-dot.active { background: #131e3b; transform: scale(1.35); }
.fc-dot:hover { background: #94a3b8; }

/* ── Progress bar ── */
.fc-progress-bar { height: 4px; background: #f0f2f7; }
.fc-progress-fill { height: 100%; background: linear-gradient(90deg, #131e3b, #1c2d57); border-radius: 0 99px 99px 0; transition: width .4s ease; }

/* Admin */
.fc-card-block { background:#fff; border:1px solid #dde3f0; border-radius:10px; margin-bottom:14px; overflow:hidden; }
.fc-card-header { background:#131e3b; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; }
.fc-card-num { color:#fff; font-weight:700; font-size:.9rem; }
.fc-card-body { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:18px; }
@media(max-width:600px) { .fc-card-body { grid-template-columns:1fr; } }
.fc-field { display:flex; flex-direction:column; gap:6px; }
.fc-field-label { font-weight:700; font-size:.8rem; color:#131e3b; }
.fc-front-input,.fc-back-input { border:1px solid #dde3f0; border-radius:8px; padding:10px 12px; font-family:inherit; font-size:.9rem; resize:vertical; outline:none; }
.fc-front-input:focus,.fc-back-input:focus { border-color:#131e3b; }

.fc-back .fc-face-label { color: rgba(0,0,0,.25); }