/* =========================================================
   SCORE
   ========================================================= */

.fj-score { display:flex; justify-content:center; align-items:center; gap:0; max-width:500px; margin:0 auto 28px; }
.fj-score > div { min-width:105px; text-align:center; }
.fj-score > div + div { border-left:1px solid var(--border); }
.fj-score strong { display:block; color:var(--green-1); font-size:1.7rem; font-weight:700; line-height:1; }
.fj-score span { display:block; margin-top:6px; color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }


/* =========================================================
   FLIP CARD
   ========================================================= */

.fj-flip-wrapper { width:100%; max-width:560px; margin:0 auto 22px; perspective:1200px; }
.fj-flip-card { position:relative; width:100%; min-height:240px; transform-style:preserve-3d; transition:transform .55s var(--ease); }
.fj-flip-card.is-flipped { transform:rotateY(180deg); }
.fj-face { position:absolute; inset:0; min-height:240px; margin:0; backface-visibility:hidden; flex-direction:column; text-align:center; }
.fj-face-back { transform:rotateY(180deg); }
.fj-flip-card.ready { cursor:pointer; }

.fj-face.tool-card { display:flex; flex-direction:column; align-items:center; justify-content:center; }


/* =========================================================
   STATEMENT
   ========================================================= */

.fj-label { margin-bottom:16px; color:var(--green-2); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.fj-statement { max-width:470px; color:var(--text); font-size:1.28rem; font-weight:500; line-height:1.5; }
.fj-hint { margin-top:16px; color:var(--muted); font-size:1rem; font-weight:300; }


/* =========================================================
   REVEAL BADGE
   ========================================================= */

.fj-badge { display:inline-flex; align-items:center; justify-content:center; padding:7px 20px; border-radius:999px; font-size:1.2rem; font-weight:700; letter-spacing:.04em; }
.fj-badge.fact { color:var(--green-1); background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.42); }
.fj-badge.judgment { color:var(--purple-1); background:rgba(139,92,246,.08); border:1px solid rgba(167,139,250,.42); }


/* =========================================================
   ANSWER BUTTONS
   ========================================================= */

.fj-guess-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:560px; margin:0 auto; }
.fj-guess-row .tool-card { width:100%; min-height:64px; margin-bottom:0; border:1px solid var(--border); }
.fj-guess-row .fj-judgment { border-color:var(--border); color:var(--purple-1); }
.fj-guess-row .fj-fact { border-color:var(--border); color:var(--green-1); }
.fj-guess-row .tool-card:disabled { opacity:.35; cursor:default; transform:none; }

/* ========================================================= MOBILE ========================================================= */

@media (max-width:640px) {
    .fj-guess-row { grid-template-columns:1fr; }
    .fj-guess-row .tool-card { min-height:58px; }
}
/* =========================================================
   FEEDBACK
   ========================================================= */

.fj-feedback { min-height:24px; margin:15px auto 0; color:var(--muted); font-size:.9rem; font-weight:500; text-align:center; }
.fj-feedback.correct { color:var(--green-1); }
.fj-feedback.wrong { color:var(--purple-1); }


/* =========================================================
   NEXT STATEMENT BUTTON
   ========================================================= */

.fj-next { max-width:260px; }


/* =========================================================
   DEFINITION CARDS
   ========================================================= */

.fj-definitions { margin-top:32px;font-weight: 300; min-height:190px; }
.fj-definition h3 { margin-bottom:12px; }
.fj-definition.judgment { border-color:rgba(167,139,250,.38); }
.fj-definition.judgment h3 { color:var(--purple-1); }
.fj-definition.fact { border-color:rgba(52,211,153,.32); }
.fj-definition.fact h3 { color:var(--green-1); }
.fj-definition p + p { margin-top:12px; }
.fj-definition p em { font-weight: 200; }
.fj-definition p { font-weight: 200; }

/* =========================================================
   P.S. — EMOTION
   ========================================================= */

.ps-note { text-align:center; }
.ps-note em { color:var(--purple-1); }

.ps-flow { display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0; white-space:nowrap; }
.ps-flow div { display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.ps-flow strong { font-weight:700; }
.ps-flow span { font-size:.9em; opacity:.7; }
.ps-flow b { font-weight:700; }


/* =========================================================
   STEP 2 DONE
========================================================= */

#post-tool-progress {
    width:100%;
    max-width:700px;
    margin:40px auto 0;
    text-align:center;
}

#post-tool-progress strong {
    color:var(--green-1);
    font-weight:800;
}


/* =========================================================
   NEXT TOOL
========================================================= */

#next-tool {
    display:none;
    width:100%;
    max-width:700px;
    margin:20px auto 0;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    text-align:center;
}

#next-tool p {
    margin:0 0 14px;
    padding:0;
    color:var(--text);
    font-size:1rem;
    font-weight:800;
    line-height:1.5;
    text-align:center;
}

#next-tool p strong {
    color:var(--text);
    font-weight:800;
}

#next-tool .tool-btn {
    display:inline-block;
    width:auto;
    margin:0 auto;
    text-decoration:none;
    text-align:center;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px) {
    .fj-score > div { min-width:80px; }
    .fj-statement { font-size:1.08rem; }
    .fj-guess-row { grid-template-columns:1fr; }
    .fj-guess-row .tool-card { min-height:58px; }
    .next-tool a { width:100%; min-width:0; }
}