/* Casino etiquette: the five shoe-game hand signals, drawn and looping.
   Only transform and opacity move (plus the surrender line's dash). With
   reduced motion, each figure holds its pose. */
.sig-block { margin-top: 22px; }
.signals { display: grid; gap: 16px; }
.sig { margin: 0; display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: center; }
@media (min-width: 640px) { .signals { gap: 20px; } .sig { grid-template-columns: 240px 1fr; gap: 22px; } }
.sig svg { width: 100%; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(201, 162, 94, .3), 0 6px 18px rgba(0, 0, 0, .35); overflow: hidden; }
.sig figcaption { font-size: 15px; line-height: 1.5; color: var(--soft); }
.sig figcaption b { display: block; font: 700 17px/1.25 var(--serif); color: var(--cream); margin-bottom: 3px; }
.sig-note { margin-top: 14px; }
.sig-pause { appearance: none; border: 1px solid var(--hair); background: rgba(255, 255, 255, .04); color: var(--soft); font: 600 13.5px/1 var(--sans);
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; }
.sig-pause:hover { color: var(--cream); border-color: rgba(201, 162, 94, .5); }

.cd { fill: #fbf7ef; stroke: rgba(0, 0, 0, .25); stroke-width: .8; }
.rk { font: 700 11px/1 -apple-system, system-ui, sans-serif; fill: #1b1814; }
.pip { font: 16px/1 "Apple Symbols", "Segoe UI Symbol", sans-serif; fill: #1b1814; text-anchor: middle; dominant-baseline: middle; }
.rk.red, .pip.red { fill: #b3262e; }
.sig .circle { fill: rgba(0, 0, 0, .1); stroke: rgba(244, 239, 230, .5); stroke-width: 1.4; }
.chip-edge { fill: #7a2020; }
.chip-top { fill: #b33a3a; }
.chip-ring { fill: none; stroke: #fff; stroke-width: 2.2; stroke-dasharray: 3.2 4; opacity: .85; }
.skin { fill: #edd9bd; stroke: #8f7350; stroke-width: 1.1; }
.skin .cuff { fill: #22306a; stroke: #0a1028; }
.sig .ripple { fill: none; stroke: #f4efe6; stroke-width: 1.6; opacity: 0; }
.sig .line { stroke: #e2c387; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 64; stroke-dashoffset: 0; }
.sig .say rect { fill: #f4efe6; }
.sig .say text { font: 600 11.5px/1 -apple-system, system-ui, sans-serif; fill: #15110b; text-anchor: middle; }
.sig .mv, .sig .third, .sig .second, .sig .apart, .sig .ripple, .sig .say { transform-box: view-box; }
/* the held poses (no motion) */
.sig-sur .mv { transform: translate(-28px, 4px); }
.sig-split .apart { transform: translateX(26px); }

@media (prefers-reduced-motion: no-preference) {
  .sig-hit .mv { animation: hit-hand 4.4s ease-in-out infinite; }
  .sig-hit .third { animation: hit-card 4.4s ease-out infinite; }
  .sig-hit .ripple { animation: hit-ripple 4.4s ease-out infinite; transform-origin: 104px 86px; }
  .sig-stand .mv { animation: stand-hand 4.4s ease-in-out infinite; }
  .sig-double .mv, .sig-split .mv { animation: show-hand 4.4s ease-in-out infinite; }
  .sig-double .second, .sig-split .second { animation: chip-in 4.4s ease-out infinite; }
  .sig-split .apart { animation: apart 4.4s ease-in-out infinite; }
  .sig-sur .mv { animation: sur-hand 4.4s ease-in-out infinite; }
  .sig-sur .line { animation: sur-line 4.4s ease-in-out infinite; }
  .sig-sur .say { animation: sur-say 4.4s ease-out infinite; }
  html.js .signals:not(.inview) *, .signals.paused * { animation-play-state: paused !important; }
}
@keyframes hit-hand {
  0%, 4% { transform: translateY(80px); opacity: 0; }
  16% { transform: translateY(0); opacity: 1; }
  22% { transform: translateY(-3px) scale(.985); } 26% { transform: translateY(0); }
  32% { transform: translateY(-3px) scale(.985); } 36% { transform: translateY(0); }
  70% { transform: translateY(0); opacity: 1; }
  84%, 100% { transform: translateY(80px); opacity: 0; }
}
@keyframes hit-card {
  0%, 40% { transform: translate(0, -40px); opacity: 0; }
  52%, 86% { transform: none; opacity: 1; }
  96%, 100% { transform: none; opacity: 0; }
}
@keyframes hit-ripple {
  0%, 21% { transform: scale(.4); opacity: 0; } 23% { transform: scale(.5); opacity: .8; } 29% { transform: scale(1.7); opacity: 0; }
  31% { transform: scale(.5); opacity: .8; } 37%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes stand-hand {
  0%, 4% { transform: translateY(80px); opacity: 0; }
  16% { transform: translate(0, 0); opacity: 1; }
  27% { transform: translate(-16px, 0); } 39% { transform: translate(14px, 0); }
  51% { transform: translate(-16px, 0); } 63%, 72% { transform: translate(0, 0); opacity: 1; }
  86%, 100% { transform: translateY(80px); opacity: 0; }
}
@keyframes chip-in {
  0%, 6% { transform: translate(30px, 46px); opacity: 0; }
  26%, 86% { transform: none; opacity: 1; }
  96%, 100% { transform: none; opacity: 0; }
}
@keyframes show-hand {
  0%, 26% { transform: translateY(80px); opacity: 0; }
  40%, 76% { transform: translateY(0); opacity: 1; }
  90%, 100% { transform: translateY(80px); opacity: 0; }
}
@keyframes apart {
  0%, 40% { transform: none; }
  54%, 88% { transform: translateX(26px); }
  98%, 100% { transform: none; }
}
@keyframes sur-hand {
  0%, 4% { transform: translate(-92px, 80px); opacity: 0; }
  18% { transform: translate(-92px, 4px); opacity: 1; }
  44% { transform: translate(-28px, 4px); }
  74% { transform: translate(-28px, 4px); opacity: 1; }
  88%, 100% { transform: translate(-28px, 80px); opacity: 0; }
}
@keyframes sur-line {
  0%, 18% { stroke-dashoffset: 64; opacity: 1; }
  44%, 86% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sur-say {
  0%, 44% { transform: translateY(6px); opacity: 0; }
  52%, 86% { transform: none; opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* chip swatches in the colors table */
.chips .sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-right: 10px; vertical-align: -2px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 0 0 1px rgba(244, 239, 230, .35); }