* {
  box-sizing: border-box;
  font-family: Arial;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #1b1411;
  color: #f1e6cf;
  padding-bottom: 70px;
}

h1 {
  font-family: "Cinzel", serif;
  text-align: center;
}

/* ================= HEADER ================= */
.header-rpg {
  position: sticky;
  top: 20;
  background: transparent !important;
  padding: 50px 0 20px 0; /* aumentei aqui */
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================= TÍTULO ================= */
.header-rpg {
  position: relative;
  background: #1b1411;
  padding: 30px 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.titulo-rpg {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-top: 100px; /* cria espaço pra espada ficar em cima */
  text-align: center;
}

.titulo-rpg span {
  position: relative;
  z-index: 10;
  display: inline-block;

  font-family: "Cinzel Decorative", serif;

  font-weight: 700;

  font-size: 38px;

  letter-spacing: 0px;

  color: #f8f1df;

  text-shadow:
    0 0 8px rgba(255,140,0,0.8),
    0 0 18px rgba(255,80,0,0.7),
    0 0 40px rgba(255,40,0,0.45),
    0 2px 8px rgba(0,0,0,0.9);

    -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.85);
}

@keyframes fogoTexto {
  0% {
    filter: brightness(1);
    transform: translateY(0px);
  }
  50% {
    filter: brightness(1.15);
    transform: translateY(-1px);
  }
  100% {
    filter: brightness(1);
    transform: translateY(0px);
  }
}

.titulo-rpg span {
  animation: fogoTexto 2.5s ease-in-out infinite;
}

.espada-titulo {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  filter:
  drop-shadow(0 0 12px rgba(255,120,0,0.4));
  left: 50%;

  width: 500px;

  top: -169px;

  transform: translateX(-55%);

  transform-origin: top center; /* 🔥 ISSO RESOLVE */
}

/* texto na frente */
.header-rpg {
  position: relative;
  text-align: center;
  padding-top: 40px; /* pode ajustar leve se quiser */
  overflow: visible !important;
}

/* TEXTO */
.titulo-rpg span {
  background: linear-gradient(
    to bottom,
    #fff3c4 0%,
    #ffcc70 20%,
    #ff7a00 50%,
    #ff3c00 80%,
    #7a1a00 100%
  );

  -webkit-background-clip: text;
  color: transparent;
}

.espada-titulo {
  filter: drop-shadow(0 0 8px orange);
}

@keyframes brilhoFogo {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 120, 0, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 80, 0, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 120, 0, 0.4));
  }
}

.espada-titulo {
  animation: brilhoFogo 2s infinite ease-in-out;
}

/* ================= CONTAINER ================= */
.container {
  max-width: 500px;
  margin: auto;
  padding: 10px;
}

/* ================= INPUTS ================= */
input,
textarea {
  width: 100%;
  padding: 8px;
  margin: 5px 0;
  border-radius: 8px;
  border: none;
  background: #4a3b31;
  color: #f1e6cf;
}

textarea {
  resize: vertical;
  min-height: 80px;
}