/* HUD de cantos — protótipo 1 aprovado. Escopo desktop; o touch mantém seu layout. */
html {
  --hud-edge:20px;
  --hud-player-width:354px;
  --hud-player-height:116px;
  --hud-wallet-width:252px;
  --hud-map-width:240px;
  --hud-map-height:184px;
  --hud-bronze:#c59a65;
  --hud-paper:#f7e6b8;
  --hud-trim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%230a080e' stroke-width='4' d='M3 3h26v26H3z'/%3E%3Cpath fill='none' stroke='%23724b36' stroke-width='2' d='M3 3h26v26H3z'/%3E%3Cpath fill='none' stroke='%23d0a16b' d='M5.5 5.5h21v21h-21z'/%3E%3Cpath fill='none' stroke='%23543b36' d='M8.5 8.5h15v15h-15z'/%3E%3Cpath fill='%238b603f' d='M1 1h7v7H1zM24 1h7v7h-7zM1 24h7v7H1zM24 24h7v7h-7z'/%3E%3Cpath fill='%23f0cd93' d='M2 2h4v2H4v2H2zM26 2h4v4h-2V4h-2zM2 26h2v2h2v2H2zM28 26h2v4h-4v-2h2z'/%3E%3Cpath fill='%2336292b' d='M4 4h2v2H4zM26 4h2v2h-2zM4 26h2v2H4zM26 26h2v2h-2z'/%3E%3C/svg%3E");
  --dock-slot:50px;
  --dock-menu:44px;
  --dock-gap:7px;
  --dock-height:90px;
  --dock-bottom:18px;
}

/* A classe no seletor supera a moldura antiga sem alterar painéis internos. */
html :is(#frame.panel,#wallet,#cash-shop-open,#mapbox,#quest-tracker,#zone,#walk-guide,#hotbar,#chat-launcher,#chat,#npc-hint,#tutorial,#party-frame,#sndpanel) {
  border:6px solid transparent;
  border-image:var(--hud-trim) 10 / 10px / 2px stretch;
  background:linear-gradient(120deg,#241b2af7,#130f1af7 75%);
  box-shadow:0 4px 12px #0006,inset 0 0 0 1px #42313d;
  color:var(--hud-paper);
  image-rendering:pixelated;
}

/* Personagem: retrato, nome e barras legíveis. */
html #frame {
  left:var(--hud-edge);top:var(--hud-edge);
  width:var(--hud-player-width);height:var(--hud-player-height);
  padding:9px;gap:14px;align-items:center;
}
html #portrait {
  width:80px;height:80px;flex:none;
  border:1px solid #ba945e;background:linear-gradient(#16111e,#302139);
  box-shadow:0 0 0 2px #09070e,inset 0 0 0 3px #322634;
}
html #frame .info {min-width:0;gap:6px}
html #frame .row {align-items:center;gap:7px;color:var(--hud-paper);line-height:20px}
html #pname {font:24px/22px Pix,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html #plvl {margin-left:auto;flex:none;font:16px/20px Pix,monospace;color:#c7b5cd}
html #admin-badge {font:11px/14px Pix,monospace;padding:1px 3px;margin:0;color:#dcc092;background:#332535;border:1px solid #775b44}
html #frame .bar {
  margin-left:22px;height:21px;border:1px solid #080710;
  box-shadow:0 0 0 1px #4e3548,inset 0 2px 3px #0008;
}
html #frame .bar b {font:700 14px/19px Txt,sans-serif;color:#fff1db;letter-spacing:.3px}
html #frame .bar.hp i {background:linear-gradient(#eb5267 0 2px,#c72749 2px,#a1193b)}
html #frame .bar.mp i {background:linear-gradient(#b5edff 0 2px,#3aa2cc 2px,#23769c)}
html #frame .bar.hp:before,html #frame .bar.mp:before {
  content:'';position:absolute;left:-23px;top:2px;width:16px;height:16px;
  background:#e54a63;clip-path:polygon(0 12%,37% 12%,50% 30%,63% 12%,100% 12%,100% 55%,50% 100%,0 55%);
}
html #frame .bar.mp:before {background:#76d5f1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:inset 0 0 0 5px #2b8eaf}
html #frame .bar.xp {height:4px;margin-top:0;box-shadow:none;border:0;background:#09070e}
html #frame .bar.xp i {background:#bca26e}

/* Moedas reais do perfil: ícone separado, rótulo e valor, sem cortar dígitos. */
html #wallet {
  top:calc(100% + 14px);left:-6px;width:var(--hud-wallet-width);height:66px;
  display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:18px 30px;
  align-content:center;align-items:center;column-gap:10px;padding:3px 10px;
  white-space:normal;pointer-events:auto;
}
html .wallet-bone {grid-row:1 / 3;width:42px;height:42px;filter:drop-shadow(2px 3px 0 #09060e)}
html .wallet-label {font:16px/18px Pix,monospace;letter-spacing:.6px;color:#f4d695;white-space:nowrap}
html .wallet-value {font:32px/30px Pix,monospace;color:#fff0c0;letter-spacing:1px;font-variant-numeric:tabular-nums}

html #cash-shop-open {
  top:calc(var(--hud-edge) + var(--hud-player-height) + 88px);left:var(--hud-edge);
  width:var(--hud-wallet-width);height:62px;margin:0;padding:5px 10px;
  display:grid;grid-template-columns:40px minmax(0,1fr) 60px;grid-template-rows:18px 22px;
  grid-template-areas:'gem caption shop' 'gem balance shop';gap:0 9px;
  overflow:visible;transition:filter .15s;
}
html #cash-shop-open:before {display:none}
html #cash-shop-open .cash-gem {grid-area:gem;align-self:center;width:36px;height:36px;background-size:32px;filter:drop-shadow(0 2px 2px #08060c);margin:0}
html #cash-shop-open .cash-caption {grid-area:caption;font:16px/18px Pix,monospace;color:#e4c7ef;letter-spacing:.8px}
html #cash-shop-open [data-cash-balance] {grid-area:balance;font:23px/24px Pix,monospace;color:#f5e8d0;letter-spacing:.5px;white-space:nowrap}
html #cash-shop-open .cash-enter {
  grid-area:shop;display:grid;place-items:center;height:36px;
  font:20px Pix,monospace;letter-spacing:.5px;color:#f6e8ff;background:linear-gradient(#56376e,#362044);
  border:1px solid #b998d2;box-shadow:0 2px #090610,inset 0 0 0 2px #25172e;
}
html #cash-shop-open:hover {filter:brightness(1.15);box-shadow:0 4px 16px #0008,inset 0 0 0 1px #a17fa4}
html #cash-shop-open:focus-visible {outline:2px solid #f0d29b;outline-offset:4px}

/* Localização e mapa: mesmo alinhamento e respiro do protótipo. */
html #zone {
  top:22px;max-width:calc(100vw - var(--hud-player-width) * 2 - 64px);
  padding:7px 26px;font:28px/30px Pix,monospace;letter-spacing:1px;
  text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
}
html #walk-guide {top:88px;gap:10px;padding:4px 14px;max-width:360px}
html #walk-guide b {display:none}
html #walk-guide small {margin:0;font:14px/20px Txt,sans-serif;color:#ddd1df}
html #walk-guide .walk-guide-icon {font:22px/24px Txt,sans-serif;color:#e7c085}
html #mapbox {top:var(--hud-edge);right:var(--hud-edge);width:var(--hud-map-width);height:var(--hud-map-height);padding:6px}
html #mapbox:after {content:'N';position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 9px;background:#17111e;border:1px solid #af8253;color:#ebcb98;font:16px/18px Pix,monospace;pointer-events:none}
html #minimap {width:100%;height:100%;background:#0c0b12}
html #quest-tracker {top:calc(var(--hud-edge) + var(--hud-map-height) + 18px);right:var(--hud-edge);width:var(--hud-map-width);padding:9px 12px 12px}
html #quest-tracker>strong {display:flex;align-items:center;gap:9px;font:20px/24px Pix,monospace;color:var(--hud-paper)}
html #quest-tracker>strong:before {content:'';width:24px;height:24px;flex:none;background:url(/client/assets/ui/mobile/i_missoes.png) center/24px no-repeat}
html #quest-tracker>div {position:relative;margin-top:8px;padding:9px 0 0 20px;border-color:#584139}
html #quest-tracker>div:before {content:'!';position:absolute;left:0;top:9px;font:24px/24px Pix,monospace;color:#edc16d;text-shadow:0 2px #603b24}
html #quest-tracker b {font:18px/21px Pix,monospace;color:#f4e4be}
html #quest-tracker small {font:13px/19px Txt,sans-serif;color:#cbbdd3;margin-top:4px}
html #quest-tracker .quest-tooltip {right:calc(100% + 12px);top:0;padding-right:0}
html #quest-tracker:hover {background-color:#302337}

/* Barra única : técnicas violetas, combate bronze, menus pequenos. */
html #hotbar {padding:10px 16px 24px;gap:16px;align-items:center}
html #hotbar .bar-group {gap:var(--dock-gap)}
html #hotbar .bar-group+.bar-group {padding-left:16px;background:linear-gradient(transparent,#b78755 20% 80%,transparent) left center/1px 100% no-repeat}
html #hotbar .slot,html #hotbar #skill-hotbar button {
  border:1px solid #a47d59;background:linear-gradient(135deg,#2e2238,#100d18 75%);
  box-shadow:inset 0 0 0 2px #100c17,inset 0 3px 0 2px #624658,0 2px 0 #06040a;
  border-radius:0;
}
html #hotbar #skill-hotbar button {border-color:#b499cd;box-shadow:inset 0 0 0 2px #191023,inset 0 3px 0 2px #63477a,0 2px 0 #06040a}
html #hotbar .slot[data-k=LMB] {background:linear-gradient(135deg,#352431,#130d18);border-color:#cf916a}
html #hotbar #menu-hotbar .slot {background:linear-gradient(135deg,#2d2030,#100d18);border-color:#c29a69}
html #hotbar img,html #hotbar #skill-hotbar img {width:32px;height:32px;filter:drop-shadow(1px 2px #07040b)}
html #hotbar #menu-hotbar .slot img {width:28px;height:28px}
html #hotbar .key,html #hotbar #skill-hotbar b,html #hotbar #menu-hotbar .slot .key,html #hotbar #sndslot .key {
  top:calc(100% + 4px);left:0;right:0;text-align:center;font:16px/16px Pix,monospace;color:#eddec0;
}
html #hotbar .slot[data-k=LMB] .key {font-size:14px}
html #hotbar .count {right:4px;bottom:2px;font:14px/16px Pix,monospace;color:#fff0bf}
html #hotbar #menu-hotbar .slot:hover:not(:disabled),html #hotbar #menu-hotbar .slot:active {background:linear-gradient(#57405c,#22172c);border-color:#ffe1a3;filter:none}
html #hotbar button:hover:not(:disabled) {background-color:#423047;border-color:#f0d6a6;filter:brightness(1.18)}
html #hotbar #skill-hotbar button.queued {background-image:linear-gradient(#70513d,#302132)!important;border-color:#ffda85}
html #skill-hotbar span:not(:empty) {inset:2px;background:#100c19d9;font-size:22px;color:#f6e5c3}
html #chat-launcher {left:var(--hud-edge);bottom:var(--dock-bottom);height:50px;margin:0;padding:5px 12px;gap:12px;font:16px Pix,monospace}
html #chat-launcher svg {fill:none;stroke:#dfc9b9}
html #chat-launcher kbd {color:#f8deb0;border-color:#836249;font:14px Pix,monospace;background:#100c17;padding:4px 7px}
html #chat {left:var(--hud-edge);padding:8px 12px}
html #status-effects {left:0;top:calc(100% + 162px);gap:6px;max-width:var(--hud-player-width);flex-wrap:wrap}
html .buff-icon {padding:3px 5px;background:#17101fe8;border:1px solid #665064;color:#ead7b9}
html #party-frame,html #party-bars {left:var(--hud-edge);top:370px}
html #tutorial {top:146px;max-width:calc(100vw - var(--hud-player-width) - var(--hud-map-width) - 90px)}

/* Molduras compactas para telas menores, mantendo os valores legíveis. */
@media (max-width:1250px) {
  html {--hud-edge:14px;--hud-player-width:310px;--hud-player-height:108px;--hud-map-width:204px;--hud-map-height:157px;--dock-slot:46px;--dock-menu:40px;--dock-gap:5px;--dock-height:84px}
  html #portrait {width:64px;height:72px}
  html #frame {gap:10px;padding:8px}
  html #frame .bar b {font-size:13px}
  html #zone {max-width:calc(100vw - 660px);padding:6px 14px;font:22px/26px Pix,monospace;white-space:normal}
  html #hotbar {gap:12px;padding-left:12px;padding-right:12px}
  html #hotbar .bar-group+.bar-group {padding-left:12px}
}
@media (max-width:1150px) {
  html #chat-launcher {bottom:calc(var(--dock-bottom) + var(--dock-height) + 12px);height:42px}
}
@media (max-width:950px) {
  html {--hud-edge:12px;--hud-player-width:280px;--hud-player-height:104px;--hud-map-width:180px;--hud-map-height:138px;--hud-wallet-width:240px;--dock-slot:40px;--dock-menu:34px;--dock-gap:4px;--dock-height:78px;--dock-bottom:12px}
  html #portrait {width:56px;height:64px}
  html #pname {font-size:20px}
  html #frame .bar {margin-left:18px}
  html #frame .bar:before {left:-19px;width:13px}
  html #zone {left:calc(50% + 40px);max-width:calc(100vw - 510px);font-size:20px;line-height:22px}
  html #walk-guide {top:104px;left:calc(50% + 40px);max-width:calc(100vw - 510px);padding:3px 7px}
  html #walk-guide small {font-size:12px;line-height:16px}
  html #hotbar {gap:8px;padding-left:10px;padding-right:10px}
  html #hotbar .bar-group+.bar-group {padding-left:8px}
  html #hotbar #menu-hotbar .slot img {width:24px;height:24px}
  html #tutorial {top:175px;max-width:calc(100vw - 510px)}
}
@media (max-width:700px) {
  html {--hud-player-width:260px;--hud-wallet-width:230px;--hud-map-width:156px;--hud-map-height:120px;--dock-slot:30px;--dock-menu:26px;--dock-gap:3px;--dock-height:68px}
  html #zone {top:310px;left:12px;transform:none;max-width:260px;font-size:18px;line-height:20px;padding:5px 10px}
  html #walk-guide {top:360px;left:12px;transform:none;max-width:260px}
  html #hotbar {gap:6px;padding:8px 7px 24px}
  html #hotbar .bar-group+.bar-group {padding-left:6px}
  html #hotbar img,html #hotbar #skill-hotbar img,html #hotbar #menu-hotbar .slot img {width:22px;height:22px}
  html #party-frame,html #party-bars {top:405px}
  html #tutorial {top:145px;left:50%;max-width:90vw}
}
@media (prefers-reduced-motion:reduce) {
  html #cash-shop-open {transition:none}
}