/* ============================================================
   <flick-card> component styles, v3

   The host keeps the playing-card aspect ratio. The wrapper
   inside contributes nothing visible: no border-radius, no
   background, no shadow. The card image carries any depth /
   shadow look it needs in its own pixels.
   ============================================================ */

flick-card {
  /* Playing card 2.5 x 3.5 -> 5 / 7. */
  aspect-ratio: 5 / 7;
  display: block;
  width: 100%;
  max-width: 580px;
  position: relative;
  /* The host is intentionally larger than the card body so that
     2D rotations and any baked shadow in the card image have room
     to render without clipping at the host edge. The visible card
     stays roughly the same size on screen because the camera margin
     in card.js was scaled up in proportion. Section layout reads
     intrinsic sizing from this element; do not hardcode width or
     height on the parent. */
}

/* Wrap covers only the visible card body (1/1.4 of the host on each
   axis, matching the camera margin in card.js). The host's empty
   safety padding around the card stays free of pointer handlers, so
   a touch that lands there falls through to the page (mobile scroll
   no longer accidentally drags the card). */
flick-card .flick-card__wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 71.4%;
  height: 71.4%;
  transform: translate(-50%, -50%);
  cursor: grab;
  /* Capture all directions on the visible card itself so 2D drag
     rotates yaw + pitch on touch devices. */
  touch-action: none;
  z-index: 1;
}

flick-card .flick-card__wrap:active {
  cursor: grabbing;
}

flick-card canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Keyboard focus ring on the host. */
flick-card:focus { outline: none; }
flick-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: 4px;
}