/* Dirigir (Fase 1, 2026-10-27): botão no mapa, tecla F na barra de habilidades, golpe que fecha o COMBO de tipos e o editor do combo — directed-ui.js */
.dir-hud { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; justify-content: center; z-index: 3; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: auto; }
.dir-hud .dir-opt { display: none; }
.dir-hud.on .dir-opt { display: inline-flex; }
/* chave Idle ⇄ Manual (Espaço): a metade acesa é o modo atual */
.dir-switch { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 999px; border: 1px solid var(--x-3a4566); background: color-mix(in srgb, var(--c-bg) 88%, transparent); color: var(--x-9aa0a6);
  font: 700 12px var(--font, Verdana); cursor: pointer; }
.dir-switch > span { padding: 4px 10px; border-radius: 999px; transition: background .15s, color .15s; }
.dir-switch kbd, .dir-help kbd { margin-left: 6px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--x-3a4566); font: 600 12px var(--font, Verdana); color: var(--x-c7cee0); }
.dir-hud:not(.on) .dir-s-idle, .dir-hud.on .dir-s-man { background: var(--gold, var(--type-electric)); color: var(--c-panel); }
.dir-switch.hot { box-shadow: 0 0 0 2px var(--rar-mitico), 0 0 12px color-mix(in srgb, var(--rar-mitico) 70%, transparent); }
.dir-help { flex-basis: 100%; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c-bg) 70%, transparent); color: var(--x-c7cee0);
  font: 600 12px var(--font, Verdana); pointer-events: none; }
.dir-help kbd { margin: 0 3px 0 0; }
.arena-wrap.numbers-on .dir-hud { display: none; }
/* barra de habilidades: tecla embaixo (Dirigir), golpe aceso (fecha o COMBO de tipos), ordem do combo de tecla, próximo da fila */
.skill[data-fk]:not([data-fk=""])::before { content: attr(data-fk); position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 3; font: 700 12px var(--font, Verdana);
  color: var(--type-electric); text-shadow: 0 0 2px var(--x-000000), 0 1px 0 var(--x-000000); pointer-events: none; }
body.dir-on .skill-bar { gap: 14px; }
.skill.dir-lit { box-shadow: 0 0 0 3px var(--type-electric), 0 0 12px color-mix(in srgb, var(--type-electric) 80%, transparent) !important; animation: dir-glow .45s infinite alternate; }
.skill.dir-lit .sk-t::after { content: 'COMBO'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font: 800 12px var(--font, Verdana); color: var(--c-gold-soft);
  background: var(--type-electric); border-radius: 6px; padding: 0 3px; }
.skill.dir-next { outline: 2px dashed var(--c-ink-light); outline-offset: 2px; }
.skill[data-ord]:not([data-ord=""])::after { content: attr(data-ord); }
@keyframes dir-glow { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .skill.dir-lit { animation: none; } }
/* editor do combo de tecla */
.dir-editor { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c-inset) 60%, transparent); }
.dir-editor.hidden { display: none; }
.dir-card { background: var(--panel, var(--c-tier-soft)); color: var(--text, var(--rar-comum)); border: 1px solid var(--line, var(--x-2a3350)); border-radius: 12px; padding: 14px 16px; width: min(640px, calc(100% - 24px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.dir-card h3 { margin: 0 0 6px; } .dir-card .muted { font-size: 12px; }
.dir-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 8px 0; }
.dir-cpick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--line, var(--x-2a3350)); border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-size: var(--fs-min); cursor: pointer; }
.dir-cpick.on { border-color: var(--type-electric); background: color-mix(in srgb, var(--type-electric) 12%, transparent); }
.dir-ord { position: absolute; top: -6px; left: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--type-electric); color: var(--c-gold-soft); font-size: var(--fs-min); line-height: 18px; text-align: center; }
.dir-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
/* fases do boss (Área de Bosses) */
.dir-boss { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--c-bg) 85%, transparent); color: var(--rar-comum); font: 600 12px var(--font, Verdana); text-align: center; pointer-events: none; }
.dir-boss.hidden { display: none; }
.dir-boss.warn { background: color-mix(in srgb, var(--x-5a0e08) 92%, transparent); color: var(--c-text); box-shadow: 0 0 14px color-mix(in srgb, var(--rar-mitico) 60%, transparent); }
/* missões por região (region-quests-ui.js): conversa com o NPC e painel */
.qg-dialog { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 6; /* por cima do registro da cena (.scene-log, z 4) */ width: min(520px, calc(100% - 20px)); padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--c-bg) 98%, transparent); border: 1px solid var(--type-electric); color: var(--rar-comum); font-size: 13px; }
.qg-dialog.hidden, .qg-panel.hidden { display: none; }
.qg-dialog p { margin: 3px 0; } .qg-who { font-weight: 700; color: var(--type-electric); margin-bottom: 4px; }
.qg-btns { display: flex; gap: 6px; margin-top: 8px; } .qg-small { font-size: var(--fs-min); color: var(--x-9aa0a6); }
.qg-panel { position: absolute; left: 10px; top: 10px; z-index: 3; width: 230px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c-bg) 82%, transparent); color: var(--rar-comum); font-size: var(--fs-min); pointer-events: none; }
.qg-h { font-weight: 700; color: var(--type-electric); } .qg-q { margin-top: 3px; } .qg-q.done { opacity: .6; }
.arena-wrap.numbers-on .qg-panel, .arena-wrap.numbers-on .qg-dialog { display: none; }
.dir-hud .dir-ckey { margin-left: 4px; }
/* Liga Pokémon: seguir para o próximo da sequência (app.js → leagueNextButton) */
.league-next { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 22px; border-radius: 12px; border: 2px solid var(--x-a85f08); background: linear-gradient(var(--c-warn), var(--type-fire)); color: var(--c-panel); font: 800 16px var(--display, Verdana); cursor: pointer;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--x-000000) 45%, transparent); }
.league-next small { font: 600 12px var(--font, Verdana); } .league-next:hover { filter: brightness(1.1); }
/* seta do NPC fora da tela (region-quests-ui.js → paintArrow, 2026-11-03): presa na borda do mapa, gira para o lado dele; clicar abre a conversa */
.qg-npcarrow { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; translate: -50% -50%; padding: 4px 10px 4px 6px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--c-bg) 86%, transparent); color: var(--c-gold-2); border: 1px solid var(--c-gold); box-shadow: 0 0 0 1px var(--c-bg), 0 0 12px var(--c-glow);
  font: 600 12.5px/1 var(--font-ui); white-space: nowrap; animation: qg-npcarrow-pulse 1.4s ease-in-out infinite; }
.qg-npcarrow.hidden { display: none; }
.qg-npcarrow:hover { background: var(--c-panel-2); }
.qg-npcarrow-tip { width: 0; height: 0; border-left: 16px solid var(--c-gold); border-top: 10px solid transparent; border-bottom: 10px solid transparent; rotate: var(--rot, 0rad); filter: drop-shadow(0 0 3px var(--c-glow)); }
@keyframes qg-npcarrow-pulse { 50% { box-shadow: 0 0 0 1px var(--c-bg), 0 0 20px var(--c-glow); } }
@media (prefers-reduced-motion: reduce) { .qg-npcarrow { animation: none; } }