html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #14161a;
  color: #e8e8e8;
  font-family: "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  padding-top: 3.2vh; /* clears the fixed #header below */
  height: 100vh;
  box-sizing: border-box;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3.2vh;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 0 2vw;
  font-size: 2vh;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: #1c1f24;
  border-bottom: 1px solid #2a2e35;
  z-index: 5;
}

.status-pill {
  font-size: 1.6vh;
  font-weight: 600;
  padding: 0.2vh 0.8vw;
  border-radius: 1vh;
  background: #2a2e35;
  color: #9aa0a8;
}
.status-pill.live {
  background: #b3261e;
  color: #fff;
}

/* Normal document flow (not a fixed overlay) so a visible banner pushes
   main down via the flex layout above instead of covering its top edge. */
.banner {
  flex: 0 0 auto;
  padding: 1vh 2vw;
  font-size: 2vh;
  text-align: center;
  background: #5a3d00;
  color: #ffd479;
}
.banner.error { background: #5a1414; color: #ff9d9d; }
.banner.hidden { display: none; }

main {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ---- single-board view ---- */
#single-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.board-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.6vw;
}

.board-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The vw term in each board's width budgets for everything that shares the
   row: the move-history panel, eval bar, and gaps. body.no-moves overrides
   below give that width back to the board when the move list is hidden. */
.board {
  width: min(80vh, 76vw);
  max-width: 90vw;
}
body.no-moves .board { width: min(80vh, 90vw); }

.player-row {
  display: flex;
  align-items: center;
  gap: 0.8vh;
  font-size: 3vh;
  padding: 0.8vh 0;
  width: 100%; /* so the clock's margin-left:auto reaches the board's right edge */
  box-sizing: border-box;
}

.material {
  color: #9aa0a8;
  font-size: 0.85em;
}

.clock {
  margin-left: auto; /* right edge of the player row */
  font-variant-numeric: tabular-nums;
  color: #9aa0a8;
  background: #1c1f24;
  border: 1px solid #2a2e35;
  border-radius: 0.4vh;
  padding: 0.1vh 0.8vh;
  font-size: 0.85em;
}
.clock:empty { display: none; }
.clock.active {
  color: #14161a;
  background: #e8e8e8;
  border-color: #e8e8e8;
  font-weight: 600;
}

/* ---- eval bar + last-move highlight ---- */
.board-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.6vh;
}
.eval-bar {
  position: relative;
  width: 1.6vh;
  border-radius: 0.4vh;
  overflow: hidden;
  background: #403d39; /* black's share (top) */
}
.eval-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #e8e8e8; /* white's share (bottom) */
  transition: height 0.6s ease;
}
.eval-num {
  position: absolute;
  bottom: 0.4vh;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.1vh;
  font-weight: 600;
  color: #14161a;
  z-index: 1;
}
/* single view has room for a wider bar so the number fits */
#single-view .eval-bar { width: 2.6vh; }
body.no-eval .eval-bar { display: none; }

/* from/to squares of the most recent move (same yellow wash chess sites
   use; inset shadow so it layers over chessboard.js's inline square color) */
.last-move {
  box-shadow: inset 0 0 0 999px rgba(255, 213, 79, 0.4);
}

/* ---- move history (algebraic notation list) ---- */
.move-history {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Size as if empty (width is set explicitly below) so the board column
     alone sets the flex row's height; align-items: stretch then grows the
     list back to match it. Without this the list is the tallest flex item
     and expands the whole row instead of scrolling. */
  contain: size;
  background: #1c1f24;
  border: 1px solid #2a2e35;
  border-radius: 0.6vh;
  scrollbar-width: none;
}
.move-history::-webkit-scrollbar { display: none; }
body.no-moves .move-history { display: none; }
.move-history:empty { visibility: hidden; }

.move-row {
  display: flex;
  flex: 0 0 auto;
  padding: 0.15vh 0.6vh;
}
.move-row:nth-child(even) { background: rgba(255, 255, 255, 0.03); }

.move-num {
  flex: 0 0 auto;
  width: 2.2em;
  color: #9aa0a8;
}

.move-san {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0.4vh;
  border-radius: 0.3vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.move-san.current {
  background: #2e6fdb;
  color: #fff;
  font-weight: 600;
}

#single-view .move-history {
  width: 15vw;
  font-size: 2.2vh;
}

/* Rings a green border around the board and its move list (the class goes
   on .board-row / .grid-cell, falling back to the board itself) when a move
   lands. 3 pulses over 5s; restarted from JS (remove/reflow/re-add the
   class) so back-to-back moves each get their own full run of flashes
   instead of being cut short. */
@keyframes board-move-flash {
  from { box-shadow: 0 0 0 0.4vh #4caf50, 0 0 1.4vh 0.3vh rgba(76, 175, 80, 0.7); }
  to   { box-shadow: 0 0 0 0.4vh rgba(76, 175, 80, 0); }
}
.move-flash {
  animation: board-move-flash 1.667s ease-out 3;
}

.turn-dot {
  width: 1.4vh;
  height: 1.4vh;
  border-radius: 50%;
  background: transparent;
}
.turn-dot.active { background: #4caf50; box-shadow: 0 0 1vh #4caf50; }

.meta {
  margin-top: 1vh;
  font-size: 2vh;
  color: #9aa0a8;
  padding: 0.4vh 1.6vw;
  border: 0.3vh solid transparent;
  border-radius: 0.6vh;
}
/* Same white semi-transparent selection style as .grid-cell.focused, for
   when the d-pad selection sits on the "Page x of x" bar. */
.meta.focused {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.14);
  color: #e8e8e8;
}
.page-hint {
  visibility: hidden;
  color: #e8e8e8;
}

/* ---- grid view ---- */
#grid-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vh 2vw;
  width: 92vw;
  /* Fills whatever space #grid-view (itself flex-sized by body/main, see
     above) actually has left, rather than a hardcoded vh guess - so it
     stays correct whether or not the banner is currently taking up space. */
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-items: center;
}

.grid-cell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.6vw;
  border: 0.3vh solid transparent;
  border-radius: 0.6vh;
  padding: 0.6vh;
}
.grid-cell .board-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-cell .move-history {
  width: 8vw;
  font-size: 1.3vh;
}
#grid-container[data-bpp="1"] .grid-cell .move-history { width: 20vw; font-size: 2.1vh; }
#grid-container[data-bpp="2"] .grid-cell .move-history { width: 12vw; font-size: 1.7vh; }
#grid-container[data-bpp="6"] .grid-cell .move-history { width: 7vw; font-size: 1.15vh; }
#grid-container[data-bpp="9"] .grid-cell .move-history { width: 6vw; font-size: 1vh; }
/* Selection box: white and semi-transparent. The backend hides it (via
   selection_visible=false in the SSE state) 5s after the last remote press. */
.grid-cell.focused {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.14);
}
.grid-cell .board {
  width: min(36vh, 33vw);
}
/* Board sizes per boards-per-page layout (data-bpp set by display.js).
   Each vw cap = per-cell share of the 92vw grid minus that layout's
   move-history width, eval bar, and gaps, so a row can never overflow. */
#grid-container[data-bpp="1"] .grid-cell .board { width: min(72vh, 64vw); }
#grid-container[data-bpp="2"] .grid-cell .board { width: min(66vh, 30vw); }
#grid-container[data-bpp="6"] .grid-cell .board { width: min(34vh, 19vw); }
#grid-container[data-bpp="9"] .grid-cell .board { width: min(24vh, 20vw); }
body.no-moves .grid-cell .board { width: min(36vh, 42vw); }
body.no-moves #grid-container[data-bpp="1"] .grid-cell .board { width: min(72vh, 88vw); }
body.no-moves #grid-container[data-bpp="2"] .grid-cell .board { width: min(66vh, 42vw); }
body.no-moves #grid-container[data-bpp="6"] .grid-cell .board { width: min(34vh, 27vw); }
body.no-moves #grid-container[data-bpp="9"] .grid-cell .board { width: min(24vh, 27vw); }
.grid-cell .player-row {
  font-size: 1.6vh;
  gap: 0.5vh;
  padding: 0.3vh 0;
}
.grid-cell .turn-dot {
  width: 1vh;
  height: 1vh;
}
.grid-cell .board-no {
  font-size: 1.3vh;
  color: #9aa0a8;
}

/* chessboard.js draws inline square colors; keep board rims tidy on a dark bg */
.board .board-b72b1 {
  border: none;
}