/* ShahGol 0.3 — visible hand anatomy and a calm reference comparison.
   These shapes are game illustrations, not measurements of real players. */
.hand-svg { overflow: visible; }
.hand-svg .hand-gesture { transform-box: view-box; transform-origin: 50% 86%; }
.hand-svg .hand-wrist { transition: none; }
.hand-svg .baseline-guide { pointer-events: none; }

.pose-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-block: 12px;
  min-width: 0;
  direction: rtl;
  align-items: stretch;
}
.pose-sample {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 12px 9px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: radial-gradient(ellipse at 50% 44%, #c3a96512, transparent 65%), #12281f;
  border: 1px solid #c7b47952;
  border-radius: 12px;
  isolation: isolate;
  overflow: visible;
}
.pose-sample.current-sample,
.pose-sample[data-state="current"] {
  border-color: #dbc17d87;
  background: radial-gradient(ellipse at 50% 44%, #c3a9651a, transparent 65%), #172c21;
}
.pose-sample.baseline-sample,
.baseline-sample {
  border-color: #91ae8d55;
  border-style: dashed;
  background: radial-gradient(ellipse at 50% 44%, #91ae8d0b, transparent 65%), #0b211a;
}
.pose-sample > .hand-svg,
.pose-sample > .hand-art,
.pose-sample > .pose-art {
  display: block;
  flex: 0 0 auto;
  width: min(100%, 160px);
  height: auto;
  aspect-ratio: 120 / 100;
  margin: 10px auto 7px;
  filter: drop-shadow(0 6px 6px #0004);
}
.pose-sample > .hand-art > svg,
.pose-sample > .pose-art > svg { width: 100%; height: 100%; }
.pose-sample > header,
.pose-sample > .pose-label,
.pose-sample > h4 {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8;
  color: #efdfb7;
  margin: 0;
}
.baseline-sample > header,
.baseline-sample > .pose-label,
.baseline-sample > h4 { color: #becfb3; }
.pose-sample figcaption,
.pose-sample > .pose-caption {
  margin: auto 0 0;
  width: 100%;
  font-size: 11px;
  line-height: 1.9;
  text-align: center;
  color: #c2cbb1;
  overflow-wrap: anywhere;
}
.pose-sample figcaption strong { color: #ebd29d; font-weight: 600; }
.pose-sample figcaption small { display: block; margin-top: 3px; font-size: 10px; color: #98b094; line-height: 1.8; }
.pose-sample .pose-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 0; margin: 8px 0 0; }
.pose-sample .pose-tags > span { padding: 3px 6px; border-radius: 5px; border: 1px solid #a8b78930; background: #bdd08b08; color: #becdaf; font-size: 10px; line-height: 1.7; }
.pose-pair .hand-label { position: static; display: block; font-size: 11px; text-align: center; }
.pose-pair button.pose-sample { cursor: default; }
.pose-pair .hand-svg,
.pose-pair .hand-svg *,
.baseline-sample .hand-svg,
.baseline-sample .hand-svg *,
.hand-svg.is-baseline,
.hand-svg.is-baseline * { animation: none !important; transition: none !important; }

.observation-copy {
  margin: 10px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: #071c146b;
  border: 1px solid #92ad7b35;
  color: #bfceb4;
  font-size: 12px;
  line-height: 2;
  text-align: start;
  overflow-wrap: anywhere;
}
.observation-copy p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.observation-copy p + p { margin-top: 8px; }
.observation-copy strong { color: #f0dfb3; font-weight: 600; }
.observation-copy small { display: block; margin-top: 7px; color: #9fb593; font-size: 11px; line-height: 1.9; }
.observation-copy ul { margin: 8px 0 0; padding-inline-start: 20px; }
.observation-copy li { margin-block: 3px; }
.observation-copy .cue-key { color: #e4c887; font-weight: 500; }

/* The veil is controlled by the app's legal private-shuffle phase.
   It does not manufacture a public transfer trail. */
.occlusion-veil {
  position: absolute;
  inset: 59px 12px 76px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  border: 1px solid #b49c5c40;
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 50% 15%, #34533a44, transparent 65%),
    repeating-linear-gradient(90deg, #071b13 0, #0a2018 11px, #10251b 13px, #071b13 23px);
  box-shadow: inset 0 0 90px #020c08a8, 0 15px 35px #0005;
  color: #efdfb6;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;
}
.occlusion-veil::before,
.occlusion-veil::after {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid #bba66b2e;
  border-radius: 9px;
  pointer-events: none;
}
.occlusion-veil::after { inset: 17px; border-color: #c5b47712; }
.occlusion-veil .veil-icon,
.occlusion-veil > svg,
.occlusion-veil > i {
  display: block;
  width: 38px;
  height: 38px;
  color: #cfb372;
  margin-bottom: 2px;
}
.occlusion-veil strong { font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.6; }
.occlusion-veil p,
.occlusion-veil small { max-width: 34ch; margin: 0; color: #b7c9ab; font-size: 12px; line-height: 1.9; }
.occlusion-veil.visible,
.occlusion-veil.is-visible,
.occlusion-veil[aria-hidden="false"] { opacity: 1; visibility: visible; }

/* One short beat on the active hand; reference samples never animate.
   Static wrist geometry remains on .hand-wrist, separate from this layer. */
.arena.is-performing .hand-button:is(.motion-raise, .motion-line, .motion-empty) .hand-svg[data-style="theatrical"]:not(.is-baseline) .hand-gesture {
  animation: v3-theatrical-beat var(--pose-duration, 850ms) ease-in-out var(--delay, 0ms) 1 both;
}
.arena.is-performing .hand-button:is(.motion-raise, .motion-line, .motion-empty) .hand-svg[data-style="decoy"]:not(.is-baseline) .hand-gesture {
  animation: v3-decoy-beat var(--pose-duration, 1000ms) ease-in-out var(--delay, 0ms) 1 both;
}
.arena.is-shuffling .hand-svg:not(.is-baseline) .hand-gesture {
  animation: v3-shuffle-calm 1100ms ease-in-out var(--delay, 0ms) 2;
}
.arena.is-shuffling .hand-svg[data-style="theatrical"]:not(.is-baseline) .hand-gesture { animation-name: v3-shuffle-theatrical; }
.arena.is-shuffling .hand-svg[data-style="decoy"]:not(.is-baseline) .hand-gesture { animation-name: v3-shuffle-decoy; }
@keyframes v3-theatrical-beat {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  55% { transform: rotate(5deg); }
  76% { transform: rotate(-1deg); }
}
@keyframes v3-decoy-beat {
  0%, 100% { transform: translateY(0); }
  28%, 63% { transform: translateY(-3px); }
  79% { transform: translateY(-1px); }
}
@keyframes v3-shuffle-calm {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  45% { transform: translate(2px, -2px) rotate(2deg); }
}
@keyframes v3-shuffle-theatrical {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  28% { transform: translate(-4px, -5px) rotate(-5deg); }
  66% { transform: translate(4px, -3px) rotate(5deg); }
}
@keyframes v3-shuffle-decoy {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%, 60% { transform: translateY(-5px) rotate(3deg); }
  80% { transform: translateY(-1px) rotate(-1deg); }
}
@media (max-width: 600px) {
  .pose-pair { gap: 9px; margin-block: 11px; }
  .pose-sample { padding: 11px 7px; border-radius: 10px; }
  .pose-sample > .hand-svg,
  .pose-sample > .hand-art,
  .pose-sample > .pose-art { width: min(100%, 155px); margin-block: 9px 6px; }
  .pose-sample > header, .pose-sample > .pose-label, .pose-sample > h4 { font-size: 12px; }
  .pose-sample figcaption, .pose-sample > .pose-caption { font-size: 11px; }
  .observation-copy { padding: 11px; font-size: 12px; }
  .occlusion-veil { inset: 54px 9px 76px; padding: 20px 16px; border-radius: 12px; }
  .occlusion-veil strong { font-size: 21px; }
  .occlusion-veil p, .occlusion-veil small { font-size: 11px; }
}
@media (max-width: 360px) {
  .pose-pair { gap: 7px; }
  .pose-sample { padding-inline: 5px; }
  .pose-sample > header, .pose-sample > .pose-label, .pose-sample > h4 { font-size: 11px; }
  .pose-sample figcaption { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-svg, .hand-svg *, .occlusion-veil { animation: none !important; transition: none !important; }
}

.observation-controls > div { grid-template-columns: 1fr; }
.focus-readout .readout-metrics { display: grid; grid-template-columns: 1fr; }
.readout-metric { min-width: 0; display: block; }
.readout-metric .pose-pair { margin: 8px 0; }
.readout-metric > strong { display: block; }
.habit-note { margin: 10px 0 0; font-size: 11px; line-height: 1.9; color: #c9bd93; }
.cue-chip { line-height: 1.8; overflow-wrap: anywhere; }
.focus-readout { max-height: 530px; overflow: auto; scrollbar-width: thin; }
.motion-tag { max-width: 150px; font-size: 10px; }