:root {
  color: #20241f;
  background: #f3efe4;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; }

main {
  width: min(1040px, calc(100% - 32px));
  margin: 56px auto;
}

.eyebrow {
  margin: 0;
  color: #697366;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 { margin: 8px 0 12px; font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: 1rem; }
.intro { max-width: 54ch; line-height: 1.7; }

.game-controls, .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  margin: 28px 0 16px;
  padding: 20px;
  border: 1px solid #c8c5b9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.controls {
  margin-top: 20px;
}

label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 650; }
.checkbox { display: flex; align-items: center; padding-bottom: 10px; }
select, input, button { font: inherit; }
select, input[type="number"] { padding: 9px 10px; border: 1px solid #aaa99f; border-radius: 8px; }
button { padding: 10px 16px; border: 0; border-radius: 8px; color: white; background: #2f614d; cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.55; }

#status { min-height: 1.5em; color: #526057; }
.model-status { color: #526057; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(320px, 620px) minmax(230px, 1fr);
  gap: 28px;
  align-items: start;
  margin: 24px 0 44px;
}

.board-coordinate-frame {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) 1.35rem;
  grid-template-rows: 1.35rem auto 1.35rem;
  width: 100%;
}

.coordinate-columns,
.coordinate-rows {
  color: #655b4c;
  font: 650 0.72rem/1 ui-monospace, monospace;
  user-select: none;
}

.coordinate-columns {
  display: grid;
  grid-template-columns: repeat(var(--board-size, 9), 1fr);
  align-items: center;
  padding-inline: 4.6%;
  text-align: center;
}

.coordinate-rows {
  display: grid;
  grid-template-rows: repeat(var(--board-size, 9), 1fr);
  align-items: center;
  padding-block: 4.6%;
  text-align: center;
}

.coordinate-top { grid-column: 2; grid-row: 1; }
.coordinate-left { grid-column: 1; grid-row: 2; }
.coordinate-right { grid-column: 3; grid-row: 2; }
.coordinate-bottom { grid-column: 2; grid-row: 3; }

.go-board {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--board-size, 9), 1fr);
  width: 100%;
  aspect-ratio: 1;
  padding: 4.6%;
  border: 2px solid #6d4a21;
  border-radius: 8px;
  background: #d7a95d;
  box-shadow: 0 14px 35px rgba(57, 43, 24, 0.18);
  touch-action: manipulation;
}

.go-point {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: 1;
  background: transparent;
  cursor: pointer;
}

.go-point::before, .go-point::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: #4b351d;
  pointer-events: none;
}
.go-point::before { left: 0; right: 0; top: calc(50% - 0.7px); height: 1.4px; }
.go-point::after { top: 0; bottom: 0; left: calc(50% - 0.7px); width: 1.4px; }
.go-point.edge-left::before { left: 50%; }
.go-point.edge-right::before { right: 50%; }
.go-point.edge-top::after { top: 50%; }
.go-point.edge-bottom::after { bottom: 50%; }
.go-point:disabled { opacity: 1; cursor: default; }
.go-point:not(:disabled):hover::after, .go-point:not(:disabled):hover::before { background: #1f664d; }
.go-point:not(:disabled):focus-visible { outline: 3px solid #f4f0d0; outline-offset: -3px; }

.star {
  position: absolute;
  z-index: 1;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #4b351d;
}

.stone {
  position: absolute;
  z-index: 2;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.35);
}
.stone.black { background: radial-gradient(circle at 35% 30%, #515151, #080808 62%); }
.stone.white { background: radial-gradient(circle at 35% 30%, #fff, #d8d5cc 72%); border: 1px solid #a39d90; }
.stone.last::after {
  content: "";
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: #d8493e;
}

.board-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.board-actions button { min-width: 130px; }
.game-sidebar { min-height: 360px; padding: 20px; border-radius: 14px; background: #e4dfd1; }
.game-sidebar h2 { margin: 8px 0; font-size: 1.25rem; line-height: 1.5; }
.game-sidebar h3 { margin-top: 28px; font-size: 0.9rem; }
.game-sidebar p { line-height: 1.6; }
.phase { display: inline-block; margin: 0; padding: 4px 9px; border-radius: 999px; background: #667c68; color: white; font: 700 0.72rem ui-monospace, monospace; letter-spacing: 0.08em; }
.phase.cleanup { background: #976d27; }
.phase.over { background: #793d3d; }
.move-history { max-height: 310px; overflow: auto; padding-left: 2rem; font: 0.85rem/1.7 ui-monospace, monospace; }

.diagnostics { margin-top: 46px; padding-top: 20px; border-top: 1px solid #c8c5b9; }
.diagnostics > summary { cursor: pointer; color: #526057; font-weight: 700; }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.results article { padding: 18px; border-radius: 12px; background: #e4dfd1; }
.results p { margin-bottom: 0; color: #62665f; }
.metric { margin: 12px 0 0; color: #20241f !important; font: 700 1.65rem ui-monospace, monospace; }
#moves { columns: 2; padding-left: 2rem; line-height: 1.8; }
#search-candidates { padding-left: 2rem; line-height: 1.8; font-family: ui-monospace, monospace; }
.search-result { margin-top: 32px; }

.benchmark { margin-top: 36px; padding-top: 24px; border-top: 1px solid #c8c5b9; }
.benchmark-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.benchmark-heading h2, .benchmark-heading p { margin: 0 0 6px; }
.benchmark-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.benchmark-grid article { padding: 16px; border: 1px solid #c8c5b9; border-radius: 12px; background: rgba(255, 255, 255, 0.4); }
.benchmark-grid h3 { margin-top: 0; }
.metric.small { white-space: pre-line; font-size: 1rem; line-height: 1.65; }

@media (max-width: 560px) {
  main { margin-top: 28px; }
  .results { grid-template-columns: 1fr; }
  .benchmark-grid { grid-template-columns: 1fr; }
  .benchmark-heading { align-items: start; flex-direction: column; }
  #moves { columns: 1; }
}

@media (max-width: 760px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-sidebar { min-height: 0; }
}