/* Sistemas do jogo (Prey, Imbuements, Proficiência, Tier/Forja, Charms): estilo comum.
   Cada sistema tem o seu arquivo (importado abaixo). Paleta: #FF6A00 #C98A42 #C6B19A #67402B #171313 */
@import url("/sys/prey.css");
@import url("/sys/imbuements.css");
@import url("/sys/proficiency.css");
@import url("/sys/forge.css");
@import url("/sys/charms.css");
@import url("/sys/tasks.css");
@import url("/sys/bless.css");
@import url("/sys/ammo.css");
@import url("/sys/stance.css");

.sys-win { width: min(820px, calc(100vw - 24px)); }
.sys-win .win-body { display: flex; flex-direction: column; gap: 10px; max-height: min(calc(100vh - 170px), 680px); overflow: auto; padding: 10px 12px 12px; }
.sys-item, .sys-outfit { image-rendering: pixelated; }
.sys-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.sys-tabs button { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; cursor: pointer; font: 700 13px Inter, sans-serif; color: #C6B19A; background: #120d0c; border: 1px solid #3a2a20; }
.sys-tabs button:hover { border-color: #67402B; color: #F3E7D3; }
.sys-tabs button.active { color: #fff4e0; background: linear-gradient(180deg, #a83d00, #5a1f00); border-color: #FFA347; box-shadow: 0 0 10px rgba(255, 106, 0, .35); }
.sys-card { padding: 10px; border: 1px solid #2c2320; border-radius: 9px; background: linear-gradient(180deg, #171211, #0d0908); }
.sys-card.hot { border-color: #67402B; box-shadow: 0 0 12px rgba(255, 106, 0, .18); }
.sys-h { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #C98A42; }
.sys-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #3a2a20, transparent); }
.sys-title { font: 700 19px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.sys-muted { font: 500 12px Inter, sans-serif; color: #8f7a64; }
.sys-text { font: 500 13px/1.45 Inter, sans-serif; color: #e6d6c2; }
.sys-grid { display: grid; gap: 8px; }
.sys-row { display: flex; align-items: center; gap: 8px; }
.sys-slot { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 7px; background: #0b0807; border: 1px solid #3a2a20; box-shadow: inset 0 0 8px #000; cursor: pointer; }
.sys-slot:hover { border-color: #C98A42; }
.sys-slot.sel { border-color: #FF8A2A; box-shadow: 0 0 0 1px #FF6A00, 0 0 12px rgba(255, 106, 0, .5), inset 0 0 8px #000; }
.sys-slot .sys-count { position: absolute; right: 2px; bottom: 0; font: 800 10px Inter, sans-serif; color: #F3E7D3; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.sys-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 700 11px Inter, sans-serif; color: #C6B19A; background: #1b1412; border: 1px solid #3a2a20; }
.sys-pill.hot { color: #171313; background: #C98A42; border-color: #FFC27A; }
.sys-pill.good { color: #8fe0a4; border-color: #1f4a2c; }
.sys-pill.bad { color: #ff8a6a; border-color: #5a2a18; }
.sys-btn { padding: 6px 14px; border-radius: 6px; cursor: pointer; font: 700 12.5px Inter, sans-serif; color: #F3E7D3; background: linear-gradient(180deg, #2a1d17, #160f0c); border: 1px solid #67402B; }
.sys-btn:hover:not(:disabled) { border-color: #C98A42; filter: brightness(1.15); }
.sys-btn.fire { color: #fff4e0; background: linear-gradient(180deg, #ff8a2a, #c94a00 55%, #7a2400); border-color: #ffb062; box-shadow: 0 0 10px rgba(255, 106, 0, .35); }
.sys-btn.danger { color: #ffd9cc; background: linear-gradient(180deg, #5a1a10, #36100a); border-color: #8a3020; }
.sys-btn:disabled { opacity: .45; cursor: default; }
.sys-cost { display: inline-flex; align-items: center; gap: 4px; font: 700 12px Inter, sans-serif; color: #FFC27A; }
.sys-bar { height: 8px; border-radius: 4px; background: #0b0807; border: 1px solid #2c2320; overflow: hidden; }
.sys-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #7a2400, #FF8A2A, #FFC27A); box-shadow: 0 0 8px rgba(255, 106, 0, .6); }
.sys-search { padding: 6px 9px; border-radius: 6px; background: #120d0c; border: 1px solid #3a2a20; color: #F3E7D3; font: 500 12.5px Inter, sans-serif; }
.sys-search:focus { outline: none; border-color: #C98A42; }
.sys-empty { padding: 26px 16px; text-align: center; border: 1px dashed #3a2a20; border-radius: 8px; font: italic 400 13px Inter, sans-serif; color: #8f7a64; }
.sys-loading { padding: 30px; text-align: center; font: 500 13px Inter, sans-serif; color: #a8957f; }