/* ============================================================
   SOLITAIRE CARD KIT — the card face, covered cards, selection,
   drag, hint glow and score delta, shared by the solitaire family.
   Master copy: kit/solitaire/solitaire-cards.css. Copied
   byte-identical into each game by kit/solitaire/build.js; never
   edit a game's copy (Ronan 2026-10-18, "Shared card kit": a fix
   lands once). Linked after solitaire-family.css and before the
   game's own board file, which keeps only its board-specific rules.
   All six solitaires use it (Ronan 2026-10-18), and every new one does.
   ============================================================ */
.k-card{
  position:relative; width:var(--k-card-w); height:var(--k-card-h);
  background:var(--card-bg); color:var(--card-black); border-radius:var(--radius-sm);
  box-shadow:0 1px 1px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.28);
  padding:3px 4px; box-sizing:border-box; cursor:grab; user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.k-card.red{ color:var(--card-red); }
.k-card .corner{
  position:absolute; left:4px; top:3px; display:flex; flex-direction:column; align-items:center;
  font-family:var(--font-ui); font-weight:800; line-height:1;
  font-size:max(13px, calc(var(--k-card-w) * .27));
}
.k-card .corner .s{ font-size:.92em; margin-top:1px; }
.k-card .corner.bottom{ left:auto; top:auto; right:4px; bottom:3px; transform:rotate(180deg); }
.k-card .pip{
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  font-size:calc(var(--k-card-w) * .40); line-height:1;
}
/* Q7: a covered face-up card shows rank and suit side by side, so both are
   inside the face-up step; its pip and bottom corner are under the next card. */
.k-card.is-covered .corner:not(.bottom){ flex-direction:row; align-items:baseline; font-size:var(--k-idx-fs); }
.k-card.is-covered .corner:not(.bottom) .s{ margin-top:0; margin-left:1px; font-size:1em; }
.k-card.is-covered .pip, .k-card.is-covered .corner.bottom{ visibility:hidden; }
/* F20 (Ronan 2026-10-18): a covered card selected on its own is drawn above the
   cards below it, so its face shows in full — the suit at the bottom right included.
   The covered-card corner rules above style the TOP corner only, so the bottom
   corner keeps its printed-card place when it shows. */
.k-card.is-covered.selected .pip, .k-card.is-covered.selected .corner.bottom{ visibility:visible; }
/* Narrow cards (phones): the top corner and one large suit, no second corner
   (§55: no decorative pips that damage clarity). */
.kl-game.is-narrow .k-card .corner.bottom{ display:none; }
.kl-game.is-narrow .k-card .pip{ top:auto; left:auto; right:3px; bottom:2px; transform:none; font-size:calc(var(--k-card-w) * .46); }

/* §29 — selection: lift, gold outline, raised. */
.k-card.selected{ outline:2px solid var(--action); outline-offset:1px; transform:translateY(-5px); z-index:40; box-shadow:0 8px 16px rgba(0,0,0,.34); }
.k-card.dragging{ cursor:grabbing; z-index:500; box-shadow:0 10px 20px rgba(0,0,0,.45); }

@keyframes kGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,184,75,0); } 40%{ box-shadow:0 0 0 4px rgba(240,184,75,.95); } }
.k-hint-glow{ animation:kGlow 1.1s ease-in-out 2; }

.k-score-delta{
  position:absolute; pointer-events:none; z-index:600;
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  color:#A7F0C2; background:var(--kl-plate-strong); border-radius:6px; padding:1px 6px;
  animation:kDelta .9s ease-out forwards;
}
.k-score-delta.is-negative{ color:#FFB3B8; }
@keyframes kDelta{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 100%{ transform:translateY(-22px); opacity:0; } }