/*
  diagrams.css — board diagrams in guides (chess, checkers, Go).
  Uses the existing MindLounge tokens (--ink, --panel, --line, --muted,
  --parchment, --brass, --purple, --font-mono) with fallbacks, so it also
  works on pages that don't load mindlounge.css.
*/

.ml-diagram {
  margin: 1.75rem auto;
  max-width: 420px;
}
.ml-diagram .ml-board {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.ml-diagram figcaption {
  margin-top: .6rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--muted, #9aa3c0);
  text-align: center;
}

/* partial Go boards are small; don't blow them up */
.ml-diagram--crop { max-width: 300px; }

/* two diagrams side by side on wide screens */
.ml-diagram-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
}
.ml-diagram-row .ml-diagram { margin: 0 auto; width: 100%; }

/* ---- squares, coordinates, highlights, arrows (chess + checkers) ---- */
.ml-board { background: var(--panel, #1e2847); }
.ml-sq-light { fill: #c8cfe0; }
.ml-sq-dark  { fill: #6f7ea8; }
.ml-hl       { fill: var(--brass, #33f2b0); fill-opacity: .42; }
.ml-danger   { fill: var(--purple, #a76bff); fill-opacity: .45; }
.ml-coord {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .28px;
  fill: var(--muted, #9aa3c0);
}
.ml-arrow line    { stroke: var(--brass, #33f2b0); stroke-opacity: .9; }
.ml-arrow polygon { fill: var(--brass, #33f2b0); fill-opacity: .9; }

/* ---- chess pieces (filled glyphs, outlined) ---- */
.ml-piece {
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", "Apple Symbols", serif;
  font-size: .86px;
  paint-order: stroke;
  stroke-linejoin: round;
}
.ml-piece-w { fill: #fbfcff; stroke: #1b2238; stroke-width: .045px; }
.ml-piece-b { fill: #151a2c; stroke: #151a2c; stroke-width: .02px; }

/* ---- checkers ---- */
.ml-diagram--checkers .ml-sq-dark  { fill: #4a5b8f; }
.ml-diagram--checkers .ml-sq-light { fill: #c8cfe0; }
.ml-man   { stroke-width: .04px; }
.ml-man-ring { fill: none; stroke-width: .03px; }
.ml-man.ml-man-w      { fill: #f3f5fb; stroke: #9aa3c0; }
.ml-man-ring.ml-man-w { stroke: #b9c0d6; }
.ml-man.ml-man-b      { fill: #11162a; stroke: #c8cfe0; stroke-width: .035px; }
.ml-man-ring.ml-man-b { stroke: #56628c; }
.ml-crown {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: .36px;
}
.ml-crown-w { fill: #7b5cd6; }
.ml-crown-b { fill: var(--brass, #33f2b0); }
.ml-sqnum {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .3px;
  fill: #aab4d4;
}

/* ---- Go ---- */
.ml-go-wood  { fill: #d9b46a; }
.ml-go-line  { stroke: #3d2f15; stroke-width: .035px; }
.ml-go-edge  { stroke-width: .06px; }
.ml-go-hoshi { fill: #3d2f15; }
.ml-go-coord { fill: #5b4722; font-size: .32px; }
.ml-stone-b  { fill: #14161c; stroke: #000; stroke-width: .03px; }
.ml-stone-w  { fill: #f7f7f2; stroke: #6b6a63; stroke-width: .03px; }
.ml-mark     { fill: none; stroke: #b32d6b; stroke-width: .07px; }
.ml-mark.ml-on-b { stroke: var(--brass, #33f2b0); }
.ml-mark.ml-on-w { stroke: #b32d6b; }
.ml-liberty  { fill: #1f8a63; }
.ml-go-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: .44px;
  fill: #2a1f0c;
}
.ml-go-label.ml-on-b { fill: #fff; }
.ml-go-label.ml-on-w { fill: #14161c; }

/* ---- "Show the answer" blocks in guides ---- */
.guide-answer {
  margin: 1rem 0 1.75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line, #333e6a);
  border-left: 3px solid var(--brass, #33f2b0);
  border-radius: .5rem;
  background: var(--panel, #1e2847);
}
.guide-answer summary { cursor: pointer; font-weight: 600; color: var(--brass, #33f2b0); }
.guide-answer p { margin: .6rem 0 0; }