/* SVG board styling shared by the forum app and the standalone challenge page.
   Kept in one file so the two boards cannot drift apart. Colour variables come
   from shared/go-board/board.css, which the importing stylesheet must load. */

/* Board face is painted by gradients declared per-SVG in app.js, so no blanket
   `rect { fill }` rule here — it would flatten them back out. */
.go-board-svg .board-edge {
  fill: none;
  stroke: var(--go-board-edge);
  stroke-width: 1.5;
}

.go-board-svg line {
  stroke: var(--go-board-line);
  stroke-width: 1.25;
  shape-rendering: crispEdges;
}

.go-board-svg .star {
  fill: #1d1b18;
}

.go-board-svg .coord {
  fill: #3a2b1c;
  font-size: 16px;
  font-weight: 760;
  user-select: none;
}

.go-board-svg .svg-stone circle {
  stroke: none;
}

.go-board-svg .svg-stone.white circle {
  stroke: rgba(21, 39, 37, 0.2);
  stroke-width: 1;
}

/* Last-move triangle: white on a black stone, ink on a white one. */
.go-board-svg .svg-stone .last-marker {
  fill: #ffffff;
  pointer-events: none;
}

.go-board-svg .svg-stone.white .last-marker {
  fill: #14211f;
}

.go-board-svg .svg-stone text {
  font-size: 20px;
  font-weight: 800;
  pointer-events: none;
}

.go-board-svg .svg-stone.black text {
  fill: #ffffff;
}

.go-board-svg .svg-stone.white text {
  fill: #121719;
}

/* Candidate points, answer markers and preview stones. These are all emitted by
   renderGoBoardSvg, so they have to live next to it — leaving them in the forum
   stylesheet meant the standalone challenge page drew unstyled candidates. */
.problem-stone { stroke: rgba(0,0,0,.2); stroke-width: 1; pointer-events: none; }
.problem-stone.black { fill: #17201d; } .problem-stone.white { fill: #f4f1e8; }
.answer-point { fill: transparent; cursor: pointer; } .answer-point:hover { fill: rgba(255,255,255,.42); }
.answer-mark { fill: none; stroke: #e8fff2; stroke-width: 2.5; pointer-events: none; }
.problem-board .go-board-svg { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 26px rgba(96,52,14,.28), 0 12px 26px rgba(58,40,18,.2); }
.problem-board .answer-point { stroke: none; }
.svg-candidate { cursor: pointer; outline: none; }
.svg-candidate circle { fill: var(--go-board-candidate); stroke: rgba(96,54,36,.55); stroke-width: 1.4; filter: drop-shadow(0 2px 2px rgba(40,24,12,.28)); }
.svg-candidate.best circle { fill: var(--go-board-candidate-best); stroke: #007e91; }
.svg-candidate.selected circle { stroke: #fff57a; stroke-width: 4; }
.svg-candidate text {
  fill: #2a1a10;
  font-weight: 850;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.svg-candidate .candidate-rank { font-size: 13.5px; }
.svg-candidate .candidate-winrate { font-size: 11.5px; }
.svg-candidate .candidate-score { font-size: 11px; }
.svg-candidate.answer-choice { cursor: pointer; }
/* `filter: none` matters: the generic `.svg-candidate circle` rule above carries
   a drop-shadow for the engine bubbles, and an unreset shadow would give these
   rings a physical, stone-like lift — the exact thing to avoid. */
.svg-candidate.answer-choice .candidate-hit-area { fill: transparent; stroke: none; filter: none; }

/* The lettered option reuses the engine-candidate bubble exactly: same
   translucent orange, same size, same shadow. Only the content differs — a
   letter instead of a win-rate figure. Inventing a second bubble style here was
   a mistake: an opaque one reads as a stone and destroys the shape reading Go
   depends on, and even a correct-looking new one is one more thing to keep in
   sync with the desktop board. */

/* font-size is set per board in the renderer so it scales with the grid. */
.svg-candidate .candidate-option {
  font-family: var(--mono);
  font-weight: 850;
  letter-spacing: .02em;
  pointer-events: none;
}

/* The score sits on bare wood, so it keeps a halo; the letter does not need one
   because it sits on the bubble. */
.svg-candidate .candidate-option-score {
  fill: #2a1a10;
  font-family: var(--mono);
  font-weight: 850;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(236, 210, 168, 0.85);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

/* After answering: best turns cyan (the colour this app already uses for the
   engine's top move), the point you picked keeps the yellow selection ring. */
.svg-candidate.answer-choice.is-best circle { fill: var(--go-board-candidate-best); stroke: #007e91; }
.svg-candidate.answer-choice.selected circle { stroke: #fff57a; stroke-width: 4; }

.svg-candidate.candidate-detail { pointer-events: auto; }
.svg-candidate.candidate-detail circle { fill: rgba(216, 126, 76, .86); stroke: #bd6031; }
.svg-candidate.candidate-detail.best circle { fill: rgba(66, 182, 196, .9); stroke: #14798a; }
.svg-candidate.candidate-detail.focused circle { stroke: #fff7b0; stroke-width: 4; transform-box: fill-box; transform-origin: center; transform: scale(1.18); }
.svg-candidate.candidate-detail .candidate-rank { fill: #c8333c; font-size: 13px; }
.svg-candidate.candidate-detail .candidate-primary {
  fill: #241c12;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 850;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.svg-preview-stone { pointer-events: none; opacity: .62; }
.svg-preview-stone circle { fill: none; stroke: #372d21; stroke-dasharray: 5 4; stroke-width: 2.2; }
.svg-preview-stone.black circle { fill: rgba(25, 34, 30, .25); }
.svg-preview-stone.white circle { fill: rgba(255, 255, 255, .42); }
.svg-preview-stone text { fill: #372d21; font: 850 12px var(--mono); }