:root {
  --fundo: #0b0c10; --painel: #15171d; --borda: #2a2d36; --texto: #dcdde3;
  --fraco: #8b8e99; --verde: #5bd67a; --vermelho: #ff6b6b; --azul: #4d8dff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
button, input { font: inherit; }
.tela { display: none; min-height: 100%; }
.tela.ativa { display: flex; }
#tela-login, #tela-chars { align-items: center; justify-content: center; padding: 16px; }
.cartao { width: 100%; max-width: 360px; background: var(--painel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 20px; }
.cartao.largo { max-width: 560px; }
h1 { margin: 0; font-size: 26px; } h1 b, h2 b { color: var(--verde); }
h2 { margin: 0; font-size: 18px; }
.sub { color: var(--fraco); margin: 4px 0 16px; font-size: 13px; }
label { display: block; font-size: 13px; color: var(--fraco); margin: 10px 0; }
input:not([type=range]) { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: #0f1116; color: var(--texto); }
input[type=range] { width: 100%; }
button { cursor: pointer; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--borda);
  background: #1e2129; color: var(--texto); }
button.prim { background: var(--verde); color: #08130b; border-color: transparent; font-weight: 600; }
button.pequeno { padding: 6px 10px; font-size: 13px; }
.linha { display: flex; gap: 8px; margin-top: 14px; } .linha button { flex: 1; }
.erro { color: var(--vermelho); min-height: 1.2em; font-size: 13px; margin: 10px 0 0; }
.topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#lista-chars { display: grid; gap: 8px; margin-bottom: 12px; }
.char { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 10px; background: #111319; }
.char canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.char .info { flex: 1; } .char .info small { display: block; color: var(--fraco); }
details summary { cursor: pointer; color: var(--fraco); margin: 8px 0; }
.criar { display: flex; gap: 16px; flex-wrap: wrap; }
#previa { width: 128px; height: 128px; image-rendering: pixelated; background: #0f1116; border-radius: 10px;
  border: 1px solid var(--borda); }
.campos { flex: 1; min-width: 220px; }
.grupo { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.grupo button { padding: 6px 10px; font-size: 13px; }
.grupo button.sel { border-color: var(--verde); color: var(--verde); }
.cores label { margin: 4px 0; }

#tela-jogo { position: fixed; inset: 0; }
#tela { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; background: #000; }
#hud { position: fixed; top: 8px; left: 8px; background: rgba(15,17,22,.85); border: 1px solid var(--borda);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; }
#hud #h-nome { color: var(--verde); font-weight: 600; }
.flutua { position: fixed; top: 8px; right: 8px; }
#chat { position: fixed; left: 8px; bottom: 8px; width: min(420px, calc(100% - 16px)); }
#log, .log-pm { max-height: 120px; overflow-y: auto; font-size: 13px; background: rgba(15,17,22,.75);
  border-radius: 8px 8px 0 0; padding: 6px 8px; }
#log div { margin: 2px 0; } #log b { color: #f2d45c; } #log .sis { color: var(--fraco); }
#f-fala input { border-radius: 0 0 8px 8px; margin: 0; background: rgba(15,17,22,.9); }
#dpad { position: fixed; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px); gap: 4px; }
#dpad button { padding: 0; font-size: 18px; background: rgba(30,33,41,.8); }
#dpad [data-d="0"] { grid-column: 2; grid-row: 1; } #dpad [data-d="3"] { grid-column: 1; grid-row: 2; }
#dpad [data-d="1"] { grid-column: 3; grid-row: 2; } #dpad [data-d="2"] { grid-column: 2; grid-row: 3; }
@media (hover: hover) and (pointer: fine) { #dpad { display: none; } }
@media (max-width: 600px) { #chat { bottom: 170px; } #log, .log-pm { max-height: 80px; } }

/* ---------------- jogo com painel lateral (estilo cliente do Tibia) ---------------- */
#tela-jogo.ativa { display: grid; grid-template-columns: 1fr 232px; }
#palco { position: relative; min-width: 0; height: 100%; }
#palco #tela { position: absolute; inset: 0; }
#painel { background: #13151a; border-left: 1px solid var(--borda); overflow-y: auto; padding: 6px; font-size: 12px; }
.bloco { background: #0f1116; border: 1px solid var(--borda); border-radius: 6px; padding: 6px; margin-bottom: 6px; }
.titulo { color: var(--fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.titulo small { text-transform: none; letter-spacing: 0; }
#b-mm { position: relative; padding: 4px; }
#minimapa { display: block; width: 100%; image-rendering: pixelated; background: #000; border-radius: 4px; }
.mm-bt { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 2px; }
.mm-bt button { padding: 0 7px; font-size: 13px; background: rgba(20,22,28,.85); }
.barra { position: relative; height: 18px; background: #2a0d0d; border-radius: 4px; overflow: hidden; margin: 3px 0; }
#bar-mana { background: #0d162a; }
.barra .enche { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#e0413b, #a3211c); }
#bar-mana .enche { background: linear-gradient(#4d7dff, #2345b8); }
.barra span { position: relative; display: block; text-align: center; line-height: 18px; font-weight: 600; font-size: 11px;
  text-shadow: 0 1px 2px #000; }
.barra.fina { height: 6px; background: #1b1d24; margin-top: 6px; }
.barra.fina .enche { background: linear-gradient(#5bd67a, #2f9a4c); }
#equip { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; justify-content: center; }
.slot { width: 40px; height: 40px; background: #1a1c23; border: 1px solid #2f323c; border-radius: 4px; display: flex;
  align-items: center; justify-content: center; cursor: pointer; position: relative; }
.slot:hover { border-color: var(--azul); }
.slot:empty::after { content: attr(title); color: #4a4e5a; font-size: 8px; text-align: center; }
.slot.cheio { background: #20232b; }
#mochila { display: grid; grid-template-columns: repeat(5, 36px); gap: 3px; }
#mochila .slot { width: 36px; height: 36px; }
.qtd { position: absolute; right: 1px; bottom: 0; font-size: 10px; font-weight: 700; text-shadow: 1px 1px 1px #000, -1px -1px 1px #000; }
#battle { display: grid; gap: 3px; max-height: 210px; overflow-y: auto; }
#battle .vazio { color: var(--fraco); margin: 2px 0; }
.bat { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.bat:hover { background: #1a1c23; }
.bat.alvo { border-color: #ff3030; background: #2a1215; }
.bat canvas { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.bat .nm { flex: 1; min-width: 0; }
.bat .nm div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat .hpb { height: 4px; background: #300; border-radius: 2px; margin-top: 2px; }
.bat .hpb i { display: block; height: 100%; background: #00c000; border-radius: 2px; }
#skills { width: 100%; border-collapse: collapse; }
#skills td { padding: 1px 2px; } #skills td:last-child { text-align: right; color: #e6e6e6; }
#b-painel { position: fixed; top: 44px; right: 8px; display: none; }
@media (max-width: 760px) {
  #tela-jogo.ativa { grid-template-columns: 1fr; }
  #painel { position: fixed; top: 0; right: 0; bottom: 0; width: 240px; z-index: 5; transform: translateX(100%); transition: transform .2s; }
  #painel.aberto { transform: none; }
  #b-painel { display: block; z-index: 6; }
}
#palco #hud, #palco #chat, #palco .flutua, #palco #dpad, #palco #b-painel { position: absolute; }
/* slots com a silhueta do cliente original (Tibia.pic) */
.slot { background: #1d1f25 center/32px no-repeat; }
#equip .slot[data-slot="colar"] { background-image: url(assets/ui/slot_colar.png); }
#equip .slot[data-slot="cabeca"] { background-image: url(assets/ui/slot_cabeca.png); }
#equip .slot[data-slot="mochila"] { background-image: url(assets/ui/slot_mochila.png); }
#equip .slot[data-slot="arma"] { background-image: url(assets/ui/slot_arma.png); }
#equip .slot[data-slot="escudo"] { background-image: url(assets/ui/slot_escudo.png); }
#equip .slot[data-slot="corpo"] { background-image: url(assets/ui/slot_corpo.png); }
#equip .slot[data-slot="pernas"] { background-image: url(assets/ui/slot_pernas.png); }
#equip .slot[data-slot="anel"] { background-image: url(assets/ui/slot_anel.png); }
#equip .slot[data-slot="municao"] { background-image: url(assets/ui/slot_municao.png); }
#equip .slot[data-slot="pes"] { background-image: url(assets/ui/slot_pes.png); }
#equip .slot.cheio { background-image: none !important; background-color: #262931; }
.slot:empty::after { content: none; }
.slot.arrastando-sobre { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde) inset; }
.modos { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.modos .sep { width: 6px; }
.bt-ui { width: 22px; height: 22px; padding: 0; border-radius: 3px; background: #1d1f25 center/20px no-repeat; border: 1px solid #33363f; }
#b-mochila.fechada #mochila { display: none; }
#b-mochila.fechada .titulo::after { content: ' (fechada — clique direito na mochila)'; text-transform: none; letter-spacing: 0; }
#atalhos { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; z-index: 2; }
.atalho { position: relative; width: 104px; padding: 4px 6px; background: rgba(15,17,22,.9); border: 1px solid var(--borda);
  border-radius: 6px; font-size: 11px; line-height: 1.3; cursor: pointer; overflow: hidden; text-align: left; }
.atalho:hover { border-color: var(--azul); }
.atalho b { color: #f0a030; } .atalho small { color: var(--fraco); display: block; }
.atalho .cd { position: absolute; inset: 0 auto 0 0; background: rgba(0,0,0,.55); pointer-events: none; }
@media (max-width: 760px) { #atalhos { bottom: 170px; } .atalho { width: 84px; } }
@media (min-width: 761px) { #chat { bottom: 60px; } }

/* ================= painel no layout do OTClient (print do dono, 24/09) ================= */
#tela-jogo.ativa { grid-template-columns: 1fr 190px; }
#painel { background: #2b2b2b url(assets/ui/pedra.png) repeat; padding: 3px; font: 11px Verdana, Tahoma, sans-serif; color: #c0c0c0; }
.janela { background: #1f1f1f url(assets/ui/pedra.png); border: 1px solid #000; box-shadow: inset 1px 1px 0 #4a4a4a, inset -1px -1px 0 #111; margin-bottom: 3px; }
.jt { display: flex; align-items: center; gap: 2px; height: 16px; padding: 0 2px 0 5px; background: linear-gradient(#3c3c3c, #262626);
  border-bottom: 1px solid #000; font-weight: bold; color: #bdbdbd; font-size: 10px; }
.jt span { flex: 1; white-space: nowrap; overflow: hidden; }
.jt button { width: 12px; height: 12px; padding: 0; line-height: 9px; font-size: 10px; border-radius: 1px; background: #3a3a3a;
  border: 1px solid #111; color: #ddd; }
.jc { padding: 3px; background: rgba(0,0,0,.25); }
.janela.fechada { display: none; }
.janela.min .jc { display: none; }
.mapa-c { display: flex; gap: 3px; }
#minimapa { width: 150px; height: 116px; border: 1px solid #000; border-radius: 0; }
.mapa-bts { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mapa-bts .rosa { width: 30px; image-rendering: pixelated; }
.mapa-bts button { padding: 0 4px; font-size: 10px; border-radius: 2px; background: #3a3a3a; border: 1px solid #111; color: #ddd; }
.mapa-bts div { display: flex; gap: 2px; }
.status { padding: 2px 3px; }
.lb { display: flex; align-items: center; gap: 3px; margin: 2px 0; }
.lb .ic { width: 12px; text-align: center; font-size: 11px; } .ic-vida { color: #e03030; } .ic-mana { color: #4d7dff; }
.lb b { width: 36px; text-align: right; font-size: 10px; color: #ddd; }
.lb .barra { flex: 1; height: 11px; margin: 0; border: 1px solid #000; border-radius: 1px; }
.lb .barra span { line-height: 11px; font-size: 9px; }
.inv { display: flex; gap: 3px; padding: 2px; justify-content: center; }
#equip { grid-template-columns: repeat(3, 34px); gap: 2px; }
#equip .slot { width: 34px; height: 34px; border-radius: 0; border: 1px solid #000; box-shadow: inset 1px 1px 0 #111, inset -1px -1px 0 #444; }
.caixa-info { width: 34px; height: 34px; border: 1px solid #000; background: #262626; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font-size: 9px; line-height: 1.1; }
.caixa-info b { color: #ddd; font-size: 10px; }
.inv .modos { display: grid; grid-template-columns: repeat(2, 22px); gap: 2px; align-content: start; background: none; border: 0; padding: 0; margin: 0; }
.menu-bts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 3px 0; }
.menu-bts button { padding: 2px 0; font-size: 12px; line-height: 1.1; border-radius: 2px; background: #333 linear-gradient(#444, #2a2a2a);
  border: 1px solid #111; color: #ddd; }
.menu-bts button small { display: block; font-size: 9px; color: #aaa; }
.menu-bts button.on { box-shadow: inset 0 0 0 1px #d0a040; }
#mochila { grid-template-columns: repeat(4, 34px); gap: 2px; justify-content: center; }
#mochila .slot { width: 34px; height: 34px; border-radius: 0; border: 1px solid #000; box-shadow: inset 1px 1px 0 #111, inset -1px -1px 0 #444; }
#skills .sk { display: flex; justify-content: space-between; padding: 1px 2px; }
#skills .sk b { color: #e8e8e8; font-weight: normal; }
#skills .skb { height: 4px; margin: 0 2px 3px; background: #111; border: 1px solid #000; }
#skills .skb i { display: block; height: 100%; }
#battle { max-height: 220px; }
#lista-magias .mg { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 2px; border-bottom: 1px solid #111; }
#lista-magias .mg b { color: #f0a030; font-weight: normal; }
#lista-magias .mg small { color: #999; display: block; }
#lista-magias button { padding: 1px 6px; font-size: 10px; border-radius: 2px; background: #3a3a3a; border: 1px solid #111; color: #ddd; }
#b-mm, .bloco.barras, .bloco#equip { all: unset; }
@media (max-width: 760px) { #painel { width: 200px; } }
#minimapa { width: 136px; height: 110px; }
.mapa-bts { width: 38px; } .mapa-bts .rosa { width: 34px; }
.mapa-bts button { padding: 0 3px; }

/* ---------- janelas esticaveis e rolaveis (como no OTClient: arrastar a borda de baixo) ---------- */
#painel .janela .jc { overflow-y: auto; resize: vertical; min-height: 40px; }
#j-battle .jc { height: 150px; } #j-skills .jc { height: 230px; } #j-mochila .jc { height: 150px; }
#j-mapa .jc { height: 170px; overflow: hidden; }
#minimapa { width: 100%; height: 100%; }
.mapa-c { height: 100%; } .mapa-c canvas { flex: 1; min-width: 0; }
#skills .sec { text-align: center; color: #d0d0d0; margin: 3px 0 1px; }
/* dialogos (Options, texto do !spells) */
.dialogo { position: fixed; z-index: 20; left: 50%; top: 12%; transform: translateX(-50%); width: min(420px, 94vw);
  background: #1f1f1f url(assets/ui/pedra.png); border: 1px solid #000; box-shadow: 0 8px 30px rgba(0,0,0,.7), inset 1px 1px 0 #4a4a4a;
  font: 11px Verdana, Tahoma, sans-serif; color: #c8c8c8; }
.dialogo.fechado { display: none; }
.dlg-c { padding: 8px; background: rgba(0,0,0,.25); }
.dlg-c .ajuda { margin: 0 0 6px; color: #aaa; }
.dlg-bts { display: flex; justify-content: flex-end; margin-top: 8px; }
.dlg-bts button { padding: 4px 16px; border-radius: 2px; }
#lista-hotkeys { max-height: 50vh; overflow-y: auto; display: grid; gap: 3px; }
.hk { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px; align-items: center; }
.hk b { color: #f0c060; } .hk input[type=text] { margin: 0; padding: 3px 5px; font-size: 11px; border-radius: 2px; background: #111; }
.hk label { margin: 0; font-size: 10px; color: #aaa; display: flex; align-items: center; gap: 2px; }
#dt-texto { width: 100%; height: 50vh; resize: vertical; background: #111; color: #d8d8d8; border: 1px solid #000; font: 11px Verdana, sans-serif; padding: 6px; }
.dt-topo { display: flex; justify-content: center; margin-bottom: 4px; }
#log .npc { color: #5fd0ff; } #log .npc a { color: #8fe0ff; text-decoration: underline; cursor: pointer; }
/* alca de redimensionar: a borda de baixo INTEIRA da janela (antes so o cantinho direito funcionava) */
#painel .janela .jc { resize: none; }
.alca { height: 5px; cursor: ns-resize; background: linear-gradient(#2a2a2a, #151515); border-top: 1px solid #000; touch-action: none; }
.alca:hover, .alca.puxando { background: #4a4a4a; }
.janela.min .alca { display: none; }
/* painel da Hunt Privada (so para o dono, dentro da sala) */
#ph { position: absolute; top: 44px; left: 8px; z-index: 2; min-width: 230px; padding: 7px 10px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(40,20,70,.92), rgba(15,17,22,.92)); border: 1px solid #7a4df0;
  box-shadow: 0 0 14px rgba(122,77,240,.45); font-size: 12px; line-height: 1.55; }
#ph.oculto { display: none; }
#ph .t { font-weight: 700; color: #c9a8ff; letter-spacing: .03em; }
#ph .l { display: flex; justify-content: space-between; gap: 12px; } #ph .l b { color: #fff; }
#ph .bm { height: 6px; background: #221733; border-radius: 3px; margin: 3px 0; overflow: hidden; }
#ph .bm i { display: block; height: 100%; background: linear-gradient(90deg, #7a4df0, #ff5fd2); transition: width .3s; }
#ph .fim b { color: #ffcf5a; }

/* ================= Set Outfit (Ctrl + direito no personagem) ================= */
.menu-ctx { position: fixed; z-index: 40; min-width: 150px; padding: 3px; background: #262626 url(assets/ui/pedra.png);
  border: 1px solid #000; box-shadow: 0 6px 20px rgba(0,0,0,.7), inset 1px 1px 0 #4a4a4a; font: 11px Verdana, Tahoma, sans-serif; }
.menu-ctx.oculto { display: none; }
.menu-ctx button { display: flex; justify-content: space-between; width: 100%; padding: 4px 10px; border: 0; border-radius: 2px;
  background: none; color: #dcdcdc; text-align: left; font-size: 11px; }
.menu-ctx button:hover { background: #3d5a8a; color: #fff; }
.menu-ctx small { color: #999; margin-left: 12px; }
.menu-ctx hr { border: 0; border-top: 1px solid #111; border-bottom: 1px solid #3a3a3a; margin: 3px 0; }
#dlg-outfit { width: min(760px, 96vw); top: 5%; }
#dlg-outfit:focus { outline: none; }
/* janela solta: arrastar pela barra de titulo, zoom pela alca do canto ou pelos botoes - + (outfit.js) */
#dlg-outfit.solto { transform-origin: 0 0; }
#dlg-outfit .jt { cursor: move; touch-action: none; user-select: none; }
#dlg-outfit .jt button { cursor: pointer; }
.of-alca { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; z-index: 3; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 45%, #777 45%, #777 52%, transparent 52%, transparent 64%, #777 64%, #777 71%, transparent 71%, transparent 83%, #777 83%); }
.of-alca:hover, .of-alca.puxando { filter: brightness(1.6); }
.of .oculto { display: none !important; }
.of-abas { display: flex; gap: 2px; margin-bottom: 6px; }
.of-abas button { padding: 4px 18px; border-radius: 3px 3px 0 0; background: #2a2a2a; border: 1px solid #111; color: #aaa; font-size: 11px; }
.of-abas button.sel { background: #3b3b3b; color: #f0c060; box-shadow: inset 0 -2px 0 #d0a040; }
.of-corpo { display: flex; gap: 10px; }
.of-esq { width: 244px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.of-palco { position: relative; border: 1px solid #000; box-shadow: inset 0 0 0 1px #444, 0 0 18px rgba(0,0,0,.6); line-height: 0; }
#of-previa { width: 242px; height: 242px; image-rendering: pixelated; }
.of-girar { position: absolute; bottom: 6px; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(20,20,20,.75);
  border: 1px solid #000; color: #eee; font-size: 15px; line-height: 1; }
.of-girar.e { left: 6px; } .of-girar.d { right: 6px; }
.of-girar:hover { background: rgba(61,90,138,.9); }
.of-nav { display: flex; align-items: center; gap: 4px; }
.of-nav button { width: 30px; padding: 4px 0; border-radius: 2px; background: #333 linear-gradient(#444, #2a2a2a); border: 1px solid #111; color: #ddd; }
.of-nav div { flex: 1; text-align: center; background: #111; border: 1px solid #000; padding: 3px; }
.of-nav b { display: block; color: #f0c060; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-nav small { color: #888; font-size: 10px; }
.of-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.of-opcoes label { margin: 0; display: flex; align-items: center; gap: 4px; color: #ccc; font-size: 11px; cursor: pointer; }
.of-opcoes label.apagado { color: #555; cursor: default; }
.of-mont { color: #999; font-size: 11px; } .of-mont b { color: #9fd0ff; font-weight: normal; }
.of-dir { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.of-dir > div { display: flex; flex-direction: column; min-height: 0; }
.of-partes { display: flex; gap: 3px; margin-bottom: 4px; }
.of-partes button { flex: 1; padding: 4px 2px; border-radius: 2px; background: #2a2a2a; border: 1px solid #111; color: #bbb; font-size: 10px;
  box-shadow: inset 0 -4px 0 var(--cor, #555); }
.of-partes button.sel { color: #fff; border-color: #d0a040; background: #3a3a3a; }
#of-aleatorio { flex: none; width: 30px; box-shadow: none; }
#of-paleta { display: grid; grid-template-columns: repeat(19, 1fr); gap: 1px; background: #000; border: 1px solid #000; }
#of-paleta i { aspect-ratio: 1; cursor: pointer; box-shadow: inset 1px 1px 0 rgba(255,255,255,.15); }
#of-paleta i:hover { outline: 1px solid #fff; z-index: 1; }
#of-paleta i.sel { outline: 2px solid #fff; box-shadow: 0 0 0 3px #000; z-index: 2; }
.of-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 3px; color: #ccc; }
.of-sub small { color: #888; }
.of-sub input { width: 150px; margin: 0; padding: 3px 6px; font-size: 11px; border-radius: 2px; background: #111; }
.of-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 3px; height: 262px; overflow-y: auto;
  padding: 3px; background: #111; border: 1px solid #000; align-content: start; }
#of-aba-montaria .of-grade { height: 420px; }
.of-petinfo { font-size: 12px; margin: 0 0 6px; line-height: 1.5; }
.of-petinfo button { margin: 4px 0 2px; }
.of-petinfo button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.of-petxp { position: relative; height: 16px; background: #1a1a1a; border: 1px solid #333; border-radius: 3px; margin: 4px 0; overflow: hidden; }
.of-petxp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.of-petxp span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; color: #fff; text-shadow: 0 0 2px #000; }
.of-item .of-est { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 10px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.an-epico, .an-epico span { color: #ffd84a !important; font-weight: bold; }
.an-lend, .an-lend span { color: #ff3b3b !important; font-weight: bold; }
.an-evento, .an-evento span { color: #ff9a2e !important; font-weight: bold; }
.of-petnome { display: flex; gap: 6px; align-items: center; margin: 4px 0 6px; font-size: 12px; }
.of-petnome input { flex: 1; min-width: 0; }
.of-sec { grid-column: 1 / -1; font-size: 10px; color: #f0c060; padding: 4px 2px 1px; border-bottom: 1px solid #333; }
.of-item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2px; border: 1px solid #222;
  background: #1b1b1b; cursor: pointer; border-radius: 2px; }
.of-item:hover { border-color: #3d5a8a; background: #202633; }
.of-item.sel { border-color: #f0c060; background: #2a2518; box-shadow: 0 0 6px rgba(240,192,96,.35); }
.of-item canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.of-item span { width: 100%; font-size: 9px; color: #bbb; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-item.nenhuma .x { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #733; }
@media (max-width: 700px) {
  #dlg-outfit { top: 2%; max-height: 96vh; overflow-y: auto; }
  .of-corpo { flex-direction: column; } .of-esq { width: 100%; align-items: center; }
  .of-nav, .of-opcoes, .of-mont { width: 244px; }
  .of-grade { height: 200px; } #of-aba-montaria .of-grade { height: 260px; }
}
.of-opcoes input[type=checkbox] { display: inline-block; width: auto; margin: 0; padding: 0; accent-color: #d0a040; }

/* ================= itens: mira, efeitos ativos, loja, hotkeys com item ================= */
#tela.mirando { cursor: crosshair; }
#buffs { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 2; pointer-events: auto; }
.buff { width: 38px; padding: 2px 0 1px; background: rgba(15,17,22,.85); border: 1px solid #000; border-radius: 4px;
  box-shadow: inset 0 0 0 1px #3a3a3a; text-align: center; font: 10px Verdana, sans-serif; color: #e0e0e0; }
.buff .ic { width: 32px; height: 32px; margin: 0 auto; background: center/auto 32px no-repeat; image-rendering: pixelated;
  font-size: 20px; line-height: 32px; }
.buff.utamo { box-shadow: inset 0 0 0 1px #3a6ad8; } .buff.exp { box-shadow: inset 0 0 0 1px #d0a040; }
.buff.haste { box-shadow: inset 0 0 0 1px #40c070; } .buff.invis { box-shadow: inset 0 0 0 1px #9a70e0; }
@media (max-width: 760px) { #buffs { top: 44px; } }
.menu-bts button { min-height: 30px; }
#dlg-loja { width: min(620px, 96vw); top: 6%; }
.lj-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
#lj-abas { display: flex; flex-wrap: wrap; gap: 2px; }
#lj-abas button { padding: 4px 10px; border-radius: 3px 3px 0 0; background: #2a2a2a; border: 1px solid #111; color: #aaa; font-size: 11px; }
#lj-abas button.sel { background: #3b3b3b; color: #f0c060; box-shadow: inset 0 -2px 0 #d0a040; }
.lj-saldo { display: flex; align-items: center; gap: 4px; padding: 2px 8px; background: #111; border: 1px solid #000; white-space: nowrap; }
.lj-saldo i { width: 24px; height: 24px; background: 0 0/auto 24px no-repeat; image-rendering: pixelated; }
.lj-saldo b { color: #9fe0ff; font-size: 12px; }
#lj-desc { margin: 6px 0; }
#lj-lista { max-height: 58vh; overflow-y: auto; display: grid; gap: 2px; background: #111; border: 1px solid #000; padding: 3px; }
.lj-item { display: grid; grid-template-columns: 36px 1fr 58px auto; gap: 6px; align-items: center; padding: 3px 4px; background: #1b1b1b;
  border: 1px solid #222; }
.lj-item:hover { border-color: #3d5a8a; }
.lj-item .ic { width: 32px; height: 32px; background: 0 0/auto 32px no-repeat; image-rendering: pixelated; }
.lj-item .tx b { display: block; color: #e8e8e8; font-weight: normal; text-transform: capitalize; }
.lj-item .tx small { color: #999; font-size: 10px; }
.lj-item.outra-voc .tx small { color: #c07070; }
.lj-item input { margin: 0; padding: 3px 4px; font-size: 11px; border-radius: 2px; background: #0d0d0d; }
.lj-item button { padding: 4px 8px; font-size: 11px; border-radius: 2px; white-space: nowrap; }
.lj-item button:disabled { background: #333; color: #777; cursor: not-allowed; }
.hk { grid-template-columns: 30px 32px 1fr auto auto; }
.hk-slot { width: 32px; height: 32px; background: #111 url(assets/ui/slot_anel.png) center/24px no-repeat; border: 1px solid #000;
  display: flex; align-items: center; justify-content: center; }
.hk.com-item .hk-slot { background-image: none; }
.hk.arrastando-sobre .hk-slot { outline: 1px solid var(--verde); }
.hk-modo, .hk-limpa { display: none; }
.hk.com-item .hk-modo, .hk.com-item .hk-limpa { display: block; }
.hk.com-item input[type=text], .hk.com-item .hk-auto { display: none; }
.hk-modo { font-size: 10px; background: #111; color: #ddd; border: 1px solid #000; padding: 2px; grid-column: 3 / 5; }
.hk-limpa { padding: 0 6px; font-size: 12px; border-radius: 2px; }

/* abas do chat: Default + uma por conversa privada (js/pm.js) */
#abas-chat { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
#abas-chat button { padding: 3px 9px; font-size: 12px; border: 0; border-radius: 6px 6px 0 0; white-space: nowrap;
  background: rgba(15,17,22,.6); color: var(--fraco); }
#abas-chat button.on { background: rgba(15,17,22,.85); color: #fff; }
#abas-chat button.nova { color: #ff6b6b; font-weight: 600; }
#abas-chat .x { margin-left: 7px; opacity: .6; } #abas-chat .x:hover { opacity: 1; color: #ff6b6b; }
#log, .log-pm { border-top-left-radius: 0; }
.log-pm { overflow-y: auto; font-size: 13px; background: rgba(15,17,22,.75); border-radius: 0 8px 0 0; padding: 6px 8px; }
.log-pm div { margin: 2px 0; } .log-pm b { color: #5fb0ff; } .log-pm .eu b { color: #f2d45c; }
.log-pm .h { color: var(--fraco); font-size: 11px; } .log-pm .sis { color: #ff8a8a; }
#chat .oculto { display: none; }

/* aba do BOT (lado esquerdo do mapa) */
#bot-alca { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; writing-mode: vertical-rl; padding: 10px 3px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; border-radius: 0 6px 6px 0; border: 1px solid #000; border-left: 0;
  background: linear-gradient(90deg, #2a2a2a, #3a3a3a); color: #ccc; }
#bot-alca.on { color: #08130b; background: var(--verde); }
#bot { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; max-width: calc(100vw - 16px); z-index: 7; margin: 0;
  display: flex; flex-direction: column; font-size: 12px; color: #ddd; }
#bot.fechado { display: none; }
#bot .jt { height: 20px; font-size: 12px; }
#bot .jt button { width: 16px; height: 16px; font-size: 12px; line-height: 12px; }
.bot-topo { display: flex; gap: 6px; align-items: center; padding: 6px; background: rgba(0,0,0,.35); border-bottom: 1px solid #000; }
#bot-on { flex: none; padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 3px; background: #3a1f1f; border: 1px solid #000; color: #ff9b9b; }
#bot-on.on { background: #1d3a24; color: var(--verde); }
#bot-estado { flex: 1; min-width: 0; font-size: 11px; color: #bbb; line-height: 1.25; }
#bot-abas { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: rgba(0,0,0,.25); }
#bot-abas button { flex: 1 0 30%; padding: 3px 0; font-size: 11px; border-radius: 2px; background: #333 linear-gradient(#444, #2a2a2a); border: 1px solid #111; color: #ccc; }
#bot-abas button.on { box-shadow: inset 0 0 0 1px #d0a040; color: #f0d080; }
#bot-corpo { flex: 1; overflow-y: auto; padding: 4px 6px 10px; background: rgba(0,0,0,.25); }
.bt-sec { border: 1px solid #3a3a3a; border-radius: 3px; margin: 6px 0; padding: 4px 6px 6px; background: rgba(0,0,0,.2); }
.bt-sec legend { padding: 0 4px; color: #f0d080; font-weight: 600; font-size: 11px; }
#bot label { color: #ddd; font-size: 12px; margin: 4px 0; }
.bt-ck { display: flex !important; align-items: center; gap: 6px; cursor: pointer; }
.bt-ck input { width: auto; margin: 0; }
.bt-num { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; }
.bt-num input { display: inline-block !important; width: 62px !important; margin: 0 !important; padding: 2px 4px !important; border-radius: 2px !important; font-size: 12px; }
.bt-num select { flex: 1; min-width: 120px; padding: 2px; font-size: 12px; background: #0f1116; color: #ddd; border: 1px solid #3a3a3a; border-radius: 2px; }
.bt-ajuda { margin: 4px 0; font-size: 11px; color: #9a9a9a; line-height: 1.3; }
.bt-lista { display: grid; gap: 1px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.bt-mg, .bt-mon { display: flex; align-items: center; gap: 5px; padding: 2px 3px; background: rgba(255,255,255,.03); border-radius: 2px; }
.bt-mg span, .bt-mon span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-mg input, .bt-mon input { width: auto; margin: 0; }
.bt-mg small, .bt-mon small { color: #9a9a9a; font-size: 10px; }
.bt-mg.bloq { opacity: .45; }
.bt-mg button { padding: 0 4px; font-size: 9px; line-height: 14px; border-radius: 2px; background: #3a3a3a; border: 1px solid #111; color: #ddd; }
.bt-mg button:disabled { opacity: .3; }
.bt-bts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.bt-bts button { flex: 1; padding: 4px; font-size: 11px; border-radius: 2px; background: #3a3a3a; border: 1px solid #111; color: #ddd; }
@media (max-width: 700px) { #bot { width: 100%; max-width: none; } }
@media (min-width: 701px) { #palco.com-bot #hud, #palco.com-bot #chat { left: 308px; } #palco.com-bot #chat { width: min(420px, calc(100% - 316px)); } }
.bt-gravando { margin: 4px 0; padding: 4px 6px; font-size: 11px; font-weight: 600; color: #fff; background: #7a1d1d; border-radius: 3px; animation: bt-pisca 1.2s infinite; }
@keyframes bt-pisca { 50% { background: #a52a2a; } }
#bot-alca.grav { color: #fff; background: #a52a2a; }

/* Map View: + e - dentro do minimapa, clique anda, janela estica pela borda de baixo */
.mm-caixa { position: relative; flex: 1; min-width: 0; height: 100%; cursor: crosshair; }
.mm-caixa #minimapa { width: 100%; height: 100%; }
.mm-zoom { position: absolute; top: 3px; right: 3px; display: flex; flex-direction: column; gap: 2px; }
.mm-zoom button { width: 18px; height: 18px; padding: 0; font-size: 13px; line-height: 14px; font-weight: 700; border-radius: 2px;
  background: rgba(30,30,30,.85); border: 1px solid #000; color: #eee; cursor: pointer; }
.mm-zoom button:hover { background: rgba(70,70,70,.95); }

/* bot: LIGADO/DESLIGADO de cada aba, gravar/parar rota, rotas salvas */
.bt-chave { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 5px 6px; border-radius: 3px; background: #2a1414; border: 1px solid #4a1d1d; }
.bt-chave.on { background: #13261a; border-color: #1f4a2b; }
.bt-chave button { flex: none; padding: 3px 10px; font-size: 12px; font-weight: 700; border-radius: 3px; border: 1px solid #000; background: #3a1f1f; color: #ff9b9b; }
.bt-chave.on button { background: #1d3a24; color: var(--verde); }
.bt-chave span { font-size: 11px; color: #cfcfcf; }
#bot-abas button { position: relative; }
#bot-abas button::after { content: ''; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
#bot-abas button.desl::after { background: #d04040; }
#bot-abas button.desl { color: #a88; }
#bot input.bt-nome { display: block; width: 100%; margin: 6px 0 4px; padding: 4px 6px; font-size: 12px; border-radius: 2px; }
.bt-grav button { flex: 1; padding: 6px; font-size: 12px; font-weight: 700; }
.bt-grav .bt-grava { background: #5a1a1a; color: #ffd0d0; border-color: #000; }
.bt-grav .bt-grava:hover { background: #7a2020; }
.bt-grav .bt-para { background: #d0a040; color: #1a1205; border-color: #000; }
.bt-rota { display: flex; align-items: center; gap: 5px; padding: 3px; margin-top: 2px; background: rgba(255,255,255,.04); border-radius: 2px; }
.bt-rota span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bt-rota small { color: #9a9a9a; font-size: 10px; }
.bt-rota.longe span { color: #999; font-weight: 400; }
.bt-rota button { padding: 1px 6px; font-size: 11px; border-radius: 2px; background: #3a3a3a; border: 1px solid #111; color: #ddd; }
.bt-rota button:disabled { opacity: .35; }
.bt-ef { color: #9a9a9a; font-size: 10px; margin-left: 2px; }

/* janela de texto (!spells): mais larga, letra maior com zoom A- A+ */
#dlg-texto { width: min(640px, 96vw); }
#dlg-texto #dt-texto { height: 65vh; font-size: 13px; line-height: 1.35; font-family: Verdana, sans-serif; }
#dlg-texto .jt { height: 20px; }
#dlg-texto .dt-zoom { width: auto !important; height: 16px !important; padding: 0 5px !important; font-size: 11px !important; line-height: 14px !important; margin-left: 2px; }

/* mochila: 40 slots preenchendo a largura da janela (as colunas se ajustam, sem sobra dos lados) */
#painel #mochila { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px; justify-content: stretch; }
#painel #mochila .slot { width: auto; height: auto; aspect-ratio: 1; }

/* chat: canais (Npcs, Deaths, Help, Trade/Sell, Loot, Boss, Server Log) e o botao « » de esconder */
#chat-recolhe { font-weight: 700; padding: 3px 8px !important; }
#chat.recolhido { width: auto !important; }
#chat.recolhido #log, #chat.recolhido .log-pm, #chat.recolhido #f-fala, #chat.recolhido #abas-chat button:not(#chat-recolhe) { display: none; }
#chat.recolhido #chat-recolhe { border-radius: 6px; background: rgba(15,17,22,.85); color: #fff; }
#log .sis, .log-pm .sis { color: var(--fraco); }
.log-pm .look { color: #3fe23f; }
.log-pm .npc b { color: #5fd0ff; } .log-pm .npc { color: #9fdcff; } .log-pm .npc a { color: #8fe0ff; text-decoration: underline; cursor: pointer; }
.log-pm .morte { color: #ff8a8a; } .log-pm .morte b { color: #ff8a8a; }
.log-pm .boss { color: #f0c040; font-weight: 600; }
.canal-loot div { color: #d8d8d8; }
#log, .log-pm { max-height: 140px; }
/* celular: o painel e gaveta, a coluna de 190 px nao pode sobrar (o jogo ficava com metade da largura) */
@media (max-width: 760px) {
  #tela-jogo.ativa { grid-template-columns: 1fr; }
  #hud { font-size: 11px; max-width: calc(100% - 120px); }
  #log, .log-pm { max-height: 90px; font-size: 12px; }
}

/* Options: modo da hotkey com item em 3 botoes (Em mim / No alvo / Com mira), como o Hotkey Manager do Tibia */
.hk.com-item .hk-modo { display: flex !important; gap: 8px; flex-wrap: wrap; background: none; border: 0; padding: 0; }
.hk-modo label { font-size: 11px !important; color: #ddd !important; cursor: pointer; }
.hk-modo input { margin: 0 2px 0 0; }
/* chat com o dobro do tamanho (dono: nao dava para ler o Server Log) */
#chat { width: min(760px, calc(100% - 16px)); }
#log, .log-pm { max-height: 280px; }
@media (max-width: 760px) { #log, .log-pm { max-height: 170px; } }
@media (min-width: 701px) { #palco.com-bot #chat { width: min(760px, calc(100% - 316px)); } }

/* botao de esconder o chat: alca GRANDE no meio da lateral direita (pedido do dono); escondido, fica no mesmo lugar */
#abas-chat #chat-recolhe { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 64px; padding: 0 !important; font-size: 22px; line-height: 64px; text-align: center;
  border-radius: 0 10px 10px 0 !important; background: rgba(15,17,22,.9) !important; color: #fff; border: 1px solid #3a3d46; border-left: 0; }
#abas-chat #chat-recolhe:hover { background: rgba(40,44,54,.95) !important; }
#chat.recolhido { width: 0 !important; min-height: 180px; pointer-events: none; }
#chat.recolhido #chat-recolhe { pointer-events: auto; right: -30px; border-left: 1px solid #3a3d46; border-radius: 10px !important; }
@media (max-width: 760px) { #chat.recolhido { min-height: 120px; } }

/* Map View sem a rosa e o Centre: o minimapa ocupa a largura toda e da para arrastar */
#minimapa { touch-action: none; cursor: grab; }
.mm-caixa { width: 100%; }

/* janela de Hotkeys no formato do OTClient (26/09/2026) */
.hkdlg { width: min(460px, 94vw); }
.hk-lista { height: 190px; overflow-y: auto; background: #2b2b2b; border: 1px solid #111; box-shadow: inset 0 0 0 1px #444; padding: 2px 0; }
.hk-l { padding: 1px 6px; font-size: 12px; color: #909090; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-l.auto { color: #ffffff; } .hk-l.txt { color: #c0c0c0; } .hk-l.obj { color: #50c050; }
.hk-l.sel { background: #5a5a5a; }
.hk-linha { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; }
.hk-linha small { color: #888; }
.hk-sep { border-top: 1px solid #111; border-bottom: 1px solid #444; margin: 8px 0; }
.hk-rot { display: block; font-size: 12px; color: #ddd; margin-bottom: 3px; }
#hk-txt { width: 100%; box-sizing: border-box; padding: 4px 6px; background: #222; color: #eee; border: 1px solid #111; font-size: 12px; }
#hk-txt:disabled, .hkdlg button:disabled { opacity: .45; }
.hk-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ddd; margin: 6px 0 8px; }
.hk-obj { display: grid; grid-template-columns: 46px 1fr 1fr; gap: 8px; align-items: start; }
.hk-slot2 { width: 42px; height: 42px; background: #1a1a1a; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a3a3a;
  display: flex; align-items: center; justify-content: center; }
.hk-slot2.arrastando-sobre { outline: 1px solid var(--verde); }
.hk-col { display: flex; flex-direction: column; gap: 4px; }
.hkdlg .hk-col button, .hkdlg .hk-linha button, .hkdlg .dlg-bts button { padding: 4px 8px; font-size: 12px; border-radius: 2px; }
.hk-m.ativo { outline: 1px solid #f0c060; color: #f0c060; }
.hk-escolhe { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding: 4px; background: #1a1a1a; border: 1px solid #000; max-height: 120px; overflow-y: auto; font-size: 12px; color: #aaa; }
.hk-escolhe.oculto { display: none; }
.hk-opc { width: 32px; height: 32px; background: #111 0 0/auto 32px no-repeat; image-rendering: pixelated; cursor: pointer; border: 1px solid #333; }
.hk-opc:hover { border-color: #f0c060; }
.hkdlg .dlg-bts { gap: 6px; }
.hkdlg .hk-chk { justify-content: flex-start; width: auto; }
.hkdlg .hk-chk input { width: auto; margin: 0; flex: none; }
.bt-mg .bt-req { margin-left: 6px; color: #f0c060; font-size: 10px; white-space: nowrap; }
.bt-mg.bloq .bt-req { color: #e06060; }

/* canal Guild (26/09) */
.log-pm .g-lider b, .log-pm .g-lider span:last-child { color: #ff5050; }
.log-pm .g-vice b, .log-pm .g-vice span:last-child { color: #ff9a30; }
/* CHAT (26/09, pedido do dono): ja abre EXPANDIDO (altura fixa, nao cresce aos poucos) e 1 cm mais para baixo */
#log, .log-pm { height: 280px; }
@media (max-width: 760px) { #log, .log-pm { height: 170px; } }
@media (max-width: 600px) { #log, .log-pm { height: 80px; } }
@media (min-width: 761px) { #chat { bottom: 0; } }        /* dono pediu mais 1 cm: agora colado no pe da tela */

/* VIP List (pm.js): verde online, vermelho offline */
#vip-add { display: flex; gap: 4px; margin-bottom: 4px; } #vip-add input { flex: 1; min-width: 0; }
#vip-lista .vip { padding: 2px 4px; cursor: pointer; font-weight: 600; user-select: none; border-radius: 3px; }
#vip-lista .vip:hover { background: rgba(255,255,255,.06); }
#vip-lista .vip.on { color: #4fd34f; } #vip-lista .vip.off { color: #ff5a5a; }
#bt-pm { font-size: 13px; }

/* exercise DNT com brilho (27/09): a arma ativa pulsa dourado na mochila */
.slot.dnt { box-shadow: 0 0 6px 2px rgba(255, 210, 70, .85), inset 0 0 6px rgba(255, 210, 70, .6); animation: dntBrilho 1.4s ease-in-out infinite; }
.slot.dnt > div { filter: drop-shadow(0 0 3px #ffd84a) brightness(1.25); }
@keyframes dntBrilho { 50% { box-shadow: 0 0 11px 4px rgba(255, 225, 110, 1), inset 0 0 9px rgba(255, 225, 110, .8); } }