/* ============================================================
   RITUAL DE FUSAO (V196) — fundo do card + tela do altar.

   Estudo: techterra-online-backend/docs/estudo-monstro-fusao.md
   Telas:  docs/mock-ritual-fusao.html · fundo: docs/mock-fundo-fusao.html

   ARQUIVO PROPRIO, e nao um bloco no style.css, de proposito: o style.css tem
   38k linhas e vive sendo editado por varias sessoes ao mesmo tempo; um bloco
   novo la' no fim disputaria as mesmas ultimas linhas com todo mundo. Aqui o
   arquivo e' so' desta feature (mesmo padrao do evento_global.css).
   ============================================================ */

/* ------------------------------------------------------------
   O FUNDO — PB2 · Eter Interdito  (escolhido pelo dono 2026-08-24)

   Anatomia do FA6 (o fundo do monstro de SACRIFICIO): tres camadas —
   base + teia `--web6` + glint no `--webspider`. O que muda e' a paleta
   (violeta profundo x ciano gelido, duas cores que se encontram = a metafora
   da fusao) e a VELOCIDADE, na lentidao 2x que o dono aprovou.

   NAO ACELERAR o glint. Ele fica em `opacity: 0` por ~40% do ciclo, e e' essa
   PAUSA — nao a cor — que da' o ar de "guardado". Sem ela o card volta pro
   registro de "piscando", que foi o que reprovou os fundos rapidos quando
   testados em grid de 5.

   O card de fusao NAO leva selo no topo (decisao do dono na mesma rodada):
   o 🔮 do sacrificio existe porque e' um BOTAO (abre o ritual a partir do
   card); o ritual de fusao mora no altar da cidade, entao nao ha o que clicar.
   Quem anuncia "isto e' uma fusao" e' o fundo, sozinho.
   ------------------------------------------------------------ */
.mon-fusao-bg {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 110% at 50% 42%, #11002b, #050012 58%, #010006);
    animation: fusaoAura 14s ease-in-out infinite;
}
.mon-fusao-bg::before,
.mon-fusao-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* z-index 0 e 1: a arte do monstro fica em z-index 3 em todos os cards do jogo
   (.bestiary-card-img), entao as duas camadas passam POR BAIXO dela. */
.mon-fusao-bg::before {
    z-index: 0;
    background: linear-gradient(112deg,
        #24004d, #7d1fff 15%, #c98cff 27%, #f0e2ff 38%, #6ff0ff 52%,
        #1f7fd6 68%, #2a0060 86%, #24004d 100%) 0 0 / 340% 340%;
    -webkit-mask:
        linear-gradient(78deg, transparent 0 44%, #000 47% 49%, transparent 52%),
        linear-gradient(-65deg, transparent 0 60%, #000 63% 64.5%, transparent 68%),
        linear-gradient(15deg, transparent 0 28%, #000 30% 31.5%, transparent 34%),
        linear-gradient(105deg, transparent 0 68%, #000 70% 71.5%, transparent 74%),
        linear-gradient(-30deg, transparent 0 36%, #000 38% 39.2%, transparent 42%),
        linear-gradient(55deg, transparent 0 78%, #000 80% 81%, transparent 84%);
    mask:
        linear-gradient(78deg, transparent 0 44%, #000 47% 49%, transparent 52%),
        linear-gradient(-65deg, transparent 0 60%, #000 63% 64.5%, transparent 68%),
        linear-gradient(15deg, transparent 0 28%, #000 30% 31.5%, transparent 34%),
        linear-gradient(105deg, transparent 0 68%, #000 70% 71.5%, transparent 74%),
        linear-gradient(-30deg, transparent 0 36%, #000 38% 39.2%, transparent 42%),
        linear-gradient(55deg, transparent 0 78%, #000 80% 81%, transparent 84%);
    filter: saturate(1.8) brightness(1.35);
    animation: fusaoSweep 8s ease-in-out infinite alternate;
}
.mon-fusao-bg::after {
    z-index: 1;
    background: linear-gradient(115deg,
        transparent 34%, #fff 46%, #d8f4ff 50%, #fff 54%, transparent 66%) 0 0 / 300% 300%;
    -webkit-mask:
        repeating-conic-gradient(from 8deg at 52% 42%, #000 0 1.4deg, transparent 1.4deg 30deg),
        repeating-radial-gradient(circle at 52% 42%, transparent 0 20px, #000 20px 21.2px, transparent 21.2px 44px);
    mask:
        repeating-conic-gradient(from 8deg at 52% 42%, #000 0 1.4deg, transparent 1.4deg 30deg),
        repeating-radial-gradient(circle at 52% 42%, transparent 0 20px, #000 20px 21.2px, transparent 21.2px 44px);
    mix-blend-mode: plus-lighter;
    animation: fusaoGlint 6.8s ease-in-out infinite;
}
@keyframes fusaoAura {
    0%, 100% { box-shadow: inset 0 0 20px #3d008c55; }
    50%      { box-shadow: inset 0 0 46px #6ff0ff55; }
}
@keyframes fusaoSweep {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
/* A pausa longa e' o efeito. Ver a nota no topo antes de mexer nos %. */
@keyframes fusaoGlint {
    0%   { background-position: 130% 130%; opacity: 0; }
    18%  { opacity: 0; }
    38%  { opacity: .95; }
    62%  { opacity: .95; }
    82%  { background-position: -30% -30%; opacity: 0; }
    100% { background-position: -30% -30%; opacity: 0; }
}

/* Card ainda nao descoberto: a silhueta preta manda, o fundo apaga junto.
   Sem isto o fundo animado denunciaria "aqui tem uma fusao" no bestiario e
   estragaria a silhueta que o resto do jogo respeita. */
.bestiary-card.is-hidden .mon-fusao-bg::before,
.bestiary-card.is-hidden .mon-fusao-bg::after,
.mon-fusao-bg.mon-fusao-oculto::before,
.mon-fusao-bg.mon-fusao-oculto::after {
    display: none;
}

/* Respeita quem pediu menos animacao no sistema. O fundo continua, parado. */
@media (prefers-reduced-motion: reduce) {
    .mon-fusao-bg,
    .mon-fusao-bg::before,
    .mon-fusao-bg::after {
        animation: none;
    }
    .mon-fusao-bg::after { opacity: .5; }
}

/* ------------------------------------------------------------
   A TELA DO RITUAL (o que o cartao do altar abre)
   ------------------------------------------------------------ */
.rfus-modal { max-width: 1040px; width: min(1040px, 96vw); }
.rfus-wrap { padding: 2px 4px 8px; }
.rfus-intro { font-size: .82rem; color: #a09080; margin: 0 0 12px; }

.rfus-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 10px; margin-bottom: 14px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(201,168,76,.16);
    border-radius: 9px;
}
.rfus-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rfus-chip {
    font-family: Georgia, serif; font-size: .73rem; color: #a09080;
    background: rgba(0,0,0,.3); border: 1px solid rgba(201,168,76,.2);
    border-radius: 18px; padding: 5px 13px; cursor: pointer;
    transition: all .15s; display: flex; align-items: center; gap: 6px;
}
.rfus-chip:hover { border-color: rgba(201,168,76,.5); color: #f0e6d2; }
.rfus-chip.on { background: rgba(53,214,232,.14); border-color: #35d6e8; color: #d7f7fb; }
.rfus-chip .n { font-size: .68rem; opacity: .75; }
.rfus-busca {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.35); border: 1px solid rgba(201,168,76,.2);
    border-radius: 18px; padding: 4px 12px;
}
.rfus-busca input {
    background: none; border: none; outline: none; color: #f0e6d2;
    font-family: Georgia, serif; font-size: .74rem; width: 150px;
}
.rfus-busca input::placeholder { color: #6b6053; }

.rfus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}
@media (max-width: 780px) { .rfus-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* overflow VISIBLE (era hidden): a gaveta precisa sair pra fora do card.
   z-index ganha valor explicito porque o `:hover` com transform cria contexto de
   empilhamento — sem isso os cards SEGUINTES no DOM pintam por cima da gaveta,
   que foi o bug visto no primeiro mock. */
.rfus-card {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, #1e1810, #14100a);
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 11px; overflow: visible;
    display: flex; flex-direction: column;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.rfus-card.aberto { z-index: 300; }
.rfus-card.pode { border-color: rgba(76,175,125,.45); box-shadow: 0 0 14px rgba(76,175,125,.1); }
.rfus-card.pode:hover { transform: translateY(-3px); box-shadow: 0 0 22px rgba(76,175,125,.22); }

.rfus-prod { padding: 12px 12px 9px; }
.rfus-art {
    position: relative; width: 100%; aspect-ratio: 1;
    border-radius: 9px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #0a0710;
}
/* O PB2 aqui e' PANO DE FUNDO, nao o assunto. No card do bestiario ele ocupa uma
   miniatura; nesta grade a arte tem ~250px e as fendas da teia crescem junto,
   virando barras grossas que competem com a silhueta (foi o que o dono viu:
   "so' aparece o fundo"). Amortecido so' NESTE contexto — o card do bestiario
   continua com o brilho cheio. */
.rfus-art.mon-fusao-bg::before { filter: saturate(1.15) brightness(.85); opacity: .5; }
.rfus-art.mon-fusao-bg::after { opacity: .45; }
/* A miniatura da gaveta e' pequena: ali a teia funciona, so' baixa um pouco. */
.rfus-mini.mon-fusao-bg::before { filter: saturate(1.3) brightness(.95); opacity: .62; }
.rfus-art img { position: relative; z-index: 3; width: 88%; height: 88%; object-fit: contain; }

/* ------------------------------------------------------------
   A SILHUETA COMO MEDIDOR DE PROGRESSO (decisao do dono, 2026-08-24).
   Mock: docs/mock-ritual-fusao-gaveta.html

     preto puro       -> nao tenho NADA desta receita
     contorno violeta -> tenho ALGUMA COISA
     contorno + halo  -> tenho TUDO, da' pra fundir

   A base e' sempre a silhueta PADRAO DO GATCHA — `brightness(0) saturate(0)`,
   o mesmo que `.pg-sil` (passe.js) e `.monster-undiscovered` fazem. O contorno
   nao revela nada: sao 4 sombras coladas desenhando o PERFIL; a forma continua
   chapada, sem textura e sem cor.

   Diferente do bestiario, o fundo PB2 fica LIGADO atras da silhueta — ver a
   nota no cardHtml do ritual_fusao.js.
   ------------------------------------------------------------ */
.rfus-sil-nenhum img { filter: brightness(0) saturate(0); opacity: .85; }

.rfus-sil-parcial img {
    filter: brightness(0) saturate(0)
        drop-shadow(1.5px 0 0 rgba(201,140,255,.85))
        drop-shadow(-1.5px 0 0 rgba(201,140,255,.85))
        drop-shadow(0 1.5px 0 rgba(201,140,255,.85))
        drop-shadow(0 -1.5px 0 rgba(201,140,255,.85));
    opacity: .95;
}

.rfus-sil-completo img {
    filter: brightness(0) saturate(0)
        drop-shadow(1.5px 0 0 rgba(111,240,255,.95))
        drop-shadow(-1.5px 0 0 rgba(111,240,255,.95))
        drop-shadow(0 1.5px 0 rgba(111,240,255,.95))
        drop-shadow(0 -1.5px 0 rgba(111,240,255,.95))
        drop-shadow(0 0 16px rgba(125,31,255,.95));
    opacity: 1;
    animation: rfusSilPulsa 3.4s ease-in-out infinite;
}
/* Pulso LENTO: mesma disciplina do fundo PB2 — o que diz "guardado" e' a
   lentidao. Pisca rapido vira ruido numa grade de 8 cards. */
@keyframes rfusSilPulsa { 0%,100% { opacity: .9; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rfus-sil-completo img { animation: none; } }

/* A etiqueta de estado, no canto da arte. */
.rfus-estado {
    position: absolute; top: 6px; left: 6px; z-index: 50;
    font-family: Georgia, serif; font-size: .58rem; letter-spacing: .06em;
    border-radius: 4px; padding: 1px 6px;
    background: rgba(0,0,0,.7); color: #8d8578;
    border: 1px solid rgba(201,168,76,.25);
}
.rfus-estado.completo { background: rgba(76,175,125,.9); color: #06180f; border-color: transparent; }
.rfus-estado.parcial { color: #c98cff; border-color: rgba(201,140,255,.4); }
.rfus-tier {
    position: absolute; top: 6px; right: 6px; z-index: 50;
    font-family: Georgia, serif; font-size: .64rem;
    background: rgba(10,7,16,.85); border: 1px solid rgba(201,168,76,.45);
    color: #e8d38a; border-radius: 4px; padding: 2px 6px;
}
/* CANTO DIREITO. Estava em `left: 6px`, colidindo com o `.rfus-estado` que fica
   la' — os dois selos apareciam empilhados e ilegiveis (bug visto na tela). Sao
   eixos diferentes: um diz "voce ja' fez esta", o outro diz "voce tem os
   ingredientes", e os dois podem ser verdade ao mesmo tempo. */
.rfus-feita {
    position: absolute; top: 6px; right: 6px; z-index: 50;
    font-family: Georgia, serif; font-size: .62rem;
    background: rgba(201,168,76,.9); color: #171208;
    border-radius: 4px; padding: 2px 7px;
}
.rfus-nome {
    margin-top: 9px; font-size: .84rem; color: #e8d38a;
    text-align: center; line-height: 1.25; min-height: 2.1em;
    display: flex; align-items: center; justify-content: center;
}
.rfus-nome.trancado { color: #4e463a; letter-spacing: .2em; font-style: italic; }
.rfus-tipos {
    font-family: Georgia, serif; font-size: .66rem; color: #a09080;
    text-align: center; margin-top: 2px; min-height: 1em;
}

.rfus-ing-tt {
    font-family: Georgia, serif; font-size: .61rem; letter-spacing: .13em;
    color: #7d705e; margin-bottom: 7px;
}
.rfus-ing-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,.24);
}
.rfus-ing-row.ok { background: rgba(76,175,125,.1); }
.rfus-ing-row.no { background: rgba(192,57,43,.1); }
.rfus-mini {
    position: relative; width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 5px; background: #0d0a06;
    border: 1px solid rgba(201,168,76,.2);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* z-index 3 pelo mesmo motivo do card grande: as camadas do PB2 sao ::before e
   ::after (z 0 e 1), entao a arte tem que vir acima delas. */
.rfus-mini img { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: contain; }
/* Ingrediente que o jogador NAO tem: silhueta do gatcha sobre o fundo PB2.
   Quem ja' tem aparece com a arte cheia — esconder o que ele possui nao
   protegeria nada e atrapalharia a conferencia "e' esse que eu vou queimar?". */
.rfus-mini.rfus-sil-mini img { filter: brightness(0) saturate(0); opacity: .9; }
.rfus-qtd {
    position: absolute; bottom: -1px; right: -1px;
    font-family: Georgia, serif; font-size: .6rem; font-weight: 700;
    background: rgba(10,7,6,.92); border: 1px solid rgba(201,168,76,.5);
    color: #e8d38a; border-radius: 4px; padding: 0 3px; line-height: 1.3;
}
.rfus-ing-nome {
    flex: 1; font-family: Georgia, serif; font-size: .71rem; color: #f0e6d2;
    line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
}
.rfus-ing-nome.trancado { color: #4e463a; font-style: italic; letter-spacing: .16em; }
.rfus-cnt { font-family: Georgia, serif; font-size: .7rem; white-space: nowrap; }
.rfus-cnt.ok { color: #4caf7d; }
.rfus-cnt.no { color: #e74c3c; }

/* ------------------------------------------------------------
   A GAVETA (Opcao A do mock): sai pela direita do card, POR CIMA da grade.
   `left: calc(100% - 6px)` e nao `+8px`: ela encosta no card e avanca sobre o
   vizinho — o dono pediu que cubra, nao que caiba no vao.
   ------------------------------------------------------------ */
.rfus-gaveta {
    position: absolute; top: 0; left: calc(100% - 6px); width: 232px;
    background: linear-gradient(180deg, #241d14, #17120c);
    border: 1px solid #35d6e8; border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.7), 0 0 18px rgba(53,214,232,.18);
    padding: 10px; z-index: 310;
    opacity: 0; transform: translateX(-10px) scaleX(.9); transform-origin: left center;
    pointer-events: none; transition: opacity .16s, transform .16s;
}
.rfus-card.aberto .rfus-gaveta { opacity: 1; transform: none; pointer-events: auto; }
/* Ultima coluna da grade de 3: abre pra ESQUERDA, senao sai da tela. */
.rfus-grid .rfus-card:nth-child(3n) .rfus-gaveta {
    left: auto; right: calc(100% - 6px); transform-origin: right center;
}
@media (max-width: 780px) {
    /* Grade de 2 colunas: quem inverte e' o par, nao o multiplo de 3. */
    .rfus-grid .rfus-card:nth-child(3n) .rfus-gaveta { left: calc(100% - 6px); right: auto; }
    .rfus-grid .rfus-card:nth-child(2n) .rfus-gaveta {
        left: auto; right: calc(100% - 6px); transform-origin: right center;
    }
}

.rfus-puxador {
    width: 26px; align-self: stretch; border-radius: 6px;
    background: rgba(53,214,232,.1); border: 1px solid rgba(53,214,232,.35);
    color: #35d6e8; font-size: .7rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.rfus-puxador:hover { background: rgba(53,214,232,.22); }
.rfus-card.aberto .rfus-puxador { transform: rotate(180deg); }

.rfus-gav-modo {
    margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(201,168,76,.18);
    font-family: Georgia, serif; font-size: .66rem; color: #a09080; line-height: 1.5;
}
.rfus-gav-modo b { color: #35d6e8; }

.rfus-acao { padding: 8px 12px 12px; display: flex; align-items: stretch; gap: 6px; }
.rfus-btn {
    width: 100%; font-family: 'Cinzel', serif; font-size: .78rem;
    letter-spacing: .05em; border-radius: 7px; padding: 8px 10px;
    cursor: pointer; border: 1px solid; transition: all .15s;
}
.rfus-btn.go {
    background: linear-gradient(180deg, #1d6b4d, #14503a);
    border-color: #3ea87c; color: #d8ffef;
}
.rfus-btn.go:hover {
    background: linear-gradient(180deg, #24855f, #185f45);
    box-shadow: 0 0 14px rgba(76,175,125,.35);
}
.rfus-btn.off {
    background: rgba(0,0,0,.3); border-color: rgba(201,168,76,.18);
    color: #5f5648; cursor: not-allowed;
}
.rfus-vazio {
    grid-column: 1 / -1; text-align: center; padding: 40px 20px;
    font-family: Georgia, serif; font-size: .82rem; color: #a09080;
}

/* ============================================================
   A TELA DE TRIBUTO — Opcao A (lista comparativa)
   Estudo: docs/mock-fusao-tributo.html · escolhida pelo dono 2026-08-24

   Por que LISTA e nao card: a decisao e' NUMERICA ("qual eu queimo sem me
   arrepender"). Com as colunas alinhadas, comparar 6 exemplares vira ler uma
   coluna. Card grande obriga a varrer em zigue-zague e nao escala pra 10+.
   ============================================================ */
.rfus-sel-modal { max-width: 660px; width: min(660px, 95vw); }
.rfus-sel-alvo {
    display: flex; align-items: center; gap: 12px; padding: 10px;
    background: rgba(0,0,0,.3); border: 1px solid rgba(201,168,76,.22);
    border-radius: 9px; margin-bottom: 12px;
}
.rfus-sel-art {
    width: 66px; height: 66px; flex: 0 0 66px;
    border-radius: 7px; overflow: hidden; position: relative;
}
.rfus-sel-art img { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: contain; }
.rfus-sel-txt { flex: 1; min-width: 0; }
.rfus-sel-nome { font-size: .9rem; color: #e8d38a; }
.rfus-sel-modo {
    font-family: Georgia, serif; font-size: .72rem; color: #a09080;
    margin-top: 4px; line-height: 1.5;
}
.rfus-sel-modo b { color: #35d6e8; }

/* O PLACAR — quantos tributos ja' foram escolhidos. Nao existia antes; sem ele o
   jogador so' descobria que faltava alguem tentando confirmar. */
.rfus-placar { text-align: right; white-space: nowrap; }
.rfus-placar-n { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #e8d38a; line-height: 1; }
.rfus-placar-n.ok { color: #4caf7d; }
.rfus-placar-lab {
    font-family: Georgia, serif; font-size: .6rem; letter-spacing: .12em;
    color: #7d705e; margin-top: 3px;
}

/* A CAIXA DA ANCORA — a informacao que faltava por completo na versao anterior:
   QUAL exemplar decide o tier do resultado. Recalculada a cada clique. */
.rfus-anc {
    padding: 8px 11px; border-radius: 7px; margin-bottom: 4px;
    background: rgba(53,214,232,.08); border: 1px solid rgba(53,214,232,.32);
    font-family: Georgia, serif; font-size: .72rem; color: #cfeff5; line-height: 1.5;
}
.rfus-anc b { color: #fff; }
/* Sem tributo escolhido, e nos modos em que o tributo NAO decide o tier: a caixa
   fica neutra, pra nao insinuar uma causalidade que nao existe. */
.rfus-anc.vazia, .rfus-anc.fixa {
    background: rgba(0,0,0,.25); border-color: rgba(201,168,76,.18); color: #8d8578;
}
.rfus-anc.fixa b { color: #c9a84c; }

.rfus-slot-tt {
    font-family: Georgia, serif; font-size: .63rem; letter-spacing: .13em; color: #7d705e;
    margin: 14px 0 7px; border-bottom: 1px solid rgba(201,168,76,.14); padding-bottom: 5px;
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.rfus-slot-tt > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfus-slot-tt .qtd { font-size: .7rem; letter-spacing: 0; color: #a09080; white-space: nowrap; }
.rfus-slot-tt .qtd.ok { color: #4caf7d; }
.rfus-sem-cand {
    font-family: Georgia, serif; font-size: .72rem; color: #8a4038;
    padding: 8px 10px; background: rgba(192,57,43,.1);
    border: 1px solid rgba(192,57,43,.3); border-radius: 7px;
}

/* ---- a linha do exemplar ---- */
.rfus-lin {
    display: flex; align-items: center; gap: 11px; padding: 7px 10px; margin-bottom: 5px;
    background: rgba(0,0,0,.26); border: 1px solid rgba(201,168,76,.14);
    border-radius: 8px; cursor: pointer; transition: all .13s;
}
.rfus-lin:hover { border-color: rgba(201,168,76,.42); background: rgba(0,0,0,.36); }
/* Selecionado = vermelho CHEIO, nao borda fina: um clique errado queima um
   monstro pra sempre, entao a confirmacao visual tem que ser inequivoca. */
.rfus-lin.sel { border-color: #e74c3c; background: rgba(192,57,43,.16); }
/* A ancora e' um eixo DIFERENTE de "vai morrer" — por isso faixa ciano na
   lateral, que convive com o vermelho do selecionado. */
.rfus-lin.ancora { box-shadow: inset 3px 0 0 #35d6e8; }
/* Linha sem data-rfus-lin (obrigatoria) nao responde ao mouse. */
.rfus-lin:not([data-rfus-lin]) { cursor: default; opacity: .92; }
.rfus-lin:not([data-rfus-lin]):hover { border-color: rgba(201,168,76,.14); background: rgba(0,0,0,.26); }

.rfus-check {
    width: 19px; height: 19px; flex: 0 0 19px; border-radius: 4px;
    border: 1.5px solid rgba(201,168,76,.4);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: transparent;
}
.rfus-lin.sel .rfus-check { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.rfus-lin-art {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 6px; overflow: hidden; position: relative;
}
.rfus-lin-art img { position: relative; z-index: 3; width: 100%; height: 100%; object-fit: contain; }
.rfus-lin-nome {
    flex: 1; min-width: 0; font-family: Georgia, serif; font-size: .76rem; color: #f0e6d2;
    overflow: hidden; text-overflow: ellipsis;
}
.rfus-lin-nome small { display: block; font-size: .64rem; color: #7d705e; margin-top: 2px; }
.rfus-lin-nome small b { color: #35d6e8; }
.rfus-lin-col { text-align: center; width: 74px; flex: 0 0 74px; }
.rfus-lin-col .v { font-family: 'Cinzel', serif; font-size: .88rem; color: #e8d38a; }
.rfus-lin-col .l {
    font-family: Georgia, serif; font-size: .58rem; letter-spacing: .1em;
    color: #7d705e; margin-top: 2px;
}
.rfus-tb-wrap { display: flex; justify-content: center; margin-top: 3px; }
.rfus-tierbar { display: flex; gap: 2px; }
.rfus-tierbar i {
    width: 5px; height: 9px; border-radius: 1px; display: block;
    background: rgba(255,255,255,.1);
}
.rfus-tierbar i.on { background: #c98cff; box-shadow: 0 0 5px rgba(201,140,255,.7); }
.rfus-tierbar.forte i.on { background: #35d6e8; box-shadow: 0 0 6px rgba(111,240,255,.85); }

.rfus-aviso {
    margin-top: 14px; padding: 10px 12px; border-radius: 8px;
    background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.4);
    font-family: Georgia, serif; font-size: .74rem; color: #f0c8b0; line-height: 1.6;
}
.rfus-aviso b { color: #e74c3c; }
.rfus-bts { display: flex; gap: 10px; margin-top: 14px; }
.rfus-bt {
    flex: 1; font-family: 'Cinzel', serif; font-size: .8rem;
    border-radius: 8px; padding: 10px; cursor: pointer;
    border: 1px solid; transition: all .15s;
}
.rfus-bt.cancel {
    background: rgba(0,0,0,.3); border-color: rgba(201,168,76,.25); color: #a09080;
}
.rfus-bt.confirm {
    background: linear-gradient(180deg, #a5321f, #7a2114);
    border-color: #e74c3c; color: #ffe0d4;
}
.rfus-bt.confirm:hover { box-shadow: 0 0 16px rgba(231,76,60,.4); }
.rfus-bt[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ------------------------------------------------------------
   CADASTRO — Passo 5, o repetidor da receita (#bf-fusao-wrap)

   As classes ficam AQUI, e nao no style.css, pelo mesmo motivo do resto do
   arquivo: e' CSS que so' esta feature usa, e o style.css e' disputado.
   ------------------------------------------------------------ */
.bf-fus-hint {
    font-family: Georgia, serif; font-size: .72rem; color: #8b8071;
    line-height: 1.5; margin: 4px 0 8px;
}
.bf-fus-hint b { color: #c9a84c; }
.bf-fus-lista { margin-bottom: 6px; }
.bf-fus-vazio {
    font-family: Georgia, serif; font-size: .74rem; color: #6b6053;
    padding: 10px; text-align: center;
    border: 1px dashed rgba(201,168,76,.2); border-radius: 7px;
}
/* Receita ainda abaixo do minimo de 2: a lista inteira ganha a borda de alerta.
   E' o mesmo minimo que o servidor cobra (`fusao_receita_minima`); avisar aqui
   evita o narrador so' descobrir no Salvar. */
.bf-fus-incompleta {
    border: 1px solid rgba(231,76,60,.45); border-radius: 8px; padding: 6px;
}
.bf-fus-row {
    display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
    background: rgba(0,0,0,.3); border: 1px solid rgba(201,168,76,.16);
    border-radius: 7px; padding: 6px 9px;
}
.bf-fus-art {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 5px;
    background: #0d0a06; overflow: hidden; display: block;
}
.bf-fus-art img { width: 100%; height: 100%; object-fit: contain; }
.bf-fus-nm {
    flex: 1; font-family: Georgia, serif; font-size: .75rem; color: #f0e6d2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-fus-step { display: flex; align-items: center; gap: 0; }
.bf-fus-mn {
    width: 24px; height: 24px; background: rgba(0,0,0,.4);
    border: 1px solid rgba(201,168,76,.3); color: #e8d38a;
    cursor: pointer; font-size: .8rem; line-height: 1; padding: 0;
}
.bf-fus-step .bf-fus-mn:first-child { border-radius: 5px 0 0 5px; }
.bf-fus-step .bf-fus-mn:last-child { border-radius: 0 5px 5px 0; }
.bf-fus-v {
    width: 34px; height: 24px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(201,168,76,.3);
    border-bottom: 1px solid rgba(201,168,76,.3);
    font-family: Georgia, serif; font-size: .76rem; color: #e8d38a;
}
.bf-fus-del {
    background: none; border: none; color: #8a4038; cursor: pointer;
    font-size: .9rem; padding: 0 3px; line-height: 1;
}
.bf-fus-del:hover { color: #e74c3c; }
.bf-fus-add {
    width: 100%; background: rgba(53,214,232,.08);
    border: 1px dashed rgba(53,214,232,.4); color: #35d6e8;
    border-radius: 7px; padding: 7px; cursor: pointer;
    font-family: Georgia, serif; font-size: .73rem; margin-top: 3px;
}
.bf-fus-add:hover { background: rgba(53,214,232,.14); }

/* O bloco de texto ao lado da arte no modal do seletor. Sem o flex:1 ele encolhe
   pro tamanho do conteudo e a frase do modo quebra em duas linhas curtas. */
.rfus-sel-txt { flex: 1; min-width: 0; }