/*
 * guide.css — Spades-specific geometry on top of the shared _shared/base.css.
 * Only layout lives here; every colour comes from the --gc-* theme variables.
 * No literal copy, no baked-in text. Shared byte-for-byte by the partnership
 * guide (this folder) and the Cutthroat guide (spades.cutthroat/).
 */

/* ---- Chips: bids, tallies, deal scores -------------------------------- */
.sp-chip {
  min-width: clamp(38px, 11vw, 48px);
  height: clamp(38px, 11vw, 48px);
  padding: 0 10px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(15px, 4.4vw, 19px);
  line-height: 1;
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.sp-chip.mine { background: var(--gc-accent);  color: var(--gc-bg); border-color: transparent; }
.sp-chip.gold { background: var(--gc-warning); color: var(--gc-bg); border-color: transparent; }
.sp-chip.bag  { background: color-mix(in srgb, var(--gc-warning) 30%, transparent); }
.sp-chip.nil  { background: var(--gc-error);   color: #fff;         border-color: transparent; }

.sp-op {
  font-weight: 800;
  font-size: clamp(17px, 5vw, 22px);
  line-height: 1;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}

/* A contract line: chips + operators, wrapping on narrow screens. */
.sp-contract {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Trick tallies: one tick per trick taken; `.bag` marks an overtrick. */
.sp-ticks { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.sp-tick {
  width: clamp(20px, 6vw, 26px);
  height: clamp(20px, 6vw, 26px);
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 800;
  color: var(--gc-bg);
  background: var(--gc-success);
}
.sp-tick.bag { background: var(--gc-warning); }

/* ---- Four-seat table --------------------------------------------------- */
.sp-table { max-width: 320px; }
.sp-table-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 8vw, 44px);
  width: 100%;
}
.sp-seat {
  width: clamp(40px, 12vw, 52px);
  height: clamp(40px, 12vw, 52px);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(15px, 4.4vw, 19px);
  color: var(--gc-bg);
}
.sp-seat.a { background: var(--gc-accent); }
.sp-seat.b { background: color-mix(in srgb, var(--gc-text) 45%, var(--gc-bg)); }
/* Cutthroat: four independent seats, no shared colour. */
.sp-seat.solo {
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
  color: var(--gc-text);
}
.sp-emblem {
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1;
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}

/* ---- Card strips ------------------------------------------------------- */
.sp-rankstrip,
.sp-duel,
.sp-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sp-gap {
  font-size: clamp(16px, 5vw, 20px);
  font-weight: 800;
  color: color-mix(in srgb, var(--gc-text) 45%, transparent);
  padding: 0 2px;
}
/* The four cards of one trick, laid on the felt. */
.sp-trick {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
/* The card that takes the trick. */
.sp-winner {
  outline: 2px solid var(--gc-warning);
  outline-offset: 2px;
  border-radius: var(--gc-radius-sm);
}
/* A card the rules currently forbid you to lead. */
.is-locked { opacity: 0.4; filter: grayscale(1); }

/* ---- The bid sheet ----------------------------------------------------- */
.sp-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sp-bidbtn {
  min-width: clamp(36px, 10vw, 44px);
  height: clamp(36px, 10vw, 44px);
  padding: 0 8px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(14px, 4vw, 17px);
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.sp-bidbtn.nil { border-color: var(--gc-error); color: var(--gc-error); }
.sp-bidbtn.is-picked {
  background: var(--gc-accent);
  color: var(--gc-bg);
  border-color: transparent;
}

/* ---- The play screen mock --------------------------------------------- */
.sp-screen { gap: 10px; max-width: 360px; }
.sp-statusbar,
.sp-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-pill,
.sp-btn {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
/* The contract banner the shell shows during play ("Bids: …"). */
.sp-banner {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gc-bg);
  background: var(--gc-warning);
}
.sp-oppseat { display: flex; align-items: center; gap: 8px; }
.sp-avatar { font-size: 22px; line-height: 1; }
/* The per-seat tricks-taken capsule. */
.sp-capsule {
  min-width: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: var(--gc-bg);
  background: var(--gc-accent);
}
.sp-myhand { --overlap: calc(var(--gc-card-w) * -0.34); }

/* ---- The match: one chip per deal, racing to the target ---------------- */
.sp-serial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sp-dealchip {
  padding: 7px 13px;
  border-radius: 10px;
  font-weight: 800;
  font-size: clamp(13px, 4vw, 16px);
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.sp-dealchip.gold { background: var(--gc-warning); color: var(--gc-bg); border-color: transparent; }

/* A losing total in a worked-example strip. */
.gc-math .gc-math-total.is-loss { background: var(--gc-error); color: #fff; }

/* ---- Cutthroat: one column per player --------------------------------- */
.sp-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 3vw, 18px);
  width: 100%;
}
.sp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.sp-col .sp-ticks { max-width: 76px; }
/* "took none" — the made-nil column has no tick to show. */
.sp-tick.none {
  background: transparent;
  border: 1px dashed var(--gc-border);
  color: color-mix(in srgb, var(--gc-text) 50%, transparent);
}
.sp-dealchip.is-loss { background: var(--gc-error); color: #fff; border-color: transparent; }

/* How many tricks a seat still needs (or a tick when its contract is safe). */
.sp-need {
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  color: var(--gc-bg);
  background: var(--gc-accent);
}
.sp-need.done    { background: var(--gc-success); }
.sp-need.bagging { background: var(--gc-warning); }