/*
 * 湄潭大贰 · 20261003-abacus-forms-1
 * Real DOM skins for the live three-player score abacus and standalone settlement mini abacus.
 * Load after styles.css, tea-table-scenery.css and table theme styles. Toggle only
 * html[data-abacus-form="tea-pavilion"|"bamboo-boat"]. No score, bead coordinate,
 * input, frame box, portrait placement or hand/control geometry is changed.
 */

/* Keep the host's real total visible and align the 32px avatar with the fixed
 * crossbeam even if the candidate is previewed without tea-table scenery. */
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-player[data-total-huxi]::after,
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-player[data-total-huxi]::after {
  content: attr(data-total-huxi) "胡";
  position: absolute;
  top: 60px;
  left: calc(50% - 57px);
  width: 40px;
  color: #f6e8c9;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--abacus-total-font-size, 13px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 17px;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 2px #0b1b12e6;
  white-space: nowrap;
  pointer-events: none;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-name.avatar,
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-name.avatar {
  top: -7.5px;
}

/* A: 茶亭悬匾 — a carved walnut tea-house lintel rather than the existing rounded box. */
html[data-abacus-form="tea-pavilion"] #huxi-abacus {
  border-radius: 0;
  clip-path: polygon(0 100%, 0 25%, 3.5% 25%, 7.5% 0, 92.5% 0, 96.5% 25%, 100% 25%, 100% 100%);
  border-color: #987043;
  outline-color: transparent;
  background:
    linear-gradient(90deg, #e5bf8030, transparent 10% 90%, #e5bf8030),
    repeating-linear-gradient(94deg, #e9c6920a 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #9e764b 0, #6b472e 18%, #3d291f 46%, #281d18 100%);
  box-shadow: inset 0 2px 1px #f3d7a064, inset 0 -7px 8px #170e0aa3, inset 0 0 0 9px #22140e70, 0 5px 0 #39281b, 0 10px 18px #14241e66;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus::before {
  border-color: #2e2117;
  border-radius: 3px 3px 8px 8px;
  clip-path: polygon(0 100%, 0 21%, 4% 21%, 8% 0, 92% 0, 96% 21%, 100% 21%, 100% 100%);
  background: repeating-linear-gradient(91deg, #d2bd8a06 0 1px, transparent 1px 7px), linear-gradient(180deg, #213a2f, #0c211a);
  box-shadow: inset 0 7px 9px #07120d99, inset 0 -2px 1px #a89a6660;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus::after {
  border-color: #382318;
  border-radius: 2px;
  background: linear-gradient(180deg, #ca9a5c, #805736 28%, #452d20 100%);
  box-shadow: inset 0 1px 0 #f0d2a478, inset 0 -3px 2px #1f140d8c, 0 2px 4px #0719119e;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner {
  width: 12px; height: 12px; border-radius: 50%; filter: none;
  background: radial-gradient(circle at 35% 28%, #f2da9f, #9d713f 45%, #37271c 83%);
  box-shadow: 0 0 0 1px #22160e, inset 0 1px 1px #fff0bf81, 0 1px 2px #130d0a99;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner::before,
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner::after { display: none; }
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner.top-left { left: 33px; top: 11px; }
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner.top-right { right: 33px; top: 11px; }
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner.bottom-left { left: 12px; bottom: 9px; }
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-corner.bottom-right { right: 12px; bottom: 9px; }
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-rod {
  background: linear-gradient(90deg, #5b3b22, #c59b5d 43%, #7d5331 80%, #3d2a1e);
  box-shadow: inset 1px 0 #f4d3a370, 0 1px 2px #081a12a6;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-bead {
  border-color: #633e29;
  border-radius: 47% 47% 44% 44%;
  background: radial-gradient(ellipse at 31% 17%, #ffe3af9e, transparent 24%), repeating-linear-gradient(5deg, #e7b07817 0 1px, transparent 1px 5px), linear-gradient(180deg, #d3a16b 0 12%, #9f623d 47%, #613821 84%, #472719);
  box-shadow: inset 0 1px 1px #ffdda89c, inset 0 -3px 2px #2d180fa6, 0 2px 3px #0b1b149c;
}
html[data-abacus-form="tea-pavilion"] #huxi-abacus .abacus-name.avatar {
  color: #f7e9c8; border-color: #c3955a;
  background: linear-gradient(145deg, #7d5735, #30241c);
  box-shadow: inset 0 1px #f9deb773, inset 0 -2px 2px #20140d8f, 0 2px 3px #0d1c1580;
}
html[data-abacus-form="tea-pavilion"] .settlement-mini-abacus {
  border-radius: 0; clip-path: polygon(0 100%, 0 18%, 7% 18%, 13% 0, 87% 0, 93% 18%, 100% 18%, 100% 100%);
  border-color: #9d7446; background: linear-gradient(180deg, #9e764b, #5c3b28 35%, #30221b);
  box-shadow: inset 0 0 0 3px #ead0a04d, inset 0 -4px 4px #170d0a80, 0 5px 9px #17241c55;
}
html[data-abacus-form="tea-pavilion"] .settlement-mini-rods {
  border-color: #33251a; border-radius: 3px;
  background: linear-gradient(180deg, #20392c, #0b2119);
}
html[data-abacus-form="tea-pavilion"] .settlement-mini-rods::after { background: linear-gradient(#bc9055, #493020); }
html[data-abacus-form="tea-pavilion"] .settlement-mini-rod { background: linear-gradient(90deg, #684328, #d1aa6d 45%, #57371f); }
html[data-abacus-form="tea-pavilion"] .settlement-mini-bead {
  border-color: #68412b; background: radial-gradient(ellipse at 32% 15%, #ffdfaa85, transparent 22%), linear-gradient(#c18a57, #825033 55%, #4d2c1d);
}
html[data-abacus-form="tea-pavilion"] .settlement-mini-title { color: #f6d9a6; }

/* B: 竹叶长舟 — pointed woven-bamboo chassis, reed rails and pale jade knots. */
html[data-abacus-form="bamboo-boat"] #huxi-abacus {
  border-radius: 0;
  clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0 50%);
  border-color: #8a7547;
  outline-color: transparent;
  background:
    repeating-linear-gradient(90deg, #f9e6b418 0 2px, transparent 2px 19px),
    repeating-linear-gradient(3deg, #3d4b2810 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #e6d19a, #ad9962 28%, #685f3d 70%, #48452d);
  box-shadow: inset 0 3px 2px #fff3d89c, inset 0 -5px 5px #1f2a1670, inset 0 0 0 8px #4d563398, 0 6px 14px #12241867;
}
html[data-abacus-form="bamboo-boat"] #huxi-abacus::before {
  border-color: #596d49;
  border-radius: 3px;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
  background: repeating-linear-gradient(90deg, #cee4a909 0 1px, transparent 1px 11px), linear-gradient(180deg, #2b5142, #112e24);
  box-shadow: inset 0 7px 9px #071d14a3, inset 0 -1px #dce9b557;
}
html[data-abacus-form="bamboo-boat"] #huxi-abacus::after {
  border-color: #6e5b38; border-radius: 8px;
  background: repeating-linear-gradient(90deg, #fff2cb1c 0 2px, transparent 2px 21px), linear-gradient(180deg, #bca977, #796e45 60%, #484c2f);
  box-shadow: inset 0 1px #fff5d1a3, inset 0 -3px 2px #36402b8c, 0 2px 3px #071a1390;
}
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner {
  width: 11px; height: 11px; border-radius: 50%; filter: none;
  background: radial-gradient(circle at 34% 29%, #f2e2b5, #947b4b 55%, #4d442d);
  box-shadow: 0 0 0 1px #45543c, inset 0 1px #fff5ca91;
}
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner::before,
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner::after { display: none; }
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner.top-left { left: 52px; top: 10px; }
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner.top-right { right: 52px; top: 10px; }
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner.bottom-left { left: 52px; bottom: 10px; }
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-corner.bottom-right { right: 52px; bottom: 10px; }
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-rod {
  background: linear-gradient(90deg, #43553a, #e2d19a 44%, #7b8054 78%, #344b38);
  box-shadow: inset 1px 0 #fff4c68c, 0 0 2px #061c1375;
}
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-bead {
  border-color: #5f795a;
  border-radius: 8px 8px 6px 6px;
  background: radial-gradient(ellipse at 32% 15%, #ffffffa1, transparent 23%), linear-gradient(180deg, #e5e7c4 0 15%, #b5c69a 48%, #5f866b 84%, #385c4b);
  box-shadow: inset 0 1px #ffffffbd, inset 0 -3px 2px #2448388a, 0 2px 3px #061f168c;
}
html[data-abacus-form="bamboo-boat"] #huxi-abacus .abacus-name.avatar {
  color: #f7f1d9; border-color: #bcc996;
  background: linear-gradient(145deg, #618369, #284938);
  box-shadow: inset 0 1px #fff4cb93, inset 0 -2px 2px #1d3e32a3, 0 2px 3px #061e138a;
}
html[data-abacus-form="bamboo-boat"] .settlement-mini-abacus {
  border-radius: 0; clip-path: polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%);
  border-color: #9e8b59; background: repeating-linear-gradient(90deg, #fff2cc20 0 2px, transparent 2px 13px), linear-gradient(180deg, #d8c38b, #7d784d 60%, #4c5739);
  box-shadow: inset 0 0 0 3px #fff5cb4a, inset 0 -4px 4px #28321f70, 0 5px 9px #12251b62;
}
/* The 112px settlement case is narrower than the usual 126/144px case.
 * Widen only its bottom edge so the two outer lower beads remain uncut. */
html[data-abacus-form="bamboo-boat"] .winner-settlement-meta.has-victory-method .settlement-mini-abacus {
  clip-path: polygon(13% 0, 87% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
html[data-abacus-form="bamboo-boat"] .settlement-mini-rods {
  border-color: #556949; background: linear-gradient(180deg, #2b503f, #0f2c22);
}
html[data-abacus-form="bamboo-boat"] .settlement-mini-rods::after { background: linear-gradient(#b8ad7b, #536547); }
html[data-abacus-form="bamboo-boat"] .settlement-mini-rod { background: linear-gradient(90deg, #577151, #e2ddb0 45%, #53674e); }
html[data-abacus-form="bamboo-boat"] .settlement-mini-bead {
  border-color: #698869; border-radius: 5px 5px 4px 4px;
  background: radial-gradient(ellipse at 32% 13%, #ffffffa3, transparent 22%), linear-gradient(#d9e2bf, #a1bc94 55%, #567d62);
}
html[data-abacus-form="bamboo-boat"] .settlement-mini-title { color: #f4f0d4; }