:root {
  --bg: #14161a;
  --panel: #1d2027;
  --panel-2: #262a33;
  --line: #333844;
  --text: #e8eaee;
  --muted: #9aa1ae;
  --light: #ebd9b6;
  --dark: #9c7a54;
  --sel: #f2c14e;
  --last: #d7c04a;
  --check: #e2564a;
  --accent: #6f9ceb;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 800px at 20% -10%, #1e222b, var(--bg));
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
}

.app {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

/* Sits on its own line under everything: .app wraps, so a full-basis item drops
   below both columns whatever width they end up. */
.credit {
  flex-basis: 100%;
  margin: 2px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  opacity: .65;
}
.credit a { color: inherit; text-decoration: none; border-bottom: 1px solid #ffffff2e; }
/* The separator belongs to the counter, so an offline server leaves no dangling dot. */
.visitors:not(:empty)::before { content: "\00a0\00b7\00a0"; }
.visitors { font-variant-numeric: tabular-nums; }
.credit a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ---------- board ---------- */

.board-area {
  --size: min(76vh, 88vw, 640px);
  --bar: 36px;                         /* the 26px bar (border-box) plus its 10px gap */
  display: flex;
  gap: 10px;
  align-items: center;
}
.board-column { display: flex; flex-direction: column; gap: 8px; }

/* The eval bar belongs to the board, not to the column: it hangs off the board's
   left edge and matches its height exactly, while the player rows and the move
   strip are indented past it so they still line up with the board. */
.board-row { display: flex; gap: 10px; align-items: stretch; }
.board-column > .player, .board-top { margin-left: var(--bar); }

.board-wrap { position: relative; }

/* Openings pinned beside the board. Level with the top of the board rather than
   centred on it, and never taller than the board itself. */
.board-side {
  width: 250px;
  align-self: flex-start;
  max-height: var(--size);
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.board-side .opts { margin: 0; }
.board-side .opts + .opts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.board-side .opening-list { max-height: none; }

.board {
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  touch-action: none;
  user-select: none;
}

.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sq.light { background: var(--light); }
.sq.dark  { background: var(--dark); }

.sq .coord {
  position: absolute;
  font-size: calc(var(--size, 640px) / 64);
  font-weight: 700;
  opacity: .55;
  pointer-events: none;
}
.sq .coord.file { right: 3px; bottom: 1px; }
.sq .coord.rank { left: 3px; top: 1px; }
.sq.light .coord { color: var(--dark); }
.sq.dark  .coord { color: var(--light); }

.sq.last::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--last);
  opacity: .38;
}
.sq.sel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sel);
  opacity: .5;
}
.sq.check::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle, var(--check) 18%, rgba(226, 86, 74, .6) 46%, transparent 72%);
}

.piece {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--size, 640px) / 8 * 0.78);
  line-height: 1;
  cursor: default;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
.piece.img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.piece.w { color: #fbfbf9; -webkit-text-stroke: calc(var(--size, 640px) / 640) #2a2f38; }
.piece.b { color: #2c3038; -webkit-text-stroke: calc(var(--size, 640px) / 900) #e9e6df; }
.piece.draggable { cursor: grab; }
.piece.dragging { opacity: .28; }

.commentary {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--panel-2);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.commentary[hidden] { display: none; }
.commentary p { margin: 0 0 6px; color: var(--text); }
.commentary a { color: var(--accent); font-size: 11px; text-decoration: none; }
.commentary a:hover { text-decoration: underline; }

.opening-name {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.opening-name.out { color: var(--muted); }

.opening-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.opening-list .line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  padding: 4px 7px;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.opening-list .line:hover:not(:disabled) { background: #313745; border-color: var(--line); }
.opening-list .line:disabled { opacity: .5; cursor: default; }
.opening-list .line b {
  color: #6f9ceb;                  /* the colour it previews in on the board */
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}
.opening-list .line span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opening-list .line i { font-style: normal; font-size: 11px; opacity: .6; }

/* the engine's suggested move */
.arrow {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  color: #4fd1a5;
}
.arrow[hidden] { display: none; }
#arrow-line, #threat-line, #book-line { fill: none; stroke-linejoin: round; }
#arrow-line { stroke: #4fd1a5; stroke-width: 1.5; stroke-linecap: round; opacity: .9; }
#threat-line { stroke: #e2564a; stroke-width: 1.3; stroke-linecap: round; opacity: .85; }
#book-line { stroke: #6f9ceb; stroke-width: 1.5; stroke-linecap: round; opacity: .95; }
#arrow-line[hidden], #threat-line[hidden], #book-line[hidden] { display: none; }

.sq.threat-square::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #e2564a;
  opacity: .22;
}
.sq.book-square::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #6f9ceb;
  opacity: .34;
}

.sq.best-from::after, .sq.best-to::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #4fd1a5;
  opacity: .3;
}
.piece.preview {
  position: absolute;
  inset: 4%;
  z-index: 2;
  opacity: .5;
}

/* movement-pattern view */
.pips {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5%;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-end;
  gap: 2px;
  pointer-events: none;
}
.pips i {
  width: calc(var(--size, 640px) / 8 * .125);
  height: calc(var(--size, 640px) / 8 * .125);
  display: block;
  opacity: .62;
}
.pips i.w { border-radius: 50%; box-shadow: 0 0 0 1px rgba(20, 22, 26, .6); }
.pips i.b {                              /* diamond reads as clearly not-a-circle */
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(245, 245, 245, .75);
  transform: rotate(45deg) scale(.92);
}
.pips i.legal { opacity: 1; }
.pips i.w.legal { transform: scale(1.3); }
.pips i.b.legal { transform: rotate(45deg) scale(1.2); }

/* squares both sides bear on */
.hatch {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deliberately faint: in a middlegame most squares are contested, so this has to
     read as texture rather than compete with the pieces. */
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .16) 0 2px, rgba(20, 22, 26, .10) 2px 7px);
}

.seg { display: flex; width: 100%; }
.seg button {
  flex: 1;
  padding: 5px 6px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg button.on { background: var(--accent); color: #10131a; border-color: transparent; font-weight: 600; }

#pat-side {
  width: 100%;
  padding: 5px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
#pat-side:disabled { opacity: .45; }

.btn.tiny {
  flex: none;
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
}

.legend-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; width: 100%; }
.legend .chip.shape i.shape-w {
  background: #cfd4dc; border-radius: 50%; box-shadow: 0 0 0 1px rgba(20, 22, 26, .6);
}
.legend .chip.shape i.shape-b {
  background: #4a505c; border-radius: 1px; box-shadow: 0 0 0 1px rgba(245, 245, 245, .75);
  transform: rotate(45deg) scale(.9);
}
.legend .chip.shape i.shape-x {
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .55) 0 2px, rgba(20, 22, 26, .5) 2px 4px);
  border-radius: 2px;
}
.pat {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .34;
}
.pat-focus {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 3px dashed;              /* hovered: provisional */
  border-radius: 2px;
  pointer-events: none;
}
.pat-focus.pinned { border-style: solid; }   /* right-clicked: stays put */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px;
  background: var(--panel-2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}
.legend[hidden] { display: none; }
.legend-help { width: 100%; margin: 0 0 2px; line-height: 1.45; }
.legend .chip { display: inline-flex; align-items: center; gap: 5px; }
.legend .chip i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}

.btn.toggle.on {
  background: var(--accent);
  color: #10131a;
  border-color: transparent;
  font-weight: 600;
}

/* move hints */
.hint-dot, .hint-ring {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.hint-dot {
  width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(20, 22, 26, .32);
}
.hint-ring {
  inset: 4%;
  border-radius: 50%;
  border: 6px solid rgba(20, 22, 26, .3);
}
.sq.target { cursor: pointer; }

#ghost {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}
#ghost.w { color: #fbfbf9; -webkit-text-stroke: 1px #2a2f38; }
#ghost.b { color: #2c3038; -webkit-text-stroke: .7px #e9e6df; }
#ghost.img { background-size: contain; background-repeat: no-repeat; background-position: center; }

/* ---------- eval bar ---------- */

.evalbar {
  position: relative;
  width: 26px;
  align-self: stretch;                 /* exactly the board's height, whatever it is */
  border-radius: 4px;
  overflow: hidden;
  background: #21242b;                 /* Black's share of the bar */
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  flex: none;
}
.eval-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                           /* White grows from the bottom */
  height: 50%;
  background: #f1efe9;
  transition: height .35s cubic-bezier(.4, 0, .2, 1);
}
.evalbar.flip .eval-fill { bottom: auto; top: 0; }
.evalbar::after {                      /* the even mark */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed rgba(128, 128, 128, .55);
}
.eval-num {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  z-index: 2;
  pointer-events: none;
}
.eval-num.bottom { bottom: 3px; }
.eval-num.top { top: 3px; }
.eval-num.on-white { color: #2c3038; }
.eval-num.on-black { color: #e9e6df; }
.evalbar.decided .eval-fill { transition-duration: .5s; }
.evalbar.offline { opacity: .35; }
.evalbar.offline .eval-fill { background: #6d727c; }

.engine .best-move { color: #4fd1a5; font-weight: 600; }  /* matches its arrow */

.engine {
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}

/* ---------- players ---------- */

.player {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-height: 26px;
}
.player .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #0006;
}
.player .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player.black .dot { background: #2b2b2b; border-color: #0009; }
.player.turn .name { color: var(--sel); }
.player .captured {
  font-size: 19px;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--muted);
  opacity: .85;
}
.player .edge { font-size: 13px; color: var(--muted); font-weight: 700; }
.player .clock {
  margin-left: auto;
  min-width: 70px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.player .clock:empty { display: none; }
.player .clock.low { background: #532c2c; color: #ffb2aa; }

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

/* Pinned: the openings box has left the panel, so the panel is free to spread
   into whatever width the page has going spare. */
.app.pinned .panel {
  width: auto;
  flex: 1 1 320px;
  max-width: 600px;
}

.panel {
  width: 280px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The mark stands in for the title, centred over the panel. The name is still in
   the heading for anything that reads the page rather than looks at it. */
.panel h1.logo { margin: 0 0 2px; display: flex; justify-content: center; }
.logo svg {
  width: 58px;
  height: 58px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
  transition: transform .18s ease;
}
.logo svg:hover { transform: translateY(-1px) scale(1.03); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.status { margin: 0; color: var(--muted); min-height: 22px; }
.status.check { color: var(--check); font-weight: 600; }
.status.done  { color: var(--sel); font-weight: 600; }

.moves-box { display: flex; flex-direction: column; gap: 8px; }
.moves-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.moves-title { color: var(--muted); font-size: 13px; }
.seg.tiny { width: auto; }
.seg.tiny button { flex: none; padding: 3px 8px; font-size: 11px; }
.seg.tiny button + button { border-left: none; }   /* three buttons, no doubled seams */

/* Inline: the same cells on a single line that lives above the board, scrolling
   sideways rather than wrapping, so the list costs one row instead of a third of
   the panel. Hidden drops it altogether. */
.moves.inline {
  display: block;
  height: auto;
  max-height: none;
  padding: 2px 4px;
  line-height: 1.45;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.moves.inline .num {
  display: inline;
  padding: 0 3px 0 8px;
  text-align: left;
}
.moves.inline .num:first-child { padding-left: 2px; }
.moves.inline .san { display: inline-block; padding: 0 4px; }

/* The strip itself: moves on the left, the view control parked on the right. */
.board-top { width: var(--size); }
.board-top:empty { display: none; }
.moves-box.strip {
  display: flex;
  flex-direction: row;             /* .moves-box stacks; the strip must not */
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 4px;
}
.moves-box.strip .moves {
  order: 1;
  flex: 1;
  min-width: 0;
  padding: 0 2px;
  background: none;
  font-size: 13px;
  line-height: 1.45;
}
.moves-box.strip .moves .num { font-size: 11px; padding: 0 2px 0 6px; }
.moves-box.strip .moves .num:first-child { padding-left: 0; }
.moves-box.strip .moves .san { padding: 0 3px; }
.moves-box.strip .moves .empty { padding: 0 2px; font-size: 12px; }
.moves-box.strip .moves-head { order: 2; flex: none; }
.moves-box.strip .moves-title { display: none; }
/* In the panel the buttons are worded; in the strip they shrink to glyphs so the
   whole thing stays about one line of text tall. */
.seg.tiny .ico { display: none; }
.moves-box.strip .seg.tiny .lbl { display: none; }
.moves-box.strip .seg.tiny .ico { display: inline; }
.moves-box.strip .seg.tiny button {
  padding: 0 5px;
  min-width: 22px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
}
/* .moves sets display, which would otherwise win over the [hidden] default. */
.moves[hidden], .board-side[hidden] { display: none; }

.moves {
  height: 300px;
  overflow-y: auto;
  background: var(--panel-2);
  border-radius: 8px;
  padding: 6px;
  display: grid;
  grid-template-columns: 34px 1fr 1fr;
  align-content: start;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  scrollbar-width: thin;
}
.moves .num { color: var(--muted); text-align: right; padding: 2px 6px 2px 0; font-size: 13px; }
.moves .san {
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.moves .san:hover { background: #ffffff12; }
.moves .san.active { background: var(--accent); color: #10131a; font-weight: 600; }
.moves .empty { grid-column: 1 / -1; color: var(--muted); padding: 6px; font-size: 13px; }

/* ---------- game review ---------- */

/* The verdict rides along with the move, so the list still reads as a game rather
   than turning into a table of scores. The colour arrives as --mark so the filled
   active cell can override it. */
.moves .mark {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  margin-left: 3px;
  color: var(--mark, var(--muted));
}
.moves .san.active .mark { color: #10131a; }

.review { display: flex; flex-direction: column; gap: 8px; }
.review-note { margin: 0; color: var(--muted); font-size: 12px; }
.review-bar { height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.review-bar i { display: block; height: 100%; background: var(--accent); transition: width .12s linear; }

.review-side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.review-side .who { color: var(--muted); font-size: 12px; width: 40px; }
.review-side .acc { font-size: 16px; font-variant-numeric: tabular-nums; }
.review-side .chips { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { background: #313745; color: var(--text); }
.chip i { font-style: normal; font-weight: 700; }

.review-move {
  margin: 0;
  padding: 5px 8px;
  border-left: 3px solid var(--line);
  border-radius: 0 6px 6px 0;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
}

/* The same verdict on the board, on the square the move landed on. */
.judge {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 3%;
  width: 30%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #10131a;
  font-size: calc(var(--size, 640px) / 8 * 0.17);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.controls { display: flex; gap: 6px; }
.btn {
  flex: 1;
  padding: 8px 6px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: #313745; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: #10131a; border-color: transparent; font-weight: 600; }

.opts summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* ---------- player game explorer ---------- */
.explorer-search {
  width: 100%;
  padding: 7px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.explorer .opt small { color: var(--muted); font-size: 10px; }
.explorer-player-matches {
  width: 100%;
  margin-top: 3px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
}
.explorer-filters { display: flex; gap: 6px; margin-top: 6px; }
.explorer-filters select {
  min-width: 0;
  flex: 1;
  padding: 5px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 11px;
}
.explorer-count { margin: 7px 0 5px; color: var(--muted); font-size: 11px; }
.explorer-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.explorer-game {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.explorer-game:hover { background: #313745; border-color: var(--line); }
.explorer-game.active { border-color: var(--accent); }
.explorer-game .game-main { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.explorer-game .game-result { width: 20px; font-weight: 800; color: var(--muted); }
.explorer-game .game-result.win { color: #4fcf8b; }
.explorer-game .game-result.loss { color: #e2564a; }
.explorer-game .game-opponent { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-game .game-date { color: var(--muted); font-size: 10px; }
.explorer-game .game-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.explorer-more { margin-top: 6px; font-size: 11px; padding: 5px; }
.explorer-stats { margin: 6px 0; padding: 7px; border-radius: 6px; background: var(--panel-2); }
.explorer-stat-line { display: flex; gap: 8px; color: var(--muted); font-size: 11px; }
.explorer-stat-line b { color: var(--text); }
.explorer-next { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* The pin rides in the Openings header. Floated rather than flexed so the
   disclosure triangle survives. */
.pin {
  float: right;
  padding: 0 2px;
  border: none;
  background: none;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  opacity: .4;
  filter: grayscale(1);
}
.pin:hover { opacity: .75; }
.pin.on { opacity: 1; filter: none; }
.opts[open] summary { margin-bottom: 8px; }

.opt {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.opt span { display: block; margin-bottom: 3px; }
.opt b { color: var(--text); font-variant-numeric: tabular-nums; }
.opt input[type="range"] { width: 100%; accent-color: var(--accent); }
.opt input[type="range"]:disabled { opacity: .4; }
.opt.check { display: flex; align-items: center; gap: 7px; }
.opt.check input { accent-color: var(--accent); margin: 0; }
.opt.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt select {
  flex: 1;
  padding: 5px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.fen input {
  width: 100%;
  margin: 8px 0 6px;
  padding: 7px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: 12px ui-monospace, Menlo, Consolas, monospace;
}
.pgn-input textarea {
  width: 100%;
  min-height: 150px;
  margin: 8px 0 6px;
  padding: 7px 8px;
  resize: vertical;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace;
}
.hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); min-height: 16px; }

/* ---------- overlays ---------- */

.promo[hidden], .over[hidden] { display: none; }

/* The promotion picker must be answered, so it blocks the board. */
.promo {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 18, .72);
  border-radius: 6px;
}
.promo-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: 0 12px 40px #0008;
}
.promo-card p { margin: 0 0 10px; color: var(--muted); }
.promo-choices { display: flex; gap: 8px; }
.promo-choices button {
  width: 62px; height: 62px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: 6px;
}
.promo-choices button:hover { background: #3a4152; border-color: var(--accent); }
.promo-choices button span { font-size: 44px; line-height: 1; }
.promo-choices button span.img { display: block; width: 100%; height: 100%; }
.promo-choices button span.w { color: #fbfbf9; -webkit-text-stroke: 1px #2a2f38; }
.promo-choices button span.b { color: #2c3038; -webkit-text-stroke: .7px #e9e6df; }

/* The result banner is only news, so it stays out of the way: a strip at the top
   of the board, click-through everywhere except the card, closed with x or Esc. */
.over {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  pointer-events: none;
  border-radius: 6px;
}
.over-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  background: rgba(29, 32, 39, .97);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.over-msg h2 { margin: 0; font-size: 15px; }
.over-msg p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.over-card .btn { width: auto; flex: none; padding: 6px 12px; font-size: 13px; }
.over-close {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.over-close:hover { background: #313745; color: var(--text); }

@media (max-width: 900px) {
  body { padding: 12px; }
  /* The eval bar is 28px and sits 10px from the board, so the board has to leave
     that much room or the pair overflows and the bar wraps above it. Only the
     pinned openings column is meant to wrap, and it claims a whole line below. */
  .board-area {
    --size: min(76vh, calc(100vw - 66px), 640px);
    flex-wrap: wrap;
    justify-content: center;
  }
  .board-column { min-width: 0; }
  .panel { width: min(92vw, 640px); }
  .app.pinned .panel { width: min(92vw, 640px); flex: none; max-width: none; }
  .moves { height: 160px; }
  .moves.inline { height: auto; max-height: none; }

  /* No room to sit beside the board, so the pinned openings wrap directly under
     it -- board first, openings next, the rest of the panel below that. */
  .board-side {
    flex: 0 0 100%;
    width: auto;
    max-width: min(92vw, 640px);
    max-height: 46vh;
    align-self: stretch;
  }
}