:root {
  --bg: #fff1e5;
  --ink: #33302e;
  --muted: #6e665f;
  --panel: #fff;
  --line: #eadfd4;
  --inaccuracy: #56b4e9;
  --mistake: #e69f00;
  --blunder: #df5353;
  --strip: 26px;
  /* the board is as big as the window allows, in real pixels */
  --board: max(260px, min(100dvh - 96px, 100vw - 446px));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  display: flex;
  justify-content: safe center;  /* start-aligned, not cut off, if it ever overflows */
  align-items: flex-start;
  gap: 20px;
  padding: 16px;
}

/* ---- Board column ---- */

/* Both columns keep their size: the board never shifts with the engine's text */
.play, .side { flex: none; }

.play {
  display: grid;
  grid-template-columns: 26px var(--board);
  grid-template-rows: var(--strip) var(--board) var(--strip);
  gap: 6px 8px;
}

.player {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.player .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.player .name::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.player .name.white::before { background: #fff; }
.player .name.black::before { background: var(--ink); }
.player .elo { color: var(--muted); margin-right: auto; }
.player .acc { font-weight: 600; }
.player .inaccuracy { color: var(--inaccuracy); font-weight: 600; }
.player .mistake { color: var(--mistake); font-weight: 600; }
.player .blunder { color: var(--blunder); font-weight: 600; }
.player .material { font-weight: 600; }  /* the ink of the strip, set like the accuracy: a figure to read at a glance */

.evalbar {
  grid-row: 2;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #403d39;
}
.evalbar::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--white, 50%);
  background: #fff;
}
.evalbar.flipped::before { inset: 0 0 auto; }
/* the score at the foot, dark or light to suit the end of the bar it sits on */
.evalbar::after {
  content: attr(data-score);
  position: absolute;
  inset: auto 0 2px;
  color: #fff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 12px;
  text-align: center;
  white-space: nowrap;
}
.evalbar.white-foot::after { color: var(--ink); }

/* ---- Board placement (the board itself is in board.css) ---- */

.play .board {
  grid-row: 2;
  grid-column: 2;
  width: var(--board);
}

/* ---- Side panel ---- */

/* exactly level with the board; the foot line sits beside the bottom strip */
.side {
  position: relative;
  width: 360px;
  margin-top: calc(var(--strip) + 6px);
  height: var(--board);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.engine, .moves {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.engine header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.engine .score { min-width: 3.2em; font-size: 20px; font-variant-numeric: tabular-nums; }
.engine .score:empty { display: none; }  /* engine off or loading: the message starts at the edge */
.engine .info { flex: 1; color: var(--muted); font-size: 12px; line-height: 28px; }  /* the score's height: no jump on toggle */

.toggle {
  position: relative;
  width: 34px;
  height: 18px;
  flex: none;
  border: 0;
  border-radius: 9px;
  background: #cfc6bd;
  cursor: pointer;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.toggle[aria-pressed="true"] { background: #629924; }
.toggle[aria-pressed="true"]::after { transform: translateX(16px); }

.lines {
  height: calc(3 * 22px + 8px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
}
.lines li {
  height: 22px;
  padding: 0 10px;
  overflow: hidden;
  font-size: 13px;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.lines li:hover { background: #f7efe7; }
.lines b { display: inline-block; min-width: 3.2em; font-variant-numeric: tabular-nums; }
.tb { margin: 0; padding: 4px 10px 6px; border-top: 1px solid var(--line); font-size: 12px; }
.tb:empty { display: none; }

.moves {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.opening { margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.opening:empty { display: none; }
.list {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 2.6em 1fr 1fr;
  align-content: start;
  overflow-y: auto;
}
.list > .num { padding: 3px 8px 3px 0; background: #f8f1ea; color: var(--muted); text-align: right; }
.move { padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.move:hover { background: #f5ebe1; }
.move.cur { background: #e8d6c4; }
.move.empty { cursor: default; color: var(--muted); }
.move.empty:hover { background: none; }
.move i { margin-left: 1px; font-style: normal; font-weight: 700; }
.move i.inaccuracy { color: var(--inaccuracy); }
.move i.mistake { color: var(--mistake); }
.move i.blunder { color: var(--blunder); }
.alts { grid-column: 1 / -1; padding: 3px 8px; background: #fbf7f3; color: #5b554f; font-size: 13px; }
.alts p { margin: 0; }
.alts .num { padding: 0 2px 0 4px; color: var(--muted); }
.alts .move { padding: 1px 3px; }
.result { grid-column: 1 / -1; margin: 8px 0; font-weight: 600; text-align: center; }
.hint { grid-column: 1 / -1; margin: 0; padding: 10px; color: var(--muted); }

.graph {
  position: relative;
  height: 72px;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  background: #4d4843;
  cursor: pointer;
  touch-action: none;
}
.graph svg { display: block; width: 100%; height: 100%; }
.graph .area { fill: #fbf7f2; }
.graph line { vector-effect: non-scaling-stroke; }
.graph .mid { stroke: rgba(128, 128, 128, 0.5); stroke-width: 1; }
.graph .cursor { stroke: #d85000; stroke-width: 2; }
.graph .dots line { stroke-width: 7; stroke-linecap: round; }
.graph .dots .inaccuracy { stroke: var(--inaccuracy); }
.graph .dots .mistake { stroke: var(--mistake); }
.graph .dots .blunder { stroke: var(--blunder); }
.graph::after {
  content: attr(data-status);
  position: absolute;
  top: 3px;
  right: 6px;
  color: #ddd4cb;
  font-size: 11px;
  pointer-events: none;
}

.load { display: flex; gap: 8px; }
.load textarea {
  display: block;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 8px 10px;
  overflow: hidden;
  resize: none;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
  font: inherit;
}
.load .setup, .editor .controls button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.load .setup { flex: none; padding: 0 12px; }
.load .setup:hover, .editor .controls button:hover { background: #f7efe7; }

/* One line under the panel: a status message when there is one, else the keys */
.foot {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  height: var(--strip);
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.foot .status { font-size: 12px; }
.foot .status.error { color: #b3372f; }
.foot .status:not(:empty) ~ .keys, .foot .keys.editing, .editing .foot .keys { display: none; }
.editing .foot .keys.editing { display: inline; }

/* ---- Setting up a position: the side panel becomes the palette ---- */

.editor { display: none; }
.editing .side > :not(.editor, .foot) { display: none; }
.editing .editor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.editing .evalbar, .editing .player { visibility: hidden; }
.editing .marks .dest, .editing .marks .capture { display: none; }  /* every square is a destination */
.board.armed { cursor: copy; }

.palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.palette button {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 88%;
  cursor: grab;
  touch-action: none;
}
.palette button:hover { background-color: #f5ebe1; }
.palette button[aria-pressed="true"] { background-color: #e8d6c4; }  /* picked: clicks place it */

.editor .controls {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.editor .controls p { margin: 0; }
.editor .controls button { padding: 5px 10px; }
.editor .controls button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.seg { display: flex; }
.seg button { flex: 1; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-left: 0; border-radius: 0 6px 6px 0; }
.castling { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; }
.castling span { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.castling label:has(:disabled) { color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.editor .fen {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
  font: 12px ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.editor .fen-row { position: relative; }
.editor .fen { padding-right: 70px; }
.editor .controls .copy { position: absolute; top: 3px; right: 3px; bottom: 3px; width: 62px; padding: 0; font-size: 12px; }
.editor .reason { min-height: 1.4em; color: #b3372f; font-size: 12px; }
.editor .controls .go { display: flex; gap: 6px; margin-top: auto; }  /* Analyse at the foot, by the palette */
.editor .go .primary { background: #629924; border-color: #629924; color: #fff; font-weight: 600; }
.editor .go .primary:hover { background: #57881f; }
.editor .go .primary:disabled { opacity: 0.45; cursor: default; }

/* A piece on its way from the palette */
.ghost {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* ---- Narrow screens: one column ---- */

@media (max-width: 760px) {
  :root { --board: calc(100vw - 66px); }
  main { flex-direction: column; align-items: center; }
  .side { width: 100%; height: auto; margin-top: 0; }
  .foot { position: static; }
  .moves { max-height: 40vh; min-height: 120px; }
  .foot .keys { display: none; }
}