/* ================================================================ HUD com a arte em PNG
   Posições e tamanhos tirados do mockup (1672×941). --u = 1 pixel do mockup na tela atual, então
   a HUD mantém as proporções do mockup em qualquer resolução. Peças em assets/hud/png/
   (recortadas de assets/hud/src/sheet.webp por dev/hud-cut.html). Substitui hud.css (que continua
   no projeto: basta trocar o <link> de volta). */

.game { display: block; padding: 0; background: #000; overflow: hidden;
  --u: max(.42px, min(calc(100vw / 1672), calc(100vh / 941)));
  --hud-alpha: .78;
  --gold: #f5b642; --gold2: #ffd98a; --txt: #eef2ff; --muted: #b9c3d8;
  --font: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif; }
#map-wrap { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: #000; overflow: hidden; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; outline: none; display: block; flex: none; }
#blind { position: absolute; inset: 0; background: rgba(0,0,0,.92); }
#blind.flare { background: rgba(255,255,236,.97); }

/* balões de fala */
#bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; left: 0; top: 0; max-width: clamp(140px, 16vw, 260px); width: max-content; padding: 5px 10px; margin-top: -6px;
  background: rgba(255, 253, 245, .96); color: #1a1a22; border: 2px solid #2b2233; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,.45);
  font: bold clamp(11px, .8vw, 14px)/1.25 Tahoma, Verdana, sans-serif; text-align: center; overflow-wrap: anywhere; animation: bubble-in .15s ease-out; transition: opacity .4s; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 8px solid transparent; border-bottom: 0; border-top-color: #2b2233; }
.bubble::before { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(255, 253, 245, .96); z-index: 1; }
.bubble.out { opacity: 0; }
@keyframes bubble-in { from { opacity: 0; margin-top: 2px; } }

/* ---------------------------------------------------------------- base */
#hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: var(--font); color: var(--txt); }
#hud-player, #hud-quests, #hud-buffs, #hud-menu, #hud-mini, #hud-chat, #hud-bar > *, #hud-win, #hud-confirm, #hud .act { pointer-events: auto; }
#hud button { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 0; box-shadow: none; }
#hud svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
#hud kbd { font: bold calc(var(--u) * 16) var(--font); }
.png { background-repeat: no-repeat; background-size: 100% 100%; }
.collapsed > :not(.htabs):not(form):not(.pin) { display: none !important; }

/* ---------------------------------------------------------------- jogador (topo esquerdo) */
#hud-left { position: absolute; inset: 0; pointer-events: none; }
#hud-player { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 6); width: calc(var(--u) * 650); height: calc(var(--u) * 228);
  background: url(../assets/hud/png/frame-player.png) no-repeat 0 0 / 100% 100%; }
#hud-player.ko { filter: grayscale(.8); }
/* retrato dentro do anel de fogo */
.portrait-shell { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 0); width: calc(var(--u) * 205); height: calc(var(--u) * 215); }
.portrait-shell::after { content: ''; position: absolute; inset: 0; background: url(../assets/hud/png/portrait-ring.png) no-repeat center / 100% 100%; pointer-events: none; }
.portrait { position: absolute; left: 21%; top: 22%; width: 60%; height: 57%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #5a6a86, #1c2233 72%); }
.portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#hud-level { position: absolute; left: calc(var(--u) * 42); top: calc(var(--u) * 166); width: calc(var(--u) * 125); height: calc(var(--u) * 46); z-index: 2;
  display: grid; place-items: center; background: url(../assets/hud/png/level-plate.png) no-repeat center / 100% 100%;
  font: bold calc(var(--u) * 24) var(--font); color: #fff; text-shadow: 0 2px 3px #000; white-space: nowrap; }
.pinfo { position: absolute; inset: 0; }
.pname { position: absolute; left: calc(var(--u) * 252); top: calc(var(--u) * 28); display: flex; align-items: baseline; gap: calc(var(--u) * 26); white-space: nowrap; }
.pname::before { content: ''; position: absolute; left: calc(var(--u) * -40); top: calc(var(--u) * 10); width: calc(var(--u) * 36); height: calc(var(--u) * 36);
  background: url(../assets/hud/png/dragonball.png) no-repeat center / contain; }
.pname b { font-size: calc(var(--u) * 34); font-weight: 900; color: #fff; text-shadow: 0 2px 4px #000; max-width: calc(var(--u) * 250); overflow: hidden; text-overflow: ellipsis; }
.pname small { font-size: calc(var(--u) * 20); color: #e7ecf8; }
/* barras */
.hbar { position: absolute; left: calc(var(--u) * 210); width: calc(var(--u) * 360); display: flex; align-items: center; }
.hbar label { width: calc(var(--u) * 64); font: bold calc(var(--u) * 19) var(--font); color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.hbar.ki label { text-transform: uppercase; }
.hbar::before { content: ''; position: absolute; left: calc(var(--u) * 64); right: 0; top: 0; bottom: 0; border-radius: calc(var(--u) * 5);
  background: linear-gradient(#070a12, #121827); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(120, 140, 180, .35); }
/* o JS põe a largura em % da barra inteira (360u); a trilha tem 292u, então escala 292/360 */
.hbar i { position: absolute; left: calc(var(--u) * 66); top: calc(var(--u) * 2); bottom: calc(var(--u) * 2);
  transform-origin: left; transform: scaleX(.811); border-radius: calc(var(--u) * 4); transition: width .3s; }
.hbar span { position: relative; margin-left: auto; padding-right: calc(var(--u) * 8); font: bold calc(var(--u) * 19) var(--font); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.hbar.pl { top: calc(var(--u) * 83); height: calc(var(--u) * 26); }
.hbar.ki { top: calc(var(--u) * 117); height: calc(var(--u) * 26); }
.hbar.exp { top: calc(var(--u) * 152); height: calc(var(--u) * 22); }
.hbar.fat { top: calc(var(--u) * 185); height: calc(var(--u) * 20); }
.hbar.exp span { font-style: italic; }
.hbar.pl i { background: linear-gradient(180deg, #ff5a55, #d11f2a 55%, #8e0f18); }
.hbar.ki i { background: linear-gradient(180deg, #5fd0ff, #1a86e0 55%, #0e4f96); }
.hbar.exp i { background: linear-gradient(180deg, #ffe07a, #f5a21a 60%, #c46a07); }
.hbar.fat i { background: linear-gradient(180deg, #c7a4ff, #7c4ce0); }
#hud-player::after { content: ''; position: absolute; left: calc(var(--u) * 584); top: calc(var(--u) * 166); width: calc(var(--u) * 46); height: calc(var(--u) * 46);
  background: url(../assets/hud/png/dragonball.png) no-repeat center / contain; }
/* buffs: fileira à direita do card */
#hud-buffs { position: absolute; left: calc(var(--u) * 664); top: calc(var(--u) * 14); display: flex; gap: calc(var(--u) * 6); }
#hud-buffs:empty { display: none; }
.buff { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle, #1a2130, #070a12); border: calc(var(--u) * 2) solid var(--c); box-shadow: 0 0 calc(var(--u) * 8) var(--c); }

/* ---------------------------------------------------------------- Progresso / Por perto */
#hud-quests { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 245); width: calc(var(--u) * 635); height: calc(var(--u) * 455);
  border-style: solid; border-color: transparent;
  border-width: calc(var(--u) * 92) calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 40);
  border-image: url(../assets/hud/png/frame-panel.png) 92 40 40 40 fill / calc(var(--u) * 92) calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 40) stretch; }
#hud-quests.collapsed { height: calc(var(--u) * 100); }
#hud-quests::before { content: ''; position: absolute; right: calc(var(--u) * -12); top: calc(var(--u) * 10); width: calc(var(--u) * 150); height: calc(var(--u) * 210);
  background: url(../assets/hud/png/watermark-panel.png) no-repeat center / contain; opacity: .35; pointer-events: none; }
#hud-quests::after { content: ''; position: absolute; right: calc(var(--u) * -30); bottom: calc(var(--u) * -30); width: calc(var(--u) * 50); height: calc(var(--u) * 50);
  background: url(../assets/hud/png/dragonball.png) no-repeat center / contain; }
#hud-quests.collapsed::before, #hud-quests.collapsed::after { display: none; }
.hud-orn { display: none; }
/* abas: por cima do cabeçalho da moldura */
#hud-quests .htabs { position: absolute; left: calc(var(--u) * 40); right: calc(var(--u) * 10); top: calc(var(--u) * -86); height: calc(var(--u) * 52); display: flex; align-items: stretch; gap: calc(var(--u) * 4); }
#hud-quests .htabs button { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); width: calc(var(--u) * 240);
  font: bold calc(var(--u) * 24) var(--font); color: #cfd8ea; text-shadow: 0 2px 3px #000;
  background: url(../assets/hud/png/tab-inactive.png) no-repeat center / 100% 100%; }
#hud-quests .htabs button.on { color: #fff; background-image: url(../assets/hud/png/tab-active.png); }
#hud-quests .htabs button svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
#hud-quests .htabs button[data-tab="prog"] svg { color: #ffd23d; }
#hud-quests .htabs button[data-tab="near"] svg { color: #6ec1ff; }
#hud-quests .htabs em { font-style: normal; background: var(--gold); color: #111; border-radius: calc(var(--u) * 10); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 16); }
#hud-quests .htabs em:empty { display: none; }
#hud-quests .htabs .collapse { width: calc(var(--u) * 50); margin-left: auto; background: none !important; font-size: calc(var(--u) * 34); color: var(--gold); }
.hbody { position: relative; height: 100%; overflow-y: auto; padding: 0 calc(var(--u) * 14); }
.quest { position: relative; display: grid; grid-template-columns: calc(var(--u) * 68) 1fr auto; column-gap: calc(var(--u) * 16); align-items: center;
  padding: calc(var(--u) * 10) 0; min-height: calc(var(--u) * 86); }
.quest .qi { grid-row: 1 / span 2; width: calc(var(--u) * 66); height: calc(var(--u) * 66); background-repeat: no-repeat; background-position: center; background-size: contain; }
.quest .qi svg { display: none; }
.quest .qi-star { background-image: url(../assets/hud/png/icon-level.png); }
.quest .qi-fist { background-image: url(../assets/hud/png/icon-combat.png); }
.quest .qi-moon { background-image: url(../assets/hud/png/icon-fatigue.png); }
.quest .qi-bag { background-image: url(../assets/hud/png/icon-zenni.png); }
.quest > div { min-width: 0; }
.quest b { display: block; font-size: calc(var(--u) * 24); font-weight: 900; text-shadow: 0 2px 3px #000; }
.quest p { margin: calc(var(--u) * 4) 0 calc(var(--u) * 8); font-size: calc(var(--u) * 17); color: #dfe5f2; line-height: 1.15; }
.quest em { align-self: start; padding-top: calc(var(--u) * 6); font-style: normal; font-weight: bold; font-size: calc(var(--u) * 20); color: #fff; }
.qbar { height: calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: #0a0e18; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(120,140,180,.35); overflow: hidden; }
.qbar i { display: block; height: 100%; border-radius: calc(var(--u) * 6); box-shadow: 0 0 calc(var(--u) * 8) currentColor; }
.hbody .empty { font-size: calc(var(--u) * 18); color: var(--muted); margin: calc(var(--u) * 10) 0; }
#hud button.near { display: grid; grid-template-columns: calc(var(--u) * 50) auto 1fr; align-items: center; gap: calc(var(--u) * 12); width: 100%; text-align: left;
  padding: calc(var(--u) * 8) calc(var(--u) * 6); font-size: calc(var(--u) * 20); border-radius: calc(var(--u) * 8); }
#hud button.near:hover { background: rgba(245,182,66,.14); }
button.near svg { display: none; }
button.near::before { content: ''; width: calc(var(--u) * 46); height: calc(var(--u) * 46); background: url(../assets/hud/png/icon-nearby.png) no-repeat center / contain; }
button.near span { color: #9fd4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- menu + minimapa (topo direito) */
#hud-right { position: absolute; inset: 0; pointer-events: none; }
#hud-menu { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 6); display: flex; gap: calc(var(--u) * 12); }
#hud-menu button { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 122); display: flex; flex-direction: column; align-items: center; }
#hud-menu button::before { content: ''; width: calc(var(--u) * 100); height: calc(var(--u) * 98); background: no-repeat center / contain; transition: transform .12s, filter .12s; }
#hud-menu button[data-win="char"]::before { background-image: url(../assets/hud/png/menu-character.png); }
#hud-menu button[data-win="inv"]::before { background-image: url(../assets/hud/png/menu-inventory.png); }
#hud-menu button[data-win="skills"]::before { background-image: url(../assets/hud/png/menu-skills.png); }
#hud-menu button[data-win="map"]::before { background-image: url(../assets/hud/png/menu-map.png); }
#hud-menu button[data-win="opts"]::before { background-image: url(../assets/hud/png/menu-options.png); }
#hud-menu button[data-win="build"]::before { background-image: url(../assets/hud/png/menu-inventory.png); filter: hue-rotate(160deg) saturate(1.3); }
#hud-menu button[data-win="guide"]::before { background-image: url(../assets/hud/png/menu-map.png); filter: hue-rotate(320deg) saturate(1.2) brightness(1.08); }
#hud-menu button[data-rp="1"]::before { background-image: url(../assets/hud/png/menu-character.png); filter: hue-rotate(245deg) saturate(1.15) brightness(1.08); }
#hud-menu button[data-win="build"] svg { display: none; }
#hud-menu button:hover::before, #hud-menu button.on::before { transform: translateY(calc(var(--u) * -3)) scale(1.05); filter: brightness(1.2); }
#hud-menu svg { display: none; }
#hud-menu span { margin-top: calc(var(--u) * -4); font: bold calc(var(--u) * 19) var(--font); color: #fff; white-space: nowrap;
  text-shadow: 0 0 calc(var(--u) * 3) #000, 0 calc(var(--u) * 2) calc(var(--u) * 3) #000, calc(var(--u) * 1) 0 #000, calc(var(--u) * -1) 0 #000; }
#hud-menu kbd { position: absolute; right: calc(var(--u) * 4); top: 0; color: var(--gold2); text-shadow: 0 1px 2px #000; }
#hud-mini { position: absolute; right: calc(var(--u) * 7); top: calc(var(--u) * 132); width: calc(var(--u) * 280); height: calc(var(--u) * 332); }
#hud-mini .ring { position: absolute; left: 0; top: 0; width: calc(var(--u) * 280); height: calc(var(--u) * 274); }
#hud-mini .ring::after { content: ''; position: absolute; inset: 0; background: url(../assets/hud/png/minimap-ring.png) no-repeat center / 100% 100%; pointer-events: none; }
#hud-mini .ring canvas { position: absolute; left: 14%; top: 14%; width: 71%; height: 72%; border-radius: 50%; image-rendering: pixelated; background: #000; }
.radar-side { display: none; }
#hud-mini .ring b { position: absolute; z-index: 1; font: 900 calc(var(--u) * 24) var(--font); color: #fff; text-shadow: 0 0 calc(var(--u) * 3) #000, 0 0 calc(var(--u) * 3) #000; }
#hud-mini .ring .n { left: 50%; top: calc(var(--u) * 4); transform: translateX(-50%); }
#hud-mini .ring .s { left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); }
#hud-mini .ring .w { left: calc(var(--u) * 8); top: 50%; transform: translateY(-50%); }
#hud-mini .ring .e { right: calc(var(--u) * 8); top: 50%; transform: translateY(-50%); }
#hud-loc { position: absolute; left: calc(var(--u) * 45); top: calc(var(--u) * 252); width: calc(var(--u) * 206); height: calc(var(--u) * 78);
  display: grid; align-content: center; justify-items: center; background: url(../assets/hud/png/frame-location.png) no-repeat center / 100% 100%; }
#hud-loc b { font: 900 calc(var(--u) * 22) var(--font); color: #fff; text-shadow: 0 1px 3px #000; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud-loc small { font: bold calc(var(--u) * 17) var(--font); color: #e4e9f5; }

/* ---------------------------------------------------------------- chat (canto inferior esquerdo) */
#hud-chat { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * 18); width: calc(var(--u) * 552); height: calc(var(--u) * 206);
  display: flex; flex-direction: column; border-style: solid; border-color: transparent;
  border-width: calc(var(--u) * 40) calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 34);
  border-image: url(../assets/hud/png/frame-chat.png) 40 40 40 40 fill / calc(var(--u) * 40) calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 34) stretch; }
#hud-chat.collapsed { height: calc(var(--u) * 130); }
.hud-chat-mark { position: absolute; right: calc(var(--u) * -6); top: calc(var(--u) * 26); width: calc(var(--u) * 120); height: calc(var(--u) * 120);
  font-size: 0; background: url(../assets/hud/png/watermark-chat.png) no-repeat center / contain; opacity: .35; pointer-events: none; }
#hud-chat .htabs { position: relative; margin: calc(var(--u) * -30) calc(var(--u) * -18) 0 calc(var(--u) * -18); height: calc(var(--u) * 46); display: flex; align-items: stretch; flex: none; }
#hud-chat .htabs button { padding: 0 calc(var(--u) * 26); font: bold calc(var(--u) * 21) var(--font); color: #cdd6e8; text-shadow: 0 1px 2px #000; }
#hud-chat .htabs button.on { color: #fff; background: url(../assets/hud/png/tab-active.png) no-repeat center / 100% 100%; min-width: calc(var(--u) * 125); }
#hud-chat .htabs .collapse { margin-left: auto; font-size: calc(var(--u) * 30); color: var(--gold); }
#output { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 6) calc(var(--u) * 6); font: bold calc(var(--u) * 17)/1.35 var(--font); color: #d6dcea; text-shadow: 0 1px 1px #000; }
#output.f-chat > :not(.chat),
#output.f-sys > :not(.sys),
#output.f-tutorial > :not(.tutorial),
#output.f-support > :not(.support),
#output.f-trade > :not(.trade) { display: none; }
#chat-form { position: relative; display: flex; gap: calc(var(--u) * 12); padding-top: calc(var(--u) * 6); flex: none; }
#chat-form select, #chat-form input { height: calc(var(--u) * 44); font: bold calc(var(--u) * 19) var(--font); color: #fff; background: rgba(4, 7, 14, .85);
  border: calc(var(--u) * 2) solid #b8801e; border-radius: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); }
#chat-form select { width: calc(var(--u) * 94); }
#hud #chat-emoji { flex: 0 0 calc(var(--u) * 44); width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%;
  display: grid; place-items: center; border: calc(var(--u) * 2) solid rgba(255,135,205,.72); color: #ffd4ef;
  background: radial-gradient(circle at 35% 30%, rgba(255,220,242,.28), rgba(255,92,183,.15) 48%, rgba(8,13,23,.92) 72%);
  font: 900 calc(var(--u) * 27)/1 'Segoe UI Symbol','Segoe UI Emoji',sans-serif; text-shadow: 0 0 calc(var(--u) * 8) rgba(255,112,203,.75);
  box-shadow: inset 0 0 calc(var(--u) * 10) rgba(255,255,255,.05), 0 0 calc(var(--u) * 10) rgba(255,90,190,.14); }
#hud #chat-emoji:hover { color:#fff; border-color:#ffb7e1; transform:translateY(calc(var(--u) * -1)); box-shadow:0 0 calc(var(--u) * 14) rgba(255,94,190,.45); }
#chat { flex: 1; min-width: 0; border-color: #33415e !important; }
#chat:focus { border-color: var(--gold) !important; outline: none; }

/* ---------------------------------------------------------------- hotbar (centro inferior) */
#hud-bar { position: absolute; left: 50%; bottom: calc(var(--u) * 32); transform: translateX(calc(-50% + var(--u) * 121)); display: grid; justify-items: center; gap: calc(var(--u) * 8); }
#hud-bar .hotbar-shell { order: 2; position: relative; width: calc(var(--u) * 700); height: calc(var(--u) * 86); display: grid; place-items: center;
  background: url(../assets/hud/png/frame-hotbar.png) no-repeat center / 100% 100%; }
#hud-bar .hotbar-shell::before, #hud-bar .hotbar-shell::after { content: ''; position: absolute; top: 50%; width: calc(var(--u) * 70); height: calc(var(--u) * 70);
  transform: translateY(-50%); background: url(../assets/hud/png/dragonball.png) no-repeat center / contain; }
#hud-bar .hotbar-shell::before { left: calc(var(--u) * -34); }
#hud-bar .hotbar-shell::after { right: calc(var(--u) * -34); }
#hotbar { display: flex; gap: calc(var(--u) * 6); }
#hud .slot { position: relative; width: calc(var(--u) * 56); height: calc(var(--u) * 58); display: grid; place-items: center; overflow: hidden;
  background: url(../assets/hud/png/slot.png) no-repeat center / 100% 100%; }
#hud .slot:hover, #hud .slot.drop, #hud .slot:active { background-image: url(../assets/hud/png/slot-active.png); }
#hud .slot kbd { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 3); font-size: calc(var(--u) * 15); color: #fff; text-shadow: 0 1px 2px #000; }
#hud .slot.empty kbd { position: static; font-size: calc(var(--u) * 26); font-weight: 900; }
#hud .slot svg { --h: 30; width: 62%; height: 62%; margin-bottom: 14%; color: hsl(var(--h) 100% 85%); filter: drop-shadow(0 0 calc(var(--u) * 5) hsl(var(--h) 100% 55%)); }
#hud .slot small { position: absolute; left: 2px; right: 2px; bottom: calc(var(--u) * 2); font: bold calc(var(--u) * 10)/1 var(--font); color: #fff; text-align: center;
  text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#consumables { order: 1; display: flex; gap: calc(var(--u) * 6); }
#consumables[hidden] { display: none; }
#hud .cons { position: relative; width: calc(var(--u) * 50); height: calc(var(--u) * 52); display: grid; place-items: center;
  background: url(../assets/hud/png/slot.png) no-repeat center / 100% 100%; }
.cons canvas { width: 70%; height: 70%; image-rendering: pixelated; }
.cons b { position: absolute; right: calc(var(--u) * 5); bottom: calc(var(--u) * 2); font-size: calc(var(--u) * 14); color: #fff; text-shadow: 0 1px 2px #000; }
.cons kbd { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 2); font-size: calc(var(--u) * 12) !important; color: var(--gold2); }

/* ---------------------------------------------------------------- ações (canto inferior direito) */
#hud-actions { position: absolute; right: 0; bottom: 0; width: calc(var(--u) * 420); height: calc(var(--u) * 470); pointer-events: none; }
#hud .act { position: absolute; transform: none !important; background: no-repeat center / contain; border-radius: 50%; }
#hud .act svg { display: none; }
#hud .act:hover { filter: brightness(1.2); }
#hud .act:active { filter: brightness(.9); }
/* posição (right/bottom a partir do canto) e tamanho de cada botão, medidos no mockup */
#hud .act[data-act="fist"] { left: auto !important; top: auto !important; right: calc(var(--u) * 8); bottom: calc(var(--u) * 54); width: calc(var(--u) * 176); height: calc(var(--u) * 178); background-image: url(../assets/hud/png/action-punch.png); }
#hud .act[data-act="dumbbell"] { left: auto !important; top: auto !important; right: calc(var(--u) * 30); bottom: calc(var(--u) * 268); width: calc(var(--u) * 116); height: calc(var(--u) * 118); background-image: url(../assets/hud/png/action-train.png); }
#hud .act[data-act="moon"] { left: auto !important; top: auto !important; right: calc(var(--u) * 146); bottom: calc(var(--u) * 204); width: calc(var(--u) * 116); height: calc(var(--u) * 118); background-image: url(../assets/hud/png/action-rest.png); }
#hud .act[data-act="wing"] { left: auto !important; top: auto !important; right: calc(var(--u) * 202); bottom: calc(var(--u) * 76); width: calc(var(--u) * 120); height: calc(var(--u) * 122); background-image: url(../assets/hud/png/action-fly.png); }
#hud .act[data-act="up"] { left: auto !important; top: auto !important; right: calc(var(--u) * 262); bottom: calc(var(--u) * 194); width: calc(var(--u) * 104); height: calc(var(--u) * 106); background-image: url(../assets/hud/png/action-powerup.png); }
#hud .act[data-act="talk"] { left: auto !important; top: auto !important; right: calc(var(--u) * 150); bottom: calc(var(--u) * 334); width: calc(var(--u) * 100); height: calc(var(--u) * 100); background-image: url(../assets/hud/png/action-talk.png); }
#hud .act kbd { position: absolute; right: calc(var(--u) * -6); bottom: calc(var(--u) * -6); width: calc(var(--u) * 46); height: calc(var(--u) * 46); display: grid; place-items: center;
  background: url(../assets/hud/png/key-badge.png) no-repeat center / contain; font: 900 calc(var(--u) * 24) var(--font); color: #fff; text-shadow: 0 1px 2px #000; }
#hud .act[data-act="fist"] kbd { right: 50%; bottom: calc(var(--u) * -30); transform: translateX(50%); width: calc(var(--u) * 132); height: calc(var(--u) * 46);
  background-image: url(../assets/hud/png/level-plate.png); background-size: 100% 100%; font-size: calc(var(--u) * 22); }

/* ---------------------------------------------------------------- janelas (Personagem, Inventário, Habilidades, Mapa, Opções) */
#hud-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); z-index: 5; width: clamp(360px, calc(var(--u) * 640), 94vw);
  max-height: min(78vh, calc(var(--u) * 760)); display: flex; flex-direction: column; font-size: clamp(12px, calc(var(--u) * 18), 18px);
  border-style: solid; border-color: transparent; border-width: 40px 34px 34px 34px;
  border-image: url(../assets/hud/png/frame-chat.png) 40 40 40 40 fill / 40px 34px 34px 34px stretch; }
#hud-win[hidden] { display: none; }
#hud-win.win-skills { width: clamp(420px, calc(var(--u) * 820), 94vw); }
#hud-win.win-map { width: clamp(420px, calc(var(--u) * 820), 94vw); max-height: 92vh; }
#hud-win header { display: flex; align-items: center; gap: 12px; margin: -26px -14px 8px; padding: 0 6px 8px; border-bottom: 1px solid rgba(245,182,66,.3); }
#hud-win header > b { color: var(--gold2); font-size: 1.3em; text-shadow: 0 2px 3px #000; }
.wtabs { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
#hud .wtabs button { padding: 4px 16px; font-weight: bold; color: #cdd6e8; background: url(../assets/hud/png/tab-inactive.png) no-repeat center / 100% 100%; }
#hud .wtabs button.on { color: #fff; background-image: url(../assets/hud/png/tab-active.png); }
#hud #hud-win .x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: url(../assets/hud/png/key-badge.png) no-repeat center / contain; }
.wbody { overflow-y: auto; min-height: 0; padding: 2px 4px; }
.wbody .row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.wbody .row span:first-child { color: var(--muted); }
.wbody .row.item { cursor: pointer; border-radius: 4px; padding: 4px 6px; }
.wbody .row.item:hover { background: rgba(245,182,66,.14); }
.wbody .row.item:hover span { color: var(--gold2); }
.wbody .sep { color: var(--gold); font-size: .85em; margin: 10px 0 3px; border-bottom: 1px solid rgba(245,182,66,.3); }
.wbody .bar { height: 6px; background: #0a0e18; border-radius: 3px; margin-bottom: 3px; overflow: hidden; }
.wbody .bar i { display: block; height: 100%; }
.wbody .bar.pl i { background: #e0474c; }
.wbody .bar.ki i { background: #3fa9f5; }
.wbody .bar.fat i { background: #b98cff; }
.wbody .hint { color: var(--muted); font-size: .9em; margin: 10px 0 0; }
.verbcat { color: var(--gold); font-weight: bold; margin: 12px 0 6px; }
.verbcat:first-child { margin-top: 0; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
#hud .skill { --h: 30; position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; text-align: left; cursor: grab;
  border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); }
#hud .skill:hover { border-color: hsl(var(--h) 90% 65% / .8); background: hsl(var(--h) 60% 30% / .35); }
.skill .si { width: 30px; height: 30px; flex: none; border-radius: 7px; display: grid; place-items: center; color: hsl(var(--h) 100% 88%);
  background: radial-gradient(circle at 50% 40%, hsl(var(--h) 90% 60% / .6), hsl(var(--h) 70% 18%) 75%); }
.skill b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill kbd { margin-left: auto; color: var(--gold2); }
#bigmap { width: 100%; max-height: 70vh; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; display: block; background: #000; border-radius: 8px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
#hud .keys kbd { justify-self: start; background: rgba(0,0,0,.55); border: 1px solid rgba(245,182,66,.5); border-radius: 5px; padding: 4px 8px; font-size: 12px; color: var(--gold2); }

/* ---------- janela Construir (etapa 5) */
#hud-win.win-build { width: clamp(420px, calc(var(--u) * 900), 96vw); }
#hud-win.win-build header { flex-wrap: wrap; }
#hud-win.win-build .wtabs { order: 3; flex-basis: 100%; }
#hud .btools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
#hud .btools button { padding: 5px 12px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,182,66,.35); color: #e4e9f5; font-weight: bold; }
#hud .btools button.on, #hud .btools button:hover { border-color: var(--gold); color: var(--gold2); background: rgba(245,182,66,.14); }
#hud .btools .bsel { color: var(--gold2); margin-left: auto; }
#hud .bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; }
#hud .bitem { height: 50px; display: grid; place-items: center; border-radius: 7px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12); }
#hud .bitem canvas { image-rendering: pixelated; }
#hud .bitem:hover { border-color: rgba(245,182,66,.7); }
#hud .bitem.on { border-color: var(--gold); background: rgba(245,182,66,.2); box-shadow: 0 0 8px rgba(245,182,66,.55); }

/* Opções: textos de quadrinhos */
.opt-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(245,182,66,.3); }
.opt-row label { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--gold2); }
.opt-row small { color: var(--muted); }

/* itens: inventário, ciência e roupas */
#hud .igrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
#hud .iitem { height: auto; min-height: 76px; padding: 4px 2px; gap: 2px; position: relative; grid-template-rows: 40px auto auto; }
#hud .iitem small { font-size: 10px; line-height: 1.1; color: #dfe6f3; text-align: center; overflow: hidden; max-height: 2.3em; word-break: break-word; }
#hud .iitem .cost { font-size: 10px; color: var(--gold2); }
#hud .iitem .eqtag { position: absolute; top: 2px; right: 3px; font-size: 9px; font-style: normal; color: var(--gold2); }
#hud .iitem.poor { opacity: .5; }
#hud .hint.bad { color: #ff8c8c; }
#hud .hint.ok { color: #9ff0a8; }
#hud .gunstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin: 6px 0; }
#hud .gunrow { display: grid; grid-template-columns: 1fr 26px 30px 26px; align-items: center; gap: 4px; }
#hud .gunrow b { text-align: center; color: var(--gold2); }
#hud .gunrow button { height: 24px; border-radius: 5px; background: rgba(0,0,0,.45); border: 1px solid rgba(245,182,66,.35); color: #e4e9f5; font-weight: bold; }
#hud .gunrow button:disabled { opacity: .35; }
#hud .gundesc { white-space: pre-wrap; font-size: 11px; color: #cfd6e4; background: rgba(0,0,0,.3); padding: 6px; border-radius: 6px; }
#hud .gicons .iitem, #hud .bicons .iitem { min-height: 40px; grid-template-rows: 32px; }

/* nome do lugar ao chegar perto */
#place-banner { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); pointer-events: none; opacity: 0; z-index: 5;
  font: bold 26px/1.2 Georgia, serif; color: #ffe9a8; letter-spacing: 1px; text-shadow: 0 0 6px #000, 0 2px 3px #000; white-space: nowrap; }
#place-banner.show { animation: place-in 4s ease-out forwards; }
@keyframes place-in { 0% { opacity: 0; transform: translate(-50%, 8px); } 12% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; } }


/* ---------------------------------------------------------------- Guia integrado */
#hud-win.win-guide { width: clamp(760px, calc(var(--u) * 1180), 96vw); max-height: min(88vh, calc(var(--u) * 860)); }
#hud-win.win-guide header { flex-wrap: wrap; }
#hud-win.win-guide .wtabs { min-width: 280px; }
.guide-intro { display:flex; gap:16px; align-items:center; margin:4px 0 14px; }
.guide-intro h2, .guide-race-head h2 { margin:0; color:#fff; font-size:1.45em; }
.guide-intro p, .guide-desc { margin:5px 0 0; color:#dbe3f3; line-height:1.45; }
.guide-ball, .guide-emblem { width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:50%; color:#311b00;
  font-size:26px; font-weight:900; background:radial-gradient(circle at 35% 30%,#fff4a6 0,#ffca38 35%,#ef7d10 72%,#7f2500 100%);
  border:2px solid #ffd46a; box-shadow:0 0 16px rgba(255,174,45,.45); }
.guide-card { margin:10px 0; padding:12px 14px; border:1px solid rgba(245,182,66,.28); border-radius:10px;
  background:linear-gradient(135deg,rgba(12,18,31,.88),rgba(28,20,20,.72)); }
.guide-card h3 { margin:0 0 8px; color:var(--gold2); font-size:1.05em; }
.guide-card ul, .guide-card ol { margin:0; padding-left:22px; }
.guide-card li { margin:6px 0; color:#dfe5f2; line-height:1.35; }
.guide-card.warn { border-color:rgba(255,112,90,.35); background:linear-gradient(135deg,rgba(52,14,15,.58),rgba(18,15,22,.82)); }
.guide-card.warn h3 { color:#ff9a82; }
.guide-stat-grid, .guide-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.guide-stat-grid span, .guide-facts > div { padding:9px 10px; border-radius:8px; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.08); }
.guide-stat-grid b, .guide-facts b { display:block; color:#fff; }
.guide-stat-grid small, .guide-facts small { display:block; color:var(--muted); margin-top:2px; }
.guide-layout { display:grid; grid-template-columns:minmax(190px,26%) 1fr; gap:14px; min-height:500px; }
.guide-races { border-right:1px solid rgba(245,182,66,.25); padding-right:10px; }
.guide-search { box-sizing:border-box; width:100%; padding:8px 10px; margin-bottom:8px; color:#fff; background:#0c111d;
  border:1px solid rgba(245,182,66,.35); border-radius:7px; outline:none; }
.guide-search:focus { border-color:var(--gold); box-shadow:0 0 8px rgba(245,182,66,.2); }
.guide-race-list { display:flex; flex-direction:column; gap:4px; }
#hud .guide-race-btn { display:block; width:100%; padding:8px 9px; text-align:left; border-radius:7px;
  background:rgba(0,0,0,.25); border:1px solid transparent; }
#hud .guide-race-btn b { display:block; color:#e8edf8; }
#hud .guide-race-btn small { display:block; color:#8f9bb0; font-size:.75em; margin-top:2px; }
#hud .guide-race-btn:hover, #hud .guide-race-btn.on { background:rgba(245,182,66,.14); border-color:rgba(245,182,66,.5); }
#hud .guide-race-btn.mine b::after { content:' ★'; color:#ffd45b; }
.guide-detail { min-width:0; padding-right:4px; }
.guide-race-head { display:flex; align-items:center; gap:12px; }
.guide-tag { margin:3px 0 0; color:#8fcfff; font-weight:bold; }
.guide-current { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:10px; font-size:.55em; vertical-align:middle;
  color:#201500; background:#ffd15a; }
.guide-facts { margin:12px 0; grid-template-columns:repeat(6,minmax(0,1fr)); }
.guide-facts small { font-size:.7em; }
.guide-facts b { margin-top:3px; color:var(--gold2); font-size:1.05em; }
.guide-skill-chips { display:flex; flex-wrap:wrap; gap:6px; }
.guide-skill-chips span { padding:5px 9px; border-radius:12px; background:rgba(80,155,255,.14); border:1px solid rgba(95,170,255,.35); color:#cde6ff; }
.guide-skill-chips em { color:var(--muted); }
.guide-source { color:#8691a5; font-size:.78em; font-style:italic; margin:10px 2px 2px; }

@media (max-width: 900px) {
  #hud-win.win-guide { width:96vw; max-height:90vh; }
  .guide-layout { grid-template-columns:1fr; }
  .guide-races { border-right:0; border-bottom:1px solid rgba(245,182,66,.25); padding:0 0 9px; }
  .guide-race-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:180px; overflow:auto; }
  .guide-facts, .guide-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* ---------------------------------------------------------------- HUD flexível / transparência / modo limpo */
#hud-player, #hud-quests, #hud-chat, #hud-mini, #hud-win {
  opacity: var(--hud-alpha);
  transition: opacity .15s ease, transform .15s ease;
}
#hud-player:hover, #hud-quests:hover, #hud-chat:hover, #hud-mini:hover, #hud-win:hover { opacity: 1; }
#hud-quests, #hud-chat { min-width: 260px; min-height: 120px; max-width: 70vw; max-height: 75vh; }
#hud-quests { width: calc(var(--u) * 635); height: calc(var(--u) * 455); }
#hud-chat { width: calc(var(--u) * 552); height: calc(var(--u) * 206); }
#hud-quests::before, .hud-chat-mark { opacity: calc(.35 * var(--hud-alpha)); }
#hud-quests .hbody, #hud-chat #output { background: rgba(3,8,16,.18); border-radius: 8px; }
.hud-hidden-part, .hud-clean-hidden { display:none !important; }

#hud-quick { position:absolute; left:12px; bottom:8px; z-index:7; display:flex; gap:4px; pointer-events:auto; opacity:.35; transition:opacity .15s; }
#hud-quick:hover { opacity:1; }
#hud #hud-quick button { width:24px; height:24px; border-radius:50%; font:bold 11px var(--font); color:#fff; background:rgba(5,9,16,.72);
  border:1px solid rgba(245,182,66,.55); box-shadow:0 1px 4px rgba(0,0,0,.5); }
#hud #hud-quick button:hover { color:var(--gold2); border-color:var(--gold); }

.hud-vis-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#hud .hud-vis-options button { padding:7px 10px; border:1px solid rgba(245,182,66,.35); border-radius:6px; background:rgba(0,0,0,.35); color:#e6edf8; }

.guide-next { border-color:rgba(93,208,122,.5); background:linear-gradient(135deg,rgba(10,48,28,.52),rgba(11,18,30,.82)); }
.guide-progress-strip { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 10px; margin-bottom:8px; border-radius:7px; background:rgba(0,0,0,.28); }
.guide-progress-strip b { color:#9ff0a8; }
.guide-progress-strip span { color:#cfd8e8; font-size:.9em; }
.guide-note { color:#aeb9cc; font-size:.86em; line-height:1.4; margin:8px 0 0; }
.guide-builds { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.guide-builds > div { padding:10px; border-radius:8px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }
.guide-builds b { color:var(--gold2); display:block; }
.guide-builds small { color:#8fcfff; display:block; margin:3px 0; }
.guide-builds p { color:#d9e1ee; margin:4px 0 0; font-size:.85em; }
.guide-forms { display:flex; flex-direction:column; gap:6px; }
.guide-forms > div { display:grid; grid-template-columns:24px minmax(120px,.45fr) 1fr; gap:8px; align-items:center; padding:7px 9px; border-radius:7px; background:rgba(0,0,0,.26); }
.guide-forms > div span { color:#7f8b9e; font-weight:bold; }
.guide-forms > div.done span { color:#74e28a; }
.guide-forms > div.done b { color:#b9ffc4; }
.guide-forms small { color:#aeb9ca; }

@media (max-width:900px) {
  .guide-builds { grid-template-columns:1fr; }
  #hud-quick { bottom:4px; left:4px; }
}


/* ------------------------------------------------------------ resize custom (não corta abas ornamentais) */
.hud-resize { position:absolute; right:2px; bottom:2px; width:22px; height:22px; z-index:9; cursor:nwse-resize; pointer-events:auto; }
.hud-resize::before { content:''; position:absolute; right:3px; bottom:3px; width:11px; height:11px; border-right:2px solid #ffb63e; border-bottom:2px solid #ffb63e;
  filter: drop-shadow(0 0 2px #000); opacity:.9; }
#hud-quests, #hud-chat { overflow: visible !important; }
#hud-quests .hbody { overflow:auto; min-height:0; }
#hud-chat #output { overflow:auto; min-height:0; }

/* ------------------------------------------------------------ janela Habilidades organizada */
#hud-win.win-skills { width: clamp(620px, calc(var(--u) * 980), 96vw); max-height: 86vh; }
.skills-toolbar { position:sticky; top:0; z-index:2; padding:2px 0 10px; background:linear-gradient(rgba(5,10,18,.96),rgba(5,10,18,.84)); backdrop-filter: blur(3px); }
.skills-search { width:100%; box-sizing:border-box; padding:9px 11px; color:#fff; background:#09101d; border:1px solid rgba(245,182,66,.38); border-radius:8px; outline:none; }
.skills-search:focus { border-color:var(--gold); box-shadow:0 0 8px rgba(245,182,66,.22); }
.skills-filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#hud .skills-filters button { padding:5px 10px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(11,17,29,.75); color:#cdd6e8; font-weight:bold; }
#hud .skills-filters button.on, #hud .skills-filters button:hover { border-color:var(--gold); color:var(--gold2); background:rgba(245,182,66,.14); }
.skill-section { margin-bottom:14px; }
.skill-section .verbcat { display:flex; align-items:center; gap:8px; padding:6px 8px; margin:0 0 7px; border-left:3px solid var(--gold); background:linear-gradient(90deg,rgba(245,182,66,.12),transparent); }
.skill-section .verbcat span { color:var(--gold2); font-weight:900; }
.skill-section .verbcat em { margin-left:auto; min-width:22px; text-align:center; font-style:normal; font-size:.78em; color:#111; background:var(--gold); border-radius:10px; padding:1px 6px; }
#hud-win.win-skills .skills { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:7px; }
#hud-win.win-skills .skill { min-height:48px; padding:6px 9px 6px 6px; }
.skill-text { min-width:0; display:flex; flex-direction:column; gap:2px; }
.skill-text b { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skill-text small { color:#8f9bb0; font-size:.72em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skills-hint { position:sticky; bottom:0; margin:8px 0 0 !important; padding:7px 9px; background:rgba(5,10,18,.88); border-top:1px solid rgba(245,182,66,.2); }

/* menu superior comporta Roleplay sem esmagar os botões */
#hud-menu { gap: calc(var(--u) * 3); }
#hud-menu button { width: calc(var(--u) * 94); }
#hud-menu button::before { width: calc(var(--u) * 94); }
#hud-menu span { font-size: calc(var(--u) * 17.5); }

@media (max-width: 1200px) {
  #hud-menu button { width: calc(var(--u) * 88); }
  #hud-menu button::before { width: calc(var(--u) * 88); }
  #hud-menu span { font-size: calc(var(--u) * 16); }
}


/* ================================================================
   HUD RESPONSIVA v1 — painéis em CSS, sem molduras pesadas
   ================================================================ */
#hud-quests,
#hud-chat {
  box-sizing:border-box;
  border:1px solid rgba(255,166,43,.62) !important;
  border-radius:14px !important;
  border-image:none !important;
  background:
    linear-gradient(180deg,rgba(9,17,31,.86),rgba(3,9,18,.74)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(45,100,165,.18);
  backdrop-filter:blur(8px);
  padding:0 !important;
}
#hud-quests::before,
#hud-quests::after,
.hud-chat-mark { display:none !important; }

#hud-quests .htabs,
#hud-chat .htabs {
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  height:auto !important;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 8px;
  border-bottom:1px solid rgba(255,166,43,.28);
  background:linear-gradient(180deg,rgba(15,27,48,.92),rgba(8,17,31,.82));
  border-radius:13px 13px 0 0;
}
#hud-quests .htabs button,
#hud-chat .htabs button {
  width:auto !important;
  min-width:0 !important;
  height:34px !important;
  padding:0 12px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.035) !important;
  color:#cbd7ea !important;
  font-size:14px !important;
  font-weight:800 !important;
}
#hud-quests .htabs button.on,
#hud-chat .htabs button.on {
  color:#fff !important;
  background:linear-gradient(180deg,#ffb134,#d66d0e) !important;
  box-shadow:0 0 0 1px #ffd174 inset,0 4px 12px rgba(255,127,20,.24);
}
#hud-quests .htabs .collapse,
#hud-chat .htabs .collapse {
  margin-left:auto !important;
  width:28px !important;
  padding:0 !important;
  border:1px solid rgba(255,184,71,.32) !important;
  background:rgba(0,0,0,.22) !important;
}
#hud-quests .hbody {
  position:relative !important;
  inset:auto !important;
  margin:0 !important;
  padding:10px 12px !important;
  height:calc(100% - 48px) !important;
  box-sizing:border-box;
  overflow:auto !important;
}
#hud-chat #output {
  flex:1 1 auto;
  min-height:54px;
  padding:8px 10px !important;
  background:transparent !important;
}
#hud-chat form {
  margin:0 !important;
  padding:7px 8px 8px !important;
  border-top:1px solid rgba(255,166,43,.18);
  background:rgba(2,8,16,.35);
}
#hud-chat form select,
#hud-chat form input {
  min-height:36px;
  border-radius:8px !important;
}
#hud-chat.collapsed,
#hud-quests.collapsed {
  height:54px !important;
  min-height:54px !important;
}
#hud-chat.collapsed form { display:none !important; }

.hud-resize { right:5px; bottom:5px; }
.hud-resize-top {
  top:5px !important;
  bottom:auto !important;
  right:5px;
  cursor:nesw-resize;
}
.hud-resize-top::before {
  top:3px;
  bottom:auto;
  border-bottom:0;
  border-top:2px solid #ffb63e;
}

/* Painéis ficam mais leves por padrão, mas legíveis em hover/focus */
#hud-quests,#hud-chat { opacity:max(.62,var(--hud-alpha)); }
#hud-quests:focus-within,#hud-chat:focus-within { opacity:1; }

/* ================================================================
   TABLET
   ================================================================ */
@media (max-width: 1100px) {
  #hud-player {
    transform:scale(.82);
    transform-origin:top left;
  }
  #hud-menu {
    right:8px;
    gap:2px;
    max-width:68vw;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  #hud-menu::-webkit-scrollbar { display:none; }
  #hud-menu button { flex:0 0 calc(var(--u) * 82); width:calc(var(--u) * 82); }
  #hud-menu button::before { width:calc(var(--u) * 82); }
  #hud-menu span { font-size:calc(var(--u) * 14); }
  #hud-mini { transform:scale(.78); transform-origin:top right; }
  #hud-quests {
    left:12px !important;
    top:170px !important;
    width:min(390px,42vw) !important;
    height:min(360px,44vh) !important;
  }
  #hud-chat {
    left:12px !important;
    bottom:12px !important;
    width:min(430px,48vw) !important;
    height:210px !important;
  }
}

/* ================================================================
   MOBILE — HUD em camadas compactas e janelas tipo bottom-sheet
   ================================================================ */
@media (max-width: 720px) {
  .game { --u:.55px; }
  #hud-player {
    left:6px !important; top:6px !important;
    transform:scale(.58);
    transform-origin:top left;
  }
  #hud-buffs { left:8px !important; top:132px !important; transform:scale(.72); transform-origin:top left; }

  #hud-menu {
    position:absolute !important;
    left:6px !important; right:6px !important;
    top:auto !important; bottom:6px !important;
    max-width:none !important;
    height:68px;
    padding:5px 4px;
    border:1px solid rgba(255,166,43,.38);
    border-radius:14px;
    background:rgba(4,10,19,.72);
    backdrop-filter:blur(8px);
    overflow-x:auto;
    z-index:12;
  }
  #hud-menu button {
    flex:0 0 58px !important;
    width:58px !important;
    height:58px !important;
  }
  #hud-menu button::before { width:44px !important; height:42px !important; }
  #hud-menu span { font-size:10px !important; margin-top:-2px !important; }
  #hud-menu kbd { display:none; }

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

  #hud-quests {
    left:8px !important;
    top:142px !important;
    width:min(92vw,360px) !important;
    height:min(34vh,280px) !important;
    min-width:240px !important;
    max-width:94vw !important;
  }
  #hud-chat {
    left:8px !important;
    bottom:82px !important;
    width:min(94vw,430px) !important;
    height:min(28vh,220px) !important;
    min-width:260px !important;
    max-width:94vw !important;
  }
  #hud-quests .htabs button,#hud-chat .htabs button { font-size:12px !important; padding:0 9px !important; }
  #hud-quests .hbody { padding:8px !important; }
  #hud-chat #output { font-size:12px; }

  #hud-bar {
    bottom:82px !important;
    left:50% !important;
    transform:translateX(-50%) scale(.72);
    transform-origin:bottom center;
  }
  #hud-actions {
    right:5px !important;
    bottom:150px !important;
    transform:scale(.64);
    transform-origin:bottom right;
  }
  #hud-quick {
    left:auto !important;
    right:8px !important;
    bottom:76px !important;
    transform:scale(.9);
  }

  #hud-win {
    left:4vw !important;
    right:4vw !important;
    top:auto !important;
    bottom:78px !important;
    transform:none !important;
    width:92vw !important;
    max-height:72vh !important;
    box-sizing:border-box;
  }
  #hud-win.win-guide .guide-layout { min-height:0; }
  #hud-win.win-guide .guide-race-list { max-height:130px; }
  #hud-win.win-skills .skills { grid-template-columns:1fr !important; }

  .hud-resize { width:30px; height:30px; touch-action:none; }
}


/* câmera / zoom nas opções */
.opt-camera > label { justify-content:space-between; }
.opt-camera > label b { color:var(--gold2); min-width:52px; text-align:right; }
.opt-camera > input[type="range"] { width:100%; accent-color:#f5a21a; cursor:pointer; }
.opt-camera-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#hud #opt-camera-reset {
  padding:4px 10px;
  border-radius:6px;
  border:1px solid rgba(245,182,66,.42);
  background:rgba(0,0,0,.38);
  color:var(--gold2);
  font-weight:bold;
}
#hud #opt-camera-reset:hover { border-color:var(--gold); background:rgba(245,182,66,.12); }

/* Parte 4: dicas de progressão discretas */
#power-tip {
  position: absolute;
  left: 50%;
  bottom: 112px;
  transform: translate(-50%, 12px);
  width: min(520px, calc(100vw - 44px));
  padding: 9px 13px 10px;
  border-radius: 12px;
  border: 1px solid rgba(150,205,255,.28);
  background: linear-gradient(180deg, rgba(10,18,31,.94), rgba(6,11,20,.94));
  box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 18px rgba(95,170,255,.06);
  color: #d9eaff;
  z-index: 46;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  backdrop-filter: blur(6px);
}
#power-tip.show { opacity: .96; transform: translate(-50%, 0); }
#power-tip b { display:block; color:#8fd0ff; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; }
#power-tip p { margin:0; font-size:12px; line-height:1.45; color:#d7e4f2; }
@media (max-width: 720px) {
  #power-tip { bottom: 98px; width: calc(100vw - 28px); }
}

/* Parte 6: resize vertical do chat + menu do jogo */
.hud-resize-vertical {
  position:absolute;
  left:50%;
  top:-3px;
  transform:translateX(-50%);
  width:min(180px,46%);
  height:14px;
  z-index:10;
  cursor:ns-resize;
  pointer-events:auto;
  touch-action:none;
}
.hud-resize-vertical::before {
  content:'';
  position:absolute;
  left:18%;
  right:18%;
  top:5px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffb63e 24%,#ffe0a0 50%,#ffb63e 76%,transparent);
  opacity:.85;
  filter:drop-shadow(0 0 2px #000);
}
#hud-chat:hover .hud-resize-vertical::before,
#hud-chat:focus-within .hud-resize-vertical::before { opacity:1; }

.game-menu-intro {
  margin:2px 0 12px;
  padding:12px 14px;
  border:1px solid rgba(245,182,66,.22);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(245,182,66,.07),rgba(8,15,26,.42));
}
.game-menu-intro h3 { margin:0 0 4px; color:var(--gold2); }
.game-menu-intro p { margin:0; color:#9faabd; font-size:.92em; line-height:1.45; }

.game-menu-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#hud .game-menu-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-height:82px;
  padding:13px 14px;
  text-align:left;
  border:1px solid rgba(120,170,225,.25);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(20,36,58,.88),rgba(7,15,27,.92));
  color:#e8f2ff;
  cursor:pointer;
  box-shadow:inset 0 0 16px rgba(90,160,255,.035);
}
#hud .game-menu-card:hover {
  transform:translateY(-1px);
  border-color:rgba(245,182,66,.55);
  box-shadow:0 5px 16px rgba(0,0,0,.25),inset 0 0 18px rgba(245,182,66,.05);
}
#hud .game-menu-card b { font-size:1.03em; color:#f2f6fb; }
#hud .game-menu-card small { color:#98a8bc; line-height:1.35; }
#hud .game-menu-card.warning { border-color:rgba(255,185,68,.34); }
#hud .game-menu-card.danger { border-color:rgba(255,105,92,.38); }
#hud .game-menu-card.danger:hover { border-color:rgba(255,105,92,.68); }
.game-menu-safe {
  margin:12px 2px 0;
  color:#82d7a8;
  font-size:.88em;
  line-height:1.4;
}
@media (max-width:700px) {
  .game-menu-grid { grid-template-columns:1fr; }
}


/* Parte 7 — canais de tutorial/suporte no chat */
#hud-chat .htabs button[hidden] { display: none !important; }
#hud-chat .htabs button[data-f] {
  flex: 1 1 0;
  min-width: 0 !important;
  padding-left: clamp(5px, .55vw, 11px);
  padding-right: clamp(5px, .55vw, 11px);
  white-space: nowrap;
}
#hud-chat .htabs .collapse { flex: 0 0 30px; }
#output > .tutorial { color: #bfe6ff; }
#output > .support { color: #ffe0a4; }


/* Parte 8 — confirmação dentro do jogo */
#hud-confirm {
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.48);
  padding:20px;
}
#hud-confirm[hidden] { display:none !important; }
.hud-confirm-card {
  position:relative;
  width:min(440px, 88vw);
  padding:28px 30px 24px;
  text-align:center;
  color:#eef3ff;
  background:linear-gradient(180deg, rgba(16,23,38,.97), rgba(7,11,20,.97));
  border:1px solid rgba(245,182,66,.62);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.65), inset 0 0 28px rgba(245,182,66,.05);
}
.hud-confirm-mark { color:#f5b642; font-size:28px; line-height:1; text-shadow:0 0 16px rgba(245,182,66,.7); }
.hud-confirm-card h3 { margin:8px 0 10px; color:#ffd98a; font-size:22px; }
.hud-confirm-card p { margin:0 auto 22px; max-width:360px; color:#d8e0ef; line-height:1.45; }
.hud-confirm-actions { display:flex; justify-content:center; gap:12px; }
#hud .hud-confirm-actions button {
  min-width:125px;
  padding:9px 16px;
  border:1px solid rgba(245,182,66,.48);
  border-radius:9px;
  background:rgba(245,182,66,.10);
  color:#fff;
  font-weight:800;
}
#hud .hud-confirm-actions button:hover { background:rgba(245,182,66,.22); border-color:#f5b642; }
#hud .hud-confirm-actions button.danger { border-color:rgba(255,92,92,.62); background:rgba(150,25,31,.25); color:#ffd8d8; }
#hud .hud-confirm-actions button.danger:hover { background:rgba(190,35,42,.42); }

/* ================================================================
   GUIA DE KI — rastreador de missão estilo fantasia
   ================================================================ */
#quest-guide-spirit{
  position:absolute;
  z-index:18;
  pointer-events:none;
  transform:translate(-50%,-50%);
  display:grid;
  justify-items:center;
  gap:3px;
  min-width:72px;
  transition:left .16s linear,top .16s linear;
}
#quest-guide-spirit[hidden],#quest-world-marker[hidden]{display:none!important}

.qgs-core{
  position:relative;
  width:34px;height:34px;
  display:grid;place-items:center;
  animation:qgsFloat 1.65s ease-in-out infinite;
}
.qgs-trail{
  position:absolute;
  width:32px;height:10px;
  left:-18px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,220,120,.12),rgba(255,215,100,.55),transparent);
  filter:blur(4px);
  opacity:.9;
}
.qgs-glow{
  position:absolute;
  left:50%;top:50%;
  width:10px;height:10px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,229,131,.20);
  filter:blur(5px);
  box-shadow:0 0 10px 5px rgba(255,219,100,.28),0 0 20px 8px rgba(255,160,52,.12);
}
.qgs-arrow{
  position:relative;
  z-index:3;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:14px solid #fff9d0;
  filter:drop-shadow(0 0 4px #ffe48c) drop-shadow(0 0 7px rgba(255,187,62,.8));
  transform-origin:50% 70%;
}
.qgs-particles{position:absolute;inset:-10px;pointer-events:none}
.qgs-particles i{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:#fff1aa;
  box-shadow:0 0 8px rgba(255,209,87,.95);
  animation:qgsSpark 1.7s linear infinite;
}
.qgs-particles i:nth-child(1){left:0;top:7px;animation-delay:0s}
.qgs-particles i:nth-child(2){right:0;top:2px;animation-delay:.35s}
.qgs-particles i:nth-child(3){left:8px;bottom:0;animation-delay:.72s}
.qgs-particles i:nth-child(4){right:7px;bottom:2px;animation-delay:1.08s}

.qgs-label{
  max-width:150px;
  display:grid;
  justify-items:center;
  gap:1px;
  text-align:center;
  opacity:.92;
}
.qgs-label b{
  max-width:150px;
  color:#fff0b8;
  font:900 9px/1.1 'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 1px 3px #000,0 0 7px #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qgs-label span{
  color:#a9e8ff;
  font:800 8px/1.1 'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 1px 3px #000,0 0 6px #000;
}

/* Cores por tipo de objetivo. */
#quest-guide-spirit[data-kind="hunt"] .qgs-glow{
  background:radial-gradient(circle,rgba(204,255,205,.98),rgba(83,240,154,.62) 35%,rgba(30,148,92,.22) 62%,transparent 80%);
  box-shadow:0 0 10px rgba(86,245,162,.66),0 0 21px rgba(45,203,126,.34);
}
#quest-guide-spirit[data-kind="hunt"] .qgs-arrow{filter:drop-shadow(0 0 5px #83ffc0);border-bottom-color:#e1ffea}
#quest-guide-spirit[data-kind="boss"] .qgs-glow{
  background:radial-gradient(circle,rgba(255,215,241,.98),rgba(202,93,255,.66) 35%,rgba(117,35,175,.24) 62%,transparent 80%);
  box-shadow:0 0 11px rgba(255,116,219,.65),0 0 24px rgba(180,69,255,.38);
}
#quest-guide-spirit[data-kind="boss"] .qgs-arrow{border-bottom-color:#ffe0f5;filter:drop-shadow(0 0 6px #ff95e1)}
#quest-guide-spirit[data-kind="turnin"] .qgs-glow{
  background:radial-gradient(circle,rgba(255,250,199,.98),rgba(255,211,87,.68) 34%,rgba(255,151,36,.23) 62%,transparent 80%);
}
#quest-guide-spirit.other-zone .qgs-glow{
  background:radial-gradient(circle,rgba(210,240,255,.98),rgba(100,185,255,.62) 35%,rgba(38,86,180,.20) 62%,transparent 80%);
  box-shadow:0 0 10px rgba(92,187,255,.65),0 0 22px rgba(67,127,255,.34);
}

/* Marcador elegante diretamente em cima do objetivo. */
#quest-world-marker{
  position:absolute;
  left:0;top:0;
  z-index:17;
  display:grid;
  justify-items:center;
  gap:1px;
  pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));
  animation:qwmBob 1.15s ease-in-out infinite;
}
.qwm-core{
  position:relative;
  width:38px;height:38px;
  display:grid;place-items:center;
}
.qwm-core i{
  position:relative;
  z-index:3;
  color:#fff6c4;
  font-style:normal;
  font-size:17px;
  text-shadow:0 0 8px #ffe794,0 0 14px rgba(255,176,48,.7);
}
.qwm-ring{
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1.5px solid rgba(255,219,111,.9);
  box-shadow:0 0 9px rgba(255,198,67,.52),inset 0 0 8px rgba(255,224,123,.22);
  animation:qwmPulse 1.35s ease-in-out infinite;
}
.qwm-ring::after{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid rgba(255,247,190,.4);
}
.qwm-particles{position:absolute;inset:-5px}
.qwm-particles u{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:#fff1ab;
  box-shadow:0 0 8px rgba(255,215,90,.9);
  text-decoration:none;
  animation:qwmSpark 1.65s linear infinite;
}
.qwm-particles u:nth-child(1){left:2px;top:7px}
.qwm-particles u:nth-child(2){right:1px;top:3px;animation-delay:.5s}
.qwm-particles u:nth-child(3){left:12px;bottom:0;animation-delay:1s}
#quest-world-marker>b{
  max-width:170px;
  color:#fff0bd;
  font:900 9px/1.1 'Trebuchet MS','Segoe UI',sans-serif;
  text-shadow:0 1px 3px #000,0 0 7px #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}

/* Marcador muda junto com o tipo do objetivo. */
#quest-world-marker[data-kind="hunt"] .qwm-ring{
  border-color:rgba(110,255,180,.94);
  box-shadow:0 0 11px rgba(74,236,157,.58),inset 0 0 8px rgba(84,245,166,.25);
}
#quest-world-marker[data-kind="hunt"] .qwm-core i{color:#dcffe9;text-shadow:0 0 8px #77ffc0}
#quest-world-marker[data-kind="boss"] .qwm-ring{
  border-color:rgba(255,153,224,.95);
  box-shadow:0 0 13px rgba(205,89,255,.65),inset 0 0 9px rgba(219,112,255,.24);
}
#quest-world-marker[data-kind="boss"] .qwm-core i{color:#ffe1f5;text-shadow:0 0 9px #ff8cdc}
#quest-world-marker[data-kind="turnin"] .qwm-ring{border-color:rgba(255,220,106,.95)}
#quest-world-marker.arrived .qwm-ring{
  border-color:rgba(128,255,190,.98);
  box-shadow:0 0 15px rgba(72,241,161,.72),inset 0 0 9px rgba(85,247,171,.35);
}
#quest-world-marker.arrived .qwm-core i{color:#e0ffed;text-shadow:0 0 10px #6fffb7}

@keyframes qgsFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.06)}}
@keyframes qgsSpark{0%{transform:translate(0,0) scale(.6);opacity:0}18%{opacity:1}100%{transform:translate(7px,-11px) scale(1.2);opacity:0}}
@keyframes qwmBob{0%,100%{margin-top:0}50%{margin-top:-7px}}
@keyframes qwmPulse{0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.12);opacity:1}}
@keyframes qwmSpark{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(6px,-9px) scale(1.15);opacity:0}}

/* Guia v2: sem esfera ao redor da seta; apenas halo luminoso pequeno. */
#quest-guide-spirit[data-kind="hunt"] .qgs-glow{background:rgba(121,255,187,.18);box-shadow:0 0 10px 5px rgba(80,245,166,.27),0 0 20px 8px rgba(44,198,128,.11)}
#quest-guide-spirit[data-kind="boss"] .qgs-glow{background:rgba(255,155,224,.18);box-shadow:0 0 11px 5px rgba(239,112,220,.28),0 0 22px 9px rgba(181,70,255,.12)}
#quest-guide-spirit[data-kind="turnin"] .qgs-glow{background:rgba(255,227,118,.20);box-shadow:0 0 10px 5px rgba(255,211,86,.28),0 0 20px 8px rgba(255,151,36,.11)}
#quest-guide-spirit.other-zone .qgs-glow{background:rgba(144,211,255,.18);box-shadow:0 0 10px 5px rgba(95,190,255,.28),0 0 21px 8px rgba(65,126,255,.11)}


/* ================================================================
   BÚSSOLA DE MISSÃO — seta verde com borda dourada e brilhos orbitais
   ================================================================ */
#quest-mini-arrow.quest-mini-arrow {
  position: absolute;
  z-index: 8;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  margin-left: calc(var(--u) * -19);
  margin-top: calc(var(--u) * -19);
  pointer-events: none;
  opacity: 1;
  transform: rotate(var(--quest-dir, 0deg));
  transform-origin: 50% 50%;
  transition:
    left .10s linear,
    top .10s linear,
    transform .10s linear,
    filter .15s ease,
    opacity .15s ease;
  filter:
    drop-shadow(0 0 calc(var(--u) * 4) rgba(105,255,140,.58))
    drop-shadow(0 0 calc(var(--u) * 8) rgba(255,214,80,.34));
}
#quest-mini-arrow[hidden] { display:none !important; }

#quest-mini-arrow i {
  position:absolute;
  inset:16% 14% 16% 14%;
  display:block;
  background:linear-gradient(90deg,#8dffac 0%,#38f56f 53%,#10c843 100%);
  clip-path:polygon(0 26%,57% 26%,57% 5%,100% 50%,57% 95%,57% 74%,0 74%);
  border-radius:calc(var(--u) * 3);
  animation:quest-mini-pulse 1.05s ease-in-out infinite;
  filter:
    drop-shadow(calc(var(--u) * 1.2) 0 0 #ffe46a)
    drop-shadow(calc(var(--u) * -1.2) 0 0 #ffe46a)
    drop-shadow(0 calc(var(--u) * 1.2) 0 #ffe46a)
    drop-shadow(0 calc(var(--u) * -1.2) 0 #ffe46a)
    drop-shadow(0 0 calc(var(--u) * 4) rgba(255,226,96,.86));
}

#quest-mini-arrow::after {
  content:'';
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:rgba(255,232,112,.18);
  box-shadow:
    0 0 calc(var(--u) * 10) rgba(255,220,90,.62),
    0 0 calc(var(--u) * 15) rgba(87,255,129,.24);
  z-index:-1;
}

#quest-mini-arrow .spark {
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--u) * 5);
  height:calc(var(--u) * 5);
  margin-left:calc(var(--u) * -2.5);
  margin-top:calc(var(--u) * -2.5);
  border-radius:50%;
  background:#fff8c9;
  box-shadow:
    0 0 calc(var(--u) * 3) #fff4a0,
    0 0 calc(var(--u) * 7) rgba(255,225,100,.95);
  opacity:.98;
  pointer-events:none;
}
#quest-mini-arrow .spark::after {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--u) * 1.5);
  height:calc(var(--u) * 8);
  transform:translate(-50%,-50%);
  background:rgba(255,250,205,.9);
  border-radius:99px;
  box-shadow:0 0 calc(var(--u) * 3) rgba(255,240,145,.9);
}
#quest-mini-arrow .spark.s1 {
  animation:quest-mini-orbit 1.55s linear infinite;
}
#quest-mini-arrow .spark.s2 {
  width:calc(var(--u) * 4.5);
  height:calc(var(--u) * 4.5);
  margin-left:calc(var(--u) * -2.25);
  margin-top:calc(var(--u) * -2.25);
  animation:quest-mini-orbit 1.95s linear infinite -.55s;
}
#quest-mini-arrow .spark.s3 {
  width:calc(var(--u) * 4);
  height:calc(var(--u) * 4);
  margin-left:calc(var(--u) * -2);
  margin-top:calc(var(--u) * -2);
  animation:quest-mini-orbit 2.25s linear infinite -1.1s;
}

#quest-mini-arrow.arrived {
  opacity:.92;
  filter:
    drop-shadow(0 0 calc(var(--u) * 5) rgba(120,255,150,.7))
    drop-shadow(0 0 calc(var(--u) * 8) rgba(255,226,106,.42));
}
#quest-mini-arrow.other-zone {
  opacity:1;
}

@keyframes quest-mini-pulse {
  0%,100% { scale:.96; opacity:.96; }
  50% { scale:1.08; opacity:1; }
}
@keyframes quest-mini-orbit {
  0% { transform:rotate(0deg) translateX(calc(var(--u) * 19)) rotate(0deg) scale(.78); }
  50% { transform:rotate(180deg) translateX(calc(var(--u) * 19)) rotate(-180deg) scale(1.02); }
  100% { transform:rotate(360deg) translateX(calc(var(--u) * 19)) rotate(-360deg) scale(.78); }
}



/* ================================================================
   MARCADOR DE OBJETIVO — clean, verde/dourado, um alvo por vez
   ================================================================ */
#quest-objective-marker {
  position:absolute;
  z-index:5;
  width:42px;
  height:42px;
  transform:translate(-50%,-78%);
  pointer-events:none;
  filter:
    drop-shadow(0 0 5px rgba(96,255,132,.62))
    drop-shadow(0 0 9px rgba(255,217,79,.38));
}
#quest-objective-marker[hidden] { display:none !important; }

#quest-objective-marker .qom-diamond {
  position:absolute;
  left:50%;
  top:0;
  width:13px;
  height:13px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#b5ffc7 0%,#39f073 52%,#14b746 100%);
  border:2px solid #ffe36b;
  box-shadow:
    0 0 0 1px rgba(36,30,6,.72),
    0 0 8px rgba(255,224,86,.65),
    0 0 12px rgba(70,255,115,.38);
  animation:qom-float 1.25s ease-in-out infinite;
}

#quest-objective-marker .qom-ring {
  position:absolute;
  left:50%;
  bottom:1px;
  width:28px;
  height:9px;
  transform:translateX(-50%);
  border:2px solid rgba(255,225,88,.9);
  border-radius:50%;
  box-shadow:
    0 0 6px rgba(255,219,72,.48),
    inset 0 0 7px rgba(64,255,116,.34);
  background:rgba(55,220,102,.10);
  animation:qom-ring 1.45s ease-in-out infinite;
}

#quest-objective-marker .qom-spark {
  position:absolute;
  left:50%;
  top:7px;
  width:3px;
  height:3px;
  margin:-1.5px;
  border-radius:50%;
  background:#fff7a8;
  box-shadow:0 0 4px #ffe66e,0 0 7px rgba(78,255,122,.72);
}
#quest-objective-marker .qom-spark.s1 { animation:qom-orbit 1.55s linear infinite; }
#quest-objective-marker .qom-spark.s2 { animation:qom-orbit 1.9s linear infinite -.62s; }
#quest-objective-marker .qom-spark.s3 { animation:qom-orbit 2.2s linear infinite -1.15s; }

#quest-objective-marker[data-kind="boss"] .qom-diamond {
  background:linear-gradient(135deg,#d9ffd6 0%,#59f477 48%,#1fae45 100%);
}
#quest-objective-marker[data-kind="turnin"] .qom-ring {
  border-color:#fff2a0;
}
#quest-objective-marker.is-atom {
  transform:translate(-50%,-102%);
}

@keyframes qom-float {
  0%,100% { translate:0 0; }
  50% { translate:0 -4px; }
}
@keyframes qom-ring {
  0%,100% { scale:.9; opacity:.76; }
  50% { scale:1.08; opacity:1; }
}
@keyframes qom-orbit {
  0% { transform:rotate(0deg) translateX(14px) rotate(0deg); opacity:.75; }
  50% { opacity:1; }
  100% { transform:rotate(360deg) translateX(14px) rotate(-360deg); opacity:.75; }
}