/* ================================================================
   DRAGON UNIVERSE HUD REBUILD — etapa 1
   Camada visual nova. A lógica continua em public/js/hud.js.
   Carregada depois de hud-art.css para permitir rollback imediato.
   ================================================================ */

.game {
  --du-bg: rgba(6, 10, 18, .90);
  --du-bg-soft: rgba(10, 17, 29, .78);
  --du-bg-glass: rgba(7, 13, 24, .72);
  --du-line: rgba(125, 171, 221, .24);
  --du-line-hot: rgba(255, 181, 61, .72);
  --du-orange: #ff9f24;
  --du-gold: #ffd66e;
  --du-blue: #55c8ff;
  --du-cyan: #83e8ff;
  --du-red: #ff5264;
  --du-green: #5ee69b;
  --du-violet: #b987ff;
  --du-text: #edf6ff;
  --du-muted: #9eafc3;
  --du-shadow: 0 10px 28px rgba(0,0,0,.48);
  --du-glow: 0 0 18px rgba(255,159,36,.16);
  --du-radius: 12px;
  --du-gap: clamp(8px, .75vw, 14px);
  --du-slot: clamp(43px, 2.7vw, 54px);
}

#hud {
  color: var(--du-text);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
  filter: none;
}

#hud-player,
#hud-quests,
#hud-chat,
#hud-loc,
#hud-win {
  box-sizing: border-box;
  border: 1px solid var(--du-line);
  background:
    linear-gradient(180deg, rgba(16,25,40,.94), rgba(5,10,18,.92)),
    var(--du-bg);
  box-shadow:
    var(--du-shadow),
    inset 0 1px 0 rgba(255,255,255,.045),
    var(--du-glow);
  backdrop-filter: blur(8px);
  opacity: var(--hud-alpha);
}

#hud-player:hover,
#hud-quests:hover,
#hud-chat:hover,
#hud-mini:hover,
#hud-win:hover { opacity: 1; }

/* Remove ornamentos PNG antigos só da estrutura principal. */
#hud-player,
#hud-quests,
#hud-chat,
#hud-win,
#hud-bar .hotbar-shell,
#hud .slot,
#hud .cons,
#hud .act,
#hud #hud-win .x,
#hud .act kbd,
#hud-menu button::before {
  border-image: none !important;
  background-image: none !important;
}

#hud-player::after,
#hud-quests::before,
#hud-quests::after,
#hud-bar .hotbar-shell::before,
#hud-bar .hotbar-shell::after,
.portrait-shell::after,
.hud-chat-mark,
.radar-side { display: none !important; }

#hud button {
  -webkit-tap-highlight-color: transparent;
}

/* ================================================================
   STATUS — topo esquerdo
   ================================================================ */
#hud-left {
  position: absolute;
  inset: 0;
  width: auto !important;
  pointer-events: none;
}

#hud-player {
  position: absolute;
  left: var(--du-gap) !important;
  top: var(--du-gap) !important;
  width: clamp(330px, 22vw, 410px) !important;
  height: 118px !important;
  min-height: 0 !important;
  padding: 12px 14px 12px 104px !important;
  border-radius: 14px 10px 14px 38px !important;
  clip-path: polygon(0 0, 96% 0, 100% 18%, 100% 100%, 8% 100%, 0 82%);
  overflow: visible !important;
}

#hud-player::before {
  content: "";
  position: absolute;
  left: 92px;
  right: 14px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--du-orange), var(--du-gold) 55%, transparent);
  box-shadow: 0 0 10px rgba(255,166,50,.45);
  opacity: .9;
}

.portrait-shell {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  width: 92px !important;
  height: 102px !important;
}

.portrait {
  position: absolute !important;
  inset: 3px auto auto 3px !important;
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #30445e, #0b111c 70%) !important;
  border: 2px solid var(--du-orange) !important;
  box-shadow:
    0 0 0 3px #0a111d,
    0 0 0 4px rgba(255,188,83,.32),
    0 0 17px rgba(255,159,36,.35),
    inset 0 0 16px #000 !important;
}

.portrait canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  image-rendering: pixelated;
}

#hud-level {
  position: absolute !important;
  left: 4px !important;
  top: 81px !important;
  width: 80px !important;
  height: 21px !important;
  padding: 0 6px;
  display: grid;
  place-items: center;
  z-index: 4;
  border-radius: 999px !important;
  border: 1px solid rgba(255,188,83,.52);
  background: linear-gradient(180deg, #2b1a0d, #0e0b0a) !important;
  color: #ffe5a3;
  font: 900 11px/1 "Trebuchet MS", sans-serif !important;
  letter-spacing: .03em;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
}

.pinfo {
  position: static !important;
  display: grid;
  grid-template-rows: 22px repeat(4, 17px);
  gap: 2px;
  width: 100%;
  height: 100%;
}

.pname {
  position: static !important;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px !important;
  padding: 0 3px;
}

.pname::before { display: none !important; }

.pname b {
  min-width: 0;
  max-width: 58%;
  color: #fff;
  font-size: 16px !important;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pname small {
  margin-left: auto;
  min-width: 0;
  max-width: 46%;
  color: #bcd4ea !important;
  font-size: 10px !important;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: 17px !important;
  display: flex;
  align-items: center;
  padding: 0 6px 0 44px;
  overflow: hidden;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.52);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.72);
}

.hbar::before { display: none !important; }

.hbar::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 36%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent);
  pointer-events: none;
  opacity: .55;
}

.hbar label {
  position: absolute !important;
  left: 6px;
  width: 35px !important;
  color: rgba(255,255,255,.88);
  font: 900 9px/1 "Trebuchet MS", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .035em;
  z-index: 3;
}

.hbar i {
  position: absolute !important;
  left: 41px !important;
  top: 2px !important;
  bottom: 2px !important;
  transform: none !important;
  transform-origin: left;
  border-radius: 2px !important;
  transition: width .22s ease;
  box-shadow: inset 0 0 4px rgba(255,255,255,.16);
}

.hbar span {
  position: relative !important;
  margin-left: auto !important;
  padding: 0 !important;
  z-index: 4;
  color: #fff;
  font: 800 9px/1 "Trebuchet MS", sans-serif !important;
}

.hbar.pl i { background: linear-gradient(90deg, #8f1023, #ec2b48 58%, #ff6579) !important; }
.hbar.ki i { background: linear-gradient(90deg, #075d9d, #159ce8 58%, #65ddff) !important; }
.hbar.exp i { background: linear-gradient(90deg, #178c62, #47d292 60%, #8cf4bd) !important; }
.hbar.fat i { background: linear-gradient(90deg, #6740a2, #a868e5 60%, #d7a1ff) !important; }

#hud-player.ko {
  filter: grayscale(.85) brightness(.72);
}

#hud-buffs {
  position: absolute !important;
  left: var(--du-gap) !important;
  top: 140px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 5px !important;
  max-width: 400px;
  pointer-events: auto;
}

.buff {
  width: 29px !important;
  height: 29px !important;
  border-radius: 8px !important;
  color: var(--c);
  background: linear-gradient(180deg, rgba(23,32,49,.96), rgba(5,9,15,.96)) !important;
  border: 1px solid color-mix(in srgb, var(--c) 70%, #fff 10%) !important;
  box-shadow: 0 0 9px color-mix(in srgb, var(--c) 38%, transparent) !important;
}

/* ================================================================
   MISSÕES / PROGRESSO — lateral esquerda
   ================================================================ */
#hud-quests {
  position: absolute !important;
  left: var(--du-gap) !important;
  top: 178px !important;
  width: clamp(320px, 21vw, 390px) !important;
  height: clamp(245px, 32vh, 360px) !important;
  min-width: 290px !important;
  min-height: 140px !important;
  max-width: min(560px, 48vw) !important;
  max-height: 62vh !important;
  padding: 0 !important;
  border-radius: var(--du-radius) !important;
  overflow: visible !important;
  clip-path: none !important;
}

#hud-quests.collapsed {
  height: 40px !important;
  min-height: 40px !important;
}

#hud-quests .htabs,
#hud-chat .htabs {
  position: relative !important;
  inset: auto !important;
  height: 40px !important;
  min-height: 40px;
  display: flex;
  align-items: stretch;
  gap: 0 !important;
  padding: 0 4px;
  border-bottom: 1px solid rgba(125,171,221,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}

#hud-quests .htabs button,
#hud-chat .htabs button {
  width: auto !important;
  height: auto !important;
  min-width: 0;
  padding: 0 11px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  color: #9faec0 !important;
  font: 800 11px/1 "Trebuchet MS", sans-serif !important;
  letter-spacing: .025em;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
}

#hud-quests .htabs button.on,
#hud-chat .htabs button.on {
  color: #fff1c7 !important;
  border-bottom-color: var(--du-orange) !important;
  background: linear-gradient(180deg, rgba(255,159,36,.10), transparent) !important;
}

#hud-quests .htabs button:hover,
#hud-chat .htabs button:hover { color: #fff !important; }

#hud-quests .htabs button svg {
  width: 15px !important;
  height: 15px !important;
}

#hud-quests .htabs .collapse,
#hud-chat .htabs .collapse {
  width: 34px !important;
  flex: 0 0 34px;
  margin-left: auto;
  color: var(--du-gold) !important;
  font-size: 20px !important;
}

#hud-quests .hbody {
  position: relative !important;
  box-sizing: border-box;
  height: calc(100% - 40px) !important;
  padding: 7px 10px 10px !important;
  overflow-y: auto;
  background: transparent !important;
}

.quest {
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) auto !important;
  column-gap: 9px !important;
  min-height: 0 !important;
  padding: 8px 5px !important;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.quest:last-child { border-bottom: 0; }

.quest .qi {
  width: 32px !important;
  height: 32px !important;
  grid-row: 1 / span 2;
  border-radius: 9px;
  background-size: 70% 70% !important;
  background-position: center !important;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.28);
  border: 1px solid rgba(255,181,61,.22);
}

.quest b {
  font-size: 12px !important;
  line-height: 1.15;
  color: #f6f9ff;
}

.quest p {
  margin: 2px 0 5px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  color: #a9b7ca !important;
}

.quest em {
  padding: 0 !important;
  font-size: 10px !important;
  color: #dbe6f4 !important;
}

.qbar {
  height: 5px !important;
  border-radius: 99px !important;
  background: rgba(0,0,0,.58) !important;
}

#hud button.near {
  width: 100%;
  min-height: 34px;
  padding: 6px 7px !important;
  border-radius: 8px !important;
  grid-template-columns: 18px auto minmax(0,1fr) !important;
  background: transparent !important;
}

#hud button.near:hover {
  background: rgba(255,159,36,.075) !important;
}

/* ================================================================
   TOPO DIREITO — menu compacto + minimapa
   ================================================================ */
#hud-right {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none;
}

#hud-menu {
  position: absolute !important;
  right: var(--du-gap) !important;
  top: var(--du-gap) !important;
  width: auto !important;
  height: 52px !important;
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  padding: 5px 7px !important;
  border: 1px solid var(--du-line);
  border-radius: 13px;
  background: rgba(6,11,20,.68);
  box-shadow: 0 8px 20px rgba(0,0,0,.30);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

#hud-menu button {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  border-radius: 9px !important;
  color: #b8c8dc !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid transparent !important;
  transition: .15s ease;
}

#hud-menu button:hover,
#hud-menu button.on {
  color: #fff0bf !important;
  border-color: rgba(255,181,61,.40) !important;
  background: rgba(255,159,36,.10) !important;
  transform: translateY(-1px);
}

#hud-menu button svg {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: currentColor !important;
}

#hud-menu span {
  display: none !important;
}

#hud-menu kbd {
  position: absolute !important;
  right: 2px !important;
  bottom: 1px !important;
  top: auto !important;
  color: #788ba4;
  font: 700 7px/1 sans-serif !important;
  background: none;
}

#hud-mini {
  position: absolute !important;
  right: var(--du-gap) !important;
  top: 78px !important;
  display: grid !important;
  justify-items: center;
  gap: 6px;
  pointer-events: auto;
  opacity: var(--hud-alpha);
  transform: none !important;
}

#hud-mini .ring {
  position: relative !important;
  width: clamp(146px, 10.2vw, 184px) !important;
  height: auto !important;
  aspect-ratio: 1;
  padding: 7px !important;
  box-sizing: border-box;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0) 63%, rgba(255,169,44,.20) 64%, rgba(255,169,44,.48) 66%, rgba(16,26,40,.95) 68%),
    rgba(5,10,17,.92) !important;
  border: 1px solid rgba(255,187,80,.58);
  box-shadow:
    0 10px 24px rgba(0,0,0,.46),
    0 0 18px rgba(255,159,36,.15),
    inset 0 0 0 3px rgba(3,8,15,.88);
}

#hud-mini .ring canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  background: #05090f;
  image-rendering: pixelated;
}

.ring b {
  font-size: 8px !important;
  font-weight: 900;
  color: #c8d5e5 !important;
  text-shadow: 0 1px 3px #000;
}

.ring .n {
  color: var(--du-gold) !important;
}

#hud-loc {
  position: relative !important;
  inset: auto !important;
  min-width: 130px;
  max-width: 190px !important;
  padding: 5px 11px !important;
  display: grid;
  justify-items: center;
  border-radius: 8px !important;
  clip-path: none !important;
}

#hud-loc b {
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: #f5f8fd;
}

#hud-loc small {
  font-size: 8px;
  color: #8295aa;
}

/* ================================================================
   CHAT — inferior esquerdo
   ================================================================ */
#hud-chat {
  position: absolute !important;
  left: var(--du-gap) !important;
  bottom: var(--du-gap) !important;
  width: clamp(340px, 24vw, 470px) !important;
  height: clamp(175px, 22vh, 235px) !important;
  min-width: 300px !important;
  min-height: 145px !important;
  max-width: min(650px, 55vw) !important;
  max-height: 52vh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  border-radius: var(--du-radius) !important;
  overflow: visible !important;
}

#hud-chat.collapsed {
  height: 40px !important;
  min-height: 40px !important;
}

#hud-chat .htabs {
  flex: 0 0 40px;
}

#hud-chat .htabs button[data-f] {
  flex: 1 1 auto !important;
  padding: 0 7px !important;
  font-size: 9px !important;
}

#output {
  flex: 1;
  min-height: 0;
  padding: 6px 9px !important;
  overflow-y: auto;
  background: transparent !important;
  color: #aeb9c7;
  font-size: 11px !important;
  line-height: 1.28;
  text-shadow: 0 1px 2px #000;
}

#chat-form {
  position: relative !important;
  display: flex;
  gap: 5px !important;
  padding: 5px 6px 6px !important;
  border-top: 1px solid rgba(255,255,255,.055);
}

#chat-form select,
#chat-form input {
  box-sizing: border-box;
  height: 30px !important;
  color: #e9f2fb !important;
  background: rgba(2,6,12,.68) !important;
  border: 1px solid rgba(125,171,221,.18) !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
  font: 700 10px/1 "Trebuchet MS", sans-serif !important;
}

#chat-form select { width: 72px !important; }

#chat-form input:focus {
  outline: none;
  border-color: rgba(255,181,61,.58) !important;
}

#hud #chat-emoji {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  display: grid;
  place-items: center;
  border-radius: 7px !important;
  color: #f2d7ff !important;
  background: rgba(178,103,255,.10) !important;
  border: 1px solid rgba(191,126,255,.30) !important;
  font-size: 15px !important;
  text-shadow: 0 0 7px rgba(190,105,255,.48) !important;
  box-shadow: none !important;
}

/* ================================================================
   HOTBAR — centro inferior
   ================================================================ */
#hud-bar {
  position: absolute !important;
  left: 50% !important;
  bottom: var(--du-gap) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  justify-items: center;
  gap: 5px !important;
  pointer-events: none;
}

#hud-bar .hotbar-shell {
  order: 2;
  width: auto !important;
  height: auto !important;
  padding: 6px 7px !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125,171,221,.20);
  border-radius: 13px;
  background: rgba(5,10,18,.72) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

#hotbar {
  display: flex !important;
  gap: 4px !important;
}

#hud .slot {
  position: relative !important;
  width: var(--du-slot) !important;
  height: var(--du-slot) !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px !important;
  border: 1px solid rgba(125,171,221,.20) !important;
  background:
    radial-gradient(circle at 50% 35%, hsl(var(--h, 30) 85% 55% / .16), rgba(8,13,22,.94) 68%) !important;
  box-shadow: inset 0 0 11px rgba(0,0,0,.55) !important;
}

#hud .slot:hover,
#hud .slot.drop {
  border-color: rgba(255,181,61,.66) !important;
  background:
    radial-gradient(circle at 50% 35%, hsl(var(--h, 30) 90% 60% / .28), rgba(12,17,26,.95) 70%) !important;
  box-shadow: 0 0 10px rgba(255,159,36,.18), inset 0 0 10px rgba(0,0,0,.55) !important;
}

#hud .slot:active { transform: scale(.95); }

#hud .slot svg {
  width: 54% !important;
  height: 54% !important;
  margin: 0 0 10% !important;
}

#hud .slot kbd {
  left: 4px !important;
  top: 3px !important;
  color: #8fa1b5 !important;
  font-size: 8px !important;
}

#hud .slot small {
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  font-size: 7px !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#hud .slot.empty {
  border-style: dashed !important;
  opacity: .66;
}

#consumables {
  order: 1;
  display: flex !important;
  gap: 4px !important;
  pointer-events: auto;
}

#consumables[hidden] { display: none !important; }

#hud .cons {
  position: relative !important;
  width: calc(var(--du-slot) * .78) !important;
  height: calc(var(--du-slot) * .78) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(125,171,221,.18);
  background: rgba(6,11,20,.78) !important;
}

/* ================================================================
   AÇÕES — inferior direito
   ================================================================ */
#hud-actions {
  position: absolute !important;
  right: var(--du-gap) !important;
  bottom: var(--du-gap) !important;
  width: 192px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 54px);
  grid-auto-rows: 54px;
  justify-content: end;
  align-content: end;
  gap: 7px;
  pointer-events: none;
}

#hud .act {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 54px !important;
  height: 54px !important;
  transform: none !important;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  color: #dce9f7 !important;
  background:
    radial-gradient(circle at 45% 30%, rgba(46,67,94,.96), rgba(7,12,21,.97) 68%) !important;
  border: 1px solid rgba(125,171,221,.28) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.42), inset 0 1px 3px rgba(255,255,255,.08) !important;
  pointer-events: auto;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

#hud .act svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  color: currentColor;
}

#hud .act:hover {
  filter: brightness(1.12) !important;
  border-color: rgba(255,181,61,.62) !important;
  transform: translateY(-1px) !important;
  color: #fff0c4 !important;
}

#hud .act:active { transform: scale(.94) !important; }

#hud .act[data-act="fist"] {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  width: 78px !important;
  height: 78px !important;
  margin-left: -24px;
  color: #fff2cf !important;
  background:
    radial-gradient(circle at 42% 28%, #ffb04d, #d65c18 48%, #671c0a 100%) !important;
  border: 2px solid #ffc66c !important;
  box-shadow: 0 0 20px rgba(255,117,38,.36), 0 6px 18px rgba(0,0,0,.48) !important;
}

#hud .act kbd {
  right: -3px !important;
  bottom: -4px !important;
  width: auto !important;
  height: auto !important;
  min-width: 19px;
  padding: 3px 4px;
  display: grid;
  place-items: center;
  border-radius: 6px !important;
  color: #d9e5f2;
  background: rgba(4,8,14,.92) !important;
  border: 1px solid rgba(125,171,221,.30);
  font: 900 8px/1 sans-serif !important;
  transform: none !important;
}

#hud .act[data-act="fist"] kbd {
  right: 50% !important;
  bottom: -9px !important;
  transform: translateX(50%) !important;
  min-width: 40px;
}

/* ================================================================
   BOTÕES RÁPIDOS
   ================================================================ */
#hud-quick {
  position: absolute !important;
  left: var(--du-gap) !important;
  bottom: calc(var(--du-gap) + 242px) !important;
  z-index: 7;
  display: flex;
  gap: 4px;
  pointer-events: auto;
  opacity: .28;
  transition: opacity .15s;
}

#hud-quick:hover { opacity: 1; }

#hud #hud-quick button {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  color: #aabbd0 !important;
  background: rgba(6,11,20,.78) !important;
  border: 1px solid rgba(125,171,221,.22) !important;
  font: 900 8px/1 sans-serif !important;
}

#hud #hud-quick button:hover {
  color: #ffe3a0 !important;
  border-color: rgba(255,181,61,.55) !important;
}

/* ================================================================
   JANELAS
   ================================================================ */
#hud-win {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(620px, calc(100vw - 36px)) !important;
  max-height: min(78vh, 720px) !important;
  padding: 0 !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  clip-path: none !important;
}

#hud-win.win-skills,
#hud-win.win-build { width: min(820px, calc(100vw - 36px)) !important; }

#hud-win.win-map { width: min(780px, calc(100vw - 36px)) !important; }

#hud-win header {
  margin: 0 !important;
  min-height: 45px;
  padding: 7px 10px 7px 14px !important;
  border-bottom: 1px solid rgba(125,171,221,.18) !important;
  background: linear-gradient(180deg, rgba(255,159,36,.075), transparent) !important;
}

#hud-win header > b {
  color: #ffe1a0 !important;
  font-size: 15px !important;
}

#hud .wtabs button {
  min-height: 28px;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  color: #a9b7c8 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 10px;
}

#hud .wtabs button.on,
#hud .wtabs button:hover {
  color: #fff0bf !important;
  background: rgba(255,159,36,.09) !important;
  border-color: rgba(255,181,61,.28) !important;
}

#hud #hud-win .x {
  width: 28px !important;
  height: 28px !important;
  display: grid;
  place-items: center;
  border-radius: 8px !important;
  color: #aebed0 !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

#hud #hud-win .x:hover {
  color: #fff;
  background: rgba(255,92,92,.11) !important;
  border-color: rgba(255,92,92,.28) !important;
}

.wbody {
  padding: 11px 14px 14px !important;
}

/* grips continuam funcionais, mas ficam discretos */
.hud-resize::before,
.hud-resize-vertical::before {
  opacity: .36 !important;
}

/* ================================================================
   SCROLLBARS
   ================================================================ */
#hud * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,170,55,.42) rgba(0,0,0,.22);
}
#hud *::-webkit-scrollbar { width: 6px; height: 6px; }
#hud *::-webkit-scrollbar-track { background: rgba(0,0,0,.20); }
#hud *::-webkit-scrollbar-thumb {
  background: rgba(255,170,55,.36);
  border-radius: 99px;
}

/* ================================================================
   RESPONSIVO
   ================================================================ */
@media (max-width: 1280px) {
  .game { --du-slot: 43px; }

  #hud-player {
    width: 350px !important;
    transform: scale(.92);
    transform-origin: top left;
  }

  #hud-buffs { top: 130px !important; }

  #hud-quests {
    top: 163px !important;
    width: 330px !important;
    height: min(330px, 38vh) !important;
  }

  #hud-menu {
    max-width: 420px;
    overflow-x: auto;
  }

  #hud-mini { top: 76px !important; }

  #hud-chat {
    width: 370px !important;
    height: 195px !important;
  }

  #hud-actions {
    transform: scale(.88);
    transform-origin: bottom right;
  }

  #hud-quick {
    bottom: 214px !important;
  }
}

@media (max-width: 900px) {
  #hud-player {
    transform: scale(.78);
    transform-origin: top left;
  }

  #hud-buffs {
    top: 108px !important;
    transform: scale(.85);
    transform-origin: top left;
  }

  #hud-quests {
    top: 136px !important;
    width: min(320px, 42vw) !important;
    height: min(300px, 36vh) !important;
  }

  #hud-menu {
    height: 46px !important;
    padding: 4px !important;
  }

  #hud-menu button {
    width: 34px !important;
    height: 34px !important;
  }

  #hud-menu button svg {
    width: 17px !important;
    height: 17px !important;
  }

  #hud-mini {
    top: 66px !important;
    transform: scale(.82) !important;
    transform-origin: top right !important;
  }

  #hud-chat {
    width: min(350px, 42vw) !important;
    height: 180px !important;
  }

  #hud-bar {
    transform: translateX(-50%) scale(.84) !important;
    transform-origin: bottom center;
  }

  #hud-actions {
    transform: scale(.78) !important;
    transform-origin: bottom right;
  }

  #hud-quick {
    bottom: 198px !important;
  }
}

@media (max-width: 720px) {
  #hud-player {
    left: 6px !important;
    top: 6px !important;
    transform: scale(.62) !important;
  }

  #hud-buffs {
    left: 7px !important;
    top: 82px !important;
    transform: scale(.72) !important;
  }

  #hud-mini {
    right: 4px !important;
    top: 5px !important;
    transform: scale(.58) !important;
  }

  #hud-menu {
    left: 6px !important;
    right: 6px !important;
    top: auto !important;
    bottom: 6px !important;
    width: auto !important;
    height: 58px !important;
    max-width: none !important;
    justify-content: flex-start;
    overflow-x: auto;
    z-index: 12;
  }

  #hud-menu button {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
  }

  #hud-menu kbd { display: none !important; }

  #hud-quests {
    left: 7px !important;
    top: 104px !important;
    width: min(92vw, 350px) !important;
    height: min(31vh, 260px) !important;
    max-width: 92vw !important;
  }

  #hud-chat {
    left: 7px !important;
    bottom: 72px !important;
    width: min(94vw, 390px) !important;
    height: min(24vh, 190px) !important;
    max-width: 94vw !important;
  }

  #hud-bar {
    bottom: 73px !important;
    transform: translateX(-50%) scale(.68) !important;
  }

  #hud-actions {
    right: 5px !important;
    bottom: 132px !important;
    transform: scale(.68) !important;
  }

  #hud-quick {
    left: auto !important;
    right: 7px !important;
    bottom: 70px !important;
    transform: scale(.88);
  }

  #hud-win {
    left: 4vw !important;
    right: 4vw !important;
    top: auto !important;
    bottom: 72px !important;
    transform: none !important;
    width: 92vw !important;
    max-height: 72vh !important;
  }
}

/* Estado limpo e partes ocultas seguem as preferências já existentes. */
.hud-hidden-part,
.hud-clean-hidden { display: none !important; }


/* ================================================================
   LEGACY MODULES PRESERVADOS — minimapa + ações
   Mantém a arte aprovada anteriormente; apenas posicionamento/escala
   ficam responsivos para desktop, tablet e celular.
   ================================================================ */

/* ---------- minimapa clássico */
#hud-mini {
  position: absolute !important;
  right: max(calc(var(--u) * 7), env(safe-area-inset-right)) !important;
  top: calc(var(--u) * 132) !important;
  width: calc(var(--u) * 280) !important;
  height: calc(var(--u) * 332) !important;
  display: block !important;
  opacity: var(--hud-alpha) !important;
  transform: none !important;
  transform-origin: top right !important;
  pointer-events: auto !important;
}

#hud-mini .ring {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: calc(var(--u) * 280) !important;
  height: calc(var(--u) * 274) !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#hud-mini .ring::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: url(../assets/hud/png/minimap-ring.png) no-repeat center / 100% 100% !important;
}

#hud-mini .ring canvas {
  position: absolute !important;
  left: 14% !important;
  top: 14% !important;
  width: 71% !important;
  height: 72% !important;
  border-radius: 50% !important;
  display: block !important;
  image-rendering: pixelated;
  background: #000 !important;
}

#hud-mini .ring b {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  font: 900 calc(var(--u) * 24) var(--font) !important;
  color: #fff !important;
  text-shadow:
    0 0 calc(var(--u) * 3) #000,
    0 0 calc(var(--u) * 3) #000 !important;
}

#hud-mini .ring .n {
  left: 50% !important;
  top: calc(var(--u) * 4) !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  color: #fff !important;
}
#hud-mini .ring .s {
  left: 50% !important;
  bottom: calc(var(--u) * 4) !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
#hud-mini .ring .w {
  left: calc(var(--u) * 8) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
#hud-mini .ring .e {
  right: calc(var(--u) * 8) !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

#hud-loc {
  position: absolute !important;
  left: calc(var(--u) * 45) !important;
  top: calc(var(--u) * 252) !important;
  width: calc(var(--u) * 206) !important;
  height: calc(var(--u) * 78) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url(../assets/hud/png/frame-location.png) no-repeat center / 100% 100% !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  clip-path: none !important;
}

#hud-loc b {
  max-width: 85% !important;
  color: #fff !important;
  font: 900 calc(var(--u) * 22) var(--font) !important;
  text-shadow: 0 1px 3px #000 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud-loc small {
  color: #e4e9f5 !important;
  font: bold calc(var(--u) * 17) var(--font) !important;
}

/* ---------- conjunto clássico de ações */
#hud-actions {
  position: absolute !important;
  right: max(0px, env(safe-area-inset-right)) !important;
  bottom: max(0px, env(safe-area-inset-bottom)) !important;
  width: calc(var(--u) * 420) !important;
  height: calc(var(--u) * 470) !important;
  display: block !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: bottom right !important;
}

#hud .act {
  position: absolute !important;
  display: block !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  pointer-events: auto !important;
}

#hud .act svg { display: none !important; }

#hud .act:hover {
  filter: brightness(1.2) !important;
  transform: none !important;
}
#hud .act:active {
  filter: brightness(.9) !important;
  transform: none !important;
}

#hud .act[data-act="fist"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 8) !important;
  bottom: calc(var(--u) * 54) !important;
  width: calc(var(--u) * 176) !important;
  height: calc(var(--u) * 178) !important;
  margin: 0 !important;
  background-image: url(../assets/hud/png/action-punch.png) !important;
}

#hud .act[data-act="dumbbell"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 30) !important;
  bottom: calc(var(--u) * 268) !important;
  width: calc(var(--u) * 116) !important;
  height: calc(var(--u) * 118) !important;
  background-image: url(../assets/hud/png/action-train.png) !important;
}

#hud .act[data-act="moon"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 146) !important;
  bottom: calc(var(--u) * 204) !important;
  width: calc(var(--u) * 116) !important;
  height: calc(var(--u) * 118) !important;
  background-image: url(../assets/hud/png/action-rest.png) !important;
}

#hud .act[data-act="wing"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 202) !important;
  bottom: calc(var(--u) * 76) !important;
  width: calc(var(--u) * 120) !important;
  height: calc(var(--u) * 122) !important;
  background-image: url(../assets/hud/png/action-fly.png) !important;
}

#hud .act[data-act="up"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 262) !important;
  bottom: calc(var(--u) * 194) !important;
  width: calc(var(--u) * 104) !important;
  height: calc(var(--u) * 106) !important;
  background-image: url(../assets/hud/png/action-powerup.png) !important;
}

#hud .act[data-act="talk"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 150) !important;
  bottom: calc(var(--u) * 334) !important;
  width: calc(var(--u) * 100) !important;
  height: calc(var(--u) * 100) !important;
  background-image: url(../assets/hud/png/action-talk.png) !important;
}

#hud .act kbd {
  position: absolute !important;
  right: calc(var(--u) * -6) !important;
  bottom: calc(var(--u) * -6) !important;
  width: calc(var(--u) * 46) !important;
  height: calc(var(--u) * 46) !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: url(../assets/hud/png/key-badge.png) no-repeat center / contain !important;
  font: 900 calc(var(--u) * 24) var(--font) !important;
  text-shadow: 0 1px 2px #000 !important;
}

#hud .act[data-act="fist"] kbd {
  right: 50% !important;
  bottom: calc(var(--u) * -30) !important;
  width: calc(var(--u) * 132) !important;
  height: calc(var(--u) * 46) !important;
  transform: translateX(50%) !important;
  background: url(../assets/hud/png/level-plate.png) no-repeat center / 100% 100% !important;
  font-size: calc(var(--u) * 22) !important;
}

/* Tablet: mesma arte, apenas reduzida proporcionalmente. */
@media (max-width: 1100px) {
  #hud-mini {
    transform: scale(.88) !important;
    transform-origin: top right !important;
  }
  #hud-actions {
    transform: scale(.88) !important;
    transform-origin: bottom right !important;
  }
}

/* Celular: mantém o conjunto inteiro e reserva espaço para o menu inferior. */
@media (max-width: 720px) {
  #hud-mini {
    right: max(4px, env(safe-area-inset-right)) !important;
    top: max(5px, env(safe-area-inset-top)) !important;
    transform: scale(.88) !important;
    transform-origin: top right !important;
  }

  #hud-actions {
    right: max(3px, env(safe-area-inset-right)) !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    transform: scale(.78) !important;
    transform-origin: bottom right !important;
  }
}

/* Telefones estreitos recebem mais uma redução, sem mudar o desenho. */
@media (max-width: 430px) {
  #hud-mini { transform: scale(.80) !important; }
  #hud-actions { transform: scale(.70) !important; }
}

/* Landscape baixo: evita que os botões invadam o centro da tela. */
@media (max-height: 520px) and (orientation: landscape) {
  #hud-mini {
    top: max(4px, env(safe-area-inset-top)) !important;
    transform: scale(.70) !important;
  }
  #hud-actions {
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    transform: scale(.66) !important;
  }
}

/* ================================================================
   ACTION CONTROLS — ORIGINAL PRESERVADO
   Visual exatamente como antes da reforma da HUD.
   Apenas escala/posição responsiva foi mantida.
   ================================================================ */

#hud-actions {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(var(--u) * 420) !important;
  height: calc(var(--u) * 470) !important;
  display: block !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: bottom right !important;
}

#hud .act {
  position: absolute !important;
  transform: none !important;
  background: no-repeat center / contain !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

#hud .act::before,
#hud .act::after {
  content: none !important;
  display: none !important;
}

#hud .act svg {
  display: none !important;
}

#hud .act:hover {
  filter: brightness(1.2) !important;
  transform: none !important;
}

#hud .act:active {
  filter: brightness(.9) !important;
  transform: none !important;
}

#hud .act[data-act="fist"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 8) !important;
  bottom: calc(var(--u) * 54) !important;
  width: calc(var(--u) * 176) !important;
  height: calc(var(--u) * 178) !important;
  margin: 0 !important;
  background-image: url(../assets/hud/png/action-punch.png) !important;
  /* a regra antiga do soco (gradiente, borda dourada e sombra) zerava o tamanho
     da arte: ela aparecia no tamanho original, cortada e com um anel claro */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#hud .act[data-act="dumbbell"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 30) !important;
  bottom: calc(var(--u) * 268) !important;
  width: calc(var(--u) * 116) !important;
  height: calc(var(--u) * 118) !important;
  background-image: url(../assets/hud/png/action-train.png) !important;
}

#hud .act[data-act="moon"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 146) !important;
  bottom: calc(var(--u) * 204) !important;
  width: calc(var(--u) * 116) !important;
  height: calc(var(--u) * 118) !important;
  background-image: url(../assets/hud/png/action-rest.png) !important;
}

#hud .act[data-act="wing"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 202) !important;
  bottom: calc(var(--u) * 76) !important;
  width: calc(var(--u) * 120) !important;
  height: calc(var(--u) * 122) !important;
  background-image: url(../assets/hud/png/action-fly.png) !important;
}

#hud .act[data-act="up"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 262) !important;
  bottom: calc(var(--u) * 194) !important;
  width: calc(var(--u) * 104) !important;
  height: calc(var(--u) * 106) !important;
  background-image: url(../assets/hud/png/action-powerup.png) !important;
}

#hud .act[data-act="talk"] {
  left: auto !important;
  top: auto !important;
  right: calc(var(--u) * 150) !important;
  bottom: calc(var(--u) * 334) !important;
  width: calc(var(--u) * 100) !important;
  height: calc(var(--u) * 100) !important;
  background-image: url(../assets/hud/png/action-talk.png) !important;
}

#hud .act kbd {
  position: absolute !important;
  right: calc(var(--u) * -6) !important;
  bottom: calc(var(--u) * -6) !important;
  width: calc(var(--u) * 46) !important;
  height: calc(var(--u) * 46) !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url(../assets/hud/png/key-badge.png) no-repeat center / contain !important;
  font: 900 calc(var(--u) * 24) var(--font) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000 !important;
  z-index: 5 !important;
}

#hud .act[data-act="fist"] kbd {
  right: 50% !important;
  bottom: calc(var(--u) * -30) !important;
  transform: translateX(50%) !important;
  width: calc(var(--u) * 132) !important;
  height: calc(var(--u) * 46) !important;
  background: url(../assets/hud/png/level-plate.png) no-repeat center / 100% 100% !important;
  font-size: calc(var(--u) * 22) !important;
}

/* Responsividade: não redesenha, só reduz o conjunto inteiro. */
@media (max-width: 1100px) {
  #hud-actions {
    transform: scale(.88) !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 720px) {
  #hud-actions {
    right: max(3px, env(safe-area-inset-right)) !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    transform: scale(.78) !important;
    transform-origin: bottom right !important;
  }
}

@media (max-width: 430px) {
  #hud-actions {
    transform: scale(.70) !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #hud-actions {
    right: max(3px, env(safe-area-inset-right)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    transform: scale(.66) !important;
    transform-origin: bottom right !important;
  }
}


/* ================================================================
   COMBAT SLOTS — Beam (X) / Blast (B)
   Mantém os controles clássicos e adiciona dois slots configuráveis.
   ================================================================ */

#hud-actions {
  width: calc(var(--u) * 540) !important;
}

/* Os dois novos slots ficam à esquerda do conjunto clássico para não
   sobrepor Fly/Rest/Train/Power Up/Talk/Soco. */
#hud .act.combat-slot {
  width: calc(var(--u) * 96) !important;
  height: calc(var(--u) * 96) !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border-radius: 50% !important;
  border: calc(var(--u) * 3) solid #d98916 !important;
  background:
    radial-gradient(circle at 37% 28%, rgba(105,190,255,.96) 0%, rgba(15,78,163,.98) 40%, rgba(2,24,73,.99) 76%, #020b20 100%) !important;
  box-shadow:
    0 0 0 calc(var(--u) * 2) #07101c,
    inset 0 0 0 calc(var(--u) * 2) rgba(255,204,80,.64),
    inset 0 0 calc(var(--u) * 14) rgba(72,174,255,.34),
    0 calc(var(--u) * 4) calc(var(--u) * 9) rgba(0,0,0,.52),
    0 0 calc(var(--u) * 8) rgba(255,153,25,.18) !important;
}

#hud .act.combat-slot:hover {
  filter: brightness(1.16) !important;
}

#hud .act.combat-slot.holding {
  filter: brightness(1.24) saturate(1.18) !important;
  box-shadow:
    0 0 0 calc(var(--u) * 2) #07101c,
    inset 0 0 0 calc(var(--u) * 2) rgba(255,221,104,.82),
    0 0 calc(var(--u) * 16) hsl(var(--slot-h) 95% 62% / .58) !important;
}

#hud .act.combat-slot svg {
  display: block !important;
  width: 48% !important;
  height: 48% !important;
  margin: 0 !important;
  color: #f4fbff !important;
  fill: currentColor !important;
  filter:
    drop-shadow(0 0 calc(var(--u) * 4) hsl(var(--slot-h) 95% 68% / .92))
    drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(0,0,0,.75)) !important;
  pointer-events: none;
}

/* X e B juntos, num arco curto colado ao Voar e ao Power Up. */
#hud .act[data-act="beam-slot"] {
  right: calc(var(--u) * 384) !important;
  bottom: calc(var(--u) * 166) !important;
}

#hud .act[data-act="blast-slot"] {
  right: calc(var(--u) * 348) !important;
  bottom: calc(var(--u) * 58) !important;
}

/* Badge X/B usa a mesma moldura dos controles clássicos. */
#hud .act.combat-slot kbd {
  right: calc(var(--u) * -7) !important;
  bottom: calc(var(--u) * -7) !important;
  z-index: 6 !important;
}

/* Caneta: funciona no desktop e também vira o controle de edição no touch. */
#hud .act.combat-slot .act-edit {
  position: absolute;
  left: calc(var(--u) * -5);
  top: calc(var(--u) * -5);
  z-index: 7;
  width: calc(var(--u) * 29);
  height: calc(var(--u) * 29);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 50%;
  border: calc(var(--u) * 2) solid #dc8f1b;
  background: #09111f;
  color: #ffe1a0;
  font: 900 calc(var(--u) * 15)/1 var(--font);
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
  opacity: .76;
  pointer-events: auto;
}

#hud .act.combat-slot:hover .act-edit,
#hud .act.combat-slot .act-edit:hover {
  opacity: 1;
  color: #fff3c8;
}

/* Seletor dos ataques dos slots. */
#hud-win.win-combat-slot {
  width: min(600px, calc(100vw - 32px)) !important;
}

.combat-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 11px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid rgba(255,181,61,.18);
}

.combat-slot-head > span {
  color: #dce7f4;
  font-size: 12px;
}

.combat-slot-head small {
  color: #8fa3ba;
  white-space: nowrap;
}

.combat-slot-head small b {
  color: #ffd98b;
}

.combat-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}

#hud .combat-pick {
  --h: 200;
  min-height: 54px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  border: 1px solid rgba(118,166,219,.20);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(20,32,50,.90), rgba(7,13,23,.94));
  color: #edf5ff;
}

#hud .combat-pick:hover,
#hud .combat-pick.on {
  border-color: hsl(var(--h) 90% 64% / .66);
  background:
    linear-gradient(180deg, hsl(var(--h) 55% 28% / .50), rgba(7,13,23,.95));
  box-shadow: inset 0 0 12px hsl(var(--h) 90% 55% / .08);
}

.combat-pick-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, hsl(var(--h) 80% 45% / .46), rgba(4,10,19,.86) 70%);
  border: 1px solid hsl(var(--h) 80% 66% / .30);
}

.combat-pick-icon svg {
  width: 22px;
  height: 22px;
  color: hsl(var(--h) 95% 83%);
  filter: drop-shadow(0 0 4px hsl(var(--h) 85% 60% / .5));
}

.combat-pick > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.combat-pick b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.combat-pick small {
  color: #899bb0;
  font-size: 9px;
}

/* Responsividade do conjunto inteiro: o visual clássico não é redesenhado. */
@media (max-width: 720px) {
  #hud-actions {
    width: calc(var(--u) * 540) !important;
  }
  .combat-slot-grid {
    grid-template-columns: 1fr;
  }
  #hud .act.combat-slot .act-edit {
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
    opacity: 1;
  }
}

@media (max-width: 430px) {
  #hud-actions {
    transform: scale(.68) !important;
    transform-origin: bottom right !important;
  }
}


/* ================================================================
   HOTBAR GLASS — transparência refinada
   Mantém ícones/textos legíveis e deixa a moldura menos pesada.
   ================================================================ */

#hud-bar {
  background: transparent !important;
  box-shadow: none !important;
}

#hud-bar .hotbar-shell {
  background:
    linear-gradient(180deg, rgba(10,18,34,.18), rgba(4,9,20,.12)) !important;
  border: 1px solid rgba(255,174,72,.22) !important;
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 18px rgba(255,170,70,.035) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#hotbar {
  background: transparent !important;
}

#hud #hotbar .slot {
  background:
    radial-gradient(circle at 50% 34%,
      hsl(var(--h, 30) 80% 55% / .10),
      rgba(4,10,24,.34) 70%) !important;
  border: 1px solid rgba(255,173,71,.14) !important;
  box-shadow:
    inset 0 0 9px rgba(0,0,0,.30),
    0 2px 7px rgba(0,0,0,.14) !important;
}

#hud #hotbar .slot:hover,
#hud #hotbar .slot.drop {
  background:
    radial-gradient(circle at 50% 34%,
      hsl(var(--h, 30) 88% 58% / .20),
      rgba(7,14,30,.46) 72%) !important;
  border-color: rgba(255,181,61,.40) !important;
  box-shadow:
    0 0 9px rgba(255,159,36,.12),
    inset 0 0 9px rgba(0,0,0,.30) !important;
}

#hud #hotbar .slot.empty {
  background: rgba(4,10,24,.20) !important;
  border-color: rgba(125,171,221,.10) !important;
  opacity: .78 !important;
}

#hud #hotbar .slot small,
#hud #hotbar .slot kbd {
  opacity: .96 !important;
}


/* ================================================================
   CHAT MMO CLASSIC — referência de chat lateral clássico
   Ícones à direita, fonte compacta e fundo em degradê que desaparece.
   ================================================================ */

#hud-chat.chat-mmo {
  position: absolute !important;
  left: var(--du-gap) !important;
  bottom: var(--du-gap) !important;
  width: clamp(360px, 27vw, 520px) !important;
  height: clamp(190px, 24vh, 250px) !important;
  min-width: 320px !important;
  min-height: 158px !important;
  max-width: min(680px, 62vw) !important;
  max-height: 54vh !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 3px !important;
  clip-path: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(28, 20, 10, .69) 0%,
      rgba(29, 20, 10, .57) 28%,
      rgba(25, 18, 10, .40) 54%,
      rgba(20, 14, 8, .20) 75%,
      rgba(13, 10, 7, .035) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 150, .06),
    0 3px 12px rgba(0,0,0,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* textura/luz muito sutil no topo, sem fechar o painel */
#hud-chat.chat-mmo::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:46%;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,195,79,.025), transparent 34%, rgba(255,218,139,.018));
  z-index:0;
}

#hud-chat.chat-mmo .hud-chat-mark {
  display:none !important;
}

/* ---------------- lateral direita com ícones ---------------- */
#hud-chat.chat-mmo .chat-side-tabs {
  position:absolute !important;
  right:4px !important;
  top:7px !important;
  bottom:auto !important;
  left:auto !important;
  z-index:5;
  width:30px !important;
  height:auto !important;
  min-height:0 !important;
  padding:3px 2px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  border:0 !important;
  border-left:1px solid rgba(214,178,112,.10) !important;
  background:
    linear-gradient(180deg, rgba(32,24,15,.22), rgba(20,15,10,.05)) !important;
}

#hud-chat.chat-mmo .chat-side-tabs button {
  position:relative !important;
  flex:0 0 26px !important;
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:3px !important;
  color:rgba(215,202,172,.68) !important;
  background:rgba(33,27,19,.22) !important;
  box-shadow:none !important;
  opacity:.76;
  transition:
    color .12s ease,
    background .12s ease,
    opacity .12s ease,
    transform .12s ease;
}

#hud-chat.chat-mmo .chat-side-tabs button[hidden] {
  display:none !important;
}

#hud-chat.chat-mmo .chat-side-tabs button span {
  display:none !important;
}

#hud-chat.chat-mmo .chat-side-tabs button svg {
  display:block !important;
  width:16px !important;
  height:16px !important;
  color:currentColor !important;
}

#hud-chat.chat-mmo .chat-side-tabs button:hover,
#hud-chat.chat-mmo .chat-side-tabs button.on {
  color:#ffe1a1 !important;
  opacity:1;
  transform:translateX(-1px);
  background:rgba(110,82,42,.28) !important;
}

#hud-chat.chat-mmo .chat-side-tabs button.on {
  box-shadow:
    inset 2px 0 0 rgba(255,190,74,.62),
    inset 0 0 8px rgba(255,181,61,.06) !important;
}

/* recolher fica no fim da coluna */
#hud-chat.chat-mmo .chat-side-tabs .collapse {
  margin:3px 0 0 !important;
  width:26px !important;
  height:20px !important;
  min-height:20px !important;
  flex:0 0 20px !important;
  font:900 16px/1 Arial,sans-serif !important;
  color:rgba(255,213,123,.62) !important;
}

/* ---------------- área de mensagens ---------------- */
#hud-chat.chat-mmo #output {
  position:absolute !important;
  z-index:2;
  left:7px !important;
  right:39px !important;
  top:7px !important;
  bottom:32px !important;
  min-height:0 !important;
  padding:1px 3px 8px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:transparent !important;
  color:#e8d79d !important;
  font-family:Verdana, Arial, sans-serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.20 !important;
  letter-spacing:-.01em;
  text-shadow:
    1px 1px 0 rgba(0,0,0,.94),
    0 0 2px rgba(0,0,0,.70) !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(184,139,66,.20) transparent;
}

#hud-chat.chat-mmo #output::-webkit-scrollbar {
  width:4px;
}
#hud-chat.chat-mmo #output::-webkit-scrollbar-track {
  background:transparent;
}
#hud-chat.chat-mmo #output::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(184,139,66,.20);
}

#hud-chat.chat-mmo #output .chat-line {
  min-height:13px;
  margin:0 !important;
  padding:0 1px !important;
  line-height:1.20 !important;
  word-break:break-word;
}

#hud-chat.chat-mmo #output .chat-line:hover {
  background:linear-gradient(90deg, rgba(255,223,153,.035), transparent 86%);
}

/* Cores de canal inspiradas no modelo enviado. */
#hud-chat.chat-mmo #output .channel-say,
#hud-chat.chat-mmo #output .channel-chat {
  color:#ead696 !important;
}

#hud-chat.chat-mmo #output .channel-ooc {
  color:#ee7272 !important;
}

#hud-chat.chat-mmo #output .channel-whisper {
  color:#d89cff !important;
}

#hud-chat.chat-mmo #output .channel-map {
  color:#65dddc !important;
}

#hud-chat.chat-mmo #output .channel-team {
  color:#f0d04f !important;
}

#hud-chat.chat-mmo #output .channel-system {
  color:#e7c16c !important;
}

#hud-chat.chat-mmo #output .channel-tutorial {
  color:#79d4ff !important;
}

#hud-chat.chat-mmo #output .channel-support {
  color:#ff9fcf !important;
}

#hud-chat.chat-mmo #output .channel-trade {
  color:#ffd76a !important;
}

/* mantém cores explícitas vindas do servidor, mas com boa leitura */
#hud-chat.chat-mmo #output span,
#hud-chat.chat-mmo #output b {
  text-shadow:
    1px 1px 0 rgba(0,0,0,.94),
    0 0 2px rgba(0,0,0,.68);
}

/* ---------------- barra de digitação ---------------- */
#hud-chat.chat-mmo #chat-form {
  position:absolute !important;
  z-index:4;
  left:7px !important;
  right:39px !important;
  bottom:5px !important;
  height:23px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  border:0 !important;
  background:transparent !important;
}

#hud-chat.chat-mmo #chat-form select,
#hud-chat.chat-mmo #chat-form input {
  box-sizing:border-box !important;
  height:22px !important;
  min-height:22px !important;
  padding:0 6px !important;
  border:1px solid rgba(126,94,50,.22) !important;
  border-radius:2px !important;
  color:#eddca9 !important;
  background:rgba(20,15,10,.31) !important;
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.25) !important;
  font:600 10px/1 Verdana, Arial, sans-serif !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.82) !important;
}

#hud-chat.chat-mmo #chat-form select {
  width:70px !important;
  flex:0 0 70px !important;
}

#hud-chat.chat-mmo #chat-form input {
  flex:1 1 auto !important;
  min-width:0 !important;
}

#hud-chat.chat-mmo #chat-form input::placeholder {
  color:rgba(221,204,166,.43) !important;
}

#hud-chat.chat-mmo #chat-form select:focus,
#hud-chat.chat-mmo #chat-form input:focus {
  outline:none !important;
  border-color:rgba(223,167,76,.48) !important;
  background:rgba(23,17,10,.42) !important;
}

#hud-chat.chat-mmo #chat-emoji {
  flex:0 0 22px !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(177,112,155,.22) !important;
  border-radius:3px !important;
  color:rgba(255,190,222,.78) !important;
  background:rgba(55,28,45,.22) !important;
  box-shadow:none !important;
  font-size:12px !important;
}

/* ---------------- recolhido ---------------- */
#hud-chat.chat-mmo.collapsed {
  width:42px !important;
  height:154px !important;
  min-width:42px !important;
  min-height:154px !important;
  background:
    linear-gradient(180deg, rgba(28,20,10,.50), rgba(18,13,8,.05)) !important;
}

#hud-chat.chat-mmo.collapsed #output,
#hud-chat.chat-mmo.collapsed #chat-form {
  display:none !important;
}

#hud-chat.chat-mmo.collapsed .chat-side-tabs {
  right:5px !important;
  top:5px !important;
  border-left:0 !important;
}

/* resize fica quase invisível nesse modelo */
#hud-chat.chat-mmo .hud-resize::before,
#hud-chat.chat-mmo .hud-resize-vertical::before {
  opacity:.16 !important;
}

/* ---------------- responsivo ---------------- */
@media (max-width: 900px) {
  #hud-chat.chat-mmo {
    width:min(410px, 46vw) !important;
    height:190px !important;
  }
}

@media (max-width: 720px) {
  #hud-chat.chat-mmo {
    left:7px !important;
    bottom:72px !important;
    width:min(92vw, 430px) !important;
    height:min(28vh, 205px) !important;
    max-width:92vw !important;
  }

  #hud-chat.chat-mmo #output {
    font-size:10px !important;
    right:40px !important;
  }

  #hud-chat.chat-mmo .chat-side-tabs button {
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }

  #hud-chat.chat-mmo .chat-side-tabs button svg {
    width:17px !important;
    height:17px !important;
  }
}


/* ================================================================
   PROGRESS / NEARBY — MMO GLASS
   Mesmo vocabulário visual do chat: leve, transparente e legível.
   ================================================================ */

#hud-quests {
  position:absolute !important;
  left:var(--du-gap) !important;
  top:178px !important;
  width:clamp(320px, 22vw, 410px) !important;
  height:clamp(230px, 31vh, 350px) !important;
  min-width:300px !important;
  min-height:150px !important;
  max-width:min(560px, 52vw) !important;
  max-height:60vh !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:4px !important;
  clip-path:none !important;
  background:
    linear-gradient(
      180deg,
      rgba(31,22,12,.66) 0%,
      rgba(31,22,12,.54) 26%,
      rgba(27,19,11,.38) 54%,
      rgba(20,14,9,.18) 78%,
      rgba(13,10,7,.025) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,222,150,.06),
    0 4px 14px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#hud-quests::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:42% !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(255,190,75,.028), transparent 40%, rgba(255,222,148,.018)) !important;
  z-index:0;
}

#hud-quests::after {
  display:none !important;
}

/* topo mais discreto */
#hud-quests .htabs {
  position:relative !important;
  z-index:3;
  inset:auto !important;
  height:32px !important;
  min-height:32px !important;
  display:flex !important;
  align-items:stretch !important;
  gap:2px !important;
  padding:2px 5px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(208,163,89,.11) !important;
  background:
    linear-gradient(180deg, rgba(70,50,27,.20), rgba(35,25,15,.04)) !important;
}

#hud-quests .htabs button {
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  padding:0 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:2px 2px 0 0 !important;
  color:rgba(219,202,167,.70) !important;
  background:transparent !important;
  font:700 10px/1 Verdana, Arial, sans-serif !important;
  letter-spacing:0 !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.80) !important;
  box-shadow:none !important;
}

#hud-quests .htabs button.on {
  color:#f5d58c !important;
  border-bottom-color:rgba(230,166,67,.72) !important;
  background:
    linear-gradient(180deg, rgba(124,88,43,.18), rgba(65,43,21,.04)) !important;
}

#hud-quests .htabs button:hover {
  color:#ffe7ae !important;
}

#hud-quests .htabs button em {
  min-width:0 !important;
  margin-left:1px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#9fcbe8 !important;
  font:700 9px/1 Verdana,Arial,sans-serif !important;
}

#hud-quests .htabs .collapse {
  width:28px !important;
  flex:0 0 28px !important;
  margin-left:auto !important;
  padding:0 !important;
  color:rgba(246,200,108,.66) !important;
  font:900 15px/1 Arial,sans-serif !important;
}

/* conteúdo */
#hud-quests .hbody {
  position:relative !important;
  z-index:2;
  box-sizing:border-box !important;
  height:calc(100% - 32px) !important;
  padding:5px 8px 11px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:transparent !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(185,140,68,.20) transparent;
}

#hud-quests .hbody::-webkit-scrollbar {
  width:4px;
}
#hud-quests .hbody::-webkit-scrollbar-track {
  background:transparent;
}
#hud-quests .hbody::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(185,140,68,.20);
}

/* cada item vira texto + valor; sem caixa e sem ícone */
#hud-quests .quest {
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  column-gap:10px !important;
  align-items:start !important;
  min-height:0 !important;
  margin:0 !important;
  padding:8px 5px 8px 7px !important;
  border:0 !important;
  border-bottom:1px solid rgba(231,201,142,.055) !important;
  background:transparent !important;
}

#hud-quests .quest:last-child {
  border-bottom:0 !important;
}

#hud-quests .quest::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:2px;
  border-radius:2px;
  background:var(--qc, #e7b25f);
  opacity:.56;
  box-shadow:0 0 5px color-mix(in srgb, var(--qc, #e7b25f) 32%, transparent);
}

#hud-quests .quest-copy {
  min-width:0;
  padding-left:5px;
}

#hud-quests .quest b {
  display:block;
  margin:0 0 2px !important;
  color:var(--qc, #efd394) !important;
  font:700 10px/1.15 Verdana, Arial, sans-serif !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.86) !important;
}

#hud-quests .quest p {
  margin:0 0 5px !important;
  color:rgba(220,211,191,.78) !important;
  font:600 9px/1.28 Verdana, Arial, sans-serif !important;
  text-shadow:1px 1px 0 rgba(0,0,0,.72) !important;
}

#hud-quests .quest em {
  align-self:start;
  justify-self:end;
  max-width:110px;
  margin:0 !important;
  padding:0 !important;
  color:rgba(235,230,218,.86) !important;
  font:700 9px/1.15 Verdana, Arial, sans-serif !important;
  font-style:normal !important;
  text-align:right;
  text-shadow:1px 1px 0 rgba(0,0,0,.80) !important;
  white-space:nowrap;
}

#hud-quests .qbar {
  position:relative;
  width:100%;
  height:3px !important;
  overflow:hidden;
  border:0 !important;
  border-radius:99px !important;
  background:rgba(13,10,8,.36) !important;
  box-shadow:none !important;
}

#hud-quests .qbar i {
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--qc, #e5b35f) !important;
  box-shadow:
    0 0 5px color-mix(in srgb, var(--qc, #e5b35f) 32%, transparent);
}

/* ícones antigos deixam de ocupar espaço mesmo se algum markup legado aparecer */
#hud-quests .qi {
  display:none !important;
}

/* "Por perto" segue o mesmo visual textual */
#hud-quests button.near {
  width:100% !important;
  min-height:0 !important;
  padding:8px 7px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:2px !important;
  text-align:left !important;
  border:0 !important;
  border-bottom:1px solid rgba(231,201,142,.055) !important;
  border-radius:0 !important;
  color:#e8d6aa !important;
  background:transparent !important;
  box-shadow:none !important;
}

#hud-quests button.near:hover {
  background:
    linear-gradient(90deg, rgba(255,201,98,.06), transparent 80%) !important;
}

#hud-quests button.near > svg {
  display:none !important;
}

#hud-quests button.near b {
  color:#f1d38f !important;
  font:700 10px/1.15 Verdana,Arial,sans-serif !important;
}

#hud-quests button.near span {
  color:rgba(218,210,193,.72) !important;
  font:600 9px/1.25 Verdana,Arial,sans-serif !important;
}

#hud-quests .empty {
  margin:10px 6px !important;
  color:rgba(224,211,180,.65) !important;
  font:600 9px/1.35 Verdana,Arial,sans-serif !important;
}

/* recolhido: somente uma faixa mínima */
#hud-quests.collapsed {
  width:190px !important;
  height:34px !important;
  min-height:34px !important;
  background:
    linear-gradient(90deg, rgba(30,22,13,.50), rgba(20,15,10,.10)) !important;
}

#hud-quests.collapsed .hbody {
  display:none !important;
}

#hud-quests.collapsed .htabs {
  height:34px !important;
  min-height:34px !important;
}

/* resize mais discreto */
#hud-quests .hud-resize::before,
#hud-quests .hud-resize-vertical::before {
  opacity:.14 !important;
}

@media (max-width:900px) {
  #hud-quests {
    width:min(340px, 42vw) !important;
    height:min(310px, 36vh) !important;
  }
}

@media (max-width:720px) {
  #hud-quests {
    left:7px !important;
    top:104px !important;
    width:min(92vw, 360px) !important;
    height:min(31vh, 270px) !important;
    max-width:92vw !important;
  }

  #hud-quests .quest b,
  #hud-quests button.near b {
    font-size:9px !important;
  }

  #hud-quests .quest p,
  #hud-quests button.near span,
  #hud-quests .quest em {
    font-size:8px !important;
  }
}


/* ================================================================
   CHAT COLLAPSE FIX — botão de expandir sempre acessível
   ================================================================ */

#hud-chat.chat-mmo.collapsed {
  width:42px !important;
  height:188px !important;
  min-width:42px !important;
  min-height:188px !important;
  overflow:visible !important;
}

#hud-chat.chat-mmo.collapsed .chat-side-tabs {
  right:5px !important;
  top:5px !important;
  bottom:auto !important;
  width:32px !important;
  padding:3px 2px 30px !important;
  border-left:0 !important;
  overflow:visible !important;
}

/* botão de expandir fica fixo e destacado na base da coluna */
#hud-chat.chat-mmo.collapsed .chat-side-tabs .collapse {
  position:absolute !important;
  left:2px !important;
  right:auto !important;
  bottom:3px !important;
  top:auto !important;
  width:28px !important;
  height:24px !important;
  min-width:28px !important;
  min-height:24px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(238,177,75,.38) !important;
  border-radius:4px !important;
  color:#ffe1a0 !important;
  background:rgba(52,37,20,.64) !important;
  box-shadow:
    0 2px 5px rgba(0,0,0,.42),
    inset 0 0 7px rgba(255,184,66,.08) !important;
  opacity:1 !important;
  z-index:10 !important;
  font:900 18px/1 Arial,sans-serif !important;
}

/* no estado aberto, continua discreto */
#hud-chat.chat-mmo:not(.collapsed) .chat-side-tabs .collapse {
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  display:grid !important;
  place-items:center !important;
}

/* garante área de clique confortável em telas touch */
@media (max-width:720px) {
  #hud-chat.chat-mmo.collapsed {
    height:198px !important;
  }

  #hud-chat.chat-mmo.collapsed .chat-side-tabs .collapse {
    width:30px !important;
    height:28px !important;
    min-height:28px !important;
    font-size:20px !important;
  }
}


/* ================================================================
   HUD INFERIOR — UNIT FRAME MMO CLÁSSICO
   Nome em cima, Vida e Ki lado a lado com a Esfera do Dragão no
   centro, Stamina numa linha fina e as hotkeys 1-0 logo abaixo.
   Seletores próprios (#hud-unit) para não herdar a HUD antiga.
   ================================================================ */
#hud #hud-unit {
  --us: 36px;                 /* lado do slot */
  --ug: 3px;                  /* espaço entre slots */
  --uw: calc(var(--us) * 10 + var(--ug) * 9);
  --ue: 44px;                 /* diâmetro da esfera */
  position: absolute;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: var(--uw);
  z-index: 9;
  pointer-events: auto;
  opacity: var(--hud-alpha);
  transition: opacity .15s;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  user-select: none;
}
#hud #hud-unit:hover { opacity: 1; }
#hud #hud-unit.hud-hidden-part,
#hud #hud-unit.hud-clean-hidden { display: none !important; }
#hud #hud-unit .unit-portrait-cache { display: none; }

/* ---------------- status ---------------- */
#hud #hud-unit .unit-status {
  position: relative;
  padding-top: 1px;
}
#hud #hud-unit .unit-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 17px;
  margin-bottom: 2px;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(90deg, rgba(14,32,24,.78), rgba(18,30,24,.62) 48%, rgba(46,34,18,.62) 52%, rgba(52,38,20,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font: 700 11px/17px Verdana, Tahoma, Arial, sans-serif;
  text-shadow: 1px 1px 0 #000, 0 0 3px rgba(0,0,0,.8);
}
#hud #hud-unit .unit-names b,
#hud #hud-unit .unit-names span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
#hud #hud-unit .unit-names b { color: #8fe6b5; padding: 0 calc(var(--ue) / 2 + 4px) 0 6px; }
#hud #hud-unit .unit-names span { color: #f2e2b4; padding: 0 6px 0 calc(var(--ue) / 2 + 4px); }

#hud #hud-unit .unit-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
#hud #hud-unit .ubar {
  position: relative;
  height: 21px;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(10,10,12,.82);
  border: 1px solid #120d08;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
}
#hud #hud-unit .ubar.hp { border-radius: 3px 0 0 3px; border-right: 0; }
#hud #hud-unit .ubar.ki { border-radius: 0 3px 3px 0; border-left: 0; }
#hud #hud-unit .ubar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: width .2s linear;
}
#hud #hud-unit .ubar.hp i {
  background:
    linear-gradient(165deg, rgba(255,255,255,.18) 0 34%, transparent 34% 100%),
    linear-gradient(180deg, #f0505c 0%, #d22e3d 46%, #a81c2a 54%, #861422 100%);
}
#hud #hud-unit .ubar.ki i {
  background:
    linear-gradient(195deg, rgba(255,255,255,.2) 0 34%, transparent 34% 100%),
    linear-gradient(180deg, #5fe0dc 0%, #2fbcc0 46%, #1e98a0 54%, #136f78 100%);
}
#hud #hud-unit .ubar span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 11px/1 Verdana, Tahoma, Arial, sans-serif;
  letter-spacing: .2px;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 2px rgba(0,0,0,.8);
  white-space: nowrap;
}
#hud #hud-unit .ubar.hp span { padding-right: calc(var(--ue) / 2); }
#hud #hud-unit .ubar.ki span { padding-left: calc(var(--ue) / 2); }

#hud #hud-unit .ubar.stam {
  height: 5px;
  margin-top: 2px;
  border-radius: 2px;
  border: 1px solid rgba(10,8,4,.9);
  box-shadow: none;
}
#hud #hud-unit .ubar.stam i { background: linear-gradient(180deg, #ffe58a, #d9a531); }

/* ---------------- Esfera do Dragão ---------------- */
#hud #hud-unit .unit-emblem {
  position: absolute;
  left: 50%;
  top: calc(1px + 17px + 2px + 10.5px);   /* centro na altura das barras */
  width: var(--ue);
  height: var(--ue);
  transform: translate(-50%, -50%);
  z-index: 3;
  border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
}
#hud #hud-unit .unit-emblem svg { width: 100%; height: 100%; display: block; }
#hud #hud-unit .unit-emblem.up {
  filter: drop-shadow(0 0 5px rgba(255,190,60,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.75));
  animation: hud-unit-ki 1.1s ease-in-out infinite alternate;
}
#hud #hud-unit .unit-emblem.down svg { filter: saturate(.55) brightness(.85); }
@keyframes hud-unit-ki {
  to { filter: drop-shadow(0 0 9px rgba(255,214,90,1)) drop-shadow(0 2px 3px rgba(0,0,0,.75)); }
}
#hud #hud-unit #hud-power {
  position: absolute;
  left: 50%;
  top: calc(100% - 3px);
  transform: translateX(-50%);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(20,14,6,.88);
  border: 1px solid #8a6424;
  color: #ffd877;
  font: 700 9px/1.1 Verdana, Tahoma, Arial, sans-serif;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
#hud #hud-unit #hud-power:empty { display: none; }

/* ---------------- KO / morto ---------------- */
#hud #hud-unit.ko .ubar i,
#hud #hud-unit.ko .unit-emblem svg { filter: grayscale(.85) brightness(.75); }

/* ---------------- hotkeys 1-0 ---------------- */
#hud #hud-unit .unit-slots {
  position: relative;
  margin-top: 4px;
}
#hud #hud-unit-hotbar {
  display: grid;
  grid-template-columns: repeat(10, var(--us));
  gap: var(--ug);
}
#hud #hud-unit .uslot {
  position: relative;
  width: var(--us);
  height: var(--us);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 2px solid #b8a674;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.07), transparent 65%),
    linear-gradient(180deg, rgba(62,60,56,.94), rgba(30,29,27,.96));
  box-shadow: 0 0 0 1px rgba(18,14,8,.95), inset 0 0 0 1px rgba(0,0,0,.65), inset 0 2px 4px rgba(0,0,0,.45);
  cursor: pointer;
  pointer-events: auto;
}
#hud #hud-unit .uslot:hover,
#hud #hud-unit .uslot.drop {
  border-color: #f1d48a;
  box-shadow: 0 0 0 1px rgba(18,14,8,.95), 0 0 6px rgba(255,210,110,.55), inset 0 0 0 1px rgba(0,0,0,.65);
}
#hud #hud-unit .uslot:active { transform: translateY(1px); }
#hud #hud-unit .uslot.empty {
  border-color: #8c7f5a;
  background: linear-gradient(180deg, rgba(44,43,40,.82), rgba(24,23,22,.88));
}
#hud #hud-unit .uslot svg {
  width: 66%;
  height: 66%;
  fill: currentColor;
  color: hsl(var(--h, 38) 80% 64%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.85)) drop-shadow(0 0 3px hsl(var(--h, 38) 85% 55% / .35));
}
#hud #hud-unit .uslot kbd {
  position: absolute;
  left: 2px;
  bottom: 0;
  color: #fff;
  font: 700 10px/1 Verdana, Tahoma, Arial, sans-serif;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
  pointer-events: none;
}

/* consumíveis F1-F4: mesma moldura, à direita das hotkeys */
#hud #hud-unit-items {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  display: flex;
  gap: var(--ug);
}
#hud #hud-unit-items[hidden] { display: none; }
#hud #hud-unit .uslot.cons canvas {
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
}
#hud #hud-unit .uslot.cons b {
  position: absolute;
  right: 2px;
  top: 1px;
  color: #fff;
  font: 700 9px/1 Verdana, Tahoma, Arial, sans-serif;
  text-shadow: 1px 1px 0 #000;
}
#hud #hud-unit .uslot.cons kbd { font-size: 8px; }

/* ---------------- telas menores ---------------- */
@media (max-width: 860px) {
  #hud #hud-unit { --us: 32px; --ue: 40px; }
  #hud #hud-unit-items { left: auto; right: 0; bottom: calc(100% + 66px); }
}
/* até 720 px o menu de ícones desce para o rodapé (58 px): a HUD fica logo acima dele */
@media (max-width: 720px) {
  #hud #hud-unit { --us: 31px; bottom: calc(max(6px, env(safe-area-inset-bottom)) + 64px); }
  /* os botões de ação (X/B, E/R/T, soco) sobem para cima da HUD em vez de cobri-la */
  #hud #hud-actions { bottom: calc(160px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 420px) {
  #hud #hud-unit { --us: 28px; --ug: 2px; --ue: 36px; }
  #hud #hud-unit .unit-names { font-size: 10px; }
  #hud #hud-unit .ubar span { font-size: 10px; }
  #hud #hud-unit .uslot kbd { font-size: 9px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #hud #hud-unit { --us: 28px; --ue: 36px; bottom: max(4px, env(safe-area-inset-bottom)); }
}

/* ================================================================
   PROGRESSO / POR PERTO NO TOPO ESQUERDO
   O painel do personagem saiu do topo (virou a HUD inferior), então
   Progresso/Por perto sobe para o canto e os buffs ficam logo acima
   da HUD inferior, como nos MMOs.
   ================================================================ */
#hud #hud-quests {
  top: var(--du-gap) !important;
  margin-top: 0 !important;
}
#hud #hud-buffs {
  left: 50% !important;
  top: auto !important;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 104px) !important;
  transform: translateX(-50%) !important;
  justify-content: center;
  max-width: 380px;
}
@media (max-width: 720px) {
  /* o minimapa ocupa o topo direito: o painel não passa por baixo dele */
  #hud #hud-quests {
    top: 6px !important;
    width: min(360px, calc(100vw - 140px)) !important;
    max-width: calc(100vw - 140px) !important;
  }
  #hud #hud-buffs {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 64px + 92px) !important;
    transform: translateX(-50%) scale(.85) !important;
    transform-origin: bottom center;
  }
}

/* Botões P/C/S/M/◉: esconder vence o display:flex/grid !important dos painéis
   (sem isto, C, M e o modo limpo não escondiam chat, minimapa e ações). */
#hud #hud-quests.hud-hidden-part, #hud #hud-quests.hud-clean-hidden,
#hud #hud-chat.hud-hidden-part, #hud #hud-chat.hud-clean-hidden,
#hud #hud-mini.hud-hidden-part, #hud #hud-mini.hud-clean-hidden,
#hud #hud-actions.hud-clean-hidden,
#hud #hud-buffs.hud-clean-hidden { display: none !important; }
#hud #hud-quick button.off {
  color: #7d7d7d !important;
  border-color: rgba(120,120,120,.5) !important;
  text-decoration: line-through;
}
#hud #hud-quick button.on-clean {
  color: #ffd877 !important;
  border-color: #c99a3a !important;
  box-shadow: 0 0 6px rgba(255,200,90,.55) !important;
}

/* Botões rápidos embaixo do minimapa: o hud.js (placeQuick) mede o minimapa e
   preenche --qx/--qy; antes da primeira medida ficam no topo direito. */
#hud #hud-quick {
  left: var(--qx, calc(100% - 140px)) !important;
  top: var(--qy, 200px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 8;
  opacity: .45;
}
#hud #hud-quick:hover { opacity: 1; }

/* ================================================================
   BARRA DE MENU — SÓ OS BOTÕES (arte em assets/hud/menu/*.png)
   Sem a caixa de fundo: cada botão é o ícone com a letra da tecla
   embaixo. Hover cresce e brilha; a janela aberta fica dourada.
   ================================================================ */
#hud #hud-menu {
  --mb: 46px;                       /* tamanho do ícone */
  height: auto !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  max-width: none !important;
}
#hud #hud-menu button {
  width: var(--mb) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#hud #hud-menu button::before,
#hud #hud-menu button::after { display: none !important; content: none !important; }
#hud #hud-menu button svg { display: none !important; }
#hud #hud-menu button img {
  width: var(--mb);
  height: var(--mb);
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
  transition: transform .12s ease, filter .12s ease;
}
#hud #hud-menu button:hover img {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(120,220,255,.65)) brightness(1.08);
}
#hud #hud-menu button:active img { transform: scale(.95); }
#hud #hud-menu button.on img {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(255,200,80,.9)) brightness(1.12);
}
#hud #hud-menu kbd {
  position: static !important;
  display: block !important;
  min-height: 11px;
  color: #a9c1df !important;
  background: none !important;
  font: 900 11px/1 Verdana, Tahoma, Arial, sans-serif !important;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0 2px 3px rgba(0,0,0,.6);
}
#hud #hud-menu button.on kbd,
#hud #hud-menu button:hover kbd { color: #ffe3a0 !important; }

@media (max-width: 1280px) { #hud #hud-menu { --mb: 40px; } }
@media (max-width: 720px) {
  /* no celular a barra fica no rodapé; sem fundo, os botões precisam de contraste próprio */
  #hud #hud-menu {
    --mb: 34px;
    height: auto !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
  }
  #hud #hud-menu button { flex: 0 0 auto !important; }
  #hud #hud-menu kbd { display: none !important; }
}

/* ================================================================
   X / B MAIS PERTO DO SOCO
   Centros (em --u, medidos da direita/baixo): soco (96,142), Voar
   (262,136), Power Up (314,246). O X e o B ficavam reservados atrás
   do Voar e do Power Up; sem esses botões sobrava um buraco e o
   polegar não alcançava. Agora ocupam as vagas livres.
   ================================================================ */
#hud #hud-actions .act[data-act="beam-slot"] {      /* X: centro (404,200) */
  right: calc(var(--u) * 356) !important;
  bottom: calc(var(--u) * 152) !important;
}
#hud #hud-actions .act[data-act="blast-slot"] {     /* B: centro (372,92) */
  right: calc(var(--u) * 324) !important;
  bottom: calc(var(--u) * 44) !important;
}
#hud #hud-actions.no-up .act[data-act="beam-slot"] {   /* X na vaga do Power Up */
  right: calc(var(--u) * 266) !important;
  bottom: calc(var(--u) * 198) !important;
}
#hud #hud-actions.no-fly .act[data-act="blast-slot"] { /* B na vaga do Voar */
  right: calc(var(--u) * 214) !important;
  bottom: calc(var(--u) * 88) !important;
}

/* ================================================================
   ÍCONES DAS TÉCNICAS (assets/hud/skills/*.svg)
   A arte já traz moldura redonda: no slot ela ocupa quase tudo.
   ================================================================ */
#hud img.skill-ic {
  display: block;
  pointer-events: none;
  user-select: none;
}
#hud #hud-unit .uslot img.skill-ic {
  width: 92%;
  height: 92%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
#hud .skill .si img.skill-ic,
#hud .combat-pick-icon img.skill-ic {
  width: 100%;
  height: 100%;
}
#hud .skill .si:has(img.skill-ic),
#hud .combat-pick-icon:has(img.skill-ic) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* X / B: o ícone vira a própria face do botão redondo */
#hud .act.combat-slot img.skill-ic {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
}

/* arte pintada é quadrada: cantos arredondados no slot e redonda no X/B */
#hud #hud-unit .uslot img.skill-ic { width: 100%; height: 100%; border-radius: 1px; filter: none; }
#hud .skill .si img.skill-ic, #hud .combat-pick-icon img.skill-ic { border-radius: 6px; }
#hud .act.combat-slot img.skill-ic { border-radius: 50%; }


/* ================================================================
   LEFT STACK V1 — Chat no topo esquerdo + Progresso logo abaixo
   ================================================================ */

/* Chat passa a ocupar o topo esquerdo da tela. */
#hud #hud-chat.chat-mmo {
  left: var(--du-gap) !important;
  top: var(--du-gap) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* Progresso desce para abrir espaço para o chat. */
#hud #hud-quests {
  left: var(--du-gap) !important;
  top: calc(var(--du-gap) + clamp(190px, 24vh, 250px) + 10px) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* Quando o chat estiver recolhido, o Progresso sobe junto. */
#hud #hud-chat.chat-mmo.collapsed + #hud-quests {
  top: calc(var(--du-gap) + 198px) !important;
}

/* Tablets: chat é 190px nessa faixa. */
@media (max-width: 900px) {
  #hud #hud-chat.chat-mmo {
    left: var(--du-gap) !important;
    top: var(--du-gap) !important;
    bottom: auto !important;
  }

  #hud #hud-quests {
    left: var(--du-gap) !important;
    top: calc(var(--du-gap) + 200px) !important;
  }
}

/* Mobile: pilha vertical no topo, respeitando o minimapa do lado direito. */
@media (max-width: 720px) {
  #hud #hud-chat.chat-mmo {
    left: 7px !important;
    top: 6px !important;
    bottom: auto !important;
    width: min(92vw, 430px) !important;
    max-width: 92vw !important;
  }

  #hud #hud-quests {
    left: 7px !important;
    top: calc(6px + min(28vh, 205px) + 9px) !important;
    width: min(92vw, 360px) !important;
    max-width: 92vw !important;
  }

  #hud #hud-chat.chat-mmo.collapsed + #hud-quests {
    top: 213px !important;
  }
}


/* Estado recolhido do chat: aproxima o painel de Progresso. */
#hud:has(#hud-chat.chat-mmo.collapsed) #hud-quests {
  top: calc(var(--du-gap) + 198px) !important;
}

@media (max-width:720px) {
  #hud:has(#hud-chat.chat-mmo.collapsed) #hud-quests {
    top: 213px !important;
  }
}


/* ================================================================
   VISUAL FILTERS — pós-processamento somente do mundo
   ================================================================ */
#game {
  transition: filter .18s ease;
  will-change: filter;
}

#visual-filter-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  background: transparent;
  opacity: 1;
}

#visual-filter-overlay[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #game { transition: none; }
}

/* ================================================================
   CONFIGURAÇÕES > GRÁFICOS
   ================================================================ */
.graphics-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 2px 1px 10px;
  border-bottom: 1px solid rgba(255,185,76,.15);
}
.graphics-filter-head h3 {
  margin: 0 0 4px;
  color: #ffe0a0;
  font-size: 15px;
}
.graphics-filter-head p {
  margin: 0;
  max-width: 500px;
  color: #9caec2;
  font-size: 10px;
  line-height: 1.4;
}
.graphics-filter-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(255,188,76,.30);
  border-radius: 999px;
  color: #ffd889;
  background: rgba(255,157,37,.07);
  font: 800 9px/1 Verdana,Arial,sans-serif;
  white-space: nowrap;
}

.visual-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  margin-bottom: 12px;
}

#hud .visual-filter-card {
  position: relative;
  min-height: 66px;
  padding: 7px 42px 7px 8px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(123,166,211,.17);
  border-radius: 9px;
  color: #e8f0fa;
  background: linear-gradient(180deg, rgba(18,29,45,.88), rgba(6,12,21,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#hud .visual-filter-card:hover {
  border-color: rgba(255,186,74,.42);
  background: linear-gradient(180deg, rgba(40,35,29,.90), rgba(9,14,22,.94));
}
#hud .visual-filter-card.on {
  border-color: rgba(255,190,75,.68);
  box-shadow:
    0 0 10px rgba(255,156,39,.10),
    inset 3px 0 0 rgba(255,175,53,.74);
  background: linear-gradient(180deg, rgba(62,45,27,.91), rgba(10,15,23,.95));
}
.visual-filter-preview {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.30), transparent 26%),
    linear-gradient(135deg, var(--vf-a), var(--vf-b));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.08),
    0 2px 7px rgba(0,0,0,.28);
}
.visual-filter-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.visual-filter-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f5f8fc;
  font: 800 10px/1.15 Verdana,Arial,sans-serif;
}
.visual-filter-copy small {
  color: #8ea0b5;
  font: 600 8px/1.32 Verdana,Arial,sans-serif;
}
.visual-filter-card em {
  position: absolute;
  right: 7px;
  top: 7px;
  padding: 3px 5px;
  border-radius: 4px;
  color: rgba(177,213,237,.72);
  background: rgba(42,86,113,.18);
  font: 700 7px/1 Verdana,Arial,sans-serif;
  font-style: normal;
}
.visual-filter-card.original em {
  color: rgba(223,204,166,.76);
  background: rgba(115,84,44,.17);
}

.visual-filter-strength {
  padding: 10px !important;
  border: 1px solid rgba(125,171,221,.12) !important;
  border-radius: 9px;
  background: rgba(5,11,20,.34);
}
.visual-filter-strength > label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #dce7f3;
  font-size: 10px;
}
.visual-filter-strength > label b {
  color: #ffd27b;
}
.visual-filter-strength input[type="range"] {
  width: 100%;
}
.visual-filter-strength > small {
  display: block;
  margin-top: 5px;
  color: #7e91a8;
  font-size: 8px;
  line-height: 1.35;
}

.graphics-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
#hud .graphics-filter-actions button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(125,171,221,.18);
  color: #c8d6e6;
  background: rgba(8,15,25,.64);
  font: 700 9px/1 Verdana,Arial,sans-serif;
}
#hud .graphics-filter-actions button:hover {
  color: #ffe3a1;
  border-color: rgba(255,183,67,.42);
  background: rgba(255,159,36,.08);
}

@media (max-width:720px) {
  .graphics-filter-head {
    display: grid;
  }
  .graphics-filter-status {
    justify-self: start;
  }
  .visual-filter-grid {
    grid-template-columns: 1fr;
  }
  #hud .visual-filter-card {
    min-height: 61px;
  }
}


/* ================================================================
   SETTINGS TABS V2 — Geral / Gráficos / Som / Controles / Interface / Jogo
   ================================================================ */

#hud-win.win-opts {
  width: min(780px, calc(100vw - 34px)) !important;
  max-height: min(82vh, 760px) !important;
}

#hud-win.win-opts header {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#hud-win.win-opts .wtabs {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
}

#hud-win.win-opts .wtabs::-webkit-scrollbar {
  display: none;
}

#hud-win.win-opts .wtabs button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 9px !important;
  white-space: nowrap;
}

#hud-win.win-opts .wbody {
  max-height: calc(min(82vh, 760px) - 58px);
  overflow-y: auto;
  overflow-x: hidden;
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 11px;
  padding: 1px 1px 9px;
  border-bottom: 1px solid rgba(255,185,76,.14);
}

.settings-section-head.compact {
  margin-bottom: 8px;
  padding-bottom: 7px;
}

.settings-section-head h3,
.settings-section > h3 {
  margin: 0 0 4px;
  color: #ffe0a0;
  font-size: 14px;
}

.settings-section-head p,
.settings-section > p,
.settings-empty p {
  margin: 0;
  color: #8fa2b7;
  font-size: 9px;
  line-height: 1.42;
}

.settings-section {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(125,171,221,.11);
  border-radius: 9px;
  background: rgba(5,11,20,.28);
}

.settings-option-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}

#hud .settings-toggle-card {
  min-height: 54px;
  box-sizing: border-box;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: start;
  gap: 8px;
  border: 1px solid rgba(125,171,221,.13);
  border-radius: 8px;
  color: #e6eef8;
  background: linear-gradient(180deg, rgba(16,27,42,.68), rgba(6,12,21,.58));
  cursor: pointer;
}

#hud .settings-toggle-card:hover {
  border-color: rgba(255,183,67,.32);
  background: linear-gradient(180deg, rgba(38,33,28,.72), rgba(7,13,21,.62));
}

#hud .settings-toggle-card input {
  margin: 2px 0 0;
}

#hud .settings-toggle-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#hud .settings-toggle-card b {
  color: #eef5fc;
  font: 800 9px/1.2 Verdana,Arial,sans-serif;
}

#hud .settings-toggle-card small {
  color: #8498ae;
  font: 600 8px/1.34 Verdana,Arial,sans-serif;
}

.settings-camera,
.settings-hud-alpha {
  margin-top: 9px;
  padding: 9px !important;
  border: 1px solid rgba(125,171,221,.11) !important;
  border-radius: 8px;
  background: rgba(6,12,21,.28);
}

.settings-camera > label,
.settings-hud-alpha > label {
  display: flex !important;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.settings-camera > label b,
.settings-hud-alpha > label b {
  color: #ffd37e;
}

.settings-camera input[type="range"],
.settings-hud-alpha input[type="range"] {
  width: 100%;
}

.sound-settings {
  display: grid;
  gap: 7px;
}

.sound-setting {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(125,171,221,.12);
  border-radius: 8px;
  background: rgba(6,12,21,.32);
}

.sound-setting > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sound-setting b {
  color: #eaf3fb;
  font: 800 9px/1.2 Verdana,Arial,sans-serif;
}

.sound-setting small {
  color: #8195ab;
  font: 600 8px/1.25 Verdana,Arial,sans-serif;
}

.sound-setting .sound-value {
  color: #ffd27d;
  font: 800 9px/1 Verdana,Arial,sans-serif;
}

.sound-setting input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
}

.settings-mute {
  margin-top: 9px;
}

.controls-note {
  margin-bottom: 9px;
  padding: 8px 9px;
  border-left: 3px solid rgba(255,177,58,.62);
  border-radius: 4px;
  color: #b8c8d8;
  background: rgba(255,159,36,.055);
  font: 600 8px/1.4 Verdana,Arial,sans-serif;
}

.settings-keys {
  border: 1px solid rgba(125,171,221,.11);
  border-radius: 9px;
  padding: 9px !important;
  background: rgba(5,11,20,.28);
}

.settings-hud-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  padding: 0 !important;
}

.settings-hud-grid label {
  min-height: 32px;
  padding: 0 8px;
  display: flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(125,171,221,.11);
  border-radius: 7px;
  background: rgba(9,16,26,.42);
  color: #cbd8e6;
  font-size: 9px;
}

#hud .settings-reset-button {
  margin-top: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,182,67,.22);
  border-radius: 7px;
  color: #e2d4b4;
  background: rgba(255,159,36,.055);
  font: 700 8px/1 Verdana,Arial,sans-serif;
}

#hud .settings-reset-button:hover {
  color: #ffe5a4;
  border-color: rgba(255,190,75,.44);
  background: rgba(255,159,36,.10);
}

.settings-info-card {
  color: #a8b7c7;
}

.settings-info-card b {
  color: #e7c77d;
}

.settings-empty {
  padding: 18px 12px;
  text-align: center;
}

.settings-empty h3 {
  margin: 0 0 5px;
  color: #ffe0a0;
}

@media (max-width:720px) {
  #hud-win.win-opts {
    width: 94vw !important;
    max-height: 78vh !important;
  }

  #hud-win.win-opts header {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "title close"
      "tabs tabs";
    row-gap: 6px !important;
  }

  #hud-win.win-opts header > b {
    grid-area: title;
  }

  #hud-win.win-opts .wtabs {
    grid-area: tabs;
  }

  #hud-win.win-opts header > .x {
    grid-area: close;
  }

  #hud-win.win-opts .wbody {
    max-height: calc(78vh - 92px);
  }

  .settings-option-grid,
  .settings-hud-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   PLAYER TYPING INDICATOR — balão discreto "..."
   ================================================================ */
.typing-indicator{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:31px;
  height:20px;
  padding:0 6px;
  border:1px solid rgba(255,230,178,.72);
  border-radius:11px;
  background:rgba(20,16,11,.86);
  box-shadow:0 2px 7px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06);
  pointer-events:none;
  z-index:7;
}
.typing-indicator::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:7px;
  height:7px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(20,16,11,.86);
  border-right:1px solid rgba(255,230,178,.72);
  border-bottom:1px solid rgba(255,230,178,.72);
}
.typing-indicator i{
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,226,154,.92);
  box-shadow:0 0 4px rgba(255,187,70,.22);
  animation:dboTypingDot 1.05s ease-in-out infinite;
}
.typing-indicator i:nth-child(2){animation-delay:.14s}
.typing-indicator i:nth-child(3){animation-delay:.28s}
@keyframes dboTypingDot{
  0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-2px)}
}
body.mobile-ui .typing-indicator{
  width:28px;
  height:18px;
  gap:2px;
  border-radius:10px;
  opacity:.88;
}
body.mobile-ui .typing-indicator i{
  width:3px;
  height:3px;
}
@media (prefers-reduced-motion:reduce){
  .typing-indicator i{animation:none;opacity:.72}
}


/* ================================================================
   COMBAT TARGET RETICLE — alvo atual de combate
   ================================================================ */
.combat-target-reticle{
  position:absolute;
  left:0;
  top:0;
  width:46px;
  height:46px;
  pointer-events:none;
  z-index:6;
  opacity:.92;
  filter:drop-shadow(0 0 3px rgba(75,0,7,.28));
  animation:dboTargetReticlePulse 1.05s ease-in-out infinite;
}
.combat-target-reticle[hidden]{
  display:none!important;
}
.combat-target-reticle .tr{
  position:absolute;
  display:block;
  width:0;
  height:0;
}
.combat-target-reticle .tr.top{
  left:50%;
  top:-1px;
  transform:translateX(-50%);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:7px solid rgba(112,16,24,.96);
}
.combat-target-reticle .tr.bottom{
  left:50%;
  bottom:-1px;
  transform:translateX(-50%);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-bottom:7px solid rgba(112,16,24,.96);
}
.combat-target-reticle .tr.left{
  left:-1px;
  top:50%;
  transform:translateY(-50%);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:7px solid rgba(112,16,24,.96);
}
.combat-target-reticle .tr.right{
  right:-1px;
  top:50%;
  transform:translateY(-50%);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-right:7px solid rgba(112,16,24,.96);
}
@keyframes dboTargetReticlePulse{
  0%,100%{opacity:.72;filter:drop-shadow(0 0 2px rgba(75,0,7,.22))}
  50%{opacity:1;filter:drop-shadow(0 0 4px rgba(112,16,24,.38))}
}
body.mobile-ui .combat-target-reticle{
  opacity:.86;
}
body.mobile-ui .combat-target-reticle .tr.top,
body.mobile-ui .combat-target-reticle .tr.bottom{
  border-left-width:3px;
  border-right-width:3px;
}
body.mobile-ui .combat-target-reticle .tr.left,
body.mobile-ui .combat-target-reticle .tr.right{
  border-top-width:3px;
  border-bottom-width:3px;
}
@media (prefers-reduced-motion:reduce){
  .combat-target-reticle{animation:none;opacity:.88}
}


/* ================================================================
   DISCORD OFICIAL — botão discreto junto aos atalhos rápidos
   ================================================================ */
#hud #hud-quick .hud-discord-link{
  margin-left:2px !important;
  color:#9aa5ff !important;
  border-color:rgba(125,138,255,.28) !important;
  background:rgba(14,18,38,.72) !important;
  opacity:.78;
}
#hud #hud-quick .hud-discord-link svg{
  width:13px;
  height:13px;
  display:block;
  fill:currentColor;
  pointer-events:none;
}
#hud #hud-quick .hud-discord-link:hover{
  color:#cbd0ff !important;
  border-color:rgba(142,156,255,.62) !important;
  background:rgba(29,34,71,.88) !important;
  box-shadow:0 0 8px rgba(102,116,255,.22) !important;
}
body.mobile-ui #hud #hud-quick .hud-discord-link{
  width:24px !important;
  height:24px !important;
  opacity:.84;
}
body.mobile-ui #hud #hud-quick .hud-discord-link svg{
  width:14px;
  height:14px;
}

/* Loja de Pérolas: destaque discreto no menu principal. */
#hud-menu .hud-pearls-entry { position:relative; overflow:visible; isolation:isolate; border-color:rgba(222,167,85,.66); background:radial-gradient(circle at 50% 25%,rgba(128,58,183,.28),rgba(26,15,43,.88)); box-shadow:0 0 11px rgba(153,75,204,.20),inset 0 0 0 1px rgba(250,213,138,.19); }
#hud-menu .hud-pearls-entry:hover, #hud-menu .hud-pearls-entry:focus-visible { border-color:#ffe1a1; box-shadow:0 0 17px rgba(171,103,229,.48),0 0 7px rgba(255,205,105,.28); }
#hud-menu .hud-pearls-entry img { object-fit:contain; filter:drop-shadow(0 0 4px rgba(221,155,255,.55)); }
#hud-menu .hud-pearls-entry .hud-pearls-plus { position:absolute; right:-3px; top:-4px; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font:700 12px/1 sans-serif; color:#3a2048; background:linear-gradient(#fff0b3,#e5ab48); border:1px solid #ffebbb; box-shadow:0 1px 5px #0009; pointer-events:none; }
#hud-menu .hud-pearls-entry #hud-pearl-count:not([hidden]) { position:absolute; right:-2px; bottom:-7px; max-width:64px; overflow:hidden; text-overflow:ellipsis; padding:1px 5px; border:1px solid #dba85f; border-radius:9px; background:#25142eea; color:#ffe7aa; font:700 10px/1.2 sans-serif; font-style:normal; text-shadow:0 1px 2px #000; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { #hud-menu .hud-pearls-entry, #hud-menu .hud-pearls-entry img { animation:none!important; transition:none!important; } }

/* A arte premium já contém o símbolo +: preservar apenas o ícone original. */
#hud-menu .hud-pearls-entry img { width: 44px; height: 44px; max-width: none; object-fit: contain; filter: drop-shadow(0 0 4px rgba(213,127,255,.35)); }
#hud-menu .hud-pearls-entry .hud-pearls-plus { display:none; }

/* Loja de Pérolas: alinhar à malha dos demais ícones da HUD. */
#hud #hud-menu .hud-pearls-entry { position:relative; width:var(--mb)!important; overflow:visible; }
#hud #hud-menu .hud-pearls-entry img {
  width:var(--mb)!important;
  height:var(--mb)!important;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
#hud #hud-menu .hud-pearls-entry > span { display:none!important; }
#hud #hud-menu .hud-pearls-entry #hud-pearl-count:not([hidden]) {
  position:static!important;
  display:block!important;
  box-sizing:border-box;
  min-height:11px;
  max-width:var(--mb);
  width:100%;
  overflow:visible;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#ffe2a1!important;
  font:900 10px/11px Verdana,Tahoma,Arial,sans-serif!important;
  text-align:center;
  white-space:nowrap;
  text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000,0 2px 3px #000b;
  pointer-events:none;
}
@media(max-width:720px) {
  #hud #hud-menu .hud-pearls-entry #hud-pearl-count:not([hidden]) { font-size:8px!important; }
}

/* Kaomojis redesenhados: animação leve apenas no cliente, sem sprites externos. */
.dbo-emote { display:inline-flex; width:28px; height:26px; vertical-align:middle; align-items:center; justify-content:center; transform-origin:center 80%; animation:dbo-emote-bob 2.2s ease-in-out infinite; }
.dbo-emote svg { display:block; width:100%; height:100%; overflow:visible; }
.dbo-emote-love { animation-name:dbo-emote-heart; }
.dbo-emote-angry { animation-name:dbo-emote-shake; }
.dbo-emote-cry { animation-name:dbo-emote-bob; }
.dbo-emote-picker[hidden] { display:none!important; }
.dbo-emote-picker { position:absolute; bottom:calc(100% + 6px); left:0; z-index:120; display:grid; grid-template-columns:repeat(6,minmax(34px,1fr)); gap:4px; width:min(310px,90vw); box-sizing:border-box; padding:8px; background:rgba(15,19,33,.98); border:1px solid rgba(235,182,90,.58); border-radius:10px; box-shadow:0 9px 28px #000b; }
.dbo-emote-picker button { display:flex; justify-content:center; align-items:center; width:100%; min-height:38px; padding:2px; border:1px solid transparent; border-radius:7px; background:rgba(255,255,255,.06); cursor:pointer; }
.dbo-emote-picker button:hover,.dbo-emote-picker button:focus-visible { border-color:#edbe67; background:rgba(250,203,117,.17); }
.dbo-emote-picker .dbo-emote { width:35px; height:32px; }
@keyframes dbo-emote-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-3px) rotate(3deg); } }
@keyframes dbo-emote-heart { 0%,100% { transform:scale(1); } 45% { transform:scale(1.13); } }
@keyframes dbo-emote-shake { 0%,100% { transform:translateX(0); } 25%,75% { transform:translateX(-2px); } 50% { transform:translateX(2px); } }
@media(prefers-reduced-motion:reduce) { .dbo-emote { animation:none!important; } }

/* Emojis grandes e legíveis no chat; sem transparência visual. */
#hud #output .chat-line .dbo-emote {
  box-sizing:border-box; width:46px; height:44px; padding:3px; margin:2px 3px;
  background:#fff!important; border:2px solid #51342b; border-radius:11px;
  box-shadow:0 2px 5px #0006; vertical-align:middle;
}
#hud #output .chat-line .dbo-emote svg {width:100%;height:100%;}
/* O balão já é branco: não adicionar outra moldura dentro dele. */
#bubbles .bubble .dbo-emote {
  display:inline-flex; width:52px; height:49px; vertical-align:middle;
  align-items:center; justify-content:center; transform-origin:center;
  animation:dbo-emote-bob 2.2s ease-in-out infinite;
}
#bubbles .bubble .dbo-emote svg {display:block;width:100%;height:100%;overflow:visible;}
.dbo-emote-picker .dbo-emote {box-sizing:border-box;background:#fff; border:1px solid #51342b;border-radius:8px;width:38px;height:36px;padding:2px;}
.dbo-emote-picker button {min-height:46px;}
@media(prefers-reduced-motion:reduce){#bubbles .bubble .dbo-emote{animation:none!important;}}

/* Emoção isolada: bolha redonda, mantendo o triângulo original do balão oculto. */
#bubbles .bubble.emoji-only {
  box-sizing:border-box; width:82px; min-width:82px; height:82px; min-height:82px;
  padding:9px!important; display:flex; align-items:center; justify-content:center;
  border-radius:50%!important; background:#fff!important; position:absolute;
  border:2px solid #34241b; box-shadow:0 4px 12px #0005;
}
#bubbles .bubble.emoji-only::before,#bubbles .bubble.emoji-only::after {content:none!important;display:none!important;}
#bubbles .bubble.emoji-only .dbo-emote {width:63px;height:61px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;}
/* Seletor espaçoso: mais espaço por rosto, inclusive em telas menores. */
#hud .dbo-emote-picker {
  width:min(456px,calc(100vw - 24px)); max-height:min(350px,55vh);
  overflow-y:auto; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; padding:10px;
}
#hud .dbo-emote-picker button {min-width:0;min-height:77px;padding:5px;border-radius:10px;}
#hud .dbo-emote-picker .dbo-emote {
  box-sizing:border-box;width:66px;height:62px;max-width:100%;
  padding:3px;background:white;border:2px solid #57372f;border-radius:12px;
}
#hud .dbo-emote-picker .dbo-emote svg {width:100%;height:100%;}
/* Reações vivas e rápidas — animação não altera o posicionamento do balão. */
.dbo-emote {animation:dbo-float 1.05s ease-in-out infinite;}
.dbo-emote-happy,.dbo-emote-laugh {animation:dbo-jump .75s ease-in-out infinite!important;}
.dbo-emote-love {animation:dbo-pulse .83s ease-in-out infinite!important;}
.dbo-emote-angry {animation:dbo-tremble .52s ease-in-out infinite!important;}
.dbo-emote-surprise {animation:dbo-pop .95s ease-in-out infinite!important;}
.dbo-emote-wink,.dbo-emote-tongue {animation:dbo-wiggle .85s ease-in-out infinite!important;}
.dbo-emote-sad,.dbo-emote-cry,.dbo-emote-confused {animation:dbo-wiggle 1.2s ease-in-out infinite!important;}
.dbo-emote-shy,.dbo-emote-sleep {animation:dbo-float 1.2s ease-in-out infinite!important;}
#bubbles .bubble .dbo-emote {animation-duration:1s;}
@keyframes dbo-float {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes dbo-jump {0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.12)}70%{transform:translateY(-2px) scale(1.02)}}
@keyframes dbo-pulse {0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}
@keyframes dbo-tremble {0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-4deg)}75%{transform:translateX(3px) rotate(4deg)}}
@keyframes dbo-pop {0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes dbo-wiggle {0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.dbo-emote,#bubbles .bubble .dbo-emote{animation:none!important;}}

/* Seletor: altura real limitada e rolagem sempre acessível por mouse/toque. */
#hud #chat-form { overflow:visible!important; }
#hud #chat-form .dbo-emote-picker:not([hidden]) {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:min(420px,calc(100vw - 20px))!important;
  height:230px!important;
  max-height:min(230px,45dvh)!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  overscroll-behavior:contain;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
  align-content:start!important;
  scrollbar-width:thin;
  scrollbar-color:#d7a75d #161524;
}
#hud #chat-form .dbo-emote-picker::-webkit-scrollbar {width:10px;}
#hud #chat-form .dbo-emote-picker::-webkit-scrollbar-track {background:#161524;border-radius:8px;}
#hud #chat-form .dbo-emote-picker::-webkit-scrollbar-thumb {background:#d7a75d;border:2px solid #161524;border-radius:8px;}
@media(max-width:720px) {
  #hud #chat-form .dbo-emote-picker:not([hidden]) {
    width:min(340px,calc(100vw - 16px))!important;
    height:min(240px,40dvh)!important;
  }
  #hud #chat-form .dbo-emote-picker button {min-height:64px!important;}
  #hud #chat-form .dbo-emote-picker .dbo-emote {width:52px;height:50px;}
}

/* DBO pearl store 3.0 — arte premium sobre a estrutura funcional existente. */
#hud #hud-win.win-store {border:1px solid #b484df!important;box-shadow:0 25px 95px #000e,0 0 32px #a04bff45,inset 0 1px #ffe9a655!important;}
#hud #hud-win.win-store .pl-premium-v3 {--commerce-gold:#f0be66;--commerce-blue:#c586ff;}
#hud #hud-win .pl-premium-v3>.shop-head {
 background:radial-gradient(ellipse at 46% -40%,#a855f773,transparent 69%),linear-gradient(110deg,#17102f,#29163c 48%,#0f1328)!important;
 border-color:#e8c27e88!important;box-shadow:0 0 30px #b36eff26,inset 0 -2px #c39bff55;
}
#hud #hud-win .pl-premium-v3>.shop-head::before {content:none!important;}
#hud #hud-win .pl-shop-brand {position:absolute;left:210px;top:8px;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
#hud #hud-win .pl-shop-brand small {font:700 9px/1.4 Verdana,sans-serif;color:#d8b9fa;letter-spacing:.2em;}
#hud #hud-win .pl-shop-brand strong {font:900 clamp(17px,2vw,26px)/1.12 Georgia,serif;color:#fff1c8;letter-spacing:.055em;text-shadow:0 0 12px #efbc70bb,0 2px #000;}
#hud #hud-win .pl-shop-brand span {font:11px Verdana,sans-serif;color:#dec6f3;}
#hud #hud-win .pl-premium-v3 .shop-head .mm-filters {border-radius:13px!important;background:linear-gradient(170deg,#26173cf5,#0c1023f7)!important;border-color:#a969cf88!important;box-shadow:0 10px 30px #0009,0 0 18px #813ae72c;}
#hud #hud-win .pl-premium-v3 .shop-head .mm-filters button {min-height:51px!important;border-radius:9px!important;font-size:13px!important;color:#e0d3ee!important;}
#hud #hud-win .pl-premium-v3 .shop-head .mm-filters button::before {content:none!important;}
#hud #hud-win .pl-premium-v3 .shop-head .mm-filters button {padding:0 10px!important;text-align:center!important;justify-content:center!important;}
#hud #hud-win .pl-premium-v3 .shop-head .mm-filters button.on {background:linear-gradient(100deg,#7443bb,#482777)!important;border:1px solid #f9d596a8!important;box-shadow:0 0 16px #c068ff67,inset 0 1px #ffffff33;color:#fff5cd!important;}
#hud #hud-win .pl-premium-v3 .pl-featured,#hud #hud-win .pl-premium-v3 .pl-vip-hero,#hud #hud-win .pl-premium-v3 .pl-packs-hero {
 grid-column:2;position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:155px;margin:4px 0 17px;padding:20px 30px;border:1px solid #e8bd7980;border-radius:15px;
 background:radial-gradient(circle at 83% 15%,#ffd78233,transparent 36%),radial-gradient(circle at 30% 120%,#974bff88,transparent 65%),linear-gradient(130deg,#321c4e,#10162a 77%);
 box-shadow:0 10px 35px #0008,0 0 20px #ba73ff3d,inset 0 1px #fff4;
}
#hud #hud-win .pl-premium-v3 .pl-vip-hero {background:radial-gradient(circle at 78% 10%,#ffe29b33,transparent 42%),linear-gradient(125deg,#5d3718,#26162d 55%,#11182c);}
#hud #hud-win .pl-premium-v3 .pl-featured small,#hud #hud-win .pl-premium-v3 .pl-vip-hero small,#hud #hud-win .pl-premium-v3 .pl-packs-hero small {font:800 10px Verdana,sans-serif;letter-spacing:.23em;color:#f8ce8a;}
#hud #hud-win .pl-premium-v3 h2 {margin:8px 0;font:bold clamp(24px,3vw,35px)/1.1 Georgia,serif;color:#fff3cf;text-shadow:0 0 18px #d9a4ff80;}
#hud #hud-win .pl-premium-v3 .pl-featured p,#hud #hud-win .pl-premium-v3 .pl-vip-hero p,#hud #hud-win .pl-premium-v3 .pl-packs-hero p {max-width:550px;color:#e4d7f2;font-size:13px;line-height:1.6;margin:0;}
#hud #hud-win .pl-premium-v3 .pl-featured>span,#hud #hud-win .pl-premium-v3 .pl-vip-hero>span,#hud #hud-win .pl-premium-v3 .pl-packs-hero>span {font-size:78px;line-height:1;color:#ffe69e;text-shadow:0 0 20px #f8a4ff,0 0 50px #8b49ff;animation:pl-spark 3.5s ease-in-out infinite;flex:none;}
@keyframes pl-spark {50%{transform:scale(1.09) rotate(8deg);filter:brightness(1.2)}}
#hud #hud-win .pl-premium-v3 .pl-packs {gap:15px;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));}
#hud #hud-win .pl-premium-v3 .pl-pack {position:relative;overflow:hidden;min-height:235px;border-radius:14px;border:1px solid #a277c28c;background:radial-gradient(circle at 50% 10%,#a15fff4a,transparent 58%),linear-gradient(#221632,#0a1221);box-shadow:0 8px 24px #0009,inset 0 1px #fff3;transition:transform .18s,box-shadow .18s;}
#hud #hud-win .pl-premium-v3 .pl-pack:hover {transform:translateY(-4px);box-shadow:0 12px 30px #000b,0 0 22px #b96aff6d;}
#hud #hud-win .pl-premium-v3 .pl-pack-art {position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:42px;color:#ffeba8;text-shadow:0 0 12px #d682ff,0 0 26px #ac53e9;pointer-events:none;}
#hud #hud-win .pl-premium-v3 .pl-pack.pl-popular {border-color:#ffd385;box-shadow:0 0 20px #ffbf593f,inset 0 1px #ffe7ba88;}
#hud #hud-win .pl-premium-v3 .pl-pack.pl-popular:after {content:"POPULAR";position:absolute;top:9px;right:-24px;transform:rotate(35deg);padding:3px 26px;background:#ffd47c;color:#3b2340;font:bold 9px Verdana;}
#hud #hud-win .pl-premium-v3 .pl-card {border-radius:12px;min-height:96px;background:radial-gradient(circle at 10% 0%,#713eac2c,transparent 70%),linear-gradient(#171d30,#0b111f);border-color:#9d7bc155;transition:box-shadow .2s,border-color .2s;}
#hud #hud-win .pl-premium-v3 .pl-card:hover {border-color:#e6bb8d;box-shadow:0 0 22px #b67afc36;}
#hud #hud-win .pl-premium-v3 .pl-row,#hud #hud-win .pl-premium-v3 .pl-club {border-radius:12px!important;border-color:#c3a0d655!important;box-shadow:inset 0 1px #fff2;}
#hud #hud-win .pl-premium-v3 .pl-club {padding:24px;background:radial-gradient(circle at 90% 0%,#ffcf6733,transparent 58%),linear-gradient(#23192e,#121727);}
#hud #hud-win .pl-premium-v3 .pl-club-head b {font-size:24px;color:#ffe09c;}
#hud #hud-win .pl-premium-v3 button.primary {background:linear-gradient(#f9d887,#c88b36)!important;color:#271727!important;border:1px solid #ffe8a3!important;font-weight:800;box-shadow:0 2px 12px #c77a3444;}
@media(max-width:850px){#hud #hud-win .pl-premium-v3 {display:block!important;padding-top:175px!important;min-height:0;}#hud #hud-win .pl-premium-v3>.shop-head {height:165px!important;padding:8px!important;}#hud #hud-win .pl-shop-brand {left:14px;top:8px;}#hud #hud-win .pl-premium-v3 .shop-head .mm-filters {position:absolute;top:83px;left:8px;width:calc(100% - 16px);height:auto;display:flex;flex-flow:row wrap;justify-content:center;padding:5px;gap:4px;}#hud #hud-win .pl-premium-v3 .shop-head .mm-filters button {min-height:31px!important;width:auto;flex:1 1 27%;padding:0 6px!important;font-size:11px!important;}#hud #hud-win .pl-premium-v3 .shop-head .pl-bal {position:absolute;right:9px;top:6px;min-width:0;font-size:11px;padding:4px 8px;}#hud #hud-win .pl-premium-v3 .pl-featured,#hud #hud-win .pl-premium-v3 .pl-vip-hero,#hud #hud-win .pl-premium-v3 .pl-packs-hero{padding:17px;min-height:120px;}#hud #hud-win .pl-premium-v3 .pl-featured>span,#hud #hud-win .pl-premium-v3 .pl-vip-hero>span,#hud #hud-win .pl-premium-v3 .pl-packs-hero>span{font-size:45px;}}
@media(prefers-reduced-motion:reduce){#hud #hud-win .pl-premium-v3 .pl-featured>span,#hud #hud-win .pl-premium-v3 .pl-vip-hero>span,#hud #hud-win .pl-premium-v3 .pl-packs-hero>span{animation:none}}