html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);

* {
  box-sizing: border-box;
  tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 100%;
  overflow: hidden;
  font-family: avenir, "Lato", sans-serif;
  font-weight: 400;
}

button {
  font-family: "Lato", avenir, sans-serif;
  font-weight: 400;
}

body:not(.animated) *:not(#panes) {
  transition: all 0s linear;
}

#app {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
}

#app a {
  color: #eaeaea;
}

#container,
#board,
#frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

#app[data-frame="off"] #board,
#app[data-frame="off"] #board #container,
#app[data-frame="off"] #frame {
  width: 8em;
  height: 8em;
  margin: -4em 0 0 -4em;
}

#app[data-frame="on"] #container,
#app[data-frame="on"] #board,
#app[data-frame="on"] #frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.5em;
  height: 9.5em;
  margin: -4.75em 0 0 -4.75em;
  transform-style: preserve-3d;
}

/* Position adjustment after switching to css grid */
#app[data-frame="on"] #board {
  transform: translateX(-0.25em) translateY(-0.26em) translateZ(0.32em);
}

#container {
  z-index: 1;
  perspective: 800px;
  transform: translateZ(-9999px);
}

#app[data-state="game"] #container {
  transform: inherit;
}

#scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16em;
  height: 16em;
  margin: -8em 0 0 -8em;
  transform-style: preserve-3d;
  transform: rotateX(90deg) rotateZ(90deg);
}

.sphere {
  transform: rotateZ(-90deg) rotateX(-90deg);
}

#scene,
.sphere {
  transition: transform 2s ease-in-out;
}

#app[data-state="game"] #scene,
#app[data-state="game"] .sphere {
  transition-delay: 0.2s;
}

#pieces {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

#board {
  z-index: 0;
  transform: translateZ(0.3em);
}

#board:after,
#frame:after,
#frame:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.3em;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

#frame {
  z-index: -1;
  transform-style: preserve-3d;
  transform: translateZ(0.02em) rotateZ(90deg);
  box-shadow: 0 0 0.25em 0.1em rgba(0, 0, 0, 0.5);
}

#app[data-frame="on"] #board:after {
  transform: rotateX(90deg) translateZ(-0.26em) translateY(-0.3em) translateX(0.26em);
  transform-origin: 0 0;
}
#app[data-frame="on"] #frame:after {
  transform: rotateX(90deg) rotateY(90deg) translateX(9.5em) translateY(0em);
  transform-origin: 100% 0;
}
#app[data-frame="on"] #frame:before {
  transform: rotateX(90deg) rotateY(0deg) translateX(0em) translateY(0em);
  transform-origin: 100% 0;
}

#app[data-frame="off"] #board:after {
  transform: rotateX(90deg) translateZ(0em) translateY(-0.3em);
  transform-origin: 0 0;
}
#app[data-frame="off"] #frame:after {
  transform: rotateX(90deg) rotateY(90deg) translateX(8em) translateY(-0.02em);
  transform-origin: 100% 0;
}
#app[data-frame="off"] #frame:before {
  transform: rotateX(90deg) rotateY(0deg) translateX(0em) translateY(-0.02em);
  transform-origin: 100% 0;
}

/* ---------------------------------------------------------------------------------------------------- jail */

.jail {
  position: absolute;
  left: 50%;
  width: 8em;
  height: 2.25em;
}

#app[data-frame="off"] #w-jail {
  bottom: 1.5em;
  margin-left: -4em;
}
#app[data-frame="off"] #b-jail {
  top: 1.5em;
  margin-left: -4em;
}

#app[data-frame="on"] #w-jail {
  bottom: 1em;
  margin-left: -4em;
}
#app[data-frame="on"] #b-jail {
  top: 1em;
  margin-left: -4em;
}

#w-jail {
  bottom: 1em;
  transform-style: preserve-3d;
  transform: rotateZ(0deg) translateZ(2px);
}

#b-jail {
  top: 1em;
  transform-style: preserve-3d;
  transform: rotateZ(180deg) translateZ(2px);
}

.jail .piece {
  position: relative;
  float: left;
}

#b-jail .piece {
  transform-origin: center;
  transform: rotateZ(180deg);
}
#w-jail .piece {
  transform-origin: center;
  transform: rotateZ(0deg);
}

@media screen and (min-width: 56em) {
  #app[data-frame="off"] #w-jail {
    bottom: 6.9em;
    margin-left: 1.5em;
  }
  #app[data-frame="off"] #b-jail {
    top: 6.9em;
    margin-left: -9.5em;
  }

  #app[data-frame="on"] #w-jail {
    bottom: 6.9em;
    margin-left: 2em;
  }
  #app[data-frame="on"] #b-jail {
    top: 6.9em;
    margin-left: -10em;
  }

  #b-jail {
    transform: rotateZ(90deg) translateZ(2px);
  }
  #w-jail {
    transform: rotateZ(-90deg) translateZ(2px);
  }

  #b-jail .piece {
    transform: rotateZ(-90deg);
  }
  #w-jail .piece {
    transform: rotateZ(90deg);
  }
}

/* ---------------------------------------------------------------------------------------------------- piece */

.piece {
  position: absolute;
  width: 1em;
  height: 1em;
  transform-style: preserve-3d;
  transform-origin: 4em;
  transform: translateZ(2px);
}

.piece,
.poly,
.poly .face,
.poly-group:first-child,
.bishop .poly-group:nth-child(2) {
  transition: transform 0.2s linear;
}

.piece:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.piece.grabbed {
  transition: all 0s linear;
  z-index: 9999;
}

.poly-group {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 10%;
  transform-style: preserve-3d;
}

.poly-group:first-child {
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.6);
}

.bishop .poly-group:nth-child(2) {
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.6);
}

.piece:active .poly,
.piece.grabbed .poly {
  transform: translateZ(10em);
}

.piece.grabbed .poly-group:first-child {
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 1em 0.8em rgba(0, 0, 0, 0.6);
}

.piece.grabbed.bishop .poly-group:nth-child(2) {
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 1em 0.8em rgba(0, 0, 0, 0.6);
}

.poly {
  position: absolute;
  transform-style: preserve-3d;
}

.poly .face {
  position: absolute;
  transform-origin: 0 0;
}

.valid:before,
.valid:after,
.current:before,
.current:after,
.castle:before,
.castle:after,
.valid.highlight:before,
.valid.highlight:after,
.current.highlight:before,
.current.highlight:after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
  transform: translateZ(1px);
}

.valid:before,
.current:before {
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.15em;
  margin-top: -0.15em;
  background: rgba(255, 255, 255, 0.5);
}

.highlight:before {
  z-index: 2;
  box-shadow: 0 0 1em 1em rgba(255, 255, 255, 0.4);
}

.valid.highlight:before,
.current.highlight:before,
.current:before {
  background: rgba(255, 255, 255, 1);
}

.valid.highlight:after,
.current.highlight:after {
  width: 0.6em;
  height: 0.6em;
  margin-left: -0.3em;
  margin-top: -0.3em;
  border: 0.1em solid rgba(255, 255, 255, 0.8);
}

.valid.captured:after {
  width: 0.8em;
  height: 0.8em;
  margin-left: -0.4em;
  margin-top: -0.4em;
  border: 0.1em solid rgba(255, 255, 255, 0.6);
}

.valid:before {
  background: rgba(255, 255, 255, 0.35);
}
.valid:after {
  border: none;
}

.valid.highlight:before {
  background: rgba(255, 255, 255, 1);
}
.valid.highlight:after {
  border: 0.1em solid rgba(255, 255, 255, 0.35);
}

.valid.captured:before {
  background: rgba(255, 67, 47, 0.5);
}
.valid.captured:after {
  border: 0.1em solid rgba(255, 67, 47, 0.5);
}

.valid.captured.highlight:before {
  background: rgba(255, 67, 47, 1);
}
.valid.captured.highlight:after {
  border: 0.1em solid rgba(255, 67, 47, 1);
}

.valid[class*="O-O"]:before {
  background: #cc0;
}
.valid[class*="O-O"]:after {
  border: 0.1em solid #cc0;
}

/* ---------------------------------------------------------------------------------------------------- pawn / king head */

.pawn .poly-group {
  width: 4em;
  height: 4em;
  margin: -2em 0 0 -2em;
}

.poly.small-cube {
  width: 4em;
  height: 4em;
}

.small-cube .tp {
  width: 4em;
  height: 4em;
  transform: translateZ(4em);
}

.small-cube .ft {
  width: 4em;
  height: 4em;
  transform: rotateX(90deg) translateZ(-4em);
}

.small-cube .bk {
  width: 4em;
  height: 4em;
  transform: rotateX(90deg);
}

.small-cube .rt {
  width: 4em;
  height: 4em;
  transform: rotateY(90deg) translateX(-4em);
}

.small-cube .lt {
  width: 4em;
  height: 4em;
  transform: rotateY(90deg) translateX(-4em) translateZ(4em);
}

/* ---------------------------------------------------------------------------------------------------- rook / queen and king bodies */

.rook .poly-group {
  width: 6em;
  height: 6em;
  margin: -3em 0 0 -3em;
}

.poly.big-cube {
  width: 6em;
  height: 6em;
}

.big-cube .tp {
  width: 6em;
  height: 6em;
  transform: translateZ(6em);
}

.big-cube .ft {
  width: 6em;
  height: 6em;
  transform: rotateX(90deg) translateZ(-6em);
}

.big-cube .bk {
  width: 6em;
  height: 6em;
  transform: rotateX(90deg);
}

.big-cube .rt {
  width: 6em;
  height: 6em;
  transform: rotateY(90deg) translateX(-6em);
}

.big-cube .lt {
  width: 6em;
  height: 6em;
  transform: rotateY(90deg) translateX(-6em) translateZ(6em);
}

/* ---------------------------------------------------------------------------------------------------- knight */

.knight .poly-group {
  width: 6em;
  height: 6em;
  margin: -3em 0 0 -3em;
}

.knight .poly-group.top {
  transform: translateZ(3em) rotateZ(180deg);
}

.knight .poly.a {
  margin: 0;
}
.knight .poly.b {
  margin: 3em 0 0 0;
}
.knight .poly.c {
  margin: 3em 0 0 3em;
}

.knight .tp {
  width: 3em;
  height: 3em;
  transform: translateZ(3em);
}
.knight .bm {
  width: 8em;
  height: 8em;
  transform: translateZ(0em);
}
.knight .ft {
  width: 3em;
  height: 3em;
  transform: rotateX(90deg) translateZ(-3em);
}
.knight .bk {
  width: 3em;
  height: 3em;
  transform: rotateX(90deg);
}
.knight .rt {
  width: 3em;
  height: 3em;
  transform: rotateY(90deg) translateX(-3em);
}
.knight .lt {
  width: 3em;
  height: 3em;
  transform: rotateY(90deg) translateX(-3em) translateZ(3em);
}

.knight .poly.a .rt {
  height: 6em;
}
.knight .poly.b .ft {
  width: 6em;
}
.knight .poly.b .tp {
  width: 6em;
}

.knight .bottom .poly.b .tp {
  box-shadow: inset -3.6em 0.7em 2em rgba(0, 0, 0, 0.7);
}

/* ---------------------------------------------------------------------------------------------------- bishop */

.bishop .rectangle {
  width: 2em;
  height: 6.6em;
  margin: -3.3em 0 0 -1em;
}

.bishop .rectangle.a {
  transform: rotateZ(45deg);
}
.bishop .rectangle.b {
  transform: rotateZ(-45deg);
}

.bishop .rectangle.a .tp {
  position: relative;
  width: 2em;
  height: 6.6em;
  transform: translateZ(6em);
}

.bishop .rectangle.a .rt {
  width: 6em;
  height: 6.6em;
  transform: rotateY(90deg) translateX(-6em) translateZ(0em);
}

.bishop .rectangle.a .lt {
  width: 6em;
  height: 6.6em;
  transform: rotateY(90deg) translateX(-6em) translateZ(2em);
}

.bishop .rectangle.a .tp:before,
.bishop .rectangle.b .tp:before {
  content: "";
  position: absolute;
  top: -1em;
  width: 0;
  height: 0;
  border-left: 1.1em solid transparent;
  border-right: 1.1em solid transparent;
  border-bottom: 1.1em solid #fff;
}

.bishop .rectangle.b.prim .tp:before {
  border: none;
}

.bishop .rectangle.a .tp:after,
.bishop .rectangle.b.prim .tp:after {
  content: "";
  position: absolute;
  bottom: -1em;
  width: 0;
  height: 0;
  border-left: 1.1em solid transparent;
  border-right: 1.1em solid transparent;
  border-top: 1.1em solid #fff;
}

.bishop .rectangle.b .tp {
  position: relative;
  width: 2em;
  height: 2.3em;
  transform: translateZ(6em);
}

.bishop .rectangle.b .rt {
  width: 6em;
  height: 2.3em;
  transform: rotateY(90deg) translateX(-6em);
}

.bishop .rectangle.b .lt {
  width: 6em;
  height: 2.3em;
  transform: rotateY(90deg) translateX(-6em) translateZ(2em);
}

.bishop .rectangle.b.prim .tp {
  transform: translateZ(6em) translateY(4.3em);
}
.bishop .rectangle.b.prim .rt {
  transform: rotateY(90deg) translateX(-6em) translateY(4.3em);
}
.bishop .rectangle.b.prim .lt {
  transform: rotateY(90deg) translateX(-6em) translateZ(2em) translateY(4.3em);
}

.bishop .corners.a {
  transform: rotateZ(0deg);
}
.bishop .corners.b {
  transform: rotateZ(180deg);
}

.bishop .big-cube {
  margin: -3em 0 0 -3em;
}
.bishop .big-cube .ft {
  width: 1.5em;
}
.bishop .big-cube .lt {
  height: 1.5em;
}
.bishop .big-cube .bk {
  width: 1.5em;
}
.bishop .big-cube .rt {
  height: 1.5em;
}

.bishop .tp {
  box-shadow: 0 0 0 #fff;
}

/* ---------------------------------------------------------------------------------------------------- queen */

.queen .poly-group:first-child {
  width: 6em;
  height: 6em;
  margin: -3em 0 0 -3em;
}

.queen .top {
  transform: translateZ(8.5em);
}

.queen .bottom .tp:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 1em 2em rgba(0, 0, 0, 0.6);
}

.poly div.sphere {
  position: absolute;
  left: 50%;
  width: 5em;
  height: 5em;
  margin: -2.5em 0 0 -2.5em;
  border-radius: 50%;
  transform-origin: 2.5em 2.5em;
}

/* ---------------------------------------------------------------------------------------------------- king */

.king .poly-group:first-child {
  width: 6em;
  height: 6em;
  margin: -3em 0 0 -3em;
}

.king .top {
  transform: rotateZ(-45deg) translateZ(6em);
}

.king .top .small-cube {
  margin: -2em 0 0 -2em;
}

/* ---------------------------------------------------------------------------------------------------- pieces initial positions */

#p {
  transform: translateX(-1em) translateY(7em);
}
#r {
  transform: translateX(-1em) translateY(6em);
}
#n {
  transform: translateX(-1em) translateY(5em);
}
#b {
  transform: translateX(-1em) translateY(4em);
}
#q {
  transform: translateX(-1em) translateY(3em);
}
#k {
  transform: translateX(-1em) translateY(2em);
}

/* ------------------------------------------------------- UI elements */

h1 {
  margin-bottom: 0.5em;
  font-size: 1.75em;
  font-weight: 600;
  text-transform: uppercase;
}

h2 {
  margin-top: 0.75em;
  margin-bottom: 0.5em;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
}

#menu,
#top-bar {
  z-index: 100;
  font-size: 16px;
  text-align: center;
}

#menu {
  opacity: 0;
  position: absolute;
  left: 50%;
  width: 24em;
  height: 9em;
  margin: 0 0 0 -12em;
  transition-delay: 0;
  transition: all 1.5s ease-in-out;
  transform: translateY(-24em);
  z-index: 100;
  transform-style: preserve-3d;
}

#app[data-state="menu"] #menu {
  opacity: 1;
  transition-delay: 1.5s;
  transform: translateY(0em);
  z-index: 100;
}

#logoimg {
  margin: 3em 0 1em 0;
}

#logo {
  z-index: 100;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20em;
  height: 4em;
  margin-left: -10em;
  margin-top: -4em;
  font-size: 16px;
  transform: translateZ(9999px);
  perspective: 800;
  transition: top 1.5s ease-in-out;
}

#app[data-state="game"] #logo {
  transform: translateZ(-9999px) translateY(-40em);
}

.symbol {
  position: relative;
  float: left;
  width: 4em;
  height: 4em;
  transition: transform 2s linear;
  transform-style: preserve-3d;
  transform-origin: 2em 2em;
  transition: all 1.5s ease-in-out;
  animation: fall 2s 1 ease-in-out;
}

.loading .symbol {
  top: 0;
  animation: rotateX 2s 1 ease-in-out;
}

.symbol:nth-child(1) {
  z-index: 1;
  animation-delay: 400ms;
}
.symbol:nth-child(2) {
  z-index: 2;
  animation-delay: 500ms;
}
.symbol:nth-child(3) {
  z-index: 3;
  animation-delay: 600ms;
}
.symbol:nth-child(4) {
  z-index: 2;
  animation-delay: 700ms;
}
.symbol:nth-child(5) {
  z-index: 1;
  animation-delay: 800ms;
}

@keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes fall {
  0% {
    transform: rotateX(0deg) translateY(0em);
    opacity: 1;
  }
  100% {
    transform: rotateX(120deg) translateY(60em);
    opacity: 0;
  }
}

.symbol > div {
  position: absolute;
  width: 4em;
  height: 4em;
  transform-style: preserve-3d;
  background-color: white;
}

.symbol div:nth-child(1) {
  transform: translateZ(2em);
}
.symbol div:nth-child(2) {
  transform: rotateY(90deg) translateZ(2em);
  background-color: #a0a0a0;
}
.symbol div:nth-child(3) {
  transform: rotateY(180deg) translateZ(2em);
  background-color: #d0d0d0;
}
.symbol div:nth-child(4) {
  transform: rotateY(-90deg) translateZ(2em);
  background-color: #a0a0a0;
}
.symbol div:nth-child(5) {
  transform: rotateX(-90deg) translateZ(2em) rotate(180deg);
  background-color: #e0e0e0;
}
.symbol div:nth-child(6) {
  transform: rotateX(90deg) translateZ(2em);
  background-color: #c0c0c0;
}

.symbol > div:first-child {
  background-color: #101010;
  border: 0.25em solid white;
}

.symbol > div:first-child:before,
.symbol > div:first-child:after {
  content: "";
  position: absolute;
}

.symbol:nth-child(1) > div:first-child:before {
  top: 0.55em;
  left: 0.55em;
  width: 2.45em;
  height: 2.45em;
  transform: rotateZ(45deg);
  background-color: white;
}

.symbol:nth-child(2) > div:first-child:before {
  top: 0.05em;
  left: 0.05em;
  width: 2.5em;
  height: 2.5em;
  background-color: #101010;
  border-radius: 50%;
  border: 0.45em solid white;
}

.symbol:nth-child(3) > div:first-child {
  background-color: white;
  overflow: hidden;
}

.symbol:nth-child(3) > div:first-child:before,
.symbol:nth-child(3) > div:first-child:after {
  left: 1em;
  width: 1em;
  height: 6em;
  background-color: #101010;
}

.symbol:nth-child(3) > div:first-child:before {
  top: -1em;
  transform: rotateZ(45deg);
}

.symbol:nth-child(3) > div:first-child:after {
  top: -1.5em;
  transform: rotateZ(-45deg);
}

.symbol:nth-child(4) > div:first-child:before {
  right: 0;
  bottom: 0;
  width: 1.75em;
  height: 1.75em;
  background-color: white;
}

#panes {
  width: 72em;
  transition: transform 0.75s ease-in-out;
}

.pane {
  opacity: 0;
  width: 24em;
  height: 8em;
  position: absolute;
  background-color: transparent;
  transition: opacity 0.45s ease-in-out !important;
}

.pane:nth-child(1) {
  transform: translateX(-80em);
}
.pane:nth-child(2) {
  transform: translateX(0em);
}
.pane:nth-child(3) {
  transform: translateX(80em);
}

#app[data-menu="settings"] #panes {
  transform: translateX(80em);
}
#app[data-menu="main"] #panes {
  transform: translateX(0em);
}
#app[data-menu="about"] #panes {
  transform: translateX(-80em);
}

#app[data-menu="main"] #main,
#app[data-menu="settings"] #settings,
#app[data-menu="about"] #about {
  opacity: 1;
}

#top-bar {
  opacity: 0;
  position: relative;
  width: 100%;
  max-width: 46em;
  height: 2em;
  margin: 0 auto;
  transform: translateY(-3em);
  transition: all 1.5s ease-in-out;
  transition-delay: 0s;
}

#app[data-state="game"] #top-bar {
  opacity: 1;
  transform: translateY(1em);
  transition-delay: 1s;
}

.btn {
  display: inline-block;
  height: 2em;
  border: none;
  color: white;
  font-size: 1em;
  line-height: 2em;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #303030;
  transform: translateZ(1em);
  transition: background-color 0.1s ease-out !important;
}

.btn.white {
  color: black;
  background-color: white;
}

.btn:hover,
.btn:active {
  background-color: #5a5a5a;
  cursor: pointer;
}

.btn.white:hover,
.btn.white:active {
  background-color: #cacaca;
}

#menu .btn {
  width: 7.25em;
  margin: 1em 0.15em;
}

#top-bar .btn {
  width: 4em;
  height: 3em;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.01);
}

#undo {
  float: left;
}
#open-menu {
  float: right;
}
#undo:before {
  background-position: 0 0;
}
#open-menu:before {
  background-position: -20px 0;
}

#undo[data-state="inactive"] {
  display: none;
}

#log {
  position: absolute;
  left: 50%;
  width: 24em;
  height: 3em;
  margin-left: -12em;
  color: #808080;
  text-align: center;
  line-height: 3em;
  pointer-events: none;
}

.btn.icon {
  background-color: rgba(255, 255, 255, 0);
}

.btn.icon:before {
  content: "";
  width: 20px;
  height: 16px;
  display: inline-block;
  background-image: url("../img/icons.png");
  background-repeat: no-repeat;
  background-size: 40px 16px;
}

#settings .btn {
  width: 8em;
}

#menu .switch {
  line-height: 2em;
  margin-right: 1em;
  transition: none !important;
}

#menu .switch:hover {
  background-color: #cacaca;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label:after {
  content: "off";
  float: right;
  display: block;
  width: 3em;
  height: 2em;
  background-color: #999;
  line-height: 2em;
  text-align: center;
  color: #fff;
  transition: none !important;
}

input[type="checkbox"]:checked + label:after {
  content: "on";
  background-color: #333;
  color: #fff;
}

input[type="checkbox"]:hover + label:after {
  color: #fff;
  background-color: #666;
}

#themes-box {
  width: 19em;
  height: 3.5em;
  margin: 0 2.6em;
}

.set-theme {
  float: left;
  width: 3.375em;
  height: 3.375em;
  position: relative;
  margin: 0 0.65em;
}

.set-theme:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
}
.set-theme:hover .cube,
.set-theme:active .cube {
  transform: rotateX(146deg) rotateY(45deg) translateY(0.1em) translateX(3em);
}
#app[data-theme="classic"] .set-theme[data-theme="classic"],
#app[data-theme="marble"] .set-theme[data-theme="marble"],
#app[data-theme="flat"] .set-theme[data-theme="flat"],
#app[data-theme="wireframe"] .set-theme[data-theme="wireframe"] {
  background: rgba(255, 255, 255, 1);
}

.cube,
.cube:before,
.cube:after {
  content: "";
  width: 2em;
  height: 2em;
  background-color: #a0a0a0;
  background-size: 235%;
  transition: transform 0.1s ease-in-out !important;
  box-sizing: border-box;
}

.cube {
  position: relative;
  margin-left: -2.15em;
  box-shadow: inset 0 0 0 3em rgba(0, 0, 0, 0.2);
  transform: rotateX(156deg) rotateY(45deg) translateY(-0.15em) translateX(3em);
  transform-style: preserve-3d;
}

.cube:before {
  position: absolute;
  left: 0;
  top: 2em;
  transform: rotateX(90deg);
  transform-origin: 0 0;
}

.cube:after {
  position: absolute;
  left: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 3em rgba(0, 0, 0, 0.5);
  transform: rotateY(90deg);
  transform-origin: 100% 0;
}

#overlay {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity 1.5s ease-in-out !important;
  transform: translateZ(9999px);
}

.loading #overlay {
  opacity: 1;
  background-image: url(../img/ajax-loader.gif);
  background-position: 50% 60%;
  background-repeat: no-repeat;
}

#app[data-menu="about"] #overlay {
  z-index: 99;
  opacity: 0.75;
}

#app[data-state="game"] #overlay {
  width: 0%;
  height: 0%;
}

#about p {
  line-height: 1.5em;
}

.square,
.sphere,
#board:after,
#frame:after,
#frame:before {
  background-size: 100% 100%;
}

/* ---------------------------------------------------------------------------------------------------- classic */

#app[data-theme="classic"] {
  background-color: #e5e3df;
  color: #303132;
}
#app[data-theme="classic"] a {
  color: #404040;
}
#app[data-theme="classic"] #overlay {
  background-color: #e5e3df;
}
#app[data-theme="classic"] #scene {
  background: radial-gradient(center, ellipse cover, #fff 25%, #e5e3df 72%);
}
#app[data-theme="classic"][data-frame="off"] #frame,
#app[data-theme="classic"][data-frame="off"] #board:after,
#app[data-theme="classic"][data-frame="off"] #frame:after,
#app[data-theme="classic"][data-frame="off"] #frame:before {
  background-color: #a28157;
}
#app[data-theme="classic"][data-frame="on"] #frame,
#app[data-theme="classic"][data-frame="on"] #board:after,
#app[data-theme="classic"][data-frame="on"] #frame:after,
#app[data-theme="classic"][data-frame="on"] #frame:before {
  background-color: #303132;
}
#app[data-theme="classic"] .square {
  background-color: #212121;
}
#app[data-theme="classic"] .black .poly > div,
#app[data-theme="classic"] .black .poly .sphere {
  background-color: #303030;
}
#app[data-theme="classic"] .white .poly > div,
#app[data-theme="classic"] .white .poly .sphere {
  background-color: #c19666;
}
#app[data-theme="classic"] .white.bishop .rectangle.a .tp:before {
  border-bottom: 1.1em solid #f6c182;
}
#app[data-theme="classic"] .white.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid #f7c384;
}
#app[data-theme="classic"] .white.bishop .rectangle.a .tp:after {
  border-top: 1.1em solid #fdca8a;
}
#app[data-theme="classic"] .white.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid #f9c485;
}
#app[data-theme="classic"] .black.bishop .rectangle.a .tp:before {
  border-bottom: 1.1em solid #2f2f2f;
}
#app[data-theme="classic"] .black.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid #303030;
}
#app[data-theme="classic"] .black.bishop .rectangle.a .tp:after {
  border-top: 1.1em solid #313131;
}
#app[data-theme="classic"] .black.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid #2f2f2f;
}

/* ---------------------------------------------------------------------------------------------------- classic textures */

#app[data-theme="classic"][data-frame="off"] #board:after,
#app[data-theme="classic"][data-frame="off"] #frame:after,
#app[data-theme="classic"][data-frame="off"] #frame:before {
  background-image: url(../img/classic-frame-border-off.png);
}
#app[data-theme="classic"][data-frame="on"] #board:after,
#app[data-theme="classic"][data-frame="on"] #frame:after,
#app[data-theme="classic"][data-frame="on"] #frame:before {
  background-image: url(../img/classic-frame-border.png);
}
#app[data-theme="classic"] .square {
  background-image: url(../img/classic-square-black.png);
}
#app[data-theme="classic"] .white .poly > div,
.set-theme[data-theme="classic"] .cube,
.set-theme[data-theme="classic"] .cube:before,
.set-theme[data-theme="classic"] .cube:after {
  background-image: url(../img/classic-piece-white.png);
}
#app[data-theme="classic"] .black .poly > div {
  background-image: url(../img/classic-piece-black.png);
}
#app[data-theme="classic"] .white .poly .sphere {
  background-image: url(../img/classic-piece-white.png);
}
#app[data-theme="classic"] .black .poly .sphere {
  background-image: url(../img/classic-piece-black.png);
}

/* ---------------------------------------------------------------------------------------------------- marble */

#app[data-theme="marble"][data-frame="off"] #frame,
#app[data-theme="marble"][data-frame="off"] #board:after,
#app[data-theme="marble"][data-frame="off"] #frame:after,
#app[data-theme="marble"][data-frame="off"] #frame:before {
  background-color: #b0b0b0;
}
#app[data-theme="marble"][data-frame="on"] #frame,
#app[data-theme="marble"][data-frame="on"] #board:after,
#app[data-theme="marble"][data-frame="on"] #frame:after,
#app[data-theme="marble"][data-frame="on"] #frame:before {
  background-color: #202020;
}
#app[data-theme="marble"] .square {
  background-color: #404040;
}
#app[data-theme="marble"] .black .poly > div,
#app[data-theme="marble"] .black .poly .sphere {
  background-color: #404040;
}
#app[data-theme="marble"] .white .poly > div,
#app[data-theme="marble"] .white .poly .sphere {
  background-color: #fff;
}
#app[data-theme="marble"] .white.bishop .rectangle.a .tp:before {
  border-bottom: 1.1em solid #efe8e4;
}
#app[data-theme="marble"] .white.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid #efebe6;
}
#app[data-theme="marble"] .white.bishop .rectangle.a .tp:after {
  border-top: 1.1em solid #dfdbd5;
}
#app[data-theme="marble"] .white.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid #eee9e5;
}
#app[data-theme="marble"] .black.bishop .rectangle.a .tp:before {
  border-bottom: 1.1em solid #4a4845;
}
#app[data-theme="marble"] .black.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid #4a4744;
}
#app[data-theme="marble"] .black.bishop .rectangle.a .tp:after {
  border-top: 1.1em solid #413f3b;
}
#app[data-theme="marble"] .black.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid #4a4744;
}

/* ---------------------------------------------------------------------------------------------------- marble textures */

#app[data-theme="marble"] #scene {
  background: url(../img/back.jpg) no-repeat center center black;
  background-size: cover;
}
#app[data-theme="marble"][data-frame="off"] #board:after,
#app[data-theme="marble"][data-frame="off"] #frame:after,
#app[data-theme="marble"][data-frame="off"] #frame:before {
  background-image: url(../img/marble-frame-border-off.png);
}
#app[data-theme="marble"][data-frame="on"] #board:after,
#app[data-theme="marble"][data-frame="on"] #frame:after,
#app[data-theme="marble"][data-frame="on"] #frame:before {
  background-image: url(../img/marble-frame-border.png);
}
#app[data-theme="marble"] .square {
  background-image: url(../img/marble-square-black.png);
}
#app[data-theme="marble"] .white .poly > div,
.set-theme[data-theme="marble"] .cube,
.set-theme[data-theme="marble"] .cube:before,
.set-theme[data-theme="marble"] .cube:after {
  background-image: url(../img/marble-piece-white.png);
}
#app[data-theme="marble"] .black .poly > div {
  background-image: url(../img/marble-piece-black.png);
}
#app[data-theme="marble"] .white .poly .sphere {
  background-image: url(../img/marble-piece-white.png);
}
#app[data-theme="marble"] .black .poly .sphere {
  background-image: url(../img/marble-piece-black.png);
}

/* ---------------------------------------------------------------------------------------------------- flat */

#app[data-theme="flat"] {
  background-color: #e5e3df;
  color: #303132;
}
#app[data-theme="flat"] a {
  color: #404040;
}
#app[data-theme="flat"] #overlay {
  background-color: #e5e3df;
}
#app[data-theme="flat"] #scene {
  background: radial-gradient(center, ellipse cover, #fff 25%, #e5e3df 72%);
}
#app[data-theme="flat"] #frame,
#app[data-theme="flat"] #board:after,
#app[data-theme="flat"] #frame:after,
#app[data-theme="flat"] #frame:before {
  background-color: #b7b7b4;
}
#app[data-theme="flat"] .square {
  background-color: #c6c5c3;
}
#app[data-theme="flat"] .white .poly > div,
.set-theme[data-theme="flat"] .cube,
.set-theme[data-theme="flat"] .cube:before,
.set-theme[data-theme="flat"] .cube:after {
  background-color: #00a2ff;
}
#app[data-theme="flat"] .black .poly > div {
  background-color: #ff432f;
}
#app[data-theme="flat"] .white .poly .sphere {
  background: radial-gradient(center, ellipse cover, rgba(0, 162, 255, 1) 30%, rgba(0, 89, 141, 1) 100%) 0em -1em;
}
#app[data-theme="flat"] .black .poly .sphere {
  background: radial-gradient(center, ellipse cover, rgba(255, 67, 47, 1) 30%, rgba(141, 36, 25, 1) 100%) 0em -1em;
}
#app[data-theme="flat"] .white.bishop .rectangle.a .tp:before,
#app[data-theme="flat"] .white.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid #00a2ff;
}
#app[data-theme="flat"] .white.bishop .rectangle.a .tp:after,
#app[data-theme="flat"] .white.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid #00a2ff;
}
#app[data-theme="flat"] .black.bishop .rectangle.a .tp:before,
#app[data-theme="flat"] .black.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid #ff432f;
}
#app[data-theme="flat"] .black.bishop .rectangle.a .tp:after,
#app[data-theme="flat"] .black.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid #ff432f;
}

/* ---------------------------------------------------------------------------------------------------- wireframe */

#app[data-theme="wireframe"] #scene {
  background: radial-gradient(center, ellipse cover, #1d414d 0%, #000000 70%);
}
#app[data-theme="wireframe"] #frame {
  background-color: #001b20;
}
#app[data-theme="wireframe"] #board:after,
#app[data-theme="wireframe"] #frame:after,
#app[data-theme="wireframe"] #frame:before {
  background-color: #011e24;
  border: 1px solid #007385;
  opacity: 0.4;
}
#app[data-theme="wireframe"] .square {
  background-color: rgba(17, 41, 48, 0);
}
#app[data-theme="wireframe"] .white .poly > div {
  background-color: #022a36;
  border: 1px solid #35c2d3;
  box-shadow: inset 0 0 4em -1em #35c2d3;
  opacity: 0.5;
}
.set-theme[data-theme="wireframe"] .cube,
.set-theme[data-theme="wireframe"] .cube:before,
.set-theme[data-theme="wireframe"] .cube:after {
  background-color: rgba(2, 42, 54, 0.8);
  box-shadow: inset 0 0 0.5em 0.2em rgba(53, 194, 211, 0.8);
}

#app[data-theme="wireframe"] .black .poly > div {
  background-color: #022a36;
  border: 1px solid #ffdd1d;
  box-shadow: inset 0 0 4em -1em #ffdd1d;
  opacity: 0.5;
}
#app[data-theme="wireframe"] .white .poly .lt,
#app[data-theme="wireframe"] .white .poly .rt {
  border-right: 3px solid #35c2d3;
}
#app[data-theme="wireframe"] .white .poly .bk,
#app[data-theme="wireframe"] .white .poly .ft {
  border-top: 3px solid #35c2d3;
}
#app[data-theme="wireframe"] .black .poly .lt,
#app[data-theme="wireframe"] .black .poly .rt {
  border-right: 3px solid #ffdd1d;
}
#app[data-theme="wireframe"] .black .poly .bk,
#app[data-theme="wireframe"] .black .poly .ft {
  border-top: 3px solid #ffdd1d;
}
#app[data-theme="wireframe"] .black .poly .sphere {
  background-color: #1d414b;
}
#app[data-theme="wireframe"] .white .poly .sphere {
  background-color: #1d414b;
}

#app[data-theme="wireframe"] .white.bishop .rectangle.a .tp:before,
#app[data-theme="wireframe"] .white.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid rgba(53, 194, 211, 0.4);
  top: -1em;
  left: -0.18em;
}
#app[data-theme="wireframe"] .white.bishop .rectangle.a .tp:after,
#app[data-theme="wireframe"] .white.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid rgba(53, 194, 211, 0.4);
  bottom: -1em;
  right: -0.18em;
}
#app[data-theme="wireframe"] .black.bishop .rectangle.a .tp:before,
#app[data-theme="wireframe"] .black.bishop .rectangle.b .tp:before {
  border-bottom: 1.1em solid rgba(255, 221, 29, 0.4);
  top: -1em;
  left: -0.18em;
}
#app[data-theme="wireframe"] .black.bishop .rectangle.a .tp:after,
#app[data-theme="wireframe"] .black.bishop .rectangle.b.prim .tp:after {
  border-top: 1.1em solid rgba(255, 221, 29, 0.4);
  bottom: -1em;
  right: -0.18em;
}

/* ------------------------------------------------------- Responsive board */

@media screen and (min-width: 48em), screen and (min-height: 48em) {
  #app[data-frame="off"] {
    font-size: 80px;
  }
  #app[data-frame="on"] {
    font-size: 70px;
  }
}
@media screen and (max-width: 48em), screen and (max-height: 48em) {
  #app[data-frame="off"] {
    font-size: 70px;
  }
  #app[data-frame="on"] {
    font-size: 60px;
  }
  #top-bar {
    margin-top: -0.75em;
  }
}
@media screen and (max-width: 42em), screen and (max-height: 42em) {
  #app[data-frame="off"] {
    font-size: 60px;
  }
  #app[data-frame="on"] {
    font-size: 50px;
  }
  #container {
    top: 55%;
  }
}
@media screen and (max-width: 34em), screen and (max-height: 34em) {
  #app[data-frame="off"] {
    font-size: 50px;
  }
  #app[data-frame="on"] {
    font-size: 40px;
  }
}
@media screen and (max-width: 26em), screen and (max-height: 26em) {
  #app[data-frame="off"] {
    font-size: 40px;
  }
  #app[data-frame="on"] {
    font-size: 30px;
  }
}
@media screen and (max-width: 20em), screen and (max-height: 20em) {
  #app[data-frame="off"] {
    font-size: 35px;
  }
}
@media screen and (max-height: 36em) {
  #logoimg {
    margin: 1em 0 1em 0;
  }
}
@media screen and (max-height: 32em) {
  #app[data-state="menu"] #overlay {
    z-index: 99;
    opacity: 0.85;
  }
  #about h1 {
    font-size: 1em;
  }
  #about h2 {
    font-size: 0.85em;
  }
  #about p {
    font-size: 0.75em;
  }
}
@media screen and (max-width: 24em), screen and (max-height: 24em) {
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1em;
  }
  #logoimg {
    margin: 2em 0 1em 0;
  }
  #logo {
    font-size: 12px;
  }
  .loading #overlay {
    background-position: 50% 80%;
  }
}

/* Make the chessboard appear in 3D */
#container > #scene > #table > #board *,
#container > #scene > #table {
  transform-style: preserve-3d !important;
}

/* Center the chessboard */
#table {
  width: 100%;
  height: 100%;
}

/* Make the logo appear 3D in firefox */
#logo {
  transform-style: preserve-3d !important;
}

/* Switch from table to css grid for proper rendering in firefox */
#board {
  display: grid;
  grid-template-columns: repeat(10, 1em);
  grid-template-rows: repeat(10, 1em);
  transform-style: preserve-3d;
}

.board-label {
  position: relative;
  vertical-align: center;
  font-size: 75%;
}

.board-label span {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 0.26em;
  color: rgba(255, 255, 255, 0.75);
  transform: translateZ(1px);
}

.col-label span {
  line-height: 3.9em;
  transform: translateZ(1px);
}

.row-label {
  vertical-align: top;
  line-height: 0.9em;
}

.row-label span {
  line-height: 4.5em;
  padding-right: 0.3em;
}

/* Top row labels and right column labels should be upside down */
#board > .board-label:nth-child(n + 2):nth-child(-n + 9) span,
#board > .board-label:nth-child(10n) span {
  transform: rotateZ(180deg) translateZ(1px);
  transform-origin: center;
}

/* Hide labels when frame is off */
#app[data-frame="off"] .board-label {
  display: none;
}

/* Adjust grid template when frame is off */
#app[data-frame="off"] #board {
  grid-template-columns: repeat(8, 1em);
  grid-template-rows: repeat(8, 1em);
}

.square {
  position: relative;
  width: 1em;
  height: 1em;
}

#container * {
  transform-style: preserve-3d !important;
  will-change: transform;
}

/* Apply background textures to labels based on their position */
/* Made small adjustments so that neighboring pieces don't show thin line when zooming in/oout */
/* Top-left corner */
.board-label:nth-child(1) {
  background-position: left top;
  background-size: 337.5% auto;
  height: 1em;
  width: 0.9975em;
  transform: translate(0.345em, 0.35em);
}

/* Top row */
.board-label:nth-child(n + 2):nth-child(-n + 9) {
  background-position: center top;
  background-size: 250% auto;
  height: 1em;
  width: 1.35em;
  transform: translate(0em, 0.35em);
}

/* Top-right corner */
.board-label:nth-child(10) {
  background-position: right top;
  background-size: 337.5% auto;
  height: 1em;
  width: 1em;
  transform: translate(0em, 0.35em);
}

/* Left column */
.board-label:nth-child(10n + 1):not(:nth-child(1)):not(:nth-child(91)) {
  background-position: left center;
  background-size: auto 250%;
  width: 1em;
  height: 1.345em;
  transform: translate(0.345em, 0em);
}

/* Right column */
.board-label:nth-child(10n):not(:nth-child(10)):not(:nth-child(100)) {
  background-position: right center;
  background-size: auto 250%;
  width: 1.0075em;
  height: 1.345em;
  transform: translate(-0.0075em, 0em);
}

/* Bottom-left corner */
.board-label:nth-child(91) {
  background-position: left bottom;
  background-size: 334.5% auto;
  height: 1.005em;
  width: 1.005em;
  transform: translate(0.345em, 0em);
}

/* Bottom row */
.board-label:nth-child(n + 92):nth-child(-n + 99) {
  background-position: center bottom;
  background-size: 250% auto;
  height: 1.0125em;
  width: 1.345em;
  transform: translate(0em, -0.0075em);
}

/* Bottom-right corner */
.board-label:nth-child(100) {
  background-position: right bottom;
  background-size: 336% auto;
  height: 1.005em;
  width: 1em;
  transform: translate(0em, 0em);
}

/* Apply theme-specific background images to labels */
#app[data-theme="classic"] .board-label {
  background-image: url(../img/classic-frame.png);
}

#app[data-theme="marble"] .board-label {
  background-image: url(../img/marble-frame.png);
}

#app[data-theme="flat"] .board-label {
  background-color: #e0dfdd;
}

#app[data-theme="flat"] .board-label span {
  color: #515150;
}

#app[data-theme="wireframe"] .board-label {
  background-color: rgba(17, 41, 48, 0.6);
}

/* Square-specific coloring for each theme */
#app[data-theme="classic"] #a2,
#app[data-theme="classic"] #a4,
#app[data-theme="classic"] #a6,
#app[data-theme="classic"] #a8,
#app[data-theme="classic"] #b1,
#app[data-theme="classic"] #b3,
#app[data-theme="classic"] #b5,
#app[data-theme="classic"] #b7,
#app[data-theme="classic"] #c2,
#app[data-theme="classic"] #c4,
#app[data-theme="classic"] #c6,
#app[data-theme="classic"] #c8,
#app[data-theme="classic"] #d1,
#app[data-theme="classic"] #d3,
#app[data-theme="classic"] #d5,
#app[data-theme="classic"] #d7,
#app[data-theme="classic"] #e2,
#app[data-theme="classic"] #e4,
#app[data-theme="classic"] #e6,
#app[data-theme="classic"] #e8,
#app[data-theme="classic"] #f1,
#app[data-theme="classic"] #f3,
#app[data-theme="classic"] #f5,
#app[data-theme="classic"] #f7,
#app[data-theme="classic"] #g2,
#app[data-theme="classic"] #g4,
#app[data-theme="classic"] #g6,
#app[data-theme="classic"] #g8,
#app[data-theme="classic"] #h1,
#app[data-theme="classic"] #h3,
#app[data-theme="classic"] #h5,
#app[data-theme="classic"] #h7 {
  background-color: #cf9269;
  background-image: url(../img/classic-square-white.png);
}

#app[data-theme="marble"] #a2,
#app[data-theme="marble"] #a4,
#app[data-theme="marble"] #a6,
#app[data-theme="marble"] #a8,
#app[data-theme="marble"] #b1,
#app[data-theme="marble"] #b3,
#app[data-theme="marble"] #b5,
#app[data-theme="marble"] #b7,
#app[data-theme="marble"] #c2,
#app[data-theme="marble"] #c4,
#app[data-theme="marble"] #c6,
#app[data-theme="marble"] #c8,
#app[data-theme="marble"] #d1,
#app[data-theme="marble"] #d3,
#app[data-theme="marble"] #d5,
#app[data-theme="marble"] #d7,
#app[data-theme="marble"] #e2,
#app[data-theme="marble"] #e4,
#app[data-theme="marble"] #e6,
#app[data-theme="marble"] #e8,
#app[data-theme="marble"] #f1,
#app[data-theme="marble"] #f3,
#app[data-theme="marble"] #f5,
#app[data-theme="marble"] #f7,
#app[data-theme="marble"] #g2,
#app[data-theme="marble"] #g4,
#app[data-theme="marble"] #g6,
#app[data-theme="marble"] #g8,
#app[data-theme="marble"] #h1,
#app[data-theme="marble"] #h3,
#app[data-theme="marble"] #h5,
#app[data-theme="marble"] #h7 {
  background-color: #fff;
  background-image: url(../img/marble-square-white.png);
}

#app[data-theme="flat"] #a2,
#app[data-theme="flat"] #a4,
#app[data-theme="flat"] #a6,
#app[data-theme="flat"] #a8,
#app[data-theme="flat"] #b1,
#app[data-theme="flat"] #b3,
#app[data-theme="flat"] #b5,
#app[data-theme="flat"] #b7,
#app[data-theme="flat"] #c2,
#app[data-theme="flat"] #c4,
#app[data-theme="flat"] #c6,
#app[data-theme="flat"] #c8,
#app[data-theme="flat"] #d1,
#app[data-theme="flat"] #d3,
#app[data-theme="flat"] #d5,
#app[data-theme="flat"] #d7,
#app[data-theme="flat"] #e2,
#app[data-theme="flat"] #e4,
#app[data-theme="flat"] #e6,
#app[data-theme="flat"] #e8,
#app[data-theme="flat"] #f1,
#app[data-theme="flat"] #f3,
#app[data-theme="flat"] #f5,
#app[data-theme="flat"] #f7,
#app[data-theme="flat"] #g2,
#app[data-theme="flat"] #g4,
#app[data-theme="flat"] #g6,
#app[data-theme="flat"] #g8,
#app[data-theme="flat"] #h1,
#app[data-theme="flat"] #h3,
#app[data-theme="flat"] #h5,
#app[data-theme="flat"] #h7 {
  background-color: #e0dfdd;
}

#app[data-theme="wireframe"] #a2,
#app[data-theme="wireframe"] #a4,
#app[data-theme="wireframe"] #a6,
#app[data-theme="wireframe"] #a8,
#app[data-theme="wireframe"] #b1,
#app[data-theme="wireframe"] #b3,
#app[data-theme="wireframe"] #b5,
#app[data-theme="wireframe"] #b7,
#app[data-theme="wireframe"] #c2,
#app[data-theme="wireframe"] #c4,
#app[data-theme="wireframe"] #c6,
#app[data-theme="wireframe"] #c8,
#app[data-theme="wireframe"] #d1,
#app[data-theme="wireframe"] #d3,
#app[data-theme="wireframe"] #d5,
#app[data-theme="wireframe"] #d7,
#app[data-theme="wireframe"] #e2,
#app[data-theme="wireframe"] #e4,
#app[data-theme="wireframe"] #e6,
#app[data-theme="wireframe"] #e8,
#app[data-theme="wireframe"] #f1,
#app[data-theme="wireframe"] #f3,
#app[data-theme="wireframe"] #f5,
#app[data-theme="wireframe"] #f7,
#app[data-theme="wireframe"] #g2,
#app[data-theme="wireframe"] #g4,
#app[data-theme="wireframe"] #g6,
#app[data-theme="wireframe"] #g8,
#app[data-theme="wireframe"] #h1,
#app[data-theme="wireframe"] #h3,
#app[data-theme="wireframe"] #h5,
#app[data-theme="wireframe"] #h7 {
  background-color: rgba(17, 41, 48, 0.6);
}

#app[data-frame="on"] #board {
  transform: translateX(-0.25em) translateY(-0.26em) translateZ(0.32em);
}

#settings {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#settings .switch {
  display: flex;
  padding-left: 1em;
  width: auto;
  margin: 0.5em auto;
}

#settings .switch[for="frame-switch"] {
  margin-top: 1.5em;
}

#settings .switch::after {
  margin-left: 1em;
}

#settings .switch[for="player-side-switch"] {
  margin-top: 0.5em;
}

#settings .switch[for="bot-switch"] {
  margin-top: 0.5em;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.dialog-box {
  background-color: #242424;
  color: white;
  padding: 1.5em;
  border-radius: 0.5em;
  text-align: center;
  position: relative;
  min-width: 20em;
  max-width: 90%;
  pointer-events: auto;
}

.dialog-box h2 {
  margin-top: 0.25em;
  margin-bottom: 1em;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: uppercase;
}

.dialog-box p {
  margin: 0 0 1.25em 0;
  line-height: 1.4em;
  font-size: 1.1em;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 1em;
}

.dialog-buttons .btn {
  min-width: 4em;
}

.dialog-box .no-btn {
  background-color: #363636;
}

.dialog-box .no-btn:hover {
  background-color: #5a5a5a;
}

.dialog-box .game-end-option {
  padding-left: 1em;
  padding-right: 1em;
}

.btn.disabled,
.btn.icon.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.btn.icon.disabled:hover {
  background-color: rgba(255, 255, 255, 0);
}

.continue-button-group {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.15em;
}

.continue-button-group #continue {
  display: block;
  width: 7.25em;
  margin-bottom: 0.2em;
}

.continue-button-group #restart {
  display: block;
  width: 7.25em;
  margin: 0.5em 0 0.5em 0;
}