html {
  --history-panel-width: 220px;
  --info-box-height: 151px;
  --sidebar-background: #eee;
  --mobile-main-board-margin: 20px;
  --border-color: #000;
  --popup-content-padding: 10px;
  --side-menu-z-index: 2;
  --board-margin: 5px;
  --turn-border-size: 2px;
}

.clearfix-7da63 {
  clear: both;
}

.board {
  height: calc(100% - var(--board-margin) * 2);
  max-height: calc(100% - var(--board-margin) * 2);
  width: calc(100% - var(--board-margin) * 2);
  max-width: calc(100% - var(--board-margin) * 2);
  position: relative;
  /* disable any native browser highlighting */
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.row-5277c {
  height: calc(100% / 8);
  position: relative;
  display: flex;
  align-items: stretch;
  aspect-ratio: 8 / 1;
}
.square-55d63 {
  width: calc(100% / 8);
  position: relative;
}
.square-55d63 img,
.spare-pieces-7492f > .piece-wrapper img,
.animated-piece img {
  height: 100%;
  width: 100%;
}

.chessboard-63f37 {
  position: relative;
  max-height: 100%;
  margin: auto;
  max-width: 100%;
  aspect-ratio: 1/1;
}
.chessboard-63f37.with-hands {
  aspect-ratio: 39/50;
}
.chessboard-63f37 .invalid-move {
  box-shadow: inset 0 0 4px 4px #ea4a3a;
}

.board-b72b1 {
  border: 2px solid #404040;
  box-sizing: content-box;
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1/1;
}

.board-b72b1 > .board-promotion {
  position: absolute;
  z-index: 1;
  background: rgba(110, 110, 110,.8);
  width: 100%;
  height: 100%;
  display: none;
}

.board-b72b1 > .board-promotion > .promotion-pieces {
  position: absolute;
  width: calc(100% / 8);
}

.board-b72b1 > .board-promotion > .promotion-pieces > .promotion-piece {
  background-color: rgba(50, 50, 50);
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.board-b72b1 > .board-promotion > .promotion-pieces > .promotion-piece:hover {
  background-color: rgb(100, 100, 150);
}

.board-b72b1 > .board-promotion > .promotion-pieces img {
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  background-color: rgb(180, 180, 180);
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.board-b72b1 svg.shapes {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}
.board-b72b1 svg.shapes .arrow-head {
  stroke-width: 0.15625;
  stroke-linecap: round;
}
.board-b72b1 svg.shapes .arrow-head.red {
  marker-end: url(#markerArrowRed);
}
.board-b72b1 svg.shapes .red {
  stroke: rgb(255,0,0);
}
.board-b72b1 svg.shapes .arrow-head.green {
  marker-end: url(#markerArrowGreen);
}
.board-b72b1 svg.shapes .green {
  stroke: rgb(0,255,0);
}
.board-b72b1 svg.shapes .arrow-head.blue {
  marker-end: url(#markerArrowBlue);
}
.board-b72b1 svg.shapes .blue {
  stroke: rgb(0,0,255);
}
.board-b72b1 svg.shapes .arrow-head.yellow {
  marker-end: url(#markerArrowYellow);
}
.board-b72b1 svg.shapes .yellow {
  stroke: rgb(255,172,0);
}

.square-55d63.white-1e1d7.potential-move {
  background-color: #a9a9a9;
}
.square-55d63.black-3c85d.potential-move {
  background-color: #696969;
}
.selected:hover {
  cursor: pointer;
}

.highlight-red {
  box-shadow: inset 0 0 3px 3px red;
}

.highlight-yellow {
  box-shadow: inset 0 0 3px 3px yellow;
}

.highlight-blue, .highlight1-32417, .highlight2-9c5d2, .potential-move:hover, .selected-piece {
  box-shadow: inset 0 0 4px 3px #3a3aea;
}

.tuto-highlight {
  box-shadow: 0 0 30px #0076bd;
  z-index: 1;
}

.white-1e1d7 {
  background-color: #f0d9b5;
  color: #b58863;
}

.black-3c85d {
  background-color: #b58863;
  color: #f0d9b5;
}

.notation-322f9 {
  cursor: default;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  position: absolute;
}

.alpha-d2270 {
  bottom: 1px;
  right: 3px;
}

.numeric-fc462 {
  top: 2px;
  left: 2px;
}

.piece-wrapper {
  position: relative;
}

.spare-count, .fake {
  border: 1px solid #ccc;
  border-radius: 37%;
  position: absolute;
  background: #fff;
}
.spare-count {
  padding: 0 4px;
  font-size: max(7px, min(20px, calc(100cqw / 4)));
  right: 0;
  bottom: 1px;
}
.fake {
  right: 2px;
  bottom: 2px;
  opacity: 0.8;
}

.request-pieces {
  width: fit-content;
  margin: 15px auto 5px;
}
.request-pieces > div {
  display: inline-block;
}
.request-pieces > div > img:not(.invalid-move) {
  border: 1px solid #bbb;
  border-right: 0;
  cursor: pointer;
}
.request-pieces.forbidden > div > img:not(.invalid-move) {
  cursor: not-allowed;
}
.request-pieces > div > img:hover:not(.invalid-move) {
  background: rgba(175, 211, 249, 0.6);
}
.request-pieces.forbidden img:hover:not(.invalid-move) {
  background: initial;
}
.request-pieces > div:first-child > img:not(.invalid-move) {
  border-top-left-radius: 13%;
  border-bottom-left-radius: 13%;
}
.request-pieces > div:last-child > img:not(.invalid-move) {
  border-right: 1px solid #bbb;
  border-top-right-radius: 13%;
  border-bottom-right-radius: 13%;
}
.request-pieces > div > img.solution-clicked {
  animation-name: spare_piece_add;
  animation-duration: 1s;
}
.request-pieces .invalid-move {
  position: absolute;
  z-index: 1;
  color: white;
  border: 1px solid red;
  border-radius: 50%;
  background-color: red;
  padding: 1px;
}

#puzzle-container {
  height: calc(100vh - var(--header-height));
  display: flex;
}
#history {
  width: var(--history-panel-width);
  min-width: var(--history-panel-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  background: var(--sidebar-background);
}
#history .history-content {
  width: 100%;
  overflow-y: auto;
  position: relative;
  flex-grow: 1;
}
#history .history-content .table-wrapper {
  height: calc(100% - 40px - 1px); /* -1px because of border-top */
  overflow-y: auto;
}
.history-controls {
  height: 40px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: stretch;
  flex-direction: row;
  overflow-y: hidden;
}
.history-controls button {
  flex: 1;
  margin: 0;
  border: 0;
  font-size: 30px;
  color: #000;
  background: transparent;
  line-height: 30px;
  -webkit-user-select: none; /* Needed for safari */
  user-select: none;
}
#history:not(.forbidden) .history-content .history-controls button:hover:not([disabled]),
.content .history-controls button:hover:not([disabled]) {
  cursor: pointer;
  color: #5786e1;
}
#history.forbidden .history-controls button,
.history-controls button[disabled] {
  pointer-events: none;
  color: rgb(109, 109, 109);
}
#history .history-content table {
  width: 100%;
  font-size: 15px;
  border-collapse: collapse;
}
#history .history-content table > thead {
  background: #fff;
}
#history .history-content table > thead > tr {
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}
#history .history-content table tr > :not(:first-child) {
  border-left: 1px solid var(--border-color);
}
#history .history-content table tr > :not(.counter) {
  width: 92px;
}
#history .history-content table tr > .counter {
  width: 16px;
  text-align: center;
}
#history .history-content table tr img {
  width: 22px;
  height: 22px;
}
#history .history-content table tr td {
  font-size: 13px;
  position: relative;
  padding: 3px;
}
#history .history-content table tr td > .pos {
  display: none;
}
#history .history-content table tr > td.ask {
  border-bottom: 1px solid var(--border-color);
}
#history .history-content table tr > td.ask > div {
  display: flex;
  justify-content: center;
}
#history .history-content table tr > td.ask > div > span {
  padding-top: 3px;
}
#history .history-content table tbody:not(.not-allowed) td.filled:hover {
  background: #c0e1f1;
  cursor: pointer;
}
#history.forbidden .history-content table tr td.filled:hover {
  background: initial;
  cursor: not-allowed;
}
#history .history-content table tr td.filled > .text {
  position: absolute;
  top: 6px;
  left: 26px;
}
#history .history-content table tr td.current {
  box-shadow: inset 0 0 1px 2px orange;
}

#main-board {
  height: 100%;
  max-width: calc((100vw - var(--history-panel-width)) * 0.67);
  flex-grow: 1;
  max-height: calc(100vh - var(--header-height));
}
#board1, #board2 {
  margin: var(--board-margin);
}
#board2 {
  max-height: calc(100% - var(--info-box-height));
}
.chessboard-63f37 > div {
  margin: 0 auto;
}
#board1 {
  position: relative;
  max-height: 100%;
}
#board1 > .load {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#board1 > .load > :not(last-child) {
  /* Could be replaced by `gap: 5px` in `#board1 > .load` but old web browsers don't support it... */
  margin-right: 5px;
}
#right-menu {
  max-width: calc((100vw - var(--history-panel-width)) * 0.33 - 1px);
  flex-grow: 1;
  background: var(--sidebar-background);
  position: relative;
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}
#right-menu > section {
  height: calc(100% - var(--info-box-height));
  max-height: calc(100% - var(--info-box-height));
  position: relative;
  flex-grow: 1;
}
#title {
  text-align: center;
  padding: 5px;
  border-bottom: 1px solid #201f1f; /* same color as header */
  margin-bottom: 20px;
  font-size: 23px;
}
.info-box {
  display: block;
  height: calc(var(--info-box-height) - 1px); /* 1px is for the border */
  width: 100%;
  border-top: 1px solid var(--border-color);
}
.info-box > .elo {
  text-align: center;
  padding-top: 27px;
  height: 29px;
  font-size: 19px;
}
.info-box > .information {
  text-align: center;
  display: block;
  height: 51px;
  padding-top: 24px;
  font-size: 27px;
  width: 100%;
}
.info-box > .information > span {
  font-size: 15px;
}
.info-box > .see-solution, .info-box > .replay {
  display: block;
  width: 100%;
  font-size: 18px;
  text-align: center;
}
.info-box > .replay {
  height: 77px;
  position: relative;
  display: flex;
  align-items: center;
}
.info-box > .replay > * {
  display: inline-block;
  text-align: center;
  flex-grow: 1;
}
.info-box > .replay > span {
  min-width: 74%;
}
.info-box > .see-solution > span {
  width: 100%;
  display: block;
  padding-top: 10px;
}
#puzzle-solved {
  font-size: 24px;
}
#replay-solution {
  font-size: 21px;
}
#puzzle-container.tuto #replay-solution {
  /* There is no vote element to display if it's a tuto */
  width: 100%;
}
.info-box > .replay > .puzzle-vote {
  float: right;
  width: 25%;
  padding-top: 5px;
}
.info-box > .replay > .puzzle-vote > * {
  display: block;
  width: 100%;
}
.info-box span.link {
  cursor: pointer;
  color: #1077c1;
}
.info-box span.link:hover {
  color: #59abe6;
}
.info-box span.link[disabled], .info-box span.link.not-allowed {
  pointer-events: none;
  cursor: not-allowed;
  color:  gray;
}
.info-box span.vote {
  color: #000;
}
span.vote.tooltip-left::before, span.vote.tooltip-left::after {
  right: 60%;
}
.info-box span.link.up {
  color: #4fcb22;
}
.info-box span.link.up:hover, .info-box span.vote:first-child:hover {
  color: #6ad643;
}
.info-box span.link.down {
  color: #ff5f5f;
}
.info-box span.link.down:hover, .info-box span.vote:not(first-child):hover {
  color: #f33f3f;
}
.info-box > .next-puzzle {
  text-align: center;
  background: #4fcb22;
  height: 73px;
  font-size: 23px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-color);
  color: #fff;
  /* This is to have a high contrast text. */
  text-shadow: 0 0 3px #000;
  padding: 0 2px;
}
.info-box > .next-puzzle:hover {
  background: #6ad643;
}
#puzzle-elo > div {
  display: none;
}
#puzzle-info .maximize {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  padding: 1px 5px;
  font-size: 1.5em;
}

/* popup part */
.popup {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--header-height));
  z-index: calc(var(--menu-dropdown-z-index) - 1);
  background: rgba(149, 149, 149, .7);
  display: flex;
  justify-content: center;
}
.popup > div {
  margin: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, .2);
  width: 550px;
  max-width: calc(100vw - 40px);
  height: auto;
  border: 1px solid #bfbfbf;
  background: #e9e9e9;
  padding: var(--popup-content-padding);
  border-radius: 6px;
  top: calc(30% - var(--header-height));
  position: absolute;
  border-color: #9d9a9a;
  display: flex;
  flex-direction: column;
}
#tutorial-popup > div:not(.invisible):not(.global-text) {
  transition: all 400ms ease-in;
}
.popup .tutorial-text {
  overflow-y: auto;
}
.popup > div.global-text .arrow {
  display: none;
}
.popup > div .arrow {
  height: 10px;
  width: 10px;
  border-radius: 0;
  position: absolute;
  /* Why 7? Because a square triangle hypotenuse for a square of 10 is:
     √(10² + 10²) = √(200) = 14.4.
     And since we need to divide it by 2 to get its middle, we got 7.
     Why a square triangle? Because we rotated a square by 45 deg.
  */
  top: calc(50% - 7px);
  background-color: #e9e9e9;
  transform: rotate(45deg);
}
.popup > .arrow-left .arrow {
  border-top: 1px solid #9d9a9a;
  border-right: 1px solid #9d9a9a;
  right: -6px;
}
.popup > .arrow-right .arrow {
  border-left: 1px solid #9d9a9a;
  border-bottom: 1px solid #9d9a9a;
  left: -6px;
}
.popup > .arrow-down .arrow {
  border-right: 1px solid #9d9a9a;
  border-bottom: 1px solid #9d9a9a;
  top: unset;
  margin: 0;
  bottom: -6px;
  /* Same computation as for "top" above. */
  left: calc(50% - 7px);
}
.popup > .arrow-up .arrow {
  border-left: 1px solid #9d9a9a;
  border-top: 1px solid #9d9a9a;
  top: -6px;
  margin: 0;
  bottom: unset;
  /* Same computation as for "top" above. */
  left: calc(50% - 7px);
}
.not-allowed {
  cursor: not-allowed !important;
}
#popup-next > div > span {
  text-align: center;
  display: block;
  font-size: 20px;
  margin: 10px 0 25px;
}
#popup-next > div > .button {
  margin: 10px 25px 0;
}

.spare-piece-add {
  animation-name: spare_piece_add;
  animation-duration: 1.5s;
}

@keyframes spare_piece_add {
  from {
    box-shadow: 0 0 0 #05c500;
  }
  50% {
    box-shadow: 0 0 30px #05c500;
  }
  to {
    box-shadow: 0 0 0 #05c500;
  }
}

.spare-pieces-7492f {
  position: relative;
}
.spare-pieces-7492f > .piece-wrapper {
  aspect-ratio: 1/1;
  width: calc(100% / 8);
  display: inline-block;
  /* Used to change the font-size depending on its parent height. */
  container-type: inline-size;
}
.chessground-show-turn {
  position: absolute;
  border-radius: 50%;
  min-height: 10px;
  min-width: 10px;
  border: var(--turn-border-size) solid;
  left: 5px;
  height: calc(100% / 2 - var(--turn-border-size) * 2);
  aspect-ratio: 1 / 1;
  top: calc(100% / 4 + var(--turn-border-size));
}

.collapser {
  display: none;
}

.animated-piece {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  width: calc(100% / 8);
}

@media (max-width: 850px), (min-width: 851px) and (max-height: 601px) {
  #right-menu > section {
    height: 100%;
    max-height: 100%;
  }
  .collapser {
    position: absolute;
    width: 30px;
    border: 1px solid #111;
    border-radius: 5px;
    padding: 0.1em;
    cursor: pointer;
    font-size: 2em;
  }
  #history {
    position: fixed;
    width: calc(100vw - 70px);
    transition: left .3s, right .3s;
    z-index: var(--side-menu-z-index);
    height: calc(100vh - var(--header-height));
  }
  #history .collapser {
    top: 5px;
  }
  #history .collapser {
    right: -30px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    top: 5px;
    display: block;
  }
  #history.expanded {
    left: 0;
  }
}

#main-board .info-box {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc((100vw - var(--history-panel-width)) * 0.33 - 1px);
  z-index: 1;
}
:not(.expanded) > .collapser > span:last-child, .expanded > .collapser > span:first-child {
  display: none;
}

#blocker {
  top: var(--header-height);
  height: calc(100% - var(--header-height));
  position: fixed;
  left: 0;
  right: 0;
  display: none;
  background: rgba(0,0,0,0.2);
  z-index: calc(var(--side-menu-z-index) - 1);
}
@media (max-width: 850px) {
  #history, #right-menu {
    position: fixed;
    width: calc(100vw - 70px);
    transition: left .5s, right .5s;
    z-index: var(--side-menu-z-index);
    top: var(--header-height);
    height: calc(100% - var(--header-height));
  }
  #history {
    left: calc((100vw - 70px) * -1);
  }
  #right-menu {
    right: calc((100vw - 70px) * -1);
  }
  #right-menu.expanded {
    right: 0;
  }
  #right-menu .collapser {
    left: -30px;
    top: 18px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: block;
  }
  #history.expanded ~ #blocker {
    display: block;
  }
  #right-menu.expanded ~ #blocker {
    display: block;
  }
  #main-board {
    width: calc(100vw - var(--mobile-main-board-margin));
    margin: 0 auto;
    min-height: 270px;
  }
  #board1, #board2 {
    padding: 0 2px;
  }
  #board1 {
    height: calc(100% - 1px);
    margin-top: 2px;
    margin-bottom: 10px;
  }
  #main-board .info-box {
    position: relative;
    width: 100%;
  }
  .info-box > .information {
    padding-top: 12px;
    padding-bottom: 2px;
  }
  .info-box > .see-solution > span {
    padding-top: 0;
    padding-bottom: 14px;
    font-size: 1.2em;
  }
}
/* Horizontal orientation for mobile in short */
@media (min-width: 551px) and (max-height: 601px) {
  #history {
    width: 200px;
    left: calc(-221px);
  }
  #history .collapser {
    z-index: 2;
  }
  #history .history-content {
    z-index: 2;
    background: var(--sidebar-background);
  }
  #main-board {
    width: calc(60vw - 1px);
    margin: 0;
  }
  #right-menu {
    position: fixed;
    width: 40vw;
    right: 0;
    top: var(--header-height);
    height: calc(100% - var(--header-height));
  }
  #right-menu .collapser {
    display: none;
  }
  #right-menu.expanded ~ #blocker {
    display: none;
  }
  #right-menu #title {
    margin-bottom: 6px;
  }
  #puzzle-info {
    overflow-y: auto;
  }
  .info-box {
    height: var(--info-box-height);
  }
}

@media (min-width: 551px) and (max-height: 601px), (max-width: 850px) {
  #puzzle-container {
    /* We need to make it positioned absolute to prevent to scroll the whole screen, only the main
     board and its content. Same reason for "overflow-y". */
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-height);
    height: calc(100% - var(--header-height));
  }
  /* Needed for mobile chrome... */
  body.puzzle header {
    position: fixed;
    z-index: var(--sidebar-z-index);
  }
  #main-board {
    position: relative;
    max-width: initial;
    flex-grow: 0;
  }
  #right-menu {
    max-width: initial;
    flex-grow: 0;
  }
  #main-board .info-box {
    position: relative;
    width: 100%;
  }
  .info-box > .information {
    padding-top: 12px;
    padding-bottom: 2px;
    /* Normally, `text-align: center;` should be enough, but seems like there is a firefox bug
       which completely messes up the display of the two links in the information box... */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info-box > .see-solution > span {
    padding-top: 0;
    padding-bottom: 14px;
    font-size: 1.2em;
    /* Normally, `text-align: center;` should be enough, but seems like there is a firefox bug
       which completely messes up the display of the two links in the information box... */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #board2 {
    /* 44px is the "Partner" heading and 70px is the size of the "request pieces" element. */
    max-height: calc(100% - 44px - 70px);
  }
}

#loading-img {
  position: absolute;
  z-index: -1;
  visibility: hidden;
  top: 0;
  left: 0;
}