/* BrasaOT - efeitos visuais sobre o template tibiacom */
:root { --brasa-ouro: #f0b44c; --brasa-ouro-claro: #ffe19a; --brasa-fogo: #ff7a2e; --brasa-escuro: #150b12; }

/* fundo no body para as brasas passarem entre o fundo e o conteudo */
body { background: #07040a url("/templates/tibiacom/images/header/brasaot-fundo.svg") top center no-repeat !important; }
#ArtworkHelper { background-image: none !important; position: relative; z-index: 1; }
#brasa-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* faixa animada no topo */
.brasa-faixa { position: relative; z-index: 2; overflow: hidden; white-space: nowrap; height: 32px; line-height: 32px;
  background: linear-gradient(90deg, #1a0a08, #3a150c 30%, #3a150c 70%, #1a0a08);
  border-bottom: 1px solid rgba(240, 180, 76, .45); box-shadow: 0 2px 14px rgba(255, 122, 46, .25);
  font: bold 12px Verdana, Tahoma, sans-serif; color: #f3e6cf; letter-spacing: .03em; }
.brasa-faixa-trilho { display: inline-block; padding-left: 0; animation: brasa-rolar 38s linear infinite; }
.brasa-faixa:hover .brasa-faixa-trilho { animation-play-state: paused; }
.brasa-faixa span { display: inline-block; margin: 0 22px; }
.brasa-faixa span::before { content: "\25C6"; color: var(--brasa-fogo); margin-right: 10px; }
.brasa-faixa b { color: var(--brasa-ouro-claro); }
.brasa-faixa .brasa-on { color: #7ee2a0; }
@keyframes brasa-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* brilho na logo e no botao de criar conta */
#TibiaLogoArtworkTop { cursor: pointer; animation: brasa-logo 3.2s ease-in-out infinite; transition: transform .25s; }
#TibiaLogoArtworkTop:hover { transform: scale(1.05); }
@keyframes brasa-logo {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 122, 46, .35)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 150, 60, .9)); }
}
#NewcomerBox .ThemeboxButton { animation: brasa-botao 2.4s ease-in-out infinite; border-radius: 4px; }
@keyframes brasa-botao {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 170, 70, 0); }
  50% { box-shadow: 0 0 16px 3px rgba(255, 170, 70, .75); }
}
.Themebox, .Border_2 { transition: filter .25s; }
.Themebox:hover { filter: brightness(1.08) drop-shadow(0 0 8px rgba(240, 180, 76, .35)); }

/* janela de boas-vindas */
.brasa-fundo-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(5, 2, 6, .72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .35s; }
.brasa-fundo-modal.aberto { opacity: 1; }
.brasa-modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: radial-gradient(420px 200px at 50% 0%, rgba(255, 122, 46, .28), transparent 70%), linear-gradient(180deg, #2a1420, #150b12);
  border: 2px solid var(--brasa-ouro); border-radius: 14px; box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 122, 46, .35);
  color: #f3eadf; font: 13px/1.55 Verdana, Tahoma, sans-serif; text-align: center; padding: 26px 26px 22px;
  transform: translateY(18px) scale(.97); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.brasa-fundo-modal.aberto .brasa-modal { transform: none; }
.brasa-modal img { width: 180px; height: auto; margin: 0 auto 6px; display: block; animation: brasa-logo 3.2s ease-in-out infinite; }
.brasa-modal h2 { font: bold 22px Georgia, "Times New Roman", serif; margin: 4px 0 6px; color: var(--brasa-ouro-claro); text-shadow: 0 2px 10px rgba(255, 122, 46, .6); }
.brasa-modal p { margin: 0 0 14px; color: #d8c8b4; }
.brasa-lista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.brasa-lista li { background: rgba(0, 0, 0, .3); border: 1px solid rgba(240, 180, 76, .3); border-radius: 8px; padding: 8px 10px; }
.brasa-lista b { color: var(--brasa-ouro-claro); display: block; font-size: 14px; }
.brasa-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.brasa-btn { display: inline-block; padding: 11px 20px; border-radius: 9px; font: bold 13px Verdana, sans-serif; text-decoration: none !important; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .2s; }
.brasa-btn:hover { transform: translateY(-2px); }
.brasa-btn-ouro { color: #2a1606 !important; background: linear-gradient(180deg, #ffe19a, #f0b44c 55%, #d98f28); box-shadow: 0 8px 22px -8px rgba(240, 180, 76, .8); }
.brasa-btn-ouro:hover { box-shadow: 0 10px 28px -6px rgba(255, 170, 70, .95); }
.brasa-btn-linha { color: #f3eadf !important; background: rgba(255, 255, 255, .05); border-color: rgba(240, 180, 76, .55); }
.brasa-fechar { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #d8c8b4; font-size: 22px; line-height: 32px; cursor: pointer; }
.brasa-fechar:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.brasa-online { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(126, 226, 160, .12); border: 1px solid rgba(126, 226, 160, .4); color: #7ee2a0; font-weight: bold; font-size: 12px; }
.brasa-online::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7ee2a0; margin-right: 7px; vertical-align: 1px; animation: brasa-pulso 1.8s infinite; }
@keyframes brasa-pulso { 0% { box-shadow: 0 0 0 0 rgba(126, 226, 160, .7); } 70% { box-shadow: 0 0 0 8px rgba(126, 226, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 226, 160, 0); } }

/* voltar ao topo */
.brasa-topo { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--brasa-ouro); background: linear-gradient(180deg, #3a150c, #1a0a08); color: var(--brasa-ouro-claro);
  font-size: 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(12px); pointer-events: none; transition: all .25s; }
.brasa-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.brasa-topo:hover { box-shadow: 0 0 16px rgba(255, 150, 60, .8); }

@media (max-width: 560px) { .brasa-lista { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  #brasa-canvas { display: none; }
  .brasa-faixa-trilho, #TibiaLogoArtworkTop, #NewcomerBox .ThemeboxButton, .brasa-modal img, .brasa-online::before { animation: none !important; }
  .brasa-fundo-modal, .brasa-modal, .brasa-topo { transition: none !important; }
}