/*
 * 湄潭大贰 · six production discard-button faceplates, 2026-10-17.
 * Load after game-personalization.css, rain-tea/theme.css and the other table
 * sheets. The six SVGs paint only the existing 62 × 62 #pass-btn hit target.
 * Its live 出 / 出 N text, visibility, enabled state, click handler and
 * positioning remain with the single-player/online game code.
 */

#pass-btn.ink-button.pass {
  --discard-face: url("./original.svg");
  --discard-ink: #fff5dd;
  --discard-ink-shadow: rgba(49, 24, 11, .95);
  --discard-focus: #f4d083;
  --discard-halo: rgba(84, 39, 13, .32);
  background: var(--discard-face) center / 100% 100% no-repeat transparent;
  border: 0;
  border-radius: 50%;
  color: var(--discard-ink);
  box-shadow: 0 3px 0 rgba(37, 18, 8, .24), 0 7px 12px var(--discard-halo);
  text-shadow: 0 1px 1px var(--discard-ink-shadow), 0 2px 4px var(--discard-ink-shadow);
  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

#pass-btn.ink-button.pass > span {
  position: relative;
  z-index: 1;
  transform: translateY(-3px);
  color: inherit;
  font-family: "Songti SC", "STSong", "Kaiti SC", "KaiTi", serif;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

html[data-table-theme="jade"] #pass-btn.ink-button.pass {
  --discard-face: url("./jade.svg");
  --discard-ink: #fff7e3;
  --discard-ink-shadow: rgba(8, 43, 31, .95);
  --discard-focus: #e6ca80;
  --discard-halo: rgba(6, 42, 33, .34);
}

html[data-table-theme="porcelain"] #pass-btn.ink-button.pass {
  --discard-face: url("./porcelain.svg");
  --discard-ink: #254751;
  --discard-ink-shadow: rgba(255, 255, 248, .96);
  --discard-focus: #275762;
  --discard-halo: rgba(30, 62, 68, .23);
  text-shadow: 0 1px 0 var(--discard-ink-shadow);
}

html[data-table-theme="walnut"] #pass-btn.ink-button.pass {
  --discard-face: url("./walnut.svg");
  --discard-ink: #fff0ce;
  --discard-ink-shadow: rgba(25, 13, 8, .98);
  --discard-focus: #edc37c;
  --discard-halo: rgba(12, 9, 7, .5);
}

html[data-table-theme="rain-tea"] #pass-btn.ink-button.pass {
  --discard-face: url("./rain-tea.svg");
  --discard-ink: #28533e;
  --discard-ink-shadow: rgba(255, 255, 245, .94);
  --discard-focus: #315f46;
  --discard-halo: rgba(51, 91, 63, .23);
  text-shadow: 0 1px 0 var(--discard-ink-shadow);
}

html[data-table-scenery="tea-table"] #pass-btn.ink-button.pass {
  --discard-face: url("./tea-table.svg");
  --discard-ink: #fff3db;
  --discard-ink-shadow: rgba(39, 19, 11, .98);
  --discard-focus: #ead09a;
  --discard-halo: rgba(39, 23, 12, .4);
}

@media (hover: hover) and (pointer: fine) {
  #pass-btn.ink-button.pass:not(:disabled):hover {
    filter: brightness(1.09) saturate(1.05);
    box-shadow: 0 3px 0 rgba(37, 18, 8, .2), 0 8px 15px var(--discard-halo), 0 0 0 2px var(--discard-focus);
  }
}

#pass-btn.ink-button.pass:not(:disabled):active {
  filter: brightness(.93);
  box-shadow: 0 1px 0 rgba(37, 18, 8, .22), 0 3px 8px var(--discard-halo);
}

#pass-btn.ink-button.pass:focus-visible {
  outline: 3px solid var(--discard-focus);
  outline-offset: 3px;
}

#pass-btn.ink-button.pass:disabled {
  opacity: .5;
  filter: grayscale(.45) saturate(.6);
}

/* Online may keep a disabled action visible. Its entrance animation otherwise
 * holds opacity: 1 over the disabled paint after the animation has finished. */
#pass-btn.ink-button.pass.choice-visible:disabled {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  #pass-btn.ink-button.pass {
    transition: none;
  }
  #pass-btn.ink-button.pass.choice-visible {
    animation: none;
  }
}