/* ====== FUNDOS E LAYOUT ====== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top center, #0b1a3f 0%, #000814 80%);
  color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Container geral da tela inicial */
#telaInicial {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box;
}

/* ====== NOME DO JOGO (GRAFITE 2D ESTAMPADO) ====== */
#telaInicial h1 {
  font-size: 3rem;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00f, #90f, #0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  margin-bottom: 3rem;
  text-align: center;
}

/* Pequeno brilho animado */
@keyframes shine {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}
#telaInicial h1 {
  background-size: 200% auto;
  animation: shine 3s linear infinite;
}

/* ====== BOTÕES 3D “PENDURADOS” ====== */
#telaInicial button {
  display: block;
  width: 90%;
  margin: 1rem auto;
  padding: 15px 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: #111;
  background: #444;
  border: none;
  border-radius: 12px 24px 12px 24px;
  box-shadow: 0 8px 0 #222, inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  transition: transform 0.4s ease, background 0.4s ease;
  cursor: pointer;
}

/* Corda simulada (pseudo-elementos) */
#telaInicial button::before,
#telaInicial button::after {
  content: '';
  position: absolute;
  top: -20px;
  width: 2px;
  height: 20px;
  background: #999;
}
#telaInicial button::before { left: 20%; }
#telaInicial button::after  { right: 20%; }

/* Efeito de clique: sobe devagar */
#telaInicial button:active {
  transform: translateY(-8px);
  background: #666;
  box-shadow: 0 4px 0 #222, inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ====== ESTILOS POR BOTÃO (cores distintas) ====== */
/* Começar */
#telaInicial button:nth-of-type(1) {
  background: linear-gradient(to bottom, #1a73e8, #174ea6);
}
#telaInicial button:nth-of-type(1):active {
  background: linear-gradient(to bottom, #4e8bef, #2663cb);
}

/* Perfil */
#telaInicial button:nth-of-type(2) {
  background: linear-gradient(to bottom, #34a853, #0f8f3c);
}
#telaInicial button:nth-of-type(2):active {
  background: linear-gradient(to bottom, #5bcf7a, #1fa14f);
}

/* Configurações */
#telaInicial button:nth-of-type(3) {
  background: linear-gradient(to bottom, #fbbc05, #c99b04);
}
#telaInicial button:nth-of-type(3):active {
  background: linear-gradient(to bottom, #ffe57f, #e6b700);
}

/* Sobre */
#telaInicial button:nth-of-type(4) {
  background: linear-gradient(to bottom, #ea4335, #b32b20);
}
#telaInicial button:nth-of-type(4):active {
  background: linear-gradient(to bottom, #ff6d5b, #d44b3a);
}