/*
 * mind.css — Go board geometry for the "For your mind" Tab B figures.
 *
 * Identical copy in every variant folder (go.9 / go.13 / go.19), because each
 * page is served as its own root. This is the SAME real-goban kit the
 * how-to-play guide uses (Resources/Guide/guide.css): Go is played ON THE LINE
 * CROSSINGS, so every figure draws the app's own `go_board` wood art with the
 * size-specific grid ruled over it and real `go_black` / `go_white` stone
 * images centred on the intersections — never a stone inside a square, never a
 * coloured disc standing in for a stone (GUIDE_REVIEW_STANDARD §10).
 *
 * Geometry contract (one stylesheet serves every board size):
 *   .go-goban  --n = number of LINES (9, 13 or 19); a square box
 *   .go-grid   inset by 50%/n on every edge (an `inset` percentage resolves
 *              against the goban, unlike a percentage padding), so one cell is
 *              exactly W/n and the half-cell wood margin of a real board stays
 *   .on-point  sits on a crossing via --c (column) and --r (row), 0-based
 *
 * No colour is hardcoded: the wood is the real board image, the ruling is the
 * board's own ink (as BoardGeometry does for the live board because the theme
 * text colour would vanish against light wood in dark mode), everything else
 * comes from the --gc-* theme variables. No baked-in text.
 */

/* ---- The goban ---------------------------------------------------------- */

.go-goban {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
  box-shadow: 0 6px 18px var(--gc-glass);
  --go-ink: #2b1c0b;
}

.go-boardimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.go-grid {
  position: absolute;
  inset: calc(50% / var(--n));
  --cell: calc(100% / (var(--n) - 1));
  background-image:
    repeating-linear-gradient(to right,
      var(--go-ink) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom,
      var(--go-ink) 0 1px, transparent 1px var(--cell));
  border-right: 1px solid var(--go-ink);
  border-bottom: 1px solid var(--go-ink);
  opacity: 0.92;
}

/* ---- Things that sit ON a crossing -------------------------------------- */

/*
 * Centred with NEGATIVE MARGINS, not a transform: the motion classes animate
 * `transform`, and a centring translate would be cancelled the moment a figure
 * animates. Every percentage resolves against the ruled field's width — which
 * is square — so one number centres both axes.
 */
.go-goban .on-point {
  position: absolute;
  left: calc(var(--c) * 100% / (var(--n) - 1));
  top: calc(var(--r) * 100% / (var(--n) - 1));
  width: calc(var(--sz) / (var(--n) - 1));
  height: auto;
  aspect-ratio: 1 / 1;
  margin-left: calc(var(--sz) / (var(--n) - 1) / -2);
  margin-top: calc(var(--sz) / (var(--n) - 1) / -2);
}

/* Real stone art, sized to just under one cell. */
.go-stone {
  --sz: 96%;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  z-index: 3;
}

/* A star point (hoshi) — the dot the real board prints. */
.go-star {
  --sz: 24%;
  border-radius: 50%;
  background: var(--go-ink);
  z-index: 1;
}

/* A liberty of the group being taught: an empty crossing, ringed. */
.go-lib {
  --sz: 54%;
  border-radius: 50%;
  border: 2px solid var(--gc-accent);
  box-sizing: border-box;
  z-index: 4;
}

/* The region a chapter is talking about: a soft tint over the crossings it
   covers, drawn UNDER the stones so it never hides one. */
.go-region {
  --sz: 118%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--gc-accent) 22%, transparent);
  z-index: 2;
}

/* A crossing on the line of play reaching out of a local fight. */
.go-link {
  --sz: 118%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--gc-warning) 26%, transparent);
  z-index: 2;
}

/* ---- Figure furniture ---------------------------------------------------- */

/* The board-size anchor. The numeral lives HERE, in markup — never in a
   localized value (SPEC_FOR_YOUR_MIND §0.5). */
.gm-kicker { margin: 0 0 8px; }
.gm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gc-bg);
  background: var(--gc-accent);
  vertical-align: middle;
}