/* Shared first-run onboarding (onboarding.js): wordless hand demo. Flat: opaque
   paper fill, opaque 2px border in a darker shade of the game ground (--ob-ink), no black. */
.bg-ob {
  --ob-ink: #56351C;
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.bg-ob[hidden] { display: none; }
.bg-ob__hand {
  position: absolute; left: 0; top: 0; width: 44px; height: 52px;
  transform-origin: 15px 3px; will-change: transform, opacity; opacity: 0;
}
.bg-ob__hand svg { display: block; width: 44px; height: 52px; overflow: visible; }
.bg-ob__hand-fill { fill: var(--paper, #F6F3EC); stroke: var(--ob-ink); stroke-width: 2; stroke-linejoin: round; }
.bg-ob__hand-line { fill: none; stroke: var(--ob-ink); stroke-width: 2; stroke-linecap: round; }
.bg-ob__ripple {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--paper, #F6F3EC); opacity: 0; will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .bg-ob__ripple { display: none; }
}