/* ============================================================
   The soroban board
   ============================================================ */

.abacus-host{
  --frame:#8A4B2A;
  --frame-hi:#B36B41;
  --frame-lo:#5F311A;
  --deck:#FFF3E2;
  --rodwire:#C9A17A;
  --beam:#3D2013;

  width:100%;
  margin:8px 0;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

@media (prefers-color-scheme: dark){
  .abacus-host{ --deck:#F6E8D6; }
}

.abacus-frame{
  width:100%; height:auto; display:block;
  border-radius:20px;
  box-shadow:0 12px 0 rgba(43,33,64,.14), 0 22px 44px rgba(43,33,64,.22);
  overflow:visible;
}

.ab-deck{ fill:var(--deck); }
.ab-frame-rect{ fill:var(--frame); }
.ab-frame-hi{ fill:var(--frame-hi); opacity:.55; }
.ab-beam{ fill:var(--beam); }
.ab-dot{ fill:var(--deck); }
.ab-rod{ stroke:var(--rodwire); stroke-width:2.5; stroke-linecap:round; }

/* --- beads --- */
.bead{
  cursor:pointer;
  transition: transform .19s cubic-bezier(.25,1.5,.45,1), filter .2s;
  transform-box: view-box;
}
.bead .bead-body{ transition: fill .25s; }
.bead:active{ filter:brightness(1.12); }
.abacus-host.readonly .bead{ cursor:default; }

/* the bead fill is a per-instance gradient set as an attribute in
   abacus.js — do NOT set `fill` here or it would override it with a
   gradient id that does not exist on this board. */
.bead-shine{ fill:rgba(255,255,255,.30); pointer-events:none; }
.bead-edge{ fill:none; stroke:rgba(0,0,0,.22); stroke-width:1.2; }

/* an active (counting) bead glows a little */
.bead.on .bead-body{ filter:saturate(1.25) brightness(1.06); }

/* --- coaching highlights --- */
.bead.hint{ animation: beadPulse 1s ease-in-out infinite; }
@keyframes beadPulse{
  0%,100%{ filter:none }
  50%{ filter: drop-shadow(0 0 9px rgba(255,208,0,.95)) brightness(1.2) }
}
.bead.hint .bead-edge{ stroke:#FFC400; stroke-width:2.6; }

.rod-spot{ fill:transparent; }
.rod-spot.focus{ fill:rgba(255,196,0,.16); }

.rod-value{
  font: 800 15px ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  fill:rgba(255,243,226,.55); text-anchor:middle;
  transition: fill .25s;
}
.rod-value.hot{ fill:#FFE9A8; }

/* motion arrows drawn during "Show me" */
.move-arrow{
  stroke:#FFB300; stroke-width:3.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
  animation: arrowFade 1.05s ease-out infinite;
}
@keyframes arrowFade{
  0%{ opacity:0; transform:translateY(0) }
  35%{ opacity:1 }
  100%{ opacity:0; transform:translateY(var(--arrow-shift, 8px)) }
}
.arrow-head{ fill:#FFB300; }

.finger-ghost{
  font-size:19px;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.finger-ghost.show{ opacity:1; animation: fingerTap .7s ease-in-out infinite; }
@keyframes fingerTap{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

/* the board flashes when a lesson step lands */
.abacus-host.correct .abacus-frame{ animation: boardWin .55s ease-out; }
.abacus-host.wrong   .abacus-frame{ animation: boardShake .4s ease-out; }
@keyframes boardWin{
  0%{ transform:scale(1) } 40%{ transform:scale(1.025) } 100%{ transform:scale(1) }
}
@keyframes boardShake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-9px) } 45%{ transform:translateX(8px) }
  70%{ transform:translateX(-5px) }
}

.abacus-host.compact .abacus-frame{ max-height:32vh; width:auto; margin:0 auto; }

/* keep beads a sensible size no matter how few rods are on screen */
.abacus-host .abacus-frame{
  max-width: min(100%, calc(var(--rods, 5) * 96px));
  margin-inline: auto;
}

/* ============================================================
   Concept overlays — the partner badge and the carry hop
   ============================================================ */

.pair-badge{ animation: pairPop .42s cubic-bezier(.2,1.7,.4,1) both; }
@keyframes pairPop{
  from{ opacity:0; transform:translateY(7px) scale(.86) }
  to{ opacity:1; transform:none }
}
.pair-bg{ fill:#FFF3D2; stroke:#F2B705; stroke-width:2; }
.pair-friend10 .pair-bg{ fill:#FFE6F3; stroke:#FF7BC0; }
.pair-split   .pair-bg{ fill:#E4F7FF; stroke:#39B7FF; }

.pair-text{
  font: 800 17px ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  fill:#5A4A22; letter-spacing:.3px;
}
.pair-friend10 .pair-text{ fill:#8A2560; }
.pair-split   .pair-text{ fill:#0F5779; }
.pair-text .pv-a{ fill:#E4572E; font-size:20px; }
.pair-text .pv-b{ fill:#2FA8A0; font-size:20px; }
.pair-text .pv-t{ fill:#6C4DF6; font-size:20px; }

.rod-link{ animation: pairPop .4s cubic-bezier(.2,1.7,.4,1) both; }
.link-arc{
  fill:none; stroke:#6C4DF6; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:5 6;
  animation: linkFlow 1s linear infinite;
}
@keyframes linkFlow{ to{ stroke-dashoffset:-22 } }
.link-head{ fill:#6C4DF6; }
.link-label{
  font: 800 15px ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  fill:#6C4DF6;
}