/* FlashQuest playing-card shell + lite player v2.
   Faces ported verbatim from components/decks-edit/FlipCardShell.tsx +
   tokens.ts: 360ms bezier(.45,0,.55,1) flip @ perspective 1400, cream papers
   with suit pips in light, the study-match dark face with accent pips + aura
   rings in dark. Geometry + landing glow ported verbatim from the real Study
   Match card (components/StudyFeed.*): 400x440 @ radius 28, and the accent
   ring pulse on flip completion (500ms, 120ms rise). Shared by /d pages and
   the science flip demo. */

/* Default accent for cards embedded WITHOUT a .fq-stage wrapper (e.g. the
   science flip demo). An undefined --fq-accent is guaranteed-invalid inside
   var(), which silently zeroes every accent border/glow on the card. The
   lite player's per-deck inline --fq-accent on .fq-stage still wins for
   descendants via inheritance. */
:root { --fq-accent: var(--accent, #8b5cf6); }

.fq-stage {
  --fq-accent: var(--accent, #8b5cf6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
}

.fq-progress {
  font: 600 0.8rem var(--font-display, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #7b76a0);
}
.fq-progress b { color: var(--text, inherit); }

/* ── the card ──
   Study Match proportions, ported from StudyFeed: cardWrapper maxWidth 400,
   target card height 440 (CARD_H_TEXT), borderRadius 28. */
.fq-card {
  width: min(400px, 100%);
  aspect-ratio: 400 / 440;
  position: relative;
  perspective: 1400px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
/* dark aura rings (FlipCardShell glowRingInner/Outer) */
[data-theme='dark'] .fq-card::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 8px solid color-mix(in srgb, var(--fq-accent) 12%, transparent);
  border-radius: 36px;
  pointer-events: none;
}
[data-theme='dark'] .fq-card::after {
  content: '';
  position: absolute;
  inset: -20px;
  border: 12px solid color-mix(in srgb, var(--fq-accent) 5%, transparent);
  border-radius: 48px;
  pointer-events: none;
}

.fq-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  transition: transform var(--dur-flip, 360ms) var(--ease-flip, cubic-bezier(0.45, 0, 0.55, 1));
}
.fq-card.flipped .fq-inner { transform: rotateY(180deg); }

.fq-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.8rem 2rem 3rem;
  border-radius: 28px;
  overflow: hidden;
}
.fq-back { transform: rotateY(180deg); }

/* light: the four cream papers (CARD_BACKGROUNDS, verbatim) */
.fq-face { border: 2px solid; }
.fq-card[data-paper='0'] .fq-face { background: #fef7f0; border-color: #d4a574; }
.fq-card[data-paper='1'] .fq-face { background: #fff5f5; border-color: #c9a0a0; }
.fq-card[data-paper='2'] .fq-face { background: #f0f7ff; border-color: #7c9fc9; }
.fq-card[data-paper='3'] .fq-face { background: #f5f5f0; border-color: #a0a078; }
.fq-card .fq-face { box-shadow: 0 18px 40px color-mix(in srgb, var(--fq-accent) 20%, transparent); }

/* dark: the study-match face */
[data-theme='dark'] .fq-card .fq-face {
  background: var(--card-dark-face, #0F1325);
  border: 1.5px solid color-mix(in srgb, var(--fq-accent) 34%, transparent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .fq-face .fq-hairline {
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.fq-hairline { display: none; }
[data-theme='dark'] .fq-hairline { display: block; }

/* pips — 13px, TL + BR rotated (FlipCardShell pip styles) */
.fq-pip {
  position: absolute;
  font-size: 13px;
  line-height: 14px;
  pointer-events: none;
}
.fq-pip-tl { top: 9px; left: 12px; }
.fq-pip-br { bottom: 9px; right: 12px; transform: rotate(180deg); }
.fq-card[data-suit='spade'] .fq-pip, .fq-card[data-suit='club'] .fq-pip { color: var(--suit-ink-dark, #1e293b); }
.fq-card[data-suit='heart'] .fq-pip, .fq-card[data-suit='diamond'] .fq-pip { color: var(--suit-ink-red, #dc2626); }
[data-theme='dark'] .fq-card .fq-pip {
  color: var(--fq-accent);
  text-shadow: 0 0 9px color-mix(in srgb, var(--fq-accent) 50%, transparent);
}

.fq-tag {
  font: 600 0.68rem var(--font-display, sans-serif);
  letter-spacing: 0.16em;
  color: var(--fq-accent);
}
[data-theme='dark'] .fq-back .fq-tag { color: var(--success-ink, #34d399); }
.fq-text {
  font: 800 clamp(1.05rem, 2.4vw, 1.5rem) var(--font-display, sans-serif);
  text-align: center;
  text-wrap: balance;
  color: #221c33;
}
[data-theme='dark'] .fq-text { color: var(--text, #f4f2ff); }
/* hint pinned to the bottom edge like the app's cardSubtitleWrap */
.fq-hint {
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-3, #8b87a8);
}

/* landing glow — OUTSIDE the rotating element; fires on flip completion.
   Study Match recipe, verbatim from StudyFeed: 2px deckAccent ring at the
   card radius, 32px shadow @ 0.36, LANDING_PULSE_MS 500 = 120ms rise +
   380ms fall, ease-out-quad both legs. Single ring — no outer bloom. */
.fq-landing {
  position: absolute;
  inset: 0;
  border: 2px solid var(--fq-accent);
  border-radius: 28px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
}
.fq-bloom { display: none; }
.fq-card.landed .fq-landing { animation: fq-land 500ms linear; }
@keyframes fq-land {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  24% { opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  100% { opacity: 0; }
}

/* ── grades — the study-session grade bar palette ── */
.fq-grades {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 46px;
}
.fq-grades[hidden] { display: none; }
.fq-grade {
  font: 600 0.85rem var(--font-display, sans-serif);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  background: var(--surface, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--line, rgba(163, 158, 205, 0.2));
  color: var(--text, inherit);
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.fq-grade:active { transform: scale(0.95); }
.fq-grade small { display: block; font-weight: 500; font-size: 0.66rem; opacity: 0.75; }
.fq-grade[data-grade='Easy'] { color: #60A5FA; border-color: color-mix(in srgb, #60A5FA 40%, transparent); }
.fq-grade[data-grade='Easy']:hover { background: color-mix(in srgb, #60A5FA 12%, transparent); }
.fq-grade[data-grade='Hard'] { color: var(--gold, #FBBF24); border-color: color-mix(in srgb, #FBBF24 40%, transparent); }
.fq-grade[data-grade='Hard']:hover { background: color-mix(in srgb, #FBBF24 12%, transparent); }
.fq-grade[data-grade='Forgot'] { color: var(--mastery-ink, #F0647A); border-color: color-mix(in srgb, #E4485F 40%, transparent); }
.fq-grade[data-grade='Forgot']:hover { background: color-mix(in srgb, #E4485F 12%, transparent); }
.fq-grade[data-grade='Okay']:hover { background: var(--surface-strong, rgba(255,255,255,0.09)); }

.fq-toast {
  min-height: 1.3em;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--success-ink, #34d399);
  opacity: 0;
  transition: opacity 200ms ease;
}
.fq-toast.show { opacity: 1; }

/* install gate */
.fq-gate {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.8rem;
  border: 1px solid var(--line, rgba(163, 158, 205, 0.2));
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% -20%, color-mix(in srgb, var(--fq-accent) 14%, transparent), transparent 64%),
    var(--card, rgba(17, 20, 41, 0.8));
  width: min(520px, 100%);
}
.fq-gate[hidden] { display: none; }
.fq-gate h3 { font: 800 1.25rem var(--font-display, sans-serif); color: var(--text, inherit); }
.fq-gate p { color: var(--text-2, #a9a4c9); font-size: 0.9rem; max-width: 42ch; }
.fq-gate .fq-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 600 0.95rem var(--font-display, sans-serif);
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--accent-2, #6366f1));
  border-radius: 14px;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent, #8b5cf6) 30%, transparent);
  transition: transform 120ms ease;
}
.fq-gate .fq-cta:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .fq-inner { transition: none; }
  .fq-card.landed .fq-landing { animation: none; }
}