/* FORJA DRACÔNICA (05/10): o brilho do ícone (src/visual/brilho-draconico.js), o selo do grau e a aba
   Criações do Ferreiro. O brilho é uma imagem pronta atrás da peça; só a opacity anima (leve). */
.dr-icone{position:relative;display:block;filter:none!important;overflow:visible}
.dr-icone>img{position:absolute;display:block;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.dr-icone>.dr-peca{inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.42))}
/* o brilho tem uma borda de 16/96 em volta da peça (o canvas de 128) */
.dr-icone>.dr-brilho{left:-16.67%;top:-16.67%;width:133.33%;height:133.33%;opacity:.5;will-change:opacity}
.dr-q0>.dr-brilho{opacity:.4}
.dr-brasa>.dr-brilho{animation:dr-brasa 3s infinite}
/* Tempestade: sem piscar (pedido do autor 05/10), o mesmo pulso suave da Geada e da Pedra */
.dr-geada>.dr-brilho,.dr-pedra>.dr-brilho,.dr-tempestade>.dr-brilho{animation:dr-pulso 3s ease-in-out infinite}
.dr-vazio>.dr-brilho{animation:dr-vazio 3s ease-in-out infinite;will-change:opacity,transform}
.dr-q0.dr-brasa>.dr-brilho{animation-name:dr-brasa-c}
.dr-q0.dr-geada>.dr-brilho,.dr-q0.dr-pedra>.dr-brilho,.dr-q0.dr-tempestade>.dr-brilho{animation-name:dr-pulso-c}.dr-q0.dr-vazio>.dr-brilho{animation-name:dr-vazio-c}
@keyframes dr-brasa{0%{opacity:.45}18%{opacity:.7}26%{opacity:.5}44%{opacity:.8}60%{opacity:.55}78%{opacity:.72}100%{opacity:.45}}
@keyframes dr-pulso{0%,100%{opacity:.42}50%{opacity:.82}}
@keyframes dr-vazio{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.045)}}
@keyframes dr-brasa-c{0%,100%{opacity:.35}30%{opacity:.55}50%{opacity:.4}75%{opacity:.6}}
@keyframes dr-pulso-c{0%,100%{opacity:.35}50%{opacity:.6}}
@keyframes dr-vazio-c{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.025)}}
/* Gráficos Leve e quem pediu menos movimento: o brilho fica parado */
.graphics-lite .dr-icone>.dr-brilho{animation:none!important;opacity:.55}
@media (prefers-reduced-motion:reduce){.dr-icone>.dr-brilho{animation:none!important;opacity:.55}}
/* no quadradinho do Ferreiro o ícone ocupa o lugar da <img> */
.fx-slot .dr-icone{width:100%;height:100%}

/* o selo do grau: a cor do dragão (dourado-escuro) */
.item-grau.item-grau-draconico{background:linear-gradient(90deg,#3a1d06,#8a4b0f 55%,#d89a2b);color:#ffe9b0;box-shadow:inset 0 0 0 1px rgba(255,214,140,.35)}
.item-grau-faixa.item-grau-draconico{background:linear-gradient(180deg,#d89a2b,#8a4b0f);color:#1d0f02}

/* a ficha do item: a Marca e o set elemental */
.ttip-marca{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:6px 8px;border-radius:8px;border:1px solid rgba(216,154,43,.45);background:rgba(58,29,6,.45)}
.ttip-marca strong{color:#ffd58a;font-size:calc(12px * var(--text-scale,1))}
.ttip-marca small{color:#e9d6b0;overflow-wrap:anywhere}
.dr-q-0{color:#cfc7b6}.dr-q-1{color:#7fc4ff}.dr-q-2{color:#ffcf4a}

/* ABA CRIAÇÕES */
.fx-criar .fx-dr-elementos{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:6px}
.fx-dr-el{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 2px;border-radius:8px;border:1px solid #3a3326;background:#151a21;color:#e8dcc0;cursor:var(--cur-mao,pointer);font:inherit;font-size:calc(11px * var(--text-scale,1));line-height:1.2;text-align:center}
.fx-dr-el img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.fx-dr-el b{font-size:calc(11px * var(--text-scale,1));white-space:nowrap}
.fx-dr-el small{color:#b9ad92;font-size:calc(10px * var(--text-scale,1));overflow-wrap:anywhere}
.fx-dr-el.sel{border-color:#d89a2b;box-shadow:0 0 0 1px #d89a2b inset;background:#2a1c0c}
.fx-dr-el.falta small{color:#ff8c7a}
.fx-dr-sacs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.fx-dr-sac{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;align-items:center;padding:4px 18px 4px 6px;border-radius:8px;border:1px solid #3a3326;background:#151a21;color:#e8dcc0;font:inherit;text-align:left;cursor:var(--cur-mao,pointer);min-width:0}
.fx-dr-sac img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.fx-dr-sac span{display:flex;flex-direction:column;min-width:0}
.fx-dr-sac b,.fx-dr-sac small{overflow-wrap:anywhere;font-size:calc(11px * var(--text-scale,1))}
.fx-dr-sac.sel{border-color:#d89a2b;background:#2a1c0c}
.fx-dr-sac.sel::after{content:"✓";position:absolute;top:3px;right:6px;color:#ffd58a;font-weight:700}
.fx-dr-chances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fx-dr-chances span{display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:8px;background:#151a21;border:1px solid #2c2a24;text-align:center;font-size:calc(11px * var(--text-scale,1))}
.fx-dr-chances b{font-size:calc(13px * var(--text-scale,1))}
.fx-dr-nota{display:block;color:#b9ad92;margin-top:4px;overflow-wrap:anywhere}
/* 22/10: a aba Dracônica (antes "Criações") diz em uma frase para que serve */
.fx-intro-draconica{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:8px 10px;border-radius:8px;background:#1a1712;border:1px solid #4a3a22;color:#e9dcc0;font-size:calc(12px * var(--text-scale,1));line-height:1.35}
.fx-intro-draconica img{width:28px;height:28px;flex:none;object-fit:contain}
.fx-intro-draconica span{min-width:0;overflow-wrap:anywhere}