* {
  font-family: sans-serif;
}
@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: black;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: #17141d;
    color: #c5c5c5;
  }
}
:root {
  --go-board-background: #f1b060;
  --go-board-foreground: #805030;
  --go-board-white: white;
  --go-board-black: #303030;
  --chess-board-light: #f1d9c0;
  --chess-board-dark: #a97a65;
  --chess-piece-white: white;
  --chess-piece-black: black;
  --chess-check--light: #f2464e;
  --chess-check--dark: #d2191f;
  --chess-lastmove-src-light: #d9bc73;
  --chess-lastmove-src-dark: #d5ab53;
  --chess-lastmove-dst-light: #e5dd88;
  --chess-lastmove-dst-dark: #d2bc66;
}
input, button {
  font-size: 1rem;
}
button {
  cursor: pointer;
}
.color-scheme-preset {
  display: inline-block;
  padding: 0 0.25rem;
  cursor: pointer;
}
.color-scheme-preset > span:first-child {
  margin-right: 0;
}
.color-scheme-preset > span:last-child {
  margin-left: 0;
}
.color-box {
  border: 1px solid darkgray;
  text-align: center;
  font-size: 2em;
}
.color-picker {
  background-color: transparent;
  width: 2em;
  height: 2em;
  border: 0;
  padding: 0;
  cursor: pointer;
}
table.go-board, table.go-board-coord {
  padding: 0;
  border-spacing: 0;
  table-layout: fixed;
  user-select: none;
  overflow: hidden;
  text-align: center;
  background-color: var(--go-board-background);
  color: var(--go-board-foreground);
  aspect-ratio: 1 / 1;
}
table.go-board tr, table.go-board-coord tr {
  height: 28px;
}
table.go-board td, table.go-board-coord td {
  width: 26px;
}
table.go-board td:first-child, table.go-board-coord td:first-child {
  font-weight: bold;
  font-family: sans-serif;
}
table.go-board tr:last-child td, table.go-board-coord tr:last-child td {
  font-weight: bold;
  font-family: sans-serif;
}
table.go-board td, table.go-board-coord [data-xy] {
  background-image: linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
table.go-board [data-star="1"], table.go-board-coord [data-star="1"] {
  background-image: radial-gradient(var(--go-board-foreground) 20%, transparent 25%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
table.go-board [data-bw="w"], table.go-board-coord [data-bw="w"] {
  background-image: radial-gradient(var(--go-board-white) 56%, var(--go-board-black) 62%, var(--go-board-black) 65%, transparent 68%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%) !important;
  color: black;
}
table.go-board [data-bw="b"], table.go-board-coord [data-bw="b"] {
  background-image: radial-gradient(var(--go-board-black) 65%, transparent 68%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%) !important;
  color: white;
}
table.go-board [data-bw="N"], table.go-board-coord [data-bw="N"] {
  background-image: radial-gradient(var(--go-board-background) 55%, var(--go-board-foreground) 61%, var(--go-board-foreground) 65%, transparent 68%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%) !important;
  color: blue;
}
/* Top edge */
table.go-board tr:first-child td, table.go-board-coord tr:first-child td:not(:first-child) {
  background-image: linear-gradient(var(--go-board-background) 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
/* Left edge */
table.go-board td:first-child, table.go-board-coord tr:not(:last-child) td:nth-child(2) {
  background-image: linear-gradient(90deg, var(--go-board-background) 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
/* Right edge */
table.go-board td:last-child, table.go-board-coord tr:not(:last-child) td:last-child {
  background-image: linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, var(--go-board-background) 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
/* Bottom edge */
table.go-board tr:last-child td, table.go-board-coord tr:nth-last-child(2) td:not(:first-child) {
  background-image: linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, var(--go-board-background) 53%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
/* Corners */
table.go-board tr:first-child td:first-child, table.go-board-coord tr:first-child td:nth-child(2) {
  background-image: linear-gradient(135deg, var(--go-board-background) 49%, transparent 50%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
table.go-board tr:first-child td:last-child, table.go-board-coord tr:first-child td:last-child {
  background-image: linear-gradient(45deg, transparent 50%, var(--go-board-background) 51%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
table.go-board tr:last-child td:first-child, table.go-board-coord tr:nth-last-child(2) td:nth-child(2) {
  background-image: linear-gradient(45deg, var(--go-board-background) 49%, transparent 50%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
table.go-board tr:last-child td:last-child, table.go-board-coord tr:nth-last-child(2) td:last-child {
  background-image: linear-gradient(135deg, transparent 50%, var(--go-board-background) 51%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%);
}
/* Hovers */
table.go-board td:hover , table.go-board-coord td[xy]:hover {
  background-image: radial-gradient(rgba(128, 128, 128, 0.5) 55%, var(--go-board-foreground) 61%, var(--go-board-foreground) 65%, transparent 68%),
    linear-gradient(90deg, transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%),
    linear-gradient(transparent 47%, var(--go-board-foreground) 49%, var(--go-board-foreground) 51%, transparent 53%) !important;
}
.chess-container {
  border-collapse: collapse;
  width: 100vmin;
  height: 100vmin;
}
.chess-container td {
  background-color: var(--chess-board-light);
  cursor: default;
  font-size: 10vmin;
  font-weight: bold;
  width: 12.5%;
  height: 12.5%;
  padding: 0;
  text-align: center;
}
.chess-white {
  color: var(--chess-piece-white);
}
.chess-black {
  color: var(--chess-piece-black);
}
table.chess-container tr:nth-child(odd) > td:nth-child(even) {
  background-color: var(--chess-board-dark);
}
table.chess-container tr:nth-child(even) > td:nth-child(odd) {
  background-color: var(--chess-board-dark);
}
.chess-highlight {
  filter: invert(100%);
}
.chess-check {
  background-color: var(--chess-check--light);
}
tr:nth-child(odd) > td.chess-check :nth-child(even) {
  background-color: var(--chess-check--dark);
}
tr:nth-child(even) > td.chess-check:nth-child(odd) {
  background-color: var(--chess-check--dark);
}
.chess-lastmove-src {
  background-color: var(--chess-lastmove-src-light);
}
tr:nth-child(odd) > td.chess-lastmove-src:nth-child(even) {
  background-color: var(--chess-lastmove-src-dark);
}
tr:nth-child(even) > td.chess-lastmove-src:nth-child(odd) {
  background-color: var(--chess-lastmove-src-dark);
}
.chess-lastmove-dst {
  background-color: var(--chess-lastmove-dst-light);
}
tr:nth-child(odd) > td.chess-lastmove-dst:nth-child(even) {
  background-color: var(--chess-lastmove-dst-dark);
}
tr:nth-child(even) > td.chess-lastmove-dst:nth-child(odd) {
  background-color: var(--chess-lastmove-dst-dark);
}
table.chess-container svg, table.cchess-container svg {
  pointer-events: none;
}
.chess-container .mode-1 td, .chess-container .mode-2 td, .cchess-container .mode-1 td, .cchess-container .mode-2 td {
  cursor: pointer;
}
.chess-container .mode-1 td:hover, .cchess-container .mode-1 td:hover {
  background-color: rgba(0, 255, 0, 0.1);
}
@media (min-width: 320px) {
  .coords {
    font-size: calc(8px + 4 * (100vw - 320px) / 880);
  }
}
@media (min-width: 1200px) {
  .coords {
    font-size: 12px;
  }
}
.coords {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: flex;
  font-weight: bold;
}
.coords.ranks {
  flex-flow: column-reverse;
  top: 1px;
  right: 0;
  width: .8em;
  height: 100%;
}
.coords.files {
  flex-flow: row;
  bottom: 0;
  left: 0;
  text-align: left;
  width: 100%;
  height: 1.4em;
}
.coords > span {
  flex: 1 1 auto;
}
.ranks :nth-child(odd) {
  color: var(--chess-board-dark);
}
.ranks :nth-child(even) {
  color: var(--chess-board-light);
}
.files :nth-child(odd) {
  color: var(--chess-board-light);
}
.files :nth-child(even) {
  color: var(--chess-board-dark);
}
.cchess-container {
  border-collapse: collapse;
  width: 75vmin;
  height: 83vmin;
  margin: 7.5vmin 0;
}
.cchess-container td {
  cursor: default;
  width: 11.1%;
  height: 10%;
  padding: 0;
  text-align: center;
}
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.popup .popuptext-below {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: -250%;
  left: 50%;
  margin-left: -80px;
}
.popup .popuptext-below::after {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}