/*
 * Native abacus form candidates | 2026-10-03
 * Import after styles.css, tea-table-scenery.css and any legacy table-theme CSS.
 * The host switches only html[data-abacus-form]; no DOM replacement is needed.
 * The shape occupies the game's existing 492×132 (clamp 438–492) slot and
 * inherits its padding, bead positions, transitions, score source and controls.
 * data-total-huxi is supplied by the real game; these styles only display it.
 * Removing data-abacus-form restores the selected baseline/scenery stylesheet.
 *
 * celadon-moon: hand-glazed tea ceramic, softly arched moon-tray frame.
 * bronze-crest: chamfered eight-sided tea-house crest, antiqued bronze + wood.
 */

/* Shared, non-layout score treatment. It is also available when the tea-table
 * scenery is not selected, and intentionally uses the actual total rather than
 * inferring a number from the two bead columns. */
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-player[data-total-huxi]::after,
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-player[data-total-huxi]::after {
  content: attr(data-total-huxi) "胡";
  position: absolute;
  top: 60px;
  left: calc(50% - 57px);
  width: 40px;
  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;
  white-space: nowrap;
  pointer-events: none;
}

/* The crossbeam midpoint is unchanged. Absolute top avoids applying the
 * historical -7.5px correction twice when the tea-table sheet is present. */
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-name.avatar,
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-name.avatar {
  top: -7.5px;
}

/* ── A. 青瓷月盘 ───────────────────────────────────────────
 * The broad end arcs and nested arched recess change the actual silhouette,
 * while leaving the rectangular interior required by live rods intact. */
html[data-abacus-form="celadon-moon"] #huxi-abacus {
  border-color: #d0e5d7;
  border-radius: 85px 85px 72px 72px / 34px 34px 31px 31px;
  outline: 2px solid #fff0cf;
  outline-offset: -9px;
  background:
    radial-gradient(ellipse 43% 85% at 50% -20%, #fffdf2b3, transparent 70%),
    repeating-linear-gradient(112deg, #ffffff12 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #e1efe3 0%, #adcac0 17%, #5e9f90 53%, #317064 82%, #1f504a 100%);
  box-shadow:
    inset 0 2px 1px #ffffffb3,
    inset 0 -6px 7px #16483f9c,
    inset 0 0 0 8px #d7ebe052,
    0 4px 0 #1d4a40,
    0 9px 17px #1028209c;
}

html[data-abacus-form="celadon-moon"] #huxi-abacus::before {
  border-color: #3c726a;
  border-radius: 63px 63px 46px 46px / 25px 25px 22px 22px;
  background:
    radial-gradient(ellipse 85% 48% at 50% -5%, #d2e7d01a, transparent 85%),
    repeating-linear-gradient(110deg, #beddd00a 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #163b37, #0e2527 76%);
  box-shadow:
    inset 0 6px 11px #071719a8,
    inset 0 -1px #d7efe04d,
    0 1px 0 #f0f8de80;
}

html[data-abacus-form="celadon-moon"] #huxi-abacus::after {
  border-color: #376b61;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff80 0 1px, transparent 3px),
    linear-gradient(180deg, #d2e7d9 0%, #83b5a5 36%, #4a897b 76%, #22564f);
  box-shadow:
    inset 0 -3px 2px #19483f87,
    0 2px 4px #04191b91,
    0 -1px #fbfff0ba;
}

html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner {
  width: 19px;
  height: 19px;
  filter: drop-shadow(0 1px 1px #102c2770);
}
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner.top-left { left: 22px; top: 11px; }
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner.top-right { right: 22px; top: 11px; }
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner.bottom-left { left: 22px; bottom: 10px; }
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner.bottom-right { right: 22px; bottom: 10px; }
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner::before {
  inset: 1px;
  border: 1px solid #a5d5c3;
  border-radius: 50%;
  transform: none;
  background: radial-gradient(circle at 32% 25%, #fff9dd, #8cbcae 48%, #39786b 87%);
  box-shadow: inset 0 -2px 2px #25534870, 0 0 0 1px #23554c80;
}
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-corner::after {
  left: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
  border: 0;
  background: #f5e7b7;
  box-shadow: 0 0 0 1px #3c786a99;
}

html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-rod {
  background: linear-gradient(90deg, #476e63, #e7e9ba 45%, #799a77 75%, #31544f);
  box-shadow: inset 1px 0 #fffce7a3, 0 0 3px #061e1a85;
}
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-bead {
  border-color: #659b8a;
  background:
    radial-gradient(ellipse at 32% 16%, #ffffffed, transparent 19%),
    linear-gradient(180deg, #f1f7e5 0 12%, #bddfc9 39%, #81bda9 65%, #4c8d80 100%);
  box-shadow:
    inset 0 1px 1px #ffffffbf,
    inset 0 -3px 2px #2f75628c,
    0 2px 3px #051e1ea8;
}
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-bead.is-changing {
  box-shadow:
    inset 0 1px 1px #ffffff,
    inset 0 -3px 2px #2f75628c,
    0 0 6px #e4f3c38c,
    0 2px 3px #051e1ea8;
}
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-name.avatar {
  color: #f6f6d9;
  border-color: #b6dcca;
  background: linear-gradient(145deg, #376f65, #19443f);
  text-shadow: 0 1px 2px #0d2926;
  box-shadow: inset 0 1px #f5fff49c, 0 2px 3px #041b1a85;
}
html[data-abacus-form="celadon-moon"] #huxi-abacus .abacus-player[data-total-huxi]::after {
  color: #e6f3df;
  text-shadow: 0 1px 2px #081d1de8;
}

/* ── B. 古铜茶徽 ───────────────────────────────────────────
 * Eight straight chamfers replace the rounded case. The shallow cut corners
 * keep the live rods, portrait and label inside the exact original box. */
html[data-abacus-form="bronze-crest"] #huxi-abacus {
  border-color: #c49d5f;
  border-radius: 0;
  outline: none;
  clip-path: polygon(0 24px, 22px 0, calc(100% - 22px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 24px));
  background:
    radial-gradient(ellipse 34% 95% at 50% -18%, #f2c98a66, transparent 75%),
    repeating-linear-gradient(88deg, #f8db9620 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #8f7146 0%, #bd985c 12%, #745835 22%, #533e2c 70%, #2a241e 100%);
  box-shadow:
    inset 0 2px 1px #f3d59d8c,
    inset 0 -6px 8px #1b1714bd,
    inset 0 0 0 7px #463820aa,
    0 4px 0 #281d15,
    0 9px 17px #0b1712ba;
  filter: drop-shadow(0 5px 6px #0819108c);
}
html[data-abacus-form="bronze-crest"] #huxi-abacus::before {
  border-color: #937345;
  border-radius: 0;
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  background:
    repeating-linear-gradient(96deg, #b0a2780b 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at 50% 10%, #745b371f, transparent 60%),
    linear-gradient(180deg, #31382c, #16271e 73%, #15241e);
  box-shadow: inset 0 8px 10px #060e0ca8, inset 0 -1px #c2a9724d;
}
html[data-abacus-form="bronze-crest"] #huxi-abacus::after {
  border-color: #39281b;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #efcd8b80 0 1px, transparent 2px),
    repeating-linear-gradient(90deg, #d6b17118 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #a8854f 0%, #755731 45%, #4c3523 100%);
  box-shadow: inset 0 -3px 2px #261c17c7, 0 2px 4px #0a161296, 0 -1px #dfbf7d80;
}

html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 1px #1c150ca6);
}
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner.top-left { left: 18px; top: 8px; }
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner.top-right { right: 18px; top: 8px; }
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner.bottom-left { left: 18px; bottom: 8px; }
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner.bottom-right { right: 18px; bottom: 8px; }
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner::before {
  inset: 1px;
  border: 1px solid #e0ba77;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(145deg, #e1be79, #8d693b 56%, #4a3824);
  box-shadow: inset 0 1px #f6d8969e, 0 1px 2px #1a170c80;
}
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-corner::after {
  left: 6px;
  top: 6px;
  width: 4px;
  height: 4px;
  border: 0;
  background: #eee0a7;
  box-shadow: 0 0 0 1px #5d492b;
}

html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-rod {
  background: linear-gradient(90deg, #3c3124, #d7b16d 44%, #84653b 76%, #33291e);
  box-shadow: inset 1px 0 #fff2bd73, 0 0 3px #0a110d9e;
}
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-bead {
  border-color: #684c2c;
  background:
    radial-gradient(ellipse at 31% 15%, #ffe6b890, transparent 20%),
    repeating-linear-gradient(7deg, #f3c48d20 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #d5a76c 0 13%, #b67d47 41%, #82512f 77%, #5a3625);
  box-shadow: inset 0 1px 1px #fbe2a88f, inset 0 -3px 2px #38251cb0, 0 2px 3px #07130fb3;
}
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-bead.is-changing {
  box-shadow:
    inset 0 1px 1px #ffe9bbcf,
    inset 0 -3px 2px #38251cb0,
    0 0 6px #eac0778c,
    0 2px 3px #07130fb3;
}
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-name.avatar {
  color: #f9e3ac;
  border-color: #cbaa6a;
  background: linear-gradient(145deg, #685136, #302b22);
  text-shadow: 0 1px 2px #141b14;
  box-shadow: inset 0 1px #ffe0a587, 0 2px 3px #07130f99;
}
html[data-abacus-form="bronze-crest"] #huxi-abacus .abacus-player[data-total-huxi]::after {
  color: #fae6ba;
  text-shadow: 0 1px 2px #101a13f0;
}

/* Settlement uses the same selected material, but keeps every 126/144/112px
 * responsive size, 70px rod row, inline bead top, entry animation and value. */
html[data-abacus-form="celadon-moon"] .settlement-mini-abacus {
  border-color: #d0e5d7;
  border-radius: 24px 24px 18px 18px / 18px 18px 13px 13px;
  background: linear-gradient(180deg, #e0ece0, #78a99a 43%, #326d63);
  box-shadow: inset 0 1px #fffcedcc, inset 0 -3px 4px #1b514884, 0 5px 9px #11282175;
}
html[data-abacus-form="celadon-moon"] .settlement-mini-title {
  color: #173f38;
  text-shadow: 0 1px #ffffffa8;
}
html[data-abacus-form="celadon-moon"] .settlement-mini-rods {
  border-color: #477a6f;
  border-radius: 13px 13px 9px 9px / 9px 9px 7px 7px;
  background: linear-gradient(180deg, #183b38, #0a2525);
}
html[data-abacus-form="celadon-moon"] .settlement-mini-rods::after {
  background: linear-gradient(180deg, #d6e8d9, #74aa9a 47%, #3c786b);
}
html[data-abacus-form="celadon-moon"] .settlement-mini-rod {
  background: linear-gradient(90deg, #4c786d, #e5eabc 47%, #648d78);
}
html[data-abacus-form="celadon-moon"] .settlement-mini-bead {
  border-color: #629b8b;
  background: radial-gradient(ellipse at 34% 16%, #ffffffed, transparent 20%), linear-gradient(180deg, #f0f7e5, #a8d6bd 48%, #549a86);
  box-shadow: inset 0 -2px 2px #236d5c8f, 0 2px 2px #041b1b9c;
}

html[data-abacus-form="bronze-crest"] .settlement-mini-abacus {
  border-color: #c39a58;
  border-radius: 0;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
  background: linear-gradient(180deg, #b99657, #6a5132 36%, #2e2921);
  box-shadow: inset 0 1px #f6d697a6, inset 0 -3px 4px #1e1a15a3, 0 5px 9px #11190f80;
  filter: drop-shadow(0 2px 2px #0b170e80);
}
html[data-abacus-form="bronze-crest"] .settlement-mini-title {
  color: #f7db9a;
  text-shadow: 0 1px 1px #241b16;
}
html[data-abacus-form="bronze-crest"] .settlement-mini-rods {
  border-color: #594225;
  border-radius: 2px;
  background: linear-gradient(180deg, #30392b, #10231c);
}
html[data-abacus-form="bronze-crest"] .settlement-mini-rods::after {
  background: linear-gradient(180deg, #c6a56d, #705334 52%, #412f22);
}
html[data-abacus-form="bronze-crest"] .settlement-mini-rod {
  background: linear-gradient(90deg, #443421, #dbb66c 45%, #86643a);
}
html[data-abacus-form="bronze-crest"] .settlement-mini-bead {
  border-color: #6b4c2d;
  background: radial-gradient(ellipse at 34% 16%, #ffe2ab9e, transparent 20%), linear-gradient(180deg, #d4a267, #a76f3d 48%, #684128);
  box-shadow: inset 0 -2px 2px #3b271ab3, 0 2px 2px #08130d9e;
}