/* Destruitor Idle — modos de jogo (modos.js): o indicador da caçada, o painel, o recado do meio, a mira da runa, as
   teclas nos slots e o seletor da ficha da caçada */

/* ---- indicador "Manual / Semi (auto em 12 s) / Idle": logo acima da barra de baixo da caçada, na ponta esquerda (no
   celular, no canto de cima do mapa) ---- */
.g .md-pill {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 1;
  display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: #0d1019e6; border: 1px solid #2a3044; color: #e9e4d6; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 4px 14px #0007; cursor: pointer;
}
.g .md-pill:hover { border-color: var(--gold, #d9b25a); }
.g .md-pill .md-rot { color: var(--dim, #9aa1b2); text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.g .md-pill .md-lin { display: flex; align-items: center; gap: 6px; }
.g .md-pill .md-segue { font-weight: 600; color: #9fd28f; font-size: 11px; }
.md-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #6b7388; }
.md-dot.mao { background: #ffcc4d; box-shadow: 0 0 6px #ffcc4d; }
.md-dot.auto { background: #4fb3ff; box-shadow: 0 0 6px #4fb3ff; animation: md-pisca 1.4s ease-in-out infinite; }
.md-dot.idle { background: #3ccf6a; box-shadow: 0 0 6px #3ccf6a; }
@keyframes md-pisca { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .md-dot.auto { animation: none; } }

/* ---- painel: os tres modos, as opcoes e as teclas ---- */
.g .md-p {
  position: absolute; top: 54px; left: 10px; z-index: 9; width: min(360px, calc(100vw - 20px));
  max-height: calc(100vh - 260px); overflow: auto;
  padding: 10px 12px 12px; border-radius: 8px; background: #10131df5; border: 1px solid #2c3346; box-shadow: 0 8px 24px #0009;
  font-size: 13px; color: #e9e4d6;
}
.md-p-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.g .md-x { width: 26px; height: 26px; border-radius: 5px; color: var(--dim, #9aa1b2); }
.g .md-x:hover { color: #fff; background: #1b2030; }
.md-ops { display: grid; gap: 6px; }
.g .md-op {
  display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 6px;
  background: #0a0c13; border: 1px solid #2a3044; color: inherit;
}
.g .md-op small { color: var(--dim, #9aa1b2); font-size: 11.5px; line-height: 1.3; }
.g .md-op.on { border-color: var(--gold, #d9b25a); background: #1a1708; }
.g .md-op:hover { border-color: #5b6480; }
.md-chk { display: flex; gap: 8px; align-items: flex-start; margin-top: 9px; font-size: 12.5px; line-height: 1.35; cursor: pointer; }
.md-chk input { margin-top: 2px; }
.md-teclas { display: grid; gap: 4px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #262c3d; font-size: 12px; color: #cfd3dd; }
.md-teclas kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 3px; text-align: center;
  background: #1b2030; border: 1px solid #39415a; border-bottom-width: 2px; font: 700 10.5px/16px Verdana, sans-serif; color: #fff;
}

/* ---- recado do servidor (sem mana, fora de alcance, exausto...) e da mira ---- */
.g .md-msg {
  position: absolute; top: 140px; left: 50%; transform: translateX(-50%); z-index: 9; pointer-events: none;
  padding: 6px 14px; border-radius: 6px; background: #0a0c14d9; border: 1px solid #3a2a2a;
  color: #fff4c2; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px #000; max-width: calc(100% - 20px); text-align: center;
}
.g .md-msg[hidden] { display: none; }

/* ---- runa de area esperando a mira ---- */
#gvWrap.md-mira, #gvWrap.md-mira canvas { cursor: crosshair; }

/* ---- teclas nos slots da barra (so no manual/semi) ---- */
.g.modo-mao #gActions .as::before, .g.modo-mao #gPocoes .as.pot::before {
  position: absolute; top: 0; left: 1px; z-index: 4; pointer-events: none;
  font: 800 8px/10px Verdana, Tahoma, sans-serif; color: #ffe08a; text-shadow: 0 0 2px #000, 0 1px 1px #000;
}
.g.modo-mao #gActions .as:nth-child(1)::before { content: 'F1'; }
.g.modo-mao #gActions .as:nth-child(2)::before { content: 'F2'; }
.g.modo-mao #gActions .as:nth-child(3)::before { content: 'F3'; }
.g.modo-mao #gActions .as:nth-child(4)::before { content: 'F4'; }
.g.modo-mao #gActions .as:nth-child(5)::before { content: 'F5'; }
.g.modo-mao #gActions .as:nth-child(6)::before { content: 'F6'; }
.g.modo-mao #gActions .as:nth-child(7)::before { content: 'F7'; }
.g.modo-mao #gActions .as:nth-child(8)::before { content: 'F8'; }
.g.modo-mao #gActions .as:nth-child(9)::before { content: 'F9'; }
.g.modo-mao #gActions .as:nth-child(10)::before { content: 'F10'; }
.g.modo-mao #gActions .as:nth-child(11)::before { content: 'F11'; }
.g.modo-mao #gActions .as:nth-child(12)::before { content: 'F12'; }
.g.modo-mao #gActions .as:nth-child(13)::before { content: '⇧F1'; }
.g.modo-mao #gActions .as:nth-child(14)::before { content: '⇧F2'; }
.g.modo-mao #gActions .as:nth-child(15)::before { content: '⇧F3'; }
.g.modo-mao #gActions .as:nth-child(16)::before { content: '⇧F4'; }
.g.modo-mao #gActions .as:nth-child(17)::before { content: '⇧F5'; }
.g.modo-mao #gActions .as:nth-child(18)::before { content: '⇧F6'; }
.g.modo-mao #gActions .as:nth-child(19)::before { content: '⇧F7'; }
.g.modo-mao #gActions .as:nth-child(20)::before { content: '⇧F8'; }
.g.modo-mao #gPocoes .as.pot-hp::before { content: '1'; }
.g.modo-mao #gPocoes .as.pot-mp::before { content: '2'; }
/* no celular nao ha F1: o slot ja e o botao */
@media (pointer: coarse) { .g.modo-mao #gActions .as::before, .g.modo-mao #gPocoes .as.pot::before { display: none; } }

/* ---- seletor na ficha da caçada ---- */
.md-sel { margin: 4px 0 12px; }
.md-sel h4 { margin: 0 0 6px; }
.md-sel .md-seg { display: flex; flex-wrap: wrap; }
.md-sel p { margin: 6px 0 0; }

@media (max-width: 760px) {
  /* a barra de baixo ocupa a largura toda: o botao sobe para o canto do mapa */
  .g .md-pill { position: fixed; top: 54px; bottom: auto; left: 8px; z-index: 7; gap: 6px; padding: 4px 9px; font-size: 12px; }
  .g .md-pill .md-rot { display: none; }
  .g .md-p { max-height: calc(100vh - 280px); }
  .g .md-msg { top: 128px; }
}