/* Mudcrack Y - yknotlabs.com/mudcrack
 *
 * One column, board first. The palette is /gameofy's (play.css) so the
 * two pages read as one site; the board itself is drawn as what it is -
 * pale clay with dark cracks between the cells.
 */
:root {
  color-scheme: dark;
  --bg: #1c1a18;
  --panel: #2a2622;
  --text: #f2ebe0;
  --muted: #a99d8c;
  --accent: #d4a574;
  --clay: #8d8272;
  --clay-legal: #a89b87;
  --crack: #17150f;
  --stone-black: #191614;
  --crack-on-black: #6f6557;
  --stone-white: #f4eee2;
  --side-0: #e0644d;
  --side-1: #4d9ce0;
  --side-2: #5ec46a;
  --error: #e0644d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: calc(1rem + env(safe-area-inset-top)) 1rem
           calc(2rem + env(safe-area-inset-bottom));
}

.head { text-align: center; }

h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.4rem, 5vw, 2rem);
  letter-spacing: 0.01em;
}

.blurb {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.error {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--error);
  border-radius: 0.4rem;
  background: rgba(224, 100, 77, 0.12);
  color: var(--text);
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.board-wrap {
  margin: 0.9rem 0 0.2rem;
}

.board {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

/* The cells. A stone is the whole cell filled, not a disc on top of it:
   on an irregular board the group you have built is the shape that
   reads, and that is exactly what the game is about.

   The cracks are NOT these polygons' stroke - mudcrack.js draws them as
   separate wall segments, so that the wall between two cells of the
   same colour can be left out and the group drawn as one shape. Each
   cell is stroked in its own fill colour instead, which covers the
   hairline seam antialiasing leaves between two abutting fills. */
.cell {
  stroke-width: 0.003;
  stroke-linejoin: round;
  transition: fill 90ms linear, stroke 90ms linear;
}

.cell.empty { fill: var(--clay); stroke: var(--clay); }
.cell.black { fill: var(--stone-black); stroke: var(--stone-black); }
.cell.white { fill: var(--stone-white); stroke: var(--stone-white); }

.cell.legal { cursor: pointer; }
.board:not(.waiting) .cell.legal:hover { fill: var(--clay-legal); stroke: var(--clay-legal); }
/* At ply 1 the opponent's own cell is legal - that is the pie rule, and
   it should look different from an empty cell you may take. */
.board:not(.waiting) .cell.legal.black:hover { fill: #3a332a; stroke: #3a332a; }
.board:not(.waiting) .cell.legal.white:hover { fill: #ddd3c0; stroke: #ddd3c0; }

.crack {
  fill: none;
  stroke: var(--crack);
  stroke-width: 0.006;
  stroke-linecap: round;
}

/* A dark crack against a near-black fill is no crack at all, so walls
   touching a black cell are drawn light. */
.crack.light { stroke: var(--crack-on-black); }

.win-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.012;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.side {
  stroke-width: 0.016;
  stroke-linecap: round;
  fill: none;
  opacity: 0.95;
}

.side-0 { stroke: var(--side-0); }
.side-1 { stroke: var(--side-1); }
.side-2 { stroke: var(--side-2); }

.mark { pointer-events: none; }
.mark-on-black { fill: var(--stone-white); }
.mark-on-white { fill: var(--stone-black); }

.board.waiting { cursor: progress; }

.status {
  margin: 0.2rem 0 0.9rem;
  min-height: 1.4em;
  text-align: center;
  font-size: 1rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  padding: 0.85rem 1rem;
  background: var(--panel);
  border-radius: 0.6rem;
}

.control {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.control.grow { flex: 1 1 12rem; }

.control-label {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.choice { display: flex; gap: 0.35rem; }

.chip {
  padding: 0.4rem 0.8rem;
  border: 1px solid #4a4239;
  border-radius: 0.4rem;
  background: #221f1b;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.chip:hover { border-color: var(--accent); }

.chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: #1c1a18;
}

.chip.primary { margin-inline-start: auto; }

input[type="range"] {
  flex: 1 1 auto;
  min-width: 7rem;
  accent-color: var(--accent);
}

.muted {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5;
}

#search-id { font-variant-numeric: tabular-nums; }

.foot { margin-top: 1.4rem; }

a { color: var(--accent); }

@media (min-width: 40rem) {
  .blurb { font-size: 0.95rem; }
}