* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
  font-family: monospace;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100%;
}
main {
  display: flex;
  margin: 0 auto;
  width: fit-content;
  gap: 10px;
}
#chessboard-frame {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  color: #aaa;
}
#top {
  width: 400px;
  height: 40px;
  display: flex;
}
#top div {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#middle {
  display: grid;
  grid-template-columns: 40px 320px 40px;
}
#left {
  width: 40px;
  height: 320px;
  display: flex;
  flex-direction: column;
}
#left div {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#chessboard {
  width: 324px;
  height: 324px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #bbb;
}
#chessboard div {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
}
#right {
  width: 40px;
  height: 320px;
  display: flex;
  flex-direction: column;
}
#right div {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#bottom {
  width: 400px;
  height: 40px;
  display: flex;
}
#bottom div {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#displayframe {
  width: 400px;
  height: fit-content;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#select-container,
#xfen-container {
  border: 1px solid #00000022;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  background-color: #eee;
}
#select-container {
  flex-direction: row;
}
#select-container > #select {
  width: 80%;
  border: none;
  padding: 5px;
}
#select-container > #reset-btn {
  background-color: #bd0000;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
  width: 20%;
  padding: 5px;
  cursor: pointer;
}
#select-container > #reset-btn:hover {
  background-color: red;
}
#ss-container {
  display: flex;
  gap: 5px;
}
#ss-container > div {
  width: 50%;
  border: 1px solid #00000022;
  border-radius: 5px;
  background-color: #eee;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#xfen {
  font-size: 0.7rem;
  word-break: break-all;
}
#side {
  font-weight: bold;
}
.white {
  color: #fff;
}
#status {
  color: red;
  font-weight: bold;
}
div[color="light"] {
  background-color: #fff;
}
div[color="dark"] {
  background-color: #00000022;
}
canvas {
  filter: drop-shadow(0 0 4px #00000088);
}
canvas.grabbed {
  transform: scale(1.2);
}
.selected {
  position: relative;
}
.selected::before {
  content: "";
  position: absolute;
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 3px double #8f217c;
  border-radius: 4%;
}
.select-promotion {
  display: flex;
  justify-content: center;
  width: fit-content;
  padding: 7px;
  height: 60px;
  border: 3px double #8f217c;
  border-radius: 4%;
}
.select-promotion > canvas {
  height: 100%;
}
@media screen and (max-width: 48em) {
  main {
    display: block;
  }
  #displayframe {
    margin-top: 15px;
    margin-left: 0;
  }
}