:root {
      --bg-principal: #161A2B;
      --bg-secundario: #23283E;
      --bg-vermelho: #9e3244;
      --bg-roxo: #3b408f;
      --text-principal: #E4E6EB;
      --text-secundario: #8A91A6;

      --verde-menta: #74EBAF;
      --roxo-vibrante: #B030FF;
      --azul-controle: #5E64FF;

      --azul-controle-hover: #4B54D8;
      --roxo-vibrante-hover: #9A27E0;

      --vermelho: #FF4B6A;
      --amarelo: #FFD166;


      --vida: #74ebb08f;
      --foco: #5166c3fd;
      --energia: #ffd16684;
      --xp: #b030ff7e;
      --custo: #5e63ff8c;
      --corCusto: #b3d3ff;
  }


  html,
  body {
      margin: 0;
      min-height: 100%;
  }



  body {
      background-color: var(--bg-principal);
      color: var(--text-principal);
      font-family: 'Poppins', serif;
      margin: 0;
      padding: 0;
  }

  header {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      background-color: var(--bg-secundario);
      height: 15dvh;
      min-height: 100px;
  }

  main {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      height: 85dvh;
  }

  #container_info {
      display: flex;
      flex-direction: column;
      gap: 2dvh;
      margin-left: 5dvw;
  }

  #dias_passados {
      display: flex;
      align-items: center;
      height: 5dvh;
      width: 30dvw;
      gap: 5px;
  }

  #level {
      display: flex;
      align-items: center;
      height: 5dvh;
      gap: 5px;

  }

  #container_status {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 1.5dvw;
      margin-right: 5dvw;
  }

  .bloco_status {
      width: 12dvw;
      min-width: 150px;
  }

  .bloco_status div {
      display: flex;
      align-items: center;
      justify-content: center;

  }

  .bloco_status div p {
      margin-left: 4px;


  }

  .bloco_status .barra_status {
      width: 100%;
      height: 12px;
      margin-top: 6px;
      display: flex;
      justify-content: flex-start;
      background-color: #101322;
      border: 1px solid rgba(228, 230, 235, 0.15);
  }

  .bloco_status .preenchimento_status {
      height: 100%;
      display: block;
      border-radius: 5px;
  }

  #barra_vida_preenchimento {
      background: #ff4b6a;
  }

  #barra_foco_preenchimento {
      background: #5e64ff;
  }

  #barra_energia_preenchimento {
      background: #ffd166;
  }

  .icons {
      filter: invert(1);
      margin-right: 0.6dvw;
      width: 22px;
      height: 22px;
  }

  #container_player {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 85dvh;
      width: 35dvw;
  }

  #titulo_personagem {
      display: flex;
      flex-direction: column;
      text-align: center;
      height: 30dvh;
      width: 15dvw;
      color: var(--text-secundario);
  }

  #titulo_personagem p {
      margin: 7px;
  }

  #titulo_personagem h2 {
      font-size: 1.5em;
      border-radius: 20px;
      padding: 10px;
      border: 2px solid var(--text-secundario);
  }

  #container_progresso {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      color: var(--text-principal);

  }

  #barra_progresso {
      width: 0%;
      height: 100%;
      background: linear-gradient(to right, #4bd89c, var(--verde-menta));
      border-radius: 0;
      box-shadow: 0 0 10px rgba(116, 235, 175, 0.45);
      transition: width 240ms ease;
  }

  #progresso {
      width: 15dvw;
      min-width: 170px;
      height: 14px;
      background-color: #101322;
      position: relative;
      border-radius: 2px;
      border: 1px solid rgba(228, 230, 235, 0.15);
      overflow: hidden;
  }

  #personagem {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60dvh;
      margin-top: 1dvh;
  }

  #personagem_foto {
      width: 13dvw;
      height: auto;
  }

  #container_opcoes {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 2dvh;
      height: 85dvh;
      width: 65dvw;
      background: linear-gradient(to top, var(--bg-secundario), var(--bg-principal));
  }

  .button_opcoes {
      background: none;
      border: none;
      width: 18dvw;
      min-width: 25%;
      height: 100%;
      cursor: pointer;
      margin: 0;
      padding: 0;

  }

  @keyframes OpcaoSelecionado {
      0% {
          transform: translateY(-0);
      }

      100% {
          transform: translateY(-200%) rotate(-10deg) scale(0.93);

      }

  }

  .container_opcoes_escolha {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      border-radius: 20px;
      padding-top: 100px;
      background: linear-gradient(to bottom, var(--bg-principal), var(--bg-roxo), var(--bg-principal));
      border: 1px solid var(--roxo-vibrante);
      box-shadow: var(--roxo-vibrante) 0px 0px 5px;
      position: relative;
      height: 40dvh;

  }

  .container_opcoes_escolha_ruim {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      min-width: 100%;
      border-radius: 20px;
      padding-top: 100px;
      background: linear-gradient(to bottom, var(--bg-secundario), var(--bg-vermelho), var(--bg-secundario));
      border: 1px solid var(--vermelho);
      box-shadow: var(--vermelho) 0px 0px 5px;
      position: relative;
      height: 40dvh;

  }

  .container_opcoes_escolha:hover {
      transition: transform 0.3s ease;
      transform:
          translateY(-25px) rotate(-10deg) scale(0.93);
  }

  .container_opcoes_escolha_ruim:hover {
      transition: transform 0.3s ease;
      transform:
          translateY(-25px) rotate(-10deg) scale(0.93);
  }

  #container_total_opcoes {
      display: flex;
      justify-content: center;
      flex-direction: row;
      gap: 2dvw;
      height: 60dvh;
      width: 100%;

  }

  .icons_opcao {
      width: 44px;
      height: 44px;
      margin-bottom: 1dvh;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: linear-gradient(to top, #101838, #5162a7);
      position: absolute;
      top: 5%;
      left: 5%;
  }

  .icons_opcao_ruim {
      width: 44px;
      height: 44px;
      margin-bottom: 1dvh;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: linear-gradient(to top, #381010, #a75151);
      position: absolute;
      top: 5%;
      left: 5%;
  }

  .icons_opcao img,
  .icons_opcao_ruim img {
      width: 100%;
      height: 100%;
  }

  .fundo_opcao {
      position: absolute;
      top: 2%;
      right: 3%;

  }

  .fundo_opcao img {
      width: 6.5dvw;
      height: auto;
      opacity: 0.1;
  }

  .titulo_opcao {
      font-size: 1.2em;
      margin-bottom: 0;
      color: var(--text-principal);
  }

  .descricao_opcao {
      font-size: 1.0em;
      color: var(--text-secundario);
  }

  .beneficios_opcoes {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 0.9em;
  }

  .beneficios_opcoes p {
      color: var(--text-principal);
      padding: 12px 18px;
      border-radius: 5px;
      margin: 8px;
      font-size: 17px;
      font-weight: bold;
  }

  .beneficio_vida {
      background-color: var(--vida);
  }

  .beneficio_energia {
      background-color: var(--energia);
  }

  .beneficio_foco {
      background-color: var(--foco);
  }

  .beneficio_xp {
      background-color: var(--xp);
  }

  .custo_opcao {
      display: flex;
      align-items: flex-end;
      height: 100%;
      gap: 5px;
      font-size: 0.9em;
      color: var(--text-secundario);
  }

  .custo {
      padding: 10px 10px;
      font-size: 18px;
  }

  .div_custo_valor {
      display: flex;
      align-items: center;
      padding: 15px 10px;
      font-size: 15px;
      border-radius: 5px;
      font-weight: bold;
      color: var(--corCusto);
      background-color: var(--custo);
  }

  #modal_game_over {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      background: rgba(5, 8, 18, 0.82);
      justify-content: center;
      backdrop-filter: blur(4px);
      z-index: 9999;
      padding: 20px;
  }

  #container_game_over {
      width: 30dvw;
      height: 25dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 18px;
      border: 1px solid var(--roxo-vibrante);
      box-shadow: 0 0 5px var(--roxo-vibrante);
      background: linear-gradient(to top, var(--roxo-vibrante), var(--bg-principal), var(--bg-principal), var(--bg-principal), var(--bg-principal));
      padding: 28px 24px;
      text-align: center;
      animation: modalGameOverEntrada 0.35s ease;
  }

  #container_game_over h1 {
      margin: 0;
      color: var(--roxo-vibrante);
  }

  #game_over_motivo {
      margin: 14px 0 22px;
      color: var(--text-principal);
      font-size: 1rem;
  }

  #container_game_over button {
      border: none;
      border-radius: 10px;
      padding: 12px 22px;
      font-size: 1.2em;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(to bottom, var(--azul-controle), var(--azul-controle-hover));
  }

  #container_game_over button:hover {
      transition: 500ms;
      transform: scale(1.15) rotate(-3deg);
      background: linear-gradient(to bottom, var(--azul-controle-hover), var(--azul-controle));
  }

  @keyframes modalGameOverEntrada {
      from {
          opacity: 0;
          transform: translateY(14px) scale(0.96);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
  }

  #modal_vitoria {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      background: rgba(5, 8, 18, 0.82);
      justify-content: center;
      backdrop-filter: blur(4px);
      z-index: 9999;
      padding: 20px;
  }

  #container_vitoria {
      width: 30dvw;
      height: 25dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 18px;
      border: 1px solid var(--roxo-vibrante);
      box-shadow: 0 0 5px var(--roxo-vibrante);
      background: linear-gradient(to top, var(--roxo-vibrante), var(--bg-principal), var(--bg-principal), var(--bg-principal), var(--bg-principal));
      padding: 28px 24px;
      text-align: center;
      animation: modalVitoriaEntrada 0.35s ease;
  }

  #container_vitoria h1 {
      margin: 0;
      color: var(--roxo-vibrante);
  }

  #vitoria_motivo {
      margin: 14px 0 22px;
      color: var(--text-principal);
      font-size: 1rem;
  }

  #container_vitoria button {
      border: none;
      border-radius: 10px;
      padding: 12px 22px;
      font-size: 1.2em;
      font-weight: 700;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(to bottom, var(--azul-controle), var(--azul-controle-hover));
  }

  #container_vitoria button:hover {
      transition: 500ms;
      transform: scale(1.15) rotate(-3deg);
      background: linear-gradient(to bottom, var(--azul-controle-hover), var(--azul-controle));
  }

  @keyframes modalVitoriaEntrada {
      from {
          opacity: 0;
          transform: translateY(14px) scale(0.96);
      }

      to {
          opacity: 1;
          transform: translateY(0) scale(1);
      }

  }