/* 20261017-abacus-score-rail-local-1 · local only.
 * Load after the frozen art sheets. The game still owns scores, bead count,
 * portraits and transitions. No frame/hand/deck/control geometry is changed.
 * Captions and rails share the actual two-column container, not the portrait.
 */

html:not([data-table-scenery="tea-table"]) #huxi-abacus .abacus-player[data-total-huxi]::after,
html[data-table-scenery="tea-table"] #huxi-abacus .abacus-player[data-total-huxi]::after {
  content: none;
}

/* Stretch only the invisible carrier to the player height. Centering its
 * existing 104px columns preserves every rod/bead's original vertical position,
 * and keeps the score at the former player-bottom anchor. Tea-table's more
 * specific absolute positioning remains unchanged. */
#huxi-abacus .abacus-digits {
  position: relative;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

/* Two 32px columns have 31px beads: inset each edge by (32 - 31) / 2.
 * The carrier supplies their live total width/gap, so scaling needs no offsets.
 * Keep the decorative background separate from the text to preserve baselines. */
html #huxi-abacus .abacus-digits[data-total-huxi]::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: calc((32px - 31px) / 2);
  right: calc((32px - 31px) / 2);
  height: 15px;
  z-index: 8;
  border-top: 1px solid var(--abacus-score-rule, #cf9d634d);
  border-bottom: 1px solid var(--abacus-score-rule, #cf9d634d);
  border-radius: 2px;
  background: var(--abacus-score-fill, #24160bb3);
  pointer-events: none;
}

html #huxi-abacus .abacus-digits[data-total-huxi]::after {
  content: attr(data-total-huxi) "胡";
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  width: auto;
  height: 15px;
  z-index: 9;
  color: var(--abacus-score-ink, #fbe4b2);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: max(12px, var(--abacus-total-font-size, 13px));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 13px;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 1px #08130ecc;
  white-space: nowrap;
  pointer-events: none;
}

/* Wooden beads are 24px inside the same 32px columns: use their real outline.
 * Leave the original wooden bottom frame and its carvings intact. */
html[data-table-scenery="tea-table"] #huxi-abacus .abacus-digits[data-total-huxi]::before {
  top: 101px;
  left: calc((32px - 24px) / 2);
  right: calc((32px - 24px) / 2);
  height: 17px;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-digits[data-total-huxi]::after {
  top: 101px;
  height: 17px;
  color: #f6e8c9;
  font-size: var(--abacus-total-font-size, 13px);
  font-weight: 700;
  line-height: 17px;
  text-shadow: 0 1px 2px #0b1b12e6;
}

html[data-abacus-form="tea-pavilion"] {
  --abacus-score-rule: #d6b47b59;
  --abacus-score-fill: #2a1b12c9;
  --abacus-score-ink: #f6e4c3;
}

html[data-abacus-form="celadon-moon"] {
  --abacus-score-rule: #b6ddcc73;
  --abacus-score-fill: #133d35e6;
  --abacus-score-ink: #eff8e9;
}

html[data-abacus-form="bronze-crest"] {
  --abacus-score-rule: #e1bb755e;
  --abacus-score-fill: #302317d9;
  --abacus-score-ink: #ffebbf;
}

html[data-abacus-form="bamboo-boat"] {
  --abacus-score-rule: #e0e4ad66;
  --abacus-score-fill: #1f4938d9;
  --abacus-score-ink: #f2f6d9;
}