/* Painel da unit no /game (P-083, design aprovado "M09 — painel da unit e seleção":
 * M09Panel, M09Spec, M09Mobile; P-090, "M10 — carga, ordens e template": M10Panel,
 * M10Mobile). Janela de 264 px no canto de cima à direita, no lugar onde a prancheta
 * abre; barra de 44 px; botões em lista de 40 px na ordem da regra; o corpo rola a 16 px
 * da base. No celular (≤ 860 px), folha na base com os botões de 54 px em 6 colunas. A
 * recusa, o quadro da ordem e os containers: unit-panel-cargo.css. */
.up {
  position: fixed; z-index: 3; top: 16px; right: 16px; width: 264px; box-sizing: border-box;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;   /* o corpo rola (P-090) */
  border-radius: 16px; overflow: hidden; color: #E8EEFF;
  background: linear-gradient(160deg, rgba(130, 160, 255, 0.10), rgba(130, 160, 255, 0.03)), #0F1630;
  border: 1px solid rgba(150, 185, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.45);
}
.up[hidden] { display: none; }
.up::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 242, 224, 0.55), rgba(183, 156, 255, 0.45), transparent);
}
.up-bar {
  flex: none; height: 44px; box-sizing: border-box; padding: 0 6px 0 14px; display: flex; align-items: center;
  gap: 9px; border-bottom: 1px solid rgba(150, 185, 255, 0.12);
}
.up-glyph { flex: none; color: #6CF2E0; }
.up-glyph[hidden] { display: none; }
.up-title {
  flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-x {
  flex: none; width: 32px; height: 32px; padding: 0; display: flex; align-items: center;
  justify-content: center; border: 0; border-radius: 9px; cursor: pointer; color: #93A3C8; background: transparent;
}
.up-x:hover { color: #E8EEFF; background: rgba(130, 160, 255, 0.14); }
.up-body { min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.up-empty { margin: 0; font-size: 13.5px; line-height: 18px; color: #93A3C8; }
.up-empty[hidden] { display: none; }
.up-list { display: flex; flex-direction: column; gap: 6px; }
.up-list:empty { display: none; }
.up-btn {
  position: relative; height: 40px; box-sizing: border-box; padding: 0 12px; display: flex;
  align-items: center; gap: 10px; border: 0; border-radius: 10px; font-family: inherit; cursor: pointer;
  text-align: left; color: #E8EEFF; background: rgba(130, 160, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(150, 185, 255, 0.30);
}
.up-btn svg { flex: none; }
.up-btn span { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 18px; }
.up-btn:hover { background: rgba(130, 160, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(150, 185, 255, 0.45); }
/* Mover armado (a mira): plasma com o traço embaixo, o ativo da prancheta. */
.up-btn[aria-pressed="true"] {
  background: rgba(108, 242, 224, 0.12);
  box-shadow: inset 0 0 0 1px rgba(108, 242, 224, 0.50), inset 0 -2px 0 #6CF2E0;
}
.up-btn[aria-pressed="true"] span { font-weight: 650; }
.up-btn:active { transform: translateY(1px); background: rgba(130, 160, 255, 0.24); }
.up-btn[aria-pressed="true"]:active { background: rgba(108, 242, 224, 0.22); }
.up-btn:focus-visible, .up-x:focus-visible { outline: 2px solid #6CF2E0; outline-offset: 2px; }
/* Shortkeys (item 5, P-085): a etiqueta mono à direita; armado, em plasma; tecla presa
 * (.down), o botão afunda (1 px, fundo .24 ou plasma .22, sombra interna) e a etiqueta acende. */
.up-btn.has-key { padding-right: 8px; }
.up-key {
  flex: none; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 5px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(150, 185, 255, 0.28);
  font: 500 11px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; color: #93A3C8; background: transparent;
}
.up-btn[aria-pressed="true"] .up-key { color: #6CF2E0; border-color: rgba(108, 242, 224, 0.55); }
.up-btn.down {
  transform: translateY(1px); background: rgba(130, 160, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(150, 185, 255, 0.30), inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
.up-btn.down[aria-pressed="true"] {
  background: rgba(108, 242, 224, 0.22);
  box-shadow: inset 0 0 0 1px rgba(108, 242, 224, 0.50), inset 0 -2px 0 #6CF2E0, inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
.up-btn.down .up-key { color: #070B1A; background: #E8EEFF; border-color: #E8EEFF; }
.up-hint { display: flex; flex-direction: column; gap: 3px; }
.up-hint[hidden], .up-orig[hidden] { display: none; }
.up-hint-l { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 17px; color: #C4CFEA; }
/* Aviso local da mira de unit (M10Aim): violeta no lugar do pedido; nada foi mandado. */
.up-hint.warn .up-hint-l { color: #D9CCFF; }
.up-hint.warn .up-dot { background: #B79CFF; box-shadow: 0 0 0 3px rgba(183, 156, 255, 0.2); }
.up-orig { margin: 0 0 0 16px; font-size: 12.5px; line-height: 16px; color: #93A3C8; }
.up-orig b { font-weight: 600; color: #C4CFEA; }
.up-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6CF2E0; box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.18); }
.up-hint-t { flex: 1; min-width: 0; }
.up-mob { display: none; }
.up-esc {
  font: 11.5px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color: #93A3C8; white-space: nowrap;
}
/* Cursor sobre o mapa (item 1): a mão sobre uma unit sem mira; a cruz no resto (game.css). */
#view.unit-hover:not([inert]):not(.panning) { cursor: pointer; }

@media (max-width: 860px) {
  .up {
    top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; border-radius: 18px;
    background: #0F1630; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  }
  .up-bar { height: 52px; padding: 0 4px 0 14px; }
  .up-title { font-size: 16px; }
  .up-x { width: 44px; height: 44px; }
  .up-body { padding: 12px 12px 14px; }
  /* M10Mobile: 6 colunas; as três de carga em terços na 1ª fileira, Mover e Editar em metades */
  .up { max-height: calc(100vh - 24px); }
  .up-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .up-btn {
    height: 54px; padding: 0 4px; grid-column: span 3; flex-direction: column;
    justify-content: center; gap: 3px;
  }
  .up-btn[data-id="2"], .up-btn[data-id="3"], .up-btn[data-id="4"] { grid-column: span 2; order: -1; }
  .up-list.solo .up-btn { grid-column: 1 / -1; }
  /* M11Mobile quadro 6: com Construir e Desmontar, três por fileira e o Editar na largura toda */
  .up-list.build .up-btn { grid-column: span 2; }
  .up-list.build .up-btn[data-id="5"], .up-list.build .up-btn[data-id="6"] { order: -1; }
  .up-list.build .up-btn[data-id="128"] { grid-column: 1 / -1; }
  .up-btn span { flex: none; font-size: 12.5px; line-height: 16px; white-space: nowrap; }
  .up-desk, .up-esc, .up-key { display: none; }
  .up-btn.has-key { padding-right: 4px; }
  .up-mob { display: inline; }
}