/* ícones SVG (js/icones.js) — moldura na cor da raridade */
.pa-ic{--rc:#e8e8e8;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;
  border-radius:6px;font-style:normal;background:radial-gradient(circle at 50% 32%,#3a4058,#141722 75%) !important;
  border:2px solid var(--rc);box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 0 5px -1px var(--rc);box-sizing:border-box;overflow:visible}
.pa-ic .pa-svg,.pa-ic img{width:86%;height:86%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));pointer-events:none}
.pa-ic.r0{--rc:#d8d8d8}
.pa-ic.r1{--rc:#4fd26a}
.pa-ic.r2{--rc:#3f8cff}
.pa-ic.r3{--rc:#b55cff}
.pa-ic.r4{--rc:#ff9a1f}
.pa-ic.r5{--rc:#ff3b3b;animation:pa-ultra 1.6s ease-in-out infinite}
@keyframes pa-ultra{50%{box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 0 11px 1px #ff3b3b}}
.pa-q{position:absolute;right:1px;bottom:-1px;font:800 11px/1 "Segoe UI",sans-serif;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 2px #000;pointer-events:none}

/* habilidades: fundo pela natureza da magia */
.pa-sk{--rc:#8a8fa8;border-radius:8px}
.pa-sk.t-fis{--rc:#e0603a;background:radial-gradient(circle at 50% 32%,#6a2a1c,#1c0f0c 75%) !important}
.pa-sk.t-mag{--rc:#6a7cff;background:radial-gradient(circle at 50% 32%,#27306e,#0e1024 75%) !important}
.pa-sk.t-cura{--rc:#46d070;background:radial-gradient(circle at 50% 32%,#1d5a32,#0b1a10 75%) !important}
.pa-sk.t-buff{--rc:#f0c040;background:radial-gradient(circle at 50% 32%,#5a4816,#1a1508 75%) !important}
.pa-sk.t-debuff{--rc:#b56bff;background:radial-gradient(circle at 50% 32%,#45225e,#140a1c 75%) !important}
.pa-sk.t-reviver{--rc:#f3e3a0;background:radial-gradient(circle at 50% 32%,#5a5228,#1a170a 75%) !important}
.pa-sk.lend{--rc:#ff9a1f;box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 0 9px 0 #ff9a1f}

/* sistemas */
.pa-sis{display:inline-flex;width:26px;height:26px;vertical-align:middle}
.pa-sis .pa-svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.pb-ic .pa-sis{width:24px;height:24px}
.mc-baixo .ic .pa-sis{width:28px;height:28px}

/* encaixes da interface */
.ui-slot-at .pa-ic{width:36px;height:36px}
.ui-bcel .pa-ic{width:42px;height:42px}
.ui-eq-ic{width:40px;height:40px;border:0}
.ui-eq-ic .pa-ic{width:40px;height:40px}
.ui-skill{grid-template-columns:44px 40px 1fr auto}
.ui-skill .pa-sk{width:40px;height:40px}
.ui-apagado .pa-sk{filter:grayscale(.85) brightness(.7)}

/* bolsa: barra de ações do item selecionado (sem texto do item) */
.ui-bacoes{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--ui-fundo2,#1a1f2c);border:1px solid var(--ui-moldura2,#4a3a20);border-radius:6px;min-height:46px}
.ui-bacoes .pa-ic{width:40px;height:40px}
.ui-bacoes .ui-bts{display:flex;flex-wrap:wrap;gap:6px}

/* lojas em grade */
.ui-lgrade{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-top:6px}
.ui-lcel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:linear-gradient(#232a3c,#171b28);border:1px solid var(--ui-borda,#3a4058);border-radius:6px}
.ui-lcel .pa-ic{width:44px;height:44px}
.ui-lcel .ui-bt{padding:2px 6px;font-size:11px;min-width:0}
.ui-lcel .ui-lbts{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.ui-lcel.ui-apagado{opacity:.55}

/* batalha: itens só com ícone */
.bt-grade .bt-ic{display:flex;align-items:center;gap:8px;text-align:left}
.bt-grade .bt-ic .pa-ic{width:34px;height:34px}
.bt-grade .bt-soic{justify-content:center;padding:4px}
.bt-grade .bt-soic .pa-ic{width:42px;height:42px}

/* tooltip */
.pa-tip{position:fixed;z-index:9999;display:none;max-width:290px;padding:9px 11px;pointer-events:none;color:#e8e2d0;
  font:13px/1.35 "Segoe UI",system-ui,sans-serif;background:linear-gradient(#1d2232,#11141e);border:1px solid #c9a24a;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.65)}
.pa-tip p{margin:6px 0 0;color:#cfc8b6}
.pa-tip-top{display:flex;gap:9px;align-items:center}
.pa-tip-top .pa-ic{width:40px;height:40px}
.pa-tip-top b{display:block;font-size:14px}
.pa-tip-top small{display:block;font-size:11px;color:#9aa0b4}
.pa-tip-ls{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pa-tip-b{padding:1px 6px;border-radius:4px;background:rgba(80,200,110,.14);color:#7ee09a;font-size:12px}
.pa-tip-req{margin-top:6px;font-size:12px;color:#c9c2ae}
.pa-tip-ruim{color:#ff6a6a}
.pa-tip-ok{color:#7ee09a}
.pa-tip-pe{margin-top:6px;padding-top:5px;border-top:1px solid rgba(201,162,74,.3);font-size:11px;color:#9aa0b4}
.pa-tip-nat{padding:1px 7px;border-radius:4px;font-size:12px;font-weight:700}
.pa-tip-nat.t-fis{background:rgba(224,96,58,.2);color:#ff9a7a}
.pa-tip-nat.t-mag{background:rgba(106,124,255,.22);color:#a8b4ff}
.pa-tip-nat.t-cura,.pa-tip-nat.t-reviver{background:rgba(70,208,112,.18);color:#7ee09a}
.pa-tip-nat.t-buff{background:rgba(240,192,64,.18);color:#f3d36a}
.pa-tip-nat.t-debuff{background:rgba(181,107,255,.2);color:#d3a8ff}
.pa-tip-alvo{padding:1px 7px;border-radius:4px;font-size:12px;background:rgba(255,255,255,.08);color:#e8e2d0}

/* barra de atalhos: magias e uso na batalha */
.ui-slot-sk .ui-slot-q{font-size:9px}
.ui-sk-arr{display:inline-flex}
.ui-sk-arr.ui-arrastavel{cursor:grab}
html body.pa-em-batalha .ui-atalhos.ui-atalhos{display:flex!important;position:fixed!important;z-index:60!important;left:8px!important;right:auto!important;bottom:208px!important;top:auto!important;transform:scale(.72)!important;transform-origin:left bottom;opacity:.92}
html body.pa-em-batalha .ui-atalhos.ui-atalhos:hover{opacity:1}
body.pa-em-batalha .ui-atalhos.hidden{display:flex!important}
@media (max-width:760px){html body.pa-em-batalha .ui-atalhos.ui-atalhos{bottom:268px!important}}

/* 3 barras de atalhos */
.ui-atalhos{align-items:flex-end}
.ui-at-barras{display:flex;flex-direction:column;gap:4px}
.ui-at-linha{display:flex;gap:4px;align-items:center;padding:2px;border-radius:6px}
.ui-at-tres .ui-at-linha{opacity:.82}
.ui-at-tres .ui-at-linha.ui-at-ativa{opacity:1;background:rgba(240,207,116,.12);box-shadow:inset 0 0 0 1px rgba(240,207,116,.45)}
.ui-at-num{width:14px;text-align:center;font:800 11px "Segoe UI",sans-serif;color:#c9a24a;cursor:pointer;user-select:none}
.ui-at-ativa .ui-at-num{color:#ffe27a}
.ui-at-ctrl{display:flex;flex-direction:column;align-items:center;gap:2px;margin-left:4px}
.ui-at-ctrl button{width:24px;height:20px;padding:0;font-size:11px;line-height:18px;cursor:pointer;color:#ffe9a0;background:linear-gradient(#2a3042,#171b28);border:1px solid #6a5a30;border-radius:4px}
.ui-at-ctrl button:hover{border-color:#f0cf74}
.ui-at-ctrl button.ui-sel{background:linear-gradient(#5a4a1c,#2a220c);border-color:#f0cf74}
.ui-at-ctrl b{font:800 10px "Segoe UI",sans-serif;color:#ffe27a}
.ui-slot-at kbd{white-space:nowrap}
html body.mc-layout .pv-bar.pv-bar{bottom:calc(var(--ui-at-alt,54px) + 72px)!important}