:root {
  color-scheme: light dark;
  --bg: #fff;
  --text: #111;
  --line: #d0d0d0;
  --sq: #f0d9b5;
  --hl-move: rgba(80,160,255,.35);
  --hl-arrow: rgba(240,170,30,.35);
  --sel-stroke: #2ecc71;
}

html,body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Layout: left = title/panel/board, right = log */
#app {
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 300px;
  grid-template-areas:
    "title log"
    "panel log"
    "board log";
  gap: .75rem 1rem;
  align-items: start;
}

#app > h1 { grid-area: title; margin: 0; font-size: 1.25rem; }

/* Panel at the top-left */
#panel {
  grid-area: panel;
  position: sticky; top: 0; /* keeps controls visible */
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg);
  padding-bottom: .25rem;
  z-index: 1;
}

/* Force black text on white buttons */
#panel button {
  color: #111;
  background-color: #fff;
  border: 1px solid var(--line);
  color-scheme: light; /* prevents dark-mode UA theming */
}

/* Optional: clearer focus */
#panel button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

#panel button:active { transform: translateY(1px); }
#turn { margin-left: .25rem; font-weight: 600; }

/* Board */
#board {
  grid-area: board;
  width: min(80vmin, 720px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: .5rem;
  overflow: hidden;
  justify-self: start;
}
#board svg { width: 100%; height: 100%; display: block; }

/* Squares and highlights */
svg .sq { fill: var(--sq); stroke: #bbb; stroke-width: .02; cursor: pointer; }
svg .sq.hl-move { fill: var(--hl-move); }
svg .sq.hl-arrow { fill: var(--hl-arrow); }
svg .sq.hl-selected { stroke: var(--sel-stroke); stroke-width: .06; }

/* Pieces and blocks */
.piece { pointer-events: none; }
.pieceW { fill: #f5f5f5; stroke: #333; stroke-width: .04; }
.pieceB { fill: #333; stroke: #eee; stroke-width: .04; }
.block  { fill: #333; opacity: .85; pointer-events: none; }

/* Turn history log pinned on the right */
#log {
  grid-area: log;
  position: sticky; top: 0;
  margin: 0;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: rgba(0,0,0,.02);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}

/* Responsive: stack on narrow screens */
@media (max-width: 820px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "panel"
      "board"
      "log";
  }
  #board { width: 100%; }
}