/*
 * Tea table local candidate · 20261004-abacus-rounded-local-1
 * Load AFTER styles.css, player-profile.css and every table-theme stylesheet.
 * Enable with html[data-table-scenery="tea-table"]. Removing that attribute restores the
 * existing selected theme. This sheet never changes data-table-theme tokens.
 *
 * The host owns data-scene-active-seat="self|left|right" and must clear it when no
 * player is acting. It must use actual game state, not a bead's .active class.
 *
 * Existing frame/table geometry, clipping, stacking, cards, hand columns,
 * glyphs, existing huxi badges, controls and input behavior are untouched.
 * Only the abacus internal paint geometry is adjusted for four distinct beads.
 * Abacus number labels read only the existing live data-total-huxi attribute;
 * they never calculate, clamp or change the underlying score or bead layout.
 */

html[data-table-scenery="tea-table"] body {
  background-color: #19372b;
  background-image: url("./assets/game-art/20260930-tea-table-runtime/tea-table-scene.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Reveal the single scene behind the established board. Do not add borders,
 * clipping or a second scaled copy of the background to these containers. */
html[data-table-scenery="tea-table"] .game-frame,
html[data-table-scenery="tea-table"][data-game-frame-fit="scaled"] .game-frame,
html[data-table-scenery="tea-table"] .top-scene,
html[data-table-scenery="tea-table"] .table,
html[data-table-scenery="tea-table"] .table-glow {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-table-scenery="tea-table"] .top-scene::before,
html[data-table-scenery="tea-table"] .top-scene::after {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Approved concept, not a CSS approximation: exact reference outer wood and
 * copper ornaments overlay an empty backing. Scores, portraits and all 30
 * beads remain live DOM. The outer 492×132 box is the established game box. */
html[data-table-scenery="tea-table"] #huxi-abacus {
  padding: 0 35px;
  gap: 0;
  border: 0;
  border-radius: 15px;
  outline: none;
  background: none;
  box-shadow: 0 4px 8px #10201666;
}

html[data-table-scenery="tea-table"] #huxi-abacus::before {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: url("./assets/game-art/20261003-tea-abacus/clean-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  pointer-events: none;
}

html[data-table-scenery="tea-table"] #huxi-abacus::after {
  inset: 0;
  height: auto;
  z-index: 8;
  border: 0;
  border-radius: inherit;
  background: url("./assets/game-art/20261003-tea-abacus/reference-frame.png") center / 100% 100% no-repeat;
  /* Mask out every baked bead, badge, score and actor highlight. Original
   * outer rails and side carvings retain their original pixels. */
  --frame-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 492 132' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' d='M16 0H476Q492 0 492 16V116Q492 132 476 132H16Q0 132 0 116V16Q0 0 16 0Z M35 8H457V127H35Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
  mask: var(--frame-mask) center / 100% 100% no-repeat;
  box-shadow: none;
  pointer-events: none;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-corner {
  display: none;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-player {
  height: 132px;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-digits {
  position: absolute;
  top: 0;
  left: 42px;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-rod {
  top: 14px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(90deg, #6b5434, #c5aa74 44%, #8a6c42 76%, #4d3d28);
  box-shadow: inset 1px 0 #e7d3a333, 0 0 2px #0c1b1459;
  /* The real crossbeam covers each rod, rather than a rod painting over it. */
  -webkit-mask-image: linear-gradient(#000 0 28px, transparent 28px 39px, #000 39px);
  mask-image: linear-gradient(#000 0 28px, transparent 28px 39px, #000 39px);
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead {
  width: 24px;
  height: 10px;
  border: 0;
  background: url("./assets/game-art/20261003-tea-abacus/wood-bead.png") center / 100% 100% no-repeat;
  box-shadow: 0 1px 2px #020c0980;
}

/* Restore a rounded wooden bead instead of vertically crushing the texture.
 * The existing active flag is the only counting source. Four 10px beads sit
 * edge-to-edge; the inactive group rests 4px farther from the beam. Their
 * bottom never passes y=97, before the live score at y=101. No score math or
 * original inline positions change, and other skins do not use this paint. */
html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.lower {
  --tea-bead-rest-y: 57px;
  --tea-bead-step: 10px;
  top: calc(var(--tea-bead-rest-y) + var(--tea-bead-index) * var(--tea-bead-step)) !important;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.lower.active {
  --tea-bead-rest-y: 53px;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.lower[data-lower="0"] {
  --tea-bead-index: 0;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.lower[data-lower="1"] {
  --tea-bead-index: 1;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.lower[data-lower="2"] {
  --tea-bead-index: 2;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.lower[data-lower="3"] {
  --tea-bead-index: 3;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-bead.upper {
  top: calc(var(--abacus-bead-y) * 1px + 10px) !important;
  height: 11px;
}

html[data-table-scenery="tea-table"] #huxi-abacus .abacus-name.avatar {
  position: absolute;
  top: 33px;
  left: 0;
  color: #f5e5c4;
  border-color: #9b8051;
  background:
    radial-gradient(ellipse at 38% 12%, #e5c58b29, transparent 60%),
    linear-gradient(145deg, #5c452d, #352b1e);
  text-shadow: 0 1px 1px #1c2116cc;
  box-shadow: inset 0 1px #e9d3a54d, inset 0 -2px 2px #251d1559, 0 2px 3px #0c211766;
}

/* Live score centered below each group, exactly in the original score strip.
 * Actual totals, including 100+, are not clamped to the two-digit bead range. */
html[data-table-scenery="tea-table"] #huxi-abacus .abacus-player[data-total-huxi]::after {
  content: attr(data-total-huxi) "胡";
  position: absolute;
  top: 101px;
  left: calc(50% - 20px);
  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;
}

/* Seat-only styling preserves the 58px portrait boxes and all text geometry.
 * The square mini portraits inside the abacus are deliberately separate. */
html[data-table-scenery="tea-table"] .table > :is(.seat-left, .seat-right, .my-seat) {
  background: linear-gradient(110deg, #182d24e0, #24392bdd);
  box-shadow: inset 0 0 0 1px #c2ac733d, 0 3px 8px #14261d33;
}

html[data-table-scenery="tea-table"] .table > :is(.seat-left, .seat-right, .my-seat) > .avatar {
  position: relative;
  border-radius: 50%;
  border-color: #ad905e;
  background:
    radial-gradient(ellipse at 34% 15%, #d1b07533, transparent 57%),
    linear-gradient(150deg, #5b6542, #2a422e);
  color: #f9ebd0;
  text-shadow: 0 1px 2px #182a1de6;
  box-shadow: inset 0 1px #e3d1a54d, inset 0 -3px 5px #16291c66, 0 2px 4px #15251c59;
}

html[data-table-scenery="tea-table"] .table > .seat-right > .avatar {
  background:
    radial-gradient(ellipse at 34% 15%, #e2bf8438, transparent 57%),
    linear-gradient(150deg, #766042, #4a3b29);
}

html[data-table-scenery="tea-table"] .table > .my-seat > .avatar {
  background:
    radial-gradient(ellipse at 34% 15%, #d8c58c2e, transparent 57%),
    linear-gradient(150deg, #466247, #233e2b);
}

html[data-table-scenery="tea-table"] .table > :is(.seat-left, .seat-right, .my-seat) > .avatar > .player-profile-portrait {
  border-radius: 50%;
}

html[data-table-scenery="tea-table"] .table > :is(.seat-left, .seat-right, .my-seat) > .seat-info .seat-name {
  color: #f5ecd7;
  text-shadow: 0 1px 2px #142219cc;
}

html[data-table-scenery="tea-table"] .table > :is(.seat-left, .seat-right, .my-seat) > .seat-info .seat-score {
  color: #d9c797;
  text-shadow: 0 1px 2px #142219cc;
}

/* Remove the older whole-seat glow only in this candidate. The authoritative
 * host-provided data-scene-active-seat is the sole source of the new action ring. */
html[data-table-scenery="tea-table"][data-game-mode="online"] .table > :is(.seat-left, .seat-right, .my-seat).online-turn {
  filter: none;
}

html[data-table-scenery="tea-table"] .table > :is(.seat-left, .seat-right, .my-seat) > .avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid #d0b478;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #b79b5e17, 0 0 7px #d0b47826;
  opacity: 0;
  pointer-events: none;
}

html[data-table-scenery="tea-table"] .table[data-scene-active-seat="left"] > .seat-left > .avatar::after,
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="right"] > .seat-right > .avatar::after,
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="self"] > .my-seat > .avatar::after {
  opacity: 0.8;
  animation: teaTableTurnHalo 2400ms ease-in-out infinite;
}

html[data-table-scenery="tea-table"] .table[data-scene-active-seat="left"] #huxi-abacus [data-abacus-player="left"] .abacus-name.avatar,
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="right"] #huxi-abacus [data-abacus-player="right"] .abacus-name.avatar,
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="self"] #huxi-abacus [data-abacus-player="self"] .abacus-name.avatar {
  border-color: #d0b478;
  box-shadow: inset 0 1px #f0dcb170, 0 0 0 1px #d0b47899, 0 0 5px #cbb07333;
}

@keyframes teaTableTurnHalo {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-table-scenery="tea-table"] .table[data-scene-active-seat="left"] > .seat-left > .avatar::after,
  html[data-table-scenery="tea-table"] .table[data-scene-active-seat="right"] > .seat-right > .avatar::after,
  html[data-table-scenery="tea-table"] .table[data-scene-active-seat="self"] > .my-seat > .avatar::after {
    animation: none;
    opacity: 0.8;
  }
}

/* Paint-only ornaments: never enter layout or intercept hand gestures. */
.tea-table-decoration { display: none; }
html[data-table-scenery="tea-table"] .tea-table-decoration {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.tea-table-decoration > span { position: absolute; pointer-events: none; user-select: none; }
html[data-table-scenery="tea-table"] .tea-service {
  width: 128px; height: 86px; left: 18px; top: 64%; transform: translateY(-50%);
  background: url("./assets/game-art/20260930-tea-table-runtime/tea-service.webp") center / contain no-repeat;
  filter: drop-shadow(0 5px 5px #03181145);
}
/* Remove the still-life once either nearby meld area fills; gameplay wins. */
html[data-table-scenery="tea-table"] .table:has(.left-melds .table-meld, #my-melds .table-meld) .tea-service { display: none; }
html[data-table-scenery="tea-table"] .tea-corner {
  width: 36px; height: 36px; opacity: .65;
  background: url("./assets/game-art/20260930-tea-table-runtime/bronze-tea-corner.svg") center / contain no-repeat;
}
/* The background already has the two upper copper corners on the wood edge.
 * Only add the bottom pair: the logical table top is in the mountains. */
html[data-table-scenery="tea-table"] .tea-corner:is(.bottom-left, .bottom-right) {
  bottom: 3px;
  background-image: url("./assets/game-art/20260930-tea-table-runtime/bronze-tea-corner-bottom.svg");
}
.tea-table-decoration .bottom-left { left: 3px; }
.tea-table-decoration .bottom-right { right: 3px; transform: scaleX(-1); }
html[data-table-scenery="tea-table"] #huxi-abacus [data-abacus-player="self"]::before {
  content: none;
}
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="left"] #huxi-abacus [data-abacus-player="left"]::before,
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="self"] #huxi-abacus [data-abacus-player="self"]::before,
html[data-table-scenery="tea-table"] .table[data-scene-active-seat="right"] #huxi-abacus [data-abacus-player="right"]::before {
  content: "";
  position: absolute;
  inset: 9px 1px 12px;
  border-radius: 4px;
  border: 1px solid #ecd090b3;
  box-shadow: 0 0 4px #ebcd874d, inset 0 0 3px #ebcd8729;
  pointer-events: none;
}