/* ── Small Friend Module ─────────────────────────────────── */

/* Bead transitions — makes animation smooth */
.abead { transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Shared title / sub ── */
.sf-title { text-align:center; font-size:17px; font-weight:700; color:var(--blue); margin-bottom:6px; }
.sf-sub   { text-align:center; font-size:13px; color:#888; margin-bottom:8px; }

/* ── Menu: formula reference card ── */
.sf-formula-ref {
  background:#f8f9ff;
  border:1px solid #e0e6ff;
  border-radius:12px;
  padding:10px 14px;
  margin-bottom:6px;
}
.sf-fref-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 0; border-bottom:1px solid #eef; font-size:14px;
}
.sf-fref-row:last-child { border-bottom:none; }
.sf-fref-n    { font-weight:800; font-size:16px; color:var(--blue); width:28px; }
.sf-fref-f    { font-weight:700; color:#e65100; flex:1; }
.sf-fref-hint { font-size:11px; color:#aaa; }

/* ── Menu: formula choose buttons ── */
.sf-formula-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.sf-formula-btn {
  background:var(--blue); color:white; border:none; border-radius:14px;
  padding:18px 10px; font-size:16px; font-weight:700; cursor:pointer; text-align:center;
}
.sf-formula-btn:hover { opacity:.85; }

/* ── Step progress bar ── */
.sf-step-bar {
  display:flex; align-items:center; justify-content:center;
  margin:6px 0 14px; gap:0;
}
.sf-step-dot {
  width:13px; height:13px; border-radius:50%;
  background:#ddd; border:2px solid #bbb;
  transition:background 0.3s, border-color 0.3s;
}
.sf-step-dot.active { background:var(--blue); border-color:var(--blue); }
.sf-step-dot.done   { background:#43a047; border-color:#43a047; }
.sf-step-line {
  width:28px; height:3px; background:#ddd;
  transition:background 0.3s;
}
.sf-step-line.active { background:#43a047; }

/* ── Instruction box ── */
.sf-instruction-box {
  background:#e8f4fd;
  border:2px solid #90caf9;
  border-radius:16px;
  padding:14px;
  text-align:center;
  margin-bottom:12px;
}
.sf-inst-emoji { font-size:28px; margin-bottom:4px; }
.sf-inst-text  { font-size:18px; font-weight:700; color:#1a237e; }
.sf-inst-num   { color:#e65100; font-size:22px; }
.sf-inst-sub   { font-size:12px; color:#888; margin-top:4px; }

/* ── Blocked column highlight ── */
.sf-col-blocked { background:rgba(255,80,80,.08); border-radius:6px; }

/* ── Quiz options ── */
.sf-quiz-options {
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px; margin:16px 0;
}
.sf-quiz-btn {
  color:white; border:none; border-radius:16px;
  padding:22px 10px; font-size:32px; font-weight:800;
  cursor:pointer; transition:transform 0.1s, opacity 0.2s;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.sf-quiz-btn:hover:not(:disabled) { transform:scale(1.06); opacity:.9; }
.sf-quiz-btn:disabled { opacity:.45; cursor:default; }
.sf-quiz-btn.sf-quiz-correct { outline:4px solid #fff; box-shadow:0 0 0 6px #43a047; }

.sf-quiz-color-1 { background:#F47920; }
.sf-quiz-color-2 { background:#2E4057; }
.sf-quiz-color-3 { background:#43a047; }
.sf-quiz-color-4 { background:#7b1fa2; }

/* ── Celebrate banner ── */
.sf-celebrate-banner {
  background:linear-gradient(135deg,#fff8e1,#ffe0b2);
  border:2px solid #ffc107;
  border-radius:16px;
  padding:14px;
  text-align:center;
  margin-bottom:10px;
}
.sf-celebrate-confetti {
  font-size:22px; letter-spacing:4px;
  animation:sfConfetti 1.4s ease infinite alternate;
}
.sf-celebrate-text { font-size:18px; font-weight:700; color:#e65100; margin-top:4px; }
.sf-celebrate-sub  { font-size:13px; color:#888; margin-top:4px; }

/* ── Formula reveal ── */
.sf-formula-reveal {
  background:#f0f4ff; border-radius:14px;
  padding:12px 14px; margin-bottom:10px;
}
.sf-formula-title { font-size:13px; color:#444; margin-bottom:8px; text-align:center; }
.sf-formula-steps { display:flex; flex-direction:column; gap:8px; }
.sf-formula-step {
  display:flex; align-items:center; gap:10px;
  background:white; border-radius:10px; padding:9px 12px;
  font-size:14px; box-shadow:0 1px 4px rgba(0,0,0,.08);
  /* hidden by default; revealed by JS adding sf-fstep-visible */
  opacity:0; transform:translateY(6px);
  transition:opacity 0.45s ease, transform 0.45s ease;
}
.sf-formula-step.sf-fstep-visible { opacity:1; transform:translateY(0); }
.sf-formula-result { background:#e8f5e9; border:1.5px solid #a5d6a7; }
.sf-fstep-icon { font-size:18px; }
.sf-fstep-text { flex:1; }

/* ── Final action buttons ── */
.sf-final-controls { transition:opacity 0.4s ease; }

/* ── Back button ── */
.sf-back-btn {
  background:white; color:#666; border:2px solid #ddd;
  border-radius:10px; padding:7px 14px; font-size:13px; cursor:pointer;
  margin-bottom:10px;
}
.sf-back-btn:hover { background:#f5f5f5; }

/* ══ Animations ══════════════════════════════════════════ */

@keyframes sfShake {
  0%,100% { transform:translateX(0); }
  15%     { transform:translateX(-7px); }
  35%     { transform:translateX(7px); }
  55%     { transform:translateX(-5px); }
  75%     { transform:translateX(5px); }
}

@keyframes sfPulse {
  0%,100% { box-shadow:none; transform:scale(1); }
  40%     { box-shadow:0 0 0 5px #ffc10799; transform:scale(1.12); }
}

@keyframes sfConfetti {
  from { letter-spacing:4px; opacity:.9; }
  to   { letter-spacing:8px; opacity:1; }
}

.sf-bead-shake  { animation:sfShake 0.5s ease; }
.sf-bead-pulse  { animation:sfPulse 0.7s ease 2; }

/* ── Practice All button (menu) ── */
.sf-practiceall-btn {
  display:block; width:100%;
  background:linear-gradient(135deg,#1976d2,#7b1fa2);
  color:white; border:none; border-radius:14px;
  padding:16px 10px; font-size:15px; font-weight:700;
  cursor:pointer; text-align:center; margin-top:4px;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.sf-practiceall-btn:hover { opacity:.88; }

/* ── Practice session ── */
.sf-prac-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.sf-prac-progress { display:flex; gap:6px; align-items:center; }
.sf-prac-dot {
  width:10px; height:10px; border-radius:50%;
  background:#ddd; border:2px solid #bbb;
  transition:background 0.3s;
}
.sf-prac-dot.active { background:var(--blue); border-color:var(--blue); }
.sf-prac-dot.done   { background:#43a047; border-color:#43a047; }
.sf-prac-scorebadge { display:flex; gap:8px; }

.sf-formula-hint-bar {
  background:#fff8e1;
  border:1.5px solid #ffc107;
  border-radius:10px;
  padding:6px 14px;
  font-size:13px;
  color:#e65100;
  text-align:center;
  margin-bottom:10px;
}

.sf-prob-num { font-size:22px; font-weight:800; }
.sf-prob-op  { font-size:18px; color:#555; }

/* ── All-mode: round badge + counter ── */
.sf-prac-round-badge {
  font-size:12px; font-weight:700; border-radius:20px;
  padding:4px 12px; color:white;
}
.sf-round-1 { background:#1976d2; }
.sf-round-2 { background:#7b1fa2; }
.sf-prac-counter { font-size:13px; color:#888; font-weight:600; }
.sf-prac-scorebadge-row { display:flex; gap:8px; justify-content:center; margin-bottom:8px; }

/* ── Round transition screen ── */
.sf-round-transition {
  background:linear-gradient(135deg,#e8f5e9,#e3f2fd);
  border:2px solid #90caf9; border-radius:16px;
  padding:20px 16px; text-align:center;
  margin-top:8px;
}
.sf-rt-emoji   { font-size:36px; margin-bottom:4px; }
.sf-rt-title   { font-size:20px; font-weight:800; color:#1a237e; margin-bottom:8px; }
.sf-rt-score   { display:flex; gap:10px; justify-content:center; align-items:center; margin-bottom:14px; }
.sf-rt-next    { background:white; border-radius:12px; padding:12px; margin-bottom:4px; }
.sf-rt-next-label { font-size:11px; color:#aaa; text-transform:uppercase; letter-spacing:.5px; }
.sf-rt-next-title { font-size:16px; font-weight:700; color:#7b1fa2; margin:4px 0 2px; }
.sf-rt-next-sub   { font-size:12px; color:#888; }

/* ── Results summary ── */
.sf-result-grid {
  background:#f8f9ff;
  border:1px solid #e0e6ff;
  border-radius:12px;
  padding:10px 14px;
  margin-top:10px;
}
.sf-result-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid #eef; font-size:15px;
}
.sf-result-row:last-child { border-bottom:none; }
.sf-result-formula { font-size:11px; font-weight:700; background:#e8f4fd; color:#1976d2; border-radius:8px; padding:2px 6px; }
.sf-result-prob    { font-weight:700; color:#2E4057; }
.sf-result-eq      { font-weight:800; color:#1976d2; }