/* ==========================================================================
   cards.css
   A standalone, reusable playing-card visual system.
   Draws all 52 cards + card back entirely in CSS (no image files).

   Markup contract:

   Face-up card:
     <div class="card" data-suit="hearts|diamonds|clubs|spades" data-rank="A|2..10|J|Q|K">
       <div class="card-face">
         <span class="card-corner card-corner--top"><em class="card-rank">A</em><i class="card-pip">♥</i></span>
         <span class="card-center">♥</span>
         <span class="card-corner card-corner--bottom"><em class="card-rank">A</em><i class="card-pip">♥</i></span>
       </div>
     </div>

   Face-down card:
     <div class="card is-facedown">
       <div class="card-back"></div>
     </div>

   Any project can @import or <link> this file and reuse the .card system
   for any card game — nothing here is specific to Patience/Solitaire.
   ========================================================================== */

:root {
  --card-w: 74px;
  --card-h: 103px;
  --card-radius: 7px;
  --card-red: #a11d33;
  --card-black: #1c1a17;
  --card-face-bg: #f7f2e4;
  --card-face-bg-2: #fbf8ee;
  --card-border: rgba(28, 26, 23, 0.28);
  --card-back-1: #0b3d2e;
  --card-back-2: #145c43;
  --card-back-accent: #c9a24b;
  --card-shadow: rgba(10, 8, 6, 0.45);
  --card-font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
}

.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  font-family: var(--card-font-display);
}

/* ---------- Face-up card ---------- */

.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  background:
    radial-gradient(120% 140% at 15% 8%, var(--card-face-bg-2) 0%, var(--card-face-bg) 60%);
  border: 1px solid var(--card-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 6px var(--card-shadow);
  overflow: hidden;
}

.card[data-suit="hearts"] .card-face,
.card[data-suit="diamonds"] .card-face {
  color: var(--card-red);
}
.card[data-suit="clubs"] .card-face,
.card[data-suit="spades"] .card-face {
  color: var(--card-black);
}

.card-corner {
  position: absolute;
  left: 6%;
  top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-size: calc(var(--card-w) * 0.20);
}

.card-corner--bottom {
  left: auto;
  top: auto;
  right: 6%;
  bottom: 4%;
  transform: rotate(180deg);
}

.card-corner .card-rank {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card-corner .card-pip {
  font-style: normal;
  font-size: 0.82em;
  margin-top: -1px;
}

.card-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-w) * 0.46);
  opacity: 0.92;
}

/* Rank cards 2-10 get a pip layout instead of one giant center glyph */
.card-pips {
  position: absolute;
  inset: 14% 20%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  place-items: center;
  font-size: calc(var(--card-w) * 0.155);
}
.card-pips span { line-height: 1; }
.card-pips span.flip { transform: rotate(180deg); }
.card-pips span.empty { visibility: hidden; }

/* Face cards (J/Q/K) get a monogram-style badge instead of pips */
.card-face-badge {
  position: absolute;
  inset: 20% 16%;
  border: 1.5px solid currentColor;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0.9;
}
.card-face-badge .badge-letter {
  font-weight: 700;
  font-size: calc(var(--card-w) * 0.30);
}
.card-face-badge .badge-suit {
  font-size: calc(var(--card-w) * 0.20);
}

/* ---------- Face-down card (card back) ---------- */

.card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  background:
    linear-gradient(135deg, var(--card-back-2), var(--card-back-1));
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 6px var(--card-shadow);
  overflow: hidden;
}

.card-back::before {
  /* brass diamond lattice pattern */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid var(--card-back-accent);
  border-radius: 4px;
  background-image:
    linear-gradient(45deg, var(--card-back-accent) 1px, transparent 1px),
    linear-gradient(-45deg, var(--card-back-accent) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.35;
}

.card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46%;
  height: 30%;
  border: 1.5px solid var(--card-back-accent);
  border-radius: 50%;
  opacity: 0.55;
}

/* ---------- Interaction states (generic, game-agnostic) ---------- */

.card.is-selected .card-face {
  box-shadow:
    0 0 0 3px var(--card-back-accent),
    0 6px 14px var(--card-shadow);
  transform: translateY(-4px);
}

.card.is-disabled {
  filter: saturate(0.6) brightness(0.92);
}

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

.card.is-dragging {
  opacity: 0.55;
}

.card.is-hint .card-face {
  box-shadow:
    0 0 0 3px rgba(201, 162, 75, 0.9),
    0 6px 14px var(--card-shadow);
}

/* Small size modifier, e.g. for previews or compact UI */
.card.card--sm {
  --card-w: 46px;
  --card-h: 64px;
}