/* =====================================================================
   hud-pro.css — acabamento da HUD de jogo (carregado depois de hud-v2.css).
   Um sistema só: uma fonte (Inter), uma superfície, uma borda, uma cor de
   destaque e ícones de traço. Só aparência: ids, classes e estados são os
   mesmos da hud-v2.js.
   ===================================================================== */
#ninja-hud-v2, #screen-game #panel-hunt {
  --pro-surface: rgba(12, 15, 20, .88);
  --pro-surface-2: rgba(17, 21, 28, .96);
  --pro-raised: rgba(255, 255, 255, .035);
  --pro-line: rgba(255, 255, 255, .08);
  --pro-line-2: rgba(255, 255, 255, .15);
  --pro-text: #ebe8e1;
  --pro-muted: #959ea8;
  --pro-faint: #6b7480;
  --pro-accent: #e4a64c;
  --pro-accent-soft: rgba(228, 166, 76, .14);
  --pro-hp: #d64545;
  --pro-mana: #3f8fe0;
  --pro-xp: #e4a64c;
  --pro-ok: #6fcf8e;
  --pro-radius: 8px;
  --pro-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
#ninja-hud-v2 { color: var(--pro-text); text-shadow: none; font-family: Inter, system-ui, sans-serif; font-feature-settings: "tnum" 1; }
#ninja-hud-v2 button:focus-visible { outline: 2px solid var(--pro-accent); outline-offset: 2px; }
#ninja-hud-v2 .ni-svg { width: 20px; height: 20px; display: block; flex: none; }

/* ---------------------------------------------------------- barra do topo */
#ninja-hud-v2 .ni-topbar { inset: 12px 16px auto; }
#ninja-hud-v2 .ni-identity {
  min-height: 44px; padding: 6px 14px 6px 6px; gap: 10px; border-radius: var(--pro-radius);
  background: var(--pro-surface); border: 1px solid var(--pro-line); box-shadow: var(--pro-shadow); backdrop-filter: blur(6px);
}
#ninja-hud-v2 .ni-symbol {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; font-size: 17px; font-weight: 800;
  color: var(--pro-accent); background: var(--pro-accent-soft); border: 1px solid rgba(228, 166, 76, .3);
}
#ninja-hud-v2 .ni-identity-copy strong { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--pro-text); }
#ninja-hud-v2 .ni-identity-copy strong span { color: var(--pro-accent); }
#ninja-hud-v2 .ni-identity-copy small { font-size: 11px; color: var(--pro-muted); letter-spacing: 0; }

#ninja-hud-v2 .ni-icons {
  gap: 2px; padding: 4px; border-radius: 10px; background: var(--pro-surface);
  border: 1px solid var(--pro-line); box-shadow: var(--pro-shadow); backdrop-filter: blur(6px);
}
#ninja-hud-v2 .ni-icon {
  flex: 0 0 72px; height: 50px; gap: 4px; padding: 6px 4px 5px; border: 0; border-radius: 6px;
  color: var(--pro-muted); background: transparent; position: relative; transition: background .12s, color .12s;
}
#ninja-hud-v2 .ni-icon span { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
#ninja-hud-v2 .ni-icon:hover { background: var(--pro-raised); color: var(--pro-text); border: 0; }
#ninja-hud-v2 .ni-icon.selected { background: var(--pro-accent-soft); color: var(--pro-accent); border: 0; }
#ninja-hud-v2 .ni-icon.selected::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--pro-accent);
}

#ninja-hud-v2 .ni-quick-actions {
  gap: 2px; padding: 4px; border-radius: 10px; background: var(--pro-surface);
  border: 1px solid var(--pro-line); box-shadow: var(--pro-shadow); backdrop-filter: blur(6px);
}
#ninja-hud-v2 .ni-quick {
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--pro-muted); font-size: 0;
}
#ninja-hud-v2 .ni-quick .ni-svg { width: 18px; height: 18px; }
#ninja-hud-v2 .ni-quick:hover { background: var(--pro-raised); color: var(--pro-text); }
#ninja-hud-v2 .ni-quick[aria-pressed="true"] { color: var(--pro-accent); background: var(--pro-accent-soft); }
#ninja-hud-v2 .ni-quick[data-ni-action="exit"]:hover { color: #f08080; background: rgba(214, 69, 69, .12); }
#ninja-hud-v2 .ni-all-menu { width: auto; padding: 0 10px; display: flex; align-items: center; gap: 6px; }
#ninja-hud-v2 .ni-all-menu small { font-size: 11px; font-weight: 600; color: inherit; letter-spacing: .01em; }

/* Menu completo */
#ninja-hud-v2 .ni-menu-drawer {
  background: var(--pro-surface-2); border: 1px solid var(--pro-line); border-radius: 10px; box-shadow: var(--pro-shadow);
}
#ninja-hud-v2 .ni-menu-drawer-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--pro-muted); }
#ninja-hud-v2 .ni-menu-drawer-title span { color: var(--pro-faint); font-weight: 500; letter-spacing: 0; }
#ninja-hud-v2 .ni-menu-entry {
  display: flex; align-items: center; gap: 10px; border-radius: 6px; border: 1px solid var(--pro-line);
  background: var(--pro-raised); color: var(--pro-text); font-size: 12px; font-weight: 600; text-align: left;
}
#ninja-hud-v2 .ni-menu-entry .ni-svg { color: var(--pro-accent); }
#ninja-hud-v2 .ni-menu-entry:hover { border-color: var(--pro-line-2); background: rgba(255, 255, 255, .06); }

/* --------------------------------------------------------- monitor de caça */
#ninja-hud-v2 .ni-counter {
  top: 76px; width: 268px; padding: 12px; border-radius: 10px; background: var(--pro-surface);
  border: 1px solid var(--pro-line); box-shadow: var(--pro-shadow); backdrop-filter: blur(6px);
}
#ninja-hud-v2 .ni-counter-symbol {
  width: 32px; height: 32px; border-radius: 6px; background: var(--pro-accent-soft);
  border: 1px solid rgba(228, 166, 76, .3); color: var(--pro-accent);
}
#ninja-hud-v2 .ni-counter-head small { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--pro-faint); }
#ninja-hud-v2 .ni-counter-head strong { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--pro-text); }
#ninja-hud-v2 .ni-live {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 7px; border-radius: 4px;
  color: var(--pro-muted); background: var(--pro-raised); border: 1px solid var(--pro-line);
}
#ninja-hud-v2 .ni-live.is-running { color: var(--pro-ok); background: rgba(111, 207, 142, .1); border-color: rgba(111, 207, 142, .3); }
#ninja-hud-v2 .ni-counter-toggle {
  width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1px solid var(--pro-line); color: var(--pro-muted);
}
#ninja-hud-v2 .ni-counter-toggle:hover { color: var(--pro-text); border-color: var(--pro-line-2); }
#ninja-hud-v2 .ni-session { color: var(--pro-muted); font-size: 11.5px; }
#ninja-hud-v2 .ni-counter-main { background: var(--pro-raised); border: 1px solid var(--pro-line); border-radius: 6px; }
#ninja-hud-v2 .ni-counter-main > small { color: var(--pro-faint); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
#ninja-hud-v2 .ni-counter-main strong { color: var(--pro-text); font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
#ninja-hud-v2 .ni-counter-main span { color: var(--pro-muted); }
#ninja-hud-v2 .ni-counter-quickstats small,
#ninja-hud-v2 .ni-counter-grid span { color: var(--pro-faint); font-size: 10px; font-weight: 600; }
#ninja-hud-v2 .ni-counter-quickstats b,
#ninja-hud-v2 .ni-counter-grid strong { color: var(--pro-text); font-weight: 700; }
#ninja-hud-v2 .ni-counter-grid > div { background: var(--pro-raised); border: 1px solid var(--pro-line); border-radius: 6px; }
#ninja-hud-v2 .ni-mastery-title { color: var(--pro-muted); }
#ninja-hud-v2 .ni-mastery-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); border: 0; }
#ninja-hud-v2 .ni-mastery-track > div { background: var(--pro-accent); border-radius: 2px; }
#ninja-hud-v2 .ni-mastery small, #ninja-hud-v2 .ni-eta { color: var(--pro-faint); }
#ninja-hud-v2 .ni-counter-details-btn { color: var(--pro-muted); background: transparent; border: 0; font-weight: 600; }
#ninja-hud-v2 .ni-counter-details-btn:hover { color: var(--pro-text); }
#ninja-hud-v2 .ni-loot-head { color: var(--pro-faint); }
#ninja-hud-v2 .ni-drop { background: var(--pro-raised); border: 1px solid var(--pro-line); }
#ninja-hud-v2 .ni-hunt-commands button {
  border-radius: 6px; padding: 8px 10px; font-size: 12px; font-weight: 600;
  background: var(--pro-raised); border: 1px solid var(--pro-line-2); color: var(--pro-text);
}
#ninja-hud-v2 .ni-hunt-commands button:hover { background: rgba(255, 255, 255, .07); }
#ninja-hud-v2 .ni-hunt-commands .ni-start-hunt { background: var(--pro-accent-soft); border-color: rgba(228, 166, 76, .45); color: #f2c27c; gap: 7px; }
#ninja-hud-v2 .ni-hunt-commands .ni-start-hunt .ni-svg { width: 16px; height: 16px; }
#ninja-hud-v2 .ni-hunt-commands .ni-stop-hunt { background: rgba(214, 69, 69, .12) !important; border-color: rgba(214, 69, 69, .45) !important; color: #f29a9a; }

/* ------------------------------------------------ ficha do ninja (canto) */
#ninja-hud-v2 .ni-status {
  left: 16px; bottom: 16px; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 10px;
  background: var(--pro-surface); border: 1px solid var(--pro-line); box-shadow: var(--pro-shadow); backdrop-filter: blur(6px);
}
#ninja-hud-v2 .ni-status-avatar {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 8px;
  font-size: 20px; font-weight: 800; color: var(--pro-accent); background: var(--pro-accent-soft); border: 1px solid rgba(228, 166, 76, .3);
}
#ninja-hud-v2 .ni-status-identity { width: 128px; }
#ninja-hud-v2 .ni-status-identity strong { font-size: 13.5px; font-weight: 700; }
#ninja-hud-v2 .ni-status-identity small { font-size: 11px; color: var(--pro-muted); margin-top: 3px; }
#ninja-hud-v2 .ni-status-bars { width: 250px; gap: 6px; }
#ninja-hud-v2 .ni-bar-line label { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; color: var(--pro-faint); margin-bottom: 3px; }
#ninja-hud-v2 .ni-bar-line label b { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--pro-text); }
#ninja-hud-v2 .ni-bar-line label small { color: var(--pro-faint); font-weight: 500; letter-spacing: 0; }
#ninja-hud-v2 .ni-bar { height: 8px; border-radius: 3px; background: rgba(0, 0, 0, .55); border: 1px solid var(--pro-line); }
#ninja-hud-v2 .ni-bar > div { border-radius: 2px; box-shadow: none; }
#ninja-hud-v2 .ni-bar-hp { background: linear-gradient(180deg, #e25b5b, #b83636) !important; }
#ninja-hud-v2 .ni-bar-mana { background: linear-gradient(180deg, #5aa2ea, #2f70c2) !important; }
#ninja-hud-v2 .ni-bar-exp { background: linear-gradient(180deg, #efb760, #c78a2e) !important; }
#ninja-hud-v2 .ni-exp-line .ni-bar { height: 5px; }

/* --------------------------------------------------------- avisos e fechar */
#ninja-hud-v2 .ni-notice {
  background: var(--pro-surface-2); color: var(--pro-text); border: 1px solid var(--pro-line-2);
  border-left: 3px solid var(--pro-accent); border-radius: 6px; box-shadow: var(--pro-shadow); font-weight: 600; font-size: 13px;
}
#ninja-hud-v2 .ni-close-panel {
  width: 30px; height: 30px; border-radius: 6px; font-size: 18px; line-height: 1;
  background: var(--pro-surface-2); border: 1px solid var(--pro-line-2); color: var(--pro-muted);
}
#ninja-hud-v2 .ni-close-panel:hover { color: var(--pro-text); }

/* ------------------------------------------------------- barra de jutsus */
#screen-game #panel-hunt .jutsu-bar {
  counter-reset: slot; gap: 6px; padding: 6px; border-radius: 10px; background: var(--pro-surface);
  border: 1px solid var(--pro-line); box-shadow: var(--pro-shadow); backdrop-filter: blur(6px);
}
#screen-game #panel-hunt .jutsu-bar .jutsu-cd { width: 46px; max-width: 46px; position: relative; counter-increment: slot; }
#screen-game #panel-hunt .jutsu-bar .jutsu-cd .ic {
  width: 46px; height: 46px; border-radius: 6px; background: #0a0d11; border: 1px solid var(--pro-line-2);
}
#screen-game #panel-hunt .jutsu-bar .jutsu-cd::before {
  content: counter(slot); position: absolute; z-index: 2; top: 3px; left: 5px; font: 700 9.5px Inter, sans-serif;
  color: rgba(255, 255, 255, .7); text-shadow: 0 1px 2px #000;
}
#screen-game #panel-hunt .jutsu-bar .jutsu-cd:first-child::before { content: "♥"; color: #f08a8a; }
#screen-game #panel-hunt .jutsu-bar .jutsu-cd .ov { background: rgba(0, 0, 0, .62); }
#screen-game #panel-hunt .jutsu-bar .jutsu-cd.active .ic { border-color: var(--pro-accent); box-shadow: 0 0 0 1px var(--pro-accent); }
#screen-game #panel-hunt .jutsu-bar small { display: none; }

/* Coordenadas de depuração ficam só no modo ?debug. */
#screen-game #panel-hunt .mapview-hud { display: none; }
body.ni-debug #screen-game #panel-hunt .mapview-hud { display: block; }

/* ------------------------------------------------- painéis sobre o mundo */
#screen-game .main > .panel:not(#panel-hunt).active {
  background: var(--pro-surface-2, rgba(17, 21, 28, .96)); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
}
#screen-game .main > .panel:not(#panel-hunt).active .panel-title { font-family: Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; }
#screen-game .main > .panel:not(#panel-hunt).active .card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; }

@media (max-width: 880px) {
  #ninja-hud-v2 .ni-icon { flex-basis: 60px; }
  #ninja-hud-v2 .ni-counter { top: 74px; }
}
@media (max-width: 600px) {
  #ninja-hud-v2 .ni-icon { flex-basis: 52px; height: 46px; }
  #ninja-hud-v2 .ni-icon span { font-size: 9.5px; }
  #ninja-hud-v2 .ni-quick { width: 32px; height: 32px; }
  #ninja-hud-v2 .ni-all-menu small { display: none; }
  #ninja-hud-v2 .ni-status { left: 8px; bottom: 8px; }
}
#ninja-hud-v2 .ni-counter-head small { white-space: nowrap; letter-spacing: .08em; }
#ninja-hud-v2 .ni-counter-heading { min-width: 0; flex: 1; }
#ninja-hud-v2 .ni-all-menu { flex-direction: row; height: 36px; }
#ninja-hud-v2 .ni-hunt-commands { flex-wrap: wrap; }
#ninja-hud-v2 .ni-hunt-commands button { white-space: nowrap; }
#ninja-hud-v2 .ni-hunt-commands .ni-back-hunt { background: var(--pro-raised); border-color: var(--pro-line-2); color: var(--pro-text); }
#ninja-hud-v2 .ni-hunt-party { background: rgba(111, 207, 142, .08); border: 1px solid rgba(111, 207, 142, .25); color: #a9dcb9; border-radius: 6px; }
#ninja-hud-v2 .ni-counter-head small { overflow: hidden; text-overflow: ellipsis; }
#ninja-hud-v2 .ni-live { flex: none; }