body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #222;
  margin: 0;
}

/* Root layout: board is centered independent of sidebar */
.layout {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Board is dead-center of viewport */
.board-column {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Default: right sidebar */
.board-wrapper {
  width: min(
    calc(100vmin - 24px),
    calc(100vw - 280px - 24px),
    calc(100vh - 24px)
  );
  height: min(
    calc(100vmin - 24px),
    calc(100vw - 280px - 24px),
    calc(100vh - 24px)
  );
}

/* Board */
.board {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
}

.square {
  width: 100%;
  height: 100%;
}

/* CSS fallback board colors */
.css-board .square.light {
  background: var(--light-square, #fff3e0);
}

.css-board .square.dark {
  background: var(--dark-square, #3f3f3f);
}


/* Pieces are absolutely positioned; size set inline from JS */
.piece {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece-img {
  width: 100%;
  height: 100%;
}

/* CSS fallback pieces should fill the piece container */
.piece-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-sizing: border-box;

  /* JS sets --piece-size on the container style */
  font-size: calc(var(--piece-size, 56px) * 0.45);
  line-height: 1;
}

.piece-fallback.w {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}

.piece-fallback.b {
  background: #000;
  color: #fff;
}

/* Sidebar: fixed right */
.controls-column {
  position: fixed;
  right: 12px;
  top: 12px;
  bottom: 12px;
  width: 280px;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #ddd;
}

.controls button {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

.controls label {
  display: block;
  margin: 12px 0;
}

.controls textarea {
  width: 100%;
  height: 220px;
  margin-top: 10px;
  font-family: monospace;
  font-size: 13px;
  box-sizing: border-box;
}

.error {
  margin-top: 12px;
  color: #c00;
  font-weight: bold;
  max-width: 100%;
  text-align: left;
}

/* Bottom bar mode: used when sidebar would overlap the board */
.layout.sidebar-bottom .controls-column {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  width: auto;
  height: 240px;
}

.layout.sidebar-bottom .board-wrapper {
  width: min(calc(100vw - 24px), calc(100vh - 240px - 36px));
  height: min(calc(100vw - 24px), calc(100vh - 240px - 36px));
}

/* When controls are on the bottom, anchor the board near the top */
.layout.sidebar-bottom .board-column {
  top: 12px;
  transform: translate(-50%, 0);
}