/* zen-card.css — playing-card face (ivory, fixed).
   Tokens: --zen-card-* from zen-tokens.css (generated).
   Box layout is on suit modifiers so it does not collide with UI .zen-card.
   Isolate from inherited body/Tailwind line-height (1.5 → 24px) so prototype
   and static demos share the same glyph box. */

.zen-card--spade,
.zen-card--club,
.zen-card--heart,
.zen-card--diamond,
.zen-card--back {
  --zen-card-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Optical shift of the rank+suit ink toward the card's geometric centre.
     Positive Y moves ink down. 1px = 4 device pixels at dsf 4 (avoid 1.2 → 4.8 round). */
  --zen-card-optical-y: 1px;
  width: var(--zen-card-w);
  height: var(--zen-card-h);
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zen-card-gap);
  background: var(--zen-card-face);
  border: 1px solid var(--zen-card-border);
  border-radius: var(--zen-card-radius);
  box-shadow: var(--zen-card-shadow);
  box-sizing: border-box;
  vertical-align: middle;
  font-family: var(--zen-card-font);
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.zen-card__rank,
.zen-card__suit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  color: var(--zen-card-c);
  translate: 0 var(--zen-card-optical-y);
}

.zen-card__rank {
  font-family: var(--zen-card-font);
  font-weight: 500;
  font-size: var(--zen-card-rank-size);
  line-height: 1;
  height: var(--zen-card-rank-size);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.zen-card__suit {
  font-family: "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
  font-size: var(--zen-card-suit-size);
  line-height: 1;
  height: var(--zen-card-suit-size);
}

.zen-card--spade { --zen-card-c: var(--zen-card-suit-spade); }
.zen-card--club { --zen-card-c: var(--zen-card-suit-club); }
.zen-card--heart { --zen-card-c: var(--zen-card-suit-heart); }
.zen-card--diamond { --zen-card-c: var(--zen-card-suit-diamond); }

/* Face-down / unrevealed: logo ground + Z/P. No rank/suit leak. Same in every mode. */
.zen-card--back {
  position: relative;
  background: var(--zen-card-back-bg);
  background-image: none;
  border: var(--zen-card-back-border);
  box-shadow: none;
  color: var(--zen-card-back-ink);
  gap: var(--zen-card-back-letter-gap);
}

.zen-card--back::before {
  content: "";
  position: absolute;
  inset: var(--zen-card-back-inner-inset);
  border: var(--zen-card-back-inner-width) solid var(--zen-card-back-inner-color);
  border-radius: var(--zen-card-back-inner-radius);
  pointer-events: none;
}

.zen-card__back-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zen-card-back-letter-gap);
  margin: 0;
  padding: 0;
  translate: 0 var(--zen-card-back-optical-y);
  font-size: 0;
  line-height: 0;
}

.zen-card__back-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: var(--zen-font-logo);
  font-weight: 500;
  font-size: var(--zen-card-back-letter-size);
  line-height: 1;
  height: var(--zen-card-back-letter-size);
  color: var(--zen-card-back-ink);
}

.zen-card__rank[data-r="K"] { transform: translateX(-0.5px); }
.zen-card__rank[data-r="J"] { transform: translateX(0.5px); }
.zen-card__rank:is([data-r="T"], [data-r="7"], [data-r="2"]) { transform: translateX(-0.12px); }
.zen-card--diamond .zen-card__suit { transform: translateX(0.12px); }

/* ── Card picker (filled cells). Selection UI only — not for prose / hand / board. */
.zen-card-picker-host {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.zen-card-picker {
  display: grid;
  grid-template-columns: repeat(13, var(--zen-card-picker-cell-w));
  grid-auto-rows: var(--zen-card-picker-cell-h);
  gap: var(--zen-card-picker-gap);
  width: max-content;
  max-width: 100%;
}

.zen-card-picker__cell {
  position: relative;
  box-sizing: border-box;
  width: var(--zen-card-picker-cell-w);
  height: var(--zen-card-picker-cell-h);
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--zen-card-fill-border);
  border-radius: var(--zen-card-picker-radius);
  background: var(--zen-card-fill-bg);
  color: var(--zen-card-fill-fg);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--zen-card-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  appearance: none;
  -webkit-appearance: none;
}

.zen-card-picker__cell--spade { --zen-card-fill-bg: var(--zen-card-fill-spade-bg); }
.zen-card-picker__cell--heart { --zen-card-fill-bg: var(--zen-card-fill-heart-bg); }
.zen-card-picker__cell--diamond { --zen-card-fill-bg: var(--zen-card-fill-diamond-bg); }
.zen-card-picker__cell--club { --zen-card-fill-bg: var(--zen-card-fill-club-bg); }

.zen-card-picker__rank,
.zen-card-picker__suit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: inherit;
  translate: 0 var(--zen-card-picker-optical-y);
}

.zen-card-picker__rank {
  font-weight: 500;
  font-size: var(--zen-card-picker-rank-size);
  line-height: 1;
  height: var(--zen-card-picker-rank-size);
  font-variant-numeric: tabular-nums;
}

.zen-card-picker__suit {
  font-family: "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
  font-size: var(--zen-card-picker-suit-size);
  line-height: 1;
  height: var(--zen-card-picker-suit-size);
}

.zen-card-picker__cell:hover:not([aria-disabled="true"]):not([aria-pressed="true"]),
.zen-card-picker__cell.is-hover:not([aria-disabled="true"]):not([aria-pressed="true"]) {
  box-shadow: inset 0 0 0 2px var(--zen-card-picker-hover-ring);
}

.zen-card-picker__cell[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--zen-bg),
    0 0 0 4px var(--zen-card-picker-selected-ring);
}

.zen-card-picker__cell[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--zen-card-picker-check-border);
  background: var(--zen-card-picker-check-bg);
  color: var(--zen-card-picker-check-fg);
  font-family: var(--zen-card-font, "Inter", ui-sans-serif, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}

.zen-card-picker__cell[aria-disabled="true"] {
  background: color-mix(in srgb, var(--zen-card-fill-bg) var(--zen-card-picker-used-mix), var(--zen-bg));
  /* Light: --zen-card-picker-used-fg is unset on :root, so fall back to the cell fill (suit). */
  color: var(--zen-card-picker-used-fg, var(--zen-card-fill-bg));
  cursor: not-allowed;
  pointer-events: none;
}

.zen-card-picker__cell:focus {
  outline: none;
}

.zen-card-picker__cell:focus-visible {
  outline: 2px solid var(--zen-focus-ring);
  outline-offset: 2px;
}

.zen-card-picker-host,
.zen-card-picker {
  --zen-card-picker-check-size-compact: 7px;
  --zen-card-picker-check-font-compact: 5px;
}

@media (max-width: 390px) {
  .zen-card-picker {
    --zen-card-picker-cell-w: var(--zen-card-picker-cell-w-compact);
    --zen-card-picker-cell-h: var(--zen-card-picker-cell-h-compact);
    --zen-card-picker-gap: var(--zen-card-picker-gap-compact);
    --zen-card-picker-rank-size: var(--zen-card-picker-rank-size-compact);
    --zen-card-picker-suit-size: var(--zen-card-picker-suit-size-compact);
    --zen-card-picker-optical-y: var(--zen-card-picker-optical-y-compact);
  }

  .zen-card-picker__cell {
    overflow: hidden;
    /* Inset flex content so the rank/suit boxes sit left of the 7px check (1px box gap). */
    padding-right: calc(var(--zen-card-picker-check-size-compact) + 1px);
  }

  .zen-card-picker__cell[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--zen-card-picker-selected-ring);
  }

  .zen-card-picker__cell[aria-pressed="true"]::after {
    width: var(--zen-card-picker-check-size-compact);
    height: var(--zen-card-picker-check-size-compact);
    font-size: var(--zen-card-picker-check-font-compact);
    top: 0;
    right: 0;
  }
}

@container (max-width: 390px) {
  .zen-card-picker {
    --zen-card-picker-cell-w: var(--zen-card-picker-cell-w-compact);
    --zen-card-picker-cell-h: var(--zen-card-picker-cell-h-compact);
    --zen-card-picker-gap: var(--zen-card-picker-gap-compact);
    --zen-card-picker-rank-size: var(--zen-card-picker-rank-size-compact);
    --zen-card-picker-suit-size: var(--zen-card-picker-suit-size-compact);
    --zen-card-picker-optical-y: var(--zen-card-picker-optical-y-compact);
  }

  .zen-card-picker__cell {
    overflow: hidden;
    padding-right: calc(var(--zen-card-picker-check-size-compact) + 1px);
  }

  .zen-card-picker__cell[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--zen-card-picker-selected-ring);
  }

  .zen-card-picker__cell[aria-pressed="true"]::after {
    width: var(--zen-card-picker-check-size-compact);
    height: var(--zen-card-picker-check-size-compact);
    font-size: var(--zen-card-picker-check-font-compact);
    top: 0;
    right: 0;
  }
}