/* Menú de inicio: el canvas (menuView) y, encima, el formulario HTML del perfil.
   Los formularios se diseñan en la pantalla lógica de 320x240 y se agrandan con --ui, igual que el canvas. */
#join { width: auto; }
#menuStage { position: relative; display: inline-block; line-height: 0; }
#menuStage canvas { display: block; }

#menuStage .panel {
  position: absolute; left: 0; top: 0; width: 320px; height: 240px;
  transform-origin: 0 0; transform: scale(var(--ui, 1));
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); line-height: normal; text-align: left;
  font-family: 'Determination', monospace; color: #fff;
}
.panel .box { width: 236px; padding: 10px 12px 12px; border: 3px solid #fff; background: #000; }
.panel h2 { margin: 0 0 8px; font: 16px 'Determination', monospace; color: #00e5ff; }
.panel label { display: block; margin-bottom: 6px; font-size: 8px; text-transform: uppercase; }
.panel .row { display: flex; gap: 8px; }
.panel .row label { flex: 1; min-width: 0; }

.panel input {
  display: block; width: 100%; margin: 3px 0 0; padding: 3px 5px; height: 26px;
  font: 16px 'Determination', monospace; color: #fff; background: #000;
  border: 2px solid #fff; border-radius: 0; outline: none;
}
.panel input:focus { border-color: #ffe600; }
.panel input[type='color'] { padding: 1px; cursor: pointer; }

.panel .status { min-height: 20px; margin: 4px 0; font-size: 8px; line-height: 10px; }
.panel .status.err { color: #ff6b6b; }
.panel .status.warn { color: #ffa24d; }
.panel .status.ok { color: #00e5ff; }
#joinStatus { color: #00e5ff; }

.panel .buttons { display: flex; justify-content: space-between; gap: 8px; }
.panel button {
  padding: 2px 12px; font: 16px 'Determination', monospace; color: #fff; background: #000;
  border: 2px solid #fff; border-radius: 0; cursor: pointer;
}
.panel button:hover, .panel button:focus-visible { color: #ffe600; border-color: #ffe600; outline: none; }

/* Login / registro */
.panel .wide { display: block; width: 100%; margin: 0 0 4px; font-size: 14px; }
.panel button:disabled { color: #777; border-color: #555; cursor: not-allowed; }
.panel .note { margin: 0 0 8px; font-size: 8px; color: #ffa24d; text-align: center; }
.panel .link { display: block; margin: 8px auto 0; padding: 0; border: 0; font-size: 8px; color: #00e5ff; background: none; }
.panel .link:hover, .panel .link:focus-visible { border: 0; }
.panel input[readonly] { color: #00e5ff; border-color: #555; }
.panel .box { max-height: 96vh; overflow-y: auto; } /* con muchos campos, en pantallas bajas el panel scrollea en vez de cortarse */