/* ---------- Flip cards (myth vs fact) ---------- */
.flip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.flip-card{perspective:1000px;height:200px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow);
}
.flip-front{background:linear-gradient(135deg,var(--orange),#FFB74D);color:#fff}
.flip-back{background:linear-gradient(135deg,var(--green),var(--green-light));color:#fff;transform:rotateY(180deg)}
.flip-face .kicker{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.flip-face p{font-weight:600;font-size:1.02rem}

/* ---------- Quiz ---------- */
.quiz-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;max-width:640px}
.quiz-progress{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-bottom:18px}
.quiz-progress-bar{height:100%;background:var(--green);transition:width .3s}
.quiz-option{
  display:block;width:100%;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);margin-bottom:10px;cursor:pointer;font-size:.95rem;font-weight:600;
}
.quiz-option:hover{border-color:var(--green)}
.quiz-option.correct{background:rgba(46,125,50,.15);border-color:var(--green)}
.quiz-option.wrong{background:rgba(211,47,47,.12);border-color:#D32F2F}

/* ---------- Search ---------- */
.search-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:200;
  align-items:flex-start;justify-content:center;padding-top:10vh;
}
.search-overlay.open{display:flex}
.search-panel{background:var(--surface);width:min(560px,92vw);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.search-input{width:100%;border:none;padding:18px 20px;font-size:1.05rem;background:transparent;color:var(--text)}
.search-input:focus{outline:none}
.search-results{max-height:50vh;overflow-y:auto;border-top:1px solid var(--border)}
.search-result{display:block;padding:14px 20px;border-bottom:1px solid var(--border)}
.search-result:hover{background:var(--bg)}
.search-result .res-type{font-size:.7rem;font-weight:800;color:var(--orange);text-transform:uppercase}