/* Shared hold preview and progress styles; game themes can override --hold-*. */
.requires-hold {touch-action:none;user-select:none;-webkit-user-select:none}
.requires-hold.holding-action:not([data-hold-progress="card-border"]):not([data-hold-progress="card-dissolve"]) {box-shadow:0 0 0 3px var(--hold-accent,#f1c86a);filter:brightness(1.1)}
/* Optional card-edge fuse. A near-black track fully covers the usual suit
   border while a bright gold sweep replaces it. Two masked pseudo-elements
   keep rank/art readable and never steal input. Existing hold timing remains
   the sole source of confirmation authority. All colors are overridable. */
@property --hold-card-sweep {syntax:"<angle>";inherits:false;initial-value:0deg}
.xg-card.holding-action[data-hold-progress="card-border"] {
  box-shadow:0 0 0 1px var(--hold-card-track,#070b13),
    0 0 14px 2px var(--hold-card-aura,#ffd15b66),
    var(--xg-card-shadow,0 4px 12px #0006);
}
.xg-card.holding-action[data-hold-progress="card-border"]::before,
.xg-card.holding-action[data-hold-progress="card-border"]::after {
  content:"";position:absolute;inset:0;box-sizing:border-box;
  border-radius:inherit;pointer-events:none;
  padding:var(--hold-card-thickness,5px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.xg-card.holding-action[data-hold-progress="card-border"]::before {
  z-index:19;background:var(--hold-card-track,#070b13);
}
.xg-card.holding-action[data-hold-progress="card-border"]::after {
  z-index:20;
  background:conic-gradient(from -90deg,
    var(--hold-card-accent,#ffd15b) 0deg var(--hold-card-sweep),
    transparent var(--hold-card-sweep) 360deg);
  filter:drop-shadow(0 0 3px var(--hold-card-glow,#ffefae))
    drop-shadow(0 0 7px var(--hold-card-glow,#ffefae));
  animation:hold-card-fuse var(--hold-ms,550ms) linear forwards;
}
@keyframes hold-card-fuse {to {--hold-card-sweep:360deg}}
@media(prefers-reduced-motion:reduce) {
  .xg-card.holding-action[data-hold-progress="card-border"]::after {
    animation:none;--hold-card-sweep:360deg;opacity:.85;
  }
}
@media(forced-colors:active) {
  .xg-card.holding-action[data-hold-progress="card-border"] {box-shadow:none}
  .xg-card.holding-action[data-hold-progress="card-border"]::before {background:Canvas}
  .xg-card.holding-action[data-hold-progress="card-border"]::after {
    background:Highlight;filter:none;
  }
}
.hold-popover {position:fixed;z-index:1100;width:min(240px,calc(100vw - 20px));
  padding:12px 14px;background:var(--hold-panel,#153349);color:var(--hold-ink,#ecf8ff);
  border:1px solid var(--hold-border,#75b4d5);border-radius:12px;box-shadow:0 16px 42px #000b;
  pointer-events:none;text-align:left}
.hold-popover[hidden] {display:none!important}
.hold-popover .confirm-message {font-size:14px;font-weight:750;line-height:1.3;margin:0 0 10px;color:inherit}
.hold-track {position:relative;height:30px;background:var(--hold-track,#092334);
  border:1px solid var(--hold-border,#75b4d5);border-radius:7px;overflow:hidden}
.hold-fill {height:100%;width:0;background:var(--hold-accent,#f1c86a);transition:none}
.hold-track-label {position:absolute;inset:0;display:grid;place-items:center;
  color:var(--hold-ink,#ecf8ff);font-size:12px;font-weight:800}
.hold-popover.is-holding .hold-fill {width:100%;transition:width var(--hold-ms,550ms) linear}
.hold-popover.is-holding .hold-track-label {color:var(--hold-progress-ink,#152535)}
/* A second visual option: prepare/discard gently dissolves the illustrated
   face as the hold approaches completion. The card itself remains in the DOM
   and keeps its action/authoritative state until the hold timer commits.
   Releasing early removes these styles immediately. */
.xg-card.holding-action[data-hold-progress="card-dissolve"] {
  box-shadow:0 0 0 2px var(--hold-dissolve-ink,#91a9bc),
    0 0 16px var(--hold-dissolve-glow,#abb9de55);
}
.xg-card.holding-action[data-hold-progress="card-dissolve"] .xg-card__face {
  animation:hold-card-dissolve var(--hold-ms,550ms) ease-in forwards;
}
.xg-card.holding-action[data-hold-progress="card-dissolve"]::after {
  content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 23% 21%,#d9e6ff 0 1px,transparent 2px),
    radial-gradient(circle at 73% 35%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 54% 81%,#a3d4e8 0 1px,transparent 2px),
    radial-gradient(circle at 89% 71%,#d9e6ff 0 1px,transparent 2px);
  background-size:100% 100%;
  opacity:0;
  animation:hold-card-sparks var(--hold-ms,550ms) ease-in forwards;
}
@keyframes hold-card-dissolve {
  from {opacity:1;filter:none}
  to {opacity:.35;filter:grayscale(.85) brightness(.6)}
}
@keyframes hold-card-sparks {
  0%,100% {opacity:0}
  65% {opacity:.9}
}
@media(prefers-reduced-motion:reduce) {
  .xg-card.holding-action[data-hold-progress="card-dissolve"] .xg-card__face {
    animation:none;opacity:.65;filter:grayscale(.45);
  }
  .xg-card.holding-action[data-hold-progress="card-dissolve"]::after {animation:none;opacity:.7}
}
@media(forced-colors:active) {
  .xg-card.holding-action[data-hold-progress="card-dissolve"] {outline:3px dotted Highlight;box-shadow:none}
  .xg-card.holding-action[data-hold-progress="card-dissolve"]::after {display:none}
}

/* Keep the anchored instruction popover, but put progress on the card itself. */
.hold-popover:is([data-progress="card-border"],[data-progress="card-dissolve"]) .hold-track {
  height:auto;min-height:18px;padding:0;border:0;border-radius:0;
  background:transparent;overflow:visible;
}
.hold-popover:is([data-progress="card-border"],[data-progress="card-dissolve"]) .hold-fill {display:none}
.hold-popover:is([data-progress="card-border"],[data-progress="card-dissolve"]) .hold-track-label {
  position:static;display:block;color:var(--hold-ink,#ecf8ff);
  font-size:12px;font-weight:650;
}
.hold-popover:is([data-progress="card-border"],[data-progress="card-dissolve"]) .confirm-message {margin-bottom:5px}