:root {
  --bg: #0f1013;
  --panel: #1a1c21;
  --panel-2: #23262d;
  --slot: #101114;
  --border: #33363e;
  --border-2: #4a4d56;
  --text: #e4e1d8;
  --muted: #9a978e;
  --gold: #e8b84a;
  --gold-2: #c9962d;
  --hp: #c8423a;
  --mp: #3a6fd0;
  --xp: #d9a520;
  --good: #5fc46a;
  --danger: #d0574a;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: transparent; /* o fundo fica no html, para a arte (body::before) aparecer */
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2em; }
.good { color: var(--good); }
.bad { color: var(--danger); }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.spr { display: inline-block; background-repeat: no-repeat; vertical-align: middle; image-rendering: pixelated; }
.cinzel, .ptitle, .win-head h2, .logo-big, .hunt-select { font-family: "Cinzel", Georgia, serif; }

/* ---------- botões (13/10/2026: mais sóbrios; o principal é bronze escuro com o texto dourado, não um bloco amarelo) ---------- */
.btn {
  background: linear-gradient(#2b2e35, #1f2126); border: 1px solid #464a53; border-radius: 3px; padding: 7px 12px; color: #d8d4ca;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .45); transition: border-color .12s, color .12s, background .12s;
}
.btn:hover { border-color: #7d6a42; color: #f1e8d2; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
.btn.primary { background: linear-gradient(#3d3324, #272016); border-color: #8a6c33; color: #ecd08e; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 214, 140, .14), 0 1px 2px rgba(0, 0, 0, .55); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#4a3d29, #2f271a); border-color: #b48a42; color: #f7e1a8; }
.btn.danger { background: linear-gradient(#3c1d1a, #2a1412); border-color: #7a3229; color: #f0c2ba; }
/* campos e listas de escolha no tema escuro (antes: o branco do navegador). :where = sem peso, as classes de cada tela mandam */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea) {
  background: #0e0f12; color: var(--text); border: 1px solid #3a3d45; border-radius: 3px; padding: 5px 8px; font: inherit; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea):focus { outline: none; border-color: #8a6c33; box-shadow: 0 0 0 2px rgba(138, 108, 51, .25); }
:where(select) option { background: #15171b; color: var(--text); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.big { width: 100%; padding: 13px; font-size: 16px; }

/* ---------- criação ---------- */
#create { max-width: 560px; margin: 0 auto; padding: 32px 16px; }
.logo-big { text-align: center; color: var(--gold); margin: 0 0 4px; font-size: 34px; }
.subtitle { text-align: center; color: var(--muted); margin: 0 0 24px; }
.field { display: block; margin-bottom: 16px; color: var(--muted); }
.field input {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 16px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text);
}
.voc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.voc-card { text-align: left; background: var(--panel); border: 2px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.voc-card.selected { border-color: var(--gold); background: var(--panel-2); }
.voc-card .spr { display: block; }
.voc-card strong { display: block; margin: 2px 0; }
.voc-card small { color: var(--muted); }

/* ---------- barra do topo ---------- */
#topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: linear-gradient(#1d1f25, #15161a); border-bottom: 1px solid var(--border);
}
.tb-left { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  font-family: "Cinzel", serif; font-weight: 700; color: #1a1205; background: linear-gradient(135deg, #f3c95a, #b5821f);
}
.tb-name { color: var(--gold); font-weight: 700; font-size: 16px; }
.tb-gold { color: #f1d27a; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe58a, #c08a1c); display: inline-block; }
.tb-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.tb-nav button {
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 10px; color: var(--text);
  display: flex; flex-direction: column; align-items: center; font-size: 12px; gap: 1px;
}
.tb-nav button span { font-size: 20px; }
.tb-nav button:hover { border-color: var(--border-2); background: var(--panel); }

/* ---------- layout em 3 colunas ---------- */
#layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 270px; gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 1920px; margin: 0 auto;
}
#col-left, #col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#col-center { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.panel { background: rgba(26, 28, 33, var(--panel-alpha, .88)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.panel.banked { display: none !important; } /* guardado no Layout do HUD */
.ptitle {
  margin: 0; padding: 8px 12px 6px; font-size: 13px; letter-spacing: .06em; color: var(--gold);
  border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(#22252c, #1b1d22);
}
.pbody { padding: 10px 12px; }

/* ---------- linhas chave/valor ---------- */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.kv span:nth-child(odd) { color: var(--muted); }
.kv span:nth-child(even) { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sk-title { margin: 12px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sk-row { margin-bottom: 7px; }
.sk-row .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 2px; }

/* ---------- barras ---------- */
.bar { position: relative; height: 14px; background: #0b0c0e; border: 1px solid #2c2e34; border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; transition: width .25s; }
.bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.bar.hp .fill { background: linear-gradient(#e0574d, #a8322b); }
.bar.mp .fill { background: linear-gradient(#4f86e6, #2c56a8); }
.bar.xp .fill { background: linear-gradient(#f0c040, #b8871a); }
.bar.thin { height: 6px; }
.bar.thin .fill { background: linear-gradient(#5c8fe8, #3a6fd0); }
.bars { display: grid; gap: 4px; margin: 8px 0 10px; }

/* ---------- centro: hunt, mapa ---------- */
.hunt-bar { display: flex; align-items: center; gap: 10px; }
.hunt-select {
  background: linear-gradient(#262930, #1b1d22); border: 1px solid var(--border-2); border-radius: 6px;
  padding: 7px 14px; color: var(--text); font-size: 16px; font-weight: 700; letter-spacing: .04em;
}
.session-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.map-wrap { position: relative; display: flex; justify-content: center; }
/* a tela do jogo ocupa a largura da coluna, sem passar da altura da janela (--scene-ar = colunas/linhas) */
.scene {
  display: block; width: min(100%, calc((100vh - 165px) * var(--scene-ar, 1.36))); height: auto;
  border: 2px solid var(--border-2); border-radius: 8px; background: #000;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.map-idle { width: 100%; }
.target-bar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; width: min(70%, 420px);
  background: rgba(12, 12, 14, .85); border: 1px solid #5a3a30; border-radius: 4px; padding: 3px 6px; text-align: center;
}
.target-bar .bar { height: 18px; }
.target-bar .name { font-family: "Cinzel", serif; font-size: 12px; letter-spacing: .08em; color: #f3d9b0; margin-top: 2px; }
.target-bar.boss { border-color: var(--gold); }
.target-bar.boss .name { color: var(--gold); }
.map-idle { padding: 14px; background: var(--panel); max-height: 70vh; overflow-y: auto; border: 2px solid var(--border-2); border-radius: 8px; }

/* ---------- lista de hunts ---------- */
.area-list { display: grid; gap: 8px; }
.area { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.area .icon { width: 56px; text-align: center; flex-shrink: 0; }
.area .info { flex: 1; min-width: 0; }
.area .info strong { display: block; }
.area .info small { color: var(--muted); }
.area .mons { display: flex; flex-wrap: wrap; }
.area .mons .spr { margin: -10px -6px 0 -10px; }
.area.locked { opacity: .45; }
.diff-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.diff-btns .btn { min-width: 92px; }
.hc-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hc-btn { background: var(--slot); border: 1px solid var(--border-2); border-radius: 4px; padding: 2px 7px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.hc-btn.on { border-color: var(--gold); color: var(--gold); }
.target-bar .phase { font-size: 11px; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.area.current { border-color: var(--gold); }

/* ---------- barra de magias ---------- */
.hotbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; min-height: 52px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.hb-label { font-size: 11px; font-weight: 700; color: var(--gold); padding: 0 6px; border: 1px solid var(--border-2); border-radius: 4px; height: 40px; display: grid; place-items: center; }
.hb-sep { width: 1px; height: 36px; background: var(--border-2); margin: 0 4px; }
.hb {
  position: relative; width: 42px; height: 42px; padding: 0; border-radius: 5px; display: grid; place-items: center;
  background: var(--slot); border: 1px solid var(--border-2);
}
.hb:hover { border-color: var(--gold); }
.hb .cd { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; font-weight: 800; font-size: 15px; border-radius: 5px; }
.hb .mana { position: absolute; right: 1px; bottom: -1px; font-size: 10px; font-weight: 700; color: #9cc0ff; text-shadow: 0 1px 2px #000; }
.hb-vazio { align-self: center; font-size: 11px; padding: 0 6px; }
.hb.off { filter: grayscale(1) brightness(.5); }
.hb.off::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #ff6a5a; font-weight: 900; font-size: 22px; filter: none; }
.hb.nomana .mana { color: var(--danger); }

/* ---------- chat / log ---------- */
.chat { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.chat-tabs { display: flex; gap: 2px; padding: 4px 4px 0; border-bottom: 1px solid var(--border); }
.chat-tabs button { background: none; border: 0; padding: 6px 12px; color: var(--muted); border-radius: 6px 6px 0 0; }
.chat-tabs button.active { background: var(--panel-2); color: var(--text); font-weight: 700; }
.log { padding: 6px 10px; height: 170px; overflow-y: auto; font-size: 13px; line-height: 1.5; }
.log div { padding: 1px 0; }
.log .t { color: #6e6b64; margin-right: 6px; font-variant-numeric: tabular-nums; }
.log .level { color: var(--gold); font-weight: 600; }
.log .skill { color: #8fc4ff; }
.log .loot { color: #b9e08a; }
.log .boss { color: #ffb050; font-weight: 700; }
.log .death { color: var(--danger); font-weight: 600; }

/* ---------- personagem e equipamento ---------- */
#char-head { display: flex; align-items: center; gap: 10px; }
#char-head .spr { background-color: var(--slot); border: 1px solid var(--border); border-radius: 6px; }
#char-head b { color: var(--gold); font-size: 15px; display: block; }
#char-head small { color: var(--muted); }
.equip-grid { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; justify-content: center; }

/* ---------- slots de item (estilo Tibia) ---------- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; justify-content: start; max-height: 180px; overflow-y: auto; }
.slot {
  position: relative; width: 40px; height: 40px; padding: 0; background: var(--slot); border: 1px solid #2c2e34; border-radius: 4px;
  display: grid; place-items: center;
}
.equip-grid .slot { width: 44px; height: 44px; }
.slot:hover { border-color: var(--gold); }
.slot .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.slot .ph { font-size: 10px; color: #4a4c52; text-transform: uppercase; }
.slot.empty { cursor: default; }
.slot.empty:hover { border-color: #2c2e34; }
.slot.blank { visibility: hidden; }

/* ---------- popover de item ---------- */
#popover {
  position: absolute; z-index: 40; width: 250px; background: #16171b; border: 1px solid var(--gold-2); border-radius: 8px;
  padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
#popover .ph-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
#popover b { color: var(--gold); }
#popover small { color: var(--muted); display: block; margin-bottom: 8px; }
#popover .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.req-bad { color: var(--danger); }

/* ---------- janela ---------- */
#window { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.win-box {
  width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--gold-2); border-radius: 10px; overflow: hidden;
}
.win-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(#24272e, #1b1d22); }
.win-head h2 { margin: 0; font-size: 17px; color: var(--gold); }
.win-close { background: none; border: 0; font-size: 18px; color: var(--muted); }
.win-body { padding: 12px 14px; overflow-y: auto; }
.item-list { display: grid; gap: 6px; }
.item { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.item .icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--slot); border-radius: 5px; flex-shrink: 0; position: relative; }
.item .count { position: absolute; right: 1px; bottom: -2px; font-size: 11px; font-weight: 700; text-shadow: 0 0 2px #000; }
.item .info { flex: 1; min-width: 0; }
.item .info small { display: block; color: var(--muted); }
.item .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.item.locked { opacity: .45; }
.settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
.settings input { width: 72px; padding: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); border-radius: 6px; font-size: 15px; }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50; transform: translateX(-50%);
  background: #000d; border: 1px solid var(--gold-2); padding: 8px 14px; border-radius: 8px; opacity: 0; transition: opacity .25s;
  pointer-events: none; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { opacity: 1; }

/* ---------- telas menores ---------- */
@media (max-width: 1250px) {
  #layout { grid-template-columns: 230px minmax(0, 1fr) 260px; gap: 10px; padding-inline: 10px; }
}
@media (max-width: 1000px) {
  /* celular/tablet: mapa primeiro, depois personagem e bolsas, depois skills */
  #layout { display: flex; flex-direction: column; padding-inline: 10px; }
  #col-center { order: 1; }
  #col-right { order: 2; }
  #col-left { order: 3; }
  .tb-nav button { padding: 4px 6px; }
  .log { height: 130px; }
  .hunt-select { font-size: 14px; padding: 6px 10px; }
}
@media (max-width: 520px) {
  #topbar { padding-inline: 10px; }
  .tb-nav { width: 100%; justify-content: space-between; }
  .voc-list { gap: 8px; }
  .item { flex-wrap: wrap; }
  .item .actions { width: 100%; }
  .hb { width: 38px; height: 38px; }
}

/* ---------- criação da party ---------- */
.voc-rows { display: grid; gap: 8px; margin-bottom: 18px; }
.voc-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.voc-row .info { flex: 1; min-width: 0; }
.voc-row .info strong { display: block; color: var(--gold); }
.voc-row .info small { color: var(--muted); display: block; margin-bottom: 4px; }
.voc-row input[type=text], .voc-row input:not([type]) { width: 100%; padding: 7px 9px; background: var(--slot); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); font-size: 15px; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }

/* ---------- etiquetas de vocação ---------- */
.voc-tag, .hb-label { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 4px; border: 1px solid; }
.v-knight { color: #ff8a6a; border-color: #8a3a2a; }
.v-paladin { color: #f0c35a; border-color: #8a6a24; }
.v-sorcerer { color: #c09aff; border-color: #5a3a8a; }
.v-druid { color: #6ad08a; border-color: #2a6a3a; }
.v-monk { color: #ffb070; border-color: #8a5a2a; }
.tabs-mini { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tabs-mini button { display: flex; align-items: center; gap: 2px; padding: 0 6px 0 0; background: var(--slot); border: 1px solid var(--border-2); border-radius: 5px; font-size: 11px; font-weight: 700; }
.tabs-mini button.on { border-color: var(--gold); color: var(--gold); }
.voc-line { font-family: "Cinzel", serif; color: var(--gold); margin-bottom: 6px; }

/* ---------- barra de magias em grupos ---------- */
.hotbar { align-items: stretch; }
.hb-group { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--border-2); }
.hb-group:last-child { border-right: 0; }
.hb-label { height: 40px; display: grid; place-items: center; }

/* ---------- cartões da party ---------- */
#party { display: grid; gap: 8px; }
.pcard { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.pcard.inactive { opacity: .5; }
.pcard.dead { border-color: var(--danger); }
.pcard-head { display: flex; align-items: center; gap: 6px; }
.pname { flex: 1; min-width: 0; }
.pname b { color: var(--gold); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname small { color: var(--muted); font-size: 11px; }
.role { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; }
.r-tank { background: #3a2a1a; color: #ffb070; }
.r-dps { background: #2a2a3a; color: #a0b0ff; }
.r-sup { background: #1a3a2a; color: #7ae0a0; }
.mini { background: var(--slot); border: 1px solid var(--border-2); border-radius: 4px; width: 24px; height: 22px; padding: 0; line-height: 1; }
.pcard-body { display: flex; align-items: center; gap: 6px; }
.pcard-body .bars { flex: 1; margin: 4px 0; gap: 3px; }
.pcard-body .bar { height: 12px; }
.pcard-more { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.pcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; justify-content: space-between; }
.add-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Helper (layout do Baiak) ---------- */
#window.wide .win-box { max-width: 900px; }
#window.wide .win-head { display: none; }
#window.wide .win-body { padding: 0; }
.helper { display: flex; flex-direction: column; min-height: 520px; background: #2b2b2b; }
.helper-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #3c3c3c; flex-wrap: wrap; }
.htabs, .hmodes { display: flex; gap: 6px; flex-wrap: wrap; }
.htabs button { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 2px; background: #202020; border: 1px solid #3c3c3c; border-radius: 5px; font-weight: 800; font-size: 13px; color: #ccc; }
.htabs button.on { border-color: var(--gold); color: #fff; }
.hmodes button { padding: 7px 14px; background: #202020; border: 1px solid #3c3c3c; border-radius: 5px; font-weight: 700; color: #ccc; }
.hmodes button.on { background: #ece7dc; color: #1a1a1a; }
.hmodes button:disabled { opacity: .5; }
.helper-main { display: grid; grid-template-columns: 220px 1fr; flex: 1; }
.hnav { background: #1f1f1f; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.hnav button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; background: none; border: 1px solid transparent; border-radius: 6px; font-weight: 700; color: #cfcfcf; font-size: 15px; }
.hnav button span { width: 18px; text-align: center; }
.hnav button.on { background: #2f2f33; border-color: #4a4a4f; border-left: 3px solid #e8e8e8; color: #fff; }
.hbody { padding: 18px 22px; overflow-y: auto; max-height: 62vh; }
.hbody h4 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #3c3c3c; font-size: 17px; }
.hrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.hlabel { width: 110px; color: #bbb; }
.hpick { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: #3a3a3a; border: 1px solid #444; border-radius: 6px; padding: 4px 8px; min-height: 42px; }
.hpick select { flex: 1; min-width: 0; }
.lt { color: #999; }
.helper select { background: #1c1c1c; color: #eee; border: 1px solid #555; border-radius: 6px; padding: 6px 8px; font-size: 14px; }
.helper-foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid #3c3c3c; }
.spell-list { display: grid; gap: 6px; }
.spell-row { display: flex; align-items: center; gap: 10px; background: #333; border: 1px solid #444; border-radius: 6px; padding: 6px 10px; }
.spell-row .info { flex: 1; min-width: 0; }
.spell-row small { display: block; color: #aaa; }
.spell-row.locked { opacity: .45; }
.spell-row input[type=checkbox], .hrow input[type=checkbox] { width: 18px; height: 18px; }
.minmobs { font-size: 12px; color: #aaa; }
.minmobs select { padding: 2px 4px; }
.formation { margin: 8px 0; max-width: 360px; }
.fhead { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 11px; color: #999; text-align: center; margin-bottom: 4px; }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fcell { min-height: 34px; background: #222; border: 1px solid #444; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; }
.formation:has(.fgrid.two) { max-width: 260px; }
.fgrid.two, .formation:has(.fgrid.two) .fhead { grid-template-columns: repeat(2, 1fr); }
.fgrid.two .fcell { min-height: 44px; cursor: pointer; padding: 0; }
.fgrid.two .fcell:hover { border-color: #888; }
.fgrid.two .fcell.mine { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.fgrid.two .fcell.clash { background: #3a2420; }
@media (max-width: 700px) {
  .helper-main { grid-template-columns: 1fr; }
  .hnav { flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .hnav button { padding: 7px 10px; font-size: 13px; }
  .hbody { max-height: none; padding: 14px; }
  .hlabel { width: auto; }
}
.hb-more { font-size: 20px; color: var(--muted); width: 28px; }

/* ---------- Helper: botões de opção, equipamento, combo ---------- */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.opt { padding: 12px; background: #353535; border: 1px solid #444; border-radius: 6px; font-weight: 700; color: #aaa; }
.opt.on { background: #5a4a22; border-color: #8a7232; color: #f3c95a; }
.hnum { width: 70px; background: #1c1c1c; color: #eee; border: 1px solid #555; border-radius: 6px; padding: 6px 8px; font-size: 14px; margin: 0 4px; }
.gtitle { font-size: 12px; letter-spacing: .06em; color: #aaa; margin: 12px 0 6px; }
.gear-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.gear-tabs button { padding: 12px; background: #353535; border: 1px solid #444; border-radius: 6px; font-weight: 700; color: #aaa; }
.gear-tabs button.on { background: #5a4a22; color: #f3c95a; border-color: #8a7232; }
.gear-box { border: 1px solid #444; border-radius: 8px; padding: 12px; }
.gear-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.gear-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gear-cols select { width: 100%; }
.gpick { display: flex; align-items: center; gap: 8px; background: #3a3a3a; border: 1px solid #444; border-radius: 6px; padding: 4px 8px; min-height: 42px; }
.gpick select { flex: 1; min-width: 0; }
.combo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; min-height: 60px; }
.combo-ic { position: relative; padding: 2px; background: #1c1c1c; border: 1px solid #555; border-radius: 6px; cursor: grab; }
.combo-ic.sel { border-color: var(--gold); box-shadow: 0 0 0 2px #8a7232; }
.combo-ic .minb { position: absolute; left: 2px; top: 1px; font-size: 11px; font-weight: 800; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.combo-ic .ord { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #ccc; text-shadow: 0 0 2px #000; }
.combo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; margin-bottom: 8px; }
.presets { display: grid; gap: 6px; }
.preset { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #121212; border-radius: 6px; cursor: pointer; min-height: 48px; }
.preset b { width: 16px; }
.preset-btns { margin-left: auto; display: flex; gap: 4px; }
.hrow.locked { opacity: .5; }
@media (max-width: 700px) { .gear-cols, .opt-grid { grid-template-columns: 1fr; } }

/* botões de dificuldade na lista de hunts */
.btn.diff-easy { background: linear-gradient(#3f8f3a, #2a6a26); border-color: #5fc46a; color: #f0fff0; font-weight: 600; }
.btn.diff-medium { background: linear-gradient(#f3e08a, #d8c25a); border-color: #fff0a0; color: #2a2208; font-weight: 600; }
.btn.diff-hard { background: #5a231d; border-color: var(--danger); color: #ffe8e4; font-weight: 600; }
.btn.diff-medium .muted { color: #5a4a10; }
.btn.diff-easy .muted, .btn.diff-hard .muted { color: rgba(255, 255, 255, .7); }

/* ---------- fundo: arte do Tibia 8.6 bem suave (véu escuro por cima, como no Baiak Idle) ---------- */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background: url("../assets/ui/bg-tibia-8.6.jpg") center top / cover no-repeat; }
body::after { z-index: -1; background: var(--bg); opacity: .7; }
#topbar { background: linear-gradient(rgba(29, 31, 37, .92), rgba(21, 22, 26, .92)); }@media (max-width: 700px) { body::after { opacity: .8; } }

/* ---------- escolher quem vai na hunt (só em PZ) ---------- */
.party-pick { margin-bottom: 10px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; text-align: left; opacity: .55; }
.pick span { display: flex; flex-direction: column; line-height: 1.15; }
.pick small { color: var(--muted); font-size: 11px; }
.pick i { font-style: normal; color: var(--good); width: 12px; }
.pick.on { opacity: 1; border-color: var(--good); }
.pick:disabled { cursor: not-allowed; }

/* ---------- treino ---------- */
.train-card { border-color: #3a5a3a; }
.pz { font-size: 10px; font-weight: 800; color: #7ae0a0; border: 1px solid #2a6a3a; border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }
.train-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.train-row .tr-lvl { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Helper: curar aliado ---------- */
.friend-tbl { width: 100%; border-collapse: collapse; margin: 10px 0; }
.friend-tbl th { text-align: left; font-size: 12px; letter-spacing: .05em; color: #aaa; padding: 4px 6px; font-weight: 600; }
.friend-tbl th:not(:first-child), .friend-tbl td:not(:first-child) { text-align: right; width: 110px; }
.friend-tbl td { padding: 5px 6px; }

/* ---------- analyzers: supply, damage, damage taken ---------- */
.pmin { background: none; border: 1px solid var(--border-2); color: var(--muted); border-radius: 4px; width: 22px; height: 20px; line-height: 1; padding: 0; font-weight: 700; }
.pmin:hover { color: var(--gold); border-color: var(--gold); }
.panel.min .pbody { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.chip { background: var(--slot); border: 1px solid var(--border-2); color: var(--muted); border-radius: 3px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.chip.on { border-color: var(--gold); color: var(--gold); }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin-top: 8px; }
.sup-grid .slot { cursor: default; }
.el-row { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; }
.el-row > i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.el-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-row b, .dm-top span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.el-row small, .dm-top small { color: var(--muted); font-weight: 400; }
.dm-row { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.dm-ic { width: 28px; flex: none; display: flex; align-items: flex-start; justify-content: center; }
.dm-main { flex: 1; min-width: 0; }
.dm-top { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.dm-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-bar { height: 3px; background: #0b0c0e; border-radius: 2px; margin: 3px 0; }
.dm-bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.dm-sub { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--muted); }

/* ---------- loja: gastos ---------- */
.spent-total { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .06em; font-weight: 700; margin: 6px 0; }
.spent-total b { display: inline-flex; align-items: center; gap: 6px; background: #0b0c0e; border: 1px solid var(--border-2); border-radius: 6px; padding: 4px 10px; color: var(--gold); letter-spacing: 0; }
.spent-list { display: flex; flex-direction: column; }
.spent-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.spent-row .icon { width: 28px; display: flex; justify-content: center; }
.spent-row .nm { flex: 1; min-width: 120px; }
.spent-row b { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: var(--gold); }

/* ---------- console: opções das Configurações ---------- */
body[data-logfont="s"] .log { font-size: 12px; }
body[data-logfont="l"] .log { font-size: 15px; }
body.log-notime .log .t { display: none; }
#scene { image-rendering: pixelated; }

/* ---------- janela de Configurações (mesmo molde do Helper) ---------- */
.cfg-title { margin: 0; font-family: Cinzel, serif; color: var(--gold); font-size: 18px; }
.cfg .hbody h4 { text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.cfg-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; flex-wrap: wrap; }
.cfg-label { width: 150px; color: #ddd; font-size: 15px; }
.cfg-opts { display: flex; gap: 6px; flex: 1; min-width: 220px; flex-wrap: wrap; }
.cfg-opts button { flex: 1; min-width: 80px; padding: 8px 10px; background: #4a4a4c; border: 1px solid #5c5c5e; border-radius: 4px; color: #e8e8e8; font-weight: 700; }
.cfg-opts button.on { background: #f4f4f4; border-color: #fff; color: #1a1a1a; font-weight: 500; }
.cfg-opts button:disabled { opacity: .45; }
.cfg-help { color: #aaa; font-size: 13px; margin: 2px 0 8px; line-height: 1.45; }
.cfg-help-list { color: #ccc; font-size: 14px; line-height: 1.6; padding-left: 18px; margin: 0 0 14px; }
.cfg-slider { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.cfg-slider input { flex: 1; accent-color: #f4f4f4; }
.cfg-slider b { width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.cfg select { background: #222; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 6px 8px; min-width: 220px; }
.cfg-save { width: 100%; margin: 8px 0; background: #1a1a1a; color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 8px; font-family: monospace; font-size: 12px; resize: vertical; }
/* painel flutuando por cima da tela (Layout do HUD) */
.panel.floating { position: fixed; z-index: 20; width: 260px; max-height: 75vh; overflow-y: auto; box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.panel.floating > .ptitle { cursor: move; touch-action: none; user-select: none; position: sticky; top: 0; z-index: 1; }
.pdock { background: none; border: 0; padding: 0 0 0 6px; font-size: 13px; cursor: pointer; margin-left: auto; }
.panel.floating > .ptitle > .pmin, .panel.floating > .ptitle > .btn { margin-left: 6px; }
.hud-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #222; border: 1px solid #3c3c3c; border-radius: 6px; padding: 10px; }
.hud-col { border: 1px dashed #555; border-radius: 6px; padding: 6px; min-height: 120px; display: flex; flex-direction: column; gap: 6px; }
.hud-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #ccc; text-align: center; }
.hud-item { display: flex; align-items: center; gap: 3px; background: #4a4a4c; border: 1px solid #5c5c5e; border-radius: 4px; padding: 5px 6px; cursor: grab; }
.hud-item .nm { flex: 1; font-weight: 700; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-item button { background: none; border: 0; color: #ccc; padding: 2px 4px; font-size: 12px; }
.hud-item button:hover { color: #fff; }
.key-tbl { width: 100%; border-collapse: collapse; margin: 10px 0; }
.key-tbl td { padding: 6px 4px; border-bottom: 1px solid #3a3a3a; }
.key-tbl td:last-child { text-align: right; }
.key { min-width: 64px; padding: 5px 12px; background: #4a4a4c; border: 1px solid #6a6a6c; border-bottom-width: 3px; border-radius: 5px; color: #fff; font-weight: 800; display: inline-block; text-align: center; }
.key.wait { background: #f4f4f4; color: #1a1a1a; }
.key.fixed { opacity: .7; }
@media (max-width: 700px) {
  .cfg-label { width: 100%; }
  .hud-cols { grid-template-columns: 1fr; }
}

/* ---------- paladin: aljava (quiver) e besta ---------- */
.quiver-box, .xbow-box { margin: 8px 0 2px; padding: 8px; background: #16171b; border: 1px solid var(--border); border-radius: 6px; }
.quiver-box { display: flex; align-items: center; gap: 8px; }
.quiver-box > b, .xbow-box > b { font-size: 12px; letter-spacing: .06em; color: #ddd; }
.quiver-box > b { flex: 1; }
.ammo-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; padding: 4px 2px; background: var(--slot); border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer; }
.ammo-slot:hover { border-color: var(--gold); }
.ammo-slot small { font-size: 10px; color: var(--muted); }
.ammo-slot .cnt { position: absolute; right: 3px; top: 2px; font-size: 10px; font-weight: 700; text-shadow: 0 0 2px #000; }
.xbow-box { display: flex; flex-direction: column; gap: 6px; }
.tog { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tog input { display: none; }
.tog span { width: 30px; height: 16px; border-radius: 8px; background: #444; position: relative; transition: background .15s; flex: none; }
.tog span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ddd; transition: left .15s; }
.tog input:checked + span { background: #e8c23a; }
.tog input:checked + span::after { left: 16px; background: #fff; }
.item.current { border-color: var(--gold); }
.ammo-price { display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; }
.ammo-price b { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
.ammo-price small { color: var(--muted); }
/* ---------- dica das magias (passar o mouse) ---------- */
#tip { position: fixed; z-index: 60; max-width: 300px; padding: 8px 10px; background: rgba(16, 17, 20, .97); border: 1px solid #4a4c55; border-radius: 6px; font-size: 13px; line-height: 1.45; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
#tip .tip-name { color: #8fb8ff; }

/* ---------- sala de teste e presets com nome ---------- */
.test-ctl { display: flex; gap: 6px; margin-left: auto; margin-right: 8px; }
.test-card { border-color: #3a4a6a; }
.preset { display: flex; align-items: center; gap: 8px; }
.preset-name { width: 110px; background: #1a1a1a; color: #eee; border: 1px solid #444; border-radius: 4px; padding: 4px 6px; font-size: 13px; }
.preset-icons { display: flex; gap: 2px; flex: 1; min-width: 0; cursor: pointer; padding: 2px; border-radius: 4px; }
.preset-icons:hover { background: #333; }
/* ---------- caixinha da party (barra da hunt) ---------- */
.party-box { display: flex; align-items: center; gap: 4px; margin-left: auto; background: rgba(16, 17, 20, .85); border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px; }
.pb-title { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--muted); margin-right: 2px; }
.pb { display: flex; align-items: center; gap: 2px; padding: 1px 6px 1px 2px; border: 1px solid #333; border-radius: 6px; cursor: pointer; opacity: .5; font-size: 11px; }
.pb input { width: 13px; height: 13px; margin: 0 2px; }
.pb.on { opacity: 1; border-color: #3d6a44; background: #1c2a20; }
.pb.lock { cursor: not-allowed; }
.party-box + .test-ctl { margin-left: 6px; }
@media (max-width: 700px) { .pb b { display: none; } .pb-title { display: none; } }

/* ---------- lista de hunts ---------- */
#window.big .win-box { max-width: 1120px; width: 100%; }
.hunts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.hrange { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); padding-right: 10px; }
.hrange-t { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-align: center; margin-bottom: 4px; }
.hrange button { background: none; border: 1px solid transparent; border-radius: 6px; padding: 7px 8px; color: #ccc; font-weight: 700; text-align: left; }
.hrange button small { color: var(--muted); font-weight: 400; }
.hrange button.on { background: #2c2f36; border-color: #555; border-left: 3px solid #eee; color: #fff; }
.hspecial { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.hspecial .area { margin: 0; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; }
.hcard { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px; background: #16171b; border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.hcard.current { border-color: var(--gold); }
.hcard.locked { opacity: .5; }
.hmons { display: flex; justify-content: center; align-items: flex-end; min-height: 44px; flex-wrap: wrap; }
.hname { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.hname b { font-size: 16px; }
.stars { color: #f0c040; font-size: 12px; letter-spacing: -1px; }
.stars i { color: #4a4a4a; font-style: normal; }
.htag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px; letter-spacing: .05em; }
.htag.loot { background: #4a3c12; color: #f0c050; }
.htag.exp { background: #25254a; color: #a8a8ff; }
.hline { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.chipc { background: #22262c; border-radius: 4px; padding: 1px 6px; color: #ccc; }
.chipc.ok { color: var(--good); background: #1c2a20; }
.hstats { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; width: 100%; border-top: 1px solid var(--border); padding-top: 5px; flex-wrap: wrap; }
.hstats span { color: var(--muted); }
.hstats.empty { color: #666; }
.hbtns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.hcard .hc-row { justify-content: center; }
@media (max-width: 760px) {
  .hunts { grid-template-columns: 1fr; }
  .hrange { flex-direction: row; overflow-x: auto; border-right: 0; padding: 0 0 6px; }
  .hrange-t { display: none; }
  .hrange button { white-space: nowrap; }
  .hspecial { grid-template-columns: 1fr; }
}

/* ---------- detalhes da hunt / cartão do monstro ---------- */
.hinfo-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hinfo-top > div:nth-child(2) { flex: 1; }
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.mcards.one { max-width: 320px; }
.mcard { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #16171b; border: 1px solid var(--border); border-radius: 10px; }
.mcard .mspr { display: flex; justify-content: center; min-height: 66px; align-items: flex-end; }
.mcard .mname { text-align: center; font-size: 15px; }
.mcard > small { text-align: center; }
.rbars { display: flex; flex-direction: column; gap: 4px; }
.rbar { display: grid; grid-template-columns: 18px 1fr 40px; align-items: center; gap: 6px; font-size: 11px; }
.rbar .rel { font-style: normal; text-align: center; font-weight: 800; }
.rbar span { height: 7px; background: #0b0c0e; border-radius: 4px; overflow: hidden; }
.rbar span b { display: block; height: 100%; background: #e6e6e6; border-radius: 4px; }
.rbar.weak span b { background: #4ccf4c; }
.rbar.strong span b { background: #e8c23a; }
.rbar.immune span b { background: #d04a3a; }
.rbar small { color: var(--muted); text-align: right; }
.mloot { display: flex; flex-wrap: wrap; gap: 3px; }
.mloot .slot { width: 36px; height: 36px; cursor: default; }

/* ---------- Cyclopedia ---------- */
.cyclo { display: flex; flex-direction: column; background: #20232b; min-height: 560px; }
.cy-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
.cy-tabs button { padding: 10px; background: #2a2e38; border: 1px solid #3c4250; border-radius: 4px; color: #ccc; font-weight: 800; letter-spacing: .08em; }
.cy-tabs button.on { border-color: #6a8ad0; color: #fff; box-shadow: inset 0 0 0 1px #6a8ad0; }
.cy-main { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px; padding: 0 10px; flex: 1; }
.cy-side { display: flex; flex-direction: column; gap: 8px; }
.cy-search { width: 100%; background: #14161b; color: #eee; border: 1px solid #3c4250; border-radius: 4px; padding: 7px 8px; }
.cy-cats { display: flex; flex-direction: column; gap: 2px; max-height: 330px; overflow-y: auto; }
.cy-cats-t { font-size: 10px; letter-spacing: .08em; color: var(--muted); margin: 6px 0 2px; }
.cy-cats button { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 4px; padding: 5px 6px; color: #ccc; text-align: left; font-size: 13px; }
.cy-cats button span { width: 18px; text-align: center; }
.cy-cats button small { margin-left: auto; color: var(--muted); }
.cy-cats button.on { border-color: #c8a24a; background: #2c2a22; color: #fff; }
.cy-prog { background: #16181e; border: 1px solid #3c4250; border-radius: 6px; padding: 8px; font-size: 12px; }
.cy-prog b { color: var(--gold); letter-spacing: .05em; }
.cy-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cy-head > b { letter-spacing: .06em; }
.cy-head label { margin-left: auto; font-size: 12px; color: var(--muted); }
.cy-head select { background: #14161b; color: #eee; border: 1px solid #3c4250; border-radius: 4px; padding: 4px; }
.cy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cy-grid.items { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cy-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; color: #eee; cursor: pointer; }
.cy-card:hover { border-color: #6a8ad0; }
.cy-card b { font-size: 13px; text-align: center; }
.cy-card .cy-spr { height: 52px; display: flex; align-items: flex-end; }
.cy-card small { font-size: 12px; color: #ccc; }
.cy-card.done small { color: var(--good); }
.cy-card .bar { width: 100%; }
.cy-card .bar.ok .fill { background: linear-gradient(#7bd06a, #4a9a3a); }
.cy-item { display: flex; gap: 8px; align-items: center; padding: 6px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.cy-item small { display: block; color: var(--muted); font-size: 11px; }
.tag-editado { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font: 700 10px/16px Verdana, sans-serif; color: #1a1205; background: #e8a33c; vertical-align: 1px; }
button.cy-item { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.cy-item:hover { border-color: var(--gold); }
.cy-item-topo { margin: 8px 0; }
.cy-fontes { display: flex; flex-direction: column; gap: 6px; }
.cy-fonte { display: grid; grid-template-columns: minmax(150px, 220px) 90px 1fr; gap: 8px; align-items: center; padding: 6px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.cy-fonte-mob { display: flex; align-items: center; gap: 6px; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; }
button.cy-fonte-mob { cursor: pointer; }
button.cy-fonte-mob:hover b { color: var(--gold); text-decoration: underline; }
.cy-fonte-ch { font-weight: 700; color: var(--gold); }
.cy-tag-boss { color: #e0555a; font-size: 11px; }
@media (max-width: 640px) { .cy-fonte { grid-template-columns: 1fr auto; } .cy-fonte .cy-where { grid-column: 1 / -1; } }
.cy-pages { display: flex; gap: 4px; justify-content: center; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.cy-pages .btn.on { border-color: var(--gold); color: var(--gold); }
.cy-detail { padding: 0 10px; }
.cy-where { display: flex; gap: 6px; flex-wrap: wrap; }
.cy-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid #3c4250; margin-top: 8px; }
@media (max-width: 700px) {
  .cy-main { grid-template-columns: 1fr; }
  .cy-cats { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .cy-cats-t { width: 100%; }
}
/* ---------- Cyclopedia: uma página só ---------- */
.cy-view { display: flex; gap: 4px; }
.cy-grid.all { max-height: 470px; overflow-y: auto; padding-right: 4px; }

/* ---------- cartão do boneco: botões Equips / Aparência ---------- */
.pcard-actions.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.equip-grid button.slot { cursor: pointer; }

/* ---------- janela de Equips ---------- */
.equips-main { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; padding: 14px 18px; min-height: 380px; }
.egrid { display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; justify-content: center; margin-bottom: 10px; }
.eslot { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--slot); border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer; }
.eslot.blank { visibility: hidden; }
.eslot.empty .ph { font-size: 10px; color: #555; text-transform: uppercase; }
.eslot.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.eslot:hover { border-color: #888; }
.estats { margin-top: 6px; }
.elist { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.eitem { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #1b1d22; border: 1px solid var(--border); border-radius: 6px; }
.eitem .icon { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--slot); border-radius: 4px; }
.eitem .icon .cnt { position: absolute; right: 1px; bottom: 0; font-size: 10px; font-weight: 700; text-shadow: 0 0 2px #000; }
.eitem .info { flex: 1; min-width: 0; }
.eitem .info small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) { .equips-main { grid-template-columns: 1fr; } }

/* ---------- janela de Aparência ---------- */
.look { background: #2b2b2b; }
.look-main { display: grid; grid-template-columns: 170px 300px minmax(0, 1fr); gap: 16px; padding: 16px; }
.look-left { display: flex; flex-direction: column; gap: 8px; }
.look-tabs, .look-sex { display: flex; flex-direction: column; gap: 4px; }
.look-sex { flex-direction: row; }
.look-tabs button, .look-sex button, .look-parts button { padding: 6px 10px; background: #3a3a3c; border: 1px solid #4a4a4c; border-radius: 4px; color: #ddd; font-weight: 700; text-align: left; }
.look-sex button { flex: 1; text-align: center; font-size: 12px; }
.look-tabs button.on, .look-sex button.on, .look-parts button.on { background: #f4f4f4; color: #1a1a1a; }
.look-left .chk.dis { opacity: .5; }
.look-parts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.look-parts button { display: flex; align-items: center; gap: 8px; }
.look-parts i { width: 14px; height: 14px; border: 1px solid #000; border-radius: 2px; }
.look-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.look-prev { width: 220px; height: 200px; display: flex; align-items: center; justify-content: center; background: #1f1f21; border: 1px solid #444; border-radius: 6px; }
.look-rot { display: flex; align-items: center; gap: 10px; }
.look-pal { display: grid; grid-template-columns: repeat(19, 14px); gap: 2px; }
.look-pal button { width: 14px; height: 14px; padding: 0; border: 1px solid rgba(0, 0, 0, .5); border-radius: 2px; }
.look-pal button.on { outline: 2px solid #fff; outline-offset: 0; z-index: 1; }
.look-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.look-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #3a3a3c; border: 1px solid #4a4a4c; border-radius: 6px; color: #eee; }
.look-item.on { border-color: #fff; background: #4a4a4e; }
.look-item b { font-size: 12px; text-align: center; }
.look-item small { font-size: 10px; }
.look-preset { display: flex; align-items: center; gap: 8px; padding: 6px; background: #1f1f21; border: 1px solid #444; border-radius: 6px; }
.look-preset span { flex: 1; font-size: 13px; }
.look-preset .lp-spr { width: 52px; display: flex; justify-content: center; }
.look .helper-foot { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .look-main { grid-template-columns: 1fr; } .look-pal { grid-template-columns: repeat(19, 1fr); } .look-pal button { width: 100%; } }

/* ---------- cartões da party (compactos) ---------- */
.pcard {
  position: relative; padding: 7px 8px 7px 9px; border-radius: 7px;
  background: linear-gradient(160deg, rgba(48, 51, 60, .95), rgba(30, 32, 38, .95));
  border: 1px solid #3d414b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .35);
}
.pcard::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--gold), transparent); opacity: .7; }
.pcard.dead { border-color: var(--danger); }
.pc-main { display: flex; gap: 8px; align-items: flex-start; }
.pc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pc-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pc-name .spr { flex-shrink: 0; margin: -6px -2px -2px -4px; }
.pc-name div { min-width: 0; line-height: 1.15; }
.pc-name b { display: block; color: var(--gold); font-family: "Cinzel", Georgia, serif; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name small { display: block; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bars { display: grid; grid-template-columns: 14px 1fr; gap: 3px 4px; align-items: center; }
.pc-bars .bar { height: 11px; border-radius: 3px; border-color: #15161a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.pc-bars .bar span { font-size: 9.5px; }
.pc-ic { font-style: normal; font-size: 10px; font-weight: 800; text-align: center; line-height: 1; }
.pc-ic.hp { color: #ff6a5e; } .pc-ic.mp { color: #6fa2ff; } .pc-ic.xp { color: #e8c050; font-size: 8px; }
.pc-eq { display: grid; grid-template-columns: repeat(3, 28px); gap: 2px; flex-shrink: 0; }
.pc-eq .slot {
  width: 28px; height: 28px; border-radius: 3px; border: 1px solid #0c0d10;
  background: radial-gradient(circle at 50% 40%, #2a2d35, #15171c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.pc-eq .slot:hover { border-color: var(--gold); }
.pc-eq .slot.empty { opacity: .55; }
.pc-eq .slot.ammo { box-shadow: inset 0 0 0 1px rgba(232, 184, 74, .35); }
.pc-eq .slot.blank { visibility: hidden; }
.imb-dot { position: absolute; right: 1px; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: #7fd4ff; box-shadow: 0 0 4px #7fd4ff; }
.pc-fold { position: absolute; right: 3px; bottom: 2px; background: none; border: 0; color: var(--muted); font-size: 11px; padding: 0 3px; line-height: 1; }
.pc-fold:hover { color: var(--gold); }
.pcard.closed .pc-fold { position: static; align-self: center; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-right: 14px; }
.pc-actions .btn { flex: 1; padding: 3px 4px; font-size: 11px; white-space: nowrap; background: linear-gradient(#2c2f37, #22242a); border-color: #464a54; }
.pc-actions .btn.primary { background: linear-gradient(#3d3324, #272016); border-color: #8a6c33; }

/* ---------- colunas com largura ajustável (puxar a divisória) ---------- */
#layout { max-width: none; grid-template-columns: var(--lw, 250px) minmax(0, 1fr) var(--rw, 270px); }
.gutter { position: absolute; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 5; }
.gutter::after { content: ''; position: absolute; left: 5px; top: 30%; bottom: 30%; width: 2px; border-radius: 2px; background: var(--border-2); opacity: 0; transition: opacity .2s; }
.gutter:hover::after, .gutter.drag::after { opacity: 1; background: var(--gold); }
body.col-drag { cursor: col-resize; user-select: none; }
@media (max-width: 1250px) { #layout { grid-template-columns: var(--lw, 230px) minmax(0, 1fr) var(--rw, 260px); } }
@media (max-width: 1000px) {
  .gutter { display: none; }
  .hunt-bar { flex-wrap: wrap; }
  .party-box { flex-wrap: wrap; max-width: 100%; }
}

/* ---------- janela de Imbuir ---------- */
.imbue-main { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; padding: 14px; }
.imbue-left .htabs { margin-bottom: 8px; }
.imb-grid { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 4px; margin-bottom: 8px; }
.imb-item { position: relative; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; background: #1f1f21; border: 1px solid #4a4a4c; border-radius: 5px; }
.imb-item.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.imb-n { position: absolute; right: 2px; top: 1px; font-size: 10px; font-weight: 800; color: #7fd4ff; text-shadow: 0 0 2px #000; }
.imb-a { position: absolute; left: 2px; bottom: 1px; font-size: 10px; font-weight: 800; color: #ffd060; text-shadow: 0 0 2px #000; }
.imbue-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.imb-head { display: flex; align-items: center; gap: 10px; background: #1f1f21; border: 1px solid #444; border-radius: 6px; padding: 8px; }
.imb-head b { color: #e8a0a0; font-family: "Cinzel", serif; display: block; }
.imb-head small { color: var(--muted); }
.imb-slots { margin-left: auto; display: flex; gap: 6px; }
.imb-slot { position: relative; width: 58px; height: 58px; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #2a2a2c; border: 1px solid #555; border-radius: 5px; }
.imb-slot.on { border-color: var(--gold); }
.imb-slot small { font-size: 10px; color: #ffd060; }
.imb-auto { position: absolute; right: 2px; top: 0; font-style: normal; color: var(--gold); font-size: 12px; }
.fj-aba-ic { width: 20px; height: 20px; margin-right: 5px; vertical-align: -5px; object-fit: contain; image-rendering: pixelated; }
.fj-titulo-ic { width: 32px; height: 32px; margin-right: 6px; vertical-align: -8px; image-rendering: pixelated; }
.coin-oferta.tem { opacity: .6; }
.fj-tag { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 3px; background: rgba(232, 163, 60, .16); color: #e8b25a; font-size: 10px; font-weight: 600; }
.fj-aviso { margin: 6px 0; padding: 6px 8px; border: 1px solid #e8a33c; border-radius: 5px; background: rgba(232, 163, 60, .1); color: #f0c27a; font-size: 12px; }
.pset-chip.edit { box-shadow: 0 0 0 1px var(--gold); }
.pset-editando { color: var(--gold); font-size: 11px; font-weight: 700; white-space: nowrap; }
.proc-row { cursor: help; }
.proc-ic { font-size: 20px; }
.proc-tip { display: grid; grid-template-columns: auto auto auto; gap: 3px 10px; align-items: center; margin-top: 5px; font-size: 12px; }
.proc-tip > span:first-child, .proc-tip > span:nth-child(3n+1) { display: inline-flex; align-items: center; gap: 4px; }
.lp-cap { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.lp-cap.quase { color: #e8b25a; }
.lp-cap.cheio { color: #ff6a5a; }
.imb-ic.img { background: url("../assets/imbuing/icones.png") no-repeat; border-color: #2a2a2e; }
.imb-nivel { height: 9px; width: auto; margin-right: 4px; image-rendering: pixelated; vertical-align: 0; }
.imb-vaga { width: 26px; height: 26px; opacity: .55; }
.imb-bt-ic { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.imb-ic { display: inline-grid; place-items: center; background: radial-gradient(circle, #3a3a40, #18181b); border: 1px solid #555; border-radius: 4px; font-weight: 900; flex-shrink: 0; }
.imb-cur { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: #1f1f21; border: 1px solid #444; border-radius: 6px; padding: 10px; }
.imb-cur b { font-size: 16px; }
.imb-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; }
.imb-opt { display: flex; align-items: center; gap: 8px; background: #252527; border: 1px solid #3f3f42; border-radius: 6px; padding: 6px 8px; }
.imb-opt .info { flex: 1; min-width: 0; }
.imb-opt small { display: block; color: var(--muted); font-size: 11px; }
.ebtns { display: flex; gap: 4px; }
@media (max-width: 760px) { .imbue-main { grid-template-columns: 1fr; } }

/* ---------- Bosses ---------- */
.bosses { display: flex; flex-direction: column; gap: 10px; }
.bbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbar .cy-search { max-width: 220px; margin: 0; }
.bbar .tog { margin-left: auto; }
.bfeat { display: flex; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--rc); border-radius: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 18%, #1d1f24), #1a1c21 60%); }
.bfeat .bspr { width: 110px; display: flex; justify-content: center; }
.bfeat-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bfeat-info > b { font-family: "Cinzel", serif; font-size: 20px; color: #fff; }
.bfeat-info small { color: var(--muted); }
.bfeat-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.bcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 6px; cursor: pointer;
  background: #23252b; border: 1px solid #3a3d45; border-top: 3px solid var(--rc); border-radius: 6px; text-align: center; }
.bcard:hover { border-color: var(--rc); }
.bcard.sel { box-shadow: 0 0 0 2px var(--rc); }
.bcard.low { opacity: .6; }
.bcard b { font-size: 12px; line-height: 1.2; }
.bcard small { font-size: 10.5px; color: var(--muted); }
.bspr { height: 64px; display: flex; align-items: flex-end; justify-content: center; }
.bfeat .bspr { height: 96px; }
.bfav, .binfo { position: absolute; top: 4px; width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid #555; background: #15161a; font-size: 12px; line-height: 1; }
.bfav { right: 4px; } .binfo { left: 4px; }
.bfav.on { color: var(--gold); border-color: var(--gold); }
.btimes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.btimes > div { display: flex; flex-direction: column; padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.btimes span { font-size: 11px; color: var(--muted); }
.btimes b { font-size: 15px; color: var(--gold); }
.batk { display: grid; grid-template-columns: 10px 64px 80px minmax(150px, 1fr); gap: 6px; align-items: center; font-size: 12px; padding: 2px 0; }
.mcard.batks { grid-column: span 2; }
@media (max-width: 600px) { .mcard.batks { grid-column: auto; } .batk { grid-template-columns: 10px 60px 70px 1fr; } }
.slots > .muted, .imb-grid > .muted { grid-column: 1 / -1; }
.pc-actions .pc-promo { flex: 0 0 28px; }
.batk i { width: 10px; height: 10px; border-radius: 50%; }
.batk small { color: var(--muted); }
.bsum { display: flex; flex-wrap: wrap; gap: 6px; }
.bsum span { display: flex; flex-direction: column; align-items: center; font-size: 11px; }

.spell-row.locked { opacity: .7; }
.combo-ic.locked img, .combo-ic.locked .spr { filter: grayscale(1) brightness(.6); }
.combo-ic .lk { position: absolute; right: 1px; top: 0; font-size: 11px; }
.shop-eq-bar { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.shop-eq-bar .cy-search { margin: 0; max-width: 260px; }
.shop-eq-bar select { padding: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border-2); border-radius: 6px; }
/* ---------- tela de economia de bateria ---------- */
#saver {
  position: fixed; inset: 0; z-index: 60; color: #e8e4da; user-select: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 20, 24, .72), rgba(6, 6, 8, .97) 70%), url('../assets/ui/bg-tibia-8.6.jpg') center / cover no-repeat, #070708;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
#saver.dark { background: #000; }
.sv-party { position: absolute; left: 16px; top: calc(14px + env(safe-area-inset-top, 0px)); font-size: 13px; line-height: 1.6; }
.sv-party b { color: #f0ece2; }
.sv-dark { position: absolute; right: 16px; top: calc(14px + env(safe-area-inset-top, 0px)); font-size: 12px; color: #aaa; }
.sv-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 32px)); text-align: center; }
.sv-logo { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: .08em; color: #f3ede0; }
.sv-sub { font-weight: 700; margin-top: 4px; }
.sv-center hr { width: 60%; border: 0; border-top: 1px solid #3a3a3e; margin: 12px auto; }
.sv-center p { font-size: 13px; color: #d8d4ca; margin: 0 0 18px; }
.sv-slide { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 6px; background: #2c2c30; outline: none; }
.sv-slide::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe07a, #d9a92a); border: 0; cursor: grab; box-shadow: 0 0 10px rgba(240, 200, 80, .4); }
.sv-slide::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #e8b84a; border: 0; cursor: grab; }
.sv-hunt { margin-top: 26px; font-size: 13px; color: #b8b4aa; }
.sv-stats { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 26px; text-align: center; }
.sv-stats small { display: block; font-size: 10px; letter-spacing: .08em; color: #888; }
.sv-stats b { font-size: 15px; }
/* Auto Boss */
.bauto-box { background: #1b1d22; border: 1px solid var(--border-2); border-radius: 8px; padding: 8px 10px; }
.bauto-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bauto-head > small { flex: 1; min-width: 200px; }
.bauto-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bauto-item { display: flex; align-items: center; gap: 4px; padding: 2px 6px; background: #25272d; border: 1px solid #3a3d45; border-radius: 6px; font-size: 12px; }
.bauto-item.on { border-color: var(--good); }
.bauto-item .n { font-weight: 800; color: var(--gold); }
.bauto-item .mini { width: 20px; height: 20px; font-size: 10px; }
.bstar, .bauto { position: absolute; font-style: normal; font-size: 11px; font-weight: 800; }
.bstar { left: 28px; top: 5px; color: var(--gold); }
.bauto { right: 28px; top: 5px; background: var(--good); color: #000; border-radius: 8px; padding: 0 5px; }
/* Baú de Recompensas */
.tb-rw { position: relative; }
.badge { position: absolute; top: 0; right: 4px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; }
.rewards { display: flex; flex-direction: column; gap: 8px; }
.rw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rw-main { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 10px; }
.rw-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.rbag { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left; padding: 4px 6px; background: #23252b; border: 1px solid #3a3d45; border-radius: 6px; }
.rbag .spr { grid-row: span 2; }
.rbag small { color: var(--muted); font-size: 11px; }
.rbag.on { border-color: var(--gold); }
.rbag-open { background: #1b1d22; border: 1px solid var(--border-2); border-radius: 8px; padding: 10px; }
.rbag-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rbag-head div { flex: 1; display: flex; flex-direction: column; }
.rbag-head b { font-family: "Cinzel", serif; font-size: 17px; color: var(--gold); }
.rbag-items { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; }
@media (max-width: 700px) { .rw-main { grid-template-columns: 1fr; } }
.hmode { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.hmode .ppick { margin-left: auto; }

/* ---------- presets do Helper ---------- */
.pset { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pset-list { display: flex; gap: 6px; flex-wrap: wrap; }
.pset-chip { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: #202020; border: 1px solid #3c3c3c; border-radius: 5px; }
.pset-chip.on { border-color: var(--gold); background: #2a2618; }
.pset-chip input { width: 92px; padding: 3px 5px; background: #151515; border: 1px solid #3c3c3c; border-radius: 4px; color: var(--text); font-size: 12px; }
.pset-chip span { font-size: 11px; white-space: nowrap; }
.pset-io { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px; background: #1c1c1c; border: 1px solid var(--gold-2); border-radius: 6px; }
.pset-io textarea { width: 100%; background: #111; color: var(--text); border: 1px solid #444; border-radius: 4px; font-family: monospace; font-size: 11px; resize: vertical; }
.pset-io div { display: flex; gap: 6px; }
.pg-list { display: grid; gap: 4px; }
.pg-row { display: grid; grid-template-columns: 30px 70px minmax(120px, 1fr) auto; align-items: center; gap: 6px; padding: 3px 6px; background: #232323; border: 1px solid #383838; border-radius: 5px; }
.pg-row select { max-width: 100%; }
.pg-imb { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-imb select { max-width: 150px; font-size: 11px; }
.ppick { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.ppick select { font-size: 11px; padding: 1px 2px; background: var(--slot); color: var(--text); border: 1px solid var(--border-2); border-radius: 4px; max-width: 110px; }
/* ---------- editor de teste (Config > Editor (teste)) ---------- */
.ed-grade { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(56px, 1fr)) auto; gap: 6px 8px; align-items: center; }
.ed-grade > b { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ed-grade small { display: block; }
.ed-num { width: 100%; padding: 5px 6px; background: var(--slot); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text); font: inherit; }
@media (max-width: 700px) { .ed-grade { grid-template-columns: 1fr 1fr 1fr; } .ed-grade > b { display: none; } }
/* categoria interna do outfit (Aparência, só no modo de teste) */
.look-cat { display: block; margin-top: 2px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: #333; color: #ddd; }
.look-cat.cat-free { background: #24452a; color: #9fe0a8; }
.look-cat.cat-premium { background: #4a3b16; color: #f0d27a; }
.look-cat.cat-quest { background: #1f3550; color: #9cc6ff; }
.look-cat.cat-loja { background: #4a1f45; color: #f2a6ec; }
.look-cat.cat-editada { background: #3d3d3d; color: #cfcfcf; }

/* ---------- raridade (js/raridade.js): borda colorida em qualquer slot com o item ---------- */
:root { --r1: #57b85a; --r2: #4a90e8; --r3: #a05be0; --r4: #e5a13a; --r5: #e0555a; --r6: #f4f4f4; --r7: #f5c542; }
.slot:has(> img.rar-1) { --rc: var(--r1); } .slot:has(> img.rar-2) { --rc: var(--r2); } .slot:has(> img.rar-3) { --rc: var(--r3); }
.slot:has(> img.rar-4) { --rc: var(--r4); } .slot:has(> img.rar-5) { --rc: var(--r5); } .slot:has(> img.rar-6) { --rc: var(--r6); }
.slot:has(> img.rar-7) { --rc: var(--r7); }
.slot:has(> img[class*="rar-"]) { border-color: var(--rc) !important; box-shadow: inset 0 0 0 1px var(--rc), inset 0 0 10px color-mix(in srgb, var(--rc) 45%, transparent); }
.slot:has(> img.rar-5), .slot:has(> img.rar-6), .slot:has(> img.rar-7) { box-shadow: inset 0 0 0 1px var(--rc), inset 0 0 12px color-mix(in srgb, var(--rc) 55%, transparent), 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent); }
.rar-tag { display: inline-block; padding: 0 7px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--rc); border: 1px solid var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.rar-info { display: flex; gap: 8px; align-items: center; margin: 4px 0 2px; font-size: 12px; }
.rar-adds { margin: 4px 0; padding-left: 16px; font-size: 12px; }
.rar-adds li { margin: 1px 0; }
.add-lv { font-size: 10px; color: var(--muted); border: 1px solid var(--border-2); border-radius: 3px; padding: 0 3px; }
.rar-cartas { font-size: 12px; margin-bottom: 4px; }

/* ---------- janela da Forja (js/forja.js) ---------- */
/* bags (js/bags.js): escolha da Ancient e loja de testes */
.bag-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 60vh; overflow-y: auto; }
.bag-op { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--panel-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bag-op:hover { border-color: var(--gold); }
.bag-op .slot, .teste-bag .slot { flex: none; }
.teste-bags { flex-direction: column; align-items: stretch !important; }
.teste-bag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.teste-bag > b { min-width: 130px; }
.teste-bag-b { position: relative; padding: 2px 4px; }
.teste-bag-b i { position: absolute; right: 1px; bottom: 0; font: 700 9px Verdana, sans-serif; font-style: normal; color: #fff; text-shadow: 0 0 2px #000; }
/* exemplos de refino na Wiki */
/* a tela do jogo no Bem-vindo da Wiki: cada área leva ao tópico; passar o mouse acende e mostra o nome */
.wk-tela { position: relative; margin: 10px 0 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; line-height: 0; }
.wk-tela img { width: 100%; height: auto; display: block; }
.wk-area { position: absolute; border: 1px solid transparent; border-radius: 4px; line-height: normal; }
.wk-area:hover, .wk-area:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent); outline: none; z-index: 2; }
.wk-area span { display: none; position: absolute; left: 50%; bottom: calc(100% + 4px); translate: -50% 0; padding: 3px 8px; background: #111318; color: #fff; border: 1px solid var(--gold); border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none; }
.wk-area:hover span, .wk-area:focus-visible span { display: block; }
.wk-area.baixo span { bottom: auto; top: calc(100% + 4px); }   /* no topo da foto o nome aparece embaixo */
.wk-tela-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 10, .82); }
.wk-tela-modal[hidden] { display: none; }
.wk-tela-caixa { position: relative; width: min(1400px, 100%); }
.wk-tela-caixa .wk-tela { margin: 0; max-height: calc(100vh - 32px); aspect-ratio: 14 / 9; width: min(100%, calc((100vh - 32px) * 14 / 9)); margin-inline: auto; }
.wk-tela-x { position: absolute; top: -12px; right: -12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); background: #111318; color: #fff; cursor: pointer; }
.wk-refs { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 12px; }
.wk-ref { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.wk-ref .slot { display: grid; place-items: center; }
/* VIP e energia offline no topo (js/vip.js) */
.tb-vip { margin-left: 8px; padding: 0 6px; border-radius: 4px; font: 800 10px/16px Verdana, sans-serif; color: #1a1205; background: linear-gradient(#ffe27a, #c9a227); }
.tb-energia { margin-left: 8px; font-size: 11px; color: #9fd4ff; }
.tb-energia.baixa { color: #ff8a5a; }
.tb-stamina { margin-left: 8px; font-size: 11px; color: #d8d8d8; }
.tb-stamina.verde { color: #7ee07e; }
.tb-stamina.vermelha { color: #ff5a5a; }
/* ---------- Party multiplayer (js/grupo-ui.js) ---------- */
#grupo-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72); }
#grupo-win[hidden] { display: none; }
.gp-caixa { width: min(820px, 100%); overflow-y: auto; }
.gp-vocs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.gp-vocs .off { opacity: .45; }
.gp-linha, .gp-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-topo { justify-content: space-between; }
.gp-cod { font: 800 18px/1 Verdana, sans-serif; letter-spacing: .12em; color: var(--gold); }
.gp-codigo { width: 120px; text-transform: uppercase; letter-spacing: .1em; }
.gp-lista { display: flex; flex-direction: column; gap: 6px; }
.gp-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 10px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border-2); }
.gp-item small { grid-column: 2; }
.gp-item .btn { grid-column: 3; grid-row: 1 / span 2; }
.gp-energia { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 13px; }
.gp-tab { overflow-x: auto; }
.gp-tab table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gp-tab th, .gp-tab td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.gp-tab th:first-child, .gp-tab td:first-child { text-align: left; }
.gp-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #666; }
.gp-on.sim { background: #4fd16a; box-shadow: 0 0 4px #4fd16a; }
/* ---------- Roda de habilidades (js/roda-ui.js) ---------- */
#roda-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72); }
#roda-win[hidden] { display: none; }
.roda-caixa { width: min(1040px, 100%); overflow-y: auto; }
.roda-corpo { display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 16px; align-items: start; }
.roda-svg { width: 100%; height: auto; max-width: 522px; }
.roda-f { cursor: pointer; stroke: transparent; stroke-width: 2; transition: fill .15s; }
.roda-f:hover { stroke: rgba(255, 255, 255, .7); }
.roda-f.sel { stroke: #ffe27a; stroke-width: 3; }
.roda-f.fechada { cursor: not-allowed; }
.roda-pts { font: 700 11px Verdana, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.roda-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.roda-pontos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roda-pontos .btn { margin-left: auto; }
.roda-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.roda-res { margin: 0; padding-left: 18px; font-size: 13px; columns: 2 220px; }
.roda-livre { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #c9a227; color: #1a1205; font-size: 10px; }
@media (max-width: 760px) { .roda-corpo { grid-template-columns: 1fr; } }
/* Roda do Canary (Fase 4.6): revelação, pergaminhos, vasos, Gem Atelier e fragmentos */
.roda-abas { margin-top: -4px; }
.roda-revel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.roda-revel-d { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-left: 3px solid; border-radius: 4px; background: var(--panel-2); font-size: 12px; }
.roda-pergs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.roda-perg { display: inline-flex; align-items: center; gap: 2px; opacity: .55; }
.roda-perg.ok, .roda-perg:has(button) { opacity: 1; }
.roda-vasos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.roda-vaso { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid; border-radius: 6px; background: var(--panel-2); font-size: 13px; }
.roda-revelars { display: flex; flex-direction: column; gap: 6px; }
.roda-revelar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--panel-2); }
.roda-revelar > div { flex: 1; min-width: 0; }
.roda-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.roda-gemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.roda-gema { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid; border-radius: 6px; background: var(--panel-2); font-size: 12px; }
.roda-gema-topo { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.roda-gema ul { margin: 0; padding-left: 16px; }
.roda-gema li.ok { color: #9fe8a0; }
.roda-frags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.roda-todos { font-size: 12px; }
.roda-mods { width: 100%; border-collapse: collapse; font-size: 12px; }
.roda-mods td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.roda-mods td:nth-child(2) { color: var(--gold); white-space: nowrap; }
/* ---------- Exaltation Forge (js/exaltacao-ui.js) ---------- */
#exalt-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72); }
#exalt-win[hidden] { display: none; }
.ex-curta { max-height: 22vh; }
.ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ex-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border-2); text-align: center; }
.ex-de, .ex-para { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 64px; justify-content: center; font-weight: 700; }
.ex-para { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ex-para span { flex-basis: 100%; font-weight: 600; font-size: 13px; }
.ex-seta { color: var(--muted); }
.ex-hist { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.ex-hist-l { padding: 6px 10px; border-radius: 6px; background: var(--panel-2); font-size: 13px; border-left: 3px solid #5bbf6a; }
.ex-hist-l.falha { border-left-color: #c0453a; }
.ex-rodape span { display: inline-flex; align-items: center; gap: 4px; }
/* tier do item: selo no canto de cima à esquerda */
.tier-selo { display: none; }
.slot > .tier-selo { display: block; position: absolute; left: 1px; top: 1px; z-index: 3; pointer-events: none; font: 800 9px/1 Verdana, sans-serif; font-style: normal;
  color: #bff6ff; padding: 1px 2px; border-radius: 3px; background: rgba(10, 40, 60, .85); border: 1px solid #3fb6d9; }
#forja-win { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .72); }
#forja-win[hidden] { display: none; }
.fj-caixa { width: min(940px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  background: linear-gradient(#161a22, #0f1218); border: 1px solid #2c3446; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); color: var(--text); }
.fj-topo { display: flex; justify-content: space-between; align-items: center; }
.fj-topo h2 { margin: 0; font-family: Cinzel, serif; font-size: 20px; color: var(--gold); }
.fj-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.fj-abas button { padding: 7px 14px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border-2); }
.fj-abas button.on { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel-2)); }
.fj-res { padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.fj-res.ok { background: #16301d; border: 1px solid #2f6b3c; }
.fj-res.falha { background: #3a1716; border: 1px solid #7a2e2a; }
.fj-corpo { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; min-height: 0; flex: 1; }
.fj-esq { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.fj-busca { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--slot); color: var(--text); font: inherit; }
.fj-lista { overflow-y: auto; max-height: 52vh; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.fj-linha { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; background: none; text-align: left; }
.fj-linha:hover { background: var(--panel-2); }
.fj-linha.on { border-color: var(--gold); background: var(--panel-2); }
.fj-linha .slot { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border-2); border-radius: 4px; background: var(--slot); flex-shrink: 0; }
.fj-nome { flex: 1; font-size: 13px; }
.fj-dir { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fj-item { display: flex; gap: 12px; align-items: flex-start; }
.fj-item > img { padding: 6px; border-radius: 8px; background: var(--slot); border: 1px solid var(--border-2); }
.fj-conta { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.fj-conta p { margin: 0; font-size: 12.5px; }
.fj-barra { position: relative; height: 20px; border-radius: 4px; background: #0b0c0e; border: 1px solid var(--border-2); overflow: hidden; }
.fj-barra i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#7bd06a, #4a9a3a); }
.fj-barra span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 18px; text-shadow: 0 1px 2px #000; }
.fj-vazio { margin: 40px auto; }
.fj-pos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--border); }
.fj-pos span { display: inline-flex; align-items: center; gap: 3px; }
@media (max-width: 700px) { .fj-corpo { grid-template-columns: 1fr; } .fj-lista { max-height: 30vh; } }

/* ---------- Celestial: o item brilha (sombra dourada pulsando) e o slot tem faíscas subindo ---------- */
img.rar-7 { animation: celeste-brilho 2.6s ease-in-out infinite; }
@keyframes celeste-brilho {
  0%, 100% { filter: drop-shadow(0 0 2px #f5c542) drop-shadow(0 0 4px rgba(245, 197, 66, .55)); }
  50% { filter: drop-shadow(0 0 3px #ffe27a) drop-shadow(0 0 10px rgba(255, 214, 90, .95)); }
}
.slot:has(> img.rar-7) { overflow: hidden; }
.slot:has(> img.rar-7)::before, .slot:has(> img.rar-7)::after {
  content: ''; position: absolute; inset: -20% 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(1.6px 1.6px at 18% 30%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 72% 18%, #fff6c8 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 82% 72%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 34% 84%, #ffe9a0 50%, transparent 55%),
    radial-gradient(2.4px 2.4px at 56% 52%, rgba(255, 255, 255, .95) 35%, transparent 65%);
  animation: celeste-faiscas 2.8s linear infinite;
}
.slot:has(> img.rar-7)::after { animation-delay: -1.4s; transform: scaleX(-1); filter: hue-rotate(-15deg); }
@keyframes celeste-faiscas {
  0% { translate: 0 18%; opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: .9; }
  100% { translate: 0 -22%; opacity: 0; }
}
.slot:has(> img.rar-7) .cnt { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  img.rar-7 { animation: none; filter: drop-shadow(0 0 3px #f5c542) drop-shadow(0 0 6px rgba(245, 197, 66, .7)); }
  .slot:has(> img.rar-7)::before, .slot:has(> img.rar-7)::after { animation: none; opacity: .7; }
}

/* ---------- efeitos das outras raridades (sempre mais discretos que Ancient e Celestial) ---------- */
img.rar-1 { filter: drop-shadow(0 0 2px rgba(87, 184, 90, .55)); }
img.rar-2 { filter: drop-shadow(0 0 2px rgba(74, 144, 232, .6)); }
img.rar-3 { filter: drop-shadow(0 0 2.5px rgba(160, 91, 224, .7)); }
img.rar-4 { animation: rar-pulso-4 3.6s ease-in-out infinite; }
@keyframes rar-pulso-4 { 0%, 100% { filter: drop-shadow(0 0 2px rgba(229, 161, 58, .55)); } 50% { filter: drop-shadow(0 0 5px rgba(229, 161, 58, .9)); } }
img.rar-5 { animation: rar-pulso-5 3s ease-in-out infinite; }
@keyframes rar-pulso-5 { 0%, 100% { filter: drop-shadow(0 0 2px rgba(224, 85, 90, .6)); } 50% { filter: drop-shadow(0 0 6px rgba(255, 90, 95, .95)); } }
/* Mítico: um reflexo de luz cruza o slot de tempos em tempos */
.slot:has(> img.rar-5) { overflow: hidden; }
.slot:has(> img.rar-5)::after { content: ''; position: absolute; inset: -40% -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 210, 210, .35) 50%, transparent 58%);
  animation: rar-reflexo 4.5s ease-in-out infinite; }
@keyframes rar-reflexo { 0%, 60% { translate: -60% 0; } 85%, 100% { translate: 60% 0; } }
/* Ancient: brilho branco pulsando e poucas faíscas prateadas (mais calmo que o Celestial) */
img.rar-6 { animation: rar-pulso-6 2.8s ease-in-out infinite; }
@keyframes rar-pulso-6 { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)); } 50% { filter: drop-shadow(0 0 7px rgba(235, 245, 255, .95)); } }
.slot:has(> img.rar-6) { overflow: hidden; }
.slot:has(> img.rar-6)::after { content: ''; position: absolute; inset: -20% 0; pointer-events: none; z-index: 2;
  background: radial-gradient(1.3px 1.3px at 25% 35%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 75% 60%, #e6f0ff 50%, transparent 55%),
              radial-gradient(1.4px 1.4px at 45% 85%, #fff 50%, transparent 55%);
  animation: celeste-faiscas 4.2s linear infinite; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  img.rar-4, img.rar-5, img.rar-6, .slot:has(> img.rar-5)::after, .slot:has(> img.rar-6)::after { animation: none; }
}

/* ---------- loja de testes: raridade e pós ---------- */
.teste-rar, .teste-pos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.teste-rar .chip { border-color: var(--rc); color: var(--rc); }
.teste-rar .chip.on { background: color-mix(in srgb, var(--rc) 22%, transparent); box-shadow: 0 0 0 1px var(--rc); }
.teste-po { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.teste-po small { color: var(--muted); margin-right: 2px; }

/* ---------- cartão de promote (à direita da tela do jogo) ---------- */
#promo-card { position: absolute; top: 56px; right: 10px; z-index: 4; width: 230px; padding: 10px 12px; border-radius: 10px;
  background: rgba(14, 16, 22, .94); border: 1px solid var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .6), 0 0 16px color-mix(in srgb, var(--gold) 25%, transparent);
  animation: promo-entra .35s ease-out; }
#promo-card[hidden] { display: none; }
@keyframes promo-entra { from { transform: translateX(16px); opacity: 0; } }
#promo-card .pc-topo { font-family: Cinzel, serif; font-weight: 700; color: var(--gold); letter-spacing: .05em; margin-bottom: 6px; }
#promo-card .pc-linha { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#promo-card .pc-txt b { display: block; font-size: 13px; }
#promo-card .pc-txt small { font-size: 11.5px; color: var(--muted); }
#promo-card .pc-acoes { display: flex; gap: 6px; margin: 4px 0 2px 38px; }
#promo-card .pc-info { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
@media (max-width: 700px) { #promo-card { top: auto; bottom: 8px; right: 8px; width: min(230px, 70%); } }

/* ---------- Forja: atributos (travas e upar add) e refino ---------- */
.fj-add { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.fj-add:last-of-type { border-bottom: 0; }
.fj-add-nome { flex: 1; font-size: 12.5px; }
.fj-trava { width: 30px; height: 28px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--slot); font-size: 14px; padding: 0; }
.fj-trava.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--slot)); }
.fj-escada { display: flex; flex-wrap: wrap; gap: 3px; }
.fj-escada span { min-width: 24px; padding: 2px 0; text-align: center; font-size: 11px; font-weight: 700; border-radius: 4px; background: var(--slot); border: 1px solid var(--border); color: var(--muted); }
.fj-escada span.seguro { border-color: #5fc46a; }
.fj-escada span.feito { background: color-mix(in srgb, var(--gold) 25%, var(--slot)); color: var(--text); }
.fj-escada span.atual { background: var(--gold); color: #1a1205; border-color: var(--gold); }

/* ---------- Ancient e Celestial: moldura "permafrost" (gelo + neon) ----------
   Ancient = neon branco com gelo azulado; Celestial = o mesmo efeito em dourado (mais as faíscas).
   Brilho da borda fixo; as faíscas do Celestial continuam. */
.slot:has(> img.rar-6), .slot:has(> img.rar-7) { --fr: #eaf7ff; --fr-luz: rgba(170, 225, 255, .85); --fr-fundo: rgba(140, 205, 255, .30); }
.slot:has(> img.rar-7) { --fr: #ffe48a; --fr-luz: rgba(255, 205, 80, .9); --fr-fundo: rgba(255, 196, 70, .28); }
.slot:has(> img.rar-6), .slot:has(> img.rar-7) {
  border-color: var(--fr) !important; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 115%, var(--fr-fundo), transparent 65%),
              linear-gradient(135deg, color-mix(in srgb, var(--fr) 16%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--fr) 12%, transparent)),
              var(--slot);
  /* brilho fixo da borda (sem piscar) */
  box-shadow: 0 0 0 1px var(--fr), 0 0 8px var(--fr-luz), 0 0 14px color-mix(in srgb, var(--fr-luz) 45%, transparent), inset 0 0 8px var(--fr-luz);
}
img.rar-6 { animation: rar-pulso-6 2.8s ease-in-out infinite; position: relative; z-index: 1; }
img.rar-7 { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
}

/* ---------- selo de refino (+N) no canto do item ---------- */
/* tudo cabe dentro do quadradinho: itens Míticos+ cortam o que passa da borda (overflow: hidden) */
.ref-selo, .ref-faiscas { display: none; }
.slot > .ref-selo {
  display: block; position: absolute; right: -2px; bottom: -1px; z-index: 3; pointer-events: none;
  font: 800 9.5px/1 Verdana, sans-serif; font-style: normal; color: #f2f2f2; padding: 1px 2px;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
/* +9 a +15: foguinho de fogueira atrás do número (pedido de 13/10/2026: como os ícones e a fogueira de referência):
   a chama inteira desenhada (3 camadas: vermelho-alaranjado, laranja e o miolo amarelo-claro em gota), com línguas
   altas e onduladas, a ponta curvando e a base redonda, balanço e brilho quente: tudo num PNG animado (assets/ui/refino/fogo.png,
   ferramentas/gerar-efeitos-refino.cjs), que custa quase nada (a versão em CSS animado pesava). Maior a cada degrau. */
.slot > .ref-selo.ref-t2, .slot > .ref-selo.ref-t3, .slot > .ref-selo.ref-t4 { color: #ffe9b0; }
.slot > .ref-selo.ref-t2::before, .slot > .ref-selo.ref-t3::before, .slot > .ref-selo.ref-t4::before {
  content: ""; position: absolute; left: 4px; right: 1px; bottom: 0; height: 11px; z-index: -1; transform-origin: 50% 100%; opacity: .92;
  background: url("../assets/ui/refino/fogo.png") center bottom / 100% 100% no-repeat;   /* PNG animado (ferramentas/gerar-efeitos-refino.cjs) */
}
/* +12 a +14: fogo mais forte */
.slot:has(> .ref-t3), .slot:has(> .ref-t4) { box-shadow: inset 0 -7px 8px -6px rgba(255, 110, 20, .4); }
.slot > .ref-selo.ref-t3 { color: #fff3c4; }
.slot > .ref-selo.ref-t3::before { left: 3px; height: 13px; }
/* +15: fogueira grande, número brilhando */
.slot:has(> .ref-t4) { box-shadow: inset 0 -8px 9px -6px rgba(255, 130, 30, .5), 0 0 5px rgba(255, 120, 20, .35); }
.slot > .ref-selo.ref-t4 {
  color: #fff;
  text-shadow: 0 0 3px #ff8a00, 0 0 6px #ff5a00, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.slot > .ref-selo.ref-t4::before { left: 2px; right: 0; height: 15px; }
/* refino +12 a +15: estalos elétricos pequenos em volta dos dígitos (como os do Pikachu; pedido de 13/10/2026). Cada <b>
   era um estalo animado em CSS; agora é um PNG animado com todos (custa quase nada). Cada estalo é curto, colado na borda do número (em cima, nos lados e embaixo), que estala sozinho de vez em quando,
   devagar, em tempos diferentes. O centro é o número (o "+" fica fora: .ref-n). O fogo e a fonte continuam os de antes.
   +12 a +14: estalos azuis; +15: vermelhos. */
.ref-n { position: relative; display: inline-block; }
.ref-aura {
  position: absolute; left: -7px; top: -9px; width: 28px; height: 22px; pointer-events: none;   /* a caixa do PNG (o número no meio de baixo) */
  background: url("../assets/ui/refino/estalos-azul.png") 0 0 / 100% 100% no-repeat;          /* PNG animado de 4 s (gerar-efeitos-refino.cjs) */
}
.ref-t4 .ref-aura { background-image: url("../assets/ui/refino/estalos-verm.png"); }
/* Forja: atributos possíveis no reroll */
.fj-poss { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fj-poss span { font-size: 11.5px; padding: 2px 7px; border-radius: 4px; background: var(--slot); border: 1px solid var(--border); color: var(--muted); }
.fj-poss span.tem { color: var(--text); border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); }
.fj-poss span.trav { color: var(--gold); border-color: var(--gold); }
.fj-poss small { opacity: .7; }

/* ---------- níveis do bestiário (ficha da criatura) ---------- */
.bniveis { display: grid; gap: 4px; margin: 4px 0 8px; }
.bnivel { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; background: var(--slot); border: 1px solid var(--border); font-size: 12.5px; }
.bnivel > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 12px; }
.bnivel span small { display: block; color: var(--muted); font-size: 11.5px; }
.bnivel.feito { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.bnivel.feito > b { background: color-mix(in srgb, var(--good) 30%, var(--panel-2)); color: #fff; }
/* Forja: cartão de aviso de risco do refino */
.fj-caixa { position: relative; }
.fj-aviso { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); border-radius: 12px; }
.fj-aviso-caixa { width: min(430px, 100%); padding: 16px 18px; border-radius: 10px; background: #1b1416; border: 1px solid #c0453a; box-shadow: 0 12px 40px rgba(0, 0, 0, .7), 0 0 18px rgba(224, 85, 70, .3); }
.fj-aviso-caixa h3 { margin: 0 0 8px; color: #ffb4a8; font-size: 17px; }
.fj-aviso-caixa p { margin: 6px 0; font-size: 13.5px; }
.fj-aviso-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Temas > Efeitos de magia e runas (Clássico 7.4) */
.tm-sec { margin: 18px 0 4px; font-size: 16px; }
.tm-ef-prev { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 90px; background: #15171c; }
.tm-ef-prev span { width: 48px; height: 48px; background-size: auto 48px; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }
.tm-previa.tm-ef-prev img { width: 32px !important; height: 32px !important; object-fit: contain; position: static; image-rendering: pixelated; }

/* Wiki/Novidades: referência de desenvolvimento (some no lançamento: WIKI_REFERENCIAS em js/data.js) */
.wk-fonte { text-decoration: underline dotted #e8a33c; text-underline-offset: 3px; color: #e8c08a; cursor: help; }

/* ---------- Bestiário do Tibia e charms (Fase 4.1; js/bestiario-ui.js) ---------- */
.ch-ico { --s: 34px; --c: #e8b84a; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  font-size: calc(var(--s) * .52); line-height: 1; color: var(--c); background: radial-gradient(circle at 35% 30%, #3a3f4c, #15171c 70%);
  border: 2px solid color-mix(in srgb, var(--c) 70%, #000); box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0, 0, 0, .6); }
.ch-ico.menor { border-style: dashed; }
.ch-ico.vazio { --c: #6a7080; color: #6a7080; border-style: dashed; font-weight: 800; }
.ch-tela { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.ch-topo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ch-moeda { display: flex; flex-direction: column; align-items: center; padding: 8px; background: #16181e; border: 1px solid #3c4250; border-radius: 6px; }
.ch-moeda b { font-size: 18px; color: var(--gold); }
.ch-moeda.eco b { color: #8fb4e8; }
.ch-moeda.cheio b { color: #e0555a; }
.ch-moeda small { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.ch-ajuda { margin: 0; font-size: 12px; }
.ch-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.ch-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.ch-card.fechado { opacity: .78; }
.ch-card.fechado .ch-ico { filter: grayscale(.7); }
.ch-card.usado { border-color: color-mix(in srgb, var(--good) 55%, #3c4250); }
.ch-cab { display: flex; align-items: center; gap: 8px; }
.ch-cab > div { flex: 1; min-width: 0; }
.ch-cab b { display: block; font-size: 13.5px; }
.ch-cab small { font-size: 11px; color: var(--muted); }
.ch-niveis { display: flex; gap: 2px; }
.ch-niveis i { font-style: normal; font: 700 10px/16px Verdana, sans-serif; padding: 0 4px; border-radius: 3px; background: #101114; color: #555b68; border: 1px solid #2c303a; }
.ch-niveis i.on { color: #1a1205; background: var(--gold); border-color: var(--gold); }
.ch-desc { margin: 0; font-size: 12px; line-height: 1.35; }
.ch-tabela { margin: 0; font-size: 11px; }
.ch-tabela span.on { color: var(--gold); font-weight: 700; }
.ch-aviso { margin: 0; font-size: 11px; color: #e8a33c; }
.ch-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.ch-max { font-size: 12px; }
.ch-sel { flex: 1; min-width: 140px; background: #14161b; color: #eee; border: 1px solid #3c4250; border-radius: 4px; padding: 4px; font-size: 12px; }
.ch-alvo { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ch-alvo b { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-lado .btn { width: 100%; margin-top: 6px; }
.bt-info { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bt-etapas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; width: 100%; }
.bt-etapas i { --p: 0%; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--good) var(--p), #0b0c0e var(--p)); border: 1px solid #2c303a; }
.bt-charms { display: flex; flex-direction: column; gap: 4px; }
.bt-charm { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--slot); border: 1px solid var(--border); border-radius: 6px; }
.bt-charm > span:not(.ch-ico) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bt-charm b { font-size: 12px; }
.bt-charm small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.bt-charm .ch-sel { min-width: 0; width: 100%; }
.cy-card .cy-spr { position: relative; }
.cy-charms { position: absolute; top: -2px; right: -22px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 700px) { .ch-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cy-tabs { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Prey e hunting tasks (Fase 4.2; js/prey-ui.js) ---------- */
.py-tela { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.py-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.py-abas button { padding: 9px; background: #2a2e38; border: 1px solid #3c4250; border-radius: 4px; color: #ccc; font-weight: 800; letter-spacing: .06em; }
.py-abas button.on { border-color: #6a8ad0; color: #fff; box-shadow: inset 0 0 0 1px #6a8ad0; }
.py-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.py-teste { justify-content: center; }
.py-ajuda { margin: 0; font-size: 12px; line-height: 1.4; }
.py-vagas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
@media (max-width: 900px) { .py-vagas { grid-template-columns: 1fr; } }
.py-vaga { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; min-width: 0; }
.py-vaga.ativa { border-color: color-mix(in srgb, var(--good) 55%, #3c4250); }
.py-vaga.completa { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.py-vaga.trancada { opacity: .6; }
.py-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; border-bottom: 1px solid #2c303a; padding-bottom: 4px; }
.py-cab b { font-size: 13.5px; letter-spacing: .04em; }
.py-cab small { font-size: 11px; color: var(--muted); }
.py-tranca { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 6px; }
.py-tranca img { width: 57px; height: 91px; image-rendering: pixelated; opacity: .8; }
.py-tranca p { margin: 0; font-size: 12px; color: var(--muted); }
.py-alvo { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
/* a criatura num quadro escuro, como a vaga do Prey no Tibia */
.py-alvo-spr { display: flex; align-items: flex-end; justify-content: center; width: 76px; height: 76px; background: radial-gradient(circle at 50% 60%, #2b3040, #12141a 75%); border: 1px solid #4a4f5c; box-shadow: inset 0 0 0 1px #0b0c10; border-radius: 3px; }
.py-alvo b { font-size: 14px; }
.py-onde { font-size: 11px; }
.py-bonus { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #16181e; border: 1px solid #3c4250; border-radius: 6px; }
.py-estandarte { width: 33px; height: 69px; flex: none; image-rendering: pixelated; }
.py-ic { width: 15px; height: 15px; vertical-align: -3px; image-rendering: pixelated; }
.py-coringa { width: 18px; height: 18px; vertical-align: -3px; image-rendering: pixelated; }
.py-bonus > div { display: flex; flex-direction: column; min-width: 0; }
.py-bonus b { font-size: 13px; }
.py-bonus small { font-size: 11px; color: var(--muted); }
.py-bonus.dano b { color: #e0757a; } .py-bonus.defesa b { color: #7fb2e8; } .py-bonus.xp b { color: #b48ee8; } .py-bonus.loot b { color: var(--gold); }
.py-bonus.vazio { opacity: .75; border-style: dashed; }
.py-estrelas { color: var(--gold); font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.py-estrelas i { font-style: normal; color: #3a3f4c; }
.py-tempo { display: flex; align-items: center; gap: 6px; }
.py-tempo .bar { flex: 1; }
.py-tempo small { font-size: 11px; color: var(--muted); min-width: 64px; text-align: right; }
.py-opcoes { display: flex; gap: 4px; flex-wrap: wrap; }
.py-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; }
/* botões em forma de carta (arte do cliente do Tibia) */
.py-carta { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px 4px; background: linear-gradient(#262a35, #1a1d25); border: 1px solid #4a4f5c; border-radius: 4px; color: inherit; cursor: pointer; }
.py-carta img { height: 44px; width: auto; image-rendering: pixelated; }
.py-carta b { font-size: 11px; line-height: 1.15; }
.py-carta small { font-size: 10.5px; color: var(--gold); white-space: nowrap; }
.py-carta small .py-coringa { width: 12px; height: 12px; vertical-align: -2px; }
.py-carta:hover:not(:disabled) { border-color: var(--gold); background: linear-gradient(#2e3340, #1f2330); }
.py-carta:disabled { cursor: not-allowed; opacity: .65; }
.py-carta:disabled small { color: var(--muted); }
.py-dica { margin: 0; font-size: 12px; }
.py-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.py-grade.longa { max-height: 330px; overflow-y: auto; padding-right: 2px; }
.py-cri { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: var(--slot); border: 1px solid var(--border); border-radius: 6px; color: inherit; min-width: 0; }
.py-cri:hover:not(:disabled) { border-color: #6a8ad0; background: #232836; }
.py-cri:disabled { opacity: .4; }
.py-cri-spr { display: flex; align-items: flex-end; justify-content: center; height: 44px; width: 100%; overflow: hidden; }
.py-cri b { font-size: 11px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-cri .stars { font-size: 9px; }
.py-excl { font-size: 10px; color: #e8a33c; }
.py-kills { font-size: 10px; color: var(--muted); }
.py-kills.up { color: var(--good); }
.py-busca { width: 100%; background: #14161b; color: #eee; border: 1px solid #3c4250; border-radius: 4px; padding: 5px 7px; font-size: 12px; }
.py-rar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.py-rar > span:first-child { color: var(--muted); }
.py-up { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.py-task-prog { display: flex; align-items: center; gap: 8px; }
.py-task-prog .bar { flex: 1; }
.py-task-prog b { font-size: 12.5px; }
.py-an { color: #e8c08a; }
.py-chip { border-color: color-mix(in srgb, var(--gold) 60%, #3c4250); }

/* ---------- Bosstiary e boss slots (Fase 4.3, js/bosstiario-ui.js) ---------- */
.bt-tela { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.bt-tela .ch-moeda .bar { width: 80%; margin-top: 4px; }
.bt-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
@media (max-width: 900px) { .bt-slots { grid-template-columns: 1fr; } }
.bt-slot { --rc: #3c4250; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-top: 3px solid var(--rc); border-radius: 6px; min-width: 0; }
.bt-slot.ativo { background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 14%, #1a1d25), #1a1d25 65%); }
.bt-slot.dia { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.bt-slot.trancado { opacity: .6; }
.bt-slot p { margin: 0; font-size: 12px; }
.bt-slot-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; border-bottom: 1px solid #2c303a; padding-bottom: 4px; }
.bt-slot-cab b { font-size: 13.5px; letter-spacing: .04em; }
.bt-slot-cab small { font-size: 11px; color: var(--muted); }
.bt-slot-boss { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bt-slot-boss > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bt-slot-boss b { font-family: "Cinzel", serif; font-size: 15px; color: #fff; }
.bt-slot-boss small { font-size: 11px; }
.bt-slot-pe { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.bt-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bt-filtros .cy-search { width: 200px; }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.bt-card { --rc: #3c4250; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 6px; background: #1a1d25; border: 1px solid #3c4250; border-top: 3px solid var(--rc); border-radius: 6px; color: #eee; cursor: pointer; }
.bt-card:hover { border-color: var(--rc); }
.bt-card[hidden] { display: none; }
.bt-card b { font-size: 12.5px; line-height: 1.2; text-align: center; }
.bt-card small { font-size: 11px; color: #ccc; }
.bt-card .cy-spr { height: 52px; display: flex; align-items: flex-end; }
.bt-card.nv0 .cy-spr { filter: grayscale(.85) brightness(.75); }
.bt-card.nv3 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
.bt-rar { font-weight: 700; letter-spacing: .02em; }
.bt-barra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; }
.bt-barra i { display: block; height: 6px; background: #2a2e38; border-radius: 2px; overflow: hidden; }
.bt-barra i span { display: block; height: 100%; background: linear-gradient(#e0b858, #a8832c); }
.bt-barra i.ok span { background: linear-gradient(#7bd06a, #4a9a3a); }
.bt-selos { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; pointer-events: none; }
.bt-selos.bc { top: 22px; }
.bt-ficha .bt-selos, .bt-slot .bt-selos { position: static; display: inline-flex; }
.bt-selo { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 4px; border-radius: 6px; background: #2a2e38; color: #ddd; white-space: nowrap; }
.bt-selo.dia { background: none; font-size: 13px; padding: 0; }
.bt-selo.vaga { background: var(--good); color: #000; }
.bt-selo.cd { background: #3a2a2c; color: #f0a0a4; }
.bt-nv { font-size: 10px; color: var(--gold); }
.bauto-item.cd { opacity: .55; }
.bt-linha { color: var(--muted); }
.bt-linha .bad { color: #f0a0a4; }
.bt-ficha { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bt-ficha-topo { display: flex; gap: 14px; align-items: center; width: 100%; padding: 10px 14px; border: 1px solid var(--rc); border-radius: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 18%, #1d1f24), #1a1c21 60%); }
.bt-ficha-topo > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.bt-ficha-topo > div > b { font-family: "Cinzel", serif; font-size: 20px; color: #fff; }
.bt-ficha-topo small { color: var(--muted); }
.bt-ficha-topo .bt-barra { max-width: 320px; }
.bt-tabela { border-collapse: collapse; font-size: 12.5px; min-width: 360px; }
.bt-tabela th, .bt-tabela td { padding: 4px 10px; border-bottom: 1px solid #2c303a; text-align: left; }
.bt-tabela th { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .04em; }
.bt-tabela tr.ok td { color: var(--good); }
.bt-kv { width: 100%; }
.bt-ficha-pe { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Imbuements do Tibia (Fase 4.4): materiais, tempo, tier máximo ---------- */
.btn.tiny { padding: 1px 6px; font-size: 11px; }
.imb-head .imb-aceita { display: block; font-size: 11px; margin-top: 2px; }
.imb-slot.antigo { border-style: dashed; border-color: #8a6a3a; }
.imb-cur-top { display: flex; align-items: center; gap: 8px; }
.imb-tempo { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: var(--muted); }
.imb-bar { position: relative; flex: 0 0 140px; height: 7px; background: #111; border: 1px solid #444; border-radius: 4px; overflow: hidden; }
.imb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b8862b, #ffd060); }
.imb-mats { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; margin-top: 3px; }
.imb-mat { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 1px; background: #1a1a1c; border: 1px solid #3a3a3d; border-radius: 4px; }
.imb-mat small { font-size: 10px; font-weight: 700; color: var(--muted); }
.imb-mat.ok small { color: var(--good); }
.imb-mat.falta { border-color: #7a3a3a; }
.imb-mat.falta small { color: var(--danger); }
.imb-mat.fora { opacity: .45; }
.imb-mat.fora small { text-decoration: line-through; }
.imb-mat-x { display: inline-grid; place-items: center; width: 22px; height: 22px; font-style: normal; color: #888; }
.imb-opt.off { opacity: .55; }
.imb-opt-bt { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.imb-opts { max-height: 340px; }
.imb-estoque { display: flex; flex-wrap: wrap; gap: 3px; }
.imb-legenda { font-size: 11px; margin: 0; }
.imb-legenda .imb-mat { padding: 0 3px; }

/* ---------- condições (Fase 4.5a): ícones de estado do Tibia no cartão do boneco ---------- */
.pc-conds { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; min-height: 18px; }
.pc-cond { width: 18px; height: 18px; display: inline-block; background: url('../assets/condicoes/player-state-flags.png') 0 0 / 540px 18px no-repeat;
  image-rendering: pixelated; border: 1px solid #000; border-radius: 2px; box-shadow: 0 0 0 1px #3a3f48; }
.pc-cond.txt { background: #2a2f38; color: #ffb070; font-size: 11px; line-height: 16px; text-align: center; font-style: normal; }
.hcond-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 6px 0; }
.hcond-lista .pc-cond { margin-right: 4px; vertical-align: middle; }

/* ---------- suporte (Fase 4.5b): o monk no cartão e a lista do Helper › Suporte ---------- */
.pc-serene { width: 18px; height: 18px; display: inline-block; background: url('../assets/condicoes/serene-off.png') center / 13px 13px no-repeat;
  image-rendering: pixelated; border: 1px solid #000; border-radius: 2px; box-shadow: 0 0 0 1px #3a3f48; }
.pc-serene.on { background-image: url('../assets/condicoes/serene-on.png'); }
.pc-harm { display: inline-flex; gap: 2px; align-items: center; padding: 0 3px; height: 18px; }
.pc-harm b { width: 7px; height: 7px; border-radius: 50%; background: #2a2f38; border: 1px solid #555; }
.pc-harm b.on { background: #7fd3ff; border-color: #bfe9ff; box-shadow: 0 0 3px #7fd3ff; }
.pc-virtude { font-size: 10px; line-height: 16px; padding: 0 4px; border: 1px solid #3a3f48; border-radius: 2px; color: #cfe8a8; background: #20252c; }
.hsup-lista small.muted { line-height: 1.3; }

/* ---------- Weapon Proficiency (Fase 4.7, js/proficiencia-ui.js): no molde da janela do cliente do Tibia ---------- */
.tb-pf { position: relative; }
.pf-tela { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px; min-height: 420px; }
.pf-lado { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-busca { width: 100%; padding: 6px 8px; background: var(--slot); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text); }
.pf-armas { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 560px; padding-right: 2px; }
.pf-arma { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 6px; text-align: left;
  background: #1a1d25; border: 1px solid #3c4250; border-radius: 4px; }
.pf-arma:hover { border-color: var(--border-2); }
.pf-arma.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.pf-arma .icon { width: 34px; height: 34px; display: grid; place-items: center; background: var(--slot); border: 1px solid var(--border); border-radius: 3px; }
.pf-arma-nome { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pf-arma-nome b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-arma-nome small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-arma-nivel { font-size: 12px; font-weight: 800; color: #cfd6e4; position: relative; padding-right: 2px; }
.pf-arma-nivel.mastery { color: var(--gold); }
.pf-arma-nivel em { position: absolute; top: -9px; right: -6px; font-style: normal; font-size: 10px; min-width: 14px; text-align: center;
  border-radius: 7px; background: var(--danger); color: #fff; }
.pf-barra { display: block; height: 4px; background: #11131a; border: 1px solid #2c303a; border-radius: 2px; overflow: hidden; }
.pf-barra > i { display: block; height: 100%; background: linear-gradient(90deg, #a57a26, var(--gold)); }
.pf-barra.grande { height: 9px; border-radius: 4px; }
.pf-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-cab { display: flex; gap: 12px; align-items: center; padding: 6px 8px; background: #16181e; border: 1px solid #3c4250; border-radius: 6px; }
.pf-moldura { position: relative; width: 190px; height: 84px; flex: none; }
.pf-moldura > img { position: absolute; inset: 0; }
.pf-moldura-arma { position: absolute; left: 79px; top: 26px; width: 32px; height: 32px; display: grid; place-items: center; }
.pf-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pf-nome { font-size: 16px; color: var(--gold); }
.pf-info small { font-size: 11.5px; }
.pf-xp { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.pf-xp .ouro { color: var(--gold); }
.pf-arvore { display: flex; gap: 6px; overflow-x: auto; padding: 8px; background: linear-gradient(#1b1e26, #14161c); border: 1px solid #3c4250; border-radius: 6px; }
.pf-nivel { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; padding: 6px 4px 8px; border: 1px solid #2c303a; border-radius: 4px; background: #191c24; }
.pf-nivel.fechado { opacity: .45; }
.pf-nivel-cab { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-bottom: 4px; border-bottom: 1px solid #2c303a; width: 100%; }
.pf-nivel-cab b { font-size: 12px; letter-spacing: .03em; }
.pf-nivel-cab small { font-size: 10px; color: var(--muted); }
.pf-perk { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: none; border-radius: 3px;
  background: url('../assets/proficiencia/borda.png') center / 42px 42px no-repeat, #0e1015; }
.pf-perk:not([disabled]):hover { filter: brightness(1.25); }
.pf-perk.on { background: url('../assets/proficiencia/borda-ativa.png') center / 42px 42px no-repeat, #2a2212; box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent); }
.pf-perk[disabled] { cursor: default; }
.pf-perk.sem-efeito { filter: grayscale(.85); }
.pf-ic { display: inline-block; image-rendering: pixelated; background-repeat: no-repeat; }
.pf-baixo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.pf-ativas .gtitle { margin-top: 0; }
.pf-ativas ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-ativas li { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.pf-ativas li small { color: var(--muted); margin-right: 4px; }
.pf-ativas li.sem-efeito { opacity: .7; }
.pf-ativas li em { color: var(--muted); font-size: 11px; }
.pf-teste { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pf-ajuda { margin: 0; font-size: 12px; line-height: 1.45; }
@media (max-width: 760px) {
  .pf-tela { grid-template-columns: 1fr; }
  .pf-armas { max-height: 180px; }
  .pf-baixo { grid-template-columns: 1fr; }
  .pf-cab { flex-direction: column; align-items: flex-start; }
}

/* ---------- Recompensa diária e criatura do dia (Fase 4.8a; js/diaria-ui.js, arte do cliente do Tibia em assets/diaria) ---------- */
.tb-dr { position: relative; }
.tb-dr.pronta span { animation: dr-pisca 1.6s ease-in-out infinite; }
@keyframes dr-pisca { 50% { filter: drop-shadow(0 0 5px var(--gold)); } }
.dr-tela { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.dr-seq-ico { position: relative; display: block; width: 66px; height: 44px; background: center / contain no-repeat; image-rendering: pixelated; }
.dr-seq-ico b { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; }
.ch-moeda b img { vertical-align: -3px; }
.dr-aviso { margin: 0; padding: 6px 10px; background: #2a2416; border: 1px solid #6b5520; border-radius: 6px; color: var(--gold); font-size: 13px; }
.dr-parede { display: flex; align-items: stretch; gap: 4px; }
.dr-seta { align-self: center; image-rendering: pixelated; flex: none; }
.dr-volta { display: block; width: 100%; height: 13px; image-rendering: pixelated; margin-top: -6px; }
.dr-dia { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; text-align: center;
  background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.dr-dia-n { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.dr-dia small { font-size: 10.5px; line-height: 1.25; color: var(--muted); }
.dr-dia-ico { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.dr-cartas { display: flex; align-items: center; gap: 2px; }
.dr-cartas b { font-size: 13px; color: var(--gold); }
.dr-visto { position: absolute; right: -6px; bottom: -2px; }
.dr-dia.feito { opacity: .65; }
.dr-dia.hoje { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 25%, transparent); }
.dr-dia.hoje .dr-dia-n { color: var(--gold); }
.dr-dia.proximo { border-color: color-mix(in srgb, var(--gold) 45%, #3c4250); border-style: dashed; }
.dr-dia.trancado .dr-dia-ico { filter: grayscale(.85) brightness(.75); }
.dr-pego { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #182118; border: 1px solid #3c5a3e; border-radius: 6px; }
.dr-pego > div { display: flex; flex-direction: column; }
.dr-pego small { color: var(--muted); font-size: 12px; }
.dr-resgate { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.dr-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.dr-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: var(--slot); border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.dr-item.on { border-color: var(--gold); }
.dr-item small { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dr-item-ico { position: relative; padding: 2px; background: none; border: 0; cursor: pointer; }
.dr-item-ico:disabled { cursor: default; }
.dr-item-ico b { position: absolute; right: -2px; bottom: -2px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.dr-item span { display: flex; gap: 2px; }
.btn.tiny { padding: 0 7px; font-size: 12px; line-height: 18px; }
.dr-botao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-botao small { flex: 1; min-width: 200px; font-size: 12px; }
.dr-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.dr-colunas > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (max-width: 900px) { .dr-colunas { grid-template-columns: 1fr; } .dr-parede { flex-wrap: wrap; } .dr-dia { flex-basis: 28%; } .dr-seta, .dr-volta { display: none; } }
.dr-bloco { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.dr-cria { display: flex; align-items: center; gap: 10px; }
.dr-cria > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dr-cria b { font-size: 15px; color: var(--gold); }
.dr-cria small { font-size: 12px; color: var(--muted); }
.dr-cria small .btn { margin: 2px 2px 0 0; }
.dr-boss { margin: 0; font-size: 12.5px; }
.dr-teste select { max-width: 100%; }
.dr-boost { flex-direction: row; align-items: center; gap: 10px; border-color: color-mix(in srgb, #b48ee8 55%, #3c4250); }
.dr-boost > div { display: flex; flex-direction: column; }
.dr-boost b { color: #b48ee8; }
.dr-boost small { color: var(--muted); font-size: 12px; }
.dr-bonus { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.dr-bonus-item { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; opacity: .45; }
.dr-bonus-item.on { opacity: 1; }
.dr-bonus-item small { font-size: 10px; line-height: 1.15; color: var(--muted); }
.dr-escudo { width: 48px; height: 48px; background: url('../assets/diaria/descanso.png') 0 0 / 288px 48px no-repeat; image-rendering: pixelated; }
.dr-bonus-item .dr-escudo { background-size: 288px 48px; }
.dr-hist { margin: 0; padding-left: 16px; font-size: 12px; max-height: 160px; overflow-y: auto; }
.dr-hist li { margin: 2px 0; }
.dr-chip { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)) !important; color: var(--gold); }
.dr-an { color: var(--gold); }
.bt-gemas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 4px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Task Board (Fase 4.8b; js/taskboard-ui.js, arte do cliente do Tibia em assets/taskboard) ---------- */
.tb-tb { position: relative; }
.tb-tela { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.tb-abas { grid-template-columns: repeat(3, 1fr); }
.tb-abas button img, .tb-tela img.px { image-rendering: pixelated; vertical-align: -3px; }
.tb-difs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tb-dif { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; color: #ccc; cursor: pointer; }
.tb-dif b { font-size: 13px; letter-spacing: .04em; }
.tb-dif small { font-size: 10.5px; color: var(--muted); }
.tb-dif.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.tb-dif:disabled { opacity: .45; cursor: default; }
.tb-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tb-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid #4a4436; border-radius: 6px; min-width: 0;
  background-color: #1d1b17; background-repeat: no-repeat; background-size: 100% 34px; background-position: top center; image-rendering: pixelated; }
.tb-card.prata { border-color: #9aa3b0; box-shadow: 0 0 10px color-mix(in srgb, #c9d2df 25%, transparent); }
.tb-card.ouro { border-color: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 30%, transparent); }
.tb-card-cab { display: flex; flex-direction: column; align-items: center; min-height: 34px; justify-content: center; padding: 0 30px; text-align: center; }
.tb-card-cab b { font-size: 13.5px; color: #f1e7cf; text-shadow: 0 1px 2px #000; }
.tb-tipo { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.tb-tipo.prata { color: #d9e2ee; }
.tb-tipo.ouro { color: var(--gold); }
.tb-card-cri { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tb-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 12.5px; }
.tb-card-hunts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 20px; }
.tb-ativa { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: start; }
.tb-ativa-info { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.tb-ativa-info p { margin: 0; font-size: 13px; }
.tb-ativa.completa .tb-ativa-info { border-color: var(--gold); }
.tb-up { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #2c303a; }
.tb-up > div { display: flex; flex-direction: column; min-width: 0; }
.tb-up small { font-size: 11.5px; }
.tb-pref-grade { display: grid; grid-template-columns: 18px 1fr 1fr; gap: 4px 8px; align-items: center; }
.tb-pref-grade > small { text-align: center; }
.tb-pref-vaga { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 2px; background: var(--slot); border: 1px solid var(--border); border-radius: 6px; color: #ccc; }
.tb-pref-vaga.vazia { cursor: pointer; font-size: 18px; }
.tb-pref-vaga.tranca { opacity: .55; }
.tb-pref-sel { width: 100%; }
.tb-wtopo { display: grid; grid-template-columns: 1fr 1.4fr auto auto; align-items: center; gap: 10px; padding: 8px; background: #1a1d25; border: 1px solid #3c4250; border-radius: 6px; }
.tb-wtopo > div { display: flex; flex-direction: column; gap: 2px; }
.tb-wtopo small { font-size: 11.5px; color: var(--muted); }
.tb-mult { align-items: center; font-size: 22px; font-weight: 800; color: var(--gold); }
.tb-wcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tb-wlista { display: flex; flex-direction: column; gap: 4px; }
.tb-wtask { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 4px; border-radius: 6px; }
.tb-wtask > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-wtask small { font-size: 11.5px; color: var(--muted); }
.tb-wtask.ok { background: #182118; }
.tb-wtask.ok b { color: var(--good); }
.coin.big { width: 26px; height: 26px; }
.tb-semana { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 8px 10px; background: #1d1b17 no-repeat center top / 182px 60px; border: 1px solid #4a4436; border-radius: 6px; padding-top: 64px; image-rendering: pixelated; }
.tb-semana small { font-size: 12.5px; }
.tb-loja { display: flex; flex-direction: column; gap: 8px; }
.tb-oferta { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 8px; background: #1a1d25 no-repeat 4px center / 44px 29px; border: 1px solid #3c4250; border-radius: 6px; }
.tb-oferta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-oferta small { font-size: 12px; color: var(--muted); }
.tb-oferta.roda { grid-template-columns: 52px 1fr; align-items: start; }
.tb-roda-bonecos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.tb-roda-bonecos > div { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--slot); border: 1px solid var(--border); border-radius: 6px; }
.tb-an { color: #e8c37a; }
@media (max-width: 900px) { .tb-opcoes, .tb-wcols { grid-template-columns: 1fr; } .tb-ativa { grid-template-columns: 1fr; } .tb-difs { grid-template-columns: repeat(2, 1fr); } .tb-wtopo { grid-template-columns: 1fr 1fr; } }

/* ---------- Hazard (Fase 4.8b; js/hazard-ui.js; o ícone do cliente em assets/taskboard/criatura-quests.png) ---------- */
.hz-ico { display: inline-block; vertical-align: -3px; background: url('../assets/taskboard/criatura-quests.png') no-repeat; image-rendering: pixelated; }
.hz-n { font-size: 11px; color: #ffd34d; margin-left: 2px; }
.hz-chip { border-color: color-mix(in srgb, #c9a23a 55%, var(--border)) !important; color: #ffd34d; }
.hz-bloco { margin: 6px 0; }
.hz-niveis { display: flex; flex-wrap: wrap; gap: 4px; }
.hz-niveis .btn { min-width: 34px; }
.hz-boss { margin: 4px 0; font-size: 12.5px; color: #ffd34d; }
.hz-cartao { display: inline-flex; align-items: center; margin-top: 4px; }
.hz-an { color: #ffd34d; }

/* ---------- Soulpit e animus mastery (Fase 4.8c; js/soulpit-ui.js; arte do cliente em assets/soulpit e assets/taskboard) ---------- */
.sp-abas { margin-bottom: 8px; }
.sp-abas button img { vertical-align: -3px; }
.sp-tela { display: flex; flex-direction: column; gap: 10px; }
.sp-ind { vertical-align: -3px; image-rendering: pixelated; }
.sp-cores { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-core { width: 40px; height: 40px; }
.sp-core.mini { width: 30px; height: 30px; }
.sp-core.on { box-shadow: 0 0 0 2px #6a8ad0; border-color: #6a8ad0; }
.sp-escolha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px; background: #14171e; border: 1px solid #2c303a; border-radius: 6px; }
.sp-escolha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-escolha small { font-size: 11.5px; color: var(--muted); }
.sp-fundir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sp-fundir small { color: var(--muted); margin-right: 2px; }
.sp-ultimo { margin: 0; font-size: 12.5px; color: #8fb4e8; }
.sp-filtro { display: flex; flex-direction: column; gap: 6px; }
.sp-lista { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; padding-right: 2px; }
.sp-linha { display: grid; grid-template-columns: 34px 1fr auto 16px; align-items: center; gap: 8px; padding: 2px 6px; background: #16181e; border: 1px solid transparent; border-radius: 5px; color: #ddd; text-align: left; cursor: pointer; }
.sp-linha:hover { border-color: #3c4250; }
.sp-linha.on { border-color: #6a8ad0; background: #1b2232; }
.sp-linha > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.sp-linha b { font-size: 12.5px; }
.sp-preco { font-size: 12.5px; color: var(--gold); white-space: nowrap; }
.sp-preco img { vertical-align: -2px; }
.sp-vazio { display: inline-block; width: 14px; }
.sp-fight { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 6px; background: #14171e; border: 1px solid #2c303a; border-radius: 6px; }
.sp-fight img { vertical-align: -3px; }
.sp-confirma { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; width: 100%; }
.sp-confirma b { grid-column: 1 / -1; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.sp-animus { display: flex; flex-wrap: wrap; gap: 2px; }
.sp-an { color: #8fb4e8; }
.sp-an img { vertical-align: -2px; }
.sp-ficha { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 4px 6px; background: #14171e; border: 1px solid #2c303a; border-radius: 6px; font-size: 12.5px; }
.sp-ficha > span { flex: 1; display: flex; flex-direction: column; }
.sp-ficha small { color: var(--muted); }
.sp-ficha.ok { border-color: color-mix(in srgb, #6a8ad0 60%, #2c303a); }
.cy-animus { position: absolute; left: 2px; bottom: 2px; }
@media (max-width: 900px) { .sp-escolha { grid-template-columns: auto 1fr; } .sp-escolha .btn { grid-column: 1 / -1; } }

/* Proficiency: arma equipada sem weapon proficiency (aparece na lista, apagada) */
.pf-arma.sem { opacity: .7; }
.pf-sem { display: flex; gap: 12px; align-items: flex-start; padding: 12px; }
.pf-sem p { margin: 0; }
/* Exaltation Forge: a opção de convergência logo acima do botão */
.ex-conv-chk { display: flex; margin: 8px 0 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* topo: pasta "Itens" (Imbuir, Forja, Exaltação, Proficiency) que abre no hover ou no clique */
.tb-pasta { position: relative; display: flex; }
.tb-pasta-bt { position: relative; }
.tb-pasta:has(.badge:not([hidden])) .tb-pasta-bt::after { content: ""; position: absolute; top: 3px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e0463a; box-shadow: 0 0 0 2px var(--bg); }
.tb-pasta-menu {
  display: none; position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; z-index: 60; min-width: 160px;
  flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--panel); box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.tb-pasta-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* ponte: o hover não cai no vão */
.tb-pasta:hover .tb-pasta-menu, .tb-pasta.aberta .tb-pasta-menu { display: flex; }
.tb-nav .tb-pasta-menu button { flex-direction: row; justify-content: flex-start; gap: 8px; width: 100%; padding: 6px 10px; font-size: 13px; position: relative; }
.tb-nav .tb-pasta-menu button span { font-size: 18px; }
.tb-pasta-menu .badge { position: static; margin-left: auto; }
@media (max-width: 520px) { .tb-pasta-menu { left: 0; translate: none; } }
/* barra da hunt: as preys ativas, pequenas (criatura, bônus e tempo); clique abre a Prey */
.py-ativas { display: flex; gap: 6px; align-items: center; padding: 2px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2, rgba(0, 0, 0, .25)); color: var(--text); cursor: pointer; font-size: 11px; }
.py-ativas:hover { border-color: var(--gold); }
.py-ativa { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.py-ativa b { font-weight: 700; }
.py-ativa small { color: var(--muted); }
.py-ativa + .py-ativa { padding-left: 6px; border-left: 1px solid var(--border); }
/* seletor de idioma (Config e home): js/idioma.js */
.idioma-sel { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; font-size: 13px; color: var(--muted); }
.idioma-sel select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.pt-esq .idioma-sel { margin: 10px 0 0; }
/* topo: ícones desenhados (o baú de dragão animado no Baú) no lugar do emoji; mesmo espaço do emoji */
.tb-nav button .tb-ic { display: block; width: 28px; height: 24px; }
.tb-nav button .tb-ic img { display: block; width: 28px; height: 28px; margin-top: -4px; object-fit: contain; }
/* auto bless ao lado do botão de bênção no cartão do boneco */
.pc-actions .auto-bless { font-size: 11px; gap: 3px; align-self: center; }
/* janela de início da hunt (js/hunt-inicio-ui.js) */
.hi-tela { display: flex; flex-direction: column; gap: 8px; }
.hi-area { margin: 0; font-size: 15px; }
.hi-membros { display: flex; flex-direction: column; gap: 4px; }
.hi-membro { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; }
.hi-membro.fora { opacity: .55; }
.hi-membro label { display: flex; align-items: center; gap: 8px; }
.hi-membro label span { display: flex; flex-direction: column; }
.hi-membro select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.hi-op { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.hi-op span { display: flex; flex-direction: column; } .hi-op small { color: var(--muted); }
.hi-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* selo do refino nos espaços pequenos (o equipamento no cartão da party tem 28 px): tudo encolhe junto (número, fogo, estalos) */
.pc-eq .slot > .ref-selo { scale: .72; transform-origin: 100% 100%; right: -1px; bottom: 0; }
.pc-eq .slot:has(> .ref-t3), .pc-eq .slot:has(> .ref-t4) { box-shadow: inset 0 -5px 6px -5px rgba(255, 120, 20, .4); }
/* X de fechar nas janelas largas que não têm cabeçalho próprio (imbuir, prey, proficiency, diária, tasks, cyclopedia) */
.win-box { position: relative; }
.win-x-larga { display: none; }
#window.wide.com-x .win-x-larga {
  display: grid; place-items: center; position: absolute; top: 6px; right: 8px; z-index: 5; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(20, 22, 27, .85); border: 1px solid var(--border-2); color: var(--text); font-size: 15px; cursor: pointer;
}
#window.wide.com-x .win-x-larga:hover { border-color: var(--gold); color: var(--gold); }
/* Idle Coins: o saldo no topo e a aba da Loja (js/coins-ui.js) */
.tb-coins { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; color: #8ff0c4; }
.tb-coins img { width: 16px; height: 16px; }
.coin-loja { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.coin-saldo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(90deg, rgba(40, 160, 110, .18), transparent); }
.coin-saldo b { font-size: 20px; color: #8ff0c4; display: block; } .coin-saldo small { color: var(--muted); }
.coin-saldo p { margin: 0; flex-basis: 100%; }
.coin-ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.coin-oferta { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.coin-oferta-ic { font-size: 24px; text-align: center; }
.coin-oferta small { display: block; color: var(--muted); }
.coin-oferta .btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Loot Pouch: o cadeado do item protegido (não vende no vender tudo) */
.slot .nv-lock { position: absolute; left: 1px; top: 0; font-size: 9px; font-style: normal; line-height: 1; filter: drop-shadow(0 0 1px #000); pointer-events: none; }

/* ---------- Loja (js/loja-ui.js): o layout da loja de cash do Ragnarok, nas cores do jogo ---------- */
.ls { display: flex; flex-direction: column; gap: 10px; }
.ls-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 4px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, #1b1f2a), #141821 60%); border: 1px solid color-mix(in srgb, var(--gold) 28%, #2b3040);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ls-marca { display: flex; flex-direction: column; line-height: 1.1; }
.ls-marca b { font-family: var(--font-titulo, inherit); font-size: 22px; letter-spacing: .06em; color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.ls-marca small { font-size: 11px; color: var(--muted); }
.ls-saldo { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-saldo > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 3px; background: rgba(0, 0, 0, .35); border: 1px solid #3a4050; font-weight: 700; }
.ls-saldo img { width: 18px; height: 18px; }
.ls-abas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ls-aba { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 3px; border: 1px solid #3a4050;
  background: linear-gradient(#232836, #1a1e28); color: var(--text); font-weight: 600; cursor: pointer; }
.ls-aba:hover { border-color: color-mix(in srgb, var(--gold) 60%, #3a4050); }
.ls-aba.on { background: linear-gradient(#2c2619, #1d1a14); border-color: #8a6c33; color: #ecd08e; box-shadow: inset 0 -2px 0 #b48a42; }
.ls-aba-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 16px; }
.ls-aba-ic img { width: 22px; height: 22px; }
.ls-busca { margin-left: auto; min-width: 180px; padding: 6px 10px; border-radius: 3px; border: 1px solid #3a4050; background: #12151c; color: var(--text); }
.ls-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 10px; align-items: start; }
@media (max-width: 760px) { .ls-corpo { grid-template-columns: 1fr; } }
.ls-vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 45%, #2b3040) transparent; }
.ls-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 8px; text-align: center; border-radius: 4px;
  background: radial-gradient(circle at 50% 22%, #262c3a, #171a22 70%); border: 1px solid #333a4a; transition: border-color .15s, transform .15s; }
.ls-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, #333a4a); transform: translateY(-1px); }
.ls-card.no-carro { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent) inset; }
.ls-selo { position: absolute; top: 6px; left: -4px; padding: 1px 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #2a1a00;
  background: linear-gradient(#ffd86b, #e2a730); border-radius: 0 4px 4px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ls-ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, #20242f), #14171e 72%); border: 1px solid #3a4050; }
.ls-tem { position: absolute; right: -6px; bottom: -4px; padding: 0 5px; font-size: 10px; font-weight: 700; border-radius: 999px; background: #0d0f14; border: 1px solid #3a4050; }
.ls-nome { font-size: 12.5px; line-height: 1.2; }
.ls-desc { font-size: 10.5px; color: var(--muted); line-height: 1.25; min-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ls-preco { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--gold); }
.ls-preco small { color: var(--muted); font-weight: 500; }
.ls-add { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ls-vazio { grid-column: 1 / -1; }
.ls-carro { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: linear-gradient(#1c2029, #14171e); border: 1px solid #333a4a; position: sticky; top: 0; }
.ls-carro-topo { display: flex; align-items: center; justify-content: space-between; }
.ls-carro-lista { display: flex; flex-direction: column; gap: 5px; max-height: 36vh; overflow-y: auto; }
.ls-linha { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.ls-linha-info { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.ls-linha-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-linha-info small { color: var(--gold); display: inline-flex; gap: 3px; align-items: center; }
.ls-qtd { display: inline-flex; align-items: center; gap: 4px; }
.ls-qtd button, .ls-tirar { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #3a4050; background: #232836; color: var(--text); cursor: pointer; line-height: 1; }
.ls-tirar { color: #ff8a7a; }
.ls-contas { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed #3a4050; font-size: 12.5px; }
.ls-contas > div { display: flex; justify-content: space-between; }
.ls-contas b { color: var(--gold); font-size: 14px; }
.ls-contas .bad span { color: #ff6a5a; }
.ls-comprar { width: 100%; padding: 9px; font-size: 14px; letter-spacing: .04em; }
.ls-nota { margin: 0; font-size: 11px; }
.coin-cats { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Roulette Ticket (js/roleta-ui.js): a faixa gira por transform (uma transição por giro) ---------- */
.roleta { display: flex; flex-direction: column; gap: 10px; min-width: min(560px, 80vw); }
.rl-janela { position: relative; overflow: hidden; height: 92px; border: 1px solid var(--line, #3a3226); border-radius: 8px;
  background: linear-gradient(#1a1610, #0f0c08); }
.rl-faixa { display: flex; position: absolute; left: 0; top: 6px; will-change: transform; }
.rl-carta { flex: 0 0 72px; height: 78px; margin-right: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 6px; background: #241e15; border: 1px solid #3a3226; }
.rl-carta small { font-size: 11px; color: var(--muted); height: 14px; }
.rl-bencao, .rl-casket, .rl-xp50 { border-color: #a070e0; background: #2a1f38; }
.rl-moonlight { border-color: #f0c040; background: #3a2e12; }
.rl-red_dagger, .rl-blue_dagger { border-color: #e08a3a; background: #33230f; }
.rl-marca { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold, #e8b25a); box-shadow: 0 0 6px var(--gold, #e8b25a); }
.rl-res { text-align: center; min-height: 20px; }
.rl-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rl-tem { display: inline-flex; align-items: center; gap: 4px; }
.rl-chances td { padding: 2px 8px; vertical-align: middle; }
.rl-chances td img { vertical-align: middle; }
.look-dono { font-style: normal; font-size: 10px; color: #7fd27f; }
.look-dono.tranca { color: var(--muted); }
.rl-starlight_vial, .rl-sun_catcher, .rl-moon_mirror, .rl-lit_torch, .rl-bone_fiddle, .rl-conch_shell_horn { border-color: #5aa8e8; background: #142536; }
.rl-hist summary, .rl-chances summary { cursor: pointer; }
.rl-hist-resumo { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; }
.rl-hist-res { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.rl-hist-lista { max-height: 220px; overflow-y: auto; }
.rl-hist-linha { display: flex; align-items: center; gap: 8px; padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.rl-hist-linha small { min-width: 78px; }
.rl-hist-ic { width: 24px; height: 24px; display: inline-flex; }
/* pasta "Opções" na ponta direita do topo: o menu abre para a esquerda (não sai da tela) */
.tb-pasta-dir .tb-pasta-menu { left: auto; right: 0; translate: none; }

/* ---------- Task Board: até 3 ativas e o painel Tasks (13/10/2026) ---------- */
.tb-sub { margin: 10px 0 6px; font-size: 13px; color: var(--gold, #e8b25a); }
.tb-ativas { display: grid; gap: 8px; }
.tk-row { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.tk-row.feita .tk-top b { color: #7fd27f; }
.tk-ic { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; overflow: hidden; }
.tk-main { flex: 1; min-width: 0; }
.tk-top { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.tk-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tk-bar { height: 5px; margin-top: 2px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; }
.tk-bar .fill { height: 100%; background: linear-gradient(90deg, #c08a2a, #e8b25a); }
.tk-row.feita .tk-bar .fill { background: #5fb85f; }
/* ---------- roteiro de hunt (js/roteiro-ui.js) ---------- */
.rot h4 { margin: 10px 0 6px; color: var(--gold, #e8b25a); font-size: 13px; }
.rot-tasks, .rot-fins { display: flex; flex-direction: column; gap: 4px; }
.rot-task, .rot-fim { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.rot-task.on, .rot-fim.on { border-color: var(--gold, #e8b25a); background: rgba(232, 178, 90, .08); }
.rot-task small { margin-left: auto; }
.rot-n { min-width: 14px; font-weight: 700; color: var(--gold, #e8b25a); }
.rot-linha { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.rot-andando { font-size: 12px; padding: 4px 6px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 6px; line-height: 1.6; }
.rot-andando .ok { color: #7fd27f; text-decoration: line-through; }
.rot-andando .agora { color: var(--gold, #e8b25a); font-weight: 700; }
.tk-botoes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
/* party multiplayer: a proposta do líder e os prontos (js/grupo-ui.js) */
.gp-prop { margin: 8px 0; padding: 8px; border: 1px solid var(--gold, #e8b25a); border-radius: 8px; background: rgba(232, 178, 90, .06); display: flex; flex-direction: column; gap: 6px; }
.gp-prop.vazia { border-color: var(--border); background: none; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gp-prontos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.gp-prontos .ok { color: #7fd27f; }

/* ---------- Market e leilão (js/mercado-ui.js; visual de 13/10/2026) ---------- */
.mk { padding: 0 18px 18px; }
.mk-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); margin: 0 -18px 14px; padding: 0 18px; background: linear-gradient(#1d1f24, #17191d); flex-wrap: wrap; }
.mk-abas { display: flex; gap: 2px; }
.mk-abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 16px 11px; color: var(--muted); font-family: "Cinzel", Georgia, serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.mk-abas button:hover { color: #d8d4ca; }
.mk-abas button.on { color: var(--gold); border-bottom-color: var(--gold); }
.mk-saldo { display: flex; gap: 8px; align-items: center; padding: 10px 0; }
.mk-moeda { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 3px; background: #121317; font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-carr { color: var(--muted); font-size: 12px; }
.mk-cols { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .mk-cols { grid-template-columns: 1fr; } }
.mk-esq { display: flex; flex-direction: column; gap: 12px; }
.mk-painel { background: #15171b; border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px 12px; }
.mk-sec { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a39a86; }
.mk-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.mk-sec small { order: 2; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.mk-sec::after { order: 3; }
.mk-painel > .mk-sec:first-child, .mk-corpo > .mk-sec:first-child { margin-top: 0; }
.mk-res { display: flex; flex-direction: column; gap: 1px; max-height: 240px; overflow-y: auto; margin-top: 8px; }
.mk-it { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.mk-it:hover { background: #1d1f24; }
.mk-it.on { background: #22252b; border-left-color: var(--gold); color: #f1e8d2; }
.mk-meus { flex-wrap: wrap; }
.mk-meus .slot.on { outline: 1px solid var(--gold); outline-offset: 1px; }
.mk-vazio { color: var(--muted); font-size: 13px; margin: 6px 0; }
.mk-nota { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 4px; padding: 8px 12px; border-left: 2px solid #4a4d56; background: #15171b; }
.mk-cab { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #15171b; border: 1px solid var(--border); border-radius: 4px; }
.mk-cab img { padding: 4px; background: #0e0f12; border: 1px solid var(--border); border-radius: 3px; }
.mk-cab-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mk-cab-txt b { font-family: "Cinzel", Georgia, serif; font-size: 17px; color: #f1e8d2; }
.mk-nada { padding: 28px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; }
.mk-nada > b { font-family: "Cinzel", Georgia, serif; font-size: 16px; color: #d8d4ca; }
.mk-tab table { font-size: 13px; font-variant-numeric: tabular-nums; }
.mk-tab th { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom-color: #3a3d45; padding: 6px 10px; }
.mk-tab td { padding: 6px 10px; border-bottom-color: #25282e; }
.mk-tab tbody tr:hover { background: #1b1d22; }
.mk-tab tr.mk-meu td:first-child { color: var(--gold); }
.mk-acao { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
td.mk-acao { display: table-cell; }
td.mk-acao > * { vertical-align: middle; }
td.mk-acao .btn { margin-left: 4px; }
.mk-item { display: flex; align-items: center; gap: 6px; }
td.mk-item { display: table-cell; }
td.mk-item > * { vertical-align: middle; }
.mk-ouro { color: var(--gold); font-weight: 600; }
.mk-tab .mk-l, .mk-tab td.mk-item { text-align: left; }
.mk-lado { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; border: 1px solid; }
.mk-lado.venda { color: #8fcf8f; border-color: #3c5e3c; }
.mk-lado.compra { color: #8fb3e8; border-color: #34496b; }
.mk-q { width: 72px; text-align: right; }
.mk-form { margin-top: 12px; padding: 12px; background: #121317; border: 1px solid var(--border); border-radius: 4px; }
.mk-form-tit { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.mk-form-tit b { color: #f1e8d2; }
.mk-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mk-campos-leilao { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-campo-largo { grid-column: span 2; }
@media (max-width: 760px) { .mk-campos-leilao { grid-template-columns: 1fr 1fr; } }
.mk-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-campo > span { font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.mk-campo input, .mk-campo select { width: 100%; }
.mk-resumo { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #25282e; flex-wrap: wrap; }
.mk-resumo small { flex: 1; min-width: 200px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.mk-leilao { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr 1.3fr; gap: 12px; align-items: center; padding: 10px 12px; margin: 6px 0; background: #15171b; border: 1px solid var(--border); border-radius: 4px; }
.mk-leilao.ultimo { border-color: #8a2a22; box-shadow: inset 3px 0 0 #c0392b; }
.mk-leilao small { display: block; color: var(--muted); font-size: 11.5px; }
.mk-leilao b { font-variant-numeric: tabular-nums; }
.mk-l-it { display: flex; gap: 10px; align-items: center; }
@media (max-width: 760px) { .mk-leilao { grid-template-columns: 1fr 1fr; } }

/* ---------- Charms no jeito do Tibia (js/bestiario-ui.js; arte: assets/charms) ---------- */
.ch-ico.img { border: 0; background: none; border-radius: 0; }
.ch-ico.img img { width: 100%; height: 100%; image-rendering: pixelated; }
.chx { display: flex; flex-direction: column; gap: 8px; }
.chx-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.chx-abas { display: flex; gap: 4px; }
.chx-abas button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; background: #1a1712; color: inherit; cursor: pointer; }
.chx-abas button.on { border-color: var(--gold, #e8b25a); background: #2a2216; color: var(--gold, #e8b25a); }
.chx-abas img { width: 20px; height: 20px; image-rendering: pixelated; }
.chx-moedas { display: flex; gap: 14px; align-items: center; }
.chx-moedas span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.chx-moedas img { width: 16px; height: 16px; image-rendering: pixelated; }
.chx-corpo { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 10px; }
@media (max-width: 760px) { .chx-corpo { grid-template-columns: 1fr; } }
.chx-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; align-content: start; padding: 6px; background: #12100c; border: 1px solid var(--border); border-radius: 8px; }
.chx-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.chx-tile:hover { background: #1d1912; }
.chx-tile.on { border-color: var(--gold, #e8b25a); background: #241e14; }
.chx-tile b { font-size: 11px; text-align: center; line-height: 1.1; }
.chx-tile small { font-size: 10px; color: var(--muted); min-height: 20px; display: flex; align-items: center; }
.chx-tile.fechado .ch-ico { filter: grayscale(1) brightness(.55); }
.chx-moldura { display: inline-grid; place-items: center; width: 52px; height: 52px; background-size: 100% 100%; image-rendering: pixelated; background-image: url('../assets/charms/ui/border_charmgrades.png'); }
.chx-moldura.g0 { opacity: .55; }
.chx-moldura.g1 { background-image: url('../assets/charms/ui/backdrop_charmgrade1.png'); }
.chx-moldura.g2 { background-image: url('../assets/charms/ui/backdrop_charmgrade2.png'); }
.chx-moldura.g3 { background-image: url('../assets/charms/ui/backdrop_charmgrade3.png'); }
.chx-moldura.grande { width: 72px; height: 72px; }
.chx-moldura.mini { width: 18px; height: 18px; }
.chx-det { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #12100c; border: 1px solid var(--border); border-radius: 8px; }
.chx-det-cab { display: flex; gap: 10px; align-items: center; }
.chx-det-cab b { font-size: 16px; display: block; }
.chx-det-cab small { color: var(--muted); }
.chx-graus { display: flex; gap: 6px; }
.chx-grau { flex: 1; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.chx-grau.on { border-color: var(--gold, #e8b25a); color: var(--gold, #e8b25a); }
.chx-grau.feito { opacity: .6; }
.chx-botao .btn img { width: 14px; height: 14px; vertical-align: -2px; image-rendering: pixelated; }
.chx-alvo { display: flex; gap: 8px; align-items: center; }
.chx-alvo small { display: block; }
.chx-cri { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.chx-cri-it { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; text-align: left; cursor: pointer; }
.chx-cri-it:hover { border-color: var(--gold, #e8b25a); }
/* a caveira do histórico de mortes no título da party e a janela (js/ui.js mortesJanelaHtml) */
.pt-mortes { float: right; background: #1d1a16; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-size: 13px; line-height: 20px; cursor: pointer; filter: grayscale(1) brightness(1.4); }
.pt-mortes:hover { border-color: var(--gold); filter: none; }
.mh-por { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.mh-por span { display: inline-flex; align-items: center; gap: 4px; }
.mh-lista { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.mh-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid #8a2a22; border-radius: 6px; background: #17140f; }
.mh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mh-dir { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.mh-cav { font-size: 26px; width: 40px; text-align: center; }
/* quem dropa o item da Mira (js/mira-ui.js miraDropHtml) */
.mira-it[data-action] { cursor: pointer; }
#popover:has(> .md) { width: 380px; max-width: calc(100vw - 16px); }
.mira-it[data-action]:hover { border-color: var(--gold); }
.md-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-width: 360px; }
.md-row { display: flex; align-items: center; gap: 6px; }
.md-nome { display: flex; flex-direction: column; min-width: 90px; }
.md-ir { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; justify-content: flex-end; }
/* item de addon da Mira no popover (js/ui.js) */
.ph-addon { display: block; color: #d9a6e8; }
/* ---------- desejos do Market e os avisos (js/desejos-ui.js) ---------- */
.dz-novo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dz-item { display: inline-flex; align-items: center; gap: 8px; }
.dz-item b { color: #f1e8d2; }
.dz-meus { display: grid; gap: 6px; }
.dz-meu { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #15171b; border: 1px solid var(--border); border-radius: 4px; }
.dz-meu > div { flex: 1; }
.dz-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.dz-tags span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; background: #22252b; color: #a39a86; }
.dz-sel-topo { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.dz-filtro { padding: 6px 10px; background: #1d1f24; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-weight: 700; }
.dz-filtro.on { color: #ecd08e; border-color: #8a6c33; }
.dz-lista { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.dz-linha { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #15171b; border: 1px solid var(--border); border-radius: 4px; }
.dz-linha b { flex: 1; }
.avisos-mk { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 7; width: min(300px, 70%); }
.dz-aviso { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 28px 8px 10px; background: rgba(14, 16, 21, .94); border: 1px solid #8a6c33; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); cursor: pointer; }
.dz-aviso:hover { border-color: #b48a42; }
.dz-aviso > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dz-aviso b { font-size: 13px; color: #f1e8d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-aviso small { font-size: 11.5px; color: var(--muted); }
.dz-x { position: absolute; top: 4px; right: 4px; background: none; border: 0; color: var(--muted); font-size: 12px; padding: 2px 5px; }
.dz-x:hover { color: #f1e8d2; }
.dz-mais { text-align: right; font-size: 11px; color: var(--muted); }
/* ---------- a config do Loot Pouch (js/loot-ui.js) ---------- */
.rg-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rg-chip { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; }
.rg-chip small { color: var(--muted); }
.rg-chip.mochila { border-color: #3c5e3c; background: #121a12; }
.rg-chip.po { border-color: #5e4a2a; background: #1a1610; }
.rg-minhas { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rg-minha { padding: 1px; background: none; border: 1px solid var(--border); border-radius: 3px; }
.rg-minha.on { border-color: var(--gold); }
.mloot .slot { position: relative; }
.rg-marca { position: absolute; right: 0; bottom: -2px; font-size: 10px; font-style: normal; color: var(--gold); }
.lc { display: flex; flex-direction: column; gap: 8px; min-width: min(460px, 80vw); }
.lc-linha { display: flex; align-items: center; gap: 6px; }
.lc-campos { grid-template-columns: 1fr 1.4fr; align-items: end; }
.lc-classe { padding-bottom: 6px; }
/* ---------- a taverna: Lírio, Brom e os buffs ativos (js/taverna-ui.js) ---------- */
.tv { display: flex; flex-direction: column; gap: 10px; }
.tv-fala { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 4px; background: #14110c; }
.tv-fala > div { flex: 1; }
.tv-fala b { font-family: "Cinzel", Georgia, serif; color: var(--gold); }
.tv-fala p { margin: 4px 0 6px; line-height: 1.45; }
.tv-amizade { display: flex; align-items: center; gap: 4px; }
.tv-amizade small { margin-left: 8px; color: var(--muted); }
.tv-chama { width: 16px; height: 20px; background: #3a3530; clip-path: path('M8 0C9 5 14 7 14 13A6 6 0 0 1 2 13C2 9 5 8 5 4C7 6 7 8 8 8C9 6 8 3 8 0Z'); }
.tv-chama.on { background: linear-gradient(#ffe08a, #ff8a1e 55%, #c2370c); filter: drop-shadow(0 0 3px rgba(255, 140, 30, .6)); }
.tv-chama.prox { background: #6a4a2a; animation: tv-prox 1.6s ease-in-out infinite; }
@keyframes tv-prox { 50% { background: #a56a2a; } }
.tv-ativo { padding: 6px 10px; border-left: 2px solid var(--good); background: #12170f; font-size: 13px; }
.tv-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tv-opcao { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 10px 12px; text-align: left; background: linear-gradient(#2b2e35, #1f2126); border: 1px solid #464a53; border-radius: 3px; color: inherit; }
.tv-opcao:hover:not(:disabled) { border-color: #8a6c33; }
.tv-opcao:disabled { opacity: .45; cursor: not-allowed; }
.tv-opcao b { font-family: "Cinzel", Georgia, serif; color: #ecd08e; }
.tv-opcao small { color: var(--muted); }
.tv-oferta { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: #121317; }
.tv-oferta > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tv-oferta b { font-family: "Cinzel", Georgia, serif; color: #ecd08e; }
.tv-oferta small { color: var(--muted); font-style: italic; }
.tv-nota { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.tv-pilula { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2f6ee8 50%, #9cc4ff 50%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 0 4px rgba(80, 140, 255, .5); transform: rotate(-35deg); vertical-align: middle; }
.tv-pilula.grande { width: 34px; height: 15px; border-radius: 8px; margin: 0 6px; }
.buffs-ativos { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 4px; z-index: 6; }
.ba { position: relative; width: 32px; height: 32px; display: grid; place-items: center; background: rgba(12, 14, 18, .85); border: 1px solid #3a3d45; border-radius: 3px; }
.ba > img { width: 26px; height: 26px; }
.ba-busto { width: 22px; height: 18px; overflow: hidden; }
.ba-barra { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; background: #000; }
.ba-barra > i { display: block; height: 100%; background: var(--gold); }
.ba-tip { display: none; position: absolute; right: calc(100% + 6px); top: 50%; translate: 0 -50%; white-space: nowrap; padding: 5px 9px; background: #0d0e11; border: 1px solid #3a3d45; border-radius: 3px; font-size: 12px; pointer-events: none; }
.ba-tip b { display: block; color: #f1e8d2; font-weight: 600; }
.ba-tip small { color: var(--muted); }
.ba:hover .ba-tip { display: block; }
/* ---------- o Forasteiro (js/forasteiro-ui.js) ---------- */
.fo { display: flex; flex-direction: column; gap: 10px; }
.fo-placar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.fo-placar .muted { margin-left: auto; font-size: 12px; }
.fo-pontos, .fo-pontos-ic { color: var(--gold); }
.fo-pontos-ic { display: inline-grid; place-items: center; width: 32px; font-size: 20px; }
.fo-abas { border-bottom: 1px solid var(--border); }
.fo-abas button { padding: 9px 12px 7px; font-size: 13px; }
.fo-corpo { display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.fo-perg.ganho, .fo-esp.ganho { opacity: .6; }
.fo-esps, .fo-trocas { display: grid; gap: 6px; }
.fo-esp, .fo-troca { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; }
.fo-esp.on { border-color: #8a6c33; }
.fo-esp-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fo-esp-txt b { color: #f1e8d2; }
.md-fora { margin: 6px 0 0; }
.fo-retrato { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.fo-retrato b { font-family: "Cinzel", Georgia, serif; font-size: 11px; letter-spacing: .08em; color: var(--gold); }
.fo-busto { display: block; background-repeat: no-repeat; image-rendering: pixelated; border-bottom: 1px solid var(--border); }
.fo-cris { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.fo-cri { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 2px 6px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: #14110c; }
.fo-cri.boss { border-color: #8a2a22; }
.fo-cri > .spr { grid-row: span 3; }
.fo-pergs { display: grid; gap: 6px; }
.fo-perg { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }
.fo-perg > div { flex: 1; }
.fo-perg.on { border-color: var(--gold, #c9a227); }
/* ---------- a Mira e os addons (js/mira-ui.js) ---------- */
.mira-fala { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #14110c; }
.mira-fala p { margin: 0; }
.mira-filtros { display: flex; gap: 10px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.mira-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.mira-card { padding: 8px; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.mira-card.sem { opacity: .7; }
.mira-cab { display: flex; align-items: center; gap: 8px; }
.mira-cab small { margin-left: auto; }
.mira-add { padding: 6px; border-radius: 6px; background: #17140f; }
.mira-add.feito { border: 1px solid #3c6b3c; }
.mira-add.off { opacity: .6; }
.mira-itens { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.mira-it { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid #5a2a2a; border-radius: 4px; }
.mira-it.ok { border-color: #3c6b3c; }
.mira-it small { font-size: 11px; }

/* ---------- novo boneco: nome e sexo (js/ui.js) ---------- */
.nb { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0; }
.nb label { display: flex; align-items: center; gap: 6px; }
.nb input#nb-nome { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: #14110c; color: inherit; }
.nb > div { display: flex; gap: 14px; }
/* o título do Loot Pouch com Vender, ⚒ e ⚙ numa linha só (13/10/2026) */
#p-lootpouch .ptitle { justify-content: flex-start; gap: 3px; white-space: nowrap; letter-spacing: .02em; padding-right: 8px; }
#p-lootpouch .ptitle .lp-cap { margin-left: auto; margin-right: 2px; }
#p-lootpouch .ptitle .btn.small { padding: 2px 6px; }