/* Player web (etapa 10): só o que é específico do navegador. O resto vem de motor/player.css (Windows). */
#web-aviso {
  position: fixed; left: 50%; bottom: 5vh; transform: translateX(-50%); z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(0, 0, 0, .82); color: #fff; border: 2px solid var(--verde); border-radius: 14px;
  padding: 14px 26px; font-size: 18px; cursor: pointer; box-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
#web-aviso strong { color: var(--verde); font-size: 20px; }
#web-aviso[hidden] { display: none; }

#web-info {
  position: fixed; right: 14px; bottom: 14px; z-index: 65; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid #555; background: rgba(0, 0, 0, .6); color: var(--verde);
  font: 700 17px/1 Georgia, serif; opacity: 0; transition: opacity .3s; cursor: pointer;
}
body.cursor #web-info, #web-info:focus-visible { opacity: 1; }

#web-diag { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .8); display: flex; align-items: center; justify-content: center; cursor: default; }
#web-diag[hidden] { display: none; }
.wd-painel { width: min(1100px, 95vw); max-height: 94vh; overflow: auto; background: var(--cinza); color: var(--branco); border-radius: 12px; border: 1px solid #333; }
.wd-painel header { display: flex; gap: 16px; align-items: center; padding: 14px 18px; background: #000; border-bottom: 3px solid var(--verde); border-radius: 12px 12px 0 0; }
.wd-painel header > div { flex: 1; }
.wd-logo { height: 36px; width: auto; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; padding: 16px; }
#wd-alertas { padding: 12px 16px 0; }
#wd-alertas:empty { display: none; }
.wd-alerta { background: rgba(255, 193, 7, .14); border: 1px solid #d4a017; color: #ffe08a; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.wd-alerta.erro { background: rgba(255, 107, 107, .14); border-color: var(--erro); color: #ffc9c2; }
.ok-txt { color: var(--verde); }
.erro-txt { color: #ffb4a8; }
.aviso-txt { color: #ffe08a; }
dd.ok-txt::before { content: '✓ '; }
dd.erro-txt::before { content: '✗ '; }
dd.aviso-txt::before { content: '! '; }