/* ==========================================================================
   cards.css — Card face, card back, card stack & deck styles
   Blackjack Solitaire
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base Card Element
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: var(--card-width, 64px);
  height: var(--card-height, 96px);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card);
  user-select: none;
  cursor: default;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* Cards that can be interacted with */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.card--interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

/* Selected / lifted state */
.card--selected {
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-4px) scale(1.03);
  z-index: 10;
}

/* --------------------------------------------------------------------------
   2. Card Face
   -------------------------------------------------------------------------- */

.card--face {
  background-color: var(--bg-card-face);
  color: var(--text-card-black);
  padding: 3px 4px;
  justify-content: space-between;
}

/* Suit colour variant */
.card--face.card-red {
  color: var(--text-card-red);
}

/* Joker — suitless, so it gets the accent colour and an
   oversized centre glyph rather than a suit pip. */
.card--face.card--joker {
  color: var(--color-accent);
}

.card--face.card--joker .card-center {
  font-size: 1.6em;
}

/* ---- Corner pip (top-left) ---- */
.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}

.card-corner--top {
  align-self: flex-start;
}

.card-corner--bottom {
  align-self: flex-end;
  /* Rotated 180° to mirror bottom-right corner */
  transform: rotate(180deg);
}

.card-rank {
  font-family: var(--font-sans);
  font-size: 0.8125rem; /* ~13px — tight fit for 64px card */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.card-suit-small {
  font-size: 0.6875rem; /* ~11px */
  line-height: 1;
}

/* ---- Centre suit symbol ---- */
.card-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 1.5rem; /* 24px — large centred symbol */
  line-height: 1;
}

/* Face card imagery placeholder (K, Q, J show text label in Phase 1) */
.card-face-label {
  font-size: 0.625rem; /* 10px */
  font-weight: 500;
  opacity: 0.4;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Card Back
   -------------------------------------------------------------------------- */

.card--back {
  background: var(--bg-card-back);
  position: relative;
  cursor: pointer;
}

/* Spade pattern overlay on card back */
.card--back::before {
  content: '♠ ♠ ♠\A♠ ♠ ♠\A♠ ♠ ♠';
  white-space: pre;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 0.15em;
  line-height: 1.8;
  padding: 4px;
  overflow: hidden;
  pointer-events: none;
}

/* Alternative: CSS repeating-gradient spade pattern via pseudo-element */
.card--back::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--border-radius-card) - 3px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. "PLAY" Overlay — Initial deck state before game starts
   -------------------------------------------------------------------------- */

.card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.card-play-overlay__text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-play-overlay__sub {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Game Deck — The main clickable deck element
   -------------------------------------------------------------------------- */

.game-deck {
  position: relative;
  width: var(--deck-card-width, 74px);
  height: var(--deck-card-height, 110px);
  background: var(--bg-card-back);
  border: 1.5px solid var(--deck-border);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  user-select: none;
  /* Stacked card illusion: layered box-shadows */
  box-shadow:
    3px 3px 0 1px rgba(0, 0, 0, 0.4),
    6px 6px 0 1px rgba(0, 0, 0, 0.25),
    var(--shadow-card);
}

.game-deck:hover {
  transform: scale(var(--deck-hover-scale, 1.05));
  box-shadow:
    3px 3px 0 1px rgba(0, 0, 0, 0.4),
    6px 6px 0 1px rgba(0, 0, 0, 0.25),
    var(--shadow-card-hover);
}

.game-deck:active {
  transform: scale(1.02);
}

/* Set by main.js while the deck holds the focus launchMode gave it and the
   player has not touched the keyboard yet — see focusDeck(). The ring is a
   keyboard affordance nobody asked for at that moment, and it sat outside the
   deck's own border as a second edge (issue #143). It comes back the instant a
   key is pressed. */
.game-deck.deck-focus-quiet:focus-visible {
  outline: none;
}

/* Deck peek — sits flush behind deck, lifts on hover */
.deck-peeker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-card-back);
  border-radius: inherit;
  border: var(--border-width) solid var(--border-card);
  pointer-events: none;
  transform: translate(0, 0) rotate(0deg);
  transition: transform 350ms cubic-bezier(.2,.8,.3,1);
  z-index: -1;
}

/* Spade pattern on game deck (same as card back) */
.game-deck::before {
  content: '♠ ♠ ♠\A♠ ♠ ♠\A♠ ♠ ♠';
  white-space: pre;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 0.15em;
  line-height: 1.8;
  padding: 4px;
  overflow: hidden;
  pointer-events: none;
}

.game-deck::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  pointer-events: none;
}

.deck-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  color: var(--deck-label);
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Reshuffle offer: the deck is spent but the draw pile can be recycled. The
   label is a phrase rather than a count, so it wraps inside the card, and the
   deck art is switched off so the offer is the only thing on the card.
   The price sits ON the affordance — see .deck-price below. */
.game-deck--reshuffle .deck-label {
  font-size: 0.6rem;
  line-height: 1.15;
  max-width: 100%;
  padding: 0 4px;
  text-transform: uppercase;
  color: var(--color-accent);
}

.game-deck--reshuffle {
  border: 2px solid var(--color-accent);
}

/* Deck art off: the offer is the message, and a spade pattern behind it is
   just noise. */
.game-deck--reshuffle::before { content: none; }

/* NO PULSE. The 2.6s breathing glow that used to live here was removed
   deliberately: this state can last minutes, and a repeating animation stops
   reading as an invitation and starts reading as an alarm. The burn pile is the
   only thing in the mode allowed to move on its own. Glow answers hover and
   focus, and nothing else. */
.game-deck--reshuffle:hover,
.game-deck--reshuffle:focus-visible {
  box-shadow: 0 0 12px var(--color-accent);
}

/* What the click costs, read from the scoring config, never hardcoded. */
.deck-price {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-alert);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Dead end: the deck is empty and there is nothing left to recycle. This is the
   EMPTY-SLOT visual, not a dimmed card — a faded card back still says "there
   are cards here", an empty outline says the truth. No art, no shadow, no
   stacked-card illusion, no motion. It keeps its label so a click can answer
   "no cards left to draw" rather than shaking in silence. */
.game-deck--dead {
  background: transparent;
  border: 1px dashed var(--pile-empty-border, var(--border-hand-empty));
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}

.game-deck--dead::before,
.game-deck--dead::after { content: none; }
.game-deck--dead .deck-peeker { display: none; }

.game-deck--dead .deck-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.5;
}

.game-deck--dead:hover,
.game-deck--dead:active {
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. Draw Pile
   -------------------------------------------------------------------------- */

.draw-pile {
  position: relative;
  width: var(--deck-card-width, 74px);
  height: var(--deck-card-height, 110px);
  border: var(--border-width) dashed var(--pile-empty-border);
  border-radius: var(--border-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-normal) var(--ease-out);
}

/* When draw pile has a card — display the card directly, make it clickable */
.draw-pile:has(.card) {
  border: none;
  cursor: pointer;
}

/* Ambient breathe — draws the eye to the pile that needs a draw. This is the
   "live" state in the design mockup: accent border + soft-accent label. */
.draw-pile--empty {
  border-color: var(--color-accent);
  animation: slotBreathe 4s ease-in-out infinite;
}

.draw-pile--empty::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 0.6875rem; /* 11px */
  line-height: 1.35;
  color: var(--pile-label-live);
  text-align: center;
  padding: 6px;
}

/* --------------------------------------------------------------------------
   7. Card Stack — Stacked cards within a hand slot
   -------------------------------------------------------------------------- */

.card-stack {
  position: relative;
  /* Height expands to fit stacked cards */
  width: var(--card-width, 64px);
}

.card-stack .card {
  position: absolute;
  top: 0;
  left: 0;
}

/* Each subsequent card in the stack is offset down */
.card-stack .card:nth-child(1)  { top: calc(var(--card-stack-offset) * 0); z-index: 1; }
.card-stack .card:nth-child(2)  { top: calc(var(--card-stack-offset) * 1); z-index: 2; }
.card-stack .card:nth-child(3)  { top: calc(var(--card-stack-offset) * 2); z-index: 3; }
.card-stack .card:nth-child(4)  { top: calc(var(--card-stack-offset) * 3); z-index: 4; }
.card-stack .card:nth-child(5)  { top: calc(var(--card-stack-offset) * 4); z-index: 5; }

/* Dynamic height based on card count (set via JS custom property or fallback) */
.card-stack[data-count="1"] { height: var(--card-height); }
.card-stack[data-count="2"] { height: calc(var(--card-height) + var(--card-stack-offset) * 1); }
.card-stack[data-count="3"] { height: calc(var(--card-height) + var(--card-stack-offset) * 2); }
.card-stack[data-count="4"] { height: calc(var(--card-height) + var(--card-stack-offset) * 3); }
.card-stack[data-count="5"] { height: calc(var(--card-height) + var(--card-stack-offset) * 4); }

/* --------------------------------------------------------------------------
   8. Card Flip (3D) — Used in animation; needs perspective on parent
   -------------------------------------------------------------------------- */

.card-flip-container {
  perspective: 600px;
  width: var(--card-width, 64px);
  height: var(--card-height, 96px);
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-medium) var(--ease-in-out);
}

.card-flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-flip-back {
  transform: rotateY(180deg);
}

/* --------------------------------------------------------------------------
   9. Drag-and-Drop States
   -------------------------------------------------------------------------- */

.card--dragging {
  opacity: 0.6;
  cursor: grabbing;
  transform: scale(1.05) rotate(2deg);
  box-shadow: var(--shadow-card-lift);
  z-index: 100;
}

.card--drag-ghost {
  /* The ghost element shown under cursor during drag */
  pointer-events: none;
  transform: scale(1.08) rotate(2deg);
  box-shadow: var(--shadow-card-lift);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   10. Burn Pile Indicator
   -------------------------------------------------------------------------- */

.burn-pile {
  width: var(--card-width, 64px);
  height: var(--card-height, 96px);
  border: var(--border-width) dashed var(--color-alert);
  border-radius: var(--border-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.burn-pile__label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  color: var(--color-alert);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   11. Deck Skins — applied via data-deck-skin on <body>
   Each skin overrides .card--back and .game-deck background + ::before pattern.
   "classic-spade" is the default appearance — no overrides needed.
   -------------------------------------------------------------------------- */

/* Shared reset for non-spade skins: clear the ::before text content */
body[data-deck-skin="gilded-lattice"] .card--back::before,
body[data-deck-skin="gilded-lattice"] .game-deck::before,
body[data-deck-skin="concentric"] .card--back::before,
body[data-deck-skin="concentric"] .game-deck::before,
body[data-deck-skin="monogram-21"] .card--back::before,
body[data-deck-skin="monogram-21"] .game-deck::before,
body[data-deck-skin="deco-fan"] .card--back::before,
body[data-deck-skin="deco-fan"] .game-deck::before,
body[data-deck-skin="herringbone"] .card--back::before,
body[data-deck-skin="herringbone"] .game-deck::before,
body[data-deck-skin="holo-foil"] .card--back::before,
body[data-deck-skin="holo-foil"] .game-deck::before,
body[data-deck-skin="minimal"] .card--back::before,
body[data-deck-skin="minimal"] .game-deck::before {
  content: '';
  font-size: 0;
  letter-spacing: 0;
  line-height: 1;
}

/* ---- Gilded Lattice: 45° cross-hatch in accent colour ---- */
body[data-deck-skin="gilded-lattice"] .card--back::before,
body[data-deck-skin="gilded-lattice"] .game-deck::before {
  background-image:
    repeating-linear-gradient(45deg,  var(--color-accent) 0, var(--color-accent) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, var(--color-accent) 0, var(--color-accent) 1px, transparent 0, transparent 50%);
  background-size: 10px 10px;
  opacity: 0.25;
}

/* ---- Concentric: radial rings + centre dot ---- */
body[data-deck-skin="concentric"] .card--back::before,
body[data-deck-skin="concentric"] .game-deck::before {
  background-image: repeating-radial-gradient(
    circle,
    transparent 0, transparent 7px,
    rgba(255, 255, 255, 0.12) 7px, rgba(255, 255, 255, 0.12) 8px
  );
  opacity: 1;
}

/* ---- Monogram 21: large centred "21" text ---- */
body[data-deck-skin="monogram-21"] .card--back::before,
body[data-deck-skin="monogram-21"] .game-deck::before {
  content: '21';
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}

/* ---- Deco Fan: conic-gradient radiating wedges ---- */
body[data-deck-skin="deco-fan"] .card--back,
body[data-deck-skin="deco-fan"] .game-deck {
  background:
    conic-gradient(
      from 0deg at 50% 110%,
      #1a1a3e 0deg, #2e2e60 20deg,
      #1a1a3e 40deg, #2e2e60 60deg,
      #1a1a3e 80deg, #2e2e60 100deg,
      #1a1a3e 120deg, #2e2e60 140deg,
      #1a1a3e 160deg, #2e2e60 180deg
    );
}

/* ---- Herringbone: 60° zigzag lines ---- */
body[data-deck-skin="herringbone"] .card--back::before,
body[data-deck-skin="herringbone"] .game-deck::before {
  background-image:
    repeating-linear-gradient( 60deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 0, transparent 50%);
  background-size: 16px 9px;
  opacity: 1;
}

/* ---- Holo Foil: iridescent layered shimmer ---- */
body[data-deck-skin="holo-foil"] .card--back,
body[data-deck-skin="holo-foil"] .game-deck {
  background:
    linear-gradient(135deg, rgba(255, 94, 240, 0.35) 0%, rgba(125, 249, 255, 0.35) 33%, rgba(212, 168, 67, 0.35) 66%, rgba(255, 94, 240, 0.35) 100%),
    linear-gradient(135deg, #1a1a3e 0%, #2a2a5e 100%);
}

/* ---- Minimal: flat primary + accent inner border ---- */
body[data-deck-skin="minimal"] .card--back,
body[data-deck-skin="minimal"] .game-deck {
  background: var(--color-primary);
}

body[data-deck-skin="minimal"] .card--back::after,
body[data-deck-skin="minimal"] .game-deck::after {
  border-color: var(--color-accent);
  opacity: 0.6;
}