/* Visual no estilo do cliente oficial, usando as imagens extraídas da interface. */
:root {
  --ui: /assets/interface/images;
  --text: #c0c0c0;
  --text-bright: #f4f4f4;
  --gold: #e8c45a;
  --green: #00c000;
  --red: #ff4040;
  --dark: #141414;
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 11px;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #1a1a1a url('/assets/interface/images/background-dark.png');
  image-rendering: pixelated;
}
#app { min-height: 100%; }
a { color: #7fb5ff; }
p { margin: 0; }

.screen { min-height: 100vh; padding: 24px 16px; display: flex; flex-direction: column; gap: 18px; }
.screen.center { align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.small-gap { gap: 6px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.muted { color: #9a9a9a; }
.small { font-size: 10px; }

.logo {
  margin: 0;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  font-size: 40px;
  font-weight: bold;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #3a2a00, 0 0 18px rgba(232, 196, 90, 0.35), 2px 2px 0 #000;
}
.logo span { color: #d84a2e; }
.logo.small { font-size: 18px; }

/* Janela com a moldura de diálogo do cliente */
.tb-window {
  position: relative;
  max-width: 100%;
  border-style: solid;
  border-width: 18px 4px 4px 4px;
  border-image: url('/assets/interface/images/skin/classic/dialog-frame-borderimage.png') 18 4 4 4 fill stretch;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
.tb-window-title {
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 14px;
  line-height: 14px;
  text-align: center;
  color: var(--text-bright);
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.tb-window-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.tb-frame {
  border-style: solid;
  border-width: 2px;
  border-image: url('/assets/interface/images/2pixel-up-frame-borderimage.png') 2 fill stretch;
}

.tb-line {
  border: 0;
  height: 2px;
  margin: 2px 0;
  background: url('/assets/interface/images/skin/classic/horizontal-line-dark.png') repeat-x;
}

/* Botão 9-grid */
.tb-button {
  min-width: 86px;
  height: 22px;
  padding: 0 10px;
  font: inherit;
  font-weight: bold;
  color: var(--text-bright);
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  border-style: solid;
  border-width: 4px;
  border-image: url('/assets/interface/images/skin/classic/button-9grid-idle.png') 4 fill stretch;
  background: none;
  line-height: 12px;
}
.tb-button:active:not(:disabled) { border-image-source: url('/assets/interface/images/skin/classic/button-9grid-pressed.png'); padding-top: 1px; }
.tb-button.green { border-image-source: url('/assets/interface/images/skin/classic/button-green-up.png'); }
.tb-button.green:active:not(:disabled) { border-image-source: url('/assets/interface/images/skin/classic/button-green-down.png'); }
.tb-button:disabled { color: #777; cursor: default; }
.tb-button:focus-visible { outline: 1px dotted var(--gold); outline-offset: 2px; }

/* Campos */
.tb-field { display: flex; flex-direction: column; gap: 4px; }
.tb-field > span { color: var(--text); }
.tb-field input {
  height: 20px;
  padding: 0 5px;
  font: inherit;
  color: var(--text-bright);
  background: #2a2a2a;
  border: 1px solid #000;
  border-right-color: #747474;
  border-bottom-color: #747474;
  outline: none;
}
.tb-field input:focus { border-color: #000 #a0a0a0 #a0a0a0 #000; background: #303030; }

.tb-checkbox, .tb-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.tb-checkbox input, .tb-radio input { position: absolute; opacity: 0; pointer-events: none; }
.tb-checkbox i { width: 12px; height: 12px; background: url('/assets/interface/images/skin/classic/checkbox-unchecked.png'); }
.tb-checkbox input:checked + i { background-image: url('/assets/interface/images/skin/classic/checkbox-checked.png'); }
.tb-radio i { width: 12px; height: 12px; background: url('/assets/interface/images/skin/classic/radiobutton-unchecked.png'); }
.tb-radio.on i { background-image: url('/assets/interface/images/skin/classic/radiobutton-checked.png'); }
.tb-checkbox input:focus-visible + i, .tb-radio input:focus-visible + i { outline: 1px dotted var(--gold); }

.tb-error { color: var(--red); }

/* Barras de vida e mana */
.tb-bar { position: relative; height: 14px; background: #1c1c1c; border: 1px solid #000; }
.tb-bar .fill { height: 100%; }
.tb-bar.health .fill { background: linear-gradient(#e03030, #a01010); }
.tb-bar.mana .fill { background: linear-gradient(#5050ff, #2020b0); }
.tb-bar span { position: absolute; inset: 0; text-align: center; line-height: 12px; color: #fff; font-size: 10px; text-shadow: 1px 1px 0 #000; }

/* Lista de personagens */
.char-list { list-style: none; margin: 0; padding: 2px; background: #202020; border: 1px solid #000; max-height: 320px; overflow: auto; }
.char-list li { display: flex; align-items: center; gap: 8px; padding: 2px 6px; cursor: pointer; }
.char-list li:hover { background: #2c2c2c; }
.char-list li.selected { background: #3a3a3a; color: var(--text-bright); }
.char-list li div { display: flex; flex-direction: column; }
.char-list .outfit { width: 64px; height: 64px; }

/* Criação de personagem */
.create { display: grid; grid-template-columns: 1fr 400px; gap: 16px; }
.create-left { min-width: 0; }
.create-right img { display: block; max-width: 100%; height: auto; }
.create-bottom { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.voc-list { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #202020; border: 1px solid #000; }
.sex { width: 34px; height: 34px; border: 0; cursor: pointer; background: center no-repeat; }
.sex.male { background-image: url('/assets/interface/images/button-gendermale-up.png'); }
.sex.male.on { background-image: url('/assets/interface/images/button-gendermale-down.png'); }
.sex.female { background-image: url('/assets/interface/images/button-genderfemale-up.png'); }
.sex.female.on { background-image: url('/assets/interface/images/button-genderfemale-down.png'); }
.preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: #101010; border: 1px solid #000; }
@media (max-width: 760px) {
  .create { grid-template-columns: 1fr; }
}

/* ===== Tela do jogo, no layout do cliente ===== */
.client { height: 100vh; display: grid; grid-template-columns: 176px minmax(0, 1fr) 176px; gap: 2px; padding: 2px; background: #1b1b1b url('/assets/interface/images/background-dark.png'); }
.side { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.center { display: grid; grid-template-rows: minmax(0, 1fr) auto 150px; gap: 2px; min-height: 0; min-width: 0; }
.img-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.txt-btn {
  height: 20px; padding: 0 6px; font: inherit; font-size: 10px; color: #dcdcdc; cursor: pointer; background: none;
  border-style: solid; border-width: 4px; border-image: url('/assets/interface/images/skin/classic/button-9grid-idle.png') 4 fill stretch; line-height: 10px;
}
.txt-btn:active { border-image-source: url('/assets/interface/images/skin/classic/button-9grid-pressed.png'); }
.gap { flex: 1; }

/* Área do jogo */
.gameview { position: relative; min-height: 0; background: #000; border: 1px solid #000; outline: 1px solid #5a5a5a; }
.gv-host { position: absolute; inset: 0; }
.gv-host canvas { display: block; }
.gv-conn { position: absolute; right: 6px; top: 4px; font-size: 10px; text-shadow: 1px 1px 0 #000; }
.gv-conn.online { color: #8a8a8a; } .gv-conn.connecting { color: var(--gold); } .gv-conn.offline { color: var(--red); }

/* Janela de conteúdo por cima da área do jogo */
.cw-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); z-index: 10; }
.cw { min-width: 320px; max-width: 92%; }
.cw-close { position: absolute; top: -15px; right: 2px; width: 12px; height: 12px; border: 0; padding: 0; cursor: pointer; background: url('/assets/interface/images/skin/classic/exit-button-small-up.png'); }
.cw-close:active { background-image: url('/assets/interface/images/skin/classic/exit-button-small-down.png'); }
.cw-soon { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 360px; }
.cw-soon img { image-rendering: pixelated; }

/* Barra de magias do Baiak */
.actionbar { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 2px; background: #202020; border: 1px solid #000; outline: 1px solid #5a5a5a; }
.ab-slot { position: relative; width: 34px; height: 34px; background: url('/assets/interface/images/containerslot.png') 0 0 / 34px 44px; }
.ab-slot small { position: absolute; right: 3px; bottom: 1px; font-size: 9px; color: #c8c8c8; text-shadow: 1px 1px 0 #000; }
.ab-gambits { margin-left: 8px; height: 24px; }

/* Console */
.console { display: grid; grid-template-rows: 18px minmax(0, 1fr) 20px; background: #000; border: 1px solid #000; outline: 1px solid #5a5a5a; min-height: 0; }
.con-tabs { display: flex; align-items: center; background: #2a2a2a; }
.con-tab { width: 96px; height: 18px; border: 0; padding: 0; font: inherit; font-size: 10px; color: #b4b4b4; cursor: pointer; background: url('/assets/interface/images/console-tab-passive.png'); }
.con-tab.on { color: #fff; background-image: url('/assets/interface/images/console-tab-active.png'); }
.con-lines { overflow-y: auto; padding: 2px 4px; font-size: 11px; line-height: 14px; background: #0c0c0c; scrollbar-width: thin; }
.con-input { display: flex; }
.con-input input { flex: 1; height: 20px; border: 0; border-top: 1px solid #333; padding: 0 4px; background: #181818; color: #f0f0f0; font: inherit; outline: none; }

/* Painéis simples da barra direita */
.pane { padding: 4px; border-style: solid; border-width: 4px; border-image: url('/assets/interface/images/2pixel-up-frame-borderimage.png') 4 fill stretch; }
.minimap { display: flex; gap: 3px; }
.mm-map { position: relative; width: 106px; height: 106px; background: #000; border: 1px solid #000; outline: 1px solid #444; }
.mm-map canvas { display: block; width: 106px; height: 106px; image-rendering: pixelated; }
.mm-cross { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1px; background: #fff; }
.mm-floor { position: absolute; left: 3px; bottom: 2px; font-size: 9px; color: #ccc; }
.mm-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mm-btns { display: grid; grid-template-columns: 20px 20px; gap: 2px; }
.status div { display: flex; align-items: center; gap: 3px; height: 15px; }
.status span:last-child { flex: 1; text-align: right; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000; }
.sb-bar { width: 94px; height: 11px; background: url('/assets/interface/images/hitpoints-manapoints-bar-border.png'); position: relative; }
.sb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background-repeat: no-repeat; }
.inventory { display: flex; gap: 4px; }
.inv-main { display: flex; flex-direction: column; gap: 3px; }
.inv-slots { display: grid; grid-template-columns: repeat(3, 34px); gap: 2px; }
.inv-slot { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: url('/assets/interface/images/containerslot.png') 0 0 / 34px 44px; }
.inv-slot img { width: 32px; height: 32px; }
.inv-num { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 34px; font-size: 10px; color: #fff; background: #1e1e1e; border: 1px solid #000; }
.inv-num small { font-size: 9px; color: #aaa; }
.inv-states { width: 106px; height: 13px; background: url('/assets/interface/images/inventory-states-bar.png'); }
.inv-btns { display: flex; flex-direction: column; gap: 2px; justify-content: flex-start; }
.inv-btns .txt-btn { width: 52px; }
.combat { display: flex; align-items: center; gap: 2px; }
.stance { width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none;
  border-style: solid; border-width: 2px; border-image: url('/assets/interface/images/skin/classic/button-9grid-idle.png') 4 fill stretch; }
.stance.on { border-image-source: url('/assets/interface/images/skin/classic/button-9grid-pressed.png'); outline: 1px solid #c8a04a; }
.ctl-grid { display: flex; flex-wrap: wrap; gap: 2px; }
.ctl-grid .img-btn img { width: 20px; height: 20px; }
.ctl-sep { border: 0; height: 1px; margin: 4px 0; background: #555; box-shadow: 0 1px 0 #222; }

/* Janelas laterais (widgets) */
.w-widget { display: flex; flex-direction: column; border-style: solid; border-width: 16px 4px 4px 4px; border-image: url('/assets/interface/images/skin/classic/widget-borderimage.png') 16 4 4 4 fill stretch; position: relative; min-height: 0; flex: none; }
.w-widget.grow { flex: 1 1 auto; min-height: 120px; }
.w-widget.min { border-bottom-width: 0; }
.w-title { position: absolute; top: -15px; left: 0; right: 0; height: 14px; display: flex; align-items: center; gap: 3px; padding: 0 1px; color: #e8e8e8; font-weight: bold; font-size: 11px; text-shadow: 1px 1px 0 #000; }
.w-title img { width: 12px; height: 12px; }
.w-title-btns { margin-left: auto; display: flex; gap: 1px; }
.w-title-btns button { width: 12px; height: 12px; border: 0; padding: 0; cursor: pointer; background-color: transparent; }
.w-body { padding: 3px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.empty { color: #8f8f8f; font-size: 10px; }
.kvs .kv, .kv { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; line-height: 13px; }
.kv span { color: #afafaf; } .kv b { color: #f0f0f0; font-weight: normal; }
.loot { list-style: none; margin: 0; padding: 0; font-size: 10px; line-height: 13px; }
.loot .r-comum { color: #e6e6e6; } .loot .r-raro { color: #4b9bff; } .loot .r-epico { color: #f2d43a; } .loot .r-lendario { color: #ff8c1a; }
.bt { display: grid; grid-template-columns: 1fr auto; font-size: 10px; margin-bottom: 3px; }
.bt .sk-bar { grid-column: 1 / -1; }

/* Battle List */
.bl-filters { display: flex; align-items: center; gap: 1px; padding: 2px 2px 3px; border-bottom: 1px solid #2a2a2a; }
.bl-filter { width: 20px; height: 18px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none;
  border-style: solid; border-width: 2px; border-image: url('/assets/interface/images/skin/classic/button-9grid-idle.png') 4 fill stretch; }
.bl-filter.on { border-image-source: url('/assets/interface/images/skin/classic/button-9grid-pressed.png'); }
.bl-filter img { width: 12px; height: 12px; }
.bl-filter.on img { opacity: .45; }
.bl-sort { flex: 1; min-width: 0; height: 18px; margin-left: 2px; padding: 0 14px 0 3px; position: relative; font: inherit; font-size: 9px; color: #c8c8c8; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #1c1c1c; border: 1px solid #000; outline: 1px solid #4a4a4a; cursor: pointer; }
.bl-sort i { position: absolute; right: 3px; top: 5px; width: 7px; height: 7px; background: url('/assets/interface/images/icon-arrow7x7-down.png'); }
.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-list li { display: flex; align-items: center; gap: 4px; height: 24px; padding: 1px 0; }
.bl-portrait { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #000; outline: 1px solid #555; flex: none; }
.bl-list li.target .bl-portrait { outline: 1px solid #ff0000; border-color: #ff0000; }
.bl-portrait img { image-rendering: pixelated; }
.bl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bl-name { font-size: 11px; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 12px; }
.bl-list li.target .bl-name { color: #fff; }
.bl-hp { display: block; height: 4px; background: #000; border: 1px solid #000; }
.bl-hp i { display: block; height: 100%; }

/* Skills */
.sk { display: flex; flex-direction: column; }
.sk-row { margin-bottom: 1px; }
.sk-line { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 14px; }
.sk-icon { width: 9px; height: 9px; flex: none; background: url('/assets/interface/images/icons-skills.png') no-repeat; }
.sk-label { color: #c0c0c0; white-space: pre; }
.sk-value { margin-left: auto; color: #f0f0f0; }
.sk-bar { height: 5px; margin: 1px 0 2px; background: #000; border: 1px solid #1a1a1a; }
.sk-bar i { display: block; height: 100%; background: url('/assets/interface/images/progressbar-red-small.png') repeat-x 0 50%; }
.sk-bar.green i { background-image: url('/assets/interface/images/progressbar-green-small.png'); }
.sk-sep { border: 0; height: 1px; margin: 4px 0; background: #4d4d4d; box-shadow: 0 1px 0 #1c1c1c; }
.sk-head { font-size: 11px; color: #c0c0c0; line-height: 14px; }

@media (max-width: 900px) {
  .client { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60vh auto auto; height: auto; min-height: 100vh; }
  .side.left { order: 3; }
  .side { overflow: visible; }
}

/* Itens */
.item-slot { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: url('/assets/interface/images/containerslot.png') 0 0 / 34px 44px; flex: none; }
.item-slot.over { outline: 1px solid #e8c45a; }
.item-ph { opacity: 1; pointer-events: none; }
.item-drag { position: relative; width: 32px; height: 32px; cursor: grab; display: block; }
.item-img { image-rendering: pixelated; display: block; pointer-events: none; }
.item-count { position: absolute; right: 1px; bottom: 0; font: bold 10px Verdana, sans-serif; color: #f0f0f0; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; pointer-events: none; }
.item-slot.rarity-1 { box-shadow: inset 0 0 0 1px #3b7dff, inset 0 0 6px rgba(59,125,255,.55); }
.item-slot.rarity-2 { box-shadow: inset 0 0 0 1px #f2d43a, inset 0 0 6px rgba(242,212,58,.55); }
.item-slot.rarity-3 { box-shadow: inset 0 0 0 1px #ff8c1a, inset 0 0 7px rgba(255,140,26,.65); }
.cont-grid { display: grid; grid-template-columns: repeat(4, 34px); gap: 2px; justify-content: start; }
.depot { display: flex; flex-direction: column; gap: 6px; }
.depot-grid { display: grid; grid-template-columns: repeat(10, 34px); gap: 2px; max-height: 300px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.ctx-menu { position: fixed; z-index: 50; list-style: none; margin: 0; padding: 2px 0; min-width: 110px; background: #2c2c2c; border: 1px solid #000; outline: 1px solid #6a6a6a; box-shadow: 2px 2px 6px rgba(0,0,0,.6); }
.ctx-menu li { padding: 2px 10px; color: #e0e0e0; cursor: pointer; }
.ctx-menu li:hover { background: #4a4a4a; color: #fff; }
.count-dialog { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.count-dialog input[type=range] { width: 100%; }
.count-num { width: 60px; height: 20px; background: #2a2a2a; color: #fff; border: 1px solid #000; font: inherit; padding: 0 4px; }
.gv-status { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font: bold 12px Verdana, sans-serif; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
@media (max-width: 760px) { .depot-grid { grid-template-columns: repeat(6, 34px); } }

/* Escolha de hunts */
.hunts { display: flex; flex-direction: column; gap: 6px; min-width: min(560px, 80vw); }
.hunt-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.hunt-list li { background: #2a2a2a; border: 1px solid #111; outline: 1px solid #4a4a4a; padding: 5px 7px; }
.hunt-list li.locked { opacity: 0.55; }
.hunt-head { display: flex; align-items: center; gap: 8px; }
.hunt-head b { color: #e8d9a8; font-size: 12px; }
.hunt-tag { font-size: 10px; color: #bbb; border: 1px solid #555; padding: 0 4px; }
.hunt-lvl { margin-left: auto; font-size: 11px; color: #9fd29f; }
.hunt-mons { font-size: 11px; color: #ccc; margin: 3px 0; }
.hunt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gv-place { position: absolute; left: 6px; top: 4px; font-size: 11px; color: #e8d9a8; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.ab-auto { margin-left: 8px; }
.ab-auto.on { background: #2f5d2f; color: #d8ffd8; border-color: #5a9a5a; }
.ab-auto:disabled { opacity: 0.5; cursor: default; }
.bl-list li { cursor: pointer; }
.offline { display: flex; flex-direction: column; gap: 6px; min-width: min(420px, 80vw); max-height: 60vh; overflow-y: auto; }
.offline .kv b { text-align: right; }
.shop { display: flex; flex-direction: column; gap: 6px; min-width: min(520px, 82vw); }
.shop-money { color: #e8d9a8; font-weight: bold; font-size: 12px; }
.shop-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.shop-list li { display: flex; align-items: center; gap: 8px; background: #2a2a2a; border: 1px solid #111; padding: 3px 6px; cursor: default; }
.shop-list li.picked { outline: 1px solid #9fd29f; background: #2f3a2f; }
.shop-list li.locked { opacity: 0.5; }
.shop-name { flex: 1; display: flex; flex-direction: column; font-size: 12px; color: #ddd; }
.shop-name small { color: #999; font-size: 10px; }
.shop-list .count-num { width: 60px; }