.App {
  display: grid;
  place-content: center;
  height: 100%;
  font-family: Poppins;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: #0000;
  color: var(--blueish);
  background: #002242;
}
.splash {
  grid-area: 1/1;
  place-self: center;
  display: grid;
  place-content: center;
  width: 100vw;
  height: 100vh;
}
.content {
  grid-area: 1/1;
  place-self: center;
  display: grid;
}
.title {
  font-family: Onacona;
  font-size: 64px;
  filter: drop-shadow(0 5px 5px #000000);
  display: grid;
  grid-auto-flow: column;
}
.neon {
  animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  to {
    text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff,
      0 0 38px var(--pink), 0 0 73px var(--pink), 0 0 80px var(--pink);
  }
  20%,
  24%,
  55% {
    text-shadow: none;
  }
}
.page {
  grid-area: 1/1;
  display: grid;
}
.start-page {
  place-content: center;
  justify-items: center;
}
.game-page {
  padding: 4%;
  grid: auto auto 1fr auto / auto;
}
.option-icon {
  font-family: Onacona;
  font-size: 70px;
  color: #24adf4;
  filter: drop-shadow(0 5px 5px #000000);
  display: grid;
  padding: 20px;
  cursor: pointer;
  width: 120px;
}
.option-icon:hover {
  filter: drop-shadow(0 0 20px #ffffffa0);
}
.help {
  grid-area: 1/1;
  height: 100%;
  place-self: center;
  box-sizing: border-box;
  padding: 40px 0 0 35px;
  text-shadow: 2px 2px 2px black;
  overflow: hidden;
  font-size: 17px;
}
.help-content {
  display: grid;
  gap: 15px;
  height: 720px;
}
.help-item {
  display: grid;
  grid: auto / auto auto 1fr;
  grid-auto-flow: column;
  gap: 10px;
  width: 90%;
}
.help-ob {
  grid-area: 1/1/1 / span 3;
}
.bullet {
  font-size: 12px;
  margin-top: 4px;
}
.overlay {
  grid-area: 1 / 1;
  grid: 760px auto / auto;
  place-self: center;
  z-index: 2;
  display: grid;
  opacity: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.toolbar {
  grid-area: 4/1;
  display: grid;
  grid-auto-flow: column;
  gap: 15px;
  place-self: end center;
  place-content: center;
  align-items: center;
}
.tool-button {
  filter: drop-shadow(0 5px 5px #000000);
  cursor: pointer;
  box-sizing: border-box;
}
.tool-button:hover {
  filter: drop-shadow(0 0 10px #ffffffa0);
}
.keybaord-and-prompts {
  display: grid;
  place-items: center;
  grid-area: 4/1;
}
.keyboard {
  display: grid;
  grid-area: 1/1;
  justify-items: center;
  font-family: Roboto;
  font-weight: 700;
  place-content: center;
  gap: 8px;
  color: #fff;
  text-shadow: 1px 1px 1px black;
}
.kb-row {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 4.44px;
}
.kb-button {
  display: grid;
  place-content: center;
  place-items: center;
  width: 36px;
  height: 56px;
  font-size: 20px;
  background: #ffffff40;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 1px 1px 1px #000;
}
.kb-button:hover {
  background: #00000060;
}
.kb-backspace {
  width: 60px;
}
.kb-return {
  width: 100px;
  font-size: 16px;
}
.kb-black {
  display: grid;
  grid-area: 1/1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #000;
  margin-top: -1px;
}
.prompts {
  grid-area: 1/1;
}
.prompt-panel {
  grid-area: 1/1;
  z-index: 3;
  place-self: center;
  margin-top: -66px;
  pointer-events: none;
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  opacity: 0;
}
.prompt-button,
.prompt-button-mobile {
  height: 48px;
  border-radius: 24px;
  padding: 0 20px;
  display: grid;
  place-content: center;
  color: #fff;
  background: -webkit-linear-gradient(-90deg, #fff -400%, #000000c0 100%);
  font-size: 18px;
  box-sizing: border-box;
  text-shadow: 2px 2px 2px black;
  border: 1px solid white;
  filter: drop-shadow(0 5px 5px #000000);
}
.prompt-button:hover {
  background: -webkit-linear-gradient(-90deg, #fff -400%, #000000c0 70%);
}
.player-panel {
  display: grid;
  grid-auto-flow: column;
  grid: auto / auto 1fr auto 1fr auto;
  align-items: center;
}
.player {
  grid-area: 1/1;
  filter: drop-shadow(0 5px 5px #000000);
}
.player:hover {
  filter: drop-shadow(0 0 20px #ffffffa0);
}
.score-panel {
  display: grid;
  place-items: center;
}
.battery {
  grid-area: 1/1;
  display: grid;
  align-items: center;
  filter: drop-shadow(0 5px 5px #000000);
}
.charge {
  grid-area: 1/1;
  margin-left: 5px;
}
.score {
  grid-area: 1/1;
  place-self: center;
  font-family: Radhiumz;
  font-size: 21px;
  z-index: 1;
  mix-blend-mode: luminosity;
}
.negative-score {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}
.points-to-win {
  grid-area: 1/3;
  place-self: center;
  display: grid;
  justify-items: center;
  font-family: Onacona;
  font-size: 42px;
  color: #b8af8f;
  margin: 0 8px;
}
.gradient-gold {
  background: -webkit-linear-gradient(-90deg, #ede2c5, #b6a678 50%);
}
.gradient-green {
  background: -webkit-linear-gradient(-90deg, #56bf8b60, #56bf8b 50%);
}
.gradient-pink {
  background: -webkit-linear-gradient(-90deg, #f77486, #f77486b0 50%);
}
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.need-to-win {
  font-family: Poppins;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 2px 2px black;
  margin-top: -4px;
}
.instruction-board {
  grid-area: 3/1;
  display: grid;
  place-content: center;
  font-size: 16px;
}
.message {
  grid-area: 1/1;
  place-self: center;
  text-shadow: 1px 1px 1px black;
}
.board {
  display: grid;
  font-family: Roboto Condensed;
  align-content: start;
  gap: 3px;
  border: 2px solid #2c3950;
  margin-top: 10px;
  padding: 13px 20px 13px 15px;
  box-sizing: border-box;
  background: #00000020;
  height: 380px;
  color: var(--off-white);
}
.entry {
  justify-self: start;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  font-size: 20px;
}
.input-backdrop,
.define {
  background: #00000090;
  height: 100%;
  transform: scale(1.05);
}
.define {
  background: #0000;
}
.define:hover {
  background: #00000030;
}
.gain {
  display: grid;
  width: 55px;
  justify-content: end;
}
.tile {
  display: grid;
  box-sizing: border-box;
  place-content: center;
  place-items: center;
  pointer-events: none;
  font-size: 24px;
  text-shadow: 1px 1px 1px black;
  border: solid #0000;
  border-width: 0 0 1px 0;
}
.settings {
  grid-area: 1/1;
  padding: 0 45px;
  place-self: center;
  display: grid;
  place-items: start;
  gap: 15px;
  filter: drop-shadow(0 5px 5px #00000040);
  margin-top: 20px;
}
.settings-headers {
  font-size: 20px;
  opacity: 0.8;
}
.sub-settings {
  font-family: Onacona;
  font-size: 28px;
  display: grid;
  grid-auto-flow: column;
  gap: 30px;
  margin-left: 50px;
  align-items: center;
}
.settings-divider {
  height: 20px;
}
.dummy {
  opacity: 0.01;
  pointer-events: none;
  position: absolute;
}
.ro-settings {
  grid-area: 1/1;
  place-self: end center;
  color: #78a6b6;
  color: #ffe4ad;
}
.electric,
.electric-draw,
.electric-won,
.electric-lost {
  grid-area: 2/1;
  display: grid;
  border-radius: 3px;
  outline: none;
  pointer-events: none;
}
.electric-draw {
  box-shadow: inset 0 0 10px var(--blueish), 0 0 15px var(--blueish);
  border: 2px solid var(--blueish);
}
.electric-won {
  box-shadow: inset 0 0 10px var(--lime), 0 0 15px var(--lime);
  border: 2px solid var(--lime);
}
.electric-lost {
  box-shadow: inset 0 0 10px var(--hot-pink), 0 0 15px var(--hot-pink);
  border: 2px solid var(--hot-pink);
}
:root {
  --app-color: #002242;
  --off-white: #ffffffb8;
  --blueish: #d9e2ffd8;
  --pink: #f77486;
  --hot-pink: #e95241;
  --lime: #85bc3c;
}
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--app-color);
}
.body,
.wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.body {
  z-index: 1;
}
.wrapper {
  z-index: 2;
}
@font-face {
  font-family: Roboto;
  src: url(Roboto-Regular-dtmZfjQC.ttf);
}
@font-face {
  font-family: Roboto Condensed;
  src: url(RobotoCondensed-Medium-mjc01WTr.ttf);
}
@font-face {
  font-family: Poppins;
  src: url(Poppins-Regular-kyjX1fT0.ttf);
}
@font-face {
  font-family: Onacona;
  src: url(Onacona-YIBdwOaw.ttf);
}
@font-face {
  font-family: Radhiumz;
  src: url(NcsRadhiumz-8DkzM1W3.ttf);
}
.root-scroll {
  display: grid;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.root-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.root-scroll::-webkit-scrollbar-thumb:hover {
  background: #fff5;
}
.root-scroll::-webkit-scrollbar-thumb {
  background: #fff4;
  border-radius: 10px;
}
.root-scroll::-webkit-scrollbar-track:hover {
  background: #ffffff05;
}
.root-scroll-mobile::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
.root-scroll-mobile::-webkit-scrollbar-thumb {
  border-radius: 1px;
}