html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: monospace, monospace;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
button {
  font-size: 2em;
}

button:not(:disabled) {
  cursor: pointer;
}

details summary {
  cursor: pointer;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

.warning {
  background-color: #ffeb3b;
  padding: 1rem;
  border: 1px solid black;
  border-radius: 10px;
}

.error {
  color: #fff;
  background-color: #f44336;
  padding: 1rem;
  border: 1px solid black;
  border-radius: 10px;
}

.board {
  max-width: 100vw;
  max-height: 30vw;
  aspect-ratio: 10/3;
  background-color: #fdd978;
  border: 5px solid #fdd978;
  border-radius: 2.5%/8.2%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  position: relative;
}

.board.invalid-destination {
  border-color: #ff7575;
}

.board.show-direction .icon.flow {
  z-index: 1;
}

.row-0 {
  top: 0%;
}

.row-1 {
  top: 33.3333333333%;
}

.row-2 {
  top: 66.6666666667%;
}

.column-0 {
  left: 0%;
}

.column-1 {
  left: 10%;
}

.column-2 {
  left: 20%;
}

.column-3 {
  left: 30%;
}

.column-4 {
  left: 40%;
}

.column-5 {
  left: 50%;
}

.column-6 {
  left: 60%;
}

.column-7 {
  left: 70%;
}

.column-8 {
  left: 80%;
}

.column-9 {
  left: 90%;
}

.row--1.column-0 {
  top: -66.6666666667%;
  left: 0%;
}

.row--1.column-1 {
  top: -66.6666666667%;
  left: 10%;
}

.row--1.column-2 {
  top: -66.6666666667%;
  left: 20%;
}

.row--1.column-3 {
  top: -66.6666666667%;
  left: 30%;
}

.row--1.column-4 {
  top: -66.6666666667%;
  left: 40%;
}

.row--1.column-5 {
  top: -66.6666666667%;
  left: 50%;
}

.row--1.column-6 {
  top: -66.6666666667%;
  left: 60%;
}

.row--1.column-7 {
  top: -66.6666666667%;
  left: 70%;
}

.row--1.column-8 {
  top: -66.6666666667%;
  left: 80%;
}

.row--1.column-9 {
  top: -66.6666666667%;
  left: 90%;
}

.disconnected {
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  position: fixed;
  background-color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
}
.disconnected button {
  font-size: 1rem !important;
  margin: 10px !important;
  border-radius: 10px !important;
  padding: 10px !important;
}

.game-over {
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  position: fixed;
  background-color: white;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.game-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.game-page .top-bar {
  max-width: 1200px;
}
.game-page .board {
  flex: 1 0 100px;
  max-width: min(100vw, 1200px);
  max-height: min(30vw, 360px);
}
.game-page .sticks {
  flex: 0 1 100px;
  max-width: 1200px;
}

.orientation-tip {
  display: none;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  position: fixed;
  background-color: white;
  width: 80%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 7;
  padding: 1rem;
}
.orientation-tip button {
  font-size: 1rem;
  width: 4rem;
}

@media screen and (max-width: 700px) and (orientation: portrait) {
  .orientation-tip {
    display: flex;
  }
}
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.home-page .description {
  max-width: 20rem;
}
.home-page .links {
  display: flex;
  flex-direction: column;
}
.home-page a {
  font-size: 3rem;
  margin: 5px;
}

.loader-wrapper.hidden {
  visibility: hidden;
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid black;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.menu-button {
  width: 2rem;
  border-radius: 50%;
}

.menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(10px);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-wrapper .menu {
  width: 80%;
  height: 80%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid;
  border-radius: 10px;
}
.menu-wrapper .menu button {
  font-size: 3rem;
  margin: 5px;
}

.panic-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.panic-modal details {
  max-width: 80%;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}
.panic-modal summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}
.panic-modal button {
  font-size: 3rem;
  padding: 10px;
  margin: 20px;
}

.piece-wrapper {
  width: 10%;
  aspect-ratio: 1/1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 1s, left 1s;
  animation-duration: 1s;
}

.no-animation .piece-wrapper {
  animation-duration: 0s;
}

.piece-wrapper:not(.can-click) {
  pointer-events: none;
}

.piece {
  width: 80%;
  aspect-ratio: 1/1;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 5px #000000;
  position: relative;
}

.piece:not(:disabled) {
  cursor: pointer;
}

.piece.selected {
  animation: piece-selected 2s infinite;
}

@keyframes piece-selected {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1.2);
  }
}
.piece-icon {
  display: inline-block;
  aspect-ratio: 1/1;
  height: 1rem;
  vertical-align: middle;
  border-radius: 50%;
}

.piece.player-0,
.piece-icon.player-0 {
  background: rgb(204, 255, 253);
  background: radial-gradient(ellipse at 10% 20%, rgb(204, 255, 253) 0%, rgb(86, 123, 120) 100%);
  border-radius: 30%;
}

@keyframes player-0-pulse-even {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(204, 255, 253, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(204, 255, 253, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(204, 255, 253, 0);
  }
}
@keyframes player-0-pulse-odd {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(204, 255, 253, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(204, 255, 253, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(204, 255, 253, 0);
  }
}
.selected-change-even .piece.draw-attention.player-0 {
  animation: player-0-pulse-even 2s infinite;
}

.selected-change-odd .piece.draw-attention.player-0 {
  animation: player-0-pulse-odd 2s infinite;
}

.piece.player-1,
.piece-icon.player-1 {
  background: rgb(248, 206, 204);
  background: radial-gradient(ellipse at 10% 20%, rgb(248, 206, 204) 0%, rgb(152, 103, 110) 100%);
}

@keyframes player-1-pulse-even {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(248, 206, 204, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(248, 206, 204, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(248, 206, 204, 0);
  }
}
@keyframes player-1-pulse-odd {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(248, 206, 204, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(248, 206, 204, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(248, 206, 204, 0);
  }
}
.selected-change-even .piece.draw-attention.player-1 {
  animation: player-1-pulse-even 2s infinite;
}

.selected-change-odd .piece.draw-attention.player-1 {
  animation: player-1-pulse-odd 2s infinite;
}

@keyframes moving-row--1-column-0 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-0 {
  animation-name: moving-row--1-column-0;
}

@keyframes moving-row--1-column-1 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-1 {
  animation-name: moving-row--1-column-1;
}

@keyframes moving-row--1-column-2 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-2 {
  animation-name: moving-row--1-column-2;
}

@keyframes moving-row--1-column-3 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-3 {
  animation-name: moving-row--1-column-3;
}

@keyframes moving-row--1-column-4 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-4 {
  animation-name: moving-row--1-column-4;
}

@keyframes moving-row--1-column-5 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-5 {
  animation-name: moving-row--1-column-5;
}

@keyframes moving-row--1-column-6 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-6 {
  animation-name: moving-row--1-column-6;
}

@keyframes moving-row--1-column-7 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-7 {
  animation-name: moving-row--1-column-7;
}

@keyframes moving-row--1-column-8 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-8 {
  animation-name: moving-row--1-column-8;
}

@keyframes moving-row--1-column-9 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row--1.column-9 {
  animation-name: moving-row--1-column-9;
}

@keyframes moving-row-0-column-0 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-0 {
  animation-name: moving-row-0-column-0;
}

@keyframes moving-row-0-column-1 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-1 {
  animation-name: moving-row-0-column-1;
}

@keyframes moving-row-0-column-2 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-2 {
  animation-name: moving-row-0-column-2;
}

@keyframes moving-row-0-column-3 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-3 {
  animation-name: moving-row-0-column-3;
}

@keyframes moving-row-0-column-4 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-4 {
  animation-name: moving-row-0-column-4;
}

@keyframes moving-row-0-column-5 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-5 {
  animation-name: moving-row-0-column-5;
}

@keyframes moving-row-0-column-6 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-6 {
  animation-name: moving-row-0-column-6;
}

@keyframes moving-row-0-column-7 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-7 {
  animation-name: moving-row-0-column-7;
}

@keyframes moving-row-0-column-8 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-8 {
  animation-name: moving-row-0-column-8;
}

@keyframes moving-row-0-column-9 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-0.column-9 {
  animation-name: moving-row-0-column-9;
}

@keyframes moving-row-1-column-0 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-0 {
  animation-name: moving-row-1-column-0;
}

@keyframes moving-row-1-column-1 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-1 {
  animation-name: moving-row-1-column-1;
}

@keyframes moving-row-1-column-2 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-2 {
  animation-name: moving-row-1-column-2;
}

@keyframes moving-row-1-column-3 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-3 {
  animation-name: moving-row-1-column-3;
}

@keyframes moving-row-1-column-4 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-4 {
  animation-name: moving-row-1-column-4;
}

@keyframes moving-row-1-column-5 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-5 {
  animation-name: moving-row-1-column-5;
}

@keyframes moving-row-1-column-6 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-6 {
  animation-name: moving-row-1-column-6;
}

@keyframes moving-row-1-column-7 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-7 {
  animation-name: moving-row-1-column-7;
}

@keyframes moving-row-1-column-8 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-8 {
  animation-name: moving-row-1-column-8;
}

@keyframes moving-row-1-column-9 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-1.column-9 {
  animation-name: moving-row-1-column-9;
}

@keyframes moving-row-2-column-0 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-0 {
  animation-name: moving-row-2-column-0;
}

@keyframes moving-row-2-column-1 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-1 {
  animation-name: moving-row-2-column-1;
}

@keyframes moving-row-2-column-2 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-2 {
  animation-name: moving-row-2-column-2;
}

@keyframes moving-row-2-column-3 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-3 {
  animation-name: moving-row-2-column-3;
}

@keyframes moving-row-2-column-4 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-4 {
  animation-name: moving-row-2-column-4;
}

@keyframes moving-row-2-column-5 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-5 {
  animation-name: moving-row-2-column-5;
}

@keyframes moving-row-2-column-6 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-6 {
  animation-name: moving-row-2-column-6;
}

@keyframes moving-row-2-column-7 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-7 {
  animation-name: moving-row-2-column-7;
}

@keyframes moving-row-2-column-8 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-8 {
  animation-name: moving-row-2-column-8;
}

@keyframes moving-row-2-column-9 {
  0% {
    transform: scale(1);
    z-index: auto;
  }
  1% {
    z-index: 6;
  }
  50% {
    transform: scale(1.3);
  }
  99% {
    z-index: 6;
  }
  100% {
    transform: scale(1);
    z-index: auto;
  }
}
.piece-wrapper.row-2.column-9 {
  animation-name: moving-row-2-column-9;
}

.piece .icon {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.piece.protected .icon.protected {
  animation: 200ms fadeIn;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.piece.blocking .icon.blocking {
  animation: 200ms fadeIn;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes player-draw-attention {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.players {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 2rem;
}

.player-wrapper {
  position: relative;
  min-width: 30%;
}
.player-wrapper.player-0 .player {
  background-color: rgb(204, 255, 253);
}
.player-wrapper.player-0 .speech-bubble {
  background: #00aabb;
}
.player-wrapper.player-0 .speech-bubble:after {
  border-bottom-color: #00aabb;
}
.player-wrapper.player-0 .speech-bubble:after {
  border-left: 0;
}
.player-wrapper.player-1 .player {
  background-color: rgb(248, 206, 204);
}
.player-wrapper.player-1 .speech-bubble {
  background: #dc6464;
}
.player-wrapper.player-1 .speech-bubble:after {
  border-bottom-color: #dc6464;
}
.player-wrapper.player-1 .speech-bubble:after {
  border-right: 0;
}
.player-wrapper .player.draw-attention {
  animation: 1s player-draw-attention infinite;
}

.player {
  display: flex;
  height: 2rem;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  border: 1px solid black;
  border-radius: 5px;
  transition: height 500ms;
  transition-delay: 500ms;
  font-size: 1rem;
}
.player .points {
  width: auto;
  height: 100%;
  z-index: 2;
}
@keyframes player-points-increment-to-1 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.player .points.points-1 {
  animation: 1s player-points-increment-to-1;
  animation-fill-mode: forwards;
}
@keyframes player-points-increment-to-2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.player .points.points-2 {
  animation: 1s player-points-increment-to-2;
  animation-fill-mode: forwards;
}
@keyframes player-points-increment-to-3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.player .points.points-3 {
  animation: 1s player-points-increment-to-3;
  animation-fill-mode: forwards;
}
@keyframes player-points-increment-to-4 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.player .points.points-4 {
  animation: 1s player-points-increment-to-4;
  animation-fill-mode: forwards;
}
@keyframes player-points-increment-to-5 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.player .points.points-5 {
  animation: 1s player-points-increment-to-5;
  animation-fill-mode: forwards;
}
.player.has-turn {
  border: 2px solid black;
}

.player-turn-arrow {
  height: 100%;
  width: auto;
  transition: transform 500ms;
}
.has-turn-1 .player-turn-arrow {
  transform: rotate(180deg);
}

.player-icon {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0 10px;
}

.player-icon.player-0 {
  background-color: rgb(204, 255, 253);
}

.player-icon.player-1 {
  background-color: rgb(248, 206, 204);
}

.rules-page {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 2rem 2rem;
  margin: auto;
  max-width: 900px;
  background-color: #dc6464;
}
.rules-page .senet-header {
  margin: auto;
}
.rules-page h2 {
  margin: 1rem 0 0 0;
}
.rules-page .sticks {
  width: 250px;
  margin: auto;
}
.rules-page a:link,
.rules-page a:visited,
.rules-page a:hover,
.rules-page a:active {
  color: black;
}

.senet-header h1 {
  font-size: 4rem;
  margin: 20px 0 -20px;
}
.senet-header p {
  text-align: right;
}
.senet-header .by {
  font-style: italic;
}
.senet-header .macabot {
  font-weight: bolder;
}

.signaling-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
.signaling-page h1 {
  font-size: 2rem;
  margin: 20px;
}
.signaling-page button {
  font-size: 3rem;
  margin: 5px;
  border-radius: 10px;
  padding: 10px;
}
.signaling-page .cta {
  background-color: lightgreen;
}
.signaling-page textarea {
  width: 90%;
  height: 10rem;
  flex: 1;
}
.signaling-page > p {
  max-width: 90%;
}

.signaling-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
}

.speech-bubble {
  position: absolute;
  border-radius: 0.4em;
  top: 2.5rem;
  min-height: 2rem;
  padding: 5px;
  z-index: 5;
  text-align: center;
}

p .icon.blocking,
p .icon.no-move,
p .icon.protected,
p .icon.return-to-start {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 1rem solid transparent;
  border-top: 0;
  margin-left: -0.5rem;
  margin-top: -1rem;
}

.speech-bubble.closed,
.speech-bubble.closed * {
  visibility: hidden !important;
}

.spoken > * {
  visibility: hidden;
  animation-name: spoken-words;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
}

@keyframes spoken-words {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
.square {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square-icon {
  display: inline-block;
  height: 1rem;
  aspect-ratio: 1/1;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: inset 0 0 2px #000000;
}
.square-icon.invalid-destination {
  background-color: #ff7575;
}
.square-icon.valid-destination {
  background-color: rgb(144, 238, 144);
}

.inner-square {
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #7a7058;
  border: none;
  margin: 6.5%;
  border-radius: 14%;
  box-shadow: inset 0 0 10px #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 3rem;
}

.inner-square.valid-destination {
  background-color: rgba(144, 238, 144, 0.7);
  cursor: pointer;
  animation: valid-destination-pulse 2s infinite;
}

@keyframes valid-destination-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(144, 238, 144), inset 0 0 10px #000000;
  }
  70% {
    box-shadow: 0 0 0 20px rgba(144, 238, 144, 0), inset 0 0 10px #000000;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(144, 238, 144, 0), inset 0 0 10px #000000;
  }
}
.inner-square.invalid-destination {
  background-color: #ff7575;
}

.inner-square.valid-return-to-start {
  background-color: rgba(249, 186, 67, 0.7);
  cursor: pointer;
  animation: valid-return-to-start-pulse 2s infinite;
}

@keyframes valid-return-to-start-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(249, 186, 67), inset 0 0 10px #000000;
  }
  70% {
    box-shadow: 0 0 0 20px rgba(249, 186, 67, 0), inset 0 0 10px #000000;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 186, 67, 0), inset 0 0 10px #000000;
  }
}
@keyframes direction-flow {
  0% {
    fill: #000;
  }
  15% {
    fill: #aaa;
  }
  30% {
    fill: #000;
  }
  100% {
    fill: #000;
  }
}
.pos-0 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 0ms;
}

.pos-1 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 50ms;
}

.pos-2 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 100ms;
}

.pos-3 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 150ms;
}

.pos-4 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 200ms;
}

.pos-5 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 250ms;
}

.pos-6 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 300ms;
}

.pos-7 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 350ms;
}

.pos-8 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 400ms;
}

.pos-9 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 450ms;
}

.pos-10 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 500ms;
}

.pos-11 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 550ms;
}

.pos-12 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 600ms;
}

.pos-13 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 650ms;
}

.pos-14 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 700ms;
}

.pos-15 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 750ms;
}

.pos-16 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 800ms;
}

.pos-17 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 850ms;
}

.pos-18 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 900ms;
}

.pos-19 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 950ms;
}

.pos-20 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1000ms;
}

.pos-21 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1050ms;
}

.pos-22 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1100ms;
}

.pos-23 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1150ms;
}

.pos-24 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1200ms;
}

.pos-25 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1250ms;
}

.pos-26 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1300ms;
}

.pos-27 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1350ms;
}

.pos-28 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1400ms;
}

.pos-29 .flow {
  animation: direction-flow 2.5s infinite;
  animation-delay: 1450ms;
}

.start-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.game-modes {
  display: flex;
  flex-direction: column;
}

.game-mode {
  font-size: 3rem;
  margin: 5px;
}

/* Based on https://www.w3schools.com/howto/howto_css_flip_card.asp */
.stick-container {
  position: relative;
  width: 90%;
  aspect-ratio: 5/1;
}

.stick {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  position: absolute;
  opacity: 0.1;
}

.stick-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transition-timing-function: cubic-bezier(0.42, -0.4, 0.46, 1.4);
  transform-style: preserve-3d;
}

.stick-front,
.stick-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 0 1px 1px #000;
}

.stick-front {
  background: rgb(100, 100, 100);
  background: linear-gradient(180deg, rgb(100, 100, 100) 0%, rgb(25, 25, 25) 100%);
}

.stick-back {
  background: rgb(232, 232, 232);
  background: linear-gradient(0deg, rgb(232, 232, 232) 0%, rgb(189, 189, 189) 100%);
  transform: rotateY(180deg);
}

/* Based on https://css-tricks.com/how-to-create-a-realistic-motion-blur-with-css-transitions/ */
.delay-0 {
  transition-delay: 0ms;
}

.delay-1 {
  transition-delay: 3ms;
}

.delay-2 {
  transition-delay: 6ms;
}

.delay-3 {
  transition-delay: 9ms;
}

.delay-4 {
  transition-delay: 12ms;
}

.delay-5 {
  transition-delay: 15ms;
}

.delay-6 {
  transition-delay: 18ms;
}

.delay-7 {
  transition-delay: 21ms;
}

.delay-8 {
  transition-delay: 24ms;
}

.delay-9 {
  transition-delay: 27ms;
}

.delay-10 {
  transition-delay: 30ms;
}

.delay-11 {
  transition-delay: 33ms;
}

.delay-12 {
  transition-delay: 36ms;
}

.delay-13 {
  transition-delay: 39ms;
}

.delay-14 {
  transition-delay: 42ms;
}

.delay-15 {
  transition-delay: 45ms;
}

.delay-16 {
  transition-delay: 48ms;
}

.delay-17 {
  transition-delay: 51ms;
}

.delay-18 {
  transition-delay: 54ms;
}

.delay-19 {
  transition-delay: 57ms;
}

.delay-20 {
  transition-delay: 60ms;
}

.sticks {
  max-width: 100vw;
  max-height: 30vw;
  aspect-ratio: 10/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  position: relative;
}
.sticks .loader-wrapper {
  position: absolute;
}

.sticks-icon {
  height: 1rem;
  aspect-ratio: 10/3;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  vertical-align: middle;
}
.sticks-icon .stick-icon {
  width: 90%;
  aspect-ratio: 5/1;
  border-radius: 2px;
}
.sticks-icon .white {
  background-color: white;
}
.sticks-icon .black {
  background-color: black;
}

.throw-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgb(51, 217, 178);
  border-radius: 10px;
  display: none;
  box-shadow: inset 0 0 0 0 rgb(51, 217, 178);
  opacity: 0.5;
  animation: throw-pulse 2s infinite;
  cursor: pointer;
}

.throw-button:not(:disabled) {
  display: block;
}

.steps-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
}

.steps-wrapper:not(.disabled) {
  animation: 200ms fadeIn;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.steps {
  border-radius: 50%;
  height: 75%;
  aspect-ratio: 1/1;
  background: rgb(215, 215, 215);
  background: linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(88, 134, 214) 100%);
}

@keyframes no-move-pulse {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(204, 255, 253, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(204, 255, 253, 0);
  }
}
.no-move-button {
  height: 75%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgb(215, 215, 215);
  background: linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(88, 134, 214) 100%);
  border: none;
  display: none;
  animation: no-move-pulse 1s infinite;
}

.no-valid-moves .no-move-button {
  display: block;
}

.can-go-again .steps,
.can-go-again .no-move-button {
  background: rgb(215, 215, 215);
  background: linear-gradient(90deg, rgb(215, 215, 215) 0%, rgb(121, 219, 107) 100%);
}

.no-valid-moves .steps {
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(205, 38, 38) 100%);
}

@keyframes throw-pulse {
  0% {
    transform: scale(0.98);
    box-shadow: inset 0 0 0 0 rgba(51, 217, 178, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: inset 0 0 0 10px rgba(51, 217, 178, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: inset 0 0 0 0 rgba(51, 217, 178, 0);
  }
}
.top-bar {
  width: 100%;
  height: 2rem;
  display: flex;
}

.who-goes-first-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.who-goes-first-page .players-wrapper {
  visibility: hidden;
  opacity: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 2rem;
  margin: 1rem;
  width: 100%;
}
.who-goes-first-page.has-decision .players-wrapper {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.who-goes-first-page button {
  font-size: 3rem;
  margin: 5px;
  border-radius: 10px;
  padding: 10px;
}
.who-goes-first-page .cta {
  background-color: lightgreen;
}

/*# sourceMappingURL=senet.css.map */