.abacus-plugin-instance{
  --wood-dark:#3e2417;
  --wood-mid:#6b3f22;
  --wood-light:#8a5a34;
  --frame-edge:#241209;
  --rod-color:#d8bc8f;
  --heaven-1:#e0a94a;
  --heaven-2:#8a5a10;
  --earth-1:#b04d35;
  --earth-2:#5e2015;
  --screen-bg:#101a14;
  --screen-fg:#7CFC9A;
  --paper:#f4ead9;
  --bead-shape:50%;
  --bead-clip:none;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  width:100%;
  margin:1.5em auto;
  box-sizing:border-box;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.abacus-plugin-instance *{ box-sizing:border-box; }

.abacus-plugin-instance[data-theme="rosewood"]{
  --wood-dark:#4a1414;
  --wood-mid:#7a2626;
  --wood-light:#9a3b3b;
  --frame-edge:#2c0c0c;
  --rod-color:#e6c6a0;
}
.abacus-plugin-instance[data-theme="ebony"]{
  --wood-dark:#171512;
  --wood-mid:#2b2723;
  --wood-light:#403a33;
  --frame-edge:#0a0908;
  --rod-color:#b9a37c;
}
/* "Classic" — matches a real black-frame student soroban with orange
   lens-shaped beads, black bar, and white unit/grouping dots. */
.abacus-plugin-instance[data-theme="classic"]{
  --wood-dark:#141414;
  --wood-mid:#1c1c1c;
  --wood-light:#262626;
  --frame-edge:#050505;
  --rod-color:#3a3a3a;
  --heaven-1:#f0742a;
  --heaven-2:#9c3d10;
  --earth-1:#f0742a;
  --earth-2:#9c3d10;
  --bead-clip:polygon(18% 0%, 82% 0%, 100% 50%, 82% 100%, 18% 100%, 0% 50%);
}

.ap-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 2px 8px;
  flex-wrap:wrap;
}
.ap-btn{
  appearance:none;
  border:1px solid var(--wood-mid);
  background:var(--paper);
  color:var(--wood-dark);
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
}
.ap-btn:hover{ filter:brightness(0.97); }
.ap-btn:active{ transform:scale(0.96); }
.ap-fs-icon{
  width:11px; height:11px;
  display:inline-block;
  border:2px solid var(--wood-dark);
  border-radius:2px;
}
.ap-sound-icon{
  font-size:16px;
  line-height:1;
}
.ap-btn-prominent{
  font-size:14px;
  padding:10px 16px;
  border-width:2px;
  border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.ap-btn.ap-sound{
  background:#2f8f4e;
  border-color:#1f6b38;
  color:#ffffff;
}
.ap-btn.ap-sound:hover{ background:#357f47; }
.ap-btn.ap-sound.muted{
  background:#8a8f94;
  border-color:#6d7276;
  color:#ffffff;
}
.ap-btn.ap-sound.muted:hover{ background:#7c8388; }

/* Pause / stop-live-counting button, shown on the result screen itself */
.ap-pause{
  appearance:none;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);
  color:var(--screen-fg);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
.ap-pause:hover{ background:rgba(255,255,255,0.14); }
.ap-pause-icon{
  width:9px; height:11px;
  display:inline-block;
  position:relative;
}
.ap-pause-icon::before, .ap-pause-icon::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:3px;
  background:var(--screen-fg);
}
.ap-pause-icon::before{ left:0; }
.ap-pause-icon::after{ right:0; }
.ap-pause.is-paused .ap-pause-icon{
  border-left:9px solid var(--screen-fg);
  border-top:5.5px solid transparent;
  border-bottom:5.5px solid transparent;
  width:0; height:0;
}
.ap-pause.is-paused .ap-pause-icon::before,
.ap-pause.is-paused .ap-pause-icon::after{ content:none; }

/* Practice mode panel */
.ap-practice-icon{
  width:10px; height:10px;
  display:inline-block;
  border-radius:50%;
  border:2px solid var(--wood-dark);
  position:relative;
}
.ap-practice-icon::after{
  content:"";
  position:absolute;
  left:50%; top:-4px;
  width:2px; height:5px;
  background:var(--wood-dark);
  transform:translateX(-50%);
}
.ap-btn.ap-practice-toggle[aria-pressed="true"]{
  background:var(--wood-dark);
  color:var(--paper);
}
.ap-btn.ap-practice-toggle[aria-pressed="true"] .ap-practice-icon,
.ap-btn.ap-practice-toggle[aria-pressed="true"] .ap-practice-icon::after{
  border-color:var(--paper);
  background-color:var(--paper);
}

.ap-practice-panel{
  background:#fffaf1;
  border:1px solid var(--wood-mid);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:10px;
}
.ap-practice-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.ap-practice-target{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ap-practice-target .ap-label{
  font-size:11px;
  letter-spacing:1px;
  color:var(--wood-mid);
  font-weight:700;
  text-transform:uppercase;
}
.ap-target-value{
  font-family:"Courier New",monospace;
  font-size:clamp(22px,5vw,30px);
  font-weight:700;
  color:var(--wood-dark);
  letter-spacing:1px;
}
.ap-practice-difficulty{
  font-size:12px;
  font-weight:600;
  color:var(--wood-mid);
  display:flex;
  align-items:center;
  gap:6px;
}
.ap-practice-difficulty select{
  font-size:13px;
  padding:4px 6px;
  border-radius:6px;
  border:1px solid var(--wood-mid);
  background:#fff;
}
.ap-practice-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.ap-practice-feedback{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  min-height:1.2em;
}
.ap-practice-feedback.correct{ color:#1c7d3e; }
.ap-practice-feedback.incorrect{ color:#a3271c; }

.ap-screen{
  background:var(--screen-bg);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:10px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.ap-screen .ap-label-value{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ap-screen .ap-label{
  font-size:11px;
  letter-spacing:1.5px;
  color:#4c8a5e;
  font-weight:700;
  text-transform:uppercase;
}
.ap-screen .ap-value{
  font-family:"Courier New",monospace;
  font-size:clamp(24px,6vw,34px);
  font-weight:700;
  color:var(--screen-fg);
  text-shadow:0 0 6px rgba(124,252,154,0.55);
  letter-spacing:1px;
  word-break:break-all;
}
.ap-screen.ap-screen-frozen .ap-value{
  color:rgba(124,252,154,0.18);
  text-shadow:none;
}
.ap-screen.ap-screen-frozen::after{
  content:"live count paused";
  font-size:11px;
  color:rgba(255,255,255,0.4);
  font-style:italic;
}

.ap-frame{
  position:relative;
  background:
    repeating-linear-gradient(95deg, rgba(0,0,0,0.06) 0px, transparent 3px, transparent 7px),
    linear-gradient(180deg, var(--wood-light), var(--wood-mid) 45%, var(--wood-dark) 100%);
  border:10px solid var(--frame-edge);
  border-radius:10px;
  padding:16px 10px 20px;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.4),
    inset 0 0 30px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.06);
}
.ap-frame::before, .ap-frame::after{
  content:"";
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f3d98b, #8a6a2a 80%);
  box-shadow:0 1px 2px rgba(0,0,0,0.6);
  top:-4px;
}
.ap-frame::before{ left:-4px; }
.ap-frame::after{ right:-4px; }

.ap-bar{
  position:absolute;
  left:8px; right:8px;
  top:var(--bar-top, 62px);
  height:9px;
  background:linear-gradient(180deg,#171310,#000);
  box-shadow:0 2px 5px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius:3px;
  z-index:3;
}
/* Unit / grouping dots on the reckoning bar — positioned by JS */
.ap-bar-dot{
  position:absolute;
  top:50%;
  width:5px; height:5px;
  border-radius:50%;
  background:#f2f2f2;
  box-shadow:0 0 2px rgba(0,0,0,0.6);
  transform:translate(-50%,-50%);
}
.ap-bar-dot-unit{
  width:7px; height:7px;
  background:#ffffff;
  box-shadow:0 0 0 2px rgba(255,255,255,0.25), 0 0 3px rgba(0,0,0,0.6);
}
/* Faint highlight on the unit rod itself so it reads as "rod #1" */
.ap-rod-unit::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  background:rgba(255,255,255,0.035);
  pointer-events:none;
}

.ap-rods{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:2px;
}

.ap-rod{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ap-rod-stick{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:4px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#5c3d20,var(--rod-color) 45%,#5c3d20);
  border-radius:2px;
  box-shadow:0 0 2px rgba(0,0,0,0.5);
}

.ap-heaven-zone, .ap-earth-zone{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:2;
}
.ap-heaven-zone{ height:44px; justify-content:flex-start; }
.ap-earth-zone{ height:112px; justify-content:flex-end; }

.ap-bead{
  width:clamp(14px,7vw,26px);
  height:clamp(11px,5.5vw,20px);
  border-radius:var(--bead-shape);
  clip-path:var(--bead-clip);
  position:relative;
  cursor:pointer;
  transition:transform 0.15s cubic-bezier(.4,0,.2,1), filter 0.1s ease;
  flex:0 0 auto;
}
.ap-bead::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:rgba(0,0,0,0.18);
  transform:translateY(-50%);
}
.ap-bead::after{
  content:"";
  position:absolute;
  top:14%; left:20%;
  width:34%; height:22%;
  background:rgba(255,255,255,0.6);
  border-radius:50%;
  filter:blur(1px);
}
.ap-bead.heaven{
  background:radial-gradient(circle at 35% 30%, var(--heaven-1), var(--heaven-2) 78%);
  box-shadow:0 2px 3px rgba(0,0,0,0.55), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ap-bead.earth{
  background:radial-gradient(circle at 35% 30%, var(--earth-1), var(--earth-2) 78%);
  box-shadow:0 2px 3px rgba(0,0,0,0.55), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ap-bead.pressed{ filter:brightness(0.9); }
.ap-bead.touching{ filter:brightness(1.08); transform:scale(1.06) !important; }

.ap-placevalue{
  margin-top:6px;
  font-size:9px;
  color:rgba(255,255,255,0.35);
  font-family:monospace;
}
.ap-rod-unit .ap-placevalue{
  color:rgba(255,255,255,0.65);
  font-weight:700;
}

/* Full screen mode — the whole instance becomes the viewport */
.abacus-plugin-instance:fullscreen,
.abacus-plugin-instance:-webkit-full-screen{
  max-width:100%;
  width:100%;
  height:100%;
  background:#1b100a;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px;
  margin:0;
}
.abacus-plugin-instance:fullscreen .ap-frame,
.abacus-plugin-instance:-webkit-full-screen .ap-frame{
  flex:1;
  display:flex;
  align-items:center;
}
.abacus-plugin-instance:fullscreen .ap-rods,
.abacus-plugin-instance:-webkit-full-screen .ap-rods{
  width:100%;
}

@media (max-width:480px){
  .ap-screen .ap-value{ font-size:22px; }
  .ap-btn{ padding:7px 10px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  .ap-bead{ transition:none; }
}