/* Shared card primitives for /games/ pages with playing cards.
 *
 * Provides the visual building blocks every card-game page needs — the
 * card itself (face-up = SVG art from cards.svg, face-down = patterned
 * blue back, drag/hint state classes), the empty-pile slot ghost, and
 * the invisible drop-target hit zone.  The host page is responsible
 * for board layout, table dimensions, pile structures, and game-specific
 * styling; this file is just the per-card visual recipe.
 *
 * Variables the host page must define on a positioned ancestor (typically
 * the playing-surface element):
 *   --card-w   width of a card        (e.g. clamp(48px, 9.5vw, 76px))
 *   --card-h   height of a card       (use 1.452 * card-w to match the
 *                                     Byron Knoll deck's native aspect
 *                                     ratio of 167.0869:242.6669)
 *
 * DOM structure produced by makeCardElement (in cards.js):
 *   <svg class="card" viewBox="0 0 167.0869141 242.6669922">
 *     <use href="../shared/cards.svg#card-7H" />
 *   </svg>
 *
 * State modifiers toggled at runtime:
 *   .is-red     face-up red suit (informational class only — fill comes from the SVG)
 *   .is-black   face-up black suit (informational only)
 *   .is-back    face-down (hides the <use>, shows the patterned back via ::after)
 *   .is-grabable    cursor: grab
 *   .is-dragging    cursor: grabbing, raised z, no transition
 *   .is-hint-pulse  blue outline pulse for the hint indicator
 */

.card {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  background: white;
  border: 1px solid #cdd2dd;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  cursor: default;
  user-select: none;
  will-change: transform;
  transition: transform 150ms cubic-bezier(0.32, 0.5, 0.7, 1.05),
              box-shadow 100ms ease;
  /* Prevent the SVG from being draggable as an image — pointer-event
   * handlers on the <svg> root drive drag-and-drop, but the browser's
   * default image-drag would otherwise interfere on some platforms. */
  -webkit-user-drag: none;
  overflow: hidden;
}
.card > use,
.card > svg {
  /* The internal <use> element fills the card.  width/height percentages
   * scale to the parent <svg>'s reported dimensions. */
  width: 100%;
  height: 100%;
}

.card.is-grabable { cursor: grab; }

.card.is-dragging {
  transition: none;
  z-index: 999;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  cursor: grabbing;
}

/* Face-down cards hide the SVG art and show a patterned back.  We use a
 * ::before pseudo-element for the back so the SVG <use> child can simply
 * be hidden via display:none on the parent. */
.card.is-back > use { display: none; }
.card.is-back {
  background: #1a4fc4;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 8px, rgba(255,255,255,0.10) 8px 16px),
    repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255,255,255,0.06) 8px 16px);
  border-color: #1a4fc4;
}

.card.is-hint-pulse {
  outline: 3px solid rgba(47, 110, 245, 0.9);
  outline-offset: -3px;
  z-index: 50;
}

/* .is-red and .is-black are informational only on SVG-backed cards
 * (the artwork carries its own colour).  Kept as classes so games can
 * still query them via CSS or DOM selectors. */

/* Empty-pile slot ghost — dashed outline that sits beneath the topmost
 * card of a pile (or shows when the pile is empty).  Pointer-events are
 * disabled so the slot never absorbs clicks; the host's drop target
 * (.card-droptarget) above it handles interaction.
 */
.card-slot {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  border: 2px dashed rgba(74, 81, 104, 0.25);
  box-sizing: border-box;
  pointer-events: none;
}

/* Invisible drop-target hit zone — the host page sets the size and
 * position; this rule provides the highlight state when a drag is
 * hovering a valid drop.
 */
.card-droptarget {
  position: absolute;
  z-index: 0;
  cursor: default;
}
.card-droptarget.is-drop-hover {
  outline: 2px solid rgba(47, 110, 245, 0.7);
  outline-offset: -2px;
  border-radius: 6px;
  background: rgba(47, 110, 245, 0.05);
}