body {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  font-family: "IBM Plex Mono", monospace;
  background: black;
}
body.crash {
  animation: collisionShake 0.1s 20;
}
body.executing-orders {
  color: yellow;
}
body.executing-orders .game-board .meter-bar,
body.executing-orders .game-board .viewer,
body.executing-orders .game-board .console,
body.executing-orders .game-board .console textarea,
body.executing-orders .game-board .console .console-message span,
body.executing-orders .game-board .controls {
  border: 2px solid yellow;
  box-shadow: 0px 0px 10px yellow, inset 0px 0px 10px yellow;
  color: yellow;
  text-shadow: 0px 0px 5px yellow;
}
body.executing-orders .game-board .meter-bar .shields,
body.executing-orders .game-board .meter-bar .power,
body.executing-orders .game-board .viewer .shields,
body.executing-orders .game-board .viewer .power,
body.executing-orders .game-board .console .shields,
body.executing-orders .game-board .console .power,
body.executing-orders .game-board .console textarea .shields,
body.executing-orders .game-board .console textarea .power,
body.executing-orders .game-board .console .console-message span .shields,
body.executing-orders .game-board .console .console-message span .power,
body.executing-orders .game-board .controls .shields,
body.executing-orders .game-board .controls .power {
  color: yellow;
}
body.executing-orders .game-board .meter-bar .shields:after,
body.executing-orders .game-board .meter-bar .power:before,
body.executing-orders .game-board .viewer .shields:after,
body.executing-orders .game-board .viewer .power:before,
body.executing-orders .game-board .console .shields:after,
body.executing-orders .game-board .console .power:before,
body.executing-orders .game-board .console textarea .shields:after,
body.executing-orders .game-board .console textarea .power:before,
body.executing-orders .game-board .console .console-message span .shields:after,
body.executing-orders .game-board .console .console-message span .power:before,
body.executing-orders .game-board .controls .shields:after,
body.executing-orders .game-board .controls .power:before {
  color: yellow;
}
body.executing-orders .game-board .console .console-message:before {
  background-color: yellow;
  box-shadow: 0px 0px 10px yellow, inset 0px 0px 10px yellow;
}
body.executing-orders .game-board .controls > * {
  filter: hue-rotate(-55deg) saturate(150%);
}
body.red-alert {
  color: #FF4136;
}
body.red-alert .game-board .meter-bar,
body.red-alert .game-board .viewer,
body.red-alert .game-board .console,
body.red-alert .game-board .console textarea,
body.red-alert .game-board .console .console-message span,
body.red-alert .game-board .controls {
  border: 2px solid #FF4136;
  box-shadow: 0px 0px 10px #FF4136, inset 0px 0px 10px #FF4136;
  color: #FF4136;
  text-shadow: 0px 0px 5px #FF4136;
}
body.red-alert .game-board .meter-bar .shields,
body.red-alert .game-board .meter-bar .power,
body.red-alert .game-board .viewer .shields,
body.red-alert .game-board .viewer .power,
body.red-alert .game-board .console .shields,
body.red-alert .game-board .console .power,
body.red-alert .game-board .console textarea .shields,
body.red-alert .game-board .console textarea .power,
body.red-alert .game-board .console .console-message span .shields,
body.red-alert .game-board .console .console-message span .power,
body.red-alert .game-board .controls .shields,
body.red-alert .game-board .controls .power {
  color: #FF4136;
}
body.red-alert .game-board .meter-bar .shields:after,
body.red-alert .game-board .meter-bar .power:before,
body.red-alert .game-board .viewer .shields:after,
body.red-alert .game-board .viewer .power:before,
body.red-alert .game-board .console .shields:after,
body.red-alert .game-board .console .power:before,
body.red-alert .game-board .console textarea .shields:after,
body.red-alert .game-board .console textarea .power:before,
body.red-alert .game-board .console .console-message span .shields:after,
body.red-alert .game-board .console .console-message span .power:before,
body.red-alert .game-board .controls .shields:after,
body.red-alert .game-board .controls .power:before {
  color: #FF4136;
}
body.red-alert .game-board .meter-bar .ship-name,
body.red-alert .game-board .viewer .ship-name,
body.red-alert .game-board .console .ship-name,
body.red-alert .game-board .console textarea .ship-name,
body.red-alert .game-board .console .console-message span .ship-name,
body.red-alert .game-board .controls .ship-name {
  color: #FF4136 !important;
}
body.red-alert .game-board .meter-bar .power-icon, body.red-alert .game-board .meter-bar .shield-icon,
body.red-alert .game-board .viewer .power-icon,
body.red-alert .game-board .viewer .shield-icon,
body.red-alert .game-board .console .power-icon,
body.red-alert .game-board .console .shield-icon,
body.red-alert .game-board .console textarea .power-icon,
body.red-alert .game-board .console textarea .shield-icon,
body.red-alert .game-board .console .console-message span .power-icon,
body.red-alert .game-board .console .console-message span .shield-icon,
body.red-alert .game-board .controls .power-icon,
body.red-alert .game-board .controls .shield-icon {
  color: #FF4136;
}
body.red-alert .game-board .console .console-message:before {
  background-color: #FF4136;
  box-shadow: 0px 0px 10px #FF4136, inset 0px 0px 10px #FF4136;
}
body.red-alert .game-board .controls > * {
  filter: hue-rotate(-115deg) saturate(150%);
}
body.red-alert:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-image: radial-gradient(ellipse at center top, rgba(255, 65, 54, 0.8) 1%, transparent 60%), radial-gradient(ellipse at center bottom, rgba(255, 65, 54, 0.8) 1%, transparent 60%);
  background-size: 40% 50vh;
  background-repeat: no-repeat;
  animation: redAlert 0.7s linear infinite;
  z-index: 6;
}
body.red-alert.destroyed .game-board .controls {
  background: black;
}
body.board-shake .game-board {
  animation: boardShake 0.1s 17 alternate-reverse;
}
body .game-board {
  display: grid;
  grid: repeat(20, 1fr)/repeat(20, 1fr);
  height: 672px;
  width: 896px;
  font-size: 14px;
}
body .game-board:after {
  content: attr(data-version);
  color: rgba(50, 200, 0, 0.8);
  font-size: 0.6em;
  grid-column-end: 20;
}
body .game-board .init-hidden {
  visibility: hidden;
  display: none;
}
body .game-board .hero-image {
  grid-row: 1/21;
  grid-column: 1/21;
  background-color: black;
  pointer-events: none;
  position: relative;
  padding: 0;
  animation: 0.1s fadeOut 4s forwards;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .game-board .hero-image > img {
  max-width: 100%;
}
body .game-board.already-seen .hero-image {
  display: none;
}
body .game-board .login-box {
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  grid-row: 2/20;
  grid-column: 2/20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.95em;
}
body .game-board .login-box form {
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
body .game-board .login-box form > div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
body .game-board .login-box input, body .game-board .login-box button {
  margin-left: 15px;
  margin-right: 15px;
  background: transparent;
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  padding: 1rem;
}
body .game-board .meter-bar {
  grid-row: 1/2;
  grid-column: 1/16;
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 5px;
}
body .game-board .meter-bar.outline-only * {
  display: none !important;
}
body .game-board .meter-bar .ship-name {
  flex: 60%;
  font-weight: bold;
  text-shadow: 0px 0px 5px currentcolor;
  color: rgb(50, 200, 0);
  text-transform: uppercase;
  white-space: nowrap;
}
body .game-board .meter-bar .shield,
body .game-board .meter-bar .power {
  flex: 25%;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 2px;
  height: 1.2em;
}
body .game-board .meter-bar .shield div.chunk,
body .game-board .meter-bar .power div.chunk {
  display: inline-block;
  width: 0.6em;
  background-color: yellow;
  border: 2px solid yellow;
  box-shadow: 0px 0px 10px yellow, inset 0px 0px 10px yellow;
  opacity: 0;
  animation: fadeIn 0.2s ease-in 0s 1 forwards;
}
body .game-board .meter-bar .shield div.chunk.remainder,
body .game-board .meter-bar .power div.chunk.remainder {
  scale: 1 0.5;
  opacity: 0.6;
}
body .game-board .meter-bar .shield > div:nth-child(1),
body .game-board .meter-bar .power > div:nth-child(1) {
  animation-delay: 0.1s;
}
body .game-board .meter-bar .shield > div:nth-child(2),
body .game-board .meter-bar .power > div:nth-child(2) {
  animation-delay: 0.2s;
}
body .game-board .meter-bar .shield > div:nth-child(3),
body .game-board .meter-bar .power > div:nth-child(3) {
  animation-delay: 0.3s;
}
body .game-board .meter-bar .shield > div:nth-child(4),
body .game-board .meter-bar .power > div:nth-child(4) {
  animation-delay: 0.4s;
}
body .game-board .meter-bar .shield > div:nth-child(5),
body .game-board .meter-bar .power > div:nth-child(5) {
  animation-delay: 0.5s;
}
body .game-board .meter-bar .shield > div:nth-child(6),
body .game-board .meter-bar .power > div:nth-child(6) {
  animation-delay: 0.6s;
}
body .game-board .meter-bar .shield > div:nth-child(7),
body .game-board .meter-bar .power > div:nth-child(7) {
  animation-delay: 0.7s;
}
body .game-board .meter-bar .shield > div:nth-child(8),
body .game-board .meter-bar .power > div:nth-child(8) {
  animation-delay: 0.8s;
}
body .game-board .meter-bar .shield > div:nth-child(9),
body .game-board .meter-bar .power > div:nth-child(9) {
  animation-delay: 0.9s;
}
body .game-board .meter-bar .shield > div:nth-child(10),
body .game-board .meter-bar .power > div:nth-child(10) {
  animation-delay: 1s;
}
body .game-board .meter-bar .shield div.chunk:nth-child(1),
body .game-board .meter-bar .power div.chunk:nth-child(1) {
  background-color: #FF4136;
  border: 2px solid #FF4136;
  box-shadow: 0px 0px 10px #FF4136, inset 0px 0px 10px #FF4136;
}
body .game-board .meter-bar .shield div.chunk:nth-child(2),
body .game-board .meter-bar .power div.chunk:nth-child(2) {
  background-color: #FF851B;
  border: 2px solid #FF851B;
  box-shadow: 0px 0px 10px #FF851B, inset 0px 0px 10px #FF851B;
}
body .game-board .meter-bar .shield {
  direction: rtl;
}
body .game-board .meter-bar .power-icon, body .game-board .meter-bar .shield-icon {
  grid-column: 11/12;
  color: rgb(50, 200, 0);
}
body .game-board .meter-bar .power-icon svg, body .game-board .meter-bar .shield-icon svg {
  width: 1.2em;
  fill: currentColor;
  filter: drop-shadow(0px 0px 5px currentColor);
}
body .game-board .meter-bar .power-icon svg {
  transform: scale(1.5) translate(2px, 0px);
}
body .game-board .meter-bar .shield-icon svg {
  transform: scale(1.5) translate(-5px, 1px);
}
body .game-board .game-over-panel {
  grid-row: 4/17;
  grid-column: 4/17;
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  padding: 2rem;
  background: black;
  z-index: 2;
}
body .game-board .game-over-panel h1 {
  font-size: 6rem;
  text-shadow: 0px 0px 13px rgb(50, 200, 0);
}
body .game-board .viewer {
  grid-row: 3/21;
  grid-column: 1/16;
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  min-width: 80%;
  min-height: 45%;
  overflow: hidden;
  background-image: url("/assets/starship.icon.green.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
body .game-board .viewer canvas {
  pointer-events: none;
  position: absolute;
}
body .game-board .viewer canvas.viewer-underlay {
  width: 100%;
  height: 100%;
  opacity: 0.2;
}
body .game-board .viewer.rooms-menu {
  background: none;
  padding: 2em;
  overflow: auto;
}
body .game-board .viewer.rooms-menu > div {
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  font-size: 0.8em;
  padding: 2em;
}
body .game-board .viewer.rooms-menu > div h3 {
  font-size: 2em;
  font-variant: small-caps;
  margin: 0px;
}
body .game-board .viewer.rooms-menu > div p {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0px;
}
body .game-board .viewer.rooms-menu > div p a {
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  text-decoration: none;
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #1f7c00;
  box-shadow: 0px 0px 10px #1f7c00;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
  padding: 10px;
}
body .game-board .viewer.rooms-menu > div p a:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0);
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.rooms-menu > div p a[disabled] {
  color: black;
  opacity: 0.5;
  pointer-events: none;
}
body .game-board .viewer.rooms-menu > div p a.spectate-button {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #b3b300;
  box-shadow: 0px 0px 10px #b3b300;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.rooms-menu > div p a.spectate-button:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: yellow;
  box-shadow: 0px 0px 10px yellow;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.lobby-info, body .game-board .viewer.game-over {
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 10% 10% 20%;
  position: relative;
}
body .game-board .viewer.lobby-info > div, body .game-board .viewer.game-over > div {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1/3;
}
body .game-board .viewer.lobby-info div.neb-logo, body .game-board .viewer.game-over div.neb-logo {
  position: absolute;
  height: 7rem;
  width: 40rem;
  left: 50%;
  transform: translateX(-20rem);
}
body .game-board .viewer.lobby-info div.player-list, body .game-board .viewer.game-over div.player-list {
  grid-column: 1/2;
  grid-row: 1/2;
  flex-direction: column;
}
body .game-board .viewer.lobby-info div.player-list ol > li, body .game-board .viewer.game-over div.player-list ol > li {
  text-transform: uppercase;
  padding-left: 1em;
  padding-right: 1em;
}
body .game-board .viewer.lobby-info div.player-list ol > li.team-federation, body .game-board .viewer.game-over div.player-list ol > li.team-federation {
  color: #0074D9;
  text-shadow: 0px 0px 5px #0074D9;
}
body .game-board .viewer.lobby-info div.player-list ol > li.team-empire, body .game-board .viewer.game-over div.player-list ol > li.team-empire {
  color: #FF4136;
  text-shadow: 0px 0px 5px #FF4136;
}
body .game-board .viewer.lobby-info div.player-list ol > li.is-ready, body .game-board .viewer.game-over div.player-list ol > li.is-ready {
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background-color: #1f7c00;
}
body .game-board .viewer.lobby-info div.player-list ol > li.is-ready.team-federation, body .game-board .viewer.game-over div.player-list ol > li.is-ready.team-federation {
  background-color: #004b8d;
}
body .game-board .viewer.lobby-info div.player-list ol > li.is-ready.team-empire, body .game-board .viewer.game-over div.player-list ol > li.is-ready.team-empire {
  background-color: #e90d00;
}
body .game-board .viewer.lobby-info div.spectator-list, body .game-board .viewer.game-over div.spectator-list {
  grid-column: 2/3;
  grid-row: 1/2;
  flex-direction: column;
}
body .game-board .viewer.lobby-info div.room-info > div, body .game-board .viewer.game-over div.room-info > div {
  margin-right: 2em;
}
body .game-board .viewer.lobby-info div.room-info.game-over, body .game-board .viewer.game-over div.room-info.game-over {
  display: grid;
  grid-template-columns: 1fr;
}
body .game-board .viewer.lobby-info div.room-info.game-over > div, body .game-board .viewer.game-over div.room-info.game-over > div {
  margin-left: 2em;
  text-align: center;
}
body .game-board .viewer.lobby-info div.lobby-controls, body .game-board .viewer.game-over div.lobby-controls {
  display: flex;
  justify-content: space-around;
}
body .game-board .viewer.lobby-info div.lobby-controls button, body .game-board .viewer.game-over div.lobby-controls button {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #1f7c00;
  box-shadow: 0px 0px 10px #1f7c00;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.lobby-info div.lobby-controls button:active, body .game-board .viewer.game-over div.lobby-controls button:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0);
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.lobby-info div.lobby-controls button[disabled], body .game-board .viewer.game-over div.lobby-controls button[disabled] {
  color: black;
  opacity: 0.5;
  pointer-events: none;
}
body .game-board .viewer.lobby-info div.lobby-controls button.ready-button.unready, body .game-board .viewer.game-over div.lobby-controls button.ready-button.unready {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #b3b300;
  box-shadow: 0px 0px 10px #b3b300;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.lobby-info div.lobby-controls button.ready-button.unready:active, body .game-board .viewer.game-over div.lobby-controls button.ready-button.unready:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: yellow;
  box-shadow: 0px 0px 10px yellow;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.lobby-info div.lobby-controls button.leave-button, body .game-board .viewer.game-over div.lobby-controls button.leave-button {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #e90d00;
  box-shadow: 0px 0px 10px #e90d00;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board .viewer.lobby-info div.lobby-controls button.leave-button:active, body .game-board .viewer.game-over div.lobby-controls button.leave-button:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #FF4136;
  box-shadow: 0px 0px 10px #FF4136;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .game-board[data-team=federation] .viewer {
  background-image: url("/assets/federation.png");
}
body .game-board[data-team=empire] .viewer {
  background-image: url("/assets/empire.png");
}
body .game-board[data-game-mode=team] .ship-name:after {
  display: inline-block;
  content: " ";
  background-image: url("/assets/federation.png");
  background-size: contain;
  height: 0.9em;
  width: 1.6em;
  background-repeat: no-repeat;
  background-position: center;
}
body .game-board[data-game-mode=team][data-team=empire] .ship-name:after {
  background-image: url("/assets/empire.png");
}
body .game-board .controls {
  grid-column: 17/21;
  grid-row: 11/21;
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body .game-board .controls.outline-only > * {
  display: none !important;
}
body .game-board .controls .controls-orders {
  max-height: 10em;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 0.9em;
}
body .game-board .controls .controls-orders.locked .orders-screen ul > li {
  color: yellow;
  text-shadow: 0px 0px 5px yellow;
}
body .game-board .controls .controls-orders.locked .commit-orders {
  background-color: #735602;
  border: 2px solid white;
  box-shadow: 0px 0px 10px white, inset 0px 0px 10px white;
  background-image: none;
  color: transparent !important;
  text-shadow: none !important;
  position: relative;
  pointer-events: none;
}
body .game-board .controls .controls-orders.locked .commit-orders:after {
  color: white;
  text-shadow: 0px 0px 5px white;
  content: "LOCKED";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  left: 0px;
  top: 0px;
}
body .game-board .controls .controls-orders .orders-screen ul {
  list-style: none;
  padding: 0;
  max-height: 5em;
  min-height: 5em;
  min-width: 14em;
  margin-bottom: 1.9em;
  padding-left: 8px;
  box-sizing: border-box;
}
body .game-board .controls .controls-orders .orders-screen ul > li {
  border-bottom: 0.5px dashed #1f7c00;
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  position: relative;
}
body .game-board .controls .controls-orders .orders-screen ul > li:before {
  content: attr(data-number);
}
body .game-board .controls .controls-orders .orders-screen ul > li:after {
  content: "x";
  opacity: 0.6;
  position: absolute;
  right: 8px;
  top: 0px;
}
body .game-board .controls .controls-orders .commit-orders {
  border: 2px solid #259500;
  color: #259500;
  background-color: #2caf00;
  background-image: -webkit-linear-gradient(black, black);
  background-image: -o-linear-gradient(black, black);
  background-image: linear-gradient(black, black);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: right;
  max-width: 90%;
  min-width: 10rem;
  letter-spacing: 5px;
}
body .game-board .controls .controls-orders .commit-orders.has-orders {
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
}
body .game-board .controls .controls-targeting {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
body .game-board .controls .controls-targeting .confirm-targeting {
  outline: none;
  height: 100%;
  background-image: url("/assets/targeting.svg"), radial-gradient(circle at center, #259500 0%, transparent 70%);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  transition: transform 0.02s;
}
body .game-board .controls .controls-targeting .confirm-targeting.lit {
  background-image: url("/assets/targeting.svg"), radial-gradient(circle at center, rgb(50, 200, 0) 70%, transparent);
}
body .game-board .controls .controls-targeting .confirm-targeting:active {
  background-image: url("/assets/targeting.svg"), linear-gradient(#3ffb00, #3ffb00);
  transform: scale(0.93);
}
body .game-board .controls .controls-targeting .confirm-targeting.clicked {
  background-image: url("/assets/targeting.svg"), linear-gradient(#76ff49, #76ff49);
  transform: scale(0.93);
}
body .game-board .controls .controls-targeting > * {
  box-shadow: 0px 0px 10px rgb(50, 200, 0);
}
body .game-board .controls .controls-movements {
  flex: 33%;
  max-height: 150px;
  display: grid;
  grid: repeat(9, 1fr)/1fr 1fr 1fr;
  margin-bottom: 0.4em;
}
body .game-board .controls .controls-movements > div, body .game-board .controls .controls-movements > button {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
body .game-board .controls .controls-movements > div svg, body .game-board .controls .controls-movements > button svg {
  width: 80%;
  fill: #0c2f00;
}
body .game-board .controls .controls-movements > div.lit, body .game-board .controls .controls-movements > button.lit {
  opacity: 0.9;
}
body .game-board .controls .controls-movements > div.lit svg, body .game-board .controls .controls-movements > button.lit svg {
  fill: rgb(50, 200, 0);
  filter: drop-shadow(0px 0px 5px rgb(50, 200, 0));
}
body .game-board .controls .controls-movements > div:active, body .game-board .controls .controls-movements > button:active {
  transform: scale(0.95);
}
body .game-board .controls .controls-movements > div:active svg, body .game-board .controls .controls-movements > button:active svg {
  transform: scale(0.95);
  fill: #3ffb00;
  filter: drop-shadow(0px 0px 5px #3ffb00);
}
body .game-board .controls .controls-movements.order-flash > button svg {
  animation: lightChase 0.6s infinite;
}
body .game-board .controls .controls-movements.order-flash > button:nth-of-type(1) > svg {
  animation-delay: 0s;
}
body .game-board .controls .controls-movements.order-flash > button:nth-of-type(2) > svg {
  animation-delay: 0.1s;
}
body .game-board .controls .controls-movements.order-flash > button:nth-of-type(3) > svg {
  animation-delay: 0.2s;
}
body .game-board .controls .controls-movements.order-flash > button:nth-of-type(4) > svg {
  animation-delay: 0.3s;
}
body .game-board .controls .controls-movements.order-flash > button:nth-of-type(5) > svg {
  animation-delay: 0.4s;
}
body .game-board .controls .controls-movements.order-flash > button:nth-of-type(6) > svg {
  animation-delay: 0.5s;
}
body .game-board .controls .controls-movements.order-pulse > button svg {
  animation: fadeOut 0.5s infinite alternate-reverse;
}
body .game-board .controls .controls-movements .ship-icon {
  background-image: url("/assets/starship.icon.green.png");
  grid-row: 4/7;
  grid-column: 2/3;
  background-size: 121%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  transform: scale(1.1);
}
body .game-board .controls .controls-movements .ship-icon.lit {
  filter: saturate(3.7);
  opacity: 1;
}
body .game-board .controls .controls-movements .ship-icon.ship-pulse {
  animation: shipPulse 0.7s infinite alternate-reverse;
}
body .game-board .controls .controls-movements .move-button {
  outline: none;
  background-color: transparent;
  border: none;
}
body .game-board .controls .controls-movements .move-button.move-button-reverse {
  grid-row: 1/4;
  grid-column: 1/2;
  transform: translateY(0.4em);
}
body .game-board .controls .controls-movements .move-button.move-button-reverse svg {
  transform: scale(-1);
}
body .game-board .controls .controls-movements .move-button.move-button-reverse:active {
  transform: translateY(0.4em) scale(0.95);
}
body .game-board .controls .controls-movements .move-button.move-button-forward {
  grid-row: 7/10;
  grid-column: 3/4;
  transform: translateY(-0.4em);
}
body .game-board .controls .controls-movements .move-button.move-button-forward:active {
  transform: translateY(-0.4em) scale(0.95);
}
body .game-board .controls .controls-movements .move-button.move-button-up {
  grid-row: 1/4;
  grid-column: 2/3;
}
body .game-board .controls .controls-movements .move-button.move-button-up svg {
  transform: rotate(-120deg);
}
body .game-board .controls .controls-movements .move-button.move-button-down {
  grid-row: 7/10;
  grid-column: 2/3;
}
body .game-board .controls .controls-movements .move-button.move-button-down svg {
  transform: rotate(60deg);
}
body .game-board .controls .controls-movements .move-button.move-button-rotate-to-starboard {
  grid-row: 7/10;
  grid-column: 1/2;
  transform: translateY(-0.4em);
}
body .game-board .controls .controls-movements .move-button.move-button-rotate-to-starboard svg {
  transform: scaleY(-1) rotate(180deg);
}
body .game-board .controls .controls-movements .move-button.move-button-rotate-to-starboard:active {
  transform: translateY(-0.4em) scale(0.95);
}
body .game-board .controls .controls-movements .move-button.move-button-rotate-to-port {
  grid-row: 1/4;
  grid-column: 3/4;
  transform: translateY(0.4em);
}
body .game-board .controls .controls-movements .move-button.move-button-rotate-to-port:active {
  transform: translateY(0.4em) scale(0.95);
}
body .game-board .controls.error-alert {
  filter: hue-rotate(-115deg) saturate(150%);
}
body .game-board.spectating.game-running .controls .controls-orders, body .game-board.spectating.game-running .controls .controls-targeting {
  visibility: hidden;
  pointer-events: none;
}
body .game-board.spectating.game-running .controls .controls-movements .ship-icon {
  visibility: hidden;
}
body .game-board.spectating.game-running .controls .controls-movements .move-button {
  pointer-events: none;
}
body .game-board.spectating.game-running .controls .controls-movements .move-button.move-button-up > svg {
  transform: none;
}
body .game-board.spectating.game-running .controls .controls-movements .move-button.move-button-down > svg {
  transform: scaleY(-1);
}
body .game-board.spectating.game-running .controls .controls-movements .move-button.move-button-reverse > svg {
  transform: translate(1rem, 1rem);
}
body .game-board.spectating.game-running .controls .controls-movements .move-button.move-button-forward > svg {
  transform: scale(-1) translate(1rem, 1rem);
}
body .game-board.spectating.game-running .controls .controls-movements .move-button.move-button-rotate-to-port > svg {
  transform: scaleX(-1) translate(1rem, 1rem);
}
body .game-board.spectating.game-running .controls .controls-movements .move-button.move-button-rotate-to-starboard > svg {
  transform: scaleY(-1) translate(1rem, 1rem);
}
body .game-board.spectating.game-running .console .chat-controls {
  display: none;
}
body .game-board.spectating.game-running .viewer, body .game-board.spectating.game-running .meter-bar, body .game-board.spectating.game-running .controls, body .game-board.spectating.game-running .console {
  border: 2px solid #0074D9;
  box-shadow: 0px 0px 10px #0074D9, inset 0px 0px 10px #0074D9;
  color: #0074D9;
  text-shadow: 0px 0px 5px #0074D9;
}
body .console,
body .console-history-contents {
  grid-column: 17/21;
  grid-row: 1/10;
  border: 2px solid rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  position: relative;
  font-size: 0.9em;
  padding-top: 5.8em;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}
body .console.outline-only textarea,
body .console-history-contents.outline-only textarea {
  border: none;
  background: transparent;
  box-shadow: none;
}
body .console .chat-input,
body .console-history-contents .chat-input {
  position: absolute;
  z-index: 2;
  top: 0px;
  background: black;
  width: 100%;
  border: none;
  height: 4.2em;
  border-bottom: 2px solid rgb(50, 200, 0);
  resize: none;
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  padding: 0.5em;
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  overflow: hidden;
  max-width: calc(100% - 1em);
}
body .console .chat-input:focus,
body .console-history-contents .chat-input:focus {
  outline: none;
  background: rgba(50, 200, 0, 0.05);
}
body .console .chat-controls,
body .console-history-contents .chat-controls {
  position: absolute;
  top: 4.2em;
  z-index: 2;
  width: 100%;
  border: none;
  height: 1.6em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body .console .chat-controls > div,
body .console-history-contents .chat-controls > div {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(-60deg, transparent 50%, black 51%, transparent 51%), linear-gradient(215deg, currentcolor 50%, transparent 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 10px 100%, 4px 4px, 4px 4px;
  background-position-y: center, calc(0.8em - 2px), calc(0.8em - 2px);
  background-position-x: center, calc(100% - 6px), calc(100% - 2px);
  line-height: 1.6;
  max-height: 1.6em;
}
body .console .chat-controls div.channel-control, body .console .chat-controls div.stock-replies,
body .console-history-contents .chat-controls div.channel-control,
body .console-history-contents .chat-controls div.stock-replies {
  text-transform: uppercase;
  flex-wrap: wrap;
}
body .console .chat-controls div.channel-control > div, body .console .chat-controls div.stock-replies > div,
body .console-history-contents .chat-controls div.channel-control > div,
body .console-history-contents .chat-controls div.stock-replies > div {
  flex: 100%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  height: 1.6em;
  text-transform: uppercase;
}
body .console .chat-controls div.stock-replies-item,
body .console-history-contents .chat-controls div.stock-replies-item {
  background: black;
}
body .console .chat-controls div.channel-control,
body .console-history-contents .chat-controls div.channel-control {
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  box-shadow: 0px 0px 10px rgb(50, 200, 0);
}
body .console .chat-controls [data-channel=GLOBAL],
body .console-history-contents .chat-controls [data-channel=GLOBAL] {
  background-color: #32C800;
}
body .console .chat-controls [data-channel*="1:"],
body .console-history-contents .chat-controls [data-channel*="1:"] {
  background-color: #4ccdff;
}
body .console .chat-controls [data-channel*="2:"],
body .console-history-contents .chat-controls [data-channel*="2:"] {
  background-color: #f5d300;
}
body .console .chat-controls [data-channel*="3:"],
body .console-history-contents .chat-controls [data-channel*="3:"] {
  background-color: #ff1a31;
}
body .console .chat-controls [data-channel*="4:"],
body .console-history-contents .chat-controls [data-channel*="4:"] {
  background-color: #c8fe10;
}
body .console .chat-controls [data-channel*="5:"],
body .console-history-contents .chat-controls [data-channel*="5:"] {
  background-color: #8d336b;
}
body .console .chat-controls [data-channel*="6:"],
body .console-history-contents .chat-controls [data-channel*="6:"] {
  background-color: #e76b00;
}
body .console .chat-controls [data-channel=TEAM],
body .console-history-contents .chat-controls [data-channel=TEAM] {
  background-color: #0059a6;
}
body .console .chat-controls [data-channel=TEAM][data-team=empire],
body .console-history-contents .chat-controls [data-channel=TEAM][data-team=empire] {
  background-color: #ff1103;
}
body .console .chat-controls [data-channel=TEAM][data-team=empire] [data-channel=TEAM],
body .console-history-contents .chat-controls [data-channel=TEAM][data-team=empire] [data-channel=TEAM] {
  background-color: #ff1103;
}
body .console-history {
  grid-row: 1/21;
  grid-column: 1/21;
  z-index: 6;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
body .console-history .console-history-contents {
  display: block;
  max-width: 700px;
  min-width: 500px;
  max-height: 70vh;
  overflow-y: scroll;
  padding: 1em;
  background: rgba(0, 0, 0, 0.5);
}
body .console-history .esc-menu-contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}
body .console-history .esc-menu-contents .player-list {
  grid-column: 1/3;
}
body .console-history .esc-menu-contents .player-list li {
  text-transform: uppercase;
  color: white;
  text-shadow: 0px 0px 5px white;
  padding: 0.2em 0.4em;
  background-image: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
}
body .console-history .esc-menu-contents .player-list li.is-destroyed {
  text-decoration: line-through;
  opacity: 0.7;
}
body .console-history .esc-menu-contents .player-list li:nth-child(1) {
  background-color: #7FDBFF;
}
body .console-history .esc-menu-contents .player-list li:nth-child(2) {
  background-color: #FFE129;
}
body .console-history .esc-menu-contents .player-list li:nth-child(3) {
  background-color: #FF4D5F;
}
body .console-history .esc-menu-contents .player-list li:nth-child(4) {
  background-color: #D4FE43;
}
body .console-history .esc-menu-contents .player-list li:nth-child(5) {
  background-color: #B34087;
}
body .console-history .esc-menu-contents .player-list li:nth-child(6) {
  background-color: #FF851B;
}
body .console-history .esc-menu-contents .player-list li.is-ai:before {
  content: "*";
}
body .console-history .esc-menu-contents .player-list li.is-empty {
  background: none !important;
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 5px rgb(50, 200, 0);
  opacity: 0.7;
}
body .console-history .esc-menu-contents .quit-button {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #e90d00;
  box-shadow: 0px 0px 10px #e90d00;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .console-history .esc-menu-contents .quit-button:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #FF4136;
  box-shadow: 0px 0px 10px #FF4136;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .console-history .esc-menu-contents .resume-button {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: #1f7c00;
  box-shadow: 0px 0px 10px #1f7c00;
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}
body .console-history .esc-menu-contents .resume-button:active {
  border: none;
  color: #ffa;
  text-shadow: 0px 0px 5px #ffa;
  background: rgb(50, 200, 0);
  box-shadow: 0px 0px 10px rgb(50, 200, 0);
  text-transform: uppercase;
  padding: 10px;
  border-color: transparent;
  border-radius: 2px;
}

.console-message {
  padding: 0.5em;
  margin-top: 1.4em;
  color: rgb(50, 200, 0);
}
.console-message span {
  display: inline-block;
  padding: 0.2em;
  color: currentcolor;
  border: 2px solid currentcolor;
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px currentcolor;
}
.console-message:before {
  content: attr(data-owner);
  text-transform: uppercase;
  position: absolute;
  background-color: rgb(50, 200, 0);
  color: black;
  padding: 2px;
  font-weight: bold;
  transform: translateY(-100%);
  box-shadow: 0px 0px 10px rgb(50, 200, 0), inset 0px 0px 10px rgb(50, 200, 0);
  display: inline-block;
}
.console-message.msg-owner-warning span {
  color: yellow;
  border-color: yellow;
  box-shadow: 0px 0px 10px yellow, inset 0px 0px 10px yellow;
}
.console-message.msg-owner-warning:before {
  background-color: black;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, yellow 5px, yellow 10px);
  font-weight: bold;
  box-shadow: 0px 0px 10px yellow, inset 0px 0px 10px yellow;
  text-shadow: 0px 0px 1px white, 0px -1px 1px white, -1px 0px 1px white;
}
.console-message.msg-owner-player1 span {
  color: #7FDBFF;
  border-color: #7FDBFF;
  box-shadow: 0px 0px 10px #7FDBFF, inset 0px 0px 10px #7FDBFF;
}
.console-message.msg-owner-player1:before {
  background-color: #7FDBFF;
  box-shadow: 0px 0px 10px #7FDBFF, inset 0px 0px 10px #7FDBFF;
  text-shadow: none;
}
.console-message.msg-owner-player2 span {
  color: #FFE129;
  border-color: #FFE129;
  box-shadow: 0px 0px 10px #FFE129, inset 0px 0px 10px #FFE129;
}
.console-message.msg-owner-player2:before {
  background-color: #FFE129;
  box-shadow: 0px 0px 10px #FFE129, inset 0px 0px 10px #FFE129;
  text-shadow: none;
}
.console-message.msg-owner-player3 span {
  color: #FF4D5F;
  border-color: #FF4D5F;
  box-shadow: 0px 0px 10px #FF4D5F, inset 0px 0px 10px #FF4D5F;
}
.console-message.msg-owner-player3:before {
  background-color: #FF4D5F;
  box-shadow: 0px 0px 10px #FF4D5F, inset 0px 0px 10px #FF4D5F;
  text-shadow: none;
}
.console-message.msg-owner-player4 span {
  color: #D4FE43;
  border-color: #D4FE43;
  box-shadow: 0px 0px 10px #D4FE43, inset 0px 0px 10px #D4FE43;
}
.console-message.msg-owner-player4:before {
  background-color: #D4FE43;
  box-shadow: 0px 0px 10px #D4FE43, inset 0px 0px 10px #D4FE43;
  text-shadow: none;
}
.console-message.msg-owner-player5 span {
  color: #B34087;
  border-color: #B34087;
  box-shadow: 0px 0px 10px #B34087, inset 0px 0px 10px #B34087;
}
.console-message.msg-owner-player5:before {
  background-color: #B34087;
  box-shadow: 0px 0px 10px #B34087, inset 0px 0px 10px #B34087;
  text-shadow: none;
}
.console-message.msg-owner-player6 span {
  color: #FF851B;
  border-color: #FF851B;
  box-shadow: 0px 0px 10px #FF851B, inset 0px 0px 10px #FF851B;
}
.console-message.msg-owner-player6:before {
  background-color: #FF851B;
  box-shadow: 0px 0px 10px #FF851B, inset 0px 0px 10px #FF851B;
  text-shadow: none;
}
.console-message.msg-owner-player-comm span {
  color: #0074D9;
  border-color: #0074D9;
  box-shadow: 0px 0px 10px #0074D9, inset 0px 0px 10px #0074D9;
}
.console-message.msg-owner-player-comm:before {
  background-color: #0074D9;
  box-shadow: 0px 0px 10px #0074D9, inset 0px 0px 10px #0074D9;
  text-shadow: none;
  color: white;
}
.console-message.msg-owner-enemy-comm span {
  color: #FF4136;
  border-color: #FF4136;
  box-shadow: 0px 0px 10px #FF4136, inset 0px 0px 10px #FF4136;
}
.console-message.msg-owner-enemy-comm:before {
  background-color: #FF4136;
  box-shadow: 0px 0px 10px #FF4136, inset 0px 0px 10px #FF4136;
  text-shadow: none;
  color: white;
}

.dial-container {
  position: relative;
  background: black;
  background-image: linear-gradient(black, rgb(50, 200, 0));
  background-image: conic-gradient(black 70deg, rgba(50, 200, 0, 0.9) 150deg, rgba(50, 200, 0, 0.9) 210deg, black 290deg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dial-container:before {
  /* setting mark */
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -1em;
  border: 0.5em solid rgb(50, 200, 0);
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.dial-container > input {
  position: absolute;
  visibility: hidden;
}
.dial-container .dial-self {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: black;
  position: relative;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.18, 1.15, 0.38, 1.23);
}
.dial-container .dial-self > span {
  font-family: "Inconsolata", "Monaco", monospace;
  font-size: 1em;
  color: rgb(50, 200, 0);
  text-shadow: 0px 0px 2px rgba(50, 200, 0, 0.7);
  letter-spacing: 0;
  position: absolute;
  left: 40%;
  width: 20%;
  height: 50%;
  text-align: center;
  transform-origin: center bottom;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

.collision {
  animation: collisionShake 0.02s ease 0s 20 alternate-reverse;
}

@keyframes lightChase {
  0% {
    fill: rgb(50, 200, 0);
    filter: drop-shadow(0px 0px 5px rgb(50, 200, 0));
  }
  20% {
    fill: rgb(50, 200, 0);
    filter: drop-shadow(0px 0px 5px rgb(50, 200, 0));
  }
  21% {
    fill: #0c2f00;
    filter: drop-shadow(0px 0px 5px transparent);
  }
  100% {
    fill: #0c2f00;
    filter: drop-shadow(0px 0px 5px transparent);
  }
}
@keyframes shipPulse {
  from {
    filter: saturate(1);
    opacity: 0.5;
  }
  to {
    filter: saturate(3.7);
    opacity: 1;
  }
}
@keyframes orderPulse {
  from-fill: #0c2f00;
  from-filter: drop-shadow(0px 0px 0px rgb(50, 200, 0));
  to {
    fill: rgb(50, 200, 0);
    filter: drop-shadow(0px 0px 5px rgb(50, 200, 0));
  }
}
@keyframes collisionShake {
  from {
    transform: rotate(0.2deg) translate(-8px, 4px);
    background: black;
  }
  to {
    transform: rotate(-0.2deg) translate(8px, -4px);
    background: white;
  }
}
@keyframes redAlert {
  from {
    background-position: -100% top, 200% bottom;
  }
  to {
    background-position: 200% top, -100% bottom;
  }
}
@keyframes boardShake {
  from {
    transform: scale(0.98) rotate(2deg);
  }
  to {
    transform: scale(1.02) rotate(-2deg);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
/* responsive mqs */
@media screen and (min-height: 750px) {
  body .game-board {
    min-width: 936px;
    min-height: 720px;
  }
}
@media screen and (min-height: 800px) {
  body .game-board {
    min-width: 1018px;
    min-height: 765px;
  }
}

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