/* Keep the hit areas in their grid tracks; only the visible card may overlap
   or lift. Raising one card therefore cannot steal its neighbour's hover. */
.demo-page .rules-hand > .rule-card,
.demo-page .rules-hand > .rule-card.demo-card:is(:hover, :focus-visible, [aria-pressed='true']) {
  width: 100%;
  min-width: 0;
  height: calc(var(--hand-card-width) * 10 / 7);
  aspect-ratio: auto;
  overflow: visible;
  transform: none;
  transition: none;
  outline: none;
}

.demo-page .rules-hand > .rule-card { z-index: auto; }

.demo-page .rules-hand .hand-card-face {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: var(--hand-card-width);
  height: 100%;
  border-radius: 4px;
  transform: rotate(var(--hand-tilt));
  transform-origin: 50% 100%;
  transition: transform .16s ease;
}

.demo-page .rules-hand .hand-card-face,
.demo-page .rules-hand .hand-card-face * { pointer-events: none; }

.demo-page .rules-hand .hand-card-face > .rule-slot {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* The draft hand fills in without visible placeholder boxes. */
.demo-page #draft-hand .rule-slot { border: 0; background: none; }
.demo-page #draft-hand .demo-card > .hand-card-face { outline: none; }

.demo-page .rules-hand > .demo-card:is(:focus-visible, [aria-pressed='true']) {
  z-index: 2;
}
.demo-page .rules-hand > .demo-card:is(:focus-visible, [aria-pressed='true']) > .hand-card-face {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  transform: translateY(-8px) rotate(var(--hand-tilt));
}

@media (hover: hover) and (pointer: fine) {
  .demo-page .rules-hand > .demo-card:not(:disabled):hover { z-index: 3; }
  .demo-page .rules-hand > .demo-card:not(:disabled):hover > .hand-card-face {
    transform: translateY(-8px) rotate(var(--hand-tilt));
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-page .rules-hand .hand-card-face { transition: none; }
}