@font-face {
  src: url("../fonts/Faustina-VariableFont_wght.ttf");
  font-family: "Faustina";
}

:root {
  --appBackground: hsl(55, 19%, 86%);
  --appForeground: hsl(0, 0%, 0%);
  --targetX: 50%;

  --boardColor: rgb(255, 251, 242);
  --wallColor: rgb(47, 59, 82);
  --rotatedColor: rgb(230, 159, 0);
  --startColor: rgb(86, 180, 233);
  --finishColor: rgb(213, 94, 0);
  --routeColor: rgb(80, 212, 124);
  --hoverColor: rgb(204, 121, 167);
  --finalWallColor: rgb(215, 223, 238);
}
html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--appForeground);
  font-family: "Faustina", serif;
  user-select: none;
  -webkit-user-select: none;
}

html {
  /* background-image: repeating-linear-gradient(90deg, rgba(244, 244, 244, 0.2) 0px, rgba(244, 244, 244, 0.2) 40px, rgba(250, 250, 250, 0.3) 40px, rgba(250, 250, 250, 0.3) 80px); */
  background-color: var(--boardColor);
}

body {
  margin: 0px auto;
  width: calc(100% - 40px);
  max-width: 500px;
  height: 100%;
  overflow: visible;
}

[v-cloak] {
  opacity: 0;
  transition: 250ms ease-out opacity;
}

.disabled,
:disabled {
  opacity: 0.1;
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 80px 0px 0px 0px;
  font-weight: normal;
  line-height: 100%;
}

app {
  display: flex;
  align-content: center;
  justify-content: center;
  /* align-items: center;
  flex-direction: column; */
  height: 100%;
}

stage {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  width: 100%;
}

home,
howto {
  display: block;
  margin: 0px auto;
  background: white;
  width: 100%;
  height: 100%;
}

quit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  padding-right: 20px;
  width: 110px;
  height: 50px;
  font-size: 2em;
}

home,
howto {
  display: none;
  position: absolute;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  z-index: 1000;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  background: rgb(243, 243, 243);
}

home.show,
howto.show {
  display: flex;
}

home #donate,
button {
  cursor: pointer;
  margin-top: 20px;
  box-shadow: 0px 5px 5px rgb(0 0 0 / 20%);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 3px;
  background-color: rgb(0, 0, 0);
  padding-bottom: 5px;
  width: 80px;
  height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  font-family: "Faustina";
}

button:hover {
  color: hsl(300, 100%, 68%);
  /* background-color: rgb(41, 41, 41); */
}

button.primary {
  background-color: var(--color1);
  color: white;
}

home #donate:focus,
home #donate:active,
button:focus,
button:active {
  transform: translateY(1px);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

home img {
  display: block;
  margin: 0px auto;
  width: 50%;
}

chrome {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
}

howto chrome {
  justify-content: flex-end;
}

howto h1 {
  margin-top: 30px;
}

version {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 0px;
  font-size: 0.8em;
}

logo {
  display: inline-block;
  mask-image: url(/images/big_tent_logo.svg);
  -webkit-mask-image: url(/images/big_tent_logo.svg);
  mask-position: center;
  mask-size: 120px 99.188px;
  mask-repeat: no-repeat;
  cursor: pointer;
  margin-top: 40px;
  background: rgb(173, 0, 0);
  width: 120px;
  height: 99.188px;
  -webkit-mask-size: 120px 99.188px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0.7;
  transition: 100ms ease-out opacity;
}

logo:hover {
  opacity: 1;
}

sullied {
  display: block;
  cursor: pointer;
  padding: 0px 0px 0px 20px;
  width: 110px;
  text-align: left;
  /* margin-top: 30px; */
  /* font-family: 'Courier New', Courier, monospace; */
}

time {
  display: block;
  cursor: pointer;
  padding: 0px 20px;
  text-align: center;
  /* margin-top: 30px; */
  /* font-family: 'Courier New', Courier, monospace; */
}

addtime {
  display: block;
  position: absolute;
  transform: translateY(-20px);
  opacity: 0;
  transition: 3000ms ease-out all;
  color: black;
  font-size: 1.5em;
  font-family: "Bangers";
  user-select: none;
  -webkit-user-select: none;
  margin-left: -0.6em;
}

addtime.flyaway {
  transform: translateY(20px);
  opacity: 1;
  transition: 0ms linear none;
}

puzzle {
  display: flex;
  justify-content: center;
}

playarea {
  display: block;
  cursor: pointer;
  box-sizing: border-box;
  aspect-ratio: 1;
  width: 100%;
  overflow: visible;
}

board {
  display: block;
  width: 100%;
  height: 100%;
}

/* visible so the start and finish circles can straddle the corners past the viewBox */
board svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

playarea {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* the drawing is in board units: one unit is the gap between two posts */
rect.wall {
  fill: var(--wallColor);
}

path.connector {
  fill: var(--wallColor);
}

rect.wall.sullied {
  fill: var(--rotatedColor);
}

rect.wall.aimed {
  fill: var(--hoverColor);
}

circle.start {
  transition: 250ms ease-out fill;
  fill: var(--startColor);
}

circle.start.complete {
  fill: var(--routeColor);
}

circle.finish {
  transition: 250ms ease-out fill;
  fill: var(--finishColor);
}

circle.finish.complete {
  fill: var(--routeColor);
}

path.path {
  transition: 250ms ease-out stroke-width;
  fill: none;
  stroke-linecap: round;
}

rect.frame {
  fill: var(--boardColor);
}

path.border {
  fill: none;
  stroke: var(--wallColor);
  stroke-linecap: round;
}

rect.gridsquare {
  fill: rgba(0, 0, 0, 0.05);
}

share {
  transform: translateY(12px);
  cursor: pointer;
  margin: 0px 0px;
  border-radius: 3px 3px 0px 0px;
  background-color: var(--appForeground);
  padding: 2px 20px 6px;
  color: var(--appBackground);
  font-weight: bold;
  white-space: nowrap;
}

share:hover {
  color: hsl(300, 100%, 68%);
}

p {
  margin: 10px 20px 0px;
  text-align: center;
}