/* Blood Idle — paleta da marca */
:root {
  --fire: #ff6a00;
  --gold: #c98a42;
  --silver: #c6b19a;
  --bronze: #67402b;
  --coal: #171313;
  --coal-2: #211a17;
  --coal-3: #2c221d;
  --line: #4a3326;
  --text: #e9dccb;
  --muted: #a8957f;
  --hp: #c8261c;
  --mp: #2f6fd6;
  --radius: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--coal);
  color: var(--text);
  font: 14px/1.4 Inter, system-ui, sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
.hidden { display: none !important; }

.screen { display: none; height: 100%; }
.screen.active { display: block; }

/* moldura dourada envelhecida */
.frame {
  background: linear-gradient(180deg, var(--coal-2), var(--coal));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(201, 138, 66, .18), 0 6px 18px rgba(0, 0, 0, .55);
  border-radius: var(--radius);
}

.btn-fire {
  background: linear-gradient(180deg, #ff8a2a, var(--fire) 55%, #c24c00);
  border: 1px solid #ffb37a;
  color: #2a1406;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  padding: 10px 16px;
  box-shadow: 0 0 14px rgba(255, 106, 0, .35);
}
.btn-fire:hover { filter: brightness(1.08); }
.btn-fire.small { padding: 6px 12px; font-size: 12px; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--silver);
  border-radius: var(--radius);
  padding: 8px 14px;
}

/* ---------- login ---------- */
#screen-login { position: relative; display: none; place-items: center; }
#screen-login.active { display: grid; }
.login-backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--coal) url(/ui/login/bg-poster.jpg) center / cover no-repeat; }
/* vídeo de fundo cobrindo a tela inteira, com um véu escuro para o cartão de login ficar legível */
.login-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-backdrop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 60% at 50% 50%, rgba(10, 6, 5, .55), transparent 75%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5, 3, 2, .7) 100%);
}
.login-card { position: relative; width: min(380px, calc(100% - 32px)); padding: 24px; text-align: center; }
.login-logo { width: 240px; max-width: 80%; margin: -8px auto 8px; display: block; filter: drop-shadow(0 0 18px rgba(255, 106, 0, .35)); }
#login-form { display: grid; gap: 12px; text-align: left; }
#login-form label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
#login-form input, .chat-form input {
  background: #120e0d;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
}
#login-form input:focus, .chat-form input:focus { outline: 1px solid var(--gold); }
.status { min-height: 1.4em; margin: 0; color: #ff9c6b; font-size: 13px; text-align: center; }
.asset-status { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.char-select h2 { font: 800 16px Cinzel, serif; color: var(--gold); margin: 4px 0 12px; }
.login-card { transition: width .25s; }
#screen-login.picking .login-card { width: min(520px, calc(100% - 32px)); }
#char-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-height: min(56vh, 520px); overflow: auto; }
.char-card {
  width: 100%; display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 12px; text-align: left; padding: 6px 14px 6px 6px; cursor: pointer;
  background: linear-gradient(180deg, rgba(36, 26, 21, .95), rgba(18, 13, 11, .95)); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.char-card:hover { border-color: var(--fire); box-shadow: 0 0 14px rgba(255, 106, 0, .35); transform: translateY(-1px); }
.char-pic {
  width: 112px; height: 112px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 106, 0, .22), transparent 65%), #0e0a09; border: 1px solid #2c201a;
}
.char-pic canvas { width: 160px; height: 160px; transform: translate(-14px, -22px); image-rendering: pixelated; }
.char-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.char-info b { font: 700 18px "Crimson Pro", Georgia, serif; color: #FFD9B0; }
.char-info em { font-style: normal; font-size: 12.5px; color: #C98A42; font-weight: 600; }
.char-info small { color: var(--muted); font-size: 11.5px; }
.char-play {
  padding: 7px 14px; border-radius: 6px; font: 800 12px Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff8a2a, #c94a00); box-shadow: 0 0 10px rgba(255, 106, 0, .35); opacity: .75; transition: opacity .15s;
}
.char-card:hover .char-play { opacity: 1; }

/* ======================================================================
   JOGO — estilo ornamentado (molduras douradas, fogo, couro escuro)
   ====================================================================== */
:root {
  --gold-hi: #f0c27a;
  --gold-mid: #c98a42;
  --gold-lo: #6b4527;
  --ink: #0a0706;
  --panel: #18110e;
  --panel-2: #221812;
  --label: #dcc6a6;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

#screen-game.active { display: block; position: fixed; inset: 0; }
#screen-game button:disabled { opacity: 1; cursor: help; }
canvas.ico { image-rendering: pixelated; display: block; }

svg.icon { display: block; width: 34px; height: 34px; overflow: visible; }

/* ---------- menu superior: faixa preta, só os ícones (recortados do mockup), logo grande à esquerda ---------- */
/* --t = 1 pixel da arte; encolhe em telas estreitas */
#screen-game {
  /* × tamanho da HUD (Opções > HUD): o menu de cima acompanha as janelas */
  --t: min(calc(0.82px * var(--hud-s, 1)), calc((100vw - 20px) / 1650));
  /* centro do grupo Bazar..Social: o meio da tela, ou mais à direita se a tela for estreita */
  --cx: max(50vw, calc(8px + 980 * var(--t)));
  --tb-h: calc(80 * var(--t));            /* onde o jogo começa (embaixo da faixa) */
  /* onde começa a Store (no meio do espaço entre a logo e o banco) e o tamanho da logo */
  --store-l: calc((8px + 216 * var(--t) + var(--cx) - 576 * var(--t)) / 2 - 78 * var(--t));
  --logo-w: calc(262 * var(--t));
  --u: calc(min(100vw, 1240px) / 1672);   /* unidade do megamenu de sistemas */
}
#screen-game::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--tb-h); z-index: 49; pointer-events: none;
  background: #050404; box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--tb-h); z-index: 50; pointer-events: none;
  display: flex; align-items: center; padding-left: calc(8px + 222 * var(--t)); padding-right: 8px;
}
.topbar > * { pointer-events: auto; }
/* logo grande no canto esquerdo, passando um pouco da faixa, com brilho pulsando e reflexo */
.tb-logo {
  /* maior e enquadrada no meio do espaço entre a borda da tela e a Store */
  position: absolute; left: max(4px, calc((var(--store-l) - var(--logo-w)) / 2)); top: 1px; width: var(--logo-w); height: calc(182 * var(--t)); z-index: 2;
  background: url(/ui/logo-top.webp) center / contain no-repeat; pointer-events: none !important;
  isolation: isolate;
}
/* brilho da logo: desenhado uma vez numa camada própria; a animação só muda a opacidade (a placa de
   vídeo faz sozinha). Antes o filtro era animado e o navegador refazia o desfoque a cada quadro. */
.tb-logo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: inherit;
  filter: drop-shadow(0 0 calc(14 * var(--t)) rgba(255, 120, 20, .95)) brightness(1.08);
  opacity: .35; will-change: opacity;
  animation: glow-pulse 3.2s ease-in-out infinite;
}
@keyframes glow-pulse { 50% { opacity: 1; } }
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 calc(4 * var(--t)) rgba(255, 106, 0, .55)); }
  50% { filter: drop-shadow(0 0 calc(14 * var(--t)) rgba(255, 120, 20, .95)) brightness(1.08); }
}
.tb-logo-shine {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url(/ui/logo-top.webp) center / contain no-repeat; mask: url(/ui/logo-top.webp) center / contain no-repeat;
}
.tb-logo-shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 246, 232, 0) 25%, rgba(255, 250, 238, .75) 50%, rgba(255, 246, 232, 0) 75%, transparent 100%);
  animation: logo-shine 4.5s ease-in-out infinite; will-change: transform;
}
@keyframes logo-shine { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(300%); } }
/* Store e Passe no meio do espaço entre a logo e o banco (banco = 220 de largura, 24 antes do Bazar; grupo central ~664) */
.tb-left {
  position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: calc(6 * var(--t));
  left: var(--store-l);
}
.tb-icons { --s: 1; display: flex; align-items: center; gap: calc(4 * var(--t)); }
/* Bazar..Social no centro da tela; Chat..Sair encostados na direita */
/* no centro da tela; em telas estreitas anda para a direita para o banco não encostar no Passe */
.tb-center { position: absolute; left: var(--cx); top: 50%; transform: translate(-50%, -50%); }
.tb-right { margin-left: auto; }
.tb-icons .tb-btn { width: calc(var(--w) * var(--t) * var(--s)); height: calc(74 * var(--t) * var(--s)); }
/* botão = o próprio ícone; o brilho segue o formato do ícone (drop-shadow) */
.tb-btn {
  position: relative; flex: none; width: calc(var(--w) * var(--t)); height: calc(74 * var(--t)); padding: 0; border: 0; cursor: pointer; outline: none;
  background: var(--img) center / 100% 100% no-repeat;
  isolation: isolate;
  transition: filter .15s, transform .15s;
}
/* halo do ícone: camada própria com o desfoque pronto; só a opacidade pulsa (barato) */
.tb-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--img) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 calc(6 * var(--t)) rgba(255, 130, 40, .7));
  opacity: .45; will-change: opacity;
  animation: glow-pulse 3.6s ease-in-out infinite; animation-delay: calc(var(--w) * -97ms);
}
.tb-btn:hover::before, .tb-btn:focus-visible::before, .tb-btn.on::before { animation: none; opacity: 0; }
@keyframes tb-idle { 50% { filter: drop-shadow(0 0 calc(6 * var(--t)) rgba(255, 130, 40, .6)); } }
.tb-btn:hover, .tb-btn:focus-visible {
  animation: none; transform: translateY(calc(-1 * var(--t)));
  filter: brightness(1.18) drop-shadow(0 0 calc(4 * var(--t)) rgba(255, 170, 60, .95)) drop-shadow(0 0 calc(12 * var(--t)) rgba(255, 106, 0, .8));
}
.tb-btn.on { animation: none; filter: brightness(1.1) drop-shadow(0 0 calc(4 * var(--t)) rgba(255, 170, 60, .9)) drop-shadow(0 0 calc(9 * var(--t)) rgba(255, 106, 0, .6)); }
.tb-btn:active { transform: translateY(calc(1 * var(--t))); }
/* reflexo passando por cima do ícone (recortado no formato dele) */
.tb-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: var(--img) center / 100% 100% no-repeat; mask: var(--img) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) -150% 0 / 250% 100% no-repeat;
}
.tb-btn:hover::after { opacity: 1; animation: tb-sweep .7s ease-out; }
@keyframes tb-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
/* ---- Store e Passe: ícone com halo pulsando e reflexo próprio + rótulo nítido em HTML ---- */
.tb-btn.feat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(1 * var(--t));
  background: none; filter: none; animation: none; height: calc(74 * var(--t));
}
.tb-btn.feat:hover, .tb-btn.feat:focus-visible, .tb-btn.feat.on { filter: none; transform: none; }
.tb-btn.feat::after { content: none; }
.tb-ico {
  position: relative; display: block; width: 100%; height: calc(51 * var(--t));
  background: var(--img) center / contain no-repeat;
  transition: transform .28s cubic-bezier(.34, 1.7, .64, 1);
}
.tb-btn.feat::before { content: none; }
.tb-ico { isolation: isolate; }
.tb-ico::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--img) center / contain no-repeat; opacity: .3; will-change: opacity;
}
.tb-btn.store .tb-ico::before {
  filter: brightness(1.15) drop-shadow(0 0 calc(6 * var(--t)) rgba(110, 185, 255, 1)) drop-shadow(0 0 calc(18 * var(--t)) rgba(40, 110, 255, .85));
  animation: glow-pulse 2.4s ease-in-out infinite;
}
.tb-btn.pass .tb-ico::before {
  filter: brightness(1.15) drop-shadow(0 0 calc(6 * var(--t)) rgba(255, 210, 90, 1)) drop-shadow(0 0 calc(18 * var(--t)) rgba(255, 120, 0, .85));
  animation: glow-pulse 2.6s ease-in-out infinite -1.3s;
}
@keyframes tb-store {
  0%, 100% { filter: drop-shadow(0 0 calc(4 * var(--t)) rgba(60, 150, 255, .65)); }
  50% { filter: brightness(1.15) drop-shadow(0 0 calc(6 * var(--t)) rgba(110, 185, 255, 1)) drop-shadow(0 0 calc(18 * var(--t)) rgba(40, 110, 255, .85)); }
}
@keyframes tb-pass {
  0%, 100% { filter: drop-shadow(0 0 calc(4 * var(--t)) rgba(255, 180, 60, .6)); }
  50% { filter: brightness(1.15) drop-shadow(0 0 calc(6 * var(--t)) rgba(255, 210, 90, 1)) drop-shadow(0 0 calc(18 * var(--t)) rgba(255, 120, 0, .85)); }
}
/* reflexo passando pelo ícone (recortado no formato dele), cada um no seu ritmo */
.tb-ico::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .85) 50%, transparent 68%) 150% 0 / 250% 100% no-repeat;
  animation: tb-feat-sweep 3.4s ease-in-out infinite;
}
.tb-btn.pass .tb-ico::after { animation-duration: 3.9s; animation-delay: -1.7s; }
@keyframes tb-feat-sweep { 0% { background-position: 150% 0; } 32%, 100% { background-position: -150% 0; } }
/* rótulo em pílula, como na arte, mas desenhado (nítido em qualquer tamanho) */
.tb-pill {
  position: relative; overflow: hidden; display: block; padding: calc(2 * var(--t)) calc(13 * var(--t)) calc(3 * var(--t));
  border-radius: 999px; font: 800 calc(15.5 * var(--t)) / 1 Inter, "Segoe UI", sans-serif; letter-spacing: .01em; white-space: nowrap;
  transition: filter .2s, box-shadow .2s;
}
.tb-btn.store .tb-pill {
  color: #fff; text-shadow: 0 1px 0 #0a2a80, 0 0 calc(5 * var(--t)) rgba(150, 210, 255, .8);
  background: linear-gradient(180deg, #3d8bff 0%, #1c5be0 55%, #0e3aa8 100%);
  border: calc(1.6 * var(--t)) solid #7cc2ff;
  box-shadow: inset 0 calc(1 * var(--t)) 0 rgba(255, 255, 255, .55), 0 0 calc(8 * var(--t)) rgba(60, 150, 255, .9);
}
.tb-btn.pass .tb-pill {
  color: #ffe04a; text-shadow: 0 1px 0 #3a1500, 0 0 calc(5 * var(--t)) rgba(255, 210, 80, .8);
  background: linear-gradient(180deg, #6b3410 0%, #3d1906 60%, #2a1003 100%);
  border: calc(1.6 * var(--t)) solid #ffb02e;
  box-shadow: inset 0 calc(1 * var(--t)) 0 rgba(255, 220, 150, .35), 0 0 calc(8 * var(--t)) rgba(255, 150, 30, .9);
}
.tb-pill::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
  animation: tb-feat-sweep 3.4s ease-in-out infinite .25s;
}
.tb-btn.pass .tb-pill::after { animation-duration: 3.9s; animation-delay: -1.45s; }
/* passar o mouse: o ícone salta e cresce, o rótulo acende */
.tb-btn.feat:hover .tb-ico, .tb-btn.feat:focus-visible .tb-ico { transform: translateY(calc(-3 * var(--t))) scale(1.12); }
.tb-btn.feat:hover .tb-pill { filter: brightness(1.25); }
.tb-btn.store:hover .tb-pill { box-shadow: inset 0 calc(1 * var(--t)) 0 rgba(255, 255, 255, .6), 0 0 calc(14 * var(--t)) rgba(80, 170, 255, 1); }
.tb-btn.pass:hover .tb-pill { box-shadow: inset 0 calc(1 * var(--t)) 0 rgba(255, 220, 150, .4), 0 0 calc(14 * var(--t)) rgba(255, 170, 40, 1); }
/* clique: o botão dá um pulinho (classe .pop posta pelo main.ts) */
.tb-btn.pop { animation: tb-pop .42s ease-out; }
@keyframes tb-pop { 0% { transform: scale(1); } 35% { transform: scale(.88); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* faíscas (estrelinhas de 4 pontas) piscando na logo, na Store e no Passe */
.tb-spark {
  position: absolute; width: calc(16 * var(--t)); height: calc(16 * var(--t)); pointer-events: none; z-index: 3; opacity: 0;
  background:
    linear-gradient(90deg, transparent 44%, #fff 50%, transparent 56%),
    linear-gradient(0deg, transparent 44%, #fff 50%, transparent 56%),
    radial-gradient(circle, rgba(255, 245, 220, 1) 0, rgba(255, 200, 120, .6) 18%, transparent 42%);
  -webkit-mask: radial-gradient(circle, #000 0, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 0, #000 20%, transparent 68%);
  animation: tb-twinkle 3.2s ease-in-out infinite;
}
@keyframes tb-twinkle {
  0%, 62%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  74% { opacity: 1; transform: scale(1.15) rotate(45deg); }
  86% { opacity: .2; transform: scale(.5) rotate(90deg); }
}
.tb-logo .tb-spark { width: calc(24 * var(--t)); height: calc(24 * var(--t)); }
.tb-logo .s1 { left: 16%; top: 20%; animation-delay: -.4s; }
.tb-logo .s2 { left: 74%; top: 26%; animation-delay: -1.5s; animation-duration: 3.8s; }
.tb-logo .s3 { left: 50%; top: 64%; animation-delay: -2.6s; animation-duration: 4.4s; }
.tb-btn.store .tb-spark { left: 70%; top: 4%; animation-delay: -.9s; }
.tb-btn.pass .tb-spark { left: 12%; top: 8%; animation-delay: -2.2s; animation-duration: 3.6s;
  background: linear-gradient(90deg, transparent 44%, #fff4c0 50%, transparent 56%), linear-gradient(0deg, transparent 44%, #fff4c0 50%, transparent 56%), radial-gradient(circle, #fff6d0 0, rgba(255, 190, 60, .7) 18%, transparent 42%); }
/* moedas da store, num selo sobre o baú */
.tb-points {
  position: absolute; right: calc(-6 * var(--t)); top: calc(-2 * var(--t)); z-index: 5; pointer-events: none;
  padding: calc(1 * var(--t)) calc(5 * var(--t)); border-radius: 999px; font: 800 calc(10.5 * var(--t)) / 1.2 Inter, sans-serif; color: #fff;
  background: linear-gradient(180deg, #2f7dff, #1446b8); border: 1px solid #9fd0ff;
}
/* banco: pilha de moedas + saldo completo, sem moldura */
.tb-bank {
  position: absolute; right: calc(100% + 12 * var(--t)); top: 50%; transform: translateY(-50%); cursor: default; width: calc(185 * var(--t));
  display: grid; grid-template-columns: calc(50 * var(--t)) auto; grid-template-rows: auto auto; column-gap: calc(6 * var(--t)); row-gap: calc(4 * var(--t)); align-items: center;
}
.tb-coins { grid-row: 1 / 3; position: relative; width: calc(50 * var(--t)); height: calc(50 * var(--t)); filter: drop-shadow(0 0 calc(5 * var(--t)) rgba(255, 190, 60, .55)); }
.tb-coins canvas { position: absolute; width: calc(46 * var(--t)); height: calc(46 * var(--t)); image-rendering: pixelated; }
.tb-coins canvas:first-child { left: calc(-6 * var(--t)); top: calc(-4 * var(--t)); }
.tb-coins canvas + canvas { left: calc(6 * var(--t)); top: calc(6 * var(--t)); }
.tb-bank-lbl {
  align-self: end; font: 800 calc(13.5 * var(--t)) / 1 Inter, "Segoe UI", sans-serif; letter-spacing: .02em; color: #ffd21f;
  text-shadow: 0 0 calc(4 * var(--t)) rgba(255, 170, 0, .6), 0 1px 1px #000;
}
.tb-bank .purse-val {
  align-self: start; font: 800 calc(var(--fs, 17) * var(--t)) / 1 Inter, "Segoe UI", sans-serif; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* selo de contagem (Tarefas) */
.tb-badge {
  position: absolute; right: calc(2 * var(--t)); top: calc(2 * var(--t)); min-width: calc(18 * var(--t)); height: calc(18 * var(--t));
  display: grid; place-items: center; padding: 0 calc(4 * var(--t)); border-radius: 999px; pointer-events: none;
  font: 700 calc(12 * var(--t)) / 1 Inter, sans-serif; color: #fff;
  background: radial-gradient(circle at 40% 35%, #ff8a3a, #c62f00 70%); border: 1px solid #FFC27A;
}
.tb-badge.hidden { display: none; }

/* ---------- área do jogo ---------- */
.viewport { position: fixed; top: var(--tb-h); left: 0; right: 0; bottom: 0; overflow: hidden; background: #000; }
#game-canvas, #game-overlay { position: absolute; left: 0; top: 0; }
#game-overlay { pointer-events: none; }
.loading-veil { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(23, 19, 19, .85); font: 800 16px Cinzel, serif; color: var(--gold); }
.loading-veil.hidden { display: none; }
/* FPS e ping: plaquinha compacta entre o Passe e o banco */
.tb-net {
  flex: none; width: calc(42 * var(--t)); margin-left: calc(2 * var(--t)); padding: calc(4 * var(--t)) 0;
  display: flex; flex-direction: column; gap: calc(3 * var(--t)); cursor: default;
  background: linear-gradient(180deg, rgba(40, 28, 22, .9), rgba(16, 12, 11, .95));
  border: 1px solid #67402B; border-radius: calc(5 * var(--t));
  box-shadow: inset 0 1px 0 rgba(201, 138, 66, .25), 0 0 calc(5 * var(--t)) rgba(0, 0, 0, .8);
}
.tb-net-row { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tb-net-row b {
  font: 800 calc(13 * var(--t)) / 1 Inter, "Segoe UI", sans-serif; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000;
}
.tb-net-row i { font: 800 calc(8.5 * var(--t)) / 1.1 Inter, "Segoe UI", sans-serif; font-style: normal; letter-spacing: .08em; color: #C98A42; }
.tb-net-row + .tb-net-row { border-top: 1px solid rgba(103, 64, 43, .7); padding-top: calc(3 * var(--t)); }
.tb-net .good { color: #7be38a; }
.tb-net .warn { color: #ffd21f; }
.tb-net .bad { color: #ff5a3c; }

/* ---------- moldura ornamentada ---------- */
.win {
  position: absolute; z-index: 10; min-width: 160px;
  background: var(--noise), linear-gradient(180deg, rgba(29, 24, 24, .97), rgba(15, 12, 12, .97));
  border: 1px solid #000; border-radius: 4px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7);
}
.win.ornate {
  border: 22px solid transparent; border-image: url(/ui/frame.svg) 30 / 22px / 0 stretch;
  border-radius: 0; padding: 0; margin: 0; box-shadow: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 106, 0, .07), transparent 70%) border-box,
    var(--noise) border-box,
    linear-gradient(180deg, #151010 0%, #0e0a09 60%, #0a0706 100%) border-box;
  background-clip: border-box;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
}
.win.ornate > .win-head, .win.ornate > .win-body { margin: -12px; }
/* o conteúdo começa DEPOIS do traço do título (a margem negativa do título puxava o corpo 12px para cima dele) */
.win.ornate > .win-head { margin-bottom: 0; }
.win.ornate > .win-head + .win-body { margin-top: 0; }
.win.hidden { display: none; }
.win.min > .win-body, .win.min .char-bars, .win.min .xp-row, .win.min .bar.xp { display: none; }
#win-char.min > .win-body { display: block; }

.win-head {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px 8px; cursor: grab; user-select: none;
  font: 700 16px "Crimson Pro", Georgia, serif; letter-spacing: .02em; color: #F3E7D3; text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 140, 40, .25);
  background: linear-gradient(90deg, transparent, rgba(201, 138, 66, .55), transparent) bottom / 100% 1px no-repeat;
}
.win-head:active { cursor: grabbing; }
.win-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-close, .win-min {
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0; flex: none;
  background: radial-gradient(circle at 40% 35%, #3a2619, #120b08); border: 1px solid var(--gold-lo); border-radius: 50%;
  color: var(--gold-hi); font: 700 13px/1 Inter, sans-serif;
}
.win-close:hover, .win-min:hover { color: #fff; border-color: var(--fire); box-shadow: 0 0 6px rgba(255, 106, 0, .6); }
.win-body { padding: 8px 8px 6px; }

/* ---------- personagem ---------- */
#win-char { width: 310px; }
#win-char .win-body { padding: 4px 6px 6px; }
.char-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 0 0 8px; text-transform: none; letter-spacing: 0; background: none; }
.portrait {
  width: 64px; height: 64px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--gold-hi), var(--gold-lo), var(--gold-mid), var(--gold-lo), var(--gold-hi));
  box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 106, 0, .35);
}
#char-portrait { width: 58px; height: 58px; border-radius: 50%; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a2a22, #0d0908); display: block; }
.char-name { font: 800 18px Cinzel, serif; color: #f6e6cc; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.char-voc { display: flex; align-items: center; gap: 6px; font: 600 13px Inter, sans-serif; color: var(--silver); text-transform: none; letter-spacing: 0; }
.char-voc .star { color: var(--fire); text-shadow: 0 0 6px rgba(255, 106, 0, .8); }
.char-bars { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 6px; row-gap: 4px; align-items: center; }
.level-badge {
  grid-row: span 2; display: grid; place-items: center; height: 40px; border-radius: 50% / 46%;
  background: radial-gradient(circle at 50% 30%, #ffb35a, #ff6a00 55%, #8a2a00);
  border: 2px solid var(--gold-hi); box-shadow: 0 0 10px rgba(255, 106, 0, .55), inset 0 -3px 6px rgba(70, 20, 0, .6);
  font: 800 14px Cinzel, serif; color: #fff4e0; text-shadow: 0 1px 2px #5a1a00;
}
.bar { position: relative; height: 18px; margin: 0; background: linear-gradient(180deg, #050303, #1a1210); border: 1px solid #000; border-radius: 3px; box-shadow: 0 0 0 1px var(--gold-lo), inset 0 2px 4px #000; overflow: hidden; }
.bar span { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .25s; }
.bar em { position: relative; display: block; text-align: center; font: 700 12px/16px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.bar.hp span { background: linear-gradient(180deg, #ff6b5a 0%, #d52b1e 45%, #7c0d07 100%); }
.bar.mp span { background: linear-gradient(180deg, #6fb0ff 0%, #2f6fd6 45%, #11337a 100%); }
.bar span::after { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 35%; background: rgba(255, 255, 255, .22); border-radius: 2px; }
.bar.xp { height: 7px; margin-top: 3px; }
.bar.xp span { background: linear-gradient(90deg, var(--gold-mid), var(--fire)); }
.xp-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 0; font: 700 12px Inter, sans-serif; color: var(--silver); }
.stamina { display: flex; align-items: center; gap: 6px; padding: 1px 8px; border: 1px solid var(--gold-lo); border-radius: 3px; background: #0d0907; color: #f1dcbc; font-weight: 700; }
.hourglass { color: var(--gold-hi); }

/* ---------- party / skills ---------- */
#win-party { width: 230px; }
.party-body { font-size: 12px; color: var(--silver); line-height: 1.5; }
#win-skills { width: 220px; }
.skills { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 13px; }
.skills dt { color: var(--silver); }
.skills dd { margin: 0; font-weight: 700; color: #f4e2c4; }

/* ---------- slots (inventário, mochilas, troca) ---------- */
.slot {
  width: 48px; height: 48px; position: relative; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(201, 138, 66, .14), transparent 62%),
    linear-gradient(180deg, #241a16, #0e0b0a);
  border: 2px solid transparent;
  border-image: linear-gradient(150deg, var(--silver), var(--gold) 30%, var(--bronze) 65%, var(--gold) 100%) 1;
  outline: 1px solid var(--coal);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 19, .9), inset 0 0 12px rgba(0, 0, 0, .95), 0 2px 4px rgba(0, 0, 0, .6);
}
/* rebites nos cantos */
.slot::before {
  content: ""; position: absolute; inset: 2px; pointer-events: none;
  background:
    radial-gradient(circle, var(--gold) 0 1.2px, transparent 1.6px) 0 0 / 6px 6px no-repeat,
    radial-gradient(circle, var(--gold) 0 1.2px, transparent 1.6px) 100% 0 / 6px 6px no-repeat,
    radial-gradient(circle, var(--gold) 0 1.2px, transparent 1.6px) 0 100% / 6px 6px no-repeat,
    radial-gradient(circle, var(--gold) 0 1.2px, transparent 1.6px) 100% 100% / 6px 6px no-repeat;
  opacity: .8;
}
.slot canvas { position: relative; width: 32px; height: 32px; image-rendering: pixelated; }
.slot .count { position: absolute; right: 3px; bottom: 1px; font: 700 11px Inter, sans-serif; color: #fff6e8; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.slot.empty::after { content: ""; }
.slot svg.sil { width: 30px; height: 30px; color: var(--bronze); opacity: .75; }
.slot:not(.empty):hover, .slot.empty:hover {
  border-image: linear-gradient(150deg, #FFC27F, var(--fire) 40%, var(--gold) 100%) 1;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 19, .9), inset 0 0 12px rgba(255, 106, 0, .25), 0 0 8px rgba(255, 106, 0, .45);
}
.slot { cursor: default; }

#win-inventory { width: 222px; }
#win-inventory .win-body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 106, 0, .08), transparent 60%),
    linear-gradient(180deg, #141010, #0b0807);
  box-shadow: inset 0 0 0 1px #2c2320, inset 0 0 18px rgba(0, 0, 0, .9);
  border-radius: 6px; padding: 10px 8px 8px;
}
.inventory { display: grid; grid-template-columns: repeat(3, 54px); gap: 8px; justify-content: center; }
.inventory .slot { width: 54px; height: 54px; }
.inventory .slot canvas { width: 36px; height: 36px; }
.cap-row {
  display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-top: 10px; padding: 4px 6px;
  font: 700 10px Cinzel, serif; letter-spacing: .1em; color: var(--gold);
  background: linear-gradient(180deg, rgba(103, 64, 43, .55), rgba(23, 19, 19, .9));
  border: 1px solid var(--coal); border-radius: 3px; box-shadow: 0 0 0 1px var(--bronze), inset 0 1px 0 rgba(198, 177, 154, .15);
}
.cap-row b { font: 800 14px Cinzel, serif; letter-spacing: 0; color: var(--silver); }

/* ---------- chat ---------- */
#win-chat { width: min(430px, calc(100vw - 24px)); }
.chat-body { display: grid; grid-template-rows: auto 150px auto; gap: 6px; }
.chat-tabs { display: flex; gap: 3px; flex-wrap: nowrap; }
.chat-tabs button { flex: 1 1 auto; min-width: 0; padding-left: 6px !important; padding-right: 6px !important; }
.chat-tabs button {
  padding: 3px 10px; background: linear-gradient(180deg, #2a1d16, #140e0b); border: 1px solid var(--gold-lo); border-radius: 3px;
  font: 600 12px Inter, sans-serif; color: var(--silver);
}
.chat-tabs button:hover { color: #fff; }
.chat-tabs button.active { color: #fff4e0; border-color: var(--fire); background: linear-gradient(180deg, #7a3008, #3a1404); box-shadow: 0 0 8px rgba(255, 106, 0, .4), inset 0 0 0 1px rgba(255, 170, 90, .35); }
.chat-tabs button.unread { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { color: var(--fire); border-color: var(--fire); } }
.chat-log { list-style: none; margin: 0; padding: 4px 6px; overflow-y: auto; font-size: 12px; min-height: 0; background: rgba(0, 0, 0, .35); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a281c; border-radius: 3px; }
.chat-log li { padding: 1px 0; }
.chat-log time { color: #7c6a58; margin-right: 6px; font-variant-numeric: tabular-nums; }
.chat-log .who { color: var(--gold); font-weight: 600; }
.chat-log .sys { color: var(--silver); }
.chat-log .warn { color: var(--fire); }
.chat-log .loot { color: var(--gold); font-weight: 600; }
.chat-log .npc { color: #e9dccb; font-style: italic; }
.chat-log li { display: none; }
.chat-log[data-show="global"] li[data-tab~="global"],
.chat-log[data-show="local"] li[data-tab~="local"],
.chat-log[data-show="loot"] li[data-tab~="loot"],
.chat-log[data-show="trade"] li[data-tab~="trade"],
.chat-log[data-show="priv"] li[data-tab~="priv"],
.chat-log[data-show="sys"] li[data-tab~="sys"] { display: list-item; }
.chat-log .priv { color: #d9a6ff; }
.chat-form { display: flex; gap: 6px; }
.chat-form input, .text-input { flex: 1; padding: 6px 10px; background: #0d0907; border: 1px solid #000; box-shadow: 0 0 0 1px #4a3122; color: var(--text); border-radius: 3px; font: inherit; }
.chat-form input:focus, .text-input:focus { outline: none; box-shadow: 0 0 0 1px var(--fire); }

/* ---------- botões ---------- */
.btn-fire {
  background: linear-gradient(180deg, #ffb24c, #ff7a12 40%, #c24c00); border: 1px solid #ffcf8f; color: #2a1004;
  font: 800 12px Cinzel, serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; padding: 8px 14px;
  box-shadow: 0 0 10px rgba(255, 106, 0, .35), inset 0 -3px 6px rgba(90, 25, 0, .35);
}
.btn-fire.small { padding: 5px 12px; font-size: 11px; }
.btn-ghost.small { padding: 4px 10px; font-size: 11px; }
.btn-ghost { background: linear-gradient(180deg, #2a1d16, #140e0b); border: 1px solid var(--gold-lo); color: var(--silver); border-radius: 3px; font: 600 12px Inter, sans-serif; }

/* ---------- megamenu de sistemas: só a faixa dos ícones (sem moldura), na altura dos ícones de cima ---------- */
.systems-bar {
  --k: calc(var(--t) * 80 / 103);   /* unidade da faixa (1461 x 103), do tamanho da barra de cima */
  --pad: 10;   /* fundo extra nas duas pontas (a seleção do Prey e da Roleta não fica cortada) */
  position: fixed; left: calc(50vw - (730.5 + var(--pad)) * var(--k)); top: calc(var(--tb-h) + 2px); width: calc((1461 + 2 * var(--pad)) * var(--k)); height: calc(103 * var(--k));
  z-index: 49; background: #0b0706 url(/ui/sysbar-strip.webp) calc(var(--pad) * var(--k)) 0 / calc(1461 * var(--k)) 100% no-repeat;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(103, 64, 43, .55);
  animation: sys-in .16s ease-out;
}
.systems-bar.hidden { display: none; }
@keyframes sys-in { from { opacity: 0; transform: translateY(calc(-6 * var(--k))); } }
.sys-hot {   /* --c = centro do ícone no mockup antigo; a faixa começa 154 unidades depois */
  position: absolute; left: calc((var(--c) - 154 + var(--pad)) * var(--k)); width: calc(97 * var(--k));
  top: 0; height: calc(103 * var(--k)); padding: 0; border: 0; background: transparent; cursor: pointer; outline: none;
}
/* moldura de seleção */
.sys-hot::before {
  content: ""; position: absolute; inset: calc(1 * var(--k)); opacity: 0; transition: opacity .14s;
  border: calc(2.2 * var(--k)) solid #FFA347; border-radius: calc(4 * var(--k));
  box-shadow: 0 0 calc(3 * var(--k)) #FF6A00, 0 0 calc(12 * var(--k)) rgba(255, 106, 0, .75),
    inset 0 0 0 calc(2.5 * var(--k)) rgba(23, 19, 19, .9), inset 0 0 0 calc(3.6 * var(--k)) rgba(255, 163, 71, .55), inset 0 0 calc(18 * var(--k)) rgba(255, 106, 0, .45);
  background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255, 120, 30, .22), transparent 75%);
  mix-blend-mode: screen;
}
.sys-hot:hover::before, .sys-hot.on::before, .sys-hot:focus-visible::before { opacity: 1; }
.sys-hot:active { transform: translateY(1px); }

/* ---------- barra de ações ---------- */
.hotbar { z-index: 11; }
.hotbar-body { display: flex; gap: 10px; align-items: center; padding: 2px 4px; }
.hunt-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 0 8px 0 0; background: none; text-transform: none; letter-spacing: 0; border-right: 1px solid rgba(201, 138, 66, .25); cursor: grab; }
.hunt-cfg label { display: grid; gap: 1px; font: 700 10px Cinzel, serif; color: var(--gold-hi); text-transform: uppercase; letter-spacing: .06em; }
.hunt-cfg select { width: 104px; padding: 3px 6px; background: #0d0907; border: 1px solid #000; box-shadow: 0 0 0 1px #4a3122; color: var(--silver); font: 600 11px Inter, sans-serif; border-radius: 3px; cursor: help; }
.hunt-cfg .btn-ghost { width: 104px; cursor: help; }
.hotbar-slots { display: grid; grid-template-columns: repeat(12, 40px); gap: 3px; }
.hot-slot {
  position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #2a1e18, #0b0807 75%); border: 1px solid #000; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #4a3122, inset 0 0 8px rgba(0, 0, 0, .9);
}
.hot-slot:hover { box-shadow: inset 0 0 0 1px var(--fire), 0 0 6px rgba(255, 106, 0, .45); }
.hot-slot.fired { box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(255, 170, 80, .9); }
.hot-slot.out canvas { opacity: .35; filter: grayscale(1); }
.hot-slot canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.hot-key { position: absolute; left: 3px; top: 1px; font: 700 9px Inter, sans-serif; color: var(--gold-hi); text-shadow: 0 1px 1px #000; }
.hot-slot.empty .hot-key { color: #6a5442; }
.hot-count { position: absolute; right: 3px; bottom: 1px; font: 700 10px Inter, sans-serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.hot-mode { position: absolute; right: 3px; top: 1px; font-size: 10px; color: var(--fire); text-shadow: 0 1px 1px #000; }
.hot-spell { font: 700 9px/1.1 Inter, sans-serif; color: var(--silver); text-align: center; padding: 0 2px; word-break: break-word; text-shadow: 0 1px 1px #000; }
.hotbar-side { display: grid; gap: 6px; justify-items: center; padding-left: 8px; border-left: 1px solid rgba(201, 138, 66, .25); }
.btn-stop {
  width: 100px; height: 34px; font: 800 14px Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; color: #fff1e0;
  background: linear-gradient(180deg, #ff6a4a, #c41d0d 50%, #6e0a03); border: 1px solid #ffb090; border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 60, 20, .45), inset 0 -3px 6px rgba(60, 0, 0, .45); text-shadow: 0 1px 2px #4a0000;
}
.btn-stop:hover { filter: brightness(1.12); }
.round-row { display: flex; gap: 6px; }
.round {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #3a2619, #0e0806); border: 1px solid var(--gold-mid); color: var(--gold-hi); font-size: 14px;
  box-shadow: 0 0 0 1px #000;
}
.round:hover { color: #fff; border-color: var(--fire); box-shadow: 0 0 8px rgba(255, 106, 0, .6); }

/* ---------- menu de contexto ---------- */
.ctx-menu {
  position: fixed; z-index: 1000; min-width: 180px; padding: 4px;
  background: var(--noise), linear-gradient(180deg, #2a1d16, #140e0b);
  border: 1px solid var(--gold-mid); border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column;
}
.ctx-menu button { text-align: left; background: none; border: 0; border-radius: 2px; padding: 6px 10px; font: 600 13px Inter, sans-serif; color: var(--text); }
.ctx-menu button:hover { background: linear-gradient(90deg, rgba(255, 106, 0, .35), rgba(255, 106, 0, .05)); color: #fff; }
.ctx-menu hr { border: 0; border-top: 1px solid rgba(201, 138, 66, .3); margin: 3px 4px; }

/* ---------- arrastar / mirar ---------- */
.drag-ghost { position: fixed; z-index: 1001; pointer-events: none; width: 32px; height: 32px; opacity: .85; filter: drop-shadow(0 2px 4px #000); }
.drag-ghost canvas { width: 32px; height: 32px; image-rendering: pixelated; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.slot.drag-source { opacity: .35; }
body.targeting #game-canvas, body.targeting .slot { cursor: crosshair; }

/* ---------- containers ---------- */
.win.container { width: 214px; }
.win-up { background: none; border: 1px solid var(--gold-lo); border-radius: 3px; color: var(--gold-hi); font-size: 12px; line-height: 1; padding: 2px 6px; }
.win-up:hover { color: var(--fire); border-color: var(--fire); }
.container-grid { display: grid; grid-template-columns: repeat(4, 42px); gap: 4px; justify-content: center; max-height: 280px; overflow-y: auto; }
.container-grid .slot { width: 42px; height: 42px; }
.container-grid .slot.empty::after { content: ""; }

/* ---------- outfit ---------- */
.win.outfit { width: min(700px, calc(100vw - 24px)); }
.of-layout { display: grid; grid-template-columns: 250px 1fr; gap: 12px; }
.of-left { display: grid; gap: 10px; align-content: start; }
.of-title { margin: 0 0 6px; font: 800 12px Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

.of-stage {
  position: relative; height: 230px; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(ellipse 45% 12% at 50% 78%, rgba(23, 19, 19, .9), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(255, 106, 0, .28), transparent 70%),
    radial-gradient(circle at 50% 35%, #3a2a22, #120d0b 75%);
  border: 1px solid var(--coal); box-shadow: 0 0 0 1px var(--bronze), inset 0 0 30px rgba(0, 0, 0, .9); border-radius: 3px;
}
.of-stage::after { /* pedestal */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 46px; height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--gold), var(--bronze) 55%, var(--coal) 100%);
  box-shadow: 0 0 18px rgba(255, 106, 0, .45); opacity: .85;
}
.of-preview { position: relative; z-index: 1; width: 264px; height: 264px; margin-top: -36px; image-rendering: pixelated; }
.of-name { position: absolute; z-index: 2; top: 8px; left: 0; right: 0; display: grid; text-align: center; pointer-events: none; }
.of-name b { font: 800 16px Cinzel, serif; color: var(--silver); text-shadow: 0 1px 2px #000; }
.of-name small { font: 600 11px Inter, sans-serif; color: var(--gold); }
.of-stage-bar { position: absolute; z-index: 2; bottom: 8px; display: flex; gap: 10px; }
.of-round {
  width: 32px; height: 32px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #3a2619, var(--coal)); border: 1px solid var(--gold); color: var(--silver); font-size: 15px;
}
.of-round:hover { border-color: var(--fire); color: #fff; box-shadow: 0 0 8px rgba(255, 106, 0, .6); }
.of-round.on { background: radial-gradient(circle at 40% 35%, var(--fire), #7a2e05); color: #fff6e8; }

.of-toggles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.of-toggle {
  padding: 6px 4px; border-radius: 3px; font: 700 11px Cinzel, serif; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #2a1d16, #140e0b); border: 1px solid var(--bronze); color: var(--silver);
}
.of-toggle.on { color: #fff6e8; border-color: var(--fire); background: linear-gradient(180deg, #8a3a0a, #3a1404); box-shadow: 0 0 8px rgba(255, 106, 0, .4); }
.of-toggle:disabled { opacity: .4; cursor: not-allowed; }

.of-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; }
.of-part {
  display: grid; justify-items: center; gap: 3px; padding: 5px 2px; border-radius: 3px;
  background: linear-gradient(180deg, #2a1d16, #140e0b); border: 1px solid var(--bronze); color: var(--silver); font: 600 10px Inter, sans-serif;
}
.of-part i { width: 22px; height: 14px; border: 1px solid var(--coal); box-shadow: 0 0 0 1px var(--gold); border-radius: 2px; }
.of-part.active { border-color: var(--fire); color: #fff6e8; box-shadow: 0 0 8px rgba(255, 106, 0, .4); }
.of-palette { display: grid; grid-template-columns: repeat(19, 1fr); gap: 2px; padding: 4px; background: rgba(23, 19, 19, .8); border: 1px solid var(--bronze); border-radius: 3px; }
.of-palette button { aspect-ratio: 1; padding: 0; border: 1px solid rgba(23, 19, 19, .8); border-radius: 2px; }
.of-palette button:hover { outline: 1px solid var(--silver); z-index: 1; }
.of-palette button.active { outline: 2px solid var(--fire); outline-offset: 0; z-index: 2; box-shadow: 0 0 6px var(--fire); }
.of-color-actions { display: flex; gap: 6px; margin-top: 8px; }
.of-color-actions .btn-fire { flex: 1; }

.of-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.of-picker { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; }
.of-picker-head { display: grid; grid-template-columns: 30px 1fr 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.of-arrow {
  height: 30px; padding: 0; border-radius: 3px; font-size: 12px; color: var(--silver);
  background: linear-gradient(180deg, #3a2619, #140e0b); border: 1px solid var(--gold);
}
.of-arrow:hover { color: #fff; border-color: var(--fire); box-shadow: 0 0 8px rgba(255, 106, 0, .5); }
.of-picker-label {
  height: 30px; display: grid; place-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 700 13px Cinzel, serif; color: var(--silver); background: rgba(23, 19, 19, .85); border: 1px solid var(--bronze); border-radius: 3px;
}
.of-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px; align-content: start;
  max-height: 236px; overflow-y: auto; padding: 5px; background: rgba(23, 19, 19, .7); border: 1px solid var(--bronze); border-radius: 3px;
  scrollbar-width: thin; scrollbar-color: var(--bronze) transparent;
}
.of-cell {
  display: grid; justify-items: center; gap: 1px; padding: 2px 2px 4px; min-width: 0; border-radius: 3px;
  background: radial-gradient(circle at 50% 40%, #2c201a, #120d0b 75%); border: 1px solid #2a1d16; color: var(--silver);
}
.of-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px Inter, sans-serif; }
.of-thumb { width: 64px; height: 64px; image-rendering: pixelated; }
.of-none { width: 64px; height: 64px; display: grid; place-items: center; font-size: 28px; color: var(--bronze); }
.of-cell:hover { border-color: var(--gold); }
.of-cell.active { border-color: var(--fire); background: radial-gradient(circle at 50% 45%, rgba(255, 106, 0, .35), #120d0b 75%); box-shadow: 0 0 8px rgba(255, 106, 0, .45); color: #fff6e8; }
.of-empty { grid-column: 1 / -1; margin: 10px 0; text-align: center; color: var(--silver); font-size: 12px; }
.of-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(201, 138, 66, .25); }
.of-footer button { min-width: 110px; }
@media (max-width: 760px) {
  .of-layout { grid-template-columns: 1fr; }
}

/* ---------- loja ---------- */
.win.shop { width: 340px; }
.shop-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.shop-list { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; margin-bottom: 8px; }
.shop-row {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; text-align: left;
  background: rgba(0, 0, 0, .35); border: 1px solid transparent; border-radius: 3px; padding: 2px 8px 2px 2px; color: var(--text); font-size: 12px;
}
.shop-row canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.shop-row b { color: var(--gold-hi); font-weight: 700; white-space: nowrap; }
.shop-row:hover { border-color: var(--gold-lo); }
.shop-row.active { border-color: var(--fire); background: rgba(255, 106, 0, .12); }
.shop-empty { color: var(--muted); font-size: 12px; text-align: center; margin: 12px 0; }
.shop-footer { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: var(--silver); }
.shop-gold { display: block; margin-top: 8px; font-size: 12px; color: var(--gold-hi); text-align: right; }

/* ---------- troca ---------- */
.win.trade { width: 400px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.trade-col h4 { margin: 0 0 6px; font: 700 12px Cinzel, serif; color: var(--gold-hi); }
.trade-col .container-grid { grid-template-columns: repeat(4, 40px); min-height: 44px; }
.trade-col .container-grid .slot { width: 40px; height: 40px; }

/* ---------- livros ---------- */
.win.textwin { width: 360px; }
.win.textwin textarea {
  width: 100%; min-height: 220px; resize: vertical; background: #f3e6c8; color: #2b1d10; border: 1px solid var(--bronze);
  border-radius: 3px; padding: 10px; font: 14px/1.5 Georgia, serif;
}
.text-info { font-size: 11px; color: var(--muted); margin: 6px 0; }

/* ---------- quantidade / atalho ---------- */
.win.amount { width: 260px; }
.win.amount .win-body { display: grid; gap: 8px; }

/* ---------- batalha ---------- */
.win.battle { width: 230px; }
/* Battle List no estilo do Tibia: filtros, retrato, nome e barra de vida */
.bt-bar { display: flex; align-items: center; gap: 3px; padding: 0 0 6px; margin-bottom: 6px; border-bottom: 1px solid #3a2a20; }
.bt-filter, .bt-tool { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 1px solid #67402B; border-radius: 4px; background: linear-gradient(180deg, #2a1d16, #140e0b); color: #C98A42; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s, background .15s; }
.bt-filter svg, .bt-tool svg { width: 14px; height: 14px; fill: currentColor; }
.bt-filter svg .cut, .bt-tool svg .cut, .bt-menu-item svg .cut { fill: #140e0b; }
.bt-filter svg .line, .bt-tool svg .line, .bt-menu-item svg .line { fill: none; stroke: #140e0b; stroke-width: 1.4; }
.bt-filter:hover, .bt-tool:hover { color: #FF6A00; border-color: #C98A42; box-shadow: 0 0 6px rgba(255, 106, 0, .35); }
.bt-filter.off { color: #4d3a2e; border-color: #3a2a20; background: #0e0a09; position: relative; }
.bt-filter.off::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: #8a2a1a; transform: rotate(-35deg); border-radius: 1px; }
.bt-filter.off:hover { color: #C6B19A; }
.bt-tool { margin-left: auto; }
.bt-tool + .bt-tool { margin-left: 0; }
.bt-modes { color: #FF6A00; }
.bt-modes.unsafe { border-color: #8a2a1a; box-shadow: inset 0 0 0 1px rgba(255, 42, 42, .35); }
.battle-list { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.battle-row {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; width: 100%; padding: 2px 4px 2px 2px; text-align: left; cursor: pointer;
  background: rgba(0, 0, 0, .3); border: 1px solid transparent; border-radius: 4px; color: #C6B19A; font: bold 11px Verdana, sans-serif;
}
.battle-row:hover { border-color: #67402B; background: rgba(255, 106, 0, .06); }
.battle-row.target { border-color: #ff2a2a; box-shadow: inset 0 0 0 1px #ff2a2a, 0 0 6px rgba(255, 42, 42, .45); }
.bt-pic { width: 30px; height: 30px; background: #0e0a09 center / 30px 30px no-repeat; image-rendering: pixelated; border: 1px solid #2c201a; border-radius: 3px; }
.bt-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bt-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; color: #e6d6c2; }
.battle-row.kind-npc .bt-info b { color: #9fd4ff; }
.battle-row.kind-player .bt-info b { color: #b8f5a0; }
.bt-info em { display: block; height: 4px; background: #000; border: 1px solid #000; border-radius: 1px; overflow: hidden; }
.bt-info i { display: block; height: 100%; }
.bt-menu { position: fixed; z-index: 10000; min-width: 210px; padding: 4px; background: #171313; border: 1px solid #67402B; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .7); font: bold 11px Verdana, sans-serif; }
.bt-menu h5 { margin: 6px 6px 3px; color: #C98A42; font: bold 10px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.bt-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: 4px; background: none; color: #C6B19A; cursor: pointer; text-align: left; font: inherit; }
.bt-menu-item:hover { background: rgba(255, 106, 0, .14); color: #fff; }
.bt-menu-item i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #67402B; flex: none; }
.bt-menu-item.on i { background: #FF6A00; border-color: #FF6A00; box-shadow: 0 0 5px rgba(255, 106, 0, .8); }
.bt-menu-item i.ico { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #3a2a20; border-radius: 4px; background: #140e0b; color: #C98A42; box-shadow: none; }
.bt-menu-item i.ico svg { width: 13px; height: 13px; fill: currentColor; }
.bt-menu-item.on i.ico { background: #140e0b; border-color: #FF6A00; color: #FF6A00; box-shadow: 0 0 6px rgba(255, 106, 0, .5); }
.bt-menu-item.on { color: #FFD9B0; }

/* ---------- telas menores ---------- */
@media (max-width: 1500px) {
  .nav button { min-width: 58px; font-size: 11px; }
  .side-nav button { min-width: 44px; }
  .cta { padding: 0 16px 0 12px; font-size: 15px; }
}
@media (max-width: 1700px) {
  .nav-btn { min-width: 56px; }
  .nav-btn .emblem, .nav-btn svg.icon { width: 38px; height: 38px; }
  .nav-lbl { font-size: 10px; }
  .side-nav .nav-btn { min-width: 44px; }
  .side-nav .nav-lbl { display: none; }
}
@media (max-width: 1500px) {
  .brand-logo { width: 200px; }
  .logo-space { width: 196px; }
  .feature { width: 80px; }
  .feature svg.icon { width: 66px; height: 66px; }
  .purse-item:not(.bank) small { display: none; }
}
@media (max-width: 1250px) {
  .hunt-cfg { display: none; }
  .side-nav button:not(#btn-logout):not([data-toggle]) { display: none; }
  .money.gem { display: none; }
}
@media (max-width: 900px) {
  .brand-logo { width: 120px; }
  .logo-space { width: 112px; }
  .feature-btns, .purse-item:not(.bank), .purse-sep { display: none; }
  .cta-group { display: none; }
  .top-logo { height: 44px; }
  .nav button i canvas.ico { height: 26px; }
  .nav button { min-width: 48px; font-size: 10px; }
  .main-nav button:disabled { display: none; }
  .hotbar-slots { grid-template-columns: repeat(12, 30px); gap: 2px; }
  .hot-slot { width: 30px; height: 30px; }
  .hot-slot canvas { width: 26px; height: 26px; }
  .hotbar-side .round-row { display: none; }
  .btn-stop { width: 64px; font-size: 12px; }
}

/* ---------- Store ---------- */
.store-win { width: min(1040px, calc(100vw - 24px)); }
.store-win .win-body { padding: 10px 12px 12px; }
.st-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.st-tabs { display: flex; gap: 4px; }
.st-tabs button, .st-inbox {
  padding: 6px 14px; border: 1px solid #4a2f1d; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #221917, #110c0b); color: #d8c7b0;
  font: 600 15px "Crimson Pro", Georgia, serif;
}
.st-tabs button:hover, .st-inbox:hover { color: #fff1cf; border-color: var(--gold); }
.st-tabs button.active { color: #fff4e0; border-color: #ffa347; background: linear-gradient(180deg, #5a2408, #2a0f04); box-shadow: 0 0 10px rgba(255, 106, 0, .4); }
.st-inbox { margin-left: auto; }
.st-balance {
  display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 8px; border: 1px solid #67402B; border-radius: 6px;
  background: linear-gradient(180deg, #171111, #0b0807); box-shadow: inset 0 0 0 1px #000;
}
.st-balance svg.icon { width: 30px; height: 30px; }
.st-balance small { display: block; font: 600 11px "Crimson Pro", Georgia, serif; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.st-balance b { font: 700 20px/1 "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.st-main { display: grid; grid-template-columns: 190px 1fr 260px; gap: 10px; height: min(560px, calc(100vh - 300px)); min-height: 320px; }
.st-cats, .st-offers, .st-detail, .st-history, .st-transfer {
  border: 1px solid #2c2320; border-radius: 6px; background: linear-gradient(180deg, #141010, #0b0807);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .8);
}
.st-cats { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.st-cat {
  position: relative; display: flex; align-items: center; gap: 6px; text-align: left; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px;
  background: none; color: #d8c7b0; cursor: pointer; font: 600 15px "Crimson Pro", Georgia, serif;
}
.st-cat span { flex: 1; }
.st-cat em { font: 600 11px Inter, sans-serif; font-style: normal; color: #8f7a64; }
.st-cat.child { padding-left: 22px; font-size: 14px; color: #bfae98; }
.st-cat.child::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg); background: #67402B; }
.st-cat:hover { color: #fff1cf; background: rgba(255, 106, 0, .06); }
.st-cat.active { color: #fff4e0; border-color: #C98A42; background: linear-gradient(90deg, rgba(255, 106, 0, .22), rgba(255, 106, 0, .04)); box-shadow: 0 0 8px rgba(255, 106, 0, .3); }
.st-cat.active.child::before { background: #FF6A00; }
.st-flag { font: 700 9px Inter, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 3px; color: #fff; }
.st-flag.new { background: linear-gradient(180deg, #2f86d8, #16407d); }
.st-flag.sale { background: linear-gradient(180deg, #ff8a3a, #c62f00); }
.st-offers { display: flex; flex-direction: column; min-width: 0; }
.st-cat-head { padding: 8px 12px 6px; border-bottom: 1px solid #2c2320; }
.st-cat-head h3 { margin: 0; font: 700 20px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.st-cat-head p { margin: 2px 0 0; font: 400 12px/1.35 Inter, sans-serif; color: #a8957f; max-height: 34px; overflow: hidden; }
.st-grid { flex: 1; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; }
.st-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; cursor: pointer;
  border: 1px solid #3a2a20; border-radius: 6px; background: radial-gradient(ellipse at 50% 30%, #231a16, #0d0909 75%); color: #F3E7D3;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.st-card:hover { border-color: #C98A42; transform: translateY(-1px); box-shadow: 0 0 10px rgba(255, 106, 0, .35); }
.st-card.active { border-color: #FFA347; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255, 106, 0, .6), inset 0 0 14px rgba(255, 106, 0, .2); }
.st-card.cant .st-price { color: #9a7f6a; }
.st-card .st-flag { position: absolute; top: 6px; right: 6px; }
.st-pic { display: grid; place-items: center; flex: none; }
.st-pic canvas { image-rendering: pixelated; width: 100%; height: 100%; }
.st-sym { width: 70%; height: 70%; }
.st-name { font: 600 13.5px/1.15 "Crimson Pro", Georgia, serif; text-align: center; min-height: 2.3em; display: flex; align-items: center; }
.st-price { display: flex; align-items: center; gap: 4px; font: 700 14px "Crimson Pro", Georgia, serif; color: #FFC27A; }
.st-price svg.icon, .st-big-price svg.icon { width: 16px; height: 16px; }
.st-price s, .st-big-price s { color: #8f7a64; font-weight: 500; margin-right: 2px; }
.st-detail { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; }
.st-dscroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 2px; }
.st-detail .st-pic { border-radius: 8px; background: radial-gradient(circle, rgba(255, 106, 0, .16), transparent 70%); }
.st-detail h4 { margin: 0; text-align: center; font: 700 19px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.st-detail h4 small { color: var(--gold); }
.st-desc { align-self: stretch; font: 400 12.5px/1.45 Inter, sans-serif; color: #c9b8a2; }
.st-desc i { color: #e6d7c0; }
.st-bullet { display: block; padding-left: 14px; position: relative; color: #d8c7b0; }
.st-bullet::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; transform: rotate(45deg); background: #FF6A00; }
.st-until { margin: 0; font: 600 12px Inter, sans-serif; color: #FFA347; }
.st-hint, .st-empty { margin: auto; padding: 20px; text-align: center; color: #8f7a64; font: 500 15px "Crimson Pro", Georgia, serif; }
.st-buy { flex: none; padding-top: 8px; border-top: 1px solid #2c2320; align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.st-buy select { padding: 6px; background: #0b0807; color: #d8c7b0; border: 1px solid #4a2f1d; border-radius: 4px; }
.st-big-price { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 22px "Crimson Pro", Georgia, serif; color: #FFC27A; }
.st-big-price svg.icon { width: 24px; height: 24px; }
.st-buy .btn-fire { width: 100%; }
.st-buy .btn-fire:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.st-history { height: min(560px, calc(100vh - 300px)); overflow-y: auto; }
.st-history table { width: 100%; border-collapse: collapse; font: 400 13px Inter, sans-serif; color: #d8c7b0; }
.st-history th { position: sticky; top: 0; background: #1a1311; text-align: left; padding: 8px 10px; font: 700 14px "Crimson Pro", Georgia, serif; color: var(--gold); border-bottom: 1px solid #4a2f1d; }
.st-history td { padding: 6px 10px; border-bottom: 1px solid #221917; }
.st-history td.plus { color: #7fd38a; font-weight: 700; }
.st-history td.minus { color: #ff8a5a; font-weight: 700; }
.st-transfer { display: flex; flex-direction: column; gap: 10px; padding: 16px; max-width: 420px; }
.st-transfer p { margin: 0; color: #c9b8a2; font: 400 13px/1.4 Inter, sans-serif; }
.st-toast {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; padding: 8px 16px; border-radius: 6px;
  border: 1px solid #C98A42; background: linear-gradient(180deg, #2a1d14, #120c09); color: #F3E7D3; font: 600 15px "Crimson Pro", Georgia, serif;
  box-shadow: 0 0 14px rgba(255, 106, 0, .45); animation: sys-in .16s ease-out;
}
.st-toast.bad { border-color: #c62f00; color: #ffc0a8; }
.st-confirm p { margin: 0 0 6px; color: #d8c7b0; font: 500 16px "Crimson Pro", Georgia, serif; }
.st-confirm .st-c { color: #FFC27A; }
.st-confirm .st-after { font-size: 13px; color: #8f7a64; }
.st-confirm-row { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 1100px) { .st-main { grid-template-columns: 150px 1fr 210px; } }
.st-main > * { min-height: 0; }
.st-offers { overflow: hidden; }

/* ---------- Hunts ---------- */
.hunt-go { display: grid; gap: 5px; justify-items: stretch; padding-right: 8px; border-right: 1px solid rgba(201, 138, 66, .25); min-width: 116px; }
.btn-hunts {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; cursor: pointer; border-radius: 5px;
  font: 700 17px "Crimson Pro", Georgia, serif; letter-spacing: .04em; color: #fff4e0; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #ff8a2a, #c94a00 55%, #7a2400); border: 1px solid #ffb062;
  box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255, 106, 0, .55), inset 0 1px 0 rgba(255, 240, 210, .45);
  position: relative;
}
.btn-hunts::after {   /* pulso só com opacidade (barato) */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px rgba(255, 106, 0, .8); opacity: 0; animation: hunt-pulse 2.4s ease-in-out infinite;
}
.btn-hunts span { font-size: 18px; }
.btn-hunts:hover, .btn-hunts.on { filter: brightness(1.12); box-shadow: 0 0 0 1px #000, 0 0 22px rgba(255, 106, 0, .85), inset 0 1px 0 rgba(255, 240, 210, .5); }
@keyframes hunt-pulse { 50% { opacity: 1; } }
.hunt-where { font: 500 12px Inter, sans-serif; color: #a8957f; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.hunt-where b { color: #F3E7D3; font-weight: 600; }

.hunts-win { width: min(820px, calc(100vw - 24px)); }
.hunts-win .win-body { padding: 10px 12px 12px; }
.hu-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hu-me { display: grid; padding: 4px 14px; border: 1px solid #67402B; border-radius: 6px; background: linear-gradient(180deg, #171111, #0b0807); }
.hu-me small { font: 600 11px "Crimson Pro", Georgia, serif; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.hu-me b { font: 700 20px/1 "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.hu-leave { margin-left: auto; }
.hu-list { display: flex; flex-direction: column; gap: 6px; max-height: min(600px, calc(100vh - 300px)); overflow-y: auto; padding-right: 4px; }
.hu-row {
  display: grid; grid-template-columns: 200px 1fr 92px 128px; align-items: center; gap: 12px; padding: 6px 10px;
  border: 1px solid #2c2320; border-radius: 8px; background: linear-gradient(90deg, #171111, #0c0908);
  transition: border-color .12s, box-shadow .12s;
}
.hu-row:hover { border-color: #67402B; }
.hu-row.good { border-color: #8a5a2c; box-shadow: inset 3px 0 0 #FF6A00, 0 0 10px rgba(255, 106, 0, .18); }
.hu-row.here { border-color: #FFA347; box-shadow: inset 3px 0 0 #FFA347, 0 0 14px rgba(255, 106, 0, .35); }
.hu-row.locked { opacity: .5; }
.hu-pics { display: flex; gap: 2px; }
.hu-pic { width: 48px; height: 48px; border-radius: 6px; background: radial-gradient(circle at 50% 45%, rgba(255, 106, 0, .14), transparent 70%); display: grid; place-items: center; }
.hu-pic canvas { width: 64px; height: 64px; image-rendering: pixelated; margin: -8px -8px 0 0; }
.hu-info { display: flex; flex-direction: column; min-width: 0; }
.hu-info b { font: 700 18px/1.15 "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.hu-region { font: 600 12px Inter, sans-serif; color: var(--gold); }
.hu-mons { font: 400 12px Inter, sans-serif; color: #a8957f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu-lv { display: grid; justify-items: center; gap: 2px; }
.hu-lv small { font: 600 10px "Crimson Pro", Georgia, serif; color: #8f7a64; text-transform: uppercase; letter-spacing: .08em; }
.hu-lv b { font: 700 17px/1 "Crimson Pro", Georgia, serif; color: #FFC27A; }
.hu-go { width: 100%; }
.hu-go:disabled { cursor: default; }
@media (max-width: 900px) { .hu-row { grid-template-columns: 1fr 80px 110px; } .hu-pics { display: none; } }

.hunt-loading {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(120, 40, 0, .35), transparent 60%), radial-gradient(ellipse at 50% 50%, #1a1210, #070505 75%);
  transition: opacity .4s ease;
}
.hunt-loading.hidden { display: none; }
.hunt-loading.out { opacity: 0; pointer-events: none; }
.hl-card { display: grid; justify-items: center; gap: 8px; width: min(560px, calc(100vw - 40px)); text-align: center; }
.hl-logo { width: 260px; filter: drop-shadow(0 0 18px rgba(255, 106, 0, .45)); animation: hl-breathe 2.4s ease-in-out infinite; }
@keyframes hl-breathe { 50% { filter: drop-shadow(0 0 30px rgba(255, 106, 0, .75)); } }
.hl-kicker { margin: 4px 0 0; font: 600 12px Inter, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.hl-name { margin: 0; font: 700 34px/1.1 "Crimson Pro", Georgia, serif; color: #F3E7D3; text-shadow: 0 2px 6px #000, 0 0 18px rgba(255, 106, 0, .35); }
.hl-region { margin: 0; font: 500 15px "Crimson Pro", Georgia, serif; color: #c9b8a2; }
.hl-mons { display: flex; gap: 6px; min-height: 56px; margin: 6px 0 4px; }
.hl-mons .hu-pic { width: 56px; height: 56px; }
.hl-bar { width: 100%; height: 12px; border-radius: 6px; overflow: hidden; background: #0b0807; border: 1px solid #67402B; box-shadow: inset 0 0 6px #000; }
.hl-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a2400, #FF6A00 60%, #FFC27A); box-shadow: 0 0 12px rgba(255, 106, 0, .8); }
.hl-status { margin: 2px 0 0; font: 600 14px Inter, sans-serif; color: #F3E7D3; }
.hl-tip { margin: 6px 0 0; font: italic 400 14px "Crimson Pro", Georgia, serif; color: #8f7a64; }

/* ---------- Bot (barra de baixo) ---------- */
.bot-panel { display: grid; gap: 4px; padding: 0 10px 0 0; border-right: 1px solid rgba(201, 138, 66, .25); background: none; cursor: grab; text-transform: none; letter-spacing: 0; min-width: 300px; }
.bot-row { display: flex; align-items: flex-end; gap: 6px; }
.bot-panel label { display: grid; gap: 1px; font: 600 10px "Crimson Pro", Georgia, serif; color: var(--gold-hi); text-transform: uppercase; letter-spacing: .06em; }
.bot-panel select { width: 92px; padding: 2px 4px; background: #0d0907; border: 1px solid #000; box-shadow: 0 0 0 1px #4a3122; color: var(--silver); font: 600 11px Inter, sans-serif; border-radius: 3px; cursor: pointer; }
.bot-switch { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.bot-switch input { display: none; }
.bot-switch .track { position: relative; width: 44px; height: 22px; border-radius: 11px; background: #1a1210; border: 1px solid #67402B; box-shadow: inset 0 0 6px #000; transition: background .15s; }
.bot-switch .track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d8c7b0, #67402B); transition: left .15s, background .15s, box-shadow .15s; }
.bot-switch input:checked + .track { background: linear-gradient(180deg, #a83d00, #5a1f00); border-color: #FFA347; }
.bot-switch input:checked + .track i { left: 24px; background: radial-gradient(circle at 40% 35%, #fff4e0, #FF6A00); box-shadow: 0 0 8px #FF6A00; }
.bot-switch b { font: 700 17px "Crimson Pro", Georgia, serif; color: #F3E7D3; letter-spacing: .03em; text-transform: none; }
.bot-stamina-wrap { margin-left: auto; font: 600 12px Inter, sans-serif; color: #a8957f; }
.bot-stamina-wrap b { color: #F3E7D3; }
.bot-status { font: 500 12px Inter, sans-serif; color: #8f7a64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.bot-status.live { color: #FFC27A; }
.bot-status.live::before { content: "● "; color: #FF6A00; animation: blink 1s steps(2) infinite; }
.bot-panel .btn-ghost.small { flex: 1; }

.spell-ic { display: inline-block; flex: none; border-radius: 4px; background-repeat: no-repeat; box-shadow: 0 0 0 1px #000, 0 0 0 2px #4a3122; image-rendering: auto; }
.spell-ic.txt { display: inline-grid; place-items: center; font-weight: 700; font-family: Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.spell-ic.txt.atk { background: linear-gradient(135deg, #c62f00, #4a0f00); }
.spell-ic.txt.heal { background: linear-gradient(135deg, #2f86d8, #0b2a5a); }
.spell-ic.txt.sup { background: linear-gradient(135deg, #2fa84f, #0b3a1a); }
.spell-ic.txt.spc { background: linear-gradient(135deg, #8a5a2c, #2a1a0d); }
.hot-slot .spell-ic { width: 36px !important; height: 36px !important; box-shadow: none; }
.hot-slot.over { box-shadow: 0 0 0 2px #FFA347, 0 0 10px rgba(255, 106, 0, .7); }
.hot-cd { position: absolute; inset: 0; border-radius: 3px; pointer-events: none; --cd: 0deg; background: conic-gradient(transparent var(--cd), rgba(0, 0, 0, .72) var(--cd)); animation: hot-cd linear forwards; }
@property --cd { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hot-cd { from { --cd: 0deg; } to { --cd: 360deg; } }
.spells-win { width: min(560px, calc(100vw - 24px)); }
.sp-top { display: flex; gap: 8px; align-items: center; }
.sp-search { flex: 1; min-width: 0; }
.sp-hint { margin: 6px 0; font: 400 12px Inter, sans-serif; color: #8f7a64; }
.sp-list { display: flex; flex-direction: column; gap: 4px; max-height: min(520px, calc(100vh - 320px)); overflow-y: auto; padding-right: 4px; }
.sp-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 5px 8px; border: 1px solid #2c2320; border-radius: 6px; background: linear-gradient(90deg, #171111, #0c0908); cursor: grab; }
.sp-row:hover { border-color: #C98A42; box-shadow: 0 0 8px rgba(255, 106, 0, .25); }
.sp-info { display: grid; min-width: 0; }
.sp-info b { font: 700 16px/1.1 "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.sp-info code, .bot-label code { font: 600 12px ui-monospace, Consolas, monospace; color: #FFC27A; }
.sp-info small { font: 400 11px Inter, sans-serif; color: #a8957f; }
.sp-info i, .bot-label small { font-style: normal; }
i.atk, small.atk { color: #ff8a5a; } i.heal, small.heal { color: #7fb8ff; } i.sup, small.sup { color: #7fd38a; }

.bot-win { width: min(720px, calc(100vw - 24px)); }
.bot-intro { margin: 0 0 8px; font: 400 12.5px/1.4 Inter, sans-serif; color: #a8957f; }
.bot-sec { margin-bottom: 10px; padding: 8px 10px; border: 1px solid #2c2320; border-radius: 8px; background: linear-gradient(180deg, #141010, #0b0807); }
.bot-sec h4 { margin: 0 0 6px; font: 700 18px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.bot-sec.heal h4::before { content: "✚ "; color: #7fb8ff; }
.bot-sec.attack h4::before { content: "⚔ "; color: #ff8a5a; }
.bot-rules { display: flex; flex-direction: column; gap: 4px; min-height: 20px; }
.bot-rule { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center; padding: 4px 6px; border: 1px solid #2c2320; border-radius: 6px; background: #120d0c; }
.bot-pic { display: grid; place-items: center; width: 36px; height: 36px; }
.bot-pic canvas { image-rendering: pixelated; }
.bot-label { font: 600 14px "Crimson Pro", Georgia, serif; color: #F3E7D3; min-width: 0; }
.bot-cond { display: flex; gap: 8px; }
.bot-cond label { display: flex; align-items: center; gap: 4px; }
.bot-cond small { font: 600 11px Inter, sans-serif; color: #a8957f; }
.bot-cond input { width: 52px; padding: 3px 4px; background: #0b0807; border: 1px solid #4a2f1d; border-radius: 3px; color: #F3E7D3; font: 600 12px Inter, sans-serif; }
.bot-cond em { font: 600 11px Inter, sans-serif; font-style: normal; color: #8f7a64; }
.bot-ctl { display: flex; gap: 3px; }
.round.mini { width: 24px; height: 24px; font-size: 12px; }
.bot-empty { margin: 2px 0; font: italic 400 13px "Crimson Pro", Georgia, serif; color: #8f7a64; }
.bot-add { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 6px; }
.bot-add select { padding: 4px; background: #0b0807; color: #d8c7b0; border: 1px solid #4a2f1d; border-radius: 4px; font: 500 12px Inter, sans-serif; }
.bot-drop { grid-column: 1 / -1; padding: 8px; border: 1px dashed #67402B; border-radius: 6px; text-align: center; font: 500 12px Inter, sans-serif; color: #8f7a64; }
.bot-drop.over { border-color: #FFA347; color: #FFC27A; background: rgba(255, 106, 0, .08); }
.bot-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Opções: modo desempenho ---------- */
body.perf-mode *, body.perf-mode *::before, body.perf-mode *::after { animation: none !important; transition: none !important; }
body.perf-mode .tb-logo-shine::before, body.perf-mode .tb-btn:not(.feat), body.perf-mode .tb-spark { animation: none; }
body.perf-mode .tb-logo::before, body.perf-mode .tb-btn::before, body.perf-mode .tb-ico::before { opacity: .5; }
body.hide-fps .tb-net { visibility: hidden; }

/* ---------- tooltips de itens e magias ---------- */
#tip {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  display: none; flex-direction: column; gap: 2px;
  max-width: 280px; padding: 7px 10px 8px;
  background: #171313; color: #C6B19A;
  border: 1px solid #67402B; border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(201, 138, 66, .18);
  font: 12px/1.35 system-ui, sans-serif;
}
#tip.on { display: flex; }
#tip b { color: #FFD9B0; font: 600 14px/1.2 "Crimson Pro", Georgia, serif; text-transform: capitalize; }
#tip code { color: #FF6A00; font: 11px ui-monospace, monospace; }
#tip .tip-kind { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #C98A42; }
#tip .tip-kind.atk { color: #ff7a4a; } #tip .tip-kind.heal { color: #7fd17f; } #tip .tip-kind.sup { color: #8fb6ff; }
#tip span { color: #e6d6c2; }
#tip .tip-req { color: #C98A42; }
#tip i { color: #a8957f; font-size: 11px; }
#tip small { color: #8d7a66; font-size: 11px; margin-top: 2px; }

/* ---------- barra de atalhos: arrastar entre slots ---------- */
.hot-slot[draggable="true"] { cursor: grab; }
.hot-slot.dragging { opacity: .35; }

/* ---------- janela Opções ---------- */
.options-win { width: 520px; }
.opt-tabs { margin: 0 0 10px; }
.opt-tabs + .opt-sec h4 { display: none; }
.opt-sec { margin: 0 0 12px; }
.opt-sec h4 { margin: 0 0 6px; color: #C98A42; font: 600 13px "Crimson Pro", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #67402B; padding-bottom: 3px; }
.opt-row { display: flex; align-items: center; gap: 12px; padding: 7px 2px; border-bottom: 1px solid rgba(103, 64, 43, .35); }
.opt-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt-txt b { color: #e6d6c2; font-size: 13px; font-weight: 600; }
.opt-txt small { color: #9c876f; font-size: 11px; line-height: 1.3; }
.opt-switch { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; border: 1px solid #67402B; background: #241b17; cursor: pointer; padding: 0; }
.opt-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #C6B19A; transition: transform .15s; }
.opt-switch.on { background: #FF6A00; border-color: #FFA347; }
.opt-switch.on::after { transform: translateX(18px); background: #fff3e6; }
.opt-seg { display: flex; flex: none; border: 1px solid #67402B; border-radius: 4px; overflow: hidden; }
.opt-seg button { background: #1f1714; color: #C6B19A; border: 0; border-left: 1px solid #67402B; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.opt-seg button:first-child { border-left: 0; }
.opt-seg button.active { background: #FF6A00; color: #171313; font-weight: 700; }
.opt-foot { margin: 4px 0 0; color: #8d7a66; font-size: 11px; text-align: center; }

/* ---------- raridade dos itens (★ azul, ★★ roxa, ★★★ dourada) ---------- */
.slot.rar-1, .ps-slot.rar-1 { box-shadow: inset 0 0 0 1px #4da3ff, inset 0 0 10px rgba(77, 163, 255, .45); }
.slot.rar-2, .ps-slot.rar-2 { box-shadow: inset 0 0 0 1px #b26bff, inset 0 0 10px rgba(178, 107, 255, .5); }
.slot.rar-3, .ps-slot.rar-3 { box-shadow: inset 0 0 0 1px #ffc93c, inset 0 0 12px rgba(255, 201, 60, .55); }
/* ★★★★ Mítica (só pela fusão de afixos): vermelho-sangue com brilho pulsando */
@keyframes rar4-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px #ff3b4e, inset 0 0 12px rgba(255, 59, 78, .55); } 50% { box-shadow: inset 0 0 0 1px #ff8a96, inset 0 0 18px rgba(255, 59, 78, .9); } }
.slot.rar-4, .ps-slot.rar-4, .container-grid .slot.rar-4 { animation: rar4-pulse 1.8s ease-in-out infinite; }
.rar-stars {
  position: absolute; left: 2px; top: 0; pointer-events: none;
  font: 700 8px/1 system-ui, sans-serif; letter-spacing: -1px; font-style: normal;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.rar-1 > .rar-stars, .battle-stars.rar-1 { color: #4da3ff; }
.rar-2 > .rar-stars, .battle-stars.rar-2 { color: #b26bff; }
.rar-3 > .rar-stars, .battle-stars.rar-3 { color: #ffc93c; }
.rar-4 > .rar-stars, .battle-stars.rar-4 { color: #ff3b4e; }
.battle-stars { font-style: normal; font-size: 10px; letter-spacing: -1px; }
#tip .tip-rar { font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .04em; }
#tip .tip-bonus { font-weight: 600; }
#tip .tip-price { color: #C98A42; }

/* ---------- Loot Pouch ---------- */
.win.loot-pouch .win-title { color: #8fd0ff; }
.pouch-auto { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #C6B19A; cursor: pointer; user-select: none; }
.pouch-auto input { accent-color: #FF6A00; margin: 0; }

.pouch-sell { width: 560px; max-width: calc(100vw - 32px); }
.ps-intro { border: 1px solid #67402B; border-radius: 8px; padding: 10px 12px; background: linear-gradient(180deg, rgba(255, 106, 0, .07), rgba(0, 0, 0, .15)); margin-bottom: 10px; }
.ps-head { display: flex; flex-direction: column; gap: 2px; }
.ps-head b { color: #FFD9B0; font: 700 14px "Crimson Pro", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.ps-head span { font-size: 12px; color: #C6B19A; }
.ps-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; counter-reset: ps; }
.ps-steps li { counter-increment: ps; background: rgba(0, 0, 0, .3); border-radius: 6px; padding: 7px 8px 7px 30px; font-size: 11px; color: #d8c7b1; position: relative; line-height: 1.3; }
.ps-steps li::before { content: counter(ps); position: absolute; left: 7px; top: 7px; width: 17px; height: 17px; border-radius: 50%; background: #C98A42; color: #171313; font: 700 11px/17px system-ui; text-align: center; }
.ps-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid #3a2a20; border-radius: 8px; min-height: 64px; max-height: 260px; overflow: auto; background: rgba(0, 0, 0, .25); }
.ps-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 4px 3px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; color: #C98A42; }
.ps-cell small { font-size: 10px; font-weight: 700; }
.ps-cell:hover { border-color: #67402B; }
.ps-cell.marked { border-color: #FF6A00; background: rgba(255, 106, 0, .14); box-shadow: 0 0 8px rgba(255, 106, 0, .35); }
.ps-cell.marked small { color: #FFD9B0; }
.ps-slot { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.ps-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border: 1px solid #3a2a20; border-radius: 8px; font-size: 11px; }
.ps-filters b { color: #FFD9B0; font: 700 12px "Crimson Pro", Georgia, serif; letter-spacing: .05em; text-transform: uppercase; }
.ps-chip { display: flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid #67402B; border-radius: 999px; cursor: pointer; color: #C6B19A; }
.ps-chip input { accent-color: #FF6A00; margin: 0; }
.ps-note { margin: 7px 2px 0; font-size: 11px; color: #8d7a66; min-height: 1em; }
.ps-sum { margin-top: 6px; padding: 8px 10px; border: 1px solid #3a2a20; border-radius: 6px; font-size: 12px; color: #e6d6c2; background: rgba(0, 0, 0, .25); }
.ps-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 560px) { .ps-steps { grid-template-columns: 1fr; } }

/* Loot Pouch animada na interface (faixa de 8 quadros de 32 px) */
.pouch-anim {
  position: relative; display: block; width: 32px; height: 32px; image-rendering: pixelated; overflow: hidden;
  background: url(/ui/loot-pouch.png?v=2) 0 0 / 1600% 100% no-repeat;
  animation: pouch-frames 1.6s steps(16) infinite, pouch-glow 2.4s ease-in-out infinite;
}
/* feixe de luz largo passando + faísca: o brilho da Loot Pouch bem visível */
.pouch-anim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 38%, rgba(190, 240, 255, .55) 45%, rgba(255, 255, 255, .95) 50%, rgba(190, 240, 255, .55) 55%, transparent 62% 100%) no-repeat;
  background-size: 300% 100%;
  -webkit-mask: url(/ui/loot-pouch.png?v=2) 0 0 / 1600% 100% no-repeat; mask: url(/ui/loot-pouch.png?v=2) 0 0 / 1600% 100% no-repeat;
  mix-blend-mode: screen;
  animation: pouch-sweep 2.4s ease-in-out infinite;
}
.pouch-anim::after {
  content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, rgba(170, 230, 255, .9) 30%, transparent 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0; animation: pouch-spark 2.4s ease-in-out infinite;
}
@keyframes pouch-sweep { 0%, 35% { background-position: 100% 0; } 75%, 100% { background-position: 0 0; } }
@keyframes pouch-spark { 0%, 62% { opacity: 0; transform: scale(.3) rotate(0); } 72% { opacity: 1; transform: scale(1.3) rotate(45deg); } 86%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes pouch-glow { 0%, 100% { filter: drop-shadow(0 0 1px rgba(90, 190, 255, .5)); } 50% { filter: drop-shadow(0 0 4px rgba(120, 210, 255, .95)) brightness(1.15); } }
/* a bolsa brilha até no Modo desempenho (é leve) */
body.perf-mode .pouch-anim { animation: pouch-frames 1.6s steps(16) infinite, pouch-glow 2.4s ease-in-out infinite !important; }
body.perf-mode .pouch-anim::before { animation: pouch-sweep 2.4s ease-in-out infinite !important; }
body.perf-mode .pouch-anim::after { animation: pouch-spark 2.4s ease-in-out infinite !important; }
@keyframes pouch-frames { to { background-position-x: 106.6667%; } }
/* Boss Loot Backpack: maior que os outros itens (enche o slot) e com um feixe dourado passando */
.boss-anim {
  position: relative; display: block; width: 40px; height: 40px; margin: -4px; image-rendering: pixelated; z-index: 1;
  background: url(/ui/boss-backpack.png?v=2) 0 0 / 5200% 100% no-repeat;
  animation: boss-frames 8.32s steps(52) infinite, boss-glow 2.6s ease-in-out infinite;
}
.boss-anim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 36%, rgba(255, 200, 90, .55) 44%, rgba(255, 250, 225, .98) 50%, rgba(255, 200, 90, .55) 56%, transparent 64% 100%) no-repeat;
  background-size: 300% 100%;
  -webkit-mask: url(/ui/boss-backpack.png?v=2) 0 0 / 5200% 100% no-repeat; mask: url(/ui/boss-backpack.png?v=2) 0 0 / 5200% 100% no-repeat;
  mix-blend-mode: screen;
  animation: boss-sweep 2.6s ease-in-out infinite;
}
.boss-anim::after {
  content: ""; position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 215, 120, .95) 32%, transparent 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0; animation: boss-spark 2.6s ease-in-out infinite;
}
.inventory .slot .boss-anim { width: 46px; height: 46px; margin: -5px; }
@keyframes boss-frames { to { background-position-x: 101.9608%; } }
@keyframes boss-sweep { 0%, 30% { background-position: 100% 0; } 72%, 100% { background-position: 0 0; } }
@keyframes boss-spark { 0%, 60% { opacity: 0; transform: scale(.3) rotate(0); } 70% { opacity: 1; transform: scale(1.35) rotate(45deg); } 85%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes boss-glow { 0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 170, 60, .45)); } 50% { filter: drop-shadow(0 0 5px rgba(255, 190, 80, .95)) brightness(1.12); } }
body.perf-mode .boss-anim { animation: boss-frames 8.32s steps(52) infinite, boss-glow 2.6s ease-in-out infinite !important; }
body.perf-mode .boss-anim::before { animation: boss-sweep 2.6s ease-in-out infinite !important; }
body.perf-mode .boss-anim::after { animation: boss-spark 2.6s ease-in-out infinite !important; }
/* janelas: o título não encosta na borda de cima */

/* poção do banco na barra ($ = paga pelo banco) e janela do bot com abas */
.hot-count.bank { color: #ffd76a; font-weight: 800; }
.potion-ic { display: grid; place-items: center; background: #1f1714; border-radius: 6px; }
.bot-tabs { margin-bottom: 6px; }
.bot-scroll { max-height: min(58vh, 520px); overflow: auto; padding-right: 4px; }
.bot-sec.target .opt-row { gap: 14px; }
.bot-names { width: 230px; }
.bot-cond select { background: #1f1714; color: #e6d6c2; border: 1px solid #67402B; border-radius: 4px; padding: 2px 4px; font-size: 12px; }

/* ---------- estados do personagem (ícones originais do Tibia) ---------- */
.state-bar {
  position: fixed; z-index: 48; left: 50%; transform: translateX(-50%); top: calc(var(--tb-h) + 6px);
  display: flex; gap: 4px; padding: 4px 7px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(18, 12, 11, .92), rgba(10, 7, 6, .88));
  border: 1px solid #67402B; border-top: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.state-bar.empty { display: none; }
.state-ic { width: 18px; height: 18px; background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
#screen-login .state-bar, #screen-chars .state-bar { display: none; }

/* ---------- containers (mochilas, bolsas): slots simples, só sombreados ---------- */
.win.container { width: 240px; }
.container-grid { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #67402B transparent; padding: 2px 2px 4px; }
.container-grid .slot {
  border: 1px solid #0b0807; border-image: none; outline: none; border-radius: 3px;
  background: radial-gradient(circle at 50% 40%, #1e1613, #110d0b 75%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(201, 138, 66, .10), 0 1px 0 rgba(201, 138, 66, .08);
}
.container-grid .slot::before { display: none; }
.container-grid .slot:not(.empty):hover, .container-grid .slot.empty:hover {
  border-image: none; border-color: #3a2618;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), inset 0 0 10px rgba(255, 106, 0, .22), 0 0 6px rgba(255, 106, 0, .3);
}
.container-grid .slot.rar-1 { box-shadow: inset 0 0 0 1px #4da3ff, inset 0 0 10px rgba(77, 163, 255, .45); }
.container-grid .slot.rar-2 { box-shadow: inset 0 0 0 1px #b26bff, inset 0 0 10px rgba(178, 107, 255, .5); }
.container-grid .slot.rar-3 { box-shadow: inset 0 0 0 1px #ffc93c, inset 0 0 12px rgba(255, 201, 60, .55); }

/* ---------- tooltip na cor da raridade ---------- */
#tip[data-rar="1"] { border-color: #4da3ff; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(77, 163, 255, .45), 0 6px 16px rgba(0, 0, 0, .6); background: linear-gradient(180deg, rgba(77, 163, 255, .16), rgba(23, 19, 19, 0) 45%), #171313; }
#tip[data-rar="2"] { border-color: #b26bff; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(178, 107, 255, .5), 0 6px 16px rgba(0, 0, 0, .6); background: linear-gradient(180deg, rgba(178, 107, 255, .18), rgba(23, 19, 19, 0) 45%), #171313; }
#tip[data-rar="3"] { border-color: #ffc93c; box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 201, 60, .55), 0 6px 16px rgba(0, 0, 0, .6); background: linear-gradient(180deg, rgba(255, 201, 60, .18), rgba(23, 19, 19, 0) 45%), #171313; }
#tip[data-rar="4"] { border-color: #ff3b4e; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255, 59, 78, .6), 0 6px 16px rgba(0, 0, 0, .6); background: linear-gradient(180deg, rgba(255, 59, 78, .2), rgba(23, 19, 19, 0) 45%), #171313; }

/* ---------- cooldown na barra: segundos restantes ---------- */
.hot-cd-sec { position: absolute; inset: 0; display: grid; place-items: center; font: 800 13px/1 Inter, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }

/* ---------- skills completas ---------- */
.skills em.up, .sh-row em.up { color: #6fd36f; font-style: normal; font-weight: 600; font-size: 11px; }
.skills em.down, .sh-row em.down { color: #e05a4a; font-style: normal; font-weight: 600; font-size: 11px; }
.skills small { color: #9c876f; }
.skills .sk-sep { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(103, 64, 43, .6); }
.skills .sk-bar { grid-column: 1 / -1; height: 3px; background: #241b17; margin: -2px 0 3px; border-radius: 2px; overflow: hidden; }
.skills .sk-bar u { display: block; height: 100%; background: linear-gradient(90deg, #8a3a10, #FF6A00); }

/* ---------- ficha do personagem ---------- */
.char-name, #char-portrait { cursor: pointer; }
.char-name:hover { color: #FFD9B0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .sh-grid { grid-template-columns: 1fr; } .sh-equip { grid-column: auto; } }

/* ---------- Loot Pouch: topo da janela (timer, filtro, limpar, vender, auto venda) ---------- */
.pouch-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #3a2a20; }
.pouch-timer { font-size: 11px; color: #9c876f; }
.pouch-actions { display: flex; gap: 4px; }
.pouch-btn { flex: 1; padding: 4px 6px; border-radius: 6px; border: 1px solid #67402B; background: linear-gradient(180deg, #2a1d17, #171111); color: #e6d6c2; font: 700 10px/1.2 Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.pouch-btn:hover { border-color: #C98A42; }
.pouch-btn.danger { color: #ff8a7a; border-color: #6b2b22; }
.pouch-btn.gold { color: #ffd76a; border-color: #8a6420; }
.pouch-row { display: flex; gap: 6px; align-items: stretch; }
.pouch-auto-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; border-radius: 8px; cursor: pointer;
  border: 1px solid #4a3426; background: linear-gradient(180deg, #2a201b, #15100e); color: #8d7a66; }
.pouch-auto-btn b { font: 800 12px "Crimson Pro", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.pouch-auto-btn small { font-size: 9px; }
.pouch-auto-btn.on { color: #2a1503; border-color: #ffd27a; background: linear-gradient(180deg, #ffd76a, #c98a22 60%, #8a5a12); box-shadow: 0 0 10px rgba(255, 180, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
.pouch-worth { display: flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: 8px; border: 1px solid #4a3426; background: #120d0b; color: #ffd76a; font: 800 13px Inter, sans-serif; }
.win.loot-pouch .rar-stars { left: auto; right: 2px; }

/* confirmação da venda */
.ps-confirm { margin-top: 10px; padding: 10px 12px; border: 1px solid #C98A42; border-radius: 8px; background: rgba(255, 106, 0, .08); display: flex; flex-direction: column; gap: 4px; }
.ps-confirm b { color: #FFD9B0; font-size: 14px; }
.ps-confirm span { color: #C6B19A; font-size: 12px; }
.ps-confirm em { color: #ffd76a; font-style: normal; }

/* ---------- filtro de loot ---------- */
.loot-filter { width: 840px; max-width: calc(100vw - 32px); }
.loot-filter .win-body { max-height: min(80vh, 760px); overflow: auto; }
.lf-card { border: 1px solid #3a2a20; border-radius: 8px; padding: 9px 11px; background: rgba(0, 0, 0, .25); }
.lf-card h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; color: #FFD9B0; font: 700 13px "Crimson Pro", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.lf-card h4 small { color: #8d7a66; font: 400 11px Inter, sans-serif; letter-spacing: 0; text-transform: none; }
.lf-count { padding: 0 7px; border-radius: 999px; background: #241b17; border: 1px solid #4a3426; font: 700 11px Inter, sans-serif; color: #e6d6c2; letter-spacing: 0; }
.lf-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #C6B19A; }
.lf-seg i { font-style: normal; }
.lf-seg i.s1 { color: #4da3ff; } .lf-seg i.s2 { color: #b26bff; } .lf-seg i.s3 { color: #ffc93c; }
.lf-hint { margin: 4px 0 0; font-size: 11px; color: #8d7a66; }
.lf-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; margin-top: 10px; }
.lf-side { display: flex; flex-direction: column; gap: 10px; }
.lf-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; max-height: 300px; overflow: auto; padding: 2px; }
.lf-grid.small { max-height: 170px; }
.lf-cell { width: 42px; height: 42px; cursor: pointer; border: 1px solid #0b0807; border-image: none; outline: none; border-radius: 5px;
  background: radial-gradient(circle at 50% 40%, #1e1613, #110d0b 75%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9); }
.lf-cell::before { display: none; }
.lf-cell.is-skip { box-shadow: inset 0 0 0 1px #c0392b, inset 0 0 10px rgba(192, 57, 43, .45); }
.lf-cell.is-keep { box-shadow: inset 0 0 0 1px #2ecc71, inset 0 0 10px rgba(46, 204, 113, .4); }
.lf-cell.is-skip::after { content: "⊘"; position: absolute; left: -4px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #c0392b; color: #fff; font: 700 10px/15px Inter, sans-serif; text-align: center; }
.lf-cell.is-keep::after { content: "🔒"; position: absolute; right: -4px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #1e8449; font: 8px/15px Inter, sans-serif; text-align: center; }
.lf-price { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 700 9px Inter, sans-serif; color: #C98A42; text-shadow: 0 0 2px #000; }
.lf-x { position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; padding: 0; border-radius: 50%; border: 0; background: #3a2a20; color: #fff; font: 700 10px/15px Inter, sans-serif; cursor: pointer; }
.lf-drop { width: 42px; height: 42px; display: grid; place-items: center; border: 1px dashed #67402B; border-radius: 5px; color: #9c876f; font-size: 18px; }
.lf-list.over { border-color: #FF6A00; }
.lf-legend { margin: 8px 0 0; font-size: 11px; color: #9c876f; }
.lf-legend .no-loot { color: #e05a4a; } .lf-legend .keep { color: #2ecc71; }
.lf-foot { justify-content: space-between; margin-top: 12px; }
@media (max-width: 720px) { .lf-cols { grid-template-columns: 1fr; } }
.win.container.loot-pouch { width: 272px; }



/* ---------- ficha do personagem ---------- */
.sheet-win { width: 980px; max-width: calc(100vw - 24px); }
.sheet-win .win-body { max-height: min(82vh, 860px); overflow: auto; padding-right: 6px; }
.win.ornate.sheet-win > .win-head + .win-body { margin-top: 0; }
.sh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.sh-tab {
  padding: 9px; border: 1px solid #3a2a20; border-radius: 6px 6px 0 0; cursor: pointer;
  background: linear-gradient(180deg, #1d1512, #120d0b); color: #C6B19A; font: 700 12px Cinzel, "Crimson Pro", serif; letter-spacing: .12em; text-transform: uppercase;
}
.sh-tab:hover { color: #f0e2cf; }
.sh-tab.on { color: #FFD9B0; border-color: #C98A42; box-shadow: inset 0 -2px 0 #FF6A00, 0 0 10px rgba(255, 106, 0, .18); background: linear-gradient(180deg, #2a1c15, #160f0c); }
.sh-card { border: 1px solid #3a2a20; border-radius: 10px; background: linear-gradient(180deg, rgba(36, 26, 21, .92), rgba(20, 14, 12, .92)); box-shadow: inset 0 1px 0 rgba(255, 220, 180, .05); }
.sh-top { display: grid; grid-template-columns: 200px 1fr; gap: 10px; margin-bottom: 10px; }
.sh-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border-color: #67402B; }
.sh-portrait { width: 112px; height: 112px; display: grid; place-items: center; }
.sh-portrait canvas { width: 112px; height: 112px; image-rendering: pixelated; }
.sh-who { text-align: center; }
.sh-who h3 { margin: 2px 0 0; font: 700 21px "Crimson Pro", Georgia, serif; color: #FFD9B0; }
.sh-who span { font-size: 12px; color: #C98A42; }
.sh-bars { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 14px 18px; }
.sh-bar { display: grid; grid-template-columns: 110px 1fr 130px; align-items: center; gap: 14px; }
.sh-bar-l { font: 700 12px Cinzel, "Crimson Pro", serif; letter-spacing: .14em; color: #C6B19A; text-transform: uppercase; }
.sh-bar i { height: 10px; border-radius: 6px; background: #0d0908; box-shadow: inset 0 0 0 1px #2c201a; overflow: hidden; }
.sh-bar u { display: block; height: 100%; border-radius: 6px; transition: width .4s; }
.sh-bar.hp u { background: linear-gradient(180deg, #7be07a, #3fa543); }
.sh-bar.mp u { background: linear-gradient(180deg, #8cc0ff, #3f7fd4); }
.sh-bar.xp u { background: linear-gradient(180deg, #ffd27a, #c98a2a); }
.sh-bar.st u { background: linear-gradient(180deg, #b49bff, #7a5ad6); }
.sh-bar b { text-align: right; font: 700 13px Inter, sans-serif; color: #f0e2cf; display: flex; flex-direction: column; align-items: flex-end; }
.sh-bar b small { font: 400 10px Inter, sans-serif; color: #8d7a66; }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-bottom: 10px; }
.sh-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; min-height: 84px; }
.sh-tile h5 { margin: 0 0 6px; font: 700 10px Cinzel, "Crimson Pro", serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; }
.sh-tile b { display: block; font: 800 18px Inter, sans-serif; color: #fff; }
.sh-tile small { display: block; margin-top: 3px; font-size: 10.5px; color: #8d7a66; line-height: 1.3; }
.sh-ico { width: 32px; height: 32px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255, 140, 40, .35)); }
.sh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.sh-cols > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-sec { padding: 10px 14px 12px; }
.sh-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 13px Cinzel, "Crimson Pro", serif; letter-spacing: .12em; text-transform: uppercase; color: #FFB15C; }
.sh-sec h4::before { content: "◆"; font-size: 10px; color: #FF6A00; text-shadow: 0 0 6px rgba(255, 106, 0, .8); }
.sh-sec h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #67402B, transparent); }
.sh-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12.5px; color: #C6B19A; border-bottom: 1px solid rgba(103, 64, 43, .28); }
.sh-row b { color: #f0e2cf; font-weight: 700; text-align: right; }
.sh-row small { color: #8d7a66; font-weight: 400; }
.sh-row .gold { color: #ffd76a; }
.sh-row.sh-total { border-top: 1px solid #67402B; border-bottom: 0; margin-top: 4px; padding-top: 7px; }
.sh-row.sh-total b { color: #7fe0a8; }
.sh-skill { display: grid; grid-template-columns: 86px 64px 1fr 38px; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; color: #C6B19A; }
.sh-skill b { color: #f0e2cf; font-weight: 800; text-align: right; }
.sh-skill em { font-style: normal; margin-left: 2px; }
.sh-skill em.up, .sh-sec .up { color: #7fe0a8; }
.sh-skill em.down, .sh-sec .down { color: #e05a4a; }
.sh-skill small { text-align: right; color: #8d7a66; font-size: 11px; }
.sh-segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.sh-segs i { height: 8px; border-radius: 3px; background: #0d0908; box-shadow: inset 0 0 0 1px #2c201a; overflow: hidden; }
.sh-segs u { display: block; height: 100%; background: linear-gradient(180deg, #ffd27a, #c98a2a); box-shadow: 0 0 6px rgba(255, 190, 80, .5); }
.sh-res { display: grid; grid-template-columns: 70px 1fr 54px; align-items: center; gap: 8px; font-size: 12.5px; color: #C6B19A; padding: 3px 0; }
.sh-res i { height: 8px; background: #0d0908; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px #2c201a; }
.sh-res u { display: block; height: 100%; }
.sh-res b { text-align: right; color: #f0e2cf; font-weight: 700; }
.sh-res b.down { color: #e05a4a; }
.sh-imb { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(103, 64, 43, .28); }
.sh-imb b { display: block; font-size: 12.5px; color: #f0e2cf; }
.sh-imb small { font-size: 11px; color: #8d7a66; }
.sh-line { margin: 0 0 6px; font-size: 12.5px; color: #C6B19A; }
.sh-line b { color: #fff; }
.sh-line small { color: #8d7a66; }
.sh-prog { height: 10px; border-radius: 6px; background: #0d0908; box-shadow: inset 0 0 0 1px #2c201a; overflow: hidden; }
.sh-prog u { display: block; height: 100%; background: linear-gradient(180deg, #5fe0c0, #2a9c86); }
.sh-charms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sh-charm { display: flex; flex-direction: column; padding: 4px 8px; border: 1px solid #67402B; border-radius: 6px; font-size: 11px; color: #e6d6c2; background: rgba(0, 0, 0, .25); }
.sh-charm.set { border-color: #C98A42; box-shadow: 0 0 6px rgba(201, 138, 66, .3); }
.sh-charm small { color: #8d7a66; }
.sh-empty { margin: 4px 0 0; font-size: 11.5px; color: #8d7a66; }
.sh-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-slot { width: 44px; height: 44px; }
.sh-look { display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.sh-stage { height: 340px; display: grid; place-items: center; border: 1px solid #3a2a20; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 106, 0, .16), transparent 60%), linear-gradient(180deg, #1d1512, #0c0807); }
.sh-stage canvas { width: 256px; height: 256px; image-rendering: pixelated; }
.sh-look-ctrl { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.sh-look-info { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.sh-look-info h3 { margin: 0; font: 700 22px "Crimson Pro", Georgia, serif; color: #FFD9B0; }
.sh-look-info p { margin: 0 0 8px; color: #C98A42; font-size: 12px; }
.sh-look-info .btn-fire { margin-top: 12px; }
@media (max-width: 820px) { .sh-top, .sh-cols, .sh-look { grid-template-columns: 1fr; } .sh-bar { grid-template-columns: 80px 1fr 96px; } }
.battle-skull { width: 11px; height: 11px; vertical-align: -1px; image-rendering: pixelated; }

/* ---------- store: imagens oficiais ---------- */
.st-coin { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; image-rendering: pixelated; }
.st-coin.big { width: 24px; height: 24px; }
.st-cat-ic { flex: none; width: 13px; height: 13px; margin-right: 6px; background: url(/ui/store/categories.png) 0 0 / auto 13px no-repeat; image-rendering: pixelated; display: inline-block; vertical-align: -2px; }
.st-pic.official { display: grid; place-items: center; }
.st-official { image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }

/* ---------- mercado (market do servidor) ---------- */
.market-win { width: 1040px; max-width: calc(100vw - 24px); }
.market-win .win-body { height: min(76vh, 720px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mk-head { display: flex; align-items: center; gap: 6px; }
.mk-tab { padding: 8px 14px; border: 1px solid #3a2a20; border-radius: 6px; cursor: pointer; background: linear-gradient(180deg, #1d1512, #120d0b); color: #C6B19A; font: 700 12px Cinzel, "Crimson Pro", serif; letter-spacing: .1em; text-transform: uppercase; }
.mk-tab:hover { color: #f0e2cf; }
.mk-tab.on { color: #FFD9B0; border-color: #C98A42; box-shadow: inset 0 -2px 0 #FF6A00; }
.mk-balance { margin-left: auto; display: grid; justify-items: end; line-height: 1.15; }
.mk-balance small { color: #8d7a66; font-size: 10.5px; }
.mk-balance b { color: #ffd76a; font: 800 17px Inter, sans-serif; }
.mk-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; gap: 10px; }
.mk-browser { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.mk-search, .mk-cat, .mk-fields input, .mk-act input { background: #120e0d; border: 1px solid #3a2a20; color: #e6d6c2; border-radius: 5px; padding: 6px 8px; font: 13px Inter, sans-serif; }
.mk-search:focus, .mk-fields input:focus { outline: 1px solid #C98A42; }
.mk-only { font-size: 12px; color: #C6B19A; display: flex; gap: 6px; align-items: center; }
.mk-list { flex: 1; min-height: 0; overflow: auto; border: 1px solid #2c201a; border-radius: 8px; background: rgba(0, 0, 0, .25); padding: 4px; }
.mk-row { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: #e6d6c2; cursor: pointer; text-align: left; font: 13px Inter, sans-serif; }
.mk-row:hover { background: rgba(255, 106, 0, .08); }
.mk-row.on { border-color: #C98A42; background: rgba(255, 106, 0, .12); }
.mk-row em { font-style: normal; font-size: 11px; color: #ffd76a; background: rgba(0, 0, 0, .4); border-radius: 8px; padding: 1px 6px; }
.mk-ico { display: inline-grid; place-items: center; flex: none; }
.mk-ico canvas { image-rendering: pixelated; }
.mk-item { min-height: 0; overflow: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 10px; }
.mk-item-head { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid #3a2a20; border-radius: 10px; background: linear-gradient(180deg, rgba(36, 26, 21, .92), rgba(20, 14, 12, .92)); }
.mk-item-head h3 { margin: 0; font: 700 20px "Crimson Pro", Georgia, serif; color: #FFD9B0; text-transform: capitalize; }
.mk-item-head small { color: #8d7a66; font-size: 12px; }
.mk-item-head small b { color: #f0e2cf; }
.mk-sec { border: 1px solid #3a2a20; border-radius: 10px; padding: 8px 12px 10px; background: linear-gradient(180deg, rgba(36, 26, 21, .92), rgba(20, 14, 12, .92)); }
.mk-sec h4 { margin: 0 0 6px; font: 700 12.5px Cinzel, "Crimson Pro", serif; letter-spacing: .1em; text-transform: uppercase; color: #FFB15C; }
.mk-sec h4 small { color: #8d7a66; letter-spacing: 0; }
.mk-table { width: 100%; border-collapse: collapse; font: 12.5px Inter, sans-serif; color: #C6B19A; }
.mk-table th { text-align: left; font-weight: 600; font-size: 11px; color: #8d7a66; padding: 3px 6px; border-bottom: 1px solid #3a2a20; }
.mk-table td { padding: 4px 6px; border-bottom: 1px solid rgba(103, 64, 43, .25); vertical-align: middle; }
.mk-table td.gold { color: #ffd76a; font-weight: 700; }
.mk-table td:first-child .mk-ico { margin-right: 2px; }
.mk-act { white-space: nowrap; text-align: right; }
.mk-act input { width: 64px; padding: 3px 5px; margin-right: 4px; }
.mk-muted { color: #6d5d4f; }
.mk-seg { display: inline-flex; border: 1px solid #3a2a20; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.mk-seg button { padding: 6px 16px; border: 0; background: #140e0c; color: #C6B19A; cursor: pointer; font: 700 12px Inter, sans-serif; }
.mk-seg button.on { background: linear-gradient(180deg, #ff8a2a, #c94a00); color: #fff; }
.mk-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.mk-fields label { display: grid; gap: 3px; font-size: 11px; color: #8d7a66; }
.mk-fields input { width: 150px; }
.mk-fields .mk-anon { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #C6B19A; }
.mk-fields .mk-anon input { width: auto; }
.mk-sum { margin: 8px 0; font-size: 12.5px; color: #C6B19A; }
.mk-sum b { color: #f0e2cf; }
.mk-sum .bad { color: #ff7a5a; }
.mk-desc, .mk-stat { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; color: #C6B19A; border-bottom: 1px solid rgba(103, 64, 43, .25); }
.mk-desc b, .mk-stat b { color: #f0e2cf; text-align: right; font-weight: 600; }
.mk-stat small { color: #8d7a66; margin-left: 8px; }
.mk-own { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.mk-empty { margin: 6px 0; font-size: 12px; color: #8d7a66; }
.mk-empty.big { margin: 40px 20px; text-align: center; font-size: 14px; }
@media (max-width: 860px) { .mk-main { grid-template-columns: 1fr; } }

/* aura e contorno na janela de personalizar */
.of-extras { margin-top: 8px; }
.of-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.of-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border: 1px solid #3a2a20; border-radius: 999px; background: #140e0c; color: #C6B19A; cursor: pointer; font: 600 11.5px Inter, sans-serif; }
.of-chip:hover { border-color: #67402B; color: #f0e2cf; }
.of-chip.active { border-color: #FF6A00; color: #fff; box-shadow: 0 0 8px rgba(255, 106, 0, .4); }
.of-chip i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 6px rgba(255, 255, 255, .25); }
.of-chip i.none { border: 1px dashed #67402B; box-shadow: none; }

/* botão Depósito: indisponível longe de um locker */
.tb-btn.unavailable { opacity: .45; filter: grayscale(.7); animation: none; }
.tb-btn.unavailable:hover { opacity: .7; filter: grayscale(.3) drop-shadow(0 0 calc(4 * var(--t)) rgba(255, 170, 60, .6)); }

/* ---------- Social: submenu Guild / Amigos / Party e painéis ---------- */
.social-menu { position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: 2px; min-width: 132px; padding: 4px; background: #171313; border: 1px solid #67402B; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 138, 66, .12) inset; font: bold 11px Verdana, sans-serif; animation: so-pop .12s ease-out; }
.social-menu::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #67402B; }
@keyframes so-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.social-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid transparent; border-radius: 4px; background: none; color: #C6B19A; cursor: pointer; font: inherit; text-align: left; }
.social-item i { width: 20px; height: 20px; background: center / 20px 20px no-repeat; image-rendering: pixelated; flex: none; filter: sepia(.4) saturate(1.4); }
.social-item:hover { background: rgba(255, 106, 0, .14); border-color: rgba(201, 138, 66, .35); color: #fff; }
.social-item:hover i { filter: drop-shadow(0 0 3px rgba(255, 106, 0, .8)); }
.social-win { width: 360px; font: bold 11px Verdana, sans-serif; color: #C6B19A; }
.social-win .win-body { max-height: 460px; overflow-y: auto; padding: 8px; }
.social-win.party { width: 300px; }
.so-sec { margin-bottom: 10px; }
.so-sec h4 { margin: 4px 0 6px; color: #C98A42; font: bold 10px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(103, 64, 43, .6); padding-bottom: 3px; }
.so-guild-head h3 { margin: 0; color: #FF6A00; font: bold 14px Verdana, sans-serif; text-shadow: 0 0 6px rgba(255, 106, 0, .35); }
.so-guild-head small, .so-party-head small { color: #C6B19A; opacity: .85; }
.so-motd { margin: 6px 0 8px; padding: 6px 8px; background: rgba(103, 64, 43, .25); border-left: 2px solid #C98A42; color: #e8d9c4; font-weight: normal; }
.so-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.so-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; background: rgba(0, 0, 0, .25); border: 1px solid transparent; }
.so-row:hover { border-color: rgba(201, 138, 66, .3); }
.so-row .so-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.so-row .so-name b { color: #e8d9c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-row .so-name em { color: #C98A42; font-style: normal; }
.so-row small { color: #9c8b78; font-weight: normal; font-size: 10px; }
.so-row:not(.online) .so-name b { color: #8a7d70; }
.so-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #5a4a40; flex: none; }
.so-row.online .so-dot { background: #4fd06b; box-shadow: 0 0 5px rgba(79, 208, 107, .8); }
.so-acts { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.so-acts .btn-ghost.small, .so-foot .btn-ghost.small, .so-row > .btn-ghost.small { padding: 2px 6px; font: bold 10px Verdana, sans-serif; }
.so-acts .btn-ghost.small:hover { border-color: #FF6A00; color: #fff; }
.so-row > .btn-fire.small, .so-form .btn-fire.small { padding: 3px 10px; font: bold 10px Verdana, sans-serif; }
.btn-ghost.danger { color: #ff8a6a; border-color: #8a2a1a; }
.btn-ghost.danger:hover { background: #3a120c; color: #fff; }
.so-form { display: flex; align-items: flex-end; gap: 6px; margin: 6px 0; }
.so-form label { flex: 1; display: flex; flex-direction: column; gap: 3px; color: #C98A42; font-size: 10px; }
.so-form input, .so-tools input, .so-tools select { background: #0d0a0a; border: 1px solid #67402B; border-radius: 3px; color: #e8d9c4; padding: 4px 6px; font: bold 11px Verdana, sans-serif; }
.so-form input:focus, .so-tools input:focus { outline: none; border-color: #FF6A00; box-shadow: 0 0 4px rgba(255, 106, 0, .4); }
.so-tools { display: flex; gap: 6px; margin: 4px 0 6px; }
.so-tools input { flex: 1; }
.so-foot { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(103, 64, 43, .6); }
.so-empty { margin: 6px 0; color: #9c8b78; font-weight: normal; line-height: 1.4; }
.so-pic { flex: none; border: 1px solid #67402B; border-radius: 4px; background: #0d0a0a center / contain no-repeat; image-rendering: pixelated; }
.so-invite { border-color: #C98A42 !important; background: rgba(255, 106, 0, .1); }
.so-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.so-bars i { display: block; height: 4px; background: #000; border: 1px solid #2a1d16; }
.so-bars u { display: block; height: 100%; }
.so-bars .hp u { background: linear-gradient(90deg, #b01c1c, #e04444); }
.so-bars .mp u { background: linear-gradient(90deg, #1c4ab0, #4488e0); }
.so-shared { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #C6B19A; }
.so-shared em { font-style: normal; }
.so-shared em.ok { color: #4fd06b; }
.so-shared em.bad { color: #ff8a6a; }

/* ---------- Supply Stash ---------- */
.stash-win { width: 500px; font: bold 11px Verdana, sans-serif; color: #C6B19A; }
.stash-win .win-body { padding: 8px; }
.st-top { display: flex; gap: 6px; align-items: center; }
.st-top input, .st-top select, .st-withdraw input { background: #0d0a0a; border: 1px solid #67402B; border-radius: 3px; color: #e8d9c4; padding: 4px 6px; font: bold 11px Verdana, sans-serif; }
.st-top input { flex: 1; min-width: 0; }
.st-top select { max-width: 150px; }
.st-top input:focus, .st-withdraw input:focus { outline: none; border-color: #FF6A00; box-shadow: 0 0 4px rgba(255, 106, 0, .4); }
.st-top .btn-fire.small { padding: 4px 10px; font: bold 10px Verdana, sans-serif; white-space: nowrap; }
.st-info { display: flex; justify-content: space-between; margin: 6px 0; font-size: 10px; color: #9c8b78; }
.st-info b { color: #C98A42; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; max-height: 300px; min-height: 120px; overflow-y: auto; padding: 4px; background: rgba(0, 0, 0, .3); border: 1px solid #2c201a; border-radius: 4px; align-content: start; }
.st-grid .mk-empty { grid-column: 1 / -1; line-height: 1.5; }
.st-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; border: 1px solid #2c201a; border-radius: 4px; background: linear-gradient(180deg, #1d1411, #120c0a); color: #C6B19A; cursor: pointer; font: inherit; }
.st-cell:hover { border-color: #C98A42; box-shadow: 0 0 6px rgba(255, 106, 0, .25); }
.st-cell.sel { border-color: #FF6A00; box-shadow: 0 0 8px rgba(255, 106, 0, .45), inset 0 0 0 1px rgba(255, 106, 0, .4); }
.st-cell small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.st-ico { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; background: #0d0a0a; border: 1px solid #3a2a20; border-radius: 3px; }
.st-ico canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.st-ico b { position: absolute; right: 1px; bottom: 0; font: bold 9px Verdana, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.st-withdraw { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(103, 64, 43, .6); min-height: 40px; }
.st-sel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-sel b { color: #e8d9c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sel small { color: #9c8b78; font-size: 10px; }
.st-withdraw input { width: 64px; }
.st-quick { display: flex; gap: 2px; }
.st-quick .btn-ghost.small { padding: 3px 5px; font: bold 10px Verdana, sans-serif; }
.st-withdraw .btn-fire.small { padding: 4px 10px; font: bold 10px Verdana, sans-serif; }
.mk-note { margin: 4px 0; padding: 5px 7px; border-left: 2px solid #C98A42; background: rgba(103, 64, 43, .2); color: #C6B19A; font-size: 10px; line-height: 1.4; }
.st-withdraw .st-sell { padding: 4px 8px; font: bold 10px Verdana, sans-serif; border-color: #C98A42; color: #FFD9B0; }
.st-withdraw .st-sell:hover { border-color: #FF6A00; color: #fff; box-shadow: 0 0 6px rgba(255, 106, 0, .4); }

/* ---------- confirmação dentro do jogo ---------- */
.gc-overlay { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; background: rgba(8, 5, 4, .55); backdrop-filter: blur(1.5px); animation: gc-in .14s ease-out; }
.gc-overlay.out { opacity: 0; transition: opacity .12s; }
@keyframes gc-in { from { opacity: 0; } to { opacity: 1; } }
.gc-box { position: relative !important; left: auto !important; top: auto !important; width: min(380px, calc(100vw - 32px)); animation: gc-pop .16s ease-out; box-shadow: 0 18px 50px rgba(0, 0, 0, .8), 0 0 24px rgba(255, 106, 0, .12); }
@keyframes gc-pop { from { transform: translateY(8px) scale(.97); } to { transform: none; } }
.gc-text { margin: 4px 2px 14px; color: #e8d9c4; font: bold 12px/1.55 Verdana, sans-serif; }
.gc-row { display: flex; justify-content: flex-end; gap: 8px; }
.gc-row button { min-width: 96px; padding: 7px 14px; font: bold 11px Verdana, sans-serif; }
.gc-row .btn-fire.danger { background: linear-gradient(180deg, #c0392b, #7d1d12); border-color: #e05a40; }
.st-top .st-sellall { padding: 4px 9px; font: bold 10px Verdana, sans-serif; white-space: nowrap; border-color: #C98A42; color: #FFD9B0; }
.ps-cell.kept { opacity: .6; }
.ps-cell .st-ico { width: 36px; height: 36px; }

/* ---------- faixa de cooldowns acima dos atalhos (como no Tibia) ---------- */
.hot-col { display: flex; flex-direction: column; gap: 3px; }
.cd-strip { display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 1px; }
.cd-cell { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1px solid #2c201a; border-radius: 2px; background: #0d0a0a; overflow: hidden; }
.cd-cell > span { width: 20px; height: 20px; }
.cd-group-ic { background: url(/ui/spells/spellgroup-icons-20x20.png) 0 0 / 220px 20px no-repeat; image-rendering: pixelated; filter: saturate(.85); }
.cd-cell.group:not(.cooling) .cd-group-ic { filter: none; box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .25); }
.cd-cell i { position: absolute; inset: 0; background: conic-gradient(transparent var(--cd), rgba(0, 0, 0, .7) var(--cd)); pointer-events: none; }
.cd-cell b { position: absolute; inset: 0; display: grid; place-items: center; font: bold 9px Verdana, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000; }
.cd-cell.cooling { border-color: #67402B; }
.cd-sep { width: 1px; height: 16px; margin: 0 3px; background: rgba(201, 138, 66, .35); }
.opt-range { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.opt-range input { flex: 1; accent-color: #FF6A00; }
.opt-range b { min-width: 40px; text-align: right; color: #FFD9B0; font: bold 11px Verdana, sans-serif; }

/* ---------- Analisador de Hunt (fixo na interface) ---------- */
.hunt-analyzer { width: 308px; font: bold 11px Verdana, sans-serif; color: #C6B19A; }
.hunt-analyzer .win-body { max-height: 178px; overflow-y: auto; padding: 6px 8px; }
.ha-reset { margin-left: auto; margin-right: 4px; width: 20px; height: 20px; padding: 0; border: 1px solid #67402B; border-radius: 4px; background: #140e0b; color: #C98A42; cursor: pointer; font: bold 12px Verdana, sans-serif; line-height: 1; }
.ha-reset:hover { color: #FF6A00; border-color: #C98A42; }
.ha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.ha-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ha-cell small { color: #C98A42; font: bold 9px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.ha-cell b { color: #f2e6d6; font: bold 13px Verdana, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-cell .neg, .so-pha .neg { color: #ff6b5a; }
.ha-cell .pos, .so-pha .pos { color: #5fe08a; }
.ha-kills { margin-top: 8px; border-top: 1px solid rgba(103, 64, 43, .6); padding-top: 4px; }
.ha-kills-head { display: flex; justify-content: space-between; width: 100%; padding: 3px 0; border: 0; background: none; color: #C98A42; cursor: pointer; font: bold 10px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.ha-kill-list div { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed rgba(103, 64, 43, .35); }
.ha-kill-list b { color: #FFD9B0; }
.ha-kill-list p { margin: 4px 0; color: #9c8b78; font-weight: normal; }

/* ---------- Party: cooldowns dos membros e Party Hunt Analyzer ---------- */
.so-cds { display: flex; flex-wrap: wrap; gap: 3px; margin: -1px 0 4px 50px; }
.so-cd { position: relative; width: 26px; height: 26px; border: 1px solid #67402B; border-radius: 3px; overflow: hidden; }
.so-cd i { position: absolute; inset: 0; background: conic-gradient(transparent var(--cd, 0deg), rgba(0, 0, 0, .68) var(--cd, 0deg)); }
.so-cd b { position: absolute; inset: 0; display: grid; place-items: center; font: bold 9px Verdana, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000; }
.so-cd.ready { border-color: #2c201a; opacity: .55; }
.so-cd.ready i { display: none; }
.so-pha-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; color: #9c8b78; }
.so-pha-top b { color: #f2e6d6; }
.so-pha-top .btn-ghost.small { margin-left: auto; padding: 2px 8px; font: bold 10px Verdana, sans-serif; }
.so-pha-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.so-pha-table th { color: #C98A42; text-align: right; font-weight: bold; padding: 2px 3px; border-bottom: 1px solid rgba(103, 64, 43, .6); }
.so-pha-table td { text-align: right; padding: 3px; border-bottom: 1px dashed rgba(103, 64, 43, .3); color: #e8d9c4; }
.so-pha-table th:first-child, .so-pha-table td:first-child { text-align: left; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-pha-table tfoot td { border-bottom: 0; color: #FFD9B0; font-weight: bold; }
.social-win.party { width: 360px; }
.of-chip.special { border-color: #8a6420; }
.of-chip.special span { color: #ffd76a; }

/* abas da janela de personalizar */
.of-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.of-tab { padding: 7px 4px; border: 1px solid var(--bronze); border-radius: 3px; background: linear-gradient(180deg, #2a1d16, #140e0b); color: var(--silver); font: 800 11px Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.of-tab:hover { color: #fff; border-color: var(--gold); }
.of-tab.on { color: #fff6e8; border-color: var(--fire); background: linear-gradient(180deg, #8a3a0a, #3a1404); box-shadow: 0 0 8px rgba(255, 106, 0, .4); }
.of-pane { height: 300px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--bronze) transparent; }
.of-pane > .hidden { display: none !important; }
.of-pane .of-picker > .of-title { display: none; }
.of-subtabs { display: flex; gap: 4px; margin-bottom: 8px; }
.of-subtab { flex: 1; padding: 5px 4px; border: 1px solid #3a2a20; border-radius: 999px; background: #140e0b; color: var(--silver); font: 700 11px Inter, sans-serif; cursor: pointer; }
.of-subtab.on { color: #fff6e8; border-color: var(--fire); background: rgba(255, 106, 0, .18); }
.of-extras .of-chips.hidden { display: none; }
/* a janela nunca passa da tela: o conteúdo rola e o rodapé (Cancelar / Aplicar) fica sempre visível */
.win.outfit { max-height: calc(100vh - var(--tb-h, 66px) - 16px); display: flex; flex-direction: column; }
.win.outfit > .win-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.win.outfit .of-footer { position: sticky; bottom: 0; z-index: 3; margin-top: 8px; padding: 8px 0 2px; background: linear-gradient(180deg, rgba(23, 19, 19, .85), #171313 40%); }
.of-pane { height: min(300px, calc(100vh - var(--tb-h, 66px) - 190px)); min-height: 140px; }
@media (max-height: 700px) { .of-stage { height: 180px; } .of-preview { width: 200px; height: 200px; margin-top: -24px; } }
/* sem pedestal oval nem brilho embaixo do personagem na janela de personalizar */
.of-stage::after { display: none; }
.of-stage { background: radial-gradient(circle at 50% 40%, #3a2a22, #120d0b 75%); }

/* ---------- Bot: botão ao lado de Hunts ---------- */
.hunt-btns { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.btn-bot-open {
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 9px; cursor: pointer; border-radius: 5px;
  font: 700 15px "Crimson Pro", Georgia, serif; letter-spacing: .03em; color: #F3E7D3; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #3a2a20, #1e1512 60%, #120c0a); border: 1px solid #67402B;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 220, 170, .18);
}
.btn-bot-open span { font-size: 14px; color: #C98A42; transition: transform .4s; }
.btn-bot-open:hover { border-color: #C98A42; filter: brightness(1.15); }
.btn-bot-open:hover span { transform: rotate(90deg); }
.btn-bot-open.on { border-color: #FF8A2A; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255, 106, 0, .45), inset 0 1px 0 rgba(255, 220, 170, .2); }
.btn-bot-open.on span { color: #FF8A2A; animation: bot-spin 4s linear infinite; }
@keyframes bot-spin { to { transform: rotate(360deg); } }
.btn-danger {
  padding: 6px 14px; border-radius: 5px; cursor: pointer; font: 700 13px Inter, sans-serif; color: #ffd9cc;
  background: linear-gradient(180deg, #5a1a10, #36100a); border: 1px solid #8a3020; box-shadow: 0 0 0 1px #000;
}
.btn-danger:hover { filter: brightness(1.2); }
.btn-danger.small { padding: 4px 12px; font-size: 12px; }

/* ---------- Bot: janela ---------- */
.bot-win { width: min(900px, calc(100vw - 24px)); }
.bot-win .win-body.bw-body { display: flex; flex-direction: column; gap: 8px; height: min(calc(100vh - 170px), 680px); overflow: hidden; padding: 8px 10px 10px; }
.bw-tabs { display: flex; gap: 6px; flex: none; }
.bw-tab {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: 700 13px Inter, sans-serif; color: #C6B19A; background: #120d0c; border: 1px solid #3a2a20;
}
.bw-tab i { font-style: normal; color: #C98A42; }
.bw-tab em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: #2a1d17; color: #FFC27A; }
.bw-tab:hover { border-color: #67402B; color: #F3E7D3; }
.bw-tab.active { color: #fff4e0; background: linear-gradient(180deg, #a83d00, #5a1f00); border-color: #FFA347; box-shadow: 0 0 10px rgba(255, 106, 0, .35); }
.bw-tab.active i { color: #fff4e0; }

.bw-prio { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid #2c2320; border-radius: 8px; background: linear-gradient(180deg, #161110, #0d0908); }
.bw-prio-lbl { display: grid; font: 800 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; white-space: nowrap; }
.bw-prio-lbl small { font: 500 10px Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #8f7a64; }
.bw-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-slot {
  position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 7px;
  background: #0b0807; border: 1px solid #3a2a20; box-shadow: inset 0 0 8px #000;
}
.bw-slot b {
  position: absolute; top: -6px; left: -6px; z-index: 1; min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
  font: 800 10px Inter, sans-serif; color: #171313; background: #C98A42; box-shadow: 0 0 0 1px #000;
}
.bw-slot.empty b { background: #3a2a20; color: #8f7a64; }
.bw-slot.empty::after { content: "+"; font: 400 18px Inter, sans-serif; color: #4a3527; }
.bw-slot:hover { border-color: #C98A42; }
.bw-slot.sel { border-color: #FF8A2A; box-shadow: 0 0 0 1px #FF6A00, 0 0 12px rgba(255, 106, 0, .55), inset 0 0 8px #000; }
.bw-slot.sel b { background: #FF8A2A; }
.bw-slot.over { border-color: #FFC27A; background: rgba(255, 106, 0, .12); }
.bw-slot .spell-ic, .bw-slot canvas { border-radius: 4px; }

.bw-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 10px; }
.bw-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 8px; border: 1px solid #2c2320; border-radius: 8px; background: #0d0908; }
.bw-sub { display: flex; gap: 4px; }
.bw-sub button { flex: 1; padding: 5px; border-radius: 5px; cursor: pointer; font: 700 12px Inter, sans-serif; color: #a8957f; background: #161110; border: 1px solid #2c2320; }
.bw-sub button.active { color: #FFC27A; border-color: #67402B; background: #241913; }
.bw-search { padding: 6px 8px; border-radius: 5px; background: #120d0c; border: 1px solid #3a2a20; color: #F3E7D3; font: 500 12px Inter, sans-serif; }
.bw-search:focus { outline: none; border-color: #C98A42; }
.bw-list-items { flex: 1; min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.bw-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; text-align: left; cursor: pointer;
  border-radius: 6px; background: #141010; border: 1px solid #241c19;
}
.bw-row:hover { border-color: #67402B; background: #1b1412; }
.bw-row.in { border-color: #4a3122; }
.bw-row.sel { border-color: #FF8A2A; box-shadow: inset 3px 0 0 #FF6A00; }
.bw-row-ic { display: grid; place-items: center; width: 34px; height: 34px; }
.bw-row-ic canvas { image-rendering: pixelated; }
.bw-row-txt { display: grid; min-width: 0; }
.bw-row-txt b { font: 700 13px Inter, sans-serif; color: #F3E7D3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-row-txt small { font: 500 11px ui-monospace, Consolas, monospace; color: #C98A42; }
.bw-row-txt em { justify-self: start; margin-top: 2px; padding: 0 6px; border-radius: 999px; font: 700 10px Inter, sans-serif; font-style: normal; color: #171313; background: #C98A42; }
.bw-row-r { display: grid; justify-items: end; }
.bw-row-r b { font: 600 12px Inter, sans-serif; color: #C6B19A; }
.bw-row-r small { font: 500 10px Inter, sans-serif; color: #8f7a64; }
.bw-none { margin: 6px 2px; font: italic 400 12px Inter, sans-serif; color: #8f7a64; }

.bw-detail { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.bw-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; border: 1px dashed #3a2a20; border-radius: 8px; color: #a8957f; }
.bw-empty i { font-style: normal; font-size: 30px; color: #67402B; }
.bw-empty b { font: 700 18px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.bw-empty p { margin: 0; max-width: 360px; font: 400 12.5px/1.45 Inter, sans-serif; }
.bw-card { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; padding: 10px; border: 1px solid #2c2320; border-radius: 8px; background: linear-gradient(180deg, #171211, #0d0908); }
.bw-big { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 8px; background: #0b0807; border: 1px solid #67402B; box-shadow: 0 0 12px rgba(255, 106, 0, .2), inset 0 0 8px #000; }
.bw-info { display: grid; align-content: start; gap: 3px; min-width: 0; }
.bw-name { font: 700 20px "Crimson Pro", Georgia, serif; color: #F3E7D3; line-height: 1.05; }
.bw-info code { font: 600 12px ui-monospace, Consolas, monospace; color: #FFC27A; }
.bw-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.bw-tag { padding: 1px 8px; border-radius: 999px; font: 700 10.5px Inter, sans-serif; color: #C6B19A; background: #1b1412; border: 1px solid #3a2a20; }
.bw-tag.hot { color: #171313; background: #C98A42; border-color: #C98A42; }
.bw-tag.atk { color: #ff9a6a; border-color: #5a2a18; }
.bw-tag.heal { color: #8fe0a4; border-color: #1f4a2c; }
.bw-tag.sup { color: #8fc8ff; border-color: #1f3a5a; }
.bw-lines { display: grid; gap: 1px; font: 500 12px Inter, sans-serif; color: #C6B19A; }
.bw-lines .mana { color: #7fb8ff; }
.bw-lines .req { color: #8f7a64; }
.bw-area { display: grid; justify-items: center; gap: 4px; }
.bw-area small { padding: 1px 8px; border-radius: 999px; font: 600 10.5px Inter, sans-serif; color: #a8957f; border: 1px solid #2c2320; }
.bw-grid {
  --n: 7; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; width: 118px; height: 118px; padding: 5px;
  border-radius: 6px; background: repeating-linear-gradient(45deg, #1a1311 0 4px, #161010 4px 8px); border: 1px solid #3a2a20; box-shadow: inset 0 0 10px #000;
}
.bw-grid i { border-radius: 2px; background: rgba(103, 64, 43, .18); }
.bw-grid i.hit { background: rgba(255, 106, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 194, 122, .55); }
.bw-grid i.tgt { background: rgba(255, 60, 40, .7); }
.bw-grid i.me { background: radial-gradient(circle, #fff4e0 0 30%, #FF8A2A 31% 55%, transparent 56%), rgba(255, 106, 0, .3); box-shadow: 0 0 6px #FF6A00; }

.bw-how { padding: 9px 12px; border-radius: 8px; border: 1px solid #3a2a20; border-left: 3px solid #FF8A2A; background: linear-gradient(90deg, rgba(255, 106, 0, .08), transparent 60%), #120d0c; }
.bw-how small { font: 800 10.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; }
.bw-how p, .bw-how-inline { margin: 3px 0 0; font: 500 13px/1.45 Inter, sans-serif; color: #e6d6c2; }
.bw-how b, .bw-how-inline b { color: #F3E7D3; }
.bw-how b.hl, .bw-how-inline b.hl { color: #FFC27A; }
.bw-how b.hp { color: #ff8a7a; }
.bw-how b.mp { color: #7fb8ff; }
.bw-how b.warn { color: #ff6a4a; }
.bw-how-inline { padding: 8px 10px; border-radius: 6px; border-left: 3px solid #FF8A2A; background: #120d0c; }

.bw-ctl { display: grid; gap: 6px; }
.bw-ctl h5, .bw-h { margin: 4px 0 0; font: 800 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #C98A42; display: flex; align-items: center; gap: 8px; }
.bw-ctl h5::after, .bw-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #3a2a20, transparent); }
.bw-slider { display: grid; grid-template-columns: 22px minmax(150px, 210px) 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 7px; background: #120d0c; border: 1px solid #241c19; }
.bw-slider > i { font-style: normal; text-align: center; color: #C98A42; }
.bw-slider > span { display: grid; }
.bw-slider > span b { font: 600 13px Inter, sans-serif; color: #F3E7D3; }
.bw-slider > span small { font: 500 10.5px Inter, sans-serif; color: #8f7a64; }
.bw-slider input[type=range] { --p: 0%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; cursor: pointer; background: linear-gradient(90deg, #FF6A00 0 var(--p), #2a1d17 var(--p)); }
.bw-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4e0, #FF8A2A); border: 1px solid #000; box-shadow: 0 0 6px rgba(255, 106, 0, .7); }
.bw-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #FF8A2A; border: 1px solid #000; }
.bw-num { display: flex; align-items: center; gap: 3px; }
.bw-num input { width: 54px; padding: 4px 6px; text-align: right; border-radius: 5px; background: #0b0807; border: 1px solid #3a2a20; color: #F3E7D3; font: 700 13px Inter, sans-serif; }
.bw-num em { font: 600 11px Inter, sans-serif; font-style: normal; color: #8f7a64; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bw-chips button { padding: 5px 11px; border-radius: 999px; cursor: pointer; font: 600 12px Inter, sans-serif; color: #C6B19A; background: #141010; border: 1px solid #3a2a20; }
.bw-chips button:hover { border-color: #67402B; }
.bw-chips button.active { color: #171313; background: #C98A42; border-color: #FFC27A; }
.bw-actions { display: flex; gap: 6px; justify-content: flex-end; padding-top: 2px; }
.bw-actions button:disabled { opacity: .4; cursor: default; }
.bw-target { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; }
.bw-target .bot-sec { display: grid; gap: 8px; }
.bw-note { margin: 4px 0 0; font: italic 400 12px Inter, sans-serif; color: #8f7a64; }
.bw-foot { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #241c19; }
.bw-foot-info { margin-right: auto; font: 500 11.5px Inter, sans-serif; color: #8f7a64; }
.bw-item { image-rendering: pixelated; }
@media (max-width: 760px) {
  .bw-main { grid-template-columns: 1fr; }
  .bw-card { grid-template-columns: 52px 1fr; }
  .bw-area { grid-column: 1 / -1; }
  .bw-slider { grid-template-columns: 22px 1fr; }
}

/* ---------- Resumo da caçada (STOP numa hunt) ---------- */
.hs-box { position: relative !important; left: auto !important; top: auto !important; width: min(680px, calc(100vw - 24px)); animation: gc-pop .18s ease-out; box-shadow: 0 18px 60px rgba(0, 0, 0, .85), 0 0 30px rgba(255, 106, 0, .15); }
.hs-box .win-head { justify-content: center; }
.hs-box .win-title { font-size: 22px; letter-spacing: .12em; text-transform: uppercase; }
.hs-body { display: flex; flex-direction: column; gap: 12px; max-height: min(calc(100vh - 120px), 760px); overflow: hidden; padding: 12px 14px 14px; }
.hs-top { display: flex; justify-content: space-between; align-items: center; flex: none; }
.hs-hunt { padding: 4px 14px; border-radius: 999px; font: 700 14px "Crimson Pro", Georgia, serif; color: #F3E7D3; background: #1b1412; border: 1px solid #67402B; }
.hs-time { padding: 4px 12px; border-radius: 999px; font: 700 13px Inter, sans-serif; color: #FFC27A; background: #1b1412; border: 1px solid #67402B; font-variant-numeric: tabular-nums; }
.hs-cards { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hs-card {
  display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; text-align: center; border-radius: 9px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 106, 0, .12), transparent 60%), linear-gradient(180deg, #1a1311, #0d0908);
  border: 1px solid #3a2a20;
}
.hs-card i { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(255, 140, 40, .45)); }
.hs-card i svg { width: 100%; height: 100%; }
.hs-card small { font: 700 10.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #a8957f; }
.hs-card b { font: 700 22px "Crimson Pro", Georgia, serif; color: #F3E7D3; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hs-card b.pos { color: #FFC27A; }
.hs-card b.neg { color: #ff7a5a; }
.hs-card em { font: 500 11.5px Inter, sans-serif; font-style: normal; color: #8f7a64; }
.hs-card.lvl.up { border-color: #C98A42; box-shadow: 0 0 14px rgba(255, 106, 0, .25), inset 0 0 0 1px rgba(255, 194, 122, .15); }
.hs-card.lvl.up em { color: #FFC27A; font-weight: 700; }
.hs-bal { flex: none; padding: 10px 12px; border-radius: 8px; background: #120d0c; border: 1px solid #2c2320; }
.hs-bal-row { display: flex; justify-content: space-between; font: 600 12.5px Inter, sans-serif; margin-bottom: 6px; }
.hs-bal-row .pos { color: #FFC27A; }
.hs-bal-row .neg { color: #ff7a5a; }
.hs-bar { height: 9px; border-radius: 5px; background: #5a1a10; overflow: hidden; box-shadow: inset 0 1px 2px #000; }
.hs-bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #c94a00, #FF8A2A, #FFC27A); }
.hs-items { flex: 1; min-height: 120px; overflow: auto; display: grid; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #0d0908; border: 1px solid #2c2320; }
.hs-sec h5 { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; font: 800 12px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; }
.hs-sec h5 small { font: 500 11px Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #8f7a64; }
.hs-sec.spent h5 { color: #ff8a6a; }
.hs-sec.skip h5 { color: #a8957f; }
.hs-sec.ground h5 { color: #d8c7b0; }
.hs-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.hs-item { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: #161110; border: 1px solid #2c2320; box-shadow: inset 0 0 6px #000; }
.hs-item canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.hs-item b { position: absolute; right: 2px; bottom: 0; font: 800 10px Inter, sans-serif; color: #F3E7D3; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
.hs-sec.skip .hs-item canvas { opacity: .45; filter: grayscale(.6); }
.hs-none { margin: 0; font: italic 400 12px Inter, sans-serif; color: #6f5f50; }
.hs-foot { flex: none; display: flex; justify-content: center; }
.hs-foot .btn-fire { min-width: 160px; }
@media (max-width: 620px) { .hs-cards { grid-template-columns: repeat(2, 1fr); } }

/* tooltip acima das janelas modais (resumo da caçada, confirmações) */
#tip { z-index: 30000 !important; }

/* ---------- tela de carregamento: personagem indo e voltando ---------- */
.hl-trip { position: relative; width: 100%; height: 118px; margin: 2px 0 4px; }
.hl-trip > i { position: absolute; bottom: 4px; width: 44px; display: grid; justify-items: center; gap: 1px; font-style: normal; }
.hl-trip > i svg { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(255, 106, 0, .35)); }
.hl-trip > i small { font: 700 10px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #a8957f; }
.hl-home { left: 0; }
.hl-dest { right: 0; }
.hl-road { position: absolute; left: 50px; right: 50px; bottom: 26px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, #3a2a20 0 8px, transparent 8px 14px); }
.hl-road-fill { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, #7a2400, #FF8A2A); box-shadow: 0 0 8px rgba(255, 106, 0, .7); }
.hunt-loading[data-trip="go"] .hl-road-fill { left: 0; }
.hunt-loading[data-trip="home"] .hl-road-fill { right: 0; background: linear-gradient(270deg, #7a2400, #FF8A2A); }
.hl-walker { position: absolute; left: 0; bottom: 4px; width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .7)); will-change: transform; }
.hunt-loading[data-trip="go"] .hl-dest svg, .hunt-loading[data-trip="home"] .hl-home svg { animation: hl-goal 1.2s ease-in-out infinite; }
@keyframes hl-goal { 50% { filter: drop-shadow(0 0 14px rgba(255, 140, 40, .95)); transform: scale(1.06); } }

/* ---------- resumo: números rolando e brilho do ouro ---------- */
.hs-card { animation: hs-card-in .45s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: var(--d, 0ms); }
@keyframes hs-card-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.hs-card b, .hs-card em span, .hs-bal-row span span { font-variant-numeric: tabular-nums; }
.hs-pop { display: inline-block; animation: hs-pop .38s ease-out; }
@keyframes hs-pop { 40% { transform: scale(1.14); text-shadow: 0 0 14px rgba(255, 194, 122, .95); } }
.hs-bar .hs-bar-fill { width: 0; transition: width 1.3s cubic-bezier(.2,.7,.3,1) .5s; }

/* ---------- Bot: predefinições ---------- */
.bp-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.bp-lv { position: relative; display: grid; gap: 3px; justify-items: start; padding: 8px 10px; text-align: left; cursor: pointer; border-radius: 8px; background: #141010; border: 1px solid #2c2320; }
.bp-lv b { font: 700 15px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.bp-lv small { font: 500 10.5px Inter, sans-serif; color: #8f7a64; }
.bp-lv em { position: absolute; top: 6px; right: 8px; padding: 0 6px; border-radius: 999px; font: 700 9.5px Inter, sans-serif; font-style: normal; color: #171313; background: #C98A42; }
.bp-lv:hover { border-color: #67402B; }
.bp-lv.sel { border-color: #FF8A2A; box-shadow: 0 0 0 1px #FF6A00, 0 0 10px rgba(255, 106, 0, .35); }
.bp-lv.mine:not(.sel) { border-color: #C98A42; }
.bp-lv.locked { opacity: .55; }
.bp-ics { display: flex; gap: 3px; }
.bp-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bp-col { display: grid; align-content: start; gap: 4px; padding: 8px; border-radius: 8px; background: #0d0908; border: 1px solid #241c19; }
.bp-rule { display: grid; grid-template-columns: 26px 1fr; gap: 7px; align-items: center; }
.bp-rule span { display: grid; min-width: 0; }
.bp-rule b { font: 600 12px Inter, sans-serif; color: #F3E7D3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-rule small { font: 500 10.5px Inter, sans-serif; color: #8f7a64; }
.bp-rule code { font: 600 10.5px ui-monospace, Consolas, monospace; color: #FFC27A; }
@media (max-width: 760px) { .bp-prev { grid-template-columns: 1fr; } }

/* ---------- Tela de morte ---------- */
.ds-overlay { background: radial-gradient(circle at 50% 40%, rgba(60, 6, 4, .55), rgba(0, 0, 0, .88)); z-index: 25000; }
.ds-box { box-shadow: 0 18px 60px rgba(0, 0, 0, .9), 0 0 40px rgba(200, 30, 10, .25); }
.ds-box .win-title { color: #ff6a4a; text-shadow: 0 0 12px rgba(255, 60, 20, .45); }
.ds-cause { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 9px; background: linear-gradient(90deg, rgba(120, 18, 8, .35), #120d0c 70%); border: 1px solid #5a1a10; }
.ds-cause i { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(255, 60, 20, .5)); }
.ds-cause i svg { width: 100%; height: 100%; }
.ds-cause p { margin: 0; font: 500 14px/1.45 Inter, sans-serif; color: #d8c7b0; }
.ds-cause p b { color: #F3E7D3; font-family: "Crimson Pro", Georgia, serif; font-size: 16px; }
.ds-cause p small { display: block; font-size: 11.5px; color: #8f7a64; }
.hs-card.ds-bad { border-color: #6a2216; background: radial-gradient(circle at 50% 0%, rgba(255, 60, 20, .14), transparent 60%), linear-gradient(180deg, #1a1110, #0d0908); }
.ds-extra { flex: none; display: flex; justify-content: center; gap: 16px; font: 600 12.5px Inter, sans-serif; color: #ff8a6a; }
.ds-run { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 12px; border-radius: 8px; background: #120d0c; border: 1px solid #2c2320; font: 500 12.5px Inter, sans-serif; color: #a8957f; }
.ds-run h5 { margin: 0 6px 0 0; font: 800 11.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; }
.ds-run b { color: #F3E7D3; }
.ds-run b.pos { color: #FFC27A; }
.ds-run b.neg { color: #ff7a5a; }
.ds-items { min-height: 70px; flex: none; }
.ds-note { flex: none; margin: 0; padding: 9px 12px; border-radius: 8px; background: #120d0c; border: 1px solid #2c2320; font: 500 12.5px Inter, sans-serif; color: #a8957f; text-align: center; }
/* botão Bênçãos no Inventário */
.inv-bless { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 5px 8px; border-radius: 7px; cursor: pointer;
  font: 700 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3E7D3; background: linear-gradient(180deg, #2a1d14, #160f0c); border: 1px solid #67402B; }
.inv-bless:hover { border-color: #C98A42; color: #FFC27A; }
.inv-bless img { width: 22px; height: 22px; image-rendering: pixelated; }
/* Box / Kite no painel do bot */
.bot-style { display: inline-flex; margin: 0 auto; border: 1px solid #3a2a20; border-radius: 6px; overflow: hidden; background: #120d0c; }
.bot-style button { padding: 2px 9px; border: 0; background: transparent; cursor: pointer; font: 800 10.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8f7a64; }
.bot-style button + button { border-left: 1px solid #3a2a20; }
.bot-style button:hover { color: #F3E7D3; }
.bot-style button.on { color: #171313; background: linear-gradient(180deg, #FFC27A, #C98A42); }

/* ---------- botão HUD (no Inventário): esconde toda a interface e deixa só o jogo ---------- */
.hud-btn { margin: 0 auto 0 8px; padding: 2px 8px; border-radius: 5px; border: 1px solid #67402B; cursor: pointer;
  background: linear-gradient(180deg, #2a1d14, #171313); color: #FFC27A; font: 800 10.5px Inter, sans-serif; letter-spacing: .1em; line-height: 1.4; }
.hud-btn:hover { border-color: #C98A42; color: #fff; }
.hud-btn.floating { position: fixed; z-index: 300; margin: 0; opacity: .6; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.hud-btn.floating:hover { opacity: 1; }
#screen-game.hud-off::before { display: none; }
#screen-game.hud-off > :not(#viewport) { display: none !important; }
#screen-game.hud-off .viewport { top: 0; }
#screen-game.hud-off #viewport > :not(canvas):not(#loading-veil):not(#hud-stats):not(#hud-layer):not(#boss-bar) { display: none !important; }
/* HUD escondida: fica só o essencial (barra de baixo com as magias, personagem com vida/mana e o Analisador de Hunt) */
#screen-game.hud-off #hud-layer > :not(#win-hotbar):not(#win-char):not(#win-hunt-analyzer) { display: none !important; }
.hud-stats { display: none; position: absolute; left: 12px; top: 12px; z-index: 60; padding: 6px 11px; border-radius: 7px; pointer-events: none;
  background: rgba(15, 10, 9, .66); border: 1px solid rgba(201, 138, 66, .35); font: 600 13px Inter, sans-serif; color: #F3E7D3; }
.hud-stats b { color: #FFC27A; }
.hud-stats b.good { color: #7fe08f; } .hud-stats b.warn { color: #ffd166; } .hud-stats b.bad { color: #ff6a5a; }
#screen-game.hud-off .hud-stats { display: block; }

/* painel de diagnóstico de desempenho (clique no FPS/MS) */
.perf-panel { position: fixed; z-index: 400; display: grid; gap: 3px; padding: 10px 12px; min-width: 300px; border-radius: 8px;
  background: rgba(15, 10, 9, .95); border: 1px solid #67402B; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); font: 500 12.5px Inter, sans-serif; color: #C6B19A; }
.perf-panel[hidden] { display: none; }
.perf-panel b { font: 800 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; margin-bottom: 3px; }
.perf-panel em { font-style: normal; font-weight: 700; color: #F3E7D3; }
.perf-panel small { margin-top: 4px; color: #8f7a64; }

/* aviso: navegador sem aceleração de hardware */
.gpu-warn { position: fixed; z-index: 500; left: 50%; top: 18%; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); }
.gpu-warn .win-body { display: grid; gap: 8px; font: 500 13.5px/1.5 Inter, sans-serif; color: #C6B19A; }
.gpu-warn p { margin: 0; }
.gpu-warn b { color: #F3E7D3; }
.gpu-warn-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* aba com conversa nova: Privados pisca; as outras só ganham um traço laranja */
.chat-tabs button.unread:not([data-tab="priv"]) { animation: none; box-shadow: inset 0 -2px 0 var(--fire); color: #fff; }

/* ---------- hunts PvP (botão em cada hunt) ---------- */
.gc-text { white-space: pre-line; }
.hu-gos { display: grid; gap: 4px; }
.hu-pvp { width: 100%; padding: 4px 6px; border-radius: 5px; border: 1px solid #7a1f14; background: linear-gradient(180deg, #3a1410, #200a08); color: #ffb3a0; font: 600 11.5px Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hu-pvp b { color: #ff6a4a; letter-spacing: .06em; }
.hu-pvp:hover:not(:disabled) { border-color: #ff6a4a; color: #fff; box-shadow: 0 0 8px rgba(255, 70, 40, .45); }
.hu-pvp:disabled { opacity: .45; cursor: default; }
.hu-row.pvp-open { box-shadow: inset -3px 0 0 #c22a14; }

/* ---------- slots sem a borda dourada e sem os rebites ---------- */
.slot { border: 1px solid #2c2320; border-image: none; outline: 1px solid #000; border-radius: 3px; }
.slot::before { content: none; }
.slot:not(.empty):hover, .slot.empty:hover { border-image: none; border-color: var(--fire); }

/* ---------- brilho atrás do slot pela cor do valor do item (como no Tibia) ---------- */
.slot.val-1 { --vc: 170, 170, 170; }
.slot.val-2 { --vc: 70, 210, 90; }
.slot.val-3 { --vc: 70, 150, 255; }
.slot.val-4 { --vc: 185, 95, 255; }
.slot.val-5 { --vc: 255, 200, 50; }
.slot[class*="val-"] {
  border-color: rgba(var(--vc), .85);
  background: radial-gradient(circle at 50% 50%, rgba(var(--vc), .38) 0%, rgba(var(--vc), .14) 45%, transparent 72%), linear-gradient(180deg, #241a16, #0e0b0a);
  box-shadow: inset 0 0 10px rgba(var(--vc), .35), 0 0 6px rgba(var(--vc), .35);
}
.slot.val-1 { box-shadow: inset 0 0 6px rgba(var(--vc), .2); }
.slot.val-5 { box-shadow: inset 0 0 12px rgba(var(--vc), .45), 0 0 9px rgba(var(--vc), .55); }

/* ---------- mensagens de voz no chat ---------- */
.chat-mic { flex: none; min-width: 34px; padding: 4px 8px !important; font-size: 13px !important; }
.chat-mic.rec { color: #fff; border-color: #ff3b2a; background: linear-gradient(180deg, #8a1a10, #4a0c06); font: 700 12px Inter, sans-serif !important; animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 10px rgba(255, 60, 40, .8); } }
.voice-msg { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; padding: 1px 6px 1px 2px; border: 1px solid #3a2a20; border-radius: 999px; background: #140e0b; }
.voice-play { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #C98A42; background: linear-gradient(180deg, #ff8a2a, #c94a00); color: #fff; font: 700 9px/1 Inter, sans-serif; cursor: pointer; }
.voice-bar { position: relative; display: block; width: 90px; height: 4px; border-radius: 2px; background: #3a2a20; overflow: hidden; }
.voice-bar u { position: absolute; inset: 0 auto 0 0; width: 0; background: #FF8A2A; }
.voice-msg small { color: #a8957f; font-size: 11px; }

/* ---------- Hunts grande em cima, Bot verde embaixo, com brilho ---------- */
.hunt-go { min-width: 150px; }
.hunt-btns { grid-template-columns: 1fr; gap: 5px; }
.btn-hunts { padding: 11px 16px; font-size: 21px; overflow: hidden; isolation: isolate; }
.btn-hunts span { font-size: 21px; }
.btn-bot-open {
  position: relative; overflow: hidden; isolation: isolate; padding: 5px 10px; font-size: 15px; color: #f0ffe8;
  background: linear-gradient(180deg, #5fd36a, #23963a 55%, #0f5a1e); border: 1px solid #9af0a0;
  box-shadow: 0 0 0 1px #000, 0 0 12px rgba(80, 220, 100, .45), inset 0 1px 0 rgba(230, 255, 220, .45);
  text-shadow: 0 1px 2px #063010;
}
.btn-bot-open span { color: #eaffdf; }
.btn-bot-open:hover { border-color: #c8ffc8; filter: brightness(1.12); }
.btn-bot-open.on { border-color: #c8ffc8; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(90, 240, 110, .8), inset 0 1px 0 rgba(230, 255, 220, .5); }
.btn-bot-open.on span { color: #fff; }
.btn-bot-open::after {   /* pulso verde (só opacidade) */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 18px rgba(90, 240, 110, .85); opacity: 0; animation: hunt-pulse 2.4s ease-in-out infinite; animation-delay: -1.2s;
}
/* reflexo de luz passando pelos dois botões */
.btn-hunts::before, .btn-bot-open::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-12deg); animation: btn-shine 3.6s ease-in-out infinite; will-change: transform;
}
.btn-bot-open::before { animation-delay: -1.8s; }
@keyframes btn-shine { 0% { transform: translateX(0) skewX(-12deg); } 45%, 100% { transform: translateX(420%) skewX(-12deg); } }
body.perf-mode .btn-hunts::before, body.perf-mode .btn-bot-open::before, body.perf-mode .btn-bot-open::after { animation: none; opacity: 0; }

/* ---------- ficha: ícones nos títulos, chips de elemento, cartões de combate/totais ---------- */
.sh-sec h4:has(.sh-ico)::before, .sh-wide h4::before { content: none; }
.sh-sec h4 .sh-ico, .sh-wide h4 .sh-ico { width: 26px; height: 26px; }
.sh-wide { margin-top: 12px; }
.sh-wide h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 13px Cinzel, "Crimson Pro", serif; letter-spacing: .12em; text-transform: uppercase; color: #FFB15C; }
.sh-wide h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #67402B, transparent); }
.sh-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sh-stat { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; min-height: 96px; }
.sh-stat h5 { margin: 2px 0 8px; font: 700 10px Cinzel, "Crimson Pro", serif; letter-spacing: .1em; text-transform: uppercase; color: #C98A42; line-height: 1.3; }
.sh-stat b { display: block; font: 800 18px Inter, sans-serif; color: #fff; word-break: break-word; }
.sh-stat small { display: block; margin-top: 4px; font-size: 10.5px; color: #8d7a66; line-height: 1.3; }
.sh-elems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sh-elem { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #3a2a20; border-radius: 9px; background: rgba(0, 0, 0, .25); font-size: 12.5px; color: #C6B19A; }
.sh-elem i { font-style: normal; font-size: 15px; color: var(--ec); filter: drop-shadow(0 0 4px var(--ec)); width: 18px; text-align: center; }
.sh-elem b { margin-left: auto; color: #f0e2cf; }
.sh-elem b.up { color: #5fe0a6; }
.sh-elem b.down { color: #ff6b5a; }
.sh-imbs { display: grid; }
.sh-imbrow { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid rgba(103, 64, 43, .35); font-size: 13px; color: #e6d6c2; }
.sh-imbrow .sh-ico { width: 24px; height: 24px; }
.sh-imbrow small { color: #8d7a66; }
.sh-imbrow b { margin-left: auto; color: #f0e2cf; }
.hu-pvp .hu-x { font-style: normal; margin-right: 5px; color: #ff4a3a; font-weight: 800; }
.hu-pvp:disabled { opacity: .75; filter: grayscale(.35); }

/* ---------- minimapa (redimensiona pelo canto) ---------- */
#win-minimap .win-head { gap: 2px; width: 0; min-width: 100%; box-sizing: border-box; } /* a barra não alarga a janela: quem manda é o mapa */
#win-minimap { min-width: 0 !important; }
#win-minimap .win-title { flex: none; margin-right: 4px; }
.mm-floor { flex: 1 1 0; min-width: 0; font: 600 11px Inter, sans-serif; color: #a8957f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-btn { flex: none; width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border-radius: 4px; border: 1px solid #67402B; background: linear-gradient(180deg, #2a1d16, #140e0b); color: #FFC27A; font: 700 11px/1 Inter, sans-serif; cursor: pointer; }
.mm-btn:hover { border-color: #FF8A2A; color: #fff; }
.mm-body { position: relative; width: 220px; height: 220px; min-width: 200px; min-height: 200px; max-width: min(420px, 60vh); max-height: min(420px, 60vh);
  padding: 0 !important; resize: both; overflow: hidden; background: #000; border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 0 0 1px #3a2a20; cursor: default; } /* ponteiro normal: clique anda, como no Tibia */
.mm-body.dragging { cursor: grabbing; }
.mm-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* botão PvP: verde com espadas quando pode entrar; apagado e riscado quando não */
.hu-pvp { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; }
.hu-pvp .hu-sw { width: 14px; height: 14px; flex: none; }
.hu-pvp.ok { border-color: #3fae5a; background: linear-gradient(180deg, #1f5a2c, #0d2a14); color: #b8f5c4; }
.hu-pvp.ok b { color: #6fe08f; }
.hu-pvp.ok:hover:not(:disabled) { border-color: #8af0a0; color: #fff; box-shadow: 0 0 8px rgba(90, 230, 120, .5); }
.hu-pvp.ok:disabled { opacity: 1; filter: none; }
.hu-pvp.no { opacity: .45; filter: grayscale(.6); border-color: #4a3a30; background: linear-gradient(180deg, #2a1d16, #140e0b); color: #a8957f; }
.hu-pvp.no b { color: #c6b19a; }
.hu-pvp.no::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #ff3b2a; transform: rotate(-8deg); box-shadow: 0 0 3px rgba(255, 40, 20, .8); }

/* ---------- bot: aba Rota (desenhar a volta na imagem da hunt) ---------- */
.bw-route { display: flex; flex-direction: column; gap: 8px; }
.br-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.br-top select { min-width: 220px; padding: 5px 8px; background: #0d0907; border: 1px solid #000; box-shadow: 0 0 0 1px #4a3122; color: #F3E7D3; font: 600 12.5px Inter, sans-serif; border-radius: 4px; }
.br-tools { display: flex; gap: 5px; margin-left: auto; }
.br-tool { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 6px; border: 1px solid #3a2a20; background: linear-gradient(180deg, #2a1d16, #140e0b); color: #C6B19A; font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.br-tool i { font-style: normal; font-size: 15px; color: var(--mc); }
.br-tool:hover { color: #fff; border-color: var(--mc); }
.br-tool.on { color: #fff; border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc), 0 0 10px color-mix(in srgb, var(--mc) 55%, transparent); }
.br-help { margin: 0; font: 400 12px/1.45 Inter, sans-serif; color: #a8957f; }
.br-map { display: grid; place-items: center; padding: 6px; border: 1px solid #000; border-radius: 6px; background: #000; box-shadow: inset 0 0 0 1px #3a2a20; overflow: auto; max-height: 420px; }
.br-map canvas { display: block; max-width: 100%; image-rendering: pixelated; cursor: crosshair; touch-action: none; }
.br-foot { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.br-count { margin-right: auto; font: 600 12px Inter, sans-serif; color: #a8957f; }
.br-count b { color: #ffb14a; }
/* botão HUD com a interface escondida: maior, meio transparente e bem visível no canto */
.hud-btn.floating {
  top: 14px !important; right: 16px; left: auto !important; padding: 10px 22px; border-radius: 10px;
  font: 800 17px Inter, sans-serif; letter-spacing: .12em; color: #fff4e0;
  background: rgba(23, 19, 19, .55); border: 2px solid rgba(255, 140, 50, .85);
  box-shadow: 0 0 14px rgba(255, 106, 0, .45), 0 4px 12px rgba(0, 0, 0, .6); text-shadow: 0 1px 3px #000;
  opacity: .8; backdrop-filter: blur(2px);
}
.hud-btn.floating::before { content: "☰ "; }
.hud-btn.floating:hover { opacity: 1; background: rgba(60, 30, 12, .8); border-color: #ffb062; }

/* ===== janela "Editar atalho" da barra de ações (escolher magia / objeto / texto) ===== */
.hk-win { width: min(470px, calc(100vw - 24px)); }
.hk-win .win-body { display: flex; flex-direction: column; gap: 8px; }
.hk-tabs button { flex: 1; }
.hk-main { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.hk-search { width: 100%; }
.hk-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.hk-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid #3a2c24; background: #140f0d; color: #bfa98f; font: 600 11px Inter, sans-serif; cursor: pointer; }
.hk-chip:hover { border-color: var(--gold); color: #fff1cf; }
.hk-chip.on { border-color: #ffa347; color: #fff4e0; background: linear-gradient(180deg, #5a2408, #2a0f04); }
.hk-list { display: flex; flex-direction: column; gap: 3px; height: min(340px, calc(100vh - 330px)); min-height: 140px; overflow-y: auto; padding-right: 4px; }
.hk-sec { margin: 6px 2px 2px; font: 700 11px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #c98a42; }
.hk-row { display: grid; grid-template-columns: 36px 1fr; gap: 9px; align-items: center; padding: 4px 8px; border: 1px solid #2c2320; border-radius: 6px; background: linear-gradient(90deg, #171111, #0c0908); cursor: pointer; user-select: none; }
.hk-row:hover { border-color: #C98A42; }
.hk-row.sel { border-color: #ffa347; background: linear-gradient(90deg, #3a1a08, #140a06); box-shadow: 0 0 10px rgba(255, 106, 0, .35); }
.hk-row.locked { opacity: .5; }
.hk-row .spell-ic { width: 36px !important; height: 36px !important; }
.hk-item { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #2c2320; border-radius: 4px; background: #0b0807; }
.hk-item canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.hk-info { display: grid; min-width: 0; }
.hk-info b { font: 700 15px/1.15 "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.hk-info code { font: 600 12px ui-monospace, Consolas, monospace; color: #FFC27A; }
.hk-info small { font: 400 11px Inter, sans-serif; color: #a8957f; }
.hk-info i { font-style: normal; }
.hk-target { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font: 600 12px Inter, sans-serif; color: #d8c6ad; }
.hk-target:empty { display: none; }
.hk-target label, .hk-check { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.hk-check { font: 600 13px Inter, sans-serif; color: #e8d9c4; }
.hk-label { font: 700 12px Inter, sans-serif; color: #c98a42; }
.hk-text { width: 100%; resize: vertical; min-height: 64px; font: 500 14px Inter, sans-serif; }
.hk-foot { display: flex; gap: 6px; align-items: center; border-top: 1px solid #2c2320; padding-top: 8px; }
.hk-preview { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font: 600 12px Inter, sans-serif; color: #e8d9c4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hk-preview .spell-ic { width: 24px !important; height: 24px !important; flex: none; }
.hot-text { color: #ffd9a8; }

/* rota do bot: zoom do mapa */
.br-mapbox { position: relative; }
.br-map.zoomed { display: block; max-height: min(520px, calc(100vh - 300px)); }
.br-map.zoomed canvas { max-width: none; }
.br-zoom { position: absolute; top: 10px; right: 14px; display: flex; flex-direction: column; gap: 4px; align-items: center; z-index: 2; }
.br-zoom button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #5a3a22; background: rgba(20, 13, 10, .88); color: #ffd9a8; font: 800 17px/1 Inter, sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.br-zoom button:hover { border-color: #ffa347; color: #fff; box-shadow: 0 0 8px rgba(255, 106, 0, .5); }
.br-zl { font: 700 10px Inter, sans-serif; color: #ffd9a8; background: rgba(0, 0, 0, .7); padding: 1px 5px; border-radius: 4px; text-shadow: 0 1px 1px #000; }
.bot-switch b { font-size: 15px; letter-spacing: .04em; }

/* painel do bot: botões pequenos de ligar/desligar cada função */
.bot-toggles { display: flex; gap: 3px; flex-wrap: wrap; }
.bot-toggles button { padding: 3px 7px; border-radius: 5px; border: 1px solid #3a2a20; background: linear-gradient(180deg, #1d1512, #110c0a); color: #7d6a58; font: 800 10px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; position: relative; padding-left: 15px; transition: color .12s, border-color .12s, box-shadow .12s; }
.bot-toggles button::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #4a3428; box-shadow: inset 0 0 2px #000; }
.bot-toggles button:hover { color: #e8d9c4; border-color: #67402B; }
.bot-toggles button.on { color: #fff4e0; border-color: #c96a20; background: linear-gradient(180deg, #4a1d06, #241005); box-shadow: 0 0 6px rgba(255, 106, 0, .35); }
.bot-toggles button.on::before { background: #7dff6a; box-shadow: 0 0 5px #4dff3a; }
.bot-toggles button[data-f="cave"].on { border-color: #ffa347; background: linear-gradient(180deg, #a83d00, #5a1f00); }
.bot-toggles { flex-wrap: nowrap; gap: 2px; }
.bot-toggles button { padding: 3px 5px 3px 12px; font-size: 9.5px; letter-spacing: .03em; }
.bot-toggles button::before { left: 4px; width: 5px; height: 5px; margin-top: -2.5px; }

/* bot: regra desabilitada (fica na fila, o bot não usa) */
.bw-slot { position: relative; }
.bw-power { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #1d4a14; border: 1px solid #5fd34a; color: #b8ffab; font: 700 10px/1 Inter, sans-serif; font-style: normal; cursor: pointer; box-shadow: 0 1px 3px #000; z-index: 2; }
.bw-power:hover { transform: scale(1.15); }
.bw-slot.off .bw-power { background: #4a1414; border-color: #e04a4a; color: #ffb0b0; }
.bw-slot.off .spell-ic, .bw-slot.off canvas { filter: grayscale(1) brightness(.55); }
.bw-slot.off::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: #e04a4a; transform: rotate(-35deg); box-shadow: 0 0 3px #000; z-index: 1; pointer-events: none; }

/* "Look" (olhar) na tela, como a mensagem verde do Tibia */
#look-text { position: absolute; left: 50%; bottom: 180px; transform: translateX(-50%); max-width: min(720px, 80%); text-align: center; font: 700 13.5px/1.35 Verdana, sans-serif; color: #5fff5f; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 30; white-space: pre-wrap; }
#look-text.show { opacity: 1; }
/* mensagens na tela do jogo como no Tibia 8.60: no meio (sobre o personagem) e embaixo */
.screen-msg { position: absolute; left: 50%; transform: translate(-50%, -50%); top: 44%; max-width: min(760px, 86%); text-align: center;
  font: 700 13.5px/1.3 Verdana, sans-serif; color: #fff; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 30; white-space: pre-wrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.screen-msg.show { opacity: 1; }
.screen-msg[data-c="green"] { color: #00eb00; }
.screen-msg[data-c="red"] { color: #f55e5e; }
#screen-msg-status { top: auto; bottom: 136px; transform: translateX(-50%); } /* acima do painel de baixo (hunts/bot) */

/* tier da forja no canto do slot (como no Tibia) */
.slot { position: relative; }
.slot-tier { position: absolute; left: 1px; top: 1px; min-width: 13px; height: 13px; padding: 0 2px; display: grid; place-items: center; border-radius: 3px; background: linear-gradient(180deg, #ffe08a, #c98a1a); color: #2a1400; font: 800 9.5px/1 Verdana, sans-serif; box-shadow: 0 0 0 1px #000, 0 0 4px rgba(255, 200, 80, .6); pointer-events: none; z-index: 3; }

/* ---------- HUD: escala, transparência, chat transparente, janelas travadas (Opções > HUD) ---------- */
/* Todas as janelas ficam na #hud-layer, que é escalada por inteiro: o mapa (canvas) e os nomes
   das criaturas ficam do tamanho padrão, só a interface muda. */
.hud-layer {
  position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: calc(100% / var(--hud-s, 1)); height: calc(100% / var(--hud-s, 1));
  transform: scale(var(--hud-s, 1)); transform-origin: 0 0;
}
.hud-layer > * { pointer-events: auto; }
.hud-layer > .win:not(:hover):not(:focus-within) { opacity: var(--hud-a, 1); transition: opacity .15s; }
body.hud-locked .hud-layer .win-head { cursor: default; }
/* chat transparente: só o texto por cima do jogo; mouse em cima ou Enter (foco no campo) = normal */
body.chat-ghost #win-chat:not(:hover):not(:focus-within) {
  opacity: 1; background: none; border-image: none; border-color: transparent; box-shadow: none;
}
body.chat-ghost #win-chat:not(:hover):not(:focus-within) > .win-head,
body.chat-ghost #win-chat:not(:hover):not(:focus-within) .chat-tabs,
body.chat-ghost #win-chat:not(:hover):not(:focus-within) .chat-form { visibility: hidden; }
body.chat-ghost #win-chat:not(:hover):not(:focus-within) .chat-log {
  background: transparent; border-color: transparent; box-shadow: none; scrollbar-width: none;
  text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 1px #000;
}
.opt-action { min-width: 110px; }

/* asas na janela de outfit: ícone da asa + os 2 bônus embaixo do nome */
.of-chip.of-wing { border-radius: 8px; padding: 3px 9px 3px 4px; text-align: left; }
.of-chip.of-wing i { width: 26px; height: 26px; border-radius: 4px; box-shadow: none; background-color: #0b0807; }
.of-chip.of-wing i.none { width: 26px; height: 26px; }
.of-chip.of-wing span { display: flex; flex-direction: column; line-height: 1.2; }
.of-wing-bonus { font: 600 9.5px Inter, sans-serif; color: #7fe08f; opacity: .9; }
/* abas das Opções: as 7 cabem na largura da janela (se não couber, quebram em duas linhas) */
.opt-tabs { flex-wrap: wrap; }
.opt-tabs button { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 14px; }
.opt-range .opt-apply { margin-left: 6px; padding: 4px 10px; }

/* ---------- janela Aventuras: abas Hunts/Bosses, cards em grade (cabe mais hunts), tela do boss ---------- */
.hunts-win { width: min(940px, calc(100vw - 24px)); }
.av-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.av-tab { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 1px solid #3a2a20; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #1b1412, #0d0908); color: #c6b19a; font: 700 15px "Cinzel", "Crimson Pro", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.av-tab i { font-style: normal; font-size: 20px; color: #FFC27A; }
.av-tab:hover { border-color: #67402B; color: #f0e2cf; }
.av-tab.active { border-color: #FF6A00; color: #fff4e0; background: linear-gradient(180deg, #4a1d06, #1e0b03); box-shadow: 0 0 12px rgba(255, 106, 0, .35), inset 0 0 0 1px rgba(255, 170, 90, .25); }
.av-search { flex: 1; min-width: 140px; padding: 7px 10px; border: 1px solid #3a2a20; border-radius: 6px; background: #0e0a09; color: #F3E7D3; font: 13px Inter, sans-serif; }
.av-search:focus { outline: 1px solid var(--gold); }
.av-count { color: #8f7a64; font: 600 12px Inter, sans-serif; white-space: nowrap; }
.av-info { display: grid; gap: 3px; margin-bottom: 8px; padding: 9px 12px; border: 1px solid #4a2f1d; border-left: 3px solid #FF6A00; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 106, 0, .08), transparent 60%); }
.av-info b { font: 700 16px "Crimson Pro", Georgia, serif; color: #FFC27A; }
.av-info span { font: 12.5px/1.45 Inter, sans-serif; color: #c6b19a; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: min(560px, calc(100vh - 320px)); overflow-y: auto; padding: 2px 4px 2px 0; }
.av-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px; border: 1px solid #2c201a; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 106, 0, .07), transparent 65%), linear-gradient(180deg, #171111, #0b0807); color: inherit; text-align: center; font: inherit; }
button.av-card { cursor: pointer; }
.av-card:hover { border-color: #67402B; }
.av-card.good { border-color: #8a5a2c; box-shadow: 0 0 10px rgba(255, 106, 0, .16); }
.av-card.here { border-color: #FFA347; box-shadow: 0 0 14px rgba(255, 106, 0, .35); }
.av-card.locked { opacity: .5; }
.av-card.pvp-open { box-shadow: inset 0 -3px 0 #c22a14; }
.av-name { font: 700 14px/1.15 "Cinzel", "Crimson Pro", Georgia, serif; color: #F3E7D3; letter-spacing: .04em; text-transform: uppercase; }
.av-pics { display: flex; justify-content: center; gap: 2px; min-height: 52px; }
.av-pics .hu-pic { width: 46px; height: 50px; }
.av-region { font: 600 11.5px Inter, sans-serif; color: #a8957f; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-lv { padding: 2px 10px; border: 1px solid #8a5a2c; border-radius: 999px; background: #1e140c; color: #FFC27A; font: 700 11.5px Inter, sans-serif; }
.av-go { display: flex; gap: 5px; width: 100%; margin-top: 2px; }
.av-go > button { flex: 1; min-width: 0; }
.av-state { font: 700 11px Inter, sans-serif; color: #7fe08f; text-transform: uppercase; letter-spacing: .06em; }
.av-boss.wait .av-state { color: #ffb86a; }
.av-boss.locked .av-state { color: #a8957f; }
.av-boss .av-pics .hu-pic { width: 64px; height: 64px; }
.av-back { margin-bottom: 8px; }
.bd-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.bd-wrap h4, .bd-res h5 { margin: 0 0 6px; font: 700 12px Inter, sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.bd-note { margin: 0 0 8px; padding: 6px 9px; border-left: 2px solid #8a5a2c; background: rgba(255, 255, 255, .03); font: 12px/1.4 Inter, sans-serif; color: #a8957f; }
.bd-items { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 5px; max-height: 260px; overflow-y: auto; }
.bd-item { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #2c201a; border-radius: 6px; background: #0e0a09; }
.bd-item canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bd-item.rare { border-color: #6a4ab8; box-shadow: inset 0 0 8px rgba(140, 100, 255, .25); }
.bd-item.epic { border-color: #d9a43a; box-shadow: inset 0 0 8px rgba(255, 190, 60, .3); }
.bd-info { padding: 10px; border: 1px solid #2c201a; border-radius: 8px; background: linear-gradient(180deg, #151010, #0b0807); }
.bd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bd-head .hu-pic { width: 64px; height: 64px; }
.bd-head b { display: block; font: 700 18px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.bd-head small { font: 600 12px Inter, sans-serif; color: var(--gold); }
.bd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 8px; }
.bd-stats div { display: grid; justify-items: center; padding: 7px 2px; border: 1px solid #2c201a; border-radius: 6px; background: #0e0a09; }
.bd-stats b { font: 700 14px Inter, sans-serif; color: #F3E7D3; }
.bd-stats small { font: 11px Inter, sans-serif; color: #8f7a64; }
.bd-res { display: flex; flex-wrap: wrap; gap: 5px; }
.bd-res h5 { width: 100%; margin: 0; }
.bd-el { padding: 2px 8px; border: 1px solid #3a2a20; border-radius: 5px; background: #120d0b; font: 600 11.5px Inter, sans-serif; color: #c6b19a; }
.bd-el b { margin-left: 3px; }
.bd-el.res b { color: #ff7a5a; }
.bd-el.weak b { color: #7fe08f; }
.bd-rules { margin: 10px 0; padding: 8px 12px 8px 26px; border: 1px solid #2c201a; border-radius: 8px; background: #0e0a09; font: 12.5px/1.6 Inter, sans-serif; color: #c6b19a; }
.bd-go { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-btn { display: grid; gap: 2px; padding: 12px; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
.bd-btn b { font: 700 16px "Cinzel", "Crimson Pro", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.bd-btn small { font: 12px Inter, sans-serif; opacity: .85; }
.bd-btn.solo { border: 1px solid #8a5a2c; background: linear-gradient(180deg, #2a1a10, #120b07); color: #FFC27A; }
.bd-btn.party { border: 1px solid #FF6A00; background: linear-gradient(180deg, #5a2408, #2a0f04); color: #fff4e0; box-shadow: 0 0 10px rgba(255, 106, 0, .3); }
.bd-btn:hover:not(:disabled) { filter: brightness(1.15); }
.bd-btn:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
@media (max-width: 760px) { .bd-wrap, .bd-go { grid-template-columns: 1fr; } }
/* barra de vida do boss no topo da tela (dentro da sala) */
.boss-bar { position: absolute; left: 50%; top: 10px; /* os estados agora ficam no cartão do personagem */ transform: translateX(-50%); z-index: 32; display: flex; align-items: center; gap: 10px; width: min(640px, calc(100% - 24px));
  padding: 6px 12px 7px 6px; border: 1px solid #67402B; border-radius: 8px; background: linear-gradient(180deg, rgba(26, 14, 12, .94), rgba(12, 7, 6, .94)); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); pointer-events: none; }
.boss-bar .bb-pic .hu-pic { width: 44px; height: 44px; }
.bb-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bb-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bb-top b { font: 700 16px "Cinzel", "Crimson Pro", Georgia, serif; color: #F3E7D3; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bb-res { display: flex; gap: 3px; flex-wrap: wrap; overflow: hidden; max-height: 20px; }
.bb-res .bd-el { padding: 0 5px; font-size: 10.5px; }
.bb-hp { margin-left: auto; font: 600 11.5px Inter, sans-serif; color: #c6b19a; white-space: nowrap; }
.bb-track { position: relative; height: 16px; border: 1px solid #000; border-radius: 4px; background: #2a0b08; overflow: hidden; }
.bb-track i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #ff5a3c, #b3170c); transition: width .25s; }
.bb-track em { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.boss-bar.dead .bb-track em { color: #7fe08f; }
#screen-game.hud-off .boss-bar { display: flex !important; }

/* ---------- Party Finder (aba "Procurar party" da janela Aventuras) ---------- */
.av-tabs.three { grid-template-columns: 1fr 1fr 1fr; }
.bd-find { width: 100%; margin-top: 8px; }
.pf-box { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #4a2f1d; border-radius: 8px; background: linear-gradient(180deg, #171111, #0b0807); display: grid; gap: 8px; }
.pf-box h4, .pf-head { margin: 0; font: 700 12px Inter, sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; }
.pf-head { margin: 4px 0 6px; }
.pf-form { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-form select, .pf-lv { padding: 6px 8px; border: 1px solid #3a2a20; border-radius: 6px; background: #0e0a09; color: #F3E7D3; font: 13px Inter, sans-serif; }
.pf-form select { flex: 1; min-width: 120px; }
.pf-lv { width: 80px; }
.pf-mine { display: grid; gap: 2px; }
.pf-mine b { font: 700 16px "Crimson Pro", Georgia, serif; color: #F3E7D3; }
.pf-mine span { font: 12px Inter, sans-serif; color: #c6b19a; }
.pf-mine em, .pf-note { font: italic 12px Inter, sans-serif; color: #a8957f; }
.pf-reqs { display: grid; gap: 5px; }
.pf-req { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #2c201a; border-radius: 6px; background: #0e0a09; }
.pf-req b { color: #F3E7D3; font: 700 13px Inter, sans-serif; }
.pf-req span { flex: 1; font: 12px Inter, sans-serif; color: #a8957f; }
.pf-empty { color: #8f7a64; font: 12px Inter, sans-serif; }
.pf-remove { justify-self: start; }
.pf-card { gap: 5px; }
.pf-kind { padding: 1px 8px; border-radius: 999px; font: 700 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; background: #2a1d14; color: #FFC27A; }
.pf-kind.boss { background: #3a1410; color: #ff9a7a; }
.pf-kind.hunt { background: #142a1a; color: #8fe0a0; }
.pf-owner { font: 600 12px Inter, sans-serif; color: #c6b19a; }
.social-item.finder i { filter: hue-rotate(160deg); }
.st-toast.good { border-color: #3fae5a; }
/* visuais só da equipe (GOD) na janela de outfit */
.of-chip.god { border-color: #c9a227; }
.of-chip.god span::after { content: " · GOD"; color: #ffd76a; font-size: 10px; }
.of-chip.hidden { display: none; }

/* dificuldade dos bosses (janela do boss) */
.bd-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 6px; }
.bd-tier { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 8px;
  border: 1px solid rgba(255, 200, 120, .18); background: rgba(0, 0, 0, .35); color: #d8c8a8; cursor: pointer;
  font: 700 11px Inter, sans-serif; letter-spacing: .3px; }
.bd-tier img { width: 22px; height: 22px; image-rendering: pixelated; }
.bd-tier:hover { border-color: rgba(255, 200, 120, .45); }
.bd-tier.on { color: #fff; box-shadow: 0 0 0 1px currentColor inset, 0 0 12px rgba(255, 180, 80, .25); }
.bd-tier.t1.on { color: #f2f2f2; background: rgba(255, 255, 255, .10); }
.bd-tier.t2.on { color: #ff6a5a; background: rgba(200, 30, 20, .22); }
.bd-tier.t3.on { color: #c9b8ff; background: rgba(40, 20, 70, .55); }
.bd-tier.t4.on { color: #ffd257; background: linear-gradient(180deg, rgba(90, 60, 0, .55), rgba(20, 10, 0, .7)); }
.bd-tierinfo { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 8px; }
.bd-tierinfo span { font: 600 10.5px Inter, sans-serif; color: #e9d9b6; background: rgba(255, 200, 120, .08);
  border: 1px solid rgba(255, 200, 120, .15); border-radius: 999px; padding: 2px 8px; }
.bb-tier { font: 700 10px Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; margin-left: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.bb-tier.t1 { color: #f2f2f2; background: rgba(255, 255, 255, .12); }
.bb-tier.t2 { color: #ff7b6b; background: rgba(200, 30, 20, .25); }
.bb-tier.t3 { color: #c9b8ff; background: rgba(40, 20, 70, .6); }
.bb-tier.t4 { color: #ffd257; background: rgba(90, 60, 0, .6); }

/* Auto Boss (aba Bosses) */
.ab-box { margin: 8px 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(80, 220, 170, .35);
  background: linear-gradient(180deg, rgba(10, 40, 34, .55), rgba(0, 0, 0, .35)); box-shadow: inset 3px 0 0 rgba(80, 220, 170, .55); }
.ab-head { display: flex; align-items: baseline; gap: 10px; }
.ab-head b { font: 700 15px Cinzel, serif; color: #f4e6c4; letter-spacing: .5px; }
.ab-head small { color: #b9a98a; font: 600 11px Inter, sans-serif; }
.ab-text, .ab-now { margin: 6px 0 8px; color: #d8cbb0; font: 500 12px Inter, sans-serif; line-height: 1.45; }
.ab-list { margin: 4px 0 8px; padding-left: 22px; max-height: 150px; overflow: auto; color: #e9dcc0; font: 600 12px Inter, sans-serif; }
.ab-list li { padding: 2px 0; }
.ab-list li.ok { color: #7fe08f; }
.ab-list li.skip { color: #9d8f78; text-decoration: line-through; }
.ab-list li.now { color: #ffd257; }
.ab-list li.empty { list-style: none; margin-left: -22px; color: #9d8f78; font-weight: 500; }
.ab-list.edit li { display: flex; align-items: center; gap: 4px; }
.ab-list.edit li span { flex: 1; }
.ab-list.edit button { width: 22px; height: 20px; border-radius: 5px; border: 1px solid rgba(255, 200, 120, .2); background: rgba(0, 0, 0, .35); color: #e9d9b6; cursor: pointer; font-size: 10px; }
.ab-opts { margin-bottom: 8px; }
.ab-party { display: flex; align-items: center; gap: 6px; color: #d8cbb0; font: 600 11.5px Inter, sans-serif; }
.ab-row { display: flex; gap: 8px; justify-content: flex-end; align-items: stretch; }
.ab-row .bd-btn { min-width: 260px; }
.ab-stop { margin-top: 2px; }
.av-card.ab-pickable { cursor: copy; }
.av-card.ab-picked { outline: 2px solid #50dcaa; outline-offset: -2px; }
.av-card .ab-num { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; border-radius: 999px; background: #50dcaa; color: #062018;
  font: 800 11px Inter, sans-serif; display: grid; place-items: center; padding: 0 5px; }
.av-card { position: relative; }
.ab-row { flex-wrap: wrap; }
.ab-list.edit { max-height: 220px; }

/* loot do boss: painel no meio da tela */
.boss-loot { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.96); z-index: 60; min-width: 300px; max-width: min(640px, 90%);
  padding: 12px 16px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(24, 14, 8, .94), rgba(8, 5, 3, .94));
  border: 1px solid rgba(255, 200, 120, .35); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); cursor: pointer;
  animation: blIn .25s ease-out forwards; transition: opacity .6s, transform .6s; pointer-events: auto; }
.boss-loot.out { opacity: 0; transform: translate(-50%, -60%) scale(.98); }
.boss-loot.purple { border-color: rgba(185, 107, 255, .8); box-shadow: 0 0 24px rgba(185, 107, 255, .45), 0 10px 40px rgba(0, 0, 0, .6); }
.boss-loot.gold { border-color: rgba(255, 201, 60, .9); box-shadow: 0 0 30px rgba(255, 201, 60, .55), 0 10px 40px rgba(0, 0, 0, .6); }
@keyframes blIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.bl-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.bl-head img { width: 20px; height: 20px; image-rendering: pixelated; }
.bl-head b { font: 700 16px Cinzel, serif; color: #f4e6c4; letter-spacing: .5px; }
.bl-head small { font: 700 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .6px; color: #ffd257; }
.bl-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.bl-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 78px; }
.bl-pic { position: relative; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--ic) 30%, transparent), rgba(0, 0, 0, .4) 70%);
  border: 1px solid color-mix(in srgb, var(--ic) 70%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--ic) 45%, transparent); }
.bl-pic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bl-pic em { position: absolute; right: 2px; bottom: 0; font: 700 10px Verdana, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000; font-style: normal; }
.bl-stars { position: absolute; left: 2px; top: 0; font: 9px sans-serif; color: var(--ic); text-shadow: 0 0 2px #000; font-style: normal; }
.bl-item small { font: 600 10.5px Inter, sans-serif; text-align: center; line-height: 1.2; }
.bl-none { color: #b9a98a; font: 600 12px Inter, sans-serif; }

/* ---------- convite de boss da party (web_bossparty.lua) ---------- */
.bp-invite { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, .45); pointer-events: auto; }
.bp-card { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow: auto; display: grid; gap: 10px; padding: 14px 16px 12px;
  border: 1px solid #8a5a34; border-radius: 10px; background: linear-gradient(180deg, #1f1310, #0d0806); box-shadow: 0 14px 40px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 200, 140, .08);
  animation: bp-in .25s ease-out; }
@keyframes bp-in { from { transform: translateY(10px) scale(.97); opacity: 0; } }
.bp-top { display: grid; gap: 2px; text-align: center; }
.bp-kicker { font: 700 10.5px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #e0a85a); }
.bp-from { font: 700 17px "Cinzel", "Crimson Pro", Georgia, serif; color: #F3E7D3; letter-spacing: .04em; }
.bp-main.one { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid #4a2f1d; border-radius: 8px; background: radial-gradient(circle at 20% 50%, rgba(255, 120, 60, .12), transparent 60%), #120b09; }
.bp-main.one .hu-pic { width: 96px; height: 96px; flex: none; display: grid; place-items: center; }
.bp-main.one .hu-pic canvas { width: 128px; height: 128px; image-rendering: pixelated; margin: -16px; }
.bp-main.many { display: grid; gap: 8px; }
.bp-name { display: grid; gap: 3px; min-width: 0; }
.bp-name b { font: 700 18px "Cinzel", "Crimson Pro", Georgia, serif; color: #F3E7D3; text-transform: uppercase; letter-spacing: .05em; }
.bp-name small { font: 500 11.5px Inter, sans-serif; color: #b89e83; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.bp-chip { padding: 1px 6px; border: 1px solid #4a2f1d; border-radius: 4px; font: 600 10.5px Inter, sans-serif; color: #d9c3a6; background: #1a110d; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 196px; overflow: auto; padding: 6px; border: 1px solid #4a2f1d; border-radius: 8px; background: #120b09; }
.bp-boss { position: relative; display: grid; justify-items: center; gap: 2px; padding: 4px 2px; border-radius: 6px; background: #1a110d; }
.bp-boss .hu-pic { width: 44px; height: 44px; }
.bp-boss em { position: absolute; top: 2px; left: 4px; font: 700 10px Inter, sans-serif; font-style: normal; color: var(--gold, #e0a85a); }
.bp-boss small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 9.5px Inter, sans-serif; color: #d9c3a6; }
.bp-more { display: grid; place-items: center; border-radius: 6px; background: #1a110d; font: 700 14px Inter, sans-serif; color: #b89e83; }
.bp-loot h5 { margin: 0 0 5px; font: 700 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #e0a85a); }
.bp-items { display: flex; flex-wrap: wrap; gap: 4px; }
.bp-none { font: 500 11.5px Inter, sans-serif; color: #8e7a66; }
.bp-warn { margin: 0; padding: 6px 8px; border: 1px solid #7a2d22; border-radius: 6px; background: #2a0f0b; font: 600 12px Inter, sans-serif; color: #ff9a85; }
.bp-time { height: 5px; border-radius: 3px; background: #2a1810; overflow: hidden; }
.bp-time i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a3c, #ffc93c); transition: width .1s linear; }
.bp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bp-btns button { padding: 9px 0; font-weight: 700; }
.bp-sent, .bp-end { margin: 0; text-align: center; font: 600 12.5px Inter, sans-serif; color: #d9c3a6; }
.bp-sent.ok, .bp-end { color: #7fe08f; }
.bp-sent.no { color: #ff9a85; }
.bp-status { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 55; width: 240px; padding: 9px 11px; border: 1px solid #67402B; border-radius: 8px;
  background: linear-gradient(180deg, rgba(26, 14, 12, .96), rgba(12, 7, 6, .96)); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); display: grid; gap: 6px; }
.bp-st-head { display: grid; gap: 1px; }
.bp-st-head b { font: 700 13px "Cinzel", Georgia, serif; color: #F3E7D3; letter-spacing: .05em; }
.bp-st-head small { font: 500 11px Inter, sans-serif; color: #b89e83; }
.bp-status ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.bp-status li { display: grid; grid-template-columns: 16px 1fr; column-gap: 6px; font: 600 12px Inter, sans-serif; color: #e6d6c2; }
.bp-status li small { grid-column: 2; font: 500 10.5px Inter, sans-serif; color: #9c8670; }
.bp-status li i { font-style: normal; text-align: center; }
.bp-status li.s-ok i { color: #7fe08f; } .bp-status li.s-no i, .bp-status li.s-cancel i { color: #ff7a66; } .bp-status li.s-timeout i { color: #c9a23c; } .bp-status li.s-wait i { color: #b89e83; }
/* cronômetro da sala do boss (20 min) */
.bb-time { margin-left: auto; padding: 1px 7px; border: 1px solid #4a2f1d; border-radius: 4px; font: 700 12px Inter, sans-serif; color: #f3e7d3; background: #1a110d; white-space: nowrap; }
.bb-time:empty { display: none; }
.bb-time.low { color: #fff; border-color: #b3170c; background: #5a0f08; animation: bb-blink 1s steps(2) infinite; }
.bb-time + .bb-hp { margin-left: 8px; }
@keyframes bb-blink { 50% { opacity: .55; } }

/* ---------- Codex (web_codex.lua) ---------- */
#win-sys-codex.cx-win { width: min(980px, calc(100vw - 32px)) !important; max-width: none !important; }
.cx-win .win-body { display: grid; gap: 10px; max-height: min(780px, calc(100vh - 120px)); overflow: hidden; }
.cx-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.cx-title b { display: block; font: 700 22px "Cinzel", "Crimson Pro", Georgia, serif; color: #F3E7D3; letter-spacing: .06em; }
.cx-title small { font: 500 11px Inter, sans-serif; color: #a8957f; }
.cx-prog-txt { display: flex; justify-content: space-between; font: 600 11.5px Inter, sans-serif; color: #d9c3a6; margin-bottom: 4px; }
.cx-bar { height: 12px; border: 1px solid #000; border-radius: 6px; background: #1a110d; overflow: hidden; box-shadow: inset 0 0 0 1px #3a2a20; }
.cx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f9e88, #7fe0c8); transition: width .3s; }
.cx-buffs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cx-buff { position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 6px 9px; border: 1px solid #4a2f1d; border-radius: 8px; background: linear-gradient(180deg, #1d130f, #0e0907); }
.cx-buff svg { width: 24px; height: 24px; fill: none; stroke: var(--bc); stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bc) 55%, transparent)); }
.cx-buff b { font: 700 17px Inter, sans-serif; color: #F3E7D3; }
.cx-buff small { font: 700 11px Inter, sans-serif; color: var(--bc); letter-spacing: .04em; }
.cx-buff em { font: 500 10px Inter, sans-serif; font-style: normal; color: #8e7a66; }
.cx-mini { display: block; width: 100%; height: 3px; margin-top: 4px; border-radius: 2px; background: #2a1810; overflow: hidden; }
.cx-mini i { display: block; height: 100%; background: var(--bc, #ffc27a); }
.cx-main { display: grid; grid-template-columns: 230px 1fr; gap: 10px; min-height: 0; height: min(520px, calc(100vh - 330px)); }
.cx-side { display: grid; align-content: start; gap: 6px; overflow: auto; padding-right: 2px; }
.cx-search { width: 100%; }
.cx-cat { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; padding: 7px 8px; text-align: left; border: 1px solid #3a2a20; border-radius: 8px; background: #140d0a; color: inherit; cursor: pointer; }
.cx-cat.on { border-color: #c98a42; background: linear-gradient(180deg, #2a1a12, #170f0b); }
.cx-cat i { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #3a2a20; border-radius: 6px; background: #0e0907; --bc: #ffc27a; }
.cx-cat i svg { width: 22px; height: 22px; fill: none; stroke: var(--bc); stroke-width: 1.8; }
.cx-cat b { display: block; font: 700 13px Inter, sans-serif; color: #F3E7D3; }
.cx-cat small { font: 500 10.5px Inter, sans-serif; color: #a8957f; }
.cx-cat .cx-mini i { background: linear-gradient(90deg, #c98a42, #ffc93c); }
.cx-badge { position: absolute; top: 6px; right: 8px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #2f9e55; color: #fff; font: 700 10.5px/18px Inter, sans-serif; font-style: normal; text-align: center; }
.cx-right { display: grid; grid-template-rows: auto auto auto 1fr; gap: 8px; min-height: 0; padding: 10px 12px; border: 1px solid #3a2a20; border-radius: 8px; background: #0f0a08; }
.cx-rhead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.cx-rhead b { display: block; font: 700 15px "Cinzel", Georgia, serif; color: #F3E7D3; letter-spacing: .06em; text-transform: uppercase; }
.cx-rhead small { font: 600 11.5px Inter, sans-serif; color: #d9c3a6; }
.cx-rhead p { margin: 2px 0 0; font: 500 11px Inter, sans-serif; color: #8e7a66; }
.cx-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-tab { padding: 4px 12px; border: 1px solid #3a2a20; border-radius: 999px; background: #140d0a; color: #d9c3a6; font: 600 12px Inter, sans-serif; cursor: pointer; }
.cx-tab.on { border-color: #c98a42; color: #fff; background: #2a1a12; }
.cx-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid #2c201a; border-radius: 999px; font: 600 10.5px Inter, sans-serif; color: #c9b39a; }
.cx-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--lc); }
.cx-legend b { color: #fff; }
.cx-gridwrap { min-height: 0; overflow: auto; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; padding-bottom: 4px; }
.cx-item { position: relative; height: 50px; display: grid; place-items: center; padding: 0; border: 1px solid #2c201a; border-radius: 6px; background: #0b0706; cursor: default;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 35%, transparent); }
.cx-item canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.cx-item.lv0 canvas { filter: grayscale(1) brightness(.45); }
.cx-item:not(.lv0) { border-color: var(--lc); box-shadow: inset 0 0 10px color-mix(in srgb, var(--lc) 30%, transparent); }
/* item já no Codex: a moldura acende com a cor do valor do item (cinza, verde, azul, roxa, dourada), como na mochila */
.cx-item.val-1 { --vc: 170, 170, 170; }
.cx-item.val-2 { --vc: 70, 210, 90; }
.cx-item.val-3 { --vc: 70, 150, 255; }
.cx-item.val-4 { --vc: 185, 95, 255; }
.cx-item.val-5 { --vc: 255, 200, 50; }
.cx-item[class*="val-"] {
  border-color: rgba(var(--vc), .9);
  background: radial-gradient(circle at 50% 45%, rgba(var(--vc), .4) 0%, rgba(var(--vc), .14) 45%, transparent 72%), #0b0706;
  box-shadow: inset 0 0 10px rgba(var(--vc), .38), 0 0 6px rgba(var(--vc), .4);
}
.cx-item.val-5 { box-shadow: inset 0 0 12px rgba(var(--vc), .5), 0 0 10px rgba(var(--vc), .6); }
.cx-item.can { cursor: pointer; }
.cx-item.can:hover { transform: translateY(-1px); border-color: #7fe08f; }
.cx-pips { position: absolute; left: 4px; right: 4px; bottom: 3px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.cx-pips i { height: 3px; border-radius: 1px; background: #2a1d16; }
.cx-pips i.on { background: var(--lc); }
.cx-item em { position: absolute; top: 2px; right: 3px; padding: 0 3px; border-radius: 3px; background: #2f9e55; color: #fff; font: 700 9.5px/13px Inter, sans-serif; font-style: normal; }
.cx-none { grid-column: 1 / -1; margin: 20px 0; text-align: center; color: #8e7a66; font: 500 12px Inter, sans-serif; }
@media (max-width: 760px) { .cx-buffs { grid-template-columns: repeat(3, 1fr); } .cx-main { grid-template-columns: 1fr; height: auto; } .cx-head { grid-template-columns: 1fr; } }

/* ícones oficiais dos efeitos (22x22 do analisador do Tibia, ampliados sem borrar) */
.cx-ic { width: 32px; height: 32px; display: grid; place-items: center; }
.cx-ic img { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bc, #ffc27a) 45%, transparent)); }
.cx-ic canvas { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bc, #ffc27a) 45%, transparent)); }
.cx-cat i .cx-ic, .cx-cat i .cx-ic img, .cx-cat i .cx-ic canvas { width: 28px; height: 28px; }

/* estados do personagem (envenenado, PZ...) dentro do cartão, abaixo do nome e acima da barra de vida */
.char-id .state-bar { position: static; transform: none; z-index: auto; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.char-id .state-bar.empty { display: none; }
.char-id .state-ic { width: 16px; height: 16px; }
/* cartões de hunt: nome sempre com 2 linhas de altura e botões colados no rodapé (tudo alinhado na fileira) */
.av-card { display: flex; flex-direction: column; align-items: center; }
.av-name { min-height: 2.3em; display: flex; align-items: center; justify-content: center; text-align: center; }
.av-go { margin-top: auto; padding-top: 2px; }

/* ---- Bazar de personagens (web/src/ui/systems/bazaar.ts) ---- */
#win-sys-bazaar.bz-win { width: min(1000px, calc(100vw - 32px)) !important; max-width: none !important; }
.bz-win .win-body { display: grid; gap: 10px; max-height: min(760px, calc(100vh - 120px)); overflow: hidden; }
.bz-win button:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.bz-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.bz-title b { display: block; font: 700 22px "Cinzel", "Crimson Pro", Georgia, serif; color: #F3E7D3; letter-spacing: .06em; }
.bz-title small { font: 500 11px Inter, sans-serif; color: #a8957f; }
.bz-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bz-tabs button { padding: 6px 14px; border: 1px solid #3a2a20; border-radius: 999px; background: #140d0a; color: #d9c3a6; font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.bz-tabs button.on { border-color: #c98a42; color: #fff; background: #2a1a12; }
.bz-tabs em { margin-left: 4px; padding: 0 6px; border-radius: 9px; background: #3a2a20; font: 700 10.5px/16px Inter, sans-serif; font-style: normal; }
.bz-coins { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; padding: 5px 12px; border: 1px solid #4a2f1d; border-radius: 8px; background: linear-gradient(180deg, #1d130f, #0e0907); }
.bz-coins i { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a8, #e0a52a 55%, #8a5a12); box-shadow: 0 0 6px #e0a52a88; }
.bz-coins b { font: 700 15px Inter, sans-serif; color: #ffd98a; }
.bz-coins small { font: 500 10px Inter, sans-serif; color: #a8957f; }
.bz-body { min-height: 0; height: min(560px, calc(100vh - 250px)); overflow: auto; padding-right: 2px; }
.bz-none { margin: 40px auto; max-width: 420px; text-align: center; font: 500 13px Inter, sans-serif; color: #a8957f; }
.bz-filter { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; align-items: center; padding-bottom: 8px; background: inherit; }
.bz-filter .bz-search { flex: 1; }
.bz-filter select, .bz-sell select { padding: 5px 8px; border: 1px solid #3a2a20; border-radius: 6px; background: #140d0a; color: #d9c3a6; font: 600 12px Inter, sans-serif; }
.bz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.bz-card { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; padding: 8px 10px; text-align: left; border: 1px solid #3a2a20; border-radius: 8px; background: linear-gradient(180deg, #1a110d, #0e0907); color: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.bz-card:hover { border-color: #c98a42; transform: translateY(-1px); }
.bz-card.mine { border-color: #5a7fbf; }
.bz-card.top { border-color: #2f9e55; }
.bz-pic { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #2c201a; border-radius: 8px; background: radial-gradient(circle at 50% 70%, #2a1d16, #0b0706); }
.bz-pic canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.bz-pic.sm canvas { width: 40px; height: 40px; }
.bz-pic.lg canvas { width: 112px; height: 112px; }
.bz-pic.sm { width: 44px; height: 44px; border-radius: 6px; }
.bz-pic.lg { width: 120px; height: 120px; margin: 0 auto; }
.bz-info b { display: block; font: 700 14px Inter, sans-serif; color: #F3E7D3; }
.bz-info small { font: 500 11.5px Inter, sans-serif; color: #a8957f; }
.bz-price { display: flex; align-items: baseline; gap: 5px; margin-top: 5px; }
.bz-price span { font: 600 10.5px Inter, sans-serif; color: #8e7a66; text-transform: uppercase; letter-spacing: .04em; }
.bz-price strong { font: 700 16px Inter, sans-serif; color: #ffd98a; }
.bz-price i { font: 700 10px Inter, sans-serif; font-style: normal; color: #c9a25a; }
.bz-meta { display: flex; gap: 10px; margin-top: 2px; font: 600 11px Inter, sans-serif; color: #a8957f; }
.bz-left { color: #d9c3a6; }
.bz-left.soon { color: #ff8a5c; }
.bz-tag { position: absolute; top: 6px; right: 8px; padding: 1px 7px; border-radius: 9px; font: 700 9.5px/15px Inter, sans-serif; font-style: normal; color: #fff; }
.bz-tag.mine { background: #3c5f9e; }
.bz-tag.top { background: #2f9e55; }
.bz-rows { display: grid; gap: 6px; }
.bz-row { display: grid; grid-template-columns: 44px 1fr auto 110px; gap: 10px; align-items: center; padding: 6px 10px; text-align: left; border: 1px solid #3a2a20; border-radius: 8px; background: #120c09; color: inherit; cursor: pointer; }
.bz-row:hover { border-color: #c98a42; }
.bz-row b { display: block; font: 700 13px Inter, sans-serif; color: #F3E7D3; }
.bz-row small { font: 500 11px Inter, sans-serif; color: #a8957f; }
.bz-row .bz-left, .bz-when { font: 600 11.5px Inter, sans-serif; color: #a8957f; text-align: right; }
.bz-st { padding: 2px 9px; border-radius: 999px; font: 700 11px Inter, sans-serif; background: #2a1d16; color: #d9c3a6; }
.bz-st.top, .bz-st.won { background: #1f4a2c; color: #9ff0b5; }
.bz-st.sold { background: #4a3a1a; color: #ffd98a; }
.bz-st.off { background: #2a1d16; color: #8e7a66; }
.bz-sell { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.bz-sell-l, .bz-sell-r { padding: 12px 14px; border: 1px solid #3a2a20; border-radius: 8px; background: #0f0a08; }
.bz-sell h4, .bz-dr h4, .bz-skills h4, .bz-equip h4 { margin: 0 0 6px; font: 700 13px "Cinzel", Georgia, serif; color: #F3E7D3; letter-spacing: .06em; text-transform: uppercase; }
.bz-sell-l label { display: grid; gap: 4px; margin-top: 10px; font: 600 12px Inter, sans-serif; color: #d9c3a6; }
.bz-sell-l label small { font-weight: 500; color: #8e7a66; }
.bz-sell-l textarea { resize: vertical; font: 500 12px Inter, sans-serif; }
.bz-who { margin: 0; font: 500 12px Inter, sans-serif; color: #a8957f; }
.bz-check { margin-top: 10px; padding: 7px 10px; border-radius: 6px; font: 600 12px Inter, sans-serif; }
.bz-check.ok { background: #16301f; color: #9ff0b5; border: 1px solid #2f9e55; }
.bz-check.bad { background: #331512; color: #ffb3a1; border: 1px solid #a8452f; }
.bz-sum { margin: 10px 0; font: 500 12px Inter, sans-serif; color: #c9b39a; }
.bz-sum b { color: #ffd98a; }
.bz-sum .bad { color: #ff8a5c; }
.bz-sell-r ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: 500 12px/1.45 Inter, sans-serif; color: #c9b39a; }
.bz-sell-r b { color: #F3E7D3; }
.bz-dtop { margin-bottom: 8px; }
.bz-dgrid { display: grid; grid-template-columns: 290px 1fr; gap: 12px; align-items: start; }
.bz-dl, .bz-dr { padding: 12px 14px; border: 1px solid #3a2a20; border-radius: 8px; background: #0f0a08; }
.bz-dl h3 { margin: 8px 0 0; text-align: center; font: 700 18px "Cinzel", Georgia, serif; color: #F3E7D3; letter-spacing: .04em; }
.bz-dl .bz-who { text-align: center; }
.bz-ends { margin-top: 10px; display: grid; justify-items: center; font: 600 12px Inter, sans-serif; color: #a8957f; }
.bz-ends b { font: 700 16px Inter, sans-serif; color: #F3E7D3; }
.bz-ends small { font: 500 10.5px Inter, sans-serif; color: #8e7a66; }
.bz-ends.off { color: #d9c3a6; }
.bz-bidbox { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid #4a2f1d; border-radius: 8px; background: linear-gradient(180deg, #1d130f, #0e0907); }
.bz-bidbox span { display: block; font: 600 10.5px Inter, sans-serif; color: #8e7a66; text-transform: uppercase; letter-spacing: .04em; }
.bz-bidbox strong { font: 700 18px Inter, sans-serif; color: #ffd98a; }
.bz-bidbox strong i { font: 700 11px Inter, sans-serif; font-style: normal; color: #c9a25a; }
.bz-bid { display: grid; gap: 7px; margin-top: 10px; }
.bz-bid label { display: grid; gap: 4px; font: 600 12px Inter, sans-serif; color: #d9c3a6; }
.bz-bid label small { font-weight: 500; color: #8e7a66; }
.bz-bid p, .bz-note { margin: 0; font: 500 11px Inter, sans-serif; color: #8e7a66; }
.bz-note { margin-top: 10px; text-align: center; }
.bz-cancel { width: 100%; margin-top: 8px; }
.bz-desc { margin: 10px 0 0; padding: 7px 10px; border-left: 3px solid #c98a42; background: #140d0a; font: italic 500 12px/1.45 Inter, sans-serif; color: #c9b39a; white-space: pre-wrap; word-break: break-word; }
.bz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.bz-stats div, .bz-skills div { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; border: 1px solid #2c201a; border-radius: 6px; background: #140d0a; font: 500 11.5px Inter, sans-serif; color: #a8957f; }
.bz-stats b, .bz-skills b { color: #F3E7D3; font-weight: 700; }
.bz-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bz-skills { display: grid; gap: 4px; align-content: start; }
.bz-slots { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; justify-content: center; }
.bz-slot { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #3a2a20; border-radius: 6px; background: #0b0706; }
.bz-slot.empty { visibility: hidden; }
.bz-slot canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bz-cosm { display: flex; flex-wrap: wrap; gap: 5px; }
.bz-cosm span { padding: 2px 8px; border: 1px solid #2c201a; border-radius: 999px; font: 600 11px Inter, sans-serif; color: #a8957f; }
.bz-cosm b { color: #F3E7D3; }
.bz-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; max-height: 150px; overflow: auto; font: 500 11.5px Inter, sans-serif; color: #c9b39a; }
.bz-hist li { display: flex; gap: 10px; padding: 3px 8px; border-radius: 4px; background: #140d0a; }
.bz-hist span { color: #8e7a66; min-width: 90px; }
.bz-hist b { color: #ffd98a; }
@media (max-width: 760px) {
  .bz-head { grid-template-columns: 1fr; }
  .bz-sell, .bz-dgrid, .bz-mid { grid-template-columns: 1fr; }
}

/* ---- Spell System (web/src/ui/systems/spellsys.ts) ---- */
#win-sys-spellsys.ss-win { width: min(1060px, calc(100vw - 32px)) !important; max-width: none !important; }
.ss-win .win-body { position: relative; display: grid; gap: 12px; padding: 14px 16px 18px; max-height: min(780px, calc(100vh - 110px)); overflow: auto;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(150, 90, 220, .35), transparent 55%),
    radial-gradient(ellipse at 10% 110%, rgba(90, 40, 140, .45), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #1a1030 0%, #120a22 60%, #0c0718 100%); }
.ss-head { display: flex; align-items: center; gap: 12px; }
.ss-title { display: flex; align-items: center; gap: 10px; flex: 1; }
.ss-title b { font: 700 26px "Cinzel", "Crimson Pro", Georgia, serif; color: #f1e2c4; letter-spacing: .04em; text-shadow: 0 0 12px rgba(200, 140, 255, .35); }
.ss-book { width: 34px; height: 34px; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #e9c7ff, #8c4fd6 45%, #3a1b66 100%); box-shadow: 0 0 14px rgba(170, 100, 255, .6), inset 0 0 0 2px #c9a25a; }
.ss-gold { padding: 6px 12px; border: 1px solid #6b4a2a; border-radius: 8px; background: rgba(10, 6, 18, .7); font: 600 12px Inter, sans-serif; color: #c9b39a; }
.ss-gold b { margin-left: 4px; color: #ffd98a; font-size: 14px; }
.ss-help { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #6b4a2a; background: rgba(10, 6, 18, .7); color: #ffd98a; font: 700 14px Inter, sans-serif; cursor: help; }
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-none { grid-column: 1 / -1; text-align: center; font: 500 13px Inter, sans-serif; color: #a8957f; }
.ss-card { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 16px 16px 14px; border-radius: 6px;
  background: linear-gradient(160deg, rgba(42, 26, 64, .92), rgba(16, 10, 28, .95));
  border: 2px solid #8a6a3a; box-shadow: inset 0 0 0 1px #2a1a10, inset 0 0 24px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .5); }
.ss-card::before, .ss-card::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c8fff6, #2fb9a6 55%, #0b4f47); box-shadow: 0 0 8px rgba(47, 185, 166, .8), 0 0 0 2px #8a6a3a; }
.ss-card::before { top: -7px; left: -7px; }
.ss-card::after { bottom: -7px; right: -7px; }
.ss-portrait { position: relative; width: 136px; height: 136px; margin: auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #241338 55%, #120a1e 70%);
  box-shadow: 0 0 0 4px #3a2a1a, 0 0 0 7px #8a6a3a, 0 0 0 9px #2a1a10, 0 0 22px rgba(160, 100, 255, .35); }
.ss-ic { border-radius: 50%; box-shadow: 0 0 0 3px #2a1a10, 0 0 16px rgba(255, 220, 160, .25); transform: scale(1.35); image-rendering: pixelated; }
.ss-lv { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); min-width: 30px; padding: 1px 8px; border-radius: 10px; background: #2a2a2a; border: 1px solid #8a6a3a; font: 700 12px/18px Inter, sans-serif; font-style: normal; color: #f1e2c4; text-align: center; }
.ss-gem { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c8fff6, #2fb9a6 55%, #0b4f47); box-shadow: 0 0 6px rgba(47, 185, 166, .9); }
.ss-gem.g1 { top: 4px; left: 50%; transform: translateX(-50%); }
.ss-gem.g2 { top: 50%; left: 2px; transform: translateY(-50%); }
.ss-gem.g3 { top: 50%; right: 2px; transform: translateY(-50%); }
.ss-gem.g4 { bottom: 14px; left: 18px; opacity: .6; }
.ss-info { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ss-info h3 { margin: 0; font: 700 19px "Cinzel", Georgia, serif; color: #f1d7a0; letter-spacing: .05em; text-transform: uppercase; }
.ss-tags { display: flex; align-items: center; gap: 8px; }
.ss-tag { padding: 1px 8px; border-radius: 4px; font: 700 10.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; }
.ss-tag.atk { color: #ff8a7a; border-color: #8a3a30; background: rgba(120, 30, 20, .35); }
.ss-tag.heal { color: #8affc4; border-color: #2f7a55; background: rgba(20, 90, 50, .35); }
.ss-tag.buff { color: #ffcf7a; border-color: #8a6a2a; background: rgba(110, 80, 20, .3); }
.ss-tags em { font: italic 500 11.5px Inter, sans-serif; color: #9a86b8; }
.ss-rows { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid rgba(201, 162, 90, .25); }
.ss-rows div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font: 500 12px Inter, sans-serif; color: #9a86b8; }
.ss-rows b { font-weight: 600; color: #e6dcf2; }
.ss-rows b.nx { color: #ffd98a; }
.ss-bar { position: relative; height: 8px; margin-top: 2px; border-radius: 4px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px #3a2a1a; }
.ss-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6b3fc9, #c08bff); box-shadow: 0 0 8px rgba(192, 139, 255, .6); }
.ss-bar small { position: absolute; right: 0; top: -15px; font: 600 10px Inter, sans-serif; color: #9a86b8; }
.ss-ctl { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.ss-step { padding: 4px 9px; border: 1px solid #4a3a6a; border-radius: 4px; background: rgba(40, 24, 70, .8); color: #cdbbe8; font: 700 12px Inter, sans-serif; cursor: pointer; }
.ss-step.on { background: linear-gradient(180deg, #6b3fc9, #43239a); border-color: #c08bff; color: #fff; }
.ss-buy { margin-left: auto; padding: 6px 12px; border: 1px solid #b8862f; border-radius: 5px; background: linear-gradient(180deg, #ffd27a, #c98a2a); color: #2a1606; font: 700 12.5px Inter, sans-serif; cursor: pointer; box-shadow: 0 2px 0 #6b4a1a, 0 0 10px rgba(255, 190, 80, .35); }
.ss-buy:disabled, .ss-step:disabled { opacity: .45; filter: grayscale(.5); cursor: not-allowed; box-shadow: none; }
@media (max-width: 820px) { .ss-grid { grid-template-columns: 1fr; } .ss-card { grid-template-columns: 110px 1fr; } .ss-portrait { width: 100px; height: 100px; } }

/* ---- fundos dos sistemas novos: imagem opcional em /ui/sysbg/<sistema>.jpg sobre um fundo desenhado ---- */
.sysbg-craft .win-body { background: linear-gradient(180deg, rgba(10, 8, 6, .55), rgba(10, 8, 6, .85)), url(/ui/sysbg/craft.jpg) center / cover,
  radial-gradient(ellipse at 12% 80%, rgba(255, 110, 30, .35), transparent 45%), radial-gradient(ellipse at 88% 70%, rgba(255, 140, 40, .25), transparent 45%),
  linear-gradient(180deg, #1b1410, #0e0a08); }
.sysbg-dismantle .win-body { background: linear-gradient(180deg, rgba(8, 10, 12, .55), rgba(8, 10, 12, .85)), url(/ui/sysbg/dismantle.jpg) center / cover,
  radial-gradient(ellipse at 80% 20%, rgba(60, 110, 120, .3), transparent 50%), linear-gradient(180deg, #121618, #0a0c0e); }

/* ---- Desmanche (web/src/ui/systems/craft.ts) ---- */
#win-sys-dismantle.dm-win { width: min(1180px, calc(100vw - 32px)) !important; max-width: none !important; }
.dm-win .win-body { display: grid; gap: 10px; padding: 14px; max-height: min(760px, calc(100vh - 110px)); overflow: auto; }
.cr-token { display: inline-block; width: 18px; height: 18px; background: url(/ui/craft/token.png) center / contain no-repeat; image-rendering: pixelated; vertical-align: middle; filter: drop-shadow(0 0 4px rgba(90, 255, 120, .5)); }
.cr-token.big { width: 34px; height: 34px; }
.dm-head { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #2c3a3e; border-radius: 8px; background: rgba(14, 20, 24, .85); }
.dm-head b { display: block; font: 700 17px Inter, sans-serif; color: #f1ead8; }
.dm-head small { font: 500 12px Inter, sans-serif; color: #93a4a8; }
.dm-list { display: grid; gap: 8px; }
.dm-set { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #2c3a3e; border-radius: 8px; background: rgba(14, 20, 24, .85); }
.dm-set.empty { opacity: .7; }
.dm-name { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 8px; }
.dm-name b { font: 700 15px "Cinzel", Georgia, serif; color: #f1ead8; letter-spacing: .04em; }
.dm-name em { padding: 0 8px; border-radius: 9px; border: 1px solid #c98a42; color: #ffcf7a; font: 700 11px/18px Inter, sans-serif; font-style: normal; }
.dm-name small { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font: 500 12px Inter, sans-serif; color: #93a4a8; }
.dm-name small b { font: 700 13px Inter, sans-serif; color: #f1ead8; letter-spacing: 0; }
.dm-items { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-none { font: italic 500 12px Inter, sans-serif; color: #6f8084; }
.dm-item { position: relative; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid #3a2f22; border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #2a2218, #120e0a); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .15); }
.dm-item canvas { width: 32px; height: 32px; image-rendering: pixelated; transform: scale(1.25); }
.dm-item:hover { border-color: #c98a42; }
.dm-item.on { border: 2px solid #e8644a; box-shadow: 0 0 10px rgba(232, 100, 74, .5); }
.dm-item em { position: absolute; right: 2px; bottom: 1px; font: 700 10px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.dm-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2c3a3e; border-radius: 8px; background: rgba(14, 20, 24, .85); }
.dm-foot > span { flex: 1; font: 500 12px Inter, sans-serif; color: #c9d2d4; }
.dm-go { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Craft ---- */
#win-sys-craft.cr-win { width: min(1200px, calc(100vw - 32px)) !important; max-width: none !important; }
.cr-win .win-body { display: grid; gap: 10px; padding: 14px; max-height: min(800px, calc(100vh - 100px)); overflow: auto; }
.cr-top { display: flex; justify-content: flex-end; gap: 8px; }
.cr-res { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid #4a3a26; border-radius: 18px; background: rgba(12, 9, 6, .85); }
.cr-res small { display: block; font: 500 10.5px Inter, sans-serif; color: #a8957f; }
.cr-res b { font: 700 15px Inter, sans-serif; color: #f1ead8; }
.cr-res.gold b { color: #ffd98a; }
.cr-coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e0a52a 55%, #8a5a12); box-shadow: 0 0 6px #e0a52a88; vertical-align: middle; }
.cr-vocs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cr-voc { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 66px; border: 1px solid #3a2f22; border-radius: 8px; color: #c9b39a; cursor: pointer;
  background: linear-gradient(180deg, rgba(30, 24, 18, .9), rgba(14, 11, 8, .95)); font: 700 16px "Cinzel", Georgia, serif; letter-spacing: .06em; }
.cr-voc i { font-style: normal; font-size: 18px; opacity: .85; }
.cr-voc.on { border: 2px solid #c98a42; color: #ffcf7a; box-shadow: inset 0 0 18px rgba(201, 138, 66, .25); }
.cr-voc em { position: absolute; top: 6px; right: 8px; padding: 0 8px; border-radius: 9px; border: 1px solid #c98a42; font: 600 10px/16px Inter, sans-serif; font-style: normal; color: #ffcf7a; }
.cr-voc.v-knight i { color: #ffcf7a; } .cr-voc.v-paladin i { color: #e0b070; } .cr-voc.v-sorcerer i { color: #c08bff; } .cr-voc.v-druid i { color: #6fe0c0; } .cr-voc.v-monk i { color: #ff9a6a; }
.cr-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: rgba(8, 6, 4, .35); }
.cr-arrow { font-size: 22px; color: #6fe08f; text-shadow: 0 0 10px rgba(111, 224, 143, .6); letter-spacing: -6px; }
.cr-body { display: grid; justify-items: center; gap: 10px; }
.cr-body h4 { margin: 0; font: 700 14px "Cinzel", Georgia, serif; color: #ffcf7a; letter-spacing: .08em; text-transform: uppercase; }
.cr-body.t2 h4 { color: #ff8a7a; }
.cr-body h4 small { font: 600 11px Inter, sans-serif; color: #a8957f; letter-spacing: 0; text-transform: none; }
.cr-stars { color: #ffd24a; font-size: 12px; letter-spacing: 1px; }
.cr-weapons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cr-doll { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
.cr-cell { position: relative; width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 1px solid #3a2f22; border-radius: 6px; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2a2218, #100c08); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .12); }
.cr-cell.empty { visibility: hidden; }
.cr-cell canvas { width: 32px; height: 32px; image-rendering: pixelated; transform: scale(1.3); }
.cr-body.t2 .cr-cell { border-color: #4a2420; background: radial-gradient(circle at 50% 40%, #2e1814, #120806); }
.cr-cell:hover { border-color: #c98a42; }
.cr-cell.on { border: 2px solid #ffcf7a; box-shadow: 0 0 12px rgba(255, 207, 122, .45); }
.cr-cell.ready { box-shadow: 0 0 0 1px #6fe08f, 0 0 10px rgba(111, 224, 143, .35); }
.cr-cost { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #3a1a14; border: 1px solid #c45a3a; color: #ffd0c0; font: 700 10.5px/18px Inter, sans-serif; font-style: normal; text-align: center; }
.cr-check { position: absolute; left: 3px; bottom: 1px; color: #6fe08f; font-style: normal; font-size: 12px; text-shadow: 0 1px 2px #000; }
.cr-recipe { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; min-height: 70px; border: 1px solid #3a2f22; border-radius: 8px; background: rgba(12, 9, 6, .85); }
.cr-hint { grid-column: 1 / -1; margin: 0; font: 500 12.5px Inter, sans-serif; color: #c9b39a; }
.cr-big { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 8px; border: 2px solid #c98a42; background: radial-gradient(circle, #2a2218, #100c08); }
.cr-big.t2 { border-color: #c45a3a; }
.cr-big canvas { width: 32px; height: 32px; image-rendering: pixelated; transform: scale(1.6); }
.cr-rinfo h3 { margin: 0 0 4px; font: 700 15px "Cinzel", Georgia, serif; color: #f1ead8; }
.cr-bonus { margin: 0 0 6px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 12px Inter, sans-serif; color: #8fe0a8; }
.cr-bonus li::before { content: "✦ "; color: #c98a42; }
.cr-needs { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px Inter, sans-serif; color: #c9b39a; }
.cr-needs span { display: inline-flex; align-items: center; gap: 4px; }
.cr-needs .ok b { color: #8fe0a8; } .cr-needs .no b, .cr-needs .no { color: #ff8a7a; }
.cr-needs small { color: #8e7a66; }
.cr-go { min-width: 150px; }
@media (max-width: 860px) { .cr-stage { grid-template-columns: 1fr; } .cr-arrow { transform: rotate(90deg); justify-self: center; } .cr-vocs { grid-template-columns: repeat(3, 1fr); } .dm-set { grid-template-columns: 1fr; } }

/* ---- Gem Bag ---- */
#win-sys-gembag.gb-win { width: min(1120px, calc(100vw - 32px)) !important; max-width: none !important; }
.gb-win .win-body { display: grid; gap: 12px; padding: 14px; max-height: min(800px, calc(100vh - 100px)); overflow: auto;
  background: radial-gradient(120% 80% at 20% 0%, rgba(80, 40, 120, .28), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(20, 90, 110, .22), transparent 60%), #0d0b12; }
.gb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gb-title { display: flex; align-items: center; gap: 12px; }
.gb-title b { display: block; font: 700 20px "Cinzel", Georgia, serif; color: #f3e6ff; letter-spacing: .06em; }
.gb-title small { font: 500 12px Inter, sans-serif; color: #b3a6c4; }
.gb-bagic { width: 44px; height: 44px; border-radius: 10px; background: url(/ui/gems/g9-purple.png) 0 0 / auto 44px no-repeat, radial-gradient(circle, #3a2456, #120c1c); border: 1px solid #6e4fa0; box-shadow: 0 0 14px rgba(155, 123, 255, .35); }
.gb-pills { display: flex; gap: 8px; }
.gb-pill { padding: 5px 12px; border-radius: 16px; border: 1px solid #4a3a66; background: rgba(16, 11, 24, .85); font: 700 13px Inter, sans-serif; color: #e6dcff; }
.gb-pill.coin { color: #ffd98a; border-color: #6a5426; }
.gb-pill.coin::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; background: radial-gradient(circle at 35% 35%, #fff2b0, #e0a52a 55%, #8a5a12); }
.gb-main { display: grid; grid-template-columns: minmax(420px, 1.05fr) 1fr; gap: 12px; }
.gb-equip, .gb-active, .gb-stockwrap { border: 1px solid #3a2c52; border-radius: 10px; background: rgba(14, 10, 22, .82); padding: 10px 12px; }
.gb-win h4 { margin: 0 0 8px; font: 700 13px "Cinzel", Georgia, serif; color: #d9c6ff; letter-spacing: .08em; text-transform: uppercase; }
.gb-win h4 small { margin-left: 6px; font: 500 11px Inter, sans-serif; color: #9f92b4; letter-spacing: 0; text-transform: none; }
.gb-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid rgba(110, 79, 160, .22); }
.gb-row:first-of-type { border-top: 0; }
.gb-rowic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #4a3a66; background: radial-gradient(circle, #241a36, #0e0a16); }
.gb-rowic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.gb-rowinfo b { display: block; font: 700 14px "Cinzel", Georgia, serif; color: #efe6ff; }
.gb-rowinfo small { font: 500 11.5px Inter, sans-serif; color: #a99cc0; }
.gb-socks { display: flex; gap: 8px; }
.gb-sock { position: relative; width: 58px; height: 58px; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 50%;
  border: 2px solid #5a4680; background: radial-gradient(circle at 50% 45%, #1e1530 0%, #0b0812 70%); box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 0 3px rgba(201, 162, 90, .18); }
.gb-sock:hover { border-color: #b58cff; }
.gb-sock.target { border-color: #6fe0c0; box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 10px rgba(111, 224, 192, .55); animation: gb-pulse 1.2s ease-in-out infinite; }
.gb-sock.full { border-color: #c9a25a; }
.gb-sock em { position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: #1a1226; border: 1px solid #c9a25a; font: 700 10px/16px Inter, sans-serif; font-style: normal; color: #ffe3a0; }
.gb-sock.locked { border-style: dashed; border-color: #6a5426; cursor: pointer; }
.gb-sock.locked small { position: absolute; bottom: 6px; font: 700 9.5px Inter, sans-serif; color: #ffd98a; }
.gb-lock { width: 18px; height: 18px; margin-top: -8px; background: url(/ui/atelier/icon-locked.png) center / contain no-repeat; image-rendering: pixelated; }
@keyframes gb-pulse { 50% { box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 18px rgba(111, 224, 192, .85); } }
.gb-gem { display: inline-block; width: var(--s); height: var(--s); background: var(--img) 0 0 / auto var(--s) no-repeat; image-rendering: pixelated;
  animation: gb-spin 1.4s steps(var(--n)) infinite; filter: drop-shadow(0 0 calc(1px + var(--gl) * .9px) var(--glow)) drop-shadow(0 0 calc(var(--gl) * 1.4px) var(--glow)); }
@keyframes gb-spin { to { background-position-x: calc(var(--n) * var(--s) * -1); } }
.gb-side { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 0; }
.gb-active ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.gb-active li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed rgba(110, 79, 160, .25); font: 500 12.5px Inter, sans-serif; color: #d8cfe8; }
.gb-active li b { color: var(--c); text-shadow: 0 0 6px var(--c); }
.gb-none { margin: 4px 0; font: 500 12px Inter, sans-serif; color: #9f92b4; }
.gb-stockwrap { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.gb-tools { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 10px; }
.gb-tools h4 { grid-column: 1 / -1; }
.gb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gb-chip { padding: 3px 9px; border-radius: 12px; border: 1px solid #4a3a66; background: #140e20; color: #cfc2e6; font: 600 11px Inter, sans-serif; cursor: pointer; }
.gb-chip.on { border-color: var(--c, #b58cff); color: #fff; box-shadow: 0 0 8px var(--c, #b58cff); }
.gb-fuseall, .gb-fuse { border: 1px solid #c98a42; border-radius: 6px; background: linear-gradient(180deg, #7a4a1a, #4a2a0c); color: #ffe3b0; font: 700 11.5px Inter, sans-serif; cursor: pointer; }
.gb-fuseall { padding: 6px 12px; }
.gb-fuseall:hover, .gb-fuse:hover { filter: brightness(1.2); }
.gb-stock { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 430px; overflow: auto; padding-right: 4px; }
.gb-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 8px; cursor: pointer;
  border: 1px solid #33264a; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 18%, transparent), rgba(10, 7, 16, .9) 70%); }
.gb-card:hover { border-color: var(--c); }
.gb-card.on { border: 2px solid var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.gb-card b { font: 700 12px Inter, sans-serif; color: #f3ecff; }
.gb-card small { font: 500 10.5px Inter, sans-serif; color: #a99cc0; }
.gb-cn { position: absolute; top: 4px; right: 6px; font: 700 11px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.gb-fuse { margin-top: 4px; padding: 2px 10px; font-size: 10.5px; }
@media (max-width: 860px) { .gb-main { grid-template-columns: 1fr; } .gb-active ul { grid-template-columns: 1fr; } }

/* ---- Ateliê de Gemas ---- */
#win-sys-atelier.ga-win { width: min(1180px, calc(100vw - 32px)) !important; max-width: none !important; }
.ga-win .win-body { display: grid; gap: 10px; padding: 14px; max-height: min(820px, calc(100vh - 100px)); overflow: auto;
  background: radial-gradient(100% 70% at 50% 0%, rgba(60, 50, 30, .35), transparent 60%), #0e0d0b; }
.ga-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ga-title { display: flex; align-items: center; gap: 12px; }
.ga-title img { width: 44px; height: 44px; image-rendering: pixelated; padding: 4px; border-radius: 8px; border: 1px solid #6a5426; background: radial-gradient(circle, #2a2418, #100e0a); }
.ga-title b { display: block; font: 700 20px "Cinzel", Georgia, serif; color: #f3e6c8; letter-spacing: .06em; }
.ga-title small { font: 500 12px Inter, sans-serif; color: #b8a888; }
.ga-pills { display: flex; gap: 8px; }
.ga-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; border: 1px solid #4a3e26; background: rgba(16, 13, 8, .9); font: 700 13px Inter, sans-serif; color: #efe3c4; }
.ga-pill.gold { color: #ffd98a; }
.ga-frag { display: inline-block; width: 12px; height: 12px; background: url(/ui/atelier/fragmentIcon.png) 0 0 / 12px 24px; image-rendering: pixelated; transform: scale(1.4); }
.ga-frag.gr { background-position: 0 -12px; }
.ga-tabs { display: flex; gap: 6px; border-bottom: 1px solid #3a3020; }
.ga-tab { padding: 8px 16px; border: 1px solid #3a3020; border-bottom: 0; border-radius: 8px 8px 0 0; background: #15120c; color: #b8a888; font: 700 13px "Cinzel", Georgia, serif; letter-spacing: .04em; cursor: pointer; }
.ga-tab.on { background: linear-gradient(180deg, #3a2e18, #1c160c); color: #ffd98a; border-color: #8a6a32; }
.ga-body { display: grid; gap: 12px; min-height: 480px; }
.ga-body.atelier { grid-template-columns: 250px 1fr 300px; }
.ga-win h4 { margin: 0 0 8px; font: 700 12.5px "Cinzel", Georgia, serif; color: #e8cf98; letter-spacing: .08em; text-transform: uppercase; }
.ga-left, .ga-center, .ga-detail, .ga-ws, .ga-sum { border: 1px solid #3a3020; border-radius: 10px; background: rgba(18, 15, 10, .88); padding: 10px 12px; min-width: 0; }
.ga-left { display: grid; align-content: start; gap: 14px; }
.ga-cross { position: relative; width: 210px; height: 210px; margin: 0 auto; background: url(/ui/atelier/socket-gematelier.png) center / 150px 150px no-repeat; image-rendering: pixelated; }
.ga-vessel { position: absolute; width: 74px; height: 74px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0; cursor: pointer; border-radius: 50%;
  border: 2px solid var(--c); background: radial-gradient(circle, rgba(10, 8, 5, .9) 55%, color-mix(in srgb, var(--c) 30%, #0a0805)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 10px #000; }
.ga-vessel.d0 { left: 0; top: 0; } .ga-vessel.d1 { right: 0; top: 0; } .ga-vessel.d2 { left: 0; bottom: 0; } .ga-vessel.d3 { right: 0; bottom: 0; }
.ga-vessel small { font: 600 10px Inter, sans-serif; color: #d8c8a8; }
.ga-vessel img { width: 16px; height: 16px; image-rendering: pixelated; }
.ga-vessel.locked { filter: grayscale(.7) brightness(.7); border-style: dashed; }
.ga-vessel.full { animation: ga-glow 2.2s ease-in-out infinite; }
@keyframes ga-glow { 50% { box-shadow: 0 0 22px var(--c), inset 0 0 10px #000; } }
.ga-gem { display: inline-block; image-rendering: pixelated; flex: none; }
.ga-rvrow { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(138, 106, 50, .2); }
.ga-rvrow b { display: block; font: 700 12.5px Inter, sans-serif; color: #f1e6cc; }
.ga-rvrow small { font: 500 10.5px Inter, sans-serif; color: #a8987a; }
.ga-rvic { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; border: 1px solid #4a3e26; background: #0c0a06; }
.ga-rvic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.ga-rvic em { position: absolute; right: 1px; bottom: 0; font: 700 10px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.ga-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid #6a6050; background: linear-gradient(180deg, #5a5650, #34312c); color: #f0ece0; font: 700 12px Inter, sans-serif; text-shadow: 0 1px 1px #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.ga-btn:hover:not(:disabled) { filter: brightness(1.2); }
.ga-btn:disabled { opacity: .45; cursor: not-allowed; }
.ga-btn.main { background: linear-gradient(180deg, #8a6a2a, #5a4214); border-color: #c9a25a; color: #fff3d0; }
.ga-btn.danger { background: linear-gradient(180deg, #7a2a22, #4a1410); border-color: #c45a3a; }
.ga-btn img { width: 14px; height: 14px; image-rendering: pixelated; }
.ga-center { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.ga-filters { display: flex; gap: 8px; align-items: center; }
.ga-filters select { padding: 5px 8px; border-radius: 5px; border: 1px solid #4a3e26; background: #110e09; color: #efe3c4; font: 600 12px Inter, sans-serif; }
.ga-count { margin-left: auto; font: 700 12px Inter, sans-serif; color: #a8987a; }
.ga-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; align-content: start; max-height: 560px; overflow: auto; padding: 2px 4px 2px 0; }
.ga-cell { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 2px 5px; border-radius: 6px; cursor: pointer;
  border: 1px solid #3a3020; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 22%, transparent), #0c0a06 70%); }
.ga-cell:hover { border-color: var(--c); }
.ga-cell.on { border: 2px solid #ffd98a; box-shadow: 0 0 12px rgba(255, 217, 138, .45); }
.ga-cell.flash { animation: ga-flash 1.4s ease-out 2; }
@keyframes ga-flash { 0% { box-shadow: 0 0 0 0 var(--c); transform: scale(1.12); } 100% { box-shadow: 0 0 24px 6px transparent; transform: none; } }
.ga-cellmods { display: flex; gap: 2px; }
.ga-sockd, .ga-lk { position: absolute; top: 3px; width: 13px; height: 13px; image-rendering: pixelated; }
.ga-sockd { left: 4px; } .ga-lk { right: 4px; }
.ga-mod { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; border-radius: 50%; background: radial-gradient(circle, #1c1810, #060504); box-shadow: inset 0 0 0 1px #5a4a2a; }
.ga-mod i { display: block; image-rendering: pixelated; }
.ga-mod.g1 { box-shadow: inset 0 0 0 2px #6a8a9a; } .ga-mod.g2 { box-shadow: inset 0 0 0 2px #a86a4a; } .ga-mod.g3 { box-shadow: inset 0 0 0 2px #c0c4c8; } .ga-mod.g4 { box-shadow: inset 0 0 0 2px #e0b040, 0 0 8px rgba(224, 176, 64, .6); }
.ga-mod.sup { border-radius: 22%; }
.ga-mod em { position: absolute; bottom: -4px; right: -4px; padding: 0 3px; border-radius: 6px; background: #1a140a; border: 1px solid #c9a25a; font: 700 9px/12px Inter, sans-serif; font-style: normal; color: #ffd98a; }
.ga-cellmods .ga-mod em { display: none; }
.ga-detail { display: grid; align-content: start; gap: 12px; }
.ga-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 10px; text-align: center; font: 500 12.5px Inter, sans-serif; color: #a8987a; }
.ga-empty img { width: 120px; image-rendering: pixelated; opacity: .55; }
.ga-dtop { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(138, 106, 50, .25); }
.ga-dart { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 28%, #0a0805), #0a0805 70%); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.ga-dtop b { display: block; font: 700 16px "Cinzel", Georgia, serif; color: #f6ecd2; }
.ga-dtop small { display: block; font: 500 11.5px Inter, sans-serif; color: #a8987a; }
.ga-dom { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 12px Inter, sans-serif; color: var(--c); }
.ga-dom i { width: 22px; height: 22px; background: url(/ui/atelier/icons-gematelier-domainaffinity.png) 0 0 / 88px 22px; image-rendering: pixelated; }
.ga-dmods { display: grid; gap: 8px; }
.ga-dmod { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(8, 7, 4, .6); border: 1px solid #2e2618; }
.ga-dmod.sup { border-color: #6a4a8a; background: rgba(30, 16, 40, .5); }
.ga-dmod small { display: block; font: 600 10.5px Inter, sans-serif; color: #a8987a; }
.ga-dmod b { display: block; font: 600 12.5px Inter, sans-serif; color: #b8f0a0; }
.ga-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ga-actions .main { grid-column: 1 / -1; padding: 9px; font-size: 13px; }
.ga-ws { display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.ga-wsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ga-chip { padding: 4px 11px; border-radius: 12px; border: 1px solid #4a3e26; background: #15110a; color: #d8c8a8; font: 600 11.5px Inter, sans-serif; cursor: pointer; }
.ga-chip.on { border-color: #ffd98a; color: #ffd98a; box-shadow: 0 0 8px rgba(255, 217, 138, .35); }
.ga-wsinfo { margin-left: auto; font: 500 11px Inter, sans-serif; color: #a8987a; }
.ga-ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; max-height: 600px; overflow: auto; padding-right: 4px; align-content: start; }
.ga-wscard { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid #2e2618; background: rgba(10, 8, 5, .75); }
.ga-wscard.sup { border-color: #4a3460; background: rgba(24, 14, 32, .6); }
.ga-wscard.owned { box-shadow: inset 3px 0 0 #6fe08f; }
.ga-wstxt small { display: block; font: 600 10.5px Inter, sans-serif; color: #a8987a; }
.ga-wstxt b { display: block; font: 600 12.5px Inter, sans-serif; color: #f1e6cc; }
.ga-wstxt .nx { display: block; margin-top: 2px; font: 500 11px Inter, sans-serif; color: #8fe0a8; }
.ga-wstxt .nx.max { color: #ffd98a; }
.ga-btn.up { flex-direction: column; gap: 1px; padding: 5px 10px; background: linear-gradient(180deg, #2e6a3a, #183a1e); border-color: #5aa06a; }
.ga-btn.up small { display: inline-flex; align-items: center; gap: 4px; font: 600 10px Inter, sans-serif; color: #d8f0d0; }
.ga-sum { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.ga-sumvs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.ga-sumv { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 10px; border: 1px solid var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 20%, transparent), #0a0805 70%); }
.ga-sumv.locked { filter: grayscale(.8) brightness(.6); }
.ga-sumv b { font: 700 13px "Cinzel", Georgia, serif; color: #f1e6cc; }
.ga-sumv small { font: 500 11px Inter, sans-serif; color: #a8987a; }
.ga-sumempty { width: 48px; height: 48px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--c) 60%, transparent); }
.ga-sumlist ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.ga-sumlist li { padding: 4px 0; border-bottom: 1px dashed rgba(138, 106, 50, .3); font: 600 12.5px Inter, sans-serif; color: #b8f0a0; }
.ga-none { font: 500 12px Inter, sans-serif; color: #a8987a; }
.ga-note { margin-top: 14px; font: 500 11.5px Inter, sans-serif; color: #a8987a; }
@media (max-width: 980px) { .ga-body.atelier { grid-template-columns: 1fr; } .ga-sum { grid-template-columns: 1fr; } }

/* ---- atalhos de bolsas no Inventário (Boss Loot Backpack, Bolsa de Gemas, Store Inbox) ---- */
.inv-bags { display: flex; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.ib { position: relative; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 6px;
  border: 1px solid #5a4630; background: radial-gradient(circle at 50% 40%, #2a2218, #0e0b07); box-shadow: inset 0 0 0 1px rgba(201, 162, 90, .12); }
.ib:hover { border-color: #c98a42; box-shadow: 0 0 8px rgba(201, 138, 66, .45); }
.ib.ib-boss { border-color: #a0482e; }
.ib.ib-gem { border-color: #6e4fa0; }
.ib.ib-inbox { border-color: #8a6a32; }
.ib-ic { display: grid; place-items: center; width: 32px; height: 32px; }
.ib-ic canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.ib-boss-anim { width: 32px; height: 32px; background: url(/ui/boss-backpack.png) 0 0 / auto 32px no-repeat; animation: ib-boss 8.3s steps(52) infinite; }
@keyframes ib-boss { to { background-position-x: -1664px; } }
.ib em { position: absolute; right: 2px; bottom: 0; font: 700 10.5px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }

/* ---- Menu de Admin (/adminmenu) ---- */
#win-sys-admin.adm-win { width: min(980px, calc(100vw - 32px)) !important; max-width: none !important; }
.adm-win .win-body { display: grid; gap: 10px; padding: 12px 14px; max-height: min(780px, calc(100vh - 100px)); overflow: hidden; background: #0f0d0c; }
.adm-head { display: flex; align-items: baseline; justify-content: space-between; }
.adm-head b { font: 700 18px "Cinzel", Georgia, serif; color: #ffcf7a; letter-spacing: .06em; }
.adm-head span { font: 600 12px Inter, sans-serif; color: #a8987a; }
.adm-tabs { display: flex; gap: 6px; border-bottom: 1px solid #3a3020; }
.adm-tab { padding: 7px 14px; border: 1px solid #3a3020; border-bottom: 0; border-radius: 7px 7px 0 0; background: #15120c; color: #b8a888; font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.adm-tab.on { background: #2e2414; color: #ffd98a; border-color: #8a6a32; }
.adm-body { display: grid; gap: 10px; min-height: 380px; align-content: start; }
.adm-win input, .adm-win textarea { padding: 6px 8px; border-radius: 5px; border: 1px solid #4a3e26; background: #0b0a07; color: #f1e6cc; font: 500 12.5px Inter, sans-serif; min-width: 0; }
.adm-win textarea { width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box; }
.adm-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.adm-row input { flex: 1; }
.adm-btn { padding: 6px 12px; border-radius: 5px; border: 1px solid #6a6050; background: linear-gradient(180deg, #4a4640, #2c2a26); color: #f0ece0; font: 700 12px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.adm-btn:hover:not(:disabled) { filter: brightness(1.2); }
.adm-btn:disabled { opacity: .45; cursor: not-allowed; }
.adm-btn.small { padding: 4px 8px; font-size: 11px; }
.adm-btn.main { background: linear-gradient(180deg, #8a6a2a, #5a4214); border-color: #c9a25a; color: #fff3d0; }
.adm-btn.danger { background: linear-gradient(180deg, #7a2a22, #4a1410); border-color: #c45a3a; }
.adm-scroll { overflow: auto; max-height: 560px; padding-right: 4px; }
.adm-list { display: grid; gap: 6px; align-content: start; }
.adm-pl { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; border: 1px solid #2e2618; background: rgba(20, 16, 10, .8); }
.adm-pl b { font: 700 13px Inter, sans-serif; color: #f6ecd2; margin-right: 6px; }
.adm-pl small { display: block; font: 500 11px Inter, sans-serif; color: #a8987a; }
.adm-pl em, .adm-dl em { margin-right: 4px; padding: 1px 6px; border-radius: 8px; background: #2a2418; font: 700 9.5px Inter, sans-serif; font-style: normal; color: #b8a888; }
.adm-pl em.gm { background: #5a3a10; color: #ffd98a; }
.adm-dl em.on { background: #1e4a26; color: #9ff0b0; } .adm-dl em.ban { background: #5a1a14; color: #ffb0a0; }
.adm-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.adm-acts input { width: 70px; flex: none; } .adm-acts input.br { width: 180px; }
.adm-form { display: grid; grid-template-columns: 2fr 1fr 110px auto; gap: 8px; align-items: end; }
.adm-form label, .adm-card label { display: grid; gap: 3px; font: 600 11px Inter, sans-serif; color: #a8987a; }
.adm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; max-height: 520px; }
.adm-item { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 5px 7px; text-align: left; border-radius: 6px; border: 1px solid #2e2618; background: #120f0a; color: #f1e6cc; cursor: pointer; }
.adm-item canvas { grid-row: 1 / 3; width: 32px; height: 32px; image-rendering: pixelated; }
.adm-item span { font: 600 11.5px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-item small { font: 500 10px Inter, sans-serif; color: #8a7a5e; }
.adm-item:hover { border-color: #8a6a32; } .adm-item.on { border: 2px solid #ffd98a; }
.adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.adm-card { display: grid; gap: 8px; padding: 12px; border-radius: 9px; border: 1px solid #3a3020; background: rgba(20, 16, 10, .85); }
.adm-card h4 { margin: 4px 0 0; font: 700 12.5px "Cinzel", Georgia, serif; color: #e8cf98; letter-spacing: .06em; text-transform: uppercase; }
.adm-dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font: 500 12.5px Inter, sans-serif; }
.adm-dl dt { color: #a8987a; } .adm-dl dd { margin: 0; color: #f1e6cc; }
.adm-resrow { display: grid; grid-template-columns: 1fr 120px auto; gap: 6px; align-items: center; padding: 4px 0; font: 600 12.5px Inter, sans-serif; color: #f1e6cc; }
.adm-log { font: 500 12px ui-monospace, Consolas, monospace; color: #d8c8a8; display: grid; gap: 3px; }
.adm-logq { flex-wrap: wrap; }
.adm-logq input.n { flex: 1 1 150px; } .adm-logq input.t { flex: 1 1 170px; }
.adm-logq select { background: #1a1410; color: #e8d8b8; border: 1px solid #5a4630; border-radius: 6px; padding: 6px 8px; font: inherit; }
.adm-logs { display: grid; gap: 4px; align-content: start; }
.adm-lr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); font-size: 12px; color: #d8c8a8; }
.adm-lr .w { font: 500 11px ui-monospace, Consolas, monospace; color: #9a8a70; }
.adm-lr .k { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: #3a2e22; color: #e8c890; }
.adm-lr .k-coins { background: #4a2a10; color: #ffcf6a; } .adm-lr .k-trade { background: #1e3346; color: #8cc8ff; }
.adm-lr .k-morte { background: #4a1616; color: #ff9a8a; } .adm-lr .k-drop_boss { background: #3a1f4a; color: #d6a6ff; }
.adm-lr .k-gm { background: #4a4416; color: #ffe98a; } .adm-lr .k-mercado, .adm-lr .k-npc, .adm-lr .k-banco { background: #1f3a26; color: #9fe0a8; }
.adm-lr b { color: #f2e2c0; } .adm-lr i { color: #b8a888; }
.adm-lr .g.up { color: #8fdc8f; } .adm-lr .g.dn { color: #ff9a8a; }
.adm-lr p { flex: 1 1 100%; margin: 0; word-break: break-word; color: #cbbd9f; }
.adm-none { font: 500 12.5px Inter, sans-serif; color: #a8987a; }
@media (max-width: 820px) { .adm-cols, .adm-form { grid-template-columns: 1fr; } }
.adm-pl em.mc { background: #6a1a14; color: #ffc0b0; }
.adm-hint { font: 500 11px Inter, sans-serif; color: #8a7a5e; flex-basis: 100%; }
.adm-cmds { display: grid; gap: 4px; align-content: start; }
.adm-cmds h4 { margin: 8px 0 2px; font: 700 12px "Cinzel", Georgia, serif; color: #e8cf98; letter-spacing: .06em; text-transform: uppercase; }
.adm-cmd { display: grid; grid-template-columns: 130px 1fr 260px auto; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 6px; background: rgba(20, 16, 10, .8); border: 1px solid #2e2618; }
.adm-cmd code { font: 700 12.5px ui-monospace, Consolas, monospace; color: #ffd98a; }
.adm-cmd span { font: 500 12px Inter, sans-serif; color: #e8dcc0; }
.adm-cmd.danger code { color: #ff9a8a; }
@media (max-width: 820px) { .adm-cmd { grid-template-columns: 1fr; } }

/* ---- party: "Pronto?" antes da hunt ---- */
.hp-box { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); z-index: 900; width: min(380px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 10px;
  border: 1px solid #c98a42; background: linear-gradient(180deg, rgba(36, 26, 14, .97), rgba(14, 10, 6, .97)); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 18px rgba(201, 138, 66, .25); color: #efe3c4; }
.hp-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hp-title b { font: 700 15px "Cinzel", Georgia, serif; color: #ffd98a; }
.hp-title em { padding: 1px 8px; border-radius: 9px; background: #1e4a26; color: #9ff0b0; font: 700 10px Inter, sans-serif; font-style: normal; }
.hp-title em.pvp { background: #5a1a14; color: #ffb0a0; }
.hp-box p { margin: 4px 0 8px; font: 500 13px/1.45 Inter, sans-serif; }
.hp-list { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 3px; }
.hp-list li { display: flex; align-items: center; gap: 8px; font: 600 12.5px Inter, sans-serif; color: #d8c8a8; }
.hp-list li i { width: 18px; text-align: center; font-style: normal; }
.hp-list li.ok i { color: #6fe08f; } .hp-list li.no i { color: #ff7a6a; } .hp-list li.wait i { color: #ffd98a; }
.hp-bar { height: 4px; border-radius: 2px; background: #2a2014; overflow: hidden; margin-bottom: 10px; }
.hp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c98a42, #ffd98a); transition: width .25s linear; }
.hp-btns { display: flex; gap: 8px; justify-content: flex-end; }
.hp-btn { padding: 7px 14px; border-radius: 6px; border: 1px solid #6a6050; background: linear-gradient(180deg, #4a4640, #2c2a26); color: #f0ece0; font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.hp-btn.ok { background: linear-gradient(180deg, #2e8a46, #1a5a2a); border-color: #5ad07a; color: #eaffef; }
.hp-btn:hover { filter: brightness(1.15); }

/* ---------- HUD Royal (teste, Opções > HUD): molduras de ouro com safiras sobre azul-marinho (o menu de cima fica o de sempre) ---------- */
body.hud-royal .win.ornate {
  border-width: 24px 22px 22px;
  border-image: url(/ui/royal/royal-frame.png) 46 50 46 50 fill / 24px 22px 22px 22px stretch;
  background: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6);
}
body.hud-royal .win.ornate > .win-head { color: #f6dc9c; text-shadow: 0 1px 2px #000, 0 0 8px rgba(80, 140, 255, .35);
  background: linear-gradient(90deg, transparent, rgba(214, 168, 80, .6), transparent) bottom / 100% 1px no-repeat; }
body.hud-royal .win-close, body.hud-royal .win-min { border-color: #b8862f; background: #0d1626; color: #f6dc9c; }
body.hud-royal .slot {
  border: 1px solid #8a6424; outline: 1px solid #05080f; border-radius: 3px;
  background: radial-gradient(circle at 50% 40%, rgba(70, 110, 190, .16), transparent 70%), linear-gradient(180deg, #111c30, #080d18);
  box-shadow: inset 0 0 0 1px rgba(246, 220, 156, .08);
}
body.hud-royal .slot[class*="val-"] { background: radial-gradient(circle at 50% 50%, rgba(var(--vc), .36) 0%, rgba(var(--vc), .12) 45%, transparent 72%), linear-gradient(180deg, #111c30, #080d18); }

/* ---------- botões Hunt / Bot / Stop: a arte limpa nos lugares de sempre ---------- */
/* Hunt grande em cima, Bot embaixo (coluna da esquerda); Stop na direita, em cima dos redondos */
.hunt-btns { grid-template-columns: 1fr; gap: 4px; }
.btn-hunts, .btn-bot-open, .btn-stop {
  padding: 0; border: 0; border-radius: 6px; box-shadow: none; outline: none;
  font-size: 0; color: transparent; text-shadow: none; overflow: visible;
  background: center / 100% 100% no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  transition: filter .15s, transform .1s; cursor: pointer;
}
.btn-hunts { width: 120px; height: 53px; justify-self: center; background-image: url(/ui/btn/hunt.png?v=2); }
.btn-bot-open { width: 120px; height: 53px; justify-self: center; background-image: url(/ui/btn/bot.png?v=2); }
.btn-stop { width: 104px; height: 46px; background-image: url(/ui/btn/stop.png?v=2); }
.btn-hunts span, .btn-bot-open span { display: none; }
.btn-hunts::before, .btn-hunts::after, .btn-bot-open::before, .btn-bot-open::after { content: none; display: none; animation: none; }
.btn-hunts:hover, .btn-bot-open:hover, .btn-stop:hover { filter: brightness(1.15) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); box-shadow: none; border: 0; }
.btn-hunts:active, .btn-bot-open:active, .btn-stop:active { transform: translateY(1px); }
/* ligado: um leve brilho na cor do botão */
.btn-hunts.on { filter: brightness(1.12) drop-shadow(0 0 6px rgba(80, 150, 255, .75)); box-shadow: none; }
.btn-bot-open.on { filter: brightness(1.1) drop-shadow(0 0 6px rgba(90, 240, 110, .8)); box-shadow: none; border: 0; }

/* ---------- HUD Sombria (Opções > HUD > Estilo): janelas e barra de baixo escuras, borda fina de bronze e cantoneiras (o menu de cima não muda) ---------- */
body.hud-dark .win.ornate {
  border-image: url(/ui/dark/frame.svg) 22 fill / 22px stretch;
  background: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .65);
}
body.hud-dark .win.ornate > .win-head {
  color: #f1e2c8; text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, rgba(255, 220, 170, .05), transparent) top / 100% 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(185, 138, 85, .55) 15%, rgba(185, 138, 85, .55) 85%, transparent) bottom / 100% 1px no-repeat;
}
body.hud-dark .win-close, body.hud-dark .win-min {
  border-color: #5a3f28; background: linear-gradient(180deg, #2a1f18, #140e0b); color: #d9c3a1; border-radius: 3px;
}
body.hud-dark .win-close:hover, body.hud-dark .win-min:hover { color: #fff; border-color: #c99b62; box-shadow: 0 0 6px rgba(201, 155, 98, .5); }
body.hud-dark .slot {
  border: 1px solid #3a2a1e; outline: 1px solid #050302; border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 200, 140, .06), transparent 70%), linear-gradient(180deg, #1a1411, #0c0908);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .06), inset 0 -1px 2px rgba(0, 0, 0, .6);
}
body.hud-dark .slot:not(.empty):hover, body.hud-dark .slot.empty:hover { border-color: #c99b62; }
body.hud-dark .slot[class*="val-"] { background: radial-gradient(circle at 50% 50%, rgba(var(--vc), .34) 0%, rgba(var(--vc), .1) 45%, transparent 72%), linear-gradient(180deg, #1a1411, #0c0908); }
body.hud-dark .bar { border-radius: 3px; }
/* barra de baixo na Sombria: Hunts e Bot lado a lado em placas escuras, STOP vermelho, redondos de bronze */
body.hud-dark .hunt-btns { grid-template-columns: auto auto; gap: 6px; }
body.hud-dark .btn-hunts, body.hud-dark .btn-bot-open {
  width: 104px; height: 64px; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(180deg, #2c231d 0%, #1a1411 55%, #120e0c 100%);
  border: 1px solid #4d3727; border-radius: 6px; filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .1), inset 0 -2px 4px rgba(0, 0, 0, .6), 0 0 0 1px #050302, 0 3px 6px rgba(0, 0, 0, .55);
  font: 700 15px Cinzel, "Crimson Pro", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #efe1c6; text-shadow: 0 1px 2px #000;
}
body.hud-dark .btn-hunts span, body.hud-dark .btn-bot-open span { display: inline; font-size: 26px; color: #e0b36d; text-shadow: 0 0 6px rgba(224, 179, 109, .35), 0 1px 2px #000; animation: none; }
body.hud-dark .btn-hunts:hover, body.hud-dark .btn-bot-open:hover { border-color: #c99b62; filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 220, 170, .14), 0 0 0 1px #050302, 0 0 10px rgba(201, 155, 98, .35); }
body.hud-dark .btn-hunts.on { border-color: #c99b62; filter: none; box-shadow: inset 0 1px 0 rgba(255, 220, 170, .14), 0 0 0 1px #050302, 0 0 10px rgba(255, 150, 60, .45); }
body.hud-dark .btn-bot-open.on { border-color: #7fd38a; filter: none; box-shadow: inset 0 1px 0 rgba(220, 255, 220, .12), 0 0 0 1px #050302, 0 0 10px rgba(90, 220, 110, .45); }
body.hud-dark .btn-bot-open.on span { color: #9ff0a8; }
body.hud-dark .btn-stop {
  width: 112px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #d0402c 0%, #9c1e12 50%, #5e0c06 100%);
  border: 1px solid #f08a68; border-radius: 6px; filter: none; font-size: 0;
  box-shadow: inset 0 1px 0 rgba(255, 210, 190, .45), inset 0 -3px 6px rgba(60, 0, 0, .5), 0 0 0 1px #1a0402, 0 0 10px rgba(255, 70, 30, .3);
}
body.hud-dark .btn-stop::after { content: "⚔ STOP"; font: 800 16px Cinzel, "Crimson Pro", Georgia, serif; letter-spacing: .08em; color: #fff1e0; text-shadow: 0 1px 2px #3a0000; }
body.hud-dark .btn-stop:hover { filter: brightness(1.12); }
body.hud-dark .round { background: radial-gradient(circle at 50% 35%, #2c231d, #120e0c); border: 1px solid #8a6440; color: #e0b36d; box-shadow: 0 0 0 1px #050302, inset 0 1px 0 rgba(255, 220, 170, .12); }
body.hud-dark .round:hover { border-color: #e0b36d; color: #fff; }
body.hud-dark .bot-style button { background: linear-gradient(180deg, #2a211b, #15100d); border-color: #4d3727; color: #d9c3a1; }
body.hud-dark .bot-style button.on, body.hud-dark .bot-style button.active { background: linear-gradient(180deg, #4a3624, #2a1d14); border-color: #c99b62; color: #fff1d8; }
body.hud-dark .hotbar-side, body.hud-dark .hunt-go { border-color: rgba(185, 138, 85, .35); }

/* ---------- HUD Arcana (Opções > HUD > Estilo): pixel art roxa com ouro (Tiny RPG Mana Soul GUI, CC0) ---------- */
body.hud-arcana .win.ornate {
  border-image: url(/ui/arcana/frame.png) 16 fill / 24px stretch;
  image-rendering: pixelated; background: none;
  box-shadow: 0 8px 18px rgba(10, 4, 24, .6);
}
body.hud-arcana .win.ornate .win-body, body.hud-arcana .win.ornate .win-head { image-rendering: auto; }
body.hud-arcana #win-hotbar.win.ornate { border-image: url(/ui/arcana/frame-bar.png) 16 fill / 24px stretch; }
body.hud-arcana .win.ornate > .win-head {
  color: #ffd97a; text-shadow: 0 1px 0 #2a1638, 0 0 6px rgba(255, 190, 80, .3);
  background: linear-gradient(90deg, transparent, rgba(255, 196, 92, .55) 12%, rgba(255, 196, 92, .55) 88%, transparent) bottom / 100% 1px no-repeat;
}
body.hud-arcana .win-close, body.hud-arcana .win-min {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; box-shadow: none; font-size: 0; color: transparent;
  background: url(/ui/arcana/close.png) center / 100% 100% no-repeat; image-rendering: pixelated;
}
body.hud-arcana .win-min { background-image: url(/ui/arcana/min.png); }
body.hud-arcana .win-close:hover, body.hud-arcana .win-min:hover { filter: brightness(1.2); box-shadow: none; }
body.hud-arcana .slot {
  border: 1px solid #6b4a7a; outline: 1px solid #1a0f26; border-radius: 2px;
  background: linear-gradient(180deg, #3b2f52, #271d3a); box-shadow: inset 0 1px 0 rgba(255, 220, 160, .08), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
body.hud-arcana .slot:not(.empty):hover, body.hud-arcana .slot.empty:hover { border-color: #ffc45c; }
body.hud-arcana .slot[class*="val-"] { background: radial-gradient(circle at 50% 50%, rgba(var(--vc), .36) 0%, rgba(var(--vc), .1) 45%, transparent 72%), linear-gradient(180deg, #3b2f52, #271d3a); }
/* barra de baixo: botões de pixel art (Hunts azul, Bot cinza/verde ligado, Stop vermelho), nos lugares de sempre */
body.hud-arcana .btn-hunts, body.hud-arcana .btn-bot-open, body.hud-arcana .btn-stop {
  width: 124px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; filter: none;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  border-image: url(/ui/arcana/btn-blue.png) 6 22 6 22 fill / 11px 30px 11px 30px stretch; image-rendering: pixelated;
  font: 700 15px "Crimson Pro", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #fff4d6; text-shadow: 0 1px 0 #1a0f26, 0 0 4px rgba(0, 0, 0, .6);
}
body.hud-arcana .btn-bot-open { border-image-source: url(/ui/arcana/btn-gray.png); }
body.hud-arcana .btn-bot-open.on { border-image-source: url(/ui/arcana/btn-green.png); color: #10300c; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
body.hud-arcana .btn-stop { width: 112px; border-image-source: url(/ui/arcana/btn-red.png); font-size: 0; }
body.hud-arcana .btn-stop::after { content: "STOP"; font: 700 15px "Crimson Pro", Georgia, serif; letter-spacing: .08em; color: #fff4d6; text-shadow: 0 1px 0 #3a0a0a; }
body.hud-arcana .btn-hunts span, body.hud-arcana .btn-bot-open span { display: inline; font-size: 16px; color: inherit; animation: none; }
body.hud-arcana .btn-hunts:hover, body.hud-arcana .btn-bot-open:hover, body.hud-arcana .btn-stop:hover { filter: brightness(1.15); box-shadow: none; border-color: transparent; }
body.hud-arcana .btn-hunts.on { filter: brightness(1.12) drop-shadow(0 0 4px rgba(120, 190, 255, .8)); box-shadow: none; }
body.hud-arcana .round { background: linear-gradient(180deg, #3b2f52, #271d3a); border: 1px solid #ffc45c; color: #ffd97a; box-shadow: 0 0 0 1px #1a0f26; }
body.hud-arcana .round:hover { color: #fff; filter: brightness(1.15); }

/* ---------- HUD Forja (Opções > HUD > Estilo): placas de metal chanfradas, pedra escura e botões de pedra rachada ---------- */
body.hud-forja .win.ornate {
  border-image: url(/ui/forja/frame.svg) 22 fill / 22px stretch;
  background: none; box-shadow: 0 10px 22px rgba(0, 0, 0, .7);
}
body.hud-forja .win.ornate > .win-head {
  font: 800 11.5px Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #e2d3bd; text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, #2f2722, #1c1612) padding-box; border-bottom: 1px solid #0a0706; box-shadow: 0 1px 0 #4a3e35;
  padding-top: 6px; padding-bottom: 6px;
}
body.hud-forja .win.ornate > .win-head .win-title { font: inherit; }
body.hud-forja .win-close, body.hud-forja .win-min {
  border: 1px solid #0a0706; border-radius: 2px; color: #d8c8b0; background: linear-gradient(180deg, #4a3e35, #241d18);
  box-shadow: inset 0 1px 0 rgba(255, 235, 210, .15);
}
body.hud-forja .win-close:hover, body.hud-forja .win-min:hover { color: #fff; border-color: #c46a2a; box-shadow: 0 0 6px rgba(230, 110, 40, .5); }
body.hud-forja .slot {
  border: 1px solid #0b0807; outline: 1px solid #3c322b; border-radius: 3px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 230, 200, .05), transparent 70%), linear-gradient(180deg, #1b1613, #110d0b);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 230, 200, .05);
}
body.hud-forja .slot:not(.empty):hover, body.hud-forja .slot.empty:hover { outline-color: #c46a2a; }
body.hud-forja .slot[class*="val-"] { background: radial-gradient(circle at 50% 50%, rgba(var(--vc), .34) 0%, rgba(var(--vc), .1) 45%, transparent 72%), linear-gradient(180deg, #1b1613, #110d0b); }
/* botões de pedra rachada: Hunt laranja, Bot cinza (verde ligado), Stop vermelho, nos lugares de sempre */
body.hud-forja .btn-hunts, body.hud-forja .btn-bot-open, body.hud-forja .btn-stop {
  width: 124px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; filter: none;
  border: 0; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  background: url(/ui/forja/btn-orange.png) center / 100% 100% no-repeat;
  font: 900 15px Inter, "Arial Black", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #efe3d0;
  text-shadow: 0 1px 0 #1a0f08, 0 2px 3px rgba(0, 0, 0, .8);
}
body.hud-forja .btn-bot-open { background-image: url(/ui/forja/btn-grey.png); }
body.hud-forja .btn-bot-open.on { background-image: url(/ui/forja/btn-green.png); box-shadow: 0 0 10px rgba(150, 220, 60, .45), 0 2px 4px rgba(0, 0, 0, .6); }
body.hud-forja .btn-stop { width: 112px; background-image: url(/ui/forja/btn-red.png); font-size: 0; }
body.hud-forja .btn-stop::after { content: "STOP"; font: 900 15px Inter, "Arial Black", sans-serif; letter-spacing: .06em; color: #f6e6d2; text-shadow: 0 1px 0 #2a0505, 0 2px 3px rgba(0, 0, 0, .8); }
body.hud-forja .btn-hunts span, body.hud-forja .btn-bot-open span { display: inline; font-size: 15px; color: inherit; animation: none; }
body.hud-forja .btn-hunts:hover, body.hud-forja .btn-bot-open:hover, body.hud-forja .btn-stop:hover { filter: brightness(1.15); border: 0; }
body.hud-forja .btn-hunts.on { filter: brightness(1.1); box-shadow: 0 0 10px rgba(255, 140, 40, .55), 0 2px 4px rgba(0, 0, 0, .6); }
body.hud-forja .round { background: radial-gradient(circle at 50% 30%, #4a3e35, #1c1612); border: 1px solid #0a0706; outline: 1px solid #5c4d41; color: #e2d3bd; }
body.hud-forja .round:hover { outline-color: #c46a2a; color: #fff; }
body.hud-forja .bot-style button.on { background: linear-gradient(180deg, #e07a2a, #8a3a10); color: #fff1e0; }

/* item com arte própria em alta resolução (ex.: Blood Double Axe 64x64): redução suave no slot, sem serrilhar */
canvas.hires { image-rendering: auto !important; }
.cx-allbtns { display: grid; gap: 6px; justify-items: stretch; }
.cx-starchk { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 6px 10px; border: 1px solid #8a6a24; border-radius: 3px; background: linear-gradient(180deg, rgba(60,40,10,.55), rgba(25,16,6,.7)); font: 700 12px Cinzel, serif; letter-spacing: .05em; text-transform: uppercase; color: #ffc93c; text-shadow: 0 1px 2px #000; }
.cx-starchk:hover { border-color: #ffc93c; color: #ffe08a; box-shadow: 0 0 8px rgba(255,201,60,.25); }
.cx-starchk input { position: absolute; opacity: 0; pointer-events: none; }
.cx-starchk .cx-box { flex: none; width: 16px; height: 16px; border: 1px solid #c99a3a; border-radius: 2px; background: #1a1108; box-shadow: inset 0 1px 3px #000; display: grid; place-items: center; }
.cx-starchk input:checked + .cx-box { background: linear-gradient(180deg, #ffd25a, #c98a12); border-color: #ffe08a; }
.cx-starchk input:checked + .cx-box::after { content: "✔"; font: 900 12px Inter, sans-serif; color: #2a1004; line-height: 1; }
.cx-starchk input:focus-visible + .cx-box { outline: 1px solid #ffe08a; }
.cx-starchk.off { opacity: .45; cursor: default; }
.cx-starchk.off:hover { border-color: #8a6a24; color: #ffc93c; box-shadow: none; }
/* marcações do minimapa */
.mm-btn.mm-flag { color: #6d5a48; }
.mm-btn.mm-flag.on { color: #ff6a4d; }
.mk-pop { position: fixed; z-index: 9000; width: 296px; padding: 10px; border: 1px solid #8a5a2a; border-radius: 4px; background: linear-gradient(180deg, #24180f, #120c08); box-shadow: 0 10px 30px rgba(0,0,0,.7), 0 0 0 1px #000; color: #e8d8c0; }
.mk-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.mk-head b { font: 700 13px Cinzel, serif; color: #F3E7D3; letter-spacing: .05em; }
.mk-head small { flex: 1; font: 600 10.5px Inter, sans-serif; color: #a8957f; }
.mk-x { background: none; border: 0; color: #c9a77a; font: 700 16px/1 Inter, sans-serif; cursor: pointer; padding: 0 2px; }
.mk-x:hover { color: #fff; }
.mk-grid { display: grid; grid-template-columns: repeat(10, 24px); gap: 3px; justify-content: space-between; margin-bottom: 8px; }
.mk-ic { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid #3a2a1c; border-radius: 3px; background: #0d0907; cursor: pointer; box-sizing: content-box; }
.mk-ic canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.mk-ic:hover { border-color: #c98a3a; }
.mk-ic.on { border-color: #ffc93c; background: #3a2810; box-shadow: 0 0 6px rgba(255,201,60,.45); }
.mk-desc { width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 8px; border: 1px solid #5a3f28; border-radius: 3px; background: #0d0907; color: #F3E7D3; font: 500 12px Inter, sans-serif; }
.mk-desc:focus { outline: none; border-color: #ffc93c; }
.mk-btns { display: flex; justify-content: flex-end; gap: 6px; }
/* Wheel of Destiny */
#win-sys-wheel.wd-win { width: min(1180px, calc(100vw - 24px)) !important; max-width: none !important; }
.wd-win .win-body { max-height: calc(100vh - 90px); overflow: auto; }
.wd-root { display: grid; grid-template-columns: 250px auto 236px; gap: 12px; align-items: start; justify-content: center; }
@media (max-width: 1000px) { .wd-root { grid-template-columns: 1fr; justify-items: center; } .wd-side, .wd-right { width: min(520px, 100%); } }
.wd-wheelbox { position: relative; }
.wd-wheel { position: absolute; left: 0; top: 0; width: 522px; height: 522px; transform-origin: 0 0; cursor: pointer; user-select: none; }
.wd-wheel img, .wd-wheel span, .wd-wheel div { position: absolute; pointer-events: none; }
.wd-layer { left: 0; top: 0; width: 522px; height: 522px; }
.wd-fill { background-repeat: no-repeat; }
.wd-front { width: 178px; height: 178px; }
.wd-border { filter: drop-shadow(0 0 4px #fff) brightness(1.4); }
.wd-node { width: 30px; height: 30px; }
.wd-nc { position: absolute; inset: 0; }
.wd-nc > span { position: absolute !important; left: 0; top: 0; width: 30px !important; height: 30px !important; border-radius: 50%; }
.wd-nc .spell-ic { box-shadow: 0 0 0 1px #000, 0 0 0 2px #b08a3a !important; }
.wd-node .wd-ded { left: -5px; top: 17px; width: 16px; height: 16px; background: url(/ui/wheel/icons-skillwheel-smallperks.png) no-repeat; filter: drop-shadow(0 1px 1px #000); }
.wd-node.off { filter: brightness(.7); }
.wd-node.full .wd-nc { filter: drop-shadow(0 0 4px #ffe08a); }
.wd-rev { width: 34px; height: 34px; border-radius: 50%; background: url(/ui/wheel/icons-skillwheel-largeperks.png) no-repeat; filter: grayscale(1) brightness(.5); pointer-events: auto !important; }
.wd-rev.on { filter: drop-shadow(0 0 6px #ffd24a); }
.wd-side, .wd-right { display: grid; gap: 10px; align-content: start; }
.wd-slothead { border-left: 3px solid var(--dc); padding: 4px 10px; background: linear-gradient(90deg, rgba(255,255,255,.04), transparent); }
.wd-slothead b { display: block; font: 700 15px Cinzel, serif; color: #F3E7D3; letter-spacing: .04em; }
.wd-slothead small { font: 600 11px Inter, sans-serif; color: var(--dc); }
.wd-bar { position: relative; height: 18px; border: 1px solid #5a3f28; border-radius: 3px; background: #0d0907; overflow: hidden; }
.wd-bar i { position: absolute; inset: 0 auto 0 0; opacity: .85; }
.wd-bar span { position: relative; display: block; text-align: center; font: 700 11px/18px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.wd-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 5px; }
.wd-btns button { padding: 4px 0; font-size: 11px; }
.wd-perk { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; padding: 8px; border: 1px solid #3a2a1c; border-radius: 4px; background: rgba(0,0,0,.25); }
.wd-perk b { font: 700 12px Cinzel, serif; color: #F3E7D3; letter-spacing: .04em; }
.wd-perk b em { font: 600 10px Inter, sans-serif; font-style: normal; color: #7fdc6a; margin-left: 4px; }
.wd-perk b em.off { color: #a8957f; }
.wd-perk p { margin: 3px 0 0; font: 500 11.5px/1.4 Inter, sans-serif; color: #d9c3a6; }
.wd-perk.conv:not(.on) .wd-convic { filter: grayscale(.8) brightness(.6); }
.wd-small { width: 16px; height: 16px; margin: 7px; background: url(/ui/wheel/icons-skillwheel-smallperks.png) no-repeat; }
.wd-med { display: block; width: 30px; height: 30px; background: url(/ui/wheel/icons-skillwheel-mediumperks.png) no-repeat; }
.wd-convic .spell-ic { width: 30px !important; height: 30px !important; }
.wd-hint { margin: 0; font: 500 10.5px/1.4 Inter, sans-serif; color: #8f7d68; }
.wd-points { text-align: center; padding: 8px; border: 1px solid #8a5a2a; border-radius: 4px; background: linear-gradient(180deg, #2a1c10, #120c08); }
.wd-points small { display: block; font: 700 10.5px Cinzel, serif; color: #c9a77a; letter-spacing: .06em; text-transform: uppercase; }
.wd-points b { display: block; font: 700 28px Cinzel, serif; color: #ffc93c; text-shadow: 0 0 10px rgba(255,180,40,.35); }
.wd-points span { font: 600 11px Inter, sans-serif; color: #a8957f; }
.wd-doms { display: grid; gap: 6px; }
.wd-dom { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; padding: 5px 6px; border-left: 3px solid var(--dc); background: rgba(0,0,0,.25); border-radius: 0 4px 4px 0; }
.wd-dom b { display: block; font: 700 11.5px Inter, sans-serif; color: #F3E7D3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-dom small { font: 600 10.5px Inter, sans-serif; color: #a8957f; }
.wd-revic { width: 34px; height: 34px; border-radius: 50%; background: url(/ui/wheel/icons-skillwheel-largeperks.png) no-repeat; }
.wd-mini { position: relative; display: block; height: 5px; margin-top: 3px; background: #0d0907; border-radius: 3px; overflow: hidden; }
.wd-mini i { position: absolute; inset: 0 auto 0 0; background: var(--dc); }
.wd-mini em { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.35); }
.wd-sum { padding: 8px; border: 1px solid #3a2a1c; border-radius: 4px; background: rgba(0,0,0,.25); }
.wd-sum > b { font: 700 12px Cinzel, serif; color: #F3E7D3; letter-spacing: .04em; }
.wd-sum ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; max-height: 190px; overflow: auto; }
.wd-sum li { display: flex; justify-content: space-between; gap: 8px; font: 500 11.5px Inter, sans-serif; color: #a8957f; }
.wd-sum li b { color: #F3E7D3; text-align: right; }
.wd-sum li.empty { color: #6d5a48; }
.wd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wd-actions .wd-save { grid-column: 1 / -1; }
.wd-locked { display: grid; justify-items: center; gap: 8px; padding: 30px; text-align: center; }
.wd-locked img { width: 260px; opacity: .6; }
.wd-locked b { font: 700 18px Cinzel, serif; color: #F3E7D3; }
.wd-locked p { margin: 0; font: 500 13px Inter, sans-serif; color: #d9c3a6; }
.wd-actions button:disabled { filter: grayscale(.85) brightness(.6); cursor: default; }
.wd-win .win-body { display: grid; gap: 10px; }
.wd-tabs { display: flex; gap: 4px; border-bottom: 1px solid #4a3122; }
.wd-tab { padding: 7px 16px; border: 1px solid #4a3122; border-bottom: 0; border-radius: 4px 4px 0 0; background: #140e0b; color: #a8957f; font: 700 12px Cinzel, serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.wd-tab:hover { color: #F3E7D3; }
.wd-tab.on { background: linear-gradient(180deg, #3a2614, #1c130c); color: #ffc93c; border-color: #8a5a2a; }
.wd-gems { display: grid; gap: 10px; }
.wd-gems h4 { margin: 0 0 8px; font: 700 12.5px "Cinzel", Georgia, serif; color: #e8cf98; letter-spacing: .08em; text-transform: uppercase; }
.wd-vessels { padding: 8px; border: 1px solid #3a2a1c; border-radius: 4px; background: rgba(0,0,0,.25); }
.wd-vessels > b { font: 700 12px Cinzel, serif; color: #F3E7D3; letter-spacing: .04em; }
.wd-vessels > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.wd-ves { display: grid; justify-items: center; gap: 2px; padding: 4px 0; border: 1px solid var(--dc); border-radius: 4px; background: #0d0907; cursor: pointer; }
.wd-ves:hover { box-shadow: 0 0 8px var(--dc); }
.wd-ves.shut { opacity: .5; }
.wd-vgem { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); font-size: 14px; }
.wd-ves small { font: 700 10px Inter, sans-serif; color: var(--dc); }
/* magias da Revelação ainda não liberadas na Wheel of Destiny */
.hot-slot.wheel-locked > .spell-ic, .hot-slot.wheel-locked > .hot-spell { filter: grayscale(1) brightness(.45); }
.hot-wlock { position: absolute; right: 2px; bottom: 1px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.bw-slot.wlock > .spell-ic { filter: grayscale(1) brightness(.5); }
.bw-wlock { position: absolute; left: 2px; bottom: 2px; font-size: 12px; font-style: normal; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.bw-wl { display: block; padding: 5px 7px; border: 1px solid #8a6a24; border-radius: 3px; background: rgba(90,60,10,.35); color: #ffc93c !important; font-weight: 600; }
.wlock .spell-ic { filter: grayscale(1) brightness(.55); }
.bw-row.wlock { position: relative; }
.bw-row.wlock::after { content: "🔒"; position: absolute; left: 4px; bottom: 3px; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
/* janela Skills: forja, esquiva e proteções */
#skills .sk-zero { color: #6d5a48; }
#skills .sk-neg { color: #ff6a5a; }
#skills dt.sk-forge { color: #ffb24c; }
#skills .sk-el { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1px #000; }
#skills dt small, #skills dd small { color: #a8957f; font-size: 10px; }
/* tooltip: imbuements do item */
.tip-imbu-h { color: #c9a77a; font-weight: 700; margin-top: 2px; }
.tip-imbu { color: #8fd3ff; padding-left: 6px; }
.tip-imbu small { color: #a8957f; }
.tip-imbu.empty { color: #7a6a58; }
#skills .sk-elems { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }
#skills .sk-elems > b { grid-column: 1 / -1; font: 700 10.5px Inter, sans-serif; color: #c9a77a; text-transform: uppercase; letter-spacing: .05em; }
#skills .sk-elems span { display: flex; align-items: center; gap: 0; white-space: nowrap; }
#skills .sk-elems em { margin-left: auto; font-style: normal; font-weight: 700; color: #F3E7D3; }
#skills .sk-elems span.sk-zero em { color: #6d5a48; }
#skills .sk-elems em.sk-neg { color: #ff6a5a; }
#win-skills .win-body.sk-scroll { height: 340px; min-height: 120px; max-height: calc(100vh - 140px); overflow-y: auto; resize: vertical; }
#skills .sk-elems span[title] { cursor: help; }
#win-minimap.win.ornate > .win-head + .win-body { margin-top: 3px; }
/* ---------- estilo da HUD na faixa de cima e no megamenu de Sistemas (só a cor, sem moldura) ---------- */
/* a faixa de cima ganha o fundo da HUD + o filete da cor do acabamento; o megamenu (uma imagem com fundo preto)
   recebe a cor por baixo dos ícones: a camada em "lighten" só troca o que é mais escuro que ela */
.systems-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: lighten; background: var(--hud-tint, none); }
body.hud-royal { --hud-top: linear-gradient(180deg, #16243a, #0b1422); --hud-line: rgba(214, 168, 80, .75); --hud-tint: linear-gradient(180deg, #16243a, #0c1626); --hud-ring: rgba(184, 134, 47, .7); }
body.hud-dark { --hud-top: linear-gradient(180deg, #1d1613, #0f0b09); --hud-line: rgba(185, 138, 85, .7); --hud-tint: linear-gradient(180deg, #1f1714, #120d0a); --hud-ring: rgba(185, 138, 85, .6); }
body.hud-arcana { --hud-top: linear-gradient(180deg, #3e1d56, #22103a); --hud-line: rgba(255, 196, 92, .75); --hud-tint: linear-gradient(180deg, #40205a, #1e0f36); --hud-ring: rgba(255, 196, 92, .6); }
body.hud-forja { --hud-top: linear-gradient(180deg, #2d2621, #181310); --hud-line: rgba(138, 119, 100, .8); --hud-tint: linear-gradient(180deg, #2b241f, #17120f); --hud-ring: rgba(111, 95, 80, .8); }
body.hud-royal #screen-game::before, body.hud-dark #screen-game::before, body.hud-arcana #screen-game::before, body.hud-forja #screen-game::before {
  background: var(--hud-top); box-shadow: 0 1px 0 var(--hud-line), 0 2px 8px rgba(0, 0, 0, .6);
}
body.hud-royal .systems-bar, body.hud-dark .systems-bar, body.hud-arcana .systems-bar, body.hud-forja .systems-bar {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 0 1px var(--hud-ring);
}
/* luz das bolinhas de estágio da Revelação (a moldura do estágio deixa as acesas vazadas) */
.wd-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, var(--dc) 45%, rgba(0,0,0,0) 72%); filter: drop-shadow(0 0 3px var(--dc)); }
/* Stone System: nível da Stone no canto de cima à direita (losango na cor da pedra; o tier da forja é o dourado à esquerda) */
.slot-stone { position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; display: grid; place-items: center; pointer-events: none; z-index: 3;
  font: 900 9px/1 Verdana, sans-serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.slot-stone::before { content: ""; position: absolute; inset: 1px; transform: rotate(45deg); border-radius: 2px; z-index: -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc, #b48cff) 75%, #fff), var(--sc, #b48cff) 55%, color-mix(in srgb, var(--sc, #b48cff) 55%, #000));
  box-shadow: 0 0 0 1px #0b0710, 0 0 5px var(--sc, #b48cff); }
.slot-stone.st-e0 { --sc: #e070e8; } .slot-stone.st-e1 { --sc: #9a5cff; } .slot-stone.st-e2 { --sc: #3fd36a; } .slot-stone.st-e3 { --sc: #ff4a3d; }
.slot-stone.st-e4 { --sc: #3fd0f0; } .slot-stone.st-e5 { --sc: #ffc23a; } .slot-stone.st-e6 { --sc: #4a6cff; } .slot-stone.st-e7 { --sc: #3fe0b8; }

/* ===== Stone System (no lugar da Gem Bag) ===== */
#win-sys-stones.stn-win { width: min(1180px, calc(100vw - 32px)) !important; max-width: none !important; }
.stn-win .win-body { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px 14px; max-height: min(820px, calc(100vh - 100px)); overflow: auto;
  background: radial-gradient(120% 80% at 20% 0%, rgba(80, 40, 120, .28), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(20, 90, 110, .22), transparent 60%), #0d0b12; }
.stn-win h4 { margin: 0 0 8px; font: 700 12.5px "Cinzel", Georgia, serif; color: #d9c6ff; letter-spacing: .08em; text-transform: uppercase; }
.stn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stn-tabs { display: flex; gap: 6px; }
.stn-tab { padding: 6px 14px; border-radius: 8px 8px 0 0; border: 1px solid #3a2c52; border-bottom-color: transparent; background: rgba(16, 11, 24, .8);
  font: 700 12.5px Inter, sans-serif; color: #b3a6c4; cursor: pointer; }
.stn-tab:hover { color: #efe4ff; }
.stn-tab.on { color: #ffe3a0; background: linear-gradient(180deg, #2a1d3e, #160f22); border-color: #8a6a2e; box-shadow: 0 -2px 10px rgba(201, 162, 90, .25); }
.stn-info { display: flex; gap: 10px; align-items: center; font: 500 12px Inter, sans-serif; color: #c9bddc; }
.stn-info b { color: #ffe3a0; }
.stn-pz { padding: 3px 9px; border-radius: 10px; background: rgba(160, 30, 30, .35); border: 1px solid #a33; color: #ffb4b4; font-weight: 700; }
.stn-gold { padding: 3px 10px; border-radius: 12px; border: 1px solid #6a5426; color: #ffd98a; font-weight: 700; }
.stn-gold::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; background: radial-gradient(circle at 35% 35%, #fff2b0, #e0a52a 55%, #8a5a12); }
.stn-body { display: grid; gap: 12px; min-height: 0; }
.stn-body.inv { grid-template-columns: 250px minmax(380px, 1fr) 270px; }
.stn-body.up { grid-template-columns: 372px minmax(320px, 1fr) 280px; }
.stn-panel { border: 1px solid #3a2c52; border-radius: 10px; background: rgba(14, 10, 22, .82); padding: 10px 12px; min-width: 0; }
.stn-left { display: flex; flex-direction: column; gap: 8px; }
.stn-search, .stn-filters select { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; border: 1px solid #4a3a66; background: #120c1c; color: #e6dcff; font: 500 12px Inter, sans-serif; }
.stn-filters { display: grid; grid-template-columns: 1fr; gap: 6px; }
.stn-chk { display: flex; align-items: center; gap: 6px; font: 600 12px Inter, sans-serif; color: #d8cfe8; cursor: pointer; }
.stn-chk input { accent-color: #c9a25a; width: 15px; height: 15px; }
.stn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 2px; }
.stn-tile, .stn-uptile { position: relative; display: grid; place-items: center; height: 52px; border-radius: 8px; border: 1px solid #3a2c52;
  background: radial-gradient(circle, #23173a, #0f0a18); cursor: grab; }
.stn-tile:hover, .stn-uptile:hover { border-color: #8a6a2e; }
.stn-tile.used { opacity: .45; cursor: default; }
.stn-tile b, .stn-uptile b { position: absolute; right: 3px; bottom: 1px; font: 800 11px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.stn-tile .slot-stone, .stn-uptile .slot-stone, .stn-slot .slot-stone { font-style: normal; }
.stn-empty { grid-column: 1 / -1; margin: 6px 0; font: 500 12px Inter, sans-serif; color: #9f92b4; }
.stn-hint { margin: 2px 0 0; font: 500 11.5px Inter, sans-serif; color: #9f92b4; line-height: 1.4; }
.stn-bagitems { border-top: 1px dashed rgba(110, 79, 160, .35); padding-top: 8px; display: grid; gap: 5px; }
.stn-bagrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 6px; font: 600 11.5px Inter, sans-serif; color: #e6dcff; }
.stn-board { display: grid; grid-template-rows: auto auto; align-content: start; gap: 12px; }
.stn-cross { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; }
.stn-cross .stn-eq { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stn-cross .stn-eqhead { margin-bottom: 0; min-width: 150px; }
.stn-cross .stn-slots { flex-wrap: nowrap; }
.stn-eq { border: 1px solid #3a2c52; border-radius: 10px; padding: 8px 10px; background: linear-gradient(180deg, rgba(42, 29, 62, .55), rgba(14, 10, 22, .6)); cursor: pointer; }
.stn-eq.sel { border-color: #c9a25a; box-shadow: 0 0 12px rgba(201, 162, 90, .3); }
.stn-eq.off .stn-slots { filter: saturate(.4) brightness(.8); }
.stn-eqhead { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; margin-bottom: 8px; }
.stn-eqic { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #120c1c; border: 1px solid #4a3a66; }
.stn-eqhead b { font: 700 13px "Cinzel", Georgia, serif; color: #f3e6ff; }
.stn-eqhead small { font: 500 10.5px Inter, sans-serif; color: #9f92b4; }
.stn-eqhead small { color: #7fe07a; }
.stn-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.stn-slot { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 2px solid #4a3a66;
  background: radial-gradient(circle, #1a1226 40%, #0b0710); box-shadow: inset 0 0 12px rgba(0, 0, 0, .8); color: #8a7aa6; font-size: 16px; }
.stn-slot.full { border-color: #c9a25a; cursor: pointer; }
.stn-slot.full .slot-stone { right: 0; top: 0; width: 17px; height: 17px; font-size: 10px; }
.stn-slot.locked { border-style: dashed; border-color: #6a5426; opacity: .7; }
.stn-slot.over { border-color: #6fe0c0; box-shadow: inset 0 0 12px rgba(0, 0, 0, .8), 0 0 12px rgba(111, 224, 192, .6); }
.stn-desc p { margin: 0 0 5px; font: 500 12px Inter, sans-serif; color: #d8cfe8; line-height: 1.45; }
.stn-desc .ok, .stn-mesainfo .ok { color: #7fe07a; } .stn-desc .warn { color: #ffcf7a; } .stn-mesainfo .no { color: #ff8b8b; }
.stn-right { display: flex; flex-direction: column; gap: 8px; }
.stn-sum { display: grid; gap: 8px; max-height: 380px; overflow: auto; padding-right: 4px; }
.stn-sec { display: grid; gap: 2px; }
.stn-sec > b { font: 700 11.5px Inter, sans-serif; color: #ffe3a0; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.stn-sec small { font: 500 11px Inter, sans-serif; color: #9f92b4; }
.stn-kv { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dashed rgba(110, 79, 160, .22); font: 500 12px Inter, sans-serif; color: #d8cfe8; }
.stn-kv em { font-style: normal; font-weight: 700; color: #9cf0b0; text-align: right; }
.stn-kv.zero, .stn-kv.zero em, .zero { color: #6f6584 !important; }
.stn-presets { display: grid; gap: 4px; max-height: 150px; overflow: auto; }
.stn-pre { text-align: left; padding: 5px 9px; border-radius: 6px; border: 1px solid #3a2c52; background: #120c1c; color: #d8cfe8; font: 600 12px Inter, sans-serif; cursor: pointer; }
.stn-pre.sel { border-color: #c9a25a; color: #ffe3a0; }
.stn-pre.cur { background: linear-gradient(90deg, rgba(201, 162, 90, .18), #120c1c); }
.stn-prebtns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.stn-upgrid { display: grid; grid-template-columns: repeat(8, 40px); gap: 4px; max-height: 470px; overflow: auto; }
.stn-uptile { height: 40px; cursor: pointer; }
.stn-uptile.none { opacity: .35; }
.stn-uptile.ready { border-color: #3fae5a; box-shadow: inset 0 0 8px rgba(63, 174, 90, .35); }
.stn-uptile.sel { border-color: #ffd98a; box-shadow: 0 0 10px rgba(255, 217, 138, .45); }
.stn-uptile .slot-stone { right: 1px; top: 1px; }
.stn-mesa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: radial-gradient(60% 50% at 50% 45%, rgba(155, 123, 255, .18), transparent 70%), rgba(14, 10, 22, .82); }
.stn-mesatitle { font: 700 18px "Cinzel", Georgia, serif; color: #f3e6ff; letter-spacing: .06em; }
.stn-mesaslots { display: flex; align-items: center; gap: 12px; }
.stn-mslot { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #4a3a66; background: radial-gradient(circle, #1a1226 40%, #0b0710); }
.stn-mslot.ok { border-color: #3fae5a; box-shadow: 0 0 10px rgba(63, 174, 90, .45); }
.stn-mslot.no { border-color: #a33; border-style: dashed; }
.stn-mslot.result { width: 76px; height: 76px; border-color: #c9a25a; box-shadow: 0 0 16px rgba(201, 162, 90, .45); }
.stn-marrow { font-size: 22px; color: #c9a25a; }
.stn-mesainfo { display: grid; gap: 4px; font: 600 13px Inter, sans-serif; color: #d8cfe8; }
.stn-mesainfo b { color: #ffe3a0; }
.stn-go { min-width: 220px; }
.stn-go:disabled { opacity: .45; cursor: not-allowed; }
.stn-next { display: flex; align-items: center; gap: 10px; }
.stn-next b { display: block; font: 700 13.5px "Cinzel", Georgia, serif; color: #f3e6ff; }
.stn-next small { font: 500 11px Inter, sans-serif; color: #9f92b4; }
.stn-tables { display: grid; gap: 10px; }
.stn-lvbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.stn-lv { padding: 4px 10px; border-radius: 6px; border: 1px solid #3a2c52; background: #120c1c; color: #c9bddc; font: 600 12px Inter, sans-serif; cursor: pointer; }
.stn-lv.on { border-color: #c9a25a; color: #ffe3a0; }
.stn-tblgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 10px; }
.stn-tbl { border: 1px solid #3a2c52; border-radius: 10px; background: rgba(14, 10, 22, .82); padding: 10px 12px; }
.stn-tbl table { width: 100%; border-collapse: collapse; font: 500 12px Inter, sans-serif; color: #d8cfe8; }
.stn-tbl th { text-align: left; padding: 4px 6px; font-weight: 700; color: #ffe3a0; border-bottom: 1px solid #3a2c52; }
.stn-tbl td { padding: 3px 6px; border-bottom: 1px dashed rgba(110, 79, 160, .22); vertical-align: middle; }
.stn-tbl td:last-child { text-align: right; font-weight: 700; color: #9cf0b0; white-space: nowrap; }
.stn-tbl td small { display: block; color: #9f92b4; font-size: 10.5px; }
.stn-tic { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; }
.stn-combo { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.stn-combo .stn-tic { margin-right: -4px; }
.stn-help { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stn-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; counter-reset: stn; }
.stn-step { counter-increment: stn; border: 1px solid #3a2c52; border-radius: 10px; padding: 10px 12px 10px 44px; position: relative; background: rgba(14, 10, 22, .82); }
.stn-step::before { content: counter(stn); position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #e0b25a, #8a5a12); color: #1a1226; font: 900 12px Inter, sans-serif; }
.stn-step b { font: 700 13px "Cinzel", Georgia, serif; color: #f3e6ff; }
.stn-step p, .stn-rules li { margin: 4px 0 0; font: 500 12px Inter, sans-serif; color: #d8cfe8; line-height: 1.45; }
.stn-rules { border: 1px solid #3a2c52; border-radius: 10px; padding: 10px 14px; background: rgba(14, 10, 22, .82); }
.stn-rules ol { margin: 0; padding-left: 18px; }
.ib-stone-anim { width: 32px; height: 32px; background: url(/ui/stone-backpack.png?v=1) 0 0 / auto 32px no-repeat; animation: ib-stone 2.67s steps(16) infinite; }
@keyframes ib-stone { to { background-position-x: -512px; } }
@media (max-width: 1000px) { .stn-body.inv, .stn-body.up, .stn-body.up { grid-template-columns: 1fr; } .stn-help { grid-template-columns: 1fr; } }
.of-chips.of-pets { max-height: 236px; overflow-y: auto; align-content: flex-start; padding-right: 4px; } /* 42 pets: rolagem */

/* ===== Recompensa diária (Reward Shrine) ===== */
#win-sys-daily.dr-win { width: min(820px, calc(100vw - 32px)) !important; max-width: none !important; }
.dr-win .win-body { display: grid; gap: 12px; padding: 12px 14px; max-height: min(720px, calc(100vh - 110px)); overflow: auto;
  background: radial-gradient(120% 80% at 20% 0%, rgba(120, 70, 20, .25), transparent 60%), #100c0a; }
.dr-win h4 { margin: 0 0 8px; font: 700 12.5px "Cinzel", Georgia, serif; color: #ffe3a0; letter-spacing: .08em; text-transform: uppercase; }
.dr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-tabs { display: flex; gap: 6px; }
.dr-tabs button { padding: 6px 14px; border-radius: 8px; border: 1px solid #4a3622; background: rgba(20, 14, 10, .8); color: #c9b59a; font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.dr-tabs button.on { color: #ffe3a0; border-color: #c9a25a; box-shadow: 0 0 10px rgba(201, 162, 90, .25); }
.dr-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.dr-pills span { padding: 4px 10px; border-radius: 12px; border: 1px solid #4a3622; background: rgba(20, 14, 10, .85); font: 600 12px Inter, sans-serif; color: #e8dcc8; }
.dr-pills b { color: #ffd98a; }
.dr-pills .vip { border-color: #c9a25a; color: #ffd98a; }
.dr-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dr-day { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; border: 1px solid #4a3622;
  background: linear-gradient(180deg, rgba(40, 28, 18, .8), rgba(16, 11, 8, .9)); text-align: center; }
.dr-day small { font: 700 10.5px Inter, sans-serif; color: #b8a487; text-transform: uppercase; letter-spacing: .05em; }
.dr-day b { font: 800 14px Inter, sans-serif; color: #fff1d0; }
.dr-day em { font: 500 10.5px Inter, sans-serif; color: #c9b59a; font-style: normal; min-height: 26px; }
.dr-fp { font: 600 10px Inter, sans-serif; color: #8f7f6a; }
.dr-day.cur { border-color: #ffb43c; box-shadow: 0 0 14px rgba(255, 180, 60, .45); background: linear-gradient(180deg, rgba(80, 52, 20, .9), rgba(24, 16, 10, .95)); }
.dr-day.done { opacity: .55; }
.dr-check { position: absolute; top: 4px; right: 6px; color: #7fe07a; font-style: normal; font-weight: 900; }
.dr-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(0, 0, 0, .35); }
.dr-ic img { image-rendering: pixelated; }
.dr-main { display: grid; grid-template-columns: 1fr 240px; gap: 12px; }
.dr-claim, .dr-done, .dr-streak, .dr-hist { border: 1px solid #4a3622; border-radius: 10px; background: rgba(20, 14, 10, .85); padding: 10px 12px; }
.dr-claim p, .dr-done p { margin: 0 0 8px; font: 500 12.5px Inter, sans-serif; color: #e8dcc8; }
.dr-done b { font: 700 14px Inter, sans-serif; color: #9cf0b0; }
.dr-cd { color: #ffd98a; font-weight: 800; }
.dr-warn { color: #ff9b7a !important; }
.dr-hint { font: 500 11.5px Inter, sans-serif !important; color: #9f8f78 !important; margin: 8px 0 0 !important; }
.dr-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; }
.dr-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 6px; border-radius: 8px; border: 1px solid #3a2a1c; background: rgba(0, 0, 0, .25); }
.dr-item.on { border-color: #c9a25a; }
.dr-item canvas { grid-row: 1 / 3; }
.dr-item span { font: 600 11.5px Inter, sans-serif; color: #e8dcc8; }
.dr-qty { display: flex; align-items: center; gap: 6px; }
.dr-qty button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #6a5426; background: #1a120c; color: #ffd98a; font-weight: 800; cursor: pointer; }
.dr-qty b { min-width: 16px; text-align: center; color: #fff1d0; font: 800 12.5px Inter, sans-serif; }
.dr-prey { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dr-prey img { width: 48px; height: 48px; image-rendering: pixelated; }
.dr-go { display: block; margin-top: 8px; min-width: 220px; }
.dr-go:disabled { opacity: .45; cursor: not-allowed; }
.dr-streak ol { margin: 0; padding-left: 18px; }
.dr-streak li { font: 500 11.5px Inter, sans-serif; color: #8f7f6a; margin-bottom: 5px; }
.dr-streak li.on { color: #ffd98a; }
.dr-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dr-hist li { display: grid; grid-template-columns: 110px 100px 1fr; gap: 8px; font: 500 12px Inter, sans-serif; color: #e8dcc8; border-bottom: 1px dashed rgba(201, 162, 90, .2); padding: 3px 0; }
.dr-hist li span { color: #9f8f78; } .dr-hist li b { color: #ffd98a; } .dr-hist li em { font-style: normal; }
@media (max-width: 760px) { .dr-track { grid-template-columns: repeat(4, 1fr); } .dr-main { grid-template-columns: 1fr; } }
.dr-train { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(201, 162, 90, .3); }
.dr-train p { margin: 0 0 8px; }
.dr-item span small { display: block; font: 500 10.5px Inter, sans-serif; color: #9cf0b0; }

/* Store: baú animado (ui/store-chest.png, 18 quadros de 64px, 6 por segundo); o --img do botão é o 1º quadro
   (brilho e reflexo seguem o formato) */
.tb-btn.store .tb-ico { background: none; }
.tb-btn.store .tb-anim { position: absolute; top: 0; left: 50%; width: calc(51 * var(--t)); height: calc(51 * var(--t)); transform: translateX(-50%);
  background: url(/ui/store-chest.png?v=1) 0 0 / auto 100% no-repeat; animation: tb-chest 3s steps(18) infinite; pointer-events: none; }
@keyframes tb-chest { to { background-position-x: calc(-18 * 51 * var(--t)); } }
/* Store Inbox: a Store Bag animada (ui/store-bag.png, 17 quadros) */
.ib-inbox-anim { width: 32px; height: 32px; background: url(/ui/store-bag.png?v=1) 0 0 / auto 32px no-repeat; animation: ib-inbox 2.83s steps(17) infinite; }
@keyframes ib-inbox { to { background-position-x: -544px; } }

/* atalhos Boss/Stone/Inbox: saíram da linha do Inventário e ficam nos primeiros espaços da mochila principal */
#inv-bags { display: none; }
.container-grid .ib { width: 42px; height: 42px; margin: 0; }

/* ===================== Auto Chess dos Pets (fliperama) ===================== */
#win-sys-chess.ac-win { width: auto !important; max-width: none !important; }
#win-sys-chess .win-body { position: relative; padding: 10px 12px; max-height: none; overflow: hidden; display: block;
  background: radial-gradient(ellipse at 50% 30%, rgba(90, 30, 20, .35), transparent 70%), linear-gradient(180deg, #1a1311, #120d0c); }
/* o jogo é montado num quadro de largura fixa e escalado para caber inteiro na tela (chess.ts: fit) */
.ac-fit { position: relative; overflow: hidden; }
.ac-fit-in { position: relative; width: 960px; display: grid; gap: 8px; transform-origin: 0 0; }
.ac-start { display: grid; justify-items: center; gap: 10px; padding: 18px 10px 10px; text-align: center; }
.ac-logo { font: 900 34px "Cinzel", Georgia, serif; letter-spacing: .12em; color: #ffcf6a; text-shadow: 0 0 18px rgba(255, 120, 30, .6), 0 2px 0 #5a1a0c; }
.ac-logo span { display: block; font-size: 15px; letter-spacing: .4em; color: #ff8a5a; }
.ac-start p { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.ac-start ul { margin: 4px 0; padding: 10px 14px 10px 30px; text-align: left; font-size: 12.5px; color: var(--muted); line-height: 1.6;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 8px; }
.ac-start ul b { color: #ffe0a0; }
.ac-stam { font-size: 12px; color: var(--muted); }
.ac-btn { position: relative; padding: 7px 12px; border-radius: 7px; border: 1px solid #8a5a2b; cursor: pointer; color: #ffe8c0;
  font: 700 12.5px Inter, sans-serif; background: linear-gradient(180deg, #5b3418, #3a200f); box-shadow: inset 0 1px 0 rgba(255, 220, 160, .18); }
.ac-btn:hover { filter: brightness(1.2); }
.ac-bottom .ac-btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.ac-btn em { font-style: normal; margin-left: 6px; color: #ffd24a; white-space: nowrap; display: inline-flex; align-items: center; }
.ac-btn em::before { content: ""; display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; background: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000); }
.ac-btn.big { padding: 11px 26px; font-size: 15px; }
.ac-btn.fight { background: linear-gradient(180deg, #c4361b, #7a1b0c); border-color: #ff7a3c; font-size: 15px; letter-spacing: .06em; min-width: 120px; }
.ac-link { background: none; border: 0; color: var(--muted); font: 12px Inter, sans-serif; cursor: pointer; text-decoration: underline; }
.ac-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ac-round { font: 700 14px "Cinzel", Georgia, serif; color: #ffe3a0; text-align: center; }
.ac-hp { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; font-size: 12px; }
.ac-hp i { font-style: normal; color: var(--muted); }
.ac-hp b { font: 800 18px Inter, sans-serif; color: #ff6a5a; }
.ac-hp.cpu { justify-content: end; }
.ac-hp .bar, .ac-level .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; min-width: 160px; }
.ac-hp .bar span { display: block; height: 100%; background: linear-gradient(90deg, #8a1610, #e0402c); }
.ac-hp.cpu .bar span { background: linear-gradient(90deg, #3a2a8a, #7a5ae0); margin-left: auto; }
.ac-main { position: relative; display: grid; grid-template-columns: 138px 1fr 138px; gap: 8px; align-items: start; }
.ac-main > * { min-width: 0; }
.ac-side { display: grid; gap: 4px; justify-items: center; }
.ac-side h4 { margin: 0; justify-self: start; font: 700 11.5px "Cinzel", Georgia, serif; color: #ffe3a0; letter-spacing: .08em; text-transform: uppercase; }
.ac-traits { display: grid; gap: 4px; align-content: start; }
.ac-traits h4 { margin: 0 0 2px; font: 700 11.5px "Cinzel", Georgia, serif; color: #ffe3a0; letter-spacing: .08em; text-transform: uppercase; }
.ac-trait { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 4px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .3); border: 1px solid #3a2a22; opacity: .7; }
.ac-trait b { grid-row: 1 / 3; display: grid; place-items: center; border-radius: 5px; background: #2b211d; font-size: 13px; color: #cbb59c; }
.ac-trait span { font-size: 12px; font-weight: 700; color: var(--text); }
.ac-trait small { font-size: 10.5px; color: var(--muted); }
.ac-trait.on { opacity: 1; border-color: #9a6a2c; }
.ac-trait.on b { background: linear-gradient(180deg, #b07a2a, #6b4314); color: #fff; }
.ac-trait.on.t2 b { background: linear-gradient(180deg, #c8d0dc, #6c7a8c); }
.ac-trait.on.t3 b { background: linear-gradient(180deg, #ffd85a, #b07a10); color: #3a2400; }
.ac-empty { margin: 0; font-size: 11.5px; color: var(--muted); }
.ac-center { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; }
/* banco, itens e sinergias ficam por cima do brilho/clima da arena (nada passa por baixo deles) */
.ac-main > :not(.ac-center) { position: relative; z-index: 3; }
.ac-bench, .ac-items { background: rgba(14, 10, 9, .88) !important; }
.ac-items { padding: 4px; border-radius: 8px; border: 1px solid var(--line); }
.ac-board { position: relative; margin: 0 auto; background: center / 100% 100% no-repeat; }
/* casas invisíveis: só aparecem (de leve) no seu lado enquanto você arrasta um pet */
.ac-hex { position: absolute; width: 50px; height: 34px; margin: -17px 0 0 -25px; border-radius: 50%; }
.ac-dragging .ac-board .ac-unit { pointer-events: none; }
.ac-dragging .ac-hex.mine { background: rgba(255, 220, 150, .1); box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .28); }
.ac-dragging .ac-hex.mine.over { background: rgba(255, 190, 80, .45); box-shadow: inset 0 0 0 1px #ffd27a; }
.ac-hex > .ac-unit { position: absolute; left: -3px; right: -3px; bottom: 50%; height: 60px; margin-bottom: -4px; }
.ac-hex > .ac-unit::before, .ac-funit::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 10px; transform: translate(-50%, 40%);
  border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .5), transparent 70%); pointer-events: none; }
.ac-unit { display: grid; place-items: end center; cursor: grab; }
.ac-unit .ac-pet { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 210px; height: 124px; pointer-events: none;
  filter: drop-shadow(0 0 3px var(--cc, #000)); }
.ac-unit.dragging { opacity: .4; }
.ac-star { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-size: 10px; letter-spacing: -1px; color: #c9c9c9; text-shadow: 0 1px 2px #000; pointer-events: none; }
.ac-star.s2 { color: #e0e6f0; } .ac-star.s3 { color: #ffd34a; }
.ac-cap { position: absolute; z-index: 30; right: 0; bottom: -2px; font: 700 11px Inter, sans-serif; color: #cfe8c0; background: rgba(0, 0, 0, .55); padding: 2px 6px; border-radius: 5px; }
.ac-cap.full { color: #ffd24a; }
.ac-enemy-lab { position: absolute; z-index: 30; left: 0; top: -2px; font-size: 10.5px; color: #b9a8ff; background: rgba(0, 0, 0, .5); padding: 1px 6px; border-radius: 4px; }
.ac-bench { display: grid; grid-template-columns: repeat(2, 60px); gap: 4px; padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.ac-bslot { position: relative; height: 58px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px dashed #4a3326; }
.ac-bslot.over { background: rgba(255, 190, 80, .35); }
.ac-bslot > .ac-unit { position: absolute; inset: 0; }
.ac-bslot .ac-pet { width: 147px; height: 87px; }
.ac-bottom { display: grid; grid-template-columns: 120px 1fr 132px; gap: 8px; align-items: stretch; }
.ac-stats { display: grid; gap: 4px; align-content: center; }
.ac-gold { font: 800 20px Inter, sans-serif; color: #ffd24a; }
.ac-gold::before { content: ""; display: inline-block; width: 20px; height: 20px; vertical-align: -3px; margin-right: 5px; background: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000); }
.ac-level b { font-size: 12.5px; }
.ac-level small { font-size: 10.5px; color: var(--muted); }
.ac-level .bar { min-width: 0; margin: 3px 0 1px; }
.ac-level .bar span { display: block; height: 100%; background: linear-gradient(90deg, #2a6ad0, #6ab0ff); }
.ac-odds { display: flex; flex-wrap: wrap; gap: 0 4px; font: 700 10.5px Inter, sans-serif; }
.ac-shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 4px; border-radius: 8px; border: 1px solid transparent; }
.ac-shop.sell { border-color: #ffd24a; background: rgba(255, 200, 60, .15); }
.ac-shop.sell::after { content: "Soltar para vender"; position: absolute; }
.ac-card { position: relative; display: grid; grid-template-rows: 60px auto auto; overflow: hidden; padding: 3px 3px 5px; border-radius: 8px; cursor: pointer; color: var(--text);
  border: 2px solid var(--cc, #555); background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .55)), #241b17; text-align: center; }
.ac-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 10px var(--cc); }
.ac-card.empty { cursor: default; opacity: .25; border-style: dashed; border-color: #4a3326; }
.ac-card.poor { opacity: .55; }
.ac-card-art { position: relative; }
.ac-card-art .ac-pet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 84px; height: 60px; }
.ac-card-name { font: 700 11px Inter, sans-serif; line-height: 1.15; }
.ac-card-tr { font-size: 9.5px; color: var(--muted); }
.ac-card-cost { position: absolute; top: 2px; right: 4px; font: 800 12px Inter, sans-serif; color: #ffd24a; }
.ac-card-cost::before { content: ""; display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; background: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000); }
.ac-owned { position: absolute; top: 2px; left: 4px; font: 800 10px Inter, sans-serif; font-style: normal; color: #b6ffc6; background: rgba(20, 90, 40, .85); padding: 0 4px; border-radius: 4px; }
.ac-owned.up { color: #3a2400; background: linear-gradient(180deg, #ffe680, #e0a020); }
/* loja: pets que você já tem brilham em verde; os que fundem ao comprar pulsam em dourado */
.ac-card.owned { border-color: #6cf08a !important; box-shadow: 0 0 0 1px #6cf08a, 0 0 12px rgba(108, 240, 138, .55); }
.ac-card.merge { border-color: #ffd24a !important; animation: ac-merge 1.1s ease-in-out infinite; }
@keyframes ac-merge { 0%, 100% { box-shadow: 0 0 0 1px #ffd24a, 0 0 8px rgba(255, 200, 60, .45); } 50% { box-shadow: 0 0 0 2px #ffe680, 0 0 20px rgba(255, 200, 60, .9); } }
.ac-actions { display: grid; gap: 5px; align-content: center; }
.ac-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--muted); }
.ac-funit { position: absolute; width: 50px; height: 60px; margin: -56px 0 0 -25px; transition: left calc(.42s / var(--spd, 1)) linear, top calc(.42s / var(--spd, 1)) linear, opacity .5s; pointer-events: none; }
.ac-speed b { margin-left: 4px; color: #ffd24a; }
.ac-speed.on { border-color: #ffd24a; box-shadow: 0 0 8px rgba(255, 200, 60, .45); }
.ac-funit .ac-pet { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 210px; height: 124px; }
.ac-funit.dying .ac-bars, .ac-funit.dying .ac-star { opacity: 0; }
/* efeitos e projéteis da luta */
.ac-fx { position: absolute; z-index: 45; pointer-events: none; image-rendering: pixelated; }
.ac-fx.proj { z-index: 46; }
/* ★2 prateado e ★3 dourado (com aura no chão): maiores e com brilho, no campo, no banco e na luta */
#win-sys-chess .ac-unit.st2 .ac-pet, #win-sys-chess .ac-funit.st2 .ac-pet { filter: drop-shadow(0 0 2px #e6ecf8) drop-shadow(0 0 4px rgba(200, 215, 255, .6)); }
#win-sys-chess .ac-unit.st3 .ac-pet, #win-sys-chess .ac-funit.st3 .ac-pet { filter: drop-shadow(0 0 2px #ffe27a) drop-shadow(0 0 7px rgba(255, 190, 40, .85)); animation: ac-gold 1.6s ease-in-out infinite; }
@keyframes ac-gold { 50% { filter: drop-shadow(0 0 3px #fff2b0) drop-shadow(0 0 12px rgba(255, 200, 60, 1)); } }
.ac-unit.st3::after, .ac-funit.st3::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 46px; height: 14px; transform: translate(-50%, 45%);
  border-radius: 50%; border: 2px solid rgba(255, 210, 74, .9); box-shadow: 0 0 10px rgba(255, 200, 60, .8), inset 0 0 8px rgba(255, 200, 60, .6); pointer-events: none; animation: ac-ring 1.6s ease-in-out infinite; }
@keyframes ac-ring { 50% { transform: translate(-50%, 45%) scale(1.15); opacity: .7; } }
.ac-funit.st3 .ac-star, .ac-unit.st3 .ac-star { color: #ffd34a; text-shadow: 0 0 6px #ffb020, 0 1px 2px #000; font-size: 12px; }
/* fusão: a peça nova pisca e as estrelas sobem */
#win-sys-chess .ac-levelup .ac-pet { animation: ac-lvl 1.2s ease-out; }
@keyframes ac-lvl { 0% { filter: brightness(3) drop-shadow(0 0 12px #fff); } 100% { filter: none; } }
.ac-burst { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); font: 900 18px Inter, sans-serif; color: #e6ecf8; text-shadow: 0 0 8px #fff, 0 2px 2px #000;
  pointer-events: none; animation: ac-burst 1.5s ease-out forwards; z-index: 50; white-space: nowrap; }
.ac-burst.s3 { color: #ffd34a; text-shadow: 0 0 10px #ffb020, 0 2px 2px #000; font-size: 22px; }
@keyframes ac-burst { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1); } }
/* passar o mouse numa sinergia: as peças dela brilham e as outras apagam */
.ac-hl .ac-unit[data-w]:not(.hl) { opacity: .3; filter: grayscale(.85); }
#win-sys-chess .ac-unit.hl .ac-pet { filter: drop-shadow(0 0 2px #fff4c0) drop-shadow(0 0 6px #ffb02a) !important; }
.ac-unit.hl::before { background: radial-gradient(rgba(255, 200, 60, .75), transparent 70%) !important; }
.ac-trait[data-code] { cursor: help; }
.ac-funit.side1 .ac-pet { filter: drop-shadow(0 0 2px #ff7a3c); }
.ac-funit.side2 .ac-pet { filter: drop-shadow(0 0 2px #8a6aff); }
.ac-funit.dead { opacity: 0; }
.ac-funit.casting .ac-pet { filter: drop-shadow(0 0 8px #ffe066) brightness(1.4); }
.ac-funit.stunned::after { content: "✦✦"; position: absolute; left: 50%; top: -6px; transform: translateX(-50%); color: #ffe066; font-size: 11px; }
.ac-funit.shielded .ac-bars .hp { box-shadow: 0 0 0 1px #9fd8ff; }
.ac-bars { position: absolute; left: 8px; right: 8px; top: auto; bottom: calc(var(--bh, 44px) + 8px); display: grid; gap: 1px; z-index: 3; }
.ac-bars i { display: block; height: 4px; background: rgba(0, 0, 0, .7); border-radius: 2px; overflow: hidden; }
.ac-bars i.mp { height: 3px; }
.ac-bars span { display: block; height: 100%; transition: width .2s; }
.side1 .ac-bars .hp span { background: #46d05a; }
.side2 .ac-bars .hp span { background: #e0402c; }
.ac-bars .mp span { background: #4a9aff; }
.ac-float { position: absolute; left: 50%; top: auto; bottom: calc(var(--bh, 44px) + 18px); transform: translateX(-50%); font: 800 12px Inter, sans-serif; text-shadow: 0 1px 2px #000, 0 0 2px #000;
  animation: ac-float .9s ease-out forwards; white-space: nowrap; z-index: 3; }
.ac-float.dmg { color: #fff; } .ac-float.crit { color: #ffcf3a; font-size: 14px; } .ac-float.abdmg { color: #ff8a3a; font-size: 13px; }
.ac-float.heal { color: #6cf08a; } .ac-float.shield { color: #9fd8ff; } .ac-float.ab { color: #ffe9a0; font-size: 11px; bottom: calc(var(--bh, 44px) + 32px); }
@keyframes ac-float { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -22px); } }
.ac-fightbar { display: flex; justify-content: center; }
.ac-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; gap: 2px; text-align: center; padding: 12px 26px; border-radius: 10px;
  background: rgba(10, 6, 5, .88); border: 2px solid #8a5a2b; animation: ac-pop .3s ease-out; z-index: 50; }
.ac-banner b { font: 800 20px "Cinzel", Georgia, serif; }
.ac-banner.win b { color: #ffd24a; } .ac-banner.lose b { color: #ff5a4a; } .ac-banner span { font-size: 12.5px; color: var(--text); }
@keyframes ac-pop { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }
.ac-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .6); z-index: 60; }
.ac-over-box { display: grid; justify-items: center; gap: 8px; padding: 20px 34px; border-radius: 12px; background: #1d1412; border: 2px solid #6a3a2a; text-align: center; }
.ac-over-box h3 { margin: 0; font: 900 26px "Cinzel", Georgia, serif; color: #ff6a5a; }
.ac-over-box.win h3 { color: #ffd24a; text-shadow: 0 0 14px rgba(255, 190, 40, .6); }
.ac-over-box p { margin: 0; font-size: 13px; }

/* ===== Auto Chess: itens, loja trancada e guia ===== */
.ac-guide-btn { margin-left: 8px; padding: 2px 8px; border-radius: 6px; border: 1px solid #8a5a2b; background: linear-gradient(180deg, #4a2a18, #2a170d);
  color: #ffe3a0; font: 700 11px Inter, sans-serif; cursor: pointer; vertical-align: middle; }
.ac-guide-btn:hover { filter: brightness(1.25); }
.ac-lock { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; border: 1px solid #5a3a22; background: rgba(0, 0, 0, .3);
  color: #e6d2b0; font: 600 11.5px Inter, sans-serif; cursor: pointer; user-select: none; }
.ac-lock input { margin: 0; accent-color: #ffd24a; cursor: pointer; }
.ac-lock.on { border-color: #ffd24a; color: #ffd24a; background: rgba(255, 200, 60, .12); box-shadow: 0 0 8px rgba(255, 200, 60, .3); }
.ac-items-h { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-top: 6px !important; cursor: help; }
.ac-items-h small { font: 600 10px Inter, sans-serif; color: var(--muted); letter-spacing: 0; text-transform: none; }
.ac-items { display: grid; grid-template-columns: repeat(4, 30px); gap: 3px; }
.ac-islot { width: 30px; height: 30px; border-radius: 5px; background: rgba(255, 255, 255, .04); border: 1px dashed #4a3326; display: grid; place-items: center; }
.ac-item { display: inline-grid; place-items: center; border-radius: 4px; line-height: 0; }
.ac-item canvas { image-rendering: pixelated; }
.ac-islot .ac-item { width: 28px; height: 28px; cursor: grab; background: radial-gradient(rgba(255, 255, 255, .08), transparent 70%); }
.ac-islot .ac-item.full { box-shadow: inset 0 0 0 1px #ffd24a, 0 0 6px rgba(255, 200, 60, .45); }
.ac-item.dragging { opacity: .4; }
.ac-itemdrag .ac-board .ac-unit, .ac-itemdrag .ac-bench .ac-unit { pointer-events: none; }
.ac-itemdrag .ac-hex.mine:has(.ac-unit) { background: rgba(255, 210, 74, .14); box-shadow: inset 0 0 0 1px rgba(255, 210, 74, .45); }
.ac-itemdrag .ac-hex.over, .ac-itemdrag .ac-bslot.over { background: rgba(255, 190, 80, .45) !important; }
.ac-unit-items { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); display: flex; gap: 1px; pointer-events: none; z-index: 2; }
.ac-unit-items .ac-item { width: 15px; height: 15px; background: rgba(10, 6, 5, .85); border: 1px solid #6a4a2a; border-radius: 3px; }
.ac-unit-items .ac-item.full { border-color: #ffd24a; }
.ac-funit .ac-unit-items { bottom: -13px; }
.ac-bslot .ac-unit-items { bottom: 1px; }
/* guia */
.ac-guide { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.ac-guide-box { width: min(860px, calc(100% - 24px)); max-height: calc(100% - 24px); display: grid; grid-template-rows: auto 1fr; border-radius: 10px;
  background: #1a1210; border: 2px solid #6a3a2a; box-shadow: 0 10px 40px rgba(0, 0, 0, .7); overflow: hidden; }
.ac-guide-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #3a2418; background: linear-gradient(180deg, #2a1a12, #1a1210); }
.ac-guide-head > b { font: 800 15px "Cinzel", Georgia, serif; color: #ffe3a0; }
.ac-guide-head nav { display: flex; gap: 4px; margin-left: auto; }
.ac-guide-head nav button { padding: 4px 12px; border-radius: 6px; border: 1px solid #5a3a22; background: rgba(0, 0, 0, .3); color: #d8c4a4; font: 700 12px Inter, sans-serif; cursor: pointer; }
.ac-guide-head nav button.on { border-color: #ffd24a; color: #ffd24a; background: rgba(255, 200, 60, .12); }
.ac-guide-x { border: 0; background: none; color: #d8c4a4; font-size: 16px; cursor: pointer; }
.ac-guide-body { overflow: auto; padding: 10px 14px 14px; color: var(--text); font-size: 12.5px; }
.ac-guide-body h5 { margin: 6px 0 6px; font: 700 12px "Cinzel", Georgia, serif; color: #ffe3a0; letter-spacing: .08em; text-transform: uppercase; }
.ac-ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ac-gtrait { padding: 7px 9px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid #3a2a20; }
.ac-gtrait-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ac-gtrait-h b { color: #ffd9a0; font-size: 13px; }
.ac-gtrait-h span { font-size: 11px; color: var(--muted); }
.ac-gtrait-h i { font-style: normal; display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 4px; background: #6b4314; color: #fff; font-weight: 800; font-size: 10.5px; }
.ac-gtrait p { margin: 4px 0 6px; font-size: 11.5px; color: #cdbb9f; }
.ac-gpets { display: flex; flex-wrap: wrap; gap: 3px; }
.ac-gpet { padding: 1px 6px; border-radius: 4px; border: 1px solid var(--cc); font-size: 10.5px; color: #eee; background: rgba(0, 0, 0, .35); cursor: help; }
.ac-gpet em { font-style: normal; color: #ffd24a; margin-left: 2px; }
.ac-gnote { margin: 8px 0; font-size: 11.5px; color: var(--muted); }
.ac-gtable { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.ac-gtable table { border-collapse: separate; border-spacing: 3px; }
.ac-gtable th, .ac-gtable td { width: 40px; height: 40px; text-align: center; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.ac-gtable th { background: rgba(110, 70, 30, .35); }
.ac-gtable td .ac-item { box-shadow: 0 0 6px rgba(255, 200, 60, .35); }
.ac-glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px; }
.ac-gitem { display: grid; grid-template-columns: 32px 1fr; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.ac-gitem b { display: block; font-size: 11.5px; color: #ffd9a0; }
.ac-gitem small { font-size: 10.5px; color: #cdbb9f; }
.ac-grules { margin: 0; padding-left: 18px; line-height: 1.7; font-size: 12.5px; }
.ac-grules b { color: #ffe3a0; }
.ac-funit.stunned::after { top: auto !important; bottom: calc(var(--bh, 44px) + 2px); }

/* ===== informativo "Enquanto você esteve fora" (systems/offline.ts) ===== */
#win-sys-offline.off-win { width: min(440px, calc(100vw - 24px)) !important; }
#win-sys-offline .win-body { display: grid; gap: 10px; padding: 12px 14px 14px; max-height: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(120, 40, 20, .35), transparent 70%), linear-gradient(180deg, #1a1311, #120d0c); }
.off-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.off-kind { font: 800 15px "Cinzel", Georgia, serif; color: #ffcf6a; letter-spacing: .04em; }
.off-time { font: 600 12px Inter, sans-serif; color: var(--muted); }
.off-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.off-stats > div { display: grid; justify-items: center; padding: 6px 4px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid #3a2a20; }
.off-stats b { font: 800 16px Inter, sans-serif; color: #ffe0a0; }
.off-stats span { font-size: 10.5px; color: var(--muted); }
.off-rows { display: grid; gap: 9px; }
.off-row-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.off-row-h b { color: #ffd9a0; }
.off-row-h span { color: var(--text); }
.off-row-h strong { color: #6cf08a; }
.off-row-h small { color: var(--muted); font-size: 10.5px; }
.off-bar { position: relative; height: 12px; margin-top: 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); border: 1px solid #3a2a20; overflow: hidden; }
.off-bar i { position: absolute; top: 0; bottom: 0; }
.off-bar i.old { left: 0; background: linear-gradient(180deg, #5a4a3a, #3a2e24); }
.off-bar i.new { background: linear-gradient(90deg, #2fae4a, #6cf08a); box-shadow: 0 0 8px rgba(108, 240, 138, .6); transform-origin: left; transform: scaleX(0); transition: transform 1.1s ease-out .15s; }
#win-sys-offline.show .off-bar i.new { transform: scaleX(1); }
.off-gain { margin-top: 3px; font: 700 11.5px Inter, sans-serif; color: #6cf08a; }
.off-up { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: linear-gradient(180deg, #ffe680, #e0a020); color: #3a2400; }
.off-none { margin: 0; font-size: 12px; color: var(--muted); }
.off-foot { display: flex; justify-content: center; }
.off-ok { padding: 7px 26px; border-radius: 7px; border: 1px solid #8a5a2b; background: linear-gradient(180deg, #6a3a1e, #3a1f10); color: #ffe8c0; font: 700 13px Inter, sans-serif; cursor: pointer; }
.off-ok:hover { filter: brightness(1.2); }

/* Auto Chess numa tela própria, por cima do jogo e fora da camada das janelas (não mexe na HUD) */
#ac-overlay { position: fixed; inset: 0; z-index: 15000; display: grid; place-items: center; background: rgba(6, 4, 3, .62); backdrop-filter: blur(1.5px); }
#ac-overlay > #win-sys-chess { position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 0; }
#ac-overlay > #win-sys-chess .win-head { cursor: default; }
.ac-speed.locked { border-color: #6a4a2a; color: #d8c4a4; background: linear-gradient(180deg, #2a1d14, #1a120c); }
.ac-speed.locked em { color: #ffd24a; }
.ac-speed.locked em::before { content: ""; }

/* ===== Auto Chess: ambiente das arenas (neon, luz na borda, clima e fundo) ===== */
@property --ac-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ac-arena-img { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: center / 100% 100% no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 7px var(--neon)) drop-shadow(0 0 14px var(--glow)); animation: ac-neon 2.4s ease-in-out infinite; }
@keyframes ac-neon { 50% { filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 18px var(--glow)); } }
.ac-arena-ring { position: absolute; inset: -6px; z-index: 1; pointer-events: none; border-radius: 50%; mix-blend-mode: screen;
  background: conic-gradient(from var(--ac-a), transparent 0deg, transparent 270deg, var(--neon) 325deg, #fff 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(ellipse at center, transparent 64%, #000 68%, #000 71%, transparent 75%);
  mask: radial-gradient(ellipse at center, transparent 64%, #000 68%, #000 71%, transparent 75%);
  filter: blur(2px) drop-shadow(0 0 8px var(--neon)); animation: ac-spin 6s linear infinite; }
@keyframes ac-spin { to { --ac-a: 360deg; } }
.ac-weather { position: absolute; left: -60px; top: -60px; z-index: 48; pointer-events: none; }
.ac-env-btn { opacity: .55; }
.ac-env-btn.on { opacity: 1; border-color: #ffd24a; color: #ffd24a; box-shadow: 0 0 8px rgba(255, 200, 60, .35); }
/* fundo do Auto Chess: por enquanto o mesmo em todas as arenas (bg_padrao.gif, animado, enviado pelo dono do jogo).
   Os fundos por tema de sala continuam em /ui/chess/bg/bg_*.png (tools/gen_chess_bg.py) para quando voltarem. */
#win-sys-chess[data-sky] .win-body { image-rendering: pixelated; background-color: #2a0c55; background-repeat: no-repeat;
  background-position: center, center bottom; background-size: 100% 100%, cover;
  background-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35) 85%), url(/ui/chess/bg/bg_padrao.gif?v=2); }
/* efeitos desligados */
#win-sys-chess.ac-noenv .ac-arena-ring, #win-sys-chess.ac-noenv .ac-weather { display: none; }
#win-sys-chess.ac-noenv .ac-arena-img { filter: none; animation: none; }
#win-sys-chess.ac-noenv[data-sky] .win-body { background: radial-gradient(ellipse at 50% 30%, rgba(90, 30, 20, .35), transparent 70%), linear-gradient(180deg, #1a1311, #120d0c); }
.ac-coin { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 800; color: #ffd24a; }
.ac-coin img { width: 20px; height: 20px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000); }
.ac-speed { white-space: nowrap; }

/* ===== Blood Coin: ícone da moeda e brilho passando (igual ao da Loot Pouch, em dourado) ===== */
.bcoin { display: inline-block; position: relative; width: 1.15em; height: 1.15em; vertical-align: -.22em; overflow: hidden;
  background: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; image-rendering: pixelated; animation: bcoin-glow 2.4s ease-in-out infinite; }
.bcoin::before, .bcoin-shine::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 236, 170, .55) 45%, rgba(255, 255, 255, .95) 50%, rgba(255, 236, 170, .55) 55%, transparent 62% 100%) no-repeat;
  background-size: 300% 100%; mix-blend-mode: screen; animation: pouch-sweep 2.4s ease-in-out infinite;
  -webkit-mask: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; mask: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; }
.bcoin-shine::after { content: ""; position: absolute; top: 8%; right: 10%; width: 28%; height: 28%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 230, 150, .9) 30%, transparent 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; animation: pouch-spark 2.4s ease-in-out infinite; }
.bcoin-shine { position: relative; display: inline-block; line-height: 0; animation: bcoin-glow 2.4s ease-in-out infinite; }
.bcoin-shine > canvas, .bcoin-shine > img { display: block; }
.bcoin-glow { animation: bcoin-glow 2.4s ease-in-out infinite; }
@keyframes bcoin-glow { 0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 190, 60, .55)); } 50% { filter: drop-shadow(0 0 4px rgba(255, 200, 70, .95)) brightness(1.12); } }
body.perf-mode .bcoin, body.perf-mode .bcoin-shine, body.perf-mode .bcoin-glow { animation: bcoin-glow 2.4s ease-in-out infinite !important; }
body.perf-mode .bcoin::before, body.perf-mode .bcoin-shine::before { animation: pouch-sweep 2.4s ease-in-out infinite !important; }
/* tamanhos nos lugares que já existiam */
.st-coin.bcoin { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.st-coin.bcoin.big { width: 30px; height: 30px; }
.bz-coins i { background: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat !important; border-radius: 0 !important; box-shadow: none !important; width: 22px !important; height: 22px !important;
  image-rendering: pixelated; animation: bcoin-glow 2.4s ease-in-out infinite; }
.bz-price .bcoin, .bz-buy .bcoin { font-style: normal; width: 16px; height: 16px; margin-left: 3px; }
.ac-coin .bcoin { width: 20px; height: 20px; vertical-align: -5px; }
.tb-points::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; background: url(/ui/coin/blood_coin.png?v=1) center / contain no-repeat; image-rendering: pixelated; }
/* Auto Chess: aviso de conexão encerrada (o servidor caiu / internet caiu) */
#win-sys-chess .ac-lost { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(4, 2, 2, .78); backdrop-filter: blur(2px); border-radius: inherit; }
.ac-lost-box { display: grid; justify-items: center; gap: 10px; padding: 26px 40px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #2a1412, #160b0a); border: 2px solid #8a2a22; box-shadow: 0 0 30px rgba(255, 60, 40, .35), inset 0 1px 0 rgba(255, 200, 160, .12); }
.ac-lost-box h3 { margin: 0; font: 900 30px "Cinzel", Georgia, serif; color: #ff5a4a; letter-spacing: .06em; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 70, 50, .55); }
.ac-lost-box p { margin: 0; font: 600 14px Inter, sans-serif; color: #f0dcc8; line-height: 1.45; }
.ac-lost-box small { font: 500 11.5px ui-monospace, Consolas, monospace; color: #b89a86; }

/* ---------- Sistema de Afixos (Altar das Estrelas): Fusão de Estrelas e Transferir Afixo ---------- */
#win-sys-afixos.afx-win { width: min(1040px, calc(100vw - 32px)) !important; max-width: none !important; }
.afx-win .win-body { padding: 0 !important; background: radial-gradient(ellipse at 50% 0%, #2a1712 0%, #140d0b 70%); color: #e9dcc8; font-family: Inter, sans-serif; }
.afx-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 10px 14px 0; border-bottom: 1px solid #4a3020; }
.afx-tabs { display: flex; gap: 4px; }
.afx-tab { padding: 8px 14px; border-radius: 8px 8px 0 0; font: 700 13px Inter, sans-serif; border: 1px solid #4a3020; border-bottom: none; background: #170f0c; color: #a8957f; cursor: pointer; }
.afx-tab.on { background: #2a1c15; color: #ffd27a; }
.afx-tab:focus-visible, .afx-btn:focus-visible, .afx-cell:focus-visible, .afx-slot:focus-visible, .afx-aff-btn:focus-visible, .afx-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.afx-gold { padding-bottom: 8px; font-size: 13px; color: #c9b597; } .afx-gold b { color: #ffd24a; }
.afx-main { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; padding: 14px; background: #2a1c15; }
.afx-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.afx-list-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; } .afx-list-head span { color: #a8957f; font-size: 11px; }
.afx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.afx-chip { padding: 3px 7px; border-radius: 6px; border: 1px solid #4a3020; background: #1c130f; color: #c9b597; font: 700 11px Inter, sans-serif; cursor: pointer; }
.afx-chip.on { border-color: #ffd27a; background: #3a2618; } .afx-chip small { color: #8d7a66; font-weight: 600; }
.afx-grid { display: grid; grid-template-columns: repeat(5, 42px); gap: 5px; align-content: start; max-height: 420px; overflow: auto; padding: 2px; }
.afx-cell { position: relative; width: 42px; height: 42px; padding: 0; border-radius: 7px; border: 1px solid #3a261b; background: #1a110d; cursor: pointer; display: grid; place-items: center; }
.afx-cell:hover { border-color: #ffc27a; } .afx-cell.picked { border-color: #ffd27a; box-shadow: 0 0 0 1px #ffd27a, 0 0 10px rgba(255, 200, 100, .5); }
.afx-cell.off { opacity: .3; filter: grayscale(.7); }
.afx-ic { position: relative; display: grid; place-items: center; border-radius: 6px; }
.afx-ic canvas { image-rendering: pixelated; display: block; }
.afx-ic.r1 { box-shadow: inset 0 0 0 1px #4da3ff, inset 0 0 10px rgba(77, 163, 255, .45); }
.afx-ic.r2 { box-shadow: inset 0 0 0 1px #b26bff, inset 0 0 10px rgba(178, 107, 255, .5); }
.afx-ic.r3 { box-shadow: inset 0 0 0 1px #ffc93c, inset 0 0 12px rgba(255, 201, 60, .55); }
.afx-ic.r4 { animation: rar4-pulse 1.8s ease-in-out infinite; }
.afx-tag { position: absolute; top: -5px; left: -3px; font: 800 8px Inter, sans-serif; font-style: normal; padding: 1px 3px; border-radius: 3px; background: #ffd27a; color: #1a0e00; pointer-events: none; z-index: 2; }
.afx-tag.give { background: #ff8a7a; } .afx-tag.take { background: #8fe39b; }
.afx-empty { margin: 8px 0; font-size: 12px; color: #a8957f; line-height: 1.45; }
.afx-help { margin: 0; font-size: 11.5px; color: #a8957f; line-height: 1.45; } .afx-help.bad { color: #ff9a8a; }
.afx-fuse { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.afx-altar { position: relative; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, #3a2418 0%, #1a100c 58%, #120b09 72%); border: 1px solid #4a3020; box-shadow: inset 0 0 60px rgba(0, 0, 0, .7); }
@keyframes afx-spin { to { transform: rotate(360deg); } }
@keyframes afx-spin-back { to { transform: rotate(-360deg); } }
.afx-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.afx-ring.a { inset: 28px; border: 1px dashed rgba(255, 194, 122, .35); animation: afx-spin 40s linear infinite; }
.afx-ring.b { inset: 70px; border: 2px solid rgba(178, 107, 255, .18); animation: afx-spin-back 28s linear infinite; }
.afx-core { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(178, 107, 255, .25), transparent 70%); }
.afx-q { font: 900 34px Cinzel, Georgia, serif; text-shadow: 0 0 12px currentColor; animation: afx-float 2.4s ease-in-out infinite; }
@keyframes afx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.afx-slot { position: absolute; width: 68px; height: 68px; padding: 0; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #2c1f19, #120c0a); border: 1px dashed #5b3a24; display: grid; place-items: center; cursor: pointer; overflow: visible; color: #8d7a66; }
.afx-slot.full { border-style: solid; }
.afx-slot.full .afx-ic { animation: afx-float 2.6s ease-in-out infinite; }
.afx-slot .afx-plus { font: 800 12px Inter, sans-serif; letter-spacing: .06em; }
@keyframes afx-glow1 { 0%, 100% { box-shadow: 0 0 6px rgba(77, 163, 255, .45); } 50% { box-shadow: 0 0 16px rgba(77, 163, 255, .85); } }
@keyframes afx-glow2 { 0%, 100% { box-shadow: 0 0 8px rgba(178, 107, 255, .5); } 50% { box-shadow: 0 0 20px rgba(178, 107, 255, .9); } }
@keyframes afx-glow3 { 0%, 100% { box-shadow: 0 0 8px rgba(255, 201, 60, .5); } 50% { box-shadow: 0 0 22px rgba(255, 201, 60, .9); } }
@keyframes afx-glow4 { 0%, 100% { box-shadow: 0 0 10px rgba(255, 59, 78, .55); } 50% { box-shadow: 0 0 26px rgba(255, 59, 78, .95); } }
.afx-slot.r1 { border-color: #4da3ff; animation: afx-glow1 2.4s ease-in-out infinite; }
.afx-slot.r2 { border-color: #b26bff; animation: afx-glow2 2.4s ease-in-out infinite; }
.afx-slot.r3 { border-color: #ffc93c; animation: afx-glow3 2.4s ease-in-out infinite; }
.afx-slot.r4 { border-color: #ff3b4e; animation: afx-glow4 2.4s ease-in-out infinite; }
@keyframes afx-charge { to { filter: brightness(1.9) saturate(1.4); } }
@keyframes afx-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(240deg); opacity: 0; } }
.afx-altar.charging .afx-slot.full { animation: afx-charge .9s ease-in forwards, afx-glow2 .4s ease-in-out infinite; }
.afx-altar.charging .afx-ring.a { animation-duration: 3s; } .afx-altar.charging .afx-ring.b { animation-duration: 2s; }
.afx-altar.flying .afx-slot { animation: afx-fly .9s cubic-bezier(.55, 0, .8, .4) forwards; }
@keyframes afx-flash { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(2.2); } }
.afx-flash { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0%, var(--c) 30%, transparent 70%); animation: afx-flash .8s ease-out forwards; }
@keyframes afx-ray { 0% { opacity: 0; transform: rotate(var(--a)) scaleY(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) scaleY(1.6); } }
.afx-ray { position: absolute; left: 50%; top: 50%; width: 4px; height: 130px; margin: -130px 0 0 -2px; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(255, 255, 255, .9), transparent); animation: afx-ray .9s ease-out forwards; pointer-events: none; }
@keyframes afx-reveal { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.afx-reveal { animation: afx-reveal .7s cubic-bezier(.2, 1.4, .4, 1) .25s backwards; }
@keyframes afx-star { 0% { opacity: 0; transform: translateY(6px) scale(.4); } 100% { opacity: 1; transform: none; } }
.afx-stars-pop { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 15px; text-shadow: 0 0 8px currentColor, 0 1px 0 #000; }
.afx-stars-pop i { display: inline-block; font-style: normal; animation: afx-star .35s ease-out backwards; }
.afx-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.afx-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 700 11px Inter, sans-serif; }
.afx-step { padding: 3px 7px; border-radius: 6px; border: 1px solid #4a3a2c; color: #8d7a66; }
.afx-step.from { border-color: var(--c); color: var(--c); }
.afx-step.to { border-color: var(--c); color: var(--c); background: rgba(255, 255, 255, .06); box-shadow: 0 0 10px var(--c); }
.afx-arrow { width: 10px; height: 2px; background: #6b5a48; display: inline-block; }
.afx-preview { border: 1px solid #4a3020; border-radius: 10px; background: #1c130f; padding: 12px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.afx-res-head { display: flex; align-items: center; gap: 10px; } .afx-res-head b { display: block; font-size: 14px; } .afx-res-head small { font-size: 12px; }
.afx-res-ic { width: 54px; height: 54px; flex: none; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #2c1f19, #120c0a); display: grid; place-items: center; }
.afx-aff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.afx-aff li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.afx-aff li b { color: #8fe39b; } .afx-aff li s { color: #7d6d5c; font-weight: 400; }
.afx-aff li.rand { border: 1px dashed rgba(178, 107, 255, .5); background: rgba(178, 107, 255, .08); } .afx-aff li.rand b { color: #d1a8ff; }
@keyframes afx-newrow { 0% { background: rgba(255, 255, 255, .55); } 100% { background: rgba(143, 227, 155, .12); } }
.afx-aff li.new { animation: afx-newrow 1.2s ease-out .6s backwards; border: 1px solid #8fe39b; } .afx-aff li.new em { font-style: normal; font-size: 10px; color: #8fe39b; margin-left: 4px; }
.afx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.afx-facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
.afx-facts > div { padding: 7px 9px; border-radius: 8px; background: #1c130f; border: 1px solid #3a261b; } .afx-facts small { display: block; color: #a8957f; font-size: 10.5px; }
.afx-facts b.ok { color: #8fe39b; } .afx-facts b.gold { color: #ffd24a; }
.afx-actions { display: flex; gap: 8px; }
.afx-btn { flex: 1; height: 42px; padding: 0 16px; border-radius: 9px; font: 800 14px Inter, sans-serif; letter-spacing: .06em; color: #2a1200; background: linear-gradient(180deg, #ffd27a, #e08a1e); border: 1px solid #ffdf9e; box-shadow: 0 2px 0 #7a3d08, 0 0 18px rgba(255, 170, 60, .35); cursor: pointer; }
.afx-btn:hover:not(:disabled) { filter: brightness(1.1); } .afx-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.afx-btn.ghost { color: #ffd27a; background: #1d130f; border-color: #6b4528; box-shadow: none; font-size: 12px; letter-spacing: .02em; }
.afx-transfer { display: flex; flex-direction: column; gap: 12px; }
.afx-tr-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.afx-card { border: 1px solid #4a3020; border-radius: 10px; background: #1c130f; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.afx-role { font: 800 10.5px Inter, sans-serif; letter-spacing: .12em; } .afx-card.give .afx-role { color: #ff9a8a; } .afx-card.take .afx-role { color: #8fe39b; }
.afx-aff-btns { display: flex; flex-direction: column; gap: 5px; }
.afx-aff-btn { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 7px; font: 600 12.5px Inter, sans-serif; color: #e9dcc8; background: rgba(255, 255, 255, .03); border: 1px solid #3a261b; cursor: pointer; text-align: left; }
.afx-aff-btn:hover { border-color: #8a6a4a; }
.afx-aff-btn.give.on { border-color: #b26bff; background: rgba(178, 107, 255, .16); } .afx-aff-btn.take.on { border-color: #ff7a6b; background: rgba(255, 90, 70, .12); }
.afx-aff-btn.new { animation: afx-newrow 1.2s ease-out forwards; border-color: #8fe39b; }
.afx-beam { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.afx-beam svg { width: 130px; height: 34px; overflow: visible; } .afx-beam small { font: 700 11px Inter, sans-serif; color: #d1a8ff; }
@keyframes afx-dash { to { stroke-dashoffset: -40; } }
.afx-dash { stroke: #b26bff; stroke-width: 3; stroke-dasharray: 10 10; fill: none; animation: afx-dash 1s linear infinite; }
.afx-head { stroke: #b26bff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes afx-orb { 0% { left: 0; opacity: 0; transform: translateY(-50%) scale(.5); } 15% { opacity: 1; transform: translateY(-50%) scale(1); } 85% { opacity: 1; } 100% { left: calc(100% - 24px); opacity: 0; transform: translateY(-50%) scale(1.6); } }
.afx-orb { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #e2c4ff 35%, #b26bff 70%, transparent 72%); box-shadow: 0 0 18px #b26bff; animation: afx-orb 1s cubic-bezier(.5, 0, .5, 1) forwards; }
@keyframes afx-crumble { to { filter: grayscale(1) brightness(.45); opacity: .35; transform: scale(.94) rotate(-2deg); } }
.afx-card.crumbling { animation: afx-crumble .9s ease-in forwards; }
@keyframes afx-hit { 0% { box-shadow: none; } 40% { box-shadow: 0 0 40px rgba(255, 255, 255, .9), 0 0 80px rgba(178, 107, 255, .8); } 100% { box-shadow: 0 0 10px rgba(178, 107, 255, .5); } }
.afx-card.hit { animation: afx-hit 1s ease-out forwards; }
.afx-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.afx-checks span { padding: 5px 9px; border-radius: 7px; font-size: 12px; color: #a8957f; border: 1px solid #3a261b; background: #1c130f; }
.afx-checks span::before { content: "○ "; } .afx-checks span.ok { color: #bfeec6; border-color: rgba(143, 227, 155, .4); } .afx-checks span.ok::before { content: "✓ "; }
.afx-checks span.bad { color: #ffb0a4; border-color: rgba(255, 120, 100, .5); } .afx-checks span.bad::before { content: "✕ "; }
.afx-bottom { display: flex; align-items: center; gap: 12px; } .afx-bottom .afx-btn { flex: none; width: 200px; }
@media (max-width: 900px) { .afx-main { grid-template-columns: 1fr; } .afx-fuse { grid-template-columns: 1fr; } .afx-tr-row { grid-template-columns: 1fr; } }

/* ===================== Árvore de Talentos (systems/talentos.ts) ===================== */
#win-sys-talentos.tal-win { width: min(1000px, calc(100vw - 24px)) !important; max-width: none !important; }
.tal-win .win-body { padding: 0 !important; background: radial-gradient(ellipse at 50% 0%, #241612 0%, #120c0a 72%); color: #e9dcc8; font-family: Inter, sans-serif; }
.wd-talents { border-radius: 10px; overflow: hidden; border: 1px solid #4a3020; background: radial-gradient(ellipse at 50% 0%, #241612 0%, #120c0a 72%); color: #e9dcc8; font-family: Inter, sans-serif; }
.wd-talents .tal-paths { overflow-x: auto; }
.tal-none { padding: 30px; text-align: center; color: #c9b597; }
.tal-top { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #4a3020; flex-wrap: wrap; }
.tal-pts { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 8px; border-radius: 10px; border: 1px solid #4a3020; background: #1a110d; }
.tal-pts b { font: 900 26px Cinzel, Georgia, serif; color: #8d7a66; line-height: 1; }
.tal-pts span { font-size: 10.5px; color: #a8957f; }
.tal-pts.has { border-color: #ffd27a; box-shadow: 0 0 14px rgba(255, 190, 90, .35); } .tal-pts.has b { color: #ffd24a; text-shadow: 0 0 10px rgba(255, 200, 80, .6); }
.tal-info { flex: 1; min-width: 220px; font-size: 13px; } .tal-info b { color: #ffd27a; } .tal-info small { display: block; margin-top: 3px; color: #a8957f; font-size: 11.5px; }
.tal-actions { display: flex; gap: 6px; }
.tal-btn { height: 36px; padding: 0 16px; border-radius: 8px; font: 800 13px Inter, sans-serif; letter-spacing: .04em; color: #2a1200; background: linear-gradient(180deg, #ffd27a, #e08a1e); border: 1px solid #ffdf9e; box-shadow: 0 2px 0 #7a3d08; cursor: pointer; }
.tal-btn:hover:not(:disabled) { filter: brightness(1.1); } .tal-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.tal-btn.ghost { color: #ffd27a; background: #1d130f; border-color: #6b4528; box-shadow: none; font-size: 12px; }
.tal-btn:focus-visible, .tal-node:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tal-paths { flex: none; display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 10px; padding: 10px 12px 10px 16px; overflow-x: auto; background: #1b120e; }
.tal-path { --pc: #ffd27a; position: relative; border-radius: 12px; border: 1px solid #3d281c; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, #1a110d) 0%, #140d0b 40%); padding: 10px 10px 12px; min-width: 0; }
.tal-path.done { border-color: color-mix(in srgb, var(--pc) 60%, #3d281c); box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 25%, transparent); }
.tal-ph { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 6px; }
.tal-ph b { font: 800 15px Cinzel, Georgia, serif; color: var(--pc); letter-spacing: .03em; }
.tal-pspent { font: 800 12px Inter, sans-serif; color: #e9dcc8; align-self: center; }
.tal-ph small { grid-column: 1 / -1; color: #a8957f; font-size: 11px; line-height: 1.35; }
.tal-pbar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 3px; background: #2a1c15; overflow: hidden; margin-top: 4px; }
.tal-pbar > i { display: block; height: 100%; background: var(--pc); box-shadow: 0 0 8px var(--pc); transition: width .25s; }
.tal-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 72px); justify-items: center; align-items: start; }
.tal-row { grid-column: 1 / -1; width: 100%; height: 100%; border-top: 1px dashed transparent; position: relative; pointer-events: none; }
.tal-row:not(.open) { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .18) 0 6px, transparent 6px 12px); border-top-color: #3a271c; pointer-events: auto; }
.tal-row span { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 2px 2px !important; min-width: 18px; font: 800 10px Inter, sans-serif; color: #8d7a66; padding: 1px 5px; border-radius: 4px; background: #120c0a; border: 1px solid #3a271c; }
.tal-row span::before { content: "🔒"; font-size: 9px; }
.tal-arrow { width: 4px; margin-top: 51px; height: calc(100% - 49px); border-radius: 2px; background: #3a271c; position: relative; z-index: 0; pointer-events: none; }
.tal-arrow::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #3a271c; border-bottom: 0; }
.tal-arrow.lit { background: var(--pc); box-shadow: 0 0 8px var(--pc); } .tal-arrow.lit::after { border-top-color: var(--pc); }
.tal-node { position: relative; z-index: 1; margin-top: 3px; width: 48px; height: 48px; padding: 0; border-radius: 10px; border: 2px solid #4a3426; background: #0d0806; cursor: pointer; overflow: visible; transition: transform .12s, border-color .15s, box-shadow .15s; }
.tal-node img { width: 100%; height: 100%; display: block; border-radius: 8px; filter: grayscale(.85) brightness(.55); transition: filter .15s; pointer-events: none; }
.tal-node:hover { transform: translateY(-2px); border-color: #ffd27a; }
.tal-node.part img, .tal-node.max img { filter: none; }
.tal-node:not(.locked):not(.part):not(.max) img { filter: grayscale(.35) brightness(.85); }
.tal-node.part { border-color: #6fdc7a; box-shadow: 0 0 10px rgba(111, 220, 122, .45); }
.tal-node.max { border-color: #ffd24a; box-shadow: 0 0 12px rgba(255, 210, 74, .6); }
.tal-node.locked { cursor: not-allowed; border-color: #2c1f18; } .tal-node.locked img { filter: grayscale(1) brightness(.35); }
.tal-node.cap { width: 54px; height: 54px; margin-top: 0; border-radius: 50%; } .tal-node.cap img { border-radius: 50%; }
.tal-node.cap.max { animation: tal-cap 2.2s ease-in-out infinite; }
@keyframes tal-cap { 0%, 100% { box-shadow: 0 0 12px rgba(255, 210, 74, .55); } 50% { box-shadow: 0 0 24px rgba(255, 210, 74, .95), 0 0 4px #fff; } }
.tal-node.changed::before { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px #ffd27a; z-index: 2; }
.tal-rank { position: absolute; right: -6px; bottom: -6px; padding: 1px 4px; border-radius: 5px; font: 800 10px Inter, sans-serif; color: #e9dcc8; background: #120c0a; border: 1px solid #4a3426; pointer-events: none; }
.tal-node.part .tal-rank { color: #9cf0a5; border-color: #3f8a47; } .tal-node.max .tal-rank { color: #ffd24a; border-color: #a8802a; }
.tal-name { position: relative; z-index: 2; align-self: end; margin-bottom: 2px; padding: 0 4px; border-radius: 4px; background: rgba(14, 9, 7, .85); max-width: 92px; font: 700 9.5px Inter, sans-serif; color: #b9a78f; text-align: center; line-height: 1.1; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tal-sum { flex: none; padding: 8px 14px 12px; border-top: 1px solid #4a3020; }
.tal-sum-h { font: 800 12px Inter, sans-serif; color: #ffd27a; margin-bottom: 6px; } .tal-sum-h em { color: #a8957f; font-weight: 600; font-style: normal; }
.tal-sum-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; border-radius: 6px; background: #1c130f; border: 1px solid #3a261b; font-size: 11px; color: #e9dcc8; }
.tal-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.tal-empty { color: #a8957f; font-size: 12px; }
.state-ic.tal-buff { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 210, 122, .35); }

/* ===================== Roleta (systems/roleta.ts) ===================== */
#win-sys-roleta.rl-win { width: min(900px, calc(100vw - 24px)) !important; max-width: none !important; }
.rl-win .win-body { padding: 0 !important; gap: 0 !important; background: radial-gradient(ellipse at 50% 0%, #2a1712 0%, #120c0a 75%); color: #e9dcc8; font-family: Inter, sans-serif; }
.rl-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #4a3020; flex-wrap: wrap; }
.rl-logo { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(255, 190, 80, .5)); animation: rl-logo 9s linear infinite; }
@keyframes rl-logo { to { transform: rotate(360deg); } }
.rl-title { font: 900 20px Cinzel, Georgia, serif; letter-spacing: .08em; color: #ffd27a; text-shadow: 0 0 10px rgba(255, 160, 60, .35); margin-right: 6px; }
.rl-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.rl-tab { padding: 6px 12px; border-radius: 16px; border: 1px solid #5b3a24; background: #1a110d; color: #c9b597; font: 700 11.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.rl-tab:hover { border-color: #ffc27a; color: #ffe0a8; } .rl-tab.on { background: #3a2216; border-color: #ffd27a; color: #ffd27a; box-shadow: 0 0 10px rgba(255, 190, 90, .25); }
.rl-top { flex: none; display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid #3a261b; flex-wrap: wrap; background: #1a110d; }
.rl-wallet { display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px 8px; border-radius: 10px; border: 1px solid #5b3a24; background: #120c0a; }
.rl-wallet img { width: 24px; height: 24px; } .rl-wallet b { font: 900 17px Cinzel, Georgia, serif; color: #ffd24a; } .rl-wallet span { font-size: 11px; color: #a8957f; }
.rl-cost { font-size: 12px; color: #c9b597; } .rl-cost b { color: #ffd27a; }
.rl-counts { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #a8957f; } .rl-counts > span { margin-right: 2px; }
.rl-chip { min-width: 34px; height: 28px; padding: 0 8px; border-radius: 7px; border: 1px solid #5b3a24; background: #1d130f; color: #e9dcc8; font: 800 12px Inter, sans-serif; cursor: pointer; }
.rl-chip:hover { border-color: #ffc27a; } .rl-chip.on { border-color: #ffd27a; background: #3a2618; color: #ffd27a; box-shadow: 0 0 8px rgba(255, 200, 100, .35); }
.rl-watch { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a8957f; }
.rl-watch i { width: 8px; height: 8px; border-radius: 50%; background: #5fdc6f; box-shadow: 0 0 8px #5fdc6f; animation: rl-live 1.6s ease-in-out infinite; }
@keyframes rl-live { 50% { opacity: .35; } }
.rl-btn { height: 36px; padding: 0 22px; border-radius: 8px; font: 800 13px Inter, sans-serif; letter-spacing: .05em; color: #2a1200; background: linear-gradient(180deg, #ffd27a, #e08a1e); border: 1px solid #ffdf9e; box-shadow: 0 2px 0 #7a3d08, 0 0 14px rgba(255, 170, 60, .3); cursor: pointer; }
.rl-btn:hover:not(:disabled) { filter: brightness(1.1); } .rl-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.rl-btn.small { height: 26px; padding: 0 10px; font-size: 11px; } .rl-btn.ghost { color: #ffd27a; background: #1d130f; border-color: #6b4528; box-shadow: none; font-size: 12px; }
.rl-btn:focus-visible, .rl-tab:focus-visible, .rl-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rl-view { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.rl-wheel { position: relative; border-radius: 12px; border: 1px solid #3d281c; background: linear-gradient(180deg, #23150f, #150e0b); padding: 8px 12px 10px; transition: box-shadow .3s, border-color .3s; }
.rl-wheel header { display: flex; justify-content: space-between; align-items: baseline; }
.rl-wheel header > b { font: 800 13px Cinzel, Georgia, serif; color: #ffd27a; letter-spacing: .06em; }
.rl-state { font-size: 12px; color: #8fd99a; } .rl-wheel.busy .rl-state { color: #ffb36b; } .rl-state small { color: #a8957f; }
.rl-machine { display: flex; align-items: center; justify-content: center; gap: 0; margin: 6px 0 8px; }
.rl-cap { width: 22px; height: 70px; background: linear-gradient(90deg, #6b3a1c, #c4873c 45%, #6b3a1c); border: 1px solid #2a160b; box-shadow: inset 0 0 6px rgba(0, 0, 0, .6); }
.rl-cap.l { border-radius: 12px 4px 4px 12px; } .rl-cap.r { border-radius: 4px 12px 12px 4px; }
.rl-cap::after { content: ""; display: block; width: 10px; height: 10px; margin: 29px auto 0; border-radius: 50%; background: radial-gradient(circle, #ff8a6a, #b0201a); box-shadow: 0 0 8px #ff5a3c; }
.rl-strip { position: relative; width: 518px; max-width: calc(100vw - 120px); height: 78px; overflow: hidden; background: #0d0806; border-top: 3px solid #8a5a2a; border-bottom: 3px solid #8a5a2a; box-shadow: inset 0 0 22px rgba(0, 0, 0, .9); }
.rl-strip::before, .rl-strip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.rl-strip::before { left: 0; background: linear-gradient(90deg, #0d0806, transparent); } .rl-strip::after { right: 0; background: linear-gradient(-90deg, #0d0806, transparent); }
.rl-track { display: flex; height: 100%; will-change: transform; }
.rl-cell { flex: none; width: 74px; height: 100%; display: grid; place-items: center; border-right: 1px solid #22150f; position: relative; }
.rl-cell::before { content: ""; position: absolute; inset: 8px 7px; border-radius: 8px; border: 1px solid #3a271c; background: radial-gradient(circle at 50% 40%, #241712, #120b09); }
.rl-cell.r2::before { border-color: rgba(77, 163, 255, .55); box-shadow: inset 0 0 10px rgba(77, 163, 255, .25); }
.rl-cell.r3::before { border-color: rgba(178, 107, 255, .65); box-shadow: inset 0 0 12px rgba(178, 107, 255, .3); }
.rl-cell.r4::before { border-color: rgba(255, 201, 60, .8); box-shadow: inset 0 0 14px rgba(255, 201, 60, .4); }
.rl-cell.win::before { box-shadow: 0 0 0 2px #ffd27a, 0 0 18px rgba(255, 200, 100, .7), inset 0 0 14px rgba(255, 200, 100, .35); }
.rl-cell .rl-ic { position: relative; z-index: 1; }
.rl-ic { display: grid; place-items: center; position: relative; }
.rl-ic canvas, .rl-ic img { display: block; image-rendering: pixelated; } .rl-ic img { image-rendering: auto; object-fit: contain; }
.rl-cnt { position: absolute; right: -8px; bottom: -6px; font: 800 10px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.rl-ptr { position: absolute; left: 50%; z-index: 3; width: 0; height: 0; border: 9px solid transparent; transform: translateX(-50%); }
.rl-ptr.top { top: 0; border-top: 11px solid #ffd27a; border-bottom: 0; filter: drop-shadow(0 0 4px #ffb84a); }
.rl-ptr.bot { bottom: 0; border-bottom: 11px solid #ffd27a; border-top: 0; filter: drop-shadow(0 0 4px #ffb84a); }
.rl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; background: linear-gradient(180deg, rgba(255, 210, 122, .9), rgba(255, 210, 122, .15) 30%, rgba(255, 210, 122, .15) 70%, rgba(255, 210, 122, .9)); pointer-events: none; }
.rl-act { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; }
.rl-price { font-size: 12px; color: #a8957f; min-width: 52px; }
.rl-won { position: absolute; right: 14px; bottom: 16px; max-width: 34%; font-size: 12px; color: #c9b597; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; text-align: right; }
.rl-won.show { opacity: 1; transform: none; }
.rl-wheel.flash-2 { animation: rl-flash-2 .9s ease-out; } .rl-wheel.flash-3 { animation: rl-flash-3 1.2s ease-out; } .rl-wheel.flash-4 { animation: rl-flash-4 2.2s ease-out; }
@keyframes rl-flash-2 { 0% { box-shadow: 0 0 0 2px #4da3ff, 0 0 26px rgba(77, 163, 255, .6); } 100% { box-shadow: none; } }
@keyframes rl-flash-3 { 0% { box-shadow: 0 0 0 2px #b26bff, 0 0 34px rgba(178, 107, 255, .7); } 100% { box-shadow: none; } }
@keyframes rl-flash-4 { 0%, 30% { box-shadow: 0 0 0 3px #ffc93c, 0 0 50px rgba(255, 201, 60, .9); border-color: #ffc93c; } 100% { box-shadow: none; } }
.rl-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid #4a3020; font-size: 12px; color: #a8957f; }
.rl-foot b { color: #ffd27a; }
.rl-empty { padding: 30px; text-align: center; color: #a8957f; }
.rl-list { display: flex; flex-direction: column; gap: 4px; }
.rl-row { display: grid; grid-template-columns: 92px minmax(90px, 160px) 70px 38px 1fr auto; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; background: #1a110d; border: 1px solid #2c1d15; font-size: 12px; }
.v-hist .rl-row { grid-template-columns: 92px 70px 38px 1fr auto; }
.rl-row.r4 { border-color: rgba(255, 201, 60, .5); background: linear-gradient(90deg, rgba(255, 201, 60, .12), #1a110d 60%); }
.rl-row.r3 { border-color: rgba(178, 107, 255, .4); }
.rl-when { color: #8d7a66; font-variant-numeric: tabular-nums; } .rl-who { color: #e9dcc8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl-wn { color: #a8957f; }
.rl-pn { font-weight: 700; } .rl-row em { font-style: normal; font-size: 11px; font-weight: 700; }
.rl-prizes { display: flex; flex-direction: column; gap: 12px; }
.rl-psec h4 { margin: 0 0 6px; font: 800 14px Cinzel, Georgia, serif; letter-spacing: .04em; } .rl-psec h4 small { font: 600 11px Inter, sans-serif; color: #a8957f; margin-left: 6px; }
.rl-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.rl-pitem { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 8px; border: 1px solid #2c1d15; background: #1a110d; font-size: 12px; min-height: 46px; }
.rl-pitem.r2 { border-color: rgba(77, 163, 255, .35); } .rl-pitem.r3 { border-color: rgba(178, 107, 255, .45); } .rl-pitem.r4 { border-color: rgba(255, 201, 60, .6); }
.rl-pitem b { color: #ffd27a; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rl-buy { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8, 4, 3, .6); border-radius: inherit; }
.rl-buy-card { width: min(420px, calc(100% - 32px)); padding: 16px 18px; border-radius: 12px; border: 1px solid #6b4528; background: linear-gradient(180deg, #2a1a12, #150e0b); box-shadow: 0 10px 40px rgba(0, 0, 0, .7); color: #e9dcc8; font-size: 13px; }
.rl-buy-card h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 800 16px Cinzel, Georgia, serif; color: #ffd27a; } .rl-buy-card h4 img { width: 26px; height: 26px; }
.rl-buy-card p b { color: #ffd27a; } .rl-buy-card .rl-counts { flex-wrap: wrap; margin: 8px 0; }
.rl-buy-card input { width: 70px; height: 28px; border-radius: 7px; border: 1px solid #5b3a24; background: #120c0a; color: #e9dcc8; padding: 0 6px; font: 700 12px Inter, sans-serif; }
.rl-buy-total em { color: #ff9a8a; font-style: normal; }
.rl-buy-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.gc-text { white-space: pre-line; }
.rl-mode { display: flex; gap: 0; border: 1px solid #6b4528; border-radius: 9px; overflow: hidden; margin-right: 6px; }
.rl-mode-b { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #1a110d; border: 0; color: #c9b597; font: 800 12px Inter, sans-serif; cursor: pointer; }
.rl-mode-b + .rl-mode-b { border-left: 1px solid #6b4528; }
.rl-mode-b img { width: 18px; height: 18px; } .rl-mode-b.on { background: linear-gradient(180deg, #4a2a18, #2a1810); color: #ffd27a; box-shadow: inset 0 0 10px rgba(255, 190, 90, .25); }
.rl-mode-b:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.rl-goldic { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf3a 40%, #b77a10 75%); box-shadow: 0 0 6px rgba(255, 200, 60, .6), 3px 2px 0 -1px #c48a16; }
.rl-wheel header > b small { font: 700 11px Inter, sans-serif; color: #a8957f; letter-spacing: 0; margin-left: 6px; }
.rl-price.bad { color: #ff9a8a; }
.rl-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-tiers .rl-chip { padding: 0 12px; }
.rl-goldic.small { width: 16px; height: 16px; }
/* Gem System (aba da janela da Árvore/Wheel): Ateliê de Gemas + Gem Bag (Stone System) */
.wd-subtabs { display: flex; gap: 6px; }
.wd-subtab { padding: 5px 14px; border-radius: 14px; border: 1px solid #4a3122; background: #140e0b; color: #a8957f; font: 800 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.wd-subtab:hover { color: #e8d9c4; border-color: #67402B; } .wd-subtab.on { color: #ffd27a; border-color: #FFA347; background: #2a1a12; box-shadow: 0 0 8px rgba(255, 140, 50, .3); }
.wd-subtab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wd-stones { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid #3a2a40;
  background: radial-gradient(120% 80% at 20% 0%, rgba(80, 40, 120, .28), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(20, 90, 110, .22), transparent 60%), #0d0b12; }
.wd-stones h4 { margin: 0 0 8px; font: 700 12.5px "Cinzel", Georgia, serif; color: #d9c6ff; letter-spacing: .08em; text-transform: uppercase; }
/* rótulos do menu de cima em HTML (as artes ficaram só com o ícone: ui/tb/*-ic.png) — mesma letra dos botões do bot */
.tb-lbl { position: absolute; left: 50%; bottom: calc(2 * var(--t) * var(--s, 1)); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 800 calc(9.4 * var(--t) * var(--s, 1)) Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #e8d9c4;
  text-shadow: 0 1px 0 #000, 0 0 calc(3 * var(--t)) #000, 0 0 calc(6 * var(--t)) rgba(0, 0, 0, .9); }
.tb-btn:hover .tb-lbl, .tb-btn:focus-visible .tb-lbl, .tb-btn.on .tb-lbl { color: #FFC27A; }
/* rótulos da barra de Sistemas em HTML (a faixa ui/sysbar-strip.webp ficou só com os ícones) */
.sys-lbl { position: absolute; left: 50%; bottom: calc(9 * var(--k)); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 800 calc(12.5 * var(--k)) Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #e8d9c4;
  text-shadow: 0 1px 0 #000, 0 0 calc(4 * var(--k)) #000; }
.sys-hot:hover .sys-lbl, .sys-hot.on .sys-lbl, .sys-hot:focus-visible .sys-lbl { color: #FFC27A; text-shadow: 0 1px 0 #000, 0 0 calc(8 * var(--k)) rgba(255, 106, 0, .8); }
.sys-hot[data-soon] .sys-lbl { color: #9a8a78; }
/* Opções → Atalhos */
.opt-note { margin: 0 0 8px; font-size: 11.5px; color: var(--muted, #a8957f); }
.opt-key { min-width: 64px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid #67402B; background: linear-gradient(180deg, #2a1d16, #140e0b); color: #FFC27A; font: 800 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5); }
.opt-key:hover { border-color: #FFA347; } .opt-key.wait { color: #fff; border-color: #FFA347; box-shadow: 0 0 8px rgba(255, 140, 50, .5); animation: rl-live 1s ease-in-out infinite; }
.opt-key.bad { border-color: #ff6a5a; color: #ff9a8a; }
.opt-key:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===================== Atualizações (ui/changelog.ts) ===================== */
.cl-fab { position: fixed; left: 50%; top: 150px; transform: translateX(-50%); z-index: 19; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 8px; border-radius: 18px;
  border: 1px solid #a8642a; background: linear-gradient(180deg, #3a2216, #1a0f0b); color: #FFC27A; font: 800 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 120, 40, .25); cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; }
.cl-fab:hover { transform: translate(-50%, -2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .6), 0 0 16px rgba(255, 130, 40, .5); color: #ffe0a8; }
.cl-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cl-fab[hidden] { display: none; }
.cl-fab-ic { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd27a, #c4621c 70%); position: relative; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4); }
.cl-fab-ic::before { content: ""; position: absolute; left: 6px; top: 5px; width: 10px; height: 12px; border-radius: 1px; background: #2a1408; box-shadow: inset 0 3px 0 -1px #ffd27a, inset 0 7px 0 -5px #ffd27a; }
.cl-fab em { display: none; font-style: normal; padding: 1px 6px; border-radius: 8px; background: #ff4b3a; color: #fff; font-size: 9.5px; letter-spacing: .04em; animation: rl-live 1.4s ease-in-out infinite; }
.cl-fab.new em { display: inline-block; }
.cl-fab.new { border-color: #FFA347; box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 16px rgba(255, 106, 0, .6); }
#win-changelog.cl-win { width: min(620px, calc(100vw - 24px)) !important; max-width: none !important; }
.cl-win .win-body { max-height: min(calc(100vh - 140px), 720px); overflow: auto; padding: 12px 14px !important; color: #e9dcc8; font-family: Inter, sans-serif; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cl-head b { font: 800 16px Cinzel, Georgia, serif; color: #ffd27a; } .cl-head span { font-size: 11.5px; color: #a8957f; }
.cl-list { display: flex; flex-direction: column; gap: 6px; }
.cl-day { border: 1px solid #3a271c; border-radius: 10px; background: #160f0c; overflow: hidden; }
.cl-day.fresh { border-color: #a8642a; }
.cl-day-h { width: 100%; display: grid; grid-template-columns: 86px 1fr auto auto 14px; align-items: center; gap: 8px; padding: 9px 12px; border: 0; background: linear-gradient(180deg, #24170f, #170f0c); color: #e9dcc8; text-align: left; cursor: pointer; font: 600 12.5px Inter, sans-serif; }
.cl-day-h:hover { background: linear-gradient(180deg, #2e1d13, #1b120e); }
.cl-day-h:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cl-date { font: 800 11px Inter, sans-serif; color: #FFC27A; letter-spacing: .04em; text-transform: uppercase; }
.cl-day-h b { font-weight: 700; }
.cl-day-h em { font-style: normal; font: 800 9.5px Inter, sans-serif; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: #ff4b3a; color: #fff; }
.cl-n { font-size: 11px; color: #8d7a66; }
.cl-arrow { width: 8px; height: 8px; border-right: 2px solid #a8957f; border-bottom: 2px solid #a8957f; transform: rotate(-45deg); transition: transform .15s; }
.cl-day.open .cl-arrow { transform: rotate(45deg); }
.cl-day ul { display: none; margin: 0; padding: 4px 14px 12px 30px; font-size: 12.5px; line-height: 1.5; color: #d9cbb4; }
.cl-day.open ul { display: block; }
.cl-day li + li { margin-top: 3px; }
.cl-day li::marker { color: #ff8a3a; }
.cl-empty { color: #a8957f; }
.cl-head { flex-wrap: wrap; gap: 6px 10px; }
.cl-all { margin-left: auto; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid #6b4528; background: #1d130f; color: #ffd27a; font: 800 11px Inter, sans-serif; cursor: pointer; }
.cl-all:hover { border-color: #FFA347; }
/* reconexão automática (main.ts) */
#reconnect-box { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(6, 3, 2, .62); }
#reconnect-box[hidden] { display: none; }
.rc-card { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 300px; max-width: min(440px, calc(100vw - 32px)); padding: 20px 24px; border-radius: 12px; border: 1px solid #a8642a; background: linear-gradient(180deg, #2a1a12, #150e0b); box-shadow: 0 10px 40px rgba(0, 0, 0, .7); color: #e9dcc8; text-align: center; }
.rc-card b { font: 800 17px Cinzel, Georgia, serif; color: #ffd27a; } .rc-card small { font-size: 12.5px; color: #c9b597; line-height: 1.45; }
.rc-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 210, 122, .25); border-top-color: #ffa347; animation: rc-spin .9s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-act { display: flex; gap: 8px; margin-top: 6px; } .rc-act button { padding: 7px 14px; }

/* ===== Recompensas de Nível ===== */
.lr-fab.lr-side:hover { transform: translateY(-2px) !important; }
.lr-fab-ic { width: 22px; height: 22px; border-radius: 5px; position: relative; background: linear-gradient(180deg, #ffd27a, #c4621c); box-shadow: inset 0 -2px 3px rgba(0,0,0,.4); }
.lr-fab-ic::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 4px; background: #8a1c12; }
.lr-fab-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: #8a1c12; }
.lr-fab em { min-width: 16px; text-align: center; }
#win-sys-lvlreward.lr-win { width: min(860px, calc(100vw - 24px)) !important; max-width: none !important; }
.lr-win .win-body { max-height: min(calc(100vh - 120px), 760px); overflow: auto; padding: 14px 16px !important; color: #e9dcc8; font-family: Inter, sans-serif; }
.lr-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.lr-head b { font: 800 18px Cinzel, Georgia, serif; color: #ffd27a; letter-spacing: .06em; }
.lr-head span { font-size: 12.5px; color: #c9b8a2; } .lr-head span b { font: 800 12.5px Inter, sans-serif; color: #ffc27a; letter-spacing: 0; }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.lr-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid #3a271c; border-radius: 12px; background: linear-gradient(180deg, #1d130e, #140d0a); }
.lr-card header { display: flex; align-items: baseline; gap: 8px; }
.lr-lvl { font: 800 11px Inter, sans-serif; letter-spacing: .08em; color: #ffc27a; padding: 2px 7px; border-radius: 7px; background: #3a2216; }
.lr-card header b { font: 700 13.5px Cinzel, Georgia, serif; color: #f1e2c9; }
.lr-items { display: flex; flex-wrap: wrap; gap: 5px; min-height: 42px; }
.lr-it { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; border: 1px solid #4a3324; background: radial-gradient(circle at 50% 40%, #2c1d14, #120b08); }
.lr-it canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.lr-it i { position: absolute; right: 2px; bottom: 0; font: 800 10px Inter, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.lr-none { font-size: 11.5px; color: #8d7a66; align-self: center; }
.lr-gold { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e9dcc8; }
.lr-gold b { color: #ffd27a; font-size: 13px; } .lr-gold span { color: #8d7a66; font-size: 11px; }
.lr-gic canvas { width: 32px; height: 32px; margin: -6px -4px; image-rendering: pixelated; display: block; }
.lr-card footer { margin-top: auto; display: flex; justify-content: center; }
.lr-claim { width: 100%; height: 34px; border-radius: 9px; border: 1px solid #ffb04a; cursor: pointer; font: 800 13px Inter, sans-serif; letter-spacing: .12em; color: #2a1408;
  background: linear-gradient(180deg, #ffd27a, #e08a2a); box-shadow: 0 0 14px rgba(255, 150, 40, .45); animation: lr-glow 1.6s ease-in-out infinite; }
.lr-claim:hover { filter: brightness(1.1); } .lr-claim:disabled { animation: none; filter: grayscale(.4); cursor: default; }
.lr-claim:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes lr-glow { 50% { box-shadow: 0 0 22px rgba(255, 170, 60, .8); } }
.lr-card.ready { border-color: #c47a2a; box-shadow: 0 0 0 1px rgba(255, 160, 60, .25), 0 0 18px rgba(255, 120, 30, .18); }
.lr-card.done { opacity: .55; } .lr-card.done .lr-it canvas { filter: grayscale(.6); }
.lr-done { font: 800 12px Inter, sans-serif; letter-spacing: .1em; color: #7fd17f; padding: 7px 0; }
.lr-card.locked .lr-items { filter: grayscale(.85) brightness(.7); }
.lr-lock { font: 700 12px Inter, sans-serif; color: #8d7a66; padding: 7px 0; }
.lr-lock::before { content: "🔒 "; }
.lr-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 11.5px; color: #a8957f; }
.lr-foot b { color: #ffc27a; }
.lr-close { height: 32px; padding: 0 18px; border-radius: 8px; border: 1px solid #6a4428; background: linear-gradient(180deg, #3a2216, #1a0f0b); color: #ffc27a; font: 800 12px Inter, sans-serif; letter-spacing: .1em; cursor: pointer; }
.lr-close:hover { color: #ffe0a8; border-color: #a8642a; }
.cl-fab.fab-under { opacity: 0; pointer-events: none; }
.lr-ex { display: flex; flex-direction: column; gap: 4px; }
.lr-ex > span { font: 800 10.5px Inter, sans-serif; letter-spacing: .08em; color: #c9b8a2; }
.lr-ex em { font-style: normal; font-weight: 600; letter-spacing: 0; color: #ffc27a; margin-left: 4px; }
.lr-ex-row { display: flex; flex-wrap: wrap; gap: 4px; }
.lr-exo { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 7px; border: 1px solid #3a271c; background: #120b08; cursor: pointer; }
.lr-exo canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.lr-exo:hover:not(:disabled) { border-color: #a8642a; }
.lr-exo.on { border-color: #ffb04a; background: radial-gradient(circle at 50% 40%, #4a2c14, #1a0f0b); box-shadow: 0 0 10px rgba(255, 150, 40, .45); }
.lr-exo:disabled { cursor: default; opacity: .45; } .lr-exo.on:disabled { opacity: 1; }
.lr-exo:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }