@font-face { font-family: "PressStart2P"; src: url("../assets/PressStart2P.ttf") format("truetype"); }

:root {
  --azul: #66b3ff;
  --azul-escolhido: #5eb0ff;
  --roxo: #b366ff;
  --verde: #4fc46b;
  --amarelo: #fff200;
  --painel: #f4f4f4;
  --borda: #b8b8b8;
  --texto: #323232;
  --cinza: #8a8a8a;
  --vermelho: #bf1a1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: "PressStart2P", monospace; color: #000; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Palco de 1920x1080, igual à Reference Resolution do Canvas. É escalado para caber na janela. */
#palco { position: relative; width: 1920px; height: 1080px; flex: none; transform-origin: center center; overflow: hidden; }
.tela { position: absolute; inset: 0; display: none; }
.tela.ativa { display: block; }
.abs { position: absolute; }
.up { text-transform: uppercase; }
.pixel { image-rendering: pixelated; background-repeat: no-repeat; }

button { font-family: inherit; cursor: pointer; border: 2px solid var(--borda); border-radius: 6px; background: #fff; color: var(--texto); }
button:active { filter: brightness(0.88); }
button:disabled { opacity: 0.5; cursor: default; }
input { font-family: inherit; border: 2px solid #cfcfcf; border-radius: 4px; background: #fff; color: var(--texto); padding: 0 12px; outline: none; -webkit-user-select: text; user-select: text; }
input::placeholder { color: rgba(0,0,0,0.3); }
input:focus { border-color: var(--azul); }

.fundo-escuro { position: absolute; inset: 0; background: rgba(0,0,0,0.84); display: none; }
.fundo-escuro.ativa { display: block; }
.painel { position: absolute; background: var(--painel); border: 2px solid var(--borda); border-radius: 12px; color: #000; text-align: left; }
.painel h2 { font-size: 40px; font-weight: normal; }
.painel .apagado { color: rgba(0,0,0,0.4); }
.fechar { position: absolute; width: 56px; height: 56px; font-size: 28px; }

/* Bolinha que mostra se a página está recebendo atualizações do banco. */
.conexao { position: absolute; font-size: 14px; display: flex; align-items: center; gap: 12px; }
.conexao::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--vermelho); }
.conexao.ok::before { background: var(--verde); }