:root {
  --bg: #0f1117;
  --panel: #171a23;
  --panel-2: #1e2230;
  --line: #2a2f3e;
  --txt: #e8e6df;
  --dim: #9aa0ad;
  --gold: #d8a64a;
  --gold-2: #f0c46a;
  --hp: #d9534f;
  --mana: #4a86e8;
  --xp: #8fc163;
  --ok: #6fc07a;
  --bad: #e06a5a;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.boot { padding: 40px 16px; text-align: center; color: var(--dim); }

.app { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 12px 16px calc(84px + env(safe-area-inset-bottom)); }

/* fundo das telas de entrada: fornalha com labaredas e o foco de fogo atras do logo (fogo.js) */
.bg-world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0a0810; }
.bg-world canvas.fogo { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-world ~ #app .brand .logo { animation: brasa 3.2s ease-in-out infinite; }
@keyframes brasa {
  0%, 100% { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(255, 110, 30, .35)); }
  50% { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(255, 140, 40, .6)); }
}
@media (prefers-reduced-motion: reduce) { .bg-world ~ #app .brand .logo { animation: none; } }
.bg-world ~ #app .brand p {
  display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 8px;
  background: rgba(23, 26, 35, .9); border: 1px solid var(--line); color: #e8e2d0; backdrop-filter: blur(3px);
}
.bg-world ~ #app .card, .bg-world ~ #app .tabs { background: rgba(23, 26, 35, .88); backdrop-filter: blur(3px); }

/* ---- marca ---- */
.brand { text-align: center; margin: 28px 0 18px; }
.brand h1 { margin: 0; font-size: 30px; letter-spacing: .14em; color: var(--gold); font-weight: 800; }
.brand p { margin: 4px 0 0; color: var(--dim); font-size: 14px; }
.brand .logo { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto -6px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }

/* ---- blocos ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card h2 { margin: 0 0 10px; font-size: 16px; color: var(--gold-2); }
.card h3 { margin: 14px 0 8px; font-size: 14px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.narrow { max-width: 440px; margin: 0 auto; }
/* lista de personagens: a sessao foi assumida por outro aparelho (como no Huntera), em vermelho em cima da lista */
.queda { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #a3332b; border-radius: 8px; background: #3a1210; color: #ffb4a8; font-size: 13.5px; line-height: 1.45; }
/* Entrar com Google: dentro do quadro, do tamanho dos outros botoes (padrao escuro do Google) */
.gauth { margin-top: 12px; }
.gauth .or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 12px; margin-bottom: 12px; }
.gauth .or::before, .gauth .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-radius: 8px;
  border: 1px solid #8e918f; background: #131314; color: #e3e3e3; font: 500 14px/1.2 Roboto, system-ui, sans-serif; cursor: pointer; }
.gbtn:hover { background: #1d1e20; border-color: #c4c7c5; }
.gbtn .glogo { width: 18px; height: 18px; flex: none; }
.muted { color: var(--dim); }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

label.field { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--dim); }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #0c0e14; font-size: 16px;
}
input[type=number] { width: 84px; }
/* olhinho da senha (entrar e criar conta): botao de 44 px dentro do campo, a direita */
.senha-campo { position: relative; }
.senha-campo input { padding-right: 50px; }
.senha-campo input::-ms-reveal, .senha-campo input::-ms-clear { display: none; }
.senha-olho { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--dim); cursor: pointer; }
.senha-olho:hover, .senha-olho:focus-visible { color: var(--gold-2); }
.senha-olho[aria-pressed="true"] { color: var(--gold); }
.senha-olho svg { width: 22px; height: 22px; }
select.inline { width: auto; padding: 6px 8px; font-size: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); font-weight: 600;
}
.btn:hover { border-color: #3a4153; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #1d1606; }
.btn.primary:hover { background: var(--gold-2); }
.btn.danger { background: #3a1d1b; border-color: #5a2a26; color: #ffb4aa; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.block { width: 100%; margin-top: 14px; }
.btn:disabled { opacity: .5; cursor: default; }

.tabs { display: flex; gap: 4px; background: var(--panel); padding: 4px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 12px; }
.tabs button { flex: 1; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--dim); font-weight: 600; }
.tabs button.on { background: var(--panel-2); color: var(--txt); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 7px 12px; color: var(--dim); font-weight: 600; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--gold); color: #1d1606; }

.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick button { padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: #0c0e14; text-align: left; }
.pick button.on { border-color: var(--gold); color: var(--gold-2); }
.pick small { display: block; color: var(--dim); font-weight: 400; font-size: 12px; }

/* ---- barras ---- */
.bar { position: relative; height: 16px; border-radius: 5px; background: #0c0e14; border: 1px solid var(--line); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .5s; }
.bar > span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 14px; font-weight: 600; text-shadow: 0 1px 2px #000; }
.bar.hp > i { background: var(--hp); }
.bar.mana > i { background: var(--mana); }
.bar.xp > i { background: var(--xp); }
.bar.mob { height: 10px; }
.bar.mob > i { background: var(--hp); }

/* ---- topo do jogo ---- */
.hud { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0 10px; margin-bottom: 4px; }
.hud .who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.hud .who b { font-size: 17px; }
.hud .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hud .bars .xp { grid-column: 1 / -1; }
.hud .stats { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--dim); flex-wrap: wrap; }
.hud .stats b { color: var(--txt); font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.badge.live { background: #173a22; color: var(--ok); }
.badge.off { background: #262a36; color: var(--dim); }
.badge.warn { background: #3d2b12; color: var(--gold-2); }
.badge.err { background: #3a1d1b; color: #ffb4aa; }

/* ---- navegacao de baixo (celular) ---- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex;
  background: rgba(15, 17, 23, .96); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(6px);
}
.nav button { flex: 1; border: 0; background: transparent; color: var(--dim); padding: 10px 4px 12px; font-size: 12px; font-weight: 600; }
.nav button .ic { display: block; font-size: 20px; line-height: 1.1; }
.nav button.on { color: var(--gold-2); }

/* ---- cacada ---- */
.mobs { display: grid; gap: 8px; }
.mob { display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: #12151d; border: 1px solid var(--line); }
.mob.target { border-color: var(--gold); }
.mob .n { font-weight: 600; }
.mob .n small { color: var(--dim); font-weight: 400; }
.log { font: 12.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #c9ccd4; max-height: 260px; overflow: auto; }
.log div { padding: 1px 0; border-bottom: 1px dashed #1f2330; }
.hunts { display: grid; gap: 8px; }
.hunt { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px; border-radius: 8px; background: #12151d; border: 1px solid var(--line); }
.hunt.rec { border-color: #4a3c1d; }
.hunt .name { font-weight: 700; }
.hunt .meta { color: var(--dim); font-size: 13px; }
/* lista "Escolha seu personagem" (como no Huntera): a roupa andando, "Online ha...", Jogar e Excluir */
.hunt.pchar { grid-template-columns: 64px 1fr auto; gap: 10px; padding: 8px 10px 8px 6px; }
.hunt.pchar + .hunt.pchar { margin-top: 8px; }
.pc-pic { width: 64px; height: 64px; display: grid; place-items: center; }
.pc-pic canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.pc-info { min-width: 0; }
.pc-info .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-visto { margin-top: 2px; font-size: 12px; color: #8f95a6; }
.pc-visto.on { color: #7fd38a; }
.pc-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.pc-excluir { padding: 2px 6px; border: 0; background: none; color: #c98a84; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pc-excluir:hover { color: #ffb4aa; }
.pc-renomear { padding: 2px 6px; border: 0; background: none; color: #b9a77e; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pc-renomear:hover { color: var(--gold-2); }
/* Renomear: o pergaminho da conta (ou comprar um), o nome novo conferido enquanto digita e a confirmacao */
.pd .pd-olho { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pd input.pd-nome { text-transform: none; letter-spacing: 0; }
.pd-scroll { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #12151d; border: 1px solid var(--line); }
.pd .pd-scroll p { margin: 0 0 6px; }
.pd .pd-scroll p:last-child { margin: 0; }
.pd p.pd-scroll { padding: 8px 10px; }
.pd .pd-scroll.tem { color: var(--gold-2); border-color: #4a3c1d; }
.pd .pd-msg { min-height: 1.45em; margin: 6px 0 0; font-size: 12.5px; color: var(--dim); }
.pd .pd-msg.ok { color: var(--ok); }
.pd .pd-msg.erro, .pd .pd-err { color: #ff9d92; }
.pd .pd-err { margin: 8px 0 0; font-size: 13px; }
.pd .pd-conf { font-size: 14.5px; }
/* dialogo da lista: excluir (digitar DELETAR) e criar */
.pd-bg { position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 10, .72); display: grid; place-items: center; padding: 16px; }
.pd { width: min(420px, 100%); margin: 0; }
.pd p { margin: 0 0 10px; line-height: 1.45; font-size: 13.5px; }
.pd .pd-aviso { color: #ff9d92; font-weight: 700; }
.pd input { width: 100%; text-transform: uppercase; letter-spacing: .08em; }
.pd-b { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpi { background: #12151d; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.kpi span { display: block; font-size: 12px; color: var(--dim); }
.kpi b { font-size: 18px; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }
table.simple { width: 100%; border-collapse: collapse; font-size: 14px; }
table.simple td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.simple td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- barra de regras ---- */
.slots { display: grid; gap: 8px; }
.slot { border: 1px solid var(--line); background: #12151d; border-radius: 8px; padding: 10px; }
.slot.off { opacity: .55; }
.slot .head { display: flex; align-items: center; gap: 8px; }
.slot .num { width: 24px; height: 24px; border-radius: 6px; background: var(--panel-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--dim); flex: none; }
.slot .title { flex: 1; min-width: 0; }
.slot .title b { display: block; }
.slot .title small { color: var(--dim); }
.slot .warnlvl { color: var(--bad); font-weight: 800; margin-left: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12.5px; padding: 3px 8px; border-radius: 99px; background: #1b2030; border: 1px solid var(--line); }
.cond { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto auto; gap: 6px; align-items: center; margin-top: 8px; }
.cond select, .cond input { padding: 7px 8px; font-size: 14px; }
.cond input[type=number] { width: 72px; }
.iconbtn { border: 1px solid var(--line); background: var(--panel-2); border-radius: 7px; padding: 5px 9px; }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #2a2f3e; border-radius: 99px; transition: .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #cfd3dc; transition: .2s; }
.switch input:checked + span { background: var(--gold); }
.switch input:checked + span::after { left: 21px; background: #1d1606; }

.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  background: #232838; border: 1px solid var(--line); padding: 10px 14px; border-radius: 8px; max-width: calc(100% - 32px);
  opacity: 0; pointer-events: none; transition: opacity .25s; font-size: 14px; }
.toast.show { opacity: 1; }
.toast.erro { border-color: #5a2a26; color: #ffb4aa; }
.toast.ok { border-color: #24502e; color: #a8e6b1; }

@media (min-width: 760px) {
  .nav { position: static; background: transparent; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; backdrop-filter: none; }
  .nav button { padding: 10px; font-size: 14px; }
  .nav button .ic { display: inline; font-size: 16px; margin-right: 6px; }
  .app { padding-bottom: 24px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .toast { bottom: 24px; }
  .game-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 12px; align-items: start; }
}
@media (max-width: 420px) {
  .cond { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---- imagens dos itens ---- */
.icon { width: 40px; height: 40px; flex: none; image-rendering: pixelated; }
.icon.big { width: 56px; height: 56px; }
.hunt.shopitem { grid-template-columns: 56px 1fr auto; }
.gear { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.gearslot { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #12151d; min-width: 0; }
.gearslot > div { min-width: 0; font-size: 14px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.filters select, .filters input { padding: 8px 10px; font-size: 14px; }
@media (min-width: 760px) { .filters { grid-template-columns: 2fr 1fr 1fr 1fr; } .gear { grid-template-columns: repeat(4, 1fr); } }

/* ---- tela do jogo ---- */
.gvwrap { width: 100%; margin: 0 0 10px; border-radius: 8px; overflow: hidden; background: #07080b; border: 1px solid var(--line); display: flex; justify-content: center; }
canvas.gameview { display: block; image-rendering: pixelated; }

/* ======================================================================
   tela do jogo no formato do Huntera: mapa em tela cheia, barra de cima,
   dock de baixo, janelas flutuantes e janelas grandes (modais)
   ====================================================================== */
.app.game-on { max-width: none; padding: 0; }
.app.game-on ~ .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
.g { position: fixed; inset: 0; overflow: hidden; background: #07080b; font-size: 14px; }
.g-world { position: absolute; inset: 0; }
.g-world canvas.gameview { position: absolute; inset: 0; }
:where(.g button) { border: 0; background: none; color: inherit; }

/* ---- barra de cima ---- */
.g-top {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 8;
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: linear-gradient(#0d1019f2, #0a0c14e6); border-bottom: 1px solid #2a3044;
}
.g-logo { height: 34px; width: auto; filter: drop-shadow(0 2px 6px #000); }
.g-who { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.g-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.g-who small { color: var(--dim); font-size: 11.5px; }
/* 2a linha: vocacao e level, com a taxa de exp ao lado (sem empurrar o nome para fora da barra) */
.g-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }
.g-sub small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-pill { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #121624; border: 1px solid #2a3044; font-size: 13px; }
.g-pill b { font-variant-numeric: tabular-nums; }
.coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #c08a1e); box-shadow: 0 0 0 1px #6b4a0f; }
.g-online i { width: 8px; height: 8px; border-radius: 50%; background: #3ccf6a; box-shadow: 0 0 6px #3ccf6a; animation: vivo 1.6s ease-in-out infinite; }
@keyframes vivo { 0%, 100% { opacity: 1; box-shadow: 0 0 4px #3ccf6a; } 50% { opacity: .45; box-shadow: 0 0 10px 2px #3ccf6a; } }
.g-online span { color: var(--dim); }
.g .g-shop { padding: 6px 14px; border-radius: 6px; font-weight: 700; color: #1d1606; background: linear-gradient(#f0c46a, #c8902e); border: 1px solid #8a611c; }
.g-icons { margin-left: auto; display: flex; gap: 4px; }
.g .g-icons button { width: 36px; height: 36px; border-radius: 6px; font-size: 17px; background: #121624; border: 1px solid #2a3044; display: grid; place-items: center; }
.g .g-icons button:hover { border-color: var(--gold); }

/* ---- faixa (indo ate o portal / replay) e mensagem do centro ---- */
.g-banner {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 9;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  background: #121624f2; border: 1px solid #3a4258; box-shadow: 0 6px 20px #0008; max-width: calc(100% - 20px); flex-wrap: wrap; justify-content: center;
}
.g-banner[hidden], .g-msg[hidden] { display: none; }
.g-banner .rp { width: 140px; height: 6px; border-radius: 3px; background: #262b3c; overflow: hidden; }
.g-banner .rp i { display: block; height: 100%; width: 0; background: #e05a6a; }
.g-msg {
  position: absolute; top: 104px; left: 50%; transform: translateX(-50%); z-index: 9; pointer-events: none;
  padding: 6px 14px; border-radius: 6px; background: #0a0c14d9; border: 1px solid #2a3044;
  color: #fff; font-weight: 600; text-shadow: 0 1px 2px #000; white-space: nowrap;
}

/* ---- janelas flutuantes ---- */
.win {
  position: absolute; z-index: 6; background: #10131df0; border: 1px solid #2c3346; border-radius: 6px;
  box-shadow: 0 8px 24px #0009; font-size: 13px; max-width: calc(100vw - 16px);
}
.win-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: #171b29; border-bottom: 1px solid #2c3346; border-radius: 6px 6px 0 0; cursor: move; user-select: none; touch-action: none; }
.win.min .win-h { border-bottom: 0; border-radius: 6px; }
.win.min { height: auto !important; min-height: 0; }
.win.min .win-b { display: none; }
.win-h b { font-size: 12px; color: #c9cfdd; letter-spacing: .02em; }
.win-h span { display: flex; gap: 2px; }
.g .win-h button { width: 22px; height: 22px; border-radius: 4px; color: var(--dim); font-size: 12px; }
.g .win-h button:hover { background: #262b3c; color: var(--txt); }
.win-b { padding: 8px; max-height: 85vh; overflow: auto; resize: vertical; min-height: 50px; }
.bag-empty { grid-column: 1 / -1; }
.eqgrid { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; justify-content: center; margin-bottom: 8px; }
.eq { position: relative; width: 44px; height: 44px; border-radius: 4px; background: #0a0c13; border: 1px solid #2a3044; display: grid; place-items: center; }
.eq-ic { width: 36px; height: 36px; image-rendering: pixelated; }
.eq-l { font-size: 9px; color: #5c6476; text-align: center; line-height: 1.05; }
.eq em { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.lootlist, .loglist { font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #c9ccd4; }
.lootlist div, .loglist div { padding: 1px 0; border-bottom: 1px dashed #1f2330; }
/* chat: abas, mensagens e campo de escrever */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 4px; }
.chat-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.g .chat-tabs button { padding: 4px 9px; font-size: 12px; color: var(--dim); border-radius: 5px 5px 0 0; position: relative; }
.g .chat-tabs button.on { color: var(--gold-2); background: #1b2030; }
.chat-tabs em { font-style: normal; font-size: 10px; background: #a33; color: #fff; border-radius: 99px; padding: 0 5px; margin-left: 4px; }
.chat-list { flex: 1; overflow-y: auto; min-height: 0; font: 12.5px/1.45 Verdana, system-ui, sans-serif; color: #d6d8de; }
.cm { padding: 1px 0; word-wrap: break-word; }
.cm time { color: #6f7586; font-size: 11px; }
.cm b { color: var(--gold-2); font-weight: 700; }
.cm i { color: #8f95a6; font-style: normal; font-size: 11px; }
.cm.ch-local span { color: #f2e93a; }
.cm.ch-comercio span { color: #9fd3ff; }
.cm.sys { color: #9ee29e; }
.chat-in { display: flex; gap: 6px; margin-right: 14px; } /* o canto de baixo fica livre para esticar/encolher a janela */
#wb-chat { padding-bottom: 10px; }
.chat-in input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }
.chat-in .btn { padding: 6px 10px; }
.kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.kv span { display: block; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .03em; }
.kv b { font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---- dock de baixo ---- */
.g-bottom { position: absolute; left: 50%; bottom: calc(6px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100vw - 12px); }
.g-ctx { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.g .cb { padding: 7px 14px; border-radius: 6px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; background: #151a29ee; border: 1px solid #3a4258; color: #e9e2cf; box-shadow: 0 3px 10px #0007; }
.g .cb:hover { border-color: var(--gold); }
.g .cb.gold { background: linear-gradient(#f0c46a, #c8902e); color: #1d1606; border-color: #8a611c; }
.g .cb.danger { color: #ffb4aa; border-color: #6a2e2a; }
.g .cb.danger.on { background: #5a1f1c; color: #fff; }
.g-dock { display: flex; align-items: stretch; gap: 10px; padding: 8px 10px; background: #0d1019f0; border: 1px solid #2a3044; border-radius: 8px; box-shadow: 0 8px 24px #0009; }
.g-vitals { width: 210px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.v { position: relative; height: 15px; border-radius: 3px; background: #07080d; border: 1px solid #2a3044; overflow: hidden; }
.v > i { position: absolute; inset: 0 auto 0 0; transition: width .4s; }
.v > span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.v.hp > i { background: linear-gradient(#e2584f, #a8312b); }
.v.mana > i { background: linear-gradient(#5b8fe8, #2f5fb8); }
.v-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.v-row .lv { font-weight: 700; color: var(--gold-2); }
.v.xp { flex: 1; height: 7px; }
.v.xp > i { background: var(--xp); }
.v-row .stam { color: var(--dim); white-space: nowrap; }
.g-actions { display: grid; grid-template-columns: repeat(10, 34px); grid-auto-rows: 34px; gap: 3px; }
.g .as { position: relative; border-radius: 4px; background: #0a0c13; border: 1px solid #2a3044; display: grid; place-items: center; color: var(--dim); font-size: 14px; overflow: hidden; padding: 0; }
.g .as:hover { border-color: var(--gold); }
.g .as.off { opacity: .4; }
.g .as.empty { color: #3c4357; }
/* icone ocupando o slot: magia preenche o quadrado; item (pocao, runa) ampliado e centralizado */
.g .as, .g .g-icons button, .g .acho, .g .eq, .g .bi { padding: 0; }
.as-ic { image-rendering: pixelated; display: block; }
.as-ic.sp { width: 100%; height: 100%; border-radius: 3px; }
.as-ic.it { width: 100%; height: 100%; flex: none; } /* 64x64 desenhado em 32x32: pixel inteiro, sem esticar */
.acho-ic.it { width: 40px; height: 40px; margin: 0; } /* itens e magias no mesmo quadro, sem esticar */
.ac-big.it { width: 64px; height: 64px; margin: 0; border: 0; }
.as-t { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.as-t.k-heal { color: #7fe08a; }
.as-t.k-attack { color: #ff9a7a; }
.as-t.k-area { color: #ffcf5a; }
.as-t.k-shield, .as-t.k-haste { color: #8fc3ff; }
.g .as em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 7.5px; font-weight: 800; color: #ffe08a; background: #000a; line-height: 9px; }
.g-ctrl { width: 200px; display: flex; flex-direction: column; gap: 6px; justify-content: center; font-size: 11px; }
.c-row { display: flex; align-items: center; gap: 6px; }
.c-row > span { width: 46px; color: var(--dim); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.g-ctrl select { padding: 4px 6px; font-size: 12px; border-radius: 4px; background: #0a0c13; }
.c-st { display: flex; gap: 2px; }
.g .c-st button { width: 26px; height: 24px; border-radius: 4px; background: #0a0c13; border: 1px solid #2a3044; font-size: 12px; }
.g .c-st button.on { border-color: var(--gold); background: #2a2210; }
.c-dist { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.g .c-dist button { width: 22px; height: 24px; border-radius: 4px; background: #0a0c13; border: 1px solid #2a3044; font-weight: 700; }
.c-dist b { width: 18px; text-align: center; }

/* ---- janelas grandes ---- */
.modal-bg { position: fixed; inset: 0; z-index: 20; background: #0009; }
.modal {
  position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 16px)); max-height: calc(100vh - 80px); display: flex; flex-direction: column;
  background: #10131d; border: 1px solid #3a4258; border-radius: 8px; box-shadow: 0 20px 60px #000c;
}
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #2c3346; background: #151a29; border-radius: 8px 8px 0 0; }
.modal-h b { color: var(--gold-2); }
.g .modal-h button { width: 28px; height: 28px; border-radius: 5px; color: var(--dim); }
.g .modal-h button:hover { background: #262b3c; color: var(--txt); }
.modal-b { padding: 14px; overflow: auto; }
.modal .card { background: #141826; }
.g .modal .btn { border: 1px solid var(--line); background: var(--panel-2); }
.g .modal .btn.primary { background: var(--gold); border-color: var(--gold); color: #1d1606; }
.g .modal .seg { border: 1px solid var(--line); }
.g .modal .seg button { padding: 7px 12px; color: var(--dim); }
.g .modal .seg button + button { border-left: 1px solid var(--line); }
.g .modal .seg button.on { background: var(--gold); color: #1d1606; }
.g .modal .iconbtn { border: 1px solid var(--line); background: var(--panel-2); }
.huntgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 10px; }
.g .hcard { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; }
.g .hcard:hover { border-color: var(--gold); }
.g .hcard.rec { border-color: #5a4720; }
.g .hcard.danger b { color: #ffb4aa; }
.hcard .badge { align-self: flex-start; margin-top: 2px; }
.mlist { display: flex; flex-wrap: wrap; gap: 6px; }
.modal.death { width: min(460px, calc(100vw - 16px)); border-color: #6a2e2a; }
/* escolha da vocacao (level 8) */
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g .vcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border: 1px solid #2c3346; border-radius: 10px; background: #121624; text-align: center; }
.g .vcard.on { border-color: var(--gold); background: #1d1a12; box-shadow: 0 0 0 1px var(--gold) inset; }
.vcard canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.vc-t { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--gold-2); }
.vc-ic { width: 28px; height: 28px; image-rendering: pixelated; }
.vcard p { margin: 0; font-size: 12.5px; color: #b9bdc8; min-height: 48px; }
.vc-g { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; }
.vc-g span { padding: 2px 6px; border-radius: 99px; background: #1b2030; border: 1px solid #2c3346; }
.vc-kit { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
/* arma inicial (tutorial) */
.vgrid.g3 { grid-template-columns: repeat(3, 1fr); }
.vc-big { width: 64px; height: 64px; image-rendering: pixelated; }
.vc-path { font-size: 11.5px; color: var(--gold-2); }
/* arma do 2o personagem da conta (sem tutorial): seis opcoes, um clique e ja vai para a mao */
.arma2-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: #c9ccd6; }
.vgrid.arma2 .vcard { cursor: pointer; }
.vgrid.arma2 .vcard:hover { border-color: var(--gold); }
.vgrid.arma2 .vcard p { min-height: 0; }
.arma2-item { font-size: 11.5px; color: #8f95a6; }
/* tutorial: balao perto do botao e o botao piscando em dourado */
.tut-box { position: fixed; z-index: 60; width: min(300px, calc(100vw - 16px)); padding: 12px 14px; border-radius: 10px;
  background: #171a26; border: 1px solid var(--gold); box-shadow: 0 10px 30px #000c, 0 0 0 1px #000 inset; color: #e8e2d0; font-size: 13.5px; }
.tut-box b { color: var(--gold-2); font-size: 15px; }
.tut-box p { margin: 4px 0 10px; line-height: 1.45; }
.tut-n { float: right; font-size: 11px; color: #8f95a6; }
.tut-b { display: flex; gap: 8px; justify-content: flex-end; }
.tut-b button { padding: 6px 10px; border-radius: 6px; border: 1px solid #39425a; background: #121624; color: #aab3c8; font-size: 12.5px; cursor: pointer; }
.tut-b button.on { background: var(--gold); border-color: var(--gold); color: #1d1606; font-weight: 700; }
.tut-hl { position: relative; z-index: 59; outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 6px; animation: tutpulse 1.2s ease-in-out infinite; }
@keyframes tutpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 196, 106, .55); } 50% { box-shadow: 0 0 0 8px rgba(240, 196, 106, 0); } }
.g button.bi { padding: 0; }
.g button.bi.veste { border-color: #5a7bd8; cursor: pointer; }
@media (max-width: 760px) { .vgrid { grid-template-columns: 1fr 1fr; } }
/* janela do personagem: Personagem / Outfit / Mortes */
.modal.pers { width: min(980px, calc(100vw - 16px)); }
.ptabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.g .ptabs button { padding: 9px; border: 1px solid #39425a; border-radius: 6px; background: #151a29; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; color: #aab3c8; }
.g .ptabs button.on { border-color: #5a7bd8; color: #e6ecff; background: #1b2236; box-shadow: inset 0 0 0 1px #5a7bd855; }
.ficha .f-top { display: grid; grid-template-columns: 136px 1fr 240px; gap: 14px; align-items: center; }
.f-pic { width: 128px; height: 128px; background: #0b0e16; border: 1px solid #2c3346; border-radius: 8px; image-rendering: pixelated; }
.f-main h2 { margin: 0; letter-spacing: .06em; }
.f-sub { color: #7fa3ff; font-size: 13px; margin: 2px 0 10px; }
.f-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; margin: 5px 0; }
.f-row b { text-align: right; }
.fbar { height: 10px; background: #0b0e16; border: 1px solid #2c3346; border-radius: 5px; overflow: hidden; }
.fbar i { display: block; height: 100%; }
.fbar.hp i { background: #c74848; } .fbar.mana i { background: #4a7fd8; } .fbar.xp i { background: #9a5ed8; }
.f-side { border: 1px solid #2c3346; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.f-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-cols h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
table.skills { width: 100%; font-size: 13px; border-collapse: collapse; }
table.skills th { text-align: left; color: #6f7586; font-weight: 400; font-size: 11.5px; }
table.skills td { padding: 3px 4px; }
.sprog { display: flex; gap: 2px; }
.sprog i { width: 11px; height: 8px; background: #1d2333; border-radius: 1px; }
.sprog i.on { background: #6cc04a; }
.outfit { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 1fr auto; gap: 12px; min-height: 480px; }
.o-left { display: flex; flex-direction: column; gap: 6px; }
.ochk { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #2c3346; border-radius: 6px; font-size: 13px; background: #121624; }
.ochk em { margin-left: auto; font-style: normal; color: var(--gold-2); font-size: 11.5px; }
.ochk.off { opacity: .5; }
.o-prev { position: relative; height: 200px; border: 1px solid #2c3346; border-radius: 8px; background: radial-gradient(#2a3350, #121624); display: grid; place-items: center; }
.o-prev canvas { image-rendering: pixelated; }
.g .o-rot { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border: 1px solid #3a4258; border-radius: 6px; background: #151a29; }
.o-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.g .o-parts button, .g .o-sub button { padding: 6px; border: 1px solid #2c3346; border-radius: 6px; background: #121624; font-size: 12.5px; }
.g .o-parts button.on, .g .o-sub button.on { border-color: #5a7bd8; color: #e6ecff; }
.o-pal { display: grid; grid-template-columns: repeat(19, 1fr); gap: 1px; }
.g .pal { aspect-ratio: 1; border: 1px solid #0006; padding: 0; border-radius: 1px; }
.g .pal.on { outline: 2px solid #fff; z-index: 1; }
.o-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.o-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.o-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; overflow-y: auto; max-height: 52vh; padding-right: 4px; }
.g .ocard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid #2c3346; border-radius: 8px; background: #121624; }
.g .ocard.on { border-color: #8aa6ff; background: #1b2236; }
.g .ocard.lock canvas { filter: grayscale(.6) brightness(.75); }
.ocard canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.ocard b { font-size: 12px; font-weight: 500; }
.ocard em { font-style: normal; font-size: 11px; color: var(--gold-2); }
.ocard .apé { height: 72px; display: grid; place-items: center; color: #8f95a6; }
.o-foot { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid #2c3346; padding-top: 10px; }
.o-foot .grow { flex: 1; }
/* Addon 3: a aura (dourada, vermelha, branca) — liga/desliga e as cores que o personagem tem */
.o-aura { display: flex; flex-direction: column; gap: 5px; }
.o-aura.off .ochk { opacity: .6; }
.o-acores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.g .o-acor { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; border: 1px solid #2c3346; border-radius: 6px; background: #121624; font-size: 12px; }
.g .o-acor.on { border-color: #8aa6ff; background: #1b2236; color: #e6ecff; }
.o-acor i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.o-acor.a1 i { background: radial-gradient(#fffbd8 20%, #ffc424 60%, #965600); box-shadow: 0 0 6px #ffc42499; }
.o-acor.a2 i { background: radial-gradient(#ffe8be 20%, #ff3a16 60%, #780600); box-shadow: 0 0 6px #ff3a1699; }
.o-acor.a3 i { background: radial-gradient(#fff 25%, #cde8ff 60%, #4678d7); box-shadow: 0 0 6px #cde8ffaa; }
.o-adica { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.35; }
.mortes table { width: 100%; }
.mortes em.pk { color: #ff8a8a; font-style: normal; font-size: 12px; }
@media (max-width: 760px) {
  .ficha .f-top, .f-cols, .outfit { grid-template-columns: 1fr; }
  .o-grid { max-height: none; }
}
.death-h { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .12em; color: #ff8a80; text-transform: uppercase; margin: 4px 0 6px; }
.death-h span { color: #e05a6a; }
.center { text-align: center; margin: 4px 0; }
.death-log { max-height: 180px; overflow: auto; background: #0a0c13; border: 1px solid #2a3044; border-radius: 6px; padding: 6px 8px; }

/* ---- icones (itens do Tibia) ---- */
.ti { width: 30px; height: 30px; image-rendering: pixelated; }
.ti-s { width: 20px; height: 20px; image-rendering: pixelated; }
.ti-xs { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -4px; }
.g .g-icons button .ti { filter: drop-shadow(0 1px 1px #000); }
.g .c-st button { display: grid; place-items: center; }
.v-row .stam { display: inline-flex; align-items: center; gap: 2px; }
.cbn { font-style: normal; display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #d8a64a; color: #1d1606; font-size: 11px; line-height: 16px; }

/* ---- mochila ---- */
.bagh { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 4px; font-size: 12px; font-weight: 700; color: #c9cfdd; }
.baggrid { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 3px; margin-bottom: 6px; }
.bi { position: relative; width: 36px; height: 36px; border-radius: 4px; background: #0a0c13; border: 1px solid #3a3420; display: grid; place-items: center; }
.bi.keep { border-color: #2a3044; opacity: .55; }
.bi-ic { width: 32px; height: 32px; image-rendering: pixelated; }
.bi em { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.v.capb { height: 14px; margin-bottom: 8px; }
.v.capb > i { background: linear-gradient(#7aa35a, #4f7a36); }

/* ---- Venda rapida / Despachar loot ---- */
.vlist { display: grid; gap: 4px; max-height: 46vh; overflow: auto; }
.g .vrow { display: grid; grid-template-columns: 36px 1fr auto 22px; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; border-radius: 6px; background: #121624; border: 1px solid #2c3346; opacity: .6; }
.g .vrow.on { opacity: 1; border-color: #6b5626; background: #19160e; }
.vr-ic { width: 32px; height: 32px; image-rendering: pixelated; }
.vn b { display: block; font-size: 13.5px; }
.vn small { color: var(--dim); }
.vt { font-variant-numeric: tabular-nums; font-weight: 700; }
.vc { color: var(--gold-2); font-weight: 800; text-align: center; }
.vfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #2c3346; }
.kv b.lock { color: #5c6476; }
.g .btn.prem { background: linear-gradient(#f0c46a, #c8902e); border: 1px solid #8a611c; color: #1d1606; }

/* ---- catalogo de cacadas (como no Huntera) ---- */
.htabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.g .htabs button { padding: 9px 6px; border-radius: 5px; background: linear-gradient(#1a1f2e, #121624); border: 1px solid #3a4258; color: #c9cfdd; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.g .htabs button.on { border-color: var(--gold); color: var(--gold-2); box-shadow: inset 0 0 0 1px #6b5626; }
.hsub { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.g .hsub button { padding: 6px 12px; border-radius: 5px; color: var(--dim); font-weight: 600; font-size: 13px; }
.g .hsub button.on { background: #1d2333; color: var(--txt); border: 1px solid #3a4258; }
.hsearch { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hsearch input { flex: 1; padding: 8px 10px; font-size: 14px; }
.hsearch select { width: auto; padding: 8px; font-size: 14px; }
.hsearch .muted { white-space: nowrap; }
.huntgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 6px; }
.g .hcard2 { display: flex; flex-direction: column; text-align: left; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; overflow: hidden; }
.g .hcard2:hover { border-color: var(--gold); }
.hc-top { display: flex; gap: 10px; align-items: center; padding: 10px; }
.hc-pic { width: 56px; height: 56px; flex: none; border-radius: 6px; background: #0a0c13; border: 1px solid #2a3044; image-rendering: pixelated; }
.hc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-txt b { font-size: 14px; line-height: 1.2; }
.hc-txt small { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hc-star { align-self: flex-start; font-size: 16px; color: #5c6476; padding: 0 2px; cursor: pointer; }
.hc-star.on { color: var(--gold-2); }
.hc-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 10px; background: #10131d; border-top: 1px solid #232838; font-size: 11.5px; color: #aeb5c4; }
.hc-foot i { color: #6b7385; }
.hc-lv { font-weight: 700; color: #8fc163; }
.hc-lv.danger, .g .hcard2.danger .hc-txt b { color: #ffb4aa; }
.soon { text-align: center; padding: 40px 16px; }
.soon b { font-size: 18px; color: var(--gold-2); }
.soon p { color: var(--dim); max-width: 520px; margin: 8px auto 12px; }
.mchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 6px; background: #151a29; border: 1px solid #2c3346; font-size: 13px; }
.mc-pic { width: 40px; height: 40px; border-radius: 4px; background: #0a0c13; image-rendering: pixelated; }

/* ---- Configurar acao ---- */
.ac-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.g .ac-tabs button { padding: 8px; border-radius: 5px; background: #151a29; border: 1px solid #2c3346; color: #c9cfdd; font-weight: 700; }
.g .ac-tabs button.on { border-color: var(--gold); color: var(--gold-2); }
.ac-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.ac-left { max-height: 330px; overflow: auto; padding-right: 4px; }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.g .acho { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 6px; background: #121624; border: 1px solid #2c3346; font-size: 11.5px; text-align: center; line-height: 1.15; }
.g .acho:hover { border-color: #6b5626; }
.g .acho.on { border-color: var(--gold); background: #1d1a10; }
.g .acho.locked { opacity: .45; }
.acho-ic { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 4px; }
.acho-t { width: 40px; height: 40px; display: grid; place-items: center; font-weight: 800; color: var(--dim); }
.g .acho em { position: absolute; top: 4px; right: 5px; font-style: normal; font-size: 10px; font-weight: 800; color: #ffb4aa; }
.g .acho em.gp { color: #ffe08a; }
.ac-det { background: #121624; border: 1px solid #2c3346; border-radius: 6px; padding: 10px 12px; }
.ac-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ac-head b { display: block; font-size: 15px; color: var(--gold-2); }
.ac-head small { color: var(--dim); font-style: italic; }
.ac-big { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 6px; border: 1px solid #3a4258; }
.warnline { color: #ffb4aa; }
.ac-conds { margin-top: 12px; padding-top: 10px; border-top: 1px solid #2c3346; }
.ac-cond { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto auto auto; gap: 6px; align-items: center; margin-top: 8px; }
.ac-cond select { padding: 6px; font-size: 13px; }
.ac-step { display: inline-flex; align-items: center; gap: 2px; }
.g .ac-step button { width: 26px; height: 30px; border-radius: 4px; background: #0a0c13; border: 1px solid #2a3044; font-weight: 800; }
.ac-step input[type=number] { width: 56px; padding: 6px; font-size: 13px; text-align: center; }
.ac-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.g .as .as-warn { position: absolute; top: -2px; right: 1px; color: #ff4d4d; font-size: 14px; font-weight: 900; text-shadow: 0 1px 2px #000; }
@media (max-width: 759px) {
  .ac-main { grid-template-columns: 1fr; }
  .ac-cond { grid-template-columns: 1fr 1fr; }
  .htabs { grid-template-columns: repeat(5, auto); overflow-x: auto; }
}

/* ---- celular: mapa atras, janelas embaixo da barra de cima, dock na largura toda ---- */
@media (max-width: 759px) {
  .g-top { height: 44px; gap: 6px; padding: 0 6px; }
  .g-logo, .hide-m, .g-pill:not(.g-online) { display: none; }
  .g-who b, .g-who small { max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g .g-shop { padding: 5px 8px; }
  /* os icones de cima viram o menu (fim do arquivo); as janelas arrastam para cima e para baixo (fim do arquivo) */
  .g-bottom { left: 0; right: 0; transform: none; max-width: none; padding: 0 4px; }
  .g-dock { width: 100%; flex-wrap: wrap; gap: 6px; padding: 6px; }
  .g-vitals, .g-ctrl { width: 100%; }
  .g-ctrl { flex-direction: row; justify-content: space-between; }
  .g-actions { width: 100%; grid-template-columns: repeat(10, 1fr); grid-auto-rows: auto; }
  .g .as { aspect-ratio: 1; }
  .as-ic { width: 80%; height: 80%; }
  .g-banner { top: 50px; }
  .g-msg { top: 92px; white-space: normal; text-align: center; }
  .app.game-on ~ .toast { bottom: calc(230px + env(safe-area-inset-bottom)); }
  /* botoes de baixo (Cacar, Venda rapida, Leilao...) menores, numa linha so que rola para o lado */
  .g-ctx { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 4px; padding: 0 4px; scrollbar-width: none; }
  .g-ctx::-webkit-scrollbar { display: none; }
  .g-ctx { align-self: stretch; max-width: 100%; } /* a linha tem a largura da tela: com botao a mais, rola (centralizada, cortava o Cacar) */
  .g .cb { flex: none; padding: 4px 8px; font-size: 10px; letter-spacing: .02em; border-radius: 5px; box-shadow: 0 2px 6px #0007; }
  .g .cb .ti-xs { width: 14px; height: 14px; }
  .g .cb .cbn { font-size: 9px; }
  /* topo: nome e a taxa de exp cabem na barra de 44px (a vocacao aparece na janela do personagem) */
  .g-who small { display: none; }
}

/* "Como voce quer cacar?" (como no Huntera) */
.hchoose { text-align: center; padding: 10px 6px 18px; }
.hchoose h2 { margin: 6px 0 4px; font-size: 22px; color: #e6ecff; }
.hc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; text-align: left; }
.g .hc-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid #2c3346; border-radius: 10px; background: #161b2b; min-height: 270px; }
.g .hc-card:hover { border-color: #5a7bd8; background: #1a2033; }
.hc-ic { width: 82px; height: 82px; align-self: center; display: grid; place-items: center; border: 1px solid #2c3346; border-radius: 8px; background: #0d1018; margin-bottom: 10px; }
.hc-img { width: 64px; height: 64px; image-rendering: pixelated; }
.hc-card b { font-size: 18px; color: #e6ecff; }
.hc-card span { color: #9aa3b8; font-size: 13.5px; line-height: 1.5; flex: 1; }
.hc-card em { font-style: normal; display: flex; justify-content: space-between; border-top: 1px solid #2c3346; padding-top: 12px; color: #8fb0ff; font-weight: 600; }
.hsub .hsep { width: 1px; align-self: stretch; background: #2c3346; margin: 0 6px; }
@media (max-width: 760px) { .hc-cards { grid-template-columns: 1fr; } }

/* inventario: silhueta escura no espaco vazio */
.eq-ic.eq-sil { width: 24px; height: 24px; filter: grayscale(1) contrast(0) brightness(1.6); opacity: .22; }
/* fechou a janela: o icone dela no topo pisca para mostrar onde reabrir */
.g-icons button.reabre { animation: reabre 1s ease-in-out 3; border-radius: 6px; }
@keyframes reabre { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 196, 106, 0); } 50% { box-shadow: 0 0 0 3px rgba(240, 196, 106, .9); } }

/* tela de carregamento: carregando.css. Chegada: o mapa clareia de leve e o personagem aparece no raio de luz */
#gvWrap.chega canvas.gameview { animation: chega 1s cubic-bezier(.2, .7, .2, 1); }
@keyframes chega { 0% { transform: scale(1.06); filter: blur(5px) brightness(1.6); } 60% { filter: blur(0) brightness(1.1); } 100% { transform: scale(1); filter: none; } }
@media (prefers-reduced-motion: reduce) { #gvWrap.chega canvas.gameview { animation: none; } }

/* aviso geral (atualizacao do servidor): faixa fixa no topo */
.aviso { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 8000; display: flex; gap: 10px; align-items: center;
  max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 8px; background: rgba(60, 12, 8, .94); border: 1px solid #e0603a;
  color: #ffe6c9; font: 700 14px/1.3 Verdana, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); }
.aviso b { color: #ffb347; }

/* taxa de experiencia no topo (como no Huntera): soma em ambar; o detalhamento abre ao passar o mouse */
.g-xp { position: relative; flex: none; margin: 0; padding: 0 5px; line-height: 14px; border-radius: 4px; border: 1px solid #5a4a2a; background: #1a1610; color: #cdb98a;
  font: 700 9px/14px Verdana, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; text-align: left; width: max-content; }
.g-xp > b { color: #e0af68; }
.g-xp .xpc { display: none; }
.g-xp:hover, .g-xp:focus-visible { border-color: #e0af68; }
.g-xpcard { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: 270px; padding: 8px 10px; border-radius: 6px;
  background: #11141d; border: 1px solid #2f3650; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); text-transform: none; letter-spacing: 0; font: 12px/1.5 Verdana, sans-serif; color: #c9cfdc; }
.g-xp:hover .g-xpcard, .g-xp:focus-visible .g-xpcard { display: block; }
.g-xpcard .xpl { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.g-xpcard .xpl i { width: 14px; text-align: center; font-style: normal; color: #e0af68; }
.g-xpcard .xpl b { margin-left: auto; color: #e0af68; }
.g-xpcard .xpt { display: flex; margin-top: 6px; padding-top: 6px; border-top: 1px solid #2f3650; font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; }
.g-xpcard .xpt span { flex: 1; min-width: 0; }
.g-xpcard .xpt b { flex: none; margin-left: auto; padding-left: 8px; white-space: nowrap; color: #e0af68; font-size: 13px; }
.g-xpcard small { display: block; color: #7d869c; font-size: 10.5px; }

/* gold do inventario como no Huntera: valor a direita com a pilha de moedas na frente */
.inv-gold { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 13px; }
.inv-gold b { color: #e0af68; font-variant-numeric: tabular-nums; }
.inv-gold .gp-ic { width: 22px; height: 22px; }

/* celular: a taxa de exp vira "XP +141%" embaixo do nome, sem passar por cima do gold */
@media (max-width: 759px) {
  .g-who { flex: none; width: 78px; }
  .g-who b { max-width: 78px; }
  .g-sub { margin-top: 1px; }
  .g-xp { padding: 0 4px; font-size: 8.5px; line-height: 13px; }
  .g-xp .xpn { display: none; }
  .g-xp .xpc { display: inline; }
  .g-xpcard { width: min(270px, calc(100vw - 16px)); }
}

/* mochila cheia: a barra do peso fica vermelha e uma luz vermelha da volta na borda da janela do inventario */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.v.capb > i { transition: width .4s ease, background .4s ease; }
.v.capb.cheia > i { animation: pesoPisca 1s ease-in-out infinite; }
@keyframes pesoPisca { 50% { filter: brightness(1.45); } }
.win.cheia { border-color: #8a2222; animation: bordaPisca 1.2s ease-in-out infinite; }
.win.cheia::before { content: ''; position: absolute; inset: -3px; border-radius: 9px; padding: 3px; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 6px #ff2d2d);
  background: conic-gradient(from var(--giro), transparent 0 52%, #ff2d2d 70%, #fff0f0 79%, #ff2d2d 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giraLuz 1.8s linear infinite; }
@keyframes giraLuz { to { --giro: 360deg; } }
@keyframes bordaPisca { 0%, 100% { box-shadow: 0 8px 24px #0009, 0 0 0 1px #ff2d2d33, 0 0 10px #ff2d2d22; } 50% { box-shadow: 0 8px 24px #0009, 0 0 0 1px #ff2d2d99, 0 0 22px #ff2d2d66; } }
@media (prefers-reduced-motion: reduce) { .win.cheia::before, .win.cheia, .v.capb.cheia > i { animation: none; } }

/* subiu de level: dourado no meio da tela, raios girando atras, entra crescendo e sai subindo */
.lvup { position: fixed; left: 50%; top: 24%; z-index: 40; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  display: grid; place-items: center; width: 340px; height: 200px; animation: lvupEntra .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.lvup.sai { animation: lvupSai .8s ease-in forwards; }
.lvup-raios { position: absolute; inset: 0; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(from 0deg, #ffd36b33 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: lvupGira 9s linear infinite; }
.lvup-c { position: relative; text-align: center; padding: 12px 26px 14px; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #3a2c10ee, #14100aee 70%);
  border: 1px solid #c9a24a; box-shadow: 0 0 0 1px #000a, 0 0 28px #ffcf5a55, inset 0 0 18px #ffcf5a22; }
.lvup-c small { display: block; font: 700 12px/1 Verdana, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #ffe39a; text-shadow: 0 0 8px #ffbf3a; }
.lvup-c b { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; font: 800 40px/1.05 Verdana, sans-serif; }
.lvup-de { color: #b9a77a; font-size: 26px; }
.lvup-c b i { font-style: normal; font-size: 20px; color: #e0af68; }
.lvup-para { background: linear-gradient(100deg, #fff1c2 20%, #ffd36b 40%, #fff 50%, #ffd36b 60%, #e0a43a 80%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px #ffbf3a88); animation: lvupBrilho 1.6s linear infinite; }
.lvup-c em { display: block; margin-top: 6px; font: 600 12px/1.3 Verdana, sans-serif; font-style: normal; color: #cfe8a8; }
@keyframes lvupEntra { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lvupSai { to { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes lvupGira { to { transform: rotate(360deg); } }
@keyframes lvupBrilho { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (max-width: 759px) { .lvup { width: 280px; height: 170px; top: 26%; } .lvup-c b { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .lvup, .lvup-raios, .lvup-para { animation: none; } }

/* barra de botoes de baixo no PC: uma linha so (com Blessings e Amigos sao 8 botoes) */
@media (min-width: 760px) {
  .g-ctx { flex-wrap: nowrap; }
  .g .cb { flex: none; padding: 6px 11px; font-size: 11.5px; letter-spacing: .03em; }
}
@media (min-width: 760px) and (max-width: 1150px) {
  .g-ctx { gap: 4px; }
  .g .cb { padding: 5px 8px; font-size: 10.5px; letter-spacing: .02em; }
}

/* icones de cima que mudam: Blessings verde (5 de 5) ou vermelho (falta) com N/5; Treino dourado; musica */
.g-dyn { display: contents; }
.g .g-icons button.g-bless { position: relative; }
.g .g-icons button.g-bless.ok { border-color: #3c7a46; background: #13241a; box-shadow: inset 0 0 8px #3c7a4655; }
.g .g-icons button.g-bless.falta { border-color: #a33a32; background: #2a1414; box-shadow: inset 0 0 8px #ff4a3a44; animation: blessPisca 1.6s ease-in-out infinite; }
.g .g-icons button.g-bless em { position: absolute; right: -3px; bottom: -4px; font: 700 9px/1 Verdana, sans-serif; font-style: normal; color: #fff; background: #b8322a; border-radius: 6px; padding: 2px 3px; }
@keyframes blessPisca { 50% { box-shadow: inset 0 0 12px #ff4a3a88, 0 0 8px #ff4a3a66; } }
.g .g-icons button.g-treino { border-color: #8a611c; background: #2a2010; box-shadow: inset 0 0 8px #e0af6844; }
.mus { position: relative; display: inline-flex; }
.g .g-icons .mus-b { color: #d9cfae; }
#musPainel { position: fixed; z-index: 8500; }
.mus-p { position: relative; width: 220px; display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px;
  background: #11141d; border: 1px solid #2f3650; box-shadow: 0 8px 24px #0009; font: 12px/1.4 Verdana, sans-serif; color: #c9cfdc; }
.mus-p b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #e0af68; }
.mus-l { display: grid; gap: 4px; }
.mus-l input { width: 100%; accent-color: #e0af68; }
.g .mus-p .mus-m { width: auto; height: auto; padding: 6px 8px; font: 700 11px/1 Verdana, sans-serif; color: #e9e2cf; background: #1b2131; border: 1px solid #3a4258; border-radius: 6px; }
/* musica e efeitos: titulo com a chave liga/desliga (musica.js) */
.mus-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.mus-sep { height: 1px; background: #2f3650; margin: 2px 0; }
.mus-sw { position: relative; width: 34px; height: 18px; flex: none; }
.mus-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mus-sw i { position: absolute; inset: 0; border-radius: 9px; background: #3a4258; transition: background .15s; pointer-events: none; }
.mus-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #e9e2cf; transition: transform .15s; }
.mus-sw input:checked + i { background: #e0af68; }
.mus-sw input:checked + i::after { transform: translateX(16px); }
.mus-sw input:focus-visible + i { outline: 2px solid #e0af68; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .g .g-icons button.g-bless.falta { animation: none; } }


/* busto do personagem no lugar da logo (cabeca e peito da roupa atual); clicar abre a ficha */
.g .g-bust { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 8px; border: 1px solid #5a4a2a; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #2b2f45, #121624 70%); box-shadow: inset 0 0 8px #000a, 0 2px 6px #0008; overflow: hidden; display: grid; place-items: center; }
.g .g-bust:hover, .g .g-bust:focus-visible { border-color: var(--gold); }
.g .g-bust canvas { width: 40px; height: 40px; image-rendering: pixelated; }
@media (max-width: 759px) { .g .g-bust { width: 34px; height: 34px; } .g .g-bust canvas { width: 32px; height: 32px; } }

/* barra de cima em janela estreita: o nome, a vocacao e a taxa de exp nunca encolhem (a taxa ficava escondida
   atras do gold); quem rola para o lado sao os icones da direita. O quadro da musica fica fixo para nao ser cortado */
@media (min-width: 760px) {
  .g-who { flex: none; }
  .g-icons { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .g-icons::-webkit-scrollbar { display: none; }
}

/* ======================================================================
   inventario: ficha do item (como o tooltip do Huntera), acoes do item,
   jogar fora, e no celular o menu de cima, a linha de botoes de baixo e
   as janelas que arrastam para cima e para baixo
   ====================================================================== */
.it-tip { position: fixed; z-index: 70; width: 252px; pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.it-tip[hidden] { display: none; }
.ic { background: #10131c; border: 1px solid #2f3650; border-radius: 8px; padding: 8px 10px; box-shadow: 0 10px 28px #000b; font: 12px/1.45 Verdana, system-ui, sans-serif; color: #c9cfdc; text-align: left; }
.ic-eq { border-color: #262c3e; background: #0d1018; }
.ic-tag { display: block; text-align: center; font: 700 9.5px/1 Verdana, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7d869c; margin: -2px 0 6px; padding-bottom: 5px; border-bottom: 1px solid #262c3e; }
.ic-h { display: flex; align-items: center; gap: 8px; }
.ic-ic { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.ic-h b { color: #8fb0ff; font-size: 13px; flex: 1; min-width: 0; line-height: 1.2; }
.ic-v { font: 800 17px/1 system-ui, sans-serif; flex: none; }
.ic-v.melhor { color: #6fd67a; }
.ic-v.pior { color: #ff6b9a; }
.ic-v.pend { opacity: .45; }
.ic-tipo { display: block; color: #9aa3b8; font-size: 11px; margin: 1px 0 3px 40px; }
.ic-st { list-style: none; margin: 4px 0 0; padding: 0; }
.ic-st li { padding: 1px 0; }
.ic-st li.bn { color: #9be3a6; }
.ic-st li.mal { color: #ff9f94; }
.ic-st li.rq { color: #c9b6ff; }
.ic-st li.rq.falta { color: #ff7b72; font-weight: 700; }
.ic-st li.vinc { color: #ffcf7a; }
.ic-val { list-style: none; margin: 6px 0 0; padding: 5px 0 0; border-top: 1px solid #262c3e; color: #e0af68; }
.ic-val li { display: flex; align-items: center; gap: 6px; }
.ic-val .gp-ic { width: 14px; height: 14px; vertical-align: 0; }
.ic-val .ic-simb { color: var(--dim); font-size: 11px; cursor: help; }
.ic-w { display: block; text-align: right; color: #b8a8e8; font-size: 11px; margin-top: 2px; }
.ic-pode { margin: 6px 0 0; padding: 4px 7px; border-radius: 5px; font-weight: 700; font-size: 11.5px; }
.ic-pode.ok { background: #13241a; color: #9be3a6; border: 1px solid #2e5a36; }
.ic-pode.no { background: #2a1414; color: #ffb4aa; border: 1px solid #6a2e2a; }
.ic-nota { margin: 0; text-align: center; color: #7d869c; font: 11px/1.3 Verdana, sans-serif; }
.ic-dica { display: block; color: #9aa3b8; font: 10.5px/1.35 Verdana, sans-serif; text-align: center; padding: 4px 6px; border-radius: 6px; background: #10131ce6; border: 1px solid #262c3e; }

/* acoes do item: do lado do item no PC, folha de baixo no celular */
.it-sbg { position: fixed; inset: 0; z-index: 64; background: transparent; }
.it-sheetw.m .it-sbg, #itFora .it-sbg { background: #000a; }
.it-sheet { position: fixed; z-index: 65; width: 268px; padding: 8px; background: #0d1019f7; border: 1px solid #3a4258; border-radius: 10px;
  box-shadow: 0 16px 40px #000d; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 70px); }
.it-sc { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; overscroll-behavior: contain; }
.it-sheet .ic { box-shadow: none; }
.it-x { position: absolute; top: -10px; right: -10px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #3a4258; background: #1b2131; color: #c9cfdd; cursor: pointer; font-size: 12px; }
.it-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.it-acts .btn { flex: 1 1 auto; }
.it-sheetw.m .it-sheet { left: 6px; right: 6px; top: auto; bottom: calc(6px + env(safe-area-inset-bottom)); width: auto; max-height: 80vh; }
.it-sheetw.m .it-x { top: -14px; right: 10px; width: 30px; height: 30px; }
.it-sheetw.m .it-acts .btn { padding: 10px; font-size: 14px; }
.it-conf { position: fixed; z-index: 66; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 24px)); padding: 12px 14px;
  background: #11141d; border: 1px solid #8a3a32; border-radius: 10px; box-shadow: 0 16px 40px #000d; color: #e8e2d0; }
.it-conf .ic-h b { color: #ffb4aa; font-size: 15px; }
.it-conf p { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; }
#itFora .it-sbg, #itVenda .it-sbg { z-index: 65; }
#itVenda .it-sbg { background: #000a; }
/* vender da bolsa ou do depot: confirmacao em dourado (o vermelho e do "Destruir") */
#itVenda .it-conf { border-color: #8a6a2a; }
#itVenda .it-conf .ic-h b { color: #f0c674; }
#itVenda .it-conf p.muted { margin-top: -4px; color: #9aa3b5; }

/* itens da bolsa e da mochila: azul = serve, vermelho = nao serve; ponto dourado = vinculado; arrastar para o mapa */
.bi-ic, .eq-ic { pointer-events: none; }
.bi, .eq { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.g button.bi { cursor: pointer; }
.g button.bi.pode { border-color: #3d5fae; }
.g button.bi.nao, .g button.bi.veste.nao { border-color: #7a3030; }
.g button.bi.nao .bi-ic { opacity: .72; }
.g .bi.vinc::after { content: ''; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; border-radius: 2px; background: #e0af68; box-shadow: 0 0 0 1px #000; }
.g .eq[data-iid] { cursor: help; }
/* "⋯" no canto do item: as outras acoes (no PC aparece ao passar o mouse; no celular, segurar o item) */
.g .bi .bi-mais { position: absolute; right: 0; top: -2px; z-index: 1; display: none; padding: 0 3px; border-radius: 3px; font: 800 12px/12px system-ui, sans-serif;
  color: #e9e2cf; background: #1b2131ee; border: 1px solid #3a4258; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .g .bi:hover .bi-mais { display: block; } }
.g .bi .bi-mais:hover { border-color: var(--gold); color: var(--gold-2); }
/* a bolsa protegida (nada dela e vendido nem cai na morte) */
.bagp { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9be3a6; border: 1px solid #2e5a36; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
/* arrastando: onde o item pode cair (outra grade ou o lugar do corpo) */
.baggrid.alvo-drop { outline: 2px dashed #8fb0ff; outline-offset: 2px; border-radius: 4px; }
.g .eq.alvo-drop { border-color: #8fb0ff; box-shadow: 0 0 0 2px #8fb0ff55; }
.ic-st li.dur { color: #8fd3ff; }
body.arrastando #gvWrap { outline: 2px dashed #ff6b6baa; outline-offset: -8px; }
body.arrastando #gvWrap::after { content: 'Solte no mapa para jogar fora'; position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  padding: 6px 12px; border-radius: 6px; background: #2a1414ee; border: 1px solid #8a3a32; color: #ffb4aa; font: 700 12px/1.2 Verdana, sans-serif; }

/* menu de cima (so no celular) e os rotulos curtos (so nas telas estreitas) */
.g .g-menu, .g-dynm, .g-mhead, .cb-s { display: none; }

@media (max-width: 759px) {
  /* barra de cima: busto, nome + taxa de exp, moedas, Loja, quem esta no mundo e o menu (os icones moram nele) */
  .g-top { gap: 5px; padding: 0 5px; }
  .g-pill { padding: 3px 6px; font-size: 12px; gap: 4px; }
  .g-pill .mo { transform: scale(.85); }
  .g .g-shop { padding: 4px 8px; font-size: 12px; }
  .g-online i { width: 6px; height: 6px; }
  .g-online { margin-left: auto; }
  .g-dynm { display: contents; }
  .g .g-dynm button { flex: none; width: 30px; height: 30px; border-radius: 6px; background: #121624; border: 1px solid #2a3044; display: grid; place-items: center; padding: 0; }
  .g .g-dynm .ti { width: 24px; height: 24px; }
  .g .g-menu { flex: none; width: 32px; height: 32px; border-radius: 6px; background: #121624; border: 1px solid #2a3044; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0; }
  .g .g-menu i { display: block; width: 16px; height: 2px; border-radius: 1px; background: #d9cfae; }
  .g-top.menu-on .g-menu { border-color: var(--gold); background: #2a2210; }
  .g-icons { display: none; position: fixed; top: 46px; right: 6px; z-index: 30; width: min(300px, calc(100vw - 12px)); max-height: calc(100vh - 60px); overflow-y: auto; margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; background: #11141df7; border: 1px solid #2f3650; border-radius: 10px; box-shadow: 0 12px 30px #000c; }
  .g-top.menu-on .g-icons { display: grid; }
  .g-icons .g-dyn { display: none; }
  .g-mhead { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: center; padding: 0 2px 6px; border-bottom: 1px solid #2f3650; font-size: 12px; color: #c9cfdd; }
  .g-mhead i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ccf6a; box-shadow: 0 0 6px #3ccf6a; margin-right: 5px; }
  .g-mhead small { color: #7d869c; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
  .g-icons .mus { display: flex; }
  .g .g-icons button { width: 100%; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 15px; padding: 2px; }
  .g .g-icons button::after { content: attr(aria-label); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1.1 system-ui, sans-serif; color: #c9cfdd; }
  .g .g-icons .ti { width: 26px; height: 26px; }

  /* barra de baixo: botoes menores numa linha so (rola para o lado se faltar espaco) */
  .g-ctx { gap: 3px; padding: 0 3px; }
  .g .cb { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; font-size: 9.5px; letter-spacing: 0; border-radius: 5px; }
  .g .g-ctx .cb .ti-xs, .g .g-ctx .cb.bl .ti-xs { width: 13px; height: 13px; }
  .g .cb .cbn, .g .g-ctx .cb.bl em { font-size: 8.5px; line-height: 13px; padding: 0 4px; margin-left: 1px; }

  /* janelas: embaixo da barra de cima, na largura da tela, por cima da barra de baixo; o cabecalho arrasta para cima e
     para baixo (a altura fica salva) e o corpo rola por dentro ate o fim da tela */
  .win { position: fixed; left: 4px !important; right: 4px; top: var(--wy, 50px) !important; width: auto !important; z-index: 9; display: flex; flex-direction: column;
    max-height: calc(100vh - var(--wy, 50px) - 6px); max-height: calc(100dvh - var(--wy, 50px) - 6px); }
  .win-h { position: relative; padding: 9px 6px 6px 10px; cursor: grab; }
  .win-h::before { content: ''; position: absolute; left: 50%; top: 3px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: #4a5470; }
  .g .win-h button { width: 30px; height: 26px; font-size: 13px; }
  .win-b { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; resize: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .win[data-win-id="chat"] .win-b { flex: 0 0 auto; height: 40vh; }
  .eqgrid { grid-template-columns: repeat(3, 42px); }
  .eq { width: 42px; height: 42px; }
}
@media (max-width: 420px) {
  .cb-l { display: none; }
  .cb-s { display: inline; }
}
@media (max-width: 380px) {
  .g-online span, .g-online { font-size: 11px; }
  .g-who { width: 70px; }
  .g-who b { max-width: 70px; }
}

/* "Sair da caçada": quando sair sozinho (passar o mouse ou tocar no ») */
.sair-w { position: relative; display: inline-flex; gap: 4px; }
.g .cb.sair-mais { padding: 7px 9px; }
.sair-menu { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: 250px; padding: 8px; border-radius: 8px;
  background: #11141d; border: 1px solid #2f3650; box-shadow: 0 8px 24px #0009; text-align: left; }
.sair-w:hover .sair-menu, .sair-menu.aberto { display: grid; gap: 4px; }
.sair-menu b { font: 700 11px/1.4 Verdana, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #e0af68; padding: 2px 4px 4px; }
.sair-op { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; border: 1px solid #2c3346; background: #151a29; color: #e9e2cf;
  font: 600 12.5px/1.2 Verdana, sans-serif; cursor: pointer; text-align: left; }
.sair-op:hover { border-color: #e0af68; }
.sair-op.on { border-color: #3c7a46; background: #13241a; }
.sair-op i { width: 14px; font-style: normal; color: #9be3a6; }
@media (max-width: 759px) { .sair-menu { position: fixed; left: 8px; right: 8px; bottom: 120px; width: auto; } .g .cb.sair-mais { padding: 4px 8px; } }

/* Mochila: "Itens novos" a esquerda; Depot e Leilao lado a lado, alinhados a direita, sem passar da janela */
.inv-novo { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.inv-novo > .muted { flex: 1 1 auto; min-width: 0; }
.inv-botoes { display: flex; gap: 6px; flex: none; margin-left: auto; }
.inv-botoes .btn { white-space: nowrap; }

/* ficha da magia/runa/pocao ao passar o mouse na barra (mesmo visual da ficha dos itens) */
.ac-tip { width: 280px; z-index: 72; }
.ic-acao .ic-tipo i { color: #e0af68; }
.ic-desc { margin: 4px 0 2px; color: #e3e7f0; }
.ic-regra { margin: 6px 0 0; padding: 5px 0 0; border-top: 1px solid #262c3e; color: #c9cfdc; font-size: 11.5px; }
.ic-regra b { color: #e0af68; font-weight: 700; }
.ic-acao .bm-cac { margin-top: 6px; padding-top: 5px; border-top: 1px solid #262c3e; }
.ic-acao .bm-cac p { margin: 0 0 3px; font-size: 11.5px; }

/* moedas do Tibia sao pequenas dentro da imagem: no tamanho dos outros icones (Loja e Leilao, em cima e no menu) */
.g .ti.ti-moeda { transform: scale(2.6); }
/* aviso: numa linha so quando cabe (com left 50% ele so podia usar metade da tela e quebrava) */
.toast { width: max-content; }

/* celular: tudo menor e no lugar */
@media (max-width: 759px) {
  /* chip de XP do tamanho do nome (o numero estava com 14 px, maior que o nome) */
  .g-xp > b { font-size: 10.5px; }
  .g-who b { font-size: 13px; }
  /* barras de vida e mana mais baixas */
  .g-vitals { gap: 3px; }
  .v { height: 13px; }
  .v span, .v b { font-size: 10px; line-height: 12px; }
  /* aviso menor */
  .toast { font-size: 12.5px; padding: 7px 11px; }
  /* botoes de baixo: quebram em duas linhas se faltar espaco (nada some da tela, o Sair da caçada nao cortava mais) */
  .g-ctx { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 4px; }
  /* menu: 4 colunas, mais baixo */
  .g-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(340px, calc(100vw - 12px)); }
  .g .g-icons button { height: 50px; gap: 2px; }
  .g .g-icons .ti { width: 24px; height: 24px; }
}
@media (max-width: 420px) {
  .cb-l { display: none; }
  .cb-s { display: inline; }
}

/* celular: a coluna do nome cresce com a taxa de exp (com largura fixa a taxa passava por cima da moeda premium);
   em tela estreita o "no mundo" sai do topo (continua no cabecalho do menu) para sobrar espaco */
@media (max-width: 759px) {
  .g-top .g-who { flex: none; width: auto; min-width: 0; }
  .g-top .g-who b { max-width: 92px; }
  .g-xp { width: max-content; }
  .g-top .g-coins { margin-left: 4px; }
}
@media (max-width: 420px) {
  .g-top .g-online { display: none; }
  .g-top .g-shop { margin-right: auto; }
  .g-top .g-who b { max-width: 84px; }
}

/* botao do Discord (topo e menu do celular) */
.g .ti.disc-ic { width: 22px; height: 22px; padding: 2px; }
.g .g-icons button.g-discord:hover { border-color: #5865F2; }

/* topo: menus suspensos por tipo (Personagem, Caçada, Social, Mercado) */
.g-grupo { position: relative; }
.g .g-icons button.g-gbtn { width: auto; display: flex; align-items: center; gap: 6px; padding: 0 9px 0 6px; font: 700 12px/1 Verdana, sans-serif; color: #d9cfae; }
.g .g-icons button.g-gbtn .ti { width: 26px; height: 26px; }
.g-car { font-style: normal; font-size: 10px; color: #8a93a8; transition: transform .15s; }
.g-grupo.aberto .g-car { transform: rotate(180deg); }
.g-grupo.aberto .g-gbtn { border-color: var(--gold); background: #1c2133; }
.g-gmenu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px; padding: 6px; gap: 2px;
  background: #11141df7; border: 1px solid #2f3650; border-radius: 10px; box-shadow: 0 12px 30px #000c; }
.g-grupo.aberto .g-gmenu { display: grid; }
.g .g-gmenu button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 10px 0 6px;
  border-color: transparent; background: transparent; text-align: left; font: 600 13px/1.2 Verdana, sans-serif; color: #e9e2cf; }
.g .g-gmenu button:hover { background: #1c2133; border-color: #2f3650; }
.g .g-gmenu .ti { width: 28px; height: 28px; flex: none; }
.g .g-gmenu .ti.disc-ic { width: 24px; height: 24px; margin: 0 2px; }
/* telas medias: so o icone e a seta (o rotulo aparece no title) */
@media (min-width: 760px) and (max-width: 1280px) { .g-grot { display: none; } .g .g-icons button.g-gbtn { padding: 0 6px; gap: 3px; } }
/* celular: o menu (hamburguer) mostra os grupos em secoes, cada item como antes (icone com o nome embaixo) */
@media (max-width: 759px) {
  .g-grupo { display: contents; }
  .g .g-icons button.g-gbtn { grid-column: 1 / -1; width: 100%; height: auto; padding: 8px 2px 2px; border: 0; background: transparent; pointer-events: none;
    justify-content: flex-start; font: 700 10.5px/1 Verdana, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #e0af68; }
  .g .g-icons button.g-gbtn .ti, .g-car { display: none; }
  .g .g-icons button.g-gbtn::after { content: none; }
  .g-grupo .g-gmenu, .g-grupo.aberto .g-gmenu { display: contents; }
  .g .g-gmenu button { height: 50px; flex-direction: column; justify-content: center; gap: 2px; padding: 2px; border: 1px solid #2a3044; background: #121624; }
  .g .g-gmenu .g-gitem { display: none; }
}

/* o menu suspenso do topo nao pode ficar cortado pela barra de icones (ela rolava para o lado) */
@media (min-width: 760px) { .g-icons { overflow: visible; } }

/* barra de baixo por tipo: Mercado e Melhorias abrem para cima */
.c-grupo { position: relative; display: inline-flex; }
.c-car { font-style: normal; font-size: 9px; margin-left: 5px; color: #8a93a8; transition: transform .15s; }
.c-grupo.aberto .c-car { transform: rotate(180deg); }
.c-grupo.aberto .c-gbtn { border-color: var(--gold); }
.c-gmenu { display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 40; min-width: 180px; padding: 6px; gap: 4px;
  background: #11141df7; border: 1px solid #2f3650; border-radius: 10px; box-shadow: 0 -10px 28px #000c; }
.c-grupo.aberto .c-gmenu { display: grid; }
.g .c-gmenu .cb { width: 100%; justify-content: flex-start; white-space: nowrap; }
.g .c-gmenu .cb .cb-l, .g .c-gmenu .cb .cb-s { display: inline; }
.g .c-gmenu .cb .cb-s { display: none; }
@media (max-width: 759px) {
  .c-gmenu { min-width: 160px; }
  .g .c-gmenu .cb { height: 34px; font-size: 11px; padding: 0 10px; }
}

/* icone no botao do menu de baixo (locker no Mercado, bigorna na Forja) */
.g .c-gbtn .ti-xs, .g .c-gbtn svg { width: 15px; height: 15px; margin-right: 4px; flex: none; }

/* link para a pagina de informacoes e novidades (lista de personagens e entrada) */
.info-link { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; margin: 10px 0 0; padding: 11px 14px; border: 1px solid rgba(217, 165, 72, .35); border-radius: 8px; background: rgba(20, 22, 30, .85); color: var(--gold-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.info-link:hover { background: rgba(217, 165, 72, .12); border-color: rgba(217, 165, 72, .6); color: #f3d38a; }
.info-link svg { width: 17px; height: 17px; flex: none; }