/* ============================================================
   SOLITAIRE TARGETS KIT — desktop selection, drop targets and hover.
   Master copy: kit/solitaire/solitaire-targets.css. Copied byte-identical
   into each game that has joined by kit/solitaire/build.js; never edit a
   game's copy. Linked LAST, after the game's own board file.
   Ronan 2026-10-29 (briefs/freecell-decisions.md), from player feedback
   "card selection and drop targets to be a little clearer on desktop":
   - selection gold, targets blue; each ring 3px colour + 1.5px dark edge,
     so one band reaches 3:1 on the bright felt centre and the dark edge
   - the selected card (and the whole run with it) lifts 8px — 10px covered
     the index of the card above it (Ronan 2026-10-29, "8px lift, +5px space")
   - mouse hover: a card that can be picked up rises 2px, pointer cursor
   - desktop only; phones keep the card kit's treatment
   FreeCell joins first; the other solitaires join at their own audits.
   A game that joins also gives its instruction line room for the lift:
   8px lift + 4.5px ring + the 8px standing gap.
   ============================================================ */
.kl-game[data-layout="desk"]{
  --st-sel:#F0B84B;          /* selection: the family's action gold */
  --st-target:#78C6E8;       /* a place the selection can go */
  --st-edge:#0A1F12;         /* the dark outer edge of every ring */
  --st-ring:3px; --st-edge-w:1.5px;
  --st-lift:8px; --st-hover:2px;
}

/* the selection: gold ring, dark edge, lifted (the controller marks every card of the run) */
.kl-game[data-layout="desk"] .k-card.selected{
  outline:none;
  box-shadow:0 0 0 var(--st-ring) var(--st-sel), 0 0 0 calc(var(--st-ring) + var(--st-edge-w)) var(--st-edge), 0 12px 20px rgba(0,0,0,.40);
  transform:translateY(calc(-1 * var(--st-lift)));
}

/* a place the selection can go (Coach on), and the place under a drag when the
   drop there is legal (Coach on and off): blue ring, dark edge */
.kl-game[data-layout="desk"] .can-drop > .k-card:last-child,
.kl-game[data-layout="desk"] .is-landing > .k-card:last-child,
.kl-game[data-layout="desk"] .k-slot.can-drop,
.kl-game[data-layout="desk"] .k-slot.is-landing,
.kl-game[data-layout="desk"] .is-empty.can-drop::after,
.kl-game[data-layout="desk"] .is-empty.is-landing::after{
  border-color:var(--st-target); border-style:solid;
  box-shadow:0 0 0 var(--st-ring) var(--st-target), 0 0 0 calc(var(--st-ring) + var(--st-edge-w)) var(--st-edge);
}
/* a lit place takes a faint blue fill, never the old gold one */
.kl-game[data-layout="desk"] .k-slot.can-drop{ background:rgba(120,198,232,.12); }
/* the place under a drag is filled as well, so it reads as "here" */
.kl-game[data-layout="desk"] .k-slot.is-landing,
.kl-game[data-layout="desk"] .is-empty.is-landing::after{ background:rgba(120,198,232,.24); }
.kl-game[data-layout="desk"] .is-landing > .k-card:last-child{
  box-shadow:0 0 0 var(--st-ring) var(--st-target), 0 0 0 calc(var(--st-ring) + var(--st-edge-w)) var(--st-edge), 0 0 14px 4px rgba(120,198,232,.55);
}
/* the board's own dashed column outline is replaced by the ring above */
.kl-game[data-layout="desk"] .can-drop::before,
.kl-game[data-layout="desk"] .is-landing::before{ display:none; }

/* mouse hover: a card that can be picked up rises and shows a pointer */
@media (hover:hover) and (pointer:fine){
  .kl-game[data-layout="desk"] .k-card.can-pick{ cursor:pointer; }
  .kl-game[data-layout="desk"] .k-card.can-pick:not(.selected):not(.dragging):not(.is-flying):hover{ transform:translateY(calc(-1 * var(--st-hover))); }
}

/* reduced motion: the family keeps a selected card in place; the rings stay */
@media (prefers-reduced-motion: reduce){
  .kl-game[data-layout="desk"] .k-card.selected,
  .kl-game[data-layout="desk"] .k-card.can-pick:hover{ transform:none; }
}