/*
 * guide.css — Go board geometry for the animated guide (2026-07 rebuild).
 *
 * Go is played ON THE LINE CROSSINGS, not inside squares, so every figure here
 * draws a real goban: the wood texture (the app's own `go_board` art, resolved
 * through data-piece) with the size-specific grid ruled on top — exactly how
 * GCArena's BoardSurfaceView renders the live board — and real stone images
 * (`go_black` / `go_white`) centred on the intersections.
 *
 * Geometry contract, so one stylesheet serves every board size:
 *   .go-goban  --n = number of LINES (9, 13 or 19); a square box of side W
 *   .go-grid   inset by 50%/n on every edge (an `inset` percentage resolves
 *              against the GOBAN, unlike a percentage padding, which would
 *              resolve against the parent) - so the ruled field is W(n-1)/n
 *              wide and one cell is exactly W/n, leaving the half-cell wood
 *              margin a real board has. Children sit on crossings with
 *              --c (column, 0-based) and --r (row, 0-based from the top)
 *
 * No colour is hardcoded: the wood comes from the real board image, everything
 * else from the --gc-* theme variables.
 */

/* ---- 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 rgba(0, 0, 0, 0.18);
}

.go-goban.lg { max-width: 340px; }

/* The real goban texture, behind the ruled lines. */
.go-boardimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The ruled area: lines at every crossing of the (n-1) x (n-1) cell field. */
.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;
}

/* The goban is real wood art in both themes, so its ruling is a fixed dark ink
   (the same choice BoardGeometry makes for the live board) rather than the
   theme text colour, which would vanish on the light wood in dark mode. */
.go-goban { --go-ink: #2b1c0b; }

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

/*
 * A marker is centred on its crossing with NEGATIVE MARGINS, not a transform:
 * the motion classes (anim-pop, anim-strike, ...) animate `transform`, and a
 * centring translate would be overwritten the moment a figure animates. Every
 * percentage below resolves against the ruled field's width - including
 * margin-top, which CSS also resolves against the containing block's width -
 * and the field is square, so one number centres both axes.
 * Each marker class only declares its diameter in --sz (percent of one cell).
 */
.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: 2;
}

/* A star point (hoshi) - the small 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, marked. */
.go-lib {
  --sz: 54%;
  border-radius: 50%;
  border: 2px solid var(--gc-accent);
  z-index: 3;
}

/* An enclosed point that scores - small filled dot in the owner's colour. */
.go-terr {
  --sz: 36%;
  border-radius: 50%;
  background: var(--gc-success);
  opacity: 0.92;
  z-index: 3;
}
.go-terr.foe { background: var(--gc-warning); }

/* A neutral point (dame) - belongs to nobody. It always sits on the wood, so
   it is marked in the board's own ink rather than the theme text colour, which
   would disappear against the light goban in a dark theme. */
.go-dame {
  --sz: 40%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--go-ink) 72%, transparent);
  z-index: 3;
}

/* The forbidden point (ko / suicide) - a crossed-out crossing. */
.go-ban {
  --sz: 74%;
  border-radius: 50%;
  border: 2px solid var(--gc-error);
  color: var(--gc-error);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 3.4vw, 15px);
  line-height: 1;
  z-index: 4;
}

/* Where the reader taps. */
.go-tap {
  --sz: 80%;
  border-radius: 50%;
  border: 2px dashed var(--gc-accent);
  z-index: 3;
}

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

/* Side-by-side legal / illegal frames stay readable on a phone. */
.gc-vs .go-goban { max-width: 170px; }

/* Coordinates rail for the interface chapter. */
.go-coords {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gc-text);
  opacity: 0.72;
}

/* A mock of the real play screen: panels, turn pill, board, ticker, buttons. */
.go-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
}

.go-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
  font-size: 12.5px;
  font-weight: 600;
}
.go-panel .go-avatar { font-size: 17px; }
.go-panel .go-meta {
  margin-inline-start: auto;
  font-size: 11.5px;
  opacity: 0.75;
  letter-spacing: 0.04em;
}

.go-pill {
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gc-accent);
  color: var(--gc-bg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.go-ticker {
  display: flex;
  gap: 6px;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 700;
  justify-content: center;
}
.go-ticker span {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
  white-space: nowrap;
}

.go-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.go-button {
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid var(--gc-border);
  background: var(--gc-glass);
  font-size: 12px;
  font-weight: 700;
}
.go-button.danger { color: var(--gc-error); border-color: var(--gc-error); }

/* The scoring legend (what each mark on a counted board means). */
.go-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.go-legend-row { display: flex; align-items: center; gap: 7px; }
.go-legend-mark {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gc-success);
}
.go-legend-mark.foe { background: var(--gc-warning); }
.go-legend-mark.dame { background: var(--gc-text); opacity: 0.55; border-radius: 2px; }
.go-legend-mark.stone { background: transparent; }
.go-legend-mark.stone img { width: 15px; height: 15px; border-radius: 50%; display: block; }

/* The two-pass ending strip. */
.go-passes {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
}
.go-passchip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.go-passchip.done { border-color: var(--gc-success); color: var(--gc-success); }
.go-arrow { opacity: 0.6; }

/* The score strip's per-side rows (worked count). */
.go-count { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* Two figures shown side by side (a rule and its contrast) without the
   legal/illegal verdict marks - both frames here are perfectly legal, one
   simply survives and the other does not. */
.go-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.go-pair .go-goban { max-width: 190px; }
@media (max-width: 380px) { .go-pair { grid-template-columns: 1fr; } }

/* Resting frame for a capture: with motion switched off the struck stone must
   read as GONE, because that is the position the engine actually produces. */
html[data-reduce="1"] .go-stone.anim-strike { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .go-stone.anim-strike { opacity: 0; }
}