/* Vexoria — HUD enxuta (Claude, 20/10). Carregado por último; só computador. client/src/hud-tidy.js */
html {
  --ui-scale: 1;
  --hud-edge: 14px;
  --hud-player-width: 300px;
  --hud-player-height: 84px;
  --hud-map-width: 208px;
  --hud-map-height: 156px;
  --dock-slot: 44px;
  --dock-gap: 6px;
}

/* ---------- jogador: compacto ---------- */
html #hud #frame { padding: 6px 8px; gap: 10px; }
html #hud #portrait { width: 60px; height: 60px; }
html #hud #frame .info { gap: 4px; }
html #hud #pname { font: 16px/18px Pix, monospace; }
html #hud #plvl { font: 16px/18px Pix, monospace; }
html #hud #frame .row { line-height: 18px; }
html #hud #frame .bar { height: 16px; margin-left: 18px; }
html #hud #frame .bar b { font: 700 12px/14px Txt, sans-serif; }
html #hud #frame .bar.hp:before, html #hud #frame .bar.mp:before { left: -18px; top: 1px; width: 13px; height: 13px; }
html #hud #frame .bar.xp { height: 3px; }

/* ossos + cash numa linha só, logo abaixo do retrato */
html #hud #wallet {
  top: calc(100% + 6px); left: -6px; width: 142px; height: 38px; padding: 2px 8px;
  grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 30px; column-gap: 7px;
}
html #hud .wallet-bone { grid-row: 1; width: 22px; height: 22px; }
html #hud .wallet-label { display: none; }
html #hud .wallet-value { font: 16px/30px Pix, monospace; letter-spacing: .5px; }
html.hud-tidy #hud #frame > #cash-shop-open {
  position: absolute; top: calc(100% + 6px); left: 142px; width: calc(100% - 136px); height: 38px; padding: 2px 6px 2px 8px;
  grid-template-columns: 20px minmax(0, 1fr) 48px; grid-template-rows: minmax(0, 1fr); grid-template-areas: 'gem balance shop'; gap: 0 4px; align-items: center;
}
html.hud-tidy #hud #cash-shop-open .cash-caption { display: none; }
html.hud-tidy #hud #cash-shop-open .cash-gem { width: 20px; height: 20px; background-size: 18px; }
html.hud-tidy #hud #cash-shop-open [data-cash-balance] { font: 16px/30px Pix, monospace; }
html.hud-tidy #hud #cash-shop-open .cash-enter {
  position:relative; box-sizing:border-box; align-self:center; min-width:0; width:100%; height:22px; padding:0 3px;
  font:700 12px/20px Txt, sans-serif; letter-spacing:.5px; color:#fff3ff;
  background:linear-gradient(180deg,#b675eb 0%,#8040b4 48%,#56217e 100%);
  border:1px solid #e2b2ff; text-shadow:0 1px 2px #350e50;
  box-shadow:inset 0 1px #f4d4ff99,inset 0 -2px #3c165a,0 0 5px #bf6aff88;
  overflow:hidden;
}
html.hud-tidy #hud #cash-shop-open .cash-enter::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,#fff8 50%,transparent 70%);
  transform:translateX(-160%); animation:shop-label-sheen 4.5s ease-in-out infinite;
}
html.hud-tidy #hud #cash-shop-open:is(:hover,:focus-visible) .cash-enter {
  background:linear-gradient(180deg,#d29aff,#9b52d3 48%,#6e2c9b);
  border-color:#ffe1ff; box-shadow:inset 0 1px #fff9,inset 0 -2px #4b1c6b,0 0 7px #d78affaa;
}
@keyframes shop-label-sheen { 0%,75% { transform:translateX(-160%); } 100% { transform:translateX(160%); } }
@media (prefers-reduced-motion:reduce) {
  html.hud-tidy #hud #cash-shop-open .cash-enter::after { animation:none; }
}
html #hud #status-effects { top: calc(100% + 52px); left: 0; }
html #hud :is(#party-frame, #party-bars) { top: 196px; }

/* ---------- topo: zona e guia menores ---------- */
html #hud #zone { top: 14px; padding: 5px 18px; font: 16px/18px Pix, monospace; letter-spacing: 1px; }
html #hud #walk-guide { top: 56px; padding: 2px 12px; }
html #hud #walk-guide small { font-size: 13px; line-height: 18px; }

/* ---------- direita: mapa e missões ---------- */
html #hud #quest-tracker { padding: 7px 10px 9px; }
html #hud #quest-tracker > strong { font: 16px/20px Pix, monospace; }
html #hud #quest-tracker > strong:before { width: 18px; height: 18px; background-size: 18px; }
html #hud #quest-tracker b { font: 700 13px/17px Txt, sans-serif; }
html #hud #quest-tracker small { font-size: 12px; line-height: 16px; }
html #hud #quest-tracker > div { margin-top: 5px; padding-top: 6px; }
html #hud #quest-tracker > div:before { font-size: 16px; line-height: 16px; top: 7px; }
html #hud #mapbox:after { font: 16px/16px Pix, monospace; padding: 1px 6px; top: -9px; }

/* ---------- chat legível e redimensionável ---------- */
html #hud #chat { width: 480px; height: 300px; max-width:calc(100vw / var(--ui-scale, 1) - 32px); max-height:calc(100vh / var(--ui-scale, 1) - 140px); }
html #hud #chat:not(:focus-within) { background: linear-gradient(120deg, #1a1322c4, #100c16b8 75%); }
html #hud #chatlog { min-height:0; overflow-y:auto; overflow-x:hidden; justify-content:flex-start; font-size:16px; line-height:22px; overflow-wrap:anywhere; scrollbar-width:thin; scrollbar-color:#8d6a49 #100c17; }
html #chatlog > div { flex-shrink:0; }
html #chatlog > div:first-child { margin-top:auto; }
html #chatin, html #chat-channels { flex-shrink:0; }
.chat-resize { display:none; }
html .chat-resize { display:block; position:absolute; z-index:5; touch-action:none; }
.chat-resize-top { top:-4px; left:8px; right:18px; height:10px; }
.chat-resize-right { right:-4px; top:18px; bottom:8px; width:10px; }
.chat-resize-corner { right:-4px; top:-4px; width:20px; height:20px; }
.chat-resize-corner::after { content:''; position:absolute; top:5px; right:5px; width:8px; height:8px; border-top:2px solid #e4bd7f; border-right:2px solid #e4bd7f; }
.chat-resizing { user-select:none; }
html #hud #chat-launcher { height: 40px; padding: 4px 10px; gap: 8px; }

/* ---------- barra de baixo: técnicas + combate + 4 grupos ---------- */
html.hud-tidy #hud #menu-hotbar, html.hud-tidy #hud #hotbar-toggle { display: none !important; }
html #hud #hotbar { padding: 8px 12px 22px; gap: 12px; }
html #hud #hotbar .bar-group + .bar-group { padding-left: 12px; }
#menu-groups { display: flex; gap: 6px; align-items: flex-start; }
#menu-groups .mg-btn {
  position: relative; width: 44px; height: var(--dock-slot); padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid #8f7a9e; background: linear-gradient(135deg, #2a2035, #110d19 75%);
  box-shadow: inset 0 0 0 2px #100c17, inset 0 3px 0 2px #4d3a5c, 0 2px 0 #06040a;
}
#menu-groups .mg-btn > canvas { width: 26px; height: auto; image-rendering: pixelated; pointer-events: none; }
#menu-groups .mg-btn > span { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font: 700 11px/14px Txt, sans-serif; color: #e6d6c2; white-space: nowrap; pointer-events: none; }
#menu-groups .mg-btn:hover, #menu-groups .mg-btn.on { border-color: #ffe1a3; background: linear-gradient(#4a3654, #1e1527); }
#menu-groups .mg-btn.on > span { color: #ffe1a3; }
#menu-groups .mg-dot { display: none; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; background: #ff4d5e; border: 2px solid #1a1126; border-radius: 50%; }
#menu-groups .mg-btn.has-new .mg-dot { display: block; animation: mgDot 1s ease-in-out infinite; }
@keyframes mgDot { 50% { transform: scale(1.3); } }
#menu-groups .mg-pop {
  position: absolute; bottom: calc(100% + 22px); left: 50%; transform: translateX(-50%); z-index: 30; width: 214px; padding: 8px; cursor: default;
  background: linear-gradient(180deg, #221930f8, #120d1af8); border: 2px solid #b08a5c; box-shadow: 0 0 0 2px #0a070e, 0 8px 22px #000a; text-align: left;
}
#menu-groups .mg-pop.hidden { display: none; }
#menu-groups .mg-pop:after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 12px; background: #120d1a; border-right: 2px solid #b08a5c; border-bottom: 2px solid #b08a5c; transform: translateX(-50%) rotate(45deg); }
#menu-groups .mg-title { font: 16px/18px Pix, monospace; color: #f4d695; padding: 0 4px 6px; border-bottom: 1px solid #47354f; margin-bottom: 5px; }
#menu-groups .mg-list { display: flex; flex-direction: column; gap: 3px; }
html #hud #hotbar #menu-groups .mg-list .menu-slot {
  position: relative; display: flex !important; align-items: center; justify-content: flex-start; gap: 9px; width: 100% !important; height: 34px !important; min-height: 0 !important; padding: 0 8px !important; margin: 0; text-align: left;
  border: 1px solid transparent; background: #ffffff08; box-shadow: none; transform: none; opacity: 1; cursor: pointer;
}
html #hud #hotbar #menu-groups .mg-list .menu-slot:hover { background: #ffe1a31a; border-color: #b08a5c; filter: none; }
html #hud #hotbar #menu-groups .mg-list .menu-slot :is(img, canvas) { width: 22px !important; height: 22px !important; flex: none; image-rendering: pixelated; }
#menu-groups .mg-list .mg-name { flex: 1; text-align: left; font: 700 13px/16px Txt, sans-serif; color: #efe3d0; }
html #hud #hotbar #menu-groups .mg-list .menu-slot .key {
  position: static; order: 3; min-width: 20px; padding: 1px 5px; text-align: center; font: 700 12px/16px Txt, sans-serif; color: #f4d695; background: #0b0712; border: 1px solid #4d3a5c;
}
#menu-groups .mg-list .menu-slot :is(.dl-dot, .badge) { position: absolute; left: 22px; top: 4px; }

/* ---------- tamanho da interface (Configurações) ---------- */
html #hud :is(#frame, #mapbox, #quest-tracker, #chat, #chat-launcher, #party-frame, #party-bars) { zoom: var(--ui-scale); }
html #hud #hotbar { transform: translateX(-50%) scale(var(--ui-scale)); transform-origin: 50% 100%; }
html #hud #zone, html #hud #walk-guide { transform: translateX(-50%) scale(var(--ui-scale)); transform-origin: 50% 0; }

/* ---------- Configurações ---------- */
html #hud #sndpanel { z-index: 60; width: 330px; bottom: 112px; }
#sndpanel .cfg-h { margin: 10px 0 4px; font: 700 12px/16px Txt, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #b9a3c8; }
#sndpanel .cfg-h:first-of-type { margin-top: 0; }
#sndpanel .cfg { border-top: 1px solid #3d2c56; margin-top: 10px; padding-top: 2px; }
#sndpanel label.cfg-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 7px 0; font-size: 14px; }
#sndpanel label.cfg-row:has(input[type=range]) { grid-template-columns: 1fr 100px 40px; }
#sndpanel label.cfg-row span { white-space: nowrap; }
#sndpanel .cfg select { background: #0b0712; color: #efe3d0; border: 1px solid #5a4470; padding: 3px 6px; font: 13px Txt, sans-serif; }
#sndpanel .cfg input[type=checkbox] { width: 18px; height: 18px; accent-color: #d69a34; }
#fps-meter { position: fixed; right: 250px; top: 8px; z-index: 9999; pointer-events: none; padding: 2px 8px; background: #0b0712cc; border: 1px solid #3d2c56;
  font: 700 12px/16px Txt, sans-serif; color: #c4bccf; display: flex; gap: 6px; align-items: baseline; }
#fps-meter b { font-size: 14px; } #fps-meter.ok b { color: #8fe0a0; } #fps-meter.mid b { color: #f7d77a; } #fps-meter.bad b { color: #ff6b6b; }
#fps-meter small { color: #8d7f99; font-size: 11px; }