@import url('./src/ui/bug-report.css');
/* Client 1200x800. Mundo visual unico e escuro: e uma tela de jogo, nao um
   documento, entao nao ha tema claro. Tudo pintado explicitamente.

   A faixa de combate continua sendo o mundo de 540x196 do servidor: aqui ela
   so e desenhada em 1,5x (810x294). Distancia, velocidade e alcance nao mudam
   com o tamanho da tela; o resto do espaco vai para os paineis. */
:root {
  --ink: #100d14;
  --ink2: #0b090e;
  --painel: #1a161f;
  --painel2: #221d28;
  --alto: #2b2432;
  --linha: #342b3c;
  --linha2: #453a4e;
  --txt: #ece2ea;
  --dim: #9b8b9c;
  --dimmer: #6d6172;
  --rose: #d1466f;
  --gold: #e3a44b;
  --steel: #6f9bd1;
  --moss: #7bb06a;
  --f-pix: "Silkscreen", "Courier New", monospace;
  --f-ui: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

[hidden] { display: none !important; }
.expedition-controls { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#1b2027; border-bottom:1px solid #35434b; flex:none; }
.expedition-controls label { font-size:10px; color:#b9c4c6; display:flex; align-items:center; gap:3px; }
#go-hunt { background:#365e50; border-color:#638e74; color:#f0f4df; min-width:88px; font-weight:600; }
#extract { background:#634b36; border-color:#a38759; }
#hunt-progress { margin-left:auto; font:9px var(--f-mono); color:#d6b984; }
.hideout-panel { flex:1; min-height:0; padding:10px 12px; overflow:auto; background:linear-gradient(#20242b,#17171e); }
.home-heading { display:flex; justify-content:space-between; font:10px var(--f-pix); color:#d0bb91; }
.home-heading span { color:#a9bcb6; font:10px var(--f-mono); }
.home-result { color:#bfc5c5; font-size:11px; margin:7px 0; min-height:16px; }
.home-actions { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.home-actions span,.chest-tip { font-size:10px; color:#9daaa9; }
.chest-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; max-width:600px; }
.chest-grid .slot { width:100%; height:38px; display:grid; place-items:center; padding:0; border-radius:3px; }
.chest-grid canvas { image-rendering:pixelated; width:32px; height:32px; }
.chest-grid .slot:disabled { cursor:default; opacity:.45; }
.furniture-controls { display:flex; gap:9px; align-items:center; border-top:1px solid #3b4147; padding-top:7px; font-size:10px; color:#b5b5aa; }
.furniture-controls label { display:flex; align-items:center; gap:4px; }
.furniture-controls select { color:#ddd8c5; background:#282c33; border:1px solid #51534d; border-radius:3px; }
.save-status { padding:3px 10px; min-height:21px; flex:none; font:10px var(--f-mono); background:#141a1d; color:#91ad9e; border-top:1px solid #303a3d; }
.save-status.save-error { color:#ffc094; }
button:disabled { cursor:not-allowed; opacity:.5; }

* { box-sizing: border-box; }

/* Regras que declaram display (flex/grid) vencem o display:none que o atributo
   hidden traz do UA, e o painel escondido volta a aparecer. Isto fecha a porta
   para todos eles de uma vez. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #08070a radial-gradient(120% 90% at 50% 0%, #1d1724 0%, #0d0a11 60%, #08070a 100%);
  color: var(--txt);
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.45;
}

.client {
  position: relative;   /* ancora a tela de mercado, que cobre o client inteiro */
  width: 1200px;
  height: 800px;
  /* Tela menor que 1200x800 encolhe o client inteiro, sem cortar nada. `zoom`
     e nao `transform`: com zoom o layout e remedido, entao o canvas da faixa
     volta a ser criado no tamanho certo e continua nitido. */
  zoom: var(--zoom, 1);
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--linha);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px #000;
}

/* ---------- barra superior ---------- */
.client-brandbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:5px 12px;
  min-height:32px; flex:none; background:linear-gradient(90deg,#11141b,#211c22); border-bottom:1px solid #a4854d35; }
.client-brand { display:flex; align-items:center; gap:10px; color:#dbc08f; font:600 15px/1.1 Georgia,serif; letter-spacing:.09em; }
.client-logo { display:block; width:70px; height:38px; object-fit:contain; border-radius:3px; }
.server-status { display:flex; align-items:center; gap:7px; color:#b7c7bb; font:10px/1.4 var(--f-mono); white-space:nowrap; }
.server-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#b39760; flex:none; }
.server-status[data-state="online"]::before { background:#83ba86; box-shadow:0 0 5px #83ba8640; }
.server-status[data-state="offline"] { color:#bba49a; }.server-status[data-state="offline"]::before { background:#bd8570; }
.barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #241d2b, #191320);
  border-bottom: 1px solid var(--linha);
  font-family: var(--f-pix);
  font-size: 10px;
  letter-spacing: .06em;
  flex: none;
}
.marca { color: var(--rose); }
.barra .sep { flex: 1; }
.hud { color: var(--dim); }
.hud b { color: var(--txt); font-variant-numeric: tabular-nums; }
.hud.gold b { color: var(--gold); }

button {
  font-family: var(--f-ui);
  font-size: 11px;
  color: var(--txt);
  background: var(--painel2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 4px 9px;
  cursor: pointer;
  transition: background .13s, border-color .13s;
}
button:hover { background: var(--alto); border-color: var(--linha2); }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 1px;
}
button[aria-pressed="true"] { background: #8f3550; border-color: var(--rose); color: #fff; }
.btn-mini { font-family: var(--f-pix); font-size: 9px; letter-spacing: .06em; padding: 4px 8px; }

/* ---------- corpo ---------- */
.corpo { flex: 1; display: flex; min-height: 0; }
.coluna-jogo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.coluna-lado {
  width: 380px;
  flex: none;
  border-left: 1px solid var(--linha);
  background: var(--painel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- faixa de combate ---------- */
.map-toolbar {
  display: flex; align-items: center; gap: 10px; min-height: 35px;
  padding: 5px 10px; background: #17171f; border-bottom: 1px solid var(--linha); flex: none;
}
.map-toolbar label { font: 8px var(--f-pix); letter-spacing: .09em; color: var(--dim); }
.map-toolbar select {
  min-width: 0; max-width: 280px; color: var(--txt); background: #252530;
  border: 1px solid #41434e; border-radius: 4px; padding: 3px 6px; font: 11px var(--f-ui);
}
.map-toolbar [role="status"] { margin-left: auto; font: 10px var(--f-mono); color: var(--dim); }
/* Faixa da run: o mundo do servidor tem 196 de altura (ALTURA_FAIXA) e e
   desenhado em 1,5x, entao 294 aqui. Mudar este numero muda so o tamanho do
   desenho: quem manda nas distancias continua sendo o servidor. */
.faixa-wrap { position: relative; height: 294px; flex: none; background: #0b080d; }
#faixa { display: block; width: 100%; height: 294px; image-rendering: pixelated; }

/* HUD de skills: ataque basico + skill nivel 1 + skill nivel 10 */
.skill-bar {
  position: absolute; right: 10px; bottom: 8px; display: flex; gap: 6px; pointer-events: auto;
  padding: 5px; background: linear-gradient(#25252bef,#0e1117ef); border: 1px solid #8e78564d;
  border-radius: 5px; box-shadow: 0 3px 12px #0009,inset 0 1px #cfb58022;
}
.sk-slot {
  position: relative; width: 40px; height: 40px; padding: 0; overflow: hidden; cursor: help;
  background: #0d0a12cc; border: 1px solid #a48c665e; border-radius: 3px; --p: 0; --cor: #e3a44b;
  box-shadow: inset 0 0 0 1px #00000080;
}
.sk-slot canvas { position: absolute; inset: 2px; width: 36px; height: 36px; }
.sk-slot:hover,.sk-slot:focus-visible { outline: 1px solid #ddc797; outline-offset: 2px; }
.sk-slot::after {   /* recarga girando no sentido do relogio */
  content: ''; position: absolute; inset: 0;
  background: conic-gradient(#000000b8 calc(var(--p) * 1turn), transparent 0);
}
.sk-slot.pronta { border-color: var(--cor); box-shadow: 0 0 6px color-mix(in srgb, var(--cor) 55%, transparent), inset 0 0 0 1px #00000080; }
.sk-slot.usou { animation: sk-pulso .35s ease-out; }
@keyframes sk-pulso { from { box-shadow: 0 0 14px var(--cor); } to { box-shadow: none; } }
.sk-t {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font: 700 9px var(--f-pix); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
.sk-slot.bloqueada canvas { filter: grayscale(1) brightness(.45); }
.sk-slot.bloqueada .sk-t { font-size: 7px; color: #d8c9a6; }
.sk-slot.bloqueada::after { background: #00000066; }
.sk-slot .sk-tecla {
  position: absolute; left: 2px; top: 1px; z-index: 1; font: 6px var(--f-pix); color: #ffffffb0; text-shadow: 0 1px 0 #000;
}
.skill-details { position: fixed; z-index: 10000; box-sizing: border-box; width: min(340px,calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow: auto; padding: 16px; color: #ddddd7;
  background: linear-gradient(145deg,#24242bf7,#0d1118fa); border: 1px solid #9e8057;
  box-shadow: 0 12px 40px #000b,inset 0 0 0 3px #080a1055; border-radius: 3px; font: 13px/1.6 var(--f-mono); }
.skill-details header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #b69b6238; }
.skill-details header canvas { width: 52px; height: 52px; flex: none; }
.skill-details h3 { margin: 2px 0; color: var(--skill-color); font: 600 19px/1.2 Georgia,serif; text-shadow: 0 2px #000; }
.skill-details small { color: #ac9e88; font: 10px/1.3 var(--f-mono); }
.skill-details-close { margin-left: auto; align-self: flex-start; background: transparent; border: 0; color: #cab997; font-size: 23px; cursor: pointer; }
.skill-details dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 14px 0; }
.skill-details dt { color: #b5afa2; }.skill-details dd { margin: 0; color: #ecdbb7; }
.skill-details-description { margin: 0; padding: 12px 0; border-top: 1px solid #b69b6226; color: #d2d4d1; }
.skill-details footer { color: #8fbc96; font-size: 11px; border-top: 1px solid #b69b6226; padding-top: 10px; }
.skill-details footer.locked { color: #d4ad75; }
@media (prefers-reduced-motion: reduce) { .sk-slot.usou { animation: none; } }
.faixa-hud {
  position: absolute; left: 10px; bottom: 8px; width: 230px;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
.barra-vida, .barra-xp {
  position: relative; height: 12px;
  background: #00000099; border: 1px solid #ffffff1f;
}
.barra-xp { height: 5px; }
.barra-vida i, .barra-xp i {
  position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 0;
  transition: width .12s linear;
}
.barra-vida i { background: linear-gradient(90deg, #8f3550, #f0708f); }
.barra-xp i { background: linear-gradient(90deg, #3f6ea3, var(--steel)); }
/* mana dos conjuradores, logo abaixo da vida */
.barra-mana { position: relative; height: 8px; background: #00000099; border: 1px solid #ffffff1f; }
.barra-mana i { position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 0; transition: width .12s linear; background: linear-gradient(90deg, #2d4f9e, #6fb6ff); }
.barra-mana span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-pix); font-size: 7px; color: #e3f0ff; text-shadow: 0 1px 0 #000; }
.sk-slot.sem-mana { filter: grayscale(.85) brightness(.7); }
.barra-vida span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-pix); font-size: 9px; color: #ffe7ef; text-shadow: 0 1px 0 #000;
}

/* ---------- abas e paineis ---------- */
.abas { display: flex; gap: 1px; background: var(--linha); flex: none; }
.aba {
  flex: 1; border: 0; border-radius: 0; background: var(--painel);
  font-family: var(--f-pix); font-size: 9px; letter-spacing: .07em;
  color: var(--dimmer); padding: 6px 4px;
}
.aba[aria-selected="true"] { background: var(--painel2); color: var(--txt); box-shadow: inset 0 -2px 0 var(--rose); }
.pane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.pane-lado { padding: 12px 16px; }
.painel-analyser { flex: 1; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--linha); }

.sub-titulo {
  display: block; font-family: var(--f-pix); font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dimmer); margin: 10px 0 5px;
}

/* ---------- hunt analyser ---------- */
.an-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.an-rot { font-family: var(--f-pix); font-size: 8px; letter-spacing: .08em; color: var(--dimmer); text-transform: uppercase; }
.an-tempo { display: block; font-family: var(--f-mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.an-grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: 5px;
  overflow: hidden; margin: 9px 0;
}
.an-cel { background: var(--painel2); padding: 5px 7px; }
.an-cel b { display: block; font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.an-taxa { font-family: var(--f-mono); font-size: 9.5px; color: var(--dimmer); }
.an-spark { margin-bottom: 4px; }
.an-spark canvas { display: block; width: 100%; border: 1px solid var(--linha); border-radius: 4px; }
.an-tabelas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-tab { border: 1px solid var(--linha); border-radius: 5px; overflow: hidden; }
.an-linha {
  display: flex; justify-content: space-between; gap: 6px;
  padding: 3px 7px; font-family: var(--f-mono); font-size: 11px;
  background: var(--painel2); border-bottom: 1px solid var(--linha);
}
.an-linha:last-child { border-bottom: 0; }
.an-linha b { font-variant-numeric: tabular-nums; }
.an-vazio { padding: 6px 7px; font-size: 11px; color: var(--dimmer); background: var(--painel2); }

/* ---------- log ---------- */
.log { font-family: var(--f-mono); font-size: 11px; display: flex; flex-direction: column; gap: 1px; }
.log div { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim { color: var(--dimmer); }
.ok { color: var(--moss); }
.bad { color: var(--rose); }
.gold { color: var(--gold); }
.steel { color: var(--steel); }

/* ---------- inventario ---------- */
.inv-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--f-pix); font-size: 9px; letter-spacing: .07em;
  color: var(--dimmer); text-transform: uppercase;
}
.inv-head b { font-family: var(--f-mono); font-size: 15px; color: var(--gold); letter-spacing: 0; }
.inv-mini { width: 100%; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0; text-transform: none; }

.paperdoll {
  display: grid; grid-template-columns: repeat(3, 46px); gap: 8px;
  justify-content: center; margin: 12px 0 4px;
}
.backpack { display: grid; gap: 6px; justify-content: center; }

.slot {
  position: relative; padding: 0; border-radius: 4px;
  background: #0f0c13; border: 1px solid var(--linha);
  display: grid; place-items: center; overflow: hidden;
}
.slot canvas { display: block; image-rendering: pixelated; }
.slot:hover { border-color: var(--linha2); background: #171220; }
.slot.cheio { border-color: var(--rar); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 40%, transparent) inset; }

/* ---------- tooltip ---------- */
.tooltip {
  position: fixed; z-index: 999; max-width: 230px; pointer-events: none;
  background: #14101a; border: 1px solid var(--linha2); border-radius: 5px;
  padding: 7px 9px; box-shadow: 0 10px 26px -12px #000;
  display: flex; flex-direction: column; gap: 2px;
}
.tt-nome { font-family: var(--f-pix); font-size: 10px; letter-spacing: .04em; }
.tt-sub { font-size: 10px; color: var(--dimmer); }
.tt-classe { display: block; font-size: 10px; color: var(--dim); }
.tt-classe.tt-outra { color: #e0626f; }
/* requisitos de Forca/Agilidade: verde o que ja tem, vermelho o que falta */
.tt-unico { display: block; margin-top: 2px; color: #9fd8ff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 6px rgba(111, 182, 255, .55); }
.af.af-unico i, .af.af-unico b { color: #9fd8ff; }
.tt-req { display: block; font-size: 10px; color: var(--dim); margin-top: 2px; }
.tt-req b { font-weight: 600; }
.tt-req b.ok { color: #8fcf7c; }
.tt-req b.falta { color: #ff6b6b; }
.tt-req-falta { display: block; font-size: 10px; color: #ff8a8a; font-style: italic; }
/* equipado sem requisito: fica no corpo mas inerte, como no MU */
.slot.inativo { border-color: #d63a3a !important; box-shadow: inset 0 0 0 1px #d63a3a, 0 0 6px #d63a3a88; }
.slot.inativo canvas { filter: saturate(.4) brightness(.8) sepia(.4) hue-rotate(-30deg); }
/* na mochila, o que o heroi ainda nao consegue usar */
.slot.sem-req::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 0 70%, #d63a3acc 70% 100%);
}
.tt-afixos { display: flex; flex-direction: column; gap: 1px; margin: 4px 0; }
.tt-afixos .af { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; }
.tt-afixos i { font-style: normal; color: var(--dim); }
.tt-afixos b { color: var(--moss); font-weight: 600; }
.tt-val { font-family: var(--f-mono); font-size: 10px; color: var(--dimmer); }
.tt-dica { font-size: 9.5px; color: var(--dimmer); font-style: italic; margin-top: 3px; }

/* ---------- customizacao ---------- */
.cz-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cz-classes.cz-classe-fixa { display: block; font-size: 10px; color: var(--dim); line-height: 1.4; }

/* ---- selecao de personagem (estilo MU) ---- */
.selecao {
  position: absolute; inset: 0; z-index: 40; display: none;
  background:
    radial-gradient(60% 45% at 50% 62%, #3a2a1a55 0%, transparent 70%),
    radial-gradient(130% 90% at 50% 10%, #1f1a2b 0%, #0b0910 62%, #050408 100%);
}
.client.selecao-aberta .selecao { display: block; }
.cs-tela { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 22px 16px 18px; gap: 10px; }
.cs-cab { text-align: center; }
.cs-marca { display: block; font: 9px var(--f-pix); letter-spacing: .3em; color: #8d7a5a; }
.cs-titulo {
  margin: 4px 0 0; font: 700 17px var(--f-pix); letter-spacing: .12em; text-transform: uppercase;
  color: #f0cd84; text-shadow: 0 0 12px #e3a44b55, 0 2px 0 #3a2410;
}
.cs-fila { display: flex; gap: 12px; margin-top: 18px; }
.cs-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 140px; padding: 4px 2px 8px; background: transparent;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--txt);
}
.cs-slot canvas { display: block; image-rendering: pixelated; }
.cs-slot:hover { border-color: #4a3d2c; background: #ffffff05; }
.cs-slot[aria-pressed="true"] { border-color: #b98a3f; background: linear-gradient(180deg, #e3a44b10, #e3a44b04); box-shadow: 0 0 18px #e3a44b22; }
.cs-nome { font: 700 11px var(--f-pix); letter-spacing: .04em; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sub { font-size: 10px; color: var(--dim); }
.cs-vazio .cs-nome { color: #5b506a; }
.cs-vazio .cs-sub { color: #4a4152; }
.cs-info {
  min-height: 58px; width: 520px; text-align: center; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border-top: 1px solid #3a2f24; border-bottom: 1px solid #3a2f24;
  background: linear-gradient(90deg, transparent, #1a141c 20%, #1a141c 80%, transparent);
}
.cs-info-nome { font: 700 13px var(--f-pix); }
.cs-info-sub { font-size: 11px; color: #d0bb91; }
.cs-info-desc { font-size: 10.5px; color: var(--dim); }
.cs-erro { min-height: 14px; font-size: 11px; color: #ff8f8f; text-align: center; }
.cs-acoes { display: flex; gap: 10px; margin-top: auto; }
.cs-bt {
  min-width: 150px; padding: 8px 14px; cursor: pointer;
  font: 700 11px var(--f-pix); letter-spacing: .08em; text-transform: uppercase; color: #e8d6ae;
  background: linear-gradient(180deg, #2c2418, #1a140d); border: 1px solid #6b5230; border-radius: 3px;
  box-shadow: inset 0 1px 0 #ffffff14, 0 2px 0 #00000080;
}
.cs-bt:hover:not(:disabled) { border-color: #c79a4d; color: #fff1cf; }
.cs-bt:disabled { opacity: .45; cursor: default; }
.cs-bt-principal { background: linear-gradient(180deg, #5a3a16, #2e1c0a); border-color: #c79a4d; color: #ffe2a3; }
.cs-bt-fraco { min-width: 0; color: #9b8b9c; border-color: #3b3240; background: #120f16; }
/* apagar personagem: acao destrutiva, em vermelho */
.cs-bt-perigo { min-width: 0; color: #ffb3b3; border-color: #7a3030; background: linear-gradient(180deg, #3a1414, #1e0a0a); }
.cs-bt-perigo:hover:not(:disabled) { border-color: #d1466f; color: #ffe3e3; }
.cs-apagar-janela { width: 400px; }
.cs-criar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #050408cc; }
.cs-criar[hidden] { display: none; }
.cs-criar-janela {
  max-height: calc(100% - 24px); overflow-y: auto;
  width: 470px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #211a26, #120e16); border: 1px solid #6b5230; border-radius: 6px;
  box-shadow: 0 12px 40px #000c;
}
.cs-criar-janela .cs-titulo { font-size: 13px; text-align: center; }
.cs-campo { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: var(--dim); }
.cs-campo input {
  font: 13px var(--f-ui); color: var(--txt); padding: 7px 9px;
  background: #0d0a10; border: 1px solid var(--linha2); border-radius: 4px;
}
.cs-campo input:focus { outline: 1px solid #c79a4d; border-color: #c79a4d; }
.cs-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-classe {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; cursor: pointer;
  background: #0f0c13; border: 1px solid var(--linha2); border-radius: 5px; color: var(--txt); --acc: var(--gold);
}
.cs-classe canvas { image-rendering: pixelated; }
.cs-classe b { font: 700 11px var(--f-pix); color: var(--acc); }
.cs-classe span { font-size: 9.5px; color: var(--dim); }
.cs-classe[aria-pressed="true"] {
  border-color: var(--acc); color: var(--txt);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, #0f0c13), #0f0c13);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 35%, transparent);
}
.cs-desc { margin: 0; min-height: 30px; font-size: 10.5px; color: var(--dim); text-align: center; }
.cs-criar-janela .cs-acoes { margin-top: 0; justify-content: center; }
.cz-classe { text-align: left; padding: 6px 8px; --acc: var(--rose); }
.cz-classe b { display: block; font-family: var(--f-pix); font-size: 10px; color: var(--acc); }
.cz-classe span { font-size: 9.5px; color: var(--dimmer); }
.cz-classe[aria-pressed="true"] { background: var(--painel2); border-color: var(--acc); color: var(--txt); }

.cz-preview { display: flex; gap: 8px; align-items: flex-start; margin: 9px 0; }
.cz-preview canvas { image-rendering: pixelated; border: 1px solid var(--linha); border-radius: 5px; flex: none; }
.cz-info { display: flex; flex-direction: column; gap: 3px; font-size: 10px; min-width: 0; }
.cz-info b { font-family: var(--f-pix); font-size: 10px; }

.cz-campos { display: flex; flex-direction: column; gap: 6px; }
.cz-campo { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--dim); }
.cz-campo > span { display: flex; justify-content: space-between; gap: 6px; }
.cz-campo output { color: var(--rose); font-family: var(--f-mono); font-size: 10px; }
.cz-campo select { width: 100%; padding: 3px 6px; font-size: 11px; background: var(--painel2); color: var(--txt); border: 1px solid var(--linha); border-radius: 4px; }
.cz-bool { flex-direction: row; align-items: center; justify-content: space-between; }
input[type="range"] { width: 100%; accent-color: var(--rose); cursor: pointer; }
input[type="checkbox"] { accent-color: var(--rose); cursor: pointer; }


/* scrollbars discretas, para nao roubarem largura do painel de 258px */
.pane::-webkit-scrollbar { width: 7px; }
.pane::-webkit-scrollbar-thumb { background: var(--linha2); border-radius: 4px; }
.pane::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } }

/* ---------- tela de mercado ---------- */
.mercado {
  position: absolute; inset: 0; z-index: 20;
  display: none; flex-direction: column;
  background: #100d14 radial-gradient(120% 80% at 50% 0%, #211a28 0%, #100d14 60%);
}
.client.mercado-aberto .mercado { display: flex; }

.mk-topo {
  display: flex; align-items: stretch; gap: 8px;
  border-bottom: 1px solid var(--linha); background: var(--painel); flex: none;
}
.mk-abas { flex: 1; background: transparent; gap: 0; }
.mk-abas .aba { background: transparent; padding: 8px 14px; flex: 0 0 auto; }
.mk-abas .aba b { color: var(--gold); font-family: var(--f-mono); }
.mk-ouro {
  display: flex; align-items: center; gap: 5px; padding: 0 6px;
  font-family: var(--f-pix); font-size: 9px; letter-spacing: .06em; color: var(--dimmer);
}
.mk-ouro b { font-family: var(--f-mono); font-size: 13px; color: var(--gold); }
#mk-fechar { align-self: center; margin-right: 8px; }

.mk-corpo { flex: 1; min-height: 0; display: flex; }
.mk-pane { flex: 1; min-height: 0; display: flex; }
#mk-anuncios { flex-direction: column; }

/* aba vender: mochila a esquerda, decisao a direita */
.mk-col-bag {
  width: 330px; flex: none; padding: 9px 10px;
  border-right: 1px solid var(--linha); display: flex; flex-direction: column; gap: 7px;
  overflow-y: auto;
}
.mk-bag { grid-template-columns: repeat(8, 34px); }
.slot.sel { border-color: var(--gold); box-shadow: 0 0 0 2px #e3a44b55 inset; }
.btn-largo { width: 100%; padding: 6px; font-size: 11.5px; }
.btn-largo b { color: var(--gold); font-family: var(--f-mono); }
.mk-resumo { border: 1px solid var(--linha); border-radius: 5px; overflow: hidden; margin-top: auto; }

.mk-col-det { flex: 1; min-width: 0; padding: 10px 12px; overflow-y: auto; }
.mk-vazio-det { color: var(--dim); font-size: 12px; max-width: 40ch; }
.mk-vazio-det p { margin: 0 0 8px; }

.mk-item-cab { display: flex; gap: 9px; align-items: center; }
.mk-item-cab canvas { image-rendering: pixelated; border: 1px solid var(--linha); border-radius: 4px; }
.mk-item-cab b { display: block; font-family: var(--f-pix); font-size: 11px; }
.mk-item-cab span { font-size: 10.5px; }
.mk-afixos { display: flex; flex-direction: column; gap: 1px; margin: 8px 0; }
.mk-afixos span { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; max-width: 250px; }
.mk-afixos i { font-style: normal; color: var(--dim); }
.mk-afixos b { color: var(--moss); }
.mk-ref { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.mk-ref b { font-family: var(--f-mono); font-size: 14px; }

.mk-opcao {
  border: 1px solid var(--linha); border-radius: 6px; padding: 8px 9px;
  margin-bottom: 9px; background: var(--painel); display: flex; flex-direction: column; gap: 6px;
}
.mk-op-tit { font-family: var(--f-pix); font-size: 9px; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.mk-opcao p { margin: 0; font-size: 11px; }
.mk-preco { display: flex; gap: 6px; }
.mk-preco input {
  flex: 1; min-width: 0; padding: 5px 8px; font-family: var(--f-mono); font-size: 13px;
  background: #0f0c13; color: var(--txt); border: 1px solid var(--linha); border-radius: 4px;
}
.mk-linha-calc { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: 11px; }
.mk-linha-calc b { color: var(--txt); }
.mk-ganho { font-family: var(--f-mono); font-size: 11.5px; }
.mk-ganho.bom { color: var(--moss); }
.mk-ganho.ruim { color: var(--rose); }
.mk-erro { font-size: 11px; color: var(--rose); min-height: 14px; }

/* listas de oferta */
.mk-filtros { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--linha); flex: none; }
.mk-filtros input, .mk-filtros select {
  padding: 4px 7px; font-size: 11px; background: var(--painel2); color: var(--txt);
  border: 1px solid var(--linha); border-radius: 4px; min-width: 0;
}
.mk-filtros input { flex: 1; max-width: 420px; }
.mk-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.mk-of {
  display: grid; grid-template-columns: 30px 1fr 1.1fr auto auto;
  gap: 9px; align-items: center;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 5px; padding: 5px 8px;
}
.mk-of:hover { border-color: var(--linha2); background: var(--painel2); }
.mk-of-ic { image-rendering: pixelated; border-radius: 3px; }
.mk-of-nome { min-width: 0; }
.mk-of-nome b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-of-nome span { font-size: 10px; }
.mk-of-af { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.mk-of-af span {
  font-family: var(--f-mono); font-size: 9.5px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-of-preco { text-align: right; }
.mk-of-preco b { display: block; font-family: var(--f-mono); font-size: 13px; color: var(--gold); }
.mk-of-preco span { font-size: 9.5px; }
.mk-of button[disabled] { opacity: .45; cursor: default; }
.mk-loja { grid-template-columns: 44px 1fr 1fr auto; }
.mk-loja-lotes { display: flex; gap: 4px; }
.mk-loja-lotes .btn-mini { font-variant-numeric: tabular-nums; }
.mk-loja-nota { font-size: 10px; margin: 6px 2px 0; }

.mk-lista::-webkit-scrollbar, .mk-col-bag::-webkit-scrollbar, .mk-col-det::-webkit-scrollbar { width: 7px; }
.mk-lista::-webkit-scrollbar-thumb, .mk-col-bag::-webkit-scrollbar-thumb, .mk-col-det::-webkit-scrollbar-thumb {
  background: var(--linha2); border-radius: 4px;
}

/* ---------- tela de conta ---------- */
.auth {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: #08070a radial-gradient(120% 90% at 50% 0%, #1d1724 0%, #0d0a11 60%, #08070a 100%);
  padding: 20px; overflow-y: auto;
}
.au-card {
  width: 360px; max-width: 100%;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 9px;
  padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 24px 60px -28px #000;
}
.au-cab { display: flex; flex-direction: column; gap: 2px; }
.au-marca { font-family: var(--f-pix); font-size: 12px; color: var(--rose); letter-spacing: .07em; }
.au-sub { font-size: 11px; color: var(--dimmer); }
.au-abas { border-radius: 5px; overflow: hidden; }

.au-form { display: flex; flex-direction: column; gap: 9px; }
.au-campo { display: flex; flex-direction: column; gap: 3px; }
.au-campo > span { font-family: var(--f-pix); font-size: 8px; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.au-campo input {
  padding: 7px 9px; font-family: var(--f-ui); font-size: 13px;
  background: #0f0c13; color: var(--txt); border: 1px solid var(--linha); border-radius: 5px;
}
.au-campo input[aria-invalid="true"] { border-color: var(--rose); }
.au-erro { font-style: normal; font-size: 10.5px; color: var(--rose); min-height: 13px; }
.au-erro-geral { text-align: center; }

.au-forca { display: flex; align-items: center; gap: 7px; }
.au-barra { flex: 1; height: 4px; background: #0f0c13; border: 1px solid var(--linha); border-radius: 3px; overflow: hidden; }
.au-barra i { display: block; height: 100%; width: 0; transition: width .15s, background .15s; }
.au-forca span { font-family: var(--f-mono); font-size: 10px; min-width: 68px; }

.au-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); cursor: pointer; }
.au-enviar {
  padding: 8px; font-family: var(--f-pix); font-size: 10px; letter-spacing: .07em;
  background: #8f3550; border-color: var(--rose); color: #fff;
}
.au-enviar:disabled { opacity: .6; cursor: default; }

.au-contas { display: flex; flex-direction: column; gap: 5px; }
.au-rot { font-family: var(--f-pix); font-size: 8px; letter-spacing: .08em; color: var(--dimmer); text-transform: uppercase; }
.au-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.au-chip { font-size: 11px; padding: 3px 8px; }
.au-convidado { font-size: 11.5px; background: transparent; border-style: dashed; }
.au-aviso {
  margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--dimmer);
  border-top: 1px solid var(--linha); padding-top: 9px;
}
.au-aviso b { color: var(--gold); }

/* conta na barra superior */
.hud-conta { display: flex; align-items: center; gap: 6px; }
.hud-conta b { color: var(--moss); }

/* seletor de classe no cadastro */
.au-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.au-classe { --acc: var(--rose); padding: 5px 4px; text-align: center; }
.au-classe b { display: block; font-family: var(--f-pix); font-size: 8.5px; color: var(--acc); }
.au-classe span { font-size: 8.5px; color: var(--dimmer); line-height: 1.2; }
.au-classe[aria-pressed="true"] { background: var(--painel2); border-color: var(--acc); }

/* ---------- painel de atributos (estilo MU) ---------- */
.atributos {
  position: absolute; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center; background: #06050899;
}
.client.atributos-aberto .atributos { display: flex; }
.at-janela {
  width: 268px; max-height: 96%; overflow-y: auto;
  background: linear-gradient(180deg, #241d2b, #15111c);
  border: 1px solid #4b3d4f; border-radius: 6px;
  box-shadow: 0 18px 44px -18px #000, inset 0 0 0 1px #ffffff0d;
  padding: 8px; display: flex; flex-direction: column; gap: 7px;
}
.at-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.at-nome { font-family: var(--f-pix); font-size: 10px; color: var(--txt); letter-spacing: .05em; }
.at-cabecalho { display: flex; flex-direction: column; gap: 4px; }
.at-linha-topo { display: flex; gap: 6px; align-items: stretch; }
.at-campo {
  flex: 1; padding: 4px 8px; border-radius: 3px;
  background: linear-gradient(180deg, #0d0a12, #16111d);
  border: 1px solid #3f3448; box-shadow: inset 0 1px 0 #ffffff0a;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--dim);
}
.at-campo i { font-style: normal; }
.at-campo b { color: var(--txt); font-variant-numeric: tabular-nums; }
.at-pontos {
  padding: 4px 8px; border-radius: 3px; background: #1b3a5c; border: 1px solid #2f6796;
  font-family: var(--f-mono); font-size: 11.5px; color: #9fc6ea;
}
.at-pontos b { color: #dcefff; }
.at-exp { font-family: var(--f-mono); font-size: 10px; color: var(--steel); }

.at-lista { display: flex; flex-direction: column; gap: 6px; }
.at-bloco { --acc: var(--rose); display: flex; flex-direction: column; gap: 3px; }
.at-linha { display: flex; gap: 6px; align-items: stretch; }
.at-linha .at-campo { border-left: 2px solid var(--acc); }
.at-mais {
  width: 26px; flex: none; padding: 0; border-radius: 3px;
  background: linear-gradient(180deg, #c0392f, #7d1f18);
  border: 1px solid #d9584a; color: #fff;
  font-family: var(--f-pix); font-size: 13px; line-height: 1;
  box-shadow: inset 0 1px 0 #ffffff33;
}
.at-mais:hover:not(:disabled) { background: linear-gradient(180deg, #d9544a, #8f2820); }
.at-mais:disabled { opacity: .35; cursor: default; }
.at-derivadas { display: flex; flex-direction: column; padding-left: 2px; }
.at-derivadas span { font-family: var(--f-mono); font-size: 10px; color: var(--dim); }
#bt-attr b { color: var(--gold); font-family: var(--f-mono); }
#bt-attr.tem-ponto { border-color: var(--gold); box-shadow: 0 0 0 1px #e3a44b55 inset; }

/* ---------- Potions UI ---------- */
.potions-ui {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 10px;
  max-width: 340px;
}

.potions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha);
}

.potions-header h3 {
  font-family: var(--f-pix);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt);
  margin: 0;
}

.potions-total {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
}

.potions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.potion-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.potion-btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--painel2);
  border: 2px solid var(--linha);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}

.potion-btn:not(:disabled):hover {
  background: var(--alto);
  border-color: var(--linha2);
  transform: translateY(-2px);
}

.potion-btn:active {
  transform: translateY(0);
}

.potion-btn.empty {
  opacity: 0.6;
  cursor: not-allowed;
}

.potion-btn canvas {
  display: block;
  image-rendering: pixelated;
}

.potion-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #000000cc;
  color: #fff;
  font-family: var(--f-pix);
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  min-width: 16px;
  text-align: center;
}

.potion-name {
  font-family: var(--f-ui);
  font-size: 9px;
  text-align: center;
  line-height: 1.2;
}

.potion-cooldown {
  background: var(--painel2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 6px 8px;
  margin-bottom: 12px;
}

.potion-cd-bar {
  height: 6px;
  background: #000000aa;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.potion-cd-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rose), #ff6a8a);
  transition: width .1s linear;
}

#pot-cd-text {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--dim);
  display: block;
  text-align: center;
}

.potions-config {
  background: var(--painel2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 10px;
}

.potions-config h4 {
  font-family: var(--f-pix);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt);
  margin: 0 0 8px 0;
}

.potion-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  cursor: pointer;
}

.potion-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.potion-toggle span {
  font-size: 11px;
  color: var(--txt);
}

.potion-slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.potion-slider label {
  font-size: 10px;
  color: var(--dim);
}

.potion-slider input[type="range"] {
  width: 100%;
}

.potion-slider output {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--txt);
  min-width: 36px;
  text-align: right;
}

.potion-select {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.potion-select label {
  font-size: 10px;
  color: var(--dim);
}

.potion-select select {
  font-size: 11px;
  color: var(--txt);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 3px 6px;
}

.potion-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
}

.potion-stats div {
  font-size: 9px;
  color: var(--dimmer);
  text-align: center;
}

.potion-stats b {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--txt);
  margin-top: 2px;
}

.potion-error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--rose);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px #00000066;
  animation: fadeInOut 2s;
  z-index: 1000;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* Indicador de poções na HUD */
.potion-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--painel2);
  border: 1px solid var(--linha);
  border-radius: 4px;
}

.potion-indicator .potion-icon {
  font-size: 12px;
}

.potion-indicator b {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
}

.potion-indicator.empty {
  opacity: 0.5;
}

/* Dropdown de mapas com indicadores visuais */
#map-select option:disabled {
  color: #6d6172;
  font-style: italic;
}

#map-select option:not(:disabled) {
  font-weight: 600;
}

/* Destaque para novo mapa desbloqueado */
@keyframes pulse-unlock {
  0%, 100% { background-color: transparent; }
  50% { background-color: #e3a44b33; }
}

.map-toolbar select.newly-unlocked {
  animation: pulse-unlock 2s ease-in-out 3;
  border-color: #e3a44b;
}

/* Indicador de progresso do mapa */
.map-progress {
  font: 9px var(--f-mono);
  color: #7bb06a;
  margin-left: 8px;
}

.tt-material { display:block; margin-top:8px; font-weight:700; letter-spacing:.04em; }
.tt-material-desc { display:block; margin:4px 0; color:#b4adbd; font-size:11px; line-height:1.45; }
.tt-material-bonus { display:block; padding:5px 0 8px; color:#e8d7b8; border-bottom:1px solid #ffffff18; }

/* ---------- feira: barra, status e anuncio proprio ---------- */
.btn-destaque {
  background: #6b4a1f; border-color: var(--gold); color: #fff3d6; font-weight: 600;
  font-size: 11.5px; padding: 5px 12px;
}
.btn-destaque:hover { background: #845a24; border-color: #f0bd6a; }
.mk-barra { display: flex; align-items: center; gap: 10px; padding: 8px 10px 0; flex: none; }
.mk-vagas { font-family: var(--f-mono); font-size: 11px; color: var(--dim); }
.mk-vagas.cheio { color: var(--rose); }
.mk-receber { font-size: 10.5px; color: var(--moss); flex: 1; }
.mk-meus { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.mk-status { flex: none; min-height: 22px; padding: 4px 12px; font-size: 11px; color: var(--moss); border-top: 1px solid var(--linha); }
.mk-status.ruim { color: var(--rose); }
.mk-of.minha { border-color: #6b4a1f; background: linear-gradient(90deg, #2a2014, var(--painel) 45%); }
.mk-of:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }
.mk-of-ic, .mk-of > canvas { image-rendering: pixelated; border-radius: 3px; width: 30px; height: 30px; }
.btn-comprar:not(:disabled) { border-color: var(--gold); color: var(--gold); }

/* ---------- ficha do item (tooltip e Inspecionar) ---------- */
.ficha-arte { float: right; margin: 0 0 8px 12px; image-rendering: pixelated; border-radius: 4px; }
.ficha { display: flex; flex-direction: column; gap: 2px; }
.ficha .tt-nome { font-size: 12px; }
.ficha-det { margin-bottom: 9px; max-width: 320px; }

/* ---------- menu de botao direito ---------- */
.menu-item {
  position: fixed; z-index: 1000; min-width: 190px; padding: 4px;
  background: #16111c; border: 1px solid var(--linha2); border-radius: 6px;
  box-shadow: 0 14px 30px -10px #000, 0 0 0 1px #0006;
  display: flex; flex-direction: column;
}
.menu-item-tit {
  font-family: var(--f-pix); font-size: 9px; letter-spacing: .05em; padding: 5px 8px 6px;
  border-bottom: 1px solid var(--linha); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.menu-op {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: transparent; border: 0; border-radius: 4px; padding: 6px 8px; text-align: left; font-size: 12px;
}
.menu-op:hover:not(:disabled), .menu-op:focus-visible { background: var(--alto); outline: none; }
.menu-op small { font-size: 9.5px; color: var(--dimmer); font-style: italic; }
.menu-op:disabled { opacity: .55; }

/* ---------- janelas de item ---------- */
.item-dlg {
  width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; overflow: hidden;
  background: #15111a; color: var(--txt); border: 1px solid var(--linha2); border-radius: 8px;
  box-shadow: 0 24px 60px -18px #000;
}
.item-dlg[open] { display: flex; flex-direction: column; }
.item-dlg::backdrop { background: #05030899; backdrop-filter: blur(1px); }
.dlg-cab {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--linha); background: var(--painel);
}
.dlg-cab b { font-family: var(--f-pix); font-size: 10px; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; }
.dlg-corpo { padding: 10px 12px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.dlg-caixa { border: 1px solid var(--linha); border-radius: 6px; background: var(--painel); padding: 6px 9px; display: flex; flex-direction: column; gap: 3px; }
.dlg-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.dlg-linha span { color: var(--dim); }
.dlg-linha b { font-family: var(--f-mono); font-weight: 500; text-align: right; }
.dlg-linha.destaque b { color: var(--gold); font-size: 13px; font-weight: 600; }
.dlg-linha.ruim b { color: var(--rose); }
.dlg-item { display: flex; align-items: center; gap: 10px; }
.dlg-item > canvas { image-rendering: pixelated; border: 1px solid var(--linha); border-radius: 5px; flex: none; }
.dlg-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dlg-item b { font-family: var(--f-pix); font-size: 11px; }
.dlg-item span { font-size: 10.5px; }
.dlg-form { display: flex; flex-direction: column; gap: 8px; }
.dlg-campo { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--dim); }
.dlg-campo select {
  padding: 5px 8px; font-size: 12px; background: #0f0c13; color: var(--txt);
  border: 1px solid var(--linha); border-radius: 4px;
}
.dlg-nota { margin: 0; font-size: 10.5px; }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-grade { display: grid; grid-template-columns: repeat(auto-fill, 38px); gap: 4px; }
.dlg-grade .slot { width: 38px; height: 38px; padding: 1px; display: grid; place-items: center; }
.dlg-grade canvas { image-rendering: pixelated; }

/* ---------- ranking do servidor ---------- */
.ranking {
  position: absolute; inset: 0; z-index: 35; display: none; flex-direction: column;
  background: #0d0a12 radial-gradient(120% 80% at 50% 0%, #221a2a 0%, #0d0a12 62%);
}
.client.ranking-aberto .ranking { display: flex; }
.rk-topo {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--linha); background: var(--painel); flex: none;
}
.rk-marca { font: 9px var(--f-pix); letter-spacing: .18em; color: var(--dimmer); display: block; }
.rk-titulo { margin: 2px 0 0; font: 13px var(--f-pix); letter-spacing: .08em; color: var(--gold); }
.rk-topo-info { flex: 1; font-family: var(--f-mono); font-size: 11px; color: var(--moss); }
.rk-filtros { display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--linha); flex: none; }
.rk-filtros select, .rk-filtros input {
  padding: 4px 8px; font-size: 11px; background: var(--painel2); color: var(--txt);
  border: 1px solid var(--linha); border-radius: 4px; min-width: 0;
}
.rk-filtros input[type="search"] { flex: 1; max-width: 320px; }
.rk-faixa { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dim); }
.rk-faixa input { width: 66px; font-family: var(--f-mono); }
.rk-meus { flex: none; padding: 4px 14px 0; display: flex; flex-direction: column; gap: 3px; }
.rk-meus .sub-titulo { margin: 4px 0 2px; }
.rk-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 3px; }
.rk-linha {
  display: grid; grid-template-columns: 58px 1.4fr 1.6fr auto 74px; gap: 12px; align-items: baseline;
  background: var(--painel); border: 1px solid var(--linha); border-radius: 5px; padding: 6px 10px;
}
.rk-linha.meu { border-color: #6b4a1f; background: linear-gradient(90deg, #2a2014, var(--painel) 45%); }
.rk-pos { font-family: var(--f-mono); font-size: 13px; color: var(--dimmer); }
.rk-linha:nth-child(-n+4) .rk-pos { color: var(--gold); }
.rk-nick { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-classe { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-nivel { font-family: var(--f-mono); font-size: 13px; color: var(--txt); text-align: right; }
.rk-tier { font-family: var(--f-mono); font-size: 10px; color: var(--dim); text-align: right; }
.rk-status { flex: none; min-height: 22px; padding: 4px 14px 8px; font-size: 11px; color: var(--dim); }
.rk-status.ruim { color: var(--rose); }

/* ---------- arena (PvP) ---------- */
.arena {
  position: absolute; inset: 0; z-index: 36; display: none; flex-direction: column;
  background: #0c0910 radial-gradient(120% 80% at 50% 0%, #241a2c 0%, #0c0910 62%);
}
.client.arena-aberta .arena { display: flex; }
.ar-topo {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--linha); background: var(--painel); flex: none;
}
.ar-marca { font: 9px var(--f-pix); letter-spacing: .18em; color: var(--dimmer); display: block; }
.ar-titulo { margin: 2px 0 0; font: 13px var(--f-pix); letter-spacing: .08em; color: var(--rose); }
.ar-info { flex: 1; font-family: var(--f-mono); font-size: 11px; color: var(--dim); }
.ar-palco { position: relative; flex: none; display: grid; place-items: center; padding: 10px 0 4px; }
#ar-cv { image-rendering: pixelated; width: 810px; height: 387px; border: 1px solid var(--linha); border-radius: 6px; }
.ar-barras {
  position: absolute; inset: 10px 0 auto; display: flex; justify-content: space-between;
  gap: 20px; padding: 0 calc((100% - 810px) / 2 + 14px); pointer-events: none;
}
.ar-barra { width: 300px; display: flex; flex-direction: column; gap: 3px; }
.ar-barra.dir { text-align: right; }
.ar-barra b { font-size: 12px; }
.ar-barra span.dim { font-size: 10px; font-family: var(--f-mono); }
.ar-vida { position: relative; height: 14px; background: #00000099; border: 1px solid #ffffff22; }
.ar-barra.dir .ar-vida i { left: auto; right: 0; }
.ar-vida i { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg, #8f3550, #f0708f); transition: width .12s linear; }
.ar-vida span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 9px var(--f-pix); color: #ffe7ef; text-shadow: 0 1px 0 #000;
}
.ar-barra.meu .ar-vida i { background: linear-gradient(90deg, #365e50, #7bd48a); }
/* recarga das skills dos dois lutadores, logo abaixo das barras (mesmo slot da hunt) */
.ar-skills {
  position: absolute; inset: 62px 0 auto; display: flex; justify-content: space-between;
  padding: 0 calc((100% - 810px) / 2 + 14px); pointer-events: none;
}
.ar-skills-lado { display: flex; gap: 5px; pointer-events: auto; }
.ar-skills-lado.dir { flex-direction: row-reverse; }
.ar-skills-lado:not(.meu) .sk-slot { opacity: .85; }
.ar-centro {
  position: absolute; left: 0; right: 0; top: 92px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; pointer-events: none;
}
.ar-relogio { font-family: var(--f-mono); font-size: 12px; color: var(--dim); }
.ar-fim { font: 20px var(--f-pix); letter-spacing: .12em; }
.ar-fim.ganhou { color: var(--gold); text-shadow: 0 0 14px #e3a44b88; }
.ar-fim.perdeu { color: var(--rose); }
.ar-fim.empate { color: var(--dim); }
.ar-rating { font-family: var(--f-mono); font-size: 12px; color: var(--steel); }
.ar-meio { flex: 1; min-height: 0; display: flex; }
.ar-vitrines { flex: 1; min-height: 0; overflow-y: auto; display: flex; gap: 10px; padding: 8px 14px; }
/* ---------- liga ---------- */
.ar-liga {
  flex: none; width: 290px; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px; border-left: 1px solid var(--linha);
}
.ar-liga-cab { font: 9px var(--f-pix); letter-spacing: .16em; color: var(--dimmer); }
.ar-liga-minha {
  display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 6px; background: var(--painel);
  border: 1px solid color-mix(in srgb, var(--cor-liga) 45%, transparent);
}
.ar-emblema {
  flex: none; width: 38px; height: 42px; display: grid; place-items: center; font: 16px var(--f-pix);
  color: var(--cor-liga); border: 2px solid var(--cor-liga); border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cor-liga) 32%, transparent), #00000066);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cor-liga) 35%, transparent);
}
.ar-liga-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 11px; }
.ar-liga-texto b { color: var(--cor-liga); font-size: 13px; }
.ar-liga-texto .dim { font-size: 10px; font-family: var(--f-mono); }
.ar-pdl { height: 5px; margin: 2px 0; background: #00000088; border: 1px solid #ffffff1f; }
.ar-pdl i { display: block; height: 100%; background: var(--cor-liga); }
.ar-tabela { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.ar-tabela li { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; padding: 2px 4px; border-radius: 3px; }
.ar-tabela li.voce { background: #6b4a1f55; }
.ar-tabela-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-tabela-liga { font-family: var(--f-mono); font-size: 10.5px; }
.ar-pdl-var { font-family: var(--f-mono); font-size: 12px; color: var(--steel); }
.ar-pdl-var.sobe { color: #7bd48a; }
.ar-pdl-var.desce { color: var(--rose); }
.ar-liga-evento { font: 12px var(--f-pix); letter-spacing: .08em; color: var(--gold); }
.ar-liga-evento.rebaixou, .ar-liga-evento.caiu-de-tier { color: var(--rose); }
.ar-vitrine { flex: 1; min-width: 0; border: 1px solid var(--linha); border-radius: 6px; background: var(--painel); padding: 7px 9px; }
.ar-vitrine.meu { border-color: #6b4a1f; }
.ar-vitrine-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.ar-vitrine-cab b { font-size: 12px; }
.ar-vitrine-cab span { font-family: var(--f-mono); font-size: 10.5px; }
.ar-pecas { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 4px; }
.ar-pecas .slot { width: 34px; height: 34px; }
.ar-acoes { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; border-top: 1px solid var(--linha); }
.ar-status { font-size: 11px; color: var(--dim); }

/* ---------- joias: item +7 brilha ---------- */
.slot.brilho { position: relative; overflow: hidden; box-shadow: 0 0 7px color-mix(in srgb, var(--rar) 70%, #fff1a8), inset 0 0 6px #fff1a855; }
.slot.brilho::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, #fff6d060 50%, transparent 65%);
  background-size: 260% 100%; animation: brilho-varre 2.4s linear infinite;
}
@keyframes brilho-varre { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.tt-nome.tt-brilho { text-shadow: 0 0 6px currentColor, 0 0 2px #fff6d0; }
.tt-aprimorado { font-family: var(--f-mono); font-size: 10.5px; color: #cdb8ff; }
/* dois slots fixos de joia: gema com a quantidade no canto */
.joias-grade { display: flex; gap: 6px; }
.joia-cel[draggable="true"] { cursor: grab; }
.joia-cel[draggable="true"]:active { cursor: grabbing; }
.joia-cel.vazia { opacity: .6; }
.slot.alvo-joia { outline: 2px solid #7bd88f; outline-offset: -2px; }
.slot.alvo-joia-nao { outline: 2px solid #d1466f; outline-offset: -2px; }

/* ---------- configuracao do bot (link ao lado de "Proxima hunt automatica") ---------- */
.link-bot { background: none; border: 0; padding: 0; font-size: 10px; color: #8fd3ff; text-decoration: underline; cursor: pointer; }
.link-bot:hover, .link-bot[aria-expanded="true"] { color: #c8ecff; }
.bot-config { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: #06050899; }
.client.bot-aberto .bot-config { display: flex; }
.bot-janela {
  width: 360px; max-height: 92%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--ink); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 24px 60px -28px #000; color: var(--txt);
}
.bot-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bot-topo h3 { margin: 0; font: 11px var(--f-pix); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.bot-secao { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--linha); }
.bot-secao h4 { margin: 0; font: 9px var(--f-pix); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.bot-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.bot-campo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); }
.bot-campo select, .bot-campo input[type="number"] { width: 180px; }
.bot-campo input[type="range"] { flex: 1; min-width: 0; }
.bot-valor { width: 34px; text-align: right; font-family: var(--f-mono); color: var(--txt); }
.bot-dica { margin: 0; font-size: 10.5px; color: var(--dimmer); }
.bot-aviso { margin: 0; font-size: 11px; color: #ff8f8f; }
.bot-aviso:empty { display: none; }
.bot-raridades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
.bot-raridades .bot-check { font-size: 11px; }
.bot-atalhos { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- ficha de combate: painel fora do client, a esquerda ---------- */
.ficha-combate {
  position: fixed; top: max(8px, calc(50% - 400px)); right: calc(50% + 620px); width: 260px;
  max-height: min(800px, calc(100vh - 16px)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--ink); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 24px 60px -28px #000;
  font-size: 12px; color: var(--txt);
}
.fc-topo { display: flex; flex-direction: column; gap: 2px; }
.fc-marca { font: 10px var(--f-pix); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.fc-sub { font-family: var(--f-mono); font-size: 11px; color: var(--dim); }
.fc-secao { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; border-top: 1px solid var(--linha); }
.fc-titulo { margin: 0 0 2px; font: 9px var(--f-pix); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.fc-subtitulo { margin: 6px 0 0; font-size: 10.5px; font-weight: normal; color: var(--dimmer); }
.fc-linha { display: flex; justify-content: space-between; gap: 8px; }
.fc-rot { color: var(--dim); }
.fc-val { font-family: var(--f-mono); font-weight: normal; color: var(--txt); }
.fc-grande { display: flex; align-items: baseline; gap: 8px; }
.fc-grande b { font: 20px var(--f-mono); color: #ff9a8a; }
.fc-grande span { font-size: 11px; color: var(--dim); }
.fc-pilha { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: #ffffff10; }
.fc-pilha i { display: block; height: 100%; }
.fc-legenda { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 10.5px; color: var(--dim); }
.fc-leg { display: inline-flex; align-items: center; gap: 4px; }
.fc-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.fc-barra { display: flex; flex-direction: column; gap: 2px; }
.fc-trilho { height: 6px; border-radius: 3px; overflow: hidden; background: #ffffff10; }
.fc-trilho i { display: block; height: 100%; }
.fc-nota { margin: 0; font-size: 10px; color: var(--dimmer); }
/* de onde vem o numero da linha acima: classe + atributos + itens */
.fc-origem { margin: -3px 0 1px; font-size: 10px; line-height: 1.3; color: var(--dimmer); }
.fc-bloco { display: flex; flex-direction: column; gap: 5px; }
.fc-alerta { margin: 0; padding: 6px 8px; border: 1px solid #d1466f66; border-radius: 4px; background: #d1466f18; font-size: 11px; color: #ffb3c0; }
.fc-dica { margin: 2px 0 0; font-size: 11px; color: var(--txt); }
/* arte de 32px mostrada menor: reducao suave, sem serrilhar a lapidacao */
.icone-joia { width: 18px; height: 18px; image-rendering: auto; flex: none; }
.menu-op-rot { display: inline-flex; align-items: center; gap: 6px; }
.menu-op .icone-joia { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .slot.brilho::after { animation: none; background-position: 50% 0; } }
.ar-pocoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ar-pocoes-cab { font-family: var(--f-mono); font-size: 11px; color: var(--dim); }
.ar-pocao { border-color: var(--cor-pocao); color: var(--cor-pocao); }
.ar-pocao:disabled { opacity: .45; }
.ar-pressao { font-family: var(--f-mono); font-size: 11px; color: #ff9a3c; }
.ar-contagem { font: 34px var(--f-pix); color: var(--gold); text-shadow: 0 0 16px #e3a44b66; line-height: 1.1; }
.ar-voce { margin-left: 6px; padding: 1px 5px; border-radius: 3px; background: #6b4a1f; color: #fff3d6; font: 8px var(--f-pix); letter-spacing: .08em; }

/* ---------- chat do servidor (src/ui/chat-ui.js) ---------- */
.chat-painel {
  position: fixed; top: max(8px, calc(50% - 400px)); left: calc(50% + 620px); width: 300px;
  height: min(800px, calc(100vh - 16px)); z-index: 30;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--ink); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 24px 60px -28px #000;
  font-size: 12px; color: var(--txt);
}
.chat-painel.flutuante {
  left: auto; right: 12px; top: auto; bottom: 12px; z-index: 60;
  width: min(340px, calc(100vw - 24px)); height: min(520px, calc(100vh - 24px));
}
.ch-topo { display: flex; align-items: center; gap: 8px; }
.ch-marca { font: 11px var(--f-pix); color: var(--gold); letter-spacing: .12em; }
.ch-abas { display: flex; gap: 4px; flex: 1; }
.ch-aba {
  flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 5px 6px; cursor: pointer;
  font: 600 11px var(--f-mono); color: var(--dim); background: transparent; border: 1px solid var(--linha); border-radius: 4px;
}
.ch-aba[aria-selected="true"] { color: var(--txt); border-color: var(--gold); box-shadow: inset 0 -2px var(--gold); }
.ch-badge { min-width: 16px; padding: 0 4px; border-radius: 8px; background: #d1466f; color: #fff; font-size: 10px; line-height: 16px; }
.ch-badge:empty { display: none; }
.ch-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.ch-msg { padding: 3px 6px; border-radius: 4px; line-height: 1.45; overflow-wrap: anywhere; }
.ch-msg.meu { background: #ffffff0a; }
.ch-hora { margin-right: 6px; color: var(--dim); font: 10px var(--f-mono); }
.ch-nick { margin-right: 5px; }
.ch-nick::after { content: ':'; color: var(--dim); }
.ch-anuncio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.ch-item {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 2px; cursor: help;
  font: inherit; color: var(--txt); background: #00000045; border: 1px solid; border-radius: 4px;
}
.ch-item canvas { width: 20px; height: 20px; image-rendering: pixelated; }
.ch-preco-tag { padding: 1px 6px; border-radius: 4px; background: #e3a44b22; color: var(--gold); font: 600 11px var(--f-mono); }
.ch-vazio { margin: auto; padding: 20px 8px; color: var(--dim); text-align: center; }
.ch-form { display: flex; gap: 4px; }
.ch-campo, .ch-preco {
  padding: 6px 8px; color: var(--txt); background: #0b0910; border: 1px solid var(--linha); border-radius: 4px; font: inherit;
}
.ch-campo { flex: 1; min-width: 0; }
.ch-preco { width: 74px; }
.ch-campo:focus, .ch-preco:focus { outline: none; border-color: var(--gold); }
.ch-anexo { display: flex; align-items: center; gap: 6px; }
.ch-rot { color: var(--dim); font-size: 11px; }
.ch-seletor { max-height: 150px; overflow-y: auto; padding: 6px; background: #0b0910; border: 1px solid var(--linha); border-radius: 4px; }
.ch-grade { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 4px; margin-top: 4px; }
.ch-slot { width: 34px; height: 34px; padding: 2px; cursor: pointer; background: #00000055; border: 1px solid; border-radius: 4px; }
.ch-slot canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.ch-status { color: var(--dim); font-size: 11px; }
.ch-status:empty { display: none; }
.ch-status.ruim { color: #ff8f7a; }
.ch-dica {
  position: fixed; z-index: 100; max-width: 260px; padding: 10px; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--txt);
  background: var(--ink); border: 1px solid var(--linha); border-radius: 6px; box-shadow: 0 12px 30px -10px #000;
}

/* ---------- seletor de idioma (src/ui/idioma-ui.js) ---------- */
.idiomas { display: flex; align-items: center; gap: 4px; }
.idioma {
  display: grid; place-items: center; width: 30px; height: 22px; padding: 2px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 4px; opacity: .55; transition: opacity .15s, border-color .15s;
}
.idioma svg { display: block; width: 24px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px #00000055; }
.idioma:hover, .idioma:focus-visible { opacity: 1; }
.idioma[aria-pressed="true"] { opacity: 1; border-color: var(--gold, #e3a44b); }
.au-idiomas { margin-left: auto; }
.au-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }