@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* Evita barras de rolagem */
  font-family: "Pixelify Sans", sans-serif;
}
:root {
  --main-bg-color: #6610f2;
}
#mode_togle {
  border-color: var(--main-bg-color);
  color: var(--main-bg-color);
}

.header-absolute {
  position: absolute;
  z-index: 100;
  color: gray;
  width: 100%;
}
.header__info {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.header__info-title {
  color: var(--main-bg-color);
  font-size: 33px;
}
.header__info-title-icon {
  color: #08ad7c;
  -webkit-filter: drop-shadow(1px 1px 1px #686868);
  filter: drop-shadow(1px 1px 1px #686868);
}
.header__info-desc {
  font-size: 12px;
}

.footer-absolute {
  position: absolute;
  z-index: 100;
  bottom: 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-size: 10px;
  color: gray;
  width: 100%;
}

.footer__heart {
  color: red;
  font-size: 12px;
  -webkit-filter: drop-shadow(1px 1px 1px #686868);
  filter: drop-shadow(1px 1px 1px #686868);
}
#game-area {
  width: 100vw; /* 100% da largura da janela */
  height: 100vh; /* 100% da altura da janela */
  position: relative;
  background-color: #f0f0f0;
}

#carrinho {
  width: 50px;
  position: absolute;
  transition: left 0.1s, top 0.1s; /* Transição suave de movimento */
  z-index: 5;
}
.pneu {
  width: 20px; /* Largura padrão */
  height: 9px; /* Altura padrão */
  position: absolute;
  opacity: 0.6; /* Transparência leve */
  z-index: 1;
}

.pneu-cima {
  border-left: 2px solid;
  border-right: 2px solid;
}

.pneu-baixo {
  border-left: 2px solid;
  border-right: 2px solid;
}

.pneu-esquerda {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.pneu-direita {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.pneu-direita-cima {
  border-left: 2px solid;
  border-right: 2px solid;
  border-radius: 0px;
  transform: rotate(46deg);
}

.pneu-esquerda-cima {
  border-left: 2px solid;
  border-right: 2px solid;
  border-radius: 0px;
  transform: rotate(-46deg);
}

.pneu-direita-baixo {
  border-left: 2px solid;
  border-right: 2px solid;
  border-radius: 0px;
  transform: rotate(-46deg);
}

.pneu-esquerda-baixo {
  border-left: 2px solid;
  border-right: 2px solid;
  border-radius: 0px;
  transform: rotate(46deg);
}

.pneu_branco {
  border-color: #ffffff6e;
}

.pneu_preto {
  border-color: #000;
}

.bg-black {
  background-color: black; /* Cor de fundo preta */
}

.bg-white {
  background-color: #f0f0f0;
}