/* Altar de Imbuição (imbuir.js, 28/09/2026): a aba Imbuir da Progressão em janela larga de três colunas, no molde do Diário
   de Quests — peças à esquerda, o altar com os efeitos e os níveis no meio, o escolhido com custo e prévia à direita.
   Moldura de bronze e ouro do layout; os títulos usam o .fh-t da ficha. O brilho do altar é CSS; a arte é do acervo. */
#jan.jimbuir { width: min(1560px, 97vw); height: min(900px, 92vh); max-height: 92vh; }
#jan.jimbuir #janC { display: block; padding: 12px; overflow-y: auto; }
.im { display: grid; grid-template-columns: 310px minmax(0, 1fr) 330px; gap: 12px; align-items: start; margin-top: 8px; }
.im .win { box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c, 0 0 0 3px #1a140c, inset 0 0 0 1px rgba(228,188,108,.14) !important; border-radius: 6px; }
.im-col { padding: 10px 12px 12px; min-width: 0; }
.im-meio { min-width: 0; }
.im .neg { color: #ff8060; }
.im-nota { color: var(--ink-muted); font-style: italic; margin: 6px 2px; }
.im-sub { margin: 14px 0 7px; color: var(--ink); font: 700 13px var(--font-display); letter-spacing: .05em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.im-sub small { color: var(--ink-muted); font: 400 11px var(--font-mono); text-transform: none; letter-spacing: 0; }

/* bolinhas dos espaços: cheia = imbuement ativo, vazia = livre */
.im-bol { display: inline-flex; gap: 3px; }
.im-bol i { width: 7px; height: 7px; border-radius: 50%; background: #07080a; box-shadow: 0 0 0 1px #8a6d3b; }
.im-bol i.cheia { background: radial-gradient(circle at 35% 35%, #fff2c0, #e4bc6c 45%, #9a6b10); box-shadow: 0 0 0 1px #000, 0 0 5px rgba(228,188,108,.8); }

/* esquerda: filtros, grade e a peça escolhida */
.im-fil { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.im-fil label { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; cursor: pointer; }
.im-fil select { width: 100%; box-sizing: border-box; }
.im-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; padding: 3px; }
.im-p { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #5c4a2c; border-radius: 5px; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2c261c, #070605 80%); }
.im-p img { width: 64%; height: 64%; object-fit: contain; image-rendering: pixelated; }
.im-p:hover { filter: brightness(1.2); }
.im-p.on { box-shadow: 0 0 0 2px #000, 0 0 0 3px #e4bc6c, 0 0 12px rgba(228,188,108,.45); }
.im-p.bolsa img { opacity: .6; }
.im-p em { position: absolute; top: 1px; left: 3px; font: 700 9px var(--font-mono); font-style: normal; text-shadow: 0 1px 1px #000; }
.im-p em.b { color: var(--ink-muted); }
.im-p .im-bol { position: absolute; bottom: 3px; left: 0; right: 0; justify-content: center; }
.im-pec { display: flex; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #2c2417; }
.im-pi { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 2px solid; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #3a3122, #070605 80%); }
.im-pi img { width: 48px; height: 48px; image-rendering: pixelated; }
.im-pec > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.im-pec b { font: 700 15px var(--font-display); }
.im-pec small { color: var(--ink-muted); font-size: 12px; }
.im-esp { display: flex; flex-direction: column; gap: 6px; }
.im-e { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 5px; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #2c2417; }
.im-e > span { flex: none; color: var(--ink-muted); font: 600 11px var(--font-mono); width: 56px; }
.im-e > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.im-e b { color: var(--ink); font-size: 13px; }
.im-e small { color: var(--ink-muted); font-size: 11px; }
.im-e img { width: 26px; height: 26px; image-rendering: pixelated; }
.im-e.cheio { box-shadow: 0 0 0 1px #8a6d3b, inset 0 0 12px rgba(228,188,108,.08); }
.im-e .bt { padding: 3px 8px; font-size: 11px; }
.im-veste { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* meio: passos, a cena do altar, os efeitos e os níveis */
.im-passos { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; color: var(--ink-muted); font: 600 13px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.im-passos span { display: flex; align-items: center; gap: 6px; }
.im-passos span b { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #07080a; box-shadow: 0 0 0 1px #5c4a2c; font: 700 12px var(--font-mono); }
.im-passos span.feito { color: var(--ink); } .im-passos span.feito b { box-shadow: 0 0 0 1px #5fe08a; color: #5fe08a; }
.im-passos span.on { color: #ffd98a; } .im-passos span.on b { background: linear-gradient(#ffd46a, #b07f1a); color: #1a1208; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(228,188,108,.6); }
.im-passos i { color: #5c4a2c; font-style: normal; }
.im-cena { position: relative; height: 250px; border-radius: 6px; overflow: hidden; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #5c4a2c, inset 0 0 60px rgba(0,0,0,.9); }
.im-altar { position: absolute; left: 50%; bottom: 18px; width: 128px; height: 128px; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(0,0,0,.9)); }
.im-brilho { position: absolute; left: 50%; top: 42%; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,217,138,.35), rgba(228,188,108,.12) 40%, transparent 70%); animation: imPulsa 3s ease-in-out infinite; }
.im-brilho.on { background: radial-gradient(circle, rgba(170,220,255,.45), rgba(120,160,255,.16) 40%, transparent 70%); }
.im-flut { position: absolute; left: 50%; top: 12px; width: 72px; height: 72px; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(255,217,138,.8)); animation: imFlutua 3s ease-in-out infinite; }
.im-leg { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; color: #ffd98a; font: 700 13px var(--font-display); text-shadow: 0 1px 2px #000; }
@keyframes imPulsa { 50% { opacity: .55; transform: translate(-50%, -50%) scale(.9); } }
@keyframes imFlutua { 50% { transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .im-brilho, .im-flut { animation: none; } }
.im-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.im-cats .bt { padding: 4px 10px; font-size: 12px; }
.im-efs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; }
.im-ef { display: flex; gap: 9px; padding: 9px; border-radius: 6px; cursor: pointer; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #2c2417; }
.im-ef:hover { box-shadow: 0 0 0 1px #8a6d3b; }
.im-ef.on { background: linear-gradient(rgba(58,46,23,.55), rgba(20,16,9,.6)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c, 0 0 12px rgba(228,188,108,.25); }
.im-ef img { flex: none; width: 40px; height: 40px; image-rendering: pixelated; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c; background: #07080a; }
.im-ef > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.im-ef b { color: var(--ink); font: 700 14px var(--font-display); }
.im-ef small { color: var(--ink-muted); font: 400 11px var(--font-mono); }
.im-ef p { margin: 3px 0 0; color: var(--ink); font-size: 12px; line-height: 1.3; }
.im-ef p b { font: 700 12px var(--font-mono); color: #ffd98a; }
.im-ef em { color: #5fe08a; font: 600 11px var(--font-mono); font-style: normal; }
.im-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.im-t { padding: 9px 10px; border-radius: 6px; cursor: pointer; text-align: center; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #2c2417; display: flex; flex-direction: column; gap: 2px; }
.im-t:hover { box-shadow: 0 0 0 1px #8a6d3b; }
.im-t.on { background: linear-gradient(rgba(58,46,23,.55), rgba(20,16,9,.6)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c, 0 0 12px rgba(228,188,108,.25); }
.im-t b { color: var(--ink); font: 700 15px var(--font-display); }
.im-t.on b { color: #ffd98a; }
.im-t small { color: var(--ink-muted); font: 400 10px var(--font-mono); }
.im-t p { margin: 4px 0; color: var(--ink); font-size: 12px; line-height: 1.3; }
.im-t em { color: var(--ink-muted); font: 600 11px var(--font-mono); font-style: normal; }

/* direita: o escolhido, material, ouro, prévia, aviso e botões */
.im-dir { display: flex; flex-direction: column; gap: 6px; }
.im-sel { display: flex; gap: 10px; align-items: center; }
.im-sel img { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c; background: #07080a; }
.im-sel b { display: block; color: #ffd98a; font: 700 17px var(--font-display); }
.im-sel small { color: var(--ink-muted); font: 400 11px var(--font-mono); }
.im-desc { margin: 2px 0 4px; color: var(--ink); font: 400 14px/1.4 var(--font-serif); }
.im-l { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-muted); font-size: 13px; padding: 2px 0; }
.im-l b { color: var(--ink); text-align: right; font-weight: 600; }
.im-l span { display: flex; align-items: center; gap: 4px; }
.im-l span img { width: 24px; height: 24px; image-rendering: pixelated; }
.im-l.falta b { color: #ff8060; }
.im-mat { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 5px; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #2c2417; }
.im-mat img { width: 32px; height: 32px; image-rendering: pixelated; }
.im-mat > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.im-mat b { color: var(--ink); font-size: 13px; } .im-mat small { color: var(--ink-muted); font-size: 11px; }
.im-mat > span { color: #5fe08a; font: 700 13px var(--font-mono); }
.im-mat.falta > span { color: #ff8060; }
.im-mat + .im-mat { margin-top: 5px; }
.im-mat.sem { opacity: .72; } .im-mat.sem small { color: #ff8060; }      /* produto que nenhuma criatura do Exori derruba ainda */
.im-link { align-self: flex-end; color: #7fd6ff; font-size: 12px; cursor: pointer; text-decoration: underline; }
.im-prev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.im-prev > div { padding: 7px 8px; border-radius: 5px; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #2c2417; min-width: 0; }
.im-prev h6 { margin: 0 0 5px; display: flex; justify-content: space-between; align-items: center; color: var(--ink); font: 700 12px var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.im-prev .im-l { flex-direction: column; gap: 0; font-size: 11px; }
.im-prev .im-l b { text-align: left; font-size: 12px; }
.im-prev .im-l.ef.novo b, .im-prev .im-l.ef.novo span { color: #5fe08a; }
.im-aviso { padding: 7px 10px; border-radius: 5px; background: rgba(120,20,10,.35); box-shadow: 0 0 0 1px #8a2a1a; color: #ff9a80; font-size: 12px; }
.im-aviso p { margin: 2px 0; }
.im-bots { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.im-aplica { padding: 9px; font-size: 15px; }

@media (max-width: 1400px) { .im { grid-template-columns: 270px minmax(0, 1fr) 290px; } }
@media (max-width: 1100px) {
  .im { grid-template-columns: minmax(0, 1fr); }
  .im-grade { max-height: 200px; }
}
@media (max-width: 700px) {
  #jan.jimbuir #janC { padding: 8px; }
  .im-cena { height: 190px; } .im-altar { width: 96px; height: 96px; } .im-flut { width: 64px; height: 64px; }
  .im-efs { grid-template-columns: minmax(0, 1fr); }
  .im-tiers { grid-template-columns: minmax(0, 1fr); }
  .im-passos { font-size: 11px; gap: 6px; }
  .im-prev { grid-template-columns: minmax(0, 1fr); }
}

/* marca da peça imbuída (interface.js: marcaImbue): uma pedrinha na cor do efeito no canto do slot; anel verde = renova sozinho */
.mb .eq div, .mb .eqMini div, .fh-q { position: relative; }
.imb-marcas { position: absolute; top: 2px; left: 2px; display: flex; gap: 2px; pointer-events: none; z-index: 2; }
.imb-marcas i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--c); border: 1px solid #000;
  box-shadow: 0 0 5px var(--c), inset 0 0 0 1px rgba(255,255,255,.35); animation: imbBrilha 2.4s ease-in-out infinite; }
.imb-marcas i.auto { outline: 1px solid #3ddc6a; outline-offset: 1px; }
.fh-q .imb-marcas i { width: 12px; height: 12px; }
@keyframes imbBrilha { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.4); } }
@media (prefers-reduced-motion: reduce) { .imb-marcas i { animation: none; } }
#dica .imb-l i, .imb-l i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 5px var(--c); }
.im-auto { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--ink-muted); cursor: pointer; }
.im-auto input { accent-color: #3ddc6a; width: 15px; height: 15px; }
.im-auto-g { margin: 8px 0 4px; color: var(--ink); } .im-auto-g small { color: var(--ink-muted); }