/* =========================================================
   GRIMÓRIO ÍGNEO — VISUAL DARK FANTASY LIMPO
========================================================= */

:root{
  --grim-bg: #070606;
  --grim-bg2: #120d0d;

  --grim-card: #151313;
  --grim-card2: #211d1d;

  --grim-red: #b83a2f;
  --grim-red-dark: #631512;

  --grim-gold: #d0b06d;

  --grim-text: #f0dfcb;
  --grim-muted: #a8937d;

  --grim-line: rgba(185, 58, 47, .22);
}

/* =========================================================
   BASE MASTER
========================================================= */

#masterIgnea{
  position: relative;

  min-height: 100vh;

  padding: 14px 12px 90px !important;

  background:
    radial-gradient(circle at top right,
    rgba(130,25,20,.14),
    transparent 28%),

    radial-gradient(circle at bottom left,
    rgba(120,20,15,.10),
    transparent 34%),

    linear-gradient(
      180deg,
      var(--grim-bg) 0%,
      var(--grim-bg2) 52%,
      #050505 100%
    ) !important;

  color: var(--grim-text) !important;

  overflow-x: hidden;
}

/* textura leve */
#masterIgnea::before{
  content:"";

  position: fixed;
  inset:0;

  pointer-events:none;
  z-index:0;

  opacity:.18;

  background:
    linear-gradient(
      90deg,
      transparent 49.7%,
      rgba(180,55,42,.08) 50%,
      transparent 50.3%
    ),

    radial-gradient(
      circle at 20% 20%,
      rgba(170,40,30,.08),
      transparent 24%
    ),

    radial-gradient(
      circle at 80% 70%,
      rgba(170,40,30,.06),
      transparent 28%
    );
}

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

/* =========================================================
   REMOVE QUADRADO FEIO DAS ABAS
========================================================= */

#masterIgnea .master-aba,
#masterIgnea .master-page{
  background: transparent !important;

  border:none !important;
  box-shadow:none !important;

  border-radius:0 !important;
}

/* =========================================================
   TITULOS
========================================================= */

#masterIgnea .titulo-secao,
#masterIgnea h2,
#masterIgnea h3,
#masterIgnea h4{
  font-family:"Cinzel", serif !important;

  color: var(--grim-red) !important;

  letter-spacing:1.5px;

  text-shadow:
    0 0 12px rgba(180,55,42,.18);
}

#masterIgnea .titulo-secao{
  font-size:48px !important;

  text-align:center;

  margin-bottom:10px !important;
}

/* linha decorativa */
#masterIgnea .titulo-secao::before,
#masterIgnea .titulo-secao::after{
  content:"";

  display:block;

  width:100%;
  height:1px;

  margin:8px 0;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(180,55,42,.55),
      transparent
    );
}

/* =========================================================
   TEXTOS
========================================================= */

#masterIgnea p,
#masterIgnea small,
#masterIgnea .master-desc{
  color: var(--grim-muted) !important;
}

/* =========================================================
   CARDS / BLOCOS
========================================================= */

#masterIgnea .master-form-box,
#masterIgnea .combate-card,
#masterIgnea .monstro-card,
#masterIgnea .sheet-monstro,
#masterIgnea .sheet-bloco,
#masterIgnea .status-monstro-box,
#masterIgnea .master-modal-content,
#masterIgnea .modal-bloco{
  position:relative;

  background:
    linear-gradient(
      180deg,
      var(--grim-card2),
      var(--grim-card)
    ) !important;

  border:1px solid var(--grim-line) !important;

  border-radius:18px !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.02) !important;

  overflow:hidden;
}

/* detalhe interno */
#masterIgnea .master-form-box::before,
#masterIgnea .combate-card::before,
#masterIgnea .sheet-bloco::before{
  content:"";

  position:absolute;
  inset:8px;

  border-radius:12px;

  border:1px solid rgba(180,55,42,.10);

  pointer-events:none;
}

/* =========================================================
   INPUTS
========================================================= */

#masterIgnea input,
#masterIgnea textarea,
#masterIgnea select{
  background:#121111 !important;

  color:var(--grim-text) !important;

  border:1px solid rgba(180,55,42,.22) !important;

  border-radius:12px !important;

  box-shadow:none !important;
}

#masterIgnea input::placeholder,
#masterIgnea textarea::placeholder{
  color:rgba(240,223,203,.40) !important;
}

#masterIgnea input:focus,
#masterIgnea textarea:focus,
#masterIgnea select:focus{
  border-color:rgba(220,75,55,.60) !important;

  box-shadow:
    0 0 0 1px rgba(220,75,55,.18),
    0 0 12px rgba(180,55,42,.12) !important;
}

/* =========================================================
   STATUS BOX
========================================================= */

#masterIgnea .status-monstro-box input{
  background:#0d0c0c !important;

  color:var(--grim-text) !important;

  border:1px solid rgba(180,55,42,.32) !important;
}

/* =========================================================
   BOTÕES
========================================================= */

#masterIgnea button{
  border-radius:12px !important;

  border:1px solid rgba(180,55,42,.20) !important;

  color:var(--grim-text) !important;

  background:
    linear-gradient(
      180deg,
      #241f1f,
      #121010
    ) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,.28) !important;
}

/* principal */
#masterIgnea .btn-master-principal,
#masterIgnea .master-upload{
  background:
    linear-gradient(
      180deg,
      #9e2f24,
      #4a0d0b
    ) !important;

  color:#fff2e8 !important;
}

/* perigo */
#masterIgnea .btn-master-perigo,
#masterIgnea .btn-hp-dano{
  background:
    linear-gradient(
      180deg,
      #7c1f19,
      #2f0807
    ) !important;
}

/* =========================================================
   COMPÊNDIO
========================================================= */

#masterIgnea .compendio-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{
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.95),
      rgba(90,18,14,.28),
      transparent
    ) !important;
}

#masterIgnea .compendio-info strong{
  color:#f5e4d5 !important;
}

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

/* =========================================================
   IMAGENS
========================================================= */

#masterIgnea .sheet-img,
#masterIgnea .modal-monstro-img,
#masterIgnea .preview-monstro,
#masterIgnea .combate-img{
  border-radius:16px !important;

  border:1px solid rgba(180,55,42,.28) !important;

  filter:
    saturate(.92)
    contrast(1.04);
}

/* =========================================================
   BARRA INFERIOR
========================================================= */


#masterIgnea .master-tab-btn{
  background:
    linear-gradient(
      180deg,
      #1f1c1c,
      #0c0b0b
    ) !important;

  color:#a8937d !important;

  border-right:1px solid rgba(180,55,42,.14) !important;

  border-radius:0 !important;
}

#masterIgnea .master-tab-btn.active{
  background:
    linear-gradient(
      180deg,
      #982d23,
      #2d0908
    ) !important;

  color:#fff0e5 !important;

  box-shadow:
    inset 0 3px 0 rgba(220,75,55,.55),
    0 0 14px rgba(180,55,42,.16) !important;
}

.sheet-monstro.full .sheet-monstro-img,
.sheet-monstro.full .sheet-monstro-imagem,
.sheet-monstro.full img {
  height: 42vh !important;
  object-fit: contain !important;
  background: #1a1a1a;
}

.sheet-monstro.full {
  height: 100vh !important;
  border-radius: 0 !important;
  padding-top: 10px;
}

.grimorio-header{
  text-align:center;
  margin:
    10px 0
    20px;
}

.grimorio-sub{
  color:#b89654;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:0.8;

  margin-bottom:6px;
}

.grimorio-titulo{

  font-family:"Cinzel", serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:2px;
  margin-top: -0px;

  background: linear-gradient(
    to bottom,
    #ffb36b,
    #ff5e2e,
    #a30000
  );

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

  text-shadow:
    0 0 12px rgba(255,80,0,0.35),
    0 0 28px rgba(255,0,0,0.18);
}

.grimorio-linha{
  width:220px;
  height:1px;

  margin:
    11px auto
    0;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,120,0,0.7),
    transparent
  );
}

.grimorio-header .logo-grimorio{
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;

  display: block !important;
  margin: 18px auto 12px auto !important;

  object-fit: contain !important;

  transform: rotate(-7deg) scale(1) !important;

  filter: drop-shadow(0 0 14px rgba(180, 55, 42, 0.28));
}

.folhas-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.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: folhas1 65s linear infinite;
}

.folhas-bg::after {
  background-size: 760px auto;

  opacity: 0.010;

  animation: folhas2 140s linear infinite;
}

@keyframes folhas1 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -520px 260px;
  }
}

@keyframes folhas2 {
  from {
    background-position: 0 300px;
  }

  to {
    background-position: -760px 620px;
  }
}


.card,
.add,
.btn-acao-ficha,
.voltar,
.btn-voltar-modos {
  background-color: #1b1411;
}

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

.logo-grimorio-nova {
  width: 200px;
  height: auto;
  margin-bottom: 8px;
}

.grimorio-texto-logo {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  line-height: 0.9;
}

.grimorio-branco {
  display: block;
  font-family: "Cinzel", serif;
  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-family: "Cinzel", serif;
  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-top: 22px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(200, 80, 30, 0.5),
    transparent
  );
}

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

/* ================= FUNDO SIMBOLOS GRIMORIO ================= */

/* ================= FUNDO SÍMBOLOS GRIMÓRIO ================= */

#masterIgnea {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.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: simbolosGrimorio 35s linear infinite;
}

@keyframes simbolosGrimorio {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -430px 320px;
  }
}

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

.grimorio-header,
.grimorio-conteudo,
.monstro-card,
.barra-pesquisa,
.tabs-master {
  position: relative;
  z-index: 1;
}