/* ===== Spider Solitaire — game-specific styles =====
   Everything generic (bar, buttons, glass, cards, modal, toast) lives in
   shared/css/glass.css. This file only re-tints the theme and handles the
   10-column geometry + the completed-runs collector. */

:root {
  /* Spider wears a magenta/violet accent over the default indigo glass. */
  --accent-1: #b83bf0;
  --accent-2: #ff5f9e;
  --on-accent: #24041c;
  --back-1: #7b3ff2;
  --back-2: #45219c;
}

.c-app {
  /* Board sizing var shared with the .c-board width calc below. */
  --fpad: clamp(10px, 3vw, 30px);
}

.c-board {
  --gap: clamp(4px, 1.1vw, 14px);
  /* 10 columns + gaps + felt padding + scrollbar buffer must fit the viewport:
     no fixed floor, so phones get small cards instead of a h-scroll. */
  --cw: min(82px, calc((100vw - 9 * var(--gap) - 2 * var(--fpad) - 16px) / 10));
  --ch: calc(var(--cw) * 1.42);
  width: calc(10 * var(--cw) + 9 * var(--gap));
}

/* Upper row shares the 10-column rhythm: runs span cols 1-8, stock sits col 10. */
.sp-upper {
  display: grid;
  grid-template-columns: repeat(10, var(--cw));
  column-gap: var(--gap);
  align-items: start;
  margin-bottom: calc(var(--ch) * 0.24);
}
#stock { grid-column: 10; }

.sp-runs {
  grid-column: 1 / span 8;
  display: flex;
  gap: calc(var(--cw) * 0.08);
  min-height: calc(var(--ch) * 0.66);
  align-items: end;
}
/* Miniature K-card token per collected suit. */
.sp-run {
  width: calc(var(--cw) * 0.62);
  height: calc(var(--ch) * 0.66);
  border-radius: calc(var(--cw) * 0.07);
  background: var(--card-face);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--card-edge);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cw) * 0.36);
  color: var(--card-black);
  animation: spRunIn .3s ease;
}
.sp-run--red { color: var(--card-red); }
@keyframes spRunIn { from { transform: translateY(14px) scale(.7); opacity: 0; } }

/* Deal counter under the stock slot. */
.sp-stock-n {
  position: absolute;
  left: 0; right: 0; bottom: -20px;
  text-align: center;
  font-size: 11px; font-weight: 600;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}