/* ========================================================================== */
/* ========================================================================== */
/*  ORGANIZAÇÃO FINAL — FICHA ÍGNEA / GRIMÓRIO ÍGNEO                           */
/*  Cola este arquivo como style.css.                                           */
/*  Esta seção fica no final para sobrescrever duplicatas antigas sem quebrar.  */
/* ========================================================================== */
/* ========================================================================== */

/* ========================= 00. VARIÁVEIS GERAIS ========================= */
:root {
  --ignea-bg: #1b1411;
  --ignea-bg-deep: #120c0a;
  --ignea-card: #2c221d;
  --ignea-card-soft: #4a3b31;
  --ignea-gold: #d8b56a;
  --ignea-gold-soft: #cdb791;
  --ignea-text: #f8f1df;

  --grim-bg: #070606;
  --grim-bg-2: #120d0d;
  --grim-panel: rgba(28, 22, 21, 0.88);
  --grim-panel-2: rgba(12, 10, 10, 0.96);
  --grim-red: #b83a2f;
  --grim-red-bright: #d64a3b;
  --grim-red-dark: #4b0d0b;
  --grim-gold: #d0b06d;
  --grim-muted: #a8937d;
  --grim-text: #f0dfcb;
  --grim-line: rgba(185, 58, 47, 0.24);
}

/* ========================= 01. BASE / CAMADAS ========================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--ignea-bg);
  color: var(--ignea-text);
  padding-bottom: 72px;
}

.container {
  max-width: 500px;
  margin: auto;
  padding: 10px;
}

.header-rpg,
.container,
#loginBox,
#tela-modo,
#masterIgnea,
#tela-inicial,
#ficha {
  position: relative;
  z-index: 1;
}

/* ========================= 02. FUNDO DA FICHA / FOLHAS ========================= */
.folhas-bg {
  position: fixed;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background-image: url("../folhas-textura.png");
  background-repeat: repeat;
  background-size: 320px auto;

  opacity: 0.18;

  animation: folhasCaindo 28s linear infinite;
}


.folhas-bg::before,
.folhas-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/folhas-bg.png");
  background-repeat: repeat;
  pointer-events: none;
}

.folhas-bg::before {
  background-size: 520px auto;
  opacity: 0.015;
  animation: folhasFicha1 65s linear infinite;
}

.folhas-bg::after {
  background-size: 760px auto;
  opacity: 0.01;
  animation: folhasFicha2 140s linear infinite;
}

@keyframes folhasFicha1 {
  from { background-position: 0 0; }
  to { background-position: -520px 260px; }
}

@keyframes folhasFicha2 {
  from { background-position: 0 300px; }
  to { background-position: -760px 620px; }
}

/* ========================= 03. TOPO / LOGO FICHA ÍGNEA ========================= */
.header-rpg {
  position: relative;
  background: transparent !important;
  padding: 30px 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: visible !important;
}

.titulo-rpg {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-top: 100px;
  text-align: center;
}

.espada-titulo {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  left: 50%;
  width: 500px;
  top: -169px;
  transform: translateX(-55%);
  transform-origin: top center;
  filter: drop-shadow(0 0 8px rgba(255, 120, 0, 0.65));
  animation: brilhoFogo 2s infinite ease-in-out;
}

.titulo-rpg span {
  position: relative;
  z-index: 10;
  display: inline-block;
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0;
  background: linear-gradient(
    to bottom,
    #fff3c4 0%,
    #ffcc70 20%,
    #ff7a00 50%,
    #ff3c00 80%,
    #7a1a00 100%
  );
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.85);
  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);
  animation: fogoTexto 2.5s ease-in-out infinite;
}

/* ========================= 04. TELA INICIAL / PERSONAGENS ========================= */
#tela-inicial h2,
.titulo-secao {
  font-family: "Cinzel", serif;
  text-align: center;
  color: var(--ignea-gold);
  letter-spacing: 2px;
}

.grid-personagens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card,
.add {
  background-color: rgba(19, 12, 9, 0.76);
  border: 1px solid rgba(216, 181, 106, 0.14);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.btn-acao-ficha,
.voltar,
.btn-voltar-modos {
  background: linear-gradient(180deg, rgba(56, 52, 47, 0.95), rgba(34, 31, 28, 0.95));
  color: var(--ignea-text);
  border: 1px solid rgba(216, 181, 106, 0.25);
  border-radius: 12px;
}

/* ========================= 05. FICHA DO PERSONAGEM ========================= */
.personagem-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.personagem-campos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.personagem-campos input,
.personagem-campos textarea,
#ficha input,
#ficha textarea,
#ficha select {
  background: rgba(74, 59, 49, 0.92);
  color: var(--ignea-text);
  border: 1px solid rgba(216, 181, 106, 0.13);
  border-radius: 10px;
}

.personagem-imagem-box {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#preview {
  width: 130px;
  height: 170px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--ignea-card-soft);
  border: 1px solid rgba(216, 181, 106, 0.35);
}

/* ========================= 06. ESCOLHA DE MODO ========================= */
.tela-modo-img {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.area-click {
  position: absolute;
  top: 0;
  bottom: 90px;
  width: 50%;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.area-jornada { left: 0; }
.area-grimorio { right: 0; }

.btn-sair-img {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: auto;
  background: rgba(60, 18, 14, 0.75);
  color: var(--ignea-text);
  border: 1px solid rgba(216, 181, 106, 0.25);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: bold;
}

/* ========================================================================== */
/* ========================= 07. GRIMÓRIO — BASE ========================= */
/* ========================================================================== */
#masterIgnea {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 14px 12px 96px !important;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--grim-text) !important;
  background:
    radial-gradient(circle at top right, rgba(130, 25, 20, 0.14), transparent 28%),
    radial-gradient(circle at bottom left, rgba(120, 20, 15, 0.10), transparent 34%),
    linear-gradient(180deg, var(--grim-bg) 0%, var(--grim-bg-2) 52%, #050505 100%) !important;
}

#masterIgnea::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background:
    radial-gradient(circle at 20% 20%, rgba(170, 40, 30, 0.08), transparent 24%),
    radial-gradient(circle at 80% 70%, rgba(170, 40, 30, 0.06), transparent 28%);
}

#masterIgnea > *:not(.simbolos-bg) {
  position: relative;
  z-index: 2;
}

#masterIgnea .master-header {
  display: none !important;
}

#masterIgnea .master-aba,
#masterIgnea .master-page {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ========================= 08. GRIMÓRIO — FUNDO DE SÍMBOLOS ========================= */
.simbolos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.simbolos-bg::before {
  content: "";
  position: absolute;
  inset: -200px;
  background-image: url("img/simbolos-bg.png");
  background-repeat: repeat;
  background-size: 430px auto;
  opacity: 0.22;
  animation: simbolosGrimorioFinal 45s linear infinite;
}

@keyframes simbolosGrimorioFinal {
  from { background-position: 0 0; }
  to { background-position: -430px 320px; }
}

/* ========================= 09. GRIMÓRIO — LOGO / TÍTULO ========================= */
.grimorio-header {
  text-align: center;
  margin: 10px 0 20px;
}

.grimorio-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-grimorio-nova {
  width: 200px;
  height: auto;
  margin: 0 auto 8px;
  filter:
    drop-shadow(0 0 14px rgba(180, 0, 0, 0.35))
    drop-shadow(0 0 28px rgba(0, 0, 0, 0.8));
}

.grimorio-texto-logo {
  text-transform: uppercase;
  line-height: 0.9;
}

.grimorio-branco,
.grimorio-vermelho {
  font-family: "Cinzel Decorative", serif;
}

.grimorio-branco {
  display: block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f4efe3;
  text-shadow: 0 2px 4px #000;
}

.igneo-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
}

.grimorio-vermelho {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 5px;
  padding-left: 5px;
  color: #c21f1f;
  text-shadow:
    0 2px 4px #000,
    0 0 10px rgba(180, 0, 0, 0.5);
}

.linha-ornamento {
  width: 58px;
  height: 1px;
  background: linear-gradient(to right, transparent, #b91c1c, #b91c1c, transparent);
  position: relative;
}

.linha-ornamento::after {
  content: "◆";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  color: #b91c1c;
  font-size: 10px;
}

.grimorio-linha {
  width: 210px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(to right, transparent, rgba(200, 80, 30, 0.5), transparent);
}

.master-desc {
  color: var(--grim-muted) !important;
  text-align: center;
}

/* ========================= 10. GRIMÓRIO — NAV INFERIOR ========================= */
#masterIgnea .master-tabs {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 100%);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(28, 18, 16, 0.96), rgba(10, 7, 7, 0.98));
  border-top: 1px solid rgba(180, 40, 30, 0.35);
  box-shadow:
    0 -8px 22px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 9999;
}

#masterIgnea .master-tab-btn {
  flex: 1;
  height: 48px;
  border: 1px solid rgba(160, 60, 45, 0.22) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(35, 24, 21, 0.9), rgba(15, 10, 9, 0.95)) !important;
  color: #bfa98a !important;
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transition: 0.22s ease;
}

#masterIgnea .master-tab-btn.active {
  color: #fff0d2 !important;
  background:
    radial-gradient(circle at top, rgba(220, 50, 35, 0.45), transparent 60%),
    linear-gradient(180deg, #8f1d17, #3a0b09) !important;
  border-color: rgba(255, 110, 80, 0.45) !important;
  box-shadow:
    0 0 14px rgba(180, 30, 20, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ========================= 11. GRIMÓRIO — FORMULÁRIOS / PAINÉIS ========================= */
#masterIgnea .master-form-box,
#masterIgnea .combate-card,
#masterIgnea .monstro-card,
#masterIgnea .sheet-bloco,
#masterIgnea .modal-bloco,
#masterIgnea .master-modal-content {
  position: relative;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top, rgba(120, 30, 25, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(35, 25, 23, 0.92), rgba(14, 10, 9, 0.96)) !important;
  border: 1px solid rgba(160, 55, 45, 0.26) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overflow: hidden;
}

#masterIgnea .master-form-box {
  padding: 18px !important;
  margin-bottom: 90px !important;
}

#masterIgnea .master-form-box h3,
#masterIgnea #tituloFormMonstro,
#masterIgnea .titulo-secao {
  margin: 4px 0 18px;
  font-family: "Cinzel Decorative", serif !important;
  font-size: clamp(27px, 10vw, 46px) !important;
  letter-spacing: 2px;
  color: var(--grim-red-bright) !important;
  text-align: center;
  text-shadow:
    0 0 10px rgba(190, 35, 25, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.9);
}

#masterIgnea .master-form-box h4,
#masterIgnea .subtitulo-secao {
  font-family: "Cinzel", serif !important;
  color: var(--grim-gold) !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

#masterIgnea input,
#masterIgnea textarea,
#masterIgnea select,
#masterIgnea .compendio-controles input,
#masterIgnea .compendio-controles select {
  background:
    linear-gradient(180deg, rgba(16, 12, 11, 0.96), rgba(8, 6, 6, 0.98)) !important;
  border: 1px solid rgba(140, 45, 35, 0.35) !important;
  border-radius: 14px !important;
  color: var(--grim-text) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

#masterIgnea input::placeholder,
#masterIgnea textarea::placeholder {
  color: rgba(210, 190, 160, 0.48) !important;
}

/* ========================= 12. GRIMÓRIO — STATUS / COMBATE ========================= */
#masterIgnea .status-monstro-box,
#masterIgnea .combate-status-box,
#masterIgnea .status-box {
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top, rgba(190, 60, 45, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(38, 30, 27, 0.95), rgba(18, 13, 12, 0.98)) !important;
  border: 1px solid rgba(170, 65, 50, 0.28) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#masterIgnea .status-monstro-box span,
#masterIgnea .combate-status-box span,
#masterIgnea .status-box span {
  font-family: "Cinzel", serif;
  color: var(--grim-gold) !important;
  letter-spacing: 1px;
}

#masterIgnea .status-monstro-box input {
  background: rgba(5, 4, 4, 0.85) !important;
  border: 1px solid rgba(170, 55, 45, 0.45) !important;
  border-radius: 12px !important;
}

#masterIgnea .btn-hp-dano,
#masterIgnea .btn-master-perigo {
  background:
    radial-gradient(circle at top, rgba(255, 80, 60, 0.18), transparent 60%),
    linear-gradient(180deg, #7c1f19, #2f0807) !important;
  color: #fff0e5 !important;
}

#masterIgnea .btn-hp-cura,
#masterIgnea .btn-master-secundario {
  background:
    linear-gradient(180deg, rgba(35, 24, 21, 0.95), rgba(15, 10, 9, 0.98)) !important;
  color: var(--grim-gold) !important;
}

#masterIgnea .btn-master-principal,
#masterIgnea .master-upload,
#masterIgnea .btn-aplicar-dano,
#masterIgnea .btn-aplicar-cura {
  background:
    radial-gradient(circle at top, rgba(255, 115, 85, 0.22), transparent 58%),
    linear-gradient(180deg, #9e2f24, #4a0d0b) !important;
  color: #fff2e8 !important;
}

/* ========================= 13. GRIMÓRIO — COMPÊNDIO / CARDS ========================= */
#masterIgnea .compendio-grid {
  gap: 14px !important;
}

#masterIgnea .compendio-card,
#masterIgnea .monstro-card {
  background-color: #0b0a0a !important;
  background-size: cover !important;
  background-position: center 10% !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(180, 55, 42, 0.22) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.42) !important;
}

#masterIgnea .compendio-card::before,
#masterIgnea .monstro-card::before {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(90, 18, 14, 0.28), transparent) !important;
}

#masterIgnea .compendio-info strong,
#masterIgnea .monstro-nome {
  color: #f5e4d5 !important;
  font-family: "Cinzel", serif;
}

#masterIgnea .compendio-info span,
#masterIgnea .monstro-meta {
  color: var(--grim-red-bright) !important;
}

/* ========================= 14. MOBILE ========================= */
@media (max-width: 420px) {
  .titulo-rpg span { font-size: 34px; }
  .espada-titulo { width: 460px; }
  .logo-grimorio-nova { width: 185px; }
  .grimorio-branco { font-size: 34px; }
  .grimorio-vermelho { font-size: 26px; }
  .linha-ornamento { width: 48px; }

  #masterIgnea .master-tabs {
    height: 70px;
    padding: 9px 10px;
    gap: 8px;
  }

  #masterIgnea .master-tab-btn {
    height: 47px;
    font-size: 12px;
    border-radius: 14px !important;
  }
}