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;
  --history-controls-height: 40px;
  --right-menu-explorer-width: 350px;

  --button-icon-border: 1px solid;
  --button-icon-border-radius: 5px;
  --button-icon-background-color: #fff;
  --button-icon-background-color-hover: rgb(208, 228, 249);
}

.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;
}

#move-stats.forbidden, #move-stats.forbidden a {
  cursor: not-allowed;
}

#move-stats td .move {
  cursor: pointer;
  color: #186195;
  display: flex;
  align-items: center;
  padding: 2px 0;
}

.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;
}
img.fake {
  right: 2px;
  bottom: 2px;
  opacity: 0.8;
  width: 25%;
  height: 25%;
  min-width: 10px;
  min-height: 10px;
  aspect-ratio: 1/1;
}

.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: var(--history-controls-height);
  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, #move-stats tr img {
  width: 22px;
  height: 22px;
}
#right-menu.opening-explorer > section {
  overflow-y: auto;
  height: 100%;
}
#right-menu.opening-explorer {
  min-width: var(--right-menu-explorer-width);
}
#move-stats tr {
  /* little trick to ensure that "height: 100%" on `td` actually works. */
  height: 1px;
}
#move-stats tr td {
  height: 100%;
}
/* First column of the table (san + piece) needs to have all its information displayed on one line */
#move-stats tr td:nth-of-type(1) {
  width: calc(22px + 4ch);
}
#move-stats tr td:nth-of-type(2) {
  width: calc(9ch);
}
#move-stats tr td:nth-of-type(3) {
  width: calc(8ch);
}
#move-stats tr td:nth-of-type(4) {
  padding: 0;
}
#move-stats tr td:nth-of-type(4) > span {
  display: inline-flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#move-stats tr td:nth-of-type(4) > span:nth-of-type(1) {
  background-color: #ededed;
  box-shadow: inset 1px 1px 1px #000, inset 0 -1px 1px #000;
}
#move-stats tr td:nth-of-type(4) > span:nth-of-type(2) {
  background-color: #919191;
  box-shadow: inset 0 1px 1px #000, inset 0 -1px 1px #000;
  color: #fff;
}
#move-stats tr td:nth-of-type(4) > span:nth-of-type(3) {
  background-color: #292929;
  box-shadow: inset 0 1px 1px #000, inset -1px -1px 1px #000;
  color: #fff;
}
#right-menu table {
  /* 2px for the borders */
  width: calc(100% - 2px);
  border-collapse: collapse;
}
#right-menu td, #right-menu th {
  border: 1px solid #ccc;
}
#right-menu tr:nth-child(2n) {
  background-color: #d9d9d9;
}
#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));
}
#puzzle-container.opening-explorer #main-board {
  max-width: min(
    calc((100vw - var(--history-panel-width)) * 0.67),
    calc((100vw - var(--history-panel-width)) - var(--right-menu-explorer-width)));
}

#board1, #board2 {
  margin: var(--board-margin);
}
#board2 {
  /* 44px is the "Partner" heading. */
  max-height: calc(100% - 44px);
}
.chessboard-63f37 > div {
  margin: 0 auto;
}
#board1 {
  position: relative;
  max-height: 100%;
  height: calc(100% - var(--board-margin) * 2);
}
#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.puzzle > 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 */
  font-size: 23px;
}
.title .reset-opening-explorer {
  position: absolute;
  right: 2px;
  height: 30px;
  width: 30px;
  border: var(--button-icon-border);
  border-radius: var(--button-icon-border-radius);
  background-color: var(--button-icon-background-color);
  top: 3px;
  /* Font Awesome Free v7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc. */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 640 640"><path d="M290.4 70C288.9 66.4 285.4 64 281.5 64L262.5 64C258.6 64 255 66.4 253.6 70L232.9 121.7C229.7 129.7 218.3 129.7 215.1 121.7L194.4 70C192.9 66.4 189.4 64 185.5 64L176 64C149.5 64 128 85.5 128 112L128 320L512 320L512 112C512 85.5 490.5 64 464 64L358.5 64C354.6 64 351 66.4 349.6 70L328.9 121.7C325.7 129.7 314.3 129.7 311.1 121.7L290.4 70zM128 368L128 384C128 419.3 156.7 448 192 448L256 448L256 512C256 547.3 284.7 576 320 576C355.3 576 384 547.3 384 512L384 448L448 448C483.3 448 512 419.3 512 384L512 368L128 368zM320 528C311.2 528 304 520.8 304 512C304 503.2 311.2 496 320 496C328.8 496 336 503.2 336 512C336 520.8 328.8 528 320 528z"/></svg>');
  transform: rotate(-180deg);
}
.title .reset-opening-explorer:hover {
  background-color: var(--button-icon-background-color-hover);
}
.title .reset-opening-explorer > svg {
  /* Because the SVG is in the wrong direction */
  transform: rotate(-180deg);
}
#title {
  margin-bottom: 20px;
}
.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;
}
#popup-next h2 {
  text-align: center;
  margin-bottom: 1em;
}

.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));
}
.chessground-flip-button {
  --flip-button-height: 50%;
  height: var(--flip-button-height);
  position: absolute;
  right: 5px;
  top: calc((100% - var(--flip-button-height)) / 2);
  min-height: 10px;
  min-width: 10px;
  padding-top: 2px;
  cursor: pointer;
  border: var(--button-icon-border);
  border-radius: var(--button-icon-border-radius);
  background-color: var(--button-icon-background-color);
  aspect-ratio: 1 / 1;
  font-size: max(7px, min(20px, calc(100cqw / 4)));
}
.chessground-flip-button:hover {
  background-color: var(--button-icon-background-color-hover);
}

.collapser {
  display: none;
}

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

: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);
}

/* If screen height is too small, we prevent the side menu to be scrolled with the main board */
@media (max-height: 750px) or (max-width: 850px) {
  #main-board .info-box {
    position: relative;
    width: 100%;
  }

  #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));
  }

  #right-menu, #history {
    position: sticky;
    top: 0;
    height: 100%;
  }

  /* We reduce the main board height a bit here because the "info box" is below it. */
  #board1 {
    height: calc(100% - var(--board-margin) * 2 - 10px);
  }
}

@media (max-height: 750px) and (min-width: 900px) {
  #board1 {
    height: calc(100% - var(--board-margin) * 2 - 10px);
  }
}

@media (max-width: 1100px) {
  #right-menu {
    width: 40vw;
    max-width: initial;
  }
  .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);
    left: calc((100vw - 70px) * -1);
    transition: left .3s, right .3s;
    z-index: var(--side-menu-z-index);
    height: calc(100vh - var(--header-height));
  }
  #history .collapser {
    right: -30px;
    top: calc(var(--header-height) + 5px);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: block;
  }
  #history.expanded {
    left: 0;
  }
  #main-board {
    width: calc(100vw - var(--mobile-main-board-margin));
    margin: 0 auto;
    min-height: 270px;
  }
  #puzzle-container.opening-explorer #main-board {
    max-width: calc(100vw - var(--right-menu-explorer-width));
  }
}

@media (min-height: 751px) {
  #right-menu {
    height: 100%;
  }

  #board2 {
    max-height: calc(100% - var(--info-box-height));
  }

  #main-board .info-box {
    /* 1px is for the border */
    width: calc(40vw - 1px);
  }

  #main-board .info-box {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 40vw;
    z-index: 1;
  }
}

@media (max-width: 850px) {
  #history {
    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.expanded {
    right: 0;
  }
  #history.expanded ~ #blocker {
    display: block;
  }
  #board1, #board2 {
    padding: 0 2px;
  }
  #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;
  }
  /* Needed for mobile chrome... */
  body.puzzle header {
    position: fixed;
    z-index: var(--sidebar-z-index);
  }
}

@media (min-width: 1100px) and (min-height: 751px) {
  #main-board .info-box {
    width: calc((100vw - var(--history-panel-width)) * 0.33 - 1px);
  }
}

@media (max-width: 600px) {
  #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));
    right: calc((100vw - 70px) * -1);
  }
  #right-menu .collapser {
    left: -30px;
    top: 18px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: block;
  }
  #right-menu.expanded ~ #blocker {
    display: block;
  }

  #main-board, .board,
  #puzzle-container.opening-explorer #main-board {
    width: calc(100% - var(--board-margin) * 2);
    max-width: calc(100% - var(--board-margin) * 2);
  }
}

/* Same as above but for opening explorer, we want to "hide" the right menu sooner because
it's wider */
@media (max-width: 720px) {
  #puzzle-container.opening-explorer #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));
    right: calc((100vw - 70px) * -1);
  }
  #puzzle-container.opening-explorer #right-menu .collapser {
    left: -30px;
    top: 18px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: block;
  }
  #puzzle-container.opening-explorer #right-menu.expanded ~ #blocker {
    display: block;
  }

  #puzzle-container.opening-explorer #main-board {
    width: calc(100% - var(--board-margin) * 2);
    max-width: calc(100% - var(--board-margin) * 2);
  }
}

@media (min-width: 601px) and (max-width: 1100px) {
  #main-board {
    width: calc(60vw - 1px);
    margin: 0;
    position: relative;
    max-width: initial;
    flex-grow: 0;
  }
}

@media (max-height: 750px) {
  #right-menu.puzzle > section {
    height: 100%;
    max-height: 100%;
  }

  #board2 {
    /* 44px is title height + margin */
    height: calc(100% - 44px - 70px);
  }
}

/* Horizontal orientation for mobile in short */
@media (min-width: 601px) and (max-width: 1100px) and (max-height: 750px) {
  #history {
    width: 200px;
    left: calc(-221px);
  }
  #history .collapser {
    z-index: 2;
  }
  #history .history-content {
    z-index: 2;
    background: var(--sidebar-background);
  }
  #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: 601px) and (max-height: 750px) and (max-width: 850px) {
  #main-board {
    position: relative;
    max-width: initial;
    flex-grow: 0;
  }
  #right-menu {
    max-width: initial;
    flex-grow: 0;
  }
  .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;
  }
  #history .collapser {
    top: 5px;
  }
}

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