/* Os botões do mundo no /game (P-099; design aprovado "M11 — construção": M11World, M11New,
 * M11Mobile): a pílula Nova structure no canto de cima à direita, no molde de "Voltar ao
 * site" (44 px, #0F1630, borda .22), armada em plasma com o traço embaixo; o cartão de 320 px
 * com o pedido e o aviso violeta. No celular, a barra a 12 px da base com o cartão acima. */
.wp {
  position: fixed; z-index: 3; top: 16px; right: 16px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px; color: #E8EEFF;
}
.wp[hidden], .wp-card[hidden] { display: none; }
.wp-row { display: flex; gap: 8px; justify-content: flex-end; }
.wp-pill {
  height: 44px; box-sizing: border-box; padding: 0 10px 0 12px; display: flex; align-items: center;
  gap: 9px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; color: #E8EEFF; background: #0F1630;
  box-shadow: inset 0 0 0 1px rgba(150, 185, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.35);
}
.wp-pill svg { flex: none; }
.wp-pill span { font-size: 15px; font-weight: 600; white-space: nowrap; }
.wp-pill[aria-pressed="true"] {
  background: linear-gradient(rgba(108, 242, 224, 0.12), rgba(108, 242, 224, 0.12)), #0F1630;
  box-shadow: inset 0 0 0 1px rgba(108, 242, 224, 0.55), inset 0 -2px 0 #6CF2E0, 0 8px 28px rgba(0, 0, 0, 0.35);
}
.wp-pill[aria-pressed="true"] span { font-weight: 650; }
.wp-pill.down { transform: translateY(1px); background: rgba(130, 160, 255, 0.24); }
.wp-pill.down[aria-pressed="true"] { background: linear-gradient(rgba(108, 242, 224, 0.22), rgba(108, 242, 224, 0.22)), #0F1630; }
.wp-pill:focus-visible { outline: 2px solid #6CF2E0; outline-offset: 2px; }
.wp-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;
}
.wp-pill[aria-pressed="true"] .wp-key { color: #6CF2E0; border-color: rgba(108, 242, 224, 0.55); }
.wp-pill.down .wp-key { color: #070B1A; background: #E8EEFF; border-color: #E8EEFF; }
.wp-card {
  width: 320px; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; background: #0F1630;
  border: 1px solid rgba(150, 185, 255, 0.18); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.wp-card.warn { border-color: rgba(183, 156, 255, 0.35); }
.wp-hint { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 17px; color: #C4CFEA; }
.wp-card.warn .wp-hint { color: #D9CCFF; }
.wp-hint-t { flex: 1; min-width: 0; }
.wp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6CF2E0; box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.18); }
.wp-card.warn .wp-dot { background: #B79CFF; box-shadow: 0 0 0 3px rgba(183, 156, 255, 0.2); }
/* Nova belt (P-101, M11World): o 1º clique deixa a saída lembrada sob o pedido; a recusa do
 * servidor (sem caminho) é o bloco coral do M10 dentro do cartão, que ganha a borda coral. */
.wp-say { display: flex; flex-direction: column; gap: 3px; }
.wp-say[hidden], .wp-first[hidden], .wp-ref[hidden] { display: none; }
.wp-first { margin: 0 0 0 16px; font-size: 12.5px; line-height: 16px; color: #93A3C8; }
.wp-first b { font-weight: 600; color: #C4CFEA; }
.wp-card.refuse { border-color: rgba(255, 143, 128, 0.40); }
.wp-ref { display: flex; gap: 9px; }
.wp-ref-i {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; color: #1A0B0B; background: #FF8F80;
}
.wp-ref-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-ref-h { font-size: 13px; font-weight: 650; color: #FFB4A9; }
.wp-ref-m { font-size: 12.5px; line-height: 16px; color: #F2D2CC; }

@media (max-width: 860px) {
  .wp { top: auto; left: 12px; right: 12px; bottom: 12px; flex-direction: column-reverse; align-items: stretch; }
  .wp-pill { height: 48px; padding: 0 12px; border-radius: 14px; flex: 1; min-width: 0; justify-content: center; }
  .wp-pill span { font-size: 14.5px; }
  .wp-key { display: none; }
  .wp-card { width: auto; }
}