/* ==========================================================
   Abacus classes page — hero animation, interactive board,
   challenge card and whole-brain diagram.
   Shared course-page bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.hero-abacus{ width:100%; max-width:480px; display:block; margin:0 auto; filter: drop-shadow(0 30px 40px rgba(60,20,0,.35)); }

/* ---------- Intro ---------- */

.brain-venn{ width:100%; max-width:420px; display:block; margin:0 auto; overflow:visible; }
/* Pulses are SMIL <animate> tags in the markup — works in older browsers, unlike CSS transforms on SVG */
.brain-venn .venn{ stroke-width:2; }
.brain-venn .venn-l{ fill: rgba(36,81,180,.12); stroke: var(--academy-accent); }
.brain-venn .venn-r{ fill: rgba(217,114,44,.14); stroke: var(--coaching-accent); }
.brain-venn text{ font-family: var(--font-body); text-anchor:middle; }
.brain-venn .venn-head{ font-family: var(--font-display); font-weight:700; font-size:15px; fill: var(--navy); }
.brain-venn .venn-sub{ font-size:12px; fill: var(--slate); }
.brain-venn .venn-foot{ font-family: var(--font-accent); font-style:italic; font-size:15px; fill: var(--gold-deep); }
.brain-venn .venn-core circle{ fill: var(--gold); stroke:#fff; stroke-width:3; }
.brain-venn .venn-core text{ font-family: var(--font-display); font-weight:800; font-size:11px; fill: var(--navy); }

/* ---------- Interactive board ---------- */
.abacus-card{
  background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow-soft);
  padding:1.6rem; height:100%;
}
.abacus-readout{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.abacus-readout-label{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); }
.abacus-readout-value{
  font-family: var(--font-display); font-weight:800; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); color: var(--navy);
  font-variant-numeric: tabular-nums; transition: color .3s ease;
}
.abacus-readout-value.is-match{ color: var(--study-accent); }

.abacus-board{ width:100%; display:block; user-select:none; -webkit-user-select:none; touch-action: manipulation; }
.abacus-board .bead{ cursor:pointer; -webkit-tap-highlight-color: transparent; }
.abacus-board .bead:focus{ outline:none; }
.abacus-board .bead:focus-visible .bead-body{ stroke: var(--navy); stroke-width:3; }
.abacus-board .bead:hover .bead-body{ filter: brightness(1.08); }
.abacus-board .bead-body{ stroke: rgba(0,0,0,.18); stroke-width:1; transition: filter .2s ease; }
.abacus-board .bead-shine{ fill:#fff; opacity:.45; pointer-events:none; }
.abacus-board .bead.is-on .bead-body{ filter: saturate(1.25) brightness(1.05); }
.abacus-board .rod-digit{ font-family: var(--font-display); font-weight:800; font-size:20px; fill: var(--navy); text-anchor:middle; }
.abacus-board .rod-place{ font-family: var(--font-body); font-weight:600; font-size:11px; fill: var(--slate); text-anchor:middle; }
.abacus-board .rod-digit.is-zero{ fill: #B9B2A2; }
.abacus-board.is-celebrate .bead.is-on{ animation: beadCheer .6s ease 2; }
@keyframes beadCheer{ 50%{ filter: drop-shadow(0 0 8px var(--gold)); } }

.abacus-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1rem; }
.abacus-show{ display:flex; gap:.5rem; flex:1 1 260px; }
.abacus-show .form-control{ padding:.4rem .8rem; min-width:0; }
.abacus-show .btn{ white-space:nowrap; }
.abacus-sound{ border:1.5px solid var(--line); border-radius:999px; color: var(--navy); width:38px; height:34px; display:inline-flex; align-items:center; justify-content:center; }
.abacus-sound[aria-pressed="false"]{ color: var(--slate); opacity:.6; }

/* ---------- Challenge ---------- */
.challenge-card{ display:flex; flex-direction:column; }
.challenge-levels{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.level-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.3rem .8rem; font-size:.8rem; font-weight:700; color: var(--slate);
  transition: .2s;
}
.level-btn:hover{ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.level-btn.is-active{ background: var(--coaching-accent); border-color: var(--coaching-accent); color:#fff; }
.challenge-target{
  font-family: var(--font-display); font-weight:800; font-size: 2.6rem; color: var(--coaching-accent); text-align:center;
  background: var(--paper); border:2px dashed rgba(217,114,44,.35); border-radius: var(--radius-md); padding:.6rem; margin-bottom:.6rem;
  font-variant-numeric: tabular-nums;
}
.challenge-target.is-done{ color: var(--study-accent); border-color: var(--study-accent); border-style:solid; animation: targetPop .5s ease; }
@keyframes targetPop{ 40%{ transform: scale(1.06); } }
.challenge-msg{ font-size:.88rem; font-weight:600; min-height:2.6em; margin-bottom:auto; padding-bottom:1rem; }
.challenge-msg.ok{ color: var(--study-accent); }
.challenge-streak{ font-family: var(--font-display); font-weight:800; font-size:1.3rem; color: var(--coaching-accent); }

/* ---------- How to read ---------- */
.read-card{ display:flex; gap:1rem; align-items:center; padding:1.4rem; }
.read-rod{ width:64px; flex:none; }
.read-rod .rb-gold{ fill: var(--gold); }
.read-rod .rb-blue{ fill: var(--royal-light); }
.read-rod .rb-off{ opacity:.35; }
.read-icon{
  flex:none; width:64px; height:64px; border-radius:16px; background: rgba(217,114,44,.12); color: var(--coaching-accent);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800; font-size:.72rem; text-align:center; line-height:1.1;
}
.read-icon i{ font-size:1.6rem; }