/* Coverflow auto-activation on small / narrow viewports.
 *
 * The server always renders the regular Hand (or Fan Hand, whichever
 * skin the player has equipped). The JS in public/main.js (coverflow
 * IIFE) watches viewport size and, on small screens, adds
 * `.is-coverflow` to every `.hand` element so this stylesheet
 * repositions card-containers as a carousel with one focused card
 * front-and-centre. On desktop / wide screens, the class is removed
 * and the cards fall back to whatever layout the player chose. */

.hand.is-coverflow {
  display: block;
  position: relative;
  height: 230px;
  width: 100%;
  background: transparent;
  padding: 0;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* Reset the default .hand margin-bottom so the stage area aligns
   * with what the previous flex hand had. */
  margin-bottom: 10px;
}

/* Card-containers become absolutely positioned cards anchored relative
 * to the .hand. The JS computes each card's final position from the
 * VIEWPORT (window.innerWidth) and the .hand's measured bounding rect,
 * so positioning is independent of how the parent flex layout sizes
 * itself. */
.hand.is-coverflow .card-container {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 100px !important;
  flex-grow: 0 !important;
  margin: 0;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.28s ease;
  transform-origin: bottom center;
  cursor: pointer;
}

/* While dragging, kill the easing so cards track the finger 1:1. JS
 * adds .dragging to the .hand on touchstart, removes on touchend. */
.hand.is-coverflow.dragging .card-container {
  transition: none;
}

/* Subtle visual lift on the focused card so the player's eye lands
 * there even without a label. JS adds .is-coverflow-focused on
 * exactly one card per render. */
.hand.is-coverflow .card-container.is-coverflow-focused {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

/* The .hand wrapper for non-active mode keeps its normal flex layout
 * (no override here). */

/* Onboarding's OnboardingHand uses its own `.onboarding-hand` class
 * and is unaffected by these rules. */

/* Mobile-tweaked card sizing — match the rest of the codebase. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .hand.is-coverflow {
    height: 165px;
  }
  .hand.is-coverflow .card-container {
    width: 70px !important;
    margin-left: -35px;
  }
}