/* ============================================================
   ABACUS COMPONENT STYLING (Safe with Tailwind)
============================================================ */

.abacus-rod {
  position: relative;
  height: 180px;
}

.abacus-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.abacus-wire {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 5px;
  background: #2a1a10;
}

.abacus-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.abacus-zone-heaven { top: 0; height: 35%; }
.abacus-zone-earth  { bottom: 0; height: 55%; }

.abacus-bead {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 5px 8px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.8);
  transition: top .12s cubic-bezier(.15,.85,.25,1.15);
  touch-action: none;
  user-select: none;
}

.abacus-bead-heaven {
  background: radial-gradient(100% 100% at 30% 28%, #d9d2ff 0%, #8b5cf6 70%);
}
.abacus-bead-earth {
  background: radial-gradient(100% 100% at 30% 28%, #ffd3ea 0%, #f472b6 75%);
}