.joseki-card-dialog {
  inline-size: min(52rem, calc(100vw - 2rem));
}

.j-card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.j-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: var(--surface-text);
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
}

.j-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--color-shadow-accent);
}

.j-card__board {
  aspect-ratio: var(--j-card-board-width, 1) / var(--j-card-board-height, 1);
  align-self: center;
  inline-size: min(
    100%,
    calc(var(--j-card-board-width, 1) / var(--j-card-board-height, 1) * 8.5rem)
  );
  max-block-size: 8.5rem;
  box-sizing: border-box;
  padding: var(--j-card-edge-pad, 0.38rem);
  background-color: var(--board-bg);
  border: 1px solid var(--board-border);
  border-radius: var(--radius-sm);
  display: grid;
  overflow: visible;
  position: relative;
}

.j-card__line {
  background: var(--board-line);
  position: absolute;
}

.j-card__line--vertical {
  block-size: calc(100% - 2 * var(--j-card-edge-pad, 0.38rem));
  inline-size: 1px;
  left: calc(
    var(--j-card-edge-pad, 0.38rem) + var(--j-card-x) * (100% - 2 * var(--j-card-edge-pad, 0.38rem))
  );
  top: var(--j-card-edge-pad, 0.38rem);
}

.j-card__line--horizontal {
  block-size: 1px;
  inline-size: calc(100% - 2 * var(--j-card-edge-pad, 0.38rem));
  left: var(--j-card-edge-pad, 0.38rem);
  top: calc(
    var(--j-card-edge-pad, 0.38rem) + var(--j-card-y) * (100% - 2 * var(--j-card-edge-pad, 0.38rem))
  );
}

.j-card__line,
.j-card__stone {
  z-index: 1;
}

.j-card__stone {
  background: var(--stone-black);
  border-radius: 999px;
  block-size: var(--j-card-stone-size, 0.55rem);
  inline-size: var(--j-card-stone-size, 0.55rem);
  left: calc(
    var(--j-card-edge-pad, 0.38rem) + var(--j-card-x) * (100% - 2 * var(--j-card-edge-pad, 0.38rem))
  );
  position: absolute;
  top: calc(
    var(--j-card-edge-pad, 0.38rem) + var(--j-card-y) * (100% - 2 * var(--j-card-edge-pad, 0.38rem))
  );
  transform: translate(-50%, -50%);
}

.j-card__stone[data-color="2"] {
  background: var(--stone-white);
  box-shadow: inset 0 0 0 1px var(--stone-white-border);
}

.j-card__meta {
  color: var(--meta-text);
  font-size: 0.85rem;
}

.j-card-placement-preview {
  opacity: 0.72;
  pointer-events: none;
}