/* ============================================================================
   MODO CONTROLE (proto-gamepad) — folha de estilo do modo.

   Saiu de `proto-gamepad.js` em 2026-08-07 (era uma template string de 533
   linhas injetada por `_injectStyles`, 17,4% do arquivo). CSS é CSS: mora num
   .css carregado pelo index.html, sem build step, sem passo de JS.

   Escopo: tudo aqui só pinta sob `body.proto-gamepad` ou nas classes `.pg-*`,
   que só existem quando o modo monta. Inerte no modo clássico (?classic=1).
   ============================================================================ */

body.proto-gamepad #topbar,
body.proto-gamepad .dock-area,
body.proto-gamepad .dock-divider,
body.proto-gamepad .dock-collapsed-strip,
body.proto-gamepad .mode-indicator-root,
body.proto-gamepad .cam-hud,
body.proto-gamepad .cam-badge,
body.proto-gamepad .cam-help,
body.proto-gamepad .laser-chip,
body.proto-gamepad .laser-conv-btn,
body.proto-gamepad #hud-stats,
body.proto-gamepad #hud-selection,
body.proto-gamepad .fly-hint,
body.proto-gamepad [id*="pingback"],
body.proto-gamepad [class*="pingback"] { display: none !important; }
/* MODO OBJETO: esconde chrome do editor legado (cadeado + tooltip) */
body.pg-hide-editor-chrome .lock-overlay,
body.pg-hide-editor-chrome .tooltip-custom,
body.pg-hide-editor-chrome .contextual-gizmo-hint { display: none !important; }
body.proto-gamepad #viewport-wrap { position: fixed; inset: 0; z-index: 5; }
body.proto-gamepad #viewport, body.proto-gamepad #viewport canvas {
  width: 100% !important; height: 100% !important;
}
/* A POSIÇÃO da pilha de mensagens no modo CONTROLE mora em index.html
   (bloco html.pg-boot), dono único desde 2026-08-07. Ela vivia nos DOIS
   lugares com a mesma regra; a cópia daqui morreu. index.html ganhou porque
   `pg-boot` entra antes do primeiro paint (o `body.proto-gamepad` só entra
   quando o main.js resolve o import) e porque a regra é a EXCEÇÃO à lista de
   display:none que vive ali ao lado — separar as duas era o que produzia a
   regressão de 2026-08-05, quando o toast ficou invisível com ~85 sítios
   emitindo pra ele, inclusive o erro de armazenamento cheio.
   Aqui fica só a tipografia do toast no modo (leitura de sofá). */body.proto-gamepad .toast { font-size: 14px; line-height: 1.35; }
.pg-state {
  /* posicao e profundidade sao da ZONA (BOTTOM_LEFT, ordem 0 — o chao do
     canto). Ate 2026-08-07 eram left/bottom/z escolhidos aqui, e o
     `status-corner` calculava o proprio `bottom: 36px` a partir da ALTURA
     PRESUMIDA deste elemento: quando esta tipografia mudou de 11 para 13px
     (nota abaixo), o numero magico da zona vizinha deixou de valer em
     silencio. Agora e flex — o layout resolve. */
  /* legibilidade §2.5 (2026-07-26): 11→13px e opacidade 0.4→0.7 pra ler de
     sofá, mas o canto continua discreto (a linguagem tipográfica é a mesma:
     peso 600, letter-spacing rarefeito, uppercase). */
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0.14em;
  color: #cdd6ea; opacity: 0.7; text-transform: uppercase;
  pointer-events: none; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  /* teto pra não invadir a área da .pg-voz (que mora acima, mesma coluna,
     max-width 420) nem o rodapé-direito do cinto. A linha trunca com
     reticências antes de bater no vizinho. */
  max-width: calc(100vw - 460px);
}
.pg-state .pg-label, .pg-state .pg-flash {
  display: inline-block; min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-state.flashing .pg-label { display: none; }
.pg-state .pg-flash { color: #eef4ff; opacity: 1; }
/* Bullet da COR do modo — sinalização discreta, no cantinho, junto do
   label do modo. A cor vem de --pg-mode-color (escrita pelo funil de tela
   a partir da cor declarada do modo). Ocasião especial (cam-locked) usa outra cor por cima. */
.pg-state .pg-mode-tag {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pg-mode-color, #8f9ab3);
  box-shadow: 0 0 6px 0 var(--pg-mode-color, transparent);
  opacity: 0.95;
  flex: none;
}
/* ÍCONE do modo (mode-icons.js) — substitui o bullet quando o modo tem
   desenho próprio; herda a mesma --pg-mode-color via currentColor. */
.pg-state .pg-mode-icon {
  display: inline-flex; width: 14px; height: 14px; flex: none;
  color: var(--pg-mode-color, #8f9ab3);
  filter: drop-shadow(0 0 4px var(--pg-mode-color, transparent));
  opacity: 0.95;
}
.pg-mode-icon svg, .pg-item-icon svg, .pg-tool-icon svg { width: 100%; height: 100%; display: block; }
/* Ícone da FERRAMENTA ativa (docs-conceitos §3) — mesmo peso do modo, com
   separador leve entre eles ("modo › ferramenta"). Cor herda da mesma var
   do modo por enquanto (uma paleta só; se depois cada ferramenta ganhar
   cor própria, é aqui). */
.pg-state .pg-tool-sep {
  color: #58607a; opacity: 0.75; margin: 0 -2px;
  font: 700 12px/1 system-ui, sans-serif;
}
.pg-state .pg-tool-icon {
  display: inline-flex; width: 14px; height: 14px; flex: none;
  color: var(--pg-mode-color, #8f9ab3);
  filter: drop-shadow(0 0 4px var(--pg-mode-color, transparent));
  opacity: 0.9;
}
/* MENUS DO PAD — a arte. O HTML que veste estas classes é montado pelo
   `menu-lista.js` (a pele `pg-menu`, declarada em `pad-menus.js`), não mais
   à mão dentro do `proto-gamepad.js`. Mexer aqui é mexer nas cinco
   superfícies do controle: modos, projeto/cena, cinturão, tutoriais,
   novidades. Os itens são filhos DIRETOS da raiz — a pele do pad dispensa o
   invólucro de lista justamente porque a raiz já é este flex de tela cheia. */
.pg-menu {
  /* geometria e profundidade são da ZONA (CENTER, MODAL, tela cheia) */
  display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: rgba(8, 10, 16, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transform: scale(0.98); pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.pg-menu.open { opacity: 1; transform: scale(1); }
.pg-item {
  font: 700 20px/1 system-ui, sans-serif; letter-spacing: 0.18em;
  color: #8f9ab3; padding: 8px 26px; border-left: 3px solid transparent;
  text-transform: uppercase; user-select: none;
  display: inline-flex; align-items: center; gap: 12px;
}
/* Bolinha da cor do modo no menu — mesma linguagem do .pg-mode-tag: item
   COM bolinha é um modo; itens utilitários (tutoriais/mapeamento) não têm. */
.pg-item-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot, #8f9ab3);
  box-shadow: 0 0 6px 0 var(--dot, transparent);
  flex: none;
}
/* Ícone do modo no menu — mesma linguagem do .pg-mode-icon do estado; a
   bolinha .pg-item-dot segue como fallback de modo sem ícone. */
.pg-item-icon {
  display: inline-flex; width: 17px; height: 17px; flex: none;
  color: var(--dot, #8f9ab3);
  filter: drop-shadow(0 0 5px var(--dot, transparent));
}
.pg-item.sel { color: #f2f5fc; border-left-color: #ffb454; }
.pg-item.soon { opacity: 0.35; }
/* superfície dedicada (timeline/flowgraph): só o miolo, sem chrome de dock.
   LEI DA LOCAÇÃO (founder, 2026-07-21): a BASE da tela pertence ao texto
   (voz/reply/state); então o painel dedicado sobe pro TOPO no modo
   respectivo, sem colidir com o overlay do canto inferior esquerdo. */
body.proto-gamepad.pg-show-bottom .dock-area-bottom {
  display: flex !important; position: fixed; left: 0; right: 0; top: 0;
  height: 320px; z-index: 30; background: rgba(10, 12, 18, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.proto-gamepad.pg-show-bottom .dock-area-bottom .dock-tabbar { display: none !important; }
/* câmera TRAVADA (L2 toggle): a moldura do piloto fica AMARELA */
body.proto-gamepad.pg-cam-locked #viewport-wrap::after {
  border-color: #ffb454 !important;
  box-shadow: inset 0 0 24px rgba(255, 180, 84, 0.16) !important;
}
/* cursor some no modo controle (o laser é o cursor); mousemove traz de volta */
body.proto-gamepad.pg-no-cursor, body.proto-gamepad.pg-no-cursor * { cursor: none !important; }
/* resposta da IA: texto puro flutuante, sem caixa (não polui a interface) */
.pg-reply {
  /* ZONA: BOTTOM_CENTER, ordem 2 — ficava a 4px do .tool-mostrador (92px),
     e por z-index (45 vs 44) o balao que chega SOZINHO tapava o mostrador do
     gesto que o diretor estava fazendo. Agora empilham e a ordem e decisao. */
  transform: translateY(6px);
  max-width: 62%;   /* ZONA: BOTTOM_CENTER, ordem 2 */
  font: 600 17px/1.45 system-ui, sans-serif; text-align: center;
  color: #eef4ff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.8), 0 0 26px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; user-select: none;
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.pg-reply.on { opacity: 1; transform: translateY(0); }
/* voz: notas transcritas (ler antes do R3) + bolinha de nível do mic */
.pg-voz {
  /* ZONA: BOTTOM_LEFT, ordem 1 (entre a linha de estado e o tempo). Ocupava
     EXATAMENTE o mesmo retangulo do `.status-corner` (left:14px/bottom:36px)
     sem que nenhum dos dois soubesse do outro. */
  max-width: 420px;
  display: none; flex-direction: column; gap: 6px;
  pointer-events: none; user-select: none;
}
.pg-voz.on { display: flex; }
.pg-voz-nota {
  font: 500 14px/1.4 system-ui, sans-serif; color: #eef1f6;
  background: rgba(12, 15, 23, 0.82); border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid #6aa9ff; border-radius: 8px; padding: 8px 12px;
}
.pg-voz-nota.pend { color: #8f9ab3; border-left-color: #ffb454; font-style: italic; }
/* A orb e o rótulo são UMA unidade dentro da vaga (BOTTOM_CENTER, ordem 0):
   canto e profundidade são da zona, e o alinhamento entre os dois deixou de
   depender de dois `bottom:` casados à mão (26px e 8px). */
.pg-voz-orb-vaga { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pg-voz-orb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, #ff3b2f);
  box-shadow: 0 0 14px rgba(255, 74, 58, 0.65);
  display: none; pointer-events: none;
  will-change: transform, opacity;
  transition: background 220ms ease-out, box-shadow 220ms ease-out;
}
.pg-voz-orb.on { display: block; }
/* Estado categórico SEM SINAL (§2.3 do estudo HUD): âmbar estático — o
   mic tá ligado mas nada chega. Cor é o mesmo âmbar dos "pendente/aviso"
   do resto do HUD (nota pendente, cam travada). */
.pg-voz-orb.no-signal {
  background: radial-gradient(circle at 35% 35%, #ffd48a, #ffb454);
  box-shadow: 0 0 16px rgba(255, 180, 84, 0.75);
}
/* Rótulo da orb: identifica o que ela é ("gravando…" / "mic sem sinal").
   Antes a orb não se explicava — quem não sabia não deduzia que era o mic
   (§1 do estudo). Discreto, minúsculas, sem exclamação (§4). */
.pg-voz-orb-label {
  display: none;
  font: 500 12px/1 system-ui, sans-serif; letter-spacing: 0.06em;
  color: #eef1f6; opacity: 0.82;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7);
  pointer-events: none; user-select: none;
  transition: color 220ms ease-out;
}
.pg-voz-orb-label.on { display: block; }
.pg-voz-orb-label.no-signal { color: #ffb454; opacity: 0.95; }
/* TUTORIAIS: GIF central paginável — o GIF é o conteúdo, texto mínimo */
.pg-tut { flex-direction: column; gap: 14px; }
.pg-tut-title {
  font: 700 20px/1 system-ui, sans-serif; letter-spacing: 0.16em;
  color: #f2f5fc; text-transform: uppercase; user-select: none;
}
.pg-tut-gif {
  max-width: min(86vw, 900px); max-height: 64vh;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.pg-tut-text {
  font: 500 15px/1.5 system-ui, sans-serif; color: #c3cde2;
  max-width: 76%; text-align: center; user-select: none;
}
.pg-tut-nav {
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0.3em;
  color: #8f9ab3; user-select: none;
}
/* NOVIDADES (release notes) — superfície de leitura irmã da .pg-tut */
.pg-notes { flex-direction: column; gap: 10px; }
.pg-notes-title {
  font: 700 20px/1 system-ui, sans-serif; letter-spacing: 0.16em;
  color: #f2f5fc; text-transform: uppercase; user-select: none;
}
.pg-notes-date {
  font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0.22em;
  color: #8f9ab3; user-select: none;
}
.pg-notes-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-width: min(80vw, 760px); max-height: 62vh; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.pg-notes-list li {
  font: 500 15px/1.5 system-ui, sans-serif; color: #c3cde2;
  position: relative; padding-left: 18px; text-align: left; user-select: none;
}
.pg-notes-list li::before {
  content: '▸'; position: absolute; left: 0; color: #ffb454;
}
/* CINTURÃO CONFIGURÁVEL — lista de ferramentas com checkbox. Sem componente
   nativo (§ postura do projeto — UI custom navegável pelo pad). Cada linha:
   [box] LABEL [na mão] [em breve]. Presença = cor mais viva; ausência =
   opaca. Seleção do DPAD = borda amarela igual ao resto dos menus. */
.pg-belt { flex-direction: column; gap: 8px; }
.pg-belt-title {
  font: 700 18px/1 system-ui, sans-serif; letter-spacing: 0.16em;
  color: #f2f5fc; text-transform: uppercase; user-select: none;
}
.pg-belt-hint {
  font: 500 12px/1.4 system-ui, sans-serif; letter-spacing: 0.06em;
  color: #8f9ab3; user-select: none; margin-bottom: 4px;
}
.pg-belt-hint .pg-key {
  display: inline-block; padding: 1px 6px; margin: 0 2px;
  border-radius: 4px; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #eef4ff; font-weight: 700;
}
.pg-belt-item {
  min-width: 480px;
  justify-content: flex-start; gap: 14px;
  font-size: 17px; padding: 8px 22px;
}
.pg-belt-item.on { color: #dfe6f5; }
.pg-belt-item.off { color: #6a7290; opacity: 0.66; }
.pg-belt-item.sel { border-left-color: #ffb454; }
.pg-belt-item.sel.on { color: #ffffff; }
.pg-belt-item.sel.off { color: #8f9ab3; opacity: 0.9; }
.pg-belt-box {
  display: inline-block; width: 20px; text-align: center;
  font: 700 18px/1 system-ui, sans-serif; color: #ffb454;
}
.pg-belt-item.off .pg-belt-box { color: #58607a; }
.pg-belt-label { flex: 1 1 auto; }
.pg-belt-badge {
  font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.14em;
  color: #0b0e14; background: #ffb454; padding: 3px 6px; border-radius: 3px;
  text-transform: uppercase;
}
.pg-belt-ok {
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.06em;
  color: var(--ok, #6cd29a); white-space: nowrap;
}
.pg-belt-stub {
  font: 600 10px/1 system-ui, sans-serif; letter-spacing: 0.12em;
  color: #8f9ab3; text-transform: uppercase;
  border: 1px solid rgba(143, 154, 179, 0.4); padding: 2px 6px; border-radius: 3px;
}
.pg-belt-foot {
  margin-top: 10px; font: 500 12px/1.4 system-ui, sans-serif;
  letter-spacing: 0.05em; color: #6a7290; user-select: none;
}
/* MODO OBJETO — mira + hover + selecionado + pulse de eixo.
   Tudo sob a lei da tela limpa: pouca opacidade em repouso, cor só no
   que está acontecendo agora. */
.pg-obj-overlay {
  /* geometria e profundidade são da ZONA (CENTER, HUD, tela cheia) */
  pointer-events: none; user-select: none;
}
.pg-obj-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pg-obj-aim line { stroke-linecap: round; }
/* RETICLE da mira do modo objeto — coerente com o laser (mesmo vermelho
   quente #ff5a4a), com halo preto pra ler em qualquer fundo. Sem isso a
   mira sumia em cenas claras e o founder ficava sem saber o que ia pegar
   no A. Anel + ponto central + 4 braços curtos com gap (não é crosshair
   de FPS — é o "onde a caneta aponta"). */
.pg-obj-aim .pg-aim-ring {
  fill: none; stroke: #ff5a4a; stroke-width: 1.4; opacity: 0.9;
  paint-order: stroke; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85));
}
.pg-obj-aim .pg-aim-dot {
  fill: #ff5a4a; opacity: 0.95;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85));
}
.pg-obj-aim .pg-aim-arm {
  stroke: #ff5a4a; stroke-width: 1.4; opacity: 0.85;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85));
}
.pg-obj-hover line {
  stroke: #eef4ff; stroke-width: 1.2; opacity: 0.45; fill: none;
  stroke-linecap: round;
}
.pg-obj-sel line {
  stroke: #ffb454; stroke-width: 1.8; opacity: 0.9; fill: none;
  stroke-linecap: round;
}
.pg-obj-name {
  fill: #f2f5fc; font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0;
  paint-order: stroke; stroke: rgba(8,10,16,0.85); stroke-width: 3;
  transition: opacity 180ms ease-out;
}
/* superfície do modo CONVERSAS — leitura de sofá, sem chrome */
.pg-issues {
  /* profundidade é da CAMADA (MODAL, aplicada no elemento) — era 30, abaixo
     de todo o HUD, enquanto a gaveta gêmea da home usava 55 */
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px;
  background: rgba(10, 12, 18, 0.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
  font: 500 14px/1.45 system-ui, sans-serif; color: #c3cde2;
  user-select: none; overflow: hidden;
}
.pg-iss-head {
  font: 700 12px/1.3 system-ui, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8f9ab3;
  display: flex; align-items: center; gap: 8px; padding-bottom: 6px;
  flex: none;
}
.pg-iss-empty { color: #7c8291; }
.pg-iss-item {
  display: flex; gap: 8px; padding: 8px 10px;
  border-left: 3px solid transparent;
}
.pg-iss-item.sel {
  border-left-color: #ffb454; background: rgba(255,255,255,0.04);
}
.pg-iss-item.sel .pg-iss-text { color: #f2f5fc; }
.pg-iss-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #58607a;
  flex: none; margin-top: 5px;
}
.pg-iss-dot[data-active="true"] {
  background: #6ee27a; box-shadow: 0 0 6px rgba(110, 226, 122, 0.7);
}
.pg-iss-body { min-width: 0; }
.pg-iss-text { color: #eef1f6; }
.pg-iss-meta { color: #7c8291; font-size: 11px; margin-top: 2px; }
.pg-iss-thread {
  flex: 1 1 auto; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 10px; padding-right: 4px;
}
.pg-iss-thread::-webkit-scrollbar { display: none; }
.pg-iss-reply { color: #a8c8f0; margin: 3px 0 0 16px; }
/* notas de voz não-enviadas (deleção via R2, 2× confirma) */
.pg-iss-notas {
  flex: none; padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 180, 84, 0.07);
  border: 1px solid rgba(255, 180, 84, 0.25);
}
.pg-iss-notas-head {
  font: 700 10px/1.3 system-ui, sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase; color: #ffb454; margin-bottom: 4px;
  display: flex; justify-content: space-between; gap: 8px;
}
.pg-iss-notas-hint { color: #8f9ab3; letter-spacing: 0.06em; }
.pg-iss-notas-hint.armed { color: #ff7a6a; }
.pg-iss-nota {
  color: #c3cde2; font-size: 12px; padding: 2px 0 2px 8px;
  border-left: 2px solid rgba(255,255,255,0.12);
}
.pg-iss-nota.last { color: #f2f5fc; border-left-color: #ffb454; }
.pg-iss-nota.del-armed {
  color: #ffd4cd; border-left-color: #ff5a45;
  background: rgba(255, 90, 69, 0.12);
}
/* ---------- MAPEAMENTO (visualizar/editar) ---------- */
/* Duas modalidades: acento âmbar (leitura) ou ciano (edição), definidos por
   var --pg-acc no container. Botões viram alvos (data-btn no SVG).       */
.pg-map-ui {
  /* geometria e profundidade são da ZONA (CENTER, MODAL, tela cheia) — era
     `inset: 0; z-index: 55`, o mesmo 55 do radial, e a ordem entre os dois
     era acidente de quem escreveu por último */
  --pg-acc: #ffb454;
  display: flex; flex-direction: column;
  pointer-events: auto;
  background: rgba(8, 10, 16, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 140ms ease-out;
  color: #cdd6ea;
  font-family: system-ui, sans-serif;
}
.pg-map-ui.open { opacity: 1; }
.pg-map-ui.acc-edit {
  --pg-acc: #6aa9ff;
  box-shadow: inset 0 0 0 2px rgba(106, 169, 255, 0.35);
}
.pg-map-tabs {
  display: flex; gap: 8px; justify-content: center;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pg-map-tab {
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #58607a;
  padding: 6px 12px; border-bottom: 2px solid transparent;
}
.pg-map-tab.sel { color: #f2f5fc; border-bottom-color: var(--pg-acc); }
/* Área do pad-live dentro do mapa. O componente pad-live (public/src/pad-live.js)
   desenha o controle, as legendas embaixo de cada botão e o overlay em uso.
   A UI antiga (SVG matemático + callouts em coluna) saiu em 2026-07-23 pelo
   desenho vivo do experimento pad-display. Sem overflow-hidden: as legendas
   de fora dos ombros (L2/R2, L1/R1) precisam do respiro lateral do
   .pad-live pra não serem cortadas em viewports menores. */
.pg-map-live {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  min-height: 0;
}
/* pescoço de descoberta: "último botão apertado: <NOME>" — o founder abre
   o overlay (EXTRA1), aperta um botão desconhecido e lê o nome canônico
   pra pedir "configura EXTRA2 pra fazer X". */
.pg-map-lastbtn {
  font: 500 11px/1 system-ui, sans-serif; letter-spacing: 0.1em;
  color: #7c8291; text-align: center; padding: 4px 20px 8px;
  text-transform: uppercase; opacity: 0.9;
}
.pg-map-lastbtn[data-empty="true"] { opacity: 0.45; }
.pg-map-lastbtn em {
  font-style: normal; color: var(--pg-acc); font-weight: 700;
  margin-left: 4px;
}
.pg-map-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 22px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pg-map-mode { color: var(--pg-acc); }
.pg-map-hint { color: #7c8291; }
/* Picker lateral (edição, X abriu). Vive dentro do .pg-map-ui como
   .pg-map-picker[data-open="1"] — o painel aparece no canto direito com
   a mesma organização de antes (head + lista + hint no rodapé). */
.pg-map-picker[data-open="0"] { display: none; }
.pg-map-picker[data-open="1"] {
  /* `absolute` dentro do overlay do mapa (que a zona posiciona), não `fixed`
     na tela: ele é uma gaveta DO mapa, e o `fixed` fazia dele um morador
     independente que só ficava alinhado por coincidência de coordenadas */
  position: absolute; top: 60px; right: 24px; bottom: 60px; width: 320px;
  background: rgba(12, 15, 23, 0.94);
  border: 1px solid rgba(106, 169, 255, 0.4);
  border-radius: 8px; padding: 14px 8px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 60;
}
.pg-picker-head {
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6aa9ff;
  padding: 4px 12px 8px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pg-picker-list {
  flex: 1 1 auto; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 2px;
}
.pg-picker-list::-webkit-scrollbar { display: none; }
.pg-picker-item {
  font: 500 13px/1.3 system-ui, sans-serif; color: #c3cde2;
  padding: 7px 12px; border-left: 3px solid transparent;
}
.pg-picker-item.sel {
  color: #f2f5fc; border-left-color: #6aa9ff;
  background: rgba(106, 169, 255, 0.08);
}
.pg-picker-foot {
  font: 500 10px/1 system-ui, sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase; color: #58607a;
  padding: 6px 12px 0; border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
/* ---------- MENU CONTEXTUAL (modo objeto) ---------- */
/* Vertical, ANCORADO ao objeto no espaço da tela (o work-mode reposiciona
   por frame). Estilo console coerente com o menu de modos; itens
   desabilitados ACINZENTADOS (memória espacial — geometria fixa). */
.pg-ctxmenu {
  position: fixed; z-index: 48; min-width: 220px;
  background: rgba(12, 15, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; padding: 6px 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(-4px) scale(0.98);
  transition: opacity 130ms ease-out, transform 130ms ease-out;
  pointer-events: none; user-select: none;
  font-family: system-ui, sans-serif;
}
.pg-ctxmenu.on { opacity: 1; transform: translateY(0) scale(1); }
.pg-ctxmenu-list { display: flex; flex-direction: column; }
/* Cabeça opcional da lista (o ERGUE-CENÁRIO pergunta "ERGUER" antes de
   PAREDE/SÓLIDO) — o menu contextual do endereçável não usa. */
.pg-ctxmenu-title {
  font: 700 10px/1 system-ui, sans-serif; letter-spacing: 0.22em;
  text-transform: uppercase; color: #7d879e;
  padding: 4px 18px 8px; border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.pg-ctxmenu-item {
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #c3cde2;
  padding: 10px 18px; border-left: 3px solid transparent;
  white-space: nowrap;
}
.pg-ctxmenu-item.sel {
  color: #f2f5fc; border-left-color: #ffb454;
  background: rgba(255, 180, 84, 0.08);
}
.pg-ctxmenu-item.disabled {
  color: #58607a; opacity: 0.55;
}
.pg-ctxmenu-item.disabled::after {
  content: ' · em breve'; font-size: 10px; letter-spacing: 0.1em;
  color: #58607a; margin-left: 6px;
}