/* Bombermon (/bombermon). A moldura (topbar, painéis do SEO, rodapé) segue os tokens/tema do /styles.css;
   a UI do jogo é sempre a paleta escura original do otPokemon (docs/bombermon/ui-otpokemon.md §2, §11, §12).
   Medidas do lobby e do HUD em px "de UI" (1x do OTClient); o tamanho final vem de `zoom` (--z / --hz). */

:root {
  --bm-amber: #fde68a;
  --bm-navy: rgba(11, 17, 35, 0.8);
  --bm-gold-line: #695744;
  --bm-font-ui: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  --bm-font-name: Montserrat, "Nunito PKBR", sans-serif;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

[class^="bm-"] img { image-rendering: pixelated; }

/* Ícones em pixel art. No lobby, todos em SVG de <rect> (ui/icons/px-*: troféu, derrota, empate, abates, cabeça do
   Bomberman…, avatares e bônus; desenhados já na resolução da tela, enquanto o PNG pixelated em DPR 1,5 saía com uma
   coluna mais estreita); a HUD usa os PNG de ui/pixel. O lado final é um múltiplo inteiro da grade (--g px) em pixels
   físicos, o mais perto do alvo de cada lugar (--t, em px de UI): nada de pixel borrado nem de pixel com largura
   diferente do vizinho. --bm-dev = pixels físicos por px de UI (zoom da janela × DPR; o --bm-dpr vem do hud.js). Sem
   round() no CSS fica o tamanho-alvo.
   Os px-* têm a arte de 16 (--a) numa caixa de 18 (--g), com 1 célula vazia em volta (bônus: 28 em 30; avatar
   grande: 24 em 30): k vem da arte e o lado é 18k pixels físicos. Com DPR 1,5 e 3 um lado de 16k (ou 28k) não existe
   em 1/64 de px de CSS (o layout trunca e a arte sai com uma coluna cortada ou dobrada); com a grade múltipla de 3
   sempre existe. A margem vazia também recebe o recorte de meio pixel físico que o navegador faz quando a imagem
   começa numa posição quebrada (DPR 1,5), longe do contorno. A margem negativa deixa o lugar ocupado igual ao da
   arte; sem eventos de ponteiro, a sobra transparente não rouba o clique do vizinho (avatares na escolha). */
:root { --bm-dev: var(--bm-dpr, 1); }
img.bm-pxi {
  --g: 24;
  --pxi: calc(var(--t, 24) * var(--g) / var(--a, var(--g)) * 1px);
  width: var(--pxi);
  height: var(--pxi);
  flex: none;
  image-rendering: pixelated;
}
img.bm-pxi[src*="-16."] { --g: 16; }
img.bm-pxi[src*="-12."] { --g: 12; }
img.bm-pxi[src*="/bonus/"] { --g: 28; }
img.bm-pxi[src*="/icons/px-"] { --g: 18; --a: 16; }
img.bm-pxi[src*="/icons/px-bonus-"] { --g: 30; --a: 28; }
img.bm-pxi[src*="/icons/px-avatar-"][src*="-24."] { --g: 30; --a: 24; }
/* :where(): especificidade zero, então quem põe margem própria no ícone (.bm-big__icon, th img) desconta a célula */
:where(img.bm-pxi[src*="/icons/px-"]) { margin: calc(var(--pxi) * (var(--a) - var(--g)) / 2 / var(--g)); pointer-events: none; }
@supports (width: calc(round(nearest, 2.5, 1) * 1px)) {
  img.bm-pxi {
    /* +0.002px: o layout trunca em 1/64 px e uma linha do PNG sumiria (mesmo motivo do fitLogo do lobby.js).
       --r: down onde o ícone não pode passar do alvo (avatar da linha de jogador); o +0.001 protege o down de um
       3 que a conta dá como 2,9999 */
    --pxi: calc(max(1, round(var(--r, nearest), var(--t, 24) * var(--bm-dev) / var(--a, var(--g)) + 0.001, 1)) * var(--g) / var(--bm-dev) * 1px + 0.002px);
  }
}

/* Números do lobby (placar, vagas N/4, vitórias/derrotas dos jogadores): texto na Press Start 2P, que é desenhada
   numa grade de 8 px. O corpo vira um múltiplo de 8 pixels físicos perto do alvo --fs (px de UI), então cada pixel
   da fonte cobre um número inteiro de pixels físicos; sem antisserrilhado (onde o navegador deixa, como no macOS) a
   borda cai no pixel mesmo com a posição quebrada. A tinta dos dígitos ocupa os 7/8 de cima do em: o 1/8 de
   padding em cima centra a tinta na caixa (e nos ícones ao lado, com align-items: center). */
.bm-num {
  --fs: 10;
  display: inline-block;
  padding-top: 0.125em;
  font: 400 calc(var(--fs) * 1px) / 1 var(--font-pixel, "Press Start 2P", monospace);
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
@supports (width: calc(round(nearest, 2.5, 1) * 1px)) {
  .bm-num { font-size: calc(max(1, round(nearest, var(--fs) * var(--bm-dev) / 8, 1)) * 8 / var(--bm-dev) * 1px); }
}

/* ============================== página ============================== */
.bm-page { gap: 14px; }
.bm-h1 {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 18px;
  line-height: 1.5;
  color: #fff; /* fica direto no fundo da página, que é escuro nos dois temas (--bg-0) */
  text-shadow: 2px 2px 0 #000;
}
.bm-h1 span { font-family: var(--font-body); font-size: 22px; color: rgba(255, 255, 255, 0.72); font-weight: 600; text-shadow: none; }

.bm-stage {
  display: flex;
  justify-content: center;
  padding: 18px 12px 22px;
  border: var(--pixel) solid var(--border);
  box-shadow: var(--pixel) var(--pixel) 0 var(--shadow);
  /* fundo escuro de "sala de arcade" nos dois temas: as janelas do jogo são translúcidas */
  background:
    linear-gradient(rgba(10, 17, 34, 0.55), rgba(10, 17, 34, 0.55)),
    repeating-conic-gradient(#2f4f3c 0 25%, #2a4636 0 50%) 0 0 / 32px 32px;
}
.bm-noscript { color: #fff; font-family: var(--bm-font-ui); }

/* SEO */
.bm-faq dt { font-weight: 800; color: var(--ink); margin-top: 10px; }
.bm-faq dd { margin: 2px 0 0; color: var(--ink-soft); }

/* ============================== janela do arcade ============================== */
.bm-app { --z: 1.5; width: 100%; display: flex; justify-content: center; }
@media (min-width: 920px) { .bm-app { --z: 1.5; } }
@media (min-width: 920px) and (min-height: 900px) { .bm-app { --z: 2; } }
/* até 387 px de largura o card da arena (201 px de UI) só cabe no painel com zoom 1,25 (com 1,5, em 360 px ele
   passava ~18 px da borda do painel "Arenas") */
@media (max-width: 387px), (max-height: 500px) { .bm-app { --z: 1.25; } }

.bm-window {
  zoom: var(--z);
  --bm-dev: calc(var(--z) * var(--bm-dpr, 1));
  position: relative;
  width: min(443px, calc((100vw - 48px) / var(--z)));
  min-height: 370px;
  font: 11px/1.25 var(--bm-font-ui);
  color: #fff;
  background: var(--bm-navy);
  border-radius: 3px;
  /* borda como sombra: a largura útil fica nos 443 px do original (427 de área de tela) */
  box-shadow: 0 0 0 1px #05070d, 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 0, 0, 0.45);
  padding-bottom: 8px;
  -webkit-font-smoothing: antialiased;
}
.bmw-head {
  position: relative;
  height: 70px;
  border-radius: 3px 3px 0 0;
  /* cabeçalho do window.png: degradê #162041 → #0b1124 (alpha 231) e filete dourado em y = 66 */
  background:
    linear-gradient(to bottom, transparent 66px, var(--bm-gold-line) 66px, var(--bm-gold-line) 67px, transparent 67px),
    linear-gradient(100deg, rgba(22, 32, 65, 0.906), rgba(11, 17, 36, 0.906));
}
/* Logo: o PNG sem a placa (logo-arcade-otp-semplaca.png, 158×44) e a placa "by otPonline.com" em texto de verdade
   por cima. Tamanho e topo finais vêm do fitLogo() (lobby.js): escala inteira de pixels físicos para o zoom × DPR da
   tela; --lu é o tamanho de 1 pixel da logo. A placa ocupa o lugar que a imagem deixa vazio no alto à direita
   (docs/bombermon/logo/arcade/bombermon-arcade-otp-semplaca.json: x 89, y 7, 64×9) e cresce para a esquerda se o
   texto pedir: vermelho #c92327 com brilho #ef3a3a em cima e #7d1518 embaixo, contorno azul-marinho, moldura escura e
   a sombra seca de 2 px na diagonal, como a placa desenhada antes. */
.bmw-logo { --lu: 1px; position: absolute; left: 6px; top: 11px; width: 158px; height: 44px; }
.bmw-logo__img { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated; }
.bmw-plate {
  position: absolute;
  right: calc(var(--lu) * 5);
  top: calc(var(--lu) * 7);
  min-width: calc(var(--lu) * 64);
  height: calc(var(--lu) * 9);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lu) * 1.5);
  padding: 0 calc(var(--lu) * 2.5);
  background: #c92327;
  box-shadow:
    inset 0 var(--lu) 0 #ef3a3a,
    inset 0 calc(-1 * var(--lu)) 0 #7d1518,
    0 0 0 var(--lu) #111c36,
    0 0 0 calc(2 * var(--lu)) #02060f,
    calc(2 * var(--lu)) calc(2 * var(--lu)) 0 calc(2 * var(--lu)) #02060f;
  color: #f5f7ff;
  font: 700 calc(var(--lu) * 7) / 1 Montserrat, "Nunito PKBR", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}
.bmw-plate b { color: #ffe066; font-weight: 700; }

/* Som do lobby: o mesmo botão quadrado da HUD em tamanho de lobby, com o alto-falante em pixel art (SVG de <rect>)
   numa escala inteira de pixels físicos (como as .bm-pxi). */
.bmw-sound {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 3px;
  box-sizing: border-box;
  border: 2px solid #050a16;
  background: #1e3058;
  box-shadow: 2px 2px 0 #02060f, inset 0 2px 0 #2f4a85, inset 0 -2px 0 #152241;
  cursor: pointer;
}
.bmw-sound:hover { background: #26407a; }
.bmw-sound:active { box-shadow: inset 0 2px 0 #152241; }
.bmw-sound:focus-visible { outline: 2px solid var(--bm-amber); outline-offset: 1px; }
.bm-spk { display: block; width: 20px; height: 16px; }
@supports (width: calc(round(nearest, 2.5, 1) * 1px)) {
  .bm-spk {
    --k: max(1, round(nearest, var(--bm-dev), 1));
    width: calc(20px * var(--k) / var(--bm-dev));
    height: calc(16px * var(--k) / var(--bm-dev));
  }
}

/* contadores 🏆/✖ do topo direito (y = 72, x até 433) */
.bmw-counters {
  position: absolute;
  top: 72px;
  right: 10px;
  display: flex;
  gap: 10px;
  z-index: 2;
  pointer-events: auto;
}
.bmw-counter { display: inline-flex; align-items: center; gap: 4px; color: var(--bm-amber); }
.bmw-counter > img { --t: 14; }

.bmw-status {
  /* sobre o cabeçalho (sem empurrar o layout: um clique no meio de uma reconexão não pode errar o alvo) */
  position: absolute;
  right: 44px;
  top: 12px;
  z-index: 3;
  display: none;
  /* para antes do logo (--bmw-logo-r: borda direita dele, posta pelo fitLogo) com 22px de folga */
  max-width: calc(100% - var(--bmw-logo-r, 164px) - 66px);
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
}
@media (max-width: 700px) { .bmw-status { left: 8px; right: 8px; top: auto; bottom: 4px; max-width: none; } }
.bmw-status.is-on { display: block; }
.bmw-status[data-kind="error"] { color: #ff8a80; }
.bmw-status[data-kind="warn"] { color: var(--bm-amber); }

.bmw-body { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 10px; }

/* ====== espelho pokemon.com.br/bombermon com o bombermon.com no ar (bombermon-com.md §7.2) ======
   O servidor só põe o data-bm-site="pkbr" no <html> (e a faixa) com BOMBERMON_STAGE=live (src/bombermon/site/espelho.js);
   o client/site.js liga os selos por ele. */
/* faixa fixa entre a topbar e o h1, nos dois temas do pokemon.com.br (tokens do styles.css) */
.bm-mirror-strip {
  box-sizing: border-box;
  max-width: 1140px;
  margin: 18px auto 0;
  width: calc(100% - 40px);
  padding: 10px 14px;
  background: var(--panel, #13203d);
  color: var(--ink, #eaf0ff);
  border: var(--pixel, 4px) solid var(--border, #4b5f95);
  box-shadow: var(--pixel, 4px) var(--pixel, 4px) 0 var(--shadow, #02060f);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
}
.bm-mirror-strip p { margin: 0; }
.bm-mirror-strip a { color: inherit; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.bm-mirror-strip + .container { padding-top: 18px; }
@media (max-width: 700px) {
  .bm-mirror-strip { width: calc(100% - 32px); margin-top: 12px; font-size: 16px; padding: 8px 12px; }
  .bm-mirror-strip a { white-space: normal; }
}
/* selo BOMBERMON.COM preso ao topo da janela do lobby, à direita (visível em todas as telas): uma aba fora da
   janela, no respiro de cima do palco (que cresce um pouco no espelho) */
.bmw-brand {
  position: absolute;
  right: 10px;
  bottom: 100%;
  z-index: 3;
  padding: 3px 6px 2px;
  font: 400 7px/1 var(--font-pixel, "Press Start 2P", monospace);
  letter-spacing: 0;
  color: #ffcf3f;
  background: #111c36;
  border: 1px solid #050a16;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 #2f4a85;
  text-decoration: none;
  white-space: nowrap;
}
.bmw-brand:hover, .bmw-brand:focus-visible { color: #ffe066; background: #1e3058; outline: none; }
.bmw-brand:focus-visible { box-shadow: 0 0 0 2px var(--bm-amber); }
html[data-bm-site="pkbr"] .bm-stage { padding-top: 34px; }
/* a FAQ do texto de SEO (o mesmo da /pt/) no tamanho dos parágrafos do .seo-panel do styles.css */
html[data-bm-site="pkbr"] .seo-panel .bm-faq { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
html[data-bm-site="pkbr"] .seo-panel .bm-faq dd { color: var(--ink-soft); }
@media (max-width: 700px) { html[data-bm-site="pkbr"] .seo-panel .bm-faq { font-size: 16px; } }

/* faixa "na fila" nas outras telas */
.bm-qbanner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: calc(var(--bmw-ch, 16px) + 10px) 8px 0; /* abaixo da linha dos contadores do placar (altura medida pelo fitCounters) */
  padding: 3px 8px;
  border: 0;
  border-image: url(/bombermon/ui/lobby/button-pressed.png) 4 fill / 4px stretch;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bm-qbanner img { --t: 15; }
.bm-qbanner b { color: var(--bm-amber); }
.bm-qbanner span { margin-left: auto; color: #00ff00; font-weight: 700; }

/* ---------------- botões (BombermonButton) ---------------- */
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 54px;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-image: url(/bombermon/ui/lobby/button.png) 4 fill / 4px stretch;
  background: transparent;
  color: var(--bm-amber);
  font: 700 11px/1 var(--bm-font-ui);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.bm-btn:hover:not(:disabled) { border-image-source: url(/bombermon/ui/lobby/button-hover.png); color: #fff; }
.bm-btn:active:not(:disabled) { border-image-source: url(/bombermon/ui/lobby/button-pressed.png); }
.bm-btn:disabled { color: #e8c05e66; opacity: 0.8; cursor: default; }
.bm-btn:focus-visible { outline: 1px solid var(--bm-amber); outline-offset: 1px; }
.bm-btn__icon { --t: 15; width: 15px; height: 15px; flex: none; }
.bm-btn--enter:not(:disabled) { color: #00ff00; }
.bm-btn--leave:not(:disabled) { color: #ff0000; }
.bm-btn--enter:hover:not(:disabled), .bm-btn--leave:hover:not(:disabled) { color: #fff; }
.bm-btn--wide { width: 100%; height: 26px; }

/* ---------------- painel com aba ----------------
   Era o panel-tab.png em 9 fatias, com a aba de largura fixa (~62 px): título mais largo que ela ("Sala z6DLwL",
   "Jogadores · Ice Arena") ficava com a linha da borda passando por baixo do texto. Agora a aba é o <span> do título
   e cresce com ele; logo depois vem a diagonal em escada (px-tab-slope.svg) e a linha de cima do corpo até a borda
   direita (::after do título); o corpo desenha as outras três bordas (::before do painel). Mesmas cores do PNG.
   Altura da aba (--bm-tab-h), espessura do filete (--bm-tab-c) e a escada (--bm-tab-slope, n degraus) vêm do
   fitTabs (lobby.js), em pixels físicos inteiros; os valores daqui são os de 1x, antes do JS.
   O fundo é opaco (o rgba(22, 33, 65, 0.7) do PNG já composto sobre a janela e o palco: #141e39), então aba,
   diagonal e corpo se sobrepõem 1 célula sem escurecer: em zoom × DPR quebrado as bordas suavizadas de cada um
   deixavam uma emenda de 1 px física onde se encontram. */
.bm-tabpanel {
  --bm-tab-line: #695744;
  --bm-tab-fill: #141e39;
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: calc(var(--bm-tab-h, 15px) + 10px) 10px 10px;
  min-width: 0;
}
.bm-tabpanel::before {
  content: "";
  position: absolute;
  inset: calc(var(--bm-tab-h, 15px) - var(--bm-tab-c, 1px)) 0 0;
  z-index: -1;
  border: 1px solid var(--bm-tab-line);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background: var(--bm-tab-fill);
}
.bm-tabpanel__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  height: var(--bm-tab-h, 15px);
  margin: 0;
  font: 700 11px/14px var(--bm-font-ui);
  color: #fff;
  letter-spacing: 0;
}
.bm-tabpanel__title > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 3px 0 8px;
  border: solid var(--bm-tab-line);
  border-width: 1px 0 0 1px;
  border-radius: 3px 0 0;
  background: var(--bm-tab-fill);
}
/* a diagonal começa 1 célula por cima do fim da aba (cobre a borda suavizada dela) e o filete do corpo sai do último degrau */
.bm-tabpanel__title::after {
  content: "";
  flex: 1 0 var(--bm-tab-h, 15px);
  margin-left: calc(-1 * var(--bm-tab-c, 1px));
  background:
    var(--bm-tab-slope, url(/bombermon/ui/lobby/px-tab-slope.svg)) 0 0 / var(--bm-tab-h, 15px) var(--bm-tab-h, 15px) no-repeat,
    linear-gradient(var(--bm-tab-line), var(--bm-tab-line)) calc(var(--bm-tab-h, 15px) - var(--bm-tab-c, 1px)) calc(var(--bm-tab-h, 15px) - var(--bm-tab-c, 1px)) / 100% var(--bm-tab-c, 1px) no-repeat;
}
.bm-tabpanel__body { display: flex; flex-direction: column; gap: 6px; }

/* ---------------- identidade ---------------- */
.bm-ident {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding-right: 110px; /* espaço dos contadores do topo */
  color: #fff;
}
.bm-ident__av { --t: 24; }
.bm-ident b { color: var(--bm-amber); }
.bm-ident__login { color: var(--bm-amber); font-weight: 700; font-size: 10px; }
.bm-input {
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #0b1123;
  color: #fff;
  font: 11px var(--bm-font-ui);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.bm-input::placeholder { color: #8d93a8; }
.bm-input:focus { outline: 1px solid var(--bm-amber); }
.bm-name { flex: 1; max-width: 160px; }

/* ---------------- cards grandes (fila / sala) ---------------- */
/* min(201px, 100%): numa janela mais estreita que o card (celular de 320 px) ele encolhe em vez de vazar */
.bm-bigcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(201px, 100%), 1fr)); gap: 5px; }
.bm-big {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: "icon txt" "act act";
  gap: 4px 8px;
  padding: 7px 8px 8px;
  /* mesmo azul #2a3f7e do arena-card, sem a cabeça do Bomberman (que esticaria no 9-slice) */
  background: #2a3f7e;
  border: 1px solid #0e1630;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -8px 16px rgba(0, 0, 0, 0.18);
}
.bm-big__icon { --t: 28; grid-area: icon; align-self: start; justify-self: center; margin-top: calc(2px - var(--pxi) / 18); }
.bm-big__txt { grid-area: txt; min-width: 0; }
.bm-big h2 { margin: 0 0 2px; font: 700 12px/1.2 var(--bm-font-ui); color: var(--bm-amber); letter-spacing: 0; }
.bm-big p { margin: 0; color: #dfe4f7; font-size: 10px; line-height: 1.3; }
.bm-big__act { grid-area: act; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.bm-big__count { margin-right: auto; color: #fff; font-size: 10px; }
.bm-code { grid-column: 1 / -1; display: flex; gap: 4px; }
.bm-code .bm-input { flex: 1; text-transform: uppercase; letter-spacing: 1px; }

/* ---------------- arenas (BombermonArenaWidget 201x58) ----------------
   A moldura do arena-card.png em CSS: contorno escuro (borda), filete dourado (outline por dentro), fio escuro e
   luz (sombras internas) e o azul em degradê. A cabeça do Bomberman e a caixa das vagas, que vinham suavizadas no
   PNG e borravam ampliadas, agora são px-bomber-head.svg + caixa CSS + número em texto (.bm-num). */
.bm-arenas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(201px, 100%), 1fr)); gap: 5px; }
.bm-arena {
  position: relative;
  height: 58px;
  border: 1px solid #110d1c;
  outline: 1px solid #695744;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px #110d1c, inset 0 0 0 3px #36508f;
  background: linear-gradient(#2d4487, #253870);
}
.bm-arena__name { position: absolute; left: 10px; top: 5px; color: var(--bm-amber); font-weight: 700; }
.bm-arena__busy { --t: 15; position: absolute; right: 4px; top: 5px; }
/* vagas: a cabeça por cima da ponta esquerda da caixa escura com filete dourado, centradas na altura dos botões */
.bm-arena__slots { position: absolute; left: 6px; top: 26px; height: 24px; display: flex; align-items: center; }
.bm-arena__head { --t: 26; position: relative; z-index: 1; }
.bm-arena__count {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 52px;
  height: 20px;
  margin-left: -8px;
  padding-left: 10px;
  padding-right: 5px;
  border: 1px solid #695744;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #110d1c;
  background: #171d3b;
  color: #fff;
}
/* "Jogadores" em Verdana passa dos 54 px do botão original: letra um pouco menor e sem quebrar */
.bm-arena__players { position: absolute; right: 61px; top: 27px; width: 54px; min-width: 0; padding: 0; font-size: 9px; letter-spacing: -0.5px; overflow: hidden; white-space: nowrap; }
.bm-arena__enter { position: absolute; right: 4px; top: 27px; width: 54px; min-width: 0; padding: 0; }

.bm-footbtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bm-footbtns--split { justify-content: space-between; }
.bm-footbtns--right { justify-content: flex-end; gap: 5px; }
.bm-footbtns .bm-btn { min-width: 80px; }

.bm-muted { color: #aab1c9; margin: 0; }
.bm-pad { padding: 16px; }
.bm-gold { color: var(--bm-amber); }

/* ---------------- lista de jogadores (ArenaPlayerWidget, 54 px) ---------------- */
.bm-tabpanel--list { min-height: 254px; }
.bm-plist { display: flex; flex-direction: column; gap: 2px; }
.bm-prow {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 54px;
  padding: 2px 8px 2px 5px;
  border-image: url(/bombermon/ui/lobby/button-pressed.png) 4 fill / 4px stretch;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}
.bm-prow__av { --t: 48; --r: down; width: 48px; height: 48px; flex: none; } /* down: com zoom × DPR 2,25 o avatar ia a 53 px num espaço de 50 e a linha vizinha cobria a borda dele */
.bm-prow--empty .bm-prow__av { border-radius: 50%; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.bm-prow__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
/* só o nome encolhe (reticências): as etiquetas Dono/Você/Bot ficam sempre visíveis, mesmo no celular */
.bm-prow__name { display: flex; align-items: center; min-width: 0; font: 600 13px/1.1 var(--bm-font-name); color: #fff; white-space: nowrap; }
.bm-prow__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bm-prow__stats { display: flex; gap: 14px; }
.bm-stat { display: inline-flex; align-items: center; gap: 4px; min-width: 60px; }
.bm-stat > img { --t: 15; }
.bm-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  color: #dfe4f7;
  font: 700 9px/1.2 var(--bm-font-ui);
  vertical-align: middle;
  flex: none;
}
.bm-tag--host { color: var(--bm-amber); }
.bm-tag--bot { color: #7fd3ff; }
.bm-tag--off { color: #ff8a80; }
/* "Estou pronto" da sala (Sala-Confirmar.dc.html): selo PRONTO / AGUARDANDO por vaga; a vaga que falta ganha borda
   dourada tracejada */
.bm-tag--ok, .bm-tag--wait { display: inline-flex; align-items: center; gap: 3px; border: 1px solid; }
.bm-tag--ok { color: #86e397; background: #173d2a; border-color: #2e8540; }
.bm-tag--wait { color: #ffe08a; background: #3d3416; border-color: #b8901f; }
.bm-tag--ok img { --t: 10; }
.bm-tag .bm-hg { width: 6px; height: 7px; }
.bm-seat--wait { outline: 1px dashed #ffcf3f; outline-offset: -1px; }
.bm-rconf { flex: 1 1 100%; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; background: #111c36; box-shadow: inset 0 0 0 1px #2a3d68; }
.bm-rconf p { margin: 0; }
.bm-rconf__time { display: flex; align-items: center; gap: 6px; color: #dfe4f7; }
.bm-rconf__time .bm-hg { width: 12px; height: 14px; flex: none; }
.bm-rconf__time .bm-num { --fs: 16; color: #fff; }
.bm-rconf.is-late .bm-rconf__time .bm-num { color: #ff9d9d; }
.bm-rconf__bar { height: 6px; background: #050a16; }
.bm-rconf__bar i { display: block; height: 100%; width: 100%; background: #ffcf3f; transition: width 250ms linear; }
.bm-rconf.is-late .bm-rconf__bar i { background: #ef3a3a; }
.bm-rconf__who { color: #fff; font-weight: 700; }
.bm-rconf__who b { color: #ffe08a; }
.bm-seat { position: relative; }
/* espaço do X de tirar da sala: nome comprido não passa por baixo dele */
.bm-seat:has(.bm-x) .bm-prow { padding-right: 30px; }
.bm-x {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  padding: 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.bm-x img { --t: 16; }
.bm-x:hover { filter: brightness(1.3); }

/* fila */
.bm-queue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.bm-queue-arena { color: var(--bm-amber); font-weight: 700; }
.bm-queue-wait b { color: #00ff00; }
/* no meio do texto: a tinta (7/8 de cima do em) assenta na linha de base do Verdana */
.bm-queue-wait .bm-num { padding-top: 0; vertical-align: -0.125em; }
.bm-queue-time { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #fff; font-weight: 700; }
.bm-queue-time img { --t: 15; }

/* sala */
.bm-room { display: flex; flex-direction: column; gap: 8px; }
.bm-room__link label { display: block; margin-bottom: 3px; color: #dfe4f7; }
.bm-room__linkrow { display: flex; gap: 4px; }
.bm-room__linkrow .bm-input { flex: 1; font-size: 10px; }
.bm-room__arena { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.bm-room__arena b { color: var(--bm-amber); }
.bm-select {
  height: 22px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #0b1123;
  color: var(--bm-amber);
  font: 700 11px var(--bm-font-ui);
}
.bm-room__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; min-height: 24px; }
.bm-room__actions .bm-muted { margin-right: auto; }

/* avatar (BombermonAvatarCheckBox 60x60) */
.bm-tabpanel--avatar .bm-tabpanel__body { padding: 20px 0 10px; }
.bm-avgrid { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.bm-avrow { display: flex; gap: 30px; }
.bm-avrow--2 { margin-left: 20px; }
.bm-avcheck {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
}
.bm-avcheck img { --t: 60; }
.bm-avcheck:hover { opacity: 0.8; }
.bm-avcheck[aria-checked="true"] { opacity: 1; }
/* image-color #00ff00: multiplica a imagem e ela fica verde */
.bm-avcheck[aria-checked="true"] img { filter: grayscale(1) brightness(1.15) sepia(1) hue-rotate(60deg) saturate(9); }
.bm-avcheck:focus-visible { outline: 1px dashed var(--bm-amber); border-radius: 50%; }

/* rank */
.bm-tabpanel--rank .bm-tabpanel__body { padding-top: 6px; }
.bm-rank { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bm-rank__left { flex: 1 1 220px; min-width: 0; }
.bm-rank__label { margin: 0 0 8px 5px; font: 700 11px var(--bm-font-name); color: #fff; }
.bm-rank__table { width: 100%; border-collapse: collapse; font: 600 12px var(--bm-font-name); }
.bm-rank__table td { height: 24px; border: 1px solid #ffffff44; text-align: center; color: #fff; padding: 0 4px; }
.bm-rank__table td:first-child { width: 20px; }
.bm-rank__table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.bm-rank__w { width: 40px; color: #00ff00 !important; }
.bm-rank__mine { margin: 6px 0 0 5px; color: var(--bm-amber); }
.bm-rank__reward { flex: 0 1 130px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bm-rank__star {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  /* 3 quadros de 50x50 lado a lado: em % o passo acompanha o tamanho (0%, 50%, 100% = quadros 1, 2, 3) */
  background: url(/bombermon/ui/lobby/star-sparkle-strip.png) 0 0 / 300% 100% no-repeat;
  animation: bm-star 300ms steps(3) infinite;
}
/* brilho (50 px no PNG) em escala inteira de pixels físicos, perto dos 100 px de UI */
@supports (width: calc(round(nearest, 2.5, 1) * 1px)) {
  .bm-rank__star {
    --sw: calc(max(1, round(nearest, 2 * var(--bm-dev), 1)) * 50px / var(--bm-dev) + 0.002px);
    width: var(--sw);
    height: var(--sw);
  }
}
.bm-rank__star img { width: 36px; height: 36px; margin: -1px -3px; pointer-events: none; }
/* a estrela (arte 30x34 no px-reward.svg, caixa 36x36: múltiplo de 3 e com margem vazia, como as .bm-pxi) em escala
   inteira de pixels físicos; a margem negativa deixa o lugar ocupado com os 30x34 da arte */
@supports (width: calc(round(nearest, 2.5, 1) * 1px)) {
  .bm-rank__star img {
    --k: max(1, round(nearest, var(--bm-dev), 1));
    width: calc(36px * var(--k) / var(--bm-dev) + 0.002px);
    height: calc(36px * var(--k) / var(--bm-dev) + 0.002px);
    margin: calc(-1px * var(--k) / var(--bm-dev)) calc(-3px * var(--k) / var(--bm-dev));
  }
}
@keyframes bm-star { to { background-position: 150% 0; } }
.bm-rank__champ { margin: 0; color: #dfe4f7; font-size: 10px; }
.bm-rank__champ b { color: var(--bm-amber); }

/* como jogar */
.bm-help h3 { margin: 6px 0 4px; font: 700 11px var(--bm-font-ui); color: var(--bm-amber); }
.bm-help ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bm-help li { line-height: 1.35; }
.bm-rules li { padding-left: 10px; position: relative; }
.bm-rules li::before { content: "•"; position: absolute; left: 0; color: var(--bm-amber); }
.bm-bonuses li { display: flex; align-items: center; gap: 6px; }
.bm-help__credit { margin-top: 10px; font-size: 10px; }
.bm-bonuses img { --t: 26; }
.bm-help kbd {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  margin: 0 1px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #2a3f7e;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 700 10px/14px var(--bm-font-ui);
  text-align: center;
}

/* celular: botões com área de toque maior (o 9-slice estica sem perder a borda) */
@media (pointer: coarse), (max-width: 700px) {
  .bm-btn { height: 28px; }
  .bm-arena { height: 64px; }
  .bm-arena__players, .bm-arena__enter { top: 30px; height: 28px; }
  .bm-arena__slots { top: 32px; }
  .bm-input, .bm-select { height: 28px; font-size: 12px; }
}
@media (max-width: 700px) {
  .bm-stage { padding: 10px 4px 14px; margin: 0 -8px; }
  .bm-h1 { font-size: 13px; }
  .bm-h1 span { display: block; font-size: 18px; }
  .bm-window { width: calc((100vw - 32px) / var(--z)); }
  .bm-ident { padding-right: 0; padding-top: 18px; flex-wrap: wrap; }
  .bmw-counters { top: 74px; }
}

/* ---------------- conta (topbar e modal: classes do /styles.css) ---------------- */
.bm-account { display: flex; align-items: center; }
.bm-account .account-name { max-width: 120px; }
.bm-account .menu-item { display: flex; align-items: center; gap: 8px; }
.bm-menu-ic { --t: 16; }
.bm-auth .modal-sub { font-size: 17px; }

/* ---------------- placar completo (troféu, derrota, empate, abates: ui/icons/px-*.svg) ----------------
   Os dígitos da Press Start 2P têm 1 em de largura: com números grandes o placar cresce. O fitCounters (lobby.js)
   mede e escolhe: no canto, por cima da linha "Seu nome" (que reserva a largura dele); numa linha própria
   (.bm-window--cnt-wrap, como no celular) quando a linha "Seu nome" ficaria apertada; e apertado
   (.bmw-counters--tight: vãos menores, dígitos e ícones um degrau abaixo, ainda em pixels físicos inteiros) quando
   nem assim cabe na janela. No limite quebra em duas linhas, sem sair da janela. */
.bmw-counters { gap: 2px 8px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 20px); }
.bmw-counters--tight { gap: 2px 4px; }
.bmw-counters--tight .bmw-counter { gap: 2px; }
.bmw-counters--tight .bmw-counter > img { --t: 12; }
.bmw-counters--tight .bm-num { --fs: 8; }
/* espaço do placar do canto (largura medida pelo fitCounters do lobby.js) */
.bm-ident { padding-right: calc(var(--bmw-cw, 186px) + 12px); }
.bm-window--cnt-wrap .bmw-counters { top: 74px; }
.bm-window--cnt-wrap .bmw-body { padding-top: calc(var(--bmw-ch, 16px) + 10px); }
.bm-window--cnt-wrap .bm-qbanner + .bmw-body { padding-top: 8px; }
.bm-window--cnt-wrap .bm-ident { padding-right: 0; }
.bm-ident > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-ident__name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.bm-ident__name .bm-name { flex: 1; }
.bm-ident__login, .bm-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bm-amber);
  font: 700 10px var(--bm-font-ui);
  text-decoration: underline;
  cursor: pointer;
}
.bm-linkbtn { font-size: inherit; }
.bm-ident__login:hover, .bm-linkbtn:hover { color: #fff; }

/* links dentro da janela (perfil, ranking, histórico) */
.bm-window a:not(.bm-btn) { color: var(--bm-amber); }
.bm-window a:not(.bm-btn):hover { color: #fff; }

/* ---------------- ranking ---------------- */
.bm-rank__table th { height: 18px; color: #aab1c9; font: 700 9px var(--bm-font-ui); text-align: center; border-bottom: 1px solid #ffffff44; }
.bm-rank__table th img { --t: 12; display: block; margin: calc(var(--pxi) / -18) auto; }
.bm-rank__table th:nth-child(2) { text-align: left; padding-left: 6px; }
.bm-rank__table td:nth-child(2) { text-align: left; padding-left: 6px; }
/* vertical-align: sem ele o bloco do nome sentava na linha de base e ficava acima do # e das vitórias */
.bm-rank__who { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; vertical-align: middle; text-decoration: none; color: #fff !important; }
.bm-rank__who:hover span { text-decoration: underline; }
.bm-rank__who img { --t: 18; }
.bm-rank__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-rank__table tr.is-me td { background: rgba(253, 230, 138, 0.12); }
.bm-rank__table tr.is-me .bm-rank__who { color: var(--bm-amber) !important; }
.bm-rank__l { width: 40px; color: #ff8a80 !important; }
.bm-rank__none { color: #aab1c9 !important; text-align: center !important; }
.bm-rank__label--all { margin-top: 10px; }
.bm-rank__note { margin-top: 6px; font-size: 10px; }
.bm-rank__champ a { text-decoration: none; }

/* ---------------- histórico ---------------- */
.bm-tabpanel--hist { min-height: 254px; }
/* 4 colunas quando cabem; no celular 2x2 (com 4 colunas a última caixa passava da borda do painel) */
.bm-hstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 4px; }
.bm-hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 2px 4px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bm-hstat__label { color: #aab1c9; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; }
.bm-hstat__val { display: flex; align-items: center; gap: 5px; min-height: 16px; }
.bm-hstat__val img { --t: 14; }
.bm-hstat .bm-num { --fs: 12; color: #fff; }
.bm-hnote { margin: 2px 0 0; color: #dfe4f7; font-size: 10px; line-height: 1.4; }
.bm-hnote b { color: var(--bm-amber); }
.bm-hlist { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.bm-hrow {
  --bm-hc: #aab1c9;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 7px 6px;
  background: rgba(22, 32, 65, 0.72);
  border-left: 3px solid var(--bm-hc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.bm-hrow--win { --bm-hc: #00ff00; }
.bm-hrow--lose { --bm-hc: #ff5a4f; }
.bm-hrow--draw { --bm-hc: #c4b5fd; }
.bm-hrow--cancel { --bm-hc: #c4b5fd; }
.bm-hrow--live { --bm-hc: var(--bm-amber); }
/* sem espaço, a data desce para a linha de baixo em vez de cortar o nome da arena */
.bm-hrow__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.bm-hres { color: var(--bm-hc); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; flex: none; }
/* ícone do resultado antes do texto e troféu de quem venceu (px-*.svg), na escala inteira das .bm-pxi: arte de 16
   numa caixa de 18, com a margem negativa de 1 célula (a baseline do inline-block vazio é a borda de baixo da margem,
   então a arte fica onde ficava com a caixa de 16) */
.bm-hrow--win .bm-hres::before, .bm-hrow--lose .bm-hres::before, .bm-hrow--draw .bm-hres::before, .bm-hp.is-win::after {
  --t: 12;
  --pxs: calc(var(--t) * 18px / 16);
  content: "";
  display: inline-block;
  flex: none;
  width: var(--pxs);
  height: var(--pxs);
  margin: calc(var(--pxs) / -18);
  margin-right: calc(4px - var(--pxs) / 18);
  vertical-align: -3px;
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
@supports (width: calc(round(nearest, 2.5, 1) * 1px)) {
  .bm-hrow--win .bm-hres::before, .bm-hrow--lose .bm-hres::before, .bm-hrow--draw .bm-hres::before, .bm-hp.is-win::after {
    --pxs: calc(max(1, round(nearest, var(--t) * var(--bm-dev) / 16, 1)) * 18 / var(--bm-dev) * 1px + 0.002px);
  }
}
.bm-hrow--win .bm-hres::before { background-image: url(/bombermon/ui/icons/px-trophy.svg); }
.bm-hrow--lose .bm-hres::before { background-image: url(/bombermon/ui/icons/px-defeat.svg); }
.bm-hrow--draw .bm-hres::before { background-image: url(/bombermon/ui/icons/px-draw.svg); }
.bm-harena { color: var(--bm-amber); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-hwhen { margin-left: auto; color: #aab1c9; font-size: 10px; flex: none; }
.bm-hrow__mid { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.bm-hfacts { color: #dfe4f7; font-size: 10px; flex: 1; min-width: 0; }
.bm-hrow__replay { flex: none; text-decoration: none; color: #00ff00; }
.bm-hplayers { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 0; padding: 0; list-style: none; }
.bm-hp { display: inline-flex; align-items: center; gap: 3px; max-width: 48%; color: #dfe4f7; font: 600 10px var(--bm-font-name); }
.bm-hp img { --t: 16; opacity: 0.85; }
.bm-hp > span, .bm-hp > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-hp.is-win > span, .bm-hp.is-win > a { color: #00ff00; }
.bm-hp.is-win::after { --t: 10; margin: calc(var(--pxs) / -18); margin-left: calc(1px - var(--pxs) / 18); background-image: url(/bombermon/ui/icons/px-trophy.svg); }
.bm-hp.is-me > span, .bm-hp.is-me > a { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.bm-hmore { display: flex; justify-content: center; }

@media (max-width: 700px) {
  /* os 4 contadores ganham uma linha própria acima de qualquer tela (não cobrem o título do painel) */
  .bmw-body { padding-top: calc(var(--bmw-ch, 16px) + 10px); }
  .bm-qbanner + .bmw-body { padding-top: 8px; }
  .bm-ident { padding-right: 0; padding-top: 0; }
  .bm-hwhen { font-size: 9px; }
  .bm-hlist { max-height: none; }
  /* escolha de avatar: 4 por linha cabendo na janela estreita (60 px + 30 px de vão passavam da borda dos dois lados) */
  .bm-avrow { display: grid; grid-template-columns: repeat(4, minmax(0, 48px)); gap: 2px; }
  .bm-avrow--2 { margin-left: 0; }
  .bm-avcheck { width: 100%; height: auto; aspect-ratio: 1; }
  .bm-avcheck img { --t: 40; }
}

/* display explícito dos componentes não pode vencer o atributo hidden */
.bm-window [hidden] { display: none !important; }

/* ============================== avisos e modais (onda 4) ==============================
   Fora da janela do arcade (sem o `zoom` dela): px de CSS, no visual das telas novas (docs/bombermon/onda4-design:
   painel #111c36, moldura de 4 px #050a16 com filete #2a3d68 e sombra seca, aba em Press Start 2P, botões com
   relevo). Press Start 2P só em 8, 16, 24 e 32 px (12 nos rótulos de botão, como o kit do lobby). Ícones em pixel art
   via .bm-pxi (escala inteira com o --bm-dev do :root). Por cima de tudo, até da partida (.hn-match, z 1000). */
.bm-h1__icon { --t: 32; vertical-align: -6px; margin-right: 4px; }

/* botões */
.bmb {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border: 4px solid #050a16;
  font: 400 12px/1.25 var(--font-pixel, "Press Start 2P", monospace);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.bmb:focus-visible { outline: 3px solid #ffcf3f; outline-offset: 3px; }
.bmb--blue { color: #eaf0ff; background: #1e3058; box-shadow: 4px 4px 0 #02060f, inset 0 3px 0 #2f4a85, inset 0 -4px 0 #152241; }
.bmb--blue:hover { background: #26407a; }
.bmb--gold { color: #1a1405; background: #ffcf3f; box-shadow: 4px 4px 0 #02060f, inset 0 3px 0 #ffe38a, inset 0 -4px 0 #d9a520; }
.bmb--gold:hover { background: #ffd95c; }
.bmb--red { color: #fff; background: #d12d2d; box-shadow: 6px 6px 0 #02060f, inset 0 4px 0 #ef3a3a, inset 0 -6px 0 #a32121; }
.bmb--red:hover { background: #e03434; }
.bmb--big { width: 100%; min-height: 64px; font-size: 16px; }
.bmb[aria-disabled="true"] { filter: saturate(0.3) brightness(0.7); cursor: default; }
.bmb:active:not([aria-disabled="true"]) { transform: translate(2px, 2px); }

/* toast (Avisos.dc.html): alto e meio da tela, logo abaixo da barra do site; na partida, no alto */
.bm-toast {
  position: fixed;
  left: 50%;
  top: calc(76px + env(safe-area-inset-top, 0px));
  z-index: 3000;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(620px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  border: 4px solid #050a16;
  font: 800 17px/1.3 var(--font-body, sans-serif);
  animation: bm-toast-in 160ms steps(2, end);
}
html.bm-playing .bm-toast { top: calc(16px + env(safe-area-inset-top, 0px)); }
.bm-toast--warn { color: #ffe08a; background: #3d3416; box-shadow: 6px 6px 0 #02060f, inset 0 0 0 2px #b8901f; }
.bm-toast--info { color: #eaf0ff; background: #1c2440; box-shadow: 6px 6px 0 #02060f, inset 0 0 0 2px #4b5f95; }
.bm-toast--error { color: #ffd0d0; background: #4a1f2a; box-shadow: 6px 6px 0 #02060f, inset 0 0 0 2px #a32a2a; }
.bm-toast__badge {
  flex: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid #050a16;
  font: 400 16px/1 var(--font-pixel, "Press Start 2P", monospace);
}
.bm-toast--warn .bm-toast__badge { color: #1a1405; background: #f2c94c; }
.bm-toast--info .bm-toast__badge { color: #0a1122; background: #7fd3ff; }
.bm-toast--error .bm-toast__badge { color: #fff; background: #d12d2d; }
.bm-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bm-toast__ok {
  flex: none;
  box-sizing: border-box;
  height: 44px;
  padding: 0 16px;
  border: 4px solid #050a16;
  color: #eaf0ff;
  background: #1e3058;
  box-shadow: 4px 4px 0 #02060f, inset 0 3px 0 #2f4a85, inset 0 -4px 0 #152241;
  font: 400 12px/1 var(--font-pixel, "Press Start 2P", monospace);
  cursor: pointer;
}
.bm-toast__ok:focus-visible, .bm-toast__act:focus-visible { outline: 3px solid #ffcf3f; outline-offset: 2px; }
.bm-toast__btns { flex: none; display: flex; gap: 8px; }
/* ação do aviso ("VOLTAR PARA A FILA AQUI"): o botão dourado do kit, na altura do OK */
.bm-toast__act {
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  border: 4px solid #050a16;
  color: #1a1405;
  background: #ffcf3f;
  box-shadow: 4px 4px 0 #02060f, inset 0 3px 0 #ffe38a, inset 0 -4px 0 #d9a520;
  font: 400 12px/1 var(--font-pixel, "Press Start 2P", monospace);
  cursor: pointer;
}
.bm-toast__act:hover { background: #ffd95c; }
@keyframes bm-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
/* com a ação, os botões descem para uma linha própria quando não cabem ao lado do texto */
.bm-toast--act { flex-wrap: wrap; }
.bm-toast--act .bm-toast__text { flex: 1 1 220px; }
.bm-toast--act .bm-toast__btns { margin-left: auto; }
@media (max-width: 480px) {
  .bm-toast { gap: 10px; padding: 10px; font-size: 16px; }
  .bm-toast--act .bm-toast__btns { width: 100%; }
  .bm-toast--act .bm-toast__act { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .bm-toast { animation: none; } }
/* Durante a partida a HUD esconde todo filho do <body> que não é a partida (hud.css: html.bm-playing body >
   :not(#bm-match)). O toast e as camadas modais ficam por cima dela e precisam continuar à vista (um aviso no meio do
   jogo, o "A PARTIDA VAI COMEÇAR" de uma sala): esta regra é mais específica (1,2,2 contra 1,1,2). */
html.bm-playing body > .bmo:not(#bm-match),
html.bm-playing body > .bm-toast:not(#bm-match) { visibility: visible; }

/* camada modal: fundo escurecido, cartão com aba */
.bmo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(5, 10, 22, 0.8);
  color: #eaf0ff;
  font-family: var(--font-body, sans-serif);
}
.bmo[hidden] { display: none; }
.bmo__card { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); margin: auto 0; }
.bmo__tab {
  align-self: flex-start;
  position: relative;
  z-index: 1;
  margin: 0 0 -6px 16px;
  padding: 12px 16px 14px;
  border: 4px solid #050a16;
  border-bottom: 0;
  background: #111c36;
  box-shadow: inset 2px 2px 0 #2a3d68, inset -2px 0 0 #2a3d68;
  color: #ffcf3f;
  font: 400 16px/1 var(--font-pixel, "Press Start 2P", monospace);
  letter-spacing: 0;
  max-width: calc(100% - 32px);
  text-wrap: balance;
}
/* título que não cabe numa linha (celular estreito): quebra com folga entre as linhas */
.bmo__tab { line-height: 1.5; padding-top: 8px; padding-bottom: 10px; }
.bmo__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 4px solid #050a16;
  background: #111c36;
  box-shadow: 8px 8px 0 #02060f, inset 0 0 0 2px #2a3d68;
}
.bmo [hidden] { display: none !important; }
.bmo .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Estou pronto" (Fila-Confirmar, Fila-Confirmar-Celular, Sala-Confirmar) */
.bmc__tab { color: #86e397; }
.bmc__tab.is-missed { color: #ff9d9d; }
.bmc__arena { display: flex; align-items: center; gap: 16px; }
.bmc__emblem { flex: none; box-sizing: border-box; width: 72px; height: 72px; display: grid; place-items: center; background: #0d1730; border: 4px solid #050a16; }
.bmc__emblem img { --t: 48; }
.bmc__arenatxt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bmc__aname { color: #ffcf3f; font: 400 16px/1.25 var(--font-pixel, "Press Start 2P", monospace); }
.bmc__asub { color: #b3c0e0; font-size: 16px; font-weight: 800; }
.bmc__lead { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.bmc__lead strong { color: #ffcf3f; }
.bmc__players { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bmc__p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 6px;
  background: #0d1730;
  border: 2px solid #2a3d68;
}
.bmc__p.is-me { background: #1c2b55; border-color: #ffcf3f; }
.bmc__frame { position: relative; box-sizing: border-box; display: grid; place-items: center; width: 80px; height: 80px; background: #0d1730; border: 4px solid #050a16; }
.bmc__p.is-me .bmc__frame { border-color: #ffcf3f; }
.bmc__badge { position: absolute; right: -12px; top: -12px; display: grid; place-items: center; }
.bmc__badge--wait { box-sizing: border-box; width: 32px; height: 32px; background: #3d3416; border: 2px solid #b8901f; }
.bmc__pname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; }
.bmc__you { padding: 4px 6px; color: #1a1405; background: #ffcf3f; font: 400 8px/1 var(--font-pixel, "Press Start 2P", monospace); }
.bmo__card[data-kind="room"] .bmc__frame { width: 56px; height: 56px; }
.bmo__card[data-kind="room"] .bmc__pname { font-size: 13px; }
.bmo__card[data-kind="room"] .bmc__p { padding: 12px 4px 8px; gap: 6px; }
.bmc__timer { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #0d1730; border: 2px solid #2a3d68; }
.bmc__trow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.bmc__clock { display: flex; align-items: center; gap: 12px; }
.bmc__clock .bm-hg { flex: none; }
.bmc__secs { color: #eaf0ff; font: 400 32px/1 var(--font-pixel, "Press Start 2P", monospace); }
.bmc__word { color: #b3c0e0; font-size: 16px; font-weight: 800; }
.bmc__ready { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #050a16; border: 2px solid #2a3d68; }
.bmc__rlabel { color: #b3c0e0; font: 400 8px/1 var(--font-pixel, "Press Start 2P", monospace); }
.bmc__rnum { color: #eaf0ff; font: 400 16px/1 var(--font-pixel, "Press Start 2P", monospace); }
.bmc__pips { display: flex; gap: 6px; }
.bmc__pips i { width: 12px; height: 12px; background: #2a3d68; box-shadow: 0 0 0 2px #050a16; }
.bmc__pips i.is-on { background: #86e397; }
.bmc__bar { height: 16px; box-sizing: border-box; background: #050a16; border: 2px solid #050a16; }
.bmc__bar i { display: block; height: 100%; width: 100%; background: #ffcf3f; box-shadow: inset 0 -3px 0 #d9a520; transition: width 250ms linear; }
/* 5 s ou menos: número e barra em vermelho (a mesma regra do gás da HUD) */
.bmc__timer.is-late .bmc__secs { color: #ff9d9d; }
.bmc__timer.is-late .bmc__bar i { background: #ef3a3a; box-shadow: inset 0 -3px 0 #993333; }
.bmc__rule { margin: 0; color: #b3c0e0; font-size: 15px; font-weight: 700; line-height: 1.45; }
/* o botão principal pisca em ouro enquanto a pessoa não responde: chama o olho mesmo sem som */
@keyframes bm-pronto { 50% { box-shadow: 6px 6px 0 #02060f, inset 0 4px 0 #ef3a3a, inset 0 -6px 0 #a32121, 0 0 0 4px #ffcf3f; } }
.bmc__go { animation: bm-pronto 0.9s steps(2, end) infinite; }
.bmc__go[aria-disabled="true"] { animation: none; }
@media (prefers-reduced-motion: reduce) { .bmc__go { animation: none; } }
.bmc__done {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #14301f;
  border: 4px solid #050a16;
  box-shadow: 4px 4px 0 #02060f, inset 0 0 0 2px #2e8540;
}
.bmc__done:focus { outline: none; }
.bmc__done:focus-visible { outline: 3px solid #ffcf3f; outline-offset: 3px; }
.bmc__donetxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bmc__donetxt b { color: #86e397; font-size: 20px; font-weight: 900; }
.bmc__donetxt span { font-size: 16px; font-weight: 800; }
.bmc__missed { margin: 0; padding: 16px; color: #ffe08a; background: #3d3416; border: 4px solid #050a16; box-shadow: 4px 4px 0 #02060f, inset 0 0 0 2px #b8901f; font-size: 18px; font-weight: 800; line-height: 1.4; }
.bmc__btns { display: flex; flex-direction: column; gap: 12px; }
.bmc__btns .bmb { width: 100%; }
.bmc__leave { color: #ff9d9d; }
@media (max-width: 560px) {
  .bmo { padding: max(16px, env(safe-area-inset-top, 0px)) 16px 16px; }
  .bmo__tab { margin-left: 12px; padding: 8px 14px 10px; }
  .bmo__body { gap: 16px; padding: 16px; box-shadow: 6px 6px 0 #02060f, inset 0 0 0 2px #2a3d68; }
  .bmc__emblem { width: 56px; height: 56px; }
  .bmc__emblem img { --t: 32; }
  .bmc__players { gap: 8px; }
  .bmc__p { padding: 10px 4px 8px; gap: 6px; }
  .bmc__frame { width: 56px; height: 56px; }
  .bmc__frame img { --t: 48 !important; }
  .bmc__pname { font-size: 13px; }
  .bmc__you { padding: 4px 5px; }
  .bmc__timer { padding: 12px; }
  .bmc__trow { flex-direction: column; align-items: flex-start; }
  .bmc__word { font-size: 15px; }
  .bmc__rule { font-size: 14px; }
}
/* Tela baixa (notebook com as barras do navegador, iPhone SE com as do Safari, celular deitado): o "Estou pronto"
   inteiro cabe sem rolar, com o ESTOU PRONTO à vista assim que abre (o prazo é curto). Reserva para o que ainda não
   couber: o botão fica preso no pé da tela enquanto o resto rola. */
.bmc__go { position: sticky; bottom: 8px; z-index: 2; }
@media (max-height: 760px) {
  .bmo { padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
  .bmc__tab { padding: 8px 14px 10px; }
  .bmc .bmo__body { gap: 12px; padding: 16px; box-shadow: 6px 6px 0 #02060f, inset 0 0 0 2px #2a3d68; }
  .bmc__arena { gap: 12px; }
  .bmc__emblem { width: 56px; height: 56px; }
  .bmc__arenatxt { gap: 8px; }
  .bmc__players { gap: 8px; }
  .bmc__p { padding: 8px 4px; gap: 6px; }
  .bmc__frame { width: 56px; height: 56px; }
  .bmc__frame img { --t: 48 !important; }
  .bmc__timer { gap: 8px; padding: 12px; }
  .bmc__secs { font-size: 24px; }
  .bmc__bar { height: 12px; }
  .bmc__rule { font-size: 14px; line-height: 1.35; }
  .bmc__go.bmb--big { min-height: 56px; }
  .bmc__btns { gap: 8px; }
  .bmc__btns .bmb { min-height: 48px; }
  .bmc__done { padding: 12px; }
  .bmc__donetxt b { font-size: 18px; }
  .bmc__missed { padding: 12px; font-size: 16px; }
}
/* celular baixo em pé (iPhone SE com as barras do Safari, 320×568): a regra some (o leitor de tela ainda a lê pelo
   aria-describedby) e o tempo fica numa linha */
@media (max-height: 600px) and (max-width: 560px) {
  .bmc__rule { display: none; }
  .bmc__arena { gap: 10px; }
  .bmc__emblem { width: 48px; height: 48px; border-width: 2px; }
  .bmc__emblem img { --t: 32 !important; }
  .bmc__aname { font-size: 12px; }
  .bmc__asub { font-size: 14px; }
  .bmc__trow { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  .bmc__word { display: none; }
  .bmc__ready { padding: 6px 8px; gap: 8px; }
  .bmc__pips { display: none; }
}
/* celular deitado: duas colunas no pé (ESTOU PRONTO | SAIR), jogadores em linha (avatar e nome lado a lado), sem o
   emblema nem a regra */
@media (max-height: 480px) {
  .bmo { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .bmo__card.bmc { width: min(640px, 100%); }
  .bmc__tab { margin-left: 12px; padding: 6px 12px 8px; font-size: 12px; }
  .bmc .bmo__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px; }
  .bmc .bmo__body > * { grid-column: 1 / -1; }
  .bmc .bmo__body > .bmc__go, .bmc .bmo__body > .bmc__done { grid-column: 1; }
  .bmc .bmo__body > .bmc__btns { grid-column: 2; align-self: center; }
  .bmc[data-state="missed"] .bmo__body > .bmc__btns { grid-column: 1 / -1; flex-direction: row; }
  .bmc[data-state="missed"] .bmc__btns .bmb { flex: 1; width: auto; padding: 0 12px; }
  .bmc[data-state="missed"] .bmc__btns [data-act="again"] { flex: 1.6; }
  .bmc__emblem, .bmc__rule { display: none; }
  .bmc__arenatxt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .bmc__aname { font-size: 12px; }
  .bmc__asub { font-size: 14px; }
  .bmc__lead { font-size: 15px; }
  .bmo__card.bmc .bmc__p { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 2px 8px; padding: 6px; }
  .bmo__card.bmc .bmc__frame { grid-row: span 2; width: 44px; height: 44px; border-width: 2px; }
  .bmc__frame img { --t: 32 !important; }
  .bmc__p:not(.is-me) .bmc__pname { grid-row: span 2; }
  .bmo__card.bmc .bmc__pname { font-size: 13px; }
  .bmc__badge { right: -8px; top: -8px; }
  .bmc__badge img { --t: 16 !important; }
  .bmc__badge--wait { width: 20px; height: 20px; }
  .bmc__timer { gap: 6px; padding: 8px 12px; }
  .bmc__trow { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 12px; }
  .bmc__ready { padding: 6px 8px; }
  .bmc__go.bmb--big { min-height: 48px; font-size: 14px; }
  .bmc__done { padding: 8px 12px; gap: 12px; box-shadow: 3px 3px 0 #02060f, inset 0 0 0 2px #2e8540; }
  .bmc__done img { --t: 32 !important; }
  .bmc__donetxt { gap: 2px; }
  .bmc__donetxt b { font-size: 16px; }
  .bmc__donetxt span { font-size: 14px; }
  .bmc__missed { padding: 10px 12px; font-size: 15px; }
}

/* perfil em modal (Perfil-Modal.dc.html) */
.bmp { width: min(720px, 100%); }
.bmp .bmo__body { gap: 20px; }
.bmp__x { position: absolute; top: 16px; right: 16px; width: 44px; min-height: 44px; height: 44px; padding: 0; box-shadow: 3px 3px 0 #02060f, inset 0 3px 0 #2f4a85, inset 0 -4px 0 #152241; }
.bmp__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-right: 56px; }
.bmp__name { font-size: 26px; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.bmp__sub { color: #b3c0e0; font-size: 14px; font-weight: 700; }
/* bombermon.com: avatar pixel do jogador no lugar do Trainer Card */
.bmp__av { --t: 36; align-self: center; }
/* a caixa do card tem o tamanho dele (664×352) desde o começo: o PNG pode demorar (o servidor desenha na 1ª vez) */
.bmp__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 664px;
  aspect-ratio: 664 / 352;
  background: #15172a;
  border: 4px solid #050a16;
}
.bmp__card img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.bmp__card.is-loaded img { opacity: 1; }
.bmp__card.is-error img { display: none; }
.bmp__cardmsg { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: #b3c0e0; font-weight: 800; text-align: center; }
.bmp__bm { display: flex; flex-direction: column; gap: 12px; }
.bmp__h { margin: 0; color: #b3c0e0; font: 400 12px/1 var(--font-pixel, "Press Start 2P", monospace); }
.bmp__stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bmp__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 12px; background: #0d1730; border: 2px solid #2a3d68; min-width: 0; }
.bmp__stat dt { color: #b3c0e0; font-size: 13px; font-weight: 800; line-height: 1.25; }
.bmp__stat dd { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.bmp__val { color: #eaf0ff; font: 400 24px/1 var(--font-pixel, "Press Start 2P", monospace); overflow: hidden; text-overflow: ellipsis; }
.bmp__stat.is-gold .bmp__val { color: #ffcf3f; }
.bmp__stat.is-green .bmp__val { color: #86e397; }
.bmp__note { margin: 0; color: #b3c0e0; font-size: 14px; font-weight: 700; }
.bmp__note:empty { display: none; }
.bmp__btns { display: flex; gap: 12px; }
.bmp__full { flex: 1; }
/* espelho com o bombermon.com no ar: "Ver no Bombermon.com" (bombermon-com.md §7.2) */
.bmp__bmcom { margin: -8px 0 0; text-align: center; font-size: 15px; font-weight: 800; }
.bmp__bmcom a { color: #ffcf3f; }
@media (max-width: 560px) {
  .bmp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bmp__val { font-size: 16px; }
  .bmp__btns { flex-direction: column; }
  .bmp__name { font-size: 22px; }
}